diff --git a/app/Http/Controllers/Admin/ProductController.php b/app/Http/Controllers/Admin/ProductController.php
index f51586d..28cf1d0 100644
--- a/app/Http/Controllers/Admin/ProductController.php
+++ b/app/Http/Controllers/Admin/ProductController.php
@@ -95,6 +95,11 @@ class ProductController extends XController
             }
         }
 
+        if ($request->has('meta')) {
+//            dd($request->input('meta'));
+            $product->syncMeta(json_decode($request->get('meta','[]'),true));
+        }
+
         return $product;
 
     }
diff --git a/app/Http/Controllers/Api/CategoryController.php b/app/Http/Controllers/Api/CategoryController.php
index 9dac6e6..a0e87a7 100644
--- a/app/Http/Controllers/Api/CategoryController.php
+++ b/app/Http/Controllers/Api/CategoryController.php
@@ -66,7 +66,8 @@ class CategoryController extends Controller
         //
     }
 
-    public function props(Category $category){
+    public function props( $id){
+        $category = Category::whereId($id)->firstOrFail();
         return PropCollection::collection($category->props);
     }
 }
diff --git a/app/Http/Resources/PropCollection.php b/app/Http/Resources/PropCollection.php
index c33006c..58a8577 100644
--- a/app/Http/Resources/PropCollection.php
+++ b/app/Http/Resources/PropCollection.php
@@ -19,6 +19,7 @@ class PropCollection extends JsonResource
             'id' => $this->id,
             'name' => $this->name,
             'label' => $this->label,
+            'type' => $this->type,
             'searchable' => (bool) $this->searchable,
             'priceable'=> (bool) $this->priceable,
             'unit' => $this->unit,
diff --git a/resources/js/app.js b/resources/js/app.js
index fd50bd9..fa7be4f 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -16,6 +16,7 @@ import './bootstrap';
 import { createApp } from 'vue';
 import ToastPlugin from 'vue-toast-notification';
 import {useToast} from 'vue-toast-notification';
+import store from "./components/libs/store.js";
 import './panel/raw.js';
 import './panel/navbar.js';
 import './panel/list-checkboxs.js';
@@ -76,6 +77,10 @@ app.component('address-input', AddressInput);
 
 import PropTypeInput from "./components/PropTypeInput.vue";
 app.component('props-type-input', PropTypeInput);
+
+import MetaInput from "./components/MetaInput.vue";
+app.component('meta-input', MetaInput);
+
 /**
  * The following block of code may be used to automatically register your
  * Vue components. It will recursively scan this directory for the Vue
@@ -94,6 +99,7 @@ app.component('props-type-input', PropTypeInput);
  * scaffolding. Otherwise, you will need to add an element yourself.
  */
 app.use(ToastPlugin);
+app.use(store);
 app.mount('#app');
 
 window.app = app;
