diff --git a/lernplattform/classes.py b/lernplattform/classes.py
new file mode 100644
index 0000000..c89c380
--- /dev/null
+++ b/lernplattform/classes.py
@@ -0,0 +1,27 @@
+from flask import Flask, request
+from lernplattform import app
+from lernplattform.models import User
+
+class login():
+    """
+    A class for handling user login functionality.
+    
+    Attributes:
+        user_name (str): The username to be checked for authentication.
+    
+    Methods:
+        __init__(self, user_name=None): Initializes the login object with a given user name.
+        check(user_name): A static method that checks if the provided user name is valid.
+        login(self): Prints "Login" to indicate that the login method has been called.
+    """
+    def __init__(self, user_name=None):
+        self.user_name = user_name  # Initialize the user name attribute for the login class
+
+    @staticmethod
+    def check(user_name):
+        if user_name is None:
+            return False  # Return False if the user name is not provided
+        else:
+            return True  # Otherwise, return True indicating a valid user name
+    def login(self):
+        print("Login")  # Print "Login" to indicate that the login method has been called
diff --git a/lernplattform/models.py b/lernplattform/models.py
index b3fe581..7e5b684 100644
--- a/lernplattform/models.py
+++ b/lernplattform/models.py
@@ -1,16 +1,23 @@
 from lernplattform import db
 
+# Define a User model that represents the user table in the database
 class User(db.Model):
+    # Primary key column for the table, auto-incrementing integer
     id = db.Column(db.Integer, primary_key=True)
+    # Username column with a maximum length of 20 characters, unique and not nullable
     username = db.Column(db.String(20), unique=True, nullable=False)
+    # Email column with a maximum length of 120 characters, unique and not nullable
     email = db.Column(db.String(120), unique=True, nullable=False)
+    # Password column with a maximum length of 60 characters, not nullable
     password = db.Column(db.String(60), nullable=False)
 
+    # Magic method to represent the object as a string when printed or used in string context
     def __repr__(self):
         return f"User('{self.username}', '{self.email}')"
 
+# Function to initialize the database by creating all tables defined in models if they do not exist
 def initialize_database():
     from lernplattform import app
+    # Create an application context before running operations on the database within this function
     with app.app_context():
         db.create_all()
-        print("Database and tables created successfully.")
\ No newline at end of file
diff --git a/lernplattform/routes.py b/lernplattform/routes.py
index 4e8a9a0..f35096b 100644
--- a/lernplattform/routes.py
+++ b/lernplattform/routes.py
@@ -1,21 +1,57 @@
-from flask import render_template, url_for, flash, redirect, jsonify
+from flask import render_template, url_for, flash, redirect, jsonify, request
 from lernplattform import app
 from lernplattform.models import User
 
+from lernplattform import db
+from lernplattform.classes import login
+
 @app.route('/')
 def index():
-    # Render the main page with the list of users
-    return render_template('index.html')
+    """
+    Renders the main page of the application.
+    This function checks if a user is logged in by checking for a 'user_name' cookie.
+    If the user is logged in, it retrieves the username from the database using the cookie value.
+    If not, it defaults to 'Gast'. The main page is then rendered with the current username.
+    
+    Returns:
+        A rendered HTML template with the current username.
+    """
+    if login.check(request.cookies.get('user_name')):
+        user_name = User.query.filter_by(username=request.cookies.get('user_name')).first().username 
+    else:
+        # If not logged in, default to 'Gast'
+        user_name = 'Gast'
+
+    # Render the main page with the current username
+    return render_template('index.html', user_name=user_name)
 
 @app.route('/users', methods=['GET'])
 def get_users():
+    # Query all users from the database
     users = User.query.all()
-    return jsonify([user.username for user in users])
+    # Create a list of dictionaries with user information
+    user_list = [
+        {
+            "id": user.id,
+            "username": user.username,
+            "email": user.email,
+            "password": user.password
+        }
+        for user in users
+    ]
+    # Return the list of users as a JSON response
+    return jsonify(user_list)
+    #return user_list[0]['username']
 
 @app.route('/users', methods=['POST'])
 def create_user():
