diff --git a/components/layout/floating-controls.tsx b/components/layout/floating-controls.tsx
deleted file mode 100644
index b3f05ec..0000000
--- a/components/layout/floating-controls.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-"use client";
-
-import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
-import { Plus, ShieldCheck } from "lucide-react";
-import { useLocale, useTranslations } from "next-intl";
-import { useState, type ReactNode } from "react";
-
-import { LocaleToggle } from "@/components/layout/locale-toggle";
-import { SoundToggle } from "@/components/sound-toggle";
-import { ThemeToggle } from "@/components/theme-toggle";
-import { buildAdminUrl } from "@/lib/admin-routing";
-import type { AppLocale } from "@/lib/locale";
-import { cn } from "@/lib/utils";
-
-type FloatingControlsProps = {
-  locale: string;
-  defaultLocale: AppLocale;
-  isSuperAdmin?: boolean;
-};
-
-const pill =
-  "flex h-11 w-11 items-center justify-center rounded-full border border-border/60 bg-background/85 text-foreground/80 shadow-panel backdrop-blur-chrome transition-colors hover:bg-accent hover:text-foreground";
-
-/** Radius (px) of the arc the items fan out along. */
-const RADIUS = 92;
-
-export function FloatingControls({
-  locale,
-  defaultLocale,
-  isSuperAdmin = false,
-}: FloatingControlsProps) {
-  const [open, setOpen] = useState(false);
-  const t = useTranslations("navigation");
-  const activeLocale = useLocale();
-  const isRtl = activeLocale === "ar";
-  const reducedMotion = useReducedMotion();
-
-  const controls: ReactNode[] = [
-    <SoundToggle
-      key="sound"
-      ariaLabel={t("soundMute")}
-      mutedAriaLabel={t("soundUnmute")}
-      variant="ghost"
-      className={cn(pill, "border-transparent bg-transparent")}
-    />,
-    <ThemeToggle
-      key="theme"
-      ariaLabel={t("themeToggle")}
-      variant="ghost"
-      className={cn(pill, "border-transparent bg-transparent")}
-    />,
-    <LocaleToggle
-      key="locale"
-      locale={locale}
-      defaultLocale={defaultLocale}
-      className={cn(pill, "border-transparent bg-transparent p-0")}
-    />,
-  ];
-
-  if (isSuperAdmin) {
-    controls.push(
-      <a key="admin" href={buildAdminUrl("/")} aria-label="Open admin dashboard" className={pill}>
-        <ShieldCheck className="h-[1.125rem] w-[1.125rem]" />
-      </a>,
-    );
-  }
-
-  const count = controls.length;
-  // Fan the items across a quarter arc from "up" (90°) to "sideways" (180°),
-  // mirrored for RTL so they always spread away from the corner into the page.
-  const startAngle = 94;
-  const endAngle = 176;
-  const positionFor = (index: number) => {
-    const angle = count === 1 ? 135 : startAngle + ((endAngle - startAngle) * index) / (count - 1);
-    const radians = (angle * Math.PI) / 180;
-    return {
-      x: (isRtl ? -1 : 1) * Math.cos(radians) * RADIUS,
-      y: -Math.sin(radians) * RADIUS,
-    };
-  };
-
-  return (
-    <div
-      className="pointer-events-none fixed bottom-0 end-0 z-50 p-4"
-      style={{ paddingBottom: "calc(1.1rem + env(safe-area-inset-bottom, 0px))" }}
-    >
-      <div className="pointer-events-auto relative h-12 w-12">
-        <AnimatePresence>
-          {open ? (
-            <>
-              {/* click-away scrim */}
-              <motion.button
-                key="scrim"
-                type="button"
-                aria-hidden
-                tabIndex={-1}
-                onClick={() => setOpen(false)}
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                className="fixed inset-0 -z-10 cursor-default bg-transparent"
-              />
-              {controls.map((control, index) => {
-                const { x, y } = positionFor(index);
-                return (
-                  <motion.div
-                    key={index}
-                    className="absolute bottom-0 end-0 grid h-12 w-12 place-items-center"
-                    initial={reducedMotion ? { opacity: 0 } : { opacity: 0, x: 0, y: 0, scale: 0.4 }}
-                    animate={reducedMotion ? { opacity: 1 } : { opacity: 1, x, y, scale: 1 }}
-                    exit={reducedMotion ? { opacity: 0 } : { opacity: 0, x: 0, y: 0, scale: 0.4 }}
-                    transition={
-                      reducedMotion
-                        ? { duration: 0 }
-                        : { type: "spring", stiffness: 460, damping: 26, delay: index * 0.035 }
-                    }
-                  >
-                    {control}
-                  </motion.div>
-                );
-              })}
-            </>
-          ) : null}
-        </AnimatePresence>
-
-        {/* trigger */}
-        <button
-          type="button"
-          onClick={() => setOpen((value) => !value)}
-          aria-expanded={open}
-          aria-label={open ? t("closeMenu") : t("openMenu")}
-          className={cn(
-            pill,
-            "relative h-12 w-12",
-            open && "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
-          )}
-        >
-          <motion.span
-            animate={{ rotate: open ? 135 : 0 }}
-            transition={reducedMotion ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 22 }}
-            className="flex items-center justify-center"
-          >
-            <Plus className="h-5 w-5" />
-          </motion.span>
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/components/layout/site-dock.tsx b/components/layout/site-dock.tsx
index aea5c41..3ee148b 100644
--- a/components/layout/site-dock.tsx
+++ b/components/layout/site-dock.tsx
@@ -1,12 +1,16 @@
 "use client";
 
+import { ShieldCheck } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useLocale, useTranslations } from "next-intl";
 
