diff --git a/.DS_Store b/.DS_Store
index 8dcdf57e..61496375 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/car_inventory/__pycache__/settings.cpython-311.pyc b/car_inventory/__pycache__/settings.cpython-311.pyc
index 9f00789e..acef0142 100644
Binary files a/car_inventory/__pycache__/settings.cpython-311.pyc and b/car_inventory/__pycache__/settings.cpython-311.pyc differ
diff --git a/db.sqlite b/db.sqlite
index f0746d7c..3a863764 100644
Binary files a/db.sqlite and b/db.sqlite differ
diff --git a/inventory/__pycache__/forms.cpython-311.pyc b/inventory/__pycache__/forms.cpython-311.pyc
index a182052e..ab2fc768 100644
Binary files a/inventory/__pycache__/forms.cpython-311.pyc and b/inventory/__pycache__/forms.cpython-311.pyc differ
diff --git a/inventory/__pycache__/models.cpython-311.pyc b/inventory/__pycache__/models.cpython-311.pyc
index 515b703e..b3a397af 100644
Binary files a/inventory/__pycache__/models.cpython-311.pyc and b/inventory/__pycache__/models.cpython-311.pyc differ
diff --git a/inventory/__pycache__/services.cpython-311.pyc b/inventory/__pycache__/services.cpython-311.pyc
index 4263ba3d..7c169a00 100644
Binary files a/inventory/__pycache__/services.cpython-311.pyc and b/inventory/__pycache__/services.cpython-311.pyc differ
diff --git a/inventory/__pycache__/urls.cpython-311.pyc b/inventory/__pycache__/urls.cpython-311.pyc
index 558253c5..feff8b2f 100644
Binary files a/inventory/__pycache__/urls.cpython-311.pyc and b/inventory/__pycache__/urls.cpython-311.pyc differ
diff --git a/inventory/__pycache__/views.cpython-311.pyc b/inventory/__pycache__/views.cpython-311.pyc
index bc437115..8f304fb1 100644
Binary files a/inventory/__pycache__/views.cpython-311.pyc and b/inventory/__pycache__/views.cpython-311.pyc differ
diff --git a/inventory/haikalna.py b/inventory/haikalna.py
index 21e82bcd..c2b48873 100644
--- a/inventory/haikalna.py
+++ b/inventory/haikalna.py
@@ -232,7 +232,7 @@ wmi_manufacturer_mapping = {
     "LJS": "Yaxing Coach",
     "LJU": "Lotus Geely",
     "LJX": "JMC Ford",
-    "LJ1": "Nio",
+    "LJ1": "JAC",
     "LJ8": "Zotye",
     "LKC": "Changhe",
     "LKL": "Higer Bus",
@@ -317,6 +317,7 @@ wmi_manufacturer_mapping = {
     "LZ4": "Shangyang",
     "L1N": "XPeng",
     "L2C": "Chery",
+    "L3H": "Victory",
     "L4F": "Suzhou Eagle",
     "L5C": "KangDi",
     "L5K": "Yongkang",
@@ -1524,6 +1525,7 @@ def decode_vin_haikalna(vin):
         'modelYear': year,
 
     }
+    print(data)
     return data
 
 
@@ -1533,4 +1535,5 @@ def decode_vin_haikalna(vin):
 # Example usage
 # vin_number = 'LMXA14AF7PZ356070'
 # decoded_vin = decode_vin_haikalna(vin_number)
-# print(decoded_vin)
\ No newline at end of file
+# print(decoded_vin)
+# LJ11PCBC2P1317660
\ No newline at end of file
diff --git a/inventory/migrations/0002_alter_subscriptionplan_options_and_more.py b/inventory/migrations/0002_alter_subscriptionplan_options_and_more.py
new file mode 100644
index 00000000..56ecc382
--- /dev/null
+++ b/inventory/migrations/0002_alter_subscriptionplan_options_and_more.py
@@ -0,0 +1,101 @@
+# Generated by Django 5.1.4 on 2025-01-02 23:56
+
+import django.db.models.deletion
+import django.utils.timezone
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('inventory', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='subscriptionplan',
+            options={'verbose_name': 'Subscription Plan', 'verbose_name_plural': 'Subscription Plans'},
+        ),
+        migrations.RemoveField(
+            model_name='subscription',
+            name='max_users',
+        ),
+        migrations.AddField(
+            model_name='opportunity',
+            name='assigned_at',
+            field=models.DateTimeField(auto_now_add=True, default=django.utils.timezone.now, verbose_name='Assigned At'),
+            preserve_default=False,
+        ),
+        migrations.AddField(
+            model_name='opportunity',
+            name='assigned_to',
+            field=models.ForeignKey(default=1, on_delete=django.db.models.deletion.CASCADE, related_name='deals_assigned', to='inventory.staff'),
+            preserve_default=False,
+        ),
+        migrations.AddField(
+            model_name='subscription',
+            name='billing_cycle',
+            field=models.CharField(choices=[('monthly', 'Monthly'), ('annual', 'Annual')], default='monthly', help_text='Billing cycle for the subscription', max_length=10),
+        ),
+        migrations.AddField(
+            model_name='subscription',
+            name='last_payment_date',
+            field=models.DateField(blank=True, help_text='Date of the last payment made', null=True),
+        ),
+        migrations.AddField(
+            model_name='subscription',
+            name='next_payment_date',
+            field=models.DateField(blank=True, help_text='Date of the next payment due', null=True),
+        ),
+        migrations.AddField(
+            model_name='subscriptionplan',
+            name='created_at',
+            field=models.DateTimeField(auto_now_add=True, default=django.utils.timezone.now),
+            preserve_default=False,
+        ),
+        migrations.AddField(
+            model_name='subscriptionplan',
+            name='custom_features',
+            field=models.JSONField(blank=True, help_text='Additional features specific to this plan', null=True),
+        ),
+        migrations.AddField(
+            model_name='subscriptionplan',
+            name='max_inventory_size',
+            field=models.PositiveIntegerField(default=50, help_text='Maximum number of cars in inventory'),
+        ),
+        migrations.AddField(
+            model_name='subscriptionplan',
+            name='support_level',
+            field=models.CharField(choices=[('basic', 'Basic Support'), ('priority', 'Priority Support'), ('dedicated', 'Dedicated Support')], default='basic', help_text='Level of support provided', max_length=50),
+        ),
+        migrations.AddField(
+            model_name='subscriptionplan',
+            name='updated_at',
+            field=models.DateTimeField(auto_now=True),
+        ),
+        migrations.AlterField(
+            model_name='subscription',
+            name='end_date',
+            field=models.DateField(help_text='Date when the subscription ends'),
+        ),
+        migrations.AlterField(
+            model_name='subscription',
+            name='plan',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='subscriptions', to='inventory.subscriptionplan'),
+        ),
+        migrations.AlterField(
+            model_name='subscription',
+            name='start_date',
+            field=models.DateField(help_text='Date when the subscription starts'),
+        ),
+        migrations.AlterField(
+            model_name='subscriptionplan',
+            name='max_users',
+            field=models.PositiveIntegerField(default=1, help_text='Maximum number of users allowed'),
+        ),
+        migrations.AlterField(
+            model_name='subscriptionplan',
+            name='name',
+            field=models.CharField(help_text='Name of the subscription plan', max_length=100, unique=True),
+        ),
+    ]
diff --git a/inventory/migrations/0022_remove_opportunitylog_user_opportunitylog_staff_and_more.py b/inventory/migrations/0022_remove_opportunitylog_user_opportunitylog_staff_and_more.py
deleted file mode 100644
index 9c3caa2b..00000000
--- a/inventory/migrations/0022_remove_opportunitylog_user_opportunitylog_staff_and_more.py
+++ /dev/null
@@ -1,34 +0,0 @@
-# Generated by Django 5.1.4 on 2025-01-01 16:25
-
-import django.db.models.deletion
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('django_ledger', '0017_alter_accountmodel_unique_together_and_more'),
-        ('inventory', '0021_opportunitylog'),
-    ]
-
-    operations = [
-        migrations.RemoveField(
-            model_name='opportunitylog',
-            name='user',
-        ),
-        migrations.AddField(
-            model_name='opportunitylog',
-            name='staff',
-            field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, to='inventory.staff', verbose_name='Staff'),
-        ),
-        migrations.AlterField(
-            model_name='carfinance',
-            name='additional_services',
-            field=models.ManyToManyField(blank=True, related_name='additional_finances', to='django_ledger.itemmodel'),
-        ),
-        migrations.AlterField(
-            model_name='customer',
-            name='is_lead',
-            field=models.BooleanField(default=False, verbose_name='Is Lead'),
-        ),
-    ]
diff --git a/inventory/models.py b/inventory/models.py
index 899d21fa..d69807bd 100644
--- a/inventory/models.py
+++ b/inventory/models.py
@@ -502,28 +502,64 @@ class TimestampedModel(models.Model):
 
 
 class Subscription(models.Model):
-    plan = models.CharField(max_length=255)  # e.g. "basic", "premium"
-    start_date = models.DateField()
-    end_date = models.DateField()
-    max_users = models.IntegerField()  # maximum number of users per account
+    plan = models.ForeignKey("SubscriptionPlan", on_delete=models.CASCADE, related_name="subscriptions")
+    start_date = models.DateField(help_text="Date when the subscription starts")
+    end_date = models.DateField(help_text="Date when the subscription ends")
     users = models.ManyToManyField(User, through='SubscriptionUser')  # many-to-many relationship with User model
     is_active = models.BooleanField(default=True)
+    billing_cycle = models.CharField(
+        max_length=10,
+        choices=[('monthly', 'Monthly'), ('annual', 'Annual')],
+        default='monthly',
+        help_text="Billing cycle for the subscription"
+    )
+    last_payment_date = models.DateField(null=True, blank=True, help_text="Date of the last payment made")
+    next_payment_date = models.DateField(null=True, blank=True, help_text="Date of the next payment due")
+    class Meta:
+        verbose_name = _("Subscription")
+        verbose_name_plural = _("Subscriptions")
+
     def __str__(self):
-        return self.plan
+        return self.plan.name
+
+    @property
+    def total_subscribers(self):
+        return self.users.count()
+
 
 
 class SubscriptionUser(models.Model):
     subscription = models.ForeignKey(Subscription, on_delete=models.CASCADE)
     user = models.ForeignKey(User, on_delete=models.CASCADE)
+
+    class Meta:
+        verbose_name = _("Subscription User")
+        verbose_name_plural = _("Subscription Users")
+
     def __str__(self):
         return f"{self.subscription} - {self.user}"
 
 
 class SubscriptionPlan(models.Model):
-    name = models.CharField(max_length=255)
+    name = models.CharField(max_length=100, unique=True, help_text=_("Name of the subscription plan"))
     description = models.TextField()
     price = models.DecimalField(max_digits=10, decimal_places=2)
-    max_users = models.IntegerField()  # maximum number of users per account
+    max_users = models.PositiveIntegerField(help_text=_("Maximum number of users allowed"), default=1)
+    max_inventory_size = models.PositiveIntegerField(help_text=_("Maximum number of cars in inventory"), default=50)
+    support_level = models.CharField(
+        max_length=50,
+        choices=[('basic', 'Basic Support'), ('priority', 'Priority Support'), ('dedicated', 'Dedicated Support')],
+        default='basic',
+        help_text="Level of support provided"
+    )
+    custom_features = models.JSONField(blank=True, null=True, help_text=_("Additional features specific to this plan"))
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    class Meta:
+        verbose_name = _("Subscription Plan")
+        verbose_name_plural = _("Subscription Plans")
+
     def __str__(self):
         return f"{self.name} - {self.price}"
 
@@ -731,6 +767,8 @@ class Opportunity(models.Model):
     created_by = models.ForeignKey(Staff, on_delete=models.SET_NULL, null=True, related_name="deals_created")
     created_at = models.DateTimeField(auto_now_add=True, verbose_name=_("Created At"))
     updated_at = models.DateTimeField(auto_now=True, verbose_name=_("Updated At"))
+    assigned_to = models.ForeignKey(Staff, on_delete=models.CASCADE, related_name="deals_assigned")
+    assigned_at = models.DateTimeField(auto_now_add=True, verbose_name=_("Assigned At"))
 
     class Meta:
         verbose_name = _("Opportunity")
@@ -746,6 +784,7 @@ class Notes(models.Model):
     created_by = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, related_name="notes_created")
     created_at = models.DateTimeField(auto_now_add=True, verbose_name=_("Created At"))
     updated_at = models.DateTimeField(auto_now=True, verbose_name=_("Updated At"))
+
     class Meta:
         verbose_name = _("Notes")
         verbose_name_plural = _("Notes")
@@ -1052,4 +1091,6 @@ class UserActivityLog(models.Model):
         ordering = ['-timestamp']
 
     def __str__(self):
-        return f"{self.user.email} - {self.action} - {self.timestamp}"
\ No newline at end of file
+        return f"{self.user.email} - {self.action} - {self.timestamp}"
+
+
diff --git a/inventory/services.py b/inventory/services.py
index df12bf59..cc782106 100644
--- a/inventory/services.py
+++ b/inventory/services.py
@@ -53,7 +53,7 @@ def decode_vin(vin):
             "model": v.Model,
             "modelYear": v.ModelYear,
         }
-
+    print(data)
     return data if all([x for x in data.values()]) else None
 
 
@@ -78,7 +78,7 @@ def elm(vin):
             "model": response["data"]["model"],
             "modelYear": response["data"]["modelYear"],
         }
-
+    print(data)
     return data if all([x for x in data.values()]) else None    
 
 
