diff --git a/Theme/Argon/ArgonSettings.php b/Theme/Argon/ArgonSettings.php
new file mode 100644
index 0000000..6dc5adb
--- /dev/null
+++ b/Theme/Argon/ArgonSettings.php
@@ -0,0 +1,45 @@
+<?php
+namespace Themes\Argon;
+
+use App\Admin\Settings\SettingsInterface;
+use ClientX\Renderer\RendererInterface;
+use ClientX\Renderer\TwigRenderer;
+use ClientX\Validator;
+
+class ArgonSettings implements SettingsInterface {
+
+    public function name(): string
+    {
+        return "argon";
+    }
+
+    public function title(): string
+    {
+        return "Argon Theme";
+    }
+
+    public function icon(): string
+    {
+        return "fas fa-fill";
+    }
+
+    public function render(RendererInterface $renderer)
+    {
+
+            return $renderer->render("setting/argon", ['themes' => [
+                'none' => 'User choose between Dark and light',
+                'dark' => "Dark only",
+                'light' => "Light only"
+            ], 'default' => [
+                'dark' => "Dark",
+                'light' => "Light"
+            ]]);
+
+        return '';
+    }
+
+    public function validate(array $params): Validator
+    {
+        return (new Validator($params))->notEmpty('argon_theme');
+    }
+}
\ No newline at end of file
diff --git a/Theme/Argon/Views/Account/home.twig b/Theme/Argon/Views/Account/home.twig
index 09373d1..b6ae9bd 100644
--- a/Theme/Argon/Views/Account/home.twig
+++ b/Theme/Argon/Views/Account/home.twig
@@ -1,4 +1,5 @@
-{% if is_dark() %}
+{% if is_dark() or (config('argon_default') == 'dark' and  request().CookieParams.theme == 'dark') %}
 {% set dark = true %}
 {% endif %}
+{% set marginBtn = true %}
 {% include("@account-copy/home.twig") %}
\ No newline at end of file
diff --git a/Theme/Argon/Views/Announcements/index.twig b/Theme/Argon/Views/Announcements/index.twig
new file mode 100644
index 0000000..2c622e0
--- /dev/null
+++ b/Theme/Argon/Views/Announcements/index.twig
@@ -0,0 +1,71 @@
+{% extends "layout.twig" %}
+
+{% block title trans("announcements") %}
+
+{% block body %}
+
+    <section class="forms">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-md-3 col-sm-12">
+                    <div class="card">
+                        <div class="card-body">
+                            <h4>{{ trans("announcementsadmin.bymonth") }}</h4>
+                            <ul class="list-group">
+                                <a class="list-group-item "
+                                   href="{{ path('announcements.index') }}">{{ trans("announcementsadmin.all") }}</a>
+                                {% for month in months %}
+                                    {% set currentDate = [month.format('Y'),month.format('m')] | join('-') %}
+                                    <a class="list-group-item {{ currentDate == current ? 'active' }}"
+                                       href="{{ path('announcements.view', {year: month.format('Y'), month: month.format('m')}) }}">{{ month.format('M Y') }}</a>
+                                {% endfor %}
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-9 col-sm-12">
+                        {% for row in announcements|batch(3) %}
+                            <div class="card-group" style="margin-top: 30px;">
+
+                            {% for announcement in row %}
+                            <div class="card">
+                                <div class="card-header p-0 mx-3 mt-3 position-relative z-index-1">
+                                    <a href="{{ path('announcements.show', {id: announcement.id}) }}" class="d-block">
+                                        <img src="{{ announcement.thumbnailUrl }}" class="img-fluid border-radius-lg">
+                                    </a>
+                                </div>
+
+                                <div class="card-body pt-2">
+                                    {% if announcement.pinned %}
+                                    <span class="text-gradient text-primary text-uppercase text-xs font-weight-bold my-2">{{ trans("pinned") }}</span>
+                                    {% endif %}
+                                    <a href="{{ path('announcements.show', {id: announcement.id}) }}" class="card-title h5 d-block text-darker">
+                                        {{ announcement.title }}
+                                    </a>
+                                    <p class="card-description mb-4">
+                                        {{ announcement.excerpt | raw }}
+                                    </p>
+                                    <a class="card-footer" href="{{ path('announcements.show', {id: announcement.id}) }}">
+                                        {{ trans("see_more") }}
+                                    </a>
+                                    <div class="author align-items-center">
+                                        <div class="name ps-3">
+                                            <div class="stats">
+                                                <small>{{ announcement.createdAt.format('h M y') }}</small>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                                {% endfor %}
+                        </div>
+                        {% endfor %}
+            </div>
+        </div>
+    </section>
+{% endblock %}
+
+{% block scripts %}
+    {{ ago_scripts() }}
+
+{% endblock %}
\ No newline at end of file
diff --git a/Theme/Argon/Views/Basket/show.twig b/Theme/Argon/Views/Basket/show.twig
index 17707af..003f67b 100644
--- a/Theme/Argon/Views/Basket/show.twig
+++ b/Theme/Argon/Views/Basket/show.twig
@@ -15,48 +15,49 @@
 								<div class="row">
 
 									{% for row in basket.rows %}
