diff --git a/src/App.vue b/src/App.vue
index 2650975a..5372a6a0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,6 +21,8 @@
     id="app"
     :dir="dir"
     v-shortkey="KEYBOARD_SHORTCUTS"
+    :style="style"
+    :class="{ 'no-repeat': style.length > 0 }"
     @shortkey="handleShortcutAction"
   >
     <page-header />
@@ -58,6 +60,8 @@ export default {
   data() {
     return {
       debugUserId: null,
+      backgroundImageUrl: null,
+      backgroundColor: null,
       KEYBOARD_SHORTCUTS,
     };
   },
@@ -65,6 +69,18 @@ export default {
   computed: {
     ...mapState(['user', 'settings', 'sessionExpired']),
 
+    style() {
+      const backgroundImage = this.backgroundImageUrl
+        ? `background-image: url('${this.backgroundImageUrl}');`
+        : null;
+
+      const backgroundColor = this.backgroundColor
+        ? `background-color: ${this.backgroundColor};`
+        : null;
+
+      return [backgroundImage, backgroundColor].join('');
+    },
+
     userId() {
       return this.debugUserId || this.user.uid;
     },
@@ -91,12 +107,23 @@ export default {
   },
 
   async mounted() {
+    this.$bus.$on('UPDATE_WALLPAPER', this.updateWallpaperUrl);
+    this.$bus.$on('UPDATE_BACKGROUND_COLOR', this.updateBackgroundColor);
+
     await this.$store.dispatch('GET_TWITCH_TOKEN');
 
     this.init();
   },
 
   methods: {
+    updateWallpaperUrl(value) {
+      this.backgroundImageUrl = value;
+    },
+
+    updateBackgroundColor(value) {
+      this.backgroundColor = value;
+    },
+
     handleShortcutAction(data) {
       this.$bus.$emit('HANDLE_SHORTCUT', data);
     },
@@ -134,14 +161,20 @@ export default {
 
 <style lang="scss" rel="stylesheet/scss" scoped>
   #app {
-    // background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,212,255,1) 100%);
     min-height: 100vh;
+    background-image: url('~/public/bg-tile.png');
     display: grid;
+
+    &.no-repeat {
+      background-repeat: no-repeat;
+      // background-size: contain;
+      // background-size: cover;
+      background-size: contain;
+    }
   }
 
   .viewport {
-    // padding-top: 54px !important;
-    overflow-y: auto;
-    // height: calc(100vh - 54px);
+    min-height: calc(100vh - 62px);
+    // overflow-y: auto;
   }
 </style>
diff --git a/src/components/BoardsDropdown.vue b/src/components/BoardsDropdown.vue
index 73e5a2e6..dd8d6235 100644
--- a/src/components/BoardsDropdown.vue
+++ b/src/components/BoardsDropdown.vue
@@ -1,94 +1,66 @@
 <template lang="html">
-  <b-dropdown
-    split
-    class="mr-2 boards-dropdown"
-    variant="dark"
-    split-class="p-0"
-    v-b-tooltip.hover
-    right
-    :title="board.name"
-    :split-to="{ name: 'board', params: { id: board.id } }"
-  >
-    <template #button-content>
-      <!-- <b-avatar
-        variant="primary"
-        :text="boardInitials"
-        rounded
-      /> -->
-      <!-- :class="['board-thumbnail mr-2', { 'bg-dark' : !backgroundColor }]" -->
-      <b-avatar
-        rounded
-        class="board-thumbnail"
-        :title="board.name"
-        text=" "
-        :style="`
-          background-image: url(${boardBackgroundUrl});
-          background-color: ${board.backgroundColor || ''}
-          `"
-      />
-
-      <small class="px-2 d-none d-md-inline text-nowrap">{{ board.name }}</small>
-    </template>
-
-    <!-- <b-dropdown-item href="#">
-      <b-avatar
-        variant="primary"
-        :text="boardInitials"
-        rounded
-      />
-
-      {{ board.name }}
-      <i class="fas fa-caret-down fa-fw" aria-hidden />
-    </b-dropdown-item> -->
-
-    <b-dropdown-item
-      size="sm"
+  <div>
+    <b-button
       :to="{ name: 'board.edit', params: { id: board.id } }"
     >
-      <i class="fas fa-pencil-alt fa-fw" aria-hidden />
-      Edit board
-    </b-dropdown-item>
-
+      {{ board.name }}
+    </b-button>
     <!-- TODO: Clone board -->
     <!-- TODO: like/favorite board -->
     <!-- TODO: Fork board -->
-    <b-dropdown-divider />
 
-    <b-dropdown-item
-      size="sm"
-      :to="{ name: 'create.board' }"
+    <!-- <b-dropdown
+      class="mr-2 boards-dropdown"
+      variant="dark"
+      v-b-tooltip.hover
+      right
+      :title="board.name"
     >
-      <i class="fas fa-plus fa-fw" aria-hidden></i>
-      Create new board
-    </b-dropdown-item>
+      <b-dropdown-item
+        size="sm"
+        :to="{ name: 'board.edit', params: { id: board.id } }"
+      >
+        <i class="fas fa-pencil-alt fa-fw" aria-hidden />
+        Edit board
+      </b-dropdown-item>
 
-    <template v-if="filteredBoards.length">
       <b-dropdown-divider />
 
-      <span class="m-2 text-muted">Other boards:</span>
-
-      <!-- TODO: use route directly -->
-      <b-dropdown-item-button
-        v-for="{ id, name, backgroundColor, backgroundUrl } in filteredBoards"
-        :key="id"
-        :active="board.name === name"
-        @click="viewBoard(id)"
+      <b-dropdown-item
+        size="sm"
+        :to="{ name: 'create.board' }"
       >
-        <b-avatar
-          rounded
-          :class="['board-thumbnail mr-2', { 'bg-dark' : !backgroundColor }]"
-          :title="name"
-          text=" "
-          :style="`
-            background-image: url(${backgroundUrl ? backgroundUrl : ''});
-            background-color: ${backgroundColor ? backgroundColor : ''}
-            `"
-        />
+        <i class="fas fa-plus fa-fw" aria-hidden></i>
+        Create new board
+      </b-dropdown-item>
 
-        {{ name }}
-      </b-dropdown-item-button>
-    </template>
-  </b-dropdown>
+      <template v-if="filteredBoards.length">
+        <b-dropdown-divider />
+
+        <span class="m-2 text-muted">Other boards:</span>
+
+        <b-dropdown-item-button
+          v-for="{ id, name, backgroundColor, backgroundUrl } in filteredBoards"
+          :key="id"
+          :active="board.name === name"
+          @click="viewBoard(id)"
+        >
+          <b-avatar
+            rounded
+            :class="['board-thumbnail mr-2', { 'bg-dark' : !backgroundColor }]"
+            :title="name"
+            text=" "
+            :style="`
+              background-image: url(${backgroundUrl ? backgroundUrl : ''});
+              background-color: ${backgroundColor ? backgroundColor : ''}
+              `"
+          />
+
+          {{ name }}
+        </b-dropdown-item-button>
+      </template>
+    </b-dropdown> -->
+  </div>
 </template>
 
 <script>
@@ -98,6 +70,11 @@ export default {
   computed: {
     ...mapState(['board', 'wallpapers', 'boards', 'settings']),
 
+    buttonRoute() {
+      // { name: 'board.edit', params: { id: board.id } }
+      return this.$route.name;
+    },
+
     filteredBoards() {
       return this.boards
         .filter(({ id }) => id !== this.board.id)
diff --git a/src/components/GameBoards.vue b/src/components/GameBoards.vue
index 369a367a..81fd523e 100644
--- a/src/components/GameBoards.vue
+++ b/src/components/GameBoards.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-  <b-row v-if="user" class="p-1">
+  <b-row v-if="user" class="p-1 boards">
     <!-- TODO: allow reorganizing and save -->
     <empty-state
       v-if="!user || !loading && sortedBoards.length === 0"
@@ -156,3 +156,8 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.boards {
+}
+</style>
diff --git a/src/components/GameCards/GameCardDefault.vue b/src/components/GameCards/GameCardDefault.vue
index c7119560..e541615d 100644
--- a/src/components/GameCards/GameCardDefault.vue
+++ b/src/components/GameCards/GameCardDefault.vue
@@ -2,7 +2,7 @@
   <b-card
     no-body
     bg-variant="transparent"
-    class="card cursor-pointer"
+    class="cursor-pointer"
   >
     <b-row
       no-gutters
diff --git a/src/components/GameCards/GameCardGrid.vue b/src/components/GameCards/GameCardGrid.vue
index e08a4478..2abd1697 100644
--- a/src/components/GameCards/GameCardGrid.vue
+++ b/src/components/GameCards/GameCardGrid.vue
@@ -1,7 +1,7 @@
 <template lang="html">
   <b-card
     no-body
-    class="cursor-pointer"
+    class="cursor-pointer text-center"
     :img-src="coverUrl"
     img-top
   >
diff --git a/src/components/Lists/GameList.vue b/src/components/Lists/GameList.vue
index 4ad362a6..4bffe6ee 100644
--- a/src/components/Lists/GameList.vue
+++ b/src/components/Lists/GameList.vue
@@ -83,14 +83,16 @@
           {{ $t('board.list.emptyListButton') }}
         </b-button> -->
 
-        <b-alert
+        <b-button
           v-if="isEmpty"
           variant="light"
-          show
-          class="text-center"
+          block
+          class="mb-2"
+          :to="{ name: 'search' }"
         >
-          [Empty]
-        </b-alert>
+          <!-- TODO: add board id in params -->
+          Add games
+        </b-button>
       </draggable>
     </b-card>
   </div>
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index e6ce1cb5..16d90236 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -1,7 +1,7 @@
 <template lang="html">
-  <header class="py-1 px-2 d-flex position-fixed">
+  <header class="p-2 d-flex">
     <home-button />
-    <boards-dropdown v-if="board.id && (isBoardPage || isGamePage)" />
+    <boards-dropdown v-if="board.id && isBoardPage" />
     <!-- <game-dropdown v-if="isGamePage" /> -->
 
     <div class="global-actions">
diff --git a/src/pages/AuthPage.vue b/src/pages/AuthPage.vue
index 8657c7b0..eab72eb1 100644
--- a/src/pages/AuthPage.vue
+++ b/src/pages/AuthPage.vue
@@ -160,8 +160,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-.auth-page {
-  background-image: url('~/public/bg-tile.png');
+.auth-page {  
   height: calc(100vh - 46px);
 }
 </style>
diff --git a/src/pages/BoardPage.vue b/src/pages/BoardPage.vue
index 4c88c45b..0bced280 100755
--- a/src/pages/BoardPage.vue
+++ b/src/pages/BoardPage.vue
@@ -1,7 +1,6 @@
 <template lang="html">
   <div
     :class="['board px-3 pb-3', { dragging, empty }]"
-    :style="boardStyles"
   >
     <board-placeholder v-if="loading" />
 
@@ -72,18 +71,6 @@ export default {
       return this.user || isPublicBoard;
     },
 
-    boardStyles() {
-      const backgroundImage = this.backgroundUrl
-        ? `background-image: url('${this.backgroundUrl}');`
-        : null;
-
-      const backgroundColor = this.board?.backgroundColor
-        ? `background-color: ${this.board.backgroundColor};`
-        : null;
-
-      return [backgroundImage, backgroundColor].join('');
-    },
-
     boardId() {
       return this.$route.params?.id;
     },
@@ -94,6 +81,10 @@ export default {
   },
 
   watch: {
+    backgroundUrl(value) {
+      if (value) this.$bus.$emit('UPDATE_WALLPAPER', value);
+    },
+
     boardId(boardId) {
       if (boardId) this.load();
     },
@@ -121,6 +112,8 @@ export default {
 
   destroyed() {
     this.$bus.$off('LOAD_BOARD_BACKGROUND');
+    this.$bus.$emit('UPDATE_WALLPAPER', null);
+    this.$bus.$emit('UPDATE_BACKGROUND_COLOR', null);
   },
 
   methods: {
@@ -163,6 +156,8 @@ export default {
     async loadBoardBackground() {
       const url = this.board?.backgroundUrl;
 
+      if (this.board?.backgroundColor) this.$bus.$emit('UPDATE_BACKGROUND_COLOR', this.board?.backgroundColor);
+
       if (url) {
         this.backgroundUrl = url.includes('igdb')
           ? url
@@ -220,9 +215,8 @@ export default {
 .board {
   user-select: none;
   display: flex;
-  background-size: cover;
   align-items: flex-start;
-  height: 100%;
+  min-height: calc(100vh - 62px);
   width: 100vw;
   box-sizing: border-box;
   overflow-x: auto;
diff --git a/src/pages/CreateBoardPage.vue b/src/pages/CreateBoardPage.vue
index 0645aaf1..5bb1f404 100644
--- a/src/pages/CreateBoardPage.vue
+++ b/src/pages/CreateBoardPage.vue
@@ -114,7 +114,6 @@ export default {
 
 <style lang="scss" rel="stylesheet/scss" scoped>
 .create-board-page {
-  background-image: url('~/public/bg-tile.png');
   height: calc(100vh - 56px);
 }
 
diff --git a/src/pages/GamePage.vue b/src/pages/GamePage.vue
index 23ae75ae..a0d27efe 100644
--- a/src/pages/GamePage.vue
+++ b/src/pages/GamePage.vue
@@ -6,27 +6,10 @@
 <!-- TODO: Show lists/boards that the game belongs to -->
 
 <template lang="html">
-  <b-container fluid class="game-page p-2">
+  <b-container fluid class="px-2 pb-2">
     <b-skeleton v-if="loading" />
 
     <template v-else-if="game">
-      <b-row class="game-backdrop" :style="`background-image: url(${gameScrenshot})`">
-        <b-col
-          cols="12"
-        >
-          <div class="vh-100">
-            <!-- <b-img
-              :src="gameCoverUrl"
-              :alt="game.name"
-              class="cursor-pointer game-cover"
-              width="200"
-              rounded
-              @click.stop="openGameCover"
-            /> -->
-          </div>
-        </b-col>
-      </b-row>
-
       <b-row class="game">
         <b-col
           offset="2"
@@ -303,6 +286,7 @@ export default {
   },
 
   beforeDestroy() {
+    this.$bus.$emit('UPDATE_WALLPAPER', null);
     // TODO: only clear board if game being viewed is not in current board
     // if (!['game', 'board'].includes(this.$route.name)) {
       // this.$store.commit('CLEAR_BOARD');
@@ -378,6 +362,10 @@ export default {
       if (gameId) this.loadGame();
       // TODO: handle missing id, redirect? 404? search?
     },
+
+    gameScrenshot(value) {
+      if (value) this.$bus.$emit('UPDATE_WALLPAPER', value);
+    },
   },
 
   mounted() {
@@ -482,17 +470,4 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-// .game-page {
-//   // z-index: 0;
-// }
-
-.game {
-  margin-top: -50vh;
-}
-
-.game-backdrop {
-  backdrop-filter: grayscale(0.5) opacity(0.8) /* ...and on and on... */;
-  background-repeat: no-repeat;
-  background-size: contain;
-}
 </style>
diff --git a/src/pages/SearchPage.vue b/src/pages/SearchPage.vue
index 8172d987..77dc282d 100644
--- a/src/pages/SearchPage.vue
+++ b/src/pages/SearchPage.vue
@@ -22,7 +22,7 @@
       </b-col>
 
       <b-col cols="9">
-        <div class="search-page p-2">
+        <div class="p-2">
           <search-box />
           <!-- <b-alert show variant="success">
             Custom search controls go here!
@@ -134,10 +134,6 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-.search-page {
-  min-height: calc(100vh - 46px);
-}
-
 .masonry-container {
  column-count: 5;
  column-gap: 1rem;