diff --git a/install.sh b/install.sh
index 362dabdc..084e612b 100755
--- a/install.sh
+++ b/install.sh
@@ -71,9 +71,11 @@ Pictures/wallpaper"
         if [ -f "$wall" ]; then
             wall_base="$(basename "$wall")"
             echo "  $ARROW Converting $wall_base..."
-            $MAGICK -quiet -regard-warnings\
-                "$WALL_ASSETS/$wall_base" -resize 1500 -filter Gaussian -resize 25% \
-                -define filter:sigma=3 -resize 400%  "$WALL_ASSETS/blurred/$wall_base"
+            $MAGICK -quiet -regard-warnings \
+                "$WALL_ASSETS/$wall_base" -resize 1500 \
+                -filter Gaussian -resize '50%' \
+                -define filter:sigma=6 -resize '200%' \
+                "$WALL_ASSETS/blurred/$wall_base"
         fi
     done
 
@@ -82,7 +84,6 @@ Pictures/wallpaper"
     echo "  You might need to give your password for this one."
     sudo cp -rf "$WALL_ASSETS"/* /usr/share/backgrounds
 
-
     IFS="$IFS_OLD"
 fi
 
@@ -100,6 +101,8 @@ if [ ! -d ./node_modules ]; then
     echo "$ARROW \`node_modules\` not found, installing packages..."
     $NPM install
     echo "Done."
+else
+    echo "$ARROW \`node_moudles\` found, skipping running \`npm install\`."
 fi
 
 # `npm` build.
@@ -111,7 +114,7 @@ echo "Done"
 # Build archive.
 echo "$ARROW Building directory..."
 cd ./dist || exit 1
-tar zcvf ../lightdm-saluto.tar.gz ./*
+tar zcf ../lightdm-saluto.tar.gz ./*
 cd ../ || exit 1
 sudo mkdir -p "$THEME_INSTALL_DIR"
 sudo mv ./lightdm-saluto.tar.gz "$THEME_INSTALL_DIR"
@@ -120,7 +123,7 @@ echo "Done"
 # Decompressing.
 echo "$ARROW Entering directory and running final decompression..."
 cd "$THEME_INSTALL_DIR" || exit 1
-sudo tar xvf lightdm-saluto.tar.gz
+sudo tar xf lightdm-saluto.tar.gz
 echo "Done"
 
 echo
diff --git a/package-lock.json b/package-lock.json
index c79b1f1e..91d4f1ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9703,6 +9703,11 @@
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
       "dev": true
     },
+    "simple-keyboard": {
+      "version": "2.27.77",
+      "resolved": "https://registry.npmjs.org/simple-keyboard/-/simple-keyboard-2.27.77.tgz",
+      "integrity": "sha512-yfos+fCe4tVP8XCsCYf4WPcGb3NLtFuKR4twU2e4DyxoUN1l1qpLubQcq5qet2oxB6AbAXycHrAE5LIaimx9IQ=="
+    },
     "simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
diff --git a/package.json b/package.json
index 52c9e6a2..b674081d 100644
--- a/package.json
+++ b/package.json
@@ -1,33 +1,34 @@
 {
-  "name": "lightdm-saluto",
-  "version": "1.0.0",
-  "license": "MIT",
-  "author": "Demonstrandum",
-  "homepage":   "https://github.com/Demonstrandum/Saluto",
-  "repository": "https://github.com/Demonstrandum/Saluto",
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
-  },
-  "dependencies": {
-    "vue": "^2.6.10",
-    "vue-router": "^3.1.3"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.0.5",
-    "@vue/cli-service": "^4.0.5",
-    "node-sass": "^4.13.0",
-    "sass-loader": "^8.0.0",
-    "vue-template-compiler": "^2.6.10"
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
-  ]
+    "name": "lightdm-saluto",
+    "version": "1.0.0",
+    "license": "MIT",
+    "author": "Demonstrandum",
+    "homepage": "https://github.com/Demonstrandum/Saluto",
+    "repository": "https://github.com/Demonstrandum/Saluto",
+    "scripts": {
+        "serve": "vue-cli-service serve",
+        "build": "vue-cli-service build"
+    },
+    "dependencies": {
+        "vue": "^2.6.10",
+        "vue-router": "^3.1.3",
+        "simple-keyboard": "latest"
+    },
+    "devDependencies": {
+        "@vue/cli-plugin-babel": "^4.0.5",
+        "@vue/cli-service": "^4.0.5",
+        "node-sass": "^4.13.0",
+        "sass-loader": "^8.0.0",
+        "vue-template-compiler": "^2.6.10"
+    },
+    "postcss": {
+        "plugins": {
+            "autoprefixer": {}
+        }
+    },
+    "browserslist": [
+        "> 1%",
+        "last 2 versions",
+        "not ie <= 8"
+    ]
 }
diff --git a/src/App.vue b/src/App.vue
index b30810d9..fd688285 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,5 @@
 <template>
-    <div id="app"
-        :class="{ 'disableZoom': disableZoom }">
+    <div id="app" :class="{ 'disableZoom': disableZoom }">
         <transition name="fade">
             <router-view/>
         </transition>
@@ -8,95 +7,106 @@
 </template>
 
 <script>
-    import { settings } from '@/settings';
-
-    export default {
-        mounted() {
-            this.$router.push('/intro/initial');
-        },
-        data() {
-            return {
-                disableZoom: settings.disableZoom
-            }
+import { settings } from '@/settings';
+
+export default {
+    mounted() {
+        this.$router.push('/intro/initial');
+    },
+    data() {
+        return {
+            disableZoom: settings.disableZoom
         }
     }
+}
 </script>
 
 <style lang="scss">
-    @import '_theme';
+@import '_theme';
+html.lightdm {
+    background: $outer-background;
+    color: $secondary-color;
+}
 
-    html.lightdm {
-        background: $outer-background;
-        color: $secondary-color;
-    }
-
-    /* HiDPI */
-    @media screen and (min-width: 3000px) and (min-height: 1200px) {
-        #app:not(.disableZoom) {
-            zoom: 2.0;
-        }
-    }
-
-    @font-face {
-        font-family: 'Alte Haas Grotesk';
-        src: url('assets/fonts/AlteHaasGroteskRegular.ttf');
-    }
-
-    @font-face {
-        font-family: 'Alte Haas Grotesk';
-        font-weight: bold;
-        src: url('assets/fonts/AlteHaasGroteskBold.ttf');
-    }
-
-    @font-face {
-        font-family: 'Input Mono';
-        src: url('assets/fonts/InputMono-Regular.ttf');
-    }
-
-    @font-face {
-        font-family: 'Input Mono';
-        font-style: italic;
-        src: url('assets/fonts/InputMono-Italic.ttf');
-    }
-
-    html, body, #app, #app > *, .base > * {
-        margin: 0;
-        padding: 0;
-
-        height: 100vh;
-
-        overflow: hidden;
-
-        background-size: cover;
-        border-radius: $screen-radius;
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-        cursor: default;
-    }
-
-    img {
-        -webkit-user-drag: none;
-    }
-
-    #app {
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-user-select: none;
-
-        text-align: center;
-    }
-
-    .fade-enter-active, .fade-leave-active {
-        transition-property: opacity;
-        transition-duration: .4s;
-    }
-
-    .fade-enter-active {
-        transition-delay: .4s;
-    }
+/* HiDPI */
 
-    .fade-enter, .fade-leave-active {
-        opacity: 0
+@media screen and (min-width: 3000px) and (min-height: 1200px) {
+    #app:not(.disableZoom) {
+        zoom: 2.0;
     }
+}
+
+@font-face {
+    font-family: 'Alte Haas Grotesk';
+    src: url('assets/fonts/AlteHaasGroteskRegular.ttf');
+}
+
+@font-face {
+    font-family: 'Alte Haas Grotesk';
+    font-weight: bold;
+    src: url('assets/fonts/AlteHaasGroteskBold.ttf');
+}
+
+@font-face {
+    font-family: 'Input Mono';
+    src: url('assets/fonts/InputMono-Regular.ttf');
+}
+
+@font-face {
+    font-family: 'Input Mono';
+    font-style: italic;
+    src: url('assets/fonts/InputMono-Italic.ttf');
+}
+
+html,
+body,
+#app,
+#app>*,
+.base>* {
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    overflow: hidden;
+    background-size: cover;
+    border-radius: $screen-radius;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    cursor: default;
+}
+
+img {
+    -webkit-user-drag: none;
+}
+
+#app {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-user-select: none;
+    text-align: center;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition-property: opacity;
+    transition-duration: .4s;
+}
+
+.fade-enter-active {
+    transition-delay: .4s;
+}
+
+.fade-enter,
+.fade-leave-active {
+    opacity: 0
+}
+
+.visible {
+    visibility: visible !important;
+}
 </style>
