diff --git a/app/app/admin/page.tsx b/app/app/admin/page.tsx
new file mode 100644
index 0000000..7751790
--- /dev/null
+++ b/app/app/admin/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function admin() {
+  return (
+    <div>admin</div>
+  )
+}
+
+export default admin
\ No newline at end of file
diff --git a/app/app/error.tsx b/app/app/error.tsx
new file mode 100644
index 0000000..79b969b
--- /dev/null
+++ b/app/app/error.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import React from 'react'
+
+function error({error}: {error: Error}) {
+  return (
+    <div>error {error.message}</div>
+  )
+}
+
+export default error
\ No newline at end of file
diff --git a/app/app/features/page.tsx b/app/app/features/page.tsx
new file mode 100644
index 0000000..684a47c
--- /dev/null
+++ b/app/app/features/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function features() {
+  return (
+    <div>features</div>
+  )
+}
+
+export default features
\ No newline at end of file
diff --git a/app/app/fonts/avantgardelt-extralight.woff b/app/app/fonts/avantgardelt-extralight.woff
new file mode 100755
index 0000000..2f25627
Binary files /dev/null and b/app/app/fonts/avantgardelt-extralight.woff differ
diff --git a/app/app/fonts/lato-bold.woff b/app/app/fonts/lato-bold.woff
new file mode 100755
index 0000000..84c1cf3
Binary files /dev/null and b/app/app/fonts/lato-bold.woff differ
diff --git a/app/app/fonts/lato-regular.woff b/app/app/fonts/lato-regular.woff
new file mode 100755
index 0000000..f8b6d3e
Binary files /dev/null and b/app/app/fonts/lato-regular.woff differ
diff --git a/app/app/globals.css b/app/app/globals.css
index 13d40b8..ac3a76c 100644
--- a/app/app/globals.css
+++ b/app/app/globals.css
@@ -24,4 +24,4 @@ body {
   .text-balance {
     text-wrap: balance;
   }
-}
+}
\ No newline at end of file
diff --git a/app/app/impressum/page.tsx b/app/app/impressum/page.tsx
new file mode 100644
index 0000000..4189ae8
--- /dev/null
+++ b/app/app/impressum/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function impressum() {
+  return (
+    <div>about</div>
+  )
+}
+
+export default impressum
\ No newline at end of file
diff --git a/app/app/layout.tsx b/app/app/layout.tsx
index a36cde0..202bd06 100644
--- a/app/app/layout.tsx
+++ b/app/app/layout.tsx
@@ -2,33 +2,43 @@ import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
+
+const latoregular = localFont({
+  src: "./fonts/lato-regular.woff",
+  variable: "--font-lato",
   weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
+})
+
+const latobold = localFont({
+  src: "./fonts/lato-bold.woff",
+  variable: "--font-lato-bold",
   weight: "100 900",
-});
+})
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "SJTKD Abteilungen",
   description: "Generated by create next app",
 };
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en">
+    <html lang="de">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={latoregular.variable}
       >
+      <header>
+        <Navbar />
+      </header>
+      <main className="max-w-3xl mx-auto">
         {children}
+        </main>
+        <Footer />
       </body>
     </html>
   );
