diff --git a/index.html b/index.html
index c48ee50..2f31e81 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
     <title>Vite + Vue + TS</title>
     <link rel="stylesheet" href="/src/assets/main.css" />
   </head>
-  <body>
+  <body class="bg-hintergrund-farbe">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
diff --git a/src/assets/icons/other.png b/src/assets/icons/other.png
new file mode 100644
index 0000000..748ba34
Binary files /dev/null and b/src/assets/icons/other.png differ
diff --git a/src/assets/icons/shield.png b/src/assets/icons/shield.png
new file mode 100644
index 0000000..82a4ef1
Binary files /dev/null and b/src/assets/icons/shield.png differ
diff --git a/src/assets/icons/trash.png b/src/assets/icons/trash.png
new file mode 100644
index 0000000..5b829b8
Binary files /dev/null and b/src/assets/icons/trash.png differ
diff --git a/src/components/home_components/navigationbar.vue b/src/components/home_components/navigationbar.vue
index 722163c..7bee2c9 100644
--- a/src/components/home_components/navigationbar.vue
+++ b/src/components/home_components/navigationbar.vue
@@ -1,28 +1,51 @@
 
 <script setup lang="ts">
-// Funktionen um die Seiten zu öffnen
 // home -> app.vue
 // PLACEHOLDER
 import router from "../../router";
+import { ref, onMounted } from 'vue';
 