+    # Get the JSON data from the request body
     data = request.get_json()
-    new_user = User(username=data['username'], email=data['email'])
+    # Create a new User object with the provided username, email, and password
+    new_user = User(username=data['username'], email=data['email'], password=data['password'])
+    # Add the new user to the database session
     db.session.add(new_user)
+    # Commit the transaction to save the new user in the database
     db.session.commit()
+    # Return a success message with status code 201 (Created)
     return jsonify({'message': 'User created'}), 201
\ No newline at end of file
diff --git a/lernplattform/static/images/logo.png b/lernplattform/static/images/logo.png
new file mode 100644
index 0000000..44dcce2
Binary files /dev/null and b/lernplattform/static/images/logo.png differ
diff --git a/lernplattform/templates/index.html b/lernplattform/templates/index.html
index 1afb36d..312ac37 100644
--- a/lernplattform/templates/index.html
+++ b/lernplattform/templates/index.html
@@ -3,29 +3,49 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Social Media Layout</title>
+        <title>Lernplattform EMT/Paramedic</title>
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
         <style>
+            :root {
+                --primary-color: #102037; /* Definieren Sie die primäre Farbe */
+                --secondary-color: #f78b47; /* Definieren Sie die sekundäre Farbe */
+                --link-default-color: #ffffff; /* Definieren Sie die Link-Hover-Farbe */
+                --link-hover-color: #ffcc00; /* Definieren Sie die Link-Hover-Farbe */
+                --link-active-color: #ffcc00; /* Definieren Sie die Link-Hover-Farbe */
+                --background-color: #d4c4c4; /* Definieren Sie die Hintergrundfarbe */
+                --nav-background-color: #102037; /* Definieren Sie die Hintergrundfarbe */
+                --box-background-color: #102037;
+            }
+            body {
+                color: #ffffff;
+            }
+            .light {
+                color: #888888;
+                font-weight: 100;
+                font-size: small;
+            }
             .sidebar {
                 height: 100%;
                 position: sticky;
                 top: 0;
-                background-color: #f0f2f5;
+                background-color: var(--background-color);
             }
             .main-content {
-                background-color: #f0f2f5;
-                padding: 20px;
+                background-color: var(--background-color);
             }
             .profile-card,
             .story,
             .post,
             .who-to-follow,
             .news {
-                background-color: #ffffff;
+                background-color: var(--box-background-color);
                 padding: 20px;
                 border-radius: 15px;
                 margin-bottom: 20px;
-                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+            }
+            .headbar {
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
             }
             .profile-card img,
             .who-to-follow img {
@@ -48,64 +68,59 @@
             .who-to-follow button {
                 border-radius: 20px;
             }
-            .navbar,
-            footer,
+            .navbar {
+                background-color: var(--nav-background-color);
+                padding: 0;
+            }
+            .navbar-nav .nav-link {
+                color: var(--link-default-color)
+            }
+
+            .navbar-nav .nav-link:hover {
+                color: var(--link-hover-color);
+            }
+
+            .navbar-nav .nav-link.active {
+                color: var(--link-active-color);
+            }
+            .logo {
+                display:inline;
+                width: 50px;
+                margin: 0;
+                padding: 0;
+            }
+            
+            .footer {
+                background-color: var(--nav-background-color);
+                padding: 0;
+                box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.3);
+            }
+
             body {
-                background-color: #f0f2f5;
+                background-color: var(--background-color);
             }
         </style>
     </head>
     <body>
