diff --git a/app/Http/Controllers/ThemeController.php b/app/Http/Controllers/ThemeController.php
new file mode 100644
index 0000000..79692d8
--- /dev/null
+++ b/app/Http/Controllers/ThemeController.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Setting;
+use Illuminate\Http\Request;
+
+class ThemeController extends Controller
+{
+    //
+    public function cssVariables()
+    {
+        $response = 'main{';
+        foreach (Setting::where('section', 'Theme')->whereNotNull('data')
+                     ->get(['value', 'data']) as $color) {
+            $data = json_decode($color->data);
+            if ($data->name) {
+
+                $response .= '--' . $data->name . ':' . $color->value;
+                if (isset($data->suffix)) {
+                    $response .= $data->suffix;
+                }
+                $response .= ';';
+            }
+        }
+        $response .= '}';
+        return response($response)->header('Content-Type', 'text/css; charset=utf-8');
+    }
+}
diff --git a/resources/views/segments/index/GradientTextLink/GradientTextLink.blade.php b/resources/views/segments/index/GradientTextLink/GradientTextLink.blade.php
index d7cd9b7..8d4c065 100644
--- a/resources/views/segments/index/GradientTextLink/GradientTextLink.blade.php
+++ b/resources/views/segments/index/GradientTextLink/GradientTextLink.blade.php
@@ -1,4 +1,4 @@
-<section class='GradientTextLink py-4' style="--deg: {{getSetting($data->area->name.'_'.$data->part.'_deg')}}deg">
+<section class='GradientTextLink py-4'>
     <div class="{{gfx()['container']}} py-4 text-center">
         <h1>
             {{getSetting($data->area->name.'_'.$data->part.'_title')}}
diff --git a/resources/views/segments/index/GradientTextLink/GradientTextLink.php b/resources/views/segments/index/GradientTextLink/GradientTextLink.php
index 5475a33..7070020 100644
--- a/resources/views/segments/index/GradientTextLink/GradientTextLink.php
+++ b/resources/views/segments/index/GradientTextLink/GradientTextLink.php
@@ -11,50 +11,52 @@ class GradientTextLink
     {
         $setting = new Setting();
         $setting->section = 'theme';
-        $setting->key = $part->area->name . '_' . $part->part.'_title';
+        $setting->key = $part->area->name . '_' . $part->part . '_title';
         $setting->value = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquid aspernatur, commodi corporis cupiditate';
         $setting->type = 'TEXT';
         $setting->size = 12;
-        $setting->title =  $part->area->name . ' ' . $part->part .' title';
+        $setting->title = $part->area->name . ' ' . $part->part . ' title';
         $setting->save();
 
         $setting = new Setting();
         $setting->section = 'theme';
-        $setting->key = $part->area->name . '_' . $part->part.'_btn';
+        $setting->key = $part->area->name . '_' . $part->part . '_btn';
         $setting->value = 'Shop';
         $setting->type = 'TEXT';
         $setting->size = 4;
-        $setting->title =  $part->area->name . ' ' . $part->part .' button text';
+        $setting->title = $part->area->name . ' ' . $part->part . ' button text';
         $setting->save();
 
         $setting = new Setting();
         $setting->section = 'theme';
-        $setting->key = $part->area->name . '_' . $part->part.'_link';
+        $setting->key = $part->area->name . '_' . $part->part . '_link';
         $setting->value = config('app.url');
         $setting->type = 'TEXT';
         $setting->ltr = true;
         $setting->size = 4;
-        $setting->title =  $part->area->name . ' ' . $part->part .' button link';
+        $setting->title = $part->area->name . ' ' . $part->part . ' button link';
         $setting->save();
 
         $setting = new Setting();
         $setting->section = 'theme';
-        $setting->key = $part->area->name . '_' . $part->part.'_deg';
+        $setting->key = $part->area->name . '_' . $part->part . '_deg';
         $setting->value = 45;
         $setting->size = 4;
         $setting->type = 'NUMBER';
-        $setting->data = json_encode(['xmin' => 0, 'xmax' => 360]);
-        $setting->title =  $part->area->name . ' ' . $part->part. ' degree';
+        $setting->data = json_encode(['xmin' => 0, 'xmax' => 360, 'name' => 'gradient-text-link-deg', 'suffix' => 'deg']);
+        $setting->title = $part->area->name . ' ' . $part->part . ' degree';
         $setting->save();
 
     }
