diff --git a/app/static/app/.DS_Store b/app/static/app/.DS_Store
new file mode 100644
index 0000000..cd3a2cf
Binary files /dev/null and b/app/static/app/.DS_Store differ
diff --git a/app/static/app/css/custom.css b/app/static/app/css/custom.css
index 6834b76..de017f4 100644
--- a/app/static/app/css/custom.css
+++ b/app/static/app/css/custom.css
@@ -25,4 +25,29 @@
 
 .fade-in {
     animation: fade-in 1s forwards;
+}
+
+#header-bg-block {
+    height: 8vh; 
+    padding: 0;
+}
+
+#header-color-block {
+    border-bottom-left-radius: 2rem;
+    border-bottom-right-radius: 2rem;
+    height: 7vh;
+}
+
+.maincontainer {
+    height: 92vh;
+    transition: height 1s ease, transform 1s ease;
+}
+
+.bg-white-color {
+    background-color: white;
+}
+
+.bg-blue-color {
+    background-color: #026670;
+    transition: background-color 1s ease, transform 1s ease;
 }
\ No newline at end of file
diff --git a/app/static/app/images/appleicon.png b/app/static/app/images/appleicon.png
index 980736b..63faa6d 100644
Binary files a/app/static/app/images/appleicon.png and b/app/static/app/images/appleicon.png differ
diff --git a/app/static/app/images/appleicon_whitebg.png b/app/static/app/images/appleicon_whitebg.png
new file mode 100644
index 0000000..a6c451e
Binary files /dev/null and b/app/static/app/images/appleicon_whitebg.png differ
diff --git a/app/templates/app/base.html b/app/templates/app/base.html
index b739dfb..597e31c 100644
--- a/app/templates/app/base.html
+++ b/app/templates/app/base.html
@@ -13,14 +13,16 @@
     
     <title>PioMint</title>
 </head>
-<body style="overflow: hidden; background-color: #026670;">
+<body id="body" style="overflow: hidden;" class="bg-white-color">
     <!-- HEADER -->
-    <div class="container-fluid" style="background-color: white; height: 6vh; padding: 0;">
-        <div class="container-fluid" style="background-color: #026670; border-bottom-left-radius: 2rem; border-bottom-right-radius: 2rem; height: 5vh;"></div>
+    <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>
+        </div>
     </div>
 
     <!-- CONTENT AREA -->
-    <div class="container-fluid d-flex justify-content-center align-items-center" style="height: 94vh; background-color: white;">
+    <div id="maincontainer" class="maincontainer container-fluid d-flex justify-content-center align-items-center" style="background-color: white;">
         {% block content %}
         {% endblock %}
     </div>
diff --git a/app/templates/app/login.html b/app/templates/app/login.html
index f9e9665..dad59eb 100644
--- a/app/templates/app/login.html
+++ b/app/templates/app/login.html
@@ -2,12 +2,60 @@
 {% load static %}
 
 {% block content %}
-<div class="text-center">
-    <img src="{% static 'app/images/watch_transparent.png' %}" alt="Bildbeschreibung" class="img-fluid w-50">
+<div class="text-center" id="content">
+    <img src="{% static 'app/images/watch_transparent.png' %}" alt="Bildbeschreibung" class="img-fluid w-50" id="image">
     <br>
-    <h1><b>PIOMINT</b></h1>
+    <h1><b>PIO</b><b style="color: rgb(120,170,86);">MINT</b></h1>
     <br>
     <br>
-    <button type="button" class="btn btn-primary mt-5" style="border-radius: 2rem; font-size: 2.5rem; padding: 0rem 0.75rem;">→</button>
+    <button type="button" class="btn btn-primary mt-5" style="border-radius: 2rem; font-size: 2.5rem; padding: 0rem 0.75rem;" id="button">→</button>
 </div>
+
+<div id="new-content" style="display: none;" class="mb-3">
+    <h2>Login</h2>
+    <form>
+        <div class="form-group">
+          <label for="exampleInputEmail1">Benutzername</label>
+          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
+          <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
+        </div>
+        <div class="form-group">
+          <label for="exampleInputPassword1">Passwort</label>
+          <input type="password" class="form-control" id="exampleInputPassword1">
+        </div>
+        <div class="form-group form-check">
+          <input type="checkbox" class="form-check-input" id="exampleCheck1">
+          <label class="form-check-label" for="exampleCheck1">Eingeloggt bleiben</label>
+        </div>
+        <!-- <button type="submit" class="btn btn-primary">Login</button> -->
+        <a href="/app/home" class="btn btn-primary">Login (Überbrücken)</a>
+      </form>
+</div>
+
+<script>
+    document.getElementById('button').addEventListener('click', function() {
+        // Elemente nach links aus dem Bildschirm bewegen
+        document.getElementById('content').classList.add('slide-out');
+
+        setTimeout(function() {
+            // Size Up the Header Block
+            document.getElementById('header-color-block').classList.replace('bg-white-color', 'bg-blue-color')
+            document.getElementById('HeaderText').style.display = 'block';
+            document.getElementById('HeaderText').classList.add('fade-in');
+            document.getElementById('body').classList.replace('bg-white-color', 'bg-blue-color');
+        }, 200);
+        
+        setTimeout(function(){
+            document.getElementById('maincontainer').classList.replace('align-items-center', 'pt-5')
+        }, 400);
+
+        // Nach einer Sekunde (Animationsdauer) den neuen Bereich anzeigen
+        setTimeout(function() {
+            document.getElementById('content').style.display = 'none';
+            var newContent = document.getElementById('new-content');
+            newContent.style.display = 'block';
+            newContent.classList.add('fade-in');
+        }, 800); // Dauer der slide-out-Animation (1 Sekunde)
+    });
+</script>
 {% endblock %}
diff --git a/piomint/pwa_settings.py b/piomint/pwa_settings.py
index 7cd7fdf..bd2d4d5 100644
--- a/piomint/pwa_settings.py
+++ b/piomint/pwa_settings.py
@@ -14,13 +14,13 @@ PWA_APP_STATUS_BAR_COLOR = 'black-translucent'
 PWA_SERVICE_WORKER_PATH = os.path.join(BASE_DIR, 'app/static/app/js', 'serviceworker.js')
 PWA_APP_ICONS = [
     {
-        'src': '/static/app/images/appleicon.png',
+        'src': '/static/app/images/appleicon_whitebg.png',
         'sizes': '160x160'
     }
 ]
 PWA_APP_ICONS_APPLE = [
     {
-        'src': '/static/app/images/appleicon.png',
+        'src': '/static/app/images/appleicon_whitebg.png',
         'sizes': '160x160'
     }
 ]
