diff --git a/src/components/header.tsx b/src/components/header.tsx
index 95dd15d..a6897de 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -39,7 +39,10 @@ function Header() {
   }, [isOpen]);
 
   return (
-    <header ref={headerRef} className="header z-50">
+    <header
+      ref={headerRef}
+      className="fixed top-0 left-0 right-0 z-50 bg-white sm:bg-transparent sm:relative"
+    >
       <div className="flex justify-center sm:justify-between items-center space-x-5 py-10">
         <Link to="/">
           <h1 className="text-3xl">London Brutalist Map</h1>
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 020ac17..c1d30b5 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -9,7 +9,7 @@ export default function Layout({
   return (
     <div className="sm:mx-10">
       <Header />
-      {children}
+      <div className="py-28 sm:py-0">{children}</div>
       <Footer />
     </div>
   );