diff --git a/components/app/play/LetterBlock.vue b/components/app/play/LetterBlock.vue
index 4e5511a..a57a591 100644
--- a/components/app/play/LetterBlock.vue
+++ b/components/app/play/LetterBlock.vue
@@ -1,11 +1,11 @@
 <template>
   <li
     :id="String(letter.id)"
-    class="text-center text-2xl relative inline-block h-14 w-16 p-2 border-2 border-secondary rounded-md bg-raisin transition-all cursor-pointer"
+    class="text-center text-2xl relative inline-block h-14 w-16 p-2 border-2 bg-base-100 rounded-md transition-all cursor-pointer"
     :class="{
       'grayscale blur-sm': letter.active && !queue,
       'hover:shadow-[inset_0_0_10px_rgba(169,255,203,1)] ': !letter.active,
-      'bg-blue-400 bg-opacity-30 text-seasalt border-blue-400': letter,
+      // 'bg-blue-400 bg-opacity-30 text-seasalt border-blue-400': letter,
     }"
     @click="$emit('toggle', letter)"
   >
@@ -21,7 +21,6 @@ const props = defineProps<{
   disabled: boolean;
   queue?: boolean;
 }>();
-console.log(props.letter.active, props.queue);
 const emits = defineEmits<{
   toggle: Letter;
 }>();
diff --git a/components/app/play/PlayModePanel.vue b/components/app/play/PlayModePanel.vue
index 78630ce..fc23377 100644
--- a/components/app/play/PlayModePanel.vue
+++ b/components/app/play/PlayModePanel.vue
@@ -16,10 +16,20 @@ import AdventureCard from "./cards/AdventureCard.vue";
 import MasterCard from "./cards/MasterCard.vue";
 import ComputerCard from "./cards/ComputerCard.vue";
 import { Difficulty } from "~/types";
+
+const router = useRouter();
+const matchmaker = useMatchmaker();
 const props = defineProps<{
   primary?: boolean; // takes up 3 cols instead of 1
   disabled?: boolean;
 }>();
 const modes = [CasualCard, AdventureCard, MasterCard, ComputerCard];
+matchmaker.$subscribe((_, val) => {
+  if (val.type === Difficulty.COMPUTER) {
+    router.push("/app/play/computer");
+  } else {
+    emits("matchmake", val.type);
+  }
+});
 const emits = defineEmits(["matchmake"]);
 </script>
diff --git a/components/app/play/cards/AdventureCard.vue b/components/app/play/cards/AdventureCard.vue
index 3e52c6a..0d45472 100644
--- a/components/app/play/cards/AdventureCard.vue
+++ b/components/app/play/cards/AdventureCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <BaseCard>
+  <BaseCard @click="matchmaker.type = Difficulty.ADVENTURE">
     <figure class="h-full p-2">
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -24,6 +24,5 @@
 </template>
 <script setup lang="ts">
 import { Difficulty } from "~/types";
-
-const emits = defineEmits(["play"]);
+const matchmaker = useMatchmaker();
 </script>
diff --git a/components/app/play/cards/CasualCard.vue b/components/app/play/cards/CasualCard.vue
index cdca42d..ba78b53 100644
--- a/components/app/play/cards/CasualCard.vue
+++ b/components/app/play/cards/CasualCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <BaseCard>
+  <BaseCard @click="matchmaker.type = Difficulty.CASUAL">
     <figure class="w-24 h-24 p-2">
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -22,6 +22,5 @@
 
 <script setup lang="ts">
 import { Difficulty } from "~/types";
-// define play emit
-const emits = defineEmits(["play"]);
+const matchmaker = useMatchmaker();
 </script>
diff --git a/components/app/play/cards/ComputerCard.vue b/components/app/play/cards/ComputerCard.vue
index d51c4d8..76561a7 100644
--- a/components/app/play/cards/ComputerCard.vue
+++ b/components/app/play/cards/ComputerCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <BaseCard class="bg-green-200">
+  <BaseCard class="bg-green-200" @click="matchmaker.type = Difficulty.COMPUTER">
     <figure class="w-24 h-24 p-2">
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -21,7 +21,5 @@
 </template>
 <script setup lang="ts">
 import { Difficulty } from "~/types";
