diff --git a/src/components/Login.vue b/src/components/Login.vue
index aeebc7c..be3a3b5 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -1,16 +1,16 @@
 <script setup>
 
 import Legal from "./home_components/legal.vue";
-import Sidebar from "./home_components/navigationbar.vue";
-import Contacts from "./home_components/contacts.vue";
+import Login_comp from "./login_components/login_comp.vue";
 </script>
 
 <template>
-  <div id="main" class="bg-weiss flex p-2">
-    <Sidebar></Sidebar>
-    <p class="text-4xl m-60">WIP</p>
-    <div class="w-1/4">
-      <contacts></contacts>
+  <div id="main" class="bg-hintergrund-farbe flex p-2 ">
+    <div class="items-center pr-96 pl-2 pt-5">
+      <img src="../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto">
+    </div>
+      <login_comp></login_comp>
+    <div class="p-5 ">
       <legal></legal>
     </div>
   </div>
diff --git a/src/components/login_components/login_comp.vue b/src/components/login_components/login_comp.vue
new file mode 100644
index 0000000..e096183
--- /dev/null
+++ b/src/components/login_components/login_comp.vue
@@ -0,0 +1,23 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="px-20 border-x border-x-grau2 pb-35p">
+    <div class="text-3xl pt-32">
+      <p class="text-weiss text-center">Welcome to <span class="text-button-farbe">ESP</span>!</p>
+      <p class="text-weiss text-center">Login or create a new Account to continue</p>
+    </div>
+    <div class="px-20 pt-7">
+      <form class="flex flex-col items-center">
+        <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" type="text" placeholder="Username or E-Mail"><br>
+        <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" type="text" placeholder="Password"><br>
+        <button class="m-4 bg-grau-dunkel w-full max-w-xs p-4 text-weiss rounded-lg">Login</button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/login_components/settings.vue b/src/components/login_components/settings.vue
deleted file mode 100644
index f79cdd8..0000000
--- a/src/components/login_components/settings.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/wip.vue b/src/components/wip.vue
index eb3b71b..19452a3 100644
--- a/src/components/wip.vue
+++ b/src/components/wip.vue
@@ -9,9 +9,18 @@ import QuickSearch from "./home_components/quick_search.vue";
 
 <template>
   <div id="main" class="bg-hintergrund-farbe flex">
-    <div id="left" class="w-72">
+    <div id="left" class="w-72 ">
       <navigationbar></navigationbar>
     </div>
+    <div class="border-x border-x-grau2">
+      <label class="text-weiss text-5xl align-middle mx-60 pt-60">This site is currently Work in Progress...</label>
+    </div>
+    <div id="right">
+      <quick-search> </quick-search>
+      <contacts></contacts>
+      <legal></legal>
+    </div>
+
   </div>
 </template>
 
diff --git a/tailwind.config.js b/tailwind.config.js
index e1e488e..5d11f19 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,6 +17,9 @@ export default {
           '500p': '500%',
           '600p': '600%',
         },
+        padding: {
+            '35p':  '30.825%',
+        }
     },
     colors: {
         'logo-farbe-lila': '#5500a2',