diff --git a/src/components/GameCards/GameCardDefault.vue b/src/components/GameCards/GameCardDefault.vue
index ae6349cc..ac9ca3e3 100644
--- a/src/components/GameCards/GameCardDefault.vue
+++ b/src/components/GameCards/GameCardDefault.vue
@@ -46,9 +46,9 @@
             <b-badge
               v-for="({ bgColor, textColor, name }) in tagsApplied"
               :key="name"
-              pill
+              rounded
               class="mr-1"
-              variant="primary"
+              variant="transparent"
               :style="`background-color: ${bgColor}; color: ${textColor}`"
             >
               <small>{{ name }}</small>
diff --git a/src/components/GameCards/GameCardSearch.vue b/src/components/GameCards/GameCardSearch.vue
index 1632c220..dee198c0 100644
--- a/src/components/GameCards/GameCardSearch.vue
+++ b/src/components/GameCards/GameCardSearch.vue
@@ -2,19 +2,20 @@
   <b-card
     no-body
     :title="game.name"
-    :img-src="coverUrl"
-    :img-alt="game.name"
-    img-top
-    class="mb-2"
-    footer-class="p-0 text-center font-weight-bold bold strong"
-    @click="$router.push({ name: 'game', params: { id: game.id, slug: game.slug }})"
+    class="mb-3"
+    :footer-class="['p-1 text-center font-weight-bold bold strong', selected ? 'bg-success' : 'text-muted']"
+    @click="handleClick"
   >
-  <!-- :to="{ name: 'game', params: { id: game.id, slug: game.slug }}" -->
+    <!-- :to="{ name: 'game', params: { id: game.id, slug: game.slug }}" -->
+
+    <b-card-img
+      :src="coverUrl"
+      :img-alt="game.name"
+      :alt="game.name"
+    />
 
     <template #footer>
-      <small class="text-muted">
-        <!-- <pre>{{ selectedBoard }}</pre> -->
-        <!-- <pre>{{ selectedList }}</pre> -->
+      <small :class="[selected ? 'text-white' : 'text-muted']">
         <strong>{{ game.name }}</strong>
       </small>
     </template>
@@ -46,6 +47,10 @@ export default {
       return this.boards.find(({ id }) => id === boardId);
     },
 
+    selected() {
+      return this.selectedList?.games?.includes(this.game.id)
+    },
+
     selectedList() {
       const { listIndex } = this.$route.query;
 
@@ -54,48 +59,64 @@ export default {
   },
 
   methods: {
-    // handleClick() {
-    //   const { listIndex, boardId } = this.$route.query;
+    // isGameSelected(game.id)
+    // isGameSelected(gameId) {
+    //   console.log(this.activeBoardList?.games?.includes(gameId));
     //
-    //   if (listIndex && boardId) return this.addGameToList();
-    //
-    //   return this.user
-    //     ? this.$bus.$emit('ADD_GAME', this.game.id)
-    //     : this.$router.push({ name: 'game', params: { id: this.game.id, slug: this.game.slug }});
+    //   return this.activeBoardList?.games?.includes(gameId);
     // },
 
+    handleClick() {
+      // const activeBoardList = boards
+      const { boardId, listIndex } = this.$route?.query;
+      const hasActiveBoard = boardId && listIndex >= 0;
+
+      if (hasActiveBoard) {
+        this.addGameToList();
+      } else {
+        const { id, slug } = this.game;
+
+        this.$router.push({ name: 'game', params: { id, slug }});
+      }
+
+      // TODO: put guards when unauthed
+      // return this.user
+      //   ? this.$bus.$emit('ADD_GAME', this.game.id)
+      //   : this.$router.push({ name: 'game', params: { id: this.game.id, slug: this.game.slug }});
+    },
+
     addGameToList() {
-      return this.selectedList.games.includes(this.game.id)
+      return this.selected
         ? this.removeGame()
         : this.addGame();
     },
 
     async addGame() {
-      const boardIndex = this.boards.findIndex(({ id }) => id === this.selectedBoard.id);
+      const { boardId, listIndex } = this.$route?.query;
+      const boardIndex = this.boards.findIndex(({ id }) => id === boardId);
       const board = this.boards[boardIndex];
-      console.log(board);
 
-      // board.lists[listIndex].games.push(this.game.id);
+      board.lists[listIndex].games.push(this.game.id);
 
-      // try {
-      //   await this.$store.dispatch('SAVE_GAME_BOARD', board);
-      // } catch (e) {
-      //   // this.$bvToast.toast(`There was an error adding "${this.game.name}"`, { title: list.name, variant: 'danger' });
-      // }
+      try {
+        await this.$store.dispatch('SAVE_GAME_BOARD', board);
+      } catch (e) {
+        // this.$bvToast.toast(`There was an error adding "${this.game.name}"`, { title: list.name, variant: 'danger' });
+      }
     },
 
-    async removeGame({ listIndex, boardId }) {
-      // const boardIndex = this.boards.findIndex(({ id }) => id === boardId);
-      // const board = this.boards[boardIndex];
-      // const gameIndex = board.lists[listIndex].games.indexOf(this.gameId);
-      //
-      // board.lists[listIndex].games.splice(gameIndex, 1);
-      //
-      // try {
-      //   await this.$store.dispatch('SAVE_GAME_BOARD', board);
-      // } catch (e) {
-      //   // this.$bvToast.toast(`There was an error removing "${this.game.name}"`, { title: list.name, variant: 'danger' });
-      // }
+    async removeGame() {
+      const { boardId, listIndex } = this.$route?.query;
+      const boardIndex = this.boards.findIndex(({ id }) => id === boardId);
+      const board = this.boards[boardIndex];
+
+      board.lists[listIndex].games.splice(gameIndex, 1);
+
+      try {
+        await this.$store.dispatch('SAVE_GAME_BOARD', board);
+      } catch (e) {
+        // this.$bvToast.toast(`There was an error removing "${this.game.name}"`, { title: list.name, variant: 'danger' });
+      }
     },
   },
 };
diff --git a/src/components/SearchBox.vue b/src/components/SearchBox.vue
index 2a466c9c..480deea8 100644
--- a/src/components/SearchBox.vue
+++ b/src/components/SearchBox.vue
@@ -56,7 +56,7 @@ export default {
     search() {
       if (this.$route.query?.q === this.searchText) return;
 
-      this.$router.push({ name: 'search', query: { q: this.searchText } });
+      this.$router.push({ name: 'search', query: { ...this.$route.query, q: this.searchText } });
     },
   },
 };
