diff --git a/src/app/core/auth/components/login/login.component.html b/src/app/core/auth/components/login/login.component.html
index a8bcc95..d840111 100644
--- a/src/app/core/auth/components/login/login.component.html
+++ b/src/app/core/auth/components/login/login.component.html
@@ -2,7 +2,7 @@
 </div>
 
 <div class="max-w-sm mx-auto mb-10">
-    <h1 class="font-bold text-center text-skin-accent text-5xl mb-5">
+    <h1 class="font-bold text-center text-skin-primary text-5xl mb-5">
         Beekeeper
     </h1>
     <h1 class="font-bold text-center text-skin-accent text-xl">
@@ -12,13 +12,13 @@
 
 <form class="max-w-sm mx-auto" [formGroup]="loginForm">
     <div class="mb-5">
-        <label for="identifier" class="block mb-2 text-sm font-medium text-skin-accent-muted">Benutzername oder E-Mail</label>
-        <input formControlName="identifier" type="text" id="identifier" class="bg-skin-primary border border-gray-300 text-skin-accent-muted text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="username72 / your@email.com" required />
+        <label for="identifier" class="block mb-2 text-sm font-medium text-skin-primary-muted">Benutzername oder E-Mail</label>
+        <input formControlName="identifier" type="text" id="identifier" class="bg-skin-primary border border-gray-300 text-skin-primary text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="username72 / your@email.com" required />
     </div>
     <div class="mb-5">
-        <label for="password" class="block mb-2 text-sm font-medium text-skin-accent-muted">Passwort</label>
-        <input formControlName="password" type="password" id="password" class="bg-skin-primary border border-gray-300 text-skin-accent-muted text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required />
-        <p id="helper-text-explanation" class="mt-2 text-sm text-skin-accent-muted">Neu hier? <a routerLink="/auth/registration" class="font-medium  text-skin-secondary hover:underline">Jetzt registrieren!</a></p>
+        <label for="password" class="block mb-2 text-sm font-medium text-skin-primary-muted">Passwort</label>
+        <input formControlName="password" type="password" id="password" class="bg-skin-primary border border-gray-300 text-skin-primary text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required />
+        <p id="helper-text-explanation" class="mt-2 text-sm text-skin-primary-muted">Neu hier? <a routerLink="/auth/registration" class="font-medium text-skin-accent hover:underline hover:font-bold">Jetzt registrieren!</a></p>
     </div>
-    <button (click)="login()" [disabled]="!loginForm.valid" type="submit" class="w-full 9xl:w-auto font-bold text-skin-primary bg-skin-secondary hover:bg-skin-accent rounded-lg text-sm px-5 py-2.5 text-center">Anmelden</button>
+    <button (click)="login()" [disabled]="!loginForm.valid" type="submit" class="w-full 9xl:w-auto font-bold text-skin-primary bg-skin-secondary hover:text-skin-secondary rounded-lg text-sm px-5 py-2.5 text-center">Anmelden</button>
 </form>
diff --git a/src/app/core/components/navigation/navigation.component.html b/src/app/core/components/navigation/navigation.component.html
index 83bac92..fb4201f 100644
--- a/src/app/core/components/navigation/navigation.component.html
+++ b/src/app/core/components/navigation/navigation.component.html
@@ -2,46 +2,56 @@
 
 <nav class="bg-skin-secondary">
   <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
-  <a href="#" class="flex items-center space-x-3">
-      <img src="assets/icon.png" class="h-8" alt="Beekeeper Logo" />
-      <span class="text-skin-primary self-center text-2xl font-semibold whitespace-nowrap">Beekeeper</span>
-  </a>
-  <div class="flex items-center md:order-2 space-x-3 md:space-x-0">
-      <button type="button" class="block w-8 h-8 text-sm bg-skin-primary rounded-full md:me-0 focus:ring-4 focus:ring-gray-300" id="user-menu-button" aria-expanded="false" data-dropdown-toggle="user-dropdown" data-dropdown-placement="bottom">
-        <span class="text-skin-secondary rounded-full">AA</span>
-        <!-- <img class="w-8 h-8 rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="user photo"> -->
+    
+    <!-- Title -->
+    <a href="#" class="flex items-center space-x-3">
+        <img src="assets/icon.png" class="h-10" alt="Beekeeper Logo" />
+        <span class="text-skin-primary self-center text-2xl font-semibold whitespace-nowrap">Beekeeper</span>
+    </a>
+
+    <div class="flex items-center md:order-2 space-x-3 md:space-x-0">
+      <!--User Bubble-->
+        <button type="button" class="block w-10 h-10 text-sm bg-skin-primary rounded-full md:me-0 focus:ring-4 focus:ring-gray-300" id="user-menu-button" aria-expanded="false" data-dropdown-toggle="user-dropdown" data-dropdown-placement="bottom">
+          <span class="text-skin-accent rounded-full font-bold p-2">AA</span>
+          <!-- <img class="w-8 h-8 rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="user photo"> -->
+        </button>
+
+      <!--Burger Menu-->
+        <button data-collapse-toggle="navbar-user" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-skin-primary rounded-lg md:hidden hover:bg-skin-primary" aria-controls="navbar-user" aria-expanded="false">
+          <span class="sr-only">Open main menu</span>
+          <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
+          </svg>
       </button>
