diff --git a/src/components/top-header.tsx b/src/components/top-header.tsx
index 516bf711..b04dd692 100644
--- a/src/components/top-header.tsx
+++ b/src/components/top-header.tsx
@@ -6,15 +6,15 @@ import { siteSettings } from "@/lib/services/site-settings";
 
 function Currency({ icon, amount, label }: { icon: string; amount: number; label: string }) {
   return (
-    <div className="flex gap-x-3 sm:gap-x-2 items-center">
-      <div className={`h-[25px] w-[25px] rounded-full outline-offset-[3px] ${icon}`} />
-      <div style={{ color: "var(--color-text-muted)" }}>
-        <span className="font-semibold" style={{ color: "var(--color-text)" }}>
-          {amount.toLocaleString()}
-        </span>{" "}
-        <span>{label}</span>
-      </div>
-    </div>
+      <div className="flex gap-x-3 sm:gap-x-2 items-center">
+          <div className={`h-[25px] w-[25px] rounded-full outline-offset-[3px] ${icon}`} />
+          <div style={{ color: "var(--color-navbar-text, var(--color-text-muted))" }}>
+            <span className="font-semibold" style={{ color: "var(--color-navbar-text, var(--color-text))" }}>
+              {amount.toLocaleString()}
+            </span>{" "}
+            <span>{label}</span>
+          </div>
+        </div>
   );
 }
 
@@ -49,7 +49,7 @@ export async function TopHeader() {
   const isStaff = (session.user.rank ?? 0) >= 7;
 
   return (
-    <div style={{ backgroundColor: "var(--color-surface)" }}>
+    <div style={{ backgroundColor: "var(--color-navbar)" }}>
       <div className="max-w-7xl min-h-[60px] px-4 flex items-center justify-between mx-auto">
         <div className="flex gap-x-6">
           <Currency icon="nav-credit-icon" amount={credits} label="Credits" />
@@ -62,7 +62,7 @@ export async function TopHeader() {
             <details className="relative">
               <summary
                 className="list-none cursor-pointer font-semibold [&::-webkit-details-marker]:hidden"
-                style={{ color: "var(--color-text)" }}
+                style={{ color: "var(--color-navbar-text, var(--color-text))" }}
               >
                 Administration
               </summary>
@@ -87,7 +87,7 @@ export async function TopHeader() {
             <summary className="list-none cursor-pointer flex items-center [&::-webkit-details-marker]:hidden">
               {/* biome-ignore lint/performance/noImgElement: external imager */}
               <img className="w-[54px] h-[62px] bg-no-repeat bg-center" src={avatar} alt="" />
-              <span className="-ml-2 font-semibold">{session.user.name}</span>
+              <span className="-ml-2 font-semibold" style={{ color: "var(--color-navbar-text, var(--color-text))" }}>{session.user.name}</span>
             </summary>
             <div
               className="absolute right-0 mt-1 min-w-[200px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"