Refined control sizes.

src/components/ApiKeyPage.jsx

@@ -163,6 +163,7 @@ function ApiKeyPage({
                   exclusive
                   onChange={(e, value) => value && onShellTypeChange(value)}
                   aria-label="shell type"
+                  sx={{ "& .MuiToggleButton-root": { px: 2, py: 0.5 } }}
                 >
                   <ToggleButton value="bash">UNIX (Bash)</ToggleButton>
                   <ToggleButton value="powershell">Windows (PS)</ToggleButton>

src/components/Header.jsx

@@ -25,7 +25,7 @@ function Header({ theme, onThemeChange, currentPage, onPageChange }) {
           {/* Brand/Title */}
           <Box sx={{ display: "flex", alignItems: "center" }}>
             <Typography
-              variant="h6"
+              variant="h5"
               noWrap
               component="div"
               sx={{

src/components/MainPage.jsx

@@ -216,17 +216,21 @@ function MainPage({
           mb: 1,
           flexShrink: 0,
           bgcolor: "background.paper",
-          p: 1.25,
           border: 1,
           borderColor: "divider",
+          overflow: "hidden",
         }}
       >
         <Box
           sx={{
+            px: 2,
+            py: 1,
+            bgcolor: "action.hover",
+            borderBottom: 1,
+            borderColor: "divider",
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
-            mb: 0.75,
           }}
         >
           <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
@@ -236,6 +240,7 @@ function MainPage({
             </Typography>
           </Box>
         </Box>
+        <Box sx={{ p: 1.5 }}>
           <TextField
             fullWidth
             size="small"
@@ -255,6 +260,7 @@ function MainPage({
               },
             }}
           />
+        </Box>
       </Paper>
 
       <Grid container spacing={3} sx={{ flex: "1 1 0", minHeight: 0, height: 0 }}>