diff --git a/src/components/ApiKeyPage.jsx b/src/components/ApiKeyPage.jsx
index 1fcb654..5db08f7 100644
--- a/src/components/ApiKeyPage.jsx
+++ b/src/components/ApiKeyPage.jsx
@@ -93,7 +93,7 @@ function ApiKeyPage({
   return (
     <Box sx={{ flexGrow: 1, py: 4, px: 2 }}>
       <Grid container justifyContent="center">
-        <Grid size={{ xs: 12, md: 8, lg: 6 }}>
+        <Grid size={{ xs: 12, md: 10, lg: 8 }}>
           <Paper elevation={1} sx={{ p: { xs: 3, md: 5 }, bgcolor: "background.paper", border: 1, borderColor: "divider" }}>
             <Typography variant="h5" gutterBottom sx={{ mb: 4, fontWeight: 700, display: "flex", alignItems: "center", gap: 1.5, color: "text.primary" }}>
               <KeyIcon color="primary" /> API Key Management
diff --git a/src/components/MainPage.jsx b/src/components/MainPage.jsx
index 449d13b..4c20dd1 100644
--- a/src/components/MainPage.jsx
+++ b/src/components/MainPage.jsx
@@ -204,6 +204,7 @@ function MainPage({
           variant="body2"
           color="text.secondary"
           align="left"
+          mt="1rem"
         >
           Validate and test JMESPath expressions against JSON data in real-time.
           Enter your JMESPath query and JSON data below to see the results
@@ -219,6 +220,7 @@ function MainPage({
           border: 1,
           borderColor: "divider",
           overflow: "hidden",
+          mb: 2
         }}
       >
         <Box
@@ -240,7 +242,7 @@ function MainPage({
             </Typography>
           </Box>
         </Box>
-        <Box sx={{ p: 1.5 }}>
+        <Box sx={{ p: 1.5, mt: 0.5 }}>
           <TextField
             fullWidth
             size="small"