diff --git a/package.json b/package.json
index 8ff43b8..d7ab0cc 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,6 @@
     "@types/node": "^18.11.7",
     "@typescript-eslint/eslint-plugin": "^5.41.0",
     "@typescript-eslint/parser": "^5.41.0",
-    "carbon-components-svelte": "^0.70.12",
-    "carbon-icons-svelte": "^11.4.0",
     "eslint": "^8.26.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-svelte3": "^4.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ed51618..137a6b2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,8 +15,6 @@ specifiers:
   '@types/node': ^18.11.7
   '@typescript-eslint/eslint-plugin': ^5.41.0
   '@typescript-eslint/parser': ^5.41.0
-  carbon-components-svelte: ^0.70.12
-  carbon-icons-svelte: ^11.4.0
   cookie: ^0.5.0
   eslint: ^8.26.0
   eslint-config-prettier: ^8.1.0
@@ -56,8 +54,6 @@ devDependencies:
   '@types/node': 18.11.7
   '@typescript-eslint/eslint-plugin': 5.41.0_huremdigmcnkianavgfk3x6iou
   '@typescript-eslint/parser': 5.41.0_wyqvi574yv7oiwfeinomdzmc3m
-  carbon-components-svelte: 0.70.12
-  carbon-icons-svelte: 11.4.0
   eslint: 8.26.0
   eslint-config-prettier: 8.5.0_eslint@8.26.0
   eslint-plugin-svelte3: 4.0.0_l6ppk7eerpslmlsqymzic46t24
@@ -650,16 +646,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /carbon-components-svelte/0.70.12:
-    resolution: {integrity: sha512-CSVXWr53kSP/6ITaLxcCd/7rZStM3Mgl1tXedlwgvkViqDgCexWzSsK1u2RoSptmqL5IggUehabcETD6tm5EFg==}
-    dependencies:
-      flatpickr: 4.6.9
-    dev: true
-
-  /carbon-icons-svelte/11.4.0:
-    resolution: {integrity: sha512-p/llZde2kP2BI9SOqM+QFKGfQnYrW+4dVxF1rAYriEADXDsjt9EYlh+KpQ5qf4JpXAq+e2+TB/r/lIG1xdUbAQ==}
-    dev: true
-
   /chalk/4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -1462,10 +1448,6 @@ packages:
       rimraf: 3.0.2
     dev: true
 
-  /flatpickr/4.6.9:
-    resolution: {integrity: sha512-F0azNNi8foVWKSF+8X+ZJzz8r9sE1G4hl06RyceIaLvyltKvDl6vqk9Lm/6AUUCi5HWaIjiUbk7UpeE/fOXOpw==}
-    dev: true
-
   /flatted/3.2.7:
     resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
     dev: true
diff --git a/src/lib/components/dialog/RemoveCollectionDialog.svelte b/src/lib/components/dialog/RemoveCollectionDialog.svelte
index 4045308..e6f090f 100644
--- a/src/lib/components/dialog/RemoveCollectionDialog.svelte
+++ b/src/lib/components/dialog/RemoveCollectionDialog.svelte
@@ -1,82 +1,87 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
-  import {
-    Dialog,
-    DialogDescription,
-    DialogOverlay,
-    DialogTitle
-  } from '@rgossiaux/svelte-headlessui';
-  import { boredState } from '$root/lib/stores/boredState';
-  import { removeFromCollection } from '$root/lib/util/manipulateCollection';
+	import { fade } from 'svelte/transition';
+	import {
+		Dialog,
+		DialogDescription,
+		DialogOverlay,
+		DialogTitle
+	} from '@rgossiaux/svelte-headlessui';
+	import { boredState } from '$root/lib/stores/boredState';
+	import { collectionStore } from '$root/lib/stores/collectionStore';
+	import { removeFromCollection } from '$root/lib/util/manipulateCollection';
+	import { browser } from '$app/environment';
 
-  function removeGame() {
-    if ($boredState?.dialog?.additionalData) {
-      removeFromCollection($boredState?.dialog?.additionalData);
-    }
-    boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
-  }
+	function removeGame() {
+		if ($boredState?.dialog?.additionalData) {
+			removeFromCollection($boredState?.dialog?.additionalData);
+		}
+		if (browser) {
+			localStorage.collection = JSON.stringify($collectionStore);
+		}
+		boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
+	}
 
-  $: isOpen = $boredState?.dialog?.isOpen;
+	$: isOpen = $boredState?.dialog?.isOpen;
 </script>
 
 <Dialog
-  open={isOpen}
-  on:close={() => {
-    boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
-  }}
-  static
+	open={isOpen}
+	on:close={() => {
+		boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
+	}}
+	static
 >
-  <div transition:fade>
-    <DialogOverlay class="dialog-overlay" />
-    <div class="dialog">
-      <DialogTitle>Remove from collection</DialogTitle>
-      <DialogDescription>Are you sure you want to remove from your collection?</DialogDescription>
+	<div transition:fade>
+		<DialogOverlay class="dialog-overlay" />
+		<div class="dialog">
+			<DialogTitle>Remove from collection</DialogTitle>
+			<DialogDescription>Are you sure you want to remove from your collection?</DialogDescription>
 
-      <div class="dialog-footer">
-        <button on:click={removeGame}>Remove</button>
-        <button
-          on:click={() => {
-            boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
-          }}>Cancel</button
-        >
-      </div>
-    </div>
-  </div>
+			<div class="dialog-footer">
+				<button on:click={removeGame}>Remove</button>
+				<button
+					on:click={() => {
+						boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
+					}}>Cancel</button
+				>
+			</div>
+		</div>
+	</div>
 </Dialog>
 
 <style lang="scss">
