diff --git a/resources/js/Global/components/Blocks/Name.vue b/resources/js/Global/components/Blocks/Name.vue
index b6d1189..fbf4186 100644
--- a/resources/js/Global/components/Blocks/Name.vue
+++ b/resources/js/Global/components/Blocks/Name.vue
@@ -44,9 +44,11 @@
     }
     .name-block .text .Fa {
         font-size: 20px;
+        line-height: 22px;
     }
     .name-block .text .En {
         font-size: 12px;
+        line-height: 18px;
         letter-spacing: 5px;
         text-transform: uppercase;
         margin-right: -5px;
diff --git a/resources/js/Global/components/Blocks/Price.vue b/resources/js/Global/components/Blocks/Price.vue
index 0cff359..a159c01 100644
--- a/resources/js/Global/components/Blocks/Price.vue
+++ b/resources/js/Global/components/Blocks/Price.vue
@@ -4,8 +4,8 @@
             <div class="number-original En Bold" > {{ Intl.NumberFormat().format(original_price)  }} </div>
             <div class="percent En Bold"> 12 <v-icon color="white"> WMi-percentage</v-icon> </div>
         </div>
-        <div v-if="price != 0" class="number En Bold"> {{ Intl.NumberFormat().format(price)  }} </div>
-        <div v-else class="number Fa Bold"> رایگان </div>
+        <div v-if="(price != 0 || !zeroLabel)" class="number En Bold"> {{ Intl.NumberFormat().format(price)  }} </div>
+        <div v-else class="number Fa Bold"> {{ zeroLabel }} </div>
         <div class="label Fa" v-html="label"></div>
     </div>
 </template>
@@ -17,6 +17,7 @@
             original_price:         String,
             price:                  { default: 1000 },
             label:                  { default: 'تومان' },
+            zeroLabel:              String,
         },
     };
 </script>