-										<div class="col-lg-6 col-md-6 col-12 row-{{ row.product.id }}">
+									<div class="row-{{ row.product.id }}">
+									
+							<div class="col-12">
+								<div class="row">
+										<div class="col-lg-6 col-md-6 col-12">
 											<div class="d-flex">
 												<div>
 													<h6 class="text-lg mb-0 mt-2">{{ row.product.name }}</h6>
 													<span class="badge bg-primary" id="price-{{ row.product.id }}">{{trans("price") }}
 														:
 														{{ row.product.originalPrice(row.toRecurring().name) | formatted_price(true, 'none')  | trans }}</span>
+														{% if row.product.originalSetupfee(row.toRecurring().name) != 0 %}
 													<span class="badge bg-info" id="setupfee-{{ row.product.id }}">{{trans("setupfee") }}
 														:
 														{{ row.product.originalSetupfee(row.toRecurring().name) | formatted_price(true, 'none')  | trans }}</span>
-													<div class="row mt-3">
+														{% endif %}
+													<p class="text-sm mb-3 mt-3">
 														{% if row.product.data is empty %}
-													<div class="col-lg-3 col-sm-12">
-
-													<input type="number" class="form-control quantity" name="quantity" value="{{ row.quantity }}" id="quantity-{{ row.quantity }}" style="width:5rem;" data-id="{{ row.product.id }}" onchange="changeQuantity(this)">
-													</div>
+															<input type="number" class="form-control quantity" name="quantity" value="{{ row.quantity }}" id="quantity-{{ row.quantity }}" style="width:5rem;" data-id="{{ row.product.id }}" onchange="changeQuantity(this)">
 														{% else %}
-															<p>{{ row.product.primaryData }}</p>
+															{{ row.product.primaryData }}
 														{% endif %}
+													</p>
 
 													{% if row.product.free %}
-														<p>{{ trans("recurrings.monthly") }}</p>
+														{{ trans("recurrings.monthly") }}
 													{% elseif row.product.paymenttype == 'onetime' %}
-														<p>{{ trans("onetime") }}</p>
+														{{ trans("onetime") }}
 													{% else %}
 
 														{% if row.isUniqueCycle() %}
-															<p>{{ trans(row.UniqueCycle.translateKey) }}</p>
+															{{ trans(row.UniqueCycle.translateKey) }}
 														{% else %}
-															<div class="col-lg-9 col-sm-12">
+
 															<select class="form-control billing" data-id="{{ row.product.id }}" onchange="changeBilling(this)">
 																{% for cycle in row.cyclesAvailable %}
 																	{% if row.product.originalPrice(cycle.name, 0, true) != 0 %}