+
     public static function onRemove(Part $part = null)
     {
-        Setting::where('key',$part->area->name . '_' . $part->part.'_btn')->first()?->delete();
-        Setting::where('key',$part->area->name . '_' . $part->part.'_title')->first()?->delete();
-        Setting::where('key',$part->area->name . '_' . $part->part.'_link')->first()?->delete();
-        Setting::where('key',$part->area->name . '_' . $part->part.'_deg')->first()?->delete();
+        Setting::where('key', $part->area->name . '_' . $part->part . '_btn')->first()?->delete();
+        Setting::where('key', $part->area->name . '_' . $part->part . '_title')->first()?->delete();
+        Setting::where('key', $part->area->name . '_' . $part->part . '_link')->first()?->delete();
+        Setting::where('key', $part->area->name . '_' . $part->part . '_deg')->first()?->delete();
     }
+
     public static function onMount(Part $part = null)
     {
         return $part;
diff --git a/resources/views/segments/index/GradientTextLink/GradientTextLink.scss b/resources/views/segments/index/GradientTextLink/GradientTextLink.scss
index 394e933..9f7c761 100644
--- a/resources/views/segments/index/GradientTextLink/GradientTextLink.scss
+++ b/resources/views/segments/index/GradientTextLink/GradientTextLink.scss
@@ -1,6 +1,6 @@
 .GradientTextLink {
     // scss
-    background: linear-gradient( var(--deg), var(--xshop-primary), var(--xshop-secondary) 100%);
+    background: linear-gradient( var(--gradient-text-link-deg), var(--xshop-primary), var(--xshop-secondary) 100%);
     color: var(--xshop-diff);
 
     h1{
diff --git a/resources/views/segments/menu/SideMenu/SideMenu.blade.php b/resources/views/segments/menu/SideMenu/SideMenu.blade.php
index 33f17d5..5cbacb1 100644
--- a/resources/views/segments/menu/SideMenu/SideMenu.blade.php
+++ b/resources/views/segments/menu/SideMenu/SideMenu.blade.php
@@ -1,4 +1,4 @@
-<nav id='SideMenu'  style="---side-bg: {{getSetting($data->area->name.'_'.$data->part.'_bg')}};">
+<nav id='SideMenu'>
     <div class="text-center py-3" id="side-menu-logo">
         <a href="{{url('/')}}">
             <img src="{{asset('upload/images/logo.svg')}}" alt="">
diff --git a/resources/views/segments/menu/SideMenu/SideMenu.php b/resources/views/segments/menu/SideMenu/SideMenu.php
index 2b86149..a6c2baa 100644
--- a/resources/views/segments/menu/SideMenu/SideMenu.php
+++ b/resources/views/segments/menu/SideMenu/SideMenu.php
@@ -36,6 +36,7 @@ class SideMenu
         $setting->value = '#ececec';
         $setting->type = 'COLOR';
         $setting->size = 3;
+        $setting->data = json_encode(['name' => 'side-menu-bg-color']);
         $setting->title =  $part->area->name . ' ' . $part->part .' background';
         $setting->save();
     }
@@ -43,7 +44,7 @@ class SideMenu
     {
         Setting::where('key',$part->area->name . '_' . $part->part.'_menu')->first()?->delete();
         Setting::where('key',$part->area->name . '_' . $part->part.'_text')->first()?->delete();
-        Setting::where('key',$part->area->name . '_' . $part->part.'bg')->first()?->delete();
+        Setting::where('key',$part->area->name . '_' . $part->part.'_bg')->first()?->delete();
     }
     public static function onMount(Part $part = null)
     {
diff --git a/resources/views/segments/menu/SideMenu/SideMenu.scss b/resources/views/segments/menu/SideMenu/SideMenu.scss
index 2cd602c..30f8f26 100644
--- a/resources/views/segments/menu/SideMenu/SideMenu.scss
+++ b/resources/views/segments/menu/SideMenu/SideMenu.scss
@@ -4,47 +4,55 @@
     overflow: hidden;
     overflow-y: auto;
     z-index: 8;
-    background: var(---side-bg);
+    background: var(--side-menu-bg-color);
     width: 20rem;
     bottom: 0;
     top: 0;
     inset-inline-start: 0;
-    img{
+
+    img {
         width: 50% !important;
         height: auto !important;
     }
-    ul{
+
+    ul {
         list-style: none;
         padding: 0;
-        li{
+
+        li {
             transition: 600ms;
-            a{
+
+            a {
                 padding: .75rem 1rem;
                 display: block;
             }
+
             text-align: center;
 
-            &:hover{
+            &:hover {
                 background: var(--xshop-secondary);
-               a{
-                   color: var(--xshop-diff);
-               }
+
+                a {
+                    color: var(--xshop-diff);
+                }
             }
 
-            &.current-page{
+            &.current-page {
                 background: var(--xshop-primary);
-                a{
+
+                a {
                     color: var(--xshop-diff);
                 }
             }
         }
     }
-    #side-menu-btn{
+
+    #side-menu-btn {
         display: none;
     }
 }
 
-main{
+main {
     position: relative;
     inset-inline-start: 20rem;
     width: calc(100% - 20rem);
@@ -53,56 +61,61 @@ main{
 
 /*-1024px width*/
 @media (max-width: 1024px) {
-    main{
+    main {
         position: static;
         width: auto;
     }
 
-    #SideMenu{
+    #SideMenu {
         inset-inline-start: 0;
         width: 100%;
         bottom: auto;
         overflow: visible !important;
         //position: relative;
 
-        #side-menu-logo{
+        #side-menu-logo {
             float: left;
-            img{
+
+            img {
                 width: auto !important;
                 height: 48px !important;
                 margin-right: 1rem;
                 margin-left: 1rem;
             }
         }
-        ul{
+
+        ul {
             display: none;
             position: absolute;
             top: 100%;
             left: 0;
             right: 0;
             background: var(--xshop-background);
-            li{
+
+            li {
                 text-align: start;
             }
-            &.active{
-                display: block ;
+
+            &.active {
+                display: block;
             }
         }
-        #side-menu-btn{
+
+        #side-menu-btn {
             display: block !important;
             float: right;
             padding: 1.7rem 2rem;
-            &:hover{
+
+            &:hover {
                 background: var(--xshop-primary);
                 color: var(--xshop-diff);
             }
         }
 
-        #side-menu-content{
-            display:  none !important;
+        #side-menu-content {
+            display: none !important;
         }
     }
 
 
-
 }
diff --git a/resources/views/segments/products/TreeGridProducts/TreeGridProducts.blade.php b/resources/views/segments/products/TreeGridProducts/TreeGridProducts.blade.php
index 7a4bc15..8999ca4 100644
--- a/resources/views/segments/products/TreeGridProducts/TreeGridProducts.blade.php
+++ b/resources/views/segments/products/TreeGridProducts/TreeGridProducts.blade.php
@@ -1,5 +1,5 @@
 <section class='TreeGridProducts'
-         style="---main-bg: {{getSetting($data->area->name.'_'.$data->part.'_color')}};
+         style="---three-main-bg-color: {{getSetting($data->area->name.'_'.$data->part.'_color')}};
         --gx1: {{getSetting($data->area->name.'_'.$data->part.'_gradx1')}};
         --gx2: {{getSetting($data->area->name.'_'.$data->part.'_gradx2')}};
         --gy1: {{getSetting($data->area->name.'_'.$data->part.'_grady1')}};
diff --git a/resources/views/segments/products/TreeGridProducts/TreeGridProducts.php b/resources/views/segments/products/TreeGridProducts/TreeGridProducts.php
index dbd4559..3859027 100644
--- a/resources/views/segments/products/TreeGridProducts/TreeGridProducts.php
+++ b/resources/views/segments/products/TreeGridProducts/TreeGridProducts.php
@@ -25,6 +25,7 @@ class TreeGridProducts
         $setting->key = $part->area->name . '_' . $part->part.'_color';
         $setting->value = '#273763';
         $setting->type = 'COLOR';
+        $setting->data = json_encode(['name' => 'three-main-bg-color']);
         $setting->size = 4;
         $setting->title =  $part->area->name . ' ' . $part->part .' main color';
         $setting->save();
@@ -52,6 +53,7 @@ class TreeGridProducts
         $setting->key = $part->area->name . '_' . $part->part.'_gradx1';
         $setting->value = '#FF7D33';
         $setting->type = 'COLOR';
+        $setting->data = json_encode(['name' => 'three-main-bg-gx1']);
         $setting->size = 3;
         $setting->title =  $part->area->name . ' ' . $part->part .' second gradiant color 1';
         $setting->save();
@@ -60,8 +62,10 @@ class TreeGridProducts
         $setting->section = 'theme';
         $setting->key = $part->area->name . '_' . $part->part.'_gradx2';
         $setting->value = '#FF971D';
+        $setting->data = json_encode(['name' => 'three-main-bg-gx2']);
         $setting->type = 'COLOR';
         $setting->size = 3;
+
         $setting->title =  $part->area->name . ' ' . $part->part .' second gradiant color 2';
         $setting->save();
 
@@ -86,8 +90,9 @@ class TreeGridProducts
         $setting = new Setting();
         $setting->section = 'theme';
         $setting->key = $part->area->name . '_' . $part->part.'_grady1';
-        $setting->value = '#FF7D33';
+        $setting->value = '#3368ff';
         $setting->type = 'COLOR';
+        $setting->data = json_encode(['name' => 'three-main-bg-gy1']);
         $setting->size = 3;
         $setting->title =  $part->area->name . ' ' . $part->part .' third gradiant color 1';
         $setting->save();
@@ -97,6 +102,7 @@ class TreeGridProducts
         $setting->key = $part->area->name . '_' . $part->part.'_grady2';
         $setting->value = '#430392';
         $setting->type = 'COLOR';
+        $setting->data = json_encode(['name' => 'three-main-bg-gy2']);
         $setting->size = 3;
         $setting->title =  $part->area->name . ' ' . $part->part .' third gradiant color 2';
         $setting->save();
diff --git a/resources/views/segments/products/TreeGridProducts/TreeGridProducts.scss b/resources/views/segments/products/TreeGridProducts/TreeGridProducts.scss
index 00f926b..978fb13 100644
--- a/resources/views/segments/products/TreeGridProducts/TreeGridProducts.scss
+++ b/resources/views/segments/products/TreeGridProducts/TreeGridProducts.scss
@@ -53,19 +53,18 @@
             &:first-child {
                 grid-column: 1/5 span;
                 grid-row: 1/3;
-                background: var(---main-bg);
+                background: var(--three-main-bg-color);
             }
             &:nth-child(2) {
                 grid-column: 6/3 span;
                 grid-row: 1/2;
-                background: rgb(255,125,51);
-                background: linear-gradient(180deg, var(--gx1) 0%, var(--gx2) 100%);
+                background: linear-gradient(180deg, var(--three-main-bg-gx1) 0%, var(--three-main-bg-gx2) 100%);
                 overflow: hidden;
             }
             &:nth-child(3) {
                 grid-column: 6/3 span;
                 grid-row: 2/2;
-                background: linear-gradient(180deg, var(--gy1) 0%, var(--gy2) 100%);
+                background: linear-gradient(180deg, var(--three-main-bg-gy1) 0%, var(--three-main-bg-gy2) 100%);
                 overflow: hidden;
             }
         }
diff --git a/resources/views/website/inc/website-head.blade.php b/resources/views/website/inc/website-head.blade.php
index 9a90c1f..6f99ed9 100644
--- a/resources/views/website/inc/website-head.blade.php
+++ b/resources/views/website/inc/website-head.blade.php
@@ -12,6 +12,7 @@
 
     <link rel="stylesheet" href="{{asset('assets/vendor/bootstrap/dist/css/bootstrap.min.css')}}">
 
+    <link rel="stylesheet" href="{{ route('theme.variable.css') }}">
     @vite(['resources/sass/client.scss', 'resources/js/client.js'])
 
     @yield('custom-head')
diff --git a/routes/web.php b/routes/web.php
index 72d1170..19d8930 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -354,6 +354,9 @@ Route::prefix(config('app.panel.prefix'))->name('admin.')->group(
 
     });
 
+
+Route::get('theme/variable.css',[\App\Http\Controllers\ThemeController::class,'cssVariables'])->name('theme.variable.css');
+
 Route::get('test',function (){
 //    return \Resources\Views\Segments\PreloaderCircle::onAdd();
    return getCategoryProductBySetting('index_TreeGridProducts_category');