diff --git a/package-lock.json b/package-lock.json
index a922a97..1510e09 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1912,7 +1912,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
diff --git a/src/App.jsx b/src/App.jsx
index 76eb621..ea5d88f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,15 +3,13 @@ import Header from "./components/Header"
 import Footer from "./components/Footer"
 
 function App() {
-  return (
-    <div className="flex flex-col min-h-screen">
-      <Header />
-      <main className="flex flex-grow p-12 transition-color-mode bg-surface dark:bg-surface-dark">
-        <Outlet />
-      </main>
-      <Footer />
-    </div>
-  )
-}
+  return <div className="flex flex-col min-h-screen">
+    <Header />
+    <main className="flex flex-grow transition-color-mode md:p-7 2xl:p-12 bg-surface dark:bg-surface-dark">
+      <Outlet />
+    </main>
+    <Footer />
+  </div>
+} 
 
 export default App