-																		<option value="{{ cycle.name }}" {% if cycle.name == row.billing %} selected {% endif %}>{{ trans(cycle.translateKey) }} {{ row.product.getDiscountForRecurring(cycle, row.UniqueCycle)!= 0 ? row.product.getDiscountForRecurring(cycle, row.UniqueCycle) ~ "% Saved" }}</option>
+																		<option value="{{ cycle.name }}" {% if cycle.name == row.billing %} selected {% endif %}>{{ trans(cycle.translateKey) }}</option>
 																	{% endif %}
 																{% endfor %}
 															</select>
-															</div>
 														{% endif %}
 													{% endif %}
-												</div>
-
 
 												</div>
 											</div>
@@ -74,25 +75,28 @@
 												<i class="fas fa-trash"></i>
 											</button>
 										</div>
+										</div>
+										</div>
+										</div>
 								{% endfor %}
 
 								<div class="col-lg-9 col-md-6 col-12"></div>
 								<div class="col-lg-3 col-12 ms-auto">
 									<h6 class="mb-3">{{trans("basket.title")}}</h6>
 									<div class="d-flex justify-content-between">
-										<span class="mb-2 text-sm">
+										<span class="mb-2">
 											<strong>{{ trans("subtotal") }}:</strong>
 										</span>
 										<span class="text-dark font-weight-bold ms-2" id="subtotal">{{ basket.subtotal | formatted_price(true, "none") | trans }}</span>
 									</div>
 									<div class="d-flex justify-content-between">
-										<span class="mb-2 text-sm">
+										<span class="mb-2">
 											<strong>{{ trans("discount") }}:</strong>
 										</span>
 										<span class="text-dark ms-2 font-weight-bold" id="discount">{{ basket.discount | formatted_price(true, "none") | trans }}</span>
 									</div>
 									<div class="d-flex justify-content-between">
-										<span class="text-sm">
+										<span class="">
 											<strong>{{ trans("setupfee") }}:</strong>
 										</span>
 										<span class="text-dark ms-2 font-weight-bold" id="setupfee">{{ basket.setupfee | formatted_price(true, "none") | trans }}</span>
@@ -102,18 +106,22 @@
 										<span class="text-sm">
 											<strong>{{ trans("tax") }}:</strong>
 										</span>
-										<span class="text-dark ms-2 font-weight-bold" id="tax">{{ basket.vat(current_user()) }}</span>
+										<span class="text-dark ms-2 font-weight-bold" id="tax">{{ basket.vat(current_user()) }}%</span>
 									</div>
 
-									<div class="d-flex justify-content-between mt-4">
-										<span class="mb-2 text-lg">
-											Total:
+									<div class="d-flex justify-content-between">
+										<span class="text-sm">
+											<strong>{{ trans("total") }}:</strong>
 										</span>
-										<span class="text-dark text-lg ms-2 font-weight-bold" id="total">{{ basket.total | formatted_price(true, "none") | trans }}</span>
+										<span class="text-dark ms-2 font-weight-bold" id="total">{{ basket.total | formatted_price(true, "none") | trans }} </span>
+									</div>
+
+									<div class="d-flex justify-content-between mt-4">
+										<a href="{{ path('basket.checkout') }}" class="btn btn-primary float-right" style="max-width:auto;">{{ trans("basket.checkout" ) }}</a>
 									</div>
+									
 								</div>
 							</div>
-				<a href="{{ path('basket.checkout') }}" class="btn btn-primary float-right" style="max-width:auto;">{{ trans("basket.checkout" ) }}</a>
 
 						</div>
 					</div>