diff --git a/src/assets/default_images/onboard.svg b/src/assets/default_images/onboard.svg
new file mode 100644
index 00000000..6ed887a3
--- /dev/null
+++ b/src/assets/default_images/onboard.svg
@@ -0,0 +1,201 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   width="24"
+   height="24"
+   viewBox="0 0 23.999999 23.999999"
+   xml:space="preserve"
+   sodipodi:docname="onboard.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"><metadata
+   id="metadata184"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs182" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="2920"
+   inkscape:window-height="1820"
+   id="namedview180"
+   showgrid="false"
+   borderlayer="false"
+   inkscape:pagecheckerboard="true"
+   inkscape:zoom="45.254834"
+   inkscape:cx="16.824506"
+   inkscape:cy="11.086544"
+   inkscape:window-x="40"
+   inkscape:window-y="140"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1" />
+<g
+   id="g147"
+   transform="matrix(0.04378156,0,0,0.04378156,0,-9.67e-5)"
+   style="fill:#ffffff;fill-opacity:1">
+	<g
+   id="g145"
+   style="fill:#ffffff;fill-opacity:1">
+		<path
+   d="m 537.468,120.342 c -7.139,-7.139 -15.753,-10.709 -25.841,-10.709 H 36.545 c -10.088,0 -18.699,3.571 -25.837,10.709 C 3.571,127.48 0,136.094 0,146.179 v 255.815 c 0,10.089 3.571,18.698 10.708,25.837 7.139,7.139 15.749,10.712 25.837,10.712 h 475.082 c 10.088,0 18.702,-3.573 25.841,-10.712 7.135,-7.139 10.708,-15.748 10.708,-25.837 V 146.179 c 0,-10.085 -3.573,-18.699 -10.708,-25.837 z M 511.627,401.994 H 36.545 V 146.179 h 475.082 z"
+   id="path117"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff;fill-opacity:1" />
+		<path
+   d="m 77.657,365.445 h 27.408 c 3.046,0 4.569,-1.526 4.569,-4.568 v -27.408 c 0,-3.039 -1.52,-4.568 -4.569,-4.568 H 77.657 c -3.044,0 -4.568,1.529 -4.568,4.568 v 27.408 c 0,3.042 1.524,4.568 4.568,4.568 z"
+   id="path119"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff;fill-opacity:1" />
+		<path
+   d="m 77.657,292.362 h 63.954 c 3.045,0 4.57,-1.53 4.57,-4.572 v -27.41 c 0,-3.045 -1.525,-4.565 -4.57,-4.568 H 77.657 c -3.044,0 -4.568,1.523 -4.568,4.568 v 27.41 c 0,3.042 1.524,4.572 4.568,4.572 z"
+   id="path121"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff;fill-opacity:1" />
+		<path
+   d="m 77.657,219.268 h 27.408 c 3.046,0 4.569,-1.525 4.569,-4.57 v -27.406 c 0,-3.046 -1.52,-4.565 -4.569,-4.57 H 77.657 c -3.044,0 -4.568,1.524 -4.568,4.57 v 27.406 c 0,3.045 1.524,4.57 4.568,4.57 z"
+   id="path123"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff;fill-opacity:1" />
+		<path
+   d="M 397.43,328.903 H 150.751 c -3.046,0 -4.57,1.526 -4.57,4.572 v 27.404 c 0,3.039 1.524,4.572 4.57,4.572 h 246.67 c 3.046,0 4.572,-1.526 4.572,-4.572 v -27.404 c 0.001,-3.045 -1.525,-4.572 -4.563,-4.572 z"
+   id="path125"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff;fill-opacity:1" />
+		<path
+   d="m 182.725,287.79 c 0,3.042 1.523,4.572 4.565,4.572 h 27.412 c 3.044,0 4.565,-1.53 4.565,-4.572 v -27.41 c 0,-3.045 -1.518,-4.565 -4.565,-4.568 H 187.29 c -3.042,0 -4.565,1.523 -4.565,4.568 z"
+   id="path127"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff;fill-opacity:1" />
+		<path
+   d="m 150.751,219.268 h 27.406 c 3.046,0 4.57,-1.525 4.57,-4.57 v -27.406 c 0,-3.046 -1.524,-4.565 -4.57,-4.57 h -27.406 c -3.046,0 -4.57,1.524 -4.57,4.57 v 27.406 c 0,3.045 1.525,4.57 4.57,4.57 z"
+   id="path129"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff;fill-opacity:1" />
+		<path
+   d="m 255.813,287.79 c 0,3.042 1.524,4.572 4.568,4.572 h 27.408 c 3.046,0 4.572,-1.53 4.572,-4.572 v -27.41 c 0,-3.045 -1.526,-4.565 -4.572,-4.568 h -27.408 c -3.044,0 -4.568,1.523 -4.568,4.568 z"
+   id="path131"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff;fill-opacity:1" />
+		<path
+   d="m 223.837,219.268 h 27.406 c 3.046,0 4.57,-1.525 4.57,-4.57 v -27.406 c 0,-3.046 -1.521,-4.565 -4.57,-4.57 h -27.406 c -3.046,0 -4.57,1.524 -4.57,4.57 v 27.406 c 0,3.045 1.524,4.57 4.57,4.57 z"
+   id="path133"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff;fill-opacity:1" />
+		<path
+   d="m 328.904,287.79 c 0,3.042 1.525,4.572 4.564,4.572 h 27.412 c 3.045,0 4.564,-1.53 4.564,-4.572 v -27.41 c 0,-3.045 -1.52,-4.565 -4.564,-4.568 h -27.412 c -3.039,0 -4.564,1.523 -4.564,4.568 z"
+   id="path135"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff;fill-opacity:1" />
+		<path
+   d="m 470.513,328.903 h -27.404 c -3.046,0 -4.572,1.526 -4.572,4.572 v 27.404 c 0,3.039 1.526,4.572 4.572,4.572 h 27.404 c 3.046,0 4.572,-1.526 4.572,-4.572 v -27.404 c 0,-3.045 -1.523,-4.572 -4.572,-4.572 z"
+   id="path137"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff;fill-opacity:1" />
+		<path
+   d="m 296.928,219.268 h 27.411 c 3.046,0 4.565,-1.525 4.565,-4.57 v -27.406 c 0,-3.046 -1.52,-4.565 -4.565,-4.57 h -27.411 c -3.046,0 -4.565,1.524 -4.565,4.57 v 27.406 c -10e-4,3.045 1.519,4.57 4.565,4.57 z"
+   id="path139"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff;fill-opacity:1" />
+		<path
+   d="m 370.018,219.268 h 27.404 c 3.046,0 4.572,-1.525 4.572,-4.57 v -27.406 c 0,-3.046 -1.526,-4.565 -4.572,-4.57 h -27.404 c -3.046,0 -4.572,1.524 -4.572,4.57 v 27.406 c -0.001,3.045 1.526,4.57 4.572,4.57 z"
+   id="path141"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff;fill-opacity:1" />
+		<path
+   d="m 401.991,287.79 c 0,3.042 1.522,4.572 4.568,4.572 h 63.953 c 3.046,0 4.572,-1.53 4.572,-4.572 V 187.292 c 0,-3.046 -1.522,-4.565 -4.572,-4.57 h -27.404 c -3.046,0 -4.572,1.524 -4.572,4.57 v 68.52 H 406.56 c -3.046,0 -4.568,1.523 -4.568,4.568 v 27.41 z"
+   id="path143"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff;fill-opacity:1" />
+	</g>
+</g>
+<g
+   id="g149"
+   transform="matrix(0.04378156,0,0,0.04378156,0,-9.67e-5)"
+   style="fill:#ffffff;fill-opacity:1">
+</g>
+<g
+   id="g151"
+   transform="matrix(0.04378156,0,0,0.04378156,0,-9.67e-5)"
+   style="fill:#ffffff;fill-opacity:1">
+</g>
+<g
+   id="g153"
+   transform="matrix(0.04378156,0,0,0.04378156,0,-9.67e-5)"
+   style="fill:#ffffff;fill-opacity:1">
+</g>
+<g
+   id="g155"
+   transform="matrix(0.04378156,0,0,0.04378156,0,-9.67e-5)"
+   style="fill:#ffffff;fill-opacity:1">
+</g>
+<g
+   id="g157"
+   transform="matrix(0.04378156,0,0,0.04378156,0,-9.67e-5)"
+   style="fill:#ffffff;fill-opacity:1">
+</g>
+<g
+   id="g159"
+   transform="matrix(0.04378156,0,0,0.04378156,0,-9.67e-5)"
+   style="fill:#ffffff;fill-opacity:1">
+</g>
+<g
+   id="g161"
+   transform="matrix(0.04378156,0,0,0.04378156,0,-9.67e-5)"
+   style="fill:#ffffff;fill-opacity:1">
+</g>
+<g
+   id="g163"
+   transform="matrix(0.04378156,0,0,0.04378156,0,-9.67e-5)"
+   style="fill:#ffffff;fill-opacity:1">
+</g>
+<g
+   id="g165"
+   transform="matrix(0.04378156,0,0,0.04378156,0,-9.67e-5)"
+   style="fill:#ffffff;fill-opacity:1">
+</g>
+<g
+   id="g167"
+   transform="matrix(0.04378156,0,0,0.04378156,0,-9.67e-5)"
+   style="fill:#ffffff;fill-opacity:1">
+</g>
+<g
+   id="g169"
+   transform="matrix(0.04378156,0,0,0.04378156,0,-9.67e-5)"
+   style="fill:#ffffff;fill-opacity:1">
+</g>
+<g
+   id="g171"
+   transform="matrix(0.04378156,0,0,0.04378156,0,-9.67e-5)"
+   style="fill:#ffffff;fill-opacity:1">
+</g>
+<g
+   id="g173"
+   transform="matrix(0.04378156,0,0,0.04378156,0,-9.67e-5)"
+   style="fill:#ffffff;fill-opacity:1">
+</g>
+<g
+   id="g175"
+   transform="matrix(0.04378156,0,0,0.04378156,0,-9.67e-5)"
+   style="fill:#ffffff;fill-opacity:1">
+</g>
+<g
+   id="g177"
+   transform="matrix(0.04378156,0,0,0.04378156,0,-9.67e-5)"
+   style="fill:#ffffff;fill-opacity:1">
+</g>
+</svg>
\ No newline at end of file
diff --git a/src/components/Checkbox.vue b/src/components/Checkbox.vue
index f31c8944..8f8a3899 100644
--- a/src/components/Checkbox.vue
+++ b/src/components/Checkbox.vue
@@ -4,51 +4,48 @@
 </template>
 
 <script>
