diff --git a/package.json b/package.json
index e4e4a99..535b905 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
     "format": "prettier --write --plugin-search-dir=. ."
   },
   "devDependencies": {
+    "@iconify-icons/line-md": "^1.2.21",
+    "@iconify-icons/mdi": "^1.2.39",
     "@iconify/svelte": "^3.0.1",
     "@playwright/test": "^1.29.2",
     "@rgossiaux/svelte-headlessui": "1.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d2684ce..eeffcda 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2,6 +2,8 @@ lockfileVersion: 5.4
 
 specifiers:
   '@fontsource/fira-mono': ^4.5.10
+  '@iconify-icons/line-md': ^1.2.21
+  '@iconify-icons/mdi': ^1.2.39
   '@iconify/svelte': ^3.0.1
   '@leveluptuts/svelte-side-menu': ^1.0.5
   '@leveluptuts/svelte-toy': ^2.0.3
@@ -62,6 +64,8 @@ dependencies:
   zod-to-json-schema: 3.20.2_zod@3.20.2
 
 devDependencies:
+  '@iconify-icons/line-md': 1.2.21
+  '@iconify-icons/mdi': 1.2.39
   '@iconify/svelte': 3.0.1_svelte@3.55.1
   '@playwright/test': 1.29.2
   '@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.55.1
@@ -364,6 +368,18 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
+  /@iconify-icons/line-md/1.2.21:
+    resolution: {integrity: sha512-u1oQa5IFL2Xn/01urpx5IuMlM5Dk3UrxpvcGSDzFPDIk/oD8RtI7kVKuFK110mRLjR8swdhKBTPXWBrZgfgj9w==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
+  /@iconify-icons/mdi/1.2.39:
+    resolution: {integrity: sha512-fFYh21To6lmqyYy1w3ZahE3aTjoDxwiehI7KPYxDplmM7ZUfeP0sPeyuCHzwfJ/YlV8w8JTZWIgKGdpmmuqtCQ==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify/svelte/3.0.1_svelte@3.55.1:
     resolution: {integrity: sha512-onjjl496hTXUBWJxeCxo/c5zmVHS3HnKUQv5Cqf1ZsUbY4d0wVJfSDaV1hw1m6b0BNlJCOmbpc23Q6AOO5qqKg==}
     peerDependencies:
diff --git a/src/lib/components/button/index.svelte b/src/lib/components/button/index.svelte
index 9d977ce..40a45ce 100644
--- a/src/lib/components/button/index.svelte
+++ b/src/lib/components/button/index.svelte
@@ -9,7 +9,7 @@
 	<slot />
 </button>
 
-<style>
+<style lang="postcss">
 	button {
 		display: flex;
 		justify-content: space-between;
@@ -19,7 +19,13 @@
 		padding: 1rem;
 		min-width: 20rem;
 		max-width: 30rem;
+		min-height: 6.2rem;
+		text-align: start;
 		background-color: var(--color-btn-primary-active);
+
+		@media (min-width: env(--large-viewport)) {
+			min-width: 23.5rem;
+		}
 	}
 
 	.danger {
diff --git a/src/lib/components/game/index.svelte b/src/lib/components/game/index.svelte
index 7149077..13ba01b 100644
--- a/src/lib/components/game/index.svelte
+++ b/src/lib/components/game/index.svelte
@@ -2,7 +2,10 @@
 	import { createEventDispatcher } from 'svelte';
 	import { Image } from 'svelte-lazy-loader';
 	import { fade } from 'svelte/transition';
-	import { MinusCircleIcon, PlusCircleIcon } from '@rgossiaux/svelte-heroicons/outline';
+	import Icon from '@iconify/svelte/dist/OfflineIcon.svelte';
+	import plusCircle from '@iconify-icons/line-md/plus-circle';
+	import minusCircle from '@iconify-icons/line-md/minus-circle';
+	import Button from '$lib/components/button/index.svelte';
 	import type { GameType, SavedGameType } from '$lib/types';
 	import { collectionStore } from '$lib/stores/collectionStore';
 	import { wishlistStore } from '$root/lib/stores/wishlistStore';
@@ -23,6 +26,28 @@
 		dispatch('handleRemoveCollection', game);
 	}
 
+	function onCollectionClick() {	
+		if (existsInCollection) {
+			removeGameFromCollection();
+		} else {
+			addToCollection(game);
+			if (browser) {
+				localStorage.collection = JSON.stringify($collectionStore);
+			}
+		}
+	}
+
+	function onWishlistClick() {
+		if (existsInWishlist) {
+			removeGameFromWishlist();
+		} else {
+			addToWishlist(game);
+			if (browser) {
+				localStorage.wishlist = JSON.stringify($wishlistStore);
+			}
+		}
+	}
+
 	// Naive and assumes description is only on our GameType at the moment
 	function isGameType(game: GameType | SavedGameType): game is GameType {
 		return (game as GameType).description !== undefined;
@@ -43,6 +68,8 @@
 
 	$: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
 	$: existsInWishlist = $wishlistStore.find((item: SavedGameType) => item.id === game.id);
+	$: collectionText = existsInCollection ? 'Remove from collection' : 'Add to collection';
+	$: wishlistText = existsInWishlist ? 'Remove from wishlist' : 'Add to wishlist';
 </script>
 
 <article class="game-container" transition:fade>
@@ -70,50 +97,22 @@
 	</div>
 
 	<div class="game-buttons">
-		{#if existsInCollection}
-			<button
-				aria-label="Remove from collection"
-				class="btn remove"
-				type="button"
-				on:click={() => {
-					removeGameFromCollection();
-				}}><span>Remove from Collection</span> <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);
-					}
-				}}><span>Add to collection</span> <PlusCircleIcon width="24" height="24" /></button
-			>
-		{/if}
-		{#if existsInWishlist}
-			<button
-				aria-label="Remove from wishlist"
-				class="btn remove"
-				type="button"
-				on:click={() => {
-					removeGameFromWishlist();
-				}}><span>Remove from Wishlist</span> <MinusCircleIcon width="24" height="24" /></button
-			>
-		{:else}
-			<button
-				aria-label="Add to wishlist"
-				class="btn"
-				type="button"
-				on:click={() => {
-					addToWishlist(game);
-					if (browser) {
-						localStorage.wishlist = JSON.stringify($wishlistStore);
-					}
-				}}><span>Add to wishlist</span> <PlusCircleIcon width="24" height="24" /></button
-			>
-		{/if}
+		<Button size="md" kind={existsInCollection ? 'danger' : 'primary'} icon on:click={onCollectionClick}>
+			{collectionText}
+			{#if existsInCollection}
+				<Icon icon={minusCircle} width="24" height="24" />
+			{:else}
+				<Icon icon={plusCircle} width="24" height="24" />
+			{/if}
+		</Button>
+		<Button size="md" kind={existsInWishlist ? 'danger' : 'primary'} icon on:click={onWishlistClick}>
+			{wishlistText}
+			{#if existsInWishlist}
+				<Icon icon={minusCircle} width="24" height="24" />
+			{:else}
+				<Icon icon={plusCircle} width="24" height="24" />
+			{/if}
+		</Button>
 	</div>
 </article>
 
diff --git a/src/lib/components/preferences/profile.svelte b/src/lib/components/preferences/profile.svelte
index a2aa539..b3a35f2 100644
--- a/src/lib/components/preferences/profile.svelte
+++ b/src/lib/components/preferences/profile.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 	import { Popover, PopoverButton, PopoverPanel } from '@rgossiaux/svelte-headlessui';
-	import Icon from '@iconify/svelte';
+	import Icon from '@iconify/svelte/dist/OfflineIcon.svelte';
+	import cogOutline from '@iconify-icons/mdi/cog-outline';
 	import Themes from './themes.svelte';
 	import GameCollection from './gameCollection.svelte';
 	import GameWishlist from './gameWishlist.svelte';
@@ -11,8 +12,15 @@
 	<Popover let:open class="popover">
 		<PopoverButton aria-label="Preferences">
 			<!-- <CogIcon width="24" height="24" /> -->
+			<!-- <iconify-icon icon="mdi:cog-outline"
+				width="24" height="24"
+				style={open ?
+					'transform: rotate(90deg); transition: transform 0.5s ease;'
+					: 'transform: rotate(0deg); transition: transform 0.5s ease;'
+				}
+				></iconify-icon> -->
 			<Icon
-				icon="mdi:cog-outline"
+				icon={cogOutline}
 				width="24" height="24"
 				style={open ?
 					'transform: rotate(90deg); transition: transform 0.5s ease;'
diff --git a/src/lib/util/icons/line-md-icons.ts b/src/lib/util/icons/line-md-icons.ts
new file mode 100644
index 0000000..bd78eb9
--- /dev/null
+++ b/src/lib/util/icons/line-md-icons.ts
@@ -0,0 +1,17 @@
+import { addCollection } from '@iconify/svelte';
+
+addCollection({
+	prefix: 'line-md',
+	lastModified: 1672653839,
+	aliases: {},
+	width: 24,
+	height: 24,
+	icons: {
+		'minus-circle': {
+			body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="12" stroke-dashoffset="12" d="M7 12H17"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="12;0"/></path></g>'
+		},
+		'plus-circle': {
+			body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><g stroke-dasharray="12" stroke-dashoffset="12"><path d="M12 7V17"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.8s" dur="0.2s" values="12;0"/></path><path d="M7 12H17"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="12;0"/></path></g><path stroke-dasharray="60" stroke-dashoffset="60" d="M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path></g>'
+		}
+	}
+});
diff --git a/src/lib/util/icons/mdi-icons.ts b/src/lib/util/icons/mdi-icons.ts
new file mode 100644
index 0000000..779444e
--- /dev/null
+++ b/src/lib/util/icons/mdi-icons.ts
@@ -0,0 +1,14 @@
+import { addCollection } from '@iconify/svelte';
+
+addCollection({
+	prefix: 'mdi',
+	lastModified: 1673788155,
+	aliases: {},
+	width: 24,
+	height: 24,
+	icons: {
+		'cog-outline': {
+			body: '<path fill="currentColor" d="M12 8a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 2a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2m-2 12c-.25 0-.46-.18-.5-.42l-.37-2.65c-.63-.25-1.17-.59-1.69-.99l-2.49 1.01c-.22.08-.49 0-.61-.22l-2-3.46a.493.493 0 0 1 .12-.64l2.11-1.66L4.5 12l.07-1l-2.11-1.63a.493.493 0 0 1-.12-.64l2-3.46c.12-.22.39-.31.61-.22l2.49 1c.52-.39 1.06-.73 1.69-.98l.37-2.65c.04-.24.25-.42.5-.42h4c.25 0 .46.18.5.42l.37 2.65c.63.25 1.17.59 1.69.98l2.49-1c.22-.09.49 0 .61.22l2 3.46c.13.22.07.49-.12.64L19.43 11l.07 1l-.07 1l2.11 1.63c.19.15.25.42.12.64l-2 3.46c-.12.22-.39.31-.61.22l-2.49-1c-.52.39-1.06.73-1.69.98l-.37 2.65c-.04.24-.25.42-.5.42h-4m1.25-18l-.37 2.61c-1.2.25-2.26.89-3.03 1.78L5.44 7.35l-.75 1.3L6.8 10.2a5.55 5.55 0 0 0 0 3.6l-2.12 1.56l.75 1.3l2.43-1.04c.77.88 1.82 1.52 3.01 1.76l.37 2.62h1.52l.37-2.61c1.19-.25 2.24-.89 3.01-1.77l2.43 1.04l.75-1.3l-2.12-1.55c.4-1.17.4-2.44 0-3.61l2.11-1.55l-.75-1.3l-2.41 1.04a5.42 5.42 0 0 0-3.03-1.77L12.75 4h-1.5Z"/>'
+		}
+	}
+});
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 34cbac8..bdd81f2 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -15,6 +15,7 @@
 	import { toast } from '$lib/components/toast/toast';
 	import Toast from '$lib/components/toast/Toast.svelte';
 	import '$root/styles/styles.pcss';
+	// import 'iconify-icon';
 
 	import type { SavedGameType } from '$root/lib/types';
 
diff --git a/src/routes/game/[id]/+page.svelte b/src/routes/game/[id]/+page.svelte
index f2fb8c9..686edef 100644
--- a/src/routes/game/[id]/+page.svelte
+++ b/src/routes/game/[id]/+page.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { fade, fly } from 'svelte/transition';
 	import { Image } from 'svelte-lazy-loader';
-	import Icon from '@iconify/svelte';
+	import Icon from '@iconify/svelte/dist/OfflineIcon.svelte';
+	import minusCircle from '@iconify-icons/line-md/minus-circle';
+	import plusCircle from '@iconify-icons/line-md/plus-circle';
 	import {
   ChevronRightIcon,
 		ExternalLinkIcon,
@@ -115,17 +117,17 @@
 		<Button size="md" kind={existsInCollection ? 'danger' : 'primary'} icon on:click={onCollectionClick}>
 			{collectionText}
 			{#if existsInCollection}
-				<Icon icon="line-md:minus-circle" width="24" height="24" />
+				<Icon icon={minusCircle} width="24" height="24" />
 			{:else}
-				<Icon icon="line-md:plus-circle" width="24" height="24" />
+				<Icon icon={plusCircle} width="24" height="24" />
 			{/if}
 		</Button>
 		<Button size="md" kind={existsInWishlist ? 'danger' : 'primary'} icon on:click={onWishlistClick}>
 			{wishlistText}
 			{#if existsInWishlist}
-				<Icon icon="line-md:minus-circle" width="24" height="24" />
+				<Icon icon={minusCircle} width="24" height="24" />
 			{:else}
-				<Icon icon="line-md:plus-circle" width="24" height="24" />
+				<Icon icon={plusCircle} width="24" height="24" />
 			{/if}
 		</Button>
 		</div>