diff --git a/tubio-frontend-nuxt-app/components/DownloadEntry.vue b/tubio-frontend-nuxt-app/components/DownloadEntry.vue
index 02935a5..0e0b32e 100644
--- a/tubio-frontend-nuxt-app/components/DownloadEntry.vue
+++ b/tubio-frontend-nuxt-app/components/DownloadEntry.vue
@@ -59,7 +59,7 @@
                 </div>
 
                 <div class="flex flex-col md:ml-4 overflow-x-hidden">
-                    <h1 class="title pr">Versengold - Thekenmädchen (Offizielles Video) Versengold - Thekenmädchen (Offizielles Video) Versengold - Thekenmädchen (Offizielles Video)</h1>
+                    <h1 class="title">Versengold - Thekenmädchen (Offizielles Video) Versengold - Thekenmädchen (Offizielles Video) Versengold - Thekenmädchen (Offizielles Video)</h1>
                     
                     <div class="relative my-4">
                         <p class="description p-2">
diff --git a/tubio-frontend-nuxt-app/components/Icons/toggle-off.vue b/tubio-frontend-nuxt-app/components/Icons/toggle-off.vue
new file mode 100644
index 0000000..5208edc
--- /dev/null
+++ b/tubio-frontend-nuxt-app/components/Icons/toggle-off.vue
@@ -0,0 +1,5 @@
+<template>
+<svg viewBox="-4 -4 24 24" class="bi bi-toggle-off" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"/>
+</svg>
+</template>
diff --git a/tubio-frontend-nuxt-app/components/Icons/toggle-on.vue b/tubio-frontend-nuxt-app/components/Icons/toggle-on.vue
new file mode 100644
index 0000000..320c178
--- /dev/null
+++ b/tubio-frontend-nuxt-app/components/Icons/toggle-on.vue
@@ -0,0 +1,5 @@
+<template>
+<svg viewBox="-4 -4 24 24" class="bi bi-toggle-on" fill="#8a54a2" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/>
+</svg>
+</template>
diff --git a/tubio-frontend-nuxt-app/components/Layout/Header.vue b/tubio-frontend-nuxt-app/components/Layout/Header.vue
index fc02480..d0789a5 100644
--- a/tubio-frontend-nuxt-app/components/Layout/Header.vue
+++ b/tubio-frontend-nuxt-app/components/Layout/Header.vue
@@ -2,15 +2,19 @@
   <div class="header flex flex-row justify-between w-full p-5">
 
     <div class="left-icons flex flex-flex-row justify-start">
+      <nuxt-link exact to="/">
         <div class="headerbutton block md:hidden">
             <Logo class="headerlogo" />
         </div>
+      </nuxt-link>
     </div>
 
     <div class="right-icons flex flex-row justify-end flex-grow">
-        <div class="headerbutton button-settings">
-            <IconGear class="headericon icon-gear" />
-        </div>
+        <nuxt-link exact to="/settings">
+          <div class="headerbutton button-settings">
+              <IconGear class="headericon icon-gear" />
+          </div>
+        </nuxt-link>
     </div>
 
   </div>
