diff --git a/frontend/src/index.css b/frontend/src/index.css
index f7b3c6b4..2bf00a4a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -531,3 +531,20 @@ input::-webkit-credentials-type-password-toggle {
   --text-muted: #94a3b8;
   --border: #334155;
 }
+/* Custom scrollbar for Quick Notes panel */
+.notes-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+
+.notes-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.notes-scroll::-webkit-scrollbar-thumb {
+  background-color: var(--border);
+  border-radius: 999px;
+}
+
+.notes-scroll::-webkit-scrollbar-thumb:hover {
+  background-color: var(--primary);
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Tasks.jsx b/frontend/src/pages/Tasks.jsx
index 047d95fb..2e827741 100644
--- a/frontend/src/pages/Tasks.jsx
+++ b/frontend/src/pages/Tasks.jsx
@@ -275,7 +275,7 @@ export default function Tasks() {
 {isNotesOpen && (
   <>
     {/* Mobile View - No Overlap */}
-    <div className="block md:hidden w-full mt-4">
+    <div className="block md:hidden w-full mt-4 max-h-[50vh] overflow-y-auto notes-scroll">
       <NotesWidget />
     </div>
 
@@ -288,6 +288,7 @@ export default function Tasks() {
         bg-white dark:bg-slate-900
         shadow-2xl rounded-2xl overflow-hidden
         border border-gray-100 dark:border-slate-800
+        max-h-[70vh] overflow-y-auto notes-scroll
       "
     >
       <NotesWidget />