-  .dialog {
-    display: grid;
-    gap: 1.5rem;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 101;
-    border-radius: 10px;
-    background-color: var(--clr-input-bg);
-    padding: 2rem;
-    min-width: 400px;
+	.dialog {
+		display: grid;
+		gap: 1.5rem;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		z-index: 101;
+		border-radius: 10px;
+		background-color: var(--clr-input-bg);
+		padding: 2rem;
+		min-width: 400px;
 
-    .dialog-footer {
-      display: flex;
-      justify-content: space-between;
-      gap: 2rem;
-      margin: 1rem 0;
+		.dialog-footer {
+			display: flex;
+			justify-content: space-between;
+			gap: 2rem;
+			margin: 1rem 0;
 
-      button {
-        display: flex;
-        place-content: center;
-        gap: 1rem;
-        width: 100%;
-        border-radius: 10px;
-        padding: 1rem;
-        background-color: var(--color-btn-primary-active);
+			button {
+				display: flex;
+				place-content: center;
+				gap: 1rem;
+				width: 100%;
+				border-radius: 10px;
+				padding: 1rem;
+				background-color: var(--color-btn-primary-active);
 
-        &:hover {
-          background-color: var(--color-btn-primary-active-hover);
-        }
-      }
-    }
-  }
+				&:hover {
+					background-color: var(--color-btn-primary-active-hover);
+				}
+			}
+		}
+	}
 </style>
diff --git a/src/lib/components/game/index.svelte b/src/lib/components/game/index.svelte
index 4ee00f8..ec63268 100644
--- a/src/lib/components/game/index.svelte
+++ b/src/lib/components/game/index.svelte
@@ -1,112 +1,119 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  import { fade } from 'svelte/transition';
-  import { MinusCircleIcon, PlusCircleIcon } from '@rgossiaux/svelte-heroicons/outline';
-  import type { GameType, SavedGameType } from '$lib/types';
-  import { collectionStore } from '$lib/stores/collectionStore';
-  import { addToCollection, removeFromCollection } from '$lib/util/manipulateCollection';
+	import { createEventDispatcher } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import { MinusCircleIcon, PlusCircleIcon } from '@rgossiaux/svelte-heroicons/outline';
+	import type { GameType, SavedGameType } from '$lib/types';
+	import { collectionStore } from '$lib/stores/collectionStore';
+	import { addToCollection, removeFromCollection } from '$lib/util/manipulateCollection';
+	import { browser } from '$app/environment';
 
-  export let game: GameType | SavedGameType;
-  export let minimal: boolean = false;
-  export let detailed: boolean = false;
+	export let game: GameType | SavedGameType;
+	export let minimal: boolean = false;
+	export let detailed: boolean = false;
 
-  const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher();
 
-  function removeGame() {
-    dispatch('removeGameEvent', game);
-  }
+	function removeGame() {
+		dispatch('removeGameEvent', game);
+	}
 
-  $: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
+	$: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
 </script>
 
 <article class="game-container" transition:fade>
-  <div class="game-info">
-    <h2>{game.name}</h2>
-    <a class="thumbnail" href={`/game/${game.id}`}>
-      <img width="140" height="140" src={game.thumb_url} alt={`Image of ${game.name}`} />
-    </a>
-  </div>
+	<div class="game-info">
+		<h2>{game.name}</h2>
+		<a class="thumbnail" href={`/game/${game.id}`}>
+			<img width="140" height="140" src={game.thumb_url} alt={`Image of ${game.name}`} />
+		</a>
+	</div>
 