diff --git a/resources/js/components/MetaInput.vue b/resources/js/components/MetaInput.vue
new file mode 100644
index 0000000..303b02c
--- /dev/null
+++ b/resources/js/components/MetaInput.vue
@@ -0,0 +1,126 @@
+<template>
+    <div id="meta-input">
+        <div class="row">
+            <div v-for="prop in properties" :class="prop.width">
+                <label for="prop.name" v-if="prop.type != 'checkbox'">
+                    {{prop.label}}
+<!--                    [{{prop.type}}]-->
+                </label>
+                <div v-else class="mt-2">
+                    <br>
+                </div>
+                <template v-if="meta[prop.name] != undefined">
+                    <template v-if="prop.type == 'text'">
+                        <input type="text" :id="prop.name" v-model="meta[prop.name]" class="form-control">
+                    </template>
+                    <template v-if="prop.type == 'number'">
+                        <input type="number" :id="prop.name" v-model="meta[prop.name]" class="form-control">
+                    </template>
+                    <template v-if="prop.type == 'checkbox'">
+                        <div class="form-check form-switch">
+                            <input class="form-check-input" v-model="meta[prop.name]" type="checkbox" role="switch" :id="prop.name">
+                            <label class="form-check-label" for="flexSwitchCheckDefault">{{prop.label}}</label>
+                        </div>
+                    </template>
+                    <template v-if="prop.type == 'color'">
+                        <select :id="prop.name"  class="form-control color" v-model="meta[prop.name]">
+                            <option v-for="op in prop.optionList" :style="`background: ${op.value} ;`" :value="op.value"> {{op.title}} </option>
+                        </select>
+                    </template>
+                    <template v-if="prop.type == 'select' || prop.type == 'singemulti'">
+                        <select :id="prop.name"  class="form-control color" v-model="meta[prop.name]">
+                            <option v-for="op in prop.optionList"  :value="op.value"> {{op.title}} </option>
+                        </select>
+                    </template>
+                    <template v-if="prop.type == 'multi'">
+                        <searchable-multi-select :items="prop.optionList" value-field="value" v-model="meta[prop.name]"></searchable-multi-select>
+                    </template>
+                </template>
+            </div>
+        </div>
+        <input type="hidden" name="meta" :value="JSON.stringify(meta)">
+    </div>
+</template>
+
+<script>
+
+import {mapState} from "vuex";
+import searchableMultiSelect from "./SearchableMultiSelect.vue";
+
+export default {
+    name: "meta-input",
+    components: {
+        searchableMultiSelect
+    },
+    data: () => {
+        return {
+            properties: [],
+            meta:{}
+        }
+    },
+    props: {
+        propsApiLink:{
+            required: true,
+        },
+        metaz:{
+            default: [],
+        }
+    } ,
+    mounted() {
+    },
+    computed: {
+        category_id: {
+            get() {
+                return this.$store.state.category;
+            },
+            set(value) {
+                this.$store.commit('UPDATE_CATEGORY', value)
+            }
+        },
+    },
+    methods: {
+        async updateProps(){
+            try {
+                const  url = this.propsApiLink +  this.category_id;
+                let resp = await  axios.get(url);
+                this.properties = resp.data.data;
+                // added don't have
+                for( const prop of this.properties) {
+                    if (this.meta[prop.name] == undefined){
+                        if (prop.type == 'multi'){
+                            this.meta[prop.name] = [];
+                        }else{
+                            this.meta[prop.name] = '';
+                        }
+                    }
+                }
+
+                // update by old meta data
+                for( const meta in this.metaz) {
+                  this.meta[meta] = this.metaz[meta];
+                }
+
+
+
+            } catch(e) {
+                window.$toast.error(e.message);
+            }
+
+        },
+    },
+    watch: {
+        category_id: function() {
+            this.updateProps();
+        }
+    }
+}
+</script>
+
+<style scoped>
+#meta-input {
+
+}
+.color option{
+
+}
+</style>
diff --git a/resources/js/components/SearchableSelect.vue b/resources/js/components/SearchableSelect.vue
index 0af601a..cfb8333 100644
--- a/resources/js/components/SearchableSelect.vue
+++ b/resources/js/components/SearchableSelect.vue
@@ -61,6 +61,9 @@ export default {
     },
     emits: ['update:modelValue'],
     props: {
+        vuexDispatch:{
+          default: null,
+        },
         xlang: {
             default: null
         },
@@ -177,6 +180,9 @@ export default {
             if (!isNaN(this.modelValue)) {
                 this.$emit('update:modelValue', newValue);
             }
+            if (this.vuexDispatch != null){
+                this.$store.dispatch(this.vuexDispatch, newValue);
+            }
         }
     }
 }
diff --git a/resources/views/admin/products/product-form.blade.php b/resources/views/admin/products/product-form.blade.php
index c9fa016..bc94aa5 100644
--- a/resources/views/admin/products/product-form.blade.php
+++ b/resources/views/admin/products/product-form.blade.php
@@ -2,7 +2,7 @@
 
 @section('title')
     @if(isset($item))
-        {{__("Edit product")}} [{{$item->id}}]
+        {{__("Edit product")}} [{{$item->name}}]
     @else
         {{__("Add new product")}}
     @endif -
diff --git a/resources/views/admin/products/sub-pages/product-step1.blade.php b/resources/views/admin/products/sub-pages/product-step1.blade.php
index 169afdc..81124bf 100644
--- a/resources/views/admin/products/sub-pages/product-step1.blade.php
+++ b/resources/views/admin/products/sub-pages/product-step1.blade.php
@@ -53,6 +53,7 @@
 
 {{--                        data-url="{{route('props.list','')}}/"--}}
                     <searchable-select
+                        vuex-dispatch="updateCategory"
                         @error('category_id') :err="true" @enderror
                         :items='@json($cats)'
                         title-field="name"
diff --git a/resources/views/admin/products/sub-pages/product-step4.blade.php b/resources/views/admin/products/sub-pages/product-step4.blade.php
index c23873a..97046b2 100644
--- a/resources/views/admin/products/sub-pages/product-step4.blade.php
+++ b/resources/views/admin/products/sub-pages/product-step4.blade.php
@@ -1,3 +1,6 @@
-<h1>
-    step4
-</h1>
+<meta-input
+    props-api-link="{{route('v1.category.prop','')}}/"
+    @if(isset($item))
+        :metaz='@json($item->getAllMeta())'
+    @endif
+></meta-input>