diff --git a/Theme/Argon/Views/Proxmox/data.twig b/Theme/Argon/Views/Proxmox/data.twig
index f0a1a2e..a269960 100644
--- a/Theme/Argon/Views/Proxmox/data.twig
+++ b/Theme/Argon/Views/Proxmox/data.twig
@@ -1,121 +1 @@
-{% if inAdmin %}
-    {% set bootstrap = 'v4' %}
-{% endif %}
-<style>
-
-    .imagecheck {
-
-        margin: 0;
-        position: relative;
-        cursor: pointer;
-    }
-
-    .imagecheck-input {
-        position: absolute;
-        z-index: -1;
-        opacity: 0;
-    }
-
-    .card.card-large-icons .card-icon .fab {
-        font-size: 60px;
-    }
-    .card-icon {
-        display: flex;
-        justify-content: center;
-        padding: 10px;
-    }
-
-    .imagecheck-input:checked ~ .imagecheck-figure:before {
-        opacity: 1;
-    }
-
-
-    .imagecheck-figure:before {
-        content: '';
-        position: absolute;
-        top: .25rem;
-        left: .25rem;
-        display: block;
-        width: 1rem;
-        height: 1rem;
-        pointer-events: none;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-        background: var({{ bootstrap == 'v4' ? '--primary' : '--bs-primary'}}) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") no-repeat center center/50% 50%;
-        color: #fff;
-        z-index: 1;
-        border-radius: 3px;
-        opacity: 0;
-        transition: .3s opacity;
-    }
-</style>
-<div class="col-md-12 col-xl-{{ inAdmin == false  ? 12 : 6 }} col-sm-12">
-    <div class="card">
-        <div class="card-body">
-            <div class="row">
-                <div class="col-12">
-                    {% if bootstrap == 'v4' %}
-                        <div class="form-group custom-control custom-switch">
-                            <input type="checkbox" class="custom-control-input" id="choosehostname" name="choosehostname" data-toggle="collapse" {{ item.choosehostname ? 'checked' }} data-target="#virtualizorGroup">
-                            <label class="custom-control-label" for="choosehostname">
-                                {{ trans("proxmox.choosehostname") }}
-                            </label>
-                        </div>
-
-                        <div id="virtualizorGroup" class="{{ item.choosehostname ? 'show'  : 'collapse' }} mt-3">
-                            {{ field('hostname', item.hostname, trans("proxmox.hostname")) }}
-                        </div>
-                    {% else %}
-
-                        <div class="form-check">
-                            <input type="checkbox" class="form-check-input" id="choosehostname" name="choosehostname" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" {{ item.choosehostname ? 'checked' }}>
-                            <label class="form-check-label" for="choosehostname">
-                                {{ trans("proxmox.choosehostname") }}
-                            </label>
-                        </div>
-                        <div id="collapseOne" class="accordion-collapse border-0 {{item.choosehostname ? 'collapse show' : 'collapse'}}" aria-labelledby="headingOne" data-bs-parent="#choosehostname">
-                            {{ field('hostname', item.hostname, trans("proxmox.hostname")) }}
-                        </div>
-                    {% endif %}
-                    {% if config('proxmox_auth_type') == 'password' %}
-                    {{ field('rootpass', item.rootpass, trans("password"), {type: 'password'} ) }}
-                    {{ field('confirmation',item.confirmation, trans("confirmation"), {type: 'password'} ) }}
-
-                    {% else %}
-                    {{ field('sshpublic', item.sshpublic, "Public SSH", {type: 'textarea'} ) }}
-                    {% endif %}
-
-                    <div class="row mt-4">
-
-                        {% for key, value in oses %}
-
-                            <div class="col-xl-4 col-sm-12 col-md-6 col-12">
-                                <label class="imagecheck mb-2 mt-2">
-                                    <input name="osid" type="radio" value="{{ key }}" {{ loop.first ? 'checked' : '' }} class="imagecheck-input" />
-                                    <div class="card card-large-icons imagecheck-figure">
-                                        <div class="card-icon bg-primary text-white">
-                                            {% if value is proxmox_debian %}
-                                                <img
-                                                        src="{{ theme_global('debian.svg') }}" width="60" height="60">
-                                            {% else %}
-                                                <i class="{{ value | proxmox_os_icon }}"></i>
-                                            {% endif %}
-                                        </div>
-                                        <div class="card-body">
-                                            <p>
-                                                {{ value }}
-                                            </p>
-                                        </div>
-                                    </div>
-                                </label>
-                            </div>
-                        {% endfor %}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-                        
\ No newline at end of file
+{{ include('@proxmox-copy/data', {bootstrap: 'v5'}) }}
\ No newline at end of file
diff --git a/Theme/Argon/Views/Shop/domaindata.twig b/Theme/Argon/Views/Shop/domaindata.twig
index 804076b..01584ff 100644
--- a/Theme/Argon/Views/Shop/domaindata.twig
+++ b/Theme/Argon/Views/Shop/domaindata.twig
@@ -1,2 +1 @@
-{% set boostrap = 'v5' %}
-{% include('@shop/domaindata') %}
\ No newline at end of file
+{{ include('@shop-copy/domaindata', {bootstrap: 'v5'}) }}
\ No newline at end of file
diff --git a/Theme/Argon/Views/Virtualizor/data.twig b/Theme/Argon/Views/Virtualizor/data.twig
index a158110..7a70898 100644
--- a/Theme/Argon/Views/Virtualizor/data.twig
+++ b/Theme/Argon/Views/Virtualizor/data.twig
@@ -1,3 +1 @@
-{% set bootstrap = 'v5' %}
-
-{% include "@virtualizor-copy/data.twig" %}
+{{ include('@virtualizor-copy/data', {bootstrap: 'v5'}) }}
\ No newline at end of file
diff --git a/Theme/Argon/Views/VirtualizorCloud/data.twig b/Theme/Argon/Views/VirtualizorCloud/data.twig
index 6a328a6..65e415d 100644
--- a/Theme/Argon/Views/VirtualizorCloud/data.twig
+++ b/Theme/Argon/Views/VirtualizorCloud/data.twig
@@ -1,3 +1 @@
-{% set bootstrap = 'v5' %}
-
-{% include "@virtualizorcloud-copy/data.twig" %}
+{{ include('@virtualizorcloud-copy/data', {bootstrap: 'v5'}) }}
\ No newline at end of file
diff --git a/Theme/Argon/config.php b/Theme/Argon/config.php
index f656fea..f58f1a4 100644
--- a/Theme/Argon/config.php
+++ b/Theme/Argon/config.php
@@ -1,8 +1,7 @@
 <?php
 
