diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index f65845c..7308451 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -13,7 +13,7 @@ export const Navbar = () => {
   const [showMenu, setShowMenu] = useState(false);
 
   return (
-    <nav className="p-4 mx-6 flex flex-row justify-between">
+    <nav className="py-4 xl:px-10 px-4 flex flex-row justify-between">
       <Link
         href="/"
         id="logo"
diff --git a/layouts/MainLayout.tsx b/layouts/MainLayout.tsx
index 57dc7a3..29f5e54 100644
--- a/layouts/MainLayout.tsx
+++ b/layouts/MainLayout.tsx
@@ -3,9 +3,9 @@ import { Navbar } from "../components/Navbar";
 
 export const MainLayout = ({ children }: PropsWithChildren) => {
   return (
-    <div className="w-11/12 lg:w-2/3 m-auto overflow-x-hidden">
+    <div>
       <Navbar />
-      <main className="xl:p-10 p-6 xl:mt-10">{children}</main>
+      <main className="xl:p-10 p-4 xl:mx-0">{children}</main>
     </div>
   );
 };
diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx
index 56e051c..c13445e 100644
--- a/pages/blog/index.tsx
+++ b/pages/blog/index.tsx
@@ -41,7 +41,7 @@ const BlogCard = ({ blog, slug }: { blog: BasicBlogProps; slug: string }) => {
 const Blog = ({ posts }: { posts: BlogPost[] }) => {
   return (
     <MainLayout>
-      <h1 className="text-3xl font-bold xl:mt-10">Blog</h1>
+      <h1 className="text-3xl font-bold">Blog</h1>
       <div className="w-full h-0.5 bg-white/50 my-4 rounded-full" />
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {posts.map((post, index) => (
diff --git a/styles/globals.css b/styles/globals.css
index 23f9a85..ef8cac3 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -3,5 +3,5 @@
 @import "tailwindcss/utilities";
 
 body {
-  @apply dark:bg-gradient-dark dark:text-primary-text bg-white text-gradient-dark;
-}
\ No newline at end of file
+  @apply dark:bg-gradient-dark dark:text-primary-text bg-white text-gradient-dark xl:w-2/3 w-11/12 mx-auto;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 0c854d5..d22d355 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,7 +15,7 @@ module.exports = {
         secondary: "#FFE600",
         "primary-text": "#D9D9D9",
       },
-    }
+    },
   },
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [require("@tailwindcss/typography")],
 };