website refactor

apps/website/components/app/AppShell.tsx

@@ -1,18 +1,24 @@
 import React from 'react';
+import { Box } from '@/ui/Box';
 
 interface AppShellProps {
   children: React.ReactNode;
-  className?: string;
 }
 
 /**
  * AppShell is the root container for the entire application layout.
  * It provides the base background and layout structure.
  */
-export function AppShell({ children, className = '' }: AppShellProps) {
+export function AppShell({ children }: AppShellProps) {
   return (
-    <div className={`min-h-screen bg-[#0C0D0F] text-gray-100 flex flex-col ${className}`}>
+    <Box 
+      minHeight="100vh" 
+      bg="#0C0D0F" 
+      color="var(--ui-color-text-high)" 
+      display="flex" 
+      flexDirection="col"
+    >
       {children}
-    </div>
+    </Box>
   );
 }