-$return = [
-    'class' => \Themes\Argon\ArgonTheme::class,
-];
+use function DI\add;
+use function DI\get;
 
 return [
     'class' => \Themes\Argon\ArgonTheme::class,
@@ -14,5 +13,8 @@
         return 'mt-2';
     })),
 
-    'theme_primary' => \ClientX\setting("theme_primary")
+    'theme_primary' => \ClientX\setting("theme_primary"),
+    'argon_theme' => \ClientX\setting("argon_theme", "none"),
+    'argon_default' => \ClientX\setting("argon_default", "light"),
+    'admin.settings' => add(get(\Themes\Argon\ArgonSettings::class))
 ];
\ No newline at end of file
diff --git a/Theme/Argon/includes/head.twig b/Theme/Argon/includes/head.twig
index 52cccc3..02bdb27 100644
--- a/Theme/Argon/includes/head.twig
+++ b/Theme/Argon/includes/head.twig
@@ -28,9 +28,15 @@
     </title>
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
     <link href="{{ theme_asset('css/nucleo-svg.css') }}" rel="stylesheet" />
-    <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
+    
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <link href="{{ theme_asset('css/nucleo-svg.css') }}" rel="stylesheet" />
-    <link id="pagestyle" href="{{ theme_asset('css/argon-dashboard.css') }}" rel="stylesheet" />
+    
+    {% if config('theme_primary') %}
+        <link rel="stylesheet"  href="{{ path('theme_custom') }}?primary={{ config('theme_primary') | replace({"#": ""}) }}&file=argon-dashboard">
+    {% else %}
+        <link rel="stylesheet" href="{{ theme_asset('css/argon-dashboard.css') }}">
+    {% endif %}
     <link href="{{ theme_global('clientx.css') }}" rel="stylesheet" />
     <style>
         .autoheight {
diff --git a/Theme/Argon/includes/header.twig b/Theme/Argon/includes/header.twig
index f9d7ea3..9e14f5e 100644
--- a/Theme/Argon/includes/header.twig
+++ b/Theme/Argon/includes/header.twig
@@ -12,16 +12,19 @@
         <ul class="navbar-nav">
             {{ navigation('main_menu') }}
          </ul>
-        <div class="container d-flex justify-content-center">
-
+        {%  if config('argon_theme') == 'none' %}
+        <div class="container d-flex justify-content-right">
             <div class="mt-2 mb-5 d-flex">
-                <h6 class="mb-0">Dark mode</h6>
                 <div class="form-check form-switch ps-0 ms-auto my-auto">
-                    <input class="form-check-input mt-1 ms-auto" type="checkbox" id="dark-version" onclick="darkMode(this)">
+                    <input class="form-check-input mt-1 ms-auto" type="checkbox" id="dark-version" onclick="darkMode(this)" {{ config('argon_default') == 'dark' and request().CookieParams.theme == 'dark' ? 'checked' : '' }} {{ config('argon_default') == 'dark' and request().CookieParams.theme == null ? 'checked' : '' }}>
                 </div>
+                <h6 class="mb-0" style="margin-left:20px;">Dark mode</h6>
             </div>
         </div>
-                </div>
+        {% else %}
+            <input type="checkbox" id="dark-version" style="display:none;" {{ (config('argon_theme') != 'light' or config('argon_default') == 'dark') and request().CookieParams.theme == null ? 'checked' : '' }}>
+        {% endif %}
+    </div>
             </li>
         </ul>
     </div>
@@ -158,4 +161,4 @@
             </div>
         </div>
     </nav>
-    <div id="Democontent"></div>
\ No newline at end of file
+    <div id="Democontent"></div>
diff --git a/Theme/Argon/includes/script.twig b/Theme/Argon/includes/script.twig
index 0ebf746..6868d89 100644
--- a/Theme/Argon/includes/script.twig
+++ b/Theme/Argon/includes/script.twig
@@ -26,6 +26,15 @@
     function confirmation() {
         return confirm(window.confirmationText)
     }
+    {% if config('argon_theme') != 'none' or (config('argon_default') == 'dark' and request().CookieParams.theme == null) %}
+    darkMode(document.getElementById("dark-version"))
+    {% else %}
+    window.addEventListener("load", function (e) {
+        if (cookie('theme') && cookie('theme') === 'dark') {
+            darkMode(document.getElementById("dark-version"))
+        }
+    });
+    {% endif %}
 </script>
 {% block scripts %}{% endblock %}
 {% autoescape false %}{{ config('html.body') }}{% endautoescape %}
\ No newline at end of file
diff --git a/Theme/Argon/navigations/home.twig b/Theme/Argon/navigations/home.twig
index 3fd7223..7c34e25 100644
--- a/Theme/Argon/navigations/home.twig
+++ b/Theme/Argon/navigations/home.twig
@@ -1,6 +1,6 @@
 {% for item in items %}
 
-    <div class="col-xl-{{ item.col ? item.col : 3 }} col-sm-{{ item.col ? item.col : 3 * 2 }} mb-xl-0 mb-4">
+    <div class="col-xl-{{ item.col ? item.col : 3 }} col-sm-{{ item.col ? item.col : 3 * 2 }} mb-xl-0 mb-4" style="margin-bottom: 15px;">
         <div class="card">
             <div class="card-body p-3">
                 <div class="row">
diff --git a/Theme/Argon/setting/argon.twig b/Theme/Argon/setting/argon.twig
new file mode 100644
index 0000000..7018b1a
--- /dev/null
+++ b/Theme/Argon/setting/argon.twig
@@ -0,0 +1,9 @@
+
+<div class="row">
+    <div class="col-sm-12 col-md-12">
+        {{ field('argon_theme',config('argon_theme'),  'Argon theme display', {options: themes}, {'onchange': "if(this.selectedIndex != 0){ document.getElementById('argon_default_container').classList.add('d-none')} else {document.getElementById('argon_default_container').classList.remove('d-none')} "}) }}
+    </div>
+    <div class="col-sm-12 col-md-12 {{ config('argon_theme') != 'none' ?  'd-none' : ''  }}" id="argon_default_container">
+        {{ field('argon_default',  config('argon_default'), 'Argon default theme', {options: default}) }}
+    </div>
+</div>
\ No newline at end of file
diff --git a/public/Argon/assets/css/argon-dashboard.css b/public/Argon/assets/css/argon-dashboard.css
index 9c62b28..67a0572 100644
--- a/public/Argon/assets/css/argon-dashboard.css
+++ b/public/Argon/assets/css/argon-dashboard.css
@@ -13,7 +13,7 @@
   --bs-orange: #fd7e14;
   --bs-yellow: #FBD38D;
   --bs-green: #81E6D9;
-  --bs-teal: #20c997;.navbar-vertical.navbar-expand-xs .navbar-collapse
+  --bs-teal: #20c997;
   --bs-cyan: #0dcaf0;
   --bs-white: #fff;
   --bs-gray: #6c757d;
@@ -22030,7 +22030,7 @@ hr.horizontal.gray-light {
   border-radius: 0.125rem;
   position: relative;
   display: block;
-  height: 2px;
+  height: 4px;
 }
 
 .navbar .sidenav-toggler-inner .sidenav-toggler-line:not(:last-child) {
@@ -22233,7 +22233,9 @@ hr.horizontal.gray-light {
 }
 
 .navbar-vertical.navbar-expand-xs .navbar-collapse {
-  display: block;
+    display: block;
+    overflow: auto;
+    height: calc(100vh - 150px);
 }
 
 .navbar-vertical.navbar-expand-xs>[class*="container"] {
@@ -26621,4 +26623,4 @@ pre[class*="language-"] {
   }
 }
 
-/*# sourceMappingURL=dashboard-free.css.map */
\ No newline at end of file
+/*# sourceMappingURL=dashboard-free.css.map */
diff --git a/public/Argon/assets/js/argon-dashboard.js b/public/Argon/assets/js/argon-dashboard.js
index fd93e8d..b911a71 100644
--- a/public/Argon/assets/js/argon-dashboard.js
+++ b/public/Argon/assets/js/argon-dashboard.js
@@ -391,11 +391,13 @@ html.addEventListener("click", function (e) {
 
 let referenceButtons = document.querySelector('[data-class]');
 
-window.addEventListener("resize", navbarColorOnResize);
 
 function navbarColorOnResize()
 {
     if (window.innerWidth > 1200) {
+        if (referenceButtons === undefined){
+            return;
+        }
         if (referenceButtons.classList.contains('active') && referenceButtons.getAttribute('data-class') === 'bg-transparent') {
             sidenav.classList.remove('bg-white');
         } else {
@@ -410,11 +412,7 @@ function navbarColorOnResize()
 // Deactivate sidenav type buttons on resize and small screens
 window.addEventListener("resize", sidenavTypeOnResize);
 window.addEventListener("load", sidenavTypeOnResize);
-window.addEventListener("load", function (e) {
-    if (cookie('theme') && cookie('theme') === 'dark') {
-        darkMode(document.getElementById("dark-version"))
-    }
-});
+
 
 function sidenavTypeOnResize()
 {
@@ -748,11 +746,6 @@ function darkMode(el)
         el.removeAttribute("checked");
     }
 };
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-    if (e.matches) {
-        darkMode(document.getElementById("dark-version"))
-    }
-});
 
 function cookie(name, value = undefined, options = {})
 {