diff --git a/assets/bilder/facebook.png b/assets/bilder/facebook.png
new file mode 100644
index 0000000..0963e5f
Binary files /dev/null and b/assets/bilder/facebook.png differ
diff --git a/assets/bilder/google.png b/assets/bilder/google.png
new file mode 100644
index 0000000..60b6568
Binary files /dev/null and b/assets/bilder/google.png differ
diff --git a/assets/bilder/twitter.png b/assets/bilder/twitter.png
new file mode 100644
index 0000000..7e36d13
Binary files /dev/null and b/assets/bilder/twitter.png differ
diff --git a/assets/design.css b/assets/design.css
index f16d5db..63636ab 100644
--- a/assets/design.css
+++ b/assets/design.css
@@ -1,14 +1,9 @@
-:root {
-    --clr-neon: rgb(138,43,226);
-}
-
 *,
 *::before,
 *::after {
     box-sizing: border-box;
 }
 
-
 *{
     margin: 0;
     padding: 0;
@@ -29,14 +24,14 @@ body{
     position: fixed;
     top: 0;
     width: 100%;
-    height: 7rem;
+    height: 10rem;
     background: transparent;
     padding-right: 10rem;
 }
 
 .menu a{
     float: left;
-    height: 70%;
+    height: 50%;
     display: block;
     color: #f2f2f2;
     text-align: center;
@@ -44,11 +39,32 @@ body{
     text-decoration: none;
     transition: ease 0.3s;
 }
+.menu p{
+    position: fixed;
+    top: 25px;
+    right: 100px;
+    color: #f2f2f2;
+}
 
-.logo {
-    position: center;
-    margin-left: 30%;
-    
+
+#top {
+    position: fixed;
+    bottom: 1.2rem;
+    float: right;
+    right: 18.5%;
+    left: 95%;
+    max-width: 75px;
+    width: 100%;
+    font-size: 1.3rem;
+    border: rgb(138,43,226);
+    background-color: #808080;
+    padding: .5px;
+    border-radius: 4px;
+}
+
+#top:hover {
+    background-color: #f2f200;
+    cursor: pointer;
 }
 
 .neon-button {
@@ -56,13 +72,13 @@ body{
     display: inline-block;
     cursor: pointer;
     text-decoration: none;
-    color: var(--clr-neon);
-    border: var(--clr-neon) 0.125em solid;
+    color: rgb(138,43,226);
+    border: rgb(138,43,226) 0.125em solid;
     padding: 0.125em 0.5em;
     margin-left: 0.85em;
     border-radius: 0.25em;
     text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;
-    box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
+    box-shadow: inset 0 0 0.5em 0 rgb(138,43,226), 0 0 0.5em 0 rgb(138,43,226);
     position: relative;
 }
 
@@ -70,16 +86,11 @@ body{
     pointer-events: none;
     content: "";
     position: absolute;
-    background: var(--clr-neon);
     top: 120%;
     left: 0;
     width: 100%;
     height: 100%;
   
-    transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
-    filter: blur(1em);
-    opacity: 0.7;
-
 }
 
 .neon-button::after {
@@ -89,17 +100,17 @@ body{
     bottom: 0;
     left: 0;
     right: 0;
-    box-shadow: 0 0 2em 0.5em var(--clr-neon);
+    box-shadow: 0 0 2em 0.5em rgb(138,43,226);
     opacity: 0;
-    background-color: var(--clr-neon);
+    background-color: rgb(138,43,226);
     z-index: -1;
     transition: opacity 100ms linear;
 }
 
 .neon-button:hover,
 .neon-button:focus {
-  color: var(--clr-bg);
-  text-shadow: none;
+    color: rgb(138,43,226);
+    text-shadow: none;
 }
 
 .neon-button:hover::before,
@@ -111,13 +122,6 @@ body{
   opacity: 1;
 }
 
-.menu p{
-    position: fixed;
-    top: 25px;
-    right: 100px;
-    color: #f2f2f2;
-}
-
 #logo {
     float: none;
     position: absolute;
@@ -291,13 +295,13 @@ body{
     display: inline-block;
     cursor: pointer;
     text-decoration: none;
-    color: var(--clr-neon);
-    border: var(--clr-neon) 0.125em solid;
+    color: rgb(138,43,226);
+    border: rgb(138,43,226) 0.125em solid;
     padding: 0.125em 0.3em;
     margin-left: 0.85em;
     position: absolute;
     right: 10px;
     border-radius: 0.25em;
     text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;
-    box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
+    box-shadow: inset 0 0 0.5em 0 rgb(138,43,226), 0 0 0.5em 0 rgb(138,43,226);
 }
diff --git a/assets/seiten/css/404.css b/assets/seiten/css/404.css
new file mode 100644
index 0000000..b0e9a1d
--- /dev/null
+++ b/assets/seiten/css/404.css
@@ -0,0 +1,45 @@
+body {
+    background-image: url(../../bilder/background.png);
+    background-size: 100%;
+}
+
+.errmsg {
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: linear-gradient(134deg, hsl(44, 96%, 65%), hsl(34, 95%, 45%));
+    border-radius: 10px;
+    color: hsl(0, 0, 100);
+    width: 45%;
+}
+
+.errmsg h1 {
+    text-decoration: underline;
+    font-size: xx-large;
+}
+
+.errmsg a, p {
+    text-decoration: solid;
+    font-size: larger;
+    color: #000;
+}
+
+.errmsg button {
+    font-size: 1.3rem;
+    border: #000;
+    background-color: transparent;
+    padding: .5px;
+    border-style: solid;
+    border-radius: 4px;
+    top: 50%;
+    left: 50%;
+    background-color: transparent;
+}
+
+.errmsg button:hover {
+    border-color: #808080;
+    cursor: pointer;
+    transition: all 0.5s ease-in-out;
+}
\ No newline at end of file
diff --git a/assets/seiten/css/login.css b/assets/seiten/css/login.css
new file mode 100644
index 0000000..9f0ccd9
--- /dev/null
+++ b/assets/seiten/css/login.css
@@ -0,0 +1,182 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    height: 100%;
+}
+
+/* Knöpfe */
+
+.btn {
+    display: block;
+    background: hsl(86, 76%, 71%);
+    color: hsl(0, 0, 100);
+    text-decoration: none;
+    margin: 20px 0;
+    padding: 15px 15px;
+    border-radius: 5px;
+    position: relative;
+}
+
+.btn::after 
+    {
+      content: '';
+      position: absolute;
+      z-index: 1;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      transition: all .2s ease-in-out;
+      box-shadow: inset 0 3px 0 hsla(0, 0, 0, 0), 0 3px 3px hsla(0, 0, 0, .2);
+      border-radius: 5px;
+    }
+    
+.btn:hover{
+      background: hsla(0, 0, 0, 0.1);
+      box-shadow: inset 0 3px 0 hsla(0, 0, 0, 0.2);
+    }
+    
+
+.login-thirtparty {
+    padding-left: 15px;
+    color: #000;
+    position: relative;
+    z-index: 1;
+}
+
+.login-thirtparty:hover {
+    box-shadow: inset 0 3px 0 #000;
+    transition: all .2s ease-in-out;
+}
+
+.login-thirtparty .fa {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 50px;
+      height: 100%;
+      text-align: center;
+      background: hsla(0, 0, 0, 0.1);
+      line-height: 3.2;
+      border-radius: 5px 0 0 5px;
+      margin-top: auto;
+      margin-bottom: auto;
+}
+
+.login-facebook {
+    background-color: hsl(221, 44%, 41%);
+    margin-left: auto;
+    margin-right: auto;
+}
+.login-twitter {
+    background-color: hsl(206, 82%, 63%);
+    margin-left: auto;
+    margin-right: auto;
+}
+.login-google {
+    background-color: hsl(7, 71%, 55%);
+    margin-left: auto;
+    margin-right: auto;
+}
+.thirtpartylogos {
+    width: 25px;
+    height: 25px;
+}
+  
+.form fieldset {
+      border: none;
+      padding: 0;
+      margin: 20px 0;
+      position: relative;
+    }
+      
+.form fieldset input {
+        width: 100%;
+        height: 48px;
+        color: hsl(0, 0, 20);
+        padding: 15px 40px 15px 15px;
+        border-radius: 5px;
+        font-size: 14px;
+        outline: none!important;
+        border: 1px solid hsla(0, 0, 0, 0.3);
+        box-shadow: inset 0 1px 4px hsla(0, 0, 0, 0.2);
+        vertical-align: top;
+    }
+    
+.form button {
+      width: 100%;
+      outline: none!important;
+      background: linear-gradient(-5deg, hsl(86, 61%, 44%), hsl(86, 65%, 54%));
+      border: none;
+      text-transform: uppercase;
+      font-weight: bold;
+      box-shadow: 0 3px 0px hsla(86, 21%, 44%, 0.2);
+      text-shadow: 0 2px 3px hsla(0, 0, 0, 0.2);
+    }
+    
+
+.anmelden {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+    width: 800px;
+    border-radius: 10px;
+    box-shadow: 0 3px 25px hsla(0, 0, 0, 0.2);
+    display: flex;
+}
+
+.thirtpartylogin, .email-login {
+    width: 50%;
+    padding: 30px 40px;
+}
+
+.thirtpartylogin {
+    background: linear-gradient(134deg, hsl(44, 96%, 65%), hsl(34, 95%, 45%));
+    border-radius: 10px;
+    color: hsl(0, 0, 100);
+    width: 45%;
+}
+
+.thirtpartylogin h1 {
+    font-size: 30px;
+    margin-top: 10px;
+    margin-bottom: 40px;
+    text-shadow: 0 2px 3px hsla(0, 0, 0, 0.1);
+}
+
+.email-login h2 {
+    font-size: 16px;
+    font-weight: normal;
+    margin-top: 23px;
+    margin-bottom: 43px;
+    text-shadow: 0 2px 3px hsla(0, 0, 0, 0.1);
+}
+
+.email-login fieldset::after {
+    position: absolute;
+    right: 15px;
+    top: 17px;
+    z-index: 2;
+    width: 20px;
+    color: hsla(0, 0, 0, .2);
+    text-align: center;
+}
+
+.email-login fieldset.username::after {
+    content: '👨'; /* User Name Emoji (Person) */
+}
+
+.email-login fieldset.email::after {
+    content: '📧'; /* Email Emoji */
+}
+.email-login fieldset.passwort::after {
+    content: '🔑'; /* Schlüssel (Passwort) Emoji */
+}
\ No newline at end of file
diff --git a/assets/seiten/login.html b/assets/seiten/login.html
new file mode 100644
index 0000000..cd52326
--- /dev/null
+++ b/assets/seiten/login.html
@@ -0,0 +1,63 @@
+<html lang="de">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="with=device-width, initial-scale=1.0">
+        <title>Anmelden</title>
+        <link rel="stylesheet" type="text/css" href="../design.css"/>
+        <link rel="stylesheet" type="text/css" href="./css/login.css"/>
+        <link rel="icon" type="image/png" href="../bilder/icon.png">
+
+    </head>
+    <body>
+        <!-- Menü -->
+        <div class="menu">
+            <a class="neon-button" href="../../index.html">Startseite</a>
+            <a class="neon-button" href="#seite2">2. Seite</a>
+            <a class="neon-button" href="#seite3">3. Seite</a>
+            <a href="../../index.html"><img id="logo" src="../bilder/Logo.png"></a>
+        </div>
+        
+
+        <div class="seite">
+            <!-- Sterne Animation -->
+            <section>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+            </section>
+        
+            <!-- Anmelde "Fenster" -->
+            <div class="anmelden">
+                <div class="thirtpartylogin">
+                    <h1>Erstelle einen <br>KBM-Account</h1>
+                    <a href="./placeholder.html#fb-login" class="btn login-thirtparty login-facebook"><img class="thirtpartylogos" src="../bilder/facebook.png"></img> Mit Meta/Facebook Anmelden</a>
+                    <a href="./placeholder.html#tw-login" class="btn login-thirtparty login-twitter"><img class="thirtpartylogos" src="../bilder/twitter.png"></img> Mit Twitter Anmelden</a>
+                    <a href="./placeholder.html#gl-login" class="btn login-thirtparty login-google"><img class="thirtpartylogos" src="../bilder/google.png"></img> Mit Google Anmelden</a>
+                </div>
+                <div class="email-login">
+                    <h1>Oder benutze deine E-Mail</h1>
+                    <form class="form">
+                        <fieldset class="username">
+                            <input type="text" placeholder="KBM User Name"/>
+                        </fieldset>
+                        <fieldset class="email">
+                            <input type="email" placeholder="E-Mail"/>
+                        </fieldset>
+                        <fieldset class="passwort">
+                            <input type="password" placeholder="Passwort"/>
+                        </fieldset>
+                        <button type="submit" class="btn">Anmelden</button>
+                    </form>
+                </div>
+
+            </div>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/assets/seiten/placeholder.html b/assets/seiten/placeholder.html
new file mode 100644
index 0000000..6920bcb
--- /dev/null
+++ b/assets/seiten/placeholder.html
@@ -0,0 +1,17 @@
+<html lang="de">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="with=device-width, initial-scale=1.0">
+        <title>404</title>
+        <link rel="stylesheet" type="text/css" href="./css/404.css"/>
+        <link rel="icon" type="image/png" href="../bilder/icon.png">
+    </head>
+    <body>
+        <div class="errmsg">
+            <h1>Error 404: Not Found</h1>
+            <p>Bitte kehren sie zurück oder klicken sie auf den Knopf um zur <a href="../../index.html">Startseite</a> zu gelangen!<br></p>
+            <button class="startseite-btn"><a href="../../index.html">Startseite</a></button>
+        </div>
+
+    </body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 39f2d00..cc1cd2d 100644
--- a/index.html
+++ b/index.html
@@ -9,11 +9,11 @@
     <body>
         <!-- Menü -->
         <div class="menu">
-            <a class="neon-button" href="#start">Startseite</a>
+            <a class="neon-button" href="./index.html">Startseite</a>
             <a class="neon-button" href="#seite2">2. Seite</a>
             <a class="neon-button" href="#seite3">3. Seite</a>
-            <a class="SignIn">Anmelden</a>
-            <img id="logo" src="./assets/bilder/Logo.png">
+            <a class="SignIn" href="./assets/seiten/login.html">Anmelden</a>
+            <a href="./index.html"><img id="logo" src="./assets/bilder/Logo.png"></a>
         </div>
         
 
@@ -34,6 +34,8 @@
 
             <!-- Hauptseite -->
             <p> - Startseite -</p>
+            <button id="top"><a href="#top" style="color:white">Nach Oben</a></button>
+
         </div>
     </body>
 </html>
\ No newline at end of file