correct spacer for sigil to be always visible

app/routes/home.tsx

@@ -68,8 +68,8 @@ export default function Home() {
         <Container maxWidth="lg">
             <Box
                 sx={{
-                    minHeight: "100vh",
+                    minHeight: "150vh",
-                    backgroundImage: "url('/aetos_sigil.jpg')",
+                    backgroundImage: "url('/extended_sigil.png')",
                     backgroundSize: "cover",
                     backgroundRepeat: "no-repeat",
                     backgroundPosition: "center",
@@ -77,18 +77,26 @@ export default function Home() {
                     flexDirection: "column",
                 }}
             >
-                {/* Top section */}
-                <Box sx={{py: 6, textAlign: "center"}}>
-                    <Typography variant="h3" sx={{color: "success.main"}}>
-                        Aetos Hideout
-                    </Typography>
-                </Box>
-
                 {/* Spacer pushes bottom part down */}
                 <Box sx={{flex: 1}}/>
 
-                {/* Bottom dashboard */}
+                {/* Bottom dashboard: only 50% height of viewport */}
-                <Container maxWidth="lg" sx={{mb: 4}}>
+                <Box
+                    sx={{
+                        height: "80vh", // 50% of viewport height
+                        overflowY: "auto", // scroll if content overflows
+                        p: 2,
+                    }}
+                >
+                    <Container
+                        maxWidth="lg"
+                        sx={{
+                            bgcolor: "#1a1a1a", // dark background
+                            borderRadius: 3,
+                            p: 3,
+                            boxShadow: 6,
+                        }}
+                    >
                         <Typography
                             variant="h5"
                             align="center"
@@ -98,7 +106,6 @@ export default function Home() {
                         </Typography>
                         <Grid container spacing={3} justifyContent="center">
                             {services.core.map((s) => (
-                            <Grid item xs={12} sm={6} md={4} key={s.name}>
                                 <Paper
                                     elevation={3}
                                     sx={{
@@ -121,7 +128,6 @@ export default function Home() {
                                         {s.desc}
                                     </Typography>
                                 </Paper>
-                            </Grid>
                             ))}
                         </Grid>
 
@@ -134,7 +140,6 @@ export default function Home() {
                         </Typography>
                         <Grid container spacing={3} justifyContent="center">
                             {services.media.map((s) => (
-                            <Grid component="div" item xs={12} sm={6} md={4} key={s.name}>
                                 <Paper
                                     elevation={3}
                                     sx={{
@@ -157,11 +162,12 @@ export default function Home() {
                                         {s.desc}
                                     </Typography>
                                 </Paper>
-                            </Grid>
                             ))}
                         </Grid>
                     </Container>
                 </Box>
+            </Box>
         </Container>
+
     );
 }