-        <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm mb-3">
-            <div class="container-fluid">
-                <a class="navbar-brand" href="#"><img src="https://via.placeholder.com/30" alt="Logo" /></a>
-                <button
-                    class="navbar-toggler"
-                    type="button"
-                    data-bs-toggle="collapse"
-                    data-bs-target="#navbarNav"
-                    aria-controls="navbarNav"
-                    aria-expanded="false"
-                    aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-                <div class="collapse navbar-collapse" id="navbarNav">
-                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                        <li class="nav-item">
-                            <a class="nav-link active" aria-current="page" href="#">Demo</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="#">Pages</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="#">Account</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="#">My Network</a>
-                        </li>
-                    </ul>
-                    <form class="d-flex">
-                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
-                    </form>
-                </div>
-            </div>
-        </nav>
+
+        {% include 'nav.html' %}
 
         <div class="container-fluid">
             <div class="row">
                 <!-- Sidebar -->
                 <div class="col-12 col-md-3 sidebar mb-3">
                     <div class="profile-card text-center p-3">
-                        <img src="https://via.placeholder.com/100" alt="Profile Picture" />
-                        <h5>Sam Lanson</h5>
+                        <!--<img src="https://via.placeholder.com/100" alt="Profile Picture" />-->
+                        <h5>{{ user_name }}</h5>
                         <p>Web Developer at Webestica</p>
-                        <p class="text-muted">I'd love to change the world, but they won’t give me the source code.</p>
+                        <p class="light">I'd love to change the world, but they won’t give me the source code.</p>
                         <div class="d-flex justify-content-around">
                             <span>256 Posts</span>
                             <span>2.5K Followers</span>
                             <span>365 Following</span>
                         </div>
                     </div>
+<!--
                     <div class="list-group">
                         <a href="#" class="list-group-item list-group-item-action">Feed</a>
                         <a href="#" class="list-group-item list-group-item-action">Connections</a>
@@ -115,12 +130,15 @@
                         <a href="#" class="list-group-item list-group-item-action">Notifications</a>
                         <a href="#" class="list-group-item list-group-item-action">Settings</a>
                     </div>
+-->
                 </div>
 
                 <!-- Main Content -->
                 <div class="col-12 col-md-6 main-content mb-3">
+
                     <!-- Post a Story -->
-                    <div class="story p-3 shadow-sm">
+<!--
+                    <div class="story p-3">
                         <div class="d-flex align-items-center">
                             <img
                                 src="https://via.placeholder.com/50"
@@ -135,19 +153,23 @@
                             <button class="btn btn-outline-primary">Feeling/Activity</button>
                         </div>
                     </div>
+-->
 
                     <!-- Posts -->
-                    <div class="post p-3 shadow-sm">
+                    <div class="post p-3">
+
                         <div class="d-flex">
                             <img
-                                src="https://via.placeholder.com/50"
+                                src="../static/images/logo.png"
                                 class="rounded-circle me-3"
+                                style="width: 300px;"
                                 alt="Profile Picture" />
                             <div>
-                                <h6>Lori Ferguson</h6>
-                                <small class="text-muted">Web Developer at Webestica • 2hr</small>
+                                <h6>Lernplattform für <br>Rettungs- und Notfallsanitäter</h6>
+                                <small class="light">Hier kann man lernen und üben, Wiessen festigen und sich aktiv an der Datenbank beteiligen.</small>
                             </div>
                         </div>
+
                         <p class="mt-3">
                             I'm thrilled to share that I've completed a graduate certificate course in project
                             management with the president's honor roll.
@@ -159,16 +181,16 @@
                 <!-- Right Sidebar -->
                 <div class="col-12 col-md-3 mb-3">
                     <!-- Who to Follow -->
-                    <div class="who-to-follow p-3 shadow-sm">
-                        <h6>Who to follow</h6>
+                    <div class="who-to-follow p-3">
+                        <h6>Lernfelder</h6>
                         <div class="d-flex align-items-center my-2">
                             <img
                                 src="https://via.placeholder.com/50"
                                 class="rounded-circle me-3"
                                 alt="Profile Picture" />
                             <div>
-                                <h6 class="mb-0">Judy Nguyen</h6>
-                                <small class="text-muted">News anchor</small>
+                                <h6 class="mb-0">Anatomie</h6>
+                                <small class="light">RettSan</small>
                             </div>
                             <button class="btn btn-outline-primary ms-auto">+</button>
                         </div>