-
-// define play emit
-const emits = defineEmits(["play"]);
+const matchmaker = useMatchmaker();
 </script>
diff --git a/components/app/play/cards/MasterCard.vue b/components/app/play/cards/MasterCard.vue
index 1845c76..fac151f 100644
--- a/components/app/play/cards/MasterCard.vue
+++ b/components/app/play/cards/MasterCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <BaseCard class="bg-secondary">
+  <BaseCard class="bg-secondary" @click="matchmaker.type = Difficulty.MASTER">
     <figure class="w-24 h-24 p-2">
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -21,6 +21,5 @@
 </template>
 <script setup lang="ts">
 import { Difficulty } from "~/types";
-// define play emit
-const emits = defineEmits(["play"]);
+const matchmaker = useMatchmaker;
 </script>
diff --git a/composables/useMatchmaker.ts b/composables/useMatchmaker.ts
index 46daf78..eace9ce 100644
--- a/composables/useMatchmaker.ts
+++ b/composables/useMatchmaker.ts
@@ -1,12 +1,11 @@
-import { defineStore, acceptHMRUpdate } from "pinia";
+import { defineStore } from "pinia";
 import { Difficulty, GameConnectionStatus } from "~/types";
 
-export const useMatchmakerStore = defineStore({
-  id: "matchmaker",
-  state: () => ({
-    type: null as Difficulty | null,
-    status: null as GameConnectionStatus.CONNECTING | null,
-  }),
+export default defineStore("matchmaker", {
+  state: () => {
+    return {
+      type: null as Difficulty | null,
+      status: null as GameConnectionStatus | null,
+    };
+  },
 });
-if (import.meta.hot)
-  import.meta.hot.accept(acceptHMRUpdate(useMatchmakerStore, import.meta.hot));
diff --git a/pages/app/play/[id].vue b/pages/app/play/[id].vue
index f6e2e3d..f06cc41 100644
--- a/pages/app/play/[id].vue
+++ b/pages/app/play/[id].vue
@@ -20,9 +20,7 @@
             gameStatus == GameStatus.PLAYER_SUDDEN_DEATH,
         }"
       >
-        <span class="text-4xl block text-seasalt">{{
-          userStore.username
-        }}</span>
+        <span class="text-4xl block">{{ userStore.username }}</span>
         <Avatar :src="userStore.picture" />
         <ul class="space-x-4 my-4">
           <LetterBlock
@@ -35,7 +33,7 @@
           />
         </ul>
         <div
-          class="absolute bottom-4 right-4 bg-apricot p-4 rounded-md text-2xl text-primary"
+          class="absolute bottom-4 right-4 bg-apricot p-4 rounded-md text-2xl"
         >
           +{{ points }} Points
         </div>
@@ -64,7 +62,7 @@
         }}</span>
         <Avatar :src="opponent?.picture || ''" />
         <div
-          class="absolute bottom-4 left-4 bg-apricot p-4 rounded-md text-2xl text-primary"
+          class="absolute bottom-4 left-4 bg-apricot p-4 rounded-md text-2xl"
         >
           +{{ opponentPoints }} Points
         </div>
@@ -82,8 +80,8 @@
       </ul>
     </div>
   </div>
-  <WaitingToast v-if="status == GameConnectionStatus.WAITING" />
-  <ConnectingToast v-if="status == GameConnectionStatus.CONNECTING" />
+  <Waiting v-if="status == GameConnectionStatus.WAITING" />
+  <Connecting v-if="status == GameConnectionStatus.CONNECTING" />
   <TransitionRoot
     appear
     :show="
@@ -274,7 +272,7 @@ useKeydownEvent((event) => {
         !letter.active && letter.value.toLowerCase() == event.key.toLowerCase()
     );
     if (possibleLetter) {
-      toggleLetter(possibleLetter, true);
+      toggleLetter(possibleLetter, false);
     }
   }
 });
@@ -298,7 +296,7 @@ const toggleLetter = (letter: Letter, active = false) => {
 };
 
 const popFromQueue = () => {
-  const lastLetter = queue.pop();
+  const lastLetter = queue[queue.length - 1];
   // assumes lastLetter.active is true
   if (!lastLetter) return;
   toggleLetter(lastLetter);