diff --git a/babel.config.js b/babel.config.js
index ba179669..91be2448 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
-  ]
-}
+    '@vue/app',
+  ],
+};
diff --git a/package-lock.json b/package-lock.json
index 2956f9df..b29d4215 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3521,6 +3521,12 @@
         "typedarray": "^0.0.6"
       }
     },
+    "confusing-browser-globals": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.8.tgz",
+      "integrity": "sha512-lI7asCibVJ6Qd3FGU7mu4sfG4try4LX3+GVS+Gv8UlrEf2AeW57piecapnog2UHZSbcX/P/1UDWVaTsblowlZg==",
+      "dev": true
+    },
     "connect": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz",
@@ -4700,6 +4706,28 @@
         }
       }
     },
+    "eslint-config-airbnb": {
+      "version": "18.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-18.0.1.tgz",
+      "integrity": "sha512-hLb/ccvW4grVhvd6CT83bECacc+s4Z3/AEyWQdIT2KeTsG9dR7nx1gs7Iw4tDmGKozCNHFn4yZmRm3Tgy+XxyQ==",
+      "dev": true,
+      "requires": {
+        "eslint-config-airbnb-base": "^14.0.0",
+        "object.assign": "^4.1.0",
+        "object.entries": "^1.1.0"
+      }
+    },
+    "eslint-config-airbnb-base": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.0.0.tgz",
+      "integrity": "sha512-2IDHobw97upExLmsebhtfoD3NAKhV4H0CJWP3Uprd/uk+cHuWYOczPVxQ8PxLFUAw7o3Th1RAU8u1DoUpr+cMA==",
+      "dev": true,
+      "requires": {
+        "confusing-browser-globals": "^1.0.7",
+        "object.assign": "^4.1.0",
+        "object.entries": "^1.1.0"
+      }
+    },
     "eslint-config-standard": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-12.0.0.tgz",
@@ -8231,6 +8259,18 @@
         "object-keys": "^1.0.11"
       }
     },
+    "object.entries": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.0.tgz",
+      "integrity": "sha512-l+H6EQ8qzGRxbkHOd5I/aHRhHDKoQXQ8g0BYt4uSweQU1/J6dZUOyWh9a2Vky35YCKjzmgxOzta2hH6kf9HuXA==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.12.0",
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3"
+      }
+    },
     "object.getownpropertydescriptors": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz",
diff --git a/package.json b/package.json
index e9a88ec9..165af5f0 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^5.16.0",
+    "eslint-config-airbnb": "^18.0.1",
     "eslint-plugin-vue": "^5.0.0",
     "sass": "^1.18.0",
     "sass-loader": "^7.1.0",
@@ -37,9 +38,12 @@
     },
     "extends": [
       "plugin:vue/essential",
-      "@vue/standard"
+      "@vue/standard",
+      "airbnb-base"
     ],
-    "rules": {},
+    "rules": {
+      "import/no-unresolved": "off"
+    },
     "parserOptions": {
       "parser": "babel-eslint"
     }
diff --git a/server.js b/server.js
index 352d07dc..a4e51510 100644
--- a/server.js
+++ b/server.js
@@ -1,14 +1,13 @@
-var connect = require('connect')
-var serveStatic = require('serve-static')
-
-const port = process.env.PORT || 3002
-
-try {
-  connect()
-    .use(serveStatic(__dirname + '/dist'))
-    .listen(port, () =>
-      console.log(`Boom, app is running on port ${port}`)
-    )
-} catch (error) {
-  console.log('Something fucked up', error)
+const connect = require('connect');
+const serveStatic = require('serve-static');
+
+const port = process.env.PORT || 3002;
+
+/* eslint no-console: 0 */
+try {
+  connect()
+    .use(serveStatic(`${__dirname}/dist`))
+    .listen(port, () => console.log(`Boom, app is running on port ${port}`));
+} catch (error) {
+  console.log('Something fucked up', error);
 }
diff --git a/src/App.vue b/src/App.vue
index 3e4e0914..f07f76ea 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,14 +7,14 @@
 </template>
 <script>
 
-import Footer from '@/components/Footer.vue'
+import Footer from '@/components/Footer.vue';
 
 export default {
   name: 'app',
   components: {
-    Footer
-  }
-}
+    Footer,
+  },
+};
 </script>
 
 <style lang="scss">
