diff --git a/web/src/app.css b/web/src/app.css
index e09c2a2..2e8adeb 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -3,12 +3,12 @@
 :root {
 	--light-background: #f5f5f5;
 	--light-foreground: #e0e0e0;
-	--light-accent: #1e2400;
+	--light-accent: #303052;
 	--light-text: rgb(34, 40, 49);
 
 	--dark-background: #181818;
 	--dark-foreground: #222222;
-	--dark-accent: #e0e2c2;
+	--dark-accent: #bebff7;
 	--dark-text: rgb(238, 238, 238);
 }
 
@@ -164,16 +164,25 @@
 		@apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
 	}
 
-	/* Sidebar specific classes */
+	/* Sidebar */
 	.sidebar {
 		@apply fixed flex h-full w-64 flex-col overflow-hidden bg-[var(--light-foreground)] transition-all duration-300;
 	}
 
+	.dark .sidebar {
+		@apply bg-[var(--dark-foreground)];
+	}
+
 	.sidebar-header,
 	.sidebar-footer {
 		@apply border-[var(--light-text)]/20 p-4;
 	}
 
+	.dark .sidebar-header,
+	.dark .sidebar-footer {
+		@apply border-[var(--dark-text)]/20;
+	}
+
 	.sidebar-header {
 		@apply border-b;
 	}
@@ -186,32 +195,60 @@
 		@apply cursor-pointer p-3 transition-colors hover:bg-[var(--light-background)];
 	}
 
+	.dark .sidebar-item {
+		@apply hover:bg-[var(--dark-background)];
+	}
+
 	.sidebar-item-active {
 		@apply bg-[var(--light-background)];
 	}
 
+	.dark .sidebar-item-active {
+		@apply bg-[var(--dark-background)];
+	}
+
 	.sidebar-item-text {
 		@apply text-xs text-[var(--light-text)]/60;
 	}
 
+	.dark .sidebar-item-text {
+		@apply text-[var(--dark-text)]/60;
+	}
+
 	.sidebar-divider {
 		@apply divide-y divide-[var(--light-text)]/20;
 	}
 
-	/* Note editor specific classes */
+	.dark .sidebar-divider {
+		@apply divide-[var(--dark-text)]/20;
+	}
+
+	/* Note editor */
 	.note-title-input {
 		@apply w-full border-b border-[var(--light-text)]/20 bg-transparent pb-2 text-2xl font-bold focus:border-[var(--light-accent)];
 	}
 
+	.dark .note-title-input {
+		@apply border-[var(--dark-text)]/20 focus:border-[var(--dark-accent)];
+	}
+
 	.note-char-count {
 		@apply mt-1 text-xs text-[var(--light-text)]/60;
 	}
 
+	.dark .note-char-count {
+		@apply text-[var(--dark-text)]/60;
+	}
+
 	.note-textarea {
 		@apply h-full min-h-[300px] w-full resize-none bg-[var(--light-background)] p-4 font-mono;
 	}
 
-	/* Settings modal specific classes */
+	.dark .note-textarea {
+		@apply bg-[var(--dark-background)];
+	}
+
+	/* Settings modal */
 	.modal-backdrop {
 		/* @apply bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black; */
 		@apply fixed inset-0 z-50 flex items-center justify-center bg-black;
@@ -221,25 +258,49 @@
 		@apply mx-4 max-h-[90vh] w-full max-w-md overflow-y-auto rounded-lg bg-[var(--light-background)] shadow-lg;
 	}
 
+	.dark .modal-content {
+		@apply bg-[var(--dark-background)];
+	}
+
 	.modal-section {
 		@apply border-b border-[var(--light-text)]/20 p-4;
 	}
 
-	.modal-close-button {
-		@apply text-[var(--light-text)]/60 hover:text-[var(--light-text)];
+	.dark .modal-section {
+		@apply border-[var(--dark-text)]/20;
 	}
 
-	/* Loading spinner specific classes */
+	.modal-close-button {
+		@apply text-[var(--light-background)]/60 hover:text-[var(--light-background)];
+	}
+
+	.dark .modal-close-button {
+		@apply text-[var(--dark-background)]/60 hover:text-[var(--dark-background)];
+	}
+
+	/* Loading spinner */
 	.spinner-dot {
 		@apply bg-[var(--light-accent)];
 	}
 
-	/* Main layout classes */
+	.dark .spinner-dot {
+		@apply bg-[var(--dark-accent)];
+	}
+
+	/* Main layout */
 	.main-header {
 		@apply flex items-center justify-between bg-[var(--light-foreground)] p-4 shadow-sm;
 	}
 
+	.dark .main-header {
+		@apply flex items-center justify-between bg-[var(--dark-foreground)] p-4 shadow-sm;
+	}
+
 	.main-content {
-		@apply flex-1 overflow-auto p-6;
+		@apply flex-1 overflow-auto bg-[var(--light-background)] p-6;
+	}
+
+	.dark .main-content {
+		@apply bg-[var(--dark-background)];
 	}
 }