diff --git a/src/components/NoteEditor.tsx b/src/components/NoteEditor.tsx
index c2a66bc..59a73bd 100644
--- a/src/components/NoteEditor.tsx
+++ b/src/components/NoteEditor.tsx
@@ -217,7 +217,7 @@ export function NoteEditor({ note, onUpdateNote, fontSize }: NoteEditorProps) {
         <button
           onClick={() => editor.chain().focus().toggleItalic().run()}
           className={`p-2 rounded transition-colors ${
-            editor.isActive('italic') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+            editor.isActive('italic') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
           }`}
           title="Italic"
         >
@@ -229,7 +229,7 @@ export function NoteEditor({ note, onUpdateNote, fontSize }: NoteEditorProps) {
         <button
           onClick={() => editor.chain().focus().toggleStrike().run()}
           className={`p-2 rounded transition-colors ${
-            editor.isActive('strike') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+            editor.isActive('strike') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
           }`}
           title="Strikethrough"
         >
@@ -241,7 +241,7 @@ export function NoteEditor({ note, onUpdateNote, fontSize }: NoteEditorProps) {
         <button
           onClick={() => editor.chain().focus().toggleUnderline().run()}
           className={`p-2 rounded transition-colors ${
-            editor.isActive('underline') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+            editor.isActive('underline') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
           }`}
           title="Underline"
         >
@@ -255,7 +255,7 @@ export function NoteEditor({ note, onUpdateNote, fontSize }: NoteEditorProps) {
         <button
           onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
           className={`px-2 py-1 rounded transition-colors font-bold text-sm ${
-            editor.isActive('heading', { level: 1 }) ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+            editor.isActive('heading', { level: 1 }) ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
           }`}
           title="Heading 1"
         >
@@ -265,7 +265,7 @@ export function NoteEditor({ note, onUpdateNote, fontSize }: NoteEditorProps) {
         <button
           onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
           className={`px-2 py-1 rounded transition-colors font-bold text-sm ${
-            editor.isActive('heading', { level: 2 }) ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+            editor.isActive('heading', { level: 2 }) ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
           }`}
           title="Heading 2"
         >
@@ -275,7 +275,7 @@ export function NoteEditor({ note, onUpdateNote, fontSize }: NoteEditorProps) {
         <button
           onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
           className={`px-2 py-1 rounded transition-colors font-bold text-sm ${
-            editor.isActive('heading', { level: 3 }) ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+            editor.isActive('heading', { level: 3 }) ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
           }`}
           title="Heading 3"
         >
@@ -287,7 +287,7 @@ export function NoteEditor({ note, onUpdateNote, fontSize }: NoteEditorProps) {
         <button
           onClick={() => editor.chain().focus().toggleBulletList().run()}
           className={`p-2 rounded transition-colors ${
-            editor.isActive('bulletList') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+            editor.isActive('bulletList') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
           }`}
           title="Bullet List"
         >
@@ -299,7 +299,7 @@ export function NoteEditor({ note, onUpdateNote, fontSize }: NoteEditorProps) {
         <button
           onClick={() => editor.chain().focus().toggleOrderedList().run()}
           className={`p-2 rounded transition-colors ${
-            editor.isActive('orderedList') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+            editor.isActive('orderedList') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
           }`}
           title="Numbered List"
         >
@@ -308,12 +308,12 @@ export function NoteEditor({ note, onUpdateNote, fontSize }: NoteEditorProps) {
           </svg>
         </button>
 
-        <div className="w-px h-6 bg-gray-300 mx-1"></div>
+        <div className="w-px h-6 bg-gray-300 dark:bg-gray-600 mx-1"></div>
 
         <button
           onClick={() => editor.chain().focus().toggleCode().run()}
           className={`p-2 rounded transition-colors ${
-            editor.isActive('code') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+            editor.isActive('code') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
           }`}
           title="Inline Code"
         >
@@ -325,7 +325,7 @@ export function NoteEditor({ note, onUpdateNote, fontSize }: NoteEditorProps) {
         <button
           onClick={() => editor.chain().focus().toggleCodeBlock().run()}
           className={`p-2 rounded transition-colors ${
-            editor.isActive('codeBlock') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+            editor.isActive('codeBlock') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
           }`}
           title="Code Block"
         >
diff --git a/src/components/NotesList.tsx b/src/components/NotesList.tsx
index 105f481..d637dfb 100644
--- a/src/components/NotesList.tsx
+++ b/src/components/NotesList.tsx
@@ -74,7 +74,7 @@ export function NotesList({
               title="Sync with Server"
             >
               <svg 
-                className={`w-5 h-5 ${isSyncing ? 'animate-spin' : ''}`} 
+                className={`w-5 h-5 text-gray-700 dark:text-gray-300 ${isSyncing ? 'animate-spin' : ''}`} 
                 fill="none" 
                 stroke="currentColor" 
                 viewBox="0 0 24 24"
@@ -87,7 +87,7 @@ export function NotesList({
               className="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
               title="New Note"
             >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
               </svg>
             </button>