diff --git a/README.md b/README.md
index 5d5f01e..67e3f6c 100644
--- a/README.md
+++ b/README.md
@@ -7,4 +7,11 @@ Live version: https://maldestor95.github.io/score
 ## How to publish
 execute in CLI, on a master branch
 * `npm run build`
-* `deploy.bat`
\ No newline at end of file
+* `deploy.bat`
+
+
+## link to libraries
+* chartjs
+  * https://vue-chartjs.org/guide/
+  * https://www.chartjs.org/docs/latest/
+* 
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 2c54ebc..167cc31 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,20 +1,26 @@
 {
-  "name": "dorfcount",
-  "version": "0.0.1",
+  "name": "score",
+  "version": "0.1.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "dorfcount",
-      "version": "0.0.1",
+      "name": "score",
+      "version": "0.1.1",
+      "license": "MIT",
       "dependencies": {
+        "chart.js": "^4.4.1",
+        "chartjs-plugin-zoom": "^2.0.1",
         "markdown-it": "^13.0.1",
         "pinia": "^2.1.7",
-        "vue": "^3.3.4",
+        "uuid": "^9.0.1",
+        "vue": "^3.4.5",
+        "vue-chartjs": "^5.3.0",
         "yaml": "^2.3.1"
       },
       "devDependencies": {
         "@types/markdown-it": "^12.2.3",
+        "@types/uuid": "^9.0.8",
         "@vitejs/plugin-vue": "^4.2.3",
         "autoprefixer": "^10.4.14",
         "postcss": "^8.4.27",
@@ -452,6 +458,11 @@
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
       "dev": true
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -509,6 +520,12 @@
       "integrity": "sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==",
       "dev": true
     },
+    "node_modules/@types/uuid": {
+      "version": "9.0.8",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
+      "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
+      "dev": true
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz",
@@ -830,9 +847,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001517",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001517.tgz",
-      "integrity": "sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==",
+      "version": "1.0.30001578",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001578.tgz",
+      "integrity": "sha512-J/jkFgsQ3NEl4w2lCoM9ZPxrD+FoBNJ7uJUpGVjIg/j0OwJosWM36EPDv+Yyi0V4twBk9pPmlFS+PLykgEvUmg==",
       "dev": true,
       "funding": [
         {
@@ -849,6 +866,28 @@
         }
       ]
     },
+    "node_modules/chart.js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.1.tgz",
+      "integrity": "sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=7"
+      }
+    },
+    "node_modules/chartjs-plugin-zoom": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-2.0.1.tgz",
+      "integrity": "sha512-ogOmLu6e+Q7E1XWOCOz9YwybMslz9qNfGV2a+qjfmqJYpsw5ZMoRHZBUyW+NGhkpQ5PwwPA/+rikHpBZb7PZuA==",
+      "dependencies": {
+        "hammerjs": "^2.0.8"
+      },
+      "peerDependencies": {
+        "chart.js": ">=3.2.0"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -1148,6 +1187,14 @@
         "node": "*"
       }
     },
+    "node_modules/hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -1735,9 +1782,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "3.26.3",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.26.3.tgz",
-      "integrity": "sha512-7Tin0C8l86TkpcMtXvQu6saWH93nhG3dGQ1/+l5V2TDMceTxO7kDiK6GzbfLWNNxqJXm591PcEZUozZm51ogwQ==",
+      "version": "3.29.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
+      "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
       "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -1960,15 +2007,27 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/vite": {
-      "version": "4.4.7",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.7.tgz",
-      "integrity": "sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==",
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",
+      "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.18.10",
-        "postcss": "^8.4.26",
-        "rollup": "^3.25.2"
+        "postcss": "^8.4.27",
+        "rollup": "^3.27.1"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -2035,6 +2094,15 @@
         }
       }
     },
+    "node_modules/vue-chartjs": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.0.tgz",
+      "integrity": "sha512-8XqX0JU8vFZ+WA2/knz4z3ThClduni2Nm0BMe2u0mXgTfd9pXrmJ07QBI+WAij5P/aPmPMX54HCE1seWL37ZdQ==",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "vue": "^3.0.0-0 || ^2.7.0"
+      }
+    },
     "node_modules/vue-template-compiler": {
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
@@ -2295,6 +2363,11 @@
         }
       }
     },
