diff --git a/ActiveBOWeb/package.json b/ActiveBOWeb/package.json
index a7f7b53..e4e8e34 100644
--- a/ActiveBOWeb/package.json
+++ b/ActiveBOWeb/package.json
@@ -11,6 +11,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "chart.js": "^4.2.1",
     "pinia": "^2.0.30",
     "roslib": "^1.3.0",
     "vue": "^3.2.45",
diff --git a/ActiveBOWeb/src/components/MountainCarPlot.vue b/ActiveBOWeb/src/components/MountainCarCanvas.vue
similarity index 100%
rename from ActiveBOWeb/src/components/MountainCarPlot.vue
rename to ActiveBOWeb/src/components/MountainCarCanvas.vue
diff --git a/ActiveBOWeb/src/components/RewardPlot.vue b/ActiveBOWeb/src/components/RewardPlot.vue
new file mode 100644
index 0000000..93ff345
--- /dev/null
+++ b/ActiveBOWeb/src/components/RewardPlot.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <canvas id="reward-chart"/>
+  </div>
+
+</template>
+
+<script setup>
+import {
+  onMounted,
+  watch,
+} from "vue";
+import { Chart } from 'chart.js/auto';
+
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/ActiveBOWeb/src/store/MountainCarStore.js b/ActiveBOWeb/src/store/MountainCarStore.js
index e69de29..536ba0d 100644
--- a/ActiveBOWeb/src/store/MountainCarStore.js
+++ b/ActiveBOWeb/src/store/MountainCarStore.js
@@ -0,0 +1,22 @@
+import { defineStore } from "pinia";
+
+export const useMCStore = defineStore('MountainCarStore', {
+    state: () => {
+        return {
+            play: false,
+            rgbArray: Array,
+        }
+    },
+    getters: {
+        getPlay: (state) => state.play,
+        getRgbArray: (state) => state.rgbarray,
+    },
+    actions: {
+        setPlay() {
+            this.play = !this.play;
+        },
+        setRgbArray(value) {
+            this.rgbArray = value;
+        },
+    }
+})