diff --git a/src/api/client.ts b/src/api/client.ts
index 16c6fa0..cee0f0a 100644
--- a/src/api/client.ts
+++ b/src/api/client.ts
@@ -14,6 +14,43 @@ export interface Platform {
   iconUrl?: string;
 }
 
+export interface RAAchievement {
+  ra_id: number | null;
+  title: string | null;
+  description: string | null;
+  points: number | null;
+  num_awarded: number | null;
+  num_awarded_hardcore: number | null;
+  badge_id: string | null;
+}
+
+export interface RomRAMetadata {
+  first_release_date?: number | null;
+  genres?: string[];
+  companies?: string[];
+  achievements: RAAchievement[];
+}
+
+export interface EarnedAchievement {
+  id: string;
+  date: string;
+  date_hardcore?: string;
+}
+
+export interface RAProgressionResult {
+  rom_ra_id: number | null;
+  max_possible: number | null;
+  num_awarded: number | null;
+  num_awarded_hardcore: number | null;
+  most_recent_awarded_date?: string | null;
+  earned_achievements: EarnedAchievement[];
+}
+
+export interface RAProgression {
+  total: number;
+  results: RAProgressionResult[];
+}
+
 export interface DetailedGame extends Game {
   summary?: string;
   developers?: string[];
@@ -35,6 +72,8 @@ export interface DetailedGame extends Game {
   platformId?: number;
   videoUrl?: string; // Direct video link
   youtubeId?: string; // YouTube ID for embed
+  ra_id?: number;
+  merged_ra_metadata?: RomRAMetadata;
 }
 
 export interface RommCollection {
@@ -51,6 +90,8 @@ export interface UserProfile {
   username: string;
   avatarUrl?: string;
   roleName: string;
+  ra_username?: string | null;
+  ra_progression?: RAProgression | null;
 }
 
 // Function to safely extract base URL
@@ -341,6 +382,8 @@ export const rommApiClient = {
       platformId: json.platform_id,
       videoUrl: getFullImageUrl(json.url_video || json.ss_metadata?.video_url),
       youtubeId: json.youtube_video_id || json.igdb_metadata?.youtube_video_id || json.launchbox_metadata?.youtube_video_id,
+      ra_id: json.ra_id,
+      merged_ra_metadata: json.merged_ra_metadata,
       screenshots: Array.from(new Set([
         ...(json.merged_screenshots || []).map((s: string) => getFullImageUrl(s)),
         ...(json.screenshots || []).map((s: any) => s.url ? getFullImageUrl(s.url) || '' : ''),
@@ -475,6 +518,8 @@ export const rommApiClient = {
       username: json.username || 'Unknown',
       avatarUrl: constructedAvatarUrl,
       roleName: json.role?.role_name || json.role?.name || String(json.role) || 'User',
+      ra_username: json.ra_username,
+      ra_progression: json.ra_progression,
     };
   }
 };
diff --git a/src/components/GamesPage.tsx b/src/components/GamesPage.tsx
index 33726bd..843f359 100644
--- a/src/components/GamesPage.tsx
+++ b/src/components/GamesPage.tsx
@@ -3,7 +3,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { FocusContext, useFocusable, setFocus } from '@noriginmedia/norigin-spatial-navigation';
 import { CollectionModal } from './CollectionModal';
 import { ManualModal } from './ManualModal';
-import { rommApiClient, Platform, Game } from '../api/client';
+import { rommApiClient, Platform, Game, RAAchievement, RAProgression } from '../api/client';
 import { useInputMode } from '../context/InputModeContext';
 import { EmulatorOverlay } from './EmulatorOverlay';
 
@@ -52,6 +52,94 @@ const FocusableItem = ({ onFocus, onEnterPress, onClick, children, className, fo
   );
 };
 
+const AchievementList = ({ raId, achievements, userProgression }: { 
+  raId?: number, 
+  achievements?: RAAchievement[], 
+  userProgression?: RAProgression | null 
+}) => {
+  if (!raId || !achievements || achievements.length === 0) {
+    return (
+      <div className="col-span-6 bg-white/5 rounded-xl p-5 border border-white/5 flex flex-col items-center justify-center opacity-40 h-[30rem]">
+        <span className="material-symbols-outlined text-4xl mb-3 text-white/20">trophy</span>
+        <div className="text-[0.625rem] geist-mono uppercase tracking-widest text-center">Achievements Unavailable</div>
+      </div>
+    );
+  }
+
+  const gameProgress = userProgression?.results.find(r => r.rom_ra_id === raId);
+  const earnedIds = new Set(gameProgress?.earned_achievements.map(a => String(a.id)) || []);
+  
+  const earnedCount = gameProgress?.num_awarded || 0;
+  const totalCount = achievements.length;
+  const progressPercent = totalCount > 0 ? (earnedCount / totalCount) * 100 : 0;
+
+  return (
+    <div className="col-span-6 bg-white/5 rounded-xl p-5 border border-white/5 flex flex-col shadow-2xl h-[30rem] overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4 shrink-0">
+        <div className="flex items-center gap-3">
+          <span className="material-symbols-outlined text-[#2563eb] filled">workspace_premium</span>
+          <h3 className="text-[0.625rem] geist-mono uppercase tracking-[0.3em] font-black text-white/60">RetroAchievements</h3>
+        </div>
+        <div className="text-[0.625rem] geist-mono text-[#2563eb] font-bold">
+          {earnedCount} / {totalCount}
+        </div>
+      </div>
+
+      {/* Progress Bar */}
+      <div className="h-1 w-full bg-white/5 rounded-full mb-6 overflow-hidden shrink-0">
+        <div 
+          className="h-full bg-[#2563eb] transition-all duration-1000 ease-out"
+          style={{ width: `${progressPercent}%` }}
+        ></div>
+      </div>
+
+      {/* Achievement List */}
+      <div className="flex-1 overflow-y-auto space-y-3 pr-2 scrollbar-none">
+        {achievements.map((achievement) => {
+          const isEarned = earnedIds.has(String(achievement.ra_id));
+          const badgeId = achievement.badge_id || '00000';
+          return (
+            <div 
+              key={achievement.ra_id} 
+              className={`flex items-center gap-4 p-3 rounded-lg border transition-all duration-300 ${isEarned ? 'bg-[#2563eb]/10 border-[#2563eb]/30' : 'bg-white/5 border-white/5 opacity-50'}`}
+            >
+              {/* Badge */}
+              <div className="w-10 h-10 rounded-md bg-black/40 flex items-center justify-center overflow-hidden border border-white/10 shrink-0">
+                <img 
+                  src={`https://media.retroachievements.org/Badge/${badgeId}.png`} 
+                  className={`w-full h-full object-contain ${isEarned ? '' : 'grayscale contrast-50 opacity-40'}`}
+                  alt="" 
+                />
+              </div>
+
+              {/* Text */}
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center justify-between gap-2">
+                  <h4 className={`text-[0.6875rem] font-bold uppercase truncate ${isEarned ? 'text-white' : 'text-white/40'}`}>
+                    {achievement.title}
+                  </h4>
+                  <span className="text-[0.5625rem] geist-mono text-[#2563eb] font-black shrink-0">
+                    {achievement.points} pts
+                  </span>
+                </div>
+                <p className="text-[0.5625rem] text-white/30 line-clamp-1 leading-tight mt-0.5">
+                  {achievement.description}
+                </p>
+              </div>
+
+              {/* Status Icon */}
+              {isEarned && (
+                <span className="material-symbols-outlined text-[#2563eb] text-sm filled shrink-0">verified</span>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
 const PlatformItem = ({ platform, active, onSelect }: { platform: Platform, active: boolean, onSelect: () => void }) => (
   <FocusableItem 
     onFocus={onSelect} 
@@ -61,8 +149,8 @@ const PlatformItem = ({ platform, active, onSelect }: { platform: Platform, acti
     active={active}
   >
     {(focused) => (
-      <div className="flex flex-col items-center gap-2 group cursor-pointer w-[110px]">
-        <div className={`w-[84px] h-[84px] rounded-[12px] transition-all duration-500 border-2 flex items-center justify-center p-3
+      <div className="flex flex-col items-center gap-2 group cursor-pointer w-[6.875rem]">
+        <div className={`w-[5.25rem] h-[5.25rem] rounded-xl transition-all duration-500 border-2 flex items-center justify-center p-3
           ${focused || active ? 'border-[#2563eb] bg-transparent scale-110 z-20 shadow-[0_5px_15px_rgba(37,99,235,0.2)]' : 
             'bg-white/5 border-white/5 group-hover:border-white/10'}`}
         >
@@ -76,7 +164,7 @@ const PlatformItem = ({ platform, active, onSelect }: { platform: Platform, acti
              <span className={`material-symbols-outlined text-3xl transition-colors ${focused || active ? 'text-white' : 'text-white/20'}`}>sports_esports</span>
           )}
         </div>
-        <div className={`text-[9px] font-black uppercase geist-mono tracking-widest text-center transition-all duration-300 w-full px-2 truncate
+        <div className={`text-[0.5625rem] font-black uppercase geist-mono tracking-widest text-center transition-all duration-300 w-full px-2 truncate
           ${focused || active ? 'text-[#2563eb] translate-y-1' : 'text-white/20'}`}
         >
           {platform.name}
@@ -97,7 +185,7 @@ const GameListItem = ({ game, active, onFocus }: { game: Game, active: boolean,
   >
     {(focused) => (
       <div className={`flex items-center gap-4 px-6 py-2.5 cursor-pointer transition-all duration-300 border-l-4 ${focused ? 'bg-[#2563eb]/20 border-[#2563eb] z-10' : active ? 'bg-[#2563eb]/10 border-[#2563eb]/70' : 'border-transparent hover:bg-white/5'}`}>
-        <div className="w-8 h-11 bg-white/5 rounded-[4px] overflow-hidden shrink-0 border border-white/5">
+        <div className="w-8 h-11 bg-white/5 rounded overflow-hidden shrink-0 border border-white/5">
           <img src={game.coverUrl} alt="" className="w-full h-full object-cover" />
         </div>
         <div className="min-w-0 flex-1 overflow-hidden">
@@ -106,7 +194,7 @@ const GameListItem = ({ game, active, onFocus }: { game: Game, active: boolean,
               {game.title}
             </span>
           </div>
-          <div className="text-[10px] text-white/40 font-medium geist-mono uppercase tracking-tight">
+          <div className="text-[0.625rem] text-white/40 font-medium geist-mono uppercase tracking-tight">
             {game.size}
           </div>
         </div>
@@ -135,7 +223,7 @@ const AlphabetScroller = ({
           scrollOptions={{ behavior: 'smooth', block: 'center' }}
         >
           {(focused) => (
-            <div className={`text-[13px] font-black geist-mono transition-all duration-200 
+            <div className={`text-[0.8125rem] font-black geist-mono transition-all duration-200 
               ${focused ? 'text-[#2563eb] scale-125' : 'text-white/30 hover:text-white/70'}`}
             >
               {letter}
@@ -158,6 +246,12 @@ export const GamesPage = () => {
   const [activeZone, setActiveZone] = useState<'platforms' | 'games' | 'alphabet' | 'details' | null>(null);
   const detailTimeoutRef = React.useRef<any>(null);
 
+  const userQuery = useQuery({
+    queryKey: ['userProfile'],
+    queryFn: () => rommApiClient.fetchCurrentUser(),
+    staleTime: 1000 * 60 * 5, // 5 minutes cache
+  });
+
   const { ref: platformsRef, focusKey: platformsFocusKey } = useFocusable({
     focusKey: 'PLATFORMS_ZONE',
     trackChildren: true,
@@ -446,12 +540,12 @@ export const GamesPage = () => {
         {/* Main Split Layout */}
         <div className="flex-1 flex overflow-hidden">
           {/* Left Column: Game List + Alphabet */}
-          <div className="w-[500px] border-r border-white/5 flex overflow-hidden bg-black/20">
+          <div className="w-[31.25rem] border-r border-white/5 flex overflow-hidden bg-black/20">
             <div className="flex-1 flex flex-col overflow-hidden">
               <FocusContext.Provider value={gamesFocusKey}>
                 <div ref={gamesRef} className={`flex-1 overflow-y-auto scrollbar-hoverable ${activeZone === 'games' ? 'scrollbar-active' : ''}`}>
                   {gamesQuery.isLoading ? (
-                    <div className="p-12 text-center text-white/20 geist-mono text-[10px] uppercase">Retrieving index...</div>
+                    <div className="p-12 text-center text-white/20 geist-mono text-[0.625rem] uppercase">Retrieving index...</div>
                   ) : (
                     gamesQuery.data?.map(game => (
                       <GameListItem 
@@ -492,10 +586,10 @@ export const GamesPage = () => {
           <FocusContext.Provider value={detailsFocusKey}>
             <div ref={detailsRef} className={`flex-1 overflow-y-auto relative scrollbar-hoverable ${activeZone === 'details' ? 'scrollbar-active' : ''}`}>
               {detailsQuery.data ? (
-                <div className="pt-[40px] pl-[40px] pr-16 pb-16">
-                  <div className="flex gap-[40px] items-start h-[480px]">
+                <div className="pt-10 pl-10 pr-16 pb-16">
+                  <div className="flex gap-10 items-start h-[30rem]">
                     {/* Poster */}
-                    <div className="w-[320px] h-full rounded-[16px] overflow-hidden shadow-[0_20px_50px_rgba(0,0,0,0.5)] border border-white/10 shrink-0 relative group">
+                    <div className="w-[20rem] h-full rounded-2xl overflow-hidden shadow-[0_20px_50px_rgba(0,0,0,0.5)] border border-white/10 shrink-0 relative group">
                       <img 
                         src={detailsQuery.data.coverUrl} 
                         className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110" 
@@ -507,17 +601,17 @@ export const GamesPage = () => {
                     {/* Metadata Content */}
                     <div className="flex-1 flex flex-col h-full min-w-0">
                       {/* Badges Row */}
-                      <div className="flex items-center gap-3 mb-0 uppercase geist-mono font-black text-[10px] tracking-widest">
-                        <div className="bg-[#2563eb] text-white px-3 py-1 rounded-[4px] shadow-lg shadow-[#2563eb]/20">
+                      <div className="flex items-center gap-3 mb-0 uppercase geist-mono font-black text-[0.625rem] tracking-widest">
+                        <div className="bg-[#2563eb] text-white px-3 py-1 rounded shadow-lg shadow-[#2563eb]/20">
                           Playable
                         </div>
-                        <div className="bg-white/10 text-white/60 px-3 py-1 rounded-[4px] border border-white/5">
+                        <div className="bg-white/10 text-white/60 px-3 py-1 rounded border border-white/5">
                           {detailsQuery.data.players || '1 Player'}
                         </div>
                       </div>
 
                       {/* Title */}
-                      <h1 className="text-[54px] font-black text-white leading-[0.9] tracking-tighter uppercase mb-3 geist-mono truncate" title={detailsQuery.data.title}>
+                      <h1 className="text-[3.375rem] font-black text-white leading-[0.9] tracking-tighter uppercase mb-3 geist-mono truncate" title={detailsQuery.data.title}>
                         {detailsQuery.data.title}
                       </h1>
 
@@ -525,12 +619,12 @@ export const GamesPage = () => {
                       <div className="border-t border-white/10 w-full mb-3"></div>
 
                       {/* Metadata List - Three Combined Rows */}
-                      <div className="space-y-2 mb-4 text-[11px] font-black tracking-[0.2em] geist-mono uppercase">
+                      <div className="space-y-2 mb-4 text-[0.6875rem] font-black tracking-[0.2em] geist-mono uppercase">
                         {/* Combined Row 1: Region & Release Date */}
                         <div className="flex items-center gap-10 overflow-hidden">
                           <div className="flex gap-2 min-w-0 shrink-0">
-                            <span className="text-[#2563eb] w-[140px] shrink-0">Region:</span>
-                            <span className="text-white truncate max-w-[200px]">{detailsQuery.data.regions?.join(', ') || 'N/A'}</span>
+                            <span className="text-[#2563eb] w-[8.75rem] shrink-0">Region:</span>
+                            <span className="text-white truncate max-w-[12.5rem]">{detailsQuery.data.regions?.join(', ') || 'N/A'}</span>
                           </div>
                           <div className="flex gap-2 shrink-0">
                             <span className="text-[#2563eb] shrink-0">Release date:</span>
@@ -541,8 +635,8 @@ export const GamesPage = () => {
                         {/* Combined Row 2: Franchise & Companies */}
                         <div className="flex items-center gap-10 overflow-hidden">
                           <div className="flex gap-2 min-w-0 shrink-0">
-                            <span className="text-[#2563eb] w-[140px] shrink-0">Franchise:</span>
-                            <span className="text-white truncate max-w-[200px]">{detailsQuery.data.collections?.join(', ') || 'N/A'}</span>
+                            <span className="text-[#2563eb] w-[8.75rem] shrink-0">Franchise:</span>
+                            <span className="text-white truncate max-w-[12.5rem]">{detailsQuery.data.collections?.join(', ') || 'N/A'}</span>
                           </div>
                           <div className="flex gap-2 min-w-0">
                             <span className="text-[#2563eb] shrink-0">Companies:</span>
@@ -555,7 +649,7 @@ export const GamesPage = () => {
                         {/* Combined Row 3: Age Rating & Genres */}
                         <div className="flex items-center gap-10 overflow-hidden">
                           <div className="flex gap-2 min-w-0 shrink-0">
-                            <span className="text-[#2563eb] w-[140px] shrink-0">Age Rating:</span>
+                            <span className="text-[#2563eb] w-[8.75rem] shrink-0">Age Rating:</span>
                             <span className="text-white">{detailsQuery.data.esrbRating || 'NR'}</span>
                           </div>
                           <div className="flex gap-2 min-w-0">
@@ -566,8 +660,8 @@ export const GamesPage = () => {
                       </div>
 
                       {/* Brief Summary Container */}
-                      <div className="bg-white/5 rounded-[8px] p-5 mb-8 flex-1 overflow-y-auto border border-white/5 scrollbar-hide">
-                        <p className="text-[15px] text-white/80 leading-[1.8] font-medium">
+                      <div className="bg-white/5 rounded-lg p-5 mb-8 flex-1 overflow-y-auto border border-white/5 scrollbar-hide">
+                        <p className="text-[0.9375rem] text-white/80 leading-[1.8] font-medium">
                           {detailsQuery.data.summary || 'No summary available for this entry.'}
                         </p>
                       </div>
@@ -588,8 +682,8 @@ export const GamesPage = () => {
                           focusKey="DETAILS_PLAY"
                         >
                           {(focused) => (
-                            <button className={`h-[54px] px-8 rounded-[12px] font-black uppercase text-[12px] tracking-[0.1em] flex items-center gap-3 transition-all duration-300 shadow-2xl ${focused ? 'bg-white text-black scale-110 ring-4 ring-[#2563eb] shadow-[0_0_25px_rgba(37,99,235,0.4)]' : 'bg-white text-black hover:scale-105 hover:bg-white/90'}`}>
-                              <span className="material-symbols-outlined text-[24px] filled" style={{ fontVariationSettings: "'FILL' 1" }}>play_arrow</span>
+                            <button className={`h-[3.375rem] px-8 rounded-xl font-black uppercase text-[0.75rem] tracking-[0.1em] flex items-center gap-3 transition-all duration-300 shadow-2xl ${focused ? 'bg-white text-black scale-110 ring-4 ring-[#2563eb] shadow-[0_0_25px_rgba(37,99,235,0.4)]' : 'bg-white text-black hover:scale-105 hover:bg-white/90'}`}>
+                              <span className="material-symbols-outlined text-[1.5rem] filled" style={{ fontVariationSettings: "'FILL' 1" }}>play_arrow</span>
                               Start Game
                             </button>
                           )}
@@ -603,8 +697,8 @@ export const GamesPage = () => {
                           focusKey="DETAILS_DOWNLOAD"
                         >
                           {(focused) => (
-                            <button className={`h-[54px] px-8 rounded-[12px] font-black uppercase text-[12px] tracking-[0.1em] flex items-center gap-3 transition-all duration-300 border-2 ${focused ? 'scale-110 border-[#2563eb] bg-[#2563eb]/20 text-white ring-4 ring-[#2563eb]/20 shadow-[0_0_20px_rgba(37,99,235,0.3)]' : 'bg-white/5 border-white/10 text-white hover:bg-white/10 hover:border-white/20'}`}>
-                              <span className="material-symbols-outlined text-[24px]">download</span>
+                            <button className={`h-[3.375rem] px-8 rounded-xl font-black uppercase text-[0.75rem] tracking-[0.1em] flex items-center gap-3 transition-all duration-300 border-2 ${focused ? 'scale-110 border-[#2563eb] bg-[#2563eb]/20 text-white ring-4 ring-[#2563eb]/20 shadow-[0_0_20px_rgba(37,99,235,0.3)]' : 'bg-white/5 border-white/10 text-white hover:bg-white/10 hover:border-white/20'}`}>
+                              <span className="material-symbols-outlined text-[1.5rem]">download</span>
                               Download
                             </button>
                           )}
@@ -635,12 +729,12 @@ export const GamesPage = () => {
                              {(focused) => (
                                <button 
                                  title="Favorite" 
-                                 className={`w-[54px] h-[54px] flex items-center justify-center transition-all duration-300 rounded-[12px] border-2 
+                                 className={`w-[3.375rem] h-[3.375rem] flex items-center justify-center transition-all duration-300 rounded-xl border-2 
                                    ${focused ? 'scale-110 border-[#2563eb] bg-[#2563eb]/20 ring-4 ring-[#2563eb]/20 shadow-[0_0_15px_rgba(37,99,235,0.3)]' : 'bg-white/5 border-white/10 hover:bg-white/10'}
                                  `}
                                >
                                  <span 
-                                   className={`material-symbols-outlined text-[24px] 
+                                   className={`material-symbols-outlined text-[1.5rem] 
                                      ${detailsQuery.data?.favorite ? 'filled text-[#2563eb]' : 'text-white/40'}
                                      ${focused ? '!text-white' : ''}
                                    `} 
@@ -660,8 +754,8 @@ export const GamesPage = () => {
                              focusKey="DETAILS_COLLECTION"
                            >
                              {(focused) => (
-                               <button title="Add to Collection" className={`w-[54px] h-[54px] flex items-center justify-center transition-all duration-300 rounded-[12px] border-2 ${focused ? 'scale-110 border-[#2563eb] text-white bg-[#2563eb]/20 ring-4 ring-[#2563eb]/20 shadow-[0_0_15px_rgba(37,99,235,0.3)]' : 'bg-white/5 border-white/10 text-white/40 hover:bg-white/10 hover:text-white'}`}>
-                                 <span className="material-symbols-outlined text-[24px]">library_add</span>
+                               <button title="Add to Collection" className={`w-[3.375rem] h-[3.375rem] flex items-center justify-center transition-all duration-300 rounded-xl border-2 ${focused ? 'scale-110 border-[#2563eb] text-white bg-[#2563eb]/20 ring-4 ring-[#2563eb]/20 shadow-[0_0_15px_rgba(37,99,235,0.3)]' : 'bg-white/5 border-white/10 text-white/40 hover:bg-white/10 hover:text-white'}`}>
+                                 <span className="material-symbols-outlined text-[1.5rem]">library_add</span>
                                </button>
                              )}
                            </FocusableItem>
@@ -674,8 +768,8 @@ export const GamesPage = () => {
                              focusKey="DETAILS_MANUAL"
                            >
                              {(focused) => (
-                               <button title="Manual" className={`w-[54px] h-[54px] flex items-center justify-center transition-all duration-300 rounded-[12px] border-2 ${focused ? 'scale-110 border-[#2563eb] text-white bg-[#2563eb]/20 ring-4 ring-[#2563eb]/20 shadow-[0_0_15px_rgba(37,99,235,0.3)]' : 'bg-white/5 border-white/10 text-white/40 hover:bg-white/10 hover:text-white'}`}>
-                                 <span className="material-symbols-outlined text-[24px]">menu_book</span>
+                               <button title="Manual" className={`w-[3.375rem] h-[3.375rem] flex items-center justify-center transition-all duration-300 rounded-xl border-2 ${focused ? 'scale-110 border-[#2563eb] text-white bg-[#2563eb]/20 ring-4 ring-[#2563eb]/20 shadow-[0_0_15px_rgba(37,99,235,0.3)]' : 'bg-white/5 border-white/10 text-white/40 hover:bg-white/10 hover:text-white'}`}>
+                                 <span className="material-symbols-outlined text-[1.5rem]">menu_book</span>
                                </button>
                              )}
                            </FocusableItem>
@@ -687,10 +781,10 @@ export const GamesPage = () => {
 
                   {/* Media Galleria Container */}
                   {mediaItems.length > 0 && (
-                    <div className="mt-12 grid grid-cols-12 gap-8">
-                      <div className="col-span-6 bg-white/5 rounded-[12px] p-5 border border-white/5 flex flex-col shadow-2xl">
+                    <div className="mt-12 grid grid-cols-12 gap-8 items-stretch">
+                      <div className="col-span-6 bg-white/5 rounded-xl p-5 border border-white/5 flex flex-col shadow-2xl h-[30rem] overflow-hidden">
                         {/* Active Media Slot */}
-                        <div className="aspect-video w-full rounded-[10px] bg-black/40 border border-white/10 overflow-hidden relative mb-5 group">
+                        <div className="aspect-video w-full rounded-[0.625rem] bg-black/40 border border-white/10 overflow-hidden relative mb-5 group">
                           {mediaItems[activeMediaIndex].type === 'video' ? (
                              mediaItems[activeMediaIndex].youtubeId ? (
                                 <iframe
@@ -729,7 +823,7 @@ export const GamesPage = () => {
                               focusKey={`THUMB_${idx}`}
                             >
                               {(focused) => (
-                                <div className={`w-[124px] aspect-video rounded-[6px] border-2 transition-all duration-300 overflow-hidden relative ${focused || activeMediaIndex === idx ? 'border-[#2563eb] scale-105 z-10' : 'border-white/10 opacity-40 grayscale hover:opacity-100 hover:grayscale-0'}`}>
+                                <div className={`w-[7.75rem] aspect-video rounded-md border-2 transition-all duration-300 overflow-hidden relative ${focused || activeMediaIndex === idx ? 'border-[#2563eb] scale-105 z-10' : 'border-white/10 opacity-40 grayscale hover:opacity-100 hover:grayscale-0'}`}>
                                   {item.type === 'video' ? (
                                     <div className="w-full h-full bg-black/60 flex items-center justify-center">
                                       <span className="material-symbols-outlined text-[#2563eb] text-3xl filled">play_circle</span>
@@ -747,12 +841,12 @@ export const GamesPage = () => {
                         </div>
                       </div>
                       
-                      {/* Placeholder for the "something else" mentioned by user */}
-                      <div className="col-span-6 bg-white/5 rounded-[12px] p-5 border border-white/5 border-dashed flex items-center justify-center opacity-20">
-                         <div className="text-center geist-mono uppercase tracking-[0.3em] text-[10px]">
-                            Future Content Zone
-                         </div>
-                      </div>
+                      {/* Achievement List Component */}
+                      <AchievementList 
+                        raId={detailsQuery.data.ra_id} 
+                        achievements={detailsQuery.data.merged_ra_metadata?.achievements}
+                        userProgression={userQuery.data?.ra_progression}
+                      />
                     </div>
                   )}
                 </div>
@@ -760,7 +854,7 @@ export const GamesPage = () => {
                 <div className="h-full flex items-center justify-center">
                    <div className="text-center">
                      <div className="material-symbols-outlined text-4xl text-white/10 animate-spin mb-4">progress_activity</div>
-                     <div className="text-[10px] geist-mono text-white/20 uppercase tracking-widest">Hydrating Metadata...</div>
+                     <div className="text-[0.625rem] geist-mono text-white/20 uppercase tracking-widest">Hydrating Metadata...</div>
                    </div>
                 </div>
               ) : (