diff --git a/src/app/page.tsx b/src/app/page.tsx
index 02232e0..fed9551 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,9 @@
-export default function Home() {
-  return (
-    <div className="bg-white w-screen h-screen">
+import Navbar from '../components/Navbar';
 
-    </div>
+export default function Home() {
+    return  (
+      <div className="bg-black text-white font-noto">
+        <Navbar renderHomeLink={false} />
+      </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 0000000..0adc068
--- /dev/null
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import Image from "next/image";
+import LOGO from "../assets/logo/icons8-toolbox-64.svg";
+
+interface NavProps {
+    renderHomeLink: boolean,
+}
+
+const navbar = (props:NavProps) => {
+    return (
+        <div className="h-18 w-full p-3 border-2 border-white">
+            <nav className="bg-black text-white font-bold flex flex-row items-center justify-between">
+                <div className="justify-items-start flex flex-1 flex-row items-center">
+                    <Image
+                        src={LOGO}
+                        alt={""}
+                        width={64}
+                        height={64}
+                        className="invert"
+                    />
+                    <div className="text-white ml-5">werkzeugkiste.</div>
+                </div>
+                <div className="flex flex-auto justify-center">
+                    {props.renderHomeLink ?
+                        <a href="#" className="justify-center">home</a>
+                        : null}
+                </div>
+                <div className="flex flex-auto">
+                    <a href="https://github.com/theoleuthardt/werkzeugkiste" className="items-end mr-3">github</a>
+                </div>
+            </nav>
+        </div>
+    );
+};
+
+export default navbar;
\ No newline at end of file