diff --git a/resources/js/Global/components/Dividers/Section-Title.vue b/resources/js/Global/components/Dividers/Section-Title.vue
index 6fcf926..2b18bdc 100644
--- a/resources/js/Global/components/Dividers/Section-Title.vue
+++ b/resources/js/Global/components/Dividers/Section-Title.vue
@@ -1,6 +1,7 @@
 <template>
     <div :class="`RTL text-lg-right section-title ${theme} ${(icon) ? 'icon-visible' : ''}`">
         <v-icon v-if="icon" :color="color">WMi-{{icon}}</v-icon>
+        <div v-if="letterIcon" :class="`letter-icon En Bold ${color}--text`" >{{ letterIcon }}</div>
         <div v-if="number" :class='"step En color-"+color+""' v-text="number"></div>
         <div class="Title">
             <div class="Fa" v-text="titleFa"></div>
@@ -19,6 +20,7 @@ export default {
         number: String,
         theme: String,
         icon: String,
+        letterIcon: String,
     },
     data: function ()  {
         return {}
@@ -45,17 +47,14 @@ export default {
     font-size: 50px;
     opacity: 0.2;
 }
+.section-title .letter-icon {
+    font-size: 40px;
+    margin-left: 10px;
+}
 .section-title.icon-ml-15 .v-icon {
     margin-left: 15px;
 }
 
-
-.section-title .Title {
-    float: right;
-    margin-right: -30px;
-    margin-top: 8px;
-}
-
 .section-title .Title .Fa {
     font-size: 20px;
     line-height: 1.2;
diff --git a/resources/js/Global/scss/Misc.scss b/resources/js/Global/scss/Misc.scss
index 940ff71..e61f2d8 100644
--- a/resources/js/Global/scss/Misc.scss
+++ b/resources/js/Global/scss/Misc.scss
@@ -201,18 +201,19 @@ $Value in $colors {
 /* --------------------------------------------------------
                         Tabs :: Begin
 -------------------------------------------------------- */
-@media screen and (min-width: 600px)  {
-    .v-tab {
-        min-width: 300px;
-    }
-}
+//@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;
+    margin-right: -5px;
+    letter-spacing: 5px;
     text-transform: uppercase;
 }
 
@@ -326,8 +327,8 @@ $Value in $colors {
 
 .float-buttons-placeholder {
     position: fixed;
-    left: 5%;
-    bottom: 5%;
+    left: 3%;
+    bottom: 3%;
     z-index: 999;
 }
 
diff --git a/resources/js/Global/scss/Modify.scss b/resources/js/Global/scss/Modify.scss
index adcc413..6668ceb 100644
--- a/resources/js/Global/scss/Modify.scss
+++ b/resources/js/Global/scss/Modify.scss
@@ -268,7 +268,7 @@ table.v-table tbody td {
 }
 
 .v-data-footer {
-    padding-left: 90px;
+    padding-left: 150px;
 }
 
 .orange.darken-2 {
diff --git a/resources/js/Global/scss/_vars.scss b/resources/js/Global/scss/_vars.scss
index ec691b8..201b542 100644
--- a/resources/js/Global/scss/_vars.scss
+++ b/resources/js/Global/scss/_vars.scss
@@ -28,11 +28,21 @@ $Blue: #3498DB;
 $BlueShadow:rgba(51, 152, 219, 1);
 $BlueBackground: #ecf7ff;
 
+//--------------------------------------------DarkBlue
+$DarkBlue: #04314B;
+$DarkBlueShadow: rgba(4, 49, 75, 0.6);
+$DarkBlueBackground: #ecf7ff;
+
 //--------------------------------------------Green
 $Green: #0d7e00;
 $GreenShadow:rgba(13, 126, 0, 0.35);
 $GreenBackground: #fbfffa;
 
+//--------------------------------------------Pink
+$Pink: #e94c8f;
+$PinkShadow: rgba(233, 76, 143, 0.14);
+$PinkBackground: #fbfffa;
+
 //--------------------------------------------Cyan
 $Cyan: #32c5d2;
 $CyanShadow:rgba(50, 197, 210, 0.32);
@@ -51,7 +61,7 @@ $GrayBackground: #ffe5e9;
 //--------------------------------------------Brown
 $Brown: #8b4513;
 $BrownShadow:rgba(145, 81, 23, 0.5);
-$BrownBackground: #ffe5e9;
+$BrownBackground: #fff4ed;
 
 //--------------------------------------------Black
 $Black: #2f353b;
@@ -74,6 +84,7 @@ $colors: (red: $Red, orange: $Orange, yellow: $Yellow, gold: $Gold, purple: $Pur
 $Shadows: (red: $RedShadow, orange: $OrangeShadow, yellow: $YellowShadow, gold: $GoldShadow, purple: $PurpleShadow, blue: $BlueShadow, green: $GreenShadow, cyan: $CyanShadow, gray: $GrayShadow, 'grey.lighten-3': $LightGrayShadow, brown: $BrownShadow, black: $BlackShadow, white: $WhiteShadow, teal: $TealShadow);
 $backgrounds: (red: $RedBackground, orange: $OrangeBackground, yellow: $YellowBackground, gold: $GoldBackground, purple: $PurpleBackground, blue: $BlueBackground, green: $GreenBackground, cyan: $CyanBackground, gray: $GrayBackground, 'grey.lighten-3': $LightGrayBackground, brown: $BrownBackground, black: $BlackBackground, white: $WhiteBackground, teal: $TealBackground);
 :root {
+    //-------------------------------------------Main Colors
     --color-red: #ee3552;
     --color-orange: #ff6b57;
     --color-yellow: #ffc107;
@@ -92,6 +103,23 @@ $backgrounds: (red: $RedBackground, orange: $OrangeBackground, yellow: $YellowBa
     --color-light-gray: #e6e6e6;
     --color-light-blue: #C9D3EC;
     --color-link-hover: #181b31;
+    //-------------------------------------------Main Background Colors
+    --color-bg-red: #fff8f9;
+    --color-bg-orange: #fff9f8;
+    --color-bg-yellow: #fff3de;
+    --color-bg-gold: #fffaf4;
+    --color-bg-purple: #fff5fa;
+    --color-bg-blue: #ecf7ff;
+    --color-bg-dark-blue: #ecf7ff;
+    --color-bg-green: #fbfffa;
+    --color-bg-pink: #fbfffa;
+    --color-bg-cyan: #faffff;
+    --color-bg-white: #fff;
+    --color-bg-gray: #ffe5e9;
+    --color-bg-brown: #ffe5e9;
+    --color-bg-black: #e8e8e87a;
+
+
     //-------------------------------------------Module Colors
 
     //-------------------------misc
diff --git a/resources/js/Global/utils/colors/index.js b/resources/js/Global/utils/colors/index.js
index 74eaad3..a57bbc2 100644
--- a/resources/js/Global/utils/colors/index.js
+++ b/resources/js/Global/utils/colors/index.js
@@ -2,11 +2,15 @@ export default [
     { name: 'قرمز', color:'red'},
     { name: 'نارنجی', color:'orange'},
     { name: 'زرد', color:'yellow'},
+    { name: 'صورتی', color:'pink'},
     { name: 'طلایی', color:'gold'},
     { name: 'بنفش', color:'purple'},
     { name: 'آبی', color:'blue'},
+    { name: 'آبی تیره', color:'dark-blue'},
     { name: 'سبز', color:'green'},
+    { name: 'سبز پاستیلی', color:'teal'},
     { name: 'فیروزه ای', color:'cyan'},
     { name: 'قهوه ای', color:'brown'},
+    { name: 'خاکستری', color:'gray'},
     { name: 'مشکی', color:'black'},
 ];