-    import { color } from '../themer';
-
-    export default {
-        name: 'checkbox',
-        props: ['value'],
+import { color } from '../themer';
+
+export default {
+    name: 'checkbox',
+    props: ['value'],
+
+    mounted() {
+        this.updateStyle();
+    },
+    data() {
+        return {
+            checked: this.value
+        }
+    },
 
-        mounted() {
+    methods: {
+        update() {
+            this.$emit('input', this.checked = !this.checked);
             this.updateStyle();
         },
-        data() {
-            return {
-                checked: this.value
-            }
-        },
+        updateStyle() {
+            const style = this.$refs.box.style;
+            const col = this.checked ? color : null;
 
-        methods: {
-            update() {
-                this.$emit('input', this.checked = !this.checked);
-                this.updateStyle();
-            },
-            updateStyle() {
-                const style = this.$refs.box.style;
-                const col = this.checked ? color : null;
-
-                style['border-color'] = col;
-                style['background'] = col;
-            }
+            style['border-color'] = col;
+            style['background'] = col;
         }
     }
+}
 </script>
 
 <style lang="scss">
-    .checkbox {
-        border: solid 2px;
-        border-radius: 2px;
-
-        transition: border-color 150ms ease-in-out, background 125ms ease-in-out;
-
-        width: 30px;
-        height: 30px;
-
-        display: inline-block;
-    }
-
-    .checkbox:hover {
-        cursor: pointer;
-    }
+.checkbox {
+    border: solid 2px;
+    border-radius: 2px;
+    transition: border-color 150ms ease-in-out, background 125ms ease-in-out;
+    width: 30px;
+    height: 30px;
+    display: inline-block;
+}
+
+.checkbox:hover {
+    cursor: pointer;
+}
 </style>
diff --git a/src/components/Clock.vue b/src/components/Clock.vue
index 0db7e839..901f50f3 100644
--- a/src/components/Clock.vue
+++ b/src/components/Clock.vue
@@ -1,6 +1,10 @@
 <template>
     <div class="clock" :class="{ 'small': small }">
-        <span id="hours">{{ part !== '' ? hours : $options.filters.pad(hours) }}</span>:{{ minutes | pad }}<span id="part">{{ part }}</span>
+        <span id="hours">
+            {{ part !== '' ? hours : $options.filters.pad(hours) }}
+        </span>
+        :{{ minutes | pad }}
+        <span id="part">{{ part }}</span>
 
         <div id="date">
             {{ date }}
@@ -9,93 +13,91 @@
 </template>
 
 <script>
-    import { getLocale } from '@/translations';
-    import { settings } from '@/settings';
-
-    export default {
-        name: 'clock',
-        props: ['small'],
-
-        mounted() {
-            this.setTime();
-            this.interval = setInterval(this.setTime, 1000);
-        },
-
-        filters: {
-            pad: v => v.toString().padStart(2, '0')
-        },
-
-        methods: {
-            setTime() {
-                const date = new Date();
-
-                this.hours = date.getHours();
-                this.minutes = date.getMinutes();
-
-                if (settings.clock12) {
-                    this.part = this.hours >= 12 ? 'PM' : 'AM';
-                    this.hours = this.hours === 12 || this.hours === 0 ? 12 : this.hours % 12;
-                }
-
-                let strs = date.toLocaleDateString(getLocale(), {
-                    weekday: 'long',
-                    day: 'numeric',
-                    month: 'long',
-                    year: 'numeric'
-                }).split(' ');
-
-                // Capitalize date
-                let result = '';
-                strs.forEach(s => result += s.charAt(0).toUpperCase() + s.substring(1) + ' ');
-
-                this.date = result.substring(0, result.length - 1);
+import { getLocale } from '@/translations';
+import { settings } from '@/settings';
+
+export default {
+    name: 'clock',
+    props: ['small'],
+
+    mounted() {
+        this.setTime();
+        this.interval = setInterval(this.setTime, 1000);
+    },
+
+    filters: {
+        pad: v => v.toString().padStart(2, '0')
+    },
+
+    methods: {
+        setTime() {
+            const date = new Date();
+
+            this.hours = date.getHours();
+            this.minutes = date.getMinutes();
+
+            if (settings.clock12) {
+                this.part = this.hours >= 12 ? 'PM' : 'AM';
+                this.hours = this.hours === 12 || this.hours === 0 ? 12 : this.hours % 12;
             }
-        },
-
-        data() {
-            return {
-                hours: '00',
-                minutes: '00',
-                date: '',
-                part: ''
-            };
-        },
-
-        beforeDestroy() {
-            clearInterval(this.interval);
-        }
-    }
-</script>
 
-<style lang="scss" scoped>
-    .clock {
-        font-size: 164px;
-        font-weight: bold;
-        font-family: 'Alte Haas Grotesk';
-        line-height: 1.1;
-
-        text-align: center;
-        cursor: default;
-    }
+            let strs = date.toLocaleDateString(getLocale(), {
+                weekday: 'long',
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric'
+            }).split(' ');
 
-    .clock.small {
-        font-size: 138px;
+            // Capitalize date
+            let result = '';
+            strs.forEach(s => result += s.charAt(0).toUpperCase() + s.substring(1) + ' ');
 
-        #date {
-            font-size: 24px;
-            margin-top: 1.8vh;
+            this.date = result.substring(0, result.length - 1);
         }
+    },
+
+    data() {
+        return {
+            hours: '00',
+            minutes: '00',
+            date: '',
+            part: ''
+        };
+    },
+
+    beforeDestroy() {
+        clearInterval(this.interval);
     }
+}
+</script>
 
-    #part {
-        font-size: 18px;
-        font-weight: normal;
-    }
-
+<style lang="scss" scoped>
+.clock {
+    font-size: 164px;
+    font-weight: bold;
+    font-family: 'Alte Haas Grotesk';
+    line-height: 1.1;
+    text-align: center;
+    cursor: default;
+}
+
+.clock.small {
+    font-size: 138px;
     #date {
-        font-weight: normal;
-        margin-top: 2.25vh;
-        font-size: 28px;
-        cursor: default;
+        font-size: 24px;
+        margin-top: 1.8vh;
     }
+}
+
+#part {
+    font-size: 18px;
+    font-weight: normal;
+}
+
+#date {
+    font-weight: normal;
+    margin-top: 2.25vh;
+    font-size: 28px;
+    cursor: default;
+}
 </style>
diff --git a/src/components/Onboard.vue b/src/components/Onboard.vue
new file mode 100644
index 00000000..419ebf47
--- /dev/null
+++ b/src/components/Onboard.vue
@@ -0,0 +1,83 @@
+<template>
+    <div
+        class="simple-keyboard"
+        id="simple-keyboard"
+    ></div>
+</template>
+
+<script>
+
+import Keyboard from "simple-keyboard";
+import "simple-keyboard/build/css/index.css";
+
+export default {
+    name: "onboard-keyboard",
+    props: {
+        input: {
+            type: String
+        },
+        visibility: {
+            type: Function
+        }
+    },
+    data: () => ({
+        keyboard: null,
+        listenerID: null
+    }),
+    mounted() {
+        this.keyboard = new Keyboard({
+            onChange: this.onChange,
+            onKeyPress: this.onKeyPress
+        });
+        clearInterval(this.listenerID);
+        this.listenerID = setInterval(() => {
+            let classList = null;
+            try {
+                classList = document.getElementById('simple-keyboard').classList;
+            } catch {}
+
+            if (classList !== null
+            && !classList.contains('visible')
+            && this.visibility())
+                classList.add('visible');
+        }, 10);
+    },
+    methods: {
+        onChange(input) {
+            this.$emit("onChange", input);
+        },
+        onKeyPress(button) {
+            this.$emit("onKeyPress", button);
+            if (button === "{shift}" || button === "{lock}") this.handleShift();
+        },
+        handleShift() {
+            let currentLayout = this.keyboard.options.layoutName;
+            let shiftToggle = currentLayout === "default" ? "shift" : "default";
+
+            this.keyboard.setOptions({
+                layoutName: shiftToggle
+            });
+        }
+    },
+    watch: {
+        input(input) {
+            this.keyboard.setInput(input);
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+$keyboard-width: 50vw;
+
+.simple-keyboard {
+    position: absolute;
+    bottom: 12vh;
+    color: #222;
+    background-color: rgba(0,0,0,0.2);
+    backdrop-filter: blur(20px) saturate(200%);
+    width: $keyboard-width;
+    left: calc((100vw - #{$keyboard-width}) / 2);
+    visibility: hidden;
+}
+</style>
diff --git a/src/components/PowerButton.vue b/src/components/PowerButton.vue
index 6e03ba49..09370722 100644
--- a/src/components/PowerButton.vue
+++ b/src/components/PowerButton.vue
@@ -1,74 +1,95 @@
 <template>
-  <div class="power-button">
-    <div id="button-container" @click="disabled ? '' : apply()">
-      <img
-        id="power-button-icon"
-        :class="{ type }"
-        :src="require('../assets/images/' + type + '.svg')"
-      />
+    <div class="power-button">
+        <div id="button-container" @click="disabled ? '' : apply()">
+            <img id="power-button-icon"
+                :class="{ type }"
+                :src="require('../assets/images/' + type + '.svg')" />
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 import { settings } from "@/settings";
 
+export let keyboard_visible = false;
+
+export const keyboardVisible = () => keyboard_visible;
+
 export default {
-  name: "power-button",
-  props: ["type", "disabled"],
-  methods: {
-    apply() {
-      if (this.type === "back") {
-        this.$router.push(
-          settings.disableSplash || !settings.first
-            ? "/base/login"
-            : "/base/splash"
-        );
-        return;
-      }
+    name: "power-button",
+    props: {
+        type: {
+            type: String
+        },
+        disabled: {
+            type: Boolean
+        },
+        method: {
+            default: null,
+            type: Function,
+        }
+    },
+    methods: {
+        apply() {
+            if (this.type === "back") {
+                this.$router.push(
+                    settings.disableSplash || !settings.first ?
+                    "/base/login" :
+                    "/base/splash"
+                );
+                return;
+            }
+
+            if (this.type === "settings") {
+                this.$router.push("/setup");
+                return;
+            }
 
-      if (this.type === "settings") {
-        this.$router.push("/setup");
-        return;
-      }
+            if (this.type === "theming") {
+                this.$router.push("/theming");
+                return;
+            }
 
-      if (this.type === "theming") {
-        this.$router.push("/theming");
-        return;
-      }
+            if (this.type === "onboard") {
+                keyboard_visible = !keyboard_visible;
+                if (this.method !== null)
+                    this.method();
+                return;
+            }
 
-      setTimeout(lightdm[this.type], 1500);
-      this.$router.push(`/intro/${this.type}`);
+            setTimeout(lightdm[this.type], 1500);
+            this.$router.push(`/intro/${this.type}`);
+        }
+    },
+    data() {
+        return {
+            types: [
+                "shutdown", "suspend", "restart",
+                "settings", "back",
+                "onboard"
+            ]
+        };
     }
-  },
-  data() {
-    return {
-      types: ["shutdown", "suspend", "restart", "settings", "back"]
-    };
-  }
 };
 </script>
 
 <style lang="scss" scoped>
 @import "../theme";
-
 #button-container {
-  transition: background 125ms ease-in-out;
-  border-radius: 6px;
-  line-height: 1;
+    transition: background 125ms ease-in-out;
+    border-radius: 6px;
+    line-height: 1;
 }
 
 #button-container:hover {
-  background: rgba(255, 255, 255, 0.08);
-  cursor: pointer;
+    background: rgba(255, 255, 255, 0.08);
+    cursor: pointer;
 }
 
 #power-button-icon {
-  box-sizing: initial;
-
-  padding: 10px 10px 10px;
-
-  width: 20px;
-  height: 20px;
+    box-sizing: initial;
+    padding: 10px 10px 10px;
+    width: 20px;
+    height: 20px;
 }
 </style>
diff --git a/src/components/SelectItem.vue b/src/components/SelectItem.vue
index 11f41453..cba278a7 100644
--- a/src/components/SelectItem.vue
+++ b/src/components/SelectItem.vue
@@ -1,168 +1,156 @@
 <template>
-  <div
-    class="item"
-    :class="{ 'user': mode === 'user', 'desktop': mode === 'desktop', 'selected': selected }"
-    v-theming="['border-bottom-color']"
-    @click="select()"
-  >
-    <div class="icon-container" v-if="!noicon">
-      <img class="icon" :src="icon()" />
+    <div class="item" :class="{
+            'user': mode === 'user',
+            'desktop': mode === 'desktop',
+            'selected': selected
+        }"
+        v-theming="['border-bottom-color']"
+        @click="select()">
+        <div class="icon-container" v-if="!noicon">
+            <img class="icon" :src="icon()" />
+        </div>
+        {{ mode === 'user' ? item.display_name : item.name }}
+        <span v-if="mode === 'user'">
+            &nbsp;&mdash;&nbsp;
+            <span class="username">
+                {{ item.username }}</span>&commat;{{ hostname }}
+        </span>
     </div>
-    {{ mode === 'user' ? item.display_name : item.name }}
-    <span v-if="mode === 'user'">
-      &nbsp;&mdash;&nbsp;
-      <span class="username">{{ item.username }}</span>
-    </span>
-  </div>
 </template>
 
 <script>
-import { avatar } from "@/settings";
+import { avatar, settings } from "@/settings";
 
 export default {
-  name: "select-item",
-  props: ["mode", "item", "selected", "noicon"],
+    name: "select-item",
+    props: ["mode", "item", "selected", "noicon"],
 
-  methods: {
-    select() {
-      this.$emit("select");
+    data() {
+        return {
+            hostname: settings.hostname
+        };
     },
-    icon() {
-      if (this.mode === "user") {
-        return avatar(this.item.image);
-      }
-
-      if (this.mode === "desktop") {
-        let key = this.item.key.toLowerCase();
-        let icon = "unknown";
-
-        if (key.indexOf("plasma") > -1 || key.indexOf("kde") > -1) {
-          icon = "kde";
-        }
-        else if (key.indexOf("gnome") > -1) {
-          icon = "gnome";
-        }
-        else if (key.indexOf("xfce") > -1) {
-          icon = "xfce";
-        }
-        else if (key.indexOf("unity") > -1 || key.indexOf("ubuntu") > -1) {
-          icon = "ubuntu";
-        }
-        else if (key.indexOf("dde") > -1 || key.indexOf("deepin") > -1) {
-          icon = "deepin";
-        }
-        else if (key.indexOf("lxde") > -1 || key.indexOf("lxqt") > -1) {
-          icon = "lxde";
-        }
-        else if (key.indexOf("pantheon") > -1 || key.indexOf("elementary") > -1) {
-          icon = "elementary";
-        }
-        else if (key.indexOf("mate") > -1) {
-          icon = "mate";
-        }
-        else if (key.indexOf("cinnamon") > -1 || key.indexOf("mint") > -1) {
-          icon = "cinnamon";
-        }
-        else if (
-          key.indexOf("enlightenment") > -1 ||
-          (key.length === 3 && /e[1-9]{2}/g.test(key))
-        ) {
-          icon = "enlightenment";
-        }
-        else if (key.indexOf("liri") > -1) {
-          icon = "liri";
-        }
-        else if (key.indexOf("i3") > -1) {
-          icon = "i3";
-        }
-        else if (key.indexOf("xmonad") > -1) {
-          icon = "xmonad";
-        }
-        else if (key.indexOf("budgie") > -1 || key.indexOf("solus") > -1) {
-          icon = "budgie";
+    methods: {
+        select() {
+            this.$emit("select");
+        },
+        icon() {
+            if (this.mode === "user") {
+                return avatar(this.item.image);
+            }
+
+            if (this.mode === "desktop") {
+                let key = this.item.key.toLowerCase();
+                let icon = "unknown";
+
+                if (key.indexOf("plasma") > -1 || key.indexOf("kde") > -1) {
+                    icon = "kde";
+                } else if (key.indexOf("gnome") > -1) {
+                    icon = "gnome";
+                } else if (key.indexOf("xfce") > -1) {
+                    icon = "xfce";
+                } else if (key.indexOf("unity") > -1 || key.indexOf("ubuntu") > -1) {
+                    icon = "ubuntu";
+                } else if (key.indexOf("dde") > -1 || key.indexOf("deepin") > -1) {
+                    icon = "deepin";
+                } else if (key.indexOf("lxde") > -1 || key.indexOf("lxqt") > -1) {
+                    icon = "lxde";
+                } else if (key.indexOf("pantheon") > -1 || key.indexOf("elementary") > -1) {
+                    icon = "elementary";
+                } else if (key.indexOf("mate") > -1) {
+                    icon = "mate";
+                } else if (key.indexOf("cinnamon") > -1 || key.indexOf("mint") > -1) {
+                    icon = "cinnamon";
+                } else if (
+                    key.indexOf("enlightenment") > -1 ||
+                    (key.length === 3 && /e[1-9]{2}/g.test(key))
+                ) {
+                    icon = "enlightenment";
+                } else if (key.indexOf("liri") > -1) {
+                    icon = "liri";
+                } else if (key.indexOf("i3") > -1) {
+                    icon = "i3";
+                } else if (key.indexOf("xmonad") > -1) {
+                    icon = "xmonad";
+                } else if (key.indexOf("budgie") > -1 || key.indexOf("solus") > -1) {
+                    icon = "budgie";
+                }
+
+                return require("../assets/images/desktops/" + icon + ".png");
+            }
         }
-
-        return require("../assets/images/desktops/" + icon + ".png");
-      }
     }
-  }
 };
 </script>
 
 <style lang="scss" scoped>
 .item {
-  font-family: "Input Mono";
-
-  border-radius: 10px;
-  transition: background-color 125ms ease-in-out;
-
-  min-width: 150px;
+    font-family: "Input Mono";
+    border-radius: 10px;
+    transition: background-color 125ms ease-in-out;
+    min-width: 150px;
 }
 
 .item.selected {
-  border-bottom: solid 2px;
-  background: rgba(255, 255, 255, 0.055);
+    border-bottom: solid 2px;
+    background: rgba(255, 255, 255, 0.055);
 }
 
 .item:hover {
-  cursor: pointer;
-  background: rgba(255, 255, 255, 0.115);
+    cursor: pointer;
+    background: rgba(255, 255, 255, 0.115);
 }
 
 .item.desktop {
-  font-weight: 400;
-  font-size: 16px;
-  padding: 7px 19px;
-  margin-right: 10px;
-  display: inline-flex;
-  /*justify-content: center;*/
-  align-items: center;
+    font-weight: 400;
+    font-size: 16px;
+    padding: 7px 19px;
+    margin-right: 10px;
+    display: inline-flex;
+    /*justify-content: center;*/
+    align-items: center;
 }
 
 .item.user {
-  font-weight: 400;
-  font-size: 16px;
-  padding: 3px 18px 8px;
-  margin-bottom: 25px;
+    font-weight: 400;
+    font-size: 16px;
+    padding: 3px 18px 8px;
+    margin-bottom: 25px;
 }
 
 .username {
-  font-weight: bold;
+    font-weight: bold;
 }
 
 .icon-container {
-  display: inline-block;
-
-  width: 45px;
-  height: 45px;
-
-  margin-right: 20px;
+    display: inline-block;
+    width: 45px;
+    height: 45px;
+    margin-right: 20px;
 }
 
 .item.user .icon-container {
-  margin-right: 8px;
+    margin-right: 8px;
 }
 
 .icon {
-  height: 45px;
-  margin-bottom: -6px;
+    height: 45px;
+    margin-bottom: -6px;
 }
 
 .item.user .icon {
-  margin-bottom: -8px;
+    margin-bottom: -8px;
 }
 
 @media (max-height: 850px) {
-  .item.user {
-    font-size: 16px;
-  }
-
-  .item.desktop {
-    font-size: 16px;
-  }
-
-  .icon {
-    margin-bottom: -5px;
-  }
+    .item.user {
+        font-size: 16px;
+    }
+    .item.desktop {
+        font-size: 16px;
+    }
+    .icon {
+        margin-bottom: -5px;
+    }
 }
 </style>
diff --git a/src/lightdm.js b/src/lightdm.js
index 4474aba5..4acc7cff 100644
--- a/src/lightdm.js
+++ b/src/lightdm.js
@@ -1,6 +1,6 @@
 'use strict';
 
-const DEBUG_PASSWORD = 'test';
+const DEBUG_PASSWORD = 'password';
 
 window.lightdm_debug = window.lightdm === undefined;
 
@@ -19,6 +19,7 @@ if (window.lightdm_debug) {
 
     window.lightdm = {
         is_authenticated: false,
+        hostname: 'malorum',
         authentication_user: undefined,
         default_session: 'plasma-shell',
         can_suspend: true,
diff --git a/src/settings.js b/src/settings.js
index a6a18111..e91d2bc7 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -1,33 +1,38 @@
 let local = localStorage.getItem("settings");
 
 if (local === "undefined") {
-  local = null;
+    local = null;
 }
 
 export let settings = local ? JSON.parse(local) : {
-  first: true,
-
-  mode: "classic",
-
-  disableSplash: false,
-  disableSplashText: false,
-  disableIntro: false,
-  disableFade: false,
-  roundAvatar: true,
-  disableAvatar: false,
-  disableZoom: false,
-  clock12: false,
-  randomizeBG: false,
-
-  user: lightdm.users[0],
-  desktop: lightdm.sessions[0]
+    first: true,
+
+    mode: "classic",
+
+    disableSplash: false,
+    disableSplashText: false,
+    disableIntro: false,
+    disableFade: false,
+    roundAvatar: true,
+    disableAvatar: false,
+    disableZoom: false,
+    clock12: false,
+    randomizeBG: false,
+
+    hostname: lightdm.hostname,
+    user: lightdm.users[0],
+    desktop: lightdm.sessions[0]
 };
 
-// Handle display name/avatar change.
+// Handle display name/avatar/hostname change.
+if (lightdm.hostname !== settings.hostname)
+    settings.hostname = lightdm.hostname;
+
 lightdm.users.forEach(u => {
     if (settings.user.username === u.username)
         settings.user = u;
 });
+
 lightdm.sessions.forEach(s => {
     if (settings.desktop.username === s.key)
         settings.desktop = s;
@@ -36,28 +41,28 @@ lightdm.sessions.forEach(s => {
 save();
 
 export function save(s) {
-  localStorage.setItem(
-    "settings",
-    JSON.stringify(s ? (settings = s) : settings)
-  );
+    localStorage.setItem(
+        "settings",
+        JSON.stringify(s ? (settings = s) : settings)
+    );
 }
 
 export function avatar(avi) {
-  if (!avi || avi === "") {
-    return require("./assets/images/eh8.png");
-  }
+    if (!avi || avi === "") {
+        return require("./assets/images/eh8.png");
+    }
 
-  if (avi === "cicero") {
-    return require("./assets/images/cicero.png")
-  }
+    if (avi === "cicero") {
+        return require("./assets/images/cicero.png")
+    }
 
-  if (avi === "eh8") {
-    return require("./assets/images/eh8.png");
-  }
+    if (avi === "eh8") {
+        return require("./assets/images/eh8.png");
+    }
 
-  if (avi === "litarvan") {
-    return require("./assets/images/litarvan.png");
-  }
+    if (avi === "litarvan") {
+        return require("./assets/images/litarvan.png");
+    }
 
-  return avi;
+    return avi;
 }
diff --git a/src/translations.js b/src/translations.js
index dfdc084e..d14f67f4 100644
--- a/src/translations.js
+++ b/src/translations.js
@@ -94,12 +94,12 @@ const translations = {
         trigger: 'Presiona Espacio o Enter para iniciar sesión',
         password: 'Contraseña...'
     },
-    
+
     // Hebrew (TODO)
     'he': {
         trigger: 'לחץ על רווח או Enter כדי להכנס',
         password: 'ססמה...',
-        
+
         shutdown: 'מכבה...',
         suspend: 'משהה...',
         restart: 'מפעיל מחדש...',
diff --git a/src/views/Base.vue b/src/views/Base.vue
index 433b2a9e..cea7a0d2 100644
--- a/src/views/Base.vue
+++ b/src/views/Base.vue
@@ -1,57 +1,51 @@
 <template>
-  <div class="base">
-    <div class="bg"
-         :style="{ 'background-image': 'url(' + current_background.default + ')' }">
+    <div class="base">
+        <div class="bg" :style="{ 'background-image': 'url(' + current_background.default + ')' }">
+        </div>
+        <transition name="fade">
+            <router-view />
+        </transition>
     </div>
-    <transition name="fade">
-      <router-view />
-    </transition>
-  </div>
 </template>
 
 <script>
 import { background } from "../themer";
 
 export default {
-  name: "l-base",
+    name: "l-base",
 
-  data() {
-    return {
-      current_background: background,
-    };
-  },
-  methods: {
-    isBlurred() {
-      let name = this.$router.currentRoute.name;
-      let blur_now = name === "login" || name === "select";
-      if (blur_now)
-        this.current_background = background.blurred;
-      else
-        this.current_background = background.default;
-
-      return blur_now;
+    data() {
+        return {
+            current_background: background,
+        };
     },
-  }
+    methods: {
+        isBlurred() {
+            let name = this.$router.currentRoute.name;
+            let blur_now = name === "login" || name === "select";
+            if (blur_now)
+                this.current_background = background.blurred;
+            else
+                this.current_background = background.default;
+
+            return blur_now;
+        },
+    }
 };
 </script>
 
 <style lang="scss">
 @import "../theme";
-
 .bg {
-  background-size: cover;
-  position: fixed;
-  left: 0;
-  right: 0;
-
-  display: block;
-  width: 100vw;
-  height: 100vh;
-
-  z-index: -1;
-
-  transition: background-image 200ms ease;
-
-  color: $secondary-color;
+    background-size: cover;
+    position: fixed;
+    left: 0;
+    right: 0;
+    display: block;
+    width: 100vw;
+    height: 100vh;
+    z-index: -1;
+    transition: background-image 200ms ease;
+    color: $secondary-color;
 }
 </style>
diff --git a/src/views/Intro.vue b/src/views/Intro.vue
index ed9e64fa..e027b1f4 100644
--- a/src/views/Intro.vue
+++ b/src/views/Intro.vue
@@ -1,15 +1,14 @@
 <template>
-  <div id="intro">
-    <transition name="logo-fade">
-      <div id="content" v-if="show">
-        <img v-if="state === 'initial'" id="logo" src="../assets/images/os.png" />
-        <p v-else id="power-text">
-          <img id="power-icon" :src="require('../assets/images/' + state + '.svg')" />
-          {{ text }}
-        </p>
-      </div>
-    </transition>
-  </div>
+    <div id="intro">
+        <transition name="logo-fade">
+            <div id="content" v-if="show">
+                <img v-if="state === 'initial'" id="logo" src="../assets/images/os.png" />
+                <p v-else id="power-text">
+                    <img id="power-icon" :src="require('../assets/images/' + state + '.svg')" /> {{ text }}
+                </p>
+            </div>
+        </transition>
+    </div>
 </template>
 
 <script>
@@ -17,87 +16,85 @@ import { trans } from "@/translations";
 import { settings } from "@/settings";
 
 export default {
-  name: "intro",
-
-  mounted() {
-    if (settings.disableIntro && this.state === "initial") {
-      this.$router.push(
-        settings.disableSplash ? "/base/login" : "/base/splash"
-      );
-      return;
-    }
-
-    if (this.state === "login") {
-      return;
+    name: "intro",
+
+    mounted() {
+        if (settings.disableIntro && this.state === "initial") {
+            this.$router.push(
+                settings.disableSplash ? "/base/login" : "/base/splash"
+            );
+            return;
+        }
+
+        if (this.state === "login") {
+            return;
+        }
+
+        this.show = true;
+
+        if (this.state === "initial") {
+            setTimeout(() => {
+                this.show = false;
+                this.$router.push(
+                    settings.first ?
+                    "/setup" :
+                    settings.disableSplash ?
+                    "/base/login" :
+                    "/base/splash"
+                );
+            }, 2000);
+        }
+    },
+
+    data() {
+        return {
+            show: false,
+            state: this.$route.params.state,
+            text: trans(this.$route.params.state)
+        };
     }
-
-    this.show = true;
-
-    if (this.state === "initial") {
-      setTimeout(() => {
-        this.show = false;
-        this.$router.push(
-          settings.first
-            ? "/setup"
-            : settings.disableSplash
-            ? "/base/login"
-            : "/base/splash"
-        );
-      }, 2000);
-    }
-  },
-
-  data() {
-    return {
-      show: false,
-      state: this.$route.params.state,
-      text: trans(this.$route.params.state)
-    };
-  }
 };
 </script>
 
 <style lang="scss" scoped>
 @import "../theme";
-
 #intro {
-  cursor: none;
-  background-color: $outer-background;
-  display: flex;
-  align-items: center;
-  text-align: center;
+    cursor: none;
+    background-color: $outer-background;
+    display: flex;
+    align-items: center;
+    text-align: center;
 }
 
 #content {
-  margin-left: auto;
-  margin-right: auto;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 #logo {
-  height: 125px;
+    height: 125px;
 }
 
 #power-text {
-  font-family: "Alte Haas Grotesk";
-  font-weight: normal;
-  color: $outer-foreground;
-  font-size: 16px;
+    font-family: "Alte Haas Grotesk";
+    font-weight: normal;
+    color: $outer-foreground;
+    font-size: 16px;
 }
 
 .logo-fade-enter-active,
 .logo-fade-leave-active {
-  transition: opacity 1s;
+    transition: opacity 1s;
 }
 
 .logo-fade-enter,
 .logo-fade-leave-to {
-  opacity: 0;
+    opacity: 0;
 }
 
 #power-icon {
-  width: 24px;
-
-  margin-bottom: -5px;
-  margin-right: 4px;
+    width: 24px;
+    margin-bottom: -5px;
+    margin-right: 4px;
 }
 </style>
diff --git a/src/views/Login.vue b/src/views/Login.vue
index c0d571c6..b4f7061d 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,63 +1,70 @@
 <template>
-  <div id="login" class="login"
-    :class="{ 'compact': isCompact }"
-    :style="{ 'background-image': 'url(' + current_background.blurred + ')' }">
-    <Clock :small="true" v-if="isCompact" />
-
-    <div id="login-content" :class="{ 'no-avatar': settings.disableAvatar }">
-      <div id="avatar" v-if="!settings.disableAvatar">
-        <img
-          id="avatar-image"
-          :class="{ 'round': settings.roundAvatar }"
-          :src="avatar(settings.user.image)"
-        />
-      </div>
-
-      <div id="login-form">
-        <SelectItem
-          mode="user"
-          :item="settings.user"
-          @select="!immutable && $router.push('/base/select/user')"
-          :noicon="true"
-        />
-
-        <form v-if="!immutable" @submit.prevent="submit">
-          <input
-            id="password"
-            type="password"
-            v-model="password"
-            :placeholder="passwordLabel"
-            :readonly="logging"
-            :class="{'error': error}"
-          />
-        </form>
-
-        <div v-else id="password" class="immutable"></div>
-        <div id="info">{{ info }}</div>
-
-        <SelectItem mode="desktop" :item="settings.desktop" @select="!immutable && $router.push('/base/select/desktop')" />
-      </div>
-    </div>
-
-    <div v-if="!immutable">
-      <PowerButton id="settings" type="settings"></PowerButton>
-
-      <transition name="power-fade">
-        <div id="power-list" v-if="powerList">
-          <PowerButton v-if="canSuspend" id="suspend" type="suspend"></PowerButton>
-          <PowerButton id="reboot" type="restart"></PowerButton>
+    <div id="login" class="login"
+        :class="{ 'compact': isCompact }"
+        :style="{ 'background-image': 'url(' + current_background.blurred + ')' }">
+        <Clock :small="true" v-if="isCompact" />
+
+        <div id="login-content" :class="{ 'no-avatar': settings.disableAvatar }">
+            <div id="avatar" v-if="!settings.disableAvatar">
+                <img id="avatar-image"
+                    :class="{ 'round': settings.roundAvatar }"
+                    :src="avatar(settings.user.image)" />
+            </div>
+
+            <div id="login-form">
+                <SelectItem mode="user"
+                    :item="settings.user"
+                    @select="!immutable && $router.push('/base/select/user')"
+                    :noicon="true" />
+
+                <form v-if="!immutable" @submit.prevent="submit">
+                    <input id="password" type="password"
+                        v-model="password"
+                        :placeholder="passwordLabel"
+                        :readonly="logging"
+                        class="password"
+                        :class="{'error': error}"
+                        @input="onInputChange" />
+                </form>
+
+                <div v-else id="password" class="immutable password"></div>
+                <div id="info">{{ info }}</div>
+
+                <SelectItem mode="desktop"
+                    :item="settings.desktop"
+                    @select="!immutable && $router.push('/base/select/desktop')" />
+            </div>
         </div>
-      </transition>
 
-      <div @click="powerList = !powerList">
-        <PowerButton id="shutdown" type="shutdown" :disabled="!powerList"></PowerButton>
-      </div>
+        <Onboard
+            :visibility="keyboardVisible"
+            @onChange="onChange"
+            @onKeyPress="onKeyPress"
+            :input="password"
+            :key="onboardKey"/>
+
+        <div v-if="!immutable">
+            <PowerButton id="settings" type="settings"></PowerButton>
+            <PowerButton id="onboard"  type="onboard"
+                :method="updateOnboard"></PowerButton>
+
+            <transition name="power-fade">
+                <div id="power-list" v-if="powerList">
+                    <PowerButton v-if="canSuspend" id="suspend" type="suspend"></PowerButton>
+                    <PowerButton id="reboot" type="restart"></PowerButton>
+                </div>
+            </transition>
+
+            <div @click="powerList = !powerList">
+                <PowerButton id="shutdown" type="shutdown" :disabled="!powerList"></PowerButton>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import PowerButton from "@/components/PowerButton.vue";
+import PowerButton, { keyboardVisible } from "@/components/PowerButton.vue";
+import Onboard from "@/components/Onboard.vue";
 import Clock from "@/components/Clock.vue";
 import { avatar, settings } from "@/settings";
 import { trans } from "@/translations";
@@ -65,255 +72,264 @@ import SelectItem from "../components/SelectItem";
 import { background } from '../themer';
 
 export default {
-  name: "login",
-  components: { SelectItem, PowerButton, Clock },
-  props: ["immutable", "compact"],
-
-  data() {
-    return {
-      canSuspend: lightdm.can_suspend,
-      passwordLabel: trans("password"),
-      isCompact: this.immutable ? this.compact : settings.mode === "compact",
-      settings,
-      powerList: false,
-      logging: false,
-      error: false,
-      info: "",
-      current_background: background,
-      password: ""
-    };
-  },
-  mounted() {
-    window.addEventListener("keyup", this.keyup);
-    setTimeout(() => {
-      let p = document.querySelector("#password");
-      p && p.focus();
-    }, 650);
-  },
-  methods: {
-    avatar,
-    keyup(event) {
-      if (event.which === 27) {
-        let path = settings.disableSplash ? "/base/login" : "/base/splash";
-        if (this.$route.path !== path)
-            this.$router.push(path).catch(() => {});
-      }
-
-      if (event.getModifierState("CapsLock")) {
-        this.info = trans("capsLock");
-      } else {
-        this.info = "";
-      }
+    name: "login",
+    components: { SelectItem, PowerButton, Clock, Onboard },
+    props: ["immutable", "compact"],
+
+    data() {
+        return {
+            canSuspend: lightdm.can_suspend,
+            passwordLabel: trans("password"),
+            isCompact: this.immutable ? this.compact : settings.mode === "compact",
+            settings,
+            powerList: false,
+            logging: false,
+            error: false,
+            info: "",
+            current_background: background,
+            password: "",
+            keyboardVisible: keyboardVisible,
+            onboardKey: 0
+        };
     },
-    submit() {
-      this.logging = true;
-
-      // Workaround for a form submit bug reloading the route
-      setTimeout(() => {
-        lightdm_login(
-          this.settings.user.username,
-          this.password,
-          () => {
-            setTimeout(() => lightdm_start(this.settings.desktop.key), 400);
-            this.$router.push(settings.disableFade ? "/base" : "/intro/login");
-          },
-          () => {
-            this.error = true;
-            this.password = "";
-            this.logging = false;
-          }
-        );
-      }, 150);
+    mounted() {
+        window.addEventListener("keyup", this.keyup);
+        setTimeout(() => {
+            let p = document.querySelector("#password");
+            p && p.focus();
+        }, 650);
+    },
+    methods: {
+        avatar,
+        updateOnboard() {
+            this.onboardKey += 1;
+        },
+        onChange(input) {
+            this.password = input;
+            console.log("resulting", this.password)
+        },
+        onKeyPress(button) {
+            console.log("button", button);
+            if (button === "{enter}")
+                this.submit();
+        },
+        onInputChange(input) {
+            this.password = input.target.value;
+        },
+        keyup(event) {
+            if (event.which === 27) {
+                let path = settings.disableSplash ? "/base/login" : "/base/splash";
+                if (this.$route.path !== path)
+                    this.$router.push(path);
+            }
+
+            if (event.getModifierState("CapsLock")) {
+                this.info = trans("capsLock");
+            } else {
+                this.info = "";
+            }
+        },
+        submit() {
+            this.logging = true;
+
+            // Workaround for a form submit bug reloading the route
+            setTimeout(() => {
+                lightdm_login(
+                    this.settings.user.username,
+                    this.password,
+                    () => {
+                        setTimeout(() => lightdm_start(this.settings.desktop.key), 400);
+                        this.$router.push(settings.disableFade ? "/base" : "/intro/login");
+                    },
+                    () => {
+                        this.error = true;
+                        this.password = "";
+                        this.logging = false;
+                    }
+                );
+            }, 150);
+        }
     }
-  }
 };
 </script>
 
 <style lang="scss" scoped>
 @import "../theme";
+
 .login {
-  width: 100vw;
-  height: 100vh;
-  background-size: cover;
+    width: 100vw;
+    height: 100vh;
+    background-size: cover;
 }
 
 .login.compact {
-  .clock {
-    margin-top: 6vh;
-  }
-
-  #avatar,
-  #login-form {
-    display: inline-block;
-    vertical-align: top;
-  }
-
-  #avatar {
-    margin-top: 0;
-  }
-
-  #login-form {
-    text-align: left;
-    margin-left: 42px;
-  }
-
-  .item.user {
-    margin-bottom: 0;
-  }
-
-  #login-content.no-avatar {
-    .item.user {
-      margin-bottom: 2vh;
+    .clock {
+        margin-top: 6vh;
     }
-
-    .item.desktop {
-      margin-top: 4vh;
+    #avatar,
+    #login-form {
+        display: inline-block;
+        vertical-align: top;
+    }
+    #avatar {
+        margin-top: 0;
     }
-
     #login-form {
-      margin-left: 0;
-      text-align: left;
+        text-align: left;
+        margin-left: 42px;
+    }
+    .item.user {
+        margin-bottom: 0;
+    }
+    #login-content.no-avatar {
+        .item.user {
+            margin-bottom: 2vh;
+        }
+        .item.desktop {
+            margin-top: 4vh;
+        }
+        #login-form {
+            margin-left: 0;
+            text-align: left;
+        }
+    }
+    .item.user {
+        margin-top: 0;
+    }
+    #password {
+        margin-top: 2.5vh;
+    }
+    #info {
+        font-size: 16px;
+        height: 26px;
+        margin-top: 5px;
+    }
+    .item.desktop {
+        margin-top: 0;
     }
-  }
-
-  .item.user {
-    margin-top: 0;
-  }
-
-  #password {
-    margin-top: 2.5vh;
-  }
-
-  #info {
-    font-size: 16px;
-    height: 26px;
-    margin-top: 5px;
-  }
-
-  .item.desktop {
-    margin-top: 0;
-  }
 }
 
 .item.user {
-  margin-bottom: 3.5vh;
+    margin-bottom: 3.5vh;
 }
 
 #login-content {
-  margin-top: 35vh;
+    margin-top: 35vh;
 }
 
 #login-content.no-avatar {
-  margin-top: calc(50vh - 165px);
-
-  .item.user {
-    margin-top: 0;
-  }
-
-  .item.desktop {
-    margin-top: 5.5vh;
-  }
+    margin-top: calc(50vh - 165px);
+    .item.user {
+        margin-top: 0;
+    }
+    .item.desktop {
+        margin-top: 5.5vh;
+    }
 }
 
 #avatar-image {
