diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 637a13f..078d83b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,9 +1,10 @@
 import { PropsWithChildren } from "react";
-import LandingLayout from "@/components/LandingLayout";
 import type { Metadata } from "next";
 import { twMerge } from "tailwind-merge";
 import localFont from "next/font/local";
 import "./globals.css";
+import { Header } from "@/components/Header";
+import Footer from "@/components/Footer";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -17,7 +18,7 @@ const geistMono = localFont({
 });
 
 export const metadata: Metadata = {
-  title: "Next.js Polar starter kit",
+  title: "Polar | Next.js starter kit",
   description: "An easy to use setup for polar.sh with Next.js",
 };
 
@@ -33,7 +34,11 @@ export default function Layout({ children }: PropsWithChildren) {
           `${geistSans.variable} ${geistMono.variable} antialiased`
         )}
       >
-        <LandingLayout>{children}</LandingLayout>
+        <div className="dark:bg-[#0B0C0E] flex w-full flex-col items-center bg-white">
+          <Header />
+          {children}
+          <Footer />
+        </div>
       </body>
     </html>
   );
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index e59c2e8..d7e95cb 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -3,17 +3,16 @@ import Link, { LinkProps } from "next/link";
 import { PropsWithChildren } from "react";
 import { twMerge } from "tailwind-merge";
 
-const Footer = ({ wide }: { wide?: boolean }) => {
+const Footer = () => {
   return (
     <div
       className={twMerge(
-        "dark:border-polar-800 dark:bg-polar-950 border-gray-75 flex w-full flex-col items-center space-y-24 border-t bg-white py-24 md:py-32"
+        "dark:border-polar-800 dark:bg-polar-950 border-gray-75 flex w-full flex-col items-center space-y-24 border-t bg-white py-24 md:py-32 max-w-7xl"
       )}
     >
       <div
         className={twMerge(
-          "flex w-full flex-col gap-x-16 gap-y-24 px-8 md:flex-row md:justify-between md:gap-y-12",
-          wide ? "max-w-7xl" : "max-w-[970px]"
+          "flex w-full flex-col gap-x-16 gap-y-24 px-8 md:flex-row md:justify-between md:gap-y-12"
         )}
       >
         <div className="flex flex-col gap-y-6">
@@ -27,7 +26,7 @@ const Footer = ({ wide }: { wide?: boolean }) => {
         <div
           className={twMerge(
             "flex flex-col gap-y-12 md:flex-row",
-            wide ? "gap-x-24 lg:gap-x-32" : "gap-x-20"
+            "gap-x-24 lg:gap-x-32"
           )}
         >
           <div className="flex flex-col gap-y-4">
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..fe58352
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,27 @@
+import { TopbarNavigation } from "@/components/TopbarNavigation";
+import { BrandingMenu } from "@/components/BrandingMenu";
+import Link from "next/link";
+import Button from "@/components/ui/atoms/button";
+
+export const Header = () => {
+  return (
+    <div className="w-full max-w-[100vw]  px-4  md:max-w-7xl md:px-12  dark:bg-blac py-4 md:py-8 sticky top-0 z-30 dark:bg-[#0B0C0E] bg-white flex flex-row items-center justify-between bg-transparent">
+      <TopbarNavigation />
+      <BrandingMenu
+        className="mt-1 hidden md:block"
+        size={100}
+        logoVariant="logotype"
+      />
+      <BrandingMenu
+        className="ml-2 mt-1 md:hidden"
+        logoVariant="logotype"
+        size={100}
+      />
+      <div className="flex flex-row items-center gap-x-4">
+        <Link href="/login">
+          <Button>Login</Button>
+        </Link>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/LandingLayout.tsx b/src/components/LandingLayout.tsx
deleted file mode 100644
index 2c42d29..0000000
--- a/src/components/LandingLayout.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-"use client";
-
-import { Section } from "@/components/Section";
-import { TopbarNavigation } from "@/components/TopbarNavigation";
-import { BrandingMenu } from "@/components/BrandingMenu";
-import Footer from "@/components/Footer";
-import Link from "next/link";
-import Button from "@/components/ui/atoms/button";
-import { PropsWithChildren } from "react";
-
-export default function Layout({ children }: PropsWithChildren) {
-  return (
-    <div className="dark:bg-[#0B0C0E] flex w-full flex-col items-center bg-white">
-      <Section
-        wrapperClassName="sticky top-0 z-30 dark:bg-[#0B0C0E] bg-white"
-        className="py-4 md:py-8"
-      >
-        <LandingPageTopbar />
-      </Section>
-      {children}
-      <LandingPageFooter />
-    </div>
-  );
-}
-
-const LandingPageTopbar = () => {
-  return (
-    <div className="relative flex flex-row items-center justify-between bg-transparent">
-      <TopbarNavigation />
-      <BrandingMenu
-        className="mt-1 hidden md:block"
-        size={100}
-        logoVariant="logotype"
-      />
-      <BrandingMenu
-        className="ml-2 mt-1 md:hidden"
-        logoVariant="logotype"
-        size={100}
-      />
-      <div className="flex flex-row items-center gap-x-4">
-        <Link href="/login">
-          <Button>Login</Button>
-        </Link>
-      </div>
-    </div>
-  );
-};
-
-const LandingPageFooter = () => {
-  return <Footer wide={true} />;
-};