diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..5fa9053
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,37 @@
+import type { Metadata } from "next";
+import '@fontsource-variable/kode-mono';
+import "./globals.css";
+import {ThemeProvider} from "@/components/providers/theme-provider";
+import type React from "react";
+import {Footer} from "@/components/footer";
+import {Header} from "@/components/header";
+
+export const metadata: Metadata = {
+  title: "YeloBit",
+  description: "Generated by create next app",
+  icons: "yellow-bit.svg"};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+    <head>
+      <link rel="icon" href="/public/favicon.ico" sizes="any"/>
+    </head>
+    <body className={"w-full min-h-screen flex flex-col items-center justify-between"}>
+    <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+      >
+        <Header></Header>
+        {children}
+        <Footer/>
+      </ThemeProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..50c5c64
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,9 @@
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <main className="flex flex-col items-center justify-between p-24">
+      <h1>Hello world !</h1>
+    </main>
+  );
+}
