diff --git a/app/layout.tsx b/app/layout.tsx
index 111ddab..c309f5f 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -43,10 +43,12 @@ export default function RootLayout({
       </head>
       <body>
         <RUAThemeProvider>
-          <HeadBar />
-          {children}
-          <Footer />
-          <BackToTop />
+          <div className="flex flex-col min-h-[100vh]">
+            <HeadBar />
+            {children}
+            <Footer />
+            <BackToTop />
+          </div>
         </RUAThemeProvider>
       </body>
     </html>
diff --git a/app/page.tsx b/app/page.tsx
index a742ae2..569ea58 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -11,8 +11,8 @@ export const metadata = {
 
 export default function Page() {
   return (
-    <main className="h-[calc(100vh-142px)] flex justify-center items-center text-xl">
-      <div className="flex flex-col w-full h-full max-w-4xl px-4 py-24 text-2xl">
+    <main className="flex items-stretch justify-center flex-1 text-xl">
+      <div className="flex flex-col w-full max-w-4xl px-4 py-24 text-2xl">
         <h1 className="flex pb-4 text-5xl">
           <span className={clsx('font-semibold font-Lobster', styles.gradient)}>
             Hi there
@@ -27,7 +27,7 @@ export default function Page() {
           </span>
         </h1>
 
-        <div className="relative w-full h-full">
+        <div className="relative flex flex-1 w-full h-full">
           <HomeModel />
         </div>
       </div>
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index 63ed488..08859f8 100644
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <>
-      <main className="max-w-4xl px-8 py-8 mx-auto lg:px-0">
+      <main className="flex-1 max-w-4xl px-8 py-8 mx-auto lg:px-0">
         <div>
           {/* Git projects */}
           <div>
diff --git a/components/pages/footer.tsx b/components/pages/footer.tsx
index 32933a6..6906467 100644
--- a/components/pages/footer.tsx
+++ b/components/pages/footer.tsx
@@ -7,7 +7,7 @@ const nowDay = new Date().getFullYear();
 const Footer = () => {
   return (
     <>
-      <footer className="max-w-6xl px-4 mx-auto xl:px-0">
+      <footer className="w-full max-w-6xl px-4 mx-auto xl:px-0">
         <div className="h-[2px] bg-slate-500"></div>
 
         <div
diff --git a/components/pages/nav-bar.tsx b/components/pages/nav-bar.tsx
index 3271205..5c0fc5e 100644
--- a/components/pages/nav-bar.tsx
+++ b/components/pages/nav-bar.tsx
@@ -76,7 +76,7 @@ const HeadBar = () => {
       <header
         className={clsx(
           'flex justify-between mx-auto',
-          'max-w-6xl p-4 xl:px-0 h-[84px]',
+          'max-w-6xl p-4 xl:px-0 w-full',
           'items-center relative',
         )}
       >