diff --git a/inventory/signals.py b/inventory/signals.py
index 0c419b9e..6dcafbbe 100644
--- a/inventory/signals.py
+++ b/inventory/signals.py
@@ -105,7 +105,7 @@ def create_ledger_entity(sender, instance, created, **kwargs):
                # Create Cash Account
             entity.create_account(
                 coa_model=coa,
-                code="101",
+                code="1101",
                 role=roles.ASSET_CA_CASH,
                 name=_("Cash"),
                 balance_type="debit",
@@ -115,7 +115,7 @@ def create_ledger_entity(sender, instance, created, **kwargs):
             # Create Accounts Receivable Account
             entity.create_account(
                 coa_model=coa,
-                code="102",
+                code="1102",
                 role=roles.ASSET_CA_RECEIVABLES,
                 name=_("Accounts Receivable"),
                 balance_type="debit",
@@ -125,7 +125,7 @@ def create_ledger_entity(sender, instance, created, **kwargs):
             # Create Inventory Account
             entity.create_account(
                 coa_model=coa,
-                code="103",
+                code="1103",
                 role=roles.ASSET_CA_INVENTORY,
                 name=_("Inventory"),
                 balance_type="debit",
@@ -135,7 +135,7 @@ def create_ledger_entity(sender, instance, created, **kwargs):
             # Create Accounts Payable Account
             entity.create_account(
                 coa_model=coa,
-                code="101",
+                code="2101",
                 role=roles.LIABILITY_CL_ACC_PAYABLE,
                 name=_("Accounts Payable"),
                 balance_type="credit",
@@ -144,7 +144,7 @@ def create_ledger_entity(sender, instance, created, **kwargs):
             # Create Equity Account
             entity.create_account(
                 coa_model=coa,
-                code="101",
+                code="3101",
                 role=roles.EQUITY_CAPITAL,
                 name=_("Partners Current"),
                 balance_type="credit",
@@ -154,7 +154,7 @@ def create_ledger_entity(sender, instance, created, **kwargs):
             # Create Sales Revenue Account
             entity.create_account(
                 coa_model=coa,
-                code="101",
+                code="4101",
                 role=roles.INCOME_OPERATIONAL,
                 name=_("Sales Revenue"),
                 balance_type="credit",
@@ -164,7 +164,7 @@ def create_ledger_entity(sender, instance, created, **kwargs):
             # Create Cost of Goods Sold Account
             entity.create_account(
                 coa_model=coa,
-                code="101",
+                code="5101",
                 role=roles.COGS,
                 name=_("Cost of Goods Sold"),
                 balance_type="debit",
@@ -174,7 +174,7 @@ def create_ledger_entity(sender, instance, created, **kwargs):
             # Create Rent Expense Account
             entity.create_account(
                 coa_model=coa,
-                code="101",
+                code="6101",
                 role=roles.EXPENSE_OPERATIONAL,
                 name=_("Rent Expense"),
                 balance_type="debit",
diff --git a/inventory/urls.py b/inventory/urls.py
index 39917767..b87a0c53 100644
--- a/inventory/urls.py
+++ b/inventory/urls.py
@@ -90,7 +90,7 @@ urlpatterns = [
     path('sales/quotations/<int:pk>/mark_quotation/', views.mark_quotation, name='mark_quotation'),
     path('sales/quotations/<int:pk>/post_quotation/', views.post_quotation, name='post_quotation'),
     path('sales/quotations/<int:pk>/invoice_detail/', views.invoice_detail, name='invoice_detail'),
-    
+    path('subscriptions', views.SubscriptionPlans.as_view(), name='subscriptions'),
     #Payment URLs
 #     path('sales/quotations/<int:pk>/payment/', views.PaymentCreateView.as_view(), name='payment_create'),
     path('sales/quotations/<int:pk>/payment/', views.payment_create, name='payment_create'),
diff --git a/inventory/views.py b/inventory/views.py
index 5e25f3ea..46cb1cde 100644
--- a/inventory/views.py
+++ b/inventory/views.py
@@ -1468,14 +1468,14 @@ def payment_invoice(request, pk):
 
 def payment_create(request, pk):
     quotation = get_object_or_404(models.SaleQuotation, pk=pk)
-    dealer = request.user.dealer
+    dealer = get_user_type(request)
     if request.method == "POST":
         form = forms.PaymentForm(request.POST)
         if form.is_valid():
             form.instance.quotation = quotation
             insatnce = form.save()
 
-            dealer = request.user.dealer
+            dealer = dealer
             entity = dealer.entity
             customer = (
                 entity.get_customers()
@@ -2359,3 +2359,9 @@ class ItemServiceListView(ListView):
 
     def get_queryset(self):
         return self.request.entity.get_items_services()
+
+
+class SubscriptionPlans(ListView):
+    model = models.SubscriptionPlan
+    template_name = 'subscriptions/subscription_plan.html'
+    context_object_name = 'plans'
diff --git a/static/.DS_Store b/static/.DS_Store
index 2b2bcc1b..c6753b28 100644
Binary files a/static/.DS_Store and b/static/.DS_Store differ
diff --git a/static/css/custom.css b/static/css/custom.css
index 48e742af..60d60233 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,8 +1,9 @@
  .color-div {
-        width: 22px;
-        height: 22px;
-        border-radius: 50%;
-        border: 1px solid #ccc;
+        width: 64px;
+        height: 16px;
+        padding: 2px 4px;
+        border-radius: 1px;
+        border: 1px outset #CBD0DDFd;
         text-align: center;
         vertical-align: middle;
         line-height: 22px;
diff --git a/static/images/.DS_Store b/static/images/.DS_Store
index e77671d4..23a16b17 100644
Binary files a/static/images/.DS_Store and b/static/images/.DS_Store differ
diff --git a/static/images/car_make/Dongfeng.png b/static/images/car_make/Dongfeng.png
new file mode 100644
index 00000000..6b22550d
Binary files /dev/null and b/static/images/car_make/Dongfeng.png differ
diff --git a/static/images/car_make/Forthing.png b/static/images/car_make/Forthing.png
new file mode 100644
index 00000000..474a02a3
Binary files /dev/null and b/static/images/car_make/Forthing.png differ
diff --git a/static/images/logos/.DS_Store b/static/images/logos/.DS_Store
index 2524cbab..72155161 100644
Binary files a/static/images/logos/.DS_Store and b/static/images/logos/.DS_Store differ
diff --git a/static/images/logos/car_make/Dongfeng.png b/static/images/logos/car_make/Dongfeng.png
new file mode 100644
index 00000000..6b22550d
Binary files /dev/null and b/static/images/logos/car_make/Dongfeng.png differ
diff --git a/static/images/logos/car_make/Forthing.png b/static/images/logos/car_make/Forthing.png
new file mode 100644
index 00000000..474a02a3
Binary files /dev/null and b/static/images/logos/car_make/Forthing.png differ
diff --git a/static/images/logos/car_make/changan.png b/static/images/logos/car_make/changan.png
new file mode 100644
index 00000000..5761674e
Binary files /dev/null and b/static/images/logos/car_make/changan.png differ
diff --git a/static/images/logos/car_make/haval.png b/static/images/logos/car_make/haval.png
new file mode 100644
index 00000000..c1131c1d
Binary files /dev/null and b/static/images/logos/car_make/haval.png differ
diff --git a/templates/base.html b/templates/base.html
index 9867aaec..09e02ee4 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -30,6 +30,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800;900&amp;display=swap" rel="stylesheet">
     <link href="{% static 'vendors/simplebar/simplebar.min.css' %}" rel="stylesheet">
     <link href="{% static 'css/sweetalert2.min.css' %}" rel="stylesheet">
+<link href="{% static 'vendors/flatpickr/flatpickr.min.css' %}" rel="stylesheet">
     <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">    
 <link href="{% static 'css/custom.css' %}" rel="stylesheet">
     {% if LANGUAGE_CODE == 'en' %}
@@ -80,6 +81,7 @@
     <script src="{% static 'vendors/mapbox-gl/mapbox-gl.js' %}"></script>
     <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
     <script src="{% static 'vendors/swiper/swiper-bundle.min.js' %}"></script>
+    <script src="{% static 'vendors/flatpickr/flatpickr.min.js' %}"></script>
 <script>
 
 
@@ -104,7 +106,7 @@
 
     {% endfor %}
 {% endif %}
-const Toast = Swal.mixin({
+/*const Toast = Swal.mixin({
     toast: true,
     position: "top-end",
     showConfirmButton: false,
@@ -114,7 +116,7 @@ const Toast = Swal.mixin({
         toast.onmouseenter = Swal.stopTimer;
         toast.onmouseleave = Swal.resumeTimer;
         }
-    });
+    });*/
 function notify(tag,msg){
         Toast.fire({
             icon: tag,
diff --git a/templates/customers/customer_list.html b/templates/customers/customer_list.html
index d7fd80fd..c4b631dc 100644
--- a/templates/customers/customer_list.html
+++ b/templates/customers/customer_list.html
@@ -5,7 +5,6 @@
 {% block vendors %}<a class="nav-link active">{{ _("Customers")|capfirst }}</a>{% endblock %}
 
 {% block content %}
-<section class="pt-5 pb-9">
         <div class="container">
           <h2 class="mb-4">{{ _("Customers")|capfirst }}</h2>
             <div class="row g-3 justify-content-between mb-4">
@@ -186,6 +185,6 @@
   {% endif %}
 </div>
     </div>
-</section>
+
 
 {% endblock %}
\ No newline at end of file
diff --git a/templates/dealers/.DS_Store b/templates/dealers/.DS_Store
index 7052739f..c1a64bb3 100644
Binary files a/templates/dealers/.DS_Store and b/templates/dealers/.DS_Store differ
diff --git a/templates/dealers/dealer_detail.html b/templates/dealers/dealer_detail.html
index 2879c6e8..05c95c16 100644
--- a/templates/dealers/dealer_detail.html
+++ b/templates/dealers/dealer_detail.html
@@ -56,7 +56,7 @@
                     </div>
                     <div class="text-end">
                       <h6 class="mb-2 text-body-secondary">{% trans 'Total users'|capfirst %}</h6>
-                      <h4 class="fs-7 text-body-highlight mb-0">{{ dealer.total_count }} / {{ dealer.get_active_plan.max_users }}</h4>
+                      <h4 class="fs-7 text-body-highlight mb-0">{{ dealer.total_count }} / {{ dealer.get_active_plan.plan.max_users }}</h4>
                     </div>
                     <div class="text-end">
                       <h6 class="mb-2 text-body-secondary">{% trans 'Subscription' %}</h6>
@@ -123,11 +123,11 @@
                                 <div class="d-flex justify-content-between">
                                   <div class="mb-5 mb-md-0 mb-lg-5 me-3">
                                     <div class="d-sm-flex d-md-block d-lg-flex align-items-center mb-3">
-                                      <h3 class="mb-0">{{ dealer.get_active_plan.plan|capfirst }}</h3><span class="badge ms-sm-3 ms-md-0 ms-lg-3 fs-10 text-bg-warning">{% trans 'most valuable'|upper %}</span>
+                                      <h3 class="mb-0">{{ dealer.get_active_plan.plan.name|capfirst }}</h3><span class="badge ms-sm-3 ms-md-0 ms-lg-3 fs-10 text-bg-warning">{% trans 'most valuable'|upper %}</span>
                                     </div>
                                     <p class="fs-9 text-body-tertiary">{% trans 'Active until' %}: {{ dealer.get_active_plan.end_date|date}}</p>
                                     <div class="d-flex align-items-end mb-md-5 mb-lg-0">
-                                      <h4 class="fw-bolder me-1">{{ dealer.get_plan.price }} {% trans 'SAR' %}</h4>
+                                      <h4 class="fw-bolder me-1">{{ dealer.get_active_plan.plan.price|floatformat }} {% trans 'SAR' %}</h4>
                                       <h5 class="fs-9 fw-normal text-body-tertiary ms-1">Per month</h5>
                                     </div>
                                   </div><img class="d-dark-none" src="{% static 'images/spot-illustrations/star.png' %}" width="54" height="54" alt="" /><img class="d-light-none" src="{% static 'images/spot-illustrations/star-dark.png' %}" width="54" height="54" alt="" />
@@ -136,7 +136,7 @@
                                   <div class="col-sm-8 col-md-12">
                                     <div class="d-sm-flex d-md-block d-lg-flex justify-content-end align-items-end h-100">
                                       <div class="list-unstyled mb-0 border-start-sm border-start-md-0 border-start-lg ps-sm-5 ps-md-0 ps-lg-5 border-warning-subtle">
-                                          <div class="d-flex align-items-center"><span class="uil uil-check-circle text-success me-2"></span><span class="text-body-tertiary fw-semibold">{{ dealer.get_plan.description}}</span></div>
+                                          <div class="d-flex align-items-center"><span class="uil uil-check-circle text-success me-2"></span><span class="text-body-tertiary fw-semibold">{{ dealer.get_active_plan.plan.description}}</span></div>
                                       </div>
                                     </div>
                                   </div>
diff --git a/templates/inventory/car_detail.html b/templates/inventory/car_detail.html
index 1ebc4f91..14661cc3 100644
--- a/templates/inventory/car_detail.html
+++ b/templates/inventory/car_detail.html
@@ -4,15 +4,7 @@
 
 {% block content %}
 
-<style>
-  .color-circle {
-    width: 32px;
-    height: 32px;
-    border-radius: 50px;
-    border-style: solid;
-    border-color: #fff;
-  }
-</style>
+
 
 <!-- Main Container -->
 <div class="container-fluid">
@@ -196,7 +188,7 @@
                   <span>{{ color.exterior.get_local_name }}</span>
                 </td>
                 <td class="align-middle">
-                  <div class="text-end color-circle" style="background-color: rgb({{ color.exterior.rgb }});"></div>
+                  <div class="text-end color-div" style="background-color: rgb({{ color.exterior.rgb }});"></div>
                 </td>
               </tr>
               <tr>
@@ -205,10 +197,11 @@
                   <span>{{ color.interior.get_local_name }}</span>
                 </td>
                 <td class="align-middle">
-                  <div class="text-end color-circle" style="background-color: rgb({{ color.interior.rgb }});"></div>
+                  <div class="text-end color-div" style="background-color: rgb({{ color.interior.rgb }});"></div>
                 </td>
               </tr>
-              {% endfor %} {% else %}
+              {% endfor %}
+              {% else %}
               <tr>
                 <td colspan="2">
                   {% trans "No colors available for this car." %}
diff --git a/templates/inventory/car_form.html b/templates/inventory/car_form.html
index 09ce6a8d..7c9994c5 100644
--- a/templates/inventory/car_form.html
+++ b/templates/inventory/car_form.html
@@ -1,642 +1,587 @@
-{% extends "base.html" %}
-{% load i18n static custom_filters %}
-
-{% block content %}
+{% extends "base.html" %} {% load i18n static custom_filters %} {% block content %}
 <style>
-#video {
+  #video {
     width: 100%;
     max-width: 480px;
     height: auto;
     margin: 0 auto;
-}
-.modal-dialog {
+  }
+  .modal-dialog {
     max-width: 95%;
-}
-
+  }
 </style>
 {% include 'partials/form_errors.html' %}
-    
+
 <!-- JavaScript Section -->
 <script src="https://unpkg.com/@zxing/library@latest"></script>
-<script src='https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js'></script>
-
+<script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>
 
 <div class="container-lg">
-
-    <!-- Specification Modal -->
-    <div class="modal fade" id="specificationsModal"
-         tabindex="-1"
-         aria-labelledby="specificationsModalLabel">
-        <div class="modal-dialog modal-lg modal-dialog-scrollable">
-            <div class="modal-content rounded-top-2">
-                <div class="modal-header">
-                    <h5 class="modal-title"
-                        id="specificationsModalLabel">
-                        {% trans 'specifications'|capfirst %}
-                    </h5>
+  <form method="post" id="carForm" class="form needs-validation" novalidate>
+    {% csrf_token %}
+    <div class="d-flex flex-column min-vh-100">
+      <div class="d-flex flex-column flex-sm-grow-1 ms-sm-14 p-4">
+        <main class="d-grid gap-4 p-1">
+          <div class="row g-4">
+            <!-- VIN -->
+            <div class="col-lg-12 col-xl-12">
+              <div class="card h-100 border-1 rounded shadow">
+                <div class="card-body">
+                  <label class="form-label" for="{{ form.vin.id_for_label }}">
+                    {% trans 'VIN' %}:
+                  </label>
+                  <div class="input-group input-group-sm">
                     <button type="button"
-                            class="btn-close"
-                            data-bs-dismiss="modal"
-                            aria-label="{% trans 'Close' %}">
+                            class="btn btn-phoenix-warning fs-8 rounded-start"
+                            id="scan-vin-btn"
+                            data-bs-toggle="modal"
+                            data-bs-target="#scannerModal">
+                      <span class="fas fa-camera"></span>
                     </button>
+                    <input type="text"
+                           class="form-control form-control-sm"
+                           id="{{ form.vin.id_for_label }}" name="{{ form.vin.html_name }}" />
+                    <button type="button" class="btn btn-sm btn-phoenix-primary rounded-end" id="decodeVinBtn">
+                      {% trans 'Search' %}
+                    </button>
+                  </div>
+                  {% if form.vin.errors %}
+                  <div class="text-danger small">
+                    {{ form.vin.errors|striptags }}
+                  </div>
+                  {% endif %}
                 </div>
-                <div class="modal-body">
-                    <div id="specificationsContent"></div>
+              </div>
+            </div>
+            <!-- Year Card -->
+            <div class="col-lg-4 col-xl-3">
+              <div class="card h-100">
+                <div class="card-body" id="year-container">
+                  <label class="form-label" for="{{ form.year.id_for_label }}">
+                    {% trans 'Year' %}:
+                  </label>
+                  <span class="text-success fw-bold" id="year-check"></span>
+                  <input type="number"
+                         class="form-control form-control-sm"
+                         id="{{ form.year.id_for_label }}"
+                         name="{{ form.year.html_name }}" />
+                  {% if form.year.errors %}
+                  <div class="text-danger small">
+                    {{ form.year.errors|striptags }}
+                  </div>
+                  {% endif %}
                 </div>
-                <div class="modal-footer">
-        <button class="btn btn-outline-primary" type="button" data-bs-dismiss="modal">{% trans 'Close' %}</button>
+              </div>
+            </div>
+            <!-- Makes Card -->
+            <div class="col-lg-4 col-xl-3">
+              <div class="card h-100">
+                <div id="make-container" class="card-body">
+                  <div class="status"></div>
+                  <label class="form-label" for="{{ form.id_car_make.id_for_label }}">
+                    {% trans 'make'|capfirst %}:
+                  </label>
+                  <span class="text-success fw-bold" id="make-check"></span>
+                  {{ form.id_car_make|add_class:"form-select form-select-sm" }} {% if form.id_car_make.errors %}
+                  <div class="text-danger small">
+                    {{ form.id_car_make.errors|striptags }}
+                  </div>
+                  {% endif %}
+                </div>
+              </div>
+            </div>
+
+            <!-- Models Card -->
+            <div class="col-lg-4 col-xl-3">
+              <div class="card h-100">
+                <div id="model-container" class="card-body">
+                  <label class="form-label" for="{{ form.id_car_model.id_for_label }}">
+                    {% trans 'model'|capfirst %}:
+                  </label>
+                  <span class="text-success fw-bold" id="model-check"></span>
+                  <select class="form-select form-select-sm"
+                          id="{{ form.id_car_model.id_for_label }}"
+                          name="{{ form.id_car_model.html_name }}">
+                    <option value="">{% trans 'Select' %}</option>
+                  </select>
+                  {% if form.id_car_model.errors %}
+                  <div class="text-danger small">
+                    {{ form.id_car_model.errors|striptags }}
+                  </div>
+                  {% endif %}
+                </div>
+              </div>
+            </div>
+
+            <!-- Series Card -->
+            <div class="col-lg-4 col-xl-3">
+              <div class="card h-100">
+                <div class="card-body" id="serie-container">
+                  <label class="form-label" for="{{ form.id_car_serie.id_for_label }}">
+                    {% trans 'Series' %}:
+                  </label>
+                  <select class="form-select form-select-sm"
+                          id="{{ form.id_car_serie.id_for_label }}"
+                          name="{{ form.id_car_serie.html_name }}">
+                    <option value="">{% trans 'Select' %}</option>
+                  </select>
+                  {% if form.id_car_serie.errors %}
+                  <div class="text-danger small">
+                    {{ form.id_car_serie.errors|striptags }}
+                  </div>
+                  {% endif %}
+                </div>
+              </div>
+            </div>
+
+            <!-- Trims Card -->
+            <div class="col-lg-4 col-xl-3">
+              <div class="card h-100">
+                <div class="card-body" id="trim-container">
+                  <label class="form-label" for="{{ form.id_car_trim.id_for_label }}">
+                    {% trans 'trim'|capfirst %}:
+                  </label>
+                  <select class="form-select form-select-sm"
+                          id="{{ form.id_car_trim.id_for_label }}"
+                          name="{{ form.id_car_trim.html_name }}">
+                    <option value="">{% trans 'Select' %}</option>
+                  </select>
+                  {% if form.id_car_trim.errors %}
+                  <div class="text-danger small">
+                    {{ form.id_car_trim.errors|striptags }}
+                  </div>
+                  {% endif %}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row g-4">
+            <!-- Vendor Field -->
+            <div class="col-lg-4 col-xl-3">
+              <div class="card h-100">
+                <div class="card-body">
+                  <div class="form-group">
+                    <label for="{{ form.vendor.id_for_label }}" class="form-label">
+                      {% trans 'Vendor' %}:
+                    </label>
+                    {{ form.vendor|add_class:"form-select form-select-sm" }}
+                  </div>
+                  {% if form.vendor.errors %}
+                  <div class="text-danger small">
+                    {{ form.vendor.errors|striptags }}
+                  </div>
+                  {% endif %}
+                </div>
+              </div>
+            </div>
+            <!-- Stock Type Card -->
+            <div class="col-lg-4 col-xl-3">
+              <div class="card h-100">
+                <div class="card-body">
+                  <label class="form-label" for="{{ form.stock_type.id_for_label }}">
+                    {% trans 'Stock Type'|capfirst %}:
+                  </label>
+                  {{ form.stock_type|add_class:"form-select form-select-sm" }} {% if form.stock_type.errors %}
+                  <div class="text-danger small">
+                    {{ form.stock_type.errors|striptags }}
+                  </div>
+                  {% endif %}
+                </div>
+              </div>
+            </div>
+            <!-- Mileage Card -->
+            <div class="col-lg-4 col-xl-3">
+              <div class="card h-100">
+                <div class="card-body">
+                  <label class="form-label" for="{{ form.mileage.id_for_label }}">
+                    {% trans 'Mileage'|capfirst %}:
+                  </label>
+                  {{ form.mileage|add_class:"form-control form-control-sm" }} {% if form.mileage.errors %}
+                  <div class="text-danger small">
+                    {{ form.mileage.errors|striptags }}
+                  </div>
+                  {% endif %}
+                </div>
+              </div>
+            </div>
+            <!-- Receiving Date Field -->
+            <div class="col-lg-4 col-xl-3">
+              <div class="card h-100">
+                <div class="card-body">
+                  <div class="form-group">
+                    <label for="{{ form.receiving_date.id_for_label }}" class="form-label">
+                      {% trans 'Receiving Date' %}:
+                    </label>
+                    <input
+                      class="form-control form-control-sm datetimepicker flatpickr-input"
+                      id="{{ form.receiving_date.id_for_label }}"
+                      type="text"
+                      placeholder="dd/mm/yyyy hour : minute"
+                      data-options='{"enableTime":true,"dateFormat":"d/m/y H:i","disableMobile":false}'
+                      readonly="readonly"
+                    />
+                    {% if form.receiving_date.errors %}
+                    <div class="text-danger small">
+                      {{ form.receiving_date.errors|striptags }}
+                    </div>
+                    {% endif %}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- Remarks Card -->
+            <div class="col-lg-4 col-xl-3">
+              <div class="card h-100">
+                <div class="card-body">
+                  <label class="label" for="{{ form.remarks.id_for_label }}">
+                    {% trans 'Remarks'|capfirst %}:
+                  </label>
+                  {{ form.remarks|add_class:"form-control form-control-sm" }} {% if form.remarks.errors %}
+                  <div class="text-danger small">
+                    {{ form.remarks.errors|striptags }}
+                  </div>
+                  {% endif %}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Specifications Buttons -->
+          <div class="row g-1">
+            <div class="btn-group">
+              <button type="button"
+                      class="btn btn-sm btn-danger me-1"
+                      id="specification-btn"
+                      data-bs-toggle="modal"
+                      data-bs-target="#specificationsModal"
+                      disabled>{% trans 'specifications'|capfirst %}
+              </button>
+              <!--<div class="form-group">-->
+              <button type="submit" name="add_another" value="true" class="btn btn-sm btn-success me-1">
+                {% trans "Save and Add Another" %}
+              </button>
+              <button type="submit" name="go_to_stats" value="true" class="btn btn-sm btn-primary">
+                {% trans "Save and Go to Inventory" %}
+              </button>
+              <!--</div>-->
+            </div>
+          </div>
+        </main>
       </div>
-            </div>
-        </div>
     </div>
+  </form>
+  <!-- Specification Modal -->
+  <div class="modal fade" id="specificationsModal" tabindex="-1" aria-labelledby="specificationsModalLabel">
+    <div class="modal-dialog modal-lg modal-dialog-scrollable">
+      <div class="modal-content rounded-top-2">
+        <div class="modal-header">
+          <h5 class="modal-title" id="specificationsModalLabel">
+            {% trans 'specifications'|capfirst %}
+          </h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
+        </div>
+        <div class="modal-body">
+          <div id="specificationsContent"></div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-outline-primary" type="button" data-bs-dismiss="modal">{% trans 'Close' %}</button>
+        </div>
+      </div>
+    </div>
+  </div>
 
-<!-- Scanner Modal -->
-    <div class="modal fade" id="scannerModal" tabindex="-1" aria-labelledby="scannerModalLabel">
+  <!-- Scanner Modal -->
+  <div class="modal fade" id="scannerModal" tabindex="-1" aria-labelledby="scannerModalLabel">
     <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content rounded-top-3">
-            <div class="modal-header rounded-top-3 shadow">
-                <h5 class="modal-title" id="scannerModalLabel">{{ _("scanner") }}</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ _('Close') }}"></button>
-            </div>
-            <div class="modal-body text-center">
-                <video id="video" autoplay playsinline></video>
-                <p id="result" class="mt-2">{{ _("VIN will appear here.") }}</p>
-                <button id="ocr-fallback-btn" class="btn btn-primary mt-3">{{ _("Use OCR Fallback") }}</button>
-            </div>
+      <div class="modal-content rounded-top-3">
+        <div class="modal-header rounded-top-3 shadow">
+          <h5 class="modal-title" id="scannerModalLabel">{{ _("scanner") }}</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ _('Close') }}"></button>
         </div>
+        <div class="modal-body text-center">
+          <video id="video" autoplay playsinline></video>
+          <p id="result" class="mt-2">{{ _("VIN will appear here.") }}</p>
+          <button id="ocr-fallback-btn" class="btn btn-primary mt-3">{{ _("Use OCR Fallback") }}</button>
+        </div>
+      </div>
     </div>
+  </div>
+  <!-- CAR FORM -->
 </div>
-    <!-- CAR FORM -->
 
-    <form method="post" id="carForm" class="form needs-validation" novalidate>
-        {% csrf_token %}
-        <div class="d-flex flex-column min-vh-100">
-            <div class="d-flex flex-column flex-sm-grow-1 ms-sm-14 p-4">
-                <main class="d-grid gap-4 p-1">
-                    <div class="row g-4">
-
-                        <!-- VIN -->
-                        <div class="col-lg-12 col-xl-12">
-                            <div class="card h-100 border-1 rounded shadow">
-                                <div class="card-body">
-                                <label class="form-label"
-                                       for="{{ form.vin.id_for_label }}">
-                                    {% trans 'VIN' %}:
-                                </label>
-                                    <div class="input-group input-group-sm">
-                                        <button type="button"
-                                                class="btn btn-warning fs-6 rounded-start"
-                                                id="scan-vin-btn"
-                                                data-bs-toggle="modal"
-                                                data-bs-target="#scannerModal">
-                                            <span class="fa-solid fa-camera"></span>
-                                        </button>
-                                        <input type="text"
-                                           class="form-control form-control-sm"
-                                           id="{{ form.vin.id_for_label }}"
-                                           name="{{ form.vin.html_name }}">
-                                        <button type="button"
-                                                class="btn btn-sm btn-primary rounded-end"
-                                                id="decodeVinBtn">
-                                            {% trans 'Search' %}
-                                        </button>
-                                    </div>
-                                    {% if form.vin.errors %}
-                                        <div class="text-danger small">
-                                            {{ form.vin.errors|striptags }}
-                                        </div>
-                                    {% endif %}
-                                </div>
-                            </div>
-                        </div>
-                        <!-- Year Card -->
-                        <div class="col-lg-4 col-xl-3">
-                            <div class="card h-100 border-1 rounded shadow">
-                                <div class="card-body" id="year-container">
-
-                                    <label class="form-label"
-                                           for="{{ form.year.id_for_label }}">
-                                        {% trans 'Year' %}:
-                                    </label>
-                                <span class="text-success fw-bold" id="year-check"></span>
-                                    <input type="number"
-                                           class="form-control form-control-sm"
-                                           id="{{ form.year.id_for_label }}"
-                                           name="{{ form.year.html_name }}">
-                                    {% if form.year.errors %}
-                                        <div class="text-danger small">
-                                            {{ form.year.errors|striptags }}
-                                        </div>
-                                    {% endif %}
-                                </div>
-                            </div>
-                        </div>
-                        <!-- Makes Card -->
-                        <div class="col-lg-4 col-xl-3">
-                            <div class="card h-100 border-1 rounded shadow">
-                                <div id="make-container" class="card-body">
-                                <div class="status"></div>
-                                    <label class="form-label"
-                                           for="{{ form.id_car_make.id_for_label }}">
-                                        {% trans 'make'|capfirst %}:
-                                    </label>
-                                <span class="text-success fw-bold" id="make-check"></span>
-                                 {{ form.id_car_make|add_class:"form-select form-select-sm" }}
-                                    {% if form.id_car_make.errors %}
-                                        <div class="text-danger small">
-                                            {{ form.id_car_make.errors|striptags }}
-                                        </div>
-                                    {% endif %}
-                                </div>
-                            </div>
-                        </div>
-                    
-                        <!-- Models Card -->
-                        <div class="col-lg-4 col-xl-3">
-                            <div class="card h-100 border-1 rounded shadow">
-                                <div id="model-container" class="card-body">
-                                    <label class="form-label"
-                                           for="{{ form.id_car_model.id_for_label }}">
-                                        {% trans 'model'|capfirst %}:
-                                    </label>
-                                <span class="text-success fw-bold" id="model-check"></span>
-                                    <select class="form-select form-select-sm"
-                                            id="{{ form.id_car_model.id_for_label }}"
-                                            name="{{ form.id_car_model.html_name }}">
-                                        <option value="">{% trans 'Select' %}</option>
-                                    </select>
-                                    {% if form.id_car_model.errors %}
-                                        <div class="text-danger small">
-                                            {{ form.id_car_model.errors|striptags }}
-                                        </div>
-                                    {% endif %}
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Series Card -->
-                        <div class="col-lg-4 col-xl-3">
-                            <div class="card h-100 border-1 rounded shadow">
-                                <div class="card-body" id="serie-container">
-                                    <label class="form-label"
-                                           for="{{ form.id_car_serie.id_for_label }}">
-                                        {% trans 'Series' %}:
-                                    </label>
-                                    <select class="form-select form-select-sm"
-                                            id="{{ form.id_car_serie.id_for_label }}"
-                                            name="{{ form.id_car_serie.html_name }}">
-                                        <option value="">{% trans 'Select' %}</option>
-                                    </select>
-                                    {% if form.id_car_serie.errors %}
-                                        <div class="text-danger small">
-                                            {{ form.id_car_serie.errors|striptags }}
-                                        </div>
-                                    {% endif %}
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Trims Card -->
-                        <div class="col-lg-4 col-xl-3">
-                            <div class="card h-100 border-1 rounded shadow">
-                                <div class="card-body" id="trim-container">
-                                    <label class="form-label"
-                                           for="{{ form.id_car_trim.id_for_label }}">
-                                        {% trans 'trim'|capfirst %}:
-                                    </label>
-                                    <select class="form-select form-select-sm"
-                                            id="{{ form.id_car_trim.id_for_label }}"
-                                            name="{{ form.id_car_trim.html_name }}">
-                                        <option value="">{% trans 'Select' %}</option>
-                                    </select>
-                                    {% if form.id_car_trim.errors %}
-                                        <div class="text-danger small">
-                                            {{ form.id_car_trim.errors|striptags }}
-                                        </div>
-                                    {% endif %}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row g-4">
-
-                        
-                        <!-- Vendor Field -->
-                        <div class="col-lg-4 col-xl-3">
-                            <div class="card h-100 border-1 rounded shadow">
-                                <div class="card-body">
-                                    <div class="form-group">
-                                        <label for="{{ form.vendor.id_for_label }}"
-                                               class="form-label">
-                                            {% trans 'Vendor' %}:
-                                        </label>
-                                        {{ form.vendor|add_class:"form-select form-select-sm" }}
-                                    </div>
-                                    {% if form.vendor.errors %}
-                                        <div class="text-danger small">
-                                            {{ form.vendor.errors|striptags }}
-                                        </div>
-                                    {% endif %}
-                                </div>
-                            </div>
-                        </div>
-                        <!-- Stock Type Card -->
-                        <div class="col-lg-4 col-xl-3">
-                            <div class="card h-100 border-1 rounded shadow">
-                                <div class="card-body">
-                                    <label class="form-label"
-                                           for="{{ form.stock_type.id_for_label }}">
-                                        {% trans 'Stock Type'|capfirst %}:
-                                    </label>
-                                    {{ form.stock_type|add_class:"form-select form-select-sm" }}
-                                    {% if form.stock_type.errors %}
-                                        <div class="text-danger small">
-                                            {{ form.stock_type.errors|striptags }}
-                                        </div>
-                                    {% endif %}
-                                </div>
-                            </div>
-                        </div>
-                        <!-- Mileage Card -->
-                        <div class="col-lg-4 col-xl-3">
-                            <div class="card h-100 border-1 rounded shadow">
-                                <div class="card-body">
-                                    <label class="form-label"
-                                           for="{{ form.mileage.id_for_label }}">
-                                        {% trans 'Mileage'|capfirst %}:
-                                    </label>
-                                    {{ form.mileage|add_class:"form-control form-control-sm" }}
-                                    {% if form.mileage.errors %}
-                                        <div class="text-danger small">
-                                            {{ form.mileage.errors|striptags }}
-                                        </div>
-                                    {% endif %}
-                                </div>
-                            </div>
-                        </div>
-                        <!-- Receiving Date Field -->
-                        <div class="col-lg-4 col-xl-3">
-                            <div class="card h-100 border-1 rounded shadow">
-                                <div class="card-body">
-                                    <div class="form-group">
-                                        <label for="{{ form.receiving_date.id_for_label }}"
-                                               class="form-label">
-                                            {% trans 'Receiving Date' %}:
-                                        </label>
-                                        {{ form.receiving_date|add_class:"form-control form-control-sm" }}
-                                        {% if form.receiving_date.errors %}
-                                        <div class="text-danger small">
-                                            {{ form.receiving_date.errors|striptags }}
-                                        </div>
-                                    {% endif %}
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <!-- Remarks Card -->
-                        <div class="col-lg-4 col-xl-3">
-                            <div class="card h-100 border-1 rounded shadow">
-                                <div class="card-body">
-                                    <label class="label" 
-                                           for="{{ form.remarks.id_for_label }}">
-                                        {% trans 'Remarks'|capfirst %}:
-                                    </label>
-                                    {{ form.remarks|add_class:"form-control form-control-sm" }}
-                                      {% if form.remarks.errors %}
-                                        <div class="text-danger small">
-                                            {{ form.remarks.errors|striptags }}
-                                        </div>
-                                    {% endif %}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                        <!-- Specifications Buttons -->
-                        <div class="row g-1">
-                            <div class="btn-group">
-                                <button type="button"
-                                    class="btn btn-sm btn-danger me-1"
-                                    id="specification-btn"
-                                    data-bs-toggle="modal"
-                                    data-bs-target="#specificationsModal"
-                                    disabled>{% trans 'specifications'|capfirst %}
-                            </button>
-                            <!--<div class="form-group">-->
-                                <button type="submit"
-                                        name="add_another"
-                                        value="true"
-                                        class="btn btn-sm btn-success me-1">
-                                {% trans "Save and Add Another" %}
-                                </button>
-                                <button type="submit"
-                                        name="go_to_stats"
-                                        value="true"
-                                        class="btn btn-sm btn-primary">
-                                {% trans "Save and Go to Inventory" %}
-                                </button>
-                            <!--</div>-->
-                            </div>
-                        </div>
-                </main>
-            </div>
-        </div>
-    </form>
-</div>
-    
 <script>
-function getCookie(name) {
+  function getCookie(name) {
     let cookieValue = null;
-    if (document.cookie && document.cookie !== '') {
-        const cookies = document.cookie.split(';');
-        for (let cookie of cookies) {
-            cookie = cookie.trim();
-            if (cookie.substring(0, name.length + 1) === (name + '=')) {
-                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                break;
-            }
+    if (document.cookie && document.cookie !== "") {
+      const cookies = document.cookie.split(";");
+      for (let cookie of cookies) {
+        cookie = cookie.trim();
+        if (cookie.substring(0, name.length + 1) === name + "=") {
+          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+          break;
         }
+      }
     }
     return cookieValue;
-}
+  }
 
-document.addEventListener("DOMContentLoaded", function() {
+  document.addEventListener("DOMContentLoaded", function () {
+    const csrfToken = getCookie("token");
 
-
-    const csrfToken = getCookie('token');
-
-    const vinInput = document.getElementById('{{ form.vin.id_for_label }}');
-    const stockTypeSelect = document.getElementById('{{ form.stock_type.id_for_label }}');
-    const mileageInput = document.getElementById('{{ form.mileage.id_for_label }}');
-    const remarksInput = document.getElementById('{{ form.remarks.id_for_label }}');
-    const decodeVinBtn = document.getElementById('decodeVinBtn');
-    const makeSelect = document.getElementById('{{ form.id_car_make.id_for_label }}');
-    const modelSelect = document.getElementById('{{ form.id_car_model.id_for_label }}');
-    const yearSelect = document.getElementById('{{ form.year.id_for_label }}');
-    const serieSelect = document.getElementById('{{ form.id_car_serie.id_for_label }}');
-    const trimSelect = document.getElementById('{{ form.id_car_trim.id_for_label }}');
-    const showSpecificationButton = document.getElementById('specification-btn');
-    const specificationsContent = document.getElementById('specificationsContent');
-    const makeBg = document.getElementById('make-container');
-    const modelBg = document.getElementById('model-container');
-    const yearBg = document.getElementById('year-container');
-    const serieBg = document.getElementById('serie-container');
-    const trimBg = document.getElementById('trim-container');
-    /*const saveCarBtn = document.getElementById('saveCarBtn');*/
+    const vinInput = document.getElementById("{{ form.vin.id_for_label }}");
+    const decodeVinBtn = document.getElementById("decodeVinBtn");
+    const makeSelect = document.getElementById("{{ form.id_car_make.id_for_label }}");
+    const modelSelect = document.getElementById("{{ form.id_car_model.id_for_label }}");
+    const yearSelect = document.getElementById("{{ form.year.id_for_label }}");
+    const serieSelect = document.getElementById("{{ form.id_car_serie.id_for_label }}");
+    const trimSelect = document.getElementById("{{ form.id_car_trim.id_for_label }}");
+    const showSpecificationButton = document.getElementById("specification-btn");
+    const specificationsContent = document.getElementById("specificationsContent");
 
     const ajaxUrl = "{% url 'ajax_handler' %}";
 
     const closeButton = document.querySelector(".btn-close");
     const scanVinBtn = document.getElementById("scan-vin-btn");
-    const videoElement = document.getElementById('video');
-    const resultDisplay = document.getElementById('result');
-    const fallbackButton = document.getElementById('ocr-fallback-btn');
+    const videoElement = document.getElementById("video");
+    const resultDisplay = document.getElementById("result");
+    const fallbackButton = document.getElementById("ocr-fallback-btn");
     let codeReader;
     codeReader = new ZXing.BrowserMultiFormatReader();
     let currentStream = null;
 
-function closeModal(){
-    stopScanner();
-    try {
+    function closeModal() {
+      stopScanner();
+      try {
         const scannerModal = document.getElementById("scannerModal");
         if (scannerModal) {
-            document.activeElement.blur();
-            scannerModal.setAttribute("inert", "true");
-            const modalInstance = bootstrap.Modal.getInstance(scannerModal);
-            if (modalInstance) modalInstance.hide();
-            if (scanVinBtn) scanVinBtn.focus();
+          document.activeElement.blur();
+          scannerModal.setAttribute("inert", "true");
+          const modalInstance = bootstrap.Modal.getInstance(scannerModal);
+          if (modalInstance) modalInstance.hide();
+          if (scanVinBtn) scanVinBtn.focus();
         }
-    } catch (err) {
+      } catch (err) {
         console.error("Error closing scanner modal:", err);
+      }
     }
-}
 
-async function decodeVin() {
-    const vinNumber = vinInput.value.trim();
-        if (vinNumber.length !== 17) {
-            notify("error","{% trans 'Please enter a valid VIN.' %}");
-            /*alert("{% trans 'Please enter a valid VIN.' %}");*/
-            return;
+    async function decodeVin() {
+      const vinNumber = vinInput.value.trim();
+      if (vinNumber.length !== 17) {
+        notify("error", "{% trans 'Please enter a valid VIN.' %}");
+        /*alert("{% trans 'Please enter a valid VIN.' %}");*/
+        return;
+      }
+      showLoading();
+      try {
+        const response = await fetch(`${ajaxUrl}?action=decode_vin&vin_no=${vinNumber}`, {
+          headers: {
+            "X-Requested-With": "XMLHttpRequest",
+            "X-CSRFToken": csrfToken,
+          },
+        });
+        const data = await response.json();
+        if (data.success) {
+          hideLoading();
+          await updateFields(data.data);
+        } else {
+          hideLoading();
+          notify("error", data.error);
         }
-        showLoading();
-        try {
-            const response = await fetch(`${ajaxUrl}?action=decode_vin&vin_no=${vinNumber}`, {
-                headers: {
-                    'X-Requested-With': 'XMLHttpRequest',
-                    'X-CSRFToken': csrfToken
-                }
-            });
-            const data = await response.json();
-            if (data.success) {
-                hideLoading();
-                await updateFields(data.data);
-            } else {
-                hideLoading();
-                notify("error",data.error)
-               /* alert(data.error || "{% trans 'Failed to decode VIN.' %}");*/
-            }
-        } catch (error) {
-            console.error("Error decoding VIN:", error);
-            hideLoading();
-            notify("error","{% trans 'An error occurred while decoding the VIN.' %}")
-            /*alert("{% trans 'An error occurred while decoding the VIN.' %}");*/
-        }
-}
+      } catch (error) {
+        console.error("Error decoding VIN:", error);
+        hideLoading();
+        notify("error", "{% trans 'An error occurred while decoding the VIN.' %}");
+      }
+    }
 
-async function updateFields(vinData) {
-    console.log(vinData)
-    if (vinData.make_id) {
+    async function updateFields(vinData) {
+      console.log(vinData);
+      if (vinData.make_id) {
         makeSelect.value = vinData.make_id;
-        document.getElementById("make-check").innerHTML = '&#10003;';
+        document.getElementById("make-check").innerHTML = "&#10003;";
         await loadModels(vinData.make_id);
-    }
-    if (vinData.model_id) {
+      }
+      if (vinData.model_id) {
         modelSelect.value = vinData.model_id;
-        document.getElementById("model-check").innerHTML = '&#10003;';
+        document.getElementById("model-check").innerHTML = "&#10003;";
         await loadSeries(vinData.model_id, vinData.year);
-    }
-    if (vinData.year) {
+      }
+      if (vinData.year) {
         yearSelect.value = vinData.year;
-        document.getElementById("year-check").innerHTML = '&#10003;';
+        document.getElementById("year-check").innerHTML = "&#10003;";
+      }
     }
-    /*checkFormCompletion();*/
-}
 
     // Start the scanner
-async function startScanner() {
-    codeReader.decodeFromVideoDevice(null, videoElement, async(result, err) => {
-        let res = await result
-            if (result) {
-                vinInput.value = result.text;
-                closeModal();
-                await decodeVin();
-            }
-        }).catch(console.error);
-}
+    async function startScanner() {
+      codeReader
+        .decodeFromVideoDevice(null, videoElement, async (result, err) => {
+          let res = await result;
+          if (result) {
+            vinInput.value = result.text;
+            closeModal();
+            await decodeVin();
+          }
+        })
+        .catch(console.error);
+    }
 
-function captureAndOCR() {
-    const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        canvas.width = videoElement.videoWidth;
-        canvas.height = videoElement.videoHeight;
-        context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
-        Tesseract.recognize(canvas.toDataURL('image/png'), 'eng')
-            .then(({ data: { text } }) => {
-                const vin = text.match(/[A-HJ-NPR-Z0-9]{17}/);
-                if (vin) vinInput.value = vin[0];
-                closeModal();
-                decodeVin();
-            })
-            .catch((err) => console.error("OCR Error:", err));
-}
+    function captureAndOCR() {
+      const canvas = document.createElement("canvas");
+      const context = canvas.getContext("2d");
+      canvas.width = videoElement.videoWidth;
+      canvas.height = videoElement.videoHeight;
+      context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
+      Tesseract.recognize(canvas.toDataURL("image/png"), "eng")
+        .then(({ data: { text } }) => {
+          const vin = text.match(/[A-HJ-NPR-Z0-9]{17}/);
+          if (vin) vinInput.value = vin[0];
+          closeModal();
+          decodeVin();
+        })
+        .catch((err) => console.error("OCR Error:", err));
+    }
 
-function stopScanner() {
-    if (currentStream) {
+    function stopScanner() {
+      if (currentStream) {
         currentStream.getTracks().forEach((track) => track.stop());
         currentStream = null;
+      }
+      codeReader.reset();
     }
-    codeReader.reset();
-}
 
-function resetDropdown(dropdown, placeholder) {
-    dropdown.innerHTML = `<option value="">${placeholder}</option>`;
-}
-/*
-function checkFormCompletion() {
-    const isFormComplete = vinInput.value.length === 17 && stockTypeSelect.value;
-    saveCarBtn.disabled = !isFormComplete;
-}
-*/
-async function loadModels(makeId) {
-    resetDropdown(modelSelect, '{% trans "Select" %}');
-    const response = await fetch(`${ajaxUrl}?action=get_models&make_id=${makeId}`, {
+    function resetDropdown(dropdown, placeholder) {
+      dropdown.innerHTML = `<option value="">${placeholder}</option>`;
+    }
+
+    async function loadModels(makeId) {
+      resetDropdown(modelSelect, '{% trans "Select" %}');
+      const response = await fetch(`${ajaxUrl}?action=get_models&make_id=${makeId}`, {
         headers: {
-            'X-Requested-With': 'XMLHttpRequest',
-            'X-CSRFToken': csrfToken
-        }
-    });
-    const data = await response.json();
-    data.forEach((model) => {
-            const option = document.createElement('option');
-            option.value = model.id_car_model;
-            option.textContent = document.documentElement.lang === 'en' ? model.name : model.arabic_name;
-            modelSelect.appendChild(option);
-        });
-}
+          "X-Requested-With": "XMLHttpRequest",
+          "X-CSRFToken": csrfToken,
+        },
+      });
+      const data = await response.json();
+      data.forEach((model) => {
+        const option = document.createElement("option");
+        option.value = model.id_car_model;
+        option.textContent = document.documentElement.lang === "en" ? model.name : model.arabic_name;
+        modelSelect.appendChild(option);
+      });
+    }
 
-
-
-async function loadSeries(modelId, year){
-    resetDropdown(serieSelect, '{% trans "Select" %}');
-    resetDropdown(trimSelect, '{% trans "Select" %}');
-    specificationsContent.innerHTML = '';
-    const response = await fetch(`${ajaxUrl}?action=get_series&model_id=${modelId}&year=${year}`, {
+    async function loadSeries(modelId, year) {
+      resetDropdown(serieSelect, '{% trans "Select" %}');
+      resetDropdown(trimSelect, '{% trans "Select" %}');
+      specificationsContent.innerHTML = "";
+      const response = await fetch(`${ajaxUrl}?action=get_series&model_id=${modelId}&year=${year}`, {
         headers: {
-            'X-Requested-With': 'XMLHttpRequest',
-            'X-CSRFToken': csrfToken
-        }
-    });
-    const data = await response.json();
-    data.forEach((serie) => {
-            const option = document.createElement('option');
-            option.value = serie.id_car_serie;
-            option.textContent = document.documentElement.lang === 'en' ? serie.name : serie.name;
-            serieSelect.appendChild(option);
-    });
-}
+          "X-Requested-With": "XMLHttpRequest",
+          "X-CSRFToken": csrfToken,
+        },
+      });
+      const data = await response.json();
+      data.forEach((serie) => {
+        const option = document.createElement("option");
+        option.value = serie.id_car_serie;
+        option.textContent = document.documentElement.lang === "en" ? serie.name : serie.name;
+        serieSelect.appendChild(option);
+      });
+    }
 
-async function loadTrims(serie_id, model_id) {
-    resetDropdown(trimSelect, '{% trans "Select" %}');
-    specificationsContent.innerHTML = '';
-    const response = await fetch(`${ajaxUrl}?action=get_trims&serie_id=${serie_id}&model_id=${model_id}`, {
+    async function loadTrims(serie_id, model_id) {
+      resetDropdown(trimSelect, '{% trans "Select" %}');
+      specificationsContent.innerHTML = "";
+      const response = await fetch(`${ajaxUrl}?action=get_trims&serie_id=${serie_id}&model_id=${model_id}`, {
         headers: {
-            'X-Requested-With': 'XMLHttpRequest',
-            'X-CSRFToken': csrfToken
-        }
-    });
-    const data = await response.json();
-    data.forEach((trim) => {
-        const option = document.createElement('option');
+          "X-Requested-With": "XMLHttpRequest",
+          "X-CSRFToken": csrfToken,
+        },
+      });
+      const data = await response.json();
+      data.forEach((trim) => {
+        const option = document.createElement("option");
         option.value = trim.id_car_trim;
-        option.textContent = document.documentElement.lang === 'en' ? trim.name : trim.name;
+        option.textContent = document.documentElement.lang === "en" ? trim.name : trim.name;
         trimSelect.appendChild(option);
-    });
-    showSpecificationButton.disabled = !this.value;
-}
+      });
+      showSpecificationButton.disabled = !this.value;
+    }
 
-async function loadSpecifications(trimId){
-    specificationsContent.innerHTML = '';
-    const response = await fetch(`${ajaxUrl}?action=get_specifications&trim_id=${trimId}`, {
+    async function loadSpecifications(trimId) {
+      specificationsContent.innerHTML = "";
+      const response = await fetch(`${ajaxUrl}?action=get_specifications&trim_id=${trimId}`, {
         headers: {
-            'X-Requested-With': 'XMLHttpRequest',
-            'X-CSRFToken': csrfToken
-        }
-    });
-    const data = await response.json();
-        data.forEach((spec) => {
-        const parentDiv = document.createElement('div');
+          "X-Requested-With": "XMLHttpRequest",
+          "X-CSRFToken": csrfToken,
+        },
+      });
+      const data = await response.json();
+      data.forEach((spec) => {
+        const parentDiv = document.createElement("div");
         parentDiv.innerHTML = `<strong>${spec.parent_name}</strong>`;
         spec.specifications.forEach((s) => {
-            const specDiv = document.createElement('div');
-            specDiv.innerHTML = `• ${s.s_name}: ${s.s_value} ${s.s_unit}`;
-            parentDiv.appendChild(specDiv);
+          const specDiv = document.createElement("div");
+          specDiv.innerHTML = `• ${s.s_name}: ${s.s_value} ${s.s_unit}`;
+          parentDiv.appendChild(specDiv);
         });
         specificationsContent.appendChild(parentDiv);
-    });
-}
-
-    scanVinBtn.addEventListener('click', () => {
-        resultDisplay.textContent = "";
-        startScanner();
-    });
-
-    fallbackButton.addEventListener('click', () => {
-        captureAndOCR();
-    });
-
-    serieSelect.addEventListener('change', () => {
-        const serie_id = serieSelect.value;
-        const model_id = modelSelect.value;
-        if (serie_id && model_id) loadTrims(serie_id, model_id);
-    });
-
-    trimSelect.addEventListener('change', () => {
-        const trimId = trimSelect.value;
-        showSpecificationButton.disabled = !trimId;
-        if (trimId) loadSpecifications(trimId);
-    });
-
-    closeButton.addEventListener('click', closeModal);
-    /*stockTypeSelect.addEventListener('change', checkFormCompletion);
-    mileageInput.addEventListener('input', checkFormCompletion);
-    remarksInput.addEventListener('input', checkFormCompletion);*/
-    makeSelect.addEventListener("change", (e) => {loadModels(e.target.value, modelSelect.value)})
-    modelSelect.addEventListener("change", (e) => {loadSeries(e.target.value, yearSelect.value)})
-    decodeVinBtn.addEventListener('click', decodeVin);
-});
- function showLoading() {
-      Swal.fire({
-          title: "{% trans 'Please Wait' %}",
-          text: "{% trans 'Loading' %}...",
-          allowOutsideClick: false,
-          didOpen: () => {
-              Swal.showLoading();
-          }
-          });
-      }
-
-      function hideLoading() {
-          Swal.close();
-      }
-
-       function notify(tag,msg){
-        Swal.fire({
-            icon: tag,
-            titleText: msg
-        });
+      });
     }
 
+    scanVinBtn.addEventListener("click", () => {
+      resultDisplay.textContent = "";
+      startScanner();
+    });
 
+    fallbackButton.addEventListener("click", () => {
+      captureAndOCR();
+    });
+
+    serieSelect.addEventListener("change", () => {
+      const serie_id = serieSelect.value;
+      const model_id = modelSelect.value;
+      if (serie_id && model_id) loadTrims(serie_id, model_id);
+    });
+
+    trimSelect.addEventListener("change", () => {
+      const trimId = trimSelect.value;
+      showSpecificationButton.disabled = !trimId;
+      if (trimId) loadSpecifications(trimId);
+    });
+
+    closeButton.addEventListener("click", closeModal);
+    makeSelect.addEventListener("change", (e) => {
+      loadModels(e.target.value, modelSelect.value);
+    });
+    modelSelect.addEventListener("change", (e) => {
+      loadSeries(e.target.value, yearSelect.value);
+    });
+    decodeVinBtn.addEventListener("click", decodeVin);
+  });
+  function showLoading() {
+    Swal.fire({
+      title: "{% trans 'Please Wait' %}",
+      text: "{% trans 'Loading' %}...",
+      allowOutsideClick: false,
+      didOpen: () => {
+        Swal.showLoading();
+      },
+    });
+  }
+
+  function hideLoading() {
+    Swal.close();
+  }
+
+  function notify(tag, msg) {
+    Swal.fire({
+      icon: tag,
+      titleText: msg,
+    });
+  }
 </script>
 
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/inventory/car_inventory.html b/templates/inventory/car_inventory.html
index 6358027a..75cd6cac 100644
--- a/templates/inventory/car_inventory.html
+++ b/templates/inventory/car_inventory.html
@@ -25,8 +25,18 @@
                       </div>
                     </div>
                     <div class="card-body px-lg-5 position-relative">
-                      <br><br><h3 class="mb-2">{{ cars.first.id_car_make.get_local_name }}<span class="ms-2 text-body-tertiary fw-semibold">{{ cars.first.id_car_model.get_local_name }}</span></h3>
+                        <br>
+                        <div class="row align-items-center g-3 g-sm-5 text-start text-sm-start">
+                      <div class="col-12 col-sm-auto ">
+                        <div class="avatar avatar-3xl avatar-bordered mb-3">
+                          <img class="rounded-circle" src="{{ cars.first.id_car_make.logo.url }}" alt="">
+                        </div>
+                      </div>
+                      <div class="col-12 col-sm-auto flex-1">
+                        <h3 class="mb-2">{{ cars.first.id_car_make.get_local_name }}<span class="ms-2 text-body-tertiary fw-semibold">{{ cars.first.id_car_model.get_local_name }}</span></h3>
                         <p class="text-body-tertiary fw-semibold">{{ cars.first.id_car_serie.name }}, <span class="fs-10">{{ cars.first.id_car_trim.name }}</span></p>
+                      </div>
+                    </div>
                     </div>
                 </div>
             </div>
@@ -54,9 +64,9 @@
                             <tr>
                             <td class="align-middle white-space-nowrap text-center fw-bold text-body-tertiary">
                                     {% if car.stock_type == "new" %}
-                                    <span class="badge badge-phoenix fs-10 badge-phoenix-success"><span class="badge-label">{{_("New")}}</span><span class="ms-1" data-feather="plus" style="height:13px;width:13px;"></span></span>
+                                    <span class="badge badge-phoenix badge-phoenix-success"><span class="badge-label">{{_("New")}}</span></span>
                                     {% elif car.status == "used" %}
-                                    <span class="badge badge-phoenix fs-10 badge-phoenix-info"><span class="badge-label">{{_("Used")}}</span><span class="ms-1" data-feather="plus" style="height:13px;width:13px;"></span></span>
+                                    <span class="badge badge-phoenix badge-phoenix-info"><span class="badge-label">{{_("Used")}}</span></span>
                                     {% endif %}
                                 </td>
                                 <td class="align-middle white-space-nowrap text-start fw-bold">{{ car.vin }}</td>
@@ -64,12 +74,12 @@
                                 {% if car.colors.exists %}
                                     <td class="align-middle white-space-nowrap text-body fs-9 text-start">
                                         <div class="d-flex flex-column align-items-center">
-                                            <span class="color-div" style="background-color: rgb({{ car.colors.first.exterior.rgb }});" title="{{ car.colors.first.exterior.get_local_name }}"></span><span>{{ car.colors.first.exterior.get_local_name }}</span>
+                                            <span class="color-div" style="background: linear-gradient(90deg, rgba({{ car.colors.first.exterior.rgb }},1) 40%, rgba({{ car.colors.first.exterior.rgb }},0.35) 100%);" title="{{ car.colors.first.exterior.get_local_name }}"></span><span>{{ car.colors.first.exterior.get_local_name }}</span>
                                         </div>
                                     </td>
                                     <td class="align-middle white-space-nowrap text-body fs-9 text-start">
                                         <div class="d-flex flex-column align-items-center">
-                                            <span class="color-div" style="background-color: rgb({{ car.colors.first.interior.rgb }});" title="{{ car.colors.first.interior.get_local_name }}"></span><span>{{ car.colors.first.interior.get_local_name }}</span>
+                                            <span class="color-div" style="background: linear-gradient(90deg, rgba({{ car.colors.first.interior.rgb }},1) 40%, rgba({{ car.colors.first.interior.rgb }},0.35) 100%);" title="{{ car.colors.first.interior.get_local_name }}"></span><span>{{ car.colors.first.interior.get_local_name }}</span>
                                         </div>
                                     </td>
                                 {% else %}
diff --git a/templates/partials/car_card.html b/templates/partials/car_card.html
deleted file mode 100644
index ce56d13d..00000000
--- a/templates/partials/car_card.html
+++ /dev/null
@@ -1 +0,0 @@
-{% load static %}
diff --git a/templates/subscriptions/subscription_plan.html b/templates/subscriptions/subscription_plan.html
new file mode 100644
index 00000000..94a06843
--- /dev/null
+++ b/templates/subscriptions/subscription_plan.html
@@ -0,0 +1,146 @@
+{% extends 'base.html' %}
+{% load i18n %}
+{% load static %}
+
+{% block content %}
+<div class="container">
+  <h2 class="mb-7">Pricing</h2>
+  <div class="row">
+    <div class="col-xl-12 col-xxl-9 mb-1">
+      <div class="tabs mb-7">
+        <div class="tab-content" id="pills-tabContent">
+          <div class="tab-pane fade show active" id="pills-month" role="tabpanel" aria-labelledby="pills-month-tab">
+            <div class="row g-3">
+                {% for plan in plans %}
+                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
+                        <div class="h-100">
+                            <input class="card-form-check-input d-none"
+                                   type="radio"
+                                   name="pricingMonthly"
+                                   id="subscription_{{ plan.id }}"
+                                   checked="checked" />
+                            <div class="position-relative h-100">
+                                <label class="stretched-link" for="subscription_{{ plan.id }}"></label>
+                                <div class="card h-100 overflow-hidden cursor-pointer">
+                                    <div class="bg-holder d-dark-none"
+                                         style="background-image:url({% static 'images/bg/8.png' %});background-position:left bottom;background-size:auto;bottom:-1px;">
+                                    </div>
+                                    <div class="bg-holder d-light-none"
+                                         style="background-image:url({% static 'images/bg/8-dark.png' %});background-position:left bottom;background-size:auto;bottom:-1px;">
+                                    </div>
+                                    <div class="card-body d-flex flex-column justify-content-between position-relative">
+                    <div class="d-flex justify-content-between">
+                      <div class="mb-5 mb-md-0 mb-lg-5 me-3">
+                        <div class="d-sm-flex align-items-center mb-3">
+                          <h3 class="mb-0">{{ plan.name }}</h3>
+                        </div>
+                        <p class="fs-9 text-body-tertiary">For individuals who are interested
+                            <br> in giving it a shot first.
+                        </p>
+                        <div class="d-flex align-items-end mb-md-5 mb-lg-0">
+                          <h4 class="fw-bolder me-1">{{ plan.price|floatformat }} {% trans 'SAR' %}</h4>
+                          <h5 class="fs-9 fw-normal text-body-tertiary ms-1">{{ _("Per month")}}</h5>
+                        </div>
+                      </div>
+                        <img class="d-dark-none opacity-50"
+                             src="{% static 'images/spot-illustrations/dark_21.png' %}"
+                             width="auto"
+                             height="120"
+                             alt=""  />
+                      <img class="d-light-none opacity-50"
+                           src="{% static 'images/spot-illustrations/21.png' %}"
+                           width="auto"
+                           height="120"
+                           alt="" />
+                    </div>
+                    <div class="row flex-1 justify-content-end">
+                      <div class="col-sm-8 col-md-12">
+                        <div class="d-sm-flex d-md-block d-lg-flex justify-content-end align-items-end h-100">
+                          <ul class="list-unstyled mb-0 border-start-sm border-start-md-0 border-start-lg ps-sm-5 ps-md-0 ps-lg-5 border-translucent">
+                            <li class="d-flex align-items-center">
+                                <span class="uil uil-check-circle text-success me-2"></span>
+                                <span class="text-body-tertiary fw-semibold">{{ _("Max Users")}}: {{ plan.max_users }}</span>
+                            </li>
+                            <li class="d-flex align-items-center">
+                                <span class="uil uil-check-circle text-success me-2"></span>
+                                <span class="text-body-tertiary fw-semibold">{{ _("Inventory Size")}}: {{ plan.max_inventory_size }}</span>
+                            </li>
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+                  </div>
+                {% endfor %}
+            </div>
+          </div>
+        </div>
+
+      </div>
+      <div>
+        <div class="d-grid d-sm-flex">
+          <button class="btn btn-lg btn-phoenix-primary d-sm-flex align-items-center mb-3 mb-sm-0 me-sm-3 px-sm-8">{{ _("Subscribe") }}
+              {{ _("Now") }}<span class="fas fa-angle-right ms-1"></span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="col col-xxl-3 mt-8">
+      <h3 class="fw-semibold mb-3">Included in our all packages</h3>
+      <div class="row">
+        <div class="col-md-6 col-xxl-12">
+          <div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3"><span class="fas fa-check text-primary me-3 fs-9"></span>
+            <p class="mb-0 text-body-secondary">Timeline</p>
+          </div>
+        </div>
+        <div class="col-md-6 col-xxl-12">
+          <div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
+              <span class="fas fa-check text-primary me-3 fs-9"></span>
+            <p class="mb-0 text-body-secondary">Advanced Search</p>
+          </div>
+        </div>
+        <div class="col-md-6 col-xxl-12">
+          <div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
+              <span class="fas fa-check text-primary me-3 fs-9"></span>
+            <p class="mb-0 text-body-secondary">Custom fields</p>
+              <span class="badge badge-phoenix badge-phoenix-primary ms-2">New</span>
+          </div>
+        </div>
+        <div class="col-md-6 col-xxl-12">
+          <div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
+              <span class="fas fa-check text-primary me-3 fs-9"></span>
+            <p class="mb-0 text-body-secondary">Task dependencies</p>
+          </div>
+        </div>
+        <div class="col-md-6 col-xxl-12">
+          <div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
+              <span class="fas fa-check text-primary me-3 fs-9"></span>
+            <p class="mb-0 text-body-secondary">20TB of additional space </p>
+          </div>
+        </div>
+        <div class="col-md-6 col-xxl-12">
+          <div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
+              <span class="fas fa-check text-primary me-3 fs-9"></span>
+            <p class="mb-0 text-body-secondary">Bandwidth of Upto 1 Gbps</p>
+          </div>
+        </div>
+        <div class="col-md-6 col-xxl-12">
+          <div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
+              <span class="fas fa-check text-primary me-3 fs-9"></span>
+            <p class="mb-0 text-body-secondary">Private teams & projects</p>
+          </div>
+        </div>
+        <div class="col-md-6 col-xxl-12">
+          <div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
+              <span class="fas fa-check text-primary me-3 fs-9"></span>
+            <p class="mb-0 text-body-secondary">Customer Support and Training</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/test.html b/templates/test.html
index c2ac6a20..109f9da3 100644
--- a/templates/test.html
+++ b/templates/test.html
@@ -1,137 +1,538 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Car Inventory</title>
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <!-- Font Awesome for Icons -->
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
-    <!-- Custom CSS -->
-    <style>
-        .color-circle {
-            width: 22px;
-            height: 22px;
-            border-radius: 50%;
-            border: 1px solid #ccc;
-            display: inline-block;
-        }
-        .table-hover tbody tr:hover {
-            background-color: #f8f9fa;
-        }
-        .badge {
-            font-size: 0.9rem;
-        }
-        .table-responsive {
-            overflow-x: auto;
-        }
-        .table thead th {
-            background-color: #007bff;
-            color: white;
-        }
-        .table tbody td {
-            vertical-align: middle;
-        }
-    </style>
-</head>
-<body>
-    <div class="container my-5">
-        <h1 class="text-center mb-4">Car Inventory</h1>
-
-        <!-- Search and Filter Section -->
-        <div class="row mb-4 g-3">
-            <div class="col-md-6">
-                <div class="input-group">
-                    <span class="input-group-text"><i class="fas fa-search"></i></span>
-                    <input type="text" class="form-control" placeholder="Search by VIN, Make, or Model">
-                </div>
-            </div>
-            <div class="col-md-3">
-                <select class="form-select">
-                    <option>All Years</option>
-                    <option>2023</option>
-                    <option>2022</option>
-                    <option>2021</option>
-                </select>
-            </div>
-            <div class="col-md-3">
-                <button class="btn btn-primary w-100"><i class="fas fa-filter"></i> Filter</button>
-            </div>
+<div class="brand-container">
+  <div class="brand-title"><h1>All Brands</h1></div>
+  <div class="brand-list-box">
+    <div class="brand-grid-box">
+      <a href="/en-sa/changan/" class="ka" point-cid="6" point-crgn="pinpaiquyu" point-cpos="1" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Changan"
+              src=""
+              data-original=""
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/107/w360_yichecar_997687110728096.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Changan</div>
+          </div>
         </div>
-
-        <!-- Car Listing Table -->
-        <div class="table-responsive">
-            <table class="table table-hover table-bordered">
-                <thead>
-                    <tr>
-                        <th>#</th>
-                        <th>Image</th>
-                        <th>Make & Model</th>
-                        <th>Year</th>
-                        <th>VIN</th>
-                        <th>Exterior Color</th>
-                        <th>Interior Color</th>
-                        <th>Location</th>
-                        <th>Status</th>
-                        <th>Actions</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <!-- Example Row -->
-                    <tr>
-                        <td>1</td>
-                        <td><img src="https://via.placeholder.com/100" alt="Car Image" class="img-thumbnail" style="width: 100px;"></td>
-                        <td>Toyota Camry</td>
-                        <td>2023</td>
-                        <td>1HGCM82633A123456</td>
-                        <td><span class="color-circle" style="background-color: #0000ff;"></span> Blue</td>
-                        <td><span class="color-circle" style="background-color: #ffffff;"></span> White</td>
-                        <td>Main Showroom</td>
-                        <td><span class="badge bg-success">Available</span></td>
-                        <td>
-                            <a href="#" class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i> View</a>
-                            <a href="#" class="btn btn-sm btn-outline-warning"><i class="fas fa-edit"></i> Edit</a>
-                        </td>
-                    </tr>
-
-                    <!-- Add more rows here -->
-                    <tr>
-                        <td>2</td>
-                        <td><img src="https://via.placeholder.com/100" alt="Car Image" class="img-thumbnail" style="width: 100px;"></td>
-                        <td>Honda Accord</td>
-                        <td>2022</td>
-                        <td>1HGCM82633A654321</td>
-                        <td><span class="color-circle" style="background-color: #ff0000;"></span> Red</td>
-                        <td><span class="color-circle" style="background-color: #000000;"></span> Black</td>
-                        <td>Downtown Showroom</td>
-                        <td><span class="badge bg-warning">Reserved</span></td>
-                        <td>
-                            <a href="#" class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i> View</a>
-                            <a href="#" class="btn btn-sm btn-outline-warning"><i class="fas fa-edit"></i> Edit</a>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
+      </a>
+      <a href="/en-sa/haval/" class="ka" point-cid="20" point-crgn="pinpaiquyu" point-cpos="2" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Haval"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/44/w360_yichecar_997687404468507.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/44/w360_yichecar_997687404468507.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/44/w360_yichecar_997687404468507.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Haval</div>
+          </div>
         </div>
-
-        <!-- Pagination -->
-        <nav aria-label="Page navigation" class="mt-4">
-            <ul class="pagination justify-content-center">
-                <li class="page-item disabled">
-                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true"><i class="fas fa-chevron-left"></i></a>
-                </li>
-                <li class="page-item active"><a class="page-link" href="#">1</a></li>
-                <li class="page-item"><a class="page-link" href="#">2</a></li>
-                <li class="page-item"><a class="page-link" href="#">3</a></li>
-                <li class="page-item">
-                    <a class="page-link" href="#"><i class="fas fa-chevron-right"></i></a>
-                </li>
-            </ul>
-        </nav>
+      </a>
+      <a href="/en-sa/geely/" class="ka" point-cid="8" point-crgn="pinpaiquyu" point-cpos="3" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Geely"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/924/w360_yichecar_997687792422555.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/924/w360_yichecar_997687792422555.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/924/w360_yichecar_997687792422555.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Geely</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/mg/" class="ka" point-cid="11" point-crgn="pinpaiquyu" point-cpos="4" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="MG"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/688/w360_yichecar_997688268839543.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/688/w360_yichecar_997688268839543.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/688/w360_yichecar_997688268839543.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">MG</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/jetour/" class="ka" point-cid="13" point-crgn="pinpaiquyu" point-cpos="5" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Jetour"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/194/w360_yichecar_997687619404924.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/194/w360_yichecar_997687619404924.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/194/w360_yichecar_997687619404924.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Jetour</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/gac/" class="ka" point-cid="7" point-crgn="pinpaiquyu" point-cpos="6" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="GAC"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/162/w360_yichecar_997687216275363.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/162/w360_yichecar_997687216275363.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/162/w360_yichecar_997687216275363.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">GAC</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/yusheng/" class="ka" point-cid="33" point-crgn="pinpaiquyu" point-cpos="7" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Yusheng"
+              src="https://global-img.bitauto.com/usercenter/car/20240807/299/w360_yichecar_299640729984747.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240807/299/w360_yichecar_299640729984747.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240807/299/w360_yichecar_299640729984747.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Yusheng</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/forthing/" class="ka" point-cid="4" point-crgn="pinpaiquyu" point-cpos="8" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Forthing"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/409/w360_yichecar_997687040947420.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/409/w360_yichecar_997687040947420.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/409/w360_yichecar_997687040947420.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Forthing</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/baic/" class="ka" point-cid="1" point-crgn="pinpaiquyu" point-cpos="9" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="BAIC"
+              src="https://global-img.bitauto.com/usercenter/car/20241030/63/w360_yichecar_024988706367037.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20241030/63/w360_yichecar_024988706367037.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20241030/63/w360_yichecar_024988706367037.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">BAIC</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/chery/" class="ka" point-cid="12" point-crgn="pinpaiquyu" point-cpos="10" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Chery"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/868/w360_yichecar_997687986893381.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/868/w360_yichecar_997687986893381.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/868/w360_yichecar_997687986893381.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Chery</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/byd/" class="ka" point-cid="2" point-crgn="pinpaiquyu" point-cpos="11" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="BYD"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/505/w360_yichecar_997687250517674.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/505/w360_yichecar_997687250517674.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/505/w360_yichecar_997687250517674.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">BYD</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/dongfeng/" class="ka" point-cid="3" point-crgn="pinpaiquyu" point-cpos="12" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Dongfeng"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/681/w360_yichecar_997687168186887.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/681/w360_yichecar_997687168186887.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/681/w360_yichecar_997687168186887.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Dongfeng</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/bestune/" class="ka" point-cid="17" point-crgn="pinpaiquyu" point-cpos="13" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Bestune"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/546/w360_yichecar_997688154683139.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/546/w360_yichecar_997688154683139.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/546/w360_yichecar_997688154683139.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Bestune</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/maxus/" class="ka" point-cid="14" point-crgn="pinpaiquyu" point-cpos="14" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Maxus"
+              src="https://global-img.bitauto.com/usercenter/car/20240710/201/w360_yichecar_057920920137249.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240710/201/w360_yichecar_057920920137249.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240710/201/w360_yichecar_057920920137249.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Maxus</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/baojun/" class="ka" point-cid="32" point-crgn="pinpaiquyu" point-cpos="15" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Baojun"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/818/w360_yichecar_997687281803661.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/818/w360_yichecar_997687281803661.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/818/w360_yichecar_997687281803661.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Baojun</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/neta/" class="ka" point-cid="24" point-crgn="pinpaiquyu" point-cpos="16" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Neta"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/529/w360_yichecar_997687752999461.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/529/w360_yichecar_997687752999461.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/529/w360_yichecar_997687752999461.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Neta</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/tank/" class="ka" point-cid="22" point-crgn="pinpaiquyu" point-cpos="17" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Tank"
+              src="https://global-img.bitauto.com/usercenter/car/20240722/823/w360_yichecar_163707482354378.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240722/823/w360_yichecar_163707482354378.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240722/823/w360_yichecar_163707482354378.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Tank</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/xpeng/" class="ka" point-cid="30" point-crgn="pinpaiquyu" point-cpos="18" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="XPeng"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/485/w360_yichecar_997687648521261.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/485/w360_yichecar_997687648521261.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/485/w360_yichecar_997687648521261.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">XPeng</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/hongqi/" class="ka" point-cid="19" point-crgn="pinpaiquyu" point-cpos="19" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Hongqi"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/92/w360_yichecar_997688109274189.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/92/w360_yichecar_997688109274189.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/92/w360_yichecar_997688109274189.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Hongqi</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/gwm/" class="ka" point-cid="5" point-crgn="pinpaiquyu" point-cpos="20" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="GWM"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/420/w360_yichecar_997687442036944.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/420/w360_yichecar_997687442036944.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/420/w360_yichecar_997687442036944.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">GWM</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/lynk-co/" class="ka" point-cid="9" point-crgn="pinpaiquyu" point-cpos="21" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Lynk &amp; Co"
+              src="https://global-img.bitauto.com/usercenter/car/20240704/973/w360_yichecar_005902597375718.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240704/973/w360_yichecar_005902597375718.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240704/973/w360_yichecar_005902597375718.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Lynk &amp; Co</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/jac/" class="ka" point-cid="10" point-crgn="pinpaiquyu" point-cpos="22" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="JAC"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/316/w360_yichecar_997688231624563.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/316/w360_yichecar_997688231624563.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/316/w360_yichecar_997688231624563.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">JAC</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/seres/" class="ka" point-cid="15" point-crgn="pinpaiquyu" point-cpos="23" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Seres"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/836/w360_yichecar_997687683665359.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/836/w360_yichecar_997687683665359.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/836/w360_yichecar_997687683665359.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Seres</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/jmc/" class="ka" point-cid="16" point-crgn="pinpaiquyu" point-cpos="24" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="JMC"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/647/w360_yichecar_000268964703865.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/647/w360_yichecar_000268964703865.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/647/w360_yichecar_000268964703865.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">JMC</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/vgv/" class="ka" point-cid="18" point-crgn="pinpaiquyu" point-cpos="25" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="VGV"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/216/w360_yichecar_997687821602652.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/216/w360_yichecar_997687821602652.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/216/w360_yichecar_997687821602652.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">VGV</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/skywell/" class="ka" point-cid="21" point-crgn="pinpaiquyu" point-cpos="26" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Skywell"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/195/w360_yichecar_997687919565147.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/195/w360_yichecar_997687919565147.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/195/w360_yichecar_997687919565147.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Skywell</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/dayun/" class="ka" point-cid="23" point-crgn="pinpaiquyu" point-cpos="27" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Dayun"
+              src="https://global-img.bitauto.com/usercenter/car/20241105/147/w360_yichecar_078641814765350.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20241105/147/w360_yichecar_078641814765350.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20241105/147/w360_yichecar_078641814765350.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Dayun</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/soueast/" class="ka" point-cid="25" point-crgn="pinpaiquyu" point-cpos="28" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Soueast"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/759/w360_yichecar_997687575999642.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/759/w360_yichecar_997687575999642.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/759/w360_yichecar_997687575999642.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Soueast</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/landian/" class="ka" point-cid="26" point-crgn="pinpaiquyu" point-cpos="29" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Landian"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/967/w360_yichecar_997688196701500.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/967/w360_yichecar_997688196701500.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/967/w360_yichecar_997688196701500.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Landian</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/haima/" class="ka" point-cid="27" point-crgn="pinpaiquyu" point-cpos="30" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Haima"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/178/w360_yichecar_000219417844615.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/178/w360_yichecar_000219417844615.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/178/w360_yichecar_000219417844615.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Haima</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/jmev/" class="ka" point-cid="28" point-crgn="pinpaiquyu" point-cpos="31" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="JMEV"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/748/w360_yichecar_997688074818713.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/748/w360_yichecar_997688074818713.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/748/w360_yichecar_997688074818713.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">JMEV</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/voyah/" class="ka" point-cid="29" point-crgn="pinpaiquyu" point-cpos="32" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="Voyah"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/500/w360_yichecar_997687950085351.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/500/w360_yichecar_997687950085351.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/500/w360_yichecar_997687950085351.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">Voyah</div>
+          </div>
+        </div>
+      </a>
+      <a href="/en-sa/swm/" class="ka" point-cid="31" point-crgn="pinpaiquyu" point-cpos="33" point-dtype="brand">
+        <div class="brand-item">
+          <div>
+            <img
+              class="brand-logo lazyload"
+              alt="SWM"
+              src="https://global-img.bitauto.com/usercenter/car/20240703/205/w360_yichecar_997687520525767.png.webp"
+              data-original="https://global-img.bitauto.com/usercenter/car/20240703/205/w360_yichecar_997687520525767.png"
+              data-webp="https://global-img.bitauto.com/usercenter/car/20240703/205/w360_yichecar_997687520525767.png.webp"
+              data-errimg="https://global-img.bitauto.com/yc-static/yc-pc/haiwai-pc/assets/images/loaded_error_icon.png"
+              onerror="loadImageError(this)"
+            />
+            <div class="brand-name">SWM</div>
+          </div>
+        </div>
+      </a>
     </div>
-
-    <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-</body>
-</html>
\ No newline at end of file
+    <div class="show-more-warp" style="display: none;">
+      <div class="view-more ka" point-ctitle="chakangengduo" point-crgn="pinpaiquyu">Show All Brands <em class="yc-icon-index yc-i-down_arrow_icon arrow-icon"></em></div>
+    </div>
+  </div>
+</div>
diff --git a/templates/welcome.html b/templates/welcome.html
index 5cb5b2fc..8f3d30ac 100644
--- a/templates/welcome.html
+++ b/templates/welcome.html
@@ -15,8 +15,6 @@
 
      <title>{% block title %}{% trans 'HAIKAL' %}{% endblock %}</title>
 
-
-
     <link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/favicons/apple-touch-icon.png' %}">
     <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicons/favicon-32x32.png' %}">
     <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicons/favicon-16x16.png' %}">
@@ -34,7 +32,9 @@
     <link href="{% static 'vendors/swiper/swiper-bundle.min.css' %}" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
-    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800;900&amp;display=swap" rel="stylesheet">
+    <link
+            href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800;900&amp;display=swap"
+            rel="stylesheet">
     <link href="{% static 'vendors/simplebar/simplebar.min.css' %}" rel="stylesheet">
     <link href="{% static 'css/sweetalert2.min.css' %}" rel="stylesheet">
     <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
@@ -50,188 +50,100 @@
 
   <body style="--phoenix-scroll-margin-top: 1.2rem;">
 
-    <!-- ===============================================-->
-    <!--    Main Content-->
-    <!-- ===============================================-->
     <main class="main" id="top">
-      <div class="bg-body-emphasis sticky-top" data-navbar-shadow-on-scroll="data-navbar-shadow-on-scroll">
-        <nav class="navbar navbar-expand-lg container-small px-3 px-lg-7 px-xxl-3"><a class="navbar-brand me-1 me-sm-3" href="{% url 'landing_page' %}">
+      <div class="bg-body-emphasis sticky-top"
+           data-navbar-shadow-on-scroll="data-navbar-shadow-on-scroll">
+        <nav class="navbar navbar-expand-lg container-small px-3 px-lg-7 px-xxl-3">
+            <a class="navbar-brand me-1 me-sm-3" href="{% url 'landing_page' %}">
               <div class="d-flex align-items-center">
-                  <img class="logo-img d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="haikal" width="27" />
-                  <img class="logo-img d-light-none" src="{% static 'images/logos/logo.png' %}" alt="haikal" width="27" />
+                  <img class="logo-img d-dark-none"
+                       src="{% static 'images/logos/logo-d.png' %}"
+                       alt="haikal" width="27" />
+                  <img class="logo-img d-light-none"
+                       src="{% static 'images/logos/logo.png' %}"
+                       alt="haikal" width="27" />
                   <h5 class="logo-text ms-2 d-none d-sm-block">{% trans 'Haikal' %}</h5>
               </div>
             </a>
 
-          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
+          <button class="navbar-toggler"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#navbarSupportedContent"
+                  aria-controls="navbarSupportedContent"
+                  aria-expanded="false"
+                  aria-label="Toggle navigation">
+              <span class="navbar-toggler-icon"></span>
+          </button>
           <div class="collapse navbar-collapse" id="navbarSupportedContent">
             <div class="border-bottom border-translucent border-bottom-lg-0 mb-2">
               <div class="search-box d-inline d-lg-none">
                 <form class="position-relative">
-                  <input class="form-control search-input search rounded-pill my-4" type="search" placeholder="Search" aria-label="Search" />
+                  <input class="form-control search-input search rounded-pill my-4"
+                         type="search"
+                         placeholder="Search"
+                         aria-label="Search" />
                   <span class="fas fa-search search-box-icon"></span>
-
                 </form>
               </div>
             </div>
             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-              <li class="nav-item border-bottom border-translucent border-bottom-lg-0"><a class="nav-link lh-1 py-0 fs-9 fw-bold py-3" aria-current="page" href="{% url 'landing_page' %}">{% trans 'home'|capfirst %}</a></li>
-              <li class="nav-item border-bottom border-translucent border-bottom-lg-0"><a class="nav-link lh-1 py-0 fs-9 fw-bold py-3" href="#feature">Features</a></li>
-              <li class="nav-item border-bottom border-translucent border-bottom-lg-0"><a class="nav-link lh-1 py-0 fs-9 fw-bold py-3" href="#blog">Blog</a></li>
-              <li class="nav-item"><a class="nav-link lh-1 py-0 fs-9 fw-bold py-3" href="#team">Team</a></li>
+              <li class="nav-item border-bottom border-translucent border-bottom-lg-0">
+                  <a class="nav-link lh-1 py-0 fs-9 fw-bold py-3"
+                     aria-current="page"
+                     href="#home">{% trans 'home'|capfirst %}
+                  </a>
+              </li>
+              <li class="nav-item border-bottom border-translucent border-bottom-lg-0">
+                  <a class="nav-link lh-1 py-0 fs-9 fw-bold py-3"
+                     href="#feature">Features
+                  </a>
+              </li>
+              <li class="nav-item border-bottom border-translucent border-bottom-lg-0">
+                  <a class="nav-link lh-1 py-0 fs-9 fw-bold py-3"
+                     href="#pricing">{{ _("Subscriptions") }}
+                  </a>
+              </li>
             </ul>
             <div class="d-grid d-lg-flex align-items-center">
               <div class="nav-item d-flex align-items-center d-none d-lg-block pe-2">
                 <div class="theme-control-toggle fa-icon-wait px-2">
-                  <input class="form-check-input ms-0 theme-control-toggle-input" type="checkbox" data-theme-control="phoenixTheme" value="dark" id="themeControlToggle" />
-                  <label class="mb-0 theme-control-toggle-label theme-control-toggle-light" for="themeControlToggle" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Switch theme" style="height:32px;width:32px;"><span class="icon" data-feather="moon"></span></label>
-                  <label class="mb-0 theme-control-toggle-label theme-control-toggle-dark" for="themeControlToggle" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Switch theme" style="height:32px;width:32px;"><span class="icon" data-feather="sun"></span></label>
+                  <input class="form-check-input ms-0 theme-control-toggle-input"
+                         type="checkbox" data-theme-control="phoenixTheme" value="dark" id="themeControlToggle" />
+                  <label class="mb-0 theme-control-toggle-label theme-control-toggle-light"
+                         for="themeControlToggle"
+                         data-bs-toggle="tooltip"
+                         data-bs-placement="left"
+                         data-bs-title="Switch theme"
+                         style="height:32px;width:32px;">
+                      <span class="icon" data-feather="moon"></span>
+                  </label>
+                  <label class="mb-0 theme-control-toggle-label theme-control-toggle-dark"
+                         for="themeControlToggle"
+                         data-bs-toggle="tooltip"
+                         data-bs-placement="left"
+                         data-bs-title="Switch theme"
+                         style="height:32px;width:32px;">
+                      <span class="icon" data-feather="sun"></span>
+                  </label>
                 </div>
-              </div><a class="text-body-quaternary text-body-tertiary-hover px-2 d-none d-lg-inline lh-sm" href="#" data-bs-toggle="modal" data-bs-target="#searchBoxModal"><span data-feather="search" style="height: 20px; width: 20px;"></span></a><a class="btn btn-link text-body order-1 order-lg-0 ps-4 me-lg-2" href="{% url 'account_login' %}">{{ _("Sign In") }}</a><a class="btn btn-phoenix-primary order-0" href="{% url 'account_signup' %}"><span class="fw-bold">{{ _("Sign Up") }}</span></a>
+              </div><a class="text-body-quaternary text-body-tertiary-hover px-2 d-none d-lg-inline lh-sm"
+                       href="#"
+                       data-bs-toggle="modal"
+                       data-bs-target="#searchBoxModal">
+                <span data-feather="search" style="height: 20px; width: 20px;"></span>
+            </a>
+            <a class="btn btn-link text-body order-1 order-lg-0 ps-4 me-lg-2"
+               href="{% url 'account_login' %}">{{ _("Sign In") }}
+            </a>
+            <a class="btn btn-phoenix-primary order-0"
+               href="{% url 'account_signup' %}">
+                <span class="fw-bold">{{ _("Sign Up") }}</span>
+            </a>
             </div>
           </div>
         </nav>
       </div>
-      <div class="modal fade" id="searchBoxModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="true" data-phoenix-modal="data-phoenix-modal" style="--phoenix-backdrop-opacity: 1;">
-        <div class="modal-dialog">
-          <div class="modal-content mt-15 rounded-pill">
-            <div class="modal-body p-0">
-              <div class="search-box navbar-top-search-box" data-list='{"valueNames":["title"]}' style="width: auto;">
-                <form class="position-relative" data-bs-toggle="search" data-bs-display="static">
-                  <input class="form-control search-input fuzzy-search rounded-pill form-control-lg" type="search" placeholder="Search..." aria-label="Search" />
-                  <span class="fas fa-search search-box-icon"></span>
-
-                </form>
-                <div class="btn-close position-absolute end-0 top-50 translate-middle cursor-pointer shadow-none" data-bs-dismiss="search">
-                  <button class="btn btn-link p-0" aria-label="Close"></button>
-                </div>
-                <div class="dropdown-menu border start-0 py-0 overflow-hidden w-100">
-                  <div class="scrollbar-overlay" style="max-height: 30rem;">
-                    <div class="list pb-3">
-                      <h6 class="dropdown-header text-body-highlight fs-10 py-2">24 <span class="text-body-quaternary">results</span></h6>
-                      <hr class="my-0" />
-                      <h6 class="dropdown-header text-body-highlight fs-9 border-bottom border-translucent py-2 lh-sm">Recently Searched </h6>
-                      <div class="py-2"><a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
-                          <div class="d-flex align-items-center">
-
-                            <div class="fw-normal text-body-highlight title"><span class="fa-solid fa-clock-rotate-left" data-fa-transform="shrink-2"></span> Store Macbook</div>
-                          </div>
-                        </a>
-                        <a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
-                          <div class="d-flex align-items-center">
-
-                            <div class="fw-normal text-body-highlight title"> <span class="fa-solid fa-clock-rotate-left" data-fa-transform="shrink-2"></span> MacBook Air - 13″</div>
-                          </div>
-                        </a>
-
-                      </div>
-                      <hr class="my-0" />
-                      <h6 class="dropdown-header text-body-highlight fs-9 border-bottom border-translucent py-2 lh-sm">Products</h6>
-                      <div class="py-2"><a class="dropdown-item py-2 d-flex align-items-center" href="../../apps/e-commerce/landing/product-details.html">
-                          <div class="file-thumbnail me-2"><img class="h-100 w-100 object-fit-cover rounded-3" src="{% static 'images/products/60x60/3.png'%}" alt="" /></div>
-                          <div class="flex-1">
-                            <h6 class="mb-0 text-body-highlight title">MacBook Air - 13″</h6>
-                            <p class="fs-10 mb-0 d-flex text-body-tertiary"><span class="fw-medium text-body-tertiary text-opactity-85">8GB Memory - 1.6GHz - 128GB Storage</span></p>
-                          </div>
-                        </a>
-                        <a class="dropdown-item py-2 d-flex align-items-center" href="../../apps/e-commerce/landing/product-details.html">
-                          <div class="file-thumbnail me-2"><img class="img-fluid" src="{% static 'images/products/60x60/3.png'%}" alt="" /></div>
-                          <div class="flex-1">
-                            <h6 class="mb-0 text-body-highlight title">MacBook Pro - 13″</h6>
-                            <p class="fs-10 mb-0 d-flex text-body-tertiary"><span class="fw-medium text-body-tertiary text-opactity-85">30 Sep at 12:30 PM</span></p>
-                          </div>
-                        </a>
-
-                      </div>
-                      <hr class="my-0" />
-                      <h6 class="dropdown-header text-body-highlight fs-9 border-bottom border-translucent py-2 lh-sm">Quick Links</h6>
-                      <div class="py-2"><a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
-                          <div class="d-flex align-items-center">
-
-                            <div class="fw-normal text-body-highlight title"><span class="fa-solid fa-link text-body" data-fa-transform="shrink-2"></span> Support MacBook House</div>
-                          </div>
-                        </a>
-                        <a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
-                          <div class="d-flex align-items-center">
-
-                            <div class="fw-normal text-body-highlight title"> <span class="fa-solid fa-link text-body" data-fa-transform="shrink-2"></span> Store MacBook″</div>
-                          </div>
-                        </a>
-
-                      </div>
-                      <hr class="my-0" />
-                      <h6 class="dropdown-header text-body-highlight fs-9 border-bottom border-translucent py-2 lh-sm">Files</h6>
-                      <div class="py-2"><a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
-                          <div class="d-flex align-items-center">
-
-                            <div class="fw-normal text-body-highlight title"><span class="fa-solid fa-file-zipper text-body" data-fa-transform="shrink-2"></span> Library MacBook folder.rar</div>
-                          </div>
-                        </a>
-                        <a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
-                          <div class="d-flex align-items-center">
-
-                            <div class="fw-normal text-body-highlight title"> <span class="fa-solid fa-file-lines text-body" data-fa-transform="shrink-2"></span> Feature MacBook extensions.txt</div>
-                          </div>
-                        </a>
-                        <a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
-                          <div class="d-flex align-items-center">
-
-                            <div class="fw-normal text-body-highlight title"> <span class="fa-solid fa-image text-body" data-fa-transform="shrink-2"></span> MacBook Pro_13.jpg</div>
-                          </div>
-                        </a>
-
-                      </div>
-                      <hr class="my-0" />
-                      <h6 class="dropdown-header text-body-highlight fs-9 border-bottom border-translucent py-2 lh-sm">Members</h6>
-                      <div class="py-2"><a class="dropdown-item py-2 d-flex align-items-center" href="../../pages/members.html">
-                          <div class="avatar avatar-l status-online  me-2 text-body">
-                            <img class="rounded-circle " src="{% static 'images/team/40x40/10.webp'%}" alt="" />
-
-                          </div>
-                          <div class="flex-1">
-                            <h6 class="mb-0 text-body-highlight title">Carry Anna</h6>
-                            <p class="fs-10 mb-0 d-flex text-body-tertiary">anna@technext.it</p>
-                          </div>
-                        </a>
-                        <a class="dropdown-item py-2 d-flex align-items-center" href="../../pages/members.html">
-                          <div class="avatar avatar-l  me-2 text-body">
-                            <img class="rounded-circle " src="{% static 'images/team/40x40/12.webp'%}" alt="" />
-
-                          </div>
-                          <div class="flex-1">
-                            <h6 class="mb-0 text-body-highlight title">John Smith</h6>
-                            <p class="fs-10 mb-0 d-flex text-body-tertiary">smith@technext.it</p>
-                          </div>
-                        </a>
-
-                      </div>
-                      <hr class="my-0" />
-                      <h6 class="dropdown-header text-body-highlight fs-9 border-bottom border-translucent py-2 lh-sm">Related Searches</h6>
-                      <div class="py-2"><a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
-                          <div class="d-flex align-items-center">
-
-                            <div class="fw-normal text-body-highlight title"><span class="fa-brands fa-firefox-browser text-body" data-fa-transform="shrink-2"></span> Search in the Web MacBook</div>
-                          </div>
-                        </a>
-                        <a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
-                          <div class="d-flex align-items-center">
-
-                            <div class="fw-normal text-body-highlight title"> <span class="fa-brands fa-chrome text-body" data-fa-transform="shrink-2"></span> Store MacBook″</div>
-                          </div>
-                        </a>
-
-                      </div>
-                    </div>
-                    <div class="text-center">
-                      <p class="fallback fw-bold fs-7 d-none">No Result Found.</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
       <section class="bg-body-emphasis pb-8" id="home">
         <div class="container-small hero-header-container px-lg-7 px-xxl-3">
           <div class="row align-items-center">
@@ -241,26 +153,31 @@
                 </div>
                 <!--/.bg-holder-->
 
-                <div class="position-relative"><img class="w-100 shadow-lg d-dark-none rounded-2" src="{% static 'images/bg/bg-31.png'%}" alt="hero-header" /><img class="w-100 shadow-lg d-light-none rounded-2" src="{% static 'images/bg/bg-31.png'%}" alt="hero-header" /></div>
+                <div class="position-relative"><img class="w-100 shadow-lg d-dark-none rounded-2" src="{% static 'images/bg/bg-31.png'%}" alt="hero-header" />
+                    <img class="w-100 shadow-lg d-light-none rounded-2" src="{% static 'images/bg/bg-31.png'%}" alt="hero-header" />
+                </div>
               </div>
               <div class="hero-image-container position-absolute top-0 bottom-0 end-0 d-none d-lg-block">
                 <div class="position-relative h-100 w-100">
-                  <div class="position-absolute h-100 top-0 d-flex align-items-center end-0 hero-image-container-bg"><img class="pt-7 pt-md-0 w-100" src="{% static 'images/bg/bg-1-2.png'%}" alt="hero-header" /></div>
-                  <div class="position-absolute h-100 top-0 d-flex align-items-center end-0"><img class="pt-7 pt-md-0 w-100 shadow-lg d-dark-none rounded-2" src="{% static 'images/bg/bg-28.png'%}" alt="hero-header" /><img class="pt-7 pt-md-0 w-100 shadow-lg d-light-none rounded-2" src="{% static 'images/bg/bg-29.png'%}" alt="hero-header" /></div>
+                  <div class="position-absolute h-100 top-0 d-flex align-items-center end-0 hero-image-container-bg">
+                      <img class="pt-7 pt-md-0 w-100" src="{% static 'images/bg/bg-1-2.png'%}" alt="hero-header" /></div>
+                  <div class="position-absolute h-100 top-0 d-flex align-items-center end-0">
+                      <img class="pt-7 pt-md-0 w-100 shadow-lg d-dark-none rounded-2" src="{% static 'images/bg/bg-28.png'%}" alt="hero-header" />
+                      <img class="pt-7 pt-md-0 w-100 shadow-lg d-light-none rounded-2" src="{% static 'images/bg/bg-29.png'%}" alt="hero-header" /></div>
                 </div>
               </div>
             </div>
             <div class="col-12 col-lg-6 text-lg-start text-center pt-8 pb-6 order-0 position-relative">
               <h1 class="fs-3 fs-lg-2 fs-md-1 fs-lg-2 fs-xl-1 fs fw-black mb-4"><span class="text-primary me-3">Elegance</span>for<br />your web app</h1>
-              <p class="mb-5">Standard, modern and Elegant solution for your next web app so you don’t have to look further. Sign up or check the demo below.</p><a class="btn btn-lg btn-primary rounded-pill me-3" href="#!" role="button">Sign up</a><a class="btn btn-link me-2 fs-8 p-0" href="#!" role="button">Check Demo<span class="fa-solid fa-angle-right ms-2 fs-9"></span></a>
+              <p class="mb-5">Standard, modern and Elegant solution for your next web app so you don’t have to look further. Sign up or check the demo below.</p>
+                <a class="btn btn-lg btn-primary rounded-pill me-3" href="" role="button">Sign up</a>
+                <a class="btn btn-link me-2 fs-8 p-0" href="" role="button">Check Demo<span class="fa-solid fa-angle-right ms-2 fs-9"></span>
+                </a>
             </div>
           </div>
         </div>
       </section>
 
-
-      <!-- ============================================-->
-      <!-- <section> begin ============================-->
       <section class="py-5 pt-xl-13 bg-body-emphasis">
 
         <div class="container-small px-lg-7 px-xxl-3">
@@ -294,14 +211,7 @@
         <!-- end of .container-->
 
       </section>
-      <!-- <section> close ============================-->
-      <!-- ============================================-->
 
-
-
-
-      <!-- ============================================-->
-      <!-- <section> begin ============================-->
       <section class="pt-15 pb-0" id="feature">
 
         <div class="container-small px-lg-7 px-xxl-3">
@@ -309,54 +219,108 @@
             <div class="row">
               <div class="col-lg-6 text-center text-lg-start pe-xxl-3">
                 <h4 class="text-primary fw-bolder mb-4">Features</h4>
-                <h2 class="mb-3 text-body-emphasis lh-base">Seamless Payments: A Fully <br class="d-md-none" />Integrated Suite</h2>
-                <p class="mb-5">With the power of Phoenix, you can now focus only on functionaries for your digital products, while leaving the UI design on us!With the power of Phoenix, you can now focus only on functionaries for your digital products, while leaving the UI design on us!</p><a class="btn btn-lg btn-outline-primary rounded-pill me-2" href="#!" role="button">Find out more<i class="fa-solid fa-angle-right ms-2"></i></a>
+                <h2 class="mb-3 text-body-emphasis lh-base">Seamless Payments: A Fully
+                    <br class="d-md-none" />Integrated Suite</h2>
+                <p class="mb-5">With the power of Phoenix, you can now focus only on functionaries
+                    for your digital products, while leaving the UI design on us!With the power
+                    of Phoenix, you can now focus only on functionaries for your digital products,
+                    while leaving the UI design on us!</p>
+                  <a class="btn btn-lg btn-outline-primary rounded-pill me-2"
+                     href=""
+                     role="button">Find out more<i class="fa-solid fa-angle-right ms-2"></i>
+                  </a>
               </div>
               <div class="col-sm-6 col-lg-3 mt-7 text-center text-lg-start">
                 <div class="h-100 d-flex flex-column justify-content-between">
-                  <div class="border-start-lg border-translucent border-dashed ps-4"><img class="mb-4" src="{% static 'images/icons/illustrations/bolt.png'%}" width="48" height="48" alt="" />
+                  <div class="border-start-lg border-translucent border-dashed ps-4">
+                      <img class="mb-4"
+                           src="{% static 'images/icons/illustrations/bolt.png'%}"
+                           width="48"
+                           height="48"
+                           alt="" />
                     <div>
                       <h5 class="fw-bolder mb-2">Lightning Speed</h5>
-                      <p class="fw-semibold lh-sm">Present everything you need in one place within minutes! Grow with Phoenix!</p>
+                      <p class="fw-semibold lh-sm">Present everything you need within minutes! Grow with Phoenix!</p>
                     </div>
-                    <div><a class="btn btn-link me-2 p-0 fs-9" href="#!" role="button">Check Demo<span class="fa-solid fa-angle-right ms-2"></span></a></div>
+                    <div><a class="btn btn-link me-2 p-0 fs-9" href="" role="button">Check Demo
+                        <span class="fa-solid fa-angle-right ms-2"></span></a></div>
                   </div>
                 </div>
               </div>
               <div class="col-sm-6 col-lg-3 mt-7 text-center text-lg-start">
                 <div class="h-100 d-flex flex-column">
-                  <div class="border-start-lg border-translucent border-dashed ps-4"><img class="mb-4" src="{% static 'images/icons/illustrations/pie.png'%}" width="48" height="48" alt="" />
+                  <div class="border-start-lg border-translucent border-dashed ps-4">
+                      <img class="mb-4"
+                           src="{% static 'images/icons/illustrations/pie.png'%}"
+                           width="48"
+                           height="48"
+                           alt="" />
                     <div>
                       <h5 class="fw-bolder mb-2">All-in-one solution</h5>
                       <p class="fw-semibold lh-sm">Show your production and growth graph in one place with Phoenix!</p>
                     </div>
-                    <div><a class="btn btn-link me-2 p-0 fs-9" href="#!" role="button">Check Demo<i class="fa-solid fa-angle-right ms-2"></i></a></div>
+                    <div>
+                        <a class="btn btn-link me-2 p-0 fs-9"
+                           href=""
+                           role="button">Check Demo<i class="fa-solid fa-angle-right ms-2"></i>
+                        </a>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
             <div class="row mt-12 align-items-center justify-content-between text-center text-lg-start mb-6 mb-lg-0">
-              <div class="col-lg-5"><img class="feature-image img-fluid mb-9 mb-lg-0 d-dark-none" src="{% static 'images/spot-illustrations/22_2.png'%}" alt="" /><img class="feature-image img-fluid mb-9 mb-lg-0 d-light-none" src="{% static 'images/spot-illustrations/dark_22.png'%}" alt="" /></div>
+              <div class="col-lg-5">
+                  <img class="feature-image img-fluid mb-9 mb-lg-0 d-dark-none"
+                       src="{% static 'images/spot-illustrations/22_2.png'%}"
+                       alt="" />
+                  <img class="feature-image img-fluid mb-9 mb-lg-0 d-light-none"
+                       src="{% static 'images/spot-illustrations/dark_22.png'%}"
+                       alt="" />
+              </div>
               <div class="col-lg-6">
                 <h6 class="text-primary mb-2 ls-2">SIGNAL</h6>
-                <h3 class="fw-bolder mb-3">Recieve the signals instantly</h3>
-                <p class="mb-4 px-md-7 px-lg-0">Phoenix makes it possible for you to quickly and effectively receive every signal. No need for drawn-out waiting.</p><a class="btn btn-link me-2 p-0 fs-9" href="#!" role="button">Check Demo<i class="fa-solid fa-angle-right ms-2"></i></a>
+                <h3 class="fw-bolder mb-3">Receive the signals instantly</h3>
+                <p class="mb-4 px-md-7 px-lg-0">Phoenix makes it possible for you to quickly and effectively receive every signal. No need for drawn-out waiting.</p>
+                  <a class="btn btn-link me-2 p-0 fs-9" href="" role="button">Check Demo
+                      <i class="fa-solid fa-angle-right ms-2"></i>
+                  </a>
               </div>
             </div>
             <div class="row mt-2 align-items-center justify-content-between text-center text-lg-start mb-6 mb-lg-0">
-              <div class="col-lg-5 order-0 order-lg-1"><img class="feature-image img-fluid mb-9 mb-lg-0 d-dark-none" src="{% static 'images/spot-illustrations/23_2.png'%}" height="394" alt="" /><img class="feature-image img-fluid mb-9 mb-lg-0 d-light-none" src="{% static 'images/spot-illustrations/dark_23.png'%}" height="394" alt="" /></div>
+              <div class="col-lg-5 order-0 order-lg-1">
+                  <img class="feature-image img-fluid mb-9 mb-lg-0 d-dark-none"
+                       src="{% static 'images/spot-illustrations/23_2.png'%}" height="394" alt="" />
+                  <img class="feature-image img-fluid mb-9 mb-lg-0 d-light-none"
+                       src="{% static 'images/spot-illustrations/dark_23.png'%}" height="394" alt="" />
+              </div>
               <div class="col-lg-6">
                 <h6 class="text-primary mb-2 ls-2">REVENUE</h6>
                 <h3 class="fw-bolder mb-3">See Your Revenue Grow</h3>
-                <p class="mb-4 px-md-7 px-lg-0">Grow with Phoenix. We help you with everything you might need., We make it easy and keep it simple.</p><a class="btn btn-link me-2 p-0 fs-9" href="#!" role="button">Check Demo<i class="fa-solid fa-angle-right ms-2"></i></a>
+                <p class="mb-4 px-md-7 px-lg-0">Grow with Phoenix. We help you with everything you might need., We make it easy and keep it simple.</p>
+                  <a class="btn btn-link me-2 p-0 fs-9" href="" role="button">Check Demo
+                      <i class="fa-solid fa-angle-right ms-2"></i>
+                  </a>
               </div>
             </div>
             <div class="row mt-2 align-items-center justify-content-between text-center text-lg-start mb-6 mb-lg-0">
-              <div class="col-lg-5"><img class="feature-image img-fluid mb-9 mb-lg-0 d-dark-none" src="{% static 'images/spot-illustrations/24_2.png'%}" height="394" alt="" /><img class="feature-image img-fluid mb-9 mb-lg-0 d-light-none" src="{% static 'images/spot-illustrations/dark_24.png'%}" height="394" alt="" /></div>
+              <div class="col-lg-5">
+                  <img class="feature-image img-fluid mb-9 mb-lg-0 d-dark-none"
+                       src="{% static 'images/spot-illustrations/24_2.png'%}"
+                       height="394"
+                       alt="" />
+                  <img class="feature-image img-fluid mb-9 mb-lg-0 d-light-none"
+                       src="{% static 'images/spot-illustrations/dark_24.png'%}"
+                       height="394"
+                       alt="" />
+              </div>
               <div class="col-lg-6 text-center text-lg-start">
                 <h6 class="text-primary mb-2 ls-2">REPORTS</h6>
                 <h3 class="fw-bolder mb-3">Get Reports Ready</h3>
-                <p class="mb-4 px-md-7 px-lg-0">With Phoenix, you can get ready reports on your growth analysis anytime. This dashboard also has all filters accessible according to your needs.</p><a class="btn btn-link me-2 p-0 fs-9" href="#!" role="button">Check Demo<i class="fa-solid fa-angle-right ms-2"></i></a>
+                <p class="mb-4 px-md-7 px-lg-0">With Phoenix, you can get ready reports on your growth anytime.</p>
+                  <a class="btn btn-link me-2 p-0 fs-9" href=""
+                     role="button">Check Demo<i class="fa-solid fa-angle-right ms-2"></i>
+                  </a>
               </div>
             </div>
           </div>
@@ -364,912 +328,32 @@
         <!-- end of .container-->
 
       </section>
-      <!-- <section> close ============================-->
-      <!-- ============================================-->
 
-
-      <div class="position-relative">
-        <div class="bg-holder z-2 d-none d-md-block" style="background-image:url({% static 'images/bg/13.png'%});background-size:auto;background-position:right;">
-        </div>
-        <!--/.bg-holder-->
-
-        <div class="bg-holder z-2 d-none d-md-block d-lg-none d-xl-block" style="background-image:url({% static 'images/bg/bg-12.png'%});background-size:auto;background-position:left;">
-        </div>
-        <!--/.bg-holder-->
-
-        <div class="bottom-0 start-0 end-0 bg-body-emphasis">
-          <svg class="w-100" viewBox="0 0 1920 368" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path class="fill-body-bg" d="M1920 0.44L0 367.74V0H1920V0.44Z"></path>
-          </svg>
-        </div>
-        <section class="pb-0 bg-body-emphasis overflow-hidden position-static">
-          <div class="container-small px-lg-7 px-xxl-3">
-            <div class="row">
-              <div class="col-lg-6 mb-6 text-center text-lg-start z-2">
-                <h4 class="text-primary fw-bolder mb-3">Testimonial</h4>
-                <h2 class="mb-3 text-body-emphasis">More than 2 Millions happy<br />Customers and counting</h2>
-                <p class="mb-5">You may now concentrate on the functionality and other <br class="d-none d-sm-block" />aspects of your web products thanks to Phoenix's strength<br class="d-none d-sm-block" />before leaving the UI design to us. It is simple to complete<br class="d-none d-sm-block" />the work after checking and double-checking.</p>
-              </div>
-              <div class="col-lg-6 z-2">
-                <div class="carousel slide" id="carouselExampleIndicators" data-bs-ride="carousel">
-                  <div class="carousel-inner">
-                    <div class="carousel-item active">
-                      <div class="row g-1 g-lg-0 g-xl-1 pb-lg-3 pb-xl-0 ps-lg-1 ps-xl-0">
-                        <div class="col-lg-6 col-xl-5 text-center">
-                          <div class="testimonial-avatar-container d-inline-block position-relative">
-                            <div class="bg-holder" style="background-image:url({% static 'images/bg/bg-2.png'%});background-size:contain;">
-                            </div>
-                            <!--/.bg-holder-->
-                            <img class="rounded-3 mb-lg-0 opacity-100 position-relative" src="{% static 'images/team/61.webp'%}" width="153" height="153" alt="" />
-                          </div>
-                        </div>
-                        <div class="col-lg-6 col-xl-7 text-center text-lg-start">
-                          <div class="mb-4" data-bs-theme="light"><span class="fa fa-star text-primary"></span><span class="fa fa-star text-primary"></span><span class="fa fa-star text-primary"></span><span class="fa fa-star text-primary"></span><span class="fa fa-star text-primary"></span>
-                          </div>
-                          <h3 class="fs-7 fs-xl-6 mb-5 lh-sm me-md-7 me-lg-0">Brilliant app! Will definitely going to be my first choice starting from today</h3>
-                          <h6>Monica Gomez</h6>
-                          <h6 class="fw-normal">UX designer, Google</h6>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="carousel-item">
-                      <div class="row g-1 g-lg-0 g-xl-1 pb-lg-3 pb-xl-0 ps-lg-1 ps-xl-0">
-                        <div class="col-lg-6 col-xl-5 text-center">
-                          <div class="testimonial-avatar-container d-inline-block position-relative">
-                            <div class="bg-holder" style="background-image:url({% static 'images/bg/bg-2.png'%});background-size:contain;">
-                            </div>
-                            <!--/.bg-holder-->
-                            <img class="rounded-3 mb-lg-0 opacity-100 position-relative" src="{% static 'images/team/8.webp'%}" width="154" alt="" />
-                          </div>
-                        </div>
-                        <div class="col-lg-6 col-xl-7 text-center text-lg-start">
-                          <div class="mb-4" data-bs-theme="light"><span class="fa fa-star text-primary"></span><span class="fa fa-star text-primary"></span><span class="fa fa-star text-primary"></span><span class="fa fa-star text-primary"></span><span class="fa fa-star text-primary"></span>
-                          </div>
-                          <h3 class="fs-7 fs-xl-6 mb-5 lh-sm me-md-7 me-lg-0">“Excellent to work with and comfortable to customize. This is what I was looking for till the date!”</h3>
-                          <h6>Marc Chiasson</h6>
-                          <h6 class="fw-normal">UX designer, Adobe</h6>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="carousel-item">
-                      <div class="row g-1 g-lg-0 g-xl-1 pb-lg-3 pb-xl-0 ps-lg-1 ps-xl-0">
-                        <div class="col-lg-6 col-xl-5 text-center">
-                          <div class="testimonial-avatar-container d-inline-block position-relative">
-                            <div class="bg-holder" style="background-image:url({% static 'images/bg/bg-2.png'%});background-size:contain;">
-                            </div>
-                            <!--/.bg-holder-->
-                            <img class="rounded-3 mb-lg-0 opacity-100 position-relative" src="{% static 'images/team/35.webp'%}" width="154" alt="" />
-                          </div>
-                        </div>
-                        <div class="col-lg-6 col-xl-7 text-center text-lg-start">
-                          <div class="mb-4" data-bs-theme="light"><span class="fa fa-star text-primary"></span><span class="fa fa-star text-primary"></span><span class="fa fa-star text-primary"></span><span class="fa fa-star text-primary"></span><span class="fa fa-star text-primary"></span>
-                          </div>
-                          <h3 class="fs-7 fs-xl-6 mb-5 lh-sm me-md-7 me-lg-0">“Phoenix is all you can ask for. This is perfect fit for everything you might want to work on!”</h3>
-                          <h6>Axel Barry</h6>
-                          <h6 class="fw-normal">UX designer, Apple</h6>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-      </div>
       <div class="position-relative">
         <div class="bg-holder world-map-bg" style="background-image:url({% static 'images/bg/bg-13.png'%});">
         </div>
-        <!--/.bg-holder-->
-
-        <div class="bg-holder z-2 opacity-25 " style="background-image:url({% static 'images/bg/bg-right-21.png'%});background-size:auto;background-position:right;">
+        <div class="bg-holder z-2 opacity-25 "
+             style="background-image:url({% static 'images/bg/bg-right-21.png'%});background-size:auto;background-position:right;">
         </div>
-        <!--/.bg-holder-->
-
-        <div class="bg-holder z-2 mt-9 opacity-25" style="background-image:url({% static 'images/bg/bg-left-21.png'%});background-size:auto;background-position:left;">
+        <div class="bg-holder z-2 mt-9 opacity-25"
+             style="background-image:url({% static 'images/bg/bg-left-21.png'%});background-size:auto;background-position:left;">
         </div>
-        <!--/.bg-holder-->
-
-        <svg class="w-100 position-relative" preserveAspectRatio="none" viewBox="0 0 1920 368" xmlns="http://www.w3.org/2000/svg">
-          <path class="fill-emphasis-bg" d="M1920 0.44L0 367.74V0H1920V0.44Z"></path>
-        </svg>
-        <section class="overflow-hidden z-2">
-          <div class="container-small px-lg-7 px-xxl-3" data-bs-theme="light">
-            <div class="position-relative">
-              <div class="row mb-6">
-                <div class="col-xl-6 text-center text-md-start">
-                  <h2 class="text-white mb-2">Being used by millions of users</h2>
-                  <h1 class="fs-md-3 fs-xl-2 fw-black text-gradient-info text-uppercase mb-4 mb-md-0">WORLDWIDE</h1>
-                </div>
-                <div class="col-xl-6 text-center text-md-start">
-                  <p class="text-white">You can get all the reports, data analysis, and growth maps you need with the help of Phoenix's power, and you may review and modify them whenever you want. These features make this dashboard outstanding.</p>
-                </div>
-              </div>
-              <div class="row">
-                <div class="col-xl-8 text-center text-md-start mb-6 mb-xl-0">
-                  <div class="d-md-flex justify-content-md-between">
-                    <div class="mb-6 mb-md-0 me-4">
-                      <h1 class="display-1 text-white fw-bolder" data-countup='{"endValue":125,"duration":10,"suffix":"+"}'>0 <span>+</span></h1>
-                      <p class="text-white">Every month, there are more<br class="d-md-none d-lg-block" />than 125+ sales.</p>
-                    </div>
-                    <div class="mb-6 mb-md-0 me-4">
-                      <h1 class="display-1 text-white fw-bolder" data-countup='{"endValue":308,"duration":10,"suffix":"k"}'>0</h1>
-                      <p class="text-white">We have 308+ active paid.<br class="d-md-none d-lg-block" />subscribers.</p>
-                    </div>
-                    <div class="mb-6 mb-md-0 me-4">
-                      <h1 class="display-1 text-white fw-bolder" data-countup='{"endValue":12,"duration":0.5}'>0</h1>
-                      <p class="text-white">We have won 12 awards so<br class="d-md-none d-lg-block" />far with great success. </p>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-xl-4 text-center text-md-start"><img class="img-fluid" src="{% static 'images/generic/capterra.png'%}" alt="" /></div>
-              </div>
-            </div>
-          </div>
-        </section>
-        <svg class="w-100 position-relative" viewBox="0 0 1920 368" xmlns="http://www.w3.org/2000/svg">
-          <path class="fill-emphasis-bg" d="M0 368L1920 0.730011L1920 368L0 368Z"></path>
-        </svg>
       </div>
-      <section class="bg-body-emphasis pb-lg-6 pb-xl-8">
-        <div class="bg-holder d-dark-none" style="background-image:url({% static 'images/bg/bg-5.png'%});background-size:auto;">
-        </div>
-        <!--/.bg-holder-->
 
-        <div class="bg-holder d-light-none" style="background-image:url({% static 'images/bg/bg-dark-5.png'%});background-size:auto;">
-        </div>
-        <!--/.bg-holder-->
-
-        <div class="bg-holder" style="background-image:url({% static 'images/bg/bg-left-5.png'%});background-position:left;background-size:auto;">
-        </div>
-        <!--/.bg-holder-->
-
-        <div class="bg-holder" style="background-image:url({% static 'images/bg/bg-right-6.png'%});background-position:right;background-size:auto;">
-        </div>
-        <!--/.bg-holder-->
-
-        <div class="container-small position-relative px-lg-7 px-xxl-3">
-          <div class="mb-8 text-center text-sm-start">
-            <h4 class="text-primary fw-bolder mb-3">Gallery</h4>
-            <h2>Some of Our Best Works</h2>
-          </div>
-          <p class="column-lg-2">Rise like Phoenix focusing only on functionalities for your digital products leaving the design for us. Show what you do, with our latest admin dashboard. Check our best works and let us know what you want to find. Want to tell your customers about the details of how and what? Tell them with all the posts at one place without them ridirecting to another page or site.</p>
-          <ul class="nav mb-6 justify-content-center justify-content-sm-start w-max-content" data-filter-nav="data-filter-nav">
-            <li class="nav-item"><a class="isotope-nav cursor-pointer active" data-filter="*">First</a></li>
-            <li class="nav-item"><a class="isotope-nav cursor-pointer" data-filter=".second">Second</a></li>
-            <li class="nav-item"><a class="isotope-nav cursor-pointer" data-filter=".third">Third</a></li>
-            <li class="nav-item"> <a class="isotope-nav cursor-pointer" data-filter=".fourth">Fourth</a></li>
-          </ul>
-          <div class="row g-3" id="image_gallery" style="min-height: 948px" data-sl-isotope='{"layoutMode":"packery"}'>
-            <div class="col-6 col-md-4 col-lg-3 px-2 isotope-item fourth"><a href="#!" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="{% static 'images/gallery/1.png'%}"><img class="rounded img-fluid w-100" src="{% static 'images/gallery/1.png'%}" alt="" /></a>
-            </div>
-            <div class="col-6 col-md-4 col-lg-3 px-2 isotope-item third"><a href="#!" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="{% static 'images/gallery/2.png'%}"><img class="rounded img-fluid w-100" src="{% static 'images/gallery/2.png'%}" alt="" /></a>
-            </div>
-            <div class="col-6 col-md-4 col-lg-3 px-2 isotope-item second"><a href="#!" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="{% static 'images/gallery/3.png'%}"><img class="rounded img-fluid w-100" src="{% static 'images/gallery/3.png'%}" alt="" /></a>
-            </div>
-            <div class="col-6 col-md-4 col-lg-3 px-2 isotope-item third"><a href="#!" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="{% static 'images/gallery/5.png'%}"><img class="rounded img-fluid w-100" src="{% static 'images/gallery/5.png'%}" alt="" /></a>
-            </div>
-            <div class="col-6 col-md-4 col-lg-3 px-2 isotope-item third second"><a href="#!" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="{% static 'images/gallery/4.png'%}"><img class="rounded img-fluid w-100" src="{% static 'images/gallery/4.png'%}" alt="" /></a>
-            </div>
-            <div class="col-6 col-md-4 col-lg-3 px-2 isotope-item second"><a href="#!" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="{% static 'images/gallery/6.png'%}"><img class="rounded img-fluid w-100" src="{% static 'images/gallery/6.png'%}" alt="" /></a>
-            </div>
-            <div class="col-6 col-md-4 col-lg-3 px-2 isotope-item second"><a href="#!" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="{% static 'images/gallery/7.png'%}"><img class="rounded img-fluid w-100" src="{% static 'images/gallery/7.png'%}" alt="" /></a>
-            </div>
-            <div class="col-6 col-md-4 col-lg-6 px-2 isotope-item second"><a href="#!" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="{% static 'images/gallery/9.png'%}"><img class="rounded img-fluid w-100" src="{% static 'images/gallery/9.png'%}" alt="" /></a>
-            </div>
-            <div class="col-6 col-md-4 col-lg-3 px-2 isotope-item fourth"><a href="#!" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="{% static 'images/gallery/8.png'%}"><img class="rounded img-fluid w-100" src="{% static 'images/gallery/8.png'%}" alt="" /></a>
-            </div>
-            <div class="col-6 col-md-4 col-lg-6 px-2 isotope-item second"><a href="#!" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="{% static 'images/gallery/10.png'%}"><img class="rounded img-fluid w-100" src="{% static 'images/gallery/10.png'%}" alt="" /></a>
-            </div>
-          </div>
-        </div>
-      </section>
-      <section class="bg-body-emphasis pt-lg-0 pt-xl-8">
+      <section class="bg-body-emphasis pt-lg-0 pt-xl-8" id="pricing">
         <div class="bg-holder d-none d-md-block" style="background-image:url({% static 'images/bg/bg-left-15.png'%});background-position:left;background-size:auto;">
         </div>
-        <!--/.bg-holder-->
-
         <div class="bg-holder d-none d-md-block" style="background-image:url({% static 'images/bg/bg-right-15.png'%});background-position:right;background-size:auto;">
         </div>
-        <!--/.bg-holder-->
-
         <div class="container-small position-relative px-lg-7 px-xxl-3">
-          <div class="mb-4 text-center text-sm-start">
-            <h4 class="text-primary fw-bolder mb-3">Pricing</h4>
-            <h2>Choose the best deal for you</h2>
-          </div>
-          <p class="column-md-2 text-center text-sm-start">Entice your customers with Phoenix admin dashboard. Show your best deal in this section to help customers choose from your best offers and place them all in one place with this efficient template. If you are availing more than one offer to your customers, let them compare among them and search for what they need to get. Show offer details here and entice them to buy.</p>
-          <div class="row pt-9 g-3 g-xl-0">
-            <div class="col-md-6 col-xl-3">
-              <div class="card h-100 rounded-end-xl-0 rounded-start">
-                <div class="card-body px-6">
-                  <div class="px-5">
-                    <div class="text-center pt-5"><img src="{% static 'images/icons/illustrations/pie.png'%}" width="48" height="48" alt="" />
-                      <h3 class="fw-semibold my-4">Starter</h3>
-                    </div>
-                    <div class="text-center">
-                      <h1 class="fw-semibold text-primary">$<span class="fw-bolder">6</span><span class="text-body-emphasis fs-7 ms-1 fw-bolder">USD</span></h1>
-                      <h5 class="mb-4 text-body"></h5>
-                      <button class="btn btn-lg mb-6 w-100 btn-outline-primary">Buy</button>
-                    </div>
-                  </div>
-                  <ul class="fa-ul pricing-list">
-                    <li class="mb-4 d-flex align-items-center"><span class="fa-li"><span class="fas fa-check text-primary"></span></span><span class="text-body-secondary" style="--phoenix-text-opacity:1;">Timeline</span>
-                    </li>
-                    <li class="mb-4 d-flex align-items-center"><span class="fa-li"><span class="fas fa-check text-primary"></span></span><span class="text-body-secondary" style="--phoenix-text-opacity:1;">Advanced Search</span>
-                    </li>
-                    <li class="mb-4 d-flex align-items-center"><span class="text-body-secondary" style="--phoenix-text-opacity:.5;">Custom fields</span><span class="badge badge-phoenix badge-phoenix-warning ms-2 fs-10 opacity-50">New</span>
-                    </li>
-                    <li class="mb-4 d-flex align-items-center"><span class="text-body-secondary" style="--phoenix-text-opacity:.5;">Task dependencies</span>
-                    </li>
-                    <li class="mb-4 d-flex align-items-center"><span class="text-body-secondary" style="--phoenix-text-opacity:.5;">Private teams &amp; projects</span>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-            <div class="col-md-6 col-xl-3">
-              <div class="card h-100  rounded-top-0 rounded-xl-0 border border-2 border-primary mt-5 mt-md-0">
-                <div class="position-absolute d-flex flex-center bg-primary-subtle rounded-top py-1 end-0 start-0 badge-pricing">
-                  <p class="text-primary-dark mb-0">Most popular</p>
-                </div>
-                <div class="card-body px-6">
-                  <div class="px-5">
-                    <div class="text-center pt-5"><img src="{% static 'images/icons/illustrations/bolt.png'%}" width="48" height="48" alt="" />
-                      <h3 class="fw-semibold my-4">Team</h3>
-                    </div>
-                    <div class="text-center">
-                      <h1 class="fw-semibold text-primary">$<span class="fw-bolder">12</span><span class="text-body-emphasis fs-7 ms-1 fw-bolder">USD</span></h1>
-                      <h5 class="mb-4 text-body"></h5>
-                      <button class="btn btn-lg mb-6 w-100 btn-primary">Buy</button>
-                    </div>
-                  </div>
-                  <ul class="fa-ul pricing-list">
-                    <li class="mb-4 d-flex align-items-center"><span class="fa-li"><span class="fas fa-check text-primary"></span></span><span class="text-body-secondary" style="--phoenix-text-opacity:1;">Timeline</span>
-                    </li>
-                    <li class="mb-4 d-flex align-items-center"><span class="fa-li"><span class="fas fa-check text-primary"></span></span><span class="text-body-secondary" style="--phoenix-text-opacity:1;">Advanced Search</span>
-                    </li>
-                    <li class="mb-4 d-flex align-items-center"><span class="fa-li"><span class="fas fa-check text-primary"></span></span><span class="text-body-secondary" style="--phoenix-text-opacity:1;">Custom fields</span><span class="badge badge-phoenix badge-phoenix-warning ms-2 fs-10">New</span>
-                    </li>
-                    <li class="mb-4 d-flex align-items-center"><span class="text-body-secondary" style="--phoenix-text-opacity:.5;">Task dependencies</span>
-                    </li>
-                    <li class="mb-4 d-flex align-items-center"><span class="text-body-secondary" style="--phoenix-text-opacity:.5;">Private teams &amp; projects</span>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-            <div class="col-md-6 col-xl-3">
-              <div class="card h-100 rounded-start rounded-start-xl-0 mt-5 mt-md-0">
-                <div class="card-body px-6">
-                  <div class="px-5">
-                    <div class="text-center pt-5"><img src="{% static 'images/icons/illustrations/edit.png'%}" width="48" height="48" alt="" />
-                      <h3 class="fw-semibold my-4">Business</h3>
-                    </div>
-                    <div class="text-center">
-                      <h1 class="fw-semibold text-primary">$<span class="fw-bolder">23</span><span class="text-body-emphasis fs-7 ms-1 fw-bolder">USD</span></h1>
-                      <h5 class="mb-4 text-body"></h5>
-                      <button class="btn btn-lg mb-6 w-100 btn-outline-primary">Buy</button>
-                    </div>
-                  </div>
-                  <ul class="fa-ul pricing-list">
-                    <li class="mb-4 d-flex align-items-center"><span class="fa-li"><span class="fas fa-check text-primary"></span></span><span class="text-body-secondary" style="--phoenix-text-opacity:1;">Timeline</span>
-                    </li>
-                    <li class="mb-4 d-flex align-items-center"><span class="fa-li"><span class="fas fa-check text-primary"></span></span><span class="text-body-secondary" style="--phoenix-text-opacity:1;">Advanced Search</span>
-                    </li>
-                    <li class="mb-4 d-flex align-items-center"><span class="fa-li"><span class="fas fa-check text-primary"></span></span><span class="text-body-secondary" style="--phoenix-text-opacity:1;">Custom fields</span><span class="badge badge-phoenix badge-phoenix-warning ms-2 fs-10">New</span>
-                    </li>
-                    <li class="mb-4 d-flex align-items-center"><span class="fa-li"><span class="fas fa-star text-primary"></span></span><span class="text-body-secondary" style="--phoenix-text-opacity:1;">Task dependencies</span>
-                    </li>
-                    <li class="mb-4 d-flex align-items-center"><span class="text-body-secondary" style="--phoenix-text-opacity:.5;">Private teams &amp; projects</span>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-            <div class="col-12 col-md-6 col-xl-3 ps-xl-3">
-              <div class="row g-0 h-100 justify-content-center">
-                <div class="col-xl-12">
-                  <div class="card h-100 mt-5 mt-md-0">
-                    <div class="card-body">
-                      <div class="px-5">
-                        <div class="text-center pt-5"><img src="{% static 'images/icons/illustrations/shield.png'%}" width="48" height="48" alt="" />
-                          <h3 class="fw-semibold my-4">Enterprise</h3>
-                        </div>
-                        <div class="text-center">
-                          <h1 class="fw-semibold text-primary">$<span class="fw-bolder">40</span><span class="text-body-emphasis fs-7 ms-1 fw-bolder">USD</span></h1>
-                          <h5 class="mb-4 text-body"></h5>
-                          <button class="btn btn-lg mb-6 w-100 btn-outline-primary">Buy</button>
-                        </div>
-                      </div>
-                      <ul class="fa-ul pricing-list">
-                        <li class="mb-4 d-flex align-items-center"><span class="fa-li"><span class="fas fa-check text-primary"></span></span><span class="text-body-secondary" style="--phoenix-text-opacity:1;">Timeline</span>
-                        </li>
-                        <li class="mb-4 d-flex align-items-center"><span class="fa-li"><span class="fas fa-check text-primary"></span></span><span class="text-body-secondary" style="--phoenix-text-opacity:1;">Advanced Search</span>
-                        </li>
-                        <li class="mb-4 d-flex align-items-center"><span class="fa-li"><span class="fas fa-check text-primary"></span></span><span class="text-body-secondary" style="--phoenix-text-opacity:1;">Custom fields</span><span class="badge badge-phoenix badge-phoenix-warning ms-2 fs-10">New</span>
-                        </li>
-                        <li class="mb-4 d-flex align-items-center"><span class="fa-li"><span class="fas fa-star text-primary"></span></span><span class="text-body-secondary" style="--phoenix-text-opacity:1;">Task dependencies</span>
-                        </li>
-                        <li class="mb-4 d-flex align-items-center"><span class="fa-li"><span class="fas fa-star text-primary"></span></span><span class="text-body-secondary" style="--phoenix-text-opacity:1;">Private teams &amp; projects</span>
-                        </li>
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-12 text-center mt-8">
-              <p>For Enterprise Solution with Managed SMTP, Custom API setup, Dedicated Support, and more - <a href="#!"> Contact us</a></p>
-            </div>
-          </div>
+            {% block pricing %}
+
+            {% endblock pricing%}
         </div>
       </section>
 
-
-      <!-- ============================================-->
-      <!-- <section> begin ============================-->
-      <section class="bg-body-emphasis" id="blog">
-
-        <div class="container-small px-lg-7 px-xxl-3">
-          <div class="mb-4 text-center text-sm-start">
-            <h4 class="text-primary fw-bolder mb-3">Blog</h4>
-            <h2>Latest articles</h2>
-          </div>
-          <p class="column-md-2">See the latest articles we published with this dashboard. Your customers will be happy to find all the latest posts in one place. This menu efficiently shows all related topics from search filters and provides the customers with what they need. Also you can just educate your customers about everything they need to know and follow to avail a service with you. This menu is the one to show them that.</p>
-          <div class="row h-100 g-3 justify-content-center">
-            <div class="col-sm-6 col-lg-3 mb-3 mb-md-0">
-              <div class="card text-white dark__text-gray-1100 h-100"><img class="rounded-top h-100 object-fit-cover" src="{% static 'images/blog/blog-1.png'%}" alt="..." />
-                <div class="card-body rounded-top">
-                  <div class="d-flex align-items-cente mb-3">
-                    <div class="d-flex align-items-center me-3"><a class="btn-link text-decoration-none d-flex align-items-center" href="#!"><span class="fa-solid fa-eye text-body-quaternary me-1"></span><span class="text-body fs-10 lh-1">2563</span></a></div>
-                    <div class="d-flex align-items-center me-3"><a class="btn-link text-decoration-none d-flex align-items-center" href="#!"><span class="fa-solid fa-heart text-body-quaternary me-1"></span><span class="text-body fs-10 lh-1">125</span></a></div>
-                    <div class="d-flex align-items-center"><a class="btn-link text-decoration-none d-flex align-items-center" href="#!"><span class="fa-solid fa-comment text-body-quaternary me-1"></span><span class="text-body fs-10 lh-1">125</span></a></div>
-                  </div><span class="badge badge-phoenix badge-phoenix-primary mb-2">SEO</span>
-                  <h4 class="fw-bold mb-3 lh-sm line-clamp-2">Top 10 ways to Ace SEO for your business</h4><a class="btn-link px-0 d-flex align-items-center fs-9 fw-bold" href="#!" role="button">Read more<span class="fa-solid fa-angle-right ms-2"></span></a>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-lg-3 mb-3 mb-md-0">
-              <div class="card text-white dark__text-gray-1100 h-100"><img class="rounded-top h-100 object-fit-cover" src="{% static 'images/blog/blog-2.png'%}" alt="..." />
-                <div class="card-body rounded-top">
-                  <div class="d-flex align-items-cente mb-3">
-                    <div class="d-flex align-items-center me-3"><a class="btn-link text-decoration-none d-flex align-items-center" href="#!"><span class="fa-solid fa-eye text-body-quaternary me-1"></span><span class="text-body fs-10 lh-1">1256</span></a></div>
-                    <div class="d-flex align-items-center me-3"><a class="btn-link text-decoration-none d-flex align-items-center" href="#!"><span class="fa-solid fa-heart text-body-quaternary me-1"></span><span class="text-body fs-10 lh-1">325</span></a></div>
-                    <div class="d-flex align-items-center"><a class="btn-link text-decoration-none d-flex align-items-center" href="#!"><span class="fa-solid fa-comment text-body-quaternary me-1"></span><span class="text-body fs-10 lh-1">32</span></a></div>
-                  </div><span class="badge badge-phoenix badge-phoenix-primary mb-2">Marketing</span>
-                  <h4 class="fw-bold mb-3 lh-sm line-clamp-2">Top 12 Marketing strategies you can take</h4><a class="btn-link px-0 d-flex align-items-center fs-9 fw-bold" href="#!" role="button">Read more<span class="fa-solid fa-angle-right ms-2"></span></a>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-lg-3 mb-3 mb-md-0">
-              <div class="card text-white dark__text-gray-1100 h-100"><img class="rounded-top h-100 object-fit-cover" src="{% static 'images/blog/blog-3.png'%}" alt="..." />
-                <div class="card-body rounded-top">
-                  <div class="d-flex align-items-cente mb-3">
-                    <div class="d-flex align-items-center me-3"><a class="btn-link text-decoration-none d-flex align-items-center" href="#!"><span class="fa-solid fa-eye text-body-quaternary me-1"></span><span class="text-body fs-10 lh-1">142</span></a></div>
-                    <div class="d-flex align-items-center me-3"><a class="btn-link text-decoration-none d-flex align-items-center" href="#!"><span class="fa-solid fa-heart text-body-quaternary me-1"></span><span class="text-body fs-10 lh-1">123</span></a></div>
-                    <div class="d-flex align-items-center"><a class="btn-link text-decoration-none d-flex align-items-center" href="#!"><span class="fa-solid fa-comment text-body-quaternary me-1"></span><span class="text-body fs-10 lh-1">22</span></a></div>
-                  </div><span class="badge badge-phoenix badge-phoenix-primary mb-2">Marketing</span>
-                  <h4 class="fw-bold mb-3 lh-sm line-clamp-2">The top 7 methods to improve as a marketer</h4><a class="btn-link px-0 d-flex align-items-center fs-9 fw-bold" href="#!" role="button">Read more<span class="fa-solid fa-angle-right ms-2"></span></a>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-lg-3 mb-3 mb-md-0">
-              <div class="card text-white dark__text-gray-1100 h-100"><img class="rounded-top h-100 object-fit-cover" src="{% static 'images/blog/blog-4.png'%}" alt="..." />
-                <div class="card-body rounded-top">
-                  <div class="d-flex align-items-cente mb-3">
-                    <div class="d-flex align-items-center me-3"><a class="btn-link text-decoration-none d-flex align-items-center" href="#!"><span class="fa-solid fa-eye text-body-quaternary me-1"></span><span class="text-body fs-10 lh-1">2563</span></a></div>
-                    <div class="d-flex align-items-center me-3"><a class="btn-link text-decoration-none d-flex align-items-center" href="#!"><span class="fa-solid fa-heart text-body-quaternary me-1"></span><span class="text-body fs-10 lh-1">325</span></a></div>
-                    <div class="d-flex align-items-center"><a class="btn-link text-decoration-none d-flex align-items-center" href="#!"><span class="fa-solid fa-comment text-body-quaternary me-1"></span><span class="text-body fs-10 lh-1">112</span></a></div>
-                  </div><span class="badge badge-phoenix badge-phoenix-primary mb-2">Tech</span>
-                  <h4 class="fw-bold mb-3 lh-sm line-clamp-2">Best places for a tech job in U.S</h4><a class="btn-link px-0 d-flex align-items-center fs-9 fw-bold" href="#!" role="button">Read more<span class="fa-solid fa-angle-right ms-2"></span></a>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="text-center mt-6"><a class="btn btn-outline-primary" href="#!">View All<span class="fa-solid fa-angle-right ms-2"></span></a></div>
-        </div>
-        <!-- end of .container-->
-
-      </section>
-      <!-- <section> close ============================-->
-      <!-- ============================================-->
-
-
-
-
-      <!-- ============================================-->
-      <!-- <section> begin ============================-->
-      <section class="bg-body-emphasis">
-
-        <div class="container-small px-lg-7 px-xxl-3">
-          <div class="mb-3 text-center text-sm-start">
-            <h4 class="text-primary fw-bolder mb-3">Address</h4>
-            <h2>If you need to find us:</h2>
-          </div>
-          <p class="column-md-2">Do not lose your potential customers to others. Tell them exactly where you are with Geolocation enabled Phoenix admin dashboard, No need to take the burden of communicating directly. You can easily tell your customers where to find you with precise location map. Getting closer was never easier!</p>
-          <div class="row">
-            <div class="col-12 mb-15">
-              <div class="mapbox-container rounded-3 border overflow-hidden mt-3 mb-6">
-                <div id="mapbox" data-mapbox='{"attributionControl":false,"center":[-74.0020158,40.7228022],"zoom":14,"scrollZoom":false}' style="height: 381px"></div>
-              </div>
-            </div>
-          </div>
-          <div class="row g-5 g-lg-5">
-            <div class="col-md-6 mb-5 mb-md-0 text-center text-md-start">
-              <h3 class="mb-3">Stay connected</h3>
-              <p class="mb-5">Stay connected with Phoenix's Help Center; Phoenix is available for your necessities at all times.</p>
-              <div class="d-flex flex-column align-items-center align-items-md-start gap-3 gap-md-0">
-                <div class="d-md-flex align-items-center">
-                  <div class="icon-wrapper shadow-info"><span class="uil uil-phone text-primary fs-4 z-1 ms-2" data-bs-theme="light"></span></div>
-                  <div class="flex-1 ms-3"><a class="link-900" href="tel:+871406-7509">(871) 406-7509</a></div>
-                </div>
-                <div class="d-md-flex align-items-center">
-                  <div class="icon-wrapper shadow-info"><span class="uil uil-envelope text-primary fs-4 z-1 ms-2" data-bs-theme="light"></span></div>
-                  <div class="flex-1 ms-3"><a class="fw-semibold text-body" href="mailto:phoenix@email.com">phoenix@email.com</a></div>
-                </div>
-                <div class="mb-6 d-md-flex align-items-center">
-                  <div class="icon-wrapper shadow-info"><span class="uil uil-map-marker text-primary fs-4 z-1 ms-2" data-bs-theme="light"></span></div>
-                  <div class="flex-1 ms-3"><a class="fw-semibold text-body" href="#!">39163 Amir Drive Suite 802</a></div>
-                </div>
-                <div class="d-flex"><a href="#!"><span class="fa-brands fa-facebook fs-6 text-primary me-3"></span></a><a href="#!"><span class="fa-brands fa-twitter fs-6 text-primary me-3"></span></a><a href="#!"><span class="fa-brands fa-linkedin-in fs-6 text-primary"></span></a></div>
-              </div>
-            </div>
-            <div class="col-md-6 text-center text-md-start">
-              <h3 class="mb-3">Drop us a line</h3>
-              <p class="mb-7">If you have any query or suggestion , we are open to learn from you, Lets talk, reach us anytime.</p>
-              <form class="row g-4">
-                <div class="col-12">
-                  <input class="form-control bg-body-emphasis" type="text" name="name" placeholder="Name" required="required" />
-                </div>
-                <div class="col-12">
-                  <input class="form-control bg-body-emphasis" type="email" name="email" placeholder="Email" required="required" />
-                </div>
-                <div class="col-12">
-                  <textarea class="form-control bg-body-emphasis" rows="6" name="message" placeholder="Message" required="required"></textarea>
-                </div>
-                <div class="col-12 d-grid">
-                  <button class="btn btn-outline-primary" type="submit">Submit</button>
-                </div>
-                <div class="feedback"></div>
-              </form>
-            </div>
-          </div>
-        </div>
-        <!-- end of .container-->
-
-      </section>
-      <!-- <section> close ============================-->
-      <!-- ============================================-->
-
-
-      <section id="team">
-        <div class="bg-holder z-2" style="background-image:url({% static 'images/bg/bg-left-17.png'%});background-size:auto;background-position:left center;">
-        </div>
-        <!--/.bg-holder-->
-
-        <div class="bg-holder z-2" style="background-image:url({% static 'images/bg/bg-right-17.png'%});background-size:auto;background-position:right center;">
-        </div>
-        <!--/.bg-holder-->
-
-        <div class="position-absolute top-0 end-0 start-0">
-          <svg class="w-100 text-white" preserveAspectRatio="none" viewBox="0 0 1920 368" xmlns="http://www.w3.org/2000/svg">
-            <path class="fill-emphasis-bg" d="M1920 0.44L0 367.74V0H1920V0.44Z"></path>
-          </svg>
-        </div>
-        <div class="position-absolute bottom-0 end-0 start-0">
-          <svg class="text-white w-100" viewBox="0 0 1920 368" xmlns="http://www.w3.org/2000/svg">
-            <path class="fill-emphasis-bg" d="M0 368L1920 0.730011L1920 368L0 368Z"></path>
-          </svg>
-        </div>
-        <div class="container-small position-relative py-1 px-lg-7 px-xxl-3" style="z-index:10">
-          <div class="mb-4 text-center text-sm-start">
-            <h4 class="text-primary fw-bolder mb-3">Team</h4>
-            <h2>Our small team behind our success</h2>
-          </div>
-          <p class="column-md-2 text-center text-sm-start">We have a small but strong development team to follow up on the development process. Reach out to us for further information. The team is ready to answer all your questions within minutes. The efficient team is always at your beck and call.</p>
-          <div class="row align-items-center ps-lg-11 pe-lg-9">
-            <div class="col-sm-6 col-md-4 col-lg-3">
-              <div class="text-center mt-5 position-relative">
-                <div class="team-avatar-container d-inline-block position-relative">
-                  <div class="bg-holder" style="background-image:url({% static 'images/bg/bg-21.png'%});background-size:contain;">
-                  </div>
-                  <!--/.bg-holder-->
-                  <img class="img-fluid rounded mb-3 position-relative" src="{% static 'images/team/62.webp'%}" alt="..." />
-                </div>
-                <h4>John Smith</h4>
-                <h6 class="mb-3 fw-semibold">CEO, Global Cheat</h6><a href="#!"><span class="fa-brands fa-facebook text-primary me-3"></span></a><a href="#!"><span class="fa-brands fa-twitter text-primary me-3"></span></a><a href="#!"><span class="fa-brands fa-linkedin-in text-primary"></span></a>
-              </div>
-            </div>
-            <div class="col-sm-6 col-md-4 col-lg-3">
-              <div class="text-center mt-5 position-relative">
-                <div class="team-avatar-container d-inline-block position-relative">
-                  <div class="bg-holder" style="background-image:url({% static 'images/bg/bg-21.png'%});background-size:contain;">
-                  </div>
-                  <!--/.bg-holder-->
-                  <img class="img-fluid rounded mb-3 position-relative" src="{% static 'images/team/63.webp'%}" alt="..." />
-                </div>
-                <h4>Marc Chiasson</h4>
-                <h6 class="mb-3 fw-semibold">Vice President</h6><a href="#!"><span class="fa-brands fa-facebook text-primary me-3"></span></a><a href="#!"><span class="fa-brands fa-twitter text-primary me-3"></span></a><a href="#!"><span class="fa-brands fa-linkedin-in text-primary"></span></a>
-              </div>
-            </div>
-            <div class="col-sm-6 col-md-4 col-lg-3">
-              <div class="text-center mt-5 position-relative">
-                <div class="team-avatar-container d-inline-block position-relative">
-                  <div class="bg-holder" style="background-image:url({% static 'images/bg/bg-21.png'%});background-size:contain;">
-                  </div>
-                  <!--/.bg-holder-->
-                  <img class="img-fluid rounded mb-3 position-relative" src="{% static 'images/team/64.webp'%}" alt="..." />
-                </div>
-                <h4>Lilah Lola</h4>
-                <h6 class="mb-3 fw-semibold">Marketing Manager</h6><a href="#!"><span class="fa-brands fa-facebook text-primary me-3"></span></a><a href="#!"><span class="fa-brands fa-twitter text-primary me-3"></span></a><a href="#!"><span class="fa-brands fa-linkedin-in text-primary"></span></a>
-              </div>
-            </div>
-            <div class="col-sm-6 col-md-4 col-lg-3">
-              <div class="text-center mt-5 position-relative">
-                <div class="team-avatar-container d-inline-block position-relative">
-                  <div class="bg-holder" style="background-image:url({% static 'images/bg/bg-21.png'%});background-size:contain;">
-                  </div>
-                  <!--/.bg-holder-->
-                  <img class="img-fluid rounded mb-3 position-relative" src="{% static 'images/team/65.webp'%}" alt="..." />
-                </div>
-                <h4>Thomas Doe</h4>
-                <h6 class="mb-3 fw-semibold">UX Designer</h6><a href="#!"><span class="fa-brands fa-facebook text-primary me-3"></span></a><a href="#!"><span class="fa-brands fa-twitter text-primary me-3"></span></a><a href="#!"><span class="fa-brands fa-linkedin-in text-primary"></span></a>
-              </div>
-            </div>
-            <div class="col-sm-6 col-md-4 col-lg-3">
-              <div class="text-center mt-5 position-relative">
-                <div class="team-avatar-container d-inline-block position-relative">
-                  <div class="bg-holder" style="background-image:url({% static 'images/bg/bg-21.png'%});background-size:contain;">
-                  </div>
-                  <!--/.bg-holder-->
-                  <img class="img-fluid rounded mb-3 position-relative" src="{% static 'images/team/66.webp'%}" alt="..." />
-                </div>
-                <h4>Alan Casey</h4>
-                <h6 class="mb-3 fw-semibold">Front End Developer</h6><a href="#!"><span class="fa-brands fa-facebook text-primary me-3"></span></a><a href="#!"><span class="fa-brands fa-twitter text-primary me-3"></span></a><a href="#!"><span class="fa-brands fa-linkedin-in text-primary"></span></a>
-              </div>
-            </div>
-            <div class="col-sm-6 col-md-4 col-lg-3">
-              <div class="text-center mt-5 position-relative">
-                <div class="team-avatar-container d-inline-block position-relative">
-                  <div class="bg-holder" style="background-image:url({% static 'images/bg/bg-21.png'%});background-size:contain;">
-                  </div>
-                  <!--/.bg-holder-->
-                  <img class="img-fluid rounded mb-3 position-relative" src="{% static 'images/team/67.webp'%}" alt="..." />
-                </div>
-                <h4>Narokin Hijita</h4>
-                <h6 class="mb-3 fw-semibold">CEO, Global Cheat</h6><a href="#!"><span class="fa-brands fa-facebook text-primary me-3"></span></a><a href="#!"><span class="fa-brands fa-twitter text-primary me-3"></span></a><a href="#!"><span class="fa-brands fa-linkedin-in text-primary"></span></a>
-              </div>
-            </div>
-            <div class="col-sm-6 col-md-4 col-lg-3">
-              <div class="text-center mt-5 position-relative">
-                <div class="team-avatar-container d-inline-block position-relative">
-                  <div class="bg-holder" style="background-image:url({% static 'images/bg/bg-21.png'%});background-size:contain;">
-                  </div>
-                  <!--/.bg-holder-->
-                  <img class="img-fluid rounded mb-3 position-relative" src="{% static 'images/team/68.webp'%}" alt="..." />
-                </div>
-                <h4>Narokin Hijita</h4>
-                <h6 class="mb-3 fw-semibold">CEO, Global Cheat</h6><a href="#!"><span class="fa-brands fa-facebook text-primary me-3"></span></a><a href="#!"><span class="fa-brands fa-twitter text-primary me-3"></span></a><a href="#!"><span class="fa-brands fa-linkedin-in text-primary"></span></a>
-              </div>
-            </div>
-            <div class="col-sm-6 col-md-4 col-lg-3">
-              <div class="text-center mt-5 position-relative">
-                <div class="team-avatar-container d-inline-block position-relative">
-                  <div class="bg-holder" style="background-image:url({% static 'images/bg/bg-21.png'%});background-size:contain;">
-                  </div>
-                  <!--/.bg-holder-->
-                  <img class="img-fluid rounded mb-3 position-relative" src="{% static 'images/team/69.webp'%}" alt="..." />
-                </div>
-                <h4>Narokin Hijita</h4>
-                <h6 class="mb-3 fw-semibold">CEO, Global Cheat</h6><a href="#!"><span class="fa-brands fa-facebook text-primary me-3"></span></a><a href="#!"><span class="fa-brands fa-twitter text-primary me-3"></span></a><a href="#!"><span class="fa-brands fa-linkedin-in text-primary"></span></a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-
-      <!-- ============================================-->
-      <!-- <section> begin ============================-->
-      <section class="bg-body-emphasis pb-0">
-
-        <div class="container-small px-lg-7 px-xxl-3">
-          <div class="row justify-content-center">
-            <div class="col-12 text-center">
-              <div class="card py-md-9 px-md-13 border-0 z-1 shadow-lg cta-card">
-                <div class="bg-holder" style="background-image:url({% static 'images/bg/bg-18.png'%});background-position:right;background-size:auto;">
-                </div>
-                <!--/.bg-holder-->
-
-                <div class="card-body position-relative"><img class="img-fluid mb-5 d-dark-none" src="{% static 'images/spot-illustrations/27.png'%}" width="210" alt="..." /><img class="img-fluid mb-5 d-light-none" src="{% static 'images/spot-illustrations/dark_27.png'%}" width="210" alt="..." />
-                  <div class="d-flex align-items-center fw-bold justify-content-center mb-3">
-                    <p class="mb-0">2008 Premium Icons </p><span class="text-primary fa-solid fa-circle" data-fa-transform="shrink-12"></span>
-                    <p class="mb-0">Included FREE with it</p>
-                  </div>
-                  <h1 class="fs-6 fs-sm-4 fs-lg-2 fw-bolder lh-sm mb-3">Join<span class="gradient-text-primary mx-2">Phoenix</span><span>Today</span></h1>
-                  <form class="d-flex justify-content-center mb-3 px-xxl-12">
-                    <div class="d-grid d-sm-block"></div>
-                    <input class="form-control me-3" id="ctaEmail1" type="email" placeholder="Email" aria-describedby="ctaEmail1" />
-                    <button class="btn btn-primary" type="submit">Subscribe</button>
-                  </form>
-                  <p>Best support in the world, Only Phoenix can ensure </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- end of .container-->
-
-      </section>
-      <!-- <section> close ============================-->
-      <!-- ============================================-->
-
-
-      <div class="position-relative">
-        <div class="bg-holder footer-bg" style="background-image:url({% static 'images/bg/bg-19.png'%});background-size:auto;">
-        </div>
-        <!--/.bg-holder-->
-
-        <div class="bg-holder" style="background-image:url({% static 'images/bg/bg-right-20.png'%});background-position:right;background-size:auto;">
-        </div>
-        <!--/.bg-holder-->
-
-        <div class="bg-holder" style="background-image:url({% static 'images/bg/bg-left-20.png'%});background-position:left;background-size:auto;">
-        </div>
-        <!--/.bg-holder-->
-
-        <div class="position-relative">
-          <svg class="w-100 text-white dark__text-gray-1100" preserveAspectRatio="none" viewBox="0 0 1920 368" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M1920 0.44L0 367.74V0H1920V0.44Z" fill="currentColor"></path>
-          </svg>
-
-
-          <!-- ============================================-->
-          <!-- <section> begin ============================-->
-          <section class="footer-default">
-
-            <div class="container-small px-lg-7 px-xxl-3">
-              <div class="row position-relative">
-                <div class="col-12 col-sm-12 col-lg-5 mb-4 order-0 order-sm-0"><a href="#"><img class="mb-3" src="{% static 'images/icons/logo-white.png'%}" height="48" alt="" /></a>
-                  <h3 class="text-white">phoenix</h3>
-                  <p class="text-white opacity-50">All over the world. Alice in <br />wonderland and other places.</p>
-                </div>
-                <div class="col-lg-7">
-                  <div class="row justify-content-between">
-                    <div class="col-6 col-sm-4 col-lg-3 mb-3 order-2 order-sm-1">
-                      <div class="border-dashed border-start border-primary-light ps-3" style="--phoenix-border-opacity: .2;">
-                        <h5 class="fw-bolder mb-2 text-light">Help</h5>
-                        <ul class="list-unstyled mb-3">
-                          <li class="mb-1"><a class="text-body-quaternary" href="#!" data-bs-theme="light">About</a></li>
-                          <li class="mb-1"><a class="text-body-quaternary" href="#!" data-bs-theme="light">Contact</a></li>
-                          <li class="mb-1"><a class="text-body-quaternary" href="#!" data-bs-theme="light">Developers</a></li>
-                        </ul>
-                      </div>
-                      <div class="border-dashed border-start border-primary-light ps-3" style="--phoenix-border-opacity: .2;">
-                        <h5 class="lh-lg fw-bolder mb-2 text-light">Follow</h5>
-                        <ul class="list-unstyled mb-2">
-                          <li class="mb-1"><a class="text-body-quaternary" href="#!" data-bs-theme="light">Facebook</a></li>
-                          <li class="mb-1"><a class="text-body-quaternary" href="#!" data-bs-theme="light">Twitter</a></li>
-                          <li class="mb-1"><a class="text-body-quaternary" href="#!" data-bs-theme="light">Linkedin</a></li>
-                        </ul>
-                      </div>
-                    </div>
-                    <div class="col-6 col-sm-4 col-lg-3 mb-3 order-3 order-sm-2">
-                      <div class="border-dashed border-start border-primary-light ps-3" style="--phoenix-border-opacity: .2;">
-                        <h5 class="lh-lg fw-bold text-light mb-2">Support</h5>
-                        <ul class="list-unstyled mb-md-2">
-                          <li class="mb-1"><a class="text-body-quaternary" href="#!" data-bs-theme="light">Privacy</a></li>
-                          <li class="mb-1"><a class="text-body-quaternary" href="#!" data-bs-theme="light">Community</a></li>
-                          <li class="mb-1"><a class="text-body-quaternary" href="#!" data-bs-theme="light">Contact</a></li>
-                          <li class="mb-1"><a class="text-body-quaternary" href="#!" data-bs-theme="light">Blog</a></li>
-                          <li class="mb-1"><a class="text-body-quaternary" href="#!" data-bs-theme="light">FAQ</a></li>
-                          <li class="mb-1"><a class="text-body-quaternary" href="#!" data-bs-theme="light">Project</a></li>
-                          <li class="mb-1"><a class="text-body-quaternary" href="#!" data-bs-theme="light">Team</a></li>
-                        </ul>
-                      </div>
-                    </div>
-                    <div class="col-6 col-sm-4 col-lg-3 mb-3 order-3 order-sm-2">
-                      <div class="border-dashed border-start border-primary-light ps-3" style="--phoenix-border-opacity: .2;">
-                        <h5 class="lh-lg fw-bold text-light mb-2"> Info</h5>
-                        <ul class="list-unstyled mb-md-2">
-                          <li class="mb-1"><a class="text-body-quaternary" href="#!" data-bs-theme="light">Personal</a></li>
-                          <li class="mb-1"><a class="text-body-quaternary" href="#!" data-bs-theme="light">NFT System</a></li>
-                          <li class="mb-1"><a class="text-body-quaternary" href="#!" data-bs-theme="light">Agency</a></li>
-                          <li class="mb-1"><a class="text-body-quaternary" href="#!" data-bs-theme="light">Contact</a></li>
-                          <li class="mb-1"><a class="text-body-quaternary" href="#!" data-bs-theme="light">About</a></li>
-                        </ul>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <!-- end of .container-->
-
-          </section>
-          <!-- <section> close ============================-->
-          <!-- ============================================-->
-
-
-        </div>
-      </div>
-      <div class="support-chat-container">
-        <div class="container-fluid support-chat">
-          <div class="card bg-body-emphasis">
-            <div class="card-header d-flex flex-between-center px-4 py-3 border-bottom border-translucent">
-              <h5 class="mb-0 d-flex align-items-center gap-2">Demo widget<span class="fa-solid fa-circle text-success fs-11"></span></h5>
-              <div class="btn-reveal-trigger">
-                <button class="btn btn-link p-0 dropdown-toggle dropdown-caret-none transition-none d-flex" type="button" id="support-chat-dropdown" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h text-body"></span></button>
-                <div class="dropdown-menu dropdown-menu-end py-2" aria-labelledby="support-chat-dropdown"><a class="dropdown-item" href="#!">Request a callback</a><a class="dropdown-item" href="#!">Search in chat</a><a class="dropdown-item" href="#!">Show history</a><a class="dropdown-item" href="#!">Report to Admin</a><a class="dropdown-item btn-support-chat" href="#!">Close Support</a></div>
-              </div>
-            </div>
-            <div class="card-body chat p-0">
-              <div class="d-flex flex-column-reverse scrollbar h-100 p-3">
-                <div class="text-end mt-6"><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
-                    <p class="mb-0 fw-semibold fs-9">I need help with something</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
-                  </a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
-                    <p class="mb-0 fw-semibold fs-9">I can’t reorder a product I previously ordered</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
-                  </a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
-                    <p class="mb-0 fw-semibold fs-9">How do I place an order?</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
-                  </a><a class="false d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
-                    <p class="mb-0 fw-semibold fs-9">My payment method not working</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
-                  </a>
-                </div>
-                <div class="text-center mt-auto">
-                  <div class="avatar avatar-3xl status-online"><img class="rounded-circle border border-3 border-light-subtle" src="{% static 'images/team/30.webp'%}" alt="" /></div>
-                  <h5 class="mt-2 mb-3">Eric</h5>
-                  <p class="text-center text-body-emphasis mb-0">Ask us anything – we’ll get back to you here or by email within 24 hours.</p>
-                </div>
-              </div>
-            </div>
-            <div class="card-footer d-flex align-items-center gap-2 border-top border-translucent ps-3 pe-4 py-3">
-              <div class="d-flex align-items-center flex-1 gap-3 border border-translucent rounded-pill px-4">
-                <input class="form-control outline-none border-0 flex-1 fs-9 px-0" type="text" placeholder="Write message" />
-                <label class="btn btn-link d-flex p-0 text-body-quaternary fs-9 border-0" for="supportChatPhotos"><span class="fa-solid fa-image"></span></label>
-                <input class="d-none" type="file" accept="image/*" id="supportChatPhotos" />
-                <label class="btn btn-link d-flex p-0 text-body-quaternary fs-9 border-0" for="supportChatAttachment"> <span class="fa-solid fa-paperclip"></span></label>
-                <input class="d-none" type="file" id="supportChatAttachment" />
-              </div>
-              <button class="btn p-0 border-0 send-btn"><span class="fa-solid fa-paper-plane fs-9"></span></button>
-            </div>
-          </div>
-        </div>
-        <button class="btn btn-support-chat p-0 border border-translucent"><span class="fs-8 btn-text text-primary text-nowrap">Chat demo</span><span class="ping-icon-wrapper mt-n4 ms-n6 mt-sm-0 ms-sm-2 position-absolute position-sm-relative"><span class="ping-icon-bg"></span><span class="fa-solid fa-circle ping-icon"></span></span><span class="fa-solid fa-headset text-primary fs-8 d-sm-none"></span><span class="fa-solid fa-chevron-down text-primary fs-7"></span></button>
-      </div>
     </main>
-    <!-- ===============================================-->
-    <!--    End of Main Content-->
-    <!-- ===============================================-->
 
-
-    <div class="offcanvas offcanvas-end settings-panel border-0" id="settings-offcanvas" tabindex="-1" aria-labelledby="settings-offcanvas">
-      <div class="offcanvas-header align-items-start border-bottom flex-column border-translucent">
-        <div class="pt-1 w-100 mb-6 d-flex justify-content-between align-items-start">
-          <div>
-            <h5 class="mb-2 me-2 lh-sm"><span class="fas fa-palette me-2 fs-8"></span>Theme Customizer</h5>
-            <p class="mb-0 fs-9">Explore different styles according to your preferences</p>
-          </div>
-          <button class="btn p-1 fw-bolder" type="button" data-bs-dismiss="offcanvas" aria-label="Close"><span class="fas fa-times fs-8"> </span></button>
-        </div>
-        <button class="btn btn-phoenix-secondary w-100" data-theme-control="reset"><span class="fas fa-arrows-rotate me-2 fs-10"></span>Reset to default</button>
-      </div>
-      <div class="offcanvas-body scrollbar px-card" id="themeController">
-        <div class="setting-panel-item mt-0">
-          <h5 class="setting-panel-item-title">Color Scheme</h5>
-          <div class="row gx-2">
-            <div class="col-4">
-              <input class="btn-check" id="themeSwitcherLight" name="theme-color" type="radio" value="light" data-theme-control="phoenixTheme" />
-              <label class="btn d-inline-block btn-navbar-style fs-9" for="themeSwitcherLight"> <span class="mb-2 rounded d-block"><img class="img-fluid img-prototype mb-0" src="{% static 'images/generic/default-light.png'%}" alt=""/></span><span class="label-text">Light</span></label>
-            </div>
-            <div class="col-4">
-              <input class="btn-check" id="themeSwitcherDark" name="theme-color" type="radio" value="dark" data-theme-control="phoenixTheme" />
-              <label class="btn d-inline-block btn-navbar-style fs-9" for="themeSwitcherDark"> <span class="mb-2 rounded d-block"><img class="img-fluid img-prototype mb-0" src="{% static 'images/generic/default-dark.png'%}" alt=""/></span><span class="label-text"> Dark</span></label>
-            </div>
-            <div class="col-4">
-              <input class="btn-check" id="themeSwitcherAuto" name="theme-color" type="radio" value="auto" data-theme-control="phoenixTheme" />
-              <label class="btn d-inline-block btn-navbar-style fs-9" for="themeSwitcherAuto"> <span class="mb-2 rounded d-block"><img class="img-fluid img-prototype mb-0" src="{% static 'images/generic/auto.png'%}" alt=""/></span><span class="label-text"> Auto</span></label>
-            </div>
-          </div>
-        </div>
-        <div class="border border-translucent rounded-3 p-4 setting-panel-item bg-body-emphasis">
-          <div class="d-flex justify-content-between align-items-center">
-            <h5 class="setting-panel-item-title mb-1">RTL </h5>
-            <div class="form-check form-switch mb-0">
-              <input class="form-check-input ms-auto" type="checkbox" data-theme-control="phoenixIsRTL" />
-            </div>
-          </div>
-          <p class="mb-0 text-body-tertiary">Change text direction</p>
-        </div>
-        <div class="border border-translucent rounded-3 p-4 setting-panel-item bg-body-emphasis">
-          <div class="d-flex justify-content-between align-items-center">
-            <h5 class="setting-panel-item-title mb-1">Support Chat </h5>
-            <div class="form-check form-switch mb-0">
-              <input class="form-check-input ms-auto" type="checkbox" data-theme-control="phoenixSupportChat" />
-            </div>
-          </div>
-          <p class="mb-0 text-body-tertiary">Toggle support chat</p>
-        </div>
-        <div class="setting-panel-item">
-          <h5 class="setting-panel-item-title">Navigation Type</h5>
-          <div class="row gx-2">
-            <div class="col-6">
-              <input class="btn-check" id="navbarPositionVertical" name="navigation-type" type="radio" value="vertical" data-theme-control="phoenixNavbarPosition" data-page-url="../../documentation/layouts/vertical-navbar.html" disabled="disabled" />
-              <label class="btn d-inline-block btn-navbar-style fs-9" for="navbarPositionVertical"> <span class="rounded d-block"><img class="img-fluid img-prototype d-dark-none" src="{% static 'images/generic/default-light.png'%}" alt=""/><img class="img-fluid img-prototype d-light-none" src="{% static 'images/generic/default-dark.png'%}" alt=""/></span><span class="label-text">Vertical</span></label>
-            </div>
-            <div class="col-6">
-              <input class="btn-check" id="navbarPositionHorizontal" name="navigation-type" type="radio" value="horizontal" data-theme-control="phoenixNavbarPosition" data-page-url="../../documentation/layouts/horizontal-navbar.html" disabled="disabled" />
-              <label class="btn d-inline-block btn-navbar-style fs-9" for="navbarPositionHorizontal"> <span class="rounded d-block"><img class="img-fluid img-prototype d-dark-none" src="{% static 'images/generic/top-default.png'%}" alt=""/><img class="img-fluid img-prototype d-light-none" src="{% static 'images/generic/top-default-dark.png'%}" alt=""/></span><span class="label-text"> Horizontal</span></label>
-            </div>
-            <div class="col-6">
-              <input class="btn-check" id="navbarPositionCombo" name="navigation-type" type="radio" value="combo" data-theme-control="phoenixNavbarPosition" disabled="disabled" data-page-url="../../documentation/layouts/combo-navbar.html" />
-              <label class="btn d-inline-block btn-navbar-style fs-9" for="navbarPositionCombo"> <span class="rounded d-block"><img class="img-fluid img-prototype d-dark-none" src="{% static 'images/generic/nav-combo-light.png'%}" alt=""/><img class="img-fluid img-prototype d-light-none" src="{% static 'images/generic/nav-combo-dark.png'%}" alt=""/></span><span class="label-text"> Combo</span></label>
-            </div>
-            <div class="col-6">
-              <input class="btn-check" id="navbarPositionTopDouble" name="navigation-type" type="radio" value="dual-nav" data-theme-control="phoenixNavbarPosition" disabled="disabled" data-page-url="../../documentation/layouts/dual-nav.html" />
-              <label class="btn d-inline-block btn-navbar-style fs-9" for="navbarPositionTopDouble"> <span class="rounded d-block"><img class="img-fluid img-prototype d-dark-none" src="{% static 'images/generic/dual-light.png'%}" alt=""/><img class="img-fluid img-prototype d-light-none" src="{% static 'images/generic/dual-dark.png'%}" alt=""/></span><span class="label-text"> Dual nav</span></label>
-            </div>
-          </div>
-          <p class="text-warning-dark font-medium"> <span class="fa-solid fa-triangle-exclamation me-2 text-warning"></span>You can't update navigation type in this page</p>
-        </div>
-        <div class="setting-panel-item">
-          <h5 class="setting-panel-item-title">Vertical Navbar Appearance</h5>
-          <div class="row gx-2">
-            <div class="col-6">
-              <input class="btn-check" id="navbar-style-default" type="radio" name="config.name" value="default" data-theme-control="phoenixNavbarVerticalStyle" disabled="disabled" />
-              <label class="btn d-block w-100 btn-navbar-style fs-9" for="navbar-style-default"> <img class="img-fluid img-prototype d-dark-none" src="{% static 'images/generic/default-light.png'%}" alt="" /><img class="img-fluid img-prototype d-light-none" src="{% static 'images/generic/default-dark.png'%}" alt="" /><span class="label-text d-dark-none"> Default</span><span class="label-text d-light-none">Default</span></label>
-            </div>
-            <div class="col-6">
-              <input class="btn-check" id="navbar-style-dark" type="radio" name="config.name" value="darker" data-theme-control="phoenixNavbarVerticalStyle" disabled="disabled" />
-              <label class="btn d-block w-100 btn-navbar-style fs-9" for="navbar-style-dark"> <img class="img-fluid img-prototype d-dark-none" src="{% static 'images/generic/vertical-darker.png'%}" alt="" /><img class="img-fluid img-prototype d-light-none" src="{% static 'images/generic/vertical-lighter.png'%}" alt="" /><span class="label-text d-dark-none"> Darker</span><span class="label-text d-light-none">Lighter</span></label>
-            </div>
-          </div>
-          <p class="text-warning-dark font-medium"> <span class="fa-solid fa-triangle-exclamation me-2 text-warning"></span>You can't update vertical navbar appearance in this page</p>
-        </div>
-        <div class="setting-panel-item">
-          <h5 class="setting-panel-item-title">Horizontal Navbar Shape</h5>
-          <div class="row gx-2">
-            <div class="col-6">
-              <input class="btn-check" id="navbarShapeDefault" name="navbar-shape" type="radio" value="default" data-theme-control="phoenixNavbarTopShape" data-page-url="../../documentation/layouts/horizontal-navbar.html" disabled="disabled" />
-              <label class="btn d-inline-block btn-navbar-style fs-9" for="navbarShapeDefault"> <span class="mb-2 rounded d-block"><img class="img-fluid img-prototype d-dark-none mb-0" src="{% static 'images/generic/top-default.png'%}" alt=""/><img class="img-fluid img-prototype d-light-none mb-0" src="{% static 'images/generic/top-default-dark.png'%}" alt=""/></span><span class="label-text">Default</span></label>
-            </div>
-            <div class="col-6">
-              <input class="btn-check" id="navbarShapeSlim" name="navbar-shape" type="radio" value="slim" data-theme-control="phoenixNavbarTopShape" data-page-url="../../documentation/layouts/horizontal-navbar.html#horizontal-navbar-slim" disabled="disabled" />
-              <label class="btn d-inline-block btn-navbar-style fs-9" for="navbarShapeSlim"> <span class="mb-2 rounded d-block"><img class="img-fluid img-prototype d-dark-none mb-0" src="{% static 'images/generic/top-slim.png'%}" alt=""/><img class="img-fluid img-prototype d-light-none mb-0" src="{% static 'images/generic/top-slim-dark.png'%}" alt=""/></span><span class="label-text"> Slim</span></label>
-            </div>
-          </div>
-          <p class="text-warning-dark font-medium"> <span class="fa-solid fa-triangle-exclamation me-2 text-warning"></span>You can't update horizontal navbar shape in this page</p>
-        </div>
-        <div class="setting-panel-item">
-          <h5 class="setting-panel-item-title">Horizontal Navbar Appearance</h5>
-          <div class="row gx-2">
-            <div class="col-6">
-              <input class="btn-check" id="navbarTopDefault" name="navbar-top-style" type="radio" value="default" data-theme-control="phoenixNavbarTopStyle" disabled="disabled" />
-              <label class="btn d-inline-block btn-navbar-style fs-9" for="navbarTopDefault"> <span class="mb-2 rounded d-block"><img class="img-fluid img-prototype d-dark-none mb-0" src="{% static 'images/generic/top-default.png'%}" alt=""/><img class="img-fluid img-prototype d-light-none mb-0" src="{% static 'images/generic/top-style-darker.png'%}" alt=""/></span><span class="label-text">Default</span></label>
-            </div>
-            <div class="col-6">
-              <input class="btn-check" id="navbarTopDarker" name="navbar-top-style" type="radio" value="darker" data-theme-control="phoenixNavbarTopStyle" disabled="disabled" />
-              <label class="btn d-inline-block btn-navbar-style fs-9" for="navbarTopDarker"> <span class="mb-2 rounded d-block"><img class="img-fluid img-prototype d-dark-none mb-0" src="{% static 'images/generic/navbar-top-style-light.png'%}" alt=""/><img class="img-fluid img-prototype d-light-none mb-0" src="{% static 'images/generic/top-style-lighter.png'%}" alt=""/></span><span class="label-text d-dark-none">Darker</span><span class="label-text d-light-none">Lighter</span></label>
-            </div>
-          </div>
-          <p class="text-warning-dark font-medium"> <span class="fa-solid fa-triangle-exclamation me-2 text-warning"></span>You can't update horizontal navbar appearance in this page</p>
-        </div><a class="bun btn-primary d-grid mb-3 text-white mt-5 btn btn-primary" href="https://themes.getbootstrap.com/product/phoenix-admin-dashboard-webapp-template/" target="_blank">Purchase template</a>
-      </div>
-    </div><a class="card setting-toggle" href="#settings-offcanvas" data-bs-toggle="offcanvas">
-      <div class="card-body d-flex align-items-center px-2 py-1">
-        <div class="position-relative rounded-start" style="height:34px;width:28px">
-          <div class="settings-popover"><span class="ripple"><span class="fa-spin position-absolute all-0 d-flex flex-center"><span class="icon-spin position-absolute all-0 d-flex flex-center">
-                  <svg width="20" height="20" viewBox="0 0 20 20" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M19.7369 12.3941L19.1989 12.1065C18.4459 11.7041 18.0843 10.8487 18.0843 9.99495C18.0843 9.14118 18.4459 8.28582 19.1989 7.88336L19.7369 7.59581C19.9474 7.47484 20.0316 7.23291 19.9474 7.03131C19.4842 5.57973 18.6843 4.28943 17.6738 3.20075C17.5053 3.03946 17.2527 2.99914 17.0422 3.12011L16.393 3.46714C15.6883 3.84379 14.8377 3.74529 14.1476 3.3427C14.0988 3.31422 14.0496 3.28621 14.0002 3.25868C13.2568 2.84453 12.7055 2.10629 12.7055 1.25525V0.70081C12.7055 0.499202 12.5371 0.297594 12.2845 0.257272C10.7266 -0.105622 9.16879 -0.0653007 7.69516 0.257272C7.44254 0.297594 7.31623 0.499202 7.31623 0.70081V1.23474C7.31623 2.09575 6.74999 2.8362 5.99824 3.25599C5.95774 3.27861 5.91747 3.30159 5.87744 3.32493C5.15643 3.74527 4.26453 3.85902 3.53534 3.45302L2.93743 3.12011C2.72691 2.99914 2.47429 3.03946 2.30587 3.20075C1.29538 4.28943 0.495411 5.57973 0.0322686 7.03131C-0.051939 7.23291 0.0322686 7.47484 0.242788 7.59581L0.784376 7.8853C1.54166 8.29007 1.92694 9.13627 1.92694 9.99495C1.92694 10.8536 1.54166 11.6998 0.784375 12.1046L0.242788 12.3941C0.0322686 12.515 -0.051939 12.757 0.0322686 12.9586C0.495411 14.4102 1.29538 15.7005 2.30587 16.7891C2.47429 16.9504 2.72691 16.9907 2.93743 16.8698L3.58669 16.5227C4.29133 16.1461 5.14131 16.2457 5.8331 16.6455C5.88713 16.6767 5.94159 16.7074 5.99648 16.7375C6.75162 17.1511 7.31623 17.8941 7.31623 18.7552V19.2891C7.31623 19.4425 7.41373 19.5959 7.55309 19.696C7.64066 19.7589 7.74815 19.7843 7.85406 19.8046C9.35884 20.0925 10.8609 20.0456 12.2845 19.7729C12.5371 19.6923 12.7055 19.4907 12.7055 19.2891V18.7346C12.7055 17.8836 13.2568 17.1454 14.0002 16.7312C14.0496 16.7037 14.0988 16.6757 14.1476 16.6472C14.8377 16.2446 15.6883 16.1461 16.393 16.5227L17.0422 16.8698C17.2527 16.9907 17.5053 16.9504 17.6738 16.7891C18.7264 15.7005 19.4842 14.4102 19.9895 12.9586C20.0316 12.757 19.9474 12.515 19.7369 12.3941ZM10.0109 13.2005C8.1162 13.2005 6.64257 11.7893 6.64257 9.97478C6.64257 8.20063 8.1162 6.74905 10.0109 6.74905C11.8634 6.74905 13.3792 8.20063 13.3792 9.97478C13.3792 11.7893 11.8634 13.2005 10.0109 13.2005Z" fill="#2A7BE4"></path>
-                  </svg></span></span></span></div>
-        </div><small class="text-uppercase text-body-tertiary fw-bold py-2 pe-2 ps-1 rounded-end">customize</small>
-      </div>
-    </a>
-
-
-    <!-- ===============================================-->
-    <!--    JavaScripts-->
-    <!-- ===============================================-->
     <script src="{% static 'vendors/popper/popper.min.js' %}"></script>
     <script src="{% static 'vendors/bootstrap/bootstrap.min.js' %}"></script>
     <script src="{% static 'vendors/anchorjs/anchor.min.js' %}"></script>