diff --git a/adminfront/src/components/layout/AppLayout.tsx b/adminfront/src/components/layout/AppLayout.tsx
index 320361b7..8d169d8d 100644
--- a/adminfront/src/components/layout/AppLayout.tsx
+++ b/adminfront/src/components/layout/AppLayout.tsx
@@ -26,6 +26,15 @@ import {
   shouldAttemptSlidingSessionRenew,
   shouldAttemptUnlimitedSessionRenew,
 } from "../../lib/sessionSliding";
+import {
+  applyShellTheme,
+  buildShellProfileSummary,
+  buildShellSessionStatus,
+  readShellSessionExpiryEnabled,
+  readShellTheme,
+  shellLayoutClasses,
+  writeShellSessionExpiryEnabled,
+} from "../../../../common/shell";
 import LanguageSelector from "../common/LanguageSelector";
 import RoleSwitcher from "./RoleSwitcher";
 
@@ -62,15 +71,11 @@ function AppLayout() {
   const mockRoleOverride = isMockRoleEnabled
     ? window.localStorage.getItem("X-Mock-Role")
     : null;
-  const [theme, setTheme] = useState<"light" | "dark">(() => {
-    const stored = window.localStorage.getItem("admin_theme");
-    return stored === "dark" ? "dark" : "light";
-  });
+  const [theme, setTheme] = useState<"light" | "dark">(readShellTheme);
   const [isProfileOpen, setIsProfileOpen] = useState(false);
-  const [isSessionExpiryEnabled, setIsSessionExpiryEnabled] = useState(() => {
-    const stored = window.localStorage.getItem("baron_session_expiry_enabled");
-    return stored !== "false";
-  });
+  const [isSessionExpiryEnabled, setIsSessionExpiryEnabled] = useState(
+    readShellSessionExpiryEnabled,
+  );
   const [nowMs, setNowMs] = useState(() => Date.now());
 
   useEffect(() => {
@@ -214,14 +219,7 @@ function AppLayout() {
   }, [auth.user]);
 
   useEffect(() => {
-    const root = document.documentElement;
-    root.classList.remove("light", "dark");
-    if (theme === "light") {
-      root.classList.add("light");
-    } else {
-      root.classList.add("dark");
-    }
-    window.localStorage.setItem("admin_theme", theme);
+    applyShellTheme(theme);
   }, [theme]);
 
   useEffect(() => {
@@ -388,68 +386,26 @@ function AppLayout() {
     setTheme((prev) => (prev === "light" ? "dark" : "light"));
   };
 
-  const profileName =
-    profile?.name?.trim() ||
-    auth.user?.profile.name?.toString().trim() ||
-    auth.user?.profile.preferred_username?.toString().trim() ||
-    t("ui.dev.profile.unknown_name", "Unknown User");
-  const profileEmail =
-    profile?.email?.trim() ||
-    auth.user?.profile.email?.toString().trim() ||
-    t("ui.dev.profile.unknown_email", "unknown@example.com");
-  const profileInitial = profileName.charAt(0).toUpperCase();
+  const profileSummary = buildShellProfileSummary({
+    profileName:
+      profile?.name ||
+      auth.user?.profile.name?.toString() ||
+      auth.user?.profile.preferred_username?.toString(),
+    profileEmail: profile?.email || auth.user?.profile.email?.toString(),
+    fallbackName: t("ui.dev.profile.unknown_name", "Unknown User"),
+    fallbackEmail: t("ui.dev.profile.unknown_email", "unknown@example.com"),
+  });
   const profileRoleKey = mockRoleOverride || profile?.role || "user";
-  const expiresAtSec = auth.user?.expires_at;
-  const remainingMs =
-    typeof expiresAtSec === "number" ? expiresAtSec * 1000 - nowMs : null;
-  const remainingTotalSec =
-    remainingMs !== null ? Math.max(0, Math.floor(remainingMs / 1000)) : null;
-  const remainingMinutes =
-    remainingTotalSec !== null ? Math.floor(remainingTotalSec / 60) : null;
-  const remainingSeconds =
-    remainingTotalSec !== null ? remainingTotalSec % 60 : null;
-
-  let sessionToneClass =
-    "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300";
-  let sessionText = t("ui.dev.session.active", "세션 활성");
-
-  if (remainingMs === null) {
-    sessionToneClass = "border-border bg-card text-muted-foreground";
-    sessionText = t("ui.dev.session.unknown", "알 수 없음");
-  } else if (remainingMs <= 0) {
-    sessionToneClass =
-      "border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-300";
-    sessionText = t("ui.dev.session.expired", "세션 만료");
-  } else if (
-    remainingMinutes !== null &&
-    remainingSeconds !== null &&
-    remainingMinutes <= 5
-  ) {
-    sessionToneClass =
-      "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300";
-    sessionText = t(
-      "ui.dev.session.expiring",
-      "만료 임박: {{minutes}}분 {{seconds}}초 남음",
-      {
-        minutes: remainingMinutes,
-        seconds: remainingSeconds,
-      },
-    );
-  } else {
-    sessionText = t(
-      "ui.dev.session.remaining",
-      "만료 예정: {{minutes}}분 {{seconds}}초 남음",
-      {
-        minutes: remainingMinutes ?? 0,
-        seconds: remainingSeconds ?? 0,
-      },
-    );
-  }
+  const sessionStatus = buildShellSessionStatus({
+    expiresAtSec: auth.user?.expires_at,
+    nowMs,
+    t,
+  });
 
   const handleSessionExpiryToggle = () => {
     setIsSessionExpiryEnabled((prev) => {
       const next = !prev;
-      window.localStorage.setItem("baron_session_expiry_enabled", String(next));
+      writeShellSessionExpiryEnabled(next);
       return next;
     });
   };
@@ -463,11 +419,11 @@ function AppLayout() {
   }
 
   return (
-    <div className="grid min-h-screen bg-background text-foreground md:grid-cols-[240px,1fr]">
-      <aside className="border-b border-border bg-card md:sticky md:top-0 md:h-screen md:border-b-0 md:border-r md:bg-card md:backdrop-blur">
-        <div className="flex items-center justify-between px-5 py-4 md:block md:space-y-6 md:py-6">
-          <div className="flex items-center gap-3 md:flex-col md:items-start">
-            <div className="grid h-11 w-11 place-items-center rounded-xl bg-primary/15 text-primary shadow-[0_12px_30px_rgba(54,211,153,0.22)]">
+    <div className={shellLayoutClasses.root}>
+      <aside className={shellLayoutClasses.asideStatic}>
+        <div className={shellLayoutClasses.brandSection}>
+          <div className={shellLayoutClasses.brandWrap}>
+            <div className={shellLayoutClasses.brandIcon}>
               <ShieldHalf size={20} />
             </div>
             <div>
@@ -480,8 +436,8 @@ function AppLayout() {
             </div>
           </div>
         </div>
-        <nav className="px-2 pb-4 md:px-3 md:pb-8">
-          <div className="flex flex-col gap-1">
+        <nav className={shellLayoutClasses.navWrap}>
+          <div className={shellLayoutClasses.navList}>
             {navItems.map((item: NavItem) => {
               const { label, to, icon: Icon, isExternal } = item;
               const isOrgChart = location.pathname === "/tenants/org-chart";
@@ -499,7 +455,10 @@ function AppLayout() {
                     href={to}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="flex items-center gap-3 rounded-xl px-3 py-3 text-sm text-muted-foreground transition hover:bg-muted/10 hover:text-foreground"
+                    className={[
+                      shellLayoutClasses.navItemBase,
+                      shellLayoutClasses.navItemIdle,
+                    ].join(" ")}
                   >
                     <Icon size={18} />
                     <span>{t(label, label)}</span>
@@ -513,10 +472,10 @@ function AppLayout() {
                   to={to}
                   className={() =>
                     [
-                      "flex items-center gap-3 rounded-xl px-3 py-3 text-sm transition",
+                      shellLayoutClasses.navItemBase,
                       isCustomActive
-                        ? "bg-primary/10 text-primary shadow-[0_12px_40px_rgba(54,211,153,0.18)]"
-                        : "text-muted-foreground hover:bg-muted/10 hover:text-foreground",
+                        ? shellLayoutClasses.navItemActive
+                        : shellLayoutClasses.navItemIdle,
                     ].join(" ")
                   }
                 >
@@ -531,7 +490,7 @@ function AppLayout() {
             <button
               type="button"
               onClick={handleLogout}
-              className="flex w-full items-center gap-3 rounded-xl px-3 py-3 text-sm text-muted-foreground transition hover:bg-destructive/10 hover:text-destructive"
+              className={shellLayoutClasses.logoutButton}
             >
               <LogOut size={18} />
               <span>{t("ui.admin.nav.logout", "Logout")}</span>
@@ -540,10 +499,10 @@ function AppLayout() {
         </nav>
       </aside>
 
-      <div className="relative min-w-0">
-        <header className="sticky top-0 z-50 border-b border-border bg-background/90 backdrop-blur">
-          <div className="flex items-center justify-between px-5 py-4 md:px-8">
-            <div className="flex flex-col gap-1">
+      <div className={shellLayoutClasses.contentWide}>
+        <header className={shellLayoutClasses.headerElevated}>
+          <div className={shellLayoutClasses.headerInner}>
+            <div className={shellLayoutClasses.headerTitleWrap}>
               <p className="text-xs uppercase tracking-[0.22em] text-muted-foreground">
                 {t("ui.admin.header.plane", "ADMIN PLANE")}
               </p>
@@ -552,12 +511,12 @@ function AppLayout() {
               </span>
             </div>
 
-            <div className="flex items-center gap-2 text-sm">
+            <div className={shellLayoutClasses.headerActions}>
               <LanguageSelector />
               <button
                 type="button"
                 onClick={toggleTheme}
-                className="inline-flex items-center gap-2 rounded-full border border-border px-3 py-2 text-muted-foreground transition hover:bg-muted/20"
+                className={shellLayoutClasses.actionButton}
                 aria-label={t("ui.common.theme_toggle", "테마 전환")}
               >
                 {theme === "light" ? <Sun size={16} /> : <Moon size={16} />}
@@ -568,11 +527,11 @@ function AppLayout() {
               {isSessionExpiryEnabled ? (
                 <span
                   className={[
-                    "hidden rounded-full border px-3 py-2 text-xs font-medium md:inline-flex",
-                    sessionToneClass,
+                    shellLayoutClasses.sessionBadge,
+                    sessionStatus.toneClass,
                   ].join(" ")}
                 >
-                  {sessionText}
+                  {sessionStatus.text}
                 </span>
               ) : null}
               <div className="relative" ref={profileMenuRef}>
@@ -584,15 +543,15 @@ function AppLayout() {
                   aria-expanded={isProfileOpen}
                   aria-label={t("ui.dev.profile.menu_aria", "계정 메뉴 열기")}
                 >
-                  <div className="grid h-8 w-8 place-items-center rounded-full bg-primary/15 text-xs font-semibold text-primary">
-                    {profileInitial}
+                  <div className={shellLayoutClasses.profileInitial}>
+                    {profileSummary.initial}
                   </div>
                   <div className="hidden min-w-0 text-left md:block">
                     <p className="truncate text-xs font-medium text-foreground">
-                      {profileName}
+                      {profileSummary.name}
                     </p>
                     <p className="truncate text-[11px] text-muted-foreground">
-                      {profileEmail}
+                      {profileSummary.email}
                     </p>
                   </div>
                   <ChevronDown
@@ -604,18 +563,18 @@ function AppLayout() {
                 {isProfileOpen ? (
                   <div
                     role="menu"
-                    className="absolute right-0 z-30 mt-2 w-72 rounded-xl border border-border bg-card p-3 shadow-xl"
+                    className={shellLayoutClasses.profileMenu}
                   >
                     <p className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
                       {t("ui.dev.profile.menu_title", "Account")}
                     </p>
-                    <div className="mt-2 flex flex-col gap-2 rounded-lg border border-border px-3 py-3">
+                    <div className={shellLayoutClasses.profileCard}>
                       <div>
                         <p className="truncate text-sm font-semibold text-foreground">
-                          {profileName}
+                          {profileSummary.name}
                         </p>
                         <p className="truncate text-xs text-muted-foreground">
-                          {profileEmail}
+                          {profileSummary.email}
                         </p>
                       </div>
                       <div className="flex items-center pt-1">
@@ -628,7 +587,7 @@ function AppLayout() {
                       </div>
                     </div>
 
-                    <div className="mt-2 rounded-lg border border-border px-3 py-3">
+                    <div className={shellLayoutClasses.settingsCard}>
                       <div className="flex items-center justify-between gap-3">
                         <div>
                           <p className="text-sm font-medium text-foreground">
@@ -636,7 +595,7 @@ function AppLayout() {
                           </p>
                           <p className="text-xs text-muted-foreground">
                             {isSessionExpiryEnabled
-                              ? sessionText
+                              ? sessionStatus.text
                               : t(
                                   "ui.dev.session.disabled",
                                   "세션 만료 비활성화",
@@ -736,7 +695,7 @@ function AppLayout() {
             </div>
           </div>
         </header>
-        <main className="min-w-0 px-5 py-6 md:px-10 md:py-10">
+        <main className={shellLayoutClasses.mainMinWidth}>
           <Outlet />
         </main>
         <RoleSwitcher />
diff --git a/common/shell/.gitkeep b/common/shell/.gitkeep
deleted file mode 100644
index 8b137891..00000000
--- a/common/shell/.gitkeep
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/common/shell/index.ts b/common/shell/index.ts
new file mode 100644
index 00000000..9f36799c
--- /dev/null
+++ b/common/shell/index.ts
@@ -0,0 +1,170 @@
+export type ShellTheme = "light" | "dark";
+
+export type ShellTranslator = (
+  key: string,
+  fallback: string,
+  vars?: Record<string, string | number>,
+) => string;
+
+type ShellSessionStatusParams = {
+  expiresAtSec?: number | null;
+  nowMs: number;
+  t: ShellTranslator;
+};
+
+type ShellProfileSummaryParams = {
+  profileName?: string | null;
+  profileEmail?: string | null;
+  fallbackName: string;
+  fallbackEmail: string;
+};
+
+export const SHELL_THEME_STORAGE_KEY = "admin_theme";
+export const SHELL_SESSION_EXPIRY_STORAGE_KEY =
+  "baron_session_expiry_enabled";
+
+export const shellLayoutClasses = {
+  root: "grid min-h-screen bg-background text-foreground md:grid-cols-[240px,1fr]",
+  aside:
+    "flex flex-col justify-between border-b border-border bg-card md:sticky md:top-0 md:h-screen md:border-b-0 md:border-r md:bg-card md:backdrop-blur",
+  asideStatic:
+    "border-b border-border bg-card md:sticky md:top-0 md:h-screen md:border-b-0 md:border-r md:bg-card md:backdrop-blur",
+  brandSection:
+    "flex items-center justify-between px-5 py-4 md:block md:space-y-6 md:py-6",
+  brandWrap: "flex items-center gap-3 md:flex-col md:items-start",
+  brandIcon:
+    "grid h-11 w-11 place-items-center rounded-xl bg-primary/15 text-primary shadow-[0_12px_30px_rgba(54,211,153,0.22)]",
+  scopeBadge:
+    "hidden rounded-full border border-border px-3 py-2 text-xs text-muted-foreground md:inline-flex md:items-center md:gap-2",
+  navWrap: "px-2 pb-4 md:px-3 md:pb-8",
+  navMeta:
+    "flex flex-wrap gap-2 px-3 pb-4 text-[11px] text-muted-foreground md:flex-col md:items-start",
+  navList: "flex flex-col gap-1",
+  navItemBase:
+    "flex items-center gap-3 rounded-xl px-3 py-3 text-sm transition",
+  navItemActive:
+    "bg-primary/10 text-primary shadow-[0_12px_40px_rgba(54,211,153,0.18)]",
+  navItemIdle: "text-muted-foreground hover:bg-muted/10 hover:text-foreground",
+  sidebarFooterNotice:
+    "hidden space-y-2 px-5 pb-6 pt-2 text-xs text-[var(--color-muted)] md:block",
+  logoutButton:
+    "flex w-full items-center gap-3 rounded-xl px-3 py-3 text-sm text-muted-foreground transition hover:bg-destructive/10 hover:text-destructive",
+  header: "sticky top-0 z-20 border-b border-border bg-background/90 backdrop-blur",
+  headerElevated:
+    "sticky top-0 z-50 border-b border-border bg-background/90 backdrop-blur",
+  headerInner: "flex items-center justify-between px-5 py-4 md:px-8",
+  headerTitleWrap: "flex flex-col gap-1",
+  headerActions: "flex items-center gap-2 text-sm",
+  actionButton:
+    "inline-flex items-center gap-2 rounded-full border border-border px-3 py-2 text-muted-foreground transition hover:bg-muted/20",
+  sessionBadge:
+    "hidden rounded-full border px-3 py-2 text-xs font-medium md:inline-flex",
+  profileInitial:
+    "grid h-8 w-8 place-items-center rounded-full bg-primary/15 text-xs font-semibold text-primary",
+  profileMenu:
+    "absolute right-0 z-30 mt-2 w-72 rounded-xl border border-border bg-card p-3 shadow-xl",
+  profileCard:
+    "mt-2 flex flex-col gap-2 rounded-lg border border-border px-3 py-3",
+  settingsCard: "mt-2 rounded-lg border border-border px-3 py-3",
+  content: "relative",
+  contentWide: "relative min-w-0",
+  main: "px-5 py-6 md:px-10 md:py-10",
+  mainMinWidth: "min-w-0 px-5 py-6 md:px-10 md:py-10",
+} as const;
+
+export function readShellTheme(): ShellTheme {
+  return window.localStorage.getItem(SHELL_THEME_STORAGE_KEY) === "dark"
+    ? "dark"
+    : "light";
+}
+
+export function applyShellTheme(theme: ShellTheme) {
+  const root = document.documentElement;
+  root.classList.remove("light", "dark");
+  root.classList.add(theme);
+  window.localStorage.setItem(SHELL_THEME_STORAGE_KEY, theme);
+}
+
+export function readShellSessionExpiryEnabled() {
+  return window.localStorage.getItem(SHELL_SESSION_EXPIRY_STORAGE_KEY) !== "false";
+}
+
+export function writeShellSessionExpiryEnabled(isEnabled: boolean) {
+  window.localStorage.setItem(
+    SHELL_SESSION_EXPIRY_STORAGE_KEY,
+    String(isEnabled),
+  );
+}
+
+export function buildShellProfileSummary({
+  profileName,
+  profileEmail,
+  fallbackName,
+  fallbackEmail,
+}: ShellProfileSummaryParams) {
+  const resolvedName = profileName?.trim() || fallbackName;
+  const resolvedEmail = profileEmail?.trim() || fallbackEmail;
+
+  return {
+    name: resolvedName,
+    email: resolvedEmail,
+    initial: resolvedName.charAt(0).toUpperCase(),
+  };
+}
+
+export function buildShellSessionStatus({
+  expiresAtSec,
+  nowMs,
+  t,
+}: ShellSessionStatusParams) {
+  const remainingMs =
+    typeof expiresAtSec === "number" ? expiresAtSec * 1000 - nowMs : null;
+  const remainingTotalSec =
+    remainingMs !== null ? Math.max(0, Math.floor(remainingMs / 1000)) : null;
+  const remainingMinutes =
+    remainingTotalSec !== null ? Math.floor(remainingTotalSec / 60) : null;
+  const remainingSeconds =
+    remainingTotalSec !== null ? remainingTotalSec % 60 : null;
+
+  let toneClass =
+    "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300";
+  let text = t("ui.dev.session.active", "세션 활성");
+
+  if (remainingMs === null) {
+    toneClass = "border-border bg-card text-muted-foreground";
+    text = t("ui.dev.session.unknown", "알 수 없음");
+  } else if (remainingMs <= 0) {
+    toneClass =
+      "border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-300";
+    text = t("ui.dev.session.expired", "세션 만료");
+  } else if (
+    remainingMinutes !== null &&
+    remainingSeconds !== null &&
+    remainingMinutes <= 5
+  ) {
+    toneClass =
+      "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300";
+    text = t(
+      "ui.dev.session.expiring",
+      "만료 임박: {{minutes}}분 {{seconds}}초 남음",
+      {
+        minutes: remainingMinutes,
+        seconds: remainingSeconds,
+      },
+    );
+  } else {
+    text = t(
+      "ui.dev.session.remaining",
+      "만료 예정: {{minutes}}분 {{seconds}}초 남음",
+      {
+        minutes: remainingMinutes ?? 0,
+        seconds: remainingSeconds ?? 0,
+      },
+    );
+  }
+
+  return {
+    toneClass,
+    text,
+  };
+}
diff --git a/devfront/src/components/layout/AppLayout.tsx b/devfront/src/components/layout/AppLayout.tsx
index 4ea438b9..8e58ddd6 100644
--- a/devfront/src/components/layout/AppLayout.tsx
+++ b/devfront/src/components/layout/AppLayout.tsx
@@ -20,6 +20,15 @@ import {
   shouldAttemptSlidingSessionRenew,
   shouldAttemptUnlimitedSessionRenew,
 } from "../../lib/sessionSliding";
+import {
+  applyShellTheme,
+  buildShellProfileSummary,
+  buildShellSessionStatus,
+  readShellSessionExpiryEnabled,
+  readShellTheme,
+  shellLayoutClasses,
+  writeShellSessionExpiryEnabled,
+} from "../../../../common/shell";
 import LanguageSelector from "../common/LanguageSelector";
 import { Toaster } from "../ui/toaster";
 
@@ -52,15 +61,11 @@ function AppLayout() {
   const isRenewInFlightRef = useRef(false);
   const lastRenewAttemptAtRef = useRef(0);
   const lastVisitedRouteRef = useRef<string | null>(null);
-  const [theme, setTheme] = useState<"light" | "dark">(() => {
-    const stored = window.localStorage.getItem("admin_theme");
-    return stored === "dark" ? "dark" : "light";
-  });
+  const [theme, setTheme] = useState<"light" | "dark">(readShellTheme);
   const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
-  const [isSessionExpiryEnabled, setIsSessionExpiryEnabled] = useState(() => {
-    const stored = window.localStorage.getItem("baron_session_expiry_enabled");
-    return stored !== "false";
-  });
+  const [isSessionExpiryEnabled, setIsSessionExpiryEnabled] = useState(
+    readShellSessionExpiryEnabled,
+  );
   const [nowMs, setNowMs] = useState(() => Date.now());
 
   const hasAccessToken = Boolean(auth.user?.access_token);
@@ -82,14 +87,7 @@ function AppLayout() {
   };
 
   useEffect(() => {
-    const root = document.documentElement;
-    root.classList.remove("light", "dark");
-    if (theme === "light") {
-      root.classList.add("light");
-    } else {
-      root.classList.add("dark");
-    }
-    window.localStorage.setItem("admin_theme", theme);
+    applyShellTheme(theme);
   }, [theme]);
 
   useEffect(() => {
@@ -265,84 +263,41 @@ function AppLayout() {
     setTheme((prev) => (prev === "light" ? "dark" : "light"));
   };
 
-  const profileName =
-    profile?.name?.trim() ||
-    auth.user?.profile?.name?.toString().trim() ||
-    auth.user?.profile?.preferred_username?.toString().trim() ||
-    auth.user?.profile?.nickname?.toString().trim() ||
-    t("ui.dev.profile.unknown_name", "Unknown User");
-  const profileEmail =
-    profile?.email?.trim() ||
-    auth.user?.profile?.email?.toString().trim() ||
-    t("ui.dev.profile.unknown_email", "unknown@example.com");
-  const profileInitial = profileName.charAt(0).toUpperCase();
+  const profileSummary = buildShellProfileSummary({
+    profileName:
+      profile?.name ||
+      auth.user?.profile?.name?.toString() ||
+      auth.user?.profile?.preferred_username?.toString() ||
+      auth.user?.profile?.nickname?.toString(),
+    profileEmail: profile?.email || auth.user?.profile?.email?.toString(),
+    fallbackName: t("ui.dev.profile.unknown_name", "Unknown User"),
+    fallbackEmail: t("ui.dev.profile.unknown_email", "unknown@example.com"),
+  });
   const currentRole = resolveProfileRole(
     auth.user?.profile as Record<string, unknown> | undefined,
   );
   const displayRoleKey = profile?.role || currentRole;
-
-  const expiresAtSec = auth.user?.expires_at;
-  const remainingMs =
-    typeof expiresAtSec === "number" ? expiresAtSec * 1000 - nowMs : null;
-  const remainingTotalSec =
-    remainingMs !== null ? Math.max(0, Math.floor(remainingMs / 1000)) : null;
-  const remainingMinutes =
-    remainingTotalSec !== null ? Math.floor(remainingTotalSec / 60) : null;
-  const remainingSeconds =
-    remainingTotalSec !== null ? remainingTotalSec % 60 : null;
-
-  let sessionToneClass =
-    "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300";
-  let sessionText = t("ui.dev.session.active", "Session active");
-
-  if (remainingMs === null) {
-    sessionToneClass = "border-border bg-card text-muted-foreground";
-    sessionText = t("ui.dev.session.unknown", "Unknown");
-  } else if (remainingMs <= 0) {
-    sessionToneClass =
-      "border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-300";
-    sessionText = t("ui.dev.session.expired", "Session expired");
-  } else if (
-    remainingMinutes !== null &&
-    remainingSeconds !== null &&
-    remainingMinutes <= 5
-  ) {
-    sessionToneClass =
-      "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300";
-    sessionText = t(
-      "ui.dev.session.expiring",
-      "Expiring soon: {{minutes}}m {{seconds}}s left",
-      {
-        minutes: remainingMinutes,
-        seconds: remainingSeconds,
-      },
-    );
-  } else {
-    sessionText = t(
-      "ui.dev.session.remaining",
-      "Expires in {{minutes}}m {{seconds}}s",
-      {
-        minutes: remainingMinutes ?? 0,
-        seconds: remainingSeconds ?? 0,
-      },
-    );
-  }
+  const sessionStatus = buildShellSessionStatus({
+    expiresAtSec: auth.user?.expires_at,
+    nowMs,
+    t,
+  });
 
   const handleSessionExpiryToggle = () => {
     setIsSessionExpiryEnabled((prev) => {
       const next = !prev;
-      window.localStorage.setItem("baron_session_expiry_enabled", String(next));
+      writeShellSessionExpiryEnabled(next);
       return next;
     });
   };
 
   return (
-    <div className="grid min-h-screen bg-background text-foreground md:grid-cols-[240px,1fr]">
-      <aside className="flex flex-col justify-between border-b border-border bg-card md:sticky md:top-0 md:h-screen md:border-b-0 md:border-r md:bg-card md:backdrop-blur">
+    <div className={shellLayoutClasses.root}>
+      <aside className={shellLayoutClasses.aside}>
         <div>
-          <div className="flex items-center justify-between px-5 py-4 md:block md:space-y-6 md:py-6">
-            <div className="flex items-center gap-3 md:flex-col md:items-start">
-              <div className="grid h-11 w-11 place-items-center rounded-xl bg-primary/15 text-primary shadow-[0_12px_30px_rgba(54,211,153,0.22)]">
+          <div className={shellLayoutClasses.brandSection}>
+            <div className={shellLayoutClasses.brandWrap}>
+              <div className={shellLayoutClasses.brandIcon}>
                 <ShieldHalf size={20} />
               </div>
               <div>
@@ -354,28 +309,28 @@ function AppLayout() {
                 </h1>
               </div>
             </div>
-            <div className="hidden rounded-full border border-border px-3 py-2 text-xs text-muted-foreground md:inline-flex md:items-center md:gap-2">
+            <div className={shellLayoutClasses.scopeBadge}>
               <BadgeCheck size={14} />
               {t("ui.dev.scope_badge", "Scoped to /dev")}
             </div>
           </div>
-          <nav className="px-2 pb-4 md:px-3 md:pb-8">
-            <div className="flex flex-wrap gap-2 px-3 pb-4 text-[11px] text-muted-foreground md:flex-col md:items-start">
+          <nav className={shellLayoutClasses.navWrap}>
+            <div className={shellLayoutClasses.navMeta}>
               <span className="rounded-full border border-border px-3 py-1">
                 {t("ui.dev.env_badge", "Env: dev")}
               </span>
             </div>
-            <div className="flex flex-col gap-1">
+            <div className={shellLayoutClasses.navList}>
               {navItems.map(({ labelKey, labelFallback, to, icon: Icon }) => (
                 <NavLink
                   key={to}
                   to={to}
                   className={({ isActive }) =>
                     [
-                      "flex items-center gap-3 rounded-xl px-3 py-3 text-sm transition",
+                      shellLayoutClasses.navItemBase,
                       isActive
-                        ? "bg-primary/10 text-primary shadow-[0_12px_40px_rgba(54,211,153,0.18)]"
-                        : "text-muted-foreground hover:bg-muted/10 hover:text-foreground",
+                        ? shellLayoutClasses.navItemActive
+                        : shellLayoutClasses.navItemIdle,
                     ].join(" ")
                   }
                 >
@@ -392,13 +347,13 @@ function AppLayout() {
             <button
               type="button"
               onClick={handleLogout}
-              className="flex w-full items-center gap-3 rounded-xl px-3 py-3 text-sm text-muted-foreground transition hover:bg-destructive/10 hover:text-destructive"
+              className={shellLayoutClasses.logoutButton}
             >
               <LogOut size={18} />
               <span>{t("ui.dev.nav.logout", "Logout")}</span>
             </button>
           </div>
-          <div className="hidden space-y-2 px-5 pb-6 pt-2 text-xs text-[var(--color-muted)] md:block">
+          <div className={shellLayoutClasses.sidebarFooterNotice}>
             <p>{t("msg.dev.sidebar.notice", "Developer Console")}</p>
             <p>
               {t(
@@ -410,10 +365,10 @@ function AppLayout() {
         </div>
       </aside>
 
-      <div className="relative">
-        <header className="sticky top-0 z-20 border-b border-border bg-background/90 backdrop-blur">
-          <div className="flex items-center justify-between px-5 py-4 md:px-8">
-            <div className="flex flex-col gap-1">
+      <div className={shellLayoutClasses.content}>
+        <header className={shellLayoutClasses.header}>
+          <div className={shellLayoutClasses.headerInner}>
+            <div className={shellLayoutClasses.headerTitleWrap}>
               <p className="text-xs uppercase tracking-[0.22em] text-muted-foreground">
                 {t("ui.dev.header.plane", "Dev Plane")}
               </p>
@@ -421,12 +376,12 @@ function AppLayout() {
                 {t("ui.dev.header.subtitle", "Manage your applications")}
               </span>
             </div>
-            <div className="flex items-center gap-2 text-sm">
+            <div className={shellLayoutClasses.headerActions}>
               <LanguageSelector />
               <button
                 type="button"
                 onClick={toggleTheme}
-                className="inline-flex items-center gap-2 rounded-full border border-border px-3 py-2 text-muted-foreground transition hover:bg-muted/20"
+                className={shellLayoutClasses.actionButton}
                 aria-label={t("ui.common.theme_toggle", "Toggle theme")}
               >
                 {theme === "light" ? <Sun size={16} /> : <Moon size={16} />}
@@ -437,11 +392,11 @@ function AppLayout() {
               {isSessionExpiryEnabled ? (
                 <span
                   className={[
-                    "hidden rounded-full border px-3 py-2 text-xs font-medium md:inline-flex",
-                    sessionToneClass,
+                    shellLayoutClasses.sessionBadge,
+                    sessionStatus.toneClass,
                   ].join(" ")}
                 >
-                  {sessionText}
+                  {sessionStatus.text}
                 </span>
               ) : null}
               <div className="relative" ref={profileMenuRef}>
@@ -456,15 +411,15 @@ function AppLayout() {
                     "Open account menu",
                   )}
                 >
-                  <div className="grid h-8 w-8 place-items-center rounded-full bg-primary/15 text-xs font-semibold text-primary">
-                    {profileInitial}
+                  <div className={shellLayoutClasses.profileInitial}>
+                    {profileSummary.initial}
                   </div>
                   <div className="hidden min-w-0 text-left md:block">
                     <p className="truncate text-xs font-medium text-foreground">
-                      {profileName}
+                      {profileSummary.name}
                     </p>
                     <p className="truncate text-[11px] text-muted-foreground">
-                      {profileEmail}
+                      {profileSummary.email}
                     </p>
                   </div>
                   <ChevronDown
@@ -475,18 +430,18 @@ function AppLayout() {
                 {isProfileMenuOpen ? (
                   <div
                     role="menu"
-                    className="absolute right-0 z-30 mt-2 w-72 rounded-xl border border-border bg-card p-3 shadow-xl"
+                    className={shellLayoutClasses.profileMenu}
                   >
                     <p className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
                       {t("ui.dev.profile.menu_title", "Account")}
                     </p>
-                    <div className="mt-2 flex flex-col gap-2 rounded-lg border border-border px-3 py-3">
+                    <div className={shellLayoutClasses.profileCard}>
                       <div>
                         <p className="truncate text-sm font-semibold text-foreground">
-                          {profileName}
+                          {profileSummary.name}
                         </p>
                         <p className="truncate text-xs text-muted-foreground">
-                          {profileEmail}
+                          {profileSummary.email}
                         </p>
                       </div>
                       <div className="flex items-center pt-1">
@@ -499,7 +454,7 @@ function AppLayout() {
                       </div>
                     </div>
 
-                    <div className="mt-2 rounded-lg border border-border px-3 py-3">
+                    <div className={shellLayoutClasses.settingsCard}>
                       <div className="flex items-center justify-between gap-3">
                         <div>
                           <p className="text-sm font-medium text-foreground">
@@ -507,7 +462,7 @@ function AppLayout() {
                           </p>
                           <p className="text-xs text-muted-foreground">
                             {isSessionExpiryEnabled
-                              ? sessionText
+                              ? sessionStatus.text
                               : t(
                                   "ui.dev.session.disabled",
                                   "Session expiry disabled",
@@ -563,7 +518,7 @@ function AppLayout() {
             </div>
           </div>
         </header>
-        <main className="px-5 py-6 md:px-10 md:py-10">
+        <main className={shellLayoutClasses.main}>
           <Outlet />
         </main>
       </div>
diff --git a/orgfront/src/components/layout/AppLayout.tsx b/orgfront/src/components/layout/AppLayout.tsx
index 4e0eb33b..b9b55eda 100644
--- a/orgfront/src/components/layout/AppLayout.tsx
+++ b/orgfront/src/components/layout/AppLayout.tsx
@@ -19,6 +19,15 @@ import {
   shouldAttemptSlidingSessionRenew,
   shouldAttemptUnlimitedSessionRenew,
 } from "../../lib/sessionSliding";
+import {
+  applyShellTheme,
+  buildShellProfileSummary,
+  buildShellSessionStatus,
+  readShellSessionExpiryEnabled,
+  readShellTheme,
+  shellLayoutClasses,
+  writeShellSessionExpiryEnabled,
+} from "../../../../common/shell";
 import LanguageSelector from "../common/LanguageSelector";
 import { Toaster } from "../ui/toaster";
 
@@ -45,15 +54,11 @@ function AppLayout() {
   const isRenewInFlightRef = useRef(false);
   const lastRenewAttemptAtRef = useRef(0);
   const lastVisitedRouteRef = useRef<string | null>(null);
-  const [theme, setTheme] = useState<"light" | "dark">(() => {
-    const stored = window.localStorage.getItem("admin_theme");
-    return stored === "dark" ? "dark" : "light";
-  });
+  const [theme, setTheme] = useState<"light" | "dark">(readShellTheme);
   const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
-  const [isSessionExpiryEnabled, setIsSessionExpiryEnabled] = useState(() => {
-    const stored = window.localStorage.getItem("baron_session_expiry_enabled");
-    return stored !== "false";
-  });
+  const [isSessionExpiryEnabled, setIsSessionExpiryEnabled] = useState(
+    readShellSessionExpiryEnabled,
+  );
   const [nowMs, setNowMs] = useState(() => Date.now());
 
   const hasAccessToken = Boolean(auth.user?.access_token);
@@ -71,14 +76,7 @@ function AppLayout() {
   };
 
   useEffect(() => {
-    const root = document.documentElement;
-    root.classList.remove("light", "dark");
-    if (theme === "light") {
-      root.classList.add("light");
-    } else {
-      root.classList.add("dark");
-    }
-    window.localStorage.setItem("admin_theme", theme);
+    applyShellTheme(theme);
   }, [theme]);
 
   useEffect(() => {
@@ -254,17 +252,16 @@ function AppLayout() {
     setTheme((prev) => (prev === "light" ? "dark" : "light"));
   };
 
-  const profileName =
-    profile?.name?.trim() ||
-    auth.user?.profile?.name?.toString().trim() ||
-    auth.user?.profile?.preferred_username?.toString().trim() ||
-    auth.user?.profile?.nickname?.toString().trim() ||
-    t("ui.dev.profile.unknown_name", "Unknown User");
-  const profileEmail =
-    profile?.email?.trim() ||
-    auth.user?.profile?.email?.toString().trim() ||
-    t("ui.dev.profile.unknown_email", "unknown@example.com");
-  const profileInitial = profileName.charAt(0).toUpperCase();
+  const profileSummary = buildShellProfileSummary({
+    profileName:
+      profile?.name ||
+      auth.user?.profile?.name?.toString() ||
+      auth.user?.profile?.preferred_username?.toString() ||
+      auth.user?.profile?.nickname?.toString(),
+    profileEmail: profile?.email || auth.user?.profile?.email?.toString(),
+    fallbackName: t("ui.dev.profile.unknown_name", "Unknown User"),
+    fallbackEmail: t("ui.dev.profile.unknown_email", "unknown@example.com"),
+  });
   const currentRole = resolveProfileRole(
     auth.user?.profile as Record<string, unknown> | undefined,
   );
@@ -275,68 +272,27 @@ function AppLayout() {
     "tenant_admin",
     "rp_admin",
   ].includes(currentRole);
-  const expiresAtSec = auth.user?.expires_at;
-  const remainingMs =
-    typeof expiresAtSec === "number" ? expiresAtSec * 1000 - nowMs : null;
-  const remainingTotalSec =
-    remainingMs !== null ? Math.max(0, Math.floor(remainingMs / 1000)) : null;
-  const remainingMinutes =
-    remainingTotalSec !== null ? Math.floor(remainingTotalSec / 60) : null;
-  const remainingSeconds =
-    remainingTotalSec !== null ? remainingTotalSec % 60 : null;
-
-  let sessionToneClass =
-    "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300";
-  let sessionText = t("ui.dev.session.active", "세션 활성");
-
-  if (remainingMs === null) {
-    sessionToneClass = "border-border bg-card text-muted-foreground";
-    sessionText = t("ui.dev.session.unknown", "알 수 없음");
-  } else if (remainingMs <= 0) {
-    sessionToneClass =
-      "border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-300";
-    sessionText = t("ui.dev.session.expired", "세션 만료");
-  } else if (
-    remainingMinutes !== null &&
-    remainingSeconds !== null &&
-    remainingMinutes <= 5
-  ) {
-    sessionToneClass =
-      "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300";
-    sessionText = t(
-      "ui.dev.session.expiring",
-      "만료 임박: {{minutes}}분 {{seconds}}초 남음",
-      {
-        minutes: remainingMinutes,
-        seconds: remainingSeconds,
-      },
-    );
-  } else {
-    sessionText = t(
-      "ui.dev.session.remaining",
-      "만료 예정: {{minutes}}분 {{seconds}}초 남음",
-      {
-        minutes: remainingMinutes ?? 0,
-        seconds: remainingSeconds ?? 0,
-      },
-    );
-  }
+  const sessionStatus = buildShellSessionStatus({
+    expiresAtSec: auth.user?.expires_at,
+    nowMs,
+    t,
+  });
 
   const handleSessionExpiryToggle = () => {
     setIsSessionExpiryEnabled((prev) => {
       const next = !prev;
-      window.localStorage.setItem("baron_session_expiry_enabled", String(next));
+      writeShellSessionExpiryEnabled(next);
       return next;
     });
   };
 
   return (
-    <div className="grid min-h-screen bg-background text-foreground md:grid-cols-[240px,1fr]">
-      <aside className="flex flex-col justify-between border-b border-border bg-card md:sticky md:top-0 md:h-screen md:border-b-0 md:border-r md:bg-card md:backdrop-blur">
+    <div className={shellLayoutClasses.root}>
+      <aside className={shellLayoutClasses.aside}>
         <div>
-          <div className="flex items-center justify-between px-5 py-4 md:block md:space-y-6 md:py-6">
-            <div className="flex items-center gap-3 md:flex-col md:items-start">
-              <div className="grid h-11 w-11 place-items-center rounded-xl bg-primary/15 text-primary shadow-[0_12px_30px_rgba(54,211,153,0.22)]">
+          <div className={shellLayoutClasses.brandSection}>
+            <div className={shellLayoutClasses.brandWrap}>
+              <div className={shellLayoutClasses.brandIcon}>
                 <ShieldHalf size={20} />
               </div>
               <div>
@@ -348,18 +304,18 @@ function AppLayout() {
                 </h1>
               </div>
             </div>
-            <div className="hidden rounded-full border border-border px-3 py-2 text-xs text-muted-foreground md:inline-flex md:items-center md:gap-2">
+            <div className={shellLayoutClasses.scopeBadge}>
               <BadgeCheck size={14} />
               {t("ui.dev.scope_badge", "Scoped to /dev")}
             </div>
           </div>
-          <nav className="px-2 pb-4 md:px-3 md:pb-8">
-            <div className="flex flex-wrap gap-2 px-3 pb-4 text-[11px] text-muted-foreground md:flex-col md:items-start">
+          <nav className={shellLayoutClasses.navWrap}>
+            <div className={shellLayoutClasses.navMeta}>
               <span className="rounded-full border border-border px-3 py-1">
                 {t("ui.dev.env_badge", "Env: dev")}
               </span>
             </div>
-            <div className="flex flex-col gap-1">
+            <div className={shellLayoutClasses.navList}>
               {isDevConsoleAllowed &&
                 navItems.map(({ labelKey, labelFallback, to, icon: Icon }) => (
                   <NavLink
@@ -367,10 +323,10 @@ function AppLayout() {
                     to={to}
                     className={({ isActive }) =>
                       [
-                        "flex items-center gap-3 rounded-xl px-3 py-3 text-sm transition",
+                        shellLayoutClasses.navItemBase,
                         isActive
-                          ? "bg-primary/10 text-primary shadow-[0_12px_40px_rgba(54,211,153,0.18)]"
-                          : "text-muted-foreground hover:bg-muted/10 hover:text-foreground",
+                          ? shellLayoutClasses.navItemActive
+                          : shellLayoutClasses.navItemIdle,
                       ].join(" ")
                     }
                   >
@@ -387,13 +343,13 @@ function AppLayout() {
             <button
               type="button"
               onClick={handleLogout}
-              className="flex w-full items-center gap-3 rounded-xl px-3 py-3 text-sm text-muted-foreground transition hover:bg-destructive/10 hover:text-destructive"
+              className={shellLayoutClasses.logoutButton}
             >
               <LogOut size={18} />
               <span>{t("ui.dev.nav.logout", "Logout")}</span>
             </button>
           </div>
-          <div className="hidden space-y-2 px-5 pb-6 pt-2 text-xs text-[var(--color-muted)] md:block">
+          <div className={shellLayoutClasses.sidebarFooterNotice}>
             <p>{t("msg.dev.sidebar.notice", "Developer Console")}</p>
             <p>
               {t(
@@ -405,10 +361,10 @@ function AppLayout() {
         </div>
       </aside>
 
-      <div className="relative">
-        <header className="sticky top-0 z-20 border-b border-border bg-background/90 backdrop-blur">
-          <div className="flex items-center justify-between px-5 py-4 md:px-8">
-            <div className="flex flex-col gap-1">
+      <div className={shellLayoutClasses.content}>
+        <header className={shellLayoutClasses.header}>
+          <div className={shellLayoutClasses.headerInner}>
+            <div className={shellLayoutClasses.headerTitleWrap}>
               <p className="text-xs uppercase tracking-[0.22em] text-muted-foreground">
                 {t("ui.dev.header.plane", "Dev Plane")}
               </p>
@@ -416,12 +372,12 @@ function AppLayout() {
                 {t("ui.dev.header.subtitle", "Manage your applications")}
               </span>
             </div>
-            <div className="flex items-center gap-2 text-sm">
+            <div className={shellLayoutClasses.headerActions}>
               <LanguageSelector />
               <button
                 type="button"
                 onClick={toggleTheme}
-                className="inline-flex items-center gap-2 rounded-full border border-border px-3 py-2 text-muted-foreground transition hover:bg-muted/20"
+                className={shellLayoutClasses.actionButton}
                 aria-label={t("ui.common.theme_toggle", "테마 전환")}
               >
                 {theme === "light" ? <Sun size={16} /> : <Moon size={16} />}
@@ -432,11 +388,11 @@ function AppLayout() {
               {isSessionExpiryEnabled ? (
                 <span
                   className={[
-                    "hidden rounded-full border px-3 py-2 text-xs font-medium md:inline-flex",
-                    sessionToneClass,
+                    shellLayoutClasses.sessionBadge,
+                    sessionStatus.toneClass,
                   ].join(" ")}
                 >
-                  {sessionText}
+                  {sessionStatus.text}
                 </span>
               ) : null}
               <div className="relative" ref={profileMenuRef}>
@@ -448,15 +404,15 @@ function AppLayout() {
                   aria-expanded={isProfileMenuOpen}
                   aria-label={t("ui.dev.profile.menu_aria", "계정 메뉴 열기")}
                 >
-                  <div className="grid h-8 w-8 place-items-center rounded-full bg-primary/15 text-xs font-semibold text-primary">
-                    {profileInitial}
+                  <div className={shellLayoutClasses.profileInitial}>
+                    {profileSummary.initial}
                   </div>
                   <div className="hidden min-w-0 text-left md:block">
                     <p className="truncate text-xs font-medium text-foreground">
-                      {profileName}
+                      {profileSummary.name}
                     </p>
                     <p className="truncate text-[11px] text-muted-foreground">
-                      {profileEmail}
+                      {profileSummary.email}
                     </p>
                   </div>
                   <ChevronDown
@@ -467,18 +423,18 @@ function AppLayout() {
                 {isProfileMenuOpen ? (
                   <div
                     role="menu"
-                    className="absolute right-0 z-30 mt-2 w-72 rounded-xl border border-border bg-card p-3 shadow-xl"
+                    className={shellLayoutClasses.profileMenu}
                   >
                     <p className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
                       {t("ui.dev.profile.menu_title", "Account")}
                     </p>
-                    <div className="mt-2 flex flex-col gap-2 rounded-lg border border-border px-3 py-3">
+                    <div className={shellLayoutClasses.profileCard}>
                       <div>
                         <p className="truncate text-sm font-semibold text-foreground">
-                          {profileName}
+                          {profileSummary.name}
                         </p>
                         <p className="truncate text-xs text-muted-foreground">
-                          {profileEmail}
+                          {profileSummary.email}
                         </p>
                       </div>
                       <div className="flex items-center pt-1">
@@ -491,7 +447,7 @@ function AppLayout() {
                       </div>
                     </div>
 
-                    <div className="mt-2 rounded-lg border border-border px-3 py-3">
+                    <div className={shellLayoutClasses.settingsCard}>
                       <div className="flex items-center justify-between gap-3">
                         <div>
                           <p className="text-sm font-medium text-foreground">
@@ -499,7 +455,7 @@ function AppLayout() {
                           </p>
                           <p className="text-xs text-muted-foreground">
                             {isSessionExpiryEnabled
-                              ? sessionText
+                              ? sessionStatus.text
                               : t(
                                   "ui.dev.session.disabled",
                                   "세션 만료 비활성화",
@@ -555,7 +511,7 @@ function AppLayout() {
             </div>
           </div>
         </header>
-        <main className="px-5 py-6 md:px-10 md:py-10">
+        <main className={shellLayoutClasses.main}>
           <Outlet />
         </main>
       </div>