diff --git a/src/App.tsx b/src/App.tsx
index 2d84917..a3f739e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,7 +21,7 @@ const MainLayout = () => {
     <div className="min-h-screen text-foreground selection:bg-[#2563eb]/30 overflow-hidden bg-[#10131f]">
       <Sidebar />
       <TopNav />
-      <main className="ml-64 pt-16 h-screen overflow-y-auto no-scrollbar">
+      <main className="ml-[16rem] pt-16 h-screen overflow-y-auto no-scrollbar">
         <Outlet />
       </main>
     </div>
diff --git a/src/components/FeaturedHero.tsx b/src/components/FeaturedHero.tsx
index 81c50f3..9359a41 100644
--- a/src/components/FeaturedHero.tsx
+++ b/src/components/FeaturedHero.tsx
@@ -5,7 +5,7 @@ import { Game } from '../api/client';
 const FocusablePoster = ({ coverUrl }: { coverUrl: string }) => {
   const { ref, focused } = useFocusableAutoScroll();
   return (
-    <div ref={ref} className={`w-[400px] aspect-[3/4] shrink-0 bg-white/5 overflow-hidden rounded-[1.5rem] shadow-[0_20px_50px_rgba(0,0,0,0.3)] transition-all duration-500 ease-out ${focused ? 'scale-105 ring-4 ring-[#2563eb] shadow-2xl z-20' : ''}`}>
+    <div ref={ref} className={`w-[25rem] aspect-[3/4] shrink-0 bg-white/5 overflow-hidden rounded-[1.5rem] shadow-[0_20px_50px_rgba(0,0,0,0.3)] transition-all duration-500 ease-out ${focused ? 'scale-105 ring-4 ring-[#2563eb] shadow-2xl z-20' : ''}`}>
       <img alt="Hero Poster" className="w-full h-full object-cover" src={coverUrl} />
     </div>
   );
@@ -26,7 +26,7 @@ const FocusableThumb = ({ g, isActive, onClick }: { g: Game, isActive: boolean,
     <div 
       ref={ref}
       onClick={onClick}
-      className={`carousel-thumb w-[90px] shrink-0 aspect-[2/3] overflow-hidden cursor-pointer transition-all duration-300 ring-1 ring-white/10 bg-white/5 rounded-[6px] ${
+      className={`carousel-thumb w-[5.625rem] shrink-0 aspect-[2/3] overflow-hidden cursor-pointer transition-all duration-300 ring-1 ring-white/10 bg-white/5 rounded-md ${
         isActive ? 'opacity-100 ring-2 ring-[#2563eb]' : 'opacity-60 hover:opacity-100'
       } ${focused ? 'scale-110 ring-2 ring-white z-10 shadow-2xl' : ''}`}
     >
@@ -50,7 +50,7 @@ export const FeaturedHero = ({ games, isFallback }: { games: Game[], isFallback?
   if (!games?.length) return null;
   const game = games[currentIndex];
 
-  const formattedSize = (game.size / (1024 * 1024)).toFixed(2) + " MB";
+  const formattedSize = ((Number(game.size) || 0) / (1024 * 1024)).toFixed(2) + " MB";
 
   return (
     <section 
@@ -68,16 +68,16 @@ export const FeaturedHero = ({ games, isFallback }: { games: Game[], isFallback?
           <div className="flex-1 flex flex-col justify-between min-w-0">
             <div className="flex flex-col min-w-0">
               <div className="inline-flex items-center gap-2 px-3 py-1 bg-[#2563eb]/20 text-[#b4c5ff] mb-4 w-fit border border-[#2563eb]/30 rounded-md">
-                <span className="material-symbols-outlined text-[10px]" style={{ fontVariationSettings: "'FILL' 1" }}>
+                <span className="material-symbols-outlined text-[0.625rem]" style={{ fontVariationSettings: "'FILL' 1" }}>
                   {isFallback ? 'history' : 'star'}
                 </span>
-                <span className="text-[10px] font-black uppercase tracking-widest geist-mono">
+                <span className="text-[0.625rem] font-black uppercase tracking-widest geist-mono">
                   {isFallback ? 'Recently Added' : 'Featured'}
                 </span>
               </div>
               
               <h2 
-                className="text-[72px] font-black text-white tracking-tighter mb-4 leading-[0.9] uppercase geist-mono truncate" 
+                className="text-[4.5rem] font-black text-white tracking-tighter mb-4 leading-[0.9] uppercase geist-mono truncate" 
                 title={game.title}
               >
                 {game.title}
@@ -85,11 +85,11 @@ export const FeaturedHero = ({ games, isFallback }: { games: Game[], isFallback?
               
               <div className="flex gap-10 mb-8 geist-mono">
                 <div className="flex flex-col">
-                  <span className="text-[10px] text-[#c3c6d7] uppercase tracking-[0.2em] font-bold mb-1 opacity-60">Platform</span>
+                  <span className="text-[0.625rem] text-[#c3c6d7] uppercase tracking-[0.2em] font-bold mb-1 opacity-60">Platform</span>
                   <span className="text-xs font-black text-white">{game.system}</span>
                 </div>
                 <div className="flex flex-col">
-                  <span className="text-[10px] text-[#c3c6d7] uppercase tracking-[0.2em] font-bold mb-1 opacity-60">Size</span>
+                  <span className="text-[0.625rem] text-[#c3c6d7] uppercase tracking-[0.2em] font-bold mb-1 opacity-60">Size</span>
                   <span className="text-xs font-black text-white">{formattedSize}</span>
                 </div>
               </div>
@@ -99,11 +99,11 @@ export const FeaturedHero = ({ games, isFallback }: { games: Game[], isFallback?
               </p>
 
               <div className="flex items-center gap-3 mb-8">
-                <FocusableButton className="bg-gradient-to-br from-[#2563eb] to-[#6001d1] hover:opacity-90 text-white h-11 px-8 font-black flex items-center gap-2 active:scale-95 text-[11px] uppercase geist-mono rounded-[12px] shadow-[0_10px_30px_rgba(37,99,235,0.1)]">
+                <FocusableButton className="bg-gradient-to-br from-[#2563eb] to-[#6001d1] hover:opacity-90 text-white h-11 px-8 font-black flex items-center gap-2 active:scale-95 text-[0.6875rem] uppercase geist-mono rounded-xl shadow-[0_10px_30px_rgba(37,99,235,0.1)]">
                   <span className="material-symbols-outlined text-base" style={{ fontVariationSettings: "'FILL' 1" }}>play_arrow</span>
                   Play Now
                 </FocusableButton>
-                <FocusableButton className="bg-transparent hover:bg-white/10 text-[#2563eb] border border-white/5 h-11 px-8 font-black flex items-center gap-2 text-[11px] uppercase geist-mono rounded-[12px]">
+                <FocusableButton className="bg-transparent hover:bg-white/10 text-[#2563eb] border border-white/5 h-11 px-8 font-black flex items-center gap-2 text-[0.6875rem] uppercase geist-mono rounded-xl">
                   <span className="material-symbols-outlined text-base">download</span>
                   Download
                 </FocusableButton>
diff --git a/src/components/GameCard.tsx b/src/components/GameCard.tsx
index 6c37ec8..4528e89 100644
--- a/src/components/GameCard.tsx
+++ b/src/components/GameCard.tsx
@@ -11,10 +11,10 @@ export const GameCard = ({ game }: { game: Game }) => {
   return (
     <MagicCard 
       ref={ref}
-      className={`w-56 shrink-0 cursor-pointer group flex flex-col p-3 rounded-[12px] bg-[#1c1f2c] shadow-[0_10px_30px_rgba(0,0,0,0.2)] transition-all z-10 hover:z-20 ${focused ? "scale-105 ring-2 ring-[#2563eb] z-30" : ""}`} 
+      className={`w-56 shrink-0 cursor-pointer group flex flex-col p-3 rounded-xl bg-[#1c1f2c] shadow-[0_10px_30px_rgba(0,0,0,0.2)] transition-all z-10 hover:z-20 ${focused ? "scale-105 ring-2 ring-[#2563eb] z-30" : ""}`} 
       onClick={() => syncToPC(game.id, game.title)}
     >
-      <div className="aspect-[2/3] bg-white/5 overflow-hidden mb-3 rounded-[8px] border border-white/5 shadow-inner">
+      <div className="aspect-[2/3] bg-white/5 overflow-hidden mb-3 rounded-lg border border-white/5 shadow-inner">
         <img 
           alt={game.title} 
           className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" 
@@ -24,7 +24,7 @@ export const GameCard = ({ game }: { game: Game }) => {
       
       <div className="px-1 flex flex-col relative z-20">
         <h4 className="text-sm font-black text-white truncate geist-mono uppercase tracking-tight">{game.title}</h4>
-        <p className="text-[10px] text-[#2563eb] uppercase geist-mono tracking-widest font-bold mt-1 opacity-80">{game.system}</p>
+        <p className="text-[0.625rem] text-[#2563eb] uppercase geist-mono tracking-widest font-bold mt-1 opacity-80">{game.system}</p>
       </div>
     </MagicCard>
   );
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index ae009e6..61c1211 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -50,10 +50,10 @@ export const Sidebar = () => {
 
   return (
     <FocusContext.Provider value={sidebarFocusKey}>
-      <aside ref={containerRef} className="w-64 h-screen fixed left-0 top-0 bg-[#181b28] shadow-[20px_0_50px_rgba(0,0,0,0.3)] flex flex-col py-8 z-[60]">
+      <aside ref={containerRef} className="w-[16rem] h-screen fixed left-0 top-0 bg-[#181b28] shadow-[20px_0_50px_rgba(0,0,0,0.3)] flex flex-col py-8 z-[60]">
       <div className="px-6 mb-10">
-        <h1 className="text-xl font-black text-white tracking-tighter uppercase geist-mono">{import.meta.env.VITE_LIBRARY_TITLE || "Romm"}</h1>
-        <p className="text-[10px] geist-mono uppercase tracking-[0.05em] text-[#c3c6d7] opacity-60">{import.meta.env.VITE_LIBRARY_SUBTITLE || "Game Manager"}</p>
+        <h1 className="text-[1.25rem] font-black text-white tracking-tighter uppercase geist-mono">{import.meta.env.VITE_LIBRARY_TITLE || "Romm"}</h1>
+        <p className="text-[0.625rem] geist-mono uppercase tracking-[0.05em] text-[#c3c6d7] opacity-60">{import.meta.env.VITE_LIBRARY_SUBTITLE || "Game Manager"}</p>
       </div>
 
       <nav className="flex-1 flex flex-col gap-1">
@@ -66,7 +66,7 @@ export const Sidebar = () => {
         <NavItem path="/settings" icon="settings" label="Settings" />
 
         <div className="px-6 mt-4 flex items-center gap-3 overflow-hidden">
-          <div className="w-8 h-8 rounded-full bg-white/10 overflow-hidden shrink-0 ring-1 ring-white/20">
+          <div className="w-[2rem] h-[2rem] rounded-full bg-white/10 overflow-hidden shrink-0 ring-1 ring-white/20">
             <img 
               alt="User profile avatar" 
               className="w-full h-full object-cover" 
@@ -75,11 +75,11 @@ export const Sidebar = () => {
             />
           </div>
           <div className="flex flex-col leading-none flex-1 min-w-0">
-            <span className="text-xs font-bold text-white geist-mono truncate">{user?.username || "Loading"}</span>
-            <span className="text-[10px] text-[#2563eb] font-bold uppercase tracking-widest geist-mono truncate">{user?.roleName || "..."}</span>
+            <span className="text-[0.75rem] font-bold text-white geist-mono truncate">{user?.username || "Loading"}</span>
+            <span className="text-[0.625rem] text-[#2563eb] font-bold uppercase tracking-widest geist-mono truncate">{user?.roleName || "..."}</span>
           </div>
           <button onClick={logout} className="text-[#c3c6d7] hover:text-white hover:bg-red-500/20 p-2 shrink-0 rounded-full transition-all active:scale-95 flex items-center justify-center" title="Log Out">
-            <span className="material-symbols-outlined text-sm">logout</span>
+            <span className="material-symbols-outlined text-[0.875rem]">logout</span>
           </button>
         </div>
       </div>
diff --git a/src/components/TopNav.tsx b/src/components/TopNav.tsx
index dc035ed..9a601a5 100644
--- a/src/components/TopNav.tsx
+++ b/src/components/TopNav.tsx
@@ -22,40 +22,40 @@ export const TopNav = () => {
       <div className="flex items-center gap-6 w-full">
         <div className="relative flex-1 max-w-md focus-within:ring-1 focus-within:ring-[#2563eb]/50 rounded-full overflow-hidden bg-[#070913] border border-white/5 transition-all outline-none shadow-inner">
           <span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[#c3c6d7] text-sm">search</span>
-          <input className="w-full bg-transparent border-none pl-10 pr-4 py-2 text-[11px] font-bold tracking-widest uppercase text-white placeholder-[#c3c6d7]/50 focus:ring-0 geist-mono outline-none" placeholder="Search the vault..." type="text"/>
+          <input className="w-full bg-transparent border-none pl-10 pr-4 py-2 text-[0.6875rem] font-bold tracking-widest uppercase text-white placeholder-[#c3c6d7]/50 focus:ring-0 geist-mono outline-none" placeholder="Search the vault..." type="text"/>
         </div>
 
         <div className="hidden xl:flex items-center gap-6 ml-4 geist-mono justify-end flex-1">
           <div className="flex items-center gap-2">
             <span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="account_tree">account_tree</span>
-            <span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.PLATFORMS ?? '--'}</span> Platforms</span>
+            <span className="text-[0.6875rem] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.PLATFORMS ?? '--'}</span> Platforms</span>
           </div>
           <div className="flex items-center gap-2">
             <span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="sports_esports">sports_esports</span>
-            <span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.ROMS?.toLocaleString() ?? '--'}</span> Games</span>
+            <span className="text-[0.6875rem] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.ROMS?.toLocaleString() ?? '--'}</span> Games</span>
           </div>
           <div className="flex items-center gap-2">
             <span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="hard_drive">hard_drive</span>
-            <span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{formatBytes(stats?.TOTAL_FILESIZE_BYTES)}</span></span>
+            <span className="text-[0.6875rem] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{formatBytes(stats?.TOTAL_FILESIZE_BYTES)}</span></span>
           </div>
           <div className="flex items-center gap-2">
             <span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="save">save</span>
-            <span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.SAVES?.toLocaleString() ?? '--'}</span> Saves</span>
+            <span className="text-[0.6875rem] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.SAVES?.toLocaleString() ?? '--'}</span> Saves</span>
           </div>
           <div className="flex items-center gap-2">
             <span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="history">history</span>
-            <span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.STATES?.toLocaleString() ?? '--'}</span> States</span>
+            <span className="text-[0.6875rem] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.STATES?.toLocaleString() ?? '--'}</span> States</span>
           </div>
           <div className="flex items-center gap-2">
             <span className="material-symbols-outlined text-[#2563eb] text-sm" data-icon="photo_library">photo_library</span>
-            <span className="text-[11px] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.SCREENSHOTS?.toLocaleString() ?? '--'}</span> Screens</span>
+            <span className="text-[0.6875rem] uppercase text-[#c3c6d7] font-bold"><span className="text-white">{stats?.SCREENSHOTS?.toLocaleString() ?? '--'}</span> Screens</span>
           </div>
 
           <div className="w-px h-4 bg-white/10 mx-2"></div>
 
           {/* Active Hardware Indicator */}
           <div className="flex items-center justify-center w-8 h-8 bg-white/5 border border-white/5 rounded-full ring-1 ring-white/10 shadow-inner text-[#2563eb]" title={mode === 'gamepad' ? 'Gamepad Active' : mode === 'keyboard' ? 'Keyboard Active' : 'Mouse Active'}>
-            <span className="material-symbols-outlined text-[16px]" style={{ fontVariationSettings: "'FILL' 1" }}>
+            <span className="material-symbols-outlined text-[1rem]" style={{ fontVariationSettings: "'FILL' 1" }}>
               {mode === 'gamepad' ? 'sports_esports' : mode === 'keyboard' ? 'keyboard_alt' : 'mouse'}
             </span>
           </div>