diff --git a/src/components/Collapsable.vue b/src/components/Collapsable.vue
index 9ea5f00d..15074893 100644
--- a/src/components/Collapsable.vue
+++ b/src/components/Collapsable.vue
@@ -1,108 +1,108 @@
-<template>
-  <div class="collapsable">
-        <input :id="`collapsible-${uniqueKey}`" class="toggle" type="checkbox" checked>
-        <label :for="`collapsible-${uniqueKey}`" class="lbl-toggle" tabindex="0">
-            <h2>{{ title }}</h2>
-        </label>
-        <div class="collapsible-content">
-            <div class="content-inner">
-            <slot></slot>
-            </div>
-        </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'CollapsableContainer',
-  props: {
-    uniqueKey: String,
-    title: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-
-.collapsable {
-    width: 310px;
-    padding: 5px;
-    margin: 10px;
-    border-radius: 10px;
-    background: #1CA8DD;
-    background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-    background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-    box-shadow: 1px 1px 2px #130f23;
-
-    .wrap-collabsible {
-        margin-bottom: 1.2rem 0;
-    }
-
-    input[type='checkbox'] {
-        display: none;
-    }
-
-    label {
-        outline: none;
-    }
-
-    .lbl-toggle {
-        display: block;
-        padding: 1rem;
-        cursor: pointer;
-        border-radius: 7px;
-        transition: all 0.25s ease-out;
-        text-align: left;
-        color: #2f323ae6;
-
-        h2 {
-            margin: 0;
-            padding: 0;
-            display: inline;
-        }
-    }
-
-    .lbl-toggle:hover {
-        color: #2f323a;
-    }
-
-    .lbl-toggle::before {
-        content: ' ';
-        display: inline-block;
-        border-top: 5px solid transparent;
-        border-bottom: 5px solid transparent;
-        border-left: 5px solid currentColor;
-        vertical-align: middle;
-        margin-right: .7rem;
-        transform: translateY(-2px);
-
-        transition: transform .2s ease-out;
-    }
-
-    .toggle:checked + .lbl-toggle::before {
-        transform: rotate(90deg) translateX(-3px);
-    }
-
-    .collapsible-content {
-        max-height: 0px;
-        overflow: hidden;
-        transition: max-height .25s ease-in-out;
-        background: #2f323ae6;
-        border-radius: 0 0 10px 10px;
-    }
-
-    .toggle:checked + .lbl-toggle + .collapsible-content {
-        max-height: 1000px;
-    }
-
-    .toggle:checked + .lbl-toggle {
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-
-    .collapsible-content .content-inner {
-        padding: 0.5rem;
-    }
-}
-</style>
+<template>
+  <div class="collapsable">
+        <input :id="`collapsible-${uniqueKey}`" class="toggle" type="checkbox" checked>
+        <label :for="`collapsible-${uniqueKey}`" class="lbl-toggle" tabindex="0">
+            <h2>{{ title }}</h2>
+        </label>
+        <div class="collapsible-content">
+            <div class="content-inner">
+            <slot></slot>
+            </div>
+        </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CollapsableContainer',
+  props: {
+    uniqueKey: String,
+    title: String,
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+.collapsable {
+    width: 310px;
+    padding: 5px;
+    margin: 10px;
+    border-radius: 10px;
+    background: #1CA8DD;
+    background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
+    background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
+    box-shadow: 1px 1px 2px #130f23;
+
+    .wrap-collabsible {
+        margin-bottom: 1.2rem 0;
+    }
+
+    input[type='checkbox'] {
+        display: none;
+    }
+
+    label {
+        outline: none;
+    }
+
+    .lbl-toggle {
+        display: block;
+        padding: 1rem;
+        cursor: pointer;
+        border-radius: 7px;
+        transition: all 0.25s ease-out;
+        text-align: left;
+        color: #2f323ae6;
+
+        h2 {
+            margin: 0;
+            padding: 0;
+            display: inline;
+        }
+    }
+
+    .lbl-toggle:hover {
+        color: #2f323a;
+    }
+
+    .lbl-toggle::before {
+        content: ' ';
+        display: inline-block;
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        border-left: 5px solid currentColor;
+        vertical-align: middle;
+        margin-right: .7rem;
+        transform: translateY(-2px);
+
+        transition: transform .2s ease-out;
+    }
+
+    .toggle:checked + .lbl-toggle::before {
+        transform: rotate(90deg) translateX(-3px);
+    }
+
+    .collapsible-content {
+        max-height: 0px;
+        overflow: hidden;
+        transition: max-height .25s ease-in-out;
+        background: #2f323ae6;
+        border-radius: 0 0 10px 10px;
+    }
+
+    .toggle:checked + .lbl-toggle + .collapsible-content {
+        max-height: 1000px;
+    }
+
+    .toggle:checked + .lbl-toggle {
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .collapsible-content .content-inner {
+        padding: 0.5rem;
+    }
+}
+</style>
diff --git a/src/components/FilterTile.vue b/src/components/FilterTile.vue
index 2d10c1ca..35398d73 100644
--- a/src/components/FilterTile.vue
+++ b/src/components/FilterTile.vue
@@ -1,118 +1,119 @@
-<template>
-  <section>
-    <form>
-      <label for="filter-tiles">Search</label>
-      <input
-        id="filter-tiles"
-        v-model="input"
-        ref="filter"
-        placeholder="Start typing to filter tiles..."
-        v-on:input="userIsTypingSomething"
-        @keydown.esc="clearFilterInput" />
-        <i v-if="input.length > 0"
-          class="el-icon-circle-close clear-search"
-          title="Clear search"
-          @click="clearFilterInput"></i>
-      </form>
-      <div class="space-filler"></div>
-  </section>
-</template>
-
-<script>
-
-export default {
-  name: 'FilterTile',
-  data () {
-    return {
-      input: ''
-    }
-  },
-  methods: {
-    userIsTypingSomething () {
-      this.$emit('user-is-searchin', this.input)
-    },
-    clearFilterInput () {
-      this.input = ''
-      this.userIsTypingSomething()
-      document.activeElement.blur()
-    },
-  },
-  mounted: function() {
-      window.addEventListener('keyup', (event) => {
-        const key = event.key
-        if(/^[a-zA-Z]$/.test(key) && !document.activeElement.id) {
-          this.input += key
-          this.$refs.filter.focus()
-          this.userIsTypingSomething()
-        }
-      });
-    }
-}
-</script>
-
-<style scoped lang="scss">
-  section {
-    display: flex;
-    align-items: center;
-    align-items: stretch;
-    background: linear-gradient(0deg, rgba(47,50,58,1) 0%, rgba(40,42,50,1) 100%);
-  }
-  form {
-    border-radius: 0 0 20px 0;
-    padding: 0 0.2rem 0.2rem 0;
-    background: #282a32;
-    label {
-        display: inline;
-        background: -webkit-gradient(linear, right bottom, left top, from(#9F86FF), color-stop(#1CA8DD), to(#007AE1));
-        background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        margin: 0.5rem;
-        display: inline;
-    }
-    input {
-      display: inline-block;
-      width: 200px;
-      padding: 0.5rem;
-      margin: 0.5rem;
-      outline: none;
-      border: none;
-      border-radius: 12px;
-      background: #607d8b33;
-      box-shadow: 1px 1px 2px #232323;
-      color: #1CA8DD;
-      font-family: 'Comfortaa', cursive;
-      &:focus {
-        background: #607d8b4a;
-      }
-    }
-    .clear-search {
-      position: absolute;
-      margin: 1em 0 0 -2em;
-      color: #1CA8DD;
-      opacity: 0.5;
-      border-radius: 50px;
-      cursor: pointer;
-      &:hover {
-        opacity: 1;
-        background: #282a32;
-      }
-    }
-  }
-  .space-filler {
-    flex: 1;
-    border-radius: 20px 0 0;
-    background: #2f323a;
-  }
-  @media screen and (max-width: 600px) {
-    form {
-      flex: 1;
-      border-radius: 0;
-      text-align: center;
-      padding: 0.25rem 0;
-    }
-    .space-filler {
-      display: none;
-    }
-  }
-</style>
+<template>
+  <section>
+    <form>
+      <label for="filter-tiles">Search</label>
+      <input
+        id="filter-tiles"
+        v-model="input"
+        ref="filter"
+        placeholder="Start typing to filter tiles..."
+        v-on:input="userIsTypingSomething"
+        @keydown.esc="clearFilterInput" />
+        <i v-if="input.length > 0"
+          class="el-icon-circle-close clear-search"
+          title="Clear search"
+          @click="clearFilterInput"></i>
+      </form>
+      <div class="space-filler"></div>
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: 'FilterTile',
+  data() {
+    return {
+      input: '',
+    };
+  },
+  methods: {
+    userIsTypingSomething() {
+      this.$emit('user-is-searchin', this.input);
+    },
+    clearFilterInput() {
+      this.input = '';
+      this.userIsTypingSomething();
+      document.activeElement.blur();
+    },
+  },
+  mounted() {
+    window.addEventListener('keyup', (event) => {
+      const { key } = event;
+      if (/^[a-zA-Z]$/.test(key) && !document.activeElement.id) {
+        this.input += key;
+        this.$refs.filter.focus();
+        this.userIsTypingSomething();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped lang="scss">
+  section {
+    display: flex;
+    align-items: center;
+    align-items: stretch;
+    background: linear-gradient(0deg, rgba(47,50,58,1) 0%, rgba(40,42,50,1) 100%);
+  }
+  form {
+    border-radius: 0 0 20px 0;
+    padding: 0 0.2rem 0.2rem 0;
+    background: #282a32;
+    label {
+        display: inline;
+        background: -webkit-gradient(
+          linear, right bottom, left top, from(#9F86FF), color-stop(#1CA8DD), to(#007AE1));
+        background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        margin: 0.5rem;
+        display: inline;
+    }
+    input {
+      display: inline-block;
+      width: 200px;
+      padding: 0.5rem;
+      margin: 0.5rem;
+      outline: none;
+      border: none;
+      border-radius: 12px;
+      background: #607d8b33;
+      box-shadow: 1px 1px 2px #232323;
+      color: #1CA8DD;
+      font-family: 'Comfortaa', cursive;
+      &:focus {
+        background: #607d8b4a;
+      }
+    }
+    .clear-search {
+      position: absolute;
+      margin: 1em 0 0 -2em;
+      color: #1CA8DD;
+      opacity: 0.5;
+      border-radius: 50px;
+      cursor: pointer;
+      &:hover {
+        opacity: 1;
+        background: #282a32;
+      }
+    }
+  }
+  .space-filler {
+    flex: 1;
+    border-radius: 20px 0 0;
+    background: #2f323a;
+  }
+  @media screen and (max-width: 600px) {
+    form {
+      flex: 1;
+      border-radius: 0;
+      text-align: center;
+      padding: 0.25rem 0;
+    }
+    .space-filler {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index aba2cdf1..c40ddee0 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,41 +1,41 @@
-<template>
-  <footer>
-      Developed by <a :href="authorUrl">{{authorName}}</a>.
-      Licensed under <a :href="licenseUrl">{{license}}</a>
-      {{ showCopyright? '©': '' }} {{date}}.
-      Get the <a :href="repoUrl">Source Code</a>.
-  </footer>
-</template>
-
-<script>
-export default {
-  name: 'Footer',
-  props: {
-    authorName: { type: String, default: 'Alicia Sykes' },
-    authorUrl: { type: String, default: 'https://aliciasykes.com' },
-    license: { type: String, default: 'MIT' },
-    licenseUrl: { type: String, default: 'https://gist.github.com/Lissy93/143d2ee01ccc5c052a17' },
-    date: { type: String, default: `${new Date().getFullYear()}` },
-    showCopyright: { type: Boolean, default: true },
-    repoUrl: { type: String, default: 'https://github.com/lissy93/panel' }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-
-footer {
-  padding: 0.5rem;
-  text-align: center;
-  color: #5e6474;
-}
-
-footer a{
-  color: #5e6474;
-  &:hover {
-    color: #9F86FF;
-  }
-}
-
-</style>
+<template>
+  <footer>
+      Developed by <a :href="authorUrl">{{authorName}}</a>.
+      Licensed under <a :href="licenseUrl">{{license}}</a>
+      {{ showCopyright? '©': '' }} {{date}}.
+      Get the <a :href="repoUrl">Source Code</a>.
+  </footer>
+</template>
+
+<script>
+export default {
+  name: 'Footer',
+  props: {
+    authorName: { type: String, default: 'Alicia Sykes' },
+    authorUrl: { type: String, default: 'https://aliciasykes.com' },
+    license: { type: String, default: 'MIT' },
+    licenseUrl: { type: String, default: 'https://gist.github.com/Lissy93/143d2ee01ccc5c052a17' },
+    date: { type: String, default: `${new Date().getFullYear()}` },
+    showCopyright: { type: Boolean, default: true },
+    repoUrl: { type: String, default: 'https://github.com/lissy93/panel' },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+footer {
+  padding: 0.5rem;
+  text-align: center;
+  color: #5e6474;
+}
+
+footer a{
+  color: #5e6474;
+  &:hover {
+    color: #9F86FF;
+  }
+}
+
+</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index c2067027..cc37abd3 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,33 +1,34 @@
-<template>
-    <header>
-      <PageTitle />
-      <Nav class="nav"/>
-    </header>
-</template>
-
-<script>
-import PageTitle from '@/components/PageTitle.vue'
-import Nav from '@/components/Nav.vue'
-export default {
-  name: 'Header',
-  components: {
-    PageTitle,
-    Nav
-  }
-}
-</script>
-
-<style scoped lang="scss">
-  header {
-    margin: 0;
-    padding: 0.5rem;
-    display: flex;
-    justify-content: space-between;
-    background: #282a32;
-    align-items: center;
-    align-content: flex-start;
-    @media screen and (max-width: 600px) {
-      flex-direction: column-reverse;
-    }
-  }
-</style>
+<template>
+    <header>
+      <PageTitle />
+      <Nav class="nav"/>
+    </header>
+</template>
+
+<script>
+import PageTitle from '@/components/PageTitle.vue';
+import Nav from '@/components/Nav.vue';
+
+export default {
+  name: 'Header',
+  components: {
+    PageTitle,
+    Nav,
+  },
+};
+</script>
+
+<style scoped lang="scss">
+  header {
+    margin: 0;
+    padding: 0.5rem;
+    display: flex;
+    justify-content: space-between;
+    background: #282a32;
+    align-items: center;
+    align-content: flex-start;
+    @media screen and (max-width: 600px) {
+      flex-direction: column-reverse;
+    }
+  }
+</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 12730605..1b6ba1c2 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -9,9 +9,9 @@
 export default {
   name: 'HelloWorld',
   props: {
-    msg: String
-  }
-}
+    msg: String,
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/src/components/Item.vue b/src/components/Item.vue
index 2db8ead5..8e2470bd 100644
--- a/src/components/Item.vue
+++ b/src/components/Item.vue
@@ -1,136 +1,134 @@
-<template>
-    <el-tooltip placement="bottom" effect="dark" :content="description" :disabled="!description">
-        <div class="item" tabindex="0">
-            <div class="tile-title" :id="`tile-${id}`">
-                <span class="text">{{ title }}</span>
-                <div class="overflow-dots">...</div>
-            </div>
-            <img
-                v-if="icon"
-                :src="`/img/tile-icons/${icon}.png`"
-                class="tile-icon"
-            />
-        </div>
-  </el-tooltip>
-</template>
-
-<script>
-
-export default {
-  name: 'Item',
-  props: {
-    id: String, // The unique ID of a tile (e.g. 001)
-    title: String, // The main text of tile, required
-    subtitle: String, // Optional sub-text
-    description: String, // Optional tooltip hover text
-    icon: String, // Optional path to icon, within public/img/tile-icons
-    color: String, // Optional background color, specified in hex code
-    url: String, // URL to the resource, optional but recommended
-    openingMethod: { // Where resource will open, either 'newtab', 'sametab' or 'iframe'
-      type: String,
-      default: 'newtab',
-      validator: (value) =>
-        ['newtab', 'sametab', 'iframe'].indexOf(value) !== -1
-    }
-  },
-  data () {
-    return { getId: this.id }
-  },
-  mounted () {
-    // Detects overflowing text, and allows is to marguee on hover
-    // The below code is horifically bad, it is embarassing that I wrote it...
-    const tileElem = document.getElementById(`tile-${this.getId}`)
-    if (tileElem) {
-      const isOverflowing =
-            tileElem.scrollHeight > tileElem.clientHeight ||
-            tileElem.scrollWidth > tileElem.clientWidth
-      if (isOverflowing) {
-        tileElem.className += ' is-overflowing'
-      }
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-
-.item {
-    width: 120px;
-    height: 100px;
-    color: #1CA8DD;
-    display: inline-block;
-    vertical-align: middle;
-    margin: 8px;
-    background: #607d8b33;
-    text-align: center;
-    padding: 2px;
-    border: 2px solid transparent;
-    border-radius: 10px;
-    box-shadow: 1px 1px 2px #373737;
-    cursor: pointer;
-    &:hover {
-        box-shadow: 1px 2px 4px #373737;
-        background: #607d8b4d;
-    }
-    &:focus {
-        border: 2px solid #1CA8DD;
-        outline: none;
-    }
-}
-.tile-title {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 120px;
-    height: 30px;
-    overflow: hidden;
-    position: relative;
-    padding: 0;
-
-    span.text {
-        position: absolute;
-        white-space: nowrap;
-        transition: 1s;
-        float: left;
-        left: 0;
-    }
-    &:not(.is-overflowing) span.text{
-        width: 100%;
-    }
-    .overflow-dots {
-        // display: none;
-        opacity: 0;
-    }
-}
-
-.tile-title.is-overflowing {
-    span.text {
-        overflow: hidden;
-    }
-    .overflow-dots {
-        display: block;
-        opacity: 1;
-        background: #354857;
-        position: absolute;
-        z-index: 5;
-        right: 0;
-        transition: opacity 0.1s ease-in;
-    }
-}
-
-.item:hover .tile-title{
-    .overflow-dots {
-        // display: none;
-        opacity: 0;
-    }
-    span.text {
-        transform: translateX(calc(120px - 100%));
-    }
-}
-
-.tile-icon {
-    width: 60px;
-}
-
-</style>
+<template>
+    <el-tooltip placement="bottom" effect="dark" :content="description" :disabled="!description">
+        <div class="item" tabindex="0">
+            <div class="tile-title" :id="`tile-${id}`">
+                <span class="text">{{ title }}</span>
+                <div class="overflow-dots">...</div>
+            </div>
+            <img
+                v-if="icon"
+                :src="`/img/tile-icons/${icon}.png`"
+                class="tile-icon"
+            />
+        </div>
+  </el-tooltip>
+</template>
+
+<script>
+
+export default {
+  name: 'Item',
+  props: {
+    id: String, // The unique ID of a tile (e.g. 001)
+    title: String, // The main text of tile, required
+    subtitle: String, // Optional sub-text
+    description: String, // Optional tooltip hover text
+    icon: String, // Optional path to icon, within public/img/tile-icons
+    color: String, // Optional background color, specified in hex code
+    url: String, // URL to the resource, optional but recommended
+    openingMethod: { // Where resource will open, either 'newtab', 'sametab' or 'iframe'
+      type: String,
+      default: 'newtab',
+      validator: (value) => ['newtab', 'sametab', 'iframe'].indexOf(value) !== -1,
+    },
+  },
+  data() {
+    return { getId: this.id };
+  },
+  mounted() {
+    // Detects overflowing text, and allows is to marguee on hover
+    // The below code is horifically bad, it is embarassing that I wrote it...
+    const tileElem = document.getElementById(`tile-${this.getId}`);
+    if (tileElem) {
+      const isOverflowing = tileElem.scrollHeight > tileElem.clientHeight
+            || tileElem.scrollWidth > tileElem.clientWidth;
+      if (isOverflowing) {
+        tileElem.className += ' is-overflowing';
+      }
+    }
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+.item {
+    width: 120px;
+    height: 100px;
+    color: #1CA8DD;
+    display: inline-block;
+    vertical-align: middle;
+    margin: 8px;
+    background: #607d8b33;
+    text-align: center;
+    padding: 2px;
+    border: 2px solid transparent;
+    border-radius: 10px;
+    box-shadow: 1px 1px 2px #373737;
+    cursor: pointer;
+    &:hover {
+        box-shadow: 1px 2px 4px #373737;
+        background: #607d8b4d;
+    }
+    &:focus {
+        border: 2px solid #1CA8DD;
+        outline: none;
+    }
+}
+.tile-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 120px;
+    height: 30px;
+    overflow: hidden;
+    position: relative;
+    padding: 0;
+
+    span.text {
+        position: absolute;
+        white-space: nowrap;
+        transition: 1s;
+        float: left;
+        left: 0;
+    }
+    &:not(.is-overflowing) span.text{
+        width: 100%;
+    }
+    .overflow-dots {
+        // display: none;
+        opacity: 0;
+    }
+}
+
+.tile-title.is-overflowing {
+    span.text {
+        overflow: hidden;
+    }
+    .overflow-dots {
+        display: block;
+        opacity: 1;
+        background: #354857;
+        position: absolute;
+        z-index: 5;
+        right: 0;
+        transition: opacity 0.1s ease-in;
+    }
+}
+
+.item:hover .tile-title{
+    .overflow-dots {
+        // display: none;
+        opacity: 0;
+    }
+    span.text {
+        transform: translateX(calc(120px - 100%));
+    }
+}
+
+.tile-icon {
+    width: 60px;
+}
+
+</style>
diff --git a/src/components/ItemGroup.vue b/src/components/ItemGroup.vue
index 7b39d44c..4ae444ad 100644
--- a/src/components/ItemGroup.vue
+++ b/src/components/ItemGroup.vue
@@ -1,55 +1,55 @@
-<template>
-   <Collapsable :title="title" :uniqueKey="groupId">
-    <div v-if="!items || items.length < 1" class="no-items">
-      No Items to Show Yet
-    </div>
-    <div v-else class="there-are-items">
-      <Item
-        v-for="item in items"
-        :key="`${groupId}-${item.id}`"
-        :id="`${groupId}-${item.id}`"
-        :title="item.title"
-        :description="item.description"
-        :icon="item.icon"
-      />
-    </div>
-  </Collapsable>
-</template>
-
-<script>
-import Item from '@/components/Item.vue'
-import Collapsable from '@/components/Collapsable.vue'
-
-export default {
-  name: 'ItemGroup',
-  props: {
-    groupId: String,
-    title: String,
-    items: Array
-  },
-  components: {
-    Collapsable,
-    Item
-  }
-}
-</script>
-
-<style scoped lang="scss">
-
-.no-items {
-    width: 100px;
-    margin: 0 auto;
-    padding: 0.8rem;
-    text-align: center;
-    cursor: default;
-    border-radius: 10px;
-    background: #607d8b33;
-    color: #1CA8DD;
-    box-shadow: 1px 1px 2px #373737;
-}
-
-.there-are-items {
-  height: 100%;
-}
-
-</style>
+<template>
+   <Collapsable :title="title" :uniqueKey="groupId">
+    <div v-if="!items || items.length < 1" class="no-items">
+      No Items to Show Yet
+    </div>
+    <div v-else class="there-are-items">
+      <Item
+        v-for="item in items"
+        :key="`${groupId}-${item.id}`"
+        :id="`${groupId}-${item.id}`"
+        :title="item.title"
+        :description="item.description"
+        :icon="item.icon"
+      />
+    </div>
+  </Collapsable>
+</template>
+
+<script>
+import Item from '@/components/Item.vue';
+import Collapsable from '@/components/Collapsable.vue';
+
+export default {
+  name: 'ItemGroup',
+  props: {
+    groupId: String,
+    title: String,
+    items: Array,
+  },
+  components: {
+    Collapsable,
+    Item,
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+.no-items {
+    width: 100px;
+    margin: 0 auto;
+    padding: 0.8rem;
+    text-align: center;
+    cursor: default;
+    border-radius: 10px;
+    background: #607d8b33;
+    color: #1CA8DD;
+    box-shadow: 1px 1px 2px #373737;
+}
+
+.there-are-items {
+  height: 100%;
+}
+
+</style>
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index faf04c2a..44e0410d 100644
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -1,41 +1,41 @@
-<template>
-    <nav id="nav">
-        <router-link to="/" class="nav-item">Home</router-link>
-        <router-link to="/about" class="nav-item">About</router-link>
-    </nav>
-
-</template>
-
-<script>
-export default {
-  name: 'Nav'
-}
-</script>
-
-<style scoped lang="scss">
-nav {
-    display: flex;
-    align-items: center;
-    .nav-item {
-        display: inline-block;
-        padding: 0.75rem 0.5rem;
-        margin: 0.5rem;
-        outline: none;
-        border: none;
-        border-radius: 5px;
-        background: #607d8b33;
-        -webkit-box-shadow: 1px 1px 2px #232323;
-        box-shadow: 1px 1px 2px #232323;
-        color: #1CA8DD;
-        font-family: "Comfortaa", cursive;
-        text-decoration: none;
-        &:hover {
-            background: #607d8b1c;
-            box-shadow: 1px 4px 3px #232323;
-        }
-    }
-    .router-link-active {
-        border: 1px solid #1CA8DD;
-    }
-}
-</style>
+<template>
+    <nav id="nav">
+        <router-link to="/" class="nav-item">Home</router-link>
+        <router-link to="/about" class="nav-item">About</router-link>
+    </nav>
+
+</template>
+
+<script>
+export default {
+  name: 'Nav',
+};
+</script>
+
+<style scoped lang="scss">
+nav {
+    display: flex;
+    align-items: center;
+    .nav-item {
+        display: inline-block;
+        padding: 0.75rem 0.5rem;
+        margin: 0.5rem;
+        outline: none;
+        border: none;
+        border-radius: 5px;
+        background: #607d8b33;
+        -webkit-box-shadow: 1px 1px 2px #232323;
+        box-shadow: 1px 1px 2px #232323;
+        color: #1CA8DD;
+        font-family: "Comfortaa", cursive;
+        text-decoration: none;
+        &:hover {
+            background: #607d8b1c;
+            box-shadow: 1px 4px 3px #232323;
+        }
+    }
+    .router-link-active {
+        border: 1px solid #1CA8DD;
+    }
+}
+</style>
diff --git a/src/components/PageTitle.vue b/src/components/PageTitle.vue
index 42e6250d..9ecf6bcf 100644
--- a/src/components/PageTitle.vue
+++ b/src/components/PageTitle.vue
@@ -1,36 +1,36 @@
-<template>
-  <div class="page-titles">
-    <h1>Pannel</h1>
-    <span class="subtitle">Awesome subtitle</span>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'PageTitle'
-}
-</script>
-
-<style scoped lang="scss">
-.page-titles {
-  display: flex;
-  flex-direction: column;
-  h1 {
-    background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-    background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    font-size: 3rem;
-    margin: 0;
-  }
-  span.subtitle {
-    color: #9F86FF;
-    font-style: italic;
-    text-shadow: 1px 1px 2px #130f23;
-  }
-  @media screen and (max-width: 600px) {
-    text-align: center;
-    padding: 0.25rem 0;
-  }
-}
-</style>
+<template>
+  <div class="page-titles">
+    <h1>Pannel</h1>
+    <span class="subtitle">Awesome subtitle</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PageTitle',
+};
+</script>
+
+<style scoped lang="scss">
+.page-titles {
+  display: flex;
+  flex-direction: column;
+  h1 {
+    background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
+    background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: 3rem;
+    margin: 0;
+  }
+  span.subtitle {
+    color: #9F86FF;
+    font-style: italic;
+    text-shadow: 1px 1px 2px #130f23;
+  }
+  @media screen and (max-width: 600px) {
+    text-align: center;
+    padding: 0.25rem 0;
+  }
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 08204ceb..219d4eee 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,14 +1,14 @@
-import Vue from 'vue'
-import Element from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css';
-import App from './App.vue'
-import router from './router'
-import './registerServiceWorker'
-
-Vue.use(Element)
-Vue.config.productionTip = false
-
-new Vue({
-  router,
-  render: h => h(App)
-}).$mount('#app')
+import Vue from 'vue';
+import Element from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import App from './App.vue';
+import router from './router';
+import './registerServiceWorker';
+
+Vue.use(Element);
+Vue.config.productionTip = false;
+
+new Vue({
+  router,
+  render: (h) => h(App),
+}).$mount('#app');
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
index 76cede07..e32aa92b 100644
--- a/src/registerServiceWorker.js
+++ b/src/registerServiceWorker.js
@@ -1,32 +1,32 @@
 /* eslint-disable no-console */
 
-import { register } from 'register-service-worker'
+import { register } from 'register-service-worker';
 
 if (process.env.NODE_ENV === 'production') {
   register(`${process.env.BASE_URL}service-worker.js`, {
-    ready () {
+    ready() {
       console.log(
-        'App is being served from cache by a service worker.\n' +
-        'For more details, visit https://goo.gl/AFskqB'
-      )
+        'App is being served from cache by a service worker.\n'
+        + 'For more details, visit https://goo.gl/AFskqB',
+      );
     },
-    registered () {
-      console.log('Service worker has been registered.')
+    registered() {
+      console.log('Service worker has been registered.');
     },
-    cached () {
-      console.log('Content has been cached for offline use.')
+    cached() {
+      console.log('Content has been cached for offline use.');
     },
-    updatefound () {
-      console.log('New content is downloading.')
+    updatefound() {
+      console.log('New content is downloading.');
     },
-    updated () {
-      console.log('New content is available; please refresh.')
+    updated() {
+      console.log('New content is available; please refresh.');
     },
-    offline () {
-      console.log('No internet connection found. App is running in offline mode.')
+    offline() {
+      console.log('No internet connection found. App is running in offline mode.');
     },
-    error (error) {
-      console.error('Error during service worker registration:', error)
-    }
-  })
+    error(error) {
+      console.error('Error during service worker registration:', error);
+    },
+  });
 }
diff --git a/src/router.js b/src/router.js
index b4a893fe..e540d9a4 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,15 +1,15 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-import Home from './views/Home.vue'
+import Vue from 'vue';
+import Router from 'vue-router';
+import Home from './views/Home.vue';
 
-Vue.use(Router)
+Vue.use(Router);
 
 export default new Router({
   routes: [
     {
       path: '/',
       name: 'home',
-      component: Home
+      component: Home,
     },
     {
       path: '/about',
@@ -17,7 +17,7 @@ export default new Router({
       // route level code-splitting
       // this generates a separate chunk (about.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
-      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
-    }
-  ]
-})
+      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
+    },
+  ],
+});
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 38827cab..6987ffea 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -17,47 +17,45 @@
 
 <script>
 
-import Header from '@/components/Header.vue'
-import FilterTile from '@/components/FilterTile.vue'
-import ItemGroup from '@/components/ItemGroup.vue'
-import * as linkData from './../data/item-data.json'
+import Header from '@/components/Header.vue';
+import FilterTile from '@/components/FilterTile.vue';
+import ItemGroup from '@/components/ItemGroup.vue';
+import * as linkData from '../data/item-data.json';
 
 export default {
   name: 'home',
   props: {
     title: { default: 'Panel', type: String },
-    subtitle: { default: 'All your server management tools in one place', type: String }
+    subtitle: { default: 'All your server management tools in one place', type: String },
   },
   components: {
     Header,
     FilterTile,
-    ItemGroup
-  },
-  data: () => {
-    return {
-      items: linkData.default,
-      searchTile: ''
-    }
+    ItemGroup,
   },
+  data: () => ({
+    items: linkData.default,
+    searchTile: '',
+  }),
   methods: {
-    searching (searchTile) {
-      this.searchTile = searchTile
+    searching(searchTile) {
+      this.searchTile = searchTile;
     },
-    getDomainFromUrl (url) {
-      var urlPattern = /^(?:https?:\/\/)?(?:w{3}\.)?([a-z\d\.-]+)\.(?:[a-z\.]{2,10})(?:[/\w\.-]*)*/;
-      var domainPattern = url.match(urlPattern);
-      return domainPattern? domainPattern[1] : ''
+    getDomainFromUrl(url) {
+      const urlPattern = /^(?:https?:\/\/)?(?:w{3}\.)?([a-z\d.-]+)\.(?:[a-z.]{2,10})(?:[/\w.-]*)*/;
+      const domainPattern = url.match(urlPattern);
+      return domainPattern ? domainPattern[1] : '';
     },
-    filterTiles (allTiles) {
-      return allTiles.filter(tile => {
-        const searchTerm = this.searchTile.toLowerCase()
-        return tile.title.toLowerCase().includes(searchTerm) ||
-          tile.provider.toLowerCase().includes(searchTerm) ||
-          this.getDomainFromUrl(tile.url).includes(searchTerm)
-      })
-    }
-  }
-}
+    filterTiles(allTiles) {
+      return allTiles.filter((tile) => {
+        const searchTerm = this.searchTile.toLowerCase();
+        return tile.title.toLowerCase().includes(searchTerm)
+          || tile.provider.toLowerCase().includes(searchTerm)
+          || this.getDomainFromUrl(tile.url).includes(searchTerm);
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>