diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 015fd9e0..74df0cc0 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,12 +7,15 @@ import { Footer } from "./components/Footer";
 import { Navbar } from "./components/NavBar";
 import { store } from "./redux/store";
 import { Provider } from "react-redux";
+import { usePathname } from "next/navigation";
 
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const path = usePathname();
+
   useEffect(() => {
     initializeSubscriptions(store);
     return () => {
@@ -31,7 +34,10 @@ export default function RootLayout({
       </head>
       <Provider store={store}>
         <body>
-          <div className="grid grid-cols-12 custom-auto-row-grid h-screen prose md:prose-lg lg:prose-xl max-w-none divide-y-4 divide-base-300">
+          <div
+            data-path={path}
+            className="grid grid-cols-12 custom-auto-row-grid h-screen prose md:prose-lg lg:prose-xl max-w-none divide-y-4 divide-base-300"
+          >
             <Navbar />
             {children}
             <Footer />
diff --git a/src/app/styles/globals.css b/src/app/styles/globals.css
index a2aafe79..4270d75c 100644
--- a/src/app/styles/globals.css
+++ b/src/app/styles/globals.css
@@ -86,6 +86,11 @@ input[type="number"]::-ms-clear {
   background-color: hsl(var(--b2) / var(--tw-bg-opacity, 1));
 }
 
+/* Grid layout for home page */
+.custom-auto-row-grid[data-path="/"] {
+  grid-auto-rows: 0fr auto auto 1fr 1fr;
+}
+/* Grid layout for rest of the pages */
 .custom-auto-row-grid {
-  grid-auto-rows: auto auto auto 1fr 1fr;
+  grid-auto-rows: 0fr auto 0fr;
 }
