diff --git a/app/static/app/css/custom.css b/app/static/app/css/custom.css
index ed716d4..9d124b6 100644
--- a/app/static/app/css/custom.css
+++ b/app/static/app/css/custom.css
@@ -58,4 +58,24 @@ a {
 
 a:hover {
     color: rgb(105, 150, 76);
+}
+
+/* BEGINN DES LADEBALKEN VERSUCHS */
+
+.progress-bar {
+    width: 100%;
+    background-color: #e0e0e0; /* Hellgrauer Hintergrund für die gesamte Leiste */
+    border-radius: 25px;
+    overflow: hidden;
+    height: 30px;
+}
+
+.progress {
+    background-color: #FFD700; /* Gelb für den Fortschritt */
+    height: 100%;
+    text-align: center;
+    color: black;
+    line-height: 30px;
+    font-weight: bold;
+    border-radius: 25px 0 0 25px; /* Runde Ecken auf der linken Seite */
 }
\ No newline at end of file
diff --git a/app/templates/app/base.html b/app/templates/app/base.html
index 597e31c..1a8fb66 100644
--- a/app/templates/app/base.html
+++ b/app/templates/app/base.html
@@ -17,12 +17,12 @@
     <!-- HEADER -->
     <div class="container-fluid header-bg-block bg-white-color" id="header-bg-block">
         <div class="container-fluid header-color-block text-center bg-white-color" id="header-color-block" style="color: white;">
-            <h2 id="HeaderText" class="pt-2" style="display: none;"><b>PIO</b><b style="color: rgb(120,170,86);;">MINT</b></h2>
+            <h2 id="HeaderText" class="pt-2" style="display: none;"><b>PIO</b><b style="color: rgb(120,170,86);">MINT</b></h2>
         </div>
     </div>
 
     <!-- CONTENT AREA -->
-    <div id="maincontainer" class="maincontainer container-fluid d-flex justify-content-center align-items-center" style="background-color: white;">
+    <div id="maincontainer" class="maincontainer container-fluid row justify-content-center align-items-center" style="background-color: white; width: 108vw;">
         {% block content %}
         {% endblock %}
     </div>
diff --git a/app/templates/app/home.html b/app/templates/app/home.html
index f745025..c867dbe 100644
--- a/app/templates/app/home.html
+++ b/app/templates/app/home.html
@@ -1,5 +1,88 @@
 {% extends 'app/base.html' %} 
 
 {% block content %}
-<h1>Home</h1>
+<script>
+    document.getElementById('body').classList.replace('bg-white-color','bg-blue-color');
+    document.getElementById('header-color-block').classList.replace('bg-white-color','bg-blue-color');
+    document.getElementById('HeaderText').style.display = 'block';
+    document.getElementById('maincontainer').classList.replace('align-items-center', 'align-items-top')
+</script>
+
+<div class="container" id="welcome_content"> <!-- d-none muss entfernt werden für richtige Funktion -->
+    <h1>Wilkommen!</h1>
+    <p>Schön das du hier bist!
+        <br>Ich wünsche dir viel Freude mit der App.
+        <br>Sollten Fragen oder Probleme auftauchen, fühl dich frei in der Community <a href="http://piomint.de/feedback"><u>piomint.de/feedback</u></a> einen Eintrag da zu lassen.
+        <br>
+        <br><b>Hinweis:</b>
+        <br>Diese App ist für Pioniere optimiert und deshalb für den normalen Dienst oder Hilfspionierdienst nicht so gut geeignet.
+        <br>Eine Ausnahme ist der "Dauer-Hippi" - Dieser ist in den Einstellung auswählbar.
+    </p>
+    <br>
+    <button class="btn btn-primary" id="allOk">Alles klar</button>
+
+    <script>
+        document.getElementById("allOk").addEventListener('click', function(){
+            document.getElementById('welcome_content').style.display = 'none';
+            document.getElementById('dashboard').classList.remove('d-none');
+        })
+    </script>
+</div>
+
+<div class="d-none" id="dashboard">
+    <div class="row justify-content-around mt-3" style="width: 95vw; color: black;">
+        <div class="col-5" style="height: 15vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
+            <p style="font-size: 1.2rem;"><b>Monat</b></p>
+            <div class="progress" style="height: 12px; width: 90%; border-radius: 2rem; background-color: lightgray;">
+                <div class="progress-bar" role="progressbar" style="background-color:rgb(120,170,86); width: 20%; height: 12px;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+            <p style="font-size: 2rem;">12h</p>
+        </div>
+        <div class="col-5" style="height: 15vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
+            <p style="font-size: 1.2rem;"><b>Jahr</b></p>
+            <div class="progress" style="height: 12px; width: 90%; border-radius: 2rem; background-color: lightgray;">
+                <div class="progress-bar" role="progressbar" style="background-color:rgb(120,170,86); width: 51%; height: 12px;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+            <p style="font-size: 2rem;">310h</p>
+        </div>
+    </div>    
+    <div class="row justify-content-around" style="width: 95vw; color: black; padding-top: 2rem;">
+        <div class="col-11" style="height: 15vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
+            <p style="font-size: 1.2rem;"><b>Timer</b></p>
+            <p style="font-size: 2.5rem;">00:00h</p>
+        </div>
+    </div>
+    <div class="row justify-content-around" style="width: 95vw; color: black; padding-top: 2rem;"></div>
+        <div class="col-12" style="height: 45vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
+            <p style="font-size: 1.2rem;"><b>Aktivitäten</b></p>
+            <table class="table table-striped">
+                <thead>
+                  <tr>
+                    <th scope="col">Dauer</th>
+                    <th scope="col">Datum</th>
+                    <th scope="col">Typ</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>01:30</td>
+                    <td>12.09.24</td>
+                    <td>Dienst</td>
+                  </tr>
+                  <tr>
+                    <td>03:30</td>
+                    <td>13.09.24</td>
+                    <td>LDC</td>
+                  </tr>
+                  <tr>
+                    <td>03:00</td>
+                    <td>08.09.24</td>
+                    <td>Dienst</td>
+                  </tr>
+                </tbody>
+              </table>
+        </div>
+    </div>    
+</div>
+
 {% endblock %}
diff --git a/app/urls.py b/app/urls.py
index 7d5e2c3..5dc70a7 100644
--- a/app/urls.py
+++ b/app/urls.py
@@ -3,7 +3,7 @@ from django.views.generic import TemplateView
 from . import views
 
 urlpatterns = [
-    path("", views.login),
+    path("", views.login), # NORMAL login - NUR FÜR DEV TIME
     path("login", views.login),
     path("home/", views.home),
     path('offline/', TemplateView.as_view(template_name="offline.html")),