diff --git a/public/images/cards/1B.png b/public/images/cards/1B.png
new file mode 100644
index 0000000..56dcd3a
Binary files /dev/null and b/public/images/cards/1B.png differ
diff --git a/public/images/cards/1J.png b/public/images/cards/1J.png
new file mode 100644
index 0000000..089ce54
Binary files /dev/null and b/public/images/cards/1J.png differ
diff --git a/public/images/cards/2B.png b/public/images/cards/2B.png
new file mode 100644
index 0000000..d3338f6
Binary files /dev/null and b/public/images/cards/2B.png differ
diff --git a/public/images/cards/2C.png b/public/images/cards/2C.png
new file mode 100644
index 0000000..9782303
Binary files /dev/null and b/public/images/cards/2C.png differ
diff --git a/public/images/cards/2D.png b/public/images/cards/2D.png
new file mode 100644
index 0000000..fc84d48
Binary files /dev/null and b/public/images/cards/2D.png differ
diff --git a/public/images/cards/2H.png b/public/images/cards/2H.png
new file mode 100644
index 0000000..f258c36
Binary files /dev/null and b/public/images/cards/2H.png differ
diff --git a/public/images/cards/2J.png b/public/images/cards/2J.png
new file mode 100644
index 0000000..276a83e
Binary files /dev/null and b/public/images/cards/2J.png differ
diff --git a/public/images/cards/2S.png b/public/images/cards/2S.png
new file mode 100644
index 0000000..c74b01f
Binary files /dev/null and b/public/images/cards/2S.png differ
diff --git a/public/images/cards/3C.png b/public/images/cards/3C.png
new file mode 100644
index 0000000..a3ac6dd
Binary files /dev/null and b/public/images/cards/3C.png differ
diff --git a/public/images/cards/3D.png b/public/images/cards/3D.png
new file mode 100644
index 0000000..6f5642b
Binary files /dev/null and b/public/images/cards/3D.png differ
diff --git a/public/images/cards/3H.png b/public/images/cards/3H.png
new file mode 100644
index 0000000..4f10a41
Binary files /dev/null and b/public/images/cards/3H.png differ
diff --git a/public/images/cards/3S.png b/public/images/cards/3S.png
new file mode 100644
index 0000000..905e6a6
Binary files /dev/null and b/public/images/cards/3S.png differ
diff --git a/public/images/cards/4C.png b/public/images/cards/4C.png
new file mode 100644
index 0000000..a1496c4
Binary files /dev/null and b/public/images/cards/4C.png differ
diff --git a/public/images/cards/4D.png b/public/images/cards/4D.png
new file mode 100644
index 0000000..8ffaa60
Binary files /dev/null and b/public/images/cards/4D.png differ
diff --git a/public/images/cards/4H.png b/public/images/cards/4H.png
new file mode 100644
index 0000000..606df63
Binary files /dev/null and b/public/images/cards/4H.png differ
diff --git a/public/images/cards/4S.png b/public/images/cards/4S.png
new file mode 100644
index 0000000..9823182
Binary files /dev/null and b/public/images/cards/4S.png differ
diff --git a/public/images/cards/5C.png b/public/images/cards/5C.png
new file mode 100644
index 0000000..bfe56c5
Binary files /dev/null and b/public/images/cards/5C.png differ
diff --git a/public/images/cards/5D.png b/public/images/cards/5D.png
new file mode 100644
index 0000000..29efb30
Binary files /dev/null and b/public/images/cards/5D.png differ
diff --git a/public/images/cards/5H.png b/public/images/cards/5H.png
new file mode 100644
index 0000000..7c37348
Binary files /dev/null and b/public/images/cards/5H.png differ
diff --git a/public/images/cards/5S.png b/public/images/cards/5S.png
new file mode 100644
index 0000000..9db06c8
Binary files /dev/null and b/public/images/cards/5S.png differ
diff --git a/public/images/cards/6C.png b/public/images/cards/6C.png
new file mode 100644
index 0000000..a0767c2
Binary files /dev/null and b/public/images/cards/6C.png differ
diff --git a/public/images/cards/6D.png b/public/images/cards/6D.png
new file mode 100644
index 0000000..9ee9f3b
Binary files /dev/null and b/public/images/cards/6D.png differ
diff --git a/public/images/cards/6H.png b/public/images/cards/6H.png
new file mode 100644
index 0000000..153c954
Binary files /dev/null and b/public/images/cards/6H.png differ
diff --git a/public/images/cards/6S.png b/public/images/cards/6S.png
new file mode 100644
index 0000000..9520a8b
Binary files /dev/null and b/public/images/cards/6S.png differ
diff --git a/public/images/cards/7C.png b/public/images/cards/7C.png
new file mode 100644
index 0000000..71df8c3
Binary files /dev/null and b/public/images/cards/7C.png differ
diff --git a/public/images/cards/7D.png b/public/images/cards/7D.png
new file mode 100644
index 0000000..910eac4
Binary files /dev/null and b/public/images/cards/7D.png differ
diff --git a/public/images/cards/7H.png b/public/images/cards/7H.png
new file mode 100644
index 0000000..b3b3868
Binary files /dev/null and b/public/images/cards/7H.png differ
diff --git a/public/images/cards/7S.png b/public/images/cards/7S.png
new file mode 100644
index 0000000..74ac462
Binary files /dev/null and b/public/images/cards/7S.png differ
diff --git a/public/images/cards/8C.png b/public/images/cards/8C.png
new file mode 100644
index 0000000..81e275a
Binary files /dev/null and b/public/images/cards/8C.png differ
diff --git a/public/images/cards/8D.png b/public/images/cards/8D.png
new file mode 100644
index 0000000..fa7784f
Binary files /dev/null and b/public/images/cards/8D.png differ
diff --git a/public/images/cards/8H.png b/public/images/cards/8H.png
new file mode 100644
index 0000000..a89d9a3
Binary files /dev/null and b/public/images/cards/8H.png differ
diff --git a/public/images/cards/8S.png b/public/images/cards/8S.png
new file mode 100644
index 0000000..e5cba5a
Binary files /dev/null and b/public/images/cards/8S.png differ
diff --git a/public/images/cards/9C.png b/public/images/cards/9C.png
new file mode 100644
index 0000000..f4fe232
Binary files /dev/null and b/public/images/cards/9C.png differ
diff --git a/public/images/cards/9D.png b/public/images/cards/9D.png
new file mode 100644
index 0000000..fac0a45
Binary files /dev/null and b/public/images/cards/9D.png differ
diff --git a/public/images/cards/9H.png b/public/images/cards/9H.png
new file mode 100644
index 0000000..d94adcc
Binary files /dev/null and b/public/images/cards/9H.png differ
diff --git a/public/images/cards/9S.png b/public/images/cards/9S.png
new file mode 100644
index 0000000..d6e3ae8
Binary files /dev/null and b/public/images/cards/9S.png differ
diff --git a/public/images/cards/AC.png b/public/images/cards/AC.png
new file mode 100644
index 0000000..28bf67d
Binary files /dev/null and b/public/images/cards/AC.png differ
diff --git a/public/images/cards/ACB.png b/public/images/cards/ACB.png
new file mode 100644
index 0000000..df81ced
Binary files /dev/null and b/public/images/cards/ACB.png differ
diff --git a/public/images/cards/AD.png b/public/images/cards/AD.png
new file mode 100644
index 0000000..5b06a40
Binary files /dev/null and b/public/images/cards/AD.png differ
diff --git a/public/images/cards/ADB.png b/public/images/cards/ADB.png
new file mode 100644
index 0000000..2619745
Binary files /dev/null and b/public/images/cards/ADB.png differ
diff --git a/public/images/cards/AH.png b/public/images/cards/AH.png
new file mode 100644
index 0000000..92c5421
Binary files /dev/null and b/public/images/cards/AH.png differ
diff --git a/public/images/cards/AHB.png b/public/images/cards/AHB.png
new file mode 100644
index 0000000..c75de36
Binary files /dev/null and b/public/images/cards/AHB.png differ
diff --git a/public/images/cards/AS.png b/public/images/cards/AS.png
new file mode 100644
index 0000000..dc897ef
Binary files /dev/null and b/public/images/cards/AS.png differ
diff --git a/public/images/cards/ASB.png b/public/images/cards/ASB.png
new file mode 100644
index 0000000..ada726f
Binary files /dev/null and b/public/images/cards/ASB.png differ
diff --git a/public/images/cards/JC.png b/public/images/cards/JC.png
new file mode 100644
index 0000000..878375f
Binary files /dev/null and b/public/images/cards/JC.png differ
diff --git a/public/images/cards/JD.png b/public/images/cards/JD.png
new file mode 100644
index 0000000..73bd136
Binary files /dev/null and b/public/images/cards/JD.png differ
diff --git a/public/images/cards/JH.png b/public/images/cards/JH.png
new file mode 100644
index 0000000..7082994
Binary files /dev/null and b/public/images/cards/JH.png differ
diff --git a/public/images/cards/JS.png b/public/images/cards/JS.png
new file mode 100644
index 0000000..5f8a781
Binary files /dev/null and b/public/images/cards/JS.png differ
diff --git a/public/images/cards/KC.png b/public/images/cards/KC.png
new file mode 100644
index 0000000..84ecb73
Binary files /dev/null and b/public/images/cards/KC.png differ
diff --git a/public/images/cards/KD.png b/public/images/cards/KD.png
new file mode 100644
index 0000000..8d305e9
Binary files /dev/null and b/public/images/cards/KD.png differ
diff --git a/public/images/cards/KH.png b/public/images/cards/KH.png
new file mode 100644
index 0000000..3eeefa1
Binary files /dev/null and b/public/images/cards/KH.png differ
diff --git a/public/images/cards/KS.png b/public/images/cards/KS.png
new file mode 100644
index 0000000..57c19d8
Binary files /dev/null and b/public/images/cards/KS.png differ
diff --git a/public/images/cards/QC.png b/public/images/cards/QC.png
new file mode 100644
index 0000000..97598cc
Binary files /dev/null and b/public/images/cards/QC.png differ
diff --git a/public/images/cards/QD.png b/public/images/cards/QD.png
new file mode 100644
index 0000000..2ef96f7
Binary files /dev/null and b/public/images/cards/QD.png differ
diff --git a/public/images/cards/QH.png b/public/images/cards/QH.png
new file mode 100644
index 0000000..6dd421e
Binary files /dev/null and b/public/images/cards/QH.png differ
diff --git a/public/images/cards/QS.png b/public/images/cards/QS.png
new file mode 100644
index 0000000..787699d
Binary files /dev/null and b/public/images/cards/QS.png differ
diff --git a/public/images/cards/TC.png b/public/images/cards/TC.png
new file mode 100644
index 0000000..59fb535
Binary files /dev/null and b/public/images/cards/TC.png differ
diff --git a/public/images/cards/TD.png b/public/images/cards/TD.png
new file mode 100644
index 0000000..18d25e5
Binary files /dev/null and b/public/images/cards/TD.png differ
diff --git a/public/images/cards/TH.png b/public/images/cards/TH.png
new file mode 100644
index 0000000..3fafa4a
Binary files /dev/null and b/public/images/cards/TH.png differ
diff --git a/public/images/cards/TS.png b/public/images/cards/TS.png
new file mode 100644
index 0000000..4246ba6
Binary files /dev/null and b/public/images/cards/TS.png differ
diff --git a/src/components/ingame/Hand.vue b/src/components/ingame/Hand.vue
new file mode 100644
index 0000000..d2f4cea
--- /dev/null
+++ b/src/components/ingame/Hand.vue
@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import {toRefs} from 'vue'
+import type {Hand, Player} from "@/types/GameSubTypes.ts";
+
+const props = defineProps<{
+  hand: Hand
+  isHandInactive?: boolean
+  self: Player | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'play-card', idx: number): void
+  (e: 'skip-dog'): void
+}>()
+
+const { hand, isHandInactive, self } = toRefs(props)
+
+function handlePlayCard(idx: number | null) {
+  if (idx === null) return
+  if (isHandInactive?.value) return
+  emit('play-card', idx)
+}
+
+function handleSkipDogLife() {
+  emit('skip-dog')
+}
+
+function getCardImagePath(cardPath: string) {
+  if (!cardPath) return ''
+  if (cardPath.includes('://') || cardPath.startsWith('/')) return cardPath
+  return `/${cardPath}`
+}
+</script>
+
+<template>
+  <div class="bottom-div hand-container">
+    <div id="card-slide" :class="'ingame-cards-slide ' + (isHandInactive ? 'inactive' : '' )">
+      <div class="cards-row">
+        <div v-for="card in hand.cards" :key="card.identifier" class="handcard">
+          <div class="card-btn" @click="handlePlayCard(card.idx)" aria-label="Play card">
+            <q-img :src="getCardImagePath(card.path)" :alt="card.identifier" class="card" />
+          </div>
+        </div>
+      </div>
+      <div v-if="self?.dogLife" class="dog-actions">
+        <q-btn color="negative" label="Skip Turn" @click="handleSkipDogLife" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bottom-div {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 1400px;
+  width: 100%;
+  margin: 0;
+  text-align: center;
+  padding: 10px;
+}
+.hand-container {
+  margin-left: 0;
+  margin-right: 0;
+}
+.ingame-cards-slide {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.cards-row {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 8px;
+  align-items: flex-end;
+  justify-content: center;
+}
+.handcard {
+  border-radius: 6px;
+}
+.card-btn {
+  padding: 0;
+  min-width: 0;
+  border-radius: 6px;
+}
+.inactive {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.dog-actions {
+  margin-top: 8px;
+}
+.handcard :hover {
+  box-shadow: 3px 3px 3px #000000;
+}
+.card {
+  width:120px;
+  border-radius:6px
+}
+
+@media (max-height: 500px) {
+  .card {
+    width: 80px;
+    border-radius: 4px;
+  }
+}
+</style>
diff --git a/src/types/GameSubTypes.ts b/src/types/GameSubTypes.ts
index b8e2f9d..4ad4626 100644
--- a/src/types/GameSubTypes.ts
+++ b/src/types/GameSubTypes.ts
@@ -11,7 +11,7 @@ type Hand = {
 type Player = {
   id: string
   name: string
-  dogLife: string
+  dogLife: boolean
 }
 
 type PlayerQueue = {