-  height: 80px;
+    height: 80px;
 }
 
 .round {
-  border-radius: 100px;
+    border-radius: 100px;
 }
 
 .item.user {
-  margin-top: 0 /*3.5vh*/;
+    margin-top: 0/*3.5vh*/
+    ;
 }
 
 #password {
-  font-weight: 400;
-  font-family: "Input Mono";
+    font-weight: 400;
+    font-family: "Input Mono";
 }
 
 #password,
 #password:focus {
-  outline: none;
+    outline: none;
 }
 
 #password::placeholder {
-  color: rgba($secondary-color, 0.55);
-  opacity: 1;
+    color: rgba($secondary-color, 0.55);
+    opacity: 1;
 }
 
 #password {
-  background: $password-field-background;
-  caret-color: $password-field-caret;
-  color: $secondary-color;
-
-  padding-left: 15px;
-  padding-right: 15px;
-  font-size: 16px;
-
-  width: 200px;
-  height: 40px;
-
-  border: 4px solid transparent;
-  border-radius: 6px;
+    background: $password-field-background;
+    caret-color: $password-field-caret;
+    color: $secondary-color;
+    padding-left: 15px;
+    padding-right: 15px;
+    font-size: 16px;
+    width: 200px;
+    height: 40px;
+    border: 4px solid transparent;
+    border-radius: 6px;
 }
 
 #password.error {
