diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 8a49d31eb2047012e7c5888daa8c459e6eb47e70..9001e5d7dddb194cbf4491d87b1cca7e1c2f159a 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -32,7 +32,7 @@ const Header = (props: IHeader) => {
 
     return (
         <>
-            <div className="navbar bg-base-100 sticky top-0 z-50">
+            <div className="navbar bg-base-100 sticky top-0 z-50 shadow">
                 <div className="navbar-start">
                     <div className="dropdown lg:hidden">
                         <label tabIndex={0} className="btn btn-ghost ">
diff --git a/src/layouts/layout.tsx b/src/layouts/layout.tsx
index 2b41f3f576bb71254cdec1861bb3841b26123547..bcf908615fc7a25569576d099a51c86cc71b5f65 100644
--- a/src/layouts/layout.tsx
+++ b/src/layouts/layout.tsx
@@ -44,9 +44,14 @@ const Layout = ({ children }: Props): JSX.Element => {
                 />
             </Helmet>
             <SEO />
-            <Header />
-            <div className="pt-0">{children}</div>
-            <Footer />
+            {/* https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c */}
+            <div className="relative min-h-screen">
+                <div className="pb-24">
+                    <Header />
+                    {children}
+                </div>
+                <Footer className="absolute bottom-0 h-24" />
+            </div>
         </>
     )
 }