diff --git a/src/components/common/CodeEditor.tsx b/src/components/common/CodeEditor.tsx
index 575e742..4b5c184 100644
--- a/src/components/common/CodeEditor.tsx
+++ b/src/components/common/CodeEditor.tsx
@@ -1,4 +1,4 @@
-import { Paper } from "@mui/material";
+import { css, Theme } from "@mui/material/styles";
 import { config } from "ace-builds";
 import { ComponentPropsWithoutRef, memo } from "react";
 import AceEditor from "react-ace";
@@ -12,19 +12,24 @@ config.setModuleUrl(
 
 type Props = ComponentPropsWithoutRef<typeof AceEditor>;
 
+const editor = (theme: Theme) => css`
+  box-shadow: ${theme.shadows[1]};
+`;
+
 const StyledComponent = (props: Props) => (
-  <Paper>
-    <AceEditor
-      wrapEnabled
-      theme="textmate"
-      showPrintMargin={false}
-      highlightActiveLine={false}
-      editorProps={{ $blockScrolling: true }}
-      setOptions={{ mergeUndoDeltas: false }}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-    />
-  </Paper>
+  <AceEditor
+    wrapEnabled
+    width="auto"
+    height="100%"
+    theme="textmate"
+    showPrintMargin={false}
+    highlightActiveLine={false}
+    editorProps={{ $blockScrolling: true }}
+    setOptions={{ mergeUndoDeltas: false }}
+    css={editor}
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...props}
+  />
 );
 
 export const Component = memo(StyledComponent);
diff --git a/src/components/common/CodeEditorHalf.tsx b/src/components/common/CodeEditorHalf.tsx
deleted file mode 100644
index 9ff9911..0000000
--- a/src/components/common/CodeEditorHalf.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useTheme } from "@mui/material/styles";
-import { ComponentPropsWithoutRef, memo } from "react";
-
-import { drawerWidth } from "@/components/layout/Drawer";
-import { headerHeight } from "@/components/layout/Header";
-
-import CodeEditor from "./CodeEditor";
-
-type Props = Omit<ComponentPropsWithoutRef<typeof CodeEditor>, "width">;
-
-const StyledComponent = (props: Props) => {
-  const theme = useTheme();
-
-  return (
-    <CodeEditor
-      height={`calc(100vh - ${headerHeight}px - ${theme.spacing(6 * 2)} - 192px`}
-      width={`calc(calc(100vw - ${drawerWidth}px - ${theme.spacing(6 * 2)} - 18px) / 2)`}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-    />
-  );
-};
-
-export const Component = memo(StyledComponent);
-
-export default Component;
diff --git a/src/components/common/CodeEditorHalfLoading.tsx b/src/components/common/CodeEditorHalfLoading.tsx
deleted file mode 100644
index ca78dd5..0000000
--- a/src/components/common/CodeEditorHalfLoading.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Skeleton } from "@mui/material";
-import { useTheme } from "@mui/material/styles";
-import { ComponentPropsWithoutRef, memo } from "react";
-
-import { drawerWidth } from "@/components/layout/Drawer";
-import { headerHeight } from "@/components/layout/Header";
-
-type Props = Omit<ComponentPropsWithoutRef<typeof Skeleton>, "width">;
-
-const StyledComponent = (props: Props) => {
-  const theme = useTheme();
-
-  return (
-    <Skeleton
-      variant="rectangular"
-      height={`calc(100vh - ${headerHeight}px - ${theme.spacing(6 * 2)} - 192px`}
-      width={`calc(calc(100vw - ${drawerWidth}px - ${theme.spacing(6 * 2)} - 18px) / 2)`}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-    />
-  );
-};
-
-export const Component = memo(StyledComponent);
-
-export default Component;
diff --git a/src/components/common/Main.tsx b/src/components/common/Main.tsx
index 7b743b4..eecfce8 100644
--- a/src/components/common/Main.tsx
+++ b/src/components/common/Main.tsx
@@ -1,24 +1,28 @@
-import { Box, Stack, Typography } from "@mui/material";
+import { Stack, Typography } from "@mui/material";
 import { css, Theme } from "@mui/material/styles";
-import { memo, PropsWithChildren } from "react";
+import { ComponentPropsWithoutRef, memo, PropsWithChildren } from "react";
 