-  border-bottom-color: $error-color;
+    border-bottom-color: $error-color;
 }
 
 #password.immutable {
-  display: inline-block;
-  background: $password-field-background-setup;
-  border-bottom-width: 6px;
+    display: inline-block;
+    background: $password-field-background-setup;
+    border-bottom-width: 6px;
 }
 
 #info {
-  color: rgba(255, 255, 255, 0.875);
-  font-size: 16px;
-  font-weight: 400;
-  margin-top: 15px;
-  height: 31px;
+    color: rgba(255, 255, 255, 0.875);
+    font-size: 16px;
+    font-weight: 400;
+    margin-top: 15px;
+    height: 31px;
 }
 
 .item.desktop {
-  margin-top: 6vh;
-  display: inline-flex;
+    margin-top: 6vh;
+    display: inline-flex;
 }
 
 .item.user {
-  display: inline-block;
+    display: inline-block;
 }
 
 #settings {
-  position: absolute;
-  bottom: 20px;
-  left: 20px;
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
 }
 
 #suspend {
-  position: absolute;
-  bottom: 170px;
-  right: 20px;
+    position: absolute;
+    bottom: 170px;
+    right: 20px;
 }
 
 #reboot {
-  position: absolute;
-  bottom: 95px;
-  right: 20px;
+    position: absolute;
+    bottom: 95px;
+    right: 20px;
 }
 
 #shutdown {
