website refactor

apps/website/ui/TopNav.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
+import { Box } from './Box';
 
 interface TopNavProps {
   children: React.ReactNode;
-  className?: string;
 }
 
 /**
- * TopNav is a horizontal navigation container used within the AppHeader.
+ * TopNav is a horizontal navigation container used within the ControlBar.
  */
-export function TopNav({ children, className = '' }: TopNavProps) {
+export function TopNav({ children }: TopNavProps) {
   return (
-    <nav className={`flex items-center justify-between w-full ${className}`}>
+    <Box as="nav" display="flex" alignItems="center" justifyContent="between" width="full" height="full">
       {children}
-    </nav>
+    </Box>
   );
-}
+}