diff --git a/kontor-api/src/templates/components/footer.html b/kontor-api/src/templates/components/footer.html
index e1ea0b7..c38d2bf 100644
--- a/kontor-api/src/templates/components/footer.html
+++ b/kontor-api/src/templates/components/footer.html
@@ -1 +1,8 @@
-<h2>Footer</h2>
\ No newline at end of file
+<footer class="mt-auto py-3 bg-light fixed-bottom">
+    <div class="container text-center">
+        <span class="text-muted">{{ version }}</span>
+    </div>
+</footer>
+<!-- Bootstrap JS einbinden -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+<script src="{{ url_for('static', path='js/autocomplete.js') }}"></script>
diff --git a/kontor-api/src/templates/components/navbar.html b/kontor-api/src/templates/components/navbar.html
index 7a25805..526e9d9 100644
--- a/kontor-api/src/templates/components/navbar.html
+++ b/kontor-api/src/templates/components/navbar.html
@@ -1,10 +1,49 @@
-<div class="topnav">
+<!-- <div class="topnav">
   <a href="/">Kontor</a>
   <a href="/comic/comics">Comics</a>
   <a href="/media/files">Media</a>
   <a style="float:right" href="/login/">Login</a></li>
+</div> -->
 
-</div>
+<nav class="navbar navbar-expand-lg navbar-dark" style="background-color:darkgrey;">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="#">Kontor</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="navbar-nav">
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarComicsMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Comics</a>
+          <div class="dropdown-menu" aria-labelledby="navbarComicsMenuLink">
+            <a class="dropdown-item" href="/comic/comics">Comics</a>
+            <a class="dropdown-item" href="/comic/publishers">Publisher</a>
+            <a class="dropdown-item" href="/comic/artists">Artist</a>
+            <a class="dropdown-item" href="/comic/issues">Issue</a>
+            </div>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarWebMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Media</a>
+          <div class="dropdown-menu" aria-labelledby="navbarWebMenuLink">
+            <a class="dropdown-item" href="/media/files">Media Files</a>
+            <a class="dropdown-item" href="/media/actors">Media Actors</a>
+            <a class="dropdown-item" href="/media/lofis">Lofi</a>
+            <a class="dropdown-item" href="/media/articles">Artikel</a>
+          </div>
+        </li>
+        {% if user %}
+          <li class="nav-item">
+            <a class="nav-link" href="/logout">Logout</a>
+          </li>
+        {% else %}
+          <li class="nav-item">
+            <a class="nav-link" href="/login">Login</a>
+          </li>
+        {% endif %}
+      </ul>
+    </div>
+  </div>
+</nav>
 
 <!-- <nav class="navbar navbar-expand-lg navbar-light bg-light px-5">
   <div class="container-fluid">
diff --git a/kontor-api/src/templates/media/lofi_list.html b/kontor-api/src/templates/media/lofi_list.html
index 76d3de4..69c4363 100644
--- a/kontor-api/src/templates/media/lofi_list.html
+++ b/kontor-api/src/templates/media/lofi_list.html
@@ -8,19 +8,52 @@
   {% with msg=msg %}
     {% include "components/alerts.html" %}
   {% endwith %}
-  <div class="container">
+  <div class="row">
+    <div class="col-md-8">
+      <h1>Media Lofi</h1>
+        <p>Hier steht der wesentliche Inhalt der Seite.</p>
+    </div>
+    <div class="col-md-4">
+      <aside class="bg-light p-3">
+        <h3>Seitenbereich</h3>
+        <p>Optionale Sidebar oder Zusatzinformationen.</p>
+      </aside>
+    </div>
+  </div>
+
+  <div class="row">
+    <form class="form-inline" action="/media/lofis">
+      <input type="text" placeholder="Search" name="query">
+        <label>
+          <input type="checkbox" name="review" {% if review %}checked{% endif %}>Review
+        </label>
+        <label>
+          <input type="checkbox" name="should_download" {% if download %}checked{% endif %}>Download
+        </label>
+        <button type="submit">Search</button>
+        <div class="pill-nav"><a href="/media/lofis/add">Add Lofi</a></div>
+    </form>
+  </div>
+
+  <div class="row">
     <table class="table table-hover">
-      <thead><tr>
-        <th scope="col">Titel</th>
-        <th scope="col">Review</th>
-        <th scope="col">Download</th>
-      </tr></thead>
+      <thead>
+        <tr>
+            <th scope="col">Title</th>
+            <th scope="col">Weblink</th>
+            <th scope="col">Review</th>
+            <th colspan="2">Actions</th>
+        </tr>
+      </thead>
       <tbody>
         {% for medialofi in medialofis %}
         <tr>
