diff --git a/components/layout/floating-controls.tsx b/components/layout/floating-controls.tsx
new file mode 100644
index 0000000..dbf8832
--- /dev/null
+++ b/components/layout/floating-controls.tsx
@@ -0,0 +1,149 @@
+"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[] = [
+ ,
+ ,
+ ,
+ ];
+
+ if (isSuperAdmin) {
+ controls.push(
+
+
+ ,
+ );
+ }
+
+ const count = controls.length;
+ // Fan across a quarter arc from "up" (90°) to "sideways" (180°), mirrored for
+ // RTL so the items 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 (
+
+
+
+ {open ? (
+ <>
+ {/* click-away scrim */}
+ 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 (
+
+ {control}
+
+ );
+ })}
+
+ ) : null}
+
+
+ {/* trigger */}
+
+
+