diff --git a/resources/js/Global/components/Blocks/Info.vue b/resources/js/Global/components/Blocks/Info.vue
index 8adf2c2..4b02f0d 100644
--- a/resources/js/Global/components/Blocks/Info.vue
+++ b/resources/js/Global/components/Blocks/Info.vue
@@ -1,7 +1,8 @@
 <template>
     <div class="info-block" :class='direction'>
         <div class="Label"><v-icon v-if="icon">WMi-{{icon}}</v-icon> {{ label }}  </div>
-        <div class="Value" :class='valueClass' v-html="value"></div>
+        <div v-if="value" class="Value" :class='valueClass' v-html="value"></div>
+        <a v-if="link" :href="link" class="link WM-Link">دانلود فایل </a>
     </div>
 </template>
 
@@ -10,7 +11,8 @@ export default {
     props: {
         icon:           String,
         label:          { default: " عنوان " },
-        value:          { default: "" },
+        value:          String,
+        link:           String,
         direction:      { default: '' },
         valueClass:      { default: '' },
     },
@@ -20,7 +22,6 @@ export default {
     .info-block {
         text-align: right;
         padding: 5px 10px 10px 10px;
-        margin: 0px 2px 10px;
         border-right: 1px solid #dcdcdc;
     }
     .info-block.LTR {
diff --git a/resources/js/Global/components/Blocks/Name.vue b/resources/js/Global/components/Blocks/Name.vue
index eab6993..d565562 100644
--- a/resources/js/Global/components/Blocks/Name.vue
+++ b/resources/js/Global/components/Blocks/Name.vue
@@ -1,7 +1,8 @@
 <template>
     <div :class="`name-block ${theme} `">
         <div v-if="number!=''" class="number En Bold"> {{ number }} </div>
-        <div v-if="colorBox" :class="`color-box ${colorBox}`"></div>
+        <v-icon v-if="icon" :class="`icon-box`">WMi-{{icon}}</v-icon>
+        <div v-else-if="colorBox" :class="`color-box ${colorBox}`"></div>
         <div class="text">
             <div v-if="top_label" class="top-label Fa Thin" v-html="top_label"></div>
             <div class="Fa title-fa"> {{ name_fa }}  </div>
@@ -33,6 +34,7 @@
             label:          String,
             labelIcon:      String,
             colorBox:       String,
+            icon:           String,
         },
     };
 </script>
@@ -192,6 +194,11 @@
         margin: 0px 0px 5px 15px;
         border-radius: 3px;
     }
+    .icon-box {
+        font-size: 30px;
+        margin-top: 3px;
+        margin-left: 10px;
+    }
 
     /*----------------------------------------------------*/
     /*                      Colors                        */
@@ -202,6 +209,9 @@
         .name-block.theme-#{$color} {
             color: $value;
         }
+        .name-block.icon-#{$color} .icon-box {
+            color: $value;
+        }
     }
 
 
diff --git a/resources/js/Global/components/Blocks/Price.vue b/resources/js/Global/components/Blocks/Price.vue
index 5ae0237..8568ef2 100644
--- a/resources/js/Global/components/Blocks/Price.vue
+++ b/resources/js/Global/components/Blocks/Price.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="`we-price ${theme}`">
+    <div :class="`we-price ${theme} ${(price == 0) ? 'zero-label' : ''}`">
         <div v-if="original_price && original_price != 0" class="discount">
             <div class="number-original En Bold" > {{ Intl.NumberFormat().format(Number(original_price))  }} </div>
             <div class="percent En Bold"> 12 <v-icon color="white"> WMi-percentage</v-icon> </div>
@@ -12,7 +12,7 @@
             <v-icon v-if="append_icon" class="append-icon">WMi-{{ append_icon }} </v-icon>
         </div>
         <!----------------------------Main Value------------------------->
-        <div v-else class="number Fa Bold"> {{ zeroLabel }} </div>
+        <div v-else class="text--24 Fa Bold"> {{ zeroLabel }} </div>
         <div class="label Fa" v-html="label"></div>
     </div>
 </template>
@@ -91,6 +91,16 @@
         text-align: right;
     }
 
+    /*----------------------------------------------------*/
+    /*                Zero Label                          */
+    /*----------------------------------------------------*/
+    .we-price.zero-label .label {
+        display: none;
+    }
+    .we-price.zero-label .number-original {
+        text-decoration: none;
+    }
+
     /*----------------------------------------------------*/
     /*                Misc                                */
     /*----------------------------------------------------*/
@@ -110,6 +120,15 @@
         line-height: 25px;
     }
 