-      <!-- Dropdown menu -->
-      <div class="z-50 hidden my-4 text-base list-none divide-y divide-gray-100 rounded-lg shadow bg-skin-primary" id="user-dropdown">
-        <div class="px-4 py-3">
-          <span class="block text-sm text-skin-accent font-bold">{{state?.username}}</span>
-          <span class="block text-sm text-skin-accent-muted truncate">{{state?.roleIdentifier}}</span>
-        </div>
-        <ul class="p-4" aria-labelledby="user-menu-button">
-          <li>
-            <a href="#" class="block py-2 px-3 rounded text-skin-primary-muted hover:text-skin-primary md:text-skin-secondary-muted md:hover:text-skin-secondary hover:bg-skin-secondary md:p-0">Einstellungen</a>
-          </li>
-          <li>
-            <button class="w-full block py-2 px-3 rounded text-skin-primary-muted hover:text-skin-primary md:text-skin-secondary-muted md:hover:text-skin-secondary hover:bg-skin-secondary md:p-0" (click)="logout()">Ausloggen</button>
-          </li>
-        </ul>
+    </div>
+
+    <!-- User dropdown -->
+    <div class="z-50 hidden my-4 text-base list-none divide-y divide-gray-100 rounded-lg shadow-sm shadow-skin-primary bg-skin-primary" id="user-dropdown">
+      <div class="px-4 py-3">
+        <span class="block text-sm text-skin-accent font-bold">{{state?.username}}</span>
+        <span class="block text-sm text-skin-primary-muted truncate">{{state?.roleIdentifier}}</span>
       </div>
-      <button data-collapse-toggle="navbar-user" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-skin-secondary bg-skin-primary rounded-lg md:hidden hover:bg-skin-primary-muted focus:outline-none focus:ring-2 focus:ring-gray-200" aria-controls="navbar-user" aria-expanded="false">
-        <span class="sr-only">Open main menu</span>
-        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
-        </svg>
-    </button>
-  </div>
-  <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
-    <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 rounded-lg bg-skin-primary md:bg-skin-secondary md:space-x-8 md:flex-row md:mt-0 md:border-0 md:bg-skin-fill">
-      <li>
-        <a routerLink="/home" class="block py-2 px-3 rounded text-skin-primary md:text-skin-secondary md:p-0" aria-current="page">Home</a>
-      </li>
-      <li>
-        <a href="#" class="block py-2 px-3 rounded text-skin-primary-muted hover:text-skin-primary md:text-skin-secondary-muted md:hover:text-skin-secondary hover:bg-skin-secondary md:p-0">About</a>
-      </li>
-    </ul>
-  </div>
+      <ul class="p-4" aria-labelledby="user-menu-button">
+        <li>
+          <a href="#" class="block py-2 px-3 rounded text-skin-primary hover:bg-skin-secondary">Einstellungen</a>
+        </li>
+        <li>
+          <button class="w-full block py-2 px-3 rounded text-skin-primary hover:bg-skin-secondary" (click)="logout()">Ausloggen</button>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Navigatoin -->
+    <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
+      <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 rounded-lg bg-skin-primary md:bg-skin-secondary md:space-x-8 md:flex-row md:mt-0 md:border-0 md:bg-skin-fill">
+        <li>
+          <a routerLink="/home" class="block py-2 px-3 rounded text-skin-primary md:p-0" aria-current="page">Home</a>
+        </li>
+        <li>
+          <a href="#" class="block py-2 px-3 rounded text-skin-primary-muted hover:text-skin-primary hover:bg-skin-secondary md:p-0">About</a>
+        </li>
+      </ul>
+    </div>
+
   </div>
 </nav>
diff --git a/src/index.html b/src/index.html
index 4123f0d..87a777a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8,7 +8,7 @@
     <link rel="icon" type="image/x-icon" href="assets/icon.png" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
   </head>
-  <body>
+  <body class="bg-skin-primary">
     <app-root></app-root>
   </body>
 </html>
diff --git a/src/styles.scss b/src/styles.scss
index cfa7bc1..8039647 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -11,10 +11,26 @@
       --color-text-accent: 255, 199, 44;
       --color-text-accent-muted: 255, 199, 44;
 
+      --color-shadow-primary: 100,100,100;
 
       --color-primary: 255, 255, 255;
       --color-secondary: 255, 199, 44;
       --color-accent: 255, 199, 44;
     }
+    .theme-dark {
+      --color-text-primary: 255,255,255;
+      --color-text-primary-muted: 170,170,170;
+      --color-text-secondary: 0,0,0;
+      --color-text-secondary-muted: 100,100,100;
+      --color-text-accent: 250, 183, 0;
+      --color-text-accent-muted: 250, 183, 0;
+      
+      --color-shadow-primary: 170,170,170;
+
+
+      --color-primary: 10, 10, 10;
+      --color-secondary: 250, 183, 0;
+      --color-accent: 250, 183, 0;
+    }
   }
   
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 95fbc3f..56bd5c8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -32,6 +32,11 @@ module.exports = {
           accent: withOpacity('--color-accent'),
         },
       },
+      boxShadowColor: {
+        skin: {
+          primary: withOpacity('--color-shadow-primary'),
+        }
+      }
     },
   },
   plugins: [