diff --git a/frontend/src/components/ActionNode.vue b/frontend/src/components/ActionNode.vue
new file mode 100644
index 0000000..697f990
--- /dev/null
+++ b/frontend/src/components/ActionNode.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="q-pa-md" style="max-width: 350px">
+    <q-expansion-item
+      class="shadow-1 overflow-hidden"
+      style="border-radius: 30px"
+      icon="explore"
+      label="Counter"
+      @show="startCounting"
+      @hide="stopCounting"
+      header-class="bg-primary text-white"
+      expand-icon-class="text-white"
+    >
+      <q-card>
+        <q-card-section>
+          Counting: <q-badge color="secondary">{{ counter }}</q-badge>.
+          Will only count when opened, using the show/hide events to control count timer.
+        </q-card-section>
+      </q-card>
+    </q-expansion-item>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent} from "vue"
+export default defineComponent({
+  props:{
+    icon:String,
+
+  },
+  setup() {
+    return {
+
+    }
+  }
+});
+</script>
+<style lang="">
+
+</style>
diff --git a/frontend/src/components/main/ActionNode.vue b/frontend/src/components/main/ActionNode.vue
new file mode 100644
index 0000000..e69de29