-type Props = PropsWithChildren<{
-  title: string;
-}>;
+type Props = PropsWithChildren<
+  {
+    title: string;
+  } & ComponentPropsWithoutRef<typeof Stack>
+>;
 
 const mainTitle = (theme: Theme) => css`
   font-size: ${theme.typography.fontSize * 3}px;
   font-weight: 400;
-  margin-bottom: ${theme.spacing(2)};
 `;
 
-const StyledComponent = ({ children, title }: Props) => (
-  <Box component="main" padding={6}>
+const StyledComponent = ({ children, title, ...stackProps }: Props) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  <Stack component="main" height="100%" padding={6} spacing={2} {...stackProps}>
     <Typography variant="h1" css={mainTitle}>
       {title}
     </Typography>
-    <Stack spacing={2}>{children}</Stack>
-  </Box>
+    <Stack spacing={2} flexGrow={1}>
+      {children}
+    </Stack>
+  </Stack>
 );
 
 export const Component = memo(StyledComponent);
diff --git a/src/components/common/MainItem.tsx b/src/components/common/MainItem.tsx
index 501958c..90f89c8 100644
--- a/src/components/common/MainItem.tsx
+++ b/src/components/common/MainItem.tsx
@@ -1,17 +1,20 @@
-import { Box, Typography } from "@mui/material";
-import { memo, PropsWithChildren } from "react";
+import { Box, Stack, Typography } from "@mui/material";
+import { ComponentPropsWithoutRef, memo, PropsWithChildren } from "react";
 
-type Props = PropsWithChildren<{
-  title: string;
-}>;
+type Props = PropsWithChildren<
+  {
+    title: string;
+  } & ComponentPropsWithoutRef<typeof Stack>
+>;
 
-const StyledComponent = ({ children, title }: Props) => (
-  <Box>
+const StyledComponent = ({ children, title, ...stackProps }: Props) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  <Stack {...stackProps}>
     <Typography variant="h6" component="h2">
       {title}
     </Typography>
-    {children}
-  </Box>
+    <Box flexGrow={1}>{children}</Box>
+  </Stack>
 );
 
 export const Component = memo(StyledComponent);
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index eeaaa34..e775486 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -1,8 +1,7 @@
-import CodeEditorHalfLoading from "./CodeEditorHalfLoading";
 import Configurations from "./Configurations";
 import Main from "./Main";
 import MainItem from "./MainItem";
 import TextField from "./TextField";
 import ToolCardGrid from "./ToolCardGrid";
 
-export { CodeEditorHalfLoading, Configurations, Main, MainItem, TextField, ToolCardGrid };
+export { Configurations, Main, MainItem, TextField, ToolCardGrid };
diff --git a/src/components/pages/converters/json-yaml/Content.tsx b/src/components/pages/converters/json-yaml/Content.tsx
index cd019ce..83daab7 100644
--- a/src/components/pages/converters/json-yaml/Content.tsx
+++ b/src/components/pages/converters/json-yaml/Content.tsx
@@ -1,27 +1,27 @@
-import { Stack } from "@mui/material";
+import { Skeleton, Stack } from "@mui/material";
 import dynamic from "next/dynamic";
 import { ComponentPropsWithoutRef, memo, useCallback, useState } from "react";
 import YAML from "yaml";
 
-import { CodeEditorHalfLoading, Main, MainItem } from "@/components/common";
+import { Main, MainItem } from "@/components/common";
 
 import Configuration, { isSpaces, Spaces } from "./Configuration";
 
 // https://github.com/securingsincity/react-ace/issues/27