-  position: absolute;
-  bottom: 20px;
-  right: 20px;
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+}
+
+#onboard {
+    position: absolute;
+    bottom: 20px;
+    right: 80px;
 }
 
 .power-fade-enter-active {
-  transition: all 0.3s ease;
+    transition: all 0.3s ease;
 }
 
 .power-fade-enter {
-  opacity: 0;
+    opacity: 0;
 }
 </style>
diff --git a/src/views/Select.vue b/src/views/Select.vue
index e9da7d31..f9200060 100644
--- a/src/views/Select.vue
+++ b/src/views/Select.vue
@@ -1,16 +1,14 @@
 <template>
-  <div id="select">
-    <div id="content">
-      <SelectItem
-        v-for="item of content"
-        :key="item[type.key]"
-        :mode="mode"
-        :item="item"
-        :selected="item[type.key] === selected[type.key]"
-        @select="select(item)"
-      />
+    <div id="select">
+        <div id="content">
+            <SelectItem
+                v-for="item of content"
+                :key="item[type.key]"
+                :mode="mode" :item="item"
+                :selected="item[type.key] === selected[type.key]"
+                @select="select(item)" />
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -18,45 +16,43 @@ import { save, settings } from "@/settings";
 import SelectItem from "../components/SelectItem";
 
 const modes = {
-  user: { field: "users", name: "display_name", key: "username" },
-  desktop: { field: "sessions", name: "name", key: "key" }
+    user: { field: "users", name: "display_name", key: "username" },
+    desktop: { field: "sessions", name: "name", key: "key" }
 };
 
 export default {
-  name: "select",
-  components: { SelectItem },
-  data() {
-    let mode = this.$route.params.mode;
-    let type = modes[mode];
-
-    return {
-      mode,
-      type,
-      content: lightdm[type.field] || [],
-      selected: settings[mode] || {}
-    };
-  },
-
-  methods: {
-    select(obj) {
-      settings[this.mode] = obj;
-      save();
-      this.$router.back();
+    name: "select",
+    components: { SelectItem },
+    data() {
+        let mode = this.$route.params.mode;
+        let type = modes[mode];
+
+        return {
+            mode,
+            type,
+            content: lightdm[type.field] || [],
+            selected: settings[mode] || {}
+        };
+    },
+
+    methods: {
+        select(obj) {
+            settings[this.mode] = obj;
+            save();
+            this.$router.back();
+        }
     }
-  }
 };
 </script>
 
 <style lang="scss" scoped>
 #select {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  font-family: "Alte Haas Grotesk";
-  font-weight: normal;
-  font-size: 16px;
-
-  text-align: left;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: "Alte Haas Grotesk";
+    font-weight: normal;
+    font-size: 16px;
+    text-align: left;
 }
 </style>
diff --git a/src/views/Setup.vue b/src/views/Setup.vue
index d86ba607..77a16725 100644
--- a/src/views/Setup.vue
+++ b/src/views/Setup.vue
@@ -1,74 +1,64 @@
 <template>
-  <div id="setup" :class="{ 'fix': fix }">
-    <h1 id="setup-title">{{ texts.setup }}</h1>
-
-    <div id="layouts">
-      <div
-        id="classic-layout"
-        class="layout"
-        @click="select('classic')"
-        :class="{ selected: settings.mode === 'classic' }"
-      >
-        <Login id="classic" :immutable="true" :compact="false" />
-      </div>
-
-      <div
-        id="compact-layout"
-        class="layout"
-        @click="select('compact')"
-        :class="{ selected: settings.mode === 'compact' }"
-      >
-        <Login id="compact" :immutable="true" :compact="true" />
-      </div>
-    </div>
+    <div id="setup" :class="{ 'fix': fix }">
+        <h1 id="setup-title">{{ texts.setup }}</h1>
 
-    <div id="left-settings" class="settings">
-      <div class="checkbox-line">
-        <Checkbox v-model="settings.disableSplash" />
-        <label>{{ texts.disableSplash }}</label>
-      </div>
-      <div class="checkbox-line">
-        <Checkbox v-model="settings.disableSplashText" />
-        <label>{{ texts.disableSplashText }}</label>
-      </div>
-      <div class="checkbox-line">
-        <Checkbox v-model="settings.disableIntro" />
-        <label>{{ texts.disableIntro }}</label>
-      </div>
-      <div class="checkbox-line">
-        <Checkbox v-model="settings.clock12" />
-        <label>{{ texts.clock12 }}</label>
-      </div>
-    </div>
+        <div id="layouts">
+            <div id="classic-layout" class="layout" @click="select('classic')" :class="{ selected: settings.mode === 'classic' }">
+                <Login id="classic" :immutable="true" :compact="false" />
+            </div>
 
-    <div id="right-settings" class="settings">
-      <div class="checkbox-line">
-        <Checkbox v-model="settings.disableFade" />
-        <label>{{ texts.disableFade }}</label>
-      </div>
-      <div class="checkbox-line">
-        <Checkbox v-model="settings.roundAvatar" />
-        <label>{{ texts.roundAvatar }}</label>
-      </div>
-      <div class="checkbox-line">
-        <Checkbox v-model="settings.disableAvatar" />
-        <label>{{ texts.disableAvatar }}</label>
-      </div>
-      <div class="disable-zoom">
-        -
-        <div class="checkbox-line">
-          <Checkbox v-model="settings.disableZoom" />
-          <label>{{ texts.disableZoom }}</label>
+            <div id="compact-layout" class="layout" @click="select('compact')" :class="{ selected: settings.mode === 'compact' }">
+                <Login id="compact" :immutable="true" :compact="true" />
+            </div>
         </div>
-      </div>
-    </div>
 
-    <div @click="save()">
-      <PowerButton id="back" type="back" />
-    </div>
+        <div id="left-settings" class="settings">
+            <div class="checkbox-line">
+                <Checkbox v-model="settings.disableSplash" />
+                <label>{{ texts.disableSplash }}</label>
+            </div>
+            <div class="checkbox-line">
+                <Checkbox v-model="settings.disableSplashText" />
+                <label>{{ texts.disableSplashText }}</label>
+            </div>
+            <div class="checkbox-line">
+                <Checkbox v-model="settings.disableIntro" />
+                <label>{{ texts.disableIntro }}</label>
+            </div>
+            <div class="checkbox-line">
+                <Checkbox v-model="settings.clock12" />
+                <label>{{ texts.clock12 }}</label>
+            </div>
+        </div>
+
+        <div id="right-settings" class="settings">
+            <div class="checkbox-line">
+                <Checkbox v-model="settings.disableFade" />
+                <label>{{ texts.disableFade }}</label>
+            </div>
+            <div class="checkbox-line">
+                <Checkbox v-model="settings.roundAvatar" />
+                <label>{{ texts.roundAvatar }}</label>
+            </div>
+            <div class="checkbox-line">
+                <Checkbox v-model="settings.disableAvatar" />
+                <label>{{ texts.disableAvatar }}</label>
+            </div>
+            <div class="disable-zoom">
+                -
+                <div class="checkbox-line">
+                    <Checkbox v-model="settings.disableZoom" />
+                    <label>{{ texts.disableZoom }}</label>
+                </div>
+            </div>
+        </div>
 
-    <PowerButton id="theming" type="theming" />
-  </div>
+        <div @click="save()">
+            <PowerButton id="back" type="back" />
+        </div>
+
+        <PowerButton id="theming" type="theming" />
+    </div>
 </template>
 
 <script>
@@ -80,252 +70,233 @@ import { trans } from "@/translations";
 import { settings, save } from "@/settings";
 
 export default {
-  name: "setup",
-  components: { PowerButton, Login, Checkbox },
-
-  mounted() {
-    if (settings.first) {
-      settings.first = false;
-      save();
-    }
-  },
-  data() {
-    return {
-      settings: settings,
-      fix: !lightdm_debug,
-      texts: {
-        setup: trans("setup"),
-        disableSplash: trans("disableSplash"),
-        disableSplashText: trans("disableSplashText"),
-        disableIntro: trans("disableIntro"),
-        disableFade: trans("disableFade"),
-        roundAvatar: trans("roundAvatar"),
-        disableAvatar: trans("disableAvatar"),
-        disableZoom: trans("disableZoom"),
-        clock12: trans("clock12")
-      }
-    };
-  },
-  methods: {
-    select(layout) {
-      this.settings.mode = layout;
+    name: "setup",
+    components: { PowerButton, Login, Checkbox },
+
+    mounted() {
+        if (settings.first) {
+            settings.first = false;
+            save();
+        }
+    },
+    data() {
+        return {
+            settings: settings,
+            fix: !lightdm_debug,
+            texts: {
+                setup: trans("setup"),
+                disableSplash: trans("disableSplash"),
+                disableSplashText: trans("disableSplashText"),
+                disableIntro: trans("disableIntro"),
+                disableFade: trans("disableFade"),
+                roundAvatar: trans("roundAvatar"),
+                disableAvatar: trans("disableAvatar"),
+                disableZoom: trans("disableZoom"),
+                clock12: trans("clock12")
+            }
+        };
     },
-    save() {
-      save(this.settings);
+    methods: {
+        select(layout) {
+            this.settings.mode = layout;
+        },
+        save() {
+            save(this.settings);
+        }
     }
-  }
 };
 </script>
 
 <style lang="scss">
 @import "../theme";
-
 #setup {
-  font-family: "Alte Haas Grotesk";
-  font-weight: 400;
-  color: $outer-foreground;
+    font-family: "Alte Haas Grotesk";
+    font-weight: 400;
+    color: $outer-foreground;
 }
 
 #setup-title {
-  font-size: 24px;
-  font-weight: 400;
-  margin-top: 7vh;
+    font-size: 24px;
+    font-weight: 400;
+    margin-top: 7vh;
 }
 
 #layouts {
-  margin-top: 6.5vh;
-  font-style: normal;
+    margin-top: 6.5vh;
+    font-style: normal;
 }
 
 #layouts,
 .layout {
-  height: 35vh;
-  min-height: 200px;
+    height: 35vh;
+    min-height: 200px;
 }
 
 .layout {
-  display: inline-block;
-
-  border: solid 2px darken($outer-foreground, 60);
-  border-radius: 2px;
-  transition: border-color 125ms ease-in-out;
-
-  width: 35%;
-  min-width: 300px;
-  height: 35vh;
-  min-height: 200px;
-
-  text-align: center;
+    display: inline-block;
+    border: solid 2px darken($outer-foreground, 60);
+    border-radius: 2px;
+    transition: border-color 125ms ease-in-out;
+    width: 35%;
+    min-width: 300px;
+    height: 35vh;
+    min-height: 200px;
+    text-align: center;
 }
 
 .layout:hover {
-  cursor: pointer;
-  // border-color: lighten($primary-color, 25);
-  border-color: darken($outer-foreground, 30);
+    cursor: pointer; // border-color: lighten($primary-color, 25);
+    border-color: darken($outer-foreground, 30);
 }
 
 .layout.selected {
-  // border-color: $primary-color;
-  border-color: $outer-foreground;
+    // border-color: $primary-color;
+    border-color: $outer-foreground;
 }
 
 #classic-layout {
