diff --git a/client/src/components/BingoTile.vue b/client/src/components/BingoTile.vue
index 034fbf3..e22653d 100644
--- a/client/src/components/BingoTile.vue
+++ b/client/src/components/BingoTile.vue
@@ -2,90 +2,96 @@
 import { computed } from 'vue'
 
 const props = defineProps<{
-    type: "connect" | "understand" | "act"
-    text: string
-    status: "not started" | "started" | "completed"
-    selected: boolean
+  type: 'connect' | 'understand' | 'act'
+  text: string
+  status: 'not started' | 'started' | 'completed'
+  selected: boolean
 }>()
 
-
 const icon = computed(() => {
-    switch (props.type) {
-        case "act":
-            return "walking.svg"
-        case "understand":
-            return "brain.svg"
-        default:
-            return "link.svg"
-    }
+  switch (props.type) {
+    case 'act':
+      return 'walking.svg'
+    case 'understand':
+      return 'brain.svg'
+    default:
+      return 'link.svg'
+  }
 })
 
-
 const backgroundColour = computed(() => {
-    switch (props.status) {
-        case "started":
-            return "bg-primaryPink"
-        case "completed":
-            return "bg-lightBlue"
-        default:
-            return "bg-creamWhite"
-    }
+  switch (props.status) {
+    case 'started':
+      return 'bg-primaryPink'
+    case 'completed':
+      return 'bg-lightBlue'
+    default:
+      return 'bg-creamWhite'
+  }
 })
 
 const textColour = computed(() => {
-    switch (props.status) {
-        case "started":
-        case "completed":
-            return "text-primaryWhite"
-        default:
-            return "text-primaryBlack"
-    }
+  switch (props.status) {
+    case 'completed':
+      return 'text-primaryWhite'
+    default:
+      return 'text-primaryBlack'
+  }
 })
 
 const iconBackground = computed(() => {
-    switch (backgroundColour.value) {
-        case "bg-creamWhite":
-            return "dark"
-        default:
-            return "light"
-    }
+  switch (backgroundColour.value) {
+    case 'bg-creamWhite':
+      return 'dark'
+    default:
+      return 'light'
+  }
 })
-
 </script>
 
 <template>
-    <div :class="[backgroundColour, textColour]" class="outer-tile rounded-lg d-flex flex-column align-center ">
-        <v-img class="icon" :class="iconBackground" :src="icon" />
-        <p class="tile-text text-center font-weight-bold">
-            {{ text }}
-        </p>
-
-    </div>
+  <div
+    :class="[backgroundColour, textColour, selected ? 'border-selected' : 'border-subtle']"
+    class="outer-tile rounded-lg d-flex flex-column align-center"
+  >
+    <v-img class="icon" :class="iconBackground" :src="icon" />
+    <p class="w-100 tile-text text-center font-weight-bold overflow-x-hidden overflow-hidden">
+      {{ text }}
+    </p>
+  </div>
 </template>
 
 <style scoped>
 .outer-tile {
-    height: 5rem;
-    width: 5rem;
-    border: #4F4F4F 0.1rem solid;
-    padding: 0.5rem;
+  height: 5rem;
+  width: 5rem;
+  padding-bottom: 0.2rem;
+}
+
+.border-subtle {
+  border: #4f4f4f 0.05rem solid;
+}
+
+.border-selected {
+  border: #4f4f4f 0.15rem solid;
+  box-shadow: 0.1rem 0.1rem 0.2rem 0.1rem #4f4f4f;
 }
 
 .tile-text {
-    font-size: 0.6rem;
-    line-height: 1.2
+  font-size: 0.6rem;
+  line-height: 1.2;
 }
 
 .icon {
-    width: 40%;
-    height: 70%;
+  width: 40%;
+  height: 70%;
 }
 
 .icon.light {
-    filter: invert();
+  filter: invert();
 }
 
 .icon.dark {
-    filter: contrast(100%) brightness(0%);
+  filter: contrast(100%) brightness(0%);
 }
 </style>
diff --git a/client/src/views/BlingoView.vue b/client/src/views/BlingoView.vue
index d8469b6..2be78d0 100644
--- a/client/src/views/BlingoView.vue
+++ b/client/src/views/BlingoView.vue
@@ -3,18 +3,57 @@ import BlingoTile from '@/components/BingoTile.vue'
 </script>
 
 <template>
+  <div class="d-flex flex-column align-center mt-5">
     <div class="d-flex ga-1">
-        <BlingoTile type="connect" text="placeholder text" status="started" selected=True />
-        <BlingoTile type="act" text="placeholder text" status="not started" selected="false" />
-        <BlingoTile type="understand" text="placeholder text" status="not started" selected="true" />
-        <BlingoTile type="connect" text="placeholder text" status="completed" selected="true" />
+      <BlingoTile type="connect" text="placeholder text" status="not started" :selected="false" />
+      <BlingoTile type="act" text="placeholder text" status="started" :selected="false" />
+      <BlingoTile
+        type="understand"
+        text="placeholder text"
+        status="not started"
+        :selected="false"
+      />
+      <BlingoTile type="connect" text="placeholder text" status="completed" :selected="false" />
     </div>
     <div class="d-flex ga-1 mt-1">
-        <BlingoTile type="act" text="placeholder text" status="not started" selected="true" />
-        <BlingoTile type="understand" text="placeholder text" status="not started" selected="true" />
-        <BlingoTile type="act" text="placeholder text" status="not started" selected="true" />
-        <BlingoTile type="connect" text="placeholder text" status="not started" selected="true" />
+      <BlingoTile type="connect" text="placeholder text" status="not started" :selected="false" />
+      <BlingoTile
+        type="understand"
+        text="placeholder text"
+        status="not started"
+        :selected="false"
+      />
+      <BlingoTile type="act" text="placeholder text" status="completed" :selected="false" />
+      <BlingoTile type="act" text="placeholder text" status="not started" :selected="false" />
     </div>
+    <div class="d-flex ga-1 mt-1">
+      <BlingoTile type="act" text="placeholder text" status="not started" :selected="false" />
+      <BlingoTile type="connect" text="placeholder text" status="not started" :selected="true" />
+      <BlingoTile
+        type="understand"
+        text="placeholder text"
+        status="not started"
+        :selected="false"
+      />
+      <BlingoTile type="connect" text="placeholder text" status="not started" :selected="false" />
+    </div>
+    <div class="d-flex ga-1 mt-1">
+      <BlingoTile
+        type="understand"
+        text="placeholder text"
+        status="not started"
+        :selected="false"
+      />
+      <BlingoTile type="connect" text="placeholder text" status="not started" :selected="false" />
+      <BlingoTile type="act" text="placeholder text" status="not started" :selected="false" />
+      <BlingoTile
+        type="understand"
+        text="placeholder text"
+        status="not started"
+        :selected="false"
+      />
+    </div>
+  </div>
 </template>
 
 <style scoped></style>