-const CodeEditorHalf = dynamic(
+const CodeEditor = dynamic(
   async () => {
-    const ace = await import("@/components/common/CodeEditorHalf");
+    const ace = await import("@/components/common/CodeEditor");
     await Promise.all([
       import("ace-builds/src-noconflict/mode-json"),
       import("ace-builds/src-noconflict/mode-yaml"),
     ]);
     return ace;
   },
-  { ssr: false, loading: () => <CodeEditorHalfLoading /> }
+  { ssr: false, loading: () => <Skeleton variant="rectangular" height="100%" /> }
 );
 
-type CodeValue = NonNullable<ComponentPropsWithoutRef<typeof CodeEditorHalf>["value"]>;
-type OnCodeChange = NonNullable<ComponentPropsWithoutRef<typeof CodeEditorHalf>["onChange"]>;
+type CodeValue = NonNullable<ComponentPropsWithoutRef<typeof CodeEditor>["value"]>;
+type OnCodeChange = NonNullable<ComponentPropsWithoutRef<typeof CodeEditor>["onChange"]>;
 
 type Props = {
   json: CodeValue;
@@ -42,24 +42,12 @@ const StyledComponent = ({
     <MainItem title="Configuration">
       <Configuration {...{ spaces, onSpacesChange }} />
     </MainItem>
-    <Stack direction="row" spacing={2}>
-      <MainItem title="Json">
-        <CodeEditorHalf
-          name="json"
-          mode="json"
-          value={json}
-          tabSize={spaces}
-          onChange={onJsonChange}
-        />
+    <Stack direction="row" spacing={2} height="100%">
+      <MainItem title="Json" height="100%" flexGrow={1}>
+        <CodeEditor name="json" mode="json" value={json} tabSize={spaces} onChange={onJsonChange} />
       </MainItem>
-      <MainItem title="Yaml">
-        <CodeEditorHalf
-          name="yaml"
-          mode="yaml"
-          value={yaml}
-          tabSize={spaces}
-          onChange={onYamlChange}
-        />
+      <MainItem title="Yaml" height="100%" flexGrow={1}>
+        <CodeEditor name="yaml" mode="yaml" value={yaml} tabSize={spaces} onChange={onYamlChange} />
       </MainItem>
     </Stack>
   </Main>
diff --git a/src/components/pages/encoders-decoders/jwt/CodeEditor.tsx b/src/components/pages/encoders-decoders/jwt/CodeEditor.tsx
deleted file mode 100644
index 2081d54..0000000
--- a/src/components/pages/encoders-decoders/jwt/CodeEditor.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ComponentPropsWithoutRef, memo } from "react";
-
-import CodeEditor from "@/components/common/CodeEditor";
-
-type Props = Omit<ComponentPropsWithoutRef<typeof CodeEditor>, "height" | "width">;
-
-const StyledComponent = (props: Props) => (
-  <CodeEditor
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    {...props}
-    readOnly
-    height="160px"
-    width="100%"
-  />
-);
-
-export const Component = memo(StyledComponent);
-
-export default Component;
diff --git a/src/components/pages/encoders-decoders/jwt/CodeEditorLoading.tsx b/src/components/pages/encoders-decoders/jwt/CodeEditorLoading.tsx
deleted file mode 100644
index 2d630d3..0000000
--- a/src/components/pages/encoders-decoders/jwt/CodeEditorLoading.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Skeleton } from "@mui/material";
-import { memo } from "react";
-
-const StyledComponent = () => <Skeleton variant="rectangular" width="100%" height="160px" />;
-
-export const Component = memo(StyledComponent);
-
-export default Component;
diff --git a/src/components/pages/encoders-decoders/jwt/Content.tsx b/src/components/pages/encoders-decoders/jwt/Content.tsx
index c6020f1..e1e45fe 100644
--- a/src/components/pages/encoders-decoders/jwt/Content.tsx
+++ b/src/components/pages/encoders-decoders/jwt/Content.tsx
@@ -1,19 +1,18 @@
+import { Skeleton } from "@mui/material";
 import dynamic from "next/dynamic";
 import { ComponentPropsWithoutRef, memo, useCallback, useState } from "react";
 
 import { Main, MainItem, TextField } from "@/components/common";
 import { decode } from "@/libs/jwt";
 
-import CodeEditorLoading from "./CodeEditorLoading";
-
 // https://github.com/securingsincity/react-ace/issues/27
 const CodeEditor = dynamic(
   async () => {
-    const ace = await import("./CodeEditor");
+    const ace = await import("@/components/common/CodeEditor");
     await import("ace-builds/src-noconflict/mode-json");
     return ace;
   },
-  { ssr: false, loading: CodeEditorLoading }
+  { ssr: false, loading: () => <Skeleton variant="rectangular" width="100%" height="160px" /> }
 );
 
 type TextFieldValue = ComponentPropsWithoutRef<typeof TextField>["value"];
@@ -33,10 +32,10 @@ const StyledComponent = ({ jwt, header, payload, onJwtChange }: Props) => (
       <TextField multiline rows={5} value={jwt} onChange={onJwtChange} />
     </MainItem>
     <MainItem title="Header">
-      <CodeEditor name="header" mode="json" value={header} />
+      <CodeEditor readOnly height="160px" width="100%" name="header" mode="json" value={header} />
     </MainItem>
     <MainItem title="Payload">
-      <CodeEditor name="payload" mode="json" value={payload} />
+      <CodeEditor readOnly height="160px" width="100%" name="payload" mode="json" value={payload} />
     </MainItem>
   </Main>
 );
diff --git a/src/components/pages/formatters/json/Content.tsx b/src/components/pages/formatters/json/Content.tsx
index 146f876..c3d7680 100644
--- a/src/components/pages/formatters/json/Content.tsx
+++ b/src/components/pages/formatters/json/Content.tsx
@@ -1,23 +1,23 @@
-import { Stack } from "@mui/material";
+import { Skeleton, Stack } from "@mui/material";
 import dynamic from "next/dynamic";
 import { ComponentPropsWithoutRef, memo, useCallback, useState } from "react";
 
-import { CodeEditorHalfLoading, Main, MainItem } from "@/components/common";
+import { Main, MainItem } from "@/components/common";
 
 import Configuration, { isSpaces, Spaces } from "./Configuration";
 
 // https://github.com/securingsincity/react-ace/issues/27
-const CodeEditorHalf = dynamic(
+const CodeEditor = dynamic(
   async () => {
-    const ace = await import("@/components/common/CodeEditorHalf");
+    const ace = await import("@/components/common/CodeEditor");
     await import("ace-builds/src-noconflict/mode-json");
     return ace;
   },
-  { ssr: false, loading: () => <CodeEditorHalfLoading /> }
+  { ssr: false, loading: () => <Skeleton variant="rectangular" height="100%" /> }
 );
 
-type CodeValue = NonNullable<ComponentPropsWithoutRef<typeof CodeEditorHalf>["value"]>;
-type OnCodeChange = NonNullable<ComponentPropsWithoutRef<typeof CodeEditorHalf>["onChange"]>;
+type CodeValue = NonNullable<ComponentPropsWithoutRef<typeof CodeEditor>["value"]>;
+type OnCodeChange = NonNullable<ComponentPropsWithoutRef<typeof CodeEditor>["onChange"]>;
 
 type Props = {
   json: CodeValue;
@@ -30,12 +30,12 @@ const StyledComponent = ({ json, formatted, spaces, onJsonChange, onSpacesChange
     <MainItem title="Configuration">
       <Configuration {...{ spaces, onSpacesChange }} />
     </MainItem>
-    <Stack direction="row" spacing={2}>
-      <MainItem title="Input">
-        <CodeEditorHalf name="json" mode="json" value={json} tabSize={2} onChange={onJsonChange} />
+    <Stack direction="row" spacing={2} height="100%">
+      <MainItem title="Input" height="100%" flexGrow={1}>
+        <CodeEditor name="json" mode="json" value={json} tabSize={2} onChange={onJsonChange} />
       </MainItem>
-      <MainItem title="Output">
-        <CodeEditorHalf name="formatted" mode="json" value={formatted} tabSize={spaces} readOnly />
+      <MainItem title="Output" height="100%" flexGrow={1}>
+        <CodeEditor name="formatted" mode="json" value={formatted} tabSize={spaces} readOnly />
       </MainItem>
     </Stack>
   </Main>
diff --git a/src/components/pages/home/Content.tsx b/src/components/pages/home/Content.tsx
index 1da48ff..3d6142b 100644
--- a/src/components/pages/home/Content.tsx
+++ b/src/components/pages/home/Content.tsx
@@ -6,7 +6,7 @@ import { homeTools } from "@/data/tools";
 type Props = ComponentPropsWithoutRef<typeof ToolCardGrid>;
 
 const StyledComponent = ({ tools }: Props) => (
-  <Main title="All tools">
+  <Main title="All tools" height="fit-content">
     <ToolCardGrid {...{ tools }} />
   </Main>
 );