diff --git a/app/components/ServiceList.tsx b/app/components/ServiceList.tsx
index 6a6fa4d..75a0397 100644
--- a/app/components/ServiceList.tsx
+++ b/app/components/ServiceList.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import Box from '@mui/material/Box';
 import {Grid, Paper, Link, Typography} from '@mui/material';
 
 interface ServiceList {
@@ -14,27 +15,34 @@ interface ServiceListProps {
 
 const ServiceList: React.FC<ServiceListProps> = ({serviceList}) => {
   return (
-    <Grid container spacing={3} justifyContent="center">
-      {serviceList.map((s) => (
-        <Paper
-          elevation={3}
-          sx={{p: 2, textAlign: "center", bgcolor: "#2d2d2d", borderRadius: 2}}
-        >
-          <Link
-            href={s.url}
-            target={s.external ? "_blank" : undefined}
-            rel="noopener"
-            underline="none"
-            sx={{fontSize: 18, fontWeight: "bold", color: "success.main"}}
+    <Box
+      sx={{
+        flex: 1,
+        overflowY: 'auto', // ✅ Scroll only inside this
+      }}
+    >
+      <Grid container spacing={3} justifyContent="center">
+        {serviceList.map((s) => (
+          <Paper
+            elevation={3}
+            sx={{p: 2, textAlign: "center", bgcolor: "#2d2d2d", borderRadius: 2}}
           >
-            {s.name}
-          </Link>
-          <Typography variant="body2" sx={{mt: 1, color: "#ccc"}}>
-            {s.desc}
-          </Typography>
-        </Paper>
-      ))}
-    </Grid>
+            <Link
+              href={s.url}
+              target={s.external ? "_blank" : undefined}
+              rel="noopener"
+              underline="none"
+              sx={{fontSize: 18, fontWeight: "bold", color: "success.main"}}
+            >
+              {s.name}
+            </Link>
+            <Typography variant="body2" sx={{mt: 1, color: "#ccc"}}>
+              {s.desc}
+            </Typography>
+          </Paper>
+        ))}
+      </Grid>
+    </Box>
   );
 };