diff --git a/README.md b/README.md
index 73043bb..50f6a1f 100644
--- a/README.md
+++ b/README.md
@@ -58,8 +58,12 @@ $ deno task build
 </ul>
 
 ## Tools used
+
+
+
 <ul>
     <li><a href="https://www.jetbrains.com/webstorm/"><img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/WebStorm_Icon.svg" width="20" height="20"> JetBrains WebStorm</a></li>
+    <li><a href="https://www.jetbrains.com/datagrip/"><img src="https://seeklogo.com/images/D/datagrip-logo-295CA63255-seeklogo.com.png" width="20" height="20"> JetBrains DataGrip</a></li>
     <li><a href="https://neovim.io/"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Neovim-mark-flat.svg/640px-Neovim-mark-flat.svg.png" width="20" height="20"> Neovim</a></li>
 </ul>
 
diff --git a/src/components/Home.vue b/src/components/Home.vue
index faa3f8b..5c7ed61 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -4,6 +4,7 @@ import Contacts from "./home_components/contacts.vue";
 import Legal from "./home_components/legal.vue";
 import Navigationbar from "./home_components/navigationbar.vue";
 import Trending from "./home_components/trending.vue";
+import QuickSearch from "./home_components/quick_search.vue";
 </script>
 
 
@@ -17,6 +18,7 @@ import Trending from "./home_components/trending.vue";
       <feed></feed>
     </div>
     <div class="w-1/4">