diff --git a/src/pages/EditTagPage.vue b/src/pages/EditTagPage.vue
index b934ec72..3ce10877 100644
--- a/src/pages/EditTagPage.vue
+++ b/src/pages/EditTagPage.vue
@@ -64,10 +64,9 @@
       <b-button
         v-if="tag.name"
         rounded
-        block
         size="sm"
-        class="mr-2 mb-2 field"
-        variant="outline-light"
+        class="mr-2 mb-2"
+        variant="transparent"
         :style="`background-color: ${tag.bgColor}; color: ${tag.textColor}`"
       >
         {{ tag.name }}
diff --git a/src/pages/GamePage.vue b/src/pages/GamePage.vue
index cea75f27..382cb11c 100644
--- a/src/pages/GamePage.vue
+++ b/src/pages/GamePage.vue
@@ -164,6 +164,7 @@
               :key="name"
               rounded
               size="sm"
+              variant="transparent"
               class="mr-1 my-2"
               :style="`background-color: ${bgColor}; color: ${textColor}`"
               @click="$router.push({ name: 'game.tags', params: { id: game.id, slug: game.slug } })"
diff --git a/src/pages/GameTagsPage.vue b/src/pages/GameTagsPage.vue
index b8457cb5..cb66f250 100644
--- a/src/pages/GameTagsPage.vue
+++ b/src/pages/GameTagsPage.vue
@@ -55,7 +55,7 @@
               :key="name"
               rounded
               block
-              variant="outline-light"
+              variant="transparent"
               :class="{ 'd-none': !selected }"
               :disabled="saving"
               :style="`background-color: ${bgColor}; color: ${textColor}`"
@@ -74,7 +74,7 @@
             :key="name"
             rounded
             block
-            variant="outline-light"
+            variant="transparent"
             :class="{ 'd-none': selected }"
             :disabled="saving"
             :style="`background-color: ${bgColor}; color: ${textColor}`"
diff --git a/src/pages/SearchPage.vue b/src/pages/SearchPage.vue
index 8a5b1e3e..c69ffb95 100644
--- a/src/pages/SearchPage.vue
+++ b/src/pages/SearchPage.vue
@@ -1,5 +1,4 @@
 <!-- TODO: add filters -->
-<!-- TODO: add view toggle -->
 <!-- TODO: add empty state with predefined searches -->
 <!-- TODO: add pagination -->
 <template lang="html">
@@ -13,6 +12,18 @@
     <b-skeleton v-if="loading" />
 
     <b-row v-else-if="searchResults.length">
+      <b-col cols="12" class="bg-light py-2 mb-3">
+        <!-- TODO: allow to toggle boards -->
+        <b-button v-if="activeBoard" :to="{ name: 'board', params: { id: boardId } }">
+          {{ activeBoard.name }}
+        </b-button>
+
+        <!-- TODO: allow to toggle lists -->
+        <b-button v-if="activeBoard">
+          {{ activeBoardList.name }}
+        </b-button>
+      </b-col>
+
       <b-col
         cols="6"
         md="4"
@@ -59,7 +70,7 @@ export default {
   },
 
   computed: {
-    ...mapState(['board']),
+    ...mapState(['boards']),
 
     query() {
       return this.$route.query.q
@@ -75,10 +86,18 @@ export default {
       return this.$route.query?.listIndex;
     },
 
+    selectable() {
+      return Boolean(this.boardListIndex >= 0 && this.boardId);
+    },
+
+    activeBoard() {
+      return this.boards.find(({ id }) => id === this.boardId);
+    },
+
     activeBoardList() {
       if (this.boardListIndex === undefined) return [];
 
-      return this.board?.lists[this.boardListIndex];
+      return this.activeBoard?.lists[this.boardListIndex];
     },
   },
 
diff --git a/src/pages/TagsPage.vue b/src/pages/TagsPage.vue
index 902921f4..b79436c3 100644
--- a/src/pages/TagsPage.vue
+++ b/src/pages/TagsPage.vue
@@ -44,7 +44,7 @@
         @click="$router.push({ name: 'tag.edit', params: { id: index } })"
         rounded
         block
-        variant="outline-light"
+        variant="transparent"
         :style="`background-color: ${bgColor}; color: ${textColor}`"
         :key="name"
       >