diff --git a/public/appBG.jpg b/public/appBG.jpg
new file mode 100644
index 0000000..ee7b49f
Binary files /dev/null and b/public/appBG.jpg differ
diff --git a/src/App.vue b/src/App.vue
index 4312155..be19029 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,8 +14,8 @@ export default {
 
 <template>
   <h1 class="text-white absolute w-screen text-center pt-1 text-5xl">Seere</h1>
-  <div class="bg-slate-600 h-screen w-screen pt-16">
-    <div class="bg-[#B4CDED] h-4/6 w-10/12 mx-auto flex flex-row space-x-3 pt-3 pb-3 px-3 rounded-md">
+  <div class="bg-[url(./appBG.jpg)] bg-cover h-screen w-screen pt-16">
+    <div class="bg-[#B4CDED] h-[90%] w-[90%] mx-auto flex flex-row space-x-3 pt-3 pb-3 px-3 rounded-lg">
 
       <div class="bg-[#F0F4EF] flex-1 rounded-lg">
         <BingoInput />
diff --git a/src/components/BingoDisplay.vue b/src/components/BingoDisplay.vue
index 7249f9b..3ceba01 100644
--- a/src/components/BingoDisplay.vue
+++ b/src/components/BingoDisplay.vue
@@ -3,15 +3,11 @@ import { defineComponent } from 'vue';
 import { useDeckStore } from '../store/deck';
 import { storeToRefs } from 'pinia';
 
+
 export default defineComponent({
     setup() {
-        // const currentDeck = ref([]);
         const store = useDeckStore();
-
         const { cards } = storeToRefs(store);
-
-
-        // This really shouldnt be an :any input for the shuffle function but its the only way it'll let me build
     
         function shuffle(deckArray: any) {
             let currentIndex = deckArray.length, randomIndex;
@@ -29,6 +25,7 @@ export default defineComponent({
             }
             return deckArray
         }
+
         // End Function Declarations
         return { store, cards, shuffle }  
     },
@@ -38,13 +35,14 @@ export default defineComponent({
 <template>
 
         <div class="grid grid-cols-5 space-y-1 space-x-1 p-5 flex-1">
-            <!-- Abstract the classes into custom card components -->
-            <!-- Aight we got reactivity, now lets randomize it -->
-            <div v-for="cardItem in cards" class="bg-[#344966] text-[#F0F4EF] p-1 rounded-md m-1">
-                    <span> {{ cardItem.card }} </span>
-            </div>
+
+            <!-- TODO: Fix the buttons below -->
+            <button v-for="cardItem in cards" class="bg-[#344966] text-[#F0F4EF] p-1 rounded-md m-1" @click="cards.statusChange(cardItem)">
+                    <span v-if="cardItem.status === true" class="bg-gray-500 text-blue-300"> {{ cardItem.card }}</span>
+                    <span v-else> {{ cardItem.card }} </span>
+            </button>
         </div>
-        <!-- Impliment Shuffle function after pulling the items into an array for this component-->
+
         <div class="flex flex-col items-center">
             <button class="bg-[#B4CDED] text-[#0D1821] px-2 py-1 rounded-xl" @click="shuffle(cards)">
                 Generate
diff --git a/src/store/deck.ts b/src/store/deck.ts
index 2c119ba..1476f38 100644
--- a/src/store/deck.ts
+++ b/src/store/deck.ts
@@ -3,19 +3,22 @@ import { defineStore } from 'pinia';
 export interface Card {
   card: String;
   id: number;
+  status: boolean;
 }
 
 export const useDeckStore = defineStore('deck', {
   state: () => ({
     cards: [] as Card[],
-    id: 0,
   }),
   actions: {
     addCard(card: string) {
-      this.cards.push({card, id: this.id++})
+      this.cards.push({card, id: this.id++, status: false})
     },
     removeCard(card: Card){
       this.cards.splice(this.cards.indexOf(card), 1);
+    },
+    statusChange(card: Card){
+      card.status = !card.status
     }
   },
   persist: true,