diff --git a/web/src/components/HelloWorld.vue b/web/src/components/HelloWorld.vue
index ab711a0..523ebcf 100644
--- a/web/src/components/HelloWorld.vue
+++ b/web/src/components/HelloWorld.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { useAppState } from '../stores/appState'
 
 defineProps<{ msg: string }>()
 
-const count = ref(0)
+const appState = useAppState();
 </script>
 
 <template>
@@ -27,7 +27,7 @@ const count = ref(0)
         <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
     </p>
 
-    <button type="button" @click="count++">count is: {{ count }}</button>
+    <button type="button" @click="appState.counter++">count is: {{ appState.counter }}</button>
     <p>
         Edit
         <code>components/HelloWorld.vue</code> to test hot module replacement.
diff --git a/web/src/stores/appState.ts b/web/src/stores/appState.ts
new file mode 100644
index 0000000..1aef584
--- /dev/null
+++ b/web/src/stores/appState.ts
@@ -0,0 +1,9 @@
+import { defineStore } from 'pinia';
+
+export const useAppState = defineStore('appState', {
+    state: () => {
+        return {
+            counter: 0
+        }
+    }
+});
\ No newline at end of file