-import { FloatingControls } from "@/components/layout/floating-controls";
+import { LocaleToggle } from "@/components/layout/locale-toggle";
+import { SoundToggle } from "@/components/sound-toggle";
+import { ThemeToggle } from "@/components/theme-toggle";
 import { Dock, DockIcon } from "@/components/ui/dock";
+import { buildAdminUrl } from "@/lib/admin-routing";
 import { getLocalizedPath, stripLocalePrefix, type AppLocale } from "@/lib/locale";
 import { cn } from "@/lib/utils";
 
@@ -37,6 +41,13 @@ const navItems: NavItem[] = [
   { key: "contact", path: "/contact" },
 ];
 
+// Graphite squircle that matches the SVG page icons, used for the live control
+// tiles (theme / sound / language / admin) so the whole dock reads as one set.
+const controlTile =
+  "group relative overflow-visible rounded-[26%] bg-gradient-to-b from-[#3f4551] to-[#191d24] shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] ring-1 ring-white/10 transition-shadow duration-200 hover:shadow-[0_10px_22px_-8px_rgba(0,0,0,0.6)]";
+const controlButton =
+  "h-full w-full rounded-[inherit] border-0 bg-transparent text-white hover:bg-white/10 hover:text-white";
+
 function isNavItemActive(currentPath: string, itemPath: string) {
   if (itemPath === "/") {
     return currentPath === "/";
@@ -53,96 +64,148 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
   const homeHref = getLocalizedPath(locale, "/", defaultLocale);
 
   return (
-    <>
-      {/* ===== Bottom dock (Magic UI) — primary navigation ===== */}
-      <div
-        className="pointer-events-none fixed inset-x-0 bottom-0 z-40 flex justify-center px-4"
-        style={{ paddingBottom: "calc(0.9rem + env(safe-area-inset-bottom, 0px))" }}
+    <div
+      className="pointer-events-none fixed inset-x-0 bottom-0 z-40 flex justify-center px-4"
+      style={{ paddingBottom: "calc(0.9rem + env(safe-area-inset-bottom, 0px))" }}
+    >
+      <Dock
+        direction="bottom"
+        iconSize={52}
+        iconMagnification={90}
+        iconDistance={160}
+        className="pointer-events-auto h-[68px] gap-2.5 border-border/60 bg-background/70 shadow-panel"
       >
-        <Dock
-          direction="bottom"
-          iconSize={52}
-          iconMagnification={90}
-          iconDistance={160}
-          className="pointer-events-auto h-[68px] gap-2.5 border-border/60 bg-background/70 shadow-panel"
-        >
-          {/* Logo — first icon in the dock (fixed src, no theme swap → no flash) */}
-          <DockIcon className="group relative overflow-visible rounded-[26%] bg-white shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] ring-1 ring-black/10">
-            <Link
-              href={homeHref}
-              aria-label="mohfarawati — Home"
-              className="flex h-full w-full items-center justify-center rounded-[inherit]"
+        {/* ── Logo (fixed src → no refresh flash) ── */}
+        <DockIcon className="group relative overflow-visible rounded-[26%] bg-white shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] ring-1 ring-black/10">
+          <Link
+            href={homeHref}
+            aria-label="mohfarawati — Home"
+            className="flex h-full w-full items-center justify-center rounded-[inherit]"
+          >
+            <Image
+              src="/logos/light-primary.svg"
+              alt="mohfarawati"
+              width={104}
+              height={104}
+              sizes="104px"
+              priority
+              className="h-full w-full rounded-[inherit] object-contain"
+            />
+          </Link>
+          <DockTip label="mohfarawati" />
+        </DockIcon>
+
+        <DockSeparator />
+
+        {/* ── Pages ── */}
+        {navItems.map(({ key, path, disabled }) => {
+          const itemPath = path || "/";
+          const isActive = isNavItemActive(currentPath, itemPath);
+          const label = t(key);
+          const src = `/dock/${key}${isActive ? "-active" : ""}.svg`;
+
+          const icon = (
+            <Image
+              src={src}
+              alt={label}
+              width={104}
+              height={104}
+              sizes="104px"
+              className={cn("h-full w-full rounded-[inherit] object-contain", disabled && "opacity-55")}
+            />
+          );
+
+          return (
+            <DockIcon
+              key={key}
+              className={cn(
+                "group relative overflow-visible rounded-[26%] transition-shadow duration-200",
+                isActive
+                  ? "shadow-[0_12px_26px_-8px_hsl(var(--primary)/0.65)]"
+                  : "shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] hover:shadow-[0_10px_22px_-8px_rgba(0,0,0,0.6)]",
+              )}
             >
-              <Image
-                src="/logos/light-primary.svg"
-                alt="mohfarawati"
-                width={104}
-                height={104}
-                sizes="104px"
-                priority
-                className="h-full w-full rounded-[inherit] object-contain"
-              />
-            </Link>
-            <DockTip label="mohfarawati" />
+              {disabled ? (
+                <span
+                  aria-disabled="true"
+                  className="flex h-full w-full cursor-not-allowed items-center justify-center rounded-[inherit]"
+                >
+                  {icon}
+                </span>
+              ) : (
+                <Link
+                  href={getLocalizedPath(locale, itemPath, defaultLocale)}
+                  aria-label={label}
+                  aria-current={isActive ? "page" : undefined}
+                  className="flex h-full w-full items-center justify-center rounded-[inherit]"
+                >
+                  {icon}
+                </Link>
+              )}
+              <DockTip label={label} soon={disabled ? t("soon") : undefined} />
+            </DockIcon>
+          );
+        })}
+
+        <DockSeparator />
+
+        {/* ── Settings (live controls) ── */}
+        <DockIcon className={controlTile}>
+          <TileGloss />
+          <SoundToggle
+            ariaLabel={t("soundMute")}
+            mutedAriaLabel={t("soundUnmute")}
+            variant="ghost"
+            className={controlButton}
+            iconClassName="h-[46%] w-[46%]"
+          />
+          <DockTip label={t("soundMute")} />
+        </DockIcon>
+
+        <DockIcon className={controlTile}>
+          <TileGloss />
+          <ThemeToggle ariaLabel={t("themeToggle")} variant="ghost" className={controlButton} iconClassName="h-[46%] w-[46%]" />
+          <DockTip label={t("themeToggle")} />
+        </DockIcon>
+
+        <DockIcon className={controlTile}>
+          <TileGloss />
+          <LocaleToggle
+            locale={locale}
+            defaultLocale={defaultLocale}
+            className={cn(controlButton, "p-0")}
+          />
+          <DockTip label={locale.toUpperCase()} />
+        </DockIcon>
+
+        {isSuperAdmin ? (
+          <DockIcon className={controlTile}>
+            <TileGloss />
+            <a
+              href={buildAdminUrl("/")}
+              aria-label="Open admin dashboard"
+              className="flex h-full w-full items-center justify-center rounded-[inherit] text-white hover:bg-white/10"
+            >
+              <ShieldCheck className="h-[46%] w-[46%]" />
+            </a>
+            <DockTip label="Admin" />
           </DockIcon>
+        ) : null}
+      </Dock>
+    </div>
+  );
+}
 
-          <div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />
+function DockSeparator() {
+  return <div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />;
+}
 
-          {navItems.map(({ key, path, disabled }) => {
-            const itemPath = path || "/";
-            const isActive = isNavItemActive(currentPath, itemPath);
-            const label = t(key);
-            const src = `/dock/${key}${isActive ? "-active" : ""}.svg`;
-
-            const icon = (
-              <Image
-                src={src}
-                alt={label}
-                width={104}
-                height={104}
-                sizes="104px"
-                className={cn("h-full w-full rounded-[inherit] object-contain", disabled && "opacity-55")}
-              />
-            );
-
-            return (
-              <DockIcon
-                key={key}
-                className={cn(
-                  "group relative overflow-visible rounded-[26%] transition-shadow duration-200",
-                  isActive
-                    ? "shadow-[0_12px_26px_-8px_hsl(var(--primary)/0.65)]"
-                    : "shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] hover:shadow-[0_10px_22px_-8px_rgba(0,0,0,0.6)]",
-                )}
-              >
-                {disabled ? (
-                  <span
-                    aria-disabled="true"
-                    className="flex h-full w-full cursor-not-allowed items-center justify-center rounded-[inherit]"
-                  >
-                    {icon}
-                  </span>
-                ) : (
-                  <Link
-                    href={getLocalizedPath(locale, itemPath, defaultLocale)}
-                    aria-label={label}
-                    aria-current={isActive ? "page" : undefined}
-                    className="flex h-full w-full items-center justify-center rounded-[inherit]"
-                  >
-                    {icon}
-                  </Link>
-                )}
-
-                <DockTip label={label} soon={disabled ? t("soon") : undefined} />
-              </DockIcon>
-            );
-          })}
-        </Dock>
-      </div>
-
-      {/* ===== Corner controls — theme / language / sound / admin ===== */}
-      <FloatingControls locale={locale} defaultLocale={defaultLocale} isSuperAdmin={isSuperAdmin} />
-    </>
+function TileGloss() {
+  return (
+    <span
+      aria-hidden
+      className="pointer-events-none absolute inset-x-0 top-0 h-1/2 rounded-t-[26%] bg-gradient-to-b from-white/25 to-transparent"
+    />
   );
 }