diff --git a/app.config.ts b/app.config.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/app.vue b/app.vue
index a495b75..7dcf60c 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,22 @@
-<template>
+<!--<template>
   <div>
     <NuxtWelcome />
   </div>
+</template>-->
+
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>
+
+<script>
+  //import Page from "./layouts/Page"
+
+  /*definePageMeta({
+  layout: 'Page'
+  })*/
+
+//const layout = "Page";
+
+</script>
diff --git a/layouts/Actionbar.vue b/layouts/Actionbar.vue
new file mode 100644
index 0000000..414087c
--- /dev/null
+++ b/layouts/Actionbar.vue
@@ -0,0 +1,5 @@
+<template>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </template>
\ No newline at end of file
diff --git a/layouts/Navigationbar.vue b/layouts/Navigationbar.vue
new file mode 100644
index 0000000..e16773e
--- /dev/null
+++ b/layouts/Navigationbar.vue
@@ -0,0 +1,180 @@
+<template>
+    <section class="sidebar">
+      <div class="toggle">
+        <div class="icon"  id="back-icon">
+          <img loading="lazy" src="../icons/Back-Icon.svg"/>
+        </div>
+        <div class="icon" id="indicator-icon">
+          <img loading="lazy" src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg"/>
+        </div>
+      </div>
+      <div class="menus">
+        <nav id="home-menu">
+          <button id="home-button">
+            <div class="icon" id="home-icon">
+              <img loading="lazy" src="../icons/navbar-icons/Home-Icon.svg"/>
+            </div>
+            <pre class="label">Home</pre>
+          </button>
+        </nav>
+        <nav id="site-menu">
+          <button id="checklists-button">
+            <div class="icon" id="checklists-icon">
+              <img loading="lazy" src="../icons/navbar-icons/Checklists-Icon.svg"/>
+              </div>
+            <pre class="label">Checklists</pre>
+          </button>
+          <button id="assets-button">
+            <div class="icon" id="assets-icon">
+              <img loading="lazy" src="../icons/navbar-icons/Assets-Icon.svg"/>
+            </div>
+            <pre class="label">Config Items</pre>
+          </button>
+          <button id="solutions-button">
+            <div class="icon" id="solutions-icon">
+              <img loading="lazy" src="../icons/navbar-icons/Solutions-Icon.svg"/>
+            </div>
+            <pre class="label">Solutions</pre>
+          </button>
+          <button id="accounting-button">
+            <div class="icon" id="accounting-icon">
+              <img loading="lazy" src="../icons/navbar-icons/Accounting-Icon.svg"/>
+            </div>
+            <pre class="label">Accounting</pre>
+          </button>
+          <button id="clients-button">
+            <div class="icon" id="clients-icon">
+              <img loading="lazy" src="../icons/navbar-icons/Clients-Icon.svg"/>
+            </div>
+            <pre class="label">Clients</pre>
+          </button>
+        </nav>
+      </div>
+    </section>
+</template>
+
+
+
+<script>
+
+export default {
+    name: "Navigationbar",
+}
+
+</script>
+  
+  
+  
+<style>
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .sidebar {
+    align-items: flex-start;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    background-color: #2c2c2c;
+    width: 200px;
+    display: flex;
+    flex-direction: column;
+    border-radius: 10px;
+    gap: 10px;
+    padding: 10px;
+  }
+
+
+  .toggle {
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+    display: flex;
+    height: 40px;
+    padding: 10px;
+  }
+  
+
+
+  .menus {
+    align-items: flex-start;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    padding: 40px 0;
+    gap: 30px;
+  }
+
+  nav {
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    gap: 30px;
+  }
+  #home-menu {
+    border-bottom: 1px solid #8e8e8e;
+  }
+
+  
+  button {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    justify-content: flex-start;
+    height: 35px;
+    border: none;
+    border-radius: 5px;
+    padding: 5px;
+    gap: 10px;
+    background-color: #2c2c2c;
+    transition-duration: 0.5s;
+  }
+  button:hover {
+    background-color: #444444;
+  }
+
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 25px;
+    height: 25px;
+  }
+  #indicator-icon, #back-icon {
+    width: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background-color: #2c2c2c;
+    transition-duration: 0.5s;
+  }
+  #indicator-icon:hover, #back-icon:hover {
+    width: 30px;
+    height: 30px;
+    background-color: #444444;
+  }
+
+  .icon > img {
+    width: 20px;
+    height: 20px;
+    filter: invert(100%);
+    object-fit: contain;
+    object-position: center;
+    overflow: hidden;
+  }
+
+  
+  .label {
+    color: #fff;
+    /*leading-trim: both;
+    text-edge: cap;*/
+    letter-spacing: 0.7px;
+    align-self: center;
+    white-space: nowrap;
+    margin: auto 0;
+    font: 700 14px/20px Overpass, sans-serif;
+  }
+
+</style>
\ No newline at end of file
diff --git a/layouts/PageHeader.vue b/layouts/PageHeader.vue
new file mode 100644
index 0000000..f20c06f
--- /dev/null
+++ b/layouts/PageHeader.vue
@@ -0,0 +1,74 @@
+<template>
+    <header>
+        <img id="header-logo"
+            loading="lazy" src="../tüit-logo.svg.png" />
+        <div class="profile">
+            <div class="username">username</div>
+            <div class="picture">
+                <img id="picture"
+                    loading="lazy" src="" />
+            </div>
+        </div>
+    </header>
+</template>
+
+
+<script>
+
+export default {
+    name: "PageHeader",
+}
+
+</script>
+
+
+<style>
+
+    * {
+        box-sizing: border-box;
+    }
+
+    header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        align-self: stretch;
+        border-bottom: 1px solid #000;
+        background-color: #2c2c2c;
+        height: 60px;
+        padding: 10px 20px;
+    }
+    
+    #header-logo {
+        object-fit: contain;
+        object-position: center;
+        width: 80px;
+        height: 40px;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+    }
+
+    .profile {
+        align-items: flex-end;
+        display: flex;
+        gap: 10px;
+        padding: 0 30px;
+    }
+    .username {
+        color: #fff;
+        text-align: right;
+        letter-spacing: 0.8px;
+        align-self: center;
+        margin: auto 0;
+        font: 200 14px Overpass, sans-serif;
+    }
+    .picture {
+        display: flex;
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
+        background-color: #fff;
+    }
+
+</style>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
new file mode 100644
index 0000000..7071876
--- /dev/null
+++ b/layouts/default.vue
@@ -0,0 +1,101 @@
+<template>
+  <body>
+    <PageHeader />
+    <main>
+      <Navigationbar />
+      <section id="content">
+        <section id="content-header">
+          <pre id="page-name">Pagename</pre>
+        </section>
+        <section id="content-body">
+          <!--<slot />-->
+        </section>
+      </section>
+    </main>
+  </body>
+</template>
+
+
+<script>
+import PageHeader from "./PageHeader.vue";
+import Navigationbar from "./Navigationbar.vue";
+
+export default {
+    name: "Page",
+    components: {
+      PageHeader, 
+      Navigationbar,
+    }
+}
+
+</script>
+  
+  
+  
+<style>
+
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    align-content: stretch;
+    background-color: #212121;
+  }
+  
+  main {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    gap: 10px;
+    padding: 10px;
+  }
+  
+  #content {
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    align-items: stretch;
+    width: 100%;
+    gap: 10px;
+    padding: 0 20px;
+  }
+  
+  #content-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 50px;
+  }
+  #page-name {
+    color: #fff;
+    letter-spacing: 1.2px;
+    font: italic 400 24px/125% Overpass, -apple-system, Roboto, Helvetica,
+      sans-serif;
+  }
+
+  #content-body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 20px;
+    margin-bottom: 10px;
+    border-radius: 10px;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    background-color: #2c2c2c;
+  }
+
+  slot {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 20px;
+    padding: 20px 30px;
+  }
+  
+</style>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 4ea4492..9e6bb04 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,9 @@
     "": {
       "name": "nuxt-app",
       "hasInstallScript": true,
+      "dependencies": {
+        "leading-trim": "^1.0.2"
+      },
       "devDependencies": {
         "@nuxt/devtools": "latest",
         "nuxt": "^3.8.0",
@@ -5521,6 +5524,14 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/leading-trim": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/leading-trim/-/leading-trim-1.0.2.tgz",
+      "integrity": "sha512-UEzrceHMHYmp1TUfAQsBQcW06rOVNtyOD+APKIosqTZh+KIq21xJXr5q/HGLuCR34Ugjk8m2yYZN4BYepMK14w==",
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
diff --git a/package.json b/package.json
index 24d41e1..330c557 100644
--- a/package.json
+++ b/package.json
@@ -14,5 +14,8 @@
     "nuxt": "^3.8.0",
     "vue": "^3.3.7",
     "vue-router": "^4.2.5"
+  },
+  "dependencies": {
+    "leading-trim": "^1.0.2"
   }
 }
