diff --git a/src/App.vue b/src/App.vue
index e3d5b55..dba0d39 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,9 +3,7 @@ import wizard from "./pages/wizard/index.vue";
 </script>
 
 <template>
-  <div class="container mx-auto">
-    <wizard></wizard>
-  </div>
+  <wizard></wizard>
 </template>
 
 <style scoped>
diff --git a/src/pages/wizard/history.vue b/src/pages/wizard/history.vue
index 7fcd531..669869a 100644
--- a/src/pages/wizard/history.vue
+++ b/src/pages/wizard/history.vue
@@ -1,32 +1,34 @@
 <template>
-  <div>History</div>
-  <div class="flex flex-row justify-center gap-2">
-    <button @click="setGraph = 'total'">Total</button>
-    <button @click="setGraph = 'table'">Table</button>
-    <button @click="setGraph = 'cumulative'">cumulative</button>
-  </div>
-  <container
-    class="grid grid-cols-[56px_1fr] overflow-y-auto max-h-[300px]"
-    v-if="setGraph == 'table'"
-  >
-    <div class="font-semibold">
-      <div class="firstLine">Round</div>
-      <div v-for="(item, index) in store.getRoundNumber" :key="index">
-        {{ item }}
-      </div>
+  <div>
+    <div>History</div>
+    <div class="flex flex-row justify-center gap-2">
+      <button @click="setGraph = 'total'">Total</button>
+      <button @click="setGraph = 'table'">Table</button>
+      <button @click="setGraph = 'cumulative'">cumulative</button>
     </div>
-    <div class="overflow-x-scroll">
-      <div class="flex flex-row gap-2 alternateBlue">
-        <div v-for="(player, playerId) in store.userList" :key="playerId" class="w-32">
-          <div class="font-semibold firstLine">{{ player.name }}</div>
-          <div v-for="roundIScore in player.scorePerRound">
-            {{ roundIScore }}
+    <container
+      class="grid grid-cols-[56px_1fr] overflow-y-auto max-h-[300px]"
+      v-if="setGraph == 'table'"
+    >
+      <div class="font-semibold">
+        <div class="firstLine">Round</div>
+        <div v-for="(item, index) in store.getRoundNumber" :key="index">
+          {{ item }}
+        </div>
+      </div>
+      <div class="overflow-x-scroll">
+        <div class="flex flex-row gap-2 alternateBlue">
+          <div v-for="(player, playerId) in store.userList" :key="playerId" class="w-32">
+            <div class="font-semibold firstLine">{{ player.name }}</div>
+            <div v-for="roundIScore in player.scorePerRound">
+              {{ roundIScore }}
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </container>
-  <historychart :graph-type="<graphType><unknown>setGraph"></historychart>
+    </container>
+    <historychart :graph-type="<graphType><unknown>setGraph"></historychart>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/pages/wizard/index.vue b/src/pages/wizard/index.vue
index 8d85535..cd54151 100644
--- a/src/pages/wizard/index.vue
+++ b/src/pages/wizard/index.vue
@@ -22,9 +22,11 @@
       History
     </div>
   </div>
-  <players v-if="showSection == 'Setup'">Players</players>
-  <score v-if="showSection == 'Score'">Score</score>
-  <history v-if="showSection == 'History'"></history>
+  <div class="container mx-auto shadow-2xl mt-2">
+    <players v-if="showSection == 'Setup'" class="pb-4">Players</players>
+    <score v-if="showSection == 'Score'" class="pb-4">Score</score>
+    <history v-if="showSection == 'History'" class="pb-4"></history>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/pages/wizard/players.vue b/src/pages/wizard/players.vue
index d9e803b..e8b2d6a 100644
--- a/src/pages/wizard/players.vue
+++ b/src/pages/wizard/players.vue
@@ -1,82 +1,87 @@
 <template>