-const sb_home = () => {
-  console.log("home");
-  router.push("/");
+const componentsStatus = ref({});
+const selected_destination = ref('');
+
+async function loadComponentsStatus() {
+  const response = await fetch('src/components/status.json');
+  componentsStatus.value = await response.json();
 }
-const sb_search = () => {
-  console.log("Search");
-}
-const sb_notifications = () => {
-  console.log("Notifications");
-}
-const sb_messages = () => {
-  console.log("Messages");
-}
-const sb_accounts = () => {
-  console.log("Accounts");
-}
-const sb_settings = () => {
-  console.log("Settings");
+
+onMounted(() => {
+  loadComponentsStatus();
+});
+
+function fun_route(destination: string) {
+  selected_destination.value = destination;
+  if (componentsStatus.value[destination] === 'wip') {
+    router.push("wip");
+  } else {
+    switch (destination) {
+      case "home":
+        router.push("/");
+        break;
+      case "search":
+        router.push("search");
+        break;
+      case "notifications":
+        router.push("notifications");
+        break;
+      case "messages":
+        router.push("messages");
+        break;
+      case "accounts":
+        router.push("accounts");
+        break;
+      case "settings":
+        router.push("settings");
+        break;
+      default:
+        router.push("/");
+        break;
+    }
+  }
 }
 
 </script>
@@ -30,15 +53,15 @@ const sb_settings = () => {
 <template>
   <div class="pt-4 border-b-2 border-b-grau2">
     <div class="items-center flex justify-center"><!-- BILD-->
-      <img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto" @click="sb_home">
+      <img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto" @click="fun_route('home')">
     </div>
-    <div class="align-middle space-y-3 pt-3 pl-3 pb-4 font-bold text-xl"> <!-- Icons (Bild) und Text -->
-      <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 class="align-middle space-y-5 pt-3 pl-3 pb-4 font-bold text-xl"> <!-- Icons (Bild) und Text                                  Damit der Text weiß ist muss zwei mal gedrückt werden manchmal-->
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg" @click="fun_route('home')" :class="{'text-weiss': selected_destination === 'home' || selected_destination === ''}"><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="fun_route('search')" :class="{'text-weiss': selected_destination === '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="fun_route('notifications')" :class="{'text-weiss': selected_destination === '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="fun_route('messages')" :class="{'text-weiss': selected_destination === '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="fun_route('accounts')" :class="{'text-weiss': selected_destination === '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="fun_route('settings')" :class="{'text-weiss': selected_destination === 'settings'}"><img class="pr-2" src="../../assets/icons/zahnrad.png" alt="">Settings</label>
     </div>
   </div>
 </template>
diff --git a/src/components/login_components/login_comp.vue b/src/components/login_components/login_comp.vue
index 32b9dab..ccadea1 100644
--- a/src/components/login_components/login_comp.vue
+++ b/src/components/login_components/login_comp.vue
@@ -1,7 +1,15 @@
 <script setup lang="ts">
-/** *
- * @author Daniel Cwikla
- */
+import router from "../../router";
+
+function login() {
+  // alert("Account deleted. You will be redirected to the login page.");
+  router.push("/");
+}
+
+function handleSubmit(event: Event) {
+  event.preventDefault();
+  login();
+}
 </script>
 
 <template>
@@ -11,7 +19,7 @@
       <p class="text-weiss text-center">Login or create a new Account to continue</p>
     </div>
     <div class="px-20 pt-7"><!--  FORM --->
-      <form class="flex flex-col items-center">
+      <form class="flex flex-col items-center" @submit.prevent="handleSubmit">
         <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>
diff --git a/src/components/notifications.vue b/src/components/notifications.vue
new file mode 100644
index 0000000..a8f057a
--- /dev/null
+++ b/src/components/notifications.vue
@@ -0,0 +1,27 @@
+<script setup>
+import Legal from "./home_components/legal.vue";
+import Navigationbar from "./home_components/navigationbar.vue";
+import Notifi_comp from "./notifications_components/notifi_main.vue";
+import Notif_sidebar from "./notifications_components/notif_sidebar.vue";
+
+</script>
+
+<template>
+  <div class="text-weiss flex">
+    <div id="left" class="border-1 border-b-grau w-72">
+      <navigationbar></navigationbar>
+      <notif_sidebar></notif_sidebar>
+    </div>
+    <div class="w-100p border-x-2 border-x-grau2">
+      <div class="border-b-grau2 border-b-2"> <!-- HEADER - ACCOUNT SETTINGS-->
+        <h1 class="text-weiss text-3xl p-4">Notifications</h1>
+      </div>
+      <notifi_comp></notifi_comp>
+    </div>
+    <legal class="w-1/4"></legal>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/notifications_components/notif_sidebar.vue b/src/components/notifications_components/notif_sidebar.vue
new file mode 100644
index 0000000..57cac19
--- /dev/null
+++ b/src/components/notifications_components/notif_sidebar.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps({
+  selectedNotification: String
+});
+
+const selectedNotification = ref('');
+
+function handleUpdateNotification(setting: string) {
+  selectedNotification.value = setting;
+}
+
+</script>
+
+<template>
+<div class="flex flex-col align-middle space-y-5 pt-3 pl-3 pb-4 font-bold text-xl text-grau2">
+  <label>All</label>
+  <label>You Following</label>
+  <label>Messages</label>
+  <label>Other</label>
+</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/notifications_components/notifi_main.vue b/src/components/notifications_components/notifi_main.vue
new file mode 100644
index 0000000..1ea34cf
--- /dev/null
+++ b/src/components/notifications_components/notifi_main.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import {ref} from "vue";
+
+const selectedNotification = ref('');
+
+// Aktualisieren der ausgewählten Einstellung
+function handleUpdateNotification(setting: string) {
+  selectedNotification.value = setting;
+  console.log(`Setting got (NA): ${setting}`);
+}
+</script>
+
+<template>
+<div>
+  <div>
+    MOIN1
+  </div>
+</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/settings.vue b/src/components/settings.vue
new file mode 100644
index 0000000..8b3a588
--- /dev/null
+++ b/src/components/settings.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import Legal from "./home_components/legal.vue";
+import Settings_sidebar from "./settings_components/settings_sidebar.vue";
+import Settings_navbar from "./settings_components/settings_navbar.vue";
+import Settings_main from "./settings_components/settings_main.vue";
+import Navigationbar from "./home_components/navigationbar.vue";
+
+const selectedSetting = ref('');
+
+// Aktualisieren der ausgewählten Einstellung
+function handleUpdateSetting(setting: string) {
+  selectedSetting.value = setting;
+  console.log(`Setting got (S): ${setting}`);
+}
+</script>
+
+<template>
+  <div id="main" class="bg-hintergrund-farbe flex">
+    <div id="left" class="border-1 border-b-grau w-72">
+      <navigationbar></navigationbar>
+      <settings_sidebar @updateSetting="handleUpdateSetting"></settings_sidebar>
+    </div>
+    <div class="w-100p">
+      <settings_main :selectedSetting="selectedSetting"></settings_main>
+    </div>
+    <div class="w-1/4">
+      <legal></legal>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/components/settings_components/sa_account-information_comp.vue b/src/components/settings_components/sa_account-information_comp.vue
new file mode 100644
index 0000000..7537920
--- /dev/null
+++ b/src/components/settings_components/sa_account-information_comp.vue
@@ -0,0 +1,33 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="space-y-2 pl-2">
+    <p class="text-2xl text-weiss pt-2 items-center flex justify-center">danielvici (USERNAME)</p>
+    <div>
+      <a class="text-lg text-weiss">Displayname</a><br>
+      <a class="text-grau2">danielvici123</a>
+    </div>
+    <div>
+      <a class="text-lg text-weiss">Email</a><br>
+      <a class="text-grau2">email@e.mail</a>
+    </div>
+    <div>
+      <a class="text-lg text-weiss">firstname</a><br>
+      <a class="text-grau2">daniel</a>
+    </div>
+    <div>
+      <a class="text-lg text-weiss">lastname</a><br>
+      <a class="text-grau2">vici</a>
+    </div>
+    <div>
+      <a class="text-lg text-weiss">phone</a><br>
+      <a class="text-grau2">123</a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/settings_components/sa_delete_account.vue b/src/components/settings_components/sa_delete_account.vue
new file mode 100644
index 0000000..18ed0f6
--- /dev/null
+++ b/src/components/settings_components/sa_delete_account.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import router from "../../router";
+
+function deleteAccount() {
+  // alert("Account deleted. You will be redirected to the login page.");
+  router.push("/login");
+}
+
+function handleSubmit(event: Event) {
+  event.preventDefault();
+  deleteAccount();
+}
+</script>
+
+<template>
+  <div class="flex-col flex items-center justify-center">
+    <div> <!-- HEADER -->
+      <h1 class="text-weiß text-2xl p-4">Delete Account</h1>
+    </div>
+    <div>
+      <form class="flex flex-col space-y-4 p-4" @submit.prevent="handleSubmit">
+        <div class="flex flex-col space-y-2 items-center justify-center">
+          <input type="password" name="password" id="password" placeholder="Password" required class="m-2 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg">
+        </div>
+        <div>
+          <input type="checkbox" name="verification" id="verification" required class="">
+          <label for="verification" class="p-4">I agree that my account will be deleted permanently.</label>
+        </div>
+        <button type="submit" class="bg-logo-farbe-rot text-schwarz text-xl font-bold p-4 mt-8 rounded-lg">Delete Account</button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/settings_components/sa_reset_password.vue b/src/components/settings_components/sa_reset_password.vue
new file mode 100644
index 0000000..de4c330
--- /dev/null
+++ b/src/components/settings_components/sa_reset_password.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import router from "../../router";
+
+function reset_password() {
+  // alert("Account deleted. You will be redirected to the login page.");
+  router.push("/");
+}
+
+function handleSubmit(event: Event) {
+  event.preventDefault();
+  reset_password();
+}
+</script>
+
+<template>
+<div>
+  <div> <!--HEADER-->
+    <h1 class="text-weiss text-2xl p-3 items-center flex justify-center">Reset Password</h1>
+  </div>
+  <div>
+    <form class="flex flex-col space-y-4 p-4" @submit.prevent="handleSubmit">
+      <div class="flex flex-col space-y-2">
+        <input type="password" name="old-password" id="old-password" placeholder="Old Password" class="m-2 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg invalid:border-logo-farbe-rot invalid:border-2">
+      </div>
+      <div class="flex flex-col space-y-2">
+        <input type="password" name="new-password" id="new-password" placeholder="New Passoword" class="m-2 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg invalid:border-logo-farbe-rot invalid:border-2">
+      </div>
+      <div class="flex flex-col space-y-2">
+        <input type="password" name="new-password-repeat" id="new-password-repeat" placeholder=" Repeat new passoword" class="mt-4 m-2 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg invalid:border-logo-farbe-rot invalid:border-2">
+      </div>
+      <button type="submit" class="bg-button-farbe text-schwarz text-xl font-bold p-4 mt-8 rounded-lg">Change Password</button>
+      <label class="text-logo-farbe-rot text-2xl">! INFO: PASSWÖRTER WIRD IN URLBAR ANGEZEIGT !</label>
+    </form>
+  </div>
+</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/settings_components/settings_account.vue b/src/components/settings_components/settings_account.vue
new file mode 100644
index 0000000..a2a5f62
--- /dev/null
+++ b/src/components/settings_components/settings_account.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import {defineEmits, ref} from 'vue';
+
+const emit = defineEmits(['updateAccountSetting']);
+const selectedSetting = ref('');
+
+function updateAccountSetting(setting: string) {
+  emit('updateAccountSetting', setting);
+  selectedSetting.value = setting;
+  console.log(`Setting selected (SA): ${setting}`);
+}
+</script>
+
+<template>
+  <div class="border-x border-x-grau2 "> <!-- MAIN DIV -->
+    <div class="flex flex-col text-xl pl-4 pt-5 pr-4 space-y-5 text-grau2"> <!-- BODY -->
+      <label @click="updateAccountSetting('sa_account-information')" :class="{'text-weiss': selectedSetting === 'sa_account-information' || selectedSetting === ''}">Account Information</label>
+      <label @click="updateAccountSetting('sa_reset-password')" :class="{'text-weiss': selectedSetting === 'sa_reset-password'}">Reset Password</label>
+      <label @click="updateAccountSetting('sa_delete-account')" :class="{'text-weiss': selectedSetting === 'sa_delete-account'}">Delete Account</label>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/components/settings_components/settings_account_main.vue b/src/components/settings_components/settings_account_main.vue
new file mode 100644
index 0000000..acd58e4
--- /dev/null
+++ b/src/components/settings_components/settings_account_main.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import {defineProps, ref} from 'vue';
+import Sa_accountInformation_comp from "./sa_account-information_comp.vue";
+import Sa_reset_password from "./sa_reset_password.vue";
+import Sa_delete_account from "./sa_delete_account.vue";
+
+const props2 = defineProps({
+  selectedAccountSetting: String
+});
+
+console.log(`Setting got (SAM): ${props2.selectedAccountSetting}`);
+</script>
+
+<template>
+  <div class="border-x-2 border-x-grau2"> <!-- MAIN DIV -->
+    <div v-if="props2.selectedAccountSetting === 'sa_account-information'">
+      <sa_account-information_comp></sa_account-information_comp>
+    </div>
+    <div v-else-if="props2.selectedAccountSetting === 'sa_reset-password'">
+      <sa_reset_password></sa_reset_password>
+    </div>
+    <div v-else-if="props2.selectedAccountSetting === 'sa_delete-account'">
+      <sa_delete_account></sa_delete_account>
+    </div>
+    <div v-else>
+      <sa_account-information_comp></sa_account-information_comp>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/components/settings_components/settings_main.vue b/src/components/settings_components/settings_main.vue
new file mode 100644
index 0000000..5a75089
--- /dev/null
+++ b/src/components/settings_components/settings_main.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import Settings_account from "./settings_account.vue";
+import Settings_account_main from "./settings_account_main.vue";
+
+const props = defineProps({
+  selectedSetting: String
+});
+
+const selectedAccountSetting = ref('');
+
+function handleUpdateAccountSetting(setting: string) {
+  selectedAccountSetting.value = setting;
+}
+
+console.log(`Setting got (SM): ${props.selectedSetting}`);
+</script>
+
+<template>
+  <div class="text-weiss">
+    <div v-if="props.selectedSetting === 'setting_account'" class=""> <!-- ACCOUNT SETTINGS-->
+      <div class="border-x-grau2 border-x-2 border-b-grau2 border-b-2"> <!-- HEADER - ACCOUNT SETTINGS-->
+        <h1 class="text-weiss text-3xl p-4">Account Settings</h1>
+      </div>
+      <div class="flex flex-row content-center justify-center autofill:"> <!-- BODY - ACCOUNT SETTINGS-->
+        <settings_account class="basis-1/2" @updateAccountSetting="handleUpdateAccountSetting"></settings_account>
+        <settings_account_main class="basis-1/2" :selectedAccountSetting="selectedAccountSetting"></settings_account_main>
+      </div>
+    </div>
+
+
+
+
+    <div v-else-if="props.selectedSetting === 'setting_privacy'"> <!-- PRIVACY AND SAFTEY-->
+      <div class="border-x-grau2 border-x-2 border-b-grau2 border-b-2"> <!-- HEADER PRIVACY-->
+        <h1 class="text-weiss text-3xl p-4">Privacy and Saftey</h1>
+      </div>
+      <div> <!-- BODY - ACCOUNT SETTINGS-->
+        <label>MOIN1</label>
+      </div>
+    </div>
+
+
+
+
+    <div v-else-if="props.selectedSetting === 'setting_messages'"> <!-- MESSAGES-->
+      <label>MOIN2</label>
+    </div>
+
+    <div v-else-if="props.selectedSetting === 'setting_other'"> <!-- OTHER -->
+      <label>MOIN4</label>
+    </div>
+
+
+    <div v-else-if="props.selectedSetting === undefined"> <!-- IF NOTHING SELECTED-->
+      <label>Select a Setting in the Sidebar</label>
+    </div>
+
+    <div v-else-if="props.selectedSetting === ''"> <!-- IF NOTHING SELECTED-->
+      <div class="border-x-grau2 border-x-2 border-b-grau2 border-b-2"> <!-- HEADER - ACCOUNT SETTINGS-->
+        <h1 class="text-weiss text-3xl p-4">Account Settings</h1>
+      </div>
+      <div class="flex flex-row content-center justify-center autofill:"> <!-- BODY - ACCOUNT SETTINGS-->
+        <settings_account class="basis-1/2" @updateAccountSetting="handleUpdateAccountSetting"></settings_account>
+        <settings_account_main class="basis-1/2" :selectedAccountSetting="selectedAccountSetting"></settings_account_main>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/components/settings_components/settings_navbar.vue b/src/components/settings_components/settings_navbar.vue
new file mode 100644
index 0000000..96afbea
--- /dev/null
+++ b/src/components/settings_components/settings_navbar.vue
@@ -0,0 +1,69 @@
+
+<script setup lang="ts">
+// Funktionen um die Seiten zu öffnen
+// home -> app.vue
+import router from "../../router";
+import { ref, onMounted } from 'vue';
+
+const componentsStatus = ref({});
+
+async function loadComponentsStatus() {
+  const response = await fetch('src/components/status.json');
+  componentsStatus.value = await response.json();
+}
+
+onMounted(() => {
+  loadComponentsStatus();
+});
+
+function fun_route(destination: string) {
+  if (componentsStatus.value[destination] === 'wip') {
+    router.push("wip");
+  } else {
+    switch (destination) {
+      case "home":
+        router.push("/");
+        break;
+      case "search":
+        router.push("search");
+        break;
+      case "notifications_components":
+        router.push("notifications_components");
+        break;
+      case "messages":
+        router.push("messages");
+        break;
+      case "accounts":
+        router.push("accounts");
+        break;
+      case "settings":
+        router.push("settings");
+        break;
+      default:
+        router.push("/");
+        break;
+    }
+  }
+}
+</script>
+
+<template>
+  <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" @click="fun_route('home')">
+    </div>
+    <div class="align-middle space-y-5 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" @click="fun_route('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="fun_route('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="fun_route('notifications_components')"><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="fun_route('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="fun_route('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="fun_route('settings')"><img class="pr-2" src="../../assets/icons/zahnrad.png" alt="">Settings</label>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
+
diff --git a/src/components/settings_components/settings_sidebar.vue b/src/components/settings_components/settings_sidebar.vue
new file mode 100644
index 0000000..c6e20ff
--- /dev/null
+++ b/src/components/settings_components/settings_sidebar.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { defineEmits } from 'vue';
+import { ref } from 'vue';
+
+const emit = defineEmits(['updateSetting']);
+const selectedSetting = ref('');
+
+function updateSetting(setting: string) {
+  selectedSetting.value = setting;
+  emit('updateSetting', setting);
+  console.log(`Setting selected (SS): ${setting}`);
+}
+</script>
+
+<template>
+  <div class="text-grau2 font-bold space-y-4 pl-2 pt-5">
+    <label class="flex text-center shadow-2xl rounded-lg" :class="{'text-weiss': selectedSetting === 'setting_account' || selectedSetting === ''}" @click="updateSetting('setting_account')"><img class="pr-2" src="../../assets/icons/user.png" alt=""> Account</label>
+    <label class="flex text-center shadow-2xl rounded-lg" :class="{'text-weiss': selectedSetting === 'setting_privacy'}" @click="updateSetting('setting_privacy')"><img class="pr-2" src="../../assets/icons/shield.png" alt=""> Privacy and Saftey</label>
+    <label class="flex text-center shadow-2xl rounded-lg" :class="{'text-weiss': selectedSetting === 'setting_message'}" @click="updateSetting('setting_messages')"><img class="pr-2" src="../../assets/icons/mail.png" alt=""> Messages</label>
+    <label class="flex text-center shadow-2xl rounded-lg" :class="{'text-weiss': selectedSetting === 'setting_other'}" @click="updateSetting('setting_other')"><img class="pr-2" src="../../assets/icons/other.png" alt=""> Other</label>
+  </div>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/components/status.json b/src/components/status.json
new file mode 100644
index 0000000..4a48ab4
--- /dev/null
+++ b/src/components/status.json
@@ -0,0 +1,8 @@
+{
+  "home": "completed",
+  "search": "wip",
+  "notifications": "testing",
+  "messages": "wip",
+  "accounts": "wip",
+  "settings": "testing"
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index 75f6c1c..e9c22b3 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -6,6 +6,8 @@ import { createRouter, createWebHistory } from "vue-router";
 import Home from "../components/Home.vue";
 import Login from "../components/Login.vue";
 import wip from "../components/wip.vue";
+import settings from "../components/settings.vue";
+import nottifications from "../components/notifications.vue";
 // The routing does not happen automatically
 // Each route has to be defined here, or it wont work.
 const routes = [
@@ -24,6 +26,16 @@ const routes = [
         name: "Work in Progress",
         component: wip,
     },
+    {
+        path: "/settings",
+        name: "Settings",
+        component: settings,
+    },
+    {
+        path: "/notifications",
+        name: "Notifications",
+        component: nottifications,
+    }
 ]
 
 const router = createRouter({
