diff --git a/components/layout/site-dock.tsx b/components/layout/site-dock.tsx
index 2d0271f..153b9eb 100644
--- a/components/layout/site-dock.tsx
+++ b/components/layout/site-dock.tsx
@@ -5,6 +5,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useLocale, useTranslations } from "next-intl";
+import { useTheme } from "next-themes";
 import { useState } from "react";
 
 import { FloatingControls } from "@/components/layout/floating-controls";
@@ -28,17 +29,15 @@ type NavKey = "about" | "portfolio" | "products" | "contact";
 type NavItem = {
   key: NavKey;
   path: string;
-  /** Icon file under /public. Swap these for real macOS app icons anytime. */
-  icon: string;
   disabled?: boolean;
 };
 
 // "Home" is intentionally omitted — the logo (first dock icon) is the home link.
 const navItems: NavItem[] = [
-  { key: "about", path: "/about", icon: "/dock/about.svg" },
-  { key: "portfolio", path: "/portfolio", icon: "/dock/portfolio.svg" },
-  { key: "products", path: "/products", icon: "/dock/products.svg", disabled: true },
-  { key: "contact", path: "/contact", icon: "/dock/contact.svg" },
+  { key: "about", path: "/about" },
+  { key: "portfolio", path: "/portfolio" },
+  { key: "products", path: "/products", disabled: true },
+  { key: "contact", path: "/contact" },
 ];
 
 function isNavItemActive(currentPath: string, itemPath: string) {
@@ -54,6 +53,8 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
   const t = useTranslations("navigation");
   const reducedMotion = useReducedMotion();
   const [bouncing, setBouncing] = useState<string | null>(null);
+  const { theme, resolvedTheme } = useTheme();
+  const activeTheme = theme === "system" ? resolvedTheme : theme;
 
   const currentPath = stripLocalePrefix(pathname);
   const homeHref = getLocalizedPath(locale, "/", defaultLocale);
@@ -111,23 +112,25 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
           <div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />
 
           {/* ── Pages (icon art carries its own squircle shape) ── */}
-          {navItems.map(({ key, path, icon: iconSrc, disabled }) => {
+          {navItems.map(({ key, path, disabled }) => {
             const itemPath = path || "/";
             const isActive = isNavItemActive(currentPath, itemPath);
             const label = t(key);
+            const variant = activeTheme === "dark" ? "dark" : "light";
+            const src = `/dock/${key}-${variant}.png`;
 
             const icon = (
               <motion.span
-                className="flex h-full w-full items-center justify-center"
+                className="flex h-full w-full items-center justify-center overflow-hidden rounded-[22%]"
                 {...(disabled ? {} : bounceProps(key))}
               >
                 <Image
-                  src={iconSrc}
+                  src={src}
                   alt={label}
                   width={104}
                   height={104}
                   sizes="104px"
-                  className={cn("h-full w-full object-contain", disabled && "opacity-55")}
+                  className={cn("h-[110%] w-[110%] object-cover", disabled && "opacity-55")}
                 />
               </motion.span>
             );
diff --git a/public/dock/about-dark.png b/public/dock/about-dark.png
new file mode 100644
index 0000000..3107200
Binary files /dev/null and b/public/dock/about-dark.png differ
diff --git a/public/dock/about-light.png b/public/dock/about-light.png
new file mode 100644
index 0000000..0cf46f7
Binary files /dev/null and b/public/dock/about-light.png differ
diff --git a/public/dock/about.svg b/public/dock/about.svg
deleted file mode 100644
index 257e793..0000000
--- a/public/dock/about.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-<defs>
-<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#454b57"/><stop offset="1" stop-color="#1c2027"/></linearGradient>
-<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
-<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
-</defs>
-<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#bg)"/>
-<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#gl)"/>
-<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="21.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
-<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
-<circle cx="50" cy="41" r="11"/><path d="M30 72 C30 57, 70 57, 70 72"/></g>
-</svg>
\ No newline at end of file
diff --git a/public/dock/contact-dark.png b/public/dock/contact-dark.png
new file mode 100644
index 0000000..0799922
Binary files /dev/null and b/public/dock/contact-dark.png differ
diff --git a/public/dock/contact-light.png b/public/dock/contact-light.png
new file mode 100644
index 0000000..511a1c8
Binary files /dev/null and b/public/dock/contact-light.png differ
diff --git a/public/dock/contact.svg b/public/dock/contact.svg
deleted file mode 100644
index 1bf2d8c..0000000
--- a/public/dock/contact.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-<defs>
-<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#454b57"/><stop offset="1" stop-color="#1c2027"/></linearGradient>
-<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
-<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
-</defs>
-<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#bg)"/>
-<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#gl)"/>
-<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="21.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
-<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
-<rect x="27" y="35" width="46" height="30" rx="6"/><path d="M30 40 L50 54 L70 40"/></g>
-</svg>
\ No newline at end of file
diff --git a/public/dock/portfolio-dark.png b/public/dock/portfolio-dark.png
new file mode 100644
index 0000000..5ec0bea
Binary files /dev/null and b/public/dock/portfolio-dark.png differ
diff --git a/public/dock/portfolio-light.png b/public/dock/portfolio-light.png
new file mode 100644
index 0000000..20d0420
Binary files /dev/null and b/public/dock/portfolio-light.png differ
diff --git a/public/dock/portfolio.svg b/public/dock/portfolio.svg
deleted file mode 100644
index 350335c..0000000
--- a/public/dock/portfolio.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-<defs>
-<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
-<stop offset="0" stop-color="#4aa8ff"/><stop offset="1" stop-color="#7b5cff"/></linearGradient>
-<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
-<stop offset="0" stop-color="#fff" stop-opacity="0.30"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
-<clipPath id="card"><rect x="27" y="31" width="46" height="38" rx="7"/></clipPath>
-</defs>
-<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#bg)"/>
-<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#gl)"/>
-<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="21.25" fill="none" stroke="#fff" stroke-opacity="0.18" stroke-width="1.5"/>
-<rect x="27" y="31" width="46" height="38" rx="7" fill="#ffffff"/>
-<g clip-path="url(#card)">
-<circle cx="40" cy="44" r="5.5" fill="#ffc23d"/>
-<path d="M27 69 L43 52 L53 61 L61 51 L73 69 Z" fill="#37b877"/>
-<path d="M55 69 L66 57 L73 64 L73 69 Z" fill="#2c9c86"/>
-</g>
-</svg>
\ No newline at end of file
diff --git a/public/dock/products-dark.png b/public/dock/products-dark.png
new file mode 100644
index 0000000..7a70310
Binary files /dev/null and b/public/dock/products-dark.png differ
diff --git a/public/dock/products-light.png b/public/dock/products-light.png
new file mode 100644
index 0000000..8850aff
Binary files /dev/null and b/public/dock/products-light.png differ
diff --git a/public/dock/products.svg b/public/dock/products.svg
deleted file mode 100644
index 76e32a8..0000000
--- a/public/dock/products.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-<defs>
-<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#454b57"/><stop offset="1" stop-color="#1c2027"/></linearGradient>
-<linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
-<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
-</defs>
-<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#bg)"/>
-<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#gl)"/>
-<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="21.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
-<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
-<path d="M50 28 L71 40 L71 60 L50 72 L29 60 L29 40 Z"/><path d="M29 40 L50 52 L71 40"/><path d="M50 52 L50 72"/></g>
-</svg>
\ No newline at end of file