diff --git a/src/components/builder/components/LayerPanel.tsx b/src/components/builder/components/LayerPanel.tsx
index a8febfc..a356a88 100644
--- a/src/components/builder/components/LayerPanel.tsx
+++ b/src/components/builder/components/LayerPanel.tsx
@@ -454,11 +454,20 @@ useEffect(() => {
   return (
     <SidebarLayout bodyClassName="px-2 pt-2 pb-8"
       header={
-        <div className="flex bg-[#111113] rounded-lg p-0.5 border border-white/6">
+        <div
+          className="flex w-full rounded-xl p-0.5 shadow-lg shadow-black/40"
+          style={{
+            background: 'linear-gradient(120deg, rgba(196,124,46,0.08), rgba(18,16,13,0.9))',
+            border: '1px solid rgba(196,124,46,0.15)',
+            boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.04)',
+          }}
+        >
           {(["source", "layers"] as const).map(tab => (
             <button key={tab} onClick={() => setActiveTab(tab)}
-              className={clsx("flex-1 flex items-center justify-center gap-1.5 py-2 rounded-md text-[11px] font-medium transition-all duration-150 outline-none select-none capitalize",
-                localMode === tab ? "bg-[#1c1c1f] text-zinc-100 shadow-sm" : "text-zinc-500 hover:text-zinc-300"
+              className={clsx("flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg text-[11px] font-medium transition-all duration-150 outline-none select-none capitalize",
+                localMode === tab
+                  ? "bg-[#1c1c1f] text-[#F0E6CC] shadow-[0_12px_28px_rgba(0,0,0,0.35)] ring-1 ring-[#C47C2E]/35"
+                  : "text-zinc-500 hover:text-zinc-300"
               )}>
               {tab === "source" ? <Film size={11} strokeWidth={2} /> : <Layers size={11} strokeWidth={2} />}
               {tab.charAt(0).toUpperCase() + tab.slice(1)}
diff --git a/src/components/builder/components/SidebarLayout.tsx b/src/components/builder/components/SidebarLayout.tsx
index 6e14e2c..5f167b9 100644
--- a/src/components/builder/components/SidebarLayout.tsx
+++ b/src/components/builder/components/SidebarLayout.tsx
@@ -12,20 +12,62 @@ interface Props {
 const SidebarLayout: React.FC<Props> = ({ header, children, bodyClassName, className }) => {
   return (
     <div
-      className={clsx('flex flex-col h-full min-h-0', className)}
-      style={{ background: 'var(--film-dark)' }}
+      className={clsx('flex flex-col h-full min-h-0 relative overflow-hidden', className)}
+      style={{
+        background: 'linear-gradient(180deg, rgba(10,9,7,0.95), rgba(7,7,6,0.96))',
+        boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.03), 0 18px 48px rgba(0,0,0,0.55)',
+        borderLeft: '1px solid rgba(196,124,46,0.08)',
+        borderRight: '1px solid rgba(196,124,46,0.08)',
+        backdropFilter: 'blur(12px) saturate(1.05)',
+      }}
     >
       <div
-        className="shrink-0 px-3 pt-3 pb-2 z-10"
+        aria-hidden
+        className="absolute inset-0 pointer-events-none"
         style={{
-          background: 'var(--film-dark)',
-          borderBottom: '1px solid rgba(196,124,46,0.08)',
+          background: 'radial-gradient(circle at 20% 10%, rgba(196,124,46,0.08), transparent 36%), radial-gradient(circle at 80% 0%, rgba(196,124,46,0.06), transparent 42%)',
+          opacity: 0.8,
+        }}
+      />
+
+      <div
+        className="shrink-0 px-3 pt-3 pb-2 z-10 relative"
+        style={{
+          background: 'linear-gradient(180deg, rgba(18,16,13,0.96), rgba(12,11,9,0.92))',
+          borderBottom: '1px solid rgba(196,124,46,0.12)',
+          boxShadow: '0 10px 28px rgba(0,0,0,0.45)',
         }}
       >
-        {header}
+        <div
+          aria-hidden
+          className="absolute inset-x-0 top-0 h-px"
+          style={{ background: 'linear-gradient(90deg, transparent, rgba(196,124,46,0.3), transparent)' }}
+        />
+        <div
+          aria-hidden
+          className="absolute inset-x-3 top-3 rounded-full h-7 blur-xl opacity-30"
+          style={{ background: 'radial-gradient(circle, rgba(196,124,46,0.25), transparent 60%)' }}
+        />
+        <div className="relative z-10">
+          {header}
+        </div>
       </div>
-      <div className={clsx('flex-1 min-h-0 overflow-y-auto overscroll-contain custom-scrollbar', bodyClassName)}>
-        {children}
+
+      <div
+        className={clsx('flex-1 min-h-0 overflow-y-auto overscroll-contain custom-scrollbar relative', bodyClassName)}
+        style={{
+          background: 'radial-gradient(circle at 50% -10%, rgba(196,124,46,0.05), transparent 55%)',
+          paddingBottom: 12,
+        }}
+      >
+        <div
+          aria-hidden
+          className="absolute inset-x-0 top-0 h-3 pointer-events-none"
+          style={{ background: 'linear-gradient(180deg, rgba(255,255,255,0.03), transparent)' }}
+        />
+        <div className="relative z-10">
+          {children}
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/builder/components/layout/Inspector.tsx b/src/components/builder/components/layout/Inspector.tsx
index 43077d2..0eaa2d8 100644
--- a/src/components/builder/components/layout/Inspector.tsx
+++ b/src/components/builder/components/layout/Inspector.tsx
@@ -20,11 +20,20 @@ const Inspector: React.FC<Props> = memo(({ config, setConfig }) => {
   return (
     <SidebarLayout
       header={
-        <div className="flex bg-[#111113] rounded-lg p-0.5 border border-white/6">
+        <div
+          className="flex w-full rounded-xl p-0.5 shadow-lg shadow-black/40"
+          style={{
+            background: 'linear-gradient(120deg, rgba(196,124,46,0.08), rgba(18,16,13,0.9))',
+            border: '1px solid rgba(196,124,46,0.15)',
+            boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.04)',
+          }}
+        >
           <button
             onClick={() => { clearSelection(); setActiveTab('canvas'); }}
             aria-pressed={currentMode === 'global'}
-            className={clsx('flex-1 flex items-center justify-center gap-1.5 py-1.5 rounded-md text-[11px] font-medium transition-all duration-150 outline-none select-none', currentMode === 'global' ? 'bg-[#1c1c1f] text-zinc-100 shadow-sm' : 'text-zinc-600 hover:text-zinc-400')}
+            className={clsx('flex-1 flex items-center justify-center gap-1.5 py-1.5 rounded-lg text-[11px] font-medium transition-all duration-150 outline-none select-none', currentMode === 'global'
+              ? 'bg-[#1c1c1f] text-[#F0E6CC] shadow-[0_12px_28px_rgba(0,0,0,0.35)] ring-1 ring-[#C47C2E]/35'
+              : 'text-zinc-600 hover:text-zinc-400')}
           >
             <Globe size={11} strokeWidth={2} />
             Canvas
@@ -32,7 +41,9 @@ const Inspector: React.FC<Props> = memo(({ config, setConfig }) => {
           <button
             onClick={() => setActiveTab('badge')}
             aria-pressed={currentMode === 'selection'}
-            className={clsx('flex-1 flex items-center justify-center gap-1.5 py-1.5 rounded-md text-[11px] font-medium transition-all duration-150 outline-none select-none', currentMode === 'selection' ? 'bg-[#1c1c1f] text-zinc-100 shadow-sm' : 'text-zinc-600 hover:text-zinc-400')}
+            className={clsx('flex-1 flex items-center justify-center gap-1.5 py-1.5 rounded-lg text-[11px] font-medium transition-all duration-150 outline-none select-none', currentMode === 'selection'
+              ? 'bg-[#1c1c1f] text-[#F0E6CC] shadow-[0_12px_28px_rgba(0,0,0,0.35)] ring-1 ring-[#C47C2E]/35'
+              : 'text-zinc-600 hover:text-zinc-400')}
           >
             <MousePointer2 size={11} strokeWidth={2} />
             {selCount > 0 ? `${selCount} selected` : 'Selection'}
diff --git a/src/components/builder/index.tsx b/src/components/builder/index.tsx
index b2b9e09..2ad9233 100644
--- a/src/components/builder/index.tsx
+++ b/src/components/builder/index.tsx
@@ -101,15 +101,15 @@ interface ToolbarBtnProps {
   hideOnMobile?: boolean;
 }
 const ToolbarBtn = memo<ToolbarBtnProps>(({ onClick, disabled, label, danger, href, active, children, hideOnMobile = false }) => {
-  const base = `relative group w-8 h-8 flex items-center justify-center rounded-lg transition-all duration-150 select-none outline-none focus-visible:ring-2 focus-visible:ring-[#C47C2E] ${hideOnMobile ? 'hidden lg:flex' : ''}`;
+  const base = `relative group w-9 h-9 flex items-center justify-center rounded-xl transition-all duration-150 select-none outline-none backdrop-blur-sm border border-white/8 bg-white/[0.02] focus-visible:ring-2 focus-visible:ring-[#C47C2E]/60 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0e0d0b] ${hideOnMobile ? 'hidden lg:flex' : ''}`;
   const cls = `${base} ${
     disabled
-      ? 'text-zinc-700 cursor-not-allowed pointer-events-none'
+      ? 'text-zinc-700 cursor-not-allowed pointer-events-none opacity-60'
       : active
-        ? 'text-[#D4A245] bg-[#C47C2E]/15 ring-1 ring-[#C47C2E]/25 cursor-pointer'
+        ? 'text-[#E8D8A8] bg-[#C47C2E]/18 border-[#C47C2E]/35 shadow-[0_12px_28px_rgba(0,0,0,0.35)] cursor-pointer'
         : danger
-          ? 'text-zinc-500 hover:text-red-400 hover:bg-red-500/10 active:scale-95 cursor-pointer'
-          : 'text-zinc-500 hover:text-[#D4A245] hover:bg-[#C47C2E]/10 active:scale-95 cursor-pointer'
+          ? 'text-zinc-500 hover:text-red-400 hover:bg-red-500/12 hover:border-red-500/30 active:scale-95 cursor-pointer'
+          : 'text-[rgba(200,185,155,0.7)] hover:text-[#F0E6CC] hover:bg-white/[0.06] hover:border-[#C47C2E]/30 active:scale-95 cursor-pointer'
   }`;
   const tooltip = !disabled && (
     <span className="absolute -bottom-9 left-1/2 -translate-x-1/2 px-2 py-1 rounded-md text-[10px] font-medium border whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-150 delay-300 pointer-events-none z-50 shadow-lg"
@@ -573,74 +573,103 @@ const StudioLayout: React.FC<{
 
         {/* ── HEADER (hidden in fullscreen) ── */}
         {!isFullscreen && (
-          <header className="h-12 shrink-0 flex items-center gap-2 px-3 z-30 relative"
-            style={{ background: 'var(--film-dark)', borderBottom: '1px solid rgba(196,124,46,0.1)' }}>
-            <div className="absolute bottom-0 left-0 right-0 h-px"
-              style={{ background: 'linear-gradient(90deg, transparent, rgba(196,124,46,0.2), transparent)' }} />
-
-            {/* Logo */}
-            <a href="/" style={{ textDecoration: 'none', flexShrink: 0 }}>
-              <span className="poster-font select-none hidden sm:block"
-                style={{ fontSize: 18, color: 'var(--film-cream)', letterSpacing: '0.12em', lineHeight: 1 }}>
-                POSTERIUM
-              </span>
-              {/* Mobile: just icon */}
-              <span className="poster-font select-none sm:hidden"
-                style={{ fontSize: 14, color: 'var(--film-amber)', letterSpacing: '0.12em', lineHeight: 1 }}>
-                P
-              </span>
-            </a>
-
-            <div className="w-px h-4 mx-1 shrink-0 hidden sm:block" style={{ background: 'rgba(255,255,255,0.08)' }} />
+          <header
+            className="h-14 shrink-0 px-3 py-2 z-30 relative"
+            style={{
+              background: 'linear-gradient(180deg, rgba(7,7,6,0.9), rgba(9,8,6,0.94))',
+              borderBottom: '1px solid rgba(196,124,46,0.14)',
+              boxShadow: '0 18px 48px rgba(0,0,0,0.58)',
+              backdropFilter: 'blur(16px) saturate(1.08)',
+            }}
+          >
+            <div
+              className="absolute bottom-0 left-0 right-0 h-px"
+              style={{ background: 'linear-gradient(90deg, transparent, rgba(196,124,46,0.32), transparent)' }}
+            />
 
-            {/* URL bar — takes available space */}
-            <div className="flex-1 min-w-0">
-              <CodeBox config={config} onLoadConfig={handleLoadConfig} baseUrl={baseUrl} onExtensionChange={handleExtensionChange} />
-            </div>
+            <div
+              className="flex items-center gap-3 h-full rounded-2xl px-3 py-2 relative border"
+              style={{
+                background: 'linear-gradient(135deg, rgba(255,255,255,0.02), rgba(196,124,46,0.05))',
+                borderColor: 'rgba(196,124,46,0.18)',
+                boxShadow: '0 10px 28px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04)',
+              }}
+            >
+              <div
+                aria-hidden
+                className="absolute inset-x-0 top-1 h-8 pointer-events-none blur-2xl opacity-50"
+                style={{ background: 'radial-gradient(circle at 15% 50%, rgba(196,124,46,0.18), transparent 42%)' }}
+              />
+
+              {/* Logo */}
+              <a href="/" style={{ textDecoration: 'none', flexShrink: 0 }} className="relative z-10">
+                <span className="poster-font select-none hidden sm:block"
+                  style={{ fontSize: 18, color: 'var(--film-cream)', letterSpacing: '0.14em', lineHeight: 1, textShadow: '0 0 26px rgba(196,124,46,0.25)' }}>
+                  POSTERIUM
+                </span>
+                {/* Mobile: just icon */}
+                <span className="poster-font select-none sm:hidden"
+                  style={{ fontSize: 14, color: 'var(--film-amber)', letterSpacing: '0.14em', lineHeight: 1, textShadow: '0 0 20px rgba(196,124,46,0.25)' }}>
+                  P
+                </span>
+              </a>
+
+              <div className="w-px h-6 mx-0.5 shrink-0 hidden sm:block"
+                style={{ background: 'linear-gradient(180deg, rgba(255,255,255,0.08), rgba(196,124,46,0.28))' }} />
+
+              {/* URL bar — takes available space */}
+              <div className="flex-1 min-w-0 relative z-10">
+                <CodeBox config={config} onLoadConfig={handleLoadConfig} baseUrl={baseUrl} onExtensionChange={handleExtensionChange} />
+              </div>
 
-            <div className="w-px h-4 mx-0.5 shrink-0" style={{ background: 'rgba(255,255,255,0.08)' }} />
-
-            {/* Toolbar — desktop shows all, mobile shows only essential */}
-            <div className="flex items-center gap-0.5 shrink-0">
-              {/* Command palette — always visible */}
-              <ToolbarBtn onClick={() => setPaletteOpen(v => !v)} label="Command Palette (⌘K)" active={paletteOpen}>
-                <Command size={14} />
-              </ToolbarBtn>
-
-              {/* Keyboard shortcuts — always visible */}
-              <ToolbarBtn onClick={() => setShortcutsOpen(v => !v)} label="Keyboard Shortcuts (⌘/)" active={shortcutsOpen}>
-                <Keyboard size={14} />
-              </ToolbarBtn>
-
-              <div className="w-px h-4 mx-0.5 hidden lg:block" style={{ background: 'rgba(255,255,255,0.08)' }} />
-
-              {/* Sidebar toggles — desktop only */}
-              <ToolbarBtn onClick={() => setLeftVisible(v => !v)} label={`${leftVisible ? 'Hide' : 'Show'} Layers ([)`} active={!leftVisible} hideOnMobile>
-                <PanelLeft size={14} />
-              </ToolbarBtn>
-              <ToolbarBtn onClick={() => setRightVisible(v => !v)} label={`${rightVisible ? 'Hide' : 'Show'} Inspector (])`} active={!rightVisible} hideOnMobile>
-                <PanelRight size={14} />
-              </ToolbarBtn>
-
-              {/* Fullscreen — desktop only */}
-              <ToolbarBtn onClick={toggleFullscreen} label="Fullscreen (F)" active={isFullscreen} hideOnMobile>
-                <Maximize2 size={14} />
-              </ToolbarBtn>
-
-              <div className="w-px h-4 mx-0.5" style={{ background: 'rgba(255,255,255,0.08)' }} />
-
-              {/* Undo / Redo */}
-              <ToolbarBtn onClick={undo} disabled={!canUndo} label="Undo (⌘Z)"><Undo2 size={14} /></ToolbarBtn>
-              <ToolbarBtn onClick={redo} disabled={!canRedo} label="Redo (⌘Y)"><Redo2 size={14} /></ToolbarBtn>
-
-              <div className="w-px h-4 mx-0.5 hidden sm:block" style={{ background: 'rgba(255,255,255,0.08)' }} />
-              <ToolbarBtn onClick={() => setIsResetOpen(true)} danger label="Reset to defaults" hideOnMobile><RotateCcw size={14} /></ToolbarBtn>
-
-              <ToolbarBtn href="https://github.com/xdaayush/freeposterapi" label="GitHub" hideOnMobile>
-                <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
-                  <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
-                </svg>
-              </ToolbarBtn>
+              <div className="w-px h-6 mx-0.5 shrink-0"
+                style={{ background: 'linear-gradient(180deg, rgba(255,255,255,0.08), rgba(196,124,46,0.28))' }} />
+
+              {/* Toolbar — desktop shows all, mobile shows only essential */}
+              <div className="flex items-center gap-1 shrink-0 relative z-10">
+                {/* Command palette — always visible */}
+                <ToolbarBtn onClick={() => setPaletteOpen(v => !v)} label="Command Palette (⌘K)" active={paletteOpen}>
+                  <Command size={14} />
+                </ToolbarBtn>
+
+                {/* Keyboard shortcuts — always visible */}
+                <ToolbarBtn onClick={() => setShortcutsOpen(v => !v)} label="Keyboard Shortcuts (⌘/)" active={shortcutsOpen}>
+                  <Keyboard size={14} />
+                </ToolbarBtn>
+
+                <div className="w-px h-6 mx-0.5 hidden lg:block"
+                  style={{ background: 'linear-gradient(180deg, rgba(255,255,255,0.08), rgba(196,124,46,0.28))' }} />
+
+                {/* Sidebar toggles — desktop only */}
+                <ToolbarBtn onClick={() => setLeftVisible(v => !v)} label={`${leftVisible ? 'Hide' : 'Show'} Layers ([)`} active={!leftVisible} hideOnMobile>
+                  <PanelLeft size={14} />
+                </ToolbarBtn>
+                <ToolbarBtn onClick={() => setRightVisible(v => !v)} label={`${rightVisible ? 'Hide' : 'Show'} Inspector (])`} active={!rightVisible} hideOnMobile>
+                  <PanelRight size={14} />
+                </ToolbarBtn>
+
+                {/* Fullscreen — desktop only */}
+                <ToolbarBtn onClick={toggleFullscreen} label="Fullscreen (F)" active={isFullscreen} hideOnMobile>
+                  <Maximize2 size={14} />
+                </ToolbarBtn>
+
+                <div className="w-px h-6 mx-0.5"
+                  style={{ background: 'linear-gradient(180deg, rgba(255,255,255,0.08), rgba(196,124,46,0.28))' }} />
+
+                {/* Undo / Redo */}
+                <ToolbarBtn onClick={undo} disabled={!canUndo} label="Undo (⌘Z)"><Undo2 size={14} /></ToolbarBtn>
+                <ToolbarBtn onClick={redo} disabled={!canRedo} label="Redo (⌘Y)"><Redo2 size={14} /></ToolbarBtn>
+
+                <div className="w-px h-6 mx-0.5 hidden sm:block"
+                  style={{ background: 'linear-gradient(180deg, rgba(255,255,255,0.08), rgba(196,124,46,0.28))' }} />
+                <ToolbarBtn onClick={() => setIsResetOpen(true)} danger label="Reset to defaults" hideOnMobile><RotateCcw size={14} /></ToolbarBtn>
+
+                <ToolbarBtn href="https://github.com/xdaayush/freeposterapi" label="GitHub" hideOnMobile>
+                  <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
+                    <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
+                  </svg>
+                </ToolbarBtn>
+              </div>
             </div>
           </header>
         )}
@@ -654,8 +683,8 @@ const StudioLayout: React.FC<{
               className="hidden lg:flex flex-col z-20 relative shrink-0 sidebar-transition"
               style={{
                 width: leftVisible ? leftW : 0,
-                background: 'var(--film-dark)',
-                borderRight: leftVisible ? '1px solid rgba(196,124,46,0.08)' : 'none',
+                background: 'transparent',
+                borderRight: 'none',
                 overflow: 'hidden',
                 opacity: leftVisible ? 1 : 0,
               }}
@@ -710,8 +739,8 @@ const StudioLayout: React.FC<{
               className="hidden lg:flex flex-col z-20 relative shrink-0 sidebar-transition"
               style={{
                 width: rightVisible ? rightW : 0,
-                background: 'var(--film-dark)',
-                borderLeft: rightVisible ? '1px solid rgba(196,124,46,0.08)' : 'none',
+                background: 'transparent',
+                borderLeft: 'none',
                 overflow: 'hidden',
                 opacity: rightVisible ? 1 : 0,
               }}