diff --git a/src/pages/Directory/NotesPage.jsx b/src/pages/Directory/NotesPage.jsx
index 04ac3a84..d25406ad 100644
--- a/src/pages/Directory/NotesPage.jsx
+++ b/src/pages/Directory/NotesPage.jsx
@@ -47,7 +47,7 @@ const NotesPage = ({ projectId, searchText }) => {
   if (isError) return <div>{error.message}</div>;
   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) => (
@@ -67,12 +67,18 @@ const NotesPage = ({ projectId, searchText }) => {
           </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>