diff --git a/package-lock.json b/package-lock.json
index d06da80..b0547e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@brdgm/millennia-solo-helper",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@brdgm/millennia-solo-helper",
-      "version": "1.0.1",
+      "version": "1.0.2",
       "dependencies": {
         "@brdgm/brdgm-commons": "^1.6.9",
         "@popperjs/core": "^2.11.8",
diff --git a/package.json b/package.json
index fc0d435..4911a18 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@brdgm/millennia-solo-helper",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "description": "Millennia Solo Helper",
   "appDeployName": "millennia",
diff --git a/src/components/round/TechCardDraft.vue b/src/components/round/TechCardDraft.vue
index 33d6e82..cddd47e 100644
--- a/src/components/round/TechCardDraft.vue
+++ b/src/components/round/TechCardDraft.vue
@@ -32,20 +32,7 @@
 
   <div class="draftedCards">
     <div v-if="playerTechs.length > 0" class="mt-3">
-      <h5>{{t('phaseADrafting.playerDraft')}}</h5>
-      <div class="techs">
-        <div class="techRow">
-          <div class="income1">
-            <AppIcon name="income" class="icon"/>
-            <div class="number">{{playerIncomeTotal}}</div>
-          </div>
-          <div class="income2" v-if="playerIncomeLockedTotal > 0">
-            <AppIcon name="income-lock" class="icon"/>
-            <div class="number">{{playerIncomeLockedTotal}}</div>
-          </div>
-          <TechCard v-for="tech of playerTechs" :key="tech" :navigationState="navigationState" :tech="tech" class="techCard"/>
-        </div>
-      </div>
+      <TechCardsPlayerDraft :navigationState="navigationState" :playerTechs="playerTechs"/>
     </div>
 
     <div v-if="botTechs.length > 0" class="mt-3">
@@ -72,11 +59,13 @@ import toTech from '@/util/toTech'
 import Player from '@/services/enum/Player'
 import TechCard from './TechCard.vue'
 import AppIcon from '../structure/AppIcon.vue'
+import TechCardsPlayerDraft from './TechCardsPlayerDraft.vue'
 
 export default defineComponent({
   name: 'TechCardDraft',
   components: {
     TechCard,
+    TechCardsPlayerDraft,
     AppIcon
   },
   setup(props) {
@@ -246,7 +235,7 @@ export default defineComponent({
 .techRow {
   display: flex;
   width: calc(4 * (80px + 10px) + 40px);
-  .income, .income1, .income2 {
+  .income {
     position: relative;
     width: 40px;
     .icon {
@@ -262,39 +251,6 @@ export default defineComponent({
       font-weight: bold;
     }
   }
-  .income1 {
-    .icon {
-      bottom: 80px;
-    }
-    .number {
-      bottom: 97px;
-    }
-    @media (max-width: 600px) {
-      .icon {
-        bottom: 65px;
-      }
-      .number {
-        bottom: 82px;
-      }
-    }
-  }
-  .income2 {
-    margin-left: -40px;
-    .icon {
-      bottom: 10px;
-    }
-    .number {
-      bottom: 27px;
-    }
-    @media (max-width: 600px) {
-      .icon {
-        bottom: 0px;
-      }
-      .number {
-        bottom: 17px;
-      }
-    }
-  }
   @media (max-width: 600px) {
     width: calc(4 * (70px + 10px) + 40px);
   }
diff --git a/src/components/round/TechCardsPlayerDraft.vue b/src/components/round/TechCardsPlayerDraft.vue
new file mode 100644
index 0000000..b141f43
--- /dev/null
+++ b/src/components/round/TechCardsPlayerDraft.vue
@@ -0,0 +1,134 @@
+<template>
+  <h5>{{t('phaseADrafting.playerDraft')}}</h5>
+  <div class="techs">
+    <div class="techRow">
+      <div class="income1">
+        <AppIcon name="income" class="icon"/>
+        <div class="number">{{playerIncomeTotal}}</div>
+      </div>
+      <div class="income2" v-if="playerIncomeLockedTotal > 0">
+        <AppIcon name="income-lock" class="icon"/>
+        <div class="number">{{playerIncomeLockedTotal}}</div>
+      </div>
+      <TechCard v-for="tech of playerTechs" :key="tech" :navigationState="navigationState" :tech="tech" class="techCard"/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { useI18n } from 'vue-i18n'
+import NavigationState from '@/util/NavigationState'
+import TechCardSelection from '@/services/TechCardSelection'
+import Tech from '@/services/enum/Tech'
+import TechCard from './TechCard.vue'
+import AppIcon from '../structure/AppIcon.vue'
+
+export default defineComponent({
+  name: 'TechCardsPlayerDraft',
+  components: {
+    TechCard,
+    AppIcon
+  },
+  setup() {
+    const { t } = useI18n()
+    return { t }
+  },
+  props: {
+    navigationState: {
+      type: NavigationState,
+      required: true
+    },
+    playerTechs: {
+      type: Array as PropType<Tech[]>,
+      required: true
+    }
+  },
+  computed: {
+    techCardSelection() : TechCardSelection {
+      return this.navigationState.techCardSelection
+    },
+    playerIncomeTotal() : number {
+      return this.playerTechs.map(tech => this.techCardSelection.getIncome(tech)).filter(value => value < 5).reduce((a,b) => a+b, 0)
+    },
+    playerIncomeLockedTotal() : number {
+      return this.playerTechs.map(tech => this.techCardSelection.getIncome(tech)).filter(value => value == 5).reduce((a,b) => a+b, 0)
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.techs {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.techRow {
+  display: flex;
+  width: calc(4 * (80px + 10px) + 40px);
+  .income1, .income2 {
+    position: relative;
+    width: 40px;
+    .icon {
+      position: absolute;
+      bottom: 45px;
+      width: 35px;
+    }
+    .number {
+      position: absolute;
+      bottom: 62px;
+      text-align: center;
+      width: 34px;
+      font-weight: bold;
+    }
+  }
+  .income1 {
+    .icon {
+      bottom: 80px;
+    }
+    .number {
+      bottom: 97px;
+    }
+    @media (max-width: 600px) {
+      .icon {
+        bottom: 65px;
+      }
+      .number {
+        bottom: 82px;
+      }
+    }
+  }
+  .income2 {
+    margin-left: -40px;
+    .icon {
+      bottom: 10px;
+    }
+    .number {
+      bottom: 27px;
+    }
+    @media (max-width: 600px) {
+      .icon {
+        bottom: 0px;
+      }
+      .number {
+        bottom: 17px;
+      }
+    }
+  }
+  @media (max-width: 600px) {
+    width: calc(4 * (70px + 10px) + 40px);
+  }
+}
+.techCard {
+  position: relative;
+  display: inline-block;
+  width: 80px;
+  height: 120px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  @media (max-width: 600px) {
+    width: 70px;
+    height: 100px;
+  }
+}
+</style>
diff --git a/src/locales/en.json b/src/locales/en.json
index 75e2b13..7308d0b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -25,7 +25,7 @@
     "setup": {
       "gameBoard": "Setup the game the same way as a 2-player game.",
       "prosperityCards": "You do not need to set up the prosperity cards, they are managed and displayed by the application.",
-      "techCards": "The tech cards and blank techs are randomized by the application, you are drafting them in the application against Automa. After each drafting phase in the app, pick the cards your drafted from the stack of the corresponding age.",
+      "techCards": "The tech cards and blank techs are randomized by the application, you are drafting them in the application against the automa. After each drafting phase in the app, pick the cards your drafted from the stack of the corresponding age.",
       "playerColor": "Choose a player color for the automa. The automa only needs 1 track marker and 1 VP marker.",
       "trackTokens": "Place the automa markers on the <b>war track</b> and on the <b>VP track</b> (starting with 10 VP).",
       "startPlayer": {
@@ -47,7 +47,7 @@
   },
   "phaseADrafting": {
     "title": "A: Drafting",
-    "playerTurnSelect": "Please place your drafting marker on the board and select a tech card, or click on <i>Next</i> if you selected a special action.",
+    "playerTurnSelect": "Select a tech card, or use <i>Next</i> if you placed a marker on a special action.",
     "playerDraft": "Player draft",
     "botDraft": "Automa draft"
   },
@@ -64,7 +64,7 @@
     "remove": "Remove:",
     "pass": "Pass",
     "notAvailable": "Not Available",
-    "playerAction": "Buy a wonder or building and click on <i>Next</i>.<br/>Click on <i>Pass</i> to end the construction phase."
+    "playerAction": "Buy a wonder or building and use <i>Next</i>.<br/>Use <i>Pass</i> to end the construction phase."
   },
   "phaseEActions": {
     "title": "E: Actions",
diff --git a/src/views/PhaseCIncome.vue b/src/views/PhaseCIncome.vue
index 0090436..c9dd46c 100644
--- a/src/views/PhaseCIncome.vue
+++ b/src/views/PhaseCIncome.vue
@@ -6,15 +6,7 @@
   <p class="mt-4" v-html="t('phaseCIncome.skip')"></p>
 
   <div v-if="playerTechs.length > 0" class="mt-3">
-    <h5>{{t('phaseADrafting.playerDraft')}}</h5>
-    <div class="income1">
-      <AppIcon name="income" class="icon"/>
-      <div class="number">{{playerIncomeTotal}}</div>
-    </div>
-    <div class="income2" v-if="playerIncomeLockedTotal > 0">
-      <AppIcon name="income-lock" class="icon"/>
-      <div class="number">{{playerIncomeLockedTotal}}</div>
-    </div>
+    <TechCardsPlayerDraft :navigationState="navigationState" :playerTechs="playerTechs"/>
   </div>
 
   <button class="btn btn-primary btn-lg mt-4" @click="next()">
@@ -35,15 +27,15 @@ import { Round, useStateStore } from '@/store/state'
 import SideBar from '@/components/round/SideBar.vue'
 import NavigationState from '@/util/NavigationState'
 import Tech from '@/services/enum/Tech'
-import AppIcon from '@/components/structure/AppIcon.vue'
 import DebugInfo from '@/components/round/DebugInfo.vue'
+import TechCardsPlayerDraft from '@/components/round/TechCardsPlayerDraft.vue'
 
 export default defineComponent({
   name: 'PhaseCIncome',
   components: {
     FooterButtons,
     SideBar,
-    AppIcon,
+    TechCardsPlayerDraft,
     DebugInfo
   },
   setup() {
@@ -60,17 +52,11 @@ export default defineComponent({
     backButtonRouteTo() : string {
       return `/round/${this.round}/prosperity`
     },
-    roundData() : Round {
-      return this.state.rounds.find(item => item.round == this.navigationState.round)!
+    roundData() : Round|undefined {
+      return this.state.rounds.find(item => item.round == this.navigationState.round)
     },
     playerTechs() : Tech[] {
-      return this.roundData.playerTechs ?? []
-    },
-    playerIncomeTotal() : number {
-      return this.playerTechs.map(tech => this.navigationState.techCardSelection.getIncome(tech)).filter(value => value < 5).reduce((a,b) => a+b, 0)
-    },
-    playerIncomeLockedTotal() : number {
-      return this.playerTechs.map(tech => this.navigationState.techCardSelection.getIncome(tech)).filter(value => value == 5).reduce((a,b) => a+b, 0)
+      return this.roundData?.playerTechs ?? []
     }
   },
   methods: {
@@ -80,21 +66,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss" scoped>
-.income1, .income2 {
-  position: relative;
-  width: 40px;
-  .icon {
-    width: 35px;
-    margin-bottom: 10px;
-  }
-  .number {
-    position: absolute;
-    bottom: 27px;
-    text-align: center;
-    width: 34px;
-    font-weight: bold;
-  }
-}
-</style>