diff --git a/src/pages/Directory/NotesPage.jsx b/src/pages/Directory/NotesPage.jsx
index 5b609709..58790562 100644
--- a/src/pages/Directory/NotesPage.jsx
+++ b/src/pages/Directory/NotesPage.jsx
@@ -76,7 +76,7 @@ const NotesPage = ({ projectId, searchText, onExport }) => {
   if (isLoading) return <NoteCardSkeleton />;
 
   return (
-    <div className="d-flex flex-column text-start mt-5">
+    <div className="d-flex flex-column text-start mt-3">
       {data?.data?.length > 0 ? (
         <>
           {data.data.map((noteItem) => (
@@ -96,12 +96,18 @@ const NotesPage = ({ projectId, searchText, onExport }) => {
           </div>
         </>
       ) : (
-        <div className="text-muted text-center mt-4">
-          {debouncedSearch
-            ? `No notes found matching "${searchText}"`
-            : Object.keys(filters).some((k) => filters[k] && filters[k].length)
-            ? "No notes found for the applied filters."
-            : "No notes available."}
+        // Card for "No notes available"
+        <div
+          className="card text-center d-flex align-items-center justify-content-center"
+          style={{ height: "200px" }}
+        >
+          <p className="text-muted mb-0">
+            {debouncedSearch
+              ? `No notes found matching "${searchText}"`
+              : Object.keys(filters).some((k) => filters[k] && filters[k].length)
+              ? "No notes found for the applied filters."
+              : "No notes available."}
+          </p>
         </div>
       )}
     </div>