diff --git a/frontend/src/app.css b/frontend/src/app.css
index 70b5ab5..c4a02b6 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -12,6 +12,8 @@
   --color-info: #4DC7ED;
   --color-warning: #F5E872;
   --color-tag-default: #444455;
+  --color-nav-bg: rgba(0, 0, 0, 0.45);
+  --color-nav-active: rgba(52, 50, 73, 0.72);
 
   --font-sans: 'Epilogue', sans-serif;
 }
@@ -25,6 +27,8 @@
   --color-text-primary: #111118;
   --color-text-muted: #555566;
   --color-tag-default: #ccccdd;
+  --color-nav-bg: rgba(240, 240, 245, 0.85);
+  --color-nav-active: rgba(90, 87, 143, 0.22);
 }
 
 @font-face {
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 8658611..7a83253 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -95,7 +95,7 @@
 		justify-content: space-between;
 		align-items: center;
 		padding: 10px;
-		background-color: rgba(0, 0, 0, 0.45);
+		background-color: var(--color-nav-bg);
 		backdrop-filter: blur(8px);
 		-webkit-backdrop-filter: blur(8px);
 		z-index: 100;
@@ -115,7 +115,7 @@
 
 	.nav:hover,
 	.nav.curr {
-		background-color: #343249;
+		background-color: var(--color-nav-active);
 		color: var(--color-text-primary);
 	}