diff --git a/app/Http/Controllers/ClientController.php b/app/Http/Controllers/ClientController.php
index 703d65a..35e42d4 100644
--- a/app/Http/Controllers/ClientController.php
+++ b/app/Http/Controllers/ClientController.php
@@ -86,6 +86,23 @@ class ClientController extends Controller
         return view('client.default-list', compact('area', 'galleries', 'title', 'subtitle'));
     }
 
+    public function attachments()
+    {
+        $area = 'attachments-list';
+        $title = __("Attachments list");
+        $subtitle = '';
+        $attachs = Attachment::where('is_fillable', 1)
+            ->orderByDesc('id')->paginate($this->paginate);
+        return view('client.default-list', compact('area', 'attachs', 'title', 'subtitle'));
+    }
+    public function attachment(Attachment $attachment)
+    {
+        $area = 'attachment';
+        $title = $attachment->title;
+        $subtitle = $attachment->subtitle;
+        return view('client.default-list', compact('area', 'attachment', 'title', 'subtitle'));
+    }
+
     public function tag($slug)
     {
 
diff --git a/app/Models/Attachment.php b/app/Models/Attachment.php
index 9f72df6..f1ffe48 100644
--- a/app/Models/Attachment.php
+++ b/app/Models/Attachment.php
@@ -65,8 +65,7 @@ class Attachment extends Model
 
     public function webUrl()
     {
-        return '#';// WIP
-        return route('');
+        return route('client.attachment',$this->slug);
     }
 
 }
diff --git a/database/seeders/AreaSeeder.php b/database/seeders/AreaSeeder.php
index c87df8d..259aaa0 100644
--- a/database/seeders/AreaSeeder.php
+++ b/database/seeders/AreaSeeder.php
@@ -184,16 +184,16 @@ class AreaSeeder extends Seeder
 //                'preview' => 'client.groups',
 //                'icon' => 'ri-book-shelf-line',
 //            ],