-  {#if !minimal}
-    <div class="game-details">
-      <p>{game.year_published}</p>
-      <p>{game.players} {game.max_players === 1 ? 'player' : 'players'}</p>
-      <p>{game.playtime} minutes</p>
-      <p>Minimum Age: {game.min_age}</p>
-      <a href={`/game/${game.id}`}>View Game</a>
-      {#if detailed}
-        <div class="description">{@html game.description}</div>
-      {/if}
-    </div>
-  {/if}
-  {#if existsInCollection}
-    <button
-      aria-label="Remove from collection"
-      class="btn"
-      type="button"
-      on:click={() => removeGame()}>Remove <MinusCircleIcon width="24" height="24" /></button
-    >
-  {:else}
-    <button
-      aria-label="Add to collection"
-      class="btn"
-      type="button"
-      on:click={() => addToCollection(game)}
-      >Add to collection <PlusCircleIcon width="24" height="24" /></button
-    >
-  {/if}
+	{#if !minimal}
+		<div class="game-details">
+			<p>{game.year_published}</p>
+			<p>{game.players} {game.max_players === 1 ? 'player' : 'players'}</p>
+			<p>{game.playtime} minutes</p>
+			<p>Minimum Age: {game.min_age}</p>
+			<a href={`/game/${game.id}`}>View Game</a>
+			{#if detailed}
+				<div class="description">{@html game.description}</div>
+			{/if}
+		</div>
+	{/if}
+	{#if existsInCollection}
+		<button
+			aria-label="Remove from collection"
+			class="btn"
+			type="button"
+			on:click={() => {
+				removeGame();
+			}}>Remove <MinusCircleIcon width="24" height="24" /></button
+		>
+	{:else}
+		<button
+			aria-label="Add to collection"
+			class="btn"
+			type="button"
+			on:click={() => {
+				addToCollection(game);
+				if (browser) {
+					localStorage.collection = JSON.stringify($collectionStore);
+				}
+			}}>Add to collection <PlusCircleIcon width="24" height="24" /></button
+		>
+	{/if}
 </article>
 
 <style lang="scss">
-  img {
-    border-radius: 10px;
-  }
+	img {
+		border-radius: 10px;
+	}
 
-  button {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 1rem;
-    width: 100%;
-    border-radius: 10px;
-    padding: 1rem;
-    background-color: var(--color-btn-primary-active);
-  }
+	button {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: 1rem;
+		width: 100%;
+		border-radius: 10px;
+		padding: 1rem;
+		background-color: var(--color-btn-primary-active);
+	}
 
-  .game-container {
-    /* display: grid; */
-    /* grid-template-rows: minmax(25px, 50px) 1fr minmax(50px, 75px); */
-    display: flex;
-    flex-wrap: wrap;
+	.game-container {
+		/* display: grid; */
+		/* grid-template-rows: minmax(25px, 50px) 1fr minmax(50px, 75px); */
+		display: flex;
+		flex-wrap: wrap;
 
-    @media (max-width: 650px) {
-      max-width: none;
-    }
+		@media (max-width: 650px) {
+			max-width: none;
+		}
 
-    gap: var(--spacing-16);
-    padding: var(--spacing-16) var(--spacing-16);
-    transition: all 0.3s;
-    border-radius: 8px;
-    background-color: var(--primary);
-    &:hover {
-      background-color: hsla(222, 9%, 65%, 1);
-    }
+		gap: var(--spacing-16);
+		padding: var(--spacing-16) var(--spacing-16);
+		transition: all 0.3s;
+		border-radius: 8px;
+		background-color: var(--primary);
+		&:hover {
+			background-color: hsla(222, 9%, 65%, 1);
+		}
 
-    .game-info {
-      display: grid;
-      gap: 0.5rem;
-      margin: 0.2rem;
-    }
+		.game-info {
+			display: grid;
+			gap: 0.5rem;
+			margin: 0.2rem;
+		}
 
-    .game-details {
-      p,
-      a {
-        padding: 0.25rem;
-      }
-    }
+		.game-details {
+			p,
+			a {
+				padding: 0.25rem;
+			}
+		}
 
-    .btn {
-      max-height: 50px;
-    }
-  }
+		.btn {
+			max-height: 50px;
+		}
+	}
 </style>
diff --git a/src/lib/components/preferences/gameCollection.svelte b/src/lib/components/preferences/gameCollection.svelte
index c10dea9..8b805e3 100644
--- a/src/lib/components/preferences/gameCollection.svelte
+++ b/src/lib/components/preferences/gameCollection.svelte
@@ -1,57 +1,77 @@
 <script lang="ts">
-  import { browser } from '$app/environment';
-  import { collectionStore } from '$root/lib/stores/collectionStore';
-  import { ToastType } from '$root/lib/types';
-  import { SaveIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
-  import { toast } from '../toast/toast';
+	import { browser } from '$app/environment';
+	import { collectionStore } from '$root/lib/stores/collectionStore';
+	import { ToastType } from '$root/lib/types';
+	import { SaveIcon, ShareIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
+	import { toast } from '../toast/toast';
 
-  function saveCollection() {
-    console.log('Saving collection');
-    console.log('collectionStore', $collectionStore);
-    if (!browser) return;
-    localStorage.collection = JSON.stringify($collectionStore);
-    toast.send('Saved collection', { duration: 3000, type: ToastType.INFO });
-  }
+	function saveCollection() {
+		if (!browser) return;
+		localStorage.collection = JSON.stringify($collectionStore);
+		toast.send('Saved collection', { duration: 3000, type: ToastType.INFO });
+	}
 
-  function clearCollection() {
-    if (!browser) return;
-    localStorage.collection = [];
-    toast.send('Cleared collection', { duration: 3000, type: ToastType.INFO });
-  }
+	function exportCollection() {
+		if (!browser) return;
+		const collectionBlob = new Blob([JSON.stringify($collectionStore)], {
+			type: 'application/json;charset=utf-8'
+		});
+		let url = window.URL || window.webkitURL;
+		let link = url.createObjectURL(collectionBlob);
+		let a = document.createElement('a');
+		a.setAttribute('download', `collection.json`);
+		a.setAttribute('href', link);
+		a.click();
+		document.body.removeChild(a);
+		toast.send('Exported collection', { duration: 3000, type: ToastType.INFO });
+	}
+
+	function clearCollection() {
+		if (!browser) return;
+		localStorage.collection = [];
+		toast.send('Cleared collection', { duration: 3000, type: ToastType.INFO });
+	}
 </script>
 
 <div>
-  <div>
-    <span class="collection-title">Your Collection</span>
-  </div>
-  <div class="collection-buttons">
-    <button type="button" aria-label="Save Collection" on:click={() => saveCollection()}
-      ><SaveIcon width="24" height="24" />Save</button
-    >
-    <button type="button" aria-label="Clear saved collection" on:click={() => clearCollection()}
-      ><TrashIcon width="24" height="24" />Clear</button
-    >
-  </div>
+	<div>
+		<span class="collection-title">Your Collection</span>
+	</div>
+	<div class="collection-buttons">
+		<button type="button" aria-label="Export Collection" on:click={() => exportCollection()}
+			><ShareIcon width="24" height="24" />Export</button
+		>
+		<button type="button" aria-label="Save Collection" on:click={() => saveCollection()}
+			><SaveIcon width="24" height="24" />Save</button
+		>
+		<button type="button" aria-label="Clear saved collection" on:click={() => clearCollection()}
+			><TrashIcon width="24" height="24" />Clear</button
+		>
+	</div>
 </div>
 
-<style>
-  :global(.collection-title) {
-    padding-bottom: var(--spacing-8);
-    font-size: var(--font-24);
-    font-weight: 700;
-    line-height: 32px;
-  }
+<style lang="scss">
+	:global(.collection-title) {
+		padding-bottom: var(--spacing-8);
+		font-size: var(--font-24);
+		font-weight: 700;
+		line-height: 32px;
+	}
 
-  :global(.collection-buttons) {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    gap: 6rem;
-  }
+	:global(.collection-buttons) {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		// gap: 6rem;
 
-  button {
-    display: grid;
-    place-items: center;
-    gap: 0.25rem;
-  }
+		@media (min-width: 480px) {
+			gap: 3rem;
+		}
+	}
+
+	button {
+		display: grid;
+		place-items: center;
+		gap: 0.25rem;
+	}
 </style>
diff --git a/src/lib/components/preferences/profile.svelte b/src/lib/components/preferences/profile.svelte
index 919175f..0f2c35c 100644
--- a/src/lib/components/preferences/profile.svelte
+++ b/src/lib/components/preferences/profile.svelte
@@ -1,136 +1,146 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
-  import { Popover, PopoverButton, PopoverPanel } from '@rgossiaux/svelte-headlessui';
-  import { CogIcon } from '@rgossiaux/svelte-heroicons/outline';
-  import Themes from './themes.svelte';
-  import GameCollection from './gameCollection.svelte';
+	import { fade } from 'svelte/transition';
+	import { Popover, PopoverButton, PopoverPanel } from '@rgossiaux/svelte-headlessui';
+	import { CogIcon } from '@rgossiaux/svelte-heroicons/outline';
+	import Themes from './themes.svelte';
+	import GameCollection from './gameCollection.svelte';
 </script>
 
 <div class="container">
-  <Popover let:open class="popover">
-    <PopoverButton aria-label="Preferences">
-      <CogIcon width="24" height="24" />
-    </PopoverButton>
+	<Popover let:open class="popover">
+		<PopoverButton aria-label="Preferences">
+			<CogIcon width="24" height="24" />
+		</PopoverButton>
 
-    {#if open}
-      <div transition:fade={{ duration: 100 }}>
-        <PopoverPanel class="popover-panel" static>
-          <div class="preferences">
-            <svg
-              width="24"
-              height="24"
-              class="arrow"
-              viewBox="0 0 24 24"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                id="inside"
-                d="M23 24H1L11.0909 1.98341C11.4474 1.20562 12.5526 1.20562 12.9091 1.98341L23 24Z"
-                fill="none"
-              />
-              <path
-                id="outside"
-                d="M12.8944 1.78885L24 24H23L12.9021 2.88628C12.5396 2.12822 11.4604 2.12822 11.0979 2.88628L1 24H0L11.1056 1.78885C11.4741 1.05181 12.5259 1.0518 12.8944 1.78885Z"
-                fill="none"
-              />
-            </svg>
+		{#if open}
+			<div transition:fade={{ duration: 100 }}>
+				<PopoverPanel class="popover-panel" static>
+					<div class="preferences">
+						<svg
+							width="24"
+							height="24"
+							class="arrow"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								id="inside"
+								d="M23 24H1L11.0909 1.98341C11.4474 1.20562 12.5526 1.20562 12.9091 1.98341L23 24Z"
+								fill="none"
+							/>
+							<path
+								id="outside"
+								d="M12.8944 1.78885L24 24H23L12.9021 2.88628C12.5396 2.12822 11.4604 2.12822 11.0979 2.88628L1 24H0L11.1056 1.78885C11.4741 1.05181 12.5259 1.0518 12.8944 1.78885Z"
+								fill="none"
+							/>
+						</svg>
 
-            <span class="title">Preferences</span>
+						<span class="title">Preferences</span>
 
-            <div class="options">
-              <Themes />
-              <GameCollection />
-            </div>
-          </div>
-        </PopoverPanel>
-      </div>
-    {/if}
-  </Popover>
+						<div class="options">
+							<Themes />
+							<GameCollection />
+						</div>
+					</div>
+				</PopoverPanel>
+			</div>
+		{/if}
+	</Popover>
 </div>
 
 <style lang="scss">
-  .container {
-    width: 24px;
-    height: 24px;
-    z-index: 10;
-  }
+	.container {
+		width: 24px;
+		height: 24px;
+		z-index: 10;
+	}
 
-  .container :global(.popover) {
-    height: 100%;
-    position: relative;
-  }
+	.container :global(.popover) {
+		height: 100%;
+		position: relative;
+	}
 
-  .container :global(.popover-panel) {
-    position: absolute;
-    top: 48px;
-    right: -22px;
-    z-index: 10;
-  }
+	.container :global(.popover-panel) {
+		position: absolute;
+		top: 48px;
+		right: -22px;
+		z-index: 10;
+	}
 
-  .preferences {
-    background-image: var(--clr-menu-bg);
-    padding: var(--spacing-24);
-    border: 1px solid var(--clr-menu-border);
-    border-radius: var(--rounded-20);
-    box-shadow: var(--shadow-lg);
-  }
+	.preferences {
+		background-image: var(--clr-menu-bg);
+		padding: var(--spacing-24);
+		border: 1px solid var(--clr-menu-border);
+		border-radius: var(--rounded-20);
+		box-shadow: var(--shadow-lg);
+	}
 
-  .preferences .arrow {
-    position: absolute;
-    top: -23px;
-    right: 22px;
-  }
+	.preferences .arrow {
+		position: absolute;
+		top: -23px;
+		right: 22px;
+	}
 
-  .preferences .arrow #inside {
-    fill: var(--clr-menu-arrow-bg);
-  }
+	.preferences .arrow #inside {
+		fill: var(--clr-menu-arrow-bg);
+	}
 
-  .preferences .arrow #outside {
-    fill: var(--clr-menu-border);
-  }
+	.preferences .arrow #outside {
+		fill: var(--clr-menu-border);
+	}
 
-  .preferences .title {
-    display: block;
-    padding-bottom: var(--spacing-8);
-    font-size: var(--font-24);
-    font-weight: 700;
-    line-height: 32px;
-    border-bottom: 1px solid var(--clr-menu-border);
-  }
+	.preferences .title {
+		display: block;
+		padding-bottom: var(--spacing-8);
+		font-size: var(--font-24);
+		font-weight: 700;
+		line-height: 32px;
+		border-bottom: 1px solid var(--clr-menu-border);
+	}
 
-  .preferences .options {
-    font-weight: 500;
-    color: var(--clr-menu-text);
-  }
+	.preferences .options {
+		font-weight: 500;
+		color: var(--clr-menu-text);
+	}
 
-  .preferences .options > :global(*) {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: var(--spacing-32);
-    padding: var(--spacing-24) 0;
-  }
+	.preferences .options > :global(*) {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: var(--spacing-32);
+		padding: var(--spacing-24) 0;
+	}
 
-  .preferences .options > :global(*:not(:last-child)) {
-    border-bottom: 1px solid var(--clr-menu-border);
-  }
+	.preferences .options > :global(*:not(:last-child)) {
+		border-bottom: 1px solid var(--clr-menu-border);
+	}
 
-  .preferences .options > :global(*:last-child) {
-    padding-bottom: 0;
-  }
+	.preferences .options > :global(*:last-child) {
+		padding-bottom: 0;
+	}
 
-  .preferences .options span {
-    max-width: 180px;
-  }
+	.preferences .options span {
+		max-width: 180px;
+	}
 
-  @media (min-width: 480px) {
-    .preferences {
-      width: 420px;
-    }
+	// @media (min-width: 650px) {
+	// 	.preferences {
+	// 		width: 500px;
+	// 	}
 
-    .preferences .options > :global(*) {
-      gap: var(--spacing-64);
-    }
-  }
+	// 	.preferences .options > :global(*) {
+	// 		gap: var(--spacing-64);
+	// 	}
+	// }
+
+	@media (min-width: 480px) {
+		.preferences {
+			width: 500px;
+		}
+
+		.preferences .options > :global(*) {
+			gap: var(--spacing-32);
+		}
+	}
 </style>
diff --git a/src/lib/components/search/advancedSearch/index.svelte b/src/lib/components/search/advancedSearch/index.svelte
index 283a2b3..4204a19 100644
--- a/src/lib/components/search/advancedSearch/index.svelte
+++ b/src/lib/components/search/advancedSearch/index.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { ActionData } from './$types';
 	import { boredState } from '$lib/stores/boredState';
 
 	export let form: ActionData;
diff --git a/src/lib/components/search/random/index.svelte b/src/lib/components/search/random/index.svelte
index 835cd73..6972972 100644
--- a/src/lib/components/search/random/index.svelte
+++ b/src/lib/components/search/random/index.svelte
@@ -31,6 +31,7 @@
 	action="/search"
 	method="POST"
 	use:enhance={() => {
+		gameStore.removeAll();
 		boredState.update((n) => ({ ...n, loading: true }));
 		return async ({ result }) => {
 			boredState.update((n) => ({ ...n, loading: false }));
@@ -38,7 +39,6 @@
 			// `result` is an `ActionResult` object
 			if (result.type === 'success') {
 				console.log('In success');
-				gameStore.removeAll();
 				const resultGames = result?.data?.games;
 				if (resultGames?.length <= 0) {
 					toast.send('No results!', { duration: 3000, type: ToastType.INFO, dismissible: true });
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 269157b..6f34b47 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -80,6 +80,7 @@
 		action="/search"
 		method="post"
 		use:enhance={() => {
+			gameStore.removeAll();
 			boredState.update((n) => ({ ...n, loading: true }));
 			return async ({ result }) => {
 				boredState.update((n) => ({ ...n, loading: false }));
@@ -87,7 +88,6 @@
 				// `result` is an `ActionResult` object
 				if (result.type === 'success') {
 					console.log('In success');
-					gameStore.removeAll();
 					const resultGames = result?.data?.games;
 					if (resultGames?.length <= 0) {
 						toast.send('No results!', { duration: 3000, type: ToastType.INFO, dismissible: true });
diff --git a/src/routes/api/game/+server.ts b/src/routes/api/game/+server.ts
deleted file mode 100644
index 7605f3f..0000000
--- a/src/routes/api/game/+server.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { json as json$1 } from '@sveltejs/kit';
-import type { RequestHandler } from '@sveltejs/kit';
-import type { GameType, SearchQuery } from '$lib/types';
-import { mapAPIGameToBoredGame } from '$lib/util/gameMapper';
-
-export const POST: RequestHandler = async ({ request }) => {
-  const form = await request.formData();
-  console.log('form', form);
-  const queryParams: SearchQuery = {
-    order_by: 'rank',
-    ascending: false,
-    limit: 10,
-    skip: 0,
-    client_id: import.meta.env.VITE_PUBLIC_CLIENT_ID,
-    fuzzy_match: true,
-    name: ''
-  };
-
-  queryParams.name = `${form.get('name')}`;
-
-  const newQueryParams = {};
-  for (const key in queryParams) {
-    console.log('key', key);
-    console.log('queryParams[key]', queryParams[key]);
-    newQueryParams[key] = `${queryParams[key]}`;
-  }
-
-  const urlQueryParams = new URLSearchParams(newQueryParams);
-
-  const url = `https://api.boardgameatlas.com/api/search${urlQueryParams ? `?${urlQueryParams}` : ''
-    }`;
-  const response = await fetch(url, {
-    method: 'get',
-    headers: {
-      'content-type': 'application/json'
-    }
-  });
-  // console.log('board game response', response);
-  if (response.status === 404) {
-    // user hasn't created a todo list.
-    // start with an empty array
-    return json$1({
-      games: []
-    });
-  }
-
-  if (response.status === 200) {
-    const gameResponse = await response.json();
-    const gameList = gameResponse?.games;
-    const totalCount = gameResponse?.count;
-    console.log('totalCount', totalCount);
-    const games: GameType[] = [];
-    gameList.forEach((game) => {
-      games.push(mapAPIGameToBoredGame(game));
-    });
-
-    return json$1({
-      totalCount,
-      games
-    });
-  }
-
-  return new Response(undefined, { status: response.status });
-};
diff --git a/src/routes/api/game/[id]/+server.ts b/src/routes/api/game/[id]/+server.ts
deleted file mode 100644
index be313a3..0000000
--- a/src/routes/api/game/[id]/+server.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { json as json$1 } from '@sveltejs/kit';
-import { boardGameApi } from '$root/routes/api';
-import type { RequestHandler } from '@sveltejs/kit';
-
-export const GET: RequestHandler = async ({ params }) => {
-  const queryParams = {
-    ids: `${params?.id}`
-  };
-  console.log('queryParams', queryParams);
-  const response = await boardGameApi('get', `search`, queryParams);
-  if (response.status === 404) {
-    return json$1({
-      games: []
-    });
-  }
-
-  if (response.status === 200) {
-    const gameResponse = await response.json();
-    // console.log('gameResponse', gameResponse);
-    // const games = gameResponse?.games;
-    console.log('game', gameResponse?.games[0]);
-    return json$1({
-      game: gameResponse?.games[0]
-    });
-  }
-
-  return new Response(undefined, { status: response.status });
-};
diff --git a/src/routes/api/games/+server.ts b/src/routes/api/games/+server.ts
deleted file mode 100644
index e0d8ab4..0000000
--- a/src/routes/api/games/+server.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import { json as json$1 } from '@sveltejs/kit';
-import type { RequestHandler } from '@sveltejs/kit';
-import type { GameType, SearchQuery } from '$lib/types';
-import { mapAPIGameToBoredGame } from '$lib/util/gameMapper';
-
-export const POST: RequestHandler = async ({ request }) => {
-  const form = await request.formData();
-  console.log('form', form);
-  const queryParams: SearchQuery = {
-    order_by: 'rank',
-    ascending: false,
-    limit: 20,
-    client_id: import.meta.env.VITE_PUBLIC_CLIENT_ID
-  };
-
-  const id = form.get('id');
-  const ids = form.get('ids');
-  const minAge = form.get('minAge');
-  const minPlayers = form.get('minPlayers');
-  const maxPlayers = form.get('maxPlayers');
-  const exactMinAge = form.get('exactMinAge') || false;
-  const exactMinPlayers = form.get('exactMinPlayers') || false;
-  const exactMaxPlayers = form.get('exactMaxPlayers') || false;
-  const random = form.get('random') === 'on' || false;
-
-  if (minAge) {
-    if (exactMinAge) {
-      queryParams.min_age = +minAge;
-    } else {
-      queryParams.gt_min_age = +minAge === 1 ? 0 : +minAge - 1;
-    }
-  }
-
-  if (minPlayers) {
-    if (exactMinPlayers) {
-      queryParams.min_players = +minPlayers;
-    } else {
-      queryParams.gt_min_players = +minPlayers === 1 ? 0 : +minPlayers - 1;
-    }
-  }
-
-  if (maxPlayers) {
-    if (exactMaxPlayers) {
-      queryParams.max_players = +maxPlayers;
-    } else {
-      queryParams.lt_max_players = +maxPlayers + 1;
-    }
-  }
-
-  if (id) {
-    queryParams.ids = new Array(`${id}`);
-  }
-
-  if (ids) {
-    // TODO: Pass in ids array from localstorage / game store
-    queryParams.ids = new Array(ids);
-  }
-
-  queryParams.random = random;
-  console.log('queryParams', queryParams);
-
-  const newQueryParams: Record<string, string> = {};
-  for (const key in queryParams) {
-    newQueryParams[key] = `${queryParams[key as keyof typeof queryParams]}`;
-  }
-
-  const urlQueryParams = new URLSearchParams(newQueryParams);
-
-  const url = `https://api.boardgameatlas.com/api/search${urlQueryParams ? `?${urlQueryParams}` : ''
-    }`;
-  const response = await fetch(url, {
-    method: 'get',
-    headers: {
-      'content-type': 'application/json'
-    }
-  });
-  console.log('board game response', response);
-  if (response.status === 404) {
-    // user hasn't created a todo list.
-    // start with an empty array
-    return json$1({
-      games: []
-    });
-  }
-
-  if (response.status === 200) {
-    const gameResponse = await response.json();
-    const gameList = gameResponse?.games;
-    const games: GameType[] = [];
-    gameList.forEach((game) => {
-      games.push(mapAPIGameToBoredGame(game));
-    });
-    console.log('games', games);
-    return {
-      games
-    };
-  }
-
-  return new Response(undefined, { status: response.status });
-};
diff --git a/src/routes/game/[id]/+page.server.ts b/src/routes/game/[id]/+page.server.ts
index 8972570..67fc509 100644
--- a/src/routes/game/[id]/+page.server.ts
+++ b/src/routes/game/[id]/+page.server.ts
@@ -1,7 +1,6 @@
 import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types'
 import { boardGameApi } from '../../api';
-// import { Games } from '$lib/db/actions';
 
 type GamePageParams = {
   params: {
@@ -9,33 +8,19 @@ type GamePageParams = {
   }
 }
 
-// export const actions = {
-//   default Games.create,
-// }
-
 export const load: PageServerLoad = async ({ params }: GamePageParams) => {
-  console.log('params', params); 
   const queryParams = {
     ids: `${params?.id}`
   };
-  // console.log('queryParams', queryParams);
+  
   const response = await boardGameApi('get', `search`, queryParams);
-  if (response.status === 404) {
-    return {
-      game: []
-    };
-  }
 
   if (response.status === 200) {
     const gameResponse = await response.json();
-    // console.log('gameResponse', gameResponse);
-    // const games = gameResponse?.games;
-    // console.log('game response', gameResponse?.games[0]);
     return {
       game: gameResponse?.games[0]
     };
   }
 
-  throw error(response.status);
-  // throw new Error("@migration task: Migrate this return statement (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292699)");
+  throw error(response.status, 'not found');
 };
diff --git a/src/routes/game/[id]/+page.svelte b/src/routes/game/[id]/+page.svelte
index eb41f3b..81b0e8b 100644
--- a/src/routes/game/[id]/+page.svelte
+++ b/src/routes/game/[id]/+page.svelte
@@ -1,155 +1,168 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
-  import {
-    ExternalLinkIcon,
-    MinusCircleIcon,
-    MinusIcon,
-    PlusCircleIcon,
-    PlusIcon
-  } from '@rgossiaux/svelte-heroicons/outline';
-  import type { GameType, SavedGameType } from '$lib/types';
-  import { collectionStore } from '$lib/stores/collectionStore';
-  import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
-  import { addToCollection } from '$lib/util/manipulateCollection';
-  import type { PageData } from './$types';
-  import { boredState } from '$root/lib/stores/boredState';
+	import { fade } from 'svelte/transition';
+	import {
+		ExternalLinkIcon,
+		MinusCircleIcon,
+		MinusIcon,
+		PlusCircleIcon,
+		PlusIcon
+	} from '@rgossiaux/svelte-heroicons/outline';
+	import type { GameType, SavedGameType } from '$lib/types';
+	import { collectionStore } from '$lib/stores/collectionStore';
+	import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
+	import { addToCollection } from '$lib/util/manipulateCollection';
+	import type { PageData } from './$types';
+	import { boredState } from '$root/lib/stores/boredState';
+	import { browser } from '$app/environment';
 
-  $: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
+	$: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
 
-  export let data: PageData;
-  export let game: GameType = data?.game;
-  console.log('page game', game);
-  let seeMore: boolean = false;
-  console.log(game?.description?.indexOf('</p>'));
-  let firstParagraphEnd = 0;
-  if (game?.description?.indexOf('</p>') > 0) {
-    firstParagraphEnd = game?.description?.indexOf('</p>') + 4;
-  } else if (game?.description?.indexOf('</ p>') > 0) {
-    firstParagraphEnd = game?.description?.indexOf('</ p>') + 5;
-  }
-  console.log('firstParagraphEnd', firstParagraphEnd);
+	export let data: PageData;
+	export let game: GameType = data?.game;
+	console.log('page game', game);
+	let seeMore: boolean = false;
+	console.log(game?.description?.indexOf('</p>'));
+	let firstParagraphEnd = 0;
+	if (game?.description?.indexOf('</p>') > 0) {
+		firstParagraphEnd = game?.description?.indexOf('</p>') + 4;
+	} else if (game?.description?.indexOf('</ p>') > 0) {
+		firstParagraphEnd = game?.description?.indexOf('</ p>') + 5;
+	}
+	console.log('firstParagraphEnd', firstParagraphEnd);
 
-  function removeGame() {
-    boredState.update((n) => ({
-      ...n,
-      dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: game }
-    }));
-  }
+	function removeGame() {
+		boredState.update((n) => ({
+			...n,
+			dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: game }
+		}));
+		if (browser) {
+			localStorage.collection = JSON.stringify($collectionStore);
+		}
+	}
 </script>
 
 <svelte:head>
-  <title>{game?.name} | Bored Game</title>
+	<title>{game?.name} | Bored Game</title>
 </svelte:head>
 
 <h2>{game?.name}</h2>
 
 <section class="games">
-  <div>
-    <a class="thumbnail" href={game.url}>
-      <img src={game.image_url} alt={`Image of ${game.name}`} />
-    </a>
-  </div>
-  <div class="details">
-    <p>Year Published: {game?.year_published}</p>
-    <p>Players: {game.players} {game.max_players === 1 ? 'player' : 'players'}</p>
-    <p>Playtime: {game.playtime} minutes</p>
-    <p>Minimum Age: {game.min_age}</p>
-    <p>Price: ${game?.price}</p>
-    <a
-      class="with-icon"
-      style="display: flex; gap: 1rem;"
-      href={game.url}
-      target="_blank"
-      rel="noreferrer"
-      aria-label={`Board Game Atlas Link for ${game.name}`}
-      >Board Game Atlas Link <ExternalLinkIcon width="24" height="24" /></a
-    >
-    {#if existsInCollection}
-      <button class="btn" type="button" on:click={() => removeGame()}
-        >Remove from collection <MinusCircleIcon width="24" height="24" /></button
-      >
-    {:else}
-      <button class="btn" type="button" on:click={() => addToCollection(game)}
-        >Add to collection <PlusCircleIcon width="24" height="24" /></button
-      >
-    {/if}
-  </div>
+	<div>
+		<a class="thumbnail" href={game.url}>
+			<img src={game.image_url} alt={`Image of ${game.name}`} />
+		</a>
+	</div>
+	<div class="details">
+		<p>Year Published: {game?.year_published}</p>
+		<p>Players: {game.players} {game.max_players === 1 ? 'player' : 'players'}</p>
+		<p>Playtime: {game.playtime} minutes</p>
+		<p>Minimum Age: {game.min_age}</p>
+		{#if +game?.price !== 0.0}
+			<p>Price: ${game?.price}</p>
+		{/if}
+		<a
+			class="with-icon"
+			style="display: flex; gap: 1rem;"
+			href={game.url}
+			target="_blank"
+			rel="noreferrer"
+			aria-label={`Board Game Atlas Link for ${game.name}`}
+			>Board Game Atlas Link <ExternalLinkIcon width="24" height="24" /></a
+		>
+		{#if existsInCollection}
+			<button class="btn" type="button" on:click={() => removeGame()}
+				>Remove from collection <MinusCircleIcon width="24" height="24" /></button
+			>
+		{:else}
+			<button
+				class="btn"
+				type="button"
+				on:click={() => {
+					addToCollection(game);
+					if (browser) {
+						localStorage.collection = JSON.stringify($collectionStore);
+					}
+				}}>Add to collection <PlusCircleIcon width="24" height="24" /></button
+			>
+		{/if}
+	</div>
 </section>
 {#if firstParagraphEnd > 0}
-  <section class="description">
-    <span>
-      {@html game?.description?.substring(0, firstParagraphEnd)}
-    </span>
-    {#if game?.description?.substring(firstParagraphEnd + 1) !== ''}
-      {#if seeMore}
-        <span transition:fade>
-          {@html game?.description?.substring(firstParagraphEnd + 1)}
-        </span>
-      {/if}
-      <button class="btn" type="button" on:click={() => (seeMore = !seeMore)}
-        >See
-        {#if !seeMore}
-          More <PlusIcon width="24" height="24" />
-        {:else}
-          Less <MinusIcon width="24" height="24" />
-        {/if}
-      </button>
-    {/if}
-  </section>
+	<section class="description">
+		<span>
+			{@html game?.description?.substring(0, firstParagraphEnd)}
+		</span>
+		{#if game?.description?.substring(firstParagraphEnd + 1) !== ''}
+			{#if seeMore}
+				<span transition:fade>
+					{@html game?.description?.substring(firstParagraphEnd + 1)}
+				</span>
+			{/if}
+			<button class="btn" type="button" on:click={() => (seeMore = !seeMore)}
+				>See
+				{#if !seeMore}
+					More <PlusIcon width="24" height="24" />
+				{:else}
+					Less <MinusIcon width="24" height="24" />
+				{/if}
+			</button>
+		{/if}
+	</section>
 {:else}
-  <section class="description">
-    <span>
-      {@html game?.description}
-    </span>
-  </section>
+	<section class="description">
+		<span>
+			{@html game?.description}
+		</span>
+	</section>
 {/if}
 
 <style lang="scss">
-  h2 {
-    text-align: center;
-    font-size: 2.5rem;
-    font-weight: 600;
-    margin-bottom: 3rem;
-  }
+	h2 {
+		text-align: center;
+		font-size: 2.5rem;
+		font-weight: 600;
+		margin-bottom: 3rem;
+	}
 
-  button {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-radius: 4px;
-    margin: 0;
-    padding: 1rem;
-    max-width: 30rem;
-    background-color: var(--color-btn-primary-active);
-  }
+	button {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border-radius: 4px;
+		margin: 0;
+		padding: 1rem;
+		max-width: 30rem;
+		background-color: var(--color-btn-primary-active);
+	}
 
-  .games {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 2rem;
-    margin: 1rem;
-  }
+	.games {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 2rem;
+		margin: 1rem;
+	}
 
-  .details {
-    display: grid;
-    gap: 0.5rem;
-    align-content: center;
-    justify-content: start;
-    margin: 1rem;
-    a,
-    p {
-      margin: 1rem;
-    }
-  }
+	.details {
+		display: grid;
+		gap: 0.5rem;
+		align-content: center;
+		justify-content: start;
+		margin: 1rem;
+		a,
+		p {
+			margin: 1rem;
+		}
+	}
 
-  .description {
-    display: grid;
-    gap: 1.5rem;
-    margin: 1rem;
-  }
+	.description {
+		display: grid;
+		gap: 1.5rem;
+		margin: 1rem;
+	}
 
-  .with-icon {
-    display: flex;
-    place-items: center;
-  }
+	.with-icon {
+		display: flex;
+		place-items: center;
+	}
 </style>