diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1b7ab91..1aa6c8e 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,7 +5,6 @@ import { ReactQueryProvider } from "./ReactQueryProvider";
 import { AuthOptions } from "@/app/api/auth/[...nextauth]/route";
 import { getServerSession } from "next-auth/next";
 import { cache } from "react";
-
 import { Inter } from "next/font/google";
 
 // If loading a variable font, you don't need to specify the font weight
@@ -26,15 +25,7 @@ const getSession = cache(async () => {
 
 export function Footer() {
   return (
-    <footer
-      className="bg-brandblue text-white"
-      style={{
-        padding: "1rem",
-        textAlign: "center",
-        borderTop: "1px solid #ccc",
-        marginTop: "2rem",
-      }}
-    >
+    <footer className="bg-brandblue text-white p-4 text-center border-t border-gray-300 mt-8">
       <p>
         &copy; {new Date().getFullYear()} Hestia Hearth And Home. All rights
         reserved. Hestia proprietary IP.
@@ -51,21 +42,17 @@ export default async function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  // TODO: With this, the NavBar is being applied to the route layout so across all pages, including the sign in page, which we
-  // possibly don't want, or at least don't want it to look exactly like this, with the same links and ability to sign out
-  // on small screens.
-
   const session = await getSession();
   const userImage = session?.user?.image;
 
   return (
     <html lang="en" className={inter.className}>
-      <body>
+      <body className="min-h-screen flex flex-col">
         <Provider>
           <ReactQueryProvider>
             <Nav userImage={userImage} />
-            {children}
-            {/* <Footer /> */}
+            <main className="flex-grow">{children}</main>
+            <Footer />
           </ReactQueryProvider>
         </Provider>
       </body>
