diff --git a/src/components/GameDetail/GameDetails.vue b/src/components/GameDetail/GameDetails.vue
index dd16e8fa..0f2975fe 100644
--- a/src/components/GameDetail/GameDetails.vue
+++ b/src/components/GameDetail/GameDetails.vue
@@ -108,7 +108,7 @@ export default {
     align-items: center;
 
     strong {
-        color: var(--link-color);
+        color: var(--accent-color);
     }
 
     section {
diff --git a/src/components/GameDetail/GameHeader.vue b/src/components/GameDetail/GameHeader.vue
deleted file mode 100644
index a7b29787..00000000
--- a/src/components/GameDetail/GameHeader.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template lang="html">
-    <div class="game-header">
-        <img :src="coverUrl" :alt="game.name" class="game-cover" />
-
-        <div class="game-rating" v-if="game.age_ratings">
-            <img
-                v-for="{ rating, synopsis, id } in game.age_ratings"
-                :key="id"
-                :src='`/static/img/age-ratings/${ageRatings[rating]}.png`'
-                :alt="synopsis"
-            />
-        </div>
-    </div>
-</template>
-
-<script>
-import { mapState, mapGetters } from 'vuex';
-
-export default {
-    props: {
-        gameId: [Number, String],
-    },
-
-    computed: {
-        ...mapState(['game', 'platform']),
-        ...mapGetters(['ageRatings']),
-
-        coverUrl() {
-            return this.game && this.game.cover
-                ? `https://images.igdb.com/igdb/image/upload/t_cover_small_2x/${this.game.cover.image_id}.jpg`
-                : '/static/no-image.jpg';
-        },
-
-        style() {
-            return this.game && this.game.screenshots
-                ? `background: url(${this.getImageUrl(this.game.screenshots[0].cloudinary_id)}) center center no-repeat; background-size: cover;`
-                : '';
-        },
-    },
-
-    methods: {
-        getImageUrl(cloudinaryId) {
-            return cloudinaryId
-                ? `https://images.igdb.com/igdb/image/upload/t_screenshot_huge_2x/${cloudinaryId}.jpg`
-                : null;
-        },
-    },
-};
-</script>
-
-<style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles";
-
-    .game-header {
-        display: flex;
-        min-height: 20vh;
-        width: 100%;
-        position: relative;
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        margin-top: $gp;
-    }
-
-    .game-cover {
-        border: 5px solid var(--modal-text-color);
-        background-size: contain;
-        width: 100%;
-        height: auto;
-
-        @media($small) {
-            border: 3px solid var(--modal-text-color);
-            height: auto;
-            width: auto;
-            min-width: auto;
-            max-width: 100%;
-        }
-    }
-
-    .game-rating {
-        margin-top: $gp;
-        display: grid;
-        grid-template-columns: auto auto;
-
-        img {
-            height: 60px;
-            margin-left: $gp;
-
-            @media($small) {
-                display: none;
-            }
-        }
-    }
-</style>
diff --git a/src/components/Lists/List.vue b/src/components/Lists/List.vue
index 4208c12f..901e2c06 100644
--- a/src/components/Lists/List.vue
+++ b/src/components/Lists/List.vue
@@ -48,7 +48,7 @@
             />
         </draggable>
 
-        <game-search :list-id="listIndex" />
+        <add-game :list-id="listIndex" />
     </div>
 </template>
 
@@ -60,7 +60,7 @@ import GameCardDefault from '@/components/GameCards/GameCardDefault';
 import GameCardGrid from '@/components/GameCards/GameCardGrid';
 import GameCardWide from '@/components/GameCards/GameCardWide';
 import GameCardText from '@/components/GameCards/GameCardText';
-import GameSearch from '@/components/GameSearch';
+import AddGame from '@/components/AddGame';
 import { mapState, mapGetters } from 'vuex';
 import firebase from 'firebase/app';
 import 'firebase/firestore';
@@ -75,7 +75,7 @@ export default {
         GameCardGrid,
         GameCardWide,
         GameCardText,
-        GameSearch,
+        AddGame,
         ListSettings,
         draggable,
     },
diff --git a/src/components/Lists/ListAdd.vue b/src/components/Lists/ListAdd.vue
index 38a210fc..0f6e82a4 100644
--- a/src/components/Lists/ListAdd.vue
+++ b/src/components/Lists/ListAdd.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-    <modal confirm :title="title" ref="listAddModal" padded @open="open">
+    <modal :title="title" ref="listAddModal" @open="open">
         <button
             class="small primary add-list-button"
             :title="$t('list.add')"
diff --git a/src/components/Lists/ListSettings.vue b/src/components/Lists/ListSettings.vue
index d9b412a3..a765156d 100644
--- a/src/components/Lists/ListSettings.vue
+++ b/src/components/Lists/ListSettings.vue
@@ -3,7 +3,6 @@
         :title="$t('list.preferences')"
         v-if="activeList"
         ref="listSettingsModal"
-        padded
         @open="open"
         @close="close"
     >
@@ -12,13 +11,13 @@
         </button>
 
         <div class="list-settings" slot="content" v-if="localList">
-            <section class="setting-box">
+            <section>
                 <h4>List name</h4>
 
                 <input v-model="localList.name" ref="input" />
             </section>
 
-            <section class="setting-box">
+            <section>
                 <h4>{{ $t('list.view') }}</h4>
 
                 <div class="checkbox-group">
@@ -32,7 +31,7 @@
                 </div>
             </section>
 
-            <section class="setting-box" v-if="hasMultipleGames">
+            <section v-if="hasMultipleGames">
                 <h4>{{ $t('list.sortList') }}</h4>
 
                 <div class="checkbox-group">
@@ -54,67 +53,65 @@
                     </span>
                 </div>
             </section>
-        </div>
 
-        <div slot="footer">
-            <modal
-                v-if="localList && localList.games && localList.games.length"
-                ref="addList"
-                :message="warningMessage"
-                title="Are you sure?"
-                :action-text="$t('list.delete')"
-                action-button-class="danger"
-                padded
-                confirm
-                @action="deleteList"
-            >
+            <footer>
+                <modal
+                    v-if="localList && localList.games && localList.games.length"
+                    ref="addList"
+                    :message="warningMessage"
+                    title="Are you sure?"
+                    :action-text="$t('list.delete')"
+                    action-button-class="danger"
+                    @action="deleteList"
+                >
+                    <button
+                        class="danger"
+                        :title="$t('list.delete')"
+                    >
+                        <i class="far fa-trash-alt" />
+                        {{ $t('list.delete') }}
+                    </button>
+                </modal>
+
                 <button
+                    v-else
                     class="danger"
                     :title="$t('list.delete')"
+                    @click="deleteList"
                 >
                     <i class="far fa-trash-alt" />
                     {{ $t('list.delete') }}
                 </button>
-            </modal>
 
-            <button
-                v-else
-                class="danger"
-                :title="$t('list.delete')"
-                @click="deleteList"
-            >
-                <i class="far fa-trash-alt" />
-                {{ $t('list.delete') }}
-            </button>
+                <!-- <button
+                    class="primary hollow"
+                    :title="$t('list.moveLeft')"
+                    :disabled="isFirst"
+                    @click="moveList(listIndex, listIndex - 1)"
+                >
+                    <i class="fas fa-arrow-left" />
 
-            <!-- <button
-                class="primary hollow"
-                :title="$t('list.moveLeft')"
-                :disabled="isFirst"
-                @click="moveList(listIndex, listIndex - 1)"
-            >
-                <i class="fas fa-arrow-left" />
+                    {{ $t('list.moveLeft') }}
+                </button>
 
-                {{ $t('list.moveLeft') }}
-            </button>
+                <button
+                    class="primary hollow"
+                    :title="$t('list.moveRight')"
+                    :disabled="isLast"
+                    @click="moveList(listIndex, listIndex + 1)"
+                >
+                    {{ $t('list.moveRight') }}
+                    <i class="fas fa-arrow-right" />
+                </button> -->
 
-            <button
-                class="primary hollow"
-                :title="$t('list.moveRight')"
-                :disabled="isLast"
-                @click="moveList(listIndex, listIndex + 1)"
-            >
-                {{ $t('list.moveRight') }}
-                <i class="fas fa-arrow-right" />
-            </button> -->
-
-            <button
-                class="primary"
-                :title="$t('global.save')"
-                @click="save"
-            >
-                {{ $t('global.save') }}
-            </button>
+                <button
+                    class="primary"
+                    :title="$t('global.save')"
+                    @click="save"
+                >
+                    {{ $t('global.save') }}
+                </button>
+            </footer>
         </div>
     </modal>
 </template>
@@ -199,6 +196,7 @@ export default {
         deleteList() {
             this.$store.commit('REMOVE_LIST', this.listIndex);
 
+            // TODO: move to action
             db.collection('lists').doc(this.user.uid).set(this.gameLists, { merge: true })
                 .then(() => {
                     this.$bus.$emit('TOAST', { message: 'List deleted' });
diff --git a/src/components/Settings/GameBoardSettings.vue b/src/components/Settings/GameBoardSettings.vue
index 0862bee1..df103027 100644
--- a/src/components/Settings/GameBoardSettings.vue
+++ b/src/components/Settings/GameBoardSettings.vue
@@ -1,19 +1,14 @@
 <template lang="html">
-    <section class="setting-box">
-        <h5 class="title">
-            Game board
-            <span v-if="showBoardSpecificSettings">({{ platform.name }})</span>
-        </h5>
-
-        <!-- <div class="setting">
+    <section>
+        <div class="setting">
             <i class="fas fa-users" />
             <h5>{{ $t('settings.public') }}</h5>
 
             <toggle-switch
-                id="nightMode"
-                v-model="value.public"
+                id="public"
+                v-model="value[platform.code].public"
             />
-        </div> -->
+        </div>
 
         <div class="setting">
             <i class="fas fa-star-half-alt" />
@@ -21,65 +16,43 @@
 
             <toggle-switch
                 id="gameRatings"
-                v-model="value.hideGameRatings"
+                v-model="value[platform.code].hideGameRatings"
             />
         </div>
 
-        <template v-if="showBoardSpecificSettings">
-            <wallpaper-upload />
+        <wallpaper-upload />
 
-            <div class="setting">
-                <i class="fas fa-palette" />
-                <h5>Global theme</h5>
+        <div class="setting">
+            <i class="fas fa-palette" />
+            <h5>Global theme</h5>
 
-                <select v-model="value[platform.code].theme">
-                    <option v-for="{ id, name } in themes" :key="id" :value="id">
-                        {{ name }}
-                    </option>
-                </select>
-            </div>
+            <select v-model="value[platform.code].theme">
+                <option v-for="{ id, name } in themes" :key="id" :value="id">
+                    {{ name }}
+                </option>
+            </select>
+        </div>
 
-            <!-- TODO: refactor gameBoard to allow public data source -->
-            <!-- <section>
-                <h3>{{ $t('gameBoard.settings.shareLink') }}</h3>
-                <div class="links">
-                    <a class="link primary" :href="tweetUrl" target="_blank">
-                        <i class="fab fa-twitter" />
-                    </a>
+        <div class="setting">
+            <i class="fas fa-exclamation-triangle" />
+            <h5>{{ $t('gameBoard.settings.dangerZone') }}</h5>
 
-                    <a class="link primary reddit" :href="redditUrl" target="_blank">
-                        <i class="fab fa-reddit" />
-                    </a>
-
-                    <a class="link info" :href="shareUrl" target="_blank">
-                        <i class="fas fa-link" />
-                    </a>
-                </div>
-            </section> -->
-
-            <div class="setting">
-                <i class="fas fa-exclamation-triangle" />
-                <h5>{{ $t('gameBoard.settings.dangerZone') }}</h5>
-
-                <modal
-                    action-text="Delete forever"
-                    action-button-class="danger"
-                    confirm
-                    :message="`Your ${platform.name} collection will be deleted forever.`"
-                    :title="`Delete ${platform.name} collection`"
-                    padded
-                    @action="deletePlatform"
+            <modal
+                action-text="Delete forever"
+                action-button-class="danger"
+                :message="`Your ${platform.name} collection will be deleted forever.`"
+                :title="`Delete ${platform.name} collection`"
+                @action="deletePlatform"
+            >
+                <button
+                    class="small warning"
+                    :title="$t('list.delete')"
                 >
-                    <button
-                        class="small warning"
-                        :title="$t('list.delete')"
-                    >
-                        <i class="far fa-trash-alt" />
-                        Delete {{ platform.name }} collection
-                    </button>
-                </modal>
-            </div>
-        </template>
+                    <i class="far fa-trash-alt" />
+                    Delete {{ platform.name }} collection
+                </button>
+            </modal>
+        </div>
     </section>
 </template>
 
@@ -116,10 +89,6 @@ export default {
             return `Check out my ${this.platform.name} collection at Gamebrary`;
         },
 
-        showBoardSpecificSettings() {
-            return this.$route.name === 'game-board' && this.platform;
-        },
-
         tweetUrl() {
             return `https://twitter.com/intent/tweet?text=${this.shareText}&url=${encodeURIComponent(this.shareUrl)}`;
         },
@@ -138,9 +107,8 @@ export default {
     },
 
     mounted() {
-        if (!this.value.theme) {
-            this.value.theme = {};
-            this.value.theme[this.platform.code] = 'theme-default';
+        if (!this.value[this.platform.code]) {
+            this.value[this.platform.code] = {};
         }
     },
 
@@ -150,7 +118,7 @@ export default {
 
             const db = firebase.firestore();
 
-            // TOOD: move to actions
+            // TODO: move to actions
             db.collection('lists').doc(this.user.uid).set(this.gameLists, { merge: false })
                 .then(() => {
                     this.$router.push({ name: 'platforms' });
@@ -163,28 +131,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles";
-
-    .list-settings {
-        display: grid;
-        grid-gap: $gp;
-
-        section {
-            margin-bottom: $gp;
-        }
-
-        h3 {
-            margin: $gp / 2 0;
-        }
-    }
-
-    .links {
-        a {
-            &.reddit {
-                background-color: #ff4500;
-            }
-        }
-    }
-</style>
diff --git a/src/components/Settings/PlatformsSettings.vue b/src/components/Settings/PlatformsSettings.vue
index 4aa0a6d6..ce22258f 100644
--- a/src/components/Settings/PlatformsSettings.vue
+++ b/src/components/Settings/PlatformsSettings.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-    <section class="setting-box">
+    <section>
         <h3>Platform page</h3>
 
         <div class="setting" v-if="hasLists">
diff --git a/src/components/Settings/SettingsActions.vue b/src/components/Settings/SettingsActions.vue
deleted file mode 100644
index bfb15667..00000000
--- a/src/components/Settings/SettingsActions.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template lang="html">
-    <div class="settings-actions">
-        <button class="secondary" @click="signOut">
-            <i class="fas fa-sign-out-alt" />
-            {{ $t('settings.signOut') }}
-        </button>
-
-        <modal
-            padded
-            confirm
-            :message="$t('settings.deleteAccount.message')"
-            :title="$t('settings.deleteAccount.title')"
-            :action-text="$t('settings.deleteAccount.button')"
-            @action="deleteAccount"
-        >
-            <button class="danger">
-                <i class="fas fa-exclamation-triangle" />
-                {{ $t('settings.deleteAccount.button') }}
-            </button>
-        </modal>
-
-        <button class="primary" @click="save">
-            {{ $t('global.save') }}
-        </button>
-    </div>
-</template>
-
-<script>
-import firebase from 'firebase/app';
-import Modal from '@/components/Modal';
-import Gravatar from 'vue-gravatar';
-import moment from 'moment';
-import { mapState } from 'vuex';
-
-export default {
-    components: {
-        Modal,
-        Gravatar,
-    },
-
-    data() {
-        return {
-            moment,
-        };
-    },
-
-    computed: {
-        ...mapState(['user']),
-
-        exitUrl() {
-            return process.env.NODE_ENV === 'development'
-                ? 'http://localhost:3000'
-                : 'https://gamebrary.com';
-        },
-    },
-
-    methods: {
-        exit() {
-            this.$store.commit('CLEAR_SESSION');
-            window.location.href = this.exitUrl;
-        },
-
-        deleteAccount() {
-            const db = firebase.firestore();
-
-
-            // TOOD: move to actions
-            db.collection('settings').doc(this.user.uid).delete()
-                .then(() => {
-                    // TOOD: move to actions
-                    db.collection('lists').doc(this.user.uid).delete()
-                        .then(() => {
-                            this.$bus.$emit('TOAST', { message: 'Account deleted' });
-                            this.exit();
-                        })
-                        .catch(() => {
-                            this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
-                            this.$router.push({ name: 'sessionExpired' });
-                        });
-                })
-                .catch(() => {
-                    this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
-                    this.$router.push({ name: 'sessionExpired' });
-                });
-        },
-
-        signOut() {
-            firebase.auth().signOut()
-                .then(() => {
-                    this.exit();
-                })
-                .catch((error) => {
-                    this.$bus.$emit('TOAST', { message: error, type: 'error' });
-                });
-        },
-
-        save() {
-            this.$emit('save');
-        },
-    },
-};
-</script>
-
-<style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles";
-
-    .settings-actions {
-        display: flex;
-        justify-content: space-between;
-    }
-</style>
diff --git a/src/components/Settings/SettingsGlobal.vue b/src/components/Settings/SettingsGlobal.vue
index 566d4d2f..d2c96ff9 100644
--- a/src/components/Settings/SettingsGlobal.vue
+++ b/src/components/Settings/SettingsGlobal.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-    <section class="setting-box">
+    <section>
         <h3>General</h3>
 
         <div class="setting">
diff --git a/src/components/Settings/TagsSettings.vue b/src/components/Settings/TagsSettings.vue
index a787dfc6..7d76c936 100644
--- a/src/components/Settings/TagsSettings.vue
+++ b/src/components/Settings/TagsSettings.vue
@@ -1,59 +1,81 @@
 <template lang="html">
-    <section class="tags-settings setting-box">
-        <h3>Tags</h3>
-        <div class="tag-input">
-            <input
-                type="text"
-                v-model="tagName"
-                :placeholder="$t('tags.inputPlaceholder')"
-            />
+    <div>
+        <modal title="Manage tags">
+            <div class="setting">
+                <i class="fas fa-tags" />
+                <h5>Tags</h5>
 
-            <input
-                type="color"
-                class="color-picker"
-                :value="tagHex"
-                @change="updateColor"
-            />
-        </div>
+                <button class="primary">
+                    Manage tags
+                </button>
+            </div>
 
-        <div class="tag-actions">
-            <button
-                class="secondary small"
-                :disabled="!tagName"
-                @click="reset"
+            <div slot="content">
+                <div class="tag-input">
+                    <input
+                        type="text"
+                        v-model="tagName"
+                        :placeholder="$t('tags.inputPlaceholder')"
+                    />
+
+                    <input
+                        type="color"
+                        class="color-picker"
+                        :value="tagHex"
+                        @change="updateColor"
+                    />
+                </div>
+
+                <div class="tag-actions">
+                    <button
+                        class="secondary"
+                        :disabled="!tagName"
+                        @click="reset"
+                    >
+                        {{ $t('global.cancel') }}
+                    </button>
+
+                    <button
+                        class="primary"
+                        :disabled="isDuplicate && !editing"
+                        @click="submit"
+                    >
+                        {{ actionLabel }}
+                    </button>
+                </div>
+
+                <div class="tags" v-if="hasTags">
+                    <tag
+                        v-for="(tag, name) in localTags"
+                        :key="name"
+                        :label="name"
+                        :hex="tag.hex"
+                        @close="deleteTag(name)"
+                    />
+                    <!-- @click.native="editTag(tag, name)" -->
+                </div>
+            </div>
+            <!-- <button
+                class="small warning"
+                :title="$t('list.delete')"
             >
-                {{ $t('global.cancel') }}
-            </button>
+                <i class="far fa-trash-alt" />
+                Delete {{ platform.name }} collection
+            </button> -->
 
-            <button
-                class="primary small"
-                :disabled="isDuplicate && !editing"
-                @click="submit"
-            >
-                {{ actionLabel }}
-            </button>
-        </div>
-
-        <div class="tags" v-if="hasTags">
-            <tag
-                v-for="(tag, name) in localTags"
-                :key="name"
-                :label="name"
-                :hex="tag.hex"
-                @close="deleteTag(name)"
-            />
-            <!-- @click.native="editTag(tag, name)" -->
-        </div>
-    </section>
+        </modal>
+    </div>
 </template>
 
 <script>
 import Tag from '@/components/Tag';
+import Modal from '@/components/Modal';
 import { mapState } from 'vuex';
 
 export default {
     components: {
         Tag,
+        Modal,
     },
 
     data() {
@@ -173,23 +195,17 @@ export default {
 <style lang="scss" rel="stylesheet/scss" scoped>
     @import "~styles/styles";
 
-    .tags-settings {
-        display: grid;
-        grid-gap: $gp;
-        margin: $gp 0;
-        padding: $gp;
-        border-radius: $border-radius;
-    }
-
     .tag-input {
         display: grid;
-        grid-template-columns: 1fr 32px;
-        grid-gap: $gp / 2;
+        grid-template-columns: 1fr 40px;
+        grid-gap: $gp;
+        margin-bottom: $gp;
     }
 
     .tag-actions {
         display: flex;
         justify-content: space-between;
+        margin-bottom: $gp;
     }
 
     input {
@@ -198,8 +214,8 @@ export default {
 
     .color-picker {
         -webkit-appearance: none;
-        width: 32px;
-        height: 32px;
+        width: 40px;
+        height: 40px;
         padding: 0;
         margin: 0;
         border: 0;
diff --git a/src/components/WallpaperUpload.vue b/src/components/WallpaperUpload.vue
index 6e69457a..0f90be44 100644
--- a/src/components/WallpaperUpload.vue
+++ b/src/components/WallpaperUpload.vue
@@ -1,3 +1,4 @@
+<!-- TODO: refactor to live in platform settings -->
 <template>
     <div class="setting wallpaper-upload">
         <template v-if="wallpaperUrl">
@@ -13,7 +14,6 @@
                     ref="addList"
                     :title="$t('settings.wallpaper.currentWallpaper')"
                     large
-                    padded
                     action-text="Remove wallpaper"
                     @action="removeWallpaper"
                 >
@@ -160,7 +160,7 @@ export default {
         border-radius: $border-radius;
 
         &:hover {
-            border-color: var(--link-color);
+            border-color: var(--accent-color);
         }
     }
 
diff --git a/src/pages/GameBoard.vue b/src/pages/GameBoard.vue
index e6bff76c..a4a41737 100755
--- a/src/pages/GameBoard.vue
+++ b/src/pages/GameBoard.vue
@@ -23,8 +23,6 @@
             ref="tag"
             :title="$t('tags.applyTag')"
             :message="$t('tags.useTags')"
-            padded
-            confirm
         >
             <div slot="content">
                 <div
diff --git a/src/pages/GameDetail.vue b/src/pages/GameDetail.vue
index b57d09a8..1660a060 100644
--- a/src/pages/GameDetail.vue
+++ b/src/pages/GameDetail.vue
@@ -1,32 +1,44 @@
 <template lang="html">
-    <div class="game-detail-wrapper">
-        <div class="game-detail" v-if="game">
-            <div class="game-hero" :style="style" />
+    <div class="game-detail">
+        <game-detail-placeholder v-if="!game" :id="id" />
 
+        <template v-else>
             <div class="game-detail-container">
+                <pre>{{ tabs }}</pre>
+                <div class="checkbox-group">
+                    <span v-for="{ value } in tabs">
+                        <label for="videos" :class="{ active: value === tab }">
+                            <i class="fab fa-youtube" />
+                            Videos
+                        </label>
+                        <input type="radio" id="videos" :value="value" v-model="tab" />
+                    </span>
+                </div>
+
+                <!-- <component :is="gameCardComponent" /> -->
+
+                <game-screenshots />
+                <game-videos />
+                <igdb-credit gray />
                 <div class="game-info">
-                    <game-header />
+                    <div class="game-header">
+                        <img :src="coverUrl" :alt="game.name" class="game-cover" />
+
+                        <div class="game-rating" v-if="game.age_ratings">
+                            <img
+                                v-for="{ rating, synopsis, id } in game.age_ratings"
+                                :key="id"
+                                :src='`/static/img/age-ratings/${ageRatings[rating]}.png`'
+                                :alt="synopsis"
+                            />
+                        </div>
+                    </div>
 
                     <div class="game-details">
                         <h2>{{ game.name }}</h2>
                         {{ platform.name }}
                         <game-rating :rating="game.rating" />
 
-                        <p class="game-description" v-html="game.summary" />
-
-                        <tag
-                            v-if="games.includes(game.id)"
-                            v-for="({ games, hex }, name) in tags"
-                            :key="name"
-                            :label="name"
-                            :hex="hex"
-                            readonly
-                            @action="openTags"
-                            @close="removeTag(name)"
-                        />
-
-                        <game-details />
-
                         <div class="actions">
                             <button
                                 v-if="list.games.includes(game.id)"
@@ -50,24 +62,32 @@
                             </div>
                         </div>
 
+                        <p class="game-description" v-html="game.summary" />
+
+                        <tag
+                            v-if="games.includes(game.id)"
+                            v-for="({ games, hex }, name) in tags"
+                            :key="name"
+                            :label="name"
+                            :hex="hex"
+                            readonly
+                            @action="openTags"
+                            @close="removeTag(name)"
+                        />
+
+                        <game-details />
                         <game-notes />
                     </div>
                 </div>
-
-                <game-screenshots />
-                <game-videos />
-                <igdb-credit gray />
             </div>
-        </div>
-
-        <game-detail-placeholder v-else :id="id" />
+        </template>
     </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 import Tag from '@/components/Tag';
-import GameHeader from '@/components/GameDetail/GameHeader';
+// import GameHeader from '@/components/GameDetail/GameHeader';
 import GameScreenshots from '@/components/GameDetail/GameScreenshots';
 import GameNotes from '@/components/GameNotes';
 import GameRating from '@/components/GameDetail/GameRating';
@@ -84,7 +104,7 @@ export default {
     components: {
         IgdbCredit,
         Tag,
-        GameHeader,
+        // GameHeader,
         GameRating,
         GameScreenshots,
         GameNotes,
@@ -93,6 +113,20 @@ export default {
         GameDetailPlaceholder,
     },
 
+    data() {
+        return {
+            tab: '',
+            tabs: [
+                {
+                    value: 'videos',
+                    icon: 'fab fa-youtube',
+                    text: 'Videos',
+                    component: 'GameVideos',
+                }
+            ]
+        };
+    },
+
     props: {
         id: [Number, String],
         listId: [Number, String],
@@ -100,23 +134,12 @@ export default {
 
     computed: {
         ...mapState(['game', 'user', 'platform', 'tags', 'gameLists']),
+        ...mapGetters(['ageRatings']),
 
         hasTags() {
             return Object.keys(this.tags) && Object.keys(this.tags).length > 0;
         },
 
-        style() {
-            const screenshot = this.game.screenshots && this.game.screenshots.length > 0
-                ? this.game.screenshots[0]
-                : null;
-
-            const screenshotUrl = screenshot && screenshot.image_id
-                ? `https://images.igdb.com/igdb/image/upload/t_screenshot_big/${screenshot.image_id}.jpg`
-                : '';
-
-            return `background: url('${screenshotUrl}') center center no-repeat; background-size: cover;`;
-        },
-
         activePlatform() {
             return this.gameLists[this.platform.code];
         },
@@ -126,7 +149,7 @@ export default {
         },
 
         coverUrl() {
-            return this.game.cover && this.game.cover.image_id
+            return this.game && this.game.cover
                 ? `https://images.igdb.com/igdb/image/upload/t_cover_small_2x/${this.game.cover.image_id}.jpg`
                 : '/static/no-image.jpg';
         },
@@ -195,100 +218,5 @@ export default {
 <style lang="scss" rel="stylesheet/scss" scoped>
     @import "~styles/styles";
 
-    .game-detail {
-        display: flex;
-        justify-content: center;
-        min-height: calc(100vh - #{$navHeight});
 
-        @media($small) {
-            padding-top: $gp * 2;
-        }
-    }
-
-    .game-hero {
-        background-color: #555555;
-        position: absolute;
-        background-position: bottom;
-        width: 100%;
-        left: 0;
-        border-top-left-radius: $border-radius;
-        border-top-right-radius: $border-radius;
-        height: 400px;
-        z-index: 1;
-
-        @media($small) {
-            top: 0;
-            border-radius: 0;
-            padding-top: $gp;
-        }
-    }
-
-    .game-details {
-        margin-top: $gp;
-
-        @media($small) {
-            margin: -$gp;
-            margin-top: $gp;
-            padding: $gp;
-            background-color: var(--modal-background);
-        }
-    }
-
-    .game-info {
-        display: grid;
-        grid-template-columns: 180px auto;
-        grid-gap: $gp * 2;
-        margin: 0 $gp;
-
-        @media($small) {
-            grid-gap: 0;
-            grid-template-columns: 1fr;
-
-            .game-description {
-                text-align: justify;
-            }
-        }
-
-        .game-description {
-            line-height: 1.4rem;
-        }
-    }
-
-    .game-detail-container {
-        box-shadow: 0 0 2px 0 #a5a2a2;
-        width: $container-width;
-        background: var(--modal-background);
-        opacity: 0.95;
-        max-width: 100%;
-        z-index: 1;
-        margin: $gp * 3;
-        border-radius: $border-radius;
-
-        @media($small) {
-            margin: 0;
-            border-radius: 0;
-            box-shadow: none;
-            margin-top: 0;
-            box-shadow: none;
-            background-color: rgba(255, 255, 255, .5);
-            background: none;
-        }
-    }
-
-    .igdb-credit {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        padding: $gp;
-    }
-
-    .actions {
-        display: flex;
-        align-items: center;
-        margin-top: $gp;
-
-        button {
-            margin-right: $gp;
-        }
-    }
 </style>
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index f9c1dbee..7a08f004 100644
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -1,17 +1,38 @@
 <template lang="html">
-    <modal title="Settings">
+    <modal title="Settings" action-text="Save" @action="save">
         <button class="small primary">
             <i class="fas fa-cog" />
         </button>
 
         <div class="settings" slot="content">
-            <!-- <pre>{{ localSettings }}</pre> -->
-            <settings-global v-model="localSettings" />
             <game-board-settings v-model="localSettings" />
             <tags-settings v-model="localSettings" />
-        </div>
 
-        <settings-actions slot="footer" @save="save" />
+            <div class="setting">
+                <i class="fas fa-sign-out-alt" />
+                {{ $t('settings.signOut') }}
+
+                <button class="secondary" @click="signOut">
+                    {{ $t('settings.signOut') }}
+                </button>
+            </div>
+
+            <modal
+                :message="$t('settings.deleteAccount.message')"
+                :title="$t('settings.deleteAccount.title')"
+                :action-text="$t('settings.deleteAccount.button')"
+                @action="deleteAccount"
+            >
+                <div class="setting">
+                    <i class="fas fa-exclamation-triangle" />
+                    {{ $t('settings.deleteAccount.button') }}
+
+                    <button class="danger">
+                        {{ $t('settings.deleteAccount.button') }}
+                    </button>
+                </div>
+            </modal>
+        </div>
     </modal>
 </template>
 
@@ -21,11 +42,11 @@ import 'firebase/firestore';
 import 'firebase/auth';
 import GameBoardSettings from '@/components/Settings/GameBoardSettings';
 import SettingsGlobal from '@/components/Settings/SettingsGlobal';
-import SettingsActions from '@/components/Settings/SettingsActions';
 import AboutSettings from '@/components/Settings/AboutSettings';
 import TagsSettings from '@/components/Settings/TagsSettings';
 import Modal from '@/components/Modal';
 import moment from 'moment';
+import firebase from 'firebase/app';
 import Releases from '@/components/Releases/Releases';
 
 export default {
@@ -34,7 +55,6 @@ export default {
         Releases,
         GameBoardSettings,
         SettingsGlobal,
-        SettingsActions,
         AboutSettings,
         TagsSettings,
     },
@@ -76,8 +96,48 @@ export default {
 
     methods: {
         save() {
+            // TODO: call action directly
             this.$bus.$emit('SAVE_SETTINGS', this.localSettings);
         },
+
+        deleteAccount() {
+            const db = firebase.firestore();
+
+
+            // TOOD: move to actions
+            db.collection('settings').doc(this.user.uid).delete()
+                .then(() => {
+                    // TOOD: move to actions
+                    db.collection('lists').doc(this.user.uid).delete()
+                        .then(() => {
+                            this.$bus.$emit('TOAST', { message: 'Account deleted' });
+                            this.exit();
+                        })
+                        .catch(() => {
+                            this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
+                            this.$router.push({ name: 'sessionExpired' });
+                        });
+                })
+                .catch(() => {
+                    this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
+                    this.$router.push({ name: 'sessionExpired' });
+                });
+        },
+
+        signOut() {
+            firebase.auth().signOut()
+                .then(() => {
+                    this.exit();
+                })
+                .catch((error) => {
+                    this.$bus.$emit('TOAST', { message: error, type: 'error' });
+                });
+        },
+
+        exit() {
+            this.$store.commit('CLEAR_SESSION');
+            window.location.href = this.exitUrl;
+        },
     },
 };
 </script>
@@ -88,8 +148,5 @@ export default {
     .settings {
         display: flex;
         flex-direction: column;
-        padding: $gp * 2 $gp;
-        margin: 0 auto;
-        min-height: 600px;
     }
 </style>
diff --git a/src/router.js b/src/router.js
index ee678595..ecd82405 100755
--- a/src/router.js
+++ b/src/router.js
@@ -31,6 +31,11 @@ export default new Router({
             name: 'game-board',
             component: GameBoard,
         },
+        {
+            path: '/settings',
+            name: 'settings',
+            component: GameBoard,
+        },
         {
             path: '/auth/:authProvider',
             name: 'auth',
diff --git a/src/styles/_buttons.scss b/src/styles/_buttons.scss
index 52831219..be959706 100644
--- a/src/styles/_buttons.scss
+++ b/src/styles/_buttons.scss
@@ -1,7 +1,7 @@
 $iconSmallSize: 32px;
 
 a {
-    color: var(--link-color);
+    color: var(--accent-color);
 }
 
 a.link {
diff --git a/src/styles/_inputs.scss b/src/styles/_inputs.scss
index 15bb9f28..0edd247e 100644
--- a/src/styles/_inputs.scss
+++ b/src/styles/_inputs.scss
@@ -2,16 +2,11 @@ input, select {
     background: #fff;
     border: 1px solid #555555;
     border-radius: $border-radius;
-    height: 32px;
+    height: 40px;
     padding: 0 $gp / 2;
     width: 100%;
-    font-size: 12px;
+    font-size: 14px;
     margin-bottom: $gp;
-
-    &.small {
-        height: 20px;
-        margin: 0;
-    }
 }
 
 .checkbox-group {
@@ -31,7 +26,7 @@ input, select {
             align-items: center;
 
             &.active {
-                color: var(--link-color);
+                color: var(--accent-color);
             }
 
             i {
diff --git a/src/styles/_settings.scss b/src/styles/_settings.scss
index e9517717..e2726f71 100644
--- a/src/styles/_settings.scss
+++ b/src/styles/_settings.scss
@@ -9,10 +9,3 @@ h5.title {
     align-items: center;
     padding: $gp 0;
 }
-
-.setting-box {
-    border: 1px solid rgba(85, 85, 85, .5);
-    border-radius: $border-radius;
-    margin: 0 0 $gp * 1.5;
-    padding: $gp;
-}
\ No newline at end of file
diff --git a/src/styles/themes/blue.scss b/src/styles/themes/blue.scss
index 872b1a76..87c8df78 100644
--- a/src/styles/themes/blue.scss
+++ b/src/styles/themes/blue.scss
@@ -5,7 +5,7 @@
     --game-card-background: #ffffff;
     --game-card-text-color: #333333;
     --header-text-color: #fff;
-    --link-color: #0ab9e6;
+    --accent-color: #0ab9e6;
     --list-background: #e5e5e5;
     --list-header-background: #003087;
     --list-header-text-color: #ffffff;
diff --git a/src/styles/themes/city-lights.scss b/src/styles/themes/city-lights.scss
index 077d06e2..7c2bf5e2 100644
--- a/src/styles/themes/city-lights.scss
+++ b/src/styles/themes/city-lights.scss
@@ -5,7 +5,7 @@
     --game-card-background: #12141C;
     --game-card-text-color: #fc0;
     --header-text-color: #fcfcfc;
-    --link-color: #8B76C1;
+    --accent-color: #8B76C1;
     --list-background: #0b212f;
     --list-header-background: #003b4a;
     --list-header-text-color: #fcfcfc;
diff --git a/src/styles/themes/dark.scss b/src/styles/themes/dark.scss
index b093554e..68fc10a7 100644
--- a/src/styles/themes/dark.scss
+++ b/src/styles/themes/dark.scss
@@ -5,7 +5,7 @@
     --game-card-background: #A6A2A2;
     --game-card-text-color: #222;
     --header-text-color: #fff;
-    --link-color: #222;
+    --accent-color: #fc0;
     --list-background: #555;
     --list-header-background: #333;
     --list-header-text-color: #c0c0c0;
diff --git a/src/styles/themes/default.scss b/src/styles/themes/default.scss
index a1e3af5b..f848c1da 100644
--- a/src/styles/themes/default.scss
+++ b/src/styles/themes/default.scss
@@ -5,7 +5,7 @@
     --game-card-background: #ffffff;
     --game-card-text-color: #333333;
     --header-text-color: #222222;
-    --link-color: #333333;
+    --accent-color: #0ab9e6;
     --list-background: #e5e5e5;
     --list-header-background: #555555;
     --list-header-text-color: #ffffff;