diff --git a/src/lib/components/search/textSearch/index.svelte b/src/lib/components/search/textSearch/index.svelte
index 5ed3aa7..d7ffaad 100644
--- a/src/lib/components/search/textSearch/index.svelte
+++ b/src/lib/components/search/textSearch/index.svelte
@@ -1,18 +1,14 @@
 <script lang="ts">
-  import { fade } from "svelte/transition";
-  import {
-    Disclosure,
-    DisclosureButton,
-    DisclosurePanel,
-  } from "@rgossiaux/svelte-headlessui";
-  import { ChevronRightIcon } from "@rgossiaux/svelte-heroicons/solid";
+  import { fade } from 'svelte/transition';
+  import { Disclosure, DisclosureButton, DisclosurePanel } from '@rgossiaux/svelte-headlessui';
+  import { ChevronRightIcon } from '@rgossiaux/svelte-heroicons/solid';
   import { boredState } from '$lib/stores/boredState';
   import { gameStore } from '$lib/stores/gameSearchStore';
   import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte';
 
   export let showButton: boolean = false;
   export let advancedSearch: boolean = false;
-  console.log('showButton', showButton);
+  // console.log('showButton', showButton);
 
   let submitting = $boredState?.loading;
   let name = '';
@@ -37,7 +33,12 @@
     <Disclosure let:open>
       <DisclosureButton class="disclosure-button">
         <span>Advanced Search?</span>
-        <ChevronRightIcon class="icon disclosure-icon" style={open ? "transform: rotate(90deg); transition: transform 0.5s ease;" : "transform: rotate(0deg); transition: transform 0.5s ease;"} />
+        <ChevronRightIcon
+          class="icon disclosure-icon"
+          style={open
+            ? 'transform: rotate(90deg); transition: transform 0.5s ease;'
+            : 'transform: rotate(0deg); transition: transform 0.5s ease;'}
+        />
       </DisclosureButton>
 
       {#if open}
@@ -56,7 +57,6 @@
   <button class="btn" type="submit" disabled={submitting}>Submit</button>
 {/if}
 
-
 <!-- </form> -->
 <style lang="scss">
   .search {
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index ecbf8ca..b098d3f 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -1,4 +1,4 @@
-import { boardGameApi } from './_api';
+import { boardGameApi } from './api';
 import { error, type Action } from '@sveltejs/kit';
 
 export const POST: Action = async ({ request, locals }) => {
diff --git a/src/routes/_api.ts b/src/routes/api.ts
similarity index 100%
rename from src/routes/_api.ts
rename to src/routes/api.ts
diff --git a/src/routes/api/game/[id]/+server.ts b/src/routes/api/game/[id]/+server.ts
index ff88e10..be313a3 100644
--- a/src/routes/api/game/[id]/+server.ts
+++ b/src/routes/api/game/[id]/+server.ts
@@ -1,5 +1,5 @@
 import { json as json$1 } from '@sveltejs/kit';
-import { boardGameApi } from '$root/routes/_api';
+import { boardGameApi } from '$root/routes/api';
 import type { RequestHandler } from '@sveltejs/kit';
 
 export const GET: RequestHandler = async ({ params }) => {
@@ -10,8 +10,8 @@ export const GET: RequestHandler = async ({ params }) => {
   const response = await boardGameApi('get', `search`, queryParams);
   if (response.status === 404) {
     return json$1({
-  games: []
-});
+      games: []
+    });
   }
 
   if (response.status === 200) {
@@ -20,8 +20,8 @@ export const GET: RequestHandler = async ({ params }) => {
     // const games = gameResponse?.games;
     console.log('game', gameResponse?.games[0]);
     return json$1({
-  game: gameResponse?.games[0]
-});
+      game: gameResponse?.games[0]
+    });
   }
 
   return new Response(undefined, { status: response.status });
diff --git a/src/routes/collection/+page.svelte b/src/routes/collection/+page.svelte
new file mode 100644
index 0000000..223b01d
--- /dev/null
+++ b/src/routes/collection/+page.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import Game from '$lib/components/game/index.svelte';
+  import { collectionStore } from '$lib/stores/collectionStore';
+</script>
+
+<svelte:head>
+  <title>Your Collection | Bored Game</title>
+</svelte:head>
+
+<h1>Your Collection</h1>
+
+<div class="games">
+  <div class="games-list">
+    {#each $collectionStore as game}
+      <Game {game} />
+    {/each}
+  </div>
+</div>
+
+<style lang="scss">
+  h1 {
+    width: 100%;
+  }
+  button {
+    border-radius: 10px;
+    margin: 0.5rem;
+    padding: 1rem;
+    color: var(--clr-input-txt);
+    background-color: var(--color-btn-primary-active);
+  }
+
+  .games {
+    margin: 2rem 0rem;
+
+    h1 {
+      margin-bottom: 2rem;
+    }
+  }
+
+  .games-list {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(200px, 1fr));
+    gap: 2rem;
+
+    @media (max-width: 800px) {
+      grid-template-columns: 1fr 1fr;
+    }
+
+    @media (max-width: 650px) {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
diff --git a/src/routes/game/[id]/+page.server.ts b/src/routes/game/[id]/+page.server.ts
index 67bf9be..33a24dc 100644
--- a/src/routes/game/[id]/+page.server.ts
+++ b/src/routes/game/[id]/+page.server.ts
@@ -1,6 +1,6 @@
 import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types'
-import { boardGameApi } from '../../_api';
+import { boardGameApi } from '../../api';
 
 type GamePageParams = {
   params: {