diff --git a/resources/js/Global/components/Dividers/Section-Title.vue b/resources/js/Global/components/Dividers/Section-Title.vue
index 3da24bd..7296325 100644
--- a/resources/js/Global/components/Dividers/Section-Title.vue
+++ b/resources/js/Global/components/Dividers/Section-Title.vue
@@ -11,7 +11,7 @@
 
 <script>
 export default {
-    name: "wm-section-title",
+    name: "section-title",
     props: {
         titleFa: { default: "عنوان بخش" },
         titleEn: { default: "Part Title" },
@@ -87,6 +87,9 @@ export default {
 .section-title.sm .Title .En {
     font-size: 10px;
  }
+.section-title.sm .v-icon {
+    font-size: 40px;
+}
 
 </style>
 
diff --git a/resources/js/Global/components/Tiles/Back-Tile.vue b/resources/js/Global/components/Tiles/Back-Tile.vue
index 98bd645..a5d80ea 100644
--- a/resources/js/Global/components/Tiles/Back-Tile.vue
+++ b/resources/js/Global/components/Tiles/Back-Tile.vue
@@ -1,5 +1,5 @@
 <template>
-    <router-link :to="{ name: URL }" :class="`back-button fade-in fast theme-${theme} `" style="animation-delay: 0.1s;">
+    <router-link :to="{ name: URL }" :class="`back-button fade-in fast ${theme} `" style="animation-delay: 0.1s;">
         <div class="tile" :style="'background-image: linear-gradient(to right, #'+gradientBegin+' , #'+gradientEnd+'); '">
             <v-icon> WMi-right-open</v-icon>
         </div>
@@ -50,6 +50,18 @@ export default {
     .back-button.theme-dark .tile .v-icon {
         color: #fff;
     }
+    .back-button.theme-dark .tile .v-icon {
+        color: #fff;
+    }
+
+
+    @import "resources/js/Global/scss/_vars.scss";
+    @each $color,
+    $value in $colors {
+        .back-button.theme-#{$color} .tile .v-icon {
+            color: $value;
+        }
+    }
 
 
 </style>
diff --git a/resources/js/Global/components/Tiles/Icon-Tile.vue b/resources/js/Global/components/Tiles/Icon-Tile.vue
index 5ab8a37..03c2ba1 100644
--- a/resources/js/Global/components/Tiles/Icon-Tile.vue
+++ b/resources/js/Global/components/Tiles/Icon-Tile.vue
@@ -1,14 +1,14 @@
 <template>
     <div :class="`we-icon-tile ${TileClass} theme-${theme}`">
         <div class="static-content WM-Block WM-Align-C Relative"
-             :style="'background-image: linear-gradient('+GradientDirection+', #'+GradientBegin+' , #'+GradientEnd+'); height: '+TileHeight+'px;'">
+             :style="'background-image: linear-gradient('+GradientDirection+', #'+GradientBegin+' , #'+GradientEnd+'); height: '+height+'px;'">
             <div class="Content">
+                <v-icon>WMi-{{ icon }}</v-icon>
                 <div class="info">
                     <div class="Fa"> {{ TitleFa }} </div>
                     <div class="En"> {{ TitleEn }} </div>
                     <div class="desc Fa Thin" v-if="Desc != ''" v-html="Desc"></div>
                 </div>
-                <v-icon>WMi-{{ icon }}</v-icon>
             </div>
         </div>
         <div v-if="Quantity != ''" class="quantity" >
@@ -24,7 +24,7 @@ export default {
     props: {
         // Tile:TileData,
         TileClass: { default: "lg6 xs12" },
-        TileHeight: { default: "180px" },
+        height: { default: "180px" },
         theme: { default: "black" },
 
         // --------------------------------------------
@@ -78,6 +78,10 @@ export default {
         border: 1px solid #6d6d6d;
         border-radius: 5px;
     }
+    .we-icon-tile .static-content {
+        transition: 0.5s;
+        direction: rtl;
+    }
     .we-icon-tile:hover .static-content {
         -webkit-filter: grayscale(100%);
     }
@@ -123,6 +127,7 @@ export default {
         font-size:14px;
         letter-spacing:15px;
         text-transform:uppercase;
+        opacity: 0.7;
     }
     .we-icon-tile .info .desc {
         display: block;
@@ -141,12 +146,11 @@ export default {
     .quantity {
         display: block;
         position: absolute;
-        font-size: 100px;
-        line-height: 90px;
-        left:15px;
-        bottom:calc(50% - 55px);
+        font-size: 80px;
+        line-height: 70px;
+        left:25px;
+        bottom:calc(50% - 47px);
         text-align: center;
-
     }
     .quantity .label {
         display: block;
@@ -190,4 +194,31 @@ export default {
     }
 
 
+    .we-icon-tile.sm .info .En {
+        font-size: 12px;
+        letter-spacing: 10px;
+        margin-right: -10px;
+        margin-top: -5px;
+    }
+    .we-icon-tile.sm .info .Fa {
+        font-size: 22px;
+    }
+
+    /*---------------------------------------------------------------*/
+    /*                    Qunatity :: End*/
+    /*---------------------------------------------------------------*/
+
+    @import "resources/js/Global/scss/_vars.scss";
+    @each $color,
+    $value in $colors {
+        .we-icon-tile.theme-#{$color} .v-icon {
+            color: $value;
+        }
+        .we-icon-tile.theme-#{$color} .info {
+            color: $value;
+        }
+    }
+
+
+
 </style>
diff --git a/resources/js/Global/scss/Misc.scss b/resources/js/Global/scss/Misc.scss
index 35c0286..b6a59eb 100644
--- a/resources/js/Global/scss/Misc.scss
+++ b/resources/js/Global/scss/Misc.scss
@@ -590,7 +590,9 @@ $value in $colors {
 }
 
 
-
+/*---------------------------------------------------------------*/
+/*                    End & Full Row :: Begin
+/*---------------------------------------------------------------*/
 .end-row {
     margin-left: -18px;
     margin-right: -18px;
@@ -630,3 +632,20 @@ $value in $colors {
         border-right: 2px solid $value;
     }
 }
+
+
+/*---------------------------------------------------------------*/
+/*                   we form size :: Begin
+/*---------------------------------------------------------------*/
+.row.we-form-size {
+    margin: 0px;
+}
+.row.we-form-size .col {
+    padding: 0px 6px 0px 10px;
+}
+.row.we-form-size.md .col {
+    padding: 5px 6px 5px 10px;
+}
+.v-btn--fab.v-size--x-small .v-icon, .v-btn--icon.v-size--x-small .v-icon {
+    font-size: 16px;
+}
diff --git a/resources/js/Home/views/Home.vue b/resources/js/Home/views/Home.vue
index db6fcab..e61a14e 100644
--- a/resources/js/Home/views/Home.vue
+++ b/resources/js/Home/views/Home.vue
@@ -9,14 +9,14 @@
                 :style="`animation-delay: ${key * 0.1}s;`"
             >
 
-                <wm-tile
+                <icon-tile
                     :TileClass="module.title_class +' Shadowed'"
                     :TitleEn="$_name(`${module.slug}.tile.name_en`) != '' ? $_name(`${module.slug}.tile.name_en`)  :  module.title_en"
                     :TitleFa="$_name(`${module.slug}.tile.name`) != '' ? $_name(`${module.slug}.tile.name`)  :  module.title_fa"
                     :GradientBegin="module.gradient_begin"
                     :GradientEnd="module.gradient_end"
-                    :ImageURL="module.img_url"
-                    :ImageHeight="module.img_height"
+                    :icon="module.img_url"
+                    :height="module.img_height"
                 />
             </a>
         </v-layout>
@@ -32,15 +32,17 @@
 
 <script>
 import Tile from "@Global/components/Tiles/Tile";
+import IconTile from '@Global/components/Tiles/Icon-Tile';
 import { mapGetters, mapActions } from "vuex";
 import routes from '@Global/utils/common/routes';
+
 export default {
     data: () => ({
         hostname : window.location.hostname,
         originHostName : routes.originHostName()
     }),
     components: {
-        "wm-tile": Tile,
+        IconTile
     },
     computed: {
         ...mapGetters("rolePermission", ["getModules"]),