diff --git a/src/components/NewNote.vue b/src/components/NewNote.vue
index 5058c1c..7da8c34 100644
--- a/src/components/NewNote.vue
+++ b/src/components/NewNote.vue
@@ -192,7 +192,7 @@
         &:focus
             outline: none
         +dark-mode
-            background: #333
+            background: #151516
             box-shadow: 0 0 10px rgba(0,0,0,0.5)
             color: rgba(255,255,255, 0.7)
         +webapp-mobile
@@ -247,8 +247,6 @@
             padding-top: 0
             display: flex
             justify-content: flex-end
-            +dark-mode
-                background: #222
             button
                 font-size: 12px
                 height: 28px
@@ -258,5 +256,8 @@
                 padding-right: 10px
                 &:focus
                     outline-color: #48b57e
+                +dark-mode
+                    background: #444
+                    border: none
         
 </style>
diff --git a/src/components/folder-selector/FolderItem.vue b/src/components/folder-selector/FolderItem.vue
index 7c9c975..8eb7d82 100644
--- a/src/components/folder-selector/FolderItem.vue
+++ b/src/components/folder-selector/FolderItem.vue
@@ -70,10 +70,17 @@
         background-repeat: no-repeat
         background-position-y: 5px
         background-position-x: calc(2px + var(--indent-level) * 16px)
+        +dark-mode
+            background-image: url('@/assets/icons/caret-right-white.svg')
+            color: rgba(255,255,255, 0.87)
         &:hover
             background-color: #f1f1f1
+            +dark-mode
+                background-color: #39393a
         &.open
             background-image: url('@/assets/icons/caret-down.svg')
+            +dark-mode
+                background-image: url('@/assets/icons/caret-down-white.svg')
         &.selected
             background-color: #48b57e
             color: #fff
@@ -82,6 +89,11 @@
                 background-image: url('@/assets/icons/caret-down-white.svg')
             &:hover
                 background-color: #40a773
+            +dark-mode
+                background-color: #1b6540
+                color: rgba(255,255,255, 0.87)
+                &:hover
+                    background-color: #1f6f47
             .new-folder
                 display: block
                 color: rgba(255,255,255, 0.9)
@@ -90,6 +102,10 @@
             color: rgba(0,0,0, 0.5)
             &.selected
                 color: rgba(255,255,255, 0.8)
+            +dark-mode
+                color: rgba(255,255,255, 0.5)
+                &.selected
+                    color: rgba(255,255,255, 0.8)
 
 
         .name
diff --git a/src/components/folder-selector/FolderSelector.vue b/src/components/folder-selector/FolderSelector.vue
index ea821a5..30417e3 100644
--- a/src/components/folder-selector/FolderSelector.vue
+++ b/src/components/folder-selector/FolderSelector.vue
@@ -245,4 +245,7 @@
             outline: none
             border: 1px solid #fff
             outline: 2px solid #48b57e
+        +dark-mode
+            background: #262626
+            border: 1px solid #363636
 </style>
diff --git a/src/components/folder-selector/NewFolderItem.vue b/src/components/folder-selector/NewFolderItem.vue
index 5cafd14..06e2840 100644
--- a/src/components/folder-selector/NewFolderItem.vue
+++ b/src/components/folder-selector/NewFolderItem.vue
@@ -86,8 +86,8 @@
         padding-left: calc(0px + var(--indent-level) * 16px)
         display: flex
         background: #f1f1f1
-        &:hover
-            background: #f1f1f1
+        +dark-mode
+            background-color: #39393a
                 
 
         input
@@ -104,5 +104,7 @@
                 outline: none
             &::placeholder
                 font-size: 12px
+            +dark-mode
+                background: #3b3b3b
 
 </style>