diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 8cbe770..f8431d5 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,6 +1,7 @@
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
+import { Navigation } from "./ui/navigation/navigation";
const geistSans = localFont({
src: "./fonts/GeistVF.woff",
@@ -26,6 +27,7 @@ export default function RootLayout({
return (
+
{children}
diff --git a/frontend/src/app/ui/navigation/navigation.module.css b/frontend/src/app/ui/navigation/navigation.module.css
new file mode 100644
index 0000000..782df7d
--- /dev/null
+++ b/frontend/src/app/ui/navigation/navigation.module.css
@@ -0,0 +1,31 @@
+.nav {
+ position: fixed;
+ width: 100%;
+ height: 80px;
+ background-color: #1e1e21;
+}
+
+.nav a {
+ margin: auto 20px;
+}
+
+.nav .navcontainer {
+ position: relative;
+ margin: auto;
+ padding: 30px 0;
+ width: 100%;
+ max-width: 1300px;
+}
+
+.nav .logocontainer {
+ margin: -20px auto;
+ float: left;
+}
+
+.nav .logocontainer a {
+ margin: auto 0px;
+}
+
+.nav .navlinkcontainer {
+ float: left;
+}
diff --git a/frontend/src/app/ui/navigation/navigation.tsx b/frontend/src/app/ui/navigation/navigation.tsx
new file mode 100644
index 0000000..498b8aa
--- /dev/null
+++ b/frontend/src/app/ui/navigation/navigation.tsx
@@ -0,0 +1,27 @@
+import Image from "next/image";
+import styles from "./navigation.module.css";
+
+export function Navigation() {
+ return (
+
+ );
+}