diff --git a/src/components/code-editor.tsx b/src/components/code-editor.tsx
index 884e2ff..a2eb3a2 100644
--- a/src/components/code-editor.tsx
+++ b/src/components/code-editor.tsx
@@ -28,7 +28,7 @@ const Editor = dynamic(
   {
     ssr: false,
     loading: () => (
-      <div className="h-full w-full p-10 pt-2">
+      <div className="h-full w-full p-4">
         <Skeleton className="h-full w-full rounded-3xl" />
       </div>
     ),
@@ -210,7 +210,11 @@ export default function CodeEditor() {
       //     console.log(marker.message);
       //   });
       // }}
-      loading={<Skeleton className="h-full w-full" />}
+      loading={
+        <div className="h-full w-full p-4">
+          <Skeleton className="h-full w-full rounded-3xl" />
+        </div>
+      }
     />
   );
 }
diff --git a/src/components/mdx-preview.tsx b/src/components/mdx-preview.tsx
index a5e62cb..45f7381 100644
--- a/src/components/mdx-preview.tsx
+++ b/src/components/mdx-preview.tsx
@@ -86,7 +86,7 @@ export default function MdxPreview({ source }: MdxPreviewProps) {
 
   if (isLoading) {
     return (
-      <div className="h-full w-full p-10">
+      <div className="h-full w-full p-4">
         <Skeleton className="h-full w-full rounded-3xl" />
       </div>
     );