@@ -178,8 +200,8 @@
                                 class="rounded-circle me-3"
                                 alt="Profile Picture" />
                             <div>
-                                <h6 class="mb-0">Amanda Reed</h6>
-                                <small class="text-muted">Web Developer</small>
+                                <h6 class="mb-0">Medikamente</h6>
+                                <small class="light">NotSan</small>
                             </div>
                             <button class="btn btn-outline-primary ms-auto">+</button>
                         </div>
@@ -189,31 +211,28 @@
                                 class="rounded-circle me-3"
                                 alt="Profile Picture" />
                             <div>
-                                <h6 class="mb-0">Billy Vasquez</h6>
-                                <small class="text-muted">News anchor</small>
+                                <h6 class="mb-0">Herzkreislauf</h6>
+                                <small class="light">RettSan</small>
                             </div>
                             <button class="btn btn-outline-primary ms-auto">+</button>
                         </div>
                         <div class="text-center mt-3">
-                            <button class="btn btn-link">View more</button>
+                            <button class="btn btn-link">Mehr Lernfelder</button>
                         </div>
                     </div>
 
                     <!-- Today's News -->
-                    <div class="news p-3 shadow-sm">
-                        <h6>Today's news</h6>
+                    <div class="news p-3">
+                        <h6>Datenbank - Inhalte</h6>
                         <ul class="list-unstyled">
                             <li class="mb-2">
-                                Ten questions you should answer truthfully <small class="text-muted">2hr</small>
+                                Lernfelder <small class="light">3</small>
                             </li>
                             <li class="mb-2">
-                                Five unbelievable facts about money <small class="text-muted">3hr</small>
+                                Fragen RettSan <small class="light">38</small>
                             </li>
                             <li class="mb-2">
-                                Best Pinterest Boards for learning about business <small class="text-muted">4hr</small>
-                            </li>
-                            <li class="mb-2">
-                                Skills that you can learn from ... <small class="text-muted">4hr</small>
+                                Fragen NotSan <small class="light">40</small>
                             </li>
                         </ul>
                     </div>
@@ -221,9 +240,9 @@
             </div>
         </div>
 
-        <footer class="bg-white text-center py-3 shadow-sm mt-3">
+        <footer class="footer text-center py-3 mt-3">
             <div class="container">
-                <small>© 2024 Webestica. Alle Rechte vorbehalten.</small>
+                <small>© 2024 Manuel Weiser. Alle Rechte vorbehalten.</small>
             </div>
         </footer>
 
diff --git a/lernplattform/templates/nav.html b/lernplattform/templates/nav.html
new file mode 100644
index 0000000..8c9feb1
--- /dev/null
+++ b/lernplattform/templates/nav.html
@@ -0,0 +1,34 @@
+<nav class="navbar navbar-expand-lg navbar-light shadow-sm mb-3">
+            <div class="container-fluid headbar">
+                <a class="navbar-brand" href="/"><img src="../static/images/logo.png" alt="EMT Paramedic Learn" class="logo" /></a>
+                <button
+                    class="navbar-toggler"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#navbarNav"
+                    aria-controls="navbarNav"
+                    aria-expanded="false"
+                    aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarNav">
+                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link active" aria-current="page" href="/">Start</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Lernfelder</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Account</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Impressum</a>
+                        </li>
+                    </ul>
+                    <form class="d-flex">
+                        <input class="form-control me-2" type="search" placeholder="Suche" aria-label="Suche" />
+                    </form>
+                </div>
+            </div>
+        </nav>
diff --git a/lernplattform/wsgi.py b/lernplattform/wsgi.py
deleted file mode 100644
index 6f51249..0000000
--- a/lernplattform/wsgi.py
+++ /dev/null
@@ -1,4 +0,0 @@
-from lernplattform import app
-
-if __name__ == "__main__":
-    app.run()
\ No newline at end of file