+    /*----------------------------------------------------*/
+    /*                MD Size                             */
+    /*----------------------------------------------------*/
+    .we-price.md {
+        transform: scale(0.8, 0.8);
+    }
+
+
+
     /*----------------------------------------------------*/
     /*                SM Size                             */
     /*----------------------------------------------------*/
diff --git a/resources/js/Global/components/Inputs/ImageSelect.vue b/resources/js/Global/components/Inputs/ImageSelect.vue
index 445133e..8d8bd21 100644
--- a/resources/js/Global/components/Inputs/ImageSelect.vue
+++ b/resources/js/Global/components/Inputs/ImageSelect.vue
@@ -1,7 +1,7 @@
 <template>
     <v-row>
         <v-col v-for="(item, i) in items" :key="i" class="image-select" @click="changeSelected(item)" :class="`${size} pa-1`">
-            <div :class="{'active': isActive(item), 'item': true}">
+            <div :class="{'active': isActive(item), 'item': true, 'selected': (i == 2)}">
                 <img class="thumbnail width-full" :src="item[itemSrc]"/>
                 <div class="name">
                     <div class="content">
@@ -136,4 +136,5 @@
         height: 100%;
     }
 
+
 </style>
diff --git a/resources/js/Global/components/Inputs/Quantity-Select.vue b/resources/js/Global/components/Inputs/Quantity-Select.vue
index 301c69a..9a6a26d 100644
--- a/resources/js/Global/components/Inputs/Quantity-Select.vue
+++ b/resources/js/Global/components/Inputs/Quantity-Select.vue
@@ -1,17 +1,20 @@
 <template>
-    <div :class="`quantity-select ${theme}`">
-        <div class="controls">
-            <div class="add">
-                <v-icon color="cyan">WMi-plus</v-icon>
+    <div >
+        <div v-if="topLabel" class="top-label Fa Thin mr-3 light-gray"> {{ topLabel }} </div>
+        <div :class="`quantity-select ${theme}`">
+            <div class="controls">
+                <div class="add">
+                    <v-icon color="cyan">WMi-plus</v-icon>
+                </div>
+                <div class="reduce">
+                    <v-icon color="red">WMi-minus</v-icon>
+                </div>
             </div>
-            <div class="reduce">
-                <v-icon color="red">WMi-minus</v-icon>
+            <div class="value En Bold">
+                <div class="number"> {{ quantity }} </div>
+                <div class="unit Fa Thin"> {{ label }} </div>
             </div>
         </div>
-        <div class="value En Bold">
-            <div class="number"> {{ quantity }} </div>
-            <div class="unit Fa Thin"> {{ label }} </div>
-        </div>
     </div>
 
 </template>
@@ -19,9 +22,11 @@
 <script>
     export default {
         props: {
-            theme:      { default: '' },
-            quantity:   { default: '' },
-            label:      { default: 'نام فارسی' },
+            theme:          { default: '' },
+            quantity:       { default: '' },
+            label:          { default: 'نام فارسی' },
+            topLabel:       String,
+
         },
     };
 </script>
@@ -55,6 +60,10 @@
     .quantity-select .v-icon:hover {
         opacity: 1;
     }
