diff --git a/src/app/globals.css b/src/app/globals.css
index 0cb3a83a..e663bf4d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -247,7 +247,7 @@ body {
   box-shadow: var(--shadow-card-hover);
 }
 .card-base {
-  background-color: var(--color-surface);
+  background-color: var(--color-navbar);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-card);
   border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
@@ -283,7 +283,7 @@ a:hover {
   font-size: 0.875rem;
 }
 .hero {
-  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)), color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)));
+  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 14%, var(--color-navbar)), color-mix(in srgb, var(--color-accent) 8%, var(--color-navbar)));
   border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
   border-radius: var(--radius-lg);
   padding: 2rem 2.25rem;
@@ -291,7 +291,7 @@ a:hover {
   margin-bottom: 1.5rem;
 }
 .card {
-  background: var(--color-surface);
+  background: var(--color-navbar);
   border: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
   border-radius: var(--card-border-radius);
   box-shadow: var(--shadow-card);
@@ -456,7 +456,7 @@ tbody tr:hover {
 
 /* Cards used inside admin pages */
 .admin-card {
-  background: var(--color-surface);
+  background: var(--color-navbar);
   border: 1px solid var(--border);
   border-radius: 16px;
   box-shadow: var(--shadow-card);
@@ -490,7 +490,7 @@ tbody tr:hover {
   align-items: center;
   gap: 0.4rem;
   padding: 0.4rem 0.75rem;
-  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
+  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-navbar));
   border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
   border-radius: 999px;
   font-size: 0.78rem;
@@ -500,7 +500,7 @@ tbody tr:hover {
 /* Tables */
 .admin-page table {
   width: 100%;
-  background: var(--color-surface);
+  background: var(--color-navbar);
   border: 1px solid var(--border);
   border-radius: 16px;
   overflow: hidden;
@@ -509,7 +509,7 @@ tbody tr:hover {
   border-spacing: 0;
 }
 .admin-page thead th {
-  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
+  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-navbar));
   color: var(--color-text-muted);
   border-bottom: 1px solid var(--border);
   white-space: nowrap;
@@ -570,7 +570,7 @@ tbody tr:hover {
   display: flex;
   flex-direction: column;
   width: 100%;
-  background: var(--color-surface);
+  background: var(--color-navbar);
   color: var(--color-text);
   border: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
   border-radius: var(--radius-lg);
@@ -586,7 +586,7 @@ tbody tr:hover {
   align-items: center;
   gap: 0.75rem;
   padding: 0.9rem 1.1rem;
-  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)));
+  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-navbar)), color-mix(in srgb, var(--color-primary) 5%, var(--color-navbar)));
   border-bottom: 1px solid color-mix(in srgb, var(--color-text-muted) 8%, transparent);
 }
 .content-card-icon {
@@ -597,7 +597,7 @@ tbody tr:hover {
   display: grid;
   place-items: center;
   font-size: 1.25rem;
-  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 22%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)));
+  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 22%, var(--color-navbar)), color-mix(in srgb, var(--color-primary) 12%, var(--color-navbar)));
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 30%, transparent);
 }
 .content-card-head-text {
diff --git a/src/app/news/page.tsx b/src/app/news/page.tsx
index f9d01ebb..d22e9dd1 100644
--- a/src/app/news/page.tsx
+++ b/src/app/news/page.tsx
@@ -48,7 +48,7 @@ export default async function NewsPage() {
               >
                 <div
                   style={{
-                    background: "linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)))",
+                    background: "linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-navbar)), color-mix(in srgb, var(--color-primary) 5%, var(--color-navbar)))",
                     borderBottom: "1px solid color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
                     padding: "0.6rem 0.75rem",
                     fontSize: "0.78rem",
@@ -65,7 +65,7 @@ export default async function NewsPage() {
                   />
                 ) : (
                   <div
-                    style={{ width: "100%", aspectRatio: "16/9", backgroundColor: "var(--color-surface)" }}
+                    style={{ width: "100%", aspectRatio: "16/9", backgroundColor: "var(--color-navbar)" }}
                   />
                 )}
                 <div style={{ padding: "0.75rem" }}>