diff --git a/functions/achievements-background.ts b/functions/achievements-background.ts
index 2f411a52..181e9bd6 100644
--- a/functions/achievements-background.ts
+++ b/functions/achievements-background.ts
@@ -1,9 +1,9 @@
 import { Handler } from '@netlify/functions'
 import BikeTagClient from 'biketag'
 import { Achievement, Game, Player, Tag } from 'biketag/dist/common/schema'
-import { getSupportedGames } from '../src/common/utils'
+import { getSupportedGames } from '../src/common'
+import { getBikeTagClientOpts } from './common'
 import { HttpStatusCode } from './common/constants'
-import { getBikeTagClientOpts } from './common/methods'
 import { BackgroundProcessResults } from './common/types'
 
 export const assignAchievements = async (): Promise<BackgroundProcessResults> => {
diff --git a/functions/achievements.ts b/functions/achievements.ts
index e072a222..1452905f 100644
--- a/functions/achievements.ts
+++ b/functions/achievements.ts
@@ -3,7 +3,7 @@ import { BikeTagClient } from 'biketag'
 import { getAchievementsPayload } from 'biketag/dist/common/payloads'
 import { Game } from 'biketag/dist/common/schema'
 import request from 'request'
-import { getBikeTagClientOpts, getPayloadOpts } from './common/methods'
+import { getBikeTagClientOpts, getPayloadOpts } from './common'
 
 const achievementsHandler: Handler = async (event) => {
   const biketagOpts = getBikeTagClientOpts(
diff --git a/functions/ambassadors.ts b/functions/ambassadors.ts
index 6e65def6..414f9f93 100644
--- a/functions/ambassadors.ts
+++ b/functions/ambassadors.ts
@@ -3,7 +3,7 @@ import { BikeTagClient } from 'biketag'
 import { getAmbassadorsPayload } from 'biketag/dist/common/payloads'
 import { Game } from 'biketag/dist/common/schema'
 import request from 'request'
-import { getBikeTagClientOpts, getPayloadOpts } from './common/methods'
+import { getBikeTagClientOpts, getPayloadOpts } from './common'
 
 const ambassadorsHandler: Handler = async (event) => {
   const biketagOpts = getBikeTagClientOpts(
diff --git a/functions/approve.ts b/functions/approve.ts
index aaeb0889..ea764977 100644
--- a/functions/approve.ts
+++ b/functions/approve.ts
@@ -2,15 +2,15 @@ import { Handler } from '@netlify/functions'
 import { BikeTagClient } from 'biketag'
 import { Game } from 'biketag/dist/common/schema'
 import request from 'request'
-import { HttpStatusCode } from './common/constants'
 import {
-    acceptCorsHeaders,
-    getActiveQueueForGame,
-    getBikeTagClientOpts,
-    getPayloadOpts,
-    getProfileAuthorization,
-    setNewBikeTagPost,
-} from './common/methods'
+  acceptCorsHeaders,
+  getActiveQueueForGame,
+  getBikeTagClientOpts,
+  getPayloadOpts,
+  getProfileAuthorization,
+  setNewBikeTagPost,
+} from './common'
+import { HttpStatusCode } from './common/constants'
 
 const approveHandler: Handler = async (event) => {
   /// Bailout on OPTIONS requests
diff --git a/functions/authorize.ts b/functions/authorize.ts
index 55560eaa..ccd4458b 100644
--- a/functions/authorize.ts
+++ b/functions/authorize.ts
@@ -1,8 +1,8 @@
 import { builder, Handler } from '@netlify/functions'
 import { BikeTagClient } from 'biketag'
 import request from 'request'
+import { getBikeTagClientOpts, getBikeTagHash, getPayloadOpts } from './common'
 import { HttpStatusCode } from './common/constants'
-import { getBikeTagClientOpts, getBikeTagHash, getPayloadOpts } from './common/methods'
 
 const authorizeHandler: Handler = async (event) => {
   const {
diff --git a/functions/autopost-background.ts b/functions/autopost-background.ts
index 35c59322..249c6b4e 100644
--- a/functions/autopost-background.ts
+++ b/functions/autopost-background.ts
@@ -2,13 +2,13 @@ import { Handler } from '@netlify/functions'
 import BikeTagClient from 'biketag'
 import { Game } from 'biketag/dist/common/schema'
 import request from 'request'
-import { HttpStatusCode } from './common/constants'
 import {
-    getActiveQueueForGame,
-    getBikeTagClientOpts,
-    getWinningTagForCurrentRound,
-    setNewBikeTagPost,
-} from './common/methods'
+  getActiveQueueForGame,
+  getBikeTagClientOpts,
+  getWinningTagForCurrentRound,
+  setNewBikeTagPost,
+} from './common'
+import { HttpStatusCode } from './common/constants'
 import { BackgroundProcessResults } from './common/types'
 
 export const autoPostNewBikeTags = async (): Promise<BackgroundProcessResults> => {
diff --git a/functions/autopost-clear.ts b/functions/autopost-clear.ts
index b644cd64..a1a49832 100644
--- a/functions/autopost-clear.ts
+++ b/functions/autopost-clear.ts
@@ -1,13 +1,13 @@
 import { Handler } from '@netlify/functions'
 import BikeTagClient from 'biketag'
 import { Game } from 'biketag/dist/common/schema'
-import { HttpStatusCode } from './common/constants'
 import {
   archiveAndClearQueue,
   getActiveQueueForGame,
   getBikeTagClientOpts,
   isRequestAllowed,
-} from './common/methods'
+} from './common'
+import { HttpStatusCode } from './common/constants'
 import { BackgroundProcessResults } from './common/types'
 
 export const autoClearQueue = async (event): Promise<BackgroundProcessResults> => {
diff --git a/functions/autopost-notify.ts b/functions/autopost-notify.ts
index 3d0df549..e1416e1f 100644
--- a/functions/autopost-notify.ts
+++ b/functions/autopost-notify.ts
@@ -1,12 +1,12 @@
 import { Handler } from '@netlify/functions'
 import BikeTagClient from 'biketag'
 import { Game } from 'biketag/dist/common/schema'
-import { HttpStatusCode } from './common/constants'
 import {
-    getBikeTagClientOpts,
-    isRequestAllowed,
-    sendNewBikeTagNotifications,
-} from './common/methods'
+  getBikeTagClientOpts,
+  isRequestAllowed,
+  sendNewBikeTagNotifications,
+} from './common'
+import { HttpStatusCode } from './common/constants'
 import { BackgroundProcessResults } from './common/types'
 
 export const autoNotifyNewBikeTagPosted = async (event): Promise<BackgroundProcessResults> => {
diff --git a/functions/common/index.ts b/functions/common/index.ts
new file mode 100644
index 00000000..3e00069d
--- /dev/null
+++ b/functions/common/index.ts
@@ -0,0 +1,4 @@
+export * from './constants'
+export * from './methods'
+export * from './types'
+
diff --git a/functions/common/methods.ts b/functions/common/methods.ts
index 525e890e..54d07998 100644
--- a/functions/common/methods.ts
+++ b/functions/common/methods.ts
@@ -14,13 +14,13 @@ import nodemailer from 'nodemailer'
 import { extname, join } from 'path'
 import qs from 'qs'
 import request from 'request'
-import { BikeTagProfile } from '../../src/common/types'
 import {
   getDomainInfo,
   getImgurImageSized,
   getTagDate,
   isAuthenticationEnabled,
-} from '../../src/common/utils'
+} from '../../src/common'
+import { BikeTagProfile } from '../../src/common/types'
 import { ErrorMessage, HttpStatusCode } from './constants'
 import { BackgroundProcessResults, activeQueue } from './types'
 
diff --git a/functions/current.ts b/functions/current.ts
index ef8a1973..d8f10fa6 100644
--- a/functions/current.ts
+++ b/functions/current.ts
@@ -3,9 +3,9 @@ import axios from 'axios'
 import { BikeTagClient } from 'biketag'
 import { Game } from 'biketag/dist/common/schema'
 import request from 'request'
-import { getDomainInfo, getImgurImageSized } from '../src/common/utils'
+import { getDomainInfo, getImgurImageSized } from '../src/common'
+import { getBikeTagClientOpts, getPayloadOpts } from './common'
 import { HttpStatusCode } from './common/constants'
-import { getBikeTagClientOpts, getPayloadOpts } from './common/methods'
 
 const currentTagHandler = async (event) => {
   const biketagOpts = getBikeTagClientOpts(
diff --git a/functions/game.ts b/functions/game.ts
index b8fd3f03..a0d992c9 100644
--- a/functions/game.ts
+++ b/functions/game.ts
@@ -2,7 +2,7 @@ import { builder, Handler } from '@netlify/functions'
 import { BikeTagClient } from 'biketag'
 import { getGamePayload } from 'biketag/dist/common/payloads'
 import request from 'request'
-import { getBikeTagClientOpts, getPayloadOpts } from './common/methods'
+import { getBikeTagClientOpts, getPayloadOpts } from './common'
 
 const gameHandler: Handler = async (event) => {
   const biketagOpts = getBikeTagClientOpts(
diff --git a/functions/players.ts b/functions/players.ts
index dbdabe12..f69049eb 100644
--- a/functions/players.ts
+++ b/functions/players.ts
@@ -3,7 +3,7 @@ import { BikeTagClient } from 'biketag'
 import { getPlayersPayload } from 'biketag/dist/common/payloads'
 import { Game } from 'biketag/dist/common/schema'
 import request from 'request'
-import { getBikeTagClientOpts, getPayloadOpts } from './common/methods'
+import { getBikeTagClientOpts, getPayloadOpts } from './common'
 
 const playersHandler: Handler = async (event) => {
   const biketagOpts = getBikeTagClientOpts(
diff --git a/functions/profile.ts b/functions/profile.ts
index 61e6c875..80984c63 100644
--- a/functions/profile.ts
+++ b/functions/profile.ts
@@ -1,13 +1,13 @@
 import { Handler } from '@netlify/functions'
-import { getDomainInfo } from '../src/common/utils'
-import { ErrorMessage, HttpStatusCode } from './common/constants'
+import { getDomainInfo } from '../src/common'
 import {
   acceptCorsHeaders,
   getBikeTagAuth0Profile,
   getBikeTagPlayerProfile,
   getProfileAuthorization,
   handleAuth0ProfileRequest,
-} from './common/methods'
+} from './common'
+import { ErrorMessage, HttpStatusCode } from './common/constants'
 
 const profileHandler: Handler = async (event) => {
   /// Bailout on OPTIONS requests
diff --git a/functions/queue.ts b/functions/queue.ts
index f314bd0b..74dee327 100644
--- a/functions/queue.ts
+++ b/functions/queue.ts
@@ -3,7 +3,7 @@ import { BikeTagClient } from 'biketag'
 import { getQueuePayload } from 'biketag/dist/common/payloads'
 import { Game } from 'biketag/dist/common/schema'
 import request from 'request'
-import { getBikeTagClientOpts, getPayloadOpts } from './common/methods'
+import { getBikeTagClientOpts, getPayloadOpts } from './common'
 
 const queueHandler: Handler = async (event) => {
   const biketagOpts = getBikeTagClientOpts(
diff --git a/functions/recent.ts b/functions/recent.ts
index b77db608..202bff24 100644
--- a/functions/recent.ts
+++ b/functions/recent.ts
@@ -3,7 +3,7 @@ import { BikeTagClient } from 'biketag'
 import { getTagsPayload } from 'biketag/dist/common/payloads'
 import { Game } from 'biketag/dist/common/schema'
 import request from 'request'
-import { getBikeTagClientOpts, getPayloadOpts } from './common/methods'
+import { getBikeTagClientOpts, getPayloadOpts } from './common'
 
 const recentHandler: Handler = async (event) => {
   const response = {
diff --git a/functions/settings.ts b/functions/settings.ts
index 5c02f452..1678c982 100644
--- a/functions/settings.ts
+++ b/functions/settings.ts
@@ -3,7 +3,7 @@ import { BikeTagClient } from 'biketag'
 import { getSettingsPayload } from 'biketag/dist/common/payloads'
 import { Game } from 'biketag/dist/common/schema'
 import request from 'request'
-import { getBikeTagClientOpts, getPayloadOpts } from './common/methods'
+import { getBikeTagClientOpts, getPayloadOpts } from './common'
 
 const setttingsHandler: Handler = async (event) => {
   const biketagOpts = getBikeTagClientOpts(
diff --git a/functions/submission-created.ts b/functions/submission-created.ts
index f7f2b08c..1a45b7b6 100644
--- a/functions/submission-created.ts
+++ b/functions/submission-created.ts
@@ -1,15 +1,15 @@
 import { BikeTagClient } from 'biketag'
 import { Ambassador, Game, Tag } from 'biketag/dist/common/schema'
 import request from 'request'
-import { stringifyNumber } from '../src/common/utils'
-import { HttpStatusCode } from './common/constants'
+import { stringifyNumber } from '../src/common'
 import {
-    defaultLogo,
-    getBikeTagClientOpts,
-    getEncodedExpiry,
-    getSanityImageUrl,
-    sendEmailsToAmbassadors,
-} from './common/methods'
+  defaultLogo,
+  getBikeTagClientOpts,
+  getEncodedExpiry,
+  getSanityImageUrl,
+  sendEmailsToAmbassadors,
+} from './common'
+import { HttpStatusCode } from './common/constants'
 
 export const handler = async (event) => {
   const body = JSON.parse(event.body)
diff --git a/functions/tags.ts b/functions/tags.ts
index 443b85c9..9665c226 100644
--- a/functions/tags.ts
+++ b/functions/tags.ts
@@ -3,7 +3,7 @@ import { BikeTagClient } from 'biketag'
 import { getTagsPayload } from 'biketag/dist/common/payloads'
 import { Game } from 'biketag/dist/common/schema'
 import request from 'request'
-import { getBikeTagClientOpts, getPayloadOpts } from './common/methods'
+import { getBikeTagClientOpts, getPayloadOpts } from './common'
 
 const tagsHandler: Handler = async (event) => {
   const biketagOpts = getBikeTagClientOpts(
diff --git a/functions/token.ts b/functions/token.ts
index 4f6fbea5..edf801b3 100644
--- a/functions/token.ts
+++ b/functions/token.ts
@@ -1,8 +1,8 @@
 import { Handler } from '@netlify/functions'
 import { BikeTagClient } from 'biketag'
 import request from 'request'
+import { acceptCorsHeaders, getBikeTagClientOpts, getPayloadAuthorization } from './common'
 import { HttpStatusCode } from './common/constants'
-import { acceptCorsHeaders, getBikeTagClientOpts, getPayloadAuthorization } from './common/methods'
 
 const tokenHandler: Handler = async (event) => {
   /// Bailout on OPTIONS requests
diff --git a/src/App.vue b/src/App.vue
index ff62418a..ccbb71bf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,8 +10,8 @@
     <meta property="og:image" :content="logo" />
   </Head>
   <div :class="isWhiteBackground">
-    <div :class="`spacer-top ${isWhiteBackground}`"></div>
-    <bike-tag-menu variant="top" />
+    <div :class="`${isNotLanding ? 'spacer-top' : 'spacer-less'} ${isWhiteBackground}`"></div>
+    <bike-tag-menu v-if="isNotLanding" variant="top" />
     <confetti-explosion v-if="showConfetti" />
     <service-worker />
     <router-view />
@@ -23,12 +23,12 @@
 </template>
 
 <script setup name="App">
-import { ref, inject, computed, onMounted, watch, nextTick } from 'vue'
-import { useRouter } from 'vue-router'
 import { useBikeTagStore } from '@/store/index'
 import { useAuth0 } from '@auth0/auth0-vue'
-import { debug, isAuthenticationEnabled } from './common/utils'
+import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
 import ConfettiExplosion from 'vue-confetti-explosion'
+import { useRouter } from 'vue-router'
+import { debug, isAuthenticationEnabled } from './common'
 
 // componets
 import BikeTagMenu from '@/components/BikeTagMenu.vue'
@@ -189,6 +189,9 @@ created()
 .spacer-bottom {
   margin-bottom: 50px;
 }
+.spacer-less {
+  height: 0;
+}
 
 .spacer-top {
   height: 85px;
diff --git a/src/app.ts b/src/app.ts
index 78af5f93..5c679910 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -27,7 +27,7 @@ import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
 import 'bootstrap/dist/css/bootstrap.css'
 import 'highlight.js/styles/monokai.css'
 import 'vue-toast-notification/dist/theme-sugar.css'
-import { debug, isAuthenticationEnabled } from './common/utils'
+import { debug, isAuthenticationEnabled } from './common'
 
 class BikeTagApp {
   protected emitter
diff --git a/src/assets/styles/style.scss b/src/assets/styles/style.scss
index a274e21c..572aa458 100644
--- a/src/assets/styles/style.scss
+++ b/src/assets/styles/style.scss
@@ -42,6 +42,22 @@ body {
     color: black;
   }
 
+  .search-bar {
+    display: flex;
+    margin-bottom: 25px;
+
+    .biketag__button {
+      padding-inline: 15px;
+      min-height: auto;
+      background-size: contain;
+      color: $btn-primary-text-color;
+    }
+  }
+
+  .clear-search-button {
+    color: $btn-primary-text-color;
+  }
+
   @keyframes spin {
     from {
       transform: rotate(0deg);
@@ -182,7 +198,6 @@ body {
       font-weight: $tag-player-font-weight;
       font-size: $tag-player-font-size;
       line-height: $tag-player-line-height;
-      text-transform: uppercase;
     }
 
     .tag-date {
diff --git a/src/common/index.ts b/src/common/index.ts
index 9d6416e1..3cb1a5c9 100644
--- a/src/common/index.ts
+++ b/src/common/index.ts
@@ -1,4 +1,4 @@
 export * from './constants'
+export * from './methods'
 export * from './types'
-export * from './utils'
 export * from './uuid'
diff --git a/src/common/utils.ts b/src/common/methods.ts
similarity index 99%
rename from src/common/utils.ts
rename to src/common/methods.ts
index 5c11af69..17c5b6aa 100644
--- a/src/common/utils.ts
+++ b/src/common/methods.ts
@@ -13,7 +13,7 @@ import {
   DomainInfo,
   deca,
   special,
-} from '../../src/common'
+} from '.'
 
 export const stringifyNumber = (n: number): string => {
   if (n < 20) return special[n]
diff --git a/src/components/BikeDex.vue b/src/components/BikeDex.vue
index 1ab8e957..be9634e1 100644
--- a/src/components/BikeDex.vue
+++ b/src/components/BikeDex.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script setup name="BikeDex">
-import { getTagDate } from '@/common/utils'
+import { getTagDate } from '@/common'
 
 // props
 const props = defineProps({
diff --git a/src/components/BikeTagCamera.vue b/src/components/BikeTagCamera.vue
index 321bc000..77a4aa80 100644
--- a/src/components/BikeTagCamera.vue
+++ b/src/components/BikeTagCamera.vue
@@ -57,8 +57,8 @@
 </template>
 
 <script setup name="BikeTagCamera">
-import { ref, onMounted } from 'vue'
-import { exportHtmlToDownload } from '@/common/utils'
+import { exportHtmlToDownload } from '@/common'
+import { onMounted, ref } from 'vue'
 
 const props = defineProps({
   title: {
diff --git a/src/components/BikeTagFooter.vue b/src/components/BikeTagFooter.vue
index c51fde00..818376f2 100644
--- a/src/components/BikeTagFooter.vue
+++ b/src/components/BikeTagFooter.vue
@@ -84,13 +84,13 @@
 </template>
 
 <script setup name="BikeTagFooter">
-import { ref, computed, onBeforeUnmount, nextTick } from 'vue'
-import { useRouter } from 'vue-router'
-import { useBikeTagStore } from '@/store/index'
-import HintIcon from '@/assets/images/hint-icon.svg'
 import CloseRounded from '@/assets/images/close-rounded.svg'
+import HintIcon from '@/assets/images/hint-icon.svg'
+import { exportHtmlToDownload } from '@/common'
+import { useBikeTagStore } from '@/store/index'
+import { computed, onBeforeUnmount, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { exportHtmlToDownload } from '@/common/utils'
+import { useRouter } from 'vue-router'
 
 // componets
 import BikeTagButton from '@/components/BikeTagButton.vue'
diff --git a/src/components/BikeTagMenu.vue b/src/components/BikeTagMenu.vue
index d98fbdec..8994e291 100644
--- a/src/components/BikeTagMenu.vue
+++ b/src/components/BikeTagMenu.vue
@@ -145,12 +145,12 @@
 </template>
 
 <script setup name="BikeTagMenu">
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useAuth0 } from '@auth0/auth0-vue'
-import { useRouter, useRoute } from 'vue-router'
-import { debug, isOnline, isAuthenticationEnabled } from '../common/utils'
-import { useBikeTagStore } from '../store/index'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import { debug, isAuthenticationEnabled, isOnline } from '../common'
+import { useBikeTagStore } from '../store/index'
 
 // components
 import BikeTagButton from './BikeTagButton.vue'
diff --git a/src/components/QueueApprove.vue b/src/components/QueueApprove.vue
index b433c4dd..290b6558 100644
--- a/src/components/QueueApprove.vue
+++ b/src/components/QueueApprove.vue
@@ -105,19 +105,19 @@
 </template>
 
 <script setup name="QueueApprove">
-import { ref, computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { stringifyNumber } from '@/common'
 import { useBikeTagStore } from '@/store/index'
-import { Controller, Pagination } from 'swiper/modules'
 import 'swiper/css/bundle'
-import { stringifyNumber } from '@/common/utils'
+import { Controller, Pagination } from 'swiper/modules'
+import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
 
 // components
-import { Swiper, SwiperSlide } from 'swiper/vue'
 import BikeTag from '@/components/BikeTag.vue'
-import BikeTagQueue from '@/components/BikeTagQueue.vue'
 import BikeTagButton from '@/components/BikeTagButton.vue'
+import BikeTagQueue from '@/components/BikeTagQueue.vue'
+import { Swiper, SwiperSlide } from 'swiper/vue'
 
 // data
 const emit = defineEmits(['submit'])
diff --git a/src/components/QueueFound.vue b/src/components/QueueFound.vue
index d054ac7c..fc8cd8f0 100644
--- a/src/components/QueueFound.vue
+++ b/src/components/QueueFound.vue
@@ -135,20 +135,20 @@
 </template>
 
 <script setup name="QueueFoundTag">
-import { ref, inject, computed, nextTick, onMounted, onBeforeUnmount, watch } from 'vue'
+import Pin from '@/assets/images/pin.svg'
+import { debug, isAuthenticationEnabled, isGmapsEnabled, isPointInPolygon } from '@/common'
 import { useBikeTagStore } from '@/store/index'
 import { useAuth0 } from '@auth0/auth0-vue'
-import { debug, isPointInPolygon, isAuthenticationEnabled, isGmapsEnabled } from '@/common/utils'
-import { useI18n } from 'vue-i18n'
 import exifr from 'exifr'
-import Pin from '@/assets/images/pin.svg'
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 // import heic2any from 'heic2any';
 
 // components
-import Loading from 'vue-loading-overlay'
 import BikeTagButton from '@/components/BikeTagButton.vue'
 import BikeTagInput from '@/components/BikeTagInput.vue'
 import BikeTagMap from '@/components/BikeTagMap.vue'
+import Loading from 'vue-loading-overlay'
 
 // props
 const props = defineProps({
diff --git a/src/components/QueueMystery.vue b/src/components/QueueMystery.vue
index 967cbc93..6755b92c 100644
--- a/src/components/QueueMystery.vue
+++ b/src/components/QueueMystery.vue
@@ -95,12 +95,12 @@
 </template>
 
 <script setup name="QueueMysteryTag">
-import { ref, inject, computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { ordinalSuffixOf } from '@/common'
 import { useBikeTagStore } from '@/store/index'
-import { ordinalSuffixOf } from '@/common/utils'
 import exifr from 'exifr'
+import { computed, inject, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
 // import heic2any from 'heic2any';
 
 // components
diff --git a/src/components/QueuePosted.vue b/src/components/QueuePosted.vue
index df74a644..519d7471 100644
--- a/src/components/QueuePosted.vue
+++ b/src/components/QueuePosted.vue
@@ -1,8 +1,8 @@
 <script setup name="QueuePosted">
-import { ref, computed, onMounted, nextTick } from 'vue'
-import { useRouter } from 'vue-router'
+import { debug } from '@/common'
 import { useBikeTagStore } from '@/store/index'
-import { debug } from '@/common/utils'
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
 // components
 import BikeTagButton from '@/components/BikeTagButton.vue'
diff --git a/src/components/Searchable.vue b/src/components/Searchable.vue
new file mode 100644
index 00000000..f5a80797
--- /dev/null
+++ b/src/components/Searchable.vue
@@ -0,0 +1,201 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div v-if="items.length" class="container">
+    <div class="search-bar">
+      <b-form-input v-model="searchBoxInput" type="search" @keyup.enter="performSearch" />
+      <bike-tag-button @click="performSearch">
+        {{ t(`components.searchable.search`) }}
+      </bike-tag-button>
+    </div>
+    <slot name="content" :displayed-items="displayedItems"></slot>
+    <p v-if="!searchResults.length && searchString">
+      {{ t(`pages.${itemType}.not_found`) }}
+    </p>
+    <bike-tag-button
+      v-if="route.name === searchRoute"
+      class="clear-search-button"
+      @click="clearSearch"
+    >
+      {{ t(`pages.${itemType}.exit_search`) }}
+    </bike-tag-button>
+    <b-form-group>
+      <select v-model="perPage" class="form-select mb-2 m-auto" @change="handlePerPageSelect">
+        <option v-for="opt in perPageOptions" :key="opt" :value="opt">
+          {{ opt }}
+        </option>
+      </select>
+    </b-form-group>
+    <b-pagination
+      :model-value="currentPage"
+      :total-rows="searchResults.length"
+      :per-page="perPage"
+      align="center"
+      @page-click="changePage"
+    ></b-pagination>
+  </div>
+  <div v-else class="container mt-4 mb-5">
+    <span class="body-text">
+      {{ t(`pages.${itemType}.empty`) }}
+    </span>
+  </div>
+  <loading v-if="loadingActive" v-model:active="loadingActive" :is-full-page="true">
+    <img class="spinner" src="@/assets/images/SpinningBikeV1.svg" alt="Loading..." />
+  </loading>
+</template>
+
+<script setup name="Searchable">
+import { useBikeTagStore } from '@/store/index'
+import { computed, onMounted, ref, watch } from 'vue'
+import 'vue-loading-overlay/dist/css/index.css'
+import { useRoute, useRouter } from 'vue-router'
+
+// components
+import BikeTagButton from '@/components/BikeTagButton.vue'
+import { useI18n } from 'vue-i18n'
+import Loading from 'vue-loading-overlay'
+
+// props
+const props = defineProps({
+  itemType: {
+    type: String,
+    required: true,
+  },
+  items: {
+    type: Array,
+    required: true,
+  },
+  searchAlgo: {
+    // function that takes a list of items and a search string
+    // and returns a filtered, sorted list
+    type: Function,
+    required: true,
+  },
+  mainRoute: {
+    type: String,
+    required: true,
+  },
+  searchRoute: {
+    type: String,
+    required: true,
+  },
+})
+
+// data
+const perPageOptions = ['10', '100', '1000']
+const defaultQuery = { perPage: perPageOptions[0] }
+const router = useRouter()
+const route = useRoute()
+const currentPage = ref(route.query?.currentPage ? parseInt(route.query?.currentPage) : 1)
+const perPage = ref(route.query?.perPage ? parseInt(route.query?.perPage) : defaultQuery.perPage)
+const searchString = ref(route.query?.searchString || '')
+const searchBoxInput = ref(searchString.value)
+const reachedLoadingTimeout = ref(false)
+const { t } = useI18n()
+const store = useBikeTagStore()
+
+onMounted(() => {
+  validateQuery()
+  setTimeout(() => {
+    reachedLoadingTimeout.value = true
+  }, 1000)
+})
+
+// computed
+const searchResults = computed(() => {
+  if (!searchString.value) {
+    return props.items
+  } else {
+    return props.searchAlgo(props.items, searchString.value)
+  }
+})
+const displayedItems = computed(() =>
+  searchResults.value.slice(
+    (currentPage.value - 1) * perPage.value,
+    currentPage.value * perPage.value,
+  ),
+)
+const loadingActive = computed(() => store.fetchingData && !reachedLoadingTimeout.value)
+
+// methods
+const changePage = (_event, pageNumber) => {
+  searchBoxInput.value = searchString.value
+  currentPage.value = pageNumber
+  router.push({
+    query: {
+      ...defaultQuery,
+      ...route.query,
+      currentPage: pageNumber,
+    },
+  })
+}
+const resetPageNumber = () => {
+  searchBoxInput.value = searchString.value
+  currentPage.value = 1
+  router.replace({
+    query: {
+      ...defaultQuery,
+      ...route.query,
+      currentPage: currentPage.value,
+    },
+  })
+}
+const handlePerPageSelect = () => {
+  searchBoxInput.value = searchString.value
+  currentPage.value = 1
+  router.push({
+    query: {
+      ...defaultQuery,
+      ...route.query,
+      perPage: perPage.value,
+      currentPage: currentPage.value,
+    },
+  })
+}
+const clearSearch = () => {
+  searchBoxInput.value = ''
+  searchString.value = ''
+  router.push({ name: props.mainRoute, query: { perPage: perPage.value } })
+}
+const performSearch = () => {
+  searchString.value = searchBoxInput.value
+  if (!searchString.value) {
+    router.push({ name: props.mainRoute, query: { perPage: perPage.value } })
+  } else {
+    router
+      .push({
+        name: props.searchRoute,
+        query: {
+          ...defaultQuery,
+          ...route.query,
+          searchString: searchString.value,
+        },
+      })
+      .then(resetPageNumber)
+  }
+}
+const validateQuery = () => {
+  if (!perPageOptions.includes(String(perPage.value))) {
+    perPage.value = defaultQuery.perPage
+    router.replace({ query: { ...route.query, perPage: perPage.value } }).then(resetPageNumber)
+  } else if (
+    isNaN(currentPage.value) ||
+    (currentPage.value !== 1 && displayedItems.value.length === 0)
+  ) {
+    resetPageNumber()
+  }
+}
+
+// watch
+watch(
+  () => route,
+  () => {
+    // reset all data that comes from the URL
+    currentPage.value = route.query?.currentPage ? parseInt(route.query?.currentPage) : 1
+    perPage.value = route.query?.perPage ? parseInt(route.query?.perPage) : defaultQuery.perPage
+    searchString.value = route.query?.searchString || ''
+    searchBoxInput.value = searchString.value
+    validateQuery()
+  },
+  { deep: true },
+)
+</script>
diff --git a/src/components/ServiceWorker.vue b/src/components/ServiceWorker.vue
index a203c739..85e0fab1 100644
--- a/src/components/ServiceWorker.vue
+++ b/src/components/ServiceWorker.vue
@@ -10,11 +10,10 @@
 </template>
 
 <script setup name="ServiceWorker">
-import { computed } from 'vue'
+import { debug, getSanityImageResizedSize } from '@/common'
 import { useBikeTagStore } from '@/store/index'
 import { useRegisterSW } from 'virtual:pwa-register/vue'
-import { getSanityImageResizedSize } from '@/common/utils'
-import { debug } from '@/common/utils'
+import { computed } from 'vue'
 
 // props
 const props = defineProps({
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 980d2ef8..53760067 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -60,6 +60,9 @@
     },
     "games": {
       "games_title": "Featuring games from all over the world!"
+    },
+    "searchable": {
+      "search": "Search"
     }
   },
   "pages": {
@@ -70,6 +73,24 @@
       "send_hello_email": "Send an email to ask about how you can start one!",
       "game_not_exists": "Uh, oh. Does this game not exist.. yet?"
     },
+    "players": {
+      "not_found": "no one by that name 'round here.",
+      "empty": "Players will show up here when they join!",
+      "exit_search": "Back to All Players",
+      "loading": "Loading Players"
+    },
+    "biketags": {
+      "not_found": "no tags matching that search.",
+      "empty": "Completed BikeTag Posts will show up here once round #1 has been found!",
+      "exit_search": "Back to All Tags",
+      "loading": "Loading Bike Tags"
+    },
+    "player": {
+      "not_found": "no tags for this player matching that search.",
+      "empty": "This player has no tags.",
+      "exit_search": "Back to All of This Player's Tags",
+      "loading": "Loading Tags"
+    },
     "login":{
       "player": "BikeTag Player Login",
       "description": "The BikeTag Game doesn't require you to log in to play the game, but creating a login does give you the opportunity to secure your player name and prevent others from using it.",
diff --git a/src/index.ts b/src/index.ts
index 77165105..21948334 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,8 +1,8 @@
 import { App, Plugin } from 'vue'
 
+import { getBikeTagClientOpts } from './common'
 import { BikeTagDefaults, BikeTagEnv } from './common/constants'
 import * as Types from './common/types'
-import { getBikeTagClientOpts } from './common/utils'
 import { BikeTagStore, initBikeTagStore, useBikeTagStore } from './store'
 
 import { dynamicFontDirective } from './directives'
diff --git a/src/router/index.ts b/src/router/index.ts
index f85fc2f9..bfd6ec12 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -16,7 +16,7 @@ import Round from '@/views/Round.vue'
 import Worldwide from '@/views/Worldwide.vue'
 import { authGuard } from '@auth0/auth0-vue'
 import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'
-import { debug, isAuthenticationEnabled } from '../common/utils'
+import { debug, isAuthenticationEnabled } from '../common'
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -30,20 +30,35 @@ const routes: Array<RouteRecordRaw> = [
     component: Home,
   },
   {
-    path: '/biketags/:currentPage?',
+    path: '/biketags',
     name: 'BikeTags',
     component: BikeTags,
   },
   {
-    path: '/players/:currentPage?',
+    path: '/biketags/search',
+    name: 'BikeTag Search',
+    component: BikeTags,
+  },
+  {
+    path: '/players',
     name: 'Players',
     component: Players,
   },
   {
-    path: '/player/:name/:currentPage?',
+    path: '/players/search',
+    name: 'Player Search',
+    component: Players,
+  },
+  {
+    path: '/player/:name',
     name: 'Player',
     component: Player,
   },
+  {
+    path: '/player/:name/search',
+    name: 'Player Tag Search',
+    component: Player,
+  },
   {
     path: '/play',
     name: 'Play',
diff --git a/src/store/index.ts b/src/store/index.ts
index be5b840d..52378b3a 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,8 +1,10 @@
 import BikeTagClient from 'biketag'
 import { Achievement, Game, Player, Tag } from 'biketag/dist/common/schema'
 import { defineStore } from 'pinia'
-import { BikeTagDefaults, BikeTagStoreState, BiketagQueueFormSteps } from '../common'
 import {
+  BikeTagDefaults,
+  BikeTagStoreState,
+  BiketagQueueFormSteps,
   debug,
   encodeBikeTagString,
   getApiUrl,
@@ -16,7 +18,7 @@ import {
   getSanityImageUrl,
   getSupportedGames,
   setProfileCookie,
-} from '../common/utils'
+} from '../common'
 
 let client: BikeTagClient
 let gameName: string
diff --git a/src/views/Approve.vue b/src/views/Approve.vue
index 2e45f93c..742fc02c 100644
--- a/src/views/Approve.vue
+++ b/src/views/Approve.vue
@@ -38,10 +38,10 @@
 </template>
 
 <script setup name="ApproveBikeTagView">
-import { ref, inject, computed, onMounted } from 'vue'
 import { useBikeTagStore } from '@/store/index'
+import { computed, inject, onMounted, ref } from 'vue'
 // import { useTimer } from 'vue-timer-hook'
-import { sendNetlifyForm, sendNetlifyError } from '@/common/utils'
+import { sendNetlifyError, sendNetlifyForm } from '@/common'
 import { useAuth0 } from '@auth0/auth0-vue'
 import { useRouter } from 'vue-router'
 
diff --git a/src/views/BikeTags.vue b/src/views/BikeTags.vue
index 2bdff798..7b3b9dc4 100644
--- a/src/views/BikeTags.vue
+++ b/src/views/BikeTags.vue
@@ -1,100 +1,65 @@
 <template>
-  <div v-if="totalCount > 1" class="container">
-    <b-pagination
-      v-model="currentPage"
-      :total-rows="totalCount"
-      :per-page="perPage"
-      aria-controls="itemList"
-      align="center"
-      @page-click="changePage"
-    ></b-pagination>
-    <div class="small-margin">
-      <div v-for="tag in tagsList" :key="tag.tagnumber">
-        <bike-tag :key="tag.tagnumber" :tag="tag" :reverse="true" />
+  <Searchable
+    item-type="biketags"
+    :items="store.getTags.slice(1)"
+    :search-algo="tagSearch"
+    main-route="BikeTags"
+    search-route="BikeTag Search"
+  >
+    <template #content="{ displayedItems }">
+      <div class="small-margin">
+        <div v-for="tag in displayedItems" :key="tag.tagnumber">
+          <bike-tag :tag="tag" :reverse="true" />
+        </div>
       </div>
-    </div>
-    <b-form-group>
-      <select v-model="perPage" class="form-select mb-2 m-auto" @change="resetCurrentPage">
-        <option v-for="i in 3" :key="Math.pow(10, i)" :value="Math.pow(10, i)">
-          {{ Math.pow(10, i) }}
-        </option>
-      </select>
-    </b-form-group>
-    <b-pagination
-      v-model="currentPage"
-      :total-rows="totalCount"
-      :per-page="perPage"
-      aria-controls="itemList"
-      align="center"
-      @page-click="changePage"
-    ></b-pagination>
-  </div>
-  <div v-else class="container mt-4 mb-5">
-    <span class="body-text">
-      completed BikeTag Posts will show up here once round #1 has been found!
-    </span>
-  </div>
-  <loading v-if="tagsAreLoading" v-model:active="tagsAreLoading" :is-full-page="true">
-    <img class="spinner" src="@/assets/images/SpinningBikeV1.svg" alt="Loading..." />
-  </loading>
+    </template>
+  </Searchable>
 </template>
 
 <script setup name="BikeTagsView">
-import { ref, computed, watch } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { useBikeTagStore } from '@/store/index'
-import 'vue-loading-overlay/dist/css/index.css'
-
-// components
+import Searchable from '@/components/Searchable.vue'
 import BikeTag from '@/components/BikeTag.vue'
-import Loading from 'vue-loading-overlay'
+import { useBikeTagStore } from '@/store/index'
 
-// data
-const router = useRouter()
-const route = useRoute()
-const currentPage = ref(route.params?.currentPage.length ? parseInt(route.params?.currentPage) : 1)
-const perPage = ref(10)
-const tagsAreLoading = ref(true)
-const tagsLoaded = ref([])
 const store = useBikeTagStore()
 
-// computed
-const getTags = computed(() => store.getTags)
-const tagsList = computed(() =>
-  getTags.value.slice(
-    (currentPage.value - 1) * perPage.value + (currentPage.value === 1 ? 1 : 0), // exclude current mystery tag
-    currentPage.value * perPage.value, // exclude current mystery tag
-  ),
-)
-const totalCount = computed(() => getTags.value.length)
+const tagSearch = (tags, searchString) => {
+  const query = searchString.toLowerCase()
 
-// methods
-function resetCurrentPage() {
-  startLoading()
-  currentPage.value = 1
-}
-function changePage(event, pageNumber) {
-  startLoading()
-  router.push('/biketags/' + pageNumber)
-}
-function startLoading() {
-  tagsLoaded.value = []
-  tagsAreLoading.value = true
-  if (perPage.value <= 10) {
-    setTimeout(() => {
-      tagsAreLoading.value = false
-    }, 500)
-  }
-}
+  const searchedNumber = query.match(/^#?(\d+)$/)?.[1]
+  const foundByNumber = []
 
-// created
-startLoading()
+  const splitQuery = query.split(/\s+/)
+  const tagToScore = new Map()
+  for (const tag of tags) {
+    if (searchedNumber && !foundByNumber.length && String(tag.tagnumber) === searchedNumber) {
+      foundByNumber[0] = tag
+      continue
+    }
 
-// watch
-watch(
-  () => 'route.params.currentPage',
-  (val) => {
-    currentPage.value = Number(val)
-  },
-)
+    const stringFields = [
+      tag.mysteryPlayer?.toLowerCase(),
+      tag.foundPlayer?.toLowerCase(),
+      tag.hint?.toLowerCase(),
+      tag.foundLocation?.toLowerCase(),
+    ]
+    let score = 0
+    for (const field of stringFields) {
+      if (field?.includes(query)) {
+        score++
+      }
+      for (const word of splitQuery) {
+        if (field?.includes(word)) {
+          score++
+        }
+      }
+    }
+    tagToScore.set(tag, score)
+  }
+
+  const sortedResults = tags
+    .filter((tag) => tagToScore.get(tag) > 0)
+    .toSorted((a, b) => tagToScore.get(a) - tagToScore.get(b))
+  return foundByNumber.concat(sortedResults)
+}
 </script>
diff --git a/src/views/HowToPlay.vue b/src/views/HowToPlay.vue
index 7c15bb10..f8387977 100644
--- a/src/views/HowToPlay.vue
+++ b/src/views/HowToPlay.vue
@@ -118,14 +118,14 @@
 // import Swiper core and required components
 import { Autoplay, Navigation, Pagination } from 'swiper/modules'
 // Import Swiper styles
-import 'swiper/css/bundle'
-import { ref, computed } from 'vue'
+import { debug } from '@/common'
 import { useBikeTagStore } from '@/store/index'
-import { debug } from '@/common/utils'
+import 'swiper/css/bundle'
+import { computed, ref } from 'vue'
 
 // components
-import { Swiper, SwiperSlide } from 'swiper/vue'
 import BikeTagMap from '@/components/BikeTagMap.vue'
+import { Swiper, SwiperSlide } from 'swiper/vue'
 import { useI18n } from 'vue-i18n'
 
 // data
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 331e27fc..7cd6f83a 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,10 +1,10 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script setup name="LoginView">
-import { inject, computed } from 'vue'
+import BikeTagSvg from '@/assets/images/BikeTag.svg'
+import { isAuthenticationEnabled } from '@/common'
 import { useBikeTagStore } from '@/store/index'
-import { isAuthenticationEnabled } from '@/common/utils'
 import { useAuth0 } from '@auth0/auth0-vue'
-import BikeTagSvg from '@/assets/images/BikeTag.svg'
+import { computed, inject } from 'vue'
 
 // components
 import BikeTagButton from '@/components/BikeTagButton.vue'
diff --git a/src/views/Play.vue b/src/views/Play.vue
index 57a6cab7..15e876a8 100644
--- a/src/views/Play.vue
+++ b/src/views/Play.vue
@@ -108,25 +108,25 @@
 </template>
 
 <script setup name="QueueBikeTagView">
-import { ref, inject, computed, watchEffect, onMounted } from 'vue'
-import { useBikeTagStore } from '@/store/index'
+import ArrowSvg from '@/assets/images/arrow.svg'
+import LineSvg from '@/assets/images/line.svg'
+import { dequeueErrorNotify, sendNetlifyError, sendNetlifyForm } from '@/common'
 import { BiketagQueueFormSteps } from '@/common/types'
-import { useTimer } from 'vue-timer-hook'
-import { sendNetlifyForm, sendNetlifyError, dequeueErrorNotify } from '@/common/utils'
+import { useBikeTagStore } from '@/store/index'
+import { computed, inject, onMounted, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
-import LineSvg from '@/assets/images/line.svg'
-import ArrowSvg from '@/assets/images/arrow.svg'
+import { useTimer } from 'vue-timer-hook'
 
 // components
-import Loading from 'vue-loading-overlay'
+import BikeTagButton from '@/components/BikeTagButton.vue'
+import BikeTagQueue from '@/components/BikeTagQueue.vue'
 import QueueFound from '@/components/QueueFound.vue'
-import QueueMystery from '@/components/QueueMystery.vue'
-import QueueSubmit from '@/components/QueueSubmit.vue'
 import QueueJoined from '@/components/QueueJoined.vue'
+import QueueMystery from '@/components/QueueMystery.vue'
 import QueuePosted from '@/components/QueuePosted.vue'
 import QueuePostedShare from '@/components/QueuePostedShare.vue'
-import BikeTagQueue from '@/components/BikeTagQueue.vue'
-import BikeTagButton from '@/components/BikeTagButton.vue'
+import QueueSubmit from '@/components/QueueSubmit.vue'
+import Loading from 'vue-loading-overlay'
 
 // props
 const props = defineProps({
diff --git a/src/views/Player.vue b/src/views/Player.vue
index d009aad3..28663d28 100644
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -1,8 +1,5 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <loading v-if="tagsAreLoading" v-model:active="tagsAreLoading" :is-full-page="true">
-    <img class="spinner" src="@/assets/images/SpinningBikeV1.svg" alt="Loading..." />
-  </loading>
   <b-modal
     v-if="player && bikedex?.length"
     v-model="modal"
@@ -46,70 +43,49 @@
         </a>
       </div>
     </div>
-    <div>
-      <b-pagination
-        v-model="currentPage"
-        :total-rows="totalCount"
-        :per-page="perPage"
-        aria-controls="itemList"
-        align="center"
-        @page-click="changePage"
-      ></b-pagination>
-      <div class="small-margin player-tags">
-        <div v-for="tag in tagsForList" :key="tag?.tagnumber">
-          <bike-tag
-            :key="tag?.tagnumber"
-            :tag="tag"
-            :show-player="false"
-            :found-tagnumber="tag?.tagnumber - 1"
-            :found-description="tag?.foundLocation"
-          />
+    <Searchable
+      item-type="player"
+      :items="player?.tags?.toReversed()"
+      :search-algo="playerTagSearch"
+      main-route="Player"
+      search-route="Player Tag Search"
+    >
+      <template #content="{ displayedItems }">
+        <div class="small-margin player-tags">
+          <div v-for="tag in displayedItems" :key="tag?.tagnumber">
+            <bike-tag
+              :key="tag?.tagnumber"
+              :tag="tag"
+              :show-player="false"
+              :found-tagnumber="tag?.tagnumber - 1"
+              :found-description="tag?.foundLocation"
+            />
+          </div>
         </div>
-      </div>
-      <b-form-group>
-        <select v-model="perPage" class="m-auto mb-2 form-select" @change="resetCurrentPage">
-          <option v-for="i in 3" :key="Math.pow(10, i)" :value="Math.pow(10, i)">
-            {{ Math.pow(10, i) }}
-          </option>
-        </select>
-      </b-form-group>
-      <b-pagination
-        v-model="currentPage"
-        :total-rows="totalCount"
-        :per-page="perPage"
-        aria-controls="itemList"
-        align="center"
-        @page-click="changePage"
-      ></b-pagination>
-    </div>
+      </template>
+    </Searchable>
   </div>
 </template>
 
 <script setup name="PlayerView">
-import { ref, computed, watch, onMounted } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { useBikeTagStore } from '@/store'
-import 'vue-loading-overlay/dist/css/index.css'
-import Reddit from '@/assets/images/Reddit.svg'
+import Discord from '@/assets/images/Discord.svg'
+import Imgur from '@/assets/images/Imgur.svg'
 import Instagram from '@/assets/images/Instagram.svg'
+import Reddit from '@/assets/images/Reddit.svg'
 import Twitter from '@/assets/images/Twitter.svg'
-import Imgur from '@/assets/images/Imgur.svg'
-import Discord from '@/assets/images/Discord.svg'
+import { useBikeTagStore } from '@/store'
+import { computed, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
 
 // components
+import BikeDex from '@/components/BikeDex.vue'
+import BikeTag from '@/components/BikeTag.vue'
 import BikeTagAchievement from '@/components/BikeTagAchievement.vue'
 import PlayerBicon from '@/components/BikeTagPlayer.vue'
-import BikeTag from '@/components/BikeTag.vue'
-import Loading from 'vue-loading-overlay'
-import BikeDex from '@/components/BikeDex.vue'
+import Searchable from '@/components/Searchable.vue'
 
 // data
-const router = useRouter()
 const route = useRoute()
-const currentPage = ref(route.params?.currentPage.length ? parseInt(route.params?.currentPage) : 1)
-const perPage = ref(10)
-const tagsAreLoading = ref(false)
-// const tagsLoaded = ref([])
 const playerSocial = ref(null)
 const socialNetworkIcons = {
   reddit: Reddit,
@@ -133,32 +109,8 @@ const player = computed(() => store.getPlayers.find((p) => p.name === playerName
 // computed
 const bikedex = computed(() => [])
 const achievements = computed(() => player.value?.achievements?.map(store.getBikeTagAchievement))
-const tagsForList = computed(() => {
-  const tags = player.value?.tags.toReversed()
-  const start = (currentPage.value - 1) * perPage.value
-  const end = currentPage.value * perPage.value
-  return tags.slice(start, end)
-})
-const totalCount = computed(() => player.value?.tags?.length)
 
 // methods
-const resetCurrentPage = () => {
-  // startLoading()
-  currentPage.value = 1
-}
-const changePage = (event, pageNumber) => {
-  // startLoading()
-  router.push('/player/' + encodeURIComponent(playerName.value) + '/' + pageNumber)
-}
-// const startLoading = async () => {
-//   tagsLoaded.value = []
-//   tagsAreLoading.value = true
-//   if (perPage.value <= 10) {
-//     setTimeout(() => {
-//       tagsAreLoading.value = false
-//     }, 500)
-//   }
-// }
 const showBikeDex = () => {
   modal.value = true
   // console.log(modal)
@@ -167,14 +119,42 @@ const showBikeDex = () => {
 //   modal.value = false
 //   console.log(modal)
 // }
+const playerTagSearch = (tags, searchString) => {
+  const query = searchString.toLowerCase()
+
+  const searchedNumber = parseInt(query.match(/^#?(\d+)$/)?.[1])
+  const foundByNumber = []
+
+  const splitQuery = query.split(/\s+/)
+  const tagToScore = new Map()
+  for (const tag of tags) {
+    if (
+      searchedNumber &&
+      !foundByNumber.length &&
+      [searchedNumber, searchedNumber + 1].includes(tag.tagnumber)
+    ) {
+      foundByNumber[0] = tag
+      continue
+    }
 
-// watch
-watch(
-  () => route.params.currentPage,
-  (val) => {
-    currentPage.value = Number(val)
-  },
-)
+    const stringToMatch = tag.hint?.toLowerCase() + tag.foundLocation?.toLowerCase()
+    let score = 0
+    if (stringToMatch.includes(query)) {
+      score++
+    }
+    for (const word of splitQuery) {
+      if (stringToMatch.includes(word)) {
+        score++
+      }
+    }
+    tagToScore.set(tag, score)
+  }
+
+  const sortedResults = tags
+    .filter((tag) => tagToScore.get(tag) > 0)
+    .toSorted((a, b) => tagToScore.get(a) - tagToScore.get(b))
+  return foundByNumber.concat(sortedResults)
+}
 
 // mounted
 onMounted(async () => {
diff --git a/src/views/Players.vue b/src/views/Players.vue
index 86471327..39b4595c 100644
--- a/src/views/Players.vue
+++ b/src/views/Players.vue
@@ -1,75 +1,44 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div class="container">
-    <b-pagination
-      v-model="currentPage"
-      :total-rows="totalCount"
-      :per-page="perPage"
-      aria-controls="itemList"
-      align="center"
-      @page-click="changePage"
-    ></b-pagination>
-    <div class="player-list">
-      <div v-for="player in playersForList" :key="player.name" class="p-lg-3 p-md-2 mb-2">
-        <player-bicon size="md" :player="player" />
+  <Searchable
+    item-type="players"
+    :items="store.getPlayers"
+    :search-algo="playerSearch"
+    main-route="Players"
+    search-route="Player Search"
+  >
+    <template #content="{ displayedItems }">
+      <div class="player-list">
+        <div v-for="player in displayedItems" :key="player.name" class="p-lg-3 p-md-2 mb-2">
+          <player-bicon size="md" :player="player" />
+        </div>
       </div>
-    </div>
-    <b-form-group>
-      <select v-model="perPage" class="form-select mb-2 m-auto" @change="resetCurrentPage">
-        <option v-for="i in 3" :key="Math.pow(10, i)" :value="Math.pow(10, i)">
-          {{ Math.pow(10, i) }}
-        </option>
-      </select>
-    </b-form-group>
-    <b-pagination
-      v-model="currentPage"
-      :total-rows="totalCount"
-      :per-page="perPage"
-      aria-controls="itemList"
-      align="center"
-      @page-click="changePage"
-    ></b-pagination>
-  </div>
+    </template>
+  </Searchable>
 </template>
 
 <script setup name="PlayersView">
-import { ref, computed, watch } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { useBikeTagStore } from '@/store/index'
-
-// components
+import Searchable from '@/components/Searchable.vue'
 import PlayerBicon from '@/components/BikeTagPlayer.vue'
+import { useBikeTagStore } from '@/store/index'
 
-// data
-const router = useRouter()
-const route = useRoute()
-const currentPage = ref(route.params?.currentPage.length ? parseInt(route.params?.currentPage) : 1)
-const perPage = ref(10)
 const store = useBikeTagStore()
 
-// computed
-const getPlayers = computed(() => store.getPlayers)
-const playersForList = computed(() =>
-  getPlayers.value.slice(
-    (currentPage.value - 1) * perPage.value,
-    currentPage.value * perPage.value,
-  ),
-)
-const totalCount = computed(() => getPlayers.value.length)
-
-// methods
-const resetCurrentPage = () => {
-  currentPage.value = 1
+const playerSearch = (players, searchString) => {
+  const query = searchString.toLowerCase().trim()
+  const startingWithQuery = []
+  const containingQuery = []
+  for (const player of players) {
+    const lowerName = player.name.toLowerCase()
+    if (lowerName.startsWith(query)) {
+      startingWithQuery.push(player)
+    } else if (lowerName.includes(query)) {
+      containingQuery.push(player)
+    }
+  }
+  return sortedByName(startingWithQuery).concat(sortedByName(containingQuery))
 }
-const changePage = (event, pageNumber) => {
-  router.push('/players/' + pageNumber)
+const sortedByName = (list) => {
+  return list.toSorted((a, b) => a.name.localeCompare(b.name))
 }
-
-//watch
-watch(
-  () => 'route.params.currentPage',
-  (val) => {
-    currentPage.value = Number(val)
-  },
-)
 </script>
diff --git a/src/views/Round.vue b/src/views/Round.vue
index f2e46487..a7a13a8a 100644
--- a/src/views/Round.vue
+++ b/src/views/Round.vue
@@ -28,11 +28,11 @@
 </template>
 
 <script setup name="QueueBikeTagView">
-import { ref, computed, onMounted } from 'vue'
-import { useBikeTagStore } from '@/store/index'
 import { BiketagQueueFormSteps } from '@/common/types'
+import { useBikeTagStore } from '@/store/index'
+import { computed, onMounted, ref } from 'vue'
 import { useTimer } from 'vue-timer-hook'
-// import { sendNetlifyForm, sendNetlifyError } from '@/common/utils'
+// import { sendNetlifyForm, sendNetlifyError } from '@/common'
 
 // components
 import QueueView from '@/components/QueueView.vue'
diff --git a/vite.config.ts b/vite.config.mts
similarity index 100%
rename from vite.config.ts
rename to vite.config.mts