-  <container>
-    <div
-      class="grid grid-cols-2 md:flex md:justify-around md:flex-wrap items-center gap-y-4"
-    >
-      <button class="w-32" @click="store.addUser()" :disabled="isGameStarted">
-        Add Player
-      </button>
-      <button
-        class="bg-blue-400 text-white w-32 justify-self-end"
-        @click="store.newGame()"
-      >
-        New Game
-      </button>
-      <toggleSwitch v-model="showStepsSetup" square class="text-black justify-self-end"
-        >Steps Setup</toggleSwitch
-      >
-      <toggleSwitch v-model="store.trackBets" square class="text-black justify-self-end"
-        >Bets
-      </toggleSwitch>
-    </div>
-  </container>
-
-  <div class="flex flex-wrap justify-center" v-if="showStepsSetup">
-    <container class="basis-full md:basis-1/2 pl-4">
-      <defineSteps
-        :steps="store.scoreSteps"
-        @change="
-          (ev) => {
-            store.scoreSteps = ev;
-          }
-        "
-        >ROUND STEPS</defineSteps
-      >
-    </container>
-    <container class="basis-full pl-4 md:basis-1/2" v-if="store.trackBets">
-      <defineSteps
-        :steps="store.betSteps"
-        @change="
-          (ev) => {
-            store.betSteps = ev;
-          }
-        "
-        >BETS STEPS</defineSteps
-      ></container
-    >
-  </div>
-
-  <container>
-    <div v-if="store.getUsers.length > 0" class="pt-8 mx-2 relative">
-      <div class="absolute top-2">name</div>
+  <div>
+    <container>
       <div
-        v-for="userIndex in store.getUsers.length"
-        class="flex flex-row md:gap-10 mb-4 md:mb-2 gap-2"
+        class="grid grid-cols-2 md:flex md:justify-around md:flex-wrap items-center gap-y-4"
       >
-        <input v-model="store.userList[userIndex - 1].name" class="grow w-60 shrink" />
         <button
-          @click="deleteU(userIndex)"
-          class="grow-0"
-          :hidden="store.getUsers.length < 2"
+          class="bg-blue-400 text-white w-32 justify-self-end"
+          @click="store.newGame()"
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="w-4 h-4"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
-            />
-          </svg>
+          New Game
         </button>
+        <toggleSwitch v-model="showStepsSetup" square class="text-black justify-self-end"
+          >Steps Setup</toggleSwitch
+        >
+        <toggleSwitch v-model="store.trackBets" square class="text-black justify-self-end"
+          >Bets
+        </toggleSwitch>
       </div>
+    </container>
+
+    <div class="flex flex-wrap justify-center" v-if="showStepsSetup">
+      <container class="basis-full md:basis-1/2 pl-4">
+        <defineSteps
+          :steps="store.scoreSteps"
+          @change="
+            (ev) => {
+              store.scoreSteps = ev;
+            }
+          "
+          >ROUND STEPS</defineSteps
+        >
+      </container>
+      <container class="basis-full pl-4 md:basis-1/2" v-if="store.trackBets">
+        <defineSteps
+          :steps="store.betSteps"
+          @change="
+            (ev) => {
+              store.betSteps = ev;
+            }
+          "
+          >BETS STEPS</defineSteps
+        ></container
+      >
     </div>
-  </container>
+
+    <container>
+      <div v-if="store.getUsers.length > 0" class="pt-8 mx-2 relative">
+        <div class="absolute top-2">name</div>
+        <div
+          v-for="userIndex in store.getUsers.length"
+          class="flex flex-row md:gap-10 mb-4 md:mb-2 gap-2"
+        >
+          <input v-model="store.userList[userIndex - 1].name" class="grow w-60 shrink" />
+          <button
+            @click="deleteU(userIndex)"
+            class="grow-0"
+            :hidden="store.getUsers.length < 2"
+            tabindex="-1"
+            v-if="!store.isGameStarted"
+          >
+            <!-- delete icon -->
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="w-4 h-4"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+      <button class="w-32" @click="store.addUser()" v-if="!store.isGameStarted">
+        Add Player
+      </button>
+    </container>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/pages/wizard/score.vue b/src/pages/wizard/score.vue
index 907b461..192fa56 100644
--- a/src/pages/wizard/score.vue
+++ b/src/pages/wizard/score.vue
@@ -1,49 +1,51 @@
 <template>