-//            [
-//                'name' => 'card',
-//                'valid_segments' => json_encode(
-//                    ["top", "header", "footer", "menu",
-//                        "parallax", "other", "card", "ads"]
-//                ),
-//                'max' => 6,
-//                'preview' => 'client.card',
-//                'icon' => 'ri-shopping-cart-2-line',
-//            ],
+            [
+                'name' => 'card',
+                'valid_segments' => json_encode(
+                    ["top", "header", "footer", "menu",
+                        "parallax", "other", "card", "ads"]
+                ),
+                'max' => 6,
+                'preview' => 'client.card',
+                'icon' => 'ri-shopping-cart-2-line',
+            ],
             [
                 'name' => 'login',
                 'valid_segments' => json_encode(
diff --git a/resources/views/segments/attachment/AttachmentWithPreview/AttachmentWithPreview.blade.php b/resources/views/segments/attachment/AttachmentWithPreview/AttachmentWithPreview.blade.php
new file mode 100644
index 0000000..11b284a
--- /dev/null
+++ b/resources/views/segments/attachment/AttachmentWithPreview/AttachmentWithPreview.blade.php
@@ -0,0 +1,32 @@
+<section class='AttachmentWithPreview'>
+    <div class="{{gfx()['container']}}">
+        <h1>
+            {{$attachment->title}}
+        </h1>
+        <div class="alert alert-info">
+            {{$attachment->subtitle}}
+        </div>
+        {!! $attachment->body !!}
+
+        @if($attachment->ext == 'mp3')
+            <mp3player
+                asset="{{$attachment->url()}}"></mp3player>
+        @endif
+        @if($attachment->ext == 'mp4')
+            <mp4player
+                asset="{{$attachment->url()}}"></mp4player>
+        @endif
+
+
+        <a href="{{$attachment->tempUrl()}}" class="btn btn-lg btn-outline-primary mt-4 w-100">
+            <i class="ri-download-2-line"></i>
+            &nbsp;
+            {{__("Download")}}
+
+            {{formatFileSize($attachment->size)}}
+
+            &nbsp;
+            [{{$attachment->ext}}]
+        </a>
+    </div>
+</section>
diff --git a/resources/views/segments/attachment/AttachmentWithPreview/AttachmentWithPreview.js b/resources/views/segments/attachment/AttachmentWithPreview/AttachmentWithPreview.js
new file mode 100644
index 0000000..e69de29
diff --git a/resources/views/segments/attachment/AttachmentWithPreview/AttachmentWithPreview.json b/resources/views/segments/attachment/AttachmentWithPreview/AttachmentWithPreview.json
new file mode 100644
index 0000000..1d7fbb7
--- /dev/null
+++ b/resources/views/segments/attachment/AttachmentWithPreview/AttachmentWithPreview.json
@@ -0,0 +1,10 @@
+{
+    "name": "AttachmentWithPreview",
+    "version": "1.0",
+    "author": "xStack",
+    "email": "xshop@xstack.ir",
+    "license": "GPL-3.0-or-later",
+    "url": "https:\/\/xstack.ir",
+    "author_url": "https:\/\/4xmen.ir",
+    "packages": []
+}
\ No newline at end of file
diff --git a/resources/views/segments/attachment/AttachmentWithPreview/AttachmentWithPreview.php b/resources/views/segments/attachment/AttachmentWithPreview/AttachmentWithPreview.php
new file mode 100644
index 0000000..a64aef7
--- /dev/null
+++ b/resources/views/segments/attachment/AttachmentWithPreview/AttachmentWithPreview.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
+
+class AttachmentWithPreview
+{
+    public static function onAdd(Part $part = null)
+    {
+
+    }
+    public static function onRemove(Part $part = null)
+    {
+
+    }
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}
diff --git a/resources/views/segments/attachment/AttachmentWithPreview/AttachmentWithPreview.scss b/resources/views/segments/attachment/AttachmentWithPreview/AttachmentWithPreview.scss
new file mode 100644
index 0000000..23aec7a
--- /dev/null
+++ b/resources/views/segments/attachment/AttachmentWithPreview/AttachmentWithPreview.scss
@@ -0,0 +1,12 @@
+.AttachmentWithPreview {
+    padding: 2rem 0;
+    h1{
+        font-weight: 300;
+        font-size: 30px;
+    }
+
+    p{
+        line-height: 2em;
+        text-align: justify;
+    }
+}
diff --git a/resources/views/segments/attachments_page/DenaAttachList/DenaAttachList.blade.php b/resources/views/segments/attachments_page/DenaAttachList/DenaAttachList.blade.php
new file mode 100644
index 0000000..c8fa916
--- /dev/null
+++ b/resources/views/segments/attachments_page/DenaAttachList/DenaAttachList.blade.php
@@ -0,0 +1,31 @@
+<section class='DenaAttachList content'>
+    <div class="{{gfx()['container']}}">
+        <h1>
+            {{$title}}
+        </h1>
+        <p class="text-muted">
+            {{getSetting($data->area->name.'_'.$data->part.'_title')}}
+        </p>
+
+        <div id="dena-list">
+            @foreach($attachs as $attach)
+                <div class="dena-item">
+                    <span class="dena-tag">
+                        {{$attach->ext}}
+                    </span>
+                    <span class="dena-size">
+                        {{formatFileSize($attach->size)}}
+                    </span>
+                    <h3>
+                        <a href="{{$attach->webUrl()}}">
+                        {{$attach->title}}
+                        </a>
+                    </h3>
+                    <p class="text-muted">
+                        {{$attach->subtitle}}
+                    </p>
+                </div>
+            @endforeach
+        </div>
+    </div>
+</section>
diff --git a/resources/views/segments/attachments_page/DenaAttachList/DenaAttachList.js b/resources/views/segments/attachments_page/DenaAttachList/DenaAttachList.js
new file mode 100644
index 0000000..e69de29
diff --git a/resources/views/segments/attachments_page/DenaAttachList/DenaAttachList.json b/resources/views/segments/attachments_page/DenaAttachList/DenaAttachList.json
new file mode 100644
index 0000000..0441a4d
--- /dev/null
+++ b/resources/views/segments/attachments_page/DenaAttachList/DenaAttachList.json
@@ -0,0 +1,10 @@
+{
+    "name": "DenaAttachList",
+    "version": "1.0",
+    "author": "xStack",
+    "email": "xshop@xstack.ir",
+    "license": "GPL-3.0-or-later",
+    "url": "https:\/\/xstack.ir",
+    "author_url": "https:\/\/4xmen.ir",
+    "packages": []
+}
\ No newline at end of file
diff --git a/resources/views/segments/attachments_page/DenaAttachList/DenaAttachList.php b/resources/views/segments/attachments_page/DenaAttachList/DenaAttachList.php
new file mode 100644
index 0000000..b2bd50d
--- /dev/null
+++ b/resources/views/segments/attachments_page/DenaAttachList/DenaAttachList.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
+use App\Models\Setting;
+
+class DenaAttachList
+{
+    public static function onAdd(Part $part = null)
+    {
+        $setting = new Setting();
+        $setting->section = 'theme';
+        $setting->key = $part->area->name . '_' . $part->part.'_title';
+        $setting->value = __("Website attachments list").' [ pdf, docx, zip, png, jpg, svg, mp4, rar, mp3 ]';
+        $setting->type = 'text';
+        $setting->size = 6;
+        $setting->title =  $part->area->name . ' ' . $part->part;
+        $setting->save();
+    }
+    public static function onRemove(Part $part = null)
+    {
+        Setting::where('key',$part->area->name . '_' . $part->part.'_title')->first()?->delete();
+    }
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}
diff --git a/resources/views/segments/attachments_page/DenaAttachList/DenaAttachList.scss b/resources/views/segments/attachments_page/DenaAttachList/DenaAttachList.scss
new file mode 100644
index 0000000..249514b
--- /dev/null
+++ b/resources/views/segments/attachments_page/DenaAttachList/DenaAttachList.scss
@@ -0,0 +1,51 @@
+.DenaAttachList {
+    padding: 2rem 0;
+
+    h1 {
+        font-weight: 400;
+        font-size: 27px;
+        padding: .5rem 0;
+    }
+
+    .dena-item {
+        position: relative;
+        border: 1px solid var(--xshop-primary);
+        box-shadow: var(--xshop-shadow);
+        border-radius: var(--xshop-border-radius);
+        padding: 1rem;
+        margin-bottom: .5rem;
+
+        h3{
+            font-size: 23px;
+            font-weight: 400;
+        }
+
+        p{
+            margin-bottom: 0;
+        }
+
+
+        .dena-tag {
+            position: absolute;
+            inset-inline-end: 10px;
+            top: 10px;
+            background: var(--xshop-primary);
+            color: var(--xshop-diff);
+            padding: .3rem;
+            width: 65px;
+            text-align: center;
+            border-radius: var(--xshop-border-radius);
+        }
+        .dena-size {
+            position: absolute;
+            inset-inline-end: 10px;
+            bottom: 10px;
+            background: var(--xshop-secondary);
+            color: var(--xshop-diff2);
+            padding: .3rem;
+            width: 120px;
+            text-align: center;
+            border-radius: var(--xshop-border-radius);
+        }
+    }
+}
diff --git a/resources/views/segments/product/ProductKaren/ProductKaren.js b/resources/views/segments/product/ProductKaren/ProductKaren.js
index b99def1..5fc0f59 100644
--- a/resources/views/segments/product/ProductKaren/ProductKaren.js
+++ b/resources/views/segments/product/ProductKaren/ProductKaren.js
@@ -7,49 +7,53 @@ document.addEventListener('DOMContentLoaded',function () {
     for (const el of document.querySelectorAll('.light-box')) {
         el.addEventListener('click', Lightbox.initialize);
     }
-    karenImgSlider = tns({
-        container: '#karen-img-slider',
-        items: 3,
-        autoplay: true,
-        autoplayButton: false,
-        // nextButton: false,
-        controls: false,
-        autoplayHoverPause: true,
-        mouseDrag: true,
-        gutter: 5,
-        slideBy: 1,
-        autoplayTimeout: 5000,
-        // speed:10000,
-    });
-    karenRelativeSlider = tns({
-        container: '#rel-products',
-        items: 3,
-        autoplay: true,
-        autoplayButton: false,
-        // nextButton: false,
-        controls: false,
-        autoplayHoverPause: true,
-        mouseDrag: true,
-        gutter: 5,
-        slideBy: 1,
-        autoplayTimeout: 5000,
-        responsive:{
-            560:{
-                items: 1,
-            },
-            768:{
-                items: 2,
-            },
-            1000:{
-                items: 4,
-            },
-            1400:{
-                items: 5,
-            },
+    try {
+        karenImgSlider = tns({
+            container: '#karen-img-slider',
+            items: 3,
+            autoplay: true,
+            autoplayButton: false,
+            // nextButton: false,
+            controls: false,
+            autoplayHoverPause: true,
+            mouseDrag: true,
+            gutter: 5,
+            slideBy: 1,
+            autoplayTimeout: 5000,
+            // speed:10000,
+        });
+        karenRelativeSlider = tns({
+            container: '#rel-products',
+            items: 3,
+            autoplay: true,
+            autoplayButton: false,
+            // nextButton: false,
+            controls: false,
+            autoplayHoverPause: true,
+            mouseDrag: true,
+            gutter: 5,
+            slideBy: 1,
+            autoplayTimeout: 5000,
+            responsive:{
+                560:{
+                    items: 1,
+                },
+                768:{
+                    items: 2,
+                },
+                1000:{
+                    items: 4,
+                },
+                1400:{
+                    items: 5,
+                },
+
+            }
+            // speed:10000,
+        });
+    } catch {
+    }
 
-        }
-        // speed:10000,
-    });
 
     document.querySelectorAll('#karen-img-slider a')?.forEach(function (el) {
         el.addEventListener('click',function (e) {
@@ -66,9 +70,13 @@ document.addEventListener('DOMContentLoaded',function () {
     const underline = document.querySelector('.underline');
 
     function updateUnderline() {
-        const activeTab = document.querySelector('.navtab.active');
-        underline.style.width = `${activeTab.offsetWidth}px`;
-        underline.style.left = `${activeTab.offsetLeft}px`;
+        try {
+            const activeTab = document.querySelector('.navtab.active');
+            underline.style.width = `${activeTab.offsetWidth}px`;
+            underline.style.left = `${activeTab.offsetLeft}px`;
+        } catch {
+        }
+
     }
 
     tabs.forEach(tab => {
diff --git a/resources/views/segments/products_page/ProductGridSidebar/ProductGridSidebar.blade.php b/resources/views/segments/products_page/ProductGridSidebar/ProductGridSidebar.blade.php
index 9fc4372..231699f 100644
--- a/resources/views/segments/products_page/ProductGridSidebar/ProductGridSidebar.blade.php
+++ b/resources/views/segments/products_page/ProductGridSidebar/ProductGridSidebar.blade.php
@@ -22,7 +22,8 @@
                                 </a>
                                 <a class="compare-btn" data-slug="{{$product->slug}}"
                                    data-bs-custom-class="custom-tooltip"
-                                   data-bs-toggle="tooltip" data-bs-placement="auto" title="{{__("Add to/ Remove from compare list")}}">
+                                   data-bs-toggle="tooltip" data-bs-placement="auto"
+                                   title="{{__("Add to/ Remove from compare list")}}">
                                     <i class="ri-scales-3-line"></i>
                                 </a>
                                 <a href="{{$product->webUrl()}}">
diff --git a/routes/web.php b/routes/web.php
index 5330075..4d86e6e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -371,8 +371,9 @@ Route::middleware([\App\Http\Middleware\VisitorCounter::class])
     Route::get('/compare', [\App\Http\Controllers\ClientController::class,'compare'])->name('compare');
     Route::get('/galleries', [\App\Http\Controllers\ClientController::class,'galleries'])->name('galleries');
     Route::get('/products', [\App\Http\Controllers\ClientController::class,'products'])->name('products');
+    Route::get('/attachments', [\App\Http\Controllers\ClientController::class,'attachments'])->name('attachments');
+    Route::get('/attachment/{attachment}', [\App\Http\Controllers\ClientController::class,'attachment'])->name('attachment');
     Route::get('/tag/{post}', [\App\Http\Controllers\ClientController::class,'tag'])->name('tag'); // wip
-    Route::get('/group/{group}', [\App\Http\Controllers\ClientController::class,'group'])->name('group');
     Route::get('/product/{product}', [\App\Http\Controllers\ClientController::class,'product'])->name('product');
     Route::get('/category/{category}', [\App\Http\Controllers\ClientController::class,'category'])->name('category');
     Route::get('/gallery/{gallery}', [\App\Http\Controllers\ClientController::class,'gallery'])->name('gallery');