diff --git a/application/modules/front/views/layouts/suite.php b/application/modules/front/views/layouts/suite.php
index 234cc238..d7e872b9 100644
--- a/application/modules/front/views/layouts/suite.php
+++ b/application/modules/front/views/layouts/suite.php
@@ -46,7 +46,8 @@
     '--sanad_text_color': '#B3B6BC',
     "--highlight-color": "#3d938c",
     "--disable_button_bg": "#6C757D",
-    "--boh_hover_bg": "#343A40"
+    "--boh_hover_bg": "#343A40",
+    "--button_expand_gradient":"linear-gradient(#343a4040, #343a40a8 20%, #343a40 100%)"
   };
   const lightTheme = {
     '--global-text-color': 'none',
@@ -75,7 +76,8 @@
     '--sanad_text_color': 'gray',
     "--highlight-color": "#deebea",
     "--disable_button_bg": "#d6d6d6",
-    "--boh_hover_bg": "#ffffff"
+    "--boh_hover_bg": "#ffffff",
+    "--button_expand_gradient":"linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 51%) 20%, #faf9f6 100%)"
   };
 
   const updateTheme = (theme) => {
diff --git a/public/css/all.css b/public/css/all.css
index d2640ecb..1b03d06f 100644
--- a/public/css/all.css
+++ b/public/css/all.css
@@ -132,8 +132,8 @@
 	/* #d6d6d6 */
 	--boh_hover_bg:#343A40;
 	/* #ffffff */
-	
-
+	--button_expand_gradient:linear-gradient(#343a4040, #343a40a8 20%, #343a40 100%);
+	/* linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 51%) 20%, #faf9f6 100%) */
 }
 
 *{
@@ -1056,7 +1056,7 @@ input.searchquery{
     width: 100%;
     height: 6em;
     padding-bottom: .5em;
-    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 51%) 20% ,#faf9f6 100%);
+    background: var(--button_expand_gradient);
     display: flex;
     justify-content: flex-end;
     align-items: center;