diff --git a/app/Helpers/Helper.php b/app/Helpers/Helper.php
index 9536f35..70ecfef 100644
--- a/app/Helpers/Helper.php
+++ b/app/Helpers/Helper.php
@@ -454,7 +454,7 @@ function getAction($act)
 }
 
 /**
- * ge all admin routes array
+ * get all admin routes array
  * @return array
  */
 function getAdminRoutes()
@@ -471,6 +471,24 @@ function getAdminRoutes()
 
     return $routes;
 }
+/**
+ * get all client routes array
+ * @return array
+ */
+function getClientRoutes()
+{
+    $routes = [];
+    foreach (Illuminate\Support\Facades\Route::getRoutes() as $r) {
+        if (strpos($r->getName(), 'admin') === false) {
+            $routes[] = [
+                'name' => $r->getName(),
+                'url' => $r->uri(),
+            ];
+        }
+    }
+
+    return $routes;
+}
 
 
 /**
diff --git a/app/Http/Controllers/Admin/GfxController.php b/app/Http/Controllers/Admin/GfxController.php
index 57564e1..4460d8c 100644
--- a/app/Http/Controllers/Admin/GfxController.php
+++ b/app/Http/Controllers/Admin/GfxController.php
@@ -3,27 +3,36 @@
 namespace App\Http\Controllers\Admin;
 
 use App\Http\Controllers\Controller;
+use App\Models\Area;
 use App\Models\Gfx;
 use Illuminate\Http\Request;
 
 class GfxController extends Controller
 {
     //
-    public function index(){
-        return view('admin.commons.gfx');
+    public function index()
+    {
+        $prviews = Area::whereNotNull('preview')
+            ->pluck('preview', 'name')->toArray();
+
+        array_walk($prviews, function ($value, $key) use (&$prviews) {
+            $prviews[$key] = route($value);
+        });
+        return view('admin.commons.gfx',compact('prviews'));
     }
 
-    public function update( Request $request){
+    public function update(Request $request)
+    {
 
-        foreach ($request->input('gfx',[]) as $key => $gfx){
-            $g = Gfx::where('key',$key)->first();
-            if ($g != null){
+        foreach ($request->input('gfx', []) as $key => $gfx) {
+            $g = Gfx::where('key', $key)->first();
+            if ($g != null) {
                 $g->value = $gfx;
                 $g->save();
             }
         }
 
-        logAdmin(__METHOD__,__CLASS__,null);
+        logAdmin(__METHOD__, __CLASS__, null);
         \Artisan::call('client');
         return redirect()->back()->with(['message' => __('GFX of website updated')]);
     }
diff --git a/database/seeders/AreaSeeder.php b/database/seeders/AreaSeeder.php
index 818e259..77a5d27 100644
--- a/database/seeders/AreaSeeder.php
+++ b/database/seeders/AreaSeeder.php
@@ -35,6 +35,16 @@ class AreaSeeder extends Seeder
                 'preview' => 'welcome',
                 'icon' => 'ri-layout-top-2-line',
             ],
+            [
+                'name' => 'post',
+                'valid_segments' => json_encode(
+                    ["top","header","footer","menu",
+                        "parallax","other","post"]
+                ),
+                'max' => 6,
+                'preview' => 'test',
+                'icon' => 'ri-layout-top-2-line',
+            ],
         ];
         foreach ($areas as $area){
             $a = new Area();
diff --git a/resources/js/components/Gfxer.vue b/resources/js/components/Gfxer.vue
index b6e23d6..61a74bd 100644
--- a/resources/js/components/Gfxer.vue
+++ b/resources/js/components/Gfxer.vue
@@ -7,7 +7,7 @@
                         <i class="ri-brush-2-line"></i>
                         GFX
                     </h3>
-                    <template v-for="(v,i) in values" >
+                    <template v-for="(v,i) in values">
                         <div v-if="v != undefined" class="p-2 item-gfx">
                             <div class="float-end"
                                  v-if="i == 'background' || i == 'primary' || i == 'secondary' || i == 'text'">
@@ -38,90 +38,104 @@
                             <input :name="'gfx['+i+']'" :type="_dbg_" :value="v">
                         </div>
                     </template>
-                    <div class="p-2">
-                        <select v-model="device" class="form-control">
-                            <option value="desktop"> Desktop</option>
-                            <option value="mobile"> Mobile</option>
-                        </select>
-                    </div>
                 </div>
             </div>
             <div class="col-xl-9">
+                <div class="item-gfx p-2 mb-2">
+                    <div class="row">
+                        <div class="col-md">
+                            Device
+                            <select v-model="device" class="form-control">
+                                <option value="desktop"> Desktop</option>
+                                <option value="mobile"> Mobile</option>
+                            </select>
+                        </div>
+                        <div class="col-md">
+                            Preview
+                            <select v-model="preview" class="form-control">
+                                <option :value="k" v-for="(k,p) in previews"> {{ p }}</option>
+                            </select>
+                        </div>
+
+                    </div>
+                </div>
                 <div id="browser" :style="generalStyle" v-if="device != 'mobile'">
                     <div id="bar">
                         Browser
                     </div>
                     <div id="b-content">
-                        <div :class="values.container">
-                            <div class="row" id="items-icon">
-                                <div class="col-md-4">
-                                    <i class="ri-twitter-line"
-                                       :style="`color: ${values.primary};`"></i>
-                                    <h3 :style="`color: ${values.secondary};`">
-                                        Social media
-                                    </h3>
-                                    <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
-                                        eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
-                                        maxime minima odio pariatur quaerat soluta temporibus velit.
-                                    </p>
-                                    <a class="btn-read-more"
-                                       :style="`box-shadow: ${values.shadow} ;
-                                       border-radius: ${values['border-radius']} ;
-                                       border-color: ${values.primary};
-                                       color: ${values.primary};`">
-                                        Read more
-                                    </a>
-                                </div>
-                                <div class="col-md-4">
-                                    <i class="ri-mail-line"
-                                       :style="`color: ${values.primary};`"></i>
-                                    <h3 :style="`color: ${values.secondary};`">
-                                        Contact
-                                    </h3>
-                                    <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
-                                        eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
-                                        maxime minima odio pariatur quaerat soluta temporibus velit.
-                                    </p>
-                                    <a class="btn-read-more"
-                                       :style="`box-shadow: ${values.shadow} ;
-                                       border-radius: ${values['border-radius']} ;
-                                       border-color: ${values.primary};
-                                       color: ${values.primary};`">
-                                        Read more
-                                    </a>
-                                </div>
-                                <div class="col-md-4">
-                                    <i class="ri-brush-4-line"
-                                       :style="`color: ${values.primary};`"></i>
-                                    <h3 :style="`color: ${values.secondary};`">
-                                        Design
-                                    </h3>
-                                    <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
-                                        eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
-                                        maxime minima odio pariatur quaerat soluta temporibus velit.
-                                    </p>
-                                    <a class="btn-read-more"
-                                       :style="`box-shadow: ${values.shadow} ;
-                                       border-radius: ${values['border-radius']} ;
-                                       border-color: ${values.primary};
-                                       color: ${values.primary};`">
-                                        Read more
-                                    </a>
-                                </div>
-                            </div>
 
-                            <div id="big-box" :style="`box-shadow: ${values.shadow} ;
-                                       border-radius: ${values['border-radius']} ;
-                                        background: linear-gradient(49deg, ${values.primary} 42%, ${values.secondary} 100%);`">
-                                <h3 class="diff">
-                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate iste ut
-                                    veritatis?
-                                </h3>
-                            </div>
-                        </div>
+                        <iframe :src="preview" class="preview-frame"></iframe>
+                        <!--                        <div :class="values.container">-->
+                        <!--                            <div class="row" id="items-icon">-->
+                        <!--                                <div class="col-md-4">-->
+                        <!--                                    <i class="ri-twitter-line"-->
+                        <!--                                       :style="`color: ${values.primary};`"></i>-->
+                        <!--                                    <h3 :style="`color: ${values.secondary};`">-->
+                        <!--                                        Social media-->
+                        <!--                                    </h3>-->
+                        <!--                                    <p>-->
+                        <!--                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque-->
+                        <!--                                        eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam-->
+                        <!--                                        maxime minima odio pariatur quaerat soluta temporibus velit.-->
+                        <!--                                    </p>-->
+                        <!--                                    <a class="btn-read-more"-->
+                        <!--                                       :style="`box-shadow: ${values.shadow} ;-->
+                        <!--                                       border-radius: ${values['border-radius']} ;-->
+                        <!--                                       border-color: ${values.primary};-->
+                        <!--                                       color: ${values.primary};`">-->
+                        <!--                                        Read more-->
+                        <!--                                    </a>-->
+                        <!--                                </div>-->
+                        <!--                                <div class="col-md-4">-->
+                        <!--                                    <i class="ri-mail-line"-->
+                        <!--                                       :style="`color: ${values.primary};`"></i>-->
+                        <!--                                    <h3 :style="`color: ${values.secondary};`">-->
+                        <!--                                        Contact-->
+                        <!--                                    </h3>-->
+                        <!--                                    <p>-->
+                        <!--                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque-->
+                        <!--                                        eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam-->
+                        <!--                                        maxime minima odio pariatur quaerat soluta temporibus velit.-->
+                        <!--                                    </p>-->
+                        <!--                                    <a class="btn-read-more"-->
+                        <!--                                       :style="`box-shadow: ${values.shadow} ;-->
+                        <!--                                       border-radius: ${values['border-radius']} ;-->
+                        <!--                                       border-color: ${values.primary};-->
+                        <!--                                       color: ${values.primary};`">-->
+                        <!--                                        Read more-->
+                        <!--                                    </a>-->
+                        <!--                                </div>-->
+                        <!--                                <div class="col-md-4">-->
+                        <!--                                    <i class="ri-brush-4-line"-->
+                        <!--                                       :style="`color: ${values.primary};`"></i>-->
+                        <!--                                    <h3 :style="`color: ${values.secondary};`">-->
+                        <!--                                        Design-->
+                        <!--                                    </h3>-->
+                        <!--                                    <p>-->
+                        <!--                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque-->
+                        <!--                                        eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam-->
+                        <!--                                        maxime minima odio pariatur quaerat soluta temporibus velit.-->
+                        <!--                                    </p>-->
+                        <!--                                    <a class="btn-read-more"-->
+                        <!--                                       :style="`box-shadow: ${values.shadow} ;-->
+                        <!--                                       border-radius: ${values['border-radius']} ;-->
+                        <!--                                       border-color: ${values.primary};-->
+                        <!--                                       color: ${values.primary};`">-->
+                        <!--                                        Read more-->
+                        <!--                                    </a>-->
+                        <!--                                </div>-->
+                        <!--                            </div>-->
+
+                        <!--                            <div id="big-box" :style="`box-shadow: ${values.shadow} ;-->
+                        <!--                                       border-radius: ${values['border-radius']} ;-->
+                        <!--                                        background: linear-gradient(49deg, ${values.primary} 42%, ${values.secondary} 100%);`">-->
+                        <!--                                <h3 class="diff">-->
+                        <!--                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate iste ut-->
+                        <!--                                    veritatis?-->
+                        <!--                                </h3>-->
+                        <!--                            </div>-->
+                        <!--                        </div>-->
                     </div>
                 </div>
                 <div id="mobile" :style="generalStyle" v-if="device == 'mobile'">
@@ -141,76 +155,77 @@
                             </div>
                         </div>
                     </div>
-                    <div id="m-content" :class="values.container">
-                        <div class="row" id="items-icon">
-                            <div class="col-md-12">
-                                <i class="ri-twitter-line"
-                                   :style="`color: ${values.primary};`"></i>
-                                <h3 :style="`color: ${values.secondary};`">
-                                    Social media
-                                </h3>
-                                <p>
-                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
-                                    eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
-                                    maxime minima odio pariatur quaerat soluta temporibus velit.
-                                </p>
-                                <a class="btn-read-more"
-                                   :style="`box-shadow: ${values.shadow} ;
-                                       border-radius: ${values['border-radius']} ;
-                                       border-color: ${values.primary};
-                                       color: ${values.primary};`">
-                                    Read more
-                                </a>
-                            </div>
-                            <div class="col-12">
-                                <i class="ri-mail-line"
-                                   :style="`color: ${values.primary};`"></i>
-                                <h3 :style="`color: ${values.secondary};`">
-                                    Contact
-                                </h3>
-                                <p>
-                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
-                                    eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
-                                    maxime minima odio pariatur quaerat soluta temporibus velit.
-                                </p>
-                                <a class="btn-read-more"
-                                   :style="`box-shadow: ${values.shadow} ;
-                                       border-radius: ${values['border-radius']} ;
-                                       border-color: ${values.primary};
-                                       color: ${values.primary};`">
-                                    Read more
-                                </a>
-                            </div>
-                            <div class="col-12">
-                                <i class="ri-brush-4-line"
-                                   :style="`color: ${values.primary};`"></i>
-                                <h3 :style="`color: ${values.secondary};`">
-                                    Design
-                                </h3>
-                                <p>
-                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
-                                    eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
-                                    maxime minima odio pariatur quaerat soluta temporibus velit.
-                                </p>
-                                <a class="btn-read-more"
-                                   :style="`box-shadow: ${values.shadow} ;
-                                       border-radius: ${values['border-radius']} ;
-                                       border-color: ${values.primary};
-                                       color: ${values.primary};`">
-                                    Read more
-                                </a>
-                            </div>
-                        </div>
-
-                        <div id="big-box" :style="`box-shadow: ${values.shadow} ;
-                                       border-radius: ${values['border-radius']} ;
-                                        background: linear-gradient(49deg, ${values.primary} 42%, ${values.secondary} 100%);`">
-                            <h3 style="filter: invert(1);mix-blend-mode: difference;">
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate iste ut
-                                veritatis?
-                            </h3>
-                        </div>
-                    </div>
+                    <iframe :src="preview" class="preview-frame"></iframe>
+                    <!--                    <div id="m-content" :class="values.container">-->
+                    <!--                        <div class="row" id="items-icon">-->
+                    <!--                            <div class="col-md-12">-->
+                    <!--                                <i class="ri-twitter-line"-->
+                    <!--                                   :style="`color: ${values.primary};`"></i>-->
+                    <!--                                <h3 :style="`color: ${values.secondary};`">-->
+                    <!--                                    Social media-->
+                    <!--                                </h3>-->
+                    <!--                                <p>-->
+                    <!--                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque-->
+                    <!--                                    eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam-->
+                    <!--                                    maxime minima odio pariatur quaerat soluta temporibus velit.-->
+                    <!--                                </p>-->
+                    <!--                                <a class="btn-read-more"-->
+                    <!--                                   :style="`box-shadow: ${values.shadow} ;-->
+                    <!--                                       border-radius: ${values['border-radius']} ;-->
+                    <!--                                       border-color: ${values.primary};-->
+                    <!--                                       color: ${values.primary};`">-->
+                    <!--                                    Read more-->
+                    <!--                                </a>-->
+                    <!--                            </div>-->
+                    <!--                            <div class="col-12">-->
+                    <!--                                <i class="ri-mail-line"-->
+                    <!--                                   :style="`color: ${values.primary};`"></i>-->
+                    <!--                                <h3 :style="`color: ${values.secondary};`">-->
+                    <!--                                    Contact-->
+                    <!--                                </h3>-->
+                    <!--                                <p>-->
+                    <!--                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque-->
+                    <!--                                    eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam-->
+                    <!--                                    maxime minima odio pariatur quaerat soluta temporibus velit.-->
+                    <!--                                </p>-->
+                    <!--                                <a class="btn-read-more"-->
+                    <!--                                   :style="`box-shadow: ${values.shadow} ;-->
+                    <!--                                       border-radius: ${values['border-radius']} ;-->
+                    <!--                                       border-color: ${values.primary};-->
+                    <!--                                       color: ${values.primary};`">-->
+                    <!--                                    Read more-->
+                    <!--                                </a>-->
+                    <!--                            </div>-->
+                    <!--                            <div class="col-12">-->
+                    <!--                                <i class="ri-brush-4-line"-->
+                    <!--                                   :style="`color: ${values.primary};`"></i>-->
+                    <!--                                <h3 :style="`color: ${values.secondary};`">-->
+                    <!--                                    Design-->
+                    <!--                                </h3>-->
+                    <!--                                <p>-->
+                    <!--                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque-->
+                    <!--                                    eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam-->
+                    <!--                                    maxime minima odio pariatur quaerat soluta temporibus velit.-->
+                    <!--                                </p>-->
+                    <!--                                <a class="btn-read-more"-->
+                    <!--                                   :style="`box-shadow: ${values.shadow} ;-->
+                    <!--                                       border-radius: ${values['border-radius']} ;-->
+                    <!--                                       border-color: ${values.primary};-->
+                    <!--                                       color: ${values.primary};`">-->
+                    <!--                                    Read more-->
+                    <!--                                </a>-->
+                    <!--                            </div>-->
+                    <!--                        </div>-->
+
+                    <!--                        <div id="big-box" :style="`box-shadow: ${values.shadow} ;-->
+                    <!--                                       border-radius: ${values['border-radius']} ;-->
+                    <!--                                        background: linear-gradient(49deg, ${values.primary} 42%, ${values.secondary} 100%);`">-->
+                    <!--                            <h3 style="filter: invert(1);mix-blend-mode: difference;">-->
+                    <!--                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate iste ut-->
+                    <!--                                veritatis?-->
+                    <!--                            </h3>-->
+                    <!--                        </div>-->
+                    <!--                    </div>-->
                 </div>
             </div>
         </div>
@@ -221,6 +236,11 @@
 
 import BorderRadiosInput from "./BorderRadiosInput.vue";
 import ShadowInput from "./ShadowInput.vue";
+function iframeRef( frameRef ) {
+    return frameRef.contentWindow
+        ? frameRef.contentWindow.document
+        : frameRef.contentDocument
+}
 
 export default {
     name: "gfxer",
@@ -233,11 +253,18 @@ export default {
             _dbg_: 'hidden',
             values: {},
             titles: {},
+            preview: null,
             device: 'desktop', // desktop
         }
     },
     props: {
-        items: {},
+        items: {
+            required: true,
+        },
+        previews: {
+            default: [],
+            type: Array,
+        },
     },
     mounted() {
         for (const i in this.items) {
@@ -245,8 +272,10 @@ export default {
             this.titles[item.key] = item.label;
             this.values[item.key] = item.value;
         }
-
-        console.log(this.items);
+        if (Object.keys(this.previews).length > 0) {
+            this.preview = Object.values(this.previews)[0];
+            console.log(this.preview, 'x');
+        }
     },
     computed: {
         generalStyle() { //
@@ -301,8 +330,48 @@ export default {
             else if (g < 0) g = 0;
 
             return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
+        },
+        updateIframes(newVal){
+            document.querySelectorAll('.preview-frame').forEach( (preview) =>  {
+                let doc = iframeRef(preview);
+                let sty =  doc.documentElement.style ;
+                sty.setProperty('--xshop-primary',newVal.primary);
+                sty.setProperty('--xshop-background',newVal.background);
+                sty.setProperty('--xshop-secondary',newVal.secondary);
+                sty.setProperty('--xshop-text',newVal.text);
+                sty.setProperty('--xshop-border-radius',newVal['border-radius']);
+                sty.setProperty('--xshop-shadow',newVal.shadow);
+                let newContainer = 'container';
+                let oldContainer = 'container-fluid';
+                if (newVal.container == 'container-fluid'){
+                    newContainer = 'container-fluid';
+                    oldContainer = 'container';
+                }
+                doc.querySelectorAll('.'+oldContainer).forEach(function (el) {
+                  el.classList.remove(oldContainer);
+                  el.classList.add(newContainer);
+                });
+            });
         }
-    }
+    },
+    watch: {
+        values:{
+            handler (val) {
+                this.updateIframes(val);
+            },
+            deep: true
+        },
+        device(){
+            setTimeout( () => {
+                this.updateIframes(this.values);
+            },750);
+        },
+        preview(){
+            setTimeout( () => {
+                this.updateIframes(this.values);
+            },750);
+        }
+    },
 }
 </script>
 
@@ -400,4 +469,9 @@ export default {
     filter: invert(1);
     mix-blend-mode: difference;
 }
+
+.preview-frame {
+    height: 80vh;
+    width: 100%;
+}
 </style>
diff --git a/resources/sass/client-custom/_general.scss b/resources/sass/client-custom/_general.scss
index 26f4485..f219127 100644
--- a/resources/sass/client-custom/_general.scss
+++ b/resources/sass/client-custom/_general.scss
@@ -35,3 +35,23 @@ body{
     margin: auto;
     border-radius: 50%;
 }
+
+
+#do-edit{
+    position: fixed;
+    inset-inline-start: 0;
+    top: 5%;
+    background: #21252BFF;
+    color: white;
+    z-index: 999;
+    padding: 10px;
+    width: 50px;
+    opacity: .4;
+    transition: 1s;
+    &:hover{
+        opacity: 1;
+    }
+    i{
+        font-size: 25px;
+    }
+}
diff --git a/resources/sass/client-custom/_zfix.scss b/resources/sass/client-custom/_zfix.scss
index db08ebe..2cb4b74 100644
--- a/resources/sass/client-custom/_zfix.scss
+++ b/resources/sass/client-custom/_zfix.scss
@@ -24,55 +24,55 @@ a,a:visited{
 
 
 .btn{
-    border-radius: $xshop-border-radius;
+    border-radius: var(--xshop-border-radius);
 }
 .btn-primary{
-    background: $xshop-primary;
-    border-color: lighten($xshop-primary,5);
-    color: $xshop-diff !important;
+    background: var(--xshop-primary);
+    border-color: var(--xshop-secondary);
+    color: var(--xshop-diff) !important;
 
     &:hover{
-        border-color: lighten($xshop-primary,10);
-        background: darken($xshop-primary,10); ;
+        border-color:  var(--xshop-primary);
+        background:  var(--xshop-secondary); ;
     }
 }
 
 .btn-outline-primary{
-    border-color: $xshop-primary;
-    color: $xshop-primary;
+    border-color: var(--xshop-primary);
+    color:var(--xshop-primary);
     &:hover{
-        border-color: lighten($xshop-primary,10);
-        color: $xshop-diff !important;
-        background: darken($xshop-primary,10); ;
+        border-color: var(--xshop-secondary);
+        color:  var(--xshop-diff) !important;
+        background: var(--xshop-secondary); ;
     }
 }
 .btn-secondary{
-    background: $xshop-secondary;
-    border-color: lighten($xshop-secondary,5);
-    color: $xshop-diff !important;
+    background: var(--xshop-secondary);
+    border-color: var(--xshop-secondary);
+    color:  var(--xshop-diff) !important;
 
     &:hover{
-        border-color: lighten($xshop-secondary,10);
-        background: darken($xshop-secondary,10); ;
+        border-color: var(--xshop-primary);
+        background: var(--xshop-secondary); ;
     }
 }
 
 .btn-outline-secondary{
-    border-color: $xshop-secondary;
-    color: $xshop-secondary;
+    border-color: var(--xshop-secondary);
+    color: var(--xshop-secondary);
     &:hover{
-        border-color: lighten($xshop-secondary,10);
-        color: $xshop-diff !important;
-        background: darken($xshop-secondary,10); ;
+        border-color: var(--xshop-primary);
+        color:  var(--xshop-diff) !important;
+        background: var(--xshop-primary); ;
     }
 }
 
 .btn-outline-invert{
-    border-color: $xshop-diff;
-    color: $xshop-diff;
+    border-color:  var(--xshop-diff);
+    color:  var(--xshop-diff);
 
     &:hover{
-        background: $xshop-diff;
-        color: $xshop-primary;
+        background:  var(--xshop-diff);
+        color: var(--xshop-primary);
     }
 }
diff --git a/resources/views/admin/commons/gfx.blade.php b/resources/views/admin/commons/gfx.blade.php
index 277a220..5f642f1 100644
--- a/resources/views/admin/commons/gfx.blade.php
+++ b/resources/views/admin/commons/gfx.blade.php
@@ -6,7 +6,10 @@
     <form action="{{route('admin.gfx.update')}}" method="post" class="mb-5 pb-5">
         @csrf
         @include('components.err')
-        <gfxer :items='@json(\App\Models\Gfx::all('key','label','value'))'></gfxer>
+        <gfxer
+            :items='@json(\App\Models\Gfx::all('key','label','value'))'
+            :previews='@json($prviews)'
+        ></gfxer>
         <button
             data-link="{{getRoute('update')}}"
             id="save-sort"
diff --git a/resources/views/segments/category/FavProductWithMeta/FavProductWithMeta.scss b/resources/views/segments/category/FavProductWithMeta/FavProductWithMeta.scss
index 31b2a0d..001a872 100644
--- a/resources/views/segments/category/FavProductWithMeta/FavProductWithMeta.scss
+++ b/resources/views/segments/category/FavProductWithMeta/FavProductWithMeta.scss
@@ -2,7 +2,7 @@
     // scss
     i{
         font-size: 128px;
-        -webkit-text-stroke: 6px $xshop-background;
+        -webkit-text-stroke: 6px var(--xshop-background);
     }
 
     [class^="col-md"]{
diff --git a/resources/views/segments/index/GradientTextLink/GradientTextLink.scss b/resources/views/segments/index/GradientTextLink/GradientTextLink.scss
index 22f2300..394e933 100644
--- a/resources/views/segments/index/GradientTextLink/GradientTextLink.scss
+++ b/resources/views/segments/index/GradientTextLink/GradientTextLink.scss
@@ -1,7 +1,7 @@
 .GradientTextLink {
     // scss
-    background: linear-gradient( var(--deg), $xshop-primary, $xshop-secondary 100%);
-    color: $xshop-diff;
+    background: linear-gradient( var(--deg), var(--xshop-primary), var(--xshop-secondary) 100%);
+    color: var(--xshop-diff);
 
     h1{
         font-size: 24px;
diff --git a/resources/views/segments/index/SimpleTextLink/SimpleTextLink.scss b/resources/views/segments/index/SimpleTextLink/SimpleTextLink.scss
index 8021fd0..fa216a1 100644
--- a/resources/views/segments/index/SimpleTextLink/SimpleTextLink.scss
+++ b/resources/views/segments/index/SimpleTextLink/SimpleTextLink.scss
@@ -1,8 +1,8 @@
 .SimpleTextLink {
     // scss
 
-    background: $xshop-primary;
-    color: $xshop-diff;
+    background: var(--xshop-primary);
+    color:var(--xshop-diff);
 
     h1{
         font-size: 24px;
diff --git a/resources/views/segments/posts/PostsIconSimple/PostsIconSimple.scss b/resources/views/segments/posts/PostsIconSimple/PostsIconSimple.scss
index 0ca97f8..da6f0e9 100755
--- a/resources/views/segments/posts/PostsIconSimple/PostsIconSimple.scss
+++ b/resources/views/segments/posts/PostsIconSimple/PostsIconSimple.scss
@@ -3,7 +3,7 @@
 
     h1{
         a{
-            color: $xshop-text ;
+            color: var(--xshop-text) ;
         }
     }
     .row{
diff --git a/resources/views/website/inc/website-foot.blade.php b/resources/views/website/inc/website-foot.blade.php
index bd4a77d..1945681 100644
--- a/resources/views/website/inc/website-foot.blade.php
+++ b/resources/views/website/inc/website-foot.blade.php
@@ -1,4 +1,10 @@
 @yield('custom-foot')
 <input type="hidden" id="api-display-url" value="{{route('v1.visitor.display')}}">
+@if(auth()->check() && auth()->user()->hasRole('developer') && !request()->has('ediable'))
+<a id="do-edit" href="?ediable">
+    <i class="ri-settings-2-line"></i>
+</a>
+@endif
+
 </body>
 </html>
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index 3e1596a..ca7b303 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -4,7 +4,7 @@
     welcome
 @endsection
 @section('content')
-    @foreach(getParts('index') as $part)
+    @foreach(getParts($area) as $part)
         @php($p = $part->getBladeWithData())
         @include($p['blade'],['data' => $p['data']])
     @endforeach
diff --git a/routes/web.php b/routes/web.php
index 479193a..a31f3e3 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -4,7 +4,8 @@ use Illuminate\Support\Facades\Artisan;
 use Illuminate\Support\Facades\Route;
 
 Route::get('/', function () {
-    return view('welcome');
+    $area = 'index';
+    return view('welcome',compact('area'));
 })->name('welcome')->middleware(\App\Http\Middleware\VisitorCounter::class);
 
 Auth::routes(['register' => false]);
@@ -342,7 +343,7 @@ Route::get('test',function (){
 //    return \Resources\Views\Segments\PreloaderCircle::onAdd();
    return \App\Helpers\TVisitor::GetKeyword();
 
-});
+})->name('test');