-  float: left;
-  margin-left: 10%;
+    float: left;
+    margin-left: 10%;
 }
 
 #compact-layout {
-  float: right;
-  margin-right: 10%;
+    float: right;
+    margin-right: 10%;
 }
 
 #classic,
 #compact {
-  height: 0;
-  transform: scale(0.4);
-  width: 240%; // Needed, or it is too small for the content
-  margin-left: -70%; // When changing the width, this makes the content centered again
-
-  .item.user,
-  .item.desktop {
-    display: block;
-  }
-
-  .item.user:hover,
-  .item.desktop:hover {
-    background: none;
-  }
+    height: 0;
+    transform: scale(0.4);
+    width: 240%; // Needed, or it is too small for the content
+    margin-left: -70%; // When changing the width, this makes the content centered again
+    .item.user,
+    .item.desktop {
+        display: block;
+    }
+    .item.user:hover,
+    .item.desktop:hover {
+        background: none;
+    }
 }
 
 #classic {
-  #login-content {
-    margin-top: 4.65vh;
-
-    &.no-avatar {
-      margin-top: calc(15.5vh - 50px);
+    #login-content {
+        margin-top: 4.65vh;
+        &.no-avatar {
+            margin-top: calc(15.5vh - 50px);
+        }
     }
-  }
 }
 
 #compact {
-  .clock {
-    margin-top: 3.5vh;
-  }
-
-  #login-content {
-    margin-top: 9vh;
-  }
+    .clock {
+        margin-top: 3.5vh;
+    }
+    #login-content {
+        margin-top: 9vh;
+    }
 }
 
 @media (max-height: 850px) {
-  #classic {
-    #login-content {
-      margin-top: 3.75vh;
+    #classic {
+        #login-content {
+            margin-top: 3.75vh;
+        }
+    }
+    #setup-title {
+        margin-top: 5.5vh;
+    }
+    #layouts {
+        margin-top: 5.15vh;
+    }
+    #classic #avatar {
+        margin-top: 3.5vh;
     }
-  }
-
-  #setup-title {
-    margin-top: 5.5vh;
-  }
-
-  #layouts {
-    margin-top: 5.15vh;
-  }
-
-  #classic #avatar {
-    margin-top: 3.5vh;
-  }
 }
 
 #setup label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: inline-block;
-  width: calc(35vw - 120px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block;
+    width: calc(35vw - 120px);
 }
 
 .settings {
-  display: inline-block;
-
-  margin-top: 7vh;
-
-  text-align: left;
-  font-size: 16px;
-
-  width: 35%;
-
-  .checkbox-line {
-    margin-bottom: 18px;
-  }
-
-  .checkbox {
     display: inline-block;
-    vertical-align: super;
-    margin-right: 20px;
-    margin-bottom: -8px;
-  }
+    margin-top: 7vh;
+    text-align: left;
+    font-size: 16px;
+    width: 35%;
+    .checkbox-line {
+        margin-bottom: 18px;
+    }
+    .checkbox {
+        display: inline-block;
+        vertical-align: super;
+        margin-right: 20px;
+        margin-bottom: -8px;
+    }
 }
 
 .fix {
-  .checkbox {
-    vertical-align: initial;
-    margin-bottom: -5px;
-  }
-
-  .checkbox-line {
-    margin-bottom: 26px;
-  }
+    .checkbox {
+        vertical-align: initial;
+        margin-bottom: -5px;
+    }
+    .checkbox-line {
+        margin-bottom: 26px;
+    }
 }
 
 @media (min-width: 1450px) {
-  .settings {
-    padding-left: 15px;
-  }
+    .settings {
+        padding-left: 15px;
+    }
 }
 
 #right-settings {
-  margin-left: 11%;
+    margin-left: 11%;
 }
 
 #left-settings {
-  margin-left: 3%;
+    margin-left: 3%;
 }
 
 #back {
-  position: absolute;
-  bottom: 20px;
-  left: 20px;
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
 }
 
 #theming {
-  position: absolute;
-  bottom: 20px;
-  right: 20px;
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
 }
 
 @media (max-height: 775px) {
-  #right-settings {
-    margin-left: 10%;
-  }
-
-  #left-settings {
-    margin-left: 2.25%;
-  }
+    #right-settings {
+        margin-left: 10%;
+    }
+    #left-settings {
+        margin-left: 2.25%;
+    }
 }
 
 .disable-zoom {
-  color: black;
+    color: black;
 }
 
 .disable-zoom .checkbox-line {
-  display: none;
-  color: white;
+    display: none;
+    color: white;
 }
 
 @media screen and (min-width: 3000px) and (min-height: 1200px) {
-  .disable-zoom .checkbox-line {
-    display: block;
-  }
+    .disable-zoom .checkbox-line {
+        display: block;
+    }
 }
 </style>
diff --git a/src/views/Splash.vue b/src/views/Splash.vue
index f9fb1cba..205f7d0d 100644
--- a/src/views/Splash.vue
+++ b/src/views/Splash.vue
@@ -1,10 +1,10 @@
 <template>
-  <div id="splash"
-    :class="{ 'clock-only': clockOnly }"
-    :style="{ 'background-image': 'url(' + current_background.default + ')' }">
-    <Clock />
-    <div v-if="!clockOnly" id="trigger">{{ trigger }}</div>
-  </div>
+    <div id="splash"
+        :class="{ 'clock-only': clockOnly }"
+        :style="{ 'background-image': 'url(' + current_background.default + ')' }">
+        <Clock />
+        <div v-if="!clockOnly" id="trigger">{{ trigger }}</div>
+    </div>
 </template>
 
 <script>
@@ -14,60 +14,64 @@ import { settings } from "@/settings";
 import { background } from '../themer';
 
 export default {
-  name: "splash",
-  components: { Clock },
-  mounted() {
-    window.addEventListener("keyup", this.submit);
-  },
-  data() {
-    return {
-      trigger: trans("trigger"),
-      current_background: background,
-      clockOnly: settings.disableSplashText
-    };
-  },
-  methods: {
-    submit(event) {
-      if (event.which === 13 || event.which === 32)
-        if (this.$route.path !== "/base/login")
-          this.$router.push("/base/login");
+    name: "splash",
+    components: { Clock },
+    mounted() {
+        window.addEventListener("keyup", this.submit_key);
+        window.document.getElementById('splash')
+            .addEventListener("click", this.submit);
+    },
+    data() {
+        return {
+            trigger: trans("trigger"),
+            current_background: background,
+            clockOnly: settings.disableSplashText
+        };
+    },
+    methods: {
+        submit() {
+            if (this.$route.path !== "/base/login")
+                this.$router.push("/base/login");
+        },
+        submit_key(event) {
+            if (event.which === 13 || event.which === 32)
+                this.submit();
+        }
     }
-  }
 };
 </script>
 
 <style lang="scss" scoped>
 #splash {
-  width: 100vw;
-  height: 100vh;
-  background-size: cover;
-  cursor: none;
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
+    width: 100vw;
+    height: 100vh;
+    background-size: cover;
+    cursor: none;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
 }
 
 #splash:not(.clock-only) .clock {
-  margin-top: 6vh;
+    margin-top: 6vh;
 }
 
 #splash.clock-only {
-  align-items: center;
-  justify-content: center;
-  flex-direction: initial;
-
-  .clock {
-    padding-bottom: 25px; /* Text size compensation */
-  }
+    align-items: center;
+    justify-content: center;
+    flex-direction: initial;
+    .clock {
+        padding-bottom: 25px;
+        /* Text size compensation */
+    }
 }
 
 #trigger {
-  font-family: "Alte Haas Grotesk";
-  font-weight: 400;
-  font-size: 16px;
-  cursor: default;
-
-  margin-bottom: 11.5vh;
-  letter-spacing: 0.25px;
+    font-family: "Alte Haas Grotesk";
+    font-weight: 400;
+    font-size: 16px;
+    cursor: default;
+    margin-bottom: 11.5vh;
+    letter-spacing: 0.25px;
 }
 </style>
diff --git a/src/views/Theming.vue b/src/views/Theming.vue
index a4063fec..cedccf2e 100644
--- a/src/views/Theming.vue
+++ b/src/views/Theming.vue
@@ -1,393 +1,354 @@
 <template>
-  <div id="theming-view">
-    <h1 id="theming-title">{{ title }}</h1>
-
-    <div id="theming-content">
-      <div id="color-theming">
-        <div id="colors">
-          <div class="color">
-            <span class="color-label">{{ colorLabel }}</span>
-            <img class="color-reset" @click="reset()" src="../assets/images/restart.svg" />
-            <div>
-              <span class="color-value">{{ color }}</span>
-              <div class="color-preview" :style="'background-color: ' + color + ';'"></div>
+    <div id="theming-view">
+        <h1 id="theming-title">{{ title }}</h1>
+
+        <div id="theming-content">
+            <div id="color-theming">
+                <div id="colors">
+                    <div class="color">
+                        <span class="color-label">{{ colorLabel }}</span>
+                        <img class="color-reset" @click="reset()" src="../assets/images/restart.svg" />
+                        <div>
+                            <span class="color-value">{{ color }}</span>
+                            <div class="color-preview" :style="'background-color: ' + color + ';'"></div>
+                        </div>
+                    </div>
+                </div>
+                <div id="color-picking">
+                    <div id="picking-preview" :style="'background-color: ' + color + ';'"></div>
+                    <div id="picking-title">{{ colorLabel }}</div>
+
+                    <div>
+                        <label for="picking-hex">
+                  Hex :
+                  <input id="picking-hex" v-model="hex" maxlength="7" @keypress="filterHex" />
+                </label>
+                    </div>
+                    <div id="rgb">
+                        <label for="picking-r">
+                  R :
+                  <input id="picking-r" v-model="r" maxlength="3" @keyup="filterRGB" />
+                </label>
+                        <label for="picking-g">
+                  G :
+                  <input id="picking-g" v-model="g" maxlength="3" @keyup="filterRGB" />
+                </label>
+                        <label for="picking-b">
+                  B :
+                  <input id="picking-b" v-model="b" maxlength="3" @keyup="filterRGB" />
+                </label>
+                    </div>
+                </div>
             </div>
-          </div>
-        </div>
-        <div id="color-picking">
-          <div id="picking-preview" :style="'background-color: ' + color + ';'"></div>
-          <div id="picking-title">{{ colorLabel }}</div>
-
-          <div>
-            <label for="picking-hex">
-              Hex :
-              <input id="picking-hex" v-model="hex" maxlength="7" @keypress="filterHex" />
-            </label>
-          </div>
-          <div id="rgb">
-            <label for="picking-r">
-              R :
-              <input id="picking-r" v-model="r" maxlength="3" @keyup="filterRGB" />
-            </label>
-            <label for="picking-g">
-              G :
-              <input id="picking-g" v-model="g" maxlength="3" @keyup="filterRGB" />
-            </label>
-            <label for="picking-b">
-              B :
-              <input id="picking-b" v-model="b" maxlength="3" @keyup="filterRGB" />
-            </label>
-          </div>
-        </div>
-      </div>
-
-      <div id="background-theming">
-        <img id="background" :src="backgrounds[background].default" />
-        <div id="background-switch">
-          <img src="../assets/images/back.svg" @click="prevBG" />
-          <span class="background-label">Background</span>
-          <img src="../assets/images/next.svg" @click="nextBG" />
-        </div>
 
-        <div id="random-check">
-          <Checkbox v-model="settings.randomizeBG" />
-          <span class="background-label">{{ randomizeLabel }}</span>
+            <div id="background-theming">
+                <img id="background" :src="backgrounds[background].default" />
+                <div id="background-switch">
+                    <img src="../assets/images/back.svg" @click="prevBG" />
+                    <span class="background-label">Background</span>
+                    <img src="../assets/images/next.svg" @click="nextBG" />
+                </div>
+
+                <div id="random-check">
+                    <Checkbox v-model="settings.randomizeBG" />
+                    <span class="background-label">{{ randomizeLabel }}</span>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
 
-    <div id="background-message">{{ bgAddLabel }} {{ bgPath }}</div>
+        <div id="background-message">{{ bgAddLabel }} {{ bgPath }}</div>
 
