Index: pages/index/+Page.tsx
===================================================================
--- pages/index/+Page.tsx	(revision e59934102328e450fe4616d5fb36f9d29e5b0ab2)
+++ pages/index/+Page.tsx	(revision 8a7f936ef2c6040183ae33f4b63947eecf8bf3b2)
@@ -1,3 +1,3 @@
-import React, { useEffect, useState } from 'react';
+import React, {useEffect, useState} from 'react';
 import {
     Container, Box, Typography, Button, Grid, IconButton, Dialog, DialogTitle, DialogContent
@@ -10,5 +10,5 @@
 import BuildCard from '../../components/BuildCard';
 
-import { onGetApprovedBuilds, onGetAuthState, onCloneBuild } from '../+Layout.telefunc';
+import {onGetApprovedBuilds, onGetAuthState, onCloneBuild} from '../+Layout.telefunc';
 
 export default function HomePage() {
@@ -29,7 +29,7 @@
                 ] = await Promise.all([
                     onGetAuthState(),
-                    onGetApprovedBuilds({ limit: 5 , sort: 'rating_desc' }),
-                    onGetApprovedBuilds({ limit: 12 }),
-                    onGetApprovedBuilds({ limit: 10, sort: 'rating_desc' })
+                    onGetApprovedBuilds({limit: 5, sort: 'rating_desc'}),
+                    onGetApprovedBuilds({limit: 12}),
+                    onGetApprovedBuilds({limit: 20, sort: 'rating_desc'})
                 ]);
 
@@ -45,4 +45,5 @@
             }
         }
+
         loadSite();
     }, []);
@@ -51,5 +52,5 @@
         if (!data?.isLoggedIn) return alert("Please login to clone builds!");
         if (confirm(`Clone this build to your dashboard?`)) {
-            await onCloneBuild({ buildId });
+            await onCloneBuild({buildId});
             alert("Build cloned! Check your dashboard.");
             setSelectedBuildId(null);
@@ -57,5 +58,5 @@
     };
 
-    if (!data) return <Box sx={{ p: 10, textAlign: 'center' }}>Loading Forge...</Box>;
+    if (!data) return <Box sx={{p: 10, textAlign: 'center'}}>Loading Forge...</Box>;
 
     return (
@@ -69,11 +70,11 @@
                 }
             }}>
-                <Box sx={{ position: 'relative', textAlign: 'center', zIndex: 1, p: 2 }}>
+                <Box sx={{position: 'relative', textAlign: 'center', zIndex: 1, p: 2}}>
                     <Typography variant="h2" fontWeight="bold" gutterBottom>Forge Your Ultimate Machine</Typography>
-                    <Typography variant="h5" sx={{ maxWidth: '800px', mx: 'auto', mb: 1 }}>
+                    <Typography variant="h5" sx={{maxWidth: '800px', mx: 'auto', mb: 1}}>
                         Build, share, discuss, and discover custom PC configurations.
                     </Typography>
-                    <Button variant="contained" size="large" href="/forge" startIcon={<AutoFixHighIcon />}
-                            sx={{ fontSize: '1.2rem', px: 4, py: 1.5, mt: 2 }}>
+                    <Button variant="contained" size="large" href="/forge" startIcon={<AutoFixHighIcon/>}
+                            sx={{fontSize: '1.2rem', px: 4, py: 1.5, mt: 2}}>
                         Start Forging
                     </Button>
@@ -81,7 +82,7 @@
             </Box>
 
-            <Container maxWidth="xl" sx={{ mt: 6, mb: 10 }}>
+            <Container maxWidth="xl" sx={{mt: 6, mb: 10}}>
                 <Box sx={{
-                    mb: 4, borderLeft: '5px solid #ff8201', pl: 2,
+                    mb: 2, borderLeft: '5px solid #ff8201', pl: 1,
                     display: 'flex', justifyContent: 'space-between', alignItems: 'end'
                 }}>
@@ -92,35 +93,62 @@
                         </Typography>
                     </Box>
-                    <Button variant="outlined" startIcon={<ListIcon />} onClick={() => setOpenRankedPopup(true)}>
+                    <Button variant="outlined" startIcon={<ListIcon/>} onClick={() => setOpenRankedPopup(true)}>
                         Show All Top Ranked
                     </Button>
                 </Box>
