Merge pull request #2 from KevinMidboe/release/v2

Release/v1
2019-10-23 19:54:43 +02:00
parent e2f0d07ea5 1c0799a30a
commit d7e4d2095c
56 changed files with 8385 additions and 3553 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -1,5 +1,8 @@
 {
  "presets": [
-    ["es2015", { "modules": false }]
-  ]
+    ["@babel/preset-env", {
+      "useBuiltIns": false
+    }]
+  ],
+  "plugins": ["@babel/plugin-transform-runtime"]
 }
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,12 @@
-.DS_Store
+# config file - copy config.json.example
+src/config.json
+
+# Build directory
+dist/
+
+# Node packages
 node_modules/
 npm-debug.log
-dist/
+
+# MacOS trash
+.DS_Store
--- a/README.md
+++ b/README.md
@@ -8,6 +8,19 @@ A Vue.js project.

 [TMDB Vue App](https://tmdb-vue-app.herokuapp.com/)

+## Config setup
+Set seasonedShows api endpoint and/or elastic.   
+ - SeasonedShows [can be found here](https://github.com/kevinmidboe/seasonedshows) and is the matching backend to fetch tmdb search results, tmdb lists, request new content, check plex status and lets owner search and add torrents to download.
+ - Elastic is optional and can be used for a instant search feature for all movies and shows registered in tmdb.
+
+```json
+{
+  "SEASONED_URL": "http://localhost:31459/api",
+  "ELASTIC_URL": "http://localhost:9200"
+}
+```
+*Set ELASTIC_URL to undefined or false to disable*
+
 ## Build Setup

 ``` bash
@@ -24,5 +37,9 @@ npm run build
 For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
 This app uses [history mode](https://router.vuejs.org/en/essentials/history-mode.html)

+## Documentation
+All api functions are documented in `/docs` and [found here](docs/api.md).  
+[html version also available](http://htmlpreview.github.io/?https://github.com/KevinMidboe/seasoned/blob/release/v2/docs/api/index.html)
+
 ## License
 [MIT](https://github.com/dmtrbrl/tmdb-app/blob/master/LICENSE)
--- a/docs/api.md
+++ b/docs/api.md
@@ -0,0 +1,154 @@
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+### Table of Contents
+
+-   [getMovie][1]
+    -   [Parameters][2]
+-   [getShow][3]
+    -   [Parameters][4]
+-   [getTmdbListByPath][5]
+    -   [Parameters][6]
+-   [searchTmdb][7]
+    -   [Parameters][8]
+-   [searchTorrents][9]
+    -   [Parameters][10]
+-   [addMagnet][11]
+    -   [Parameters][12]
+-   [request][13]
+    -   [Parameters][14]
+-   [elasticSearchMoviesAndShows][15]
+    -   [Parameters][16]
+
+## getMovie
+
+Fetches tmdb movie by id. Can optionally include cast credits in result object.
+
+### Parameters
+
+-   `id` **[number][17]** 
+-   `credits` **[boolean][18]** Include credits (optional, default `false`)
+
+Returns **[object][19]** Tmdb response
+
+## getShow
+
+Fetches tmdb show by id. Can optionally include cast credits in result object.
+
+### Parameters
+
+-   `id` **[number][17]** 
+-   `credits` **[boolean][18]** Include credits (optional, default `false`)
+
+Returns **[object][19]** Tmdb response
+
+## getTmdbListByPath
+
+Fetches tmdb list by path.
+
+### Parameters
+
+-   `listPath` **[string][20]** Path of list
+-   `page` **[number][17]**  (optional, default `1`)
+
+Returns **[object][19]** Tmdb list response
+
+## searchTmdb
+
+Fetches tmdb movies and shows by query.
+
+### Parameters
+
+-   `query` **[string][20]** 
+-   `page` **[number][17]**  (optional, default `1`)
+
+Returns **[object][19]** Tmdb response
+
+## searchTorrents
+
+Search for torrents by query
+
+### Parameters
+
+-   `query` **[string][20]** 
+-   `authorization_token`  
+-   `credits` **[boolean][18]** Include credits
+
+Returns **[object][19]** Torrent response
+
+## addMagnet
+
+Add magnet to download queue.
+
+### Parameters
+
+-   `magnet` **[string][20]** Magnet link
+-   `name` **[boolean][18]** Name of torrent
+-   `tmdb_id` **[boolean][18]** 
+
+Returns **[object][19]** Success/Failure response
+
+## request
+
+Request a movie or show from id. If authorization token is included the user will be linked
+to the requested item.
+
+### Parameters
+
+-   `id` **[number][17]** Movie or show id
+-   `type` **[string][20]** Movie or show type
+-   `authorization_token` **[string][20]?** To identify the requesting user (optional, default `undefined`)
+
+Returns **[object][19]** Success/Failure response
+
+## elasticSearchMoviesAndShows
+
+Search elastic indexes movies and shows by query. Doc includes Tmdb daily export of Movies and
+Tv Shows. See tmdb docs for more info: [https://developers.themoviedb.org/3/getting-started/daily-file-exports][21]
+
+### Parameters
+
+-   `query` **[string][20]** 
+
+Returns **[object][19]** List of movies and shows matching query
+
+[1]: #getmovie
+
+[2]: #parameters
+
+[3]: #getshow
+
+[4]: #parameters-1
+
+[5]: #gettmdblistbypath
+
+[6]: #parameters-2
+
+[7]: #searchtmdb
+
+[8]: #parameters-3
+
+[9]: #searchtorrents
+
+[10]: #parameters-4
+
+[11]: #addmagnet
+
+[12]: #parameters-5
+
+[13]: #request
+
+[14]: #parameters-6
+
+[15]: #elasticsearchmoviesandshows
+
+[16]: #parameters-7
+
+[17]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
+
+[18]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+
+[19]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+
+[20]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+
+[21]: https://developers.themoviedb.org/3/getting-started/daily-file-exports
--- a/index.html
+++ b/index.html
--- a/package.json
+++ b/package.json
@@ -1,38 +1,43 @@
 {
-  "name": "tmdb-app",
-  "description": "The Movie Database app ",
-  "version": "1.1.0",
-  "author": "Dmytro Barylo",
+  "name": "seasoned-request",
+  "description": "seasoned request app",
+  "version": "1.0.0",
+  "author": "Kevin Midboe",
  "private": true,
  "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --port=5000",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
-    "start": "node server.js"
+    "start": "node server.js",
+    "docs": "documentation build src/api.js -f html -o docs/api && documentation build src/api.js -f md -o docs/api.md"
  },
  "dependencies": {
-    "ag-grid-vue": "^17.0.0",
-    "axios": "^0.15.3",
+    "axios": "^0.18.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "connect-history-api-fallback": "^1.3.0",
-    "debounce": "^1.0.0",
    "express": "^4.16.1",
-    "numeral": "^2.0.4",
-    "vue": "^2.1.0",
+    "vue": "^2.5.2",
    "vue-axios": "^1.2.2",
    "vue-data-tablee": "^0.12.1",
    "vue-js-modal": "^1.3.16",
-    "vue-router": "^2.2.1"
+    "vue-router": "^3.0.1",
+    "vuex": "^3.1.0"
  },
  "devDependencies": {
-    "babel-core": "^6.0.0",
-    "babel-loader": "^6.0.0",
-    "babel-preset-es2015": "^6.0.0",
+    "@babel/core": "^7.4.5",
+    "@babel/plugin-transform-runtime": "^7.4.4",
+    "@babel/preset-env": "^7.4.5",
+    "@babel/runtime": "^7.4.5",
+    "babel-loader": "^8.0.6",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
+    "documentation": "^11.0.0",
    "file-loader": "^0.9.0",
    "node-sass": "^4.5.0",
    "sass-loader": "^5.0.1",
+    "schema-utils": "^2.4.1",
    "vue-loader": "^10.0.0",
-    "vue-template-compiler": "^2.1.0",
+    "vue-svg-inline-loader": "^1.3.1",
+    "vue-template-compiler": "2.6.10",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
--- a/server.js
+++ b/server.js
@@ -1,9 +1,11 @@
 var express = require('express');
 var path = require('path');
+const compression = require('compression')
 var history = require('connect-history-api-fallback');

 app = express();

+app.use(compression())
 app.use('/dist', express.static(path.join(__dirname + "/dist")));
 app.use('/dist', express.static(path.join(__dirname + "/dist/")));
 app.use('/favicons', express.static(path.join(__dirname + "/favicons")));
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,156 +1,115 @@
 <template>
  <div id="app">
+
+    <!-- Header and hamburger navigation -->
    <navigation></navigation>
+
+    <!-- Header with search field -->
+
+    <!-- TODO move this to the navigation component -->
    <header class="header">
-      <div class="header__search">
-        <input class="header__search-input" type="text" v-model.trim="searchQuery" @keyup.enter="search" placeholder="Search for a movie or show...">
-        <svg class="header__search-icon">
-          <use xlink:href="#iconSearch"></use>
-        </svg>
-      </div>
+      <search-input v-model="query"></search-input>
    </header>

-      <movie-popup v-if="moviePopupIsVisible" @close="closeMoviePopup" :id="moviePopupId" :type="moviePopupType"></movie-popup>
+    <!-- Movie popup that will show above existing rendered content -->
+    <movie-popup v-if="moviePopupIsVisible" :id="popupID" :type="popupType"></movie-popup>
+
+
+    <darkmode-toggle />
+
+    <!-- Display the component assigned to the given route (default: home) -->
+    <router-view class="content" :key="$route.fullPath"></router-view>

-    <section class="main">
-      <transition name="fade" @after-leave="afterLeave">
-        <router-view name="list-router-view" :type="'page'" :mode="'collection'" :key="$route.params.category"></router-view>
-        <router-view name="search-router-view" :type="'page'" :mode="'search'" :key="$route.params.query"></router-view>
-        <router-view name="user-requests-router-view" :type="'page'" :mode="'user-requests'"></router-view>
-        <router-view name="page-router-view"></router-view>
-      </transition>
-    </section>
  </div>
 </template>

 <script>
-import axios from 'axios'
-import storage from './storage.js'
-import Navigation from './components/Navigation.vue'
-import MoviePopup from './components/MoviePopup.vue'
+import Vue from 'vue'
+import Navigation from '@/components/Navigation'
+import MoviePopup from '@/components/MoviePopup'
+import SearchInput from '@/components/SearchInput'
+import DarkmodeToggle from '@/components/ui/darkmodeToggle'

 export default {
  name: 'app',
-  components: { Navigation, MoviePopup},
-  data(){
-    return{
+  components: {
+    Navigation,
+    MoviePopup,
+    SearchInput,
+    DarkmodeToggle
+  },
+  data() {
+    return {
+      query: '',
      moviePopupIsVisible: false,
-      moviePopupHistoryVisible: false,
-      moviePopupId: 0,
-      moviePopupType: 'movie',
-      searchQuery: ''
-    }
-  },
-  computed: {
-    queryForRouter(){
-      return encodeURI(this.searchQuery.replace(/ /g, "+"));
-    }
-  },
-  methods: {
-    // User Session Methods
-    requestToken(){
-      storage.sessionId = null;
-      axios.get(`https://api.themoviedb.org/3/authentication/token/new?api_key=${storage.apiKey}`)
-      .then(function(resp){
-          if(typeof resp.data == 'string') {
-             resp.data = JSON.parse(resp.data);
-          }
-          let data = resp.data;
-          window.location.href = `https://www.themoviedb.org/authenticate/${data.request_token}?redirect_to=${location.protocol}//${location.host}/profile`
-      }.bind(this));
-    },
-    setUserStatus(){
-      storage.token = localStorage.getItem('token') || null;
-      storage.username = localStorage.getItem('username') || null;
-      storage.admin = localStorage.getItem('admin') || null;
-    },
-    // Movie Popup Methods
-    openMoviePopup(id, type, newMoviePopup){
-      console.log('app openMoviePopup:', type)
-      if(newMoviePopup){
-        storage.backTitle = document.title;
-      }
-      storage.createMoviePopup = newMoviePopup;
-      this.moviePopupIsVisible = true;
-      this.moviePopupId = id;
-      this.moviePopupType = type;
-      document.querySelector('body').classList.add('hidden');
-    },
-    closeMoviePopup(){
-      storage.createMoviePopup = false;
-      this.moviePopupIsVisible = false;
-      document.querySelector('body').classList.remove('hidden');
-      window.history.back();
-    },
-    onHistoryState(e){
-      storage.moviePopupOnHistory = e.state ? e.state.hasOwnProperty('popup') : false;
-      if(!storage.moviePopupOnHistory){
-        this.moviePopupIsVisible = false;
-        document.title = storage.backTitle;
-      }
-    },
-    changeHistoryState(){
-      if(history.state && history.state.popup){
-        let newState = {
-          popup: false
-        };
-        history.replaceState(newState , null, storage.moviePath);
-      }
-    },
-    // Search Methods
-    search(){
-      if(!this.searchQuery.length) return;
-      this.$router.push({ name: 'search', params: { query: this.queryForRouter }});
-    },
-    setSearchQuery(clear){
-      if(clear){
-        this.searchQuery = '';
-      } else {
-        let query = decodeURIComponent(this.$route.params.query);
-        this.searchQuery =  query ? query.replace(/\+/g, " ") : '';
-      }
-    },
-    // Router After Leave
-    afterLeave(){
-      document.querySelector('body').scrollTop = 0;
-    },
-    // Detect if touch device
-    isTouchDevice() {
-      return 'ontouchstart' in document.documentElement;
+      popupID: 0,
+      popupType: 'movie'
    }
  },
  created(){
-    window.addEventListener('popstate', this.onHistoryState);
-    window.addEventListener('pagehide', this.changeHistoryState);
-    eventHub.$on('openMoviePopup', this.openMoviePopup);
-    eventHub.$on('setSearchQuery', this.setSearchQuery);
-    eventHub.$on('requestToken', this.requestToken);
-    eventHub.$on('setUserStatus', this.setUserStatus);
-    if (this.isTouchDevice()) {
-      document.querySelector('body').classList.add('touch');
+    let that = this
+    Vue.prototype.$popup = {
+      get isOpen() {
+        return that.moviePopupIsVisible
+      },
+      open: (id, type) => {
+        this.popupID = id || this.popupID
+        this.popupType = type || this.popupType
+        this.moviePopupIsVisible = true
+        console.log('opened')
+      },
+      close: () => {
+        this.moviePopupIsVisible = false
+        console.log('closed')
+      }
    }
+    console.log('MoviePopup registered at this.$popup and has state: ', this.$popup.isOpen)
  }
 }
 </script>

+<style lang="scss" scoped>
+@import "./src/scss/media-queries";
+@import "./src/scss/variables";
+.content {
+    @include tablet-min{
+    width: calc(100% - 95px);
+    margin-top: $header-size;
+    margin-left: 95px;
+    position: relative;
+  }
+}
+</style>
+
 <style lang="scss">
+// @import "./src/scss/main";
@import "./src/scss/variables";
@import "./src/scss/media-queries";
+
 *{
  box-sizing: border-box;
 }