diff --git a/app/app/mitglied/page.tsx b/app/app/mitglied/page.tsx
new file mode 100644
index 0000000..bbc6e28
--- /dev/null
+++ b/app/app/mitglied/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function mitglied() {
+  return (
+    <div> Mitglieder</div>
+  )
+}
+
+export default mitglied
\ No newline at end of file
diff --git a/app/app/page.tsx b/app/app/page.tsx
index 1316037..41039de 100644
--- a/app/app/page.tsx
+++ b/app/app/page.tsx
@@ -1,8 +1,14 @@
-import Image from "next/image";
+import Counter from "@/components/Counter";
 
 export default function Home() {
-  return (<div>
+  
+  
+  return (<div >
+
     <h1 className="text-7xl font-bold underline">My first Next App</h1>
+
+< Counter />
+
   </div>
   )
 }
\ No newline at end of file
diff --git a/app/app/settings/page.tsx b/app/app/settings/page.tsx
new file mode 100644
index 0000000..4026c38
--- /dev/null
+++ b/app/app/settings/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function settings() {
+  return (
+    <div>settings</div>
+  )
+}
+
+export default settings
\ No newline at end of file
diff --git a/app/app/spiele/:id/page.tsx b/app/app/spiele/:id/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/app/app/spiele/loading.tsx b/app/app/spiele/loading.tsx
new file mode 100644
index 0000000..51df51d
--- /dev/null
+++ b/app/app/spiele/loading.tsx
@@ -0,0 +1,11 @@
+'use client';
+import React from 'react'
+
+function loading() {
+  return (
+    
+    <div>loading</div>
+  )
+}
+
+export default loading
\ No newline at end of file
diff --git a/app/app/spiele/page.tsx b/app/app/spiele/page.tsx
new file mode 100644
index 0000000..c80e662
--- /dev/null
+++ b/app/app/spiele/page.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import Link from "next/link";
+
+type response = {
+  message: string;
+  games: spiel[];
+}
+
+type spiel = {
+  id: number;
+  name: string;
+  type: number;
+};
+
+async function spiele() {
+
+  const response = await fetch("http://localhost:2006/spiele");
+  const data:response[] = await response.json();
+
+  return (
+    <div>
+      <h1> Spiele </h1>
+      <ul>
+        {data.games.map((spiel) => (
+          <li key={spiel.id}>
+            <Link href={`/spiele/${spiel.id}`}>{spiel.name}</Link>
+          </li>
+        ))}
+      </ul>
+      </div>
+  )
+}
+
+export default spiele
\ No newline at end of file
diff --git a/app/app/training/page.tsx b/app/app/training/page.tsx
new file mode 100644
index 0000000..6c946ae
--- /dev/null
+++ b/app/app/training/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function training() {
+  return (
+    <div>training</div>
+  )
+}
+
+export default training
\ No newline at end of file
diff --git a/app/app/user/page.tsx b/app/app/user/page.tsx
new file mode 100644
index 0000000..6ce4eaa
--- /dev/null
+++ b/app/app/user/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function user() {
+  return (
+    <div>user</div>
+  )
+}
+
+export default user
\ No newline at end of file
diff --git a/app/app/user/register/page.tsx b/app/app/user/register/page.tsx
new file mode 100644
index 0000000..568ce3a
--- /dev/null
+++ b/app/app/user/register/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function register() {
+  return (
+    <div>register</div>
+  )
+}
+
+export default register
\ No newline at end of file
diff --git a/app/components/Counter.tsx b/app/components/Counter.tsx
new file mode 100644
index 0000000..f09dd6d
--- /dev/null
+++ b/app/components/Counter.tsx
@@ -0,0 +1,13 @@
+'use client';
+import React, { useState } from 'react';
+
+export default function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className='flex flex-col items-center w-[100px]'>
+        <p className='text-5xl font-bold'>{count}</p>
+    <button onClick={() => setCount(count + 1)} className='bg-blue-500 rounded hover:bg-blue-800 text-white px-4 py-2 mt-2'>Increase</button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
new file mode 100644
index 0000000..df75c0e
--- /dev/null
+++ b/app/components/Footer.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Footer() {
+  return (
+    <div className='max-w-3xl mx-auto'>Footer</div>
+  )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
new file mode 100644
index 0000000..d7840d6
--- /dev/null
+++ b/app/components/Navbar.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import Link from "next/link";
+
+function Navbar() {
+  return (
+    <nav className='max-w-3xl mx-auto py-4 flex gap-x-4 border-b-2'>Navbar
+            
+          <Link href="/">Home</Link>
+          <Link href="/spiele">Spiele</Link>
+          <Link href="/training">Training</Link>
+          <Link href="/user">User</Link>
+          <Link href="/user/register">Register</Link>
+          <Link href="/admin">Admin</Link>
+          <Link href="/features">Feature</Link>
+          <Link href="/impressum">Impressum</Link>
+          
+        </nav>
+  )
+}
+
+export default Navbar
\ No newline at end of file
diff --git a/server/app.js b/server/app.js
index 9b4adc3..02b1e28 100644
--- a/server/app.js
+++ b/server/app.js
@@ -3,6 +3,7 @@ const express = require("express");
 const app = express();
 const authRoutes = require("./routes/auth");
 const memberRoutes = require("./routes/members");
+const spieleRoutes = require("./routes/spiele");
 const bodyParser = require("body-parser");
 
 // Middleware
@@ -14,6 +15,7 @@ const authenticateToken = require("./middleware/authenticateToken");
 // Routes
 app.use("/auth", authRoutes);
 app.use("/members", memberRoutes);
+app.use("/spiele", spieleRoutes);
 
 // Server starten
 const PORT = process.env.PORT || 2005;
diff --git a/server/controllers/gameController.js b/server/controllers/gameController.js
new file mode 100644
index 0000000..bc94dbd
--- /dev/null
+++ b/server/controllers/gameController.js
@@ -0,0 +1,85 @@
+const jwt = require("jsonwebtoken");
+const { Pool } = require("pg");
+
+// Datenbankverbindung
+const pool = new Pool({
+  user: process.env.DB_USER,
+  host: process.env.DB_HOST,
+  database: process.env.DB_NAME,
+  password: process.env.DB_PASSWORD,
+  port: 5432,
+});
+
+// Registrierungsfunktion
+const newGame = async (req, res) => {
+  const { name } = req.body;
+  try {
+    // Überprüfen, ob der Benutzer bereits existiert
+
+    const newGame = await pool.query(
+      "INSERT INTO spiele (name) VALUES ($1) RETURNING id",
+      [name]
+    );
+
+    res.status(201).json({ message: "Spiel angelegt", id: newGame.rows[0].id });
+  } catch (err) {
+    res
+      .status(500)
+      .json({ message: "Fehler beim Anlegen", error: err.message });
+  }
+};
+
+const allGames = async (req, res) => {
+  try {
+    // Überprüfen, ob der Benutzer existiert
+    const games = await pool.query("SELECT * FROM spiele");
+    if (games.rows.length === 0) {
+      return res.status(400).json({ message: "Keine Spiele vorhanden" });
+    }
+
+    // Passwort vergleichen
+    res.status(200).json({ message: "Login erfolgreich", games: games.rows });
+  } catch (err) {
+    res.status(500).json({ message: "Fehler beim Login", error: err.message });
+  }
+};
+
+const updateGame = async (req, res) => {
+  const { id } = req.params;
+  const { name } = req.body;
+  try {
+    const updateUser = await pool.query(
+      "UPDATE spiele SET name = $1 WHERE id = $2 RETURNING *",
+      [name, id]
+    );
+    res.status(200).json({
+      message: "Benutzerdaten aktualisiert",
+      user: updateUser.rows[0],
+    });
+  } catch (err) {
+    res.status(500).json({
+      message: "Fehler beim Aktualisieren der Benutzerdaten",
+      error: err.message,
+    });
+  }
+};
+
+const Game = async (req, res) => {
+  const { id } = req.params;
+  try {
+    const games = await pool.query("SELECT * FROM spiele Where id = $1", [id]);
+    if (games.rows.length === 0) {
+      return res.status(400).json({ message: "Spiel nicht gefunden" });
+    }
+
+    // Passwort vergleichen
+    res.status(200).json({ message: "Spiel gefunden", game: games.rows[0] });
+  } catch (err) {
+    res.status(500).json({
+      message: "Fehler beim Aktualisieren der Benutzerdaten",
+      error: err.message,
+    });
+  }
+};
+
+module.exports = { newGame, allGames, updateGame, Game };
diff --git a/server/routes/spiele.js b/server/routes/spiele.js
new file mode 100644
index 0000000..ea6692f
--- /dev/null
+++ b/server/routes/spiele.js
@@ -0,0 +1,17 @@
+const express = require("express");
+const {
+  allGames,
+  newGame,
+  Game,
+  updateGame,
+} = require("../controllers/gameController");
+const router = express.Router();
+const authenticateToken = require("../middleware/authenticateToken");
+
+// Loginroute
+router.get("/", allGames);
+router.post("/new", newGame);
+router.get("/:id", Game);
+router.post("/:spiel", authenticateToken, updateGame);
+
+module.exports = router;