+    .top-label {
+        border-radius: 5px;
+        margin-bottom: 3px;
+    }
 
     .quantity-select .controls .add {
         display: block;
diff --git a/resources/js/Global/components/Misc/End-Rows.vue b/resources/js/Global/components/Misc/End-Rows.vue
new file mode 100644
index 0000000..6679c3a
--- /dev/null
+++ b/resources/js/Global/components/Misc/End-Rows.vue
@@ -0,0 +1,31 @@
+<template>
+    <v-row>
+        <v-col v-for="(row, index) in rows" :key="index" xl="12" :class="` pt-1 pb-0`">
+            <v-row :class="`end-row ${row.rowClass} theme-${row.color}`">
+                <v-col xl="3" :class="`flex-justified-right ${row.titleClass || ''} color-${row.color} pr-5`">
+                    {{ row.title }}
+                </v-col>
+                <v-col xl="6" class="flex-justified-center">
+                    <number-block v-if="row.quantity" :theme="`label-left ${row.quantityClass || ''} color-${row.color}`" :number="row.quantity" :label="row.quantityLabel" />
+                </v-col>
+                <v-col xl="3" md="6" class="flex-justified-left pt-1 pb-1">
+                    <price-block :theme="`label-left  ${row.valueClass || ''} color-${row.color}`" zero-label="رایگان" :price="row.value"  :label="row.valueLabel" />
+                </v-col>
+            </v-row>
+        </v-col>
+    </v-row>
+</template>
+<script>
+    export default {
+        components: {},
+        props: {
+            rows: { default: ""},
+        },
+        data() {
+            return {};
+        },
+    }
+</script>
+<style lang="scss" scoped>
+
+</style>
diff --git a/resources/js/Global/components/Timelines/Steps.vue b/resources/js/Global/components/Timelines/Steps.vue
new file mode 100644
index 0000000..397a5ae
--- /dev/null
+++ b/resources/js/Global/components/Timelines/Steps.vue
@@ -0,0 +1,105 @@
+<template>
+    <div class="order-status">
+        <div :class="`current-status theme-${steps[currentStep].color}`">
+            <div class="symbol"> <v-icon> WMi-{{ steps[currentStep].icon }} </v-icon> </div>
+            <div class="text">
+                <name-block :theme="`theme-${(steps[currentStep].color)}`" :name_fa="steps[currentStep].name_fa" :name_en="steps[currentStep].name_en" :number="parseInt(currentStep)+1" />
+            </div>
+        </div>
+        <v-stepper class="we-stepper">
+            <v-stepper-header>
+                <v-stepper-step v-for="(step, index) in steps" :key="index" :step="index+1" :class="`fade-in fast delay-0${index} theme-${step.color} ${getStepStatus(index,currentStep)}`">
+                    <name-block :theme="`sm`" :name_en="step.name_en" :name_fa="step.name_fa" />
+                </v-stepper-step>
+
+            </v-stepper-header>
+        </v-stepper>
+    </div>
+
+</template>
+<script>
+
+    export default {
+        name: "steps-timeline",
+        props: {
+            currentStep:    {default: 1},
+            steps:          {default: ""},
+        },
+        methods: {
+            getStepStatus: function(thisStep, currentStep) {
+                if(thisStep > currentStep) {
+                    return 'waiting';
+                } else if(thisStep == currentStep) {
+                    return 'active';
+                } else if(thisStep < currentStep) {
+                    return 'passed';
+                }
+            }
+        },
+    }
+</script>
+<style lang="scss" scoped>
+    .order-status {
+        border: 1px solid #eeeeee;
+        border-radius: 5px;
+        margin-top: 10px;
+    }
+    .current-status {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        padding: 30px;
+    }
+    .current-status .symbol .v-icon {
+        font-size: 90px;
+    }
+    .current-status .text {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+
+</style>
+<style lang="scss">
+    .we-stepper .v-stepper__step.passed {
+        filter: grayscale(100%);
+        opacity: 0.5 !important;
+    }
+    .theme--light.v-stepper .v-stepper__step--active .v-stepper__label {
+        text-shadow: none;
+    }
+    /* --------------------------------------------------------
+                        Steps : Colors
+    -------------------------------------------------------- */
+    @import "resources/js/Global/scss/_vars.scss";
+    @each $color,
+    $value in $colors {
+        //-------------------Active State-----------------------------
+        .v-stepper.we-stepper .v-stepper__step.theme-#{$color}.active .v-stepper__label .title-fa,
+        .v-stepper.we-stepper .v-stepper__step.theme-#{$color}.active .v-stepper__label .title-en,
+        .v-stepper.we-stepper .v-stepper__step.theme-#{$color}.active .v-stepper__step__step {
+            color: #fff;
+        }
+        .v-stepper.we-stepper .v-stepper__step.theme-#{$color}.active {
+            background-color: $value;
+        }
+
+        //-------------------Waiting State-----------------------------
+        .v-stepper.we-stepper .v-stepper__step.theme-#{$color}.waiting .v-stepper__label .title-fa,
+        .v-stepper.we-stepper .v-stepper__step.theme-#{$color}.waiting .v-stepper__label .title-en {
+            color: $value;
+        }
+        .v-stepper.we-stepper .v-stepper__step.theme-#{$color}.waiting .v-stepper__step__step {
+            color: $value
+        }
+
+        //-------------------Current Step-----------------------------
+        .order-status .current-status.theme-#{$color} {
+            border: 2px solid $value;
+        }
+        .order-status .current-status.theme-#{$color} .symbol .v-icon {
+            color: $value
+        }
+    }
+</style>
diff --git a/resources/js/Global/scss/Colors.scss b/resources/js/Global/scss/Colors.scss
index 35347e9..3bc1717 100644
--- a/resources/js/Global/scss/Colors.scss
+++ b/resources/js/Global/scss/Colors.scss
@@ -21,50 +21,6 @@ $Value in $colors {
 }
 
 