-           <th scope="row"><a href="/media/lofi/{{medialofi.id}}">{{medialofi.title}}</a></th>
-           <td>{% with check=medialofi.review %}{% include "components/check.html" %}{% endwith %}</td>
-           <td>{% with check=medialofi.should_download %}{% include "components/check.html" %}{% endwith %}</td>
+          <th scope="row"><a href="/media/lofi/{{medialofi.id}}">{{medialofi.title}}</a></th>
+          <td><a href="{{medialofi.url}}">{{medialofi.url}}</a></td>
+          <td>{% with check=medialofi.review %}{% include "components/check.html" %}{% endwith %}</td>
+          <td>{% with check=medialofi.should_download %}{% include "components/check.html" %}{% endwith %}</td>
+          <td><a href="/media/lofi/{{medialofi.id}}/edit" class="btn btn-outline-primary btn-sm active" role="button" aria-pressed="true">Edit</a></td>
+          <td><a href="/media/lofi/{{medialofi.id}}/delete" class="btn btn-outline-danger btn-sm active" role="button" aria-pressed="true">Delete</a></td>
         </tr>
         {% endfor %}
       </tbody>
diff --git a/kontor-api/src/templates/shared/base.html b/kontor-api/src/templates/shared/base.html
index c858d88..21794c1 100644
--- a/kontor-api/src/templates/shared/base.html
+++ b/kontor-api/src/templates/shared/base.html
@@ -1,34 +1,35 @@
 <!DOCTYPE html>
 <html lang="de-DE">
     <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+
         <link rel="stylesheet" href="{{ url_for('static', path='style.css') }}">
         {% block title %}
         {% endblock %}
     </head>
 
-    <body>
-        <div class="header">
+    <body class="d-flex flex-column h-100">
+        <header>
             {% block header %}
             {% endblock %}
-        </div>
-        {% include "components/navbar.html" %}
-        {% block subnav %}
-        {% endblock %}
+            {% include "components/navbar.html" %}
+            {% block subnav %}
+            {% endblock %}
+        </header>
+        <main class="flex-shrink-0">
+            <div class="container my-4">
+                {% block content %}
+                {% endblock %}
+            </div>
+        </main>
 
-        {% block content %}
-        {% endblock %}
-
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
-        <script src="{{ url_for('static', path='js/autocomplete.js') }}"></script>
+        {% include "components/footer.html" %}
         {% block scripts %}
         {% endblock %}
-
-
-        <div class="footer">
-            {% include "components/footer.html" %}
-        </div>
     </body>
 </html>
diff --git a/kontor-api/src/webapps/media/route_lofi.py b/kontor-api/src/webapps/media/route_lofi.py
index 15c5ed1..fc11b0c 100644
--- a/kontor-api/src/webapps/media/route_lofi.py
+++ b/kontor-api/src/webapps/media/route_lofi.py
@@ -1,9 +1,10 @@
 from typing import Optional
 
-from fastapi import APIRouter, Request, status, responses
+from fastapi import APIRouter, Request, status, responses, Query
 from fastapi.security.utils import get_authorization_scheme_param
 from fastapi.templating import Jinja2Templates
 
+from src.core.config import Settings
 from src.core.security import get_current_user_from_token
 from src.db.models.media import MediaLofi
 from src.db.models.admin import Profile
@@ -14,28 +15,37 @@ from src.webapps.media.forms import AddLinkForm
 templates = Jinja2Templates(directory="src/templates")
 router = APIRouter(include_in_schema=False, prefix="/media")
 
-@router.get("/lofi")
-def get_medialofis(db: SessionDep, request: Request, msg: Optional[str] = None):
+@router.get("/lofis")
+def get_medialofis(db: SessionDep, request: Request, msg: Optional[str] = None, review: Optional[bool] = Query(default=False), download: Optional[bool] = Query(default=False)):
     medialofis = db.query(MediaLofi).all()
     try:
         token = request.cookies.get("access_token")
         _, param = get_authorization_scheme_param(token)  # scheme will hold "Bearer" and param will hold actual token value
         current_user: Profile = get_current_user_from_token(token=param)
-        return templates.TemplateResponse("media/lofi_list.html", {"request": request, "msg": msg, "user": current_user, "medialofis": medialofis})
+        request.params.get("review")
+        return templates.TemplateResponse("media/lofi_list.html", {
+            "request": request, 
+            "msg": msg, 
+            "user": current_user, 
+            "version": Settings.PROJECT_VERSION, 
+            "review": review,
+            "download": download, 
+            "medialofis": medialofis,
+        })
     except Exception as e:
         print(e)
     return templates.TemplateResponse("media/lofi_list.html", {"request": request, "msg": msg, "user": None, "medialofis": medialofis})
 
-@router.get("/lofi/{lofi_id}")
+@router.get("/lofis/{lofi_id}")
 def lofi_details(lofi_id: str, request: Request, db: SessionDep):
     medialofi = db.get(MediaLofi, lofi_id)
     return templates.TemplateResponse("media/lofi_detail.html", {"request": request, "medialofi":medialofi})
 
-@router.get("/add-lofi")
+@router.get("/lofis/add")
 def add_lofi_link(request: Request, db: SessionDep):
     return templates.TemplateResponse("media/add_lofi_link.html", {"request": request})
 
-@router.post("/add-lofi")
+@router.post("/lofis/add")
 async def post_lofi_link(request: Request, db: SessionDep):
     form = AddLinkForm(request)
     await form.load_data()