diff --git a/pages/index.vue b/pages/index.vue
new file mode 100644
index 0000000..a31a60d
--- /dev/null
+++ b/pages/index.vue
@@ -0,0 +1,29 @@
+<template>
+    <head>
+        <title></title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    </head>
+    <body>
+        <NuxtLayout>
+            <NuxtPage />
+        </NuxtLayout>
+    </body>
+</template>
+
+<script lang="ts">
+export default {
+	head: {
+		title: 'tueit App',
+	},
+};
+</script>
+
+<style>
+    html, template, body {
+        height: 100%;
+        width: 100%;
+        height: 100vh;
+        width: 100vw;
+        margin: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/pages/login.vue b/pages/login.vue
new file mode 100644
index 0000000..91fe27f
--- /dev/null
+++ b/pages/login.vue
@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
\ No newline at end of file
diff --git a/public/favicon-gelb-rot-32x32.png b/public/favicon-gelb-rot-32x32.png
new file mode 100644
index 0000000..efb28a5
Binary files /dev/null and b/public/favicon-gelb-rot-32x32.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index 18993ad..0000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/icons/Back-Icon.svg b/public/icons/Back-Icon.svg
new file mode 100644
index 0000000..0a2e699
--- /dev/null
+++ b/public/icons/Back-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.2 9H5.8m0 0 2.8 2.8M5.8 9l2.8-2.8M9 17A8 8 0 1 0 9 1a8 8 0 0 0 0 16Z"/>
+</svg>
diff --git a/public/icons/Cancel-Icon.svg b/public/icons/Cancel-Icon.svg
new file mode 100644
index 0000000..53d44ef
--- /dev/null
+++ b/public/icons/Cancel-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m1 11 5-5m0 0 5-5M6 6 1 1m5 5 5 5"/>
+</svg>
diff --git a/public/icons/Toggle-Switch-Left-Icon.svg b/public/icons/Toggle-Switch-Left-Icon.svg
new file mode 100644
index 0000000..d887d7b
--- /dev/null
+++ b/public/icons/Toggle-Switch-Left-Icon.svg
@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 50 20">
+  <g filter="url(#a)">
+    <rect width="50" height="20" fill="#3A7DCB" rx="10"/>
+  </g>
+  <g filter="url(#b)">
+    <circle cx="10" cy="10" r="8" fill="#212121"/>
+  </g>
+  <defs>
+    <filter id="a" width="52" height="22" x="0" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dx="2" dy="2"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+      <feBlend in2="shape" result="effect1_innerShadow_322_41498"/>
+    </filter>
+    <filter id="b" width="20" height="20" x="2" y="2" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dx="4" dy="4"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/>
+      <feBlend in2="shape" result="effect1_innerShadow_322_41498"/>
+    </filter>
+  </defs>
+</svg>
diff --git a/public/icons/Toggle-Switch-Right-Icon.svg b/public/icons/Toggle-Switch-Right-Icon.svg
new file mode 100644
index 0000000..20d9e83
--- /dev/null
+++ b/public/icons/Toggle-Switch-Right-Icon.svg
@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 50 20">
+  <g filter="url(#a)">
+    <rect width="50" height="20" fill="#5DA1F1" rx="10"/>
+  </g>
+  <g filter="url(#b)">
+    <circle cx="40" cy="10" r="8" fill="#212121"/>
+  </g>
+  <defs>
+    <filter id="a" width="52" height="22" x="0" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dx="2" dy="2"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+      <feBlend in2="shape" result="effect1_innerShadow_322_41497"/>
+    </filter>
+    <filter id="b" width="20" height="20" x="32" y="2" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dx="4" dy="4"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/>
+      <feBlend in2="shape" result="effect1_innerShadow_322_41497"/>
+    </filter>
+  </defs>
+</svg>
diff --git a/public/icons/actionbar-icons/Add-New-Icon.svg b/public/icons/actionbar-icons/Add-New-Icon.svg
new file mode 100644
index 0000000..4d26613
--- /dev/null
+++ b/public/icons/actionbar-icons/Add-New-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1 6h5m0 0h5M6 6V1m0 5v5"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Attachment-Icon.svg b/public/icons/actionbar-icons/Attachment-Icon.svg
new file mode 100644
index 0000000..806b1c2
--- /dev/null
+++ b/public/icons/actionbar-icons/Attachment-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m11 5.5-4.8 4.6a4 4 0 0 1-1.9.9c-.9 0-1.6-.1-2.3-.6C1.4 9.8 1 9 1 8c.1-.7.6-1.5 1.2-2l4.7-4.5c.4-.4 1-.6 1.5-.6.6 0 1.2.2 1.6.6.4.3.6.8.6 1.4 0 .5-.2 1.2-.6 1.5L5.2 9.1c-.2.1-.7.5-1 .5-.4 0-1 0-1.3-.3-.4-.4-.5-.7-.4-1.2 0-.5.4-.9.6-1L7 3.4"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Delete-Icon.svg b/public/icons/actionbar-icons/Delete-Icon.svg
new file mode 100644
index 0000000..03c5be6
--- /dev/null
+++ b/public/icons/actionbar-icons/Delete-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.9 5.4v5.3c0 .2-.2.3-.3.3H2.4a.3.3 0 0 1-.3-.3V5.4m2.8 3.4V5.4m2.2 3.4V5.4M11 3.2H8.2m0 0V1.3c0-.2-.1-.3-.3-.3H4c-.2 0-.3.1-.3.3v2m4.4 0H3.8M1 3.2h2.8"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Dropdown-Icon.svg b/public/icons/actionbar-icons/Dropdown-Icon.svg
new file mode 100644
index 0000000..6b90e99
--- /dev/null
+++ b/public/icons/actionbar-icons/Dropdown-Icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.9 1h8.5c1.6 0 2.9 1.3 2.9 2.9V8c0 1.6-1.3 2.9-2.9 2.9H4a2.9 2.9 0 0 1-3-2.8V4a3 3 0 0 1 2.9-3Z"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10 5.1 8 7 6.4 5"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Edit-Icon.svg b/public/icons/actionbar-icons/Edit-Icon.svg
new file mode 100644
index 0000000..3e97e5c
--- /dev/null
+++ b/public/icons/actionbar-icons/Edit-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6.6 2.6 8.2 1 11 3.8 9.4 5.4M6.6 2.6 1.2 8l-.2.4V11h2.6c.1 0 .3 0 .4-.2l5.4-5.4M6.6 2.6l2.8 2.8"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Filter-Icon.svg b/public/icons/actionbar-icons/Filter-Icon.svg
new file mode 100644
index 0000000..0aa0bb9
--- /dev/null
+++ b/public/icons/actionbar-icons/Filter-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1.6 1h8.8c.4 0 .6.3.6.6v.9c0 .1 0 .3-.2.4L7.3 6.5l-.2.4v3.5c0 .4-.3.7-.7.6l-1-.3a.6.6 0 0 1-.5-.5V6.9c0-.2 0-.3-.2-.4L1.2 2.9a.6.6 0 0 1-.2-.4v-1c0-.2.2-.5.6-.5Z"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Indicator-Icon-Closed.svg b/public/icons/actionbar-icons/Indicator-Icon-Closed.svg
new file mode 100644
index 0000000..72d7a73
--- /dev/null
+++ b/public/icons/actionbar-icons/Indicator-Icon-Closed.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m14.6 11-5-5 5-5M6 11 1 6l5-5"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Indicator-Icon-Opened.svg b/public/icons/actionbar-icons/Indicator-Icon-Opened.svg
new file mode 100644
index 0000000..852303d
--- /dev/null
+++ b/public/icons/actionbar-icons/Indicator-Icon-Opened.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m9.6 1 5 5-5 5M1 1l5 5-5 5"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Instances-Icon.svg b/public/icons/actionbar-icons/Instances-Icon.svg
new file mode 100644
index 0000000..b33a5b0
--- /dev/null
+++ b/public/icons/actionbar-icons/Instances-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" d="M7.1 10.7V7.4l.3-.3h3.3c.2 0 .3.2.3.3v3.3c0 .2-.1.3-.3.3H7.4a.3.3 0 0 1-.3-.3Zm-6.1 0V7.4c0-.1.1-.3.3-.3h3.3l.3.3v3.3c0 .2-.2.3-.3.3H1.3a.3.3 0 0 1-.3-.3Zm6.1-6.1V1.3c0-.2.2-.3.3-.3h3.3c.2 0 .3.1.3.3v3.3c0 .1-.1.3-.3.3H7.4a.3.3 0 0 1-.3-.3ZM1 4.6V1.3c0-.2.1-.3.3-.3h3.3c.1 0 .3.1.3.3v3.3l-.3.3H1.3a.3.3 0 0 1-.3-.3Z"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Mark-Done-Icon.svg b/public/icons/actionbar-icons/Mark-Done-Icon.svg
new file mode 100644
index 0000000..19e48f0
--- /dev/null
+++ b/public/icons/actionbar-icons/Mark-Done-Icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.5 6.3 5 7.8l3.5-3.5"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6 11A5 5 0 1 0 6 1a5 5 0 0 0 0 10Z"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Save-Icon.svg b/public/icons/actionbar-icons/Save-Icon.svg
new file mode 100644
index 0000000..1c960dc
--- /dev/null
+++ b/public/icons/actionbar-icons/Save-Icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" d="M1 9.9V2c0-.5.5-1 1.1-1h6.2c.3 0 .6.1.8.3L10.7 3c.2.2.3.5.3.8V10c0 .6-.5 1.1-1.1 1.1H2c-.5-.1-1-.6-1-1.2Z"/>
+  <path stroke="currentColor" d="M4.1 4.3H8c.2 0 .3-.1.3-.3V1.3c0-.2-.1-.3-.3-.3H4c-.2 0-.3.1-.3.3V4c0 .2.1.3.3.3ZM2.7 6.9V11h6.6V6.9c0-.2-.1-.3-.3-.3H3c-.2 0-.3.1-.3.3Z"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Search-Icon.svg b/public/icons/actionbar-icons/Search-Icon.svg
new file mode 100644
index 0000000..79494d4
--- /dev/null
+++ b/public/icons/actionbar-icons/Search-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.5 8.5 11 11M1 5.3a4.3 4.3 0 1 0 8.6 0 4.3 4.3 0 0 0-8.6 0Z"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Sell-Icon.svg b/public/icons/actionbar-icons/Sell-Icon.svg
new file mode 100644
index 0000000..0aa8286
--- /dev/null
+++ b/public/icons/actionbar-icons/Sell-Icon.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" d="M9.9 10.6H2c-.5 0-1-.6-1-1.2v-5c0-.6.5-1 1.1-1H10c.6 0 1.1.4 1.1 1v5c0 .7-.5 1.2-1.1 1.2Z"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.5 7.2a.3.3 0 1 1 0-.5.3.3 0 0 1 0 .5Z"/>
+  <path stroke="currentColor" d="M9.3 3.3v-.7c0-.8-.7-1.3-1.4-1.1L2 3a1 1 0 0 0-.9 1v.3"/>
+</svg>
diff --git a/public/icons/actionbar-icons/Settings-Icon.svg b/public/icons/actionbar-icons/Settings-Icon.svg
new file mode 100644
index 0000000..fb5c1fa
--- /dev/null
+++ b/public/icons/actionbar-icons/Settings-Icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6 7.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m9.8 5.2-.5-1.3.7-.9-1-1-.9.7-1.3-.5L6.5 1h-1l-.3 1.2-1.3.6L3 2 2 3l.7.9-.5 1.3-1.2.3v1l1.2.3.6 1.3L2 9l1 1 .9-.7 1.3.5.3 1.2h1l.3-1.2 1.3-.5.9.7 1-1-.7-.9.5-1.3 1.2-.3v-1l-1.2-.3Z"/>
+</svg>
diff --git a/public/icons/navbar-icons/Accounting-Icon.svg b/public/icons/navbar-icons/Accounting-Icon.svg
new file mode 100644
index 0000000..a6b29a5
--- /dev/null
+++ b/public/icons/navbar-icons/Accounting-Icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 25">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.5 12.5v-5l-.1-.3-2.5-2.6-.4-.1H6.2c-.2 0-.4.2-.4.5v15c0 .3.2.5.4.5h5.2M9 10.9h6.3M9 7.7h3.2M9 14h2.4m5.6 2.4.7-.8A.9.9 0 0 1 19 17l-.8.8m-1.3-1.3-2.4 2.4-.2.5-.2 1.2 1.2-.2.5-.2 2.4-2.4m-1.3-1.3 1.3 1.3"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.3 4.5v2.7c0 .3.3.5.5.5h2.7"/>
+</svg>
diff --git a/public/icons/navbar-icons/Assets-Icon.svg b/public/icons/navbar-icons/Assets-Icon.svg
new file mode 100644
index 0000000..78c1223
--- /dev/null
+++ b/public/icons/navbar-icons/Assets-Icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 25">
+  <path stroke="currentColor" stroke-width="1.5" d="M5.5 14.3V6c0-.9.7-1.6 1.6-1.6h10.8c1 0 1.6.7 1.6 1.6v8.2m-14 0h14m-14 0-1.2 4.2c-.3 1 .5 2 1.5 2h13.4c1 0 1.8-1 1.5-2l-1.2-4.2"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.7 18.1h1.6"/>
+</svg>
diff --git a/public/icons/navbar-icons/Checklists-Icon.svg b/public/icons/navbar-icons/Checklists-Icon.svg
new file mode 100644
index 0000000..8d31a51
--- /dev/null
+++ b/public/icons/navbar-icons/Checklists-Icon.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 25">
+  <path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M9 6.7H7c-.8 0-1.5.7-1.5 1.5v10.4c0 .9.7 1.5 1.5 1.5h4.5m2.7-13.4H16c.9 0 1.5.7 1.5 1.5V15"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M8.6 8.5V7.1c0-.2.2-.4.4-.4s.3-.1.4-.3c0-.7.5-1.9 2.2-1.9 1.6 0 2 1.2 2.2 1.9 0 .2.2.3.4.3s.3.2.3.4v1.4c0 .3-.2.5-.4.5h-5a.4.4 0 0 1-.5-.5Z"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m14.2 19 1.5 1.5 3.7-3.7"/>
+</svg>
diff --git a/public/icons/navbar-icons/Clients-Icon.svg b/public/icons/navbar-icons/Clients-Icon.svg
new file mode 100644
index 0000000..e5dc9d5
--- /dev/null
+++ b/public/icons/navbar-icons/Clients-Icon.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 25">
+  <path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M2.1 20.5v-1a6.6 6.6 0 1 1 13.2 0v1"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M13.4 14.9a4.7 4.7 0 0 1 9.5 0v.4"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.7 13a3.8 3.8 0 1 0 0-7.6 3.8 3.8 0 0 0 0 7.6Zm9.4-2.9a2.8 2.8 0 1 0 0-5.6 2.8 2.8 0 0 0 0 5.6Z"/>
+</svg>
diff --git a/public/icons/navbar-icons/Home-Icon.svg b/public/icons/navbar-icons/Home-Icon.svg
new file mode 100644
index 0000000..04260b7
--- /dev/null
+++ b/public/icons/navbar-icons/Home-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 25">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m4.8 10 7.7-5.5 7.8 5.5m-1.8 3.5v6.4c0 .3-.2.6-.5.6H7c-.3 0-.5-.3-.5-.6v-6.4"/>
+</svg>
diff --git a/public/icons/navbar-icons/Nav-Indicator-Icon-Closed.svg b/public/icons/navbar-icons/Nav-Indicator-Icon-Closed.svg
new file mode 100644
index 0000000..852303d
--- /dev/null
+++ b/public/icons/navbar-icons/Nav-Indicator-Icon-Closed.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m9.6 1 5 5-5 5M1 1l5 5-5 5"/>
+</svg>
diff --git a/public/icons/navbar-icons/Nav-Indicator-Icon-Opened.svg b/public/icons/navbar-icons/Nav-Indicator-Icon-Opened.svg
new file mode 100644
index 0000000..72d7a73
--- /dev/null
+++ b/public/icons/navbar-icons/Nav-Indicator-Icon-Opened.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m14.6 11-5-5 5-5M6 11 1 6l5-5"/>
+</svg>
diff --git a/public/icons/navbar-icons/Solutions-Icon.svg b/public/icons/navbar-icons/Solutions-Icon.svg
new file mode 100644
index 0000000..01183ca
--- /dev/null
+++ b/public/icons/navbar-icons/Solutions-Icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 25">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.8 17.8h5.4m-4.5 2.7h3.6m-4.5-5.3c0-1.8-.4-2.3-1.3-3.1a4.1 4.1 0 0 1-1.3-3.2c0-2.7 1.7-4.4 5.3-4.4 3.6 0 5.4 1.7 5.3 4.4a4 4 0 0 1-1.3 3.2c-.9.8-1.3 1.3-1.3 3"/>
+</svg>
diff --git a/public/icons/settings-icons/Appearance-Icon.svg b/public/icons/settings-icons/Appearance-Icon.svg
new file mode 100644
index 0000000..0adccdd
--- /dev/null
+++ b/public/icons/settings-icons/Appearance-Icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 15 15">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1.5 6.9a6.6 6.6 0 0 1 12 0"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M7.5 10.1a1.6 1.6 0 1 1 0-3.2 1.6 1.6 0 0 1 0 3.2Z"/>
+</svg>
diff --git a/public/icons/settings-icons/Profile-Icon.svg b/public/icons/settings-icons/Profile-Icon.svg
new file mode 100644
index 0000000..50dfd74
--- /dev/null
+++ b/public/icons/settings-icons/Profile-Icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 15 15">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M7.5 2.5a5 5 0 1 0 0 10 5 5 0 0 0 0-10Z"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.6 10.7s1.2-1.4 3.9-1.4c2.8 0 3.9 1.4 3.9 1.4M7.5 7.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/>
+</svg>
diff --git a/public/icons/settings-icons/Settings-NavBar-Indicator-Icon-Opened.svg b/public/icons/settings-icons/Settings-NavBar-Indicator-Icon-Opened.svg
new file mode 100644
index 0000000..852303d
--- /dev/null
+++ b/public/icons/settings-icons/Settings-NavBar-Indicator-Icon-Opened.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m9.6 1 5 5-5 5M1 1l5 5-5 5"/>
+</svg>
diff --git a/public/icons/settings-icons/Settings-Navbar-Indicator-Icon-Closed.svg b/public/icons/settings-icons/Settings-Navbar-Indicator-Icon-Closed.svg
new file mode 100644
index 0000000..72d7a73
--- /dev/null
+++ b/public/icons/settings-icons/Settings-Navbar-Indicator-Icon-Closed.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m14.6 11-5-5 5-5M6 11 1 6l5-5"/>
+</svg>
diff --git a/public/tüit-logo.svg.png b/public/tüit-logo.svg.png
new file mode 100644
index 0000000..39a9a7b
Binary files /dev/null and b/public/tüit-logo.svg.png differ
diff --git a/public/vue.svg b/public/vue.svg
new file mode 100644
index 0000000..770e9d3
--- /dev/null
+++ b/public/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
\ No newline at end of file