-/* --------------------------------------------------------
-                        Steps : Colors
--------------------------------------------------------- */
-
-@each $color,
-$value in $colors {
-    //-------------------Active State-----------------------------
-    .v-stepper.we-stepper .v-stepper__step.theme-#{$color}.active .v-stepper__label {
-        color: #fff;
-    }
-    .v-stepper.we-stepper .v-stepper__step.theme-#{$color}.active .v-stepper__step__step {
-        color: #fff;
-    }
-    .v-stepper.we-stepper .v-stepper__step.theme-#{$color}.active {
-        background-color: $value;
-    }
-
-    //-------------------Passed State-----------------------------
-    .v-stepper.we-stepper .v-stepper__step.theme-#{$color}.passed .v-stepper__label {
-        color: $value;
-    }
-    .v-stepper.we-stepper .v-stepper__step.theme-#{$color}.passed .v-stepper__step__step {
-        color: $value
-    }
-
-    //-------------------Current Step-----------------------------
-    .order-status .current-status.theme-#{$color} {
-        border: 2px solid $value;
-    }
-    .order-status .current-status.theme-#{$color} .symbol .v-icon {
-        color: $value
-    }
-
-
-}
-@each $backgroundColor,
-$value in $backgrounds {
-    .v-stepper.we-stepper .v-stepper__step.theme-#{$backgroundColor}.passed {
-        background-color: $value;
-    }
-    .bg-#{$backgroundColor} {
-        background-color: $value;
-    }
-}
 
 
 .text-gradient.orange-purple {
diff --git a/resources/js/Global/scss/Misc.scss b/resources/js/Global/scss/Misc.scss
index 545b68e..95a9611 100644
--- a/resources/js/Global/scss/Misc.scss
+++ b/resources/js/Global/scss/Misc.scss
@@ -348,6 +348,9 @@ $Value in $colors {
     border-radius: 8px;
     margin-left: 8px;
 }
+.v-application .white.color-square {
+    border: 1px solid #000 !important;
+}
 
 .image-square {
     width: 32px;
@@ -405,6 +408,9 @@ $Value in $colors {
 .mt--8 {
     margin-top: -8px;
 }
+.mr--3 {
+    margin-right: -3px;
+}
 
 /* --------------------------------------------------------
                         masonry :: End
@@ -729,7 +735,7 @@ $value in $colors {
 
 
 /*---------------------------------------------------------------*/
-/*                   hidden states :: Begin
+/*                   disable states :: Begin
 /*---------------------------------------------------------------*/
 .hidden-by-height {
     max-height: 0px;
@@ -742,6 +748,25 @@ $value in $colors {
     opacity: 1;
 }
 
+.disable-by-gray-scale:not(.active) {
+     filter: grayscale(100%);
+     transition: 0.3s;
+    cursor: not-allowed;
+ }
+.disable-by-gray-scale:not(.active) > * {
+    pointer-events: none;
+}
+
+
+.disable-by-opacity:not(.active) {
+    opacity: 0.5;
+    transition: 0.3s;
+    cursor: not-allowed;
+}
+.disable-by-opacity:not(.active) > * {
+    pointer-events: none;
+}
+
 /*---------------------------------------------------------------*/
 /*                   home Tiles :: Begin
 /*---------------------------------------------------------------*/
diff --git a/resources/js/Global/scss/Modify.scss b/resources/js/Global/scss/Modify.scss
index ad59007..6e737b0 100644
--- a/resources/js/Global/scss/Modify.scss
+++ b/resources/js/Global/scss/Modify.scss
@@ -591,11 +591,9 @@ $Value in $Shadows {
     justify-content: center;
 }
 .v-stepper.we-stepper .v-stepper__step .v-stepper__label {
-    color: #32c5d2;
     text-align: right;
 }
 .v-stepper.we-stepper .v-stepper__step .v-stepper__step__step {
-    color: #32c5d2;
     border-radius: 0px;
     height: auto;
     min-width: auto;
@@ -612,29 +610,6 @@ $Value in $Shadows {
     color: rgba(0,0,0,.38);
 
 }
-.v-stepper.we-stepper .v-stepper__label .Fa {
-    font-size: 18px;
-}
-.v-stepper.we-stepper .v-stepper__label .En {
-    font-size: 12px;
-    margin-top: 5px;
-    text-transform: uppercase;
-    letter-spacing: 3px;
-}
-
-//------------------------------------------------------
-//                    Theme Gray
-//------------------------------------------------------
-.v-stepper.we-stepper .v-stepper__step.v-stepper__step--inactive {
-    //border-right: 2px solid #00000061;
-    background-color: transparent;
-}
-.v-stepper.we-stepper .v-stepper__step.v-stepper__step--inactive .v-stepper__label {
-    color: #00000061;
-}
-.v-stepper.we-stepper .v-stepper__step.v-stepper__step--inactive .v-stepper__step__step {
-    color: #00000061;
-}
 
 
 //------------------------------------------------------