-
-                <Grid container spacing={3} sx={{ mb: 8, alignItems: 'stretch' }}>
-                    {data.prebuilts.slice(0, 3).map((build: any) => (
-                        <Grid item xs={12} sm={6} md={3} key={build.id} sx={{ display: 'flex' }}>
-                            <Box sx={{ width: '100%' }}>
-                                <BuildCard
-                                    build={build}
-                                    onClick={() => setSelectedBuildId(build.id)}
-                                />
-                            </Box>
-                        </Grid>
+                <Box
+                    sx={{
+                        display: 'grid',
+                        gridTemplateColumns: {
+                            xs: '1fr',
+                            sm: 'repeat(2, 1fr)',
+                            md: 'repeat(3, 1fr)',
+                            lg: 'repeat(4, 1fr)',
+                            xl: 'repeat(5, 1fr)',
+                        },
+                        gap: 3,
+                        width: '90%',
+                    }}
+                >
+                    {data.prebuilts.map((build: any) => (
+                        <BuildCard
+                            key={build.id}
+                            build={build}
+                            onClick={() => setSelectedBuildId(build.id)}
+                        />
                     ))}
-                </Grid>
-
-                <SectionHeader title="Community Forge" subtitle="Fresh builds from users around the world."/>
-                <Grid container spacing={3}>
+                </Box>
+
+                <Box sx={{
+                    mb: 2, mt: 2, borderLeft: '5px solid #ff8201', pl: 1,
+                }}>
+                    <Typography variant="h4" fontWeight="bold" color="text.primary">Community Forge</Typography>
+                    <Typography variant="subtitle1" color="text.secondary" sx={{mb: 2}}>Fresh builds from users around
+                        the world.</Typography>
+                </Box>
+                <Box
+                    sx={{
+                        display: 'grid',
+                        gridTemplateColumns: {
+                            xs: '1fr',
+                            sm: 'repeat(2, 1fr)',
+                            md: 'repeat(3, 1fr)',
+                            lg: 'repeat(4, 1fr)',
+                            xl: 'repeat(5, 1fr)',
+                        },
+                        gap: 3,
+                        width: '90%',
+                    }}
+                >
                     {data.communityBuilds.map((build: any) => (
-                        <Grid item xs={12} sm={6} md={3} key={build.id}>
-                            <BuildCard
-                                build={build}
-                                onClick={() => setSelectedBuildId(build.id)}
-                            />
-                        </Grid>
+                        <BuildCard
+                            key={build.id}
+                            build={build}
+                            onClick={() => setSelectedBuildId(build.id)}
+                        />
                     ))}
-                </Grid>
-
-                <Box sx={{ display: 'flex', justifyContent: 'center', mt: 6 }}>
+                </Box>
+
+                <Box sx={{display: 'flex', justifyContent: 'center', mt: 6}}>
                     <Button variant="outlined" size="large" href="/completed-builds">View All Community Builds</Button>
                 </Box>
@@ -135,19 +163,28 @@
             />
 
-            <Dialog open={openRankedPopup} onClose={() => setOpenRankedPopup(false)} maxWidth="lg" fullWidth scroll="paper">
-                <DialogTitle sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <Dialog open={openRankedPopup} onClose={() => setOpenRankedPopup(false)} maxWidth="xl" fullWidth
+                    scroll="paper">
+                <DialogTitle sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
                     Hall of Fame (Top Rated)
-                    <IconButton onClick={() => setOpenRankedPopup(false)}><CloseIcon /></IconButton>
+                    <IconButton onClick={() => setOpenRankedPopup(false)}><CloseIcon/></IconButton>
                 </DialogTitle>
                 <DialogContent dividers>
-                    <Grid container spacing={3}>
+                    <Grid container spacing={3} sx={{p: 1}}>
                         {allRanked.map((build: any, index: number) => (
-                            <Grid item xs={12} sm={6} md={3} key={`ranked-${build.id}`}>
-                                <Box sx={{ position: 'relative' }}>
+                            <Grid
+                                item
+                                xs={12}
+                                sm={6}
+                                md={3}
+                                key={`ranked-${build.id}`}
+                                sx={{display: 'flex'}}
+                            >
+                                <Box sx={{position: 'relative', width: '100%', display: 'flex'}}>
                                     <Box sx={{
                                         position: 'absolute', top: -10, left: -10, zIndex: 1,
-                                        width: 30, height: 30, borderRadius: '50%',
-                                        bgcolor: index < 3 ? '#ff8201' : 'grey.700', color: 'white',
-                                        display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 'bold'
+                                        width: 35, height: 35, borderRadius: '50%',
+                                        bgcolor: index < 3 ? '#ff8201' : 'grey.800', color: 'white',
+                                        display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                        fontWeight: 'bold', border: '2px solid white', boxShadow: 2
                                     }}>
                                         #{index + 1}
@@ -166,15 +203,5 @@
                 </DialogContent>
             </Dialog>
-
         </Box>
     );
 }
-
-function SectionHeader({ title, subtitle }: { title: string, subtitle: string }) {
-    return (
-        <Box sx={{ mb: 4, borderLeft: '5px solid #ff8201', pl: 2 }}>
-            <Typography variant="h4" fontWeight="bold" color="text.primary">{title}</Typography>
-            <Typography variant="subtitle1" color="text.secondary">{subtitle}</Typography>
-        </Box>
-    );
-}