diff --git a/src/components/admin/AdminShell.tsx b/src/components/admin/AdminShell.tsx
new file mode 100644
index 0000000..cf0d148
--- /dev/null
+++ b/src/components/admin/AdminShell.tsx
@@ -0,0 +1,55 @@
+import { ReactNode } from "react";
+import AdminSidebar from "@/components/admin/AdminSidebar";
+import MobileTabBar from "@/components/admin/MobileTabBar";
+import OfflineBanner from "@/components/admin/OfflineBanner";
+import { useMediaQuery } from "@/lib/use-media-query"; // see Task 1.9
+
+interface AdminShellProps {
+  userRole: string | null;
+  brandIds?: string[];
+  activeBrandId?: string | null;
+  brands: { id: string; name: string; slug: string }[];
+  enabledAddons?: Record<string, boolean>;
+  children: ReactNode;
+}
+
+export function AdminShell(props: AdminShellProps) {
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
+
+  if (isDesktop) {
+    return (
+      <>
+        <AdminSidebar
+          userRole={props.userRole}
+          brandIds={props.brandIds}
+          activeBrandId={props.activeBrandId}
+          brands={props.brands}
+          enabledAddons={props.enabledAddons}
+        />
+        <div
+          id="page-content"
+          className="min-h-screen lg:pl-60 outline-none"
+          style={{ backgroundColor: "var(--color-surface)" }}
+        >
+          {props.children}
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <OfflineBanner />
+      <div
+        id="page-content"
+        className="min-h-screen pb-20 outline-none"
+        style={{ backgroundColor: "var(--color-surface)" }}
+      >
+        {props.children}
+      </div>
+      <MobileTabBar />
+    </>
+  );
+}
+
+export default AdminShell;