-html, body{
+html {
  height: 100%;
 }
 body{
+  margin: 0;
+  padding: 0;
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
-  background: $c-light;
-  color: $c-dark;
+  background: $background-color;
+  color: $text-color;
+  transition: background-color .5s ease, color .5s ease;
  &.hidden{
    overflow: hidden;
  }
 }
+h1,h2,h3 {
+  transition: color .5s ease;
+}
+a:any-link {
+  color: inherit;
+}
 input, textarea, button{
  font-family: 'Roboto', sans-serif;
 }
@@ -160,154 +119,27 @@ figure{
 }
 img{
  display: block;
-  max-width: 100%;
+  // max-width: 100%;
  height: auto;
 }
-.loader{
-  animation: load 1s linear infinite;
-  border: 2px solid $c-white;
-  border-radius: 50%;
-  display: block;
-  height: 30px;
-  left: 50%;
-  margin: -1.5em;
-  position: absolute;
-  top: 50%;
-  width: 30px;
-  &:after {
-    border: 5px solid $c-green;
-    border-radius: 50%;
-    content: '';
-    left: 10px;
-    position: absolute;
-    top: 16px;
-  }
-}
-@keyframes load {
-  100% { transform: rotate(360deg); }
-}
+
 .wrapper{
  position: relative;
 }
 .header{
  position: fixed;
-  background: $c-white;
  z-index: 15;
  display: flex;
+  flex-direction: column;
+
  @include tablet-min{
    width: calc(100% - 170px);
-    height: 75px;
    margin-left: 95px;
    border-top: 0;
    border-bottom: 0;
    top: 0;
  }
-  &__search{
-    height: 50px;
-    display: flex;
-    position: relative;
-    z-index: 5;
-    width: calc(100% - 110px);
-    position: fixed;
-    top: 0;
-    right: 55px;
-    @include tablet-min{
-      position: relative;
-      height: 75px;
-      right: 0;
-    }
-    &-input{
-      display: block;
-      width: 100%;
-      padding: 15px 20px 15px 45px;
-      outline: none;
-      border: 0;
-      background-color: transparent;
-      color: $c-dark;
-      font-weight: 300;
-      font-size: 16px;
-      @include tablet-min{
-        padding: 15px 30px 15px 60px;
-      }
-      @include tablet-landscape-min{
-        padding: 15px 30px 15px 80px;
-      }
-      @include desktop-min{
-        padding: 15px 30px 15px 90px;
-      }
-    }
-    &-icon{
-      width: 19px;
-      height: 19px;
-      fill: rgba($c-dark, 0.5);
-      transition: fill 0.5s ease;
-      pointer-events: none;
-      position: absolute;
-      top: 50%;
-      margin-top: -7px;
-      left: 20px;
-      @include tablet-min{
-        width: 18px;
-        height: 18px;
-        margin-top: -9px;
-        left: 30px;
-      }
-      @include tablet-landscape-min{
-        left: 50px;
-      }
-      @include desktop-min{
-        left: 60px;
-      }
-    }
-    &-input:focus + &-icon{
-      fill: $c-dark;
-    }
-  }
 }
-.main{
-  position: relative;
-  padding: 50px 0 0;
-  @include tablet-min{
-    width: calc(100% - 95px);
-    padding: 75px 0 0;
-    margin-left: 95px;
-    position: relative;
-  }
-}
-.button{
-  display: inline-block;
-  border: 1px solid $c-dark;
-  text-transform: uppercase;
-  background: $c-dark;
-  font-weight: 300;
-  font-size: 11px;
-  line-height: 2;
-  letter-spacing: 0.5px;
-  padding: 5px 20px 4px 20px;
-  cursor: pointer;
-  color: $c-dark;
-  background: transparent;
-  outline: none;
-  transition: background 0.5s ease, color 0.5s ease;
-  @include tablet-min{
-    font-size: 12px;
-    padding: 6px 20px 5px 20px;
-  }
-  &:active, &:hover{
-    background: $c-dark;
-    color: $c-white;
-  }
-  body:not(.touch) &:hover, &:focus{
-    background: $c-dark;
-    color: $c-white;
-  }
-  &__active {
-    @extend .button;
-    background: $c-dark;
-    color: $c-white;
-  }
-}
-

 // router view transition
 .fade-enter-active, .fade-leave-active {
--- a/src/api.js
+++ b/src/api.js
@@ -0,0 +1,309 @@
+import axios from 'axios'
+import storage from '@/storage'
+import config from '@/config.json'
+import path from 'path'
+
+const SEASONED_URL = config.SEASONED_URL
+const ELASTIC_URL = config.ELASTIC_URL
+const ELASTIC_INDEX = config.ELASTIC_INDEX
+
+// TODO
+//  - Move autorization token and errors here?
+
+// - - - TMDB - - - 
+
+/**
+ * Fetches tmdb movie by id. Can optionally include cast credits in result object.
+ * @param {number} id
+ * @param {boolean} [credits=false] Include credits
+ * @returns {object} Tmdb response
+ */
+const getMovie = (id, credits=false) => {
+  const url = new URL('v2/movie', SEASONED_URL)
+  url.pathname = path.join(url.pathname, id.toString())
+  if (credits) {
+    url.searchParams.append('credits', true)
+  }
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+    .catch(error => { console.error(`api error getting movie: ${id}`); throw error })
+}
+
+/**
+ * Fetches tmdb show by id. Can optionally include cast credits in result object.
+ * @param {number} id
+ * @param {boolean} [credits=false] Include credits
+ * @returns {object} Tmdb response
+ */
+const getShow = (id, credits=false) => {
+  const url = new URL('v2/show', SEASONED_URL)
+  url.pathname = path.join(url.pathname, id.toString())
+  if (credits) {
+    url.searchParams.append('credits', true)
+  }
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+    .catch(error => { console.error(`api error getting show: ${id}`); throw error })
+}
+
+/**
+ * Fetches tmdb list by name.
+ * @param {string} name List the fetch
+ * @param {number} [page=1]
+ * @returns {object} Tmdb list response
+ */
+const getTmdbMovieListByName = (name, page=1) => {
+  const url = new URL('v2/movie/' + name, SEASONED_URL)
+  url.searchParams.append('page', page)
+  const headers = { authorization: storage.token }
+
+  return fetch(url.href, { headers: headers })
+    .then(resp => resp.json())
+    // .catch(error => { console.error(`api error getting list: ${name}, page: ${page}`); throw error })
+}
+
+/**
+ * Fetches requested items.
+ * @param {number} [page=1]
+ * @returns {object} Request response
+ */
+const getRequests = (page=1) => {
+  const url = new URL('v2/request', SEASONED_URL)
+  url.searchParams.append('page', page)
+  const headers = { authorization: storage.token }
+
+  return fetch(url.href, { headers: headers })
+    .then(resp => resp.json())
+    // .catch(error => { console.error(`api error getting list: ${name}, page: ${page}`); throw error })
+}
+
+
+const getUserRequests = (page=1) => {
+  const url = new URL('v1/user/requests', SEASONED_URL)
+  url.searchParams.append('page', page)
+
+  const headers = { authorization: localStorage.getItem('token') }
+
+  return fetch(url.href, { headers })
+    .then(resp => resp.json())
+}
+
+/**
+ * Fetches tmdb movies and shows by query.
+ * @param {string} query
+ * @param {number} [page=1]
+ * @returns {object} Tmdb response
+ */
+const searchTmdb = (query, page=1) => {
+  const url = new URL('v2/search', SEASONED_URL)
+  url.searchParams.append('query', query)
+  url.searchParams.append('page', page)
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+    .catch(error => { console.error(`api error searching: ${query}, page: ${page}`); throw error })
+}
+
+// - - - Torrents - - - 
+
+/**
+ * Search for torrents by query
+ * @param {string} query
+ * @param {boolean} credits Include credits
+ * @returns {object} Torrent response
+ */
+const searchTorrents = (query, authorization_token) => {
+  const url = new URL('/api/v1/pirate/search', SEASONED_URL)
+  url.searchParams.append('query', query)
+
+  const headers = { authorization: storage.token }
+
+  return fetch(url.href, { headers: headers })
+    .then(resp => resp.json())
+    .catch(error => { console.error(`api error searching torrents: ${query}`); throw error })
+}
+
+/**
+ * Add magnet to download queue.
+ * @param {string} magnet Magnet link
+ * @param {boolean} name Name of torrent
+ * @param {boolean} tmdb_id
+ * @returns {object} Success/Failure response
+ */
+const addMagnet = (magnet, name, tmdb_id) => {
+  const url = new URL('v1/pirate/add', SEASONED_URL)
+
+  const body = {
+    magnet: magnet,
+    name: name,
+    tmdb_id: tmdb_id
+  }
+  const headers = { authorization: storage.token }
+
+  return fetch(url.href, { method: 'POST', headers, body })
+    .then(resp => resp.json())
+    .catch(error => { console.error(`api error adding magnet: ${name} ${error}`); throw error })
+}
+
+// - - - Plex/Request - - - 
+
+/**
+ * Request a movie or show from id. If authorization token is included the user will be linked
+ * to the requested item.
+ * @param {number} id Movie or show id
+ * @param {string} type Movie or show type
+ * @param {string} [authorization_token] To identify the requesting user
+ * @returns {object} Success/Failure response
+ */
+const request = (id, type, authorization_token=undefined) => {
+  const url = new URL('v2/request', SEASONED_URL)
+//  url.pathname = path.join(url.pathname, id.toString())
+//  url.searchParams.append('type', type)
+
+  const headers = {
+    'Authorization': authorization_token,
+    'Content-Type': 'application/json'
+  }
+  const body = {
+    id: id,
+    type: type
+  }
+
+  return fetch(url.href, {
+    method: 'POST',
+    headers: headers,
+    body: JSON.stringify(body)
+  })
+  .then(resp => resp.json())
+  .catch(error => { console.error(`api error requesting: ${id}, type: ${type}`); throw error })
+}
+
+/**
+ * Check request status by tmdb id and type
+ * @param {number} tmdb id
+ * @param {string} type
+ * @returns {object} Success/Failure response
+ */
+const getRequestStatus = (id, type, authorization_token=undefined) => {
+  const url = new URL('v2/request', SEASONED_URL)
+  url.pathname = path.join(url.pathname, id.toString())
+  url.searchParams.append('type', type)
+
+  return fetch(url.href)
+    .then(resp => {
+      const status = resp.status;
+      if (status === 200) { return true }
+      else if (status === 404) { return false }
+      else {
+        console.error(`api error getting request status for id ${id} and type ${type}`)
+      }
+    })
+    .catch(err => Promise.reject(err))
+}
+
+// - - - Authenticate with plex - - -
+
+const plexAuthenticate = (username, password) => {
+  const url = new URL('https://plex.tv/api/v2/users/signin')
+
+  const headers = {
+    'Content-Type': 'application/json',
+    'X-Plex-Platform': 'Linux',
+    'X-Plex-Version': 'v2.0.24',
+    'X-Plex-Platform-Version': '4.13.0-36-generic',
+    'X-Plex-Device-Name': 'Tautulli',
+    'X-Plex-Client-Identifier': '123'
+  }
+
+  let formData = new FormData()
+  formData.set('login', username)
+  formData.set('password', password)
+  formData.set('rememberMe', false)
+
+  return axios({
+      method: 'POST',
+      url: url.href,
+      headers: headers,
+      data: formData
+    })
+    .catch(error => { console.error(`api error authentication plex: ${username}`); throw error })
+}
+
+
+// - - - Random emoji - - -
+
+const getEmoji = () => {
+  const url = new URL('v1/emoji', SEASONED_URL)
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+    .catch(error => { console.log('api error getting emoji'); throw error })
+}
+
+
+// - - - ELASTIC SEARCH - - -
+// This elastic index contains titles mapped to ids. Lightning search
+// used for autocomplete
+
+/**
+ * Search elastic indexes movies and shows by query. Doc includes Tmdb daily export of Movies and
+ * Tv Shows. See tmdb docs for more info: https://developers.themoviedb.org/3/getting-started/daily-file-exports
+ * @param {string} query
+ * @returns {object} List of movies and shows matching query
+ */
+const elasticSearchMoviesAndShows = (query) => {
+  const url = new URL(path.join(ELASTIC_INDEX, '/_search'), ELASTIC_URL)
+  const headers = {
+    'Content-Type': 'application/json'
+  }
+
+  const body = {
+    "sort" : [
+      { "popularity" : {"order" : "desc"}},
+      "_score"
+    ],
+    "query": {
+      "bool": {
+        "should": [{
+          "match_phrase_prefix": {
+            "original_name": query
+          }
+        },
+        {
+          "match_phrase_prefix": {
+            "original_title": query
+          }
+        }]
+      }
+    },
+    "size": 6
+  }
+
+  return fetch(url.href, {
+    method: 'POST',
+    headers: headers,
+    body: JSON.stringify(body)
+  })
+    .then(resp => resp.json())
+    .catch(error => { console.log(`api error searching elasticsearch: ${query}`); throw error })
+}
+
+
+
+export {
+  getMovie,
+  getShow,
+  getTmdbMovieListByName,
+  searchTmdb,
+  getUserRequests,
+  getRequests,
+  searchTorrents,
+  addMagnet,
+  request,
+  getRequestStatus,
+  plexAuthenticate,
+  getEmoji,
+  elasticSearchMoviesAndShows
+}
--- a/src/components/404.vue
+++ b/src/components/404.vue
@@ -1,72 +1,39 @@
 <template>
  <section class="not-found">
-    <div class="not-found__content">
-      <h2 class="not-found__title">Page Not Found</h2>
-    </div>
+    <h1 class="not-found__title">Page Not Found</h1>
  </section>
 </template>

-<script>
-import storage from '../storage.js'
-export default {
-  created(){
-    document.title = 'Page Not Found' + storage.pageTitlePostfix;
-  }
-}
-</script>
-
-<style lang="scss">
+<style lang="scss" scoped>
@import "./src/scss/variables";
@import "./src/scss/media-queries";
-.not-found{
+
+.not-found {
+  display: flex;
+  height: calc(100vh - var(--header-size));
  width: 100%;
-  height: calc(100vh - 100px);
  background: url('~assets/pulp-fiction.jpg') no-repeat 50% 50%;
  background-size: cover;
-  display: flex;
-  align-items: center;
  justify-content: center;
-  @include tablet-min{
-    height: calc(100vh - 75px);
-  }
-  &:before{
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba($c-light, 0.7);
-  }
-  &-shortList{
-    width: 100%;
-  }
-  &__content{
-    width: 100%;
-    padding: 0 20px;
-    text-align: center;
-    @include tablet-min{
-      padding: 20px 0 0 0;
-    }
-    &-shortList {
-      width: 100%;

+  &:before {
+    content: "";
+    position: absolute;
+    height: calc(100vh - var(--header-size));
+    width: 100%;
+    background: $background-40;
+  }
+  &__title {
+   padding-top: 40vh;
+    font-size: 2rem;
+    font-weight: 500;
+    color: $text-color;
+    position: relative;
+    margin: 0;
+
+    @include tablet-min {
+      font-size: 2.3rem;
    }
  }
-    &__title{
-      font-size: 24px;
-      font-weight: 500;
-      color: $c-dark;
-      position: relative;
-      margin: 0;
-      @include tablet-min{
-        font-size: 28px;
-      }
-    }
-    &__button{
-      position: relative;
-      margin-top: 20px;
-    }
 }
 </style>
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -1,122 +1,85 @@
 <template>
-  <section class="home">
-    <header class="home__header" v-bind:style="{ 'background-image': 'url(' + imageFile + ')' }">
-      <div class="home__header-wrap">
-        <h1 class="home__header-title">Request new movies or tv shows for plex</h1>
-        <strong class="home__header-subtitle">Made with Vue.js</strong>
-      </div>
-    </header>
-    <movies-list v-for="item in listTypes" v-if="item.isCategory" :type="'component'" :mode="item.type" :category="item.query" :shortList="true"></movies-list>
+  <section>
+    <LandingBanner />
+
+    <div v-for="list in lists">
+      <list-header :title="list.title" :link="'/list/' + list.route" />
+
+      <results-list :results="list.data" :shortList="true" />
+      <loader v-if="!list.data.length" />
+    </div>
  </section>
 </template>

 <script>
-import axios from 'axios'
-import storage from '../storage.js'
-import MoviesList from './MoviesList.vue'
+import LandingBanner from '@/components/LandingBanner'
+import ListHeader from '@/components/ListHeader'
+import ResultsList from '@/components/ResultsList'
+import Loader from '@/components/ui/Loader'
+
+import { getTmdbMovieListByName, getRequests } from '@/api'

 export default {
-  components: { MoviesList },
+  name: 'home',
+  components: { LandingBanner, ResultsList, ListHeader, Loader },
  data(){
    return {
-      listTypes: storage.listTypes,
-      imageFile: 'dist/pulp-fiction.jpg'
+      imageFile: 'dist/pulp-fiction.jpg',
+      requests: [],
+      nowplaying: [],
+      upcoming: [],
+      popular: []
+    }
+  },
+  computed: {
+    lists() {
+      return [
+        {
+          title: 'Requests',
+          route: 'request',
+          data: this.requests
+        },
+        {
+          title: 'Now playing',
+          route: 'now_playing',
+          data: this.nowplaying
+        },
+        {
+          title: 'Upcoming',
+          route: 'upcoming',
+          data: this.upcoming
+        },
+        {
+          title: 'Popular',
+          route: 'popular',
+          data: this.popular
+        }
+      ]
+    }
+  },
+  methods: {
+    fetchRequests() {
+      getRequests()
+        .then(results => this.requests = results.results)
+    },
+    fetchNowPlaying() {
+      getTmdbMovieListByName('now_playing')
+        .then(results => this.nowplaying = results.results)
+    },
+    fetchUpcoming() {
+      getTmdbMovieListByName('upcoming')
+        .then(results => this.upcoming = results.results)
+    },
+    fetchPopular() {
+      getTmdbMovieListByName('popular')
+        .then(results => this.popular = results.results)
    }
  },
  created(){
-    document.title = 'TMDb';
-    storage.backTitle = document.title;
+    this.fetchRequests()
+    this.fetchNowPlaying()
+    this.fetchUpcoming()
+    this.fetchPopular()
  }
 }
 </script>
-
-<style lang="scss">
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
-.home{
-  &__header{
-    width: 100%;
-    height: 200px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    position: relative;
-    background-color: $c-dark;
-    background-image: url('~assets/arrival.jpg');
-    @include tablet-min{
-      height: 284px;
-    }
-    &:before{
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba($c-light, 0.7);
-    }
-    &-wrap{
-      text-align: center;
-      position: relative;
-    }
-    &-title{
-      font-weight: 500;
-      font-size: 22px;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      color: $c-dark;
-      margin: 0;
-      @include tablet-min{
-        font-size: 28px;
-      }
-    }
-    &-subtitle{
-      display: block;
-      font-size: 14px;
-      font-weight: 300;
-      color: $c-dark;
-      margin: 5px 0;
-      @include tablet-min{
-        font-size: 16px;
-      }
-    }
-    &-link{
-      text-decoration: none;
-      color: $c-dark;
-      font-size: 13px;
-      font-weight: 300;
-      opacity: 0.7;
-      transition: opacity 0.5s ease;
-      &:hover{
-        opacity: 1;
-      }
-      span{
-        display: inline-block;
-        vertical-align: middle;
-      }
-      &-icon{
-        display: inline-block;
-        vertical-align: middle;
-        margin-right: 2px;
-        width: 16px;
-        height: 15px;
-        fill: $c-dark;
-      }
-    }
-  }
-  .wrapper{
-    min-height: 0;
-  }
-  .movies__list{
-    .movies__item:last-child{
-      display: none;
-      @include desktop-min{
-        display: block;
-      }
-    }
-  }
-}
-</style>
--- a/src/components/LandingBanner.vue
+++ b/src/components/LandingBanner.vue
@@ -0,0 +1,92 @@
+<template>
+  <header v-bind:style="{ 'background-image': 'url(' + imageFile + ')' }">
+    <div class="container">
+      <h1 class="title">Request new movies or tv shows for plex</h1>
+      <strong class="subtitle">Made with Vue.js</strong>
+    </div>
+  </header>
+</template>
+
+<script>
+export default {
+  props: {
+    image: {
+      type: String,
+      required: false
+    }
+  },
+  data() {
+    return {
+      imageFile: 'dist/pulp-fiction.jpg'
+    }
+  },
+  beforeMount() {
+    if (this.image && this.image.length > 0) {
+      this.imageFile = this.image
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+@import "./src/scss/media-queries";
+
+header {
+  width: 100%;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  position: relative;
+
+  @include tablet-min {
+    height: 284px;
+  }
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: $background-70;
+    transition: background-color .5s ease;
+  }
+  
+  .container {
+    text-align: center;
+    position: relative;
+    transition: color .5s ease;
+  }
+  
+  .title {
+    font-weight: 500;
+    font-size: 22px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: $text-color;
+    margin: 0;
+
+    @include tablet-min{
+      font-size: 28px;
+    }
+  }
+
+  .subtitle {
+    display: block;
+    font-size: 14px;
+    font-weight: 300;
+    color: $text-color-70;
+    margin: 5px 0;
+
+    @include tablet-min{
+      font-size: 16px;
+    }
+  }
+}
+</style>
--- a/src/components/ListHeader.vue
+++ b/src/components/ListHeader.vue
@@ -0,0 +1,101 @@
+<template>
+  <header :class="{ 'sticky': sticky }">
+    <h2>{{ title }}</h2>
+
+    <span v-if="info" class="result-count">{{ info }}</span>
+    <router-link v-else-if="link" :to="link" class='view-more'>
+      View All
+    </router-link>
+  </header>  
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    sticky: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    info: {
+      type: String,
+      required: false
+    },
+    link: {
+      type: String,
+      required: false
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+@import './src/scss/variables';
+@import './src/scss/media-queries';
+
+header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 1.8rem 12px;
+
+  &.sticky {
+    background-color: $background-color;
+
+    position: sticky;
+    position: -webkit-sticky;
+    top: $header-size;
+    z-index: 4;
+
+    padding-bottom: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h2 {
+    font-size: 18px;
+    font-weight: 300;
+    text-transform: capitalize;
+    line-height: 18px;
+    margin: 0;
+    color: $text-color;
+  }
+
+  .view-more {
+    font-size: 13px;
+    font-weight: 300;
+    letter-spacing: .5px;
+    color: $text-color-70;
+    text-decoration: none;
+    transition: color .5s ease;
+    cursor: pointer;
+
+    &:after{
+      content: " →";
+    }
+    &:hover{
+      color: $text-color;
+    }
+  }
+
+  .result-count {
+    font-size: 13px;
+    font-weight: 300;
+    letter-spacing: .5px;
+    color: $text-color;
+    text-decoration: none;
+  }
+
+  @include tablet-min {
+    padding-left: 1.25rem;;
+  }
+  @include desktop-lg-min {
+    padding-left: 1.75rem;
+  }
+}
+
+</style>
--- a/src/components/ListPage.vue
+++ b/src/components/ListPage.vue
@@ -0,0 +1,104 @@
+
+<template>
+  <div>
+    <list-header :title="listTitle" :info="resultCount" :sticky="true" />
+
+    <results-list :results="results" v-if="results" />
+
+    <loader v-if="!results.length" />
+
+    <div v-if="page < totalPages" class="fullwidth-button">
+      <seasoned-button @click="loadMore">load more</seasoned-button>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import ListHeader from '@/components/ListHeader'
+import ResultsList from '@/components/ResultsList'
+import SeasonedButton from '@/components/ui/SeasonedButton'
+import Loader from '@/components/ui/Loader'
+import { getTmdbMovieListByName, getRequests } from '@/api'
+import store from '@/store'
+
+export default {
+  components: { ListHeader, ResultsList, SeasonedButton, Loader },
+  data() {
+    return {
+      legalTmdbLists: [ 'now_playing', 'upcoming', 'popular' ],
+      results: [],
+      page: 1,
+      totalPages: 0,
+      totalResults: 0
+    }
+  },
+  computed: {
+    listTitle() {
+      if (this.results.length === 0)
+        return ''
+
+      const routeListName = this.$route.params.name
+      console.log('routelistname', routeListName)
+      return routeListName.includes('_') ? routeListName.split('_').join(' ') : routeListName
+    },
+    resultCount() {
+      if (this.results.length === 0)
+        return ''
+
+      const loadedResults = this.results.length
+      const totalResults = this.totalResults < 10000 ? this.totalResults : '∞'
+      return `${loadedResults} of ${totalResults} results`
+    }
+  },
+  methods: {
+    loadMore() {
+      console.log(this.$route)
+      this.page++
+
+      window.history.replaceState({}, 'search', `/#/${this.$route.fullPath}?page=${this.page}`)
+      this.init()
+    },
+    init() {
+      const routeListName = this.$route.params.name
+
+      if (routeListName === 'request') {
+        getRequests(this.page)
+          .then(results => {
+            this.results = this.results.concat(...results.results)
+            this.page = results.page
+            this.totalPages = results.total_pages
+            this.totalResults = results.total_results
+          })
+      } else if (this.legalTmdbLists.includes(routeListName)) {
+        getTmdbMovieListByName(routeListName, this.page)
+          .then(results => {
+            this.results = this.results.concat(...results.results)
+            this.page = results.page
+            this.totalPages = results.total_pages
+            this.totalResults = results.total_results
+          })
+      } else {
+        // TODO handle if list is not found
+        console.log('404 this is not a tmdb list')
+      }
+    }
+  },
+  created() {
+    if (this.results.length === 0)
+      this.init()
+
+    store.dispatch('documentTitle/updateTitle', `${this.$router.history.current.name} ${this.$route.params.name}`)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fullwidth-button {
+  width: 100%;
+  margin: 1rem 0;
+  padding-bottom: 2rem;
+  display: flex;
+  justify-content: center;
+}
+</style>
--- a/src/components/Movie.vue
+++ b/src/components/Movie.vue
@@ -1,296 +1,262 @@
 <template>
  <section class="movie">
-    <div class="movie__container" v-if="movieLoaded">
-      <header class="movie__header" :class="{'movie__header--page': type=='page'}" :style="{ 'background-image': 'url(' + movieBackdropSrc + ')' }">
-        <div class="movie__wrap movie__wrap--header" :class="{'movie__wrap--page': type=='page'}">
-          <figure class="movie__poster">
-            <img v-if="moviePosterSrc" class="movie__img" src="~assets/placeholder.png" v-img="moviePosterSrc">
-            <img v-if="!moviePosterSrc" class="movies-item__img is-loaded" src="~assets/no-image.png">
-          </figure>
-          <div class="movie__title">
-            <h1 class="movie__title-text">
-              {{ movie.title }}
-              <!-- <span>{{ movie.type }}</span> -->
-            </h1>
-            <span>
-            </span>
-          </div>
-        </div>
-      </header>
-      <div class="movie__main">
-        <div class="movie__wrap movie__wrap--main" :class="{'movie__wrap--page': type=='page'}">
-          <!-- <div class="movie__ratings">
-            <p>here</p>
-          </div> -->
-          <!-- <div class="movie__actions" v-if="userLoggedIn && favoriteChecked"> -->
-          <div class="movie__actions">

-            <a class="movie__actions-link" v-if="matched" :class="{'active' : matched}">
-              <svg class="movie__actions-icon">
-                <use xlink:href="#iconExsits"></use>
-              </svg>
-              <span class="movie__actions-text"> Already in plex &nbsp;🎉</span>
-            </a>
-            <a class="movie__actions-link" v-else="matched">
-              <svg class="movie__actions-icon">
-                <use xlink:href="#iconNot_exsits"></use>
-              </svg>
-              <span class="movie__actions-text"> Not in plex yet</span>
-            </a>
+    <!-- HEADER w/ POSTER -->
+    <header class="movie__header" :style="{ 'background-image': movie && backdrop !== null ? 'url(' + ASSET_URL + ASSET_SIZES[1] + backdrop + ')' : '' }" :class="compact ? 'compact' : ''" @click="compact=!compact">
+      <div class="movie__wrap movie__wrap--header">
+        <figure class="movie__poster">
+          <img v-if="movie && poster === null"
+            class="movies-item__img is-loaded"
+            alt="movie poster image"
+            src="~assets/no-image.png">
+          <img v-else-if="poster === undefined"
+            class="movies-item__img grey"
+            alt="movie poster image">
+            <!-- src="~assets/placeholder.png"> -->
+          <img v-else
+            class="movies-item__img is-loaded"
+            alt="movie poster image"
+            :src="ASSET_URL + ASSET_SIZES[0] + poster">
+        </figure>

-            <a class="movie__actions-link" :class="{'active' : requested}" v-if="this.requested">
-              <svg class="movie__actions-icon">
-                <use xlink:href="#iconSent"></use>
-              </svg>
-              <span class="movie__actions-text"> Requested to be downloaded</span>
-            </a>
-            <a class="movie__actions-link" v-else="this.requested"  @click.prevent="sendRequest">
-              <svg class="movie__actions-icon" :class="{'waiting' : requested}">
-                <use xlink:href="#iconUnmatched"></use>
-              </svg>
-              <span class="movie__actions-text"> Request to be downloaded?</span>
-            </a>
-
-            <a class="movie__actions-link" @click="showTorrents=true" v-if="admin==='true'" :class="{'active' : showTorrents}">
-              <svg class="movie__actions-icon">
-                <use xlink:href="#icon_torrents"></use>
-              </svg>
-              <span class="movie__actions-text"> Search for torrents</span>
-            </a>
-
-            <a class="movie__actions-link" @click.prevent="openTmdb">
-              <svg class="movie__actions-icon">
-                <use xlink:href="#icon_info"></use>
-              </svg>
-              <span class="movie__actions-text"> See more info</span>
-            </a>
-          </div>
-          <div class="movie__info">
-            <div v-if="movie.summary" class="movie__description">
-              {{ movie.summary }}
-            </div>
-            <div class="movie__details">
-             <!--  <div v-if="movie.genres.length" class="movie__details-block">
-                <h2 class="movie__details-title">
-                  Genres
-                </h2>
-                <div class="movie__details-text">
-                  {{ nestedDataToString(movie.genres) }}
-                </div>
-              </div> -->
-              <div v-if="movie.year" class="movie__details-block">
-                <h2 class="movie__details-title">Release Date</h2>
-                <div class="movie__details-text">{{ movie.year }}</div>
-              </div>
-
-               <!-- <div v-if="movie.score" class="movie__details-block">
-                <h2 class="movie__details-title">Rating</h2>
-                <div class="movie__details-text">{{ rating }}</div>
-              </div> -->
-
-              <div v-if="movie.type == 'show'" class="movie__details-block">
-                <h2 class="movie__details-title">Seasons</h2>
-                <div class="movie__details-text">{{ movie.seasons }}</div>
-              </div>
-            </div>
-          </div>
-
-          <!-- <TableDemo class="movie__admin">This is it</TableDemo> -->
-        
-          <div class="movie__admin" v-if="admin == 'true' && showTorrents">
-              <h2 class="movie__admin-title">torrents: {{ movie.title }}</h2>
-              <TorrentList :query="movie.title" :tmdb_id="movie.id"></TorrentList>
-          </div>
+        <div class="movie__title">
+          <h1 v-if="movie">{{ movie.title }}</h1>
+          <loading-placeholder v-else :count="1" />
        </div>
      </div>
+    </header>
+
+    <!-- Siderbar and movie info -->
+    <div class="movie__main">
+      <div class="movie__wrap movie__wrap--main">
+
+        <!-- SIDEBAR ACTIONS -->
+        <div class="movie__actions" v-if="movie">
+
+          <sidebar-list-element :iconRef="'#iconNot_exsits'" :active="matched"
+            :iconRefActive="'#iconExists'" :textActive="'Already in plex 🎉'">
+
+            Not yet in plex
+          </sidebar-list-element>
+          <sidebar-list-element @click="sendRequest" :iconRef="'#iconSent'"
+            :active="requested" :textActive="'Requested to be downloaded'">
+
+            Request to be downloaded?
+          </sidebar-list-element>
+          <sidebar-list-element v-if="admin" @click="showTorrents=!showTorrents"
+            :iconRef="'#icon_torrents'" :active="showTorrents"
+            :supplementaryText="numberOfTorrentResults">
+
+            Search for torrents
+          </sidebar-list-element>
+          <sidebar-list-element @click="openTmdb" :iconRef="'#icon_info'">
+            See more info
+          </sidebar-list-element>
+        </div>
+
+        <!-- Loading placeholder -->
+        <div class="movie__actions text-input__loading" v-else>
+          <div class="movie__actions-link" v-for="_ in admin ? Array(4) : Array(3)">
+            <div class="movie__actions-text text-input__loading--line" style="margin:9px; margin-left: -3px;"></div>
+          </div>
+        </div>
+
+
+        <!-- MOVIE INFO -->
+        <div class="movie__info">
+          <div class="movie__description" v-if="movie"> {{ movie.overview }}</div>
+
+          <!-- Loading placeholder -->
+          <div v-else class="movie__description">
+            <loading-placeholder :count="12" />
+          </div>
+
+          <div class="movie__details" v-if="movie">
+            <div v-if="movie.year" class="movie__details-block">
+              <h2 class="movie__details-title">Release Date</h2>
+              <div class="movie__details-text">{{ movie.year }}</div>
+            </div>
+
+             <div v-if="movie.rank" class="movie__details-block">
+              <h2 class="movie__details-title">Rating</h2>
+              <div class="movie__details-text">{{ movie.rank }}</div>
+            </div>
+
+            <div v-if="movie.type == 'show'" class="movie__details-block">
+              <h2 class="movie__details-title">Seasons</h2>
+              <div class="movie__details-text">{{ movie.seasons }}</div>
+            </div>
+
+            <div v-if="movie.genres" class="movie__details-block">
+              <h2 class="movie__details-title">Genres</h2>
+              <div class="movie__details-text">{{ nestedDataToString(movie.genres) }}</div>
+            </div>
+          </div>
+
+        </div>
+
+        <!-- TODO: change this classname, this is general  -->
+
+        <div class="movie__admin" v-if="movie && movie.credits">
+          <h2 class="movie__details-title">Cast</h2>
+          <div style="display: flex; flex-wrap: wrap;">
+            <person v-for="cast in movie.credits.cast" :info="cast"
+              style="flex-basis: 0;"></person>
+            </div>
+        </div>
+
+      </div>
+
+      <!-- TORRENT LIST -->
+      <TorrentList v-if="movie" :show="showTorrents" :query="title" :tmdb_id="id"
+                   :admin="admin"></TorrentList>
    </div>
  </section>
 </template>

 <script>
-import axios from 'axios'
-import storage from '../storage.js'
-import img from '../directives/v-image.js'
-import formatDate from '../directives/v-formatDate.js'
-import TorrentList from './TorrentList.vue'
+import storage from '@/storage'
+import img from '@/directives/v-image'
+import TorrentList from './TorrentList'
+import Person from './Person'
+import SidebarListElement from './ui/sidebarListElem'
+import store from '@/store'
+import LoadingPlaceholder from './ui/LoadingPlaceholder'
+
+import { getMovie, getShow, request, getRequestStatus } from '@/api'

 export default {
-  props: ['id', 'type', 'mediaType'],
-  components: { TorrentList },
-  directives: {
-    img: img,
-    formatDate: formatDate
-  },
+  props: ['id', 'type'],
+  components: { TorrentList, Person, LoadingPlaceholder, SidebarListElement },
+  directives: { img: img }, // TODO decide to remove or use
  data(){
    return{
-      movie: {},
-      movieLoaded: false,
-      moviePosterSrc: '',
-      movieBackdropSrc: '',
+      ASSET_URL: 'https://image.tmdb.org/t/p/',
+      ASSET_SIZES: ['w500', 'w780', 'original'],
+      movie: undefined,
+      title: undefined,
+      poster: undefined,
+      backdrop: undefined,
+      matched: false,
      userLoggedIn: storage.sessionId ? true : false,
-      favoriteChecked: false,
      requested: false,
      admin: localStorage.getItem('admin'),
-      showTorrents: false
-    }
-  },
-  computed: {
-    loaded(){
-      return this.movieLoaded ? true : false;
+      showTorrents: false,
+      compact: false
    }
  },
  methods: {
-    fetchMovie(id){
-      this.id = id;
-      (this.mediaType == 'show') ? this.tmdbType = 'show' : this.tmdbType = 'movie'
-      axios.get(`https://api.kevinmidboe.com/api/v1/plex/request/${id}?type=${this.mediaType}`)
-      .then(function(resp){
-          let movie = resp.data;
-          this.movie = movie;
-          this.poster();
-          this.backdrop();
-          this.matched = this.movie.matchedInPlex;
-          this.requested = this.movie.requested;
-          if(this.userLoggedIn){
-            this.checkIfInFavorites(movie.id);
-            this.movieLoaded = true;
-          } else {
-            this.movieLoaded = true;
-          }
-          // Push state
-          if(storage.createMoviePopup){
-            storage.moviePath = this.mediaType + '/' + id;
-            history.pushState({ popup: true }, null, storage.moviePath);
-            storage.createMoviePopup = false;
-          }
-          // Change Page title
-          document.title = this.movie.title + storage.pageTitlePostfix;
-      }.bind(this))
-      .catch(function(error) {
-        console.log(error.response)
-        this.$router.push({ name: '404' });
-      }.bind(this));
+    parseResponse(movie) {
+      this.movie = { ...movie }
+      this.title = movie.title
+      this.poster = movie.poster
+      this.backdrop = movie.backdrop
+      this.matched = movie.existsInPlex
+      this.checkIfRequested(movie)
+        .then(status => this.requested = status)
+
+      store.dispatch('documentTitle/updateTitle', movie.title)
    },
-    poster() {
-      // Change the poster resolution
-      if(this.movie.poster_path){
-        this.moviePosterSrc = 'https://image.tmdb.org/t/p/w300' + this.movie.poster_path;
-      }
-    },
-    backdrop(){
-      if(this.movie.background_path){
-        this.movieBackdropSrc = 'https://image.tmdb.org/t/p/w500' + this.movie.background_path;
-      }
+    async checkIfRequested(movie) {
+      return await getRequestStatus(movie.id, movie.type)
    },
    nestedDataToString(data) {
-      let nestedArray = [], resultString;
-      data.forEach((item) => nestedArray.push(item.name));
-      resultString = nestedArray.join(', ');
-      return resultString;
+      let nestedArray = []
+      data.forEach(item => nestedArray.push(item));
+      return nestedArray.join(', ');
    },
-    checkIfInFavorites(id){
-      // Change to check in plex
-      axios.get(`https://api.themoviedb.org/3/${this.tmdbType}/${id}/account_states?api_key=${storage.apiKey}&session_id=${storage.sessionId}`)
-      .then(function(resp){
-          this.favorite = resp.data.favorite;
-          this.favoriteChecked = true;
-          this.movieLoaded = true;
-      }.bind(this))
-    },
-    // Toggle the downloading status if admin
-    toggleFavorite(){
-      let favoriteInvert = !this.favorite;
-      this.favorite = '';
-      axios.post(`https://api.themoviedb.org/3/account/${storage.userId}/favorite?api_key=${storage.apiKey}&session_id=${storage.sessionId}`, {
-        'media_type': 'movie',
-        'media_id': this.id,
-        'favorite': favoriteInvert
-      })
-      .then(function(resp){
-        this.favorite = favoriteInvert;
-        eventHub.$emit('updateFavorite');
-      }.bind(this));
-    },
-    // Send a request for a specific movie
    sendRequest(){
-      this.requested = ''
-      axios({
-        method: 'post', //you can set what request you want to be
-        url: `https://api.kevinmidboe.com/api/v1/plex/request/${this.id}?type=${this.mediaType}`,
-        headers: {
-          authorization: storage.token
-        }
-      })
-      // axios.post(`https://api.kevinmidboe.com/api/v1/plex/request/${this.id}?type=${this.mediaType}`, {}, {
-      //   authorization: storage.token
-      // })
-      // axios.post(`https://api.kevinmidboe.com/api/v1/plex/request/${this.id}?api_key=${storage.apiKey}&session_id=${storage.sessionId}`, {
-      .then(function(resp){
-        if (resp.data.success)
-          this.requested = true;
-        else
-          this.requested = false;
-      }.bind(this));
+      request(this.id, this.type, storage.token)
+        .then(resp => {
+          if (resp.success) {
+            this.requested = true
+          }
+        })
    },
    openTmdb(){
-      window.location.replace('https://www.themoviedb.org/' + this.tmdbType + '/' + this.id)
+      const tmdbType = this.type === 'show' ? 'tv' : this.type
+      window.location.href = 'https://www.themoviedb.org/' + tmdbType + '/' + this.id
    },
-    // Search torrents by query
-    // searchForTorrents() {
-    //   axios.get(`https://apollo.kevinmidboe.com/api/v1/plex/request/${id}?type=${'movie'}&api_key=${storage.apiKey}&language=en-US`)
-    // },
  },
  watch: {
    id: function(val){
-      this.fetchMovie(val);
+      if (this.type === 'movie') {
+        this.fetchMovie(val);
+      } else {
+        this.fetchShow(val)
+      }
    }
  },
+  computed: {
+    numberOfTorrentResults: () => {
+      let numTorrents = store.getters['torrentModule/resultCount']
+      return numTorrents !== null ? numTorrents + ' results' : null
+    }
+  },
+  beforeDestroy() {
+    store.dispatch('documentTitle/updateTitle', this.prevDocumentTitle)
+  },
  created(){
-    this.fetchMovie(this.id);
+    this.prevDocumentTitle = store.getters['documentTitle/title']
+
+    if (this.type === 'movie') {
+      getMovie(this.id)
+        .then(this.parseResponse)
+        .catch(error => {
+          this.$router.push({ name: '404' });
+        })
+    } else {
+      getShow(this.id)
+        .then(this.parseResponse)
+        .catch(error => {
+          this.$router.push({ name: '404' });
+        })
+    }
+
    console.log('admin: ', this.admin)
  }
 }
 </script>

-<style lang="scss">
+<style lang="scss" scoped>
+@import "./src/scss/loading-placeholder";
@import "./src/scss/variables";
@import "./src/scss/media-queries";

-.movie{
-  &__wrap{
+.movie {
+  &__wrap {
    display: flex;
-    &--page{
-      max-width: 768px;
-      position: relative;
-      margin: 0 auto;
-    }
-    &--header{
+    &--header {
      align-items: center;
      height: 100%;
    }
-    &--main{
+    &--main {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      @include tablet-min{
        flex-direction: row;
      }
+
+      background-color: $background-color;
+      color: $text-color;
    }
  }
-  &__header{
+  &__header {
+    $duration: 0.2s;
    height: 250px;
+    transform: scaleY(1);
+    transition: height $duration ease;
+    transform-origin: top;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
-    background-color: $c-dark;
-    @include tablet-min{
+    background-color: $background-color;
+    @include tablet-min {
      height: 350px;
-      &--page{
-        height: 384px;
-      }
    }
-    &:before{
+    &:before {
      content: "";
      display: block;
      position: absolute;
@@ -299,195 +265,153 @@ export default {
      z-index: 0;
      width: 100%;
      height: 100%;
-      background: rgba($c-dark, 0.85);
+      background: $background-dark-85;
+    }
+    &.compact {
+      height: 100px;
    }
  }
-    &__poster{
-      display: none;
-      @include tablet-min{
-        background: $c-dark;
-        display: block;
-        position: absolute;
-        width: calc(45% - 40px);
-        top: 40px;
-        left: 40px;
+
+  &__poster {
+    display: none;
+    @include tablet-min {
+      background: $background-color;
+      height: 0;
+      display: block;
+      position: absolute;
+      width: calc(45% - 40px);
+      top: 40px;
+      left: 40px;
+
+    }
+  }
+
+  &__img {
+    display: block;
+    width: 100%;
+    opacity: 0;
+    transform: scale(0.97) translateZ(0);
+    transition: opacity 0.5s ease, transform 0.5s ease;
+
+    &.is-loaded {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  &__title {
+    position: relative;
+    padding: 20px;
+    color: $green;
+    text-align: center;
+    width: 100%;
+    @include tablet-min {
+      width: 55%;
+      text-align: left;
+      margin-left: 45%;
+      padding: 30px 30px 30px 40px;
+    }
+    h1 {
+      font-weight: 500;
+      line-height: 1.4;
+      font-size: 24px;
+      @include tablet-min {
+        font-size: 30px;
      }
    }
-      &__img{
-        display: block;
-        width: 100%;
-        opacity: 0;
-        transform: scale(0.97) translateZ(0);
-        transition: opacity 0.5s ease, transform 0.5s ease;
-        &.is-loaded{
-          opacity: 1;
-          transform: scale(1);
-        }
-      }
-    &__title{
-      position: relative;
-      padding: 20px;
-      color: $c-green;
-      text-align: center;
-      width: 100%;
-      @include tablet-min{
-        width: 55%;
-        text-align: left;
-        margin-left: 45%;
-        padding: 30px 30px 30px 40px;
-      }
-      &-text{
-        font-weight: 500;
-        line-height: 1.4;
-        font-size: 24px;
-        @include tablet-min{
-          font-size: 30px;
-        }
-        span{
-          display: block;
-          font-size: 14px;
-          font-weight: 300;
-          color: rgba($c-white, 0.7);
-          margin-top: 10px;
-        }
-      }
-    }
-  &__main{
-    background: $c-light;
+  }
+  &__main {
    min-height: calc(100vh - 250px);
-    @include tablet-min{
+    @include tablet-min {
      min-height: 0;
    }
+
+    height: 100%;
  }
-    &__actions{
+    &__actions {
      text-align: center;
      width: 100%;
      order: 2;
      padding: 20px;
-      border-top: 1px solid rgba($c-dark, 0.05);
-      @include tablet-min{
+      border-top: 1px solid $text-color-5;
+      @include tablet-min {
        order: 1;
        width: 45%;
        padding: 185px 0 40px 40px;
        border-top: 0;
      }
-      &-link{
-        display: flex;
-        align-items: center;
-        text-decoration: none;
-        text-transform: uppercase;
-        color: rgba($c-dark, 0.5);
-        transition: color 0.5s ease;
-        font-size: 11px;
-        padding: 10px 0;
-        border-bottom: 1px solid rgba($c-dark, 0.05);
-        &:hover{
-          color: rgba($c-dark, 0.75);
-        }
-        &.active{
-          color: $c-dark;
-        }
-        &.pending{
-          color: #f8bd2d;
-        }
-      }
-      &-icon{
-        width: 18px;
-        height: 18px;
-        margin: 0 10px 0 0;
-        fill: rgba($c-dark, 0.5);
-        transition: fill 0.5s ease, transform 0.5s ease;
-        &.waiting{
-          transform: scale(0.8, 0.8);
-        }
-        &.pending{
-          fill: #f8bd2d;
-        }
-      }
-      &-link:hover &-icon{
-        fill: rgba($c-dark, 0.75);
-        cursor: pointer;
-      }
-      &-link.active &-icon{
-        fill: $c-green;
-      }
-      &-text{
-        display: block;
-        padding-top: 2px;
-        cursor: pointer;
-      }
    }
-    &__info{
+    &__info {
      width: 100%;
      padding: 20px;
      order: 1;
-      @include tablet-min{
+      @include tablet-min {
        order: 2;
        padding: 40px;
        width: 55%;
        margin-left: 45%;
      }
    }
-    &__actions + &__info{
+    &__info {
      margin-left: 0;
    }
-      &__description{
-        font-weight: 300;
-        font-size: 13px;
-        line-height: 1.8;
+    &__description {
+      font-weight: 300;
+      font-size: 13px;
+      line-height: 1.8;
+      margin-bottom: 20px;
+      @include tablet-min {
+        margin-bottom: 30px;
+        font-size: 14px;
+      }
+    }
+    &__details {
+      &-block {
+        float: left;
+      }
+      &-block:not(:last-child) {
        margin-bottom: 20px;
-        @include tablet-min{
+        margin-right: 20px;
+        @include tablet-min {
          margin-bottom: 30px;
-          font-size: 14px;
+          margin-right: 30px;
        }
      }
-      &__details{
-        &-block{
-          float: left;
-        }
-        &-block:not(:last-child){
-          margin-bottom: 20px;
-          margin-right: 20px;
-          @include tablet-min{
-            margin-bottom: 30px;
-            margin-right: 30px;
-          }
-        }
-        &-title{
-          margin: 0;
-          font-weight: 400;
-          text-transform: uppercase;
-          font-size: 14px;
-          color: $c-green;
-          @include tablet-min{
-            font-size: 16px;
-          }
-        }
-        &-text{
-          font-weight: 300;
-          font-size: 14px;
-          margin-top: 5px;
+      &-title {
+        margin: 0;
+        font-weight: 400;
+        text-transform: uppercase;
+        font-size: 14px;
+        color: $green;
+        @include tablet-min {
+          font-size: 16px;
        }
      }
-    &__admin{
+      &-text {
+        font-weight: 300;
+        font-size: 14px;
+        margin-top: 5px;
+      }
+    }
+    &__admin {
      width: 100%;
      padding: 20px;
      order: 2;
-      @include tablet-min{
+      @include tablet-min {
        order: 3;
        padding: 40px;
        padding-top: 0px;
        width: 100%;
      }
-      &-title{
+      &-title {
          margin: 0;
          font-weight: 400;
          text-transform: uppercase;
          text-align: center;
          font-size: 14px;
-          color: $c-green;
+          color: $green;
          padding-bottom: 20px;
-          @include tablet-min{
+          @include tablet-min {
            font-size: 16px;
          }
        }
--- a/src/components/MoviePage.vue
+++ b/src/components/MoviePage.vue
@@ -5,7 +5,7 @@
 </template>

 <script>
-import Movie from './Movie.vue';
+import Movie from './Movie';
 export default {
  components: { Movie }
 }
--- a/src/components/MoviePopup.vue
+++ b/src/components/MoviePopup.vue
@@ -1,26 +1,42 @@
 <template>
-  <div class="movie-popup" @click="$emit('close')">
+  <div class="movie-popup" @click="$popup.close()">
    <div class="movie-popup__box" @click.stop>
-      <movie :id="id" :mediaType="type"></movie>
-      <button class="movie-popup__close" @click="$emit('close')"></button>
+      <movie :id="id" :type="type"></movie>
+      <button class="movie-popup__close" @click="$popup.close()"></button>
    </div>
    <i class="loader"></i>
  </div>
 </template>

 <script>
-import Movie from './Movie.vue';
+import Movie from './Movie';

 export default {
-  props: ['id', 'type'],
+  props: {
+    id: {
+      type: Number,
+      required: true
+    },
+    type: {
+      type: String,
+      required: true
+    }
+  },
  components: { Movie },
-  created(){
-    window.addEventListener('keyup', function(e){
-      if (e.keyCode == 27) {
-        this.$emit('close');
+  methods: {
+    checkEventForEscapeKey(event) {
+      if (event.keyCode == 27) {
+        this.$popup.close()
      }
-    }.bind(this));
+    }
+  },
+  created(){
+    window.addEventListener('keyup', this.checkEventForEscapeKey)
+  },
+  beforeDestroy() {
+    window.removeEventListener('keyup', this.checkEventForEscapeKey)
  }
+
 }
 </script>

@@ -35,7 +51,7 @@ export default {
  z-index: 20;
  width: 100%;
  height: 100vh;
-  background: rgba($c-dark, 0.98);
+  background: rgba($dark, 0.93);
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  &__box{
@@ -43,7 +59,7 @@ export default {
    max-width: 768px;
    position: relative;
    z-index: 5;
-    background: $c-dark;
+    background: $background-color-secondary;
    padding-bottom: 50px;
    @include tablet-min{
      padding-bottom: 0;
@@ -70,7 +86,7 @@ export default {
      left: 10px;
      width: 20px;
      height: 2px;
-      background: $c-white;
+      background: $white;
    }
    &:before{
      transform: rotate(45deg);
@@ -79,7 +95,7 @@ export default {
      transform: rotate(-45deg);
    }
    &:hover{
-      background: $c-green;
+      background: $green;
    }
  }
 }
--- a/src/components/MoviesList.vue
+++ b/src/components/MoviesList.vue
@@ -1,378 +0,0 @@
-<template>
-  <div class="wrapper" v-if="listLoaded">
-    <div class="movies" v-if="movies.length">
-      <header class="movies__header">
-        <h2 class="movies__title">{{ listTitle }}</h2>
-        <span class="movies__results" v-if="!shortList">{{ countResults }}</span>
-
-        <router-link v-if="shortList && mode != 'user-requests'" class="movies__link" :to="{name: 'home-category', params: {category: category}}">
-          View All
-        </router-link>
-         <router-link v-if="shortList && mode == 'user-requests'" class="movies__link" :to="{name: 'user-requests'}">
-          View All
-        </router-link>
-
-        <span v-if="!shortList && (this.$route.params.category === 'requests' || mode == 'user-requests')" class="movies__filters">
-          <button type="button" class="button" @click="toggleFilter">Filter</button>
-          <span class="movies__filters__button-spacing"></span>
-          <!-- <button type="button" class="button" @click="sort">Sort</button>  -->
-          <span class="movies__filters__button-spacing"></span>
-          <div class="form__group">
-             <input v-model="filter_query" class="form__group-input" placeholder="Filter by search"/>
-          </div>
-        </span>
-      </header>
-
-      <ul v-if="showFilter" class="movies__filters-list">
-        <li v-for="(item, index) in filters.status.elms" @click="applyFilter(item, index)" :class="{'active': index === filters.status.selected}">{{ item }}</li>
-      </ul>
-
-      <ul class="movies__list">
-        <movies-list-item class="movies__item" v-for="(movie, index) in movies" :movie="movie"></movies-list-item>
-      </ul>
-      <div class="movies__nav" v-if="!shortList" :class="{'is-hidden' : currentPage == pages}">
-        <button @click="loadMore" class="button">Load Mores</button>
-      </div>
-    </div>
-    <i v-if="!listLoaded" class="loader"></i>
-    <section v-if="!movies.length && !shortList" class="not-found">
-      <div class="not-found__content">
-        <h2 class="not-found__title" v-if="mode == 'search'">Nothing Found</h2>
-        <h2 class="not-found__title" v-if="mode == 'favorite'">You haven't added any favorite movies</h2>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-import numeral from 'numeral'
-import storage from '../storage.js'
-import MoviesListItem from './MoviesListItem.vue'
-
-// Storage for removed favorite item
-let removed;
-
-export default {
-  props: ['type', 'mode', 'category', 'shortList'],
-  components: { MoviesListItem },
-  // beforeRouteLeave (to, from, next) {
-  //   if(from.name == 'search'){
-  //     eventHub.$emit('setSearchQuery', true);
-  //   }
-  //   next();
-  // },
-  data() {
-    return {
-      listTitle: '',
-      movies: [],
-      unfiltered_movies: [],
-      pages: '',
-      filter: '',
-      filter_query: '',
-      results: '',
-      currentPage: 1,
-      listLoaded: false,
-      showFilter: false,
-      filters: {
-        status: {
-          elms: ['all', 'requested', 'downloading', 'downloaded'],
-          selected: 0,
-        }
-      }
-    }
-  },
-  computed: {
-    pageTitle(){
-      return this.listTitle + storage.pageTitlePostfix;
-    },
-    query(){
-      return this.$route.params.query || '';
-    },
-    request(){
-      console.log('todays mode is: ', this.mode);
-      if(this.mode == 'search'){
-        return `https://api.kevinmidboe.com/api/v1/plex/request?query=${this.query}&page=${this.currentPage}`;
-      } else if(this.mode == 'requests' || this.$route.params.category == 'requests') {
-        return `https://api.kevinmidboe.com/api/v1/plex/requests/all?page=${this.currentPage}&status=${this.filter}`;
-      } else if(this.mode == 'collection') {
-        let category = this.$route.params.category || this.category;
-        return `https://api.kevinmidboe.com/api/v1/tmdb/list/${category}?page=${this.currentPage}`;
-      } else if(this.mode == 'history') {
-        return 'https://api.kevinmidboe.com/api/v1/user/history';
-      } else if(this.mode == 'user-requests') {
-        return 'https://api.kevinmidboe.com/api/v1/user/requests';
-      }
-    },
-    countResults(){
-      if(this.results > 1){
-        return numeral(this.results).format('0,0') + ' results';
-      } else {
-        return numeral(this.results).format('0,0') + ' result';
-      }
-    }
-  },
-  methods: {
-    fetchCategory(){
-      axios.get(this.request, {
-        headers: {authorization: storage.token},
-      })
-      .then(function(resp){
-          let data = resp.data;
-          console.log('data: ', data)
-
-          if(this.shortList){
-            this.movies = data.results.slice(0, 5);
-            this.pages = 1;
-            this.results = 5;
-          } else {
-            this.movies = data.results;
-            this.pages = data.total_pages;
-            this.results = data.total_results;
-          }
-          this.unfiltered_movies = this.movies;
-          this.listLoaded = true;
-          // Change Page title
-          if(this.type == 'page'){
-            document.title = this.pageTitle;
-          }
-      }.bind(this))
-      .catch(function(error) {
-        this.$router.push({ name: '404' });
-      }.bind(this));
-    },
-    loadMore(){
-      this.currentPage++;
-      axios.get(this.request)
-      .then(function(resp){
-          let data = resp.data;
-          let newData = this.movies.concat(data.results);
-          this.movies = newData;
-      }.bind(this));
-    },
-    // sort() {
-    //   console.log(this.showFilters)
-    // },
-    toggleFilter(item, index){
-      this.showFilter = this.showFilter ? false : true;
-      // this.results = this.results.filter(result => result.status != 'downloaded')
-    },
-    applyFilter(item, index) {
-      this.filter = item;
-      this.filters.status.selected = index;
-      console.log('applied query filter: ', item, index)
-      this.fetchCategory()
-    }
-  },
-  watch: {
-    filter_query: function(val, oldVal) {
-      let movies = this.unfiltered_movies;
-      val = val.toLowerCase()
-      if (val.length > 0)
-        movies = movies.filter(movie => movie.title.toLowerCase().startsWith(val))
-
-      if (movies.length > 0)
-        this.movies = movies;
-    }
-  },
-  created(){
-    // Set List Title
-    if(this.mode == 'search'){
-      this.listTitle = storage.categories['search'];
-      eventHub.$emit('setSearchQuery');
-    } else if(this.mode == 'requests') {
-      this.listTitle = storage.categories['requests'];
-    } else if(this.mode == 'collection') {
-      let category = this.$route.params.category || this.category;
-      this.listTitle = storage.categories[category]; // <-- this
-    } else if(this.mode == 'favorite') {
-      this.listTitle = storage.categories['favorite'];
-    } else if(this.mode == 'user-requests') {
-      this.listTitle = storage.categories['user-requests'];
-    }
-    this.fetchCategory();
-    eventHub.$on('updateFavorite', this.updateFavorite);
-  }
-}
-</script>
-<style lang="scss" scoped>
-  @import "./src/scss/media-queries";
-  .form__group-input {
-    padding: 10px 5px 10px 15px;
-    margin-left: 0;
-    height: 38px;
-    width: 150px;
-    font-size: 15px;
-    @include desktop-min {
-      width: 200px;
-      font-size: 17px;
-    }
-  }
-
-</style>
-<style lang="scss">
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
-.movies{
-  padding: 10px;
-  @include tablet-min{
-    padding: 15px;
-  }
-  @include tablet-landscape-min{
-    padding: 25px;
-  }
-  @include desktop-min{
-    padding: 30px;
-  }
-  &__header{
-    display: flex;
-    flex-flow: row wrap;
-    align-items: center;
-    justify-content: space-between;
-    padding: 20px 10px;
-
-    @include tablet-min{
-      padding: 23px 15px;
-    }
-    @include tablet-landscape-min{
-      padding: 16px 25px;
-    }
-    @include desktop-min{
-      padding: 8px 30px;
-    }
-  }
-    &__title{
-      margin: 0;
-      font-size: 16px;
-      line-height: 16px;
-      color: $c-dark;
-      font-weight: 300;
-
-      flex-basis: 50%;
-      @include tablet-min{
-        font-size: 18px;
-        line-height: 18px;
-      }
-    }
-    &__results{
-      font-size: 12px;
-      font-weight: 300;
-      letter-spacing: 0.5px;
-      color: rgba($c-dark, 0.5);
-      
-      text-align: right;
-      flex-basis: 50%;
-      @include mobile-only {
-        display: none;
-      }
-    }
-    &__link{
-      font-size: 12px;
-      font-weight: 300;
-      letter-spacing: 0.5px;
-      color: rgba($c-dark, 0.5);
-      text-decoration: none;
-      transition: color 0.5s ease;
-      &:after{
-        content: " →";
-      }
-      &:hover{
-        color: $c-dark;
-      }
-    }
-  &__filters{
-    margin-top: 10px;
-    line-height: 22px;
-    color: $c-dark;
-    font-size: 18px;
-    display: flex;
-    justify-content: flex-end;
-    transition: opacity 1s ease;
-
-    &__button-spacing {
-      @include tablet-min {
-        width: 15px;
-      }
-      @include mobile-only {
-        width: 10px;
-      }
-    }
-    &-list {
-      margin: 0px 10px;
-      padding: 0;
-      list-style: none;
-      border: solid 1px;
-      border-radius: 2px;
-      overflow: hidden;
-      display: flex;
-      transition: color 0.2s ease;
-
-      justify-content: space-evenly;
-
-      @include tablet-min{
-        margin: 0px 15px;
-      }
-      @include tablet-landscape-min {
-        margin: 0px 25px;
-      }
-      @include desktop-min{
-        margin: 0px 30px;
-      }
-      li {
-        padding: 6px 14px;
-        background-color: $c-white;
-        transition: color 0.2s ease;
-        font-size: 13px;
-        font-weight: 200;
-        text-transform: capitalize;
-        text-align: center;
-        width: 100%;
-        &:nth-child(n+2) {
-          border-left: solid 1px;
-        }
-        &.active, &:hover {
-          border-color: transparent;
-          background-color: #091c24;
-          color: $c-white;
-          cursor: pointer;
-        }
-        @include tablet-min {
-          font-size: 16px;
-        }
-      }
-    }
-    &-toggle {
-      margin-left: 15px;
-    }
-  }
-  &__list{
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    display: flex;
-    flex-wrap: wrap;
-  }
-    &__item{
-      padding: 10px;
-      width: 50%;
-      @include tablet-min{
-        padding: 15px;
-      }
-      @include tablet-landscape-min{
-        padding: 20px;
-        width: 25%;
-      }
-      @include desktop-min{
-        padding: 30px;
-        width: 20%;
-      }
-    }
-    &__nav{
-      padding: 25px 0;
-      text-align: center;
-      &.is-hidden{
-        display: none;
-      }
-    }
-}
-</style>
--- a/src/components/MoviesListItem.vue
+++ b/src/components/MoviesListItem.vue
@@ -1,6 +1,8 @@
 <template>
-  <li class="movies-item">
-    <a class="movies-item__link" :class="{'no-image': noImage}" href="#" @click.prevent="openMoviePopup(movie.id, movie.type, true)">
+  <li class="movies-item" :class="{'shortList': shortList}">
+    <a class="movies-item__link" :class="{'no-image': noImage}" @click.prevent="openMoviePopup(movie.id, movie.type)">
+
+      <!-- TODO change to picture element -->
      <figure class="movies-item__poster">
        <img v-if="!noImage" class="movies-item__img" src="~assets/placeholder.png" v-img="poster()" alt="">
        <img v-if="noImage" class="movies-item__img is-loaded" src="~assets/no-image.png" alt="">
@@ -14,29 +16,29 @@
 </template>

 <script>
-import img from '../directives/v-image.js'
+import img from '../directives/v-image'

 export default {
-  props: ['movie'],
+  props: ['movie', 'shortList'],
  directives: {
    img: img
  },
  data(){
-    return{
+    return {
      noImage: false
    }
  },
  methods: {
+    // TODO handle missing images better and load diff sizes based on screen size
    poster() {
-      if(this.movie.poster_path){
-        return 'https://image.tmdb.org/t/p/w300' + this.movie.poster_path;
+      if (this.movie.poster) {
+        return 'https://image.tmdb.org/t/p/w500' + this.movie.poster
      } else {
-        this.noImage = true;
+        this.noImage = true
      }
    },
-    openMoviePopup(id, type, event){
-      console.log('open:', id, type, event)
-      eventHub.$emit('openMoviePopup', id, type, event);
+    openMoviePopup(id, type) {
+      this.$popup.open(id, type)
    }
  }
 }
@@ -45,19 +47,41 @@ export default {
 <style lang="scss">
@import "./src/scss/variables";
@import "./src/scss/media-queries";
-.movies-item{
+
+.movies-item {
+  padding: 10px;
+  width: 50%;
+  background-color: $background-color;
+  transition: background-color 0.5s ease;
+
+  @include tablet-min{
+    padding: 15px;
+  }
+  @include tablet-landscape-min{
+    padding: 15px;
+    width: 25%;
+  }
+  @include desktop-min{
+    padding: 15px;
+    width: 20%;
+  }
+
+  @include desktop-lg-min{
+    padding: 20px;
+    width: 12.5%;
+  }
+
  &__link{
    text-decoration: none;
-    color: rgba($c-dark, 0.5);
+    color: $text-color-70;
    font-weight: 300;
  }
  &__content{
    padding-top: 15px;
  }
  &__poster{
-    transition: transform 0.5s ease, box-shadow 0.5s ease;
+    transition: transform 0.5s ease, box-shadow 0.3s ease;
    transform: translateZ(0);
-    background: $c-white;
  }
  &__img{
    width: 100%;
@@ -71,13 +95,14 @@ export default {
  }
  &__link:not(.no-image):hover &__poster{
    transform: scale(1.03);
-    box-shadow: 0 0 10px rgba($c-dark, 0.1);
+    box-shadow: 0 0 10px rgba($dark, 0.1);
  }
  &__title{
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.5px;
    transition: color 0.5s ease;
+    cursor: pointer;
    @include mobile-ls-min{
      font-size: 12px;
    }
@@ -86,7 +111,7 @@ export default {
    }
  }
  &__link:hover &__title{
-    color: $c-dark;
+    color: $text-color;
  }
 }
 </style>
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -1,63 +1,61 @@
 <template>
-  <nav class="nav">
-    <router-link class="nav__logo" :to="{name: 'home'}" exact title="Vue.js — TMDb App">
-      <svg class="nav__logo-image">
-        <use xlink:href="#svgLogo"></use>
-      </svg>
-    </router-link>
-    <div class="nav__hamburger" @click="toggleNav">
-      <div class="bar"></div>
-      <div class="bar"></div>
-      <div class="bar"></div>
-    </div>
-    <ul class="nav__list">
-      <li class="nav__item" v-for="item in listTypes" v-if="item.isCategory">
-        <router-link class="nav__link" :to="{name: item.name, params: {mode: item.type, category: item.query}}">
-          <div class="nav__link-wrap">
-            <svg class="nav__link-icon">
-              <use :xlink:href="'#icon_' + item.query"></use>
-            </svg>
-            <span class="nav__link-title">{{ item.shortTitle }}</span>
-          </div>
-        </router-link>
-      </li>
-      <li class="nav__item nav__item--profile">
-<!--         <div  class="nav__link nav__link--profile"  @click="requestToken" v-if="!userLoggedIn">
-          <div class="nav__link-wrap">
-            <svg class="nav__link-icon">
-              <use xlink:href="#iconLogin"></use>
-            </svg>
-            <span class="nav__link-title">Log In</span>
-          </div>
-        </div> -->
-         <router-link  class="nav__link nav__link--profile" :to="{name: 'signin'}" v-if="!userLoggedIn">
-          <div class="nav__link-wrap">
-            <svg class="nav__link-icon">
-              <use xlink:href="#iconLogin"></use>
-            </svg>
-            <span class="nav__link-title">Sign in</span>
-          </div>
-        </router-link>
-        <router-link  class="nav__link nav__link--profile" :to="{name: 'profile'}" v-if="userLoggedIn">
-          <div class="nav__link-wrap">
-            <svg class="nav__link-icon">
-              <use xlink:href="#iconLogin"></use>
-            </svg>
-            <span class="nav__link-title">Profile</span>
-          </div>
-        </router-link>
-      </li>
-    </ul>
-  </nav>
+  <div>
+    <nav class="nav">
+      <router-link class="nav__logo" :to="{name: 'home'}" exact title="Vue.js — TMDb App">
+        <svg class="nav__logo-image">
+          <use xlink:href="#svgLogo"></use>
+        </svg>
+      </router-link>
+
+      <div class="nav__hamburger" @click="toggleNav">
+        <div v-for="_ in 3" class="bar"></div>
+      </div>
+
+      <ul class="nav__list">
+        <li class="nav__item" v-for="item in listTypes">
+          <router-link class="nav__link" :to="'/list/' + item.route">
+            <div class="nav__link-wrap">
+              <svg class="nav__link-icon">
+                <use :xlink:href="'#icon_' + item.route"></use>
+              </svg>
+              <span class="nav__link-title">{{ item.title }}</span>
+            </div>
+          </router-link>
+        </li>
+
+        <li class="nav__item nav__item--profile">
+          <router-link class="nav__link nav__link--profile" :to="{name: 'signin'}" v-if="!userLoggedIn">
+            <div class="nav__link-wrap">
+              <svg class="nav__link-icon">
+                <use xlink:href="#iconLogin"></use>
+              </svg>
+              <span class="nav__link-title">Sign in</span>
+            </div>
+          </router-link>
+
+          <router-link class="nav__link nav__link--profile" :to="{name: 'profile'}" v-if="userLoggedIn">
+            <div class="nav__link-wrap">
+              <svg class="nav__link-icon">
+                <use xlink:href="#iconLogin"></use>
+              </svg>
+              <span class="nav__link-title">Profile</span>
+            </div>
+          </router-link>
+        </li>
+      </ul>
+    </nav>
+
+    <div class="spacer"></div>
+  </div>
 </template>

 <script>
-import storage from '../storage.js'
+import storage from '@/storage'

 export default {
  data(){
    return {
-      listTypes: storage.listTypes,
+      listTypes: storage.homepageLists,
      userLoggedIn: localStorage.getItem('token') ? true : false
    }
  },
@@ -65,64 +63,74 @@ export default {
    setUserStatus(){
      this.userLoggedIn = localStorage.getItem('token') ? true : false;
    },
-    requestToken(){
-      eventHub.$emit('requestToken');
-    },
    toggleNav(){
      document.querySelector('.nav__hamburger').classList.toggle('nav__hamburger--active');
      document.querySelector('.nav__list').classList.toggle('nav__list--active');
    }
  },
  created(){
+    // TODO move this to state manager
    eventHub.$on('setUserStatus', this.setUserStatus);
  }
 }
 </script>

-<style lang="scss">
+<style lang="scss" scoped>
@import "./src/scss/variables";
@import "./src/scss/media-queries";
-.nav{
+
+.icon {
+  width: 30px;
+}
+
+.spacer {
+  @include mobile-only {
+    width: 100%;
+    height: $header-size;
+  }
+}
+
+.nav {
+  transition: background .5s ease;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
-  background: $c-white;
-  display: flex;
  z-index: 10;
+  display: block;
+  color: $text-color;
+  background-color: $background-color-secondary;
+
  @include tablet-min{
-    display: block;
    width: 95px;
    height: 100vh;
  }
-  &__logo{
-    display: block;
+  &__logo {
    width: 55px;
-    height: 50px;
+    height: $header-size;
    display: flex;
    align-items: center;
    justify-content: center;
-    background: $c-dark;
+    background: $background-nav-logo;
    @include tablet-min{
      width: 95px;
-      height: 75px;
    }
    &-image{
      width: 35px;
      height: 31px;
-      fill: $c-green;
+      fill: $green;
      transition: transform 0.5s ease;
      @include tablet-min{
        width: 45px;
        height: 40px;
      }
    }
-    &:hover &-image{
+    &:hover &-image {
      transform: scale(1.04);
    }
  }
-  &__hamburger{
+  &__hamburger {
    display: block;
    position: fixed;
    width: 55px;
@@ -130,23 +138,22 @@ export default {
    top: 0;
    right: 0;
    cursor: pointer;
-    background: $c-white;
    z-index: 10;
-    border-left: 1px solid $c-light;
+    border-left: 1px solid $background-color;
    @include tablet-min{
      display: none;
    }
-    .bar{
+    .bar {
      position: absolute;
      width: 23px;
      height: 1px;
-      background: rgba($c-dark, 0.5);
+      background-color: $text-color-70;
      transition: all 300ms ease;
-      &:nth-child(1){
+      &:nth-child(1) {
        left: 16px;
        top: 17px;
      }
-      &:nth-child(2){
+      &:nth-child(2) {
        left: 16px;
        top: 25px;
        &:after {
@@ -156,16 +163,15 @@ export default {
          top: 0px;
          width: 23px;
          height: 1px;
-          background: transparent;
          transition: all 300ms ease;
        }
      }
-      &:nth-child(3){
+      &:nth-child(3) {
        right: 15px;
        top: 33px;
      }
    }
-    &--active{
+    &--active {
      .bar{
        &:nth-child(1),
        &:nth-child(3){
@@ -176,12 +182,13 @@ export default {
        }
        &:nth-child(2):after {
          transform: rotate(-90deg);
-          background: rgba($c-dark, 0.5);
+          // background: rgba($c-dark, 0.5);
+          background-color: $text-color-70;
        }
      }
    }
  }
-  &__list{
+  &__list {
    list-style: none;
    padding: 0;
    margin: 0;
@@ -190,23 +197,22 @@ export default {
    position: fixed;
    left: 0;
    top: 50px;
-    background: rgba($c-white, 0.98);
-    border-top: 1px solid $c-light;
-    @include mobile-only{
+    border-top: 1px solid $background-color;
+    @include mobile-only {
+      display: flex;
+      flex-wrap: wrap;
      font-size: 0;
      opacity: 0;
      visibility: hidden;
-      height: calc(100vh - 50px);
-      transition: all 0.5s ease;
+      background-color: $background-95;
      text-align: left;
      &--active{
        opacity: 1;
        visibility: visible;
      }
    }
-    @include tablet-min{
+    @include tablet-min {
      display: flex;
-      background: transparent;
      position: relative;
      display: block;
      width: 100%;
@@ -214,31 +220,44 @@ export default {
      top: 0;
    }
  }
-  &__item{
-    @include mobile-only{
-      display: inline-block;
+  &__item {
+    transition: background .5s ease, color .5s ease, border .5s ease;
+    background-color: $background-color-secondary;
+    color: $text-color-70;
+
+    @include mobile-only {
+      flex: 0 0 50%;
      text-align: center;
-      width: 50%;
-      border-bottom: 1px solid $c-light;
+      border-bottom: 1px solid $background-color;
      &:nth-child(odd){
-        border-right: 1px solid $c-light;
+        border-right: 1px solid $background-color;
+
+        &:last-child {
+          // flex: 0 0 100%;
+        }
      }
    }
-    @include tablet-min{
+    @include tablet-min {
      width: 100%;
-      border-bottom: 1px solid $c-light;
-      &--profile{
+      border-bottom: 1px solid $text-color-5;
+
+      &--profile {
        position: fixed;
        right: 0;
        top: 0;
-        width: 75px;
-        height: 75px;
+        width: $header-size;
+        height: $header-size;
        border-bottom: 0;
-        border-left: 1px solid $c-light;
+        border-left: 1px solid $background-color;
      }
    }
+    &:hover, .is-active {
+      color: $text-color;
+      background-color: $background-color;
+    }
  }
-  &__link{
+  &__link {
+    background-color: inherit; // a elements have a transparent background
    width: 100%;
    display: flex;
    flex-wrap: wrap;
@@ -249,52 +268,46 @@ export default {
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
-    color: rgba($c-dark, 0.7);
-    transition: color 0.5s ease, background 0.5s ease;
    position: relative;
    cursor: pointer;
-    @include mobile-only{
+    &-wrap {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    @include mobile-only {
      font-size: 10px;
      padding: 20px 0;
    }
-    @include tablet-min{
+    @include tablet-min {
      width: 95px;
      height: 95px;
      font-size: 9px;
-      &--profile{
+      &--profile {
        width: 75px;
        height: 75px;
-        background: $c-white;
+        background-color: $background-color-secondary;
      }
    }
-    &-icon{
+    &-icon {
      width: 20px;
      height: 20px;
-      margin-bottom: 3px;
-      fill: rgba($c-dark, 0.7);
-      transition: fill 0.5s ease;
-      @include tablet-min{
+      fill: $text-color-70;
+      @include tablet-min {
        width: 20px;
        height: 20px;
        margin-bottom: 5px;
      }
+
    }
-    &-title{
+    &-title {
+      margin-top: 5px;
      display: block;
      width: 100%;
    }
-    &:hover{
-      color: $c-dark;
-    }
-    &:hover &-icon{
-      fill: $c-dark;
-    }
-    &.is-active{
-      color: $c-dark;
-      background: $c-light;
-    }
-    &.is-active &-icon{
-      fill: $c-dark;
+    &:hover &-icon, &.is-active &-icon {
+      fill: $text-color;
    }
  }
 }
--- a/src/components/Person.vue
+++ b/src/components/Person.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="persons">
+    <div class="persons--image" :style="{ 
+      'background-image': 'url(' + getPicture(info) + ')' }"></div>
+    <span>{{ info.name }}</span>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Person',
+  components: {
+
+  },
+  props: {
+    info: Object
+  },
+  data() {
+    return {
+
+    }
+  },
+  created() {},
+  beforeMount() {},
+  computed: {
+    
+  },
+  methods: {
+getPicture: (person) => {
+  if (person)
+      return 'https://image.tmdb.org/t/p/w185' + person.profile_path;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.persons {
+  display: flex;
+  // border: 1px solid black;
+  flex-direction: column;
+
+  margin: 0 0.5rem;
+
+  span {
+    font-size: 0.6rem;
+  }
+
+  &--image {
+    border-radius: 50%;
+    height: 70px;
+    width: 70px;
+    // height: auto;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+  }
+
+  &--name {
+  }
+}
+</style>
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -3,21 +3,20 @@
    <div class="profile__content" v-if="userLoggedIn">
      <header class="profile__header">
        <h2 class="profile__title">{{ emoji }} Welcome {{ userName }}</h2>
-        
-        <div>
-           <router-link class="" :to="{name: 'settings'}">
-          </router-link>
-            <button v-if="showSettings" class="button__active" @click="toggleSettings" style="margin-right: 2em;">Hide settings</button>
-            <button v-else class="button" @click="toggleSettings" style="margin-right: 2em;">Show settings</button>
-          <button class="button" @click="logOut">Log Out</button>
+
+        <div class="button--group">
+          <seasoned-button @click="showSettings = !showSettings">{{ showSettings ? 'hide settings' : 'show settings' }}</seasoned-button>
+
+          <seasoned-button @click="logOut">Log out</seasoned-button>
        </div>
      </header>
+
      <settings v-if="showSettings"></settings>

-      <movies-list v-for="item in listTypes" v-if="!showSettings && item.isProfileContent" :type="'component'" :mode="item.type" :category="item.query" :shortList="true"></movies-list>
-      <!-- <movies-list v-for="item in listTypes" v-if="item.isCategory" :type="'component'" :mode="item.type" :shortList="true"></movies-list> -->
-      <!-- <created-lists></created-lists> -->
+      <list-header title="User requests" :info="resultCount"/>
+      <results-list v-if="results" :results="results" />
    </div>
+
    <section class="not-found" v-if="!userLoggedIn">
      <div class="not-found__content">
        <h2 class="not-found__title">Authentication Request Failed</h2>
@@ -30,21 +29,35 @@
 </template>

 <script>
-import axios from 'axios'
-import storage from '../storage.js'
-import MoviesList from './MoviesList.vue'
-import Settings from './Settings.vue'
-// import CreatedLists from './CreatedLists.vue'
+import storage from '@/storage'
+import store from '@/store'
+import ListHeader from '@/components/ListHeader'
+import ResultsList from '@/components/ResultsList'
+import Settings from '@/components/Settings'
+import SeasonedButton from '@/components/ui/SeasonedButton'
+
+import { getEmoji, getUserRequests } from '@/api'

 export default {
-  components: { MoviesList, Settings },
+  components: { ListHeader, ResultsList, Settings, SeasonedButton },
  data(){
    return{
      userLoggedIn: '',
      userName: '',
      emoji: '',
-      showSettings: false,
-      listTypes: storage.listTypes
+      results: undefined,
+      totalResults: undefined,
+      showSettings: false
+    }
+  },
+  computed: {
+    resultCount() {
+      if (this.results === undefined)
+        return
+
+      const loadedResults = this.results.length
+      const totalResults = this.totalResults < 10000 ? this.totalResults : '∞'
+      return `${loadedResults} of ${totalResults} results`
    }
  },
  methods: {
@@ -61,18 +74,9 @@ export default {
          }
      }.bind(this));
    },
-    getNewEmoji(){
-      axios.get(`https://api.kevinmidboe.com/api/v1/emoji`)
-      .then(function(resp){
-          this.emoji = resp.data.emoji;
-      }.bind(this))
-    },
    getUserInfo(){
      this.userName = localStorage.getItem('username'); 
    },
-    requestToken(){
-      eventHub.$emit('requestToken');
-    },
    toggleSettings() {
      this.showSettings = this.showSettings ? false : true;
    },
@@ -83,29 +87,55 @@ export default {
    }
  },
  created(){
-    document.title = 'Profile' + storage.pageTitlePostfix;
-    storage.backTitle = document.title;
    if(!localStorage.getItem('token')){
      this.userLoggedIn = false;
    } else {
      this.userLoggedIn = true;
      this.getUserInfo();
-      this.getNewEmoji();
+
+      getUserRequests()
+        .then(results => {
+          this.results = results.results
+          this.totalResults = results.total_results
+        })
+
+      getEmoji()
+        .then(resp => {
+          const { emoji } = resp
+          this.emoji = emoji
+          store.dispatch('documentTitle/updateEmoji', emoji)
+        })
    }
  }
 }
 </script>

-<style lang="scss">
+<style lang="scss" scoped>
@import "./src/scss/variables";
@import "./src/scss/media-queries";
+
+.button--group {
+  display: flex;
+}
+
+// DUPLICATE CODE
 .profile{
  &__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
-    border-bottom: 1px solid rgba($c-dark, 0.05);
+    border-bottom: 1px solid $text-color-5;
+
+    @include mobile-only {
+      flex-direction: column;
+      align-items: flex-start;
+
+      .button--group {
+        padding-top: 2rem;
+      }
+    }
+
    @include tablet-min{
      padding: 29px 30px;
    }
@@ -116,16 +146,16 @@ export default {
      padding: 29px 60px;
    }
  }
-    &__title{
-      margin: 0;
-      font-size: 16px;
-      line-height: 16px;
-      color: $c-dark;
-      font-weight: 300;
-      @include tablet-min{
-        font-size: 18px;
-        line-height: 18px;
-      }
+  &__title{
+    margin: 0;
+    font-size: 16px;
+    line-height: 16px;
+    color: $text-color;
+    font-weight: 300;
+    @include tablet-min{
+      font-size: 18px;
+      line-height: 18px;
    }
+  }
 }
 </style>
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -1,97 +1,52 @@
 <template>
-  <section class="profile">
-    <div class="profile__content">
-      <header class="profile__header">
-        <h2 class="profile__title">Register new user</h2>
-      </header>
+  <section>
+    <h1>Register new user</h1>

-      <form class="form">
-        <div class="form__buffer"></div>
+    <seasoned-input placeholder="username" icon="Email" type="username" :value.sync="username" />

-        <div class="center">
-          <div class="form__group">
-            <svg class="form__group__input-icon">
-              <use xlink:href="#iconEmail"></use>
-            </svg>
-            <input class="form__group-input" type="username" ref="username" placeholder="Username" >
-          </div>
-          <div class="form__group">
-            <svg class="form__group__input-icon">
-              <use xlink:href="#iconKeyhole"></use>
-            </svg>
-            <input class="form__group-input" type="password" ref="password" placeholder="Password">
-          </div>
-          <div class="form__group">
-            <svg class="form__group__input-icon">
-              <use xlink:href="#iconKeyhole"></use>
-            </svg>
-            <input class="form__group-input" type="password" ref="password_re" placeholder="Repeat password">
-          </div>
+    <seasoned-input placeholder="password" icon="Keyhole" type="password"
+      :value.sync="password" @enter="requestNewUser"/>

-          <transition name="message-fade">
-            <div class="message" :class="messageClass" v-if="showMessage">
-              <span class="message-text">{{ messageText }}</span>
-              <span class="message-dismiss" v-on:click="dismissMessage">X</span>
-            </div>
-          </transition>
+    <seasoned-input placeholder="repeat password" icon="Keyhole" type="password"
+      :value.sync="passwordRepeat" @enter="requestNewUser"/>

-          <div class="form__group">
-            <button type="button" class="button" v-on:click="requestNewUser">Register</button>
-          </div>
-        </div>
-      </form>
-      
-      <div class="form__group">
-        <router-link class="form__group-link" :to="{name: 'signin'}" exact title="Sign in here">
-          <span class="form__group-signin">Sign in here</span>
-        </router-link>
-      </div>
+    <seasoned-button @click="requestNewUser">Register</seasoned-button>

-      <!-- <created-lists></created-lists> -->
-    </div>
-    <section class="not-found" v-if="userLoggedIn === false">
-      <div class="not-found__content">
-        <h2 class="not-found__title">Authentication Request Failed</h2>
-        <button class="not-found__button button" @click="requestToken">Log In</button>
-      </div>
-    </section>
+    <router-link class="link" to="/signin">Have a user? Sign in here</router-link>
+    <seasoned-messages :messages.sync="messages"></seasoned-messages>
  </section>
 </template>

 <script>
 import axios from 'axios'
-import storage from '../storage.js'
-import MoviesList from './MoviesList.vue'
-// import CreatedLists from './CreatedLists.vue'
+import SeasonedButton from '@/components/ui/SeasonedButton'
+import SeasonedInput from '@/components/ui/SeasonedInput'
+import SeasonedMessages from '@/components/ui/SeasonedMessages'

 export default {
-  components: { MoviesList },
-  data(){
-    return{
-      userLoggedIn: '',
-      userName: '',
-      showMessage: false,
-      messageClass: 'message-success',
-      messageText: 'hello world'
+  components: { SeasonedButton, SeasonedInput, SeasonedMessages },
+  data() {
+    return {
+      messages: [],
+      username: null,
+      password: null,
+      passwordRepeat: null
    }
  },
  methods: {
    requestNewUser(){
-      let username = this.$refs.username.value;
-      let password = this.$refs.password.value;
-      let password_re = this.$refs.password_re.value;
+      let { username, password, passwordRepeat } = this
+
+      let verifyCredentials = this.checkCredentials(username, password, passwordRepeat);

-      let verifyCredentials = this.checkCredentials(username, password, password_re);
-      
      if (verifyCredentials.verified) {
        axios.post(`https://api.kevinmidboe.com/api/v1/user`, {
          username: username,
          password: password
        })
-        .then(function(resp) {
+        .then(resp => {
          let data = resp.data;
          if (data.success){
-            this.msg(data.message, 'success');
            localStorage.setItem('token', data.token);
            localStorage.setItem('username', username);
            localStorage.setItem('admin', data.admin)
@@ -99,28 +54,34 @@ export default {
            eventHub.$emit('setUserStatus');
            this.$router.push({ name: 'profile' })
          }
-        }.bind(this))
-        .catch(function(error){
-          this.msg(error.response.data.error, 'warning')
-        }.bind(this));
+        })
+        .catch(error => {
+          this.messages.push({ type: 'error', title: 'Unexpected error', message: error.response.data.error })
+        });
      } 
      else {
-        this.msg(verifyCredentials.reason, 'warning');
+        this.messages.push({ type: 'warning', title: 'Parse error', message: verifyCredentials.reason })
      }
    },
-    checkCredentials(username, password, password_re) {
-      if (password !== password_re) {
+    checkCredentials(username, password, passwordRepeat) {
+      if (!username || username.length === 0) {
+        return {
+          verified: false,
+          reason: 'Fill inn username'
+        }
+      } 
+      else if (!password || !passwordRepeat) {
+        return {
+          verified: false,
+          reason: "Fill inn both password fields"
+        }
+      }
+      else if (password !== passwordRepeat) {
        return {
          verified: false,
          reason: 'Passwords do not match'
        }
      } 
-      else if (username === undefined) {
-        return {
-          verified: false,
-          reason: 'Please insert username'
-        }
-      } 
      else {
        return {
          verified: true,
@@ -128,142 +89,38 @@ export default {
        }
      }
    },
-    msg(text, status){
-      if (status === 'warning')
-        this.messageClass = 'message-warning';
-      else if (status === 'success')
-        this.messageClass = 'message-success';
-      else
-        this.messageClass = 'message-info';
-      this.messageText = text;
-      this.showMessage = true;
-      // setTimeout(() => this.showMessage = false, 3500);
-    },
-    dismissMessage(){
-      this.showMessage = false;
-    },
    logOut(){
      localStorage.clear();
      eventHub.$emit('setUserStatus');
      this.$router.push({ name: 'home' });
    }
-  },
-  created(){
-    document.title = 'Profile' + storage.pageTitlePostfix;
-    storage.backTitle = document.title;
-  },
-  mounted(){
-    // this.$refs.email.focus();
  }
 }
 </script>

-<style lang="scss">
+<style lang="scss" scoped>
@import "./src/scss/variables";
-@import "./src/scss/media-queries";
-.message-enter-active {
-  transition: all .3s ease;
-}
-.message-fade-leave-active {
-  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
-}
-.message-fade-enter, .message-fade-leave-to {
-  opacity: 0;
-}
-.message{
-  width: 75%;
-  max-width: 35rem;
-  margin: 0 auto;
-  margin-bottom: 1rem;
-  padding: 12px 15px 12px 15px;
-  position: relative;
-  &-text{
+
+section {
+  padding: 1.3rem;
+
+  @include tablet-min {
+    padding: 4rem;
+  }
+
+  h1 {
+    margin: 0;
+    line-height: 16px;
+    color: $text-color;
    font-weight: 300;
+    margin-bottom: 20px;
+    text-transform: uppercase;
  }
-  &-dismiss{
-    position: absolute;
-    font-size: 17px;
-    font-weight: 100;
-    top: 0;
-    right: 0;
-    margin-top: 2px;
-    margin-right: 5px;
-    cursor: pointer;
-  }
-}

-.message-warning{
-  background-color: #f2dede;
-  border: 1px solid #b75b91;
-  color: #b75b91;
-}
-.message-success{
-  background-color: #dff0d9;
-  border: 1px solid #3e7549;
-  color: #3e7549;
-}
-
-.center {
-  justify-content: center;
-}
-.form{
-  z-index: 15;
-  background-color: $c-light;
-  display: flex;
-  flex-direction: column;
-  @include tablet-min{
-  }
-  &__buffer{
-    width: 100%;
-    height: 4rem;
-  }
-  &__group{
-    display: flex;
-    justify-content: center;
-    @include tablet-min{
-    }
-    &-input{
-      width: 75%;
-      max-width: 35rem;
-      padding: 15px 10px 15px 45px;
-      outline: none;
-      background-color: $c-white;
-      color: $c-dark;
-      font-weight: 100;
-      font-size: 20px;
-      border: 1px solid $c-dark;
-      margin-left: -2.2rem;
-      z-index: 3;
-      &:focus, &:hover {
-        border-color: $c-dark;
-      }
-    }
-    &-input[type="username"] {
-      margin-bottom: 3rem;
-    }
-    &__input-icon{
-      width: 24px;
-      height: 24px;
-      fill: rgba($c-dark, 0.5);
-      transition: fill 0.5s ease;
-      pointer-events: none;
-      margin-top: 15px;
-      margin-left: 15px;
-      z-index: 8;
-    }
-    &-link{
-      text-decoration: none;
-      color: black;
-      margin-top: 1rem;
-    }
-    &-signin{
-      text-transform: uppercase;
-      font-weight: 300;
-      font-size: 11px;
-      line-height: 2;
-      letter-spacing: 0.5px;
-    }
+  .link {
+    display: block;
+    width: max-content;
+    margin-top: 1rem;
  }
 }
-
 </style>
--- a/src/components/ResultsList.vue
+++ b/src/components/ResultsList.vue
@@ -0,0 +1,68 @@
+<template> 
+  <ul class="results" :class="{'shortList': shortList}">
+    <movies-list-item v-for='movie in results' :movie="movie" />
+  </ul>
+</template>
+
+
+<script>
+import MoviesListItem from '@/components/MoviesListItem'
+
+export default {
+  components: { MoviesListItem },
+  props: {
+    results: {
+      type: Array,
+      required: true
+    },
+    shortList: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  }
+}  
+</script>
+
+
+<style lang="scss" scoped>
+@import './src/scss/media-queries';
+
+.results {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  &.shortList > li {
+    display: none;
+
+    &:nth-child(-n+4) {
+      display: block;
+    }
+  }
+}
+
+@include tablet-min {
+  .results.shortList > li:nth-child(-n+6) {
+    display: block;
+  }
+}
+@include tablet-landscape-min {
+  .results.shortList > li:nth-child(-n+8) {
+    display: block;
+  }
+}
+@include desktop-min {
+  .results.shortList > li:nth-child(-n+10) {
+    display: block;
+  }
+}
+@include desktop-lg-min {
+  .results.shortList > li:nth-child(-n+16) {
+    display: block;
+  }
+}
+
+</style>
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <list-header :title="title" :info="resultCount" :sticky="true" />
+
+    <results-list :results="results" />
+    
+    <div v-if="page < totalPages" class="fullwidth-button">
+      <seasoned-button @click="loadMore">load more</seasoned-button>
+    </div>
+
+    <loader v-if="!results.length" />
+  </div>
+</template>
+
+<script>
+import { searchTmdb } from '@/api'
+import ListHeader from '@/components/ListHeader'
+import ResultsList from '@/components/ResultsList'
+import SeasonedButton from '@/components/ui/SeasonedButton'
+import Loader from '@/components/ui/Loader'
+
+export default {
+  components: { ListHeader, ResultsList, SeasonedButton, Loader },
+  props: {
+    propQuery: {
+      type: String,
+      required: false
+    },
+    propPage: {
+      type: Number,
+      required: false
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      query: String,
+      title: String,
+      page: Number,
+      totalPages: 0,
+      results: [],
+      totalResults: []
+    }
+  },
+  computed: {
+    resultCount() {
+      const loadedResults = this.results.length
+      const totalResults = this.totalResults < 10000 ? this.totalResults : '∞'
+      return `${loadedResults} of ${totalResults} results`
+    }
+  },
+  methods: {
+    search(query=this.query, page=this.page) {
+      searchTmdb(query, page)
+        .then(this.parseResponse)
+    },
+    parseResponse(data) {
+      if (this.results.length > 0) {
+        this.results.push(...data.results)
+      } else {
+        this.results = data.results
+      }
+
+      this.totalPages = data.total_pages
+      this.totalResults = data.total_results || data.results.length
+
+      this.loading = false
+    },
+    loadMore() {
+      this.page++
+
+      window.history.replaceState({}, 'search', `/#/search?query=${this.query}&page=${this.page}`)
+      this.search()
+    }
+  },
+  created() {
+    const { query, page } = this.$route.query
+
+    if (!query) {
+      // abort
+      console.error('abort, no query')
+    }
+    this.query = decodeURIComponent(query)
+    this.page = page ? page : 1
+    this.title = `Search results: ${this.query}`
+
+    this.search()
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.fullwidth-button {
+  width: 100%;
+  margin: 1rem 0;
+  padding-bottom: 2rem;
+  display: flex;
+  justify-content: center;
+}
+
+</style>
--- a/src/components/SearchInput.vue
+++ b/src/components/SearchInput.vue
@@ -0,0 +1,279 @@
+<template>
+  <div>
+    
+    <div class="search">
+      <input
+        type="text"
+        placeholder="Search for a movie or show"
+        autocorrect="off"
+        autocapitalize="off"
+        v-model="query" 
+        @input="handleInput" 
+        @click="focus = true"
+        @keydown.escape="handleEscape"
+        @keyup.enter="handleSubmit"
+        @keydown.up="navigateUp"
+        @keydown.down="navigateDown" />
+
+      <svg class="search--icon" fill="currentColor"><use xlink:href="#iconSearch"></use></svg>
+    </div> 
+
+    <transition name="fade">
+      <div class="dropdown" v-if="!disabled && focus && query.length > 0">
+        <div class="dropdown--results">
+
+          <ul v-for="(item, index) in elasticSearchResults"
+              @click="$popup.open(item.id, item.type)"
+              :class="{ active: index + 1 === selectedResult}">
+                
+              {{ item.name }}
+          </ul>
+
+        </div>
+
+        <seasoned-button class="end-section" fullWidth="true" 
+          @click="focus = false" :active="elasticSearchResults.length + 1 === selectedResult">
+          close
+        </seasoned-button>
+      </div>
+    </transition>
+</div>
+
+
+</template>
+
+<script>
+import SeasonedButton from '@/components/ui/SeasonedButton'
+
+import { elasticSearchMoviesAndShows } from '@/api'
+import config from '@/config.json'
+
+export default {
+  name: 'SearchInput',
+  components: {
+    SeasonedButton
+  },
+  props: ['value'],
+  data() {
+    return {
+      query: this.value,
+      focus: false,
+      disabled: false,
+      scrollListener: undefined,
+      scrollDistance: 0,
+      elasticSearchResults: '',
+      selectedResult: 0
+    }
+  },
+  watch: {
+    focus: function(val) {
+      if (val === true) {
+        window.addEventListener('scroll', this.disableFocus)
+      } else {
+        window.removeEventListener('scroll', this.disableFocus)
+        this.scrollDistance = 0
+      }
+    }
+  },
+  beforeMount() {
+    const elasticUrl = config.ELASTIC_URL
+    if (elasticUrl === undefined || elasticUrl === false || elasticUrl === '') {
+      this.disabled = true
+    }
+  },
+  beforeDestroy() {
+    console.log('scroll eventlistener not removed, destroying!')
+    window.removeEventListener('scroll', this.disableFocus)
+  },
+  methods: {
+    navigateDown() {
+      this.focus = true
+      this.selectedResult++
+    },
+    navigateUp() {
+      this.focus = true
+      this.selectedResult--
+    },
+    handleInput(e){
+      this.selectedResult = 0
+      this.$emit('input', this.query);
+
+      if (! this.focus) {
+        this.focus = true;
+      }
+
+      elasticSearchMoviesAndShows(this.query)
+      .then(resp => {
+        const data = resp.hits.hits
+
+        this.elasticSearchResults = data.map(item => {
+          const index = item._index.slice(0, -1)
+          if (index === 'movie' || item._source.original_title) {
+            return {
+              name: item._source.original_title,
+              id: item._source.id,
+              type: 'movie'
+            }
+          } else if (index === 'show' || item._source.original_name) {
+            return {
+              name: item._source.original_name,
+              id: item._source.id,
+              type: 'show'
+            }
+          }
+        })
+        console.log(this.elasticSearchResults)
+      })
+    },
+    handleSubmit() {
+      let searchResults = this.elasticSearchResults
+
+      if (this.selectedResult > searchResults.length) {
+        this.focus = false
+        this.selectedResult = 0
+      } else if (this.selectedResult > 0) {
+        const resultItem = searchResults[this.selectedResult - 1]
+        this.$popup.open(resultItem.id, resultItem.type)
+      } else {
+        const encodedQuery = encodeURI(this.query.replace('/ /g, "+"'))
+        this.$router.push({ name: 'search', query: { query: encodedQuery }});
+        this.focus = false
+        this.selectedResult = 0
+      }
+    },
+    handleEscape() {
+      if (this.$popup.isOpen) {
+        console.log('THIS WAS FUCKOING OPEN!')
+      } else {
+        this.focus = false
+      }
+    },
+    disableFocus(_) {
+      this.focus = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+@import "./src/scss/media-queries";
+@import './src/scss/main';
+
+
+.fade-enter-active {
+  transition: opacity .2s;
+}
+.fade-leave-active {
+  transition: opacity .2s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
+.dropdown {
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  z-index: 5;
+  min-height: $header-size;
+  right: 0px;
+  background-color: $background-color-secondary;
+
+  @include mobile-only {
+    position: fixed;
+    top: 50px;
+    padding-top: 20px;
+    width: calc(100%);
+  }
+
+  &--results {
+    padding-left: 60px;
+    width: 100%;
+
+    @include mobile-only {
+      padding-left: 45px;
+    }
+
+    > ul {
+      font-size: 1.3rem;
+      padding: 0;
+      margin: 0.2rem 0;
+      width: calc(100% - 25px);
+      max-width: fit-content;
+
+      list-style: none;      
+      color: rgba(0, 0, 0, 0.5);
+      text-transform: capitalize;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      color: $text-color-50;
+
+      &.active, &:hover, &:active {
+        color: $text-color;
+        border-bottom: 2px solid $text-color;
+      }
+    }
+  }
+}
+
+.search {
+  height: $header-size;
+  display: flex;
+  position: fixed;
+  flex-wrap: wrap;
+  z-index: 5;
+  border: 0;
+  background-color: $background-color-secondary;
+
+  // TODO check if this is for mobile
+  width: calc(100% - 110px);
+  top: 0;
+  right: 55px;
+
+  @include tablet-min{
+    position: relative;
+    width: 100%;
+    right: 0px;
+  }
+
+  input {
+    display: block;
+    width: 100%;
+    padding: 13px 20px 13px 45px;
+    outline: none;
+    margin: 0;
+    border: 0;
+    background-color: $background-color-secondary;
+    font-weight: 300;
+    font-size: 19px;
+    color: $text-color;
+    transition: background-color .5s ease, color .5s ease;
+
+    @include tablet-min {
+      padding: 13px 30px 13px 60px;
+    }
+  }
+
+  &--icon{
+    width: 20px;
+    height: 20px;
+    fill: $text-color-50;
+    transition: fill 0.5s ease;
+    pointer-events: none;
+    position: absolute;
+    left: 15px;
+    top: 15px;
+
+    @include tablet-min{
+      top: 27px;
+      left: 25px;
+    }
+  }
+}
+</style>
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -1,45 +1,38 @@
 <template>
  <section class="profile">
-   <demo-login-modal/>
    <div class="profile__content" v-if="userLoggedIn">
      <section class='settings'>
-         <h3 class='settings__header'>Plex account</h3>
-         <span class="settings__info">Sign in to your plex account to get information about recently added movies and to see your watch history</span>
-         
-         <form class="form">
-            <div class="form__group">
-               <svg class="form__group__input-icon"><use xlink:href="#iconEmail"></use></svg>
-               <input class="form__group-input" type="text" ref="plex_username" placeholder="Plex username"/>
-            </div>
-            <div class="form__group">
-               <svg class="form__group__input-icon"><use xlink:href="#iconKeyhole"></use></svg>
-               <input class="form__group-input" type="password" ref="plex_password" placeholder="Repeat new password">
-            </div>
-         </form>
-         <div class="plex">
-            <button type="button" class="button" @click="authenticatePlex">Link plex account</button>
-         </div>
+        <h3 class='settings__header'>Plex account</h3>
+        <span class="settings__info">Sign in to your plex account to get information about recently added movies and to see your watch history</span>

-         <hr class='setting__divider'>
+        <form class="form">
+          <seasoned-input placeholder="plex username" icon="Email" :value.sync="plexUsername"/>
+          <seasoned-input placeholder="plex password" icon="Keyhole" type="password"
+            :value.sync="plexPassword" @submit="authenticatePlex" />

-         <h3 class='settings__header'>Change password</h3>
-         <form class="form">
-            <div class="form__group">
-               <svg class="form__group__input-icon"><use xlink:href="#iconKeyhole"></use></svg>
-               <input class="form__group-input" type="password" ref="password" placeholder="New password"/>
-            </div>
-            <div class="form__group">
-               <svg class="form__group__input-icon"><use xlink:href="#iconKeyhole"></use></svg>
-               <input class="form__group-input" type="password" ref="password_re" placeholder="Repeat new password">
-            </div>
-            <div class="form__group">
-               <button type="button" class="button" @click="$modal.show('demo-login')">Change password</button>
-            </div>
-         </form>
-         <hr class='setting__divider'>
+          <seasoned-button @click="authenticatePlex">link plex account</seasoned-button>
+
+          <seasoned-messages :messages.sync="messages" />
+        </form>
+
+        <hr class='setting__divider'>
+
+        <h3 class='settings__header'>Change password</h3>
+        <form class="form">
+          <seasoned-input placeholder="new password" icon="Keyhole" type="password"
+            :value.sync="newPassword" />
+
+          <seasoned-input placeholder="repeat new password" icon="Keyhole" type="password"
+            :value.sync="newPasswordRepeat" />
+
+          <seasoned-button @click="changePassword">change password</seasoned-button>
+        </form>
+
+        <hr class='setting__divider'>
      </section>
    </div>
-    <section class="not-found" v-if="!userLoggedIn">
+
+    <section class="not-found" v-else>
      <div class="not-found__content">
        <h2 class="not-found__title">Authentication Request Failed</h2>
        <router-link :to="{name: 'signin'}" exact title="Sign in here">
@@ -51,52 +44,53 @@
 </template>

 <script>
-import axios from 'axios'
-import storage from '../storage.js'
-import DemoLoginModal from './demo.vue'
-// import CreatedLists from './CreatedLists.vue'
+import storage from '@/storage'
+import SeasonedInput from '@/components/ui/SeasonedInput'
+import SeasonedButton from '@/components/ui/SeasonedButton'
+import SeasonedMessages from '@/components/ui/SeasonedMessages'
+
+import { plexAuthenticate } from '@/api'

 export default {
-  components: { DemoLoginModal },
+  components: { SeasonedInput, SeasonedButton, SeasonedMessages },
  data(){
    return{
      userLoggedIn: '',
+      messages: [],
+      plexUsername: null,
+      plexPassword: null,
+      newPassword: null,
+      newPasswordRepeat: null
    }
  },
  methods: {
-   authenticatePlex() {
-      let username = this.$refs.plex_username.value;
-      let password = this.$refs.plex_password.value;
-      console.log(username, password)
+    setValue(l, t) {
+      this[l] = t
+    },
+    changePassword() {
+      return
+    },
+    authenticatePlex() {
+      let username = this.plexUsername
+      let password = this.plexPassword

-      axios({
-         method: 'POST',
-         url: `https://plex.tv/users/sign_in.json?user[login]=${username}&user[password]=${password}`,
-         headers: {
-            'Content-Type': 'application/json',
-            'X-Plex-Platform': 'Linux',
-            'X-Plex-Version': 'v2.0.24',
-            'X-Plex-Platform-Version': '4.13.0-36-generic',
-            'X-Plex-Device-Name': 'Tautulli',
-            'X-Plex-Client-Identifier': 'f9e0748ec84440dd8d0e759ab598326c'
-         },
+      plexAuthenticate(username, password)
+      .then(resp => {
+        const data = resp.data
+        this.messages.push({ type: 'success', title: 'Authenticated with plex', message: 'Successfully linked plex account with seasoned request' })
+
+        console.log('response from plex:', data.username)
      })
-      .then((resp) => {
-         let data = resp.data;
-         console.log('response from plex:', data.user)
+      .catch(error => {
+        console.error(error);
+
+        this.messages.push({ type: 'error', title: 'Something went wrong', message: error.message })
      })
-      .catch((error) => {
-         console.log('error: ', error)
-      })
-   }
+    }
  },
  created(){
-    document.title = 'Settings' + storage.pageTitlePostfix;
-    storage.backTitle = document.title;
-    if(!localStorage.getItem('token')){
-      this.userLoggedIn = false;
-    } else {
-      this.userLoggedIn = true;
+    if (localStorage.getItem('token')){
+      this.userLoggedIn = true
    }
  }
 }
@@ -105,28 +99,34 @@ export default {
 <style lang="scss" scoped>
@import "./src/scss/variables";
@import "./src/scss/media-queries";
+
 a {
   text-decoration: none;
 }
-.plex {
-   margin-top: 20px;
-}
-.form__group{
-   justify-content: unset;
-   &__input-icon {
-      margin-top: 8px;
-      height: 22px;
-      width: 22px;
-   }
-   &-input {
-      padding: 10px 5px 10px 45px;
-      height: 40px;
-      font-size: 17px;
-      width: 75%;
-      @include desktop-min {
-         width: 400px;
-      }
-   }
+
+// DUPLICATE CODE
+.form {
+  > div:last-child {
+    margin-top: 1rem;
+  }
+
+  &__group{
+     justify-content: unset;
+     &__input-icon {
+        margin-top: 8px;
+        height: 22px;
+        width: 22px;
+     }
+     &-input {
+        padding: 10px 5px 10px 45px;
+        height: 40px;
+        font-size: 17px;
+        width: 75%;
+        @include desktop-min {
+           width: 400px;
+        }
+     }
+  }
 }
 .settings {
   padding: 35px;
@@ -134,7 +134,7 @@ a {
   &__header {
      margin: 0;
      line-height: 16px;
-      color: $c-dark;
+      color: $text-color;
      font-weight: 300;
      margin-bottom: 20px;
      text-transform: uppercase;
--- a/src/components/Signin.vue
+++ b/src/components/Signin.vue
@@ -1,122 +1,99 @@
 <template>
-  <section class="profile">
-    <div class="profile__content">
-      <header class="profile__header">
-        <h2 class="profile__title">Register new user</h2>
-      </header>
+  <section>
+    <h1>Sign in</h1>

-      <form class="form">
-        <div class="form__buffer"></div>
-        <div>
-          <div class="form__group">
-            <svg class="form__group__input-icon">
-              <use xlink:href="#iconEmail"></use>
-            </svg>
-            <input class="form__group-input" type="username" ref="username" placeholder="Username" >
-          </div>
-          <div class="form__group">
-            <svg class="form__group__input-icon">
-              <use xlink:href="#iconKeyhole"></use>
-            </svg>
-            <input class="form__group-input" type="password" ref="password" placeholder="Password" v-on:keyup.enter="signin">
-          </div>
-          
-          <transition name="message-fade">
-              <div class="message" :class="messageClass" v-if="showMessage">
-                <span class="message-text">{{ messageText }}</span>
-                <span class="message-dismiss" @click="showMessage=false">X</span>
-              </div>
-            </transition>
-          
-          <div class="form__group">
-            <button type="button" class="button" v-on:click="signin">Sign in</button>
-          </div>
-        </div>
-      </form>
-      
-      <div class="form__group">
-        <router-link class="form__group-link" :to="{name: 'register'}" exact title="Sign in here">
-          <span class="form__group-signin">Don't have a user? Register here</span>
-        </router-link>
-      </div>
+    <seasoned-input placeholder="username" icon="Email" type="username" :value.sync="username" />
+    <seasoned-input placeholder="password" icon="Keyhole" type="password" :value.sync="password" @enter="signin"/>
+
+    <seasoned-button @click="signin">sign in</seasoned-button>
+
+    <router-link class="link" to="/register">Don't have a user? Register here</router-link>
+    <seasoned-messages :messages.sync="messages"></seasoned-messages>

-      <!-- <created-lists></created-lists> -->
-    </div>
  </section>
 </template>

+
+
 <script>
 import axios from 'axios'
-import storage from '../storage.js'
-import MoviesList from './MoviesList.vue'
-// import CreatedLists from './CreatedLists.vue'
+import storage from '../storage'
+import SeasonedInput from '@/components/ui/SeasonedInput'
+import SeasonedButton from '@/components/ui/SeasonedButton'
+import SeasonedMessages from '@/components/ui/SeasonedMessages'

 export default {
-  components: { MoviesList },
+  components: { SeasonedInput, SeasonedButton, SeasonedMessages },
  data(){
    return{
-      userLoggedIn: '',
-      userName: '',
-      showMessage: false,
-      messageClass: 'message-success',
-      messageText: 'hello world'
+      messages: [],
+      username: null,
+      password: null
    }
  },
  methods: {
+    setValue(l, t) {
+      this[l] = t
+    },
    signin(){
-      let username = this.$refs.username.value;
-      let password = this.$refs.password.value;
+      let username = this.username;
+      let password = this.password;

      axios.post(`https://api.kevinmidboe.com/api/v1/user/login`, {
        username: username,
        password: password
      })
-      .then(function (resp){
+      .then(resp => {
        let data = resp.data;
        if (data.success){
          localStorage.setItem('token', data.token);
          localStorage.setItem('username', username);
          localStorage.setItem('admin', data.admin);
-          this.userLoggedIn = true;
          
          eventHub.$emit('setUserStatus');
          this.$router.push({ name: 'profile' })
        }
-      }.bind(this))
-      .catch(function (error){
-        if (error.message.endsWith('401'))
-          this.msg('Incorrect username or password ', 'warning')
-        else
-          this.msg(error.message, 'warning')
-      }.bind(this));
-    },
-    msg(text, status){
-      if (status === 'warning')
-        this.messageClass = 'message-warning';
-      else if (status === 'success')
-        this.messageClass = 'message-success';
-      else
-        this.messageClass = 'message-info';
-      this.messageText = text;
-      this.showMessage = true;
-      // setTimeout(() => this.showMessage = false, 3500);
-    },
-    toggleView(){
-      this.register = false;
-    },
+      })
+      .catch(error => {
+        if (error.message.endsWith('401')) {
+          this.messages.push({ type: 'warning', title: 'Access denied', message: 'Incorrect username or password' })
+        }
+        else {
+          this.messages.push({ type: 'error', title: 'Unexpected error', message: error.message })
+        }
+      });
+    }
  },
  created(){
    document.title = 'Sign in' + storage.pageTitlePostfix;
    storage.backTitle = document.title;
-    if (this.userLoggedIn == true) {
-      this.$router.push({ name: 'profile' })
-    }
-  },
-  mounted(){
-    // this.$refs.email.focus();
  }
 }
 </script>

-<style lang="scss">
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+
+section {
+  padding: 1.3rem;
+
+  @include tablet-min {
+    padding: 4rem;
+  }
+
+  h1 {
+    margin: 0;
+    line-height: 16px;
+    color: $text-color;
+    font-weight: 300;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+  }
+
+  .link {
+    display: block;
+    width: max-content;
+    margin-top: 1rem;
+  }
+}
 </style>
--- a/src/components/TorrentList.vue
+++ b/src/components/TorrentList.vue
@@ -1,145 +1,502 @@
 <template>
-  <section>
-    <div v-if="listLoaded">
-      <div v-if="torrents.length">
-        <data-tablee
-      :rows="torrents"
-      :cols="cols"
-      empty="-"
-    >
-      <span
-        class="data-tablee-icon"
-        slot="sort-icon"
-        slot-scope="{ sortment, sorted, arrow }"
-      >
-        {{ sorted ? arrow + ' ' + (sortment === 'ascending' ? 'ASC' : 'DESC') : '' }}
-      </span>
+  <div v-if="show" class="container">
+    <h2 class="torrentHeader-text">Searching for: {{ editedSearchQuery || query }}</h2>
+<!--     <div class="torrentHeader">
+      <span class="torrentHeader-text">Searching for:&nbsp;</span>

-      <template
-        slot="row"
-        slot-scope="{ row, index }"
-      >
-        <td class="data-tablee-cell -content data-tablee-text" v-bind:title="row.name" v-if="!renderName">{{ row.name.slice(0, 50) }}</td>
-        <td class="data-tablee-cell -content data-tablee-text" v-on:click="showInfo(row.name)">{{ row.seed }}</td>
-        <td class="data-tablee-cell -content data-tablee-text" v-on:click="showInfo(row.name)">{{ row.size }}</td>
-        <td class="data-tablee-cell -content data-tablee-text magnet">
-          <button type='button' class="button" @click="sendTorrent(row.magnet, row.name)">Add</button>
-        </td>
-      </template>
-    </data-tablee>
-      </div>
-      <section v-if="!torrents.length" class="">
-        <div class="not-found__content">
-          <h2 class="not-found__title">{{ errorMessage }}</h2>
+
+      <span id="search" :contenteditable="editSearchQuery ? true : false" class="torrentHeader-text editable">{{ editedSearchQuery || query }}</span>
+
+
+      <svg v-if="!editSearchQuery" class="torrentHeader-editIcon" @click="toggleEditSearchQuery">
+        <use xlink:href="#icon_radar"></use>
+      </svg>
+
+      <svg v-else class="torrentHeader-editIcon" @click="toggleEditSearchQuery">
+        <use xlink:href="#icon_check"></use>
+      </svg>
+
+    </div> -->
+
+    <div v-if="listLoaded">
+      <div v-if="torrents.length > 0">
+        <ul class="filter">
+          <li class="filter-item" v-for="(item, index) in release_types" @click="applyFilter(item, index)" :class="{'active': item === selectedRelaseType}">{{ item }}</li>
+        </ul>
+
+
+        <table>
+          <tr class="table__header noselect">
+            <th @click="sortTable('name')" :class="selectedSortableClass('name')">
+              <span>Name</span>
+              <span v-if="prevCol === 'name' && direction">↑</span>
+              <span v-if="prevCol === 'name' && !direction">↓</span>
+            </th>
+            <th @click="sortTable('seed')" :class="selectedSortableClass('seed')">
+              <span>Seed</span>
+              <span v-if="prevCol === 'seed' && direction">↑</span>
+              <span v-if="prevCol === 'seed' && !direction">↓</span>
+            </th>
+            <th @click="sortTable('size')" :class="selectedSortableClass('size')">
+              <span>Size</span>
+              <span v-if="prevCol === 'size' && direction">↑</span>
+              <span v-if="prevCol === 'size' && !direction">↓</span>
+            <th>
+              <span>Magnet</span>
+            </th>
+          </tr>
+          <tr v-for="torrent in torrents" class="table__content">
+            <td @click="expand($event, torrent.name)">{{ torrent.name }}</td>
+            <td @click="expand($event, torrent.name)">{{ torrent.seed }}</td>
+            <td @click="expand($event, torrent.name)">{{ torrent.size }}</td>
+            <td @click="sendTorrent(torrent.magnet, torrent.name, $event)" class="download">
+              <svg class="download__icon"><use xlink:href="#iconUnmatched"></use></svg>
+            </td>
+          </tr>
+        </table>
+
+        <div style="
+          display: flex;
+          justify-content: center;
+          padding: 1rem;
+        ">
+          <seasonedButton @click="resetTorrentsAndToggleEditSearchQuery">Edit search query</seasonedButton>
        </div>
-      </section>
+      </div>
+
+    <div v-else style="display: flex;
+                       padding-bottom: 2rem;
+                       justify-content: center;
+                       flex-direction: column;
+                       width: 100%;
+                       align-items: center;">
+      <h2>No results found</h2>
+      <br />
+
+      <div class="editQuery" v-if="editSearchQuery">
+
+        <seasonedInput placeholder="Torrent query" icon="_torrents" :value.sync="editedSearchQuery" @enter="fetchTorrents(editedSearchQuery)" />
+
+        <div style="height: 45px; width: 5px;"></div>
+
+        <seasonedButton @click="fetchTorrents(editedSearchQuery)">Search</seasonedButton>
+      </div>
+
+      <seasonedButton @click="toggleEditSearchQuery" :active="editSearchQuery ? true : false">Edit search query</seasonedButton>
    </div>
-    <i v-if="!listLoaded" class="torrentloader"></i>
-  </section>
+    </div>
+    <div v-else class="torrentloader"><i></i></div>
+  </div>
 </template>

 <script>
-import axios from 'axios'
-import numeral from 'numeral'
-import storage from '../storage.js'
+import storage from '@/storage'
+import store from '@/store'
+import { sortableSize } from '@/utils'
+import { searchTorrents, addMagnet } from '@/api'

-// import testTorrents from './torrents.json';
-
-let tablet = window.innerWidth < 768 ? true : false;
+import SeasonedButton from '@/components/ui/SeasonedButton'
+import SeasonedInput from '@/components/ui/SeasonedInput'

 export default {
-  props: ['query', 'tmdb_id', 'tmdb_type'],
-  beforeRouteLeave (to, from, next) {
-    if(from.name == 'search'){
-      eventHub.$emit('setSearchQuery', true);
-    }
-    next();
+  components: { SeasonedButton, SeasonedInput },
+  props: {
+    query: {
+      type: String,
+      require: true
+    },
+    tmdb_id: {
+      type: Number,
+      require: true
+    },
+    tmdb_type: String,
+    admin: String,
+    show: Boolean
  },
  data() {
    return {
-      torrents: [],
      listLoaded: false,
-      errorMessage: '',
-      renderName: tablet,
-      cols: [
-        { label: 'Name', field: 'name', sort: true, hidden: tablet },
-        { label: 'Seeders', field: 'seed', sort: (a, b) => parseInt(a) - parseInt(b) },
-        { label: 'Size', field: 'size', sort: (a, b) => this.sortableSize(a) - this.sortableSize(b) },
-        { label: 'Add', align: 'center' }
-      ],
+      torrents: [],
+      torrentResponse: undefined,
+      currentPage: 0,
+      prevCol: '',
+      direction: false,
+      release_types: ['all'],
+      selectedRelaseType: 'all',
+      editSearchQuery: false,
+      editedSearchQuery: ''
    }
  },
+  beforeMount() {
+    if (localStorage.getItem('admin')) {
+      this.fetchTorrents()
+    }
+    store.dispatch('torrentModule/reset')
+  },
  methods: {
-    fetchTorrents(){
-      axios.get(`https://api.kevinmidboe.com/api/v1/pirate/search?query=${this.query}&filter=all&page=${this.currentPage}`, {
-        headers: {authorization: storage.token},
-      })
-      .then(resp => {
-          let data = resp.data;
-          this.torrents = data.results;
-          this.listLoaded = true;
-      })
-      .catch(e => {
-        const error = e.toString()
-        this.errorMessage = error.indexOf('401') != -1 ? 'Permission denied' : 'Nothing found';
-        this.listLoaded = true;
-      });
+    selectedSortableClass(headerName) {
+      return headerName === this.prevCol ? 'active' : ''
    },
-    sendTorrent(magnet, name){
-      axios.post(`https://api.kevinmidboe.com/api/v1/pirate/add`, {
-        magnet: magnet, name: name, tmdb_id: this.tmdb_id }, { headers: {authorization: storage.token}
+    resetTorrentsAndToggleEditSearchQuery() {
+      this.torrents = []
+      this.toggleEditSearchQuery()
+    },
+    toggleEditSearchQuery() {
+      this.editSearchQuery = !this.editSearchQuery;
+    },
+    expand(event, name) {
+      const existingExpandedElement = document.getElementsByClassName('expanded')[0]
+
+      if (existingExpandedElement) {
+        console.log('exists')
+        const expandedSibling = event.target.parentNode.nextSibling.className === 'expanded'
+
+        existingExpandedElement.remove()
+
+        if (expandedSibling) {
+          console.log('sibling is here')
+          return
+        }
+      }
+
+      console.log('expand event', event)
+      const nameRow = document.createElement('tr')
+      const nameCol = document.createElement('td')
+      nameRow.className = 'expanded'
+      nameCol.innerText = name
+
+      nameRow.appendChild(nameCol)
+
+      event.target.parentNode.insertAdjacentElement('afterend', nameRow)
+    },
+    sendTorrent(magnet, name, event){
+      this.$notifications.info({
+        title: 'Adding torrent 🦜',
+        description: this.query,
+        timeout: 3000
      })
+
+      event.target.parentNode.classList.add('active')
+
+      addMagnet(magnet, name, this.tmdb_id)
      .catch((resp) => { console.log('error:', resp.data) })
-      .then((resp) => { console.log('addTorrent resp: ', resp) })
+      .then((resp) => {
+        console.log('addTorrent resp: ', resp)
+        this.$notifications.success({
+          title: 'Torrent added 🎉',
+          description: this.query,
+          timeout: 3000
+        })
+      })
    },
-    showInfo(text){
-      alert(text)
+    sortTable(col, sameDirection=false) {
+      if (this.prevCol === col && sameDirection === false) {
+        this.direction = !this.direction
+      }
+      console.log('col and more', col, sameDirection)
+
+      switch (col) {
+        case 'name':
+          this.sortName()
+          break
+        case 'seed':
+          this.sortSeed()
+          break
+        case 'size':
+          this.sortSize()
+          break
+      }
+      this.prevCol = col
    },
-    sortableSize(string) {
-       const UNITS = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-       const [numStr, unit] = string.split(' ');
-       if (UNITS.indexOf(unit) === -1)
-          return string
-       const exponent = UNITS.indexOf(unit) * 3
-       return numStr * (Math.pow(10, exponent))
+    sortName() {
+      const torrentsCopy = [...this.torrents]
+      if (this.direction) {
+        this.torrents = torrentsCopy.sort((a, b) => (a.name < b.name) ? 1 : -1)
+      } else {
+        this.torrents = torrentsCopy.sort((a, b) => (a.name > b.name) ? 1 : -1)
+      }
    },
-  },
-  created(){
-    this.fetchTorrents();
-  },
+    sortSeed() {
+      const torrentsCopy = [...this.torrents]
+      if (this.direction) {
+        this.torrents = torrentsCopy.sort((a, b) => parseInt(a.seed) - parseInt(b.seed));
+      } else {
+        this.torrents = torrentsCopy.sort((a, b) => parseInt(b.seed) - parseInt(a.seed));
+      }
+    },
+    sortSize() {
+      const torrentsCopy = [...this.torrents]
+      if (this.direction) {
+        this.torrents = torrentsCopy.sort((a, b) => parseInt(sortableSize(a.size)) - parseInt(sortableSize(b.size)));
+      } else {
+        this.torrents = torrentsCopy.sort((a, b) => parseInt(sortableSize(b.size)) - parseInt(sortableSize(a.size)));
+      }
+    },
+    findRelaseTypes() {
+      this.torrents.forEach(item => this.release_types.push(...item.release_type))
+      this.release_types = [...new Set(this.release_types)]
+    },
+    applyFilter(item, index) {
+      this.selectedRelaseType = item;
+      const torrents = [...this.torrentResponse]
+
+      if (item === 'all') {
+        this.torrents = torrents
+        this.sortTable(this.prevCol, true)
+        return
+      }
+
+      this.torrents = torrents.filter(torrent => torrent.release_type.includes(item))
+      this.sortTable(this.prevCol, true)
+    },
+    updateResultCountInStore() {
+      store.dispatch('torrentModule/setResults', this.torrents)
+      store.dispatch('torrentModule/setResultCount', this.torrentResponse.length)
+    },
+    fetchTorrents(query=undefined){
+      this.listLoaded = false;
+      this.editSearchQuery = false;
+
+      searchTorrents(query || this.query, 'all', this.currentPage, storage.token)
+        .then(data => {
+            this.torrentResponse = [...data.results];
+            this.torrents = data.results;
+            this.listLoaded = true;
+        })
+        .then(this.updateResultCountInStore)
+        .then(this.findRelaseTypes)
+        .catch(e => {
+          const error = e.toString()
+          this.errorMessage = error.indexOf('401') != -1 ? 'Permission denied' : 'Nothing found';
+          this.listLoaded = true;
+        });
+    },
+  }
 }
 </script>

-<style src="../scss/vue-data-tablee.css"></style>
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+.expanded {
+  display: flex;
+  margin: 0 1rem;
+  max-width: 100%;
+  border-left: 1px solid $text-color;
+  border-right: 1px solid $text-color;
+  border-bottom: 1px solid $text-color;
+
+  td {
+    // border-left: 1px solid $c-dark;
+    word-break: break-all;
+    padding: 0.5rem 0.15rem;
+    width: 100%;
+  }
+}
+</style>
 <style lang="scss" scoped>
@import "./src/scss/variables";
@import "./src/scss/media-queries";
-.magnet{
-  text-align: center;
+@import "./src/scss/elements";
+
+.container {
+  background-color: $background-color;
 }
-.add{
-  padding: 3px 15px 3px 15px;
-  &:hover, &:active{
-    background: $c-dark;
-    color: $c-white;
+
+.torrentHeader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 20px;
+
+
+  &-text {
+    font-weight: 400;
+    text-transform: uppercase;
+    font-size: 14px;
+    color: $green;
+    text-align: center;
+    margin: 0;
+
+    @include tablet-min {
+      font-size: 16px
+    }
+
+    &.editable {
+      cursor: pointer;
+    }
+  }
+
+  &-editIcon {
+    margin-left: 10px;
+    margin-top: -3px;
+    width: 22px;
+    height: 22px;
+
+    &:hover {
+      fill: $green;
+      cursor: pointer;
+    }
  }
 }
-.torrentloader{
-  animation: load 1s linear infinite;
-  border: 2px solid $c-dark;
-  border-radius: 50%;
-  display: block;
-  height: 30px;
-  left: 50%;
-  margin: 0 auto;
-  width: 30px;
-  &:after {
-    border: 5px solid $c-green;
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+  table-layout: fixed;
+}
+
+.table__content, .table__header {
+  display: flex;
+  padding: 0;
+  margin: 0 1rem;
+  border-left: 1px solid $text-color;
+  border-right: 1px solid $text-color;
+  border-bottom: 1px solid $text-color;
+
+  th, td {
+    display: flex;
+    flex-direction: column;
+    flex-basis: 100%;
+
+    padding: 0.4rem;
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    min-width: 75px;
+  }
+
+  th:first-child, td:first-child {
+    flex: 1;
+  }
+
+  th:not(:first-child), td:not(:first-child) {
+    flex: 0.2;
+  }
+
+  th:nth-child(2), td:nth-child(2) {
+    flex: 0.1;
+  }
+
+  @include mobile-only {
+    th:first-child, td:first-child {
+      display: none;
+
+      &.show {
+        display: block;
+        align: flex-end;
+      }
+    }
+
+    th:not(:first-child), td:not(:first-child) {
+      flex: 1;
+    }
+  }
+
+}
+
+.table__content {
+  td:not(:last-child) {
+    border-right: 1px solid $text-color;
+  }
+}
+
+.table__content:last-child {
+  margin-bottom: 1rem;
+
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+.table__header {
+  color: $text-color;
+  text-transform: uppercase;
+  cursor: pointer;
+  background-color: $background-color-secondary;
+
+  border-top: 1px solid $text-color;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+
+  th {
+    display: flex;
+    flex-direction: row;
+    font-weight: 400;
+    letter-spacing: 0.7px;
+    // font-size: 1.08rem;
+    font-size: 15px;
+
+    &::before {
+      content: '';
+      min-width: 0.2rem;
+    }
+
+    span:first-child {
+      margin-right: 0.6rem;
+    }
+    span:nth-child(2) {
+      margin-right: 0.1rem;
+    }
+  }
+
+  th:not(:last-child) {
+    border-right: 1px solid $text-color;
+  }
+
+}
+
+
+
+.editQuery {
+  display: flex;
+  width: 70%;
+  justify-content: center;
+
+  @include mobile-only {
+    width: 90%;
+  }
+}
+
+
+.download {
+
+  &__icon {
+    fill: $text-color-70;
+    height: 1.2rem;
+
+    &:hover {
+      fill: $text-color;
+      cursor: pointer;
+    }
+  }
+
+  &.active &__icon {
+    fill: $green;
+  }
+}
+
+.torrentloader {
+  width: 100%;
+  padding: 2rem 0;
+
+  i {
+    animation: load 1s linear infinite;
+    border: 2px solid $text-color;
    border-radius: 50%;
-    content: '';
-    left: 10px;
-    position: absolute;
-    top: 16px;
+    display: block;
+    height: 30px;
+    left: 50%;
+    margin: 0 auto;
+    width: 30px;
+
+    &:after {
+      border: 5px solid $green;
+      border-radius: 50%;
+      content: '';
+      left: 10px;
+      position: absolute;
+      top: 16px;
+    }
  }
 }
@keyframes load {
--- a/src/components/demo.vue
+++ b/src/components/demo.vue
@@ -1,221 +0,0 @@
-<template>
-<modal name="demo-login" transition="pop-out" :width="modalWidth" :height="400">
-  <div class="box">
-      <div class="partition" id="partition-register">
-        <div class="partition-title">CREATE ACCOUNT</div>
-        <div class="partition-form">
-          <form autocomplete="false">
-
-            <div class="autocomplete-fix">
-              <input type="password">
-            </div>
-
-            <input id="n-username" type="text" placeholder="Username">
-            <input id="n-password1" type="password" placeholder="Password">
-            <input id="n-password2" type="password" placeholder="Retype password">
-          </form>
-
-          <div style="margin-top: 42px">
-          </div>
-
-          <div class="button-set">
-            <button id="goto-signin-btn">Sign In</button>
-            <button id="register-btn">Register</button>
-          </div>
-
-          <button class="large-btn github-btn">connect with <span>github</span></button>
-          <button class="large-btn facebook-btn">connect with <span>facebook</span></button>
-        </div>
-      </div>
-  </div>
-</modal>
-</template>
-<script>
-const MODAL_WIDTH = 370
-
-export default {
-  name: 'DemoLoginModal',
-  data () {
-    return {
-      modalWidth: MODAL_WIDTH
-    }
-  },
-  created () {
-    this.modalWidth = window.innerWidth < MODAL_WIDTH
-      ? MODAL_WIDTH / 2
-      : MODAL_WIDTH
-  }
-}
-</script>
-<style lang="scss">
-$background_color: #404142;
-$github_color: #DBA226;
-$facebook_color: #3880FF;
-
-.box {
-  background: white;
-  overflow: hidden;
-  width: 100%;
-  height: 400px;
-  border-radius: 2px;
-  box-sizing: border-box;
-  box-shadow: 0 0 40px black;
-  color: #8b8c8d;
-  font-size: 0;
-
-  .box-part {
-    display: inline-block;
-    position: relative;
-    vertical-align: top;
-    box-sizing: border-box;
-    height: 100%;
-
-    &#bp-right {
-      background: url("/static/panorama.jpg") no-repeat top left;
-      border-left: 1px solid #eee;
-    }
-  }
-
-  .box-messages {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-  }
-
-  .box-error-message {
-    position: relative;
-    overflow: hidden;
-    box-sizing: border-box;
-
-    height: 0;
-    line-height: 32px;
-    padding: 0 12px;
-    text-align: center;
-    width: 100%;
-    font-size: 11px;
-    color: white;
-    background: #F38181;
-  }
-
-  .partition {
-    width: 100%;
-    height: 100%;
-
-    .partition-title {
-      box-sizing: border-box;
-      padding: 30px;
-      width: 100%;
-      text-align: center;
-      letter-spacing: 1px;
-      font-size: 20px;
-      font-weight: 300;
-    }
-
-    .partition-form {
-      padding: 0 20px;
-      box-sizing: border-box;
-    }
-  }
-
-  input[type=password],
-  input[type=text] {
-    display: block;
-    box-sizing: border-box;
-    margin-bottom: 4px;
-    width: 100%;
-    font-size: 12px;
-    line-height: 2;
-    border: 0;
-    border-bottom: 1px solid #DDDEDF;
-    padding: 4px 8px;
-    font-family: inherit;
-    transition: 0.5s all;
-    outline: none;
-  }
-
-  button {
-    background: white;
-    border-radius: 4px;
-    box-sizing: border-box;
-    padding: 10px;
-    letter-spacing: 1px;
-    font-family: "Open Sans", sans-serif;
-    font-weight: 400;
-    min-width: 140px;
-    margin-top: 8px;
-    color: #8b8c8d;
-    cursor: pointer;
-    border: 1px solid #DDDEDF;
-    text-transform: uppercase;
-    transition: 0.1s all;
-    font-size: 10px;
-    outline: none;
-    &:hover {
-      border-color: mix(#DDDEDF, black, 90%);
-      color: mix(#8b8c8d, black, 80%);
-    }
-  }
-
-  .large-btn {
-    width: 100%;
-    background: white;
-
-    span {
-      font-weight: 600;
-    }
-    &:hover {
-      color: white !important;
-    }
-  }
-
-  .button-set {
-    margin-bottom: 8px;
-  }
-
-  #register-btn,
-  #signin-btn {
-    margin-left: 8px;
-  }
-
-  .facebook-btn {
-    border-color: $facebook_color;
-    color: $facebook_color;
-    &:hover {
-      border-color: $facebook_color;
-      background: $facebook_color;
-    }
-  }
-
-  .github-btn {
-    border-color: $github_color;
-    color: $github_color;
-    &:hover {
-      border-color: $github_color;
-      background: $github_color;
-    }
-  }
-
-  .autocomplete-fix {
-    position: absolute;
-    visibility: hidden;
-    overflow: hidden;
-    opacity: 0;
-    width: 0;
-    height: 0;
-    left: 0;
-    top: 0;
-  }
-}
-
-.pop-out-enter-active,
-.pop-out-leave-active {
-  transition: all 0.5s;
-}
-
-.pop-out-enter,
-.pop-out-leave-active {
-  opacity: 0;
-  transform: translateY(24px);
-}
-</style>
--- a/src/components/ui/Loader.vue
+++ b/src/components/ui/Loader.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="loader">
+    <i class="loader--icon">
+      <i class="loader--icon-spinner" />
+    </i>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+
+.loader {
+  display: flex;
+  width: 100%;
+  height: 30vh;
+  justify-content: center;
+  align-items: center;
+
+  &--icon{
+    border: 2px solid $text-color-70;
+    border-radius: 50%;
+    display: block;
+    height: 40px;
+    position: absolute;
+    width: 40px;
+
+    &-spinner {
+      display: block;
+      animation: load 1s linear infinite;
+      height: 35px;
+      width: 35px;
+      &:after {
+        border: 7px solid $green-90;
+        border-radius: 50%;
+        content: '';
+        left: 8px;
+        position: absolute;
+        top: 22px;
+      }
+    }
+  }
+  @keyframes load {
+    100% { transform: rotate(360deg); }
+  }
+}
+</style>
--- a/src/components/ui/LoadingPlaceholder.vue
+++ b/src/components/ui/LoadingPlaceholder.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="text-input__loading">
+      <div class="text-input__loading--line" :class="lineClass" v-for="_ in Array(count)"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    count: {
+      type: Number,
+      require: true
+    },
+    lineClass: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/loading-placeholder";
+
+</style>
--- a/src/components/ui/SeasonedButton.vue
+++ b/src/components/ui/SeasonedButton.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="seasoned-button">
+    <button type="button" class="button" @click="emit('click')" :class="{ active: active }"><slot></slot></button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'seasonedButton',
+  props: {
+    active: Boolean
+  },
+  methods: {
+    emit() {
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+@import "./src/scss/media-queries";
+
+.button{
+  display: inline-block;
+  border: 1px solid $text-color;
+  text-transform: uppercase;
+  font-weight: 300;
+  font-size: 11px;
+  line-height: 2;
+  height: 45px;
+  letter-spacing: 0.5px;
+  padding: 5px 20px 4px 20px;
+  margin: 0;
+  margin-right: 0.3rem;
+  cursor: pointer;
+  color: $text-color;
+  background: $background-color-secondary;
+  outline: none;
+  transition: background 0.5s ease, color 0.5s ease, border-color .5s ease;
+
+  @include tablet-min{
+    font-size: 12px;
+    padding: 6px 20px 5px 20px;
+  }
+
+  body:not(.touch) &:hover, &:focus, &:active, &.active {
+    background: $text-color;
+    color: $background-color;
+  }
+}
+</style>
--- a/src/components/ui/SeasonedInput.vue
+++ b/src/components/ui/SeasonedInput.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="group" :class="{ completed: value }">
+    <svg class="group__input-icon"><use v-bind="{'xlink:href':'#icon' + icon}"></use></svg>
+    <input class="group__input" :type="tempType || type" @input="handleInput" v-model="inputValue"
+          :placeholder="placeholder" @keyup.enter="submit" />
+    
+    <i v-if="value && type === 'password'" @click="toggleShowPassword" class="group__input-show noselect">show</i>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    placeholder: { type: String },
+    icon: { type: String },
+    type: { type: String, default: 'text' },
+    value: { type: String, default: undefined }
+  },
+  data() {
+    return {
+      inputValue: this.value || undefined,
+      tempType: undefined
+    }
+  },
+  methods: {
+    submit(event) {
+      this.$emit('enter')
+    },
+    handleInput(event) {
+      if (this.value !== undefined) {
+        this.$emit('update:value', this.inputValue)
+      } else {
+        this.$emit('change', this.inputValue, event)
+      }
+    },
+    toggleShowPassword() {
+      if (this.tempType === 'text') {
+        this.tempType = 'password'
+      } else {
+        this.tempType = 'text'
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+@import "./src/scss/media-queries";
+
+.group{
+  display: flex;
+  margin-bottom: 1rem;
+  width: 100%;
+
+  &:hover, &:focus {
+    .group__input {
+      border-color: $text-color;
+
+      &-icon {
+        fill: $text-color;
+      }      
+    }
+  }
+
+  &.completed {
+    .group__input {
+      border-color: $text-color;
+
+      &-icon {
+        fill: $text-color;
+      }      
+    }
+  }
+
+  &__input {
+    width: 100%;
+    max-width: 35rem;
+    padding: 10px 10px 10px 45px;
+    outline: none;
+    background-color: $background-color-secondary;
+    color: $text-color;
+    font-weight: 100;
+    font-size: 1.2rem;
+    border: 1px solid $text-color-50;
+    margin: 0;
+    margin-left: -2.2rem !important;
+    z-index: 3;
+    transition: color .5s ease, background-color .5s ease, border .5s ease;
+
+    border-radius: 0;
+    -webkit-appearance: none;
+
+    &-show {
+      position: relative;
+      left: -50px;
+      z-index: 11;
+      margin: auto 0;
+      height: 100%;
+      font-size: 0.9rem;
+      cursor: pointer;
+      color: $text-color-50;
+    }
+  }
+
+  &__input-icon {
+    width: 24px;
+    height: 24px;
+    fill: $text-color-50;
+    transition: fill 0.5s ease;
+    pointer-events: none;
+    margin-top: 10px;
+    margin-left: 10px;
+    z-index: 8;
+  }
+}
+</style>
--- a/src/components/ui/SeasonedMessages.vue
+++ b/src/components/ui/SeasonedMessages.vue
@@ -0,0 +1,153 @@
+<template>
+  <transition-group name="fade">
+    <div class="message" v-for="(message, index) in reversedMessages" :class="message.type || 'warning'" :key="index">
+      <span class="pinstripe"></span>
+      <div>
+        <h2>{{ message.title || defaultTitles[message.type] }}</h2>
+        <span>{{ message.message }}</span>
+      </div>
+
+      <button class="dismiss" @click="clicked(message)">X</button>
+    </div>
+  </transition-group>
+</template>
+
+<script>
+
+export default {
+  props: {
+    messages: {
+      required: true,
+      type: Array
+    }
+  },
+  data() {
+    return {
+      defaultTitles: {
+        error: 'Unexpected error',
+        warning: 'Something went wrong',
+        undefined: 'Something went wrong'
+      },
+      localMessages: [...this.messages]
+    }
+  },
+  computed: {
+    reversedMessages() {
+      return [...this.messages].reverse()
+    }
+  },
+  methods: {
+    clicked(e) {
+      const removedMessage = [...this.messages].filter(mes => mes !== e)
+      this.$emit('update:messages', removedMessage)
+    }
+  },
+  // watch: {
+  //   messages(propState, oldState) {
+  //     const newMessage = propState.filter(msg => !this.localMessages.includes(msg))
+  //     console.log('newMessage', newMessage)
+  //     this.localMessages = this.localMessages.concat(newMessage)
+  //   }
+  // }
+}
+
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+.fade-enter-active {
+  transition: opacity .4s;
+}
+.fade-leave-active {
+  transition: opacity .1s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
+.message {
+  width: 100%;
+  max-width: 35rem;
+  height: 75px;
+
+  display: flex;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  color: $text-color-70;
+
+  > div {
+    margin: 6px 24px;
+    width: 100%;
+
+  }
+
+  h2 {
+    font-weight: 300;
+    letter-spacing: 0.25px;
+    margin: 0;
+    font-size: 1.3rem;
+    color: $text-color;
+    transition: color .5s ease;
+  }
+  span {
+    font-weight: 300;
+    color: $text-color-70;
+    transition: color .5s ease;
+  }
+
+  .pinstripe {
+    height: 100%;
+    width: 0.5rem;
+    // background-color: $color-error-highlight;
+  }
+
+  .dismiss {
+    position: relative;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-color: transparent;
+    border: unset;
+    font-size: 18px;
+    cursor: pointer;
+
+    top: 0;
+    float: right;
+    height: 1.5rem;
+    width: 1.5rem;
+    padding: 0;
+    margin-top: 0.5rem;
+    margin-right: 0.5rem;
+    color: $text-color-70;
+    transition: color .5s ease;
+
+    &:hover {
+      color: $text-color;
+    }
+  }
+
+  &.success {
+    background-color: $color-success;
+
+    .pinstripe {
+      background-color: $color-success-highlight;
+    }
+  }
+  
+  &.error {
+    background-color: $color-error;
+
+    .pinstripe {
+      background-color: $color-error-highlight;
+    }
+  }
+
+  &.warning {
+    background-color: $color-warning;
+    
+    .pinstripe {
+      background-color: $color-warning-highlight;
+    }
+  }
+}
+
+</style>
--- a/src/components/ui/SvgIcon.vue
+++ b/src/components/ui/SvgIcon.vue
@@ -0,0 +1,9 @@
+<template>
+  <div v-html="require(`@/assets/icons/${ icon }.svg`)"></div>
+</template>
+
+<script>
+  export default {
+    props: ['icon']
+  }
+</script>
--- a/src/components/ui/darkmodeToggle.vue
+++ b/src/components/ui/darkmodeToggle.vue
@@ -0,0 +1,51 @@
+<template>
+
+  <div class="darkToggle">
+    <span @click="toggleDarkmode()">{{ darkmodeToggleIcon }}</span>
+  </div>
+
+</template>
+
+<script>
+export default {
+
+  data() {
+    return {
+      darkmode: window.getComputedStyle(document.body).colorScheme.includes('dark')
+    }
+  },
+  methods: {
+    toggleDarkmode() {
+      this.darkmode = !this.darkmode;
+      document.body.className = this.darkmode ? 'dark' : 'light'
+    }
+  },
+  computed: {
+    darkmodeToggleIcon() {
+      return this.darkmode ? '🌝' : '🌚'
+    }
+  }
+}
+
+</script>
+
+
+<style lang="scss" scoped>
+.darkToggle {
+  height: 25px;
+  width: 25px;
+  cursor: pointer;
+  // background-color: red;
+  position: fixed;
+  margin-bottom: 10px;
+  margin-right: 2px;
+  bottom: 0;
+  right: 0;
+  z-index: 1;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+</style>
--- a/src/components/ui/sidebarListElem.vue
+++ b/src/components/ui/sidebarListElem.vue
@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <a @click="$emit('click')"><li>
+      <figure :class="activeClassIfActive">
+        <svg><use :xlink:href="iconRefNameIfActive"/></svg>
+      </figure>
+
+      <span :class="activeClassIfActive">{{ contentTextToDisplay }}</span>
+
+      <span v-if="supplementaryText" class="supplementary-text">
+        {{ supplementaryText }}
+      </span>
+    </li></a>
+  </div>
+</template>
+
+<script>
+  // TODO if a image is hovered and we can't set the hover color we want to
+  // go into it and change the fill
+export default {
+  props: {
+    iconRef: {
+      type: String,
+      required: true
+    },
+    iconRefActive: {
+      type: String,
+      required: false
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    textActive: {
+      type: String,
+      required: false
+    },
+    supplementaryText: {
+      type: String,
+      required: false
+    }
+  },
+  computed: {
+    iconRefNameIfActive() {
+      const { iconRefActive, iconRef, active } = this
+
+      if ((iconRefActive && iconRef) & active) {
+        return iconRefActive
+      }
+      return iconRef
+    },
+    contentTextToDisplay() {
+      const { textActive, active, $slots } = this
+
+      if (textActive && active)
+        return textActive
+
+      if ($slots.default && $slots.default.length > 0)
+        return $slots.default[0].text
+
+      return ''
+    },
+    activeClassIfActive() {
+      return this.active ? 'active' : ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+@import "./src/scss/media-queries";
+
+li {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: $text-color-50;
+  transition: color 0.5s ease;
+  font-size: 11px;
+  padding: 10px 0;
+  border-bottom: 1px solid $text-color-5;
+
+  &:hover {
+    color: $text-color-70;
+    cursor: pointer;
+  }
+  .active {
+    color: $text-color;
+  }
+  .pending {
+    color: #f8bd2d;
+  }
+
+  .supplementary-text {
+    flex-grow: 1;
+    text-align: right;
+  }
+
+  figure, figure > svg {
+    width: 18px;
+    height: 18px;
+    margin: 0 7px 0 0;
+    fill: $text-color-50;
+    transition: fill 0.5s ease, transform 0.5s ease;
+    &.waiting {
+      transform: scale(0.8, 0.8);
+    }
+    &.pending {
+      fill: #f8bd2d;
+    }
+    &:hover &-icon {
+      fill: $text-color-70;
+      cursor: pointer;
+    }
+    &.active > svg {
+      fill: $green;
+    }
+  }
+}
+</style>
--- a/src/config.json.example
+++ b/src/config.json.example
@@ -0,0 +1,5 @@
+{
+    "SEASONED_URL": "http://localhost:31459/api/",
+    "ELASTIC_URL": "http://localhost:9200",
+    "ELASTIC_INDEX": "shows,movies"
+}
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,9 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import axios from 'axios'
 import router from './routes'
+import store from './store'

+import Toast from './plugins/Toast'
 import DataTablee from 'vue-data-tablee'
 import VModal from 'vue-js-modal'

@@ -10,12 +12,17 @@ import App from './App.vue'

 window.eventHub = new Vue();

-Vue.use(VueRouter, axios)
+Vue.use(VueRouter)
+Vue.use(Toast)
 Vue.use(DataTablee)
 Vue.use(VModal, { dialog: true })

+store.dispatch('darkmodeModule/findAndSetDarkmodeSupported')
+
 new Vue({
  el: '#app',
  router,
-  render: h => h(App)
+  store,
+  components: { App },
+  template: '<App />'
 })
--- a/src/modules/darkmodeModule.js
+++ b/src/modules/darkmodeModule.js
@@ -0,0 +1,23 @@
+export default {
+  namespaced: true,
+  state: {
+    darkmodeSupported: undefined,
+    userChoice: undefined
+  },
+  getters: {
+    darkmodeSupported: (state) => {
+      return state.darkmodeSupported
+    }
+  },
+  mutations: {
+    SET_DARKMODE_SUPPORT: (state, browserSupported) => {
+      state.darkmodeSupported = browserSupported
+    }
+  },
+  actions: {
+    findAndSetDarkmodeSupported({ commit }) {
+      const browserSupported = window.matchMedia('(prefers-color-scheme)').media !== 'not all'
+      commit('SET_DARKMODE_SUPPORT', browserSupported)
+    }
+  }
+}
--- a/src/modules/documentTitle.js
+++ b/src/modules/documentTitle.js
@@ -0,0 +1,41 @@
+const capitalize = (string) => {
+  return string.includes(' ') ? 
+    string.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).replace('_', ' ')).join(' ')
+    : string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+const setDocumentTitle = (state) => {
+  document.title = `${state.emoji} ${state.titlePrefix} | ${capitalize(state.title)}`
+}
+
+export default {
+  namespaced: true,
+  state: {
+    emoji: '🍕',
+    titlePrefix: 'request',
+    title: undefined
+  },
+  getters: {
+    title: (state) => {
+      return state.title
+    }
+  },
+  mutations: {
+    SET_EMOJI: (state, emoji) => {
+      state.emoji = emoji
+      setDocumentTitle(state)
+    },
+    SET_TITLE: (state, title) => {
+      state.title = title
+      setDocumentTitle(state)
+    }
+  },
+  actions: {
+    updateEmoji({ commit }, emoji) {
+      commit('SET_EMOJI', emoji)
+    },
+    updateTitle({ commit }, title) {
+      commit('SET_TITLE', title)
+    }
+  }
+}
--- a/src/modules/torrentModule.js
+++ b/src/modules/torrentModule.js
@@ -0,0 +1,40 @@
+
+export default {
+  namespaced: true,
+  state: {
+    results: [],
+    resultCount: null
+  },
+  getters: {
+    results: (state) => {
+      return state.results
+    },
+    resultCount: (state) => {
+      return state.resultCount
+    }
+  },
+
+  mutations: {
+    SET_RESULTS: (state, results) => {
+      state.results = results;
+    },
+    SET_RESULT_COUNT: (state, count) => {
+      state.resultCount = count;
+    },
+    RESET: (state) => {
+      state.results = []
+      state.resultCount = null
+    }
+  },
+  actions: {
+    setResults({ commit }, results) {
+      commit('SET_RESULTS', results)
+    },
+    setResultCount({ commit }, count) {
+      commit('SET_RESULT_COUNT', count)
+    },
+    reset({ commit }) {
+      commit('RESET')
+    }
+  }
+}
--- a/src/plugins/Toast/ToastComponent.vue
+++ b/src/plugins/Toast/ToastComponent.vue
@@ -0,0 +1,189 @@
+<template>
+  <transition name="slide">
+      <div
+          v-if="show"
+          @click="clicked"
+          class="toast"
+          :class="type">
+
+          <div class="toast--content">
+              <div class=" toast--icon">
+                  <i v-if="image"><img class="toast--icon-image" :src="image" /></i>
+              </div>
+              <div class="toast--text" v-if="description">
+                <span class="toast--text__title">{{title}}</span>
+                <br /><span class="toast--text__description" v-html="description"></span>
+              </div>
+              <div class="toast--text" v-else>
+                <span class="toast--text__title-large">{{title}}</span>
+              </div>
+              <div class="toast--dismiss" @click="dismiss">
+                  <i class="fas fa-times"></i>
+              </div>
+          </div>
+      </div>
+  </transition>
+
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      type: this.$root.type || 'info',
+      title: this.$root.title || undefined,
+      description: this.$root.description || undefined,
+      image: this.$root.image || undefined,
+      link: this.$root.link || undefined,
+      timeout: this.$root.timeout || 2000,
+      show: false
+    }
+  },
+  mounted() {
+    // Here we set show when mounted in-order to get the transition animation to be displayed correctly
+    this.show = true;
+
+    setTimeout(() => {
+      console.log('Your time is up 👋')
+      this.show = false;
+    }, this.timeout);
+  },
+  methods: {
+    clicked() {      
+      if (this.link) {
+        let resolved = this.$root.router.resolve(this.link);
+        
+        if (resolved && resolved.route.name !== '404') {
+          this.$root.router.push(this.link);
+        } else {
+          console.error('Found a link but it resolved to 404. Link:', this.link)
+        }
+      } else {
+        this.show = false;
+      }
+    },
+    dismiss() {
+      this.show = false;
+    },
+    move(e) {
+      console.log('moving', e)
+      let target = e.target;
+
+      console.log('target', target)
+
+      var div = document.getElementById('target');
+      div.style.position = 'absolute';
+      div.style.top = e.clientY + 'px';
+      div.style.left = e.clientX + 'px';
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+// @import '@/scss/variables.scss';
+
+
+.slide-enter-active {
+  transition: all 0.3s ease;
+}
+.slide-enter, .slide-leave-to {
+  transform: translateY(100vh);
+  opacity: 0;
+}
+.slide-leave-active {
+  transition: all 2s ease;
+}
+
+.toast--icon-image {
+  height: 100%;
+  width: 100%;
+  max-height: 45px;
+  max-width: 45px;
+}
+
+.toast {
+  position: fixed;
+  bottom: 0.5rem;
+  cursor: pointer;
+  z-index: 100;
+
+  background-color: white;
+  border-radius: 3px;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.17), 0 2px 4px 0 rgba(0,0,0,0.08);
+  padding: 0.5rem;
+  margin: 1rem 2rem 1rem 0.71rem;
+  // max-width: calc(100% - 3rem);
+  min-width: 320px;
+
+
+  // If small screen we have a min-width that is related to the screen size.
+  // else large screens we want a max-width that only uses the space in bottom right
+
+  right: 0;
+  line-height: 22.5px;
+  
+  &--content {
+    display: flex;
+    align-items: center;
+
+  }
+
+  &--icon {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+
+  &--text {
+    margin-left: 0.5rem;
+    // color: $bt-brown;
+    color: black;
+    word-wrap: break-word;
+
+    &__title {
+      text-transform: capitalize;
+      font-weight: 400;
+
+      &-large {
+        font-size: 2rem;
+      }
+    }
+
+    &__description {
+      font-weight: 300;
+    }
+  }
+
+  &--dismiss {
+    align-self: flex-end;
+
+    img {
+      width: 2.5rem;
+    }
+  }
+
+
+  &.success {
+    border-left: 6px solid #38c172;
+  }
+
+  &.info {
+    border-left: 6px solid #FFD300;
+  }
+
+  &.warning {
+    border-left: 6px solid #f6993f;
+  }
+
+  &.error {
+    border-left: 6px solid #e3342f;
+  }
+
+  &.simple {
+    border-left: unset;
+  }
+
+} 
+</style>
--- a/src/plugins/Toast/index.js
+++ b/src/plugins/Toast/index.js
@@ -0,0 +1,57 @@
+import Vue from 'vue'
+import ToastComponent from './ToastComponent.vue'
+
+const optionsDefaults = {
+  data: {
+    type: 'info',
+    show: true,
+    timeout: 3000,
+
+    onCreate(created = null) {
+    },
+    onEdit(editted = null) {
+    },
+    onRemove(removed = null) {
+    }
+  }
+}
+
+function toast(options, router) {
+  // merge the default options with the passed options.
+  const root = new Vue({
+    data: {
+      ...optionsDefaults.data,
+      ...options,
+      router
+    },
+    render: createElement => createElement(ToastComponent)
+  })
+
+  root.$mount(document.body.appendChild(document.createElement('div')))
+}
+
+
+export default {
+  install(vue, opts) {
+    console.log('installing toast plugin!')
+    console.log('plugin options', opts)
+
+    Vue.prototype.$notifications = {
+        info(options) {
+          toast({ type: 'info', ...options })
+        },
+        success(options) {
+          toast({ type: 'success', ...options })
+        },
+        warning(options) {
+          toast({ type: 'warning', ...options })
+        },
+        error(options) {
+          toast({ type: 'error', ...options })
+        },
+        simple(options) {
+          toast({ type: 'simple', ...options})
+        }
+    }
+  }
+}
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,103 +1,64 @@
+import Vue from 'vue'
 import VueRouter from 'vue-router';
+import store from '@/store'
+
+Vue.use(VueRouter)
+

 let routes = [
  {
    name: 'home',
    path: '/',
-    components: {
-      'list-router-view': require('./components/Home.vue')
-    }
+    component: (resolve) => require(['./components/Home.vue'], resolve)
  },
  {
-    name: 'home-category',
-    path: '/list/:category',
-    components: {
-      'list-router-view': require('./components/MoviesList.vue')
-    }
+    name: 'profile',
+    path: '/profile',
+    component: (resolve) => require(['./components/Profile.vue'], resolve)
+  },
+  {
+    name: 'list',
+    path: '/list/:name',
+    component: (resolve) => require(['./components/ListPage.vue'], resolve)
  },
  {
    name: 'request',
    path: '/request/all',
    components: {
-      'request-router-view': require('./components/MoviesList.vue')
+      'request-router-view': require('./components/ListPage.vue')
    }
  },
  {
    name: 'search',
-    path: '/search/:query',
-    components: {
-      'search-router-view': require('./components/MoviesList.vue')
-    }
-  },
-  {
-    name: 'user-requests',
-    path: '/profile/requests',
-    components: {
-      'user-requests-router-view': require('./components/MoviesList.vue')
-    }
-  },
-  {
-    name: 'movie',
-    path: '/movie/:id',
-    components: {
-      'page-router-view': require('./components/MoviePage.vue')
-    },
-    beforeEnter: (to, from, next) => {
-      if(history.state && history.state.popup && from.name){
-        eventHub.$emit('openMoviePopup', to.params.id, 'movie', false);
-        return;
-      }
-      next();
-    }
-  },
-  {
-    name: 'show',
-    path: '/show/:id',
-    components: {
-      'page-router-view': require('./components/MoviePage.vue')
-    },
-    beforeEnter: (to, from, next) => {
-      if(history.state && history.state.popup && from.name){
-        eventHub.$emit('openMoviePopup', to.params.id, 'show', false);
-        return;
-      }
-      next();
-    }
+    path: '/search',
+    component: (resolve) => require(['./components/Search.vue'], resolve)
  },
  {
    name: 'register',
    path: '/register',
-    components: {
-      'search-router-view': require('./components/Register.vue')
-    }
+    component: (resolve) => require(['./components/Register.vue'], resolve)
+  },
+  {
+    name: 'settings',
+    path: '/settings',
+    component: (resolve) => require(['./components/Settings.vue'], resolve)
  },
  {
    name: 'signin',
    path: '/signin',
-    components: {
-      'search-router-view': require('./components/Signin.vue')
-    }
-  },
-  {
-    name: 'profile',
-    path: '/profile',
-    components: {
-      'search-router-view': require('./components/Profile.vue')
-    }
-  },
-  {
-    name: 'settings',
-    path: '/profile/settings',
-    components: {
-      'search-router-view': require('./components/Settings.vue')
-    }
+    component: (resolve) => require(['./components/Signin.vue'], resolve)
  },
+  // {
+  //   name: 'user-requests',
+  //   path: '/profile/requests',
+  //   components: {
+  //     'user-requests-router-view': require('./components/MoviesList.vue')
+  //   }
+  // },
  {
    name: '404',
    path: '/404',
-    components: {
-      'page-router-view': require('./components/404.vue')
-    }
+    component: (resolve) => require(['./components/404.vue'], resolve)
  },
  {
    path: '*',
@@ -110,13 +71,15 @@ let routes = [
 ];

 const router =  new VueRouter({
-  // mode: 'history',
+  mode: 'hash',
  base: '/',
  routes,
  linkActiveClass: 'is-active'
 });

 router.beforeEach((to, from, next) => {
+  store.dispatch('documentTitle/updateTitle', to.name)
+
  // Toggle mobile nav
  if(document.querySelector('.nav__hamburger--active')){
    document.querySelector('.nav__hamburger').classList.remove('nav__hamburger--active');
--- a/src/scss/elements.scss
+++ b/src/scss/elements.scss
@@ -0,0 +1,42 @@
+@import "./src/scss/variables";
+@import "./src/scss/media-queries";
+
+.filter {
+  margin: 1rem;
+  padding: 0;
+  overflow: auto;
+  list-style: none;
+  border: 1px solid;
+  border-radius: 2px;
+  display: flex;
+  transition: color .2s ease;
+
+  &-item {
+    padding: 6px 15px;
+    background-color: $background-color-secondary;
+    transition: color 0.2s ease;
+    font-size: 13px;
+    font-weight: 200;
+    text-transform: capitalize;
+    text-align: center;
+    width: 100%;
+    white-space:nowrap;
+
+    &:nth-child(n+2) {
+      border-left: solid 1px;
+    }
+    &.active, &:hover {
+      border-color: transparent;
+      background-color: $teal;
+      color: $green;
+      cursor: pointer;
+    }
+
+    @include tablet-min {
+      font-size: 16px;
+    }
+  }
+}
+
+// TODO 
+//  - add buttons
--- a/src/scss/loading-placeholder.scss
+++ b/src/scss/loading-placeholder.scss
@@ -0,0 +1,55 @@
+@import "./src/scss/variables";
+
+// Loading placeholder styling
+@mixin nth-children($points...) {
+  @each $point in $points {
+    &:nth-child(#{$point}) {
+      @content;
+    }
+  }
+}
+
+.text-input__loading {
+  width: 100%;
+
+   &--line {
+    height: 10px;
+    margin: 10px;
+    animation: pulse 1s infinite ease-in-out;
+
+    &.short {
+      width: 60px !important;
+    }
+
+    &.nomargin {
+      margin: 0;
+    }
+  }
+
+  div {
+    @include nth-children(1, 5, 9) {
+      width: 150px;
+    }
+    @include nth-children(2, 6, 10) {
+      width: 250px;
+    }
+    @include nth-children(3, 7) {
+      width: 120px;
+    }
+    @include nth-children(4, 8) {
+      width: 100px;
+    }
+  }
+
+  @keyframes pulse {
+    0% {
+      background-color: rgba(165, 165, 165, 0.1);
+    }
+    50% {
+      background-color: rgba(165, 165, 165, 0.3);
+    }
+    100% {
+      background-color: rgba(165, 165, 165, 0.1);
+    }
+  }
+}
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -0,0 +1,24 @@
+
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none;   /* Safari */
+  -khtml-user-select: none;    /* Konqueror HTML */
+  -moz-user-select: none;      /* Firefox */
+  -ms-user-select: none;       /* Internet Explorer/Edge */
+  user-select: none;           /* Non-prefixed version, currently */
+}
+
+.end-section {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin: 1rem 0;
+}
+
+.button--group {
+  display: flex;
+
+  > div:not(:first-child) {
+    margin-left: 1rem;
+  }
+}
--- a/src/scss/media-queries.scss
+++ b/src/scss/media-queries.scss
@@ -4,6 +4,7 @@ $phone-xs-width: 480px;
 $tablet-p-width: 768px;
 $tablet-l-width: 1024px;
 $desktop-width:  1200px;
+$desktop-l-width: 1600px;

 // Media
@mixin mobile-only{
@@ -41,6 +42,11 @@ $desktop-width:  1200px;
 		@content;
 	}
 }
+@mixin desktop-lg-min{
+	@media (min-width: #{$desktop-l-width}){
+		@content;
+	}
+}
@mixin retina{
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
    @content;
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -1,9 +1,123 @@
 // Colors
-$c-green: #01d277;
-$c-dark: #081c24;
-$c-white: #ffffff;
-$c-light: #f8f8f8;
-$c-green-light: #dff0d9;
-$c-green-dark: #3e7549;
-$c-red-light: #f2dede;
-$c-red-dark: #b75b91;
+// @import "./media-queries";
+@import "./src/scss/media-queries";
+
+:root {
+  color-scheme: light;
+  --text-color: #081c24;
+  --text-color-70: rgba(8, 28, 36, 0.7);
+  --text-color-50: rgba(8, 28, 36, 0.5);
+  --text-color-5: rgba(8, 28, 36, 0.05);
+  --text-color-secondary: orange;
+  --background-color: #f8f8f8;
+  --background-color-secondary: #ffffff;
+  --background-95: rgba(255, 255, 255, 0.95);
+  --background-70: rgba(255, 255, 255, 0.7);
+  --background-40: rgba(255, 255, 255, 0.4);
+  --background-nav-logo: #081c24;
+  
+  --color-green: #01d277;
+  --color-green-90: rgba(1, 210, 119, .9);
+  --color-teal: #091c24;
+  --color-black: #081c24;
+  --white: #fff;
+  --white-70: rgba(255,255,255,0.7);
+
+  --color-warning: rgba(241, 188, 53, 0.7);
+  --color-warning-highlight: #f1bc35;
+  --color-success: rgba(0, 100, 66, 0.8);
+  --color-success-text: #fff;
+  --color-success-highlight: rgb(0, 100, 66);
+  --color-error: rgba(220, 48, 35, 0.8);
+  --color-error-highlight: #DC3023;
+
+  --header-size: 75px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: light dark;
+    --text-color: #fff;
+    --text-color-70: rgba(255, 255, 255, 0.7);
+    --text-color-50: rgba(255, 255, 255, 0.5);
+    --text-color-5: rgba(255, 255, 255, 0.05);
+    --text-color-secondary: orange;
+    --background-color: #1e1f22;
+    --background-color-secondary: #111111;
+    --background-95: rgba(30, 31, 34, 0.95);
+    --background-70: rgba(30, 31, 34, 0.8);
+    --background-40: rgba(30, 31, 34, 0.4);
+  }
+}
+
+@include mobile-only {
+  :root {
+    --header-size: 50px;
+  }
+}
+
+$header-size: var(--header-size);
+
+$dark: rgb(30, 31, 34);
+$green: var(--color-green);
+$green-90: var(--color-green-90);
+$teal: #091c24;
+$black: #081c24;
+$black-80: rgba(0,0,0,0.8);
+$white: #fff;
+$white-80: rgba(255,255,255,0.8);
+
+$text-color: var(--text-color) !default;
+$text-color-70: var(--text-color-70) !default;
+$text-color-50: var(--text-color-50) !default;
+$text-color-5: var(--text-color-5) !default;
+$text-color-secondary: var(--text-color-secondary) !default;
+$background-color: var(--background-color) !default;
+$background-color-secondary: var(--background-color-secondary) !default;
+$background-95: var(--background-95) !default;
+$background-70: var(--background-70) !default;
+$background-40: var(--background-40) !default;
+$background-dark-85: rgba($dark, 0.85) !default;
+$background-nav-logo: var(--background-nav-logo) !default;
+$color-warning: var(--color-warning) !default;
+$color-warning-highlight: var(--color-warning-highlight) !default;
+$color-success: var(--color-success) !default;
+$color-success-highlight: var(--color-success-highlight) !default;
+$color-error: var(--color-error) !default;
+$color-error-highlight: var(--color-error-highlight) !default;
+
+.halloween {
+  --text-color: #6a318c;
+  --text-color-secondary: #fb5a33;
+  --background-color: #80c350;
+  --background-color-secondary: #ff9234;
+}
+
+.dark {
+  --text-color: #fff;
+  --text-color-70: rgba(255, 255, 255, 0.7);
+  --text-color-50: rgba(255, 255, 255, 0.5);
+  --text-color-5: rgba(255, 255, 255, 0.05);
+  --text-color-secondary: orange;
+  --background-color: #1e1f22;
+  --background-color-secondary: #111111;
+  --background-95: rgba(30, 31, 34, 0.95);
+  --background-70: rgba(30, 31, 34, 0.7);
+  --color-teal: #091c24;
+}
+
+.light {
+  --text-color: #081c24;
+  --text-color-70: rgba(8, 28, 36, 0.7);
+  --text-color-50: rgba(8, 28, 36, 0.5);
+  --text-color-5: rgba(8, 28, 36, 0.05);
+  --text-color-inverted: #fff;
+  --text-color-secondary: orange;
+  --background-color: #f8f8f8;
+  --background-color-secondary: #ffffff;
+  --background-95: rgba(255, 255, 255, 0.95);
+  --background-70: rgba(255, 255, 255, 0.7);
+  --background-nav-logo: #081c24;
+  --color-green: #01d277;
+  --color-teal: #091c24;
+}
--- a/src/storage.js
+++ b/src/storage.js
@@ -4,6 +4,43 @@ let storage = {
  username: localStorage.getItem('username') || null,
  admin: localStorage.getItem('admin') || null,
  pageTitlePostfix: ' — ' + document.title,
+  homepageLists: [
+    {
+      title: 'Requests',
+      route: 'request',
+      // icon: require('@/assets/icons/request.svg'),
+      path: 'v2/request'
+    },
+    {
+      title: 'Now Playing',
+      route: 'now_playing',
+      // icon: require('@/assets/icons/now_playing.svg'),
+      path: 'v2/movie/now_playing'
+    },
+    {
+      title: 'Popular',
+      route: 'popular',
+      // icon: require('@/assets/icons/popular.svg'),
+      path: 'v2/movie/popular'
+    },
+    {
+      title: 'Upcoming',
+      route: 'upcoming',
+      // icon: require('@/assets/icons/upcoming.svg'),
+      path: 'v2/movie/upcoming'
+    },
+  ],
+  user_requestsList: {
+    title: 'user requests',
+    route: 'profile/requests',
+    // icon: require('@/assets/icons/upcoming.svg'),
+    path: 'v1/user/requests'
+  },
+  assets: {
+    icons: {
+      // upcoming: require('@/assets/icons/upcoming.svg')
+    }
+  },
  listTypes: [
    {
      title: 'Your Requests',
--- a/src/store.js
+++ b/src/store.js
@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import torrentModule from './modules/torrentModule'
+import darkmodeModule from './modules/darkmodeModule'
+import documentTitle from './modules/documentTitle'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules: {
+    torrentModule,
+    darkmodeModule,
+    documentTitle
+  }
+})
+
+export default store
--- a/src/utils.js
+++ b/src/utils.js
@@ -0,0 +1,13 @@
+const sortableSize = (string) => {
+	const UNITS = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+	const [numStr, unit] = string.split(' ');
+
+  if (UNITS.indexOf(unit) === -1)
+	  return string
+
+  const exponent = UNITS.indexOf(unit) * 3
+	return numStr * (Math.pow(10, exponent))
+}
+
+
+export { sortableSize }
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -12,17 +12,27 @@ module.exports = {
    rules: [
      {
        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: {
-          loaders: {
-            'scss': 'vue-style-loader!css-loader!sass-loader',
-            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
+        use: [
+          {
+            loader: 'vue-loader',
+            options: {
+              loaders: {
+                'scss': 'vue-style-loader!css-loader!sass-loader',
+                'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
+              }
+            }
+          },
+          {
+            loader: 'vue-svg-inline-loader'
          }
-        }
+        ]
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
+        options: {
+          presets: ['@babel/preset-env']
+        },
        exclude: /node_modules/
      },
      {
@@ -36,8 +46,10 @@ module.exports = {
    ]
  },
  resolve: {
+    extensions: ['.js', '.vue', '.json', 'scss'],
    alias: {
      'vue$': 'vue/dist/vue.common.js',
+      '@': path.resolve(__dirname, './src'),
      'src': path.resolve(__dirname, './src'),
      'assets': path.resolve(__dirname, './src/assets'),
      'components': path.resolve(__dirname, './src/components')
@@ -45,12 +57,13 @@ module.exports = {
  },
  devServer: {
    historyApiFallback: true,
+    inline: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
-  // devtool: '#eval-source-map'
+  devtool: 'inline-source-map'
 }

 if (process.env.NODE_ENV === 'production') {
--- a/yarn.lock
+++ b/yarn.lock