diff --git a/client/pages/TabletArmMockups.tsx b/client/pages/TabletArmMockups.tsx
deleted file mode 100644
index b2b33cfb..00000000
--- a/client/pages/TabletArmMockups.tsx
+++ /dev/null
@@ -1,437 +0,0 @@
-import { useState } from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-
-const ARMS = [
-  {
-    id: "labs",
-    name: "Labs",
-    color: "#FBBF24",
-    bgColor: "bg-yellow-500/20",
-    textColor: "text-yellow-400",
-  },
-  {
-    id: "gameforge",
-    name: "GameForge",
-    color: "#22C55E",
-    bgColor: "bg-green-500/20",
-    textColor: "text-green-400",
-  },
-  {
-    id: "corp",
-    name: "Corp",
-    color: "#3B82F6",
-    bgColor: "bg-blue-500/20",
-    textColor: "text-blue-400",
-  },
-  {
-    id: "foundation",
-    name: "Foundation",
-    color: "#EF4444",
-    bgColor: "bg-red-500/20",
-    textColor: "text-red-400",
-  },
-  {
-    id: "devlink",
-    name: "Dev-Link",
-    color: "#06B6D4",
-    bgColor: "bg-cyan-500/20",
-    textColor: "text-cyan-400",
-  },
-];
-
-const LOGO_URLS: Record<string, string> = {
-  labs: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F85fe7910cff6483db1ea99c154684844?format=webp&width=800",
-  gameforge:
-    "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fcd3534c1caa0497abfd44224040c6059?format=webp&width=800",
-  corp: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fae654ecc18b241bdab273893e8231970?format=webp&width=800",
-  foundation:
-    "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fc02cb1bf5056479bbb3ea4bd91f0d472?format=webp&width=800",
-  devlink:
-    "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F9a96b43cbd7b49bb9d5434580319c793?format=webp&width=800",
-};
-
-// Mockup 1: Vertical Sidebar
-function VerticalSidebarMockup() {
-  return (
-    <div className="flex h-[600px] gap-0 border border-border/40 rounded-xl overflow-hidden bg-background">
-      {/* Sidebar */}
-      <div className="w-24 bg-gray-900/50 border-r border-border/40 flex flex-col items-center py-4 gap-3">
-        {ARMS.map((arm) => (
-          <button
-            key={arm.id}
-            className={`h-12 w-12 rounded-lg ${arm.bgColor} flex items-center justify-center hover:scale-110 transition-transform duration-200 group`}
-          >
-            <img
-              src={LOGO_URLS[arm.id]}
-              alt={arm.name}
-              className="h-8 w-8 object-contain"
-            />
-            <div className="absolute left-24 top-1/2 -translate-y-1/2 px-2 py-1 bg-gray-900 rounded text-xs text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap pointer-events-none">
-              {arm.name}
-            </div>
-          </button>
-        ))}
-      </div>
-      {/* Content Area */}
-      <div className="flex-1 p-8 flex flex-col items-center justify-center text-center">
-        <h3 className="text-2xl font-bold mb-4">Vertical Sidebar</h3>
-        <p className="text-muted-foreground max-w-xs">
-          Fixed sidebar with arm icons on the left. Tooltips appear on hover. Good for consistent access but takes up screen width.
-        </p>
-      </div>
-    </div>
-  );
-}
-
-// Mockup 2: Horizontal Scrollable Carousel
-function HorizontalCarouselMockup() {
-  const [scrollPosition, setScrollPosition] = useState(0);
-
-  return (
-    <div className="flex flex-col h-[600px] border border-border/40 rounded-xl overflow-hidden bg-background">
-      {/* Header with carousel */}
-      <div className="bg-gray-900/50 border-b border-border/40 p-4 flex items-center gap-2">
-        <button
-          onClick={() =>
-            setScrollPosition(Math.max(0, scrollPosition - 100))
-          }
-          className="p-2 hover:bg-gray-700/50 rounded-lg transition-colors"
-        >
-          <ChevronLeft className="w-5 h-5" />
-        </button>
-
-        <div className="flex-1 overflow-x-auto scrollbar-hide">
-          <div className="flex gap-3 pb-2" style={{ transform: `translateX(-${scrollPosition}px)` }}>
-            {ARMS.map((arm) => (
-              <button
-                key={arm.id}
-                className={`flex-shrink-0 h-12 w-12 rounded-lg ${arm.bgColor} flex items-center justify-center hover:scale-110 transition-transform duration-200`}
-              >
-                <img
-                  src={LOGO_URLS[arm.id]}
-                  alt={arm.name}
-                  className="h-8 w-8 object-contain"
-                />
-              </button>
-            ))}
-          </div>
-        </div>
-
-        <button
-          onClick={() => setScrollPosition(scrollPosition + 100)}
-          className="p-2 hover:bg-gray-700/50 rounded-lg transition-colors"
-        >
-          <ChevronRight className="w-5 h-5" />
-        </button>
-      </div>
-      {/* Content Area */}
-      <div className="flex-1 p-8 flex flex-col items-center justify-center text-center">
-        <h3 className="text-2xl font-bold mb-4">Horizontal Scrollable Carousel</h3>
-        <p className="text-muted-foreground max-w-xs">
-          Carousel with scroll arrows. Good use of horizontal space. Can show all arms at once on wider tablets.
-        </p>
-      </div>
-    </div>
-  );
-}
-
-// Mockup 3: Compact Horizontal Bar
-function CompactHorizontalMockup() {
-  return (
-    <div className="flex flex-col h-[600px] border border-border/40 rounded-xl overflow-hidden bg-background">
-      {/* Header with compact bar */}
-      <div className="bg-gray-900/50 border-b border-border/40 p-4 flex items-center justify-center gap-2">
-        {ARMS.map((arm) => (
-          <button
-            key={arm.id}
-            className={`h-10 w-10 rounded-lg ${arm.bgColor} flex items-center justify-center hover:scale-110 transition-transform duration-200 group relative`}
-          >
-            <img
-              src={LOGO_URLS[arm.id]}
-              alt={arm.name}
-              className="h-6 w-6 object-contain"
-            />
-            <div className="absolute top-full mt-2 px-2 py-1 bg-gray-900 rounded text-xs text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap pointer-events-none">
-              {arm.name}
-            </div>
-          </button>
-        ))}
-      </div>
-      {/* Content Area */}
-      <div className="flex-1 p-8 flex flex-col items-center justify-center text-center">
-        <h3 className="text-2xl font-bold mb-4">Compact Horizontal Bar</h3>
-        <p className="text-muted-foreground max-w-xs">
-          Minimalist horizontal bar in header. All arms visible at once. Takes minimal vertical space. Best for standard tablet widths.
-        </p>
-      </div>
-    </div>
-  );
-}
-
-// Mockup 4: Grid Layout
-function GridLayoutMockup() {
-  return (
-    <div className="flex flex-col h-[600px] border border-border/40 rounded-xl overflow-hidden bg-background">
-      {/* Header with grid toggle */}
-      <div className="bg-gray-900/50 border-b border-border/40 p-6">
-        <div className="grid grid-cols-5 gap-4 max-w-sm mx-auto">
-          {ARMS.map((arm) => (
-            <button
-              key={arm.id}
-              className={`aspect-square rounded-lg ${arm.bgColor} flex flex-col items-center justify-center gap-2 hover:scale-110 transition-transform duration-200 group`}
-            >
-              <img
-                src={LOGO_URLS[arm.id]}
-                alt={arm.name}
-                className="h-6 w-6 object-contain"
-              />
-              <span className="text-xs font-semibold text-white truncate">
-                {arm.name}
-              </span>
-            </button>
-          ))}
-        </div>
-      </div>
-      {/* Content Area */}
-      <div className="flex-1 p-8 flex flex-col items-center justify-center text-center">
-        <h3 className="text-2xl font-bold mb-4">Grid Layout</h3>
-        <p className="text-muted-foreground max-w-xs">
-          Grid display for arm selection. Shows labels below each icon. Works well for modal or expandable menu.
-        </p>
-      </div>
-    </div>
-  );
-}
-
-// Mockup 5: Segmented Control
-function SegmentedControlMockup() {
-  const [active, setActive] = useState("labs");
-
-  return (
-    <div className="flex flex-col h-[600px] border border-border/40 rounded-xl overflow-hidden bg-background">
-      {/* Header with segmented control */}
-      <div className="bg-gray-900/50 border-b border-border/40 p-4 flex items-center justify-center">
-        <div className="flex items-center gap-1 bg-gray-900 rounded-lg p-1">
-          {ARMS.map((arm) => (
-            <button
-              key={arm.id}
-              onClick={() => setActive(arm.id)}
-              className={`px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
-                active === arm.id
-                  ? `${arm.bgColor} text-white border border-white/20`
-                  : "text-gray-400 hover:text-gray-200"
-              }`}
-            >
-              {arm.name}
-            </button>
-          ))}
-        </div>
-      </div>
-      {/* Content Area */}
-      <div className="flex-1 p-8 flex flex-col items-center justify-center text-center">
-        <h3 className="text-2xl font-bold mb-4">Segmented Control</h3>
-        <p className="text-muted-foreground max-w-xs">
-          Mobile-style segmented picker. Clearly shows active arm. Clean and familiar pattern. May overflow on smaller tablets.
-        </p>
-      </div>
-    </div>
-  );
-}
-
-// Mockup 6: Floating Pill Button
-function FloatingPillMockup() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <div className="flex flex-col h-[600px] border border-border/40 rounded-xl overflow-hidden bg-background relative">
-      {/* Content Area */}
-      <div className="flex-1 p-8 flex flex-col items-center justify-center text-center">
-        <h3 className="text-2xl font-bold mb-4">Floating Pill Button</h3>
-        <p className="text-muted-foreground max-w-xs">
-          FAB-style floating button. Minimalist. Expands when clicked to show options. Doesn't take up header space.
-        </p>
-      </div>
-
-      {/* Floating Pill */}
-      <div className="fixed bottom-8 right-8">
-        <button
-          onClick={() => setIsOpen(!isOpen)}
-          className="h-14 w-14 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center hover:scale-110 transition-transform duration-200 shadow-lg"
-        >
-          <span className="text-white font-bold text-xl">A</span>
-        </button>
-
-        {isOpen && (
-          <>
-            {/* Backdrop */}
-            <div
-              className="fixed inset-0 z-40"
-              onClick={() => setIsOpen(false)}
-            />
-            {/* Pill Menu */}
-            <div className="absolute bottom-20 right-0 z-50 bg-gray-900/95 backdrop-blur-xl border border-gray-700/50 rounded-full px-4 py-3 flex gap-2 shadow-2xl animate-in fade-in zoom-in-95">
-              {ARMS.map((arm) => (
-                <button
-                  key={arm.id}
-                  className={`h-10 w-10 rounded-full ${arm.bgColor} flex items-center justify-center hover:scale-110 transition-transform duration-200 group`}
-                >
-                  <img
-                    src={LOGO_URLS[arm.id]}
-                    alt={arm.name}
-                    className="h-6 w-6 object-contain"
-                  />
-                  <div className="absolute bottom-full mb-2 px-2 py-1 bg-gray-900 rounded text-xs text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap pointer-events-none">
-                    {arm.name}
-                  </div>
-                </button>
-              ))}
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default function TabletArmMockups() {
-  const mockups = [
-    {
-      id: 1,
-      title: "Vertical Sidebar",
-      component: VerticalSidebarMockup,
-      pros: [
-        "Always visible",
-        "Takes minimal horizontal space",
-        "Tooltips for labels",
-      ],
-      cons: ["Uses vertical header space", "Reduced content area"],
-    },
-    {
-      id: 2,
-      title: "Horizontal Scrollable Carousel",
-      component: HorizontalCarouselMockup,
-      pros: ["Scrollable", "All arms accessible", "Clean header"],
-      cons: ["Needs scroll controls", "Not all visible at once"],
-    },
-    {
-      id: 3,
-      title: "Compact Horizontal Bar",
-      component: CompactHorizontalMockup,
-      pros: [
-        "All arms visible",
-        "Minimal space",
-        "Clean aesthetic",
-        "Works like desktop",
-      ],
-      cons: ["May crowd on very narrow tablets"],
-    },
-    {
-      id: 4,
-      title: "Grid Layout",
-      component: GridLayoutMockup,
-      pros: ["Shows labels", "Visual clarity", "Expandable"],
-      cons: ["Takes more space", "Requires menu or modal"],
-    },
-    {
-      id: 5,
-      title: "Segmented Control",
-      component: SegmentedControlMockup,
-      pros: ["Familiar pattern", "Clear active state", "Mobile-friendly"],
-      cons: ["May overflow on small tablets", "Less visual variety"],
-    },
-    {
-      id: 6,
-      title: "Floating Pill Button",
-      component: FloatingPillMockup,
-      pros: [
-        "Doesn't take header space",
-        "Minimalist",
-        "Always accessible",
-      ],
-      cons: ["Hidden by default", "Overlaps content when open"],
-    },
-  ];
-
-  return (
-    <div className="min-h-screen bg-aethex-gradient py-12 px-4">
-      <div className="container mx-auto max-w-6xl">
-        <div className="mb-12 text-center">
-          <h1 className="text-4xl font-bold mb-4">
-            Tablet Arm Switcher Mockups
-          </h1>
-          <p className="text-muted-foreground max-w-2xl mx-auto">
-            Six different navigation patterns for the arm switcher on tablet screens. Click through each mockup to see how they interact.
-          </p>
-        </div>
-
-        <div className="space-y-12">
-          {mockups.map((mockup) => {
-            const Component = mockup.component;
-            return (
-              <div key={mockup.id} className="space-y-6">
-                {/* Mockup Title */}
-                <div className="text-center">
-                  <h2 className="text-2xl font-bold mb-2">
-                    {mockup.id}. {mockup.title}
-                  </h2>
-                </div>
-
-                {/* Mockup Display */}
-                <div className="flex justify-center">
-                  <Component />
-                </div>
-
-                {/* Pros & Cons */}
-                <div className="grid md:grid-cols-2 gap-6">
-                  <div className="bg-green-500/10 border border-green-500/30 rounded-lg p-6">
-                    <h3 className="font-semibold text-green-400 mb-3">Pros</h3>
-                    <ul className="space-y-2 text-sm text-muted-foreground">
-                      {mockup.pros.map((pro, idx) => (
-                        <li key={idx} className="flex items-start gap-2">
-                          <span className="text-green-400 mt-1">✓</span>
-                          <span>{pro}</span>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                  <div className="bg-red-500/10 border border-red-500/30 rounded-lg p-6">
-                    <h3 className="font-semibold text-red-400 mb-3">Cons</h3>
-                    <ul className="space-y-2 text-sm text-muted-foreground">
-                      {mockup.cons.map((con, idx) => (
-                        <li key={idx} className="flex items-start gap-2">
-                          <span className="text-red-400 mt-1">✗</span>
-                          <span>{con}</span>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                </div>
-
-                {/* Divider */}
-                <div className="border-t border-border/20" />
-              </div>
-            );
-          })}
-        </div>
-
-        {/* Summary */}
-        <div className="mt-16 bg-gradient-to-r from-purple-500/10 via-pink-500/10 to-cyan-500/10 border border-border/40 rounded-lg p-8 space-y-4">
-          <h2 className="text-2xl font-bold">Recommendation</h2>
-          <p className="text-muted-foreground">
-            <strong className="text-white">Mockup #3: Compact Horizontal Bar</strong> is recommended for tablet sizes. It provides:
-          </p>
-          <ul className="space-y-2 text-muted-foreground list-disc list-inside">
-            <li>All arm logos visible at once without scrolling</li>
-            <li>Minimal header height (perfect for tablets in landscape)</li>
-            <li>Consistent experience with desktop version</li>
-            <li>Smooth transition between breakpoints</li>
-            <li>Touch-friendly spacing and interactions</li>
-          </ul>
-          <p className="text-muted-foreground">
-            This creates a natural progression: Mobile expandable logo → Tablet compact bar → Desktop full horizontal spacing.
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}