diff --git a/frontend/src/components/right/ColorPicker.vue b/frontend/src/components/right/ColorPicker.vue
new file mode 100644
index 0000000..aae3896
--- /dev/null
+++ b/frontend/src/components/right/ColorPicker.vue
@@ -0,0 +1,68 @@
+<template>
+    <div class="">
+        <q-field v-model="color" :label="displayName" bottom-slots labelColor="primary">
+            <template v-slot:control>
+                <q-chip text-color="black" color="white">
+                    <div class="row">
+                        <div class="col-4">
+                            <q-avatar class="shadow-1" :style="{ background: color }" size="xs"></q-avatar>
+                        </div>
+                        <div class="col">
+                            {{ color }}
+                        </div>
+                    </div>
+                </q-chip>
+            </template>
+            <template v-slot:append>
+                <q-icon name="colorize" class="cursor-pointer">
+                    <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+                        <q-color no-header default-view="palette" v-model="color" />
+                    </q-popup-proxy>
+                </q-icon>
+            </template>
+            <template v-slot:hint>
+                {{ placeholder }}
+            </template>
+        </q-field>
+
+
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue';
+export default defineComponent({
+    name: 'ColorPicker',
+    components: {
+    },
+    props: {
+        displayName: {
+            type: String,
+            default: '',
+        },
+        name: {
+            type: String,
+            default: '',
+        },
+        placeholder: {
+            type: String,
+            default: '',
+        },
+        hint: {
+            type: String,
+            default: '',
+        },
+        modelValue: {
+            type: Object,
+            default: null
+        },
+    },
+
+    setup(props, { emit }) {
+        const color = ref("#ffffff");
+        return {
+            color,
+        };
+    }
+});
+</script>
diff --git a/frontend/src/components/right/NumInput.vue b/frontend/src/components/right/NumInput.vue
new file mode 100644
index 0000000..d916c94
--- /dev/null
+++ b/frontend/src/components/right/NumInput.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="">
+    <q-input v-model.number="numValue" type="number" :label="displayName" label-color="primary" bottom-slots>
+      <template v-slot:hint>
+        {{ placeholder }}
+      </template>
+    </q-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+export default defineComponent({
+  name: 'NumInput',
+  components: {
+  },
+  props: {
+    displayName: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    hint: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: Object,
+      default: null
+    },
+  },
+
+  setup(props, { emit }) {
+    const numValue = ref(0);
+
+    return {
+      numValue,
+    };
+  }
+});
+</script>
diff --git a/frontend/src/components/right/PropertyList.vue b/frontend/src/components/right/PropertyList.vue
index 61bff1c..e113923 100644
--- a/frontend/src/components/right/PropertyList.vue
+++ b/frontend/src/components/right/PropertyList.vue
@@ -19,6 +19,8 @@ import AppFieldSelect from './AppFieldSelect.vue';
 import MuiltInputText from '../right/MuiltInputText.vue';
 import ConditionInput from '../right/ConditionInput.vue';
 import EventSetter from '../right/EventSetter.vue';
+import ColorPicker from './ColorPicker.vue';
+import NumInput from './NumInput.vue';
 import { IActionNode,IActionProperty,IProp } from 'src/types/ActionTypes';
 
 export default defineComponent({
@@ -31,7 +33,9 @@ export default defineComponent({
     AppFieldSelect,
     MuiltInputText,
     ConditionInput,
-    EventSetter
+    EventSetter,
+    ColorPicker,
+    NumInput
   },
   props: {
     nodeProps: {