-    <div @click="saveSettings()">
-      <PowerButton id="back" type="back" />
+        <div @click="saveSettings()">
+            <PowerButton id="back" type="back" />
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 import Checkbox from "../components/Checkbox";
 import PowerButton from "../components/PowerButton";
 import {
-  background,
-  color,
-  updateColor,
-  updateBG,
-  DEFAULT_COLOR,
-  backgrounds
+    background,
+    color,
+    updateColor,
+    updateBG,
+    DEFAULT_COLOR,
+    backgrounds
 } from "../themer";
 import { trans } from "../translations";
 import { settings, save as saveSettings } from "../settings";
 
 export default {
-  name: "theming",
-  components: { Checkbox, PowerButton },
-
-  mounted() {
-    for (const bg in this.backgrounds) {
-      if (background.default === this.backgrounds[bg].default) {
-        this.background = +bg;
-        break;
-      }
-    }
-    this.hex = this.color; // To call the watcher
-  },
-  data() {
-    return {
-      title: trans("theming"),
-      backgrounds: backgrounds(),
-      background: 0,
-      bgPath: greeter_config.branding.background_images,
-      bgAddLabel: trans("bgAdd"),
-      settings,
-      saveSettings,
-      randomizeLabel: trans("randomizeBG"),
-      color: color,
-      colorLabel: trans("primaryColor"),
-      hex: "",
-      r: 0,
-      g: 0,
-      b: 0
-    };
-  },
-  methods: {
-    reset() {
-      this.hex = DEFAULT_COLOR;
-    },
-    filterHex(ev) {
-      if (
-        !(!this.hex.startsWith("#") && ev.location === 0 && ev.key === "#") &&
-        !ev.key.match(/[A-f\d]/)
-      ) {
-        ev.preventDefault();
-      }
-    },
-    filterRGB(ev) {
-      if (!ev.key.match(/\d/)) {
-        ev.preventDefault();
-      }
-
-      this.hex = this.toHex(this.r, this.g, this.b); // I use this instead of watch to prevent recursive hex <=> rgb watch
+    name: "theming",
+    components: { Checkbox, PowerButton },
+
+    mounted() {
+        for (const bg in this.backgrounds) {
+            if (background.default === this.backgrounds[bg].default) {
+                this.background = +bg;
+                break;
+            }
+        }
+        this.hex = this.color; // To call the watcher
     },
-    toHex(...rgb) {
-      return (
-        (this.hex.startsWith("#") ? "#" : "") +
-        rgb
-          .map(n => {
-            const hex = Math.min(255, Math.max(0, n)).toString(16);
-            return hex.length === 1 ? "0" + hex : hex;
-          })
-          .join("")
-      );
+    data() {
+        return {
+            title: trans("theming"),
+            backgrounds: backgrounds(),
+            background: 0,
+            bgPath: greeter_config.branding.background_images,
+            bgAddLabel: trans("bgAdd"),
+            settings,
+            saveSettings,
+            randomizeLabel: trans("randomizeBG"),
+            color: color,
+            colorLabel: trans("primaryColor"),
+            hex: "",
+            r: 0,
+            g: 0,
+            b: 0
+        };
     },
-    toRGB(hex) {
-      if (hex.length < (hex.startsWith("#") ? 3 : 2)) {
-        return [];
-      }
-
-      return (hex.startsWith("#") ? hex.substring(1) : hex)
-        .match(/[A-f\d]{2}/g)
-        .map(s => parseInt(s, 16));
+    methods: {
+        reset() {
+            this.hex = DEFAULT_COLOR;
+        },
+        filterHex(ev) {
+            if (!(!this.hex.startsWith("#") && ev.location === 0 && ev.key === "#") &&
+                !ev.key.match(/[A-f\d]/)
+            ) {
+                ev.preventDefault();
+            }
+        },
+        filterRGB(ev) {
+            if (!ev.key.match(/\d/)) {
+                ev.preventDefault();
+            }
+
+            this.hex = this.toHex(this.r, this.g, this.b); // I use this instead of watch to prevent recursive hex <=> rgb watch
+        },
+        toHex(...rgb) {
+            return (
+                (this.hex.startsWith("#") ? "#" : "") +
+                rgb
+                .map(n => {
+                    const hex = Math.min(255, Math.max(0, n)).toString(16);
+                    return hex.length === 1 ? "0" + hex : hex;
+                })
+                .join("")
+            );
+        },
+        toRGB(hex) {
+            if (hex.length < (hex.startsWith("#") ? 3 : 2)) {
+                return [];
+            }
+
+            return (hex.startsWith("#") ? hex.substring(1) : hex)
+                .match(/[A-f\d]{2}/g)
+                .map(s => parseInt(s, 16));
+        },
+        nextBG() {
+            if (this.background === this.backgrounds.length - 1) {
+                this.background = 0;
+            } else {
+                this.background++;
+            }
+        },
+        prevBG() {
+            if (this.background === 0) {
+                this.background = this.backgrounds.length - 1;
+            } else {
+                this.background--;
+            }
+        }
     },
-    nextBG() {
-      if (this.background === this.backgrounds.length - 1) {
-        this.background = 0;
-      } else {
-        this.background++;
-      }
-    },
-    prevBG() {
-      if (this.background === 0) {
-        this.background = this.backgrounds.length - 1;
-      } else {
-        this.background--;
-      }
-    }
-  },
-  watch: {
-    hex(val) {
-      this.color = val;
-
-      const [r, g, b] = this.toRGB(val);
-      !isNaN(r) && (this.r = r);
-      !isNaN(g) && (this.g = g);
-      !isNaN(b) && (this.b = b);
-
-      updateColor(val);
-    },
-    background(val) {
-      updateBG(this.backgrounds[val]);
+    watch: {
+        hex(val) {
+            this.color = val;
+
+            const [r, g, b] = this.toRGB(val);
+            !isNaN(r) && (this.r = r);
+            !isNaN(g) && (this.g = g);
+            !isNaN(b) && (this.b = b);
+
+            updateColor(val);
+        },
+        background(val) {
+            updateBG(this.backgrounds[val]);
+        }
     }
-  }
 };
 </script>
 
 <style lang="scss">
 @import "../theme";
-
 #theming-view {
-  color: $outer-foreground;
-  text-align: left;
-
-  font-family: "Alte Haas Grotesk";
-
-  padding: 35px;
-  box-sizing: border-box;
+    color: $outer-foreground;
+    text-align: left;
+    font-family: "Alte Haas Grotesk";
+    padding: 35px;
+    box-sizing: border-box;
 }
 
 #theming-title {
-  font-size: 24px;
-  font-weight: 400;
-  margin: 0;
-
-  margin-bottom: 15px;
+    font-size: 24px;
+    font-weight: 400;
+    margin: 0;
+    margin-bottom: 15px;
 }
 
 #theming-content {
-  display: flex;
-  justify-content: space-between;
-
-  width: 100%;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
 }
 
 #color-theming {
-  width: 50%;
-  display: flex;
+    width: 50%;
+    display: flex;
 }
 
 #colors {
-  margin-top: 20px;
-  margin-left: 20px;
-
-  font-size: 16px;
-
-  width: 50%;
+    margin-top: 20px;
+    margin-left: 20px;
+    font-size: 16px;
+    width: 50%;
 }
 
 .color {
-  margin-top: 20px;
+    margin-top: 20px;
 }
 
 .color-label {
-  cursor: default;
+    cursor: default;
 }
 
 .color-reset {
-  height: 25px;
-  vertical-align: bottom;
-
-  margin-left: 5px;
-
-  &:hover {
-    cursor: pointer;
-  }
+    height: 25px;
+    vertical-align: bottom;
+    margin-left: 5px;
+    &:hover {
+        cursor: pointer;
+    }
 }
 
 .color-value {
-  margin-left: 15px;
-  font-weight: 400;
+    margin-left: 15px;
+    font-weight: 400;
 }
 
 .color-preview {
-  display: inline-block;
-  margin-left: 10px;
-
-  border-radius: 50px;
-
-  width: 15px;
-  height: 15px;
-
-  vertical-align: middle;
+    display: inline-block;
+    margin-left: 10px;
+    border-radius: 50px;
+    width: 15px;
+    height: 15px;
+    vertical-align: middle;
 }
 
 #color-picking {
-  border-left: solid 1px #ffffffaa;
-
-  padding-top: 35px;
-  padding-left: 45px;
-
-  box-sizing: border-box;
-
-  width: 50%;
-
-  label {
-    font-size: 16px;
-  }
-
-  input {
-    border: none;
-    border-bottom: solid 1px #ffffffcc;
-
-    color: $outer-foreground;
-    background: none;
-
-    margin-left: 8px;
-
-    font-size: 16px;
-    font-family: "Alte Haas Grotesk";
-  }
+    border-left: solid 1px #ffffffaa;
+    padding-top: 35px;
+    padding-left: 45px;
+    box-sizing: border-box;
+    width: 50%;
+    label {
+        font-size: 16px;
+    }
+    input {
+        border: none;
+        border-bottom: solid 1px #ffffffcc;
+        color: $outer-foreground;
+        background: none;
+        margin-left: 8px;
+        font-size: 16px;
+        font-family: "Alte Haas Grotesk";
+    }
 }
 
 #picking-preview {
-  width: 100px;
-  height: 100px;
-
-  border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
 }
 
 #picking-title {
-  margin-top: 25px;
-
-  font-size: 24px;
-  font-weight: 400;
+    margin-top: 25px;
+    font-size: 24px;
+    font-weight: 400;
 }
 
 #picking-hex {
-  margin-top: 30px;
+    margin-top: 30px;
 }
 
 #rgb {
-  margin-top: 8px;
-
-  input {
-    width: 35px;
-    margin-right: 15px;
-
-    font-style: normal;
-  }
+    margin-top: 8px;
+    input {
+        width: 35px;
+        margin-right: 15px;
+        font-style: normal;
+    }
 }
 
 #background-theming {
-  width: 50%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 #background {
-  width: 75%;
-  border-radius: 5px;
-
-  border: solid 1px white;
+    width: 75%;
+    border-radius: 5px;
+    border: solid 1px white;
 }
 
 .background-label {
-  cursor: default;
-
-  font-size: 16px;
-  font-weight: 400;
-
-  margin-top: 1px;
+    cursor: default;
+    font-size: 16px;
+    font-weight: 400;
+    margin-top: 1px;
 }
 
 #background-switch {
-  display: flex;
-  justify-content: space-between;
-
-  width: 75%;
-  margin-top: 20px;
-
-  align-items: center;
-
-  img {
-    height: 40px;
-
-    padding: 10px;
-    margin-left: 10px;
-    margin-right: 10px;
-
-    transition: background-color 125ms ease-in-out;
-
-    border-radius: 4px;
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.08);
-      cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    width: 75%;
+    margin-top: 20px;
+    align-items: center;
+    img {
+        height: 40px;
+        padding: 10px;
+        margin-left: 10px;
+        margin-right: 10px;
+        transition: background-color 125ms ease-in-out;
+        border-radius: 4px;
+        &:hover {
+            background-color: rgba(255, 255, 255, 0.08);
+            cursor: pointer;
+        }
     }
-  }
 }
 
 #random-check {
-  margin-top: 20px;
-
-  .background-label {
-    font-size: 16px;
-  }
-
-  .checkbox {
-    margin-right: 17px;
-    margin-bottom: -5px;
-
-    width: 25px;
-    height: 25px;
-  }
+    margin-top: 20px;
+    .background-label {
+        font-size: 16px;
+    }
+    .checkbox {
+        margin-right: 17px;
+        margin-bottom: -5px;
+        width: 25px;
+        height: 25px;
+    }
 }
 
 #background-message {
-  position: absolute;
-  right: 40px;
-  bottom: 35px;
-
-  font-size: 16px;
-  font-weight: 400;
+    position: absolute;
+    right: 40px;
+    bottom: 35px;
+    font-size: 16px;
+    font-weight: 400;
 }
 </style>
diff --git a/vue.config.js b/vue.config.js
index 537fbe1e..289d0241 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,9 +1,12 @@
 module.exports = {
-  publicPath: '',
-  productionSourceMap: false,
-  outputDir: undefined,
-  assetsDir: undefined,
-  runtimeCompiler: undefined,
-  parallel: undefined,
-  css: undefined
+    publicPath: '',
+    productionSourceMap: false,
+    outputDir: undefined,
+    assetsDir: undefined,
+    runtimeCompiler: undefined,
+    parallel: undefined,
+    css: undefined,
+    configureWebpack: {
+        target: 'node-webkit'
+    }
 };
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 00000000..5abb0c49
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+    target: 'node-webkit';
+};