+    "@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2343,6 +2416,12 @@
       "integrity": "sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==",
       "dev": true
     },
+    "@types/uuid": {
+      "version": "9.0.8",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
+      "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
+      "dev": true
+    },
     "@vitejs/plugin-vue": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz",
@@ -2592,11 +2671,27 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001517",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001517.tgz",
-      "integrity": "sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==",
+      "version": "1.0.30001578",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001578.tgz",
+      "integrity": "sha512-J/jkFgsQ3NEl4w2lCoM9ZPxrD+FoBNJ7uJUpGVjIg/j0OwJosWM36EPDv+Yyi0V4twBk9pPmlFS+PLykgEvUmg==",
       "dev": true
     },
+    "chart.js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.1.tgz",
+      "integrity": "sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==",
+      "requires": {
+        "@kurkle/color": "^0.3.0"
+      }
+    },
+    "chartjs-plugin-zoom": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-2.0.1.tgz",
+      "integrity": "sha512-ogOmLu6e+Q7E1XWOCOz9YwybMslz9qNfGV2a+qjfmqJYpsw5ZMoRHZBUyW+NGhkpQ5PwwPA/+rikHpBZb7PZuA==",
+      "requires": {
+        "hammerjs": "^2.0.8"
+      }
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -2828,6 +2923,11 @@
         "is-glob": "^4.0.3"
       }
     },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ=="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -3203,9 +3303,9 @@
       "dev": true
     },
     "rollup": {
-      "version": "3.26.3",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.26.3.tgz",
-      "integrity": "sha512-7Tin0C8l86TkpcMtXvQu6saWH93nhG3dGQ1/+l5V2TDMceTxO7kDiK6GzbfLWNNxqJXm591PcEZUozZm51ogwQ==",
+      "version": "3.29.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
+      "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
       "dev": true,
       "requires": {
         "fsevents": "~2.3.2"
@@ -3345,16 +3445,21 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="
+    },
     "vite": {
-      "version": "4.4.7",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.7.tgz",
-      "integrity": "sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==",
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",
+      "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==",
       "dev": true,
       "requires": {
         "esbuild": "^0.18.10",
         "fsevents": "~2.3.2",
-        "postcss": "^8.4.26",
-        "rollup": "^3.25.2"
+        "postcss": "^8.4.27",
+        "rollup": "^3.27.1"
       }
     },
     "vue": {
@@ -3369,6 +3474,12 @@
         "@vue/shared": "3.4.5"
       }
     },
