diff --git a/layouts/MainLayout.tsx b/layouts/MainLayout.tsx
index d463749..1647962 100644
--- a/layouts/MainLayout.tsx
+++ b/layouts/MainLayout.tsx
@@ -5,7 +5,7 @@ export const MainLayout = ({ children }: PropsWithChildren) => {
   return (
     <div className="w-11/12 lg:w-2/3 m-auto overflow-x-hidden">
       <Navbar />
-      <main className="mx-10">{children}</main>
+      <main className="xl:p-10 p-6 xl:mt-10 mt-4">{children}</main>
     </div>
   );
 };
diff --git a/pages/index.tsx b/pages/index.tsx
index daf4ab9..687689b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -2,7 +2,7 @@ import { MainLayout } from "../layouts/MainLayout";
 export default function Home() {
   return (
     <MainLayout>
-      <div className="grid lg:grid-cols-2 grid-cols-1 mt-4 lg:mt-20 gap-10 items-center p-6">
+      <div className="grid lg:grid-cols-2 grid-cols-1 xl:mt-10 gap-10 items-center">
         <div className="bg-primary-dark p-10 rounded-lg flex flex-col gap-10 h-fit 3xl:w-2/3 w-full text-lg text-primary-text/90 shadow-lg shadow-gradient-dark/20">
           <div>
             <span className="font-bold text-xl text-primary-text">