-  <h1>
-    Round <span>{{ scoreStore.getRoundNumber }}</span>
-  </h1>
-  <div class="flex flex-row justify-evenly">
-    <button
-      @click="
-        scoreStore.newRound();
-        activeUser = '';
-      "
-    >
-      New Round
-    </button>
-    <toggleSwitch v-model="betOrRoundPhase" v-if="scoreStore.trackBets" square>
-      Round
-      <template #post> Bet</template>
-    </toggleSwitch>
-  </div>
+  <div>
+    <h1>
+      Round <span>{{ scoreStore.getRoundNumber }}</span>
+    </h1>
+    <div class="flex flex-row justify-evenly">
+      <button
+        @click="
+          scoreStore.newRound();
+          activeUser = '';
+        "
+      >
+        New Round
+      </button>
+      <toggleSwitch v-model="betOrRoundPhase" v-if="scoreStore.trackBets" square>
+        Round
+        <template #post> Bet</template>
+      </toggleSwitch>
+    </div>
 
-  <div class="flex flex-row flex-grow text-2xl capitalize">
-    <div class="basis-1/3 px-2">Player</div>
-    <div class="basis-2/3">
-      <div class="flex justify-between mx-4">
-        <div>Round</div>
-        <div v-if="scoreStore.trackBets">Bet</div>
-        <div class="text-2xl">Score</div>
+    <div class="flex flex-row flex-grow text-2xl capitalize">
+      <div class="basis-1/3 px-2">Player</div>
+      <div class="basis-2/3">
+        <div class="flex justify-between mx-4">
+          <div>Round</div>
+          <div v-if="scoreStore.trackBets">Bet</div>
+          <div class="text-2xl">Score</div>
+        </div>
       </div>
     </div>
-  </div>
-  <div
-    v-for="(user, userId) in scoreStore.getUsers"
-    :key="userId"
-    @click="activeUser = user.name"
-  >
-    <editscore
-      :lastScore="scoreStore.getScore(userId)"
-      :roundScore="scoreStore.userList[userId].currentRound"
-      :betScore="scoreStore.userList[userId].currentBet"
-      :steps="betOrRoundPhase ? scoreStore.betSteps : scoreStore.scoreSteps"
-      :editable="activeUser == user.name"
-      :phase="betOrRoundPhase ? 'bet' : 'round'"
-      @changeScore="(event) => scoreStore.editCurrentRound(userId, event)"
-      @changeBet="(event) => scoreStore.editCurrentBet(userId, event)"
+    <div
+      v-for="(user, userId) in scoreStore.getUsers"
+      :key="userId"
+      @click="activeUser = user.name"
     >
-      {{ user.name }}
-    </editscore>
+      <editscore
+        :lastScore="scoreStore.getScore(userId)"
+        :roundScore="scoreStore.userList[userId].currentRound"
+        :betScore="scoreStore.userList[userId].currentBet"
+        :steps="betOrRoundPhase ? scoreStore.betSteps : scoreStore.scoreSteps"
+        :editable="activeUser == user.name"
+        :phase="betOrRoundPhase ? 'bet' : 'round'"
+        @changeScore="(event) => scoreStore.editCurrentRound(userId, event)"
+        @changeBet="(event) => scoreStore.editCurrentBet(userId, event)"
+      >
+        {{ user.name }}
+      </editscore>
+    </div>
   </div>
 </template>
 
diff --git a/src/style.css b/src/style.css
index af9ed76..53e969a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -31,7 +31,9 @@ a:visited{
   color: #2a2a29;
 }
 
-
+.debug {
+  @apply border-2 border-solid border-red-500
+}
 h1 {
   @apply text-5xl;
    /* font-size: 3.2em; */