diff --git a/src/css/app.scss b/src/css/app.scss
index feeaac7..a70c252 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -601,11 +601,62 @@ div.create {
     }
   }
 
+  .tab-list {
+    margin: 0;
+    width: 100%;
+    max-width: 320px;
+    position: relative;
+    .q-item {
+      padding: 18px 40px;
+      &.active {
+        background: #00000008;
+      }
+    }
+  }
+  .page {
+    background: #ffffff57;
+    flex:1;
+    h6 {
+      margin-top: 0;
+      margin-bottom: 20px;
+    }
+    .q-tab-panels {
+      background: none;
+      .q-panel > div {
+        padding: 40px;
+      }
+    }
+  }
+
+  .search-providers {
+    display: flex;
+    margin-left: -10px;
+    margin-right: -10px;
+    .providers {
+      flex: 1;
+      margin: 10px;
+    }
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      border: 1px solid #0001;
+      margin: 10px 0;
+      flex: 1;
+      li {
+        padding: 20px;
+        border-bottom: 1px solid #0001;
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+    }
+  }
   .user-details {
     margin: 0;
     padding: 40px;
     width: 100%;
-    max-width: 340px;
+    max-width: 360px;
     text-align: center;
     position: relative;
     .buttons {
@@ -635,7 +686,7 @@ div.create {
   }
   .user-options {
     flex: 1;
-    margin: 0;
+    margin: 40px 40px 40px 0;
     min-height: calc(100vh - 76px);
     background: #f3f4f4;
     .q-tab-panels {
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 3d1742f..63d28fa 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -9,6 +9,9 @@ export default {
   username_yes: 'Yes (Select from list of users)',
   username_no: 'No (Username must by typed)',
   select_user: 'Select user',
+  show_search: 'Display search bar on dashboard',
+  yes: 'Yes',
+  no: 'No',
   email: 'Email',
   avatar: 'Avatar',
   username: 'Username',
@@ -21,11 +24,11 @@ export default {
   user_management: 'User Management',
   proxy_management: 'Proxy Management',
   settings: 'Settings',
-  app: 'app | apps',
-  tag: 'tag | tags',
-  user: 'user | users',
-  proxy: 'proxy | proxies',
-  item: 'item | items',
+  app: 'App | Apps',
+  tag: 'Tag | Tags',
+  user: 'User | Users',
+  proxy: 'Proxy | Proxies',
+  item: 'Item | Items',
   logout: 'Logout',
   website: 'Website',
   title: 'Title',
diff --git a/src/pages/application/Settings.vue b/src/pages/application/Settings.vue
index 9fe6eed..21c3a48 100644
--- a/src/pages/application/Settings.vue
+++ b/src/pages/application/Settings.vue
@@ -1,44 +1,102 @@
 <template>
   <q-page class="flex">
-    <div class="page-container">
-      <!--<div class="bg"></div>
-      <div class="add-new">
-        <div class="item">Docker Container</div>
-        <div class="item">Application</div>
-        <div class="item">Link</div>
-      </div>-->
-      <div class="list-items">
-        <div class="no-items" v-if="applications.length < 1">
-          {{ this.$t('no_apps') }}
-          <q-btn style="margin-top:30px;" @click="create = true" unelevated color="brand">Add New</q-btn>
-        </div>
-        <app-item
-          v-else
-          v-for="application in applications"
-          :key="application.id"
-          :application="application"
-        >
-        </app-item>
-      </div>
-    </div>
+    <div class="tab-list">
+      <q-list>
+        <q-item :class="{ active: tab === 'general' }" @click="tab = 'general'" clickable>
+          <q-item-section>
+            <q-item-label>General Settings</q-item-label>
+            <q-item-label caption>Choose general system settings</q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item :class="{ active: tab === 'search' }" @click="tab = 'search'" clickable>
+          <q-item-section>
+            <q-item-label>Search settings</q-item-label>
+            <q-item-label caption>Select which search engines to use</q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item :class="{ active: tab === 'dashboard' }" @click="tab = 'dashboard'" clickable>
+          <q-item-section>
+            <q-item-label>Dashboard</q-item-label>
+            <q-item-label caption>Settings for the dashboard</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
 
-    <q-dialog v-model="create">
-      <edit-tile :application="createapp"></edit-tile>
-    </q-dialog>
+    </div>
+    <div class="page">
+      <q-tab-panels v-model="tab" animated class="">
+        <q-tab-panel name="general">
+          <q-select
+            outlined
+            :options="languages"
+            :label="this.$t('select_language')"
+            option-value="value"
+            option-label="label"
+            v-model="language"
+            map-options
+          ></q-select>
+
+          <q-select
+            outlined
+            :options="username_options"
+            :label="this.$t('show_usernames')"
+            option-value="value"
+            option-label="label"
+            v-model="show_usernames"
+            map-options
+          ></q-select>
+
+        </q-tab-panel>
+        <q-tab-panel name="search">
+          <h6>Search</h6>
+          <q-select
+            outlined
+            :options="showsearch_options"
+            :label="this.$t('show_search')"
+            option-value="value"
+            option-label="label"
+            v-model="showsearch"
+          ></q-select>
+
+          <h6>Search Providers</h6>
+          <div class="search-providers">
+            <div class="active providers">
+              Active
+              <ul class="">
+                <li>Application</li>
+                <li>Google</li>
+                <li>DuckDuckGo</li>
+                <li>Qwant</li>
+              </ul>
+            </div>
+            <div class="inactive providers">
+              Inactive
+              <ul class="">
+                <li>Bing</li>
+                <li>Startpage</li>
+                <li>NZBHydra</li>
+              </ul>
+            </div>
+          </div>
+          List of providers
+          add a new providers
+          default
+        </q-tab-panel>
+        <q-tab-panel name="dashboard">
+          Background type - image, color, gradient
+        </q-tab-panel>
+      </q-tab-panels>
+    </div>
 
   </q-page>
 </template>
 
 <script>
-import EditTile from 'components/EditTile'
-import AppItem from 'components/AppItem'
 
 export default {
   name: 'Settings',
 
   components: {
-    AppItem,
-    EditTile
   },
 
   props: ['applications', 'allapps'],
@@ -55,6 +113,26 @@ export default {
         icon: 'statics/img/heimdall-icon-small.png'
       }
     },
+    show_usernames: {
+      get () {
+        return this.$store.state.app.settings.show_usernames
+      },
+      set (val) {
+        this.$store.dispatch('app/saveSettings', {
+          show_usernames: val.value
+        })
+      }
+    },
+    language: {
+      get () {
+        return this.$store.state.app.settings.language
+      },
+      set (val) {
+        this.$store.dispatch('app/saveSettings', {
+          language: val.value
+        })
+      }
+    },
     create: {
       get () {
         return this.$store.state.tiles.create
@@ -67,6 +145,38 @@ export default {
 
   data () {
     return {
+      tab: 'general',
+      username_options: [
+        {
+          label: this.$t('username_yes'),
+          value: 'yes'
+        },
+        {
+          label: this.$t('username_no'),
+          value: 'no'
+        }
+      ],
+      showsearch: null,
+      showsearch_options: [
+        {
+          label: this.$t('yes'),
+          value: 'yes'
+        },
+        {
+          label: this.$t('no'),
+          value: 'no'
+        }
+      ],
+      languages: [
+        {
+          value: 'en-us',
+          label: 'English (US)'
+        },
+        {
+          value: 'en-gb',
+          label: 'English (British)'
+        }
+      ]
     }
   },
   methods: {
diff --git a/src/store/app/actions.js b/src/store/app/actions.js
index 0f16db6..28af061 100644
--- a/src/store/app/actions.js
+++ b/src/store/app/actions.js
@@ -83,6 +83,33 @@ export async function setDefaults (context, data) {
   context.commit('step', 3)
 }
 
+export async function saveSettings (context, data) {
+  try {
+    const response = await axios.put(process.env.BACKEND_LOCATION + 'settings', data)
+    if (response.data.status === 'ok') {
+      const settings = { ...context.state.settings }
+      const update = Object.assign(settings, data)
+      context.commit('settings', update)
+
+      Notify.create({
+        type: 'positive',
+        message: `Setting updated`,
+        progress: true,
+        position: 'bottom',
+        timeout: 1500
+      })
+    }
+  } catch (e) {
+    Notify.create({
+      type: 'negative',
+      message: `Could not update setting`,
+      progress: true,
+      position: 'bottom',
+      timeout: 1500
+    })
+  }
+}
+
 export function setupComplete (context) {
   LocalStorage.remove('heimdall_setup')
   console.log('finish')