+    "vue-chartjs": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.0.tgz",
+      "integrity": "sha512-8XqX0JU8vFZ+WA2/knz4z3ThClduni2Nm0BMe2u0mXgTfd9pXrmJ07QBI+WAij5P/aPmPMX54HCE1seWL37ZdQ==",
+      "requires": {}
+    },
     "vue-template-compiler": {
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
diff --git a/package.json b/package.json
index 26527e6..3add2f5 100644
--- a/package.json
+++ b/package.json
@@ -1,23 +1,29 @@
 {
   "name": "score",
   "private": true,
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "homepage": "https://github.com/maldestor95/score",
-  "description": "Online Scoreboard tool","license":"MIT",
+  "description": "Online Scoreboard tool",
+  "license": "MIT",
   "scripts": {
     "dev": "vite --host",
     "build": "vue-tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
+    "chart.js": "^4.4.1",
+    "chartjs-plugin-zoom": "^2.0.1",
     "markdown-it": "^13.0.1",
     "pinia": "^2.1.7",
+    "uuid": "^9.0.1",
     "vue": "^3.4.5",
+    "vue-chartjs": "^5.3.0",
     "yaml": "^2.3.1"
   },
   "devDependencies": {
     "@types/markdown-it": "^12.2.3",
+    "@types/uuid": "^9.0.8",
     "@vitejs/plugin-vue": "^4.2.3",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.27",
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/components/container.vue b/src/components/container.vue
index 3359ffc..15f1abd 100644
--- a/src/components/container.vue
+++ b/src/components/container.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="md:container md:shadow-2xl md:shadow-slate-600 px-2 md:rounded-md py-4">
+  <div class="md:container md:shadow-md md:shadow-slate-500 px-2 md:rounded-md py-4">
     <slot></slot>
   </div>
 </template>
diff --git a/src/components/toggleswitch.vue b/src/components/toggleswitch.vue
index 7845ca3..d2cf2b2 100644
--- a/src/components/toggleswitch.vue
+++ b/src/components/toggleswitch.vue
@@ -1,12 +1,12 @@
 <template>
   <!-- code inspired by https://www.w3schools.com/howto/howto_css_switch.asp -->
-  <div class="flex flex-row">
+  <div class="flex flex-row items-center">
     <div class="mr-2 z-0 pt-1">
       <slot>switch label</slot>
     </div>
     <label class="switch shrink-0 grow-0">
       <input type="checkbox" :checked="model" v-model="model" />
-      <span class="slider" :class="{ round: !props.square }"></span>
+      <span class="slider" :class="{ round: !props.square, sliderOn: model }"></span>
     </label>
     <div class="ml-2 z-0 pt-1">
       <slot name="post"></slot>
@@ -50,7 +50,9 @@ const props = withDefaults(defineProps<Props>(), {
   -webkit-transition: 0.4s;
   transition: 0.4s;
 }
-
+.sliderOn {
+  @apply bg-blue-400;
+}
 .slider:before {
   position: absolute;
   content: "";
diff --git a/src/pages/wizard/bets.vue b/src/pages/wizard/bets.vue
deleted file mode 100644
index 7c9b1e3..0000000
--- a/src/pages/wizard/bets.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div></div>
-  <slot></slot>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped></style>
diff --git a/src/pages/wizard/definesteps.vue b/src/pages/wizard/definesteps.vue
index 79953d5..c1dfa0e 100644
--- a/src/pages/wizard/definesteps.vue
+++ b/src/pages/wizard/definesteps.vue
@@ -1,26 +1,33 @@
 <template>
-  <form class="text-left">
-    <h3>
-      <slot>Choose the steps</slot>
-    </h3>
-    <div v-for="(option, index) in choices" :key="index" class="flex">
-      <input
-        type="radio"
-        :name="choice"
-        :value="option.id"
-        @click="updateSteps(option.id)"
-      />
-      <label :for="option.id" class="ml-2 pt-2">{{ option.opt.join("\ \ \ \ ") }}</label>
-      <br />
-    </div>
-  </form>
+  <div>
+    <form class="text-left">
+      <h3>
+        <slot>Choose the steps</slot>
+      </h3>
+      <div v-for="(option, index) in choices" :key="index" class="flex">
+        <input
+          type="radio"
+          :name="choice"
+          :value="option.id"
+          :disabled="disabled"
+          @click="updateSteps(option.id)"
+        />
+        <label :for="option.id" class="ml-2 pt-2">{{
+          option.opt.join("\ \ \ \ ")
+        }}</label>
+        <br />
+      </div>
+    </form>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { reactive, ref } from "vue";
+
 type stepsType = number[];
 type Props = {
   steps?: number[];
+  disabled: boolean;
 };
 
 const emit = defineEmits<{
@@ -31,6 +38,7 @@ const props = withDefaults(defineProps<Props>(), {
   steps: () => {
     return [-5, -2, -1, 1, 2, 5];
   },
+  disabled: false,
 });
 
 const choice = ref("opt1");
diff --git a/src/pages/wizard/editscore.vue b/src/pages/wizard/editscore.vue
index 5b4c1d7..20c8757 100644
--- a/src/pages/wizard/editscore.vue
+++ b/src/pages/wizard/editscore.vue
@@ -1,10 +1,10 @@
 <template>
   <div
-    class="container my-4 text-2xl capitalize"
-    :class="{ 'bg-blue-500 text-white': editable }"
+    class="container my-4 text-2xl capitalize md:rounded-xl"
+    :class="{ 'bg-blue-500 text-white ': editable }"
   >
     <div class="flex flex-row flex-grow">
-      <div class="basis-1/3 px-2">
+      <div class="basis-1/3 px-2 text-left" :class="{ 'md:text-5xl ': activePlayer }">
         <slot>UserName</slot>
       </div>
       <div class="basis-2/3">
@@ -16,12 +16,16 @@
       </div>
     </div>
 
-    <div class="border border-black border-solid container" v-if="editable">
-      <div class="flex justify-evenly py-2 text-white" v-for="step in props.steps">
-        <button @click="emitupdate(phase, -step)" class="bg-red-500 w-20 h-14">
-          {{ -step }}
-        </button>
-        <button @click="emitupdate(phase, +step)" class="bg-green-500 w-20 h-14">
+    <div class="container" v-if="editable">
+      <div
+        class="flex flex-row flex-wrap gap-4 md:gap-8 justify-evenly py-2 text-white px-4"
+      >
+        <button
+          v-for="step in props.steps"
+          @click="emitupdate(phase, step)"
+          class="w-20 h-14 md:grow"
+          :class="{ 'bg-red-500 ': step < 0, 'bg-green-500': step >= 0 }"
+        >
           {{ step }}
         </button>
       </div>
@@ -46,6 +50,7 @@ interface Props {
   steps: number[];
   phase: "round" | "bet";
   editable?: boolean;
+  activePlayer: boolean;
 }
 const props = withDefaults(defineProps<Props>(), {
   lastScore: 0,
@@ -54,6 +59,7 @@ const props = withDefaults(defineProps<Props>(), {
   steps: () => [1, 3, 5],
   editable: false,
   phase: "round",
+  activePlayer: false,
 });
 
 const emitupdate = (phase: string, value: number) => {
diff --git a/src/pages/wizard/history.vue b/src/pages/wizard/history.vue
new file mode 100644
index 0000000..99c38d6
--- /dev/null
+++ b/src/pages/wizard/history.vue
@@ -0,0 +1,47 @@
+<template>
+  <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="container 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>
+    <historychart :graph-type="setGraph"></historychart>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useScoreStore } from "./store";
+import historychart from "./historychart.vue";
+import { ref } from "vue";
+
+const setGraph = ref<"total" | "cumulative" | "table" | undefined>("total");
+const store = useScoreStore();
+</script>
+
+<style scoped>
+.alternateBlue > :nth-child(even) {
+  @apply bg-blue-400 text-white px-2;
+}
+</style>
diff --git a/src/pages/wizard/historychart.vue b/src/pages/wizard/historychart.vue
new file mode 100644
index 0000000..d793f08
--- /dev/null
+++ b/src/pages/wizard/historychart.vue
@@ -0,0 +1,126 @@
+<template>
+  <Bar
+    :data="myDataBar.data"
+    :options="myDataBar.options"
+    v-if="props.graphType == 'total'"
+  />
+  <Line
+    :data="myDataCumulative.data"
+    :options="myDataCumulative.options"
+    v-if="props.graphType == 'cumulative'"
+  />
+</template>
+
+<script setup lang="ts">
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+  Colors,
+  LineElement,
+  PointElement,
+  ChartConfiguration,
+  ChartDataset,
+} from "chart.js";
+import zoomPlugin from "chartjs-plugin-zoom";
+import { Bar, Line } from "vue-chartjs";
+import { useScoreStore } from "./store";
+
+export type Props = {
+  graphType: "total" | "cumulative" | "table" | undefined;
+};
+const props = withDefaults(defineProps<Props>(), {
+  graphType: "total",
+});
+
+const store = useScoreStore();
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  PointElement,
+  LineElement,
+  Colors,
+  Title,
+  Legend,
+  Tooltip,
+  zoomPlugin
+);
+
+const cumulativeData = store.userList.map(
+  (user, index): ChartDataset<"line"> => {
+    return {
+      label: user.name,
+      data: <number[]>store.getCumulativeScore(index),
+      pointStyle: "circle",
+      pointRadius: 5,
+      pointHoverRadius: 10,
+    };
+  }
+);
+
+const myDataBar: ChartConfiguration<"bar"> = {
+  type: "bar",
+  data: {
+    labels: ["Score"],
+    datasets: store.userList.map((user, index) => {
+      return {
+        label: user.name,
+        data: [store.getScore(index)],
+      };
+    }),
+  },
+  options: {
+    responsive: true,
+    // indexAxis: "y",
+    plugins: {
+      legend: {
+        display: true,
+        labels: {
+          color: "rgb(255, 99, 132)",
+        },
+      },
+      zoom: {
+        zoom: {
+          wheel: {
+            enabled: true,
+          },
+          pinch: {
+            enabled: true,
+          },
+          mode: "xy",
+        },
+      },
+    },
+  },
+};
+const arrayRange = (start: number, stop: number, step: number) => {
+  const arr = [];
+  for (let i = start; i <= stop; i = i + step) {
+    arr.push(i);
+  }
+  return arr;
+};
+
+const myDataCumulative: ChartConfiguration<"line"> = {
+  type: "line",
+  data: {
+    labels: arrayRange(1, store.getRoundNumber, 1),
+    datasets: cumulativeData,
+  },
+  options: {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: "top",
+        labels: { boxWidth: 20 },
+      },
+    },
+  },
+};
+</script>
diff --git a/src/pages/wizard/index.vue b/src/pages/wizard/index.vue
index 497056f..614d0d2 100644
--- a/src/pages/wizard/index.vue
+++ b/src/pages/wizard/index.vue
@@ -1,37 +1,39 @@
 <template>
-  <div class="flex justify-evenly hover:cursor-pointer">
+  <div class="flex justify-evenly">
     <div
-      class="grow border-b border-r border-solid border-black h-8 pt-1"
+      class="grow border-b border-r border-solid border-black h-8 pt-1 hover:cursor-pointer"
       :class="{ 'font-bold bg-slate-200': showSection == 'Setup' }"
       @click="showSection = 'Setup'"
     >
       Setup
     </div>
     <div
-      class="grow border-b border-r border-solid border-black h-8 pt-1"
+      class="grow border-b border-r border-solid border-black h-8 pt-1 hover:cursor-pointer"
       :class="{ 'font-bold bg-slate-200': showSection == 'Score' }"
       @click="showSection = 'Score'"
     >
       Round
     </div>
     <div
-      class="grow border-b border-solid border-black h-8 pt-1"
+      class="grow border-b border-solid border-black h-8 pt-1 hover:cursor-pointer"
       :class="{ 'font-bold bg-slate-200': showSection == 'History' }"
       @click="showSection = 'History'"
     >
       History
     </div>
   </div>
-  <players v-if="showSection == 'Setup'">Players</players>
-  <score v-if="showSection == 'Score'">Score</score>
-  <bets v-if="showSection == 'History'">Bets</bets>
+  <div class="container mx-auto 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">
 import { ref } from "vue";
 import players from "./players.vue";
 import score from "./score.vue";
-import bets from "./bets.vue";
+import history from "./history.vue";
 
 const showSection = ref("Setup");
 </script>
diff --git a/src/pages/wizard/players.vue b/src/pages/wizard/players.vue
index d9e803b..d2fbadf 100644
--- a/src/pages/wizard/players.vue
+++ b/src/pages/wizard/players.vue
@@ -1,95 +1,99 @@
 <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" class="text-black justify-self-end"
+          >Steps Setup</toggleSwitch
+        >
       </div>
+    </container>
+
+    <div class="flex flex-wrap justify-center mt-4" 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">
+        <toggleSwitch v-model="store.trackBets" class="text-black justify-self-end"
+          >Bets
+        </toggleSwitch>
+        <defineSteps
+          :steps="store.betSteps"
+          @change="
+            (ev) => {
+              store.betSteps = ev;
+            }
+          "
+          :disabled="!store.trackBets"
+          >BETS STEPS</defineSteps
+        ></container
+      >
     </div>
-  </container>
+
+    <container class="mt-2">
+      <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">
-import { computed, ref } from "vue";
+import { ref } from "vue";
 import { useScoreStore } from "./store.ts";
 import toggleSwitch from "../../components/toggleswitch.vue";
 import container from "../../components/container.vue";
 import defineSteps from "./definesteps.vue";
 
 const store = useScoreStore();
-const isGameStarted = computed(() => {
-  return store.isGameStarted;
-});
+
 const showStepsSetup = ref(false);
 
 const deleteU = (userId: number) => {
diff --git a/src/pages/wizard/score.vue b/src/pages/wizard/score.vue
index 907b461..abfd973 100644
--- a/src/pages/wizard/score.vue
+++ b/src/pages/wizard/score.vue
@@ -1,49 +1,52 @@
 <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">
+        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.userId"
     >
-      {{ 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.userId"
+        :phase="betOrRoundPhase ? 'bet' : 'round'"
+        @changeScore="(event) => scoreStore.editCurrentRound(userId, event)"
+        @changeBet="(event) => scoreStore.editCurrentBet(userId, event)"
+        :activePlayer="activeUser == user.userId"
+      >
+        {{ user.name }}
+      </editscore>
+    </div>
   </div>
 </template>
 
diff --git a/src/pages/wizard/store.ts b/src/pages/wizard/store.ts
index ebffccb..820f301 100644
--- a/src/pages/wizard/store.ts
+++ b/src/pages/wizard/store.ts
@@ -1,4 +1,6 @@
 import { defineStore } from 'pinia'
+import { v4 as uuidv4 } from "uuid"
+
 const SETTINGS_LOCAL_STORAGE_KEY = 'score'
 interface State {
     userList: UserInfo[]
@@ -8,6 +10,7 @@ interface State {
 }
 
 export type UserInfo = {
+    userId: string
     name: string
     scorePerRound: number[]
     betPerRound: number[]
@@ -15,8 +18,12 @@ export type UserInfo = {
     currentBet: number
 }
 const DefaultSettings = () => {
+    const newUUID = uuidv4()
     return {
-        userList: [{ name: 'player1', scorePerRound: [], betPerRound: [], currentRound: 0, currentBet: 0 }],
+        userList: [{
+            userId: newUUID
+            , name: createPlayerName(newUUID), scorePerRound: [], betPerRound: [], currentRound: 0, currentBet: 0
+        }],
         trackBets: false,
         scoreSteps: [1, 5, 10],
         betSteps: [1, 2, 5, 10],
@@ -30,6 +37,11 @@ const getSettings = () => {
 
     return settings ? JSON.parse(settings) : DefaultSettings()
 }
+
+const createPlayerName = (uuidString: string): string => {
+    return `player-${uuidString.split('-')[0]}`
+
+}
 export const useScoreStore = defineStore('scores', {
     state: (): State => { return getSettings() }
     ,
@@ -46,6 +58,20 @@ export const useScoreStore = defineStore('scores', {
                 return user.scorePerRound.reduce((a, b) => a + b)
             })
         },
+        cumulativeScore: (state) => {
+            return state.userList.map(user => {
+                if (user.scorePerRound.length == 0) return 0
+                let cumul: number[] = []
+                for (let index = 0; index < user.scorePerRound.length; index++) {
+                    if (index == 0) { cumul.push(user.scorePerRound[index]) } else {
+
+                        cumul.push(user.scorePerRound[index] + cumul[index - 1])
+                    }
+
+                }
+                return cumul
+            })
+        },
         isGameStarted: (state) => {
             return state.userList[0].scorePerRound.length > 0
         }
@@ -53,8 +79,9 @@ export const useScoreStore = defineStore('scores', {
     actions: {
 
         addUser() {
-            const username = `player${this.userList.length + 1}`
-            this.userList.push({ name: username, betPerRound: [], scorePerRound: [], currentBet: 0, currentRound: 0 })
+            const newUUID = uuidv4()
+            const username = createPlayerName(newUUID)
+            this.userList.push({ userId: newUUID, name: username, betPerRound: [], scorePerRound: [], currentBet: 0, currentRound: 0 })
         },
         deleteUser(userId: number) {
             console.log(userId + 'delete')
@@ -100,12 +127,17 @@ export const useScoreStore = defineStore('scores', {
         getScore(userId: number) {
             return this.totalScore[userId]
         },
+
         editCurrentRound(userId: number, newValue: number) {
             this.userList[userId].currentRound = newValue
         },
         editCurrentBet(userId: number, newValue: number) {
             this.userList[userId].currentBet = newValue
         }
+        ,
+        getCumulativeScore(userId: number): number | number[] {
+            return this.cumulativeScore[userId]
+        }
 
     }
 })
diff --git a/src/style.css b/src/style.css
index af9ed76..e264261 100644
--- a/src/style.css
+++ b/src/style.css
@@ -31,7 +31,13 @@ a:visited{
   color: #2a2a29;
 }
 
-
+.debug {
+  @apply border-2 border-solid border-violet-600
+}
+.debugall > * {
+  @apply border-2 border-solid border-red-500 
+  
+}
 h1 {
   @apply text-5xl;
    /* font-size: 3.2em; */