diff --git a/resources/js/Global/components/Dividers/PartTitle.vue b/resources/js/Global/components/Dividers/PartTitle.vue
index 2088c5e..375c3db 100644
--- a/resources/js/Global/components/Dividers/PartTitle.vue
+++ b/resources/js/Global/components/Dividers/PartTitle.vue
@@ -7,6 +7,13 @@
                 <div class="inner" :class="color"></div>
             </div>
         </div>
+        <we-hint-text v-if="hintDesc != ''"
+            class="mt-1"
+            :icon="hintIcon"
+            :theme="hintClass"
+            :title="hintTitle"
+            :text="hintDesc">
+        </we-hint-text>
     </div>
 </template>
 
@@ -18,7 +25,11 @@ export default {
         TitleEn: { default: "Part Title" },
         color: { default: "black" },
         TextColor: { default: "white--text" },
-        TextFaColor: { default: "black--text" }
+        TextFaColor: { default: "black--text" },
+        hintClass: { default: "grey lighten-3 inline XS" },
+        hintTitle: { default: "" },
+        hintDesc: { default: "" },
+        hintIcon: { default: "info" }
     },
     data: function ()  {
         return {}
diff --git a/resources/js/Global/components/Dividers/SectionTitle.vue b/resources/js/Global/components/Dividers/SectionTitle.vue
index ca13a38..df83b0d 100644
--- a/resources/js/Global/components/Dividers/SectionTitle.vue
+++ b/resources/js/Global/components/Dividers/SectionTitle.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-flex :class='"xl"+colSize+" lg2 md2 sm4 xs12  RTL text-lg-right WM-Subtitle"'>
+    <v-flex :class='"xl"+colSize+" lg12 md12 sm12 xs12  RTL text-lg-right WM-Subtitle"'>
         <div :class='"Step En color-"+color+""' v-text="number"></div>
         <div class="Title">
             <div class="FA" v-text="titleFa"></div>
diff --git a/resources/js/Global/components/Inputs/ImageSelect.vue b/resources/js/Global/components/Inputs/ImageSelect.vue
new file mode 100644
index 0000000..7634bf4
--- /dev/null
+++ b/resources/js/Global/components/Inputs/ImageSelect.vue
@@ -0,0 +1,125 @@
+<template>
+    <v-row>
+        <v-col class="image-select" :class="size" size="xl12 hidden-sm-and-down">
+            <div class="item" v-for="item in items">
+                <img class="thumbnail" style="width:100%;" :src="`/images/Global/Flags/${item.src}.png`"/>
+                <div class="name">
+                    <div class="content">
+                        <div class="Fa"> {{ item.name }} </div>
+                        <div class="En"> {{ item.name_en }} </div>
+                    </div>
+                </div>
+                <div class="icon-wrapper"><v-icon class="WMi-ok" style="color: #fff;"></v-icon></div>
+            </div>
+        </v-col>
+        <v-col xl="4" offset-xl="8" class="hidden-md-and-up">
+            <v-card-text>
+                <v-autocomplete
+                    :items="items"
+                    :color="$_color('product')"
+                    prepend-icon="WMi-globe"
+                    append-icon="WMi-down-open"
+                    label=" زبان ترجمه "
+                >
+                    <template v-slot:selection="data">
+                        <div class="color-square" :class="data.item.src"> </div>  {{ data.item.name}}
+                    </template>
+                    <template v-slot:item="data">
+                        <div class="color-square" :class="data.item.src "> </div>  {{ data.item.name}}
+                    </template>
+                </v-autocomplete>
+            </v-card-text>
+        </v-col>
+    </v-row>
+
+</template>
+<script>
+    export default {
+        props: {
+            size: { default: "xl12" },
+            items: { default: []},
+        },
+        data: () => ({
+            thumbnail:"images/Business/Items/iPhoneX.jpg",
+        }),
+    };
+</script>
+<style lang="scss" scoped>
+    .image-select {
+        display: flex;
+    }
+    .image-select .thumbnail {
+        width: 12%;
+    }
+    .image-select .item {
+        position: relative;
+        border: 1px solid transparent;
+        transition: 0.2s;
+        padding: 10px;
+        margin-bottom: 10px;
+        width: 12%;
+        cursor: pointer;
+    }
+    .image-select .item .icon-wrapper {
+        display: none;
+        width: 30px;
+        height: 30px;
+        background-color: var(--color-blue);
+        text-align: center;
+        justify-content: center;
+        color: #fff;
+    }
+    .image-select .item.selected {
+        border: 1px solid var(--color-blue);
+    }
+    .image-select .item.selected .icon-wrapper {
+        display: flex;
+        position: absolute;
+        right: 0px;
+        bottom: 0px;
+    }
+    .image-select .item .thumbnail {
+        position: relative;
+    }
+    .image-select .item .name {
+        display: flex;
+        position: absolute;
+        width: 100%;
+        height: calc(100% - 20px);
+        color: #fff;
+        right: 0px;
+        top: 0px;
+        visibility: hidden;
+        opacity: 0;
+        transition: visibility 0s, opacity 0.2s linear;
+        background-color: rgba(0,0,0,0.8);
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+    }
+    .image-select .item .name .Fa {
+        font-size: 22px;
+    }
+    .image-select .item .name .En {
+        font-size: 12px;
+        letter-spacing: 5px;
+        text-transform: uppercase;
+        opacity: 0.8;
+    }
+
+    .image-select .item:hover {
+        border: 1px solid #2f353b;
+        padding: 5px;
+    }
+    .image-select .item:hover .thumbnail {
+        -webkit-filter: grayscale(0%);
+    }
+    .image-select .item:hover .name {
+        visibility: visible;
+        opacity: 1;
+        margin: 5px;
+        width: calc(100% - 10px);
+        height: calc(100% - 10px);
+    }
+
+</style>
diff --git a/resources/js/Global/components/Inputs/InputBlock.vue b/resources/js/Global/components/Inputs/InputBlock.vue
new file mode 100644
index 0000000..f77ecee
--- /dev/null
+++ b/resources/js/Global/components/Inputs/InputBlock.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="we-input-block" :class='direction'>
+        <v-text-field
+            :label="label"
+            :prepend-icon="`WMi-${icon}`"
+            color="cyan"
+            name="name"
+            class="pt-0"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        icon:           { default: 'check' },
+        label:          { default: " عنوان " },
+        value:          { default: "" },
+        direction:      { default: '' },
+        valueClass:      { default: '' },
+    },
+};
+</script>
+<style lang="scss" scoped>
+    .we-input-block {
+        text-align: right;
+        padding: 5px 10px 10px 10px;
+        margin: 0px 2px 10px;
+        border-right: 1px solid #dcdcdc;
+    }
+    .WM-Info-Block.LTR {
+        text-align: left;
+        direction: ltr;
+        font-family: "BYekan-Edited",'Montserrat-Regular' !important;
+        border-right: 0px;
+        border-left: 1px solid #dcdcdc;
+    }
+</style>
diff --git a/resources/js/Global/components/Texts/Hint.vue b/resources/js/Global/components/Texts/Hint.vue
index a61b05d..02c280d 100644
--- a/resources/js/Global/components/Texts/Hint.vue
+++ b/resources/js/Global/components/Texts/Hint.vue
@@ -1,18 +1,21 @@
 <template>