diff --git a/tubio-frontend-nuxt-app/components/Toggle.vue b/tubio-frontend-nuxt-app/components/Toggle.vue
new file mode 100644
index 0000000..799b034
--- /dev/null
+++ b/tubio-frontend-nuxt-app/components/Toggle.vue
@@ -0,0 +1,40 @@
+<template>
+<div>
+    <div class="toggle-button">
+        <IconToggleOff v-if="!isOn" />
+        <IconToggleOn v-else />
+    </div>
+</div>
+</template>
+
+<script>
+import IconToggleOn from "~/components/Icons/toggle-on.vue";
+import IconToggleOff from "~/components/Icons/toggle-off.vue";
+
+export default {
+    props: {
+        isOn: {type: Boolean, default: false}
+    },
+    components: {
+      IconToggleOn,
+      IconToggleOff,
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.toggle-button {
+  width: 50px;
+  overflow: visible;
+  stroke-width: 1px;
+  fill: theme("colors.text-gray-1");
+  stroke: theme("colors.text-gray-1");
+  cursor: pointer;
+  transition: fill 0.1s, stroke 0.1s;
+
+  &:hover {
+    fill: theme("colors.text-gray-2");
+    stroke: theme("colors.text-gray-2");
+  }
+}
+</style>
diff --git a/tubio-frontend-nuxt-app/pages/index.vue b/tubio-frontend-nuxt-app/pages/index.vue
index f52030d..05f21c4 100644
--- a/tubio-frontend-nuxt-app/pages/index.vue
+++ b/tubio-frontend-nuxt-app/pages/index.vue
@@ -2,7 +2,7 @@
   <div>
 
     <div class="hidden md:block">
-      <Spacer height="2em" m_height="1em" />
+      <Spacer height="0.5em" m_height="1em" />
       <Logo class="logo mt-4" />
       <Spacer height="2em" m_height="2em" />
     </div>
diff --git a/tubio-frontend-nuxt-app/pages/settings.vue b/tubio-frontend-nuxt-app/pages/settings.vue
new file mode 100644
index 0000000..12937f1
--- /dev/null
+++ b/tubio-frontend-nuxt-app/pages/settings.vue
@@ -0,0 +1,186 @@
+<template>
+  <div>
+      <h1>Settings</h1>
+      <Spacer height="2em" />
+
+      <div class="flex-col w-full">
+
+        <div class="flex flex-col lg:flex-row justify-content-start w-full">
+
+            <div class="w-full lg:w-1/2 border-right lg:pr-3">
+                
+                <div class="option toggle flex justify-between items-center">
+                    <p>Show console</p>
+                    <Toggle :isOn="false"/>
+                </div>
+
+                <div class="option toggle flex justify-between items-center">
+                    <p>Use account</p>
+                    <Toggle :isOn="false"/>
+                </div>
+
+                <div class="option text flex justify-between w-full items-center">
+                    <p class="mr-3">Username</p>
+                    <input type="text" id="username" name="username">
+                </div>
+
+                <div class="option text flex justify-between w-full items-center">
+                    <p class="mr-3">Password</p>
+                    <input type="password" id="password" name="password">
+                </div>
+
+                <div class="option toggle flex justify-between items-center">
+                    <p>Limit speed</p>
+                    <Toggle :isOn="false"/>
+                </div>
+
+                <div class="option text narrow flex justify-between w-full items-center">
+                    <p class="mr-3">Max speed</p>
+                    <input type="text" id="max_speed" name="max_speed" placeholder="100M">
+                </div>
+
+                <div class="option text narrow flex justify-between w-full items-center">
+                    <p class="mr-3">Download threads</p>
+                    <input type="text" id="max_threads" name="max_threads" placeholder="10">
+                </div>
+
+            </div>
+            
+            <div class="w-full lg:w-1/2 border-left lg:pl-3 mt-6 lg:mt-0">
+
+                <div class="disk-usage">
+                    <h2>Disk usage</h2>
+
+                    <div class="disk-usage__entry flex">
+                        <p class="mr-3">Downloads: </p>
+                        <p>759 mb</p>
+                    </div>
+                    <div class="disk-usage__entry flex">
+                        <p class="mr-3">Logs: </p>
+                        <p>9 mb</p>
+                    </div>
+                    <div class="disk-usage__entry flex">
+                        <p class="mr-3">Dependencies: </p>
+                        <p>312 mb</p>
+                    </div>
+                    <div class="disk-usage__entry flex">
+                        <p class="mr-3">Misc: </p>
+                        <p>3 mb</p>
+                    </div>
+                    <div class="disk-usage__entry flex">
+                        <p class="mr-3">Total: </p>
+                        <p>1567 mb</p>
+                    </div>
+                </div>
+
+                <Spacer height="50px"/>
+
+                <div class="button">Clear downloads</div>
+                <div class="button mt-2">Clear logs</div>
+
+            </div>
+
+        </div>
+
+        <hr class="mt-6 lg:mt-2" />
+
+        <div class="pt-6">
+            <h2>Logs</h2>
+        </div>
+
+      </div>
+  </div>
+</template>
+
+<script>
+import Toggle from "~/components/Toggle.vue";
+import Spacer from "~/components/Spacer.vue";
+
+
+export default {
+  components: {
+      Toggle,
+      Spacer
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+h1 {
+  color: theme("colors.text-gray-1");
+  font-size: 32pt;
+}
+
+h2 {
+  color: theme("colors.text-gray-1");
+  font-size: 24pt;
+}
+
+.disk-usage {
+  &__entry {
+    & p {
+      color: theme("colors.text-gray-1");
+      font-size: 16pt;
+
+      &:first-child {
+        width: 150px;
+      }
+    }
+  }
+}
+
+.option {
+  color: theme("colors.text-gray-1");
+  font-size: 18pt;
+  height: 50px;
+
+  &.toggle > p {
+    width: 300px;
+  }
+
+  &.text > input {
+    width: 240px;
+    text-align: right;
+    border-radius: 5px;
+    font-size: 16pt;
+    height: 30px;
+    padding-left: 0.7em;
+    padding-right: 0.7em;
+
+    @media (max-width: theme('screens.md')) {
+      width: 180px;
+    }
+  }
+
+  &.text.narrow > input {
+    width: 120px;
+  }
+}
+
+@media (min-width: theme('screens.lg')) {
+  .border-right {
+    border-right: 1px solid theme("colors.gray-1");
+  }
+
+  .border-left {
+    border-left: 1px solid theme("colors.gray-1");
+  }
+}
+
+.button {
+  color: #000;
+  font-family: ZillaSlab, serif;
+  font-size: 18pt;
+  transition: background-color 0.2s;
+  max-width: 200px;
+
+  &:hover {
+    background-color: theme("colors.text-error-1");
+  }
+}
+
+hr {
+  border: none;
+  border-bottom: 2px solid theme("colors.gray-1");
+}
+</style>
diff --git a/tubio-frontend-nuxt-app/tailwind.config.js b/tubio-frontend-nuxt-app/tailwind.config.js
index 29399f9..3911970 100644
--- a/tubio-frontend-nuxt-app/tailwind.config.js
+++ b/tubio-frontend-nuxt-app/tailwind.config.js
@@ -20,6 +20,7 @@ module.exports = {
       'purple-3-1': '#bee7f4',
 
       'text-gray-1': '#bbb',
+      'text-gray-2': '#fff',
       'text-error-1': '#d40'
     },
 
@@ -28,7 +29,7 @@ module.exports = {
       'md': '768px',
       'lg': '1024px',
       'xl': '1280px',
-      'fhd': '1670px',
+      'fhd': '1870px',
       'wqhd': '2480px',
 
       'break-header': '950px',