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,25 +240,27 @@ function MainPage({
             </Typography>
           </Box>
         </Box>
-        <TextField
+        <Box sx={{ p: 1.5 }}>
-          fullWidth
+          <TextField
-          size="small"
+            fullWidth
-          placeholder="Enter JMESPath expression (e.g., people[*].name)"
+            size="small"
-          value={jmespathExpression}
+            placeholder="Enter JMESPath expression (e.g., people[*].name)"
-          onChange={handleJmespathChange}
+            value={jmespathExpression}
-          error={!!error}
+            onChange={handleJmespathChange}
-          helperText={error || " "}
+            error={!!error}
-          sx={{
+            helperText={error || " "}
-            "& .MuiInputBase-root": {
+            sx={{
-              fontFamily: "'Noto Sans Mono', monospace",
+              "& .MuiInputBase-root": {
-              fontSize: "0.9rem",
+                fontFamily: "'Noto Sans Mono', monospace",
-            },
+                fontSize: "0.9rem",
-            "& .MuiFormHelperText-root": {
+              },
-              mt: 0.75,
+              "& .MuiFormHelperText-root": {
-              mb: -0.5,
+                mt: 0.75,
-            },
+                mb: -0.5,
-          }}
+              },
-        />
+            }}
+          />
+        </Box>
       </Paper>
 
       <Grid container spacing={3} sx={{ flex: "1 1 0", minHeight: 0, height: 0 }}>