+      <quick-search></quick-search>
       <contacts></contacts>
       <legal></legal>
     </div>
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/home_components/contacts.vue b/src/components/home_components/contacts.vue
index 4379838..4be5ea1 100644
--- a/src/components/home_components/contacts.vue
+++ b/src/components/home_components/contacts.vue
@@ -7,18 +7,18 @@ const contacts =[
 </script>
 
 <template>
-  <div class="p-2"> <!--MAIN-->
-    <div class="bg-grau-hell rounded-lg"> <!--HEADER-->
-      <h2 class="align-middle m-2 text-xl p-1">Contacts</h2>
+  <div class="p-2 border-b-2 border-b-grau2"> <!--MAIN-->
+    <div> <!--HEADER-->
+      <h2 class="align-middle m-2 text-xl p-1 pb-4 text-weiss">Contacts</h2>
     </div>
     <div> <!--CONTENT-->
       <ul class="space-y-1">
-        <li v-for="(contact) in contacts" :key="contact" class="bg-grau-hell2 flex rounded-lg">
+        <li v-for="(contact) in contacts" :key="contact" class="flex rounded-lg">
           <!--CONTACT-->
-          <img src="../../assets/default_pp.png" alt="" class="w-16 h-16 mr-2">
+          <img src="../../assets/default_pp.png" alt="" class="w-12 h-12 mr-2">
           <div class="">
-            <label class="text-lg font-bold m-1" >{{ contact.display_name }}</label><br>
-            <p class="text-base m-1 text-logo-farbe-blau underline-offset-3">@{{ contact.username }}</p>
+            <label class=" font-bold m-1 text-weiss">{{ contact.display_name }}</label><br>
+            <p class="text-base m-1 text-grau2 underline-offset-3">@{{ contact.username }}</p>
           </div>
         </li>
       </ul>
diff --git a/src/components/home_components/feed.vue b/src/components/home_components/feed.vue
index 24f8085..8542177 100644
--- a/src/components/home_components/feed.vue
+++ b/src/components/home_components/feed.vue
@@ -61,9 +61,10 @@
 <template>
   <div class="border-x-2 border-x-grau2"> <!-- MAIN -->
     <div> <!-- FEED HEADER -->
-      <h2 class="align-middle p-2 text-xl font-bold text-grau2 border-b-grau2 border-b ">Feed</h2>
-      <div class="flex border-2 border-b-grau2"> <!-- POSTING-->
-        <img src="../../assets/danielvici_pp.png" alt="" class="p-2 rounded-xl w-16 h-16">
+      <h2 class="align-middle p-6 text-xl font-bold text-grau2 border-b-grau2 border-b ">Feed</h2>
+      <!-- POSTING-->
+      <div class="flex border-2 border-b-grau2">
+        <img src="../../assets/danielvici_pp.png" alt="" class="p-2 rounded-full w-16 h-16">
         <form>
           <!-- post_publish ist richtig aber wird falsch angezeigt. File Input geht nicht-->
           <textarea v-model="post_publish" name="post_text" class="bg-hintergrund-farbe rounded-lg m-2 p-1 focus:outline-none text-grau2 w-200p resize-none" rows="3" placeholder="Write something..."></textarea>
@@ -78,27 +79,27 @@
 
     <div> <!-- CONTENT -->
       <ul>
-        <li v-for="(postitem, indexus) in post" :key="post" class="border border-b-grau-hell rounded-lg p-1 m-2 bg-grau-hell2 flex">
+        <li v-for="(postitem, indexus) in post" :key="post" class="border-2 border-b-grau2 p-3 flex">
           <!-- POST -->
-          <img src="../../assets/danielvici_pp.png" alt="" class="w-16 h-16">
+          <img src="../../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
           <div>
             <div> <!-- POST HEADER -->
-              <label class="text-lg font-bold m-1">{{postitem.author_display_name}}</label>
-              <label class="text-base m-1 text-logo-farbe-blau underline-offset-3">@{{ postitem.author_username }}</label>
+              <label class="text-lg font-bold m-1 text-weiss">{{postitem.author_display_name}}</label>
+              <label class="text-base m-1 underline-offset-3 text-grau2">@{{ postitem.author_username }}</label>
             </div>
             <div class="m-2"> <!-- POST CONTENT -->
-              <p class="text-sm m-1">{{ postitem.content }}</p>
+              <p class="text-sm m-1 text-weiss">{{ postitem.content }}</p>
             </div>
             <div class="flex"> <!-- POST FOOTER -->
               <div class="flex"> <!-- Comments -->
-                <img src="../../assets/icons/comment.png" alt="" class="align-middle">
-                <label class="text-sm m-1" v-if="postitem.comments_count != undefined">{{ postitem.comments_count }}</label>
-                <label class="text-sm m-1" v-else>Comments disabled</label>
+                <img src="../../assets/icons/comment.png" alt="" class="rounded-full align-middle">
+                <label class="text-sm m-1 text-weiss" v-if="postitem.comments_count != undefined">{{ postitem.comments_count }}</label>
+                <label class="text-sm m-1 text-weiss" v-else>Comments disabled</label>
               </div>
 
               <div class="flex items-center" @click="addLike(indexus)"> <!-- Likes -->
                 <img alt="" src="../../assets/icons/herz.png" class="align-middle">
-                <label class="text-sm m-1">{{ postitem.likes }}</label>
+                <label class="text-sm m-1 text-weiss">{{ postitem.likes }}</label>
               </div><!-- ENDE -->
             </div>
           </div>
diff --git a/src/components/home_components/legal.vue b/src/components/home_components/legal.vue
index 73027b9..627ab85 100644
--- a/src/components/home_components/legal.vue
+++ b/src/components/home_components/legal.vue
@@ -3,17 +3,17 @@
 </script>
 
 <template>
-<label class="text-grau2 m-2">
-  <a href="">Terms of Service</a>
-  -
-  <a href="">Privacy Policy</a>
-  -
-  <a href="">Imprint</a><br>
-  -
-  <a href="">Contact</a>
-  -
-  <a href="">Support</a>
-</label>
+  <div class="text-grau2 p-3">
+    <a href="">Terms of Service</a>
+    -
+    <a href="">Privacy Policy</a><br>
+
+    <a href="">Imprint</a>
+    -
+    <a href="">Contact</a>
+    -
+    <a href="">Support</a>
+  </div>
 </template>
 
 <style scoped>
diff --git a/src/components/home_components/navigationbar.vue b/src/components/home_components/navigationbar.vue
index 620c994..345274e 100644
--- a/src/components/home_components/navigationbar.vue
+++ b/src/components/home_components/navigationbar.vue
@@ -6,6 +6,7 @@ import router from "../../router";
 
 const sb_home = () => {
   console.log("home");
+  router.push("/");
 }
 const sb_search = () => {
   console.log("Search");
@@ -26,17 +27,17 @@ const sb_settings = () => {
 </script>
 
 <template>
-  <div class="pt-4 border-2 border-b-grau2">
+  <div class="pt-4 border-b-2 border-b-grau2">
     <div class="items-center flex justify-center">
-      <img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto">
+      <img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto" @click="sb_home">
     </div>
     <div class="align-middle space-y-3 pt-3 pl-3 pb-4 font-bold text-xl">
-      <label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg"><img  class="pr-2" src="../../assets/icons/home.png" alt="" v-on:click="sb_home"> Home</label>
-      <label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg"><img class="pr-2" src="../../assets/icons/lupe.png" alt=""  v-on:click="sb_search">Search</label>
-      <label class="flex text-center text-grau2 hover:bg-logo-farbe-rot shadow-2xl rounded-lg"><img class="pr-2" src="../../assets/icons/glocke.png" alt="" v-on:click="sb_notifications">Notifications</label>
-      <label class="flex text-center text-grau2 hover:bg-logo-farbe-rot shadow-2xl rounded-lg"><img class="pr-2" src="../../assets/icons/mail.png" alt="" v-on:click="sb_messages">Messages</label>
-      <label class="flex text-center text-grau2 hover:bg-logo-farbe-blau shadow-2xl rounded-lg"><img class="pr-2" src="../../assets/icons/user.png" alt="" v-on:click="sb_accounts">Profile</label>
-      <label class="flex text-center text-grau2 hover:bg-logo-farbe-blau shadow-2xl rounded-lg"><img class="pr-2" src="../../assets/icons/zahnrad.png" alt="" v-on:click="sb_settings">Settings</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg" @click="sb_home"><img  class="pr-2" src="../../assets/icons/home.png" alt=""> Home</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg" @click="sb_search"><img class="pr-2" src="../../assets/icons/lupe.png" alt="">Search</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-rot shadow-2xl rounded-lg" @click="sb_notifications"><img class="pr-2" src="../../assets/icons/glocke.png" alt="">Notifications</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-rot shadow-2xl rounded-lg" @click="sb_messages"><img class="pr-2" src="../../assets/icons/mail.png" alt="">Messages</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-blau shadow-2xl rounded-lg" @click="sb_accounts"><img class="pr-2" src="../../assets/icons/user.png" alt="">Profile</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-blau shadow-2xl rounded-lg" @click="sb_settings"><img class="pr-2" src="../../assets/icons/zahnrad.png" alt="">Settings</label>
     </div>
   </div>
 </template>
diff --git a/src/components/home_components/quick_search.vue b/src/components/home_components/quick_search.vue
new file mode 100644
index 0000000..d457d36
--- /dev/null
+++ b/src/components/home_components/quick_search.vue
@@ -0,0 +1,16 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="flex p-4 border-b-2 border-b-grau2 ">
+    <div class="w-12">
+      <img class="p-2 bg-grau rounded-l-lg" src="../../assets/icons/lupe.png" alt="">
+    </div>
+    <input type="text" class="bg-grau rounded-r-lg focus:outline-none text-weiss" placeholder="Search...">
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
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
new file mode 100644
index 0000000..19452a3
--- /dev/null
+++ b/src/components/wip.vue
@@ -0,0 +1,29 @@
+<script setup>
+import Navigationbar from "./home_components/navigationbar.vue";
+import Feed from "./home_components/feed.vue";
+import Contacts from "./home_components/contacts.vue";
+import Legal from "./home_components/legal.vue";
+import Trending from "./home_components/trending.vue";
+import QuickSearch from "./home_components/quick_search.vue";
+</script>
+
+<template>
+  <div id="main" class="bg-hintergrund-farbe flex">
+    <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>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 2c63d4b..96aaa60 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,6 +5,7 @@ import { createRouter, createWebHistory } from "vue-router";
 // at these URL's.
 import Home from "../components/Home.vue";
 import Login from "../components/Login.vue";
+import wip from "../components/wip.vue";
 
 // The routing does not happen automatically
 // Each route has to be defined here, or it wont work.
@@ -18,7 +19,12 @@ const routes = [
         path: "/login",
         name: "login",
         component: Login,
-    }
+    },
+    {
+        path: "/wip",
+        name: "Work in Progress",
+        component: wip,
+    },
 ]
 
 const router = createRouter({
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',