-    <div class="InfoBox" :class="color">
-        <div :class="'Icon '+textColor+'--text'"> <v-icon> WMi-{{icon}} </v-icon></div>
-        <div :class="'Text '+textColor+'--text'"><div class="Title"> {{ title }} </div> {{ text }}</div>
+    <div class="info-box" :class="theme">
+        <div :class="'icon '+textColor+'--text'"> <v-icon> WMi-{{icon}} </v-icon></div>
+        <div :class="'texts '+textColor+'--text'">
+            <div class="title Fa Bold" v-if="title != ''"> {{ title }} </div>
+            <div class="desc"> {{ text }} </div>
+        </div>
     </div>
 </template>
 
 <script>
 export default {
-    name: "wm-hint-text",
+    name: "we-hint-text",
     props: {
         icon:               { default: 'info' },
-        title:              { default: " عنوان " },
+        title:              { default: "" },
         text:               { default: " پسر خوب " },
-        color:              { default: "red" },
+        theme:              { default: "red" },
         textColor:          { default: "black" }
     },
 };
@@ -22,36 +25,68 @@ export default {
 /* --------------------------------------------------------
                         Info Box :: Begin
 -------------------------------------------------------- */
-.InfoBox {
+.info-box {
     display:flex;
     color:#fff;
     border-radius: 10px;
 }
 
-.InfoBox .Icon {
-    display:inline-block;
+.info-box .icon {
+    display:flex;
     background-color: rgba(0, 0, 0, 0.1);
     padding:10px 20px;
     border-radius: 10px;
+    justify-content: center;
+    align-items: center;
 }
-.InfoBox .Icon .v-icon {
+.info-box.XS .icon {
+    padding:5px 10px;
+}
+.info-box .icon .v-icon {
     line-height: 50px;
     font-size: 30px;
 }
-.InfoBox .Text {
+.info-box.XS .icon .v-icon {
+    line-height: 40px;
+    font-size: 20px;
+}
+
+.info-box .texts {
     display:inline-block;
-    padding:10px 30px;
+    padding:10px 20px;
     text-align: right;
     width: 100%
 }
-.InfoBox .Text .Title {
+.info-box.XS .texts {
+    padding:5px 10px;
+}
+
+.info-box .texts .title {
+    text-align: right;
+    font-size: 18px;
+}
+.info-box.XS .texts .title {
+    font-size: 16px;
+}
+.info-box .texts .desc {
     text-align: right;
-    font-size: 24px;
-    width: 100%
+    font-size: 14px;
 }
+.info-box.XS .texts .desc {
+    font-size: 14px;
+}
+.info-box.inline .texts {
+    display: flex;
+    margin-right: 10px;
+    line-height: 34px;
+}
+.info-box.inline .texts .desc {
+    margin-right: 10px;
+}
+
 
 /* ---------------------------------Modifications--------------------------------- */
-.InfoBox.LightGray .Text, .InfoBox.LightGray .Icon i {
+.info-box.LightGray .texts, .info-box.LightGray .icon i {
     color: #000;
 }
 
diff --git a/resources/js/Global/plugins/globalComponent.js b/resources/js/Global/plugins/globalComponent.js
index 864b5b6..0074cb7 100644
--- a/resources/js/Global/plugins/globalComponent.js
+++ b/resources/js/Global/plugins/globalComponent.js
@@ -18,6 +18,7 @@ import InfoMultiple from "@Global/components/Misc/InfoBlock-Multiple.vue";
 import Treeselect from "@riophae/vue-treeselect";
 import NoItems from "@Global/components/Misc/NoItems.vue";
 import Loading from "@Global/components/Misc/Loading-CSS-3.vue";
+import HintText from "@Global/components/Texts/Hint.vue";
 
 Vue.component("WM-PartTitle", PartTitle);
 Vue.component("WM-PageTitle", PageTitle);
@@ -31,6 +32,7 @@ Vue.component("wm-helper", Helper);
 Vue.component("treeselect", Treeselect);
 Vue.component("we-no-items", NoItems);
 Vue.component("we-loading", Loading);
+Vue.component("we-hint-text", HintText);
 
 //setTime
 import store from "@Global/store/index";
diff --git a/resources/js/Global/scss/Misc.scss b/resources/js/Global/scss/Misc.scss
index 31aadf9..96a0339 100644
--- a/resources/js/Global/scss/Misc.scss
+++ b/resources/js/Global/scss/Misc.scss
@@ -138,6 +138,24 @@
 }
 
 
+/* --------------------------------------------------------
+                        Tabs :: Begin
+-------------------------------------------------------- */
+@media screen and (min-width: 600px)  {
+    .v-tab {
+        min-width: 300px;
+    }
+}
+.v-tab .Fa {
+    font-size: 18px;
+    letter-spacing: 0px;
+}
+.v-tab .En {
+    font-size: 12px;
+    letter-spacing: 10px;
+    text-transform: uppercase;
+}
+
 /* --------------------------------------------------------
                         Blocks :: Begin
 -------------------------------------------------------- */
diff --git a/resources/js/Global/scss/Modify.scss b/resources/js/Global/scss/Modify.scss
index 5ad4ca6..4bede28 100644
--- a/resources/js/Global/scss/Modify.scss
+++ b/resources/js/Global/scss/Modify.scss
@@ -27,6 +27,10 @@ hr {
     border: 1px solid #eeeeee;
 }
 
+.v-application .headline, .v-application .title {
+    font-family: inherit !important;
+}
+
 // a {
 //     color:#000 !important;
 // }
@@ -99,6 +103,11 @@ $Value in $Colors {
                         Vuetify :: Dialog
 -------------------------------------------------------- */
 
+.v-dialog.XS {
+    width: 30%;
+}
+
+
 .v-card__title--primary {
     padding-top: 10px;
 }
diff --git a/resources/js/Global/scss/_vars.scss b/resources/js/Global/scss/_vars.scss
index dedaf44..d8e45b2 100644
--- a/resources/js/Global/scss/_vars.scss
+++ b/resources/js/Global/scss/_vars.scss
@@ -32,6 +32,8 @@ $Shadows: (red: $RedShadow, orange: $OrangeShadow, yellow: $YellowShadow, gold:
 :root {
     --color-red: #ee3552;
     --color-orange: #ff6b57;
+    --color-yellow: #ffc107;
+    --color-gold: #ddcfbb;
     --color-purple: #ac3773;
     --color-pink: #e94c8f;
     --color-cyan: #32d5c2;
@@ -53,4 +55,10 @@ $Shadows: (red: $RedShadow, orange: $OrangeShadow, yellow: $YellowShadow, gold:
     --color-blog-news: #ff6b57;
     --color-blog-article: #000;
     --color-gallery: #000;
+    --color-product: #32d5c2;
+    --color-service: #ee3552;
+    --color-translation: #1875BB;
+    --color-brand: #ac3773;
+    --color-product-variation: #ffc107;
+    --color-product-option: #ddcfbb;
 }
diff --git a/resources/js/Global/utils/icons/index.js b/resources/js/Global/utils/icons/index.js
new file mode 100644
index 0000000..4d69d88
--- /dev/null
+++ b/resources/js/Global/utils/icons/index.js
@@ -0,0 +1,12 @@
+export default [
+    { name: 'جهت بالا', icon:'up-open'},
+    { name: 'جهت پایین', icon:'down-open'},
+    { name: 'جهت چپ', icon:'left-open'},
+    { name: 'جهت راست', icon:'right-open'},
+    { name: 'کاربر', icon:'user'},
+    { name: 'کاربران', icon:'users'},
+    { name: 'هدیه', icon:'gift'},
+    { name: 'ستاره', icon:'star'},
+    { name: 'تلفن', icon:'phone'},
+    { name: 'نامه', icon:'mail-alt'},
+];
diff --git a/resources/js/Global/utils/languages/index.js b/resources/js/Global/utils/languages/index.js
new file mode 100644
index 0000000..84d0498
--- /dev/null
+++ b/resources/js/Global/utils/languages/index.js
@@ -0,0 +1,9 @@
+export default [
+    { name: 'انگلیسی', name_en:'English', src:'English'},
+    { name: 'عربی', name_en:'Arabic', src:'Arabic'},
+    { name: 'آلمانی', name_en:'German', src:'German'},
+    { name: 'چینی', name_en:'Chinese', src:'Chinese'},
+    { name: 'فرانسوی', name_en:'France', src:'France'},
+    { name: 'روسی', name_en:'Russian', src:'Russian'},
+    { name: 'اسپانیایی', name_en:'Spanish', src:'Spanish'},
+];
diff --git a/resources/js/Global/utils/module-color/moduleColor.js b/resources/js/Global/utils/module-color/moduleColor.js
index a96c169..5812897 100644
--- a/resources/js/Global/utils/module-color/moduleColor.js
+++ b/resources/js/Global/utils/module-color/moduleColor.js
@@ -5,4 +5,11 @@ export default {
     blog_news : 'orange',
     blog_article : 'black',
     gallery : 'black',
+    product : 'cyan',
+    service : 'red',
+    translation : 'blue',
+    brand : 'purple',
+    product_option: 'gold',
+    product_variation:'yellow',
+    default:"black",
 }