diff --git a/src/components/shell/control-shell.tsx b/src/components/shell/control-shell.tsx
new file mode 100644
index 0000000..58416be
--- /dev/null
+++ b/src/components/shell/control-shell.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { useEffect } from "react";
+import { usePathname } from "next/navigation";
+import { Header } from "@/components/shell/header";
+import { MobileSidebar, Sidebar } from "@/components/shell/sidebar";
+import { AmbientBackground } from "@/components/shell/ambient-background";
+import { CommandPalette, CommandPaletteHotkey } from "@/components/shell/command-palette";
+import { useUiStore } from "@/stores/ui-store";
+import { cn } from "@/lib/utils";
+
+export function ControlShell({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const collapsed = useUiStore((state) => state.sidebarCollapsed);
+  const rememberRoute = useUiStore((state) => state.rememberRoute);
+
+  useEffect(() => {
+    rememberRoute(pathname);
+  }, [pathname, rememberRoute]);
+
+  return (
+    <div className="relative min-h-screen">
+      <AmbientBackground />
+      <Sidebar />
+      <Header />
+      <main
+        className={cn(
+          "px-3 py-4 transition-[padding] sm:px-4 lg:pl-[calc(var(--sidebar-width)+24px)] lg:pr-3 [&_a]:scroll-mt-[calc(var(--header-height)+24px)] [&_button]:scroll-mt-[calc(var(--header-height)+24px)] [&_input]:scroll-mt-[calc(var(--header-height)+24px)]",
+          collapsed && "lg:pl-[96px]",
+        )}
+      >
+        <div key={pathname} className="anim-rise mx-auto max-w-[1680px]">
+          {children}
+        </div>
+      </main>
+      <MobileSidebar />
+      <CommandPalette />
+      <CommandPaletteHotkey />
+    </div>
+  );
+}