diff --git a/.gitignore b/.gitignore
index adff65f4..cb4e692d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,7 @@ dbtest.sqlite3
 db.sqlite3
 db.sqlite3.backup
 db.sqlite*
+new.sqlite3
 *.sqlite3
 media
 car*.json
diff --git a/car_inventory/urls.py b/car_inventory/urls.py
index 0c31a49c..906c1c91 100644
--- a/car_inventory/urls.py
+++ b/car_inventory/urls.py
@@ -17,7 +17,7 @@ urlpatterns = [
     path("api-auth/", include("rest_framework.urls")),
     path("api/", include("api.urls")),
     # path('dj-rest-auth/', include('dj_rest_auth.urls')),
-]# + debug_toolbar_urls()
+]  # + debug_toolbar_urls()
 urlpatterns += i18n_patterns(
     path("admin/", admin.site.urls),
     path("switch_language/", views.switch_language, name="switch_language"),
diff --git a/haikalbot/migrations/0001_initial.py b/haikalbot/migrations/0001_initial.py
index 2fe92d6d..ea907f56 100644
--- a/haikalbot/migrations/0001_initial.py
+++ b/haikalbot/migrations/0001_initial.py
@@ -1,4 +1,4 @@
-# Generated by Django 5.2.4 on 2025-07-15 13:26
+# Generated by Django 5.2.4 on 2025-07-15 11:38
 
 import django.db.models.deletion
 import django.utils.timezone
diff --git a/haikalbot/migrations/0002_initial.py b/haikalbot/migrations/0002_initial.py
index b69b6b19..af1f353e 100644
--- a/haikalbot/migrations/0002_initial.py
+++ b/haikalbot/migrations/0002_initial.py
@@ -1,4 +1,4 @@
-# Generated by Django 5.2.4 on 2025-07-15 13:26
+# Generated by Django 5.2.4 on 2025-07-15 11:38
 
 import django.db.models.deletion
 from django.db import migrations, models
diff --git a/inventory/context_processors.py b/inventory/context_processors.py
index 779b6e14..fb677b93 100644
--- a/inventory/context_processors.py
+++ b/inventory/context_processors.py
@@ -1,5 +1,6 @@
 from django.conf import settings
 
+
 def currency_context(request):
     """
     Provides a context dictionary containing the currency setting. This is typically
@@ -42,7 +43,6 @@ def breadcrumbs(request):
     return {"breadcrumbs": breadcrumbs}
 
 
-
 def user_types(request):
     """
     Sets various flags indicating the user's role types.
diff --git a/inventory/forms.py b/inventory/forms.py
index dbb1e181..e77ea00e 100644
--- a/inventory/forms.py
+++ b/inventory/forms.py
@@ -142,9 +142,10 @@ class StaffForm(forms.ModelForm):
         queryset=CustomGroup.objects.all(),
         required=True,
     )
+
     class Meta:
         model = Staff
-        fields = ["name", "arabic_name", "phone_number", "address","logo","group"]
+        fields = ["name", "arabic_name", "phone_number", "address", "logo", "group"]
 
 
 # Dealer Form
@@ -1564,6 +1565,7 @@ class GroupForm(forms.ModelForm):
 #             60 * 60,
 #         )
 
+
 #     class Meta:
 #         model = Permission
 #         fields = ["name"]
@@ -1571,6 +1573,7 @@ class PermissionForm(forms.ModelForm):
     """
     Form for managing permissions with grouped checkboxes by app and model.
     """
+
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         EXCLUDED_MODELS = [
@@ -1591,31 +1594,27 @@ class PermissionForm(forms.ModelForm):
             "inventory.schedule",
             "inventory.activity",
             "inventory.opportunity",
-            "inventory.carreservation"
-            "inventory.customer",
+            "inventory.carreservationinventory.customer",
             "inventory.organization",
             # "inventory.salequotation",
             # "inventory.salequotationcar"
-
-            "django_ledger.purchaseordermodel"
-            "django_ledger.bankaccountmodel",
+            "django_ledger.purchaseordermodeldjango_ledger.bankaccountmodel",
             "django_ledger.estimatemodel",
             "django_ledger.accountmodel",
             "django_ledger.chartofaccountmodel",
-            "django_ledger.billmodel"
-            "django_ledger.itemmodel",
+            "django_ledger.billmodeldjango_ledger.itemmodel",
             "django_ledger.invoicemodel",
             "django_ledger.vendormodel",
             "django_ledger.journalentrymodel"
-            "django_ledger.purchaseordermodel",#TODO add purchase order
-            ]
+            "django_ledger.purchaseordermodel",  # TODO add purchase order
+        ]
 
         permissions = cache.get(
             "permissions_queryset",
             Permission.objects.filter(
-                content_type__app_label__in=[m.split('.')[0] for m in EXCLUDED_MODELS],
-                content_type__model__in=[m.split('.')[1] for m in EXCLUDED_MODELS]
-            ).select_related('content_type')
+                content_type__app_label__in=[m.split(".")[0] for m in EXCLUDED_MODELS],
+                content_type__model__in=[m.split(".")[1] for m in EXCLUDED_MODELS],
+            ).select_related("content_type"),
         )
 
         # Group permissions by app_label and model
@@ -1630,11 +1629,11 @@ class PermissionForm(forms.ModelForm):
             self.grouped_permissions[app_label][model].append(perm)
 
         # Create a multiple choice field (hidden, will use custom rendering)
-        self.fields['permissions'] = forms.ModelMultipleChoiceField(
+        self.fields["permissions"] = forms.ModelMultipleChoiceField(
             queryset=permissions,
             widget=forms.MultipleHiddenInput(),
             required=False,
-            initial=self.instance.permissions.all() if self.instance.pk else []
+            initial=self.instance.permissions.all() if self.instance.pk else [],
         )
 
     class Meta:
@@ -2036,17 +2035,17 @@ class CSVUploadForm(forms.Form):
     )
     year = forms.IntegerField(
         label=_("Year"),
-        widget=forms.NumberInput(attrs=
-                {
-                    "class": "form-control",
-                    "hx-get": "",
-                    "hx-target": "#serie",
-                    "hx-select": "#serie",
-                    "hx-include": "#model",
-                    "hx-trigger": "input delay:500ms",
-                    "hx-swap": "outerHTML",
-                }
-                ),
+        widget=forms.NumberInput(
+            attrs={
+                "class": "form-control",
+                "hx-get": "",
+                "hx-target": "#serie",
+                "hx-select": "#serie",
+                "hx-include": "#model",
+                "hx-trigger": "input delay:500ms",
+                "hx-swap": "outerHTML",
+            }
+        ),
         required=True,
     )
     exterior = forms.ModelChoiceField(
@@ -2101,7 +2100,8 @@ class AdditionalFinancesForm(forms.Form):
         required=False,
     )
 
+
 class VatRateForm(forms.ModelForm):
     class Meta:
         model = VatRate
-        fields = ['rate']
\ No newline at end of file
+        fields = ["rate"]
diff --git a/inventory/management/commands/set_custom_permissions.py b/inventory/management/commands/set_custom_permissions.py
index b89f0c45..91d7a577 100644
--- a/inventory/management/commands/set_custom_permissions.py
+++ b/inventory/management/commands/set_custom_permissions.py
@@ -1,16 +1,49 @@
-from inventory.models import Lead,Car
+from inventory.models import Lead, Car
 from django.contrib.auth.models import Permission
 from django.core.management.base import BaseCommand
 from django.contrib.contenttypes.models import ContentType
-from django_ledger.models import EstimateModel,BillModel,AccountModel,LedgerModel
+from django_ledger.models import EstimateModel, BillModel, AccountModel, LedgerModel
+
 
 class Command(BaseCommand):
     def handle(self, *args, **kwargs):
-        Permission.objects.get_or_create(name="Can view crm",codename="can_view_crm",content_type=ContentType.objects.get_for_model(Lead))
-        Permission.objects.get_or_create(name="Can reassign lead",codename="can_reassign_lead",content_type=ContentType.objects.get_for_model(Lead))
-        Permission.objects.get_or_create(name="Can view sales",codename="can_view_sales",content_type=ContentType.objects.get_for_model(EstimateModel))
-        Permission.objects.get_or_create(name="Can view reports",codename="can_view_reports",content_type=ContentType.objects.get_for_model(LedgerModel))
-        Permission.objects.get_or_create(name="Can view inventory",codename="can_view_inventory",content_type=ContentType.objects.get_for_model(Car))
-        Permission.objects.get_or_create(name="Can approve bill",codename="can_approve_billmodel",content_type=ContentType.objects.get_for_model(BillModel))
-        Permission.objects.get_or_create(name="Can view financials",codename="can_view_financials",content_type=ContentType.objects.get_for_model(AccountModel))
-        Permission.objects.get_or_create(name="Can approve estimate",codename="can_approve_estimatemodel",content_type=ContentType.objects.get_for_model(EstimateModel))
\ No newline at end of file
+        Permission.objects.get_or_create(
+            name="Can view crm",
+            codename="can_view_crm",
+            content_type=ContentType.objects.get_for_model(Lead),
+        )
+        Permission.objects.get_or_create(
+            name="Can reassign lead",
+            codename="can_reassign_lead",
+            content_type=ContentType.objects.get_for_model(Lead),
+        )
+        Permission.objects.get_or_create(
+            name="Can view sales",
+            codename="can_view_sales",
+            content_type=ContentType.objects.get_for_model(EstimateModel),
+        )
+        Permission.objects.get_or_create(
+            name="Can view reports",
+            codename="can_view_reports",
+            content_type=ContentType.objects.get_for_model(LedgerModel),
+        )
+        Permission.objects.get_or_create(
+            name="Can view inventory",
+            codename="can_view_inventory",
+            content_type=ContentType.objects.get_for_model(Car),
+        )
+        Permission.objects.get_or_create(
+            name="Can approve bill",
+            codename="can_approve_billmodel",
+            content_type=ContentType.objects.get_for_model(BillModel),
+        )
+        Permission.objects.get_or_create(
+            name="Can view financials",
+            codename="can_view_financials",
+            content_type=ContentType.objects.get_for_model(AccountModel),
+        )
+        Permission.objects.get_or_create(
+            name="Can approve estimate",
+            codename="can_approve_estimatemodel",
+            content_type=ContentType.objects.get_for_model(EstimateModel),
+        )
diff --git a/inventory/middleware.py b/inventory/middleware.py
index 76024761..a7bef21b 100644
--- a/inventory/middleware.py
+++ b/inventory/middleware.py
@@ -135,6 +135,7 @@ class InjectDealerMiddleware:
 #             return redirect(reverse('verify_otp'))
 #         return self.get_response(request)
 
+
 class DealerSlugMiddleware:
     def __init__(self, get_response):
         self.get_response = get_response
@@ -142,19 +143,22 @@ class DealerSlugMiddleware:
     def __call__(self, request):
         response = self.get_response(request)
         return response
+
     def process_view(self, request, view_func, view_args, view_kwargs):
-        if request.path_info.startswith('/ar/signup/') or \
-        request.path_info.startswith('/en/signup/') or \
-        request.path_info.startswith('/ar/login/') or \
-        request.path_info.startswith('/en/login/') or \
-        request.path_info.startswith('/ar/logout/') or \
-        request.path_info.startswith('/en/logout/') or \
-        request.path_info.startswith('/en/ledger/') or \
-        request.path_info.startswith('/ar/ledger/') or \
-        request.path_info.startswith('/en/notifications/') or \
-        request.path_info.startswith('/ar/notifications/') or \
-        request.path_info.startswith('/en/appointment/') or \
-        request.path_info.startswith('/ar/appointment/'):
+        if (
+            request.path_info.startswith("/ar/signup/")
+            or request.path_info.startswith("/en/signup/")
+            or request.path_info.startswith("/ar/login/")
+            or request.path_info.startswith("/en/login/")
+            or request.path_info.startswith("/ar/logout/")
+            or request.path_info.startswith("/en/logout/")
+            or request.path_info.startswith("/en/ledger/")
+            or request.path_info.startswith("/ar/ledger/")
+            or request.path_info.startswith("/en/notifications/")
+            or request.path_info.startswith("/ar/notifications/")
+            or request.path_info.startswith("/en/appointment/")
+            or request.path_info.startswith("/ar/appointment/")
+        ):
             return None
 
         if not request.user.is_authenticated:
@@ -164,12 +168,14 @@ class DealerSlugMiddleware:
         if not dealer_slug:
             return None
 
-        if not hasattr(request, 'dealer') or not request.dealer:
+        if not hasattr(request, "dealer") or not request.dealer:
             logger.warning("No dealer associated with request")
             return None
 
         if dealer_slug.lower() != request.dealer.slug.lower():
-            logger.warning(f"Dealer slug mismatch: {dealer_slug} != {request.dealer.slug}")
+            logger.warning(
+                f"Dealer slug mismatch: {dealer_slug} != {request.dealer.slug}"
+            )
             raise Http404("Dealer slug mismatch")
 
         return None
diff --git a/inventory/migrations/0001_initial.py b/inventory/migrations/0001_initial.py
index 6333f86e..68dd3af2 100644
--- a/inventory/migrations/0001_initial.py
+++ b/inventory/migrations/0001_initial.py
@@ -1,4 +1,4 @@
-# Generated by Django 5.2.4 on 2025-07-15 13:26
+# Generated by Django 5.2.4 on 2025-07-15 11:38
 
 import datetime
 import django.core.serializers.json
diff --git a/inventory/mixins.py b/inventory/mixins.py
index 02f2dc52..d7c0f84a 100644
--- a/inventory/mixins.py
+++ b/inventory/mixins.py
@@ -79,13 +79,15 @@ class DealerSlugMixin:
 
 class AuthorizedEntityMixin:
     def get_authorized_entity_queryset(self):
-        dealer = get_object_or_404(models.Dealer,slug=self.kwargs["dealer_slug"])
+        dealer = get_object_or_404(models.Dealer, slug=self.kwargs["dealer_slug"])
         return EntityModel.objects.for_user(
             user_model=dealer.entity.admin,
             authorized_superuser=self.get_superuser_authorization(),
         )
+
     def get_queryset(self):
-        dealer = get_object_or_404(models.Dealer,slug=self.kwargs["dealer_slug"])
+        dealer = get_object_or_404(models.Dealer, slug=self.kwargs["dealer_slug"])
         self.queryset = EntityModel.objects.for_user(
-            user_model=dealer.entity.admin).select_related('default_coa')
+            user_model=dealer.entity.admin
+        ).select_related("default_coa")
         return super().get_queryset()
diff --git a/inventory/models.py b/inventory/models.py
index 01875154..1408803e 100644
--- a/inventory/models.py
+++ b/inventory/models.py
@@ -18,7 +18,7 @@ from django_ledger.models import (
     ItemModel,
     CustomerModel,
     JournalEntryModel,
-    LedgerModel
+    LedgerModel,
 )
 from django_ledger.io.io_core import get_localdate
 from django.core.exceptions import ValidationError
@@ -35,7 +35,7 @@ from django_ledger.models import (
     EntityManagementModel,
     PurchaseOrderModel,
     ItemTransactionModel,
-    BillModel
+    BillModel,
 )
 from django.contrib.contenttypes.fields import GenericForeignKey
 from django.contrib.contenttypes.models import ContentType
@@ -248,9 +248,9 @@ class CarMake(models.Model, LocalizedNameMixin):
     class Meta:
         verbose_name = _("Make")
         indexes = [
-            models.Index(fields=['name'], name='car_make_name_idx'),
-            models.Index(fields=['is_sa_import'], name='car_make_sa_import_idx'),
-            models.Index(fields=['car_type'], name='car_make_type_idx'),
+            models.Index(fields=["name"], name="car_make_name_idx"),
+            models.Index(fields=["is_sa_import"], name="car_make_sa_import_idx"),
+            models.Index(fields=["car_type"], name="car_make_type_idx"),
         ]
 
 
@@ -282,9 +282,11 @@ class CarModel(models.Model, LocalizedNameMixin):
     class Meta:
         verbose_name = _("Model")
         indexes = [
-            models.Index(fields=['id_car_make'], name='car_model_make_idx'),
-            models.Index(fields=['name'], name='car_model_name_idx'),
-            models.Index(fields=['id_car_make', 'name'], name='car_model_make_name_idx'),
+            models.Index(fields=["id_car_make"], name="car_model_make_idx"),
+            models.Index(fields=["name"], name="car_model_name_idx"),
+            models.Index(
+                fields=["id_car_make", "name"], name="car_model_make_name_idx"
+            ),
         ]
 
 
@@ -321,10 +323,10 @@ class CarSerie(models.Model, LocalizedNameMixin):
     class Meta:
         verbose_name = _("Series")
         indexes = [
-            models.Index(fields=['id_car_model'], name='car_serie_model_idx'),
-            models.Index(fields=['year_begin', 'year_end'], name='car_serie_years_idx'),
-            models.Index(fields=['name'], name='car_serie_name_idx'),
-            models.Index(fields=['generation_name'], name='car_serie_generation_idx'),
+            models.Index(fields=["id_car_model"], name="car_serie_model_idx"),
+            models.Index(fields=["year_begin", "year_end"], name="car_serie_years_idx"),
+            models.Index(fields=["name"], name="car_serie_name_idx"),
+            models.Index(fields=["generation_name"], name="car_serie_generation_idx"),
         ]
 
 
@@ -360,9 +362,12 @@ class CarTrim(models.Model, LocalizedNameMixin):
     class Meta:
         verbose_name = _("Trim")
         indexes = [
-            models.Index(fields=['id_car_serie'], name='car_trim_serie_idx'),
-            models.Index(fields=['start_production_year', 'end_production_year'], name='car_trim_prod_years_idx'),
-            models.Index(fields=['name'], name='car_trim_name_idx'),
+            models.Index(fields=["id_car_serie"], name="car_trim_serie_idx"),
+            models.Index(
+                fields=["start_production_year", "end_production_year"],
+                name="car_trim_prod_years_idx",
+            ),
+            models.Index(fields=["name"], name="car_trim_name_idx"),
         ]
 
 
@@ -385,9 +390,9 @@ class CarEquipment(models.Model, LocalizedNameMixin):
     class Meta:
         verbose_name = _("Equipment")
         indexes = [
-            models.Index(fields=['id_car_trim'], name='car_equipment_trim_idx'),
-            models.Index(fields=['year_begin'], name='car_equipment_year_idx'),
-            models.Index(fields=['name'], name='car_equipment_name_idx'),
+            models.Index(fields=["id_car_trim"], name="car_equipment_trim_idx"),
+            models.Index(fields=["year_begin"], name="car_equipment_year_idx"),
+            models.Index(fields=["name"], name="car_equipment_name_idx"),
         ]
 
 
@@ -421,8 +426,8 @@ class CarSpecification(models.Model, LocalizedNameMixin):
     class Meta:
         verbose_name = _("Specification")
         indexes = [
-            models.Index(fields=['id_parent'], name='car_spec_parent_idx'),
-            models.Index(fields=['name'], name='car_spec_name_idx'),
+            models.Index(fields=["id_parent"], name="car_spec_parent_idx"),
+            models.Index(fields=["name"], name="car_spec_name_idx"),
         ]
 
 
@@ -441,9 +446,12 @@ class CarSpecificationValue(models.Model):
     class Meta:
         verbose_name = _("Specification Value")
         indexes = [
-            models.Index(fields=['id_car_trim'], name='car_spec_val_trim_idx'),
-            models.Index(fields=['id_car_specification'], name='car_spec_val_spec_idx'),
-            models.Index(fields=['id_car_trim', 'id_car_specification'], name='car_spec_val_trim_spec_idx'),
+            models.Index(fields=["id_car_trim"], name="car_spec_val_trim_idx"),
+            models.Index(fields=["id_car_specification"], name="car_spec_val_spec_idx"),
+            models.Index(
+                fields=["id_car_trim", "id_car_specification"],
+                name="car_spec_val_trim_spec_idx",
+            ),
         ]
 
 
@@ -477,8 +485,8 @@ class CarOption(models.Model, LocalizedNameMixin):
     class Meta:
         verbose_name = _("Option")
         indexes = [
-            models.Index(fields=['id_parent'], name='car_option_parent_idx'),
-            models.Index(fields=['name'], name='car_option_name_idx'),
+            models.Index(fields=["id_parent"], name="car_option_parent_idx"),
+            models.Index(fields=["name"], name="car_option_name_idx"),
         ]
 
 
@@ -500,10 +508,13 @@ class CarOptionValue(models.Model):
     class Meta:
         verbose_name = _("Option Value")
         indexes = [
-            models.Index(fields=['id_car_option'], name='car_opt_val_option_idx'),
-            models.Index(fields=['id_car_equipment'], name='car_opt_val_equipment_idx'),
-            models.Index(fields=['is_base'], name='car_opt_val_is_base_idx'),
-            models.Index(fields=['id_car_option', 'id_car_equipment'], name='cov_option_equipment_idx'),
+            models.Index(fields=["id_car_option"], name="car_opt_val_option_idx"),
+            models.Index(fields=["id_car_equipment"], name="car_opt_val_equipment_idx"),
+            models.Index(fields=["is_base"], name="car_opt_val_is_base_idx"),
+            models.Index(
+                fields=["id_car_option", "id_car_equipment"],
+                name="cov_option_equipment_idx",
+            ),
         ]
 
 
@@ -566,7 +577,7 @@ class AdditionalServices(models.Model, LocalizedNameMixin):
 
     @property
     def price_(self):
-        vat = VatRate.objects.filter(dealer=self.dealer,is_active=True).first()
+        vat = VatRate.objects.filter(dealer=self.dealer, is_active=True).first()
         return (
             Decimal(self.price + (self.price * vat.rate))
             if self.taxable
@@ -656,7 +667,10 @@ class Car(Base):
     # history = HistoricalRecords()
 
     def get_absolute_url(self):
-        return reverse("car_detail", kwargs={"dealer_slug": self.dealer.slug,"slug": self.slug})
+        return reverse(
+            "car_detail", kwargs={"dealer_slug": self.dealer.slug, "slug": self.slug}
+        )
+
     def save(self, *args, **kwargs):
         self.slug = slugify(self.vin)
         self.hash = self.get_hash
@@ -666,24 +680,27 @@ class Car(Base):
         verbose_name = _("Car")
         verbose_name_plural = _("Cars")
         indexes = [
-            models.Index(fields=['vin'], name='car_vin_idx'),
-            models.Index(fields=['year'], name='car_year_idx'),
-            models.Index(fields=['status'], name='car_status_idx'),
-
-            models.Index(fields=['dealer'], name='car_dealer_idx'),
-            models.Index(fields=['vendor'], name='car_vendor_idx'),
-            models.Index(fields=['id_car_make'], name='car_make_idx'),
-            models.Index(fields=['id_car_model'], name='car_model_idx'),
-            models.Index(fields=['id_car_serie'], name='car_serie_idx'),
-            models.Index(fields=['id_car_trim'], name='car_trim_idx'),
-
-            models.Index(fields=['id_car_make', 'id_car_model'], name='car_make_model_idx'),
-            models.Index(fields=['id_car_make', 'year'], name='car_make_year_idx'),
-            models.Index(fields=['dealer', 'status'], name='car_dealer_status_idx'),
-            models.Index(fields=['vendor', 'status'], name='car_vendor_status_idx'),
-            models.Index(fields=['year', 'status'], name='car_year_status_idx'),
-            models.Index(fields=['status'], name='car_active_status_idx',
-             condition=Q(status=CarStatusChoices.AVAILABLE)),
+            models.Index(fields=["vin"], name="car_vin_idx"),
+            models.Index(fields=["year"], name="car_year_idx"),
+            models.Index(fields=["status"], name="car_status_idx"),
+            models.Index(fields=["dealer"], name="car_dealer_idx"),
+            models.Index(fields=["vendor"], name="car_vendor_idx"),
+            models.Index(fields=["id_car_make"], name="car_make_idx"),
+            models.Index(fields=["id_car_model"], name="car_model_idx"),
+            models.Index(fields=["id_car_serie"], name="car_serie_idx"),
+            models.Index(fields=["id_car_trim"], name="car_trim_idx"),
+            models.Index(
+                fields=["id_car_make", "id_car_model"], name="car_make_model_idx"
+            ),
+            models.Index(fields=["id_car_make", "year"], name="car_make_year_idx"),
+            models.Index(fields=["dealer", "status"], name="car_dealer_status_idx"),
+            models.Index(fields=["vendor", "status"], name="car_vendor_status_idx"),
+            models.Index(fields=["year", "status"], name="car_year_status_idx"),
+            models.Index(
+                fields=["status"],
+                name="car_active_status_idx",
+                condition=Q(status=CarStatusChoices.AVAILABLE),
+            ),
         ]
 
     def __str__(self):
@@ -800,10 +817,12 @@ class Car(Base):
             car=self, exterior=exterior, interior=interior
         )
         self.save()
+
     @property
     def logo(self):
         return self.id_car_make.logo.url if self.id_car_make.logo else None
 
+
 class CarTransfer(models.Model):
     car = models.ForeignKey(
         "Car",
@@ -893,10 +912,16 @@ class CarFinance(models.Model):
         max_digits=14, decimal_places=2, verbose_name=_("Cost Price")
     )
     selling_price = models.DecimalField(
-        max_digits=14, decimal_places=2, verbose_name=_("Selling Price"),default=Decimal("0.00")
+        max_digits=14,
+        decimal_places=2,
+        verbose_name=_("Selling Price"),
+        default=Decimal("0.00"),
     )
     marked_price = models.DecimalField(
-        max_digits=14, decimal_places=2, verbose_name=_("Marked Price"),default=Decimal("0.00")
+        max_digits=14,
+        decimal_places=2,
+        verbose_name=_("Marked Price"),
+        default=Decimal("0.00"),
     )
     discount_amount = models.DecimalField(
         max_digits=14,
@@ -969,11 +994,13 @@ class CarFinance(models.Model):
         verbose_name = _("Car Financial Details")
         verbose_name_plural = _("Car Financial Details")
         indexes = [
-            models.Index(fields=['car'], name='car_finance_car_idx'),
-            models.Index(fields=['cost_price'], name='car_finance_cost_price_idx'),
-            models.Index(fields=['selling_price'], name='car_finance_selling_price_idx'),
-            models.Index(fields=['marked_price'], name='car_finance_marked_price_idx'),
-            models.Index(fields=['discount_amount'], name='car_finance_discount_idx'),
+            models.Index(fields=["car"], name="car_finance_car_idx"),
+            models.Index(fields=["cost_price"], name="car_finance_cost_price_idx"),
+            models.Index(
+                fields=["selling_price"], name="car_finance_selling_price_idx"
+            ),
+            models.Index(fields=["marked_price"], name="car_finance_marked_price_idx"),
+            models.Index(fields=["discount_amount"], name="car_finance_discount_idx"),
         ]
 
 
@@ -986,8 +1013,8 @@ class ExteriorColors(models.Model, LocalizedNameMixin):
         verbose_name = _("Exterior Colors")
         verbose_name_plural = _("Exterior Colors")
         indexes = [
-            models.Index(fields=['name'], name='exterior_color_name_idx'),
-            models.Index(fields=['arabic_name'], name='exterior_color_arabic_name_idx'),
+            models.Index(fields=["name"], name="exterior_color_name_idx"),
+            models.Index(fields=["arabic_name"], name="exterior_color_arabic_name_idx"),
         ]
 
     def __str__(self):
@@ -1003,8 +1030,8 @@ class InteriorColors(models.Model, LocalizedNameMixin):
         verbose_name = _("Interior Colors")
         verbose_name_plural = _("Interior Colors")
         indexes = [
-            models.Index(fields=['name'], name='interior_color_name_idx'),
-            models.Index(fields=['arabic_name'], name='interior_color_arabic_name_idx'),
+            models.Index(fields=["name"], name="interior_color_name_idx"),
+            models.Index(fields=["arabic_name"], name="interior_color_arabic_name_idx"),
         ]
 
     def __str__(self):
@@ -1025,9 +1052,11 @@ class CarColors(models.Model):
         verbose_name_plural = _("Colors")
         unique_together = ("car", "exterior", "interior")
         indexes = [
-            models.Index(fields=['exterior'], name='car_colors_exterior_idx'),
-            models.Index(fields=['interior'], name='car_colors_interior_idx'),
-            models.Index(fields=['exterior', 'interior'], name='car_colors_ext_int_combo_idx'),
+            models.Index(fields=["exterior"], name="car_colors_exterior_idx"),
+            models.Index(fields=["interior"], name="car_colors_interior_idx"),
+            models.Index(
+                fields=["exterior", "interior"], name="car_colors_ext_int_combo_idx"
+            ),
         ]
 
     def __str__(self):
@@ -1145,7 +1174,11 @@ class Dealer(models.Model, LocalizedNameMixin):
         max_length=200, blank=True, null=True, verbose_name=_("Address")
     )
     logo = models.ImageField(
-        upload_to="logos/users", blank=True, null=True, verbose_name=_("Logo"),default="logo.png"
+        upload_to="logos/users",
+        blank=True,
+        null=True,
+        verbose_name=_("Logo"),
+        default="logo.png",
     )
     entity = models.ForeignKey(
         EntityModel, on_delete=models.SET_NULL, null=True, blank=True
@@ -1204,7 +1237,8 @@ class Dealer(models.Model, LocalizedNameMixin):
 
     @property
     def vat_rate(self):
-        return VatRate.objects.get(dealer=self,is_active=True).rate
+        return VatRate.objects.get(dealer=self, is_active=True).rate
+
     class Meta:
         verbose_name = _("Dealer")
         verbose_name_plural = _("Dealers")
@@ -1245,10 +1279,10 @@ class Staff(models.Model, LocalizedNameMixin):
         upload_to="logos/staff", blank=True, null=True, verbose_name=_("Image")
     )
     thumbnail = ImageSpecField(
-        source='logo',
+        source="logo",
         processors=[ResizeToFill(40, 40)],
-        format='WEBP',
-        options={'quality': 80}
+        format="WEBP",
+        options={"quality": 80},
     )
     active = models.BooleanField(default=True, verbose_name=_("Active"))
     created = models.DateTimeField(auto_now_add=True, verbose_name=_("Created"))
@@ -1301,13 +1335,15 @@ class Staff(models.Model, LocalizedNameMixin):
 
     @property
     def groups(self):
-        return CustomGroup.objects.select_related("group").filter(pk__in=[x.customgroup.pk for x in self.user.groups.all()])
+        return CustomGroup.objects.select_related("group").filter(
+            pk__in=[x.customgroup.pk for x in self.user.groups.all()]
+        )
 
     def clear_groups(self):
         self.remove_superuser_permission()
         return self.user.groups.clear()
 
-    def add_group(self, group,clean=False):
+    def add_group(self, group, clean=False):
         if clean:
             self.clear_groups()
         try:
@@ -1321,19 +1357,19 @@ class Staff(models.Model, LocalizedNameMixin):
         entity = self.dealer.entity
         if entity.managers.count() == 0:
             entity.managers.add(self.user)
+
     def remove_superuser_permission(self):
         entity = self.dealer.entity
         if self.user in entity.managers.all():
             entity.managers.remove(self.user)
 
-
     class Meta:
         verbose_name = _("Staff")
         verbose_name_plural = _("Staff")
         indexes = [
             models.Index(fields=["name"]),
             models.Index(fields=["staff_type"]),
-            ]
+        ]
         permissions = []
 
     def __str__(self):
@@ -1979,7 +2015,7 @@ class Schedule(models.Model):
     dealer = models.ForeignKey(Dealer, on_delete=models.CASCADE)
     content_type = models.ForeignKey(ContentType, on_delete=models.CASCADE)
     object_id = models.PositiveIntegerField()
-    content_object = GenericForeignKey('content_type', 'object_id')
+    content_object = GenericForeignKey("content_type", "object_id")
     customer = models.ForeignKey(
         CustomerModel,
         on_delete=models.CASCADE,
@@ -2156,7 +2192,6 @@ class Opportunity(models.Model):
         #     scheduled_by=self.request.user
         # )
         return (
-
             self.lead.get_all_schedules()
             .filter(scheduled_at__gt=timezone.now())
             .order_by("scheduled_at")
@@ -2226,17 +2261,19 @@ class Notes(models.Model):
         verbose_name = _("Note")
         verbose_name_plural = _("Notes")
         indexes = [
-            models.Index(fields=['dealer'], name='note_dealer_idx'),
-            models.Index(fields=['created_by'], name='note_created_by_idx'),
-            models.Index(fields=['content_type'], name='note_content_type_idx'),
-            models.Index(fields=['content_type', 'object_id'], name='note_content_object_idx'),
-
-            models.Index(fields=['created'], name='note_created_date_idx'),
-            models.Index(fields=['updated'], name='note_updated_date_idx'),
-
-            models.Index(fields=['dealer', 'created'], name='note_dealer_created_idx'),
-            models.Index(fields=['content_type', 'object_id', 'created'],
-                         name='note_content_obj_created_idx'),
+            models.Index(fields=["dealer"], name="note_dealer_idx"),
+            models.Index(fields=["created_by"], name="note_created_by_idx"),
+            models.Index(fields=["content_type"], name="note_content_type_idx"),
+            models.Index(
+                fields=["content_type", "object_id"], name="note_content_object_idx"
+            ),
+            models.Index(fields=["created"], name="note_created_date_idx"),
+            models.Index(fields=["updated"], name="note_updated_date_idx"),
+            models.Index(fields=["dealer", "created"], name="note_dealer_created_idx"),
+            models.Index(
+                fields=["content_type", "object_id", "created"],
+                name="note_content_obj_created_idx",
+            ),
         ]
 
     def __str__(self):
@@ -2269,17 +2306,19 @@ class Tasks(models.Model):
         verbose_name = _("Task")
         verbose_name_plural = _("Tasks")
         indexes = [
-            models.Index(fields=['dealer'], name='task_dealer_idx'),
-            models.Index(fields=['created_by'], name='task_created_by_idx'),
-            models.Index(fields=['content_type'], name='task_content_type_idx'),
-            models.Index(fields=['content_type', 'object_id'], name='task_content_object_idx'),
-
-            models.Index(fields=['created'], name='task_created_date_idx'),
-            models.Index(fields=['updated'], name='task_updated_date_idx'),
-
-            models.Index(fields=['dealer', 'created'], name='task_dealer_created_idx'),
-            models.Index(fields=['content_type', 'object_id', 'created'],
-                         name='task_content_obj_created_idx'),
+            models.Index(fields=["dealer"], name="task_dealer_idx"),
+            models.Index(fields=["created_by"], name="task_created_by_idx"),
+            models.Index(fields=["content_type"], name="task_content_type_idx"),
+            models.Index(
+                fields=["content_type", "object_id"], name="task_content_object_idx"
+            ),
+            models.Index(fields=["created"], name="task_created_date_idx"),
+            models.Index(fields=["updated"], name="task_updated_date_idx"),
+            models.Index(fields=["dealer", "created"], name="task_dealer_created_idx"),
+            models.Index(
+                fields=["content_type", "object_id", "created"],
+                name="task_content_obj_created_idx",
+            ),
         ]
 
     def __str__(self):
@@ -2310,15 +2349,17 @@ class Email(models.Model):
         verbose_name = _("Email")
         verbose_name_plural = _("Emails")
         indexes = [
-            models.Index(fields=['created_by'], name='email_created_by_idx'),
-            models.Index(fields=['content_type'], name='email_content_type_idx'),
-            models.Index(fields=['content_type', 'object_id'], name='email_content_object_idx'),
-
-            models.Index(fields=['created'], name='email_created_date_idx'),
-            models.Index(fields=['updated'], name='email_updated_date_idx'),
-
-            models.Index(fields=['content_type', 'object_id', 'created'],
-                         name='email_content_obj_created_idx'),
+            models.Index(fields=["created_by"], name="email_created_by_idx"),
+            models.Index(fields=["content_type"], name="email_content_type_idx"),
+            models.Index(
+                fields=["content_type", "object_id"], name="email_content_object_idx"
+            ),
+            models.Index(fields=["created"], name="email_created_date_idx"),
+            models.Index(fields=["updated"], name="email_updated_date_idx"),
+            models.Index(
+                fields=["content_type", "object_id", "created"],
+                name="email_content_obj_created_idx",
+            ),
         ]
 
     def __str__(self):
@@ -2346,15 +2387,17 @@ class Activity(models.Model):
         verbose_name = _("Activity")
         verbose_name_plural = _("Activities")
         indexes = [
-            models.Index(fields=['created_by'], name='activity_created_by_idx'),
-            models.Index(fields=['content_type'], name='activity_content_type_idx'),
-            models.Index(fields=['content_type', 'object_id'], name='activity_content_object_idx'),
-
-            models.Index(fields=['created'], name='activity_created_date_idx'),
-            models.Index(fields=['updated'], name='activity_updated_date_idx'),
-
-            models.Index(fields=['content_type', 'object_id', 'created'],
-                         name='a_content_obj_created_idx'),
+            models.Index(fields=["created_by"], name="activity_created_by_idx"),
+            models.Index(fields=["content_type"], name="activity_content_type_idx"),
+            models.Index(
+                fields=["content_type", "object_id"], name="activity_content_object_idx"
+            ),
+            models.Index(fields=["created"], name="activity_created_date_idx"),
+            models.Index(fields=["updated"], name="activity_updated_date_idx"),
+            models.Index(
+                fields=["content_type", "object_id", "created"],
+                name="a_content_obj_created_idx",
+            ),
         ]
 
     def __str__(self):
@@ -2375,9 +2418,9 @@ class Notification(models.Model):
         ordering = ["-created"]
 
         indexes = [
-            models.Index(fields=['user'], name='notification_user_idx'),
-            models.Index(fields=['is_read'], name='notification_is_read_idx'),
-            models.Index(fields=['created'], name='notification_created_date_idx'),
+            models.Index(fields=["user"], name="notification_user_idx"),
+            models.Index(fields=["is_read"], name="notification_is_read_idx"),
+            models.Index(fields=["created"], name="notification_created_date_idx"),
         ]
 
     def __str__(self):
@@ -2423,7 +2466,9 @@ class Vendor(models.Model, LocalizedNameMixin):
     )
 
     def get_absolute_url(self):
-        return reverse("vendor_detail", kwargs={"dealer_slug":self.dealer.slug,"slug": self.slug})
+        return reverse(
+            "vendor_detail", kwargs={"dealer_slug": self.dealer.slug, "slug": self.slug}
+        )
 
     def save(self, *args, **kwargs):
         if not self.slug:
@@ -2444,10 +2489,10 @@ class Vendor(models.Model, LocalizedNameMixin):
         verbose_name = _("Vendor")
         verbose_name_plural = _("Vendors")
         indexes = [
-            models.Index(fields=['slug'], name='vendor_slug_idx'),
-            models.Index(fields=['active'], name='vendor_active_idx'),
-            models.Index(fields=['crn'], name='vendor_crn_idx'),
-            models.Index(fields=['vrn'], name='vendor_vrn_idx'),
+            models.Index(fields=["slug"], name="vendor_slug_idx"),
+            models.Index(fields=["active"], name="vendor_active_idx"),
+            models.Index(fields=["crn"], name="vendor_crn_idx"),
+            models.Index(fields=["vrn"], name="vendor_vrn_idx"),
         ]
 
     def __str__(self):
@@ -2762,6 +2807,7 @@ class CustomGroup(models.Model):
     group = models.OneToOneField(
         "auth.Group", verbose_name=_("Group"), on_delete=models.CASCADE
     )
+
     class Meta:
         verbose_name = _("Custom Group")
         verbose_name_plural = _("Custom Groups")
@@ -2808,7 +2854,7 @@ class CustomGroup(models.Model):
 
         ######################################
         ######################################
-        #MANAGER
+        # MANAGER
         ######################################
         ######################################
         if self.name == "Manager":
@@ -2855,14 +2901,21 @@ class CustomGroup(models.Model):
                     "journalentrymodel",
                     "purchaseordermodel",
                     "ledgermodel",
-                    "transactionmodel"
+                    "transactionmodel",
+                ],
+                other_perms=[
+                    "can_approve_estimatemodel",
+                    "can_approve_billmodel",
+                    "can_view_inventory",
+                    "can_view_sales",
+                    "can_view_crm",
+                    "can_view_financials",
+                    "can_view_reports",
                 ],
-                other_perms=["can_approve_estimatemodel","can_approve_billmodel","can_view_inventory","can_view_sales","can_view_crm","can_view_financials","can_view_reports"],
-
             )
             ######################################
             ######################################
-            #Inventory
+            # Inventory
             ######################################
             ######################################
         elif self.name == "Inventory":
@@ -2880,7 +2933,7 @@ class CustomGroup(models.Model):
                     "notes",
                     "tasks",
                     "activity",
-                    "poitemsuploaded"
+                    "poitemsuploaded",
                 ],
             )
             self.set_permissions(
@@ -2888,12 +2941,11 @@ class CustomGroup(models.Model):
                 allowed_models=[],
                 other_perms=[
                     "view_purchaseordermodel",
-
-                ]
+                ],
             )
             ######################################
             ######################################
-            #Sales
+            # Sales
             ######################################
             ######################################
         elif self.name == "Sales":
@@ -2915,8 +2967,7 @@ class CustomGroup(models.Model):
                     "organization",
                     "notes",
                     "tasks",
-                    "lead"
-                    "activity",
+                    "leadactivity",
                 ],
                 other_perms=[
                     "view_car",
@@ -2935,7 +2986,7 @@ class CustomGroup(models.Model):
             )
             ######################################
             ######################################
-            #Accountant
+            # Accountant
             ######################################
             ######################################
         elif self.name == "Accountant":
@@ -2948,7 +2999,7 @@ class CustomGroup(models.Model):
                     "activity",
                     "payment",
                     "vendor",
-                    ],
+                ],
                 other_perms=[
                     "view_car",
                     "view_carlocation",
@@ -2959,7 +3010,6 @@ class CustomGroup(models.Model):
                     "view_leads",
                     "view_opportunity",
                     "view_customers",
-
                 ],
             )
             self.set_permissions(
@@ -2971,18 +3021,28 @@ class CustomGroup(models.Model):
                     "itemmodel",
                     "invoicemodel",
                     "vendormodel",
-
                     "journalentrymodel",
                     "purchaseordermodel",
                     "estimatemodel",
                     "customermodel",
                     "ledgermodel",
-                    "transactionmodel"
+                    "transactionmodel",
+                ],
+                other_perms=[
+                    "view_billmodel",
+                    "add_billmodel",
+                    "change_billmodel",
+                    "delete_billmodel",
+                    "view_customermodel",
+                    "view_estimatemodel",
+                    "can_view_inventory",
+                    "can_view_sales",
+                    "can_view_crm",
+                    "can_view_financials",
+                    "can_view_reports",
                 ],
-                other_perms=["view_billmodel","add_billmodel","change_billmodel","delete_billmodel","view_customermodel", "view_estimatemodel","can_view_inventory","can_view_sales","can_view_crm","can_view_financials","can_view_reports"],
             )
 
-
     def set_permissions(self, app="inventory", allowed_models=[], other_perms=[]):
         try:
             for perm in Permission.objects.filter(
@@ -3162,7 +3222,11 @@ class PaymentHistory(models.Model):
 class PoItemsUploaded(models.Model):
     dealer = models.ForeignKey(Dealer, on_delete=models.CASCADE, null=True, blank=True)
     po = models.ForeignKey(
-        PurchaseOrderModel, on_delete=models.CASCADE, null=True, blank=True, related_name="items"
+        PurchaseOrderModel,
+        on_delete=models.CASCADE,
+        null=True,
+        blank=True,
+        related_name="items",
     )
     item = models.ForeignKey(
         ItemTransactionModel,
@@ -3182,8 +3246,11 @@ class PoItemsUploaded(models.Model):
             models.Index(fields=["po"]),
             models.Index(fields=["item"]),
         ]
+
     def get_name(self):
-        return self.item.item.name.split('||')
+        return self.item.item.name.split("||")
+
+
 class ExtraInfo(models.Model):
     """
     Stores additional information for any model with:
@@ -3191,20 +3258,19 @@ class ExtraInfo(models.Model):
     - JSON data storage
     - Tracking fields
     """
+
     dealer = models.ForeignKey(
         Dealer,
         on_delete=models.SET_NULL,
         null=True,
         blank=True,
-        related_name="extra_info"
+        related_name="extra_info",
     )
     content_type = models.ForeignKey(
-        ContentType,
-        on_delete=models.CASCADE,
-        related_name="extra_info_primary"
+        ContentType, on_delete=models.CASCADE, related_name="extra_info_primary"
     )
     object_id = models.CharField(max_length=255, null=True, blank=True)
-    content_object = GenericForeignKey('content_type', 'object_id')
+    content_object = GenericForeignKey("content_type", "object_id")
 
     # Secondary GenericForeignKey (optional additional link)
     related_content_type = models.ForeignKey(
@@ -3212,41 +3278,32 @@ class ExtraInfo(models.Model):
         on_delete=models.SET_NULL,
         null=True,
         blank=True,
-        related_name="extra_info_secondary"
+        related_name="extra_info_secondary",
     )
     related_object_id = models.CharField(max_length=255, null=True, blank=True)
-    related_object = GenericForeignKey('related_content_type', 'related_object_id')
+    related_object = GenericForeignKey("related_content_type", "related_object_id")
 
     # JSON Data Storage
-    data = models.JSONField(
-        encoder=DjangoJSONEncoder,
-        default=dict,
-        blank=True
-    )
+    data = models.JSONField(encoder=DjangoJSONEncoder, default=dict, blank=True)
 
     # Metadata
     created_at = models.DateTimeField(auto_now_add=True)
     updated_at = models.DateTimeField(auto_now=True)
     created_by = models.ForeignKey(
-        User,
-        on_delete=models.SET_NULL,
-        null=True,
-        related_name="created_extra_info"
+        User, on_delete=models.SET_NULL, null=True, related_name="created_extra_info"
     )
 
     class Meta:
         indexes = [
-            models.Index(fields=['content_type', 'object_id']),
-            models.Index(fields=['related_content_type', 'related_object_id']),
+            models.Index(fields=["content_type", "object_id"]),
+            models.Index(fields=["related_content_type", "related_object_id"]),
         ]
         verbose_name_plural = _("Extra Info")
         verbose_name = _("Extra Info")
 
-
     def __str__(self):
         return f"ExtraInfo for {self.content_object} ({self.content_type})"
 
-
     @classmethod
     def get_sale_orders(cls, staff=None, is_dealer=False):
         if not staff and not is_dealer:
@@ -3259,16 +3316,23 @@ class ExtraInfo(models.Model):
             qs = cls.objects.filter(
                 content_type=content_type,
                 related_content_type=related_content_type,
-                related_object_id__isnull=False
+                related_object_id__isnull=False,
             )
         else:
             qs = cls.objects.filter(
                 content_type=content_type,
                 related_content_type=related_content_type,
-                related_object_id=staff.pk
+                related_object_id=staff.pk,
             )
         # qs = qs.select_related("customer","estimate","invoice")
-        return [x.content_object.sale_orders.select_related("customer","estimate","invoice").first() for x in qs if x.content_object.sale_orders.first()]
+        return [
+            x.content_object.sale_orders.select_related(
+                "customer", "estimate", "invoice"
+            ).first()
+            for x in qs
+            if x.content_object.sale_orders.first()
+        ]
+
     @classmethod
     def get_invoices(cls, staff=None, is_dealer=False):
         if not staff and not is_dealer:
@@ -3281,13 +3345,17 @@ class ExtraInfo(models.Model):
             qs = cls.objects.filter(
                 content_type=content_type,
                 related_content_type=related_content_type,
-                related_object_id__isnull=False
+                related_object_id__isnull=False,
             )
         else:
             qs = cls.objects.filter(
                 content_type=content_type,
                 related_content_type=related_content_type,
-                related_object_id=staff.pk
+                related_object_id=staff.pk,
             )
         print(qs[0].content_object.invoicemodel_set.first())
-        return [x.content_object.invoicemodel_set.first() for x in qs if x.content_object.invoicemodel_set.first()]
+        return [
+            x.content_object.invoicemodel_set.first()
+            for x in qs
+            if x.content_object.invoicemodel_set.first()
+        ]
diff --git a/inventory/override.py b/inventory/override.py
index 6c2c2677..600090d3 100644
--- a/inventory/override.py
+++ b/inventory/override.py
@@ -1,7 +1,7 @@
 import logging
 from .models import Dealer
-from django.core.exceptions import ImproperlyConfigured,ValidationError
-from django.contrib.auth.mixins import LoginRequiredMixin,PermissionRequiredMixin
+from django.core.exceptions import ImproperlyConfigured, ValidationError
+from django.contrib.auth.mixins import LoginRequiredMixin, PermissionRequiredMixin
 from django_ledger.forms.bill import (
     BillModelCreateForm,
     BaseBillModelUpdateForm,
@@ -11,7 +11,7 @@ from django_ledger.forms.bill import (
     InReviewBillModelUpdateForm,
     ApprovedBillModelUpdateForm,
     AccruedAndApprovedBillModelUpdateForm,
-    PaidBillModelUpdateForm
+    PaidBillModelUpdateForm,
 )
 from django.http import HttpResponseForbidden
 from django.utils.html import format_html
@@ -21,13 +21,15 @@ from django.shortcuts import get_object_or_404
 from django.urls import reverse
 from django_ledger.models import ItemTransactionModel
 from django.views.generic.detail import DetailView
-from django_ledger.forms.purchase_order import (ApprovedPurchaseOrderModelUpdateForm,
-                                                BasePurchaseOrderModelUpdateForm,
-                                                DraftPurchaseOrderModelUpdateForm,
-                                                ReviewPurchaseOrderModelUpdateForm,
-                                                get_po_itemtxs_formset_class)
+from django_ledger.forms.purchase_order import (
+    ApprovedPurchaseOrderModelUpdateForm,
+    BasePurchaseOrderModelUpdateForm,
+    DraftPurchaseOrderModelUpdateForm,
+    ReviewPurchaseOrderModelUpdateForm,
+    get_po_itemtxs_formset_class,
+)
 from django_ledger.views.purchase_order import PurchaseOrderModelModelViewQuerySetMixIn
-from django_ledger.models import PurchaseOrderModel,EstimateModel,BillModel
+from django_ledger.models import PurchaseOrderModel, EstimateModel, BillModel
 from django.views.generic.detail import SingleObjectMixin
 from django.views.generic.edit import UpdateView
 from django.views.generic.base import RedirectView
@@ -38,18 +40,17 @@ from django.utils.translation import gettext_lazy as _
 logger = logging.getLogger(__name__)
 logging.basicConfig(level=logging.INFO)
 
-class PurchaseOrderModelUpdateView(LoginRequiredMixin,
-                                   PermissionRequiredMixin,
-                                   UpdateView):
-    slug_url_kwarg = 'po_pk'
-    slug_field = 'uuid'
-    context_object_name = 'po_model'
+
+class PurchaseOrderModelUpdateView(
+    LoginRequiredMixin, PermissionRequiredMixin, UpdateView
+):
+    slug_url_kwarg = "po_pk"
+    slug_field = "uuid"
+    context_object_name = "po_model"
     template_name = "purchase_orders/po_update.html"
     context_object_name = "po_model"
     permission_required = "django_ledger.change_purchaseordermodel"
-    extra_context = {
-        'header_subtitle_icon': 'uil:bill'
-    }
+    extra_context = {"header_subtitle_icon": "uil:bill"}
     action_update_items = False
     queryset = None
 
@@ -79,10 +80,10 @@ class PurchaseOrderModelUpdateView(LoginRequiredMixin,
         dealer = get_object_or_404(Dealer, slug=self.kwargs["dealer_slug"])
         if self.queryset is None:
             self.queryset = PurchaseOrderModel.objects.for_entity(
-                entity_slug=self.kwargs['entity_slug'],
-                user_model=dealer.entity.admin
-            ).select_related('entity', 'ce_model')
+                entity_slug=self.kwargs["entity_slug"], user_model=dealer.entity.admin
+            ).select_related("entity", "ce_model")
         return super().get_queryset()
+
     def get_success_url(self):
         return reverse(
             "purchase_order_update",
@@ -92,6 +93,7 @@ class PurchaseOrderModelUpdateView(LoginRequiredMixin,
                 "po_pk": self.kwargs["po_pk"],
             },
         )
+
     def get(self, request, dealer_slug, entity_slug, po_pk, *args, **kwargs):
         if self.action_update_items:
             return HttpResponseRedirect(
@@ -106,7 +108,7 @@ class PurchaseOrderModelUpdateView(LoginRequiredMixin,
             )
         return super(PurchaseOrderModelUpdateView, self).get(
             request, dealer_slug, entity_slug, po_pk, *args, **kwargs
-            )
+        )
 
     def post(self, request, dealer_slug, entity_slug, *args, **kwargs):
         if self.action_update_items:
@@ -199,78 +201,87 @@ class PurchaseOrderModelUpdateView(LoginRequiredMixin,
     def get_form_kwargs(self):
         if self.action_update_items:
             return {
-                'initial': self.get_initial(),
-                'prefix': self.get_prefix(),
-                'instance': self.object
+                "initial": self.get_initial(),
+                "prefix": self.get_prefix(),
+                "instance": self.object,
             }
         return super(PurchaseOrderModelUpdateView, self).get_form_kwargs()
 
-
     def get_po_itemtxs_qs(self, po_model: PurchaseOrderModel):
-        return po_model.itemtransactionmodel_set.select_related('bill_model', 'po_model').order_by('created')
+        return po_model.itemtransactionmodel_set.select_related(
+            "bill_model", "po_model"
+        ).order_by("created")
 
     def form_valid(self, form: BasePurchaseOrderModelUpdateForm):
         po_model: PurchaseOrderModel = form.save(commit=False)
 
         if form.has_changed():
             po_items_qs = ItemTransactionModel.objects.for_po(
-                entity_slug=self.kwargs['entity_slug'],
+                entity_slug=self.kwargs["entity_slug"],
                 user_model=self.request.admin,
                 po_pk=po_model.uuid,
-            ).select_related('bill_model')
+            ).select_related("bill_model")
 
-            if all(['po_status' in form.changed_data,
-                    po_model.po_status == po_model.PO_STATUS_APPROVED]):
-                po_items_qs.update(po_item_status=ItemTransactionModel.STATUS_NOT_ORDERED)
-
-            if 'fulfilled' in form.changed_data:
+            if all(
+                [
+                    "po_status" in form.changed_data,
+                    po_model.po_status == po_model.PO_STATUS_APPROVED,
+                ]
+            ):
+                po_items_qs.update(
+                    po_item_status=ItemTransactionModel.STATUS_NOT_ORDERED
+                )
 
+            if "fulfilled" in form.changed_data:
                 if not all([i.bill_model for i in po_items_qs]):
-                    messages.add_message(self.request,
-                                         messages.ERROR,
-                                         f'All PO items must be billed before marking'
-                                         f' PO: {po_model.po_number} as fulfilled.',
-                                         extra_tags='is-danger')
+                    messages.add_message(
+                        self.request,
+                        messages.ERROR,
+                        f"All PO items must be billed before marking"
+                        f" PO: {po_model.po_number} as fulfilled.",
+                        extra_tags="is-danger",
+                    )
                     return self.get(self.request)
 
                 else:
                     if not all([i.bill_model.is_paid() for i in po_items_qs]):
-                        messages.add_message(self.request,
-                                             messages.SUCCESS,
-                                             f'All bills must be paid before marking'
-                                             f' PO: {po_model.po_number} as fulfilled.',
-                                             extra_tags='is-success')
+                        messages.add_message(
+                            self.request,
+                            messages.SUCCESS,
+                            f"All bills must be paid before marking"
+                            f" PO: {po_model.po_number} as fulfilled.",
+                            extra_tags="is-success",
+                        )
                         return self.get(self.request)
 
                 po_items_qs.update(po_item_status=ItemTransactionModel.STATUS_RECEIVED)
 
-        messages.add_message(self.request,
-                             messages.SUCCESS,
-                             f'{self.object.po_number} successfully updated.',
-                             extra_tags='is-success')
+        messages.add_message(
+            self.request,
+            messages.SUCCESS,
+            f"{self.object.po_number} successfully updated.",
+            extra_tags="is-success",
+        )
 
         return super().form_valid(form)
 
 
-
-class BasePurchaseOrderActionActionView(LoginRequiredMixin,
-                                        PermissionRequiredMixin,
-                                        RedirectView,
-                                        SingleObjectMixin):
-    http_method_names = ['get']
-    pk_url_kwarg = 'po_pk'
+class BasePurchaseOrderActionActionView(
+    LoginRequiredMixin, PermissionRequiredMixin, RedirectView, SingleObjectMixin
+):
+    http_method_names = ["get"]
+    pk_url_kwarg = "po_pk"
     action_name = None
     commit = True
     permission_required = None
     queryset = None
 
     def get_queryset(self):
-        dealer = get_object_or_404(Dealer, slug=self.kwargs['dealer_slug'])
+        dealer = get_object_or_404(Dealer, slug=self.kwargs["dealer_slug"])
         if self.queryset is None:
             self.queryset = PurchaseOrderModel.objects.for_entity(
-                entity_slug=self.kwargs['entity_slug'],
-                user_model=dealer.entity.admin
-            ).select_related('entity', 'ce_model')
+                entity_slug=self.kwargs["entity_slug"], user_model=dealer.entity.admin
+            ).select_related("entity", "ce_model")
         return super().get_queryset()
 
     def get_redirect_url(self, dealer_slug, entity_slug, po_pk, *args, **kwargs):
@@ -286,7 +297,9 @@ class BasePurchaseOrderActionActionView(LoginRequiredMixin,
     def get(self, request, dealer_slug, entity_slug, po_pk, *args, **kwargs):
         # kwargs["user_model"] = dealer.entity.admin
         # Get user information for logging
-        user_username = request.user.username if request.user.is_authenticated else 'anonymous'
+        user_username = (
+            request.user.username if request.user.is_authenticated else "anonymous"
+        )
 
         dealer = get_object_or_404(Dealer, slug=dealer_slug)
         kwargs["user_model"] = dealer.entity.admin
@@ -297,7 +310,7 @@ class BasePurchaseOrderActionActionView(LoginRequiredMixin,
         )
         po_model: PurchaseOrderModel = self.get_object()
 
-         # Log the attempt to perform the action
+        # Log the attempt to perform the action
         logger.debug(
             f"User {user_username}  attempting to call action '{self.action_name}' "
             f"on Purchase Order ID: {po_model.pk} (Entity: {entity_slug})."
@@ -315,19 +328,23 @@ class BasePurchaseOrderActionActionView(LoginRequiredMixin,
                 level=messages.SUCCESS,
             )
         except ValidationError as e:
-             # --- Single-line log for ValidationError ---
-            print(f"User {user_username}  encountered a validation error "
+            # --- Single-line log for ValidationError ---
+            print(
+                f"User {user_username}  encountered a validation error "
                 f"while performing action '{self.action_name}' on Purchase Order ID: {po_model.pk}. "
-                f"Error: {e}")
+                f"Error: {e}"
+            )
             logger.warning(
                 f"User {user_username}  encountered a validation error "
                 f"while performing action '{self.action_name}' on Purchase Order ID: {po_model.pk}. "
                 f"Error: {e}"
             )
         except AttributeError as e:
-            print(f"User {user_username}  encountered an AttributeError "
+            print(
+                f"User {user_username}  encountered an AttributeError "
                 f"while performing action '{self.action_name}' on Purchase Order ID: {po_model.pk}. "
-                f"Error: {e}")
+                f"Error: {e}"
+            )
             logger.warning(
                 f"User {user_username}  encountered an AttributeError "
                 f"while performing action '{self.action_name}' on Purchase Order ID: {po_model.pk}. "
@@ -335,48 +352,54 @@ class BasePurchaseOrderActionActionView(LoginRequiredMixin,
             )
         return response
 
+
 class BillModelDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailView):
-    slug_url_kwarg = 'bill_pk'
-    slug_field = 'uuid'
-    context_object_name = 'bill'
+    slug_url_kwarg = "bill_pk"
+    slug_field = "uuid"
+    context_object_name = "bill"
     template_name = "bill/bill_detail.html"
-    extra_context = {
-        'header_subtitle_icon': 'uil:bill',
-        'hide_menu': True
-    }
+    extra_context = {"header_subtitle_icon": "uil:bill", "hide_menu": True}
 
     def get_context_data(self, *, object_list=None, **kwargs):
         context = super().get_context_data(object_list=object_list, **kwargs)
         context["dealer"] = self.request.dealer
         bill_model: BillModel = self.object
-        title = f'Bill {bill_model.bill_number}'
-        context['page_title'] = title
-        context['header_title'] = title
+        title = f"Bill {bill_model.bill_number}"
+        context["page_title"] = title
+        context["header_title"] = title
 
         bill_model: BillModel = self.object
         bill_items_qs, item_data = bill_model.get_itemtxs_data()
-        context['itemtxs_qs'] = bill_items_qs
-        context['total_amount__sum'] = item_data['total_amount__sum']
+        context["itemtxs_qs"] = bill_items_qs
+        context["total_amount__sum"] = item_data["total_amount__sum"]
 
         if not bill_model.is_configured():
             link = format_html(f"""
-            <a href="{reverse("bill-update", kwargs={
-                'dealer_slug': self.kwargs['dealer_slug'],
-                'entity_slug': self.kwargs['entity_slug'],
-                'bill_pk': bill_model.uuid
-            })}">here</a>
+            <a href="{
+                reverse(
+                    "bill-update",
+                    kwargs={
+                        "dealer_slug": self.kwargs["dealer_slug"],
+                        "entity_slug": self.kwargs["entity_slug"],
+                        "bill_pk": bill_model.uuid,
+                    },
+                )
+            }">here</a>
             """)
-            msg = f'Bill {bill_model.bill_number} has not been fully set up. ' + \
-                  f'Please update or assign associated accounts {link}.'
-            messages.add_message(self.request,
-                                 message=msg,
-                                 level=messages.WARNING,
-                                 extra_tags='is-danger')
+            msg = (
+                f"Bill {bill_model.bill_number} has not been fully set up. "
+                + f"Please update or assign associated accounts {link}."
+            )
+            messages.add_message(
+                self.request,
+                message=msg,
+                level=messages.WARNING,
+                extra_tags="is-danger",
+            )
         return context
 
-
     def get_queryset(self):
-        dealer = get_object_or_404(Dealer,slug=self.kwargs['dealer_slug'])
+        dealer = get_object_or_404(Dealer, slug=self.kwargs["dealer_slug"])
         if self.queryset is None:
             entity_model = dealer.entity
             qs = entity_model.get_bills()
@@ -385,54 +408,59 @@ class BillModelDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailVie
 
 
 ######################################################3
-#BILL
+# BILL
+
 
 class BillModelUpdateView(LoginRequiredMixin, PermissionRequiredMixin, UpdateView):
-    slug_url_kwarg = 'bill_pk'
-    slug_field = 'uuid'
-    context_object_name = 'bill_model'
+    slug_url_kwarg = "bill_pk"
+    slug_field = "uuid"
+    context_object_name = "bill_model"
     template_name = "bill/bill_update.html"
-    extra_context = {
-        'header_subtitle_icon': 'uil:bill'
-    }
-    http_method_names = ['get', 'post']
+    extra_context = {"header_subtitle_icon": "uil:bill"}
+    http_method_names = ["get", "post"]
     action_update_items = False
     queryset = None
 
     def get_queryset(self):
-        dealer = get_object_or_404(Dealer,slug=self.kwargs['dealer_slug'])
+        dealer = get_object_or_404(Dealer, slug=self.kwargs["dealer_slug"])
         if self.queryset is None:
             entity_model = dealer.entity
             qs = entity_model.get_bills()
             self.queryset = qs
-        return super().get_queryset().select_related(
-            'ledger',
-            'ledger__entity',
-            'vendor',
-            'cash_account',
-            'prepaid_account',
-            'unearned_account',
-            'cash_account__coa_model',
-            'prepaid_account__coa_model',
-            'unearned_account__coa_model'
+        return (
+            super()
+            .get_queryset()
+            .select_related(
+                "ledger",
+                "ledger__entity",
+                "vendor",
+                "cash_account",
+                "prepaid_account",
+                "unearned_account",
+                "cash_account__coa_model",
+                "prepaid_account__coa_model",
+                "unearned_account__coa_model",
+            )
         )
 
     def get_form(self, form_class=None):
         form_class = self.get_form_class()
         entity_model = self.request.dealer.entity
-        if self.request.method == 'POST' and self.action_update_items:
+        if self.request.method == "POST" and self.action_update_items:
             return form_class(
                 entity_model=entity_model,
                 user_model=self.request.admin,
-                instance=self.object
+                instance=self.object,
             )
         form = form_class(
             entity_model=entity_model,
             user_model=self.request.admin,
-            **self.get_form_kwargs()
+            **self.get_form_kwargs(),
         )
         try:
-            form.initial['amount_paid'] = self.object.get_itemtxs_data()[1]["total_amount__sum"]
+            form.initial["amount_paid"] = self.object.get_itemtxs_data()[1][
+                "total_amount__sum"
+            ]
         except Exception as e:
             print(e)
         return form
@@ -453,54 +481,57 @@ class BillModelUpdateView(LoginRequiredMixin, PermissionRequiredMixin, UpdateVie
             return PaidBillModelUpdateForm
         return BaseBillModelUpdateForm
 
-    def get_context_data(self,
-                         *,
-                         object_list=None,
-                         itemtxs_formset=None,
-                         **kwargs):
-
+    def get_context_data(self, *, object_list=None, itemtxs_formset=None, **kwargs):
         context = super().get_context_data(object_list=object_list, **kwargs)
-        dealer = get_object_or_404(Dealer,slug=self.kwargs['dealer_slug'])
+        dealer = get_object_or_404(Dealer, slug=self.kwargs["dealer_slug"])
         entity_model = dealer.entity
         bill_model: BillModel = self.object
         ledger_model = bill_model.ledger
 
-        title = f'Bill {bill_model.bill_number}'
-        context['page_title'] = title
-        context['header_title'] = title
-        context['header_subtitle'] = bill_model.get_bill_status_display()
+        title = f"Bill {bill_model.bill_number}"
+        context["page_title"] = title
+        context["header_title"] = title
+        context["header_subtitle"] = bill_model.get_bill_status_display()
 
         if not bill_model.is_configured():
             messages.add_message(
                 request=self.request,
-                message=f'Bill {bill_model.bill_number} must have all accounts configured.',
+                message=f"Bill {bill_model.bill_number} must have all accounts configured.",
                 level=messages.ERROR,
-                extra_tags='is-danger'
+                extra_tags="is-danger",
             )
 
         if not bill_model.is_paid():
             if ledger_model.locked:
-                messages.add_message(self.request,
-                                messages.ERROR,
-                                f'Warning! This bill is locked. Must unlock before making any changes.',
-                                extra_tags='is-danger')
+                messages.add_message(
+                    self.request,
+                    messages.ERROR,
+                    f"Warning! This bill is locked. Must unlock before making any changes.",
+                    extra_tags="is-danger",
+                )
 
         if ledger_model.locked:
-            messages.add_message(self.request,
-                                 messages.ERROR,
-                                 f'Warning! This bill is locked. Must unlock before making any changes.',
-                                 extra_tags='is-danger')
+            messages.add_message(
+                self.request,
+                messages.ERROR,
+                f"Warning! This bill is locked. Must unlock before making any changes.",
+                extra_tags="is-danger",
+            )
 
         if not ledger_model.is_posted():
-            messages.add_message(self.request,
-                                 messages.INFO,
-                                 f'This bill has not been posted. Must post to see ledger changes.',
-                                 extra_tags='is-info')
+            messages.add_message(
+                self.request,
+                messages.INFO,
+                f"This bill has not been posted. Must post to see ledger changes.",
+                extra_tags="is-info",
+            )
 
         itemtxs_qs = itemtxs_formset.get_queryset() if itemtxs_formset else None
         if not itemtxs_formset:
             itemtxs_formset_class = get_bill_itemtxs_formset_class(bill_model)
-            itemtxs_formset = itemtxs_formset_class(entity_model=entity_model, bill_model=bill_model)
+            itemtxs_formset = itemtxs_formset_class(
+                entity_model=entity_model, bill_model=bill_model
+            )
         itemtxs_qs, itemtxs_agg = bill_model.get_itemtxs_data(queryset=itemtxs_qs)
 
         has_po = any(i.po_model_id for i in itemtxs_qs)
@@ -509,9 +540,9 @@ class BillModelUpdateView(LoginRequiredMixin, PermissionRequiredMixin, UpdateVie
             itemtxs_formset.can_delete = False
             itemtxs_formset.has_po = has_po
 
-        context['itemtxs_formset'] = itemtxs_formset
-        context['total_amount__sum'] = itemtxs_agg['total_amount__sum']
-        context['has_po'] = has_po
+        context["itemtxs_formset"] = itemtxs_formset
+        context["total_amount__sum"] = itemtxs_agg["total_amount__sum"]
+        context["has_po"] = has_po
         return context
 
     def get_success_url(self):
@@ -523,23 +554,28 @@ class BillModelUpdateView(LoginRequiredMixin, PermissionRequiredMixin, UpdateVie
                 "bill_pk": self.kwargs["bill_pk"],
             },
         )
+
     def form_valid(self, form):
         form.save(commit=False)
-        messages.add_message(self.request,
-                             messages.SUCCESS,
-                             f'Bill {self.object.bill_number} successfully updated.',
-                             extra_tags='is-success')
+        messages.add_message(
+            self.request,
+            messages.SUCCESS,
+            f"Bill {self.object.bill_number} successfully updated.",
+            extra_tags="is-success",
+        )
         return super().form_valid(form)
 
-    def get(self, request,dealer_slug,entity_slug,bill_pk, *args, **kwargs):
+    def get(self, request, dealer_slug, entity_slug, bill_pk, *args, **kwargs):
         if self.action_update_items:
             return HttpResponseRedirect(
-                redirect_to=reverse('bill-update',
-                                    kwargs={
-                                        'dealer_slug': dealer_slug,
-                                        'entity_slug': entity_slug,
-                                        'bill_pk': bill_pk
-                                    })
+                redirect_to=reverse(
+                    "bill-update",
+                    kwargs={
+                        "dealer_slug": dealer_slug,
+                        "entity_slug": entity_slug,
+                        "bill_pk": bill_pk,
+                    },
+                )
             )
         return super(BillModelUpdateView, self).get(request, *args, **kwargs)
 
@@ -614,10 +650,11 @@ class BillModelUpdateView(LoginRequiredMixin, PermissionRequiredMixin, UpdateVie
         )
 
 
-
-class BaseBillActionView(LoginRequiredMixin,PermissionRequiredMixin, RedirectView, SingleObjectMixin):
-    http_method_names = ['get']
-    pk_url_kwarg = 'bill_pk'
+class BaseBillActionView(
+    LoginRequiredMixin, PermissionRequiredMixin, RedirectView, SingleObjectMixin
+):
+    http_method_names = ["get"]
+    pk_url_kwarg = "bill_pk"
     action_name = None
     commit = True
     permission_required = "django_ledger.change_billmodel"
@@ -631,7 +668,6 @@ class BaseBillActionView(LoginRequiredMixin,PermissionRequiredMixin, RedirectVie
             self.queryset = qs
         return super().get_queryset()
 
-
     def get_redirect_url(self, dealer_slug, entity_slug, bill_pk, *args, **kwargs):
         return reverse(
             "bill-update",
@@ -642,58 +678,56 @@ class BaseBillActionView(LoginRequiredMixin,PermissionRequiredMixin, RedirectVie
             },
         )
 
-
     def get(self, request, *args, **kwargs):
         dealer = get_object_or_404(Dealer, slug=self.kwargs["dealer_slug"])
-        kwargs['user_model'] = dealer.entity.admin
+        kwargs["user_model"] = dealer.entity.admin
         if not self.action_name:
-            raise ImproperlyConfigured('View attribute action_name is required.')
+            raise ImproperlyConfigured("View attribute action_name is required.")
         response = super(BaseBillActionView, self).get(request, *args, **kwargs)
         bill_model: BillModel = self.get_object()
 
         try:
             getattr(bill_model, self.action_name)(commit=self.commit, **kwargs)
         except ValidationError as e:
-            messages.add_message(request,
-                                 message=e.message,
-                                 level=messages.ERROR,
-                                 extra_tags='is-danger')
+            messages.add_message(
+                request, message=e.message, level=messages.ERROR, extra_tags="is-danger"
+            )
         return response
 
 
 class InventoryListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
-    template_name = 'django_ledger/inventory/inventory_list.html'
-    context_object_name = 'inventory_list'
-    http_method_names = ['get']
+    template_name = "django_ledger/inventory/inventory_list.html"
+    context_object_name = "inventory_list"
+    http_method_names = ["get"]
 
     def get_context_data(self, *, object_list=None, **kwargs):
         context = super(InventoryListView, self).get_context_data(**kwargs)
         qs = self.get_queryset()
 
         # evaluates the queryset...
-        context['qs_count'] = qs.count()
+        context["qs_count"] = qs.count()
 
         # ordered inventory...
         ordered_qs = qs.is_ordered()
-        context['inventory_ordered'] = ordered_qs
+        context["inventory_ordered"] = ordered_qs
 
         # in transit inventory...
         in_transit_qs = qs.in_transit()
-        context['inventory_in_transit'] = in_transit_qs
+        context["inventory_in_transit"] = in_transit_qs
 
         # on hand inventory...
         received_qs = qs.is_received()
-        context['inventory_received'] = received_qs
+        context["inventory_received"] = received_qs
 
-        context['page_title'] = _('Inventory')
-        context['header_title'] = _('Inventory Status')
-        context['header_subtitle'] = _('Ordered/In Transit/On Hand')
-        context['header_subtitle_icon'] = 'ic:round-inventory'
+        context["page_title"] = _("Inventory")
+        context["header_title"] = _("Inventory Status")
+        context["header_subtitle"] = _("Ordered/In Transit/On Hand")
+        context["header_subtitle_icon"] = "ic:round-inventory"
         return context
 
     def get_queryset(self):
         if self.queryset is None:
             self.queryset = ItemTransactionModel.objects.inventory_pipeline_aggregate(
-                entity_slug=self.kwargs['entity_slug'],
+                entity_slug=self.kwargs["entity_slug"],
             )
-        return super().get_queryset()
\ No newline at end of file
+        return super().get_queryset()
diff --git a/inventory/signals.py b/inventory/signals.py
index dc311f32..8d3eeebf 100644
--- a/inventory/signals.py
+++ b/inventory/signals.py
@@ -18,16 +18,17 @@ from django_ledger.models import (
     AccountModel,
     PurchaseOrderModel,
     EstimateModel,
-    BillModel
+    BillModel,
 )
 from . import models
 from django.utils.timezone import now
 from django.db import transaction
 from django_q.tasks import async_task
 
-#logging
+# logging
 import logging
-logger=logging.getLogger(__name__)
+
+logger = logging.getLogger(__name__)
 
 User = get_user_model()
 
@@ -94,7 +95,9 @@ def create_car_location(sender, instance, created, **kwargs):
     try:
         if created:
             # Log that the signal was triggered for a new car
-            logger.debug(f"Post-save signal triggered for new Car (VIN: {instance.vin}). Attempting to create CarLocation.")
+            logger.debug(
+                f"Post-save signal triggered for new Car (VIN: {instance.vin}). Attempting to create CarLocation."
+            )
 
             if instance.dealer is None:
                 # Log the critical data integrity error before raising
@@ -122,7 +125,7 @@ def create_car_location(sender, instance, created, **kwargs):
         logger.error(
             f"Failed to create CarLocation for car (VIN: {instance.vin}). "
             f"An unexpected error occurred: {e}",
-            exc_info=True
+            exc_info=True,
         )
         print(f"Failed to create CarLocation for car {instance.vin}: {e}")
 
@@ -171,7 +174,7 @@ def create_ledger_entity(sender, instance, created, **kwargs):
                     entity.create_uom(name=u[1], unit_abbr=u[0])
 
             # Create COA accounts, background task
-            async_task(create_coa_accounts,instance)
+            async_task(create_coa_accounts, instance)
 
             # create_settings(instance.pk)
             # create_accounts_for_make(instance.pk)
@@ -195,10 +198,8 @@ def create_dealer_groups(sender, instance, created, **kwargs):
     if created:
         # async_task("inventory.tasks.create_groups",instance.slug)
         def create_groups():
-            for group_name in ["Inventory", "Accountant", "Sales","Manager"]:
-                group= Group.objects.create(
-                    name=f"{instance.slug}_{group_name}"
-                )
+            for group_name in ["Inventory", "Accountant", "Sales", "Manager"]:
+                group = Group.objects.create(name=f"{instance.slug}_{group_name}")
                 group_manager = models.CustomGroup.objects.create(
                     name=group_name, dealer=instance, group=group
                 )
@@ -553,13 +554,13 @@ def track_lead_status_change(sender, instance, **kwargs):
                     new_status=instance.status,
                     changed_by=instance.staff,  # Assuming the assigned staff made the change
                 )
-                 # --- Single-line log for successful status change and history creation ---
+                # --- Single-line log for successful status change and history creation ---
                 logger.info(
                     f"Lead ID: {instance.pk} status changed from '{old_lead.status}' to '{instance.status}'. "
                     f"LeadStatusHistory recorded by Staff: {instance.staff.username if instance.staff else 'N/A'}."
                 )
         except models.Lead.DoesNotExist:
-             # --- Single-line log for expected Lead.DoesNotExist (e.g., during initial object creation) ---
+            # --- Single-line log for expected Lead.DoesNotExist (e.g., during initial object creation) ---
             logger.debug(
                 f"Lead ID: {instance.pk} not found in database when checking for status change. "
                 f"This might occur during initial object creation. Skipping status history tracking."
@@ -760,20 +761,20 @@ def create_dealer_settings(sender, instance, created, **kwargs):
 #         entity = instance.entity
 #         coa = entity.get_default_coa()
 
-        # for make in models.CarMake.objects.all():
-        #     last_account = entity.get_all_accounts().filter(role=roles.ASSET_CA_RECEIVABLES).order_by('-created').first()
-        #     if len(last_account.code) == 4:
-        #         code = f"{int(last_account.code)}{1:03d}"
-        #     elif len(last_account.code) > 4:
-        #         code = f"{int(last_account.code)+1}"
-        #     entity.create_account(
-        #         name=make.name,
-        #         code=code,
-        #         role=roles.ASSET_CA_RECEIVABLES,
-        #         coa_model=coa,
-        #         balance_type="credit",
-        #         active=True
-        #     )
+# for make in models.CarMake.objects.all():
+#     last_account = entity.get_all_accounts().filter(role=roles.ASSET_CA_RECEIVABLES).order_by('-created').first()
+#     if len(last_account.code) == 4:
+#         code = f"{int(last_account.code)}{1:03d}"
+#     elif len(last_account.code) > 4:
+#         code = f"{int(last_account.code)+1}"
+#     entity.create_account(
+#         name=make.name,
+#         code=code,
+#         role=roles.ASSET_CA_RECEIVABLES,
+#         coa_model=coa,
+#         balance_type="credit",
+#         active=True
+#     )
 
 
 # @receiver(post_save, sender=VendorModel)
@@ -936,28 +937,39 @@ def update_finance_cost(sender, instance, created, **kwargs):
     # else:
     #     save_journal(instance,ledger,vendor)
 
+
 @receiver(post_save, sender=PurchaseOrderModel)
-def create_po_item_upload(sender,instance,created,**kwargs):
+def create_po_item_upload(sender, instance, created, **kwargs):
     if instance.po_status == "fulfilled":
         for item in instance.get_itemtxs_data()[0]:
             dealer = models.Dealer.objects.get(entity=instance.entity)
-            models.PoItemsUploaded.objects.create(dealer=dealer,po=instance, item=item, status="fulfilled")
+            models.PoItemsUploaded.objects.create(
+                dealer=dealer, po=instance, item=item, status="fulfilled"
+            )
+
 
 @receiver(post_save, sender=models.Staff)
-def add_service_to_staff(sender,instance,created,**kwargs):
+def add_service_to_staff(sender, instance, created, **kwargs):
     if created:
         for service in Service.objects.all():
             instance.staff_member.services_offered.add(service)
 
+
 ##########################################################
 ######################Notification########################
 ##########################################################
 
+
 @receiver(post_save, sender=PurchaseOrderModel)
-def create_po_fulfilled_notification(sender,instance,created,**kwargs):
+def create_po_fulfilled_notification(sender, instance, created, **kwargs):
     if instance.po_status == "fulfilled":
         dealer = models.Dealer.objects.get(entity=instance.entity)
-        accountants = models.CustomGroup.objects.filter(dealer=dealer,name="Inventory").first().group.user_set.exclude(email=dealer.user.email).distinct()
+        accountants = (
+            models.CustomGroup.objects.filter(dealer=dealer, name="Inventory")
+            .first()
+            .group.user_set.exclude(email=dealer.user.email)
+            .distinct()
+        )
         for accountant in accountants:
             models.Notification.objects.create(
                 user=accountant,
@@ -967,11 +979,18 @@ def create_po_fulfilled_notification(sender,instance,created,**kwargs):
                 """,
             )
 
+
 @receiver(post_save, sender=models.Car)
 def car_created_notification(sender, instance, created, **kwargs):
     if created:
-
-        accountants = models.CustomGroup.objects.filter(dealer=instance.dealer,name__in=["Manager","Accountant"]).first().group.user_set.all().distinct()
+        accountants = (
+            models.CustomGroup.objects.filter(
+                dealer=instance.dealer, name__in=["Manager", "Accountant"]
+            )
+            .first()
+            .group.user_set.all()
+            .distinct()
+        )
         for accountant in accountants:
             models.Notification.objects.create(
                 user=accountant,
@@ -982,29 +1001,30 @@ def car_created_notification(sender, instance, created, **kwargs):
             )
 
 
-
 @receiver(post_save, sender=PurchaseOrderModel)
 def po_fullfilled_notification(sender, instance, created, **kwargs):
     if instance.is_fulfilled():
         dealer = models.Dealer.objects.get(entity=instance.entity)
         recipients = User.objects.filter(
             groups__customgroup__dealer=instance.dealer,
-            groups__customgroup__name__in=["Manager", "Inventory"]
+            groups__customgroup__name__in=["Manager", "Inventory"],
         ).distinct()
         for recipient in recipients:
             models.Notification.objects.create(
                 user=recipient,
                 message=f"""
                 New Purchase Order has been added.
-                <a href="{reverse('purchase_order_detail',kwargs={'dealer_slug':dealer.slug,'pk':instance.pk})}" target="_blank">View</a>
+                <a href="{reverse("purchase_order_detail", kwargs={"dealer_slug": dealer.slug, "pk": instance.pk})}" target="_blank">View</a>
                 """,
             )
+
+
 @receiver(post_save, sender=models.Vendor)
 def vendor_created_notification(sender, instance, created, **kwargs):
     if created:
         recipients = User.objects.filter(
             groups__customgroup__dealer=instance.dealer,
-            groups__customgroup__name__in=["Manager", "Inventory"]
+            groups__customgroup__name__in=["Manager", "Inventory"],
         ).distinct()
 
         for recipient in recipients:
@@ -1015,19 +1035,27 @@ def vendor_created_notification(sender, instance, created, **kwargs):
                 """,
             )
 
+
 @receiver(post_save, sender=models.SaleOrder)
 def sale_order_created_notification(sender, instance, created, **kwargs):
     if created:
-        recipients = models.CustomGroup.objects.filter(dealer=instance.dealer,name="Accountant").first().group.user_set.exclude(email=instance.dealer.user.email).distinct()
+        recipients = (
+            models.CustomGroup.objects.filter(dealer=instance.dealer, name="Accountant")
+            .first()
+            .group.user_set.exclude(email=instance.dealer.user.email)
+            .distinct()
+        )
 
         for recipient in recipients:
             models.Notification.objects.create(
                 user=recipient,
                 message=f"""
                 New Sale Order has been added for estimate:{instance.estimate}.
-                <a href="{reverse('estimate_detail',kwargs={'dealer_slug':instance.dealer.slug,'pk':instance.estimate.pk})}" target="_blank">View</a>
+                <a href="{reverse("estimate_detail", kwargs={"dealer_slug": instance.dealer.slug, "pk": instance.estimate.pk})}" target="_blank">View</a>
                 """,
             )
+
+
 @receiver(post_save, sender=models.Lead)
 def lead_created_notification(sender, instance, created, **kwargs):
     if created:
@@ -1036,22 +1064,31 @@ def lead_created_notification(sender, instance, created, **kwargs):
                 user=instance.staff.user,
                 message=f"""
                 New Lead has been added.
-                <a href="{reverse('lead_detail',kwargs={'dealer_slug':instance.dealer.slug,'slug':instance.slug})}" target="_blank">View</a>
+                <a href="{reverse("lead_detail", kwargs={"dealer_slug": instance.dealer.slug, "slug": instance.slug})}" target="_blank">View</a>
                 """,
             )
+
+
 @receiver(post_save, sender=EstimateModel)
 def estimate_in_review_notification(sender, instance, created, **kwargs):
     if instance.is_review():
         dealer = models.Dealer.objects.get(entity=instance.entity)
-        recipients = models.CustomGroup.objects.filter(dealer=dealer,name="Manager").first().group.user_set.exclude(email=dealer.user.email).distinct()
+        recipients = (
+            models.CustomGroup.objects.filter(dealer=dealer, name="Manager")
+            .first()
+            .group.user_set.exclude(email=dealer.user.email)
+            .distinct()
+        )
         for recipient in recipients:
             models.Notification.objects.create(
                 user=recipient,
                 message=f"""
                 Estimate {instance.estimate_number} is in review.
                 Please review and approve it at your earliest convenience.
-                <a href="{reverse('estimate_detail', kwargs={'dealer_slug': dealer.slug, 'pk': instance.pk})}" target="_blank">View</a>
-                """)
+                <a href="{reverse("estimate_detail", kwargs={"dealer_slug": dealer.slug, "pk": instance.pk})}" target="_blank">View</a>
+                """,
+            )
+
 
 @receiver(post_save, sender=EstimateModel)
 def estimate_in_approve_notification(sender, instance, created, **kwargs):
@@ -1059,46 +1096,58 @@ def estimate_in_approve_notification(sender, instance, created, **kwargs):
         dealer = models.Dealer.objects.get(entity=instance.entity)
 
         recipient = models.ExtraInfo.objects.filter(
-                content_type=ContentType.objects.get_for_model(EstimateModel),
-                related_content_type=ContentType.objects.get_for_model(models.Staff),
-                object_id=instance.pk,
-            ).first()
+            content_type=ContentType.objects.get_for_model(EstimateModel),
+            related_content_type=ContentType.objects.get_for_model(models.Staff),
+            object_id=instance.pk,
+        ).first()
 
         models.Notification.objects.create(
             user=recipient.related_object.user,
             message=f"""
             Estimate {instance.estimate_number} has been approved.
-            <a href="{reverse('estimate_detail', kwargs={'dealer_slug': dealer.slug, 'pk': instance.pk})}" target="_blank">View</a>
-            """
-            )
+            <a href="{reverse("estimate_detail", kwargs={"dealer_slug": dealer.slug, "pk": instance.pk})}" target="_blank">View</a>
+            """,
+        )
+
 
 @receiver(post_save, sender=BillModel)
 def bill_model_in_approve_notification(sender, instance, created, **kwargs):
     if instance.is_review():
         dealer = models.Dealer.objects.get(entity=instance.ledger.entity)
-        recipients = models.CustomGroup.objects.filter(dealer=dealer,name="Manager").first().group.user_set.exclude(email=dealer.user.email).distinct()
+        recipients = (
+            models.CustomGroup.objects.filter(dealer=dealer, name="Manager")
+            .first()
+            .group.user_set.exclude(email=dealer.user.email)
+            .distinct()
+        )
 
         for recipient in recipients:
             models.Notification.objects.create(
                 user=recipient,
                 message=f"""
                 Bill {instance.bill_number} is in review,please review and approve it
-                <a href="{reverse('bill-detail', kwargs={'dealer_slug': dealer.slug, 'entity_slug':dealer.entity.slug, 'bill_pk': instance.pk})}" target="_blank">View</a>.
-                """
-                )
+                <a href="{reverse("bill-detail", kwargs={"dealer_slug": dealer.slug, "entity_slug": dealer.entity.slug, "bill_pk": instance.pk})}" target="_blank">View</a>.
+                """,
+            )
+
 
 @receiver(post_save, sender=BillModel)
 def bill_model_after_approve_notification(sender, instance, created, **kwargs):
     if instance.is_approved():
         dealer = models.Dealer.objects.get(entity=instance.ledger.entity)
-        recipients = models.CustomGroup.objects.filter(dealer=dealer,name="Accountant").first().group.user_set.exclude(email=dealer.user.email).distinct()
+        recipients = (
+            models.CustomGroup.objects.filter(dealer=dealer, name="Accountant")
+            .first()
+            .group.user_set.exclude(email=dealer.user.email)
+            .distinct()
+        )
 
         for recipient in recipients:
             models.Notification.objects.create(
                 user=recipient,
                 message=f"""
                 Bill {instance.bill_number} has been approved.
-                <a href="{reverse('bill-detail', kwargs={'dealer_slug': dealer.slug, 'entity_slug':dealer.entity.slug, 'bill_pk': instance.pk})}" target="_blank">View</a>.
+                <a href="{reverse("bill-detail", kwargs={"dealer_slug": dealer.slug, "entity_slug": dealer.entity.slug, "bill_pk": instance.pk})}" target="_blank">View</a>.
                 please complete the bill payment.
-                """
-                )
\ No newline at end of file
+                """,
+            )
diff --git a/inventory/tasks.py b/inventory/tasks.py
index 0f2b5642..17a1bdbd 100644
--- a/inventory/tasks.py
+++ b/inventory/tasks.py
@@ -4,13 +4,14 @@ from django_ledger.io import roles
 from django_q.tasks import async_task
 from django.core.mail import send_mail
 from appointment.models import StaffMember
-from django.contrib.auth.models import User,Group, Permission
+from django.contrib.auth.models import User, Group, Permission
 from inventory.models import DealerSettings, Dealer
 from django.utils.translation import gettext_lazy as _
 
 logger = logging.getLogger(__name__)
 logging.basicConfig(level=logging.INFO)
 
+
 def create_settings(pk):
     instance = Dealer.objects.get(pk=pk)
 
@@ -1126,12 +1127,13 @@ def create_make_accounts(entity, coa, makes, name, role, balance_type):
             )
         return acc
 
+
 def send_email(from_, to_, subject, message):
     subject = subject
     message = message
     from_email = from_
     recipient_list = [to_]
-    async_task(send_mail,subject, message, from_email, recipient_list)
+    async_task(send_mail, subject, message, from_email, recipient_list)
 
 
 def create_user_dealer(email, password, name, arabic_name, phone, crn, vrn, address):
@@ -1174,4 +1176,3 @@ def create_user_dealer(email, password, name, arabic_name, phone, crn, vrn, addr
 #             instance.user.groups.add(group)
 
 #     transaction.on_commit(run)
-
diff --git a/inventory/templatetags/custom_filters.py b/inventory/templatetags/custom_filters.py
index 53b75cc8..f9a085e1 100644
--- a/inventory/templatetags/custom_filters.py
+++ b/inventory/templatetags/custom_filters.py
@@ -54,7 +54,6 @@ def period_navigation(context, base_url: str):
     kwargs["dealer_slug"] = dealer_slug
     kwargs["entity_slug"] = entity_slug
 
-
     if context["view"].kwargs.get("ledger_pk"):
         kwargs["ledger_pk"] = context["view"].kwargs.get("ledger_pk")
 
@@ -103,7 +102,7 @@ def period_navigation(context, base_url: str):
     if "coa_slug" in kwargs:
         KWARGS_CURRENT_MONTH["coa_slug"] = kwargs["coa_slug"]
 
-    ctx["current_month_url"] = reverse(f"{base_url}-month" ,kwargs=KWARGS_CURRENT_MONTH)
+    ctx["current_month_url"] = reverse(f"{base_url}-month", kwargs=KWARGS_CURRENT_MONTH)
 
     quarter_urls = list()
     ctx["quarter"] = context.get("quarter")
@@ -454,7 +453,7 @@ def po_item_table1(context, queryset):
 @register.inclusion_tag(
     "purchase_orders/includes/po_item_formset.html", takes_context=True
 )
-def po_item_formset_table(context, po_model, itemtxs_formset,user):
+def po_item_formset_table(context, po_model, itemtxs_formset, user):
     # print(len(itemtxs_formset.forms))
     for form in itemtxs_formset.forms:
         form.fields["item_model"].queryset = form.fields["item_model"].queryset.filter(
@@ -475,8 +474,8 @@ def po_item_formset_table(context, po_model, itemtxs_formset,user):
 def bill_item_formset_table(context, item_formset):
     for item in item_formset:
         if item:
-            item.initial['quantity'] = item.instance.po_quantity
-            item.initial['unit_cost'] = item.instance.po_unit_cost
+            item.initial["quantity"] = item.instance.po_quantity
+            item.initial["unit_cost"] = item.instance.po_unit_cost
         # print(item.instance.po_quantity)
         # print(item.instance.po_unit_cost)
         # print(item.instance.po_total_amount)
@@ -661,7 +660,6 @@ def inventory_table(context, queryset):
     return ctx
 
 
-
 @register.filter
 def count_checked(permissions, group_permission_ids):
     """Count how many permissions are checked from the allowed list"""
@@ -669,10 +667,8 @@ def count_checked(permissions, group_permission_ids):
         return 0
     return sum(1 for perm in permissions if perm.id in group_permission_ids)
 
+
 # @register.filter
 # def count_checked(permissions, group_permission_ids):
 #     """Count how many permissions are checked from the allowed list"""
 #     return sum(1 for perm in permissions if perm.id in group_permission_ids)
-
-
-
diff --git a/inventory/tests.py b/inventory/tests.py
index 80cc1e48..f6283fdb 100644
--- a/inventory/tests.py
+++ b/inventory/tests.py
@@ -472,5 +472,3 @@ class AuthenticationTest(TestCase):
 #         self.assertEqual(finance_data["total_additionals"], Decimal("180"))
 #         self.assertEqual(finance_data["additionals"][0]["name"], "Service")
 #         self.assertEqual(finance_data["vat"], Decimal("0.20"))
-
-
diff --git a/inventory/urls.py b/inventory/urls.py
index bf5cfb03..69763b40 100644
--- a/inventory/urls.py
+++ b/inventory/urls.py
@@ -12,7 +12,6 @@ urlpatterns = [
     path("signup/", views.dealer_signup, name="account_signup"),
     path("", views.HomeView.as_view(), name="home"),
     path("<slug:dealer_slug>/", views.HomeView.as_view(), name="home"),
-
     # Tasks
     path("legal/", views.terms_and_privacy, name="terms_and_privacy"),
     # path('tasks/<int:task_id>/detail/', views.task_detail, name='task_detail'),
@@ -20,7 +19,11 @@ urlpatterns = [
     # path("user/<int:pk>/settings/", views.UserSettingsView.as_view(), name="user_settings"),
     path("<slug:dealer_slug>/pricing/", views.pricing_page, name="pricing_page"),
     path("<slug:dealer_slug>/submit_plan/", views.submit_plan, name="submit_plan"),
-    path("<slug:dealer_slug>/payment-callback/", views.payment_callback, name="payment_callback"),
+    path(
+        "<slug:dealer_slug>/payment-callback/",
+        views.payment_callback,
+        name="payment_callback",
+    ),
     #
     path(
         "<slug:dealer_slug>/dealers/activity/",
@@ -32,7 +35,11 @@ urlpatterns = [
         views.DealerSettingsView,
         name="dealer_settings",
     ),
-    path("<slug:dealer_slug>/dealers/assign-car-makes/", views.assign_car_makes, name="assign_car_makes"),
+    path(
+        "<slug:dealer_slug>/dealers/assign-car-makes/",
+        views.assign_car_makes,
+        name="assign_car_makes",
+    ),
     path(
         "dashboards/manager/",
         views.ManagerDashboard.as_view(),
@@ -59,9 +66,15 @@ urlpatterns = [
     # path('dealers/<int:pk>/delete/', views.DealerDeleteView.as_view(), name='dealer_delete'),
     # CRM URLs
     path(
-        "<slug:dealer_slug>/customers/create/", views.CustomerCreateView.as_view(), name="customer_create"
+        "<slug:dealer_slug>/customers/create/",
+        views.CustomerCreateView.as_view(),
+        name="customer_create",
+    ),
+    path(
+        "<slug:dealer_slug>/customers/",
+        views.CustomerListView.as_view(),
+        name="customer_list",
     ),
-    path("<slug:dealer_slug>/customers/", views.CustomerListView.as_view(), name="customer_list"),
     path(
         "<slug:dealer_slug>/customers/<slug:slug>/",
         views.CustomerDetailView.as_view(),
@@ -78,7 +91,9 @@ urlpatterns = [
         name="customer_update",
     ),
     path(
-        "<slug:dealer_slug>/customers/<slug:slug>/delete/", views.delete_customer, name="customer_delete"
+        "<slug:dealer_slug>/customers/<slug:slug>/delete/",
+        views.delete_customer,
+        name="customer_delete",
     ),
     path(
         "<slug:dealer_slug>/customers/<slug:slug>/opportunities/create/",
@@ -94,21 +109,39 @@ urlpatterns = [
         views.LeadDetailView.as_view(),
         name="lead_detail",
     ),
-    path("<slug:dealer_slug>/update-lead-actions/", views.update_lead_actions, name="update_lead_actions"),
-    path("<slug:dealer_slug>/crm/leads/lead_tracking/", views.lead_tracking, name="lead_tracking"),
+    path(
+        "<slug:dealer_slug>/update-lead-actions/",
+        views.update_lead_actions,
+        name="update_lead_actions",
+    ),
+    path(
+        "<slug:dealer_slug>/crm/leads/lead_tracking/",
+        views.lead_tracking,
+        name="lead_tracking",
+    ),
     path("<slug:dealer_slug>/crm/leads/lead_view/", views.lead_view, name="lead_view"),
-    path("<slug:dealer_slug>/crm/leads/", views.LeadListView.as_view(), name="lead_list"),
+    path(
+        "<slug:dealer_slug>/crm/leads/", views.LeadListView.as_view(), name="lead_list"
+    ),
     path(
         "<slug:dealer_slug>/crm/leads/<slug:slug>/update/",
         views.LeadUpdateView.as_view(),
         name="lead_update",
     ),
-    path("<slug:dealer_slug>/crm/leads/<slug:slug>/delete/", views.LeadDeleteView, name="lead_delete"),
     path(
-        "<slug:dealer_slug>/crm/leads/<slug:slug>/lead-convert/", views.lead_convert, name="lead_convert"
+        "<slug:dealer_slug>/crm/leads/<slug:slug>/delete/",
+        views.LeadDeleteView,
+        name="lead_delete",
     ),
     path(
-        "<slug:dealer_slug>/crm/leads/<int:pk>/delete-note/", views.delete_note, name="delete_note_to_lead"
+        "<slug:dealer_slug>/crm/leads/<slug:slug>/lead-convert/",
+        views.lead_convert,
+        name="lead_convert",
+    ),
+    path(
+        "<slug:dealer_slug>/crm/leads/<int:pk>/delete-note/",
+        views.delete_note,
+        name="delete_note_to_lead",
     ),
     path(
         "<slug:dealer_slug>/crm/<int:pk>/update-note/",
@@ -216,9 +249,11 @@ urlpatterns = [
     # Notifications
     path("notifications/stream/", views.sse_stream, name="sse_stream"),
     path("notifications/fetch/", views.fetch_notifications, name="fetch_notifications"),
-
-    path("notifications/list/", views.NotificationListView.as_view(), name="notifications_history"),
-
+    path(
+        "notifications/list/",
+        views.NotificationListView.as_view(),
+        name="notifications_history",
+    ),
     path(
         "notifications/<int:notification_id>/mark_as_read/",
         views.mark_notification_as_read,
@@ -235,9 +270,19 @@ urlpatterns = [
     #######################################################
     # Vendor URLs
     #######################################################
-    path("<slug:dealer_slug>/vendors/create/", views.VendorCreateView.as_view(), name="vendor_create"),
-    path("<slug:dealer_slug>/vendors", views.VendorListView.as_view(), name="vendor_list"),
-    path("<slug:dealer_slug>/vendors/<slug:slug>/", views.vendorDetailView, name="vendor_detail"),
+    path(
+        "<slug:dealer_slug>/vendors/create/",
+        views.VendorCreateView.as_view(),
+        name="vendor_create",
+    ),
+    path(
+        "<slug:dealer_slug>/vendors", views.VendorListView.as_view(), name="vendor_list"
+    ),
+    path(
+        "<slug:dealer_slug>/vendors/<slug:slug>/",
+        views.vendorDetailView,
+        name="vendor_detail",
+    ),
     path(
         "<slug:dealer_slug>/vendors/<slug:slug>/update/",
         views.VendorUpdateView.as_view(),
@@ -447,26 +492,99 @@ urlpatterns = [
     # ),
     # Users URLs
     path("<slug:dealer_slug>/user/", views.UserListView.as_view(), name="user_list"),
-    path("<slug:dealer_slug>/user/create/", views.UserCreateView.as_view(), name="user_create"),
-    path("<slug:dealer_slug>/user/<slug:slug>/", views.UserDetailView.as_view(), name="user_detail"),
-    path("<slug:dealer_slug>/user/<slug:slug>/groups/", views.UserGroupView, name="user_groups"),
-    path("<slug:dealer_slug>/user/<slug:slug>/update/", views.UserUpdateView.as_view(), name="user_update"),
-    path("<slug:dealer_slug>/user/<slug:slug>/confirm/", views.UserDeleteview, name="user_delete"),
-    path("<slug:dealer_slug>/group/create/", views.GroupCreateView.as_view(), name="group_create"),
-    path("<slug:dealer_slug>/group/<int:pk>/update/", views.GroupUpdateView.as_view(), name="group_update"),
-    path("<slug:dealer_slug>/group/<int:pk>/", views.GroupDetailView.as_view(), name="group_detail"),
+    path(
+        "<slug:dealer_slug>/user/create/",
+        views.UserCreateView.as_view(),
+        name="user_create",
+    ),
+    path(
+        "<slug:dealer_slug>/user/<slug:slug>/",
+        views.UserDetailView.as_view(),
+        name="user_detail",
+    ),
+    path(
+        "<slug:dealer_slug>/user/<slug:slug>/groups/",
+        views.UserGroupView,
+        name="user_groups",
+    ),
+    path(
+        "<slug:dealer_slug>/user/<slug:slug>/update/",
+        views.UserUpdateView.as_view(),
+        name="user_update",
+    ),
+    path(
+        "<slug:dealer_slug>/user/<slug:slug>/confirm/",
+        views.UserDeleteview,
+        name="user_delete",
+    ),
+    path(
+        "<slug:dealer_slug>/group/create/",
+        views.GroupCreateView.as_view(),
+        name="group_create",
+    ),
+    path(
+        "<slug:dealer_slug>/group/<int:pk>/update/",
+        views.GroupUpdateView.as_view(),
+        name="group_update",
+    ),
+    path(
+        "<slug:dealer_slug>/group/<int:pk>/",
+        views.GroupDetailView.as_view(),
+        name="group_detail",
+    ),
     path("<slug:dealer_slug>/group/", views.GroupListView.as_view(), name="group_list"),
-    path("<slug:dealer_slug>/group/<int:pk>/confirm/", views.GroupDeleteview, name="group_delete"),
-    path("<slug:dealer_slug>/group/<int:pk>/permission/", views.GroupPermissionView, name="group_permission"),
-    path("<slug:dealer_slug>/organizations/create/", views.OrganizationCreateView.as_view(), name="organization_create"),
-    path("<slug:dealer_slug>/organizations/", views.OrganizationListView.as_view(), name="organization_list"),
-    path("<slug:dealer_slug>/organizations/<slug:slug>/", views.OrganizationDetailView.as_view(), name="organization_detail"),
-    path("<slug:dealer_slug>/organizations/<slug:slug>/update/", views.OrganizationUpdateView.as_view(), name="organization_update"),
-    path("<slug:dealer_slug>/organizations/<slug:slug>/delete/", views.OrganizationDeleteView, name="organization_delete"),
-    path("representatives/", views.RepresentativeListView.as_view(), name="representative_list"),
-    path("representatives/<int:pk>/", views.RepresentativeDetailView.as_view(), name="representative_detail"),
-    path("representatives/create/", views.RepresentativeCreateView.as_view(),name="representative_create"),
-    path("representatives/<int:pk>/update/",
+    path(
+        "<slug:dealer_slug>/group/<int:pk>/confirm/",
+        views.GroupDeleteview,
+        name="group_delete",
+    ),
+    path(
+        "<slug:dealer_slug>/group/<int:pk>/permission/",
+        views.GroupPermissionView,
+        name="group_permission",
+    ),
+    path(
+        "<slug:dealer_slug>/organizations/create/",
+        views.OrganizationCreateView.as_view(),
+        name="organization_create",
+    ),
+    path(
+        "<slug:dealer_slug>/organizations/",
+        views.OrganizationListView.as_view(),
+        name="organization_list",
+    ),
+    path(
+        "<slug:dealer_slug>/organizations/<slug:slug>/",
+        views.OrganizationDetailView.as_view(),
+        name="organization_detail",
+    ),
+    path(
+        "<slug:dealer_slug>/organizations/<slug:slug>/update/",
+        views.OrganizationUpdateView.as_view(),
+        name="organization_update",
+    ),
+    path(
+        "<slug:dealer_slug>/organizations/<slug:slug>/delete/",
+        views.OrganizationDeleteView,
+        name="organization_delete",
+    ),
+    path(
+        "representatives/",
+        views.RepresentativeListView.as_view(),
+        name="representative_list",
+    ),
+    path(
+        "representatives/<int:pk>/",
+        views.RepresentativeDetailView.as_view(),
+        name="representative_detail",
+    ),
+    path(
+        "representatives/create/",
+        views.RepresentativeCreateView.as_view(),
+        name="representative_create",
+    ),
+    path(
+        "representatives/<int:pk>/update/",
         views.RepresentativeUpdateView.as_view(),
         name="representative_update",
     ),
@@ -475,9 +593,15 @@ urlpatterns = [
         views.RepresentativeDeleteView.as_view(),
         name="representative_delete",
     ),
-    path("<slug:dealer_slug>/ledgers/<slug:entity_slug>/", views.LedgerModelListView.as_view(), name="ledger_list"),
     path(
-        "<slug:dealer_slug>/ledgers/<slug:entity_slug>/create/", views.LedgerModelCreateView.as_view(), name="ledger_create"
+        "<slug:dealer_slug>/ledgers/<slug:entity_slug>/",
+        views.LedgerModelListView.as_view(),
+        name="ledger_list",
+    ),
+    path(
+        "<slug:dealer_slug>/ledgers/<slug:entity_slug>/create/",
+        views.LedgerModelCreateView.as_view(),
+        name="ledger_create",
     ),
     path(
         "<slug:dealer_slug>/ledgers/<slug:entity_slug>/detail/<uuid:pk>/",
@@ -698,7 +822,6 @@ urlpatterns = [
         views.update_estimate_additionals,
         name="update_estimate_additionals",
     ),
-
     ###############################################
     # Invoice
     ###############################################
@@ -771,7 +894,9 @@ urlpatterns = [
     # path('sales/journal/<uuid:pk>/create/', views.JournalEntryCreateView.as_view(), name='journal_create'),
     # Items
     path(
-        "<slug:dealer_slug>/items/services/", views.ItemServiceListView.as_view(), name="item_service_list"
+        "<slug:dealer_slug>/items/services/",
+        views.ItemServiceListView.as_view(),
+        name="item_service_list",
     ),
     path(
         "<slug:dealer_slug>/items/services/create/",
@@ -838,7 +963,7 @@ urlpatterns = [
     ),
     ############################################################
     ############################################################
-    #BILL MARK AS
+    # BILL MARK AS
     path(
         "<slug:dealer_slug>/items/bills/<slug:entity_slug>/actions/<uuid:bill_pk>/mark-as-draft/",
         views.BillModelActionMarkAsDraftView.as_view(),
@@ -884,7 +1009,6 @@ urlpatterns = [
         views.BillModelActionForceMigrateView.as_view(),
         name="bill-action-force-migrate",
     ),
-
     # orders
     path("orders/", views.OrderListView.as_view(), name="order_list_view"),
     # BALANCE SHEET Reports...
@@ -1013,7 +1137,11 @@ urlpatterns = [
     ),
     #  Admin Management...
     path("<slug:dealer_slug>/management/", views.management_view, name="management"),
-    path("<slug:dealer_slug>/management/user_management/", views.user_management, name="user_management"),
+    path(
+        "<slug:dealer_slug>/management/user_management/",
+        views.user_management,
+        name="user_management",
+    ),
     path(
         "<slug:dealer_slug>/management/<str:content_type>/<slug:slug>/activate_account/",
         views.activate_account,
diff --git a/inventory/utils.py b/inventory/utils.py
index ef9d73c6..5d4b8c00 100644
--- a/inventory/utils.py
+++ b/inventory/utils.py
@@ -27,7 +27,9 @@ from django_ledger.models.transactions import TransactionModel
 from django_ledger.models.journal_entry import JournalEntryModel
 
 import logging
-logger=logging.getLogger(__name__)
+
+logger = logging.getLogger(__name__)
+
 
 def make_random_password(
     length=10, allowed_chars="abcdefghjkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789"
@@ -63,15 +65,12 @@ def get_jwt_token():
     try:
         response = requests.post(url, headers=headers, json=data)
         response.raise_for_status()
-        #logging for success
+        # logging for success
         logger.info("Successfully fetched JWT token.")
         return response.text
     except requests.exceptions.RequestException as e:
-        #logging for error
-        logger.error(
-            f"HTTP error fetching JWT token from {url}: ",
-            exc_info=True
-        )
+        # logging for error
+        logger.error(f"HTTP error fetching JWT token from {url}: ", exc_info=True)
         print(f"Error obtaining JWT token: {e}")
         return None
 
@@ -159,7 +158,7 @@ def send_email(from_, to_, subject, message):
     message = message
     from_email = from_
     recipient_list = [to_]
-    async_task(send_mail,subject, message, from_email, recipient_list)
+    async_task(send_mail, subject, message, from_email, recipient_list)
 
 
 def get_user_type(request):
@@ -225,7 +224,7 @@ def reserve_car(car, request):
         )
         car.status = models.CarStatusChoices.RESERVED
         car.save()
-          # --- Logging for Success ---
+        # --- Logging for Success ---
         logger.info(
             f"Car {car.pk} ('{car.id_car_make} {car.id_car_model}') reserved successfully "
             f"by user {request.user}. "
@@ -239,7 +238,7 @@ def reserve_car(car, request):
             f"Error reserving car {car.pk} ('{car.id_car_make} {car.id_car_model}') "
             f"for user {request.user} . "
             f"Error: {e}",
-            exc_info=True
+            exc_info=True,
         )
         messages.error(request, f"Error reserving car: {e}")
 
@@ -1002,10 +1001,14 @@ class CarFinanceCalculator:
         self.vat_rate = self._get_vat_rate()
         self.item_transactions = self._get_item_transactions()
         self.additional_services = self._get_additional_services()
-        self.extra_info = models.ExtraInfo.objects.get(dealer=self.dealer,content_type=ContentType.objects.get_for_model(model),object_id=model.pk)
+        self.extra_info = models.ExtraInfo.objects.get(
+            dealer=self.dealer,
+            content_type=ContentType.objects.get_for_model(model),
+            object_id=model.pk,
+        )
 
     def _get_vat_rate(self):
-        vat = models.VatRate.objects.filter(dealer=self.dealer,is_active=True).first()
+        vat = models.VatRate.objects.filter(dealer=self.dealer, is_active=True).first()
         if not vat:
             raise ObjectDoesNotExist("No active VAT rate found")
         return vat.rate
@@ -1073,7 +1076,7 @@ class CarFinanceCalculator:
             Decimal(x.get("price_")) for x in self._get_additional_services()
         )
 
-        total_discount = self.extra_info.data.get("discount",0)
+        total_discount = self.extra_info.data.get("discount", 0)
 
         # total_discount = sum(
         #     Decimal(
@@ -1293,10 +1296,9 @@ def handle_account_process(invoice, amount, finance_data):
             logger.debug(f"Set item_model.for_inventory to False for car {car.vin}.")
         except Exception as e:
             logger.error(
-                        f"Error updating item_model.for_inventory for car {car.vin} (Invoice {invoice.invoice_number}): {e}",
-                        exc_info=True
-                    )
-
+                f"Error updating item_model.for_inventory for car {car.vin} (Invoice {invoice.invoice_number}): {e}",
+                exc_info=True,
+            )
 
         car.finances.is_sold = True
         car.finances.save()
@@ -1372,6 +1374,7 @@ def create_make_accounts(dealer):
                 active=True,
             )
 
+
 def handle_payment(request, order):
     url = "https://api.moyasar.com/v1/payments"
     callback_url = request.build_absolute_uri(
diff --git a/inventory/views.py b/inventory/views.py
index 05999803..a3df5494 100644
--- a/inventory/views.py
+++ b/inventory/views.py
@@ -9,6 +9,7 @@ import logging
 import tempfile
 import numpy as np
 from time import sleep
+
 # from rich import print
 from random import randint
 from decimal import Decimal
@@ -31,6 +32,7 @@ from django.core.exceptions import ImproperlyConfigured, ValidationError
 from django.core.exceptions import PermissionDenied
 from django.contrib.contenttypes.models import ContentType
 from django.views.decorators.http import require_POST
+
 # Django
 from django.db.models import Q
 from django.conf import settings
@@ -49,7 +51,7 @@ from django.shortcuts import HttpResponse
 
 from django.db.models import Sum, F, Count
 from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
-from django.contrib.auth.models import User,Group
+from django.contrib.auth.models import User, Group
 from django.db.models import Value
 from django.urls import reverse, reverse_lazy
 from django.utils import timezone, translation
@@ -143,7 +145,7 @@ from .override import (
     BillModelUpdateView as BillModelUpdateViewBase,
     BaseBillActionView as BaseBillActionViewBase,
     InventoryListView as InventoryListViewBase,
-    )
+)
 
 from django_ledger.models import (
     ItemTransactionModel,
@@ -205,11 +207,11 @@ from .tasks import create_accounts_for_make, create_user_dealer, send_email
 
 # djago easy audit log
 from easyaudit.models import RequestEvent, CRUDEvent, LoginEvent
-from django_q.tasks import async_task
 
 logger = logging.getLogger(__name__)
 logging.basicConfig(level=logging.INFO)
 
+
 class Hash(Func):
     """
     Represents a function used to compute a hash value.
@@ -274,10 +276,13 @@ def switch_language(request):
         logger.warning(f"Invalid language code: {language}")
         return redirect("/")
 
+
 def testview(request):
     return HttpResponse("test")
 
+
 def dealer_signup(request):
+    from django_q.tasks import async_task
     """
     Handles the dealer signup wizard process, including forms validation, user and group
     creation, permissions assignment, and dealer data storage. This view supports GET
@@ -297,7 +302,6 @@ def dealer_signup(request):
     :rtype: Union[django.http.HttpResponse, django.http.JsonResponse]
     """
     if request.method == "POST":
-    
         data = json.loads(request.body)
 
         email = data.get("email")
@@ -316,15 +320,29 @@ def dealer_signup(request):
             r"^[a-zA-Z0-9.!#$%&amp;'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$",
             email,
         ):
-            return JsonResponse({"error": _("Please enter a valid email address")}, status=400)
+            return JsonResponse(
+                {"error": _("Please enter a valid email address")}, status=400
+            )
 
         if len(password) < 8:
-            return JsonResponse({"error": _("Password must be at least 8 characters")}, status=400)
+            return JsonResponse(
+                {"error": _("Password must be at least 8 characters")}, status=400
+            )
 
         if password != password_confirm:
             return JsonResponse({"error": _("Passwords do not match")}, status=400)
         try:
-            async_task(create_user_dealer,email, password, name, arabic_name, phone, crn, vrn, address)
+            async_task(
+                create_user_dealer,
+                email,
+                password,
+                name,
+                arabic_name,
+                phone,
+                crn,
+                vrn,
+                address,
+            )
             logger.info(f"Delear created succesfully with emailID {email}")
             return JsonResponse({"message": _("User created successfully")}, status=200)
         except Exception as e:
@@ -441,14 +459,13 @@ class ManagerDashboard(LoginRequiredMixin, TemplateView):
             dealer=dealer, status=models.CarStatusChoices.TRANSFER
         ).count()
         try:
-             reserved_percentage = reserved_cars / total_cars * 100
-        except  ZeroDivisionError as e:
-            print(f"error: {e}")
-        try:
-           sold_percentage = sold_cars / total_cars * 100
+            reserved_percentage = reserved_cars / total_cars * 100
+        except ZeroDivisionError as e:
+            print(f"error: {e}")
+        try:
+            sold_percentage = sold_cars / total_cars * 100
         except ZeroDivisionError as e:
             print(f"error: {e}")
-
 
         qs = (
             models.Car.objects.values("id_car_make__name")
@@ -773,10 +790,15 @@ class AjaxHandlerView(LoginRequiredMixin, View):
             series = models.CarSerie.objects.filter(query).values(
                 "id_car_serie", "name", "arabic_name", "generation_name"
             )
-            logger.debug(f"Successfully fetched car series with query: {query}. Found {len(series)} results.")
+            logger.debug(
+                f"Successfully fetched car series with query: {query}. Found {len(series)} results."
+            )
 
         except Exception as e:
-            logger.error(f"Error fetching car series with query '{query}'. Details: {e}",exc_info=True )
+            logger.error(
+                f"Error fetching car series with query '{query}'. Details: {e}",
+                exc_info=True,
+            )
             return JsonResponse({"error": _("Server error occurred")}, status=500)
         return JsonResponse(list(series), safe=False)
 
@@ -878,8 +900,10 @@ class SearchCodeView(LoginRequiredMixin, View):
             return JsonResponse({"success": False, "error": _("No image provided")})
 
         try:
-             # --- Logging the start of image processing ---
-            logger.debug(f"Received image '{image_file.name}' ({image_file.size} bytes) for barcode/QR scan from user: {request.user.username}.")
+            # --- Logging the start of image processing ---
+            logger.debug(
+                f"Received image '{image_file.name}' ({image_file.size} bytes) for barcode/QR scan from user: {request.user.username}."
+            )
 
             np_arr = np.frombuffer(image_file.read(), np.uint8)
             image = cv2.imdecode(np_arr, cv2.IMREAD_COLOR)
@@ -924,7 +948,7 @@ class SearchCodeView(LoginRequiredMixin, View):
             logger.error(
                 f"An unexpected error occurred during barcode/QR scan process for {image_file}"
                 f"from user: {request.user.username}. Error: {e}",
-                exc_info=True # CRUCIAL: Get the full traceback
+                exc_info=True,  # CRUCIAL: Get the full traceback
             )
             return JsonResponse({"success": False, "error": str(e)})
 
@@ -1129,7 +1153,9 @@ class CarListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
             "sold": cars.filter(status="sold").count(),
             "transfer": cars.filter(status="transfer").count(),
         }
-        context["make"] = models.CarMake.objects.filter(is_sa_import=True,car__in=cars).distinct()
+        context["make"] = models.CarMake.objects.filter(
+            is_sa_import=True, car__in=cars
+        ).distinct()
         context["model"] = models.CarModel.objects.none()
         context["year"] = models.Car.objects.none()
         make = self.request.GET.get("make")
@@ -1242,8 +1268,10 @@ def inventory_stats_view(request, dealer_slug):
                 "trims": {},
             }
         try:
-            logger.debug(f"Attempting to update inventory for Car ID: {car.id}, Make: {make.name} ({make.id_car_make}), "
-                         f"Model: {model.name} ({model.id_car_model}).")
+            logger.debug(
+                f"Attempting to update inventory for Car ID: {car.id}, Make: {make.name} ({make.id_car_make}), "
+                f"Model: {model.name} ({model.id_car_model})."
+            )
             inventory[make.id_car_make]["models"][model.id_car_model]["total_cars"] += 1
 
             trim = car.id_car_trim
@@ -1267,11 +1295,11 @@ def inventory_stats_view(request, dealer_slug):
             ]["total_cars"] += 1
         except Exception as e:
             logger.error(
-        f"Error updating inventory counts for car ID {getattr(car, 'id', 'N/A')}. "
-        f"Make ID: {getattr(make, 'id_car_make', 'N/A')}, Model ID: {getattr(model, 'id_car_model', 'N/A')}, "
-        f"Trim ID: {getattr(trim, 'id_car_trim', 'N/A')}. Error: {e}",
-        exc_info=True
-    )
+                f"Error updating inventory counts for car ID {getattr(car, 'id', 'N/A')}. "
+                f"Make ID: {getattr(make, 'id_car_make', 'N/A')}, Model ID: {getattr(model, 'id_car_model', 'N/A')}, "
+                f"Trim ID: {getattr(trim, 'id_car_trim', 'N/A')}. Error: {e}",
+                exc_info=True,
+            )
             print(e)
     result = {
         "total_cars": total_cars,
@@ -1629,18 +1657,20 @@ class CarDeleteView(
     def delete(self, request, *args, **kwargs):
         messages.success(request, _("Car deleted successfully"))
         return super().delete(request, *args, **kwargs)
+
     def get_success_url(self):
         """
         Returns the URL to redirect to after a successful car deletion.
         It dynamically includes the dealer_slug from the URL.
         """
 
-        dealer_slug = self.kwargs.get('dealer_slug')
+        dealer_slug = self.kwargs.get("dealer_slug")
         if dealer_slug:
-            return reverse_lazy("car_list", kwargs={'dealer_slug': dealer_slug})
+            return reverse_lazy("car_list", kwargs={"dealer_slug": dealer_slug})
         else:
-
-            messages.error(self.request, _("Could not determine dealer for redirection."))
+            messages.error(
+                self.request, _("Could not determine dealer for redirection.")
+            )
             return reverse_lazy("home")
 
 
@@ -1723,7 +1753,7 @@ class CarLocationUpdateView(LoginRequiredMixin, PermissionRequiredMixin, UpdateV
         return reverse_lazy("car_detail", kwargs={"slug": self.object.car.slug})
 
 
-class CarTransferCreateView(LoginRequiredMixin,PermissionRequiredMixin, CreateView):
+class CarTransferCreateView(LoginRequiredMixin, PermissionRequiredMixin, CreateView):
     """
     A view for creating car transfers.
 
@@ -1770,7 +1800,9 @@ class CarTransferCreateView(LoginRequiredMixin,PermissionRequiredMixin, CreateVi
         return reverse_lazy("car_detail", kwargs={"slug": self.object.car.slug})
 
 
-class CarTransferDetailView(LoginRequiredMixin, PermissionRequiredMixin,SuccessMessageMixin, DetailView):
+class CarTransferDetailView(
+    LoginRequiredMixin, PermissionRequiredMixin, SuccessMessageMixin, DetailView
+):
     """
     Provides a detailed view of a specific car transfer record.
 
@@ -1921,7 +1953,7 @@ def CarTransferPreviewView(request, slug, transfer_pk):
     return render(request, "inventory/transfer_preview.html", {"transfer": transfer})
 
 
-class CustomCardCreateView(LoginRequiredMixin,PermissionRequiredMixin, CreateView):
+class CustomCardCreateView(LoginRequiredMixin, PermissionRequiredMixin, CreateView):
     """
     Represents a view for creating a custom card associated with a specific car.
 
@@ -1963,7 +1995,9 @@ class CustomCardCreateView(LoginRequiredMixin,PermissionRequiredMixin, CreateVie
         )
 
 
-class CarRegistrationCreateView(LoginRequiredMixin,PermissionRequiredMixin, CreateView):
+class CarRegistrationCreateView(
+    LoginRequiredMixin, PermissionRequiredMixin, CreateView
+):
     """
     Handles the creation of new car registration records.
 
@@ -2094,7 +2128,7 @@ def manage_reservation(request, dealer_slug, reservation_id):
     )
 
 
-class DealerDetailView(LoginRequiredMixin, PermissionRequiredMixin,DetailView):
+class DealerDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailView):
     """
     Represents a detailed view for a Dealer model.
 
@@ -2126,7 +2160,9 @@ class DealerDetailView(LoginRequiredMixin, PermissionRequiredMixin,DetailView):
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         dealer = self.object
-        car_makes = models.CarMake.objects.filter(car_dealers__dealer=dealer,is_sa_import=True)
+        car_makes = models.CarMake.objects.filter(
+            car_dealers__dealer=dealer, is_sa_import=True
+        )
         staff_count = dealer.staff_count
         cars_count = models.Car.objects.filter(dealer=dealer).count()
 
@@ -2141,13 +2177,17 @@ class DealerDetailView(LoginRequiredMixin, PermissionRequiredMixin,DetailView):
         )
         return context
 
-def dealer_vat_rate_update(request,slug):
-    dealer = get_object_or_404(models.Dealer,slug=slug)
+
+def dealer_vat_rate_update(request, slug):
+    dealer = get_object_or_404(models.Dealer, slug=slug)
     models.VatRate.objects.filter(dealer=dealer).update(rate=request.POST.get("rate"))
     messages.success(request, _("VAT rate updated successfully"))
     return redirect("dealer_detail", slug=slug)
 
-class DealerUpdateView(LoginRequiredMixin,PermissionRequiredMixin, SuccessMessageMixin, UpdateView):
+
+class DealerUpdateView(
+    LoginRequiredMixin, PermissionRequiredMixin, SuccessMessageMixin, UpdateView
+):
     """
     Handles the update functionality for the Dealer model.
 
@@ -2269,7 +2309,7 @@ class CustomerDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailView
 
 @login_required
 @permission_required("inventory.add_notes", raise_exception=True)
-def add_note_to_customer(request,dealer_slug, slug):
+def add_note_to_customer(request, dealer_slug, slug):
     """
     This function allows authenticated users to add a note to a specific customer. The
     note creation is handled by a form, which is validated after submission. If the form
@@ -2296,7 +2336,9 @@ def add_note_to_customer(request,dealer_slug, slug):
 
             note.created_by = request.user
             note.save()
-            return redirect("customer_detail", dealer_slug=dealer_slug,slug=customer.slug)
+            return redirect(
+                "customer_detail", dealer_slug=dealer_slug, slug=customer.slug
+            )
 
     form = forms.NoteForm()
     return render(
@@ -2342,7 +2384,9 @@ def add_activity_to_customer(request, pk):
     )
 
 
-class CustomerCreateView(LoginRequiredMixin, PermissionRequiredMixin, CreateView):
+class CustomerCreateView(
+    LoginRequiredMixin, PermissionRequiredMixin, SuccessMessageMixin, CreateView
+):
     """
     #     Handles the creation of a new customer within the system. This view ensures that proper permissions
     #     and request methods are utilized. It provides feedback to the user about the success or failure of
@@ -2365,6 +2409,7 @@ class CustomerCreateView(LoginRequiredMixin, PermissionRequiredMixin, CreateView
     success_message = "Customer created successfully"
 
     def form_valid(self, form):
+        sleep(5)
         if customer := models.Customer.objects.filter(
             email=form.instance.email
         ).first():
@@ -2384,16 +2429,23 @@ class CustomerCreateView(LoginRequiredMixin, PermissionRequiredMixin, CreateView
         form.instance.dealer = dealer
         try:
             user = form.instance.create_user_model()
-            logger.info(f"Successfully created Customer with  '{user.username}' (ID: {user.id}) "
-                         f"with email '{user.email}' for dealer '{dealer.name}'.")
+            logger.info(
+                f"Successfully created Customer with  '{user.username}' (ID: {user.id}) "
+                f"with email '{user.email}' for dealer '{dealer.name}'."
+            )
         except IntegrityError as e:
             if "UNIQUE constraint" in str(e):
                 messages.error(self.request, _("Email already exists"))
-                logger.info(f"Attempted to create user with existing email '{form.instance.email}' "
-                           f"for dealer '{dealer.name}'. Message: '{e}'")
+                logger.info(
+                    f"Attempted to create user with existing email '{form.instance.email}' "
+                    f"for dealer '{dealer.name}'. Message: '{e}'"
+                )
             else:
-                logger.error(f"An unexpected IntegrityError occurred while creating user(customer) with email '{form.instance.email}' "
-                            f"for dealer '{dealer.name}'. Error: {e}", exc_info=True )
+                logger.error(
+                    f"An unexpected IntegrityError occurred while creating user(customer) with email '{form.instance.email}' "
+                    f"for dealer '{dealer.name}'. Error: {e}",
+                    exc_info=True,
+                )
                 messages.error(self.request, str(e))
             return redirect("customer_create")
         customer = form.instance.create_customer_model()
@@ -2402,11 +2454,16 @@ class CustomerCreateView(LoginRequiredMixin, PermissionRequiredMixin, CreateView
         form.instance.customer_model = customer
 
         return super().form_valid(form)
+
     def get_success_url(self):
-        return reverse_lazy("customer_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]})
+        return reverse_lazy(
+            "customer_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]}
+        )
 
 
-class CustomerUpdateView(LoginRequiredMixin, PermissionRequiredMixin, UpdateView):
+class CustomerUpdateView(
+    LoginRequiredMixin, PermissionRequiredMixin, SuccessMessageMixin, UpdateView
+):
     """
     #     Updates the details of an existing customer in the database. This view is
     #     accessible only to logged-in users with the appropriate permissions. It
@@ -2442,12 +2499,16 @@ class CustomerUpdateView(LoginRequiredMixin, PermissionRequiredMixin, UpdateView
         form.instance.update_user_model()
         form.instance.update_customer_model()
         return super().form_valid(form)
-    def get_success_url(self):
-        return reverse_lazy("customer_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]})
 
-@permission_required('inventory.delete_customer',raise_exception=True)
+    def get_success_url(self):
+        return reverse_lazy(
+            "customer_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]}
+        )
+
+
+@permission_required("inventory.delete_customer", raise_exception=True)
 @login_required
-def delete_customer(request, dealer_slug ,slug):
+def delete_customer(request, dealer_slug, slug):
     """
     Deletes a customer from the system and deactivates the corresponding user account.
 
@@ -2469,7 +2530,7 @@ def delete_customer(request, dealer_slug ,slug):
     return redirect("customer_list", dealer_slug=dealer_slug)
 
 
-class VendorListView(LoginRequiredMixin,PermissionRequiredMixin, ListView):
+class VendorListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
     """
     Represents a view for displaying a paginated list of vendors, accessible only
     to authenticated users.
@@ -2512,8 +2573,8 @@ class VendorListView(LoginRequiredMixin,PermissionRequiredMixin, ListView):
 
 
 @login_required
-@permission_required('inventory.view_vendor',raise_exception=True)
-def vendorDetailView(request, dealer_slug,slug):
+@permission_required("inventory.view_vendor", raise_exception=True)
+def vendorDetailView(request, dealer_slug, slug):
     """
     Fetches and renders the detail view for a specific vendor.
 
@@ -2534,8 +2595,6 @@ def vendorDetailView(request, dealer_slug,slug):
     )
 
 
-
-
 class VendorCreateView(
     LoginRequiredMixin,
     PermissionRequiredMixin,
@@ -2578,14 +2637,18 @@ class VendorCreateView(
                 )
             else:
                 messages.error(self.request, _("Vendor with this email already exists"))
-            return redirect("vendor_create",dealer_slug=self.kwargs["dealer_slug"])
+            return redirect("vendor_create", dealer_slug=self.kwargs["dealer_slug"])
         dealer = get_user_type(self.request)
         form.instance.dealer = dealer
         form.instance.save()
 
         return super().form_valid(form)
+
     def get_success_url(self):
-        return reverse_lazy("vendor_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]})
+        return reverse_lazy(
+            "vendor_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]}
+        )
+
 
 class VendorUpdateView(
     LoginRequiredMixin,
@@ -2639,12 +2702,16 @@ class VendorUpdateView(
         # instance.additional_info = additionals
         # instance.save()
         return super().form_valid(form)
+
     def get_success_url(self):
-        return reverse_lazy("vendor_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]})
+        return reverse_lazy(
+            "vendor_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]}
+        )
+
 
 @login_required
 @permission_required("inventory.delete_vendor")
-def delete_vendor(request, dealer_slug,slug):
+def delete_vendor(request, dealer_slug, slug):
     """
     Deletes an existing vendor record from the database.
 
@@ -2668,7 +2735,7 @@ def delete_vendor(request, dealer_slug,slug):
 
 
 # group
-class GroupListView(LoginRequiredMixin,PermissionRequiredMixin, ListView):
+class GroupListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
     """
     Represents a view for listing groups for a logged-in user.
 
@@ -2696,11 +2763,11 @@ class GroupListView(LoginRequiredMixin,PermissionRequiredMixin, ListView):
     permission_required = ["inventory.view_customgroup"]
 
     def get_queryset(self):
-        dealer = get_object_or_404(models.Dealer,slug=self.kwargs["dealer_slug"])
+        dealer = get_object_or_404(models.Dealer, slug=self.kwargs["dealer_slug"])
         return dealer.groups.all()
 
 
-class GroupDetailView(LoginRequiredMixin,PermissionRequiredMixin, DetailView):
+class GroupDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailView):
     """
     Represents the detail view for a specific group.
 
@@ -2771,7 +2838,9 @@ class GroupCreateView(
             if created:
                 logger.info(f"Successfully created new Django Group: '{group_name}'.")
             else:
-                logger.info(f"Django Group '{group_name}' already exists and was retrieved.")
+                logger.info(
+                    f"Django Group '{group_name}' already exists and was retrieved."
+                )
             instance.dealer = dealer
             instance.group = group
             instance.save()
@@ -2782,14 +2851,15 @@ class GroupCreateView(
 
         except IntegrityError as e:
             from django.utils.translation import gettext_lazy as _
+
             print(e)
             messages.error(self.request, _("Group name already exists"))
             logger.error(
-                    f"An unexpected IntegrityError occurred during CustomGroup creation "
-                    f"for name '{instance.name}' (derived Django Group name '{group_name}') "
-                    f"for dealer '{dealer.name}'. Error: {e}",
-                    exc_info=True # CRUCIAL: Get the full traceback for unexpected errors
-                )
+                f"An unexpected IntegrityError occurred during CustomGroup creation "
+                f"for name '{instance.name}' (derived Django Group name '{group_name}') "
+                f"for dealer '{dealer.name}'. Error: {e}",
+                exc_info=True,  # CRUCIAL: Get the full traceback for unexpected errors
+            )
             return redirect("group_create", dealer_slug=dealer.slug)
 
         if created:
@@ -2803,6 +2873,7 @@ class GroupCreateView(
     def get_success_url(self):
         return reverse_lazy("group_list", args=[self.request.dealer.slug])
 
+
 class GroupUpdateView(
     LoginRequiredMixin,
     PermissionRequiredMixin,
@@ -2844,11 +2915,13 @@ class GroupUpdateView(
         instance.group.name = f"{dealer.slug}_{instance.name}"
         instance.save()
         return super().form_valid(form)
+
     def get_success_url(self):
         return reverse_lazy("group_list", args=[self.request.dealer.slug])
 
+
 @login_required
-def GroupDeleteview(request, dealer_slug,pk):
+def GroupDeleteview(request, dealer_slug, pk):
     """
     Handles the deletion of a specific group instance. This view ensures that only
     authenticated users can perform the deletion. Upon successful deletion, a
@@ -2861,11 +2934,11 @@ def GroupDeleteview(request, dealer_slug,pk):
     :return: The HTTP response that redirects the user to the group list page
         after the group is successfully deleted.
     """
-    get_object_or_404(models.Dealer,slug=dealer_slug)
+    get_object_or_404(models.Dealer, slug=dealer_slug)
     group = get_object_or_404(models.CustomGroup, pk=pk)
     group.delete()
     messages.success(request, _("Group deleted successfully"))
-    return redirect("group_list",dealer_slug=dealer_slug)
+    return redirect("group_list", dealer_slug=dealer_slug)
 
 
 # @login_required
@@ -2900,6 +2973,7 @@ def GroupDeleteview(request, dealer_slug,pk):
 #             for perm in perms:
 #                 perm.is_checked = perm.id in group_permission_ids
 
+
 #     return render(request,"groups/group_permission_form.html", {
 #         "group": customgroup,
 #         "form": form,
@@ -2944,8 +3018,6 @@ def GroupPermissionView(request, dealer_slug, pk):
         ("inventory", "activity"),
         ("inventory", "vendor"),
         ("inventory", "poitemsuploaded"),
-
-
         ("django_ledger", "purchaseordermodel"),
         ("django_ledger", "bankaccountmodel"),
         ("django_ledger", "estimatemodel"),
@@ -2960,34 +3032,37 @@ def GroupPermissionView(request, dealer_slug, pk):
         ("django_ledger", "transactionmodel"),
     ]
     CUSTOM_PERMISSIONS = [
-        ('django_ledger', 'can_approve_estimatemodel'),
-        ('django_ledger', 'can_approve_billmodel'),
+        ("django_ledger", "can_approve_estimatemodel"),
+        ("django_ledger", "can_approve_billmodel"),
     ]
 
     if request.method == "POST":
-          # Get user info for logging
-        user_id = request.user.id if request.user.is_authenticated else 'Anonymous'
-        user_username = request.user.username if request.user.is_authenticated else 'anonymous'
+        # Get user info for logging
+        user_id = request.user.id if request.user.is_authenticated else "Anonymous"
+        user_username = (
+            request.user.username if request.user.is_authenticated else "anonymous"
+        )
 
         try:
-            selected_ids = [int(id) for id in request.POST.getlist('permissions', [])]
+            selected_ids = [int(id) for id in request.POST.getlist("permissions", [])]
 
             # Get content types for model permissions
             model_content_types = ContentType.objects.filter(
                 app_label__in=[m[0] for m in MODEL_LIST],
-                model__in=[m[1] for m in MODEL_LIST]
+                model__in=[m[1] for m in MODEL_LIST],
             )
 
             # Get all valid permissions (model CRUD + custom)
             valid_perms = Permission.objects.filter(
                 # Model CRUD permissions
-                Q(content_type__in=model_content_types) |
+                Q(content_type__in=model_content_types)
+                |
                 # Custom permissions
                 Q(
                     content_type__app_label__in=[p[0] for p in CUSTOM_PERMISSIONS],
-                    codename__in=[p[1] for p in CUSTOM_PERMISSIONS]
+                    codename__in=[p[1] for p in CUSTOM_PERMISSIONS],
                 ),
-                id__in=selected_ids
+                id__in=selected_ids,
             )
 
             with transaction.atomic():
@@ -2995,7 +3070,7 @@ def GroupPermissionView(request, dealer_slug, pk):
                 if valid_perms.exists():
                     group.permissions.add(*valid_perms)
 
-             # --- Logging for successful permission update ---
+                # --- Logging for successful permission update ---
                 logger.info(
                     f"Permissions for Group '{group.name}' (ID: {group.id}) "
                     f"successfully updated by user {user_username} (ID: {user_id}). "
@@ -3005,11 +3080,11 @@ def GroupPermissionView(request, dealer_slug, pk):
             return redirect("group_detail", dealer_slug=dealer_slug, pk=customgroup.pk)
 
         except Exception as e:
-             # --- Logging for error during permission update ---
+            # --- Logging for error during permission update ---
             logger.error(
                 f"Error updating permissions for Group '{group.name}' (ID: {group.id}) "
                 f"by user {user_username} (ID: {user_id}). Error: {e}",
-                exc_info=True # CRUCIAL: Includes the full traceback
+                exc_info=True,  # CRUCIAL: Includes the full traceback
             )
             messages.error(request, _("Error updating permissions: ") + str(e))
 
@@ -3018,20 +3093,20 @@ def GroupPermissionView(request, dealer_slug, pk):
     model_perms = Permission.objects.filter(
         content_type__in=ContentType.objects.filter(
             app_label__in=[m[0] for m in MODEL_LIST],
-            model__in=[m[1] for m in MODEL_LIST]
+            model__in=[m[1] for m in MODEL_LIST],
         )
     )
 
     # Get custom permissions
     custom_perms = Permission.objects.filter(
         content_type__app_label__in=[p[0] for p in CUSTOM_PERMISSIONS],
-        codename__in=[p[1] for p in CUSTOM_PERMISSIONS]
+        codename__in=[p[1] for p in CUSTOM_PERMISSIONS],
     )
 
     # Combine all permissions
     all_permissions = model_perms | custom_perms
-    all_permissions = all_permissions.select_related('content_type').order_by(
-        'content_type__app_label', 'content_type__model', 'codename'
+    all_permissions = all_permissions.select_related("content_type").order_by(
+        "content_type__app_label", "content_type__model", "codename"
     )
 
     # Group permissions with custom ones in a special section
@@ -3041,8 +3116,7 @@ def GroupPermissionView(request, dealer_slug, pk):
 
         # Check if this is a custom permission
         is_custom = any(
-            p[0] == app_label and p[1] == perm.codename
-            for p in CUSTOM_PERMISSIONS
+            p[0] == app_label and p[1] == perm.codename for p in CUSTOM_PERMISSIONS
         )
 
         if is_custom:
@@ -3061,25 +3135,29 @@ def GroupPermissionView(request, dealer_slug, pk):
     # Get currently assigned permission IDs
     group_permission_ids = set(
         group.permissions.filter(
-            id__in=all_permissions.values_list('id', flat=True)
-        ).values_list('id', flat=True)
+            id__in=all_permissions.values_list("id", flat=True)
+        ).values_list("id", flat=True)
     )
 
-    return render(request, "groups/group_permission_form.html", {
-        "group": customgroup,
-        "grouped_permissions": grouped_permissions,
-        "group_permission_ids": group_permission_ids,
-        "group_permission_apps": set(
-            group.permissions.filter(
-                content_type__app_label__in=grouped_permissions.keys()
-            ).values_list('content_type__app_label', flat=True)
-        ),
-        "group_permission_models": set(
-            group.permissions.filter(
-                content_type__app_label__in=grouped_permissions.keys()
-            ).values_list('content_type__model', flat=True)
-        )
-    })
+    return render(
+        request,
+        "groups/group_permission_form.html",
+        {
+            "group": customgroup,
+            "grouped_permissions": grouped_permissions,
+            "group_permission_ids": group_permission_ids,
+            "group_permission_apps": set(
+                group.permissions.filter(
+                    content_type__app_label__in=grouped_permissions.keys()
+                ).values_list("content_type__app_label", flat=True)
+            ),
+            "group_permission_models": set(
+                group.permissions.filter(
+                    content_type__app_label__in=grouped_permissions.keys()
+                ).values_list("content_type__model", flat=True)
+            ),
+        },
+    )
     # if request.method == "POST":
     #     try:
     #         selected_ids = [int(id) for id in request.POST.getlist('permissions', [])]
@@ -3159,11 +3237,10 @@ def GroupPermissionView(request, dealer_slug, pk):
     # })
 
 
-
 # Users
 @login_required
 @permission_required("inventory.change_staff")
-def UserGroupView(request, dealer_slug,slug):
+def UserGroupView(request, dealer_slug, slug):
     """
     Handles the assignment of user groups to a specific staff member. This view
     allows updating the groups a staff member belongs to via a form submission.
@@ -3179,7 +3256,7 @@ def UserGroupView(request, dealer_slug,slug):
         user detail page after successful submission for POST requests.
     :rtype: HttpResponse or HttpResponseRedirect
     """
-    get_object_or_404(models.Dealer,slug=dealer_slug)
+    get_object_or_404(models.Dealer, slug=dealer_slug)
     staff = get_object_or_404(models.Staff, slug=slug)
     if request.method == "POST":
         form = forms.UserGroupForm(request.POST)
@@ -3191,7 +3268,7 @@ def UserGroupView(request, dealer_slug,slug):
             staff.add_group(cg.group)
 
         messages.success(request, _("Group added successfully"))
-        return redirect("user_detail",dealer_slug=dealer_slug, slug=staff.slug)
+        return redirect("user_detail", dealer_slug=dealer_slug, slug=staff.slug)
 
     form = forms.UserGroupForm(initial={"name": staff.groups})
     form.fields["name"].queryset = models.CustomGroup.objects.filter(
@@ -3200,7 +3277,7 @@ def UserGroupView(request, dealer_slug,slug):
     return render(request, "users/user_group_form.html", {"staff": staff, "form": form})
 
 
-class UserListView(LoginRequiredMixin,PermissionRequiredMixin, ListView):
+class UserListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
     """
     Represents a view for listing users with pagination and filters.
 
@@ -3233,7 +3310,7 @@ class UserListView(LoginRequiredMixin,PermissionRequiredMixin, ListView):
         return apply_search_filters(staff, query)
 
 
-class UserDetailView(LoginRequiredMixin,PermissionRequiredMixin, DetailView):
+class UserDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailView):
     """
     Represents a detailed view for displaying user-specific information.
 
@@ -3256,6 +3333,7 @@ class UserDetailView(LoginRequiredMixin,PermissionRequiredMixin, DetailView):
     context_object_name = "user_"
     permission_required = ["inventory.view_staff"]
 
+
 class UserCreateView(
     LoginRequiredMixin,
     PermissionRequiredMixin,
@@ -3327,9 +3405,7 @@ class UserCreateView(
             return redirect("user_create", dealer_slug=dealer.slug)
         password = "Tenhal@123"
 
-        user = User.objects.create_user(
-            username=email, email=email, password=password
-        )
+        user = User.objects.create_user(username=email, email=email, password=password)
         user.is_staff = True
         user.save()
 
@@ -3343,9 +3419,11 @@ class UserCreateView(
         for customgroup in form.cleaned_data["group"]:
             staff.add_group(customgroup.group)
         return super().form_valid(form)
+
     def get_success_url(self):
         return reverse_lazy("user_list", args=[self.request.dealer.slug])
 
+
 class UserUpdateView(
     LoginRequiredMixin,
     PermissionRequiredMixin,
@@ -3413,15 +3491,17 @@ class UserUpdateView(
         staff.arabic_name = form.cleaned_data["arabic_name"]
         staff.phone_number = form.cleaned_data["phone_number"]
         for customgroup in form.cleaned_data["group"]:
-            staff.add_group(customgroup.group,True)
+            staff.add_group(customgroup.group, True)
         staff.save()
         return super().form_valid(form)
+
     def get_success_url(self):
         return reverse_lazy("user_list", args=[self.request.dealer.slug])
 
+
 @login_required
 @permission_required("inventory.delete_staff", login_url="login")
-def UserDeleteview(request, dealer_slug,slug):
+def UserDeleteview(request, dealer_slug, slug):
     """
     Deletes a user and its associated staff member from the database and redirects
     to the user list page. Displays a success message upon successful deletion
@@ -3432,14 +3512,14 @@ def UserDeleteview(request, dealer_slug,slug):
     :return: An HTTP redirect to the user list page.
 
     """
-    get_object_or_404(models.Dealer,slug=dealer_slug)
+    get_object_or_404(models.Dealer, slug=dealer_slug)
     staff = get_object_or_404(models.Staff, slug=slug)
     staff.deactivate_account()
     messages.success(request, _("User deleted successfully"))
-    return redirect("user_list",dealer_slug=dealer_slug)
+    return redirect("user_list", dealer_slug=dealer_slug)
 
 
-class OrganizationListView(LoginRequiredMixin,PermissionRequiredMixin, ListView):
+class OrganizationListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
     """
     Represents a view to display a paginated list of organizations for a dealer.
 
@@ -3473,7 +3553,7 @@ class OrganizationListView(LoginRequiredMixin,PermissionRequiredMixin, ListView)
         return apply_search_filters(organization, query)
 
 
-class OrganizationDetailView(LoginRequiredMixin,PermissionRequiredMixin, DetailView):
+class OrganizationDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailView):
     """
     Handles displaying detailed information about an organization.
 
@@ -3497,6 +3577,7 @@ class OrganizationDetailView(LoginRequiredMixin,PermissionRequiredMixin, DetailV
     context_object_name = "organization"
     permission_required = ["inventory.view_organization"]
 
+
 class OrganizationCreateView(LoginRequiredMixin, PermissionRequiredMixin, CreateView):
     """
     #     Handles the creation of a new organization via a web form. This view allows the
@@ -3546,7 +3627,9 @@ class OrganizationCreateView(LoginRequiredMixin, PermissionRequiredMixin, Create
         return super().form_valid(form)
 
     def get_success_url(self):
-        return reverse_lazy("organization_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]})
+        return reverse_lazy(
+            "organization_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]}
+        )
 
 
 class OrganizationUpdateView(LoginRequiredMixin, PermissionRequiredMixin, UpdateView):
@@ -3580,11 +3663,14 @@ class OrganizationUpdateView(LoginRequiredMixin, PermissionRequiredMixin, Update
         return super().form_valid(form)
 
     def get_success_url(self):
-        return reverse_lazy("organization_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]})
+        return reverse_lazy(
+            "organization_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]}
+        )
+
 
 @login_required
 @permission_required("inventory.delete_organization")
-def OrganizationDeleteView(request,dealer_slug, slug):
+def OrganizationDeleteView(request, dealer_slug, slug):
     """
     Handles the deletion of an organization based on the provided primary key (pk). Looks up
     the organization and its corresponding user by email, attempts to delete both, and provides
@@ -3601,7 +3687,9 @@ def OrganizationDeleteView(request,dealer_slug, slug):
     organization = get_object_or_404(models.Organization, slug=slug)
     organization.deactivate_account()
     messages.success(request, _("Organization Deactivated successfully"))
-    return redirect(reverse_lazy("organization_list", kwargs={"dealer_slug": dealer_slug}))
+    return redirect(
+        reverse_lazy("organization_list", kwargs={"dealer_slug": dealer_slug})
+    )
 
 
 class RepresentativeListView(LoginRequiredMixin, ListView):
@@ -3848,14 +3936,18 @@ class BankAccountCreateView(
             role__in=[
                 roles.ASSET_CA_CASH,
                 roles.LIABILITY_CL_ACC_PAYABLE,
-                roles.LIABILITY_LTL_MORTGAGE_PAYABLE
-            ])
-        form.fields['account_model'].queryset = account_qs
+                roles.LIABILITY_LTL_MORTGAGE_PAYABLE,
+            ]
+        )
+        form.fields["account_model"].queryset = account_qs
 
         return form
 
     def get_success_url(self):
-        return reverse_lazy("bank_account_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]})
+        return reverse_lazy(
+            "bank_account_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]}
+        )
+
 
 class BankAccountDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailView):
     """
@@ -3884,10 +3976,10 @@ class BankAccountDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailV
 
     def get_queryset(self):
         dealer = get_object_or_404(models.Dealer, slug=self.kwargs["dealer_slug"])
-        query=self.request.GET.get('q')
-        qs=self.model.objects.filter(entity=dealer.entity)
+        query = self.request.GET.get("q")
+        qs = self.model.objects.filter(entity=dealer.entity)
         if query:
-            qs=apply_search_filters(qs,query)
+            qs = apply_search_filters(qs, query)
             return qs
         return qs
 
@@ -3931,6 +4023,7 @@ class BankAccountUpdateView(
         kwargs["entity_slug"] = entity.slug  # Get entity_slug from URL
         kwargs["user_model"] = entity.admin  # Get user_model from the request
         return kwargs
+
     def get_form(self, form_class=None):
         dealer = get_object_or_404(models.Dealer, slug=self.kwargs["dealer_slug"])
         form = super().get_form(form_class)
@@ -3938,11 +4031,13 @@ class BankAccountUpdateView(
             role__in=[
                 roles.ASSET_CA_CASH,
                 roles.LIABILITY_CL_ACC_PAYABLE,
-                roles.LIABILITY_LTL_MORTGAGE_PAYABLE
-            ])
-        form.fields['account_model'].queryset = account_qs
+                roles.LIABILITY_LTL_MORTGAGE_PAYABLE,
+            ]
+        )
+        form.fields["account_model"].queryset = account_qs
 
         return form
+
     def get_success_url(self):
         return reverse_lazy(
             "bank_account_detail",
@@ -4237,10 +4332,22 @@ def sales_list_view(request, dealer_slug):
     qs = []
     try:
         if any([request.is_dealer, request.is_manager, request.is_accountant]):
-            qs = models.ExtraInfo.get_sale_orders(staff=staff,is_dealer=True)
+            qs = models.ExtraInfo.get_sale_orders(staff=staff, is_dealer=True)
         elif request.is_staff:
             qs = models.ExtraInfo.get_sale_orders(staff=staff)
     except Exception as e:
+        print(e)
+    print(qs[0])
+    # query = request.GET.get('q')
+    # # if query:
+    # #     qs = qs.filter(
+    # #         Q(order_number__icontains=query) |
+    # #         Q(customer__name__icontains=query) |
+    # #         Q(item_details__icontains=query)
+
+    # #     ).distinct()
+    # for so in qs:
+    #     if query in so.customer_customer
         pass
    
 
@@ -4251,7 +4358,8 @@ def sales_list_view(request, dealer_slug):
     context = {"txs": page_obj, "page_obj": page_obj}
     return render(request, "sales/sales_list.html", context)
 
-class SaleOrderDetailView(LoginRequiredMixin,PermissionRequiredMixin, DetailView):
+
+class SaleOrderDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailView):
     model = models.SaleOrder
     template_name = "sales/saleorder_detail.html"
     context_object_name = "sale_order"
@@ -4279,7 +4387,9 @@ class SaleOrderDetailView(LoginRequiredMixin,PermissionRequiredMixin, DetailView
             sale_order.status = status
             sale_order.save()
             messages.success(request, _("Sale order status updated"))
-            return redirect("order_detail", dealer_slug=sale_order.dealer.slug, pk=sale_order.pk)
+            return redirect(
+                "order_detail", dealer_slug=sale_order.dealer.slug, pk=sale_order.pk
+            )
 
 
 # Estimates
@@ -4315,22 +4425,31 @@ class EstimateListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
         context = super().get_context_data(**kwargs)
         dealer = get_object_or_404(models.Dealer, slug=self.kwargs["dealer_slug"])
         staff = getattr(self.request.user.staffmember, "staff", None)
-        if any([self.request.is_dealer ,self.request.is_manager ,self.request.is_accountant]):
+
+        if any(
+            [
+                self.request.is_dealer,
+                self.request.is_manager,
+                self.request.is_accountant,
+            ]
+        ):
             qs = models.ExtraInfo.objects.filter(
-                    dealer=dealer,
-                    content_type=ContentType.objects.get_for_model(EstimateModel),
-                    related_content_type=ContentType.objects.get_for_model(models.Staff),
-                )        
-            
+                dealer=dealer,
+                content_type=ContentType.objects.get_for_model(EstimateModel),
+                related_content_type=ContentType.objects.get_for_model(models.Staff),
+            )
+            print(qs)
         elif self.request.is_staff and self.request.is_sales:
             qs = models.ExtraInfo.objects.filter(
-                    dealer=dealer,
-                    content_type=ContentType.objects.get_for_model(EstimateModel),
-                    related_content_type=ContentType.objects.get_for_model(models.Staff),
-                    related_object_id=staff.pk,
-                )
-        context["staff_estimates"] = EstimateModel.objects.filter(pk__in=[x.content_object.pk for x in qs])
+                dealer=dealer,
+                content_type=ContentType.objects.get_for_model(EstimateModel),
+                related_content_type=ContentType.objects.get_for_model(models.Staff),
+                related_object_id=staff.pk,
+            )
+
+        context["staff_estimates"] = qs
         return context
+
     def get_queryset(self):
         dealer = get_user_type(self.request)
         entity = dealer.entity
@@ -4338,6 +4457,14 @@ class EstimateListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
         queryset = entity.get_estimates()
         if status:
             queryset = queryset.filter(status=status)
+        # search_query = self.request.GET.get('q', '').strip()
+        # if search_query:
+        #     queryset = queryset.filter(
+        #         Q(quotation_number__icontains=search_query) |
+        #         Q(customer__name__icontains=search_query)
+
+        #     ).distinct() #
+
         return queryset
 
 
@@ -4519,7 +4646,7 @@ def create_estimate(request, dealer_slug, slug=None):
             opportunity.estimate = estimate
             opportunity.save()
 
-        if staff:=getattr(request.user.staffmember,'staff',None):
+        if staff := getattr(request.user.staffmember, "staff", None):
             models.ExtraInfo.objects.create(
                 dealer=dealer,
                 content_object=estimate,
@@ -4532,7 +4659,7 @@ def create_estimate(request, dealer_slug, slug=None):
                 content_object=estimate,
                 related_object=request.user,
                 created_by=request.user,
-                data={"vat_rate": 0.15,"discount": 0},
+                data={"vat_rate": 0.15, "discount": 0},
             )
 
         url = reverse(
@@ -4582,7 +4709,7 @@ def create_estimate(request, dealer_slug, slug=None):
             "interior_color",
             "color_name",
             "hash",
-            "id_car_make__logo"
+            "id_car_make__logo",
         )
         .annotate(hash_count=Count("hash"))
         .distinct()
@@ -4698,10 +4825,14 @@ def create_sale_order(request, dealer_slug, pk):
                 try:
                     item.item_model.additional_info["car_info"]["status"] = "sold"
                     item.item_model.save()
-                    logger.debug(f"Car status updated to 'sold' for item.item_model PK: {getattr(item.item_model, 'pk', 'N/A')}.")
+                    logger.debug(
+                        f"Car status updated to 'sold' for item.item_model PK: {getattr(item.item_model, 'pk', 'N/A')}."
+                    )
 
                 except KeyError:
-                    logger.warning(f"KeyError: 'car_info' or 'status' key missing when attempting to update status to 'sold' for item.item_model PK: {getattr(item.item_model, 'pk', 'N/A')}.")
+                    logger.warning(
+                        f"KeyError: 'car_info' or 'status' key missing when attempting to update status to 'sold' for item.item_model PK: {getattr(item.item_model, 'pk', 'N/A')}."
+                    )
                     pass
 
                 item.item_model.car.mark_as_sold()
@@ -4734,30 +4865,39 @@ def create_sale_order(request, dealer_slug, pk):
 
 @login_required
 @require_POST
-def update_estimate_discount(request,dealer_slug,pk):
+def update_estimate_discount(request, dealer_slug, pk):
     dealer = get_object_or_404(models.Dealer, slug=dealer_slug)
     estimate = get_object_or_404(EstimateModel, pk=pk)
-    extra_info = models.ExtraInfo.objects.get(dealer=dealer,content_type=ContentType.objects.get_for_model(EstimateModel),object_id=estimate.pk)
-    discount_amount = request.POST.get("discount_amount",0)
+    extra_info = models.ExtraInfo.objects.get(
+        dealer=dealer,
+        content_type=ContentType.objects.get_for_model(EstimateModel),
+        object_id=estimate.pk,
+    )
+    discount_amount = request.POST.get("discount_amount", 0)
 
-    extra_info.data.update({"discount":Decimal(discount_amount)})
+    extra_info.data.update({"discount": Decimal(discount_amount)})
     extra_info.save()
     return redirect("estimate_detail", dealer_slug=dealer_slug, pk=pk)
+
+
 @login_required
 @require_POST
-def update_estimate_additionals(request,dealer_slug,pk):
+def update_estimate_additionals(request, dealer_slug, pk):
     dealer = get_object_or_404(models.Dealer, slug=dealer_slug)
     form = forms.AdditionalFinancesForm(request.POST)
     if request.method == "POST":
         if form.is_valid():
             estimate = get_object_or_404(EstimateModel, pk=pk)
             car = estimate.get_itemtxs_data()[0].first().item_model.car
-            car.finances.additional_services.set(form.cleaned_data["additional_finances"])
+            car.finances.additional_services.set(
+                form.cleaned_data["additional_finances"]
+            )
             car.finances.save()
 
     return redirect("estimate_detail", dealer_slug=dealer_slug, pk=pk)
 
-class SaleOrderDetail(LoginRequiredMixin,PermissionRequiredMixin,DetailView):
+
+class SaleOrderDetail(LoginRequiredMixin, PermissionRequiredMixin, DetailView):
     model = models.SaleOrder
     template_name = "sales/orders/order_details.html"
     context_object_name = "saleorder"
@@ -4898,8 +5038,8 @@ def estimate_mark_as(request, dealer_slug, pk):
     :rtype: HttpResponseRedirect
     """
     if not (
-        request.user.has_perm("django_ledger.can_approve_estimatemodel") or
-        request.user.has_perm("django_ledger.change_estimatemodel")
+        request.user.has_perm("django_ledger.can_approve_estimatemodel")
+        or request.user.has_perm("django_ledger.change_estimatemodel")
     ):
         raise PermissionDenied
     dealer = get_object_or_404(models.Dealer, slug=dealer_slug)
@@ -4921,13 +5061,11 @@ def estimate_mark_as(request, dealer_slug, pk):
                 )
             estimate.mark_as_approved()
             estimate.save()
-            #Reserve The Car
+            # Reserve The Car
             car = estimate.get_itemtxs_data()[0].first().item_model.car
             reserve_car(car, request)
             messages.success(request, _("Quotation approved successfully"))
-            return redirect(
-                "estimate_list", dealer_slug=dealer.slug
-            )
+            return redirect("estimate_list", dealer_slug=dealer.slug)
         elif mark == "rejected":
             if not estimate.can_cancel():
                 messages.error(request, _("Quotation is not ready for rejection"))
@@ -4955,10 +5093,15 @@ def estimate_mark_as(request, dealer_slug, pk):
                 )
                 car.status = "available"
                 car.save()
-                logger.debug(f"Car VIN '{car.vin}' status updated to 'available' for Estimate ID: {getattr(estimate, 'pk', 'N/A')}.")
+                logger.debug(
+                    f"Car VIN '{car.vin}' status updated to 'available' for Estimate ID: {getattr(estimate, 'pk', 'N/A')}."
+                )
             except Exception as e:
-                logger.error(f"Failed to update car status to 'available' for Estimate ID: {getattr(estimate, 'pk', 'N/A')}. "
-                       f"Attempted VIN: '{car.vin}'. Error: {e}",exc_info=True )
+                logger.error(
+                    f"Failed to update car status to 'available' for Estimate ID: {getattr(estimate, 'pk', 'N/A')}. "
+                    f"Attempted VIN: '{car.vin}'. Error: {e}",
+                    exc_info=True,
+                )
 
             messages.success(request, _("Quotation canceled successfully"))
         estimate.save()
@@ -5002,8 +5145,14 @@ class InvoiceListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
         staff = getattr(self.request.user.staffmember, "staff", None)
         qs = []
         try:
-            if any([self.request.is_dealer, self.request.is_manager,self.request.is_accountant]):
-                qs = models.ExtraInfo.get_invoices(staff=staff,is_dealer=True)
+            if any(
+                [
+                    self.request.is_dealer,
+                    self.request.is_manager,
+                    self.request.is_accountant,
+                ]
+            ):
+                qs = models.ExtraInfo.get_invoices(staff=staff, is_dealer=True)
             elif self.request.is_staff:
                 qs = models.ExtraInfo.get_invoices(staff=staff)
         except Exception as e:
@@ -5394,8 +5543,10 @@ def PaymentCreateView(request, dealer_slug, pk):
         form = forms.PaymentForm(request.POST)
 
         # --- Define user and model context for logging here
-        user_id = request.user.id if request.user.is_authenticated else 'Anonymous'
-        user_username = request.user.username if request.user.is_authenticated else 'anonymous'
+        user_id = request.user.id if request.user.is_authenticated else "Anonymous"
+        user_username = (
+            request.user.username if request.user.is_authenticated else "anonymous"
+        )
 
         if form.is_valid():
             amount = form.cleaned_data.get("amount")
@@ -5417,10 +5568,14 @@ def PaymentCreateView(request, dealer_slug, pk):
             try:
                 if invoice:
                     set_invoice_payment(dealer, entity, invoice, amount, payment_method)
-                    logger.info(f"User {user_username} (ID: {user_id}) successfully processed payment for Invoice ID: {invoice.pk} (Dealer: {dealer.slug}) Amount: {amount}, Method: {payment_method}.")
+                    logger.info(
+                        f"User {user_username} (ID: {user_id}) successfully processed payment for Invoice ID: {invoice.pk} (Dealer: {dealer.slug}) Amount: {amount}, Method: {payment_method}."
+                    )
                 elif bill:
                     set_bill_payment(dealer, entity, bill, amount, payment_method)
-                    logger.info(f"User {user_username} (ID: {user_id}) successfully processed payment for Bill ID: {bill.pk} (Dealer: {dealer.slug}) Amount: {amount}, Method: {payment_method}.")
+                    logger.info(
+                        f"User {user_username} (ID: {user_id}) successfully processed payment for Bill ID: {bill.pk} (Dealer: {dealer.slug}) Amount: {amount}, Method: {payment_method}."
+                    )
 
                 messages.success(request, _("Payment created successfully"))
                 return redirect(redirect_url, dealer_slug=dealer.slug, pk=model.pk)
@@ -5429,7 +5584,7 @@ def PaymentCreateView(request, dealer_slug, pk):
                     f"User {user_username} (ID: {user_id}) encountered error creating payment "
                     f"for (Dealer: {dealer.slug}). "
                     f"Attempted Amount: {amount}, Method: {payment_method}. Error: {e}",
-                    exc_info=True
+                    exc_info=True,
                 )
                 messages.error(request, f"Error creating payment: {str(e)}")
         else:
@@ -5532,9 +5687,11 @@ def payment_mark_as_paid(request, dealer_slug, pk):
     dealer = get_object_or_404(models.Dealer, slug=dealer_slug)
     invoice = get_object_or_404(InvoiceModel, pk=pk)
     if request.method == "POST":
-         # Get user info for logging
-        user_id = request.user.id if request.user.is_authenticated else 'Anonymous'
-        user_username = request.user.username if request.user.is_authenticated else 'anonymous'
+        # Get user info for logging
+        user_id = request.user.id if request.user.is_authenticated else "Anonymous"
+        user_username = (
+            request.user.username if request.user.is_authenticated else "anonymous"
+        )
 
         try:
             if invoice.amount_due == invoice.amount_paid:
@@ -5550,7 +5707,7 @@ def payment_mark_as_paid(request, dealer_slug, pk):
 
                 # invoice.ledger.post()
                 invoice.ledger.save()
-                 # --- Log successful operation ---
+                # --- Log successful operation ---
                 logger.info(
                     f"User {user_username} (ID: {user_id}) successfully marked Invoice ID: {invoice.pk} "
                     f"as paid and processed ledger entries for Dealer: {dealer_slug}."
@@ -5570,7 +5727,7 @@ def payment_mark_as_paid(request, dealer_slug, pk):
             logger.error(
                 f"User {user_username} (ID: {user_id}) encountered an error while marking Invoice ID: {invoice.pk} "
                 f"as paid or processing ledger entries for Dealer: {dealer_slug}. Error: {e}",
-                exc_info=True
+                exc_info=True,
             )
             messages.error(request, f"Error: {str(e)}")
     return redirect("invoice_detail", dealer_slug=dealer_slug, pk=invoice.pk)
@@ -5648,23 +5805,24 @@ class LeadListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
         query = self.request.GET.get("q")
         qs = models.Lead.objects.filter(dealer=dealer).exclude(status="converted")
         if query:
-            qs = qs.filter(Q(first_name__icontains=query)
-                            | Q(last_name__icontains=query)
-                            | Q(id_car_make__name__icontains=query)
-                            | Q(id_car_model__name__icontains=query)
-                            | Q(email__icontains=query)
-                            | Q(phone_number__icontains=query)
-                            | Q(next_action__icontains=query)
-                            | Q(staff__name__icontains=query))
+            qs = qs.filter(
+                Q(first_name__icontains=query)
+                | Q(last_name__icontains=query)
+                | Q(id_car_make__name__icontains=query)
+                | Q(id_car_model__name__icontains=query)
+                | Q(email__icontains=query)
+                | Q(phone_number__icontains=query)
+                | Q(next_action__icontains=query)
+                | Q(staff__name__icontains=query)
+            )
 
-        if self.request.is_dealer :#or self.request.is_manager:
+        if self.request.is_dealer:  # or self.request.is_manager:
             return qs
         if self.request.is_staff:
             return qs.filter(staff=self.request.staff)
         return models.Lead.objects.none()
 
 
-
 class LeadDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailView):
     """
     View that provides detailed information about a specific lead.
@@ -5687,7 +5845,7 @@ class LeadDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailView):
     permission_required = ["inventory.view_lead"]
 
     def get_context_data(self, **kwargs):
-        dealer = get_object_or_404(models.Dealer,slug=self.kwargs["dealer_slug"])
+        dealer = get_object_or_404(models.Dealer, slug=self.kwargs["dealer_slug"])
         context = super().get_context_data(**kwargs)
         context["notes"] = models.Notes.objects.filter(
             content_type__model="lead", object_id=self.object.id
@@ -5707,18 +5865,24 @@ class LeadDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailView):
         )
         context["schedules"] = models.Schedule.objects.filter(
             dealer=dealer,
-            content_type__model="lead", object_id=self.object.id,
-            scheduled_by=self.request.user
+            content_type__model="lead",
+            object_id=self.object.id,
+            scheduled_by=self.request.user,
         ).order_by("-created_at")
 
         context["status_history"] = models.LeadStatusHistory.objects.filter(
             lead=self.object
         )
         context["transfer_form"] = forms.LeadTransferForm()
-        context["transfer_form"].fields[
-            "transfer_to"
-        ].queryset = models.Staff.objects.select_related("staff_member","staff_member__user").filter(
-            dealer=dealer,staff_member__user__groups__permissions__codename__contains="can_reassign_lead").exclude(staff_member__user=self.request.user).distinct()
+        context["transfer_form"].fields["transfer_to"].queryset = (
+            models.Staff.objects.select_related("staff_member", "staff_member__user")
+            .filter(
+                dealer=dealer,
+                staff_member__user__groups__permissions__codename__contains="can_reassign_lead",
+            )
+            .exclude(staff_member__user=self.request.user)
+            .distinct()
+        )
 
         context["activity_form"] = forms.ActivityForm()
         context["staff_task_form"] = forms.StaffTaskForm()
@@ -5729,7 +5893,7 @@ class LeadDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailView):
 
 @login_required
 @permission_required("inventory.add_lead", raise_exception=True)
-def lead_create(request,dealer_slug):
+def lead_create(request, dealer_slug):
     """
     Handles the creation of a new lead in the inventory system.
 
@@ -5745,11 +5909,13 @@ def lead_create(request,dealer_slug):
     :return: An HTTP response object rendering the lead creation form or redirecting to the lead list page upon success.
     :rtype: HttpResponse
     """
-    dealer = get_object_or_404(models.Dealer,slug=dealer_slug)
+    dealer = get_object_or_404(models.Dealer, slug=dealer_slug)
 
     if request.method == "POST":
         # get username for logging
-        user_username = request.user.username if request.user.is_authenticated else 'anonymous'
+        user_username = (
+            request.user.username if request.user.is_authenticated else "anonymous"
+        )
 
         # Log intent before trying to mark as paid
 
@@ -5804,19 +5970,18 @@ def lead_create(request,dealer_slug):
                     instance.organization = organization
                 instance.next_action = LeadStatus.NEW
                 instance.save()
-                logger.info(f"lead created successfully for dealer {dealer_slug} by user:{user_username}")
+                logger.info(
+                    f"lead created successfully for dealer {dealer_slug} by user:{user_username}"
+                )
                 messages.success(request, _("Lead created successfully"))
                 return redirect("lead_list", dealer_slug=dealer.slug)
             else:
-                logger.error(f"error creating leading for dealer {dealer_slug} by user:{user_username}")
+                logger.error(
+                    f"error creating leading for dealer {dealer_slug} by user:{user_username}"
+                )
                 messages.error(
                     request, f"Lead was not created ... : {str(form.errors)}"
                 )
-                # if email:= request.POST.get("email"):
-                #     if models.Customer.objects.filter(email=email).exists():
-                #         form.errors['email'] = form.error_class([
-                #             _("Email already exists")
-                #         ])
                 return render(request, "crm/leads/lead_form.html", {"form": form})
 
         except Exception as e:
@@ -5837,12 +6002,24 @@ def lead_create(request,dealer_slug):
         qs = form.fields["id_car_make"].queryset.filter(
             is_sa_import=True, pk__in=dealer_make_list
         )
-        form.fields["staff"].queryset = form.fields["staff"].queryset.select_related("staff_member","staff_member__user").filter(dealer=dealer,staff_member__user__groups__permissions__codename__contains="add_lead").distinct()
+        form.fields["staff"].queryset = (
+            form.fields["staff"]
+            .queryset.select_related("staff_member", "staff_member__user")
+            .filter(
+                dealer=dealer,
+                staff_member__user__groups__permissions__codename__contains="add_lead",
+            )
+            .distinct()
+        )
 
         if request.is_staff:
             form.initial["staff"] = request.staff
-            form.fields["staff"].widget.attrs.update({"readonly":"true","required":"true"})
-            form.fields["staff"].queryset = models.Staff.objects.filter(dealer=dealer,pk=request.staff.pk)
+            form.fields["staff"].widget.attrs.update(
+                {"readonly": "true", "required": "true"}
+            )
+            form.fields["staff"].queryset = models.Staff.objects.filter(
+                dealer=dealer, pk=request.staff.pk
+            )
         form.fields["id_car_make"].queryset = qs
         form.fields["id_car_make"].choices = [
             (obj.id_car_make, obj.get_local_name()) for obj in qs
@@ -5852,14 +6029,19 @@ def lead_create(request,dealer_slug):
 
     return render(request, "crm/leads/lead_form.html", {"form": form})
 
+
 @login_required
 @permission_required("inventory.view_lead", raise_exception=True)
-def lead_tracking(request,dealer_slug):
-    dealer = get_object_or_404(models.Dealer,slug=dealer_slug)
-    staff = models.Staff.objects.select_related("staff_member","staff_member__user").filter(dealer=dealer, staff_member__user=request.user).first()
+def lead_tracking(request, dealer_slug):
+    dealer = get_object_or_404(models.Dealer, slug=dealer_slug)
+    staff = (
+        models.Staff.objects.select_related("staff_member", "staff_member__user")
+        .filter(dealer=dealer, staff_member__user=request.user)
+        .first()
+    )
 
     if staff:
-        qs = models.Lead.objects.filter(dealer=dealer,staff=staff)
+        qs = models.Lead.objects.filter(dealer=dealer, staff=staff)
     else:
         qs = models.Lead.objects.filter(dealer=dealer)
 
@@ -5882,9 +6064,11 @@ def lead_tracking(request,dealer_slug):
 # @require_POST
 @login_required
 @permission_required("inventory.change_lead", raise_exception=True)
-def update_lead_actions(request,dealer_slug):
+def update_lead_actions(request, dealer_slug):
     # get the user info for logging
-    user_username = request.user.username if request.user.is_authenticated else 'anonymous'
+    user_username = (
+        request.user.username if request.user.is_authenticated else "anonymous"
+    )
     logger.debug(
         f"User {user_username} is attempting to update lead actions "
         f"for dealer '{dealer_slug}'. Request POST data: {request.POST.dict()}"
@@ -5896,7 +6080,7 @@ def update_lead_actions(request,dealer_slug):
         next_action_date = request.POST.get("next_action_date", None)
 
         if not all([lead_id, current_action, next_action]):
-             # Log for missing required fields
+            # Log for missing required fields
             logger.warning(
                 f"User {user_username} submitted incomplete data to update lead actions "
                 f"for dealer '{dealer_slug}'. Missing fields: lead_id='{lead_id}', current_action='{current_action}', next_action='{next_action}'."
@@ -5913,7 +6097,7 @@ def update_lead_actions(request,dealer_slug):
         lead.status = current_action
         lead.next_action = next_action
 
-         # Log before updating lead fields
+        # Log before updating lead fields
         logger.debug(
             f"User {user_username} found Lead ID: {lead.pk} ('{lead.slug}') "
             f"for update. Current action: '{current_action}', Next action: '{next_action}', Next action date: '{next_action_date}'."
@@ -5927,10 +6111,13 @@ def update_lead_actions(request,dealer_slug):
                     next_action_date, "%Y-%m-%dT%H:%M"
                 )
                 lead.next_action_date = timezone.make_aware(next_action_datetime)
-                logger.debug(f"Lead ID: {lead.pk} next_action_date parsed to {lead.next_action_date}.")
+                logger.debug(
+                    f"Lead ID: {lead.pk} next_action_date parsed to {lead.next_action_date}."
+                )
         except ValueError as ve:
             # Log for invalid date format
-            logger.warning( f"submitted invalid date format ('{next_action_date}') "
+            logger.warning(
+                f"submitted invalid date format ('{next_action_date}') "
                 f"for Lead ID: {lead.pk}. Error: {ve}"
             )
             return JsonResponse(
@@ -5948,7 +6135,7 @@ def update_lead_actions(request,dealer_slug):
         )
 
     except models.Lead.DoesNotExist:
-         # --- Logging for Lead not found ---
+        # --- Logging for Lead not found ---
         logger.warning(
             f"User {user_username} attempted to update non-existent Lead with ID: '{lead_id}' "
             f"for dealer '{dealer_slug}'. Returning 404."
@@ -5959,7 +6146,7 @@ def update_lead_actions(request,dealer_slug):
         logger.error(
             f"User {user_username}  encountered an unexpected error while updating Lead ID: '{involved_lead_id}' "
             f"for dealer '{dealer_slug}'. Error: {e}",
-            exc_info=True # CRUCIAL: Includes the full traceback
+            exc_info=True,  # CRUCIAL: Includes the full traceback
         )
         return JsonResponse({"success": False, "message": str(e)}, status=500)
 
@@ -5995,22 +6182,32 @@ class LeadUpdateView(LoginRequiredMixin, PermissionRequiredMixin, UpdateView):
     permission_required = ["inventory.change_lead"]
 
     def get_form(self, form_class=None):
-        dealer = get_object_or_404(models.Dealer,slug=self.kwargs.get("dealer_slug"))
+        dealer = get_object_or_404(models.Dealer, slug=self.kwargs.get("dealer_slug"))
         form = super().get_form(form_class)
         form.fields[
             "id_car_model"
         ].queryset = form.instance.id_car_make.carmodel_set.all()
-        form.fields["staff"].queryset = form.fields["staff"].queryset.select_related("staff_member","staff_member__user").filter(
-            dealer=dealer,staff_member__user__groups__permissions__codename__contains="add_lead").distinct()
+        form.fields["staff"].queryset = (
+            form.fields["staff"]
+            .queryset.select_related("staff_member", "staff_member__user")
+            .filter(
+                dealer=dealer,
+                staff_member__user__groups__permissions__codename__contains="add_lead",
+            )
+            .distinct()
+        )
 
         return form
+
     def get_success_url(self):
-        return reverse_lazy("lead_list",kwargs={"dealer_slug":self.kwargs.get("dealer_slug")})
+        return reverse_lazy(
+            "lead_list", kwargs={"dealer_slug": self.kwargs.get("dealer_slug")}
+        )
 
 
 @login_required
 @permission_required("inventory.delete_lead", raise_exception=True)
-def LeadDeleteView(request,dealer_slug, slug):
+def LeadDeleteView(request, dealer_slug, slug):
     """
     Handles the deletion of a Lead along with its associated customer and potentially
     a related user account in the system. Ensures proper permissions and login
@@ -6022,7 +6219,9 @@ def LeadDeleteView(request,dealer_slug, slug):
     :return: An HTTP redirect response to the lead list page.
     """
     # get the user info for logging
-    user_username = request.user.username if request.user.is_authenticated else 'anonymous'
+    user_username = (
+        request.user.username if request.user.is_authenticated else "anonymous"
+    )
 
     lead = get_object_or_404(models.Lead, slug=slug)
 
@@ -6032,7 +6231,6 @@ def LeadDeleteView(request,dealer_slug, slug):
         f"and its associated customer/user for dealer '{dealer_slug}'."
     )
 
-
     try:
         User.objects.get(email=lead.customer.email).delete()
         lead.customer.delete()
@@ -6045,92 +6243,94 @@ def LeadDeleteView(request,dealer_slug, slug):
         # --- Single-line log for error during associated user/customer deletion ---
         logger.error(
             f"User {user_username} encountered an error deleting associated user/customer "
-            f"for Lead ID: {lead.slug} ('{lead.slug}') (Email: {getattr(lead.customer, 'email', 'N/A')}). " # Safely get email
+            f"for Lead ID: {lead.slug} ('{lead.slug}') (Email: {getattr(lead.customer, 'email', 'N/A')}). "  # Safely get email
             f"Error: {e}",
-            exc_info=True
+            exc_info=True,
         )
         print(e)
-    lead_id_final = lead.pk # Capture before deletion
+    lead_id_final = lead.pk  # Capture before deletion
     lead_name_final = lead.slug
     lead.delete()
-     # Log the final lead deletion, which happens unconditionally after the try-except
+    # Log the final lead deletion, which happens unconditionally after the try-except
     logger.info(
         f"User {user_username}  successfully deleted Lead ID: {lead_id_final} ('{lead_name_final}') "
         f"for dealer '{dealer_slug}'."
     )
     messages.success(request, _("Lead deleted successfully"))
-    return redirect("lead_list",dealer_slug=dealer_slug)
+    return redirect("lead_list", dealer_slug=dealer_slug)
 
 
-@login_required
-@permission_required("inventory.add_notes", raise_exception=True)
-def add_note_to_lead(request,dealer_slug, slug):
-    """
-    Adds a note to a specific lead. This view is accessible only to authenticated
-    users. The function handles the POST request to create a new note associated
-    with a lead. Upon successful submission, the note is linked to the provided lead,
-    and the user is redirected to the lead's detail page. If the request method is
-    not POST, it initializes an empty form to add a note.
+# @login_required #TODO:delete later
+# @permission_required("inventory.add_notes", raise_exception=True)
+# def add_note_to_lead(request, dealer_slug, slug):
+#     """
+#     Adds a note to a specific lead. This view is accessible only to authenticated
+#     users. The function handles the POST request to create a new note associated
+#     with a lead. Upon successful submission, the note is linked to the provided lead,
+#     and the user is redirected to the lead's detail page. If the request method is
+#     not POST, it initializes an empty form to add a note.
 
-    :param request: The HTTP request object
-    :type request: HttpRequest
-    :param pk: The primary key of the lead to which the note will be added
-    :type pk: int
-    :return: HTTP response object. Redirects to the lead detail page on successful
-        note creation or renders the note form template for GET or invalid POST requests.
-    :rtype: HttpResponse
-    """
-    lead = get_object_or_404(models.Lead, slug=slug)
-    if request.method == "POST":
-        form = forms.NoteForm(request.POST)
-        if form.is_valid():
-            note = form.save(commit=False)
-            note.content_object = lead
-            note.created_by = request.user
-            note.save()
-            messages.success(request, _("Note added successfully"))
-            return redirect("lead_detail",dealer_slug=dealer_slug, slug=lead.slug)
-    else:
-        form = forms.NoteForm()
-    return render(request, "crm/note_form.html", {"form": form, "lead": lead})
+#     :param request: The HTTP request object
+#     :type request: HttpRequest
+#     :param pk: The primary key of the lead to which the note will be added
+#     :type pk: int
+#     :return: HTTP response object. Redirects to the lead detail page on successful
+#         note creation or renders the note form template for GET or invalid POST requests.
+#     :rtype: HttpResponse
+#     """
+#     lead = get_object_or_404(models.Lead, slug=slug)
+#     if request.method == "POST":
+#         form = forms.NoteForm(request.POST)
+#         if form.is_valid():
+#             note = form.save(commit=False)
+#             note.content_object = lead
+#             note.created_by = request.user
+#             note.save()
+#             messages.success(request, _("Note added successfully"))
+#             return redirect("lead_detail", dealer_slug=dealer_slug, slug=lead.slug)
+#     else:
+#         form = forms.NoteForm()
+#     return render(request, "crm/note_form.html", {"form": form, "lead": lead})
 
 
-@login_required
-@permission_required("inventory.add_notes", raise_exception=True)
-def add_note_to_opportunity(request,dealer_slug, slug):
-    """
-    Add a note to a specific opportunity identified by its primary key.
+# @login_required
+# @permission_required("inventory.add_notes", raise_exception=True)
+# def add_note_to_opportunity(request, dealer_slug, slug):
+#     """
+#     Add a note to a specific opportunity identified by its primary key.
 
-    This function handles the addition of a note to an existing opportunity
-    by processing a POST request that includes the note content. If the note
-    content is missing, an error message will be displayed. If the operation
-    is successful, the note is saved, and a success message is returned.
+#     This function handles the addition of a note to an existing opportunity
+#     by processing a POST request that includes the note content. If the note
+#     content is missing, an error message will be displayed. If the operation
+#     is successful, the note is saved, and a success message is returned.
 
-    :param request: The HTTP request object representing the client's request.
-    :param pk: The primary key of the Opportunity to which the note is to be added.
-    :type pk: int
-    :return: A redirect response to the detailed view of the opportunity.
-    """
-    opportunity = get_object_or_404(models.Opportunity, slug=slug)
-    dealer = get_object_or_404(models.Dealer,slug=dealer_slug)
-    if request.method == "POST":
-        notes = request.POST.get("notes")
-        if not notes:
-            messages.error(request, _("Notes field is required"))
-        else:
-            models.Notes.objects.create(
-                dealer=dealer,
-                content_object=opportunity,
-                created_by=request.user,
-                note=notes,
-            )
-            messages.success(request, _("Note added successfully"))
-        return redirect("opportunity_detail", dealer_slug=dealer_slug,slug=opportunity.slug)
+#     :param request: The HTTP request object representing the client's request.
+#     :param pk: The primary key of the Opportunity to which the note is to be added.
+#     :type pk: int
+#     :return: A redirect response to the detailed view of the opportunity.
+#     """
+#     opportunity = get_object_or_404(models.Opportunity, slug=slug)
+#     dealer = get_object_or_404(models.Dealer, slug=dealer_slug)
+#     if request.method == "POST":
+#         notes = request.POST.get("notes")
+#         if not notes:
+#             messages.error(request, _("Notes field is required"))
+#         else:
+#             models.Notes.objects.create(
+#                 dealer=dealer,
+#                 content_object=opportunity,
+#                 created_by=request.user,
+#                 note=notes,
+#             )
+#             messages.success(request, _("Note added successfully"))
+#         return redirect(
+#             "opportunity_detail", dealer_slug=dealer_slug, slug=opportunity.slug
+#         )
 
 
 @login_required
 @permission_required("inventory.delete_notes", raise_exception=True)
-def delete_note(request,dealer_slug, pk):
+def delete_note(request, dealer_slug, pk):
     """
     Deletes a specific note created by the currently logged-in user and redirects
     to the lead detail page. If the note does not exist or the user is not the creator,
@@ -6149,12 +6349,12 @@ def delete_note(request,dealer_slug, pk):
     lead = models.Lead.objects.get(pk=lead_pk)
     note.delete()
     messages.success(request, _("Note deleted successfully."))
-    return redirect("lead_detail", dealer_slug=dealer_slug,slug=lead.slug)
+    return redirect("lead_detail", dealer_slug=dealer_slug, slug=lead.slug)
 
 
 @login_required
 @permission_required("inventory.change_lead", raise_exception=True)
-def lead_convert(request,dealer_slug, slug):
+def lead_convert(request, dealer_slug, slug):
     """
     Converts a lead into a customer and creates a corresponding opportunity.
 
@@ -6172,7 +6372,7 @@ def lead_convert(request,dealer_slug, slug):
     :rtype: HttpResponse
     """
     lead = get_object_or_404(models.Lead, slug=slug)
-    dealer = get_object_or_404(models.Dealer,slug=dealer_slug)
+    dealer = get_object_or_404(models.Dealer, slug=dealer_slug)
     if hasattr(lead, "opportunity"):
         messages.error(request, _("Lead is already converted to customer"))
     else:
@@ -6186,13 +6386,13 @@ def lead_convert(request,dealer_slug, slug):
             staff=lead.staff,
         )
         messages.success(request, _("Lead converted to customer successfully"))
-    return redirect("lead_list",dealer_slug=dealer_slug)
+    return redirect("lead_list", dealer_slug=dealer_slug)
 
 
 @login_required
 @require_POST
 @permission_required("inventory.add_schedule", raise_exception=True)
-def schedule_event(request, dealer_slug,content_type,slug):
+def schedule_event(request, dealer_slug, content_type, slug):
     """
     Handles the scheduling of a lead for an appointment.
 
@@ -6210,8 +6410,10 @@ def schedule_event(request, dealer_slug,content_type,slug):
              method and validity of the form submission.
     :rtype: HttpResponse
     """
-    user_username = request.user.username if request.user.is_authenticated else 'anonymous'
-     # Log the attempt to retrieve the model dynamically
+    user_username = (
+        request.user.username if request.user.is_authenticated else "anonymous"
+    )
+    # Log the attempt to retrieve the model dynamically
     logger.debug(
         f"User {user_username} attempting to retrieve model "
         f"for content_type '{content_type}' for dealer '{dealer_slug}'."
@@ -6219,14 +6421,14 @@ def schedule_event(request, dealer_slug,content_type,slug):
     try:
         model = apps.get_model(f"inventory.{content_type}")
     except LookupError:
-          # --- Single-line log for LookupError (Model not found) ---
+        # --- Single-line log for LookupError (Model not found) ---
         logger.warning(
             f"User {user_username}  requested an invalid model content_type: '{content_type}'. "
             f"Raising Http404 for dealer '{dealer_slug}'."
         )
         raise Http404("Model not found")
 
-    dealer = get_object_or_404(models.Dealer,slug=dealer_slug)
+    dealer = get_object_or_404(models.Dealer, slug=dealer_slug)
     obj = get_object_or_404(model, slug=slug)
 
     if not request.is_staff:
@@ -6247,7 +6449,7 @@ def schedule_event(request, dealer_slug,content_type,slug):
                 instance.cutsomer = obj.organization.customer_model
 
             service = Service.objects.get(name=instance.scheduled_type)
-             # Log attempt to create AppointmentRequest
+            # Log attempt to create AppointmentRequest
             logger.debug(
                 f"User {user_username} attempting to create AppointmentRequest "
                 f"for {content_type} ID: {obj.pk} ('{obj.slug}'). Service: '{service.name}', "
@@ -6286,27 +6488,25 @@ def schedule_event(request, dealer_slug,content_type,slug):
 
             # --- Logging for successful AppointmentRequest and Appointment creation ---
             logger.info(
-                    f"User {user_username} successfully scheduled {content_type} ID: {obj.pk} ('{obj.slug}'). "
-                    f"AppointmentRequest ID: {appointment_request.pk}, Appointment ID: {appointment_request.appointment.pk}."
-                )
+                f"User {user_username} successfully scheduled {content_type} ID: {obj.pk} ('{obj.slug}'). "
+                f"AppointmentRequest ID: {appointment_request.pk}, Appointment ID: {appointment_request.appointment.pk}."
+            )
             messages.success(request, _("Appointment Created Successfully"))
 
             return redirect(request.META.get("HTTP_REFERER"))
         else:
-             # Log for invalid form data
+            # Log for invalid form data
             logger.warning(
                 f"User {user_username}  submitted invalid schedule form data "
                 f"for Lead ID: {obj.pk} ('{obj.slug}'). Errors: {form.errors.as_json()}"
             )
             messages.error(request, f"Invalid form data: {str(form.errors)}")
             return redirect(request.META.get("HTTP_REFERER"))
-    # form = forms.ScheduleForm()
-    # return render(request, "crm/leads/schedule_lead.html", {"lead": lead, "form": form})
 
 
 @login_required
 @permission_required("inventory.change_lead", raise_exception=True)
-def lead_transfer(request,dealer_slug, slug):
+def lead_transfer(request, dealer_slug, slug):
     """
     Handles the transfer of a lead to a different staff member. This view is accessible
     only to authenticated users with the 'inventory.change_lead' permission. If the
@@ -6336,7 +6536,7 @@ def lead_transfer(request,dealer_slug, slug):
 
 
 @login_required
-def send_lead_email(request,dealer_slug, slug, email_pk=None):
+def send_lead_email(request, dealer_slug, slug, email_pk=None):
     """
     Handles sending emails related to a lead. Supports creating drafts, sending emails, and rendering
     an email composition page. Changes on the lead or email objects, such as marking a lead as contacted
@@ -6359,7 +6559,9 @@ def send_lead_email(request,dealer_slug, slug, email_pk=None):
     dealer = get_object_or_404(models.Dealer, slug=dealer_slug)
     lead = get_object_or_404(models.Lead, slug=slug)
     status = request.GET.get("status")
-    user_username = request.user.username if request.user.is_authenticated else 'anonymous'
+    user_username = (
+        request.user.username if request.user.is_authenticated else "anonymous"
+    )
 
     if status == "draft":
         models.Email.objects.create(
@@ -6381,34 +6583,40 @@ def send_lead_email(request,dealer_slug, slug, email_pk=None):
         messages.success(request, _("Email Draft successfully"))
 
         try:
-            if getattr(lead, "opportunity",None):
+            if getattr(lead, "opportunity", None):
                 # Log success when opportunity exists and redirecting
                 logger.info(
                     f"User {user_username} successfully drafted email for Lead ID: {lead.pk} ('{lead.slug}'). "
                     f"Lead has an Opportunity (ID: {lead.opportunity.pk}), redirecting to opportunity detail."
                 )
                 response = HttpResponse(
-                    redirect("opportunity_detail", dealer_slug=dealer_slug,slug=lead.opportunity.slug)
+                    redirect(
+                        "opportunity_detail",
+                        dealer_slug=dealer_slug,
+                        slug=lead.opportunity.slug,
+                    )
                 )
                 response["HX-Redirect"] = reverse(
                     "opportunity_detail", args=[lead.opportunity.slug]
                 )
             else:
-                 # Log success when no opportunity and redirecting to lead detail
+                # Log success when no opportunity and redirecting to lead detail
                 logger.info(
                     f"User {user_username} successfully drafted email for Lead ID: {lead.pk} ('{lead.slug}'). "
                     f"Lead has no Opportunity, redirecting to lead detail."
                 )
                 response = HttpResponse()
-                response["HX-Redirect"] = reverse("lead_detail", dealer_slug=dealer_slug,slug=lead.slug)
+                response["HX-Redirect"] = reverse(
+                    "lead_detail", dealer_slug=dealer_slug, slug=lead.slug
+                )
             return response
         except models.Lead.opportunity.RelatedObjectDoesNotExist:
-             # --- Log when Lead.opportunity does not exist (Draft status) ---
+            # --- Log when Lead.opportunity does not exist (Draft status) ---
             logger.info(
                 f"User {user_username} drafted email for Lead ID: {lead.pk} ('{lead.slug}'). "
                 f"Lead's opportunity does not exist. Redirecting to lead list."
             )
-            return redirect("lead_list",dealer_slug=dealer.slug)
+            return redirect("lead_list", dealer_slug=dealer.slug)
 
     if request.method == "POST":
         email_pk = request.POST.get("email_pk")
@@ -6442,19 +6650,23 @@ def send_lead_email(request,dealer_slug, slug, email_pk=None):
         messages.success(request, _("Email sent successfully"))
         try:
             if lead.opportunity:
-                 # Log success when opportunity exists and redirecting after sending email
+                # Log success when opportunity exists and redirecting after sending email
                 logger.info(
                     f"User {user_username}  successfully sent email for Lead ID: {lead.pk} ('{lead.slug}'). "
                     f"Lead has an Opportunity (ID: {lead.opportunity.pk}), redirecting to opportunity detail."
                 )
-                return redirect("opportunity_detail", dealer_slug=dealer_slug,slug=lead.opportunity.slug)
+                return redirect(
+                    "opportunity_detail",
+                    dealer_slug=dealer_slug,
+                    slug=lead.opportunity.slug,
+                )
         except models.Lead.opportunity.RelatedObjectDoesNotExist:
-             # --- Log when Lead.opportunity does not exist (POST request for sending) ---
+            # --- Log when Lead.opportunity does not exist (POST request for sending) ---
             logger.info(
                 f"User {user_username} sent email for Lead ID: {lead.pk} ('{lead.slug}'). "
                 f"Lead's opportunity does not exist. Redirecting to lead list."
             )
-            return redirect("lead_list",dealer_slug=dealer_slug)
+            return redirect("lead_list", dealer_slug=dealer_slug)
     msg = f"""
             السلام عليكم
             Dear {lead.full_name},
@@ -6489,39 +6701,9 @@ def send_lead_email(request,dealer_slug, slug, email_pk=None):
     )
 
 
-@login_required
-@permission_required("inventory.add_activity", raise_exception=True)
-def add_activity_to_lead(request, pk):
-    """
-    Handles the process of adding a new activity to a specific lead. This includes
-    rendering a form for user input, validating the form submission, and saving the
-    new activity if the input is valid. If the method is GET, it will simply
-    render the form. If the method is POST, it checks the form validity, creates
-    the activity, associates it with the lead, and saves it to the database.
-
-    :param request: The HTTP request object containing metadata about the request made
-    :param pk: The primary key of the lead to which the activity is to be added
-    :return: An HTTP response that either renders the form or redirects to the lead detail page
-    """
-    lead = get_object_or_404(models.Lead, pk=pk)
-    dealer = get_user_type(request)
-    if request.method == "POST":
-        form = forms.ActivityForm(request.POST)
-        if form.is_valid():
-            activity = form.save(commit=False)
-            activity.content_object = lead
-            activity.dealer = dealer
-            activity.activity_type = form.cleaned_data["activity_type"]
-            activity.notes = form.cleaned_data["notes"]
-            activity.created_by = request.user
-            activity.save()
-            return redirect("lead_detail", pk=pk)
-    else:
-        form = forms.ActivityForm()
-    return render(request, "crm/add_activity.html", {"form": form, "lead": lead})
-
-
-class OpportunityCreateView(LoginRequiredMixin,PermissionRequiredMixin,CreateView, SuccessMessageMixin):
+class OpportunityCreateView(
+    LoginRequiredMixin, PermissionRequiredMixin, CreateView, SuccessMessageMixin
+):
     """
     Handles the creation of Opportunity instances through a form while enforcing
     specific user access control and initial data population. This view ensures
@@ -6549,7 +6731,7 @@ class OpportunityCreateView(LoginRequiredMixin,PermissionRequiredMixin,CreateVie
 
     def get_initial(self):
         initial = super().get_initial()
-        dealer = get_object_or_404(models.Dealer,slug=self.kwargs.get("dealer_slug"))
+        dealer = get_object_or_404(models.Dealer, slug=self.kwargs.get("dealer_slug"))
         if self.kwargs.get("slug", None):
             lead = models.Lead.objects.get(slug=self.kwargs.get("slug"), dealer=dealer)
             initial["lead"] = lead
@@ -6557,7 +6739,7 @@ class OpportunityCreateView(LoginRequiredMixin,PermissionRequiredMixin,CreateVie
         return initial
 
     def form_valid(self, form):
-        dealer = get_object_or_404(models.Dealer,slug=self.kwargs.get("dealer_slug"))
+        dealer = get_object_or_404(models.Dealer, slug=self.kwargs.get("dealer_slug"))
         instance = form.save(commit=False)
         instance.dealer = dealer
         instance.staff = instance.lead.staff
@@ -6566,19 +6748,31 @@ class OpportunityCreateView(LoginRequiredMixin,PermissionRequiredMixin,CreateVie
         instance.lead.save()
         return super().form_valid(form)
 
-    def get_form(self,form_class=None):
-        dealer = get_object_or_404(models.Dealer,slug=self.kwargs.get("dealer_slug"))
+    def get_form(self, form_class=None):
+        dealer = get_object_or_404(models.Dealer, slug=self.kwargs.get("dealer_slug"))
         staff = getattr(self.request.user.staffmember, "staff", None)
         form = super().get_form(form_class)
-        form.fields["car"].queryset = models.Car.objects.filter(dealer=dealer,status='available',finances__marked_price__gt=0)
-        form.fields["lead"].queryset = models.Lead.objects.filter(dealer=dealer,staff=staff)
+        form.fields["car"].queryset = models.Car.objects.filter(
+            dealer=dealer, status="available", finances__marked_price__gt=0
+        )
+        form.fields["lead"].queryset = models.Lead.objects.filter(
+            dealer=dealer, staff=staff
+        )
         return form
 
     def get_success_url(self):
-        return reverse_lazy("opportunity_detail", kwargs={"dealer_slug":self.kwargs.get("dealer_slug"),"slug": self.object.slug})
+        return reverse_lazy(
+            "opportunity_detail",
+            kwargs={
+                "dealer_slug": self.kwargs.get("dealer_slug"),
+                "slug": self.object.slug,
+            },
+        )
 
 
-class OpportunityUpdateView(LoginRequiredMixin,PermissionRequiredMixin, SuccessMessageMixin, UpdateView):
+class OpportunityUpdateView(
+    LoginRequiredMixin, PermissionRequiredMixin, SuccessMessageMixin, UpdateView
+):
     """
     Handles the update functionality for Opportunity objects.
 
@@ -6609,14 +6803,24 @@ class OpportunityUpdateView(LoginRequiredMixin,PermissionRequiredMixin, SuccessM
 
     def get_form(self, form_class=None):
         form = super().get_form(form_class)
-        dealer = get_object_or_404(models.Dealer,slug=self.kwargs.get("dealer_slug"))
+        dealer = get_object_or_404(models.Dealer, slug=self.kwargs.get("dealer_slug"))
         staff = getattr(self.request.user.staffmember, "staff", None)
-        form.fields["car"].queryset = models.Car.objects.filter(dealer=dealer,status='available',finances__marked_price__gt=0)
-        form.fields["lead"].queryset = models.Lead.objects.filter(dealer=dealer,staff=staff)
+        form.fields["car"].queryset = models.Car.objects.filter(
+            dealer=dealer, status="available", finances__marked_price__gt=0
+        )
+        form.fields["lead"].queryset = models.Lead.objects.filter(
+            dealer=dealer, staff=staff
+        )
         return form
 
     def get_success_url(self):
-        return reverse_lazy("opportunity_detail", kwargs={"dealer_slug":self.kwargs.get("dealer_slug"),"slug": self.object.slug})
+        return reverse_lazy(
+            "opportunity_detail",
+            kwargs={
+                "dealer_slug": self.kwargs.get("dealer_slug"),
+                "slug": self.object.slug,
+            },
+        )
 
 
 class OpportunityDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailView):
@@ -6642,10 +6846,16 @@ class OpportunityDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailV
     permission_required = ["inventory.view_opportunity"]
 
     def get_context_data(self, **kwargs):
-        dealer = get_object_or_404(models.Dealer,slug=self.kwargs.get("dealer_slug"))
+        dealer = get_object_or_404(models.Dealer, slug=self.kwargs.get("dealer_slug"))
         context = super().get_context_data(**kwargs)
         form = forms.OpportunityStatusForm()
-        url = reverse("opportunity_update_status", kwargs={"dealer_slug": self.kwargs["dealer_slug"], "slug": self.object.slug})
+        url = reverse(
+            "opportunity_update_status",
+            kwargs={
+                "dealer_slug": self.kwargs["dealer_slug"],
+                "slug": self.object.slug,
+            },
+        )
         form.fields["status"].widget.attrs["hx-get"] = url
         form.fields["stage"].widget.attrs["hx-get"] = url
         form.fields["stage"].initial = self.object.stage
@@ -6690,26 +6900,26 @@ class OpportunityDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailV
         )
         qs = models.Schedule.objects.filter(
             dealer=dealer,
-            content_type__model="lead", object_id=self.object.lead.id,
-            scheduled_by=self.request.user
+            content_type__model="lead",
+            object_id=self.object.lead.id,
+            scheduled_by=self.request.user,
         )
 
         context["schedules"] = qs | models.Schedule.objects.filter(
             dealer=dealer,
-            content_type__model="opportunity", object_id=self.object.id,
-            scheduled_by=self.request.user
+            content_type__model="opportunity",
+            object_id=self.object.id,
+            scheduled_by=self.request.user,
         )
         context["schedules"] = context["schedules"].order_by("-created_at")
         context["upcoming_events"] = {
-            "schedules": qs.filter(
-                scheduled_at__gt=timezone.now()
-            )[:5],
+            "schedules": qs.filter(scheduled_at__gt=timezone.now())[:5],
         }
         context["schedule_form"] = forms.ScheduleForm()
         return context
 
 
-class OpportunityListView(LoginRequiredMixin,PermissionRequiredMixin, ListView):
+class OpportunityListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
     model = models.Opportunity
     template_name = "crm/opportunities/opportunity_list.html"
     context_object_name = "opportunities"
@@ -6726,12 +6936,10 @@ class OpportunityListView(LoginRequiredMixin,PermissionRequiredMixin, ListView):
         search = self.request.GET.get("q")
         if search:
             queryset = queryset.filter(
-                 Q(customer__first_name__icontains=search)
+                Q(customer__first_name__icontains=search)
                 | Q(customer__last_name__icontains=search)
                 | Q(customer__email__icontains=search)
-
-                    )
-
+            )
 
         # Stage filter
         stage = self.request.GET.get("stage")
@@ -6760,7 +6968,7 @@ class OpportunityListView(LoginRequiredMixin,PermissionRequiredMixin, ListView):
 
 @login_required
 @permission_required("inventory.delete_opportunity", raise_exception=True)
-def delete_opportunity(request,dealer_slug, pk):
+def delete_opportunity(request, dealer_slug, pk):
     """
     Deletes an opportunity object from the database and redirects to the opportunity
     list view. If the opportunity with the specified primary key is not found, a 404
@@ -6777,12 +6985,12 @@ def delete_opportunity(request,dealer_slug, pk):
     opportunity = get_object_or_404(models.Opportunity, pk=pk)
     opportunity.delete()
     messages.success(request, _("Opportunity deleted successfully"))
-    return redirect("opportunity_list",dealer_slug=dealer_slug)
+    return redirect("opportunity_list", dealer_slug=dealer_slug)
 
 
 @login_required
 @permission_required("inventory.change_opportunity", raise_exception=True)
-def opportunity_update_status(request,dealer_slug, slug):
+def opportunity_update_status(request, dealer_slug, slug):
     """
     Update the status and/or stage of a specific Opportunity instance. This is a
     view function, which is generally tied to a URL endpoint in a Django application.
@@ -6816,7 +7024,9 @@ def opportunity_update_status(request,dealer_slug, slug):
         opportunity.stage = stage
     opportunity.save()
     messages.success(request, _("Opportunity status updated successfully"))
-    response = HttpResponse(redirect("opportunity_detail",dealer_slug=dealer_slug, slug=opportunity.slug))
+    response = HttpResponse(
+        redirect("opportunity_detail", dealer_slug=dealer_slug, slug=opportunity.slug)
+    )
     response["HX-Refresh"] = "true"
     return response
 
@@ -6853,51 +7063,6 @@ class NotificationListView(LoginRequiredMixin, ListView):
         return models.Notification.objects.filter(user=self.request.user)
 
 
-# @login_required
-# def mark_notification_as_read(request, pk):
-#     """
-#     Marks a user notification as read.
-
-#     This view allows an authenticated user to mark a specific notification,
-#     identified by its primary key, as read. Upon successfully marking the
-#     notification, a success message is displayed, and the user is redirected
-#     to their notification history page.
-
-#     :param request: The HTTP request object.
-#     :type request: HttpRequest
-#     :param pk: Primary key of the notification to be marked as read.
-#     :type pk: int
-#     :return: An HTTP response redirecting to the notification history page.
-#     :rtype: HttpResponse
-#     """
-#     notification = get_object_or_404(models.Notification, pk=pk, user=request.user)
-#     notification.is_read = True
-#     notification.save()
-#     messages.success(request, _("Notification marked as read"))
-#     return redirect("notifications_history")
-
-
-# @login_required
-# def fetch_notifications(request):
-#     """
-#     Fetches unread notifications for the currently logged-in user and renders them
-#     to the `notifications.html` template. The notifications are filtered to include
-#     only those belonging to the logged-in user and are sorted by creation date in
-#     descending order.
-
-#     :param request: The HTTP request object representing the current user request.
-#         Must include details of the logged-in user.
-#     :return: An HttpResponse object that renders the `notifications.html` template
-#         with the fetched notifications.
-
-#     """
-#     notifications = models.Notification.objects.filter(
-#         user=request.user, is_read=False
-#     ).order_by("-created")
-
-#     return render(request, "notifications.html", {"notifications_": notifications})
-
-
 class ItemServiceCreateView(
     LoginRequiredMixin, PermissionRequiredMixin, SuccessMessageMixin, CreateView
 ):
@@ -6935,16 +7100,18 @@ class ItemServiceCreateView(
     permission_required = ["inventory.add_additionalservices"]
 
     def form_valid(self, form):
-        sleep(5)
         dealer = get_user_type(self.request)
-        vat = models.VatRate.objects.get(dealer=dealer,is_active=True)
+        vat = models.VatRate.objects.get(dealer=dealer, is_active=True)
         form.instance.dealer = dealer
         if form.instance.taxable:
             form.instance.price = (form.instance.price * vat.rate) + form.instance.price
         return super().form_valid(form)
 
     def get_success_url(self):
-        return reverse_lazy("item_service_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]})
+        return reverse_lazy(
+            "item_service_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]}
+        )
+
 
 class ItemServiceUpdateView(
     LoginRequiredMixin, PermissionRequiredMixin, SuccessMessageMixin, UpdateView
@@ -6981,16 +7148,20 @@ class ItemServiceUpdateView(
     context_object_name = "service"
     permission_required = ["inventory.change_additionalservices"]
 
-
     def form_valid(self, form):
         dealer = get_user_type(self.request)
-        vat = models.VatRate.objects.get(dealer=dealer,is_active=True)
+        vat = models.VatRate.objects.get(dealer=dealer, is_active=True)
         form.instance.dealer = dealer
         if form.instance.taxable:
             form.instance.price = (form.instance.price * vat.rate) + form.instance.price
         return super().form_valid(form)
+
     def get_success_url(self):
-        return reverse_lazy("item_service_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]})
+        return reverse_lazy(
+            "item_service_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]}
+        )
+
+
 class ItemServiceListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
     """
     Handles the listing of additional services for a dealer.
@@ -7022,16 +7193,12 @@ class ItemServiceListView(LoginRequiredMixin, PermissionRequiredMixin, ListView)
 
     def get_queryset(self):
         dealer = get_user_type(self.request)
-        query=self.request.GET.get('q')
-        qs= models.AdditionalServices.objects.filter(dealer=dealer).all()
+        query = self.request.GET.get("q")
+        qs = models.AdditionalServices.objects.filter(dealer=dealer).all()
         if query:
-            qs=apply_search_filters(qs,query)
+            qs = apply_search_filters(qs, query)
         return qs
 
-    # def get_queryset(self):
-    #     dealer = get_user_type(self.request)
-    #     return models.AdditionalServices.objects.filter(dealer=dealer).all()
-
 
 class ItemExpenseCreateView(LoginRequiredMixin, PermissionRequiredMixin, CreateView):
     """
@@ -7067,17 +7234,16 @@ class ItemExpenseCreateView(LoginRequiredMixin, PermissionRequiredMixin, CreateV
         kwargs["user_model"] = dealer.entity.admin
         return kwargs
 
-    # def get_form(self,form_class=None):
-    #     dealer = get_object_or_404(models.Dealer, slug=self.kwargs["dealer_slug"])
-    #     form = super().get_form(form_class)
-    #     form.fields["uom"].queryset = dealer.entity.get_uom_all()
-    #     return form
     def form_valid(self, form):
         dealer = get_object_or_404(models.Dealer, slug=self.kwargs["dealer_slug"])
         form.instance.entity = dealer.entity
         return super().form_valid(form)
+
     def get_success_url(self):
-        return reverse_lazy("item_expense_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]})
+        return reverse_lazy(
+            "item_expense_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]}
+        )
+
 
 class ItemExpenseUpdateView(LoginRequiredMixin, PermissionRequiredMixin, UpdateView):
     """
@@ -7117,8 +7283,12 @@ class ItemExpenseUpdateView(LoginRequiredMixin, PermissionRequiredMixin, UpdateV
         dealer = get_user_type(self.request)
         form.instance.entity = dealer.entity
         return super().form_valid(form)
+
     def get_success_url(self):
-        return reverse_lazy("item_expense_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]})
+        return reverse_lazy(
+            "item_expense_list", kwargs={"dealer_slug": self.kwargs["dealer_slug"]}
+        )
+
 
 class ItemExpenseListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
     """
@@ -7148,20 +7318,15 @@ class ItemExpenseListView(LoginRequiredMixin, PermissionRequiredMixin, ListView)
     paginate_by = 30
     permission_required = ["django_ledger.view_itemmodel"]
 
-    # def get_queryset(self):
-    #     dealer = get_user_type(self.request)
-    #     return dealer.entity.get_items_expenses()
-
     def get_queryset(self):
         dealer = get_user_type(self.request)
-        query=self.request.GET.get('q')
-        qs= dealer.entity.get_items_expenses()
+        query = self.request.GET.get("q")
+        qs = dealer.entity.get_items_expenses()
         if query:
-            qs=apply_search_filters(qs,query)
+            qs = apply_search_filters(qs, query)
         return qs
 
 
-
 class BillListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
     """
     Provides a view for listing bills.
@@ -7189,9 +7354,9 @@ class BillListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
     def get_queryset(self):
         dealer = get_user_type(self.request)
         qs = dealer.entity.get_bills()
-        query=self.request.GET.get('q')
+        query = self.request.GET.get("q")
         if query:
-            qs=qs.filter(vendor__vendor_name__icontains=query)
+            qs = qs.filter(vendor__vendor_name__icontains=query)
         return qs
 
     def get_context_data(self, **kwargs):
@@ -7200,7 +7365,7 @@ class BillListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
         return context
 
 
-class BillModelCreateView(LoginRequiredMixin,PermissionRequiredMixin,CreateView):
+class BillModelCreateView(LoginRequiredMixin, PermissionRequiredMixin, CreateView):
     template_name = "bill/bill_create.html"
     PAGE_TITLE = _("Create Bill")
     permission_required = "django_ledger.add_billmodel"
@@ -7212,10 +7377,12 @@ class BillModelCreateView(LoginRequiredMixin,PermissionRequiredMixin,CreateView)
     for_purchase_order = False
     for_estimate = False
 
-     # Get user info for logging
+    # Get user info for logging
 
     def get(self, request, dealer_slug, **kwargs):
-        user_username = request.user.username if request.user.is_authenticated else 'anonymous'
+        user_username = (
+            request.user.username if request.user.is_authenticated else "anonymous"
+        )
 
         dealer = get_object_or_404(models.Dealer, slug=dealer_slug)
         if not request.user.is_authenticated:
@@ -7243,7 +7410,11 @@ class BillModelCreateView(LoginRequiredMixin,PermissionRequiredMixin,CreateView)
     def get_context_data(self, **kwargs):
         context = super(BillModelCreateView, self).get_context_data(**kwargs)
         dealer = get_object_or_404(models.Dealer, slug=self.kwargs["dealer_slug"])
-        user_username = self.request.user.username if self.request.user.is_authenticated else 'anonymous'
+        user_username = (
+            self.request.user.username
+            if self.request.user.is_authenticated
+            else "anonymous"
+        )
 
         if self.for_purchase_order:
             po_pk = self.kwargs["po_pk"]
@@ -7251,13 +7422,13 @@ class BillModelCreateView(LoginRequiredMixin,PermissionRequiredMixin,CreateView)
             if po_item_uuids_qry_param:
                 try:
                     po_item_uuids = po_item_uuids_qry_param.split(",")
-                     # --- Single-line log for successful parsing ---
+                    # --- Single-line log for successful parsing ---
                     logger.debug(
                         f"User {user_username} successfully parsed item_uuids from query param "
                         f"for Purchase Order ID: {po_pk} "
                     )
                 except:
-                     # --- Single-line log for error during parsing ---
+                    # --- Single-line log for error during parsing ---
                     logger.warning(
                         f"User {user_username}submitted invalid item_uuids query parameter "
                         f"'{po_item_uuids_qry_param}' for Purchase Order ID: {po_pk} "
@@ -7354,12 +7525,17 @@ class BillModelCreateView(LoginRequiredMixin,PermissionRequiredMixin,CreateView)
             )
             po_model: PurchaseOrderModel = get_object_or_404(po_qs, uuid__exact=po_pk)
 
-            user_username = self.request.user.username if self.request.user.is_authenticated else 'anonymous'
+            user_username = (
+                self.request.user.username
+                if self.request.user.is_authenticated
+                else "anonymous"
+            )
             try:
                 bill_model.can_bind_po(po_model, raise_exception=True)
                 logger.info(
-                 f"User {user_username} successfully validated binding of Bill ID: {getattr(bill_model, 'pk', 'N/A')} "
-                    f"to Purchase Order ID: {getattr(po_model, 'pk', 'N/A')}.")
+                    f"User {user_username} successfully validated binding of Bill ID: {getattr(bill_model, 'pk', 'N/A')} "
+                    f"to Purchase Order ID: {getattr(po_model, 'pk', 'N/A')}."
+                )
             except ValidationError as e:
                 messages.add_message(
                     self.request,
@@ -7367,10 +7543,12 @@ class BillModelCreateView(LoginRequiredMixin,PermissionRequiredMixin,CreateView)
                     level=messages.ERROR,
                     extra_tags="is-danger",
                 )
-                  # --- Single-line log for ValidationError during binding validation ---
-                logger.warning(f"User {user_username}  encountered a validation error "
-                               f"while attempting to bind Bill ID: {getattr(bill_model, 'pk', 'N/A')} "
-                               f"to Purchase Order ID: {getattr(po_model, 'pk', 'N/A')}. Error: {e.message}")
+                # --- Single-line log for ValidationError during binding validation ---
+                logger.warning(
+                    f"User {user_username}  encountered a validation error "
+                    f"while attempting to bind Bill ID: {getattr(bill_model, 'pk', 'N/A')} "
+                    f"to Purchase Order ID: {getattr(po_model, 'pk', 'N/A')}. Error: {e.message}"
+                )
                 return self.render_to_response(self.get_context_data(form=form))
 
             po_model_items_qs = po_model.itemtransactionmodel_set.filter(
@@ -7429,18 +7607,19 @@ class BillModelDetailView(BillModelDetailViewBase):
         context = super(BillModelDetailView, self).get_context_data(**kwargs)
         context["dealer"] = self.request.dealer
         return context
+
     def get_queryset(self):
         qs = super().get_queryset()
         return qs.select_related(
-            'ledger',
-            'ledger__entity',
-            'vendor',
-            'cash_account',
-            'prepaid_account',
-            'unearned_account',
-            'cash_account__coa_model',
-            'prepaid_account__coa_model',
-            'unearned_account__coa_model'
+            "ledger",
+            "ledger__entity",
+            "vendor",
+            "cash_account",
+            "prepaid_account",
+            "unearned_account",
+            "cash_account__coa_model",
+            "prepaid_account__coa_model",
+            "unearned_account__coa_model",
         )
 
 
@@ -7448,163 +7627,6 @@ class BillModelUpdateView(BillModelUpdateViewBase):
     permission_required = ["django_ledger.change_billmodel"]
 
 
-# @login_required
-# @permission_required("django_ledger.add_billmodel", raise_exception=True)
-# def bill_create(request):
-#     """
-#     Handles creation of a bill in the system, including the validation of input data,
-#     creation of transactions associated with the bill, and rendering of the appropriate
-#     response or form. Ensures the user creating the bill has the necessary permissions and
-#     correct input parameters for successful bill creation and itemization.
-
-#     :param request: Django HttpRequest object containing metadata and data of the HTTP request.
-#     :type request: HttpRequest
-#     :return: JsonResponse with success/error information if the request is processed,
-#              or HttpResponse rendering the form for bill creation.
-#     :rtype: JsonResponse or HttpResponse
-#     """
-#     dealer = get_user_type(request)
-#     entity = dealer.entity
-
-#     if request.method == "POST":
-#         data = json.loads(request.body)
-#         vendor_id = data.get("vendor")
-#         terms = data.get("terms")
-#         vendor = entity.get_vendors().filter(pk=vendor_id).first()
-
-#         items = data.get("item", [])
-#         quantities = data.get("quantity", [])
-
-#         if not all([items, quantities]):
-#             return JsonResponse(
-#                 {"status": "error", "message": _("Items and Quantities are required")},
-#                 status=400,
-#             )
-#         if isinstance(quantities, list):
-#             if "0" in quantities:
-#                 return JsonResponse(
-#                     {
-#                         "status": "error",
-#                         "message": _("Quantity must be greater than zero"),
-#                     }
-#                 )
-#         else:
-#             if int(quantities) <= 0:
-#                 return JsonResponse(
-#                     {
-#                         "status": "error",
-#                         "message": _("Quantity must be greater than zero"),
-#                     }
-#                 )
-
-#         bill = entity.create_bill(vendor_model=vendor, terms=terms)
-#         if isinstance(items, list):
-#             item_quantity_map = {}
-#             for item, quantity in zip(items, quantities):
-#                 if item in item_quantity_map:
-#                     item_quantity_map[item] += int(quantity)
-#                 else:
-#                     item_quantity_map[item] = int(quantity)
-#             item_list = list(item_quantity_map.keys())
-#             quantity_list = list(item_quantity_map.values())
-
-#             items_list = [
-#                 {"item_id": item_list[i], "quantity": quantity_list[i]}
-#                 for i in range(len(item_list))
-#             ]
-#             items_txs = []
-#             for item in items_list:
-#                 item_instance = ItemModel.objects.get(pk=item.get("item_id"))
-#                 car = models.Car.objects.get(vin=item_instance.name)
-#                 quantity = Decimal(item.get("quantity"))
-#                 items_txs.append(
-#                     {
-#                         "item_number": item_instance.item_number,
-#                         "quantity": quantity,
-#                         "unit_cost": car.finances.cost_price,
-#                         "total_amount": car.finances.cost_price * quantity,
-#                     }
-#                 )
-
-#             bill_itemtxs = {
-#                 item.get("item_number"): {
-#                     "unit_cost": item.get("unit_cost"),
-#                     "quantity": item.get("quantity"),
-#                     "total_amount": item.get("total_amount"),
-#                 }
-#                 for item in items_txs
-#             }
-#         else:
-#             item = entity.get_items_all().filter(pk=items).first()
-#             instance = models.Car.objects.get(vin=item.name)
-#             bill_itemtxs = {
-#                 item.item_number: {
-#                     "unit_cost": instance.finances.cost_price,
-#                     "quantity": Decimal(quantities),
-#                     "total_amount": instance.finances.cost_price * Decimal(quantities),
-#                 }
-#             }
-
-#         bill_itemtxs = bill.migrate_itemtxs(
-#             itemtxs=bill_itemtxs,
-#             commit=True,
-#             operation=BillModel.ITEMIZE_APPEND,
-#         )
-
-#         url = reverse("bill_detail", kwargs={"pk": bill.pk})
-#         return JsonResponse(
-#             {
-#                 "status": "success",
-#                 "message": _("Bill created successfully"),
-#                 "url": f"{url}",
-#             }
-#         )
-
-#     form = forms.BillModelCreateForm(entity_model=entity)
-#     form.initial.update(
-#         {
-#             "cash_account": dealer.settings.bill_cash_account,
-#             "prepaid_account": dealer.settings.bill_prepaid_account,
-#             "unearned_account": dealer.settings.bill_unearned_account,
-#         }
-#     )
-#     car_list = models.Car.objects.filter(dealer=dealer)
-#     context = {
-#         "form": form,
-#         "items": [
-#             {
-#                 "car": x,
-#                 "product": entity.get_items_products().filter(name=x.vin).first(),
-#             }
-#             for x in car_list
-#         ],
-#     }
-
-#     return render(request, "ledger/bills/bill_form.html", context)
-
-
-# @login_required
-# @permission_required("django_ledger.delete_billmodel", raise_exception=True)
-# def BillDeleteView(request, pk):
-#     """
-#     Deletes a specific BillModel instance based on the primary key (pk).
-#     This view requires the user to be logged in and have the appropriate
-#     permission to delete a bill. After the delete operation is successful,
-#     the user is redirected to the bill list view.
-
-#     :param request: The HTTP request object.
-#     :type request: HttpRequest
-#     :param pk: Primary key of the BillModel instance to be deleted.
-#     :type pk: int
-#     :return: Redirect to the bill list view after successful deletion.
-#     :rtype: HttpResponseRedirect
-#     """
-#     bill = get_object_or_404(BillModel, pk=pk)
-#     bill.delete()
-#     return redirect("bill_list")
-
-
-# orders
 class OrderListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
     """
     Represents a view for listing sale orders.
@@ -7631,11 +7653,10 @@ class OrderListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
 
     def get_queryset(self):
         dealer = get_user_type(self.request)
-        qs = super().get_queryset().select_related("customer","estimate","invoice")
+        qs = super().get_queryset().select_related("customer", "estimate", "invoice")
         return qs.filter(estimate__entity=dealer.entity)
 
 
-# email
 @login_required
 @permission_required("django_ledger.change_estimatemodel", raise_exception=True)
 def send_email_view(request, dealer_slug, pk):
@@ -7786,16 +7807,18 @@ class BaseBalanceSheetRedirectView(RedirectView):
         dealer = get_object_or_404(models.Dealer, slug=self.kwargs["dealer_slug"])
         return reverse(
             "entity-bs-year",
-            kwargs={"dealer_slug": self.kwargs["dealer_slug"],"entity_slug": self.kwargs["entity_slug"], "year": year},
+            kwargs={
+                "dealer_slug": self.kwargs["dealer_slug"],
+                "entity_slug": self.kwargs["entity_slug"],
+                "year": year,
+            },
         )
 
     def get_login_url(self):
         return reverse("account_login")
 
 
-class FiscalYearBalanceSheetViewBase(
-    AuthorizedEntityMixin,FiscalYearBalanceSheetView
-):
+class FiscalYearBalanceSheetViewBase(AuthorizedEntityMixin, FiscalYearBalanceSheetView):
     """
     Defines a base view for the fiscal year balance sheet.
 
@@ -7809,20 +7832,12 @@ class FiscalYearBalanceSheetViewBase(
     """
 
     template_name = "ledger/reports/balance_sheet.html"
-    # AUTHORIZE_SUPERUSER = False
-    # permission_required = []
-
-    # def get_authorized_entity_queryset(self):
-    #     dealer = get_user_type(self.request)
-    #     return EntityModel.objects.filter(admin=dealer)
 
     def get_login_url(self):
         return reverse("account_login")
 
 
-class QuarterlyBalanceSheetView(
-    FiscalYearBalanceSheetViewBase, QuarterlyReportMixIn
-):
+class QuarterlyBalanceSheetView(FiscalYearBalanceSheetViewBase, QuarterlyReportMixIn):
     """
     Represents a quarterly balance sheet view.
 
@@ -7844,7 +7859,8 @@ class QuarterlyBalanceSheetView(
 
 
 class MonthlyBalanceSheetView(
-    FiscalYearBalanceSheetViewBase, MonthlyReportMixIn,
+    FiscalYearBalanceSheetViewBase,
+    MonthlyReportMixIn,
 ):
     """
     Represents the view for the monthly balance sheet.
@@ -7867,7 +7883,8 @@ class MonthlyBalanceSheetView(
 
 
 class DateBalanceSheetView(
-    FiscalYearBalanceSheetViewBase, DateReportMixIn,
+    FiscalYearBalanceSheetViewBase,
+    DateReportMixIn,
 ):
     """
     Represents a balance sheet view for a specific date.
@@ -7897,7 +7914,7 @@ class DateBalanceSheetView(
 
 
 class BaseIncomeStatementRedirectViewBase(
-    AuthorizedEntityMixin,BaseIncomeStatementRedirectView
+    AuthorizedEntityMixin, BaseIncomeStatementRedirectView
 ):
     """
     The BaseIncomeStatementRedirectViewBase class provides functionality for handling
@@ -7918,7 +7935,12 @@ class BaseIncomeStatementRedirectViewBase(
         year = get_localdate().year
         dealer = get_object_or_404(models.Dealer, slug=kwargs["dealer_slug"])
         return reverse(
-            "entity-ic-year", kwargs={"dealer_slug": dealer.slug,"entity_slug": dealer.entity.slug, "year": year}
+            "entity-ic-year",
+            kwargs={
+                "dealer_slug": dealer.slug,
+                "entity_slug": dealer.entity.slug,
+                "year": year,
+            },
         )
 
     def get_login_url(self):
@@ -7926,7 +7948,7 @@ class BaseIncomeStatementRedirectViewBase(
 
 
 class FiscalYearIncomeStatementViewBase(
-    AuthorizedEntityMixin,FiscalYearIncomeStatementView
+    AuthorizedEntityMixin, FiscalYearIncomeStatementView
 ):
     """
     Represents a base view for fiscal year income statement.
@@ -7980,7 +8002,8 @@ class QuarterlyIncomeStatementView(
 
 
 class MonthlyIncomeStatementView(
-    FiscalYearIncomeStatementViewBase, MonthlyReportMixIn,
+    FiscalYearIncomeStatementViewBase,
+    MonthlyReportMixIn,
 ):
     """
     Represents the view for a monthly income statement in the financial
@@ -8006,7 +8029,8 @@ class MonthlyIncomeStatementView(
 
 
 class DateModelIncomeStatementView(
-    FiscalYearIncomeStatementViewBase, DateReportMixIn,
+    FiscalYearIncomeStatementViewBase,
+    DateReportMixIn,
 ):
     """
     Represents a detailed view of an income statement for a fiscal year with additional
@@ -8031,7 +8055,7 @@ class DateModelIncomeStatementView(
 
 
 class BaseCashFlowStatementRedirectViewBase(
-    AuthorizedEntityMixin,BaseCashFlowStatementRedirectView
+    AuthorizedEntityMixin, BaseCashFlowStatementRedirectView
 ):
     """
     Base class for handling cash flow statement redirection views.
@@ -8049,7 +8073,12 @@ class BaseCashFlowStatementRedirectViewBase(
         year = get_localdate().year
         dealer = get_object_or_404(models.Dealer, slug=self.kwargs["dealer_slug"])
         return reverse(
-            "entity-cf-year", kwargs={"dealer_slug": dealer.slug,"entity_slug": dealer.entity.slug, "year": year}
+            "entity-cf-year",
+            kwargs={
+                "dealer_slug": dealer.slug,
+                "entity_slug": dealer.entity.slug,
+                "year": year,
+            },
         )
 
     def get_login_url(self):
@@ -8057,7 +8086,7 @@ class BaseCashFlowStatementRedirectViewBase(
 
 
 class FiscalYearCashFlowStatementViewBase(
-    AuthorizedEntityMixin,FiscalYearCashFlowStatementView
+    AuthorizedEntityMixin, FiscalYearCashFlowStatementView
 ):
     """
     Represents a base view for fiscal year cash flow statements.
@@ -8082,9 +8111,9 @@ class FiscalYearCashFlowStatementViewBase(
         return reverse("account_login")
 
 
-
 class QuarterlyCashFlowStatementView(
-    FiscalYearCashFlowStatementViewBase, QuarterlyReportMixIn,
+    FiscalYearCashFlowStatementViewBase,
+    QuarterlyReportMixIn,
 ):
     """
     Represents a view model for quarterly cash flow statements.
@@ -8112,7 +8141,8 @@ class QuarterlyCashFlowStatementView(
 
 
 class MonthlyCashFlowStatementView(
-    FiscalYearCashFlowStatementViewBase, MonthlyReportMixIn,
+    FiscalYearCashFlowStatementViewBase,
+    MonthlyReportMixIn,
 ):
     """
     Represents a view for monthly cash flow statements.
@@ -8131,7 +8161,8 @@ class MonthlyCashFlowStatementView(
 
 
 class DateCashFlowStatementView(
-    FiscalYearCashFlowStatementViewBase, DateReportMixIn,
+    FiscalYearCashFlowStatementViewBase,
+    DateReportMixIn,
 ):
     """
     Representation of a detailed view for a cash flow statement associated with a specific fiscal year,
@@ -8270,7 +8301,8 @@ class FiscalYearEntityModelDashboardView(
 
 
 class QuarterlyEntityDashboardView(
-    FiscalYearEntityModelDashboardView, QuarterlyReportMixIn,
+    FiscalYearEntityModelDashboardView,
+    QuarterlyReportMixIn,
 ):
     """
     Represents a dashboard view for quarterly entities.
@@ -8294,7 +8326,8 @@ class QuarterlyEntityDashboardView(
 
 
 class MonthlyEntityDashboardView(
-    FiscalYearEntityModelDashboardView, MonthlyReportMixIn,
+    FiscalYearEntityModelDashboardView,
+    MonthlyReportMixIn,
 ):
     """
     Represents a dashboard view for a specific entity's monthly report.
@@ -8323,7 +8356,8 @@ class MonthlyEntityDashboardView(
 
 
 class DateEntityDashboardView(
-    FiscalYearEntityModelDashboardView, DateReportMixIn,
+    FiscalYearEntityModelDashboardView,
+    DateReportMixIn,
 ):
     """
     Represents a dashboard view for date-based entity data visualization.
@@ -8625,7 +8659,7 @@ def DealerSettingsView(request, slug):
 
 
 @login_required
-def schedule_cancel(request,dealer_slug, pk):
+def schedule_cancel(request, dealer_slug, pk):
     """
     Cancel a schedule by updating its status to "Canceled". The function is protected
     by a login requirement, ensuring only authenticated users can execute it. It
@@ -8650,7 +8684,8 @@ def schedule_cancel(request,dealer_slug, pk):
 
 @login_required
 @permission_required("inventory.change_dealer", raise_exception=True)
-def assign_car_makes(request,dealer_slug):
+def assign_car_makes(request, dealer_slug):
+
     """
     Assigns car makes to a dealer.
 
@@ -8691,7 +8726,9 @@ def assign_car_makes(request,dealer_slug):
     return render(request, "dealers/assign_car_makes.html", {"form": form})
 
 
-class LedgerModelListView(LoginRequiredMixin,PermissionRequiredMixin, ListView, ArchiveIndexView):
+class LedgerModelListView(
+    LoginRequiredMixin, PermissionRequiredMixin, ListView, ArchiveIndexView
+):
     """
     Provides a view for listing ledger entries in the system.
 
@@ -8733,11 +8770,8 @@ class LedgerModelListView(LoginRequiredMixin,PermissionRequiredMixin, ListView,
     allow_empty = True
     paginate_by = 30
 
-
     def get_queryset(self):
         qs = super().get_queryset()
-        # dealer = get_object_or_404(models.Dealer, slug=self.kwargs["dealer_slug"])
-        # dealer = get_user_type(self.request)
         qs = qs.filter(entity=self.request.entity)
         qs = qs.select_related("billmodel", "invoicemodel")
         qs = qs.order_by("-created")
@@ -8755,8 +8789,7 @@ class LedgerModelListView(LoginRequiredMixin,PermissionRequiredMixin, ListView,
         return context
 
 
-# class LedgerModelDetailView(InvoiceModelDetailViewBase):
-class LedgerModelDetailView(LoginRequiredMixin, PermissionRequiredMixin,DetailView):
+class LedgerModelDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailView):
     """
     This class provides a detailed view of a specific ledger entry.
 
@@ -8809,10 +8842,13 @@ class LedgerModelCreateView(LedgerModelCreateViewBase):
         return super().form_valid(form)
 
     def get_success_url(self):
-        return reverse("ledger_list", kwargs={
-            "dealer_slug": self.kwargs["dealer_slug"],
-            "entity_slug": self.kwargs["entity_slug"]
-        })
+        return reverse(
+            "ledger_list",
+            kwargs={
+                "dealer_slug": self.kwargs["dealer_slug"],
+                "entity_slug": self.kwargs["entity_slug"],
+            },
+        )
 
 
 class LedgerModelModelActionView(LedgerModelModelActionViewBase):
@@ -8830,10 +8866,13 @@ class LedgerModelModelActionView(LedgerModelModelActionViewBase):
     """
 
     def get_redirect_url(self, *args, **kwargs):
-        return reverse("ledger_list", kwargs={
-            "dealer_slug": self.kwargs["dealer_slug"],
-            "entity_slug": self.kwargs["entity_slug"]
-        })
+        return reverse(
+            "ledger_list",
+            kwargs={
+                "dealer_slug": self.kwargs["dealer_slug"],
+                "entity_slug": self.kwargs["entity_slug"],
+            },
+        )
 
 
 class LedgerModelDeleteView(LedgerModelDeleteViewBase, SuccessMessageMixin):
@@ -8857,34 +8896,16 @@ class LedgerModelDeleteView(LedgerModelDeleteViewBase, SuccessMessageMixin):
     permission_required = ["django_ledger.delete_ledgermodel"]
 
     def get_success_url(self):
-        return reverse("ledger_list", kwargs={
-            "dealer_slug": self.kwargs["dealer_slug"],
-            "entity_slug": self.kwargs["entity_slug"]
-        })
+        return reverse(
+            "ledger_list",
+            kwargs={
+                "dealer_slug": self.kwargs["dealer_slug"],
+                "entity_slug": self.kwargs["entity_slug"],
+            },
+        )
 
 
-# class LedgerModelCreateView(LoginRequiredMixin,SuccessMessageMixin, CreateView):
-#     model = LedgerModel
-#     template_name = "ledger/ledger/ledger_form.html"
-#     form_class = forms.LedgerModelCreateForm
-#     success_message = "Ledger created"
-
-#     def get_form(self, form_class=None):
-#         dealer = get_user_type(self.request)
-#         form = forms.LedgerModelCreateForm(entity_slug=dealer.entity.slug,user_model=dealer.entity.admin,**self.get_form_kwargs())
-#         return form
-#     def get_success_url(self):
-#         return reverse('ledger_list')
-
-#     def form_valid(self, form):
-#         instance = form.save(commit=False)
-#         dealer = get_user_type(self.request)
-#         instance.entity = dealer.entity
-#         instance.save()
-#         return super().form_valid(form)
-
-
-class JournalEntryListView(LoginRequiredMixin,PermissionRequiredMixin, ListView):
+class JournalEntryListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
     """
     Represents a view to list all journal entries for a specific ledger.
 
@@ -8921,7 +8942,9 @@ class JournalEntryListView(LoginRequiredMixin,PermissionRequiredMixin, ListView)
         return context
 
 
-class JournalEntryCreateView(LoginRequiredMixin, PermissionRequiredMixin,SuccessMessageMixin, CreateView):
+class JournalEntryCreateView(
+    LoginRequiredMixin, PermissionRequiredMixin, SuccessMessageMixin, CreateView
+):
     """
     View for creating a new journal entry.
 
@@ -8965,7 +8988,10 @@ class JournalEntryCreateView(LoginRequiredMixin, PermissionRequiredMixin,Success
 
     def get_success_url(self):
         ledger = LedgerModel.objects.filter(pk=self.kwargs["pk"]).first()
-        return reverse("journalentry_list", kwargs={"dealer_slug":self.kwargs["dealer_slug"],"pk": ledger.pk})
+        return reverse(
+            "journalentry_list",
+            kwargs={"dealer_slug": self.kwargs["dealer_slug"], "pk": ledger.pk},
+        )
 
 
 @login_required
@@ -9004,7 +9030,7 @@ def JournalEntryDeleteView(request, pk):
 
 @login_required
 @permission_required("django_ledger.view_transactionmodel", raise_exception=True)
-def JournalEntryTransactionsView(request, dealer_slug,pk):
+def JournalEntryTransactionsView(request, dealer_slug, pk):
     """
     Handles the retrieval and display of journal entry transactions for a specific journal
     entry instance. It retrieves the journal entry and its associated transactions, ordering
@@ -9018,7 +9044,7 @@ def JournalEntryTransactionsView(request, dealer_slug,pk):
         its transactions.
     :rtype: django.http.HttpResponse
     """
-    get_object_or_404(models.Dealer,slug=dealer_slug)
+    get_object_or_404(models.Dealer, slug=dealer_slug)
     journal = JournalEntryModel.objects.filter(pk=pk).first()
     qs = TransactionModel.objects.filter(journal_entry=journal).all()
     transactions = qs.annotate(
@@ -9053,7 +9079,7 @@ class JournalEntryModelTXSDetailView(JournalEntryModelTXSDetailViewBase):
 
 @login_required
 @permission_required("django_ledger.change_ledgermodel", raise_exception=True)
-def ledger_lock_all_journals(request,dealer_slug, entity_slug, pk):
+def ledger_lock_all_journals(request, dealer_slug, entity_slug, pk):
     """
     Locks all journals associated with a specific ledger. If the ledger is already locked,
     it will notify the user through an error message. Otherwise, it initiates the locking of
@@ -9070,15 +9096,15 @@ def ledger_lock_all_journals(request,dealer_slug, entity_slug, pk):
     :return: HttpResponse redirecting to the journal entry list page of the locked ledger.
     :rtype: HttpResponse
     """
-    get_object_or_404(models.Dealer,slug=dealer_slug)
+    get_object_or_404(models.Dealer, slug=dealer_slug)
     ledger = LedgerModel.objects.filter(pk=pk).first()
     if ledger.is_locked():
         messages.error(request, _("Ledger is already locked"))
-        return redirect("journalentry_list",dealer_slug=dealer_slug, pk=ledger.pk)
+        return redirect("journalentry_list", dealer_slug=dealer_slug, pk=ledger.pk)
     ledger.lock_journal_entries()
     ledger.lock()
     ledger.save()
-    return redirect("journalentry_list", dealer_slug=dealer_slug,pk=ledger.pk)
+    return redirect("journalentry_list", dealer_slug=dealer_slug, pk=ledger.pk)
 
 
 @login_required
@@ -9100,11 +9126,11 @@ def ledger_unlock_all_journals(request, dealer_slug, entity_slug, pk):
     :return: A redirection to the journal entry list page for the specified ledger.
     :rtype: HttpResponseRedirect
     """
-    get_object_or_404(models.Dealer,slug=dealer_slug)
+    get_object_or_404(models.Dealer, slug=dealer_slug)
     ledger = LedgerModel.objects.filter(pk=pk).first()
     if not ledger.is_locked():
         messages.error(request, _("Ledger is already Unlocked"))
-        return redirect("journalentry_list",dealer_slug=dealer_slug, pk=ledger.pk)
+        return redirect("journalentry_list", dealer_slug=dealer_slug, pk=ledger.pk)
 
     ledger.unlock()
     ledger.save()
@@ -9132,20 +9158,20 @@ def ledger_post_all_journals(request, dealer_slug, entity_slug, pk):
     :return: A redirect to the journal entry list view for the specified ledger.
     :rtype: HttpResponseRedirect
     """
-    get_object_or_404(models.Dealer,slug=dealer_slug)
+    get_object_or_404(models.Dealer, slug=dealer_slug)
     ledger = LedgerModel.objects.filter(pk=pk).first()
     if ledger.is_posted():
         messages.error(request, _("Ledger is already posted"))
-        return redirect("journalentry_list",dealer_slug=dealer_slug, pk=ledger.pk)
+        return redirect("journalentry_list", dealer_slug=dealer_slug, pk=ledger.pk)
     ledger.post_journal_entries()
     ledger.post()
     ledger.save()
-    return redirect("journalentry_list",dealer_slug=dealer_slug, pk=ledger.pk)
+    return redirect("journalentry_list", dealer_slug=dealer_slug, pk=ledger.pk)
 
 
 @login_required
 @permission_required("django_ledger.change_ledgermodel", raise_exception=True)
-def ledger_unpost_all_journals(request,dealer_slug, entity_slug, pk):
+def ledger_unpost_all_journals(request, dealer_slug, entity_slug, pk):
     """
     Unposts all journal entries for a specified ledger and marks the ledger as unposted.
 
@@ -9165,11 +9191,11 @@ def ledger_unpost_all_journals(request,dealer_slug, entity_slug, pk):
              page for the specified ledger.
     :rtype: HttpResponseRedirect
     """
-    get_object_or_404(models.Dealer,slug=dealer_slug)
+    get_object_or_404(models.Dealer, slug=dealer_slug)
     ledger = LedgerModel.objects.filter(pk=pk).first()
     if not ledger.is_posted():
         messages.error(request, _("Ledger is already Unposted"))
-        return redirect("journalentry_list",dealer_slug=dealer_slug, pk=ledger.pk)
+        return redirect("journalentry_list", dealer_slug=dealer_slug, pk=ledger.pk)
     qs = ledger.journal_entries.posted()
     for je in qs:
         je.mark_as_unposted()
@@ -9177,13 +9203,13 @@ def ledger_unpost_all_journals(request,dealer_slug, entity_slug, pk):
 
     ledger.unpost()
     ledger.save()
-    return redirect("journalentry_list",dealer_slug=dealer_slug, pk=ledger.pk)
+    return redirect("journalentry_list", dealer_slug=dealer_slug, pk=ledger.pk)
 
 
 @login_required
 @permission_required("inventory.change_dealer", raise_exception=True)
-def pricing_page(request,dealer_slug):
-    get_object_or_404(models.Dealer,slug=dealer_slug)
+def pricing_page(request, dealer_slug):
+    get_object_or_404(models.Dealer, slug=dealer_slug)
     plan_list = PlanPricing.objects.all()
     form = forms.PaymentPlanForm()
     return render(request, "pricing_page.html", {"plan_list": plan_list, "form": form})
@@ -9192,8 +9218,8 @@ def pricing_page(request,dealer_slug):
 @login_required
 @permission_required("inventory.change_dealer", raise_exception=True)
 @require_POST
-def submit_plan(request,dealer_slug):
-    dealer = get_object_or_404(models.Dealer,slug=dealer_slug)
+def submit_plan(request, dealer_slug):
+    dealer = get_object_or_404(models.Dealer, slug=dealer_slug)
     selected_plan_id = request.POST.get("selected_plan")
     pp = PlanPricing.objects.get(pk=selected_plan_id)
     order = None
@@ -9218,15 +9244,13 @@ def submit_plan(request,dealer_slug):
 
 @login_required
 @permission_required("inventory.change_dealer", raise_exception=True)
-def payment_callback(request,dealer_slug):
+def payment_callback(request, dealer_slug):
     message = request.GET.get("message")
-    dealer = get_object_or_404(models.Dealer,slug=dealer_slug)
+    dealer = get_object_or_404(models.Dealer, slug=dealer_slug)
     payment_id = request.GET.get("id")
     history = models.PaymentHistory.objects.filter(transaction_id=payment_id).first()
     payment_status = request.GET.get("status")
-    order = Order.objects.filter(
-        user=dealer.user, status=1
-    ).first()
+    order = Order.objects.filter(user=dealer.user, status=1).first()
 
     if payment_status == "paid":
         billing_info, created = BillingInfo.objects.get_or_create(
@@ -9260,6 +9284,7 @@ def payment_callback(request,dealer_slug):
 
     return render(request, "payment_failed.html", {"message": message})
 
+
 @login_required
 def sse_stream(request):
     def event_stream():
@@ -9326,29 +9351,13 @@ def notifications_history(request):
     return JsonResponse({"status": "success"})
 
 
-# def activity_create(request,pk):
-#     lead = get_object_or_404(models.Lead, pk=pk)
-#     form = forms.ActivityHistoryForm()
-#     dealer = get_user_type(request)
-#     if request.method == "POST":
-#         form = forms.ActivityHistoryForm(request.POST)
-#         if form.is_valid():
-#             models.Activity.objects.create(
-#               dealer=dealer,
-#               activity_type=form.cleaned_data['activity_type'],
-#               notes=form.cleaned_data['description'],
-#               created_by=request.user,
-#               content_object=lead
-#             )
-#     return render(request, 'activity_history.html')
-
-
 @login_required
 @permission_required("inventory.add_activity", raise_exception=True)
-def add_activity(request,dealer_slug, content_type, slug):
-     # Get user information for logging
-    user_username = request.user.username if request.user.is_authenticated else 'anonymous'
-
+def add_activity(request, dealer_slug, content_type, slug):
+    # Get user information for logging
+    user_username = (
+        request.user.username if request.user.is_authenticated else "anonymous"
+    )
 
     # Log the attempt to retrieve the model dynamically
     logger.debug(
@@ -9358,7 +9367,7 @@ def add_activity(request,dealer_slug, content_type, slug):
     try:
         model = apps.get_model(f"inventory.{content_type}")
     except LookupError:
-          # --- Log for LookupError (Model not found) ---
+        # --- Log for LookupError (Model not found) ---
         logger.warning(
             f"User {user_username} requested an invalid model content_type: '{content_type}'. "
             f"Raising Http404."
@@ -9378,7 +9387,7 @@ def add_activity(request,dealer_slug, content_type, slug):
             activity.activity_type = form.cleaned_data["activity_type"]
 
             activity.save()
-             # --- Log for successful activity creation ---
+            # --- Log for successful activity creation ---
             logger.info(
                 f"User {user_username} successfully added activity (Type: {activity.activity_type}) "
                 f"for {content_type} ID: {obj.slug} ('{obj.name if hasattr(obj, 'name') else obj}') "
@@ -9386,21 +9395,23 @@ def add_activity(request,dealer_slug, content_type, slug):
             )
             messages.success(request, _("Activity added successfully"))
         else:
-             # --- Log for invalid form data ---
+            # --- Log for invalid form data ---
             logger.warning(
                 f"User {user_username} submitted invalid activity form data "
                 f"for {content_type} ID: {obj.slug} (Dealer: {dealer_slug}). Errors: {form.errors.as_json()}"
             )
             messages.error(request, _("Activity form is not valid"))
-        return redirect(f"{content_type}_detail",dealer_slug=dealer_slug, slug=slug)
+        return redirect(f"{content_type}_detail", dealer_slug=dealer_slug, slug=slug)
 
 
 @login_required
 @permission_required("inventory.add_tasks", raise_exception=True)
-def add_task(request,dealer_slug, content_type, slug):
-     # Get user information for logging
-    user_username = request.user.username if request.user.is_authenticated else 'anonymous'
-     # Log the attempt to retrieve the model dynamically
+def add_task(request, dealer_slug, content_type, slug):
+    # Get user information for logging
+    user_username = (
+        request.user.username if request.user.is_authenticated else "anonymous"
+    )
+    # Log the attempt to retrieve the model dynamically
     logger.debug(
         f"User {user_username} attempting to retrieve model "
         f"for content_type '{content_type}' for dealer '{dealer_slug}'."
@@ -9408,7 +9419,7 @@ def add_task(request,dealer_slug, content_type, slug):
     try:
         model = apps.get_model(f"inventory.{content_type}")
     except LookupError:
-         # --- Single-line log for LookupError (Model not found) ---
+        # --- Single-line log for LookupError (Model not found) ---
         logger.warning(
             f"User {user_username} requested an invalid model content_type: '{content_type}'. "
             f"Raising Http404 for dealer '{dealer_slug}'."
@@ -9432,8 +9443,9 @@ def add_task(request,dealer_slug, content_type, slug):
                 content_object=obj,
                 activity_type="task",
                 created_by=request.user,
-                notes="Task Added")
-             # --- Log for successful task creation ---
+                notes="Task Added",
+            )
+            # --- Log for successful task creation ---
             logger.info(
                 f"User {user_username} successfully added task "
                 f"(Assigned to: {task.assigned_to.email}) for {content_type} ID: {obj.slug} "
@@ -9441,18 +9453,18 @@ def add_task(request,dealer_slug, content_type, slug):
             )
             messages.success(request, _("Task added successfully"))
         else:
-             # --- Log for invalid form data ---
+            # --- Log for invalid form data ---
             logger.warning(
                 f"User {user_username} submitted invalid task form data "
                 f"for {content_type} ID: {obj.slug} (Dealer: {dealer_slug}). Errors: {form.errors.as_json()}"
             )
             messages.error(request, _("Task form is not valid"))
-        return redirect(f"{content_type}_detail",dealer_slug=dealer_slug, slug=slug)
+        return redirect(f"{content_type}_detail", dealer_slug=dealer_slug, slug=slug)
 
 
 @login_required
 @permission_required("inventory.change_tasks", raise_exception=True)
-def update_task(request,dealer_slug, pk):
+def update_task(request, dealer_slug, pk):
     task = get_object_or_404(models.Tasks, pk=pk)
 
     if request.method == "POST":
@@ -9462,9 +9474,11 @@ def update_task(request,dealer_slug, pk):
     # tasks = models.Tasks.objects.filter(content_type__model=content_type, object_id=obj.id)
 
     return render(request, "partials/task.html", {"task": task})
+
+
 @login_required
 @permission_required("inventory.change_schedule", raise_exception=True)
-def update_schedule(request,dealer_slug, pk):
+def update_schedule(request, dealer_slug, pk):
     task = get_object_or_404(models.Schedule, pk=pk)
 
     if request.method == "POST":
@@ -9476,10 +9490,12 @@ def update_schedule(request,dealer_slug, pk):
 
 @login_required
 @permission_required("inventory.add_notes", raise_exception=True)
-def add_note(request,dealer_slug, content_type, slug):
-     # Get user information for logging
-    user_username = request.user.username if request.user.is_authenticated else 'anonymous'
-     # Log the attempt to retrieve the model dynamically
+def add_note(request, dealer_slug, content_type, slug):
+    # Get user information for logging
+    user_username = (
+        request.user.username if request.user.is_authenticated else "anonymous"
+    )
+    # Log the attempt to retrieve the model dynamically
     logger.debug(
         f"User {user_username} attempting to retrieve model "
         f"for content_type '{content_type}' for dealer '{dealer_slug}'."
@@ -9487,14 +9503,14 @@ def add_note(request,dealer_slug, content_type, slug):
     try:
         model = apps.get_model(f"inventory.{content_type}")
     except LookupError:
-          # --- Single-line log for LookupError (Model not found) ---
+        # --- Single-line log for LookupError (Model not found) ---
         logger.warning(
             f"User {user_username}  requested an invalid model content_type: '{content_type}'. "
             f"Raising Http404 for dealer '{dealer_slug}'."
         )
         raise Http404("Model not found")
 
-    dealer = get_object_or_404(models.Dealer,slug=dealer_slug)
+    dealer = get_object_or_404(models.Dealer, slug=dealer_slug)
     obj = get_object_or_404(model, slug=slug)
     if request.method == "POST":
         form = forms.NoteForm(request.POST)
@@ -9510,8 +9526,9 @@ def add_note(request,dealer_slug, content_type, slug):
                 content_object=obj,
                 activity_type="note",
                 created_by=request.user,
-                notes="Note Added")
-             # --- Single-line log for successful note creation ---
+                notes="Note Added",
+            )
+            # --- Single-line log for successful note creation ---
             logger.info(
                 f"User {user_username}  successfully added a note "
                 f"for {content_type} ID: {obj.slug} (Dealer: {dealer_slug}). "
@@ -9519,31 +9536,27 @@ def add_note(request,dealer_slug, content_type, slug):
             )
             messages.success(request, _("Note added successfully"))
         else:
-             # --- Single-line log for invalid form data ---
+            # --- Single-line log for invalid form data ---
             logger.warning(
                 f"User {user_username}  submitted invalid note form data "
                 f"for {content_type} ID: {obj.slug} (Dealer: {dealer_slug}). Errors: {form.errors.as_text()}"
             )
             messages.error(request, _("Note form is not valid"))
-        return redirect(f"{content_type}_detail",dealer_slug=dealer_slug, slug=slug)
+        return redirect(f"{content_type}_detail", dealer_slug=dealer_slug, slug=slug)
 
 
 @login_required
 @require_http_methods(["POST"])
 @permission_required("inventory.change_notes", raise_exception=True)
-def update_note(request,dealer_slug, pk):
+def update_note(request, dealer_slug, pk):
     note = get_object_or_404(models.Notes, pk=pk)
     lead = get_object_or_404(models.Lead, pk=note.content_object.id)
-    dealer = get_object_or_404(models.Dealer,slug=dealer_slug)
+    dealer = get_object_or_404(models.Dealer, slug=dealer_slug)
     if request.method == "POST":
         note.note = request.POST.get("note")
         note.save()
         messages.success(request, _("Note updated successfully"))
-    # else:
-    #     messages.error(request, _("Note form is not valid"))
-    # notes = models.Notes.objects.filter(
-    #     content_type__model="lead", object_id=lead.pk, dealer=dealer
-    # )
+
     return redirect(request.META.get("HTTP_REFERER", "/"))
 
 
@@ -9552,15 +9565,15 @@ def update_note(request,dealer_slug, pk):
 
 @login_required
 @permission_required("inventory.change_dealer", raise_exception=True)
-def management_view(request,dealer_slug):
-    get_object_or_404(models.Dealer,slug=dealer_slug)
+def management_view(request, dealer_slug):
+    get_object_or_404(models.Dealer, slug=dealer_slug)
     return render(request, "admin_management/management.html")
 
 
 @login_required
 @permission_required("inventory.change_dealer", raise_exception=True)
-def user_management(request,dealer_slug):
-    get_object_or_404(models.Dealer,slug=dealer_slug)
+def user_management(request, dealer_slug):
+    get_object_or_404(models.Dealer, slug=dealer_slug)
     context = {
         "customers": models.Customer.objects.filter(active=False),
         "organizations": models.Organization.objects.filter(active=False),
@@ -9572,13 +9585,13 @@ def user_management(request,dealer_slug):
 
 @login_required
 @permission_required("inventory.change_dealer", raise_exception=True)
-def AuditLogDashboardView(request,dealer_slug):
+def AuditLogDashboardView(request, dealer_slug):
     """
     Displays audit logs (User Actions, Login Events, Request Events) with pagination.
     Log type is determined by the 'q' query parameter (e.g., ?q=userActions).
     Pagination page number is passed as a query parameter (e.g., ?page=2).
     """
-    get_object_or_404(models.Dealer,slug=dealer_slug)
+    get_object_or_404(models.Dealer, slug=dealer_slug)
     q = request.GET.get("q")  # Get the log type from the 'q' query parameter
     current_pagination_page = request.GET.get("page", 1)
     context = {}
@@ -9708,12 +9721,14 @@ def AuditLogDashboardView(request,dealer_slug):
 
 @login_required
 @permission_required("inventory.change_dealer", raise_exception=True)
-def activate_account(request,dealer_slug, content_type, slug):
-    get_object_or_404(models.Dealer,slug=dealer_slug)
+def activate_account(request, dealer_slug, content_type, slug):
+    get_object_or_404(models.Dealer, slug=dealer_slug)
 
-     # Get user information for logging
-    user_username = request.user.username if request.user.is_authenticated else 'anonymous'
-      # Log the attempt to retrieve the model dynamically
+    # Get user information for logging
+    user_username = (
+        request.user.username if request.user.is_authenticated else "anonymous"
+    )
+    # Log the attempt to retrieve the model dynamically
     logger.debug(
         f"User {user_username}attempting to retrieve model "
         f"for content_type '{content_type}' for dealer '{dealer_slug}' in activate_account view."
@@ -9721,7 +9736,7 @@ def activate_account(request,dealer_slug, content_type, slug):
     try:
         model = apps.get_model(f"inventory.{content_type}")
     except LookupError:
-         # --- Single-line log for LookupError (Model not found) ---
+        # --- Single-line log for LookupError (Model not found) ---
         logger.warning(
             f"User {user_username}  requested an invalid model content_type: '{content_type}'. "
             f"Raising Http404 in activate_account view for dealer '{dealer_slug}'."
@@ -9731,7 +9746,7 @@ def activate_account(request,dealer_slug, content_type, slug):
     obj = get_object_or_404(model, slug=slug)
     if request.method == "POST":
         obj.activate_account()
-         # --- Single-line log for successful account activation ---
+        # --- Single-line log for successful account activation ---
         logger.info(
             f"User {user_username} successfully activated account "
             f"for {content_type} ID: {obj.slug} ('{obj.name if hasattr(obj, 'name') else obj}') "
@@ -9743,12 +9758,15 @@ def activate_account(request,dealer_slug, content_type, slug):
         request, "admin_management/confirm_activate_account.html", {"obj": obj}
     )
 
+
 @login_required
 @permission_required("inventory.change_dealer", raise_exception=True)
-def permenant_delete_account(request,dealer_slug, content_type, slug):
-    get_object_or_404(models.Dealer,slug=dealer_slug)
-     # Get user information for logging
-    user_username = request.user.username if request.user.is_authenticated else 'anonymous'
+def permenant_delete_account(request, dealer_slug, content_type, slug):
+    get_object_or_404(models.Dealer, slug=dealer_slug)
+    # Get user information for logging
+    user_username = (
+        request.user.username if request.user.is_authenticated else "anonymous"
+    )
     logger.debug(
         f"User {user_username}  attempting to retrieve model "
         f"for content_type '{content_type}' for permanent account deletion."
@@ -9756,7 +9774,7 @@ def permenant_delete_account(request,dealer_slug, content_type, slug):
     try:
         model = apps.get_model(f"inventory.{content_type}")
     except LookupError:
-          # Log if model not found
+        # Log if model not found
         logger.warning(
             f"User {user_username}  requested an invalid model content_type: '{content_type}'. "
             f"Raising Http404 for permanent account deletion (Dealer: {dealer_slug})."
@@ -9767,7 +9785,7 @@ def permenant_delete_account(request,dealer_slug, content_type, slug):
     if request.method == "POST":
         logger.debug(
             f"User {user_username} attempting to permanently delete account "
-            f"for {content_type} ID: {obj.slug} ('{obj.name if hasattr(obj, 'name') else obj}') " # Attempt to get name
+            f"for {content_type} ID: {obj.slug} ('{obj.name if hasattr(obj, 'name') else obj}') "  # Attempt to get name
             f"on dealer '{dealer_slug}'."
         )
         try:
@@ -9780,7 +9798,7 @@ def permenant_delete_account(request,dealer_slug, content_type, slug):
             )
             messages.success(request, _("Account Deleted successfully"))
         except RestrictedError:
-              # Log restricted deletion
+            # Log restricted deletion
             logger.warning(
                 f"User {user_username} attempted to permanently delete account "
                 f"for {content_type} ID: {obj.slug} ('{obj.name if hasattr(obj, 'name') else obj}') "
@@ -9796,7 +9814,7 @@ def permenant_delete_account(request,dealer_slug, content_type, slug):
                 f"User {user_username}  encountered an unexpected error "
                 f"while permanently deleting account for {content_type} ID: {obj.slug} "
                 f"('{obj.name if hasattr(obj, 'name') else obj}') on dealer '{dealer_slug}'. Error: {e}",
-                exc_info=True
+                exc_info=True,
             )
             messages.error(request, _(f"Error deleting account: {e}"))
         return redirect("user_management", dealer_slug=dealer_slug)
@@ -9807,14 +9825,17 @@ def permenant_delete_account(request,dealer_slug, content_type, slug):
 
 #####################################################################
 
+
 @login_required
 @permission_required("django_ledger.add_purchaseordermodel", raise_exception=True)
-def PurchaseOrderCreateView(request, dealer_slug,entity_slug):
+def PurchaseOrderCreateView(request, dealer_slug, entity_slug):
     dealer = get_object_or_404(models.Dealer, slug=dealer_slug)
     entity = dealer.entity
 
-     # Get user information for logging
-    user_username = request.user.username if request.user.is_authenticated else 'anonymous'
+    # Get user information for logging
+    user_username = (
+        request.user.username if request.user.is_authenticated else "anonymous"
+    )
 
     if request.method == "POST":
         # Log the attempt to create a purchase order
@@ -9839,9 +9860,18 @@ def PurchaseOrderCreateView(request, dealer_slug,entity_slug):
                 f"Error: {e}"
             )
             messages.error(request, str(e))
-            return redirect("purchase_order_create", dealer_slug=dealer.slug, entity_slug=entity.slug)
+            return redirect(
+                "purchase_order_create",
+                dealer_slug=dealer.slug,
+                entity_slug=entity.slug,
+            )
         messages.success(request, _("Purchase order created successfully"))
-        return redirect("purchase_order_detail", dealer_slug=dealer.slug, entity_slug=entity.slug, pk=po.pk)
+        return redirect(
+            "purchase_order_detail",
+            dealer_slug=dealer.slug,
+            entity_slug=entity.slug,
+            pk=po.pk,
+        )
 
     form = PurchaseOrderModelCreateForm(
         entity_slug=entity.slug,
@@ -9896,10 +9926,7 @@ def InventoryItemCreateView(request, dealer_slug):
             ):
                 messages.error(request, _("Inventory item already exists"))
                 return response
-                # return redirect(
-                #     f"{reverse('inventory_item_create')}?for_po={for_po}",
-                #     dealer_slug=dealer.slug,
-                # )
+
         uom = entity.get_uom_all().get(name="Unit")
         entity.create_item_inventory(
             name=inventory_name,
@@ -9910,10 +9937,12 @@ def InventoryItemCreateView(request, dealer_slug):
         )
         messages.success(request, _("Inventory item created successfully"))
         return response
-        # return redirect("purchase_order_list", dealer_slug=dealer.slug)
+
     if for_po:
         form = forms.CSVUploadForm()
-        form.fields["year"].widget.attrs["hx-get"] = reverse("inventory_items_filter", kwargs={"dealer_slug": dealer.slug})
+        form.fields["year"].widget.attrs["hx-get"] = reverse(
+            "inventory_items_filter", kwargs={"dealer_slug": dealer.slug}
+        )
         form.fields["vendor"].queryset = dealer.vendors.filter(active=True)
         context = {
             "make_data": models.CarMake.objects.filter(is_sa_import=True),
@@ -9932,6 +9961,7 @@ def InventoryItemCreateView(request, dealer_slug):
         },
     )
 
+
 @login_required
 @permission_required("django_ledger.view_purchaseordermodel", raise_exception=True)
 def inventory_items_filter(request, dealer_slug):
@@ -9964,49 +9994,45 @@ def inventory_items_filter(request, dealer_slug):
     return render(request, "purchase_orders/car_inventory_item_form.html", context)
 
 
-class PurchaseOrderDetailView(LoginRequiredMixin,PermissionRequiredMixin, DetailView):
-    slug_url_kwarg = 'po_pk'
-    slug_field = 'uuid'
-    context_object_name = 'po_model'
-    extra_context = {
-        'header_subtitle_icon': 'uil:bill',
-        'hide_menu': True
-    }
+class PurchaseOrderDetailView(LoginRequiredMixin, PermissionRequiredMixin, DetailView):
+    slug_url_kwarg = "po_pk"
+    slug_field = "uuid"
+    context_object_name = "po_model"
+    extra_context = {"header_subtitle_icon": "uil:bill", "hide_menu": True}
     template_name = "purchase_orders/po_detail.html"
     permission_required = ["django_ledger.view_purchaseordermodel"]
 
     def get_queryset(self):
         dealer = get_object_or_404(models.Dealer, slug=self.kwargs["dealer_slug"])
-        self.queryset = dealer.entity.get_purchase_orders().select_related("entity", "ce_model")
+        self.queryset = dealer.entity.get_purchase_orders().select_related(
+            "entity", "ce_model"
+        )
         return super().get_queryset()
 
-
     def get_context_data(self, *, object_list=None, **kwargs):
         dealer = get_object_or_404(models.Dealer, slug=self.kwargs["dealer_slug"])
         context = super().get_context_data(**kwargs)
-        # context = super().get_context_data(object_list=object_list, **kwargs)
+
         context["entity_slug"] = dealer.entity.slug
         po_model: PurchaseOrderModel = self.object
-        title = f'Purchase Order {po_model.po_number}'
-        context['page_title'] = title
-        context['header_title'] = title
+        title = f"Purchase Order {po_model.po_number}"
+        context["page_title"] = title
+        context["header_title"] = title
 
         po_model: PurchaseOrderModel = self.object
         po_items_qs, item_data = po_model.get_itemtxs_data(
-            queryset=po_model.itemtransactionmodel_set.all().select_related('item_model', 'bill_model')
+            queryset=po_model.itemtransactionmodel_set.all().select_related(
+                "item_model", "bill_model"
+            )
+        )
+        context["po_items"] = po_items_qs
+        context["po_total_amount"] = sum(
+            i["po_total_amount"]
+            for i in po_items_qs.values("po_total_amount", "po_item_status")
+            if i["po_item_status"] != "cancelled"
         )
-        context['po_items'] = po_items_qs
-        context['po_total_amount'] = sum(
-            i['po_total_amount'] for i in po_items_qs.values(
-                'po_total_amount', 'po_item_status') if i['po_item_status'] != 'cancelled')
         return context
 
-    # def get_context_data(self, **kwargs):
-    #     dealer = get_object_or_404(models.Dealer, slug=self.kwargs["dealer_slug"])
-    #     context = super().get_context_data(**kwargs)
-    #     context["entity_slug"] = dealer.entity.slug
-    #     return context
-
 
 class PurchaseOrderListView(LoginRequiredMixin, PermissionRequiredMixin, ListView):
     model = PurchaseOrderModel
@@ -10015,102 +10041,32 @@ class PurchaseOrderListView(LoginRequiredMixin, PermissionRequiredMixin, ListVie
     template_name = "purchase_orders/po_list.html"
     permission_required = ["django_ledger.view_purchaseordermodel"]
 
-    # def get_queryset(self):
-    #     dealer = get_object_or_404(models.Dealer, slug=self.kwargs["dealer_slug"])
-    #     return self.model.objects.filter(entity=dealer.entity)
     def get_queryset(self):
         dealer = get_object_or_404(models.Dealer, slug=self.kwargs["dealer_slug"])
-        query=self.request.GET.get("q")
-        qs=self.model.objects.filter(entity=dealer.entity)
+        query = self.request.GET.get("q")
+        qs = self.model.objects.filter(entity=dealer.entity)
         if query:
-            qs=apply_search_filters(qs,query)
+            qs = apply_search_filters(qs, query)
         return qs
 
-
-
-    # def get_queryset(self):
-    #     dealer = get_user_type(self.request)
-    #     entity = dealer.entity
-    #     queryset = self.model.objects.filter(entity=entity)
-
-    #     query = self.request.GET.get('q') # This is generic: looks for 'q' from GET
-
-    #     if query:
-    #         # Start with an empty Q object for the search filters
-    #         search_filters = Q()
-
-    #         # 1. Try to parse the query as a date
-    #         parsed_date = None
-    #         date_formats = [
-    #             '%Y-%m-%d',         # 2023-10-26
-    #             '%m/%d/%Y',         # 10/26/2023
-    #             '%d-%m-%Y',         # 26-10-2023
-    #             '%B %d, %Y',        # October 26, 2023
-    #             '%b %d, %Y',        # Oct 26, 2023
-    #             '%Y/%m/%d',         # 2023/10/26
-    #             '%Y-%m',            # 2023-10 (for year-month search)
-    #             '%Y',
-    #             '%b %d',
-    #             '%B %d'              # 2023 (for year search)
-    #         ]
-
-    #         for fmt in date_formats:
-    #             try:
-    #                 # For '%Y-%m' and '%Y', we only care about year/month, not exact day
-    #                 if fmt == '%Y-%m':
-    #                     parsed_date = datetime.strptime(query, fmt)
-    #                     search_filters |= Q(created__year=parsed_date.year, created__month=parsed_date.month)
-    #                     break
-    #                 elif fmt == '%Y':
-    #                     parsed_date = datetime.strptime(query, fmt)
-    #                     search_filters |= Q(created__year=parsed_date.year)
-    #                     break
-    #                 else:
-    #                     parsed_date = datetime.strptime(query, fmt).date()
-    #                     search_filters |= Q(created__date=parsed_date) # Matches exact date part of datetime field
-    #                     break # Found a match, no need to try other formats
-    #             except ValueError:
-    #                 continue # Try next format
-
-    #         # 2. Add text-based search filters (always apply these)
-    #         # Combine them with OR operator
-    #         text_filters = (
-    #             Q(po_number__icontains=query) |
-    #             Q(po_title__icontains=query) |
-    #             Q(po_status__icontains=query) |
-    #             Q(created__icontains=query)
-
-    #         )
-
-    #         # If a date was successfully parsed, combine with text filters
-    #         if parsed_date:
-    #             # Use a combined Q object. This means it will search for
-    #             # (date_match OR po_number_match OR po_title_match)
-    #             queryset = queryset.filter(search_filters | text_filters).distinct()
-    #         else:
-    #             # If no date was parsed, only apply text filters
-    #             queryset = queryset.filter(text_filters).distinct()
-
-    #     return queryset
-
-
-
-
     def get_context_data(self, **kwargs):
         dealer = get_user_type(self.request)
         context = super().get_context_data(**kwargs)
         context["entity_slug"] = dealer.entity.slug
         return context
 
+
 class PurchaseOrderUpdateView(PurchaseOrderModelUpdateViewBase):
     pass
 
+
 class BasePurchaseOrderActionActionView(BasePurchaseOrderActionActionViewBase):
     permission_required = "django_ledger.change_purchaseordermodel"
 
+
 class PurchaseOrderModelDeleteView(PurchaseOrderModelDeleteViewBase):
     template_name = "purchase_orders/po_delete.html"
-    permission_required     = "django_ledger.delete_purchaseordermodel"
+    permission_required = "django_ledger.delete_purchaseordermodel"
 
     def get_success_url(self):
         messages.add_message(
@@ -10138,6 +10094,7 @@ class PurchaseOrderMarkAsApprovedView(BasePurchaseOrderActionActionView):
 class PurchaseOrderMarkAsFulfilledView(BasePurchaseOrderActionActionView):
     action_name = "mark_as_fulfilled"
 
+
 class PurchaseOrderMarkAsCanceledView(BasePurchaseOrderActionActionView):
     action_name = "mark_as_canceled"
 
@@ -10150,6 +10107,7 @@ class PurchaseOrderMarkAsVoidView(BasePurchaseOrderActionActionView):
 class BaseBillActionView(BaseBillActionViewBase):
     pass
 
+
 class BillModelActionMarkAsDraftView(BaseBillActionView):
     action_name = "mark_as_draft"
 
@@ -10200,7 +10158,10 @@ def view_items_inventory(request, dealer_slug, entity_slug, po_pk):
     po = PurchaseOrderModel.objects.get(pk=po_pk)
     items = po.items.all()
 
-    return render(request,"purchase_orders/po_upload_cars.html",{"po": po, "items": items})
+    return render(
+        request, "purchase_orders/po_upload_cars.html", {"po": po, "items": items}
+    )
+
 
 @login_required
 @permission_required("inventory.add_poitemsuploaded", raise_exception=True)
@@ -10210,8 +10171,10 @@ def upload_cars(request, dealer_slug, pk=None):
     dealer = get_object_or_404(models.Dealer, slug=dealer_slug)
     response = redirect("upload_cars", dealer_slug=dealer_slug)
 
-     # Get user information for logging
-    user_username = request.user.username if request.user.is_authenticated else 'anonymous'
+    # Get user information for logging
+    user_username = (
+        request.user.username if request.user.is_authenticated else "anonymous"
+    )
 
     if pk:
         # Log retrieval of PO item for upload
@@ -10254,7 +10217,9 @@ def upload_cars(request, dealer_slug, pk=None):
                 receiving_date = timezone.now()
                 vendor_model = item.bill_model.vendor
                 vendor = models.Vendor.objects.get(vendor_model=vendor_model)
-                logger.debug(f"User {user_username} extracted car details from existing Item PK: {pk}.")
+                logger.debug(
+                    f"User {user_username} extracted car details from existing Item PK: {pk}."
+                )
             else:
                 make = models.CarMake.objects.get(pk=request.POST.get("make"))
                 model = models.CarModel.objects.get(pk=request.POST.get("model"))
@@ -10271,14 +10236,16 @@ def upload_cars(request, dealer_slug, pk=None):
                     request.POST.get("receiving_date"), "%Y-%m-%d"
                 )
                 vendor = models.Vendor.objects.get(pk=request.POST.get("vendor"))
-                logger.debug(f"User {user_username} extracted car details from form submission.")
+                logger.debug(
+                    f"User {user_username} extracted car details from form submission."
+                )
 
         except Exception as e:
             # --- Log for errors during data extraction/retrieval ---
             logger.error(
                 f"User {user_username}  encountered an error while preparing car data "
                 f"for upload (Item PK: {pk if pk else 'N/A'}, Dealer: {dealer_slug}). Error: {e}",
-                exc_info=True
+                exc_info=True,
             )
             messages.error(request, f"Error processing CSV: {str(e)}")
             return response
@@ -10297,8 +10264,10 @@ def upload_cars(request, dealer_slug, pk=None):
             reader = csv.DictReader(csv_data)
             data = [x for x in reader]
             for row in data:
-                 # Log VIN decoding and initial validation for each row
-                logger.debug(f"Processing VIN: {row.get('vin', 'N/A')} from CSV row by user {user_username}.")
+                # Log VIN decoding and initial validation for each row
+                logger.debug(
+                    f"Processing VIN: {row.get('vin', 'N/A')} from CSV row by user {user_username}."
+                )
                 if result := decodevin(row["vin"]):
                     if models.Car.objects.filter(vin=row["vin"]).exists():
                         messages.error(request, f"vin {row['vin']} already exists")
@@ -10307,8 +10276,7 @@ def upload_cars(request, dealer_slug, pk=None):
                     car_make = get_make(manufacturer_name)
                     car_model = get_model(model_name, car_make)
                     if (
-                        not all([car_make])
-                        or (make.pk != car_make.pk)
+                        not all([car_make]) or (make.pk != car_make.pk)
                         # not all([car_make, car_model])
                         # or (make.pk != car_make.pk)
                         # or (model.pk != car_model.pk)
@@ -10344,7 +10312,7 @@ def upload_cars(request, dealer_slug, pk=None):
                         car=car,
                         cost_price=po_item.item.unit_cost,
                         marked_price=0,
-                        selling_price=0
+                        selling_price=0,
                     )
                 car.add_colors(exterior=exterior, interior=interior)
                 cars_created += 1
@@ -10359,9 +10327,7 @@ def upload_cars(request, dealer_slug, pk=None):
                 logger.info(
                     f"User {user_username}  updated PoItemsUploaded status to 'uploaded' for Item PK: {item.pk}."
                 )
-                return redirect(
-                    "inventory_stats",kwargs={"dealer_slug": dealer_slug}
-                )
+                return redirect("inventory_stats", kwargs={"dealer_slug": dealer_slug})
             # --- Log for successful CSV import and car creation ---
             logger.info(
                 f"User {user_username}  successfully imported {cars_created} cars "
@@ -10372,15 +10338,16 @@ def upload_cars(request, dealer_slug, pk=None):
                 "view_items_inventory",
                 dealer_slug=dealer_slug,
                 slug_entity=dealer.entity.slug,
-                po_pk=item.po_model.pk,)
+                po_pk=item.po_model.pk,
+            )
 
         except Exception as e:
-              # --- Log for general errors during CSV processing or car creation ---
+            # --- Log for general errors during CSV processing or car creation ---
             logger.error(
                 f"User {user_username} encountered an unexpected error "
                 f"during CSV file processing or car creation for Item PK: {pk if pk else 'N/A'} "
                 f"(Dealer: {dealer_slug}). Error: {e}",
-                exc_info=True # Crucial for full traceback
+                exc_info=True,  # Crucial for full traceback
             )
             messages.error(request, f"Error processing CSV: {str(e)}")
             return response
@@ -10391,7 +10358,11 @@ def upload_cars(request, dealer_slug, pk=None):
     return render(
         request,
         "csv_upload.html",
-        {"make_data": models.CarMake.objects.filter(is_sa_import=True), "form": form, "item": item},
+        {
+            "make_data": models.CarMake.objects.filter(is_sa_import=True),
+            "form": form,
+            "item": item,
+        },
     )
 
 
@@ -10415,9 +10386,7 @@ def bulk_update_car_price(request):
             for car_pk in cars:
                 car = models.Car.objects.get(pk=car_pk)
                 if not hasattr(car, "finances"):
-                    models.CarFinance.objects.create(
-                        car=car, cost_price=Decimal(price)
-                    )
+                    models.CarFinance.objects.create(car=car, cost_price=Decimal(price))
                 else:
                     car.finances.cost_price = Decimal(price)
                     car.finances.save()
diff --git a/static/js/formSubmitHandler.js b/static/js/formSubmitHandler.js
new file mode 100644
index 00000000..d2533f99
--- /dev/null
+++ b/static/js/formSubmitHandler.js
@@ -0,0 +1,51 @@
+// static/js/formSubmitHandler.js
+
+document.addEventListener('DOMContentLoaded', function() {
+  // Initialize all forms with submit buttons
+  const forms = document.querySelectorAll('form');
+
+  forms.forEach(form => {
+    const submitBtn = form.querySelector('button[type="submit"]');
+
+    if (submitBtn) {
+      // Store original button HTML
+      if (!submitBtn.dataset.originalHtml) {
+        submitBtn.dataset.originalHtml = submitBtn.innerHTML;
+      }
+
+      form.addEventListener('submit', function(e) {
+        // Only proceed if form is valid
+        if (form.checkValidity()) {
+          disableSubmitButton(submitBtn);
+        }
+      });
+    }
+  });
+});
+
+/**
+ * Disable and show loading state on submit button
+ * @param {HTMLElement} button - The submit button element
+ */
+function disableSubmitButton(button) {
+  button.disabled = true;
+  button.innerHTML = `
+    <span class="submit-spinner">
+      <i class="fas fa-spinner fa-spin me-1"></i>
+    </span>
+    <span class="submit-text">${button.dataset.savingText || 'Processing...'}</span>
+  `;
+  button.classList.add('submitting');
+}
+
+/**
+ * Reset submit button to original state
+ * @param {HTMLElement} button - The submit button element
+ */
+function resetSubmitButton(button) {
+  if (button.dataset.originalHtml) {
+    button.innerHTML = button.dataset.originalHtml;
+  }
+  button.disabled = false;
+  button.classList.remove('submitting');
+}
\ No newline at end of file
diff --git a/staticfiles/css/custom.css b/staticfiles/css/custom.css
index 424f319d..b61b11af 100644
--- a/staticfiles/css/custom.css
+++ b/staticfiles/css/custom.css
@@ -45,7 +45,7 @@
 }
 
 .form-control, .form-select {
-  /* text-align: center; */
+  text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/t1.py b/t1.py
index bb0b34fd..dcfda023 100644
--- a/t1.py
+++ b/t1.py
@@ -19,4 +19,4 @@ def get_models_for_make():
 
 models = get_models_for_make()
 for model in models:
-    print(model["Model_Name"])
\ No newline at end of file
+    print(model["Model_Name"])
diff --git a/templates/403.html b/templates/403.html
index c5c3338e..3c7cb3d2 100644
--- a/templates/403.html
+++ b/templates/403.html
@@ -1,35 +1,60 @@
 {% load static i18n %}
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Access Forbidden</title>
-    <meta name="description" content="" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'assets/img/favicons/apple-touch-icon.png' %}" />
-    <link rel="icon" type="image/png" sizes="32x32" href="{% static 'assets/img/favicons/favicon-32x32.png' %}" />
-    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'assets/img/favicons/favicon-16x16.png' %}" />
-    <link rel="shortcut icon" type="image/x-icon" href="{% static 'assets/img/favicons/favicon.ico' %}" />
-    <link rel="manifest" href="{% static 'assets/img/favicons/manifest.json' %}" />
-    <meta name="msapplication-TileImage" content="{% static 'assets/img/favicons/mstile-150x150.png' %}" />
-    <meta name="theme-color" content="#ffffff" />
-    <script src="{% static 'vendors/simplebar/simplebar.min.js' %}"></script>
-    <script src="{% static 'assets/js/config.js' %}"></script>
-
-    <!-- =============================================== -->
-    <!-- Stylesheets -->
-    <!-- =============================================== -->
-    <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="{% static 'vendors/simplebar/simplebar.min.css' %}" rel="stylesheet" />
-    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css" />
-    <link href="{% static 'assets/css/theme-rtl.min.css' %}" type="text/css" rel="stylesheet" id="style-rtl" />
-    <link href="{% static 'assets/css/theme.min.css' %}" type="text/css" rel="stylesheet" id="style-default" />
-    <link href="{% static 'assets/css/user-rtl.min.css' %}" type="text/css" rel="stylesheet" id="user-style-rtl" />
-    <link href="{% static 'assets/css/user.min.css' %}" type="text/css" rel="stylesheet" id="user-style-default" />
-
-    <style>
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <title>Access Forbidden</title>
+        <meta name="description" content="" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="apple-touch-icon"
+              sizes="180x180"
+              href="{% static 'assets/img/favicons/apple-touch-icon.png' %}" />
+        <link rel="icon"
+              type="image/png"
+              sizes="32x32"
+              href="{% static 'assets/img/favicons/favicon-32x32.png' %}" />
+        <link rel="icon"
+              type="image/png"
+              sizes="16x16"
+              href="{% static 'assets/img/favicons/favicon-16x16.png' %}" />
+        <link rel="shortcut icon"
+              type="image/x-icon"
+              href="{% static 'assets/img/favicons/favicon.ico' %}" />
+        <link rel="manifest"
+              href="{% static 'assets/img/favicons/manifest.json' %}" />
+        <meta name="msapplication-TileImage"
+              content="{% static 'assets/img/favicons/mstile-150x150.png' %}" />
+        <meta name="theme-color" content="#ffffff" />
+        <script src="{% static 'vendors/simplebar/simplebar.min.js' %}"></script>
+        <script src="{% static 'assets/js/config.js' %}"></script>
+        <!-- =============================================== -->
+        <!-- Stylesheets -->
+        <!-- =============================================== -->
+        <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="{% static 'vendors/simplebar/simplebar.min.css' %}"
+              rel="stylesheet" />
+        <link rel="stylesheet"
+              href="https://unicons.iconscout.com/release/v4.0.8/css/line.css" />
+        <link href="{% static 'assets/css/theme-rtl.min.css' %}"
+              type="text/css"
+              rel="stylesheet"
+              id="style-rtl" />
+        <link href="{% static 'assets/css/theme.min.css' %}"
+              type="text/css"
+              rel="stylesheet"
+              id="style-default" />
+        <link href="{% static 'assets/css/user-rtl.min.css' %}"
+              type="text/css"
+              rel="stylesheet"
+              id="user-style-rtl" />
+        <link href="{% static 'assets/css/user.min.css' %}"
+              type="text/css"
+              rel="stylesheet"
+              id="user-style-default" />
+        <style>
       body, html {
         height: 100%;
         margin: 0;
@@ -51,42 +76,48 @@
       .text-center {
         text-align: center;
       }
-    </style>
-  </head>
-
-  <body>
-    <main class="main" id="top">
-      <div class="px-3">
-        <div class="row min-vh-100 flex-center p-5">
-          <div class="col-12 col-xl-10 col-xxl-8">
-            <div class="row justify-content-center align-items-center g-5">
-              <div class="col-12 col-lg-6 text-center order-lg-1">
-                <img class="img-fluid w-md-50 w-lg-100 d-light-none" src="{% static 'images/spot-illustrations/dark_403-illustration.png' %}" alt="" width="540" />
-              </div>
-              <div class="col-12 col-lg-6 text-center text-lg-start">
-                <img class="img-fluid mb-6 w-50 w-lg-75 d-dark-none" src="{% static 'images/spot-illustrations/403.png' %}" alt="" />
-                <h2 class="text-body-secondary fw-bolder mb-3">Access Forbidden!</h2>
-                <p class="text-body mb-5">
-                  Halt! Thou art endeavouring to trespass upon a realm not granted unto thee.<br class="d-none d-md-block d-lg-none" />granted unto thee.
-                </p><a class="btn btn-lg btn-phoenix-primary" href="{% url 'home' %}">Go Home</a>
-              </div>
+        </style>
+    </head>
+    <body>
+        <main class="main" id="top">
+            <div class="px-3">
+                <div class="row min-vh-100 flex-center p-5">
+                    <div class="col-12 col-xl-10 col-xxl-8">
+                        <div class="row justify-content-center align-items-center g-5">
+                            <div class="col-12 col-lg-6 text-center order-lg-1">
+                                <img class="img-fluid w-md-50 w-lg-100 d-light-none"
+                                     src="{% static 'images/spot-illustrations/dark_403-illustration.png' %}"
+                                     alt=""
+                                     width="540" />
+                            </div>
+                            <div class="col-12 col-lg-6 text-center text-lg-start">
+                                <img class="img-fluid mb-6 w-50 w-lg-75 d-dark-none"
+                                     src="{% static 'images/spot-illustrations/403.png' %}"
+                                     alt="" />
+                                <h2 class="text-body-secondary fw-bolder mb-3">Access Forbidden!</h2>
+                                <p class="text-body mb-5">
+                                    Halt! Thou art endeavouring to trespass upon a realm not granted unto thee.
+                                    <br class="d-none d-md-block d-lg-none" />
+                                    granted unto thee.
+                                </p>
+                                <a class="btn btn-lg btn-phoenix-primary" href="{% url 'home' %}">Go Home</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
-        </div>
-      </div>
-    </main>
-
-    <script src="{% static 'vendors/bootstrap/bootstrap.min.js' %}"></script>
-    <script src="{% static 'js/phoenix.js' %}"></script>
-    <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>
-    <script src="{% static 'vendors/is/is.min.js' %}"></script>
-    <script src="{% static 'vendors/fontawesome/all.min.js' %}"></script>
-    <script src="{% static 'vendors/lodash/lodash.min.js' %}"></script>
-    <script src="{% static 'vendors/list.js/list.min.js' %}"></script>
-    <script src="{% static 'vendors/feather-icons/feather.min.js' %}"></script>
-    <script src="{% static 'vendors/dayjs/dayjs.min.js' %}"></script>
-    <script src="{% static 'assets/js/phoenix.js' %}"></script>
-  </body>
-</html>
\ No newline at end of file
+        </main>
+        <script src="{% static 'vendors/bootstrap/bootstrap.min.js' %}"></script>
+        <script src="{% static 'js/phoenix.js' %}"></script>
+        <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>
+        <script src="{% static 'vendors/is/is.min.js' %}"></script>
+        <script src="{% static 'vendors/fontawesome/all.min.js' %}"></script>
+        <script src="{% static 'vendors/lodash/lodash.min.js' %}"></script>
+        <script src="{% static 'vendors/list.js/list.min.js' %}"></script>
+        <script src="{% static 'vendors/feather-icons/feather.min.js' %}"></script>
+        <script src="{% static 'vendors/dayjs/dayjs.min.js' %}"></script>
+        <script src="{% static 'assets/js/phoenix.js' %}"></script>
+    </body>
+</html>
diff --git a/templates/404.html b/templates/404.html
index a11ff43f..18b5f806 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -1,35 +1,60 @@
 {% load static i18n %}
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Access Forbidden</title>
-    <meta name="description" content="" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'assets/img/favicons/apple-touch-icon.png' %}" />
-    <link rel="icon" type="image/png" sizes="32x32" href="{% static 'assets/img/favicons/favicon-32x32.png' %}" />
-    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'assets/img/favicons/favicon-16x16.png' %}" />
-    <link rel="shortcut icon" type="image/x-icon" href="{% static 'assets/img/favicons/favicon.ico' %}" />
-    <link rel="manifest" href="{% static 'assets/img/favicons/manifest.json' %}" />
-    <meta name="msapplication-TileImage" content="{% static 'assets/img/favicons/mstile-150x150.png' %}" />
-    <meta name="theme-color" content="#ffffff" />
-    <script src="{% static 'vendors/simplebar/simplebar.min.js' %}"></script>
-    <script src="{% static 'assets/js/config.js' %}"></script>
-
-    <!-- =============================================== -->
-    <!-- Stylesheets -->
-    <!-- =============================================== -->
-    <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="{% static 'vendors/simplebar/simplebar.min.css' %}" rel="stylesheet" />
-    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css" />
-    <link href="{% static 'assets/css/theme-rtl.min.css' %}" type="text/css" rel="stylesheet" id="style-rtl" />
-    <link href="{% static 'assets/css/theme.min.css' %}" type="text/css" rel="stylesheet" id="style-default" />
-    <link href="{% static 'assets/css/user-rtl.min.css' %}" type="text/css" rel="stylesheet" id="user-style-rtl" />
-    <link href="{% static 'assets/css/user.min.css' %}" type="text/css" rel="stylesheet" id="user-style-default" />
-
-    <style>
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <title>Access Forbidden</title>
+        <meta name="description" content="" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="apple-touch-icon"
+              sizes="180x180"
+              href="{% static 'assets/img/favicons/apple-touch-icon.png' %}" />
+        <link rel="icon"
+              type="image/png"
+              sizes="32x32"
+              href="{% static 'assets/img/favicons/favicon-32x32.png' %}" />
+        <link rel="icon"
+              type="image/png"
+              sizes="16x16"
+              href="{% static 'assets/img/favicons/favicon-16x16.png' %}" />
+        <link rel="shortcut icon"
+              type="image/x-icon"
+              href="{% static 'assets/img/favicons/favicon.ico' %}" />
+        <link rel="manifest"
+              href="{% static 'assets/img/favicons/manifest.json' %}" />
+        <meta name="msapplication-TileImage"
+              content="{% static 'assets/img/favicons/mstile-150x150.png' %}" />
+        <meta name="theme-color" content="#ffffff" />
+        <script src="{% static 'vendors/simplebar/simplebar.min.js' %}"></script>
+        <script src="{% static 'assets/js/config.js' %}"></script>
+        <!-- =============================================== -->
+        <!-- Stylesheets -->
+        <!-- =============================================== -->
+        <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="{% static 'vendors/simplebar/simplebar.min.css' %}"
+              rel="stylesheet" />
+        <link rel="stylesheet"
+              href="https://unicons.iconscout.com/release/v4.0.8/css/line.css" />
+        <link href="{% static 'assets/css/theme-rtl.min.css' %}"
+              type="text/css"
+              rel="stylesheet"
+              id="style-rtl" />
+        <link href="{% static 'assets/css/theme.min.css' %}"
+              type="text/css"
+              rel="stylesheet"
+              id="style-default" />
+        <link href="{% static 'assets/css/user-rtl.min.css' %}"
+              type="text/css"
+              rel="stylesheet"
+              id="user-style-rtl" />
+        <link href="{% static 'assets/css/user.min.css' %}"
+              type="text/css"
+              rel="stylesheet"
+              id="user-style-default" />
+        <style>
       body, html {
         height: 100%;
         margin: 0;
@@ -51,40 +76,48 @@
       .text-center {
         text-align: center;
       }
-    </style>
-  </head>
-
-  <body>
-    <main class="main" id="top">
-      <div class="px-3">
-        <div class="row min-vh-100 flex-center p-5">
-          <div class="col-12 col-xl-10 col-xxl-8">
-            <div class="row justify-content-center align-items-center g-5">
-              <div class="col-12 col-lg-6 text-center order-lg-1">
-                <img class="img-fluid w-md-50 w-lg-100 d-light-none" src="{% static 'images/spot-illustrations/dark_500-illustration.png' %}" alt="" width="540" />
-              </div>
-              <div class="col-12 col-lg-6 text-center text-lg-start">
-                <img class="img-fluid mb-6 w-50 w-lg-75 d-dark-none" src="{% static 'images/spot-illustrations/500.png' %}" alt="" />
-                <h2 class="text-body-secondary fw-bolder mb-3">Page Missing!</h2>
-                <p class="text-body mb-5">But no worries! Our ostrich is looking everywhere <br class="d-none d-sm-block" />while you wait safely. </p><a class="btn btn-lg btn-phoenix-primary" href="{% url 'home' %}">Go Home</a>
-              </div>
+        </style>
+    </head>
+    <body>
+        <main class="main" id="top">
+            <div class="px-3">
+                <div class="row min-vh-100 flex-center p-5">
+                    <div class="col-12 col-xl-10 col-xxl-8">
+                        <div class="row justify-content-center align-items-center g-5">
+                            <div class="col-12 col-lg-6 text-center order-lg-1">
+                                <img class="img-fluid w-md-50 w-lg-100 d-light-none"
+                                     src="{% static 'images/spot-illustrations/dark_500-illustration.png' %}"
+                                     alt=""
+                                     width="540" />
+                            </div>
+                            <div class="col-12 col-lg-6 text-center text-lg-start">
+                                <img class="img-fluid mb-6 w-50 w-lg-75 d-dark-none"
+                                     src="{% static 'images/spot-illustrations/500.png' %}"
+                                     alt="" />
+                                <h2 class="text-body-secondary fw-bolder mb-3">Page Missing!</h2>
+                                <p class="text-body mb-5">
+                                    But no worries! Our ostrich is looking everywhere
+                                    <br class="d-none d-sm-block" />
+                                    while you wait safely.
+                                </p>
+                                <a class="btn btn-lg btn-phoenix-primary" href="{% url 'home' %}">Go Home</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
-        </div>
-      </div>
-    </main>
-
-    <script src="{% static 'vendors/bootstrap/bootstrap.min.js' %}"></script>
-    <script src="{% static 'js/phoenix.js' %}"></script>
-    <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>
-    <script src="{% static 'vendors/is/is.min.js' %}"></script>
-    <script src="{% static 'vendors/fontawesome/all.min.js' %}"></script>
-    <script src="{% static 'vendors/lodash/lodash.min.js' %}"></script>
-    <script src="{% static 'vendors/list.js/list.min.js' %}"></script>
-    <script src="{% static 'vendors/feather-icons/feather.min.js' %}"></script>
-    <script src="{% static 'vendors/dayjs/dayjs.min.js' %}"></script>
-    <script src="{% static 'assets/js/phoenix.js' %}"></script>
-  </body>
-</html>
\ No newline at end of file
+        </main>
+        <script src="{% static 'vendors/bootstrap/bootstrap.min.js' %}"></script>
+        <script src="{% static 'js/phoenix.js' %}"></script>
+        <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>
+        <script src="{% static 'vendors/is/is.min.js' %}"></script>
+        <script src="{% static 'vendors/fontawesome/all.min.js' %}"></script>
+        <script src="{% static 'vendors/lodash/lodash.min.js' %}"></script>
+        <script src="{% static 'vendors/list.js/list.min.js' %}"></script>
+        <script src="{% static 'vendors/feather-icons/feather.min.js' %}"></script>
+        <script src="{% static 'vendors/dayjs/dayjs.min.js' %}"></script>
+        <script src="{% static 'assets/js/phoenix.js' %}"></script>
+    </body>
+</html>
diff --git a/templates/500.html b/templates/500.html
index 963d5151..1b1d2d9f 100644
--- a/templates/500.html
+++ b/templates/500.html
@@ -1,35 +1,60 @@
 {% load static i18n %}
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Access Forbidden</title>
-    <meta name="description" content="" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'assets/img/favicons/apple-touch-icon.png' %}" />
-    <link rel="icon" type="image/png" sizes="32x32" href="{% static 'assets/img/favicons/favicon-32x32.png' %}" />
-    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'assets/img/favicons/favicon-16x16.png' %}" />
-    <link rel="shortcut icon" type="image/x-icon" href="{% static 'assets/img/favicons/favicon.ico' %}" />
-    <link rel="manifest" href="{% static 'assets/img/favicons/manifest.json' %}" />
-    <meta name="msapplication-TileImage" content="{% static 'assets/img/favicons/mstile-150x150.png' %}" />
-    <meta name="theme-color" content="#ffffff" />
-    <script src="{% static 'vendors/simplebar/simplebar.min.js' %}"></script>
-    <script src="{% static 'assets/js/config.js' %}"></script>
-
-    <!-- =============================================== -->
-    <!-- Stylesheets -->
-    <!-- =============================================== -->
-    <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="{% static 'vendors/simplebar/simplebar.min.css' %}" rel="stylesheet" />
-    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css" />
-    <link href="{% static 'assets/css/theme-rtl.min.css' %}" type="text/css" rel="stylesheet" id="style-rtl" />
-    <link href="{% static 'assets/css/theme.min.css' %}" type="text/css" rel="stylesheet" id="style-default" />
-    <link href="{% static 'assets/css/user-rtl.min.css' %}" type="text/css" rel="stylesheet" id="user-style-rtl" />
-    <link href="{% static 'assets/css/user.min.css' %}" type="text/css" rel="stylesheet" id="user-style-default" />
-
-    <style>
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <title>Access Forbidden</title>
+        <meta name="description" content="" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="apple-touch-icon"
+              sizes="180x180"
+              href="{% static 'assets/img/favicons/apple-touch-icon.png' %}" />
+        <link rel="icon"
+              type="image/png"
+              sizes="32x32"
+              href="{% static 'assets/img/favicons/favicon-32x32.png' %}" />
+        <link rel="icon"
+              type="image/png"
+              sizes="16x16"
+              href="{% static 'assets/img/favicons/favicon-16x16.png' %}" />
+        <link rel="shortcut icon"
+              type="image/x-icon"
+              href="{% static 'assets/img/favicons/favicon.ico' %}" />
+        <link rel="manifest"
+              href="{% static 'assets/img/favicons/manifest.json' %}" />
+        <meta name="msapplication-TileImage"
+              content="{% static 'assets/img/favicons/mstile-150x150.png' %}" />
+        <meta name="theme-color" content="#ffffff" />
+        <script src="{% static 'vendors/simplebar/simplebar.min.js' %}"></script>
+        <script src="{% static 'assets/js/config.js' %}"></script>
+        <!-- =============================================== -->
+        <!-- Stylesheets -->
+        <!-- =============================================== -->
+        <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="{% static 'vendors/simplebar/simplebar.min.css' %}"
+              rel="stylesheet" />
+        <link rel="stylesheet"
+              href="https://unicons.iconscout.com/release/v4.0.8/css/line.css" />
+        <link href="{% static 'assets/css/theme-rtl.min.css' %}"
+              type="text/css"
+              rel="stylesheet"
+              id="style-rtl" />
+        <link href="{% static 'assets/css/theme.min.css' %}"
+              type="text/css"
+              rel="stylesheet"
+              id="style-default" />
+        <link href="{% static 'assets/css/user-rtl.min.css' %}"
+              type="text/css"
+              rel="stylesheet"
+              id="user-style-rtl" />
+        <link href="{% static 'assets/css/user.min.css' %}"
+              type="text/css"
+              rel="stylesheet"
+              id="user-style-default" />
+        <style>
       body, html {
         height: 100%;
         margin: 0;
@@ -51,40 +76,44 @@
       .text-center {
         text-align: center;
       }
-    </style>
-  </head>
-
-  <body>
-    <main class="main" id="top">
-      <div class="px-3">
-        <div class="row min-vh-100 flex-center p-5">
-          <div class="col-12 col-xl-10 col-xxl-8">
-            <div class="row justify-content-center align-items-center g-5">
-              <div class="col-12 col-lg-6 text-center order-lg-1">
-                <img class="img-fluid w-md-50 w-lg-100 d-light-none" src="{% static 'images/spot-illustrations/dark_404-illustration.png' %}" alt="" width="540" />
-              </div>
-              <div class="col-12 col-lg-6 text-center text-lg-start">
-                <img class="img-fluid mb-6 w-50 w-lg-75 d-dark-none" src="{% static 'images/spot-illustrations/404.png' %}" alt="" />
-                <h2 class="text-body-secondary fw-bolder mb-3">Unknow error!</h2>
-                <p class="text-body mb-5">But relax! Our cat is here to play you some music.</p><a class="btn btn-lg btn-phoenix-primary" href="{% url 'home' %}">Go Home</a>
-              </div>
+        </style>
+    </head>
+    <body>
+        <main class="main" id="top">
+            <div class="px-3">
+                <div class="row min-vh-100 flex-center p-5">
+                    <div class="col-12 col-xl-10 col-xxl-8">
+                        <div class="row justify-content-center align-items-center g-5">
+                            <div class="col-12 col-lg-6 text-center order-lg-1">
+                                <img class="img-fluid w-md-50 w-lg-100 d-light-none"
+                                     src="{% static 'images/spot-illustrations/dark_404-illustration.png' %}"
+                                     alt=""
+                                     width="540" />
+                            </div>
+                            <div class="col-12 col-lg-6 text-center text-lg-start">
+                                <img class="img-fluid mb-6 w-50 w-lg-75 d-dark-none"
+                                     src="{% static 'images/spot-illustrations/404.png' %}"
+                                     alt="" />
+                                <h2 class="text-body-secondary fw-bolder mb-3">Unknow error!</h2>
+                                <p class="text-body mb-5">But relax! Our cat is here to play you some music.</p>
+                                <a class="btn btn-lg btn-phoenix-primary" href="{% url 'home' %}">Go Home</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
-        </div>
-      </div>
-    </main>
-
-    <script src="{% static 'vendors/bootstrap/bootstrap.min.js' %}"></script>
-    <script src="{% static 'js/phoenix.js' %}"></script>
-    <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>
-    <script src="{% static 'vendors/is/is.min.js' %}"></script>
-    <script src="{% static 'vendors/fontawesome/all.min.js' %}"></script>
-    <script src="{% static 'vendors/lodash/lodash.min.js' %}"></script>
-    <script src="{% static 'vendors/list.js/list.min.js' %}"></script>
-    <script src="{% static 'vendors/feather-icons/feather.min.js' %}"></script>
-    <script src="{% static 'vendors/dayjs/dayjs.min.js' %}"></script>
-    <script src="{% static 'assets/js/phoenix.js' %}"></script>
-  </body>
-</html>
\ No newline at end of file
+        </main>
+        <script src="{% static 'vendors/bootstrap/bootstrap.min.js' %}"></script>
+        <script src="{% static 'js/phoenix.js' %}"></script>
+        <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>
+        <script src="{% static 'vendors/is/is.min.js' %}"></script>
+        <script src="{% static 'vendors/fontawesome/all.min.js' %}"></script>
+        <script src="{% static 'vendors/lodash/lodash.min.js' %}"></script>
+        <script src="{% static 'vendors/list.js/list.min.js' %}"></script>
+        <script src="{% static 'vendors/feather-icons/feather.min.js' %}"></script>
+        <script src="{% static 'vendors/dayjs/dayjs.min.js' %}"></script>
+        <script src="{% static 'assets/js/phoenix.js' %}"></script>
+    </body>
+</html>
diff --git a/templates/account/account_inactive.html b/templates/account/account_inactive.html
index 1ee9c725..1fa63846 100644
--- a/templates/account/account_inactive.html
+++ b/templates/account/account_inactive.html
@@ -6,9 +6,9 @@
 {% endblock head_title %}
 {% block content %}
     {% element h1 %}
-        {% translate "Account Inactive" %}
-    {% endelement %}
-    {% element p %}
-        {% translate "This account is inactive." %}
-    {% endelement %}
+    {% translate "Account Inactive" %}
+{% endelement %}
+{% element p %}
+{% translate "This account is inactive." %}
+{% endelement %}
 {% endblock content %}
diff --git a/templates/account/confirm_email_verification_code.html b/templates/account/confirm_email_verification_code.html
index 84e37256..08f0d893 100644
--- a/templates/account/confirm_email_verification_code.html
+++ b/templates/account/confirm_email_verification_code.html
@@ -6,43 +6,43 @@
 {% endblock head_title %}
 {% block content %}
     {% element h1 %}
-        {% translate "Enter Email Verification Code" %}
-    {% endelement %}
-    {% setvar email_link %}
-        <a href="mailto:{{ email }}">{{ email }}</a>
-    {% endsetvar %}
-    {% element p %}
-        {% blocktranslate %}We’ve sent a code to {{ email_link }}. The code expires shortly, so please enter it soon.{% endblocktranslate %}
-    {% endelement %}
-    {% url 'account_email_verification_sent' as action_url %}
-    {% element form form=form method="post" action=action_url tags="entrance,email,verification" %}
-        {% slot body %}
-            {% csrf_token %}
-            {% element fields form=form unlabeled=True %}
-            {% endelement %}
-            {{ redirect_field }}
-        {% endslot %}
-        {% slot actions %}
-            {% element button type="submit" tags="prominent,confirm" %}
-                {% translate "Confirm" %}
-            {% endelement %}
-            {% if cancel_url %}
-                {% element button href=cancel_url tags="link,cancel" %}
-                    {% translate "Cancel" %}
-                {% endelement %}
-            {% else %}
-                {% element button type="submit" form="logout-from-stage" tags="link,cancel" %}
-                    {% translate "Cancel" %}
-                {% endelement %}
-            {% endif %}
-        {% endslot %}
-    {% endelement %}
-    {% if not cancel_url %}
-        <form id="logout-from-stage"
-              method="post"
-              action="{% url 'account_logout' %}">
-            <input type="hidden" name="next" value="{% url 'account_login' %}">
-            {% csrf_token %}
-        </form>
-    {% endif %}
+    {% translate "Enter Email Verification Code" %}
+{% endelement %}
+{% setvar email_link %}
+<a href="mailto:{{ email }}">{{ email }}</a>
+{% endsetvar %}
+{% element p %}
+{% blocktranslate %}We’ve sent a code to {{ email_link }}. The code expires shortly, so please enter it soon.{% endblocktranslate %}
+{% endelement %}
+{% url 'account_email_verification_sent' as action_url %}
+{% element form form=form method="post" action=action_url tags="entrance,email,verification" %}
+{% slot body %}
+{% csrf_token %}
+{% element fields form=form unlabeled=True %}
+{% endelement %}
+{{ redirect_field }}
+{% endslot %}
+{% slot actions %}
+{% element button type="submit" tags="prominent,confirm" %}
+{% translate "Confirm" %}
+{% endelement %}
+{% if cancel_url %}
+    {% element button href=cancel_url tags="link,cancel" %}
+    {% translate "Cancel" %}
+{% endelement %}
+{% else %}
+{% element button type="submit" form="logout-from-stage" tags="link,cancel" %}
+{% translate "Cancel" %}
+{% endelement %}
+{% endif %}
+{% endslot %}
+{% endelement %}
+{% if not cancel_url %}
+    <form id="logout-from-stage"
+          method="post"
+          action="{% url 'account_logout' %}">
+        <input type="hidden" name="next" value="{% url 'account_login' %}">
+        {% csrf_token %}
+    </form>
+{% endif %}
 {% endblock content %}
diff --git a/templates/account/confirm_login_code..html b/templates/account/confirm_login_code..html
index 06e3d6a0..a7ffaaa1 100644
--- a/templates/account/confirm_login_code..html
+++ b/templates/account/confirm_login_code..html
@@ -1,6 +1,5 @@
 {% extends "base.html" %}
 {% load crispy_forms_filters %}
-
 {% load i18n %}
 {% load allauth account %}
 {% block head_title %}
@@ -10,40 +9,49 @@
     <div class="row ">
         <div class="row flex-center min-vh-50">
             <div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
-                <a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
+                <a class="d-flex flex-center text-decoration-none mb-4"
+                   href="{% url 'home' %}">
                     <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
                         <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
-                            <img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
-                            <img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
+                            <img class="d-dark-none"
+                                 src="{% static 'images/logos/logo-d.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
+                            <img class="d-light-none"
+                                 src="{% static 'images/logos/logo.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
                         </div>
                     </div>
                 </a>
                 <div class="text-center">
                     <h3 class="mb-4">{% translate "Enter Sign-In Code" %}</h3>
                 </div>
-
                 {% setvar email_link %}
-                    <a href="mailto:{{ email }}">{{ email }}</a>
-                {% endsetvar %}
-                <p>
-                    {% blocktranslate %}We’ve sent a code to {{ email_link }}. The code expires shortly, so please enter it soon.{% endblocktranslate %}
-                </p>
-                <form method="post" action="{% url 'account_confirm_login_code' %}" class="form needs-validation" novalidate>
-                    {% csrf_token %}
-                    {{ redirect_field }}
-                    {{ form|crispy }}
-                    <button type="submit" class="btn btn-phoenix-primary btn-sm w-100">{% trans "Sign In" %}</button>
-                </form>
-                {% element button type="submit" form="logout-from-stage" tags="link" %}
-                    {% translate "Cancel" %}
-                {% endelement %}
-                <form id="logout-from-stage"
-                      method="post"
-                      action="{% url 'account_logout' %}">
-                    <input type="hidden" name="next" value="{% url 'account_login' %}">
-                    {% csrf_token %}
-                </form>
-            </div>
-        </div>
+                <a href="mailto:{{ email }}">{{ email }}</a>
+            {% endsetvar %}
+            <p>
+                {% blocktranslate %}We’ve sent a code to {{ email_link }}. The code expires shortly, so please enter it soon.{% endblocktranslate %}
+            </p>
+            <form method="post"
+                  action="{% url 'account_confirm_login_code' %}"
+                  class="form needs-validation"
+                  novalidate>
+                {% csrf_token %}
+                {{ redirect_field }}
+                {{ form|crispy }}
+                <button type="submit" class="btn btn-phoenix-primary btn-sm w-100">{% trans "Sign In" %}</button>
+            </form>
+            {% element button type="submit" form="logout-from-stage" tags="link" %}
+            {% translate "Cancel" %}
+        {% endelement %}
+        <form id="logout-from-stage"
+              method="post"
+              action="{% url 'account_logout' %}">
+            <input type="hidden" name="next" value="{% url 'account_login' %}">
+            {% csrf_token %}
+        </form>
     </div>
+</div>
+</div>
 {% endblock content %}
diff --git a/templates/account/email.html b/templates/account/email.html
index 3ce0b144..8faf8174 100644
--- a/templates/account/email.html
+++ b/templates/account/email.html
@@ -8,22 +8,26 @@
     <div class="row ">
         <div class="row flex-center min-vh-50">
             <div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
-                <a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
+                <a class="d-flex flex-center text-decoration-none mb-4"
+                   href="{% url 'home' %}">
                     <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
                         <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
-                            <img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
-                            <img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
+                            <img class="d-dark-none"
+                                 src="{% static 'images/logos/logo-d.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
+                            <img class="d-light-none"
+                                 src="{% static 'images/logos/logo.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
                         </div>
                     </div>
                 </a>
                 <div class="text-center">
                     <h3 class="mb-4">{% trans "Email Addresses" %}</h3>
                 </div>
-
                 {% if emailaddresses %}
-                    <p>
-                        {% trans 'The following email addresses are associated with your account:' %}
-                    </p>
+                    <p>{% trans 'The following email addresses are associated with your account:' %}</p>
                     {% url 'account_email' as email_url %}
                     <form action="{{ email_url }}" method="POST" class="form email list">
                         {% csrf_token %}
@@ -31,7 +35,12 @@
                             {% for radio in emailaddress_radios %}
                                 {% with emailaddress=radio.emailaddress %}
                                     <label for="{{ radio.id }}">
-                                        <input type="radio" name="email" checked="{{ radio.checked }}" value="{{ emailaddress.email }}" id="{{ radio.id }}" class="form-check-input mb-3" />
+                                        <input type="radio"
+                                               name="email"
+                                               checked="{{ radio.checked }}"
+                                               value="{{ emailaddress.email }}"
+                                               id="{{ radio.id }}"
+                                               class="form-check-input mb-3" />
                                         {{ emailaddress.email }}
                                         {% if emailaddress.verified %}
                                             <span class="badge badge-phoenix badge-phoenix-success verified">{% translate "Verified" %}</span>
@@ -41,36 +50,38 @@
                                         {% if emailaddress.primary %}
                                             <span class="badge badge-phoenix badge-phoenix-primary email">{% translate "Primary" %}</span>
                                         {% endif %}
-                                {% endwith %}
+                                    {% endwith %}
                                 </label>
                             {% endfor %}
                         </div>
                         <div class="mt-2 mb-6">
-                            <button type="submit" name="action_primary" class="btn btn-sm btn-phoenix-primary">{% trans 'Make Primary' %}</button>
-                            <button type="submit" name="action_send" class="btn btn-sm btn-phoenix-secondary">{% trans 'Re-send Verification' %}</button>
-                            <button type="submit" name="action_remove" class="btn btn-sm btn-phoenix-danger delete">{% trans 'Remove' %}</button>
+                            <button type="submit"
+                                    name="action_primary"
+                                    class="btn btn-sm btn-phoenix-primary">{% trans 'Make Primary' %}</button>
+                            <button type="submit"
+                                    name="action_send"
+                                    class="btn btn-sm btn-phoenix-secondary">
+                                {% trans 'Re-send Verification' %}
+                            </button>
+                            <button type="submit"
+                                    name="action_remove"
+                                    class="btn btn-sm btn-phoenix-danger delete">{% trans 'Remove' %}</button>
                         </div>
-
-
                     </form>
                 {% else %}
                     {% include "account/snippets/warn_no_email.html" %}
                 {% endif %}
                 {% if can_add_email %}
-                    <p class="fs-8 fw-bold text-start">
-                        {% trans "Add Email Address" %}
-                    </p>
-
+                    <p class="fs-8 fw-bold text-start">{% trans "Add Email Address" %}</p>
                     {% url 'account_email' as action_url %}
                     <form action="{{ action_url }}" method="POST" class="form email add">
                         {% csrf_token %}
                         {{ form|crispy }}
-                        <button class="btn btn-sm btn-phoenix-success w-100" type="submit" name="action_add">
-                            {% trans "Add Email" %}
-                        </button>
+                        <button class="btn btn-sm btn-phoenix-success w-100"
+                                type="submit"
+                                name="action_add">{% trans "Add Email" %}</button>
                     </form>
                 {% endif %}
-
                 <script>
                     (function() {
                         var message = "{% trans 'Do you really want to remove the selected email address?' %}";
diff --git a/templates/account/email_change.html b/templates/account/email_change.html
index 0ee140c6..94576c23 100644
--- a/templates/account/email_change.html
+++ b/templates/account/email_change.html
@@ -6,63 +6,63 @@
 {% endblock head_title %}
 {% block content %}
     {% element h1 %}
-        {% trans "Email Address" %}
-    {% endelement %}
-    {% if not emailaddresses %}
-        {% include "account/snippets/warn_no_email.html" %}
-    {% endif %}
-    {% url 'account_email' as action_url %}
-    {% element form method="post" action=action_url %}
-        {% slot body %}
-            {% csrf_token %}
-            {% if current_emailaddress %}
-                {% element field id="current_email" disabled=True type="email" value=current_emailaddress.email %}
-                    {% slot label %}
-                        {% translate "Current email" %}:
-                    {% endslot %}
-                {% endelement %}
-            {% endif %}
-            {% if new_emailaddress %}
-                {% element field id="new_email" value=new_emailaddress.email disabled=True type="email" %}
-                    {% slot label %}
-                        {% if not current_emailaddress %}
-                            {% translate "Current email" %}:
-                        {% else %}
-                            {% translate "Changing to" %}:
-                        {% endif %}
-                    {% endslot %}
-                    {% slot help_text %}
-                        {% blocktranslate %}Your email address is still pending verification.{% endblocktranslate %}
-                        {% element button form="pending-email" type="submit" name="action_send" tags="minor,secondary" %}
-                            {% trans 'Re-send Verification' %}
-                        {% endelement %}
-                        {% if current_emailaddress %}
-                            {% element button form="pending-email" type="submit" name="action_remove" tags="danger,minor" %}
-                                {% trans 'Cancel Change' %}
-                            {% endelement %}
-                        {% endif %}
-                    {% endslot %}
-                {% endelement %}
-            {% endif %}
-            {% element field id=form.email.auto_id name="email" value=form.email.value errors=form.email.errors type="email" %}
-                {% slot label %}
-                    {% translate "Change to" %}:
-                {% endslot %}
-            {% endelement %}
-        {% endslot %}
-        {% slot actions %}
-            {% element button name="action_add" type="submit" %}
-                {% trans "Change Email" %}
-            {% endelement %}
-        {% endslot %}
-    {% endelement %}
-    {% if new_emailaddress %}
-        <form style="display: none"
-              id="pending-email"
-              method="post"
-              action="{% url 'account_email' %}">
-            {% csrf_token %}
-            <input type="hidden" name="email" value="{{ new_emailaddress.email }}">
-        </form>
+    {% trans "Email Address" %}
+{% endelement %}
+{% if not emailaddresses %}
+    {% include "account/snippets/warn_no_email.html" %}
+{% endif %}
+{% url 'account_email' as action_url %}
+{% element form method="post" action=action_url %}
+{% slot body %}
+{% csrf_token %}
+{% if current_emailaddress %}
+    {% element field id="current_email" disabled=True type="email" value=current_emailaddress.email %}
+    {% slot label %}
+    {% translate "Current email" %}:
+{% endslot %}
+{% endelement %}
+{% endif %}
+{% if new_emailaddress %}
+    {% element field id="new_email" value=new_emailaddress.email disabled=True type="email" %}
+    {% slot label %}
+    {% if not current_emailaddress %}
+        {% translate "Current email" %}:
+    {% else %}
+        {% translate "Changing to" %}:
     {% endif %}
+{% endslot %}
+{% slot help_text %}
+{% blocktranslate %}Your email address is still pending verification.{% endblocktranslate %}
+{% element button form="pending-email" type="submit" name="action_send" tags="minor,secondary" %}
+{% trans 'Re-send Verification' %}
+{% endelement %}
+{% if current_emailaddress %}
+    {% element button form="pending-email" type="submit" name="action_remove" tags="danger,minor" %}
+    {% trans 'Cancel Change' %}
+{% endelement %}
+{% endif %}
+{% endslot %}
+{% endelement %}
+{% endif %}
+{% element field id=form.email.auto_id name="email" value=form.email.value errors=form.email.errors type="email" %}
+{% slot label %}
+{% translate "Change to" %}:
+{% endslot %}
+{% endelement %}
+{% endslot %}
+{% slot actions %}
+{% element button name="action_add" type="submit" %}
+{% trans "Change Email" %}
+{% endelement %}
+{% endslot %}
+{% endelement %}
+{% if new_emailaddress %}
+    <form style="display: none"
+          id="pending-email"
+          method="post"
+          action="{% url 'account_email' %}">
+        {% csrf_token %}
+        <input type="hidden" name="email" value="{{ new_emailaddress.email }}">
+    </form>
+{% endif %}
 {% endblock content %}
diff --git a/templates/account/email_confirm.html b/templates/account/email_confirm.html
index f7a2243f..54f1308e 100644
--- a/templates/account/email_confirm.html
+++ b/templates/account/email_confirm.html
@@ -9,18 +9,24 @@
     <div class="row ">
         <div class="row flex-center min-vh-50">
             <div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
-                <a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
+                <a class="d-flex flex-center text-decoration-none mb-4"
+                   href="{% url 'home' %}">
                     <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
                         <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
-                            <img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
-                            <img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
+                            <img class="d-dark-none"
+                                 src="{% static 'images/logos/logo-d.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
+                            <img class="d-light-none"
+                                 src="{% static 'images/logos/logo.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
                         </div>
                     </div>
                 </a>
                 <div class="text-center">
                     <h3 class="mb-4">{% trans "Confirm Email Address" %}</h3>
                 </div>
-
                 {% if confirmation %}
                     {% user_display confirmation.email_address.user as user_display %}
                     {% if can_confirm %}
@@ -31,11 +37,8 @@
                         <form class="form" action="{{ action_url }}" method="post">
                             {% csrf_token %}
                             {{ redirect_field }}
-                            <button class="btn btn-sm btn-phoenix-primary" type="submit">
-                                {% trans 'Confirm' %}
-                            </button>
+                            <button class="btn btn-sm btn-phoenix-primary" type="submit">{% trans 'Confirm' %}</button>
                         </form>
-
                     {% else %}
                         <p>
                             {% blocktrans %}Unable to confirm {{ email }} because it is already confirmed by a different account.{% endblocktrans %}
diff --git a/templates/account/lock-screen.html b/templates/account/lock-screen.html
index d5af2f12..2563a4bd 100644
--- a/templates/account/lock-screen.html
+++ b/templates/account/lock-screen.html
@@ -1,45 +1,66 @@
 <!DOCTYPE html>
-<html lang="en-US" dir="ltr" data-navigation-type="default" data-navbar-horizontal-shape="default">
-
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-
-    <!-- ===============================================-->
-    <!--    Document Title-->
-    <!-- ===============================================-->
-    <title>Phoenix</title>
-
-
-    <!-- ===============================================-->
-    <!--    Favicons-->
-    <!-- ===============================================-->
-    <link rel="apple-touch-icon" sizes="180x180" href="../../../assets/img/favicons/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="../../../assets/img/favicons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="../../../assets/img/favicons/favicon-16x16.png">
-    <link rel="shortcut icon" type="image/x-icon" href="../../../assets/img/favicons/favicon.ico">
-    <link rel="manifest" href="../../../assets/img/favicons/manifest.json">
-    <meta name="msapplication-TileImage" content="../../../assets/img/favicons/mstile-150x150.png">
-    <meta name="theme-color" content="#ffffff">
-    <script src="../../../vendors/simplebar/simplebar.min.js"></script>
-    <script src="../../../assets/js/config.js"></script>
-
-
-    <!-- ===============================================-->
-    <!--    Stylesheets-->
-    <!-- ===============================================-->
-    <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="../../../vendors/simplebar/simplebar.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
-    <link href="../../../assets/css/theme-rtl.min.css" type="text/css" rel="stylesheet" id="style-rtl">
-    <link href="../../../assets/css/theme.min.css" type="text/css" rel="stylesheet" id="style-default">
-    <link href="../../../assets/css/user-rtl.min.css" type="text/css" rel="stylesheet" id="user-style-rtl">
-    <link href="../../../assets/css/user.min.css" type="text/css" rel="stylesheet" id="user-style-default">
-    <script>
+<html lang="en-US"
+      dir="ltr"
+      data-navigation-type="default"
+      data-navbar-horizontal-shape="default">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <!-- ===============================================-->
+        <!--    Document Title-->
+        <!-- ===============================================-->
+        <title>Phoenix</title>
+        <!-- ===============================================-->
+        <!--    Favicons-->
+        <!-- ===============================================-->
+        <link rel="apple-touch-icon"
+              sizes="180x180"
+              href="../../../assets/img/favicons/apple-touch-icon.png">
+        <link rel="icon"
+              type="image/png"
+              sizes="32x32"
+              href="../../../assets/img/favicons/favicon-32x32.png">
+        <link rel="icon"
+              type="image/png"
+              sizes="16x16"
+              href="../../../assets/img/favicons/favicon-16x16.png">
+        <link rel="shortcut icon"
+              type="image/x-icon"
+              href="../../../assets/img/favicons/favicon.ico">
+        <link rel="manifest" href="../../../assets/img/favicons/manifest.json">
+        <meta name="msapplication-TileImage"
+              content="../../../assets/img/favicons/mstile-150x150.png">
+        <meta name="theme-color" content="#ffffff">
+        <script src="../../../vendors/simplebar/simplebar.min.js"></script>
+        <script src="../../../assets/js/config.js"></script>
+        <!-- ===============================================-->
+        <!--    Stylesheets-->
+        <!-- ===============================================-->
+        <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="../../../vendors/simplebar/simplebar.min.css" rel="stylesheet">
+        <link rel="stylesheet"
+              href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
+        <link href="../../../assets/css/theme-rtl.min.css"
+              type="text/css"
+              rel="stylesheet"
+              id="style-rtl">
+        <link href="../../../assets/css/theme.min.css"
+              type="text/css"
+              rel="stylesheet"
+              id="style-default">
+        <link href="../../../assets/css/user-rtl.min.css"
+              type="text/css"
+              rel="stylesheet"
+              id="user-style-rtl">
+        <link href="../../../assets/css/user.min.css"
+              type="text/css"
+              rel="stylesheet"
+              id="user-style-default">
+        <script>
       var phoenixIsRTL = window.config.config.phoenixIsRTL;
       if (phoenixIsRTL) {
         var linkDefault = document.getElementById('style-default');
@@ -53,32 +74,41 @@
         linkRTL.setAttribute('disabled', true);
         userLinkRTL.setAttribute('disabled', true);
       }
-    </script>
-  </head>
-
-
-  <body>
-
-    <!-- ===============================================-->
-    <!--    Main Content-->
-    <!-- ===============================================-->
-    <main class="main" id="top">
-      <div class="row">
-        <div class="row flex-center min-vh-100 py-5">
-          <div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
-            <div class="text-center mb-5">
-              <div class="avatar avatar-4xl mb-4"><img class="rounded-circle" src="../../../assets/img/team/30.webp" alt="" /></div>
-              <h2 class="text-body-highlight"> <span class="fw-normal">Hello </span>John Smith</h2>
-              <p class="text-body-tertiary">Enter your password to access the admin</p>
+        </script>
+    </head>
+    <body>
+        <!-- ===============================================-->
+        <!--    Main Content-->
+        <!-- ===============================================-->
+        <main class="main" id="top">
+            <div class="row">
+                <div class="row flex-center min-vh-100 py-5">
+                    <div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
+                        <div class="text-center mb-5">
+                            <div class="avatar avatar-4xl mb-4">
+                                <img class="rounded-circle" src="../../../assets/img/team/30.webp" alt="" />
+                            </div>
+                            <h2 class="text-body-highlight">
+                                <span class="fw-normal">Hello</span>John Smith
+                            </h2>
+                            <p class="text-body-tertiary">Enter your password to access the admin</p>
+                        </div>
+                        <div class="position-relative" data-password="data-password">
+                            <input class="form-control mb-3"
+                                   id="password"
+                                   type="password"
+                                   placeholder="Enter Password"
+                                   data-password-input="data-password-input" />
+                            <button class="btn px-3 py-0 h-100 position-absolute top-0 end-0 fs-7 text-body-tertiary"
+                                    data-password-toggle="data-password-toggle">
+                                <span class="uil uil-eye show"></span><span class="uil uil-eye-slash hide"></span>
+                            </button>
+                        </div>
+                        <a class="btn btn-phoenix-primary w-100" href="../../../index.html">Sign In</a>
+                    </div>
+                </div>
             </div>
-            <div class="position-relative" data-password="data-password">
-              <input class="form-control mb-3" id="password" type="password" placeholder="Enter Password" data-password-input="data-password-input" />
-              <button class="btn px-3 py-0 h-100 position-absolute top-0 end-0 fs-7 text-body-tertiary" data-password-toggle="data-password-toggle"><span class="uil uil-eye show"></span><span class="uil uil-eye-slash hide"></span></button>
-            </div><a class="btn btn-phoenix-primary w-100" href="../../../index.html">Sign In</a>
-          </div>
-        </div>
-      </div>
-      <script>
+            <script>
         var navbarTopStyle = window.config.config.phoenixNavbarTopStyle;
         var navbarTop = document.querySelector('.navbar-top');
         if (navbarTopStyle === 'darker') {
@@ -90,194 +120,470 @@
         if (navbarVertical && navbarVerticalStyle === 'darker') {
           navbarVertical.setAttribute('data-navbar-appearance', 'darker');
         }
-      </script>
-      <div class="support-chat-row">
-        <div class="row-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>
+            </script>
+            <div class="support-chat-row">
+                <div class="row-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="../../../assets/img/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 class="text-center mt-auto">
-                  <div class="avatar avatar-3xl status-online"><img class="rounded-circle border border-3 border-light-subtle" src="../../../assets/img/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 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>
+    <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>
+                <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">
+        <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="../../../assets/img/generic/default-light.png" alt=""/></span><span class="label-text">Light</span></label>
+            <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="../../../assets/img/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="../../../assets/img/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="../../../assets/img/generic/auto.png"
+                                 alt="" />
+                        </span><span class="label-text">Auto</span>
+                    </label>
+                </div>
             </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="../../../assets/img/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="../../../assets/img/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 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>
-          </div>
-          <p class="mb-0 text-body-tertiary">Change text direction</p>
+            <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 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>
-          </div>
-          <p class="mb-0 text-body-tertiary">Toggle support chat</p>
+            <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="../../../assets/img/generic/default-light.png" alt=""/><img class="img-fluid img-prototype d-light-none" src="../../../assets/img/generic/default-dark.png" alt=""/></span><span class="label-text">Vertical</span></label>
+            <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="../../../assets/img/generic/default-light.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none"
+                                 src="../../../assets/img/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="../../../assets/img/generic/top-default.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none"
+                                 src="../../../assets/img/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="../../../assets/img/generic/nav-combo-light.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none"
+                                 src="../../../assets/img/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="../../../assets/img/generic/dual-light.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none"
+                                 src="../../../assets/img/generic/dual-dark.png"
+                                 alt="" />
+                        </span><span class="label-text">Dual nav</span>
+                    </label>
+                </div>
             </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="../../../assets/img/generic/top-default.png" alt=""/><img class="img-fluid img-prototype d-light-none" src="../../../assets/img/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="../../../assets/img/generic/nav-combo-light.png" alt=""/><img class="img-fluid img-prototype d-light-none" src="../../../assets/img/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="../../../assets/img/generic/dual-light.png" alt=""/><img class="img-fluid img-prototype d-light-none" src="../../../assets/img/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>
+            <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="../../../assets/img/generic/default-light.png" alt="" /><img class="img-fluid img-prototype d-light-none" src="../../../assets/img/generic/default-dark.png" alt="" /><span class="label-text d-dark-none"> Default</span><span class="label-text d-light-none">Default</span></label>
+            <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="../../../assets/img/generic/default-light.png"
+                             alt="" />
+                        <img class="img-fluid img-prototype d-light-none"
+                             src="../../../assets/img/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="../../../assets/img/generic/vertical-darker.png"
+                             alt="" />
+                        <img class="img-fluid img-prototype d-light-none"
+                             src="../../../assets/img/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>
-            <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="../../../assets/img/generic/vertical-darker.png" alt="" /><img class="img-fluid img-prototype d-light-none" src="../../../assets/img/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>
+            <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="../../../assets/img/generic/top-default.png" alt=""/><img class="img-fluid img-prototype d-light-none mb-0" src="../../../assets/img/generic/top-default-dark.png" alt=""/></span><span class="label-text">Default</span></label>
+            <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="../../../assets/img/generic/top-default.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none mb-0"
+                                 src="../../../assets/img/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="../../../assets/img/generic/top-slim.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none mb-0"
+                                 src="../../../assets/img/generic/top-slim-dark.png"
+                                 alt="" />
+                        </span><span class="label-text">Slim</span>
+                    </label>
+                </div>
             </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="../../../assets/img/generic/top-slim.png" alt=""/><img class="img-fluid img-prototype d-light-none mb-0" src="../../../assets/img/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>
+            <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="../../../assets/img/generic/top-default.png" alt=""/><img class="img-fluid img-prototype d-light-none mb-0" src="../../../assets/img/generic/top-style-darker.png" alt=""/></span><span class="label-text">Default</span></label>
+            <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="../../../assets/img/generic/top-default.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none mb-0"
+                                 src="../../../assets/img/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="../../../assets/img/generic/navbar-top-style-light.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none mb-0"
+                                 src="../../../assets/img/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>
-            <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="../../../assets/img/generic/navbar-top-style-light.png" alt=""/><img class="img-fluid img-prototype d-light-none mb-0" src="../../../assets/img/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>
+            <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>
-          <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="../../../vendors/popper/popper.min.js"></script>
-    <script src="../../../vendors/bootstrap/bootstrap.min.js"></script>
-    <script src="../../../vendors/anchorjs/anchor.min.js"></script>
-    <script src="../../../vendors/is/is.min.js"></script>
-    <script src="../../../vendors/fontawesome/all.min.js"></script>
-    <script src="../../../vendors/lodash/lodash.min.js"></script>
-    <script src="../../../vendors/list.js/list.min.js"></script>
-    <script src="../../../vendors/feather-icons/feather.min.js"></script>
-    <script src="../../../vendors/dayjs/dayjs.min.js"></script>
-    <script src="../../../assets/js/phoenix.js"></script>
-
-  </body>
-
-</html>
\ No newline at end of file
+        </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="../../../vendors/popper/popper.min.js"></script>
+<script src="../../../vendors/bootstrap/bootstrap.min.js"></script>
+<script src="../../../vendors/anchorjs/anchor.min.js"></script>
+<script src="../../../vendors/is/is.min.js"></script>
+<script src="../../../vendors/fontawesome/all.min.js"></script>
+<script src="../../../vendors/lodash/lodash.min.js"></script>
+<script src="../../../vendors/list.js/list.min.js"></script>
+<script src="../../../vendors/feather-icons/feather.min.js"></script>
+<script src="../../../vendors/dayjs/dayjs.min.js"></script>
+<script src="../../../assets/js/phoenix.js"></script>
+</body>
+</html>
diff --git a/templates/account/login.html b/templates/account/login.html
index b945c623..03ea4fdc 100644
--- a/templates/account/login.html
+++ b/templates/account/login.html
@@ -7,49 +7,67 @@
 {% endblock head_title %}
 {% block content %}
     <section class="main mt-2">
-
         <div class="row flex-center ">
             <div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
-                <a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
+                <a class="d-flex flex-center text-decoration-none mb-4"
+                   href="{% url 'home' %}">
                     <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
                         <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
-                            <img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
-                            <img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
+                            <img class="d-dark-none"
+                                 src="{% static 'images/logos/logo-d.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
+                            <img class="d-light-none"
+                                 src="{% static 'images/logos/logo.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
                         </div>
                     </div>
                 </a>
                 <div class="text-center">
                     <h3 class="mb-4">{% trans "Sign In" %}</h3>
                     {% if not SOCIALACCOUNT_ONLY %}
-
-                        
-                        <form method="post" action="{% url 'account_login' %}" class="form needs-validation" novalidate >
+                        <form method="post"
+                              action="{% url 'account_login' %}"
+                              class="form needs-validation"
+                              novalidate>
                             {% csrf_token %}
                             <div class="mb-3 ">
-                                <label class="form-label" for="id_login" >{{ _("Email") }}</label>
+                                <label class="form-label" for="id_login">{{ _("Email") }}</label>
                                 <div class="form-icon-container">
-                                    <input type="email" name="login" id="id_login" class="form-control form-icon-input placeholder-center"  placeholder="{{ _("Email") }}" required >
+                                    <input type="email"
+                                           name="login"
+                                           id="id_login"
+                                           class="form-control form-icon-input placeholder-center"
+                                           placeholder="{{ _("Email") }}"
+                                           required>
                                     <span class="fas fa-user text-body fs-9 form-icon"></span>
                                 </div>
                             </div>
                             <div class="mb-3 ">
                                 <label class="form-label" for="id_password">{{ _("Password") }}</label>
                                 <div class="form-icon-container">
-                                    <input type="password" name="password" id="id_password" class="form-control form-icon-input placeholder-center" placeholder="{{ _("Password") }}" required >
+                                    <input type="password"
+                                           name="password"
+                                           id="id_password"
+                                           class="form-control form-icon-input placeholder-center"
+                                           placeholder="{{ _("Password") }}"
+                                           required>
                                     <span class="fas fa-key text-body fs-9 form-icon"></span>
                                 </div>
                             </div>
                             <div class="form-group form-check">
-                                <input type="checkbox" name="remember" id="id_remember" class="form-check-input">
-                                <label class="form-check-label mb-0 fs-9" for="id_remember">{{ _("Remember Me")}}</label>
+                                <input type="checkbox"
+                                       name="remember"
+                                       id="id_remember"
+                                       class="form-check-input">
+                                <label class="form-check-label mb-0 fs-9" for="id_remember">{{ _("Remember Me") }}</label>
                             </div>
                             <button type="submit" class="btn btn-phoenix-primary btn-sm w-100">{% trans "Sign In" %}</button>
                             <div class="text-start mt-1">
-                                <a class="fs-9" href="{% url 'account_reset_password' %}">{{ _("Forgot Password?")}}</a>
+                                <a class="fs-9" href="{% url 'account_reset_password' %}">{{ _("Forgot Password?") }}</a>
                             </div>
-
                             {% include 'partials/form_errors.html' %}
-
                         </form>
                         <div class="text-center my-3 fs-9">
                             {% trans 'If you have not created an account yet, then please' %}
@@ -58,33 +76,29 @@
                     {% endif %}
                 </div>
             </div>
-
         </section>
         <section class="pt-lg-0 pt-xl-8">
             {% include 'footer.html' %}
         </section>
-        
         {% if LOGIN_BY_CODE_ENABLED or PASSKEY_LOGIN_ENABLED %}
             <hr>
             {% element button_group vertical=True %}
-                {% if PASSKEY_LOGIN_ENABLED %}
-                    {% element button type="submit" form="mfa_login" id="passkey_login" tags="prominent,login,outline,primary" %}
-                        {% trans "Sign in with a passkey" %}
-                    {% endelement %}
-                {% endif %}
-                {% if LOGIN_BY_CODE_ENABLED %}
-                    {% element button href=request_login_code_url tags="prominent,login,outline,primary" %}
-                        {% trans "Mail me a sign-in code" %}
-                    {% endelement %}
-                {% endif %}
+            {% if PASSKEY_LOGIN_ENABLED %}
+                {% element button type="submit" form="mfa_login" id="passkey_login" tags="prominent,login,outline,primary" %}
+                {% trans "Sign in with a passkey" %}
             {% endelement %}
         {% endif %}
-        {% if SOCIALACCOUNT_ENABLED %}
-            {% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
-        {% endif %}
-
+        {% if LOGIN_BY_CODE_ENABLED %}
+            {% element button href=request_login_code_url tags="prominent,login,outline,primary" %}
+            {% trans "Mail me a sign-in code" %}
+        {% endelement %}
+    {% endif %}
+{% endelement %}
+{% endif %}
+{% if SOCIALACCOUNT_ENABLED %}
+    {% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
+{% endif %}
 {% endblock content %}
-
 {% block extra_body %}
     {{ block.super }}
     {% if PASSKEY_LOGIN_ENABLED %}
diff --git a/templates/account/logout.html b/templates/account/logout.html
index 0ce5cc60..c3e29a7b 100644
--- a/templates/account/logout.html
+++ b/templates/account/logout.html
@@ -1,30 +1,30 @@
 {% extends "base.html" %}
 {% load i18n %}
-{% block title %}{{ _("Sign Out") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Sign Out") }}
+{% endblock title %}
 {% block content %}
-  <div class="row">
-    <div class="row flex-center min-vh-50">
-      <div class="col-sm-10 col-md-8 col-lg-5 col-xl-4 col-xxl-3">
-        <div class="text-center mb-6 mx-auto">
-          <div class="mb-6">
-            <h1 class="fw-bold">{{ _("Sign Out") }}</h1>
-            <p class="text-body-tertiary">{{ _("Are you sure you want to sign out?") }}</p>
-          </div>
-          <div class="d-grid">
-            <form method="post" action="{% url 'account_logout' %}">
-              {% csrf_token %}
-              {{ redirect_field }}
-              <div class="d-grid gap-2 mt-3">
-                <button type="submit" class="btn btn-phoenix-danger">
-                  <span data-feather="log-out"></span> {{ _("Sign Out") }}
-                </button>
-              </div>
-            </form>
-          </div>
+    <div class="row">
+        <div class="row flex-center min-vh-50">
+            <div class="col-sm-10 col-md-8 col-lg-5 col-xl-4 col-xxl-3">
+                <div class="text-center mb-6 mx-auto">
+                    <div class="mb-6">
+                        <h1 class="fw-bold">{{ _("Sign Out") }}</h1>
+                        <p class="text-body-tertiary">{{ _("Are you sure you want to sign out?") }}</p>
+                    </div>
+                    <div class="d-grid">
+                        <form method="post" action="{% url 'account_logout' %}">
+                            {% csrf_token %}
+                            {{ redirect_field }}
+                            <div class="d-grid gap-2 mt-3">
+                                <button type="submit" class="btn btn-phoenix-danger">
+                                    <span data-feather="log-out"></span> {{ _("Sign Out") }}
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
-
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
diff --git a/templates/account/otp_verification.html b/templates/account/otp_verification.html
index c67bbe60..e58d7695 100644
--- a/templates/account/otp_verification.html
+++ b/templates/account/otp_verification.html
@@ -1,14 +1,20 @@
 {% extends 'base.html' %}
 {% load i18n static %}
-
 {% block content %}
     <div class="row">
         <div class="row flex-center min-vh-50 py-5">
             <div class="col-sm-10 col-md-8 col-lg-5 col-xxl-4">
-                <a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
+                <a class="d-flex flex-center text-decoration-none mb-4"
+                   href="{% url 'home' %}">
                     <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
-                        <img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
-                        <img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
+                        <img class="d-dark-none"
+                             src="{% static 'images/logos/logo-d.png' %}"
+                             alt="{% trans 'home' %}"
+                             width="58" />
+                        <img class="d-light-none"
+                             src="{% static 'images/logos/logo.png' %}"
+                             alt="{% trans 'home' %}"
+                             width="58" />
                     </div>
                 </a>
                 <div class="px-xxl-5">
@@ -17,17 +23,16 @@
                         <p class="text-body-tertiary mb-0">
                             {{ _("An email containing a 6-digit verification code has been sent to your email.") }}
                         </p>
-
-
-
                         <form class="verification-form" method="POST">
                             {% csrf_token %}
                             <div class="d-flex align-items-center gap-2 mb-3">
-                                <input class="form-control px-2 text-center" type="number" name="otp_code" required maxlength="6" />
+                                <input class="form-control px-2 text-center"
+                                       type="number"
+                                       name="otp_code"
+                                       required
+                                       maxlength="6" />
                             </div>
-                            <button class="btn btn-phoenix-primary w-100 mb-5" type="submit">
-                                {{ _("Verify") }}
-                            </button>
+                            <button class="btn btn-phoenix-primary w-100 mb-5" type="submit">{{ _("Verify") }}</button>
                             <a class="fs-9" href="">{{ _("Didn’t receive the code") }}</a>
                         </form>
                     </div>
@@ -35,4 +40,4 @@
             </div>
         </div>
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/account/password_change.html b/templates/account/password_change.html
index fed9a6ee..8d7af6dc 100644
--- a/templates/account/password_change.html
+++ b/templates/account/password_change.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% load crispy_forms_filters %}
-{% load allauth i18n static%}
+{% load allauth i18n static %}
 {% block head_title %}
     {% trans "Change Password" %}
 {% endblock head_title %}
@@ -8,24 +8,34 @@
     <div class="row ">
         <div class="row flex-center min-vh-50">
             <div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
-                <a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
+                <a class="d-flex flex-center text-decoration-none mb-4"
+                   href="{% url 'home' %}">
                     <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
                         <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
-                            <img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
-                            <img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
+                            <img class="d-dark-none"
+                                 src="{% static 'images/logos/logo-d.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
+                            <img class="d-light-none"
+                                 src="{% static 'images/logos/logo.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
                         </div>
                     </div>
                 </a>
                 <div class="text-center">
                     <h3 class="mb-4">{% trans "Change Password" %}</h3>
                 </div>
-                <form method="post" action="{% url 'account_change_password' %}" class="form needs-validation" novalidate>
+                <form method="post"
+                      action="{% url 'account_change_password' %}"
+                      class="form needs-validation"
+                      novalidate>
                     {% csrf_token %}
                     {{ redirect_field }}
                     {{ form|crispy }}
                     <button type="submit" class="btn btn-phoenix-primary btn-sm w-100">{% trans "Change Password" %}</button>
                     <div class="text-start mt-1">
-                        <a class="fs-9" href="{% url 'account_reset_password' %}">{{ _("Forgot Password?")}}</a>
+                        <a class="fs-9" href="{% url 'account_reset_password' %}">{{ _("Forgot Password?") }}</a>
                     </div>
                 </form>
             </div>
diff --git a/templates/account/password_reset.html b/templates/account/password_reset.html
index 0cabde26..36b06fb9 100644
--- a/templates/account/password_reset.html
+++ b/templates/account/password_reset.html
@@ -8,26 +8,34 @@
     <div class="row ">
         <div class="row flex-center min-vh-50">
             <div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
-                <a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
+                <a class="d-flex flex-center text-decoration-none mb-4"
+                   href="{% url 'home' %}">
                     <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
                         <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
-                            <img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
-                            <img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
+                            <img class="d-dark-none"
+                                 src="{% static 'images/logos/logo-d.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
+                            <img class="d-light-none"
+                                 src="{% static 'images/logos/logo.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
                         </div>
                     </div>
                 </a>
                 <div class="text-center">
                     <h3 class="mb-4">{% trans "Password Reset" %}</h3>
                 </div>
-
                 {% if user.is_authenticated %}
                     {% include "account/snippets/already_logged_in.html" %}
                 {% endif %}
                 <p>
                     {% trans "Forgotten your password? Enter your email address below, and we'll send you an email allowing you to reset it." %}
                 </p>
-
-                <form method="post" action="{% url 'account_reset_password' %}" class="form needs-validation" novalidate>
+                <form method="post"
+                      action="{% url 'account_reset_password' %}"
+                      class="form needs-validation"
+                      novalidate>
                     {% csrf_token %}
                     {{ form|crispy }}
                     <button type="submit" class="btn btn-phoenix-primary btn-sm w-100">{% trans 'Reset My Password' %}</button>
diff --git a/templates/account/password_reset_done.html b/templates/account/password_reset_done.html
index a3d49a9e..430d53df 100644
--- a/templates/account/password_reset_done.html
+++ b/templates/account/password_reset_done.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load i18n static%}
+{% load i18n static %}
 {% load allauth %}
 {% load account %}
 {% block head_title %}
@@ -9,18 +9,24 @@
     <div class="row ">
         <div class="row flex-center min-vh-50">
             <div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
-                <a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
+                <a class="d-flex flex-center text-decoration-none mb-4"
+                   href="{% url 'home' %}">
                     <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
                         <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
-                            <img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
-                            <img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
+                            <img class="d-dark-none"
+                                 src="{% static 'images/logos/logo-d.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
+                            <img class="d-light-none"
+                                 src="{% static 'images/logos/logo.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
                         </div>
                     </div>
                 </a>
                 <div class="text-center">
                     <h3 class="mb-4">{% trans "Password Reset" %}</h3>
                 </div>
-
                 {% if user.is_authenticated %}
                     {% include "account/snippets/already_logged_in.html" %}
                 {% endif %}
diff --git a/templates/account/password_reset_from_key.html b/templates/account/password_reset_from_key.html
index dbbce8af..17f3ab58 100644
--- a/templates/account/password_reset_from_key.html
+++ b/templates/account/password_reset_from_key.html
@@ -9,11 +9,18 @@
     <div class="row ">
         <div class="row flex-center min-vh-50">
             <div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
-                <a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
+                <a class="d-flex flex-center text-decoration-none mb-4"
+                   href="{% url 'home' %}">
                     <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
                         <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
-                            <img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
-                            <img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
+                            <img class="d-dark-none"
+                                 src="{% static 'images/logos/logo-d.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
+                            <img class="d-light-none"
+                                 src="{% static 'images/logos/logo.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
                         </div>
                     </div>
                 </a>
@@ -26,7 +33,6 @@
                         {% endif %}
                     </h3>
                 </div>
-
                 {% if token_fail %}
                     {% url 'account_reset_password' as passwd_reset_url %}
                     <p>
diff --git a/templates/account/password_reset_from_key_done.html b/templates/account/password_reset_from_key_done.html
index cd9e05b5..ade439b6 100644
--- a/templates/account/password_reset_from_key_done.html
+++ b/templates/account/password_reset_from_key_done.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load i18n static%}
+{% load i18n static %}
 {% load allauth %}
 {% block head_title %}
     {% trans "Change Password" %}
@@ -8,20 +8,27 @@
     <div class="row ">
         <div class="row flex-center min-vh-50">
             <div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
-                <a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
+                <a class="d-flex flex-center text-decoration-none mb-4"
+                   href="{% url 'home' %}">
                     <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
                         <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
-                            <img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
-                            <img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
+                            <img class="d-dark-none"
+                                 src="{% static 'images/logos/logo-d.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
+                            <img class="d-light-none"
+                                 src="{% static 'images/logos/logo.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
                         </div>
                     </div>
                 </a>
                 <div class="text-center">
                     <h3 class="mb-4">{% trans "Change Password" %}</h3>
-                    <p class="fs-9 fw-bold text-success">{% trans 'Your password is now changed.' %} <span class="far fa-check-circle ms-1"></span></p>
+                    <p class="fs-9 fw-bold text-success">
+                        {% trans 'Your password is now changed.' %} <span class="far fa-check-circle ms-1"></span>
+                    </p>
                 </div>
-
-
             </div>
         </div>
     </div>
diff --git a/templates/account/password_set.html b/templates/account/password_set.html
index 2cb77a42..e2325905 100644
--- a/templates/account/password_set.html
+++ b/templates/account/password_set.html
@@ -6,20 +6,20 @@
 {% endblock head_title %}
 {% block content %}
     {% element h1 %}
-        {% trans "Set Password" %}
-    {% endelement %}
-    {% url 'account_set_password' as action_url %}
-    {% element form method="post" action=action_url %}
-        {% slot body %}
-            {% csrf_token %}
-            {{ redirect_field }}
-            {% element fields form=form %}
-            {% endelement %}
-        {% endslot %}
-        {% slot actions %}
-            {% element button type="submit" name="action" %}
-                {% trans 'Set Password' %}
-            {% endelement %}
-        {% endslot %}
-    {% endelement %}
+    {% trans "Set Password" %}
+{% endelement %}
+{% url 'account_set_password' as action_url %}
+{% element form method="post" action=action_url %}
+{% slot body %}
+{% csrf_token %}
+{{ redirect_field }}
+{% element fields form=form %}
+{% endelement %}
+{% endslot %}
+{% slot actions %}
+{% element button type="submit" name="action" %}
+{% trans 'Set Password' %}
+{% endelement %}
+{% endslot %}
+{% endelement %}
 {% endblock content %}
diff --git a/templates/account/reauthenticate.html b/templates/account/reauthenticate.html
index d98c86a5..5e7b3e58 100644
--- a/templates/account/reauthenticate.html
+++ b/templates/account/reauthenticate.html
@@ -3,20 +3,20 @@
 {% load i18n %}
 {% block reauthenticate_content %}
     {% element p %}
-        {% blocktranslate %}Enter your password:{% endblocktranslate %}
-    {% endelement %}
-    {% url 'account_reauthenticate' as action_url %}
-    {% element form form=form method="post" action=action_url %}
-        {% slot body %}
-            {% csrf_token %}
-            {% element fields form=form unlabeled=True %}
-            {% endelement %}
-            {{ redirect_field }}
-        {% endslot %}
-        {% slot actions %}
-            {% element button type="submit" tags="primary,reauthenticate" %}
-                {% trans "Confirm" %}
-            {% endelement %}
-        {% endslot %}
-    {% endelement %}
+    {% blocktranslate %}Enter your password:{% endblocktranslate %}
+{% endelement %}
+{% url 'account_reauthenticate' as action_url %}
+{% element form form=form method="post" action=action_url %}
+{% slot body %}
+{% csrf_token %}
+{% element fields form=form unlabeled=True %}
+{% endelement %}
+{{ redirect_field }}
+{% endslot %}
+{% slot actions %}
+{% element button type="submit" tags="primary,reauthenticate" %}
+{% trans "Confirm" %}
+{% endelement %}
+{% endslot %}
+{% endelement %}
 {% endblock %}
diff --git a/templates/account/request_login_code.html b/templates/account/request_login_code.html
index 8b9b0152..6d331faf 100644
--- a/templates/account/request_login_code.html
+++ b/templates/account/request_login_code.html
@@ -6,27 +6,27 @@
 {% endblock head_title %}
 {% block content %}
     {% element h1 %}
-        {% translate "Mail me a sign-in code" %}
-    {% endelement %}
-    {% element p %}
-        {% blocktranslate %}You will receive an email containing a special code for a password-free sign-in.{% endblocktranslate %}
-    {% endelement %}
-    {% url 'account_request_login_code' as login_url %}
-    {% element form form=form method="post" action=login_url tags="entrance,login" %}
-        {% slot body %}
-            {% csrf_token %}
-            {% element fields form=form unlabeled=True %}
-            {% endelement %}
-            {{ redirect_field }}
-        {% endslot %}
-        {% slot actions %}
-            {% element button type="submit" tags="prominent,login" %}
-                {% translate "Request Code" %}
-            {% endelement %}
-        {% endslot %}
-    {% endelement %}
-    {% url 'account_login' as login_url %}
-    {% element button href=login_url tags="link" %}
-        {% translate "Other sign-in options" %}
-    {% endelement %}
+    {% translate "Mail me a sign-in code" %}
+{% endelement %}
+{% element p %}
+{% blocktranslate %}You will receive an email containing a special code for a password-free sign-in.{% endblocktranslate %}
+{% endelement %}
+{% url 'account_request_login_code' as login_url %}
+{% element form form=form method="post" action=login_url tags="entrance,login" %}
+{% slot body %}
+{% csrf_token %}
+{% element fields form=form unlabeled=True %}
+{% endelement %}
+{{ redirect_field }}
+{% endslot %}
+{% slot actions %}
+{% element button type="submit" tags="prominent,login" %}
+{% translate "Request Code" %}
+{% endelement %}
+{% endslot %}
+{% endelement %}
+{% url 'account_login' as login_url %}
+{% element button href=login_url tags="link" %}
+{% translate "Other sign-in options" %}
+{% endelement %}
 {% endblock content %}
diff --git a/templates/account/signup-wizard-copy.html b/templates/account/signup-wizard-copy.html
index 1ca17e0e..5c33c76e 100644
--- a/templates/account/signup-wizard-copy.html
+++ b/templates/account/signup-wizard-copy.html
@@ -1,96 +1,184 @@
 {% extends "welcome_base.html" %}
 {% load crispy_forms_filters %}
 {% load i18n static %}
-
-
 {% block content %}
-  <section class="main my-2">
-    <div class="container-fluid">
-      <div class="row form-container" id="form-container">
-
-        <div class="col-12 "><a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
-          <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
-            <img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
-            <img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
-          </div>
-        </a>
-          <div class="text-center">
-            <h3 class="text-body-highlight">{% trans 'Sign Up' %}</h3>
-            <p class="text-body-tertiary fs-9">{% trans 'Create your account today' %}</p>
-          </div>
-
-          <div class="card theme-wizard" data-theme-wizard="data-theme-wizard">
-            <div class="card-header pt-3 pb-2 ">
-              <ul class="nav justify-content-between nav-wizard nav-wizard-success" role="tablist">
-                <li class="nav-item" role="presentation"><a class="nav-link active fw-semibold" href="#bootstrap-wizard-validation-tab1" data-bs-toggle="tab" data-wizard-step="1" aria-selected="true" role="tab">
-                  <div class="text-center d-inline-block"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-lock"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Access' %}</span></div>
-                </a></li>
-                <li class="nav-item" role="presentation"><a class="nav-link fw-semibold" href="#bootstrap-wizard-validation-tab2" data-bs-toggle="tab" data-wizard-step="2" aria-selected="false" tabindex="-1" role="tab">
-                  <div class="text-center d-inline-block"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-user"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Account' %}</span></div>
-                </a></li>
-                <li class="nav-item" role="presentation"><a class="nav-link fw-semibold" href="#bootstrap-wizard-validation-tab3" data-bs-toggle="tab" data-wizard-step="3" aria-selected="false" tabindex="-1" role="tab">
-                  <div class="text-center d-inline-block"><span class="nav-item-circle-parent"><span class="nav-item-circle"><svg class="fa fa-file-lines"></svg></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Extra' %}</span></div>
-                </a></li>
-                <li class="nav-item" role="presentation"><a class="nav-link fw-semibold" href="#bootstrap-wizard-validation-tab4" data-bs-toggle="tab" data-wizard-step="4" aria-selected="false" tabindex="-1" role="tab">
-                  <div class="text-center d-inline-block"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-check"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Done' %}</span></div>
-                </a></li>
-              </ul>
-            </div>
-            <div class="card-body pt-4 pb-0">
-              <div class="tab-content">
-                <div class="tab-pane active" role="tabpanel" aria-labelledby="bootstrap-wizard-validation-tab1" id="bootstrap-wizard-validation-tab1">
-                  <form class="needs-validation" id="wizardValidationForm1" novalidate="novalidate" data-wizard-form="1">
-                    {{form1|crispy}}
-                    <a class="fs-10 text-decoration-none" href="{% url 'terms_and_privacy' %}" target="_blank">{{ _("Read Terms of Service and Privacy Policy")}}</a>
-                  </form>
-                </div>
-                <div class="tab-pane" role="tabpanel" aria-labelledby="bootstrap-wizard-validation-tab2" id="bootstrap-wizard-validation-tab2">
-                  <form class="needs-validation" id="wizardValidationForm2" novalidate="novalidate" data-wizard-form="2">
-                    {{form2|crispy}}
-                  </form>
-                </div>
-                <div class="tab-pane" role="tabpanel" aria-labelledby="bootstrap-wizard-validation-tab3" id="bootstrap-wizard-validation-tab3">
-                  <form class="needs-validation" id="wizardValidationForm3" novalidate="novalidate" data-wizard-form="3">
-                    {{form3|crispy}}
-                  </form>
-                </div>
-                <div class="tab-pane" role="tabpanel" aria-labelledby="bootstrap-wizard-validation-tab4" id="bootstrap-wizard-validation-tab4">
-                  <div class="row flex-center pb-8 pt-4 gx-3 gy-4">
-                    <div class="col-12 col-sm-auto">
-                      <div class="text-center text-sm-start"><img class="d-dark-none" src="{% static 'images/spot-illustrations/38.webp' %}" alt="" width="220"><img class="d-light-none" src="{% static 'images/spot-illustrations/dark_38.webp' %}" alt="" width="220"></div>
+    <section class="main my-2">
+        <div class="container-fluid">
+            <div class="row form-container" id="form-container">
+                <div class="col-12 ">
+                    <a class="d-flex flex-center text-decoration-none mb-4"
+                       href="{% url 'home' %}">
+                        <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
+                            <img class="d-dark-none"
+                                 src="{% static 'images/logos/logo-d.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
+                            <img class="d-light-none"
+                                 src="{% static 'images/logos/logo.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
+                        </div>
+                    </a>
+                    <div class="text-center">
+                        <h3 class="text-body-highlight">{% trans 'Sign Up' %}</h3>
+                        <p class="text-body-tertiary fs-9">{% trans 'Create your account today' %}</p>
                     </div>
-                    <div class="col-12 col-sm-auto">
-                      <div class="text-center text-sm-start">
-                        <h5 class="mb-3">{% trans 'You are all set!' %}</h5>
-                        <p class="text-body-emphasis fs-9">{% trans 'Now you can access your account' %}<br>{% trans 'anytime' %} {% trans 'anywhere' %}</p><button class="btn btn-primary px-6" id='submit_btn'>{% trans 'Submit' %}</button>
-                      </div>
+                    <div class="card theme-wizard" data-theme-wizard="data-theme-wizard">
+                        <div class="card-header pt-3 pb-2 ">
+                            <ul class="nav justify-content-between nav-wizard nav-wizard-success"
+                                role="tablist">
+                                <li class="nav-item" role="presentation">
+                                    <a class="nav-link active fw-semibold"
+                                       href="#bootstrap-wizard-validation-tab1"
+                                       data-bs-toggle="tab"
+                                       data-wizard-step="1"
+                                       aria-selected="true"
+                                       role="tab">
+                                        <div class="text-center d-inline-block">
+                                            <span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-lock"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Access' %}</span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="nav-item" role="presentation">
+                                    <a class="nav-link fw-semibold"
+                                       href="#bootstrap-wizard-validation-tab2"
+                                       data-bs-toggle="tab"
+                                       data-wizard-step="2"
+                                       aria-selected="false"
+                                       tabindex="-1"
+                                       role="tab">
+                                        <div class="text-center d-inline-block">
+                                            <span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-user"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Account' %}</span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="nav-item" role="presentation">
+                                    <a class="nav-link fw-semibold"
+                                       href="#bootstrap-wizard-validation-tab3"
+                                       data-bs-toggle="tab"
+                                       data-wizard-step="3"
+                                       aria-selected="false"
+                                       tabindex="-1"
+                                       role="tab">
+                                        <div class="text-center d-inline-block">
+                                            <span class="nav-item-circle-parent"><span class="nav-item-circle">
+                                                <svg class="fa fa-file-lines">
+                                                </svg>
+                                            </span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Extra' %}</span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="nav-item" role="presentation">
+                                    <a class="nav-link fw-semibold"
+                                       href="#bootstrap-wizard-validation-tab4"
+                                       data-bs-toggle="tab"
+                                       data-wizard-step="4"
+                                       aria-selected="false"
+                                       tabindex="-1"
+                                       role="tab">
+                                        <div class="text-center d-inline-block">
+                                            <span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-check"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Done' %}</span>
+                                        </div>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="card-body pt-4 pb-0">
+                            <div class="tab-content">
+                                <div class="tab-pane active"
+                                     role="tabpanel"
+                                     aria-labelledby="bootstrap-wizard-validation-tab1"
+                                     id="bootstrap-wizard-validation-tab1">
+                                    <form class="needs-validation"
+                                          id="wizardValidationForm1"
+                                          novalidate="novalidate"
+                                          data-wizard-form="1">
+                                        {{ form1|crispy }}
+                                        <a class="fs-10 text-decoration-none"
+                                           href="{% url 'terms_and_privacy' %}"
+                                           target="_blank">{{ _("Read Terms of Service and Privacy Policy") }}</a>
+                                    </form>
+                                </div>
+                                <div class="tab-pane"
+                                     role="tabpanel"
+                                     aria-labelledby="bootstrap-wizard-validation-tab2"
+                                     id="bootstrap-wizard-validation-tab2">
+                                    <form class="needs-validation"
+                                          id="wizardValidationForm2"
+                                          novalidate="novalidate"
+                                          data-wizard-form="2">
+                                        {{ form2|crispy }}
+                                    </form>
+                                </div>
+                                <div class="tab-pane"
+                                     role="tabpanel"
+                                     aria-labelledby="bootstrap-wizard-validation-tab3"
+                                     id="bootstrap-wizard-validation-tab3">
+                                    <form class="needs-validation"
+                                          id="wizardValidationForm3"
+                                          novalidate="novalidate"
+                                          data-wizard-form="3">
+                                        {{ form3|crispy }}
+                                    </form>
+                                </div>
+                                <div class="tab-pane"
+                                     role="tabpanel"
+                                     aria-labelledby="bootstrap-wizard-validation-tab4"
+                                     id="bootstrap-wizard-validation-tab4">
+                                    <div class="row flex-center pb-8 pt-4 gx-3 gy-4">
+                                        <div class="col-12 col-sm-auto">
+                                            <div class="text-center text-sm-start">
+                                                <img class="d-dark-none"
+                                                     src="{% static 'images/spot-illustrations/38.webp' %}"
+                                                     alt=""
+                                                     width="220">
+                                                <img class="d-light-none"
+                                                     src="{% static 'images/spot-illustrations/dark_38.webp' %}"
+                                                     alt=""
+                                                     width="220">
+                                            </div>
+                                        </div>
+                                        <div class="col-12 col-sm-auto">
+                                            <div class="text-center text-sm-start">
+                                                <h5 class="mb-3">{% trans 'You are all set!' %}</h5>
+                                                <p class="text-body-emphasis fs-9">
+                                                    {% trans 'Now you can access your account' %}
+                                                    <br>
+                                                    {% trans 'anytime' %} {% trans 'anywhere' %}
+                                                </p>
+                                                <button class="btn btn-primary px-6" id='submit_btn'>{% trans 'Submit' %}</button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="card-footer border-top-0"
+                             data-wizard-footer="data-wizard-footer">
+                            <div class="d-flex pager wizard list-inline mb-0">
+                                <button class="d-none btn btn-link ps-0"
+                                        type="button"
+                                        data-wizard-prev-btn="data-wizard-prev-btn">{% trans 'Previous' %}</button>
+                                <div class="flex-1 text-end">
+                                    <button class="btn btn-phoenix-primary px-6 px-sm-6 next"
+                                            type="submit"
+                                            data-wizard-next-btn="data-wizard-next-btn">{% trans 'Next' %}</button>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                  </div>
                 </div>
-              </div>
             </div>
-            <div class="card-footer border-top-0" data-wizard-footer="data-wizard-footer">
-              <div class="d-flex pager wizard list-inline mb-0">
-                <button class="d-none btn btn-link ps-0" type="button" data-wizard-prev-btn="data-wizard-prev-btn">{% trans 'Previous' %}</button>
-                <div class="flex-1 text-end">
-                  <button class="btn btn-phoenix-primary px-6 px-sm-6 next" type="submit" data-wizard-next-btn="data-wizard-next-btn">{% trans 'Next' %}</button>
-                </div>
-              </div>
-            </div>
-          </div>
         </div>
-      </div>
-    </div>
-  </section>
-  <section class="pt-lg-0 pt-xl-8">
-    {% include 'footer.html' %}
-  </section>
-  <script src="{% static 'js/phoenix.js' %}"></script>
+    </section>
+    <section class="pt-lg-0 pt-xl-8">
+        {% include 'footer.html' %}
+    </section>
+    <script src="{% static 'js/phoenix.js' %}"></script>
 {% endblock content %}
-
 {% block customJS %}
-  <script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>
-  <script>
+    <script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>
+    <script>
     const validator = new JustValidate('#wizardValidationForm1', {
       validateBeforeSubmitting: true,
     });
@@ -282,6 +370,5 @@
       }
       return cookieValue;
     }
-  </script>
-
-{% endblock customJS %}
\ No newline at end of file
+    </script>
+{% endblock customJS %}
diff --git a/templates/account/signup-wizard.html b/templates/account/signup-wizard.html
index 959d5e1d..52dac1a7 100644
--- a/templates/account/signup-wizard.html
+++ b/templates/account/signup-wizard.html
@@ -1,219 +1,325 @@
 {% extends "welcome_base.html" %}
 {% load crispy_forms_filters %}
 {% load i18n static %}
-
-
 {% block content %}
-
-  <section class="main my-2">
-    <div class="container" style="max-width:60rem;">
-      <div class="row form-container" id="form-container">
-
-        <div class="col-12 "><a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
-          <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
-            <img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
-            <img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
-          </div>
-        </a>
-          <div class="text-center">
-            <h3 class="text-body-highlight">{% trans 'Sign Up' %}</h3>
-            <p class="text-body-tertiary fs-9">{% trans 'Create your account today' %}</p>
-          </div>
-
-          <div
-          data-signals="{
-            form1:{email:'',password:'',confirm_password:''},
-            form2:{name:'',arabic_name:'',phone_number:''},
-            form3:{crn:'',vrn:'',address:''},
-            form1_valid:true,
-            form2_valid:true,
-            form3_valid:true,
-            email_valid:true,
-            password_valid:true,
-            phone_number_valid:true
-          }"
-           class="card theme-wizard" data-theme-wizard="data-theme-wizard">
-            <div class="card-header pt-3 pb-2 ">
-              <ul class="nav justify-content-between nav-wizard nav-wizard-success" role="tablist">
-                <li class="nav-item" role="presentation"><a class="nav-link active fw-semibold" href="#bootstrap-wizard-validation-tab1" data-bs-toggle="tab" data-wizard-step="1" aria-selected="true" role="tab">
-                  <div class="text-center d-inline-block"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-lock"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Access' %}</span></div>
-                </a></li>
-                <li class="nav-item" role="presentation"><a class="nav-link fw-semibold" href="#bootstrap-wizard-validation-tab2" data-bs-toggle="tab" data-wizard-step="2" aria-selected="false" tabindex="-1" role="tab">
-                  <div class="text-center d-inline-block"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-user"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Account' %}</span></div>
-                </a></li>
-                <li class="nav-item" role="presentation"><a class="nav-link fw-semibold" href="#bootstrap-wizard-validation-tab3" data-bs-toggle="tab" data-wizard-step="3" aria-selected="false" tabindex="-1" role="tab">
-                  <div class="text-center d-inline-block"><span class="nav-item-circle-parent"><span class="nav-item-circle"><svg class="fa fa-file-lines"></svg></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Extra' %}</span></div>
-                </a></li>
-                <li class="nav-item" role="presentation"><a class="nav-link fw-semibold" href="#bootstrap-wizard-validation-tab4" data-bs-toggle="tab" data-wizard-step="4" aria-selected="false" tabindex="-1" role="tab">
-                  <div class="text-center d-inline-block"><span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-check"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Done' %}</span></div>
-                </a></li>
-              </ul>
+    <section class="main my-2">
+        <div class="container" style="max-width:60rem;">
+            <div class="row form-container" id="form-container">
+                <div class="col-12 ">
+                    <a class="d-flex flex-center text-decoration-none mb-4"
+                       href="{% url 'home' %}">
+                        <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
+                            <img class="d-dark-none"
+                                 src="{% static 'images/logos/logo-d.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
+                            <img class="d-light-none"
+                                 src="{% static 'images/logos/logo.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
+                        </div>
+                    </a>
+                    <div class="text-center">
+                        <h3 class="text-body-highlight">{% trans 'Sign Up' %}</h3>
+                        <p class="text-body-tertiary fs-9">{% trans 'Create your account today' %}</p>
+                    </div>
+                    <div data-signals="{ form1:{email:'',password:'',confirm_password:''}, form2:{name:'',arabic_name:'',phone_number:''}, form3:{crn:'',vrn:'',address:''}, form1_valid:true, form2_valid:true, form3_valid:true, email_valid:true, password_valid:true, phone_number_valid:true }"
+                         class="card theme-wizard"
+                         data-theme-wizard="data-theme-wizard">
+                        <div class="card-header pt-3 pb-2 ">
+                            <ul class="nav justify-content-between nav-wizard nav-wizard-success"
+                                role="tablist">
+                                <li class="nav-item" role="presentation">
+                                    <a class="nav-link active fw-semibold"
+                                       href="#bootstrap-wizard-validation-tab1"
+                                       data-bs-toggle="tab"
+                                       data-wizard-step="1"
+                                       aria-selected="true"
+                                       role="tab">
+                                        <div class="text-center d-inline-block">
+                                            <span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-lock"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Access' %}</span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="nav-item" role="presentation">
+                                    <a class="nav-link fw-semibold"
+                                       href="#bootstrap-wizard-validation-tab2"
+                                       data-bs-toggle="tab"
+                                       data-wizard-step="2"
+                                       aria-selected="false"
+                                       tabindex="-1"
+                                       role="tab">
+                                        <div class="text-center d-inline-block">
+                                            <span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-user"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Account' %}</span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="nav-item" role="presentation">
+                                    <a class="nav-link fw-semibold"
+                                       href="#bootstrap-wizard-validation-tab3"
+                                       data-bs-toggle="tab"
+                                       data-wizard-step="3"
+                                       aria-selected="false"
+                                       tabindex="-1"
+                                       role="tab">
+                                        <div class="text-center d-inline-block">
+                                            <span class="nav-item-circle-parent"><span class="nav-item-circle">
+                                                <svg class="fa fa-file-lines">
+                                                </svg>
+                                            </span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Extra' %}</span>
+                                        </div>
+                                    </a>
+                                </li>
+                                <li class="nav-item" role="presentation">
+                                    <a class="nav-link fw-semibold"
+                                       href="#bootstrap-wizard-validation-tab4"
+                                       data-bs-toggle="tab"
+                                       data-wizard-step="4"
+                                       aria-selected="false"
+                                       tabindex="-1"
+                                       role="tab">
+                                        <div class="text-center d-inline-block">
+                                            <span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-check"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Done' %}</span>
+                                        </div>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="card-body pt-4 pb-0">
+                            <div class="tab-content" data-signals-current_form="1">
+                                <div class="tab-pane active"
+                                     role="tabpanel"
+                                     aria-labelledby="bootstrap-wizard-validation-tab1"
+                                     id="bootstrap-wizard-validation-tab1">
+                                    <form class="needs-validation"
+                                          id="wizardValidationForm1"
+                                          novalidate="novalidate"
+                                          data-wizard-form="1"
+                                          data-ref-f1>
+                                        <div class="mb-3">
+                                            <label for="email"
+                                                   data-class="{'text-danger':!$email_valid}"
+                                                   class="form-label">
+                                                {% trans "Email" %}
+                                                <span data-show="!$email_valid" class="text-danger">*</span>
+                                            </label>
+                                            <input data-on-input="$email_valid = validateEmail($form1.email)"
+                                                   data-on-blur="$email_valid = validateEmail($form1.email)"
+                                                   data-bind-form1.email
+                                                   data-class="{'is-invalid': !$email_valid , 'is-valid': ($email_valid && $form1.email)}"
+                                                   type="email"
+                                                   class="form-control"
+                                                   id="email"
+                                                   name="email"
+                                                   required>
+                                            <div class="invalid-feedback" data-show="!$email_valid">{% trans "Please enter a valid email address" %}</div>
+                                        </div>
+                                        <div class="mb-3">
+                                            <label for="password" class="form-label">{% trans "Password" %}</label>
+                                            <input data-bind-form1.password
+                                                   type="password"
+                                                   data-on-input="$password_valid = validatePassword($form1.password,$form1.confirm_password)"
+                                                   data-on-blur="$password_valid = validatePassword($form1.password,$form1.confirm_password)"
+                                                   class="form-control"
+                                                   data-class="{'is-invalid':($form1.password.length && $form1.password.length < 8),'is-valid':$form1.password.length > 8 }"
+                                                   id="password"
+                                                   name="password"
+                                                   required>
+                                            <div class="invalid-feedback" data-show="!$password_valid">
+                                                {% trans "Password does not match. or length is less than 8 characters." %}
+                                            </div>
+                                        </div>
+                                        <div class="mb-3">
+                                            <label for="confirm_password" class="form-label">{% trans "Confirm Password" %}</label>
+                                            <span class="text-danger" data-show="!$password_valid">*</span>
+                                            <input data-bind-form1.confirm_password
+                                                   data-on-input="$password_valid = validatePassword($form1.password,$form1.confirm_password)"
+                                                   data-on-blur="$password_valid = validatePassword($form1.password,$form1.confirm_password)"
+                                                   type="password"
+                                                   class="form-control"
+                                                   data-class="{'is-invalid':!$password_valid,'is-valid':($password_valid&& $form1.confirm_password)}"
+                                                   id="confirm_password"
+                                                   name="confirm_password"
+                                                   required>
+                                            <div class="invalid-feedback" data-show="!$password_valid">
+                                                {% trans "Password does not match. or length is less than 8 characters." %}
+                                            </div>
+                                        </div>
+                                    </form>
+                                </div>
+                                <div class="tab-pane"
+                                     role="tabpanel"
+                                     aria-labelledby="bootstrap-wizard-validation-tab2"
+                                     id="bootstrap-wizard-validation-tab2">
+                                    <form class="needs-validation"
+                                          id="wizardValidationForm2"
+                                          novalidate="novalidate"
+                                          data-wizard-form="2"
+                                          data-ref-f2>
+                                        <div class="mb-3">
+                                            <label for="name" class="form-label">{% trans "Name" %}</label>
+                                            <input data-bind-form2.name
+                                                   type="text"
+                                                   class="form-control"
+                                                   id="name"
+                                                   name="name"
+                                                   required>
+                                        </div>
+                                        <div class="mb-3">
+                                            <label for="arabic_name" class="form-label">{% trans "Arabic Name" %}</label>
+                                            <input data-bind-form2.arabic_name
+                                                   type="text"
+                                                   class="form-control"
+                                                   id="arabic_name"
+                                                   name="arabic_name"
+                                                   required>
+                                        </div>
+                                        <div class="mb-3">
+                                            <label for="phone_number" class="form-label">{% trans "Phone Number" %}</label>
+                                            <span data-show="!$phone_number_valid" class="text-danger">*</span>
+                                            <input data-bind-form2.phone_number
+                                                   type="tel"
+                                                   data-class="{'is-invalid':!$phone_number_valid}"
+                                                   class="form-control"
+                                                   id="phone_number"
+                                                   name="phone_number"
+                                                   required
+                                                   data-on-input="$phone_number_valid = validate_sa_phone_number($form2.phone_number)">
+                                            <div class="invalid-feedback" data-show="!$phone_number_valid">{% trans "Please enter a valid phone number" %}</div>
+                                        </div>
+                                    </form>
+                                </div>
+                                <div class="tab-pane"
+                                     role="tabpanel"
+                                     aria-labelledby="bootstrap-wizard-validation-tab3"
+                                     id="bootstrap-wizard-validation-tab3">
+                                    <form class="needs-validation"
+                                          id="wizardValidationForm3"
+                                          novalidate="novalidate"
+                                          data-wizard-form="3"
+                                          data-ref-f3>
+                                        <div class="mb-3">
+                                            <label for="crn" class="form-label">{% trans "CRN" %}</label>
+                                            <input data-bind-form3.crn
+                                                   type="text"
+                                                   class="form-control"
+                                                   id="crn"
+                                                   name="crn"
+                                                   required>
+                                        </div>
+                                        <div class="mb-3">
+                                            <label for="vrn" class="form-label">{% trans "VRN" %}</label>
+                                            <input data-bind-form3.vrn
+                                                   type="text"
+                                                   class="form-control"
+                                                   id="vrn"
+                                                   name="vrn"
+                                                   required>
+                                        </div>
+                                        <div class="mb-3">
+                                            <label for="address" class="form-label">{% trans "Address" %}</label>
+                                            <textarea data-bind-form3.address
+                                                      class="form-control"
+                                                      id="address"
+                                                      name="address"
+                                                      required></textarea>
+                                        </div>
+                                    </form>
+                                </div>
+                                <div class="tab-pane"
+                                     role="tabpanel"
+                                     aria-labelledby="bootstrap-wizard-validation-tab4"
+                                     id="bootstrap-wizard-validation-tab4">
+                                    <div class="row flex-center pb-8 pt-4 gx-3 gy-4">
+                                        <div class="col-12 col-sm-auto">
+                                            <div class="text-center text-sm-start">
+                                                <img class="d-dark-none"
+                                                     src="{% static 'images/spot-illustrations/38.webp' %}"
+                                                     alt=""
+                                                     width="220">
+                                                <img class="d-light-none"
+                                                     src="{% static 'images/spot-illustrations/dark_38.webp' %}"
+                                                     alt=""
+                                                     width="220">
+                                            </div>
+                                        </div>
+                                        <div class="col-12 col-sm-auto">
+                                            <div class="text-center text-sm-start">
+                                                <h5 class="mb-3">{% trans 'You are all set!' %}</h5>
+                                                <p class="text-body-emphasis fs-9">
+                                                    {% trans 'Now you can access your account' %}
+                                                    <br>
+                                                    {% trans 'anytime' %} {% trans 'anywhere' %}
+                                                </p>
+                                                <button data-on-click="sendFormData()"
+                                                        class="btn btn-primary px-6"
+                                                        id='submit_btn'>{% trans 'Submit' %}</button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div data-computed-form1_valid="validatePassword($form1.password,$form1.confirm_password) && validateEmail($form1.email)"
+                             class="card-footer border-top-0"
+                             data-wizard-footer="data-wizard-footer">
+                            <div class="d-flex pager wizard list-inline mb-0">
+                                <button class="d-none btn btn-link ps-0"
+                                        type="button"
+                                        data-wizard-prev-btn="data-wizard-prev-btn">{% trans 'Previous' %}</button>
+                                <div class="flex-1 text-end">
+                                    <button data-attr-disabled="!$form1_valid"
+                                            data-attr-disabled="!$phone_number_valid"
+                                            class="btn btn-phoenix-primary px-6 px-sm-6 next"
+                                            type="button"
+                                            id="next_btn"
+                                            data-wizard-next-btn="data-wizard-next-btn">{% trans 'Next' %}</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div class="card-body pt-4 pb-0">
-              <div class="tab-content" data-signals-current_form="1">
-                <div class="tab-pane active" role="tabpanel" aria-labelledby="bootstrap-wizard-validation-tab1" id="bootstrap-wizard-validation-tab1">
-                  <form class="needs-validation" id="wizardValidationForm1" novalidate="novalidate" data-wizard-form="1" data-ref-f1>
-                    <div class="mb-3">
-                      <label
-                        for="email"
-                        data-class="{'text-danger':!$email_valid}"
-                        class="form-label">{% trans "Email"%}
-                        <span
-                        data-show="!$email_valid"
-                        class="text-danger">*</span>
-                    </label>
-                      <input
-                        data-on-input="$email_valid = validateEmail($form1.email)"
-                        data-on-blur="$email_valid = validateEmail($form1.email)"
-                        data-bind-form1.email
-                        data-class="{'is-invalid': !$email_valid , 'is-valid': ($email_valid && $form1.email)}"
-                        type="email"
-                        class="form-control"
-                        id="email"
-                        name="email"
-                        required>
-                      <div class="invalid-feedback" data-show="!$email_valid">
-                        {% trans "Please enter a valid email address" %}
-                      </div>
-                    </div>
-                    <div class="mb-3">
-                      <label for="password" class="form-label">{% trans "Password" %}</label>
-                      <input
-                        data-bind-form1.password
-                        type="password"
-                        data-on-input="$password_valid = validatePassword($form1.password,$form1.confirm_password)"
-                        data-on-blur="$password_valid = validatePassword($form1.password,$form1.confirm_password)"
-                        class="form-control"
-                        data-class="{'is-invalid':($form1.password.length && $form1.password.length < 8),'is-valid':$form1.password.length > 8 }"
-                        id="password"
-                        name="password"
-                        required>
-                      <div class="invalid-feedback" data-show="!$password_valid">
-                        {% trans "Password does not match. or length is less than 8 characters." %}
-                      </div>
-                    </div>
-                    <div class="mb-3">
-                      <label for="confirm_password" class="form-label">{% trans "Confirm Password" %}</label><span class="text-danger" data-show="!$password_valid">*</span>
-                      <input
-                        data-bind-form1.confirm_password
-                        data-on-input="$password_valid = validatePassword($form1.password,$form1.confirm_password)"
-                        data-on-blur="$password_valid = validatePassword($form1.password,$form1.confirm_password)"
-                        type="password"
-                        class="form-control"
-                        data-class="{'is-invalid':!$password_valid,'is-valid':($password_valid&& $form1.confirm_password)}"
-                        id="confirm_password"
-                        name="confirm_password"
-                        required>
-                      <div class="invalid-feedback" data-show="!$password_valid">
-                        {% trans "Password does not match. or length is less than 8 characters." %}
-                      </div>
-                    </div>
-                  </form>
-                </div>
-                <div class="tab-pane" role="tabpanel" aria-labelledby="bootstrap-wizard-validation-tab2" id="bootstrap-wizard-validation-tab2">
-                  <form class="needs-validation" id="wizardValidationForm2" novalidate="novalidate" data-wizard-form="2" data-ref-f2>
-                    <div class="mb-3">
-                      <label for="name" class="form-label">{% trans "Name" %}</label>
-                      <input data-bind-form2.name type="text" class="form-control" id="name" name="name" required>
-                    </div>
-                    <div class="mb-3">
-                      <label for="arabic_name" class="form-label">{% trans "Arabic Name" %}</label>
-                      <input data-bind-form2.arabic_name type="text" class="form-control" id="arabic_name" name="arabic_name" required>
-                    </div>
-                    <div class="mb-3">
-                      <label for="phone_number" class="form-label">{% trans "Phone Number" %}</label><span data-show="!$phone_number_valid" class="text-danger">*</span>
-                      <input data-bind-form2.phone_number type="tel" data-class="{'is-invalid':!$phone_number_valid}" class="form-control" id="phone_number" name="phone_number" required
-                        data-on-input="$phone_number_valid = validate_sa_phone_number($form2.phone_number)"
-                      >
-                      <div class="invalid-feedback" data-show="!$phone_number_valid">
-                        {% trans "Please enter a valid phone number" %}
-                      </div>
-                    </div>
-                  </form>
-                </div>
-                <div class="tab-pane" role="tabpanel" aria-labelledby="bootstrap-wizard-validation-tab3" id="bootstrap-wizard-validation-tab3">
-                  <form class="needs-validation" id="wizardValidationForm3" novalidate="novalidate" data-wizard-form="3" data-ref-f3>
-                    <div class="mb-3">
-                      <label for="crn" class="form-label">{% trans "CRN" %}</label>
-                      <input data-bind-form3.crn type="text" class="form-control" id="crn" name="crn" required>
-                    </div>
-                    <div class="mb-3">
-                      <label for="vrn" class="form-label">{% trans "VRN" %}</label>
-                      <input data-bind-form3.vrn type="text" class="form-control" id="vrn" name="vrn" required>
-                    </div>
-                    <div class="mb-3">
-                      <label for="address" class="form-label">{% trans "Address" %}</label>
-                      <textarea data-bind-form3.address class="form-control" id="address" name="address" required></textarea>
-                    </div>
-                  </form>
-                </div>
-                <div class="tab-pane" role="tabpanel" aria-labelledby="bootstrap-wizard-validation-tab4" id="bootstrap-wizard-validation-tab4">
-                  <div class="row flex-center pb-8 pt-4 gx-3 gy-4">
-                    <div class="col-12 col-sm-auto">
-                      <div class="text-center text-sm-start"><img class="d-dark-none" src="{% static 'images/spot-illustrations/38.webp' %}" alt="" width="220"><img class="d-light-none" src="{% static 'images/spot-illustrations/dark_38.webp' %}" alt="" width="220"></div>
-                    </div>
-                    <div class="col-12 col-sm-auto">
-                      <div class="text-center text-sm-start">
-                        <h5 class="mb-3">{% trans 'You are all set!' %}</h5>
-                        <p class="text-body-emphasis fs-9">{% trans 'Now you can access your account' %}<br>{% trans 'anytime' %} {% trans 'anywhere' %}</p><button data-on-click="sendFormData()" class="btn btn-primary px-6" id='submit_btn'>{% trans 'Submit' %}</button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div data-computed-form1_valid="validatePassword($form1.password,$form1.confirm_password) && validateEmail($form1.email)" class="card-footer border-top-0" data-wizard-footer="data-wizard-footer">
-              <div class="d-flex pager wizard list-inline mb-0">
-                <button class="d-none btn btn-link ps-0" type="button" data-wizard-prev-btn="data-wizard-prev-btn">{% trans 'Previous' %}</button>
-                <div class="flex-1 text-end">
-                  <button data-attr-disabled="!$form1_valid" data-attr-disabled="!$phone_number_valid" class="btn btn-phoenix-primary px-6 px-sm-6 next" type="button" id="next_btn" data-wizard-next-btn="data-wizard-next-btn">{% trans 'Next' %}</button>
-                </div>
-              </div>
-            </div>
-          </div>
         </div>
-      </div>
-    </div>
-  </section>
-  <section class="pt-lg-0 pt-xl-8">
-    {% include 'footer.html' %}
-</section>
-<script src="{% static 'js/phoenix.js' %}"></script>
-  {% endblock content %}
-
-  {% block customJS %}
+    </section>
+    <section class="pt-lg-0 pt-xl-8">
+        {% include 'footer.html' %}
+    </section>
+    <script src="{% static 'js/phoenix.js' %}"></script>
+{% endblock content %}
+{% block customJS %}
     <script src="{% static 'js/main.js' %}"></script>
     <script src="{% static 'js/sweetalert2.all.min.js' %}"></script>
-
-  <script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.11/bundles/datastar.js"></script>
-  <script>
+    <script type="module"
+            src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.11/bundles/datastar.js"></script>
+    <script>
     function validatePassword(password, confirmPassword) {
-        return password === confirmPassword && password.length > 7 && password !== '';
+      return password === confirmPassword && password.length > 7 && password !== '';
     }
     function validateEmail(email) {
-        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-        return emailRegex.test(email) && email !== '';
+      const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+      return emailRegex.test(email) && email !== '';
     }
     function validateform2(name,arabic_name,phone_number) {
-        if (name === '' || arabic_name === '' || phone_number === '' || phone_number.length < 10 || !phone_number.startsWith('056')) {
-            return false;
-        }
-        return true
+      if (name === '' || arabic_name === '' || phone_number === '' || phone_number.length < 10 || !phone_number.startsWith('056')) {
+        return false;
+      }
+      return true
     }
     function validate_sa_phone_number(phone_number) {
-        const phone_numberRegex = /^056[0-9]{7}$/;
-        return phone_numberRegex.test(phone_number) && phone_numberRegex !== '';
+      const phone_numberRegex = /^056[0-9]{7}$/;
+      return phone_numberRegex.test(phone_number) && phone_numberRegex !== '';
     }
     function getAllFormData() {
-        const forms = document.querySelectorAll('.needs-validation');
-        const formData = {};
-        forms.forEach(form => {
-            const fields = form.querySelectorAll('input,textarea,select');
-            fields.forEach(field => {
-                formData[field.name] = field.value;
-            });
+      const forms = document.querySelectorAll('.needs-validation');
+      const formData = {};
+      forms.forEach(form => {
+        const fields = form.querySelectorAll('input,textarea,select');
+        fields.forEach(field => {
+          formData[field.name] = field.value;
         });
-        return formData;
+      });
+      return formData;
     }
 
     function showLoading() {
@@ -237,7 +343,7 @@
         titleText: msg
       });
     }
-     function getCookie(name) {
+    function getCookie(name) {
       let cookieValue = null;
       if (document.cookie && document.cookie !== "") {
         const cookies = document.cookie.split(";");
@@ -252,32 +358,32 @@
       return cookieValue;
     }
     async function sendFormData() {
-        const formData = getAllFormData();
-        const url = "{% url 'account_signup' %}";
-        const csrftoken = getCookie('csrftoken');
-        try {
-            showLoading();
-            const response = await fetch(url, {
-                method: 'POST',
-                headers: {
-                    'X-CSRFToken': '{{csrf_token}}',
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(formData),
-            });
-            hideLoading();
-            const data = await response.json();
-            if (response.ok) {
-                notify("success","Account created successfully");
-                setTimeout(() => {
-                    window.location.href = "{% url 'account_login' %}";
-                }, 1000);
-            } else {
-                notify("error",data.error);
-            }
-        } catch (error) {
-            notify("error",error);
+      const formData = getAllFormData();
+      const url = "{% url 'account_signup' %}";
+      const csrftoken = getCookie('csrftoken');
+      try {
+        showLoading();
+        const response = await fetch(url, {
+          method: 'POST',
+          headers: {
+            'X-CSRFToken': '{{csrf_token}}',
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(formData),
+        });
+        hideLoading();
+        const data = await response.json();
+        if (response.ok) {
+          notify("success","Account created successfully");
+          setTimeout(() => {
+            window.location.href = "{% url 'account_login' %}";
+          }, 1000);
+        } else {
+          notify("error",data.error);
         }
+      } catch (error) {
+        notify("error",error);
+      }
     }
-  </script>
-{% endblock customJS %}
\ No newline at end of file
+    </script>
+{% endblock customJS %}
diff --git a/templates/account/signup.html b/templates/account/signup.html
index 391ad7b3..6b44d13e 100644
--- a/templates/account/signup.html
+++ b/templates/account/signup.html
@@ -1,18 +1,25 @@
 {% extends "base.html" %}
 {% load crispy_forms_filters %}
-{% load allauth i18n static%}
-
-{% block title %}{{ _("Sign Up") }}{% endblock title %}
-
+{% load allauth i18n static %}
+{% block title %}
+    {{ _("Sign Up") }}
+{% endblock title %}
 {% block content %}
     <div class="row">
         <div class="row min-vh-100 text-center">
             <div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
-                <a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
+                <a class="d-flex flex-center text-decoration-none mb-4"
+                   href="{% url 'home' %}">
                     <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
                         <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
-                            <img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
-                            <img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
+                            <img class="d-dark-none"
+                                 src="{% static 'images/logos/logo-d.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
+                            <img class="d-light-none"
+                                 src="{% static 'images/logos/logo.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
                         </div>
                     </div>
                 </a>
@@ -20,74 +27,76 @@
                     <h3 class="text-body-highlight">Sign Up</h3>
                     <p class="text-body-tertiary">Create your account today</p>
                 </div>
-            <!-- Passkey Signup -->
+                <!-- Passkey Signup -->
                 {% if PASSKEY_SIGNUP_ENABLED %}
                     <hr class="my-4">
                     <div class="d-grid gap-2">
-                        <a href="{{ signup_by_passkey_url }}" class="btn btn-outline-primary btn-lg">
-                            {{ _("Sign up using a passkey") }}
-                        </a>
+                        <a href="{{ signup_by_passkey_url }}"
+                           class="btn btn-outline-primary btn-lg">{{ _("Sign up using a passkey") }}</a>
                     </div>
                 {% endif %}
-
-            <!-- Social Signup -->
+                <!-- Social Signup -->
                 {% if SOCIALACCOUNT_ENABLED %}
-
                     {% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
                 {% endif %}
-
                 <!-- Sign Up Form -->
                 {% if not SOCIALACCOUNT_ONLY %}
-                    <form method="post" action="{% url 'account_signup' %}" class="needs-validation" novalidate>
+                    <form method="post"
+                          action="{% url 'account_signup' %}"
+                          class="needs-validation"
+                          novalidate>
                         {% csrf_token %}
                         {{ redirect_field }}
                         <div class="mb-3">
                             <label for="id_email" class="form-label">{{ form.email.label }}</label>
-                            <input type="email" class="form-control" id="id_email" name="email" placeholder="name@example.com">
-                            {% if form.email.errors %}
-                                <div class="text-danger">{{ form.email.errors|striptags }}</div>
-                            {% endif %}
+                            <input type="email"
+                                   class="form-control"
+                                   id="id_email"
+                                   name="email"
+                                   placeholder="name@example.com">
+                            {% if form.email.errors %}<div class="text-danger">{{ form.email.errors|striptags }}</div>{% endif %}
                         </div>
-
                         <div class="mb-3">
                             <label for="id_password1" class="form-label">{{ form.password1.label }}</label>
                             <div class="position-relative" data-password="data-password">
-                                <input type="password" class="form-control form-icon-input pe-6" id="id_password1" name="password1" data-password-input="data-password-input" placeholder="Password">
-                                <a class="btn px-3 py-0 h-100 position-absolute top-0 end-0 fs-7 text-body-tertiary" data-password-toggle="data-password-toggle"><span class="uil uil-eye show"></span><span class="uil uil-eye-slash hide"></span></a>
+                                <input type="password"
+                                       class="form-control form-icon-input pe-6"
+                                       id="id_password1"
+                                       name="password1"
+                                       data-password-input="data-password-input"
+                                       placeholder="Password">
+                                <a class="btn px-3 py-0 h-100 position-absolute top-0 end-0 fs-7 text-body-tertiary"
+                                   data-password-toggle="data-password-toggle"><span class="uil uil-eye show"></span><span class="uil uil-eye-slash hide"></span></a>
                             </div>
-                            {% if form.password1.errors %}
-                                <div class="text-danger">{{ form.password1.errors|striptags }}</div>
-                            {% endif %}
+                            {% if form.password1.errors %}<div class="text-danger">{{ form.password1.errors|striptags }}</div>{% endif %}
                         </div>
-
                         <div class="mb-3">
                             <label for="id_password2" class="form-label">{{ form.password2.label }}</label>
                             <div class="position-relative" data-password="data-password">
-                                <input type="password" class="form-control form-icon-input pe-6" id="id_password2" name="password2" data-password-input="data-password-input" placeholder="Confirm Password">
-                                <a class="btn px-3 py-0 h-100 position-absolute top-0 end-0 fs-7 text-body-tertiary" data-password-toggle="data-password-toggle"><span class="uil uil-eye show"></span><span class="uil uil-eye-slash hide"></span></a>
+                                <input type="password"
+                                       class="form-control form-icon-input pe-6"
+                                       id="id_password2"
+                                       name="password2"
+                                       data-password-input="data-password-input"
+                                       placeholder="Confirm Password">
+                                <a class="btn px-3 py-0 h-100 position-absolute top-0 end-0 fs-7 text-body-tertiary"
+                                   data-password-toggle="data-password-toggle"><span class="uil uil-eye show"></span><span class="uil uil-eye-slash hide"></span></a>
                             </div>
-                            {% if form.password2.errors %}
-                                <div class="text-danger">{{ form.password2.errors|striptags }}</div>
-                            {% endif %}
+                            {% if form.password2.errors %}<div class="text-danger">{{ form.password2.errors|striptags }}</div>{% endif %}
                         </div>
-
                         <div class="form-check mb-3">
-
                             <input class="form-check-input" id="termsService" type="checkbox" />
-                            <label class="form-label fs-9 text-transform-none" for="termsService">I accept the <a href="">terms </a>and <a href="">privacy policy</a></label>
+                            <label class="form-label fs-9 text-transform-none" for="termsService">
+                                I accept the <a href="">terms</a>and <a href="">privacy policy</a>
+                            </label>
                         </div>
                         <button type="submit"  class="btn btn-phoenix-primary w-100 mb-3">{{ _("Sign Up") }}</button>
-                        <div class="text-center">{% trans 'Already have an account?' %}<a class="fw-bold" href="{% url 'account_login' %}"> {{ _("Sign In") }}</a></div>
+                        <div class="text-center">
+                            {% trans 'Already have an account?' %}<a class="fw-bold" href="{% url 'account_login' %}">{{ _("Sign In") }}</a>
+                        </div>
                     </form>
                 {% endif %}
             </div>
         </div>
     </div>
-
-
-
-
-
-
-
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
diff --git a/templates/account/snippets/already_logged_in.html b/templates/account/snippets/already_logged_in.html
index 320f40f5..f2a7cb62 100644
--- a/templates/account/snippets/already_logged_in.html
+++ b/templates/account/snippets/already_logged_in.html
@@ -2,10 +2,8 @@
 {% load account %}
 {% load allauth %}
 {% user_display user as user_display %}
-
 <div class="alert alert-phoenix-danger d-flex fs-9" role="alert">
-  <span class="fas fa-info-circle fs-8 me-3"></span>
-  <strong>{% trans 'Note' %}:</strong>
-  {% blocktranslate %}You are already logged in as {{ user_display }}.{% endblocktranslate %}
+    <span class="fas fa-info-circle fs-8 me-3"></span>
+    <strong>{% trans 'Note' %}:</strong>
+    {% blocktranslate %}You are already logged in as {{ user_display }}.{% endblocktranslate %}
 </div>
-
diff --git a/templates/account/snippets/warn_no_email.html b/templates/account/snippets/warn_no_email.html
index 83668df6..e8d9dc8b 100644
--- a/templates/account/snippets/warn_no_email.html
+++ b/templates/account/snippets/warn_no_email.html
@@ -1,4 +1,4 @@
 {% load i18n allauth %}
 {% element p %}
-    <strong>{% trans 'Warning:' %}</strong> {% trans "You currently do not have any email address set up. You should really add an email address so you can receive notifications, reset your password, etc." %}
+<strong>{% trans 'Warning:' %}</strong> {% trans "You currently do not have any email address set up. You should really add an email address so you can receive notifications, reset your password, etc." %}
 {% endelement %}
diff --git a/templates/account/user_settings.html b/templates/account/user_settings.html
index 9842c9bb..87afc407 100644
--- a/templates/account/user_settings.html
+++ b/templates/account/user_settings.html
@@ -3,49 +3,35 @@
 {% load i18n static %}
 {% load allauth account %}
 {% block title %}
-  {% trans 'User Settings' %}
+    {% trans 'User Settings' %}
 {% endblock %}
 {% block content %}
-  <form action="" method="post">
-    {% csrf_token %}
-    <div class="col-12 col-xl-8">
-      <div class=" mb-4">
-
-        <div class="row gx-3 mb-4 gy-6 gy-sm-3">
-          <div class="col-12 col-sm-8">
-            <h4 class="mb-4">Default Invoice Accounts</h4>
-            <div class="form-icon-container mb-3">
-              {{ form.invoice_cash_account|as_crispy_field }}
+    <form action="" method="post">
+        {% csrf_token %}
+        <div class="col-12 col-xl-8">
+            <div class=" mb-4">
+                <div class="row gx-3 mb-4 gy-6 gy-sm-3">
+                    <div class="col-12 col-sm-8">
+                        <h4 class="mb-4">Default Invoice Accounts</h4>
+                        <div class="form-icon-container mb-3">{{ form.invoice_cash_account|as_crispy_field }}</div>
+                        <div class="form-icon-container mb-3">{{ form.invoice_prepaid_account|as_crispy_field }}</div>
+                        <div class="form-icon-container mb-3">{{ form.invoice_unearned_account|as_crispy_field }}</div>
+                    </div>
+                </div>
+                <div class="row gx-3 mb-4 gy-6 gy-sm-3">
+                    <div class="col-12 col-sm-8">
+                        <h4 class="mb-4">Default Bill Accounts</h4>
+                        <div class="form-icon-container mb-3">{{ form.bill_cash_account|as_crispy_field }}</div>
+                        <div class="form-icon-container mb-3">{{ form.bill_prepaid_account|as_crispy_field }}</div>
+                        <div class="form-icon-container mb-3">{{ form.bill_unearned_account|as_crispy_field }}</div>
+                    </div>
+                </div>
+                <div class="text-start mb-6">
+                    <div>
+                        <button type="submit" class="btn btn-phoenix-primary">Update</button>
+                    </div>
+                </div>
             </div>
-            <div class="form-icon-container mb-3">
-              {{ form.invoice_prepaid_account|as_crispy_field }}
-            </div>
-            <div class="form-icon-container mb-3">
-              {{ form.invoice_unearned_account|as_crispy_field }}
-            </div>
-          </div>
         </div>
-        <div class="row gx-3 mb-4 gy-6 gy-sm-3">
-          <div class="col-12 col-sm-8">
-            <h4 class="mb-4">Default Bill Accounts</h4>
-            <div class="form-icon-container mb-3">
-              {{ form.bill_cash_account|as_crispy_field }}
-            </div>
-            <div class="form-icon-container mb-3">
-              {{ form.bill_prepaid_account|as_crispy_field }}
-            </div>
-            <div class="form-icon-container mb-3">
-              {{ form.bill_unearned_account|as_crispy_field }}
-            </div>
-          </div>
-        </div>
-
-        <div class="text-start mb-6">
-          <div>
-            <button type="submit" class="btn btn-phoenix-primary">Update</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-{% endblock %}
\ No newline at end of file
+    </form>
+{% endblock %}
diff --git a/templates/account/verfied_email_required.html b/templates/account/verfied_email_required.html
index 644c041d..8a5c8547 100644
--- a/templates/account/verfied_email_required.html
+++ b/templates/account/verfied_email_required.html
@@ -1,25 +1,27 @@
 {% extends "base.html" %}
-{% load i18n static%}
+{% load i18n static %}
 {% load allauth %}
 {% block head_title %}
     {% trans "Verify Your Email Address" %}
 {% endblock head_title %}
-
 {% block content %}
     <div class="row">
         <div class="row flex-center min-vh-50 py-5">
             <div class="col-sm-10 col-md-8 col-lg-5 col-xxl-4">
-                <a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
+                <a class="d-flex flex-center text-decoration-none mb-4"
+                   href="{% url 'home' %}">
                     <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
-                        <img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
-                        <img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
+                        <img class="d-dark-none"
+                             src="{% static 'images/logos/logo-d.png' %}"
+                             alt="{% trans 'home' %}"
+                             width="58" />
+                        <img class="d-light-none"
+                             src="{% static 'images/logos/logo.png' %}"
+                             alt="{% trans 'home' %}"
+                             width="58" />
                     </div>
                 </a>
-                <h3>
-                    {% trans "Verify Your Email Address" %}
-                </h3>
-
-
+                <h3>{% trans "Verify Your Email Address" %}</h3>
                 <p>
                     {% blocktrans %}We have sent an email to you for verification. Follow the link provided to finalize the signup process. If you do not see the verification email in your main inbox, check your spam folder. Please contact us if you do not receive the verification email within a few minutes.{% endblocktrans %}
                 </p>
diff --git a/templates/account/verification_sent.html b/templates/account/verification_sent.html
index a0710439..8a5c8547 100644
--- a/templates/account/verification_sent.html
+++ b/templates/account/verification_sent.html
@@ -8,16 +8,20 @@
     <div class="row">
         <div class="row flex-center min-vh-50 py-5">
             <div class="col-sm-10 col-md-8 col-lg-5 col-xxl-4">
-                <a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
+                <a class="d-flex flex-center text-decoration-none mb-4"
+                   href="{% url 'home' %}">
                     <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
-                        <img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
-                        <img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
+                        <img class="d-dark-none"
+                             src="{% static 'images/logos/logo-d.png' %}"
+                             alt="{% trans 'home' %}"
+                             width="58" />
+                        <img class="d-light-none"
+                             src="{% static 'images/logos/logo.png' %}"
+                             alt="{% trans 'home' %}"
+                             width="58" />
                     </div>
                 </a>
-                <h3>
-                    {% trans "Verify Your Email Address" %}
-                </h3>
-
+                <h3>{% trans "Verify Your Email Address" %}</h3>
                 <p>
                     {% blocktrans %}We have sent an email to you for verification. Follow the link provided to finalize the signup process. If you do not see the verification email in your main inbox, check your spam folder. Please contact us if you do not receive the verification email within a few minutes.{% endblocktrans %}
                 </p>
diff --git a/templates/account/verified_email_required.html b/templates/account/verified_email_required.html
index 01e54180..6579c3ff 100644
--- a/templates/account/verified_email_required.html
+++ b/templates/account/verified_email_required.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load i18n static%}
+{% load i18n static %}
 {% load allauth %}
 {% block head_title %}
     {% trans "Verify Your Email Address" %}
@@ -8,16 +8,20 @@
     <div class="row">
         <div class="row flex-center min-vh-50 py-5">
             <div class="col-sm-10 col-md-8 col-lg-5 col-xxl-4">
-                <a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
+                <a class="d-flex flex-center text-decoration-none mb-4"
+                   href="{% url 'home' %}">
                     <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
-                        <img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
-                        <img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
+                        <img class="d-dark-none"
+                             src="{% static 'images/logos/logo-d.png' %}"
+                             alt="{% trans 'home' %}"
+                             width="58" />
+                        <img class="d-light-none"
+                             src="{% static 'images/logos/logo.png' %}"
+                             alt="{% trans 'home' %}"
+                             width="58" />
                     </div>
                 </a>
-                <h3>
-                    {% trans "Verify Your Email Address" %}
-                </h3>
-
+                <h3>{% trans "Verify Your Email Address" %}</h3>
                 {% url 'account_email' as email_url %}
                 <p>
                     {% blocktrans %}This part of the site requires us to verify that
diff --git a/templates/admin_management/auth_logs.html b/templates/admin_management/auth_logs.html
index cd636844..7c6c9cf3 100644
--- a/templates/admin_management/auth_logs.html
+++ b/templates/admin_management/auth_logs.html
@@ -1,7 +1,8 @@
-
 {% extends "base.html" %}
 {% load i18n custom_filters %}
-{% block title %}{% trans "Accounts" %}{% endblock title %}
+{% block title %}
+    {% trans "Accounts" %}
+{% endblock title %}
 {% block accounts %}
     <a class="nav-link active fw-bold">
         {% trans "Accounts"|capfirst %}
@@ -10,18 +11,17 @@
 {% endblock %}
 {% block content %}
     <div class="row mt-4">
-
         <div class="d-flex justify-content-between mb-2">
-            <h3 class=""><i class="fas fa-right-to-bracket me-2"></i> {% trans "Audit Log Dashboard" %}</h3>
+            <h3 class="">
+                <i class="fas fa-right-to-bracket me-2"></i> {% trans "Audit Log Dashboard" %}
+            </h3>
         </div>
-
         <!-- Log Type Tabs -->
         <div class="mb-4">
             {% include 'admin_management/nav.html' %}
-
-            <div class="tab-content p-3 border border-top-0 rounded-bottom" id="accountTypeTabsContent">
+            <div class="tab-content p-3 border border-top-0 rounded-bottom"
+                 id="accountTypeTabsContent">
                 <!-- modellogs Tab -->
-
                 {% if page_obj %}
                     <div class="table-responsive px-1 scrollbar mt-3">
                         <table class= "table align-items-center table-flush table-hover">
@@ -37,38 +37,23 @@
                             <tbody class="list">
                                 {% for event in page_obj.object_list %}
                                     <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-
-                                        <td class="align-middle product white-space-nowrap">{{event.datetime}}</td>
+                                        <td class="align-middle product white-space-nowrap">{{ event.datetime }}</td>
                                         <td class="align-middle product white-space-nowrap">{{ event.user.username|default:"N/A" }}</td>
-                                        <td class="align-middle product white-space-nowrap">{{ event.get_login_type_display}}</td>
-                                        <td class="align-middle product white-space-nowrap">{{ event.username}}</td>
-                                        <td class="align-middle product white-space-nowrap">{{ event.remote_ip}}</td>
-
+                                        <td class="align-middle product white-space-nowrap">{{ event.get_login_type_display }}</td>
+                                        <td class="align-middle product white-space-nowrap">{{ event.username }}</td>
+                                        <td class="align-middle product white-space-nowrap">{{ event.remote_ip }}</td>
                                     </tr>
                                 {% endfor %}
                             </tbody>
                         </table>
                     </div>
-
-
                     <div class="d-flex justify-content-end mt-3">
-                        <div class="d-flex">
-                            {% include 'partials/pagination.html' with q='loginEvents' %}
-                        </div>
+                        <div class="d-flex">{% include 'partials/pagination.html' with q='loginEvents' %}</div>
                     </div>
-
                 {% else %}
                     <p>No authentication audit events found.</p>
                 {% endif %}
-
-
-
             </div>
         </div>
     </div>
-
-
-
-
 {% endblock %}
-
diff --git a/templates/admin_management/confirm_activate_account.html b/templates/admin_management/confirm_activate_account.html
index 135e128a..1f8e06e4 100644
--- a/templates/admin_management/confirm_activate_account.html
+++ b/templates/admin_management/confirm_activate_account.html
@@ -1,4 +1,3 @@
-
 {% extends 'base.html' %}
 {% load i18n %}
 {% load crispy_forms_filters %}
@@ -16,37 +15,27 @@
             </form>
         </div>
     </div> {% endcomment %}
-
-
     <!---->
-     <div class="row justify-content-center mt-5 mb-3">
-
-       <div class="col-lg-8 col-md-10">
-         <div class="card shadow-sm border-0 rounded-3">
-            <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
-                    <h3 class="mb-0 fs-4 text-center text-white">
-                        {% trans 'Activate Account'%}
-                   </h3>
-            </div>
-            <div class="card-body bg-light-subtle">
-                <p class="text-center">Are you sure you want to activate this account "{{ obj.email }}"?</p>
-                
-                <form method="post">
-                   {% csrf_token %}
-                   <hr class="my-2">
-                    <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-3">
-                         <button class="btn btn-lg btn-phoenix-primary md-me-2" type="submit">{{ _("Activate") }}</button>
-                         <a class="btn btn-lg btn-phoenix-danger mx-2" href="{% url 'user_management' request.dealer.slug %}">Cancel</a>
-                    </div>
-              </form>
-
-               
-
+    <div class="row justify-content-center mt-5 mb-3">
+        <div class="col-lg-8 col-md-10">
+            <div class="card shadow-sm border-0 rounded-3">
+                <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
+                    <h3 class="mb-0 fs-4 text-center text-white">{% trans 'Activate Account' %}</h3>
+                </div>
+                <div class="card-body bg-light-subtle">
+                    <p class="text-center">Are you sure you want to activate this account "{{ obj.email }}"?</p>
+                    <form method="post">
+                        {% csrf_token %}
+                        <hr class="my-2">
+                        <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-3">
+                            <button class="btn btn-lg btn-phoenix-primary md-me-2" type="submit">{{ _("Activate") }}</button>
+                            <a class="btn btn-lg btn-phoenix-danger mx-2"
+                               href="{% url 'user_management' request.dealer.slug %}">Cancel</a>
+                        </div>
+                    </form>
+                </div>
             </div>
         </div>
-
-       </div>
-
-   </div>
+    </div>
     <!---->
 {% endblock %}
diff --git a/templates/admin_management/management.html b/templates/admin_management/management.html
index b352d6d1..d79103e3 100644
--- a/templates/admin_management/management.html
+++ b/templates/admin_management/management.html
@@ -1,29 +1,28 @@
 {% extends "base.html" %}
 {% load i18n %}
-{%block title%} {%trans 'Admin Management' %}  {%endblock%}
-{% block content %}
-    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-4 mt-10">
-        <div class="col">
-            <a href="{% url 'user_management' request.dealer.slug %}">
-                <div class="card h-100">
-                    <div class="card-header text-center">
-                        <h5 class="card-title">{{ _("User Management")}}</h5>
-                        <span class="me-2"><i class="fas fa-user fa-2x"></i></span>
+{% block title %}
+    {% trans 'Admin Management' %}  {% endblock %}
+    {% block content %}
+        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-4 mt-10">
+            <div class="col">
+                <a href="{% url 'user_management' request.dealer.slug %}">
+                    <div class="card h-100">
+                        <div class="card-header text-center">
+                            <h5 class="card-title">{{ _("User Management") }}</h5>
+                            <span class="me-2"><i class="fas fa-user fa-2x"></i></span>
+                        </div>
                     </div>
-                </div>
-            </a>
-        </div>
-        <div class="col">
-            <a href="{% url 'audit_log_dashboard' request.dealer.slug %}">
-                <div class="card h-100">
-                    <div class="card-header text-center">
-                        <h5 class="card-title">{{ _("Audit Log  Dashboard")}}</h5>
-                        <span class="me-2"><i class="fas fa-user fa-2x"></i></span>
+                </a>
+            </div>
+            <div class="col">
+                <a href="{% url 'audit_log_dashboard' request.dealer.slug %}">
+                    <div class="card h-100">
+                        <div class="card-header text-center">
+                            <h5 class="card-title">{{ _("Audit Log  Dashboard") }}</h5>
+                            <span class="me-2"><i class="fas fa-user fa-2x"></i></span>
+                        </div>
                     </div>
-                </div>
-            </a>
+                </a>
+            </div>
         </div>
-    </div>
-
-
-{% endblock content %}
\ No newline at end of file
+    {% endblock content %}
diff --git a/templates/admin_management/model_logs.html b/templates/admin_management/model_logs.html
index 26c3b7ff..42b16ae9 100644
--- a/templates/admin_management/model_logs.html
+++ b/templates/admin_management/model_logs.html
@@ -1,7 +1,8 @@
-
 {% extends "base.html" %}
 {% load i18n custom_filters %}
-{% block title %}{% trans "Accounts" %}{% endblock title %}
+{% block title %}
+    {% trans "Accounts" %}
+{% endblock title %}
 {% block accounts %}
     <a class="nav-link active fw-bold">
         {% trans "Accounts"|capfirst %}
@@ -10,18 +11,17 @@
 {% endblock %}
 {% block content %}
     <div class="row mt-4">
-
         <div class="d-flex justify-content-between mb-2">
-            <h3 class=""><i class="fas fa-history me-2"></i>{% trans "Audit Log Dashboard" %}</h3>
+            <h3 class="">
+                <i class="fas fa-history me-2"></i>{% trans "Audit Log Dashboard" %}
+            </h3>
         </div>
-
         <!-- Log Type Tabs -->
         <div class="mb-4">
             {% include 'admin_management/nav.html' %}
-
-            <div class="tab-content p-3 border border-top-0 rounded-bottom" id="accountTypeTabsContent">
+            <div class="tab-content p-3 border border-top-0 rounded-bottom"
+                 id="accountTypeTabsContent">
                 <!-- modellogs Tab -->
-
                 {% if page_obj %}
                     <div class="table-responsive px-1 scrollbar mt-3">
                         <table class="table align-items-center table-flush table-hover mt-3">
@@ -33,51 +33,53 @@
                                     <th>{% trans "Model" %}</th>
                                     <th>{% trans "Object ID" %}</th>
                                     <th>{% trans "Object Representation" %}</th>
-                                    <th>{% trans "Field" %}</th>      {# Dedicated column for field name #}
-                                    <th>{% trans "Old Value" %}</th> {# Dedicated column for old value #}
-                                    <th>{% trans "New Value" %}</th> {# Dedicated column for new value #}
+                                    <th>{% trans "Field" %}</th>
+                                    {# Dedicated column for field name #}
+                                    <th>{% trans "Old Value" %}</th>
+                                    {# Dedicated column for old value #}
+                                    <th>{% trans "New Value" %}</th>
+                                    {# Dedicated column for new value #}
                                 </tr>
                             </thead>
                             <tbody>
-                                {% for event in page_obj.object_list  %}
+                                {% for event in page_obj.object_list %}
                                     {% if event.field_changes %}
-                    {# Loop through each individual field change for this event #}
+                                        {# Loop through each individual field change for this event #}
                                         {% for change in event.field_changes %}
                                             <tr>
-                            {# Display common event details using rowspan for the first change #}
+                                                {# Display common event details using rowspan for the first change #}
                                                 {% if forloop.first %}
-                                                    <td rowspan="{{ event.field_changes|length }}">
-                                                        {{ event.datetime|date:"Y-m-d H:i:s" }}
-                                                    </td>
-                                                    <td rowspan="{{ event.field_changes|length }}">
-                                                        {{ event.user.username|default:"Anonymous" }}
-                                                    </td>
-                                                    <td rowspan="{{ event.field_changes|length }}">
-                                                        {{ event.event_type_display }}
-                                                    </td>
-                                                    <td rowspan="{{ event.field_changes|length }}">
-                                                        {{ event.model_name|title }}
-                                                    </td>
-                                                    <td rowspan="{{ event.field_changes|length }}">
-                                                        {{ event.object_id }}
-                                                    </td>
-                                                    <td rowspan="{{ event.field_changes|length }}">
-                                                        {{ event.object_repr }}
-                                                    </td>
+                                                    <td rowspan="{{ event.field_changes|length }}">{{ event.datetime|date:"Y-m-d H:i:s" }}</td>
+                                                    <td rowspan="{{ event.field_changes|length }}">{{ event.user.username|default:"Anonymous" }}</td>
+                                                    <td rowspan="{{ event.field_changes|length }}">{{ event.event_type_display }}</td>
+                                                    <td rowspan="{{ event.field_changes|length }}">{{ event.model_name|title }}</td>
+                                                    <td rowspan="{{ event.field_changes|length }}">{{ event.object_id }}</td>
+                                                    <td rowspan="{{ event.field_changes|length }}">{{ event.object_repr }}</td>
                                                 {% endif %}
-
-                            {# Display the specific field change details in their own columns #}
-                                                <td><strong>{{ change.field }}</strong></td>
+                                                {# Display the specific field change details in their own columns #}
+                                                <td>
+                                                    <strong>{{ change.field }}</strong>
+                                                </td>
                                                 <td>
                                                     {% if change.old is not None %}
-                                            <pre style="white-space: pre-wrap; word-break: break-all; font-size: 0.85em; background-color: #f8f9fa; padding: 5px; border-radius: 3px;">{{ change.old }}</pre>
+                                                        <pre style="white-space: pre-wrap;
+                                                                    word-break: break-all;
+                                                                    font-size: 0.85em;
+                                                                    background-color: #f8f9fa;
+                                                                    padding: 5px;
+                                                                    border-radius: 3px">{{ change.old }}</pre>
                                                     {% else %}
                                                         (None)
                                                     {% endif %}
                                                 </td>
                                                 <td>
                                                     {% if change.new is not None %}
-                                          <pre style="white-space: pre-wrap; word-break: break-all; font-size: 0.85em; background-color: #f8f9fa; padding: 5px; border-radius: 3px;">{{ change.new }}</pre>
+                                                        <pre style="white-space: pre-wrap;
+                                                                    word-break: break-all;
+                                                                    font-size: 0.85em;
+                                                                    background-color: #f8f9fa;
+                                                                    padding: 5px;
+                                                                    border-radius: 3px">{{ change.new }}</pre>
                                                     {% else %}
                                                         (None)
                                                     {% endif %}
@@ -85,7 +87,7 @@
                                             </tr>
                                         {% endfor %}
                                     {% else %}
-                    {# Fallback for events with no specific field changes (e.g., CREATE, DELETE) #}
+                                        {# Fallback for events with no specific field changes (e.g., CREATE, DELETE) #}
                                         <tr>
                                             <td>{{ event.datetime|date:"Y-m-d H:i:s" }}</td>
                                             <td>{{ event.user.username|default:"Anonymous" }}</td>
@@ -93,7 +95,7 @@
                                             <td>{{ event.model_name|title }}</td>
                                             <td>{{ event.object_id }}</td>
                                             <td>{{ event.object_repr }}</td>
-                        {# Span the 'Field', 'Old Value', 'New Value' columns #}
+                                            {# Span the 'Field', 'Old Value', 'New Value' columns #}
                                             <td>
                                                 {% if event.event_type_display == "Create" %}
                                                     {% trans "Object created." %}
@@ -108,26 +110,14 @@
                                 {% endfor %}
                             </tbody>
                         </table>
-
                     </div>
-
                     <div class="d-flex justify-content-end mt-3">
-                        <div class="d-flex">
-                            {% include 'partials/pagination.html' with q='userActions' %}
-                        </div>
+                        <div class="d-flex">{% include 'partials/pagination.html' with q='userActions' %}</div>
                     </div>
-
                 {% else %}
                     <p>{% trans "No model change audit events found." %}</p>
                 {% endif %}
-
-
             </div>
         </div>
     </div>
-
-
-
-
 {% endblock %}
-
diff --git a/templates/admin_management/nav.html b/templates/admin_management/nav.html
index 92571841..ffe9cfc7 100644
--- a/templates/admin_management/nav.html
+++ b/templates/admin_management/nav.html
@@ -1,6 +1,5 @@
 {% load i18n %}
 <ul class="nav nav-tabs" id="accountTypeTabs" role="tablist">
-
     <li class="nav-item me-3" role="presentation">
         <a href="{% url 'audit_log_dashboard' request.dealer.slug %}?q=userActions">
             <i class="fas fa-history me-2"></i>{% trans "User Actions" %}
diff --git a/templates/admin_management/permenant_delete_account.html b/templates/admin_management/permenant_delete_account.html
index 3bc83a78..92e1deff 100644
--- a/templates/admin_management/permenant_delete_account.html
+++ b/templates/admin_management/permenant_delete_account.html
@@ -14,38 +14,31 @@
             </form>
         </div>
     </div> {% endcomment %}
-
     <!---->
-
     <div class="row justify-content-center mt-5 mb-3">
-
-       <div class="col-lg-8 col-md-10">
-         <div class="card shadow-sm border-0 rounded-3">
-            <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
-                    <h3 class="mb-0 fs-4 text-center text-white">
-                        {% trans 'Delete Account'%}
-                   </h3>
-            </div>
-            <div class="card-body bg-light-subtle">
-                <p class="lead text-center">Are you sure you want to delete this account "{{ obj.email }}"? This will delete all associated information for this user.</p>
-                
-                <form method="post">
-                   {% csrf_token %}
-                   <hr class="my-2">
-                    <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-3">
-                         <button class="btn btn-lg btn-phoenix-danger md-me-2" type="submit"><i class="fas fa-trash me-2"></i>{{ _("Delete Permenantly") }}</button>
-                         <a class="btn btn-lg btn-phoenix-secondary mx-2" href="{% url 'user_management' request.dealer.slug %}"><i class="fas fa-ban me-2"></i>Cancel</a>
-                    </div>
-              </form>
-
-               
-
+        <div class="col-lg-8 col-md-10">
+            <div class="card shadow-sm border-0 rounded-3">
+                <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
+                    <h3 class="mb-0 fs-4 text-center text-white">{% trans 'Delete Account' %}</h3>
+                </div>
+                <div class="card-body bg-light-subtle">
+                    <p class="lead text-center">
+                        Are you sure you want to delete this account "{{ obj.email }}"? This will delete all associated information for this user.
+                    </p>
+                    <form method="post">
+                        {% csrf_token %}
+                        <hr class="my-2">
+                        <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-3">
+                            <button class="btn btn-lg btn-phoenix-danger md-me-2" type="submit">
+                                <i class="fas fa-trash me-2"></i>{{ _("Delete Permenantly") }}
+                            </button>
+                            <a class="btn btn-lg btn-phoenix-secondary mx-2"
+                               href="{% url 'user_management' request.dealer.slug %}"><i class="fas fa-ban me-2"></i>Cancel</a>
+                        </div>
+                    </form>
+                </div>
             </div>
         </div>
-
-       </div>
-
-   </div>
+    </div>
     <!---->
 {% endblock %}
-
diff --git a/templates/admin_management/request_logs.html b/templates/admin_management/request_logs.html
index 84d04f6f..df4d7ee6 100644
--- a/templates/admin_management/request_logs.html
+++ b/templates/admin_management/request_logs.html
@@ -1,7 +1,8 @@
-
 {% extends "base.html" %}
 {% load i18n custom_filters %}
-{% block title %}{% trans "Accounts" %}{% endblock title %}
+{% block title %}
+    {% trans "Accounts" %}
+{% endblock title %}
 {% block accounts %}
     <a class="nav-link active fw-bold">
         {% trans "Accounts"|capfirst %}
@@ -10,16 +11,16 @@
 {% endblock %}
 {% block content %}
     <div class="row mt-4">
-
         <div class="d-flex justify-content-between mb-2">
-            <h3 class=""><i class="fas fa-file-alt me-2"></i> {% trans "Audit Log Dashboard" %}</h3>
+            <h3 class="">
+                <i class="fas fa-file-alt me-2"></i> {% trans "Audit Log Dashboard" %}
+            </h3>
         </div>
-
         <!-- Log Type Tabs -->
         <div class="mb-4">
             {% include 'admin_management/nav.html' %}
-
-            <div class="tab-content p-3 border border-top-0 rounded-bottom" id="accountTypeTabsContent">
+            <div class="tab-content p-3 border border-top-0 rounded-bottom"
+                 id="accountTypeTabsContent">
                 <!-- modellogs Tab -->
                 {% if page_obj %}
                     <div class="table-responsive px-1 scrollbar mt-3">
@@ -36,34 +37,23 @@
                             <tbody class="list">
                                 {% for event in page_obj.object_list %}
                                     <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-
-                                        <td class="align-middle product white-space-nowrap">{{event.datetime}}</td>
+                                        <td class="align-middle product white-space-nowrap">{{ event.datetime }}</td>
                                         <td class="align-middle product white-space-nowrap">{{ event.user.username|default:"Anonymous" }}</td>
                                         <td class="align-middle product white-space-nowrap">{{ event.url }}</td>
-                                        <td class="align-middle product white-space-nowrap">{{ event.method}}</td>
-                                        <td class="align-middle product white-space-nowrap">{{ event.remote_ip}}</td>
-
+                                        <td class="align-middle product white-space-nowrap">{{ event.method }}</td>
+                                        <td class="align-middle product white-space-nowrap">{{ event.remote_ip }}</td>
                                     </tr>
                                 {% endfor %}
                             </tbody>
                         </table>
                     </div>
-
                     <div class="d-flex justify-content-end mt-3">
-                        <div class="d-flex">
-                            {% include 'partials/pagination.html' with q='userRequests' %}
-                        </div>
+                        <div class="d-flex">{% include 'partials/pagination.html' with q='userRequests' %}</div>
                     </div>
                 {% else %}
                     <p>No request audit events found.</p>
                 {% endif %}
-
             </div>
         </div>
     </div>
-
-
-
-
 {% endblock %}
-
diff --git a/templates/admin_management/user_management.html b/templates/admin_management/user_management.html
index 435039d2..756e25a9 100644
--- a/templates/admin_management/user_management.html
+++ b/templates/admin_management/user_management.html
@@ -1,271 +1,322 @@
 {% extends 'base.html' %}
 {% load i18n static humanize %}
-
 {% block title %}
-  {% trans 'User Management' %}
+    {% trans 'User Management' %}
 {% endblock title %}
-
 {% block content %}
-  <section class="pt-5 pb-9">
-    <div class="row">
-      <h2 class="mb-4"><i class="fa-solid fa-people-roof me-1"></i> {% trans 'User Management' %}</h2>
-      <div class="row g-3 justify-content-between mb-4">
-        <div class="col-12">
-          <h3 class="mb-3">{% trans 'Customers' %}</h3>
-          <div class="table-responsive scrollbar mx-n1 px-1">
-            <table class="table align-items-center table-flush table-hover">
-              <thead>
-                <tr class="bg-body-highlight">
-                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('First Name') }}</th>
-                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Last Name') }}</th>
-                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Email') }}</th>
-                  <th class="sort align-middle ps-4 pe-5 text-uppercase " scope="col" style="width:15%;">{{ _('Status') }}</th>
-                  <th class="sort align-middle ps-4 pe-5 text-uppercase" scope="col" style="width:15%;">{{ _('Created date') }}</th>
-                  <th class="sort text-end align-middle pe-0 ps-4" scope="col">{{ _('Actions') }}</th>
-                </tr>
-              </thead>
-              <tbody class="list" id="leal-tables-body">
-                {% for customer in customers %}
-                  <tr>
-                    <td class="ps-0">{{ customer.first_name }}</td>
-                    <td class="ps-0">{{ customer.last_name }}</td>
-                    <td class="ps-0">{{ customer.email }}</td>
-                    <td class="ps-0">
-                      {% if customer.active %}
-                        <span class="fas fa-check-circle text-success"></span> {{ _('Active') }}
-                      {% else %}
-                        <span class="fas fa-times-circle text-danger"></span> {{ _('Inactive') }}
-                      {% endif %}
-                    </td>
-                    <td class="ps-0">{{ customer.created|naturalday|capfirst }}</td>
-                    <td class="align-middle white-space-nowrap text-end">
-                      <div class="btn-reveal-trigger position-static">
-                        <button
-                          class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
-                          type="button"
-                          data-bs-toggle="dropdown"
-                          data-boundary="window"
-                          aria-haspopup="true"
-                          aria-expanded="false"
-                          data-bs-reference="parent">
-                          <span class="fas fa-ellipsis-h fs-10"></span>
-                        </button>
-                        <div class="dropdown-menu dropdown-menu-end py-2">
-                          <a href="{% url 'activate_account' request.dealer.slug 'customer' customer.slug %}"><button class="dropdown-item  text-primary">{% trans "Activate" %}</button></a>
-                          <div class="dropdown-divider"></div>
-                          <a href="{% url 'permenant_delete_account' request.dealer.slug 'customer' customer.slug %}"><button class="dropdown-item text-danger">{% trans "Permenantly Delete" %}</button></a>
+    <section class="pt-5 pb-9">
+        <div class="row">
+            <h2 class="mb-4">
+                <i class="fa-solid fa-people-roof me-1"></i> {% trans 'User Management' %}
+            </h2>
+            <div class="row g-3 justify-content-between mb-4">
+                <div class="col-12">
+                    <h3 class="mb-3">{% trans 'Customers' %}</h3>
+                    <div class="table-responsive scrollbar mx-n1 px-1">
+                        <table class="table align-items-center table-flush table-hover">
+                            <thead>
+                                <tr class="bg-body-highlight">
+                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
+                                        scope="col"
+                                        style="width:20%">{{ _("First Name") }}</th>
+                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
+                                        scope="col"
+                                        style="width:20%">{{ _("Last Name") }}</th>
+                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
+                                        scope="col"
+                                        style="width:20%">{{ _("Email") }}</th>
+                                    <th class="sort align-middle ps-4 pe-5 text-uppercase"
+                                        scope="col"
+                                        style="width:15%">{{ _("Status") }}</th>
+                                    <th class="sort align-middle ps-4 pe-5 text-uppercase"
+                                        scope="col"
+                                        style="width:15%">{{ _("Created date") }}</th>
+                                    <th class="sort text-end align-middle pe-0 ps-4" scope="col">{{ _("Actions") }}</th>
+                                </tr>
+                            </thead>
+                            <tbody class="list" id="leal-tables-body">
+                                {% for customer in customers %}
+                                    <tr>
+                                        <td class="ps-0">{{ customer.first_name }}</td>
+                                        <td class="ps-0">{{ customer.last_name }}</td>
+                                        <td class="ps-0">{{ customer.email }}</td>
+                                        <td class="ps-0">
+                                            {% if customer.active %}
+                                                <span class="fas fa-check-circle text-success"></span> {{ _("Active") }}
+                                            {% else %}
+                                                <span class="fas fa-times-circle text-danger"></span> {{ _("Inactive") }}
+                                            {% endif %}
+                                        </td>
+                                        <td class="ps-0">{{ customer.created|naturalday|capfirst }}</td>
+                                        <td class="align-middle white-space-nowrap text-end">
+                                            <div class="btn-reveal-trigger position-static">
+                                                <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
+                                                        type="button"
+                                                        data-bs-toggle="dropdown"
+                                                        data-boundary="window"
+                                                        aria-haspopup="true"
+                                                        aria-expanded="false"
+                                                        data-bs-reference="parent">
+                                                    <span class="fas fa-ellipsis-h fs-10"></span>
+                                                </button>
+                                                <div class="dropdown-menu dropdown-menu-end py-2">
+                                                    <a href="{% url 'activate_account' request.dealer.slug 'customer' customer.slug %}">
+                                                        <button class="dropdown-item  text-primary">{% trans "Activate" %}</button>
+                                                    </a>
+                                                    <div class="dropdown-divider"></div>
+                                                    <a href="{% url 'permenant_delete_account' request.dealer.slug 'customer' customer.slug %}">
+                                                        <button class="dropdown-item text-danger">{% trans "Permenantly Delete" %}</button>
+                                                    </a>
+                                                </div>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                {% empty %}
+                                    <td colspan="6" class="text-center">{% trans 'No data available in table' %}</td>
+                                {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="d-flex justify-content-end mt-3">
+                        <div class="d-flex">
+                            {% if is_paginated %}
+                                {% include 'partials/pagination.html' %}
+                            {% endif %}
                         </div>
-                      </div>
-                    </td>
-                  </tr>
-                {% empty %}
-                  <td colspan="6" class="text-center">{% trans 'No data available in table' %}</td>
-                {% endfor %}
-              </tbody>
-            </table>
-          </div>
-          <div class="d-flex justify-content-end mt-3">
-            <div class="d-flex">
-              {% if is_paginated %}
-                {% include 'partials/pagination.html' %}
-              {% endif %}
+                    </div>
+                </div>
             </div>
-          </div>
-        </div>
-      </div>
-      <div class="row mt-5">
-        <div class="col-12">
-          <h3 class="mb-3">{% trans 'Organizations' %}</h3>
-          <div class="table-responsive scrollbar mx-n1 px-1">
-            <table class="table align-items-center table-flush table-hover">
-              <thead>
-                <tr class="bg-body-highlight">
-                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Name') }}</th>
-                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Arabic Name') }}</th>
-                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Email') }}</th>
-                  <th class="sort align-middle ps-4 pe-5 text-uppercase " scope="col" style="width:15%;">{{ _('Status') }}</th>
-                  <th class="sort align-middle ps-4 pe-5 text-uppercase" scope="col" style="width:15%;">{{ _('Create date') }}</th>
-                  <th class="sort text-end align-middle pe-0 ps-4" scope="col">{{ _('Actions') }}</th>
-                </tr>
-              </thead>
-              <tbody class="list" id="leal-tables-body">
-                {% for organization in organizations %}
-                  <tr>
-                    <td class="ps-0">{{ organization.name }}</td>
-                    <td class="ps-0">{{ organization.arabic_name }}</td>
-                    <td class="ps-0">{{ organization.email }}</td>
-                    <td class="ps-0">
-                      {% if customer.active %}
-                        <span class="fas fa-check-circle text-success"></span> {{ _('Active') }}
-                      {% else %}
-                        <span class="fas fa-times-circle text-danger"></span> {{ _('Inactive') }}
-                      {% endif %}
-                    </td>
-                    <td class="ps-0">{{ organization.created|naturalday|capfirst }}</td>
-                    <td class="align-middle white-space-nowrap text-end">
-                      <div class="btn-reveal-trigger position-static">
-                        <button
-                          class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
-                          type="button"
-                          data-bs-toggle="dropdown"
-                          data-boundary="window"
-                          aria-haspopup="true"
-                          aria-expanded="false"
-                          data-bs-reference="parent">
-                          <span class="fas fa-ellipsis-h fs-10"></span>
-                        </button>
-                        <div class="dropdown-menu dropdown-menu-end py-2">
-                          <a href="{% url 'activate_account' request.dealer.slug 'organization' organization.slug %}"><button class="dropdown-item  text-primary">{% trans "Activate" %}</button></a>
-                          <div class="dropdown-divider"></div>
-                          <a href="{% url 'permenant_delete_account' request.dealer.slug 'organization' organization.slug %}"><button class="dropdown-item text-danger">{% trans "Permenantly Delete" %}</button></a>
+            <div class="row mt-5">
+                <div class="col-12">
+                    <h3 class="mb-3">{% trans 'Organizations' %}</h3>
+                    <div class="table-responsive scrollbar mx-n1 px-1">
+                        <table class="table align-items-center table-flush table-hover">
+                            <thead>
+                                <tr class="bg-body-highlight">
+                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
+                                        scope="col"
+                                        style="width:20%">{{ _("Name") }}</th>
+                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
+                                        scope="col"
+                                        style="width:20%">{{ _("Arabic Name") }}</th>
+                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
+                                        scope="col"
+                                        style="width:20%">{{ _("Email") }}</th>
+                                    <th class="sort align-middle ps-4 pe-5 text-uppercase"
+                                        scope="col"
+                                        style="width:15%">{{ _("Status") }}</th>
+                                    <th class="sort align-middle ps-4 pe-5 text-uppercase"
+                                        scope="col"
+                                        style="width:15%">{{ _("Create date") }}</th>
+                                    <th class="sort text-end align-middle pe-0 ps-4" scope="col">{{ _("Actions") }}</th>
+                                </tr>
+                            </thead>
+                            <tbody class="list" id="leal-tables-body">
+                                {% for organization in organizations %}
+                                    <tr>
+                                        <td class="ps-0">{{ organization.name }}</td>
+                                        <td class="ps-0">{{ organization.arabic_name }}</td>
+                                        <td class="ps-0">{{ organization.email }}</td>
+                                        <td class="ps-0">
+                                            {% if customer.active %}
+                                                <span class="fas fa-check-circle text-success"></span> {{ _("Active") }}
+                                            {% else %}
+                                                <span class="fas fa-times-circle text-danger"></span> {{ _("Inactive") }}
+                                            {% endif %}
+                                        </td>
+                                        <td class="ps-0">{{ organization.created|naturalday|capfirst }}</td>
+                                        <td class="align-middle white-space-nowrap text-end">
+                                            <div class="btn-reveal-trigger position-static">
+                                                <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
+                                                        type="button"
+                                                        data-bs-toggle="dropdown"
+                                                        data-boundary="window"
+                                                        aria-haspopup="true"
+                                                        aria-expanded="false"
+                                                        data-bs-reference="parent">
+                                                    <span class="fas fa-ellipsis-h fs-10"></span>
+                                                </button>
+                                                <div class="dropdown-menu dropdown-menu-end py-2">
+                                                    <a href="{% url 'activate_account' request.dealer.slug 'organization' organization.slug %}">
+                                                        <button class="dropdown-item  text-primary">{% trans "Activate" %}</button>
+                                                    </a>
+                                                    <div class="dropdown-divider"></div>
+                                                    <a href="{% url 'permenant_delete_account' request.dealer.slug 'organization' organization.slug %}">
+                                                        <button class="dropdown-item text-danger">{% trans "Permenantly Delete" %}</button>
+                                                    </a>
+                                                </div>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                {% empty %}
+                                    <td colspan="6" class="text-center">{% trans 'No data available in table' %}</td>
+                                {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="d-flex justify-content-end mt-3">
+                        <div class="d-flex">
+                            {% if is_paginated %}
+                                {% include 'partials/pagination.html' %}
+                            {% endif %}
                         </div>
-                      </div>
-                    </td>
-                  </tr>
-                {% empty %}
-                  <td colspan="6" class="text-center">{% trans 'No data available in table' %}</td>
-                {% endfor %}
-              </tbody>
-            </table>
-          </div>
-          <div class="d-flex justify-content-end mt-3">
-            <div class="d-flex">
-              {% if is_paginated %}
-                {% include 'partials/pagination.html' %}
-              {% endif %}
+                    </div>
+                </div>
             </div>
-          </div>
-        </div>
-      </div>
-      <div class="row mt-5">
-        <div class="col-12">
-          <h3 class="mb-3">{% trans 'Vendors' %}</h3>
-          <div class="table-responsive scrollbar mx-n1 px-1">
-            <table class="table align-items-center table-flush table-hover">
-              <thead>
-                <tr class="bg-body-highlight">
-                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Name') }}</th>
-                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Arabic Name') }}</th>
-                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Email') }}</th>
-                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:15%;">{{ _('Status') }}</th>
-                  <th class="sort align-middle ps-4 pe-5 text-uppercase" scope="col" style="width:15%;">{{ _('Create date') }}</th>
-                  <th class="sort text-end align-middle pe-0 ps-4" scope="col">{{ _('Actions') }}</th>
-                </tr>
-              </thead>
-              <tbody class="list" id="leal-tables-body">
-                {% for vendor in vendors %}
-                  <tr>
-                    <td class="ps-0">{{ vendor.name }}</td>
-                    <td class="ps-0">{{ vendor.arabic_name }}</td>
-                    <td class="ps-0">{{ vendor.email }}</td>
-                    <td class="ps-0">
-                      {% if customer.active %}
-                        <span class="fas fa-check-circle text-success"></span> {{ _('Active') }}
-                      {% else %}
-                        <span class="fas fa-times-circle text-danger"></span> {{ _('Inactive') }}
-                      {% endif %}
-                    </td>
-                    <td class="ps-0">{{ vendor.created_at|naturalday|capfirst }}</td>
-                    <td class="align-middle white-space-nowrap text-end">
-                      <div class="btn-reveal-trigger position-static">
-                        <button
-                          class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
-                          type="button"
-                          data-bs-toggle="dropdown"
-                          data-boundary="window"
-                          aria-haspopup="true"
-                          aria-expanded="false"
-                          data-bs-reference="parent">
-                          <span class="fas fa-ellipsis-h fs-10"></span>
-                        </button>
-                        <div class="dropdown-menu dropdown-menu-end py-2">
-                          <a href="{% url 'activate_account' request.dealer.slug 'vendor' vendor.slug %}"><button class="dropdown-item text-primary">{% trans "Activate" %}</button></a>
-                          <div class="dropdown-divider"></div>
-                          <a href="{% url 'permenant_delete_account' request.dealer.slug 'vendor' vendor.slug %}"><button class="dropdown-item text-danger">{% trans "Permenantly Delete" %}</button></a>
+            <div class="row mt-5">
+                <div class="col-12">
+                    <h3 class="mb-3">{% trans 'Vendors' %}</h3>
+                    <div class="table-responsive scrollbar mx-n1 px-1">
+                        <table class="table align-items-center table-flush table-hover">
+                            <thead>
+                                <tr class="bg-body-highlight">
+                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
+                                        scope="col"
+                                        style="width:20%">{{ _("Name") }}</th>
+                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
+                                        scope="col"
+                                        style="width:20%">{{ _("Arabic Name") }}</th>
+                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
+                                        scope="col"
+                                        style="width:20%">{{ _("Email") }}</th>
+                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
+                                        scope="col"
+                                        style="width:15%">{{ _("Status") }}</th>
+                                    <th class="sort align-middle ps-4 pe-5 text-uppercase"
+                                        scope="col"
+                                        style="width:15%">{{ _("Create date") }}</th>
+                                    <th class="sort text-end align-middle pe-0 ps-4" scope="col">{{ _("Actions") }}</th>
+                                </tr>
+                            </thead>
+                            <tbody class="list" id="leal-tables-body">
+                                {% for vendor in vendors %}
+                                    <tr>
+                                        <td class="ps-0">{{ vendor.name }}</td>
+                                        <td class="ps-0">{{ vendor.arabic_name }}</td>
+                                        <td class="ps-0">{{ vendor.email }}</td>
+                                        <td class="ps-0">
+                                            {% if customer.active %}
+                                                <span class="fas fa-check-circle text-success"></span> {{ _("Active") }}
+                                            {% else %}
+                                                <span class="fas fa-times-circle text-danger"></span> {{ _("Inactive") }}
+                                            {% endif %}
+                                        </td>
+                                        <td class="ps-0">{{ vendor.created_at|naturalday|capfirst }}</td>
+                                        <td class="align-middle white-space-nowrap text-end">
+                                            <div class="btn-reveal-trigger position-static">
+                                                <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
+                                                        type="button"
+                                                        data-bs-toggle="dropdown"
+                                                        data-boundary="window"
+                                                        aria-haspopup="true"
+                                                        aria-expanded="false"
+                                                        data-bs-reference="parent">
+                                                    <span class="fas fa-ellipsis-h fs-10"></span>
+                                                </button>
+                                                <div class="dropdown-menu dropdown-menu-end py-2">
+                                                    <a href="{% url 'activate_account' request.dealer.slug 'vendor' vendor.slug %}">
+                                                        <button class="dropdown-item text-primary">{% trans "Activate" %}</button>
+                                                    </a>
+                                                    <div class="dropdown-divider"></div>
+                                                    <a href="{% url 'permenant_delete_account' request.dealer.slug 'vendor' vendor.slug %}">
+                                                        <button class="dropdown-item text-danger">{% trans "Permenantly Delete" %}</button>
+                                                    </a>
+                                                </div>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                {% empty %}
+                                    <td colspan="6" class="text-center">{% trans 'No data available in table' %}</td>
+                                {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="d-flex justify-content-end mt-3">
+                        <div class="d-flex">
+                            {% if is_paginated %}
+                                {% include 'partials/pagination.html' %}
+                            {% endif %}
                         </div>
-                      </div>
-                    </td>
-                  </tr>
-                {% empty %}
-                  <td colspan="6" class="text-center">{% trans 'No data available in table' %}</td>
-                {% endfor %}
-              </tbody>
-            </table>
-          </div>
-          <div class="d-flex justify-content-end mt-3">
-            <div class="d-flex">
-              {% if is_paginated %}
-                {% include 'partials/pagination.html' %}
-              {% endif %}
+                    </div>
+                </div>
             </div>
-          </div>
-        </div>
-      </div>
-      <div class="row mt-5">
-        <div class="col-12">
-          <h3 class="mb-3">{% trans 'Staff' %}</h3>
-          <div class="table-responsive scrollbar mx-n1 px-1">
-            <table class="table align-items-center table-flush table-hover">
-              <thead>
-                <tr class="bg-body-highlight">
-                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Name') }}</th>
-                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Arabic Name') }}</th>
-                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:20%;">{{ _('Email') }}</th>
-                  <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" style="width:15%;">{{ _('Status') }}</th>
-                  <th class="sort align-middle ps-4 pe-5 text-uppercase" scope="col" style="width:15%;">{{ _('Create date') }}</th>
-                  <th class="sort text-end align-middle pe-0 ps-4" scope="col">{{ _('Actions') }}</th>
-                </tr>
-              </thead>
-              <tbody class="list" id="leal-tables-body">
-                {% for obj in staff %}
-                  <tr>
-                    <td class="ps-0">{{ obj.name }}</td>
-                    <td class="ps-0">{{ obj.arabic_name }}</td>
-                    <td class="ps-0">{{ obj.email }}</td>
-                    <td class="ps-0">
-                      {% if obj.active %}
-                        <span class="fas fa-check-circle text-success"></span> {{ _('Active') }}
-                      {% else %}
-                        <span class="fas fa-times-circle text-danger"></span> {{ _('Inactive') }}
-                      {% endif %}
-                    </td>
-                    <td class="ps-0">{{ obj.created|naturalday|capfirst }}</td>
-                    <td class="align-middle white-space-nowrap text-end">
-                      <div class="btn-reveal-trigger position-static">
-                        <button
-                          class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
-                          type="button"
-                          data-bs-toggle="dropdown"
-                          data-boundary="window"
-                          aria-haspopup="true"
-                          aria-expanded="false"
-                          data-bs-reference="parent">
-                          <span class="fas fa-ellipsis-h fs-10"></span>
-                        </button>
-                        <div class="dropdown-menu dropdown-menu-end py-2">
-                          <a href="{% url 'activate_account' request.dealer.slug 'staff' obj.slug %}"><button class="dropdown-item  text-primary">{% trans "Activate" %}</button></a>
-                          <div class="dropdown-divider"></div>
-                          <a href="{% url 'permenant_delete_account' request.dealer.slug 'staff' obj.slug %}"><button class="dropdown-item text-danger">{% trans "Permenantly Delete" %}</button></a>
+            <div class="row mt-5">
+                <div class="col-12">
+                    <h3 class="mb-3">{% trans 'Staff' %}</h3>
+                    <div class="table-responsive scrollbar mx-n1 px-1">
+                        <table class="table align-items-center table-flush table-hover">
+                            <thead>
+                                <tr class="bg-body-highlight">
+                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
+                                        scope="col"
+                                        style="width:20%">{{ _("Name") }}</th>
+                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
+                                        scope="col"
+                                        style="width:20%">{{ _("Arabic Name") }}</th>
+                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
+                                        scope="col"
+                                        style="width:20%">{{ _("Email") }}</th>
+                                    <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
+                                        scope="col"
+                                        style="width:15%">{{ _("Status") }}</th>
+                                    <th class="sort align-middle ps-4 pe-5 text-uppercase"
+                                        scope="col"
+                                        style="width:15%">{{ _("Create date") }}</th>
+                                    <th class="sort text-end align-middle pe-0 ps-4" scope="col">{{ _("Actions") }}</th>
+                                </tr>
+                            </thead>
+                            <tbody class="list" id="leal-tables-body">
+                                {% for obj in staff %}
+                                    <tr>
+                                        <td class="ps-0">{{ obj.name }}</td>
+                                        <td class="ps-0">{{ obj.arabic_name }}</td>
+                                        <td class="ps-0">{{ obj.email }}</td>
+                                        <td class="ps-0">
+                                            {% if obj.active %}
+                                                <span class="fas fa-check-circle text-success"></span> {{ _("Active") }}
+                                            {% else %}
+                                                <span class="fas fa-times-circle text-danger"></span> {{ _("Inactive") }}
+                                            {% endif %}
+                                        </td>
+                                        <td class="ps-0">{{ obj.created|naturalday|capfirst }}</td>
+                                        <td class="align-middle white-space-nowrap text-end">
+                                            <div class="btn-reveal-trigger position-static">
+                                                <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
+                                                        type="button"
+                                                        data-bs-toggle="dropdown"
+                                                        data-boundary="window"
+                                                        aria-haspopup="true"
+                                                        aria-expanded="false"
+                                                        data-bs-reference="parent">
+                                                    <span class="fas fa-ellipsis-h fs-10"></span>
+                                                </button>
+                                                <div class="dropdown-menu dropdown-menu-end py-2">
+                                                    <a href="{% url 'activate_account' request.dealer.slug 'staff' obj.slug %}">
+                                                        <button class="dropdown-item  text-primary">{% trans "Activate" %}</button>
+                                                    </a>
+                                                    <div class="dropdown-divider"></div>
+                                                    <a href="{% url 'permenant_delete_account' request.dealer.slug 'staff' obj.slug %}">
+                                                        <button class="dropdown-item text-danger">{% trans "Permenantly Delete" %}</button>
+                                                    </a>
+                                                </div>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                {% empty %}
+                                    <td colspan="6" class="text-center">{% trans 'No data available in table' %}</td>
+                                {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="d-flex justify-content-end mt-3">
+                        <div class="d-flex">
+                            {% if is_paginated %}
+                                {% include 'partials/pagination.html' %}
+                            {% endif %}
                         </div>
-                      </div>
-                    </td>
-                  </tr>
-                {% empty %}
-                  <td colspan="6" class="text-center">{% trans 'No data available in table' %}</td>
-                {% endfor %}
-              </tbody>
-            </table>
-          </div>
-          <div class="d-flex justify-content-end mt-3">
-            <div class="d-flex">
-              {% if is_paginated %}
-                {% include 'partials/pagination.html' %}
-              {% endif %}
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
-      </div>
-    </div>
-  </section>
+    </section>
 {% endblock %}
-
diff --git a/templates/administration/display_appointment.html b/templates/administration/display_appointment.html
index c936b1a0..b9059ef4 100644
--- a/templates/administration/display_appointment.html
+++ b/templates/administration/display_appointment.html
@@ -1,10 +1,8 @@
 {% extends BASE_TEMPLATE %}
 {% load i18n %}
 {% load static %}
-
 {% block title %}{{ page_title }}{% endblock %}
 {% block description %}{{ page_description }}{% endblock %}
-
 {% block content %}
     <div class="container py-5">
         <div class="card bg-body">
@@ -81,7 +79,6 @@
                     </div>
                     <div class="col-md-6">
                         <div class="d-flex align-items-center">
-
                             <span class="icon-saudi_riyal text-primary"></span>
                             <strong class="me-2">{% trans 'Service price' %}:</strong> {{ appointment.get_appointment_amount_to_pay_text }}
                         </div>
@@ -91,9 +88,11 @@
         </div>
     </div>
 {% endblock %}
-
 {% block extra_js %}
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.js" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.45/moment-timezone-with-data.min.js" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.10/index.global.min.js" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.js"
+            crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.45/moment-timezone-with-data.min.js"
+            crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.10/index.global.min.js"
+            crossorigin="anonymous"></script>
 {% endblock %}
diff --git a/templates/administration/email_change_verification_code.html b/templates/administration/email_change_verification_code.html
index 3ff7ff26..14d4993b 100644
--- a/templates/administration/email_change_verification_code.html
+++ b/templates/administration/email_change_verification_code.html
@@ -2,7 +2,9 @@
 {% load i18n %}
 {% load static %}
 {% block customCSS %}
-    <link rel="stylesheet" type="text/css" href="{% static 'css/verification_code.css' %}"/>
+    <link rel="stylesheet"
+          type="text/css"
+          href="{% static 'css/verification_code.css' %}" />
 {% endblock %}
 {% block title %}
     {% trans 'Enter Verification Code' %}
@@ -19,7 +21,8 @@
                 <form method="post"
                       action="{% url 'appointment:email_change_verification_code' %}">
                     {% csrf_token %}
-                    <label>{% trans 'Code' %}:
+                    <label>
+                        {% trans 'Code' %}:
                         <input type="text" name="code" placeholder="X1Y2Z3" required>
                     </label>
                     <button class="btn btn-phoenix-primary" type="submit">{% trans 'Submit' %}</button>
@@ -29,7 +32,15 @@
         <div class="messages" style="margin: 20px 0">
             {% if messages %}
                 {% for message in messages %}
-                    <div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
+                    <div class="alert alert-dismissible
+                                {% if message.tags %}
+                                    alert-
+                                    {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
+                                        danger
+                                    {% else %}
+                                        {{ message.tags }}
+                                    {% endif %}
+                                {% endif %}"
                          role="alert">{{ message }}</div>
                 {% endfor %}
             {% endif %}
diff --git a/templates/administration/manage_day_off.html b/templates/administration/manage_day_off.html
index 7e79b42d..759e655a 100644
--- a/templates/administration/manage_day_off.html
+++ b/templates/administration/manage_day_off.html
@@ -1,21 +1,22 @@
 {% extends BASE_TEMPLATE %}
 {% load i18n %}
 {% load static %}
-
 {% block customCSS %}
-    <link rel="stylesheet" type="text/css" href="{% static 'css/app_admin/days_off.css' %}"/>
+    <link rel="stylesheet"
+          type="text/css"
+          href="{% static 'css/app_admin/days_off.css' %}" />
     <!-- jQuery UI CSS -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.css"
+    <link rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.css"
           integrity="sha512-lCk0aEL6CvAGQvaZ47hoq1v/hNsunE8wD4xmmBelkJjg51DauW6uVdaWEJlwgAE6PxcY7/SThs1T4+IMwwpN7w=="
-          crossorigin="anonymous" referrerpolicy="no-referrer"/>
+          crossorigin="anonymous"
+          referrerpolicy="no-referrer" />
 {% endblock %}
-
 {% block body %}
     <section class="content content-wrapper">
         <div class="days-off-form-wrapper">
             <div class="do-form-content">
                 <h2>{% trans "Manage Days Off" %}</h2>
-
                 <form method="post" action="">
                     {% csrf_token %}
                     <!-- Staff Member -->
@@ -26,60 +27,66 @@
                             });
                         </script>
                     {% endif %}
-
                     {% if days_off_form.staff_member %}
                         <div class="form-group">
                             <label for="{{ days_off_form.staff_member.id_for_label }}">{% trans 'Staff Member' %}:</label>
                             {{ days_off_form.staff_member }}
                         </div>
                     {% endif %}
-
                     <!-- Start Date Display (read-only) -->
                     <div class="form-group">
                         <label for="{{ day_off_form.start_date.id_for_label }}_display">{% trans 'Start date' %}:</label>
-                        <input type="text" id="{{ day_off_form.start_date.id_for_label }}_display"
+                        <input type="text"
+                               id="{{ day_off_form.start_date.id_for_label }}_display"
                                class="datepicker-display"
-                               value="{{ day_off_form.start_date.value }}" readonly>
+                               value="{{ day_off_form.start_date.value }}"
+                               readonly>
                         <!-- Actual value to be submitted -->
-                        <input type="hidden" id="{{ day_off_form.start_date.id_for_label }}"
-                               name="{{ day_off_form.start_date.name }}" class="datepicker-actual"
+                        <input type="hidden"
+                               id="{{ day_off_form.start_date.id_for_label }}"
+                               name="{{ day_off_form.start_date.name }}"
+                               class="datepicker-actual"
                                value="{{ day_off_form.start_date.value }}">
                     </div>
-
                     <!-- End Date Display (read-only) -->
                     <div class="form-group">
                         <label for="{{ day_off_form.end_date.id_for_label }}_display">{% trans 'End date' %}:</label>
-                        <input type="text" id="{{ day_off_form.end_date.id_for_label }}_display"
+                        <input type="text"
+                               id="{{ day_off_form.end_date.id_for_label }}_display"
                                class="datepicker-display"
-                               value="{{ day_off_form.end_date.value }}" readonly>
+                               value="{{ day_off_form.end_date.value }}"
+                               readonly>
                         <!-- Actual value to be submitted -->
-                        <input type="hidden" id="{{ day_off_form.end_date.id_for_label }}"
-                               name="{{ day_off_form.end_date.name }}" class="datepicker-actual"
+                        <input type="hidden"
+                               id="{{ day_off_form.end_date.id_for_label }}"
+                               name="{{ day_off_form.end_date.name }}"
+                               class="datepicker-actual"
                                value="{{ day_off_form.end_date.value }}">
                     </div>
-
-
                     <div class="form-group">
                         <label for="{{ day_off_form.description.id_for_label }}">{% trans 'Description' %}:</label>
-                        <input type="text" id="{{ day_off_form.description.id_for_label }}"
-                               name="{{ day_off_form.description.name }}" value="{{ day_off_form.description.value }}">
+                        <input type="text"
+                               id="{{ day_off_form.description.id_for_label }}"
+                               name="{{ day_off_form.description.name }}"
+                               value="{{ day_off_form.description.value }}">
                     </div>
-
-
                     <button type="submit" class="btn btn-phoenix-primary">{% trans "Submit" %}</button>
                 </form>
                 <div class="row-form-errors" style="margin: 10px 0">
-                    {% if days_off_form.errors %}
-                        <div class="alert alert-danger">
-                            {{ days_off_form.errors }}
-                        </div>
-                    {% endif %}
+                    {% if days_off_form.errors %}<div class="alert alert-danger">{{ days_off_form.errors }}</div>{% endif %}
                 </div>
-
                 <div class="messages" style="margin: 20px 0">
                     {% if messages %}
                         {% for message in messages %}
-                            <div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
+                            <div class="alert alert-dismissible
+                                        {% if message.tags %}
+                                            alert-
+                                            {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
+                                                danger
+                                            {% else %}
+                                                {{ message.tags }}
+                                            {% endif %}
+                                        {% endif %}"
                                  role="alert">{{ message }}</div>
                         {% endfor %}
                     {% endif %}
@@ -89,15 +96,16 @@
         </div>
     </section>
 {% endblock %}
-
 {% block customJS %}
     <!-- JS -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
             integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
-            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.js"
             integrity="sha512-ynDTbjF5rUHsWBjz7nsljrrSWqLTPJaORzSe5aGCFxOigRZRmwM05y+kuCtxaoCSzVGB1Ky3XeRZsDhbSLdzXQ=="
-            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $.datepicker._defaults.monthNamesShort = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
diff --git a/templates/administration/manage_service.html b/templates/administration/manage_service.html
index bd79f571..a94f5616 100644
--- a/templates/administration/manage_service.html
+++ b/templates/administration/manage_service.html
@@ -1,12 +1,8 @@
 {% extends BASE_TEMPLATE %}
-{% load crispy_forms_filters custom_filters%}
+{% load crispy_forms_filters custom_filters %}
 {% load i18n %}
 {% load static %}
-
-{% block customCSS %}
-
-{% endblock %}
-
+{% block customCSS %}{% endblock %}
 {% block content %}
     {% translate "Confirm Deletion" as modal_title %}
     {% translate "Delete" as delete_btn_modal %}
@@ -15,98 +11,65 @@
             <h3 class="mb-3">{{ page_title }}</h3>
             <form class="form" method="post" enctype="multipart/form-data">
                 {% csrf_token %}
-
-        <!-- Name Field -->
+                <!-- Name Field -->
                 <div class="form-floating mb-3">
                     {{ form.name|add_class:"form-control form-control-sm" }}
                     <label for="{{ form.name.id_for_label }}">{{ _("Name") }}</label>
-                    {% if form.name.errors %}
-                        <div class="alert alert-danger mt-2">
-                            {{ form.name.errors }}
-                        </div>
-                    {% endif %}
+                    {% if form.name.errors %}<div class="alert alert-danger mt-2">{{ form.name.errors }}</div>{% endif %}
                 </div>
-
-        <!-- Description Field -->
+                <!-- Description Field -->
                 <div class="form-floating mb-3">
                     {{ form.description|add_class:"form-control form-control-sm" }}
                     <label for="{{ form.description.id_for_label }}">{{ _("Description") }}</label>
-                    {% if form.description.errors %}
-                        <div class="alert alert-danger mt-2">
-                            {{ form.description.errors }}
-                        </div>
-                    {% endif %}
+                    {% if form.description.errors %}<div class="alert alert-danger mt-2">{{ form.description.errors }}</div>{% endif %}
                 </div>
-
-        <!-- Duration Field -->
+                <!-- Duration Field -->
                 <div class="form-floating mb-3">
                     {{ form.duration|add_class:"form-control form-control-sm" }}
                     <label for="{{ form.duration.id_for_label }}">{{ _("Duration") }}</label>
-                    {% if form.duration.errors %}
-                        <div class="alert alert-danger mt-2">
-                            {{ form.duration.errors }}
-                        </div>
-                    {% endif %}
+                    {% if form.duration.errors %}<div class="alert alert-danger mt-2">{{ form.duration.errors }}</div>{% endif %}
                 </div>
-
-        <!-- Price Field -->
+                <!-- Price Field -->
                 <div class="form-floating mb-3">
                     {{ form.price|add_class:"form-control form-control-sm" }}
                     <label for="{{ form.price.id_for_label }}">{{ _("Price") }}</label>
-                    {% if form.price.errors %}
-                        <div class="alert alert-danger mt-2">
-                            {{ form.price.errors }}
-                        </div>
-                    {% endif %}
+                    {% if form.price.errors %}<div class="alert alert-danger mt-2">{{ form.price.errors }}</div>{% endif %}
                 </div>
-
-        <!-- Down Payment Field -->
+                <!-- Down Payment Field -->
                 <div class="form-floating mb-3">
                     {{ form.down_payment|add_class:"form-control form-control-sm" }}
-                    <label for="{{ form.down_payment.id_for_label }}">{{ _("Down Payment")}}</label>
-                    {% if form.down_payment.errors %}
-                        <div class="alert alert-danger mt-2">
-                            {{ form.down_payment.errors }}
-                        </div>
-                    {% endif %}
+                    <label for="{{ form.down_payment.id_for_label }}">{{ _("Down Payment") }}</label>
+                    {% if form.down_payment.errors %}<div class="alert alert-danger mt-2">{{ form.down_payment.errors }}</div>{% endif %}
                 </div>
-
-        <!-- Image Field -->
+                <!-- Image Field -->
                 <div class="mb-3">
                     <label for="{{ form.image.id_for_label }}" class="form-label">{{ _("Image") }}</label>
                     {{ form.image }}
-                    {% if form.image.errors %}
-                        <div class="alert alert-danger mt-2">
-                            {{ form.image.errors }}
-                        </div>
-                    {% endif %}
+                    {% if form.image.errors %}<div class="alert alert-danger mt-2">{{ form.image.errors }}</div>{% endif %}
                 </div>
-
-        <!-- Currency Field -->
+                <!-- Currency Field -->
                 <div class="form-floating mb-3">
-                    <select name="currency" id="id_currency" class="form-select form-control-sm" >
-                        <option class="icon-saudi_riyal" value="SAR"><span class="icon-saudi_riyal"></span></option>
+                    <select name="currency" id="id_currency" class="form-select form-control-sm">
+                        <option class="icon-saudi_riyal" value="SAR">
+                            <span class="icon-saudi_riyal"></span>
+                        </option>
                     </select>
-                    <label for="id_currency"> <span class="icon-saudi_riyal"></span></label>
-                    {% if form.currency.errors %}
-                        <div class="alert alert-danger mt-2">
-                            {{ form.currency.errors }}
-                        </div>
-                    {% endif %}
+                    <label for="id_currency">
+                        <span class="icon-saudi_riyal"></span>
+                    </label>
+                    {% if form.currency.errors %}<div class="alert alert-danger mt-2">{{ form.currency.errors }}</div>{% endif %}
                 </div>
-
-        <!-- Background Color Field -->
+                <!-- Background Color Field -->
                 <div class="form-floating mb-3">
-                    <input type="color" value="#000000" id="{{ form.background_color.id_for_label }}" class="form-control form-control-sm" >
-                    <label for="{{ form.background_color.id_for_label }}">{{ _("Background Color")}}</label>
+                    <input type="color"
+                           value="#000000"
+                           id="{{ form.background_color.id_for_label }}"
+                           class="form-control form-control-sm">
+                    <label for="{{ form.background_color.id_for_label }}">{{ _("Background Color") }}</label>
                     {% if form.background_color.errors %}
-                        <div class="alert alert-danger mt-2">
-                            {{ form.background_color.errors }}
-                        </div>
+                        <div class="alert alert-danger mt-2">{{ form.background_color.errors }}</div>
                     {% endif %}
                 </div>
-
-
                 {% if btn_text %}
                     <button type="submit" class="btn btn-sm btn-phoenix-primary">{{ btn_text }}</button>
                 {% else %}
@@ -126,14 +89,11 @@
                     {% endif %}
                 {% endif %}
             </form>
-
         </div>
     </div>
     {% include 'modal/confirm_modal.html' %}
 {% endblock %}
-
 {% block customJS %}
     <script src="{% static 'js/modal/show_modal.js' %}"></script>
-
     <script src="{% static 'js/js-utils.js' %}"></script>
 {% endblock %}
diff --git a/templates/administration/manage_staff_member.html b/templates/administration/manage_staff_member.html
index 0bd7266e..30ed1254 100644
--- a/templates/administration/manage_staff_member.html
+++ b/templates/administration/manage_staff_member.html
@@ -1,11 +1,11 @@
 {% extends BASE_TEMPLATE %}
 {% load i18n %}
 {% load static %}
-
 {% block customCSS %}
-    <link rel="stylesheet" type="text/css" href="{% static 'css/app_admin/staff_member.css' %}"/>
+    <link rel="stylesheet"
+          type="text/css"
+          href="{% static 'css/app_admin/staff_member.css' %}" />
 {% endblock %}
-
 {% block body %}
     <section class="main-container">
         <div class="container-fluid">
@@ -25,54 +25,55 @@
                             </small>
                         </div>
                     {% endif %}
-
                     <div class="form-group">
                         {{ form.services_offered.label_tag }}
                         {{ form.services_offered.errors }}
                         {{ form.services_offered }}
-                        <br><small>{% trans 'Hold down “Control”, or “Command” on a Mac, to select more than one.' %}</small>
+                        <br>
+                        <small>{% trans 'Hold down “Control”, or “Command” on a Mac, to select more than one.' %}</small>
                     </div>
-
                     <div class="form-group">
                         {{ form.slot_duration.label_tag }}
                         {{ form.slot_duration }}
                         <small>{{ form.slot_duration.help_text }}</small>
                     </div>
-
                     <div class="form-group">
                         {{ form.lead_time.label_tag }}
                         {{ form.lead_time }}
                         <small>{{ form.lead_time.help_text }}</small>
                     </div>
-
                     <div class="form-group">
                         {{ form.finish_time.label_tag }}
                         {{ form.finish_time }}
                         <small>{{ form.finish_time.help_text }}</small>
                     </div>
-
                     <div class="form-group">
                         {{ form.appointment_buffer_time.label_tag }}
                         {{ form.appointment_buffer_time }}
                         <small>{{ form.appointment_buffer_time.help_text }}</small>
                     </div>
-
                     <div class="form-check">
                         {{ form.work_on_saturday }}
                         {{ form.work_on_saturday.label_tag }}
                     </div>
-
                     <div class="form-check">
                         {{ form.work_on_sunday }}
                         {{ form.work_on_sunday.label_tag }}
                     </div>
-
                     <button type="submit" class="btn btn-phoenix-primary">{% trans 'Save' %}</button>
                 </form>
                 <div class="messages" style="margin: 20px 0">
                     {% if messages %}
                         {% for message in messages %}
-                            <div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
+                            <div class="alert alert-dismissible
+                                        {% if message.tags %}
+                                            alert-
+                                            {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
+                                                danger
+                                            {% else %}
+                                                {{ message.tags }}
+                                            {% endif %}
+                                        {% endif %}"
                                  role="alert">{{ message }}</div>
                         {% endfor %}
                     {% endif %}
@@ -81,7 +82,6 @@
         </div>
     </section>
 {% endblock %}
-
 {% block customJS %}
     <script src="{% static 'js/js-utils.js' %}"></script>
 {% endblock %}
diff --git a/templates/administration/manage_staff_personal_info.html b/templates/administration/manage_staff_personal_info.html
index 8438d05a..1ab7d0af 100644
--- a/templates/administration/manage_staff_personal_info.html
+++ b/templates/administration/manage_staff_personal_info.html
@@ -1,40 +1,39 @@
 {% extends BASE_TEMPLATE %}
 {% load i18n %}
 {% load static %}
-
-{% block customCSS %}
-{% endblock %}
-
+{% block customCSS %}{% endblock %}
 {% block content %}
     <div class="row">
-
         <div class="col-6">
             <h3 class="mb-3">{% trans 'Staff Personal Information' %}</h3>
             <form id="updatePersonalInfoForm" method="post" action="">
                 {% csrf_token %}
-
                 <div class="form-floating mb-3">
                     {{ form.first_name }}
                     <label for="first_name">{{ _("First Name") }}</label>
-
                 </div>
-
                 <div class="form-floating mb-3">
                     {{ form.last_name }}
                     <label for="last_name">{{ _("Last Name") }}</label>
                 </div>
-
                 <div class="form-floating mb-3">
                     {{ form.email }}
                     <label for="email">{{ _("Email") }}</label>
                 </div>
-
                 <button type="submit" class="btn btn-phoenix-primary">{{ btn_text }}</button>
             </form>
             <div class="messages" style="margin: 20px 0">
                 {% if messages %}
                     {% for message in messages %}
-                        <div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
+                        <div class="alert alert-dismissible
+                                    {% if message.tags %}
+                                        alert-
+                                        {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
+                                            danger
+                                        {% else %}
+                                            {{ message.tags }}
+                                        {% endif %}
+                                    {% endif %}"
                              role="alert">{{ message }}</div>
                     {% endfor %}
                 {% endif %}
@@ -42,7 +41,6 @@
         </div>
     </div>
 {% endblock %}
-
 {% block customJS %}
     <script src="{% static 'js/js-utils.js' %}"></script>
 {% endblock %}
diff --git a/templates/administration/manage_working_hours.html b/templates/administration/manage_working_hours.html
index e06deb0b..bced3149 100644
--- a/templates/administration/manage_working_hours.html
+++ b/templates/administration/manage_working_hours.html
@@ -2,70 +2,107 @@
 {% load i18n %}
 {% load static %}
 {% load custom_filters %}
-
-{% block customCSS %}
-    <!-- additional CSS -->
-
-{% endblock %}
-
+{% block customCSS %}<!-- additional CSS -->{% endblock %}
 {% block content %}
     <div class="row">
         <div class="col-6">
-
             <h3>{% trans "Manage Working Hours" %}</h3>
-            <form class="form" method="post" action="" id="workingHoursForm"
-                  data-action="{% if working_hours_instance %}update{% else %}create{% endif %}"
+            <form class="form"
+                  method="post"
+                  action=""
+                  id="workingHoursForm"
+                  data-action="{% if working_hours_instance %}
+                                   update
+                               {% else %}
+                                   create
+                               {% endif %}"
                   data-working-hours-id="
-                                         {% if working_hours_instance %}{{ working_hours_instance.id }}{% else %}0{% endif %}"
-                  data-staff-user-id="{% if staff_user_id %}{{ staff_user_id }}{% else %}0{% endif %}">
+                                         {% if working_hours_instance %}
+                                             {{ working_hours_instance.id }}
+                                         {% else %}
+                                             0
+                                         {% endif %}"
+                  data-staff-user-id="{% if staff_user_id %}
+                                          {{ staff_user_id }}
+                                      {% else %}
+                                          0
+                                      {% endif %}">
                 {% csrf_token %}
-
                 {% if working_hours_form.staff_member %}
                     <div class="form-group mb-3">
-                        <label class="form-label" for="{{ working_hours_form.staff_member.id_for_label }}">{% trans 'Staff Member' %}:</label>
+                        <label class="form-label"
+                               for="{{ working_hours_form.staff_member.id_for_label }}">
+                            {% trans 'Staff Member' %}:
+                        </label>
                         {{ working_hours_form.staff_member }}
                     </div>
                 {% endif %}
-
                 <div class="form-group mb-3">
-                    <label class="form-label" for="{{ working_hours_form.day_of_week.id_for_label }}">{% trans 'Day of Week' %}:</label>
+                    <label class="form-label"
+                           for="{{ working_hours_form.day_of_week.id_for_label }}">{% trans 'Day of Week' %}:</label>
                     {{ working_hours_form.day_of_week|add_class:"form-select form-select-sm" }}
                 </div>
-
                 <div class="form-group mb-3">
-                    <label class="form-label" for="{{ working_hours_form.start_time.id_for_label }}">{% trans 'Start time' %}:</label>
-                    <div class="input-group time24hr" id="start-timepicker" data-target-input="nearest">
-                        <input type="text" class="form-control form-control-sm datetimepicker-input" data-toggle="datetimepicker"
-                               data-target="#start-timepicker" name="{{ working_hours_form.start_time.name }}"
+                    <label class="form-label"
+                           for="{{ working_hours_form.start_time.id_for_label }}">{% trans 'Start time' %}:</label>
+                    <div class="input-group time24hr"
+                         id="start-timepicker"
+                         data-target-input="nearest">
+                        <input type="text"
+                               class="form-control form-control-sm datetimepicker-input"
+                               data-toggle="datetimepicker"
+                               data-target="#start-timepicker"
+                               name="{{ working_hours_form.start_time.name }}"
                                value="{{ working_hours_form.start_time.value|default:'09:00 AM' }}"
                                id="{{ working_hours_form.start_time.id_for_label }}">
-                        <div class="input-group-text" data-toggle="datetimepicker" data-target="#start-timepicker"><i class="far fa-clock"></i></div>
+                        <div class="input-group-text"
+                             data-toggle="datetimepicker"
+                             data-target="#start-timepicker">
+                            <i class="far fa-clock"></i>
+                        </div>
                     </div>
                 </div>
-
                 <div class="form-group mb-3">
-                    <label class="form-label" for="{{ working_hours_form.end_time.id_for_label }}">{% trans 'End time' %}:</label>
-                    <div class="input-group date" id="end-timepicker" data-target-input="nearest">
-                        <input type="text" class="form-control form-control-sm datetimepicker-input" data-toggle="datetimepicker"
-                               data-target="#end-timepicker" name="{{ working_hours_form.end_time.name }}"
+                    <label class="form-label"
+                           for="{{ working_hours_form.end_time.id_for_label }}">{% trans 'End time' %}:</label>
+                    <div class="input-group date"
+                         id="end-timepicker"
+                         data-target-input="nearest">
+                        <input type="text"
+                               class="form-control form-control-sm datetimepicker-input"
+                               data-toggle="datetimepicker"
+                               data-target="#end-timepicker"
+                               name="{{ working_hours_form.end_time.name }}"
                                value="{{ working_hours_form.end_time.value|default:'05:00 PM' }}"
                                id="{{ working_hours_form.end_time.id_for_label }}">
-                        <div class="input-group-text" data-toggle="datetimepicker" data-target="#end-timepicker"><i class="far fa-clock"></i></div>
+                        <div class="input-group-text"
+                             data-toggle="datetimepicker"
+                             data-target="#end-timepicker">
+                            <i class="far fa-clock"></i>
+                        </div>
                     </div>
                 </div>
-
                 <button type="submit" class="btn btn-sm btn-phoenix-primary">{{ button_text }}</button>
-                <input type="hidden" id="addWorkingHoursUrl"
+                <input type="hidden"
+                       id="addWorkingHoursUrl"
                        value="{% url 'appointment:add_working_hours_id' staff_user_id|default:user.id %}">
-                <input type="hidden" id="updateWorkingHoursUrl"
+                <input type="hidden"
+                       id="updateWorkingHoursUrl"
                        value="{% url 'appointment:update_working_hours_id' working_hours_id|default:0 staff_user_id|default:user.id %}">
-
             </form>
             {% include 'modal/error_modal.html' %}
             <div class="messages" style="margin: 20px 0">
                 {% if messages %}
                     {% for message in messages %}
-                        <div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
+                        <div class="alert alert-dismissible
+                                    {% if message.tags %}
+                                        alert-
+                                        {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
+                                            danger
+                                        {% else %}
+                                            {{ message.tags }}
+                                        {% endif %}
+                                    {% endif %}"
                              role="alert">{{ message }}</div>
                     {% endfor %}
                 {% endif %}
@@ -75,19 +112,22 @@
 {% endblock %}
 {% block customJS %}
     <!-- JS -->
-
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"
             integrity="sha512-TPh2Oxlg1zp+kz3nFA0C5vVC6leG/6mm1z9+mA81MI5eaUVqasPLO8Cuk4gMF4gUfP5etR73rgU/8PNMsSesoQ=="
-            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"
             integrity="sha512-7rusk8kGPFynZWu26OKbTeI+QPoYchtxsmPeBqkHIEXJxeun4yJ4ISYe7C6sz9wdxeE1Gk3VxsIWgCZTc+vX3g=="
-            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.js"
             integrity="sha512-3CuraBvy05nIgcoXjVN33mACRyI89ydVHg7y/HMN9wcTVbHeur0SeBzweSd/rxySapO7Tmfu68+JlKkLTnDFNg=="
-            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js"
             integrity="sha512-k6/Bkb8Fxf/c1Tkyl39yJwcOZ1P4cRrJu77p83zJjN2Z55prbFHxPs9vN7q3l3+tSMGPDdoH51AEU8Vgo1cgAA=="
-            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"></script>
     <script type="text/javascript">
         const addWorkingHoursUrl = $('#addWorkingHoursUrl').val();
         const updateWorkingHoursUrl = $('#updateWorkingHoursUrl').val();
@@ -163,4 +203,3 @@
     <script src="{% static 'js/modal/error_modal.js' %}"></script>
     <script src="{% static 'js/js-utils.js' %}"></script>
 {% endblock %}
-
diff --git a/templates/administration/service_list.html b/templates/administration/service_list.html
index 88af7de5..5ce852dc 100644
--- a/templates/administration/service_list.html
+++ b/templates/administration/service_list.html
@@ -1,7 +1,6 @@
 {% extends 'base.html' %}
 {% load i18n %}
 {% load static %}
-
 {% block title %}
     {% trans 'Service List' %}
 {% endblock %}
@@ -29,7 +28,13 @@
                 <tbody>
                     {% for service in services %}
                         <tr>
-                            <td><img class="rounded-soft" src="{{ service.get_image_url }}" alt="" style="width: 35px; height: 35px;"/></td>
+                            <td>
+                                <img class="rounded-soft"
+                                     src="{{ service.get_image_url }}"
+                                     alt=""
+                                     style="width: 35px;
+                                            height: 35px" />
+                            </td>
                             <td>{{ service.name }}</td>
                             <td>{{ service.get_duration }}</td>
                             <td>{{ service.get_price_text }}</td>
@@ -64,11 +69,8 @@
         </div>
         {% include 'modal/confirm_modal.html' %}
     </div>
-
 {% endblock %}
-
 {% block customJS %}
     <script src="{% static 'js/modal/show_modal.js' %}"></script>
     <script src="{% static 'js/js-utils.js' %}"></script>
-
 {% endblock %}
diff --git a/templates/administration/staff_index.html b/templates/administration/staff_index.html
index ce9d2a5d..5a123616 100644
--- a/templates/administration/staff_index.html
+++ b/templates/administration/staff_index.html
@@ -1,18 +1,16 @@
 {% extends BASE_TEMPLATE %}
 {% load i18n %}
 {% load static %}
-{% block customMetaTag %}
-    <meta name="csrf-token" content="{{ csrf_token }}">
-{% endblock %}
+{% block customMetaTag %}<meta name="csrf-token" content="{{ csrf_token }}">{% endblock %}
 {% block customCSS %}
-    <link rel="stylesheet" type="text/css" href="{% static 'css/appt-common.css' %}"/>
-    <link rel="stylesheet" type="text/css" href="{% static 'css/app_admin/admin.css' %}"/>
-
+    <link rel="stylesheet"
+          type="text/css"
+          href="{% static 'css/appt-common.css' %}" />
+    <link rel="stylesheet"
+          type="text/css"
+          href="{% static 'css/app_admin/admin.css' %}" />
 {% endblock %}
-{% block title %}
-    {{ page_title }}
-{% endblock %}
-
+{% block title %}{{ page_title }}{% endblock %}
 {% block content %}
     <section class="content content-wrapper">
         <div class="container">
@@ -20,40 +18,49 @@
                 <div id="calendar" class="calendarbox"></div>
                 <div id="event-list-container" class="event-list-container"></div>
             </div>
-
             {% include 'modal/event_details_modal.html' %}
             {% include 'modal/error_modal.html' %}
-
             <div class="messages" style="margin: 20px 0">
                 {% if messages %}
                     {% for message in messages %}
-                        <div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
+                        <div class="alert alert-dismissible
+                                    {% if message.tags %}
+                                        alert-
+                                        {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
+                                            danger
+                                        {% else %}
+                                            {{ message.tags }}
+                                        {% endif %}
+                                    {% endif %}"
                              role="alert">{{ message }}</div>
                     {% endfor %}
                 {% endif %}
             </div>
         </div>
     </section>
-    <div id="customContextMenu" style="display: none; position: absolute; z-index: 1000;">
-
-        <a id="newAppointmentOption" class="btn btn-sm btn-phoenix-success rounded-pill me-1 mb-1" href="#">{{ _("New Appointment")}}</a>
-
+    <div id="customContextMenu"
+         style="display: none;
+                position: absolute;
+                z-index: 1000">
+        <a id="newAppointmentOption"
+           class="btn btn-sm btn-phoenix-success rounded-pill me-1 mb-1"
+           href="#">{{ _("New Appointment") }}</a>
     </div>
-
     {% include 'modal/confirm_modal.html' %}
 {% endblock %}
-
-
 {% block customJS %}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.js"
             integrity="sha512-3CuraBvy05nIgcoXjVN33mACRyI89ydVHg7y/HMN9wcTVbHeur0SeBzweSd/rxySapO7Tmfu68+JlKkLTnDFNg=="
-            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.45/moment-timezone-with-data.min.js"
             integrity="sha512-t/mY3un180WRfsSkWy4Yi0tAxEDGcY2rAEx873hb5BrkvLA0QLk54+SjfYgFBBoCdJDV1H86M8uyZdJhAOHeyA=="
-            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.10/index.global.min.js"
             integrity="sha512-JCQkxdym6GmQ+AFVioDUq8dWaWN6tbKRhRyHvYZPupQ6DxpXzkW106FXS1ORgo/m3gxtt5lHRMqSdm2OfPajtg=="
-            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"></script>
     <script>
         const timezone = "{{ timezone }}";
         const locale = "{{ locale }}";
@@ -88,13 +95,11 @@
         const noServiceOfferedTxt = "{% trans "You don't offer any service. Add new service from your profile." %}";
         const noStaffMemberTxt = "{% trans "No staff members found." %}";
     </script>
-
     <script src="{% static 'js/modal/error_modal.js' %}"></script>
     <script src="{% static 'js/app_admin/staff_index.js' %}"></script>
     <script src="{% static 'js/modal/show_modal.js' %}"></script>
     <script src="{% static 'js/js-utils.js' %}"></script>
-
-        <script>
+    <script>
         function createCommonInputFields(appointment, servicesDropdown, isEditMode, defaultStartTime, staffDropdown) {
             const startTimeValue = isEditMode ? moment(appointment.start_time).format('HH:mm:ss') : defaultStartTime;
             const disabledAttribute = isEditMode ? '' : 'disabled';
diff --git a/templates/administration/staff_list.html b/templates/administration/staff_list.html
index e8761fd2..b4cc2fe0 100644
--- a/templates/administration/staff_list.html
+++ b/templates/administration/staff_list.html
@@ -1,26 +1,17 @@
 {% extends 'base.html' %}
 {% load i18n %}
 {% load static %}
-{% block customCSS %}
-
-{% endblock %}
-{% block title %}
-    {{ _("Staff Members List")}}
-{% endblock %}
+{% block customCSS %}{% endblock %}
+{% block title %}{{ _("Staff Members List") }}{% endblock %}
 {% block description %}
     {% trans 'List of all staff members' %}.
 {% endblock %}
 {% block body %}
-
-
     <div class="row">
         <div class="col-6">
             <h3 class="section-header-itm">{% trans 'Staff Members' %}</h3>
             <div class="buttons-container section-header-itm">
-                <a href="{{ btn_staff_me_link }}"
-                   class="btn btn-sm btn-phoenix-info">
-                    {{ btn_staff_me }}
-                </a>
+                <a href="{{ btn_staff_me_link }}" class="btn btn-sm btn-phoenix-info">{{ btn_staff_me }}</a>
                 <a href="{% url 'appointment:add_staff_member_info' %}"
                    class="btn btn-sm btn-phoenix-success">{{ _("Add") }}
                     <i class="fas fa-add"></i>
@@ -53,16 +44,12 @@
                             <td colspan="3">{% trans 'No staff members found' %}.</td>
                         </tr>
                     {% endfor %}
-                    <small>
-                        {% trans "PS: Remove means, deleting the staff status of the user. The user account is still active." %}
-                    </small>
+                    <small>{% trans "PS: Remove means, deleting the staff status of the user. The user account is still active." %}</small>
                 </tbody>
             </table>
         </div>
     </div>
-
 {% endblock %}
-
 {% block customJS %}
     <script src="{% static 'js/js-utils.js' %}"></script>
 {% endblock %}
diff --git a/templates/administration/user_profile.html b/templates/administration/user_profile.html
index f7a198d3..c04fa33b 100644
--- a/templates/administration/user_profile.html
+++ b/templates/administration/user_profile.html
@@ -1,28 +1,26 @@
 {% extends BASE_TEMPLATE %}
 {% load i18n %}
 {% load static %}
-{% block customCSS %}
-
-{% endblock %}
-{% block title %}
-    {{ page_title }}
-{% endblock %}
-{% block description %}
-    {{ page_description }}
-{% endblock %}
+{% block customCSS %}{% endblock %}
+{% block title %}{{ page_title }}{% endblock %}
+{% block description %}{{ page_description }}{% endblock %}
 {% block content %}
-
     <div class="row mt-4">
         <div class="col-6">
             {% translate "Confirm Deletion" as modal_title %}
             {% translate "Delete" as delete_btn_modal %}
-
             <h3>{% trans 'Personal Information' %}</h3>
-                <!-- Display fields from PersonalInformationForm -->
+            <!-- Display fields from PersonalInformationForm -->
             <div class="section-content">
-                <p><strong>{% trans 'First name' %}:</strong> {{ user.first_name }}</p>
-                <p><strong>{% trans 'Last name' %}:</strong> {{ user.last_name }}</p>
-                <p><strong>{% trans 'Email' %}:</strong> {{ user.email }}</p>
+                <p>
+                    <strong>{% trans 'First name' %}:</strong> {{ user.first_name }}
+                </p>
+                <p>
+                    <strong>{% trans 'Last name' %}:</strong> {{ user.last_name }}
+                </p>
+                <p>
+                    <strong>{% trans 'Email' %}:</strong> {{ user.email }}
+                </p>
             </div>
             <a href="{% url 'appointment:update_user_info' user.id %}"
                class="btn btn-sm btn-phoenix-primary">
@@ -30,32 +28,34 @@
             </a>
         </div>
     </div>
-
-            <!-- Appointment Information Section -->
+    <!-- Appointment Information Section -->
     <div class="row mt-4">
         <div class="col-6">
             <h3>{% trans 'Appointments Information' %}</h3>
-            <small>
-                {{ service_msg }}
-            </small>
+            <small>{{ service_msg }}</small>
             {% if staff_member %}
                 <div class="section-content">
                     <p>
                         <strong>{% trans 'Slot duration' %}:</strong> {{ staff_member.get_slot_duration_text }}
-                        <i class="fas fa-info-circle" data-toggle="tooltip"
+                        <i class="fas fa-info-circle"
+                           data-toggle="tooltip"
                            title="{{ slot_duration_help_text }}"></i>
                     </p>
-                    <p><strong>{% trans 'General start time' %}:</strong> {{ staff_member.get_lead_time }}</p>
-                    <p><strong>{% trans 'General end time' %}:</strong> {{ staff_member.get_finish_time }}</p>
+                    <p>
+                        <strong>{% trans 'General start time' %}:</strong> {{ staff_member.get_lead_time }}
+                    </p>
+                    <p>
+                        <strong>{% trans 'General end time' %}:</strong> {{ staff_member.get_finish_time }}
+                    </p>
                     <p>
                         <strong>{% trans 'Weekend days you work' %}:</strong> {{ staff_member.get_weekend_days_worked_text }}
                     </p>
-
                     <p>
                         <strong>{% trans 'Appointment buffer time' %}:</strong> {{ staff_member.get_appointment_buffer_time_text }}
-                        <i class="fas fa-info-circle" data-toggle="tooltip" title="{{ buffer_time_help_text }}"></i>
+                        <i class="fas fa-info-circle"
+                           data-toggle="tooltip"
+                           title="{{ buffer_time_help_text }}"></i>
                     </p>
-
                 </div>
                 <a href="{% url 'appointment:update_staff_other_info' staff_member.user.id %}"
                    class="btn btn-sm section-content-button modify-btn button-color-blue btn-phoenix-primary">
@@ -72,8 +72,7 @@
             {% endif %}
         </div>
     </div>
-
-            <!-- Days Off Information Section -->
+    <!-- Days Off Information Section -->
     <section class="profile">
         <div class="container">
             <h3>{% trans 'Days Off' %}</h3>
@@ -140,8 +139,7 @@
             </div>
         </div>
     </section>
-
-            <!-- Working Hours Information Section -->
+    <!-- Working Hours Information Section -->
     <section class="profile">
         <div class="container">
             <h3>{% trans 'Working Hours' %}</h3>
@@ -165,7 +163,6 @@
                     <tbody>
                         {% for working_hour in working_hours %}
                             <tr>
-
                                 {% if working_hour.day_of_week == 0 %}
                                     <td>{{ _("Sunday") }}</td>
                                 {% elif working_hour.day_of_week == 1 %}
@@ -181,7 +178,6 @@
                                 {% elif working_hour.day_of_week == 6 %}
                                     <td>{{ _("Saturday") }}</td>
                                 {% endif %}
-
                                 <td>{{ working_hour.start_time|time:"g:i A" }}</td>
                                 <td>{{ working_hour.end_time|time:"g:i A" }}</td>
                                 <td>
@@ -224,8 +220,7 @@
             </div>
         </div>
     </section>
-
-            <!-- Service Information Section -->
+    <!-- Service Information Section -->
     <section class="profile">
         <div class="container">
             <h3>{% trans 'Service Offered' %}</h3>
@@ -265,17 +260,11 @@
             </div>
         </div>
     </section>
-
-
     {% include 'modal/confirm_modal.html' %}
 {% endblock %}
 {% block customJS %}
     <!-- Bootstrap's JS and CSS (if not already included) -->
-
-
     <!-- Our custom modal JS -->
     <script src="{% static 'js/modal/show_modal.js' %}"></script>
-
     <script src="{% static 'js/js-utils.js' %}"></script>
 {% endblock %}
-
diff --git a/templates/appointment/appointment_client_information.html b/templates/appointment/appointment_client_information.html
index 6fc4a89b..19abd55c 100644
--- a/templates/appointment/appointment_client_information.html
+++ b/templates/appointment/appointment_client_information.html
@@ -2,7 +2,9 @@
 {% load i18n %}
 {% load static %}
 {% block customCSS %}
-    <link rel="stylesheet" type="text/css" href="{% static 'css/appointments-user-details.css' %}"/>
+    <link rel="stylesheet"
+          type="text/css"
+          href="{% static 'css/appointments-user-details.css' %}" />
 {% endblock %}
 {% block title %}
     {% translate 'Client Information' %} - {{ ar.get_service_name }}
@@ -22,9 +24,7 @@
                 {% csrf_token %}
                 <div class="appointment-user-info">
                     <div class="appointment-user-info-title">
-                        <div class="title">
-                            {% trans "Fill out your details" %}
-                        </div>
+                        <div class="title">{% trans "Fill out your details" %}</div>
                     </div>
                     <hr class="second-part">
                     <div class="user-info-input">
@@ -37,10 +37,14 @@
                                 </div>
                             </div>
                             <div class="name-email">
-                                <label for="{{ form.name.id_for_label }}" class="name">{% trans "Full Name" %} *<br>
+                                <label for="{{ form.name.id_for_label }}" class="name">
+                                    {% trans "Full Name" %} *
+                                    <br>
                                     {{ client_data_form.name }}
                                 </label>
-                                <label for="{{ form.email.id_for_label }}" class="email">{% trans "Email" %} *<br>
+                                <label for="{{ form.email.id_for_label }}" class="email">
+                                    {% trans "Email" %} *
+                                    <br>
                                     {{ client_data_form.email }}
                                 </label>
                             </div>
@@ -52,19 +56,22 @@
                             </div>
                             <div class="phone-number">
                                 <label for="{{ form.phone.id_for_label }}">
-                                    {% trans "Phone" %} *<br>
+                                    {% trans "Phone" %} *
+                                    <br>
                                 </label>
-                                <div class="phone-input-container">
-                                    {{ form.phone }}
-                                </div>
+                                <div class="phone-input-container">{{ form.phone }}</div>
                             </div>
                             <div class="address">
-                                <label for="{{ form.address.id_for_label }}">{% trans "City and State" %} * :<br>
+                                <label for="{{ form.address.id_for_label }}">
+                                    {% trans "City and State" %} * :
+                                    <br>
                                     {{ form.address }}
                                 </label>
                             </div>
                             <div class="additional-information">
-                                <label for="{{ form.additional_info.id_for_label }}">{% trans 'Additional Information' %}<br>
+                                <label for="{{ form.additional_info.id_for_label }}">
+                                    {% trans 'Additional Information' %}
+                                    <br>
                                     {{ form.additional_info }}
                                 </label>
                             </div>
@@ -73,18 +80,14 @@
                 </div>
                 <div class="service-description-and-pay">
                     <div class="service-details-title">{% trans "Service Details" %}</div>
-
                     <hr class="second-part">
-
                     <div class="service-description-content">
                         <div class="item-name">{{ ar.get_service_name }}</div>
-                        <div id="service-datetime-chosen"
-                             class="service-datetime-chosen">
+                        <div id="service-datetime-chosen" class="service-datetime-chosen">
                             {{ ar.date }}&nbsp;{% trans "at" %}&nbsp;{{ ar.start_time }}
                         </div>
                         <div>{{ ar.service.get_duration }}</div>
                     </div>
-
                     <hr class="second-part">
                     {% if ar.is_a_paid_service %}
                         {% if APPOINTMENT_PAYMENT_URL %}
@@ -95,12 +98,13 @@
                                     <div>${{ ar.get_service_price }}</div>
                                 </div>
                                 <div class="payment-options">
-                                    <button type="submit" class="btn btn-phoenix-primary btn-pay-full" name="payment_type"
-                                            value="full">
-                                        {% trans "Pay" %}
-                                    </button>
+                                    <button type="submit"
+                                            class="btn btn-phoenix-primary btn-pay-full"
+                                            name="payment_type"
+                                            value="full">{% trans "Pay" %}</button>
                                     {% if ar.accepts_down_payment %}
-                                        <button type="submit" class="btn btn-phoenix-primary btn-pay-down-payment"
+                                        <button type="submit"
+                                                class="btn btn-phoenix-primary btn-pay-down-payment"
                                                 name="payment_type"
                                                 value="down">
                                             {% trans "Down Payment" %} (${{ ar.get_service_down_payment }})
@@ -109,16 +113,16 @@
                                 </div>
                             </div>
                         {% else %}
-                            <button type="submit" class="btn btn-phoenix-primary btn-submit-appointment" name="payment_type"
-                                    value="full">
-                                {% trans "Finish" %}
-                            </button>
+                            <button type="submit"
+                                    class="btn btn-phoenix-primary btn-submit-appointment"
+                                    name="payment_type"
+                                    value="full">{% trans "Finish" %}</button>
                         {% endif %}
                     {% else %}
-                        <button type="submit" class="btn btn-phoenix-primary btn-submit-appointment" name="payment_type"
-                                value="full">
-                            {% trans "Finish" %}
-                        </button>
+                        <button type="submit"
+                                class="btn btn-phoenix-primary btn-submit-appointment"
+                                name="payment_type"
+                                value="full">{% trans "Finish" %}</button>
                     {% endif %}
                 </div>
             </form>
diff --git a/templates/appointment/appointments.html b/templates/appointment/appointments.html
index 62d35353..51911bd4 100644
--- a/templates/appointment/appointments.html
+++ b/templates/appointment/appointments.html
@@ -2,69 +2,69 @@
 {% load i18n %}
 {% load static %}
 {% block customCSS %}
-    <link rel="stylesheet" type="text/css" href="{% static 'css/appt-common.css' %}"/>
-    <link rel="stylesheet" type="text/css" href="{% static 'css/appointments.css' %}"/>
-{% endblock %}
-{% block title %}
-    {{ page_title }}
-{% endblock %}
-{% block description %}
-    {{ page_description }}
+    <link rel="stylesheet"
+          type="text/css"
+          href="{% static 'css/appt-common.css' %}" />
+    <link rel="stylesheet"
+          type="text/css"
+          href="{% static 'css/appointments.css' %}" />
 {% endblock %}
+{% block title %}{{ page_title }}{% endblock %}
+{% block description %}{{ page_description }}{% endblock %}
 {% block body %}
     <div class="row">
         <div class="col-xl-12">
             <h3 class="page-title">
-                {% if page_header %}{{ page_header }}{% else %}{{ service.name }}{% endif %} </h3>
+                {% if page_header %}
+                    {{ page_header }}
+                {% else %}
+                    {{ service.name }}
+                {% endif %}
+            </h3>
             <small class="page-description">
                 {% trans "Check out our availability and book the date and time that works for you" %}
             </small>
-
             <hr>
-
             <div class="djangoAppt_page-body">
                 <div class="djangoAppt_appointment-calendar">
                     <div class="djangoAppt_appointment-calendar-title-timezone">
-                        <div class="djangoAppt_title">
-                            {% trans "Select a date and time" %}
-                        </div>
-                        <div class="djangoAppt_timezone-details">
-                            {% trans "Timezone" %}:&nbsp;{{ timezoneTxt }}
-                        </div>
+                        <div class="djangoAppt_title">{% trans "Select a date and time" %}</div>
+                        <div class="djangoAppt_timezone-details">{% trans "Timezone" %}:&nbsp;{{ timezoneTxt }}</div>
                     </div>
                     <hr class="djangoAppt_second-part">
                     <div class="djangoAppt_calendar-and-slot">
-                        <div class="djangoAppt_calendar" id="calendar">
-                        </div>
+                        <div class="djangoAppt_calendar" id="calendar"></div>
                         <div class="djangoAppt_slot">
                             <div class="djangoAppt_date_chosen">{{ date_chosen }}</div>
                             <div class="slot-container">
                                 <div class="error-message"></div>
                                 <ul id="slot-list" class="djangoAppt_slot-list">
-                                        <!-- Slot list will be updated dynamically by the AJAX request -->
+                                    <!-- Slot list will be updated dynamically by the AJAX request -->
                                 </ul>
                             </div>
-
                         </div>
                     </div>
                     {% if rescheduled_date %}
                         <div class="form-group" style="margin-top: 10px">
                             <label for="reason_for_rescheduling">{% trans "Reason for rescheduling" %}:</label>
-                            <textarea name="reason_for_rescheduling" id="reason_for_rescheduling"
-                                      class="form-control" rows="1" required></textarea>
+                            <textarea name="reason_for_rescheduling"
+                                      id="reason_for_rescheduling"
+                                      class="form-control"
+                                      rows="1"
+                                      required></textarea>
                         </div>
                     {% endif %}
                 </div>
                 <div class="djangoAppt_service-description">
-                    <form method="post" action="{% url 'appointment:appointment_request_submit' %}"
+                    <form method="post"
+                          action="{% url 'appointment:appointment_request_submit' %}"
                           class="appointment-form">
                         {% csrf_token %}
                         <div class="staff-members-list">
                             <label class="djangoAppt_item-name" for="staff_id">{{ label }}</label>
                             <select name="staff_member" id="staff_id">
                                 {% if not staff_member %}
-                                    <option value="none"
-                                            selected>{% trans 'Please select a staff member' %}</option>
+                                    <option value="none" selected>{% trans 'Please select a staff member' %}</option>
                                 {% endif %}
                                 {% for sf in all_staff_members %}
                                     <option value="{{ sf.id }}"
@@ -72,7 +72,6 @@
                                 {% endfor %}
                             </select>
                         </div>
-
                         <div>{% trans "Service Details" %}</div>
                         <hr class="djangoAppt_second-part">
                         <div class="djangoAppt_service-description-content">
@@ -89,25 +88,34 @@
             </div>
             {% if messages %}
                 {% for message in messages %}
-                    <div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
+                    <div class="alert alert-dismissible
+                                {% if message.tags %}
+                                    alert-
+                                    {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
+                                        danger
+                                    {% else %}
+                                        {{ message.tags }}
+                                    {% endif %}
+                                {% endif %}"
                          role="alert">{{ message }}</div>
                 {% endfor %}
             {% endif %}
         </div>
     </div>
-
 {% endblock %}
-
 {% block customJS %}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.js"
             integrity="sha512-3CuraBvy05nIgcoXjVN33mACRyI89ydVHg7y/HMN9wcTVbHeur0SeBzweSd/rxySapO7Tmfu68+JlKkLTnDFNg=="
-            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.45/moment-timezone-with-data.min.js"
             integrity="sha512-t/mY3un180WRfsSkWy4Yi0tAxEDGcY2rAEx873hb5BrkvLA0QLk54+SjfYgFBBoCdJDV1H86M8uyZdJhAOHeyA=="
-            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.10/index.global.min.js"
             integrity="sha512-JCQkxdym6GmQ+AFVioDUq8dWaWN6tbKRhRyHvYZPupQ6DxpXzkW106FXS1ORgo/m3gxtt5lHRMqSdm2OfPajtg=="
-            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"></script>
     <script>
         const timezone = "{{ timezoneTxt }}";
         const locale = "{{ locale }}";
diff --git a/templates/appointment/default_thank_you.html b/templates/appointment/default_thank_you.html
index 7d066b6c..1f927faa 100644
--- a/templates/appointment/default_thank_you.html
+++ b/templates/appointment/default_thank_you.html
@@ -2,19 +2,19 @@
 {% load i18n %}
 {% load static %}
 {% block customCSS %}
-    <link rel="stylesheet" type="text/css" href="{% static 'css/thank_you.css' %}"/>
-{% endblock %}
-{% block title %}
-    {{ page_title }}
-{% endblock %}
-{% block description %}
-    {{ page_description }}
+    <link rel="stylesheet"
+          type="text/css"
+          href="{% static 'css/thank_you.css' %}" />
 {% endblock %}
+{% block title %}{{ page_title }}{% endblock %}
+{% block description %}{{ page_description }}{% endblock %}
 {% block body %}
     <div class="container content-body-apd">
         <div class="main-content">
             <h1 class="thank-you-title">{% trans "See you soon" %} !</h1>
-            <p class="thank-you-message">{% trans "We've successfully scheduled your appointment! Please check your email for all the details" %}.</p>
+            <p class="thank-you-message">
+                {% trans "We've successfully scheduled your appointment! Please check your email for all the details" %}.
+            </p>
             <p class="appointment-details-title">{% trans "Appointment details" %}:</p>
             <ul class="appointment-details">
                 <li>{% trans 'Service' %}: {{ appointment.get_service_name }}</li>
@@ -24,7 +24,15 @@
             </ul>
             {% if messages %}
                 {% for message in messages %}
-                    <div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
+                    <div class="alert alert-dismissible
+                                {% if message.tags %}
+                                    alert-
+                                    {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
+                                        danger
+                                    {% else %}
+                                        {{ message.tags }}
+                                    {% endif %}
+                                {% endif %}"
                          role="alert">{{ message }}</div>
                 {% endfor %}
             {% endif %}
@@ -33,4 +41,4 @@
 {% endblock %}
 {% block customJS %}
     <script src="{% static 'js/js-utils.js' %}"></script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/appointment/enter_verification_code.html b/templates/appointment/enter_verification_code.html
index 6b157a11..9eb7d8a3 100644
--- a/templates/appointment/enter_verification_code.html
+++ b/templates/appointment/enter_verification_code.html
@@ -1,39 +1,39 @@
 {% extends BASE_TEMPLATE %}
 {% load i18n %}
 {% load static %}
-
 {% block customCSS %}
     <link rel="stylesheet" href="{% static 'css/verification_code.css' %}">
 {% endblock %}
-
-{% block title %}{% trans 'Enter Verification Code' %}{% endblock %}
-{% block description %}{% trans 'Enter Verification Code' %}{% endblock %}
-
+{% block title %}
+    {% trans 'Enter Verification Code' %}
+{% endblock %}
+{% block description %}
+    {% trans 'Enter Verification Code' %}
+{% endblock %}
 {% block body %}
     <div class="vcode-container">
         <div class="vcode-card">
             <h1 class="vcode-title">{% trans 'Enter Verification Code' %}</h1>
             <p class="vcode-instruction">{% trans "We've sent a verification code to your email. Please enter it below" %}:</p>
-
             <form method="post" class="vcode-form">
                 {% csrf_token %}
                 <div class="vcode-input-group">
                     <label for="verification-code" class="vcode-label">{% trans 'Code' %}:</label>
-                    <input type="text" id="verification-code" name="code" class="vcode-input" required>
+                    <input type="text"
+                           id="verification-code"
+                           name="code"
+                           class="vcode-input"
+                           required>
                 </div>
                 <button type="submit" class="vcode-button">{% trans 'Submit' %}</button>
             </form>
-
             {% if messages %}
                 {% for message in messages %}
-                    <div class="vcode-alert vcode-alert-{% if message.tags %}{{ message.tags }}{% endif %}">
-                        {{ message }}
-                    </div>
+                    <div class="vcode-alert vcode-alert-
+                                {% if message.tags %}{{ message.tags }}{% endif %}">{{ message }}</div>
                 {% endfor %}
             {% endif %}
         </div>
     </div>
 {% endblock %}
-
-{% block customJS %}
-{% endblock %}
\ No newline at end of file
+{% block customJS %}{% endblock %}
diff --git a/templates/appointment/rescheduling_thank_you.html b/templates/appointment/rescheduling_thank_you.html
index 715c917a..4b90ef66 100644
--- a/templates/appointment/rescheduling_thank_you.html
+++ b/templates/appointment/rescheduling_thank_you.html
@@ -62,12 +62,22 @@
         <div class="main-content">
             <div class="confirmation-message">
                 <h1>{% trans "Rescheduling Successful" %}</h1>
-                <p>{% trans "Your appointment rescheduling request has been successfully submitted. Please check your email and click on the confirmation link to finalize the rescheduling process." %}</p>
+                <p>
+                    {% trans "Your appointment rescheduling request has been successfully submitted. Please check your email and click on the confirmation link to finalize the rescheduling process." %}
+                </p>
                 <a href="/">{% trans "Go to Homepage" %}</a>
             </div>
             {% if messages %}
                 {% for message in messages %}
-                    <div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
+                    <div class="alert alert-dismissible
+                                {% if message.tags %}
+                                    alert-
+                                    {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
+                                        danger
+                                    {% else %}
+                                        {{ message.tags }}
+                                    {% endif %}
+                                {% endif %}"
                          role="alert">{{ message }}</div>
                 {% endfor %}
             {% endif %}
@@ -76,4 +86,4 @@
 {% endblock %}
 {% block customJS %}
     <script src="{% static 'js/js-utils.js' %}"></script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/appointment/set_password.html b/templates/appointment/set_password.html
index a92731ae..cfdc4564 100644
--- a/templates/appointment/set_password.html
+++ b/templates/appointment/set_password.html
@@ -83,22 +83,21 @@
 {% block body %}
     <div class="container">
         <h2>{% trans 'Reset Your Password' %}</h2>
-    <!-- Display messages -->
+        <!-- Display messages -->
         {% if messages %}
             <ul class="messages">
                 {% for message in messages %}
-                    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
+                    <li {% if message.tags %}class="{{ message.tags }}"{% endif %}>{{ message }}</li>
                 {% endfor %}
             </ul>
         {% endif %}
-
-    <!-- Password Reset Form -->
+        <!-- Password Reset Form -->
         <form method="post">
             {% csrf_token %}
             {{ form.as_p }}  <!-- Renders the form fields -->
             <button type="submit">{% trans 'Reset Password' %}</button>
         </form>
-{% endblock %}
-{% block customJS %}
-    <script src="{% static 'js/js-utils.js' %}"></script>
-{% endblock %}
\ No newline at end of file
+    {% endblock %}
+    {% block customJS %}
+        <script src="{% static 'js/js-utils.js' %}"></script>
+    {% endblock %}
diff --git a/templates/appointment/thank_you.html b/templates/appointment/thank_you.html
index 335760b8..314343b3 100644
--- a/templates/appointment/thank_you.html
+++ b/templates/appointment/thank_you.html
@@ -37,12 +37,18 @@
 {% block body %}
     <div class="container">
         <h1 class="title">{{ page_title }}</h1>
-        <p class="message">
-            {{ page_message }}
-        </p>
+        <p class="message">{{ page_message }}</p>
         {% if messages %}
             {% for message in messages %}
-                <div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
+                <div class="alert alert-dismissible
+                            {% if message.tags %}
+                                alert-
+                                {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
+                                    danger
+                                {% else %}
+                                    {{ message.tags }}
+                                {% endif %}
+                            {% endif %}"
                      role="alert">{{ message }}</div>
             {% endfor %}
         {% endif %}
diff --git a/templates/auth_base.html b/templates/auth_base.html
index 9bdba65d..15f6c912 100644
--- a/templates/auth_base.html
+++ b/templates/auth_base.html
@@ -1,91 +1,100 @@
-{% load static %} {% load i18n %}
+{% load static %}
+{% load i18n %}
 <!DOCTYPE html>
 {% get_current_language as LANGUAGE_CODE %}
 <html lang="{{ LANGUAGE_CODE }}"
-      dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}"
+      dir="{% if LANGUAGE_CODE == 'ar' %}
+               rtl
+           {% else %}
+               ltr
+           {% endif %}"
       data-bs-theme=""
       data-navigation-type="default"
       data-navbar-horizontal-shape="default">
-
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta name="description" content="Haikal - The Backbone of Car Qar: An innovative car inventory management system designed to streamline dealership operations. Manage inventory, sales, transfers, and accounting seamlessly with advanced analytics and intuitive tools. Inspired by Arabic origins, Haikal empowers businesses with precision and efficiency.">
-
-        <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' %}">
-        <link rel="shortcut icon" type="image/x-icon" href="{% static 'images/favicons/favicon.ico' %}">
+        <meta name="description"
+              content="Haikal - The Backbone of Car Qar: An innovative car inventory management system designed to streamline dealership operations. Manage inventory, sales, transfers, and accounting seamlessly with advanced analytics and intuitive tools. Inspired by Arabic origins, Haikal empowers businesses with precision and efficiency.">
+        <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' %}">
+        <link rel="shortcut icon"
+              type="image/x-icon"
+              href="{% static 'images/favicons/favicon.ico' %}">
         <link rel="manifest" href="{% static 'images/favicons/manifest.json' %}">
-        <meta name="msapplication-TileImage" content="{% static 'images/logos/logo-d.png' %}">
+        <meta name="msapplication-TileImage"
+              content="{% static 'images/logos/logo-d.png' %}">
         <meta name="theme-color" content="#ffffff">
-
         <script src="{% static 'vendors/simplebar/simplebar.min.js' %}"></script>
         <script src="{% static 'js/config.js' %}"></script>
         <script src="{% static 'js/sweetalert2.all.min.js' %}"></script>
-
-
-
-    <!-- ===============================================-->
-    <!--    Stylesheets-->
-    <!-- ===============================================-->
-
-
-        <link href="{% static 'vendors/mapbox-gl/mapbox-gl.css' %}" rel="stylesheet">
-        <link href="{% static 'vendors/swiper/swiper-bundle.min.css' %}" rel="stylesheet">
+        <!-- ===============================================-->
+        <!--    Stylesheets-->
+        <!-- ===============================================-->
+        <link href="{% static 'vendors/mapbox-gl/mapbox-gl.css' %}"
+              rel="stylesheet">
+        <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="{% static 'vendors/simplebar/simplebar.min.css' %}" 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">
+        <link rel="stylesheet"
+              href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
         {% if LANGUAGE_CODE == 'en' %}
-            <link href="{% static 'css/theme.min.css' %}" type="text/css" rel="stylesheet" id="style-default">
-            <link href="{% static 'css/user.min.css' %}" type="text/css" rel="stylesheet" id="user-style-default">
+            <link href="{% static 'css/theme.min.css' %}"
+                  type="text/css"
+                  rel="stylesheet"
+                  id="style-default">
+            <link href="{% static 'css/user.min.css' %}"
+                  type="text/css"
+                  rel="stylesheet"
+                  id="user-style-default">
         {% else %}
-            <link href="{% static 'css/theme-rtl.min.css' %}" type="text/css" rel="stylesheet" id="style-rtl">
-            <link href="{% static 'css/user-rtl.min.css' %}" type="text/css" rel="stylesheet" id="user-style-rtl">
+            <link href="{% static 'css/theme-rtl.min.css' %}"
+                  type="text/css"
+                  rel="stylesheet"
+                  id="style-rtl">
+            <link href="{% static 'css/user-rtl.min.css' %}"
+                  type="text/css"
+                  rel="stylesheet"
+                  id="user-style-rtl">
         {% endif %}
-
     </head>
-
     <body>
         {% include 'messages.html' %}
         <main class="main" id="top">
-
             <div class="content">
-
-                {% block content %}
-    <!-- Main content goes here -->
-                {% endblock %}
-
-
+                {% block content %}<!-- Main content goes here -->{% endblock %}
             </div>
-
-
-
         </main>
-    <!-- ===============================================-->
-    <!--    End of Main Content-->
-    <!-- ===============================================-->
-        <script>
-
-
-
-
-        </script>
-        {% block customJS %}{% endblock customJS %}
-
-
-
-    <!-- ===============================================-->
-    <!--    JavaScripts-->
-    <!-- ===============================================-->
+        <!-- ===============================================-->
+        <!--    End of Main Content-->
+        <!-- ===============================================-->
+        <script></script>
+        {% block customJS %}
+        {% endblock customJS %}
+        <!-- ===============================================-->
+        <!--    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>
@@ -102,5 +111,4 @@
         <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
         <script src="{% static 'vendors/swiper/swiper-bundle.min.js' %}"></script>
     </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/base.html b/templates/base.html
index 913fe6c8..a487fd54 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,8 +1,12 @@
-{% load i18n static%}
+{% load i18n static %}
 <!DOCTYPE html>
 {% get_current_language as LANGUAGE_CODE %}
 <html lang="{{ LANGUAGE_CODE }}"
-      dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}"
+      dir="{% if LANGUAGE_CODE == 'ar' %}
+               rtl
+           {% else %}
+               ltr
+           {% endif %}"
       data-bs-theme=""
       data-navigation-type="default"
       data-navbar-horizontal-shape="default">
@@ -10,22 +14,30 @@
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta name="description" content="Haikal - The Backbone of Car Qar: An innovative car inventory management system designed to streamline dealership operations. Manage inventory, sales, transfers, and accounting seamlessly with advanced analytics and intuitive tools. Inspired by Arabic origins, Haikal empowers businesses with precision and efficiency.">
+        <meta name="description"
+              content="Haikal - The Backbone of Car Qar: An innovative car inventory management system designed to streamline dealership operations. Manage inventory, sales, transfers, and accounting seamlessly with advanced analytics and intuitive tools. Inspired by Arabic origins, Haikal empowers businesses with precision and efficiency.">
         <title>
-            {% block title %}
-
-            {% endblock %}
-            {% block description %}
-            {% endblock %}
+            {% block title %}{% endblock %}
+            {% block description %}{% 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' %}">
-        <link rel="shortcut icon" type="image/x-icon" href="{% static 'images/favicons/favicon.ico' %}">
+        <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' %}">
+        <link rel="shortcut icon"
+              type="image/x-icon"
+              href="{% static 'images/favicons/favicon.ico' %}">
         <link rel="manifest" href="{% static 'images/favicons/manifest.json' %}">
-        <meta name="msapplication-TileImage" content="{% static 'images/logos/logo-d.png' %}">
+        <meta name="msapplication-TileImage"
+              content="{% static 'images/logos/logo-d.png' %}">
         <meta name="theme-color" content="#ffffff">
-
         {% comment %} <script src="{% static 'vendors/simplebar/simplebar.min.js' %}"></script> {% endcomment %}
         <script src="{% static 'js/config.js' %}"></script>
         <script src="{% static 'js/sweetalert2.all.min.js' %}"></script>
@@ -33,68 +45,68 @@
         {% comment %} <link href="{% static 'vendors/swiper/swiper-bundle.min.css' %}" rel="stylesheet"> {% endcomment %}
         <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">
         {% comment %} <link href="{% static 'vendors/simplebar/simplebar.min.css' %}" rel="stylesheet"> {% endcomment %}
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/index.css">
+        <link rel="stylesheet"
+              href="https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/index.css">
         {% comment %} <link href="{% static 'vendors/flatpickr/flatpickr.min.css' %}" rel="stylesheet"> {% endcomment %}
         <link href="{% static 'css/custom.css' %}" rel="stylesheet">
         {% comment %} <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css"> {% endcomment %}
         {% if LANGUAGE_CODE == 'ar' %}
-            <link href="{% static 'css/theme-rtl.min.css' %}" type="text/css" rel="stylesheet" id="style-rtl">
-            <link href="{% static 'css/user-rtl.min.css' %}" type="text/css" rel="stylesheet" id="user-style-rtl">
+            <link href="{% static 'css/theme-rtl.min.css' %}"
+                  type="text/css"
+                  rel="stylesheet"
+                  id="style-rtl">
+            <link href="{% static 'css/user-rtl.min.css' %}"
+                  type="text/css"
+                  rel="stylesheet"
+                  id="user-style-rtl">
         {% else %}
-            <link href="{% static 'css/theme.min.css' %}" type="text/css" rel="stylesheet" id="style-default">
-            <link href="{% static 'css/user.min.css' %}" type="text/css" rel="stylesheet" id="user-style-default">
+            <link href="{% static 'css/theme.min.css' %}"
+                  type="text/css"
+                  rel="stylesheet"
+                  id="style-default">
+            <link href="{% static 'css/user.min.css' %}"
+                  type="text/css"
+                  rel="stylesheet"
+                  id="user-style-default">
         {% endif %}
         <script src="{% static 'js/main.js' %}"></script>
         <script src="{% static 'js/jquery.min.js' %}"></script>
         {% comment %} <script src="{% static 'js/echarts.js' %}"></script> {% endcomment %}
-
-        {% block customCSS %}
-
-        {% endblock %}
+        {% block customCSS %}{% endblock %}
     </head>
     <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
-
         {% include "toast-alert.html" %}
         <main class="main" id="top">
             {% if request.user.is_authenticated %}
                 {% include 'header.html' %}
             {% endif %}
-
             <div class="content">
-
                 {% include "plans/expiration_messages.html" %}
                 {% block period_navigation %}
-
                 {% endblock period_navigation %}
-
                 {% block content %}
-
-                {% endblock content%}
+                {% endblock content %}
                 {% block body %}
-                {% endblock body%}
-
-
+                {% endblock body %}
                 {% include 'footer.html' %}
             </div>
         </main>
         {% comment %} <script src="{% static 'js/djetler.bundle.js' %}"></script>
         <script src="{% static 'js/js-utils.js' %}"></script> {% endcomment %}
         {% comment %} <script src="{% static 'js/modal/show_modal.js' %}"></script> {% endcomment %}
-
-    <!-- ===============================================-->
-    <!--    JavaScripts-->
-    <!-- ===============================================-->
+        <!-- ===============================================-->
+        <!--    JavaScripts-->
+        <!-- ===============================================-->
         <script src="{% static 'vendors/popper/popper.min.js' %}"></script>
         <!--1-->
         <script src="{% static 'vendors/bootstrap/bootstrap.min.js' %}"></script>
-
         {% comment %} <script src="{% static 'vendors/anchorjs/anchor.min.js' %}"></script>
         <script src="{% static 'vendors/is/is.min.js' %}"></script> {% endcomment %}
         <!--2-->
         <script src="{% static 'vendors/fontawesome/all.min.js' %}"></script>
-
         <script src="{% static 'vendors/lodash/lodash.min.js' %}"></script>
         {% comment %} <script src="{% static 'vendors/list.js/list.min.js' %}"></script> {% endcomment %}
         <script src="{% static 'vendors/feather-icons/feather.min.js' %}"></script>
@@ -104,15 +116,14 @@
         {% comment %} <script src="{% static 'vendors/echarts/echarts.min.js' %}"></script> {% endcomment %}
         {% comment %} <script src="{% static 'js/crm-analytics.js' %}"></script> {% endcomment %}
         {% comment %} <script src="{% static 'js/travel-agency-dashboard.js' %}"></script>
-        <script src="{% static 'js/crm-dashboard.js' %}"></script>
+                <script src="{% static 'js/crm-dashboard.js' %}"></script>
         <script src="{% static 'js/projectmanagement-dashboard.js' %}"></script> {% endcomment %}
-
         {% comment %} <script src="{% static 'vendors/mapbox-gl/mapbox-gl.js' %}"></script> {% endcomment %}
         {% comment %} <script src="{% static 'vendors/turf.min.js' %}"></script> {% endcomment %}
         <script src="{% static 'vendors/htmx.min.js' %}"></script>
+        <script src="{% static 'js/formSubmitHandler.js' %}"></script>
         {% comment %} <script src="{% static 'vendors/swiper/swiper-bundle.min.js' %}"></script>
         <script src="{% static 'vendors/flatpickr/flatpickr.min.js' %}"></script> {% endcomment %}
-
         <script>
             {% if entity_slug %}
                 let entitySlug = "{{ view.kwargs.entity_slug }}"
@@ -129,8 +140,6 @@
                 datePickers.forEach(dp => djLedger.getCalendar(dp.attributes.id.value, dateNavigationUrl))
             {% endif %}
         </script>
-        {% block customJS %}
-        {% endblock %}
-
+        {% block customJS %}{% endblock %}
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/bill/bill_create.html b/templates/bill/bill_create.html
index 5d8d7f64..84f9f528 100644
--- a/templates/bill/bill_create.html
+++ b/templates/bill/bill_create.html
@@ -10,7 +10,6 @@
 {% block content %}
 
     <!---->
-
     <div class="row justify-content-center mt-5 mb-3">
 
        <div class="col-lg-8 col-md-10">
@@ -60,9 +59,6 @@
 
             </div>
         </div>
-
-       </div>
-
-   </div>
+    </div>
     <!---->
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/bill/bill_detail.html b/templates/bill/bill_detail.html
index f0e71b30..a697679c 100644
--- a/templates/bill/bill_detail.html
+++ b/templates/bill/bill_detail.html
@@ -3,260 +3,220 @@
 {% load static %}
 {% load django_ledger %}
 {% load custom_filters %}
-
 {% block title %}Bill Details - {{ block.super }}{% endblock %}
-
 {% block customCSS %}
-  <style>
+    <style>
   /* Optional custom overrides for Bootstrap 5 */
-    .table th,
-    .table td {
-      vertical-align: middle;
-    }
+        .table th,
+        .table td {
+            vertical-align: middle;
+        }
 
-    .card-header i {
-      font-size: 1.25rem;
-    }
+        .card-header i {
+            font-size: 1.25rem;
+        }
 
-    .text-xs {
-      font-size: 0.75rem;
-    }
+        .text-xs {
+            font-size: 0.75rem;
+        }
 
-    .text-xxs {
-      font-size: 0.6rem;
-    }
+        .text-xxs {
+            font-size: 0.6rem;
+        }
 
-    #djl-vendor-card-widget{
+        #djl-vendor-card-widget{
 
-      max-height:30rem;
-    }
+            max-height:30rem;
+        }
 
 
-  </style>
+    </style>
 {% endblock %}
-
 {% block content %}
- <div class="row mt-3 mb-2">
-
-    <div class="col-12 col-md-3">
-        <div class="row">
-            <div class="col-12 mb-3">
-                <div class="card shadow-sm">
-                    <div class="card-body">
-                        {% include 'bill/includes/card_bill.html' with dealer_slug=request.dealer.slug bill=bill entity_slug=view.kwargs.entity_slug style='bill-detail' %}
-                        
-                    </div>
-                </div>
-            </div>
-
-        </div>
-        <div class="col-12">
-
-            <div class="card shadow-sm ">
-                <div class="card-header pb-0">
-                    <div class="d-flex align-items-center mb-2">
-                        <i class="fas fa-sticky-note me-3 text-primary"></i>
-                        <h5 class="mb-0">{% trans 'Bill Notes' %}</h5>
-                    </div>
-                </div>
-                {% if perms.django_ledger.change_billmodel%}
-                <div class="card-body">
-                    {% include 'bill/includes/card_markdown.html' with style='card_1' title='' notes_html=bill.notes_html %}
-                </div>
-                {% endif %}
-            </div>
-        </div>
-
-    </div>
-
-
-    <div class="col-12 col-md-9">
-        <div class="row">
-            <div class="col-12">
-                {% if bill.is_configured %}
-                <div class="card mb-3 shadow-sm">
-                    <div class="card-body">
-                        <div class="row text-center g-3">
-                            <div class="col-12 col-md-3">
-                                <div class="border rounded p-3">
-                                    <h6 class="text-uppercase text-xs text-muted mb-2">
-                                        {% trans 'Cash Account' %}:
-                                        <a href="{% url 'account_detail' request.dealer.slug bill.cash_account.uuid %}"
-                                            class="text-decoration-none ms-1">
-                                            {{ bill.cash_account.code }}
-                                        </a>
-                                    </h6>
-                                    <h4 class="mb-0" id="djl-bill-detail-amount-paid">
-                                        {% currency_symbol %}{{ bill.get_amount_cash | absolute | currency_format }}
-                                    </h4>
-                                </div>
-                            </div>
-                            {% if bill.accrue %}
-                            <div class="col-12 col-md-3">
-                                <div class="border rounded p-3">
-                                    <h6 class="text-uppercase text-xs text-muted mb-2">
-                                        {% trans 'Prepaid Account' %}:
-                                        <a href="{% url 'account_detail' request.dealer.slug bill.prepaid_account.uuid %}"
-                                            class="text-decoration-none ms-1">
-                                            {{ bill.prepaid_account.code }}
-                                        </a>
-                                    </h6>
-                                    <h4 class="text-success mb-0" id="djl-bill-detail-amount-prepaid">
-                                        {% currency_symbol %}{{ bill.get_amount_prepaid | currency_format }}
-                                    </h4>
-                                </div>
-                            </div>
-                            <div class="col-12 col-md-3">
-                                <div class="border rounded p-3">
-                                    <h6 class="text-uppercase text-xs text-muted mb-2">
-                                        {% trans 'Accounts Payable' %}:
-                                        <a href="{% url 'account_detail' request.dealer.slug bill.unearned_account.uuid %}"
-                                            class="text-decoration-none ms-1">
-                                            {{ bill.unearned_account.code }}
-                                        </a>
-                                    </h6>
-                                    <h4 class="text-danger mb-0" id="djl-bill-detail-amount-unearned">
-                                        {% currency_symbol %}{{ bill.get_amount_unearned | currency_format }}
-                                    </h4>
-                                </div>
-                            </div>
-                            <div class="col-12 col-md-3">
-                                <div class="border rounded p-3">
-                                    <h6 class="text-uppercase text-xs text-muted mb-2">
-                                        {% trans 'Accrued' %} {{ bill.get_progress | percentage }}
-                                    </h6>
-                                    <h4 class="mb-0">
-                                        {% currency_symbol %}{{ bill.get_amount_earned | currency_format }}
-                                    </h4>
-                                </div>
-                            </div>
-                            {% else %}
-                            <div class="col-12 col-md-3 offset-md-6">
-                                <div class="border rounded p-3">
-                                    <h6 class="text-uppercase text-xs text-muted mb-2">
-                                        {% trans 'You Still Owe' %}
-                                    </h6>
-                                    <h4 class="text-danger mb-0" id="djl-bill-detail-amount-owed">
-                                        {% currency_symbol %}{{ bill.get_amount_open | currency_format }}
-                                    </h4>
-                                </div>
-                            </div>
-                            {% endif %}
+    <div class="row mt-3 mb-2">
+        <div class="col-12 col-md-3">
+            <div class="row">
+                <div class="col-12 mb-3">
+                    <div class="card shadow-sm">
+                        <div class="card-body">
+                            {% include 'bill/includes/card_bill.html' with dealer_slug=request.dealer.slug bill=bill entity_slug=view.kwargs.entity_slug style='bill-detail' %}
                         </div>
                     </div>
                 </div>
-                {% endif %}
-
-
             </div>
-
             <div class="col-12">
-
-                <div class="card mb-3 shadow-sm">
+                <div class="card shadow-sm ">
                     <div class="card-header pb-0">
                         <div class="d-flex align-items-center mb-2">
-                            <i class="fas fa-receipt me-3 text-primary"></i>
-                            <h5 class="mb-0">{% trans 'Bill Items' %}</h5>
+                            <i class="fas fa-sticky-note me-3 text-primary"></i>
+                            <h5 class="mb-0">{% trans 'Bill Notes' %}</h5>
                         </div>
                     </div>
-                    <div class="card-body px-0 pt-0 pb-2">
-                        <div class="table-responsive">
-                            <table class="table table-hover">
-                                <thead>
-                                    <tr class="bg-body-highlight">
-                                        <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Item' %}</th>
-                                        <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Entity Unit' %}</th>
-                                        <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Unit Cost' %}</th>
-                                        <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Quantity' %}</th>
-                                        <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Total' %}</th>
-                                        <th class="sort white-space-nowrap align-middle " scope="col">{% trans 'PO' %}</th>
-                                    </tr>
-                                </thead>
-                                <tbody class="list fs-9" id="project-list-table-body">
-                                    {% for bill_item in itemtxs_qs %}
-                                    <tr>
-                                        <td class="align-middle white-space-nowrap">
-                                            <div class="d-flex px-2 py-1">
-                                                <div class="d-flex flex-column justify-content-center">
-                                                    <h6 class="mb-0 text-sm">{{ bill_item.item_model }}</h6>
-                                                </div>
+                    {% if perms.django_ledger.change_billmodel %}
+                        <div class="card-body">
+                            {% include 'bill/includes/card_markdown.html' with style='card_1' title='' notes_html=bill.notes_html %}
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+        <div class="col-12 col-md-9">
+            <div class="row">
+                <div class="col-12">
+                    {% if bill.is_configured %}
+                        <div class="card mb-3 shadow-sm">
+                            <div class="card-body">
+                                <div class="row text-center g-3">
+                                    <div class="col-12 col-md-3">
+                                        <div class="border rounded p-3">
+                                            <h6 class="text-uppercase text-xs text-muted mb-2">
+                                                {% trans 'Cash Account' %}:
+                                                <a href="{% url 'account_detail' request.dealer.slug bill.cash_account.uuid %}"
+                                                   class="text-decoration-none ms-1">{{ bill.cash_account.code }}</a>
+                                            </h6>
+                                            <h4 class="mb-0" id="djl-bill-detail-amount-paid">
+                                                {% currency_symbol %}{{ bill.get_amount_cash | absolute | currency_format }}
+                                            </h4>
+                                        </div>
+                                    </div>
+                                    {% if bill.accrue %}
+                                        <div class="col-12 col-md-3">
+                                            <div class="border rounded p-3">
+                                                <h6 class="text-uppercase text-xs text-muted mb-2">
+                                                    {% trans 'Prepaid Account' %}:
+                                                    <a href="{% url 'account_detail' request.dealer.slug bill.prepaid_account.uuid %}"
+                                                       class="text-decoration-none ms-1">
+                                                        {{ bill.prepaid_account.code }}
+                                                    </a>
+                                                </h6>
+                                                <h4 class="text-success mb-0" id="djl-bill-detail-amount-prepaid">
+                                                    {% currency_symbol %}{{ bill.get_amount_prepaid | currency_format }}
+                                                </h4>
                                             </div>
-                                        </td>
-                                        <td class="align-middle white-space-nowrap">
-                                            <span class="text-xs font-weight-bold">
-                                                {% if bill_item.entity_unit %}
-                                                {{ bill_item.entity_unit }}
-                                                {% endif %}
-                                            </span>
-                                        </td>
-                                        <td class="align-middle white-space-nowrap">
-                                            <span class="text-xs font-weight-bold">
-                                                {{ bill_item.unit_cost | currency_format }}
-                                            </span>
-                                        </td>
-                                        <td class="align-middle white-space-nowrap">
-                                            <span class="text-xs font-weight-bold">{{ bill_item.quantity }}</span>
-                                        </td>
-                                        <td class="align-middle white-space-nowrap">
-                                            <span class="text-xs font-weight-bold">
-                                                {{ bill_item.total_amount | currency_format }}
-                                            </span>
-                                        </td>
-                                        <td class="align-items-start white-space-nowrap pe-2">
-                                            {% if bill_item.po_model_id %}
-                                                {% if perms.django_ledger.view_purchaseordermodel%}
-                                                <a class="btn btn-sm btn-phoenix-primary"
-                                                    href="{% url 'purchase_order_detail' request.dealer.slug request.dealer.entity.slug bill_item.po_model_id %}">
-                                                    {% trans 'View PO' %}
-                                                </a>
-                                                {% endif %}
-                                            {% endif %}
-                                        </td>
-                                    </tr>
-                                    {% endfor %}
-                                </tbody>
-                                <tfoot>
-                                    <tr>
-                                        <td colspan="3"></td>
-                                        <td class="text-end"><strong>{% trans 'Total' %}</strong></td>
-                                        <td class="text-end">
-                                            <strong>
-                                                {% currency_symbol %}{{ total_amount__sum | currency_format }}
-                                            </strong>
-                                        </td>
-                                        <td></td>
-                                    </tr>
-                                </tfoot>
-                            </table>
+                                        </div>
+                                        <div class="col-12 col-md-3">
+                                            <div class="border rounded p-3">
+                                                <h6 class="text-uppercase text-xs text-muted mb-2">
+                                                    {% trans 'Accounts Payable' %}:
+                                                    <a href="{% url 'account_detail' request.dealer.slug bill.unearned_account.uuid %}"
+                                                       class="text-decoration-none ms-1">
+                                                        {{ bill.unearned_account.code }}
+                                                    </a>
+                                                </h6>
+                                                <h4 class="text-danger mb-0" id="djl-bill-detail-amount-unearned">
+                                                    {% currency_symbol %}{{ bill.get_amount_unearned | currency_format }}
+                                                </h4>
+                                            </div>
+                                        </div>
+                                        <div class="col-12 col-md-3">
+                                            <div class="border rounded p-3">
+                                                <h6 class="text-uppercase text-xs text-muted mb-2">{% trans 'Accrued' %} {{ bill.get_progress | percentage }}</h6>
+                                                <h4 class="mb-0">{% currency_symbol %}{{ bill.get_amount_earned | currency_format }}</h4>
+                                            </div>
+                                        </div>
+                                    {% else %}
+                                        <div class="col-12 col-md-3 offset-md-6">
+                                            <div class="border rounded p-3">
+                                                <h6 class="text-uppercase text-xs text-muted mb-2">{% trans 'You Still Owe' %}</h6>
+                                                <h4 class="text-danger mb-0" id="djl-bill-detail-amount-owed">
+                                                    {% currency_symbol %}{{ bill.get_amount_open | currency_format }}
+                                                </h4>
+                                            </div>
+                                        </div>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                    {% endif %}
+                </div>
+                <div class="col-12">
+                    <div class="card mb-3 shadow-sm">
+                        <div class="card-header pb-0">
+                            <div class="d-flex align-items-center mb-2">
+                                <i class="fas fa-receipt me-3 text-primary"></i>
+                                <h5 class="mb-0">{% trans 'Bill Items' %}</h5>
+                            </div>
+                        </div>
+                        <div class="card-body px-0 pt-0 pb-2">
+                            <div class="table-responsive">
+                                <table class="table table-hover">
+                                    <thead>
+                                        <tr class="bg-body-highlight">
+                                            <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Item' %}</th>
+                                            <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Entity Unit' %}</th>
+                                            <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Unit Cost' %}</th>
+                                            <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Quantity' %}</th>
+                                            <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Total' %}</th>
+                                            <th class="sort white-space-nowrap align-middle " scope="col">{% trans 'PO' %}</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="list fs-9" id="project-list-table-body">
+                                        {% for bill_item in itemtxs_qs %}
+                                            <tr>
+                                                <td class="align-middle white-space-nowrap">
+                                                    <div class="d-flex px-2 py-1">
+                                                        <div class="d-flex flex-column justify-content-center">
+                                                            <h6 class="mb-0 text-sm">{{ bill_item.item_model }}</h6>
+                                                        </div>
+                                                    </div>
+                                                </td>
+                                                <td class="align-middle white-space-nowrap">
+                                                    <span class="text-xs font-weight-bold">
+                                                        {% if bill_item.entity_unit %}{{ bill_item.entity_unit }}{% endif %}
+                                                    </span>
+                                                </td>
+                                                <td class="align-middle white-space-nowrap">
+                                                    <span class="text-xs font-weight-bold">{{ bill_item.unit_cost | currency_format }}</span>
+                                                </td>
+                                                <td class="align-middle white-space-nowrap">
+                                                    <span class="text-xs font-weight-bold">{{ bill_item.quantity }}</span>
+                                                </td>
+                                                <td class="align-middle white-space-nowrap">
+                                                    <span class="text-xs font-weight-bold">{{ bill_item.total_amount | currency_format }}</span>
+                                                </td>
+                                                <td class="align-items-start white-space-nowrap pe-2">
+                                                    {% if bill_item.po_model_id %}
+                                                        {% if perms.django_ledger.view_purchaseordermodel %}
+                                                            <a class="btn btn-sm btn-phoenix-primary"
+                                                               href="{% url 'purchase_order_detail' request.dealer.slug request.dealer.entity.slug bill_item.po_model_id %}">
+                                                                {% trans 'View PO' %}
+                                                            </a>
+                                                        {% endif %}
+                                                    {% endif %}
+                                                </td>
+                                            </tr>
+                                        {% endfor %}
+                                    </tbody>
+                                    <tfoot>
+                                        <tr>
+                                            <td colspan="3"></td>
+                                            <td class="text-end">
+                                                <strong>{% trans 'Total' %}</strong>
+                                            </td>
+                                            <td class="text-end">
+                                                <strong>{% currency_symbol %}{{ total_amount__sum | currency_format }}</strong>
+                                            </td>
+                                            <td></td>
+                                        </tr>
+                                    </tfoot>
+                                </table>
+                            </div>
                         </div>
                     </div>
                 </div>
-
-
-            </div>
-
-            <div class="col-12">
-
-                <div class="card mb-3 shadow-sm">
-                    <div class="card-header pb-0">
-                        <div class="d-flex align-items-center mb-2">
-                            <i class="fas fa-exchange-alt me-3 text-primary"></i>
-                            <h5 class="mb-0">{% trans 'Bill Transactions' %}</h5>
+                <div class="col-12">
+                    <div class="card mb-3 shadow-sm">
+                        <div class="card-header pb-0">
+                            <div class="d-flex align-items-center mb-2">
+                                <i class="fas fa-exchange-alt me-3 text-primary"></i>
+                                <h5 class="mb-0">{% trans 'Bill Transactions' %}</h5>
+                            </div>
                         </div>
-                    </div>
-                    <div class="card-body px-0 pt-0 pb-2 table-responsive">
-                        {% transactions_table bill %}
+                        <div class="card-body px-0 pt-0 pb-2 table-responsive">{% transactions_table bill %}</div>
                     </div>
                 </div>
-
-
             </div>
-
         </div>
-
     </div>
-
-
-</div>
-  {% include "bill/includes/mark_as.html" %}
-{% endblock %}
\ No newline at end of file
+    {% include "bill/includes/mark_as.html" %}
+{% endblock %}
diff --git a/templates/bill/bill_update.html b/templates/bill/bill_update.html
index 508b99eb..a4f52273 100644
--- a/templates/bill/bill_update.html
+++ b/templates/bill/bill_update.html
@@ -4,56 +4,36 @@
 {% load django_ledger %}
 {% load custom_filters %}
 {% load widget_tweaks crispy_forms_filters %}
-
 {% block content %}
     <div class="container py-4">
         <div class="row g-2">
-
-        <!-- Bill Form -->
+            <!-- Bill Form -->
             <div class="col-12">
-
                 <div class="row">
                     <div class="col">
-                       <div class="card mb-2">
-                           <div class="card-body">
-                        {% include 'bill/includes/card_bill.html' with dealer_slug=request.dealer.slug bill=bill_model style='bill-detail' entity_slug=view.kwargs.entity_slug %}
-                              
-                        <form action="{% url 'bill-update' dealer_slug=request.dealer.slug entity_slug=view.kwargs.entity_slug bill_pk=bill_model.uuid %}" method="post">
-                            {% csrf_token %}
-
-                            <div class="mb-3">
-                                {{ form|crispy }}
+                        <div class="card mb-2">
+                            <div class="card-body">
+                                {% include 'bill/includes/card_bill.html' with dealer_slug=request.dealer.slug bill=bill_model style='bill-detail' entity_slug=view.kwargs.entity_slug %}
+                                <form action="{% url 'bill-update' dealer_slug=request.dealer.slug entity_slug=view.kwargs.entity_slug bill_pk=bill_model.uuid %}"
+                                      method="post">
+                                    {% csrf_token %}
+                                    <div class="mb-3">{{ form|crispy }}</div>
+                                    <button type="submit" class="btn btn-phoenix-primary  mb-2 me-2">
+                                        <i class="fas fa-save me-2"></i>{% trans 'Save Bill' %}
+                                    </button>
+                                    <a href="{% url 'bill-detail' dealer_slug=request.dealer.slug entity_slug=view.kwargs.entity_slug bill_pk=bill_model.uuid %}"
+                                       class="btn btn-phoenix-secondary mb-2">
+                                        <i class="fas fa-arrow-left me-2"></i>{% trans 'Back to Bill Detail' %}
+                                    </a>
+                                </form>
                             </div>
-
-                            <button type="submit" class="btn btn-phoenix-primary  mb-2 me-2">
-                                <i class="fas fa-save me-2"></i>{% trans 'Save Bill' %}
-                            </button>
-                             <a href="{% url 'bill-detail' dealer_slug=request.dealer.slug entity_slug=view.kwargs.entity_slug bill_pk=bill_model.uuid %}"
-                               class="btn btn-phoenix-secondary mb-2">
-                                <i class="fas fa-arrow-left me-2"></i>{% trans 'Back to Bill Detail' %}
-                            </a>
-                            
-
-                            
-
-                        </form>
-
-                          
                         </div>
-                       </div>
                     </div>
-                    </div>
-
                 </div>
-
-
-        <!-- Bill Item Formset -->
-            <div class="col-12">
-                {% bill_item_formset_table itemtxs_formset %}
             </div>
-
-
+            <!-- Bill Item Formset -->
+            <div class="col-12">{% bill_item_formset_table itemtxs_formset %}</div>
         </div>
     </div>
     {% include "bill/includes/mark_as.html" %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/bill/includes/card_bill.html b/templates/bill/includes/card_bill.html
index 9e3dd164..b73a2a03 100644
--- a/templates/bill/includes/card_bill.html
+++ b/templates/bill/includes/card_bill.html
@@ -1,22 +1,19 @@
 {% load django_ledger %}
 {% load i18n %}
 <div id="djl-bill-card-widget" class="">
-    
     {% if not create_bill %}
         {% if style == 'dashboard' %}
             <!-- Dashboard Style Card -->
             <div class="">
                 <div class="card-body">
-                    
                     <div class="d-flex justify-content-between align-items-center mb-3 text-primary">
                         <h6 class="text-uppercase text-primary mb-0">
                             <i class="fas fa-file-invoice me-2"></i>{% trans 'Bill' %}
                         </h6>
-                        <span class="badge bg-{{ bill.get_status_badge_color }}">{{ bill.get_bill_status_display }}</span>         
+                        <span class="badge bg-{{ bill.get_status_badge_color }}">{{ bill.get_bill_status_display }}</span>
                     </div>
                     <h4 class="card-title">{{ bill.vendor.vendor_name }}</h4>
                     <p class="text-sm text-muted mb-4">{{ bill.vendor.address_1 }}</p>
-                    
                     {% if not bill.is_past_due %}
                         <p class="text-info mb-2">
                             <i class="fas fa-clock me-2"></i>{% trans 'Due in' %}: {{ bill.date_due | timeuntil }}
@@ -26,7 +23,6 @@
                             <i class="fas fa-exclamation-triangle me-2"></i>{% trans 'Past Due' %}: {{ bill.date_due | timesince }} {% trans 'ago' %}
                         </p>
                     {% endif %}
-
                     <div class="d-flex align-items-center mb-3">
                         <span class="me-2">{% trans 'Accrued' %}:</span>
                         {% if bill.accrue %}
@@ -35,7 +31,6 @@
                             <i class="fas fa-times-circle text-danger me-2"></i>
                         {% endif %}
                     </div>
-
                     <div class="mb-4">
                         <p class="text-danger fw-bold mb-1">
                             {% trans 'Amount Due' %}: {% currency_symbol %}{{ bill.get_amount_open | currency_format }}
@@ -43,78 +38,56 @@
                         <p class="text-success mb-1">
                             {% trans 'Amount Paid' %}: {% currency_symbol %}{{ bill.amount_paid | currency_format }}
                         </p>
-                        <p class="mb-1">
-                            {% trans 'Progress' %}: {{ bill.get_progress | percentage }}
-                        </p>
+                        <p class="mb-1">{% trans 'Progress' %}: {{ bill.get_progress | percentage }}</p>
                         <div class="progress mt-2">
                             <div class="progress-bar bg-success"
                                  role="progressbar"
                                  style="width: {{ bill.get_progress_percent }}%"
                                  aria-valuenow="{{ bill.get_progress_percent }}"
                                  aria-valuemin="0"
-                                 aria-valuemax="100">
-                            </div>
+                                 aria-valuemax="100"></div>
                         </div>
                     </div>
-
                     <!-- Modal Action -->
                     {% modal_action bill 'get' entity_slug %}
                     <div class="d-grid gap-2 d-md-flex justify-content-md-end">
-
                         <a href="{% url 'django_ledger:bill-detail' entity_slug=entity_slug bill_pk=bill.uuid %}"
-                           class="btn btn-sm btn-phoenix-primary me-md-2">
-                            {% trans 'View' %}
-                        </a>
+                           class="btn btn-sm btn-phoenix-primary me-md-2">{% trans 'View' %}</a>
                         {% if perms.django_ledger.change_billmodel %}
-                        <a href="{% url 'django_ledger:bill-update' entity_slug=entity_slug bill_pk=bill.uuid %}"
-                           class="btn btn-sm btn-phoenix-warning me-md-2">
-                            {% trans 'Update' %}
-                        </a>
-
-                        {% if bill.can_pay %}
-
-                            <button onclick="djLedger.toggleModal('{{ bill.get_html_id }}')"
-                                    class="btn btn-sm btn-phoenix-info">
-                                {% trans 'Mark as Paid' %}
-                            </button>
+                            <a href="{% url 'django_ledger:bill-update' entity_slug=entity_slug bill_pk=bill.uuid %}"
+                               class="btn btn-sm btn-phoenix-warning me-md-2">{% trans 'Update' %}</a>
+                            {% if bill.can_pay %}
+                                <button onclick="djLedger.toggleModal('{{ bill.get_html_id }}')"
+                                        class="btn btn-sm btn-phoenix-info">{% trans 'Mark as Paid' %}</button>
+                            {% endif %}
+                            {% if bill.can_cancel %}
+                                <button onclick="djLedger.toggleModal('{{ bill.get_html_id }}')"
+                                        class="btn btn-sm btn-phoenix-danger">{% trans 'Cancel' %}</button>
+                            {% endif %}
                         {% endif %}
-                        {% if bill.can_cancel %}
-                            <button onclick="djLedger.toggleModal('{{ bill.get_html_id }}')"
-                                    class="btn btn-sm btn-phoenix-danger">
-                                {% trans 'Cancel' %}
-                            </button>
-                        {% endif %}
-                     {% endif %}
                     </div>
                 </div>
             </div>
-
         {% elif style == 'bill-detail' %}
             <!-- Detail Style Card -->
             <div class="">
                 <div class="card-header p-2 bg-{{ bill.get_status_badge_color }}">
                     <div class="d-flex align-items-center justify-content-center mb-2 text-primary">
                         <i class="fas fa-file-invoice me-3 "></i>
-                        <h4 class="mb-0 text-primary me-2">
-                            {% trans 'Bill' %} {{ bill.bill_number }}
-                        </h4>
-                         
+                        <h4 class="mb-0 text-primary me-2">{% trans 'Bill' %} {{ bill.bill_number }}</h4>
                     </div>
-                   <a href="{% url 'bill_list' request.dealer.slug %}"
-                               class="btn btn-phoenix-primary  mb-2">
-                                <i class="fas fa-long-arrow-alt-left me-2"></i>{% trans 'Back to Bill List' %}
-                         </a>
-                           
-                   
-
+                    <a href="{% url 'bill_list' request.dealer.slug %}"
+                       class="btn btn-phoenix-primary  mb-2">
+                        <i class="fas fa-long-arrow-alt-left me-2"></i>{% trans 'Back to Bill List' %}
+                    </a>
                 </div>
                 <div class="card-body p-2 text-center">
                     {% if bill.is_draft %}
                         <h3 class="text-warning fw-bold mb-4">{% trans 'This bill is' %} {{ bill.get_bill_status_display }}</h3>
                         <p class="mb-2">
-                                <span class="fw-bold">{% trans 'Vendor Name' %}:</span>
-                               {{ bill.vendor.vendor_name }}
-                         </p>
+                            <span class="fw-bold">{% trans 'Vendor Name' %}:</span>
+                            {{ bill.vendor.vendor_name }}
+                        </p>
                         <div class="border-bottom pb-2 mb-4">
                             <p class="mb-2">
                                 <span class="fw-bold">{% trans 'Amount Due' %}:</span>
@@ -136,9 +109,9 @@
                     {% elif bill.is_review %}
                         <h3 class="text-warning fw-bold mb-4">{% trans 'This bill is' %} {{ bill.get_bill_status_display }}</h3>
                         <p class="mb-2">
-                                <span class="fw-bold">{% trans 'Vendor Name' %}:</span>
-                               {{ bill.vendor.vendor_name }}
-                         </p>
+                            <span class="fw-bold">{% trans 'Vendor Name' %}:</span>
+                            {{ bill.vendor.vendor_name }}
+                        </p>
                         <div class="border-bottom pb-2 mb-4">
                             <p class="mb-2">
                                 <span class="fw-bold">{% trans 'Amount Due' %}:</span>
@@ -163,9 +136,9 @@
                     {% elif bill.is_approved %}
                         <h3 class="text-info fw-bold mb-4">{% trans 'This bill is' %} {{ bill.get_bill_status_display }}</h3>
                         <p class="mb-2">
-                                <span class="fw-bold">{% trans 'Vendor Name' %}:</span>
-                               {{ bill.vendor.vendor_name }}
-                         </p>
+                            <span class="fw-bold">{% trans 'Vendor Name' %}:</span>
+                            {{ bill.vendor.vendor_name }}
+                        </p>
                         <div class="border-bottom pb-2 mb-4">
                             <p class="mb-2">
                                 <span class="fw-bold">{% trans 'Amount Due' %}:</span>
@@ -189,8 +162,7 @@
                                      style="width: {{ bill.get_progress_percent }}%"
                                      aria-valuenow="{{ bill.get_progress_percent }}"
                                      aria-valuemin="0"
-                                     aria-valuemax="100">
-                                </div>
+                                     aria-valuemax="100"></div>
                             </div>
                         </div>
                         {% if bill.xref %}
@@ -198,10 +170,10 @@
                         {% endif %}
                     {% elif bill.is_paid %}
                         <h3 class="text-success fw-bold mb-4">{% trans 'This bill is' %} {{ bill.get_bill_status_display }}</h3>
-                         <p class="mb-2">
-                                <span class="fw-bold">{% trans 'Vendor Name' %}:</span>
-                               {{ bill.vendor.vendor_name }}
-                         </p>
+                        <p class="mb-2">
+                            <span class="fw-bold">{% trans 'Vendor Name' %}:</span>
+                            {{ bill.vendor.vendor_name }}
+                        </p>
                         <div class="border-bottom pb-2 mb-4">
                             <p class="mb-2">
                                 <span class="fw-bold">{% trans 'Amount Paid' %}:</span>
@@ -221,95 +193,91 @@
                                 <span class="fw-bold">{% trans 'Bill Amount' %}:</span>
                                 {% currency_symbol %}{{ bill.amount_due | currency_format }}
                             </p>
-                            <p class="text-danger fw-bold">
-                                {{ bill.get_bill_status_display | upper }}
-                            </p>
+                            <p class="text-danger fw-bold">{{ bill.get_bill_status_display | upper }}</p>
                         </div>
                     {% endif %}
                 </div>
                 <div class="card-footer p-0">
                     <div class="d-flex flex-wrap gap-2 mt-2">
                         <!-- Update Button -->
-                    {% if perms.django_ledger.change_billmodel%}
-                        <button class="btn btn-phoenix-primary" {% if not request.is_accountant %} disabled {% endif %}>
-                        <a href="{% url 'bill-update' dealer_slug=dealer_slug entity_slug=entity_slug bill_pk=bill.uuid %}">
-                        <i class="fas fa-edit me-2"></i>{% trans 'Update' %}
-                            </a>
-                        </button>
-                        <!-- Mark as Draft -->
-                        {% if bill.can_draft %}
-                            <button class="btn btn-phoenix-success"
-                                    {% if not request.is_accountant %} disabled {% endif %}
-                                    onclick="showPOModal('Mark as Draft', '{% url 'bill-action-mark-as-draft' dealer_slug=request.dealer.slug entity_slug=entity_slug bill_pk=bill.pk %}', 'Mark as Draft')">
-                                <i class="fas fa-check-circle me-2"></i>{% trans 'Mark as Draft' %}
+                        {% if perms.django_ledger.change_billmodel %}
+                            <button class="btn btn-phoenix-primary"
+                                    {% if not request.is_accountant %}disabled{% endif %}>
+                                <a href="{% url 'bill-update' dealer_slug=dealer_slug entity_slug=entity_slug bill_pk=bill.uuid %}">
+                                    <i class="fas fa-edit me-2"></i>{% trans 'Update' %}
+                                </a>
                             </button>
+                            <!-- Mark as Draft -->
+                            {% if bill.can_draft %}
+                                <button class="btn btn-phoenix-success"
+                                        {% if not request.is_accountant %}disabled{% endif %}
+                                        onclick="showPOModal('Mark as Draft', '{% url 'bill-action-mark-as-draft' dealer_slug=request.dealer.slug entity_slug=entity_slug bill_pk=bill.pk %}', 'Mark as Draft')">
+                                    <i class="fas fa-check-circle me-2"></i>{% trans 'Mark as Draft' %}
+                                </button>
+                            {% endif %}
+                            <!-- Mark as Review -->
+                            {% if bill.can_review %}
+                                <button class="btn btn-phoenix-warning"
+                                        {% if not request.is_accountant %}disabled{% endif %}
+                                        onclick="showPOModal('Mark as Review', '{% url 'bill-action-mark-as-review' dealer_slug=request.dealer.slug entity_slug=entity_slug bill_pk=bill.pk %}', 'Mark as Review')">
+                                    <i class="fas fa-check-circle me-2"></i>{% trans 'Mark as Review' %}
+                                </button>
+                            {% endif %}
+                            <!-- Mark as Approved -->
+                            {% if bill.can_approve and perms.django_ledger.can_approve_billmodel %}
+                                <button class="btn btn-phoenix-success"
+                                        onclick="showPOModal('Mark as Approved', '{% url 'bill-action-mark-as-approved' dealer_slug=request.dealer.slug entity_slug=entity_slug bill_pk=bill.pk %}', 'Mark as Approved')">
+                                    <i class="fas fa-check-circle me-2"></i>{% trans 'Mark as Approved' %}
+                                </button>
+                            {% endif %}
+                            {% if bill.can_approve and not request.is_manager %}
+                                <button class="btn btn-phoenix-warning" disabled>
+                                    <i class="fas fa-hourglass-start me-2"></i><span class="text-warning">{% trans 'Waiting for Manager Approval' %}</span>
+                                </button>
+                            {% endif %}
+                            <!-- Mark as Paid -->
+                            {% if bill.can_pay %}
+                                <button class="btn btn-phoenix-success"
+                                        onclick="showPOModal('Mark as Paid', '{% url 'bill-action-mark-as-paid' dealer_slug=request.dealer.slug entity_slug=entity_slug bill_pk=bill.pk %}', 'Mark as Paid')">
+                                    <i class="fas fa-check-circle me-2"></i>{% trans 'Mark as Paid' %}
+                                </button>
+                            {% endif %}
+                            <!-- Void Button -->
+                            {% if bill.can_void %}
+                                <button class="btn btn-phoenix-danger"
+                                        onclick="showPOModal('Mark as Void', '{% url 'bill-action-mark-as-void' dealer_slug=request.dealer.slug entity_slug=entity_slug bill_pk=bill.pk %}', 'Mark as Void')">
+                                    <i class="fas fa-check-circle me-2"></i>{% trans 'Mark as Void' %}
+                                </button>
+                            {% endif %}
+                            <!-- Cancel Button -->
+                            {% if bill.can_cancel %}
+                                <button class="btn btn-phoenix-danger"
+                                        {% if not request.is_accountant %}disabled{% endif %}
+                                        onclick="showPOModal('Mark as Canceled', '{% url 'bill-action-mark-as-canceled' dealer_slug=request.dealer.slug entity_slug=entity_slug bill_pk=bill.pk %}', 'Mark as Canceled')">
+                                    <i class="fas fa-check-circle me-2"></i>{% trans 'Mark as Canceled' %}
+                                </button>
+                                {% modal_action_v2 bill bill.get_mark_as_canceled_url bill.get_mark_as_canceled_message bill.get_mark_as_canceled_html_id %}
+                            {% endif %}
                         {% endif %}
-                        <!-- Mark as Review -->
-                        {% if bill.can_review %}
-                            <button class="btn btn-phoenix-warning"
-                                    {% if not request.is_accountant %} disabled {% endif %}
-                                    onclick="showPOModal('Mark as Review', '{% url 'bill-action-mark-as-review' dealer_slug=request.dealer.slug entity_slug=entity_slug bill_pk=bill.pk %}', 'Mark as Review')">
-                                <i class="fas fa-check-circle me-2"></i>{% trans 'Mark as Review' %}
-                            </button>
-                        {% endif %}
-                        <!-- Mark as Approved -->
-                        {% if bill.can_approve and perms.django_ledger.can_approve_billmodel %}
-                            <button class="btn btn-phoenix-success"
-                                    onclick="showPOModal('Mark as Approved', '{% url 'bill-action-mark-as-approved' dealer_slug=request.dealer.slug entity_slug=entity_slug bill_pk=bill.pk %}', 'Mark as Approved')">
-                                <i class="fas fa-check-circle me-2"></i>{% trans 'Mark as Approved' %}
-                            </button>
-                        {% endif %}
-                        {% if bill.can_approve and not request.is_manager %}
-                            <button class="btn btn-phoenix-warning" disabled>
-                                <i class="fas fa-hourglass-start me-2"></i><span class="text-warning">{% trans 'Waiting for Manager Approval' %}</span>
-                            </button>
-                        {% endif %}
-                        <!-- Mark as Paid -->
-                        {% if bill.can_pay %}
-                            <button class="btn btn-phoenix-success"
-                                    onclick="showPOModal('Mark as Paid', '{% url 'bill-action-mark-as-paid' dealer_slug=request.dealer.slug entity_slug=entity_slug bill_pk=bill.pk %}', 'Mark as Paid')">
-                                <i class="fas fa-check-circle me-2"></i>{% trans 'Mark as Paid' %}
-                            </button>
-                        {% endif %}
-                        <!-- Void Button -->
-                        {% if bill.can_void %}
-                            <button class="btn btn-phoenix-danger"
-                                    onclick="showPOModal('Mark as Void', '{% url 'bill-action-mark-as-void' dealer_slug=request.dealer.slug entity_slug=entity_slug bill_pk=bill.pk %}', 'Mark as Void')">
-                                <i class="fas fa-check-circle me-2"></i>{% trans 'Mark as Void' %}
-                            </button>
-                        {% endif %}
-                        <!-- Cancel Button -->
-                        {% if bill.can_cancel %}
-                            <button class="btn btn-phoenix-danger"
-                            {% if not request.is_accountant %} disabled {% endif %}
-                                    onclick="showPOModal('Mark as Canceled', '{% url 'bill-action-mark-as-canceled' dealer_slug=request.dealer.slug entity_slug=entity_slug bill_pk=bill.pk %}', 'Mark as Canceled')">
-                                <i class="fas fa-check-circle me-2"></i>{% trans 'Mark as Canceled' %}
-                            </button>
-                            {% modal_action_v2 bill bill.get_mark_as_canceled_url bill.get_mark_as_canceled_message bill.get_mark_as_canceled_html_id %}
-                        {% endif %}
-                    {% endif %}
                     </div>
                 </div>
             </div>
-
         {% endif %}
     {% else %}
         <!-- Create Bill Card -->
-         {% if perms.django_ledger.add_billmodel%}
-        <div class=" bg-light">
-            
-            <div class="card-body text-center p-5">
-                <a href="{% url 'django_ledger:bill-create' entity_slug=entity_slug %}"
-                   class="text-primary">
-                    <i class="fas fa-plus-circle fa-4x mb-3"></i>
-                    <h3 class="h4">{% trans 'New Bill' %}</h3>
-                </a>
+        {% if perms.django_ledger.add_billmodel %}
+            <div class=" bg-light">
+                <div class="card-body text-center p-5">
+                    <a href="{% url 'django_ledger:bill-create' entity_slug=entity_slug %}"
+                       class="text-primary">
+                        <i class="fas fa-plus-circle fa-4x mb-3"></i>
+                        <h3 class="h4">{% trans 'New Bill' %}</h3>
+                    </a>
+                </div>
             </div>
-        </div>
         {% endif %}
     {% endif %}
 </div>
-
 <style>
     .card-footer .btn-link {
         padding: 1rem;
@@ -320,7 +288,6 @@
         background-color: rgba(0,0,0,0.03);
     }
 </style>
-
 <script>
     document.addEventListener('DOMContentLoaded', function() {
         window.showPOModal = function(title, actionUrl, buttonText) {
@@ -347,4 +314,4 @@
             modal.show();
         };
     });
-</script>
\ No newline at end of file
+</script>
diff --git a/templates/bill/includes/card_markdown.html b/templates/bill/includes/card_markdown.html
index 7399ce12..3197479d 100644
--- a/templates/bill/includes/card_markdown.html
+++ b/templates/bill/includes/card_markdown.html
@@ -1,15 +1,13 @@
 {% load trans from i18n %}
 {% load django_ledger %}
-
 {% if style == 'card_1' %}
-  <div class="card h-100" style="height: 25rem;">
-    
-    <div class="card-body overflow-auto">
-      {% if notes_html %}
-        {{ notes_html|safe }}
-      {% else %}
-        <p class="card-text">{% trans 'No available notes to display...' %}</p>
-      {% endif %}
+    <div class="card h-100" style="height: 25rem;">
+        <div class="card-body overflow-auto">
+            {% if notes_html %}
+                {{ notes_html|safe }}
+            {% else %}
+                <p class="card-text">{% trans 'No available notes to display...' %}</p>
+            {% endif %}
+        </div>
     </div>
-  </div>
 {% endif %}
diff --git a/templates/bill/includes/card_vendor.html b/templates/bill/includes/card_vendor.html
index 81ece8bf..292abb2e 100644
--- a/templates/bill/includes/card_vendor.html
+++ b/templates/bill/includes/card_vendor.html
@@ -1,19 +1,21 @@
 {% load i18n %}
 {% load django_ledger %}
-
-<div class="card " id="djl-vendor-card-widget" >
+<div class="card " id="djl-vendor-card-widget">
     <div class="card-header">
         <h2 class="card-title d-flex align-items-center text-primary">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-person-lines-fill me-2" viewBox="0 0 16 16">
-                <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm-1 0a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-5 0a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zM2 3a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4A.5.5 0 0 1 2 3zm9.854 2.854a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0zM2.5 14.5c0-.827.673-1.5 1.5-1.5h7c.827 0 1.5.673 1.5 1.5s-.673 1.5-1.5 1.5h-7c-.827 0-1.5-.673-1.5-1.5z"/>
+            <svg xmlns="http://www.w3.org/2000/svg"
+                 width="24"
+                 height="24"
+                 fill="currentColor"
+                 class="bi bi-person-lines-fill me-2"
+                 viewBox="0 0 16 16">
+                <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm-1 0a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-5 0a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zM2 3a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4A.5.5 0 0 1 2 3zm9.854 2.854a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0zM2.5 14.5c0-.827.673-1.5 1.5-1.5h7c.827 0 1.5.673 1.5 1.5s-.673 1.5-1.5 1.5h-7c-.827 0-1.5-.673-1.5-1.5z" />
             </svg>
             {% trans 'Vendor Info' %}
         </h2>
     </div>
-
     <div class="card-body">
         <h4 class="card-title fw-bold mb-3">{{ vendor.vendor_name }}</h4>
-
         <p class="card-text mb-0">
             {% if vendor.address_1 %}<span class="d-block">{{ vendor.address_1 }}</span>{% endif %}
             {% if vendor.address_2 %}<span class="d-block">{{ vendor.address_2 }}</span>{% endif %}
@@ -23,4 +25,4 @@
             {% if vendor.website %}<span class="d-block">{{ vendor.website }}</span>{% endif %}
         </p>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/bill/includes/mark_as.html b/templates/bill/includes/mark_as.html
index 3d1497ec..20064f40 100644
--- a/templates/bill/includes/mark_as.html
+++ b/templates/bill/includes/mark_as.html
@@ -4,11 +4,14 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="POModalTitle"></h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                <button type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close"></button>
             </div>
             <div class="modal-body" id="POModalBody">
                 <!-- Content will be inserted here by JavaScript -->
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/bill/tags/bill_item_formset.html b/templates/bill/tags/bill_item_formset.html
index 1d62d4ea..a6955dd7 100644
--- a/templates/bill/tags/bill_item_formset.html
+++ b/templates/bill/tags/bill_item_formset.html
@@ -2,8 +2,8 @@
 {% load static %}
 {% load django_ledger %}
 {% load widget_tweaks %}
-
-<form action="{% url 'bill-update-items' dealer_slug=dealer_slug entity_slug=entity_slug bill_pk=bill_pk %}" method="post">
+<form action="{% url 'bill-update-items' dealer_slug=dealer_slug entity_slug=entity_slug bill_pk=bill_pk %}"
+      method="post">
     <div class="container-fluid py-4">
         <!-- Page Header -->
         <div class="row mb-4">
@@ -15,14 +15,12 @@
                 <hr class="my-3">
             </div>
         </div>
-
         <!-- Form Content -->
         <div class="row">
             <div class="col-12">
                 {% csrf_token %}
                 {{ item_formset.non_form_errors }}
                 {{ item_formset.management_form }}
-
                 <!-- Card Container -->
                 <div class="card shadow-sm">
                     <div class="card-body p-0">
@@ -44,33 +42,25 @@
                                 <tbody>
                                     {% for f in item_formset %}
                                         <tr class="align-middle">
-                                        <!-- Item Column -->
+                                            <!-- Item Column -->
                                             <td>
                                                 <div class="d-flex flex-column ms-2">
-                                                    {% for hidden_field in f.hidden_fields %}
-                                                        {{ hidden_field }}
-                                                    {% endfor %}
+                                                    {% for hidden_field in f.hidden_fields %}{{ hidden_field }}{% endfor %}
                                                     {{ f.item_model|add_class:"form-control" }}
-                                                    {% if f.errors %}
-                                                        <span class="text-danger text-xs">{{ f.errors }}</span>
-                                                    {% endif %}
+                                                    {% if f.errors %}<span class="text-danger text-xs">{{ f.errors }}</span>{% endif %}
                                                 </div>
                                             </td>
-
-                                        <!-- PO Quantity -->
+                                            <!-- PO Quantity -->
                                             <td class="text-center">
                                                 <span class="text-muted text-xs">
                                                     {% if f.instance.po_quantity %}{{ f.instance.po_quantity }}{% endif %}
                                                 </span>
                                             </td>
-
-                                        <!-- PO Amount -->
+                                            <!-- PO Amount -->
                                             <td class="text-center">
                                                 {% if f.instance.po_total_amount %}
                                                     <div class="d-flex flex-column">
-                                                        <span class="text-xs font-weight-bold">
-                                                            {% currency_symbol %}{{ f.instance.po_total_amount | currency_format }}
-                                                        </span>
+                                                        <span class="text-xs font-weight-bold">{% currency_symbol %}{{ f.instance.po_total_amount | currency_format }}</span>
                                                         <a class="btn btn-sm btn-phoenix-info mt-1"
                                                            href="{% url 'purchase_order_detail' dealer_slug entity_slug f.instance.po_model_id %}">
                                                             {% trans 'View PO' %}
@@ -78,54 +68,38 @@
                                                     </div>
                                                 {% endif %}
                                             </td>
-
-                                        <!-- Quantity -->
+                                            <!-- Quantity -->
                                             <td class="text-center">
-                                                <div class="input-group input-group-sm w-100">
-                                                    {{ f.quantity|add_class:"form-control" }}
-                                                </div>
+                                                <div class="input-group input-group-sm w-100">{{ f.quantity|add_class:"form-control" }}</div>
                                             </td>
-
-                                        <!-- Unit Cost -->
+                                            <!-- Unit Cost -->
                                             <td class="text-center">
-                                                <div class="input-group input-group-sm w-100">
-                                                    {{ f.unit_cost|add_class:"form-control" }}
-                                                </div>
+                                                <div class="input-group input-group-sm w-100">{{ f.unit_cost|add_class:"form-control" }}</div>
                                             </td>
-
-                                        <!-- Entity Unit -->
-                                            <td class="text-center">
-                                                {{ f.entity_unit|add_class:"form-control" }}
-                                            </td>
-
-                                        <!-- Total Amount -->
+                                            <!-- Entity Unit -->
+                                            <td class="text-center">{{ f.entity_unit|add_class:"form-control" }}</td>
+                                            <!-- Total Amount -->
                                             <td class="text-end">
                                                 <span class="text-xs font-weight-bold">
                                                     <span>{% currency_symbol %}</span>{{ f.instance.total_amount | currency_format }}
                                                 </span>
                                             </td>
-
-                                        <!-- Delete Checkbox -->
+                                            <!-- Delete Checkbox -->
                                             <td class="text-center">
-                                                {% if item_formset.can_delete %}
-                                                    <div class="form-check d-flex justify-content-center">
-                                                        {{ f.DELETE }}
-                                                    </div>
-                                                {% endif %}
+                                                {% if item_formset.can_delete %}<div class="form-check d-flex justify-content-center">{{ f.DELETE }}</div>{% endif %}
                                             </td>
                                         </tr>
                                     {% endfor %}
                                 </tbody>
-
                                 <!-- Footer Total -->
                                 <tfoot class="total-row">
                                     <tr>
                                         <td colspan="5"></td>
-                                        <td class="text-end"><strong>{% trans 'Total' %}</strong></td>
                                         <td class="text-end">
-                                            <strong>
-                                                {% currency_symbol %}{{ total_amount__sum | currency_format }}
-                                            </strong>
+                                            <strong>{% trans 'Total' %}</strong>
+                                        </td>
+                                        <td class="text-end">
+                                            <strong>{% currency_symbol %}{{ total_amount__sum | currency_format }}</strong>
                                         </td>
                                         <td></td>
                                     </tr>
@@ -136,7 +110,6 @@
                 </div>
             </div>
         </div>
-
         <!-- Action Buttons -->
         <div class="row mt-4">
             <div class="col-12">
diff --git a/templates/bill/tags/bill_table.html b/templates/bill/tags/bill_table.html
index 30594351..f0fef517 100644
--- a/templates/bill/tags/bill_table.html
+++ b/templates/bill/tags/bill_table.html
@@ -1,8 +1,6 @@
 {% load django_ledger %}
 {% load i18n %}
-
 <div class="table-container">
-
     <table class="table is-fullwidth is-narrow is-striped is-bordered django-ledger-table-bottom-margin-75">
         <thead>
             <tr>
@@ -23,17 +21,16 @@
                     <td>{{ bill.get_bill_status_display }}</td>
                     <td>{{ bill.get_status_action_date }}</td>
                     <td>{{ bill.vendor.vendor_name }}</td>
-                    <td id="{{ bill.get_html_amount_due_id }}">
-                        {% currency_symbol %}{{ bill.amount_due | currency_format }}</td>
-                    <td id="{{ bill.get_html_amount_paid_id }}">
-                        {% currency_symbol %}{{ bill.amount_paid | currency_format }}</td>
+                    <td id="{{ bill.get_html_amount_due_id }}">{% currency_symbol %}{{ bill.amount_due | currency_format }}</td>
+                    <td id="{{ bill.get_html_amount_paid_id }}">{% currency_symbol %}{{ bill.amount_paid | currency_format }}</td>
                     <td class="has-text-centered">
                         {% if bill.is_past_due %}
                             <span class="icon is-small has-text-danger">{% icon 'bi:check-circle-fill' 24 %}</span>
                         {% endif %}
                     </td>
                     <td class="has-text-centered">
-                        <div class="dropdown is-right is-hoverable" id="bill-action-{{ bill.uuid }}">
+                        <div class="dropdown is-right is-hoverable"
+                             id="bill-action-{{ bill.uuid }}">
                             <div class="dropdown-trigger">
                                 <button class="button is-small is-rounded is-outlined is-dark"
                                         aria-haspopup="true"
@@ -56,5 +53,4 @@
             {% endfor %}
         </tbody>
     </table>
-
 </div>
diff --git a/templates/bill/transactions/tags/txs_table.html b/templates/bill/transactions/tags/txs_table.html
index 09f87b38..ca08fa59 100644
--- a/templates/bill/transactions/tags/txs_table.html
+++ b/templates/bill/transactions/tags/txs_table.html
@@ -1,11 +1,9 @@
 {% load i18n %}
 {% load django_ledger %}
-
 {% if style == 'detail' %}
-
     <div class="table-responsive">
         <table class="table  table-hover">
-            <thead >
+            <thead>
                 <tr class="bg-body-highlight">
                     <th class="sort white-space-nowrap align-middle"  scope="col">{% trans 'Timestamp' %}</th>
                     <th class="sort white-space-nowrap align-middle"  scope="col">{% trans 'Account' %}</th>
@@ -17,23 +15,31 @@
                 </tr>
             </thead>
             <tbody class="fs-9">
-
                 {% for transaction_model in transaction_model_qs %}
-
                     <tr>
-                        <td class=" white-space-nowrap align-middle ps-2" scope="col" >{{ transaction_model.timestamp }}</td>
+                        <td class=" white-space-nowrap align-middle ps-2" scope="col">{{ transaction_model.timestamp }}</td>
                         <td class=" white-space-nowrap align-middle"  scope="col">{{ transaction_model.account_code }}</td>
                         <td class=" white-space-nowrap align-middle" scope="col">{{ transaction_model.account_name }}</td>
-                        <td class=" white-space-nowrap align-middle"  scope="col">{% if transaction_model.entity_unit_name %}{{ transaction_model.entity_unit_name }}{% endif %}</td>
-                        <td class=" white-space-nowrap align-middle" scope="col">{% if transaction_model.is_credit %}{{ transaction_model.amount | currency_format }}{% endif %}</td>
-                        <td class=" white-space-nowrap align-middle"  scope="col">{% if transaction_model.is_debit %}{{ transaction_model.amount | currency_format }}{% endif %}</td>
-                        <td class=" white-space-nowrap align-middle pe-2"  scope="col">{% if transaction_model.description %}{{ transaction_model.description }}{% endif %}</td>
+                        <td class=" white-space-nowrap align-middle"  scope="col">
+                            {% if transaction_model.entity_unit_name %}{{ transaction_model.entity_unit_name }}{% endif %}
+                        </td>
+                        <td class=" white-space-nowrap align-middle" scope="col">
+                            {% if transaction_model.is_credit %}{{ transaction_model.amount | currency_format }}{% endif %}
+                        </td>
+                        <td class=" white-space-nowrap align-middle"  scope="col">
+                            {% if transaction_model.is_debit %}{{ transaction_model.amount | currency_format }}{% endif %}
+                        </td>
+                        <td class=" white-space-nowrap align-middle pe-2"  scope="col">
+                            {% if transaction_model.description %}{{ transaction_model.description }}{% endif %}
+                        </td>
                     </tr>
                 {% endfor %}
                 <tr class="fw-bold">
                     <td class=" white-space-nowrap align-middle"  colspan="3"></td>
-                    <td  class=" white-space-nowrap align-middle" scope="col">{% trans 'Total' %}</td>
-                    <td class=" white-space-nowrap align-middle" scope="col">{% currency_symbol %}{{ total_credits | currency_format }}</td>
+                    <td class=" white-space-nowrap align-middle" scope="col">{% trans 'Total' %}</td>
+                    <td class=" white-space-nowrap align-middle" scope="col">
+                        {% currency_symbol %}{{ total_credits | currency_format }}
+                    </td>
                     <td class=" white-space-nowrap align-middle" scope="col">{% currency_symbol %}{{ total_debits | currency_format }}</td>
                     <td class=" white-space-nowrap align-middle"  scope="col"></td>
                 </tr>
@@ -56,9 +62,15 @@
                     <tr>
                         <td class=" white-space-nowrap align-middle ps-2">{{ transaction_model.account_code }}</td>
                         <td class=" white-space-nowrap align-middle">{{ transaction_model.account_name }}</td>
-                        <td class=" white-space-nowrap align-middle">{% if transaction_model.is_credit %}{{ transaction_model.amount | currency_format }}{% endif %}</td>
-                        <td class=" white-space-nowrap align-middle">{% if transaction_model.is_debit %}{{ transaction_model.amount | currency_format }}{% endif %}</td>
-                        <td class=" white-space-nowrap align-middle pe-2">{% if transaction_model.description %}{{ transaction_model.description }}{% endif %}</td>
+                        <td class=" white-space-nowrap align-middle">
+                            {% if transaction_model.is_credit %}{{ transaction_model.amount | currency_format }}{% endif %}
+                        </td>
+                        <td class=" white-space-nowrap align-middle">
+                            {% if transaction_model.is_debit %}{{ transaction_model.amount | currency_format }}{% endif %}
+                        </td>
+                        <td class=" white-space-nowrap align-middle pe-2">
+                            {% if transaction_model.description %}{{ transaction_model.description }}{% endif %}
+                        </td>
                     </tr>
                 {% endfor %}
                 <tr class="fw-bold">
@@ -72,4 +84,3 @@
         </table>
     </div>
 {% endif %}
-
diff --git a/templates/chat_support.html b/templates/chat_support.html
index 6035e9d6..680752d4 100644
--- a/templates/chat_support.html
+++ b/templates/chat_support.html
@@ -1,43 +1,84 @@
 <div class="support-chat-row">
-  <div class="row-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 class="row-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>
-      <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/40x40/30.webp' %}" alt="" /></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/40x40/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>
+            <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 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>
\ No newline at end of file
+</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>
diff --git a/templates/components/activity_modal.html b/templates/components/activity_modal.html
index 76b9b572..69aafd9c 100644
--- a/templates/components/activity_modal.html
+++ b/templates/components/activity_modal.html
@@ -1,30 +1,38 @@
 {% load static i18n crispy_forms_tags %}
 <!-- activity Modal -->
-<div class="modal fade" id="activityModal" tabindex="-1" aria-labelledby="activityModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-md">
-    <div class="modal-content">
-      <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
-        <h4 class="modal-title" id="noteModalLabel">{% trans 'Activity' %}</h4>
-        <button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close">
-          <span class="fas fa-times"></span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <form action="{% url 'add_activity' dealer_slug=request.dealer.slug content_type=content_type slug=slug %}" method="post" class="add_activity_form">
-          {% csrf_token %}
-          <div class="mb-2 form-group">
-            <select class="form-select" name="activity_type" id="activity_type">
-              <option value="call">{% trans 'Call' %}</option>
-              <option value="email">{% trans 'Email' %}</option>
-              <option value="meeting">{% trans 'Meeting' %}</option>
-            </select>
-          </div>
-          <div class="mb-3 form-group">
-            <textarea class="form-control" name="notes" id="notes" rows="6"></textarea>
-          </div>
-          <button type="submit" class="btn btn-phoenix-success w-100">{% trans 'Save' %}</button>
-        </form>
-      </div>
+<div class="modal fade"
+     id="activityModal"
+     tabindex="-1"
+     aria-labelledby="activityModalLabel"
+     aria-hidden="true">
+    <div class="modal-dialog modal-md">
+        <div class="modal-content">
+            <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
+                <h4 class="modal-title" id="noteModalLabel">{% trans 'Activity' %}</h4>
+                <button class="btn p-0 text-body-quaternary fs-6"
+                        data-bs-dismiss="modal"
+                        aria-label="Close">
+                    <span class="fas fa-times"></span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <form action="{% url 'add_activity' dealer_slug=request.dealer.slug content_type=content_type slug=slug %}"
+                      method="post"
+                      class="add_activity_form">
+                    {% csrf_token %}
+                    <div class="mb-2 form-group">
+                        <select class="form-select" name="activity_type" id="activity_type">
+                            <option value="call">{% trans 'Call' %}</option>
+                            <option value="email">{% trans 'Email' %}</option>
+                            <option value="meeting">{% trans 'Meeting' %}</option>
+                        </select>
+                    </div>
+                    <div class="mb-3 form-group">
+                        <textarea class="form-control" name="notes" id="notes" rows="6"></textarea>
+                    </div>
+                    <button type="submit" class="btn btn-phoenix-success w-100">{% trans 'Save' %}</button>
+                </form>
+            </div>
+        </div>
     </div>
-  </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/components/date_picker.html b/templates/components/date_picker.html
index 396bceb9..8baaa1fa 100644
--- a/templates/components/date_picker.html
+++ b/templates/components/date_picker.html
@@ -1,7 +1,6 @@
 {% load i18n %}
-
 {% if date_navigation_url %}
-    <button id="{{ date_picker_id }}" data-baseurl="{{ date_navigation_url }}"
+    <button id="{{ date_picker_id }}"
+            data-baseurl="{{ date_navigation_url }}"
             class="btn btn-sm btn-phoenix-primary">{% trans 'Select Date' %}</button>
 {% endif %}
-
diff --git a/templates/components/note_modal.html b/templates/components/note_modal.html
index ce06584d..5079960c 100644
--- a/templates/components/note_modal.html
+++ b/templates/components/note_modal.html
@@ -1,30 +1,37 @@
 {% load i18n crispy_forms_tags %}
-<div class="modal fade" id="noteModal" tabindex="-1" aria-labelledby="noteModalLabel" aria-hidden="true">
+<div class="modal fade"
+     id="noteModal"
+     tabindex="-1"
+     aria-labelledby="noteModalLabel"
+     aria-hidden="true">
     <div class="modal-dialog modal-md">
-    <div class="modal-content">
-        <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
-        <h4 class="modal-title" id="noteModalLabel">{% trans 'Note' %}</h4>
-        <button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close">
-            <span class="fas fa-times"></span>
-        </button>
+        <div class="modal-content">
+            <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
+                <h4 class="modal-title" id="noteModalLabel">{% trans 'Note' %}</h4>
+                <button class="btn p-0 text-body-quaternary fs-6"
+                        data-bs-dismiss="modal"
+                        aria-label="Close">
+                    <span class="fas fa-times"></span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <form action="{% url 'add_note' request.dealer.slug content_type slug %}"
+                      method="post"
+                      class="add_note_form">
+                    {% csrf_token %}
+                    {{ note_form|crispy }}
+                    <button type="submit" class="btn btn-phoenix-success w-100">{% trans 'Save' %}</button>
+                </form>
+            </div>
         </div>
-        <div class="modal-body">
-        <form action="{% url 'add_note' request.dealer.slug content_type slug %}" method="post" class="add_note_form">
-            {% csrf_token %}
-            {{ note_form|crispy }}
-            <button type="submit" class="btn btn-phoenix-success w-100">{% trans 'Save' %}</button>
-        </form>
-        </div>
-    </div>
     </div>
 </div>
-
 <script>
     function updateNote(e) {
-      let url = e.getAttribute('data-url')
-      let note = e.getAttribute('data-note')
-      document.querySelector('#id_note').value = note
-      let form = document.querySelector('.add_note_form')
-      form.action = url
+        let url = e.getAttribute('data-url')
+        let note = e.getAttribute('data-note')
+        document.querySelector('#id_note').value = note
+        let form = document.querySelector('.add_note_form')
+        form.action = url
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/templates/components/schedule_modal.html b/templates/components/schedule_modal.html
index 2b358da8..511c51b6 100644
--- a/templates/components/schedule_modal.html
+++ b/templates/components/schedule_modal.html
@@ -1,20 +1,28 @@
 {% load i18n crispy_forms_filters %}
-<div class="modal fade" id="scheduleModal" tabindex="-1" aria-labelledby="taskModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-md">
-    <div class="modal-content">
-      <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
-        <h4 class="modal-title" id="taskModalLabel">{% trans 'Schedule' %}</h4>
-        <button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close">
-          <span class="fas fa-times"></span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <form action="{% url 'schedule_event' request.dealer.slug content_type slug %}" method="post" class="add_schedule_form">
-          {% csrf_token %}
-          {{ schedule_form|crispy }}
-          <button type="submit" class="btn btn-phoenix-success w-100">{% trans 'Save' %}</button>
-        </form>
-      </div>
+<div class="modal fade"
+     id="scheduleModal"
+     tabindex="-1"
+     aria-labelledby="taskModalLabel"
+     aria-hidden="true">
+    <div class="modal-dialog modal-md">
+        <div class="modal-content">
+            <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
+                <h4 class="modal-title" id="taskModalLabel">{% trans 'Schedule' %}</h4>
+                <button class="btn p-0 text-body-quaternary fs-6"
+                        data-bs-dismiss="modal"
+                        aria-label="Close">
+                    <span class="fas fa-times"></span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <form action="{% url 'schedule_event' request.dealer.slug content_type slug %}"
+                      method="post"
+                      class="add_schedule_form">
+                    {% csrf_token %}
+                    {{ schedule_form|crispy }}
+                    <button type="submit" class="btn btn-phoenix-success w-100">{% trans 'Save' %}</button>
+                </form>
+            </div>
+        </div>
     </div>
-  </div>
 </div>
diff --git a/templates/components/task_modal.html b/templates/components/task_modal.html
index f1e7ad8b..878ab944 100644
--- a/templates/components/task_modal.html
+++ b/templates/components/task_modal.html
@@ -1,27 +1,35 @@
 {% load static i18n crispy_forms_tags %}
 <!-- task Modal -->
 <style>
-    .completed-task {
-      text-decoration: line-through;
-      opacity: 0.7;
-    }
+  .completed-task {
+    text-decoration: line-through;
+    opacity: 0.7;
+  }
 </style>
-<div class="modal fade" id="taskModal" tabindex="-1" aria-labelledby="taskModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-md">
-    <div class="modal-content">
-      <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
-        <h4 class="modal-title" id="taskModalLabel">{% trans 'Task' %}</h4>
-        <button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close">
-          <span class="fas fa-times"></span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <form action="{% url 'add_task' request.dealer.slug content_type slug %}" method="post" class="add_task_form">
-          {% csrf_token %}
-          {{ staff_task_form|crispy }}
-          <button type="submit" class="btn btn-phoenix-success w-100">{% trans 'Save' %}</button>
-        </form>
-      </div>
+<div class="modal fade"
+     id="taskModal"
+     tabindex="-1"
+     aria-labelledby="taskModalLabel"
+     aria-hidden="true">
+    <div class="modal-dialog modal-md">
+        <div class="modal-content">
+            <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
+                <h4 class="modal-title" id="taskModalLabel">{% trans 'Task' %}</h4>
+                <button class="btn p-0 text-body-quaternary fs-6"
+                        data-bs-dismiss="modal"
+                        aria-label="Close">
+                    <span class="fas fa-times"></span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <form action="{% url 'add_task' request.dealer.slug content_type slug %}"
+                      method="post"
+                      class="add_task_form">
+                    {% csrf_token %}
+                    {{ staff_task_form|crispy }}
+                    <button type="submit" class="btn btn-phoenix-success w-100">{% trans 'Save' %}</button>
+                </form>
+            </div>
+        </div>
     </div>
-  </div>
 </div>
diff --git a/templates/crm/add_activity.html b/templates/crm/add_activity.html
index 44de9100..2e171743 100644
--- a/templates/crm/add_activity.html
+++ b/templates/crm/add_activity.html
@@ -1,6 +1,5 @@
 {% extends 'base.html' %}
 {% load i18n static crispy_forms_filters %}
-
 {% block content %}
     <h1>Add Activity to {{ lead.first_name }} {{ lead.last_name }}</h1>
     <form method="post">
@@ -8,4 +7,4 @@
         {{ form|crispy }}
         <button class="btn btn-phoenix-primary" type="submit">Add Activity</button>
     </form>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/crm/employee_calendar.html b/templates/crm/employee_calendar.html
index 6127571f..74d71a84 100644
--- a/templates/crm/employee_calendar.html
+++ b/templates/crm/employee_calendar.html
@@ -1,38 +1,38 @@
 {% extends 'base.html' %}
 {% load static %}
 {% block content %}
-  <div class="row">
-    <div class="table-responsive border-translucent">
-      <table class="table table-sm fs-9">
-        <thead>
-          <tr>
-            <th>Customer</th>
-            <th>Service</th>
-            <th>Date</th>
-            <th>Start Time</th>
-            <th>End Time</th>
-            <th>Staff</th>
-            <th>Status</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for appointment in appointments %}
-            <tr>
-              <td>{{ appointment.get_client_name }}</td>
-              <td>{{ appointment.get_service }}</td>
-              <td>{{ appointment.appointment_request.date|date:"Y-m-d" }}</td>
-              <td>{{ appointment.appointment_request.start_time }}</td>
-              <td>{{ appointment.appointment_request.end_time }}</td>
-              <td>{{ appointment.get_staff_member_name }}</td>
-              <td></td>
-              <td>
-                <a href="{% url 'appointment:display_appointment' appointment.id %}">view</a>
-              </td>
-            </tr>
-          {% endfor %}
-        </tbody>
-      </table>
+    <div class="row">
+        <div class="table-responsive border-translucent">
+            <table class="table table-sm fs-9">
+                <thead>
+                    <tr>
+                        <th>Customer</th>
+                        <th>Service</th>
+                        <th>Date</th>
+                        <th>Start Time</th>
+                        <th>End Time</th>
+                        <th>Staff</th>
+                        <th>Status</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for appointment in appointments %}
+                        <tr>
+                            <td>{{ appointment.get_client_name }}</td>
+                            <td>{{ appointment.get_service }}</td>
+                            <td>{{ appointment.appointment_request.date|date:"Y-m-d" }}</td>
+                            <td>{{ appointment.appointment_request.start_time }}</td>
+                            <td>{{ appointment.appointment_request.end_time }}</td>
+                            <td>{{ appointment.get_staff_member_name }}</td>
+                            <td></td>
+                            <td>
+                                <a href="{% url 'appointment:display_appointment' appointment.id %}">view</a>
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
     </div>
-  </div>
 {% endblock %}
diff --git a/templates/crm/leads/lead_confirm_delete.html b/templates/crm/leads/lead_confirm_delete.html
index f20794a6..63793620 100644
--- a/templates/crm/leads/lead_confirm_delete.html
+++ b/templates/crm/leads/lead_confirm_delete.html
@@ -4,7 +4,5 @@
         <meta charset="UTF-8">
         <title>Title</title>
     </head>
-    <body>
-
-    </body>
-</html>
\ No newline at end of file
+    <body></body>
+</html>
diff --git a/templates/crm/leads/lead_detail.html b/templates/crm/leads/lead_detail.html
index 9907626b..2bcb8cb3 100644
--- a/templates/crm/leads/lead_detail.html
+++ b/templates/crm/leads/lead_detail.html
@@ -1,9 +1,8 @@
 {% extends 'base.html' %}
 {% load i18n static humanize %}
 {% load crispy_forms_tags %}
-
 {% block customCSS %}
-  <style>
+    <style>
     .main-tab li:last-child {
       margin-left: auto;
     }
@@ -29,518 +28,770 @@
       border-bottom: 28px solid transparent;
       border-left: 20px solid #dee2e6;
     }
-  </style>
+    </style>
 {% endblock customCSS %}
 {% block content %}
-  <div class="row g-3">
-    <div class="col-12">
-      {% include "crm/leads/partials/update_action.html" %}
-      <div class="row align-items-center justify-content-between g-3 mb-3">
-        <div class="col-12 col-md-auto">
-          <h4 class="mb-0">{{ _("Lead Details")}}</h4>
-        </div>
-        <div class="col-12 col-md-auto">
-          <div class="d-flex">
-            <div class="flex-1 d-md-none">
-              <button class="btn px-3 btn-phoenix-secondary text-body-tertiary me-2"><span class="fa-solid fa-bars"></span></button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="row g-0 g-md-4 g-xl-6">
-    <div class="col-md-5 col-lg-5 col-xl-4">
-      <div class="sticky-leads-sidebar">
-        <div class="lead-details" data-breakpoint="md">
-          <div class="d-flex justify-content-between align-items-center mb-2 d-md-none">
-            <h3 class="mb-0">{{ _("Lead Details")}}</h3>
-            <button class="btn p-0" ><span class="uil uil-times fs-7"></span></button>
-        </div>
-        <div class="card mb-2">
-            <div class="card-body">
-              <div class="row align-items-center g-3 text-center text-xxl-start">
-                <div class="col-6 col-sm-auto flex-1">
-                  <h3 class="fw-bolder mb-2">{{ lead.first_name }} {{ lead.last_name }}</h3>
-                  {% if lead.staff %}
-                    <p class="fs-8 mb-0 white-space-nowrap fw-bold">{{ _("Assigned to")}}: <span class="fw-light">{{ lead.staff }}</span></p>
-                  {% else %}
-                    <p class="mb-0 fw-bold">{{ _("Not Assigned")}}</p>
-                  {% endif %}
+    <div class="row g-3">
+        <div class="col-12">
+            {% include "crm/leads/partials/update_action.html" %}
+            <div class="row align-items-center justify-content-between g-3 mb-3">
+                <div class="col-12 col-md-auto">
+                    <h4 class="mb-0">{{ _("Lead Details") }}</h4>
                 </div>
-                <div class="col-6 col-sm-auto flex-1">
-
-                  <h5 class="text-body-highlight mb-0 text-end">{{ _("Status")}}
-                    {% if lead.status == "new" %}
-                      <span class="badge badge-phoenix badge-phoenix-primary"><span class="badge-label">{{_("New")}}</span><span class="fa fa-bell ms-1"></span></span>
-                    {% elif lead.status == "contacted" %}
-                      <span class="badge badge-phoenix badge-phoenix-warning"><span class="badge-label">{{_("Contacted")}}</span><span class="fa fa-clock-o ms-1"></span></span>
-                    {% elif lead.status == "qualified" %}
-                      <span class="badge badge-phoenix badge-phoenix-info"><span class="badge-label">{{_("Qualified")}}</span><span class="fa fa-wrench ms-1"></span></span>
-                    {% elif lead.status == "unqualified" %}
-                      <span class="badge badge-phoenix badge-phoenix-success"><span class="badge-label">{{_("Unqualified")}}</span><span class="fa fa-check ms-1"></span></span>
-                    {% elif lead.status == "converted" %}
-                      <span class="badge badge-phoenix badge-phoenix-danger"><span class="badge-label">{{_("Converted")}}</span><span class="fa fa-times ms-1"></span></span>
-                    {% endif %}
-                  </h5>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="card mb-2">
-            <div class="card-body">
-              <div class="row align-items-center g-3 text-center text-xxl-start">
-                <div class="col-6 col-sm-auto d-flex flex-column align-items-center text-center">
-                  <h5 class="fw-bolder mb-2 text-body-highlight">{{ _("Car Requested") }}</h5>
-                  <img src="{{ lead.id_car_make.logo.url }}" alt="Car Make Logo" class="img-fluid rounded mb-2" style="width: 60px; height: 60px;">
-                  <p class="mb-0">{{ lead.id_car_make.get_local_name }} - {{ lead.id_car_model.get_local_name }} {{ lead.year }}</p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="card mb-2">
-            <div class="card-body">
-              <div class="row align-items-center g-3 text-center text-xxl-start">
-                <div class="col-6 col-sm-auto d-flex flex-column align-items-center text-center">
-                  <h5 class="fw-bolder mb-2 text-body-highlight">{{ _("Related Records") }}</h5>
-                  <h6 class="fw-bolder mb-2 text-body-highlight">{{ _("Opportunity") }}</h6>
-                  {% if lead.opportunity %}
-                    <a href="{% url 'opportunity_detail' request.dealer.slug lead.opportunity.slug %}" class="">{{ lead.opportunity }}</a>
-                  {% else %}
-                    <p>{{ _("No Opportunity") }}</p>
-                  {% endif %}
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="card mb-2">
-            <div class="card-body">
-              <div class="mb-3">
-                <div class="d-flex align-items-center mb-1"><span class="me-2 uil uil-envelope-alt">  </span>
-                  <h5 class="text-body-highlight fw-bold mb-0">{{ _("Email") }}</h5>
-                </div>
-                <span class="text-body-secondary">{{ lead.email }}</span>
-              </div>
-              <div class="mb-3">
-                <div class="d-flex align-items-center mb-1"><span class="me-2 uil uil-phone"> </span>
-                  <h5 class="text-body-highlight fw-bold mb-0">{{ _("Phone") }}</h5>
-                </div>
-                <span class="text-body-secondary">{{ lead.phone_number}} </span>
-              </div>
-              <div class="mb-3">
-                <div class="d-flex align-items-center mb-1"><span class="me-2 uil uil-clock"></span>
-                  <h5 class="text-body-highlight fw-bold mb-0">{{ _("Created")}}</h5>
-                </div>
-                <span class="text-body-secondary">{{ lead.created|naturalday|capfirst }}</span>
-              </div>
-              <div class="mb-3">
-                <div class="d-flex align-items-center mb-1"><span class="me-2 uil uil-file-check-alt"></span>
-                  <h5 class="text-body-highlight fw-bold mb-0">{{ _("Lead Source")}}</h5>
-                </div>
-                {% if lead.source == 'REFERRALS' %}
-                    <span class="ms-2 fa fa-users"></span>
-                  {% elif lead.source == 'WHATSAPP' %}
-                    <span class="ms-2 fa fa-whatsapp"></span>
-                  {% elif lead.source == 'SHOWROOM' %}
-                    <span class="ms-2 fa fa-building"></span>
-                  {% elif lead.source == 'TIKTOK' %}
-                    <span class="ms-2 fa fa-tiktok"></span>
-                  {% elif lead.source == 'INSTAGRAM' %}
-                    <span class="ms-2 fa fa-instagram"></span>
-                  {% elif lead.source == 'X' %}
-                    <span class="ms-2 fa fa-times-circle"></span>
-                  {% elif lead.source == 'FACEBOOK' %}
-                    <span class="ms-2 fa fa-facebook-f"></span>
-                  {% elif lead.source == 'MOTORY' %}
-                    <span class="ms-2 fa fa-car-side"></span>
-                  {% elif lead.source == 'INFLUENCERS' %}
-                    <span class="ms-2 fa fa-user-check"></span>
-                  {% elif lead.source == 'YOUTUBE' %}
-                    <span class="ms-2 fa fa-youtube"></span>
-                  {% elif lead.source == 'CAMPAIGN' %}
-                    <span class="ms-2 fa fa-bullhorn"></span>
-                  {% endif %}
-                <span class="text-body-secondary">{{ lead.source|upper }}</span>
-              </div>
-              <div class="mb-3">
-                <div class="d-flex align-items-center mb-1"><span class="me-2 uil uil-file-check-alt"></span>
-                  <h5 class="text-body-highlight fw-bold mb-0">{{ _("Lead Channel")}}</h5>
-                </div>
-                <span class="text-body-secondary">{{ lead.channel|upper }}</span>
-              </div>
-              <div class="mb-3">
-                <div class="d-flex align-items-center mb-1"><span class="me-2 uil uil-estate"></span>
-                  <h5 class="text-body-highlight fw-bold mb-0">{{ _("Address") }}</h5>
-                </div>
-                <span class="text-body-secondary">{{ lead.address}}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="d-lg-none top-0"></div>
-      </div>
-    </div>
-    <div class="col-md-7 col-lg-7 col-xl-8">
-      <div class="d-flex w-100 gap-5">
-        <div class="kanban-header bg-success w-50 text-white fw-bold"><i class="fa-solid fa-circle-check me-2"></i>{{lead.status|capfirst}} <br> &nbsp; <small>{% trans "Current Stage" %}</small></div>
-        <div class="kanban-header bg-secondary w-50 text-white fw-bold"><i class="fa-solid fa-circle-info me-2"></i>{{lead.next_action|capfirst}}  <br> &nbsp; <small>{% trans "Next Action" %} :</small>&nbsp; <small>{{lead.next_action_date|naturalday|capfirst}}</small></div>
-      </div>
-      <ul class="nav main-tab nav-underline fs-9 deal-details scrollbar flex-nowrap w-100 pb-1 mb-6 justify-content-end mt-5" id="myTab" role="tablist" style="overflow-y: hidden;">
-          <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link active" id="tasks-tab" data-bs-toggle="tab" href="#tab-tasks" role="tab" aria-controls="tab-tasks" aria-selected="true"> <span class="fa-solid fa-envelope me-2 tab-icon-color fs-8"></span>{{ _("Tasks") }}</a></li>
-          <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="notes-tab" data-bs-toggle="tab" href="#tab-notes" role="tab" aria-controls="tab-notes" aria-selected="false" tabindex="-1"> <span class="fa-solid fa-clipboard me-2 tab-icon-color fs-8"></span>{{ _("Notes") }}</a></li>
-          <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="emails-tab" data-bs-toggle="tab" href="#tab-emails" role="tab" aria-controls="tab-emails" aria-selected="true"> <span class="fa-solid fa-envelope me-2 tab-icon-color fs-8"></span>{{ _("Emails") }}</a></li>
-          <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="activity-tab" data-bs-toggle="tab" href="#tab-activity" role="tab" aria-controls="tab-activity" aria-selected="false" tabindex="-1"> <span class="fa-solid fa-chart-line me-2 tab-icon-color fs-8"></span>{{ _("Activity") }}</a></li>
-          <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="opportunity-tab" data-bs-toggle="tab" href="#tab-opportunity" role="tab" aria-controls="tab-opportunity" aria-selected="false" tabindex="-1"> <span class="fa-solid fa-chart-line me-2 tab-icon-color fs-8"></span>{{ _("Opportunities") }}</a></li>
-       {% if perms.inventory.change_lead%}
-        <li class="nav-item text-nowrap ml-auto" role="presentation">
-          {% if perms.inventory.can_reassign_lead %}
-            <button class="btn btn-phoenix-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"> <i class="fa-solid fa-user-plus me-2"></i> Reassign Lead</button>
-          {% endif %}
-          <button class="btn btn-phoenix-primary btn-sm" onclick="openActionModal('{{ lead.id }}', '{{ lead.action }}', '{{ lead.next_action }}', '{{ lead.next_action_date|date:"Y-m-d\TH:i" }}')">
-            <i class="fa-solid fa-user-plus me-2"></i>
-            {% trans "Update Actions" %}
-          </button>
-          <div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
-            <div class="modal-dialog">
-              <div class="modal-content">
-                <form class="modal-content" action="{% url 'lead_transfer' request.dealer.slug lead.slug %}" method="post">
-                  {% csrf_token %}
-                  <div class="modal-header">
-                    <h5 class="modal-title" id="exampleModalLabel">Reassign Lead To Another Employee</h5>
-                    <button class="btn btn-close p-1" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
-                  </div>
-                  <div class="modal-body">
-                    {{transfer_form|crispy}}
-                  </div>
-                  <div class="modal-footer">
-                    <button class="btn btn-phoenix-primary" type="submit">Save</button>
-                    <button class="btn btn-phoenix-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </li>
-        {% endif %}
-      </ul>
-      <div class="tab-content" id="myTabContent">
-        <div class="tab-pane fade" id="tab-activity" role="tabpanel" aria-labelledby="activity-tab">
-          <div class="mb-1 d-flex justify-content-between align-items-center">
-            <h3 class="mb-4" id="s  crollspyTask">{{ _("Activities") }} <span class="fw-light fs-7">({{ activities.count}})</span></h3>
-            {% if perms.inventory.change_lead%}
-            {% endif %}
-          </div>
-          <div class="row justify-content-between align-items-md-center hover-actions-trigger btn-reveal-trigger border-translucent py-3 gx-0 border-top">
-            <div class="col-12 col-lg-auto">
-              <div class="timeline-basic mb-9">
-                {% for activity in activities %}
-                  <div class="timeline-item">
-                    <div class="row g-3">
-                      <div class="col-auto">
-                        <div class="timeline-item-bar position-relative">
-                          <div class="icon-item icon-item-md rounded-7 border border-translucent">
-                            {% if activity.activity_type == "call" %}
-                              <span class="fa-solid fa-phone text-warning fs-8"></span>
-                            {% elif activity.activity_type == "note" %}
-                              <span class="fa-regular fa-sticky-note text-info-light fs-8"></span>
-                            {% elif activity.activity_type == "task" %}
-                              <span class="fa-solid fa-list-check text-success fs-8"></span>
-                            {% elif activity.activity_type == "email" %}
-                              <span class="fa-solid fa-envelope text-info-light fs-8"></span>
-                            {% elif activity.activity_type == "visit" %}
-                              <span class="fa-solid fa-users text-danger fs-8"></span>
-                            {% elif activity.activity_type == "whatsapp" %}
-                              <span class="fab fa-whatsapp text-success-dark fs-7"></span>
-                            {% endif %}
-                          </div>
-                          {% if forloop.last %}
-                            <span class=""></span>
-                          {% else %}
-                            <span class="timeline-bar border-end border-dashed"></span>
-                          {% endif %}
+                <div class="col-12 col-md-auto">
+                    <div class="d-flex">
+                        <div class="flex-1 d-md-none">
+                            <button class="btn px-3 btn-phoenix-secondary text-body-tertiary me-2">
+                                <span class="fa-solid fa-bars"></span>
+                            </button>
                         </div>
-                      </div>
-                      <div class="col">
-                        <div class="d-flex justify-content-between">
-                          <div class="d-flex mb-2">
-                            <h6 class="lh-sm mb-0 me-2 text-body-secondary timeline-item-title">{{ activity.activity_type|capfirst }}</h6>
-                          </div>
-                          <p class="text-body-quaternary fs-9 mb-0 text-nowrap timeline-time"><span class="fa-regular fa-clock me-1"></span>{{ activity.created|naturalday|capfirst }}</p>
-                        </div>
-                        <h6 class="fs-10 fw-normal mb-3">{{ _("created by") }} <a class="fw-semibold" href="#!">{{ activity.created_by }}</a></h6>
-                        <p class="fs-9 text-body-secondary w-sm-60 mb-5">{{ activity.notes }}</p>
-                      </div>
                     </div>
-                  </div>
-                {% endfor %}
-              </div>
+                </div>
             </div>
-          </div>
         </div>
-        <div class="tab-pane fade" id="tab-opportunity" role="tabpanel" aria-labelledby="opportunity-tab">
-          <div class="mb-1 d-flex justify-content-between align-items-center">
-            <h3 class="mb-4" id="scrollspyTask">{{ _("Opportunities") }} <span class="fw-light fs-7">({{ lead.get_opportunities.count}})</span></h3>
-            {% if perms.inventory.add_opportunity%}
-            <a href="{% url 'lead_opportunity_create' request.dealer.slug lead.slug %}" class="btn btn-phoenix-primary btn-sm" type="button"> <i class="fa-solid fa-plus me-2"></i>{{ _("Add Opportunity") }}</a>
-            {% endif%}
-          </div>
-
-          <div class="border-top border-bottom border-translucent" id="leadDetailsTable">
-            <div class="table-responsive scrollbar mx-n1 px-1">
-              <table class="table fs-9 mb-0">
-                <thead>
-                  <tr>
-                    <th class="align-middle pe-6 text-uppercase text-start" scope="col" style="width:40%;">{{ _("Car") }}</th>
-                    <th class="align-middle text-start text-uppercase" scope="col" style="width:20%;">{{ _("Probability")}}</th>
-                    <th class="align-middle text-start text-uppercase white-space-nowrap" scope="col" style="width:20%;">{{ _("Priority")}}</th>
-                    <th class="align-middle pe-0 text-end" scope="col" style="width:10%;"></th>
-                  </tr>
-                </thead>
-                <tbody >
-                  {% for opportunity in lead.get_opportunities %}
-                    <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                      <td class="align-middle  text-start fw-bold text-body-tertiary ps-1">{{opportunity.car}}</td>
-                      <td class="align-middle  text-start fw-bold text-body-tertiary ps-1">{{opportunity.probability}}</td>
-                      <td class="align-middle  text-start fw-bold text-body-tertiary ps-1">{{opportunity.priority|capfirst}}</td>
-                      <td class="align-middle  text-start fw-bold text-body-tertiary ps-1"><a class="btn btn-sm btn-phoenix-primary" href="{% url 'opportunity_detail' request.dealer.slug opportunity.slug %}">View</a></td>
-                    </tr>
-                  {% endfor %}
-                </tbody>
-              </table>
-
+    </div>
+    <div class="row g-0 g-md-4 g-xl-6">
+        <div class="col-md-5 col-lg-5 col-xl-4">
+            <div class="sticky-leads-sidebar">
+                <div class="lead-details" data-breakpoint="md">
+                    <div class="d-flex justify-content-between align-items-center mb-2 d-md-none">
+                        <h3 class="mb-0">{{ _("Lead Details") }}</h3>
+                        <button class="btn p-0">
+                            <span class="uil uil-times fs-7"></span>
+                        </button>
+                    </div>
+                    <div class="card mb-2">
+                        <div class="card-body">
+                            <div class="row align-items-center g-3 text-center text-xxl-start">
+                                <div class="col-6 col-sm-auto flex-1">
+                                    <h3 class="fw-bolder mb-2">{{ lead.first_name }} {{ lead.last_name }}</h3>
+                                    {% if lead.staff %}
+                                        <p class="fs-8 mb-0 white-space-nowrap fw-bold">
+                                            {{ _("Assigned to") }}: <span class="fw-light">{{ lead.staff }}</span>
+                                        </p>
+                                    {% else %}
+                                        <p class="mb-0 fw-bold">{{ _("Not Assigned") }}</p>
+                                    {% endif %}
+                                </div>
+                                <div class="col-6 col-sm-auto flex-1">
+                                    <h5 class="text-body-highlight mb-0 text-end">
+                                        {{ _("Status") }}
+                                        {% if lead.status == "new" %}
+                                            <span class="badge badge-phoenix badge-phoenix-primary"><span class="badge-label">{{ _("New") }}</span><span class="fa fa-bell ms-1"></span></span>
+                                        {% elif lead.status == "contacted" %}
+                                            <span class="badge badge-phoenix badge-phoenix-warning"><span class="badge-label">{{ _("Contacted") }}</span><span class="fa fa-clock-o ms-1"></span></span>
+                                        {% elif lead.status == "qualified" %}
+                                            <span class="badge badge-phoenix badge-phoenix-info"><span class="badge-label">{{ _("Qualified") }}</span><span class="fa fa-wrench ms-1"></span></span>
+                                        {% elif lead.status == "unqualified" %}
+                                            <span class="badge badge-phoenix badge-phoenix-success"><span class="badge-label">{{ _("Unqualified") }}</span><span class="fa fa-check ms-1"></span></span>
+                                        {% elif lead.status == "converted" %}
+                                            <span class="badge badge-phoenix badge-phoenix-danger"><span class="badge-label">{{ _("Converted") }}</span><span class="fa fa-times ms-1"></span></span>
+                                        {% endif %}
+                                    </h5>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card mb-2">
+                        <div class="card-body">
+                            <div class="row align-items-center g-3 text-center text-xxl-start">
+                                <div class="col-6 col-sm-auto d-flex flex-column align-items-center text-center">
+                                    <h5 class="fw-bolder mb-2 text-body-highlight">{{ _("Car Requested") }}</h5>
+                                    <img src="{{ lead.id_car_make.logo.url }}"
+                                         alt="Car Make Logo"
+                                         class="img-fluid rounded mb-2"
+                                         style="width: 60px;
+                                                height: 60px">
+                                    <p class="mb-0">{{ lead.id_car_make.get_local_name }} - {{ lead.id_car_model.get_local_name }} {{ lead.year }}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card mb-2">
+                        <div class="card-body">
+                            <div class="row align-items-center g-3 text-center text-xxl-start">
+                                <div class="col-6 col-sm-auto d-flex flex-column align-items-center text-center">
+                                    <h5 class="fw-bolder mb-2 text-body-highlight">{{ _("Related Records") }}</h5>
+                                    <h6 class="fw-bolder mb-2 text-body-highlight">{{ _("Opportunity") }}</h6>
+                                    {% if lead.opportunity %}
+                                        <a href="{% url 'opportunity_detail' request.dealer.slug lead.opportunity.slug %}"
+                                           class="">{{ lead.opportunity }}</a>
+                                    {% else %}
+                                        <p>{{ _("No Opportunity") }}</p>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card mb-2">
+                        <div class="card-body">
+                            <div class="mb-3">
+                                <div class="d-flex align-items-center mb-1">
+                                    <span class="me-2 uil uil-envelope-alt"></span>
+                                    <h5 class="text-body-highlight fw-bold mb-0">{{ _("Email") }}</h5>
+                                </div>
+                                <span class="text-body-secondary">{{ lead.email }}</span>
+                            </div>
+                            <div class="mb-3">
+                                <div class="d-flex align-items-center mb-1">
+                                    <span class="me-2 uil uil-phone"></span>
+                                    <h5 class="text-body-highlight fw-bold mb-0">{{ _("Phone") }}</h5>
+                                </div>
+                                <span class="text-body-secondary">{{ lead.phone_number }}</span>
+                            </div>
+                            <div class="mb-3">
+                                <div class="d-flex align-items-center mb-1">
+                                    <span class="me-2 uil uil-clock"></span>
+                                    <h5 class="text-body-highlight fw-bold mb-0">{{ _("Created") }}</h5>
+                                </div>
+                                <span class="text-body-secondary">{{ lead.created|naturalday|capfirst }}</span>
+                            </div>
+                            <div class="mb-3">
+                                <div class="d-flex align-items-center mb-1">
+                                    <span class="me-2 uil uil-file-check-alt"></span>
+                                    <h5 class="text-body-highlight fw-bold mb-0">{{ _("Lead Source") }}</h5>
+                                </div>
+                                {% if lead.source == 'REFERRALS' %}
+                                    <span class="ms-2 fa fa-users"></span>
+                                {% elif lead.source == 'WHATSAPP' %}
+                                    <span class="ms-2 fa fa-whatsapp"></span>
+                                {% elif lead.source == 'SHOWROOM' %}
+                                    <span class="ms-2 fa fa-building"></span>
+                                {% elif lead.source == 'TIKTOK' %}
+                                    <span class="ms-2 fa fa-tiktok"></span>
+                                {% elif lead.source == 'INSTAGRAM' %}
+                                    <span class="ms-2 fa fa-instagram"></span>
+                                {% elif lead.source == 'X' %}
+                                    <span class="ms-2 fa fa-times-circle"></span>
+                                {% elif lead.source == 'FACEBOOK' %}
+                                    <span class="ms-2 fa fa-facebook-f"></span>
+                                {% elif lead.source == 'MOTORY' %}
+                                    <span class="ms-2 fa fa-car-side"></span>
+                                {% elif lead.source == 'INFLUENCERS' %}
+                                    <span class="ms-2 fa fa-user-check"></span>
+                                {% elif lead.source == 'YOUTUBE' %}
+                                    <span class="ms-2 fa fa-youtube"></span>
+                                {% elif lead.source == 'CAMPAIGN' %}
+                                    <span class="ms-2 fa fa-bullhorn"></span>
+                                {% endif %}
+                                <span class="text-body-secondary">{{ lead.source|upper }}</span>
+                            </div>
+                            <div class="mb-3">
+                                <div class="d-flex align-items-center mb-1">
+                                    <span class="me-2 uil uil-file-check-alt"></span>
+                                    <h5 class="text-body-highlight fw-bold mb-0">{{ _("Lead Channel") }}</h5>
+                                </div>
+                                <span class="text-body-secondary">{{ lead.channel|upper }}</span>
+                            </div>
+                            <div class="mb-3">
+                                <div class="d-flex align-items-center mb-1">
+                                    <span class="me-2 uil uil-estate"></span>
+                                    <h5 class="text-body-highlight fw-bold mb-0">{{ _("Address") }}</h5>
+                                </div>
+                                <span class="text-body-secondary">{{ lead.address }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="d-lg-none top-0"></div>
             </div>
-          </div>
         </div>
-        <div class="tab-pane fade" id="tab-notes" role="tabpanel" aria-labelledby="notes-tab">
-          <div class="mb-1 d-flex align-items-center justify-content-between">
-            <h3 class="mb-4" id="scrollspyNotes">{{ _("Notes") }}</h3>
-            {% if perms.inventory.change_lead %}
-            <button class="btn btn-phoenix-primary btn-sm" type="button" onclick="reset_form()" data-bs-toggle="modal" data-bs-target="#noteModal"><span class="fas fa-plus me-1"></span>{{ _("Add Note") }}</button>
-             {% endif %}
-          </div>
-
-          <div class="border-top border-bottom border-translucent" id="leadDetailsTable">
-            <div class="table-responsive scrollbar mx-n1 px-1">
-              <table class="table fs-9 mb-0">
-                <thead>
-                  <tr>
-                    <th class="align-middle pe-6 text-uppercase text-start" scope="col" style="width:40%;">{{ _("Note") }}</th>
-                    <th class="align-middle text-start text-uppercase white-space-nowrap" scope="col" style="width:40%;">{{ _("Created On")}}</th>
-                    <th class="align-middle text-start text-uppercase white-space-nowrap" scope="col" style="width:40%;">{{ _("Last Updated")}}</th>
-                    <th class="align-middle pe-0 text-end" scope="col" style="width:10%;"> </th>
-                  </tr>
-                </thead>
-                <tbody >
-                  {% for note in notes %}
-                    <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                      <td class="align-middle  text-start fw-bold text-body-tertiary ps-1">{{note.note}}</td>
-                      <td class="align-middle text-body-tertiary text-start white-space-nowrap">{{ note.created|naturalday|capfirst }}</td>
-                      <td class="align-middle text-body-tertiary text-start white-space-nowrap">{{ note.updated|naturalday|capfirst }}</td>
-                      <td class="align-middle text-end white-space-nowrap pe-0 action py-2">
-                        {% if note.created_by == request.user %}
-                          <a id="updateBtn"
-                             href="#"
-                             onclick="updateNote(this)"
-                             class="btn btn-sm btn-phoenix-primary me-2"
-                             data-pk="{{ note.pk }}"
-                             data-note="{{ note.note|escapejs }}"
-                             data-url="{% url 'update_note' request.dealer.slug note.pk %}"
-                             data-bs-toggle="modal"
-                             data-bs-target="#noteModal"
-                             data-note-title="{{ _('Update') }}<i class='fas fa-pen-square text-primary ms-2'></i>">
-                            {{ _("Update") }}
-                          </a>
-                          <button class="btn btn-phoenix-danger btn-sm delete-btn"
-                                  data-url="{% url 'delete_note_to_lead' request.dealer.slug note.pk %}"
-                                  data-message="Are you sure you want to delete this note?"
-                                  data-bs-toggle="modal" data-bs-target="#deleteModal">
-                            <i class="fas fa-trash"></i>
-                          </button>
+        <div class="col-md-7 col-lg-7 col-xl-8">
+            <div class="d-flex w-100 gap-5">
+                <div class="kanban-header bg-success w-50 text-white fw-bold">
+                    <i class="fa-solid fa-circle-check me-2"></i>{{ lead.status|capfirst }}
+                    <br>
+                    &nbsp; <small>{% trans "Current Stage" %}</small>
+                </div>
+                <div class="kanban-header bg-secondary w-50 text-white fw-bold">
+                    <i class="fa-solid fa-circle-info me-2"></i>{{ lead.next_action|capfirst }}
+                    <br>
+                    &nbsp; <small>{% trans "Next Action" %} :</small>&nbsp; <small>{{ lead.next_action_date|naturalday|capfirst }}</small>
+                </div>
+            </div>
+            <ul class="nav main-tab nav-underline fs-9 deal-details scrollbar flex-nowrap w-100 pb-1 mb-6 justify-content-end mt-5"
+                id="myTab"
+                role="tablist"
+                style="overflow-y: hidden">
+                <li class="nav-item text-nowrap me-2" role="presentation">
+                    <a class="nav-link active"
+                       id="tasks-tab"
+                       data-bs-toggle="tab"
+                       href="#tab-tasks"
+                       role="tab"
+                       aria-controls="tab-tasks"
+                       aria-selected="true"> <span class="fa-solid fa-envelope me-2 tab-icon-color fs-8"></span>{{ _("Tasks") }}</a>
+                </li>
+                <li class="nav-item text-nowrap me-2" role="presentation">
+                    <a class="nav-link"
+                       id="notes-tab"
+                       data-bs-toggle="tab"
+                       href="#tab-notes"
+                       role="tab"
+                       aria-controls="tab-notes"
+                       aria-selected="false"
+                       tabindex="-1"> <span class="fa-solid fa-clipboard me-2 tab-icon-color fs-8"></span>{{ _("Notes") }}</a>
+                </li>
+                <li class="nav-item text-nowrap me-2" role="presentation">
+                    <a class="nav-link"
+                       id="emails-tab"
+                       data-bs-toggle="tab"
+                       href="#tab-emails"
+                       role="tab"
+                       aria-controls="tab-emails"
+                       aria-selected="true"> <span class="fa-solid fa-envelope me-2 tab-icon-color fs-8"></span>{{ _("Emails") }}</a>
+                </li>
+                <li class="nav-item text-nowrap me-2" role="presentation">
+                    <a class="nav-link"
+                       id="activity-tab"
+                       data-bs-toggle="tab"
+                       href="#tab-activity"
+                       role="tab"
+                       aria-controls="tab-activity"
+                       aria-selected="false"
+                       tabindex="-1"> <span class="fa-solid fa-chart-line me-2 tab-icon-color fs-8"></span>{{ _("Activity") }}</a>
+                </li>
+                <li class="nav-item text-nowrap me-2" role="presentation">
+                    <a class="nav-link"
+                       id="opportunity-tab"
+                       data-bs-toggle="tab"
+                       href="#tab-opportunity"
+                       role="tab"
+                       aria-controls="tab-opportunity"
+                       aria-selected="false"
+                       tabindex="-1"> <span class="fa-solid fa-chart-line me-2 tab-icon-color fs-8"></span>{{ _("Opportunities") }}</a>
+                </li>
+                {% if perms.inventory.change_lead %}
+                    <li class="nav-item text-nowrap ml-auto" role="presentation">
+                        {% if perms.inventory.can_reassign_lead %}
+                            <button class="btn btn-phoenix-primary btn-sm"
+                                    type="button"
+                                    data-bs-toggle="modal"
+                                    data-bs-target="#exampleModal">
+                                <i class="fa-solid fa-user-plus me-2"></i> Reassign Lead
+                            </button>
                         {% endif %}
-                      </td>
-                    </tr>
-                  {% endfor %}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-        <div class="tab-pane fade" id="tab-emails" role="tabpanel" aria-labelledby="emails-tab">
-          <div class="mb-1 d-flex justify-content-between align-items-center">
-            <h3 class="mb-0" id="scrollspyEmails">{{ _("Emails") }}</h3>
-            {% if perms.inventory.change_lead%}
-            <a href="{% url 'send_lead_email' request.dealer.slug lead.slug %}">
-              <button type="button" class="btn btn-sm btn-phoenix-primary">
-                <span class="fas fa-plus me-1"></span>
-                {% trans 'Send Email' %}
-              </button>
-            </a>
-            {% endif %}
-          </div>
-          <div>
-            <div class="scrollbar">
-              <ul class="nav nav-underline fs-9 flex-nowrap mb-1" id="emailTab" role="tablist">
-                <li class="nav-item me-3"><a class="nav-link text-nowrap border-0 active" id="mail-tab" data-bs-toggle="tab" href="#tab-mail" aria-controls="mail-tab" role="tab" aria-selected="true">Mails ({{emails.sent.count}})<span class="text-body-tertiary fw-normal"></span></a></li>
-                <li class="nav-item me-3"><a class="nav-link text-nowrap border-0" id="drafts-tab" data-bs-toggle="tab" href="#tab-drafts" aria-controls="drafts-tab" role="tab" aria-selected="true">Drafts ({{emails.draft.count}})<span class="text-body-tertiary fw-normal"></span></a></li>
-              </ul>
-            </div>
-            <div class="tab-content" id="profileTabContent">
-              <div class="tab-pane fade show active" id="tab-mail" role="tabpanel" aria-labelledby="mail-tab">
-                <div class="border-top border-bottom border-translucent" id="allEmailsTable" data-list='{"valueNames":["subject","sent","date","source","status"],"page":7,"pagination":true}'>
-                  <div class="table-responsive scrollbar mx-n1 px-1">
-                    <table class="table fs-9 mb-0">
-                      <thead>
-                        <tr>
-                          <th class="white-space-nowrap fs-9 align-middle ps-0" style="width:26px;">
-                            <div class="form-check mb-0 fs-8">
-                              <input class="form-check-input" type="checkbox" data-bulk-select='{"body":"all-email-table-body"}' />
+                        <button class="btn btn-phoenix-primary btn-sm"
+                                onclick="openActionModal('{{ lead.id }}', '{{ lead.action }}', '{{ lead.next_action }}', '{{ lead.next_action_date|date:"Y-m-d\TH:i" }}')">
+                            <i class="fa-solid fa-user-plus me-2"></i>
+                            {% trans "Update Actions" %}
+                        </button>
+                        <div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
+                            <div class="modal-dialog">
+                                <div class="modal-content">
+                                    <form class="modal-content"
+                                          action="{% url 'lead_transfer' request.dealer.slug lead.slug %}"
+                                          method="post">
+                                        {% csrf_token %}
+                                        <div class="modal-header">
+                                            <h5 class="modal-title" id="exampleModalLabel">Reassign Lead To Another Employee</h5>
+                                            <button class="btn btn-close p-1"
+                                                    type="button"
+                                                    data-bs-dismiss="modal"
+                                                    aria-label="Close"></button>
+                                        </div>
+                                        <div class="modal-body">{{ transfer_form|crispy }}</div>
+                                        <div class="modal-footer">
+                                            <button class="btn btn-phoenix-primary" type="submit">Save</button>
+                                            <button class="btn btn-phoenix-secondary"
+                                                    type="button"
+                                                    data-bs-dismiss="modal">Cancel</button>
+                                        </div>
+                                    </form>
+                                </div>
                             </div>
-                          </th>
-                          <th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase" scope="col" data-sort="subject" style="width:31%; min-width:350px">Subject</th>
-                          <th class="sort align-middle pe-3 text-uppercase" scope="col" data-sort="sent" style="width:15%; min-width:130px">Sent by</th>
-                          <th class="sort align-middle text-start text-uppercase" scope="col" data-sort="date" style="min-width:165px">Date</th>
-                          <th class="sort align-middle pe-0 text-uppercase" scope="col" style="width:15%; min-width:100px">Action</th>
-                          <th class="sort align-middle text-end text-uppercase" scope="col" data-sort="status" style="width:15%; min-width:100px">Status</th>
-                        </tr>
-                      </thead>
-                      <tbody class="list" id="all-email-table-body">
-                        {% for email in emails.sent %}
-                          <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                            <td class="fs-9 align-middle px-0 py-3">
-                              <div class="form-check mb-0 fs-8">
-                                <input class="form-check-input" type="checkbox" data-bulk-select-row='{"mail":{"subject":"Quary about purchased soccer socks","email":"jackson@mail.com"},"active":true,"sent":"Jackson Pollock","date":"Dec 29, 2021 10:23 am","source":"Call","type_status":{"label":"sent","type":"badge-phoenix-success"}}' />
-                              </div>
-                            </td>
-                            <td class="subject order align-middle white-space-nowrap py-2 ps-0"><a class="fw-semibold text-primary" href="">{{email.subject}}</a>
-                              <div class="fs-10 d-block">{{email.to_email}}</div>
-                            </td>
-                            <td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">{{email.from_email}}</td>
-                            <td class="date align-middle white-space-nowrap text-body py-2">{{email.created|naturalday}}</td>
-                            <td class="align-middle white-space-nowrap ps-3"><a class="text-body" href=""><span class="fa-solid fa-phone text-primary me-2"></span>Call</a></td>
-                            <td class="status align-middle fw-semibold text-end py-2"><span class="badge badge-phoenix fs-10 badge-phoenix-success">sent</span></td>
-                          </tr>
-                        {% endfor %}
-                      </tbody>
-                    </table>
-                  </div>
-                  <div class="row align-items-center justify-content-between py-2 pe-0 fs-9">
-                    <div class="col-auto d-flex">
-                      <p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body" data-list-info="data-list-info"></p><a class="fw-semibold" href="" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a><a class="fw-semibold d-none" href="" data-list-view="less">View Less<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
-                    </div>
-                    <div class="col-auto d-flex">
-                      <button class="page-link" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
-                      <ul class="mb-0 pagination"></ul>
-                      <button class="page-link pe-0" data-list-pagination="next"><span class="fas fa-chevron-right"></span></button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="tab-pane fade" id="tab-drafts" role="tabpanel" aria-labelledby="drafts-tab">
-                <div class="border-top border-bottom border-translucent" id="draftsEmailsTable" data-list='{"valueNames":["subject","sent","date","source","status"],"page":7,"pagination":true}'>
-                  <div class="table-responsive scrollbar mx-n1 px-1">
-                    <table class="table fs-9 mb-0">
-                      <thead>
-                        <tr>
-                          <th class="white-space-nowrap fs-9 align-middle ps-0" style="width:26px;">
-                            <div class="form-check mb-0 fs-8">
-                              <input class="form-check-input" type="checkbox" data-bulk-select='{"body":"drafts-email-table-body"}' />
-                            </div>
-                          </th>
-                          <th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase" scope="col" data-sort="subject" style="width:31%; min-width:350px">Subject</th>
-                          <th class="sort align-middle pe-3 text-uppercase" scope="col" data-sort="sent" style="width:15%; min-width:130px">Sent by</th>
-                          <th class="sort align-middle text-start text-uppercase" scope="col" data-sort="date" style="min-width:165px">Date</th>
-                          <th class="sort align-middle pe-0 text-uppercase" scope="col" style="width:15%; min-width:100px">Action</th>
-                          <th class="sort align-middle text-end text-uppercase" scope="col" data-sort="status" style="width:15%; min-width:100px">Status</th>
-                        </tr>
-                      </thead>
-                      <tbody class="list" id="drafts-email-table-body">
-                        {% for email in emails.draft %}
-                          <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                            <td class="fs-9 align-middle px-0 py-3">
-                              <div class="form-check mb-0 fs-8">
-                                <input class="form-check-input" type="checkbox" data-bulk-select-row='{"mail":{"subject":"Quary about purchased soccer socks","email":"jackson@mail.com"},"active":true,"sent":"Jackson Pollock","date":"Dec 29, 2021 10:23 am","source":"Call","type_status":{"label":"sent","type":"badge-phoenix-success"}}' />
-                              </div>
-                            </td>
-                            <td class="subject order align-middle white-space-nowrap py-2 ps-0"><a class="fw-semibold text-primary" href="">{{email.subject}}</a>
-                              <div class="fs-10 d-block">{{email.to_email}}</div>
-                            </td>
-                            <td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">{{email.from_email}}</td>
-                            <td class="date align-middle white-space-nowrap text-body py-2">{{email.created}}</td>
-                            <td class="align-middle white-space-nowrap ps-3"><a class="text-body" href="{% url 'send_lead_email_with_template' request.dealer.slug lead.slug email.pk %}"><span class="fa-solid fa-email text-primary me-2"></span>Send</a></td>
-                            <td class="status align-middle fw-semibold text-end py-2"><span class="badge badge-phoenix fs-10 badge-phoenix-warning">draft</span></td>
-                          </tr>
-                        {% endfor %}
-                      </tbody>
-                    </table>
-                  </div>
-                  <div class="row align-items-center justify-content-between py-2 pe-0 fs-9">
-                    <div class="col-auto d-flex">
-                      <p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body" data-list-info="data-list-info"></p><a class="fw-semibold" href="" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a><a class="fw-semibold d-none" href="" data-list-view="less">View Less<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
-                    </div>
-                    <div class="col-auto d-flex">
-                      <button class="page-link" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
-                      <ul class="mb-0 pagination"></ul>
-                      <button class="page-link pe-0" data-list-pagination="next"><span class="fas fa-chevron-right"></span></button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-{% comment %}  {% endcomment %}
-        <div class="tab-pane fade active show" id="tab-tasks" role="tabpanel" aria-labelledby="tasks-tab">
-          <div class="mb-1 d-flex justify-content-between align-items-center">
-            <h3 class="mb-0" id="scrollspyEmails">{{ _("Tasks") }}</h3>
-            {% if perms.inventory.change_lead%}
-            {% comment %} <button class="btn btn-phoenix-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#taskModal"><span class="fas fa-plus me-1"></span>{{ _("Add Task") }}</button> {% endcomment %}
-            <button class="btn btn-phoenix-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#scheduleModal"><span class="fas fa-plus me-1"></span>{{ _("Add Task") }}</button>
-             {% endif %}
-          </div>
-          <div>
-
-            <div class="border-top border-bottom border-translucent" id="allEmailsTable" data-list='{"valueNames":["subject","sent","date","source","status"],"page":7,"pagination":true}'>
-              <div class="table-responsive scrollbar mx-n1 px-1">
-                <table class="table fs-9 mb-0">
-                  <thead>
-                    <tr>
-                      <th class="white-space-nowrap fs-9 align-middle ps-0" style="width:26px;">
-                        <div class="form-check mb-0 fs-8">
-                          <input class="form-check-input" type="checkbox" data-bulk-select='{"body":"all-email-table-body"}' />
                         </div>
-                      </th>
-                      <th class="sort white-space-nowrap align-middle pe-3 ps-0" scope="col" data-sort="subject" style="width:31%; min-width:100px">Name</th>
-                      <th class="sort align-middle pe-3 text" scope="col" data-sort="sent" style="width:15%; min-width:400px">Note</th>
-                      <th class="sort align-middle text-start" scope="col" data-sort="date" style="min-width:100px">Due Date</th>
-                      <th class="sort align-middle text-start" scope="col" data-sort="date" style="min-width:100px">Completed</th>
-                    </tr>
-                  </thead>
-                  <tbody class="list" id="all-tasks-table-body">
-                    {% for task in schedules %}
-                      {% include "partials/task.html" %}
-                    {% endfor %}
-                  </tbody>
-                </table>
-              </div>
-              <div class="row align-items-center justify-content-between py-2 pe-0 fs-9">
-                <div class="col-auto d-flex">
-                  <p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body" data-list-info="data-list-info"></p>
-                    <a class="nav-link px-3 d-block" href="{% url 'appointment:get_user_appointments' %}"> <span class="me-2 text-body align-bottom" data-feather="calendar"></span>{{ _("View in Calendar") }}
-                    <span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
+                    </li>
+                {% endif %}
+            </ul>
+            <div class="tab-content" id="myTabContent">
+                <div class="tab-pane fade"
+                     id="tab-activity"
+                     role="tabpanel"
+                     aria-labelledby="activity-tab">
+                    <div class="mb-1 d-flex justify-content-between align-items-center">
+                        <h3 class="mb-4" id="s  crollspyTask">
+                            {{ _("Activities") }} <span class="fw-light fs-7">({{ activities.count }})</span>
+                        </h3>
+                        {% if perms.inventory.change_lead %}{% endif %}
+                    </div>
+                    <div class="row justify-content-between align-items-md-center hover-actions-trigger btn-reveal-trigger border-translucent py-3 gx-0 border-top">
+                        <div class="col-12 col-lg-auto">
+                            <div class="timeline-basic mb-9">
+                                {% for activity in activities %}
+                                    <div class="timeline-item">
+                                        <div class="row g-3">
+                                            <div class="col-auto">
+                                                <div class="timeline-item-bar position-relative">
+                                                    <div class="icon-item icon-item-md rounded-7 border border-translucent">
+                                                        {% if activity.activity_type == "call" %}
+                                                            <span class="fa-solid fa-phone text-warning fs-8"></span>
+                                                        {% elif activity.activity_type == "note" %}
+                                                            <span class="fa-regular fa-sticky-note text-info-light fs-8"></span>
+                                                        {% elif activity.activity_type == "task" %}
+                                                            <span class="fa-solid fa-list-check text-success fs-8"></span>
+                                                        {% elif activity.activity_type == "email" %}
+                                                            <span class="fa-solid fa-envelope text-info-light fs-8"></span>
+                                                        {% elif activity.activity_type == "visit" %}
+                                                            <span class="fa-solid fa-users text-danger fs-8"></span>
+                                                        {% elif activity.activity_type == "whatsapp" %}
+                                                            <span class="fab fa-whatsapp text-success-dark fs-7"></span>
+                                                        {% endif %}
+                                                    </div>
+                                                    {% if forloop.last %}
+                                                        <span class=""></span>
+                                                    {% else %}
+                                                        <span class="timeline-bar border-end border-dashed"></span>
+                                                    {% endif %}
+                                                </div>
+                                            </div>
+                                            <div class="col">
+                                                <div class="d-flex justify-content-between">
+                                                    <div class="d-flex mb-2">
+                                                        <h6 class="lh-sm mb-0 me-2 text-body-secondary timeline-item-title">{{ activity.activity_type|capfirst }}</h6>
+                                                    </div>
+                                                    <p class="text-body-quaternary fs-9 mb-0 text-nowrap timeline-time">
+                                                        <span class="fa-regular fa-clock me-1"></span>{{ activity.created|naturalday|capfirst }}
+                                                    </p>
+                                                </div>
+                                                <h6 class="fs-10 fw-normal mb-3">
+                                                    {{ _("created by") }} <a class="fw-semibold" href="#!">{{ activity.created_by }}</a>
+                                                </h6>
+                                                <p class="fs-9 text-body-secondary w-sm-60 mb-5">{{ activity.notes }}</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                {% endfor %}
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <div class="col-auto d-flex">
-                  <button class="page-link" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
-                  <ul class="mb-0 pagination"></ul>
-                  <button class="page-link pe-0" data-list-pagination="next"><span class="fas fa-chevron-right"></span></button>
+                <div class="tab-pane fade"
+                     id="tab-opportunity"
+                     role="tabpanel"
+                     aria-labelledby="opportunity-tab">
+                    <div class="mb-1 d-flex justify-content-between align-items-center">
+                        <h3 class="mb-4" id="scrollspyTask">
+                            {{ _("Opportunities") }} <span class="fw-light fs-7">({{ lead.get_opportunities.count }})</span>
+                        </h3>
+                        {% if perms.inventory.add_opportunity %}
+                            <a href="{% url 'lead_opportunity_create' request.dealer.slug lead.slug %}"
+                               class="btn btn-phoenix-primary btn-sm"
+                               type="button"> <i class="fa-solid fa-plus me-2"></i>{{ _("Add Opportunity") }}</a>
+                        {% endif %}
+                    </div>
+                    <div class="border-top border-bottom border-translucent"
+                         id="leadDetailsTable">
+                        <div class="table-responsive scrollbar mx-n1 px-1">
+                            <table class="table fs-9 mb-0">
+                                <thead>
+                                    <tr>
+                                        <th class="align-middle pe-6 text-uppercase text-start"
+                                            scope="col"
+                                            style="width:40%">{{ _("Car") }}</th>
+                                        <th class="align-middle text-start text-uppercase"
+                                            scope="col"
+                                            style="width:20%">{{ _("Probability") }}</th>
+                                        <th class="align-middle text-start text-uppercase white-space-nowrap"
+                                            scope="col"
+                                            style="width:20%">{{ _("Priority") }}</th>
+                                        <th class="align-middle pe-0 text-end" scope="col" style="width:10%;"></th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {% for opportunity in lead.get_opportunities %}
+                                        <tr class="hover-actions-trigger btn-reveal-trigger position-static">
+                                            <td class="align-middle  text-start fw-bold text-body-tertiary ps-1">{{ opportunity.car }}</td>
+                                            <td class="align-middle  text-start fw-bold text-body-tertiary ps-1">{{ opportunity.probability }}</td>
+                                            <td class="align-middle  text-start fw-bold text-body-tertiary ps-1">{{ opportunity.priority|capfirst }}</td>
+                                            <td class="align-middle  text-start fw-bold text-body-tertiary ps-1">
+                                                <a class="btn btn-sm btn-phoenix-primary"
+                                                   href="{% url 'opportunity_detail' request.dealer.slug opportunity.slug %}">View</a>
+                                            </td>
+                                        </tr>
+                                    {% endfor %}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
                 </div>
-              </div>
-            </div>
-          </div>
-
-        </div>
-        {% include 'modal/delete_modal.html' %}
- <!-- add update Modal -->
-        {% comment %} <div class="modal fade" id="noteModal" tabindex="-1" aria-labelledby="noteModalLabel" aria-hidden="true">
+                <div class="tab-pane fade"
+                     id="tab-notes"
+                     role="tabpanel"
+                     aria-labelledby="notes-tab">
+                    <div class="mb-1 d-flex align-items-center justify-content-between">
+                        <h3 class="mb-4" id="scrollspyNotes">{{ _("Notes") }}</h3>
+                        {% if perms.inventory.change_lead %}
+                            <button class="btn btn-phoenix-primary btn-sm"
+                                    type="button"
+                                    onclick="reset_form()"
+                                    data-bs-toggle="modal"
+                                    data-bs-target="#noteModal">
+                                <span class="fas fa-plus me-1"></span>{{ _("Add Note") }}
+                            </button>
+                        {% endif %}
+                    </div>
+                    <div class="border-top border-bottom border-translucent"
+                         id="leadDetailsTable">
+                        <div class="table-responsive scrollbar mx-n1 px-1">
+                            <table class="table fs-9 mb-0">
+                                <thead>
+                                    <tr>
+                                        <th class="align-middle pe-6 text-uppercase text-start"
+                                            scope="col"
+                                            style="width:40%">{{ _("Note") }}</th>
+                                        <th class="align-middle text-start text-uppercase white-space-nowrap"
+                                            scope="col"
+                                            style="width:40%">{{ _("Created On") }}</th>
+                                        <th class="align-middle text-start text-uppercase white-space-nowrap"
+                                            scope="col"
+                                            style="width:40%">{{ _("Last Updated") }}</th>
+                                        <th class="align-middle pe-0 text-end" scope="col" style="width:10%;"></th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {% for note in notes %}
+                                        <tr class="hover-actions-trigger btn-reveal-trigger position-static">
+                                            <td class="align-middle  text-start fw-bold text-body-tertiary ps-1">{{ note.note }}</td>
+                                            <td class="align-middle text-body-tertiary text-start white-space-nowrap">{{ note.created|naturalday|capfirst }}</td>
+                                            <td class="align-middle text-body-tertiary text-start white-space-nowrap">{{ note.updated|naturalday|capfirst }}</td>
+                                            <td class="align-middle text-end white-space-nowrap pe-0 action py-2">
+                                                {% if note.created_by == request.user %}
+                                                    <a id="updateBtn"
+                                                       href="#"
+                                                       onclick="updateNote(this)"
+                                                       class="btn btn-sm btn-phoenix-primary me-2"
+                                                       data-pk="{{ note.pk }}"
+                                                       data-note="{{ note.note|escapejs }}"
+                                                       data-url="{% url 'update_note' request.dealer.slug note.pk %}"
+                                                       data-bs-toggle="modal"
+                                                       data-bs-target="#noteModal"
+                                                       data-note-title="{{ _("Update") }}<i class='fas fa-pen-square text-primary ms-2'></i>">
+                                                        {{ _("Update") }}
+                                                    </a>
+                                                    <button class="btn btn-phoenix-danger btn-sm delete-btn"
+                                                            data-url="{% url 'delete_note_to_lead' request.dealer.slug note.pk %}"
+                                                            data-message="Are you sure you want to delete this note?"
+                                                            data-bs-toggle="modal"
+                                                            data-bs-target="#deleteModal">
+                                                        <i class="fas fa-trash"></i>
+                                                    </button>
+                                                {% endif %}
+                                            </td>
+                                        </tr>
+                                    {% endfor %}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+                <div class="tab-pane fade"
+                     id="tab-emails"
+                     role="tabpanel"
+                     aria-labelledby="emails-tab">
+                    <div class="mb-1 d-flex justify-content-between align-items-center">
+                        <h3 class="mb-0" id="scrollspyEmails">{{ _("Emails") }}</h3>
+                        {% if perms.inventory.change_lead %}
+                            <a href="{% url 'send_lead_email' request.dealer.slug lead.slug %}">
+                                <button type="button" class="btn btn-sm btn-phoenix-primary">
+                                    <span class="fas fa-plus me-1"></span>
+                                    {% trans 'Send Email' %}
+                                </button>
+                            </a>
+                        {% endif %}
+                    </div>
+                    <div>
+                        <div class="scrollbar">
+                            <ul class="nav nav-underline fs-9 flex-nowrap mb-1"
+                                id="emailTab"
+                                role="tablist">
+                                <li class="nav-item me-3">
+                                    <a class="nav-link text-nowrap border-0 active"
+                                       id="mail-tab"
+                                       data-bs-toggle="tab"
+                                       href="#tab-mail"
+                                       aria-controls="mail-tab"
+                                       role="tab"
+                                       aria-selected="true">Mails ({{ emails.sent.count }})<span class="text-body-tertiary fw-normal"></span></a>
+                                </li>
+                                <li class="nav-item me-3">
+                                    <a class="nav-link text-nowrap border-0"
+                                       id="drafts-tab"
+                                       data-bs-toggle="tab"
+                                       href="#tab-drafts"
+                                       aria-controls="drafts-tab"
+                                       role="tab"
+                                       aria-selected="true">Drafts ({{ emails.draft.count }})<span class="text-body-tertiary fw-normal"></span></a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="tab-content" id="profileTabContent">
+                            <div class="tab-pane fade show active"
+                                 id="tab-mail"
+                                 role="tabpanel"
+                                 aria-labelledby="mail-tab">
+                                <div class="border-top border-bottom border-translucent"
+                                     id="allEmailsTable"
+                                     data-list='{"valueNames":["subject","sent","date","source","status"],"page":7,"pagination":true}'>
+                                    <div class="table-responsive scrollbar mx-n1 px-1">
+                                        <table class="table fs-9 mb-0">
+                                            <thead>
+                                                <tr>
+                                                    <th class="white-space-nowrap fs-9 align-middle ps-0" style="width:26px;">
+                                                        <div class="form-check mb-0 fs-8">
+                                                            <input class="form-check-input"
+                                                                   type="checkbox"
+                                                                   data-bulk-select='{"body":"all-email-table-body"}' />
+                                                        </div>
+                                                    </th>
+                                                    <th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase"
+                                                        scope="col"
+                                                        data-sort="subject"
+                                                        style="width:31%;
+                                                               min-width:350px">Subject</th>
+                                                    <th class="sort align-middle pe-3 text-uppercase"
+                                                        scope="col"
+                                                        data-sort="sent"
+                                                        style="width:15%;
+                                                               min-width:130px">Sent by</th>
+                                                    <th class="sort align-middle text-start text-uppercase"
+                                                        scope="col"
+                                                        data-sort="date"
+                                                        style="min-width:165px">Date</th>
+                                                    <th class="sort align-middle pe-0 text-uppercase"
+                                                        scope="col"
+                                                        style="width:15%;
+                                                               min-width:100px">Action</th>
+                                                    <th class="sort align-middle text-end text-uppercase"
+                                                        scope="col"
+                                                        data-sort="status"
+                                                        style="width:15%;
+                                                               min-width:100px">Status</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody class="list" id="all-email-table-body">
+                                                {% for email in emails.sent %}
+                                                    <tr class="hover-actions-trigger btn-reveal-trigger position-static">
+                                                        <td class="fs-9 align-middle px-0 py-3">
+                                                            <div class="form-check mb-0 fs-8">
+                                                                <input class="form-check-input"
+                                                                       type="checkbox"
+                                                                       data-bulk-select-row='{"mail":{"subject":"Quary about purchased soccer socks","email":"jackson@mail.com"},"active":true,"sent":"Jackson Pollock","date":"Dec 29, 2021 10:23 am","source":"Call","type_status":{"label":"sent","type":"badge-phoenix-success"}}' />
+                                                            </div>
+                                                        </td>
+                                                        <td class="subject order align-middle white-space-nowrap py-2 ps-0">
+                                                            <a class="fw-semibold text-primary" href="">{{ email.subject }}</a>
+                                                            <div class="fs-10 d-block">{{ email.to_email }}</div>
+                                                        </td>
+                                                        <td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">{{ email.from_email }}</td>
+                                                        <td class="date align-middle white-space-nowrap text-body py-2">{{ email.created|naturalday }}</td>
+                                                        <td class="align-middle white-space-nowrap ps-3">
+                                                            <a class="text-body" href=""><span class="fa-solid fa-phone text-primary me-2"></span>Call</a>
+                                                        </td>
+                                                        <td class="status align-middle fw-semibold text-end py-2">
+                                                            <span class="badge badge-phoenix fs-10 badge-phoenix-success">sent</span>
+                                                        </td>
+                                                    </tr>
+                                                {% endfor %}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                    <div class="row align-items-center justify-content-between py-2 pe-0 fs-9">
+                                        <div class="col-auto d-flex">
+                                            <p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body"
+                                               data-list-info="data-list-info"></p>
+                                            <a class="fw-semibold" href="" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a><a class="fw-semibold d-none" href="" data-list-view="less">View Less<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
+                                        </div>
+                                        <div class="col-auto d-flex">
+                                            <button class="page-link" data-list-pagination="prev">
+                                                <span class="fas fa-chevron-left"></span>
+                                            </button>
+                                            <ul class="mb-0 pagination">
+                                            </ul>
+                                            <button class="page-link pe-0" data-list-pagination="next">
+                                                <span class="fas fa-chevron-right"></span>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="tab-pane fade"
+                                 id="tab-drafts"
+                                 role="tabpanel"
+                                 aria-labelledby="drafts-tab">
+                                <div class="border-top border-bottom border-translucent"
+                                     id="draftsEmailsTable"
+                                     data-list='{"valueNames":["subject","sent","date","source","status"],"page":7,"pagination":true}'>
+                                    <div class="table-responsive scrollbar mx-n1 px-1">
+                                        <table class="table fs-9 mb-0">
+                                            <thead>
+                                                <tr>
+                                                    <th class="white-space-nowrap fs-9 align-middle ps-0" style="width:26px;">
+                                                        <div class="form-check mb-0 fs-8">
+                                                            <input class="form-check-input"
+                                                                   type="checkbox"
+                                                                   data-bulk-select='{"body":"drafts-email-table-body"}' />
+                                                        </div>
+                                                    </th>
+                                                    <th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase"
+                                                        scope="col"
+                                                        data-sort="subject"
+                                                        style="width:31%;
+                                                               min-width:350px">Subject</th>
+                                                    <th class="sort align-middle pe-3 text-uppercase"
+                                                        scope="col"
+                                                        data-sort="sent"
+                                                        style="width:15%;
+                                                               min-width:130px">Sent by</th>
+                                                    <th class="sort align-middle text-start text-uppercase"
+                                                        scope="col"
+                                                        data-sort="date"
+                                                        style="min-width:165px">Date</th>
+                                                    <th class="sort align-middle pe-0 text-uppercase"
+                                                        scope="col"
+                                                        style="width:15%;
+                                                               min-width:100px">Action</th>
+                                                    <th class="sort align-middle text-end text-uppercase"
+                                                        scope="col"
+                                                        data-sort="status"
+                                                        style="width:15%;
+                                                               min-width:100px">Status</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody class="list" id="drafts-email-table-body">
+                                                {% for email in emails.draft %}
+                                                    <tr class="hover-actions-trigger btn-reveal-trigger position-static">
+                                                        <td class="fs-9 align-middle px-0 py-3">
+                                                            <div class="form-check mb-0 fs-8">
+                                                                <input class="form-check-input"
+                                                                       type="checkbox"
+                                                                       data-bulk-select-row='{"mail":{"subject":"Quary about purchased soccer socks","email":"jackson@mail.com"},"active":true,"sent":"Jackson Pollock","date":"Dec 29, 2021 10:23 am","source":"Call","type_status":{"label":"sent","type":"badge-phoenix-success"}}' />
+                                                            </div>
+                                                        </td>
+                                                        <td class="subject order align-middle white-space-nowrap py-2 ps-0">
+                                                            <a class="fw-semibold text-primary" href="">{{ email.subject }}</a>
+                                                            <div class="fs-10 d-block">{{ email.to_email }}</div>
+                                                        </td>
+                                                        <td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">{{ email.from_email }}</td>
+                                                        <td class="date align-middle white-space-nowrap text-body py-2">{{ email.created }}</td>
+                                                        <td class="align-middle white-space-nowrap ps-3">
+                                                            <a class="text-body"
+                                                               href="{% url 'send_lead_email_with_template' request.dealer.slug lead.slug email.pk %}"><span class="fa-solid fa-email text-primary me-2"></span>Send</a>
+                                                        </td>
+                                                        <td class="status align-middle fw-semibold text-end py-2">
+                                                            <span class="badge badge-phoenix fs-10 badge-phoenix-warning">draft</span>
+                                                        </td>
+                                                    </tr>
+                                                {% endfor %}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                    <div class="row align-items-center justify-content-between py-2 pe-0 fs-9">
+                                        <div class="col-auto d-flex">
+                                            <p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body"
+                                               data-list-info="data-list-info"></p>
+                                            <a class="fw-semibold" href="" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a><a class="fw-semibold d-none" href="" data-list-view="less">View Less<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
+                                        </div>
+                                        <div class="col-auto d-flex">
+                                            <button class="page-link" data-list-pagination="prev">
+                                                <span class="fas fa-chevron-left"></span>
+                                            </button>
+                                            <ul class="mb-0 pagination">
+                                            </ul>
+                                            <button class="page-link pe-0" data-list-pagination="next">
+                                                <span class="fas fa-chevron-right"></span>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {% comment %}  {% endcomment %}
+                <div class="tab-pane fade active show"
+                     id="tab-tasks"
+                     role="tabpanel"
+                     aria-labelledby="tasks-tab">
+                    <div class="mb-1 d-flex justify-content-between align-items-center">
+                        <h3 class="mb-0" id="scrollspyEmails">{{ _("Tasks") }}</h3>
+                        {% if perms.inventory.change_lead %}
+                            {% comment %} <button class="btn btn-phoenix-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#taskModal"><span class="fas fa-plus me-1"></span>{{ _("Add Task") }}</button> {% endcomment %}
+                            <button class="btn btn-phoenix-primary btn-sm"
+                                    type="button"
+                                    data-bs-toggle="modal"
+                                    data-bs-target="#scheduleModal">
+                                <span class="fas fa-plus me-1"></span>{{ _("Add Task") }}
+                            </button>
+                        {% endif %}
+                    </div>
+                    <div>
+                        <div class="border-top border-bottom border-translucent"
+                             id="allEmailsTable"
+                             data-list='{"valueNames":["subject","sent","date","source","status"],"page":7,"pagination":true}'>
+                            <div class="table-responsive scrollbar mx-n1 px-1">
+                                <table class="table fs-9 mb-0">
+                                    <thead>
+                                        <tr>
+                                            <th class="white-space-nowrap fs-9 align-middle ps-0" style="width:26px;">
+                                                <div class="form-check mb-0 fs-8">
+                                                    <input class="form-check-input"
+                                                           type="checkbox"
+                                                           data-bulk-select='{"body":"all-email-table-body"}' />
+                                                </div>
+                                            </th>
+                                            <th class="sort white-space-nowrap align-middle pe-3 ps-0"
+                                                scope="col"
+                                                data-sort="subject"
+                                                style="width:31%;
+                                                       min-width:100px">Name</th>
+                                            <th class="sort align-middle pe-3 text"
+                                                scope="col"
+                                                data-sort="sent"
+                                                style="width:15%;
+                                                       min-width:400px">Note</th>
+                                            <th class="sort align-middle text-start"
+                                                scope="col"
+                                                data-sort="date"
+                                                style="min-width:100px">Due Date</th>
+                                            <th class="sort align-middle text-start"
+                                                scope="col"
+                                                data-sort="date"
+                                                style="min-width:100px">Completed</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="list" id="all-tasks-table-body">
+                                        {% for task in schedules %}
+                                            {% include "partials/task.html" %}
+                                        {% endfor %}
+                                    </tbody>
+                                </table>
+                            </div>
+                            <div class="row align-items-center justify-content-between py-2 pe-0 fs-9">
+                                <div class="col-auto d-flex">
+                                    <p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body"
+                                       data-list-info="data-list-info"></p>
+                                    <a class="nav-link px-3 d-block"
+                                       href="{% url 'appointment:get_user_appointments' %}"> <span class="me-2 text-body align-bottom" data-feather="calendar"></span>{{ _("View in Calendar") }}
+                                        <span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
+                                </div>
+                                <div class="col-auto d-flex">
+                                    <button class="page-link" data-list-pagination="prev">
+                                        <span class="fas fa-chevron-left"></span>
+                                    </button>
+                                    <ul class="mb-0 pagination">
+                                    </ul>
+                                    <button class="page-link pe-0" data-list-pagination="next">
+                                        <span class="fas fa-chevron-right"></span>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {% include 'modal/delete_modal.html' %}
+                <!-- add update Modal -->
+                {% comment %} <div class="modal fade" id="noteModal" tabindex="-1" aria-labelledby="noteModalLabel" aria-hidden="true">
           <div class="modal-dialog modal-md">
             <div class="modal-content">
               <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
@@ -554,18 +805,16 @@
               </div>
             </div>
           </div>
-        </div> {% endcomment %}
-
-<!-- task Modal -->
-        {% include "components/task_modal.html" with content_type="lead" slug=lead.slug %}
-<!-- note Modal -->
-        {% include "components/note_modal.html" with content_type="lead" slug=lead.slug %}
-<!-- schedule Modal -->
-        {% include "components/schedule_modal.html" with content_type="lead" slug=lead.slug %}
-{% endblock content %}
-
-{% block customJS %}
-  <script>
+                </div> {% endcomment %}
+                <!-- task Modal -->
+                {% include "components/task_modal.html" with content_type="lead" slug=lead.slug %}
+                <!-- note Modal -->
+                {% include "components/note_modal.html" with content_type="lead" slug=lead.slug %}
+                <!-- schedule Modal -->
+                {% include "components/schedule_modal.html" with content_type="lead" slug=lead.slug %}
+            {% endblock content %}
+            {% block customJS %}
+                <script>
     function reset_form() {
       document.querySelector('#id_note').value = ""
       let form = document.querySelector('.add_note_form')
@@ -693,5 +942,5 @@
       });
     }
 
-  </script>
-{% endblock customJS %}
+                </script>
+            {% endblock customJS %}
diff --git a/templates/crm/leads/lead_form.html b/templates/crm/leads/lead_form.html
index 2ba44001..a240faa2 100644
--- a/templates/crm/leads/lead_form.html
+++ b/templates/crm/leads/lead_form.html
@@ -1,6 +1,5 @@
 {% extends 'base.html' %}
 {% load i18n static crispy_forms_filters %}
-
 {% block title %}
     {% if object %}
         {% trans 'Update Lead' %}
@@ -8,7 +7,6 @@
         {% trans 'Add New Lead' %}
     {% endif %}
 {% endblock %}
-
 {% block customcss %}
     <style>
         .htmx-indicator{
@@ -30,7 +28,6 @@
         }
     </style>
 {% endblock customcss %}
-
 {% block content %}
     <div class="row justify-content-center mt-5 mb-3">
         <div class="col-lg-8 col-md-10">
@@ -38,25 +35,21 @@
                 <div class="card-header  bg-gray-200  py-3 border-0 rounded-top-3">
                     <h3 class="mb-0 fs-4 text-center">
                         {% if object %}
-                            {{ _("Update Lead") }} 
+                            {{ _("Update Lead") }}
                         {% else %}
                             {{ _("Create New Lead") }}
                         {% endif %}
                         <li class="fas fa-bullhorn text-primary ms-2"></li>
                     </h3>
-                   
                 </div>
                 <div class="card-body bg-light-subtle">
                     <form class="form" method="post">
                         {% csrf_token %}
-                        {{ form|crispy }} 
-
-                        <hr class="my-2"> 
-
+                        {{ form|crispy }}
+                        <hr class="my-2">
                         <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-3">
-                         
                             <button class="btn btn-phoenix-success btn-lg me-md-2" type="submit">
-                                <i class="fa-solid fa-floppy-disk me-1"></i> 
+                                <i class="fa-solid fa-floppy-disk me-1"></i>
                                 {{ _("Save") }}
                             </button>
                             <a href="{% url 'lead_list' request.dealer.slug %}" class="btn btn-phoenix-danger btn-lg">
@@ -66,11 +59,9 @@
                         </div>
                     </form>
                 </div>
-               
             </div>
         </div>
     </div>
-
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const spinner = document.createElement('div');
@@ -84,4 +75,4 @@
             }
         });
     </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/crm/leads/lead_list.html b/templates/crm/leads/lead_list.html
index 9ebdc955..6aeda3a5 100644
--- a/templates/crm/leads/lead_list.html
+++ b/templates/crm/leads/lead_list.html
@@ -1,27 +1,29 @@
 {% extends 'base.html' %}
 {% load i18n static humanize %}
-{% block title %}{{ _('Leads')|capfirst }}{% endblock title %}
-
+{% block title %}
+    {{ _("Leads") |capfirst }}
+{% endblock title %}
 {% block content %}
     <div class="row g-3 mt-4 mb-4">
-        <h2 class="mb-2">{{ _("Leads")|capfirst }}<li class="fas fa-bullhorn text-primary ms-2"></li></h2>
-     <!-- Action Tracking Modal -->
+        <h2 class="mb-2">
+            {{ _("Leads") |capfirst }}
+            <li class="fas fa-bullhorn text-primary ms-2"></li>
+        </h2>
+        <!-- Action Tracking Modal -->
         {% include "crm/leads/partials/update_action.html" %}
-
         <div class="row g-3 justify-content-between mb-4">
             <div class="col-auto">
                 <div class="d-md-flex justify-content-between">
                     {% if perms.inventory.add_lead %}
                         <div>
-                            <a href="{% url 'lead_create' request.dealer.slug %}" class="btn btn-sm btn-phoenix-primary"><span class="fas fa-plus me-2"></span>{{ _("Add Lead") }}</a>
+                            <a href="{% url 'lead_create' request.dealer.slug %}"
+                               class="btn btn-sm btn-phoenix-primary"><span class="fas fa-plus me-2"></span>{{ _("Add Lead") }}</a>
                         </div>
                     {% endif %}
                 </div>
             </div>
             <div class="col-auto">
-                <div class="d-flex">
-                    {% include 'partials/search_box.html' %}
-                </div>
+                <div class="d-flex">{% include 'partials/search_box.html' %}</div>
             </div>
         </div>
         <div class="row g-3">
@@ -31,76 +33,111 @@
                         <table class="table align-items-center table-flush table-hover">
                             <thead>
                                 <tr class="bg-body-highlight">
-                                    <th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 20%;">{{ _("Lead Name")|capfirst }}</th>
-                                    <th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 15%;">
+                                    <th class="align-middle white-space-nowrap text-uppercase"
+                                        scope="col"
+                                        style="width: 20%">{{ _("Lead Name") |capfirst }}</th>
+                                    <th class="align-middle white-space-nowrap text-uppercase"
+                                        scope="col"
+                                        style="width: 15%">
                                         <div class="d-inline-flex flex-center">
-                                            <div class="d-flex align-items-center px-1 py-1 bg-success-subtle rounded me-2"><i class="text-success-dark fas fa-car"></i></div>
-                                            <span>{{ _("Car")|capfirst }}</span>
+                                            <div class="d-flex align-items-center px-1 py-1 bg-success-subtle rounded me-2">
+                                                <i class="text-success-dark fas fa-car"></i>
+                                            </div>
+                                            <span>{{ _("Car") |capfirst }}</span>
                                         </div>
                                     </th>
-                                    <th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 15%;">
+                                    <th class="align-middle white-space-nowrap text-uppercase"
+                                        scope="col"
+                                        style="width: 15%">
                                         <div class="d-inline-flex flex-center">
-                                            <div class="d-flex align-items-center px-1 py-1 bg-success-subtle rounded me-2"><span class="text-success-dark" data-feather="mail"></span></div>
-                                            <span>{{ _("email")|capfirst }}</span>
+                                            <div class="d-flex align-items-center px-1 py-1 bg-success-subtle rounded me-2">
+                                                <span class="text-success-dark" data-feather="mail"></span>
+                                            </div>
+                                            <span>{{ _("email") |capfirst }}</span>
                                         </div>
                                     </th>
-                                    <th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 15%;">
+                                    <th class="align-middle white-space-nowrap text-uppercase"
+                                        scope="col"
+                                        style="width: 15%">
                                         <div class="d-inline-flex flex-center">
-                                            <div class="d-flex align-items-center px-1 py-1 bg-primary-subtle rounded me-2"><span class="text-primary-dark" data-feather="phone"></span></div>
+                                            <div class="d-flex align-items-center px-1 py-1 bg-primary-subtle rounded me-2">
+                                                <span class="text-primary-dark" data-feather="phone"></span>
+                                            </div>
                                             <div class="" dir="ltr">{{ _("Phone Number") }}</div>
                                         </div>
                                     </th>
-
-                                    <th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 10%;">
+                                    <th class="align-middle white-space-nowrap text-uppercase"
+                                        scope="col"
+                                        style="width: 10%">
                                         <div class="d-inline-flex flex-center">
-                                            <div class="d-flex align-items-center bg-warning-subtle rounded me-2"><span class="text-warning-dark" data-feather="zap"></span></div>
-                                            <span>{{ _("Next Action")|capfirst }}</span>
+                                            <div class="d-flex align-items-center bg-warning-subtle rounded me-2">
+                                                <span class="text-warning-dark" data-feather="zap"></span>
+                                            </div>
+                                            <span>{{ _("Next Action") |capfirst }}</span>
                                         </div>
                                     </th>
-                                    <th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 15%;">
+                                    <th class="align-middle white-space-nowrap text-uppercase"
+                                        scope="col"
+                                        style="width: 15%">
                                         <div class="d-inline-flex flex-center">
-                                            <div class="d-flex align-items-center px-1 py-1 bg-primary-subtle rounded me-2"><span class="far fa-calendar-alt" ></span></div>
+                                            <div class="d-flex align-items-center px-1 py-1 bg-primary-subtle rounded me-2">
+                                                <span class="far fa-calendar-alt"></span>
+                                            </div>
                                             <span>{{ _("Scheduled at") }}</span>
                                         </div>
                                     </th>
-
-                                    <th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 10%;">
+                                    <th class="align-middle white-space-nowrap text-uppercase"
+                                        scope="col"
+                                        style="width: 10%">
                                         <div class="d-inline-flex flex-center">
-                                            <div class="d-flex align-items-center bg-success-subtle rounded me-2"><span class="text-success-dark" data-feather="user-check"></span></div>
-                                            <span>{{ _("Assigned To")|capfirst }}</span>
+                                            <div class="d-flex align-items-center bg-success-subtle rounded me-2">
+                                                <span class="text-success-dark" data-feather="user-check"></span>
+                                            </div>
+                                            <span>{{ _("Assigned To") |capfirst }}</span>
                                         </div>
                                     </th>
-
                                     {% comment %} <th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 10%;">
                                         <div class="d-inline-flex flex-center">
                                             <div class="d-flex align-items-center bg-warning-subtle rounded me-2"><span class="text-warning-dark" data-feather="grid"></span></div>
                                             <span>{{ _("Opportunity")|capfirst }}</span>
                                         </div>
                                     </th> {% endcomment %}
-                                    <th class="align-middle white-space-nowrap text-uppercase" scope="col" style="width: 15%;">
-                                        {{ _("Action") }}
-                                    </th>
-
+                                    <th class="align-middle white-space-nowrap text-uppercase"
+                                        scope="col"
+                                        style="width: 15%">{{ _("Action") }}</th>
                                     <th class="text-end white-space-nowrap align-middle" scope="col"></th>
                                 </tr>
                                 {% for lead in leads %}
-                        <!-- Delete Modal -->
-                                    <div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
+                                    <!-- Delete Modal -->
+                                    <div class="modal fade"
+                                         id="deleteModal"
+                                         data-bs-backdrop="static"
+                                         data-bs-keyboard="false"
+                                         tabindex="-1"
+                                         aria-labelledby="deleteModalLabel"
+                                         aria-hidden="true">
                                         <div class="modal-dialog modal-sm">
                                             <div class="modal-content">
                                                 <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
-                                                    <h4 class="mb-0 me-2 text-danger">{{ _("Delete")}}<i class="fas fa-exclamation-circle text-danger ms-2"></i></h4>
-                                                    <button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close"><span class="fas fa-times"></span></button>
+                                                    <h4 class="mb-0 me-2 text-danger">
+                                                        {{ _("Delete") }}<i class="fas fa-exclamation-circle text-danger ms-2"></i>
+                                                    </h4>
+                                                    <button class="btn p-0 text-body-quaternary fs-6"
+                                                            data-bs-dismiss="modal"
+                                                            aria-label="Close">
+                                                        <span class="fas fa-times"></span>
+                                                    </button>
                                                 </div>
                                                 <div class="modal-body p-4">
                                                     <p>{% trans "Are you sure you want to delete this lead?" %}</p>
                                                 </div>
                                                 <div class="modal-footer flex justify-content-center border-top-0">
-                                                    <a type="button" class="btn btn-sm btn-phoenix-danger w-100" href="{% url 'lead_delete' request.dealer.slug lead.slug %}">
+                                                    <a type="button"
+                                                       class="btn btn-sm btn-phoenix-danger w-100"
+                                                       href="{% url 'lead_delete' request.dealer.slug lead.slug %}">
                                                         {% trans "Yes" %}
                                                     </a>
                                                 </div>
-
                                             </div>
                                         </div>
                                     </div>
@@ -108,37 +145,49 @@
                                         <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                                             <td class="name align-middle white-space-nowrap ps-1">
                                                 <div class="d-flex align-items-center">
-                                                    <div><a class="fs-8 fw-bold" href="{% url 'lead_detail' request.dealer.slug lead.slug %}">{{lead.full_name|capfirst}}</a>
+                                                    <div>
+                                                        <a class="fs-8 fw-bold"
+                                                           href="{% url 'lead_detail' request.dealer.slug lead.slug %}">{{ lead.full_name|capfirst }}</a>
                                                         <div class="d-flex align-items-center">
                                                             <p class="mb-0 text-body-highlight fw-semibold fs-9 me-2"></p>
                                                             {% if lead.status == "new" %}
-                                                                <span class="badge badge-phoenix badge-phoenix-primary"><span class="badge-label">{{_("New")}}</span><span class="fa fa-bell ms-1"></span></span>
+                                                                <span class="badge badge-phoenix badge-phoenix-primary"><span class="badge-label">{{ _("New") }}</span><span class="fa fa-bell ms-1"></span></span>
                                                             {% elif lead.status == "pending" %}
-                                                                <span class="badge badge-phoenix badge-phoenix-warning"><span class="badge-label">{{_("Pending")}}</span><span class="fa fa-clock-o ms-1"></span></span>
+                                                                <span class="badge badge-phoenix badge-phoenix-warning"><span class="badge-label">{{ _("Pending") }}</span><span class="fa fa-clock-o ms-1"></span></span>
                                                             {% elif lead.status == "in_progress" %}
-                                                                <span class="badge badge-phoenix badge-phoenix-info"><span class="badge-label">{{_("In Progress")}}</span><span class="fa fa-wrench ms-1"></span></span>
+                                                                <span class="badge badge-phoenix badge-phoenix-info"><span class="badge-label">{{ _("In Progress") }}</span><span class="fa fa-wrench ms-1"></span></span>
                                                             {% elif lead.status == "qualified" %}
-                                                                <span class="badge badge-phoenix badge-phoenix-success"><span class="badge-label">{{_("Qualified")}}</span><span class="fa fa-check ms-1"></span></span>
+                                                                <span class="badge badge-phoenix badge-phoenix-success"><span class="badge-label">{{ _("Qualified") }}</span><span class="fa fa-check ms-1"></span></span>
                                                             {% elif lead.status == "contacted" %}
-                                                                <span class="badge badge-phoenix badge-phoenix-info"><span class="badge-label">{{_("Contacted")}}</span><span class="fa fa-times ms-1"></span></span>
+                                                                <span class="badge badge-phoenix badge-phoenix-info"><span class="badge-label">{{ _("Contacted") }}</span><span class="fa fa-times ms-1"></span></span>
                                                             {% elif lead.status == "canceled" %}
-                                                                <span class="badge badge-phoenix badge-phoenix-danger"><span class="badge-label">{{_("Canceled")}}</span><span class="fa fa-times ms-1"></span></span>
+                                                                <span class="badge badge-phoenix badge-phoenix-danger"><span class="badge-label">{{ _("Canceled") }}</span><span class="fa fa-times ms-1"></span></span>
                                                             {% endif %}
                                                         </div>
                                                     </div>
                                                 </div>
                                             </td>
-
-                                            <td class="align-middle white-space-nowrap fw-semibold"><a class="text-body-highlight" href="">{{ lead.id_car_make.get_local_name }} - {{ lead.id_car_model.get_local_name }} {{ lead.year }}</a></td>
-                                            <td class="align-middle white-space-nowrap fw-semibold"><a class="text-body-highlight" href="">{{ lead.email }}</a></td>
-                                            <td class="align-middle white-space-nowrap fw-semibold"><a class="text-body-highlight" href="tel:{{ lead.phone_number }}">{{ lead.phone_number }}</a></td>
-                                            <td class="align-middle white-space-nowrap text-body-tertiary text-opacity-85 fw-semibold text-body-highlight">{{ lead.next_action|upper }}</td>
+                                            <td class="align-middle white-space-nowrap fw-semibold">
+                                                <a class="text-body-highlight" href="">{{ lead.id_car_make.get_local_name }} - {{ lead.id_car_model.get_local_name }} {{ lead.year }}</a>
+                                            </td>
+                                            <td class="align-middle white-space-nowrap fw-semibold">
+                                                <a class="text-body-highlight" href="">{{ lead.email }}</a>
+                                            </td>
+                                            <td class="align-middle white-space-nowrap fw-semibold">
+                                                <a class="text-body-highlight" href="tel:{{ lead.phone_number }}">{{ lead.phone_number }}</a>
+                                            </td>
+                                            <td class="align-middle white-space-nowrap text-body-tertiary text-opacity-85 fw-semibold text-body-highlight">
+                                                {{ lead.next_action|upper }}
+                                            </td>
                                             <td class="align-middle white-space-nowrap fw-semibold">{{ lead.next_action_date|upper }}</td>
                                             <td class="align-middle white-space-nowrap text-body-tertiary text-opacity-85 fw-semibold text-body-highlight">
                                                 <div class="d-flex align-items-center">
                                                     <div class="avatar avatar-tiny me-2">
                                                         {% if lead.staff.logo %}
-                                                            <img class="avatar-img rounded-circle" src="{{ lead.staff.thumbnail.url }}" onerror="this.src='/static/img/brand/brand-logo.png'" alt="Logo">
+                                                            <img class="avatar-img rounded-circle"
+                                                                 src="{{ lead.staff.thumbnail.url }}"
+                                                                 onerror="this.src='/static/img/brand/brand-logo.png'"
+                                                                 alt="Logo">
                                                         {% endif %}
                                                     </div>
                                                     <small>
@@ -152,7 +201,7 @@
                                                     </small>
                                                 </div>
                                             </td>
-                            {% comment %} <td class="align-middle white-space-nowrap text-body-tertiary text-opacity-85 fw-semibold text-body-highlight">
+                                            {% comment %} <td class="align-middle white-space-nowrap text-body-tertiary text-opacity-85 fw-semibold text-body-highlight">
                             {% if lead.opportunity.stage == "prospect" %}
                                 <span class="badge text-bg-primary">{{ lead.opportunity.stage|upper }}</span>
                             {% elif lead.opportunity.stage == "proposal" %}
@@ -164,7 +213,7 @@
                             {% elif lead.opportunity.stage == "closed_lost" %}
                                 <span class="badge text-bg-danger">{{ lead.opportunity.stage|upper }}</span>
                             {% endif %}
-                            </td> {% endcomment %}
+                                            </td> {% endcomment %}
                                             {% comment %} <td class="align-middle white-space-nowrap text-body-tertiary text-opacity-85 fw-semibold text-body-highlight">
                                                 {% if lead.opportunity %}
                                                     <a href="{% url 'opportunity_detail' request.dealer.slug lead.opportunity.slug %}">
@@ -175,67 +224,65 @@
                                             <td class="align-middle white-space-nowrap text-end">
                                                 {% if user == lead.staff.user or request.is_dealer %}
                                                     <div class="btn-reveal-trigger position-static">
-                                                        <button
-                                                            class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
-                                                            type="button"
-                                                            data-bs-toggle="dropdown"
-                                                            data-boundary="window"
-                                                            aria-haspopup="true"
-                                                            aria-expanded="false"
-                                                            data-bs-reference="parent">
+                                                        <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
+                                                                type="button"
+                                                                data-bs-toggle="dropdown"
+                                                                data-boundary="window"
+                                                                aria-haspopup="true"
+                                                                aria-expanded="false"
+                                                                data-bs-reference="parent">
                                                             <span class="fas fa-ellipsis-h fs-10"></span>
                                                         </button>
                                                         <div class="dropdown-menu dropdown-menu-end py-2">
                                                             {% if perms.inventory.change_lead %}
-                                                                <a href="{% url 'lead_update' request.dealer.slug lead.slug %}" class="dropdown-item text-success-dark">{% trans "Edit" %}</a>
+                                                                <a href="{% url 'lead_update' request.dealer.slug lead.slug %}"
+                                                                   class="dropdown-item text-success-dark">{% trans "Edit" %}</a>
                                                             {% endif %}
-                                                            {% if perms.inventory.change_lead%}
-                                                            <button class="dropdown-item text-primary" onclick="openActionModal('{{ lead.pk }}', '{{ lead.action }}', '{{ lead.next_action }}', '{{ lead.next_action_date|date:"Y-m-d\TH:i" }}')">
-                                                                {% trans "Update Actions" %}
-                                                            </button>
+                                                            {% if perms.inventory.change_lead %}
+                                                                <button class="dropdown-item text-primary"
+                                                                        onclick="openActionModal('{{ lead.pk }}', '{{ lead.action }}', '{{ lead.next_action }}', '{{ lead.next_action_date|date:"Y-m-d\TH:i" }}')">
+                                                                    {% trans "Update Actions" %}
+                                                                </button>
                                                             {% endif %}
                                                             {% if not lead.opportunity %}
-                                                                {% if  perms.inventory.add_opportunity%}
-                                                                <a href="{% url 'lead_opportunity_create' request.dealer.slug lead.slug %}" class="dropdown-item text-success-dark">{% trans "Convert to Opportunity" %}</a>
+                                                                {% if  perms.inventory.add_opportunity %}
+                                                                    <a href="{% url 'lead_opportunity_create' request.dealer.slug lead.slug %}"
+                                                                       class="dropdown-item text-success-dark">{% trans "Convert to Opportunity" %}</a>
                                                                 {% endif %}
                                                             {% endif %}
-
                                                             {% if perms.inventory.delete_lead %}
                                                                 <div class="dropdown-divider"></div>
-                                                                <button class="dropdown-item text-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">{% trans "Delete" %}</button>
-                                                             {%endif%}
+                                                                <button class="dropdown-item text-danger"
+                                                                        data-bs-toggle="modal"
+                                                                        data-bs-target="#deleteModal">
+                                                                    {% trans "Delete" %}
+                                                                </button>
+                                                            {% endif %}
                                                         </div>
                                                     </div>
                                                 {% endif %}
                                             </td>
                                         </tr>
-                                {% endfor %}
-                            </tbody>
-
-                        </table>
-                    </div>
-                    {% if page_obj.paginator.num_pages > 1 %}
-
-                        <div class="d-flex justify-content-end mt-3">
-
-                            <div class="d-flex">
-                                {% include 'partials/pagination.html'%}
-                            </div>
-
+                                    {% endfor %}
+                                </tbody>
+                            </table>
                         </div>
+                        {% if page_obj.paginator.num_pages > 1 %}
+                            <div class="d-flex justify-content-end mt-3">
+                                <div class="d-flex">{% include 'partials/pagination.html' %}</div>
+                            </div>
+                        {% endif %}
+                    {% else %}
+                        <tr>
+                            <td colspan="6" class="text-center">{% trans "No Lead Yet" %}</td>
+                        </tr>
                     {% endif %}
-                {% else %}
-                    <tr>
-                        <td colspan="6" class="text-center">{% trans "No Lead Yet" %}</td>
-                    </tr>
-                {% endif %}
+                </div>
             </div>
         </div>
-    </div>
-{% endblock %}
-
-{% block customJS %}
-    <script>
+    {% endblock %}
+    {% block customJS %}
+        <script>
   // Initialize SweetAlert Toast for general messages
         let Toast = Swal.mixin({
             toast: true,
@@ -358,6 +405,5 @@
                 titleText: msg
             });
         }
-    </script>
-
-{% endblock customJS %}
\ No newline at end of file
+        </script>
+    {% endblock customJS %}
diff --git a/templates/crm/leads/lead_send.html b/templates/crm/leads/lead_send.html
index 8fefdfe2..c6246848 100644
--- a/templates/crm/leads/lead_send.html
+++ b/templates/crm/leads/lead_send.html
@@ -1,9 +1,9 @@
 {% extends "base.html" %}
 {% load crispy_forms_filters %}
 {% load i18n static %}
-
-{% block title %}{{ _("Leads") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Leads") }}
+{% endblock title %}
 {% block content %}
   <div class="card email-content">
     <h5 class="card-header">Send Mail</h5>
@@ -37,4 +37,4 @@
   </div>
   </div>
 
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
diff --git a/templates/crm/leads/lead_tracking.html b/templates/crm/leads/lead_tracking.html
index 0056673b..55367f33 100644
--- a/templates/crm/leads/lead_tracking.html
+++ b/templates/crm/leads/lead_tracking.html
@@ -1,9 +1,10 @@
 {% extends 'base.html' %}
 {% load i18n static %}
-{% block title %}{{ _('Leads Tracking')|capfirst }}{% endblock title %}
-
+{% block title %}
+    {{ _("Leads Tracking") |capfirst }}
+{% endblock title %}
 {% block customCSS %}
-  <style>
+    <style>
     .kanban-column {
       border-radius: 8px;
       padding: 1rem;
@@ -61,98 +62,114 @@
       background-color: rgba(113, 206, 206, 0.1) !important;
       opacity: .8;
     }
-  </style>
+    </style>
 {% endblock customCSS %}
 {% block content %}
-  <div class="container-fluid my-4">
-    <div class="row justify-content-center">
-      <div class="col">
-        <div class="d-flex justify-content-between mb-3">
-          <h3>{{ _("Lead Tracking")}}<li class="fas fa-bullhorn text-primary ms-2"></li></h3>
+    <div class="container-fluid my-4">
+        <div class="row justify-content-center">
+            <div class="col">
+                <div class="d-flex justify-content-between mb-3">
+                    <h3>
+                        {{ _("Lead Tracking") }}
+                        <li class="fas fa-bullhorn text-primary ms-2"></li>
+                    </h3>
+                </div>
+                <div class="row g-3">
+                    <!-- New Lead -->
+                    <div class="col-md">
+                        <div class="kanban-column bg-body">
+                            <div class="kanban-header opacity-75">
+                                <span class="text-body">{{ _("New Leads") }} ({{ new|length }})</span>
+                            </div>
+                            {% for lead in new %}
+                                <a href="{% url 'lead_detail' request.dealer.slug lead.slug %}">
+                                    <div class="lead-card">
+                                        <strong>{{ lead.full_name|capfirst }}</strong>
+                                        <br>
+                                        <small>{{ lead.email }}</small>
+                                        <br>
+                                        <small>{{ lead.phone_number }}</small>
+                                    </div>
+                                </a>
+                            {% endfor %}
+                        </div>
+                    </div>
+                    <!-- Follow Ups -->
+                    <div class="col-md">
+                        <div class="kanban-column bg-body">
+                            <div class="kanban-header opacity-75">
+                                <span class="text-body">{{ _("Follow Ups") }} ({{ follow_up|length }})</span>
+                            </div>
+                            {% for lead in follow_up %}
+                                <a href="{% url 'lead_detail' request.dealer.slug lead.slug %}">
+                                    <div class="lead-card">
+                                        <strong>{{ lead.full_name|capfirst }}</strong>
+                                        <br>
+                                        <small>{{ lead.email }}</small>
+                                        <br>
+                                        <small>{{ lead.phone_number }}</small>
+                                    </div>
+                                </a>
+                            {% endfor %}
+                        </div>
+                    </div>
+                    <!-- Negotiation -->
+                    <div class="col-md">
+                        <div class="kanban-column bg-body">
+                            <div class="kanban-header opacity-75">
+                                <span class="text-body">{{ _("Negotiation Ups") }} ({{ follow_up|length }})</span>
+                            </div>
+                            {% for lead in negotiation %}
+                                <a href="{% url 'lead_detail' request.dealer.slug lead.slug %}">
+                                    <div class="lead-card">
+                                        <strong>{{ lead.full_name|capfirst }}</strong>
+                                        <br>
+                                        <small>{{ lead.email }}</small>
+                                        <br>
+                                        <small>{{ lead.phone_number }}</small>
+                                    </div>
+                                </a>
+                            {% endfor %}
+                        </div>
+                    </div>
+                    <!-- Won -->
+                    <div class="col-md">
+                        <div class="kanban-column bg-body">
+                            <div class="kanban-header bg-success-light opacity-75">
+                                <span class="text-body">{{ _("Won") }} ({{ won|length }}) ({{ follow_up|length }})</span>
+                            </div>
+                            {% for lead in won %}
+                                <a href="{% url 'lead_detail' request.dealer.slug lead.slug %}">
+                                    <div class="lead-card">
+                                        <strong>{{ lead.full_name|capfirst }}</strong>
+                                        <br>
+                                        <small>{{ lead.email }}</small>
+                                        <br>
+                                        <small>{{ lead.phone_number }}</small>
+                                    </div>
+                                </a>
+                            {% endfor %}
+                        </div>
+                    </div>
+                    <!-- Lose -->
+                    <div class="col-md">
+                        <div class="kanban-column bg-body">
+                            <div class="kanban-header bg-danger-light opacity-75">{{ _("Lost") }} ({{ lose|length }})</div>
+                            {% for lead in lose %}
+                                <a href="{% url 'lead_detail' request.dealer.slug lead.slug %}">
+                                    <div class="lead-card">
+                                        <strong>{{ lead.full_name|capfirst }}</strong>
+                                        <br>
+                                        <small>{{ lead.email }}</small>
+                                        <br>
+                                        <small>{{ lead.phone_number }}</small>
+                                    </div>
+                                </a>
+                            {% endfor %}
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
-
-        <div class="row g-3">
-      <!-- New Lead -->
-          <div class="col-md">
-            <div class="kanban-column bg-body">
-              <div class="kanban-header opacity-75"><span class="text-body">{{ _("New Leads")}} ({{new|length}})</span></div>
-              {% for lead in new %}
-                <a href="{% url 'lead_detail' request.dealer.slug lead.slug %}">
-                  <div class="lead-card">
-                    <strong>{{lead.full_name|capfirst}}</strong><br>
-                    <small>{{lead.email}}</small><br>
-                    <small>{{lead.phone_number}}</small>
-                  </div>
-                </a>
-              {% endfor %}
-            </div>
-          </div>
-
-      <!-- Follow Ups -->
-          <div class="col-md">
-            <div class="kanban-column bg-body">
-              <div class="kanban-header opacity-75"><span class="text-body">{{ _("Follow Ups")}} ({{follow_up|length}})</span></div>
-              {% for lead in follow_up %}
-                <a href="{% url 'lead_detail' request.dealer.slug lead.slug %}">
-                  <div class="lead-card">
-                    <strong>{{lead.full_name|capfirst}}</strong><br>
-                    <small>{{lead.email}}</small><br>
-                    <small>{{lead.phone_number}}</small>
-                  </div>
-                </a>
-              {% endfor %}
-            </div>
-          </div>
-
-      <!-- Negotiation -->
-          <div class="col-md">
-            <div class="kanban-column bg-body">
-              <div class="kanban-header opacity-75"><span class="text-body">{{ _("Negotiation Ups")}} ({{follow_up|length}})</span></div>
-              {% for lead in negotiation %}
-                <a href="{% url 'lead_detail' request.dealer.slug lead.slug %}">
-                  <div class="lead-card">
-                    <strong>{{lead.full_name|capfirst}}</strong><br>
-                    <small>{{lead.email}}</small><br>
-                    <small>{{lead.phone_number}}</small>
-                  </div>
-                </a>
-              {% endfor %}
-            </div>
-          </div>
-
-      <!-- Won -->
-          <div class="col-md">
-            <div class="kanban-column bg-body">
-              <div class="kanban-header bg-success-light opacity-75"><span class="text-body">{{ _("Won") }} ({{won|length}}) ({{follow_up|length}})</span></div>
-              {% for lead in won %}
-                <a href="{% url 'lead_detail' request.dealer.slug lead.slug %}">
-                  <div class="lead-card">
-                    <strong>{{lead.full_name|capfirst}}</strong><br>
-                    <small>{{lead.email}}</small><br>
-                    <small>{{lead.phone_number}}</small>
-                  </div>
-                </a>
-              {% endfor %}
-            </div>
-          </div>
-
-      <!-- Lose -->
-          <div class="col-md">
-            <div class="kanban-column bg-body">
-              <div class="kanban-header bg-danger-light opacity-75">{{ _("Lost") }} ({{lose|length}})</div>
-              {% for lead in lose %}
-                <a href="{% url 'lead_detail' request.dealer.slug lead.slug %}">
-                  <div class="lead-card">
-                    <strong>{{lead.full_name|capfirst}}</strong><br>
-                    <small>{{lead.email}}</small><br>
-                    <small>{{lead.phone_number}}</small>
-                  </div>
-                </a>
-              {% endfor %}
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
-  </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/crm/leads/lead_view.html b/templates/crm/leads/lead_view.html
index 5bd5f7ed..4c6a367d 100644
--- a/templates/crm/leads/lead_view.html
+++ b/templates/crm/leads/lead_view.html
@@ -1,8 +1,7 @@
 {% extends 'base.html' %}
-{% load static i18n humanize%}
-
+{% load static i18n humanize %}
 {% block customCSS %}
-  <style>
+    <style>
     .card {
       box-shadow: 0 2px 4px rgba(0,0,0,0.05);
       border: none;
@@ -19,125 +18,131 @@
       padding: 50px;
       color: #aaa;
     }
-  </style>
+    </style>
 {% endblock customCSS %}
-
 {% block content %}
-  <div class="container-fluid">
-    <!-- Welcome Row -->
-    <div class="d-flex justify-content-between align-items-center mb-3">
-      <h5 class="mb-0">مرحبًا ismail mosa</h5>
-      <div>
-        <button class="btn btn-phoenix-secondary dropdown-toggle" data-bs-toggle="dropdown">الصفحة الرئيسية لـ ismail mosa</button>
-      </div>
+    <div class="container-fluid">
+        <!-- Welcome Row -->
+        <div class="d-flex justify-content-between align-items-center mb-3">
+            <h5 class="mb-0">مرحبًا</h5>
+            <div>
+                <button class="btn btn-phoenix-secondary dropdown-toggle"
+                        data-bs-toggle="dropdown">الصفحة الرئيسية لـ </button>
+            </div>
+        </div>
+        <!-- Main Row -->
+        <div class="row">
+            <!-- Tasks -->
+            <div class="col-md-6 mb-4">
+                <div class="card h-100">
+                    <div class="card-header">المهام المفتوحة الخاصة بي</div>
+                    <div class="card-body p-0">
+                        <table class="table table-hover align-middle mb-0">
+                            <thead>
+                                <tr>
+                                    <th>الموضوع</th>
+                                    <th>تاريخ الاستحقاق</th>
+                                    <th>الحالة</th>
+                                    <th>الأولوية</th>
+                                    <th>مرتبط بـ</th>
+                                    <th>اسم جهة الاتصال</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>
+                                        <a href="#">Register for upcoming CRM Webinars</a>
+                                    </td>
+                                    <td>16/02/2025</td>
+                                    <td>Not Started</td>
+                                    <td>Low</td>
+                                    <td>King (Sample)</td>
+                                    <td>Kris Marrier (Sample)</td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <a href="#">Refer CRM Videos</a>
+                                    </td>
+                                    <td>18/02/2025</td>
+                                    <td>In Progress</td>
+                                    <td>Normal</td>
+                                    <td>Morlong Associates</td>
+                                    <td>Mitsue Tollner (Sample)</td>
+                                </tr>
+                                <!-- Add more rows as needed -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <!-- Meetings -->
+            <div class="col-md-6 mb-4">
+                <div class="card h-100">
+                    <div class="card-header d-flex justify-content-between align-items-center">
+                        <span>الاجتماعات الخاصة بي</span>
+                        <span class="spinner-border spinner-border-sm text-muted"
+                              role="status"
+                              aria-hidden="true"></span>
+                    </div>
+                    <div class="card-body p-0">
+                        <table class="table table-hover align-middle mb-0">
+                            <thead>
+                                <tr>
+                                    <th>العنوان</th>
+                                    <th>المرسل</th>
+                                    <th>إلى</th>
+                                    <th>اسم جهة الاتصال</th>
+                                    <th>مرتبط بـ</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>Demo</td>
+                                    <td>03:12 16/02/2025</td>
+                                    <td>04:12 16/02/2025</td>
+                                    <td>Donette Foller (Sample)</td>
+                                    <td>Printing Dimensions</td>
+                                </tr>
+                                <tr>
+                                    <td>Webinar</td>
+                                    <td>03:12 16/02/2025</td>
+                                    <td>04:12 16/02/2025</td>
+                                    <td>Leota Dilliard (Sample)</td>
+                                    <td>Commercial Press</td>
+                                </tr>
+                                <!-- Add more rows as needed -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Bottom Row -->
+        <div class="row">
+            <!-- Today's Leads -->
+            <div class="col-md-6 mb-4">
+                <div class="card h-100">
+                    <div class="card-header">العملاء المحتملون لليوم</div>
+                    <div class="card-body empty-state">
+                        <img src="https://cdn-icons-png.flaticon.com/512/1828/1828945.png"
+                             width="64"
+                             alt="No Data">
+                        <p class="mt-3">لم يتم العثور على أي العملاء المحتملون.</p>
+                    </div>
+                </div>
+            </div>
+            <!-- Deals Closed This Month -->
+            <div class="col-md-6 mb-4">
+                <div class="card h-100">
+                    <div class="card-header">تم إقفال صفقات هذا الشهر</div>
+                    <div class="card-body empty-state">
+                        <img src="https://cdn-icons-png.flaticon.com/512/1828/1828945.png"
+                             width="64"
+                             alt="No Data">
+                        <p class="mt-3">لم يتم العثور على أي صفقات.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
-
-    <!-- Main Row -->
-    <div class="row">
-      <!-- Tasks -->
-      <div class="col-md-6 mb-4">
-        <div class="card h-100">
-          <div class="card-header">المهام المفتوحة الخاصة بي</div>
-          <div class="card-body p-0">
-            <table class="table table-hover align-middle mb-0">
-              <thead>
-                <tr>
-                  <th>الموضوع</th>
-                  <th>تاريخ الاستحقاق</th>
-                  <th>الحالة</th>
-                  <th>الأولوية</th>
-                  <th>مرتبط بـ</th>
-                  <th>اسم جهة الاتصال</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><a href="#">Register for upcoming CRM Webinars</a></td>
-                  <td>16/02/2025</td>
-                  <td>Not Started</td>
-                  <td>Low</td>
-                  <td>King (Sample)</td>
-                  <td>Kris Marrier (Sample)</td>
-                </tr>
-                <tr>
-                  <td><a href="#">Refer CRM Videos</a></td>
-                  <td>18/02/2025</td>
-                  <td>In Progress</td>
-                  <td>Normal</td>
-                  <td>Morlong Associates</td>
-                  <td>Mitsue Tollner (Sample)</td>
-                </tr>
-                <!-- Add more rows as needed -->
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-
-      <!-- Meetings -->
-      <div class="col-md-6 mb-4">
-        <div class="card h-100">
-          <div class="card-header d-flex justify-content-between align-items-center">
-            <span>الاجتماعات الخاصة بي</span>
-            <span class="spinner-border spinner-border-sm text-muted" role="status" aria-hidden="true"></span>
-          </div>
-          <div class="card-body p-0">
-            <table class="table table-hover align-middle mb-0">
-              <thead>
-                <tr>
-                  <th>العنوان</th>
-                  <th>المرسل</th>
-                  <th>إلى</th>
-                  <th>اسم جهة الاتصال</th>
-                  <th>مرتبط بـ</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>Demo</td>
-                  <td>03:12 16/02/2025</td>
-                  <td>04:12 16/02/2025</td>
-                  <td>Donette Foller (Sample)</td>
-                  <td>Printing Dimensions</td>
-                </tr>
-                <tr>
-                  <td>Webinar</td>
-                  <td>03:12 16/02/2025</td>
-                  <td>04:12 16/02/2025</td>
-                  <td>Leota Dilliard (Sample)</td>
-                  <td>Commercial Press</td>
-                </tr>
-                <!-- Add more rows as needed -->
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Bottom Row -->
-    <div class="row">
-      <!-- Today's Leads -->
-      <div class="col-md-6 mb-4">
-        <div class="card h-100">
-          <div class="card-header">العملاء المحتملون لليوم</div>
-          <div class="card-body empty-state">
-            <img src="https://cdn-icons-png.flaticon.com/512/1828/1828945.png" width="64" alt="No Data">
-            <p class="mt-3">لم يتم العثور على أي العملاء المحتملون.</p>
-          </div>
-        </div>
-      </div>
-
-      <!-- Deals Closed This Month -->
-      <div class="col-md-6 mb-4">
-        <div class="card h-100">
-          <div class="card-header">تم إقفال صفقات هذا الشهر</div>
-          <div class="card-body empty-state">
-            <img src="https://cdn-icons-png.flaticon.com/512/1828/1828945.png" width="64" alt="No Data">
-            <p class="mt-3">لم يتم العثور على أي صفقات.</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
diff --git a/templates/crm/leads/partials/update_action.html b/templates/crm/leads/partials/update_action.html
index 9fc0bd3c..f1b2607a 100644
--- a/templates/crm/leads/partials/update_action.html
+++ b/templates/crm/leads/partials/update_action.html
@@ -1,53 +1,61 @@
-<div class="modal fade" id="actionTrackingModal" tabindex="-1" aria-labelledby="actionTrackingModalLabel" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="actionTrackingModalLabel">{{ _("Update Lead Actions") }}</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <form id="actionTrackingForm" method="post">
-        <div class="modal-body">
-          {% csrf_token %}
-          <input type="hidden" id="leadId" name="lead_id">
-
-          <div class="mb-3">
-            <label for="currentAction" class="form-label">{{ _("Current Stage") }}</label>
-            <select class="form-select" id="currentAction" name="current_action" required>
-              <option value="">{{ _("Select Stage") }}</option>
-              <option value="new">{{ _("New") }}</option>
-              <option value="contacted">{{ _("Contacted") }}</option>
-              <option value="qualified">{{ _("Qualified") }}</option>
-              <option value="unqualified">{{ _("Unqualified") }}</option>
-              <option value="converted">{{ _("Converted") }}</option>
-            </select>
-          </div>
-
-          <div class="mb-3">
-            <label for="nextAction" class="form-label">{{ _("Next Action") }}</label>
-            <select class="form-select" id="nextAction" name="next_action" required>
-              <option value="">{{ _("Select Next Action") }}</option>
-              <option value="no_action">{{ _("No Action") }}</option>
-              <option value="call">{{ _("Call") }}</option>
-              <option value="meeting">{{ _("Meeting") }}</option>
-              <option value="email">{{ _("Email") }}</option>
-            </select>
-          </div>
-
-          <div class="mb-3">
-            <label for="nextActionDate" class="form-label">{{ _("Next Action Date") }}</label>
-            <input type="datetime-local" class="form-control" id="nextActionDate" name="next_action_date">
-          </div>
-
-          <div class="mb-3">
-            <label for="actionNotes" class="form-label">{{ _("Notes") }}</label>
-            <textarea class="form-control" id="actionNotes" name="action_notes" rows="3"></textarea>
-          </div>
+<div class="modal fade"
+     id="actionTrackingModal"
+     tabindex="-1"
+     aria-labelledby="actionTrackingModalLabel"
+     aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="actionTrackingModalLabel">{{ _("Update Lead Actions") }}</h5>
+                <button type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close"></button>
+            </div>
+            <form id="actionTrackingForm" method="post">
+                <div class="modal-body">
+                    {% csrf_token %}
+                    <input type="hidden" id="leadId" name="lead_id">
+                    <div class="mb-3">
+                        <label for="currentAction" class="form-label">{{ _("Current Stage") }}</label>
+                        <select class="form-select" id="currentAction" name="current_action" required>
+                            <option value="">{{ _("Select Stage") }}</option>
+                            <option value="new">{{ _("New") }}</option>
+                            <option value="contacted">{{ _("Contacted") }}</option>
+                            <option value="qualified">{{ _("Qualified") }}</option>
+                            <option value="unqualified">{{ _("Unqualified") }}</option>
+                            <option value="converted">{{ _("Converted") }}</option>
+                        </select>
+                    </div>
+                    <div class="mb-3">
+                        <label for="nextAction" class="form-label">{{ _("Next Action") }}</label>
+                        <select class="form-select" id="nextAction" name="next_action" required>
+                            <option value="">{{ _("Select Next Action") }}</option>
+                            <option value="no_action">{{ _("No Action") }}</option>
+                            <option value="call">{{ _("Call") }}</option>
+                            <option value="meeting">{{ _("Meeting") }}</option>
+                            <option value="email">{{ _("Email") }}</option>
+                        </select>
+                    </div>
+                    <div class="mb-3">
+                        <label for="nextActionDate" class="form-label">{{ _("Next Action Date") }}</label>
+                        <input type="datetime-local"
+                               class="form-control"
+                               id="nextActionDate"
+                               name="next_action_date">
+                    </div>
+                    <div class="mb-3">
+                        <label for="actionNotes" class="form-label">{{ _("Notes") }}</label>
+                        <textarea class="form-control" id="actionNotes" name="action_notes" rows="3"></textarea>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button"
+                            class="btn btn-phoenix-secondary"
+                            data-bs-dismiss="modal">{{ _("Close") }}</button>
+                    <button type="submit" class="btn btn-phoenix-primary">{{ _("Save Changes") }}</button>
+                </div>
+            </form>
         </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-phoenix-secondary" data-bs-dismiss="modal">{{ _("Close") }}</button>
-          <button type="submit" class="btn btn-phoenix-primary">{{ _("Save Changes") }}</button>
-        </div>
-      </form>
     </div>
-  </div>
 </div>
diff --git a/templates/crm/leads/schedule_lead.html b/templates/crm/leads/schedule_lead.html
index 3edadd12..f75a5db5 100644
--- a/templates/crm/leads/schedule_lead.html
+++ b/templates/crm/leads/schedule_lead.html
@@ -1,21 +1,21 @@
 {% extends 'base.html' %}
 {% load i18n static crispy_forms_filters %}
-
 {% block content %}
-  <h3>{% if object %}{{ _("Update") }}{% else %}{{ _("Create") }}{% endif %}</h3>
-  <form method="post">
-    {% csrf_token %}
-    {{ form|crispy }}
-    <button
-      type="submit"
-      name="schedule_lead"
-      id="lead-save"
-      class="btn btn-phoenix-primary"
-    >
-      {{ _("Save") }}
-    </button>
-    <a href="{% url 'lead_list' request.dealer.slug %}" class="btn btn-phoenix-secondary">
-      {{ _("Cancel") }}
-    </a>
-  </form>
-{% endblock %}
\ No newline at end of file
+    <h3>
+        {% if object %}
+            {{ _("Update") }}
+        {% else %}
+            {{ _("Create") }}
+        {% endif %}
+    </h3>
+    <form method="post">
+        {% csrf_token %}
+        {{ form|crispy }}
+        <button type="submit"
+                name="schedule_lead"
+                id="lead-save"
+                class="btn btn-phoenix-primary">{{ _("Save") }}</button>
+        <a href="{% url 'lead_list' request.dealer.slug %}"
+           class="btn btn-phoenix-secondary">{{ _("Cancel") }}</a>
+    </form>
+{% endblock %}
diff --git a/templates/crm/note_form.html b/templates/crm/note_form.html
index 767e42c0..3f914929 100644
--- a/templates/crm/note_form.html
+++ b/templates/crm/note_form.html
@@ -1,17 +1,18 @@
 {% load i18n static crispy_forms_filters %}
-
 {% if form.instance.pk %}
-    <form method="post" action="{% url 'update_note_to_lead' note.pk %}" enctype="multipart/form-data">
-{% else %}
-    <form method="post" action="{% url 'add_note_to_lead' lead.slug %}" enctype="multipart/form-data">
-{% endif %}
-
-{% csrf_token %}
-{{ form|crispy }}
-
-{% if form.instance.pk %}
-    <button type="submit" class="btn btn-sm btn-phoenix-primary w-100">{{ _("Update") }}</button>
-{% else %}
-    <button type="submit" class="btn btn-sm btn-phoenix-success w-100">{{ _("Add") }}</button>
-{% endif %}
-</form>
+    <form method="post"
+          action="{% url 'update_note_to_lead' note.pk %}"
+          enctype="multipart/form-data">
+    {% else %}
+        <form method="post"
+              action="{% url 'add_note_to_lead' lead.slug %}"
+              enctype="multipart/form-data">
+        {% endif %}
+        {% csrf_token %}
+        {{ form|crispy }}
+        {% if form.instance.pk %}
+            <button type="submit" class="btn btn-sm btn-phoenix-primary w-100">{{ _("Update") }}</button>
+        {% else %}
+            <button type="submit" class="btn btn-sm btn-phoenix-success w-100">{{ _("Add") }}</button>
+        {% endif %}
+    </form>
diff --git a/templates/crm/notifications.html b/templates/crm/notifications.html
index 14f07b1f..e080aed1 100644
--- a/templates/crm/notifications.html
+++ b/templates/crm/notifications.html
@@ -1,34 +1,46 @@
 {% load i18n static %}
-
-<div class="dropdown-menu dropdown-menu-end notification-dropdown-menu py-0 shadow border navbar-dropdown-caret" id="navbarDropdownNotfication" aria-labelledby="navbarDropdownNotfication">
-  <div class="card position-relative border-0">
-    <div class="card-header p-2">
-      <div class="d-flex justify-content-between">
-        <h5 class="text-body-emphasis mb-0">Notifications</h5>
-      </div>
-    </div>
-    <div class="card-body p-0">
-      <div class="scrollbar-overlay" style="height: 27rem;">
-        <div class="px-2 px-sm-3 py-3 notification-card position-relative border-bottom">
-          <div class="d-flex align-items-center justify-content-between position-relative">
-            <div class="d-flex">
-              <div class="flex-1 me-sm-3">
-                <h4 class="fs-9 text-body-emphasis">{{ _("System") }}</h4>
-                <ul id="notification-list">
-
-                </ul>
-              </div>
+<div class="dropdown-menu dropdown-menu-end notification-dropdown-menu py-0 shadow border navbar-dropdown-caret"
+     id="navbarDropdownNotfication"
+     aria-labelledby="navbarDropdownNotfication">
+    <div class="card position-relative border-0">
+        <div class="card-header p-2">
+            <div class="d-flex justify-content-between">
+                <h5 class="text-body-emphasis mb-0">Notifications</h5>
+            </div>
+        </div>
+        <div class="card-body p-0">
+            <div class="scrollbar-overlay" style="height: 27rem;">
+                <div class="px-2 px-sm-3 py-3 notification-card position-relative border-bottom">
+                    <div class="d-flex align-items-center justify-content-between position-relative">
+                        <div class="d-flex">
+                            <div class="flex-1 me-sm-3">
+                                <h4 class="fs-9 text-body-emphasis">{{ _("System") }}</h4>
+                                <ul id="notification-list">
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="dropdown notification-dropdown">
+                            <button class="btn fs-10 btn-sm dropdown-toggle dropdown-caret-none transition-none"
+                                    type="button"
+                                    data-bs-toggle="dropdown"
+                                    data-boundary="window"
+                                    aria-haspopup="true"
+                                    aria-expanded="false"
+                                    data-bs-reference="parent">
+                                <span class="fas fa-ellipsis-h fs-10 text-body"></span>
+                            </button>
+                            <div class="dropdown-menu py-2">
+                                <a class="dropdown-item">Mark as Read</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="card-footer p-0 border-top border-translucent border-0">
+            <div class="my-2 text-center fw-bold fs-10 text-body-tertiary text-opactity-85">
+                <a class="fw-bolder" href="{% url 'notifications_history' %}">Notification history</a>
             </div>
-            <div class="dropdown notification-dropdown">
-              <button class="btn fs-10 btn-sm dropdown-toggle dropdown-caret-none transition-none" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10 text-body"></span></button>
-              <div class="dropdown-menu py-2"><a class="dropdown-item">Mark as Read</a></div>
-            </div>
-          </div>
         </div>
-      </div>
     </div>
-    <div class="card-footer p-0 border-top border-translucent border-0">
-      <div class="my-2 text-center fw-bold fs-10 text-body-tertiary text-opactity-85"><a class="fw-bolder" href="{% url 'notifications_history' %}">Notification history</a></div>
-    </div>
-  </div>
 </div>
diff --git a/templates/crm/notifications_history.html b/templates/crm/notifications_history.html
index fc307986..61f4ec98 100644
--- a/templates/crm/notifications_history.html
+++ b/templates/crm/notifications_history.html
@@ -1,7 +1,5 @@
 {% extends 'base.html' %}
-
 {% block content %}
-
     <div class="content">
         <h2 class="mb-5">{{ _("Notifications") }}</h2>
         <div class="d-flex justify-content-end mb-3">
@@ -13,40 +11,39 @@
                     <div class="d-flex align-items-center justify-content-between py-3 px-lg-6 px-4 notification-card border-top">
                         <div class="d-flex">
                             <div class="me-3 flex-1 mt-2">
-                                <h4 class="fs-9 text-body-emphasis">{{ _("System")}}:</h4>
+                                <h4 class="fs-9 text-body-emphasis">{{ _("System") }}:</h4>
                                 {% if notification.is_read %}
-                                    <p class="fs-9 text-body-highlight"><span class="far fa-envelope text-success-dark fs-8 me-1"></span><span class="me-1">{{ notification.message|safe }}</span> <span class="ms-2 text-body-tertiary text-opacity-85 fw-bold fs-10 text-end">{{ notification.created|timesince }}</span></p>
+                                    <p class="fs-9 text-body-highlight">
+                                        <span class="far fa-envelope text-success-dark fs-8 me-1"></span><span class="me-1">{{ notification.message|safe }}</span> <span class="ms-2 text-body-tertiary text-opacity-85 fw-bold fs-10 text-end">{{ notification.created|timesince }}</span>
+                                    </p>
                                 {% else %}
-                                    <p class="fs-9 text-body-highlight"><span class="far fa-envelope-open text-danger-dark fs-8 me-1"></span><span>{{ notification.message|safe }}</span> <span class="ms-2 text-body-tertiary text-opacity-85 fw-bold fs-10 text-end">{{ notification.created|timesince }}</span></p>
+                                    <p class="fs-9 text-body-highlight">
+                                        <span class="far fa-envelope-open text-danger-dark fs-8 me-1"></span><span>{{ notification.message|safe }}</span> <span class="ms-2 text-body-tertiary text-opacity-85 fw-bold fs-10 text-end">{{ notification.created|timesince }}</span>
+                                    </p>
                                 {% endif %}
-                                <p class="text-body-secondary fs-9 mb-0"><span class="me-1 far fa-clock"></span>{{ notification.created }}</p>
+                                <p class="text-body-secondary fs-9 mb-0">
+                                    <span class="me-1 far fa-clock"></span>{{ notification.created }}
+                                </p>
                             </div>
                         </div>
-
                     </div>
                 {% endfor %}
             </div>
-            </div>
-            <div class="pagination">
-                <span class="step-links">
-                    {% if notifications.has_previous %}
-                        <a href="?page=1">&laquo; first</a>
-                        <a href="?page={{ notifications.previous_page_number }}">previous</a>
-                    {% endif %}
-
-                    <span class="current">
-                        Page {{ notifications.number }} of {{ notifications.paginator.num_pages }}.
-                    </span>
-
-                    {% if notifications.has_next %}
-                        <a href="?page={{ notifications.next_page_number }}">next</a>
-                        <a href="?page={{ notifications.paginator.num_pages }}">last &raquo;</a>
-                    {% endif %}
-                </span>
-            </div>
-        {% else %}
-            <p>No notifications found.</p>
-        {% endif %}
-
+        </div>
+        <div class="pagination">
+            <span class="step-links">
+                {% if notifications.has_previous %}
+                    <a href="?page=1">&laquo; first</a>
+                    <a href="?page={{ notifications.previous_page_number }}">previous</a>
+                {% endif %}
+                <span class="current">Page {{ notifications.number }} of {{ notifications.paginator.num_pages }}.</span>
+                {% if notifications.has_next %}
+                    <a href="?page={{ notifications.next_page_number }}">next</a>
+                    <a href="?page={{ notifications.paginator.num_pages }}">last &raquo;</a>
+                {% endif %}
+            </span>
+        </div>
+    {% else %}
+        <p>No notifications found.</p>
+    {% endif %}
 {% endblock %}
-
diff --git a/templates/crm/opportunities/opportunity_confirm_delete.html b/templates/crm/opportunities/opportunity_confirm_delete.html
index 988ad73e..8170c2e4 100644
--- a/templates/crm/opportunities/opportunity_confirm_delete.html
+++ b/templates/crm/opportunities/opportunity_confirm_delete.html
@@ -1,5 +1,4 @@
 {% extends 'base.html' %}
-
 {% block content %}
     <h1>Delete Opportunity</h1>
     <p>Are you sure you want to delete "{{ object.deal_name }}"?</p>
@@ -8,4 +7,4 @@
         <button type="submit">Yes, delete</button>
         <a href="{% url 'opportunity_list' request.dealer.slug %}">Cancel</a>
     </form>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/crm/opportunities/opportunity_detail.html b/templates/crm/opportunities/opportunity_detail.html
index 6f9f7bd0..af438c27 100644
--- a/templates/crm/opportunities/opportunity_detail.html
+++ b/templates/crm/opportunities/opportunity_detail.html
@@ -1,474 +1,704 @@
 {% extends 'base.html' %}
 {% load i18n static humanize %}
-{% block title %}{{ _("Opportunity Detail") }}{% endblock title %}
+{% block title %}
+    {{ _("Opportunity Detail") }}
+{% endblock title %}
 {% block content %}
-  <div class="row align-items-center justify-content-between g-3 mb-4 mt-4">
-    <div class="col-12 col-md-auto">
-      <h2 class="mb-0">{{ _("Opportunity details")}}</h2>
-    </div>
-    <div class="col-12 col-md-auto d-flex">
-
-      <div>
-        <button class="btn px-3 btn-phoenix-secondary" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fa-solid fa-ellipsis"></span></button>
-        <ul class="dropdown-menu dropdown-menu-end p-0" style="z-index: 9999;">
-          <li>
-            {% if opportunity.estimate %}
-              {% if perms.django_ledger.view_estimatemodel%}
-              <a class="dropdown-item" href="{% url 'estimate_detail' request.dealer.slug   opportunity.estimate.pk %}">{{ _("View Quotation")}}</a>
-              {% endif %}
-            {% else %}
-              {%if perms.django_ledger.add_estimatemodel%}
-              <a class="dropdown-item" href="{% url 'estimate_create_from_opportunity' request.dealer.slug opportunity.slug %}">{{ _("Create Quotation")}}</a>
-              {% endif %}
-            {% endif %}
-          </li>
-          {% if perms.inventory.change_opportunity%}
-          <li><a class="dropdown-item" href="{% url 'update_opportunity' request.dealer.slug opportunity.slug %}">Update Opportunity</a></li>
-          <li><a class="dropdown-item" href="{% url 'update_opportunity' request.dealer.slug opportunity.slug %}">Update Stage</a></li>
-          {% endif %}
-          {% if perms.inventory.delete_opportunity%}
-          <li><a class="dropdown-item text-danger" href="">Delete Opportunity</a></li>
-          {% endif %}
-        </ul>
-      </div>
-    </div>
-  </div>
-  <div class="row g-4 g-xl-6 other-information">
-    <div class="col-xl-5 col-xxl-4">
-      <div class="sticky-leads-sidebar">
-        <div class="card mb-3">
-          <div class="card-body">
-            <div class="row align-items-center g-3">
-              <div class="col-12 col-sm-auto flex-1">
-                {% if opportunity.car %}
-                  <h3 class="fw-bolder mb-2 line-clamp-1"><span class="d-inline-block lh-sm me-1" data-feather="check-circle" style="height:16px;width:16px;"></span> {{ opportunity.car.id_car_make.get_local_name }} - {{ opportunity.car.id_car_model.get_local_name }} - {{ opportunity.car.year }}</h3>
-                {% endif %}
-
-                <div class="d-flex align-items-center mb-4">
-                  {% if opportunity.car.finances %}
-                    <h5 class="mb-0 me-4">{{ opportunity.car.finances.total }} <span class="fw-light"><span class="icon-saudi_riyal"></span></span></h5>
-                  {% endif %}
-                </div>
-                <div class="d-md-flex d-xl-block align-items-center justify-content-between mb-5">
-                  <div class="d-flex align-items-center mb-3 mb-md-0 mb-xl-3">
-                    <div class="avatar avatar-xl me-3">
-                      {% if opportunity.car.id_car_make.logo %}
-                        <img class="rounded" src="{{ opportunity.car.id_car_make.logo.url }}" alt="" />
-                      {% endif %}
-                    </div>
-                    <div>
-                      {% if opportunity.customer %}
-                        <h5>{{ opportunity.customer|capfirst}}</h5>
-                        <div class=""><div class="text-body-secondary text-decoration-none">Individual<span class="fa-solid text-body-secondary fs-9 ms-2"></span></div>
-                      {% else %}
-                        <h5>{{ opportunity.organization|capfirst}}</h5>
-                        <div class=""><div class="text-body-secondary text-decoration-none">Organization<span class="fa-solid text-body-secondary fs-9 ms-2"></span></div>
-                      {% endif %}
-                    </div>
-                  </div>
-                </div>
-                <div><span class="badge badge-phoenix badge-phoenix-primary">STAGE</span> : <span class="badge badge-phoenix badge-phoenix-success me-2">{{ opportunity.get_stage_display }}</span><span class="badge badge-phoenix badge-phoenix-danger me-2">{{ opportunity.get_status_display }}</span></div>
-              </div>
-              <div class="progress mb-2" style="height:5px">
-                <div class="progress-bar bg-primary-lighter" data-bs-theme="light" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-              </div>
-              <div class="d-flex align-items-center justify-content-between">
-                <p class="mb-0"> {{ opportunity.get_status_display }}</p>
-                <div><span class="d-inline-block lh-sm me-1" data-feather="clock" style="height:16px;width:16px;"></span><span class="d-inline-block lh-sm"> {{ opportunity.created|naturaltime|capfirst}}</span></div>
-              </div>
-            </div>
-          </div>
+    <div class="row align-items-center justify-content-between g-3 mb-4 mt-4">
+        <div class="col-12 col-md-auto">
+            <h2 class="mb-0">{{ _("Opportunity details") }}</h2>
         </div>
-      </div>
-      <div class="card mb-3">
-        <div class="card-body">
-          <h4 class="mb-5 d-flex align-items-center"><span class="d-inline-block lh-sm me-1" data-feather="link" style="height:16px;width:16px;"></span> {{ _("Upcoming Events")}}</h4>
-          <div class="row g-3">
-            <div class="col-12 overflow-auto" style="max-height: 200px;">
-              <ul class="list-group list-group-flush">
-                {% for event in schedules %}
-                  <li class="list-group-item d-flex justify-content-between align-items-center">
-                    <div class="d-flex align-items-center">
-                      <span class="badge rounded-pill bg-phoenix-primary text-primary me-2 fs-9">{{ event.scheduled_type|capfirst }}</span>
-                      <span class="fs-9">{{ event.purpose }}</span>
-                    </div>
-                    <div class="fs-9">{{ event.scheduled_at|naturaltime|capfirst }}</div>
-                  </li>
-                {% empty %}
-                  <li class="list-group-item text-center fs-9">{{ _("No upcoming events") }}</li>
-                {% endfor %}
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="card">
-        <div class="card-body">
-          <h4 class="mb-5 d-flex align-items-center"><span class="d-inline-block lh-sm me-1" data-feather="link" style="height:16px;width:16px;"></span> {{ _("Related Records")}}</h4>
-          <div class="row g-3">
-            <div class="col-12">
-              <div class="mb-4">
-                <div class="d-flex flex-wrap justify-content-between mb-2">
-                  <h5 class="mb-0 text-body-highlight me-2">{{ _("Estimate") }}</h5>
-                </div>
-                {% if opportunity.estimate %}
-                  <a class="dropdown-item" href="{% url 'estimate_detail' request.dealer.slug opportunity.estimate.pk %}">{{ _("View Quotation")}}</a>
-                {% else %}
-                  <p>{{ _("No Estimate") }}</p>
-                {% endif %}
-              </div>
-              <div class="mb-4">
-                <div class="d-flex flex-wrap justify-content-between mb-2">
-                  <h5 class="mb-0 text-body-highlight me-2">{{ _("Invoice") }}</h5>
-                </div>
-                {% if opportunity.estimate.invoice %}
-                  <a class="dropdown-item" href="{% url 'invoice_detail' opportunity.estimate.invoice.pk %}">{{ _("View Invoice")}}</a>
-                {% else %}
-                  <p>{{ _("No Invoice") }}</p>
-                {% endif %}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="card mt-3">
-        <div class="card-body">
-          <h4 class="mb-5 d-flex align-items-center"><span class="d-inline-block lh-sm me-1" data-feather="clock" style="height:16px;width:16px;"></span> {{ _("System Information")}}</h4>
-          <div class="row g-3">
-            <div class="col-12">
-              <div class="mb-4">
-                <div class="d-flex flex-wrap justify-content-between mb-2">
-                  <h5 class="mb-0 text-body-highlight me-2">{{ _("Created ") }}</h5>
-                </div>
-                {{ opportunity.created|naturalday|capfirst }}
-              </div>
-              <div class="mb-4">
-                <div class="d-flex flex-wrap justify-content-between mb-2">
-                  <h5 class="mb-0 text-body-highlight me-2">{{ _("Last Updated") }}</h5>
-                </div>
-              </div>
-              {{ opportunity.updated }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-xl-7 col-xxl-8">
-    <div class="card mb-5">
-      <div class="card-body">
-        <div class="row g-4 g-xl-1 g-xxl-3 justify-content-between">
-          <div class="col-sm-auto">
-            <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center">
-              <div class="d-flex bg-primary-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0" style="width:32px; height:32px"><span class="text-primary-dark" data-feather="layout" style="width:24px; height:24px"></span></div>
-              <div>
-                <p class="fw-bold mb-1">{{ _("Quotation Amount") }}</p>
-                <h4 class="fw-bolder text-nowrap">
-                  {% if opportunity.estimate %}
-                    {{ opportunity.estimate.get_invoiced_amount.invoice_amount_paid__sum }}
-                  {% endif %}
-                </h4>
-              </div>
-            </div>
-          </div>
-          <div class="col-sm-auto">
-            <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center border-start-sm ps-sm-5 border-translucent">
-              <div class="d-flex bg-success-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0" style="width:32px; height:32px"><span class="text-success-dark icon-saudi_riyal" style="width:24px; height:24px"></span></div>
-              <div>
-                <p class="fw-bold mb-1">{{ _("Amount") }}</p>
-                <h4 class="fw-bolder text-nowrap">{{opportunity.amount}}</h4>
-              </div>
-            </div>
-          </div>
-          <div class="col-sm-auto">
-            <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center border-start-sm ps-sm-5 border-translucent">
-              <div class="d-flex bg-success-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0" style="width:32px; height:32px"><span class="text-success-dark icon-saudi_riyal" style="width:24px; height:24px"></span></div>
-              <div>
-                <p class="fw-bold mb-1">{{ _("Expected Revenue") }}</p>
-                <h4 class="fw-bolder text-nowrap">{{opportunity.expected_revenue}}</h4>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="px-xl-4 mb-7">
-      <div class="row mx-0 mx-sm-3 mx-lg-0 px-lg-0">
-        <div class="col-sm-12 col-xxl-6 border-bottom border-end-xxl border-translucent py-3">
-          <table class="w-100 table-stats table-stats">
-            <tr>
-              <th></th>
-              <th></th>
-              <th></th>
-            </tr>
-            <tr>
-              <td class="py-2">
-                <div class="d-inline-flex align-items-center">
-                  <div class="d-flex bg-success-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-success-dark" data-feather="bar-chart-2" style="width:16px; height:16px"></span></div>
-                  <p class="fw-bold mb-0">Probability (%)</p>
-                </div>
-              </td>
-              <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
-              <td class="py-2">
-                <p class="ps-6 ps-sm-0 fw-semibold mb-0 mb-0 pb-3 pb-sm-0">{{ opportunity.probability }}  (%)</p>
-              </td>
-            </tr>
-            <tr>
-              <td class="py-2">
-                <div class="d-flex align-items-center">
-                  <div class="d-flex bg-success-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0" style="width:32px; height:32px"><span class="text-info-dark icon-saudi_riyal" style="width:24px; height:24px"></span></div>
-                  <p class="fw-bold mb-0">{{ _("Estimated Revenue") }}</p>
-                </div>
-              </td>
-              <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
-              <td class="py-2">
-                <p class="ps-6 ps-sm-0 fw-semibold mb-0"><span class="icon-saudi_riyal"></span>{{ opportunity.expected_revenue }}</p>
-              </td>
-            </tr>
-          </table>
-        </div>
-        <div class="col-sm-12 col-xxl-6 border-bottom border-translucent py-3">
-          <table class="w-100 table-stats">
-            <tr>
-              <th></th>
-              <th></th>
-              <th></th>
-            </tr>
-            <tr>
-              <td class="py-2">
-                <div class="d-inline-flex align-items-center">
-                  <div class="d-flex bg-primary-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-primary-dark" data-feather="phone" style="width:16px; height:16px"></span></div>
-                  <p class="fw-bold mb-0">{{ _("Phone Number") }}</p>
-                </div>
-              </td>
-              <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
-              <td class="py-2"><a class="ps-6 ps-sm-0 fw-semibold mb-0 pb-3 pb-sm-0 text-body" href="tel:{{ opportunity.customer.phone_number }}">{{ opportunity.customer.phone_number  }}</a></td>
-            </tr>
-            <tr>
-              <td class="py-2">
-                <div class="d-flex align-items-center">
-                  <div class="d-flex bg-warning-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-warning-dark" data-feather="mail" style="width:16px; height:16px"></span></div>
-                  <p class="fw-bold mb-0">{{ _("Email") }}</p>
-                </div>
-              </td>
-              <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
-              <td class="py-2"><a class="ps-6 ps-sm-0 fw-semibold mb-0 text-body" href="mailto:{{ opportunity.customer.email}}">{{ opportunity.customer.email}}</a></td>
-            </tr>
-          </table>
-        </div>
-        <div class="col-sm-12 col-xxl-6 border-end-xxl border-bottom border-bottom-xxl-0 py-3 border-translucent">
-          <table class="w-100 table-stats">
-            <tr>
-              <th></th>
-              <th></th>
-              <th></th>
-            </tr>
-            <tr>
-              <td class="py-2">
-                <div class="d-inline-flex align-items-center">
-                  <div class="d-flex bg-success-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-success-dark" data-feather="users" style="width:16px; height:16px"></span></div>
-                  <p class="fw-bold mb-0">{{ _("Contact Name")}}</p>
-                </div>
-              </td>
-              <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
-              <td class="py-2">
-                {% if opportunity.customer %}
-                  <div class="ps-6 ps-sm-0 fw-semibold mb-0 pb-3 pb-sm-0">{{ opportunity.customer.full_name}}</div>
-                {% else %}
-                  <div class="ps-6 ps-sm-0 fw-semibold mb-0 pb-3 pb-sm-0">{{ opportunity.organization}}</div>
-                {% endif %}
-              </td>
-            </tr>
-            <tr>
-              <td class="py-2">
-                <div class="d-flex align-items-center">
-                  <div class="d-flex bg-info-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-info-dark" data-feather="edit" style="width:16px; height:16px"></span></div>
-                  <p class="fw-bold mb-0">{{ _("Assigned To") }}</p>
-                </div>
-              </td>
-              <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
-              <td class="py-2">
-                {% if request.user.email == opportunity.staff.email %}
-                  <div class="ps-6 ps-sm-0 fw-semibold mb-0">You</div>
-                {% else %}
-                  <div class="ps-6 ps-sm-0 fw-semibold mb-0">{{ opportunity.staff.get_local_name}}</div>
-                {% endif %}
-              </td>
-            </tr>
-          </table>
-        </div>
-        <div class="col-sm-12 col-xxl-6 py-3">
-          <table class="w-100 table-stats">
-            <tr>
-              <th></th>
-              <th></th>
-              <th></th>
-            </tr>
-            <tr>
-              <td class="py-2">
-                <div class="d-inline-flex align-items-center">
-                  <div class="d-flex bg-info-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-info-dark" data-feather="clock" style="width:16px; height:16px"></span></div>
-                  <p class="fw-bold mb-0">{{ _("Create Date")}}</p>
-                </div>
-              </td>
-              <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
-              <td class="py-2">
-                <div class="ps-6 ps-sm-0 fw-semibold mb-0 pb-3 pb-sm-0">{{ opportunity.created|naturaltime|capfirst}}</div>
-              </td>
-            </tr>
-            <tr>
-              <td class="py-2">
-                <div class="d-flex align-items-center">
-                  <div class="d-flex bg-warning-subtle rounded-circle flex-center me-3" style="width:24px; height:24px"><span class="text-warning-dark" data-feather="clock" style="width:16px; height:16px"></span></div>
-                  <p class="fw-bold mb-0">{{ _("Expected Closing Date")}}</p>
-                </div>
-              </td>
-              <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
-              <td class="py-2">
-                <div class="ps-6 ps-sm-0 fw-semibold mb-0">{{ opportunity.expected_close_date|date}}</div>
-              </td>
-            </tr>
-          </table>
-        </div>
-      </div>
-    </div>
-    <ul class="nav nav-underline fs-9 deal-details scrollbar flex-nowrap w-100 pb-1 mb-6" id="myTab" role="tablist" style="overflow-y: hidden;">
-        <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link active" id="tasks-tab" data-bs-toggle="tab" href="#tab-tasks" role="tab" aria-controls="tab-tasks" aria-selected="true"> <span class="fa-solid fa-envelope me-2 tab-icon-color fs-8"></span>{{ _("Tasks") }}</a></li>
-        <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="notes-tab" data-bs-toggle="tab" href="#tab-notes" role="tab" aria-controls="tab-notes" aria-selected="false" tabindex="-1"> <span class="fa-solid fa-clipboard me-2 tab-icon-color"></span>{{ _("Notes") }}</a></li>
-        {% comment %} <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="meeting-tab" data-bs-toggle="tab" href="#tab-meeting" role="tab" aria-controls="tab-meeting" aria-selected="true"> <span class="fa-solid fa-video me-2 tab-icon-color"></span>{{ _("Meetings") }}</a></li> {% endcomment %}
-        {% comment %} <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="task-tab" data-bs-toggle="tab" href="#tab-task" role="tab" aria-controls="tab-task" aria-selected="true"> <span class="fa-solid fa-square-check me-2 tab-icon-color"></span>Task</a></li> {% endcomment %}
-        {% comment %} <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="call-tab" data-bs-toggle="tab" href="#tab-call" role="tab" aria-controls="tab-call" aria-selected="true"> <span class="fa-solid fa-phone me-2 tab-icon-color"></span>{{ _("Calls") }}</a></li> {% endcomment %}
-        <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="emails-tab" data-bs-toggle="tab" href="#tab-emails" role="tab" aria-controls="tab-emails" aria-selected="true"> <span class="fa-solid fa-envelope me-2 tab-icon-color"></span>{{ _("Emails")}} </a></li>
-        <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="activity-tab" data-bs-toggle="tab" href="#tab-activity" role="tab" aria-controls="tab-activity" aria-selected="false" tabindex="-1"> <span class="fa-solid fa-chart-line me-2 tab-icon-color"></span>{{ _("Activity") }}</a></li>
-
-        {% comment %} <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="attachments-tab" data-bs-toggle="tab" href="#tab-attachments" role="tab" aria-controls="tab-attachments" aria-selected="true"> <span class="fa-solid fa-paperclip me-2 tab-icon-color"></span>Attachments</a></li> {% endcomment %}
-    </ul>
-    <div class="tab-content" id="myTabContent">
-        <div class="tab-pane fade active show" id="tab-tasks" role="tabpanel" aria-labelledby="tasks-tab">
-        <div class="mb-1 d-flex justify-content-between align-items-center">
-          <h3 class="mb-0" id="scrollspyEmails">{{ _("Tasks") }}</h3>
-          {% if perms.inventory.change_opportunity%}
-            <button class="btn btn-phoenix-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#scheduleModal"><span class="fas fa-plus me-1"></span>{{ _("Add Task") }}</button>
-           {% endif %}
-        </div>
-        <div>
-
-          <div class="border-top border-bottom border-translucent" id="allEmailsTable" data-list='{"valueNames":["subject","sent","date","source","status"],"page":7,"pagination":true}'>
-            <div class="table-responsive scrollbar mx-n1 px-1">
-              <table class="table fs-9 mb-0">
-                <thead>
-                  <tr>
-                    <th class="white-space-nowrap fs-9 align-middle ps-0" style="width:26px;">
-                      <div class="form-check mb-0 fs-8">
-                        <input class="form-check-input" type="checkbox" data-bulk-select='{"body":"all-email-table-body"}' />
-                      </div>
-                    </th>
-                    <th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase" scope="col" data-sort="subject" style="width:31%; min-width:350px">Title</th>
-                    <th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase" scope="col" data-sort="subject" style="width:31%; min-width:350px">Notes</th>
-                    <th class="sort align-middle pe-3 text-uppercase" scope="col" data-sort="sent" style="width:15%; min-width:130px">Assigned to</th>
-                    <th class="sort align-middle text-start text-uppercase" scope="col" data-sort="date" style="min-width:165px">Due Date</th>
-                    <th class="sort align-middle text-start text-uppercase" scope="col" data-sort="date" style="min-width:165px">Completed</th>
-                  </tr>
-                </thead>
-                <tbody class="list" id="all-tasks-table-body">
-                  {% for task in schedules %}
-                    {% include "partials/task.html" %}
-                  {% endfor %}
-                </tbody>
-              </table>
-            </div>
-            <div class="row align-items-center justify-content-between py-2 pe-0 fs-9">
-              <div class="col-auto d-flex">
-                <p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body" data-list-info="data-list-info"></p><a class="fw-semibold" href="" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a><a class="fw-semibold d-none" href="" data-list-view="less">View Less<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
-              </div>
-              <div class="col-auto d-flex">
-                <button class="page-link" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
-                <ul class="mb-0 pagination"></ul>
-                <button class="page-link pe-0" data-list-pagination="next"><span class="fas fa-chevron-right"></span></button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-      </div>
-      <div class="tab-pane fade" id="tab-notes" role="tabpanel" aria-labelledby="notes-tab">
-          <div class="mb-1 d-flex align-items-center justify-content-between">
-            <h3 class="mb-4" id="scrollspyNotes">{{ _("Notes") }}</h3>
-            {% if perms.inventory.change_lead%}
-            <button class="btn btn-phoenix-primary btn-sm" type="button" onclick="reset_form()" data-bs-toggle="modal" data-bs-target="#noteModal"><span class="fas fa-plus me-1"></span>{{ _("Add Note") }}</button>
-             {% endif %}
-          </div>
-
-          <div class="border-top border-bottom border-translucent" id="leadDetailsTable">
-            <div class="table-responsive scrollbar mx-n1 px-1">
-              <table class="table fs-9 mb-0">
-                <thead>
-                  <tr>
-                    <th class="align-middle pe-6 text-uppercase text-start" scope="col" style="width:40%;">{{ _("Note") }}</th>
-                    <th class="align-middle text-start text-uppercase white-space-nowrap" scope="col" style="width:40%;">{{ _("Created On")}}</th>
-                    <th class="align-middle text-start text-uppercase white-space-nowrap" scope="col" style="width:40%;">{{ _("Last Updated")}}</th>
-                    <th class="align-middle pe-0 text-end" scope="col" style="width:10%;"> </th>
-                  </tr>
-                </thead>
-                <tbody >
-                  {% for note in opportunity.get_notes %}
-                    <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                      <td class="align-middle  text-start fw-bold text-body-tertiary ps-1">{{note.note}}</td>
-                      <td class="align-middle text-body-tertiary text-start white-space-nowrap">{{ note.created|naturalday|capfirst }}</td>
-                      <td class="align-middle text-body-tertiary text-start white-space-nowrap">{{ note.updated|naturalday|capfirst }}</td>
-                      <td class="align-middle text-end white-space-nowrap pe-0 action py-2">
-                        {% if note.created_by == request.user %}
-                          <a id="updateBtn"
-                             href="#"
-                             onclick="updateNote(this)"
-                             class="btn btn-sm btn-phoenix-primary me-2"
-                             data-pk="{{ note.pk }}"
-                             data-note="{{ note.note|escapejs }}"
-                             data-url="{% url 'update_note' request.dealer.slug note.pk %}"
-                             data-bs-toggle="modal"
-                             data-bs-target="#noteModal"
-                             data-note-title="{{ _('Update') }}<i class='fas fa-pen-square text-primary ms-2'></i>">
-                            {{ _("Update") }}
-                          </a>
-                          <button class="btn btn-phoenix-danger btn-sm delete-btn"
-                                  data-url="{% url 'delete_note_to_lead' request.dealer.slug note.pk %}"
-                                  data-message="Are you sure you want to delete this note?"
-                                  data-bs-toggle="modal" data-bs-target="#deleteModal">
-                            <i class="fas fa-trash"></i>
-                          </button>
+        <div class="col-12 col-md-auto d-flex">
+            <div>
+                <button class="btn px-3 btn-phoenix-secondary"
+                        type="button"
+                        data-bs-toggle="dropdown"
+                        data-boundary="window"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        data-bs-reference="parent">
+                    <span class="fa-solid fa-ellipsis"></span>
+                </button>
+                <ul class="dropdown-menu dropdown-menu-end p-0" style="z-index: 9999;">
+                    <li>
+                        {% if opportunity.estimate %}
+                            {% if perms.django_ledger.view_estimatemodel %}
+                                <a class="dropdown-item"
+                                   href="{% url 'estimate_detail' request.dealer.slug   opportunity.estimate.pk %}">{{ _("View Quotation") }}</a>
+                            {% endif %}
+                        {% else %}
+                            {% if perms.django_ledger.add_estimatemodel %}
+                                <a class="dropdown-item"
+                                   href="{% url 'estimate_create_from_opportunity' request.dealer.slug opportunity.slug %}">{{ _("Create Quotation") }}</a>
+                            {% endif %}
                         {% endif %}
-                      </td>
-                    </tr>
-                  {% endfor %}
-                </tbody>
-              </table>
+                    </li>
+                    {% if perms.inventory.change_opportunity %}
+                        <li>
+                            <a class="dropdown-item"
+                               href="{% url 'update_opportunity' request.dealer.slug opportunity.slug %}">Update Opportunity</a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item"
+                               href="{% url 'update_opportunity' request.dealer.slug opportunity.slug %}">Update Stage</a>
+                        </li>
+                    {% endif %}
+                    {% if perms.inventory.delete_opportunity %}
+                        <li>
+                            <a class="dropdown-item text-danger" href="">Delete Opportunity</a>
+                        </li>
+                    {% endif %}
+                </ul>
             </div>
-          </div>
         </div>
-      {% comment %} <div class="tab-pane fade" id="tab-notes" role="tabpanel" aria-labelledby="notes-tab">
+    </div>
+    <div class="row g-4 g-xl-6 other-information">
+        <div class="col-xl-5 col-xxl-4">
+            <div class="sticky-leads-sidebar">
+                <div class="card mb-3">
+                    <div class="card-body">
+                        <div class="row align-items-center g-3">
+                            <div class="col-12 col-sm-auto flex-1">
+                                {% if opportunity.car %}
+                                    <h3 class="fw-bolder mb-2 line-clamp-1">
+                                        <span class="d-inline-block lh-sm me-1"
+                                              data-feather="check-circle"
+                                              style="height:16px;
+                                                     width:16px"></span> {{ opportunity.car.id_car_make.get_local_name }} - {{ opportunity.car.id_car_model.get_local_name }} - {{ opportunity.car.year }}
+                                    </h3>
+                                {% endif %}
+                                <div class="d-flex align-items-center mb-4">
+                                    {% if opportunity.car.finances %}
+                                        <h5 class="mb-0 me-4">
+                                            {{ opportunity.car.finances.total }} <span class="fw-light"><span class="icon-saudi_riyal"></span></span>
+                                        </h5>
+                                    {% endif %}
+                                </div>
+                                <div class="d-md-flex d-xl-block align-items-center justify-content-between mb-5">
+                                    <div class="d-flex align-items-center mb-3 mb-md-0 mb-xl-3">
+                                        <div class="avatar avatar-xl me-3">
+                                            {% if opportunity.car.id_car_make.logo %}
+                                                <img class="rounded"
+                                                     src="{{ opportunity.car.id_car_make.logo.url }}"
+                                                     alt="" />
+                                            {% endif %}
+                                        </div>
+                                        <div>
+                                            {% if opportunity.customer %}
+                                                <h5>{{ opportunity.customer|capfirst }}</h5>
+                                                <div class="">
+                                                    <div class="text-body-secondary text-decoration-none">
+                                                        Individual<span class="fa-solid text-body-secondary fs-9 ms-2"></span>
+                                                    </div>
+                                                {% else %}
+                                                    <h5>{{ opportunity.organization|capfirst }}</h5>
+                                                    <div class="">
+                                                        <div class="text-body-secondary text-decoration-none">
+                                                            Organization<span class="fa-solid text-body-secondary fs-9 ms-2"></span>
+                                                        </div>
+                                                    {% endif %}
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <span class="badge badge-phoenix badge-phoenix-primary">STAGE</span> : <span class="badge badge-phoenix badge-phoenix-success me-2">{{ opportunity.get_stage_display }}</span><span class="badge badge-phoenix badge-phoenix-danger me-2">{{ opportunity.get_status_display }}</span>
+                                        </div>
+                                    </div>
+                                    <div class="progress mb-2" style="height:5px">
+                                        <div class="progress-bar bg-primary-lighter"
+                                             data-bs-theme="light"
+                                             role="progressbar"
+                                             style="width: {{ opportunity.probability }}%"
+                                             aria-valuenow="25"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100"></div>
+                                    </div>
+                                    <div class="d-flex align-items-center justify-content-between">
+                                        <p class="mb-0">{{ opportunity.get_status_display }}</p>
+                                        <div>
+                                            <span class="d-inline-block lh-sm me-1"
+                                                  data-feather="clock"
+                                                  style="height:16px;
+                                                         width:16px"></span><span class="d-inline-block lh-sm">{{ opportunity.created|naturaltime|capfirst }}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card mb-3">
+                        <div class="card-body">
+                            <h4 class="mb-5 d-flex align-items-center">
+                                <span class="d-inline-block lh-sm me-1"
+                                      data-feather="link"
+                                      style="height:16px;
+                                             width:16px"></span> {{ _("Upcoming Events") }}
+                            </h4>
+                            <div class="row g-3">
+                                <div class="col-12 overflow-auto" style="max-height: 200px;">
+                                    <ul class="list-group list-group-flush">
+                                        {% for event in schedules %}
+                                            <li class="list-group-item d-flex justify-content-between align-items-center">
+                                                <div class="d-flex align-items-center">
+                                                    <span class="badge rounded-pill bg-phoenix-primary text-primary me-2 fs-9">{{ event.scheduled_type|capfirst }}</span>
+                                                    <span class="fs-9">{{ event.purpose }}</span>
+                                                </div>
+                                                <div class="fs-9">{{ event.scheduled_at|naturaltime|capfirst }}</div>
+                                            </li>
+                                        {% empty %}
+                                            <li class="list-group-item text-center fs-9">{{ _("No upcoming events") }}</li>
+                                        {% endfor %}
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <div class="card-body">
+                            <h4 class="mb-5 d-flex align-items-center">
+                                <span class="d-inline-block lh-sm me-1"
+                                      data-feather="link"
+                                      style="height:16px;
+                                             width:16px"></span> {{ _("Related Records") }}
+                            </h4>
+                            <div class="row g-3">
+                                <div class="col-12">
+                                    <div class="mb-4">
+                                        <div class="d-flex flex-wrap justify-content-between mb-2">
+                                            <h5 class="mb-0 text-body-highlight me-2">{{ _("Estimate") }}</h5>
+                                        </div>
+                                        {% if opportunity.estimate %}
+                                            <a class="dropdown-item"
+                                               href="{% url 'estimate_detail' request.dealer.slug opportunity.estimate.pk %}">{{ _("View Quotation") }}</a>
+                                        {% else %}
+                                            <p>{{ _("No Estimate") }}</p>
+                                        {% endif %}
+                                    </div>
+                                    <div class="mb-4">
+                                        <div class="d-flex flex-wrap justify-content-between mb-2">
+                                            <h5 class="mb-0 text-body-highlight me-2">{{ _("Invoice") }}</h5>
+                                        </div>
+                                        {% if opportunity.estimate.invoice %}
+                                            <a class="dropdown-item"
+                                               href="{% url 'invoice_detail' opportunity.estimate.invoice.pk %}">{{ _("View Invoice") }}</a>
+                                        {% else %}
+                                            <p>{{ _("No Invoice") }}</p>
+                                        {% endif %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card mt-3">
+                        <div class="card-body">
+                            <h4 class="mb-5 d-flex align-items-center">
+                                <span class="d-inline-block lh-sm me-1"
+                                      data-feather="clock"
+                                      style="height:16px;
+                                             width:16px"></span> {{ _("System Information") }}
+                            </h4>
+                            <div class="row g-3">
+                                <div class="col-12">
+                                    <div class="mb-4">
+                                        <div class="d-flex flex-wrap justify-content-between mb-2">
+                                            <h5 class="mb-0 text-body-highlight me-2">{{ _("Created ") }}</h5>
+                                        </div>
+                                        {{ opportunity.created|naturalday|capfirst }}
+                                    </div>
+                                    <div class="mb-4">
+                                        <div class="d-flex flex-wrap justify-content-between mb-2">
+                                            <h5 class="mb-0 text-body-highlight me-2">{{ _("Last Updated") }}</h5>
+                                        </div>
+                                    </div>
+                                    {{ opportunity.updated }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-xl-7 col-xxl-8">
+                <div class="card mb-5">
+                    <div class="card-body">
+                        <div class="row g-4 g-xl-1 g-xxl-3 justify-content-between">
+                            <div class="col-sm-auto">
+                                <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center">
+                                    <div class="d-flex bg-primary-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0"
+                                         style="width:32px;
+                                                height:32px">
+                                        <span class="text-primary-dark"
+                                              data-feather="layout"
+                                              style="width:24px;
+                                                     height:24px"></span>
+                                    </div>
+                                    <div>
+                                        <p class="fw-bold mb-1">{{ _("Quotation Amount") }}</p>
+                                        <h4 class="fw-bolder text-nowrap">
+                                            {% if opportunity.estimate %}{{ opportunity.estimate.get_invoiced_amount.invoice_amount_paid__sum }}{% endif %}
+                                        </h4>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-sm-auto">
+                                <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center border-start-sm ps-sm-5 border-translucent">
+                                    <div class="d-flex bg-success-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0"
+                                         style="width:32px;
+                                                height:32px">
+                                        <span class="text-success-dark icon-saudi_riyal"
+                                              style="width:24px;
+                                                     height:24px"></span>
+                                    </div>
+                                    <div>
+                                        <p class="fw-bold mb-1">{{ _("Amount") }}</p>
+                                        <h4 class="fw-bolder text-nowrap">{{ opportunity.amount }}</h4>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-sm-auto">
+                                <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center border-start-sm ps-sm-5 border-translucent">
+                                    <div class="d-flex bg-success-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0"
+                                         style="width:32px;
+                                                height:32px">
+                                        <span class="text-success-dark icon-saudi_riyal"
+                                              style="width:24px;
+                                                     height:24px"></span>
+                                    </div>
+                                    <div>
+                                        <p class="fw-bold mb-1">{{ _("Expected Revenue") }}</p>
+                                        <h4 class="fw-bolder text-nowrap">{{ opportunity.expected_revenue }}</h4>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="px-xl-4 mb-7">
+                    <div class="row mx-0 mx-sm-3 mx-lg-0 px-lg-0">
+                        <div class="col-sm-12 col-xxl-6 border-bottom border-end-xxl border-translucent py-3">
+                            <table class="w-100 table-stats table-stats">
+                                <tr>
+                                    <th></th>
+                                    <th></th>
+                                    <th></th>
+                                </tr>
+                                <tr>
+                                    <td class="py-2">
+                                        <div class="d-inline-flex align-items-center">
+                                            <div class="d-flex bg-success-subtle rounded-circle flex-center me-3"
+                                                 style="width:24px;
+                                                        height:24px">
+                                                <span class="text-success-dark"
+                                                      data-feather="bar-chart-2"
+                                                      style="width:16px;
+                                                             height:16px"></span>
+                                            </div>
+                                            <p class="fw-bold mb-0">Probability (%)</p>
+                                        </div>
+                                    </td>
+                                    <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
+                                    <td class="py-2">
+                                        <p class="ps-6 ps-sm-0 fw-semibold mb-0 mb-0 pb-3 pb-sm-0">{{ opportunity.probability }}  (%)</p>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="py-2">
+                                        <div class="d-flex align-items-center">
+                                            <div class="d-flex bg-success-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0"
+                                                 style="width:32px;
+                                                        height:32px">
+                                                <span class="text-info-dark icon-saudi_riyal"
+                                                      style="width:24px;
+                                                             height:24px"></span>
+                                            </div>
+                                            <p class="fw-bold mb-0">{{ _("Estimated Revenue") }}</p>
+                                        </div>
+                                    </td>
+                                    <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
+                                    <td class="py-2">
+                                        <p class="ps-6 ps-sm-0 fw-semibold mb-0">
+                                            <span class="icon-saudi_riyal"></span>{{ opportunity.expected_revenue }}
+                                        </p>
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                        <div class="col-sm-12 col-xxl-6 border-bottom border-translucent py-3">
+                            <table class="w-100 table-stats">
+                                <tr>
+                                    <th></th>
+                                    <th></th>
+                                    <th></th>
+                                </tr>
+                                <tr>
+                                    <td class="py-2">
+                                        <div class="d-inline-flex align-items-center">
+                                            <div class="d-flex bg-primary-subtle rounded-circle flex-center me-3"
+                                                 style="width:24px;
+                                                        height:24px">
+                                                <span class="text-primary-dark"
+                                                      data-feather="phone"
+                                                      style="width:16px;
+                                                             height:16px"></span>
+                                            </div>
+                                            <p class="fw-bold mb-0">{{ _("Phone Number") }}</p>
+                                        </div>
+                                    </td>
+                                    <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
+                                    <td class="py-2">
+                                        <a class="ps-6 ps-sm-0 fw-semibold mb-0 pb-3 pb-sm-0 text-body"
+                                           href="tel:{{ opportunity.customer.phone_number }}">{{ opportunity.customer.phone_number }}</a>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="py-2">
+                                        <div class="d-flex align-items-center">
+                                            <div class="d-flex bg-warning-subtle rounded-circle flex-center me-3"
+                                                 style="width:24px;
+                                                        height:24px">
+                                                <span class="text-warning-dark"
+                                                      data-feather="mail"
+                                                      style="width:16px;
+                                                             height:16px"></span>
+                                            </div>
+                                            <p class="fw-bold mb-0">{{ _("Email") }}</p>
+                                        </div>
+                                    </td>
+                                    <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
+                                    <td class="py-2">
+                                        <a class="ps-6 ps-sm-0 fw-semibold mb-0 text-body"
+                                           href="mailto:{{ opportunity.customer.email }}">{{ opportunity.customer.email }}</a>
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                        <div class="col-sm-12 col-xxl-6 border-end-xxl border-bottom border-bottom-xxl-0 py-3 border-translucent">
+                            <table class="w-100 table-stats">
+                                <tr>
+                                    <th></th>
+                                    <th></th>
+                                    <th></th>
+                                </tr>
+                                <tr>
+                                    <td class="py-2">
+                                        <div class="d-inline-flex align-items-center">
+                                            <div class="d-flex bg-success-subtle rounded-circle flex-center me-3"
+                                                 style="width:24px;
+                                                        height:24px">
+                                                <span class="text-success-dark"
+                                                      data-feather="users"
+                                                      style="width:16px;
+                                                             height:16px"></span>
+                                            </div>
+                                            <p class="fw-bold mb-0">{{ _("Contact Name") }}</p>
+                                        </div>
+                                    </td>
+                                    <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
+                                    <td class="py-2">
+                                        {% if opportunity.customer %}
+                                            <div class="ps-6 ps-sm-0 fw-semibold mb-0 pb-3 pb-sm-0">{{ opportunity.customer.full_name }}</div>
+                                        {% else %}
+                                            <div class="ps-6 ps-sm-0 fw-semibold mb-0 pb-3 pb-sm-0">{{ opportunity.organization }}</div>
+                                        {% endif %}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="py-2">
+                                        <div class="d-flex align-items-center">
+                                            <div class="d-flex bg-info-subtle rounded-circle flex-center me-3"
+                                                 style="width:24px;
+                                                        height:24px">
+                                                <span class="text-info-dark"
+                                                      data-feather="edit"
+                                                      style="width:16px;
+                                                             height:16px"></span>
+                                            </div>
+                                            <p class="fw-bold mb-0">{{ _("Assigned To") }}</p>
+                                        </div>
+                                    </td>
+                                    <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
+                                    <td class="py-2">
+                                        {% if request.user.email == opportunity.staff.email %}
+                                            <div class="ps-6 ps-sm-0 fw-semibold mb-0">You</div>
+                                        {% else %}
+                                            <div class="ps-6 ps-sm-0 fw-semibold mb-0">{{ opportunity.staff.get_local_name }}</div>
+                                        {% endif %}
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                        <div class="col-sm-12 col-xxl-6 py-3">
+                            <table class="w-100 table-stats">
+                                <tr>
+                                    <th></th>
+                                    <th></th>
+                                    <th></th>
+                                </tr>
+                                <tr>
+                                    <td class="py-2">
+                                        <div class="d-inline-flex align-items-center">
+                                            <div class="d-flex bg-info-subtle rounded-circle flex-center me-3"
+                                                 style="width:24px;
+                                                        height:24px">
+                                                <span class="text-info-dark"
+                                                      data-feather="clock"
+                                                      style="width:16px;
+                                                             height:16px"></span>
+                                            </div>
+                                            <p class="fw-bold mb-0">{{ _("Create Date") }}</p>
+                                        </div>
+                                    </td>
+                                    <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
+                                    <td class="py-2">
+                                        <div class="ps-6 ps-sm-0 fw-semibold mb-0 pb-3 pb-sm-0">{{ opportunity.created|naturaltime|capfirst }}</div>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="py-2">
+                                        <div class="d-flex align-items-center">
+                                            <div class="d-flex bg-warning-subtle rounded-circle flex-center me-3"
+                                                 style="width:24px;
+                                                        height:24px">
+                                                <span class="text-warning-dark"
+                                                      data-feather="clock"
+                                                      style="width:16px;
+                                                             height:16px"></span>
+                                            </div>
+                                            <p class="fw-bold mb-0">{{ _("Expected Closing Date") }}</p>
+                                        </div>
+                                    </td>
+                                    <td class="py-2 d-none d-sm-block pe-sm-2">:</td>
+                                    <td class="py-2">
+                                        <div class="ps-6 ps-sm-0 fw-semibold mb-0">{{ opportunity.expected_close_date|date }}</div>
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+                <ul class="nav nav-underline fs-9 deal-details scrollbar flex-nowrap w-100 pb-1 mb-6"
+                    id="myTab"
+                    role="tablist"
+                    style="overflow-y: hidden">
+                    <li class="nav-item text-nowrap me-2" role="presentation">
+                        <a class="nav-link active"
+                           id="tasks-tab"
+                           data-bs-toggle="tab"
+                           href="#tab-tasks"
+                           role="tab"
+                           aria-controls="tab-tasks"
+                           aria-selected="true"> <span class="fa-solid fa-envelope me-2 tab-icon-color fs-8"></span>{{ _("Tasks") }}</a>
+                    </li>
+                    <li class="nav-item text-nowrap me-2" role="presentation">
+                        <a class="nav-link"
+                           id="notes-tab"
+                           data-bs-toggle="tab"
+                           href="#tab-notes"
+                           role="tab"
+                           aria-controls="tab-notes"
+                           aria-selected="false"
+                           tabindex="-1"> <span class="fa-solid fa-clipboard me-2 tab-icon-color"></span>{{ _("Notes") }}</a>
+                    </li>
+                    {% comment %} <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="meeting-tab" data-bs-toggle="tab" href="#tab-meeting" role="tab" aria-controls="tab-meeting" aria-selected="true"> <span class="fa-solid fa-video me-2 tab-icon-color"></span>{{ _("Meetings") }}</a></li> {% endcomment %}
+                    {% comment %} <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="task-tab" data-bs-toggle="tab" href="#tab-task" role="tab" aria-controls="tab-task" aria-selected="true"> <span class="fa-solid fa-square-check me-2 tab-icon-color"></span>Task</a></li> {% endcomment %}
+                    {% comment %} <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="call-tab" data-bs-toggle="tab" href="#tab-call" role="tab" aria-controls="tab-call" aria-selected="true"> <span class="fa-solid fa-phone me-2 tab-icon-color"></span>{{ _("Calls") }}</a></li> {% endcomment %}
+                    <li class="nav-item text-nowrap me-2" role="presentation">
+                        <a class="nav-link"
+                           id="emails-tab"
+                           data-bs-toggle="tab"
+                           href="#tab-emails"
+                           role="tab"
+                           aria-controls="tab-emails"
+                           aria-selected="true"> <span class="fa-solid fa-envelope me-2 tab-icon-color"></span>{{ _("Emails") }} </a>
+                    </li>
+                    <li class="nav-item text-nowrap me-2" role="presentation">
+                        <a class="nav-link"
+                           id="activity-tab"
+                           data-bs-toggle="tab"
+                           href="#tab-activity"
+                           role="tab"
+                           aria-controls="tab-activity"
+                           aria-selected="false"
+                           tabindex="-1"> <span class="fa-solid fa-chart-line me-2 tab-icon-color"></span>{{ _("Activity") }}</a>
+                    </li>
+                    {% comment %} <li class="nav-item text-nowrap me-2" role="presentation"><a class="nav-link" id="attachments-tab" data-bs-toggle="tab" href="#tab-attachments" role="tab" aria-controls="tab-attachments" aria-selected="true"> <span class="fa-solid fa-paperclip me-2 tab-icon-color"></span>Attachments</a></li> {% endcomment %}
+                </ul>
+                <div class="tab-content" id="myTabContent">
+                    <div class="tab-pane fade active show"
+                         id="tab-tasks"
+                         role="tabpanel"
+                         aria-labelledby="tasks-tab">
+                        <div class="mb-1 d-flex justify-content-between align-items-center">
+                            <h3 class="mb-0" id="scrollspyEmails">{{ _("Tasks") }}</h3>
+                            {% if perms.inventory.change_opportunity %}
+                                <button class="btn btn-phoenix-primary btn-sm"
+                                        type="button"
+                                        data-bs-toggle="modal"
+                                        data-bs-target="#scheduleModal">
+                                    <span class="fas fa-plus me-1"></span>{{ _("Add Task") }}
+                                </button>
+                            {% endif %}
+                        </div>
+                        <div>
+                            <div class="border-top border-bottom border-translucent"
+                                 id="allEmailsTable"
+                                 data-list='{"valueNames":["subject","sent","date","source","status"],"page":7,"pagination":true}'>
+                                <div class="table-responsive scrollbar mx-n1 px-1">
+                                    <table class="table fs-9 mb-0">
+                                        <thead>
+                                            <tr>
+                                                <th class="white-space-nowrap fs-9 align-middle ps-0" style="width:26px;">
+                                                    <div class="form-check mb-0 fs-8">
+                                                        <input class="form-check-input"
+                                                               type="checkbox"
+                                                               data-bulk-select='{"body":"all-email-table-body"}' />
+                                                    </div>
+                                                </th>
+                                                <th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase"
+                                                    scope="col"
+                                                    data-sort="subject"
+                                                    style="width:31%;
+                                                           min-width:350px">Title</th>
+                                                <th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase"
+                                                    scope="col"
+                                                    data-sort="subject"
+                                                    style="width:31%;
+                                                           min-width:350px">Notes</th>
+                                                <th class="sort align-middle pe-3 text-uppercase"
+                                                    scope="col"
+                                                    data-sort="sent"
+                                                    style="width:15%;
+                                                           min-width:130px">Assigned to</th>
+                                                <th class="sort align-middle text-start text-uppercase"
+                                                    scope="col"
+                                                    data-sort="date"
+                                                    style="min-width:165px">Due Date</th>
+                                                <th class="sort align-middle text-start text-uppercase"
+                                                    scope="col"
+                                                    data-sort="date"
+                                                    style="min-width:165px">Completed</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody class="list" id="all-tasks-table-body">
+                                            {% for task in schedules %}
+                                                {% include "partials/task.html" %}
+                                            {% endfor %}
+                                        </tbody>
+                                    </table>
+                                </div>
+                                <div class="row align-items-center justify-content-between py-2 pe-0 fs-9">
+                                    <div class="col-auto d-flex">
+                                        <p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body"
+                                           data-list-info="data-list-info"></p>
+                                        <a class="fw-semibold" href="" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a><a class="fw-semibold d-none" href="" data-list-view="less">View Less<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
+                                    </div>
+                                    <div class="col-auto d-flex">
+                                        <button class="page-link" data-list-pagination="prev">
+                                            <span class="fas fa-chevron-left"></span>
+                                        </button>
+                                        <ul class="mb-0 pagination">
+                                        </ul>
+                                        <button class="page-link pe-0" data-list-pagination="next">
+                                            <span class="fas fa-chevron-right"></span>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="tab-pane fade"
+                         id="tab-notes"
+                         role="tabpanel"
+                         aria-labelledby="notes-tab">
+                        <div class="mb-1 d-flex align-items-center justify-content-between">
+                            <h3 class="mb-4" id="scrollspyNotes">{{ _("Notes") }}</h3>
+                            {% if perms.inventory.change_lead %}
+                                <button class="btn btn-phoenix-primary btn-sm"
+                                        type="button"
+                                        onclick="reset_form()"
+                                        data-bs-toggle="modal"
+                                        data-bs-target="#noteModal">
+                                    <span class="fas fa-plus me-1"></span>{{ _("Add Note") }}
+                                </button>
+                            {% endif %}
+                        </div>
+                        <div class="border-top border-bottom border-translucent"
+                             id="leadDetailsTable">
+                            <div class="table-responsive scrollbar mx-n1 px-1">
+                                <table class="table fs-9 mb-0">
+                                    <thead>
+                                        <tr>
+                                            <th class="align-middle pe-6 text-uppercase text-start"
+                                                scope="col"
+                                                style="width:40%">{{ _("Note") }}</th>
+                                            <th class="align-middle text-start text-uppercase white-space-nowrap"
+                                                scope="col"
+                                                style="width:40%">{{ _("Created On") }}</th>
+                                            <th class="align-middle text-start text-uppercase white-space-nowrap"
+                                                scope="col"
+                                                style="width:40%">{{ _("Last Updated") }}</th>
+                                            <th class="align-middle pe-0 text-end" scope="col" style="width:10%;"></th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {% for note in opportunity.get_notes %}
+                                            <tr class="hover-actions-trigger btn-reveal-trigger position-static">
+                                                <td class="align-middle  text-start fw-bold text-body-tertiary ps-1">{{ note.note }}</td>
+                                                <td class="align-middle text-body-tertiary text-start white-space-nowrap">{{ note.created|naturalday|capfirst }}</td>
+                                                <td class="align-middle text-body-tertiary text-start white-space-nowrap">{{ note.updated|naturalday|capfirst }}</td>
+                                                <td class="align-middle text-end white-space-nowrap pe-0 action py-2">
+                                                    {% if note.created_by == request.user %}
+                                                        <a id="updateBtn"
+                                                           href="#"
+                                                           onclick="updateNote(this)"
+                                                           class="btn btn-sm btn-phoenix-primary me-2"
+                                                           data-pk="{{ note.pk }}"
+                                                           data-note="{{ note.note|escapejs }}"
+                                                           data-url="{% url 'update_note' request.dealer.slug note.pk %}"
+                                                           data-bs-toggle="modal"
+                                                           data-bs-target="#noteModal"
+                                                           data-note-title="{{ _("Update") }}<i class='fas fa-pen-square text-primary ms-2'></i>">
+                                                            {{ _("Update") }}
+                                                        </a>
+                                                        <button class="btn btn-phoenix-danger btn-sm delete-btn"
+                                                                data-url="{% url 'delete_note_to_lead' request.dealer.slug note.pk %}"
+                                                                data-message="Are you sure you want to delete this note?"
+                                                                data-bs-toggle="modal"
+                                                                data-bs-target="#deleteModal">
+                                                            <i class="fas fa-trash"></i>
+                                                        </button>
+                                                    {% endif %}
+                                                </td>
+                                            </tr>
+                                        {% endfor %}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+                    {% comment %} <div class="tab-pane fade" id="tab-notes" role="tabpanel" aria-labelledby="notes-tab">
         <h2 class="mb-4">Notes</h2>
         {%if perms.inventory.change_opportunity%}
         <form action="{% url 'add_note_to_opportunity' request.dealer.slug opportunity.slug %}" method="post">
           {% csrf_token %}
           <textarea class="form-control mb-3" id="notes" rows="4" name="notes" required> </textarea>
-          <button type="submit" class="btn btn-phoenix-primary mb-3">Add Note</button>
-        </form>
-        {% endif %}
-        <div class="row gy-4 note-list">
-          <div class="col-12 col-xl-auto flex-1">
-            {% for note in opportunity.get_notes %}
-              <div class="border-2 border-dashed mb-4 pb-4 border-bottom border-translucent">
-                <p class="mb-1 text-body-highlight">{{ note.note }}</p>
-                <div class="d-flex">
-                  <div class="fs-9 text-body-tertiary text-opacity-85"><span class="fa-solid fa-clock me-2"></span><span class="fw-semibold me-1">{{note.created|naturaltime|capfirst}}</span></div>
+                          <button type="submit" class="btn btn-phoenix-primary mb-3">Add Note</button>
+                    </form>
+                    {% endif %}
+                    <div class="row gy-4 note-list">
+                      <div class="col-12 col-xl-auto flex-1">
+                        {% for note in opportunity.get_notes %}
+                          <div class="border-2 border-dashed mb-4 pb-4 border-bottom border-translucent">
+                        <p class="mb-1 text-body-highlight">{{ note.note }}</p>
+                        <div class="d-flex">
+                      <div class="fs-9 text-body-tertiary text-opacity-85"><span class="fa-solid fa-clock me-2"></span><span class="fw-semibold me-1">{{note.created|naturaltime|capfirst}}</span></div>
                   <p class="fs-9 mb-0 text-body-tertiary text-opacity-85">by<a class="ms-1 fw-semibold" href="#!">{{note.created_by}}</a></p>
                 </div>
               </div>
             {% endfor %}
           </div>
         </div>
-      </div> {% endcomment %}
-      {% comment %} <div class="tab-pane fade" id="tab-meeting" role="tabpanel" aria-labelledby="meeting-tab">
+</div> {% endcomment %}
+{% comment %} <div class="tab-pane fade" id="tab-meeting" role="tabpanel" aria-labelledby="meeting-tab">
         <h2 class="mb-4">Meeting</h2>
         <div class="row align-items-center g-2 flex-wrap justify-content-start mb-3">
           <div class="col-12 col-sm-auto">
@@ -506,9 +736,8 @@
             </div>
           {% endfor %}
         </div>
-      </div> {% endcomment %}
-
-      {% comment %} <div class="tab-pane fade" id="tab-call" role="tabpanel" aria-labelledby="call-tab">
+</div> {% endcomment %}
+{% comment %} <div class="tab-pane fade" id="tab-call" role="tabpanel" aria-labelledby="call-tab">
         <div class="row align-items-center gx-4 gy-3 flex-wrap mb-3">
           <div class="col-auto d-flex flex-1">
             <h2 class="mb-0">Call</h2>
@@ -521,14 +750,28 @@
 
         </div>
           <pre>{{opportunity.get_all_notes}}</pre>
-        <div class="border-top border-bottom border-translucent" id="leadDetailsTable" data-list='{"valueNames":["name","description","create_date","create_by","last_activity"],"page":5,"pagination":true}'>
+        <div class="border-top border-bottom border-translucent"
+             id="leadDetailsTable"
+             data-list='{"valueNames":["name","description","create_date","create_by","last_activity"],"page":5,"pagination":true}'>
           <div class="table-responsive scrollbar mx-n1 px-1">
             <table class="table fs-9 mb-0">
               <thead>
                 <tr>
-                  <th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase" scope="col" data-sort="name" style="width:20%; min-width:100px">Purpose</th>
-                  <th class="sort align-middle pe-6 text-uppercase" scope="col" data-sort="description" style="width:20%; max-width:60px">Scheduled By</th>
-                  <th class="sort align-middle text-start text-uppercase" scope="col" data-sort="create_date" style="width:20%; min-width:115px">Created at</th>
+                  <th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase"
+                      scope="col"
+                      data-sort="name"
+                      style="width:20%;
+                             min-width:100px">Purpose</th>
+                  <th class="sort align-middle pe-6 text-uppercase"
+                      scope="col"
+                      data-sort="description"
+                      style="width:20%;
+                             max-width:60px">Scheduled By</th>
+                  <th class="sort align-middle text-start text-uppercase"
+                      scope="col"
+                      data-sort="create_date"
+                      style="width:20%;
+                             min-width:115px">Created at</th>
                 </tr>
               </thead>
               <tbody class="list" id="lead-details-table-body">
@@ -539,7 +782,13 @@
                     <td class="create_by align-middle white-space-nowrap fw-semibold text-body-highlight">{{call.created_at|naturaltime|capfirst}}</td>
                     <td class="align-middle text-end white-space-nowrap pe-0 action py-2">
                       <div class="btn-reveal-trigger position-static">
-                        <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
+                        <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal"
+                                type="button"
+                                data-bs-toggle="dropdown"
+                                data-boundary="window"
+                                aria-haspopup="true"
+                                aria-expanded="false"
+                                data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
                         <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                           <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
                         </div>
@@ -552,7 +801,8 @@
           </div>
           <div class="row align-items-center justify-content-between py-2 pe-0 fs-9">
             <div class="col-auto d-flex">
-              <p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body" data-list-info="data-list-info"></p><a class="fw-semibold" href="#!" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a><a class="fw-semibold d-none" href="#!" data-list-view="less">View Less<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
+              <p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body"
+                 data-list-info="data-list-info"></p><a class="fw-semibold" href="#!" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a><a class="fw-semibold d-none" href="#!" data-list-view="less">View Less<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
             </div>
             <div class="col-auto d-flex">
               <button class="page-link" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
@@ -561,198 +811,302 @@
             </div>
           </div>
         </div>
-      </div> {% endcomment %}
-      <div class="tab-pane fade" id="tab-emails" role="tabpanel" aria-labelledby="emails-tab">
-        <h2 class="mb-4">Emails</h2>
-        {% if perms.inventory.change_opportunity%}
+</div> {% endcomment %}
+<div class="tab-pane fade"
+     id="tab-emails"
+     role="tabpanel"
+     aria-labelledby="emails-tab">
+    <h2 class="mb-4">Emails</h2>
+    {% if perms.inventory.change_opportunity %}
         <div class="d-flex justify-content-end">
-          <a href="{% url 'send_lead_email' request.dealer.slug opportunity.lead.slug %}">
-            <button type="button" class="btn btn-sm btn-phoenix-primary">
-              <span class="fas fa-plus me-1"></span>
-              {% trans 'Send Email' %}
-            </button>
-          </a>
+            <a href="{% url 'send_lead_email' request.dealer.slug opportunity.lead.slug %}">
+                <button type="button" class="btn btn-sm btn-phoenix-primary">
+                    <span class="fas fa-plus me-1"></span>
+                    {% trans 'Send Email' %}
+                </button>
+            </a>
         </div>
-        {% endif %}
-        <div>
-          <div class="scrollbar">
-            <ul class="nav nav-underline fs-9 flex-nowrap mb-1" id="emailTab" role="tablist">
-              <li class="nav-item me-3"><a class="nav-link text-nowrap border-0 active" id="mail-tab" data-bs-toggle="tab" href="#tab-mail" aria-controls="mail-tab" role="tab" aria-selected="true">Mails ({{opportunity.lead.get_emails|length}})<span class="text-body-tertiary fw-normal"></span></a></li>
+    {% endif %}
+    <div>
+        <div class="scrollbar">
+            <ul class="nav nav-underline fs-9 flex-nowrap mb-1"
+                id="emailTab"
+                role="tablist">
+                <li class="nav-item me-3">
+                    <a class="nav-link text-nowrap border-0 active"
+                       id="mail-tab"
+                       data-bs-toggle="tab"
+                       href="#tab-mail"
+                       aria-controls="mail-tab"
+                       role="tab"
+                       aria-selected="true">Mails ({{ opportunity.lead.get_emails|length }})<span class="text-body-tertiary fw-normal"></span></a>
+                </li>
             </ul>
-          </div>
-          <div class="search-box w-100 mb-3">
+        </div>
+        <div class="search-box w-100 mb-3">
             <form class="position-relative">
-              <input class="form-control search-input search" type="search" placeholder="Search..." aria-label="Search" />
-              <span class="fas fa-search search-box-icon"></span>
-            </form>
-          </div>
-          <div class="tab-content" id="profileTabContent">
-            <div class="tab-pane fade show active" id="tab-mail" role="tabpanel" aria-labelledby="mail-tab">
-              <div class="border-top border-bottom border-translucent" id="allEmailsTable" data-list='{"valueNames":["subject","sent","date","source","status"],"page":7,"pagination":true}'>
-                <div class="table-responsive scrollbar mx-n1 px-1">
-                  <table class="table fs-9 mb-0">
-                    <thead>
-                      <tr>
-                        <th class="white-space-nowrap fs-9 align-middle ps-0" style="width:26px;">
-                          <div class="form-check mb-0 fs-8">
-                            <input class="form-check-input" type="checkbox" data-bulk-select='{"body":"all-email-table-body"}' />
-                          </div>
-                        </th>
-                        <th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase" scope="col" data-sort="subject" style="width:31%; min-width:350px">Subject</th>
-                        <th class="sort align-middle pe-3 text-uppercase" scope="col" data-sort="sent" style="width:15%; min-width:130px">Sent by</th>
-                        <th class="sort align-middle text-start text-uppercase" scope="col" data-sort="date" style="min-width:165px">Date</th>
-                        <th class="sort align-middle pe-0 text-uppercase" scope="col" style="width:15%; min-width:100px">Action</th>
-                        <th class="sort align-middle text-end text-uppercase" scope="col" data-sort="status" style="width:15%; min-width:100px">Status</th>
-                      </tr>
-                    </thead>
-                    <tbody class="list" id="all-email-table-body">
-                      {% for email in opportunity.lead.get_emails %}
-                        <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                          <td class="fs-9 align-middle px-0 py-3">
-                            <div class="form-check mb-0 fs-8">
-                              <input class="form-check-input" type="checkbox" data-bulk-select-row='{"mail":{"subject":"Quary about purchased soccer socks","email":"jackson@mail.com"},"active":true,"sent":"Jackson Pollock","date":"Dec 29, 2021 10:23 am","source":"Call","type_status":{"label":"sent","type":"badge-phoenix-success"}}' />
-                            </div>
-                          </td>
-                          <td class="subject order align-middle white-space-nowrap py-2 ps-0"><a class="fw-semibold text-primary" href="#!">{{email.subject}}</a>
-                            <div class="fs-10 d-block">{{email.to_email}}</div>
-                          </td>
-                          <td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">{{email.from_email}}</td>
-                          <td class="date align-middle white-space-nowrap text-body py-2">{{email.created}}</td>
-                          <td class="align-middle white-space-nowrap ps-3"><a class="text-body" href="#!"><span class="fa-solid fa-phone text-primary me-2"></span>Call</a></td>
-                          <td class="status align-middle fw-semibold text-end py-2"><span class="badge badge-phoenix fs-10 badge-phoenix-success">sent</span></td>
-                        </tr>
-                      {% endfor %}
-                    </tbody>
-                  </table>
-                </div>
-                <div class="row align-items-center justify-content-between py-2 pe-0 fs-9">
-                  <div class="col-auto d-flex">
-                    <p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body" data-list-info="data-list-info"></p><a class="fw-semibold" href="#!" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a><a class="fw-semibold d-none" href="#!" data-list-view="less">View Less<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
-                  </div>
-                  <div class="col-auto d-flex">
-                    <button class="page-link" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
-                    <ul class="mb-0 pagination"></ul>
-                    <button class="page-link pe-0" data-list-pagination="next"><span class="fas fa-chevron-right"></span></button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="tab-pane fade" id="tab-attachments" role="tabpanel" aria-labelledby="attachments-tab">
-        <h2 class="mb-3">Attachments</h2>
-        <div class="border-top border-dashed pt-3 pb-4">
-          <div class="d-flex flex-between-center">
-            <div class="d-flex mb-1"><span class="fa-solid fa-image me-2 text-body-tertiary fs-9"></span>
-              <p class="text-body-highlight mb-0 lh-1">Silly_sight_1.png</p>
-            </div>
-            <div class="btn-reveal-trigger">
-              <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h"></span></button>
-              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a><a class="dropdown-item" href="#!">Download</a><a class="dropdown-item" href="#!">Report abuse</a></div>
-            </div>
-          </div>
-          <p class="fs-9 text-body-tertiary mb-3"><span>768kB</span><span class="text-body-quaternary mx-1">| </span><a href="#!">Shantinan Mekalan </a><span class="text-body-quaternary mx-1">| </span><span class="text-nowrap">21st Dec, 12:56 PM</span></p><img class="rounded-2" src="{% static 'images/generic/40.png' %}" alt="" />
-        </div>
-        <div class="border-top border-dashed py-4">
-          <div class="d-flex flex-between-center">
-            <div>
-              <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-image me-2 fs-9 text-body-tertiary"></span>
-                <p class="text-body-highlight mb-0 lh-1">All_images.zip</p>
-              </div>
-              <p class="fs-9 text-body-tertiary mb-0"><span>12.8 mB</span><span class="text-body-quaternary mx-1">|</span><a href="#!">Yves Tanguy </a><span class="text-body-quaternary mx-1">| </span><span class="text-nowrap">19th Dec, 08:56 PM</span></p>
-            </div>
-            <div class="btn-reveal-trigger">
-              <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h"></span></button>
-              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a><a class="dropdown-item" href="#!">Download</a><a class="dropdown-item" href="#!">Report abuse</a></div>
-            </div>
-          </div>
-        </div>
-        <div class="border-top border-dashed py-4">
-          <div class="d-flex flex-between-center">
-            <div>
-              <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-file-lines me-2 fs-9 text-body-tertiary"></span>
-                <p class="text-body-highlight mb-0 lh-1">Project.txt</p>
-              </div>
-              <p class="fs-9 text-body-tertiary mb-0"><span>123 kB</span><span class="text-body-quaternary mx-1">| </span><a href="#!">Shantinan Mekalan </a><span class="text-body-quaternary mx-1">| </span><span class="text-nowrap">12th Dec, 12:56 PM</span></p>
-            </div>
-            <div class="btn-reveal-trigger">
-              <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h"></span></button>
-              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a><a class="dropdown-item" href="#!">Download</a><a class="dropdown-item" href="#!">Report abuse </a></div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="tab-pane fade" id="tab-activity" role="tabpanel" aria-labelledby="activity-tab">
-        <h2 class="mb-4">Activity</h2>
-        <div class="row align-items-center g-3 justify-content-between justify-content-start">
-          <div class="col-12 col-sm-auto">
-            <div class="search-box mb-2 mb-sm-0">
-              <form class="position-relative">
-                <input class="form-control search-input search" type="search" placeholder="Search Activity" aria-label="Search" />
+                <input class="form-control search-input search"
+                       type="search"
+                       placeholder="Search..."
+                       aria-label="Search" />
                 <span class="fas fa-search search-box-icon"></span>
-
-              </form>
-            </div>
-          </div>
-          {%if perms.inventory.change_opportunity%}
-          <div class="col-auto">
-
-          </div>
-          {% endif %}
+            </form>
         </div>
-        {% for activity in opportunity.get_activities %}
-          <div class="border-bottom border-translucent py-4">
-            <div class="d-flex">
-              <div class="d-flex bg-primary-subtle rounded-circle flex-center me-3 bg-primary-subtle" style="width:25px; height:25px">
-                {% if activity.activity_type == "call" %}
-                  <span class="fa-solid fa-phone text-warning fs-8"></span>
-                {% elif activity.activity_type == "email" %}
-                  <span class="fa-solid fa-envelope text-info-light fs-8"></span>
-                  {% elif activity.activity_type == "note" %}
-                <span class="fa-regular fa-sticky-note text-info-light fs-8"></span>
-            {% elif activity.activity_type == "task" %}
-                <span class="fa-solid fa-list-check text-success fs-8"></span>
-                {% elif activity.activity_type == "meeting" %}
-                  <span class="fa-solid fa-users text-danger fs-8"></span>
-                {% elif activity.activity_type == "whatsapp" %}
-                  <span class="fab fa-whatsapp text-success-dark fs-7"></span>
-                {% endif %}
-              </div>
-              <div class="flex-1">
-                <div class="d-flex justify-content-between flex-column flex-xl-row mb-2 mb-sm-0">
-                  <div class="flex-1 me-2">
-                    <h5 class="text-body-highlight lh-sm"></h5>
-                    <p class="fs-9 mb-0">{{activity.notes}}</p>
-                  </div>
+        <div class="tab-content" id="profileTabContent">
+            <div class="tab-pane fade show active"
+                 id="tab-mail"
+                 role="tabpanel"
+                 aria-labelledby="mail-tab">
+                <div class="border-top border-bottom border-translucent"
+                     id="allEmailsTable"
+                     data-list='{"valueNames":["subject","sent","date","source","status"],"page":7,"pagination":true}'>
+                    <div class="table-responsive scrollbar mx-n1 px-1">
+                        <table class="table fs-9 mb-0">
+                            <thead>
+                                <tr>
+                                    <th class="white-space-nowrap fs-9 align-middle ps-0" style="width:26px;">
+                                        <div class="form-check mb-0 fs-8">
+                                            <input class="form-check-input"
+                                                   type="checkbox"
+                                                   data-bulk-select='{"body":"all-email-table-body"}' />
+                                        </div>
+                                    </th>
+                                    <th class="sort white-space-nowrap align-middle pe-3 ps-0 text-uppercase"
+                                        scope="col"
+                                        data-sort="subject"
+                                        style="width:31%;
+                                               min-width:350px">Subject</th>
+                                    <th class="sort align-middle pe-3 text-uppercase"
+                                        scope="col"
+                                        data-sort="sent"
+                                        style="width:15%;
+                                               min-width:130px">Sent by</th>
+                                    <th class="sort align-middle text-start text-uppercase"
+                                        scope="col"
+                                        data-sort="date"
+                                        style="min-width:165px">Date</th>
+                                    <th class="sort align-middle pe-0 text-uppercase"
+                                        scope="col"
+                                        style="width:15%;
+                                               min-width:100px">Action</th>
+                                    <th class="sort align-middle text-end text-uppercase"
+                                        scope="col"
+                                        data-sort="status"
+                                        style="width:15%;
+                                               min-width:100px">Status</th>
+                                </tr>
+                            </thead>
+                            <tbody class="list" id="all-email-table-body">
+                                {% for email in opportunity.lead.get_emails %}
+                                    <tr class="hover-actions-trigger btn-reveal-trigger position-static">
+                                        <td class="fs-9 align-middle px-0 py-3">
+                                            <div class="form-check mb-0 fs-8">
+                                                <input class="form-check-input"
+                                                       type="checkbox"
+                                                       data-bulk-select-row='{"mail":{"subject":"Quary about purchased soccer socks","email":"jackson@mail.com"},"active":true,"sent":"Jackson Pollock","date":"Dec 29, 2021 10:23 am","source":"Call","type_status":{"label":"sent","type":"badge-phoenix-success"}}' />
+                                            </div>
+                                        </td>
+                                        <td class="subject order align-middle white-space-nowrap py-2 ps-0">
+                                            <a class="fw-semibold text-primary" href="#!">{{ email.subject }}</a>
+                                            <div class="fs-10 d-block">{{ email.to_email }}</div>
+                                        </td>
+                                        <td class="sent align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2">{{ email.from_email }}</td>
+                                        <td class="date align-middle white-space-nowrap text-body py-2">{{ email.created }}</td>
+                                        <td class="align-middle white-space-nowrap ps-3">
+                                            <a class="text-body" href="#!"><span class="fa-solid fa-phone text-primary me-2"></span>Call</a>
+                                        </td>
+                                        <td class="status align-middle fw-semibold text-end py-2">
+                                            <span class="badge badge-phoenix fs-10 badge-phoenix-success">sent</span>
+                                        </td>
+                                    </tr>
+                                {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="row align-items-center justify-content-between py-2 pe-0 fs-9">
+                        <div class="col-auto d-flex">
+                            <p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body"
+                               data-list-info="data-list-info"></p>
+                            <a class="fw-semibold" href="#!" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a><a class="fw-semibold d-none" href="#!" data-list-view="less">View Less<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
+                        </div>
+                        <div class="col-auto d-flex">
+                            <button class="page-link" data-list-pagination="prev">
+                                <span class="fas fa-chevron-left"></span>
+                            </button>
+                            <ul class="mb-0 pagination">
+                            </ul>
+                            <button class="page-link pe-0" data-list-pagination="next">
+                                <span class="fas fa-chevron-right"></span>
+                            </button>
+                        </div>
+                    </div>
                 </div>
-                <div class="d-flex justify-content-between flex-column flex-xl-row mb-2 mb-sm-0">
-                  <div class="flex-1 me-2">
-                    <h5 class="text-body-highlight lh-sm"></h5>
-                    {% if request.user.email == activity.created_by %}
-                      <p class="fs-9 mb-0">by <a class="ms-1" href="#!">You</a></p>
-                    {% else %}
-                      <p class="fs-9 mb-0">by<a class="ms-1" href="#!">{{activity.created_by}}</a></p>
-                    {% endif %}
-                  </div>
-                  <div class="fs-9"><span class="fa-regular fa-calendar-days text-primary me-2"></span><span class="fw-semibold">{{activity.created|naturalday|capfirst}}</span></div>
-                </div>
-                <p class="fs-9 mb-0"></p>
-              </div>
             </div>
-          </div>
-        {% endfor %}
-      </div>
+        </div>
     </div>
-  </div>
-  </div>
-
-
+</div>
+<div class="tab-pane fade"
+     id="tab-attachments"
+     role="tabpanel"
+     aria-labelledby="attachments-tab">
+    <h2 class="mb-3">Attachments</h2>
+    <div class="border-top border-dashed pt-3 pb-4">
+        <div class="d-flex flex-between-center">
+            <div class="d-flex mb-1">
+                <span class="fa-solid fa-image me-2 text-body-tertiary fs-9"></span>
+                <p class="text-body-highlight mb-0 lh-1">Silly_sight_1.png</p>
+            </div>
+            <div class="btn-reveal-trigger">
+                <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal"
+                        type="button"
+                        data-bs-toggle="dropdown"
+                        data-boundary="window"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        data-bs-reference="parent">
+                    <span class="fas fa-ellipsis-h"></span>
+                </button>
+                <div class="dropdown-menu dropdown-menu-end py-2">
+                    <a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a><a class="dropdown-item" href="#!">Download</a><a class="dropdown-item" href="#!">Report abuse</a>
+                </div>
+            </div>
+        </div>
+        <p class="fs-9 text-body-tertiary mb-3">
+            <span>768kB</span><span class="text-body-quaternary mx-1">|</span><a href="#!">Shantinan Mekalan</a><span class="text-body-quaternary mx-1">|</span><span class="text-nowrap">21st Dec, 12:56 PM</span>
+        </p>
+        <img class="rounded-2" src="{% static 'images/generic/40.png' %}" alt="" />
+    </div>
+    <div class="border-top border-dashed py-4">
+        <div class="d-flex flex-between-center">
+            <div>
+                <div class="d-flex align-items-center mb-1">
+                    <span class="fa-solid fa-image me-2 fs-9 text-body-tertiary"></span>
+                    <p class="text-body-highlight mb-0 lh-1">All_images.zip</p>
+                </div>
+                <p class="fs-9 text-body-tertiary mb-0">
+                    <span>12.8 mB</span><span class="text-body-quaternary mx-1">|</span><a href="#!">Yves Tanguy</a><span class="text-body-quaternary mx-1">|</span><span class="text-nowrap">19th Dec, 08:56 PM</span>
+                </p>
+            </div>
+            <div class="btn-reveal-trigger">
+                <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal"
+                        type="button"
+                        data-bs-toggle="dropdown"
+                        data-boundary="window"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        data-bs-reference="parent">
+                    <span class="fas fa-ellipsis-h"></span>
+                </button>
+                <div class="dropdown-menu dropdown-menu-end py-2">
+                    <a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a><a class="dropdown-item" href="#!">Download</a><a class="dropdown-item" href="#!">Report abuse</a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="border-top border-dashed py-4">
+        <div class="d-flex flex-between-center">
+            <div>
+                <div class="d-flex align-items-center mb-1">
+                    <span class="fa-solid fa-file-lines me-2 fs-9 text-body-tertiary"></span>
+                    <p class="text-body-highlight mb-0 lh-1">Project.txt</p>
+                </div>
+                <p class="fs-9 text-body-tertiary mb-0">
+                    <span>123 kB</span><span class="text-body-quaternary mx-1">|</span><a href="#!">Shantinan Mekalan</a><span class="text-body-quaternary mx-1">|</span><span class="text-nowrap">12th Dec, 12:56 PM</span>
+                </p>
+            </div>
+            <div class="btn-reveal-trigger">
+                <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal"
+                        type="button"
+                        data-bs-toggle="dropdown"
+                        data-boundary="window"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        data-bs-reference="parent">
+                    <span class="fas fa-ellipsis-h"></span>
+                </button>
+                <div class="dropdown-menu dropdown-menu-end py-2">
+                    <a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a><a class="dropdown-item" href="#!">Download</a><a class="dropdown-item" href="#!">Report abuse</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="tab-pane fade"
+     id="tab-activity"
+     role="tabpanel"
+     aria-labelledby="activity-tab">
+    <h2 class="mb-4">Activity</h2>
+    <div class="row align-items-center g-3 justify-content-between justify-content-start">
+        <div class="col-12 col-sm-auto">
+            <div class="search-box mb-2 mb-sm-0">
+                <form class="position-relative">
+                    <input class="form-control search-input search"
+                           type="search"
+                           placeholder="Search Activity"
+                           aria-label="Search" />
+                    <span class="fas fa-search search-box-icon"></span>
+                </form>
+            </div>
+        </div>
+        {% if perms.inventory.change_opportunity %}<div class="col-auto"></div>{% endif %}
+    </div>
+    {% for activity in opportunity.get_activities %}
+        <div class="border-bottom border-translucent py-4">
+            <div class="d-flex">
+                <div class="d-flex bg-primary-subtle rounded-circle flex-center me-3 bg-primary-subtle"
+                     style="width:25px;
+                            height:25px">
+                    {% if activity.activity_type == "call" %}
+                        <span class="fa-solid fa-phone text-warning fs-8"></span>
+                    {% elif activity.activity_type == "email" %}
+                        <span class="fa-solid fa-envelope text-info-light fs-8"></span>
+                    {% elif activity.activity_type == "note" %}
+                        <span class="fa-regular fa-sticky-note text-info-light fs-8"></span>
+                    {% elif activity.activity_type == "task" %}
+                        <span class="fa-solid fa-list-check text-success fs-8"></span>
+                    {% elif activity.activity_type == "meeting" %}
+                        <span class="fa-solid fa-users text-danger fs-8"></span>
+                    {% elif activity.activity_type == "whatsapp" %}
+                        <span class="fab fa-whatsapp text-success-dark fs-7"></span>
+                    {% endif %}
+                </div>
+                <div class="flex-1">
+                    <div class="d-flex justify-content-between flex-column flex-xl-row mb-2 mb-sm-0">
+                        <div class="flex-1 me-2">
+                            <h5 class="text-body-highlight lh-sm"></h5>
+                            <p class="fs-9 mb-0">{{ activity.notes }}</p>
+                        </div>
+                    </div>
+                    <div class="d-flex justify-content-between flex-column flex-xl-row mb-2 mb-sm-0">
+                        <div class="flex-1 me-2">
+                            <h5 class="text-body-highlight lh-sm"></h5>
+                            {% if request.user.email == activity.created_by %}
+                                <p class="fs-9 mb-0">
+                                    by <a class="ms-1" href="#!">You</a>
+                                </p>
+                            {% else %}
+                                <p class="fs-9 mb-0">
+                                    by<a class="ms-1" href="#!">{{ activity.created_by }}</a>
+                                </p>
+                            {% endif %}
+                        </div>
+                        <div class="fs-9">
+                            <span class="fa-regular fa-calendar-days text-primary me-2"></span><span class="fw-semibold">{{ activity.created|naturalday|capfirst }}</span>
+                        </div>
+                    </div>
+                    <p class="fs-9 mb-0"></p>
+                </div>
+            </div>
+        </div>
+    {% endfor %}
+</div>
+</div>
+</div>
+</div>
 <!-- task Modal -->
-        {% include "components/task_modal.html" with content_type="opportunity" slug=opportunity.slug %}
+{% include "components/task_modal.html" with content_type="opportunity" slug=opportunity.slug %}
 <!-- note Modal -->
-        {% include "components/note_modal.html" with content_type="opportunity" slug=opportunity.slug %}
+{% include "components/note_modal.html" with content_type="opportunity" slug=opportunity.slug %}
 <!-- schedule Modal -->
-        {% include "components/schedule_modal.html" with content_type="opportunity" slug=opportunity.slug %}
-{% endblock %}
\ No newline at end of file
+{% include "components/schedule_modal.html" with content_type="opportunity" slug=opportunity.slug %}
+{% endblock %}
diff --git a/templates/crm/opportunities/opportunity_form.html b/templates/crm/opportunities/opportunity_form.html
index c8ac7229..c029cea2 100644
--- a/templates/crm/opportunities/opportunity_form.html
+++ b/templates/crm/opportunities/opportunity_form.html
@@ -2,11 +2,11 @@
 {% load i18n static widget_tweaks custom_filters %}
 {% block title %}
     {# Check if an 'object'  exists in the context #}
-  {% if object %}
-    {% trans 'Update Opportunity'%}
-  {% else %}
-    {% trans 'Add New Opportunity'%}
-  {% endif %}
+    {% if object %}
+        {% trans 'Update Opportunity' %}
+    {% else %}
+        {% trans 'Add New Opportunity' %}
+    {% endif %}
 {% endblock %}
 {% block content %}
   <div class="container-fluid mt-4 mb-3">
@@ -227,5 +227,5 @@
       const rangeInput = document.getElementById('{{ form.probability.id_for_label }}');
       updateProbabilityValue(rangeInput.value);
     });
-  </script>
-{% endblock %}
\ No newline at end of file
+    </script>
+{% endblock %}
diff --git a/templates/crm/opportunities/opportunity_list copy.html b/templates/crm/opportunities/opportunity_list copy.html
index d631e7ac..3c9133dd 100644
--- a/templates/crm/opportunities/opportunity_list copy.html	
+++ b/templates/crm/opportunities/opportunity_list copy.html	
@@ -1,504 +1,585 @@
 {% extends 'base.html' %}
 {% load i18n static %}
-
 {% block content %}
-
-
-  <div class="px-4 px-lg-6">
-    <h2 class="mb-5">{{ _("Opportunities") }}</h2>
-    <div class="d-xl-flex justify-content-between">
-      <div class="mb-3">
-        <a class="btn btn-phoenix-primary me-4" href="{% url 'opportunity_create' slug%}"><span class="fas fa-plus me-2"></span>{{ _("Add Opportunity") }}</a>
-      </div>
+    <div class="px-4 px-lg-6">
+        <h2 class="mb-5">{{ _("Opportunities") }}</h2>
+        <div class="d-xl-flex justify-content-between">
+            <div class="mb-3">
+                <a class="btn btn-phoenix-primary me-4"
+                   href="{% url 'opportunity_create' slug %}"><span class="fas fa-plus me-2"></span>{{ _("Add Opportunity") }}</a>
+            </div>
+        </div>
     </div>
-  </div>
-
-  <div class="px-4 px-lg-6 scrollbar">
-    <div class="deals">
-      {% for opportunity in opportunities %}
-        <div class="deals-col col-sm-6 me-4 mt-4">
-          <div class="d-flex align-items-center justify-content-between position-sticky top-0 z-1 bg-body">
-            <div>
-              <h5 class="mb-2 ms-4">{{ opportunity.car.id_car_make.get_local_name }} - {{ opportunity.car.id_car_model.get_local_name }} - {{ opportunity.car.year }}</h5>
-            </div>
-            <div class="d-flex gap-3">
-              <button class="btn p-0" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
-              <ul class="dropdown-menu dropdown-menu-end">
-                <li><a class="dropdown-item" href="{% url 'update_opportunity' opportunity.pk %}">{{ _("Edit") }}</a></li>
-                <li><button class="dropdown-item text-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">{% trans "Delete" %}</button></li>
-              </ul>
-            </div>
-          </div>
-          <div class=" deals-items-row">
-            <div class="w-100 min-vh-50" >
-              <div>
-                <div class="card mb-3">
-                  <div class="card-body">
-                    <a class="dropdown-indicator-icon position-absolute text-body-tertiary text-end"
-                       href="#collapseWidthDeals-1"
-                       role="button"
-                       data-bs-toggle="collapse"
-                       aria-expanded="false"
-                       aria-controls="collapseWidthDeals-1">
-                      <span class="fa-solid fa-angle-down text-end"></span>
-                    </a>
-                    <div class="d-flex align-items-center justify-content-between mb-3">
-                      <div class="d-flex gap-3">
-
-                      </div>
-                      <div class="d-flex">
-                        <span class="me-2" data-feather="clock" style="stroke-width:2;"></span>
-                        <p class="mb-0 fs-9 fw-semibold text-body-tertiary date">{{ opportunity.created|date }}<span class="text-body-quaternary"> . {{ opportunity.created|time}}</span></p>
-                      </div>
+    <div class="px-4 px-lg-6 scrollbar">
+        <div class="deals">
+            {% for opportunity in opportunities %}
+                <div class="deals-col col-sm-6 me-4 mt-4">
+                    <div class="d-flex align-items-center justify-content-between position-sticky top-0 z-1 bg-body">
+                        <div>
+                            <h5 class="mb-2 ms-4">
+                                {{ opportunity.car.id_car_make.get_local_name }} - {{ opportunity.car.id_car_model.get_local_name }} - {{ opportunity.car.year }}
+                            </h5>
+                        </div>
+                        <div class="d-flex gap-3">
+                            <button class="btn p-0"
+                                    type="button"
+                                    data-bs-toggle="dropdown"
+                                    data-boundary="window"
+                                    aria-haspopup="true"
+                                    aria-expanded="false"
+                                    data-bs-reference="parent">
+                                <span class="fas fa-ellipsis-h fs-10"></span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <li>
+                                    <a class="dropdown-item"
+                                       href="{% url 'update_opportunity' opportunity.pk %}">{{ _("Edit") }}</a>
+                                </li>
+                                <li>
+                                    <button class="dropdown-item text-danger"
+                                            data-bs-toggle="modal"
+                                            data-bs-target="#deleteModal">{% trans "Delete" %}</button>
+                                </li>
+                            </ul>
+                        </div>
                     </div>
-                    <div class="deals-items-head d-flex align-items-center mb-2">
-                      <a class="text-primary fw-bold line-clamp-1 me-3 mb-0 fs-9" href="{% url 'opportunity_detail' opportunity.pk %}">{{ _("View") }}</a>
-                      <p class="fs-10 mb-0 mt-1 d-none"><span class="me-1 text-body-quaternary" data-feather="grid" style="stroke-width:2; height: 12px; width: 12px"></span>{{ opportunity.get_stage_display }}</p>
-                      <p class="ms-auto fs-9 text-body-emphasis fw-semibold mb-0 deals-revenue">{{ opportunity.car.finances.total }}</p>
-                    </div>
-                    <div class="deals-company-agent d-flex flex-between-center">
-                      <div class="d-flex align-items-center"><span class="uil uil-user me-2"></span>
-                        <p class="text-body-secondary fw-bold fs-10 mb-0">{{ opportunity.customer.get_full_name }}</p>
-                      </div>
-                      <div class="d-flex align-items-center"><span class="uil uil-headphones me-2"></span>
-                        <p class="text-body-secondary fw-bold fs-10 mb-0">{{ opportunity.staff.name }}</p>
-                      </div>
-                    </div>
-                    <div class="collapse" id="collapseWidthDeals-1">
-                      <div class="d-flex gap-2 mb-5"><span class="badge badge-phoenix fs-10 badge-phoenix-info">{{ opportunity.get_stage_display }}</span><span class="badge badge-phoenix fs-10 badge-phoenix-danger">{{ opportunity.get_status_display }}</span></div>
-                      <table class="mb-4 w-100 table-stats table-stats">
-                        <tr>
-                          <th>{{ _("Details") }}</th>
-                          <th>:</th>
-                          <th></th>
-                        </tr>
-                        <tr>
-                          <td class="py-1">
-                            <div class="d-flex align-items-center"><span class="icon-saudi_riyal me-2 text-body-tertiary"></span>
-                              <p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Expected Revenue")}}</p>
+                    <div class=" deals-items-row">
+                        <div class="w-100 min-vh-50">
+                            <div>
+                                <div class="card mb-3">
+                                    <div class="card-body">
+                                        <a class="dropdown-indicator-icon position-absolute text-body-tertiary text-end"
+                                           href="#collapseWidthDeals-1"
+                                           role="button"
+                                           data-bs-toggle="collapse"
+                                           aria-expanded="false"
+                                           aria-controls="collapseWidthDeals-1">
+                                            <span class="fa-solid fa-angle-down text-end"></span>
+                                        </a>
+                                        <div class="d-flex align-items-center justify-content-between mb-3">
+                                            <div class="d-flex gap-3"></div>
+                                            <div class="d-flex">
+                                                <span class="me-2" data-feather="clock" style="stroke-width:2;"></span>
+                                                <p class="mb-0 fs-9 fw-semibold text-body-tertiary date">
+                                                    {{ opportunity.created|date }}<span class="text-body-quaternary">. {{ opportunity.created|time }}</span>
+                                                </p>
+                                            </div>
+                                        </div>
+                                        <div class="deals-items-head d-flex align-items-center mb-2">
+                                            <a class="text-primary fw-bold line-clamp-1 me-3 mb-0 fs-9"
+                                               href="{% url 'opportunity_detail' opportunity.pk %}">{{ _("View") }}</a>
+                                            <p class="fs-10 mb-0 mt-1 d-none">
+                                                <span class="me-1 text-body-quaternary"
+                                                      data-feather="grid"
+                                                      style="stroke-width:2;
+                                                             height: 12px;
+                                                             width: 12px"></span>{{ opportunity.get_stage_display }}
+                                            </p>
+                                            <p class="ms-auto fs-9 text-body-emphasis fw-semibold mb-0 deals-revenue">{{ opportunity.car.finances.total }}</p>
+                                        </div>
+                                        <div class="deals-company-agent d-flex flex-between-center">
+                                            <div class="d-flex align-items-center">
+                                                <span class="uil uil-user me-2"></span>
+                                                <p class="text-body-secondary fw-bold fs-10 mb-0">{{ opportunity.customer.get_full_name }}</p>
+                                            </div>
+                                            <div class="d-flex align-items-center">
+                                                <span class="uil uil-headphones me-2"></span>
+                                                <p class="text-body-secondary fw-bold fs-10 mb-0">{{ opportunity.staff.name }}</p>
+                                            </div>
+                                        </div>
+                                        <div class="collapse" id="collapseWidthDeals-1">
+                                            <div class="d-flex gap-2 mb-5">
+                                                <span class="badge badge-phoenix fs-10 badge-phoenix-info">{{ opportunity.get_stage_display }}</span><span class="badge badge-phoenix fs-10 badge-phoenix-danger">{{ opportunity.get_status_display }}</span>
+                                            </div>
+                                            <table class="mb-4 w-100 table-stats table-stats">
+                                                <tr>
+                                                    <th>{{ _("Details") }}</th>
+                                                    <th>:</th>
+                                                    <th></th>
+                                                </tr>
+                                                <tr>
+                                                    <td class="py-1">
+                                                        <div class="d-flex align-items-center">
+                                                            <span class="icon-saudi_riyal me-2 text-body-tertiary"></span>
+                                                            <p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Expected Revenue") }}</p>
+                                                        </div>
+                                                    </td>
+                                                    <td class="d-none d-sm-block pe-sm-2">:</td>
+                                                    <td class="py-1">
+                                                        <p class="ps-6 ps-sm-0 fw-semibold fs-9 mb-0 mb-0 pb-3 pb-sm-0 text-body-emphasis">
+                                                            {{ opportunity.car.finances.total }}
+                                                        </p>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td class="py-1">
+                                                        <div class="d-flex align-items-center">
+                                                            <span class="me-2 text-body-tertiary"
+                                                                  data-feather="user"
+                                                                  style="width:16px;
+                                                                         height:16px"></span>
+                                                            <p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Contact") }}</p>
+                                                        </div>
+                                                    </td>
+                                                    <td class=" d-none d-sm-block pe-sm-2">:</td>
+                                                    <td class="py-1">
+                                                        <p class="fw-semibold fs-9 mb-0 mb-0 pb-3 pb-sm-0 text-body-emphasis d-flex align-items-center gap-2">
+                                                            <a href=""> <span class="fa-solid fa-square-phone text-body-tertiary"></span></a><a href=""> <span class="fa-solid fa-square-envelope text-body-tertiary"></span></a><a href=""> <span class="fab fa-whatsapp-square text-body-tertiary"></span></a>
+                                                        </p>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td class="py-1">
+                                                        <div class="d-flex align-items-center">
+                                                            <span class="me-2 text-body-tertiary"
+                                                                  data-feather="calendar"
+                                                                  style="width:16px;
+                                                                         height:16px"></span>
+                                                            <p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Closing Date") }}</p>
+                                                        </div>
+                                                    </td>
+                                                    <td class=" d-none d-sm-block pe-sm-2">:</td>
+                                                    <td class="py-1">
+                                                        <p class="fw-semibold fs-9 mb-0 mb-0 pb-3 pb-sm-0 text-body-emphasis">{{ opportunity.closing_date }}</p>
+                                                    </td>
+                                                </tr>
+                                            </table>
+                                            <p class="fs-9 mb-1 fw-bold">{{ _("Probability") }}: %</p>
+                                            <div class="progress" style="height:16px">
+                                                {% if opportunity.probability >= 25 and opportunity.probability < 49 %}
+                                                    <div class="progress-bar rounded-pill bg-danger"
+                                                         role="progressbar"
+                                                         style="width: {{ opportunity.probability }}%"
+                                                         aria-valuenow="{{ opportunity.probability }}"
+                                                         aria-valuemin="0"
+                                                         aria-valuemax="100">
+                                                        <span class="fw-bold fs-10 text-sm-end text-secondary me-1">{{ opportunity.probability }}</span>
+                                                    </div>
+                                                {% elif opportunity.probability >= 50 and opportunity.probability <= 74 %}
+                                                    <div class="progress-bar rounded-pill bg-warning"
+                                                         role="progressbar"
+                                                         style="width: {{ opportunity.probability }}%"
+                                                         aria-valuenow="{{ opportunity.probability }}"
+                                                         aria-valuemin="0"
+                                                         aria-valuemax="100">
+                                                        <span class="fw-bold fs-10 text-sm-end text-secondary me-1">{{ opportunity.probability }}</span>
+                                                    </div>
+                                                {% elif opportunity.probability >= 75 and opportunity.probability <= 100 %}
+                                                    <div class="progress-bar rounded-pill bg-success"
+                                                         role="progressbar"
+                                                         style="width: {{ opportunity.probability }}%"
+                                                         aria-valuenow="{{ opportunity.probability }}"
+                                                         aria-valuemin="0"
+                                                         aria-valuemax="100">
+                                                        <span class="fw-bold fs-10 text-sm-end text-secondary me-1">{{ opportunity.probability }}</span>
+                                                    </div>
+                                                {% endif %}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
-                          </td>
-                          <td class="d-none d-sm-block pe-sm-2">:</td>
-                          <td class="py-1">
-                            <p class="ps-6 ps-sm-0 fw-semibold fs-9 mb-0 mb-0 pb-3 pb-sm-0 text-body-emphasis">{{ opportunity.car.finances.total }}</p>
-                          </td>
-                        </tr>
-                        <tr>
-                          <td class="py-1">
-                            <div class="d-flex align-items-center"><span class="me-2 text-body-tertiary" data-feather="user" style="width:16px; height:16px"></span>
-                              <p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Contact") }}</p>
-                            </div>
-                          </td>
-                          <td class=" d-none d-sm-block pe-sm-2">:</td>
-                          <td class="py-1">
-                            <p class="fw-semibold fs-9 mb-0 mb-0 pb-3 pb-sm-0 text-body-emphasis d-flex align-items-center gap-2"><a href=""> <span class="fa-solid fa-square-phone text-body-tertiary"></span></a><a href=""> <span class="fa-solid fa-square-envelope text-body-tertiary"></span></a><a href=""> <span class="fab fa-whatsapp-square text-body-tertiary"></span></a></p>
-                          </td>
-                        </tr>
-                        <tr>
-                          <td class="py-1">
-                            <div class="d-flex align-items-center"><span class="me-2 text-body-tertiary" data-feather="calendar" style="width:16px; height:16px"></span>
-                              <p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Closing Date")}}</p>
-                            </div>
-                          </td>
-                          <td class=" d-none d-sm-block pe-sm-2">:</td>
-                          <td class="py-1">
-                            <p class="fw-semibold fs-9 mb-0 mb-0 pb-3 pb-sm-0 text-body-emphasis">{{ opportunity.closing_date }}</p>
-                          </td>
-                        </tr>
-
-                      </table>
-                      <p class="fs-9 mb-1 fw-bold"> {{ _("Probability") }}: %</p>
-                      <div class="progress" style="height:16px">
-                        {% if opportunity.probability >= 25 and opportunity.probability < 49 %}
-                          <div class="progress-bar rounded-pill bg-danger" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
-                            <span class="fw-bold fs-10 text-sm-end text-secondary me-1">{{ opportunity.probability }}</span>
-                          </div>
-                        {% elif opportunity.probability >= 50 and opportunity.probability <= 74 %}
-                          <div class="progress-bar rounded-pill bg-warning" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
-                            <span class="fw-bold fs-10 text-sm-end text-secondary me-1">{{ opportunity.probability }}</span>
-                          </div>
-                        {% elif opportunity.probability >= 75 and opportunity.probability <= 100 %}
-                          <div class="progress-bar rounded-pill bg-success" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
-                            <span class="fw-bold fs-10 text-sm-end text-secondary me-1">{{ opportunity.probability }}</span>
-                          </div>
-                        {% endif %}
-                      </div>
-
+                        </div>
                     </div>
-                  </div>
                 </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="modal fade" id="deleteModal"
-             data-bs-backdrop="static"
-             data-bs-keyboard="false"
-             tabindex="-1"
-             aria-labelledby="deleteModalLabel"
-             aria-hidden="true">
-          <div class="modal-dialog">
-            <div class="modal-content">
-              <div class="modal-header">
-                <h5 class="modal-title" id="deleteModalLabel">
-
-                  {% trans "Delete Opportunity" %}
-
-                </h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-              </div>
-              <div class="modal-body text-center">
-                <p class="mb-0 text-danger fw-bold">
-                  {% trans "Are you sure you want to delete this opportunity?" %}
-                </p>
-                <button type="button" class="btn btn-phoenix-secondary btn-sm" data-bs-dismiss="modal">
-                  {% trans "No" %}
-                </button>
-                <a type="button" class="btn btn-phoenix-danger btn-sm" href="{% url 'delete_opportunity' opportunity.pk %}">
-                  {% trans "Yes" %}
-                </a>
-              </div>
-
-            </div>
-          </div>
-        </div>
-        <div class="modal fade" id="addOpportunityModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="addOpportunityModalLabel" aria-hidden="true">
-          <div class="modal-dialog modal-xl modal-dialog-centered">
-            <div class="modal-content bg-body-highlight p-6">
-              <div class="modal-header justify-content-between border-0 p-0 mb-2">
-                <h3 class="mb-0">Opportunity Information</h3>
-                <button class="btn btn-sm btn-phoenix-secondary" data-bs-dismiss="modal" aria-label="Close"><span class="fas fa-times text-danger"></span></button>
-              </div>
-              <div class="modal-body px-0">
-                <form method="post" class="form" action="{% url 'create_opportunity' opportunity.customer.pk %}">
-                  <div class="row g-4">
-                    <div class="col-lg-6">
-                      <div class="mb-4">
-                        <label class="text-body-highlight fw-bold mb-2">Owner</label>
-                        <select class="form-select">
-                          <option>Select</option>
-                          <option>Ally Aagaard</option>
-                          <option>Aida Moen</option>
-                          <option>Niko Koss</option>
-                          <option>Alec Haag</option>
-                          <option>Lonnie Kub</option>
-                          <option>Ola Smith</option>
-                        </select>
-                      </div>
-                      <div class="mb-4">
-                        <label class="text-body-highlight fw-bold mb-2">Opportunity Name</label>
-                        <input class="form-control" type="text" placeholder="Enter deal name" />
-                      </div>
-                      <div class="mb-4">
-                        <div class="row g-3">
-                          <div class="col-sm-6 col-lg-12 col-xl-6">
-                            <label class="text-body-highlight fw-bold mb-2">Opportunity Amount</label>
-                            <div class="row g-2">
-                              <div class="col">
-                                <input class="form-control" type="number" placeholder="$ Enter amount" />
-                              </div>
-                              <div class="col-auto">
-                                <select class="form-select">
-                                  <option>USD</option>
-                                  <option>GBP</option>
-                                  <option>EUR</option>
-                                  <option>JPY</option>
-                                  <option>CAD</option>
-                                  <option>AUD</option>
-                                  <option>CNY</option>
-                                  <option>CHF</option>
-                                  <option>ZAR</option>
-                                  <option>BRL</option>
-                                  <option>RUB</option>
-                                  <option>INR</option>
-                                  <option>MXN</option>
-                                  <option>NZD</option>
-                                  <option>SGD</option>
-                                  <option>HKD</option>
-                                  <option>KRW</option>
-                                  <option>SEK</option>
-                                  <option>NOK</option>
-                                  <option>TRY</option>
-                                </select>
-                              </div>
+                <div class="modal fade"
+                     id="deleteModal"
+                     data-bs-backdrop="static"
+                     data-bs-keyboard="false"
+                     tabindex="-1"
+                     aria-labelledby="deleteModalLabel"
+                     aria-hidden="true">
+                    <div class="modal-dialog">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h5 class="modal-title" id="deleteModalLabel">{% trans "Delete Opportunity" %}</h5>
+                                <button type="button"
+                                        class="btn-close"
+                                        data-bs-dismiss="modal"
+                                        aria-label="Close"></button>
+                            </div>
+                            <div class="modal-body text-center">
+                                <p class="mb-0 text-danger fw-bold">{% trans "Are you sure you want to delete this opportunity?" %}</p>
+                                <button type="button"
+                                        class="btn btn-phoenix-secondary btn-sm"
+                                        data-bs-dismiss="modal">{% trans "No" %}</button>
+                                <a type="button"
+                                   class="btn btn-phoenix-danger btn-sm"
+                                   href="{% url 'delete_opportunity' opportunity.pk %}">{% trans "Yes" %}</a>
                             </div>
-                          </div>
                         </div>
-                      </div>
-                      <div class="mb-4">
-                        <label class="text-body-highlight fw-bold mb-2">Opportunity Code</label>
-                        <input class="form-control" type="text" placeholder="Enter deals code" />
-                      </div>
-                      <div class="mb-4">
-                        <label class="text-body-highlight fw-bold mb-2">Opportunity Type
-                          <button class="btn btn-link p-0 ms-3"><span class="fa-solid fa-plus me-1"></span><span>Add new</span></button>
-                        </label>
-                        <select class="form-select">
-                          <option>Select</option>
-                          <option>Buy One Get One Free</option>
-                          <option>Clearance sale</option>
-                          <option>Bundle deals</option>
-                          <option>Free shipping</option>
-                          <option>Loyalty programs</option>
-                          <option>Limited-time offers</option>
-                          <option>Refer-a-friend discounts</option>
-                          <option>Seasonal sales</option>
-                          <option>Membership discounts</option>
-                        </select>
-                      </div>
-                      <div class="mb-4">
-                        <label class="text-body-highlight fw-bold mb-2">Category
-                          <button class="btn btn-link p-0 ms-3"><span class="fa-solid fa-plus me-1"></span><span>Add new</span></button>
-                        </label>
-                        <select class="form-select">
-                          <option>Select</option>
-                          <option>Financial</option>
-                          <option>Marketplace</option>
-                          <option>Travel</option>
-                          <option>E-commerce</option>
-                          <option>Cloud Computing</option>
-                        </select>
-                      </div>
-                      <div class="mb-4">
-                        <label class="text-body-highlight fw-bold mb-2">Probability (%)</label>
-                        <input class="form-control" type="text" placeholder="Enter value" />
-                      </div>
-                      <div class="mb-4">
-                        <label class="text-body-highlight fw-bold mb-2">Expected Revenue</label>
-                        <div class="row g-2">
-                          <div class="col">
-                            <input class="form-control" type="number" placeholder="$ Enter amount" />
-                          </div>
-                          <div class="col-auto">
-                            <select class="form-select">
-                              <option>USD</option>
-                              <option>GBP</option>
-                              <option>EUR</option>
-                              <option>JPY</option>
-                              <option>CAD</option>
-                              <option>AUD</option>
-                              <option>CNY</option>
-                              <option>CHF</option>
-                              <option>ZAR</option>
-                              <option>BRL</option>
-                              <option>RUB</option>
-                              <option>INR</option>
-                              <option>MXN</option>
-                              <option>NZD</option>
-                              <option>SGD</option>
-                              <option>HKD</option>
-                              <option>KRW</option>
-                              <option>SEK</option>
-                              <option>NOK</option>
-                              <option>TRY</option>
-                            </select>
-                          </div>
-                        </div>
-                      </div>
                     </div>
-                    <div class="col-lg-6">
-                      <div class="mb-4">
-                        <label class="text-body-highlight fw-bold mb-2">Contact Name</label>
-                        <input class="form-control" type="text" placeholder="Enter contact name" />
-                      </div>
-                      <div class="mb-4">
-                        <div class="row g-3">
-                          <div class="col-6">
-                            <label class="text-body-highlight fw-bold mb-2">Phone Number</label>
-                            <input class="form-control" type="text" placeholder="Enter phone number" />
-                          </div>
-                          <div class="col-6">
-                            <label class="text-body-highlight fw-bold mb-2">Email Address</label>
-                            <input class="form-control" type="text" placeholder="Enter email address" />
-                          </div>
+                </div>
+                <div class="modal fade"
+                     id="addOpportunityModal"
+                     data-bs-backdrop="static"
+                     data-bs-keyboard="false"
+                     tabindex="-1"
+                     aria-labelledby="addOpportunityModalLabel"
+                     aria-hidden="true">
+                    <div class="modal-dialog modal-xl modal-dialog-centered">
+                        <div class="modal-content bg-body-highlight p-6">
+                            <div class="modal-header justify-content-between border-0 p-0 mb-2">
+                                <h3 class="mb-0">Opportunity Information</h3>
+                                <button class="btn btn-sm btn-phoenix-secondary"
+                                        data-bs-dismiss="modal"
+                                        aria-label="Close">
+                                    <span class="fas fa-times text-danger"></span>
+                                </button>
+                            </div>
+                            <div class="modal-body px-0">
+                                <form method="post"
+                                      class="form"
+                                      action="{% url 'create_opportunity' opportunity.customer.pk %}">
+                                    <div class="row g-4">
+                                        <div class="col-lg-6">
+                                            <div class="mb-4">
+                                                <label class="text-body-highlight fw-bold mb-2">Owner</label>
+                                                <select class="form-select">
+                                                    <option>Select</option>
+                                                    <option>Ally Aagaard</option>
+                                                    <option>Aida Moen</option>
+                                                    <option>Niko Koss</option>
+                                                    <option>Alec Haag</option>
+                                                    <option>Lonnie Kub</option>
+                                                    <option>Ola Smith</option>
+                                                </select>
+                                            </div>
+                                            <div class="mb-4">
+                                                <label class="text-body-highlight fw-bold mb-2">Opportunity Name</label>
+                                                <input class="form-control" type="text" placeholder="Enter deal name" />
+                                            </div>
+                                            <div class="mb-4">
+                                                <div class="row g-3">
+                                                    <div class="col-sm-6 col-lg-12 col-xl-6">
+                                                        <label class="text-body-highlight fw-bold mb-2">Opportunity Amount</label>
+                                                        <div class="row g-2">
+                                                            <div class="col">
+                                                                <input class="form-control" type="number" placeholder="$ Enter amount" />
+                                                            </div>
+                                                            <div class="col-auto">
+                                                                <select class="form-select">
+                                                                    <option>USD</option>
+                                                                    <option>GBP</option>
+                                                                    <option>EUR</option>
+                                                                    <option>JPY</option>
+                                                                    <option>CAD</option>
+                                                                    <option>AUD</option>
+                                                                    <option>CNY</option>
+                                                                    <option>CHF</option>
+                                                                    <option>ZAR</option>
+                                                                    <option>BRL</option>
+                                                                    <option>RUB</option>
+                                                                    <option>INR</option>
+                                                                    <option>MXN</option>
+                                                                    <option>NZD</option>
+                                                                    <option>SGD</option>
+                                                                    <option>HKD</option>
+                                                                    <option>KRW</option>
+                                                                    <option>SEK</option>
+                                                                    <option>NOK</option>
+                                                                    <option>TRY</option>
+                                                                </select>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="mb-4">
+                                                <label class="text-body-highlight fw-bold mb-2">Opportunity Code</label>
+                                                <input class="form-control" type="text" placeholder="Enter deals code" />
+                                            </div>
+                                            <div class="mb-4">
+                                                <label class="text-body-highlight fw-bold mb-2">
+                                                    Opportunity Type
+                                                    <button class="btn btn-link p-0 ms-3">
+                                                        <span class="fa-solid fa-plus me-1"></span><span>Add new</span>
+                                                    </button>
+                                                </label>
+                                                <select class="form-select">
+                                                    <option>Select</option>
+                                                    <option>Buy One Get One Free</option>
+                                                    <option>Clearance sale</option>
+                                                    <option>Bundle deals</option>
+                                                    <option>Free shipping</option>
+                                                    <option>Loyalty programs</option>
+                                                    <option>Limited-time offers</option>
+                                                    <option>Refer-a-friend discounts</option>
+                                                    <option>Seasonal sales</option>
+                                                    <option>Membership discounts</option>
+                                                </select>
+                                            </div>
+                                            <div class="mb-4">
+                                                <label class="text-body-highlight fw-bold mb-2">
+                                                    Category
+                                                    <button class="btn btn-link p-0 ms-3">
+                                                        <span class="fa-solid fa-plus me-1"></span><span>Add new</span>
+                                                    </button>
+                                                </label>
+                                                <select class="form-select">
+                                                    <option>Select</option>
+                                                    <option>Financial</option>
+                                                    <option>Marketplace</option>
+                                                    <option>Travel</option>
+                                                    <option>E-commerce</option>
+                                                    <option>Cloud Computing</option>
+                                                </select>
+                                            </div>
+                                            <div class="mb-4">
+                                                <label class="text-body-highlight fw-bold mb-2">Probability (%)</label>
+                                                <input class="form-control" type="text" placeholder="Enter value" />
+                                            </div>
+                                            <div class="mb-4">
+                                                <label class="text-body-highlight fw-bold mb-2">Expected Revenue</label>
+                                                <div class="row g-2">
+                                                    <div class="col">
+                                                        <input class="form-control" type="number" placeholder="$ Enter amount" />
+                                                    </div>
+                                                    <div class="col-auto">
+                                                        <select class="form-select">
+                                                            <option>USD</option>
+                                                            <option>GBP</option>
+                                                            <option>EUR</option>
+                                                            <option>JPY</option>
+                                                            <option>CAD</option>
+                                                            <option>AUD</option>
+                                                            <option>CNY</option>
+                                                            <option>CHF</option>
+                                                            <option>ZAR</option>
+                                                            <option>BRL</option>
+                                                            <option>RUB</option>
+                                                            <option>INR</option>
+                                                            <option>MXN</option>
+                                                            <option>NZD</option>
+                                                            <option>SGD</option>
+                                                            <option>HKD</option>
+                                                            <option>KRW</option>
+                                                            <option>SEK</option>
+                                                            <option>NOK</option>
+                                                            <option>TRY</option>
+                                                        </select>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col-lg-6">
+                                            <div class="mb-4">
+                                                <label class="text-body-highlight fw-bold mb-2">Contact Name</label>
+                                                <input class="form-control" type="text" placeholder="Enter contact name" />
+                                            </div>
+                                            <div class="mb-4">
+                                                <div class="row g-3">
+                                                    <div class="col-6">
+                                                        <label class="text-body-highlight fw-bold mb-2">Phone Number</label>
+                                                        <input class="form-control" type="text" placeholder="Enter phone number" />
+                                                    </div>
+                                                    <div class="col-6">
+                                                        <label class="text-body-highlight fw-bold mb-2">Email Address</label>
+                                                        <input class="form-control" type="text" placeholder="Enter email address" />
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="mb-4">
+                                                <label class="text-body-highlight fw-bold mb-2">
+                                                    Lead Source
+                                                    <button class="btn btn-link p-0 ms-3">
+                                                        <span class="fa-solid fa-plus me-1"></span><span>Add new</span>
+                                                    </button>
+                                                </label>
+                                                <select class="form-select">
+                                                    <option>Select</option>
+                                                    <option>Referrals</option>
+                                                    <option>Former Clients</option>
+                                                    <option>Competitors</option>
+                                                    <option>Business & sales</option>
+                                                    <option>Google resources</option>
+                                                    <option>Linkedin</option>
+                                                    <option>Marketing</option>
+                                                </select>
+                                            </div>
+                                            <div class="mb-4">
+                                                <label class="text-body-highlight fw-bold mb-2">
+                                                    Campaign Source
+                                                    <button class="btn btn-link p-0 ms-3">
+                                                        <span class="fa-solid fa-plus me-1"></span><span>Add new</span>
+                                                    </button>
+                                                </label>
+                                                <select class="form-select">
+                                                    <option>Select</option>
+                                                    <option>Online Campaign</option>
+                                                    <option>Offline Campaign</option>
+                                                </select>
+                                            </div>
+                                            <div class="mb-4">
+                                                <label class="text-body-highlight fw-bold mb-2">Time Zone</label>
+                                                <select class="form-select">
+                                                    <option>GMT-12:00 Etc/GMT-12</option>
+                                                    <option>GMT-11:00 Etc/GMT-11</option>
+                                                    <option>GMT-11:00 Pacific/Midway</option>
+                                                    <option>GMT-10:00 America/Adak</option>
+                                                    <option>GMT-09:00 America/Anchorage</option>
+                                                    <option>GMT-09:00 Pacific/Gambier</option>
+                                                    <option>GMT-08:00 America/Dawson_Creek</option>
+                                                    <option>GMT-08:00 America/Ensenada</option>
+                                                    <option>GMT-08:00 America/Los_Angeles</option>
+                                                    <option>GMT-07:00 America/Chihuahua</option>
+                                                    <option>GMT-07:00 America/Denver</option>
+                                                    <option>GMT-06:00 America/Belize</option>
+                                                    <option>GMT-06:00 America/Cancun</option>
+                                                    <option>GMT-06:00 America/Chicago</option>
+                                                    <option>GMT-06:00 Chile/EasterIsland</option>
+                                                    <option>GMT-05:00 America/Bogota</option>
+                                                    <option>GMT-05:00 America/Havana</option>
+                                                    <option>GMT-05:00 America/New_York</option>
+                                                    <option>GMT-04:30 America/Caracas</option>
+                                                    <option>GMT-04:00 America/Campo_Grande</option>
+                                                    <option>GMT-04:00 America/Glace_Bay</option>
+                                                    <option>GMT-04:00 America/Goose_Bay</option>
+                                                    <option>GMT-04:00 America/Santiago</option>
+                                                    <option>GMT-04:00 America/La_Paz</option>
+                                                    <option>GMT-03:00 America/Argentina/Buenos_Aires</option>
+                                                    <option>GMT-03:00 America/Montevideo</option>
+                                                    <option>GMT-03:00 America/Araguaina</option>
+                                                    <option>GMT-03:00 America/Godthab</option>
+                                                    <option>GMT-03:00 America/Miquelon</option>
+                                                    <option>GMT-03:00 America/Sao_Paulo</option>
+                                                    <option>GMT-03:30 America/St_Johns</option>
+                                                    <option>GMT-02:00 America/Noronha</option>
+                                                    <option>GMT-01:00 Atlantic/Cape_Verde</option>
+                                                    <option>GMT Europe/Belfast</option>
+                                                    <option>GMT Africa/Abidjan</option>
+                                                    <option>GMT Europe/Dublin</option>
+                                                    <option>GMT Europe/Lisbon</option>
+                                                    <option>GMT Europe/London</option>
+                                                    <option>UTC UTC</option>
+                                                    <option>GMT+01:00 Africa/Algiers</option>
+                                                    <option>GMT+01:00 Africa/Windhoek</option>
+                                                    <option>GMT+01:00 Atlantic/Azores</option>
+                                                    <option>GMT+01:00 Atlantic/Stanley</option>
+                                                    <option>GMT+01:00 Europe/Amsterdam</option>
+                                                    <option>GMT+01:00 Europe/Belgrade</option>
+                                                    <option>GMT+01:00 Europe/Brussels</option>
+                                                    <option>GMT+02:00 Africa/Cairo</option>
+                                                    <option>GMT+02:00 Africa/Blantyre</option>
+                                                    <option>GMT+02:00 Asia/Beirut</option>
+                                                    <option>GMT+02:00 Asia/Damascus</option>
+                                                    <option>GMT+02:00 Asia/Gaza</option>
+                                                    <option>GMT+02:00 Asia/Jerusalem</option>
+                                                    <option>GMT+03:00 Africa/Addis_Ababa</option>
+                                                    <option>GMT+03:00 Asia/Riyadh89</option>
+                                                    <option>GMT+03:00 Europe/Minsk</option>
+                                                    <option>GMT+03:30 Asia/Tehran</option>
+                                                    <option>GMT+04:00 Asia/Dubai</option>
+                                                    <option>GMT+04:00 Asia/Yerevan</option>
+                                                    <option>GMT+04:00 Europe/Moscow</option>
+                                                    <option>GMT+04:30 Asia/Kabul</option>
+                                                    <option>GMT+05:00 Asia/Tashkent</option>
+                                                    <option>GMT+05:30 Asia/Kolkata</option>
+                                                    <option>GMT+05:45 Asia/Katmandu</option>
+                                                    <option>GMT+06:00 Asia/Dhaka</option>
+                                                    <option>GMT+06:00 Asia/Yekaterinburg</option>
+                                                    <option>GMT+06:30 Asia/Rangoon</option>
+                                                    <option>GMT+07:00 Asia/Bangkok</option>
+                                                    <option>GMT+07:00 Asia/Novosibirsk</option>
+                                                    <option>GMT+08:00 Etc/GMT+8</option>
+                                                    <option>GMT+08:00 Asia/Hong_Kong</option>
+                                                    <option>GMT+08:00 Asia/Krasnoyarsk</option>
+                                                    <option>GMT+08:00 Australia/Perth</option>
+                                                    <option>GMT+08:45 Australia/Eucla</option>
+                                                    <option>GMT+09:00 Asia/Irkutsk</option>
+                                                    <option>GMT+09:00 Asia/Seoul</option>
+                                                    <option>GMT+09:00 Asia/Tokyo</option>
+                                                    <option>GMT+09:30 Australia/Adelaide</option>
+                                                    <option>GMT+09:30 Australia/Darwin</option>
+                                                    <option>GMT+09:30 Pacific/Marquesas</option>
+                                                    <option>GMT+10:00 Etc/GMT+10</option>
+                                                    <option>GMT+10:00 Australia/Brisbane</option>
+                                                    <option>GMT+10:00 Australia/Hobart</option>
+                                                    <option>GMT+10:00 Asia/Yakutsk</option>
+                                                    <option>GMT+10:30 Australia/Lord_Howe</option>
+                                                    <option>GMT+11:00 Asia/Vladivostok</option>
+                                                    <option>GMT+11:30 Pacific/Norfolk</option>
+                                                    <option>GMT+12:00 Etc/GMT+12</option>
+                                                    <option>GMT+12:00 Asia/Anadyr</option>
+                                                    <option>GMT+12:00 Asia/Magadan</option>
+                                                    <option>GMT+12:00 Pacific/Auckland</option>
+                                                    <option>GMT+12:45 Pacific/Chatham</option>
+                                                    <option>GMT+13:00 Pacific/Tongatapu</option>
+                                                    <option>GMT+14:00 Pacific/Kiritimati</option>
+                                                </select>
+                                            </div>
+                                            <div class="mb-4">
+                                                <div class="row g-3">
+                                                    <div class="col-6">
+                                                        <label class="text-body-highlight fw-bold mb-2">Create Date</label>
+                                                        <input class="form-control datetimepicker"
+                                                               type="text"
+                                                               placeholder="dd / mm / yyyy"
+                                                               data-options='{"disableMobile":true}' />
+                                                    </div>
+                                                    <div class="col-6">
+                                                        <label class="text-body-highlight fw-bold mb-2">Start Time</label>
+                                                        <input class="form-control datetimepicker"
+                                                               type="text"
+                                                               placeholder="H:i"
+                                                               data-options='{"enableTime":true,"noCalendar":true,"dateFormat":"H:i","disableMobile":true}' />
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="mb-4">
+                                                <div class="row g-3">
+                                                    <div class="col-6">
+                                                        <label class="text-body-highlight fw-bold mb-2">Closing Date</label>
+                                                        <input class="form-control datetimepicker"
+                                                               type="text"
+                                                               placeholder="dd / mm / yyyy"
+                                                               data-options='{"disableMobile":true}' />
+                                                    </div>
+                                                    <div class="col-6">
+                                                        <label class="text-body-highlight fw-bold mb-2">Closing Time</label>
+                                                        <input class="form-control datetimepicker"
+                                                               type="text"
+                                                               placeholder="H:i"
+                                                               data-options='{"enableTime":true,"noCalendar":true,"dateFormat":"H:i","disableMobile":true}' />
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="row g-3">
+                                                <div class="col-6">
+                                                    <label class="text-body-highlight fw-bold mb-2">Stage</label>
+                                                    <select class="form-select">
+                                                        <option>Select</option>
+                                                        <option>New</option>
+                                                        <option>In Progress</option>
+                                                        <option>Pending</option>
+                                                        <option>Canceled</option>
+                                                        <option>Completed</option>
+                                                    </select>
+                                                </div>
+                                                <div class="col-6">
+                                                    <label class="text-body-highlight fw-bold mb-2">Priority</label>
+                                                    <select class="form-select">
+                                                        <option>Urgent</option>
+                                                        <option>High</option>
+                                                        <option>Medium</option>
+                                                        <option>Low</option>
+                                                    </select>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+                            <div class="modal-footer border-0 pt-6 px-0 pb-0">
+                                <button class="btn btn-link text-danger px-3 my-0"
+                                        data-bs-dismiss="modal"
+                                        aria-label="Close">Cancel</button>
+                                <button class="btn btn-phoenix-primary my-0">Create Deal</button>
+                            </div>
                         </div>
-                      </div>
-                      <div class="mb-4">
-                        <label class="text-body-highlight fw-bold mb-2">Lead Source
-                          <button class="btn btn-link p-0 ms-3"><span class="fa-solid fa-plus me-1"></span><span>Add new</span></button>
-                        </label>
-                        <select class="form-select">
-                          <option>Select</option>
-                          <option>Referrals</option>
-                          <option>Former Clients</option>
-                          <option>Competitors</option>
-                          <option>Business & sales</option>
-                          <option>Google resources</option>
-                          <option>Linkedin</option>
-                          <option>Marketing</option>
-                        </select>
-                      </div>
-                      <div class="mb-4">
-                        <label class="text-body-highlight fw-bold mb-2">Campaign Source
-                          <button class="btn btn-link p-0 ms-3"><span class="fa-solid fa-plus me-1"></span><span>Add new</span></button>
-                        </label>
-                        <select class="form-select">
-                          <option>Select</option>
-                          <option>Online Campaign</option>
-                          <option>Offline Campaign</option>
-                        </select>
-                      </div>
-                      <div class="mb-4">
-                        <label class="text-body-highlight fw-bold mb-2">Time Zone</label>
-                        <select class="form-select">
-                          <option>GMT-12:00 Etc/GMT-12</option>
-                          <option>GMT-11:00 Etc/GMT-11</option>
-                          <option>GMT-11:00 Pacific/Midway</option>
-                          <option>GMT-10:00 America/Adak</option>
-                          <option>GMT-09:00 America/Anchorage</option>
-                          <option>GMT-09:00 Pacific/Gambier</option>
-                          <option>GMT-08:00 America/Dawson_Creek</option>
-                          <option>GMT-08:00 America/Ensenada</option>
-                          <option>GMT-08:00 America/Los_Angeles</option>
-                          <option>GMT-07:00 America/Chihuahua</option>
-                          <option>GMT-07:00 America/Denver</option>
-                          <option>GMT-06:00 America/Belize</option>
-                          <option>GMT-06:00 America/Cancun</option>
-                          <option>GMT-06:00 America/Chicago</option>
-                          <option>GMT-06:00 Chile/EasterIsland</option>
-                          <option>GMT-05:00 America/Bogota</option>
-                          <option>GMT-05:00 America/Havana</option>
-                          <option>GMT-05:00 America/New_York</option>
-                          <option>GMT-04:30 America/Caracas</option>
-                          <option>GMT-04:00 America/Campo_Grande</option>
-                          <option>GMT-04:00 America/Glace_Bay</option>
-                          <option>GMT-04:00 America/Goose_Bay</option>
-                          <option>GMT-04:00 America/Santiago</option>
-                          <option>GMT-04:00 America/La_Paz</option>
-                          <option>GMT-03:00 America/Argentina/Buenos_Aires</option>
-                          <option>GMT-03:00 America/Montevideo</option>
-                          <option>GMT-03:00 America/Araguaina</option>
-                          <option>GMT-03:00 America/Godthab</option>
-                          <option>GMT-03:00 America/Miquelon</option>
-                          <option>GMT-03:00 America/Sao_Paulo</option>
-                          <option>GMT-03:30 America/St_Johns</option>
-                          <option>GMT-02:00 America/Noronha</option>
-                          <option>GMT-01:00 Atlantic/Cape_Verde</option>
-                          <option>GMT Europe/Belfast</option>
-                          <option>GMT Africa/Abidjan</option>
-                          <option>GMT Europe/Dublin</option>
-                          <option>GMT Europe/Lisbon</option>
-                          <option>GMT Europe/London</option>
-                          <option>UTC UTC</option>
-                          <option>GMT+01:00 Africa/Algiers</option>
-                          <option>GMT+01:00 Africa/Windhoek</option>
-                          <option>GMT+01:00 Atlantic/Azores</option>
-                          <option>GMT+01:00 Atlantic/Stanley</option>
-                          <option>GMT+01:00 Europe/Amsterdam</option>
-                          <option>GMT+01:00 Europe/Belgrade</option>
-                          <option>GMT+01:00 Europe/Brussels</option>
-                          <option>GMT+02:00 Africa/Cairo</option>
-                          <option>GMT+02:00 Africa/Blantyre</option>
-                          <option>GMT+02:00 Asia/Beirut</option>
-                          <option>GMT+02:00 Asia/Damascus</option>
-                          <option>GMT+02:00 Asia/Gaza</option>
-                          <option>GMT+02:00 Asia/Jerusalem</option>
-                          <option>GMT+03:00 Africa/Addis_Ababa</option>
-                          <option>GMT+03:00 Asia/Riyadh89</option>
-                          <option>GMT+03:00 Europe/Minsk</option>
-                          <option>GMT+03:30 Asia/Tehran</option>
-                          <option>GMT+04:00 Asia/Dubai</option>
-                          <option>GMT+04:00 Asia/Yerevan</option>
-                          <option>GMT+04:00 Europe/Moscow</option>
-                          <option>GMT+04:30 Asia/Kabul</option>
-                          <option>GMT+05:00 Asia/Tashkent</option>
-                          <option>GMT+05:30 Asia/Kolkata</option>
-                          <option>GMT+05:45 Asia/Katmandu</option>
-                          <option>GMT+06:00 Asia/Dhaka</option>
-                          <option>GMT+06:00 Asia/Yekaterinburg</option>
-                          <option>GMT+06:30 Asia/Rangoon</option>
-                          <option>GMT+07:00 Asia/Bangkok</option>
-                          <option>GMT+07:00 Asia/Novosibirsk</option>
-                          <option>GMT+08:00 Etc/GMT+8</option>
-                          <option>GMT+08:00 Asia/Hong_Kong</option>
-                          <option>GMT+08:00 Asia/Krasnoyarsk</option>
-                          <option>GMT+08:00 Australia/Perth</option>
-                          <option>GMT+08:45 Australia/Eucla</option>
-                          <option>GMT+09:00 Asia/Irkutsk</option>
-                          <option>GMT+09:00 Asia/Seoul</option>
-                          <option>GMT+09:00 Asia/Tokyo</option>
-                          <option>GMT+09:30 Australia/Adelaide</option>
-                          <option>GMT+09:30 Australia/Darwin</option>
-                          <option>GMT+09:30 Pacific/Marquesas</option>
-                          <option>GMT+10:00 Etc/GMT+10</option>
-                          <option>GMT+10:00 Australia/Brisbane</option>
-                          <option>GMT+10:00 Australia/Hobart</option>
-                          <option>GMT+10:00 Asia/Yakutsk</option>
-                          <option>GMT+10:30 Australia/Lord_Howe</option>
-                          <option>GMT+11:00 Asia/Vladivostok</option>
-                          <option>GMT+11:30 Pacific/Norfolk</option>
-                          <option>GMT+12:00 Etc/GMT+12</option>
-                          <option>GMT+12:00 Asia/Anadyr</option>
-                          <option>GMT+12:00 Asia/Magadan</option>
-                          <option>GMT+12:00 Pacific/Auckland</option>
-                          <option>GMT+12:45 Pacific/Chatham</option>
-                          <option>GMT+13:00 Pacific/Tongatapu</option>
-                          <option>GMT+14:00 Pacific/Kiritimati</option>
-                        </select>
-                      </div>
-                      <div class="mb-4">
-                        <div class="row g-3">
-                          <div class="col-6">
-                            <label class="text-body-highlight fw-bold mb-2">Create Date</label>
-                            <input class="form-control datetimepicker" type="text" placeholder="dd / mm / yyyy" data-options='{"disableMobile":true}' />
-                          </div>
-                          <div class="col-6">
-                            <label class="text-body-highlight fw-bold mb-2">Start Time</label>
-                            <input class="form-control datetimepicker" type="text" placeholder="H:i" data-options='{"enableTime":true,"noCalendar":true,"dateFormat":"H:i","disableMobile":true}' />
-                          </div>
-                        </div>
-                      </div>
-                      <div class="mb-4">
-                        <div class="row g-3">
-                          <div class="col-6">
-                            <label class="text-body-highlight fw-bold mb-2">Closing Date</label>
-                            <input class="form-control datetimepicker" type="text" placeholder="dd / mm / yyyy" data-options='{"disableMobile":true}' />
-                          </div>
-                          <div class="col-6">
-                            <label class="text-body-highlight fw-bold mb-2">Closing Time</label>
-                            <input class="form-control datetimepicker" type="text" placeholder="H:i" data-options='{"enableTime":true,"noCalendar":true,"dateFormat":"H:i","disableMobile":true}' />
-                          </div>
-                        </div>
-                      </div>
-                      <div class="row g-3">
-                        <div class="col-6">
-                          <label class="text-body-highlight fw-bold mb-2">Stage</label>
-                          <select class="form-select">
-                            <option>Select</option>
-                            <option>New</option>
-                            <option>In Progress</option>
-                            <option>Pending</option>
-                            <option>Canceled</option>
-                            <option>Completed</option>
-                          </select>
-                        </div>
-                        <div class="col-6">
-                          <label class="text-body-highlight fw-bold mb-2">Priority</label>
-                          <select class="form-select">
-                            <option>Urgent</option>
-                            <option>High</option>
-                            <option>Medium</option>
-                            <option>Low</option>
-                          </select>
-                        </div>
-                      </div>
                     </div>
-                  </div>
-                </form>
-              </div>
-              <div class="modal-footer border-0 pt-6 px-0 pb-0">
-                <button class="btn btn-link text-danger px-3 my-0" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
-
-                <button class="btn btn-phoenix-primary my-0">Create Deal</button>
-              </div>
-            </div>
-          </div>
+                </div>
+            {% endfor %}
         </div>
-      {% endfor %}
     </div>
-  </div>
-
 {% endblock %}
-
-
-
diff --git a/templates/crm/opportunities/opportunity_list.html b/templates/crm/opportunities/opportunity_list.html
index 0c04b653..a6224eed 100644
--- a/templates/crm/opportunities/opportunity_list.html
+++ b/templates/crm/opportunities/opportunity_list.html
@@ -1,121 +1,118 @@
 {% extends 'base.html' %}
 {% load i18n static humanize %}
 {% load custom_filters %}
-{% block title %}{{ _("Opportunities") }}{% endblock title %}
+{% block title %}
+    {{ _("Opportunities") }}
+{% endblock title %}
 {% block content %}
-  <div class="row g-3 mt-4">
-    <div class="col-12">
-      <h2 class="mb-3">{{ _("Opportunities") }} <li class="fas fas fa-rocket text-primary ms-2"></li></h2>
-    </div>
-    <div class="col-12">
-      <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
-        <!-- Filter Controls -->
-        <div class="d-flex flex-column flex-lg-row align-items-start align-items-lg-center gap-3 w-100" id="filter-container">
-          <!-- Search Input - Wider and properly aligned -->
-          
-        <div class="search-box position-relative flex-grow-1 me-2" style="min-width: 200px;">
-              <form class="position-relative show" id="search-form">
-                  <input name="q" id="search-input" class="form-control form-control-sm search-input search" type="search"
-                    aria-label="Search" placeholder="{{ _('Search') }}" value="{{ request.GET.q }}" />
-                 <span class="fa fa-magnifying-glass search-box-icon"></span>
-               {% if request.GET.q %}
-                  <button type="button" class="btn-close position-absolute end-0 top-50 translate-middle cursor-pointer shadow-none"
-                    id="clear-search" aria-label="Close"></button>
-               {% endif %}
-             </form>
+    <div class="row g-3 mt-4">
+        <div class="col-12">
+            <h2 class="mb-3">
+                {{ _("Opportunities") }}
+                <li class="fas fas fa-rocket text-primary ms-2"></li>
+            </h2>
         </div>
-        
-
-          <!-- Filter Dropdowns - Aligned in a row -->
-          <div class="d-flex flex-column flex-sm-row gap-3 w-100" style="max-width: 400px;">
-            <!-- Stage Filter -->
-            <div class="flex-grow-1">
-              <select
-                class="form-select"
-                name="stage"
-                hx-get="{% url 'opportunity_list' request.dealer.slug %}"
-                hx-trigger="change"
-                hx-target="#opportunities-grid"
-                hx-select="#opportunities-grid"
-                hx-swap="outerHTML"
-                hx-include="#filter-container input, #filter-container select"
-              >
-                <option value="">{% trans "All Stages" %}</option>
-                {% for value, label in stage_choices %}
-                  <option value="{{ value }}" {% if request.GET.stage == value %}selected{% endif %}>
-                    {{ label }}
-                  </option>
-                {% endfor %}
-              </select>
+        <div class="col-12">
+            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
+                <!-- Filter Controls -->
+                <div class="d-flex flex-column flex-lg-row align-items-start align-items-lg-center gap-3 w-100"
+                     id="filter-container">
+                    <!-- Search Input - Wider and properly aligned -->
+                    <div class="search-box position-relative flex-grow-1 me-2"
+                         style="min-width: 200px">
+                        <form class="position-relative show" id="search-form">
+                            <input name="q"
+                                   id="search-input"
+                                   class="form-control form-control-sm search-input search"
+                                   type="search"
+                                   aria-label="Search"
+                                   placeholder="{{ _("Search") }}"
+                                   value="{{ request.GET.q }}" />
+                            <span class="fa fa-magnifying-glass search-box-icon"></span>
+                            {% if request.GET.q %}
+                                <button type="button"
+                                        class="btn-close position-absolute end-0 top-50 translate-middle cursor-pointer shadow-none"
+                                        id="clear-search"
+                                        aria-label="Close"></button>
+                            {% endif %}
+                        </form>
+                    </div>
+                    <!-- Filter Dropdowns - Aligned in a row -->
+                    <div class="d-flex flex-column flex-sm-row gap-3 w-100"
+                         style="max-width: 400px">
+                        <!-- Stage Filter -->
+                        <div class="flex-grow-1">
+                            <select class="form-select"
+                                    name="stage"
+                                    hx-get="{% url 'opportunity_list' request.dealer.slug %}"
+                                    hx-trigger="change"
+                                    hx-target="#opportunities-grid"
+                                    hx-select="#opportunities-grid"
+                                    hx-swap="outerHTML"
+                                    hx-include="#filter-container input, #filter-container select">
+                                <option value="">{% trans "All Stages" %}</option>
+                                {% for value, label in stage_choices %}
+                                    <option value="{{ value }}"
+                                            {% if request.GET.stage == value %}selected{% endif %}>{{ label }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                        <!-- Sort Filter -->
+                        <div class="flex-grow-1">
+                            <select class="form-select"
+                                    name="sort"
+                                    hx-get="{% url 'opportunity_list' request.dealer.slug %}"
+                                    hx-trigger="change"
+                                    hx-target="#opportunities-grid"
+                                    hx-select="#opportunities-grid"
+                                    hx-swap="outerHTML"
+                                    hx-include="#filter-container input, #filter-container select">
+                                <option value="newest"
+                                        {% if request.GET.sort == 'newest' %}selected{% endif %}>{% trans "Newest First" %}</option>
+                                <option value="highest"
+                                        {% if request.GET.sort == 'highest' %}selected{% endif %}>{% trans "Highest Value" %}</option>
+                                <option value="closing"
+                                        {% if request.GET.sort == 'closing' %}selected{% endif %}>{% trans "Earliest Close Date" %}</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                {% if perms.inventory.add_opportunity %}
+                    <div class="d-flex justify-content-between">
+                        <a class="btn btn-phoenix-primary btn-sm"
+                           href="{% url 'opportunity_create' request.dealer.slug %}">
+                            <span class="fas fa-plus me-2"></span>{{ _("Add Opportunity") }}
+                        </a>
+                    </div>
+                {% endif %}
             </div>
-
-            <!-- Sort Filter -->
-            <div class="flex-grow-1">
-              <select
-                class="form-select"
-                name="sort"
-                hx-get="{% url 'opportunity_list' request.dealer.slug %}"
-                hx-trigger="change"
-                hx-target="#opportunities-grid"
-                hx-select="#opportunities-grid"
-                hx-swap="outerHTML"
-                hx-include="#filter-container input, #filter-container select"
-              >
-                <option value="newest" {% if request.GET.sort == 'newest' %}selected{% endif %}>
-                  {% trans "Newest First" %}
-                </option>
-                <option value="highest" {% if request.GET.sort == 'highest' %}selected{% endif %}>
-                  {% trans "Highest Value" %}
-                </option>
-                <option value="closing" {% if request.GET.sort == 'closing' %}selected{% endif %}>
-                  {% trans "Earliest Close Date" %}
-                </option>
-              </select>
-            </div>
-          </div>
         </div>
-        {% if perms.inventory.add_opportunity %}
-        <div class="d-flex justify-content-between">
-          <a class="btn btn-phoenix-primary btn-sm" href="{% url 'opportunity_create' request.dealer.slug %}">
-            <span class="fas fa-plus me-2"></span>{{ _("Add Opportunity") }}
-          </a>
+    </div>
+    <div id="opportunities-grid" class="row g-4 px-2 px-lg-4 mt-1 mb-4">
+        {% include 'crm/opportunities/partials/opportunity_grid.html' %}
+    </div>
+    {% if page_obj.paginator.num_pages > 1 %}
+        <div class="d-flex justify-content-end mt-3">
+            <div class="d-flex">{% include 'partials/pagination.html' %}</div>
         </div>
-        {% endif %}
-      </div>
-    </div>
-  </div>
-
-  <div id="opportunities-grid" class="row g-4 px-2 px-lg-4 mt-1 mb-4">
-    {% include 'crm/opportunities/partials/opportunity_grid.html' %}
-  </div>
-  {% if page_obj.paginator.num_pages > 1 %}
-
-    <div class="d-flex justify-content-end mt-3">
-
-      <div class="d-flex">
-        {% include 'partials/pagination.html'%}
-      </div>
-
-    </div>
-  {% endif %}
-
-  {% block customJS %}
-  <script>
-    document.addEventListener("DOMContentLoaded", function() {
+    {% endif %}
+    {% block customJS %}
+        <script>
+      document.addEventListener("DOMContentLoaded", function() {
         const searchInput = document.getElementById("search-input");
         const clearButton = document.getElementById("clear-search");
 
         if (clearButton) {
-            clearButton.addEventListener("click", function(event) {
-                event.preventDefault();
-                searchInput.value = ""; // Clear input field
+          clearButton.addEventListener("click", function(event) {
+            event.preventDefault();
+            searchInput.value = ""; // Clear input field
                 // Remove query parameter without reloading the page
-                const newUrl = window.location.pathname;
-                history.replaceState(null, "", newUrl);
-                window.location.reload();
-            });
+            const newUrl = window.location.pathname;
+            history.replaceState(null, "", newUrl);
+            window.location.reload();
+          });
         }
-    });
-</script>
-  {% endblock %}
-{% endblock %}
\ No newline at end of file
+      });
+        </script>
+    {% endblock %}
+{% endblock %}
diff --git a/templates/crm/opportunities/opportunity_logs.html b/templates/crm/opportunities/opportunity_logs.html
index 5549f0e7..da56c1e5 100644
--- a/templates/crm/opportunities/opportunity_logs.html
+++ b/templates/crm/opportunities/opportunity_logs.html
@@ -1,9 +1,7 @@
 {% extends 'base.html' %}
-
 {% block content %}
     <h1>Logs for {{ opportunity.deal_name }}</h1>
-    <div class="table-list" id="opportunityTable">
-    </div>
+    <div class="table-list" id="opportunityTable"></div>
     <table>
         <thead>
             <tr>
@@ -32,4 +30,4 @@
             {% endfor %}
         </tbody>
     </table>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/crm/opportunities/partials/opportunity_grid.html b/templates/crm/opportunities/partials/opportunity_grid.html
index ca6a4c9a..7494d0be 100644
--- a/templates/crm/opportunities/partials/opportunity_grid.html
+++ b/templates/crm/opportunities/partials/opportunity_grid.html
@@ -1,7 +1,7 @@
 {% load i18n static humanize %}
 {% load custom_filters %}
 {% block customCSS %}
-  <style>
+    <style>
     .bg-success-soft {
       background-color: rgba(25, 135, 84, 0.1) !important;
       opacity: .8;
@@ -10,127 +10,150 @@
       background-color: rgba(220, 53, 69, 0.1) !important;
       opacity: .8;
     }
-  </style>
+    </style>
 {% endblock customCSS %}
-
 {% for opportunity in opportunities %}
-  <div class="col-12 col-md-6 col-lg-4 col-xl-3">
-    <div class="card h-100
-                {% if opportunity.get_stage_display == 'Closed Won' %}bg-success-soft
-                {% elif opportunity.get_stage_display == 'Closed Lost' %}bg-danger-soft{% endif %}">
-      <div class="card-body">
-        <div class="avatar avatar-xl me-3 mb-3">
-          {% if opportunity.car.id_car_make.logo %}
-            <img class="rounded" src="{{ opportunity.car.id_car_make.logo.url }}" alt="" />
-          {% endif %}
-        </div>
-        {% if opportunity.customer %}
-          <h5 class="mb-4">Opportunity for {{ opportunity.customer }}</h5>
-        {% elif opportunity.organization %}
-          <h5 class="mb-4">Opportunity for {{ opportunity.organization }}</h5>
-        {% endif %}
-
-        <div class="d-flex align-items-center justify-content-between mb-3">
-          <div class="d-flex gap-2">
-            {% if opportunity.stage == "qualification" %}
-              <span class="badge badge-phoenix fs-10 badge-phoenix-primary">
-            {% elif opportunity.stage == "test_drive" %}
-              <span class="badge badge-phoenix fs-10 badge-phoenix-info">
-            {% elif opportunity.stage == "quotation" %}
-              <span class="badge badge-phoenix fs-10 badge-phoenix-warning">
-            {% elif opportunity.stage == "negotiation" %}
-              <span class="badge badge-phoenix fs-10 badge-phoenix-warning">
-            {% elif opportunity.stage == "financing" %}
-              <span class="badge badge-phoenix fs-10 badge-phoenix-warning">
-            {% elif opportunity.stage == "closed_won" %}
-              <span class="badge badge-phoenix fs-10 badge-phoenix-success">
-            {% elif opportunity.stage == "closed_lost" %}
-              <span class="badge badge-phoenix fs-10 badge-phoenix-danger">
-            {% elif opportunity.stage == "on_hold" %}
-              <span class="badge badge-phoenix fs-10 badge-phoenix-secondary">
-            {% endif %}
-            {{ opportunity.stage }}</span>
-          <span class="badge badge-phoenix fs-10
-                       {% if opportunity.get_stage_display == 'Won' %}badge-phoenix-success
-                       {% elif opportunity.get_stage_display == 'Lost' %}badge-phoenix-danger{% endif %}">
-            {{ opportunity.get_status_display }}
-          </span>
-        </div>
-        <div class="d-flex align-items-center">
-          <i class="fa-regular fa-clock"></i>&nbsp;
-          <p class="mb-0 fs-9 fw-semibold text-body-tertiary">{{ opportunity.created|naturalday|capfirst }}</p>
-        </div>
-      </div>
-
-      <div class="deals-company-agent d-flex justify-content-between mb-3">
-        <div class="d-flex align-items-center">
-          <span class="uil uil-user me-2"></span>
-          <p class="text-body-secondary fw-bold fs-10 mb-0">
-            {{ _("Assigned To") }}{% if request.user.email == opportunity.staff.email %}
-              {{ _("You") }}
-            {% else %}
-              {{ opportunity.staff.name }}</p>
-            {% endif %}
-          </div>
-        </div>
-        <table class="mb-3 w-100">
-          <tr>
-            <td class="py-1">
-              <div class="d-flex align-items-center">
-                <span class="me-2 text-body-tertiary"><span class="icon-saudi_riyal"></span></span>
-                <p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Expected Revenue")}}</p>
-              </div>
-            </td>
-            <td class="text-end">
-              <p class="fw-semibold fs-9 mb-0 text-body-emphasis"><span class="icon-saudi_riyal"></span>{{ opportunity.expected_revenue }}</p>
-            </td>
-          </tr>
-
-          <tr>
-            <td class="py-1">
-              <div class="d-flex align-items-center">
-                <i class="uil uil-calendar-alt"></i>&nbsp;
-                <p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Closing Date")}}</p>
-              </div>
-            </td>
-            <td class="text-end">
-              {% if opportunity.expected_close_date %}
-                <p class="fw-semibold fs-9 mb-0 text-body-emphasis">{{ opportunity.expected_close_date|naturalday|capfirst }}</p>
-              {% endif %}
-            </td>
-          </tr>
-        </table>
-
-        <p class="fs-9 mb-1 fw-bold">{{ _("Probability") }}: {{ opportunity.probability }}%</p>
-        <div class="progress mb-3" style="height:16px">
-          {% if opportunity.probability >= 25 and opportunity.probability < 49 %}
-            <div class="progress-bar rounded-pill bg-danger-dark" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
-              <span class="fw-bolder fs-9 text-sm-end me-1">{{ opportunity.probability }}</span>
-            </div>
-          {% elif opportunity.probability >= 50 and opportunity.probability <= 74 %}
-            <div class="progress-bar rounded-pill bg-warning-dark" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
-              <span class="fw-bolder fs-9 text-sm-end me-1">{{ opportunity.probability }}</span>
-            </div>
-          {% elif opportunity.probability >= 75 and opportunity.probability <= 100 %}
-            <div class="progress-bar rounded-pill bg-success-dark" role="progressbar" style="width: {{ opportunity.probability }}%" aria-valuenow="{{ opportunity.probability }}" aria-valuemin="0" aria-valuemax="100">
-              <span class="fw-bolder fs-9 text-sm-end me-1">{{ opportunity.probability }}</span>
-            </div>
-          {% endif %}
-        </div>
-
-        <div class="d-flex gap-2">
-          {% if perms.inventory.view_opportunity%}
-          <a class="btn btn-sm btn-phoenix-primary" href="{% url 'opportunity_detail' request.dealer.slug  opportunity.slug %}">
-            <i class="fa-solid fa-eye ms-2"></i>{{ _("View") }} 
-          </a>
-          {% endif %}
-          {%if perms.inventory.change_opportunity%}
-          <a class="btn btn-sm btn-phoenix-success" href="{% url 'update_opportunity' request.dealer.slug opportunity.slug %}">
-            <i class="fa-solid fa-pen ms-2"></i> {{ _("Update") }}
-          </a>
-          {% endif %}
-        </div>
-      </div>
-    </div>
-  </div>
-{% endfor %}
\ No newline at end of file
+    <div class="col-12 col-md-6 col-lg-4 col-xl-3">
+        <div class="card h-100
+                    {% if opportunity.get_stage_display == 'Closed Won' %}
+                        bg-success-soft
+                    {% elif opportunity.get_stage_display == 'Closed Lost' %}
+                        bg-danger-soft
+                    {% endif %}">
+            <div class="card-body">
+                <div class="avatar avatar-xl me-3 mb-3">
+                    {% if opportunity.car.id_car_make.logo %}
+                        <img class="rounded"
+                             src="{{ opportunity.car.id_car_make.logo.url }}"
+                             alt="" />
+                    {% endif %}
+                </div>
+                {% if opportunity.customer %}
+                    <h5 class="mb-4">Opportunity for {{ opportunity.customer }}</h5>
+                {% elif opportunity.organization %}
+                    <h5 class="mb-4">Opportunity for {{ opportunity.organization }}</h5>
+                {% endif %}
+                <div class="d-flex align-items-center justify-content-between mb-3">
+                    <div class="d-flex gap-2">
+                        {% if opportunity.stage == "qualification" %}
+                            <span class="badge badge-phoenix fs-10 badge-phoenix-primary">
+                            {% elif opportunity.stage == "test_drive" %}
+                                <span class="badge badge-phoenix fs-10 badge-phoenix-info">
+                                {% elif opportunity.stage == "quotation" %}
+                                    <span class="badge badge-phoenix fs-10 badge-phoenix-warning">
+                                    {% elif opportunity.stage == "negotiation" %}
+                                        <span class="badge badge-phoenix fs-10 badge-phoenix-warning">
+                                        {% elif opportunity.stage == "financing" %}
+                                            <span class="badge badge-phoenix fs-10 badge-phoenix-warning">
+                                            {% elif opportunity.stage == "closed_won" %}
+                                                <span class="badge badge-phoenix fs-10 badge-phoenix-success">
+                                                {% elif opportunity.stage == "closed_lost" %}
+                                                    <span class="badge badge-phoenix fs-10 badge-phoenix-danger">
+                                                    {% elif opportunity.stage == "on_hold" %}
+                                                        <span class="badge badge-phoenix fs-10 badge-phoenix-secondary">
+                                                        {% endif %}
+                                                    {{ opportunity.stage }}</span>
+                                                    <span class="badge badge-phoenix fs-10
+                                                                 {% if opportunity.get_stage_display == 'Won' %}
+                                                                     badge-phoenix-success
+                                                                 {% elif opportunity.get_stage_display == 'Lost' %}
+                                                                     badge-phoenix-danger
+                                                                 {% endif %}">
+                                                        {{ opportunity.get_status_display }}
+                                                    </span>
+                                                </div>
+                                                <div class="d-flex align-items-center">
+                                                    <i class="fa-regular fa-clock"></i>&nbsp;
+                                                    <p class="mb-0 fs-9 fw-semibold text-body-tertiary">{{ opportunity.created|naturalday|capfirst }}</p>
+                                                </div>
+                                            </div>
+                                            <div class="deals-company-agent d-flex justify-content-between mb-3">
+                                                <div class="d-flex align-items-center">
+                                                    <span class="uil uil-user me-2"></span>
+                                                    <p class="text-body-secondary fw-bold fs-10 mb-0">
+                                                        {{ _("Assigned To") }}
+                                                        {% if request.user.email == opportunity.staff.email %}
+                                                            {{ _("You") }}
+                                                        {% else %}
+                                                            {{ opportunity.staff.name }}
+                                                        </p>
+                                                    {% endif %}
+                                                </div>
+                                            </div>
+                                            <table class="mb-3 w-100">
+                                                <tr>
+                                                    <td class="py-1">
+                                                        <div class="d-flex align-items-center">
+                                                            <span class="me-2 text-body-tertiary"><span class="icon-saudi_riyal"></span></span>
+                                                            <p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Expected Revenue") }}</p>
+                                                        </div>
+                                                    </td>
+                                                    <td class="text-end">
+                                                        <p class="fw-semibold fs-9 mb-0 text-body-emphasis">
+                                                            <span class="icon-saudi_riyal"></span>{{ opportunity.expected_revenue }}
+                                                        </p>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td class="py-1">
+                                                        <div class="d-flex align-items-center">
+                                                            <i class="uil uil-calendar-alt"></i>&nbsp;
+                                                            <p class="fw-semibold fs-9 mb-0 text-body-tertiary">{{ _("Closing Date") }}</p>
+                                                        </div>
+                                                    </td>
+                                                    <td class="text-end">
+                                                        {% if opportunity.expected_close_date %}
+                                                            <p class="fw-semibold fs-9 mb-0 text-body-emphasis">{{ opportunity.expected_close_date|naturalday|capfirst }}</p>
+                                                        {% endif %}
+                                                    </td>
+                                                </tr>
+                                            </table>
+                                            <p class="fs-9 mb-1 fw-bold">{{ _("Probability") }}: {{ opportunity.probability }}%</p>
+                                            <div class="progress mb-3" style="height:16px">
+                                                {% if opportunity.probability >= 25 and opportunity.probability < 49 %}
+                                                    <div class="progress-bar rounded-pill bg-danger-dark"
+                                                         role="progressbar"
+                                                         style="width: {{ opportunity.probability }}%"
+                                                         aria-valuenow="{{ opportunity.probability }}"
+                                                         aria-valuemin="0"
+                                                         aria-valuemax="100">
+                                                        <span class="fw-bolder fs-9 text-sm-end me-1">{{ opportunity.probability }}</span>
+                                                    </div>
+                                                {% elif opportunity.probability >= 50 and opportunity.probability <= 74 %}
+                                                    <div class="progress-bar rounded-pill bg-warning-dark"
+                                                         role="progressbar"
+                                                         style="width: {{ opportunity.probability }}%"
+                                                         aria-valuenow="{{ opportunity.probability }}"
+                                                         aria-valuemin="0"
+                                                         aria-valuemax="100">
+                                                        <span class="fw-bolder fs-9 text-sm-end me-1">{{ opportunity.probability }}</span>
+                                                    </div>
+                                                {% elif opportunity.probability >= 75 and opportunity.probability <= 100 %}
+                                                    <div class="progress-bar rounded-pill bg-success-dark"
+                                                         role="progressbar"
+                                                         style="width: {{ opportunity.probability }}%"
+                                                         aria-valuenow="{{ opportunity.probability }}"
+                                                         aria-valuemin="0"
+                                                         aria-valuemax="100">
+                                                        <span class="fw-bolder fs-9 text-sm-end me-1">{{ opportunity.probability }}</span>
+                                                    </div>
+                                                {% endif %}
+                                            </div>
+                                            <div class="d-flex gap-2">
+                                                {% if perms.inventory.view_opportunity %}
+                                                    <a class="btn btn-sm btn-phoenix-primary"
+                                                       href="{% url 'opportunity_detail' request.dealer.slug  opportunity.slug %}">
+                                                        <i class="fa-solid fa-eye ms-2"></i>{{ _("View") }}
+                                                    </a>
+                                                {% endif %}
+                                                {% if perms.inventory.change_opportunity %}
+                                                    <a class="btn btn-sm btn-phoenix-success"
+                                                       href="{% url 'update_opportunity' request.dealer.slug opportunity.slug %}">
+                                                        <i class="fa-solid fa-pen ms-2"></i> {{ _("Update") }}
+                                                    </a>
+                                                {% endif %}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            {% endfor %}
diff --git a/templates/csv_upload.html b/templates/csv_upload.html
index 7926bdc1..43a7750b 100644
--- a/templates/csv_upload.html
+++ b/templates/csv_upload.html
@@ -73,25 +73,22 @@
         }
     </style>
 {% endblock customCSS %}
-
 {% block content %}
 
     <div class="container mt-4">
-        <h2>Upload Cars CSV <i class="fa-solid fa-file-csv text-primary"></i></h2>
+        <h2>
+            Upload Cars CSV <i class="fa-solid fa-file-csv text-primary"></i>
+        </h2>
         <div class="d-flex justify-content-end">
             <a href="{% static 'sample/cars_sample.csv' %}" class="btn btn-phoenix-primary mt-4">
                 <i class="fa-solid fa-file-csv me-2"></i>Download Sample CSV
             </a>
         </div>
-
         {% if messages %}
             {% for message in messages %}
-                <div class="alert alert-outline-warning }} mt-4" role="alert">
-                    {{ message }}
-                </div>
+                <div class="alert alert-outline-warning }} mt-4" role="alert">{{ message }}</div>
             {% endfor %}
         {% endif %}
-
         <form method="post" enctype="multipart/form-data" class="mt-4">
             {% csrf_token %}
             {% if not item %}
@@ -111,19 +108,18 @@
                 </div>
                 <div class="row g-4">
                     <div class="col">
-                        {{form.vendor.label}}
-                        {{form.vendor}}
+                        {{ form.vendor.label }}
+                        {{ form.vendor }}
                     </div>
                     <div class="col">
-                        {{form.year.label}}
-                        {{form.year}}
+                        {{ form.year.label }}
+                        {{ form.year }}
                     </div>
                     <div class="col">
-                        {{form.receiving_date.label}}
-                        {{form.receiving_date}}
+                        {{ form.receiving_date.label }}
+                        {{ form.receiving_date }}
                     </div>
                 </div>
-
                 <div class="mb-3">
                     <div class="row g-4">
                         <div class="col">
@@ -132,7 +128,11 @@
                                 {% for color in form.fields.exterior.queryset %}
                                     <div class="color-card">
                                         <label class="color-option">
-                                            <input class="color-radio" type="radio" name="exterior" value="{{ color.id }}" {% if color.id == form.instance.exterior.id %}checked{% endif %}>
+                                            <input class="color-radio"
+                                                   type="radio"
+                                                   name="exterior"
+                                                   value="{{ color.id }}"
+                                                   {% if color.id == form.instance.exterior.id %}checked{% endif %}>
                                             <div class="color-display" style="background-color: rgb({{ color.rgb }})">
                                                 <span class="color-name">{{ color.get_local_name }}</span>
                                             </div>
@@ -147,7 +147,11 @@
                                 {% for color in form.fields.interior.queryset %}
                                     <div class="color-card">
                                         <label class="color-option">
-                                            <input class="color-radio" type="radio" name="interior" value="{{ color.id }}" {% if color.id == form.instance.interior.id %}checked{% endif %}>
+                                            <input class="color-radio"
+                                                   type="radio"
+                                                   name="interior"
+                                                   value="{{ color.id }}"
+                                                   {% if color.id == form.instance.interior.id %}checked{% endif %}>
                                             <div class="color-display" style="background-color: rgb({{ color.rgb }})">
                                                 <span class="color-name">{{ color.get_local_name }}</span>
                                             </div>
@@ -169,13 +173,16 @@
             {% endif %}
             <div class="mb-3">
                 <label for="csv_file" class="form-label">CSV File</label>
-                <input type="file" class="form-control" id="csv_file" name="csv_file" accept=".csv" required>
-                <div class="form-text">
-                    {{ _("CSV should include columns: vin")}}
-                </div>
+                <input type="file"
+                       class="form-control"
+                       id="csv_file"
+                       name="csv_file"
+                       accept=".csv"
+                       required>
+                <div class="form-text">{{ _("CSV should include columns: vin") }}</div>
             </div>
             <button type="submit" class="btn btn-phoenix-primary mb-2">Upload</button>
             <a href="{% url 'car_list' request.dealer.slug %}" class="btn btn-phoenix-secondary mb-2">Cancel</a>
         </form>
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/customers/customer_form.html b/templates/customers/customer_form.html
index c9d05c1e..2faa8d66 100644
--- a/templates/customers/customer_form.html
+++ b/templates/customers/customer_form.html
@@ -1,24 +1,20 @@
 {% extends "base.html" %}
-{% load i18n static%}
+{% load i18n static %}
 {% load crispy_forms_filters %}
 {% block title %}
     {# Check if an 'object'  exists in the context #}
     {% if object %}
-        {% trans 'Update Customer'%}
+        {% trans 'Update Customer' %}
     {% else %}
-        {% trans 'Add New Customer'%}
+        {% trans 'Add New Customer' %}
     {% endif %}
 {% endblock %}
-
-
 {% block content %}
-
-<div class="row justify-content-center mt-5 mb-3">
-
-    <div class="col-lg-8 col-md-10">
-        <div class="card shadow-sm border-o rounded-3">
-            <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
-                  <h3 class="mb-0 fs-4 text-center">
+    <div class="row justify-content-center mt-5 mb-3">
+        <div class="col-lg-8 col-md-10">
+            <div class="card shadow-sm border-o rounded-3">
+                <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
+                    <h3 class="mb-0 fs-4 text-center">
                         {% if customer.created %}
                             {{ _("Edit Customer") }}
                         {% else %}
@@ -26,22 +22,21 @@
                         {% endif %}
                         <i class="fa-solid fa-user ms-2 text-primary"></i> 
                     </h3>
-            </div>
-            <div class="card-body bg-light-subtle">
-                <form method="post" class="form row g-3 needs-validation" enctype="multipart/form-data" novalidate>
-                    {% csrf_token %}
-                    {{ form|crispy }}
-                    <hr class="my-2"> 
-
+                </div>
+                <div class="card-body bg-light-subtle">
+                    <form method="post"
+                          class="form row g-3 needs-validation"
+                          enctype="multipart/form-data"
+                          novalidate>
+                        {% csrf_token %}
+                        {{ form|crispy }}
+                        <hr class="my-2">
                         <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-3">
                           <button class="btn  btn-phoenix-success btn-lg me-md-2" type="submit"><i class="fa-solid fa-floppy-disk me-1"></i>{{ _("Save") }}</button>
                         <a href="{% url 'customer_list' request.dealer.slug %}" class="btn btn-lg btn-phoenix-danger"><i class="fa-solid fa-ban me-1"></i>{% trans "Cancel" %}</a>    
                         </div>
-                </form>
-
+                    </form>
+                </div>
             </div>
-
-    </div>
-
-</div>
-{%endblock %}
+        </div>
+    {% endblock %}
diff --git a/templates/customers/customer_list.html b/templates/customers/customer_list.html
index bae02f70..4f3c27dc 100644
--- a/templates/customers/customer_list.html
+++ b/templates/customers/customer_list.html
@@ -1,125 +1,171 @@
 {% extends 'base.html' %}
 {% load i18n %}
 {% load static %}
-{% block title %}{{ _('Customers')|capfirst }}{% endblock title %}
-{% block vendors %}<a class="nav-link active">{{ _("Customers")|capfirst }}</a>{% endblock %}
-
+{% block title %}
+    {{ _("Customers") |capfirst }}
+{% endblock title %}
+{% block vendors %}<a class="nav-link active">{{ _("Customers") |capfirst }}</a>{% endblock %}
 {% block content %}
-  <div class="row g-3 mt-4">
-    <h2 class="mb-2">{{ _("Customers")|capfirst }} <li class="fas fa-people-group text-primary ms-2"></li></h2>
-    <div class="row g-3 justify-content-between mb-4">
-      <div class="col-auto">
-        <div class="d-md-flex justify-content-between">
-          {% if perms.inventory.add_customer %}
-            <div>
-              <a href="{% url 'customer_create' request.dealer.slug %}" class="btn btn-sm btn-phoenix-primary me-4"><span class="fas fa-plus me-2"></span>{{ _("Add Customer") }}</a>
+    <div class="row g-3 mt-4">
+        <h2 class="mb-2">
+            {{ _("Customers") |capfirst }}
+            <li class="fas fa-people-group text-primary ms-2"></li>
+        </h2>
+        <div class="row g-3 justify-content-between mb-4">
+            <div class="col-auto">
+                <div class="d-md-flex justify-content-between">
+                    {% if perms.inventory.add_customer %}
+                        <div>
+                            <a href="{% url 'customer_create' request.dealer.slug %}"
+                               class="btn btn-sm btn-phoenix-primary me-4"><span class="fas fa-plus me-2"></span>{{ _("Add Customer") }}</a>
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+            <div class="col-auto">
+                <div class="d-flex">{% include 'partials/search_box.html' %}</div>
             </div>
-          {% endif %}
         </div>
-      </div>
-      <div class="col-auto">
-        <div class="d-flex">
-          {% include 'partials/search_box.html' %}
-        </div>
-      </div>
-    </div>
-    {% if page_obj.object_list %}
-      <div class="table-responsive scrollbar transition">
-
-        <table class="table align-items-center table-flush table-hover">
-          <thead>
-            <tr class="bg-body-highlight">
-              <th></th>
-              <th class="sort white-space-nowrap align-middle text-uppercase ps-0" scope="col" data-sort="name" style="width:25%;">{{ _("Name")|capfirst }}</th>
-              <th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent" scope="col" data-sort="email" style="width:15%;">
-                <div class="d-inline-flex flex-center">
-                  <div class="d-flex align-items-center px-1 py-1 bg-success-subtle rounded me-2"><span class="text-success-dark" data-feather="mail"></span></div><span>{{ _("email")|capfirst }}</span>
-                </div>
-              </th>
-              <th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent" scope="col" data-sort="phone" style="width:15%; min-width: 180px;">
-                <div class="d-inline-flex flex-center">
-                  <div class="d-flex align-items-center px-1 py-1 bg-primary-subtle rounded me-2"><span class="text-primary-dark" data-feather="phone"></span></div><span>{{ _("Phone Number") }}</span>
-                </div>
-              </th>
-              <th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent" scope="col" data-sort="contact" style="width:15%;">
-                <div class="d-inline-flex flex-center">
-                  <div class="d-flex align-items-center px-1 py-1 bg-info-subtle rounded me-2"><span class="text-info-dark" data-feather="user"></span></div><span>{{ _("National ID")|capfirst }}</span>
-                </div>
-              </th>
-              <th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent" scope="col" data-sort="company" style="width:15%;">
-                <div class="d-inline-flex flex-center">
-                  <div class="d-flex align-items-center px-1 py-1 bg-warning-subtle rounded me-2"><span class="text-warning-dark" data-feather="home"></span></div><span>{{ _("Address")|capfirst }}</span>
-                </div>
-              </th>
-              <th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent" scope="col" data-sort="company" style="width:15%;">
-                <div class="d-inline-flex flex-center">
-                  <div class="d-flex align-items-center px-1 py-1 bg-warning-subtle rounded me-2"><span class="text-warning-dark" data-feather="grid"></span></div><span>{{ _("Active")|capfirst }}</span>
-                </div>
-              </th>
-              <th class="sort align-middle ps-4 pe-5 text-uppercase" scope="col" data-sort="date" style="width:15%;">
-               {{ _("Create date") }} <span class="text-warning-dark" data-feather="clock"></span></th>
-              <th class="sort text-end align-middle pe-0 ps-4" scope="col"></th>
-            </tr>
-          </thead>
-          <tbody class="list" id="lead-tables-body">
-            {% for customer in customers %}
-                                <!-- Delete Modal -->
-              <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                <td>
-
-                </td>
-                {% if perms.inventory.view_customer%}
-                <td class="name align-middle white-space-nowrap ps-0">
-                  <div class="d-flex align-items-center">
-                    <div><a class="fs-8 fw-bold" href="{% url 'customer_detail' request.dealer.slug customer.slug %}">{{ customer.full_name }}</a>
-                      <div class="d-flex align-items-center">
-                      </div>
-                    </div>
-                  </div>
-                </td>
+        {% if page_obj.object_list %}
+            <div class="table-responsive scrollbar transition">
+                <table class="table align-items-center table-flush table-hover">
+                    <thead>
+                        <tr class="bg-body-highlight">
+                            <th></th>
+                            <th class="sort white-space-nowrap align-middle text-uppercase ps-0"
+                                scope="col"
+                                data-sort="name"
+                                style="width:25%">{{ _("Name") |capfirst }}</th>
+                            <th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent"
+                                scope="col"
+                                data-sort="email"
+                                style="width:15%">
+                                <div class="d-inline-flex flex-center">
+                                    <div class="d-flex align-items-center px-1 py-1 bg-success-subtle rounded me-2">
+                                        <span class="text-success-dark" data-feather="mail"></span>
+                                    </div>
+                                    <span>{{ _("email") |capfirst }}</span>
+                                </div>
+                            </th>
+                            <th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent"
+                                scope="col"
+                                data-sort="phone"
+                                style="width:15%;
+                                       min-width: 180px">
+                                <div class="d-inline-flex flex-center">
+                                    <div class="d-flex align-items-center px-1 py-1 bg-primary-subtle rounded me-2">
+                                        <span class="text-primary-dark" data-feather="phone"></span>
+                                    </div>
+                                    <span>{{ _("Phone Number") }}</span>
+                                </div>
+                            </th>
+                            <th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent"
+                                scope="col"
+                                data-sort="contact"
+                                style="width:15%">
+                                <div class="d-inline-flex flex-center">
+                                    <div class="d-flex align-items-center px-1 py-1 bg-info-subtle rounded me-2">
+                                        <span class="text-info-dark" data-feather="user"></span>
+                                    </div>
+                                    <span>{{ _("National ID") |capfirst }}</span>
+                                </div>
+                            </th>
+                            <th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent"
+                                scope="col"
+                                data-sort="company"
+                                style="width:15%">
+                                <div class="d-inline-flex flex-center">
+                                    <div class="d-flex align-items-center px-1 py-1 bg-warning-subtle rounded me-2">
+                                        <span class="text-warning-dark" data-feather="home"></span>
+                                    </div>
+                                    <span>{{ _("Address") |capfirst }}</span>
+                                </div>
+                            </th>
+                            <th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent"
+                                scope="col"
+                                data-sort="company"
+                                style="width:15%">
+                                <div class="d-inline-flex flex-center">
+                                    <div class="d-flex align-items-center px-1 py-1 bg-warning-subtle rounded me-2">
+                                        <span class="text-warning-dark" data-feather="grid"></span>
+                                    </div>
+                                    <span>{{ _("Active") |capfirst }}</span>
+                                </div>
+                            </th>
+                            <th class="sort align-middle ps-4 pe-5 text-uppercase"
+                                scope="col"
+                                data-sort="date"
+                                style="width:15%">
+                                {{ _("Create date") }} <span class="text-warning-dark" data-feather="clock"></span>
+                            </th>
+                            <th class="sort text-end align-middle pe-0 ps-4" scope="col"></th>
+                        </tr>
+                    </thead>
+                    <tbody class="list" id="lead-tables-body">
+                        {% for customer in customers %}
+                            <!-- Delete Modal -->
+                            <tr class="hover-actions-trigger btn-reveal-trigger position-static">
+                                <td></td>
+                                {% if perms.inventory.view_customer %}
+                                    <td class="name align-middle white-space-nowrap ps-0">
+                                        <div class="d-flex align-items-center">
+                                            <div>
+                                                <a class="fs-8 fw-bold"
+                                                   href="{% url 'customer_detail' request.dealer.slug customer.slug %}">{{ customer.full_name }}</a>
+                                                <div class="d-flex align-items-center"></div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                {% endif %}
+                                <td class="email align-middle white-space-nowrap fw-semibold ps-4 border-end border-translucent">
+                                    <a class="text-body-highlight" href="">{{ customer.email }}</a>
+                                </td>
+                                <td class="phone align-middle white-space-nowrap fw-semibold ps-4 border-end border-translucent">
+                                    <a class="text-body-highlight" href="tel:{{ customer.phone }}">{{ customer.phone_number }}</a>
+                                </td>
+                                <td class="contact align-middle white-space-nowrap ps-4 border-end border-translucent fw-semibold text-body-highlight">
+                                    {{ customer.national_id }}
+                                </td>
+                                <td class="company align-middle white-space-nowrap text-body-tertiary text-opacity-85 ps-4 border-end border-translucent fw-semibold text-body-highlight">
+                                    {{ customer.address }}
+                                </td>
+                                <td class="date align-middle white-space-nowrap text-body-tertiary text-opacity-85 ps-4 text-body-tertiary">
+                                    {% if customer.active %}
+                                        <span class="badge badge-phoenix badge-phoenix-success"><i class="fas fa-check"></i> {{ customer.active }}</span>
+                                    {% else %}
+                                        <span class="badge badge-phoenix badge-phoenix-danger"><i class="fas fa-times"></i> {{ customer.active }}</span>
+                                    {% endif %}
+                                </td>
+                                <td class="date align-middle white-space-nowrap text-body-tertiary text-opacity-85 ps-4 text-body-tertiary">
+                                    {{ customer.created|date }}
+                                </td>
+                                <td class="align-middle white-space-nowrap text-end pe-0 ps-4">
+                                    {% if perms.inventory.change_customer %}
+                                        <a href="{% url 'customer_update' request.dealer.slug customer.slug %}"
+                                           class="btn btn-sm btn-phoenix-primary me-2"
+                                           data-url="{% url 'customer_update' request.dealer.slug customer.slug %}">
+                                            <i class="fas fa-pen"></i>
+                                        </a>
+                                    {% endif %}
+                                    {% if perms.inventory.delete_customer %}
+                                        <button class="btn btn-phoenix-danger btn-sm delete-btn"
+                                                data-url="{% url 'customer_delete' request.dealer.slug customer.slug %}"
+                                                data-message="{{ _("Are you sure you want to delete this customer") }}"
+                                                data-bs-toggle="modal"
+                                                data-bs-target="#deleteModal">
+                                            <i class="fas fa-trash"></i>
+                                        </button>
+                                    {% endif %}
+                                </td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
                 {% endif %}
-                <td class="email align-middle white-space-nowrap fw-semibold ps-4 border-end border-translucent"><a class="text-body-highlight" href="">{{ customer.email }}</a></td>
-                <td class="phone align-middle white-space-nowrap fw-semibold ps-4 border-end border-translucent"><a class="text-body-highlight" href="tel:{{ customer.phone }}">{{ customer.phone_number }}</a></td>
-                <td class="contact align-middle white-space-nowrap ps-4 border-end border-translucent fw-semibold text-body-highlight">{{ customer.national_id }}</td>
-                <td class="company align-middle white-space-nowrap text-body-tertiary text-opacity-85 ps-4 border-end border-translucent fw-semibold text-body-highlight">
-                  {{ customer.address }}</td>
-                <td class="date align-middle white-space-nowrap text-body-tertiary text-opacity-85 ps-4 text-body-tertiary">
-                  {% if customer.active %}
-                    <span class="badge badge-phoenix badge-phoenix-success"><i class="fas fa-check"></i> {{customer.active}}</span>
-                  {% else %}
-                    <span class="badge badge-phoenix badge-phoenix-danger"><i class="fas fa-times"></i> {{customer.active}}</span>
-                  {% endif %}
-                </td>
-                <td class="date align-middle white-space-nowrap text-body-tertiary text-opacity-85 ps-4 text-body-tertiary">{{ customer.created|date }}</td>
-                <td class="align-middle white-space-nowrap text-end pe-0 ps-4">
-                  {% if perms.inventory.change_customer %}
-                    <a href="{% url 'customer_update' request.dealer.slug customer.slug %}" class="btn btn-sm btn-phoenix-primary me-2" data-url="{% url 'customer_update' request.dealer.slug customer.slug %}">
-                      <i class="fas fa-pen"></i>
-                    </a>
-                  {% endif %}
-                  {% if perms.inventory.delete_customer %}
-                    <button class="btn btn-phoenix-danger btn-sm delete-btn"
-                            data-url="{% url 'customer_delete' request.dealer.slug customer.slug %}"
-                            data-message="{{ _("Are you sure you want to delete this customer")}}"
-                            data-bs-toggle="modal" data-bs-target="#deleteModal">
-                      <i class="fas fa-trash"></i>
-                    </button>
-                  {% endif %}
-                </td>
-              </tr>
-            {% endfor %}
-          </tbody>
-    {% endif %}
-  </table>
-  {% if page_obj.paginator.num_pages > 1 %}
-
-    <div class="d-flex justify-content-end mt-3">
-
-      <div class="d-flex">
-        {% include 'partials/pagination.html'%}
-      </div>
-
-    </div>
-  {% endif %}
-  {% include 'modal/delete_modal.html' %}
-{% endblock %}
\ No newline at end of file
+            </table>
+            {% if page_obj.paginator.num_pages > 1 %}
+                <div class="d-flex justify-content-end mt-3">
+                    <div class="d-flex">{% include 'partials/pagination.html' %}</div>
+                </div>
+            {% endif %}
+            {% include 'modal/delete_modal.html' %}
+        {% endblock %}
diff --git a/templates/customers/note_form.html b/templates/customers/note_form.html
index 097b4480..7c30316e 100644
--- a/templates/customers/note_form.html
+++ b/templates/customers/note_form.html
@@ -1,7 +1,8 @@
 {% load i18n static crispy_forms_filters %}
-
-<form method="post" action="{% url 'add_note_to_customer' request.dealer.slug customer.slug %}" enctype="multipart/form-data">
+<form method="post"
+      action="{% url 'add_note_to_customer' request.dealer.slug customer.slug %}"
+      enctype="multipart/form-data">
     {% csrf_token %}
     {{ form|crispy }}
     <button type="submit" class="btn btn-sm btn-phoenix-success w-100">{{ _("Add") }}</button>
-</form>
\ No newline at end of file
+</form>
diff --git a/templates/customers/view_customer.html b/templates/customers/view_customer.html
index f06bd1b2..08d29783 100644
--- a/templates/customers/view_customer.html
+++ b/templates/customers/view_customer.html
@@ -1,212 +1,251 @@
 {% extends "base.html" %}
-{% load i18n static crispy_forms_filters custom_filters%}
-
-{% block title %}{{ _("View Customer") }}{% endblock title %}
-
+{% load i18n static crispy_forms_filters custom_filters %}
+{% block title %}
+    {{ _("View Customer") }}
+{% endblock title %}
 {% block content %}
-  {% include 'modal/delete_modal.html' %}
-
-  <div class="row">
-    <div class="mb-9">
-      <div class="row align-items-center justify-content-between g-3 mb-4">
-        <div class="col-auto">
-          <h3 class="mb-0">{% trans 'Customer details' %}</h3>
-        </div>
-        <div class="col-auto">
-          <div class="row g-3">
-            
-
-            <div class="col-auto">
-              {% if perms.inventory.change_customer %}
-                <a href="{% url 'customer_update' request.dealer.slug customer.slug %}" class="btn btn-sm btn-phoenix-primary"><span class="fa-solid fa-pen-to-square me-2"></span>{{_("Update")}}</a>
-              {% endif %}
-            </div>
-            
-            {% if perms.inventory.delete_customer%}
-            <div class="col-auto">
-                <button class="btn btn-phoenix-danger btn-sm delete-btn"
-                        data-url="{% url 'customer_delete' request.dealer.slug customer.slug %}"
-                        data-message="Are you sure you want to delete this customer?"
-                        data-bs-toggle="modal" data-bs-target="#deleteModal">
-                  <i class="fas fa-trash me-1"> </i>{{ _("Delete") }}
-                </button>
-            </div>
-            {% endif %}
-
-          </div>
-        </div>
-      </div>
-      <div class="row g-5">
-        <div class="col-12 col-xxl-4">
-          <div class="row g-3 h-100">
-            <div class="col-12 col-md-7 col-xxl-12">
-              <div class="card h-100 h-xxl-auto">
-                <div class="card-body d-flex flex-column justify-content-between pb-3">
-                  <div class="row align-items-center g-5 mb-3 text-center text-sm-start">
-                    <div class="col-12 col-sm-auto mb-sm-2">
-                      <div class="avatar avatar-5xl">
-                        {% if customer.image %}
-                          <img class="rounded-circle" src="{{ customer.image.url }}" alt="" />
+    {% include 'modal/delete_modal.html' %}
+    <div class="row">
+        <div class="mb-9">
+            <div class="row align-items-center justify-content-between g-3 mb-4">
+                <div class="col-auto">
+                    <h3 class="mb-0">{% trans 'Customer details' %}</h3>
+                </div>
+                <div class="col-auto">
+                    <div class="row g-3">
+                        <div class="col-auto">
+                            {% if perms.inventory.change_customer %}
+                                <a href="{% url 'customer_update' request.dealer.slug customer.slug %}"
+                                   class="btn btn-sm btn-phoenix-primary"><span class="fa-solid fa-pen-to-square me-2"></span>{{ _("Update") }}</a>
+                            {% endif %}
+                        </div>
+                        {% if perms.inventory.delete_customer %}
+                            <div class="col-auto">
+                                <button class="btn btn-phoenix-danger btn-sm delete-btn"
+                                        data-url="{% url 'customer_delete' request.dealer.slug customer.slug %}"
+                                        data-message="Are you sure you want to delete this customer?"
+                                        data-bs-toggle="modal"
+                                        data-bs-target="#deleteModal">
+                                    <i class="fas fa-trash me-1"> </i>{{ _("Delete") }}
+                                </button>
+                            </div>
                         {% endif %}
-                      </div>
                     </div>
-                    <div class="col-12 col-sm-auto flex-1">
-                      <h3>{{ customer.full_name }}</h3>
-                      <p class="text-body-secondary">{{ customer.created|timesince}}</p>
-                    </div>
-                  </div>
-                  <div class="d-flex justify-content-between border-top border-dashed pt-4">
-                    <div>
-                      <h6>{% trans 'Invoices' %}</h6>
-                      <p class="fs-7 text-body-secondary mb-0">{{invoices.count}}</p>
-                    </div>
-                    <div>
-                      <h6>{% trans 'Quotations' %}</h6>
-                      <p class="fs-7 text-body-secondary mb-0">{{estimates.count}}</p>
-                    </div>
-                  </div>
                 </div>
-              </div>
             </div>
-            <div class="col-12 col-md-5 col-xxl-12">
-              <div class="card">
-                <div class="card-body">
-                  <div class="d-flex align-items-center mb-3">
-                    <h3 class="me-1">{% trans 'Default Address' %}</h3>
-                    <button class="btn btn-link p-0"><span class="fas fa-pen fs-8 ms-3 text-body-quaternary"></span></button>
-                  </div>
-                  <h5 class="text-body-secondary">{{ _("Address") }}</h5>
-                  <p class="text-body-secondary">{{ customer.address}}</p>
-                  <div class="mb-3">
-                    <h5 class="text-body-secondary">{% trans 'Email' %}</h5><a href="{{ customer.email}}">{{ customer.email }}</a>
-                  </div>
-                  <h5 class="text-body-secondary">{% trans 'Phone Number' %}</h5><a class="text-body-secondary" href="#">{{ customer.phone_number }}</a>
-                </div>
-              </div>
-            </div>
-            <div class="col-12">
-              <div class="card">
-                <div class="card-body">
-                  {% if perms.inventory.change_customer%}
-                  <div class="d-flex align-items-center justify-content-end">
-                     <a id="addBtn" href="#" class="btn btn-sm btn-phoenix-primary mb-3" data-url="{% url 'add_note_to_customer' request.dealer.slug customer.slug %}" data-bs-toggle="modal" data-bs-target="#noteModal" data-note-title="{{ _("Add") }}<i class='fa fa-plus-circle text-success ms-2'></i>">
-                      <span class="fas fa-plus me-1"></span>
-                      {% trans 'Add Note' %}
-                    </a>
-                  </div>
-                  {% endif %}
-                  <table class="table fs-9 mb-0 table-responsive">
-                    <tr>
-                      <th class="align-middle pe-6 text-start" scope="col">{{ _("Note") }}</th>
-                      <th class="align-middle pe-6 text-start" scope="col">{{ _("Date") }}</th>
-                    </tr>
-                    <tbody>
-                      {% for note in customer_notes %}
-                        <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                          <td class="align-middle  text-start fw-bold text-body-tertiary ps-1">{{note.note}}</td>
-                          <td class="align-middle text-body-tertiary text-start white-space-nowrap">{{ note.created }}</td>
-                        </tr>
-                      {% endfor %}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="col-12 col-xxl-8">
-          <div class="mb-6">
-            <h3 class="mb-4">{{ _("Related") }} <span class="text-body-tertiary fw-normal">({{ total }})</span></h3>
-            <div class="border-top border-bottom border-translucent" id="customerOrdersTable" data-list='{"valueNames":["order","total","payment_status","fulfilment_status","delivery_type","date"],"page":6,"pagination":true}'>
-              <div class="table-responsive scrollbar">
-                <table class="table table-sm fs-9 mb-0">
-                  <thead>
-                    <tr>
-                      <th class="sort white-space-nowrap align-middle ps-0 pe-3" scope="col" data-sort="order">{% trans 'Type'|upper %}</th>
-                      <th class="sort align-middle text-end pe-7" scope="col" data-sort="total">{% trans 'Total'|upper %}</th>
-                      <th class="sort align-middle white-space-nowrap pe-3" scope="col" data-sort="payment_status">{% trans 'Payment Status'|upper %}</th>
-                      <th class="sort align-middle text-end pe-0" scope="col" data-sort="date">{% trans 'Date'|upper %}</th>
-                      <th class="sort text-end align-middle pe-0 ps-5" scope="col"></th>
-                    </tr>
-                  </thead>
-                  <tbody class="list" id="customer-order-table-body">
-                    {% for estimate in estimates %}
-                      <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                        <td class="order align-middle white-space-nowrap ps-0">
-
-                          <p class="fw-semibold mb-0" >{{ _("Quotation") }}-<span class="fs-10 fw-medium">{{ estimate.estimate_number }}</span></p>
-                        </td>
-                        <td class="total align-middle text-end fw-semibold pe-7 text-body-highlight">{{ estimate.revenue_estimate|currency_format }} <span class="icon-saudi_riyal"></span> </td>
-                        <td class="payment_status align-middle white-space-nowrap text-start fw-bold text-body-tertiary">
-
-                        </td>
-
-                        <td class="date align-middle white-space-nowrap text-body-tertiary fs-9 ps-4 text-end">{{ estimate.created }}</td>
-                        <td class="align-middle white-space-nowrap text-end pe-0 ps-5">
-                          <div class="btn-reveal-trigger position-static">
-                            <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
-                            <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
-                              <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
+            <div class="row g-5">
+                <div class="col-12 col-xxl-4">
+                    <div class="row g-3 h-100">
+                        <div class="col-12 col-md-7 col-xxl-12">
+                            <div class="card h-100 h-xxl-auto">
+                                <div class="card-body d-flex flex-column justify-content-between pb-3">
+                                    <div class="row align-items-center g-5 mb-3 text-center text-sm-start">
+                                        <div class="col-12 col-sm-auto mb-sm-2">
+                                            <div class="avatar avatar-5xl">
+                                                {% if customer.image %}<img class="rounded-circle" src="{{ customer.image.url }}" alt="" />{% endif %}
+                                            </div>
+                                        </div>
+                                        <div class="col-12 col-sm-auto flex-1">
+                                            <h3>{{ customer.full_name }}</h3>
+                                            <p class="text-body-secondary">{{ customer.created|timesince }}</p>
+                                        </div>
+                                    </div>
+                                    <div class="d-flex justify-content-between border-top border-dashed pt-4">
+                                        <div>
+                                            <h6>{% trans 'Invoices' %}</h6>
+                                            <p class="fs-7 text-body-secondary mb-0">{{ invoices.count }}</p>
+                                        </div>
+                                        <div>
+                                            <h6>{% trans 'Quotations' %}</h6>
+                                            <p class="fs-7 text-body-secondary mb-0">{{ estimates.count }}</p>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
-                          </div>
-                        </td>
-                      </tr>
-                    {% endfor %}
-                    {% for invoice in invoices %}
-                      <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                        <td class="order align-middle white-space-nowrap ps-0">
-
-                          <p class="fw-semibold mb-0" >{{ _("Invoice") }}-<span class="fs-10 fw-medium">{{ invoice.invoice_number }}</span></p>
-                        </td>
-                        <td class="total align-middle text-end fw-semibold pe-7 text-body-highlight">{{ invoice.amount_paid|currency_format }} <span class="icon-saudi_riyal"></span> </td>
-                        <td class="payment_status align-middle white-space-nowrap text-start fw-bold text-body-tertiary">
-                          {% if invoice.is_paid %}
-                            <span class="badge badge-phoenix fs-10 badge-phoenix-success">
-                              <span class="badge-label">{{ _("Paid") }}</span>
-                              <span class="ms-1" data-feather="check" style="height:12.8px;width:12.8px;"></span>
-                            </span>
-
-
-                          {% endif %}
-                        </td>
-                        <td class="date align-middle white-space-nowrap text-body-tertiary fs-9 ps-4 text-end">{{ invoice.created }}</td>
-                        <td class="align-middle white-space-nowrap text-end pe-0 ps-5">
-                          <div class="btn-reveal-trigger position-static">
-                            <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
-                            <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
-                              <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
+                        </div>
+                        <div class="col-12 col-md-5 col-xxl-12">
+                            <div class="card">
+                                <div class="card-body">
+                                    <div class="d-flex align-items-center mb-3">
+                                        <h3 class="me-1">{% trans 'Default Address' %}</h3>
+                                        <button class="btn btn-link p-0">
+                                            <span class="fas fa-pen fs-8 ms-3 text-body-quaternary"></span>
+                                        </button>
+                                    </div>
+                                    <h5 class="text-body-secondary">{{ _("Address") }}</h5>
+                                    <p class="text-body-secondary">{{ customer.address }}</p>
+                                    <div class="mb-3">
+                                        <h5 class="text-body-secondary">{% trans 'Email' %}</h5>
+                                        <a href="{{ customer.email }}">{{ customer.email }}</a>
+                                    </div>
+                                    <h5 class="text-body-secondary">{% trans 'Phone Number' %}</h5>
+                                    <a class="text-body-secondary" href="#">{{ customer.phone_number }}</a>
+                                </div>
                             </div>
-                          </div>
-                        </td>
-                      </tr>
-                    {% endfor %}
-
-                  </tbody>
-                </table>
-              </div>
-              {% include 'partials/pagination.html' %}
+                        </div>
+                        <div class="col-12">
+                            <div class="card">
+                                <div class="card-body">
+                                    {% if perms.inventory.change_customer %}
+                                        <div class="d-flex align-items-center justify-content-end">
+                                            <a id="addBtn"
+                                               href="#"
+                                               class="btn btn-sm btn-phoenix-primary mb-3"
+                                               data-url="{% url 'add_note_to_customer' request.dealer.slug customer.slug %}"
+                                               data-bs-toggle="modal"
+                                               data-bs-target="#noteModal"
+                                               data-note-title="{{ _("Add") }}<i class='fa fa-plus-circle text-success ms-2'></i>">
+                                                <span class="fas fa-plus me-1"></span>
+                                                {% trans 'Add Note' %}
+                                            </a>
+                                        </div>
+                                    {% endif %}
+                                    <table class="table fs-9 mb-0 table-responsive">
+                                        <tr>
+                                            <th class="align-middle pe-6 text-start" scope="col">{{ _("Note") }}</th>
+                                            <th class="align-middle pe-6 text-start" scope="col">{{ _("Date") }}</th>
+                                        </tr>
+                                        <tbody>
+                                            {% for note in customer_notes %}
+                                                <tr class="hover-actions-trigger btn-reveal-trigger position-static">
+                                                    <td class="align-middle  text-start fw-bold text-body-tertiary ps-1">{{ note.note }}</td>
+                                                    <td class="align-middle text-body-tertiary text-start white-space-nowrap">{{ note.created }}</td>
+                                                </tr>
+                                            {% endfor %}
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12 col-xxl-8">
+                    <div class="mb-6">
+                        <h3 class="mb-4">
+                            {{ _("Related") }} <span class="text-body-tertiary fw-normal">({{ total }})</span>
+                        </h3>
+                        <div class="border-top border-bottom border-translucent"
+                             id="customerOrdersTable"
+                             data-list='{"valueNames":["order","total","payment_status","fulfilment_status","delivery_type","date"],"page":6,"pagination":true}'>
+                            <div class="table-responsive scrollbar">
+                                <table class="table table-sm fs-9 mb-0">
+                                    <thead>
+                                        <tr>
+                                            <th class="sort white-space-nowrap align-middle ps-0 pe-3"
+                                                scope="col"
+                                                data-sort="order">{% trans 'Type'|upper %}</th>
+                                            <th class="sort align-middle text-end pe-7" scope="col" data-sort="total">{% trans 'Total'|upper %}</th>
+                                            <th class="sort align-middle white-space-nowrap pe-3"
+                                                scope="col"
+                                                data-sort="payment_status">{% trans 'Payment Status'|upper %}</th>
+                                            <th class="sort align-middle text-end pe-0" scope="col" data-sort="date">{% trans 'Date'|upper %}</th>
+                                            <th class="sort text-end align-middle pe-0 ps-5" scope="col"></th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="list" id="customer-order-table-body">
+                                        {% for estimate in estimates %}
+                                            <tr class="hover-actions-trigger btn-reveal-trigger position-static">
+                                                <td class="order align-middle white-space-nowrap ps-0">
+                                                    <p class="fw-semibold mb-0">
+                                                        {{ _("Quotation") }}-<span class="fs-10 fw-medium">{{ estimate.estimate_number }}</span>
+                                                    </p>
+                                                </td>
+                                                <td class="total align-middle text-end fw-semibold pe-7 text-body-highlight">
+                                                    {{ estimate.revenue_estimate|currency_format }} <span class="icon-saudi_riyal"></span>
+                                                </td>
+                                                <td class="payment_status align-middle white-space-nowrap text-start fw-bold text-body-tertiary"></td>
+                                                <td class="date align-middle white-space-nowrap text-body-tertiary fs-9 ps-4 text-end">{{ estimate.created }}</td>
+                                                <td class="align-middle white-space-nowrap text-end pe-0 ps-5">
+                                                    <div class="btn-reveal-trigger position-static">
+                                                        <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
+                                                                type="button"
+                                                                data-bs-toggle="dropdown"
+                                                                data-boundary="window"
+                                                                aria-haspopup="true"
+                                                                aria-expanded="false"
+                                                                data-bs-reference="parent">
+                                                            <span class="fas fa-ellipsis-h fs-10"></span>
+                                                        </button>
+                                                        <div class="dropdown-menu dropdown-menu-end py-2">
+                                                            <a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
+                                                            <div class="dropdown-divider"></div>
+                                                            <a class="dropdown-item text-danger" href="#!">Remove</a>
+                                                        </div>
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        {% endfor %}
+                                        {% for invoice in invoices %}
+                                            <tr class="hover-actions-trigger btn-reveal-trigger position-static">
+                                                <td class="order align-middle white-space-nowrap ps-0">
+                                                    <p class="fw-semibold mb-0">
+                                                        {{ _("Invoice") }}-<span class="fs-10 fw-medium">{{ invoice.invoice_number }}</span>
+                                                    </p>
+                                                </td>
+                                                <td class="total align-middle text-end fw-semibold pe-7 text-body-highlight">
+                                                    {{ invoice.amount_paid|currency_format }} <span class="icon-saudi_riyal"></span>
+                                                </td>
+                                                <td class="payment_status align-middle white-space-nowrap text-start fw-bold text-body-tertiary">
+                                                    {% if invoice.is_paid %}
+                                                        <span class="badge badge-phoenix fs-10 badge-phoenix-success">
+                                                            <span class="badge-label">{{ _("Paid") }}</span>
+                                                            <span class="ms-1" data-feather="check" style="height:12.8px;width:12.8px;"></span>
+                                                        </span>
+                                                    {% endif %}
+                                                </td>
+                                                <td class="date align-middle white-space-nowrap text-body-tertiary fs-9 ps-4 text-end">{{ invoice.created }}</td>
+                                                <td class="align-middle white-space-nowrap text-end pe-0 ps-5">
+                                                    <div class="btn-reveal-trigger position-static">
+                                                        <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
+                                                                type="button"
+                                                                data-bs-toggle="dropdown"
+                                                                data-boundary="window"
+                                                                aria-haspopup="true"
+                                                                aria-expanded="false"
+                                                                data-bs-reference="parent">
+                                                            <span class="fas fa-ellipsis-h fs-10"></span>
+                                                        </button>
+                                                        <div class="dropdown-menu dropdown-menu-end py-2">
+                                                            <a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
+                                                            <div class="dropdown-divider"></div>
+                                                            <a class="dropdown-item text-danger" href="#!">Remove</a>
+                                                        </div>
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        {% endfor %}
+                                    </tbody>
+                                </table>
+                            </div>
+                            {% include 'partials/pagination.html' %}
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
-      </div>
-    </div>
-    <div class="modal fade" id="noteModal" tabindex="-1" aria-labelledby="noteModalLabel" aria-hidden="true">
-      <div class="modal-dialog modal-sm">
-        <div class="modal-content">
-          <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
-            <h4 class="modal-title" id="noteModalLabel">{% trans 'Notes' %}</h4>
-            <button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close">
-              <span class="fas fa-times"></span>
-            </button>
-          </div>
-          <div class="modal-body">
-        <!-- Content will be loaded here via AJAX -->
-          </div>
+        <div class="modal fade"
+             id="noteModal"
+             tabindex="-1"
+             aria-labelledby="noteModalLabel"
+             aria-hidden="true">
+            <div class="modal-dialog modal-sm">
+                <div class="modal-content">
+                    <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
+                        <h4 class="modal-title" id="noteModalLabel">{% trans 'Notes' %}</h4>
+                        <button class="btn p-0 text-body-quaternary fs-6"
+                                data-bs-dismiss="modal"
+                                aria-label="Close">
+                            <span class="fas fa-times"></span>
+                        </button>
+                    </div>
+                    <div class="modal-body">
+                        <!-- Content will be loaded here via AJAX -->
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
-  <script>
+    <script>
     document.addEventListener("DOMContentLoaded", function () {
       const noteModal = document.getElementById("noteModal");
       const modalTitle = document.getElementById("noteModalLabel");
@@ -230,5 +269,5 @@
           });
       });
     });
-  </script>
-{% endblock %}
\ No newline at end of file
+    </script>
+{% endblock %}
diff --git a/templates/dashboards/crm.html b/templates/dashboards/crm.html
index 8c8b72bb..d89bf990 100644
--- a/templates/dashboards/crm.html
+++ b/templates/dashboards/crm.html
@@ -1,313 +1,508 @@
 {% extends 'base.html' %}
 {% load i18n static %}
-
-
 {% block content %}
-
-
-  <div class="content">
-    <div class="row gy-3 mb-4 justify-content-between">
-      <div class="col-xxl-6">
-        <h2 class="mb-2 text-body-emphasis">CRM Dashboard</h2>
-        <h5 class="text-body-tertiary fw-semibold mb-4">Check your business growth in one place</h5>
-        <div class="row g-3 mb-3">
-          <div class="col-sm-6 col-md-4 col-xl-3 col-xxl-4">
-            <div class="card h-100">
-              <div class="card-body">
-                <div class="d-flex d-sm-block justify-content-between">
-                  <div class="border-bottom-sm border-translucent mb-sm-4">
-                    <div class="d-flex align-items-center">
-                      <div class="d-flex align-items-center icon-wrapper-sm shadow-primary-100" style="transform: rotate(-7.45deg);"><span class="fa-solid fa-phone-alt text-primary fs-7 z-1 ms-2"></span></div>
-                      <p class="text-body-tertiary fs-9 mb-0 ms-2 mt-3">Outgoing call</p>
+    <div class="content">
+        <div class="row gy-3 mb-4 justify-content-between">
+            <div class="col-xxl-6">
+                <h2 class="mb-2 text-body-emphasis">CRM Dashboard</h2>
+                <h5 class="text-body-tertiary fw-semibold mb-4">Check your business growth in one place</h5>
+                <div class="row g-3 mb-3">
+                    <div class="col-sm-6 col-md-4 col-xl-3 col-xxl-4">
+                        <div class="card h-100">
+                            <div class="card-body">
+                                <div class="d-flex d-sm-block justify-content-between">
+                                    <div class="border-bottom-sm border-translucent mb-sm-4">
+                                        <div class="d-flex align-items-center">
+                                            <div class="d-flex align-items-center icon-wrapper-sm shadow-primary-100"
+                                                 style="transform: rotate(-7.45deg)">
+                                                <span class="fa-solid fa-phone-alt text-primary fs-7 z-1 ms-2"></span>
+                                            </div>
+                                            <p class="text-body-tertiary fs-9 mb-0 ms-2 mt-3">Outgoing call</p>
+                                        </div>
+                                        <p class="text-primary mt-2 fs-6 fw-bold mb-0 mb-sm-4">
+                                            3 <span class="fs-8 text-body lh-lg">Leads Today</span>
+                                        </p>
+                                    </div>
+                                    <div class="d-flex flex-column justify-content-center flex-between-end d-sm-block text-end text-sm-start">
+                                        <span class="badge badge-phoenix badge-phoenix-success fs-10 mb-2">+24.5%</span>
+                                        <p class="mb-0 fs-9 text-body-tertiary">Than Yesterday</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <p class="text-primary mt-2 fs-6 fw-bold mb-0 mb-sm-4">3 <span class="fs-8 text-body lh-lg">Leads Today</span></p>
-                  </div>
-                  <div class="d-flex flex-column justify-content-center flex-between-end d-sm-block text-end text-sm-start"><span class="badge badge-phoenix badge-phoenix-success fs-10 mb-2">+24.5%</span>
-                    <p class="mb-0 fs-9 text-body-tertiary">Than Yesterday</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-sm-6 col-md-4 col-xl-3 col-xxl-4">
-            <div class="card h-100">
-              <div class="card-body">
-                <div class="d-flex d-sm-block justify-content-between">
-                  <div class="border-bottom-sm border-translucent mb-sm-4">
-                    <div class="d-flex align-items-center">
-                      <div class="d-flex align-items-center icon-wrapper-sm shadow-info-100" style="transform: rotate(-7.45deg);"><span class="fa-solid fa-calendar text-info fs-7 z-1 ms-2"></span></div>
-                      <p class="text-body-tertiary fs-9 mb-0 ms-2 mt-3">Outgoing meeting</p>
+                    <div class="col-sm-6 col-md-4 col-xl-3 col-xxl-4">
+                        <div class="card h-100">
+                            <div class="card-body">
+                                <div class="d-flex d-sm-block justify-content-between">
+                                    <div class="border-bottom-sm border-translucent mb-sm-4">
+                                        <div class="d-flex align-items-center">
+                                            <div class="d-flex align-items-center icon-wrapper-sm shadow-info-100"
+                                                 style="transform: rotate(-7.45deg)">
+                                                <span class="fa-solid fa-calendar text-info fs-7 z-1 ms-2"></span>
+                                            </div>
+                                            <p class="text-body-tertiary fs-9 mb-0 ms-2 mt-3">Outgoing meeting</p>
+                                        </div>
+                                        <p class="text-info mt-2 fs-6 fw-bold mb-0 mb-sm-4">
+                                            12 <span class="fs-8 text-body lh-lg">This Week</span>
+                                        </p>
+                                    </div>
+                                    <div class="d-flex flex-column justify-content-center flex-between-end d-sm-block text-end text-sm-start">
+                                        <span class="badge badge-phoenix badge-phoenix-warning fs-10 mb-2">+24.5%</span>
+                                        <p class="mb-0 fs-9 text-body-tertiary">Than last week</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4 col-xl-6 col-xxl-4 gy-5 gy-md-3">
+                        <div class="border-bottom border-translucent">
+                            <h5 class="pb-4 border-bottom border-translucent">Top 5 Lead Sources</h5>
+                            <ul class="list-group list-group-flush">
+                                <li class="list-group-item bg-transparent list-group-crm fw-bold text-body fs-9 py-2">
+                                    <div class="d-flex justify-content-between">
+                                        <span class="fw-normal fs-9 mx-1"> <span class="fw-bold">1.</span>None </span><span>(65)</span>
+                                    </div>
+                                </li>
+                                <li class="list-group-item bg-transparent list-group-crm fw-bold text-body fs-9 py-2">
+                                    <div class="d-flex justify-content-between">
+                                        <span class="fw-normal mx-1"><span class="fw-bold">2.</span>Online Store</span><span>(74)</span>
+                                    </div>
+                                </li>
+                                <li class="list-group-item bg-transparent list-group-crm fw-bold text-body fs-9 py-2">
+                                    <div class="d-flex justify-content-between">
+                                        <span class="fw-normal fs-9 mx-1"><span class="fw-bold">3.</span> Advertisement</span><span>(32)</span>
+                                    </div>
+                                </li>
+                                <li class="list-group-item bg-transparent list-group-crm fw-bold text-body fs-9 py-2">
+                                    <div class="d-flex justify-content-between">
+                                        <span class="fw-normal fs-9 mx-1"><span class="fw-bold">4.</span> Seminar Partner</span><span>(25)</span>
+                                    </div>
+                                </li>
+                                <li class="list-group-item bg-transparent list-group-crm fw-bold text-body fs-9 py-2">
+                                    <div class="d-flex justify-content-between">
+                                        <span class="fw-normal fs-9 mx-1"> <span class="fw-bold">5.</span> Partner</span><span>(23)</span>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
                     </div>
-                    <p class="text-info mt-2 fs-6 fw-bold mb-0 mb-sm-4">12 <span class="fs-8 text-body lh-lg">This Week</span></p>
-                  </div>
-                  <div class="d-flex flex-column justify-content-center flex-between-end d-sm-block text-end text-sm-start"><span class="badge badge-phoenix badge-phoenix-warning fs-10 mb-2">+24.5%</span>
-                    <p class="mb-0 fs-9 text-body-tertiary">Than last week</p>
-                  </div>
                 </div>
-              </div>
             </div>
-          </div>
-          <div class="col-md-4 col-xl-6 col-xxl-4 gy-5 gy-md-3">
-            <div class="border-bottom border-translucent">
-              <h5 class="pb-4 border-bottom border-translucent">Top 5 Lead Sources</h5>
-              <ul class="list-group list-group-flush">
-                <li class="list-group-item bg-transparent list-group-crm fw-bold text-body fs-9 py-2">
-                  <div class="d-flex justify-content-between"><span class="fw-normal fs-9 mx-1"> <span class="fw-bold">1. </span>None </span><span>(65)</span></div>
-                </li>
-                <li class="list-group-item bg-transparent list-group-crm fw-bold text-body fs-9 py-2">
-                  <div class="d-flex justify-content-between"><span class="fw-normal mx-1"><span class="fw-bold">2. </span>Online Store</span><span>(74)</span></div>
-                </li>
-                <li class="list-group-item bg-transparent list-group-crm fw-bold text-body fs-9 py-2">
-                  <div class="d-flex justify-content-between"><span class="fw-normal fs-9 mx-1"><span class="fw-bold">3.</span> Advertisement</span><span>(32)</span></div>
-                </li>
-                <li class="list-group-item bg-transparent list-group-crm fw-bold text-body fs-9 py-2">
-                  <div class="d-flex justify-content-between"><span class="fw-normal fs-9 mx-1"><span class="fw-bold">4.</span> Seminar Partner</span><span>(25)</span></div>
-                </li>
-                <li class="list-group-item bg-transparent list-group-crm fw-bold text-body fs-9 py-2">
-                  <div class="d-flex justify-content-between"><span class="fw-normal fs-9 mx-1"> <span class="fw-bold">5.</span> Partner</span><span>(23)</span></div>
-                </li>
-              </ul>
+            <div class="col-xxl-6 mb-6">
+                <h3>Contacts Created</h3>
+                <p class="text-body-tertiary mb-1">Payment received across all channels</p>
+                <div class="echart-contacts-created" style="min-height:270px; width:100%"></div>
             </div>
-          </div>
-        </div>
-      </div>
-      <div class="col-xxl-6 mb-6">
-        <h3>Contacts Created</h3>
-        <p class="text-body-tertiary mb-1">Payment received across all channels</p>
-        <div class="echart-contacts-created" style="min-height:270px; width:100%"></div>
-      </div>
-      <div class="col-12 col-xxl-6 mb-3 mb-sm-0">
-        <div class="row">
-          <div class="col-sm-7 col-md-8 col-xxl-8 mb-md-3 mb-lg-0">
-            <h3>New Contacts by Source</h3>
-            <p class="text-body-tertiary">Payment received across all channels</p>
-            <div class="row g-0">
-              <div class="col-6 col-xl-4">
-                <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-translucent">
-                  <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-primary" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Organic</span></div>
-                  <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">80</h3>
+            <div class="col-12 col-xxl-6 mb-3 mb-sm-0">
+                <div class="row">
+                    <div class="col-sm-7 col-md-8 col-xxl-8 mb-md-3 mb-lg-0">
+                        <h3>New Contacts by Source</h3>
+                        <p class="text-body-tertiary">Payment received across all channels</p>
+                        <div class="row g-0">
+                            <div class="col-6 col-xl-4">
+                                <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-translucent">
+                                    <div class="d-flex align-items-center mb-1">
+                                        <span class="fa-solid fa-square fs-11 me-2 text-primary"
+                                              data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Organic</span>
+                                    </div>
+                                    <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">80</h3>
+                                </div>
+                            </div>
+                            <div class="col-6 col-xl-4">
+                                <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end-md-0 border-end-xl border-translucent">
+                                    <div class="d-flex align-items-center mb-1">
+                                        <span class="fa-solid fa-square fs-11 me-2 text-success"
+                                              data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Paid Search</span>
+                                    </div>
+                                    <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">65</h3>
+                                </div>
+                            </div>
+                            <div class="col-6 col-xl-4">
+                                <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-end-md border-end-xl-0 border-translucent">
+                                    <div class="d-flex align-items-center mb-1">
+                                        <span class="fa-solid fa-square fs-11 me-2 text-info"
+                                              data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Direct</span>
+                                    </div>
+                                    <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">40</h3>
+                                </div>
+                            </div>
+                            <div class="col-6 col-xl-4">
+                                <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end-xl border-bottom border-bottom-xl-0 border-translucent">
+                                    <div class="d-flex align-items-center mb-1">
+                                        <span class="fa-solid fa-square fs-11 me-2 text-info-light"
+                                              data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Social</span>
+                                    </div>
+                                    <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">220</h3>
+                                </div>
+                            </div>
+                            <div class="col-6 col-xl-4">
+                                <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end border-translucent">
+                                    <div class="d-flex align-items-center mb-1">
+                                        <span class="fa-solid fa-square fs-11 me-2 text-danger-lighter"
+                                              data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Referrals</span>
+                                    </div>
+                                    <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">120</h3>
+                                </div>
+                            </div>
+                            <div class="col-6 col-xl-4">
+                                <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100">
+                                    <div class="d-flex align-items-center mb-1">
+                                        <span class="fa-solid fa-square fs-11 me-2 text-warning-light"
+                                              data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Others</span>
+                                    </div>
+                                    <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">35</h3>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-sm-5 col-md-4 col-xxl-4 my-3 my-sm-0">
+                        <div class="position-relative d-flex flex-center mb-sm-4 mb-xl-0 echart-contact-by-source-row mt-sm-7 mt-lg-4 mt-xl-0">
+                            <div class="echart-contact-by-source" style="min-height:245px;width:100%"></div>
+                            <div class="position-absolute rounded-circle bg-primary-subtle top-50 start-50 translate-middle d-flex flex-center"
+                                 style="height:100px;
+                                        width:100px">
+                                <h3 class="mb-0 text-primary-dark fw-bolder" data-label="data-label"></h3>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-              </div>
-              <div class="col-6 col-xl-4">
-                <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end-md-0 border-end-xl border-translucent">
-                  <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-success" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Paid Search</span></div>
-                  <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">65</h3>
+            </div>
+            <div class="col-12 col-xxl-6 mb-8">
+                <div class="mb-3">
+                    <h3>New Users &amp; Leads</h3>
+                    <p class="text-body-tertiary mb-0">Payment received across all channels</p>
                 </div>
-              </div>
-              <div class="col-6 col-xl-4">
-                <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-end-md border-end-xl-0 border-translucent">
-                  <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-info" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Direct</span></div>
-                  <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">40</h3>
+                <div class="row g-6">
+                    <div class="col-md-6 mb-2 mb-sm-0">
+                        <div class="d-flex align-items-center">
+                            <span class="me-2 text-info"
+                                  data-feather="users"
+                                  style="min-height:24px;
+                                         width:24px"></span>
+                            <h4 class="text-body-tertiary mb-0">
+                                New Users :<span class="text-body-emphasis">42</span>
+                            </h4>
+                            <span class="badge badge-phoenix fs-10 badge-phoenix-success d-inline-flex align-items-center ms-2"><span class="badge-label d-inline-block lh-base">+24.5%</span><span class="ms-1 fa-solid fa-caret-up d-inline-block lh-1"></span></span>
+                        </div>
+                        <div class="pb-0 pt-4">
+                            <div class="echarts-new-users" style="min-height:110px;width:100%;"></div>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="d-flex align-items-center">
+                            <span class="me-2 text-primary"
+                                  data-feather="zap"
+                                  style="height:24px;
+                                         width:24px"></span>
+                            <h4 class="text-body-tertiary mb-0">
+                                New Leads :<span class="text-body-emphasis">45</span>
+                            </h4>
+                            <span class="badge badge-phoenix fs-10 badge-phoenix-success d-inline-flex align-items-center ms-2"><span class="badge-label d-inline-block lh-base">+30.5%</span><span class="ms-1 fa-solid fa-caret-up d-inline-block lh-1"></span></span>
+                        </div>
+                        <div class="pb-0 pt-4">
+                            <div class="echarts-new-leads" style="min-height:110px;width:100%;"></div>
+                        </div>
+                    </div>
                 </div>
-              </div>
-              <div class="col-6 col-xl-4">
-                <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end-xl border-bottom border-bottom-xl-0 border-translucent">
-                  <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-info-light" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Social</span></div>
-                  <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">220</h3>
+            </div>
+            <div class="col-12 col-xxl-6">
+                <div class="row align-items-start justify-content-between mb-4 g-3">
+                    <div class="col-auto">
+                        <h3>Ad Clicks</h3>
+                        <p class="text-body-tertiary lh-sm mb-0">Check effectiveness of your ads</p>
+                    </div>
+                    <div class="col-12 col-sm-4">
+                        <select class="form-select form-select-sm" id="select-ad-clicks-month">
+                            <option>Mar 1 - 31, 2022</option>
+                            <option>April 1 - 30, 2022</option>
+                            <option>May 1 - 31, 2022</option>
+                        </select>
+                    </div>
                 </div>
-              </div>
-              <div class="col-6 col-xl-4">
-                <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end border-translucent">
-                  <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-danger-lighter" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Referrals</span></div>
-                  <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">120</h3>
+                <div class="echart-add-clicks-chart" style="min-height:385px;width:100%"></div>
+            </div>
+            <div class="col-12 col-xxl-6 mb-6 gy-0 gy-xxl-3">
+                <div class="row align-items-start justify-content-between mb-4 g-3">
+                    <div class="col-auto">
+                        <h3>
+                            Deal Forecast<span class="fw-semibold">- $90,303</span>
+                        </h3>
+                        <p class="text-body-tertiary mb-1">Show what you offer here</p>
+                    </div>
+                    <div class="col-12 col-sm-4">
+                        <select class="form-select form-select-sm" id="select-ad-forcast-month">
+                            <option>Mar 1 - 31, 2022</option>
+                            <option>April 1 - 30, 2022</option>
+                            <option>May 1 - 31, 2022</option>
+                        </select>
+                    </div>
                 </div>
-              </div>
-              <div class="col-6 col-xl-4">
-                <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100">
-                  <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-warning-light" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">Others</span></div>
-                  <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">35</h3>
+                <div class="w-100">
+                    <div class="d-flex flex-start">
+                        <p class="mb-2 text-body-tertiary fw-semibold fs-9"
+                           style="width: 20.72%">$21.0k</p>
+                        <p class="mb-2 text-body-tertiary fw-semibold fs-9"
+                           style="width: 35.76%">$3.4k</p>
+                        <p class="mb-2 text-body-tertiary fw-semibold fs-9"
+                           style="width: 25.38%">$15.1k</p>
+                        <p class="mb-2 text-body-tertiary fw-semibold fs-9"
+                           style="width: 25.14%">$4.6k</p>
+                    </div>
+                    <div class="progress mb-3 rounded-3" style="height: 10px;">
+                        <div class="progress-bar border-end border-2 bg-primary-dark"
+                             role="progressbar"
+                             style="width: 20.72%"
+                             aria-valuenow="20.72"
+                             aria-valuemin="0"
+                             aria-valuemax="100"
+                             data-bs-toggle="tooltip"
+                             data-bs-placement="top"
+                             title="Appointment"></div>
+                        <div class="progress-bar border-end border-2"
+                             role="progressbar"
+                             style="width: 35.76%"
+                             aria-valuenow="35.76"
+                             aria-valuemin="0"
+                             aria-valuemax="100"
+                             data-bs-toggle="tooltip"
+                             data-bs-placement="top"
+                             title="Qualified"></div>
+                        <div class="progress-bar bg-success border-end border-2"
+                             role="progressbar"
+                             style="width: 25.38%"
+                             aria-valuenow="25.38"
+                             aria-valuemin="0"
+                             aria-valuemax="100"
+                             data-bs-toggle="tooltip"
+                             data-bs-placement="top"
+                             title="Closed Won"></div>
+                        <div class="progress-bar bg-info"
+                             role="progressbar"
+                             style="width: 25.14%"
+                             aria-valuenow="25.14"
+                             aria-valuemin="0"
+                             aria-valuemax="100"
+                             data-bs-toggle="tooltip"
+                             data-bs-placement="top"
+                             title="Contact Sent"></div>
+                    </div>
+                </div>
+                <h4 class="mt-4 mb-3">Deal Forecast by Owner</h4>
+                <div class="border-top border-bottom-0"
+                     id="dealForecastTable"
+                     data-list='{"valueNames":["contact","appointment","qualified","closed-won","contact-sent"],"page":5}'>
+                    <div class="table-responsive scrollbar">
+                        <table class="table fs-9 mb-0">
+                            <thead>
+                                <tr>
+                                    <th class="sort border-end border-translucent white-space-nowrap align-middle ps-0 text-uppercase text-body-tertiary"
+                                        scope="col"
+                                        data-sort="contact"
+                                        style="width:15%;
+                                               min-width:100px">Contact</th>
+                                    <th class="sort border-end border-translucent align-middle text-end px-3 text-uppercase text-body-tertiary"
+                                        scope="col"
+                                        data-sort="appointment"
+                                        style="width:15%;
+                                               min-width:95px">
+                                        <div class="d-inline-flex flex-center">
+                                            <span class="fa-solid fa-square fs-11 text-primary me-2"
+                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9">Appointment</span>
+                                        </div>
+                                    </th>
+                                    <th class="sort border-end border-translucent align-middle text-end px-3 text-uppercase text-body-tertiary"
+                                        scope="col"
+                                        data-sort="qualified"
+                                        style="width:20%;
+                                               min-width:100px">
+                                        <div class="d-inline-flex flex-center">
+                                            <span class="fa-solid fa-square fs-11 text-primary-light me-2"
+                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9">Qualified</span>
+                                        </div>
+                                    </th>
+                                    <th class="sort border-end border-translucent align-middle text-end px-3 text-uppercase text-body-tertiary"
+                                        scope="col"
+                                        data-sort="closed-won"
+                                        style="width:20%;
+                                               min-width:100px">
+                                        <div class="d-inline-flex flex-center">
+                                            <span class="fa-solid fa-square fs-11 text-success me-2"
+                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9">Closed Won</span>
+                                        </div>
+                                    </th>
+                                    <th class="sort align-middle text-end ps-3 text-uppercase text-body-tertiary"
+                                        scope="col"
+                                        data-sort="contact-sent"
+                                        style="width:20%;
+                                               min-width:100px">
+                                        <div class="d-inline-flex flex-center">
+                                            <span class="fa-solid fa-square fs-11 text-info me-2"
+                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9">Contact Sent</span>
+                                        </div>
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody class="list" id="table-deal-forecast-body">
+                                <tr class="hover-actions-trigger btn-reveal-trigger position-static">
+                                    <td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3">
+                                        <a class="fw-semibold" href="#!">Carrie Anne</a>
+                                    </td>
+                                    <td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">
+                                        1000
+                                    </td>
+                                    <td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">
+                                        $1256
+                                    </td>
+                                    <td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">
+                                        $1200
+                                    </td>
+                                    <td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">
+                                        $1200
+                                    </td>
+                                </tr>
+                                <tr class="hover-actions-trigger btn-reveal-trigger position-static">
+                                    <td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3">
+                                        <a class="fw-semibold" href="#!">Milind Mikuja</a>
+                                    </td>
+                                    <td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">
+                                        558
+                                    </td>
+                                    <td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">
+                                        $2531
+                                    </td>
+                                    <td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">
+                                        $2200
+                                    </td>
+                                    <td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">
+                                        $2200
+                                    </td>
+                                </tr>
+                                <tr class="hover-actions-trigger btn-reveal-trigger position-static">
+                                    <td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3">
+                                        <a class="fw-semibold" href="#!">Stanley Drinkwater</a>
+                                    </td>
+                                    <td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">
+                                        1100
+                                    </td>
+                                    <td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">
+                                        $100
+                                    </td>
+                                    <td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">
+                                        $100
+                                    </td>
+                                    <td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">
+                                        $100
+                                    </td>
+                                </tr>
+                                <tr class="hover-actions-trigger btn-reveal-trigger position-static">
+                                    <td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3">
+                                        <a class="fw-semibold" href="#!">Josef Stravinsky</a>
+                                    </td>
+                                    <td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">
+                                        856
+                                    </td>
+                                    <td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">
+                                        $326
+                                    </td>
+                                    <td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">
+                                        $265
+                                    </td>
+                                    <td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">
+                                        $265
+                                    </td>
+                                </tr>
+                                <tr class="hover-actions-trigger btn-reveal-trigger position-static">
+                                    <td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3">
+                                        <a class="fw-semibold" href="#!">Roy Anderson</a>
+                                    </td>
+                                    <td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">
+                                        1200
+                                    </td>
+                                    <td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">
+                                        $1452
+                                    </td>
+                                    <td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">
+                                        $865
+                                    </td>
+                                    <td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">
+                                        $865
+                                    </td>
+                                </tr>
+                                <tr class="hover-actions-trigger btn-reveal-trigger position-static">
+                                    <td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3">
+                                        <a class="fw-semibold" href="#!">Oscar Wilde</a>
+                                    </td>
+                                    <td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">
+                                        1020
+                                    </td>
+                                    <td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">
+                                        $950
+                                    </td>
+                                    <td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">
+                                        $1000
+                                    </td>
+                                    <td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">
+                                        $800
+                                    </td>
+                                </tr>
+                            </tbody>
+                            <tr class="hover-actions-trigger btn-reveal-trigger position-static">
+                                <td class="align-middle border-bottom-0 border-end border-translucent white-space-nowrap text-end fw-bold text-body-emphasis pt-2 lh-sm pb-0 px-3">
+                                </td>
+                                <td class="align-middle border-bottom-0 border-end border-translucent white-space-nowrap text-end fw-bold text-body-emphasis pt-2 lh-sm pb-0 px-3">
+                                    4,744
+                                </td>
+                                <td class="align-middle border-bottom-0 border-end border-translucent white-space-nowrap text-end fw-bold text-body-emphasis pt-2 lh-sm pb-0 px-3">
+                                    $5,665
+                                </td>
+                                <td class="align-middle border-bottom-0 border-end border-translucent white-space-nowrap text-end fw-bold text-body-emphasis pt-2 lh-sm pb-0 px-3">
+                                    $4630
+                                </td>
+                                <td class="border-bottom-0 align-middle white-space-nowrap text-end fw-bold text-body-emphasis pt-2 pb-0 ps-3">
+                                    $4630
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
                 </div>
-              </div>
             </div>
-          </div>
-          <div class="col-sm-5 col-md-4 col-xxl-4 my-3 my-sm-0">
-            <div class="position-relative d-flex flex-center mb-sm-4 mb-xl-0 echart-contact-by-source-row mt-sm-7 mt-lg-4 mt-xl-0">
-              <div class="echart-contact-by-source" style="min-height:245px;width:100%"></div>
-              <div class="position-absolute rounded-circle bg-primary-subtle top-50 start-50 translate-middle d-flex flex-center" style="height:100px; width:100px;">
-                <h3 class="mb-0 text-primary-dark fw-bolder" data-label="data-label"></h3>
-              </div>
+        </div>
+        <div class="mx-lg-n4">
+            <div class="row g-3 mb-9 mt-n7">
+                <div class="col-xl-5">
+                    <div class="card h-100">
+                        <div class="card-body">
+                            <h3>Lead Conversion</h3>
+                            <p class="text-body-tertiary mb-0">Stages of deals &amp; conversion</p>
+                            <div class="echart-lead-conversion" style="min-height: 250px;"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xl-7">
+                    <div class="card h-100">
+                        <div class="card-body">
+                            <h3>Revenue Target</h3>
+                            <p class="text-body-tertiary">Country-wise target fulfilment</p>
+                            <div class="echart-revenue-target-conversion" style="min-height: 230px;"></div>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
-      </div>
-      <div class="col-12 col-xxl-6 mb-8">
-        <div class="mb-3">
-          <h3>New Users &amp; Leads</h3>
-          <p class="text-body-tertiary mb-0">Payment received across all channels</p>
-        </div>
-        <div class="row g-6">
-          <div class="col-md-6 mb-2 mb-sm-0">
-            <div class="d-flex align-items-center"><span class="me-2 text-info" data-feather="users" style="min-height:24px; width:24px"></span>
-              <h4 class="text-body-tertiary mb-0">New Users :<span class="text-body-emphasis"> 42</span></h4><span class="badge badge-phoenix fs-10 badge-phoenix-success d-inline-flex align-items-center ms-2"><span class="badge-label d-inline-block lh-base">+24.5%</span><span class="ms-1 fa-solid fa-caret-up d-inline-block lh-1"></span></span>
+        <footer class="footer position-absolute">
+            <div class="row g-0 justify-content-between align-items-center h-100">
+                <div class="col-12 col-sm-auto text-center">
+                    <p class="mb-0 mt-2 mt-sm-0 text-body">
+                        Thank you for creating with Phoenix<span class="d-none d-sm-inline-block"></span><span class="d-none d-sm-inline-block mx-1">|</span>
+                        <br class="d-sm-none" />
+                        2024 &copy;<a class="mx-1" href="https://themewagon.com">Themewagon</a>
+                    </p>
+                </div>
+                <div class="col-12 col-sm-auto text-center">
+                    <p class="mb-0 text-body-tertiary text-opacity-85">v1.20.1</p>
+                </div>
             </div>
-            <div class="pb-0 pt-4">
-              <div class="echarts-new-users" style="min-height:110px;width:100%;"></div>
-            </div>
-          </div>
-          <div class="col-md-6">
-            <div class="d-flex align-items-center"><span class="me-2 text-primary" data-feather="zap" style="height:24px; width:24px"></span>
-              <h4 class="text-body-tertiary mb-0">New Leads :<span class="text-body-emphasis"> 45</span></h4><span class="badge badge-phoenix fs-10 badge-phoenix-success d-inline-flex align-items-center ms-2"><span class="badge-label d-inline-block lh-base">+30.5%</span><span class="ms-1 fa-solid fa-caret-up d-inline-block lh-1"></span></span>
-            </div>
-            <div class="pb-0 pt-4">
-              <div class="echarts-new-leads" style="min-height:110px;width:100%;"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="col-12 col-xxl-6">
-        <div class="row align-items-start justify-content-between mb-4 g-3">
-          <div class="col-auto">
-            <h3>Ad Clicks</h3>
-            <p class="text-body-tertiary lh-sm mb-0">Check effectiveness of your ads</p>
-          </div>
-          <div class="col-12 col-sm-4">
-            <select class="form-select form-select-sm" id="select-ad-clicks-month">
-              <option>Mar 1 - 31, 2022</option>
-              <option>April 1 - 30, 2022</option>
-              <option>May 1 - 31, 2022</option>
-            </select>
-          </div>
-        </div>
-        <div class="echart-add-clicks-chart" style="min-height:385px;width:100%"></div>
-      </div>
-      <div class="col-12 col-xxl-6 mb-6 gy-0 gy-xxl-3">
-        <div class="row align-items-start justify-content-between mb-4 g-3">
-          <div class="col-auto">
-            <h3>Deal Forecast<span class="fw-semibold">- $90,303</span></h3>
-            <p class="text-body-tertiary mb-1">Show what you offer here</p>
-          </div>
-          <div class="col-12 col-sm-4">
-            <select class="form-select form-select-sm" id="select-ad-forcast-month">
-              <option>Mar 1 - 31, 2022</option>
-              <option>April 1 - 30, 2022</option>
-              <option>May 1 - 31, 2022</option>
-            </select>
-          </div>
-        </div>
-        <div class="w-100">
-          <div class="d-flex flex-start">
-            <p class="mb-2 text-body-tertiary fw-semibold fs-9" style="width: 20.72%">$21.0k</p>
-            <p class="mb-2 text-body-tertiary fw-semibold fs-9" style="width: 35.76%">$3.4k</p>
-            <p class="mb-2 text-body-tertiary fw-semibold fs-9" style="width: 25.38%">$15.1k</p>
-            <p class="mb-2 text-body-tertiary fw-semibold fs-9" style="width: 25.14%">$4.6k</p>
-          </div>
-          <div class="progress mb-3 rounded-3" style="height: 10px;">
-            <div class="progress-bar border-end border-2 bg-primary-dark" role="progressbar" style="width: 20.72%" aria-valuenow="20.72" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-placement="top" title="Appointment"></div>
-            <div class="progress-bar border-end border-2" role="progressbar" style="width: 35.76%" aria-valuenow="35.76" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-placement="top" title="Qualified"></div>
-            <div class="progress-bar bg-success border-end border-2" role="progressbar" style="width: 25.38%" aria-valuenow="25.38" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-placement="top" title="Closed Won"></div>
-            <div class="progress-bar bg-info" role="progressbar" style="width: 25.14%" aria-valuenow="25.14" aria-valuemin="0" aria-valuemax="100" data-bs-toggle="tooltip" data-bs-placement="top" title="Contact Sent"></div>
-          </div>
-        </div>
-        <h4 class="mt-4 mb-3">Deal Forecast by Owner </h4>
-        <div class="border-top border-bottom-0" id="dealForecastTable" data-list='{"valueNames":["contact","appointment","qualified","closed-won","contact-sent"],"page":5}'>
-          <div class="table-responsive scrollbar">
-            <table class="table fs-9 mb-0">
-              <thead>
-                <tr>
-                  <th class="sort border-end border-translucent white-space-nowrap align-middle ps-0 text-uppercase text-body-tertiary" scope="col" data-sort="contact" style="width:15%; min-width:100px">Contact</th>
-                  <th class="sort border-end border-translucent align-middle text-end px-3 text-uppercase text-body-tertiary" scope="col" data-sort="appointment" style="width:15%; min-width:95px">
-                    <div class="d-inline-flex flex-center"><span class="fa-solid fa-square fs-11 text-primary me-2" data-fa-transform="up-2"></span><span class="mb-0 fs-9">Appointment</span></div>
-                  </th>
-                  <th class="sort border-end border-translucent align-middle text-end px-3 text-uppercase text-body-tertiary" scope="col" data-sort="qualified" style="width:20%; min-width:100px">
-                    <div class="d-inline-flex flex-center"><span class="fa-solid fa-square fs-11 text-primary-light me-2" data-fa-transform="up-2"></span><span class="mb-0 fs-9">Qualified</span></div>
-                  </th>
-                  <th class="sort border-end border-translucent align-middle text-end px-3 text-uppercase text-body-tertiary" scope="col" data-sort="closed-won" style="width:20%; min-width:100px">
-                    <div class="d-inline-flex flex-center"><span class="fa-solid fa-square fs-11 text-success me-2" data-fa-transform="up-2"></span><span class="mb-0 fs-9">Closed Won</span></div>
-                  </th>
-                  <th class="sort align-middle text-end ps-3 text-uppercase text-body-tertiary" scope="col" data-sort="contact-sent" style="width:20%; min-width:100px">
-                    <div class="d-inline-flex flex-center"><span class="fa-solid fa-square fs-11 text-info me-2" data-fa-transform="up-2"></span><span class="mb-0 fs-9">Contact Sent</span></div>
-                  </th>
-                </tr>
-              </thead>
-              <tbody class="list" id="table-deal-forecast-body">
-                <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                  <td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3"><a class="fw-semibold" href="#!">Carrie Anne</a></td>
-                  <td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">1000</td>
-                  <td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$1256</td>
-                  <td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$1200</td>
-                  <td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">$1200</td>
-                </tr>
-                <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                  <td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3"><a class="fw-semibold" href="#!">Milind Mikuja</a></td>
-                  <td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">558</td>
-                  <td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$2531</td>
-                  <td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$2200</td>
-                  <td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">$2200</td>
-                </tr>
-                <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                  <td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3"><a class="fw-semibold" href="#!">Stanley Drinkwater</a></td>
-                  <td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">1100</td>
-                  <td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$100</td>
-                  <td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$100</td>
-                  <td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">$100</td>
-                </tr>
-                <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                  <td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3"><a class="fw-semibold" href="#!">Josef Stravinsky</a></td>
-                  <td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">856</td>
-                  <td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$326</td>
-                  <td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$265</td>
-                  <td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">$265</td>
-                </tr>
-                <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                  <td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3"><a class="fw-semibold" href="#!">Roy Anderson</a></td>
-                  <td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">1200</td>
-                  <td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$1452</td>
-                  <td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$865</td>
-                  <td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">$865</td>
-                </tr>
-                <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                  <td class="contact border-end border-translucent align-middle white-space-nowrap py-2 ps-0 px-3"><a class="fw-semibold" href="#!">Oscar Wilde</a></td>
-                  <td class="appointment border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">1020</td>
-                  <td class="qualified border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$950</td>
-                  <td class="closed-won border-end border-translucent align-middle white-space-nowrap text-end fw-semibold text-body py-2 px-3">$1000</td>
-                  <td class="contact-sent border-end-0 align-middle white-space-nowrap text-end fw-semibold text-body ps-3 py-2">$800</td>
-                </tr>
-              </tbody>
-              <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                <td class="align-middle border-bottom-0 border-end border-translucent white-space-nowrap text-end fw-bold text-body-emphasis pt-2 lh-sm pb-0 px-3"> </td>
-                <td class="align-middle border-bottom-0 border-end border-translucent white-space-nowrap text-end fw-bold text-body-emphasis pt-2 lh-sm pb-0 px-3">4,744</td>
-                <td class="align-middle border-bottom-0 border-end border-translucent white-space-nowrap text-end fw-bold text-body-emphasis pt-2 lh-sm pb-0 px-3">$5,665</td>
-                <td class="align-middle border-bottom-0 border-end border-translucent white-space-nowrap text-end fw-bold text-body-emphasis pt-2 lh-sm pb-0 px-3">$4630</td>
-                <td class="border-bottom-0 align-middle white-space-nowrap text-end fw-bold text-body-emphasis pt-2 pb-0 ps-3">$4630</td>
-              </tr>
-            </table>
-          </div>
-        </div>
-      </div>
+        </footer>
     </div>
-    <div class="mx-lg-n4">
-      <div class="row g-3 mb-9 mt-n7">
-        <div class="col-xl-5">
-          <div class="card h-100">
-            <div class="card-body">
-              <h3>Lead Conversion</h3>
-              <p class="text-body-tertiary mb-0">Stages of deals &amp; conversion</p>
-              <div class="echart-lead-conversion" style="min-height: 250px;"></div>
-            </div>
-          </div>
-        </div>
-        <div class="col-xl-7">
-          <div class="card h-100">
-            <div class="card-body">
-              <h3>Revenue Target</h3>
-              <p class="text-body-tertiary">Country-wise target fulfilment</p>
-              <div class="echart-revenue-target-conversion" style="min-height: 230px;"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <footer class="footer position-absolute">
-      <div class="row g-0 justify-content-between align-items-center h-100">
-        <div class="col-12 col-sm-auto text-center">
-          <p class="mb-0 mt-2 mt-sm-0 text-body">Thank you for creating with Phoenix<span class="d-none d-sm-inline-block"></span><span class="d-none d-sm-inline-block mx-1">|</span><br class="d-sm-none" />2024 &copy;<a class="mx-1" href="https://themewagon.com">Themewagon</a></p>
-        </div>
-        <div class="col-12 col-sm-auto text-center">
-          <p class="mb-0 text-body-tertiary text-opacity-85">v1.20.1</p>
-        </div>
-      </div>
-    </footer>
-  </div>
-
-
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/dashboards/manager.html b/templates/dashboards/manager.html
index 9540f0d9..67866889 100644
--- a/templates/dashboards/manager.html
+++ b/templates/dashboards/manager.html
@@ -1,44 +1,57 @@
-{% load i18n static custom_filters django_ledger%}
+{% load i18n static custom_filters django_ledger %}
 {% block content %}
-
     <div class="row justify-content-between mb-2">
         <h3 class="fs-4 fs-md-4 fs-xl-4 fw-black mb-4">
             <span class="text-gradient-info me-3">{{ dealer.get_local_name }}</span>
         </h3>
-        <p><span class="badge badge-phoenix badge-phoenix-success me-2 fs-10">
-            <span class="fs-10 text-body-secondary me-1">{{ _("As of")}}</span>{% now "SHORT_DATETIME_FORMAT" %}
-        </span></p>
+        <p>
+            <span class="badge badge-phoenix badge-phoenix-success me-2 fs-10">
+                <span class="fs-10 text-body-secondary me-1">{{ _("As of") }}</span>{% now "SHORT_DATETIME_FORMAT" %}
+            </span>
+        </p>
     </div>
     <div class="row justify-content-between mb-2">
-        <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 ">
+        <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0">
             <span class="uil fs-5 lh-1 uil-users-alt text-success"></span>
-            <a href="{% url 'user_list' request.dealer.slug %}"><h4 class="fs-6 pt-3">{{ staff }}</h4></a>
-            <p class="fs-9 mb-0">{{ _("Staff")}}</p>
+            <a href="{% url 'user_list' request.dealer.slug %}">
+                <h4 class="fs-6 pt-3">{{ staff }}</h4>
+            </a>
+            <p class="fs-9 mb-0">{{ _("Staff") }}</p>
         </div>
-        <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 ">
+        <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0">
             <span class="uil fs-5 lh-1 uil-bolt-alt text-primary"></span>
-            <a href="{% url 'lead_list' request.dealer.slug %}"><h4 class="fs-6 pt-3">{{ total_leads }}</h4></a>
-            <p class="fs-9 mb-0">{{ _("Leads")}}</p>
+            <a href="{% url 'lead_list' request.dealer.slug %}">
+                <h4 class="fs-6 pt-3">{{ total_leads }}</h4>
+            </a>
+            <p class="fs-9 mb-0">{{ _("Leads") }}</p>
         </div>
-        <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 ">
+        <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0">
             <span class="uil fs-5 lh-1 uil-user-plus text-warning"></span>
-            <a href="{% url 'customer_list' request.dealer.slug %}"><h4 class="fs-6 pt-3">{{ customers }}</h4></a>
-            <p class="fs-9 mb-0">{{ _("Customers")}}</p>
+            <a href="{% url 'customer_list' request.dealer.slug %}">
+                <h4 class="fs-6 pt-3">{{ customers }}</h4>
+            </a>
+            <p class="fs-9 mb-0">{{ _("Customers") }}</p>
         </div>
-        <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 ">
+        <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0">
             <span class="uil fs-5 lh-1 uil-bill text-info"></span>
-            <a href="{% url 'invoice_list' request.dealer.slug %}"><h4 class="fs-6 pt-3">{{ invoices }}</h4></a>
-            <p class="fs-9 mb-0">{{ _("Invoices")}}</p>
+            <a href="{% url 'invoice_list' request.dealer.slug %}">
+                <h4 class="fs-6 pt-3">{{ invoices }}</h4>
+            </a>
+            <p class="fs-9 mb-0">{{ _("Invoices") }}</p>
         </div>
-        <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 ">
+        <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0">
             <span class="uil fs-5 lh-1 uil-comment-alt-question text-success-dark"></span>
-            <a href="{% url 'estimate_list' request.dealer.slug %}"><h4 class="fs-6 pt-3">{{ estimates }}</h4></a>
-            <p class="fs-9 mb-0">{{ _("Quotations")}}</p>
+            <a href="{% url 'estimate_list' request.dealer.slug %}">
+                <h4 class="fs-6 pt-3">{{ estimates }}</h4>
+            </a>
+            <p class="fs-9 mb-0">{{ _("Quotations") }}</p>
         </div>
-        <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 ">
+        <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0">
             <span class="uil fs-5 lh-1 uil-receipt-alt text-secondary"></span>
-            <a href="{% url 'purchase_order_list' request.dealer.slug request.dealer.entity.slug %}"><h4 class="fs-6 pt-3">{{ purchase_orders }}</h4></a>
-            <p class="fs-9 mb-0">{{ _("Purchase Orders")}}</p>
+            <a href="{% url 'purchase_order_list' request.dealer.slug request.dealer.entity.slug %}">
+                <h4 class="fs-6 pt-3">{{ purchase_orders }}</h4>
+            </a>
+            <p class="fs-9 mb-0">{{ _("Purchase Orders") }}</p>
         </div>
     </div>
     <div class="row g-3 pe-xxl-3 my-3">
@@ -47,9 +60,14 @@
                 <div class="col-4 col-xl-12 col-xxl-4 border-end border-end-xl-0 border-end-xxl pb-4 pt-4 pt-xl-0 pt-xxl-4 pe-4 pe-sm-5 pe-xl-0 pe-xxl-5">
                     <h4 class="text-body mb-4">{% trans 'inventory'|upper %}</h4>
                     <div class="d-md-flex flex-between-center">
-                        <div id="car-chart-by-make" class="order-sm-0 order-md-1" style="height:64px;width: 128px;"></div>
+                        <div id="car-chart-by-make"
+                             class="order-sm-0 order-md-1"
+                             style="height:64px;
+                                    width: 128px"></div>
                         <div class="mt-4 mt-md-0">
-                            <h1 class="text-body-highlight">{{ total_cars }} <span class="fs-6 text-body-highlight">{{ _("Car") }}</span></h1>
+                            <h1 class="text-body-highlight">
+                                {{ total_cars }} <span class="fs-6 text-body-highlight">{{ _("Car") }}</span>
+                            </h1>
                         </div>
                     </div>
                 </div>
@@ -64,7 +82,9 @@
                             </div>
                         </div>
                         <div class="mt-3 mt-md-0">
-                            <h3 class="text-body-highlight mb-2">{{ total_selling_price|currency_format }} <span class="icon-saudi_riyal"></span></h3>
+                            <h3 class="text-body-highlight mb-2">
+                                {{ total_selling_price|currency_format }} <span class="icon-saudi_riyal"></span>
+                            </h3>
                         </div>
                     </div>
                 </div>
@@ -72,65 +92,86 @@
                     <h4 class="text-body mb-4">{% trans "Profits"|upper %}</h4>
                     <div class="d-md-flex flex-between-center">
                         <div class="d-md-flex align-items-center gap-2">
-                            <span class="fa-solid fa-money-bill-trend-up fs-5 text-warning-light dark__text-opacity-75" data-bs-theme="light"></span>
+                            <span class="fa-solid fa-money-bill-trend-up fs-5 text-warning-light dark__text-opacity-75"
+                                  data-bs-theme="light"></span>
                             <div class="d-flex d-md-block gap-2 align-items-center mt-1 mt-md-0">
                                 <p class="fs-9 mb-0 mb-md-2 text-body-tertiary text-nowrap"></p>
                                 <h4 class="text-body-highlight mb-0"></h4>
                             </div>
                         </div>
                         <div class="mt-3 mt-md-0">
-                            <h3 class="text-body-highlight mb-2">{{ total_profit|currency_format }} <span class="icon-saudi_riyal"></span></h3>
+                            <h3 class="text-body-highlight mb-2">
+                                {{ total_profit|currency_format }} <span class="icon-saudi_riyal"></span>
+                            </h3>
                         </div>
                     </div>
                 </div>
-
             </div>
         </div>
-
     </div>
     <div class="row justify-content-between">
         <div class="col-12 col-lg-12">
             <div class="row">
                 <div class="card mb-3">
-                    <div class="bg-holder" style="background-image:url({% static 'images/bg/38.png' %});background-position:left bottom;background-size:auto;"></div>
-
+                    <div class="bg-holder"
+                         style="background-image:url({% static 'images/bg/38.png' %});
+                                background-position:left bottom;
+                                background-size:auto"></div>
                     <div class="card-body d-flex justify-content-between position-relative">
                         <div class="col-sm-7 col-md-8 col-xxl-8 mb-md-3 mb-lg-0">
-                            <h3 class="mb-3">{{ _("Inventory by Status")}}</h3>
+                            <h3 class="mb-3">{{ _("Inventory by Status") }}</h3>
                             <div class="row g-0">
                                 <div class="col-6 col-xl-4">
                                     <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-translucent">
-                                        <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-success" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Available") }}</span></div>
+                                        <div class="d-flex align-items-center mb-1">
+                                            <span class="fa-solid fa-square fs-11 me-2 text-success"
+                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Available") }}</span>
+                                        </div>
                                         <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ available_cars }}</h3>
                                     </div>
                                 </div>
                                 <div class="col-6 col-xl-4">
                                     <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end-md-0 border-end-xl border-translucent">
-                                        <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-warning" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Sold")}}</span></div>
+                                        <div class="d-flex align-items-center mb-1">
+                                            <span class="fa-solid fa-square fs-11 me-2 text-warning"
+                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Sold") }}</span>
+                                        </div>
                                         <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ sold_cars }}</h3>
                                     </div>
                                 </div>
                                 <div class="col-6 col-xl-4">
                                     <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-end-md border-end-xl-0 border-translucent">
-                                        <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-danger" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Reserved") }}</span></div>
+                                        <div class="d-flex align-items-center mb-1">
+                                            <span class="fa-solid fa-square fs-11 me-2 text-danger"
+                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Reserved") }}</span>
+                                        </div>
                                         <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ reserved_cars }}</h3>
                                     </div>
                                 </div>
                                 <div class="col-6 col-xl-4">
                                     <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end-xl border-bottom border-bottom-xl-0 border-translucent">
-                                        <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-primary" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Transfer") }}</span></div>
+                                        <div class="d-flex align-items-center mb-1">
+                                            <span class="fa-solid fa-square fs-11 me-2 text-primary"
+                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Transfer") }}</span>
+                                        </div>
                                         <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ transfer_cars }}</h3>
                                     </div>
                                 </div>
                                 <div class="col-6 col-xl-4">
                                     <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end border-translucent">
-                                        <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-warning-light" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Hold") }}</span></div>
+                                        <div class="d-flex align-items-center mb-1">
+                                            <span class="fa-solid fa-square fs-11 me-2 text-warning-light"
+                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Hold") }}</span>
+                                        </div>
                                         <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ hold_cars }}</h3>
                                     </div>
                                 </div>
                                 <div class="col-6 col-xl-4">
                                     <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100">
-                                        <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-secondary-dark" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Damaged") }}</span></div>
+                                        <div class="d-flex align-items-center mb-1">
+                                            <span class="fa-solid fa-square fs-11 me-2 text-secondary-dark"
+                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Damaged") }}</span>
+                                        </div>
                                         <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ damaged_cars }}</h3>
                                     </div>
                                 </div>
@@ -138,24 +179,18 @@
                         </div>
                         <div class="col-sm-5 col-md-4 col-xxl-4 my-3 my-sm-0">
                             <div class="position-relative d-flex flex-center mb-sm-4 mb-xl-0 echart-cars-by-status-container mt-sm-7 mt-lg-4 mt-xl-0">
-                                <div id="echart-cars-by-status" class="mx-auto mt-3 mt-md-0 mt-xl-3 mt-xxl-0" style="min-height:245px;width:100%"></div>
-
+                                <div id="echart-cars-by-status"
+                                     class="mx-auto mt-3 mt-md-0 mt-xl-3 mt-xxl-0"
+                                     style="min-height:245px;
+                                            width:100%"></div>
                             </div>
                         </div>
-
                     </div>
                 </div>
             </div>
-
-
-
-
         </div>
     </div>
-
-
     <script>
-
         document.addEventListener("DOMContentLoaded", function () {
     /* Car Chart By Make */
             const { getColor, rgbaColor } = window.phoenix.utils;
diff --git a/templates/dashboards/sales.html b/templates/dashboards/sales.html
index f02ed906..2a537a98 100644
--- a/templates/dashboards/sales.html
+++ b/templates/dashboards/sales.html
@@ -1,7 +1,5 @@
-{% load i18n static custom_filters django_ledger%}
+{% load i18n static custom_filters django_ledger %}
 {% block content %}
-
-
     <div class="row justify-content-between">
         <div class="col-12 col-lg-6">
             <div class="row g-2">
@@ -9,45 +7,65 @@
                     <span class="text-gradient-info me-3">{{ staff }}</span>
                 </h3>
                 <div class="card mb-3">
-                    <div class="bg-holder" style="background-image:url({% static 'images/bg/38.png' %});background-position:left bottom;background-size:auto;"></div>
-
+                    <div class="bg-holder"
+                         style="background-image:url({% static 'images/bg/38.png' %});
+                                background-position:left bottom;
+                                background-size:auto"></div>
                     <div class="card-body d-flex justify-content-between position-relative">
                         <div class="col-sm-7 col-md-8 col-xxl-8 mb-md-3 mb-lg-0">
-                            <h3 class="mb-3">{{ _("Inventory by Status")}}</h3>
+                            <h3 class="mb-3">{{ _("Inventory by Status") }}</h3>
                             <div class="row g-0">
                                 <div class="col-6 col-xl-4">
                                     <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-translucent">
-                                        <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-success" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Available") }}</span></div>
+                                        <div class="d-flex align-items-center mb-1">
+                                            <span class="fa-solid fa-square fs-11 me-2 text-success"
+                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Available") }}</span>
+                                        </div>
                                         <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ available_cars }}</h3>
                                     </div>
                                 </div>
                                 <div class="col-6 col-xl-4">
                                     <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end-md-0 border-end-xl border-translucent">
-                                        <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-warning" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Sold")}}</span></div>
+                                        <div class="d-flex align-items-center mb-1">
+                                            <span class="fa-solid fa-square fs-11 me-2 text-warning"
+                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Sold") }}</span>
+                                        </div>
                                         <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ sold_cars }}</h3>
                                     </div>
                                 </div>
                                 <div class="col-6 col-xl-4">
                                     <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-bottom border-end border-end-md border-end-xl-0 border-translucent">
-                                        <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-danger" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Reserved") }}</span></div>
+                                        <div class="d-flex align-items-center mb-1">
+                                            <span class="fa-solid fa-square fs-11 me-2 text-danger"
+                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Reserved") }}</span>
+                                        </div>
                                         <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ reserved_cars }}</h3>
                                     </div>
                                 </div>
                                 <div class="col-6 col-xl-4">
                                     <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end-xl border-bottom border-bottom-xl-0 border-translucent">
-                                        <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-primary" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Transfer") }}</span></div>
+                                        <div class="d-flex align-items-center mb-1">
+                                            <span class="fa-solid fa-square fs-11 me-2 text-primary"
+                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Transfer") }}</span>
+                                        </div>
                                         <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ transfer_cars }}</h3>
                                     </div>
                                 </div>
                                 <div class="col-6 col-xl-4">
                                     <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100 border-1 border-end border-translucent">
-                                        <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-warning-light" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Hold") }}</span></div>
+                                        <div class="d-flex align-items-center mb-1">
+                                            <span class="fa-solid fa-square fs-11 me-2 text-warning-light"
+                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Hold") }}</span>
+                                        </div>
                                         <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ hold_cars }}</h3>
                                     </div>
                                 </div>
                                 <div class="col-6 col-xl-4">
                                     <div class="d-flex flex-column flex-center align-items-sm-start flex-md-row justify-content-md-between flex-xxl-column p-3 ps-sm-3 ps-md-4 p-md-3 h-100">
-                                        <div class="d-flex align-items-center mb-1"><span class="fa-solid fa-square fs-11 me-2 text-secondary-dark" data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Damaged") }}</span></div>
+                                        <div class="d-flex align-items-center mb-1">
+                                            <span class="fa-solid fa-square fs-11 me-2 text-secondary-dark"
+                                                  data-fa-transform="up-2"></span><span class="mb-0 fs-9 text-body">{{ _("Damaged") }}</span>
+                                        </div>
                                         <h3 class="fw-semibold ms-xl-3 ms-xxl-0 pe-md-2 pe-xxl-0 mb-0 mb-sm-3">{{ damaged_cars }}</h3>
                                     </div>
                                 </div>
@@ -56,26 +74,32 @@
                         <div class="col-sm-5 col-md-4 col-xxl-4 my-3 my-sm-0">
                             <div class="position-relative d-flex flex-center mb-sm-4 mb-xl-0 echart-cars-by-status-container mt-sm-7 mt-lg-4 mt-xl-0">
                                 <div id="echart-cars-by-status" style="min-height:245px;width:100%"></div>
-                                <div class="position-absolute rounded-circle bg-primary-subtle top-50 start-50 translate-middle d-flex flex-center" style="height:100px; width:100px;">
+                                <div class="position-absolute rounded-circle bg-primary-subtle top-50 start-50 translate-middle d-flex flex-center"
+                                     style="height:100px;
+                                            width:100px">
                                     <h3 class="mb-0 text-primary-dark fw-bolder" data-label="data-label"></h3>
                                 </div>
                             </div>
                         </div>
-
                     </div>
                 </div>
             </div>
             <div class="row g-2">
                 <div class="col-12 mb-8">
                     <div class="mb-3">
-                        <h3>{{ _("New Leads and Customers")}}</h3>
-                        <p class="text-body-tertiary mb-0">{{ _("Payment received across all channels")}}</p>
+                        <h3>{{ _("New Leads and Customers") }}</h3>
+                        <p class="text-body-tertiary mb-0">{{ _("Payment received across all channels") }}</p>
                     </div>
                     <div class="row g-6">
                         <div class="col-xl-6 mb-2 mb-sm-0">
-                            <div class="d-flex align-items-center"><span class="me-2 text-info" data-feather="users" style="min-height:24px; width:24px"></span>
-                                <h4 class="text-body-tertiary mb-0">{{ _("New Customers")}} :
-                                    <span class="text-body-emphasis"> 42</span>
+                            <div class="d-flex align-items-center">
+                                <span class="me-2 text-info"
+                                      data-feather="users"
+                                      style="min-height:24px;
+                                             width:24px"></span>
+                                <h4 class="text-body-tertiary mb-0">
+                                    {{ _("New Customers") }} :
+                                    <span class="text-body-emphasis">42</span>
                                 </h4>
                                 <span class="badge badge-phoenix fs-10 badge-phoenix-success d-inline-flex align-items-center ms-2">
                                     <span class="badge-label d-inline-block lh-base">+24.5%</span>
@@ -87,8 +111,14 @@
                             </div>
                         </div>
                         <div class="col-md-6">
-                            <div class="d-flex align-items-center"><span class="me-2 text-primary" data-feather="zap" style="height:24px; width:24px"></span>
-                                <h4 class="text-body-tertiary mb-0">{{ _("New Leads")}} :<span class="text-body-emphasis"> 45</span></h4>
+                            <div class="d-flex align-items-center">
+                                <span class="me-2 text-primary"
+                                      data-feather="zap"
+                                      style="height:24px;
+                                             width:24px"></span>
+                                <h4 class="text-body-tertiary mb-0">
+                                    {{ _("New Leads") }} :<span class="text-body-emphasis">45</span>
+                                </h4>
                                 <span class="badge badge-phoenix fs-10 badge-phoenix-success d-inline-flex align-items-center ms-2">
                                     <span class="badge-label d-inline-block lh-base">+30.5%</span>
                                     <span class="ms-1 fa-solid fa-caret-up d-inline-block lh-1"></span>
@@ -100,23 +130,22 @@
                         </div>
                     </div>
                 </div>
-
             </div>
         </div>
         <div class="col-12 col-lg-6">
-
             <div class="row g-3 pe-xxl-3">
                 <div class="col-12 col-xl-6 col-xxl-12">
                     <div class="row">
                         <div class="col-6 col-xl-12 col-xxl-6 border-bottom border-end border-end-xl-0 border-end-xxl pb-4 pt-4 pt-xl-0 pt-xxl-4 pe-4 pe-sm-5 pe-xl-0 pe-xxl-5">
                             <h4 class="text-body mb-4">{% trans 'inventory'|upper %}</h4>
                             <div class="d-md-flex flex-between-center">
-                                <div id="car-chart-by-make" class="order-sm-0 order-md-1" style="height:64px;width: 128px;"></div>
+                                <div id="car-chart-by-make"
+                                     class="order-sm-0 order-md-1"
+                                     style="height:64px;
+                                            width: 128px"></div>
                                 <div class="mt-4 mt-md-0">
                                     <h1 class="text-body-highlight mb-2">{{ total_cars }}</h1>
-
-
-                                    <span class="badge badge-phoenix badge-phoenix-primary me-2 fs-10"> <span class="fs-10 text-body-secondary me-1">{{ _("As of")}}</span>{% now "SHORT_DATETIME_FORMAT" %}</span>
+                                    <span class="badge badge-phoenix badge-phoenix-primary me-2 fs-10"> <span class="fs-10 text-body-secondary me-1">{{ _("As of") }}</span>{% now "SHORT_DATETIME_FORMAT" %}</span>
                                 </div>
                             </div>
                         </div>
@@ -131,7 +160,9 @@
                                     </div>
                                 </div>
                                 <div class="mt-3 mt-md-0">
-                                    <h3 class="text-body-highlight mb-2">{{ total_selling_price|currency_format }} <span class="icon-saudi_riyal"></span></h3>
+                                    <h3 class="text-body-highlight mb-2">
+                                        {{ total_selling_price|currency_format }} <span class="icon-saudi_riyal"></span>
+                                    </h3>
                                 </div>
                             </div>
                         </div>
@@ -139,25 +170,30 @@
                             <h4 class="text-body mb-4">{% trans "Profits"|upper %}</h4>
                             <div class="d-md-flex flex-between-center">
                                 <div class="d-md-flex align-items-center gap-2 order-sm-0 order-md-1">
-                                    <span class="fa-solid fa-money-bill-trend-up fs-4 text-warning-light dark__text-opacity-75" data-bs-theme="light"></span>
+                                    <span class="fa-solid fa-money-bill-trend-up fs-4 text-warning-light dark__text-opacity-75"
+                                          data-bs-theme="light"></span>
                                     <div class="d-flex d-md-block gap-2 align-items-center mt-1 mt-md-0">
                                         <p class="fs-9 mb-0 mb-md-2 text-body-tertiary text-nowrap"></p>
                                         <h4 class="text-body-highlight mb-0"></h4>
                                     </div>
                                 </div>
                                 <div class="mt-3 mt-md-0">
-                                    <h3 class="text-body-highlight mb-2">{{ total_profit|currency_format }} <span class="icon-saudi_riyal"></span></h3>
+                                    <h3 class="text-body-highlight mb-2">
+                                        {{ total_profit|currency_format }} <span class="icon-saudi_riyal"></span>
+                                    </h3>
                                 </div>
                             </div>
                         </div>
                         <div class="col-6 col-xl-12 col-xxl-6 py-4 ps-4 ps-sm-5 ps-xl-0 ps-xxl-5">
-                            <h5 class="text-body mb-4">{{ _("Canceled Invoices")}}</h5>
+                            <h5 class="text-body mb-4">{{ _("Canceled Invoices") }}</h5>
                             <div class="d-md-flex flex-between-center">
-                                <div class="chart-cancel-booking order-sm-0 order-md-1" style="height:54px; width:78px"></div>
+                                <div class="chart-cancel-booking order-sm-0 order-md-1"
+                                     style="height:54px;
+                                            width:78px"></div>
                                 <div class="mt-3 mt-md-0">
                                     <h3 class="text-body-highlight mb-2">120.00</h3>
                                     <span class="badge badge-phoenix badge-phoenix-danger me-2 fs-10"> <span class="fa-solid fa-plus me-1"></span>5.76%</span>
-                                    <span class="fs-9 text-body-secondary d-block d-sm-inline mt-1">{{ _("From last month")}}</span>
+                                    <span class="fs-9 text-body-secondary d-block d-sm-inline mt-1">{{ _("From last month") }}</span>
                                 </div>
                             </div>
                         </div>
@@ -168,7 +204,7 @@
                         <div class="card-header pb-3">
                             <div class="row justify-content-between g-3">
                                 <div class="col-auto">
-                                    <h3 class="text-body-highlight">{{ _("Gross Profit")}}</h3>
+                                    <h3 class="text-body-highlight">{{ _("Gross Profit") }}</h3>
                                     <p class="mb-0">Annual income according to the board</p>
                                 </div>
                             </div>
@@ -176,7 +212,9 @@
                         <div class="card-body">
                             <div class="row align-items-center h-100 gy-5">
                                 <div class="col-12 col-md-auto col-xl-12 col-xxl-auto order-md-1 order-xl-0 order-xxl-1 px-md-8 px-xl-6">
-                                    <div class="echart-gross-profit mx-auto mt-3 mt-md-0 mt-xl-3 mt-xxl-0" style="width: 250px; height: 250px"></div>
+                                    <div class="echart-gross-profit mx-auto mt-3 mt-md-0 mt-xl-3 mt-xxl-0"
+                                         style="width: 250px;
+                                                height: 250px"></div>
                                 </div>
                                 <div class="col-12 col-md-auto col-xl-12 col-xxl-auto flex-1 h-md-100">
                                     <div class="d-flex flex-column justify-content-between h-md-100 h-xl-auto h-xxl-100">
@@ -189,7 +227,10 @@
                                                 </div>
                                             </div>
                                             <div class="d-flex align-items-center gap-2 text-primary">
-                                                <span class="fw-bold" data-feather="trending-up" style="width: 24px; height: 24px"></span>
+                                                <span class="fw-bold"
+                                                      data-feather="trending-up"
+                                                      style="width: 24px;
+                                                             height: 24px"></span>
                                                 <p class="mb-0 fw-bold">15.50%</p>
                                             </div>
                                         </div>
@@ -203,7 +244,10 @@
                                                 </div>
                                             </div>
                                             <div class="d-flex align-items-center gap-2 text-danger">
-                                                <span class="fw-bold" data-feather="trending-down" style="width: 24px; height: 24px"></span>
+                                                <span class="fw-bold"
+                                                      data-feather="trending-down"
+                                                      style="width: 24px;
+                                                             height: 24px"></span>
                                                 <p class="mb-0 fw-bold">11.09%</p>
                                             </div>
                                         </div>
@@ -217,7 +261,10 @@
                                                 </div>
                                             </div>
                                             <div class="d-flex align-items-center gap-2 text-warning">
-                                                <span class="fw-bold" data-feather="trending-up" style="width: 24px; height: 24px"></span>
+                                                <span class="fw-bold"
+                                                      data-feather="trending-up"
+                                                      style="width: 24px;
+                                                             height: 24px"></span>
                                                 <p class="mb-0 fw-bold">29.98%</p>
                                             </div>
                                         </div>
@@ -231,7 +278,10 @@
                                                 </div>
                                             </div>
                                             <div class="d-flex align-items-center gap-2 text-success">
-                                                <span class="fw-bold" data-feather="trending-up" style="width: 24px; height: 24px"></span>
+                                                <span class="fw-bold"
+                                                      data-feather="trending-up"
+                                                      style="width: 24px;
+                                                             height: 24px"></span>
                                                 <p class="mb-0 fw-bold">03.90%</p>
                                             </div>
                                         </div>
@@ -245,10 +295,7 @@
             </div>
         </div>
     </div>
-
-
     <script>
-
         document.addEventListener("DOMContentLoaded", function () {
     /* Car Chart By Make */
             const getColor = (name, dom = document.documentElement) => {
diff --git a/templates/dealers/activity_log.html b/templates/dealers/activity_log.html
index 7f6f16e1..f394e1b9 100644
--- a/templates/dealers/activity_log.html
+++ b/templates/dealers/activity_log.html
@@ -1,82 +1,93 @@
 {% extends 'base.html' %}
 {% load i18n static %}
-{%block title%}{% trans 'Activity'%}{%endblock%}
-{% block content %}
-    <div class="row">
-        <div class="ol-auto pt-5 pb-9">
-            <div class="row-sm">
-                <div class="row d-flex-center">
-                    <div class="col-8">
-                        <div class="tab-content" id="myTabContent">
-                            <div class="tab-pane fade active show" id="tab-activity" role="tabpanel" aria-labelledby="activity-tab">
-                                <h3 class="mb-4">{{ _("Activity") }}</h3>
-                                <div class="border-bottom py-4">
-                                    {% for log in logs %}
-                                        <div class="d-flex">
-                                            <div class="d-flex bg-primary-subtle rounded-circle flex-center me-3 bg-primary-subtle" style="width: 25px; height: 25px;">
-                                                <span class="fa-solid text-primary-dark fs-9 fa-clipboard text-primary-dark"></span>
-                                            </div>
-                                            <div class="flex-1">
-                                                <div class="d-flex justify-content-between flex-column flex-xl-row mb-2 mb-sm-0">
-                                                    <div class="flex-1 me-2">
-                                                        <h5 class="text-body-highlight lh-sm">{{ log.user }}</h5>
-                                                    </div>
-                                                    <div class="fs-9"><span class="fa-regular fa-calendar-days text-primary me-2"></span><span class="fw-semibold">{{ log.timestamp }}</span></div>
+{% block title %}
+    {% trans 'Activity' %}{% endblock %}
+    {% block content %}
+        <div class="row">
+            <div class="ol-auto pt-5 pb-9">
+                <div class="row-sm">
+                    <div class="row d-flex-center">
+                        <div class="col-8">
+                            <div class="tab-content" id="myTabContent">
+                                <div class="tab-pane fade active show"
+                                     id="tab-activity"
+                                     role="tabpanel"
+                                     aria-labelledby="activity-tab">
+                                    <h3 class="mb-4">{{ _("Activity") }}</h3>
+                                    <div class="border-bottom py-4">
+                                        {% for log in logs %}
+                                            <div class="d-flex">
+                                                <div class="d-flex bg-primary-subtle rounded-circle flex-center me-3 bg-primary-subtle"
+                                                     style="width: 25px;
+                                                            height: 25px">
+                                                    <span class="fa-solid text-primary-dark fs-9 fa-clipboard text-primary-dark"></span>
+                                                </div>
+                                                <div class="flex-1">
+                                                    <div class="d-flex justify-content-between flex-column flex-xl-row mb-2 mb-sm-0">
+                                                        <div class="flex-1 me-2">
+                                                            <h5 class="text-body-highlight lh-sm">{{ log.user }}</h5>
+                                                        </div>
+                                                        <div class="fs-9">
+                                                            <span class="fa-regular fa-calendar-days text-primary me-2"></span><span class="fw-semibold">{{ log.timestamp }}</span>
+                                                        </div>
+                                                    </div>
+                                                    <p class="fs-9 mb-0">{{ log.action }}</p>
                                                 </div>
-                                                <p class="fs-9 mb-0">{{ log.action }}</p>
                                             </div>
                                         </div>
-                                        </div>
-                                        <div class="border-bottom border-translucent py-4">
-                                    {% endfor %}
+                                        <div class="border-bottom border-translucent py-4">{% endfor %}</div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-
-                    {% if is_paginated %}
-                        <nav aria-label="Page navigation">
-                            <ul class="pagination mb-0">
-                                {% if page_obj.has_previous %}
-                                    <li class="page-item py-0">
-                                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
-                                            <span aria-hidden="true"><span class="fas fa-chevron-left"></span></span>
-                                        </a>
-                                    </li>
-                                {% else %}
-                                    <li class="page-item disabled">
-                                        <a class="page-link" href="#" aria-label="Previous">
-                                            <span aria-hidden="true"><span class="fas fa-chevron-left"></span></span>
-                                        </a>
-                                    </li>
-                                {% endif %}
-                                {% for num in page_obj.paginator.page_range %}
-                                    {% if page_obj.number == num %}
-                                        <li class="page-item active"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
+                        {% if is_paginated %}
+                            <nav aria-label="Page navigation">
+                                <ul class="pagination mb-0">
+                                    {% if page_obj.has_previous %}
+                                        <li class="page-item py-0">
+                                            <a class="page-link"
+                                               href="?page={{ page_obj.previous_page_number }}"
+                                               aria-label="Previous">
+                                                <span aria-hidden="true"><span class="fas fa-chevron-left"></span></span>
+                                            </a>
+                                        </li>
                                     {% else %}
-                                        <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
+                                        <li class="page-item disabled">
+                                            <a class="page-link" href="#" aria-label="Previous">
+                                                <span aria-hidden="true"><span class="fas fa-chevron-left"></span></span>
+                                            </a>
+                                        </li>
                                     {% endif %}
-                                {% endfor %}
-                                {% if page_obj.has_next %}
-                                    <li class="page-item">
-                                        <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
-                                            <span aria-hidden="true"><span class="fas fa-chevron-right"></span></span>
-                                        </a>
-                                    </li>
-                                {% else %}
-                                    <li class="page-item disabled">
-                                        <a class="page-link" href="#" aria-label="Next">
-                                            <span aria-hidden="true"><span class="fas fa-chevron-right"></span></span>
-                                        </a>
-                                    </li>
-                                {% endif %}
-                            </ul>
-                        </nav>
-                    {% endif %}
-
-
+                                    {% for num in page_obj.paginator.page_range %}
+                                        {% if page_obj.number == num %}
+                                            <li class="page-item active">
+                                                <a class="page-link" href="?page={{ num }}">{{ num }}</a>
+                                            </li>
+                                        {% else %}
+                                            <li class="page-item">
+                                                <a class="page-link" href="?page={{ num }}">{{ num }}</a>
+                                            </li>
+                                        {% endif %}
+                                    {% endfor %}
+                                    {% if page_obj.has_next %}
+                                        <li class="page-item">
+                                            <a class="page-link"
+                                               href="?page={{ page_obj.next_page_number }}"
+                                               aria-label="Next">
+                                                <span aria-hidden="true"><span class="fas fa-chevron-right"></span></span>
+                                            </a>
+                                        </li>
+                                    {% else %}
+                                        <li class="page-item disabled">
+                                            <a class="page-link" href="#" aria-label="Next">
+                                                <span aria-hidden="true"><span class="fas fa-chevron-right"></span></span>
+                                            </a>
+                                        </li>
+                                    {% endif %}
+                                </ul>
+                            </nav>
+                        {% endif %}
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-{% endblock %}
+    {% endblock %}
diff --git a/templates/dealers/assign_car_makes.html b/templates/dealers/assign_car_makes.html
index 16eb14ee..fc6f87a7 100644
--- a/templates/dealers/assign_car_makes.html
+++ b/templates/dealers/assign_car_makes.html
@@ -1,8 +1,9 @@
 {% extends "base.html" %}
 {% load i18n static %}
-{%block title%} {% trans  'Car Makes'%}{%endblock%}
-{% block content %}
-    <style>
+{% block title %}
+    {% trans  'Car Makes' %}{% endblock %}
+    {% block content %}
+        <style>
         /* Your existing CSS styles here */
         .car-makes-grid {
             display: grid;
@@ -54,38 +55,37 @@
             background: #f8f9fa;
             border-radius: 8px;
         }
-    </style>
-
-    <h2>{{ _("Select Car Makes You Sell") }}</h2>
-
-    <form method="post" action="{% url 'assign_car_makes' request.dealer.slug %}">
-        {% csrf_token %}
-
-        <div class="car-makes-grid">
-            {% for car_make in form.fields.car_makes.queryset %}
-
-                <label class="car-make-option">
-                    <input type="checkbox"
-                           name="car_makes"
-                           value="{{ car_make.pk }}"
-                           {% if car_make.pk in form.initial.car_makes or car_make.pk|stringformat:"s" in form.car_makes.value %}checked{% endif %}>
-                    <div class="car-make-image-container">
-                        {% if car_make.logo and car_make.logo.url %}
-                            <img src="{{ car_make.logo.url }}"
-                                 alt="{{ car_make.name }}"
-                                 class="car-make-image">
-                        {% else %}
-                            <div class="logo-placeholder">
-                                {{ car_make.name }}
-                            </div>
-                        {% endif %}
-                    </div>
-                    <div class="car-make-name">{{ car_make.get_local_name }}</div>
-                </label>
-            {% endfor %}
-        </div>
-        <div class="d-grid gap-2">
-            <button class="btn btn-phoenix-primary btn-lg" type="submit"><i class="fa fa-save me-2"></i>{{ _("Save") }}</button>
-        </div>
-    </form>
-{% endblock %}
\ No newline at end of file
+        </style>
+        <h2>{{ _("Select Car Makes You Sell") }}</h2>
+        <form method="post"
+              action="{% url 'assign_car_makes' request.dealer.slug %}">
+            {% csrf_token %}
+            <div class="car-makes-grid">
+                {% for car_make in form.fields.car_makes.queryset %}
+                    <label class="car-make-option">
+                        <input type="checkbox"
+                               name="car_makes"
+                               value="{{ car_make.pk }}"
+                               {% if car_make.pk in form.initial.car_makes or car_make.pk|stringformat:"s" in form.car_makes.value %}
+                                   checked
+                               {% endif %}>
+                        <div class="car-make-image-container">
+                            {% if car_make.logo and car_make.logo.url %}
+                                <img src="{{ car_make.logo.url }}"
+                                     alt="{{ car_make.name }}"
+                                     class="car-make-image">
+                            {% else %}
+                                <div class="logo-placeholder">{{ car_make.name }}</div>
+                            {% endif %}
+                        </div>
+                        <div class="car-make-name">{{ car_make.get_local_name }}</div>
+                    </label>
+                {% endfor %}
+            </div>
+            <div class="d-grid gap-2">
+                <button class="btn btn-phoenix-primary btn-lg" type="submit">
+                    <i class="fa fa-save me-2"></i>{{ _("Save") }}
+                </button>
+            </div>
+        </form>
+    {% endblock %}
diff --git a/templates/dealers/dealer_detail.html b/templates/dealers/dealer_detail.html
index 55a56818..e264ce2e 100644
--- a/templates/dealers/dealer_detail.html
+++ b/templates/dealers/dealer_detail.html
@@ -1,149 +1,180 @@
 {% extends 'base.html' %}
 {% load i18n static custom_filters crispy_forms_filters %}
-{%block title%}{%trans 'Profile'%} {%endblock%}
-{% block content %}
-    <div class="container-fluid">
-        <div class="row align-items-center justify-content-between g-3 mb-4">
-            <div class="col-auto">
-                <h2 class="mb-0">{% trans 'Profile' %}</h2>
-            </div>
-            <div class="col-auto">
-                <div class="row g-2 g-sm-3">
-                    <div class="col-auto">
-                        <a href="{% url 'order_list' %}" class="btn btn-phoenix-success"><span class="fas fa-list me-2"></span>{{ _("Orders") }}</a>
-                    </div>
-                    <div class="col-auto">
-                        <a href="{% url 'billing_info' %}" class="btn btn-phoenix-info"><span class="fas fa-credit-card me-2"></span>{{ _("Billing Information") }}</a>
-                    </div>
-                    <div class="col-auto">
-                        <a href="{% url 'account_change_password' %}" class="btn btn-phoenix-danger"><span class="fas fa-key me-2"></span>{{ _("Change Password") }}</a>
-                    </div>
-                    <div class="col-auto">
-                        <a class="btn btn-phoenix-primary" href="{% url 'dealer_update' dealer.slug %}"><span class="fas fa-edit me-2 text-primary"></span>{{ _("Edit") }} </a>
+{% block title %}
+    {% trans 'Profile' %} {% endblock %}
+    {% block content %}
+        <div class="container-fluid">
+            <div class="row align-items-center justify-content-between g-3 mb-4">
+                <div class="col-auto">
+                    <h2 class="mb-0">{% trans 'Profile' %}</h2>
+                </div>
+                <div class="col-auto">
+                    <div class="row g-2 g-sm-3">
+                        <div class="col-auto">
+                            <a href="{% url 'order_list' %}" class="btn btn-phoenix-success"><span class="fas fa-list me-2"></span>{{ _("Orders") }}</a>
+                        </div>
+                        <div class="col-auto">
+                            <a href="{% url 'billing_info' %}" class="btn btn-phoenix-info"><span class="fas fa-credit-card me-2"></span>{{ _("Billing Information") }}</a>
+                        </div>
+                        <div class="col-auto">
+                            <a href="{% url 'account_change_password' %}"
+                               class="btn btn-phoenix-danger"><span class="fas fa-key me-2"></span>{{ _("Change Password") }}</a>
+                        </div>
+                        <div class="col-auto">
+                            <a class="btn btn-phoenix-primary"
+                               href="{% url 'dealer_update' dealer.slug %}"><span class="fas fa-edit me-2 text-primary"></span>{{ _("Edit") }} </a>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="row g-3">
-            <div class="col-12 col-lg-8">
-                <div class="card h-100">
-                    <div class="card-body">
-                        <div class="border-bottom border-dashed pb-4">
-                            <div class="row align-items-center g-3 g-sm-5 text-center text-sm-start">
-                                <div class="col-12 col-sm-auto">
-                                    <input class="d-none" id="avatarFile" type="file" />
-                                    <label class="cursor-pointer avatar avatar-5xl" for="avatarFile">
-                                        {% if dealer.logo %}
-                                            <img src="{{ dealer.logo.url }}" alt="{{ dealer.get_local_name }}" class="rounded-circle" style="max-width: 150px;" />
+            <div class="row g-3">
+                <div class="col-12 col-lg-8">
+                    <div class="card h-100">
+                        <div class="card-body">
+                            <div class="border-bottom border-dashed pb-4">
+                                <div class="row align-items-center g-3 g-sm-5 text-center text-sm-start">
+                                    <div class="col-12 col-sm-auto">
+                                        <input class="d-none" id="avatarFile" type="file" />
+                                        <label class="cursor-pointer avatar avatar-5xl" for="avatarFile">
+                                            {% if dealer.logo %}
+                                                <img src="{{ dealer.logo.url }}"
+                                                     alt="{{ dealer.get_local_name }}"
+                                                     class="rounded-circle"
+                                                     style="max-width: 150px" />
+                                            {% else %}
+                                                <span class="rounded-circle feather feather-user text-body-tertiary"
+                                                      style="max-width: 150px"></span>
+                                                <img src="{% static 'images/logos/logo.png' %}"
+                                                     alt="{{ dealer.get_local_name }}"
+                                                     class=""
+                                                     style="max-width: 150px" />
+                                            {% endif %}
+                                        </label>
+                                    </div>
+                                    <div class="col-12 col-sm-auto flex-1">
+                                        <h3>{{ dealer.get_local_name }}</h3>
+                                        <p class="text-body-secondary">{% trans 'Joined' %} {{ dealer.joined_at|timesince }} {% trans 'ago' %}</p>
+                                        <div></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="d-flex flex-between-center pt-4">
+                                <div>
+                                    <h6 class="mb-2 text-body-secondary">{% trans 'last login'|capfirst %}</h6>
+                                    <h4 class="fs-7 text-body-highlight mb-0">{{ dealer.user.last_login|date:"D M d, Y H:i" }}</h4>
+                                </div>
+                                <div class="text-center me-1">
+                                    <h6 class="mb-2 text-body-secondary">{% trans 'Total users'|capfirst %}</h6>
+                                    <h4 class="fs-7 text-body-highlight mb-0">{{ dealer.staff_count }} / {{ allowed_users }}</h4>
+                                </div>
+                                <div class="text-center">
+                                    <h6 class="mb-2 text-body-secondary">{% trans 'Total cars'|capfirst %}</h6>
+                                    <h4 class="fs-7 text-body-highlight mb-0">{{ cars_count }} / {{ allowed_cars }}</h4>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12 col-lg-4">
+                    <div class="card h-100">
+                        <div class="card-body">
+                            <div class="border-bottom border-dashed">
+                                <h4 class="mb-3">{% trans 'Default Address' %}</h4>
+                            </div>
+                            <div class="pt-4 mb-7 mb-lg-4 mb-xl-7">
+                                <div class="row justify-content-between">
+                                    <div class="col-auto">
+                                        <h5 class="text-body-highlight">{% trans 'Address' %}</h5>
+                                    </div>
+                                    <div class="col-auto">
+                                        <p class="text-body-secondary">{{ dealer.address }}</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="border-top border-dashed pt-4">
+                                <div class="row flex-between-center mb-2">
+                                    <div class="col-auto">
+                                        <h5 class="text-body-highlight mb-0">{% trans 'Email' %}</h5>
+                                    </div>
+                                    <div class="col-auto">{{ dealer.user.email }}</div>
+                                </div>
+                                <div class="row flex-between-center">
+                                    <div class="col-auto">
+                                        <h5 class="text-body-highlight mb-0">{% trans 'Phone' %}</h5>
+                                    </div>
+                                    <div class="col-auto" dir="ltr">{{ dealer.phone_number }}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row g-3 my-2">
+                <div class="col-12 col-lg-6">
+                    <div class="card h-100">
+                        <div class="bg-holder d-dark-none"
+                             style="background-image:url({% static 'images/bg/8.png' %});
+                                    background-position:left bottom;
+                                    background-size:auto"></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"></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">
+                                    <div class="d-sm-flex d-md-block d-lg-flex align-items-center mb-3">
+                                        <h3 class="mb-0 me-2">{{ dealer.user.userplan.plan|capfirst }}</h3>
+                                        {% if dealer.user.userplan %}
+                                            {% if not dealer.user.userplan.is_expired %}
+                                                <span class="badge badge-phoenix fs-9 badge-phoenix-success"> <span class="badge-label">{% trans 'Active' %}</span><span class="ms-1" data-feather="check" style="height:16px;width:16px;"></span> </span>
+                                            {% else %}
+                                                <span class="badge badge-phoenix fs-9 badge-phoenix-danger"> <span class="badge-label">{% trans 'Expired' %}</span><span class="ms-1" data-feather="times" style="height:16px;width:16px;"></span> </span>
+                                                <a href="{% url 'pricing_page' request.dealer.slug %}"
+                                                   class="btn btn-phoenix-secondary ms-2"><span class="fas fa-arrow-right me-2"></span>{{ _("Renew") }}</a>
+                                            {% endif %}
+                                            {% if dealer.user.userplan.plan.name != "Enterprise" %}
+                                                <a href="{% url 'pricing_page' request.dealer.slug %}"
+                                                   class="btn btn-sm btn-phoenix-primary ms-2"><span class="fas fa-rocket me-2"></span>{{ _("Upgrade") }}</a>
+                                            {% endif %}
                                         {% else %}
-                                            <span class="rounded-circle feather feather-user text-body-tertiary" style="max-width: 150px;"></span>
-                                            <img src="{% static 'images/logos/logo.png' %}" alt="{{ dealer.get_local_name }}" class="" style="max-width: 150px;" />
+                                            <span class="text-body-tertiary fw-semibold">You have no active plan.</span> <a href="{% url 'pricing_page' request.dealer.slug %}"
+    class="btn btn-phoenix-secondary ms-2"><span class="fas fa-arrow-right me-2"></span>{{ _("Subscribe") }}</a>
                                         {% endif %}
-                                    </label>
-                                </div>
-                                <div class="col-12 col-sm-auto flex-1">
-                                    <h3>{{ dealer.get_local_name }}</h3>
-                                    <p class="text-body-secondary">{% trans 'Joined' %} {{ dealer.joined_at|timesince}} {% trans 'ago' %}</p>
-                                    <div></div>
+                                    </div>
+                                    <p class="fs-9 text-body-tertiary">
+                                        {% trans 'Active until' %}: {{ dealer.user.userplan.expire }}&nbsp;&nbsp; <small>{% trans 'Days left' %}: {{ dealer.user.userplan.days_left }}</small>
+                                    </p>
+                                    <div class="d-flex align-items-end mb-md-5 mb-lg-0">
+                                        <h4 class="fw-bolder me-1">
+                                            {{ dealer.user.userplan.plan.planpricing_set.first.price }} <span class="icon-saudi_riyal"></span>
+                                        </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/logos/logo-d.png' %}"
+                                     style="opacity: 0.2;
+                                            height: 64px"
+                                     alt="" />
+                                <img class="d-light-none"
+                                     src="{% static 'images/logos/logo.png' %}"
+                                     style="opacity: 0.2;
+                                            height: 64px"
+                                     alt="" />
                             </div>
-                        </div>
-                        <div class="d-flex flex-between-center pt-4">
-                            <div>
-                                <h6 class="mb-2 text-body-secondary">{% trans 'last login'|capfirst %}</h6>
-                                <h4 class="fs-7 text-body-highlight mb-0">{{ dealer.user.last_login|date:"D M d, Y H:i" }}</h4>
-                            </div>
-                            <div class="text-center me-1">
-                                <h6 class="mb-2 text-body-secondary">{% trans 'Total users'|capfirst %}</h6>
-                                <h4 class="fs-7 text-body-highlight mb-0">{{ dealer.staff_count }} / {{ allowed_users }}</h4>
-                            </div>
-                            <div class="text-center">
-                                <h6 class="mb-2 text-body-secondary">{% trans 'Total cars'|capfirst %}</h6>
-                                <h4 class="fs-7 text-body-highlight mb-0">{{ cars_count }} / {{ allowed_cars }}</h4>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-12 col-lg-4">
-                <div class="card h-100">
-                    <div class="card-body">
-                        <div class="border-bottom border-dashed">
-                            <h4 class="mb-3">{% trans 'Default Address' %}</h4>
-                        </div>
-                        <div class="pt-4 mb-7 mb-lg-4 mb-xl-7">
-                            <div class="row justify-content-between">
-                                <div class="col-auto">
-                                    <h5 class="text-body-highlight">{% trans 'Address' %}</h5>
-                                </div>
-                                <div class="col-auto">
-                                    <p class="text-body-secondary">{{ dealer.address}}</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="border-top border-dashed pt-4">
-                            <div class="row flex-between-center mb-2">
-                                <div class="col-auto">
-                                    <h5 class="text-body-highlight mb-0">{% trans 'Email' %}</h5>
-                                </div>
-                                <div class="col-auto">{{dealer.user.email}}</div>
-                            </div>
-                            <div class="row flex-between-center">
-                                <div class="col-auto">
-                                    <h5 class="text-body-highlight mb-0">{% trans 'Phone' %}</h5>
-                                </div>
-                                <div class="col-auto" dir="ltr">{{ dealer.phone_number }}</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="row g-3 my-2">
-            <div class="col-12 col-lg-6">
-                <div class="card h-100">
-                    <div class="bg-holder d-dark-none" style="background-image:url({% static 'images/bg/8.png' %});background-position:left bottom;background-size:auto;"></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;"></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">
-                                <div class="d-sm-flex d-md-block d-lg-flex align-items-center mb-3">
-                                    <h3 class="mb-0 me-2">{{ dealer.user.userplan.plan|capfirst }}</h3>
-                                    {% if dealer.user.userplan %}
-                                        {% if not dealer.user.userplan.is_expired %}
-                                            <span class="badge badge-phoenix fs-9 badge-phoenix-success"> <span class="badge-label">{% trans 'Active' %}</span><span class="ms-1" data-feather="check" style="height:16px;width:16px;"></span> </span>
-                                        {% else %}
-                                            <span class="badge badge-phoenix fs-9 badge-phoenix-danger"> <span class="badge-label">{% trans 'Expired' %}</span><span class="ms-1" data-feather="times" style="height:16px;width:16px;"></span> </span>
-                                            <a href="{% url 'pricing_page' request.dealer.slug %}" class="btn btn-phoenix-secondary ms-2"><span class="fas fa-arrow-right me-2"></span>{{ _("Renew") }}</a>
-                                        {% endif %}
-                                        {% if dealer.user.userplan.plan.name != "Enterprise" %}
-                                            <a href="{% url 'pricing_page' request.dealer.slug %}" class="btn btn-sm btn-phoenix-primary ms-2"><span class="fas fa-rocket me-2"></span>{{ _("Upgrade") }}</a>
-                                        {% endif %}
-                                    {% else %}
-                                        <span class="text-body-tertiary fw-semibold">You have no active plan.</span> <a href="{% url 'pricing_page' request.dealer.slug %}" class="btn btn-phoenix-secondary ms-2"><span class="fas fa-arrow-right me-2"></span>{{ _("Subscribe") }}</a>
-                                    {% endif %}
-
-                                </div>
-                                <p class="fs-9 text-body-tertiary">{% trans 'Active until' %}: {{ dealer.user.userplan.expire}}&nbsp;&nbsp; <small>{% trans 'Days left' %}: {{ dealer.user.userplan.days_left}}</small></p>
-                                <div class="d-flex align-items-end mb-md-5 mb-lg-0">
-                                    <h4 class="fw-bolder me-1">{{ dealer.user.userplan.plan.planpricing_set.first.price }} <span class="icon-saudi_riyal"></span></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/logos/logo-d.png' %}" style="opacity: 0.2;height: 64px;" alt="" />
-                            <img class="d-light-none" src="{% static 'images/logos/logo.png' %}" style="opacity: 0.2;height: 64px;" alt="" />
-                        </div>
-                        <div class="row 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">
-                                    <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-secondary-subtle">
-                                        <div class="d-flex flex-column">
-                                            {% for line in dealer.user.userplan.plan.description|splitlines %}
-                                                <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">{{ line }}</span>
-                                                </div>
-                                            {% endfor %}
+                            <div class="row 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">
+                                        <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-secondary-subtle">
+                                            <div class="d-flex flex-column">
+                                                {% for line in dealer.user.userplan.plan.description|splitlines %}
+                                                    <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">{{ line }}</span>
+                                                    </div>
+                                                {% endfor %}
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
@@ -151,57 +182,61 @@
                         </div>
                     </div>
                 </div>
-            </div>
-
-            <div class="col-12 col-lg-6">
-                <div class="card h-100">
-                    <div class="bg-holder" style="background-image:url({% static 'images/bg/bg-left-20.png' %});background-position:left bottom;background-size:auto;"></div>
-                    <div class="card-body d-flex flex-column justify-content-center position-relative">
-                        <h4 class="mb-3">{{ _("Makes you are selling") }}</h4>
-                        <div class="d-flex justify-content-center ">
-                            <div class="text-center me-3">
-
-                                <div class="row">
-                                    {% for make in car_makes %}
-                                        <div class="col my-1">
-                                            {% if make.logo %}
-                                                <img src="{{ make.logo.url }}" alt="{{ make.get_local_name }}" class="rounded rounded-1" style="height: 64px;" />
-                                            {% endif %}
-                                            <p class="fs-10">{{ make.get_local_name }}</p>
-                                        </div>
-                                    {% endfor %}
-                                </div>
-                                <div class="row">
-                                    <a class="btn btn-sm btn-phoenix-warning" href="{% url 'assign_car_makes' request.dealer.slug %}">{{ _("Select Makes")}}</a>
+                <div class="col-12 col-lg-6">
+                    <div class="card h-100">
+                        <div class="bg-holder"
+                             style="background-image:url({% static 'images/bg/bg-left-20.png' %});
+                                    background-position:left bottom;
+                                    background-size:auto"></div>
+                        <div class="card-body d-flex flex-column justify-content-center position-relative">
+                            <h4 class="mb-3">{{ _("Makes you are selling") }}</h4>
+                            <div class="d-flex justify-content-center ">
+                                <div class="text-center me-3">
+                                    <div class="row">
+                                        {% for make in car_makes %}
+                                            <div class="col my-1">
+                                                {% if make.logo %}
+                                                    <img src="{{ make.logo.url }}"
+                                                         alt="{{ make.get_local_name }}"
+                                                         class="rounded rounded-1"
+                                                         style="height: 64px" />
+                                                {% endif %}
+                                                <p class="fs-10">{{ make.get_local_name }}</p>
+                                            </div>
+                                        {% endfor %}
+                                    </div>
+                                    <div class="row">
+                                        <a class="btn btn-sm btn-phoenix-warning"
+                                           href="{% url 'assign_car_makes' request.dealer.slug %}">{{ _("Select Makes") }}</a>
+                                    </div>
                                 </div>
                             </div>
-
                         </div>
                     </div>
                 </div>
-            </div>
-            <div class="col-12 col-lg-6">
-                <div class="card h-100">
-                    <div class="bg-holder" style="background-image:url({% static 'images/bg/bg-left-20.png' %});background-position:left bottom;background-size:auto;"></div>
-                    <div class="card-body d-flex flex-column justify-content-center position-relative">
-                        <h4 class="mb-3">{{ _("VAT") }}</h4>
-                        <div class="d-flex justify-content-center ">
-                            <div class="text-center me-3">
-                                <div class="row">
-                                <form action="{% url 'dealer_vat_rate_update' request.dealer.slug %}" method="post">
-                                    {% csrf_token %}
-                                    {{vatform|crispy}}
-                                    <button class="btn btn-sm btn-phoenix-primary" type="submit">{% trans 'Update' %}</button>
-                                </form>
+                <div class="col-12 col-lg-6">
+                    <div class="card h-100">
+                        <div class="bg-holder"
+                             style="background-image:url({% static 'images/bg/bg-left-20.png' %});
+                                    background-position:left bottom;
+                                    background-size:auto"></div>
+                        <div class="card-body d-flex flex-column justify-content-center position-relative">
+                            <h4 class="mb-3">{{ _("VAT") }}</h4>
+                            <div class="d-flex justify-content-center ">
+                                <div class="text-center me-3">
+                                    <div class="row">
+                                        <form action="{% url 'dealer_vat_rate_update' request.dealer.slug %}"
+                                              method="post">
+                                            {% csrf_token %}
+                                            {{ vatform|crispy }}
+                                            <button class="btn btn-sm btn-phoenix-primary" type="submit">{% trans 'Update' %}</button>
+                                        </form>
+                                    </div>
                                 </div>
                             </div>
-
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
-
-
-{% endblock %}
+    {% endblock %}
diff --git a/templates/dealers/dealer_form.html b/templates/dealers/dealer_form.html
index 426243ca..71a19515 100644
--- a/templates/dealers/dealer_form.html
+++ b/templates/dealers/dealer_form.html
@@ -1,9 +1,9 @@
 {% extends "base.html" %}
 {% load crispy_forms_filters %}
 {% load i18n %}
-
-{% block title %}{{ _("Update Dealer Information") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Update Dealer Information") }}
+{% endblock title %}
 {% block content %}
 
     <!---->
@@ -31,9 +31,6 @@
 
             </div>
         </div>
-
-       </div>
-
-   </div>
+    </div>
     <!---->
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/email_sender/admin_new_appointment_email.html b/templates/email_sender/admin_new_appointment_email.html
index b368b2e0..6fb39c22 100644
--- a/templates/email_sender/admin_new_appointment_email.html
+++ b/templates/email_sender/admin_new_appointment_email.html
@@ -53,19 +53,28 @@
             <h1>{% translate 'New Appointment Request' %}</h1>
             <p>{% translate 'Dear Admin,' %}</p>
             <p>{% translate 'You have received a new appointment request. Here are the details:' %}</p>
-
             <div class="appointment-details">
-                <p><strong>{% translate 'Client Name' %}:</strong> {{ client_name }}</p>
-                <p><strong>{% translate 'Service Requested' %}:</strong> {{ appointment.get_service_name }}</p>
-                <p><strong>{% translate 'Appointment Date' %}:</strong> {{ appointment.appointment_request.date }}</p>
-                <p><strong>{% translate 'Time' %}:</strong> {{ appointment.appointment_request.start_time }}
-                    - {{ appointment.appointment_request.end_time }}</p>
-                <p><strong>{% translate 'Contact Details' %}:</strong> {{ appointment.phone }} | {{ appointment.client.email }}</p>
-                <p><strong>{% translate 'Additional Info' %}:</strong> {{ appointment.additional_info|default:"N/A" }}</p>
+                <p>
+                    <strong>{% translate 'Client Name' %}:</strong> {{ client_name }}
+                </p>
+                <p>
+                    <strong>{% translate 'Service Requested' %}:</strong> {{ appointment.get_service_name }}
+                </p>
+                <p>
+                    <strong>{% translate 'Appointment Date' %}:</strong> {{ appointment.appointment_request.date }}
+                </p>
+                <p>
+                    <strong>{% translate 'Time' %}:</strong> {{ appointment.appointment_request.start_time }}
+                    - {{ appointment.appointment_request.end_time }}
+                </p>
+                <p>
+                    <strong>{% translate 'Contact Details' %}:</strong> {{ appointment.phone }} | {{ appointment.client.email }}
+                </p>
+                <p>
+                    <strong>{% translate 'Additional Info' %}:</strong> {{ appointment.additional_info|default:"N/A" }}
+                </p>
             </div>
-
             <p>{% translate 'Please review the appointment request and take the necessary action.' %}</p>
-
             <div class="footer">
                 <p>{% translate 'This is an automated message. Please do not reply directly to this email.' %}</p>
             </div>
diff --git a/templates/email_sender/reminder_email.html b/templates/email_sender/reminder_email.html
index 2b7aad32..081cf87e 100644
--- a/templates/email_sender/reminder_email.html
+++ b/templates/email_sender/reminder_email.html
@@ -76,11 +76,19 @@
                     {% endif %}
                 </p>
                 <p>{% translate 'This is a reminder for your upcoming appointment.' %}</p>
-                <p><strong>{% translate 'Service' %}:</strong> {{ appointment.get_service_name }}</p>
-                <p><strong>{% translate 'Date' %}:</strong> {{ appointment.appointment_request.date }}</p>
-                <p><strong>{% translate 'Time' %}:</strong> {{ appointment.appointment_request.start_time }}
-                    - {{ appointment.appointment_request.end_time }}</p>
-                <p><strong>{% translate 'Location' %}:</strong> {{ appointment.address }}</p>
+                <p>
+                    <strong>{% translate 'Service' %}:</strong> {{ appointment.get_service_name }}
+                </p>
+                <p>
+                    <strong>{% translate 'Date' %}:</strong> {{ appointment.appointment_request.date }}
+                </p>
+                <p>
+                    <strong>{% translate 'Time' %}:</strong> {{ appointment.appointment_request.start_time }}
+                    - {{ appointment.appointment_request.end_time }}
+                </p>
+                <p>
+                    <strong>{% translate 'Location' %}:</strong> {{ appointment.address }}
+                </p>
                 {% if recipient_type == 'client' %}
                     <p>{% translate 'If you need to reschedule, please click the button below or contact us for further assistance.' %}</p>
                     <a href="{{ reschedule_link }}" class="button">{% translate 'Reschedule Appointment' %}</a>
diff --git a/templates/email_sender/reschedule_email.html b/templates/email_sender/reschedule_email.html
index 6215b6f5..e4ec83e1 100644
--- a/templates/email_sender/reschedule_email.html
+++ b/templates/email_sender/reschedule_email.html
@@ -35,7 +35,7 @@
         </style>
     </head>
     <body>
-<!-- email_template.html -->
+        <!-- email_template.html -->
         <div class="email-container">
             <h2>{% trans "Appointment Reschedule" %}</h2>
             <div class="email-content">
@@ -44,40 +44,43 @@
                 {% else %}
                     <p>{% trans "Hi" %},</p>
                 {% endif %}
-
                 {% if is_confirmation %}
-                    <p>
-                        {% trans "You have requested to reschedule your appointment. Please review the changes below and confirm:" %}
-                    </p>
+                    <p>{% trans "You have requested to reschedule your appointment. Please review the changes below and confirm:" %}</p>
                 {% else %}
                     <p>
                         {% trans "An appointment with" %} <b>{{ client_name }}</b> {% trans "for the service" %}
                         <b>{{ service_name }}</b> {% trans "has been rescheduled." %}
                         {% if reason_for_rescheduling %}
-                            <br><b>{% trans "Reason for rescheduling:" %}</b>
-                            {{ reason_for_rescheduling }}{% endif %}
+                            <br>
+                            <b>{% trans "Reason for rescheduling:" %}</b>
+                            {{ reason_for_rescheduling }}
+                        {% endif %}
                     </p>
                 {% endif %}
-
                 <p>
-                    <b>{% trans "Original Appointment:" %}</b><br>
-                    {% trans "Date" %}: {{ old_date }}<br>
+                    <b>{% trans "Original Appointment:" %}</b>
+                    <br>
+                    {% trans "Date" %}: {{ old_date }}
+                    <br>
                     {% trans "Time" %}: {{ old_start_time }} {% trans ' to ' %} {{ old_end_time }}
                 </p>
                 <p>
-                    <b>{% trans "Rescheduled Appointment:" %}</b><br>
-                    {% trans "Date" %}: {{ reschedule_date }}<br>
+                    <b>{% trans "Rescheduled Appointment:" %}</b>
+                    <br>
+                    {% trans "Date" %}: {{ reschedule_date }}
+                    <br>
                     {% trans "Time" %}: {{ start_time }} {% trans ' to ' %} {{ end_time }}
                 </p>
-
                 {% if is_confirmation %}
                     <p>
                         {% trans "This link will expire in 5 minutes. If you do not confirm within this time frame, you will need to submit a new reschedule request." %}
                     </p>
                     <a href="{{ confirmation_link }}"
-                       style="background-color: #007bff; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px;">
-                        {% trans "Confirm Appointment" %}
-                    </a>
+                       style="background-color: #007bff;
+                              color: white;
+                              padding: 10px 20px;
+                              text-decoration: none;
+                              border-radius: 5px">{% trans "Confirm Appointment" %}</a>
                     <div class="fallback-link">
                         {% trans "If the button above does not work, please copy and paste the following link into your browser:" %}
                         <br>
@@ -86,7 +89,11 @@
                 {% endif %}
             </div>
             <div class="email-footer">
-                <p>{% trans "Thank you," %}<br>{{ company }}</p>
+                <p>
+                    {% trans "Thank you," %}
+                    <br>
+                    {{ company }}
+                </p>
             </div>
         </div>
     </body>
diff --git a/templates/email_sender/thank_you_email.html b/templates/email_sender/thank_you_email.html
index ec512a16..cc1d5a1a 100644
--- a/templates/email_sender/thank_you_email.html
+++ b/templates/email_sender/thank_you_email.html
@@ -83,69 +83,101 @@
             }
         </style>
     </head>
-    <body style="margin: 0 !important; padding: 0; !important background-color: #ffffff;" bgcolor="#ffffff">
-
-<!-- HIDDEN PRE-HEADER TEXT -->
-        <div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: Open Sans, Helvetica, Arial, sans-serif; max-height: 0; max-width: 0; opacity: 0; overflow: hidden;">
-            {% if pre_header %}
-                {{ pre_header }}
-            {% endif %}
+    <body style="margin: 0 !important;
+                 padding: 0;
+                 !important background-color: #ffffff"
+          bgcolor="#ffffff">
+        <!-- HIDDEN PRE-HEADER TEXT -->
+        <div style="display: none;
+                    font-size: 1px;
+                    color: #fefefe;
+                    line-height: 1px;
+                    font-family: Open Sans, Helvetica, Arial, sans-serif;
+                    max-height: 0;
+                    max-width: 0;
+                    opacity: 0;
+                    overflow: hidden">
+            {% if pre_header %}{{ pre_header }}{% endif %}
         </div>
-
         <table border="0" cellpadding="0" cellspacing="0" width="100%">
             <tr>
-                <td align="center" valign="top" width="100%" bgcolor="#3b4a69"
-                    style="background: #3b4a69 url('{% static 'img/email_hd_bg.jpg' %}'); background-size: cover; padding: 50px 15px;"
+                <td align="center"
+                    valign="top"
+                    width="100%"
+                    bgcolor="#3b4a69"
+                    style="background: #3b4a69 url('{% static 'img/email_hd_bg.jpg' %}');
+                           background-size: cover;
+                           padding: 50px 15px"
                     class="mobile-padding">
-            <!--[if (gte mso 9)|(IE)]>
+                    <!--[if (gte mso 9)|(IE)]>
             <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                 <tr>
                     <td align="center" valign="top" width="600">
             <![endif]-->
-                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
+                    <table align="center"
+                           border="0"
+                           cellpadding="0"
+                           cellspacing="0"
+                           width="100%"
+                           style="max-width:600px">
                         <tr>
                             <td align="center" valign="top" style="padding: 0 0 20px 0;">
-                        {% comment %}<!--Add a logo img in future-->{% endcomment %}
+                                {% comment %}<!--Add a logo img in future-->{% endcomment %}
                             </td>
                         </tr>
                         <tr>
-                            <td align="center" valign="top"
-                                style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
+                            <td align="center"
+                                valign="top"
+                                style="padding: 0;
+                                       font-family: Open Sans, Helvetica, Arial, sans-serif">
                                 <h1 style="font-size: 28px; color: #ffffff;">{{ main_title }}</h1>
                             </td>
                         </tr>
                         <tr>
-                            <td align="center" valign="top"
-                                style="padding: 0 0 35px 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
-                                <table align="center" border="0" cellpadding="0" cellspacing="0" width="80%"
-                                       style="max-width: 200px;">
+                            <td align="center"
+                                valign="top"
+                                style="padding: 0 0 35px 0;
+                                       font-family: Open Sans, Helvetica, Arial, sans-serif">
+                                <table align="center"
+                                       border="0"
+                                       cellpadding="0"
+                                       cellspacing="0"
+                                       width="80%"
+                                       style="max-width: 200px">
                                     <tr>
-                                        <td align="center" bgcolor="red"
-                                            style="color: #ffffff; font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 14px; padding: 10px; border-radius: 3px 3px 0 0;">
-                                            {{ month_year }}
-                                        </td>
+                                        <td align="center"
+                                            bgcolor="red"
+                                            style="color: #ffffff;
+                                                   font-family: Open Sans, Helvetica, Arial, sans-serif;
+                                                   font-size: 14px;
+                                                   padding: 10px;
+                                                   border-radius: 3px 3px 0 0">{{ month_year }}</td>
                                     </tr>
                                     <tr>
-                                        <td align="center" bgcolor="#ffffff"
-                                            style="color: #444444; font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 48px; padding: 15px; border-radius: 0 0 3px 3px;">
-                                            {{ day }}
-                                        </td>
+                                        <td align="center"
+                                            bgcolor="#ffffff"
+                                            style="color: #444444;
+                                                   font-family: Open Sans, Helvetica, Arial, sans-serif;
+                                                   font-size: 48px;
+                                                   padding: 15px;
+                                                   border-radius: 0 0 3px 3px">{{ day }}</td>
                                     </tr>
                                 </table>
                             </td>
                         </tr>
                         <tr>
-                            <td align="center" valign="top"
-                                style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-bottom: 30px;">
-
-                                <p style="color: #ffffff; font-size: 14px; line-height: 24px; margin: 0;">
-                                    {% trans 'Thank you for choosing us.' %}
-                                </p>
+                            <td align="center"
+                                valign="top"
+                                style="font-family: Open Sans, Helvetica, Arial, sans-serif;
+                                       padding-bottom: 30px">
+                                <p style="color: #ffffff;
+                                          font-size: 14px;
+                                          line-height: 24px;
+                                          margin: 0">{% trans 'Thank you for choosing us.' %}</p>
                             </td>
                         </tr>
-
                     </table>
-            <!--[if (gte mso 9)|(IE)]>
+                    <!--[if (gte mso 9)|(IE)]>
             </td>
             </tr>
             </table>
@@ -153,32 +185,47 @@
                 </td>
             </tr>
             <tr style="max-width: 600px !important;">
-                <td align="center" valign="top" width="100%" bgcolor="#ffffff" style="padding: 50px 15px;"
+                <td align="center"
+                    valign="top"
+                    width="100%"
+                    bgcolor="#ffffff"
+                    style="padding: 50px 15px"
                     class="mobile-padding">
-            <!--[if (gte mso 9)|(IE)]>
+                    <!--[if (gte mso 9)|(IE)]>
             <table align="center" border="0" cellspacing="0" cellpadding="0" width="500">
                 <tr>
                     <td align="center" valign="top" width="500">
             <![endif]-->
-                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:500px;">
+                    <table align="center"
+                           border="0"
+                           cellpadding="0"
+                           cellspacing="0"
+                           width="100%"
+                           style="max-width:500px">
                         {% if account_details %}
                             <tr>
-                                <td align="left" valign="top"
-                                    style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
+                                <td align="left"
+                                    valign="top"
+                                    style="padding: 0;
+                                           font-family: Open Sans, Helvetica, Arial, sans-serif">
                                     <p style="font-size: 14px; margin-top: 15px !important;">Hi {{ first_name }},</p>
                                     <p style="font-size: 14px; margin-top: 5px !important;">{{ message_1 }}</p>
                                 </td>
                             </tr>
                             <tr>
-                                <td align="left" valign="top"
-                                    style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
+                                <td align="left"
+                                    valign="top"
+                                    style="padding: 0;
+                                           font-family: Open Sans, Helvetica, Arial, sans-serif">
                                     <p style="font-size: 14px; margin-top: 5px !important;">{{ message_2 }}</p>
                                 </td>
                             </tr>
                             {% if activation_link %}
                                 <tr>
-                                    <td align="left" valign="top"
-                                        style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
+                                    <td align="left"
+                                        valign="top"
+                                        style="padding: 0;
+                                               font-family: Open Sans, Helvetica, Arial, sans-serif">
                                         <h3>{% trans 'Account Activation' %}</h3>
                                         <p style="font-size: 14px; margin-top: 15px !important;">
                                             {% blocktranslate with link=activation_link %}
@@ -188,103 +235,112 @@
                                             {% endblocktranslate %}
                                         </p>
                                     </td>
-                                    <tr>
+                                    <tr>{% endif %}</tr>
+                                <tr>
+                                    <td align="left"
+                                        valign="top"
+                                        style="font-family: Open Sans, Helvetica, Arial, sans-serif;
+                                               padding-top: 0">
+                                        <h3>{% trans "Account Information" %}</h3>
+                                        <div style="color: #000000; font-size: 14px; line-height: 24px;">
+                                            <ul>
+                                                {% for key, value in account_details.items %}<li>{{ key }}: {{ value }}</li>{% endfor %}
+                                            </ul>
+                                        </div>
+                                    </td>
+                                </tr>
+                            {% endif %}
+                            {% if more_details %}
+                                <tr>
+                                    <td align="left"
+                                        valign="top"
+                                        style="font-family: Open Sans, Helvetica, Arial, sans-serif;
+                                               padding-top: 0">
+                                        <h3>{% trans "Appointment Details" %}</h3>
+                                        <div style="color: #000000; font-size: 14px; line-height: 24px;">
+                                            <ul>
+                                                {% for key, value in more_details.items %}<li>{{ key }}: {{ value }}</li>{% endfor %}
+                                            </ul>
+                                        </div>
+                                    </td>
+                                </tr>
+                            {% endif %}
+                            {% if reschedule_link %}
+                                <tr>
+                                    <td align="left"
+                                        valign="top"
+                                        style="padding: 0;
+                                               font-family: Open Sans, Helvetica, Arial, sans-serif">
+                                        <h3>{% trans 'Rescheduling' %}</h3>
+                                        <p style="margin-top: 15px !important; font-size: 14px">
+                                            {% translate 'If your plans change and you need to reschedule your appointment, you can easily do so by following this link: ' %}
+                                            <a href="{{ reschedule_link }}">{% translate 'Reschedule Appointment' %}</a>
+                                        </p>
+                                    </td>
+                                </tr>
                             {% endif %}
-                            </tr>
                             <tr>
-                                <td align="left" valign="top"
-                                    style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-top: 0;">
-                                    <h3>{% trans "Account Information" %}</h3>
-                                    <div style="color: #000000; font-size: 14px; line-height: 24px;">
-                                        <ul>
-                                            {% for key, value in account_details.items %}
-                                                <li>{{ key }}: {{ value }}</li>
-                                            {% endfor %}
-                                        </ul>
-                                    </div>
-
-                                </td>
-                            </tr>
-                        {% endif %}
-                        {% if more_details %}
-                            <tr>
-                                <td align="left" valign="top"
-                                    style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-top: 0;">
-                                    <h3>{% trans "Appointment Details" %}</h3>
-                                    <div style="color: #000000; font-size: 14px; line-height: 24px;">
-                                        <ul>
-                                            {% for key, value in more_details.items %}
-                                                <li>{{ key }}: {{ value }}</li>
-                                            {% endfor %}
-                                        </ul>
-                                    </div>
-
-                                </td>
-                            </tr>
-                        {% endif %}
-                        {% if reschedule_link %}
-                            <tr>
-                                <td align="left" valign="top"
-                                    style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
-                                    <h3>{% trans 'Rescheduling' %}</h3>
+                                <td align="left"
+                                    valign="top"
+                                    style="padding: 0;
+                                           font-family: Open Sans, Helvetica, Arial, sans-serif">
+                                    <h3>{% trans 'Support' %}</h3>
                                     <p style="margin-top: 15px !important; font-size: 14px">
-                                        {% translate 'If your plans change and you need to reschedule your appointment, you can easily do so by following this link: ' %}
-                                        <a href="{{ reschedule_link }}">
-                                            {% translate 'Reschedule Appointment' %}
-                                        </a>
-                                    </p>
-                                </td>
-                            </tr>
-                        {% endif %}
-
-                        <tr>
-                            <td align="left" valign="top"
-                                style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
-                                <h3>{% trans 'Support' %}</h3>
-                                <p style="margin-top: 15px !important; font-size: 14px">
-                                    {% blocktranslate %}
+                                        {% blocktranslate %}
                                         Should you have any inquiries or require further assistance, our support team is here to
                                         help. You can reach us anytime.
                                     {% endblocktranslate %}
-                                </p>
-                                <p style="margin-top: 15px !important; font-size: 14px">
-                                    {% trans "We look forward to serving you and ensuring that your experience with us is both rewarding and satisfactory." %}
-                                </p>
-                                <p style="margin-top: 15px !important; font-size: 14px">{% trans "Warm regards" %},</p>
-                                <p style="margin-top: 15px !important; font-size: 14px">{% trans "The Team" %}</p>
-                            </td>
-                        </tr>
-                    </table>
-            <!--[if (gte mso 9)|(IE)]>
+                                    </p>
+                                    <p style="margin-top: 15px !important; font-size: 14px">
+                                        {% trans "We look forward to serving you and ensuring that your experience with us is both rewarding and satisfactory." %}
+                                    </p>
+                                    <p style="margin-top: 15px !important; font-size: 14px">{% trans "Warm regards" %},</p>
+                                    <p style="margin-top: 15px !important; font-size: 14px">{% trans "The Team" %}</p>
+                                </td>
+                            </tr>
+                        </table>
+                        <!--[if (gte mso 9)|(IE)]>
             </td>
             </tr>
             </table>
             <![endif]-->
-                </td>
-            </tr>
-            <tr>
-                <td align="center" height="100%" valign="top" width="100%" bgcolor="#f6f6f6" style="padding: 40px 15px;">
-            <!--[if (gte mso 9)|(IE)]>
+                    </td>
+                </tr>
+                <tr>
+                    <td align="center"
+                        height="100%"
+                        valign="top"
+                        width="100%"
+                        bgcolor="#f6f6f6"
+                        style="padding: 40px 15px">
+                        <!--[if (gte mso 9)|(IE)]>
             <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                 <tr>
                     <td align="center" valign="top" width="600">
             <![endif]-->
-                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
-                        <tr>
-                            <td align="center" valign="top"
-                                style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif; color: #999999;">
-                                &copy; {{ current_year }} {{ company }}. {% trans "All rights reserved" %}.
-                            </td>
-                        </tr>
-                    </table>
-            <!--[if (gte mso 9)|(IE)]>
+                        <table align="center"
+                               border="0"
+                               cellpadding="0"
+                               cellspacing="0"
+                               width="100%"
+                               style="max-width:600px">
+                            <tr>
+                                <td align="center"
+                                    valign="top"
+                                    style="padding: 0;
+                                           font-family: Open Sans, Helvetica, Arial, sans-serif;
+                                           color: #999999">
+                                    &copy; {{ current_year }} {{ company }}. {% trans "All rights reserved" %}.
+                                </td>
+                            </tr>
+                        </table>
+                        <!--[if (gte mso 9)|(IE)]>
             </td>
             </tr>
             </table>
             <![endif]-->
-                </td>
-            </tr>
-        </table>
-
-    </body>
-</html>
+                    </td>
+                </tr>
+            </table>
+        </body>
+    </html>
diff --git a/templates/errors/400.html b/templates/errors/400.html
index c4b03af4..e470474b 100644
--- a/templates/errors/400.html
+++ b/templates/errors/400.html
@@ -1,7 +1,5 @@
 {% extends "base.html" %}
-
 {% load i18n %}
-
 {% block content %}
     <style>
         .error-page {
@@ -39,10 +37,10 @@
             background-color: #3e8e41;
         }
     </style>
-
     <div class="error-page">
         <h1 class="error-code">{% trans "400" %}</h1>
         <p class="error-message">{% trans "Bad Request" %}</p>
-        <a href="{% url 'inventory_stats' request.dealer.slug %}" class="error-button">{% trans "Go Back" %}</a>
+        <a href="{% url 'inventory_stats' request.dealer.slug %}"
+           class="error-button">{% trans "Go Back" %}</a>
     </div>
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
diff --git a/templates/errors/403.html b/templates/errors/403.html
index bee0847c..e547aed6 100644
--- a/templates/errors/403.html
+++ b/templates/errors/403.html
@@ -1,8 +1,27 @@
-
 <div class="row justify-content-center align-items-center g-5">
-  <div class="col-12 col-lg-6 text-center order-lg-1"><img class="img-fluid w-lg-100 d-dark-none" src="{% static 'images/spot-illustrations/403-illustration.png' %}" alt="" width="400" /><img class="img-fluid w-md-50 w-lg-100 d-light-none" src="{% static '/images/spot-illustrations/dark_403-illustration.png' %}" alt="" width="540" /></div>
-  <div class="col-12 col-lg-6 text-center text-lg-start"><img class="img-fluid mb-6 w-50 w-lg-75 d-dark-none" src="{% static 'images/spot-illustrations/403.png' %}" alt="" /><img class="img-fluid mb-6 w-50 w-lg-75 d-light-none" src="{% static '/images/spot-illustrations/dark_403.png' %}" alt="" />
-    <h2 class="text-body-secondary fw-bolder mb-3">Access Forbidden!</h2>
-    <p class="text-body mb-5">Halt! Thou art endeavouring to trespass upon a realm not granted unto thee.<br class="d-none d-md-block d-lg-none" />granted unto thee.</p><a class="btn btn-lg btn-phoenix-primary" href="{% url 'home' %}">Go Home</a>
-  </div>
-</div>
\ No newline at end of file
+    <div class="col-12 col-lg-6 text-center order-lg-1">
+        <img class="img-fluid w-lg-100 d-dark-none"
+             src="{% static 'images/spot-illustrations/403-illustration.png' %}"
+             alt=""
+             width="400" />
+        <img class="img-fluid w-md-50 w-lg-100 d-light-none"
+             src="{% static '/images/spot-illustrations/dark_403-illustration.png' %}"
+             alt=""
+             width="540" />
+    </div>
+    <div class="col-12 col-lg-6 text-center text-lg-start">
+        <img class="img-fluid mb-6 w-50 w-lg-75 d-dark-none"
+             src="{% static 'images/spot-illustrations/403.png' %}"
+             alt="" />
+        <img class="img-fluid mb-6 w-50 w-lg-75 d-light-none"
+             src="{% static '/images/spot-illustrations/dark_403.png' %}"
+             alt="" />
+        <h2 class="text-body-secondary fw-bolder mb-3">Access Forbidden!</h2>
+        <p class="text-body mb-5">
+            Halt! Thou art endeavouring to trespass upon a realm not granted unto thee.
+            <br class="d-none d-md-block d-lg-none" />
+            granted unto thee.
+        </p>
+        <a class="btn btn-lg btn-phoenix-primary" href="{% url 'home' %}">Go Home</a>
+    </div>
+</div>
diff --git a/templates/errors/404.html b/templates/errors/404.html
index 907fc29c..6016f20a 100644
--- a/templates/errors/404.html
+++ b/templates/errors/404.html
@@ -1,45 +1,66 @@
 <!DOCTYPE html>
-<html lang="en-US" dir="ltr" data-navigation-type="default" data-navbar-horizontal-shape="default">
-
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-
-    <!-- ===============================================-->
-    <!--    Document Title-->
-    <!-- ===============================================-->
-    <title>Phoenix</title>
-
-
-    <!-- ===============================================-->
-    <!--    Favicons-->
-    <!-- ===============================================-->
-    <link rel="apple-touch-icon" sizes="180x180" href="../../web_assets/img/favicons/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="../../web_assets/img/favicons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="../../web_assets/img/favicons/favicon-16x16.png">
-    <link rel="shortcut icon" type="image/x-icon" href="../../web_assets/img/favicons/favicon.ico">
-    <link rel="manifest" href="../../web_assets/img/favicons/manifest.json">
-    <meta name="msapplication-TileImage" content="../../assets/img/favicons/mstile-150x150.png">
-    <meta name="theme-color" content="#ffffff">
-    <script src="../../vendors/simplebar/simplebar.min.js"></script>
-    <script src="../../web_assets/js/config.js"></script>
-
-
-    <!-- ===============================================-->
-    <!--    Stylesheets-->
-    <!-- ===============================================-->
-    <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="../../vendors/simplebar/simplebar.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
-    <link href="../../web_assets/css/theme-rtl.min.css" type="text/css" rel="stylesheet" id="style-rtl">
-    <link href="../../web_assets/css/theme.min.css" type="text/css" rel="stylesheet" id="style-default">
-    <link href="../../web_assets/css/user-rtl.min.css" type="text/css" rel="stylesheet" id="user-style-rtl">
-    <link href="../../web_assets/css/user.min.css" type="text/css" rel="stylesheet" id="user-style-default">
-    <script>
+<html lang="en-US"
+      dir="ltr"
+      data-navigation-type="default"
+      data-navbar-horizontal-shape="default">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <!-- ===============================================-->
+        <!--    Document Title-->
+        <!-- ===============================================-->
+        <title>Phoenix</title>
+        <!-- ===============================================-->
+        <!--    Favicons-->
+        <!-- ===============================================-->
+        <link rel="apple-touch-icon"
+              sizes="180x180"
+              href="../../web_assets/img/favicons/apple-touch-icon.png">
+        <link rel="icon"
+              type="image/png"
+              sizes="32x32"
+              href="../../web_assets/img/favicons/favicon-32x32.png">
+        <link rel="icon"
+              type="image/png"
+              sizes="16x16"
+              href="../../web_assets/img/favicons/favicon-16x16.png">
+        <link rel="shortcut icon"
+              type="image/x-icon"
+              href="../../web_assets/img/favicons/favicon.ico">
+        <link rel="manifest" href="../../web_assets/img/favicons/manifest.json">
+        <meta name="msapplication-TileImage"
+              content="../../assets/img/favicons/mstile-150x150.png">
+        <meta name="theme-color" content="#ffffff">
+        <script src="../../vendors/simplebar/simplebar.min.js"></script>
+        <script src="../../web_assets/js/config.js"></script>
+        <!-- ===============================================-->
+        <!--    Stylesheets-->
+        <!-- ===============================================-->
+        <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="../../vendors/simplebar/simplebar.min.css" rel="stylesheet">
+        <link rel="stylesheet"
+              href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
+        <link href="../../web_assets/css/theme-rtl.min.css"
+              type="text/css"
+              rel="stylesheet"
+              id="style-rtl">
+        <link href="../../web_assets/css/theme.min.css"
+              type="text/css"
+              rel="stylesheet"
+              id="style-default">
+        <link href="../../web_assets/css/user-rtl.min.css"
+              type="text/css"
+              rel="stylesheet"
+              id="user-style-rtl">
+        <link href="../../web_assets/css/user.min.css"
+              type="text/css"
+              rel="stylesheet"
+              id="user-style-default">
+        <script>
       var phoenixIsRTL = window.config.config.phoenixIsRTL;
       if (phoenixIsRTL) {
         var linkDefault = document.getElementById('style-default');
@@ -53,30 +74,47 @@
         linkRTL.setAttribute('disabled', true);
         userLinkRTL.setAttribute('disabled', true);
       }
-    </script>
-  </head>
-
-
-  <body>
-
-    <!-- ===============================================-->
-    <!--    Main Content-->
-    <!-- ===============================================-->
-    <main class="main" id="top">
-      <div class="px-3">
-        <div class="row min-vh-100 flex-center p-5">
-          <div class="col-12 col-xl-10 col-xxl-8">
-            <div class="row justify-content-center align-items-center g-5">
-              <div class="col-12 col-lg-6 text-center order-lg-1"><img class="img-fluid w-lg-100 d-dark-none" src="../../web_assets/img/spot-illustrations/404-illustration.png" alt="" width="400" /><img class="img-fluid w-md-50 w-lg-100 d-light-none" src="../../web_assets/img/spot-illustrations/dark_404-illustration.png" alt="" width="540" /></div>
-              <div class="col-12 col-lg-6 text-center text-lg-start"><img class="img-fluid mb-6 w-50 w-lg-75 d-dark-none" src="../../web_assets/img/spot-illustrations/404.png" alt="" /><img class="img-fluid mb-6 w-50 w-lg-75 d-light-none" src="../../web_assets/img/spot-illustrations/dark_404.png" alt="" />
-                <h2 class="text-body-secondary fw-bolder mb-3">Page Missing!</h2>
-                <p class="text-body mb-5">But no worries! Our ostrich is looking everywhere <br class="d-none d-sm-block" />while you wait safely. </p><a class="btn btn-lg btn-phoenix-primary" href="../../index.html">Go Home</a>
-              </div>
+        </script>
+    </head>
+    <body>
+        <!-- ===============================================-->
+        <!--    Main Content-->
+        <!-- ===============================================-->
+        <main class="main" id="top">
+            <div class="px-3">
+                <div class="row min-vh-100 flex-center p-5">
+                    <div class="col-12 col-xl-10 col-xxl-8">
+                        <div class="row justify-content-center align-items-center g-5">
+                            <div class="col-12 col-lg-6 text-center order-lg-1">
+                                <img class="img-fluid w-lg-100 d-dark-none"
+                                     src="../../web_assets/img/spot-illustrations/404-illustration.png"
+                                     alt=""
+                                     width="400" />
+                                <img class="img-fluid w-md-50 w-lg-100 d-light-none"
+                                     src="../../web_assets/img/spot-illustrations/dark_404-illustration.png"
+                                     alt=""
+                                     width="540" />
+                            </div>
+                            <div class="col-12 col-lg-6 text-center text-lg-start">
+                                <img class="img-fluid mb-6 w-50 w-lg-75 d-dark-none"
+                                     src="../../web_assets/img/spot-illustrations/404.png"
+                                     alt="" />
+                                <img class="img-fluid mb-6 w-50 w-lg-75 d-light-none"
+                                     src="../../web_assets/img/spot-illustrations/dark_404.png"
+                                     alt="" />
+                                <h2 class="text-body-secondary fw-bolder mb-3">Page Missing!</h2>
+                                <p class="text-body mb-5">
+                                    But no worries! Our ostrich is looking everywhere
+                                    <br class="d-none d-sm-block" />
+                                    while you wait safely.
+                                </p>
+                                <a class="btn btn-lg btn-phoenix-primary" href="../../index.html">Go Home</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
-        </div>
-      </div>
-      <script>
+            <script>
         var navbarTopStyle = window.config.config.phoenixNavbarTopStyle;
         var navbarTop = document.querySelector('.navbar-top');
         if (navbarTopStyle === 'darker') {
@@ -88,191 +126,448 @@
         if (navbarVertical && navbarVerticalStyle === 'darker') {
           navbarVertical.setAttribute('data-navbar-appearance', 'darker');
         }
-      </script>
-      <div class="support-chat-row">
-        <div class="row-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>
+            </script>
+            <div class="support-chat-row">
+                <div class="row-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="../../web_assets/img/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 class="text-center mt-auto">
-                  <div class="avatar avatar-3xl status-online"><img class="rounded-circle border border-3 border-light-subtle" src="../../web_assets/img/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 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>
+    <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>
+                <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">
+        <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="../../web_assets/img/generic/default-light.png" alt=""/></span><span class="label-text">Light</span></label>
+            <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="../../web_assets/img/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="../../web_assets/img/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="../../web_assets/img/generic/auto.png"
+                                 alt="" />
+                        </span><span class="label-text">Auto</span>
+                    </label>
+                </div>
             </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="../../web_assets/img/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="../../web_assets/img/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 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>
-          </div>
-          <p class="mb-0 text-body-tertiary">Change text direction</p>
+            <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 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>
-          </div>
-          <p class="mb-0 text-body-tertiary">Toggle support chat</p>
+            <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" />
-              <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="../../web_assets/img/generic/default-light.png" alt=""/><img class="img-fluid img-prototype d-light-none" src="../../web_assets/img/generic/default-dark.png" alt=""/></span><span class="label-text">Vertical</span></label>
+            <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" />
+                    <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="../../web_assets/img/generic/default-light.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none"
+                                 src="../../web_assets/img/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" />
+                    <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="../../web_assets/img/generic/top-default.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none"
+                                 src="../../web_assets/img/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"
+                           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="../../web_assets/img/generic/nav-combo-light.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none"
+                                 src="../../web_assets/img/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"
+                           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="../../web_assets/img/generic/dual-light.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none"
+                                 src="../../web_assets/img/generic/dual-dark.png"
+                                 alt="" />
+                        </span><span class="label-text">Dual nav</span>
+                    </label>
+                </div>
             </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" />
-              <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="../../web_assets/img/generic/top-default.png" alt=""/><img class="img-fluid img-prototype d-light-none" src="../../web_assets/img/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" 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="../../web_assets/img/generic/nav-combo-light.png" alt=""/><img class="img-fluid img-prototype d-light-none" src="../../web_assets/img/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" 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="../../web_assets/img/generic/dual-light.png" alt=""/><img class="img-fluid img-prototype d-light-none" src="../../web_assets/img/generic/dual-dark.png" alt=""/></span><span class="label-text"> Dual nav</span></label>
-            </div>
-          </div>
         </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" />
-              <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="../../web_assets/img/generic/default-light.png" alt="" /><img class="img-fluid img-prototype d-light-none" src="../../web_assets/img/generic/default-dark.png" alt="" /><span class="label-text d-dark-none"> Default</span><span class="label-text d-light-none">Default</span></label>
+            <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" />
+                    <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="../../web_assets/img/generic/default-light.png"
+                             alt="" />
+                        <img class="img-fluid img-prototype d-light-none"
+                             src="../../web_assets/img/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" />
+                    <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="../../web_assets/img/generic/vertical-darker.png"
+                             alt="" />
+                        <img class="img-fluid img-prototype d-light-none"
+                             src="../../assets/img/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>
-            <div class="col-6">
-              <input class="btn-check" id="navbar-style-dark" type="radio" name="config.name" value="darker" data-theme-control="phoenixNavbarVerticalStyle" />
-              <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="../../web_assets/img/generic/vertical-darker.png" alt="" /><img class="img-fluid img-prototype d-light-none" src="../../assets/img/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>
         </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" />
-              <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="../../assets/img/generic/top-default.png" alt=""/><img class="img-fluid img-prototype d-light-none mb-0" src="../../assets/img/generic/top-default-dark.png" alt=""/></span><span class="label-text">Default</span></label>
+            <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" />
+                    <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="../../assets/img/generic/top-default.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none mb-0"
+                                 src="../../assets/img/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" />
+                    <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="../../assets/img/generic/top-slim.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none mb-0"
+                                 src="../../assets/img/generic/top-slim-dark.png"
+                                 alt="" />
+                        </span><span class="label-text">Slim</span>
+                    </label>
+                </div>
             </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" />
-              <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="../../assets/img/generic/top-slim.png" alt=""/><img class="img-fluid img-prototype d-light-none mb-0" src="../../assets/img/generic/top-slim-dark.png" alt=""/></span><span class="label-text"> Slim</span></label>
-            </div>
-          </div>
         </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" />
-              <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="../../assets/img/generic/top-default.png" alt=""/><img class="img-fluid img-prototype d-light-none mb-0" src="../../assets/img/generic/top-style-darker.png" alt=""/></span><span class="label-text">Default</span></label>
+            <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" />
+                    <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="../../assets/img/generic/top-default.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none mb-0"
+                                 src="../../assets/img/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" />
+                    <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="../../assets/img/generic/navbar-top-style-light.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none mb-0"
+                                 src="../../assets/img/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>
-            <div class="col-6">
-              <input class="btn-check" id="navbarTopDarker" name="navbar-top-style" type="radio" value="darker" data-theme-control="phoenixNavbarTopStyle" />
-              <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="../../assets/img/generic/navbar-top-style-light.png" alt=""/><img class="img-fluid img-prototype d-light-none mb-0" src="../../assets/img/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>
+        <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>
-        </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="../../vendors/popper/popper.min.js"></script>
-    <script src="../../vendors/bootstrap/bootstrap.min.js"></script>
-    <script src="../../vendors/anchorjs/anchor.min.js"></script>
-    <script src="../../vendors/is/is.min.js"></script>
-    <script src="../../vendors/fontawesome/all.min.js"></script>
-    <script src="../../vendors/lodash/lodash.min.js"></script>
-    <script src="../../vendors/list.js/list.min.js"></script>
-    <script src="../../vendors/feather-icons/feather.min.js"></script>
-    <script src="../../vendors/dayjs/dayjs.min.js"></script>
-    <script src="../../assets/js/phoenix.js"></script>
-
-  </body>
-
-</html>
\ No newline at end of file
+        </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="../../vendors/popper/popper.min.js"></script>
+<script src="../../vendors/bootstrap/bootstrap.min.js"></script>
+<script src="../../vendors/anchorjs/anchor.min.js"></script>
+<script src="../../vendors/is/is.min.js"></script>
+<script src="../../vendors/fontawesome/all.min.js"></script>
+<script src="../../vendors/lodash/lodash.min.js"></script>
+<script src="../../vendors/list.js/list.min.js"></script>
+<script src="../../vendors/feather-icons/feather.min.js"></script>
+<script src="../../vendors/dayjs/dayjs.min.js"></script>
+<script src="../../assets/js/phoenix.js"></script>
+</body>
+</html>
diff --git a/templates/errors/500.html b/templates/errors/500.html
index 653e9821..2fdb978e 100644
--- a/templates/errors/500.html
+++ b/templates/errors/500.html
@@ -1,45 +1,66 @@
 <!DOCTYPE html>
-<html lang="en-US" dir="ltr" data-navigation-type="default" data-navbar-horizontal-shape="default">
-
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-
-    <!-- ===============================================-->
-    <!--    Document Title-->
-    <!-- ===============================================-->
-    <title>Phoenix</title>
-
-
-    <!-- ===============================================-->
-    <!--    Favicons-->
-    <!-- ===============================================-->
-    <link rel="apple-touch-icon" sizes="180x180" href="../../web_assets/img/favicons/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="../../web_assets/img/favicons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="../../web_assets/img/favicons/favicon-16x16.png">
-    <link rel="shortcut icon" type="image/x-icon" href="../../web_assets/img/favicons/favicon.ico">
-    <link rel="manifest" href="../../web_assets/img/favicons/manifest.json">
-    <meta name="msapplication-TileImage" content="../../assets/img/favicons/mstile-150x150.png">
-    <meta name="theme-color" content="#ffffff">
-    <script src="../../vendors/simplebar/simplebar.min.js"></script>
-    <script src="../../web_assets/js/config.js"></script>
-
-
-    <!-- ===============================================-->
-    <!--    Stylesheets-->
-    <!-- ===============================================-->
-    <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="../../vendors/simplebar/simplebar.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
-    <link href="../../web_assets/css/theme-rtl.min.css" type="text/css" rel="stylesheet" id="style-rtl">
-    <link href="../../web_assets/css/theme.min.css" type="text/css" rel="stylesheet" id="style-default">
-    <link href="../../web_assets/css/user-rtl.min.css" type="text/css" rel="stylesheet" id="user-style-rtl">
-    <link href="../../web_assets/css/user.min.css" type="text/css" rel="stylesheet" id="user-style-default">
-    <script>
+<html lang="en-US"
+      dir="ltr"
+      data-navigation-type="default"
+      data-navbar-horizontal-shape="default">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <!-- ===============================================-->
+        <!--    Document Title-->
+        <!-- ===============================================-->
+        <title>Phoenix</title>
+        <!-- ===============================================-->
+        <!--    Favicons-->
+        <!-- ===============================================-->
+        <link rel="apple-touch-icon"
+              sizes="180x180"
+              href="../../web_assets/img/favicons/apple-touch-icon.png">
+        <link rel="icon"
+              type="image/png"
+              sizes="32x32"
+              href="../../web_assets/img/favicons/favicon-32x32.png">
+        <link rel="icon"
+              type="image/png"
+              sizes="16x16"
+              href="../../web_assets/img/favicons/favicon-16x16.png">
+        <link rel="shortcut icon"
+              type="image/x-icon"
+              href="../../web_assets/img/favicons/favicon.ico">
+        <link rel="manifest" href="../../web_assets/img/favicons/manifest.json">
+        <meta name="msapplication-TileImage"
+              content="../../assets/img/favicons/mstile-150x150.png">
+        <meta name="theme-color" content="#ffffff">
+        <script src="../../vendors/simplebar/simplebar.min.js"></script>
+        <script src="../../web_assets/js/config.js"></script>
+        <!-- ===============================================-->
+        <!--    Stylesheets-->
+        <!-- ===============================================-->
+        <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="../../vendors/simplebar/simplebar.min.css" rel="stylesheet">
+        <link rel="stylesheet"
+              href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
+        <link href="../../web_assets/css/theme-rtl.min.css"
+              type="text/css"
+              rel="stylesheet"
+              id="style-rtl">
+        <link href="../../web_assets/css/theme.min.css"
+              type="text/css"
+              rel="stylesheet"
+              id="style-default">
+        <link href="../../web_assets/css/user-rtl.min.css"
+              type="text/css"
+              rel="stylesheet"
+              id="user-style-rtl">
+        <link href="../../web_assets/css/user.min.css"
+              type="text/css"
+              rel="stylesheet"
+              id="user-style-default">
+        <script>
       var phoenixIsRTL = window.config.config.phoenixIsRTL;
       if (phoenixIsRTL) {
         var linkDefault = document.getElementById('style-default');
@@ -53,30 +74,43 @@
         linkRTL.setAttribute('disabled', true);
         userLinkRTL.setAttribute('disabled', true);
       }
-    </script>
-  </head>
-
-
-  <body>
-
-    <!-- ===============================================-->
-    <!--    Main Content-->
-    <!-- ===============================================-->
-    <main class="main" id="top">
-      <div class="px-3">
-        <div class="row min-vh-100 flex-center p-5">
-          <div class="col-12 col-xl-10 col-xxl-8">
-            <div class="row justify-content-center g-5">
-              <div class="col-12 col-lg-6 text-center order-lg-1"><img class="img-fluid w-lg-100 d-light-none" src="../../web_assets/img/spot-illustrations/500-illustration.png" alt="" width="400" /><img class="img-fluid w-md-50 w-lg-100 d-dark-none" src="../../web_assets/img/spot-illustrations/dark_500-illustration.png" alt="" width="540" /></div>
-              <div class="col-12 col-lg-6 text-center text-lg-start"><img class="img-fluid mb-6 w-50 w-lg-75 d-dark-none" src="../../web_assets/img/spot-illustrations/500.png" alt="" /><img class="img-fluid mb-6 w-50 w-lg-75 d-light-none" src="../../web_assets/img/spot-illustrations/dark_500.png" alt="" />
-                <h2 class="text-body-secondary fw-bolder mb-3">Unknow error!</h2>
-                <p class="text-body mb-5">But relax! Our cat is here to play you some music.</p><a class="btn btn-lg btn-phoenix-primary" href="../../index.html">Go Home</a>
-              </div>
+        </script>
+    </head>
+    <body>
+        <!-- ===============================================-->
+        <!--    Main Content-->
+        <!-- ===============================================-->
+        <main class="main" id="top">
+            <div class="px-3">
+                <div class="row min-vh-100 flex-center p-5">
+                    <div class="col-12 col-xl-10 col-xxl-8">
+                        <div class="row justify-content-center g-5">
+                            <div class="col-12 col-lg-6 text-center order-lg-1">
+                                <img class="img-fluid w-lg-100 d-light-none"
+                                     src="../../web_assets/img/spot-illustrations/500-illustration.png"
+                                     alt=""
+                                     width="400" />
+                                <img class="img-fluid w-md-50 w-lg-100 d-dark-none"
+                                     src="../../web_assets/img/spot-illustrations/dark_500-illustration.png"
+                                     alt=""
+                                     width="540" />
+                            </div>
+                            <div class="col-12 col-lg-6 text-center text-lg-start">
+                                <img class="img-fluid mb-6 w-50 w-lg-75 d-dark-none"
+                                     src="../../web_assets/img/spot-illustrations/500.png"
+                                     alt="" />
+                                <img class="img-fluid mb-6 w-50 w-lg-75 d-light-none"
+                                     src="../../web_assets/img/spot-illustrations/dark_500.png"
+                                     alt="" />
+                                <h2 class="text-body-secondary fw-bolder mb-3">Unknow error!</h2>
+                                <p class="text-body mb-5">But relax! Our cat is here to play you some music.</p>
+                                <a class="btn btn-lg btn-phoenix-primary" href="../../index.html">Go Home</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
-        </div>
-      </div>
-      <script>
+            <script>
         var navbarTopStyle = window.config.config.phoenixNavbarTopStyle;
         var navbarTop = document.querySelector('.navbar-top');
         if (navbarTopStyle === 'darker') {
@@ -88,190 +122,448 @@
         if (navbarVertical && navbarVerticalStyle === 'darker') {
           navbarVertical.setAttribute('data-navbar-appearance', 'darker');
         }
-      </script>
-      <div class="support-chat-row">
-        <div class="row-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>
+            </script>
+            <div class="support-chat-row">
+                <div class="row-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="../../web_assets/img/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 class="text-center mt-auto">
-                  <div class="avatar avatar-3xl status-online"><img class="rounded-circle border border-3 border-light-subtle" src="../../web_assets/img/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 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>
+    <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>
+                <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">
+        <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="../../web_assets/img/generic/default-light.png" alt=""/></span><span class="label-text">Light</span></label>
+            <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="../../web_assets/img/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="../../web_assets/img/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="../../web_assets/img/generic/auto.png"
+                                 alt="" />
+                        </span><span class="label-text">Auto</span>
+                    </label>
+                </div>
             </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="../../web_assets/img/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="../../web_assets/img/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 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>
-          </div>
-          <p class="mb-0 text-body-tertiary">Change text direction</p>
+            <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 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>
-          </div>
-          <p class="mb-0 text-body-tertiary">Toggle support chat</p>
+            <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" />
-              <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="../../web_assets/img/generic/default-light.png" alt=""/><img class="img-fluid img-prototype d-light-none" src="../../assets/img/generic/default-dark.png" alt=""/></span><span class="label-text">Vertical</span></label>
+            <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" />
+                    <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="../../web_assets/img/generic/default-light.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none"
+                                 src="../../assets/img/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" />
+                    <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="../../assets/img/generic/top-default.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none"
+                                 src="../../assets/img/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"
+                           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="../../assets/img/generic/nav-combo-light.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none"
+                                 src="../../assets/img/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"
+                           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="../../assets/img/generic/dual-light.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none"
+                                 src="../../assets/img/generic/dual-dark.png"
+                                 alt="" />
+                        </span><span class="label-text">Dual nav</span>
+                    </label>
+                </div>
             </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" />
-              <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="../../assets/img/generic/top-default.png" alt=""/><img class="img-fluid img-prototype d-light-none" src="../../assets/img/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" 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="../../assets/img/generic/nav-combo-light.png" alt=""/><img class="img-fluid img-prototype d-light-none" src="../../assets/img/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" 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="../../assets/img/generic/dual-light.png" alt=""/><img class="img-fluid img-prototype d-light-none" src="../../assets/img/generic/dual-dark.png" alt=""/></span><span class="label-text"> Dual nav</span></label>
-            </div>
-          </div>
         </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" />
-              <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="../../assets/img/generic/default-light.png" alt="" /><img class="img-fluid img-prototype d-light-none" src="../../assets/img/generic/default-dark.png" alt="" /><span class="label-text d-dark-none"> Default</span><span class="label-text d-light-none">Default</span></label>
+            <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" />
+                    <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="../../assets/img/generic/default-light.png"
+                             alt="" />
+                        <img class="img-fluid img-prototype d-light-none"
+                             src="../../assets/img/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" />
+                    <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="../../assets/img/generic/vertical-darker.png"
+                             alt="" />
+                        <img class="img-fluid img-prototype d-light-none"
+                             src="../../assets/img/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>
-            <div class="col-6">
-              <input class="btn-check" id="navbar-style-dark" type="radio" name="config.name" value="darker" data-theme-control="phoenixNavbarVerticalStyle" />
-              <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="../../assets/img/generic/vertical-darker.png" alt="" /><img class="img-fluid img-prototype d-light-none" src="../../assets/img/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>
         </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" />
-              <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="../../assets/img/generic/top-default.png" alt=""/><img class="img-fluid img-prototype d-light-none mb-0" src="../../assets/img/generic/top-default-dark.png" alt=""/></span><span class="label-text">Default</span></label>
+            <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" />
+                    <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="../../assets/img/generic/top-default.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none mb-0"
+                                 src="../../assets/img/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" />
+                    <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="../../assets/img/generic/top-slim.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none mb-0"
+                                 src="../../assets/img/generic/top-slim-dark.png"
+                                 alt="" />
+                        </span><span class="label-text">Slim</span>
+                    </label>
+                </div>
             </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" />
-              <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="../../assets/img/generic/top-slim.png" alt=""/><img class="img-fluid img-prototype d-light-none mb-0" src="../../assets/img/generic/top-slim-dark.png" alt=""/></span><span class="label-text"> Slim</span></label>
-            </div>
-          </div>
         </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" />
-              <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="../../assets/img/generic/top-default.png" alt=""/><img class="img-fluid img-prototype d-light-none mb-0" src="../../assets/img/generic/top-style-darker.png" alt=""/></span><span class="label-text">Default</span></label>
+            <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" />
+                    <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="../../assets/img/generic/top-default.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none mb-0"
+                                 src="../../assets/img/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" />
+                    <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="../../assets/img/generic/navbar-top-style-light.png"
+                                 alt="" />
+                            <img class="img-fluid img-prototype d-light-none mb-0"
+                                 src="../../assets/img/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>
-            <div class="col-6">
-              <input class="btn-check" id="navbarTopDarker" name="navbar-top-style" type="radio" value="darker" data-theme-control="phoenixNavbarTopStyle" />
-              <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="../../assets/img/generic/navbar-top-style-light.png" alt=""/><img class="img-fluid img-prototype d-light-none mb-0" src="../../assets/img/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>
+        <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>
-        </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="../../vendors/popper/popper.min.js"></script>
-    <script src="../../vendors/bootstrap/bootstrap.min.js"></script>
-    <script src="../../vendors/anchorjs/anchor.min.js"></script>
-    <script src="../../vendors/is/is.min.js"></script>
-    <script src="../../vendors/fontawesome/all.min.js"></script>
-    <script src="../../vendors/lodash/lodash.min.js"></script>
-    <script src="../../vendors/list.js/list.min.js"></script>
-    <script src="../../vendors/feather-icons/feather.min.js"></script>
-    <script src="../../vendors/dayjs/dayjs.min.js"></script>
-    <script src="../../assets/js/phoenix.js"></script>
-
-  </body>
-
-</html>
\ No newline at end of file
+        </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="../../vendors/popper/popper.min.js"></script>
+<script src="../../vendors/bootstrap/bootstrap.min.js"></script>
+<script src="../../vendors/anchorjs/anchor.min.js"></script>
+<script src="../../vendors/is/is.min.js"></script>
+<script src="../../vendors/fontawesome/all.min.js"></script>
+<script src="../../vendors/lodash/lodash.min.js"></script>
+<script src="../../vendors/list.js/list.min.js"></script>
+<script src="../../vendors/feather-icons/feather.min.js"></script>
+<script src="../../vendors/dayjs/dayjs.min.js"></script>
+<script src="../../assets/js/phoenix.js"></script>
+</body>
+</html>
diff --git a/templates/groups/group_detail.html b/templates/groups/group_detail.html
index 56c763f9..288ef326 100644
--- a/templates/groups/group_detail.html
+++ b/templates/groups/group_detail.html
@@ -1,12 +1,13 @@
 {% extends "base.html" %}
 {% load static %}
 {% load i18n %}
-
-{% block title %}{{ _("View Group") }}{% endblock title %}
-
+{% block title %}
+    {{ _("View Group") }}
+{% endblock title %}
 {% block content %}
     <!-- Delete Modal -->
-    <div class="modal fade" id="deleteModal"
+    <div class="modal fade"
+         id="deleteModal"
          data-bs-backdrop="static"
          data-bs-keyboard="false"
          tabindex="-1"
@@ -15,27 +16,22 @@
         <div class="modal-dialog modal-sm ">
             <div class="modal-content rounded">
                 <div class="modal-body d-flex justify-content-center">
-                    <h1 class="text-danger me-2"><i class="bi bi-exclamation-diamond-fill"></i></h1>
-                    <span class="text-danger">
-                        {% trans "Are you sure you want to delete this group?" %}
-                    </span>
+                    <h1 class="text-danger me-2">
+                        <i class="bi bi-exclamation-diamond-fill"></i>
+                    </h1>
+                    <span class="text-danger">{% trans "Are you sure you want to delete this group?" %}</span>
                 </div>
                 <div class="btn-group">
                     <button type="button"
                             class="btn btn-sm btn-phoenix-secondary"
-                            data-bs-dismiss="modal">
-                        {% trans 'No' %}
-                    </button>
+                            data-bs-dismiss="modal">{% trans 'No' %}</button>
                     <a type="button"
                        class="btn btn-sm btn-phoenix-danger"
-                       href="{% url 'group_delete' request.dealer.slug group.id %}">
-                        {% trans 'Yes' %}
-                    </a>
+                       href="{% url 'group_delete' request.dealer.slug group.id %}">{% trans 'Yes' %}</a>
                 </div>
             </div>
         </div>
     </div>
-
     <div class="row my-5">
         <div class="card rounded ">
             <div class="card-header ">
@@ -44,21 +40,33 @@
             <div class="card-body">
                 <div class="row">
                     <div class="col-md-6">
-                        <p><strong>{{ _("Name") }}:</strong> {{ group.name }}</p>
+                        <p>
+                            <strong>{{ _("Name") }}:</strong> {{ group.name }}
+                        </p>
                     </div>
                     <div class="col-md-6">
                         <table class="table table-hover table-responsive-sm fs-9 mb-0">
                             <thead>
                                 <tr>
-                                    <th><h4>{% trans 'Users'|capfirst %}</h4></th>
+                                    <th>
+                                        <h4>{% trans 'Users'|capfirst %}</h4>
+                                    </th>
                                     <th></th>
                                 </tr>
                             </thead>
                             <tbody>
                                 {% for user in group.users %}
                                     <tr>
-                                        <td><p><strong>{{ _("Name") }}:</strong> {{ user.staffmember.staff }}</p></td>
-                                        <td><p><strong>{{ _("Email") }}:</strong> {{ user }}</p></td>
+                                        <td>
+                                            <p>
+                                                <strong>{{ _("Name") }}:</strong> {{ user.staffmember.staff }}
+                                            </p>
+                                        </td>
+                                        <td>
+                                            <p>
+                                                <strong>{{ _("Email") }}:</strong> {{ user }}
+                                            </p>
+                                        </td>
                                     </tr>
                                 {% empty %}
                                     <tr>
@@ -67,15 +75,13 @@
                                 {% endfor %}
                             </tbody>
                         </table>
-
                     </div>
                 </div>
                 <div class="table-responsive scrollbar mx-n1 px-1">
-                    <div class="card-header ">
-                    </div>
+                    <div class="card-header "></div>
                     <h4 class="my-4">Permissions</h4>
-                    <a class="btn btn-sm btn-phoenix-primary mt-2 mb-4" href="{% url 'group_permission' request.dealer.slug group.id %}"><i class="fa-solid fa-unlock"></i> Manage Permissions</a>
-
+                    <a class="btn btn-sm btn-phoenix-primary mt-2 mb-4"
+                       href="{% url 'group_permission' request.dealer.slug group.id %}"><i class="fa-solid fa-unlock"></i> Manage Permissions</a>
                     <table class="table table-hover table-responsive-sm fs-9 mb-0">
                         <thead>
                             <tr>
@@ -98,7 +104,8 @@
                     </table>
                 </div>
                 <div class="card-footer d-flex ">
-                    <a class="btn btn-sm btn-phoenix-primary me-1" href="{% url 'group_update' request.dealer.slug group.id %}">
+                    <a class="btn btn-sm btn-phoenix-primary me-1"
+                       href="{% url 'group_update' request.dealer.slug group.id %}">
                         <i class="fa-solid fa-pen-to-square"></i>
                         {{ _("Edit") }}
                     </a>
@@ -116,4 +123,4 @@
                 </div>
             </div>
         </div>
-{% endblock %}
+    {% endblock %}
diff --git a/templates/groups/group_form.html b/templates/groups/group_form.html
index 7c19e593..c540cd2f 100644
--- a/templates/groups/group_form.html
+++ b/templates/groups/group_form.html
@@ -4,22 +4,20 @@
 {% block title %}
     {# Check if an 'object'  exists in the context #}
     {% if object %}
-        {% trans 'Update Group'%}
+        {% trans 'Update Group' %}
     {% else %}
-        {% trans 'Add New Group'%}
+        {% trans 'Add New Group' %}
     {% endif %}
 {% endblock %}
-
 {% block content %}
 
     <!---->
     <div class="row justify-content-center mt-5 mb-3">
-
-       <div class="col-lg-8 col-md-10">
-         <div class="card shadow-sm border-0 rounded-3">
-            <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
+        <div class="col-lg-8 col-md-10">
+            <div class="card shadow-sm border-0 rounded-3">
+                <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
                     <h3 class="mb-0 fs-4 text-center text-white">
-                         {% if staff.created %}
+                        {% if staff.created %}
                             {{ _("Edit Group") }}
                         {% else %}
                             {{ _("Add Group") }}
@@ -46,9 +44,6 @@
 
             </div>
         </div>
-
-       </div>
-
-   </div>
+    </div>
     <!---->
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/groups/group_list.html b/templates/groups/group_list.html
index 6e52f69f..7fa7fc11 100644
--- a/templates/groups/group_list.html
+++ b/templates/groups/group_list.html
@@ -2,24 +2,23 @@
 {% load i18n %}
 {% load custom_filters %}
 {% load render_table from django_tables2 %}
-
-{% block title %}{% trans "Groups" %}{% endblock title %}
-
+{% block title %}
+    {% trans "Groups" %}
+{% endblock title %}
 {% block content %}
     <section class="">
-
         <div class="row mt-4">
             <div class="col-auto">
                 <div class="d-md-flex justify-content-between">
                     <div>
-                        <a href="{% url 'group_create' request.dealer.slug %}" class="btn btn-sm btn-phoenix-primary me-5"><span class="fas fa-plus me-2"></span>{% trans "Add Group" %}</a>
-                         <a href="{% url 'user_list' request.dealer.slug %}" class="btn btn-sm btn-phoenix-secondary"><span class="fas fas fa-arrow-left me-2"></span>{% trans "Back to Staffs" %}</a>
-
+                        <a href="{% url 'group_create' request.dealer.slug %}"
+                           class="btn btn-sm btn-phoenix-primary me-5"><span class="fas fa-plus me-2"></span>{% trans "Add Group" %}</a>
+                        <a href="{% url 'user_list' request.dealer.slug %}"
+                           class="btn btn-sm btn-phoenix-secondary"><span class="fas fas fa-arrow-left me-2"></span>{% trans "Back to Staffs" %}</a>
                     </div>
                 </div>
             </div>
             <div class="table-responsive scrollbar mx-n1 px-1 mt-3">
-
                 <table class="table align-items-center table-flush table-hover">
                     <thead>
                         <tr class="bg-body-highlight">
@@ -33,8 +32,12 @@
                         {% for group in groups %}
                             <tr>
                                 <td class="align-middle white-space-nowrap ps-1">{{ group.name }}</td>
-                                <td class="align-middle white-space-nowrap"><i class="fa-solid fa-users me-1"></i> {{ group.users.count}}</td>
-                                <td class="align-middle white-space-nowrap"><i class="fa-solid fa-unlock me-1"></i> {{ group.permissions.count }}</td>
+                                <td class="align-middle white-space-nowrap">
+                                    <i class="fa-solid fa-users me-1"></i> {{ group.users.count }}
+                                </td>
+                                <td class="align-middle white-space-nowrap">
+                                    <i class="fa-solid fa-unlock me-1"></i> {{ group.permissions.count }}
+                                </td>
                                 <td class="align-middle white-space-nowrap">
                                     <a class="btn btn-phoenix-success"
                                        href="{% url 'group_detail' request.dealer.slug group.id %}">
@@ -48,16 +51,10 @@
                 </table>
             </div>
             {% if page_obj.paginator.num_pages > 1 %}
-
                 <div class="d-flex justify-content-end mt-3">
-
-                    <div class="d-flex">
-                        {% include 'partials/pagination.html'%}
-                    </div>
-
+                    <div class="d-flex">{% include 'partials/pagination.html' %}</div>
                 </div>
             {% endif %}
         </div>
     </section>
 {% endblock %}
-
diff --git a/templates/groups/group_permission_form-copy.html b/templates/groups/group_permission_form-copy.html
index cf14458d..eea75356 100644
--- a/templates/groups/group_permission_form-copy.html
+++ b/templates/groups/group_permission_form-copy.html
@@ -1,16 +1,14 @@
 {% extends "base.html" %}
 {% load i18n %}
 {% load crispy_forms_filters %}
-{% block title %}{% trans "Permission" %}{% endblock title %}
-
+{% block title %}
+    {% trans "Permission" %}
+{% endblock title %}
 {% block content %}
-
-
     <div class="row">
         <div class="row">
             <div class="col-sm-9">
                 <div class="d-sm-flex justify-content-between">
-
                     <h3 class="mb-3">
                         {% if group.created %}
                             {{ _("Edit Permission") }}
@@ -23,16 +21,14 @@
         </div>
         <div class="row">
             <div class="col-sm-9">
-
                 <form class="row g-3 mb-9" method="post" class="form" novalidate>
                     {% csrf_token %}
                     {{ redirect_field }}
                     {{ form|crispy }}
-                    {% for error in form.errors %}
-                        <div class="text-danger">{{ error }}</div>
-                    {% endfor %}
+                    {% for error in form.errors %}<div class="text-danger">{{ error }}</div>{% endfor %}
                     <div class="d-flex mb-3">
-                        <a href="{% url 'group_detail' request.dealer.slug group.pk %}" class="btn btn-phoenix-primary me-2 "><i class="fa-solid fa-ban"></i> {% trans "Cancel"|capfirst %}</a>
+                        <a href="{% url 'group_detail' request.dealer.slug group.pk %}"
+                           class="btn btn-phoenix-primary me-2"><i class="fa-solid fa-ban"></i> {% trans "Cancel"|capfirst %}</a>
                         <button class="btn btn-phoenix-primary" type="submit">
                             <i class="fa-solid fa-floppy-disk"></i>
                             {{ _("Save") }}
@@ -42,4 +38,4 @@
             </div>
         </div>
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/groups/group_permission_form.html b/templates/groups/group_permission_form.html
index 7082c01a..3b400883 100644
--- a/templates/groups/group_permission_form.html
+++ b/templates/groups/group_permission_form.html
@@ -1,23 +1,22 @@
 {% extends "base.html" %}
 {% load i18n %}
 {% load custom_filters %}
-
-{% block title %}{% trans "Permission Management" %}{% endblock title %}
-
+{% block title %}
+    {% trans "Permission Management" %}
+{% endblock title %}
 {% block content %}
-<div class="container-fluid">
-    <div class="row mb-4">
-        <div class="col">
-            <div class="d-sm-flex justify-content-between align-items-center">
-                <h3 class="mb-0">
-                    {% if group %}
-                        {{ _("Edit Permissions for") }}: <strong>{{ group.name }}</strong>
-                    {% else %}
-                        {{ _("Add Permissions") }}
-                    {% endif %}
-                </h3>
-                <div class="badge bg-primary rounded-pill">
-                    {{ group_permission_ids|length }} {% trans "permissions assigned" %}
+    <div class="container-fluid">
+        <div class="row mb-4">
+            <div class="col">
+                <div class="d-sm-flex justify-content-between align-items-center">
+                    <h3 class="mb-0">
+                        {% if group %}
+                            {{ _("Edit Permissions for") }}: <strong>{{ group.name }}</strong>
+                        {% else %}
+                            {{ _("Add Permissions") }}
+                        {% endif %}
+                    </h3>
+                    <div class="badge bg-primary rounded-pill">{{ group_permission_ids|length }} {% trans "permissions assigned" %}</div>
                 </div>
             </div>
         </div>
@@ -161,46 +160,46 @@
 <script>
 document.addEventListener('DOMContentLoaded', function() {
     // Initialize all accordions
-    document.querySelectorAll('.accordion-button').forEach(button => {
-        button.addEventListener('click', function() {
-            const target = this.getAttribute('data-bs-target');
-            new bootstrap.Collapse(target, {
-                toggle: true
+            document.querySelectorAll('.accordion-button').forEach(button => {
+                button.addEventListener('click', function() {
+                    const target = this.getAttribute('data-bs-target');
+                    new bootstrap.Collapse(target, {
+                        toggle: true
+                    });
+                });
             });
-        });
-    });
 
     // Search functionality
-    const permissionSearch = document.getElementById('permissionSearch');
-    if (permissionSearch) {
-        permissionSearch.addEventListener('input', function(e) {
-            const searchTerm = e.target.value.toLowerCase();
-            let hasVisibleResults = false;
+            const permissionSearch = document.getElementById('permissionSearch');
+            if (permissionSearch) {
+                permissionSearch.addEventListener('input', function(e) {
+                    const searchTerm = e.target.value.toLowerCase();
+                    let hasVisibleResults = false;
 
-            document.querySelectorAll('.accordion-body .list-group-item').forEach(item => {
-                const text = item.textContent.toLowerCase();
-                const isVisible = text.includes(searchTerm);
-                item.style.display = isVisible ? '' : 'none';
-                if (isVisible) hasVisibleResults = true;
-            });
+                    document.querySelectorAll('.accordion-body .list-group-item').forEach(item => {
+                        const text = item.textContent.toLowerCase();
+                        const isVisible = text.includes(searchTerm);
+                        item.style.display = isVisible ? '' : 'none';
+                        if (isVisible) hasVisibleResults = true;
+                    });
 
             // Open accordions with visible results
-            document.querySelectorAll('.accordion-collapse').forEach(collapse => {
-                const button = document.querySelector(`button[data-bs-target="#${collapse.id}"]`);
-                if (button) {
-                    const hasVisible = collapse.querySelector('.list-group-item[style=""]');
-                    const bsCollapse = bootstrap.Collapse.getInstance(collapse) ||
-                                     new bootstrap.Collapse(collapse);
+                    document.querySelectorAll('.accordion-collapse').forEach(collapse => {
+                        const button = document.querySelector(`button[data-bs-target="#${collapse.id}"]`);
+                        if (button) {
+                            const hasVisible = collapse.querySelector('.list-group-item[style=""]');
+                            const bsCollapse = bootstrap.Collapse.getInstance(collapse) ||
+                            new bootstrap.Collapse(collapse);
 
-                    if (hasVisible) {
-                        bsCollapse.show();
-                    } else if (!hasVisibleResults) {
-                        bsCollapse.hide();
-                    }
-                }
-            });
+                            if (hasVisible) {
+                                bsCollapse.show();
+                            } else if (!hasVisibleResults) {
+                                bsCollapse.hide();
+                            }
+                        }
+                    });
+                });
+            }
         });
-    }
-});
-</script>
-{% endblock %}
\ No newline at end of file
+    </script>
+{% endblock %}
diff --git a/templates/haikalbot/chat.html b/templates/haikalbot/chat.html
index 0d314554..73cab4e6 100644
--- a/templates/haikalbot/chat.html
+++ b/templates/haikalbot/chat.html
@@ -1,37 +1,46 @@
 {% extends 'base.html' %}
 {% load i18n static %}
-
 {% block title %}Haikal Bot{% endblock %}
-
 {% block content %}
-  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.2/papaparse.min.js"></script>
-
-  <div class="container mt-5">
-    <div class="card shadow-sm">
-      <div class="card-header d-flex justify-content-between align-items-center">
-        <h5 class="mb-0"><i class="fas fa-robot me-2"></i>{% trans "HaikalBot" %}</h5>
-        <div>
-          <button id="export-btn" class="btn btn-sm btn-phoenix-secondary" style="display:none;">
-            {% trans "Export CSV" %}
-          </button>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.2/papaparse.min.js"></script>
+    <div class="container mt-5">
+        <div class="card shadow-sm">
+            <div class="card-header d-flex justify-content-between align-items-center">
+                <h5 class="mb-0">
+                    <i class="fas fa-robot me-2"></i>{% trans "HaikalBot" %}
+                </h5>
+                <div>
+                    <button id="export-btn"
+                            class="btn btn-sm btn-phoenix-secondary"
+                            style="display:none">{% trans "Export CSV" %}</button>
+                </div>
+            </div>
+            <div class="card-body"
+                 style="max-height: 60vh;
+                        overflow-y: auto"
+                 id="chat-history"></div>
+            <div class="card-footer bg-white border-top">
+                <form id="chat-form" class="d-flex align-items-center gap-2">
+                    <button type="button" class="btn btn-light" id="mic-btn">
+                        <i class="fas fa-microphone"></i>
+                    </button>
+                    <input type="text"
+                           class="form-control"
+                           id="chat-input"
+                           placeholder="{% trans 'Type your question...' %}"
+                           required />
+                    <button type="submit" class="btn btn-phoenix-primary">
+                        <i class="fas fa-paper-plane"></i>
+                    </button>
+                </form>
+            </div>
+            <div id="chart-container" style="display:none;" class="p-4 border-top">
+                <canvas id="chart-canvas" height="200px"></canvas>
+            </div>
         </div>
-      </div>
-      <div class="card-body" style="max-height: 60vh; overflow-y: auto;" id="chat-history"></div>
-      <div class="card-footer bg-white border-top">
-        <form id="chat-form" class="d-flex align-items-center gap-2">
-          <button type="button" class="btn btn-light" id="mic-btn"><i class="fas fa-microphone"></i></button>
-          <input type="text" class="form-control" id="chat-input" placeholder="{% trans 'Type your question...' %}" required />
-          <button type="submit" class="btn btn-phoenix-primary"><i class="fas fa-paper-plane"></i></button>
-        </form>
-      </div>
-      <div id="chart-container" style="display:none;" class="p-4 border-top">
-        <canvas id="chart-canvas" height="200px"></canvas>
-      </div>
     </div>
-  </div>
-
-  <script>
+    <script>
     const chatHistory = document.getElementById('chat-history');
     const chartContainer = document.getElementById('chart-container');
     const chartCanvas = document.getElementById('chart-canvas');
@@ -184,5 +193,5 @@
 
       recognition.start();
     });
-  </script>
-{% endblock %}
\ No newline at end of file
+    </script>
+{% endblock %}
diff --git a/templates/haikalbot/chatbot.html b/templates/haikalbot/chatbot.html
index 54217e4a..e03e3a87 100644
--- a/templates/haikalbot/chatbot.html
+++ b/templates/haikalbot/chatbot.html
@@ -1,14 +1,11 @@
 {% extends 'base.html' %}
 {% load i18n static %}
-
 {% block title %}
     {{ _("Haikalbot") }}
 {% endblock title %}
-
 {% block description %}
     AI assistant
 {% endblock description %}
-
 {% block customCSS %}
     <style>
         .chart-container {
@@ -56,21 +53,38 @@
         }
     </style>
 {% endblock customCSS %}
-
 {% block content %}
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <div class="card shadow-none mb-3">
         <div class="card-header d-flex justify-content-between align-items-center">
             <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
-                <img class="d-dark-none" src="{% static 'images/favicons/haikalbot_v1.png' %}" alt="{% trans 'home' %}" width="32" />
-                <img class="d-light-none" src="{% static 'images/favicons/haikalbot_v2.png' %}" alt="{% trans 'home' %}" width="32" />
+                <img class="d-dark-none"
+                     src="{% static 'images/favicons/haikalbot_v1.png' %}"
+                     alt="{% trans 'home' %}"
+                     width="32" />
+                <img class="d-light-none"
+                     src="{% static 'images/favicons/haikalbot_v2.png' %}"
+                     alt="{% trans 'home' %}"
+                     width="32" />
             </div>
             <div class="d-flex gap-3">
-                <span id="clearChatBtn" class="translate-middle-y cursor-pointer" title="{% if LANGUAGE_CODE == 'ar' %}مسح المحادثة{% else %}Clear Chat{% endif %}">
+                <span id="clearChatBtn"
+                      class="translate-middle-y cursor-pointer"
+                      title="{% if LANGUAGE_CODE == 'ar' %}
+                                 مسح المحادثة
+                             {% else %}
+                                 Clear Chat
+                             {% endif %}">
                     <i class="fas fa-trash-alt text-danger"></i>
                 </span>
-                <span id="exportChatBtn" class="translate-middle-y cursor-pointer" title="{% if LANGUAGE_CODE == 'ar' %}تصدير المحادثة{% else %}Export Chat{% endif %}">
+                <span id="exportChatBtn"
+                      class="translate-middle-y cursor-pointer"
+                      title="{% if LANGUAGE_CODE == 'ar' %}
+                                 تصدير المحادثة
+                             {% else %}
+                                 Export Chat
+                             {% endif %}">
                     <i class="fas fa-download text-success"></i>
                 </span>
             </div>
@@ -79,19 +93,25 @@
             <div id="chatMessages" class="overflow-auto p-3" style="height: 60vh;"></div>
             <div class="bg-100 border-top p-3">
                 <div class="d-flex gap-2 flex-wrap mb-3" id="suggestionChips">
-                    <button class="btn btn-sm btn-phoenix-primary suggestion-chip">{{ _("How many cars are in inventory")}}?</button>
-                    <button class="btn btn-sm btn-phoenix-primary suggestion-chip">{{ _("Show me sales analysis")}}</button>
-                    <button class="btn btn-sm btn-phoenix-primary suggestion-chip">{{ _("What are the best-selling cars")}}?</button>
+                    <button class="btn btn-sm btn-phoenix-primary suggestion-chip">{{ _("How many cars are in inventory") }}?</button>
+                    <button class="btn btn-sm btn-phoenix-primary suggestion-chip">{{ _("Show me sales analysis") }}</button>
+                    <button class="btn btn-sm btn-phoenix-primary suggestion-chip">{{ _("What are the best-selling cars") }}?</button>
                 </div>
                 <div class="chat-container">
                     <div class="textarea-container mb-3">
                         <label for="messageInput"></label>
-                        <textarea class="form-control chat-textarea" id="messageInput" rows="3" placeholder="{{ _("Type your message here")}}..." maxlength="400"></textarea>
+                        <textarea class="form-control chat-textarea"
+                                  id="messageInput"
+                                  rows="3"
+                                  placeholder="{{ _("Type your message here")}}..."
+                                  maxlength="400"></textarea>
                         <div class="textarea-footer">
                             <div class="character-count">
                                 <span id="charCount">0</span>/400
                             </div>
-                            <span class="send-button position-absolute top-50 end-0 translate-middle-y cursor-pointer" id="sendMessageBtn" disabled>
+                            <span class="send-button position-absolute top-50 end-0 translate-middle-y cursor-pointer"
+                                  id="sendMessageBtn"
+                                  disabled>
                                 <i class="fas fa-paper-plane text-body"></i>
                             </span>
                         </div>
@@ -100,7 +120,6 @@
             </div>
         </div>
     </div>
-
     <script>
 // Global configuration
         const MAX_MESSAGE_LENGTH = 400;
@@ -518,4 +537,4 @@
             scrollToBottom();
         });
     </script>
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
diff --git a/templates/header.html b/templates/header.html
index 567cd92c..880c1f97 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -1,5 +1,4 @@
 {% load i18n static %}
-
 {% if user.is_authenticated %}
   <nav class="navbar navbar-vertical navbar-expand-lg ">
     <div class="collapse navbar-collapse" id="navbarVerticalCollapse">
diff --git a/templates/index.html b/templates/index.html
index b01f672b..b91b35d6 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,17 +2,19 @@
 {% load i18n static custom_filters django_ledger %}
 {% block content %}
     {% if request.user.is_authenticated %}
-        <div
-            id="dashboard-content"
-            hx-get="{% if request.dealer %}{% url 'manager_dashboard' %}{% else %}{% url 'sales_dashboard' %}{% endif %}"
-            hx-trigger="load"
-            hx-target="#dashboard-content"
-            hx-swap="innerHTML"
-        >
+        <div id="dashboard-content"
+             hx-get="{% if request.dealer %}
+                         {% url 'manager_dashboard' %}
+                     {% else %}
+                         {% url 'sales_dashboard' %}
+                     {% endif %}"
+             hx-trigger="load"
+             hx-target="#dashboard-content"
+             hx-swap="innerHTML">
             <div class="spinner-container">
                 <div class="spinner"></div>
                 <p>Loading dashboard...</p>
             </div>
         </div>
     {% endif %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/inventory/add_colors.html b/templates/inventory/add_colors.html
index 596aa492..99f52d95 100644
--- a/templates/inventory/add_colors.html
+++ b/templates/inventory/add_colors.html
@@ -114,5 +114,5 @@
             text-align: center;
             width: 100%;
         }
-    </style>
-{% endblock %}
+        </style>
+    {% endblock %}
diff --git a/templates/inventory/car_confirm_delete.html b/templates/inventory/car_confirm_delete.html
index 8e12ee39..420e32f0 100644
--- a/templates/inventory/car_confirm_delete.html
+++ b/templates/inventory/car_confirm_delete.html
@@ -3,13 +3,14 @@
 {% load i18n %}
 {% block title %}Delete Car{% endblock %}
 {% block content %}
-<div class="mt-4 ms-4">
-    <h1>Delete Car</h1>
-    <p class="text-danger">Are you sure you want to delete the car "{{ car }}"?</p>
-    <form method="post">
-        {% csrf_token %}
-        <button type="submit" class="btn btn-phoenix-danger">Confirm Delete</button>
-        <a href="{% url 'car_list' request.dealer.slug %}" class="btn btn-phoenix-secondary">{% trans 'Cancel' %}</a>
-    </form>
-</div>
+    <div class="mt-4 ms-4">
+        <h1>Delete Car</h1>
+        <p class="text-danger">Are you sure you want to delete the car "{{ car }}"?</p>
+        <form method="post">
+            {% csrf_token %}
+            <button type="submit" class="btn btn-phoenix-danger">Confirm Delete</button>
+            <a href="{% url 'car_list' request.dealer.slug %}"
+               class="btn btn-phoenix-secondary">{% trans 'Cancel' %}</a>
+        </form>
+    </div>
 {% endblock %}
diff --git a/templates/inventory/car_detail.html b/templates/inventory/car_detail.html
index 107dece5..95408ea0 100644
--- a/templates/inventory/car_detail.html
+++ b/templates/inventory/car_detail.html
@@ -15,14 +15,12 @@
         }
     </style>
 {% endblock customCSS %}
-
 {% block content %}
-
     {% if not car.ready and not car.status == 'sold' %}
         <div class="alert alert-outline-warning d-flex align-items-center"
              role="alert">
             <i class="fa-solid fa-circle-info fs-6"></i>
-            {%if not car.finances and not car.colors%}
+            {% if not car.finances and not car.colors %}
                 <p class="mb-0 flex-1">
                     {{ _("This car information is not complete , please add colors and finances both before making it ready for sale .") }}
                 </p>
@@ -30,11 +28,11 @@
                 <p class="mb-0 flex-1">
                     {{ _("This car information is not complete , please add colors before making it ready for sale .") }}
                 </p>
-            {%else%}
+            {% else %}
                 <p class="mb-0 flex-1">
                     {{ _("This car information is not complete , please add finances before making it ready for sale .") }}
                 </p>
-            {%endif%}
+            {% endif %}
             <button class="btn-close"
                     type="button"
                     data-bs-dismiss="alert"
@@ -75,537 +73,537 @@
         </div>
     {% endif %}
     <!-- Main row -->
-     {% if perms.inventory.view_car %}
-    <div class="row-fluid {% if car.status == 'sold' %}disabled{% endif %}">
-        <div class="row g-3 justify-content-between">
-            <div class="col-lg-12 col-xl-6">
-                <div class="avatar avatar-5xl mb-3">
-                    <img class="rounded h-100 w-100" src="{% static 'images/cars/' %}{{ car.vin }}.png" alt="{{ car.vin }}" />
-                </div>
-                <div class="card mb-3 rounded shadow d-flex align-content-center {% if car.get_transfer %}disabled{% endif %}">
-
-                    <p class="card-header rounded-top fw-bold">{% trans 'Car Details' %}</p>
-                    <div class="card-body">
-                        <div class="table-responsive scrollbar mb-3">
-                            <table class="table table-sm fs-9 mb-0 overflow-hidden">
-
-                                <tr>
-                                    <th>{% trans "VIN" %}</th>
-                                    <td>{{ car.vin }}</td>
-                                </tr>
-                                <tr>
-                                    <th>{% trans "year"|capfirst %}</th>
-                                    <td>{{ car.year }}</td>
-                                </tr>
-                                <tr>
-                                    <th>{% trans "make"|capfirst %}</th>
-                                    <td>{{ car.id_car_make.get_local_name }}</td>
-                                </tr>
-                                <tr>
-                                    <th>{% trans "model"|capfirst %}</th>
-                                    <td>{{ car.id_car_model.get_local_name }}</td>
-                                </tr>
-                                <tr>
-                                    <th>{% trans "series"|capfirst %}</th>
-                                    <td>{{ car.id_car_serie.name }}</td>
-                                </tr>
-                                <tr>
-                                    <th>{% trans "trim"|capfirst %}</th>
-                                    <td>{{ car.id_car_trim.name }}</td>
-                                </tr>
-                                <tr>
-                                    <th>{% trans "Status"|capfirst %}</th>
-                                    <td>{{ car.get_status_display }}</td>
-                                </tr>
-                                <tr>
-                                    <th>{% trans "Stock Type"|capfirst %}</th>
-                                    <td>{{ car.get_stock_type_display }}</td>
-                                </tr>
-                                <tr>
-                                    <th>{% trans "Mileage"|capfirst %}</th>
-                                    <td>{{ car.mileage }}</td>
-                                </tr>
-                                <tr>
-                                    <th>{% trans "Receiving Date"|capfirst %}</th>
-                                    <td>{{ car.receiving_date|timesince }}</td>
-                                </tr>
-                                {% if car.vendor %}
-                                    <tr>
-                                        <th>{% trans "Vendor"|capfirst %}</th>
-                                        <td>{{ car.vendor.name }}</td>
-                                    </tr>
-                                {% endif %}
-                                <tr>
-                                    <th>{% trans "Remarks"|capfirst %}</th>
-                                    <td>{{ car.remarks }}</td>
-                                </tr>
-                                <tr>
-                                    <th>{% trans 'specifications'|capfirst %}</th>
-                                    <td>
-                                        <button type="button"
-                                                class="btn btn-phoenix-primary btn-sm"
-                                                id="specification-btn"
-                                                data-bs-toggle="modal"
-                                                data-bs-target="#specificationsModal">
-                                            {% trans 'view'|capfirst %}
-                                        </button>
-                                    </td>
-                                </tr>
-                                {% if car.custom_cards %}
-                                    <tr>
-                                        <th>{% trans "Custom Number"|capfirst %}</th>
-                                        <td>{{ car.custom_cards.custom_number }}</td>
-                                    </tr>
-                                    <tr>
-                                        <th>{% trans "Custom Date"|capfirst %}</th>
-                                        <td>{{ car.custom_cards.custom_date|date }}</td>
-                                    </tr>
-                                {% else %}
-                                    <tr>
-                                        <th>{% trans "Custom Card" %}</th>
-                                        <td>
-                                            {% if perms.inventory.add_customcard %}
-                                            <button type="button"
-                                                    class="btn btn-sm btn-phoenix-success"
-                                                    data-bs-toggle="modal"
-                                                    data-bs-target="#mainModal"
-                                                    hx-get="{% url 'add_custom_card' request.dealer.slug car.slug %}"
-                                                    hx-target=".main-modal-body"
-                                                    hx-swap="innerHTML"
-                                            >{% trans 'Add' %}</button>
-                                            {% endif %}
-                                        </td>
-                                    </tr>
-                                {% endif %}
-                                {% if car.registrations %}
-                                    <tr>
-                                        <th>{% trans "Registration"|capfirst %}</th>
-                                        <td>
-                                            {{ car.registrations.plate_number }} | {{ car.registrations.text1 }} {{ car.registrations.text2 }} {{ car.registrations.text3 }}
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <th>{% trans "Registration Date"|capfirst %}</th>
-                                        <td>{{ car.registrations.registration_date|date }}</td>
-                                    </tr>
-                                {% else %}
-                                    <tr>
-                                        <th>{% trans "Registration" %}</th>
-                                        <td>
-                                            {% if perms.inventory.add_carregistration %}
-                                            <button type="button"
-                                            class="btn btn-sm btn-phoenix-success"
-                                            data-bs-toggle="modal"
-                                            data-bs-target="#mainModal"
-                                            hx-get="{% url 'add_registration' request.dealer.slug car.slug %}"
-                                            hx-target=".main-modal-body"
-                                            hx-swap="innerHTML"
-                                            >{% trans 'Add' %}</button>
-                                            {% endif %}
-                                        </td>
-                                    </tr>
-                                {% endif %}
-                                <tr>
-                                    <th>{% trans 'Location'|capfirst %}</th>
-                                    <td>
-                                        {% if car.finances and not car.get_transfer %}
-                                            {% if car.location %}
-                                                {% if car.location.is_owner_showroom %}
-                                                    {% trans 'Our Showroom' %}
-                                                {% else %}
-                                                    {{ car.location.showroom.get_local_name }}
-                                                {% endif %}
-                                                {% if perms.inventory.add_cartransfer %}
-                                                    <a href="{% url 'update_car_location' car.slug car.location.pk %}"
-                                                        class="btn btn-phoenix-danger btn-sm">
-                                                        {% trans "transfer"|capfirst %}
-                                                    </a>
-                                            {% endif %}
-                                            {% else %}
-                                                {% trans "No location available." %}
-                                                    {% if perms.inventory.add_carlocation %}
-                                                        <a href="{% url 'add_car_location' car.slug %}"
-                                                        class="btn btn-phoenix-success btn-sm ms-2">{% trans "Add" %}</a>
-                                                    {% endif %}
-                                            {% endif %}
-                                        {% endif %}
-                                    </td>
-                                </tr>
-                            </table>
-                        </div>
-                        <div>
-                            {% if not car.get_transfer %}
-                                {% if perms.inventory.change_car %}
-                                    <a href="{% url 'car_update' request.dealer.slug car.slug %}"
-                                       class="btn btn-phoenix-warning btn-sm mt-1">{% trans "Edit" %}</a>
-                                    <a href="{% url 'transfer' car.slug %}"
-                                       class="btn btn-phoenix-danger btn-sm">
-                                        {% trans "Sell to another dealer"|capfirst %}
-                                    </a>
-                                {% endif %}
-                            {% else %}
-                                <span class="badge bg-danger">{% trans "Cannot Edit, Car in Transfer." %}</span>
-                            {% endif %}
-                        </div>
+    {% if perms.inventory.view_car %}
+        <div class="row-fluid {% if car.status == 'sold' %}disabled{% endif %}">
+            <div class="row g-3 justify-content-between">
+                <div class="col-lg-12 col-xl-6">
+                    <div class="avatar avatar-5xl mb-3">
+                        <img class="rounded h-100 w-100"
+                             src="{% static 'images/cars/' %}{{ car.vin }}.png"
+                             alt="{{ car.vin }}" />
                     </div>
-                </div>
-            </div>
-
-            <div class="col-lg-6 col-xl-6">
-                {% if perms.inventory.view_carfinance%}
-                <div class="card rounded shadow d-flex align-content-center {% if car.get_transfer %}transfer{% endif %}">
-                    <p class="card-header rounded-top fw-bold">{% trans 'Financial Details' %}</p>
-                    <div class="card-body">
-                        <div class="table-responsive scrollbar mb-3">
-                            <table class="table table-sm fs-9 mb-0 overflow-hidden">
-                                {% if car.finances %}
-                                    <tr>
-                                        {% if perms.inventory.view_carfinance %}
-                                            <th>{% trans "Cost Price"|capfirst %}</th>
-                                            <td>{{ car.finances.cost_price|floatformat:2 }}</td>
-                                        {% endif %}
-                                    </tr>
-                                    <tr>
-                                        <th>{% trans "Selling Price"|capfirst %}</th>
-                                        <td>{{ car.finances.selling_price|floatformat:2 }}</td>
-                                    </tr>
-                                    <tr>
-                                        <th>{% trans "Discount Amount"|capfirst %}</th>
-                                        <td>{{ car.finances.discount_amount|floatformat:2 }}</td>
-                                    </tr>
-                                    <tr>
-                                        <th>{% trans "Additional Fee"|capfirst %}</th>
-                                        <td></td>
-                                    </tr>
-                                    {% if car.finances.additional_services.first.pk %}
-                                        {% for service in car.finances.additional_services.all %}
-                                            <tr>
-                                                <td>{{ service.name }}</td>
-                                                <td>{{ service.price_|floatformat:2 }}</td>
-                                            </tr>
-                                        {% endfor %}
-                                    {% endif %}
-                                    <tr>
-                                        <th>{% trans "VAT Amount"|capfirst %}</th>
-                                        <td>{{ car.finances.vat_amount|floatformat:2 }}</td>
-                                    </tr>
-                                    <tr>
-                                        <th>{% trans "Total"|capfirst %}</th>
-                                        <td>{{ car.finances.total_vat|floatformat:2 }}</td>
-                                    </tr>
-                                    {% if perms.inventory.change_carfinance%}
-                                    <tr>
-                                        <td colspan="2">
-                                            {% if not car.get_transfer %}
-                                                <a href="{% url 'car_finance_update' request.dealer.slug car.finances.pk %}" class="btn btn-phoenix-warning btn-sm mb-3">{% trans "Edit" %}</a>
-                                            {% else %}
-                                                <span class="badge bg-danger">{% trans "Cannot Edit, Car in Transfer." %}</span>
-                                            {% endif %}
-                                       </td>
-                                    </tr>
-                                    {% endif %}
-                                {% else %}
-                                <p>{% trans "No finance details available." %}</p>
-                                {% if perms.inventory.add_carfinance %}
-                                        <a href="{% url 'car_finance_create' request.dealer.slug car.slug %}"
-                                           class="btn btn-phoenix-success btn-sm mb-3">{% trans "Add" %}</a>
-                                    {% endif %}
-                                {% endif %}
-                            </table>
-                        </div>
-                    </div>
-                </div>
-                {% endif %}
-
-                {% if perms.inventory.view_carcolors %}
-                <div class="card rounded shadow d-flex align-content-center mt-3 {% if car.get_transfer %}transfer{% endif %}">
-                    <p class="card-header rounded-top fw-bold">{% trans 'Colors Details' %}</p>
-                    <div class="card-body">
-                        <div class="table-responsive scrollbar mb-3">
-                            <table class="table table-sm fs-9 mb-0 overflow-hidden">
-
-                                <!--test-->
-                                {% if car.colors %}
-                                    <tr>
-                                        <th>{% trans 'Exterior' %}</th>
-                                        <td>
-                                            <span>{{ car.colors.exterior.get_local_name }}</span>
-                                        </td>
-                                        <td class="align-middle">
-                                            <div class="text-end color-div"
-                                                 style="background-color: rgb({{ car.colors.exterior.rgb }})"></div>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <th>{% trans 'Interior' %}</th>
-                                        <td>
-                                            <span>{{ car.colors.interior.get_local_name }}</span>
-                                        </td>
-                                        <td class="align-middle">
-                                            <div class="text-end color-div"
-                                                 style="background-color: rgb({{ car.colors.interior.rgb }})"></div>
-                                        </td>
-                                    </tr>
-
-                                    {% if perms.inventory.change_carcolors%}
-                                    <tr>
-                                        <td colspan="2">
-                                            {% if not car.get_transfer %}
-                                                <a href="{% url 'car_colors_update' request.dealer.slug car.slug %}"
-                                                   class="btn btn-phoenix-warning btn-sm mb-3">{% trans "Edit" %}</a>
-                                            {% else %}
-                                                <span class="badge bg-danger">{% trans "Cannot Edit, Car in Transfer." %}</span>
-                                            {% endif %}
-                                        </td>
-                                    </tr>
-                                    {% endif %}
-                                {% else %}
-                                <tr>
-
-                                        <td colspan="2">
-                                            <p>{% trans "No color details available." %}</p>
-                                            {% if perms.inventory.add_carcolors %}
-                                                <a class="btn btn-phoenix-success btn-sm mb-3" href="{% url 'add_color' request.dealer.slug car.slug %}">{{ _("Add Color") }}</a>
-                                            {% endif %}
-                                        </td>
-                                </tr>
-                                {% endif %}
-                                <!--test-->
-
-                            </table>
-                        </div>
-                    </div>
-                </div>
-                {% endif %}
-                {% if car.status != 'transfer' %}
-                    {%if perms.inventory.view_carreservation%}
-                    <div class="card rounded shadow d-flex align-content-center mt-3">
-                        <p class="card-header rounded-top fw-bold">{% trans 'Reservations Details' %}</p>
+                    <div class="card mb-3 rounded shadow d-flex align-content-center
+                                {% if car.get_transfer %}disabled{% endif %}">
+                        <p class="card-header rounded-top fw-bold">{% trans 'Car Details' %}</p>
                         <div class="card-body">
                             <div class="table-responsive scrollbar mb-3">
                                 <table class="table table-sm fs-9 mb-0 overflow-hidden">
-                                    {% if car.is_reserved %}
-                                        <thead>
-                                            <tr>
-                                                <th>{% trans "Reserved By" %}</th>
-                                                <th>{% trans "Expires At" %}</th>
-                                                <th>{% trans 'Actions' %}</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            {% for reservation in car.reservations.all %}
-                                                <tr>
-                                                    <td>{{ reservation.reserved_by.dealer }}</td>
-                                                    <td>{{ reservation.reserved_until }}</td>
-                                                {% if perms.inventory.change_carreservation %}
-                                                    <td>
-                                                        {% if reservation.is_active %}
-                                                            <form method="post" action="{% url 'reservations' request.dealer.slug reservation.id %}">
-                                                                {% csrf_token %}
-                                                                <div class="btn-group">
-                                                                    <button type="submit"
-                                                                            name="action"
-                                                                            value="renew"
-                                                                            class="btn btn-sm btn-phoenix-success px-3 py-1">
-                                                                        {% trans "Renew" %}
-                                                                    </button>
-                                                                    <button type="submit"
-                                                                            name="action"
-                                                                            value="cancel"
-                                                                            class="btn btn-sm btn-phoenix-secondary px-3 py-1">
-                                                                        {% trans "Cancel" %}
-                                                                    </button>
-                                                                </div>
-                                                            </form>
-                                                        {% else %}
-                                                            <span class="badge badge-phoenix badge-phoenix-danger fs-10">{% trans "Expired" %}</span>
-                                                        {% endif %}
-                                                    </td>
-                                                 {% endif %}
-                                                </tr>
-                                            {% endfor %}
-                                    {% else %}
-                                        {% if perms.inventory.add_carreservation %}
+                                    <tr>
+                                        <th>{% trans "VIN" %}</th>
+                                        <td>{{ car.vin }}</td>
+                                    </tr>
+                                    <tr>
+                                        <th>{% trans "year"|capfirst %}</th>
+                                        <td>{{ car.year }}</td>
+                                    </tr>
+                                    <tr>
+                                        <th>{% trans "make"|capfirst %}</th>
+                                        <td>{{ car.id_car_make.get_local_name }}</td>
+                                    </tr>
+                                    <tr>
+                                        <th>{% trans "model"|capfirst %}</th>
+                                        <td>{{ car.id_car_model.get_local_name }}</td>
+                                    </tr>
+                                    <tr>
+                                        <th>{% trans "series"|capfirst %}</th>
+                                        <td>{{ car.id_car_serie.name }}</td>
+                                    </tr>
+                                    <tr>
+                                        <th>{% trans "trim"|capfirst %}</th>
+                                        <td>{{ car.id_car_trim.name }}</td>
+                                    </tr>
+                                    <tr>
+                                        <th>{% trans "Status"|capfirst %}</th>
+                                        <td>{{ car.get_status_display }}</td>
+                                    </tr>
+                                    <tr>
+                                        <th>{% trans "Stock Type"|capfirst %}</th>
+                                        <td>{{ car.get_stock_type_display }}</td>
+                                    </tr>
+                                    <tr>
+                                        <th>{% trans "Mileage"|capfirst %}</th>
+                                        <td>{{ car.mileage }}</td>
+                                    </tr>
+                                    <tr>
+                                        <th>{% trans "Receiving Date"|capfirst %}</th>
+                                        <td>{{ car.receiving_date|timesince }}</td>
+                                    </tr>
+                                    {% if car.vendor %}
                                         <tr>
+                                            <th>{% trans "Vendor"|capfirst %}</th>
+                                            <td>{{ car.vendor.name }}</td>
+                                        </tr>
+                                    {% endif %}
+                                    <tr>
+                                        <th>{% trans "Remarks"|capfirst %}</th>
+                                        <td>{{ car.remarks }}</td>
+                                    </tr>
+                                    <tr>
+                                        <th>{% trans 'specifications'|capfirst %}</th>
+                                        <td>
+                                            <button type="button"
+                                                    class="btn btn-phoenix-primary btn-sm"
+                                                    id="specification-btn"
+                                                    data-bs-toggle="modal"
+                                                    data-bs-target="#specificationsModal">
+                                                {% trans 'view'|capfirst %}
+                                            </button>
+                                        </td>
+                                    </tr>
+                                    {% if car.custom_cards %}
+                                        <tr>
+                                            <th>{% trans "Custom Number"|capfirst %}</th>
+                                            <td>{{ car.custom_cards.custom_number }}</td>
+                                        </tr>
+                                        <tr>
+                                            <th>{% trans "Custom Date"|capfirst %}</th>
+                                            <td>{{ car.custom_cards.custom_date|date }}</td>
+                                        </tr>
+                                    {% else %}
+                                        <tr>
+                                            <th>{% trans "Custom Card" %}</th>
                                             <td>
+                                                {% if perms.inventory.add_customcard %}
                                                     <button type="button"
                                                             class="btn btn-sm btn-phoenix-success"
                                                             data-bs-toggle="modal"
-                                                            data-bs-target="#reserveModal">
-                                                        {% trans 'Reserve' %}
-                                                    </button>
+                                                            data-bs-target="#mainModal"
+                                                            hx-get="{% url 'add_custom_card' request.dealer.slug car.slug %}"
+                                                            hx-target=".main-modal-body"
+                                                            hx-swap="innerHTML">{% trans 'Add' %}</button>
+                                                {% endif %}
                                             </td>
                                         </tr>
+                                    {% endif %}
+                                    {% if car.registrations %}
+                                        <tr>
+                                            <th>{% trans "Registration"|capfirst %}</th>
+                                            <td>
+                                                {{ car.registrations.plate_number }} | {{ car.registrations.text1 }} {{ car.registrations.text2 }} {{ car.registrations.text3 }}
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <th>{% trans "Registration Date"|capfirst %}</th>
+                                            <td>{{ car.registrations.registration_date|date }}</td>
+                                        </tr>
+                                    {% else %}
+                                        <tr>
+                                            <th>{% trans "Registration" %}</th>
+                                            <td>
+                                                {% if perms.inventory.add_carregistration %}
+                                                    <button type="button"
+                                                            class="btn btn-sm btn-phoenix-success"
+                                                            data-bs-toggle="modal"
+                                                            data-bs-target="#mainModal"
+                                                            hx-get="{% url 'add_registration' request.dealer.slug car.slug %}"
+                                                            hx-target=".main-modal-body"
+                                                            hx-swap="innerHTML">{% trans 'Add' %}</button>
+                                                {% endif %}
+                                            </td>
+                                        </tr>
+                                    {% endif %}
+                                    <tr>
+                                        <th>{% trans 'Location'|capfirst %}</th>
+                                        <td>
+                                            {% if car.finances and not car.get_transfer %}
+                                                {% if car.location %}
+                                                    {% if car.location.is_owner_showroom %}
+                                                        {% trans 'Our Showroom' %}
+                                                    {% else %}
+                                                        {{ car.location.showroom.get_local_name }}
+                                                    {% endif %}
+                                                    {% if perms.inventory.add_cartransfer %}
+                                                        <a href="{% url 'update_car_location' car.slug car.location.pk %}"
+                                                           class="btn btn-phoenix-danger btn-sm">
+                                                            {% trans "transfer"|capfirst %}
+                                                        </a>
+                                                    {% endif %}
+                                                {% else %}
+                                                    {% trans "No location available." %}
+                                                    {% if perms.inventory.add_carlocation %}
+                                                        <a href="{% url 'add_car_location' car.slug %}"
+                                                           class="btn btn-phoenix-success btn-sm ms-2">{% trans "Add" %}</a>
+                                                    {% endif %}
+                                                {% endif %}
+                                            {% endif %}
+                                        </td>
+                                    </tr>
+                                </table>
+                            </div>
+                            <div>
+                                {% if not car.get_transfer %}
+                                    {% if perms.inventory.change_car %}
+                                        <a href="{% url 'car_update' request.dealer.slug car.slug %}"
+                                           class="btn btn-phoenix-warning btn-sm mt-1">{% trans "Edit" %}</a>
+                                        <a href="{% url 'transfer' car.slug %}"
+                                           class="btn btn-phoenix-danger btn-sm">
+                                            {% trans "Sell to another dealer"|capfirst %}
+                                        </a>
+                                    {% endif %}
+                                {% else %}
+                                    <span class="badge bg-danger">{% trans "Cannot Edit, Car in Transfer." %}</span>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-6 col-xl-6">
+                    {% if perms.inventory.view_carfinance %}
+                        <div class="card rounded shadow d-flex align-content-center
+                                    {% if car.get_transfer %}transfer{% endif %}">
+                            <p class="card-header rounded-top fw-bold">{% trans 'Financial Details' %}</p>
+                            <div class="card-body">
+                                <div class="table-responsive scrollbar mb-3">
+                                    <table class="table table-sm fs-9 mb-0 overflow-hidden">
+                                        {% if car.finances %}
+                                            <tr>
+                                                {% if perms.inventory.view_carfinance %}
+                                                    <th>{% trans "Cost Price"|capfirst %}</th>
+                                                    <td>{{ car.finances.cost_price|floatformat:2 }}</td>
+                                                {% endif %}
+                                            </tr>
+                                            <tr>
+                                                <th>{% trans "Selling Price"|capfirst %}</th>
+                                                <td>{{ car.finances.selling_price|floatformat:2 }}</td>
+                                            </tr>
+                                            <tr>
+                                                <th>{% trans "Discount Amount"|capfirst %}</th>
+                                                <td>{{ car.finances.discount_amount|floatformat:2 }}</td>
+                                            </tr>
+                                            <tr>
+                                                <th>{% trans "Additional Fee"|capfirst %}</th>
+                                                <td></td>
+                                            </tr>
+                                            {% if car.finances.additional_services.first.pk %}
+                                                {% for service in car.finances.additional_services.all %}
+                                                    <tr>
+                                                        <td>{{ service.name }}</td>
+                                                        <td>{{ service.price_|floatformat:2 }}</td>
+                                                    </tr>
+                                                {% endfor %}
+                                            {% endif %}
+                                            <tr>
+                                                <th>{% trans "VAT Amount"|capfirst %}</th>
+                                                <td>{{ car.finances.vat_amount|floatformat:2 }}</td>
+                                            </tr>
+                                            <tr>
+                                                <th>{% trans "Total"|capfirst %}</th>
+                                                <td>{{ car.finances.total_vat|floatformat:2 }}</td>
+                                            </tr>
+                                            {% if perms.inventory.change_carfinance %}
+                                                <tr>
+                                                    <td colspan="2">
+                                                        {% if not car.get_transfer %}
+                                                            <a href="{% url 'car_finance_update' request.dealer.slug car.finances.pk %}"
+                                                               class="btn btn-phoenix-warning btn-sm mb-3">{% trans "Edit" %}</a>
+                                                        {% else %}
+                                                            <span class="badge bg-danger">{% trans "Cannot Edit, Car in Transfer." %}</span>
+                                                        {% endif %}
+                                                    </td>
+                                                </tr>
+                                            {% endif %}
+                                        {% else %}
+                                            <p>{% trans "No finance details available." %}</p>
+                                            {% if perms.inventory.add_carfinance %}
+                                                <a href="{% url 'car_finance_create' request.dealer.slug car.slug %}"
+                                                   class="btn btn-phoenix-success btn-sm mb-3">{% trans "Add" %}</a>
+                                            {% endif %}
                                         {% endif %}
-
-                                    </tbody>
-                                   {% endif %}
-                                </table>
+                                    </table>
+                                </div>
                             </div>
                         </div>
-                    </div>
                     {% endif %}
-                {% endif %}
-                <!-- Transfer Table -->
-                {% if car.status == 'transfer' and car.get_transfer %}
-                    <div class="card rounded shadow d-flex align-content-center mt-3">
-                        <p class="card-header rounded-top fw-bold">{% trans 'Transfer Details' %}</p>
-                        <div class="card-body">
-                            <div class="table-responsive scrollbar mb-3">
-                                <table class="table table-sm fs-9 mb-0 overflow-hidden">
-                                    <thead>
-                                        <tr>
-                                            <th>{% trans "Action" %}</th>
-                                            <th>{% trans "Status" %}</th>
-                                            <th>{% trans "From Showroom" %}</th>
-                                            <th>{% trans "To Showroom" %}</th>
-                                            <th>{% trans 'Date' %}</th>
-                                            <th></th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        <tr>
-                                            <td>
-                                                <span class="badge badge-phoenix badge-phoenix-info">Transfer</span>
-                                            </td>
-                                            <td>
-                                                {% if car.get_transfer.status == "draft" %}
-                                                    <span class="badge badge-phoenix badge-phoenix-warning">waiting for approval</span>
-                                                {% elif car.get_transfer.status == "approved" %}
-                                                    <span class="badge badge-phoenix badge-phoenix-info">waiting for dealer acceptance</span>
-                                                {% endif %}
-                                            </td>
-                                            <td>{{ car.get_transfer.from_dealer|title }}</td>
-                                            <td>{{ car.get_transfer.to_dealer|title }}</td>
-                                            <td>{{ car.get_transfer.transfer_date|date:"Y-m-d" }}</td>
-                                            <td>
-                                                {% if car.get_transfer.status == "draft" %}
-                                                    <a class="btn btn-sm btn-phoenix-success"
-                                                       href="{% url 'transfer_detail' car.get_transfer.pk %}">Approve</a>
-                                                {% endif %}
-                                            </td>
-                                            <td>
-                                                <a class="btn btn-sm btn-phoenix-success"
-                                                   href="{% url 'transfer_detail' car.get_transfer.pk %}?action=cancel">Cancel</a>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
+                    {% if perms.inventory.view_carcolors %}
+                        <div class="card rounded shadow d-flex align-content-center mt-3
+                                    {% if car.get_transfer %}transfer{% endif %}">
+                            <p class="card-header rounded-top fw-bold">{% trans 'Colors Details' %}</p>
+                            <div class="card-body">
+                                <div class="table-responsive scrollbar mb-3">
+                                    <table class="table table-sm fs-9 mb-0 overflow-hidden">
+                                        <!--test-->
+                                        {% if car.colors %}
+                                            <tr>
+                                                <th>{% trans 'Exterior' %}</th>
+                                                <td>
+                                                    <span>{{ car.colors.exterior.get_local_name }}</span>
+                                                </td>
+                                                <td class="align-middle">
+                                                    <div class="text-end color-div"
+                                                         style="background-color: rgb({{ car.colors.exterior.rgb }})">
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <th>{% trans 'Interior' %}</th>
+                                                <td>
+                                                    <span>{{ car.colors.interior.get_local_name }}</span>
+                                                </td>
+                                                <td class="align-middle">
+                                                    <div class="text-end color-div"
+                                                         style="background-color: rgb({{ car.colors.interior.rgb }})">
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                            {% if perms.inventory.change_carcolors %}
+                                                <tr>
+                                                    <td colspan="2">
+                                                        {% if not car.get_transfer %}
+                                                            <a href="{% url 'car_colors_update' request.dealer.slug car.slug %}"
+                                                               class="btn btn-phoenix-warning btn-sm mb-3">{% trans "Edit" %}</a>
+                                                        {% else %}
+                                                            <span class="badge bg-danger">{% trans "Cannot Edit, Car in Transfer." %}</span>
+                                                        {% endif %}
+                                                    </td>
+                                                </tr>
+                                            {% endif %}
+                                        {% else %}
+                                            <tr>
+                                                <td colspan="2">
+                                                    <p>{% trans "No color details available." %}</p>
+                                                    {% if perms.inventory.add_carcolors %}
+                                                        <a class="btn btn-phoenix-success btn-sm mb-3"
+                                                           href="{% url 'add_color' request.dealer.slug car.slug %}">{{ _("Add Color") }}</a>
+                                                    {% endif %}
+                                                </td>
+                                            </tr>
+                                        {% endif %}
+                                        <!--test-->
+                                    </table>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                {% endif %}
-            </div>
-        </div>
-        {% if car.status == 'sold' %}
-            <img class="car_status"
-                 src="{% static 'images/sold.png' %}"
-                 width="200"
-                 height="100"
-                 alt="">
-        {% endif %}
-    </div>
-
-    <!-- Custom Card Modal -->
-    <div class="modal fade"
-         id="customCardModal"
-         tabindex="-1"
-         aria-labelledby="customCardModalLabel"
-         aria-hidden="true">
-        <div class="modal-dialog modal-sm">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="customCardModalLabel">{% trans 'Custom Card' %}</h5>
-                    <button type="button"
-                            class="btn-close"
-                            data-bs-dismiss="modal"
-                            aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <!-- Content will be loaded here via AJAX -->
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Main Modal -->
-    <div class="modal fade"
-         id="mainModal"
-         tabindex="-1"
-         aria-labelledby="mainModalLabel"
-         aria-hidden="true">
-        <div class="modal-dialog modal-sm">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="mainModalLabel">{% trans 'Registration' %}</h5>
-                    <button type="button"
-                            class="btn-close"
-                            data-bs-dismiss="modal"
-                            aria-label="Close"></button>
-                </div>
-                <div class="main-modal-body" style="padding: 20px;">
-                    <!-- Content will be loaded here via AJAX -->
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Reservation Modal -->
-    <div class="modal fade"
-         id="reserveModal"
-         tabindex="-1"
-         aria-labelledby="reserveModalLabel"
-         aria-hidden="true">
-        <div class="modal-dialog modal-sm">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="reserveModalLabel">{% trans 'Car Reservation' %}</h5>
-                    <button type="button"
-                            class="btn-close"
-                            data-bs-dismiss="modal"
-                            aria-label="Close"></button>
-                </div>
-                <div class="modal-body">{% trans 'Are you sure you want to reserve this car?' %}</div>
-                <form method="POST" action="{% url 'reserve_car' request.dealer.slug car.slug %}" class="form">
-                    {% csrf_token %}
-                    <div class="p-1">
-                        <div class="d-flex gap-1">
-                            <button type="button"
-                                    class="btn btn-sm btn-phoenix-danger w-50"
-                                    data-bs-dismiss="modal"
-                                    aria-label="Cancel and close modal">
-                                <i class="fas fa-times"></i> {% trans 'No' %}
-                            </button>
-                            <button type="submit"
-                                    class="btn btn-sm btn-phoenix-success w-50"
-                                    aria-label="Save changes">
-                                <i class="fas fa-check"></i> {% trans 'Yes' %}
-                            </button>
+                    {% endif %}
+                    {% if car.status != 'transfer' %}
+                        {% if perms.inventory.view_carreservation %}
+                            <div class="card rounded shadow d-flex align-content-center mt-3">
+                                <p class="card-header rounded-top fw-bold">{% trans 'Reservations Details' %}</p>
+                                <div class="card-body">
+                                    <div class="table-responsive scrollbar mb-3">
+                                        <table class="table table-sm fs-9 mb-0 overflow-hidden">
+                                            {% if car.is_reserved %}
+                                                <thead>
+                                                    <tr>
+                                                        <th>{% trans "Reserved By" %}</th>
+                                                        <th>{% trans "Expires At" %}</th>
+                                                        <th>{% trans 'Actions' %}</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    {% for reservation in car.reservations.all %}
+                                                        <tr>
+                                                            <td>{{ reservation.reserved_by.dealer }}</td>
+                                                            <td>{{ reservation.reserved_until }}</td>
+                                                            {% if perms.inventory.change_carreservation %}
+                                                                <td>
+                                                                    {% if reservation.is_active %}
+                                                                        <form method="post"
+                                                                              action="{% url 'reservations' request.dealer.slug reservation.id %}">
+                                                                            {% csrf_token %}
+                                                                            <div class="btn-group">
+                                                                                <button type="submit"
+                                                                                        name="action"
+                                                                                        value="renew"
+                                                                                        class="btn btn-sm btn-phoenix-success px-3 py-1">
+                                                                                    {% trans "Renew" %}
+                                                                                </button>
+                                                                                <button type="submit"
+                                                                                        name="action"
+                                                                                        value="cancel"
+                                                                                        class="btn btn-sm btn-phoenix-secondary px-3 py-1">
+                                                                                    {% trans "Cancel" %}
+                                                                                </button>
+                                                                            </div>
+                                                                        </form>
+                                                                    {% else %}
+                                                                        <span class="badge badge-phoenix badge-phoenix-danger fs-10">{% trans "Expired" %}</span>
+                                                                    {% endif %}
+                                                                </td>
+                                                            {% endif %}
+                                                        </tr>
+                                                    {% endfor %}
+                                                {% else %}
+                                                    {% if perms.inventory.add_carreservation %}
+                                                        <tr>
+                                                            <td>
+                                                                <button type="button"
+                                                                        class="btn btn-sm btn-phoenix-success"
+                                                                        data-bs-toggle="modal"
+                                                                        data-bs-target="#reserveModal">
+                                                                    {% trans 'Reserve' %}
+                                                                </button>
+                                                            </td>
+                                                        </tr>
+                                                    {% endif %}
+                                                </tbody>
+                                            {% endif %}
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+                        {% endif %}
+                    {% endif %}
+                    <!-- Transfer Table -->
+                    {% if car.status == 'transfer' and car.get_transfer %}
+                        <div class="card rounded shadow d-flex align-content-center mt-3">
+                            <p class="card-header rounded-top fw-bold">{% trans 'Transfer Details' %}</p>
+                            <div class="card-body">
+                                <div class="table-responsive scrollbar mb-3">
+                                    <table class="table table-sm fs-9 mb-0 overflow-hidden">
+                                        <thead>
+                                            <tr>
+                                                <th>{% trans "Action" %}</th>
+                                                <th>{% trans "Status" %}</th>
+                                                <th>{% trans "From Showroom" %}</th>
+                                                <th>{% trans "To Showroom" %}</th>
+                                                <th>{% trans 'Date' %}</th>
+                                                <th></th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>
+                                                    <span class="badge badge-phoenix badge-phoenix-info">Transfer</span>
+                                                </td>
+                                                <td>
+                                                    {% if car.get_transfer.status == "draft" %}
+                                                        <span class="badge badge-phoenix badge-phoenix-warning">waiting for approval</span>
+                                                    {% elif car.get_transfer.status == "approved" %}
+                                                        <span class="badge badge-phoenix badge-phoenix-info">waiting for dealer acceptance</span>
+                                                    {% endif %}
+                                                </td>
+                                                <td>{{ car.get_transfer.from_dealer|title }}</td>
+                                                <td>{{ car.get_transfer.to_dealer|title }}</td>
+                                                <td>{{ car.get_transfer.transfer_date|date:"Y-m-d" }}</td>
+                                                <td>
+                                                    {% if car.get_transfer.status == "draft" %}
+                                                        <a class="btn btn-sm btn-phoenix-success"
+                                                           href="{% url 'transfer_detail' car.get_transfer.pk %}">Approve</a>
+                                                    {% endif %}
+                                                </td>
+                                                <td>
+                                                    <a class="btn btn-sm btn-phoenix-success"
+                                                       href="{% url 'transfer_detail' car.get_transfer.pk %}?action=cancel">Cancel</a>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
                         </div>
+                    {% endif %}
+                </div>
+            </div>
+            {% if car.status == 'sold' %}
+                <img class="car_status"
+                     src="{% static 'images/sold.png' %}"
+                     width="200"
+                     height="100"
+                     alt="">
+            {% endif %}
+        </div>
+        <!-- Custom Card Modal -->
+        <div class="modal fade"
+             id="customCardModal"
+             tabindex="-1"
+             aria-labelledby="customCardModalLabel"
+             aria-hidden="true">
+            <div class="modal-dialog modal-sm">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="customCardModalLabel">{% trans 'Custom Card' %}</h5>
+                        <button type="button"
+                                class="btn-close"
+                                data-bs-dismiss="modal"
+                                aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <!-- Content will be loaded here via AJAX -->
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Main Modal -->
+        <div class="modal fade"
+             id="mainModal"
+             tabindex="-1"
+             aria-labelledby="mainModalLabel"
+             aria-hidden="true">
+            <div class="modal-dialog modal-sm">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="mainModalLabel">{% trans 'Registration' %}</h5>
+                        <button type="button"
+                                class="btn-close"
+                                data-bs-dismiss="modal"
+                                aria-label="Close"></button>
+                    </div>
+                    <div class="main-modal-body" style="padding: 20px;">
+                        <!-- Content will be loaded here via AJAX -->
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Reservation Modal -->
+        <div class="modal fade"
+             id="reserveModal"
+             tabindex="-1"
+             aria-labelledby="reserveModalLabel"
+             aria-hidden="true">
+            <div class="modal-dialog modal-sm">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="reserveModalLabel">{% trans 'Car Reservation' %}</h5>
+                        <button type="button"
+                                class="btn-close"
+                                data-bs-dismiss="modal"
+                                aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">{% trans 'Are you sure you want to reserve this car?' %}</div>
+                    <form method="POST"
+                          action="{% url 'reserve_car' request.dealer.slug car.slug %}"
+                          class="form">
+                        {% csrf_token %}
+                        <div class="p-1">
+                            <div class="d-flex gap-1">
+                                <button type="button"
+                                        class="btn btn-sm btn-phoenix-danger w-50"
+                                        data-bs-dismiss="modal"
+                                        aria-label="Cancel and close modal">
+                                    <i class="fas fa-times"></i> {% trans 'No' %}
+                                </button>
+                                <button type="submit"
+                                        class="btn btn-sm btn-phoenix-success w-50"
+                                        aria-label="Save changes">
+                                    <i class="fas fa-check"></i> {% trans 'Yes' %}
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <!-- Specification Modal -->
+        <div class="modal fade"
+             id="specificationsModal"
+             tabindex="-1"
+             aria-labelledby="specificationsModalLabel"
+             aria-hidden="true">
+            <div class="modal-dialog modal-lg modal-dialog-scrollable">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="specificationsModalLabel">{% trans 'specifications'|upper %}</h5>
+                        <button class="btn btn-close p-1"
+                                type="button"
+                                data-bs-dismiss="modal"
+                                aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="list-inline" id="specificationsContent"></div>
                     </div>
-                </form>
-            </div>
-        </div>
-    </div>
-    <!-- Specification Modal -->
-    <div class="modal fade"
-         id="specificationsModal"
-         tabindex="-1"
-         aria-labelledby="specificationsModalLabel"
-         aria-hidden="true">
-        <div class="modal-dialog modal-lg modal-dialog-scrollable">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="specificationsModalLabel">{% trans 'specifications'|upper %}</h5>
-                    <button class="btn btn-close p-1"
-                            type="button"
-                            data-bs-dismiss="modal"
-                            aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <div class="list-inline" id="specificationsContent"></div>
                 </div>
             </div>
         </div>
-    </div>
     {% endif %}
     <script>
         document.addEventListener("DOMContentLoaded", function () {
diff --git a/templates/inventory/car_edit.html b/templates/inventory/car_edit.html
index febb8862..36e7e7b0 100644
--- a/templates/inventory/car_edit.html
+++ b/templates/inventory/car_edit.html
@@ -32,10 +32,6 @@
 
             </div>
         </div>
-
-       </div>
-
-   </div>
-
+    </div>
     <!---->
 {% endblock %}
diff --git a/templates/inventory/car_finance_form.html b/templates/inventory/car_finance_form.html
index a1150124..dcbb85f9 100644
--- a/templates/inventory/car_finance_form.html
+++ b/templates/inventory/car_finance_form.html
@@ -9,10 +9,9 @@
 
     <!---->
     <div class="row justify-content-center mt-5 mb-3">
-
-       <div class="col-lg-8 col-md-10">
-         <div class="card shadow-sm border-0 rounded-3">
-            <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
+        <div class="col-lg-8 col-md-10">
+            <div class="card shadow-sm border-0 rounded-3">
+                <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
                     <h3 class="mb-0 fs-4 text-center text-white">
                        {% trans "Finance Details for" %}&nbsp;{{ car.id_car_make.get_local_name }} - {{ car.id_car_model.get_local_name }}
                    </h3>
@@ -48,11 +47,7 @@
 
             </div>
         </div>
-
-       </div>
-
-   </div>
+    </div>
     <!---->
-
     <!-- JavaScript Section -->
 {% endblock %}
diff --git a/templates/inventory/car_form.html b/templates/inventory/car_form.html
index 130dd42c..23c36562 100644
--- a/templates/inventory/car_form.html
+++ b/templates/inventory/car_form.html
@@ -1,8 +1,9 @@
 {% extends "base.html" %}
 {% load i18n static custom_filters %}
-{%block title%} {%trans 'Add New Car'%} {%endblock%}
-{% block content %}
-    <style>
+{% block title %}
+    {% trans 'Add New Car' %} {% endblock %}
+    {% block content %}
+        <style>
         #video {
             width: 100%;
             max-width: 480px;
@@ -13,337 +14,332 @@
             opacity: 0.5;
             pointer-events: none;
         }
-    </style>
-    <!-- JavaScript Section -->
-    <script src="{% static 'vendors/zxing/index.min.js' %}"></script>
-    <script src="{% static 'vendors/tesseract/tesseract.min.js' %}"></script>
-    {% if not vendor_exists %}
-        <div class="alert alert-outline-warning d-flex align-items-center"
-             role="alert">
-            <i class="fa-solid fa-circle-info fs-6"></i>
-            <p class="mb-0 flex-1">{{ _("Please Add A Vendor, Before Adding A Car .") }} <a href="{% url 'vendor_create' request.dealer.slug %}" class="ms-3 text-body-primary fs-9" >{{ _("Add Vendor") }}</a> </p>
-            <button class="btn-close"
-                    type="button"
-                    data-bs-dismiss="alert"
-                    aria-label="Close"></button>
-        </div>
-    {% endif %}
-
-    <!---->
-    <div class="row justify-content-center mt-5 mb-3 {% if not vendor_exists %}disabled{% endif %}">
-
-       <div class="col-lg-8 col-md-10">
-         <div class="card shadow-sm border-0 rounded-3">
-            <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
-                    <h3 class="mb-0 fs-4 text-center text-white">
-                         <h3 class="mb-3">{% trans 'Add Car' %} <li class="fas fa-car-on text-primary ms-2"></li></h3>
-                   </h3>
+        </style>
+        <!-- JavaScript Section -->
+        <script src="{% static 'vendors/zxing/index.min.js' %}"></script>
+        <script src="{% static 'vendors/tesseract/tesseract.min.js' %}"></script>
+        {% if not vendor_exists %}
+            <div class="alert alert-outline-warning d-flex align-items-center"
+                 role="alert">
+                <i class="fa-solid fa-circle-info fs-6"></i>
+                <p class="mb-0 flex-1">
+                    {{ _("Please Add A Vendor, Before Adding A Car .") }} <a href="{% url 'vendor_create' request.dealer.slug %}"
+    class="ms-3 text-body-primary fs-9">{{ _("Add Vendor") }}</a>
+                </p>
+                <button class="btn-close"
+                        type="button"
+                        data-bs-dismiss="alert"
+                        aria-label="Close"></button>
             </div>
-            <div class="card-body bg-light-subtle">
-                 <form method="post" id="carForm" class="form needs-validation" novalidate>
-                    {% csrf_token %}
-                     {% include 'partials/form_errors.html' %}
-            <div class="d-flex flex-column">
-                <div class="d-flex flex-column flex-sm-grow-1 p-0">
-                    <div class="row g-4">
-
-                        <!-- VIN Section -->
-                        <div class="col-lg-12 ">
-                            <div class="card bg-body mb-3 shadow-sm">
-                                <div class="card-body">
-                                    <!-- Improved VIN input with integrated buttons -->
-                                    <div class="mb-3">
-                                        <label for="{{ form.vin.id_for_label }}" class="form-label fw-bold">{% trans 'VIN' %}</label>
-                                        <div class="input-group">
-                                            <input type="text"
-                                                   class="form-control text-center"
-                                                   id="{{ form.vin.id_for_label }}"
-                                                   name="{{ form.vin.html_name }}"
-                                                   placeholder="{% trans 'VIN' %}"
-                                                   required />
-                                            <button type="button"
-                                                    class="btn btn-phoenix-warning"
-                                                    id="scan-vin-btn"
-                                                    data-bs-toggle="modal"
-                                                    data-bs-target="#scannerModal"
-                                                    title="{% trans 'Scan VIN' %}">
-                                                <span class="fas fa-camera fs-9"></span>
-                                            </button>
-                                            <button type="button"
-                                                    class="btn btn-phoenix-success"
-                                                    id="decodeVinBtn"
-                                                    title="{% trans 'Decode VIN' %}">
-                                                <span class="fas fa-search fs-9"></span>
-                                            </button>
-                                        </div>
-                                    </div>
-
-                                    <div class="row mt-3">
-                                        <div class="col-md-6">
-                                            <div class="form-floating">
-                                                <input type="number"
-                                                       class="form-control form-control-sm text-center"
-                                                       id="{{ form.year.id_for_label }}"
-                                                       name="{{ form.year.html_name }}" />
-                                                <label for="{{ form.year.id_for_label }}">{% trans 'Year' %}</label>
-                                                <span class="text-success fw-bold mt-1 d-block" id="year-check"></span>
-                                            </div>
-                                        </div>
-
-                                    </div>
-                                    <div class="row mt-3">
-                                        <div class="col-md-6" id="make-row">
-                                            <div class="form-floating">
-                                                {{ form.id_car_make|add_class:"form-select form-select-sm text-center" }}
-                                                <label for="{{ form.id_car_make.id_for_label }}">{% trans 'make'|capfirst %}</label>
-                                                <span class="text-success fw-bold mt-1 d-block" id="make-check"></span>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-6" id="model-row">
-                                            <div class="form-floating">
-                                                <select class="form-select form-select-sm text-center"
-                                                        id="{{ form.id_car_model.id_for_label }}"
-                                                        name="{{ form.id_car_model.html_name }}">
-                                                    <option value="">{% trans 'Select' %}</option>
-                                                </select>
-                                                <label for="{{ form.id_car_model.id_for_label }}">{% trans 'model'|capfirst %}</label>
-                                                <span class="text-success fw-bold mt-1 d-block" id="model-check"></span>
-                                            </div>
-                                            <div class="badge badge-phoenix fs-11 badge-phoenix-success m-1"
-                                                 id="generation-div"></div>
-                                        </div>
-                                        <div id="serie-row" class="col-md-6">
-                                            <div class="form-floating">
-                                                <select class="form-select form-select-sm text-center"
-                                                        id="{{ form.id_car_serie.id_for_label }}"
-                                                        name="{{ form.id_car_serie.html_name }}">
-                                                    <option value="">{% trans 'Select' %}</option>
-                                                </select>
-                                                <label for="{{ form.id_car_serie.id_for_label }}">{% trans 'Series' %}</label>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-6" id="trim-row">
-                                            <div class="form-floating">
-                                                <select class="form-select form-select-sm text-center"
-                                                        id="{{ form.id_car_trim.id_for_label }}"
-                                                        name="{{ form.id_car_trim.html_name }}">
-                                                    <option value="">{% trans 'Select' %}</option>
-                                                </select>
-                                                <label for="{{ form.id_car_trim.id_for_label }}">{% trans 'trim'|capfirst %}</label>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="row mt-3">
-
-                                        <div class="col-md-6 d-flex align-items-center justify-content-center gap-2 mt-2">
-                                            <button type="button"
-                                                    class="btn btn-phoenix-success"
-                                                    id="specification-btn"
-                                                    data-bs-toggle="modal"
-                                                    data-bs-target="#specificationsModal"
-                                                    disabled>{% trans 'specifications'|capfirst %}</button>
-                                            <button type="button"
-                                                    class="btn btn-phoenix-warning"
-                                                    id="options-btn"
-                                                    data-bs-toggle="modal"
-                                                    data-bs-target="#equipmentOptionsModal"
-                                                    disabled>{% trans 'options'|capfirst %}</button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+        {% endif %}
+        <!---->
+        <div class="row justify-content-center mt-5 mb-3
+                    {% if not vendor_exists %}disabled{% endif %}">
+            <div class="col-lg-8 col-md-10">
+                <div class="card shadow-sm border-0 rounded-3">
+                    <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
+                        <h3 class="mb-0 fs-4 text-center text-white">
+                            <h3 class="mb-3">
+                                {% trans 'Add Car' %}
+                                <li class="fas fa-car-on text-primary ms-2"></li>
+                            </h3>
+                        </h3>
                     </div>
-                    <div class="row g-3">
-                        <div class="col-lg-12">
-                            <div class="row">
-                                <!--Vendor Field-->
-                                <div class="col-lg-4 col-xl-4">
-                                    <div class="card bg-body my-1 shadow-sm">
-                                        <div class="card-body">
-                                            <div class="form-floating">
-                                                {{ form.vendor|add_class:"form-select text-center" }}
-                                                <label for="{{ form.vendor.id_for_label }}" class="form-label">{% trans 'Vendor' %}</label>
+                    <div class="card-body bg-light-subtle">
+                        <form method="post" id="carForm" class="form needs-validation" novalidate>
+                            {% csrf_token %}
+                            {% include 'partials/form_errors.html' %}
+                            <div class="d-flex flex-column">
+                                <div class="d-flex flex-column flex-sm-grow-1 p-0">
+                                    <div class="row g-4">
+                                        <!-- VIN Section -->
+                                        <div class="col-lg-12 ">
+                                            <div class="card bg-body mb-3 shadow-sm">
+                                                <div class="card-body">
+                                                    <!-- Improved VIN input with integrated buttons -->
+                                                    <div class="mb-3">
+                                                        <label for="{{ form.vin.id_for_label }}" class="form-label fw-bold">{% trans 'VIN' %}</label>
+                                                        <div class="input-group">
+                                                            <input type="text"
+                                                                   class="form-control text-center"
+                                                                   id="{{ form.vin.id_for_label }}"
+                                                                   name="{{ form.vin.html_name }}"
+                                                                   placeholder="{% trans 'VIN' %}"
+                                                                   required />
+                                                            <button type="button"
+                                                                    class="btn btn-phoenix-warning"
+                                                                    id="scan-vin-btn"
+                                                                    data-bs-toggle="modal"
+                                                                    data-bs-target="#scannerModal"
+                                                                    title="{% trans 'Scan VIN' %}">
+                                                                <span class="fas fa-camera fs-9"></span>
+                                                            </button>
+                                                            <button type="button"
+                                                                    class="btn btn-phoenix-success"
+                                                                    id="decodeVinBtn"
+                                                                    title="{% trans 'Decode VIN' %}">
+                                                                <span class="fas fa-search fs-9"></span>
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                    <div class="row mt-3">
+                                                        <div class="col-md-6">
+                                                            <div class="form-floating">
+                                                                <input type="number"
+                                                                       class="form-control form-control-sm text-center"
+                                                                       id="{{ form.year.id_for_label }}"
+                                                                       name="{{ form.year.html_name }}" />
+                                                                <label for="{{ form.year.id_for_label }}">{% trans 'Year' %}</label>
+                                                                <span class="text-success fw-bold mt-1 d-block" id="year-check"></span>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="row mt-3">
+                                                        <div class="col-md-6" id="make-row">
+                                                            <div class="form-floating">
+                                                                {{ form.id_car_make|add_class:"form-select form-select-sm text-center" }}
+                                                                <label for="{{ form.id_car_make.id_for_label }}">{% trans 'make'|capfirst %}</label>
+                                                                <span class="text-success fw-bold mt-1 d-block" id="make-check"></span>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-md-6" id="model-row">
+                                                            <div class="form-floating">
+                                                                <select class="form-select form-select-sm text-center"
+                                                                        id="{{ form.id_car_model.id_for_label }}"
+                                                                        name="{{ form.id_car_model.html_name }}">
+                                                                    <option value="">{% trans 'Select' %}</option>
+                                                                </select>
+                                                                <label for="{{ form.id_car_model.id_for_label }}">{% trans 'model'|capfirst %}</label>
+                                                                <span class="text-success fw-bold mt-1 d-block" id="model-check"></span>
+                                                            </div>
+                                                            <div class="badge badge-phoenix fs-11 badge-phoenix-success m-1"
+                                                                 id="generation-div"></div>
+                                                        </div>
+                                                        <div id="serie-row" class="col-md-6">
+                                                            <div class="form-floating">
+                                                                <select class="form-select form-select-sm text-center"
+                                                                        id="{{ form.id_car_serie.id_for_label }}"
+                                                                        name="{{ form.id_car_serie.html_name }}">
+                                                                    <option value="">{% trans 'Select' %}</option>
+                                                                </select>
+                                                                <label for="{{ form.id_car_serie.id_for_label }}">{% trans 'Series' %}</label>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-md-6" id="trim-row">
+                                                            <div class="form-floating">
+                                                                <select class="form-select form-select-sm text-center"
+                                                                        id="{{ form.id_car_trim.id_for_label }}"
+                                                                        name="{{ form.id_car_trim.html_name }}">
+                                                                    <option value="">{% trans 'Select' %}</option>
+                                                                </select>
+                                                                <label for="{{ form.id_car_trim.id_for_label }}">{% trans 'trim'|capfirst %}</label>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="row mt-3">
+                                                        <div class="col-md-6 d-flex align-items-center justify-content-center gap-2 mt-2">
+                                                            <button type="button"
+                                                                    class="btn btn-phoenix-success"
+                                                                    id="specification-btn"
+                                                                    data-bs-toggle="modal"
+                                                                    data-bs-target="#specificationsModal"
+                                                                    disabled>
+                                                                {% trans 'specifications'|capfirst %}
+                                                            </button>
+                                                            <button type="button"
+                                                                    class="btn btn-phoenix-warning"
+                                                                    id="options-btn"
+                                                                    data-bs-toggle="modal"
+                                                                    data-bs-target="#equipmentOptionsModal"
+                                                                    disabled>{% trans 'options'|capfirst %}</button>
+                                                        </div>
+                                                    </div>
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
-                                </div>
-                                <!-- Stock Type Card -->
-                                <div class="col-lg-4 col-xl-4">
-                                    <div class="card bg-body my-1 shadow-sm">
-                                        <div class="card-body">
-                                            <div class="form-floating">
-                                                {{ form.stock_type|add_class:"form-select text-center" }}
-                                                <label for="{{ form.stock_type.id_for_label }}">{% trans 'Stock Type'|capfirst %}</label>
+                                    <div class="row g-3">
+                                        <div class="col-lg-12">
+                                            <div class="row">
+                                                <!--Vendor Field-->
+                                                <div class="col-lg-4 col-xl-4">
+                                                    <div class="card bg-body my-1 shadow-sm">
+                                                        <div class="card-body">
+                                                            <div class="form-floating">
+                                                                {{ form.vendor|add_class:"form-select text-center" }}
+                                                                <label for="{{ form.vendor.id_for_label }}" class="form-label">{% trans 'Vendor' %}</label>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <!-- Stock Type Card -->
+                                                <div class="col-lg-4 col-xl-4">
+                                                    <div class="card bg-body my-1 shadow-sm">
+                                                        <div class="card-body">
+                                                            <div class="form-floating">
+                                                                {{ form.stock_type|add_class:"form-select text-center" }}
+                                                                <label for="{{ form.stock_type.id_for_label }}">{% trans 'Stock Type'|capfirst %}</label>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <!-- Mileage Card -->
+                                                <div class="col-lg-4 col-xl-4">
+                                                    <div class="card bg-body my-1 shadow-sm">
+                                                        <div class="card-body">
+                                                            <div class="form-floating">
+                                                                {{ form.mileage|add_class:"form-control text-center" }}
+                                                                <label for="{{ form.mileage.id_for_label }}">{% trans 'Mileage'|capfirst %}</label>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <!-- Receiving Date Field -->
+                                                <div class="col-lg-4 col-xl-4">
+                                                    <div class="card bg-body my-3 shadow-sm">
+                                                        <div class="card-body">
+                                                            <div class="form-floating">
+                                                                {{ form.receiving_date|add_class:"form-control text-center" }}
+                                                                <label for="{{ form.receiving_date.id_for_label }}" class="form-label">{% trans 'Receiving Date' %}:</label>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <!-- Remarks Card -->
+                                                <div class="col-lg-4 col-xl-8">
+                                                    <div class="card bg-body my-3 shadow-sm">
+                                                        <div class="card-body">
+                                                            <div class="form-floating">
+                                                                {{ form.remarks|add_class:"form-control text-center" }}
+                                                                <label for="{{ form.remarks.id_for_label }}">{% trans 'Remarks'|capfirst %}:</label>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
                                             </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <!-- Mileage Card -->
-                                <div class="col-lg-4 col-xl-4">
-                                    <div class="card bg-body my-1 shadow-sm">
-                                        <div class="card-body">
-                                            <div class="form-floating">
-                                                {{ form.mileage|add_class:"form-control text-center" }}
-                                                <label for="{{ form.mileage.id_for_label }}">{% trans 'Mileage'|capfirst %}</label>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <!-- Receiving Date Field -->
-                                <div class="col-lg-4 col-xl-4">
-                                    <div class="card bg-body my-3 shadow-sm">
-                                        <div class="card-body">
-                                            <div class="form-floating">
-                                                {{ form.receiving_date|add_class:"form-control text-center" }}
-                                                <label for="{{ form.receiving_date.id_for_label }}" class="form-label">{% trans 'Receiving Date' %}:</label>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <!-- Remarks Card -->
-                                <div class="col-lg-4 col-xl-8">
-                                    <div class="card bg-body my-3 shadow-sm">
-                                        <div class="card-body">
-                                            <div class="form-floating">
-                                                {{ form.remarks|add_class:"form-control text-center" }}
-                                                <label for="{{ form.remarks.id_for_label }}">{% trans 'Remarks'|capfirst %}:</label>
+                                            <hr class="my-2">
+                                            <!--Save Buttons-->
+                                            <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-3">
+                                                <button type="submit"
+                                                        hx-on-before-request="this.setAttribute('disabled','true')"
+                                                        hx-on-after-request="this.removeAttribute('disabled')"
+                                                        name="add_another"
+                                                        value="true"
+                                                        class="btn btn-lg btn-phoenix-success md-me-2">
+                                                    {% trans "Save and Add Another" %}
+                                                </button>
+                                                <button type="submit"
+                                                        hx-on-before-request="this.setAttribute('disabled','true')"
+                                                        hx-on-after-request="this.removeAttribute('disabled')"
+                                                        name="go_to_stats"
+                                                        value="true"
+                                                        class="btn btn-lg btn-phoenix-primary">
+                                                    {% trans "Save and Go to Inventory" %}
+                                                </button>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
-
-
-                                <hr class="my-2">
-                                 <!--Save Buttons-->
-                                <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-3">
-
-                                   <button type="submit"
-                                        hx-on-before-request="this.setAttribute('disabled','true')"
-                                        hx-on-after-request="this.removeAttribute('disabled')"
-                                        name="add_another"
-                                        value="true"
-                                        class="btn btn-lg btn-phoenix-success md-me-2">
-
-                                    {% trans "Save and Add Another" %}
+                        </form>
+                    </div>
+                </div>
+                <!-- Modal sections remain largely unchanged -->
+                <!--Specification Modal-->
+                <div class="modal fade"
+                     id="specificationsModal"
+                     tabindex="-1"
+                     aria-labelledby="specificationsModalLabel"
+                     aria-modal="true"
+                     role="dialog">
+                    <div class="modal-dialog modal-md">
+                        <div class="modal-content overflow-hidden">
+                            <div class="modal-header position-relative">
+                                <h5 class="modal-title" id="specificationsModalLabel">
+                                    <span class="ms-3 my-5">{% trans 'specifications'|capfirst %}</span>
+                                </h5>
+                                <button class="btn btn-circle project-modal-btn position-absolute end-0 top-0 mt-3 me-3 bg-body-emphasis"
+                                        data-bs-dismiss="modal">
+                                    <span class="fa-solid fa-xmark text-body dark__text-gray-100"></span>
                                 </button>
-                                <button type="submit"
-                                        hx-on-before-request="this.setAttribute('disabled','true')"
-                                        hx-on-after-request="this.removeAttribute('disabled')"
-                                        name="go_to_stats"
-                                        value="true"
-                                        class="btn btn-lg btn-phoenix-primary">
-                                    {% trans "Save and Go to Inventory" %}
-                                </button>
-                               </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-
-                </form>
-
-
-
-            </div>
-        </div>
-                   <!-- Modal sections remain largely unchanged -->
-        <!--Specification Modal-->
-        <div class="modal fade"
-             id="specificationsModal"
-             tabindex="-1"
-             aria-labelledby="specificationsModalLabel"
-             aria-modal="true"
-             role="dialog">
-            <div class="modal-dialog modal-md">
-                <div class="modal-content overflow-hidden">
-                    <div class="modal-header position-relative">
-                        <h5 class="modal-title" id="specificationsModalLabel">
-                            <span class="ms-3 my-5">{% trans 'specifications'|capfirst %}</span>
-                        </h5>
-                        <button class="btn btn-circle project-modal-btn position-absolute end-0 top-0 mt-3 me-3 bg-body-emphasis"
-                                data-bs-dismiss="modal">
-                            <span class="fa-solid fa-xmark text-body dark__text-gray-100"></span>
-                        </button>
-                    </div>
-                    <div class="modal-body">
-                        <span class="m-1 fw-light">{{ _("Details") }}</span>
-                        <div id="specificationsContent"></div>
-                    </div>
-                    <div class="modal-footer">
-                        <button class="btn btn-phoenix-primary" type="button" data-bs-dismiss="modal">{% trans 'Close' %}</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!--equipments and options Modal-->
-        <div class="modal fade"
-             id="equipmentOptionsModal"
-             tabindex="-1"
-             aria-labelledby="equipmentOptionsModalLabel"
-             aria-modal="true"
-             role="dialog">
-            <div class="modal-dialog modal-md">
-                <div class="modal-content overflow-hidden">
-                    <div class="modal-header position-relative">
-                        <h5 class="modal-title" id="equipmentOptionsModalLabel">{% trans 'Options'|capfirst %}</h5>
-                        <button type="button"
-                                class="btn-close"
-                                data-bs-dismiss="modal"
-                                aria-label="{% trans 'Close' %}"></button>
-                    </div>
-                    <div class="modal-body">
-                        <div class="col-lg-4 col-xl-3">
-                            <div class="card h-100">
-                                <div class="card-body" id="equipment-container">
-                                    <label class="form-label" for="equipment_id">{% trans 'equipment'|capfirst %}:</label>
-                                    <select class="form-select text-center"
-                                            id="equipment_id"
-                                            name="equipment_name_id">
-                                        <option value="">{% trans 'Select' %}</option>
-                                    </select>
-                                </div>
+                            </div>
+                            <div class="modal-body">
+                                <span class="m-1 fw-light">{{ _("Details") }}</span>
+                                <div id="specificationsContent"></div>
+                            </div>
+                            <div class="modal-footer">
+                                <button class="btn btn-phoenix-primary" type="button" data-bs-dismiss="modal">{% trans 'Close' %}</button>
                             </div>
                         </div>
-                        <div id="optionsContent"></div>
                     </div>
-                    <div class="modal-footer">
-                        <button class="btn btn-phoenix-primary" type="button" data-bs-dismiss="modal">{% trans 'Close' %}</button>
+                </div>
+                <!--equipments and options Modal-->
+                <div class="modal fade"
+                     id="equipmentOptionsModal"
+                     tabindex="-1"
+                     aria-labelledby="equipmentOptionsModalLabel"
+                     aria-modal="true"
+                     role="dialog">
+                    <div class="modal-dialog modal-md">
+                        <div class="modal-content overflow-hidden">
+                            <div class="modal-header position-relative">
+                                <h5 class="modal-title" id="equipmentOptionsModalLabel">{% trans 'Options'|capfirst %}</h5>
+                                <button type="button"
+                                        class="btn-close"
+                                        data-bs-dismiss="modal"
+                                        aria-label="{% trans 'Close' %}"></button>
+                            </div>
+                            <div class="modal-body">
+                                <div class="col-lg-4 col-xl-3">
+                                    <div class="card h-100">
+                                        <div class="card-body" id="equipment-container">
+                                            <label class="form-label" for="equipment_id">{% trans 'equipment'|capfirst %}:</label>
+                                            <select class="form-select text-center"
+                                                    id="equipment_id"
+                                                    name="equipment_name_id">
+                                                <option value="">{% trans 'Select' %}</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div id="optionsContent"></div>
+                            </div>
+                            <div class="modal-footer">
+                                <button class="btn btn-phoenix-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">
+                    <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
+                                       class="img-fluid border rounded shadow-sm">
+                                </video>
+                                <p id="result" class="mt-2 fw-bold">{{ _("VIN will appear here.") }}</p>
+                                <button id="ocr-fallback-btn" class="btn btn-phoenix-primary mt-3">{{ _("Use OCR Fallback") }}</button>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
-        <!--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 class="img-fluid border rounded shadow-sm">
-                        </video>
-                        <p id="result" class="mt-2 fw-bold">{{ _("VIN will appear here.") }}</p>
-                        <button id="ocr-fallback-btn" class="btn btn-phoenix-primary mt-3">{{ _("Use OCR Fallback") }}</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-       </div>
-
-   </div>
-
-    <!---->
-    <script>
+        <!---->
+        <script>
         function getCookie(name) {
             let cookieValue = null;
             if (document.cookie && document.cookie !== "") {
@@ -674,5 +670,5 @@
                 titleText: msg,
             });
         }
-    </script>
-{% endblock %}
\ No newline at end of file
+        </script>
+    {% endblock %}
diff --git a/templates/inventory/car_form_qabl alfalsafa.html b/templates/inventory/car_form_qabl alfalsafa.html
index a663ccf1..40e819d0 100644
--- a/templates/inventory/car_form_qabl alfalsafa.html	
+++ b/templates/inventory/car_form_qabl alfalsafa.html	
@@ -203,11 +203,15 @@
                                 <button type="submit"
                                         name="add_another"
                                         value="true"
-                                        class="btn btn-sm btn-phoenix-success me-1">{% trans "Save and Add Another" %}</button>
+                                        class="btn btn-sm btn-phoenix-success me-1">
+                                    {% trans "Save and Add Another" %}
+                                </button>
                                 <button type="submit"
                                         name="go_to_stats"
                                         value="true"
-                                        class="btn btn-sm btn-phoenix-primary">{% trans "Save and Go to Inventory" %}</button>
+                                        class="btn btn-sm btn-phoenix-primary">
+                                    {% trans "Save and Go to Inventory" %}
+                                </button>
                             </div>
                         </div>
                     </main>
diff --git a/templates/inventory/car_inventory.html b/templates/inventory/car_inventory.html
index 59070340..ebd3c1bf 100644
--- a/templates/inventory/car_inventory.html
+++ b/templates/inventory/car_inventory.html
@@ -93,7 +93,8 @@
                                         {% endif %}
                                     </td>
                                     <td class="align-middle white-space-nowrap text-start">
-                                        <a class="fs-9 fw-bold" href="{% url 'car_detail' request.dealer.slug car.slug %}">{{ car.vin }}</a>
+                                        <a class="fs-9 fw-bold"
+                                           href="{% url 'car_detail' request.dealer.slug car.slug %}">{{ car.vin }}</a>
                                     </td>
                                     <td class="align-middle white-space-nowrap text-center fw-bold">{{ car.year }}</td>
                                     {% if car.colors %}
@@ -133,9 +134,9 @@
                                             <span class="badge badge-phoenix fs-10 badge-phoenix-primary"><span class="badge-label">{{ _("Sold") }}</span><span class="ms-1" data-feather="package" style="height:13px;width:13px;"></span></span>
                                         {% elif car.status == "hold" %}
                                             <span class="badge badge-phoenix fs-10 badge-phoenix-warning"><span class="badge-label">{{ _("Hold") }}</span><span class="ms-1"
-                                                                                                                                                                data-feather="alert-octagon"
-                                                                                                                                                                style="height:13px;
-                                                                                                                                                                       width:13px"></span></span>
+      data-feather="alert-octagon"
+      style="height:13px;
+             width:13px"></span></span>
                                         {% elif car.status == "reserved" %}
                                             <span class="badge badge-phoenix fs-10 badge-phoenix-danger"><span class="badge-label">{{ _("Reserved") }}</span><span class="ms-1" data-feather="info" style="height:13px;width:13px;"></span></span>
                                         {% elif car.status == "damaged" %}
@@ -154,7 +155,8 @@
                                 <tr>
                                     <td colspan="7" class="d-flex flex-column align-items-center">
                                         <p class="text-muted">{% trans "No cars available." %}</p>
-                                        <a href="{% url 'add_car' request.dealer.slug %}" class="btn btn-phoenix-primary">{% trans "Add a Car" %}</a>
+                                        <a href="{% url 'add_car' request.dealer.slug %}"
+                                           class="btn btn-phoenix-primary">{% trans "Add a Car" %}</a>
                                     </td>
                                 </tr>
                             {% endfor %}
diff --git a/templates/inventory/car_list.html b/templates/inventory/car_list.html
index 4fa5743e..5fe4b8bf 100644
--- a/templates/inventory/car_list.html
+++ b/templates/inventory/car_list.html
@@ -1,7 +1,6 @@
 {% extends "base.html" %}
 {% load i18n %}
 {% load custom_filters %}
-
 {% block content %}
     <div class="row-fluid p-2">
         <!-- Display Validation Errors -->
@@ -77,7 +76,9 @@
                                                    class="form-control form-control-sm"
                                                    placeholder="{% trans 'VIN'|capfirst %}"
                                                    maxlength="17">
-                                            <button type="button" class="btn btn-sm btn-phoenix-primary" id="decodeVinBtn">{% trans 'search'|capfirst %}</button>
+                                            <button type="button"
+                                                    class="btn btn-sm btn-phoenix-primary"
+                                                    id="decodeVinBtn">{% trans 'search'|capfirst %}</button>
                                         </div>
                                     </div>
                                 </div>
@@ -233,7 +234,9 @@
                                                 data-bs-toggle="modal"
                                                 data-bs-target="#specificationsModal"
                                                 disabled>{% trans 'specifications'|capfirst %}</button>
-                                        <button type="submit" class="btn btn-sm btn-phoenix-primary mt-1" id="saveCarBtn">{% trans 'save'|capfirst %}</button>
+                                        <button type="submit"
+                                                class="btn btn-sm btn-phoenix-primary mt-1"
+                                                id="saveCarBtn">{% trans 'save'|capfirst %}</button>
                                     </div>
                                 </div>
                             </div>
diff --git a/templates/inventory/car_list_view.html b/templates/inventory/car_list_view.html
index cd6302d9..e1a7cb4c 100644
--- a/templates/inventory/car_list_view.html
+++ b/templates/inventory/car_list_view.html
@@ -1,9 +1,9 @@
 {% extends "base.html" %}
 {% load static i18n custom_filters humanize %}
-{%block title%} {%trans 'Inventory'%} {%endblock%}
-
-{% block customCSS %}
-  <style>
+{% block title %}
+    {% trans 'Inventory' %} {% endblock %}
+    {% block customCSS %}
+        <style>
     .htmx-indicator {
       opacity: 0;
       transition: opacity 500ms ease-in;
@@ -21,299 +21,300 @@
     .transition {
       transition: all ease-in 1s;
     }
-  </style>
-{% endblock customCSS %}
-
-{% block content %}
-  <div class="container-fluid" id="projectSummary">
-    <div class="row g-3 justify-content-between align-items-end mb-4">
-      <div class="col-12 col-sm-auto">
-        <h2 class="text-body-emphasis fw-bold mb-0">{{ _("Inventory") }}<li class="fas fa-store text-primary ms-2"></li></h2>
-      </div>
-    </div>
-    <div class="row g-3 justify-content-between align-items-end mb-2">
-      <div class="col-4 col-sm-auto">
-        <ul
-          class="nav nav-links mx-n2"
-          hx-boost="true"
-          hx-push-url="false"
-          hx-target=".table-responsive"
-          hx-select=".table-responsive"
-          hx-swap="innerHTML show:window:top"
-          hx-indicator=".htmx-indicator"
-          hx-on::before-request="on_before_request()"
-          hx-on::after-request="on_after_request()">
-          <li class="nav-item">
-            <a class="nav-link px-2 py-1 active" aria-current="page" href="{% url 'car_list' request.dealer.slug %}"><span>{{ _("All") }}</span><span class="text-body-tertiary fw-semibold">({{ stats.all }})</span></a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link px-2 py-1" href="{% url 'car_list' request.dealer.slug %}?status=available"><span>{{ _("Available") }}</span><span class="text-body-tertiary fw-semibold">({{ stats.available }})</span></a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link px-2 py-1" href="{% url 'car_list' request.dealer.slug %}?status=reserved"><span>{{ _("Reserved") }}</span><span class="text-body-tertiary fw-semibold">({{ stats.reserved }})</span></a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link px-2 py-1" href="{% url 'car_list' request.dealer.slug %}?status=transfer"><span>{{ _("Transfer") }}</span><span class="text-body-tertiary fw-semibold">({{ stats.transfer }})</span></a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link px-2 py-1" href="{% url 'car_list' request.dealer.slug %}?status=sold"><span>{{ _("Sold") }}</span><span class="text-body-tertiary fw-semibold">({{ stats.sold }})</span></a>
-          </li>
-          <li class="nav-item">
-            <button hx-on:click="toggle_filter()" class="btn btn-sm btn-phoenix-primary px-2 py-1">
-              <span><span class="fa fa-filter me-1"></span>{{ _("Filter") }}</span>
-              <span class="fas fa-caret-down fs-9 ms-1 filter-icon"></span>
-            </button>
-          </li>
-        </ul>
-      </div>
-      <div class="col-4 col-sm-auto">
-        <form hx-boost="true" action="{% url 'bulk_update_car_price' %}" method="post" hx-include=".car-checkbox" class="update-price-form d-flex flex-row align-items-center ms-auto d-none" style="float: right;">
-          {% csrf_token %}
-          <div class="input-group">
-            <input class="form-control" type="number" placeholder='{{ _("Price") }}' name="price" aria-label="Price" id="price" />
-            <button class="btn btn-sm btn-phoenix-primary" type="submit">{{ _("Update") }}</button>
-          </div>
-        </form>
-      </div>
-      <div class="col-4 col-sm-auto">
-        <div class="d-flex align-items-center">
-          <div class="spinner-border mx-3 htmx-indicator" role="status">
-            <span class="visually-hidden">Loading...</span>
-          </div>
-          <div class="search-box me-3">
-            <form class="position-relative">
-              <input
-                class="form-control search-input search"
-                name="search"
-                type="search"
-                placeholder="Search"
-                aria-label="Search"
-                hx-get="{% url 'car_list' request.dealer.slug %}"
-                hx-trigger="keyup changed delay:500ms"
-                hx-target=".table-responsive"
-                hx-select=".table-responsive"
-                hx-swap="innerHTML show:window:top"
-                hx-indicator=".htmx-indicator"
-                hx-on::before-request="on_before_request()"
-                hx-on::after-request="on_after_request()"
-              />
-              <span class="fas fa-search search-box-icon"></span>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="d-flex align-items-center d-none filter">
-        <select
-          hx-get="{% url 'car_list' request.dealer.slug %}"
-          name="make"
-          hx-target=".model-select"
-          hx-select=".model-select"
-          hx-swap="outerHTML show:window:top"
-          hx-indicator=".htmx-indicator"
-          class="form-select form-control-sm me-1 make"
-          aria-label="Default select example"
-          hx-on::before-request="filter_before_request()"
-          hx-on::after-request="filter_after_request()">
-          <option selected="" value="" disabled>{{ _("Make") }}</option>
-          {% for m in make %}
-            <option value="{{ m.pk }}">{{ m.get_local_name|default:m.name }}</option>
-          {% endfor %}
-        </select>
-        <select
-          hx-get="{% url 'car_list' request.dealer.slug %}"
-          hx-include=".make"
-          name="model"
-          hx-target=".year"
-          hx-select=".year"
-          hx-swap="outerHTML show:window:top"
-          hx-indicator=".htmx-indicator"
-          class="form-select form-control-sm me-1 model-select"
-          aria-label="Default select example"
-          hx-on::before-request="filter_before_request()"
-          hx-on::after-request="filter_after_request()">
-          <option selected="" value="" disabled>{{ _("Model") }}</option>
-          {% for m in model %}
-            <option value="{{ m.pk }}">{{ m.get_local_name|default:m.name }}</option>
-          {% endfor %}
-        </select>
-        <select class="form-select form-control-sm me-1 year" name="year" aria-label="Default select example">
-          <option selected="" value="" disabled>{{ _("Year") }}</option>
-          {% for y in year %}
-            <option value="{{ y.0 }}">{{ y.0 }}</option>
-          {% endfor %}
-        </select>
-        <select class="form-select form-control-sm me-1 car_status" name="car_status" aria-label="Default select example">
-          <option selected="" value="">{{ _("All") }}</option>
-          <option value="available">{{ _("Available") }}</option>
-          <option value="reserved">{{ _("Reserved") }}</option>
-          <option value="sold">{{ _("Sold") }}</option>
-          <option value="transfer">{{ _("Transfer") }}</option>
-        </select>
-        <button
-          id="search"
-          hx-get="{% url 'car_list' request.dealer.slug %}"
-          hx-include=".make,.model,.year,.car_status"
-          hx-indicator=".htmx-indicator"
-          hx-target=".table-responsive"
-          hx-select=".table-responsive"
-          hx-swap="outerHTML show:window:top"
-          class="btn btn-sm btn-phoenix-primary ms-1"
-          hx-on::before-request="filter_before_request()"
-          hx-on::after-request="filter_after_request()">
-          {{ _("Search") }}
-        </button>
-      </div>
-      <div class="table-responsive scrollbar">
-        <div class="d-flex flex-wrap align-items-center justify-content-between py-3 pe-0 fs-9">
-          <div
-            class="d-flex"
-            hx-boost="true"
-            hx-push-url="false"
-            hx-include=".make,.model,.year,.car_status"
-            hx-target=".table-responsive"
-            hx-select=".table-responsive"
-            hx-swap="innerHTML show:window:top"
-            hx-indicator=".htmx-indicator"
-            hx-on::before-request="on_before_request()"
-            hx-on::after-request="on_after_request()"></div>
-          <div class="w-100 list table-responsive" >
-            <div class="form-check">
-              <input class="form-check-input ms-4" type="checkbox" id="select-all" /> <span class="ms-1 text-body-tertiary">{{ _("Select All") }}</span>
-            </div>
-            {% for car in cars %}
-              <div class="card border mb-3 py-0 px-0" id="project-list-table-body">
-                <div class="card-body">
-                  <div class="row align-items-center">
-                    <div class="col-auto">
-                      <div class="form-check">
-                        <input class="form-check-input car-checkbox" type="checkbox" name="car" value="{{ car.pk }}" id="car-{{car.pk}}" />
-                      </div>
-                    </div>
-                  <!-- Vehicle Image/Icon -->
-                    <div class="col-auto">
-                      <div class="avatar avatar-3xl">
-                        <img class="rounded-soft shadow shadow-lg" src="{% static 'images/cars/' %}{{ car.vin }}.png" alt="{{ car.vin }}" />
-                      </div>
-                    </div>
-                  <!-- Vehicle Details -->
-                    <div class="col">
-                      <div class="row">
-                      <!-- Make/Model/Specs -->
-                        <div class="col-md-4">
-                          <h5 class="text-body-emphasis fw-bold">{{ car.year }}</h5>
-                          <p class="text-body-emphasis fw-bold">
-                            <a href="{% url 'car_detail' request.dealer.slug car.slug %}" class="text-decoration-none text-body-emphasis">
-                              {{ car.id_car_make.get_local_name }}
-                            </a>
-                            <small>{{ car.id_car_model.get_local_name }}</small>
-                          </p>
-                          <small class="text-body-secondary" dir="ltr">
-                            {{ car.id_car_trim }}
-                          </small>
-                        </div>
-
-                      <!-- Color and Date -->
-                        <div class="col-md-3">
-                          <p class="text-body mb-1">
-                            {{ car.colors.exterior.get_local_name }}
-                          </p>
-                          <small class="text-body-secondary">
-                            {{ car.receiving_date|naturalday|capfirst }}
-                          </small>
-                        </div>
-
-                      <!-- Status Badge -->
-                        <div class="col-md-3">
-                          {% if car.status == "available" %}
-                            <span class="badge badge-phoenix fs-10 badge-phoenix-success text-uppercase px-3 py-2">{{ _("Available") }}</span>
-                          {% elif car.status == "reserved" %}
-                            <span class="badge badge-phoenix fs-10 badge-phoenix-warning text-uppercase px-3 py-2">{{ _("Reserved") }}</span>
-                          {% elif car.status == "sold" %}
-                            <span class="badge badge-phoenix fs-10 badge-phoenix-danger text-uppercase px-3 py-2">{{ _("Sold") }}</span>
-                          {% elif car.status == "transfer" %}
-                            <span class="badge badge-phoenix fs-10 badge-phoenix-info text-uppercase px-3 py-2">{{ _("Transfer") }}</span>
-                          {% endif %}
-                        </div>
-
-                      <!-- Ready Status -->
-                        <div class="col-md-2">
-                          <div class="d-flex align-items-center">
-                            <span class="fs-10 fw-light me-2">{{ _("Inventory Ready") }}</span>
-                            {% if car.ready %}
-                              <span class="badge bg-success rounded-circle p-1 me-2">
-                                <span class="visually-hidden">Ready</span>
-                              </span>
-                              <span class="text-success fw-bold">{{ _("Yes") }}</span>
-                            {% else %}
-                              <span class="badge bg-danger rounded-circle p-1 me-2">
-                                <span class="visually-hidden">Not Ready</span>
-                              </span>
-                              <span class="text-danger fw-bold">{{ _("No") }}</span>
-                            {% endif %}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                  <!-- Action Menu -->
-                    <div class="col-auto">
-                      <div class="btn-reveal-trigger position-static">
-                        <button
-                          class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
-                          type="button"
-                          data-bs-toggle="dropdown"
-                          data-boundary="window"
-                          aria-haspopup="true"
-                          aria-expanded="false"
-                          data-bs-reference="parent">
-                          <span class="fas fa-ellipsis-h fs-10"></span>
-                        </button>
-                        <div class="dropdown-menu dropdown-menu-end py-2">
-                          <a class="dropdown-item" href="{% url 'car_detail' request.dealer.slug car.slug %}"> <span class="fas fa-eye me-2"></span>{{ _("View") }} </a>
-                          {% if perms.inventory.change_car%}
-                          <a class="dropdown-item" href="{% url 'car_update' request.dealer.slug car.slug %}"> <span class="fas fa-edit me-2"></span>{{ _("Edit") }} </a>
-                          {% endif %}
-                          {% if perms.inventory.delete_car%}
-                          <div class="dropdown-divider"></div>
-                          <a class="dropdown-item text-danger" href="{% url 'car_delete' request.dealer.slug car.slug %}"> <span class="fas fa-trash me-2"></span>{{ _("Remove") }} </a>
-                          {% endif %}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+        </style>
+    {% endblock customCSS %}
+    {% block content %}
+        <div class="container-fluid" id="projectSummary">
+            <div class="row g-3 justify-content-between align-items-end mb-4">
+                <div class="col-12 col-sm-auto">
+                    <h2 class="text-body-emphasis fw-bold mb-0">
+                        {{ _("Inventory") }}
+                        <li class="fas fa-store text-primary ms-2"></li>
+                    </h2>
                 </div>
-              </div>
-            {% empty %}
-              <div class="text-center py-5">
-                <div class="text-body-secondary">
-                  <span class="fas fa-car fa-4x mb-3 opacity-50"></span>
-                  <h4 class="text-body-secondary">{{ _("No vehicles found") }}</h4>
-                  <p class="text-body-tertiary">{{ _("Try adjusting your search criteria or filters") }}</p>
-                </div>
-              </div>
-            {% endfor %}
-          </div>
-        </div>
-        {% if page_obj.paginator.num_pages > 1 %}
-
-          <div class="d-flex justify-content-end mt-3">
-
-            <div class="d-flex">
-              {% include 'partials/pagination.html'%}
             </div>
-
-          </div>
-        {% endif %}
-      </div>
-    </div>
-  </div>
-
-{% endblock %}
-
-{% block customJS %}
-  <script>
+            <div class="row g-3 justify-content-between align-items-end mb-2">
+                <div class="col-4 col-sm-auto">
+                    <ul class="nav nav-links mx-n2"
+                        hx-boost="true"
+                        hx-push-url="false"
+                        hx-target=".table-responsive"
+                        hx-select=".table-responsive"
+                        hx-swap="innerHTML show:window:top"
+                        hx-indicator=".htmx-indicator"
+                        hx-on::before-request="on_before_request()"
+                        hx-on::after-request="on_after_request()">
+                        <li class="nav-item">
+                            <a class="nav-link px-2 py-1 active"
+                               aria-current="page"
+                               href="{% url 'car_list' request.dealer.slug %}"><span>{{ _("All") }}</span><span class="text-body-tertiary fw-semibold">({{ stats.all }})</span></a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link px-2 py-1"
+                               href="{% url 'car_list' request.dealer.slug %}?status=available"><span>{{ _("Available") }}</span><span class="text-body-tertiary fw-semibold">({{ stats.available }})</span></a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link px-2 py-1"
+                               href="{% url 'car_list' request.dealer.slug %}?status=reserved"><span>{{ _("Reserved") }}</span><span class="text-body-tertiary fw-semibold">({{ stats.reserved }})</span></a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link px-2 py-1"
+                               href="{% url 'car_list' request.dealer.slug %}?status=transfer"><span>{{ _("Transfer") }}</span><span class="text-body-tertiary fw-semibold">({{ stats.transfer }})</span></a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link px-2 py-1"
+                               href="{% url 'car_list' request.dealer.slug %}?status=sold"><span>{{ _("Sold") }}</span><span class="text-body-tertiary fw-semibold">({{ stats.sold }})</span></a>
+                        </li>
+                        <li class="nav-item">
+                            <button hx-on:click="toggle_filter()"
+                                    class="btn btn-sm btn-phoenix-primary px-2 py-1">
+                                <span><span class="fa fa-filter me-1"></span>{{ _("Filter") }}</span>
+                                <span class="fas fa-caret-down fs-9 ms-1 filter-icon"></span>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+                <div class="col-4 col-sm-auto">
+                    <form hx-boost="true"
+                          action="{% url 'bulk_update_car_price' %}"
+                          method="post"
+                          hx-include=".car-checkbox"
+                          class="update-price-form d-flex flex-row align-items-center ms-auto d-none"
+                          style="float: right">
+                        {% csrf_token %}
+                        <div class="input-group">
+                            <input class="form-control"
+                                   type="number"
+                                   placeholder='{{ _("Price") }}'
+                                   name="price"
+                                   aria-label="Price"
+                                   id="price" />
+                            <button class="btn btn-sm btn-phoenix-primary" type="submit">{{ _("Update") }}</button>
+                        </div>
+                    </form>
+                </div>
+                <div class="col-4 col-sm-auto">
+                    <div class="d-flex align-items-center">
+                        <div class="spinner-border mx-3 htmx-indicator" role="status">
+                            <span class="visually-hidden">Loading...</span>
+                        </div>
+                        <div class="search-box me-3">
+                            <form class="position-relative">
+                                <input class="form-control search-input search"
+                                       name="search"
+                                       type="search"
+                                       placeholder="Search"
+                                       aria-label="Search"
+                                       hx-get="{% url 'car_list' request.dealer.slug %}"
+                                       hx-trigger="keyup changed delay:500ms"
+                                       hx-target=".table-responsive"
+                                       hx-select=".table-responsive"
+                                       hx-swap="innerHTML show:window:top"
+                                       hx-indicator=".htmx-indicator"
+                                       hx-on::before-request="on_before_request()"
+                                       hx-on::after-request="on_after_request()" />
+                                <span class="fas fa-search search-box-icon"></span>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="d-flex align-items-center d-none filter">
+                    <select hx-get="{% url 'car_list' request.dealer.slug %}"
+                            name="make"
+                            hx-target=".model-select"
+                            hx-select=".model-select"
+                            hx-swap="outerHTML show:window:top"
+                            hx-indicator=".htmx-indicator"
+                            class="form-select form-control-sm me-1 make"
+                            aria-label="Default select example"
+                            hx-on::before-request="filter_before_request()"
+                            hx-on::after-request="filter_after_request()">
+                        <option selected="" value="" disabled>{{ _("Make") }}</option>
+                        {% for m in make %}<option value="{{ m.pk }}">{{ m.get_local_name|default:m.name }}</option>{% endfor %}
+                    </select>
+                    <select hx-get="{% url 'car_list' request.dealer.slug %}"
+                            hx-include=".make"
+                            name="model"
+                            hx-target=".year"
+                            hx-select=".year"
+                            hx-swap="outerHTML show:window:top"
+                            hx-indicator=".htmx-indicator"
+                            class="form-select form-control-sm me-1 model-select"
+                            aria-label="Default select example"
+                            hx-on::before-request="filter_before_request()"
+                            hx-on::after-request="filter_after_request()">
+                        <option selected="" value="" disabled>{{ _("Model") }}</option>
+                        {% for m in model %}<option value="{{ m.pk }}">{{ m.get_local_name|default:m.name }}</option>{% endfor %}
+                    </select>
+                    <select class="form-select form-control-sm me-1 year"
+                            name="year"
+                            aria-label="Default select example">
+                        <option selected="" value="" disabled>{{ _("Year") }}</option>
+                        {% for y in year %}<option value="{{ y.0 }}">{{ y.0 }}</option>{% endfor %}
+                    </select>
+                    <select class="form-select form-control-sm me-1 car_status"
+                            name="car_status"
+                            aria-label="Default select example">
+                        <option selected="" value="">{{ _("All") }}</option>
+                        <option value="available">{{ _("Available") }}</option>
+                        <option value="reserved">{{ _("Reserved") }}</option>
+                        <option value="sold">{{ _("Sold") }}</option>
+                        <option value="transfer">{{ _("Transfer") }}</option>
+                    </select>
+                    <button id="search"
+                            hx-get="{% url 'car_list' request.dealer.slug %}"
+                            hx-include=".make,.model,.year,.car_status"
+                            hx-indicator=".htmx-indicator"
+                            hx-target=".table-responsive"
+                            hx-select=".table-responsive"
+                            hx-swap="outerHTML show:window:top"
+                            class="btn btn-sm btn-phoenix-primary ms-1"
+                            hx-on::before-request="filter_before_request()"
+                            hx-on::after-request="filter_after_request()">{{ _("Search") }}</button>
+                </div>
+                <div class="table-responsive scrollbar">
+                    <div class="d-flex flex-wrap align-items-center justify-content-between py-3 pe-0 fs-9">
+                        <div class="d-flex"
+                             hx-boost="true"
+                             hx-push-url="false"
+                             hx-include=".make,.model,.year,.car_status"
+                             hx-target=".table-responsive"
+                             hx-select=".table-responsive"
+                             hx-swap="innerHTML show:window:top"
+                             hx-indicator=".htmx-indicator"
+                             hx-on::before-request="on_before_request()"
+                             hx-on::after-request="on_after_request()"></div>
+                        <div class="w-100 list table-responsive">
+                            <div class="form-check">
+                                <input class="form-check-input ms-4" type="checkbox" id="select-all" />
+                                <span class="ms-1 text-body-tertiary">{{ _("Select All") }}</span>
+                            </div>
+                            {% for car in cars %}
+                                <div class="card border mb-3 py-0 px-0" id="project-list-table-body">
+                                    <div class="card-body">
+                                        <div class="row align-items-center">
+                                            <div class="col-auto">
+                                                <div class="form-check">
+                                                    <input class="form-check-input car-checkbox"
+                                                           type="checkbox"
+                                                           name="car"
+                                                           value="{{ car.pk }}"
+                                                           id="car-{{ car.pk }}" />
+                                                </div>
+                                            </div>
+                                            <!-- Vehicle Image/Icon -->
+                                            <div class="col-auto">
+                                                <div class="avatar avatar-3xl">
+                                                    <img class="rounded-soft shadow shadow-lg"
+                                                         src="{% static 'images/cars/' %}{{ car.vin }}.png"
+                                                         alt="{{ car.vin }}" />
+                                                </div>
+                                            </div>
+                                            <!-- Vehicle Details -->
+                                            <div class="col">
+                                                <div class="row">
+                                                    <!-- Make/Model/Specs -->
+                                                    <div class="col-md-4">
+                                                        <h5 class="text-body-emphasis fw-bold">{{ car.year }}</h5>
+                                                        <p class="text-body-emphasis fw-bold">
+                                                            <a href="{% url 'car_detail' request.dealer.slug car.slug %}"
+                                                               class="text-decoration-none text-body-emphasis">
+                                                                {{ car.id_car_make.get_local_name }}
+                                                            </a>
+                                                            <small>{{ car.id_car_model.get_local_name }}</small>
+                                                        </p>
+                                                        <small class="text-body-secondary" dir="ltr">{{ car.id_car_trim }}</small>
+                                                    </div>
+                                                    <!-- Color and Date -->
+                                                    <div class="col-md-3">
+                                                        <p class="text-body mb-1">{{ car.colors.exterior.get_local_name }}</p>
+                                                        <small class="text-body-secondary">{{ car.receiving_date|naturalday|capfirst }}</small>
+                                                    </div>
+                                                    <!-- Status Badge -->
+                                                    <div class="col-md-3">
+                                                        {% if car.status == "available" %}
+                                                            <span class="badge badge-phoenix fs-10 badge-phoenix-success text-uppercase px-3 py-2">{{ _("Available") }}</span>
+                                                        {% elif car.status == "reserved" %}
+                                                            <span class="badge badge-phoenix fs-10 badge-phoenix-warning text-uppercase px-3 py-2">{{ _("Reserved") }}</span>
+                                                        {% elif car.status == "sold" %}
+                                                            <span class="badge badge-phoenix fs-10 badge-phoenix-danger text-uppercase px-3 py-2">{{ _("Sold") }}</span>
+                                                        {% elif car.status == "transfer" %}
+                                                            <span class="badge badge-phoenix fs-10 badge-phoenix-info text-uppercase px-3 py-2">{{ _("Transfer") }}</span>
+                                                        {% endif %}
+                                                    </div>
+                                                    <!-- Ready Status -->
+                                                    <div class="col-md-2">
+                                                        <div class="d-flex align-items-center">
+                                                            <span class="fs-10 fw-light me-2">{{ _("Inventory Ready") }}</span>
+                                                            {% if car.ready %}
+                                                                <span class="badge bg-success rounded-circle p-1 me-2">
+                                                                    <span class="visually-hidden">Ready</span>
+                                                                </span>
+                                                                <span class="text-success fw-bold">{{ _("Yes") }}</span>
+                                                            {% else %}
+                                                                <span class="badge bg-danger rounded-circle p-1 me-2">
+                                                                    <span class="visually-hidden">Not Ready</span>
+                                                                </span>
+                                                                <span class="text-danger fw-bold">{{ _("No") }}</span>
+                                                            {% endif %}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <!-- Action Menu -->
+                                            <div class="col-auto">
+                                                <div class="btn-reveal-trigger position-static">
+                                                    <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
+                                                            type="button"
+                                                            data-bs-toggle="dropdown"
+                                                            data-boundary="window"
+                                                            aria-haspopup="true"
+                                                            aria-expanded="false"
+                                                            data-bs-reference="parent">
+                                                        <span class="fas fa-ellipsis-h fs-10"></span>
+                                                    </button>
+                                                    <div class="dropdown-menu dropdown-menu-end py-2">
+                                                        <a class="dropdown-item"
+                                                           href="{% url 'car_detail' request.dealer.slug car.slug %}"> <span class="fas fa-eye me-2"></span>{{ _("View") }} </a>
+                                                        {% if perms.inventory.change_car %}
+                                                            <a class="dropdown-item"
+                                                               href="{% url 'car_update' request.dealer.slug car.slug %}"> <span class="fas fa-edit me-2"></span>{{ _("Edit") }} </a>
+                                                        {% endif %}
+                                                        {% if perms.inventory.delete_car %}
+                                                            <div class="dropdown-divider"></div>
+                                                            <a class="dropdown-item text-danger"
+                                                               href="{% url 'car_delete' request.dealer.slug car.slug %}"> <span class="fas fa-trash me-2"></span>{{ _("Remove") }} </a>
+                                                        {% endif %}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            {% empty %}
+                                <div class="text-center py-5">
+                                    <div class="text-body-secondary">
+                                        <span class="fas fa-car fa-4x mb-3 opacity-50"></span>
+                                        <h4 class="text-body-secondary">{{ _("No vehicles found") }}</h4>
+                                        <p class="text-body-tertiary">{{ _("Try adjusting your search criteria or filters") }}</p>
+                                    </div>
+                                </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                    {% if page_obj.paginator.num_pages > 1 %}
+                        <div class="d-flex justify-content-end mt-3">
+                            <div class="d-flex">{% include 'partials/pagination.html' %}</div>
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    {% endblock %}
+    {% block customJS %}
+        <script>
     links = document.querySelectorAll(".nav-link");
     links.forEach((link) => {
       link.addEventListener("click", () => {
@@ -375,6 +376,5 @@
         form.classList.add("d-none");
       }
     }
-  </script>
-{% endblock customJS %}
-
+        </script>
+    {% endblock customJS %}
diff --git a/templates/inventory/colors.html b/templates/inventory/colors.html
index 95076bb4..af7fc862 100644
--- a/templates/inventory/colors.html
+++ b/templates/inventory/colors.html
@@ -45,7 +45,7 @@
     #065535
     #000000
     #133337
-    #ffc0cb</a>
+#ffc0cb</a>
 <br>
 <span class="glyphicon glyphicon-star"></span>707
 </div>
diff --git a/templates/inventory/inventory_stats.html b/templates/inventory/inventory_stats.html
index 754fe24e..e876fdf6 100644
--- a/templates/inventory/inventory_stats.html
+++ b/templates/inventory/inventory_stats.html
@@ -86,13 +86,8 @@
                 {% endfor %}
             </div>
             {% if is_paginated %}
-
                 <div class="d-flex justify-content-end mt-3">
-
-                    <div class="d-flex">
-                        {% include 'partials/pagination.html'%}
-                    </div>
-
+                    <div class="d-flex">{% include 'partials/pagination.html' %}</div>
                 </div>
             {% endif %}
         </div>
diff --git a/templates/inventory/list.html b/templates/inventory/list.html
index 1ee8367e..87d0c471 100644
--- a/templates/inventory/list.html
+++ b/templates/inventory/list.html
@@ -2,11 +2,10 @@
 {% load i18n %}
 {% load static %}
 {% load custom_filters %}
-
 {% block content %}
     <div class="container-fluid px-4 py-4">
         <div class="row g-4">
-        <!-- Inventory Ordered Card -->
+            <!-- Inventory Ordered Card -->
             <div class="col-12">
                 <div class="card shadow-sm border-0">
                     <div class="card-header text-white">
@@ -16,9 +15,7 @@
                     </div>
                     <div class="card-body p-0">
                         {% if inventory_ordered %}
-                            <div class="table-responsive">
-                                {% inventory_table inventory_ordered %}
-                            </div>
+                            <div class="table-responsive">{% inventory_table inventory_ordered %}</div>
                         {% else %}
                             <div class="p-4 text-center text-muted">
                                 <i class="bi bi-box-seam display-6 mb-3"></i>
@@ -28,8 +25,7 @@
                     </div>
                 </div>
             </div>
-
-        <!-- Inventory In Transit Card -->
+            <!-- Inventory In Transit Card -->
             <div class="col-12">
                 <div class="card shadow-sm border-0">
                     <div class="card-header  text-white">
@@ -39,9 +35,7 @@
                     </div>
                     <div class="card-body p-0">
                         {% if inventory_in_transit %}
-                            <div class="table-responsive">
-                                {% inventory_table inventory_in_transit %}
-                            </div>
+                            <div class="table-responsive">{% inventory_table inventory_in_transit %}</div>
                         {% else %}
                             <div class="p-4 text-center text-muted">
                                 <i class="bi bi-box-seam display-6 mb-3"></i>
@@ -51,8 +45,7 @@
                     </div>
                 </div>
             </div>
-
-        <!-- Inventory Received Card -->
+            <!-- Inventory Received Card -->
             <div class="col-12">
                 <div class="card shadow-sm border-0">
                     <div class="card-header text-white">
@@ -62,9 +55,7 @@
                     </div>
                     <div class="card-body p-0">
                         {% if inventory_received %}
-                            <div class="table-responsive">
-                                {% inventory_table inventory_received %}
-                            </div>
+                            <div class="table-responsive">{% inventory_table inventory_received %}</div>
                         {% else %}
                             <div class="p-4 text-center text-muted">
                                 <i class="bi bi-box-seam display-6 mb-3"></i>
@@ -74,10 +65,8 @@
                     </div>
                 </div>
             </div>
-
-        <!-- Action Button -->
-            <div class="col-12 text-end mt-3">
-            </div>
+            <!-- Action Button -->
+            <div class="col-12 text-end mt-3"></div>
         </div>
     </div>
 {% endblock %}
diff --git a/templates/inventory/reserve_car.html b/templates/inventory/reserve_car.html
index d76a890c..8f86c350 100644
--- a/templates/inventory/reserve_car.html
+++ b/templates/inventory/reserve_car.html
@@ -20,6 +20,7 @@
             {% for error in form.reservation_end.errors %}<div class="invalid-feedback">{{ error }}</div>{% endfor %}
         </div>
         <button type="submit" class="btn btn-phoenix-primary">{% trans "Reserve" %}</button>
-        <a href="{% url 'car_detail' request.dealer.slug car.pk %}" class="btn btn-phoenix-secondary">{% trans "Cancel" %}</a>
+        <a href="{% url 'car_detail' request.dealer.slug car.pk %}"
+           class="btn btn-phoenix-secondary">{% trans "Cancel" %}</a>
     </form>
 {% endblock %}
diff --git a/templates/inventory/tags/inventory_table.html b/templates/inventory/tags/inventory_table.html
index ebdfdca1..551a8084 100644
--- a/templates/inventory/tags/inventory_table.html
+++ b/templates/inventory/tags/inventory_table.html
@@ -1,6 +1,5 @@
 {% load custom_filters %}
 {% load i18n %}
-
 <div class="table-responsive-lg">
     <table class="table table-hover table-bordered align-middle">
         <thead class="table-light">
@@ -12,14 +11,13 @@
             </tr>
         </thead>
         <tbody>
-
             {% for i in inventory_list %}
-            <tr class="hover-actions-trigger">
-                <td class="ps-2 fw-medium">{{ i.item_model__name }}</td>
-                <td class="text-center">{{ i.item_model__uom__name }}</td>
-                <td class="text-end pe-3">{{ i.total_quantity | floatformat:3 }}</td>
-                <td class="text-end pe-3 fw-bold text-primary">
-                        <span class="currency">{{CURRENCY}}</span>{{ i.total_value | currency_format }}
+                <tr class="hover-actions-trigger">
+                    <td class="ps-2 fw-medium">{{ i.item_model__name }}</td>
+                    <td class="text-center">{{ i.item_model__uom__name }}</td>
+                    <td class="text-end pe-3">{{ i.total_quantity | floatformat:3 }}</td>
+                    <td class="text-end pe-3 fw-bold text-primary">
+                        <span class="currency">{{ CURRENCY }}</span>{{ i.total_value | currency_format }}
                     </td>
                 </tr>
             {% endfor %}
@@ -29,9 +27,9 @@
                 <td colspan="2"></td>
                 <td class="text-end pe-3 fw-bold">{% trans "Total Value" %}</td>
                 <td class="text-end pe-3 fw-bold text-success">
-                        <span class="currency">{{CURRENCY}}</span>{{ inventory_total_value | currency_format }}
+                    <span class="currency">{{ CURRENCY }}</span>{{ inventory_total_value | currency_format }}
                 </td>
             </tr>
         </tfoot>
     </table>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/inventory/transfer_details.html b/templates/inventory/transfer_details.html
index f1c8d829..3f27b3da 100644
--- a/templates/inventory/transfer_details.html
+++ b/templates/inventory/transfer_details.html
@@ -55,7 +55,9 @@
                 <div class="modal-body">{% trans 'Are you sure' %}?</div>
                 <div class="p-1">
                     <div class="d-flex gap-1">
-                        <button type="button" class="btn btn-sm btn-phoenix-danger" data-bs-dismiss="modal">{% trans 'No' %}</button>
+                        <button type="button"
+                                class="btn btn-sm btn-phoenix-danger"
+                                data-bs-dismiss="modal">{% trans 'No' %}</button>
                         <a href="{% url 'transfer_confirm' transfer.car.pk transfer.pk %}?action=cancel"
                            type="button"
                            type="submit"
diff --git a/templates/inventory/transfer_preview.html b/templates/inventory/transfer_preview.html
index eb044f81..d856f423 100644
--- a/templates/inventory/transfer_preview.html
+++ b/templates/inventory/transfer_preview.html
@@ -184,141 +184,145 @@
                         }
                     </script>
                 </main>
-        {% else %}
-            <div class="button-row">
-                <button id="download-pdf" class="btn btn-phoenix-primary">
-                    <i class="fas fa-download"></i> {% trans 'Download transfer' %}
-                </button>
-                <button id="accept"
-                        class="btn btn-phoenix-success"
-                        data-bs-toggle="modal"
-                        data-bs-target="#acceptModal">
-                    <i class="fas fa-check-circle"></i> {% trans 'Accept transfer' %}
-                </button>
-                <button id="reject"
-                        class="btn btn-phoenix-danger"
-                        data-bs-toggle="modal"
-                        data-bs-target="#rejectModal">
-                    <i class="fas fa-times-circle"></i> {% trans 'Reject transfer' %}
-                </button>
-            </div>
+            {% else %}
+                <div class="button-row">
+                    <button id="download-pdf" class="btn btn-phoenix-primary">
+                        <i class="fas fa-download"></i> {% trans 'Download transfer' %}
+                    </button>
+                    <button id="accept"
+                            class="btn btn-phoenix-success"
+                            data-bs-toggle="modal"
+                            data-bs-target="#acceptModal">
+                        <i class="fas fa-check-circle"></i> {% trans 'Accept transfer' %}
+                    </button>
+                    <button id="reject"
+                            class="btn btn-phoenix-danger"
+                            data-bs-toggle="modal"
+                            data-bs-target="#rejectModal">
+                        <i class="fas fa-times-circle"></i> {% trans 'Reject transfer' %}
+                    </button>
+                </div>
                 <!-- Accept Modal -->
-            <div class="modal fade"
-                 id="acceptModal"
-                 tabindex="-1"
-                 aria-labelledby="acceptModalLabel"
-                 aria-hidden="true">
-                <div class="modal-dialog">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <h5 class="modal-title" id="acceptModalLabel">{% trans 'Accept transfer' %}</h5>
-                            <button type="button"
-                                    class="btn-close"
-                                    data-bs-dismiss="modal"
-                                    aria-label="Close"></button>
-                        </div>
-                        <div class="modal-body">{% trans 'Are you sure you want to accept this transfer?' %}</div>
-                        <div class="modal-footer">
-                            <button type="button" class="btn btn-phoenix-secondary" data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
-                            <a class="btn btn-phoenix-success"
-                               href="{% url 'transfer_accept_reject' transfer.car.pk transfer.pk %}?status=accepted">Confirm</a>
+                <div class="modal fade"
+                     id="acceptModal"
+                     tabindex="-1"
+                     aria-labelledby="acceptModalLabel"
+                     aria-hidden="true">
+                    <div class="modal-dialog">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h5 class="modal-title" id="acceptModalLabel">{% trans 'Accept transfer' %}</h5>
+                                <button type="button"
+                                        class="btn-close"
+                                        data-bs-dismiss="modal"
+                                        aria-label="Close"></button>
+                            </div>
+                            <div class="modal-body">{% trans 'Are you sure you want to accept this transfer?' %}</div>
+                            <div class="modal-footer">
+                                <button type="button"
+                                        class="btn btn-phoenix-secondary"
+                                        data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
+                                <a class="btn btn-phoenix-success"
+                                   href="{% url 'transfer_accept_reject' transfer.car.pk transfer.pk %}?status=accepted">Confirm</a>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
                 <!-- Reject Modal -->
-            <div class="modal fade"
-                 id="rejectModal"
-                 tabindex="-1"
-                 aria-labelledby="rejectModalLabel"
-                 aria-hidden="true">
-                <div class="modal-dialog">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <h5 class="modal-title" id="rejectModalLabel">{% trans 'Reject transfer' %}</h5>
-                            <button type="button"
-                                    class="btn-close"
-                                    data-bs-dismiss="modal"
-                                    aria-label="Close"></button>
-                        </div>
-                        <div class="modal-body">{% trans 'Are you sure you want to reject this transfer?' %}</div>
-                        <div class="modal-footer">
-                            <button type="button" class="btn btn-phoenix-secondary" data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
-                            <a class="btn btn-phoenix-success"
-                               href="{% url 'transfer_accept_reject' transfer.car.pk transfer.pk %}?status=rejected">Confirm</a>
+                <div class="modal fade"
+                     id="rejectModal"
+                     tabindex="-1"
+                     aria-labelledby="rejectModalLabel"
+                     aria-hidden="true">
+                    <div class="modal-dialog">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h5 class="modal-title" id="rejectModalLabel">{% trans 'Reject transfer' %}</h5>
+                                <button type="button"
+                                        class="btn-close"
+                                        data-bs-dismiss="modal"
+                                        aria-label="Close"></button>
+                            </div>
+                            <div class="modal-body">{% trans 'Are you sure you want to reject this transfer?' %}</div>
+                            <div class="modal-footer">
+                                <button type="button"
+                                        class="btn btn-phoenix-secondary"
+                                        data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
+                                <a class="btn btn-phoenix-success"
+                                   href="{% url 'transfer_accept_reject' transfer.car.pk transfer.pk %}?status=rejected">Confirm</a>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <div class="transfer-row" id="transfer-content">
+                <div class="transfer-row" id="transfer-content">
                     <!-- Header -->
-                <div class="transfer-header">
-                    <svg width="101"
-                         height="24"
-                         viewBox="0 0 101 24"
-                         fill="none"
-                         xmlns="http://www.w3.org/2000/svg">
+                    <div class="transfer-header">
+                        <svg width="101"
+                             height="24"
+                             viewBox="0 0 101 24"
+                             fill="none"
+                             xmlns="http://www.w3.org/2000/svg">
                             <!-- SVG Paths -->
-                    </svg>
-                    <h1 style="margin-top: 10px;">
-                        <b>{% trans "Transfer" %}</b>
-                    </h1>
-                    <p>{% trans "Thank you for choosing us. We appreciate your business" %}</p>
-                </div>
+                        </svg>
+                        <h1 style="margin-top: 10px;">
+                            <b>{% trans "Transfer" %}</b>
+                        </h1>
+                        <p>{% trans "Thank you for choosing us. We appreciate your business" %}</p>
+                    </div>
                     <!-- Details -->
-                <div class="transfer-details">
-                    <p>
-                        <strong>{% trans "Date" %} :</strong> {{ transfer.created_at }}
-                    </p>
-                    <p>
-                        <strong>{% trans "From" %} :</strong> {{ transfer.from_dealer }}
-                    </p>
-                    <p>
-                        <strong>{% trans "To" %} :</strong> {{ transfer.to_dealer }}
-                    </p>
-                </div>
+                    <div class="transfer-details">
+                        <p>
+                            <strong>{% trans "Date" %} :</strong> {{ transfer.created_at }}
+                        </p>
+                        <p>
+                            <strong>{% trans "From" %} :</strong> {{ transfer.from_dealer }}
+                        </p>
+                        <p>
+                            <strong>{% trans "To" %} :</strong> {{ transfer.to_dealer }}
+                        </p>
+                    </div>
                     <!-- Items Table -->
-                <div class="transfer-table">
-                    <table class="table table-bordered">
-                        <thead>
-                            <tr>
-                                <th>{% trans "Item" %}</th>
-                                <th class="text-center">{% trans "Quantity" %}</th>
-                                <th class="text-center">{% trans "Unit Price" %}</th>
-                                <th class="text-center">{% trans "Total" %}</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>{{ transfer.car }}</td>
-                                <td class="text-center">{{ transfer.quantity }}</td>
-                                <td class="text-center">{{ transfer.car.finances.selling_price }}</td>
-                                <td class="text-center">{{ transfer.total_price }}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
+                    <div class="transfer-table">
+                        <table class="table table-bordered">
+                            <thead>
+                                <tr>
+                                    <th>{% trans "Item" %}</th>
+                                    <th class="text-center">{% trans "Quantity" %}</th>
+                                    <th class="text-center">{% trans "Unit Price" %}</th>
+                                    <th class="text-center">{% trans "Total" %}</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>{{ transfer.car }}</td>
+                                    <td class="text-center">{{ transfer.quantity }}</td>
+                                    <td class="text-center">{{ transfer.car.finances.selling_price }}</td>
+                                    <td class="text-center">{{ transfer.total_price }}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
                     <!-- Total -->
-                <div class="transfer-total">
-                    <p>
-                        <strong>{% trans "Total Amount" %}:</strong> <span class="highlight">${{ transfer.total_price }}</span>
-                    </p>
-                </div>
+                    <div class="transfer-total">
+                        <p>
+                            <strong>{% trans "Total Amount" %}:</strong> <span class="highlight">${{ transfer.total_price }}</span>
+                        </p>
+                    </div>
                     <!-- Footer Note -->
-                <div class="footer-note">
-                    <p>
-                        {% trans "If you have any questions, feel free to contact us at" %} <a href="mailto:support@example.com">support@tenhal.com</a>.
-                    </p>
-                    <p>{% trans "Thank you for your business" %}</p>
+                    <div class="footer-note">
+                        <p>
+                            {% trans "If you have any questions, feel free to contact us at" %} <a href="mailto:support@example.com">support@tenhal.com</a>.
+                        </p>
+                        <p>{% trans "Thank you for your business" %}</p>
+                    </div>
                 </div>
-            </div>
-        {% endif %}
+            {% endif %}
             <!-- Bootstrap JS (Optional) -->
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
             <!-- jsPDF Library -->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
-        <script>
+            <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+            <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
+            <script>
             document.getElementById('download-pdf').addEventListener('click', function () {
                 const element = document.getElementById('transfer-content');
 
@@ -349,6 +353,6 @@
             // Handle the reject action here            
                 $('#rejectModal').modal('hide');
             });
-        </script>
-    </body>
-</html>
+            </script>
+        </body>
+    </html>
diff --git a/templates/items/expenses/expense_create.html b/templates/items/expenses/expense_create.html
index f5cab097..d7ea6ddd 100644
--- a/templates/items/expenses/expense_create.html
+++ b/templates/items/expenses/expense_create.html
@@ -2,7 +2,9 @@
 {% load crispy_forms_filters %}
 {% load static %}
 {% load i18n %}
-{% block title %}{{ _("Add New Expense") }}{% endblock title %}
+{% block title %}
+    {{ _("Add New Expense") }}
+{% endblock title %}
 {% block content %}
    
     <!---->
@@ -34,11 +36,6 @@
 
             </div>
         </div>
-
-       </div>
-
-   </div>
-
+    </div>
     <!---->
 {% endblock content %}
-
diff --git a/templates/items/expenses/expense_update.html b/templates/items/expenses/expense_update.html
index 42cc582e..0061ead2 100644
--- a/templates/items/expenses/expense_update.html
+++ b/templates/items/expenses/expense_update.html
@@ -2,7 +2,9 @@
 {% load crispy_forms_filters %}
 {% load static %}
 {% load i18n %}
-{% block title %}{{ _("Update Expense") }}{% endblock title %}
+{% block title %}
+    {{ _("Update Expense") }}
+{% endblock title %}
 {% block content %}
     {% comment %} <div class="row">
         <div class="row justify-content-center">
@@ -20,8 +22,6 @@
             </div>
         </div>
     </div> {% endcomment %}
-
-
     <!---->
     <div class="row justify-content-center mt-5 mb-3">
 
@@ -48,12 +48,6 @@
 
             </div>
         </div>
-
-       </div>
-
-   </div>
-
-
+    </div>
     <!---->
 {% endblock content %}
-
diff --git a/templates/items/expenses/expenses_list.html b/templates/items/expenses/expenses_list.html
index 917d06be..09b0a44a 100644
--- a/templates/items/expenses/expenses_list.html
+++ b/templates/items/expenses/expenses_list.html
@@ -1,16 +1,15 @@
 {% extends "base.html" %}
 {% load i18n static %}
-
-{% block title %}{{ _("Expenses") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Expenses") }}
+{% endblock title %}
 {% block content %}
-
     <div class="row mt-4">
-
         <div class="d-flex justify-content-between mb-2">
             <h3 class="">{% trans "Expenses" %} <span class="fas fa-money-bill-wave ms-2 text-primary"></span></h3>
             {% if perms.django_ledger.add_itemmodel %}
-            <a href="{% url 'item_expense_create' request.dealer.slug %}" class="btn btn-md btn-phoenix-primary"><i class="fa fa-plus me-2"></i>{% trans "Add Expense" %}</a>
+                <a href="{% url 'item_expense_create' request.dealer.slug %}"
+                   class="btn btn-md btn-phoenix-primary"><i class="fa fa-plus me-2"></i>{% trans "Add Expense" %}</a>
             {% endif %}
         </div>
         {% include "partials/search_box.html" %}
@@ -25,38 +24,21 @@
                             <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Action" %}</th>
                         </tr>
                     </thead>
-
                     <tbody class="list">
-
                         {% for expense in expenses %}
-
                             <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                                <td class="align-middle product white-space-nowrap px-1">
-                                    {{ expense.item_number }}
-                                </td>
-                                <td class="align-middle product white-space-nowrap">
-                                    {{ expense.name }}
-                                </td>
-                                <td class="align-middle product white-space-nowrap">
-                                    {{ expense.uom }}
-                                </td>
+                                <td class="align-middle product white-space-nowrap px-1">{{ expense.item_number }}</td>
+                                <td class="align-middle product white-space-nowrap">{{ expense.name }}</td>
+                                <td class="align-middle product white-space-nowrap">{{ expense.uom }}</td>
                                 <td class="align-middle product white-space-nowrap">
                                     {% if perms.django_ledger.change_itemmodel %}
-                                    <a href="{% url 'item_expense_update' request.dealer.slug expense.pk %}"
-                                       class="btn btn-sm btn-phoenix-success">
-                                        {% trans "Update" %}
-                                    </a>
+                                        <a href="{% url 'item_expense_update' request.dealer.slug expense.pk %}"
+                                           class="btn btn-sm btn-phoenix-success">{% trans "Update" %}</a>
                                     {% endif %}
                                 </td>
-                                <td class="align-middle product white-space-nowrap">
-
-                                </td>
-                                <td class="align-middle white-space-nowrap text-start">
-
-                                </td>
+                                <td class="align-middle product white-space-nowrap"></td>
+                                <td class="align-middle white-space-nowrap text-start"></td>
                             </tr>
-
-
                         {% empty %}
                             <tr>
                                 <td colspan="6" class="text-center text-muted">{% trans "No Accounts Found" %}</td>
@@ -66,15 +48,10 @@
                 </table>
             </div>
             {% if page_obj.paginator.num_pages > 1 %}
-
                 <div class="d-flex justify-content-end mt-3">
-
-                    <div class="d-flex">
-                        {% include 'partials/pagination.html'%}
-                    </div>
-
+                    <div class="d-flex">{% include 'partials/pagination.html' %}</div>
                 </div>
             {% endif %}
         {% endif %}
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/items/service/service_create.html b/templates/items/service/service_create.html
index 2e23d28b..85cebcb6 100644
--- a/templates/items/service/service_create.html
+++ b/templates/items/service/service_create.html
@@ -2,16 +2,14 @@
 {% load crispy_forms_filters %}
 {% load static %}
 {% load i18n %}
-
 {% block title %}
     {# Check if an 'object'  exists in the context #}
     {% if object %}
-        {% trans 'Update Service'%}
+        {% trans 'Update Service' %}
     {% else %}
-        {% trans 'Add New Service'%}
+        {% trans 'Add New Service' %}
     {% endif %}
 {% endblock %}
-
 {% block content %}
    
     <!---->
@@ -22,9 +20,9 @@
             <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
                     <h3 class="mb-0 fs-4 text-center">
                         {% if service.pk %}
-                           {{ _("Update Service") }}
+                            {{ _("Update Service") }}
                         {% else %}
-                           {{ _("Add Service") }}
+                            {{ _("Add Service") }}
                         {% endif %}
                         <span class="fas fa-tools ms-2 text-primary"></span>
                    </h3>
@@ -46,11 +44,6 @@
 
             </div>
         </div>
-
-       </div>
-
-   </div>
-
+    </div>
     <!---->
 {% endblock content %}
-
diff --git a/templates/items/service/service_list.html b/templates/items/service/service_list.html
index c37157e5..106e398b 100644
--- a/templates/items/service/service_list.html
+++ b/templates/items/service/service_list.html
@@ -1,16 +1,16 @@
 {% extends "base.html" %}
 {% load i18n static %}
-
-{% block title %}{{ _("Services") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Services") }}
+{% endblock title %}
 {% block content %}
     <div class="row mt-4">
-
         <div class="d-flex justify-content-between mb-2">
             <h3 class="">{% trans "Services" %}<span class="fas fa-tools text-primary ms-2"></span></h3>
             {% if perms.inventory.add_additionalservices %}
-            <a href="{% url 'item_service_create' request.dealer.slug %}" class="btn btn-md btn-phoenix-primary"><i class="fa fa-plus me-2"></i>{% trans "Add Service" %}</a>
-             {% endif %}
+                <a href="{% url 'item_service_create' request.dealer.slug %}"
+                   class="btn btn-md btn-phoenix-primary"><i class="fa fa-plus me-2"></i>{% trans "Add Service" %}</a>
+            {% endif %}
         </div>
         {% include "partials/search_box.html" %}
         {% if page_obj.object_list %}
@@ -26,38 +26,21 @@
                             <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Action" %}</th>
                         </tr>
                     </thead>
-
                     <tbody class="list">
-
                         {% for service in services %}
-
                             <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                                <td class="align-middle product white-space-nowrap px-1">
-                                    {{ service.pk }}
-                                </td>
-                                <td class="align-middle product white-space-nowrap">
-                                    {{ service.get_local_name|default:service.name }}
-                                </td>
-                                <td class="align-middle product white-space-nowrap">
-                                    {{ service.get_uom_display }}
-                                </td>
-                                <td class="align-middle product white-space-nowrap">
-                                    {{ service.taxable|yesno }}
-                                </td>
-                                <td class="align-middle product white-space-nowrap">
-                                    {{ service.item.co }}
-                                </td>
+                                <td class="align-middle product white-space-nowrap px-1">{{ service.pk }}</td>
+                                <td class="align-middle product white-space-nowrap">{{ service.get_local_name|default:service.name }}</td>
+                                <td class="align-middle product white-space-nowrap">{{ service.get_uom_display }}</td>
+                                <td class="align-middle product white-space-nowrap">{{ service.taxable|yesno }}</td>
+                                <td class="align-middle product white-space-nowrap">{{ service.item.co }}</td>
                                 <td class="align-middle white-space-nowrap text-start">
-                                     {% if perms.inventory.add_additionalservices %}
-                                    <a href="{% url 'item_service_update' request.dealer.slug service.pk %}"
-                                       class="btn btn-sm btn-phoenix-success">
-                                        {% trans "Update" %}
-                                    </a>
+                                    {% if perms.inventory.add_additionalservices %}
+                                        <a href="{% url 'item_service_update' request.dealer.slug service.pk %}"
+                                           class="btn btn-sm btn-phoenix-success">{% trans "Update" %}</a>
                                     {% endif %}
                                 </td>
                             </tr>
-
-
                         {% empty %}
                             <tr>
                                 <td colspan="6" class="text-center text-muted">{% trans "No Accounts Found" %}</td>
@@ -67,15 +50,10 @@
                 </table>
             </div>
             {% if page_obj.paginator.num_pages > 1 %}
-
                 <div class="d-flex justify-content-end mt-3">
-
-                    <div class="d-flex">
-                        {% include 'partials/pagination.html'%}
-                    </div>
-
+                    <div class="d-flex">{% include 'partials/pagination.html' %}</div>
                 </div>
             {% endif %}
         {% endif %}
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/ledger/bank_accounts/bank_account_delete.html b/templates/ledger/bank_accounts/bank_account_delete.html
index f20794a6..63793620 100644
--- a/templates/ledger/bank_accounts/bank_account_delete.html
+++ b/templates/ledger/bank_accounts/bank_account_delete.html
@@ -4,7 +4,5 @@
         <meta charset="UTF-8">
         <title>Title</title>
     </head>
-    <body>
-
-    </body>
-</html>
\ No newline at end of file
+    <body></body>
+</html>
diff --git a/templates/ledger/bank_accounts/bank_account_detail.html b/templates/ledger/bank_accounts/bank_account_detail.html
index 3513577b..880ffac9 100644
--- a/templates/ledger/bank_accounts/bank_account_detail.html
+++ b/templates/ledger/bank_accounts/bank_account_detail.html
@@ -1,11 +1,12 @@
 {% extends "base.html" %}
 {% load i18n %}
-
-{% block title %}{{ _("View Bank Account") }}{% endblock title %}
-
+{% block title %}
+    {{ _("View Bank Account") }}
+{% endblock title %}
 {% block content %}
     <!-- Delete Modal -->
-    <div class="modal fade" id="deleteModal"
+    <div class="modal fade"
+         id="deleteModal"
          data-bs-backdrop="static"
          data-bs-keyboard="false"
          tabindex="-1"
@@ -14,27 +15,22 @@
         <div class="modal-dialog modal-sm ">
             <div class="modal-content rounded">
                 <div class="modal-body d-flex justify-content-center">
-                    <h1 class="text-danger me-2"><i class="bi bi-exclamation-diamond-fill"></i></h1>
-                    <span class="text-danger">
-                        {% trans "Are you sure you want to delete this bank account?" %}
-                    </span>
+                    <h1 class="text-danger me-2">
+                        <i class="bi bi-exclamation-diamond-fill"></i>
+                    </h1>
+                    <span class="text-danger">{% trans "Are you sure you want to delete this bank account?" %}</span>
                 </div>
                 <div class="btn-group">
                     <button type="button"
                             class="btn btn-sm btn-phoenix-secondary"
-                            data-bs-dismiss="modal">
-                        {% trans 'No' %}
-                    </button>
+                            data-bs-dismiss="modal">{% trans 'No' %}</button>
                     <a type="button"
                        class="btn btn-sm btn-phoenix-danger"
-                       href="{% url 'bank_account_delete' request.dealer.slug bank_account.pk %}">
-                        {% trans 'Yes' %}
-                    </a>
+                       href="{% url 'bank_account_delete' request.dealer.slug bank_account.pk %}">{% trans 'Yes' %}</a>
                 </div>
             </div>
         </div>
     </div>
-
     <div class="row my-5">
         <div class="card rounded ">
             <div class="card-header bg-primary text-white ">
@@ -43,32 +39,39 @@
             <div class="card-body">
                 <div class="row">
                     <div class="col-md-6">
-                        <p><strong>{{ _("Bank Account Name") }}:</strong> {{ bank_account.name }}</p>
-                        <p><strong>{{ _("Cash Account") }}:</strong> {{ bank_account }}</p>
+                        <p>
+                            <strong>{{ _("Bank Account Name") }}:</strong> {{ bank_account.name }}
+                        </p>
+                        <p>
+                            <strong>{{ _("Cash Account") }}:</strong> {{ bank_account }}
+                        </p>
                     </div>
                     <div class="col-md-6">
-                        <p><strong>{{ _("Amount") }}:</strong> {{ bank_account.amount }}</p>
+                        <p>
+                            <strong>{{ _("Amount") }}:</strong> {{ bank_account.amount }}
+                        </p>
                     </div>
                 </div>
             </div>
             <div class="card-footer d-flex ">
-                {% if perms.django_ledger.change_bankaccountmodel%}
-                <a class="btn btn-sm btn-phoenix-primary me-1" href="{% url 'bank_account_update' request.dealer.slug bank_account.pk %}">
-                <!--<i class="bi bi-pencil-square"></i> -->
-                    {{ _("Edit") }}
-                </a>
+                {% if perms.django_ledger.change_bankaccountmodel %}
+                    <a class="btn btn-sm btn-phoenix-primary me-1"
+                       href="{% url 'bank_account_update' request.dealer.slug bank_account.pk %}">
+                        <!--<i class="bi bi-pencil-square"></i> -->
+                        {{ _("Edit") }}
+                    </a>
                 {% endif %}
-                {% if perms.django_ledger.delete_bankaccountmodel%}
-                <a class="btn btn-sm btn-phoenix-danger me-1"
-                   data-bs-toggle="modal"
-                   data-bs-target="#deleteModal">
-                <!--<i class="bi bi-trash-fill"></i>-->
-                    {{ _("Delete") }}
-                </a>
+                {% if perms.django_ledger.delete_bankaccountmodel %}
+                    <a class="btn btn-sm btn-phoenix-danger me-1"
+                       data-bs-toggle="modal"
+                       data-bs-target="#deleteModal">
+                        <!--<i class="bi bi-trash-fill"></i>-->
+                        {{ _("Delete") }}
+                    </a>
                 {% endif %}
                 <a class="btn btn-sm btn-phoenix-secondary"
                    href="{% url 'bank_account_list' request.dealer.slug %}">
-                <!--<i class="bi bi-arrow-left-square-fill"></i>-->
+                    <!--<i class="bi bi-arrow-left-square-fill"></i>-->
                     {% trans "Back to List" %}
                 </a>
             </div>
diff --git a/templates/ledger/bank_accounts/bank_account_form.html b/templates/ledger/bank_accounts/bank_account_form.html
index b05dcff4..58102a6a 100644
--- a/templates/ledger/bank_accounts/bank_account_form.html
+++ b/templates/ledger/bank_accounts/bank_account_form.html
@@ -4,21 +4,18 @@
 {% block title %}
     {# Check if an 'object'  exists in the context #}
     {% if object %}
-        {% trans 'Update Bank Account'%}
+        {% trans 'Update Bank Account' %}
     {% else %}
-        {% trans 'Add New Bank Account'%}
+        {% trans 'Add New Bank Account' %}
     {% endif %}
 {% endblock %}
-
-
 {% block content %}
 
     <!---->
-     <div class="row justify-content-center mt-5 mb-3">
-
-       <div class="col-lg-8 col-md-10">
-         <div class="card shadow-sm border-0 rounded-3">
-            <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
+    <div class="row justify-content-center mt-5 mb-3">
+        <div class="col-lg-8 col-md-10">
+            <div class="card shadow-sm border-0 rounded-3">
+                <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
                     <h3 class="mb-0 fs-4 text-center text-white">
                              {% if customer.created %}
                                 {{ _("Edit Bank Account") }}
@@ -48,10 +45,6 @@
 
             </div>
         </div>
-
-       </div>
-
-   </div>
-
+    </div>
     <!---->
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/ledger/bank_accounts/bank_account_list.html b/templates/ledger/bank_accounts/bank_account_list.html
index acbd9232..ee1aa459 100644
--- a/templates/ledger/bank_accounts/bank_account_list.html
+++ b/templates/ledger/bank_accounts/bank_account_list.html
@@ -1,11 +1,10 @@
 {% extends "base.html" %}
 {% load i18n static %}
-
-{% block title %}{{ _("Bank Accounts") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Bank Accounts") }}
+{% endblock title %}
 {% block content %}
     <div class="row mt-4">
-
         <div class="d-flex justify-content-between mb-2">
             <h3 class="">{% trans "Bank Accounts" %}<span class="fas fa-bank ms-2 text-primary"></span></h3>
             {% if perms.django_ledger.add_bankaccountmodel%}
@@ -23,53 +22,35 @@
                             <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Type" %}</th>
                             <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Action" %}</th>
                         </tr>
-
                     </thead>
                     <tbody class="list">
                         {% for bank in bank_accounts %}
                             <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                                 <td class="align-middle product white-space-nowrap px-1">
-                                    <a href="{% url 'bank_account_detail' request.dealer.slug bank.pk %}">
-                                        {{ bank.name }}
-                                    </a>
+                                    <a href="{% url 'bank_account_detail' request.dealer.slug bank.pk %}">{{ bank.name }}</a>
                                 </td>
+                                <td class="align-middle product white-space-nowrap">{{ bank.account_number }}</td>
+                                <td class="align-middle product white-space-nowrap">{{ bank.account_type|capfirst }}</td>
                                 <td class="align-middle product white-space-nowrap">
-                                    {{ bank.account_number }}
-                                </td>
-                                <td class="align-middle product white-space-nowrap">
-                                    {{ bank.account_type|capfirst }}
-                                </td>
-                                <td class="align-middle product white-space-nowrap">
-                                     {% if perms.django_ledger.change_bankaccountmodel%}
-                                    <a href="{% url 'bank_account_update' request.dealer.slug bank.pk %}"
-                                       class="btn btn-sm btn-phoenix-success">
-                                        {% trans "Update" %}
-                                    </a>
+                                    {% if perms.django_ledger.change_bankaccountmodel %}
+                                        <a href="{% url 'bank_account_update' request.dealer.slug bank.pk %}"
+                                           class="btn btn-sm btn-phoenix-success">{% trans "Update" %}</a>
                                     {% endif %}
                                 </td>
                             </tr>
-
                         {% empty %}
                             <tr>
                                 <td colspan="6" class="text-center text-muted">{% trans "No Accounts Found" %}</td>
                             </tr>
                         {% endfor %}
-
                     </tbody>
                 </table>
             </div>
             {% if page_obj.paginator.num_pages > 1 %}
                 <div class="d-flex justify-content-end mt-3">
-
-                    <div class="d-flex">
-                        {% include 'partials/pagination.html'%}
-                    </div>
-
+                    <div class="d-flex">{% include 'partials/pagination.html' %}</div>
                 </div>
             {% endif %}
         {% endif %}
-
     </div>
-
-
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/ledger/bills/bill_detail.html b/templates/ledger/bills/bill_detail.html
index f67ed3e9..49ac30db 100644
--- a/templates/ledger/bills/bill_detail.html
+++ b/templates/ledger/bills/bill_detail.html
@@ -1,253 +1,323 @@
 {% extends "base.html" %}
 {% load i18n %}
-
-{% block title %}{{ _("View Bill") }}{% endblock title %}
-
+{% block title %}
+    {{ _("View Bill") }}
+{% endblock title %}
 {% block content %}
-  <div class="modal fade" id="mark_as_approved_Modal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-sm">
-      <div class="modal-content">
-        <div class="modal-header bg-primary">
-          <h5 class="modal-title text-light" id="confirmModalLabel">{% trans 'Confirm' %}</h5>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body">
-          {% trans 'Are you sure' %}
-          <div class="modal-footer">
-            <button type="button"
-                    class="btn btn-sm btn-phoenix-danger"
-                    data-bs-dismiss="modal">
-              {% trans 'No' %}
-            </button>
-            <form id="confirmForm" method="POST" action="{% url 'bill_mark_as_approved' bill.pk %}" class="d-inline">
-              {% csrf_token %}
-              <button type="submit" class="btn btn-phoenix-success btn-sm">{% trans "Yes" %}</button>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-     <!-- ============================================-->      
-  <div class="modal fade" id="mark_as_paid_Modal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-sm">
-      <div class="modal-content">
-        <div class="modal-header bg-primary">
-          <h5 class="modal-title text-light" id="confirmModalLabel">{% trans 'Confirm' %}</h5>
-          <button type="button" class="btn-phoenix-close" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body">
-          {% trans 'Are you sure' %}
-          <div class="modal-footer">
-            <button type="button"
-                    class="btn btn-sm btn-phoenix-danger"
-                    data-bs-dismiss="modal">
-              {% trans 'No' %}
-            </button>
-            <form id="confirmForm" method="POST" action="{% url 'bill_mark_as_paid' bill.pk %}" class="d-inline">
-              {% csrf_token %}
-              <button type="submit" class="btn btn-phoenix-success btn-sm">{% trans "Yes" %}</button>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-     <!-- ============================================-->      
-      <!-- <section> begin ============================-->
-  <section class="pt-5 pb-9 bg-body-emphasis dark__bg-gray-1200 border-top">
-    <div class="row-small mt-3 mx-3">
-      <div class="d-flex justify-content-between align-items-end mb-4">
-        <h2 class="mb-0">{% trans 'Bill' %}</h2>
-        <div class="d-flex align-items-center gap-2">
-          {% if bill.is_draft %}
-            <a href="{% url 'in_review_bill' bill.pk %}" class="btn btn-phoenix-primary"><span class="d-none d-sm-inline-block">{% trans 'Review Bill' %}</span></a>
-          {% endif %}
-          {% if bill.is_review %}
-            <button id="mark_bill_as_approved" class="btn btn-phoenix-secondary" data-bs-toggle="modal" data-bs-target="#mark_as_approved_Modal"><span class="d-none d-sm-inline-block">{% trans 'Mark as Approved' %}</span></button>
-          {% endif %}
-          {% if bill.is_approved %}
-            <a href="{% url 'payment_create' bill.pk %}" class="btn btn-phoenix-primary"><span class="d-none d-sm-inline-block">{% trans 'Record Payment' %}</span></a>
-          {% endif %}
-          {% if bill.is_approved %}
-            <button id="mark_bill_as_paid" class="btn btn-phoenix-secondary" data-bs-toggle="modal" data-bs-target="#mark_as_paid_Modal"><span class="d-none d-sm-inline-block">{% trans 'Mark as Paid' %}</span></button>
-          {% endif %}
-        </div>
-      </div>
-
-            <!-- ============================================-->      
-      <div class="card mb-5">
-        <div class="card-body">
-          <div class="row g-4 g-xl-1 g-xxl-3 justify-content-between">
-            <div class="col-sm-auto">
-              <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center">
-                <div class="d-flex bg-success-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0" style="width:32px; height:32px"><span class="text-success-dark" data-feather="dollar-sign" style="width:24px; height:24px"></span></div>
-                <div>
-                  <p class="fw-bold mb-1">{% trans 'Paid Amount' %}</p>
-                  <h4 class="fw-bolder text-nowrap {% if bill.is_paid %}text-success{% endif %}">{{bill.amount_paid}} <span class="icon-saudi_riyal"></span></h4>
-                  <h6 class="fw-bolder text-nowrap">Owned <span class="fw-semibold text-nowrap text-success">{{bill.get_amount_open}} <span class="icon-saudi_riyal"></span></span></h6>
-                  <div class="progress" style="height:17px">
-                    <div class="progress-bar fw-semibold bg-{% if bill.get_progress_percent < 100 %}secondary{% else %}success{% endif %} rounded-2" role="progressbar" style="width: {{bill.get_progress_percent}}%" aria-valuenow="{{bill.get_progress_percent}}" aria-valuemin="0" aria-valuemax="100">{{bill.get_progress_percent}}%</div>
-                  </div>
+    <div class="modal fade"
+         id="mark_as_approved_Modal"
+         tabindex="-1"
+         aria-labelledby="confirmModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog modal-sm">
+            <div class="modal-content">
+                <div class="modal-header bg-primary">
+                    <h5 class="modal-title text-light" id="confirmModalLabel">{% trans 'Confirm' %}</h5>
+                    <button type="button"
+                            class="btn-close"
+                            data-bs-dismiss="modal"
+                            aria-label="Close"></button>
                 </div>
-              </div>
-            </div>
-            {% if 'net' in bill.terms %}
-              <div class="col-sm-auto">
-                <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center border-start-sm ps-sm-5 border-translucent">
-                  <div class="d-flex bg-primary-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0" style="width:32px; height:32px"><span class="text-primary-dark" data-feather="layout" style="width:24px; height:24px"></span></div>
-                  <div>
-                    <p class="fw-bold mb-1"></p>
-                    <div class="fs-9 text-body-secondary fw-semibold mb-0 d-sm-block d-inline-flex d-md-flex flex-xl-column ">
-                      <table>
-                        <tr>
-                          <td>{% trans 'Terms' %}:</td>
-                          <td><span class="badge rounded bg-success">{{bill.bill_number}}</span></td>
-                        </tr>
-                        <tr>
-                          <td>{% trans 'Date Due' %}:</td>
-                          <td><span class="badge rounded bg-success">{{bill.date_due}}</span></td>
-                        </tr>
-                        <tr>
-                          <td>{% trans 'Due in Days' %}:</td>
-                          <td>
-                            <span class="badge rounded bg-success">{{bill.due_in_days}}</span>
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>{% trans 'Is Past Due' %}:</td>
-                          <td>
-                            {% if bill.is_past_due %}
-                              <span class="badge rounded bg-danger">{% trans 'Yes' %}</span>
-                            {% else %}
-                              <span class="badge rounded bg-success">{% trans 'No' %}</span>
-                            {% endif %}
-                          </td>
-                        </tr>
-                      </table>
-
+                <div class="modal-body">
+                    {% trans 'Are you sure' %}
+                    <div class="modal-footer">
+                        <button type="button"
+                                class="btn btn-sm btn-phoenix-danger"
+                                data-bs-dismiss="modal">{% trans 'No' %}</button>
+                        <form id="confirmForm"
+                              method="POST"
+                              action="{% url 'bill_mark_as_approved' bill.pk %}"
+                              class="d-inline">
+                            {% csrf_token %}
+                            <button type="submit" class="btn btn-phoenix-success btn-sm">{% trans "Yes" %}</button>
+                        </form>
                     </div>
-                  </div>
                 </div>
-              </div>
-            {% endif %}
-            <div class="col-sm-auto">
-              <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center border-start-sm ps-sm-5 border-translucent">
-                <div class="d-flex bg-primary-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0" style="width:32px; height:32px"><span class="text-primary-dark" data-feather="layout" style="width:24px; height:24px"></span></div>
-                <div>
-                  <p class="fw-bold mb-1">{% trans 'Due Amount' %}</p>
-                  {% if bill.is_paid %}
-                    <h4 class="fw-bolder text-nowrap">{{bill.amount_due}} <span class="icon-saudi_riyal"></span></h4>
-                  {% else %}
-                    <h4 class="fw-bolder text-nowrap">{{bill.amount_due}} <span class="icon-saudi_riyal"></span></h4>
-                  {% endif %}
-                </div>
-              </div>
             </div>
-          </div>
         </div>
-      </div>
-             <!-- <section> begin ============================-->
-      <div class="bg-body dark__bg-gray-1100 p-4 mb-4 rounded-2 text-body-tertiary">
-        <div class="row g-4">
-          <div class="col-12 col-lg-3">
-            <div class="row g-4 g-lg-2">
-              <div class="col-12 col-sm-6 col-lg-12">
-                <div class="row align-items-center g-0">
-                  <div class="col-auto col-lg-6 col-xl-5">
-                    <h6 class="mb-0 me-3">{% trans "Bill Number" %} :</h6>
-                  </div>
-                  <div class="col-auto col-lg-6 col-xl-7">
-                    <p class="fs-9 text-body-secondary fw-semibold mb-0">#{{bill.bill_number}}</p>
-                  </div>
-                </div>
-              </div>
-              <div class="col-12 col-sm-6 col-lg-12">
-                <div class="row align-items-center g-0">
-                  <div class="col-auto col-lg-6 col-xl-5">
-                    <h6 class="me-3">{% trans "Bill Date" %} :</h6>
-                  </div>
-                  <div class="col-auto col-lg-6 col-xl-7">
-                    <p class="fs-9 text-body-secondary fw-semibold mb-0">{{bill.created}}</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-12 col-sm-6 col-lg-5">
-            <div class="row align-items-center g-0">
-              <div class="col-auto col-lg-6 col-xl-5">
-                <h6 class="mb-2 me-3">{% trans "Customer Name" %} :</h6>
-                <p class="fs-9 text-body-secondary fw-semibold mb-0">{{bill.vendor.vendor_name}}</p>
-              </div>
-            </div>
-          </div>
-          <div class="col-12 col-sm-6 col-lg-4">
-            <div class="row g-4">
-              <div class="col-12 col-lg-6">
-                <h6 class="mb-2"> {% trans "bill Status" %} :</h6>
-                <div class="fs-9 text-body-secondary fw-semibold mb-0">
-                  {% if bill.bill_status == 'draft' %}
-                    <span class="badge text-bg-warning">{% trans "Draft" %}</span>
-                  {% elif bill.bill_status == 'in_review' %}
-                    <span class="badge text-bg-info">{% trans "In Review" %}</span>
-                  {% elif bill.bill_status == 'approved' %}
-                    <span class="badge text-bg-info">{% trans "Approved" %}</span>
-                  {% elif bill.bill_status == 'declined' %}
-                    <span class="badge text-bg-danger">{% trans "Declined" %}</span>
-                  {% elif bill.bill_status == 'paid' %}
-                    <span class="badge text-bg-success">{% trans "Paid" %}</span>
-                  {% endif %}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="px-0">
-        <div class="table-responsive scrollbar">
-          <table id="bill-table" class="table fs-9 text-body mb-0">
-            <thead class="bg-body-secondary">
-              <tr>
-                <th scope="col" style="width: 24px;">#</th>
-                <th scope="col" style="min-width: 260px;">{% trans "Item" %}</th>
-                <th scope="col" style="min-width: 60px;">{% trans "Quantity" %}</th>
-                <th scope="col" style="min-width: 60px;">{% trans "Unit Price" %}</th>
-                <th scope="col" style="min-width: 60px;">{% trans "Total" %}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {% for transaction in transactions %}
-                <tr>
-                  <td class=""></td>
-                  <td class="">{{transaction.item.item_model.name}}</td>
-                  <td class="align-middle">{{transaction.item.quantity}}</td>
-                  <td class="align-middle ps-5">{{transaction.item.unit_cost}}</td>
-                  <td class="align-middle text-body-tertiary fw-semibold">{{transaction.total}}</td>
-                </tr>
-              {% endfor %}
-              <tr class="bg-body-secondary total-sum">
-                <td class="align-middle ps-4 fw-bolder text-body-highlight" colspan="4">{% trans "Vat Amount" %}</td>
-                <td class="align-middle text-start fw-bolder">
-                  <span id="grand-total">{{bill.additional_info.car_finance.vat_amount}}</span>
-                </td>
-              </tr>
-              <tr class="bg-body-secondary total-sum">
-                <td class="align-middle ps-4 fw-bolder text-body-highlight" colspan="4">{% trans "Grand Total" %}</td>
-                <td class="align-middle text-start fw-bolder">
-                  <span id="grand-total">{{grand_total}}</span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
     </div>
-  </section>
+    <!-- ============================================-->
+    <div class="modal fade"
+         id="mark_as_paid_Modal"
+         tabindex="-1"
+         aria-labelledby="confirmModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog modal-sm">
+            <div class="modal-content">
+                <div class="modal-header bg-primary">
+                    <h5 class="modal-title text-light" id="confirmModalLabel">{% trans 'Confirm' %}</h5>
+                    <button type="button"
+                            class="btn-phoenix-close"
+                            data-bs-dismiss="modal"
+                            aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    {% trans 'Are you sure' %}
+                    <div class="modal-footer">
+                        <button type="button"
+                                class="btn btn-sm btn-phoenix-danger"
+                                data-bs-dismiss="modal">{% trans 'No' %}</button>
+                        <form id="confirmForm"
+                              method="POST"
+                              action="{% url 'bill_mark_as_paid' bill.pk %}"
+                              class="d-inline">
+                            {% csrf_token %}
+                            <button type="submit" class="btn btn-phoenix-success btn-sm">{% trans "Yes" %}</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- ============================================-->
+    <!-- <section> begin ============================-->
+    <section class="pt-5 pb-9 bg-body-emphasis dark__bg-gray-1200 border-top">
+        <div class="row-small mt-3 mx-3">
+            <div class="d-flex justify-content-between align-items-end mb-4">
+                <h2 class="mb-0">{% trans 'Bill' %}</h2>
+                <div class="d-flex align-items-center gap-2">
+                    {% if bill.is_draft %}
+                        <a href="{% url 'in_review_bill' bill.pk %}"
+                           class="btn btn-phoenix-primary"><span class="d-none d-sm-inline-block">{% trans 'Review Bill' %}</span></a>
+                    {% endif %}
+                    {% if bill.is_review %}
+                        <button id="mark_bill_as_approved"
+                                class="btn btn-phoenix-secondary"
+                                data-bs-toggle="modal"
+                                data-bs-target="#mark_as_approved_Modal">
+                            <span class="d-none d-sm-inline-block">{% trans 'Mark as Approved' %}</span>
+                        </button>
+                    {% endif %}
+                    {% if bill.is_approved %}
+                        <a href="{% url 'payment_create' bill.pk %}"
+                           class="btn btn-phoenix-primary"><span class="d-none d-sm-inline-block">{% trans 'Record Payment' %}</span></a>
+                    {% endif %}
+                    {% if bill.is_approved %}
+                        <button id="mark_bill_as_paid"
+                                class="btn btn-phoenix-secondary"
+                                data-bs-toggle="modal"
+                                data-bs-target="#mark_as_paid_Modal">
+                            <span class="d-none d-sm-inline-block">{% trans 'Mark as Paid' %}</span>
+                        </button>
+                    {% endif %}
+                </div>
+            </div>
+            <!-- ============================================-->
+            <div class="card mb-5">
+                <div class="card-body">
+                    <div class="row g-4 g-xl-1 g-xxl-3 justify-content-between">
+                        <div class="col-sm-auto">
+                            <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center">
+                                <div class="d-flex bg-success-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0"
+                                     style="width:32px;
+                                            height:32px">
+                                    <span class="text-success-dark"
+                                          data-feather="dollar-sign"
+                                          style="width:24px;
+                                                 height:24px"></span>
+                                </div>
+                                <div>
+                                    <p class="fw-bold mb-1">{% trans 'Paid Amount' %}</p>
+                                    <h4 class="fw-bolder text-nowrap
+                                               {% if bill.is_paid %}text-success{% endif %}">
+                                        {{ bill.amount_paid }} <span class="icon-saudi_riyal"></span>
+                                    </h4>
+                                    <h6 class="fw-bolder text-nowrap">
+                                        Owned <span class="fw-semibold text-nowrap text-success">{{ bill.get_amount_open }} <span class="icon-saudi_riyal"></span></span>
+                                    </h6>
+                                    <div class="progress" style="height:17px">
+                                        <div class="progress-bar fw-semibold bg-
+                                                    {% if bill.get_progress_percent < 100 %}
+                                                        secondary
+                                                    {% else %}
+                                                        success
+                                                    {% endif %}
+                                                    rounded-2"
+                                             role="progressbar"
+                                             style="width: {{ bill.get_progress_percent }}%"
+                                             aria-valuenow="{{ bill.get_progress_percent }}"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100">{{ bill.get_progress_percent }}%</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        {% if 'net' in bill.terms %}
+                            <div class="col-sm-auto">
+                                <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center border-start-sm ps-sm-5 border-translucent">
+                                    <div class="d-flex bg-primary-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0"
+                                         style="width:32px;
+                                                height:32px">
+                                        <span class="text-primary-dark"
+                                              data-feather="layout"
+                                              style="width:24px;
+                                                     height:24px"></span>
+                                    </div>
+                                    <div>
+                                        <p class="fw-bold mb-1"></p>
+                                        <div class="fs-9 text-body-secondary fw-semibold mb-0 d-sm-block d-inline-flex d-md-flex flex-xl-column">
+                                            <table>
+                                                <tr>
+                                                    <td>{% trans 'Terms' %}:</td>
+                                                    <td>
+                                                        <span class="badge rounded bg-success">{{ bill.bill_number }}</span>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td>{% trans 'Date Due' %}:</td>
+                                                    <td>
+                                                        <span class="badge rounded bg-success">{{ bill.date_due }}</span>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td>{% trans 'Due in Days' %}:</td>
+                                                    <td>
+                                                        <span class="badge rounded bg-success">{{ bill.due_in_days }}</span>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td>{% trans 'Is Past Due' %}:</td>
+                                                    <td>
+                                                        {% if bill.is_past_due %}
+                                                            <span class="badge rounded bg-danger">{% trans 'Yes' %}</span>
+                                                        {% else %}
+                                                            <span class="badge rounded bg-success">{% trans 'No' %}</span>
+                                                        {% endif %}
+                                                    </td>
+                                                </tr>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        {% endif %}
+                        <div class="col-sm-auto">
+                            <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center border-start-sm ps-sm-5 border-translucent">
+                                <div class="d-flex bg-primary-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0"
+                                     style="width:32px;
+                                            height:32px">
+                                    <span class="text-primary-dark"
+                                          data-feather="layout"
+                                          style="width:24px;
+                                                 height:24px"></span>
+                                </div>
+                                <div>
+                                    <p class="fw-bold mb-1">{% trans 'Due Amount' %}</p>
+                                    {% if bill.is_paid %}
+                                        <h4 class="fw-bolder text-nowrap">
+                                            {{ bill.amount_due }} <span class="icon-saudi_riyal"></span>
+                                        </h4>
+                                    {% else %}
+                                        <h4 class="fw-bolder text-nowrap">
+                                            {{ bill.amount_due }} <span class="icon-saudi_riyal"></span>
+                                        </h4>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- <section> begin ============================-->
+            <div class="bg-body dark__bg-gray-1100 p-4 mb-4 rounded-2 text-body-tertiary">
+                <div class="row g-4">
+                    <div class="col-12 col-lg-3">
+                        <div class="row g-4 g-lg-2">
+                            <div class="col-12 col-sm-6 col-lg-12">
+                                <div class="row align-items-center g-0">
+                                    <div class="col-auto col-lg-6 col-xl-5">
+                                        <h6 class="mb-0 me-3">{% trans "Bill Number" %} :</h6>
+                                    </div>
+                                    <div class="col-auto col-lg-6 col-xl-7">
+                                        <p class="fs-9 text-body-secondary fw-semibold mb-0">#{{ bill.bill_number }}</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-12 col-sm-6 col-lg-12">
+                                <div class="row align-items-center g-0">
+                                    <div class="col-auto col-lg-6 col-xl-5">
+                                        <h6 class="me-3">{% trans "Bill Date" %} :</h6>
+                                    </div>
+                                    <div class="col-auto col-lg-6 col-xl-7">
+                                        <p class="fs-9 text-body-secondary fw-semibold mb-0">{{ bill.created }}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-12 col-sm-6 col-lg-5">
+                        <div class="row align-items-center g-0">
+                            <div class="col-auto col-lg-6 col-xl-5">
+                                <h6 class="mb-2 me-3">{% trans "Customer Name" %} :</h6>
+                                <p class="fs-9 text-body-secondary fw-semibold mb-0">{{ bill.vendor.vendor_name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-12 col-sm-6 col-lg-4">
+                        <div class="row g-4">
+                            <div class="col-12 col-lg-6">
+                                <h6 class="mb-2">{% trans "bill Status" %} :</h6>
+                                <div class="fs-9 text-body-secondary fw-semibold mb-0">
+                                    {% if bill.bill_status == 'draft' %}
+                                        <span class="badge text-bg-warning">{% trans "Draft" %}</span>
+                                    {% elif bill.bill_status == 'in_review' %}
+                                        <span class="badge text-bg-info">{% trans "In Review" %}</span>
+                                    {% elif bill.bill_status == 'approved' %}
+                                        <span class="badge text-bg-info">{% trans "Approved" %}</span>
+                                    {% elif bill.bill_status == 'declined' %}
+                                        <span class="badge text-bg-danger">{% trans "Declined" %}</span>
+                                    {% elif bill.bill_status == 'paid' %}
+                                        <span class="badge text-bg-success">{% trans "Paid" %}</span>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="px-0">
+                <div class="table-responsive scrollbar">
+                    <table id="bill-table" class="table fs-9 text-body mb-0">
+                        <thead class="bg-body-secondary">
+                            <tr>
+                                <th scope="col" style="width: 24px;">#</th>
+                                <th scope="col" style="min-width: 260px;">{% trans "Item" %}</th>
+                                <th scope="col" style="min-width: 60px;">{% trans "Quantity" %}</th>
+                                <th scope="col" style="min-width: 60px;">{% trans "Unit Price" %}</th>
+                                <th scope="col" style="min-width: 60px;">{% trans "Total" %}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for transaction in transactions %}
+                                <tr>
+                                    <td class=""></td>
+                                    <td class="">{{ transaction.item.item_model.name }}</td>
+                                    <td class="align-middle">{{ transaction.item.quantity }}</td>
+                                    <td class="align-middle ps-5">{{ transaction.item.unit_cost }}</td>
+                                    <td class="align-middle text-body-tertiary fw-semibold">{{ transaction.total }}</td>
+                                </tr>
+                            {% endfor %}
+                            <tr class="bg-body-secondary total-sum">
+                                <td class="align-middle ps-4 fw-bolder text-body-highlight" colspan="4">{% trans "Vat Amount" %}</td>
+                                <td class="align-middle text-start fw-bolder">
+                                    <span id="grand-total">{{ bill.additional_info.car_finance.vat_amount }}</span>
+                                </td>
+                            </tr>
+                            <tr class="bg-body-secondary total-sum">
+                                <td class="align-middle ps-4 fw-bolder text-body-highlight" colspan="4">{% trans "Grand Total" %}</td>
+                                <td class="align-middle text-start fw-bolder">
+                                    <span id="grand-total">{{ grand_total }}</span>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </section>
 {% endblock %}
-
 {% block customJS %}
-  <script>
+    <script>
     function calculateTotals() {
       const table = document.getElementById('estimate-table');
       const rows = table.getElementsByTagName('tbody')[0].rows;
@@ -274,6 +344,5 @@
 
     // Run the function on page load
     window.onload = calculateTotals;
-  </script>
-
-{% endblock %}
\ No newline at end of file
+    </script>
+{% endblock %}
diff --git a/templates/ledger/bills/bill_form-copy.html b/templates/ledger/bills/bill_form-copy.html
index 0953eea2..a69f95c0 100644
--- a/templates/ledger/bills/bill_form-copy.html
+++ b/templates/ledger/bills/bill_form-copy.html
@@ -1,9 +1,9 @@
 {% extends "base.html" %}
 {% load crispy_forms_filters %}
 {% load i18n static %}
-
-{% block title %}{{ _("Create Bill") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Create Bill") }}
+{% endblock title %}
 {% block content %}
     <div class="row mt-4">
         <h3 class="text-center">{% trans "Create Bill" %}</h3>
@@ -17,13 +17,15 @@
                         <div class="form-row row g-3 mb-3 mt-5">
                             <div class="mb-2 col-sm-4">
                                 <select class="form-control item" name="item[]" required>
-                                    {% for item in items %}
-                                        <option value="{{ item.product.pk }}">{{item.car.vin}} - {{ item.car }}</option>
-                                    {% endfor %}
+                                    {% for item in items %}<option value="{{ item.product.pk }}">{{ item.car.vin }} - {{ item.car }}</option>{% endfor %}
                                 </select>
                             </div>
                             <div class="mb-2 col-sm-2">
-                                <input class="form-control quantity" type="number" placeholder="Quantity" name="quantity[]" required>
+                                <input class="form-control quantity"
+                                       type="number"
+                                       placeholder="Quantity"
+                                       name="quantity[]"
+                                       required>
                             </div>
                             <div class="mb-2 col-sm-1">
                                 <button class="btn btn-phoenix-danger removeBtn">Remove</button>
@@ -35,18 +37,17 @@
                     </div>
                 </div>
             </div>
-
-        <!-- Buttons -->
-
+            <!-- Buttons -->
             <div class="d-flex mt-5 justify-content-center">
-                <button class="btn btn-sm btn-phoenix-success me-2" type="submit"><i class="fa-solid fa-floppy-disk me-1"></i>{{ _("Save") }}</button>
-                <a href="{{request.META.HTTP_REFERER}}" class="btn btn-sm btn-phoenix-danger"><i class="fa-solid fa-ban me-1"></i>{% trans "Cancel" %}</a>
+                <button class="btn btn-sm btn-phoenix-success me-2" type="submit">
+                    <i class="fa-solid fa-floppy-disk me-1"></i>{{ _("Save") }}
+                </button>
+                <a href="{{ request.META.HTTP_REFERER }}"
+                   class="btn btn-sm btn-phoenix-danger"><i class="fa-solid fa-ban me-1"></i>{% trans "Cancel" %}</a>
             </div>
-
         </form>
     </div>
 {% endblock content %}
-
 {% block customJS %}
     <script>
         const Toast = Swal.mixin({
@@ -157,4 +158,4 @@
             }
         });
     </script>
-{% endblock customJS %}
\ No newline at end of file
+{% endblock customJS %}
diff --git a/templates/ledger/bills/bill_form.html b/templates/ledger/bills/bill_form.html
index e1ab21ae..22d62107 100644
--- a/templates/ledger/bills/bill_form.html
+++ b/templates/ledger/bills/bill_form.html
@@ -1,23 +1,23 @@
 {% extends "base.html" %}
 {% load crispy_forms_filters %}
 {% load i18n static %}
-
-{% block title %}{{ _("Create Bill") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Create Bill") }}
+{% endblock title %}
 {% block content %}
     <div class="row mt-4">
         <h3 class="text-center">{% trans "Create Bill" %}<span class="fas fa-money-bills ms-2 text-primary"></span></h3>
         <form id="mainForm" method="post" class="needs-validation">
             {% csrf_token %}
-            <div class="row g-3">
-                {{ form|crispy }}
-            </div>
-        <!-- Buttons -->
+            <div class="row g-3">{{ form|crispy }}</div>
+            <!-- Buttons -->
             <div class="d-flex mt-5 justify-content-center">
-                <button class="btn btn-sm btn-phoenix-success me-2" type="submit"><i class="fa-solid fa-floppy-disk me-1"></i>{{ _("Save") }}</button>
-                <a href="{{request.META.HTTP_REFERER}}" class="btn btn-sm btn-phoenix-danger"><i class="fa-solid fa-ban me-1"></i>{% trans "Cancel" %}</a>
+                <button class="btn btn-sm btn-phoenix-success me-2" type="submit">
+                    <i class="fa-solid fa-floppy-disk me-1"></i>{{ _("Save") }}
+                </button>
+                <a href="{{ request.META.HTTP_REFERER }}"
+                   class="btn btn-sm btn-phoenix-danger"><i class="fa-solid fa-ban me-1"></i>{% trans "Cancel" %}</a>
             </div>
-
         </form>
     </div>
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
diff --git a/templates/ledger/bills/bill_list.html b/templates/ledger/bills/bill_list.html
index bb53efe6..676b509f 100644
--- a/templates/ledger/bills/bill_list.html
+++ b/templates/ledger/bills/bill_list.html
@@ -10,24 +10,17 @@
     </a>
 {% endblock %}
 {% block content %}
-
     <div class="row mt-4">
         <div class="d-flex justify-content-between mb-2">
             <h3 class="">{% trans "Bills" %}<span class="fas fa-money-bills ms-2 text-primary"></span></h3>
             {% if perms.django_ledger.add_billmodel %}
-            <a href="{% url 'bill-create' request.dealer.slug entity.slug %}" class="btn btn-md btn-phoenix-primary"><i class="fa fa-plus me-2"></i>{% trans 'New Bill' %}</a>
-             {% endif %}
+                <a href="{% url 'bill-create' request.dealer.slug entity.slug %}"
+                   class="btn btn-md btn-phoenix-primary"><i class="fa fa-plus me-2"></i>{% trans 'New Bill' %}</a>
+            {% endif %}
         </div>
-
         <div class="col-auto">
-           <div class="d-flex">
-              {% include 'partials/search_box.html' %}
-           </div>
+            <div class="d-flex">{% include 'partials/search_box.html' %}</div>
         </div>
-
-
-
-
         <div class="table-responsive px-1 scrollbar mt-3">
             <table class="table align-items-center table-flush">
                 <thead>
@@ -35,66 +28,61 @@
                         <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Bill Number' %}</th>
                         <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Bill Status' %}</th>
                         <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Vendor' %}</th>
-                        <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Action'%}</th>
+                        <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Action' %}</th>
                     </tr>
                 </thead>
-
                 <tbody class="list">
                     {% for bill in bills %}
-
                         <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                            <td class="align-middle product white-space-nowrap px-1">
-                                {{ bill.bill_number }}
-                            </td>
+                            <td class="align-middle product white-space-nowrap px-1">{{ bill.bill_number }}</td>
                             <td class="align-middle product white-space-nowrap">
                                 {% if bill.is_draft %}
                                     <span class="badge badge-phoenix badge-phoenix-warning">
-                                {% elif bill.is_review %}
-                                    <span class="badge badge-phoenix badge-phoenix-info">
-                                {% elif bill.is_approved %}
-                                    <span class="badge badge-phoenix badge-phoenix-success">
-                                {% elif bill.is_paid %}
-                                    <span class="badge badge-phoenix badge-phoenix-success">
-                                {% elif bill.is_canceled %}
-                                    <span class="badge badge-phoenix badge-phoenix-danger">
-                                {% endif %}
-                                {{ bill.bill_status }}
-                            </span>
-                        </td>
-                        <td class="align-middle product white-space-nowrap">
-                            {{bill.vendor.vendor_name}}
-                        </td>
-                        <td class="align-middle product white-space-nowrap">
-                            {% if perms.django_ledger.view_billmodel %}
-                            <div class="btn-reveal-trigger position-static">
-                                <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
-                                <div class="dropdown-menu dropdown-menu-end py-2">
-                                    <a href="{% url 'bill-detail' dealer_slug=request.dealer.slug entity_slug=entity.slug bill_pk=bill.pk %}" class="dropdown-item text-success-dark">{% trans 'View' %}</a>
-                                </div>
+                                    {% elif bill.is_review %}
+                                        <span class="badge badge-phoenix badge-phoenix-info">
+                                        {% elif bill.is_approved %}
+                                            <span class="badge badge-phoenix badge-phoenix-success">
+                                            {% elif bill.is_paid %}
+                                                <span class="badge badge-phoenix badge-phoenix-success">
+                                                {% elif bill.is_canceled %}
+                                                    <span class="badge badge-phoenix badge-phoenix-danger">
+                                                    {% endif %}
+                                                    {{ bill.bill_status }}
+                                                </span>
+                                            </td>
+                                            <td class="align-middle product white-space-nowrap">{{ bill.vendor.vendor_name }}</td>
+                                            <td class="align-middle product white-space-nowrap">
+                                                {% if perms.django_ledger.view_billmodel %}
+                                                    <div class="btn-reveal-trigger position-static">
+                                                        <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
+                                                                type="button"
+                                                                data-bs-toggle="dropdown"
+                                                                data-boundary="window"
+                                                                aria-haspopup="true"
+                                                                aria-expanded="false"
+                                                                data-bs-reference="parent">
+                                                            <span class="fas fa-ellipsis-h fs-10"></span>
+                                                        </button>
+                                                        <div class="dropdown-menu dropdown-menu-end py-2">
+                                                            <a href="{% url 'bill-detail' dealer_slug=request.dealer.slug entity_slug=entity.slug bill_pk=bill.pk %}"
+                                                               class="dropdown-item text-success-dark">{% trans 'View' %}</a>
+                                                        </div>
+                                                    </div>
+                                                {% endif %}
+                                            </td>
+                                        </tr>
+                                    {% empty %}
+                                        <tr>
+                                            <td colspan="5" class="text-center text-muted">{% trans 'No bill found.' %}</td>
+                                        </tr>
+                                    {% endfor %}
+                                </tbody>
+                            </table>
+                        </div>
+                        {% if page_obj.paginator.num_pages > 1 %}
+                            <div class="d-flex justify-content-end mt-3">
+                                <div class="d-flex">{% include 'partials/pagination.html' %}</div>
                             </div>
-                            {% endif %}
-                        </td>
-                        </tr>
-                    {% empty %}
-                        <tr>
-                            <td colspan="5" class="text-center text-muted">
-                                {% trans 'No bill found.' %}
-                            </td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-        </div>
-        {% if page_obj.paginator.num_pages > 1 %}
-
-            <div class="d-flex justify-content-end mt-3">
-
-                <div class="d-flex">
-                    {% include 'partials/pagination.html'%}
-                </div>
-
-            </div>
-        {% endif %}
-    </div>
-
-{% endblock %}
+                        {% endif %}
+                    </div>
+                {% endblock %}
diff --git a/templates/ledger/bills/bill_update_form.html b/templates/ledger/bills/bill_update_form.html
index 35168e22..120578bf 100644
--- a/templates/ledger/bills/bill_update_form.html
+++ b/templates/ledger/bills/bill_update_form.html
@@ -1,7 +1,9 @@
 {% extends 'base.html' %}
 {% load i18n %}
 {% load crispy_forms_filters %}
-{% block title %}{% trans "Bill" %}{% endblock title %}
+{% block title %}
+    {% trans "Bill" %}
+{% endblock title %}
 {% block content %}
     <div class="row my-4">
         <h2>{% trans "Bill" %}</h2>
@@ -15,7 +17,8 @@
                     {% trans "Save" %}
                 {% endif %}
             </button>
-            <a href="{% url 'bill_detail' pk=bill.pk %}" class="btn btn-sm btn-phoenix-secondary">{% trans "Cancel" %}</a>
+            <a href="{% url 'bill_detail' pk=bill.pk %}"
+               class="btn btn-sm btn-phoenix-secondary">{% trans "Cancel" %}</a>
         </form>
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/ledger/coa_accounts/account_detail.html b/templates/ledger/coa_accounts/account_detail.html
index d5c12fae..1411f909 100644
--- a/templates/ledger/coa_accounts/account_detail.html
+++ b/templates/ledger/coa_accounts/account_detail.html
@@ -1,161 +1,160 @@
 {% extends 'base.html' %}
 {% load i18n %}
-
-{% block title %}
-  {{ page_title }}
-{% endblock %}
-
+{% block title %}{{ page_title }}{% endblock %}
 {% block content %}
-
-  <div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-sm">
-      <div class="modal-content rounded">
-        <div class="modal-body d-flex justify-content-center">
-          <h1 class="text-danger me-2"><i class="bi bi-exclamation-diamond-fill"></i></h1>
-          <span class="text-danger">{% trans 'Are you sure you want to delete this account?' %}</span>
+    <div class="modal fade"
+         id="deleteModal"
+         data-bs-backdrop="static"
+         data-bs-keyboard="false"
+         tabindex="-1"
+         aria-labelledby="deleteModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog modal-sm">
+            <div class="modal-content rounded">
+                <div class="modal-body d-flex justify-content-center">
+                    <h1 class="text-danger me-2">
+                        <i class="bi bi-exclamation-diamond-fill"></i>
+                    </h1>
+                    <span class="text-danger">{% trans 'Are you sure you want to delete this account?' %}</span>
+                </div>
+                <div class="btn-group">
+                    <button type="button"
+                            class="btn btn-sm btn-phoenix-secondary"
+                            data-bs-dismiss="modal">{% trans 'No' %}</button>
+                    <div class="btn btn-sm btn-phoenix-danger">
+                        <form action="{% url 'account_delete' request.dealer.slug account.pk %}"
+                              method="post">
+                            {% csrf_token %}
+                            <button type="submit" class="btn btn-sm btn-phoenix-danger">{% trans 'Yes' %}</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
         </div>
-        <div class="btn-group">
-          <button type="button" class="btn btn-sm btn-phoenix-secondary" data-bs-dismiss="modal">{% trans 'No' %}</button>
-          <div class="btn btn-sm btn-phoenix-danger">
-            <form action="{% url 'account_delete' request.dealer.slug account.pk %}" method="post">
-              {% csrf_token %}
-              <button type="submit" class="btn btn-sm btn-phoenix-danger">{% trans 'Yes' %}</button>
-            </form>
-          </div>
-        </div>
-      </div>
     </div>
-  </div>
-
-  <div class="row my-3">
-    <div class="">
-      <div class="">
-        <p class="mb-3"></p>
-      </div>
-      <div class="">
-        <div class="row">
-          <div class="col-md-6">
-            <p>
-              <strong>{{ _('Account Name') }}:</strong> {{ account.name }}
-            </p>
-            <p>
-              <strong>{{ _('Account Code') }}:</strong> {{ account.code }}
-            </p>
-          </div>
-          <div class="col-md-6">
-            <p>
-              {% if account.balance_type == 'debit' %}
-                <strong>{{ _('Balance Type') }}:</strong><div class="badge badge-phoenix fs-10 badge-phoenix-success"> <span class="fw-bold">{{ _("Debit") }}</span><span class="ms-1 fas fa-arrow-circle-down"></span></div>
-              {% else %}
-                <strong>{{ _('Balance Type') }}:</strong><div class="badge badge-phoenix fs-10 badge-phoenix-danger"> <span class="fw-bold">{{ _("Credit") }}</span><span class="ms-1 fas fa-arrow-circle-up"></span></div>
-              {% endif %}
-
-            </p>
-            <p>
-              <strong>{{ _('Active') }}:</strong> {{ account.active }}
-            </p>
-          </div>
+    <div class="row my-3">
+        <div class="">
+            <div class="">
+                <p class="mb-3"></p>
+            </div>
+            <div class="">
+                <div class="row">
+                    <div class="col-md-6">
+                        <p>
+                            <strong>{{ _("Account Name") }}:</strong> {{ account.name }}
+                        </p>
+                        <p>
+                            <strong>{{ _("Account Code") }}:</strong> {{ account.code }}
+                        </p>
+                    </div>
+                    <div class="col-md-6">
+                        <p>
+                            {% if account.balance_type == 'debit' %}
+                                <strong>{{ _("Balance Type") }}:</strong>
+                                <div class="badge badge-phoenix fs-10 badge-phoenix-success">
+                                    <span class="fw-bold">{{ _("Debit") }}</span><span class="ms-1 fas fa-arrow-circle-down"></span>
+                                </div>
+                            {% else %}
+                                <strong>{{ _("Balance Type") }}:</strong>
+                                <div class="badge badge-phoenix fs-10 badge-phoenix-danger">
+                                    <span class="fw-bold">{{ _("Credit") }}</span><span class="ms-1 fas fa-arrow-circle-up"></span>
+                                </div>
+                            {% endif %}
+                        </p>
+                        <p>
+                            <strong>{{ _("Active") }}:</strong> {{ account.active }}
+                        </p>
+                    </div>
+                </div>
+                <div class="row mt-4">
+                    <div class="table-responsive px-1 scrollbar mt-3">
+                        <table class="table align-items-center table-flush">
+                            <thead>
+                                <tr class="bg-body-highlight">
+                                    <th class="sort white-space-nowrap align-middle" scope="col">{{ _("JE Number") }}</th>
+                                    <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Date") }}</th>
+                                    <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Debit") }}</th>
+                                    <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Credit") }}</th>
+                                    <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Description") }}</th>
+                                    <th class="sort white-space-nowrap align-middle" scope="col">{{ _("Actions") }}</th>
+                                </tr>
+                            </thead>
+                            <tbody class="list">
+                                {% for tx in account.transactionmodel_set.all %}
+                                    <tr class="hover-actions-trigger btn-reveal-trigger position-static">
+                                        <td class="align-middle product white-space-nowrap">{{ tx.journal_entry.je_number }}</td>
+                                        <td class="align-middle product white-space-nowrap">{{ tx.journal_entry.timestamp }}</td>
+                                        <td class="align-middle product white-space-nowrap">
+                                            {% if tx.tx_type == 'debit' %}<i class="fa-solid fa-circle-up"></i> {{ tx.amount }}{% endif %}
+                                        </td>
+                                        <td class="align-middle product white-space-nowrap">
+                                            {% if tx.tx_type == 'credit' %}<i class="fa-solid fa-circle-down"></i> {{ tx.amount }}{% endif %}
+                                        </td>
+                                        <td class="align-middle product white-space-nowrap">
+                                            {% if tx.description %}{{ tx.description }}{% endif %}
+                                        </td>
+                                        <td class="align-middle white-space-nowrap text-start">
+                                            {% if perms.django_ledger.view_transactionmodel %}
+                                                <div class="btn-reveal-trigger position-static">
+                                                    <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
+                                                            type="button"
+                                                            data-bs-toggle="dropdown"
+                                                            data-boundary="window"
+                                                            aria-haspopup="true"
+                                                            aria-expanded="false"
+                                                            data-bs-reference="parent">
+                                                        <span class="fas fa-ellipsis-h fs-10"></span>
+                                                    </button>
+                                                    <div class="dropdown-menu dropdown-menu-end py-2">
+                                                        <a class="dropdown-item text-success-dark"
+                                                           href="{% url 'payment_details' request.dealer.slug tx.journal_entry.pk %}">{% trans 'view Transactions'|capfirst %}</a>
+                                                    </div>
+                                                </div>
+                                            {% endif %}
+                                        </td>
+                                    </tr>
+                                {% endfor %}
+                                <tr class="hover-actions-trigger btn-reveal-trigger position-static">
+                                    <td class="align-middle product white-space-nowrap"></td>
+                                    <td class="align-middle product white-space-nowrap">
+                                        <span class="fw-bold fs-8">{{ _("Total") }}</span>
+                                    </td>
+                                    <td class="align-middle product white-space-nowrap">
+                                        <span class="fw-bold fs-8 text-success">{{ total_debits }} <span class="icon-saudi_riyal"></span></span>
+                                    </td>
+                                    <td class="align-middle product white-space-nowrap">
+                                        <span class="fw-bold fs-8 text-danger">{{ total_credits }} <span class="icon-saudi_riyal"></span></span>
+                                    </td>
+                                    <td class="align-middle product white-space-nowrap"></td>
+                                    <td class="align-middle white-space-nowrap text-start"></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <div class="mt-3 d-flex">
+                    {% if perms.django_ledger.change_chartofaccountmodel %}
+                        <a class="btn btn-sm btn-phoenix-primary me-1"
+                           href="{% url 'account_update' request.dealer.slug account.pk %}">
+                            <!-- <i class="bi bi-pencil-square"></i> -->
+                            <i class="fa-solid fa-pen-to-square"></i> {{ _("Edit") }}
+                        </a>
+                    {% endif %}
+                    {% if perms.django_ledger.delete_chartofaccountmodel %}
+                        <a class="btn btn-sm btn-phoenix-danger me-1"
+                           data-bs-toggle="modal"
+                           data-bs-target="#deleteModal">
+                            <!-- <i class="bi bi-trash-fill"></i> -->
+                            <i class="fa-solid fa-trash"></i> {{ _("Delete") }}
+                        </a>
+                    {% endif %}
+                    <a class="btn btn-sm btn-phoenix-secondary"
+                       href="{% url 'account_list' request.dealer.slug %}">
+                        <!-- <i class="bi bi-arrow-left-square-fill"></i> -->
+                        <i class="fa-regular fa-circle-left"></i> {% trans 'Back to COA List' %}
+                    </a>
+                </div>
+            </div>
         </div>
-
-        <div class="row mt-4">
-
-          <div class="table-responsive px-1 scrollbar mt-3">
-            <table class="table align-items-center table-flush">
-              <thead>
-                <tr class="bg-body-highlight">
-                  <th class="sort white-space-nowrap align-middle" scope="col">{{ _('JE Number') }}</th>
-                  <th class="sort white-space-nowrap align-middle" scope="col">{{ _('Date') }}</th>
-                  <th class="sort white-space-nowrap align-middle" scope="col">{{ _('Debit') }}</th>
-                  <th class="sort white-space-nowrap align-middle" scope="col">{{ _('Credit') }}</th>
-                  <th class="sort white-space-nowrap align-middle" scope="col">{{ _('Description') }}</th>
-                  <th class="sort white-space-nowrap align-middle" scope="col">{{ _('Actions') }}</th>
-                </tr>
-              </thead>
-              <tbody class="list">
-                {% for tx in account.transactionmodel_set.all %}
-                  <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                    <td class="align-middle product white-space-nowrap">
-                      {{ tx.journal_entry.je_number }}
-                    </td>
-                    <td class="align-middle product white-space-nowrap">
-                      {{ tx.journal_entry.timestamp }}
-                    </td>
-                    <td class="align-middle product white-space-nowrap">
-                      {% if tx.tx_type == 'debit' %}
-                        <i class="fa-solid fa-circle-up"></i> {{ tx.amount }}
-                      {% endif %}
-                    </td>
-                    <td class="align-middle product white-space-nowrap">
-                      {% if tx.tx_type == 'credit' %}
-                        <i class="fa-solid fa-circle-down"></i> {{ tx.amount }}
-                      {% endif %}
-                    </td>
-                    <td class="align-middle product white-space-nowrap">
-                      {% if tx.description %}
-                        {{ tx.description }}
-                      {% endif %}
-                    </td>
-                    <td class="align-middle white-space-nowrap text-start">
-                      {% if perms.django_ledger.view_transactionmodel%}
-                      <div class="btn-reveal-trigger position-static">
-                        <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
-                        <div class="dropdown-menu dropdown-menu-end py-2">
-                          <a class="dropdown-item text-success-dark" href="{% url 'payment_details' request.dealer.slug tx.journal_entry.pk %}">{% trans 'view Transactions'|capfirst %}</a>
-                        </div>
-                      </div>
-                      {% endif %}
-                    </td>
-                  </tr>
-                {% endfor %}
-
-                <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                  <td class="align-middle product white-space-nowrap">
-
-                  </td>
-                  <td class="align-middle product white-space-nowrap">
-                    <span class="fw-bold fs-8">{{ _("Total") }}</span>
-                  </td>
-                  <td class="align-middle product white-space-nowrap">
-                    <span class="fw-bold fs-8 text-success">{{ total_debits }} <span class="icon-saudi_riyal"></span></span>
-                  </td>
-                  <td class="align-middle product white-space-nowrap">
-                    <span class="fw-bold fs-8 text-danger">{{ total_credits }} <span class="icon-saudi_riyal"></span></span>
-                  </td>
-                  <td class="align-middle product white-space-nowrap">
-
-                  </td>
-                  <td class="align-middle white-space-nowrap text-start">
-
-                  </td>
-                </tr>
-
-              </tbody>
-            </table>
-          </div>
-
-
-        </div>
-
-        <div class="mt-3 d-flex">
-          {% if perms.django_ledger.change_chartofaccountmodel%}
-          <a class="btn btn-sm btn-phoenix-primary me-1" href="{% url 'account_update' request.dealer.slug account.pk %}">
-          <!-- <i class="bi bi-pencil-square"></i> -->
-            <i class="fa-solid fa-pen-to-square"></i> {{ _('Edit') }}
-          </a>
-          {% endif %}
-           {% if perms.django_ledger.delete_chartofaccountmodel%}
-          <a class="btn btn-sm btn-phoenix-danger me-1" data-bs-toggle="modal" data-bs-target="#deleteModal">
-          <!-- <i class="bi bi-trash-fill"></i> -->
-            <i class="fa-solid fa-trash"></i> {{ _('Delete') }}
-          </a>
-          {% endif%}
-          <a class="btn btn-sm btn-phoenix-secondary" href="{% url 'account_list' request.dealer.slug %}">
-          <!-- <i class="bi bi-arrow-left-square-fill"></i> -->
-            <i class="fa-regular fa-circle-left"></i> {% trans 'Back to COA List' %}
-          </a>
-        </div>
-
-      </div>
-    </div>
-  <!--test-->
-{% endblock %}
+        <!--test-->
+    {% endblock %}
diff --git a/templates/ledger/coa_accounts/account_form.html b/templates/ledger/coa_accounts/account_form.html
index 428e6cb7..97a3b92b 100644
--- a/templates/ledger/coa_accounts/account_form.html
+++ b/templates/ledger/coa_accounts/account_form.html
@@ -1,16 +1,14 @@
 {% extends "base.html" %}
 {% load i18n %}
 {% load crispy_forms_filters %}
-
 {% block title %}
     {# Check if an 'object'  exists in the context #}
     {% if object %}
-        {% trans 'Update Account'%}
+        {% trans 'Update Account' %}
     {% else %}
-        {% trans 'Add New Account'%}
+        {% trans 'Add New Account' %}
     {% endif %}
 {% endblock %}
-
 {% block content %}
 
     <div class="row justify-content-center mt-5 mb-3">
@@ -54,9 +52,6 @@
 
             </div>
         </div>
-
-       </div>
-
-   </div>
+    </div>
     <!---->
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/ledger/coa_accounts/account_list.html b/templates/ledger/coa_accounts/account_list.html
index 5779a974..50c6b9b0 100644
--- a/templates/ledger/coa_accounts/account_list.html
+++ b/templates/ledger/coa_accounts/account_list.html
@@ -1,6 +1,8 @@
 {% extends "base.html" %}
 {% load i18n custom_filters %}
-{% block title %}{% trans "Accounts" %}{% endblock title %}
+{% block title %}
+    {% trans "Accounts" %}
+{% endblock title %}
 {% block accounts %}
     <a class="nav-link active fw-bold">
         {% trans "Accounts"|capfirst %}
@@ -12,87 +14,143 @@
         <div class="d-flex justify-content-between mb-2">
             <h3 class=""> {% trans "Accounts" %}<i class="fa-solid fa-book ms-2 text-primary"></i></h3>
             {% if perms.django_ledger.add_chartofaccountmodel %}
-            <a href="{% url 'account_create' request.dealer.slug %}" class="btn btn-md btn-phoenix-primary"><i class="fa fa-plus me-2"></i>{% trans 'New Account' %}</a>
+                <a href="{% url 'account_create' request.dealer.slug %}"
+                   class="btn btn-md btn-phoenix-primary"><i class="fa fa-plus me-2"></i>{% trans 'New Account' %}</a>
             {% endif %}
         </div>
-
         <!-- Account Type Tabs -->
         <div class="mb-4">
             <ul class="nav nav-tabs" id="accountTypeTabs" role="tablist">
                 <li class="nav-item" role="presentation">
-                    <button class="nav-link active" id="assets-tab" data-bs-toggle="tab" data-bs-target="#assets" type="button" role="tab" aria-controls="assets" aria-selected="true">
+                    <button class="nav-link active"
+                            id="assets-tab"
+                            data-bs-toggle="tab"
+                            data-bs-target="#assets"
+                            type="button"
+                            role="tab"
+                            aria-controls="assets"
+                            aria-selected="true">
                         <i class="fas fa-wallet me-2"></i>{% trans "Assets" %}
                     </button>
                 </li>
                 <li class="nav-item" role="presentation">
-                    <button class="nav-link" id="cogs-tab" data-bs-toggle="tab" data-bs-target="#cogs" type="button" role="tab" aria-controls="cogs" aria-selected="false">
+                    <button class="nav-link"
+                            id="cogs-tab"
+                            data-bs-toggle="tab"
+                            data-bs-target="#cogs"
+                            type="button"
+                            role="tab"
+                            aria-controls="cogs"
+                            aria-selected="false">
                         <i class="fas fa-boxes me-2"></i>{% trans "COGS" %}
                     </button>
                 </li>
                 <li class="nav-item" role="presentation">
-                    <button class="nav-link" id="capital-tab" data-bs-toggle="tab" data-bs-target="#capital" type="button" role="tab" aria-controls="capital" aria-selected="false">
+                    <button class="nav-link"
+                            id="capital-tab"
+                            data-bs-toggle="tab"
+                            data-bs-target="#capital"
+                            type="button"
+                            role="tab"
+                            aria-controls="capital"
+                            aria-selected="false">
                         <i class="fas fa-landmark me-2"></i>{% trans "Capital" %}
                     </button>
                 </li>
                 <li class="nav-item" role="presentation">
-                    <button class="nav-link" id="income-tab" data-bs-toggle="tab" data-bs-target="#income" type="button" role="tab" aria-controls="income" aria-selected="false">
+                    <button class="nav-link"
+                            id="income-tab"
+                            data-bs-toggle="tab"
+                            data-bs-target="#income"
+                            type="button"
+                            role="tab"
+                            aria-controls="income"
+                            aria-selected="false">
                         <i class="fas fa-money-bill-wave me-2"></i>{% trans "Income" %}
                     </button>
                 </li>
                 <li class="nav-item" role="presentation">
-                    <button class="nav-link" id="expenses-tab" data-bs-toggle="tab" data-bs-target="#expenses" type="button" role="tab" aria-controls="expenses" aria-selected="false">
+                    <button class="nav-link"
+                            id="expenses-tab"
+                            data-bs-toggle="tab"
+                            data-bs-target="#expenses"
+                            type="button"
+                            role="tab"
+                            aria-controls="expenses"
+                            aria-selected="false">
                         <i class="fas fa-receipt me-2"></i>{% trans "Expenses" %}
                     </button>
                 </li>
                 <li class="nav-item" role="presentation">
-                    <button class="nav-link" id="liabilities-tab" data-bs-toggle="tab" data-bs-target="#liabilities" type="button" role="tab" aria-controls="liabilities" aria-selected="false">
+                    <button class="nav-link"
+                            id="liabilities-tab"
+                            data-bs-toggle="tab"
+                            data-bs-target="#liabilities"
+                            type="button"
+                            role="tab"
+                            aria-controls="liabilities"
+                            aria-selected="false">
                         <i class="fas fa-receipt me-2"></i>{% trans "Liabilities" %}
                     </button>
                 </li>
             </ul>
-
-            <div class="tab-content p-3 border border-top-0 rounded-bottom" id="accountTypeTabsContent">
+            <div class="tab-content p-3 border border-top-0 rounded-bottom"
+                 id="accountTypeTabsContent">
                 <!-- Assets Tab -->
-                <div class="tab-pane fade show active" id="assets" role="tabpanel" aria-labelledby="assets-tab">
+                <div class="tab-pane fade show active"
+                     id="assets"
+                     role="tabpanel"
+                     aria-labelledby="assets-tab">
                     {% include "partials/search_box.html" %}
                     {% with accounts=accounts|filter_by_role:"asset_" %}
                         {% include "ledger/coa_accounts/partials/account_table.html" %}
                     {% endwith %}
                 </div>
-
                 <!-- COGS Tab -->
-                <div class="tab-pane fade" id="cogs" role="tabpanel" aria-labelledby="cogs-tab">
+                <div class="tab-pane fade"
+                     id="cogs"
+                     role="tabpanel"
+                     aria-labelledby="cogs-tab">
                     {% include "partials/search_box.html" %}
                     {% with accounts=accounts|filter_by_role:"cogs" %}
                         {% include "ledger/coa_accounts/partials/account_table.html" %}
                     {% endwith %}
                 </div>
-
                 <!-- Capital Tab -->
-                <div class="tab-pane fade" id="capital" role="tabpanel" aria-labelledby="capital-tab">
+                <div class="tab-pane fade"
+                     id="capital"
+                     role="tabpanel"
+                     aria-labelledby="capital-tab">
                     {% include "partials/search_box.html" %}
                     {% with accounts=accounts|filter_by_role:"eq_" %}
                         {% include "ledger/coa_accounts/partials/account_table.html" %}
                     {% endwith %}
                 </div>
-
                 <!-- Income Tab -->
-                <div class="tab-pane fade" id="income" role="tabpanel" aria-labelledby="income-tab">
+                <div class="tab-pane fade"
+                     id="income"
+                     role="tabpanel"
+                     aria-labelledby="income-tab">
                     {% include "partials/search_box.html" %}
                     {% with accounts=accounts|filter_by_role:"in_" %}
                         {% include "ledger/coa_accounts/partials/account_table.html" %}
                     {% endwith %}
                 </div>
-
                 <!-- Expenses Tab -->
-                <div class="tab-pane fade" id="expenses" role="tabpanel" aria-labelledby="expenses-tab">
+                <div class="tab-pane fade"
+                     id="expenses"
+                     role="tabpanel"
+                     aria-labelledby="expenses-tab">
                     {% include "partials/search_box.html" %}
                     {% with accounts=accounts|filter_by_role:"ex_" %}
                         {% include "ledger/coa_accounts/partials/account_table.html" %}
                     {% endwith %}
                 </div>
                 <!-- Liabilities Tab -->
-                <div class="tab-pane fade" id="liabilities" role="tabpanel" aria-labelledby="liabilities-tab">
+                <div class="tab-pane fade"
+                     id="liabilities"
+                     role="tabpanel"
+                     aria-labelledby="liabilities-tab">
                     {% include "partials/search_box.html" %}
                     {% with accounts=accounts|filter_by_role:"lia_" %}
                         {% include "ledger/coa_accounts/partials/account_table.html" %}
@@ -101,38 +159,44 @@
             </div>
         </div>
     </div>
-
     <!-- Delete Modal (moved outside tables) -->
-    <div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
+    <div class="modal fade"
+         id="deleteModal"
+         data-bs-backdrop="static"
+         data-bs-keyboard="false"
+         tabindex="-1"
+         aria-labelledby="deleteModalLabel"
+         aria-hidden="true">
         <div class="modal-dialog modal-sm">
             <div class="modal-content">
                 <div class="modal-header">
                     {% if perms.django_ledger.delete_chartofaccountmodel %}
-                    <h5 class="modal-title" id="deleteModalLabel">
-                        {% trans "Delete Account" %}
-                        <span data-feather="alert-circle"></span>
-                    </h5>
+                        <h5 class="modal-title" id="deleteModalLabel">
+                            {% trans "Delete Account" %}
+                            <span data-feather="alert-circle"></span>
+                        </h5>
                     {% endif %}
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    <button type="button"
+                            class="btn-close"
+                            data-bs-dismiss="modal"
+                            aria-label="Close"></button>
                 </div>
                 <div class="modal-body text-center">
-                    <p class="mb-0 text-danger fw-bold">
-                        {% trans "Are you sure you want to delete this Account?" %}
-                    </p>
+                    <p class="mb-0 text-danger fw-bold">{% trans "Are you sure you want to delete this Account?" %}</p>
                     <div class="d-grid gap-2">
-                        <button type="button" class="btn btn-phoenix-secondary btn-sm" data-bs-dismiss="modal">
-                            {% trans "No" %}
-                        </button>
-                        <a id="deleteAccountBtn" type="button" class="btn btn-phoenix-danger btn-sm" href="#">
-                            {% trans "Yes" %}
-                        </a>
+                        <button type="button"
+                                class="btn btn-phoenix-secondary btn-sm"
+                                data-bs-dismiss="modal">{% trans "No" %}</button>
+                        <a id="deleteAccountBtn"
+                           type="button"
+                           class="btn btn-phoenix-danger btn-sm"
+                           href="#">{% trans "Yes" %}</a>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 {% endblock %}
-
 {% block customerJS %}
     <script>
     // Handle delete modal for all tables
@@ -145,4 +209,4 @@
             });
         });
     </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/ledger/coa_accounts/partials/account_table.html b/templates/ledger/coa_accounts/partials/account_table.html
index 5f1a0d67..ea56262b 100644
--- a/templates/ledger/coa_accounts/partials/account_table.html
+++ b/templates/ledger/coa_accounts/partials/account_table.html
@@ -13,18 +13,19 @@
             </thead>
             <tbody class="list">
                 {% for account in accounts %}
-                    <tr class="hover-actions-trigger btn-reveal-trigger position-static" data-account-id="{{ account.uuid }}">
-                        <td class="align-middle product white-space-nowrap">
-                            {{ account.name }}
-                        </td>
-                        <td class="align-middle product white-space-nowrap">
-                            {{ account.code }}
-                        </td>
+                    <tr class="hover-actions-trigger btn-reveal-trigger position-static"
+                        data-account-id="{{ account.uuid }}">
+                        <td class="align-middle product white-space-nowrap">{{ account.name }}</td>
+                        <td class="align-middle product white-space-nowrap">{{ account.code }}</td>
                         <td class="align-middle product white-space-nowrap">
                             {% if account.balance_type == 'debit' %}
-                                <div class="badge badge-phoenix fs-10 badge-phoenix-success"><span class="fw-bold"><i class="fa-solid fa-circle-up"></i> {{ _("Debit") }}</span></div>
+                                <div class="badge badge-phoenix fs-10 badge-phoenix-success">
+                                    <span class="fw-bold"><i class="fa-solid fa-circle-up"></i> {{ _("Debit") }}</span>
+                                </div>
                             {% else %}
-                                <div class="badge badge-phoenix fs-10 badge-phoenix-danger"><span class="fw-bold"><i class="fa-solid fa-circle-down"></i> {{ _("Credit") }}</span></div>
+                                <div class="badge badge-phoenix fs-10 badge-phoenix-danger">
+                                    <span class="fw-bold"><i class="fa-solid fa-circle-down"></i> {{ _("Credit") }}</span>
+                                </div>
                             {% endif %}
                         </td>
                         <td class="align-middle product white-space-nowrap">
@@ -36,13 +37,22 @@
                         </td>
                         <td class="align-middle white-space-nowrap text-start">
                             <div class="btn-reveal-trigger position-static">
-                                <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
+                                <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
+                                        type="button"
+                                        data-bs-toggle="dropdown"
+                                        data-boundary="window"
+                                        aria-haspopup="true"
+                                        aria-expanded="false"
+                                        data-bs-reference="parent">
+                                    <span class="fas fa-ellipsis-h fs-10"></span>
+                                </button>
                                 <div class="dropdown-menu dropdown-menu-end py-2">
-                                    <a href="{% url 'account_detail' request.dealer.slug account.uuid %}" class="dropdown-item text-success-dark">
-                                        {% trans "View Journal Entries" %}
-                                    </a>
+                                    <a href="{% url 'account_detail' request.dealer.slug account.uuid %}"
+                                       class="dropdown-item text-success-dark">{% trans "View Journal Entries" %}</a>
                                     <div class="dropdown-divider"></div>
-                                    <button class="dropdown-item text-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">{% trans "Delete" %}</button>
+                                    <button class="dropdown-item text-danger"
+                                            data-bs-toggle="modal"
+                                            data-bs-target="#deleteModal">{% trans "Delete" %}</button>
                                 </div>
                             </div>
                         </td>
@@ -63,7 +73,5 @@
         </div>
     </div>
 {% else %}
-    <div class="alert ">
-        {% trans "No accounts found in this category." %}
-    </div>
-{% endif %}
\ No newline at end of file
+    <div class="alert ">{% trans "No accounts found in this category." %}</div>
+{% endif %}
diff --git a/templates/ledger/journal_entry/includes/card_invoice.html b/templates/ledger/journal_entry/includes/card_invoice.html
index cac95751..1cc4b221 100644
--- a/templates/ledger/journal_entry/includes/card_invoice.html
+++ b/templates/ledger/journal_entry/includes/card_invoice.html
@@ -1,6 +1,5 @@
 {% load django_ledger %}
 {% load i18n %}
-
 {% if not create_invoice %}
     {% if style == 'dashboard' %}
         <div class="card">
@@ -17,15 +16,24 @@
                     <p class="text-danger fw-bold h5">Past Due: {{ invoice.date_due | timesince }} ago</p>
                 {% endif %}
                 {% if invoice.accrue %}
-                    <p>Accrue: <span class="text-success">{% icon 'ant-design:check-circle-filled' 24 %}</span></p>
+                    <p>
+                        Accrue: <span class="text-success">{% icon 'ant-design:check-circle-filled' 24 %}</span>
+                    </p>
                 {% else %}
-                    <p>Accrue: <span class="text-danger">{% icon 'maki:roadblock-11' 24 %}</span></p>
+                    <p>
+                        Accrue: <span class="text-danger">{% icon 'maki:roadblock-11' 24 %}</span>
+                    </p>
                 {% endif %}
                 <p class="h5 text-success">Owed to You: {% currency_symbol %}{{ invoice.get_amount_open | currency_format }}</p>
                 <p>Amount Paid: {% currency_symbol %}{{ invoice.amount_paid | currency_format }}</p>
                 <p>Progressed: {{ invoice.get_progress | percentage }}</p>
                 <div class="progress my-3">
-                    <div class="progress-bar bg-success" role="progressbar" style="width: {{ invoice.get_progress_percent }}%" aria-valuenow="{{ invoice.get_progress_percent }}" aria-valuemin="0" aria-valuemax="100">{{ invoice.get_progress | percentage }}</div>
+                    <div class="progress-bar bg-success"
+                         role="progressbar"
+                         style="width: {{ invoice.get_progress_percent }}%"
+                         aria-valuenow="{{ invoice.get_progress_percent }}"
+                         aria-valuemin="0"
+                         aria-valuemax="100">{{ invoice.get_progress | percentage }}</div>
                 </div>
                 {% modal_action invoice 'get' entity_slug %}
             </div>
@@ -33,7 +41,8 @@
                 <a href="#" class="btn btn-link text-primary">{% trans 'View' %}</a>
                 <a href="#" class="btn btn-link text-warning">{% trans 'Update' %}</a>
                 {% if not invoice.is_paid %}
-                    <a onclick="djLedger.toggleModal('{{ invoice.get_html_id }}')" class="btn btn-link text-info">{% trans 'Mark as Paid' %}</a>
+                    <a onclick="djLedger.toggleModal('{{ invoice.get_html_id }}')"
+                       class="btn btn-link text-info">{% trans 'Mark as Paid' %}</a>
                 {% endif %}
             </div>
         </div>
@@ -48,9 +57,14 @@
             <div class="card-body text-center">
                 {% if invoice.is_draft %}
                     <h3 class="h3 text-warning fw-bold">{% trans 'This invoice is' %} {{ invoice.get_invoice_status_display }}</h3>
-                    <p class="h3">{% trans 'Amount Due' %}: <span class="fw-bold">{% currency_symbol %}{{ invoice.amount_due | currency_format }}</span></p>
-                    <p class="h3">{% trans 'Due Date' %}: <span class="fw-bold">{{ invoice.date_due | timeuntil }}</span></p>
-                    <p class="h3">{% trans 'Is Accrued' %}:
+                    <p class="h3">
+                        {% trans 'Amount Due' %}: <span class="fw-bold">{% currency_symbol %}{{ invoice.amount_due | currency_format }}</span>
+                    </p>
+                    <p class="h3">
+                        {% trans 'Due Date' %}: <span class="fw-bold">{{ invoice.date_due | timeuntil }}</span>
+                    </p>
+                    <p class="h3">
+                        {% trans 'Is Accrued' %}:
                         {% if invoice.accrue %}
                             <span class="text-success">{% icon 'ant-design:check-circle-filled' 24 %}</span>
                         {% else %}
@@ -59,9 +73,14 @@
                     </p>
                 {% elif invoice.is_review %}
                     <h3 class="h3 text-warning fw-bold">{% trans 'This invoice is' %} {{ invoice.get_invoice_status_display }}</h3>
-                    <p class="h3">{% trans 'Amount Due' %}: <span class="fw-bold">{% currency_symbol %}{{ invoice.amount_due | currency_format }}</span></p>
-                    <p class="h3">{% trans 'Due Date' %}: <span class="fw-bold">{{ invoice.date_due | timeuntil }}</span></p>
-                    <p class="h3">{% trans 'Is Accrued' %}:
+                    <p class="h3">
+                        {% trans 'Amount Due' %}: <span class="fw-bold">{% currency_symbol %}{{ invoice.amount_due | currency_format }}</span>
+                    </p>
+                    <p class="h3">
+                        {% trans 'Due Date' %}: <span class="fw-bold">{{ invoice.date_due | timeuntil }}</span>
+                    </p>
+                    <p class="h3">
+                        {% trans 'Is Accrued' %}:
                         {% if invoice.accrue %}
                             <span class="text-success">{% icon 'ant-design:check-circle-filled' 24 %}</span>
                         {% else %}
@@ -73,9 +92,14 @@
                     {% endif %}
                 {% elif invoice.is_approved %}
                     <h3 class="h3 text-info fw-bold">{% trans 'This invoice is' %} {{ invoice.get_invoice_status_display }}</h3>
-                    <p class="h3">{% trans 'Amount Due' %}: <span class="fw-bold">{% currency_symbol %}{{ invoice.amount_due | currency_format }}</span></p>
-                    <p class="h3">{% trans 'Due Date' %}: <span class="fw-bold">{{ invoice.date_due | timeuntil }}</span></p>
-                    <p class="h3">{% trans 'Is Accrued' %}:
+                    <p class="h3">
+                        {% trans 'Amount Due' %}: <span class="fw-bold">{% currency_symbol %}{{ invoice.amount_due | currency_format }}</span>
+                    </p>
+                    <p class="h3">
+                        {% trans 'Due Date' %}: <span class="fw-bold">{{ invoice.date_due | timeuntil }}</span>
+                    </p>
+                    <p class="h3">
+                        {% trans 'Is Accrued' %}:
                         {% if invoice.accrue %}
                             <span class="text-success">{% icon 'ant-design:check-circle-filled' 24 %}</span>
                         {% else %}
@@ -85,53 +109,63 @@
                     <p class="h3 fw-bold">{% trans 'Amount Paid' %}: {% currency_symbol %}{{ invoice.amount_paid | currency_format }}</p>
                     <p class="h5">{% trans 'Progressed' %}: {{ invoice.get_progress | percentage }}</p>
                     <div class="progress my-3">
-                        <div class="progress-bar bg-success" role="progressbar" style="width: {{ invoice.get_progress_percent }}%" aria-valuenow="{{ invoice.get_progress_percent }}" aria-valuemin="0" aria-valuemax="100">{{ invoice.get_progress | percentage }}</div>
+                        <div class="progress-bar bg-success"
+                             role="progressbar"
+                             style="width: {{ invoice.get_progress_percent }}%"
+                             aria-valuenow="{{ invoice.get_progress_percent }}"
+                             aria-valuemin="0"
+                             aria-valuemax="100">{{ invoice.get_progress | percentage }}</div>
                     </div>
                 {% elif invoice.is_paid %}
                     <h3 class="h3 text-success fw-bold">{% trans 'This invoice is' %} {{ invoice.get_invoice_status_display }}</h3>
-                    <p class="h3">{% trans 'Amount Paid' %}: <span class="fw-bold">{% currency_symbol %}{{ invoice.amount_paid | currency_format }}</span></p>
-                    <p class="h3">{% trans 'Paid Date' %}: <span class="fw-bold">{{ invoice.date_paid | date }}</span></p>
+                    <p class="h3">
+                        {% trans 'Amount Paid' %}: <span class="fw-bold">{% currency_symbol %}{{ invoice.amount_paid | currency_format }}</span>
+                    </p>
+                    <p class="h3">
+                        {% trans 'Paid Date' %}: <span class="fw-bold">{{ invoice.date_paid | date }}</span>
+                    </p>
                 {% else %}
-                    <p class="h3">Invoice Amount: <span class="fw-bold">{% currency_symbol %}{{ invoice.amount_due | currency_format }}</span></p>
+                    <p class="h3">
+                        Invoice Amount: <span class="fw-bold">{% currency_symbol %}{{ invoice.amount_due | currency_format }}</span>
+                    </p>
                     <p class="h3 text-danger">{{ invoice.get_invoice_status_display | upper }}</p>
                 {% endif %}
             </div>
             <div class="card-footer d-flex justify-content-between">
-
-
                 {# MARK DRAFT #}
                 {% if invoice.can_draft %}
-                    <a onclick="djLedger.toggleModal('{{ invoice.get_mark_as_draft_html_id }}')" class="btn btn-link text-info">{% trans 'Mark as Draft' %}</a>
+                    <a onclick="djLedger.toggleModal('{{ invoice.get_mark_as_draft_html_id }}')"
+                       class="btn btn-link text-info">{% trans 'Mark as Draft' %}</a>
                     {% modal_action_v2 invoice invoice.get_mark_as_draft_url invoice.get_mark_as_draft_message invoice.get_mark_as_draft_html_id %}
                 {% endif %}
-
                 {# MARK REVIEW #}
                 {% if invoice.can_review %}
-                    <a onclick="djLedger.toggleModal('{{ invoice.get_mark_as_review_html_id }}')" class="btn btn-link text-info">{% trans 'Mark as Review' %}</a>
+                    <a onclick="djLedger.toggleModal('{{ invoice.get_mark_as_review_html_id }}')"
+                       class="btn btn-link text-info">{% trans 'Mark as Review' %}</a>
                     {% modal_action_v2 invoice invoice.get_mark_as_review_url invoice.get_mark_as_review_message invoice.get_mark_as_review_html_id %}
                 {% endif %}
-
                 {# MARK APPROVED #}
                 {% if invoice.can_approve %}
-                    <a onclick="djLedger.toggleModal('{{ invoice.get_mark_as_approved_html_id }}')" class="btn btn-link text-success">{% trans 'Approve' %}</a>
+                    <a onclick="djLedger.toggleModal('{{ invoice.get_mark_as_approved_html_id }}')"
+                       class="btn btn-link text-success">{% trans 'Approve' %}</a>
                     {% modal_action_v2 invoice invoice.get_mark_as_approved_url invoice.get_mark_as_approved_message invoice.get_mark_as_approved_html_id %}
                 {% endif %}
-
                 {# MARK PAID #}
                 {% if invoice.can_pay %}
-                    <a onclick="djLedger.toggleModal('{{ invoice.get_mark_as_paid_html_id }}')" class="btn btn-link text-success">{% trans 'Mark as Paid' %}</a>
+                    <a onclick="djLedger.toggleModal('{{ invoice.get_mark_as_paid_html_id }}')"
+                       class="btn btn-link text-success">{% trans 'Mark as Paid' %}</a>
                     {% modal_action_v2 invoice invoice.get_mark_as_paid_url invoice.get_mark_as_paid_message invoice.get_mark_as_paid_html_id %}
                 {% endif %}
-
                 {# MARK VOID #}
                 {% if invoice.can_void %}
-                    <a onclick="djLedger.toggleModal('{{ invoice.get_mark_as_void_html_id }}')" class="btn btn-link text-danger">{% trans 'Void' %}</a>
+                    <a onclick="djLedger.toggleModal('{{ invoice.get_mark_as_void_html_id }}')"
+                       class="btn btn-link text-danger">{% trans 'Void' %}</a>
                     {% modal_action_v2 invoice invoice.get_mark_as_void_url invoice.get_mark_as_void_message invoice.get_mark_as_void_html_id %}
                 {% endif %}
-
                 {# MARK CANCELED #}
                 {% if invoice.can_cancel %}
-                    <a onclick="djLedger.toggleModal('{{ invoice.get_mark_as_canceled_html_id }}')" class="btn btn-link text-danger fw-bold">{% trans 'Cancel' %}</a>
+                    <a onclick="djLedger.toggleModal('{{ invoice.get_mark_as_canceled_html_id }}')"
+                       class="btn btn-link text-danger fw-bold">{% trans 'Cancel' %}</a>
                     {% modal_action_v2 invoice invoice.get_mark_as_canceled_url invoice.get_mark_as_canceled_message invoice.get_mark_as_canceled_html_id %}
                 {% endif %}
             </div>
@@ -146,4 +180,4 @@
             <h2 class="h3 text-muted">{% trans 'New Invoice' %}</h2>
         </div>
     </div>
-{% endif %}
\ No newline at end of file
+{% endif %}
diff --git a/templates/ledger/journal_entry/includes/card_journal_entry.html b/templates/ledger/journal_entry/includes/card_journal_entry.html
index 15a6551c..908f4e54 100644
--- a/templates/ledger/journal_entry/includes/card_journal_entry.html
+++ b/templates/ledger/journal_entry/includes/card_journal_entry.html
@@ -1,27 +1,25 @@
 {% load django_ledger %}
 {% load i18n %}
-
 <div class="card">
     <div class="card-header">
         <h2 class="card-header-title display-4">{% trans 'Journal Entry Detail' %}</h2>
     </div>
     <div class="card-body">
         <h2 class="display-4 text-success">{{ journal_entry.je_number }}</h2>
-
         {% if journal_entry.entity_unit %}
             <h2 class="display-4 font-weight-light">{{ journal_entry.entity_unit.name }}</h2>
         {% endif %}
-
         <h2 class="display-4">{% trans 'Date' %}: {{ journal_entry.timestamp | date }}</h2>
-
-        <h3 class="h4">{% trans 'Posted' %}:
+        <h3 class="h4">
+            {% trans 'Posted' %}:
             {% if journal_entry.is_posted %}
                 <span class="text-success">{% icon 'ant-design:check-circle-filled' 24 %}</span>
             {% else %}
                 <span class="text-danger">{% icon 'maki:roadblock-11' 24 %}</span>
             {% endif %}
         </h3>
-        <h3 class="h4">{% trans 'Locked' %}:
+        <h3 class="h4">
+            {% trans 'Locked' %}:
             {% if journal_entry.is_locked %}
                 <span class="text-success">{% icon 'ant-design:check-circle-filled' 24 %}</span>
             {% else %}
@@ -31,9 +29,7 @@
         {% if journal_entry.activity %}
             <h3 class="h3">{% trans 'Activity' %}: {{ journal_entry.get_activity_display }}</h3>
         {% endif %}
-        {% if journal_entry.description %}
-            <h4 class="h4 font-weight-light">{{ journal_entry.description }}</h4>
-        {% endif %}
+        {% if journal_entry.description %}<h4 class="h4 font-weight-light">{{ journal_entry.description }}</h4>{% endif %}
     </div>
     <div class="card-footer">
         <div class="d-flex justify-content-between">
@@ -55,4 +51,4 @@
             {% endif %}
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/ledger/journal_entry/journal_entry_delete.html b/templates/ledger/journal_entry/journal_entry_delete.html
index 8eaca6fc..cbb0fd4d 100644
--- a/templates/ledger/journal_entry/journal_entry_delete.html
+++ b/templates/ledger/journal_entry/journal_entry_delete.html
@@ -1,9 +1,7 @@
-
 {% extends 'base.html' %}
 {% load i18n %}
 {% load static %}
 {% load django_ledger %}
-
 {% block content %}
     <div class="row justify-content-center">
         <div class="col-md-6">
@@ -23,10 +21,4 @@
             </form>
         </div>
     </div>
-
-
 {% endblock %}
-
-
-
-
diff --git a/templates/ledger/journal_entry/journal_entry_form.html b/templates/ledger/journal_entry/journal_entry_form.html
index b075f777..85f617f2 100644
--- a/templates/ledger/journal_entry/journal_entry_form.html
+++ b/templates/ledger/journal_entry/journal_entry_form.html
@@ -1,9 +1,9 @@
 {% extends "base.html" %}
 {% load crispy_forms_filters %}
 {% load i18n static %}
-
-{% block title %}{{ _("Create Journal Entry") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Create Journal Entry") }}
+{% endblock title %}
 {% block content %}
     {% comment %} <div class="row mt-4">
         <h3 class="text-center">{% trans "Create Journal Entry" %}</h3>
@@ -18,39 +18,29 @@
             </div>
         </form>
     </div> {% endcomment %}
-
     <!---->
-
-     <div class="row justify-content-center mt-5 mb-3">
-
-       <div class="col-lg-8 col-md-10">
-         <div class="card shadow-sm border-0 rounded-3">
-            <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
-                    <h3 class="mb-0 fs-4 text-center text-white">
-                      {% trans "Create Journal Entry" %}
-                   </h3>
-            </div>
-            <div class="card-body bg-light-subtle">
-
-                <form id="mainForm" method="post" class="needs-validation">
-                     {% csrf_token %}
-                    <div class="row g-3">
-                      {{ form|crispy }}
-                    </div>
-                     <hr class="my-2">
-                    <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-3">
-                         <button class="btn btn-lg btn-phoenix-success md-me-2" type="submit"><i class="fa-solid fa-floppy-disk me-1"></i>{{ _("Save") }}</button>
-                         <a href="{% url 'journalentry_list' request.dealer.slug ledger.pk %}" class="btn btn-lg btn-phoenix-secondary"><i class="fa-solid fa-ban me-1"></i> {% trans "Cancel" %}</a>
-                    </div>
-                </form>
-
-               
-
+    <div class="row justify-content-center mt-5 mb-3">
+        <div class="col-lg-8 col-md-10">
+            <div class="card shadow-sm border-0 rounded-3">
+                <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
+                    <h3 class="mb-0 fs-4 text-center text-white">{% trans "Create Journal Entry" %}</h3>
+                </div>
+                <div class="card-body bg-light-subtle">
+                    <form id="mainForm" method="post" class="needs-validation">
+                        {% csrf_token %}
+                        <div class="row g-3">{{ form|crispy }}</div>
+                        <hr class="my-2">
+                        <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-3">
+                            <button class="btn btn-lg btn-phoenix-success md-me-2" type="submit">
+                                <i class="fa-solid fa-floppy-disk me-1"></i>{{ _("Save") }}
+                            </button>
+                            <a href="{% url 'journalentry_list' request.dealer.slug ledger.pk %}"
+                               class="btn btn-lg btn-phoenix-secondary"><i class="fa-solid fa-ban me-1"></i> {% trans "Cancel" %}</a>
+                        </div>
+                    </form>
+                </div>
             </div>
         </div>
-
-       </div>
-
-   </div>
+    </div>
     <!---->
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
diff --git a/templates/ledger/journal_entry/journal_entry_list.html b/templates/ledger/journal_entry/journal_entry_list.html
index ec7fbe39..cc78925f 100644
--- a/templates/ledger/journal_entry/journal_entry_list.html
+++ b/templates/ledger/journal_entry/journal_entry_list.html
@@ -1,17 +1,24 @@
 {% extends "base.html" %}
 {% load i18n static %}
-
-{% block title %}{{ _("Journal Entries") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Journal Entries") }}
+{% endblock title %}
 {% block content %}
-    <div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
+    <div class="modal fade"
+         id="confirmModal"
+         tabindex="-1"
+         aria-labelledby="confirmModalLabel"
+         aria-hidden="true">
         <div class="modal-dialog modal-sm">
             <div class="modal-content ">
                 <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
                     <h5 class="mmb-0 me-2 text-warning-dark" id="confirmModalLabel">
                         <i class="fas fa-exclamation-circle text-warning-dark ms-2"></i>
-                        {% trans 'Confirm' %}</h5>
-                    <button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close">
+                        {% trans 'Confirm' %}
+                    </h5>
+                    <button class="btn p-0 text-body-quaternary fs-6"
+                            data-bs-dismiss="modal"
+                            aria-label="Close">
                         <span class="fas fa-times"></span>
                     </button>
                 </div>
@@ -21,8 +28,14 @@
                         <form id="confirmForm" method="POST" action="" class="form">
                             {% csrf_token %}
                             <div class="container-fluid m-0 p-0">
-                                <button type="button" class="btn btn-phoenix-danger btn-sm" data-bs-dismiss="modal"><i class="fa-solid fa-ban"></i> {% trans 'No' %}</button>
-                                <button type="submit" class="btn btn-phoenix-success btn-sm"><i class="fa-solid fa-circle-check"></i> {% trans "Yes" %}</button>
+                                <button type="button"
+                                        class="btn btn-phoenix-danger btn-sm"
+                                        data-bs-dismiss="modal">
+                                    <i class="fa-solid fa-ban"></i> {% trans 'No' %}
+                                </button>
+                                <button type="submit" class="btn btn-phoenix-success btn-sm">
+                                    <i class="fa-solid fa-circle-check"></i> {% trans "Yes" %}
+                                </button>
                             </div>
                         </form>
                     </div>
@@ -30,19 +43,15 @@
             </div>
         </div>
     </div>
-
-   <!--test-->
+    <!--test-->
     <div class="row mt-4">
-
         <div class="d-flex justify-content-between mb-2">
             <h3 class="">{% trans "Journal Entries" %}</h3>
             {% if perms.django_ledger.add_journalentrymodel %}
-                <a href="{% url 'journalentry_create' request.dealer.slug ledger.pk %}" class="btn btn-md btn-phoenix-primary"><i class="fa fa-plus me-2"></i>{% trans "Add Journal Entry" %}</a>
+                <a href="{% url 'journalentry_create' request.dealer.slug ledger.pk %}"
+                   class="btn btn-md btn-phoenix-primary"><i class="fa fa-plus me-2"></i>{% trans "Add Journal Entry" %}</a>
             {% endif %}
         </div>
-
-
-
         <div class="table-responsive px-1 scrollbar fs-9">
             <table class="table align-items-center table-flush">
                 <thead>
@@ -63,9 +72,7 @@
                             <td class="align-middle product white-space-nowrap px-1">{{ je.je_number }}</td>
                             <td class="align-middle product white-space-nowrap">{{ je.timestamp }}</td>
                             <td class="align-middle product white-space-nowrap">
-                                {% if je.get_activity_display %}
-                                    {{ je.get_activity_display }}
-                                {% endif %}
+                                {% if je.get_activity_display %}{{ je.get_activity_display }}{% endif %}
                             </td>
                             <td class="align-middle product white-space-nowrap">{{ je.description }}</td>
                             <td class="align-middle product white-space-nowrap">
@@ -82,28 +89,28 @@
                                     <i class="fa-solid fa-unlock text-danger"></i>
                                 {% endif %}
                             </td>
-                            <td class="align-middle product white-space-nowrap">
-                                {{ je.txs_count }}
-                            </td>
+                            <td class="align-middle product white-space-nowrap">{{ je.txs_count }}</td>
                             <td class="align-middle white-space-nowrap text-start">
                                 <div class="btn-reveal-trigger position-static">
-                                    <button
-                                        class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
-                                        type="button"
-                                        data-bs-toggle="dropdown"
-                                        data-boundary="window"
-                                        aria-haspopup="true"
-                                        aria-expanded="false"
-                                        data-bs-reference="parent">
+                                    <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
+                                            type="button"
+                                            data-bs-toggle="dropdown"
+                                            data-boundary="window"
+                                            aria-haspopup="true"
+                                            aria-expanded="false"
+                                            data-bs-reference="parent">
                                         <span class="fas fa-ellipsis-h fs-10"></span>
                                     </button>
                                     <div class="dropdown-menu dropdown-menu-end py-2">
                                         {% if perms.django_ledger.view_transactionmodel %}
-                                            <a class="dropdown-item" href="{% url 'journalentry_transactions' request.dealer.slug je.pk %}">{% trans "View" %}</a>
-                                            <a class="dropdown-item" href="{% url 'journalentry_txs' request.dealer.slug je.entity_slug je.ledger_id je.pk %}">{% trans "Transactions" %}</a>
-                                            {% endif %}
+                                            <a class="dropdown-item"
+                                               href="{% url 'journalentry_transactions' request.dealer.slug je.pk %}">{% trans "View" %}</a>
+                                            <a class="dropdown-item"
+                                               href="{% url 'journalentry_txs' request.dealer.slug je.entity_slug je.ledger_id je.pk %}">{% trans "Transactions" %}</a>
+                                        {% endif %}
                                         {% if je.can_delete and perms.django_ledger.delete_journalentrymodel %}
-                                            <a class="dropdown-item" href="{% url 'journalentry_delete' request.dealer.slug je.pk %}">{% trans "Delete" %}</a>
+                                            <a class="dropdown-item"
+                                               href="{% url 'journalentry_delete' request.dealer.slug je.pk %}">{% trans "Delete" %}</a>
                                         {% endif %}
                                     </div>
                                 </div>
@@ -118,18 +125,10 @@
             </table>
         </div>
         {% if page_obj.paginator.num_pages > 1 %}
-
             <div class="d-flex justify-content-end mt-3">
-
-                <div class="d-flex">
-                    {% include 'partials/pagination.html'%}
-                </div>
-
+                <div class="d-flex">{% include 'partials/pagination.html' %}</div>
             </div>
         {% endif %}
-
     </div>
     <!--test-->
-
-
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/ledger/journal_entry/journal_entry_transactions.html b/templates/ledger/journal_entry/journal_entry_transactions.html
index 1e1fae34..44a38703 100644
--- a/templates/ledger/journal_entry/journal_entry_transactions.html
+++ b/templates/ledger/journal_entry/journal_entry_transactions.html
@@ -1,15 +1,16 @@
 {% extends "base.html" %}
 {% load i18n static %}
-
-{% block title %}{{ _("Transactions") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Transactions") }}
+{% endblock title %}
 {% block content %}
     <div class="row mt-4">
         <div class="col-12">
             {% include 'ledger/journal_entry/includes/card_journal_entry.html' with journal_entry=journal_entry %}
         </div>
-        <h3 class="mb-3 mt-5"><i class="fa-solid fa-right-left"></i> {% trans "Transactions" %}</h3>
-
+        <h3 class="mb-3 mt-5">
+            <i class="fa-solid fa-right-left"></i> {% trans "Transactions" %}
+        </h3>
         <div class="table-responsive px-1 scrollbar">
             <table class="table align-items-center table-flush">
                 <thead>
@@ -25,13 +26,20 @@
                     <tbody class="list">
                         {% for transaction in transactions %}
                             <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-
                                 <td>{{ forloop.counter }}</td>
-                                <td class="align-middle product white-space-nowrap py-0">{{ transaction.created|date}}</td>
+                                <td class="align-middle product white-space-nowrap py-0">{{ transaction.created|date }}</td>
                                 <td class="align-middle product white-space-nowrap">{{ transaction.account.name }}</td>
                                 <td class="align-middle product white-space-nowrap">{{ transaction.account.code }}</td>
-                                <td class="align-middle product white-space-nowrap text-success">{% if transaction.tx_type == "debit" %}<i class="fa-solid fa-circle-up"></i> {{ transaction.amount }} <span class="icon-saudi_riyal"></span>{% endif %}</td>
-                                <td class="align-middle product white-space-nowrap text-danger">{% if transaction.tx_type == "credit" %}<i class="fa-solid fa-circle-down"></i> {{ transaction.amount }} <span class="icon-saudi_riyal"></span>{% endif %}</td>
+                                <td class="align-middle product white-space-nowrap text-success">
+                                    {% if transaction.tx_type == "debit" %}
+                                        <i class="fa-solid fa-circle-up"></i> {{ transaction.amount }} <span class="icon-saudi_riyal"></span>
+                                    {% endif %}
+                                </td>
+                                <td class="align-middle product white-space-nowrap text-danger">
+                                    {% if transaction.tx_type == "credit" %}
+                                        <i class="fa-solid fa-circle-down"></i> {{ transaction.amount }} <span class="icon-saudi_riyal"></span>
+                                    {% endif %}
+                                </td>
                                 <td class="align-middle product white-space-nowrap">{{ transaction.description }}</td>
                             </tr>
                         {% empty %}
@@ -43,14 +51,9 @@
                 </table>
             </div>
             {% if page_obj.paginator.num_pages > 1 %}
-
                 <div class="d-flex justify-content-end mt-3">
-
-                    <div class="d-flex">
-                        {% include 'partials/pagination.html'%}
-                    </div>
-
+                    <div class="d-flex">{% include 'partials/pagination.html' %}</div>
                 </div>
             {% endif %}
         </div>
-{% endblock %}
\ No newline at end of file
+    {% endblock %}
diff --git a/templates/ledger/journal_entry/journal_entry_txs.html b/templates/ledger/journal_entry/journal_entry_txs.html
index 248e97cb..ab965dd6 100644
--- a/templates/ledger/journal_entry/journal_entry_txs.html
+++ b/templates/ledger/journal_entry/journal_entry_txs.html
@@ -2,7 +2,6 @@
 {% load i18n %}
 {% load static %}
 {% load crispy_forms_tags %}
-
 {% block content %}
     <div class="row justify-content-center">
         <div class="col-12">
@@ -16,9 +15,7 @@
                         <div class="row">
                             <div class="col-12">
                                 {% if txs_formset.non_form_errors %}
-                                    <div class="alert alert-subtle-warning" role="alert">
-                                        {{ txs_formset.non_form_errors }}
-                                    </div>
+                                    <div class="alert alert-subtle-warning" role="alert">{{ txs_formset.non_form_errors }}</div>
                                 {% endif %}
                                 {{ txs_formset.management_form|crispy }}
                             </div>
@@ -30,27 +27,21 @@
                                             <th>TX Type</th>
                                             <th>Amount</th>
                                             <th>Description</th>
-                                            {% if txs_formset.can_delete %}
-                                                <th>Delete</th>
-                                            {% endif %}
+                                            {% if txs_formset.can_delete %}<th>Delete</th>{% endif %}
                                         </tr>
                                     </thead>
                                     <tbody>
                                         {% for f in txs_formset %}
                                             <tr>
                                                 <td class="px-2">
-                                                    {% for hidden_field in f.hidden_fields %}
-                                                        {{ hidden_field }}
-                                                    {% endfor %}
+                                                    {% for hidden_field in f.hidden_fields %}{{ hidden_field }}{% endfor %}
                                                     {{ f.account|as_crispy_field }}
                                                 </td>
                                                 <td>{{ f.tx_type|as_crispy_field }}</td>
                                                 <td>{{ f.amount|as_crispy_field }}</td>
                                                 <td>{{ f.description|as_crispy_field }}</td>
                                                 <td>
-                                                    {% if txs_formset.can_delete %}
-                                                        {{ f.DELETE|as_crispy_field }}
-                                                    {% endif %}
+                                                    {% if txs_formset.can_delete %}{{ f.DELETE|as_crispy_field }}{% endif %}
                                                 </td>
                                             </tr>
                                         {% endfor %}
@@ -58,9 +49,7 @@
                                 </table>
                             </div>
                             <div class="col-12 text-center">
-                                <button class="btn btn-phoenix-primary">
-                                    {% trans 'Save' %}
-                                </button>
+                                <button class="btn btn-phoenix-primary">{% trans 'Save' %}</button>
                                 <a class="btn btn-phoenix-secondary"
                                    href="{% url 'journalentry_list' request.dealer.slug journal_entry.ledger_id %}">
                                     {% trans 'Done' %}
@@ -96,4 +85,4 @@
             </div>
         </div>
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/ledger/ledger/ledger_delete.html b/templates/ledger/ledger/ledger_delete.html
index b0dd7b32..93492607 100644
--- a/templates/ledger/ledger/ledger_delete.html
+++ b/templates/ledger/ledger/ledger_delete.html
@@ -2,7 +2,6 @@
 {% load i18n %}
 {% load static %}
 {% load django_ledger %}
-
 {% block content %}
     <div class="row justify-content-center">
         <div class="col-md-6">
@@ -14,18 +13,11 @@
                         <h5 class="card-title fw-light">{{ ledger_model.get_delete_message }}</h5>
                     </div>
                     <div class="card-body text-center">
-                        <a href="{% url 'ledger_list' %}"
-                           class="btn btn-phoenix-primary me-2">{% trans 'Go Back' %}</a>
+                        <a href="{% url 'ledger_list' %}" class="btn btn-phoenix-primary me-2">{% trans 'Go Back' %}</a>
                         <button type="submit" class="btn btn-phoenix-danger">{% trans 'Delete' %}</button>
                     </div>
                 </div>
             </form>
         </div>
     </div>
-
-
 {% endblock %}
-
-
-
-
diff --git a/templates/ledger/ledger/ledger_detail.html b/templates/ledger/ledger/ledger_detail.html
index 269cbacd..9de41c85 100644
--- a/templates/ledger/ledger/ledger_detail.html
+++ b/templates/ledger/ledger/ledger_detail.html
@@ -2,7 +2,6 @@
 {% load i18n %}
 {% load static %}
 {% load django_ledger %}
-
 {% block content %}
     <div class="row">
         <div class="col-md-4">
@@ -10,13 +9,9 @@
                 <div class="col-12 mb-4">
                     {% include 'ledger/journal_entry/includes/card_invoice.html' with invoice=invoice entity_slug=view.kwargs.entity_slug style='invoice-detail' %}
                 </div>
-                <div class="col-12 mb-4">
-                </div>
+                <div class="col-12 mb-4"></div>
                 <div class="col-12">
-                    <a class="btn btn-phoenix-info btn-block"
-                       href="#">
-                        {% trans 'Invoice List' %}
-                    </a>
+                    <a class="btn btn-phoenix-info btn-block" href="#">{% trans 'Invoice List' %}</a>
                 </div>
             </div>
         </div>
@@ -25,41 +20,35 @@
                 <div class="col-12 mb-4">
                     <div class="d-flex justify-content-around text-center">
                         <div>
-                            <p class="text-muted">{% trans 'Cash Account' %}:
-                                <a href="#"
-                                   class="text-danger">{{ invoice.cash_account.code }}</a>
+                            <p class="text-muted">
+                                {% trans 'Cash Account' %}:
+                                <a href="#" class="text-danger">{{ invoice.cash_account.code }}</a>
                             </p>
-                            <p class="h4">
-                                {% currency_symbol %}{{ invoice.get_amount_cash | absolute | currency_format }}</p>
+                            <p class="h4">{% currency_symbol %}{{ invoice.get_amount_cash | absolute | currency_format }}</p>
                         </div>
-
                         {% if invoice.accrue %}
                             <div>
-                                <p class="text-muted">{% trans 'Accounts Receivable' %}:
-                                    <a href="#"
-                                       class="text-danger">{{ invoice.prepaid_account.code }}</a>
+                                <p class="text-muted">
+                                    {% trans 'Accounts Receivable' %}:
+                                    <a href="#" class="text-danger">{{ invoice.prepaid_account.code }}</a>
                                 </p>
-                                <p class="h4 text-success">
-                                    {% currency_symbol %}{{ invoice.get_amount_prepaid | currency_format }}</p>
+                                <p class="h4 text-success">{% currency_symbol %}{{ invoice.get_amount_prepaid | currency_format }}</p>
                             </div>
                             <div>
-                                <p class="text-muted">{% trans 'Deferred Revenue' %}:
-                                    <a href="#"
-                                       class="text-danger">{{ invoice.unearned_account.code }}</a>
+                                <p class="text-muted">
+                                    {% trans 'Deferred Revenue' %}:
+                                    <a href="#" class="text-danger">{{ invoice.unearned_account.code }}</a>
                                 </p>
-                                <p class="h4 text-danger">
-                                    {% currency_symbol %}{{ invoice.get_amount_unearned | currency_format }}</p>
+                                <p class="h4 text-danger">{% currency_symbol %}{{ invoice.get_amount_unearned | currency_format }}</p>
                             </div>
                             <div>
                                 <p class="text-muted">Accrued {{ invoice.get_progress_percent }}%</p>
-                                <p class="h4">
-                                    {% currency_symbol %}{{ invoice.get_amount_earned | currency_format }}</p>
+                                <p class="h4">{% currency_symbol %}{{ invoice.get_amount_earned | currency_format }}</p>
                             </div>
                         {% else %}
                             <div>
                                 <p class="text-muted">You Are Owed</p>
-                                <p class="h4 text-success">
-                                    {% currency_symbol %}{{ invoice.get_amount_open | currency_format }}</p>
+                                <p class="h4 text-success">{% currency_symbol %}{{ invoice.get_amount_open | currency_format }}</p>
                             </div>
                         {% endif %}
                     </div>
@@ -75,7 +64,6 @@
                         <div class="card-body">
                             <div class="table-responsive">
                                 <table class="table table-bordered table-striped">
-
                                     <thead>
                                         <tr>
                                             <th>{% trans 'Item' %}</th>
@@ -90,17 +78,14 @@
                                                 <td>{{ invoice_item.item_model }}</td>
                                                 <td>{% currency_symbol %}{{ invoice_item.unit_cost | currency_format }}</td>
                                                 <td>{{ invoice_item.quantity }}</td>
-                                                <td>
-                                                    {% currency_symbol %}{{ invoice_item.total_amount | currency_format }}</td>
+                                                <td>{% currency_symbol %}{{ invoice_item.total_amount | currency_format }}</td>
                                             </tr>
                                         {% endfor %}
                                     </tbody>
                                     <tfoot>
                                         <tr>
                                             <th colspan="3">{% trans 'Total' %}</th>
-                                            <th>
-                                                {% currency_symbol %}{{ total_amount_due | currency_format }}
-                                            </th>
+                                            <th>{% currency_symbol %}{{ total_amount_due | currency_format }}</th>
                                         </tr>
                                     </tfoot>
                                 </table>
@@ -111,24 +96,15 @@
                 {% if invoice.is_active %}
                     <div class="col-12 mb-4">
                         <div class="d-flex justify-content-center gap-2">
-                            <a href="#"
-                               class="btn btn-phoenix-info">{% trans 'Balance Sheet' %}</a>
-                            <a href="#"
-                               class="btn btn-phoenix-info">{% trans 'Income Statement' %}</a>
-                            <a href="#"
-                               class="btn btn-phoenix-info">{% trans 'Cash Flow Statement' %}</a>
+                            <a href="#" class="btn btn-phoenix-info">{% trans 'Balance Sheet' %}</a>
+                            <a href="#" class="btn btn-phoenix-info">{% trans 'Income Statement' %}</a>
+                            <a href="#" class="btn btn-phoenix-info">{% trans 'Cash Flow Statement' %}</a>
                         </div>
                         <div class="col-12 mt-3">
                             <div class="d-flex justify-content-center gap-2">
-                                <a href="#"
-                                   class="btn btn-phoenix-success">
-                                    {% trans 'Balance Sheet PDF' %}{% icon 'bytesize:download' 24 %}</a>
-                                <a href="#"
-                                   class="btn btn-phoenix-success">
-                                    {% trans 'Income Statement PDF' %}{% icon 'bytesize:download' 24 %}</a>
-                                <a href="#"
-                                   class="btn btn-phoenix-success">
-                                    {% trans 'Cash Flow Statement PDF' %}{% icon 'bytesize:download' 24 %}</a>
+                                <a href="#" class="btn btn-phoenix-success">{% trans 'Balance Sheet PDF' %}{% icon 'bytesize:download' 24 %}</a>
+                                <a href="#" class="btn btn-phoenix-success">{% trans 'Income Statement PDF' %}{% icon 'bytesize:download' 24 %}</a>
+                                <a href="#" class="btn btn-phoenix-success">{% trans 'Cash Flow Statement PDF' %}{% icon 'bytesize:download' 24 %}</a>
                             </div>
                         </div>
                     </div>
@@ -141,14 +117,11 @@
                                 {% trans 'Invoice Transactions' %}
                             </h2>
                         </div>
-                        <div class="card-body">
-                        </div>
+                        <div class="card-body"></div>
                     </div>
                 </div>
-                <div class="col-12">
-
-                </div>
+                <div class="col-12"></div>
             </div>
         </div>
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/ledger/ledger/ledger_form.html b/templates/ledger/ledger/ledger_form.html
index 860be55d..4ed10748 100644
--- a/templates/ledger/ledger/ledger_form.html
+++ b/templates/ledger/ledger/ledger_form.html
@@ -1,9 +1,9 @@
 {% extends "base.html" %}
 {% load crispy_forms_filters %}
 {% load i18n static %}
-
-{% block title %}{{ _("Create Ledger") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Create Ledger") }}
+{% endblock title %}
 {% block content %}
     <!---->
      <div class="row justify-content-center mt-5 mb-3">
@@ -37,9 +37,6 @@
 
             </div>
         </div>
-
-       </div>
-
-   </div>
+    </div>
     <!---->
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
diff --git a/templates/ledger/ledger/ledger_list.html b/templates/ledger/ledger/ledger_list.html
index 656d02d6..e2c9b182 100644
--- a/templates/ledger/ledger/ledger_list.html
+++ b/templates/ledger/ledger/ledger_list.html
@@ -1,23 +1,20 @@
 {% extends "base.html" %}
 {% load i18n static %}
-
-{% block title %}{{ _("Ledger") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Ledger") }}
+{% endblock title %}
 {% block content %}
-
-
     <div class="row mt-4">
-
         <div class="d-flex justify-content-between mb-2">
             <h3 class="">{% trans "Ledger" %} <span class="fas fa-book-open ms-2 text-primary"></span></h3>
             {% if perms.django_ledger.add_ledgermodel %}
-            <a href="{% url 'ledger_create' request.dealer.slug request.dealer.entity.slug %}" class="btn btn-md btn-phoenix-primary"><i class="fa fa-plus me-2"></i>{% trans 'Create Ledger' %}</a>
+                <a href="{% url 'ledger_create' request.dealer.slug request.dealer.entity.slug %}"
+                   class="btn btn-md btn-phoenix-primary"><i class="fa fa-plus me-2"></i>{% trans 'Create Ledger' %}</a>
             {% endif %}
         </div>
         <div class="table-responsive px-1 scrollbar mt-3">
             <table class="table align-items-center table-flush">
                 <thead>
-
                     <tr class="bg-body-highlight">
                         <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Ledger Name" %}</th>
                         <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Journal Entries" %}</th>
@@ -27,19 +24,17 @@
                         <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Action" %}</th>
                     </tr>
                 </thead>
-
                 <tbody class="list">
                     {% for ledger in ledgers %}
-
                         <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                             <td class="align-middle product white-space-nowrap px-1">
                                 {% if ledger.invoicemodel %}
-                                    {% if perms.django_ledger.view_invoicemodel%}
-                                    <a href="{% url 'invoice_detail' request.dealer.slug ledger.invoicemodel.pk %}">{{ ledger.get_wrapped_model_instance }}</a>
+                                    {% if perms.django_ledger.view_invoicemodel %}
+                                        <a href="{% url 'invoice_detail' request.dealer.slug ledger.invoicemodel.pk %}">{{ ledger.get_wrapped_model_instance }}</a>
                                     {% endif %}
                                 {% elif ledger.billmodel %}
                                     {% if perms.django_ledger.view_billmodel %}
-                                    <a href="{% url 'bill-detail' request.dealer.slug request.dealer.entity.slug ledger.billmodel.pk %}">{{ ledger.get_wrapped_model_instance }}</a>
+                                        <a href="{% url 'bill-detail' request.dealer.slug request.dealer.entity.slug ledger.billmodel.pk %}">{{ ledger.get_wrapped_model_instance }}</a>
                                     {% endif %}
                                 {% else %}
                                     <a href="#">{{ ledger.name }}</a>
@@ -47,19 +42,17 @@
                             </td>
                             <td class="align-middle product white-space-nowrap">
                                 {% if perms.django_ledger.view_journalentrymodel %}
-                                <a class="btn btn-sm btn-phoenix-primary"
-                                   href="{% url 'journalentry_list' request.dealer.slug ledger.pk %}">
-                                    <i class="fa-solid fa-right-left"></i>
-                                    <span>
-                                        <span class="has-text-weight-bold">{{ ledger.journal_entries__count }}</span>
-                                        <span>{{ _('Journal Entries') }}</span>
-                                    </span>
-                                </a>
+                                    <a class="btn btn-sm btn-phoenix-primary"
+                                       href="{% url 'journalentry_list' request.dealer.slug ledger.pk %}">
+                                        <i class="fa-solid fa-right-left"></i>
+                                        <span>
+                                            <span class="has-text-weight-bold">{{ ledger.journal_entries__count }}</span>
+                                            <span>{{ _("Journal Entries") }}</span>
+                                        </span>
+                                    </a>
                                 {% endif %}
                             </td>
-                            <td class="align-middle product white-space-nowrap">
-                                {{ ledger.created |date }}
-                            </td>
+                            <td class="align-middle product white-space-nowrap">{{ ledger.created |date }}</td>
                             <td class="align-middle product white-space-nowrap">
                                 {% if ledger.is_posted %}
                                     <i class="fa-solid fa-square-check text-success"></i>
@@ -76,49 +69,46 @@
                             </td>
                             <td class="align-middle white-space-nowrap text-start">
                                 <div class="btn-reveal-trigger position-static">
-                                    <button
-                                        class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
-                                        type="button"
-                                        data-bs-toggle="dropdown"
-                                        data-boundary="window"
-                                        aria-haspopup="true"
-                                        aria-expanded="false"
-                                        data-bs-reference="parent">
+                                    <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
+                                            type="button"
+                                            data-bs-toggle="dropdown"
+                                            data-boundary="window"
+                                            aria-haspopup="true"
+                                            aria-expanded="false"
+                                            data-bs-reference="parent">
                                         <span class="fas fa-ellipsis-h fs-10"></span>
                                     </button>
                                     <div class="dropdown-menu dropdown-menu-end py-2">
-                                    {% if perms.django_ledger.change_ledgermodel %}
-                                        {% if ledger.can_lock %}
-                                            <a href="{% url 'ledger-action-lock' dealer_slug=request.dealer.slug entity_slug=entity_slug ledger_pk=ledger.uuid %}"
-                                               class="dropdown-item has-text-info has-text-weight-bold">{% trans 'Lock' %}</a>
+                                        {% if perms.django_ledger.change_ledgermodel %}
+                                            {% if ledger.can_lock %}
+                                                <a href="{% url 'ledger-action-lock' dealer_slug=request.dealer.slug entity_slug=entity_slug ledger_pk=ledger.uuid %}"
+                                                   class="dropdown-item has-text-info has-text-weight-bold">{% trans 'Lock' %}</a>
+                                            {% endif %}
+                                            {% if ledger.can_unlock %}
+                                                <a href="{% url 'ledger-action-unlock' dealer_slug=request.dealer.slug entity_slug=entity_slug ledger_pk=ledger.uuid %}"
+                                                   class="dropdown-item has-text-warning has-text-weight-bold">{% trans 'UnLock' %}</a>
+                                            {% endif %}
+                                            {% if ledger.can_post %}
+                                                <a href="{% url 'ledger-action-post' dealer_slug=request.dealer.slug entity_slug=entity_slug ledger_pk=ledger.uuid %}"
+                                                   class="dropdown-item has-text-info has-text-weight-bold text-success">{% trans 'Post' %}</a>
+                                            {% endif %}
+                                            {% if ledger.can_unpost %}
+                                                <a href="{% url 'ledger-action-unpost' dealer_slug=request.dealer.slug entity_slug=entity_slug ledger_pk=ledger.uuid %}"
+                                                   class="dropdown-item has-text-warning has-text-weight-bold text-info">{% trans 'UnPost' %}</a>
+                                            {% endif %}
+                                            {% if ledger.can_hide %}
+                                                <a href="{% url 'ledger-action-hide' dealer_slug=request.dealer.slug entity_slug=entity_slug ledger_pk=ledger.uuid %}"
+                                                   class="dropdown-item has-text-warning has-text-weight-bold text-danger">{% trans 'Hide' %}</a>
+                                            {% endif %}
+                                            {% if ledger.can_unhide %}
+                                                <a href="{% url 'ledger-action-unhide' dealer_slug=request.dealer.slug entity_slug=entity_slug ledger_pk=ledger.uuid %}"
+                                                   class="dropdown-item has-text-danger has-text-weight-bold">{% trans 'UnHide' %}</a>
+                                            {% endif %}
+                                            {% if ledger.can_delete %}
+                                                <a href="{% url 'ledger-delete' dealer_slug=request.dealer.slug entity_slug=entity_slug ledger_pk=ledger.uuid %}"
+                                                   class="dropdown-item has-text-danger has-text-weight-bold text-danger">{% trans 'Delete' %}</a>
+                                            {% endif %}
                                         {% endif %}
-                                        {% if ledger.can_unlock %}
-                                            <a href="{% url 'ledger-action-unlock' dealer_slug=request.dealer.slug entity_slug=entity_slug ledger_pk=ledger.uuid %}"
-                                               class="dropdown-item has-text-warning has-text-weight-bold">{% trans 'UnLock' %}</a>
-                                        {% endif %}
-                                        {% if ledger.can_post %}
-                                            <a href="{% url 'ledger-action-post' dealer_slug=request.dealer.slug entity_slug=entity_slug ledger_pk=ledger.uuid %}"
-                                               class="dropdown-item has-text-info has-text-weight-bold text-success">{% trans 'Post' %}</a>
-                                        {% endif %}
-                                        {% if ledger.can_unpost %}
-                                            <a href="{% url 'ledger-action-unpost' dealer_slug=request.dealer.slug entity_slug=entity_slug ledger_pk=ledger.uuid %}"
-                                               class="dropdown-item has-text-warning has-text-weight-bold text-info">{% trans 'UnPost' %}</a>
-                                        {% endif %}
-
-                                        {% if ledger.can_hide %}
-                                            <a href="{% url 'ledger-action-hide' dealer_slug=request.dealer.slug entity_slug=entity_slug ledger_pk=ledger.uuid %}"
-                                               class="dropdown-item has-text-warning has-text-weight-bold text-danger">{% trans 'Hide' %}</a>
-                                        {% endif %}
-                                        {% if ledger.can_unhide %}
-                                            <a href="{% url 'ledger-action-unhide' dealer_slug=request.dealer.slug entity_slug=entity_slug ledger_pk=ledger.uuid %}"
-                                               class="dropdown-item has-text-danger has-text-weight-bold">{% trans 'UnHide' %}</a>
-                                        {% endif %}
-
-                                        {% if ledger.can_delete %}
-                                            <a href="{% url 'ledger-delete' dealer_slug=request.dealer.slug entity_slug=entity_slug ledger_pk=ledger.uuid %}"
-                                               class="dropdown-item has-text-danger has-text-weight-bold text-danger">{% trans 'Delete' %}</a>
-                                        {% endif %}
-                                     {% endif %}
                                     </div>
                                 </div>
                             </td>
@@ -132,14 +122,9 @@
             </table>
         </div>
         {% if page_obj.paginator.num_pages > 1 %}
-
             <div class="d-flex justify-content-end mt-3">
-
-                <div class="d-flex">
-                    {% include 'partials/pagination.html'%}
-                </div>
-
+                <div class="d-flex">{% include 'partials/pagination.html' %}</div>
             </div>
         {% endif %}
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/ledger/reports/balance_sheet.html b/templates/ledger/reports/balance_sheet.html
index 89e30462..c3f9d27a 100644
--- a/templates/ledger/reports/balance_sheet.html
+++ b/templates/ledger/reports/balance_sheet.html
@@ -2,55 +2,53 @@
 {% load i18n %}
 {% load static %}
 {% load custom_filters %}
-{%block title%}{%trans 'Balance Sheet'%} {%endblock%}
-
-{% block period_navigation %}
-    {% if entity %}
+{% block title %}
+    {% trans 'Balance Sheet' %} {% endblock %}
+    {% block period_navigation %}
+        {% if entity %}
+            <div class="row mb-4">
+                <div class="col-12">{% period_navigation 'entity-bs' %}</div>
+            </div>
+        {% elif ledger %}
+            <div class="row mb-4">
+                <div class="col-12">{% period_navigation 'ledger-bs' %}</div>
+            </div>
+        {% elif unit_model %}
+            <div class="row mb-4">
+                <div class="col-12">{% period_navigation 'unit-bs' %}</div>
+            </div>
+        {% endif %}
+    {% endblock %}
+    {% block content %}
         <div class="row mb-4">
-            <div class="col-12">{% period_navigation 'entity-bs' %}</div>
-        </div>
-    {% elif ledger %}
-        <div class="row mb-4">
-            <div class="col-12">{% period_navigation 'ledger-bs' %}</div>
-        </div>
-    {% elif unit_model %}
-        <div class="row mb-4">
-            <div class="col-12">{% period_navigation 'unit-bs' %}</div>
-        </div>
-    {% endif %}
-{% endblock %}
-
-
-{% block content %}
-    <div class="row mb-4">
-        <div class="card shadow-sm border-0 p-6">
-            <div class="card-body">
-                <div class="text-center mb-5">
-                    {% if entity %}
-                        <h1 class="display-4 fw-light">{{ entity.name }}</h1>
-                    {% elif ledger %}
-                        <h1 class="display-4 fw-light">{{ ledger.name }}</h1>
-                    {% elif unit_model %}
-                        <h1 class="display-4 fw-light">{{ ledger.name }}</h1>
-                    {% endif %}
-                    <h1 class="display-4 fw-bold">{% trans 'Balance Sheet' %}</h1>
-                    {% if unit_model %}
-                        <h3 class="h2 fw-medium fst-italic">{{ unit_model.name }} {% trans 'Unit' %}</h3>
-                    {% endif %}
-                    <h2 class="display-6 fw-light">
-                        {% if quarter %}{{ year }} | Q{{ quarter }}
-                        {% elif month %}{{ from_date | date:'F, Y' }}
-                        {% else %}{% trans 'Fiscal Year' %} {{ year }}
+            <div class="card shadow-sm border-0 p-6">
+                <div class="card-body">
+                    <div class="text-center mb-5">
+                        {% if entity %}
+                            <h1 class="display-4 fw-light">{{ entity.name }}</h1>
+                        {% elif ledger %}
+                            <h1 class="display-4 fw-light">{{ ledger.name }}</h1>
+                        {% elif unit_model %}
+                            <h1 class="display-4 fw-light">{{ ledger.name }}</h1>
                         {% endif %}
-                    </h2>
-                    <p class="h5 fst-italic fw-light">As of {{ to_date | date:'m/d/Y' }}</p>
-                </div>
-
-            <!-- Balance Sheet Statement -->
-                <div class="table-responsive">
-                    {% balance_sheet_statement io_model=object %}
+                        <h1 class="display-4 fw-bold">{% trans 'Balance Sheet' %}</h1>
+                        {% if unit_model %}
+                            <h3 class="h2 fw-medium fst-italic">{{ unit_model.name }} {% trans 'Unit' %}</h3>
+                        {% endif %}
+                        <h2 class="display-6 fw-light">
+                            {% if quarter %}
+                                {{ year }} | Q{{ quarter }}
+                            {% elif month %}
+                                {{ from_date | date:'F, Y' }}
+                            {% else %}
+                                {% trans 'Fiscal Year' %} {{ year }}
+                            {% endif %}
+                        </h2>
+                        <p class="h5 fst-italic fw-light">As of {{ to_date | date:'m/d/Y' }}</p>
+                    </div>
+                    <!-- Balance Sheet Statement -->
+                    <div class="table-responsive">{% balance_sheet_statement io_model=object %}</div>
                 </div>
             </div>
         </div>
-    </div>
-{% endblock %}
+    {% endblock %}
diff --git a/templates/ledger/reports/cash_flow_statement.html b/templates/ledger/reports/cash_flow_statement.html
index c0de2bc6..02e664be 100644
--- a/templates/ledger/reports/cash_flow_statement.html
+++ b/templates/ledger/reports/cash_flow_statement.html
@@ -2,51 +2,52 @@
 {% load i18n %}
 {% load static %}
 {% load custom_filters %}
-{%block title%}{%trans 'Cash Flow Statement'%} {%endblock%}
-{% block period_navigation %}
-    {% if unit_model and entity %}
-        <div class="col-12">{% period_navigation 'unit-cf' %}</div>
-    {% elif entity %}
-        <div class="col-12">{% period_navigation 'entity-cf' %}</div>
-    {% elif ledger %}
-        <div class="col-12">{% period_navigation 'ledger-cf' %}</div>
-    {% elif unit_model %}
-        <div class="col-12">{% period_navigation 'unit-cf' %}</div>
-    {% endif %}
-{% endblock %}
-
-{% block content %}
-    <div class="card">
-        <div class="card-body text-center">
-            <div class="container mb-4">
-                <div class="row">
-                    <div class="col">
-                        {% if unit_model and entity %}
-                            <h1 class="display-4 font-weight-light">{{ entity.name }}</h1>
-                        {% elif entity %}
-                            <h1 class="display-4 font-weight-light">{{ entity.name }}</h1>
-                        {% elif ledger %}
-                            <h1 class="display-4 font-weight-light">{{ ledger.name }}</h1>
-                        {% endif %}
-                        <h1 class="display-4 font-weight-bold">{% trans 'Cash Flow Statement' %}</h1>
-                        {% if unit_model %}
-                            <h3 class="h4 font-weight-bold text-success">{{ unit_model.name }} {% trans 'Unit' %}</h3>
-                        {% endif %}
-                        <h2 class="display-4 font-weight-light">
-                            {% if quarter %}{{ year }} | Q{{ quarter }}
-                            {% elif month %}{{ start_date | date:'F, Y' }}
-                            {% else %}{% trans 'Fiscal Year' %} {{ year }}
-                            {% endif %}</h2>
-                        <h3 class="h4 font-italic font-weight-light">
-                            {{ from_date | date:'m/d/Y' }} - {{ to_date | date:'m/d/Y' }}
-                        </h3>
+{% block title %}
+    {% trans 'Cash Flow Statement' %} {% endblock %}
+    {% block period_navigation %}
+        {% if unit_model and entity %}
+            <div class="col-12">{% period_navigation 'unit-cf' %}</div>
+        {% elif entity %}
+            <div class="col-12">{% period_navigation 'entity-cf' %}</div>
+        {% elif ledger %}
+            <div class="col-12">{% period_navigation 'ledger-cf' %}</div>
+        {% elif unit_model %}
+            <div class="col-12">{% period_navigation 'unit-cf' %}</div>
+        {% endif %}
+    {% endblock %}
+    {% block content %}
+        <div class="card">
+            <div class="card-body text-center">
+                <div class="container mb-4">
+                    <div class="row">
+                        <div class="col">
+                            {% if unit_model and entity %}
+                                <h1 class="display-4 font-weight-light">{{ entity.name }}</h1>
+                            {% elif entity %}
+                                <h1 class="display-4 font-weight-light">{{ entity.name }}</h1>
+                            {% elif ledger %}
+                                <h1 class="display-4 font-weight-light">{{ ledger.name }}</h1>
+                            {% endif %}
+                            <h1 class="display-4 font-weight-bold">{% trans 'Cash Flow Statement' %}</h1>
+                            {% if unit_model %}
+                                <h3 class="h4 font-weight-bold text-success">{{ unit_model.name }} {% trans 'Unit' %}</h3>
+                            {% endif %}
+                            <h2 class="display-4 font-weight-light">
+                                {% if quarter %}
+                                    {{ year }} | Q{{ quarter }}
+                                {% elif month %}
+                                    {{ start_date | date:'F, Y' }}
+                                {% else %}
+                                    {% trans 'Fiscal Year' %} {{ year }}
+                                {% endif %}
+                            </h2>
+                            <h3 class="h4 font-italic font-weight-light">{{ from_date | date:'m/d/Y' }} - {{ to_date | date:'m/d/Y' }}</h3>
+                        </div>
                     </div>
                 </div>
+                {% cash_flow_statement io_model=object %}
+                <a class="btn btn-phoenix-primary w-100 my-2"
+                   href="{{ request.path }}?format=pdf"><i class="fa-solid fa-arrow-down me-1"></i>{% trans 'Download PDF' %}</a>
             </div>
-
-            {% cash_flow_statement io_model=object %}
-            <a class="btn btn-phoenix-primary w-100 my-2"
-               href="{{ request.path }}?format=pdf"><i class="fa-solid fa-arrow-down me-1"></i>{% trans 'Download PDF' %}</a>
         </div>
-    </div>
-{% endblock %}
\ No newline at end of file
+    {% endblock %}
diff --git a/templates/ledger/reports/components/date_picker.html b/templates/ledger/reports/components/date_picker.html
index 5dc57944..2ad5f067 100644
--- a/templates/ledger/reports/components/date_picker.html
+++ b/templates/ledger/reports/components/date_picker.html
@@ -1,7 +1,6 @@
 {% load i18n %}
-
 {% if date_navigation_url %}
-    <button id="{{ date_picker_id }}" data-baseurl="{{ date_navigation_url }}"
+    <button id="{{ date_picker_id }}"
+            data-baseurl="{{ date_navigation_url }}"
             class="button is-small is-rounded is-dark is-outlined">{% trans 'Select Date' %}</button>
 {% endif %}
-
diff --git a/templates/ledger/reports/components/period_navigator.html b/templates/ledger/reports/components/period_navigator.html
index 96bfb3f7..d92f3bb2 100644
--- a/templates/ledger/reports/components/period_navigator.html
+++ b/templates/ledger/reports/components/period_navigator.html
@@ -1,46 +1,43 @@
 {% load django_ledger %}
-
 {% load i18n %}
 {% get_current_language as LANGUAGE_CODE %}
-
 <div class="card shadow-sm">
     <div class="card-body">
         <!-- Header Section -->
         <div class="text-center mb-4">
             <h2 class="display-4 fw-medium">
-                {% if has_year %}{{ _("Fiscal Year")}} {{ to_date.year }}{% endif %}
+                {% if has_year %}{{ _("Fiscal Year") }} {{ to_date.year }}{% endif %}
                 {% if has_month %}{{ to_date | date:"F Y" }}{% endif %}
                 {% if has_quarter %}Q{{ quarter }} {{ year }}{% endif %}
                 {% if has_date %}{{ to_date | date }}{% endif %}
             </h2>
         </div>
-
         <!-- Year Navigation -->
         <div class="text-center mb-3">
             <p class="mb-1">
-                <span class="fw-bold">{{ _("Year") }}: </span>
+                <span class="fw-bold">{{ _("Year") }}:</span>
                 <a href="{{ previous_year_url }}" class="text-decoration-none me-2">
                     {% if LANGUAGE_CODE == 'ar' %}
-                        <span class="fas fa-chevron-right"> </span>
-                        <span class="fas fa-chevron-right"> </span>
+                        <span class="fas fa-chevron-right"></span>
+                        <span class="fas fa-chevron-right"></span>
                     {% else %}
-                        <span class="fas fa-chevron-left"> </span>
-                        <span class="fas fa-chevron-left"> </span>
+                        <span class="fas fa-chevron-left"></span>
+                        <span class="fas fa-chevron-left"></span>
                     {% endif %}
-                    {{ previous_year }}</a>
-                <a href="{{ current_year_url }}" class="text-decoration-none me-2 fw-bolder">{{ year }}</a>
+                {{ previous_year }}</a>
+                <a href="{{ current_year_url }}"
+                   class="text-decoration-none me-2 fw-bolder">{{ year }}</a>
                 <a href="{{ next_year_url }}" class="text-decoration-none">{{ next_year }}
                     {% if LANGUAGE_CODE == 'ar' %}
-                        <span class="fas fa-chevron-left"> </span>
-                        <span class="fas fa-chevron-left"> </span>
+                        <span class="fas fa-chevron-left"></span>
+                        <span class="fas fa-chevron-left"></span>
                     {% else %}
-                        <span class="fas fa-chevron-right"> </span>
-                        <span class="fas fa-chevron-right"> </span>
+                        <span class="fas fa-chevron-right"></span>
+                        <span class="fas fa-chevron-right"></span>
                     {% endif %}
                 </a>
             </p>
         </div>
-
         <!-- Quarter Navigation -->
         <div class="text-center mb-3">
             <p class="mb-1">
@@ -51,7 +48,6 @@
                 {% endfor %}
             </p>
         </div>
-
         <!-- Month Navigation -->
         <div class="text-center mb-4">
             <p class="mb-1">
@@ -62,7 +58,6 @@
                 {% endfor %}
             </p>
         </div>
-
         <!-- Date Range -->
         <div class="text-center mb-4">
             {% if has_date %}
@@ -75,12 +70,10 @@
                 </p>
             {% endif %}
         </div>
-
         <!-- Current Month Link -->
         <div class="text-center mb-4">
-            <a href="{{ current_month_url }}" class="btn btn-link text-decoration-none">
-                {% trans 'Go To Current Month' %}
-            </a>
+            <a href="{{ current_month_url }}"
+               class="btn btn-link text-decoration-none">{% trans 'Go To Current Month' %}</a>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/ledger/reports/dashboard-copy.html b/templates/ledger/reports/dashboard-copy.html
index ef5e5780..2e160a25 100644
--- a/templates/ledger/reports/dashboard-copy.html
+++ b/templates/ledger/reports/dashboard-copy.html
@@ -2,9 +2,10 @@
 {% load i18n %}
 {% load static %}
 {% load django_ledger %}
-
 {% block content %}
-    <div id="chart" class="echart-basic-bar-chart-example" style="min-height:300px"></div>
+    <div id="chart"
+         class="echart-basic-bar-chart-example"
+         style="min-height:300px"></div>
     <section class="py-5">
         <div class="container-fluid">
             <div class="row">
@@ -13,28 +14,19 @@
                 </div>
                 <div class="col-lg-9">
                     <div class="row row-cols-1 row-cols-md-2 g-4">
-                        <div class="col">
-                            {% include 'django_ledger/includes/widget_bs.html' with tx_digest=tx_digest %}
-                        </div>
-                        <div class="col">
-                            {% include 'django_ledger/includes/widget_ic.html' with tx_digest=equity_digest %}
-                        </div>
+                        <div class="col">{% include 'django_ledger/includes/widget_bs.html' with tx_digest=tx_digest %}</div>
+                        <div class="col">{% include 'django_ledger/includes/widget_ic.html' with tx_digest=equity_digest %}</div>
                         <div class="col-md-8">
                             <div class="card shadow-sm">
-                                <div class="card-body">
-                                    {% chart_container pnl_chart_id pnl_chart_endpoint %}
-                                </div>
+                                <div class="card-body">{% chart_container pnl_chart_id pnl_chart_endpoint %}</div>
                             </div>
                         </div>
-                        <div class="col-md-4">
-                            {% include 'django_ledger/includes/widget_ratios.html' with tx_digest=tx_digest %}
-                        </div>
+                        <div class="col-md-4">{% include 'django_ledger/includes/widget_ratios.html' with tx_digest=tx_digest %}</div>
                     </div>
                 </div>
             </div>
         </div>
     </section>
-
     {# RECEIVABLES SECTION START #}
     <section class="bg-light py-5">
         <div class="container">
@@ -48,9 +40,7 @@
                 {% if invoices %}
                     <div class="col">
                         <div class="card shadow-sm">
-                            <div class="card-body">
-                                {% chart_container receivables_chart_id receivables_chart_endpoint %}
-                            </div>
+                            <div class="card-body">{% chart_container receivables_chart_id receivables_chart_endpoint %}</div>
                         </div>
                     </div>
                 {% endif %}
@@ -66,7 +56,6 @@
         </div>
     </section>
     {# RECEIVABLES SECTION END #}
-
     {# PAYABLES SECTION START #}
     <section class="bg-light py-5">
         <div class="container">
@@ -80,9 +69,7 @@
                 {% if bills %}
                     <div class="col">
                         <div class="card shadow-sm">
-                            <div class="card-body">
-                                {% chart_container payables_chart_id payables_chart_endpoint %}
-                            </div>
+                            <div class="card-body">{% chart_container payables_chart_id payables_chart_endpoint %}</div>
                         </div>
                     </div>
                 {% endif %}
@@ -98,9 +85,8 @@
         </div>
     </section>
     {# PAYABLES SECTION END #}
-    {{payables_chart_endpoint}}
+    {{ payables_chart_endpoint }}
 {% endblock %}
-
 {% block customJS %}
     <script type="text/javascript">
         // Initialize the echarts instance based on the prepared dom
@@ -136,4 +122,4 @@
         // Display the chart using the configuration items and data just specified.
         myChart.setOption(option);
     </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/ledger/reports/dashboard.html b/templates/ledger/reports/dashboard.html
index 95abeac5..661a00f1 100644
--- a/templates/ledger/reports/dashboard.html
+++ b/templates/ledger/reports/dashboard.html
@@ -2,11 +2,8 @@
 {% load i18n %}
 {% load static %}
 {% load django_ledger %}
-
 {% block content %}
-    <style id="apexcharts-css">
-
-    </style>
+    <style id="apexcharts-css"></style>
     <div class="pb-6">
         <div class="row align-items-center justify-content-between g-3 mb-6">
             <div class="col-12 col-md-auto">
@@ -15,20 +12,32 @@
         </div>
         <div class="px-3 mb-6">
             <div class="row justify-content-between">
-                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 "><i class="fa-solid fa-landmark-dome fs-5 lh-1 text-primary"></i>
-                    <h1 class="fs-5 pt-3"><span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_ASSETS | currency_format }}</h1>
+                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0">
+                    <i class="fa-solid fa-landmark-dome fs-5 lh-1 text-primary"></i>
+                    <h1 class="fs-5 pt-3">
+                        <span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_ASSETS | currency_format }}
+                    </h1>
                     <p class="fs-9 mb-0">{{ _("Assets") }}</p>
                 </div>
-                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end-md border-bottom pb-4 pb-xxl-0"><i class="fa-solid fa-weight-hanging fs-5 lh-1 text-primary"></i>
-                    <h1 class="fs-5 pt-3"><span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_LIABILITIES | currency_format }}</h1>
+                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end-md border-bottom pb-4 pb-xxl-0">
+                    <i class="fa-solid fa-weight-hanging fs-5 lh-1 text-primary"></i>
+                    <h1 class="fs-5 pt-3">
+                        <span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_LIABILITIES | currency_format }}
+                    </h1>
                     <p class="fs-9 mb-0">{{ _("Liabilities") }}</p>
                 </div>
-                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-bottom-xxl-0 border-bottom border-end border-end-md-0 pb-4 pb-xxl-0 pt-4 pt-md-0"><i class="fa-solid fa-scale-balanced fs-5 lh-1 text-primary"></i>
-                    <h1 class="fs-5 pt-3"><span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_EQUITY | currency_format }}</h1>
+                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-bottom-xxl-0 border-bottom border-end border-end-md-0 pb-4 pb-xxl-0 pt-4 pt-md-0">
+                    <i class="fa-solid fa-scale-balanced fs-5 lh-1 text-primary"></i>
+                    <h1 class="fs-5 pt-3">
+                        <span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_EQUITY | currency_format }}
+                    </h1>
                     <p class="fs-9 mb-0">{{ _("Equity") }}</p>
                 </div>
-                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-md border-end-xxl-0 border-bottom border-bottom-md-0 pb-4 pb-xxl-0 pt-4 pt-xxl-0"><i class="fa-solid fs-5 lh-1 text-success fa-money-bill"></i>
-                    <h1 class="fs-5 pt-3"><span class="icon-saudi_riyal"></span>{{ tx_digest.role_balance.ASSET_CA_CASH | currency_format }}</h1>
+                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-md border-end-xxl-0 border-bottom border-bottom-md-0 pb-4 pb-xxl-0 pt-4 pt-xxl-0">
+                    <i class="fa-solid fs-5 lh-1 text-success fa-money-bill"></i>
+                    <h1 class="fs-5 pt-3">
+                        <span class="icon-saudi_riyal"></span>{{ tx_digest.role_balance.ASSET_CA_CASH | currency_format }}
+                    </h1>
                     <p class="fs-9 mb-0">{{ _("Cash") }}</p>
                 </div>
             </div>
@@ -36,97 +45,99 @@
         <div class="col-12 col-md-auto">
             <h2 class="mb-0"></h2>
         </div>
-
         <div class="px-3 mb-6">
             <div class="row justify-content-between">
-                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 "><i class="fa-solid fa-coins fs-5 lh-1 text-primary"></i>
-                    <h1 class="fs-5 pt-3"><span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_INCOME | currency_format }}</h1>
+                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0">
+                    <i class="fa-solid fa-coins fs-5 lh-1 text-primary"></i>
+                    <h1 class="fs-5 pt-3">
+                        <span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_INCOME | currency_format }}
+                    </h1>
                     <p class="fs-9 mb-0">{{ _("Revenue") }}</p>
                 </div>
-                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end-md border-bottom pb-4 pb-xxl-0"><i class="fa-solid fa-hand-holding-dollar fs-5 lh-1 text-danger"></i>
-                    <h1 class="fs-5 pt-3"><span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_EXPENSES | reverse_sign | currency_format }}</h1>
+                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end-md border-bottom pb-4 pb-xxl-0">
+                    <i class="fa-solid fa-hand-holding-dollar fs-5 lh-1 text-danger"></i>
+                    <h1 class="fs-5 pt-3">
+                        <span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_EXPENSES | reverse_sign | currency_format }}
+                    </h1>
                     <p class="fs-9 mb-0">{{ _("Expenses") }}</p>
                 </div>
-                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-bottom-xxl-0 border-bottom border-end border-end-md-0 pb-4 pb-xxl-0 pt-4 pt-md-0"><i class="fa-solid fa-sack-dollar fs-5 lh-1 text-primary"></i>
-                    <h1 class="fs-5 pt-3"><span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_EARNINGS | currency_format }}</h1>
-                    <p class="fs-9 mb-0">{{ _("Earnings (Loss)")}}</p>
+                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-bottom-xxl-0 border-bottom border-end border-end-md-0 pb-4 pb-xxl-0 pt-4 pt-md-0">
+                    <i class="fa-solid fa-sack-dollar fs-5 lh-1 text-primary"></i>
+                    <h1 class="fs-5 pt-3">
+                        <span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_EARNINGS | currency_format }}
+                    </h1>
+                    <p class="fs-9 mb-0">{{ _("Earnings (Loss)") }}</p>
+                </div>
+                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-md border-end-xxl-0 border-bottom border-bottom-md-0 pb-4 pb-xxl-0 pt-4 pt-xxl-0">
                 </div>
-                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-md border-end-xxl-0 border-bottom border-bottom-md-0 pb-4 pb-xxl-0 pt-4 pt-xxl-0"></div>
             </div>
         </div>
         <div class="mx-n4 px-4 mx-lg-n6 px-lg-6 bg-body-emphasis pt-6 pb-3 border-y">
             <div class="row gx-6">
                 <div class="col-12 col-md-6 col-lg-12 col-xl-6 mb-5 mb-md-3 mb-lg-5 mb-xl-2 mb-xxl-3">
                     <div class="scrollbar">
-                        <h3>{{ _("Net Receivables")}}</h3>
-                        <p class="text-body-tertiary">{{ _("According to the sales data")}}.</p>
-                        <div id="net_receivable_chart" class="echart-doughnut-rounded-chart-example" style="min-height:320px"></div>
+                        <h3>{{ _("Net Receivables") }}</h3>
+                        <p class="text-body-tertiary">{{ _("According to the sales data") }}.</p>
+                        <div id="net_receivable_chart"
+                             class="echart-doughnut-rounded-chart-example"
+                             style="min-height:320px"></div>
                     </div>
                 </div>
                 <div class="col-12 col-md-6 col-lg-12 col-xl-6 mb-1 mb-sm-0">
-
                     <div class="row g-3 align-items-center">
-
                         <div class="col-sm-4 col-md-12 col-lg-8 col-xl-12 col-xxl-12 d-flex justify-content-end-xxl mt-0">
                             <div class="d-flex flex-1 justify-content-center d-sm-block d-md-flex d-lg-block d-xl-flex d-xxl-block gap-3">
-
                                 <div class="mb-4 me-6 me-sm-0 me-md-6 me-lg-0 me-xl-6 me-xxl-0">
-                                    <h3 class="">{{ _("Financial Analysis")}}</h3>
+                                    <h3 class="">{{ _("Financial Analysis") }}</h3>
                                     <h4>{{ _("Solvency") }}:</h4>
-                                    <h5 class="progress-bar">{{ _("Current Ratio")}}: {{ tx_digest.ratios.current_ratio | currency_format }}</h5>
+                                    <h5 class="progress-bar">{{ _("Current Ratio") }}: {{ tx_digest.ratios.current_ratio | currency_format }}</h5>
                                     <div class="progress" style="height:12px">
-                                        <progress
-                                            class="progress-bar {{ tx_digest.ratios.current_ratio | fin_ratio_threshold_class:'current_ratio' }}"
-                                            value="{{ tx_digest.ratios.current_ratio }}"
-                                            max="{% fin_ratio_max_value ratio='current_ratio' %}">
-                                            {{ tx_digest.ratios.current_ratio }}</progress></div>
-                                    <h5 class="progress-bar">{{ _("Quick Ratio")}}: {{ tx_digest.ratios.quick_ratio | currency_format }} </h5>
+                                        <progress class="progress-bar {{ tx_digest.ratios.current_ratio | fin_ratio_threshold_class:'current_ratio' }}"
+                                                  value="{{ tx_digest.ratios.current_ratio }}"
+                                                  max="{% fin_ratio_max_value ratio='current_ratio' %}">
+                                        {{ tx_digest.ratios.current_ratio }}</progress>
+                                    </div>
+                                    <h5 class="progress-bar">{{ _("Quick Ratio") }}: {{ tx_digest.ratios.quick_ratio | currency_format }}</h5>
                                     <div class="progress" style="height:12px">
-                                        <progress
-                                            class="progress-bar {{ tx_digest.ratios.quick_ratio | fin_ratio_threshold_class:'quick_ratio' }}"
-                                            value="{{ tx_digest.ratios.quick_ratio }}"
-                                            max="{% fin_ratio_max_value ratio='quick_ratio' %}">
-                                            {{ tx_digest.ratios.current_ratio }}</progress></div>
-
+                                        <progress class="progress-bar {{ tx_digest.ratios.quick_ratio | fin_ratio_threshold_class:'quick_ratio' }}"
+                                                  value="{{ tx_digest.ratios.quick_ratio }}"
+                                                  max="{% fin_ratio_max_value ratio='quick_ratio' %}">
+                                        {{ tx_digest.ratios.current_ratio }}</progress>
+                                    </div>
                                     <h4>{{ _("Leverage") }}:</h4>
-                                    <h5 class="progress-bar">{{ _("Debt to Equity")}}: {{ tx_digest.ratios.debt_to_equity | currency_format }} </h5>
+                                    <h5 class="progress-bar">{{ _("Debt to Equity") }}: {{ tx_digest.ratios.debt_to_equity | currency_format }}</h5>
                                     <div class="progress" style="height:12px">
-                                        <progress
-                                            class="progress-bar {{ tx_digest.ratios.debt_to_equity | fin_ratio_threshold_class:'debt_to_equity' }}"
-                                            value="{{ tx_digest.ratios.debt_to_equity }}"
-                                            max="{% fin_ratio_max_value ratio='debt_to_equity' %}">
-                                            {{ tx_digest.ratios.debt_to_equity }}</progress></div>
-
-
+                                        <progress class="progress-bar {{ tx_digest.ratios.debt_to_equity | fin_ratio_threshold_class:'debt_to_equity' }}"
+                                                  value="{{ tx_digest.ratios.debt_to_equity }}"
+                                                  max="{% fin_ratio_max_value ratio='debt_to_equity' %}">
+                                        {{ tx_digest.ratios.debt_to_equity }}</progress>
+                                    </div>
                                     <h4>{{ _("Profitability") }}:</h4>
-                                    <h5 class="progress-bar">{{ _("Return on Equity")}}: {{ tx_digest.ratios.return_on_equity | percentage }} </h5>
+                                    <h5 class="progress-bar">{{ _("Return on Equity") }}: {{ tx_digest.ratios.return_on_equity | percentage }}</h5>
                                     <div class="progress" style="height:12px">
-                                        <progress
-                                            class="progress-bar bg-info {{ tx_digest.ratios.quick_ratio | fin_ratio_threshold_class:'quick_ratio' }}"
-                                            value="{{ tx_digest.ratios.return_on_equity }}"
-                                            max="{% fin_ratio_max_value ratio='return_on_equity' %}">
-                                            {{ tx_digest.ratios.return_on_equity }}</progress></div>
-
-                                    <h5 class="progress-bar">{{ _("Return on Assets")}}: {{ tx_digest.ratios.return_on_assets | percentage }} </h5>
+                                        <progress class="progress-bar bg-info {{ tx_digest.ratios.quick_ratio | fin_ratio_threshold_class:'quick_ratio' }}"
+                                                  value="{{ tx_digest.ratios.return_on_equity }}"
+                                                  max="{% fin_ratio_max_value ratio='return_on_equity' %}">
+                                        {{ tx_digest.ratios.return_on_equity }}</progress>
+                                    </div>
+                                    <h5 class="progress-bar">{{ _("Return on Assets") }}: {{ tx_digest.ratios.return_on_assets | percentage }}</h5>
                                     <div class="progress" style="height:12px">
-                                        <progress
-                                            class="progress-bar {{ tx_digest.ratios.return_on_assets | fin_ratio_threshold_class:'return_on_assets' }}"
-                                            value="{{ tx_digest.ratios.return_on_assets }}"
-                                            max="{% fin_ratio_max_value ratio='return_on_assets' %}">{{ tx_digest.ratios.return_on_assets }}</progress></div>
-
-                                    <h5 class="progress-bar">{{ _("Net Profit Margin")}}: {{ tx_digest.ratios.net_profit_margin | percentage }} </h5>
+                                        <progress class="progress-bar {{ tx_digest.ratios.return_on_assets | fin_ratio_threshold_class:'return_on_assets' }}"
+                                                  value="{{ tx_digest.ratios.return_on_assets }}"
+                                                  max="{% fin_ratio_max_value ratio='return_on_assets' %}">{{ tx_digest.ratios.return_on_assets }}</progress>
+                                    </div>
+                                    <h5 class="progress-bar">{{ _("Net Profit Margin") }}: {{ tx_digest.ratios.net_profit_margin | percentage }}</h5>
                                     <div class="progress" style="height:12px">
-                                        <progress
-                                            class="progress-bar {{ tx_digest.ratios.net_profit_margin | fin_ratio_threshold_class:'net_profit_margin' }}"
-                                            value="{{ tx_digest.ratios.net_profit_margin }}"
-                                            max="{% fin_ratio_max_value ratio='net_profit_margin' %}">{{ tx_digest.ratios.net_profit_margin }}</progress></div>
-
-                                    <h5 class="progress-bar">{{ _("Gross Profit Margin")}}: {{ tx_digest.ratios.gross_profit_margin | percentage }} </h5>
+                                        <progress class="progress-bar {{ tx_digest.ratios.net_profit_margin | fin_ratio_threshold_class:'net_profit_margin' }}"
+                                                  value="{{ tx_digest.ratios.net_profit_margin }}"
+                                                  max="{% fin_ratio_max_value ratio='net_profit_margin' %}">{{ tx_digest.ratios.net_profit_margin }}</progress>
+                                    </div>
+                                    <h5 class="progress-bar">{{ _("Gross Profit Margin") }}: {{ tx_digest.ratios.gross_profit_margin | percentage }}</h5>
                                     <div class="progress" style="height:12px">
-                                        <progress
-                                            class="progress-bar {{ tx_digest.ratios.gross_profit_margin | fin_ratio_threshold_class:'gross_profit_margin' }}"
-                                            value="{{ tx_digest.ratios.gross_profit_margin }}"
-                                            max="{% fin_ratio_max_value ratio='gross_profit_margin' %}">{{ tx_digest.ratios.gross_profit_margin }}</progress></div>
+                                        <progress class="progress-bar {{ tx_digest.ratios.gross_profit_margin | fin_ratio_threshold_class:'gross_profit_margin' }}"
+                                                  value="{{ tx_digest.ratios.gross_profit_margin }}"
+                                                  max="{% fin_ratio_max_value ratio='gross_profit_margin' %}">{{ tx_digest.ratios.gross_profit_margin }}</progress>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -141,31 +152,37 @@
                         <h3 id="dataContainer"></h3>
                         <div class="col-6 col-md-3">
                             <div class="">
-                                <label class="form-label" for="datepicker">{{ _("Start Date")}}</label>
-                                <input id="startDate" class="form-control datetimepicker flatpickr-input" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" type="date" placeholder="dd/mm/yyyy" data-options="{'disableMobile':true,'dateFormat';:'Y-m-d'}" readonly="readonly">
+                                <label class="form-label" for="datepicker">{{ _("Start Date") }}</label>
+                                <input id="startDate"
+                                       class="form-control datetimepicker flatpickr-input"
+                                       pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"
+                                       type="date"
+                                       placeholder="dd/mm/yyyy"
+                                       data-options="{'disableMobile':true,'dateFormat';:'Y-m-d'}"
+                                       readonly="readonly">
                             </div>
                             <div>
-                                <label class="form-label" for="datepicker">{{ _("End Date")}}</label>
-                                <input id="endDate" class="form-control datetimepicker flatpickr-input" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" type="date" placeholder="dd/mm/yyyy" data-options="{'disableMobile':true,'dateFormat':'Y-m-d'}" readonly="readonly">
+                                <label class="form-label" for="datepicker">{{ _("End Date") }}</label>
+                                <input id="endDate"
+                                       class="form-control datetimepicker flatpickr-input"
+                                       pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"
+                                       type="date"
+                                       placeholder="dd/mm/yyyy"
+                                       data-options="{'disableMobile':true,'dateFormat':'Y-m-d'}"
+                                       readonly="readonly">
                             </div>
                             <button id="apply_filter" class="btn btn-phoenix-primary mt-3" type="submit">{{ _("Apply") }}</button>
                         </div>
-
-                        <div id="net_receivable_chart1" class="echart-doughnut-rounded-chart-example col-12" style="min-height:450px"></div>
+                        <div id="net_receivable_chart1"
+                             class="echart-doughnut-rounded-chart-example col-12"
+                             style="min-height:450px"></div>
                     </div>
                 </div>
-
-            </div>
-            <div class="col-12 col-md-6">
-
             </div>
+            <div class="col-12 col-md-6"></div>
         </div>
-
     </div>
-
-
 {% endblock %}
-
 {% block customJS %}
     <script type="text/javascript">
         let myChart;
@@ -314,4 +331,4 @@
 
         chart.render();
     </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/ledger/reports/income_statement.html b/templates/ledger/reports/income_statement.html
index 50aa5e3b..0422816f 100644
--- a/templates/ledger/reports/income_statement.html
+++ b/templates/ledger/reports/income_statement.html
@@ -2,50 +2,48 @@
 {% load i18n %}
 {% load static %}
 {% load custom_filters %}
-{%block title%}{%trans 'Income Statement'%} {%endblock%}
-{% block period_navigation %}
-    {% if unit_model %}
-        <div class="col-12">{% period_navigation 'unit-ic' %}</div>
-    {% elif entity %}
-        <div class="col-12">{% period_navigation 'entity-ic' %}</div>
-    {% elif ledger %}
-        <div class="col-12">{% period_navigation 'ledger-ic' %}</div>
-    {% endif %}
-{% endblock %}
-
-{% block content %}
-    <div class="card">
-        <div class="card-body text-center">
-            <div class="container mb-4">
-                <div class="row">
-                    <div class="col">
-                        {% if entity %}
-                            <h1 class="display-4 font-weight-light">{{ entity.name }}</h1>
-                        {% elif ledger %}
-                            <h1 class="display-4 font-weight-light">{{ ledger.name }}</h1>
-                        {% endif %}
-                        {% if unit_model %}
-                            <h3 class="h4 font-weight-medium font-italic">{{ unit_model.name }} {% trans 'Unit' %}</h3>
-                        {% endif %}
-
-                        <h1 class="display-4 font-weight-bold">{% trans 'Income Statement' %}</h1>
-                        <h2 class="display-4 font-weight-light">
-                            {% if quarter %}{{ year }} | Q{{ quarter }}
-                            {% elif month %}{{ start_date | date:'F, Y' }}
-                            {% else %}{{ _("Fiscal Year")}} {{ year }}
-                            {% endif %}</h2>
-                        <h3 class="h4 font-italic font-weight-light">
-                            {{ from_date | date:'m/d/Y' }} - {{ to_date | date:'m/d/Y' }}
-                        </h3>
+{% block title %}
+    {% trans 'Income Statement' %} {% endblock %}
+    {% block period_navigation %}
+        {% if unit_model %}
+            <div class="col-12">{% period_navigation 'unit-ic' %}</div>
+        {% elif entity %}
+            <div class="col-12">{% period_navigation 'entity-ic' %}</div>
+        {% elif ledger %}
+            <div class="col-12">{% period_navigation 'ledger-ic' %}</div>
+        {% endif %}
+    {% endblock %}
+    {% block content %}
+        <div class="card">
+            <div class="card-body text-center">
+                <div class="container mb-4">
+                    <div class="row">
+                        <div class="col">
+                            {% if entity %}
+                                <h1 class="display-4 font-weight-light">{{ entity.name }}</h1>
+                            {% elif ledger %}
+                                <h1 class="display-4 font-weight-light">{{ ledger.name }}</h1>
+                            {% endif %}
+                            {% if unit_model %}
+                                <h3 class="h4 font-weight-medium font-italic">{{ unit_model.name }} {% trans 'Unit' %}</h3>
+                            {% endif %}
+                            <h1 class="display-4 font-weight-bold">{% trans 'Income Statement' %}</h1>
+                            <h2 class="display-4 font-weight-light">
+                                {% if quarter %}
+                                    {{ year }} | Q{{ quarter }}
+                                {% elif month %}
+                                    {{ start_date | date:'F, Y' }}
+                                {% else %}
+                                    {{ _("Fiscal Year") }} {{ year }}
+                                {% endif %}
+                            </h2>
+                            <h3 class="h4 font-italic font-weight-light">{{ from_date | date:'m/d/Y' }} - {{ to_date | date:'m/d/Y' }}</h3>
+                        </div>
                     </div>
                 </div>
+                {% income_statement_table io_model=object %}
+                <a class="btn btn-phoenix-primary w-100 my-2"
+                   href="{{ request.path }}?format=pdf"><i class="fa-solid fa-arrow-down me-1"></i>{% trans 'Download PDF' %}</a>
             </div>
-
-            {% income_statement_table io_model=object %}
-
-            <a class="btn btn-phoenix-primary w-100 my-2"
-               href="{{ request.path }}?format=pdf"><i class="fa-solid fa-arrow-down me-1"></i>{% trans 'Download PDF' %}</a>
         </div>
-    </div>
-
-{% endblock %}
\ No newline at end of file
+    {% endblock %}
diff --git a/templates/ledger/reports/tags/balance_sheet_statement.html b/templates/ledger/reports/tags/balance_sheet_statement.html
index 516b3975..9ef2ba51 100644
--- a/templates/ledger/reports/tags/balance_sheet_statement.html
+++ b/templates/ledger/reports/tags/balance_sheet_statement.html
@@ -1,6 +1,5 @@
 {% load django_ledger %}
 {% load i18n %}
-
 <div class="table-container">
     <table class="table is-fullwidth is-narrow is-striped has-text-centered">
         <tbody>
@@ -19,82 +18,75 @@
                         <th>{% trans 'Balance Through' %} {{ tx_digest.to_date | date }}</th>
                         <th></th>
                     </tr>
-
                     {% for acc_role, acc_data in bs_role_data.roles.items %}
                         <tr class="has-background-grey-light has-text-weight-bold">
                             <td colspan="6">{{ acc_data.role_name | upper }}</td>
                         </tr>
-
                         {% for acc in acc_data.accounts %}
                             <tr>
                                 <td>{{ acc.code }}</td>
                                 <td class="has-text-left">{{ acc.name }}</td>
-                                {% if tx_digest.by_unit %}
-                                    <td>{{ acc.unit_name|default:"" }}</td>
-                                {% endif %}
+                                {% if tx_digest.by_unit %}<td>{{ acc.unit_name|default:"" }}</td>{% endif %}
                                 <td>{{ acc.balance_type.0 | upper }}</td>
-                                <td class="has-text-right"><span class="icon-saudi_riyal"></span>{{ acc.balance | currency_format }}</td>
+                                <td class="has-text-right">
+                                    <span class="icon-saudi_riyal"></span>{{ acc.balance | currency_format }}
+                                </td>
                                 <td></td>
                             </tr>
                         {% endfor %}
-
                         <tr class="has-text-weight-bold is-selected">
                             <td></td>
                             <td>{{ acc_data.role_name | upper }} {% trans 'Total:' %}</td>
                             <td></td>
-                            {% if tx_digest.by_unit %}
-                                <td></td>
-                            {% endif %}
-                            <td class="has-text-right"><span class="icon-saudi_riyal"></span>{{ acc_data.total_balance | currency_format }}</td>
+                            {% if tx_digest.by_unit %}<td></td>{% endif %}
+                            <td class="has-text-right">
+                                <span class="icon-saudi_riyal"></span>{{ acc_data.total_balance | currency_format }}
+                            </td>
                             <td></td>
                         </tr>
                     {% endfor %}
-
                     {% if bs_role != 'equity' %}
                         <tr class="has-text-weight-bold is-size-5 has-background-light">
                             <td>{% trans 'Total' %} {{ bs_role | upper }}</td>
                             <td></td>
-                            {% if tx_digest.by_unit %}
-                                <td></td>
-                            {% endif %}
+                            {% if tx_digest.by_unit %}<td></td>{% endif %}
                             <td></td>
-                            <td class="has-text-right"><span class="icon-saudi_riyal"></span>{{ bs_role_data.total_balance | currency_format }}</td>
+                            <td class="has-text-right">
+                                <span class="icon-saudi_riyal"></span>{{ bs_role_data.total_balance | currency_format }}
+                            </td>
                             <td></td>
                         </tr>
                     {% endif %}
                 {% endif %}
             {% endfor %}
-
             <tr class="has-text-weight-bold is-size-5 has-background-grey-lighter">
                 <td>{% trans 'Retained Earnings' %}</td>
                 <td></td>
-                {% if tx_digest.by_unit %}
-                    <td></td>
-                {% endif %}
+                {% if tx_digest.by_unit %}<td></td>{% endif %}
                 <td></td>
-                <td class="has-text-right"><span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_EARNINGS | currency_format }}</td>
+                <td class="has-text-right">
+                    <span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_EARNINGS | currency_format }}
+                </td>
                 <td></td>
             </tr>
-
             <tr class="has-text-weight-bold is-size-5 has-background-light">
                 <td>{% trans 'Total EQUITY' %}</td>
                 <td></td>
-                {% if tx_digest.by_unit %}
-                    <td></td>
-                {% endif %}
+                {% if tx_digest.by_unit %}<td></td>{% endif %}
                 <td></td>
-                <td class="has-text-right"><span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_EQUITY | currency_format }}</td>
+                <td class="has-text-right">
+                    <span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_EQUITY | currency_format }}
+                </td>
                 <td></td>
             </tr>
-
             <tr class="has-text-weight-bold is-size-5 has-background-dark has-text-white">
                 <td>{% trans 'Total Equity + Liabilities' %}</td>
                 <td></td>
-                {% if tx_digest.by_unit %}
-                    <td></td>
-                {% endif %}
+                {% if tx_digest.by_unit %}<td></td>{% endif %}
                 <td></td>
-                <td class="has-text-right"><span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_LIABILITIES_EQUITY | currency_format }}</td>
+                <td class="has-text-right">
+                    <span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_LIABILITIES_EQUITY | currency_format }}
+                </td>
                 <td></td>
             </tr>
         </tbody>
diff --git a/templates/ledger/reports/tags/cash_flow_statement.html b/templates/ledger/reports/tags/cash_flow_statement.html
index eeac1943..82541082 100644
--- a/templates/ledger/reports/tags/cash_flow_statement.html
+++ b/templates/ledger/reports/tags/cash_flow_statement.html
@@ -1,8 +1,6 @@
 {% load django_ledger %}
 {% load i18n %}
-
 <div class="table-container">
-
     {# OPERATING ACTIVITIES #}
     <table class="table is-fullwidth is-narrow is-striped">
         <thead>
@@ -11,90 +9,93 @@
                 <td class="has-text-right has-text-weight-bold">{% trans 'Total' %}</td>
             </tr>
         </thead>
-
         <tbody>
-
             <tr>
                 <td class="has-text-weight-bold is-size-5">
                     {{ tx_digest.cash_flow_statement.operating.GROUP_CFS_NET_INCOME.description }}
                 </td>
                 <td class="has-text-weight-bold has-text-right">
-                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.operating.GROUP_CFS_NET_INCOME.balance | currency_format }}</td>
+                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.operating.GROUP_CFS_NET_INCOME.balance | currency_format }}
+                </td>
             </tr>
-
-        {# Non-cash Charges to Non-current Accounts #}
+            {# Non-cash Charges to Non-current Accounts #}
             <tr>
-                <td class="is-size-5 has-text-weight-light has-text-centered">{% trans 'Noncash Charges to Non-current Accounts' %}</td>
+                <td class="is-size-5 has-text-weight-light has-text-centered">
+                    {% trans 'Noncash Charges to Non-current Accounts' %}
+                </td>
                 <td></td>
             </tr>
-
             <tr>
                 <td class="has-text-right has-text-weight-light">
                     {{ tx_digest.cash_flow_statement.operating.GROUP_CFS_OP_DEPRECIATION_AMORTIZATION.description }}
                 </td>
                 <td class="has-text-right">
-                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.operating.GROUP_CFS_OP_DEPRECIATION_AMORTIZATION.balance | currency_format }}</td>
+                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.operating.GROUP_CFS_OP_DEPRECIATION_AMORTIZATION.balance | currency_format }}
+                </td>
             </tr>
             <tr>
                 <td class="has-text-right has-text-weight-light">
                     {{ tx_digest.cash_flow_statement.operating.GROUP_CFS_OP_INVESTMENT_GAINS.description }}
                 </td>
                 <td class="has-text-right">
-                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.operating.GROUP_CFS_OP_INVESTMENT_GAINS.balance | currency_format }}</td>
+                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.operating.GROUP_CFS_OP_INVESTMENT_GAINS.balance | currency_format }}
+                </td>
             </tr>
-
-        {# Non-cash Charges to Current Accounts #}
+            {# Non-cash Charges to Current Accounts #}
             <tr>
                 <td class="is-size-5 has-text-weight-light has-text-centered">{% trans 'Non cash Charges to Current Accounts' %}</td>
                 <td></td>
             </tr>
-
             <tr>
                 <td class="has-text-right has-text-weight-light">
                     {{ tx_digest.cash_flow_statement.operating.GROUP_CFS_OP_ACCOUNTS_RECEIVABLE.description }}
                 </td>
                 <td class="has-text-right">
-                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.operating.GROUP_CFS_OP_ACCOUNTS_RECEIVABLE.balance | currency_format }}</td>
+                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.operating.GROUP_CFS_OP_ACCOUNTS_RECEIVABLE.balance | currency_format }}
+                </td>
             </tr>
             <tr>
                 <td class="has-text-right has-text-weight-light">
                     {{ tx_digest.cash_flow_statement.operating.GROUP_CFS_OP_INVENTORY.description }}
                 </td>
                 <td class="has-text-right">
-                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.operating.GROUP_CFS_OP_INVENTORY.balance | currency_format }}</td>
+                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.operating.GROUP_CFS_OP_INVENTORY.balance | currency_format }}
+                </td>
             </tr>
             <tr>
                 <td class="has-text-right has-text-weight-light">
                     {{ tx_digest.cash_flow_statement.operating.GROUP_CFS_OP_ACCOUNTS_PAYABLE.description }}
                 </td>
                 <td class="has-text-right">
-                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.operating.GROUP_CFS_OP_ACCOUNTS_PAYABLE.balance | currency_format }}</td>
+                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.operating.GROUP_CFS_OP_ACCOUNTS_PAYABLE.balance | currency_format }}
+                </td>
             </tr>
             <tr>
                 <td class="has-text-right has-text-weight-light">
                     {{ tx_digest.cash_flow_statement.operating.GROUP_CFS_OP_OTHER_CURRENT_ASSETS_ADJUSTMENT.description }}
                 </td>
                 <td class="has-text-right">
-                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.operating.GROUP_CFS_OP_OTHER_CURRENT_ASSETS_ADJUSTMENT.balance | currency_format }}</td>
+                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.operating.GROUP_CFS_OP_OTHER_CURRENT_ASSETS_ADJUSTMENT.balance | currency_format }}
+                </td>
             </tr>
             <tr>
                 <td class="has-text-right has-text-weight-light">
                     {{ tx_digest.cash_flow_statement.operating.GROUP_CFS_OP_OTHER_CURRENT_LIABILITIES_ADJUSTMENT.description }}
                 </td>
                 <td class="has-text-right">
-                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.operating.GROUP_CFS_OP_OTHER_CURRENT_LIABILITIES_ADJUSTMENT.balance | currency_format }}</td>
+                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.operating.GROUP_CFS_OP_OTHER_CURRENT_LIABILITIES_ADJUSTMENT.balance | currency_format }}
+                </td>
             </tr>
-
         </tbody>
         <tfoot>
             <tr>
                 <td class="has-text-weight-bold is-size-5">{% trans 'Net Cash Provided by Operating Activities' %}</td>
                 <td class="has-text-weight-bold has-text-right">
-                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.net_cash_by_activity.OPERATING | currency_format }}</td>
+                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.net_cash_by_activity.OPERATING | currency_format }}
+                </td>
             </tr>
         </tfoot>
     </table>
-
     {# FINANCING ACTIVITIES #}
     <table class="table is-fullwidth is-narrow is-striped">
         <thead>
@@ -103,48 +104,49 @@
                 <td></td>
             </tr>
         </thead>
-
         <tbody>
             <tr>
                 <td class="has-text-right has-text-weight-light">
                     {{ tx_digest.cash_flow_statement.financing.GROUP_CFS_FIN_ISSUING_EQUITY.description }}
                 </td>
                 <td class="has-text-right">
-                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.financing.GROUP_CFS_FIN_ISSUING_EQUITY.balance | currency_format }}</td>
+                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.financing.GROUP_CFS_FIN_ISSUING_EQUITY.balance | currency_format }}
+                </td>
             </tr>
             <tr>
                 <td class="has-text-right has-text-weight-light">
                     {{ tx_digest.cash_flow_statement.financing.GROUP_CFS_FIN_DIVIDENDS.description }}
                 </td>
                 <td class="has-text-right">
-                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.financing.GROUP_CFS_FIN_DIVIDENDS.balance | currency_format }}</td>
+                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.financing.GROUP_CFS_FIN_DIVIDENDS.balance | currency_format }}
+                </td>
             </tr>
             <tr>
                 <td class="has-text-right has-text-weight-light">
                     {{ tx_digest.cash_flow_statement.financing.GROUP_CFS_FIN_ST_DEBT_PAYMENTS.description }}
                 </td>
                 <td class="has-text-right">
-                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.financing.GROUP_CFS_FIN_ST_DEBT_PAYMENTS.balance | currency_format }}</td>
+                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.financing.GROUP_CFS_FIN_ST_DEBT_PAYMENTS.balance | currency_format }}
+                </td>
             </tr>
             <tr>
                 <td class="has-text-right has-text-weight-light">
                     {{ tx_digest.cash_flow_statement.financing.GROUP_CFS_FIN_LT_DEBT_PAYMENTS.description }}
                 </td>
                 <td class="has-text-right">
-                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.financing.GROUP_CFS_FIN_LT_DEBT_PAYMENTS.balance | currency_format }}</td>
+                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.financing.GROUP_CFS_FIN_LT_DEBT_PAYMENTS.balance | currency_format }}
+                </td>
             </tr>
-
-
         </tbody>
         <tfoot>
             <tr>
                 <td class="has-text-weight-bold is-size-5">{% trans 'Net Cash Provided by Financing Activities' %}</td>
                 <td class="has-text-weight-bold has-text-right">
-                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.net_cash_by_activity.FINANCING | currency_format }}</td>
+                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.net_cash_by_activity.FINANCING | currency_format }}
+                </td>
             </tr>
         </tfoot>
     </table>
-
     {# INVESTING ACTIVITIES #}
     <table class="table is-fullwidth is-narrow is-striped">
         <thead>
@@ -154,36 +156,32 @@
             </tr>
         </thead>
         <tbody>
-
             <tr>
                 <td class="has-text-right has-text-weight-light">
                     {{ tx_digest.cash_flow_statement.investing.GROUP_CFS_INVESTING_PPE.description }}
                 </td>
                 <td class="has-text-right">
-                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.investing.GROUP_CFS_INVESTING_PPE.balance | currency_format }}</td>
+                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.investing.GROUP_CFS_INVESTING_PPE.balance | currency_format }}
+                </td>
             </tr>
             <tr>
                 <td class="has-text-right has-text-weight-light">
                     {{ tx_digest.cash_flow_statement.investing.GROUP_CFS_INVESTING_SECURITIES.description }}
                 </td>
                 <td class="has-text-right">
-                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.investing.GROUP_CFS_INVESTING_SECURITIES.balance | currency_format }}</td>
+                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.investing.GROUP_CFS_INVESTING_SECURITIES.balance | currency_format }}
+                </td>
             </tr>
-
         </tbody>
-
-
         <tfoot>
             <tr>
                 <td class="has-text-weight-bold is-size-5">{% trans 'Net Cash Provided by Investing Activities' %}</td>
                 <td class="has-text-weight-bold has-text-right">
-                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.net_cash_by_activity.INVESTING | currency_format }}</td>
+                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.net_cash_by_activity.INVESTING | currency_format }}
+                </td>
             </tr>
         </tfoot>
-
-
     </table>
-
     {# NET CASH #}
     <table class="table is-fullwidth is-narrow is-stripped">
         <thead>
@@ -192,17 +190,15 @@
                 <td></td>
             </tr>
         </thead>
-
         <tbody>
             <tr>
                 <td class="has-text-right has-text-weight-light">
                     {% trans 'Net Cash From' %} {{ tx_digest.from_date }} -> {{ tx_digest.to_date }}
                 </td>
                 <td class="has-text-weight-bold has-text-right is-size-5">
-                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.net_cash | currency_format }}</td>
+                    <span class="icon-saudi_riyal"></span>{{ tx_digest.cash_flow_statement.net_cash | currency_format }}
+                </td>
             </tr>
-
         </tbody>
-
     </table>
 </div>
diff --git a/templates/ledger/reports/tags/income_statement.html b/templates/ledger/reports/tags/income_statement.html
index 1b9c3495..6b7ba686 100644
--- a/templates/ledger/reports/tags/income_statement.html
+++ b/templates/ledger/reports/tags/income_statement.html
@@ -1,7 +1,5 @@
 {% load django_ledger %}
 {% load i18n %}
-
-
 <div class="table-container">
     <table class="table is-fullwidth is-narrow is-striped">
         <tr>
@@ -14,25 +12,25 @@
             <th>{% trans 'Balance' %}</th>
             <th></th>
         </tr>
-
         {# OPERATING INCOME #}
         <tr>
-            <td><h2 class="is-size-3 has-text-left">{% trans 'Operating Revenues' %}</h2></td>
+            <td>
+                <h2 class="is-size-3 has-text-left">{% trans 'Operating Revenues' %}</h2>
+            </td>
             <td></td>
-            {% if tx_digest.by_unit %}
-                <td></td>
-            {% endif %}
+            {% if tx_digest.by_unit %}<td></td>{% endif %}
             <td></td>
             <td></td>
             <td></td>
         </tr>
-
         {% for acc in tx_digest.income_statement.operating.revenues %}
             <tr>
                 <td class="has-text-right">{{ acc.code }}</td>
                 <td>{{ acc.name }}</td>
                 {% if tx_digest.by_unit %}
-                    <td>{% if acc.unit_name %}{{ acc.unit_name }}{% endif %}</td>
+                    <td>
+                        {% if acc.unit_name %}{{ acc.unit_name }}{% endif %}
+                    </td>
                 {% endif %}
                 <td class="has-text-centered">
                     {% if acc.balance_type == 'debit' %}
@@ -41,32 +39,31 @@
                         <span class="icon">{% icon 'bi:arrow-bar-up' 24 %}</span>
                     {% endif %}
                 </td>
-                <td><span class="icon-saudi_riyal"></span>{{ acc.balance | currency_format }}</td>
                 <td>
-
+                    <span class="icon-saudi_riyal"></span>{{ acc.balance | currency_format }}
                 </td>
+                <td></td>
             </tr>
         {% endfor %}
-
         <tr>
             <td></td>
-            {% if tx_digest.by_unit %}
-                <td></td>
-            {% endif %}
+            {% if tx_digest.by_unit %}<td></td>{% endif %}
             <td></td>
-            <td><h2 class="is-size-5 has-text-right">{% trans 'Net Operating Revenues' %}</h2></td>
+            <td>
+                <h2 class="is-size-5 has-text-right">{% trans 'Net Operating Revenues' %}</h2>
+            </td>
             <td class="is-size-5 has-text-weight-bold">
-                <span class="icon-saudi_riyal"></span>{{ tx_digest.income_statement.operating.net_operating_revenue | currency_format }}</td>
+                <span class="icon-saudi_riyal"></span>{{ tx_digest.income_statement.operating.net_operating_revenue | currency_format }}
+            </td>
             <td></td>
         </tr>
-
         {# COGS #}
         <tr>
-            <td><h2 class="is-size-3 has-text-left">{% trans 'Less: Cost of Goods Sold' %}</h2></td>
+            <td>
+                <h2 class="is-size-3 has-text-left">{% trans 'Less: Cost of Goods Sold' %}</h2>
+            </td>
             <td></td>
-            {% if tx_digest.by_unit %}
-                <td></td>
-            {% endif %}
+            {% if tx_digest.by_unit %}<td></td>{% endif %}
             <td></td>
             <td></td>
             <td></td>
@@ -76,7 +73,9 @@
                 <td class="has-text-right">{{ acc.code }}</td>
                 <td>{{ acc.name }}</td>
                 {% if tx_digest.by_unit %}
-                    <td>{% if acc.unit_name %}{{ acc.unit_name }}{% endif %}</td>
+                    <td>
+                        {% if acc.unit_name %}{{ acc.unit_name }}{% endif %}
+                    </td>
                 {% endif %}
                 <td class="has-text-centered">
                     {% if acc.balance_type == 'debit' %}
@@ -85,45 +84,44 @@
                         <span class="icon">{% icon 'bi:arrow-bar-up' 24 %}</span>
                     {% endif %}
                 </td>
-                <td><span class="icon-saudi_riyal"></span>{{ acc.balance | reverse_sign | currency_format }}</td>
                 <td>
-
+                    <span class="icon-saudi_riyal"></span>{{ acc.balance | reverse_sign | currency_format }}
                 </td>
+                <td></td>
             </tr>
         {% endfor %}
-
         <tr>
             <td></td>
-            {% if tx_digest.by_unit %}
-                <td></td>
-            {% endif %}
+            {% if tx_digest.by_unit %}<td></td>{% endif %}
             <td></td>
-            <td><h2 class="is-size-5 has-text-right">{% trans 'Net COGS' %}</h2></td>
+            <td>
+                <h2 class="is-size-5 has-text-right">{% trans 'Net COGS' %}</h2>
+            </td>
             <td class="is-size-5 has-text-weight-bold">
-                <span class="icon-saudi_riyal"></span>{{ tx_digest.income_statement.operating.net_cogs | currency_format }}</td>
+                <span class="icon-saudi_riyal"></span>{{ tx_digest.income_statement.operating.net_cogs | currency_format }}
+            </td>
             <td></td>
         </tr>
-
         {# GROSS PROFIT #}
         <tr>
             <td></td>
-            {% if tx_digest.by_unit %}
-                <td></td>
-            {% endif %}
+            {% if tx_digest.by_unit %}<td></td>{% endif %}
             <td></td>
-            <td><h2 class="is-size-4 has-text-right">{% trans 'Gross Profit' %}</h2></td>
+            <td>
+                <h2 class="is-size-4 has-text-right">{% trans 'Gross Profit' %}</h2>
+            </td>
             <td class="is-size-4 has-text-weight-bold">
-                <span class="icon-saudi_riyal"></span>{{ tx_digest.income_statement.operating.gross_profit | currency_format }}</td>
+                <span class="icon-saudi_riyal"></span>{{ tx_digest.income_statement.operating.gross_profit | currency_format }}
+            </td>
             <td></td>
         </tr>
-
         {# OPERATING EXPENSES #}
         <tr>
-            <td><h2 class="is-size-3 has-text-left">{% trans 'Operating Expenses' %}</h2></td>
+            <td>
+                <h2 class="is-size-3 has-text-left">{% trans 'Operating Expenses' %}</h2>
+            </td>
             <td></td>
-            {% if tx_digest.by_unit %}
-                <td></td>
-            {% endif %}
+            {% if tx_digest.by_unit %}<td></td>{% endif %}
             <td></td>
             <td></td>
             <td></td>
@@ -133,7 +131,9 @@
                 <td class="has-text-right">{{ acc.code }}</td>
                 <td>{{ acc.name }}</td>
                 {% if tx_digest.by_unit %}
-                    <td>{% if acc.unit_name %}{{ acc.unit_name }}{% endif %}</td>
+                    <td>
+                        {% if acc.unit_name %}{{ acc.unit_name }}{% endif %}
+                    </td>
                 {% endif %}
                 <td class="has-text-centered">
                     {% if acc.balance_type == 'debit' %}
@@ -142,45 +142,44 @@
                         <span class="icon">{% icon 'bi:arrow-bar-up' 24 %}</span>
                     {% endif %}
                 </td>
-                <td><span class="icon-saudi_riyal"></span>{{ acc.balance | reverse_sign | currency_format }}</td>
                 <td>
-
+                    <span class="icon-saudi_riyal"></span>{{ acc.balance | reverse_sign | currency_format }}
                 </td>
+                <td></td>
             </tr>
         {% endfor %}
         <tr>
             <td></td>
-            {% if tx_digest.by_unit %}
-                <td></td>
-            {% endif %}
+            {% if tx_digest.by_unit %}<td></td>{% endif %}
             <td></td>
-            <td><h2 class="is-size-5 has-text-right">{% trans 'Net Operating Expenses' %}</h2></td>
+            <td>
+                <h2 class="is-size-5 has-text-right">{% trans 'Net Operating Expenses' %}</h2>
+            </td>
             <td class="is-size-5 has-text-weight-bold">
-                <span class="icon-saudi_riyal"></span>{{ tx_digest.income_statement.operating.net_operating_expenses | reverse_sign | currency_format }}</td>
+                <span class="icon-saudi_riyal"></span>{{ tx_digest.income_statement.operating.net_operating_expenses | reverse_sign | currency_format }}
+            </td>
             <td></td>
         </tr>
-
-
         {# NET OPERATING INCOME #}
         <tr>
             <td></td>
-            {% if tx_digest.by_unit %}
-                <td></td>
-            {% endif %}
+            {% if tx_digest.by_unit %}<td></td>{% endif %}
             <td></td>
-            <td><h2 class="is-size-4 has-text-right">{% trans 'Net Operating Income (Loss)' %}</h2></td>
+            <td>
+                <h2 class="is-size-4 has-text-right">{% trans 'Net Operating Income (Loss)' %}</h2>
+            </td>
             <td class="is-size-3">
-                <span class="icon-saudi_riyal"></span>{{ tx_digest.income_statement.operating.net_operating_income| currency_format }}</td>
+                <span class="icon-saudi_riyal"></span>{{ tx_digest.income_statement.operating.net_operating_income| currency_format }}
+            </td>
             <td></td>
         </tr>
-
         {# OTHER REVENUES #}
         <tr>
-            <td><h2 class="is-size-3 has-text-left">{% trans 'Other Revenues' %}</h2></td>
+            <td>
+                <h2 class="is-size-3 has-text-left">{% trans 'Other Revenues' %}</h2>
+            </td>
             <td></td>
-            {% if tx_digest.by_unit %}
-                <td></td>
-            {% endif %}
+            {% if tx_digest.by_unit %}<td></td>{% endif %}
             <td></td>
             <td></td>
             <td></td>
@@ -190,7 +189,9 @@
                 <td class="has-text-right">{{ acc.code }}</td>
                 <td>{{ acc.name }}</td>
                 {% if tx_digest.by_unit %}
-                    <td>{% if acc.unit_name %}{{ acc.unit_name }}{% endif %}</td>
+                    <td>
+                        {% if acc.unit_name %}{{ acc.unit_name }}{% endif %}
+                    </td>
                 {% endif %}
                 <td class="has-text-centered">
                     {% if acc.balance_type == 'debit' %}
@@ -199,32 +200,31 @@
                         <span class="icon">{% icon 'bi:arrow-bar-up' 24 %}</span>
                     {% endif %}
                 </td>
-                <td class="is-size-5"><span class="icon-saudi_riyal"></span>{{ acc.balance | currency_format }}</td>
-                <td>
-
+                <td class="is-size-5">
+                    <span class="icon-saudi_riyal"></span>{{ acc.balance | currency_format }}
                 </td>
+                <td></td>
             </tr>
         {% endfor %}
         <tr>
             <td></td>
-            {% if tx_digest.by_unit %}
-                <td></td>
-            {% endif %}
+            {% if tx_digest.by_unit %}<td></td>{% endif %}
             <td></td>
-            <td><h2 class="is-size-5 has-text-right">{% trans 'Net Other Revenues' %}</h2></td>
+            <td>
+                <h2 class="is-size-5 has-text-right">{% trans 'Net Other Revenues' %}</h2>
+            </td>
             <td class="is-size-5 has-text-weight-bold">
-                <span class="icon-saudi_riyal"></span>{{ tx_digest.income_statement.other.net_other_revenues | currency_format }}</td>
+                <span class="icon-saudi_riyal"></span>{{ tx_digest.income_statement.other.net_other_revenues | currency_format }}
+            </td>
             <td></td>
         </tr>
-
-
         {# OTHER EXPENSES #}
         <tr>
-            <td><h2 class="is-size-3 has-text-left">{% trans 'Other Expenses' %}</h2></td>
+            <td>
+                <h2 class="is-size-3 has-text-left">{% trans 'Other Expenses' %}</h2>
+            </td>
             <td></td>
-            {% if tx_digest.by_unit %}
-                <td></td>
-            {% endif %}
+            {% if tx_digest.by_unit %}<td></td>{% endif %}
             <td></td>
             <td></td>
             <td></td>
@@ -234,7 +234,9 @@
                 <td class="has-text-right">{{ acc.code }}</td>
                 <td>{{ acc.name }}</td>
                 {% if tx_digest.by_unit %}
-                    <td>{% if acc.unit_name %}{{ acc.unit_name }}{% endif %}</td>
+                    <td>
+                        {% if acc.unit_name %}{{ acc.unit_name }}{% endif %}
+                    </td>
                 {% endif %}
                 <td class="has-text-centered">
                     {% if acc.balance_type == 'debit' %}
@@ -243,52 +245,53 @@
                         <span class="icon">{% icon 'bi:arrow-bar-up' 24 %}</span>
                     {% endif %}
                 </td>
-                <td class="is-size-5"><span class="icon-saudi_riyal"></span>{{ acc.balance | reverse_sign | currency_format }}</td>
-                <td>
-
+                <td class="is-size-5">
+                    <span class="icon-saudi_riyal"></span>{{ acc.balance | reverse_sign | currency_format }}
                 </td>
+                <td></td>
             </tr>
         {% endfor %}
         <tr>
             <td></td>
-            {% if tx_digest.by_unit %}
-                <td></td>
-            {% endif %}
+            {% if tx_digest.by_unit %}<td></td>{% endif %}
             <td></td>
-            <td><h2 class="is-size-5 has-text-right">{% trans 'Net Other Expenses' %}</h2></td>
+            <td>
+                <h2 class="is-size-5 has-text-right">{% trans 'Net Other Expenses' %}</h2>
+            </td>
             <td class="is-size-5 has-text-weight-bold">
-                <span class="icon-saudi_riyal"></span>{{ tx_digest.income_statement.other.net_other_expenses | currency_format }}</td>
+                <span class="icon-saudi_riyal"></span>{{ tx_digest.income_statement.other.net_other_expenses | currency_format }}
+            </td>
             <td></td>
         </tr>
-
         {# NET OTHER INCOME/LOSS #}
         <tr>
             <td></td>
-            {% if tx_digest.by_unit %}
-                <td></td>
-            {% endif %}
+            {% if tx_digest.by_unit %}<td></td>{% endif %}
             <td></td>
-            <td><h2 class="is-size-4 has-text-right">{% trans 'Net Other Income (Loss)' %}</h2></td>
+            <td>
+                <h2 class="is-size-4 has-text-right">{% trans 'Net Other Income (Loss)' %}</h2>
+            </td>
             <td class="is-size-3">
-                <span class="icon-saudi_riyal"></span>{{ tx_digest.income_statement.other.net_other_income | currency_format }}</td>
+                <span class="icon-saudi_riyal"></span>{{ tx_digest.income_statement.other.net_other_income | currency_format }}
+            </td>
             <td></td>
         </tr>
-
-
         {# NET INCOME #}
         <tr>
             <td></td>
-            {% if tx_digest.by_unit %}
-                <td></td>
-            {% endif %}
+            {% if tx_digest.by_unit %}<td></td>{% endif %}
             <td>
-                <h4 class="is-size-4 has-text-right">{{ tx_digest.from_date | date }} {% trans 'through' %} {{ tx_digest.to_date | date }}</h4>
+                <h4 class="is-size-4 has-text-right">
+                    {{ tx_digest.from_date | date }} {% trans 'through' %} {{ tx_digest.to_date | date }}
+                </h4>
+            </td>
+            <td>
+                <h2 class="is-size-3 has-text-right">{% trans 'Net Income' %}</h2>
             </td>
-            <td><h2 class="is-size-3 has-text-right">{% trans 'Net Income' %}</h2></td>
             <td class="is-size-3 has-text-weight-bold">
-                <span class="icon-saudi_riyal"></span>{{ tx_digest.income_statement.net_income| currency_format }}</td>
+                <span class="icon-saudi_riyal"></span>{{ tx_digest.income_statement.net_income| currency_format }}
+            </td>
             <td></td>
         </tr>
-
     </table>
 </div>
diff --git a/templates/login_test.html b/templates/login_test.html
index 0ea44d13..4681d713 100644
--- a/templates/login_test.html
+++ b/templates/login_test.html
@@ -13,13 +13,16 @@
                 <div class="col-lg-8 ml-auto mr-auto">
                     <div class="row">
                         <div class="col-md-4">
-                            <button class="btn btn-phoenix-primary btn-block" onclick="demo.showNotification('top','left')">Top Left</button>
+                            <button class="btn btn-phoenix-primary btn-block"
+                                    onclick="demo.showNotification('top','left')">Top Left</button>
                         </div>
                         <div class="col-md-4">
-                            <button class="btn btn-phoenix-primary btn-block" onclick="demo.showNotification('top','center')">Top Center</button>
+                            <button class="btn btn-phoenix-primary btn-block"
+                                    onclick="demo.showNotification('top','center')">Top Center</button>
                         </div>
                         <div class="col-md-4">
-                            <button class="btn btn-phoenix-primary btn-block" onclick="demo.showNotification('top','right')">Top Right</button>
+                            <button class="btn btn-phoenix-primary btn-block"
+                                    onclick="demo.showNotification('top','right')">Top Right</button>
                         </div>
                     </div>
                 </div>
@@ -28,37 +31,40 @@
                 <div class="col-lg-8 ml-auto mr-auto">
                     <div class="row">
                         <div class="col-md-4">
-                            <button class="btn btn-phoenix-primary btn-block" onclick="demo.showNotification('bottom','left')">Bottom Left</button>
+                            <button class="btn btn-phoenix-primary btn-block"
+                                    onclick="demo.showNotification('bottom','left')">Bottom Left</button>
                         </div>
                         <div class="col-md-4">
-                            <button class="btn btn-phoenix-primary btn-block" onclick="demo.showNotification('bottom','center')">Bottom Center</button>
+                            <button class="btn btn-phoenix-primary btn-block"
+                                    onclick="demo.showNotification('bottom','center')">Bottom Center</button>
                         </div>
                         <div class="col-md-4">
-                            <button class="btn btn-phoenix-primary btn-block" onclick="demo.showNotification('bottom','right')">Bottom Right</button>
+                            <button class="btn btn-phoenix-primary btn-block"
+                                    onclick="demo.showNotification('bottom','right')">Bottom Right</button>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-
         <div class="row">
             <div class="col-md-12 text-center">
                 <div class="card-header">
                     <h4 class="card-title">Modal</h4>
                 </div>
-
-                <button class="btn btn-phoenix-primary" data-toggle="modal" data-target="#myModal">
-                    Classic modal
-                </button>
-                <button class="btn btn-phoenix-info" data-toggle="modal" data-target="#noticeModal">
-                    Notice modal
-                </button>
-                <button class="btn" data-toggle="modal" data-target="#myModal10">
-                    Small alert modal
-                </button>
-
-                        <!-- Classic Modal -->
-                <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
+                <button class="btn btn-phoenix-primary"
+                        data-toggle="modal"
+                        data-target="#myModal">Classic modal</button>
+                <button class="btn btn-phoenix-info"
+                        data-toggle="modal"
+                        data-target="#noticeModal">Notice modal</button>
+                <button class="btn" data-toggle="modal" data-target="#myModal10">Small alert modal</button>
+                <!-- Classic Modal -->
+                <div class="modal fade"
+                     id="myModal"
+                     tabindex="-1"
+                     aria-labelledby="myModalLabel"
+                     style="display: none"
+                     aria-hidden="true">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <div class="modal-header justify-content-center">
@@ -68,7 +74,8 @@
                                 <h4 class="title title-up">Modal title</h4>
                             </div>
                             <div class="modal-body">
-                                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
+                                <p>
+                                    Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
                                 </p>
                             </div>
                             <div class="modal-footer">
@@ -78,10 +85,14 @@
                         </div>
                     </div>
                 </div>
-                    	<!--  End Modal -->
-
-                        <!-- notice modal -->
-                <div class="modal fade" id="noticeModal" tabindex="-1" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
+                <!--  End Modal -->
+                <!-- notice modal -->
+                <div class="modal fade"
+                     id="noticeModal"
+                     tabindex="-1"
+                     aria-labelledby="myModalLabel"
+                     style="display: none"
+                     aria-hidden="true">
                     <div class="modal-dialog modal-notice">
                         <div class="modal-content">
                             <div class="modal-header">
@@ -95,11 +106,15 @@
                                     <div class="row">
                                         <div class="col-md-8">
                                             <strong>1. Register</strong>
-                                            <p class="description">The first step is to create an account at <a href="http://www.creative-tim.com/">Creative Tim</a>. You can choose a social network or go for the classic version, whatever works best for you.</p>
+                                            <p class="description">
+                                                The first step is to create an account at <a href="http://www.creative-tim.com/">Creative Tim</a>. You can choose a social network or go for the classic version, whatever works best for you.
+                                            </p>
                                         </div>
                                         <div class="col-md-4">
                                             <div class="picture">
-                                                <img src="../../assets/img/bg1.jpg" alt="Thumbnail Image" class="rounded img-raised">
+                                                <img src="../../assets/img/bg1.jpg"
+                                                     alt="Thumbnail Image"
+                                                     class="rounded img-raised">
                                             </div>
                                         </div>
                                     </div>
@@ -108,11 +123,15 @@
                                     <div class="row">
                                         <div class="col-md-8">
                                             <strong>2. Apply</strong>
-                                            <p class="description">The first step is to create an account at <a href="http://www.creative-tim.com/">Creative Tim</a>. You can choose a social network or go for the classic version, whatever works best for you.</p>
+                                            <p class="description">
+                                                The first step is to create an account at <a href="http://www.creative-tim.com/">Creative Tim</a>. You can choose a social network or go for the classic version, whatever works best for you.
+                                            </p>
                                         </div>
                                         <div class="col-md-4">
                                             <div class="picture">
-                                                <img src="../../assets/img/bg3.jpg" alt="Thumbnail Image" class="rounded img-raised">
+                                                <img src="../../assets/img/bg3.jpg"
+                                                     alt="Thumbnail Image"
+                                                     class="rounded img-raised">
                                             </div>
                                         </div>
                                     </div>
@@ -120,15 +139,22 @@
                                 <p>If you have more questions, don't hesitate to contact us or send us a tweet @creativetim. We're here to help!</p>
                             </div>
                             <div class="modal-footer justify-content-center">
-                                <button type="button" class="btn btn-phoenix-info btn-round" data-dismiss="modal">Sounds good!</button>
+                                <button type="button"
+                                        class="btn btn-phoenix-info btn-round"
+                                        data-dismiss="modal">Sounds good!</button>
                             </div>
                         </div>
                     </div>
                 </div>
-                        <!-- end notice modal -->
-
-                        <!-- small modal -->
-                <div class="modal fade modal-mini modal-primary show" id="myModal10" tabindex="-1" aria-labelledby="myModalLabel" style="display: block;" aria-modal="true" role="dialog">
+                <!-- end notice modal -->
+                <!-- small modal -->
+                <div class="modal fade modal-mini modal-primary show"
+                     id="myModal10"
+                     tabindex="-1"
+                     aria-labelledby="myModalLabel"
+                     style="display: block"
+                     aria-modal="true"
+                     role="dialog">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <div class="modal-header justify-content-center">
@@ -146,8 +172,8 @@
                         </div>
                     </div>
                 </div>
-                        <!--    end small modal -->
+                <!--    end small modal -->
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/modal/confirm_modal.html b/templates/modal/confirm_modal.html
index b4616be7..5a251797 100644
--- a/templates/modal/confirm_modal.html
+++ b/templates/modal/confirm_modal.html
@@ -1,6 +1,11 @@
 {% load i18n %}
 <!-- Generic Confirmation Modal -->
-<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
+<div class="modal fade"
+     id="confirmModal"
+     tabindex="-1"
+     role="dialog"
+     aria-labelledby="modalLabel"
+     aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
@@ -9,14 +14,13 @@
                         class="btn-close"
                         data-dismiss="modal"
                         aria-label="{% trans 'Close' %}"
-                        onclick="closeConfirmModal()">
-                </button>
-            </div>
-            <div class="modal-body" id="modalBody">
-                Modal body text goes here.
+                        onclick="closeConfirmModal()"></button>
             </div>
+            <div class="modal-body" id="modalBody">Modal body text goes here.</div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-sm btn-phoenix-secondary" data-dismiss="modal"
+                <button type="button"
+                        class="btn btn-sm btn-phoenix-secondary"
+                        data-dismiss="modal"
                         onclick="closeConfirmModal()">{% trans 'Close' %}</button>
                 <a href="#" class="btn btn-sm btn-phoenix-danger" id="modalActionBtn">{% trans 'Action' %}</a>
             </div>
diff --git a/templates/modal/delete_modal.html b/templates/modal/delete_modal.html
index 4cb68e29..c099da33 100644
--- a/templates/modal/delete_modal.html
+++ b/templates/modal/delete_modal.html
@@ -1,5 +1,6 @@
 {% load i18n %}
-<div class="modal fade" id="deleteModal"
+<div class="modal fade"
+     id="deleteModal"
      data-bs-backdrop="static"
      data-bs-keyboard="false"
      tabindex="-1"
@@ -12,19 +13,20 @@
                     {{ _("Delete") }}
                     <i class="fas fa-exclamation-circle text-danger ms-2"></i>
                 </h4>
-                <button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close">
+                <button class="btn p-0 text-body-quaternary fs-6"
+                        data-bs-dismiss="modal"
+                        aria-label="Close">
                     <span class="fas fa-times"></span>
                 </button>
             </div>
             <div class="modal-body p-4">
-                <p id="deleteModalText">
-
-                </p>
+                <p id="deleteModalText"></p>
             </div>
             <div class="modal-footer flex justify-content-center border-top-0">
-                <a id="deleteModalConfirm" type="button" class="btn btn-sm btn-phoenix-danger w-100" href="">
-                    {{ _("Delete") }}
-                </a>
+                <a id="deleteModalConfirm"
+                   type="button"
+                   class="btn btn-sm btn-phoenix-danger w-100"
+                   href="">{{ _("Delete") }}</a>
             </div>
         </div>
     </div>
@@ -45,4 +47,4 @@
             });
         });
     });
-</script>
\ No newline at end of file
+</script>
diff --git a/templates/modal/error_modal.html b/templates/modal/error_modal.html
index 11cba8be..c277aff0 100644
--- a/templates/modal/error_modal.html
+++ b/templates/modal/error_modal.html
@@ -1,11 +1,18 @@
 {% load i18n %}
 <!-- Error Modal -->
-<div class="modal fade" id="errorModal" tabindex="-1" aria-labelledby="errorModalLabel" aria-hidden="true">
+<div class="modal fade"
+     id="errorModal"
+     tabindex="-1"
+     aria-labelledby="errorModalLabel"
+     aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="errorModalLabel">{% trans 'Error' %}</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
+                <button type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close"
                         onclick="closeErrorModal()"></button>
             </div>
             <div class="modal-body">
@@ -13,7 +20,9 @@
                 <p id="errorModalMessage"></p>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-phoenix-secondary" data-bs-dismiss="modal"
+                <button type="button"
+                        class="btn btn-phoenix-secondary"
+                        data-bs-dismiss="modal"
                         onclick="closeErrorModal()">{% trans 'Close' %}</button>
             </div>
         </div>
diff --git a/templates/modal/event_details_modal.html b/templates/modal/event_details_modal.html
index 36912460..cabc3108 100644
--- a/templates/modal/event_details_modal.html
+++ b/templates/modal/event_details_modal.html
@@ -1,12 +1,19 @@
 {% load i18n %}
 <!-- Event Details Modal -->
-<div class="modal fade" id="eventDetailsModal" tabindex="-1" role="dialog" aria-labelledby="eventModalLabel"
+<div class="modal fade"
+     id="eventDetailsModal"
+     tabindex="-1"
+     role="dialog"
+     aria-labelledby="eventModalLabel"
      aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
                 <h4 class="modal-title" id="eventModalLabel">{% trans 'Appointment Details' %}</h4>
-                <button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close" onclick="closeModal()">
+                <button class="btn p-0 text-body-quaternary fs-6"
+                        data-bs-dismiss="modal"
+                        aria-label="Close"
+                        onclick="closeModal()">
                     <span class="fas fa-times"></span>
                 </button>
             </div>
@@ -15,26 +22,35 @@
             </div>
             <div class="modal-footer">
                 <div class="btn-group btn-group-sm mt-2 gap-1" role="group">
-                    <button type="button" class="btn btn-sm btn-phoenix-success" id="eventGoBtn"
+                    <button type="button"
+                            class="btn btn-sm btn-phoenix-success"
+                            id="eventGoBtn"
                             onclick="goToEvent()">{% trans 'Go' %}</button>
-                    <button type="button" class="btn btn-sm btn-phoenix-secondary" data-dismiss="modal"
-                            onclick="closeModal()">{% trans 'Close' %}
-                    </button>
-                    <button type="button" class="btn btn-sm btn-phoenix-secondary" id="eventCancelBtn" style="display: none;"
-                            onclick="cancelEdit()">{% trans 'Cancel' %}
-                    </button>
-                    <button type="button" class="btn btn-sm btn-phoenix-primary" id="eventEditBtn"
+                    <button type="button"
+                            class="btn btn-sm btn-phoenix-secondary"
+                            data-dismiss="modal"
+                            onclick="closeModal()">{% trans 'Close' %}</button>
+                    <button type="button"
+                            class="btn btn-sm btn-phoenix-secondary"
+                            id="eventCancelBtn"
+                            style="display: none"
+                            onclick="cancelEdit()">{% trans 'Cancel' %}</button>
+                    <button type="button"
+                            class="btn btn-sm btn-phoenix-primary"
+                            id="eventEditBtn"
                             onclick="toggleEditMode()">{% trans 'Edit' %}</button>
-                    <button type="button" class="btn btn-sm btn-phoenix-primary" id="eventSubmitBtn" style="display: none;"
-                            onclick="submitChanges()">{% trans 'Submit' %}
-                    </button>
-                    <button type="button" class="btn btn-phoenix-danger" id="eventDeleteBtn"
-                            onclick="deleteAppointment()" style="display: none;">
-                        {% trans 'Delete' %}
-                    </button>
+                    <button type="button"
+                            class="btn btn-sm btn-phoenix-primary"
+                            id="eventSubmitBtn"
+                            style="display: none"
+                            onclick="submitChanges()">{% trans 'Submit' %}</button>
+                    <button type="button"
+                            class="btn btn-phoenix-danger"
+                            id="eventDeleteBtn"
+                            onclick="deleteAppointment()"
+                            style="display: none">{% trans 'Delete' %}</button>
                 </div>
             </div>
-
         </div>
     </div>
 </div>
diff --git a/templates/notifications-copy.html b/templates/notifications-copy.html
index 25ba5ddf..437ba109 100644
--- a/templates/notifications-copy.html
+++ b/templates/notifications-copy.html
@@ -1,49 +1,82 @@
 <li class="nav-item dropdown">
-  <div class="notification-count" hx-get="{% url 'fetch_notifications' %}" hx-trigger="every 20s" hx-swap="innerHTML" hx-select=".notification-count">
-    {% if notifications_ %}
-      <span class="badge bg-danger rounded-pill " id="notification-counter" style="position: absolute; top: 8px; right: 3px; font-size: 0.50rem;">{{ notifications_.count }}</span>
-    {% endif %}
-  </div>
-  <a class="nav-link" href="{% url 'fetch_notifications' %}" hx-get="{% url 'fetch_notifications' %}" hx-swap="innerHTML" hx-target=".card-body" hx-select=".card-body" style="min-width: 2.25rem" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-bs-auto-close="outside"><span class="d-block" style="height:20px;width:20px;"><span data-feather="bell" style="height:20px;width:20px;"></span></span></span>
+    <div class="notification-count"
+         hx-get="{% url 'fetch_notifications' %}"
+         hx-trigger="every 20s"
+         hx-swap="innerHTML"
+         hx-select=".notification-count">
+        {% if notifications_ %}
+            <span class="badge bg-danger rounded-pill"
+                  id="notification-counter"
+                  style="position: absolute;
+                         top: 8px;
+                         right: 3px;
+                         font-size: 0.50rem">{{ notifications_.count }}</span>
+        {% endif %}
+    </div>
+<a class="nav-link"
+   href="{% url 'fetch_notifications' %}"
+   hx-get="{% url 'fetch_notifications' %}"
+   hx-swap="innerHTML"
+   hx-target=".card-body"
+   hx-select=".card-body"
+   style="min-width: 2.25rem"
+   role="button"
+   data-bs-toggle="dropdown"
+   aria-haspopup="true"
+   aria-expanded="false"
+   data-bs-auto-close="outside"><span class="d-block" style="height:20px;width:20px;"><span data-feather="bell" style="height:20px;width:20px;"></span></span></span>
 </a>
-<div class="dropdown-menu dropdown-menu-end notification-dropdown-menu py-0 shadow border navbar-dropdown-caret" id="navbarDropdownNotfication" aria-labelledby="navbarDropdownNotfication">
-  <div class="card position-relative border-0">
-    <div class="card-header p-2">
-      <div class="d-flex justify-content-between">
-        <h5 class="text-body-emphasis mb-0">{{ _("Notifications") }}</h5>
-        <button class="btn btn-link p-0 fs-9 fw-normal" type="button">{{ _("Mark all as read")}}</button>
-      </div>
-    </div>
-    <div class="card-body p-0">
-      <div class="scrollbar-overlay" style="height: 27rem;">
-        {% for notification in notifications_  %}
-          <div class="px-2 px-sm-3 py-3 notification-card position-relative read border-bottom">
-            <div class="d-flex align-items-center justify-content-between position-relative">
-              <div class="d-flex">
-                <div class="flex-1 me-sm-3">
-                  <h4 class="fs-9 text-body-emphasis">System</h4>
-                  <p class="fs-9 text-body-highlight mb-2 mb-sm-3 fw-normal">
-                    <span class="me-1 fs-10">💬</span>{{notification.message|safe}}<span class="ms-2 text-body-quaternary text-opacity-75 fw-bold fs-10">10m</span>
-                  </p>
-                  <p class="text-body-secondary fs-9 mb-0">
-                    <span class="me-1 fas fa-clock"></span><span class="fw-bold">10:41 AM</span>{{notification.created}}
-                  </p>
-                </div>
-              </div>
-              <div class="dropdown notification-dropdown">
-                <button class="btn fs-10 btn-sm dropdown-toggle dropdown-caret-none transition-none" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10 text-body"></span></button>
-                <div class="dropdown-menu py-2">
-                  <a class="dropdown-item" href="{% url 'mark_notification_as_read' notification.id %}">Mark as read</a>
-                </div>
-              </div>
+<div class="dropdown-menu dropdown-menu-end notification-dropdown-menu py-0 shadow border navbar-dropdown-caret"
+     id="navbarDropdownNotfication"
+     aria-labelledby="navbarDropdownNotfication">
+    <div class="card position-relative border-0">
+        <div class="card-header p-2">
+            <div class="d-flex justify-content-between">
+                <h5 class="text-body-emphasis mb-0">{{ _("Notifications") }}</h5>
+                <button class="btn btn-link p-0 fs-9 fw-normal" type="button">{{ _("Mark all as read") }}</button>
             </div>
-          </div>
-        {% endfor %}
-      </div>
+        </div>
+        <div class="card-body p-0">
+            <div class="scrollbar-overlay" style="height: 27rem;">
+                {% for notification in notifications_ %}
+                    <div class="px-2 px-sm-3 py-3 notification-card position-relative read border-bottom">
+                        <div class="d-flex align-items-center justify-content-between position-relative">
+                            <div class="d-flex">
+                                <div class="flex-1 me-sm-3">
+                                    <h4 class="fs-9 text-body-emphasis">System</h4>
+                                    <p class="fs-9 text-body-highlight mb-2 mb-sm-3 fw-normal">
+                                        <span class="me-1 fs-10">💬</span>{{ notification.message|safe }}<span class="ms-2 text-body-quaternary text-opacity-75 fw-bold fs-10">10m</span>
+                                    </p>
+                                    <p class="text-body-secondary fs-9 mb-0">
+                                        <span class="me-1 fas fa-clock"></span><span class="fw-bold">10:41 AM</span>{{ notification.created }}
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="dropdown notification-dropdown">
+                                <button class="btn fs-10 btn-sm dropdown-toggle dropdown-caret-none transition-none"
+                                        type="button"
+                                        data-bs-toggle="dropdown"
+                                        data-boundary="window"
+                                        aria-haspopup="true"
+                                        aria-expanded="false"
+                                        data-bs-reference="parent">
+                                    <span class="fas fa-ellipsis-h fs-10 text-body"></span>
+                                </button>
+                                <div class="dropdown-menu py-2">
+                                    <a class="dropdown-item"
+                                       href="{% url 'mark_notification_as_read' notification.id %}">Mark as read</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+        <div class="card-footer p-0 border-top border-translucent border-0">
+            <div class="my-2 text-center fw-bold fs-10 text-body-tertiary text-opactity-85">
+                <a class="fw-bolder" href="{% url 'notifications_history' %}">Notification history</a>
+            </div>
+        </div>
     </div>
-    <div class="card-footer p-0 border-top border-translucent border-0">
-      <div class="my-2 text-center fw-bold fs-10 text-body-tertiary text-opactity-85"><a class="fw-bolder" href="{% url 'notifications_history' %}">Notification history</a></div>
-    </div>
-  </div>
 </div>
 </li>
diff --git a/templates/notifications.html b/templates/notifications.html
index c59f755f..6dd85664 100644
--- a/templates/notifications.html
+++ b/templates/notifications.html
@@ -1,31 +1,47 @@
 <style>
     .fade-out {
-  animation: fadeOut 1s ease-out forwards;
-}
+        animation: fadeOut 1s ease-out forwards;
+    }
 
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
+    @keyframes fadeOut {
+        from {
+            opacity: 1;
+        }
+        to {
+            opacity: 0;
+        }
+    }
 
 
 </style>
 <li class="nav-item dropdown">
-  <!-- Notification counter -->
+    <!-- Notification counter -->
     <div class="notification-count">
         {% if notifications_ %}
-            <span class="badge bg-danger rounded-pill" id="notification-counter" style="position: absolute; top: 8px; right: 3px; font-size: 0.50rem;">{{ notifications_.count }}</span>
+            <span class="badge bg-danger rounded-pill"
+                  id="notification-counter"
+                  style="position: absolute;
+                         top: 8px;
+                         right: 3px;
+                         font-size: 0.50rem">{{ notifications_.count }}</span>
         {% else %}
-            <span class="badge bg-danger rounded-pill d-none" id="notification-counter" style="position: absolute; top: 8px; right: 3px; font-size: 0.50rem;">0</span>
+            <span class="badge bg-danger rounded-pill d-none"
+                  id="notification-counter"
+                  style="position: absolute;
+                         top: 8px;
+                         right: 3px;
+                         font-size: 0.50rem">0</span>
         {% endif %}
     </div>
-
-  <!-- Bell icon -->
-    <a class="nav-link" href="{% url 'fetch_notifications' %}" style="min-width: 2.25rem" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-bs-auto-close="outside">
+    <!-- Bell icon -->
+    <a class="nav-link"
+       href="{% url 'fetch_notifications' %}"
+       style="min-width: 2.25rem"
+       role="button"
+       data-bs-toggle="dropdown"
+       aria-haspopup="true"
+       aria-expanded="false"
+       data-bs-auto-close="outside">
         <span class="d-block" style="height:20px;width:20px;">
             <span data-feather="bell" style="height:20px;width:20px;"></span>
         </span>
@@ -37,14 +53,16 @@
             <div class="card-header p-2">
                 <div class="d-flex justify-content-between">
                     <h5 class="text-body-emphasis mb-0">{{ _("Notifications") }}</h5>
-
                 </div>
             </div>
             <div class="card-body p-0">
-                <div class="scrollbar-overlay" style="height: 27rem;" id="notifications-container">
+                <div class="scrollbar-overlay"
+                     style="height: 27rem"
+                     id="notifications-container">
                     {% for notification in notifications_ %}
-                        <div class="px-2 px-sm-3 py-3 notification-card position-relative read border-bottom" data-notification-id="{{ notification.id }}">
-                          <!-- Notification content -->
+                        <div class="px-2 px-sm-3 py-3 notification-card position-relative read border-bottom"
+                             data-notification-id="{{ notification.id }}">
+                            <!-- Notification content -->
                         </div>
                     {% endfor %}
                 </div>
@@ -57,7 +75,6 @@
         </div>
     </div>
 </li>
-
 <script>
     document.addEventListener('DOMContentLoaded', function() {
 
@@ -133,7 +150,7 @@
                     notificationSound.currentTime = 0;
                     notificationSound.play().catch(e => {
                         console.log("Audio play failed - may need user interaction first:", e);
-                });
+                    });
 
                 } catch (error) {
                     console.error('Error processing notification:', error);
@@ -160,8 +177,7 @@
         function createNotificationElement(data) {
             const isRead = data.is_read ? 'read' : 'unread';
             return `
-            <div class="px-2 px-sm-3 py-3 notification-card position-relative ${isRead} border-bottom"
-                 data-notification-id="${data.id}">
+            <div class="px-2 px-sm-3 py-3 notification-card position-relative ${isRead} border-bottom" data-notification-id="${data.id}">
                 <div class="d-flex align-items-center justify-content-between position-relative">
                     <div class="d-flex">
                         <div class="flex-1 me-sm-3">
@@ -175,8 +191,7 @@
                         </div>
                     </div>
                     <div class="dropdown notification-dropdown">
-                        <button class="btn fs-10 btn-sm dropdown-toggle dropdown-caret-none transition-none"
-                                type="button" data-bs-toggle="dropdown">
+                        <button class="btn fs-10 btn-sm dropdown-toggle dropdown-caret-none transition-none" type="button" data-bs-toggle="dropdown">
                             <span class="fas fa-ellipsis-h fs-10 text-body"></span>
                         </button>
                         <div class="dropdown-menu py-2">
@@ -196,8 +211,7 @@
                     const notificationCountDiv = document.querySelector('.notification-count');
                     if (notificationCountDiv) {
                         notificationCountDiv.innerHTML = `
-                        <span class="badge bg-danger rounded-pill" id="notification-counter"
-                              style="position: absolute; top: 8px; right: 3px; font-size: 0.50rem;">0</span>
+                        <span class="badge bg-danger rounded-pill" id="notification-counter" style="position: absolute; top: 8px; right: 3px; font-size: 0.50rem;">0</span>
                     `;
                         counter = document.getElementById('notification-counter');
                     }
@@ -268,4 +282,4 @@
             }
         });
     });
-</script>
\ No newline at end of file
+</script>
diff --git a/templates/organizations/organization_confirm_delete.html b/templates/organizations/organization_confirm_delete.html
index f20794a6..63793620 100644
--- a/templates/organizations/organization_confirm_delete.html
+++ b/templates/organizations/organization_confirm_delete.html
@@ -4,7 +4,5 @@
         <meta charset="UTF-8">
         <title>Title</title>
     </head>
-    <body>
-
-    </body>
-</html>
\ No newline at end of file
+    <body></body>
+</html>
diff --git a/templates/organizations/organization_detail.html b/templates/organizations/organization_detail.html
index 58daa6b3..3ab5283a 100644
--- a/templates/organizations/organization_detail.html
+++ b/templates/organizations/organization_detail.html
@@ -1,28 +1,40 @@
 {% extends 'base.html' %}
 {% load i18n %}
-{% block title %}{% trans "Organization Details" %}{% endblock title %}
+{% block title %}
+    {% trans "Organization Details" %}
+{% endblock title %}
 {% block content %}
     <div class="row my-4">
         <h2>{{ organization.get_local_name }}</h2>
         <ul class="list-group mb-4">
-            <li class="list-group-item"><strong>{% trans "CRN" %}:</strong> {{ organization.crn }}</li>
-            <li class="list-group-item"><strong>{% trans "VRN" %}:</strong> {{ organization.vrn }}</li>
-            <li class="list-group-item"><strong>{% trans "Phone" %}:</strong> {{ organization.phone_number }}</li>
-            <li class="list-group-item"><strong>{% trans "Address" %}:</strong> {{ organization.address }}</li>
+            <li class="list-group-item">
+                <strong>{% trans "CRN" %}:</strong> {{ organization.crn }}
+            </li>
+            <li class="list-group-item">
+                <strong>{% trans "VRN" %}:</strong> {{ organization.vrn }}
+            </li>
+            <li class="list-group-item">
+                <strong>{% trans "Phone" %}:</strong> {{ organization.phone_number }}
+            </li>
+            <li class="list-group-item">
+                <strong>{% trans "Address" %}:</strong> {{ organization.address }}
+            </li>
         </ul>
         <div class="d-flex">
-            {% if perms.inventory.change_organization%}
-            <a href="{% url 'organization_update' request.dealer.slug organization.slug %}" class="btn btn-sm btn-phoenix-primary me-2"><span class="fas fa-edit me-1"></span>{% trans "Edit" %}</a>
+            {% if perms.inventory.change_organization %}
+                <a href="{% url 'organization_update' request.dealer.slug organization.slug %}"
+                   class="btn btn-sm btn-phoenix-primary me-2"><span class="fas fa-edit me-1"></span>{% trans "Edit" %}</a>
             {% endif %}
-            {% if perms.inventory.delete_organization%}
-            <button class="btn btn-phoenix-danger btn-sm delete-btn"
-                    data-url="{% url 'organization_delete' request.dealer.slug organization.slug %}"
-                    data-message="Are you sure you want to delete this organization?"
-                    data-bs-toggle="modal" data-bs-target="#deleteModal">
-               <i class="fas fa-trash me-1"></i> {% trans 'Delete' %}
-            </button>
+            {% if perms.inventory.delete_organization %}
+                <button class="btn btn-phoenix-danger btn-sm delete-btn"
+                        data-url="{% url 'organization_delete' request.dealer.slug organization.slug %}"
+                        data-message="Are you sure you want to delete this organization?"
+                        data-bs-toggle="modal"
+                        data-bs-target="#deleteModal">
+                    <i class="fas fa-trash me-1"></i> {% trans 'Delete' %}
+                </button>
             {% endif %}
         </div>
     </div>
     {% include 'modal/delete_modal.html' %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/organizations/organization_form.html b/templates/organizations/organization_form.html
index 8568784c..0867c354 100644
--- a/templates/organizations/organization_form.html
+++ b/templates/organizations/organization_form.html
@@ -4,19 +4,16 @@
 {% block title %}
     {# Check if an 'object'  exists in the context #}
     {% if object %}
-        {% trans 'Update Organization'%}
+        {% trans 'Update Organization' %}
     {% else %}
-        {% trans 'Add New Organization'%}
+        {% trans 'Add New Organization' %}
     {% endif %}
 {% endblock %}
-
 {% block content %}
-
-   <div class="row justify-content-center mt-5 mb-3">
-
-       <div class="col-lg-8 col-md-10">
-         <div class="card shadow-sm border-0 rounded-3">
-            <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
+    <div class="row justify-content-center mt-5 mb-3">
+        <div class="col-lg-8 col-md-10">
+            <div class="card shadow-sm border-0 rounded-3">
+                <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
                     <h3 class="mb-0 fs-4 text-center text-white">
                        {% if object %}
                             {% trans 'Update Organization'%}
@@ -42,11 +39,5 @@
 
             </div>
         </div>
-
-       </div>
-
-   </div>
-
-
-
-{% endblock%}
\ No newline at end of file
+    </div>
+{% endblock %}
diff --git a/templates/organizations/organization_list.html b/templates/organizations/organization_list.html
index f4343503..1f04c1f0 100644
--- a/templates/organizations/organization_list.html
+++ b/templates/organizations/organization_list.html
@@ -2,140 +2,184 @@
 {% load i18n %}
 {% load static %}
 {% block title %}
-  {% trans 'Organizations' %}
+    {% trans 'Organizations' %}
 {% endblock %}
 {% block organizations %}
-  <a class="nav-link active">{% trans 'Organizations' %}</a>
+    <a class="nav-link active">{% trans 'Organizations' %}</a>
 {% endblock %}
-
 {% block content %}
-  <section class="pt-5 pb-9 ">
-    <div class="row overflow-x-auto whitespace-nowrap -mx-2 sm:mx-0">
-      <h2 class="mb-4">{% trans 'Organizations' %} <li class="fas fa-city text-primary ms-2"></li></h2>
-
-      <div class="row g-3 justify-content-between mb-4">
-        <div class="col-auto">
-          <div class="d-md-flex justify-content-between">
-            {% if perms.inventory.add_organization%}
-              <div>
-                <a href="{% url 'organization_create' request.dealer.slug %}" class="btn btn-sm btn-phoenix-primary"><span class="fas fa-plus me-2"></span>{% trans 'add organization'|capfirst %}</a>
-              </div>
+    <section class="pt-5 pb-9 ">
+        <div class="row overflow-x-auto whitespace-nowrap -mx-2 sm:mx-0">
+            <h2 class="mb-4">
+                {% trans 'Organizations' %}
+                <li class="fas fa-city text-primary ms-2"></li>
+            </h2>
+            <div class="row g-3 justify-content-between mb-4">
+                <div class="col-auto">
+                    <div class="d-md-flex justify-content-between">
+                        {% if perms.inventory.add_organization %}
+                            <div>
+                                <a href="{% url 'organization_create' request.dealer.slug %}"
+                                   class="btn btn-sm btn-phoenix-primary"><span class="fas fa-plus me-2"></span>{% trans 'add organization'|capfirst %}</a>
+                            </div>
+                        {% endif %}
+                    </div>
+                </div>
+                <div class="col-auto">
+                    <div class="d-flex">{% include 'partials/search_box.html' %}</div>
+                </div>
+            </div>
+            <div class="table-responsive scrollbar mx-n1 px-1">
+                <table class="table align-items-center table-flush table-hover">
+                    <thead>
+                        <tr class="bg-body-highlight">
+                            <th class="sort white-space-nowrap align-middle text-uppercase ps-0 px-1"
+                                scope="col"
+                                data-sort="name"
+                                style="width:25%">{{ _("Name") |capfirst }}</th>
+                            <th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent"
+                                scope="col"
+                                data-sort="name"
+                                style="width:15%">
+                                <div class="d-inline-flex flex-center">
+                                    <div class="d-flex align-items-center px-1 py-1 bg-success-subtle rounded me-2">
+                                        <span class="fs-7 text-success-dark far fa-file-alt"></span>
+                                    </div>
+                                    <span>{% trans 'CRN' %}</span>
+                                </div>
+                            </th>
+                            <th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent"
+                                scope="col"
+                                data-sort="phone"
+                                style="width:15%;
+                                       min-width: 180px">
+                                <div class="d-inline-flex flex-center">
+                                    <div class="d-flex align-items-center px-1 py-1 bg-primary-subtle rounded me-2">
+                                        <span class="fs-7 text-primary-dark fas fa-money-check-alt"></span>
+                                    </div>
+                                    <span>{% trans 'VRN' %}</span>
+                                </div>
+                            </th>
+                            <th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent"
+                                scope="col"
+                                data-sort="contact"
+                                style="width:15%">
+                                <div class="d-inline-flex flex-center">
+                                    <div class="d-flex align-items-center px-1 py-1 bg-info-subtle rounded me-2">
+                                        <span class="text-info-dark" data-feather="phone"></span>
+                                    </div>
+                                    <span>{% trans 'Phone' %}</span>
+                                </div>
+                            </th>
+                            <th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent"
+                                scope="col"
+                                data-sort="company"
+                                style="width:15%">
+                                <div class="d-inline-flex flex-center">
+                                    <div class="d-flex align-items-center px-1 py-1 bg-warning-subtle rounded me-2">
+                                        <span class="text-warning-dark" data-feather="grid"></span>
+                                    </div>
+                                    <span>{% trans 'Address' %}</span>
+                                </div>
+                            </th>
+                            <th class="sort align-middle ps-4 pe-5 text-uppercase"
+                                scope="col"
+                                data-sort="date"
+                                style="width:15%">{{ _("Create date") }}</th>
+                            <th class="sort text-end align-middle pe-0 ps-4" scope="col"></th>
+                        </tr>
+                    </thead>
+                    <tbody class="list" id="leal-tables-body">
+                        {% for org in organizations %}
+                            <!-- Delete Modal -->
+                            <div class="modal fade"
+                                 id="deleteModal"
+                                 data-bs-backdrop="static"
+                                 data-bs-keyboard="false"
+                                 tabindex="-1"
+                                 aria-labelledby="deleteModalLabel"
+                                 aria-hidden="true">
+                                <div class="modal-dialog modal-sm">
+                                    <div class="modal-content">
+                                        <div class="modal-header">
+                                            <h5 class="modal-title" id="deleteModalLabel">
+                                                {% trans 'Delete Organization' %}
+                                                <span data-feather="alert-circle"></span>
+                                            </h5>
+                                            <button type="button"
+                                                    class="btn-close"
+                                                    data-bs-dismiss="modal"
+                                                    aria-label="Close"></button>
+                                        </div>
+                                        <div class="modal-body text-center">
+                                            <p class="mb-0 text-danger fw-bold">{% trans 'Are you sure you want to delete this Organization?' %}</p>
+                                            <button type="button"
+                                                    class="btn btn-phoenix-secondary btn-sm"
+                                                    data-bs-dismiss="modal">{% trans 'No' %}</button>
+                                            <a type="button"
+                                               class="btn btn-phoenix-danger btn-sm"
+                                               href="{% url 'organization_delete' request.dealer.slug org.slug %}">{% trans 'Yes' %}</a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <tr class="hover-actions-trigger btn-reveal-trigger position-static">
+                                <td class="name align-middle white-space-nowrap ps-0 px-1">
+                                    <div class="d-flex align-items-center">
+                                        <div>
+                                            <a class="fs-8 fw-bold"
+                                               href="{% url 'organization_detail' request.dealer.slug org.slug %}">{{ org.name }}</a>
+                                        </div>
+                                    </div>
+                                </td>
+                                <td class="email align-middle white-space-nowrap fw-semibold ps-4 border-end border-translucent">{{ org.crn }}</td>
+                                <td class="phone align-middle white-space-nowrap fw-semibold ps-4 border-end border-translucent">{{ org.vrn }}</td>
+                                <td class="phone align-middle white-space-nowrap ps-4 border-end border-translucent fw-semibold text-body-highlight">
+                                    <a class="text-body-highlight" href="tel:{{ org.phone }}">{{ org.phone_number }}</a>
+                                </td>
+                                <td class="company align-middle white-space-nowrap text-body-tertiary text-opacity-85 ps-4 border-end border-translucent fw-semibold text-body-highlight">
+                                    {{ org.address }}
+                                </td>
+                                <td class="date align-middle white-space-nowrap text-body-tertiary text-opacity-85 ps-4 text-body-tertiary">
+                                    {{ org.created|date }}
+                                </td>
+                                <td class="align-middle white-space-nowrap text-end pe-0 ps-4">
+                                    {% if perms.inventory.change_organization or perms.inventory.delete_organization %}
+                                        <div class="btn-reveal-trigger position-static">
+                                            <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
+                                                    type="button"
+                                                    data-bs-toggle="dropdown"
+                                                    data-boundary="window"
+                                                    aria-haspopup="true"
+                                                    aria-expanded="false"
+                                                    data-bs-reference="parent">
+                                                <span class="fas fa-ellipsis-h fs-10"></span>
+                                            </button>
+                                            <div class="dropdown-menu dropdown-menu-end py-2">
+                                                {% if perms.inventory.change_organization %}
+                                                    <a href="{% url 'organization_update' request.dealer.slug org.slug %}"
+                                                       class="dropdown-item text-success-dark">{% trans 'Edit' %}</a>
+                                                {% endif %}
+                                                {% if perms.inventory.delete_organization %}
+                                                    <div class="dropdown-divider"></div>
+                                                    <button class="dropdown-item text-danger"
+                                                            data-bs-toggle="modal"
+                                                            data-bs-target="#deleteModal">{% trans 'Delete' %}</button>
+                                                {% endif %}
+                                            </div>
+                                        </div>
+                                    {% endif %}
+                                </td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+            {% if page_obj.paginator.num_pages > 1 %}
+                <div class="d-flex justify-content-end mt-3">
+                    <div class="d-flex">{% include 'partials/pagination.html' %}</div>
+                </div>
             {% endif %}
-          </div>
         </div>
-        <div class="col-auto">
-          <div class="d-flex">
-            {% include 'partials/search_box.html' %}
-          </div>
-        </div>
-      </div>
-
-      <div class="table-responsive scrollbar mx-n1 px-1">
-        <table class="table align-items-center table-flush table-hover">
-          <thead>
-            <tr class="bg-body-highlight">
-              <th class="sort white-space-nowrap align-middle text-uppercase ps-0 px-1" scope="col" data-sort="name" style="width:25%;">{{ _('Name')|capfirst }}</th>
-              <th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent" scope="col" data-sort="name" style="width:15%;">
-                <div class="d-inline-flex flex-center">
-                  <div class="d-flex align-items-center px-1 py-1 bg-success-subtle rounded me-2">
-                    <span class="fs-7 text-success-dark far fa-file-alt"></span>
-                  </div><span>{% trans 'CRN' %}</span>
-                </div>
-              </th>
-              <th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent" scope="col" data-sort="phone" style="width:15%; min-width: 180px;">
-                <div class="d-inline-flex flex-center">
-                  <div class="d-flex align-items-center px-1 py-1 bg-primary-subtle rounded me-2">
-                    <span class="fs-7 text-primary-dark fas fa-money-check-alt"></span>
-                  </div><span>{% trans 'VRN' %}</span>
-                </div>
-              </th>
-              <th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent" scope="col" data-sort="contact" style="width:15%;">
-                <div class="d-inline-flex flex-center">
-                  <div class="d-flex align-items-center px-1 py-1 bg-info-subtle rounded me-2">
-                    <span class="text-info-dark" data-feather="phone"></span>
-                  </div><span>{% trans 'Phone' %}</span>
-                </div>
-              </th>
-              <th class="sort align-middle ps-4 pe-5 text-uppercase border-end border-translucent" scope="col" data-sort="company" style="width:15%;">
-                <div class="d-inline-flex flex-center">
-                  <div class="d-flex align-items-center px-1 py-1 bg-warning-subtle rounded me-2">
-                    <span class="text-warning-dark" data-feather="grid"></span>
-                  </div><span>{% trans 'Address' %}</span>
-                </div>
-              </th>
-              <th class="sort align-middle ps-4 pe-5 text-uppercase" scope="col" data-sort="date" style="width:15%;">{{ _('Create date') }}</th>
-              <th class="sort text-end align-middle pe-0 ps-4" scope="col"></th>
-            </tr>
-          </thead>
-          <tbody class="list" id="leal-tables-body">
-            {% for org in organizations %}
-              <!-- Delete Modal -->
-              <div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
-                <div class="modal-dialog modal-sm">
-                  <div class="modal-content">
-                    <div class="modal-header">
-                      <h5 class="modal-title" id="deleteModalLabel">
-                        {% trans 'Delete Organization' %}
-                        <span data-feather="alert-circle"></span>
-                      </h5>
-                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                    </div>
-                    <div class="modal-body text-center">
-                      <p class="mb-0 text-danger fw-bold">
-                        {% trans 'Are you sure you want to delete this Organization?' %}
-                      </p>
-                      <button type="button" class="btn btn-phoenix-secondary btn-sm" data-bs-dismiss="modal">{% trans 'No' %}</button>
-                      <a type="button" class="btn btn-phoenix-danger btn-sm" href="{% url 'organization_delete' request.dealer.slug org.slug %}">{% trans 'Yes' %}</a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-                <td class="name align-middle white-space-nowrap ps-0 px-1">
-                  <div class="d-flex align-items-center">
-                    <div>
-                      <a class="fs-8 fw-bold" href="{% url 'organization_detail' request.dealer.slug org.slug %}">{{ org.name }}</a>
-                    </div>
-                  </div>
-                </td>
-                <td class="email align-middle white-space-nowrap fw-semibold ps-4 border-end border-translucent">{{ org.crn }}</td>
-                <td class="phone align-middle white-space-nowrap fw-semibold ps-4 border-end border-translucent">{{ org.vrn }}</td>
-                <td class="phone align-middle white-space-nowrap ps-4 border-end border-translucent fw-semibold text-body-highlight">
-                  <a class="text-body-highlight" href="tel:{{ org.phone }}">{{ org.phone_number }}</a>
-                </td>
-                <td class="company align-middle white-space-nowrap text-body-tertiary text-opacity-85 ps-4 border-end border-translucent fw-semibold text-body-highlight">{{ org.address }}</td>
-                <td class="date align-middle white-space-nowrap text-body-tertiary text-opacity-85 ps-4 text-body-tertiary">{{ org.created|date }}</td>
-                <td class="align-middle white-space-nowrap text-end pe-0 ps-4">
-                    {% if perms.inventory.change_organization or perms.inventory.delete_organization%}
-                    <div class="btn-reveal-trigger position-static">
-                      <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
-                      <div class="dropdown-menu dropdown-menu-end py-2">
-                        {% if perms.inventory.change_organization %}
-                        <a href="{% url 'organization_update' request.dealer.slug org.slug %}" class="dropdown-item text-success-dark">{% trans 'Edit' %}</a>
-                        {% endif %}
-                        {% if perms.inventory.delete_organization %}
-                          <div class="dropdown-divider"></div><button class="dropdown-item text-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">{% trans 'Delete' %}</button>
-                        {% endif %}
-                      </div>
-                    </div>
-                    {% endif %}
-                 
-                </td>
-              </tr>
-            {% endfor %}
-          </tbody>
-        </table>
-      </div>
-      {% if page_obj.paginator.num_pages > 1 %}
-
-        <div class="d-flex justify-content-end mt-3">
-
-          <div class="d-flex">
-            {% include 'partials/pagination.html'%}
-          </div>
-
-        </div>
-      {% endif %}
-    </div>
-  </section>
+    </section>
 {% endblock %}
diff --git a/templates/otp/verify_otp.html b/templates/otp/verify_otp.html
index 4dac1200..34b09242 100644
--- a/templates/otp/verify_otp.html
+++ b/templates/otp/verify_otp.html
@@ -1,39 +1,48 @@
 {% extends 'base.html' %}
 {% load i18n static %}
-
 {% block content %}
-  <div class="row">
-    <div class="row flex-center min-vh-100 py-5">
-      <div class="col-sm-10 col-md-8 col-lg-5 col-xxl-4">
-        <a class="d-flex flex-center text-decoration-none mb-4" href="{% url 'home' %}">
-          <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
-            <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
-              <img class="d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="{% trans 'home' %}" width="58" />
-              <img class="d-light-none" src="{% static 'images/logos/logo.png' %}" alt="{% trans 'home' %}" width="58" />
-            </div>
-          </div>
-        </a>
-        <div class="px-xxl-5">
-          <div class="text-center mb-6">
-            <h4 class="text-body-highlight">{{ _("Enter the verification code")}}</h4>
-            <p class="text-body-tertiary mb-0">{{ _("An OTP has been sent to your email. Please enter it below")}} </p>
-
-            <form class="verification-form" method="post">
-              <div class="d-flex align-items-center mb-3">
-                {% csrf_token %}
-                <div class="form-floating mb-3">
-                  <input class="form-control form-control-sm" type="text" id="otp_token" placeholder="{{ _("Enter OTP")}}" required>
-                  <label class="form-label" for="otp_token">{{ _("OTP")}}</label>
+    <div class="row">
+        <div class="row flex-center min-vh-100 py-5">
+            <div class="col-sm-10 col-md-8 col-lg-5 col-xxl-4">
+                <a class="d-flex flex-center text-decoration-none mb-4"
+                   href="{% url 'home' %}">
+                    <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
+                        <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
+                            <img class="d-dark-none"
+                                 src="{% static 'images/logos/logo-d.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
+                            <img class="d-light-none"
+                                 src="{% static 'images/logos/logo.png' %}"
+                                 alt="{% trans 'home' %}"
+                                 width="58" />
+                        </div>
+                    </div>
+                </a>
+                <div class="px-xxl-5">
+                    <div class="text-center mb-6">
+                        <h4 class="text-body-highlight">{{ _("Enter the verification code") }}</h4>
+                        <p class="text-body-tertiary mb-0">{{ _("An OTP has been sent to your email. Please enter it below") }}</p>
+                        <form class="verification-form" method="post">
+                            <div class="d-flex align-items-center mb-3">
+                                {% csrf_token %}
+                                <div class="form-floating mb-3">
+                                    <input class="form-control form-control-sm"
+                                           type="text"
+                                           id="otp_token"
+                                           placeholder="{{ _("Enter OTP") }}"
+                                           required>
+                                    <label class="form-label" for="otp_token">{{ _("OTP") }}</label>
+                                </div>
+                            </div>
+                            <button class="btn btn-phoenix-primary w-100 mb-5"
+                                    type="submit"
+                                    disabled="disabled">{{ _("Verify") }}</button>
+                            <a class="fs-9" href="">{{ _("Didn’t receive the code") }}?</a>
+                        </form>
+                    </div>
                 </div>
-
-              </div>
-              <Button class="btn btn-phoenix-primary w-100 mb-5" type="submit" disabled="disabled">{{ _("Verify") }}</Button>
-              <a class="fs-9" href="">{{ _("Didn’t receive the code")}}? </a>
-            </form>
-          </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
-
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/partials/form_errors.html b/templates/partials/form_errors.html
index cbf14b14..358ef1b0 100644
--- a/templates/partials/form_errors.html
+++ b/templates/partials/form_errors.html
@@ -3,13 +3,9 @@
     <div class="alert alert-danger alert-dismissible fade show" role="alert">
         <ul>
             {% for field in form %}
-                {% for error in field.errors %}
-                    <li>{{ error }}</li>
-                {% endfor %}
-            {% endfor %}
-            {% for error in form.non_field_errors %}
-                <li>{{ error }}</li>
+                {% for error in field.errors %}<li>{{ error }}</li>{% endfor %}
             {% endfor %}
+            {% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}
         </ul>
     </div>
-{% endif %}
\ No newline at end of file
+{% endif %}
diff --git a/templates/partials/pagination.html b/templates/partials/pagination.html
index 84d48c20..19e2c274 100644
--- a/templates/partials/pagination.html
+++ b/templates/partials/pagination.html
@@ -1,64 +1,87 @@
 {% load i18n static %}
 <div class="d-flex justify-content-between align-items-center mt-4 mb-3">
-                    <div class="text-body-secondary fw-bold fs-10">
-                        {{ _("Showing") }} {{ page_obj.start_index }} {{ _("to") }} {{ page_obj.end_index }}
-                        {{ _("of") }} {{ page_obj.paginator.count }} {{ _("results") }}
-                    </div>
-<nav aria-label="Page navigation">
-    <ul class="pagination mb-0">
-        {# First Page Link #}
-        {% if page_obj.has_previous %}
-            <li class="page-item">
-                <a class="page-link" href="?page=1{% if q %}&q={{q}}{% endif %}">
-             <span class="fas fa-angle-double-{% if LANGUAGE_CODE == 'ar' %}right{% else %}left{% endif %}"> </span>
-                </a>
-            </li>
-        {% else %}
-            <li class="page-item">
-                <span class="page-link">
-                    <span class="fas fa-chevron-{% if LANGUAGE_CODE == 'ar' %}right{% else %}left{% endif %}"> </span>
-                </span>
-            </li>
-        {% endif %}
-
-        {# Previous Page Link #}
-        {% if page_obj.has_previous %}
-            <li class="page-item">
-                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if q %}&q={{q}}{% endif %}">
-              <span class="fas fa-chevron-{% if LANGUAGE_CODE == 'ar' %}right{% else %}left{% endif %}"></span>
-                </a>
-            </li>
-        {% endif %}
-
-        {# Page Numbers #}
-        {% for num in page_obj.paginator.page_range %}
-            {% if num == 1 or num == page_obj.paginator.num_pages or num >= page_obj.number|add:-2 and num <= page_obj.number|add:2 %}
-                <li class="page-item {% if num == page_obj.number %}active{% endif %}">
-                    <a class="page-link" {% if num == page_obj.number %}aria-current="page"{% endif %}
-                       href="?page={{ num }}{% if q %}&q={{q}}{% endif %}">
-                        {{ num }}
+    <div class="text-body-secondary fw-bold fs-10">
+        {{ _("Showing") }} {{ page_obj.start_index }} {{ _("to") }} {{ page_obj.end_index }}
+        {{ _("of") }} {{ page_obj.paginator.count }} {{ _("results") }}
+    </div>
+    <nav aria-label="Page navigation">
+        <ul class="pagination mb-0">
+            {# First Page Link #}
+            {% if page_obj.has_previous %}
+                <li class="page-item">
+                    <a class="page-link" href="?page=1{% if q %}&q={{ q }}{% endif %}">
+                        <span class="fas fa-angle-double-
+                                     {% if LANGUAGE_CODE == 'ar' %}
+                                         right
+                                     {% else %}
+                                         left
+                                     {% endif %}"></span>
+                    </a>
+                </li>
+            {% else %}
+                <li class="page-item">
+                    <span class="page-link">
+                        <span class="fas fa-chevron-
+                                     {% if LANGUAGE_CODE == 'ar' %}
+                                         right
+                                     {% else %}
+                                         left
+                                     {% endif %}"></span>
+                    </span>
+                </li>
+            {% endif %}
+            {# Previous Page Link #}
+            {% if page_obj.has_previous %}
+                <li class="page-item">
+                    <a class="page-link"
+                       href="?page={{ page_obj.previous_page_number }}{% if q %}&q={{ q }}{% endif %}">
+                        <span class="fas fa-chevron-
+                                     {% if LANGUAGE_CODE == 'ar' %}
+                                         right
+                                     {% else %}
+                                         left
+                                     {% endif %}"></span>
                     </a>
                 </li>
             {% endif %}
-        {% endfor %}
-
-        {# Next Page Link #}
-        {% if page_obj.has_next %}
-            <li class="page-item">
-                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if q %}&q={{q}}{% endif %}">
-                    <span class="fas fa-chevron-{% if LANGUAGE_CODE == 'ar' %}left{% else %}right{% endif %}"></span>
-                </a>
-            </li>
-        {% endif %}
-
-        {# Last Page Link #}
-        {% if page_obj.has_next %}
-            <li class="page-item">
-                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if q %}&q={{q}}{% endif %}">
-                 <span class="fas fa-angle-double-{% if LANGUAGE_CODE == 'ar' %}left{% else %}right{% endif %}"></span>
-                </a>
-            </li>
-        {% endif %}
-    </ul>
-</nav>
-</div>
\ No newline at end of file
+            {# Page Numbers #}
+            {% for num in page_obj.paginator.page_range %}
+                {% if num == 1 or num == page_obj.paginator.num_pages or num >= page_obj.number|add:-2 and num <= page_obj.number|add:2 %}
+                    <li class="page-item {% if num == page_obj.number %}active{% endif %}">
+                        <a class="page-link"
+                           {% if num == page_obj.number %}aria-current="page"{% endif %}
+                           href="?page={{ num }}{% if q %}&q={{ q }}{% endif %}">{{ num }}</a>
+                    </li>
+                {% endif %}
+            {% endfor %}
+            {# Next Page Link #}
+            {% if page_obj.has_next %}
+                <li class="page-item">
+                    <a class="page-link"
+                       href="?page={{ page_obj.next_page_number }}{% if q %}&q={{ q }}{% endif %}">
+                        <span class="fas fa-chevron-
+                                     {% if LANGUAGE_CODE == 'ar' %}
+                                         left
+                                     {% else %}
+                                         right
+                                     {% endif %}"></span>
+                    </a>
+                </li>
+            {% endif %}
+            {# Last Page Link #}
+            {% if page_obj.has_next %}
+                <li class="page-item">
+                    <a class="page-link"
+                       href="?page={{ page_obj.paginator.num_pages }}{% if q %}&q={{ q }}{% endif %}">
+                        <span class="fas fa-angle-double-
+                                     {% if LANGUAGE_CODE == 'ar' %}
+                                         left
+                                     {% else %}
+                                         right
+                                     {% endif %}"></span>
+                    </a>
+                </li>
+            {% endif %}
+        </ul>
+    </nav>
+</div>
diff --git a/templates/partials/scanner_modal.html b/templates/partials/scanner_modal.html
index fcbdf05b..5ee35062 100644
--- a/templates/partials/scanner_modal.html
+++ b/templates/partials/scanner_modal.html
@@ -1,15 +1,23 @@
-<div class="modal fade" id="scannerModal" tabindex="-1" aria-labelledby="scannerModalLabel" aria-hidden="true">
+<div class="modal fade"
+     id="scannerModal"
+     tabindex="-1"
+     aria-labelledby="scannerModalLabel"
+     aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header bg-primary text-white">
                 <h5 class="modal-title" id="scannerModalLabel">{{ _("Scanner") }}</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ _("Close") }}"></button>
+                <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>
+                <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-phoenix-primary mt-3">{{ _("Use OCR Fallback") }}</button>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/partials/search_box.html b/templates/partials/search_box.html
index 47442ade..3aa06011 100644
--- a/templates/partials/search_box.html
+++ b/templates/partials/search_box.html
@@ -1,15 +1,21 @@
 <div class="search-box me-2">
     <form class="position-relative show" id="search-form">
-        <input name="q" id="search-input" class="form-control form-control-sm search-input search" type="search"
-               aria-label="Search" placeholder="{{ _('Search...') }}" value="{{ request.GET.q }}" />
+        <input name="q"
+               id="search-input"
+               class="form-control form-control-sm search-input search"
+               type="search"
+               aria-label="Search"
+               placeholder="{{ _("Search...") }}"
+               value="{{ request.GET.q }}" />
         <span class="fa fa-magnifying-glass search-box-icon"></span>
         {% if request.GET.q %}
-            <button type="button" class="btn-close position-absolute end-0 top-50 translate-middle cursor-pointer shadow-none"
-                    id="clear-search" aria-label="Close"></button>
+            <button type="button"
+                    class="btn-close position-absolute end-0 top-50 translate-middle cursor-pointer shadow-none"
+                    id="clear-search"
+                    aria-label="Close"></button>
         {% endif %}
     </form>
 </div>
-
 <script>
     document.addEventListener("DOMContentLoaded", function() {
         const searchInput = document.getElementById("search-input");
@@ -26,4 +32,4 @@
             });
         }
     });
-</script>
\ No newline at end of file
+</script>
diff --git a/templates/partials/specifications_modal.html b/templates/partials/specifications_modal.html
index 78b731c1..9213be69 100644
--- a/templates/partials/specifications_modal.html
+++ b/templates/partials/specifications_modal.html
@@ -1,15 +1,22 @@
 <!-- Specification Modal -->
 {% load i18n %}
-<div class="modal fade" id="specificationsModal" tabindex="-1" aria-labelledby="specificationsModalLabel" aria-hidden="true">
+<div class="modal fade"
+     id="specificationsModal"
+     tabindex="-1"
+     aria-labelledby="specificationsModalLabel"
+     aria-hidden="true">
     <div class="modal-dialog modal-lg modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="specificationsModalLabel">{{ _("Specifications") }}</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ _("Close") }}"></button>
+                <button type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="{{ _("Close") }}"></button>
             </div>
             <div class="modal-body">
                 <div id="specificationsContent">{{ _("No specifications available.") }}</div>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/partials/tables.html b/templates/partials/tables.html
index 3f56f9ad..aebc3a85 100644
--- a/templates/partials/tables.html
+++ b/templates/partials/tables.html
@@ -27,14 +27,26 @@
                             {% block table.tbody.row %}
                                 <tr {{ row.attrs.as_html }}>
                                     {% for column, cell in row.items %}
-                                        <td {{ column.attrs.td.as_html }}>{% if column.localize == None %}{{ cell }}{% else %}{% if column.localize %}{{ cell|localize }}{% else %}{{ cell|unlocalize }}{% endif %}{% endif %}</td>
+                                        <td {{ column.attrs.td.as_html }}>
+                                            {% if column.localize == None %}
+                                                {{ cell }}
+                                            {% else %}
+                                                {% if column.localize %}
+                                                    {{ cell|localize }}
+                                                {% else %}
+                                                    {{ cell|unlocalize }}
+                                                {% endif %}
+                                            {% endif %}
+                                        </td>
                                     {% endfor %}
                                 </tr>
                             {% endblock table.tbody.row %}
                         {% empty %}
                             {% if table.empty_text %}
                                 {% block table.tbody.empty_text %}
-                                    <tr><td colspan="{{ table.columns|length }}">{{ table.empty_text }}</td></tr>
+                                    <tr>
+                                        <td colspan="{{ table.columns|length }}">{{ table.empty_text }}</td>
+                                    </tr>
                                 {% endblock table.tbody.empty_text %}
                             {% endif %}
                         {% endfor %}
@@ -45,7 +57,8 @@
                         <tfoot {{ table.attrs.tfoot.as_html }}>
                             <tr>
                                 {% for column in table.columns %}
-                                    <td {{ column.attrs.tf.as_html }}>{{ column.footer }}</td>
+                                    <td {{ column.attrs.tf.as_html }}>{{ column.footer }}
+                                    </td>
                                 {% endfor %}
                             </tr>
                         </tfoot>
@@ -53,31 +66,36 @@
                 {% endblock table.tfoot %}
             </table>
         {% endblock table %}
-
         <div class="pagination-container">
             {% block pagination %}
                 {% if table.page %}
                     <ul class="pagination justify-content-center">
                         {% if table.page.has_previous %}
-
                             <li class="page-item">
                                 <a class="page-link" href="?page={{ table.page.previous_page_number }}">
-                                    <span class="fas fa-chevron-{% if LANGUAGE_CODE == 'ar' %}right{% else %}left{% endif %}"></span>
+                                    <span class="fas fa-chevron-
+                                                 {% if LANGUAGE_CODE == 'ar' %}
+                                                     right
+                                                 {% else %}
+                                                     left
+                                                 {% endif %}"></span>
                                 </a>
                             </li>
                         {% endif %}
-
                         <li class="page-item active">
                             <span class="page-link">{{ _("Page") }} {{ table.page.number }} {{ _("of") }} {{ table.paginator.num_pages }}</span>
                         </li>
-
                         {% if table.page.has_next %}
                             <li class="page-item">
                                 <a class="page-link" href="?page={{ table.page.next_page_number }}">
-                                    <span class="fas fa-chevron-{% if LANGUAGE_CODE == 'ar' %}left{% else %}right{% endif %}"></span>
+                                    <span class="fas fa-chevron-
+                                                 {% if LANGUAGE_CODE == 'ar' %}
+                                                     left
+                                                 {% else %}
+                                                     right
+                                                 {% endif %}"></span>
                                 </a>
                             </li>
-
                         {% endif %}
                     </ul>
                 {% endif %}
diff --git a/templates/partials/task.html b/templates/partials/task.html
index ce5e8bf5..d09fc5b7 100644
--- a/templates/partials/task.html
+++ b/templates/partials/task.html
@@ -1,20 +1,29 @@
 {% load static i18n humanize %}
-<tr id="task-{{task.pk}}" class="hover-actions-trigger btn-reveal-trigger position-static {% if task.completed %}completed-task{% endif %}">
-  <td class="fs-9 align-middle px-0 py-3">
-    <div class="form-check mb-0 fs-8">
-      <input class="form-check-input" {% if task.completed %}checked{% endif %} type="checkbox" hx-post="{% url 'update_schedule' request.dealer.slug  task.pk %}" hx-trigger="change" hx-swap="outerHTML" hx-target="#task-{{task.pk}}" />
-    </div>
-  </td>
-  <td class="subject order align-middle white-space-nowrap py-2 ps-0"><a class="fw-semibold text-primary" href="">{{task.purpose|capfirst}}</a>
-    <div class="fs-10 d-block">{{task.scheduled_type|capfirst}}</div>
-  </td>
-  <td class="sent align-middle white-space-nowrap text-start fw-thin text-body-tertiary py-2">{{task.notes}}</td>
-  <td class="date align-middle white-space-nowrap text-body py-2">{{task.created_at|naturalday|capfirst}}</td>
-  <td class="date align-middle white-space-nowrap text-body py-2">
-    {% if task.completed %}
-      <span class="badge badge-phoenix fs-10 badge-phoenix-success"><i class="fa-solid fa-check"></i></span>
-    {% else %}
-      <span class="badge badge-phoenix fs-10 badge-phoenix-warning"><i class="fa-solid fa-xmark"></i></span>
-    {% endif %}
-  </td>
-</tr>
\ No newline at end of file
+<tr id="task-{{ task.pk }}"
+    class="hover-actions-trigger btn-reveal-trigger position-static
+           {% if task.completed %}completed-task{% endif %}">
+    <td class="fs-9 align-middle px-0 py-3">
+        <div class="form-check mb-0 fs-8">
+            <input class="form-check-input"
+                   {% if task.completed %}checked{% endif %}
+                   type="checkbox"
+                   hx-post="{% url 'update_schedule' request.dealer.slug  task.pk %}"
+                   hx-trigger="change"
+                   hx-swap="outerHTML"
+                   hx-target="#task-{{ task.pk }}" />
+        </div>
+    </td>
+    <td class="subject order align-middle white-space-nowrap py-2 ps-0">
+        <a class="fw-semibold text-primary" href="">{{ task.purpose|capfirst }}</a>
+        <div class="fs-10 d-block">{{ task.scheduled_type|capfirst }}</div>
+    </td>
+    <td class="sent align-middle white-space-nowrap text-start fw-thin text-body-tertiary py-2">{{ task.notes }}</td>
+    <td class="date align-middle white-space-nowrap text-body py-2">{{ task.created_at|naturalday|capfirst }}</td>
+    <td class="date align-middle white-space-nowrap text-body py-2">
+        {% if task.completed %}
+            <span class="badge badge-phoenix fs-10 badge-phoenix-success"><i class="fa-solid fa-check"></i></span>
+        {% else %}
+            <span class="badge badge-phoenix fs-10 badge-phoenix-warning"><i class="fa-solid fa-xmark"></i></span>
+        {% endif %}
+    </td>
+</tr>
diff --git a/templates/partials/vehicle_dropdowns.html b/templates/partials/vehicle_dropdowns.html
index 229d7076..c80edc1d 100644
--- a/templates/partials/vehicle_dropdowns.html
+++ b/templates/partials/vehicle_dropdowns.html
@@ -1,18 +1,13 @@
-
 {% extends "base.html" %}
-
 {% block content %}
     <div class="container mt-4">
         <h2>{{ title }}</h2>
-
         <form method="post">
             {% csrf_token %}
             {{ form.as_p }}
-
             <hr>
             <h4>Items</h4>
             {{ formset.management_form }}
-
             <div id="formset-container">
                 {% for form in formset %}
                     <div class="item-form row g-3 mb-3 align-items-end">
@@ -51,16 +46,16 @@
                     </div>
                 {% endfor %}
             </div>
-
-            <button type="button" id="add-item" class="btn btn-phoenix-secondary btn-sm mb-3">+ Add Item</button>
-
+            <button type="button"
+                    id="add-item"
+                    class="btn btn-phoenix-secondary btn-sm mb-3">+ Add Item</button>
             <div class="mt-3">
                 <button type="submit" class="btn btn-phoenix-primary">Save</button>
-                <a href="{% url 'purchase_order_list' request.dealer.slug %}" class="btn btn-phoenix-secondary">Cancel</a>
+                <a href="{% url 'purchase_order_list' request.dealer.slug %}"
+                   class="btn btn-phoenix-secondary">Cancel</a>
             </div>
         </form>
     </div>
-
     <script>
         document.addEventListener('DOMContentLoaded', function () {
             const container = document.getElementById('formset-container');
@@ -101,8 +96,7 @@
             });
         });
     </script>
-
-<!-- Empty form template -->
+    <!-- Empty form template -->
     <div class="empty-form d-none">
         <div class="item-form row g-3 mb-3 align-items-end">
             <div class="col-md-2">
@@ -124,12 +118,14 @@
                 <input type="text" name="form-__prefix__-color" class="form-control">
             </div>
             <div class="col-md-2">
-                <input type="number" step="0.01" name="form-__prefix__-expected_cost" class="form-control">
+                <input type="number"
+                       step="0.01"
+                       name="form-__prefix__-expected_cost"
+                       class="form-control">
             </div>
             <div class="col-md-1">
                 <button type="button" class="btn btn-phoenix-danger btn-sm remove-row">Remove</button>
             </div>
         </div>
     </div>
-
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/payment_failed.html b/templates/payment_failed.html
index 1bc286de..104c5f2f 100644
--- a/templates/payment_failed.html
+++ b/templates/payment_failed.html
@@ -1,39 +1,39 @@
 {% extends "base.html" %}
 {% load i18n static %}
-
 {% block content %}
-  <main class="main">
-
-  <!-- Page Title -->
-    <div class="page-title light-background">
-      <div class="container d-lg-flex justify-content-between align-items-center">
-        <h1 class="mb-2 mb-lg-0">{% trans "Payment Failed" %}</h1>
-        <nav class="breadcrumbs">
-          <ol>
-            <li><a href="{% url 'home' %}">{% trans "Home"%}</a></li>
-            <li class="current">{% trans "Failed"%}</li>
-          </ol>
-        </nav>
-      </div>
-    </div><!-- End Page Title -->
-
-  <!-- Failed Section -->
-    <section class="section">
-      <div class="container text-center" data-aos="fade-up">
-        <div class="py-5">
-          <i class="bi bi-x-circle-fill text-danger" style="font-size: 5rem;"></i>
-          <h2 class="mt-4">{% trans "Payment Failed"%}</h2>
-          {% if message %}
-            <p class="lead">{{message}}.</p>
-          {% else %}
-            <p class="lead">{% trans "We couldn't process your payment. Please try again"%}.</p>
-          {% endif %}
-          <a href="{% url 'home' %}" class="btn btn-phoenix-primary mt-3">
-            <i class="bi bi-house-door"></i> {% trans "Back to Home"%}
-          </a>
+    <main class="main">
+        <!-- Page Title -->
+        <div class="page-title light-background">
+            <div class="container d-lg-flex justify-content-between align-items-center">
+                <h1 class="mb-2 mb-lg-0">{% trans "Payment Failed" %}</h1>
+                <nav class="breadcrumbs">
+                    <ol>
+                        <li>
+                            <a href="{% url 'home' %}">{% trans "Home" %}</a>
+                        </li>
+                        <li class="current">{% trans "Failed" %}</li>
+                    </ol>
+                </nav>
+            </div>
         </div>
-      </div>
-    </section><!-- /Failed Section -->
-
-  </main>
-{% endblock content %}
\ No newline at end of file
+        <!-- End Page Title -->
+        <!-- Failed Section -->
+        <section class="section">
+            <div class="container text-center" data-aos="fade-up">
+                <div class="py-5">
+                    <i class="bi bi-x-circle-fill text-danger" style="font-size: 5rem;"></i>
+                    <h2 class="mt-4">{% trans "Payment Failed" %}</h2>
+                    {% if message %}
+                        <p class="lead">{{ message }}.</p>
+                    {% else %}
+                        <p class="lead">{% trans "We couldn't process your payment. Please try again" %}.</p>
+                    {% endif %}
+                    <a href="{% url 'home' %}" class="btn btn-phoenix-primary mt-3">
+                        <i class="bi bi-house-door"></i> {% trans "Back to Home" %}
+                    </a>
+                </div>
+            </div>
+        </section>
+        <!-- /Failed Section -->
+    </main>
+{% endblock content %}
diff --git a/templates/payment_success.html b/templates/payment_success.html
index 76174fa7..b21e9265 100644
--- a/templates/payment_success.html
+++ b/templates/payment_success.html
@@ -1,6 +1,5 @@
 {% extends "base.html" %}
 {% load i18n static %}
-
 {% block content %}
   <main class="main">
 
@@ -32,8 +31,8 @@
             <i class="fas fa-home"></i> {{ _("Back to Home")}}
           </a>
         </div>
-      </div>
-    </section><!-- /Success Section -->
-
-  </main>
-{% endblock content %}
\ No newline at end of file
+    </div>
+</section>
+<!-- /Success Section -->
+</main>
+{% endblock content %}
diff --git a/templates/plans/account_activation.html b/templates/plans/account_activation.html
index 582787af..65db08a5 100644
--- a/templates/plans/account_activation.html
+++ b/templates/plans/account_activation.html
@@ -1,12 +1,15 @@
 {% extends "base.html" %}
 {% load i18n %}
-
-
 {% block body %}
-    <h3>{% if SUCCESSFUL %}{% trans "Activation successful" %}{% else %}{% trans "Activation failed" %}{% endif %}</h3>
-
+    <h3>
+        {% if SUCCESSFUL %}
+            {% trans "Activation successful" %}
+        {% else %}
+            {% trans "Activation failed" %}
+        {% endif %}
+    </h3>
     {% if SUCCESSFUL %}
-{#        {%  include "messages.html" %}#}
+        {#        {%  include "messages.html" %}#}
         {% blocktrans %}
             Your panels will be available again soon.
         {% endblocktrans %}
@@ -14,9 +17,6 @@
         {% blocktrans %}
             Your account cannot by activated because your account exceeds plan limits. Please adjust usage of limits and then try to activate your account again.
         {% endblocktrans %}
-{#        {%  include "messages.html" %}#}
+        {#        {%  include "messages.html" %}#}
     {% endif %}
-
-
-
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/plans/billing_info_create_or_update.html b/templates/plans/billing_info_create_or_update.html
index 6fcb6878..64ae6fe2 100644
--- a/templates/plans/billing_info_create_or_update.html
+++ b/templates/plans/billing_info_create_or_update.html
@@ -1,9 +1,9 @@
 {% extends 'base.html' %}
 {% load i18n crispy_forms_filters %}
-{%block title%} {% trans  'Billing Information'%}{%endblock%}
-
-{% block content %}
-    {% comment %} <div class="row mb-3">
+{% block title %}
+    {% trans  'Billing Information' %}{% endblock %}
+    {% block content %}
+        {% comment %} <div class="row mb-3">
         <div class="col-sm-6">
             <form action="{% url 'billing_info' %}{% if request.GET.next %}?next={{ request.GET.next }}{% endif %}" method="post" class="form">
 
@@ -56,9 +56,5 @@
 
             </div>
         </div>
-
-       </div>
-
-   </div>
-    <!---->
-{% endblock %}
+        <!---->
+    {% endblock %}
diff --git a/templates/plans/billing_info_delete.html b/templates/plans/billing_info_delete.html
index bf26f882..32aaf9a5 100644
--- a/templates/plans/billing_info_delete.html
+++ b/templates/plans/billing_info_delete.html
@@ -1,17 +1,15 @@
 {% extends 'base.html' %}
 {% load i18n %}
-
 {% block content %}
     <div class="row mb-3">
         <div class="col-sm-6">
-            <h3>{{ _("Billing data")}}</h3>
-
+            <h3>{{ _("Billing data") }}</h3>
             <form method="post" action="{% url 'billing_info_delete' %}">
                 {% csrf_token %}
                 {% trans "Are you sure to delete billing info?" %}
                 <p>
-                    <button type="submit" class="btn btn-sm btn-phoenix-danger">{{ _("Confirm")}}</button>
+                    <button type="submit" class="btn btn-sm btn-phoenix-danger">{{ _("Confirm") }}</button>
                 </form>
             </div>
         </div>
-{% endblock %}
+    {% endblock %}
diff --git a/templates/plans/create_order.html b/templates/plans/create_order.html
index 5313116b..829ff417 100644
--- a/templates/plans/create_order.html
+++ b/templates/plans/create_order.html
@@ -1,6 +1,5 @@
 {% extends 'base.html' %}
-{% load i18n crispy_forms_filters%}
-
+{% load i18n crispy_forms_filters %}
 {% block content %}
     <h3>{% trans "Confirm order" %}</h3>
     {% if FREE_ORDER %}
@@ -8,24 +7,21 @@
         {% with object as order %}
             {% include "plans/order_detail_table.html" %}
         {% endwith %}
-
         <div class="alert alert-warning">
             {% blocktrans %}If you downgrade your plan please remember that new lower limits are used immediately after
                 finishing the order.{% endblocktrans %}
         </div>
-
         <form method="post" action="{% url "change_plan" pk=plan.pk %}">
             {% csrf_token %}
-            <input type="submit" class="btn btn-phoenix-primary" value="{% trans "Continue" %}">
+            <input type="submit"
+                   class="btn btn-phoenix-primary"
+                   value="{% trans "Continue" %}">
         </form>
-
     {% else %}
-
         <form method="post">
             {% with object as order %}
                 {% include "plans/order_detail_table.html" %}
             {% endwith %}
-
             <h2>{% trans "Invoice" %}</h2>
             {% url "billing_info" as billing_info_url %}
             {% with billing_info_url|add:"?next="|add:request.get_full_path as billing_info_url %}
@@ -34,14 +30,18 @@
                         {% blocktrans %}
                             Invoice for this order will be issued for:
                         {% endblocktrans %}
-
-                        <br><br><b>
-                            {{ billing_info.name }}<br>
-                            {{ billing_info.street }}<br>
+                        <br>
+                        <br>
+                        <b>
+                            {{ billing_info.name }}
+                            <br>
+                            {{ billing_info.street }}
+                            <br>
                             {{ billing_info.zipcode }}
                             {{ billing_info.city }},
                             {{ billing_info.country }}
-                            <br><br>
+                            <br>
+                            <br>
                             {% trans "VAT ID" %} {{ billing_info.tax_number }}
                         </b>
                     </p>
@@ -62,12 +62,11 @@
                     {% endblock %}
                 {% endif %}
             {% endwith %}
-
-            <input type="submit" class="btn btn-sm btn-phoenix-primary" value="{% trans "Continue" %}">
+            <input type="submit"
+                   class="btn btn-sm btn-phoenix-primary"
+                   value="{% trans "Continue" %}">
             {{ form|crispy }}
             {% csrf_token %}
         </form>
-
     {% endif %}
-
 {% endblock %}
diff --git a/templates/plans/current.html b/templates/plans/current.html
index e9c7067e..6f8d84d7 100644
--- a/templates/plans/current.html
+++ b/templates/plans/current.html
@@ -1,9 +1,8 @@
 {% extends 'base.html' %}
 {% load i18n custom_filters %}
-
 {% block content %}
     <div class="container-fluid px-3 px-md-5 py-4">
-    <!-- Account Details Section -->
+        <!-- Account Details Section -->
         <div class="row mb-4">
             <div class="col-12">
                 <div class="card border-0 shadow-sm">
@@ -18,7 +17,6 @@
                                     <span class="fw-semibold">{{ user.dealer.get_local_name }}</span>
                                 </div>
                             </div>
-
                             <div class="col-md-6 col-lg-3">
                                 <div class="d-flex flex-column bg-light rounded-3 p-3 h-100">
                                     <span class="text-muted small">{% trans "Status" %}</span>
@@ -29,22 +27,19 @@
                                     {% endif %}
                                 </div>
                             </div>
-
                             <div class="col-md-6 col-lg-3">
                                 <div class="d-flex flex-column bg-light rounded-3 p-3 h-100">
                                     <span class="text-muted small">{% trans "Active until" %}</span>
                                     <span class="fw-semibold">{{ userplan.expire }}</span>
                                 </div>
                             </div>
-
                             <div class="col-md-6 col-lg-3">
                                 <div class="d-flex flex-column bg-light rounded-3 p-3 h-100">
                                     <span class="text-muted small">{% trans "Plan" %}</span>
                                     <div class="d-flex align-items-center justify-content-between">
                                         <span class="fw-semibold">{{ userplan.plan }}</span>
-                                        <a href="{% url 'pricing_page' request.dealer.slug %}" class="btn btn-sm btn-phoenix-primary">
-                                            {% trans "Upgrade" %}
-                                        </a>
+                                        <a href="{% url 'pricing_page' request.dealer.slug %}"
+                                           class="btn btn-sm btn-phoenix-primary">{% trans "Upgrade" %}</a>
                                     </div>
                                 </div>
                             </div>
@@ -53,19 +48,16 @@
                 </div>
             </div>
         </div>
-
-    <!-- Plan Details Section -->
+        <!-- Plan Details Section -->
         <div class="row">
             <div class="col-12">
                 <div class="card border-0 shadow-sm">
                     <div class="card-header bg-white border-bottom-0 py-3">
                         <h5 class="mb-0 fw-semibold">{% trans "Plan Details" %}</h5>
                     </div>
-                    <div class="card-body">
-                        {% include "plans/plan_table.html" %}
-                    </div>
+                    <div class="card-body">{% include "plans/plan_table.html" %}</div>
                 </div>
             </div>
         </div>
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/plans/expiration_messages.html b/templates/plans/expiration_messages.html
index cd4206d6..67b258f3 100644
--- a/templates/plans/expiration_messages.html
+++ b/templates/plans/expiration_messages.html
@@ -1,14 +1,11 @@
 {% load i18n %}
-
 {% block expiration_messages %}
     {% if ACCOUNT_EXPIRED %}
-
         <div class="alert alert-phoenix-danger">
             {% blocktrans with url=EXTEND_URL %}Your account has expired.
                 Please <a href="{{ url }}">extend your account</a>.{% endblocktrans %}
         </div>
     {% else %}
-
         {% if ACCOUNT_NOT_ACTIVE %}
             <div class="alert alert-phoenix-danger">
                 {% blocktrans with url=ACTIVATE_URL %}
@@ -17,7 +14,6 @@
                 {% endblocktrans %}
             </div>
         {% endif %}
-
         {% if EXPIRE_IN_DAYS >= 0 and EXPIRE_IN_DAYS <= 14 %}
             <div class="alert alert-phoenix-warning">
                 {% blocktrans with extend_url=EXTEND_URL days_to_expire=EXPIRE_IN_DAYS %}
@@ -26,6 +22,5 @@
                 {% endblocktrans %}
             </div>
         {% endif %}
-
     {% endif %}
 {% endblock %}
diff --git a/templates/plans/extend.html b/templates/plans/extend.html
index e3f92956..bda553d1 100644
--- a/templates/plans/extend.html
+++ b/templates/plans/extend.html
@@ -1,60 +1,57 @@
 {% load i18n %}
-
 {% block seo_title %}user_plan{% endblock %}
-
 {% block extra_js %}
-        <script>
+    <script>
                 $(function(){
                         $('.pricing').click(function(){
                                 $('#pricing_form input#id_plan_pricing').val($(this).attr('pricing_pk'));
                                 $('#pricing_form').submit();
                         });
                 });
-        </script>
+    </script>
 {% endblock %}
-
 {% block content %}
-        <form method="post" action="{% url 'order_plan' %}" id="pricing_form">
-                {% csrf_token %}
-                {{ form.as_p }}
-
-
-                {% if userplan.plan.available %}
+    <form method="post" action="{% url 'order_plan' %}" id="pricing_form">
+        {% csrf_token %}
+        {{ form.as_p }}
+        {% if userplan.plan.available %}
+            <ul>
+                <li>
+                    {% trans "Plan" %}: {{ userplan.plan.name }}
+                    <li>
+                        {% trans "Quotas" %}:
                         <ul>
-                                <li>{% trans "Plan" %}: {{ userplan.plan.name }}
-                                        <li>{% trans "Quotas" %}:
-                                                <ul>
-                                                        {% for quota in quotas %}
-                                                                <li> {{ quota.quota.name }} ({{ quota.quota.description }}) -
-
-                                                                        {% if quota.quota.is_boolean %}
-
-                                                                                {% if quota.value %} {% trans "yes" %} {% else %} {% trans "no" %} {% endif %}
-
-                                                                        {% else %}
-                                                                                {{ quota.value }} {{ quota.quota.unit }}
-                                                                        {% endif %}
-                                                        {% endfor %}
-                                                </ul>
-
-                                                <li>{% trans "Pricing" %}:
-                                                        <ul>
-                                                                {% for pricing in pricings %}
-                                                                        <li>
-                                                                                <a class="pricing" href="#" pricing_pk="{{ pricing.pk }}"> {{ pricing.pricing.name }} ({{ pricing.pricing.period }} {% trans "days" %} ):
-                                                                                        {{ pricing.price}}
-                                                                                </a>
-                                                                {% endfor %}
-                                                        </ul>
-                                                </li>
-                                        </ul>
-                {% else %}
-
-                        {% url 'upgrade_plan' as upgrade_url %}
-                        {% blocktrans  %}
+                            {% for quota in quotas %}
+                                <li>
+                                    {{ quota.quota.name }} ({{ quota.quota.description }}) -
+                                    {% if quota.quota.is_boolean %}
+                                        {% if quota.value %}
+                                            {% trans "yes" %}
+                                        {% else %}
+                                            {% trans "no" %}
+                                        {% endif %}
+                                    {% else %}
+                                        {{ quota.value }} {{ quota.quota.unit }}
+                                    {% endif %}
+                                {% endfor %}
+                            </ul>
+                            <li>
+                                {% trans "Pricing" %}:
+                                <ul>
+                                    {% for pricing in pricings %}
+                                        <li>
+                                            <a class="pricing" href="#" pricing_pk="{{ pricing.pk }}"> {{ pricing.pricing.name }} ({{ pricing.pricing.period }} {% trans "days" %} ):
+                                                {{ pricing.price }}
+                                            </a>
+                                        {% endfor %}
+                                    </ul>
+                                </li>
+                            </ul>
+                        {% else %}
+                            {% url 'upgrade_plan' as upgrade_url %}
+                            {% blocktrans  %}
                                 Unfortunately your current plan is not available any more. You need to <a href="{{ upgrade_url }}">upgrade your plan</a>.
                         {% endblocktrans %}
-
-                {% endif %}
-        </form>
-{% endblock %}
+                        {% endif %}
+                    </form>
+                {% endblock %}
diff --git a/templates/plans/fake_payments.html b/templates/plans/fake_payments.html
index b7f472e2..888d7a34 100644
--- a/templates/plans/fake_payments.html
+++ b/templates/plans/fake_payments.html
@@ -1,17 +1,13 @@
 {% extends "base.html" %}
 {% load i18n %}
-
-
 {% block body %}
-
     <h1>FakePayments™</h1>
-    <p> Please select desired status after performing payment for an <strong>{{ object }}</strong>. </p>
+    <p>
+        Please select desired status after performing payment for an <strong>{{ object }}</strong>.
+    </p>
     <form method="POST">
         {% csrf_token %}
         {{ form.as_p }}
-        <button type="submit" class="btn btn-phoenix-primary">
-            Pay now
-        </button>
+        <button type="submit" class="btn btn-phoenix-primary">Pay now</button>
     </form>
-
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/plans/invoices/PL_EN.html b/templates/plans/invoices/PL_EN.html
index 01f677ef..b0e2d15d 100644
--- a/templates/plans/invoices/PL_EN.html
+++ b/templates/plans/invoices/PL_EN.html
@@ -2,4 +2,4 @@
 {% block title %}{{ invoice.full_number }}{% endblock %}
 {% block body %}
     {% include 'plans/invoices/layout.html' %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/plans/invoices/invoice_base.html b/templates/plans/invoices/invoice_base.html
index 47f240ae..2e8c25cc 100644
--- a/templates/plans/invoices/invoice_base.html
+++ b/templates/plans/invoices/invoice_base.html
@@ -1,8 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>{% block title %}{% endblock %}</title>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+        <title>
+            {% block title %}{% endblock %}
+        </title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <style type="text/css">
             html, body{
                 font-size: 12px;
@@ -73,11 +75,11 @@
             }
 
         </style>
-
         {% block head %}{% endblock %}
-
     </head>
-    <body style="width: 960px; margin: 0 auto;" {% if auto_print %}onload="window.print();"{% endif %}>
+    <body style="width: 960px;
+                 margin: 0 auto"
+          {% if auto_print %}onload="window.print();"{% endif %}>
         {% block body %}{% endblock %}
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/plans/invoices/layout.html b/templates/plans/invoices/layout.html
index 6d4b4d52..6bd5e636 100644
--- a/templates/plans/invoices/layout.html
+++ b/templates/plans/invoices/layout.html
@@ -1,202 +1,268 @@
 <div class="container my-5">
-  <!-- Header Section (unchanged) -->
-  <div class="d-flex justify-content-between align-items-start mb-5">
-    {% if logo_url %}
-      <img src="{{ logo_url }}" alt="Company Logo" class="img-fluid" style="max-height: 80px; max-width: 200px;">
+    <!-- Header Section (unchanged) -->
+    <div class="d-flex justify-content-between align-items-start mb-5">
+        {% if logo_url %}
+            <img src="{{ logo_url }}"
+                 alt="Company Logo"
+                 class="img-fluid"
+                 style="max-height: 80px;
+                        max-width: 200px">
+        {% endif %}
+        <div class="text-end">
+            <div class="d-inline-block p-3 rounded-3">
+                <h1 class="h4 mb-1">
+                    <span class="text-muted small">
+                        {% if invoice.type == invoice.INVOICE_TYPES.INVOICE %}{{ _("Invoice") }}{% endif %}
+                        {% if invoice.type == invoice.INVOICE_TYPES.PROFORMA %}{{ _("Order Confirmation") }}{% endif %}
+                        {% if invoice.type == invoice.INVOICE_TYPES.DUPLICATE %}{{ _("Invoice (Duplicate)") }}{% endif %}
+                    </span>
+                    <div id="full_number" class="fw-bold fs-3">{{ invoice.full_number }}</div>
+                </h1>
+                <div class="badge bg-
+                            {% if copy %}
+                                warning
+                            {% else %}
+                                primary
+                            {% endif %}
+                            bg-opacity-10 text-
+                            {% if copy %}
+                                warning
+                            {% else %}
+                                primary
+                            {% endif %}
+                            mb-2">
+                    {% if copy %}
+                        {{ _("COPY") }}
+                    {% else %}
+                        {{ _("ORIGINAL") }}
+                    {% endif %}
+                </div>
+                <div class="d-flex flex-column text-start">
+                    <div class="mb-1">
+                        <span class="text-muted">{{ _("Issued") }}:</span> <strong>{{ invoice.issued|date:"F j, Y" }}</strong>
+                    </div>
+                    {% if invoice.type != invoice.INVOICE_TYPES.PROFORMA %}
+                        <div>
+                            <span class="text-muted">{{ _("Order Date") }}:</span> <strong>{{ invoice.selling_date|date:"F j, Y" }}</strong>
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Company Information (unchanged) -->
+    <div class="row mb-5 g-4">
+        <div class="col-md-6">
+            <div class="card border-0 shadow-sm h-100">
+                <div class="card-header">
+                    <h5 class="mb-0 fw-semibold">{{ _("Seller") }}</h5>
+                </div>
+                <div class="card-body">
+                    <address class="mb-0">
+                        <strong>{{ invoice.issuer_name }}</strong>
+                        <br>
+                        {{ invoice.issuer_street }}
+                        <br>
+                        {{ invoice.issuer_zipcode }} {{ invoice.issuer_city }}
+                        <br>
+                        {{ invoice.issuer_country.name }}
+                        <br>
+                        <span class="text-muted">{{ _("VAT ID") }}:</span> {{ invoice.issuer_tax_number }}
+                    </address>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="card border-0 shadow-sm h-100">
+                <div class="card-header">
+                    <h5 class="mb-0 fw-semibold">{{ _("Buyer") }}</h5>
+                </div>
+                <div class="card-body">
+                    <address class="mb-0">
+                        <strong>{{ invoice.buyer_name }}</strong>
+                        <br>
+                        {{ invoice.buyer_street }}
+                        <br>
+                        {{ invoice.buyer_zipcode }} {{ invoice.buyer_city }}
+                        <br>
+                        {{ invoice.buyer_country.name }}
+                        <br>
+                        {% if invoice.buyer_tax_number %}
+                            <span class="text-muted">{{ _("VAT ID") }}:</span> {{ invoice.buyer_tax_number }}
+                        {% endif %}
+                    </address>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Shipping Address (unchanged) -->
+    {% if invoice.shipping_name %}
+        <div class="card border-0 shadow-sm mb-5">
+            <div class="card-header">
+                <h5 class="mb-0 fw-semibold">{{ _("Shipping Address") }}</h5>
+            </div>
+            <div class="card-body">
+                <address class="mb-0">
+                    <strong>{{ invoice.shipping_name }}</strong>
+                    <br>
+                    {{ invoice.shipping_street }}
+                    <br>
+                    {{ invoice.shipping_zipcode }} {{ invoice.shipping_city }}
+                    <br>
+                    {{ invoice.buyer_country.name }}
+                </address>
+            </div>
+        </div>
     {% endif %}
-    <div class="text-end">
-      <div class="d-inline-block p-3 rounded-3">
-        <h1 class="h4 mb-1">
-          <span class="text-muted small">
-            {% if invoice.type == invoice.INVOICE_TYPES.INVOICE %}{{ _("Invoice") }}{% endif %}
-            {% if invoice.type == invoice.INVOICE_TYPES.PROFORMA %}{{ _("Order Confirmation")}}{% endif %}
-            {% if invoice.type == invoice.INVOICE_TYPES.DUPLICATE %}{{ _("Invoice (Duplicate)")}}{% endif %}
-          </span>
-          <div id="full_number" class="fw-bold fs-3">{{ invoice.full_number }}</div>
-        </h1>
-        <div class="badge bg-{% if copy %}warning{% else %}primary{% endif %} bg-opacity-10 text-{% if copy %}warning{% else %}primary{% endif %} mb-2">
-          {% if copy %}
-            {{ _("COPY") }}
-          {% else %}
-            {{ _("ORIGINAL") }}
-          {% endif %}
-        </div>
-        <div class="d-flex flex-column text-start">
-          <div class="mb-1"><span class="text-muted">{{ _("Issued") }}:</span> <strong>{{ invoice.issued|date:"F j, Y" }}</strong></div>
-          {% if invoice.type != invoice.INVOICE_TYPES.PROFORMA %}
-            <div><span class="text-muted">{{ _("Order Date")}}:</span> <strong>{{ invoice.selling_date|date:"F j, Y" }}</strong></div>
-          {% endif %}
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Company Information (unchanged) -->
-  <div class="row mb-5 g-4">
-    <div class="col-md-6">
-      <div class="card border-0 shadow-sm h-100">
-        <div class="card-header">
-          <h5 class="mb-0 fw-semibold">{{ _("Seller") }}</h5>
-        </div>
-        <div class="card-body">
-          <address class="mb-0">
-            <strong>{{ invoice.issuer_name }}</strong><br>
-            {{ invoice.issuer_street }}<br>
-            {{ invoice.issuer_zipcode }} {{ invoice.issuer_city }}<br>
-            {{ invoice.issuer_country.name }}<br>
-            <span class="text-muted">{{ _("VAT ID")}}:</span> {{ invoice.issuer_tax_number }}
-          </address>
-        </div>
-      </div>
-    </div>
-
-    <div class="col-md-6">
-      <div class="card border-0 shadow-sm h-100">
-        <div class="card-header">
-          <h5 class="mb-0 fw-semibold">{{ _("Buyer") }}</h5>
-        </div>
-        <div class="card-body">
-          <address class="mb-0">
-            <strong>{{ invoice.buyer_name }}</strong><br>
-            {{ invoice.buyer_street }}<br>
-            {{ invoice.buyer_zipcode }} {{ invoice.buyer_city }}<br>
-            {{ invoice.buyer_country.name }}<br>
-            {% if invoice.buyer_tax_number %}
-              <span class="text-muted">{{ _("VAT ID")}}:</span> {{ invoice.buyer_tax_number }}
-            {% endif %}
-          </address>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Shipping Address (unchanged) -->
-  {% if invoice.shipping_name %}
+    <!-- Items Table - Now with horizontal scrolling -->
     <div class="card border-0 shadow-sm mb-5">
-      <div class="card-header">
-        <h5 class="mb-0 fw-semibold">{{ _("Shipping Address")}}</h5>
-      </div>
-      <div class="card-body">
-        <address class="mb-0">
-          <strong>{{ invoice.shipping_name }}</strong><br>
-          {{ invoice.shipping_street }}<br>
-          {{ invoice.shipping_zipcode }} {{ invoice.shipping_city }}<br>
-          {{ invoice.buyer_country.name }}
-        </address>
-      </div>
-    </div>
-  {% endif %}
-
-  <!-- Items Table - Now with horizontal scrolling -->
-  <div class="card border-0 shadow-sm mb-5">
-    <div class="card-header">
-      <h5 class="mb-0 fw-semibold">{{ _("Invoice Items")}}</h5>
-    </div>
-    <div class="card-body p-0">
-      <div class="table-responsive" style="overflow-x: auto;">
-        <div style="min-width: 800px;"> <!-- Minimum width to ensure scrolling on smaller screens -->
-          <table class="table align-items-center table-flush table-hover">
-            <thead class="">
-              <tr class="bg-body-highlight">
-                <th class="text-center sticky-col" style="width: 5%; z-index: 1;">#</th>
-                <th style="width: 25%; min-width: 200px;">{{ _("Description") }}</th>
-                <th class="text-end" style="width: 10%; min-width: 100px;">{{ _("Unit Price")}}</th>
-                <th class="text-center" style="width: 8%; min-width: 80px;">{{ _("Quantity") }}</th>
-                <th class="text-center" style="width: 8%; min-width: 80px;">{{ _("Unit") }}</th>
-                {% if invoice.rebate %}
-                  <th class="text-center" style="width: 8%; min-width: 80px;">{{ _("Rebate") }}</th>
-                {% endif %}
-                <th class="text-end" style="width: 10%; min-width: 100px;">{{ _("Subtotal") }}</th>
-                <th class="text-center" style="width: 8%; min-width: 80px;">{{ _("VAT") }}</th>
-                <th class="text-end" style="width: 10%; min-width: 100px;">{{ _("VAT Amount")}}</th>
-                <th class="text-center" style="width: 10%; min-width: 100px;">{{ _("Total") }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td class="text-center sticky-col" style=" z-index: 1;">1</td>
-                <td>{{ invoice.item_description }}</td>
-                <td class="text-end">{{ invoice.unit_price_net|floatformat:2 }} <span class="icon-saudi_riyal"></span></td>
-                <td class="text-center">{{ invoice.quantity }}</td>
-                <td class="text-center">{{ _("units") }}</td>
-                {% if invoice.rebate %}
-                  <td class="text-center">{{ invoice.rebate|floatformat:2 }}%</td>
-                {% endif %}
-                <td class="text-end">{{ invoice.total_net|floatformat:2 }} <span class="icon-saudi_riyal"></span></td>
-                <td class="text-center">{% if invoice.tax != None %}{{ invoice.tax|floatformat }}%{% else %}n/a{% endif %}</td>
-                <td class="text-end">{% if invoice.tax_total != None %}{{ invoice.tax_total|floatformat:2 }} <span class="icon-saudi_riyal"></span>{% else %}{{ _("n/a")}}{% endif %}</td>
-                <td class="text-center fw-bold">{{ invoice.total|floatformat:2 }} <span class="icon-saudi_riyal"></span></td>
-              </tr>
-            </tbody>
-            <tfoot class="">
-              <tr>
-                <td colspan="{% if invoice.rebate %}6{% else %}5{% endif %}" class="text-end fw-bold sticky-col" style="left: 0; z-index: 1;">{{ _("Total") }}</td>
-                <td class="text-end fw-bold">{{ invoice.total_net|floatformat:2 }} <span class="icon-saudi_riyal"></span></td>
-                <td class="text-center fw-bold">{% if invoice.tax != None %}{{ invoice.tax|floatformat }}%{% else %}{{ _("n/a")}}{% endif %}</td>
-                <td class="text-end fw-bold">{% if invoice.tax_total != None %}{{ invoice.tax_total|floatformat:2 }} <span class="icon-saudi_riyal"></span>{% else %}{{ _("n/a")}}{% endif %}</td>
-                <td class="text-center fw-bold text-primary">{{ invoice.total|floatformat:2 }} <span class="icon-saudi_riyal"></span></td>
-              </tr>
-            </tfoot>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Payment Information (unchanged) -->
-  <div class="row">
-    <div class="col-md-6">
-      <div class="card border-0 shadow-sm">
         <div class="card-header">
-          <h5 class="mb-0 fw-semibold">{{ _("Payment Information")}}</h5>
+            <h5 class="mb-0 fw-semibold">{{ _("Invoice Items") }}</h5>
         </div>
-        <div class="card-body">
-          {% if invoice.type != invoice.INVOICE_TYPES.PROFORMA %}
-            <div class="mb-2">
-              <span class="text-muted">{{ _("Method") }}:</span>
-              <strong>{{ _("Electronic Payment")}}</strong>
+        <div class="card-body p-0">
+            <div class="table-responsive" style="overflow-x: auto;">
+                <div style="min-width: 800px;">
+                    <!-- Minimum width to ensure scrolling on smaller screens -->
+                    <table class="table align-items-center table-flush table-hover">
+                        <thead class="">
+                            <tr class="bg-body-highlight">
+                                <th class="text-center sticky-col" style="width: 5%; z-index: 1;">#</th>
+                                <th style="width: 25%; min-width: 200px;">{{ _("Description") }}</th>
+                                <th class="text-end" style="width: 10%; min-width: 100px;">{{ _("Unit Price") }}</th>
+                                <th class="text-center" style="width: 8%; min-width: 80px;">{{ _("Quantity") }}</th>
+                                <th class="text-center" style="width: 8%; min-width: 80px;">{{ _("Unit") }}</th>
+                                {% if invoice.rebate %}
+                                    <th class="text-center" style="width: 8%; min-width: 80px;">{{ _("Rebate") }}</th>
+                                {% endif %}
+                                <th class="text-end" style="width: 10%; min-width: 100px;">{{ _("Subtotal") }}</th>
+                                <th class="text-center" style="width: 8%; min-width: 80px;">{{ _("VAT") }}</th>
+                                <th class="text-end" style="width: 10%; min-width: 100px;">{{ _("VAT Amount") }}</th>
+                                <th class="text-center" style="width: 10%; min-width: 100px;">{{ _("Total") }}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="text-center sticky-col" style=" z-index: 1;">1</td>
+                                <td>{{ invoice.item_description }}</td>
+                                <td class="text-end">
+                                    {{ invoice.unit_price_net|floatformat:2 }} <span class="icon-saudi_riyal"></span>
+                                </td>
+                                <td class="text-center">{{ invoice.quantity }}</td>
+                                <td class="text-center">{{ _("units") }}</td>
+                                {% if invoice.rebate %}
+                                    <td class="text-center">{{ invoice.rebate|floatformat:2 }}%</td>
+                                {% endif %}
+                                <td class="text-end">
+                                    {{ invoice.total_net|floatformat:2 }} <span class="icon-saudi_riyal"></span>
+                                </td>
+                                <td class="text-center">
+                                    {% if invoice.tax != None %}
+                                        {{ invoice.tax|floatformat }}%
+                                    {% else %}
+                                        n/a
+                                    {% endif %}
+                                </td>
+                                <td class="text-end">
+                                    {% if invoice.tax_total != None %}
+                                        {{ invoice.tax_total|floatformat:2 }} <span class="icon-saudi_riyal"></span>
+                                    {% else %}
+                                        {{ _("n/a") }}
+                                    {% endif %}
+                                </td>
+                                <td class="text-center fw-bold">
+                                    {{ invoice.total|floatformat:2 }} <span class="icon-saudi_riyal"></span>
+                                </td>
+                            </tr>
+                        </tbody>
+                        <tfoot class="">
+                            <tr>
+                                <td colspan="{% if invoice.rebate %}
+                                                 6
+                                             {% else %}
+                                                 5
+                                             {% endif %}"
+                                    class="text-end fw-bold sticky-col"
+                                    style="left: 0;
+                                           z-index: 1">{{ _("Total") }}</td>
+                                <td class="text-end fw-bold">
+                                    {{ invoice.total_net|floatformat:2 }} <span class="icon-saudi_riyal"></span>
+                                </td>
+                                <td class="text-center fw-bold">
+                                    {% if invoice.tax != None %}
+                                        {{ invoice.tax|floatformat }}%
+                                    {% else %}
+                                        {{ _("n/a") }}
+                                    {% endif %}
+                                </td>
+                                <td class="text-end fw-bold">
+                                    {% if invoice.tax_total != None %}
+                                        {{ invoice.tax_total|floatformat:2 }} <span class="icon-saudi_riyal"></span>
+                                    {% else %}
+                                        {{ _("n/a") }}
+                                    {% endif %}
+                                </td>
+                                <td class="text-center fw-bold text-primary">
+                                    {{ invoice.total|floatformat:2 }} <span class="icon-saudi_riyal"></span>
+                                </td>
+                            </tr>
+                        </tfoot>
+                    </table>
+                </div>
             </div>
-          {% endif %}
-          <div class="mb-2">
-            <span class="text-muted">{{ _("Due Date")}}:</span>
-            <strong>{{ invoice.payment_date|date:"F j, Y" }}</strong>
-          </div>
-          {% if invoice.type != invoice.INVOICE_TYPES.PROFORMA %}
-            <div class="alert alert-success p-2 mb-0">
-              <i class="fas fa-check-circle me-2"></i> {{ _("Payment Received")}}
-            </div>
-          {% endif %}
         </div>
-      </div>
     </div>
-    <div class="col-md-6">
-      <div class="card border-0 shadow-sm h-100">
-        <div class="card-header">
-          <h5 class="mb-0 fw-semibold">{{ _("Notes") }}</h5>
-        </div>
-        <div class="card-body">
-          {% if invoice.type == invoice.INVOICE_TYPES.PROFORMA %}
-            <div class="alert alert-warning p-2 mb-2">
-              <i class="fas fa-exclamation-triangle me-2"></i> {{ _("This document is not an invoice")}}
+    <!-- Payment Information (unchanged) -->
+    <div class="row">
+        <div class="col-md-6">
+            <div class="card border-0 shadow-sm">
+                <div class="card-header">
+                    <h5 class="mb-0 fw-semibold">{{ _("Payment Information") }}</h5>
+                </div>
+                <div class="card-body">
+                    {% if invoice.type != invoice.INVOICE_TYPES.PROFORMA %}
+                        <div class="mb-2">
+                            <span class="text-muted">{{ _("Method") }}:</span>
+                            <strong>{{ _("Electronic Payment") }}</strong>
+                        </div>
+                    {% endif %}
+                    <div class="mb-2">
+                        <span class="text-muted">{{ _("Due Date") }}:</span>
+                        <strong>{{ invoice.payment_date|date:"F j, Y" }}</strong>
+                    </div>
+                    {% if invoice.type != invoice.INVOICE_TYPES.PROFORMA %}
+                        <div class="alert alert-success p-2 mb-0">
+                            <i class="fas fa-check-circle me-2"></i> {{ _("Payment Received") }}
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="card border-0 shadow-sm h-100">
+                <div class="card-header">
+                    <h5 class="mb-0 fw-semibold">{{ _("Notes") }}</h5>
+                </div>
+                <div class="card-body">
+                    {% if invoice.type == invoice.INVOICE_TYPES.PROFORMA %}
+                        <div class="alert alert-warning p-2 mb-2">
+                            <i class="fas fa-exclamation-triangle me-2"></i> {{ _("This document is not an invoice") }}
+                        </div>
+                    {% endif %}
+                    {% if invoice.tax == None and invoice.is_UE_customer %}
+                        <div class="alert alert-info p-2 mb-0">
+                            <i class="fas fa-info-circle me-2"></i> {{ _("Reverse charge applied") }}
+                        </div>
+                    {% endif %}
+                </div>
             </div>
-          {% endif %}
-          {% if invoice.tax == None and invoice.is_UE_customer %}
-            <div class="alert alert-info p-2 mb-0">
-              <i class="fas fa-info-circle me-2"></i> {{ _("Reverse charge applied")}}
-            </div>
-          {% endif %}
         </div>
-      </div>
     </div>
-  </div>
-
-  <!-- Footer (unchanged) -->
-  <div class="mt-5 pt-4 border-top text-center text-muted small">
-    <p class="mb-1">{{ _("Thank you for your business")}}!</p>
-    <p class="mb-0">{{ _("If you have any questions about this invoice, please contact us")}}.</p>
-  </div>
+    <!-- Footer (unchanged) -->
+    <div class="mt-5 pt-4 border-top text-center text-muted small">
+        <p class="mb-1">{{ _("Thank you for your business") }}!</p>
+        <p class="mb-0">{{ _("If you have any questions about this invoice, please contact us") }}.</p>
+    </div>
 </div>
-
 <style>
   .sticky-col {
     position: sticky;
@@ -205,4 +271,4 @@
   .table-responsive {
     -webkit-overflow-scrolling: touch;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/templates/plans/order_detail.html b/templates/plans/order_detail.html
index 1f3c9caf..84e1af01 100644
--- a/templates/plans/order_detail.html
+++ b/templates/plans/order_detail.html
@@ -1,94 +1,78 @@
 {% extends "base.html" %}
 {% load i18n %}
-{%block title%}{%trans 'Order Details'%} {%endblock%}
-
-{% block head %}
-    <script>
+{% block title %}
+    {% trans 'Order Details' %} {% endblock %}
+    {% block head %}
+        <script>
         $(function () {
             $('a.invoice').click(function () {
                 event.preventDefault();
                 window.open($(this).attr('href'), 'plans_invoice_{{ invoice.id }}', 'width=860,resizable=1,location=0,status=0,titlebar=1');
             });
         });
-    </script>
-{% endblock %}
-
-
-{% block body %}
-    <h1 class="mt-4">{% blocktrans with object.id as order_id and object.get_status_display as order_status %}Order #{{ order_id }}
-        (status: {{ order_status }}){% endblocktrans %}</h1>
-
-    {# You should provide displaying django messages in this template #}
-
-    {% with object as order %}
-        {% include "plans/order_detail_table.html" %}
-    {% endwith %}
-
-    {% if object.get_all_invoices.count %}
-        <h2 class="mt-3">{% trans "Printable documents" %}</h2>
-        <ul id="order_printable_documents">
-            {% for invoice in object.get_all_invoices %}
-                <li><a href="{{ invoice.get_absolute_url }}"
-                       class="invoice">{{ invoice.get_type_display }} {{ invoice }}</a>
-
-            {% endfor %}
-        </ul>
-    {% endif %}
-
-
-
-    <h2 class="mt-3">{% trans "Payment" %}</h2>
-    {% if object.completed %}
-
-        <p class="alert alert-phoenix-success mt-2">
-            {% blocktrans with  object.completed as completed %}
+        </script>
+    {% endblock %}
+    {% block body %}
+        <h1 class="mt-4">
+            {% blocktrans with object.id as order_id and object.get_status_display as order_status %}Order #{{ order_id }}
+        (status: {{ order_status }}){% endblocktrans %}
+        </h1>
+        {# You should provide displaying django messages in this template #}
+        {% with object as order %}
+            {% include "plans/order_detail_table.html" %}
+        {% endwith %}
+        {% if object.get_all_invoices.count %}
+            <h2 class="mt-3">{% trans "Printable documents" %}</h2>
+            <ul id="order_printable_documents">
+                {% for invoice in object.get_all_invoices %}
+                    <li>
+                        <a href="{{ invoice.get_absolute_url }}" class="invoice">{{ invoice.get_type_display }} {{ invoice }}</a>
+                    {% endfor %}
+                </ul>
+            {% endif %}
+            <h2 class="mt-3">{% trans "Payment" %}</h2>
+            {% if object.completed %}
+                <p class="alert alert-phoenix-success mt-2">
+                    {% blocktrans with  object.completed as completed %}
                 Payment completed on: {{ completed }}
             {% endblocktrans %}
-        </p>
-    {% else %}
-
-        {% if object.is_ready_for_payment %}
-            {% block payment_method %}
-
-                <p class="mt-2">
-                    Here should go bindings to your payment. We recommend using <a
-                        href="https://github.com/cypreess/django-getpaid">django-getpaid</a> for payment processing.
-                    Use a fake payment below to simulate paying for an order:
                 </p>
-
-                <a class="btn btn-phoenix-success" role="button" href="{% url "fake_payments" pk=object.id %}">Pay using
-                    FakePayments™ ;)</a>
-
-                {#  An example code snippet for accepting payments using django-getpaid #}
-
-                {#            <form action="{% url "getpaid-new-payment" currency=object.currency %}" method="post"#}
-                {#                  class="standard_form payment_form">#}
-                {#                {% csrf_token %}#}
-                {#                <ul>{{ payment_form.as_ul }}</ul>#}
-                {#                <p><label>&nbsp;</label><input type="submit" value="{% trans "Pay the order" %}" class="submit_button">#}
-                {#                </p>#}
-                {#            </form>#}
-
-            {% endblock %}
-        {% else %}
-
-            <p class="alert alert-phoenix-warning mt-2">
-                {% blocktrans %}
+            {% else %}
+                {% if object.is_ready_for_payment %}
+                    {% block payment_method %}
+                        <p class="mt-2">
+                            Here should go bindings to your payment. We recommend using <a href="https://github.com/cypreess/django-getpaid">django-getpaid</a> for payment processing.
+                            Use a fake payment below to simulate paying for an order:
+                        </p>
+                        <a class="btn btn-phoenix-success"
+                           role="button"
+                           href="{% url "fake_payments" pk=object.id %}">Pay using
+                        FakePayments™ ;)</a>
+                        {#  An example code snippet for accepting payments using django-getpaid #}
+                        {#            <form action="{% url "getpaid-new-payment" currency=object.currency %}" method="post"#}
+                        {#                  class="standard_form payment_form">#}
+                        {#                {% csrf_token %}#}
+                        {#                <ul>{{ payment_form.as_ul }}</ul>#}
+                        {#                <p><label>&nbsp;</label><input type="submit"
+       value="{% trans "Pay the order" %}"
+       class="submit_button">#}
+                        {#                </p>#}
+                        {#            </form>#}
+                    {% endblock %}
+                {% else %}
+                    <p class="alert alert-phoenix-warning mt-2">
+                        {% blocktrans %}
                     This order is expired. It will accept an incoming payment made earlier, but new payment cannot be
                     initialized. Please make a new order if necessary.
                 {% endblocktrans %}
-            </p>
-
-        {% endif %}
-
-    {% endif %}
-
-    {% if object.status == object.STATUS.NOT_VALID %}
-        <p class="alert alert-phoenix-danger">
-            {% blocktrans %}
+                    </p>
+                {% endif %}
+            {% endif %}
+            {% if object.status == object.STATUS.NOT_VALID %}
+                <p class="alert alert-phoenix-danger">
+                    {% blocktrans %}
                 This order could not be processed as it is not valid. Please contact with customer service.
             {% endblocktrans %}
-        </p>
-    {% endif %}
-
-{% endblock %}
\ No newline at end of file
+                </p>
+            {% endif %}
+        {% endblock %}
diff --git a/templates/plans/order_detail_table.html b/templates/plans/order_detail_table.html
index 0592d5ad..e93b6ff5 100644
--- a/templates/plans/order_detail_table.html
+++ b/templates/plans/order_detail_table.html
@@ -1,40 +1,53 @@
 {% load i18n %}
-
 {% block table %}
-  <div class="table-responsive px-1 scrollbar mt-3">
-    <table class="table align-items-center table-flush table-hover">
-      <thead>
-        <tr class="bg-body-highlight">
-          <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Name" %}</th>
-          <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Net price" %}</th>
-          <th class="sort white-space-nowrap align-middle" scope="col">{% trans "VAT" %}</th>
-          <th class="sort white-space-nowrap align-middle" scope="col">{% trans "VAT total" %}</th>
-          <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Total" %}</th>
-          <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Order completed" %}</th>
-          {% if order.user %}
-            <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Plan valid from" %}</th>
-            <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Plan valid until" %}</th>
-          {% endif %}
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td class="align-middle product white-space-nowrap">{{ order.name }}</td>
-          <td class="align-middle product white-space-nowrap">{{ order.amount }} <span class="icon-saudi_riyal"></span></td>
-          <td class="align-middle product white-space-nowrap">{% if order.tax == None %}n/a{% else %}{{ order.tax }} %{% endif %}</td>
-          <td class="align-middle product white-space-nowrap">{% if order.tax_total == None %}n/a{% else %}{{ order.tax_total }} <span class="icon-saudi_riyal"></span>{% endif %}</td>
-          <td class="number total align-middle product white-space-nowrap">{{ order.total }} <span class="icon-saudi_riyal"></span></td>
-          <td class="date align-middle product white-space-nowrap">{{ order.completed|date|default:"-" }}</td>
-          <td class="date align-middle product white-space-nowrap">{{ order.get_plan_extended_from|date|default:"-" }}</td>
-          <td class="date align-middle product white-space-nowrap">{{ order.get_plan_extended_until|date|default:"-" }}</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+    <div class="table-responsive px-1 scrollbar mt-3">
+        <table class="table align-items-center table-flush table-hover">
+            <thead>
+                <tr class="bg-body-highlight">
+                    <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Name" %}</th>
+                    <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Net price" %}</th>
+                    <th class="sort white-space-nowrap align-middle" scope="col">{% trans "VAT" %}</th>
+                    <th class="sort white-space-nowrap align-middle" scope="col">{% trans "VAT total" %}</th>
+                    <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Total" %}</th>
+                    <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Order completed" %}</th>
+                    {% if order.user %}
+                        <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Plan valid from" %}</th>
+                        <th class="sort white-space-nowrap align-middle" scope="col">{% trans "Plan valid until" %}</th>
+                    {% endif %}
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="align-middle product white-space-nowrap">{{ order.name }}</td>
+                    <td class="align-middle product white-space-nowrap">
+                        {{ order.amount }} <span class="icon-saudi_riyal"></span>
+                    </td>
+                    <td class="align-middle product white-space-nowrap">
+                        {% if order.tax == None %}
+                            n/a
+                        {% else %}
+                            {{ order.tax }} %
+                        {% endif %}
+                    </td>
+                    <td class="align-middle product white-space-nowrap">
+                        {% if order.tax_total == None %}
+                            n/a
+                        {% else %}
+                            {{ order.tax_total }} <span class="icon-saudi_riyal"></span>
+                        {% endif %}
+                    </td>
+                    <td class="number total align-middle product white-space-nowrap">
+                        {{ order.total }} <span class="icon-saudi_riyal"></span>
+                    </td>
+                    <td class="date align-middle product white-space-nowrap">{{ order.completed|date|default:"-" }}</td>
+                    <td class="date align-middle product white-space-nowrap">{{ order.get_plan_extended_from|date|default:"-" }}</td>
+                    <td class="date align-middle product white-space-nowrap">{{ order.get_plan_extended_until|date|default:"-" }}</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
 {% endblock %}
 {% if order.tax == None %}
-  <h2>{% trans "EU VAT" %}</h2>
-  <div class="alert alert-phoenix-info">
-    {% blocktrans %} VAT is not applied to order. {% endblocktrans %}
-  </div>
+    <h2>{% trans "EU VAT" %}</h2>
+    <div class="alert alert-phoenix-info">{% blocktrans %} VAT is not applied to order. {% endblocktrans %}</div>
 {% endif %}
diff --git a/templates/plans/order_list.html b/templates/plans/order_list.html
index 6b30b78e..4f6f4132 100644
--- a/templates/plans/order_list.html
+++ b/templates/plans/order_list.html
@@ -1,56 +1,64 @@
 {% extends 'base.html' %}
 {% load i18n %}
-{%block title%}{%trans 'Plans Orders'%} {%endblock%}
-
-{% block body %}
-    {% block order_header %}
-        <h3 class="mt-4"><i class="fa-solid fa-list me-2"></i>{% trans "List of orders" %}</h3>
-    {% endblock %}
-
-    {% if object_list %}
-
-
-        {% block order_table %}
-            <div class="table-responsive px-1 scrollbar mt-3">
-                <table class="table align-items-center table-flush">
-                    <thead>
-                        <tr class="bg-body-highlight">
-                            <th>ID</th>
-                            <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Name' %}</th>
-                            <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Created' context 'order created' %}</th>
-                            <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Status' context 'order status' %}</th>
-                            <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Completed' context 'order completed' %}</th>
-                            <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Total' context 'total amount, value' %}</th>
-                            <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Plan valid from' %}</th>
-                            <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Plan valid until' %}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for order in object_list %}
-                            <tr class="{% if order.status == 2 %}success{% elif order.status == 3 %}danger{% elif order.status == 4 %}warning{% elif order.status == 5 %}info{% endif %}">
-                                <td class="align-middle product white-space-nowrap"><a href="{{ order.get_absolute_url }}">{{ order.pk }}</a></td>
-                                <td class="align-middle product white-space-nowrap"><a href="{{ order.get_absolute_url }}">{{ order.name }}</a></td>
-                                <td class="date align-middle product white-space-nowrap">{{ order.created|date }}</td>
-                                <td class="status align-middle product white-space-nowrap">{{ order.get_status_display }}</td>
-                                <td class="date align-middle product white-space-nowrap">{{ order.completed|date|default:"-" }}</td>
-                                <td class="number align-middle product white-space-nowrap">{{ order.total }}&nbsp;<span class="icon-saudi_riyal"></span></td>
-                                <td class="date align-middle product white-space-nowrap">{{ order.plan_extended_from|date|default:"-" }}</td>
-                                <td class="date align-middle product white-space-nowrap">{{ order.plan_extended_until|date|default:"-" }}</td>
+{% block title %}
+    {% trans 'Plans Orders' %} {% endblock %}
+    {% block body %}
+        {% block order_header %}
+            <h3 class="mt-4">
+                <i class="fa-solid fa-list me-2"></i>{% trans "List of orders" %}
+            </h3>
+        {% endblock %}
+        {% if object_list %}
+            {% block order_table %}
+                <div class="table-responsive px-1 scrollbar mt-3">
+                    <table class="table align-items-center table-flush">
+                        <thead>
+                            <tr class="bg-body-highlight">
+                                <th>ID</th>
+                                <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Name' %}</th>
+                                <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Created' context 'order created' %}</th>
+                                <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Status' context 'order status' %}</th>
+                                <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Completed' context 'order completed' %}</th>
+                                <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Total' context 'total amount, value' %}</th>
+                                <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Plan valid from' %}</th>
+                                <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Plan valid until' %}</th>
                             </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
-            </div>
-        {% endblock %}
-
-        {% block pagination_second %}
-            {% include "plans/pagination.html" %}
-        {% endblock %}
-
-    {% else %}
-        {% blocktrans %}You do not have any orders so far.{% endblocktrans %}
-    {% endif %}
-
-
-
-{% endblock %}
+                        </thead>
+                        <tbody>
+                            {% for order in object_list %}
+                                <tr class="{% if order.status == 2 %}
+                                               success
+                                           {% elif order.status == 3 %}
+                                               danger
+                                           {% elif order.status == 4 %}
+                                               warning
+                                           {% elif order.status == 5 %}
+                                               info
+                                           {% endif %}">
+                                    <td class="align-middle product white-space-nowrap">
+                                        <a href="{{ order.get_absolute_url }}">{{ order.pk }}</a>
+                                    </td>
+                                    <td class="align-middle product white-space-nowrap">
+                                        <a href="{{ order.get_absolute_url }}">{{ order.name }}</a>
+                                    </td>
+                                    <td class="date align-middle product white-space-nowrap">{{ order.created|date }}</td>
+                                    <td class="status align-middle product white-space-nowrap">{{ order.get_status_display }}</td>
+                                    <td class="date align-middle product white-space-nowrap">{{ order.completed|date|default:"-" }}</td>
+                                    <td class="number align-middle product white-space-nowrap">
+                                        {{ order.total }}&nbsp;<span class="icon-saudi_riyal"></span>
+                                    </td>
+                                    <td class="date align-middle product white-space-nowrap">{{ order.plan_extended_from|date|default:"-" }}</td>
+                                    <td class="date align-middle product white-space-nowrap">{{ order.plan_extended_until|date|default:"-" }}</td>
+                                </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            {% endblock %}
+            {% block pagination_second %}
+                {% include "plans/pagination.html" %}
+            {% endblock %}
+        {% else %}
+            {% blocktrans %}You do not have any orders so far.{% endblocktrans %}
+        {% endif %}
+    {% endblock %}
diff --git a/templates/plans/pagination.html b/templates/plans/pagination.html
index 0388649a..3e69f0ab 100644
--- a/templates/plans/pagination.html
+++ b/templates/plans/pagination.html
@@ -2,21 +2,29 @@
 {% if is_paginated %}
     <ul class="pagination">
         {% if page_obj.has_previous %}
-            <li><a class="pagination__prev" href="?page={{ page_obj.previous_page_number }}&query={{ query }}">&laquo;</a></li>
+            <li>
+                <a class="pagination__prev"
+                   href="?page={{ page_obj.previous_page_number }}&query={{ query }}">&laquo;</a>
+            </li>
         {% else %}
-            <li class="disabled"><span>&laquo;</span></li>
+            <li class="disabled">
+                <span>&laquo;</span>
+            </li>
         {% endif %}
-
         {% for page in page_obj.paginator.page_range %}
-
             <li {% if page == page_obj.number %}class="active"{% endif %}>
-                <a href="?page={{ page }}&query={{ query }}">{{ page }}</a></li>
+                <a href="?page={{ page }}&query={{ query }}">{{ page }}</a>
+            </li>
         {% endfor %}
-
         {% if page_obj.has_next %}
-            <li><a class="pagination__next" href="?page={{ page_obj.next_page_number }}&query={{ query }}">&raquo;</a></li>
+            <li>
+                <a class="pagination__next"
+                   href="?page={{ page_obj.next_page_number }}&query={{ query }}">&raquo;</a>
+            </li>
         {% else %}
-            <li class="disabled"><span>&raquo;</span></li>
+            <li class="disabled">
+                <span>&raquo;</span>
+            </li>
         {% endif %}
     </ul>
 {% endif %}
diff --git a/templates/plans/plan_table.html b/templates/plans/plan_table.html
index c066b4e3..95ba4ea9 100644
--- a/templates/plans/plan_table.html
+++ b/templates/plans/plan_table.html
@@ -3,16 +3,20 @@
     <table class="table table-hover table-compare mb-0">
         <thead>
             <tr class="border-bottom border-200">
-                <th style="width: 30%; min-width: 280px;" class="ps-4 position-sticky start-0 border-end border-200"></th>
+                <th style="width: 30%;
+                           min-width: 280px"
+                    class="ps-4 position-sticky start-0 border-end border-200"></th>
                 {% for plan in plan_list %}
-                    <th class="text-center py-3 {% if forloop.counter0 == current_userplan_index %}bg-primary-soft{% endif %}" style="width: calc(70%/{{ plan_list|length }});">
+                    <th class="text-center py-3
+                               {% if forloop.counter0 == current_userplan_index %}bg-primary-soft{% endif %}"
+                        style="width: calc(70%/{{ plan_list|length }})">
                         <div class="d-flex flex-column align-items-center">
                             {% if plan.url %}<a href="{{ plan.url }}" class="text-decoration-none text-dark">{% endif %}
-                            <h6 class="mb-1 fw-bold">{{ plan.name }}</h6>
-                            {% if plan == userplan.plan %}
-                                <span class="badge bg-success bg-opacity-10 text-success mt-1">{% trans "Current Plan" %}</span>
-                            {% endif %}
-                            {% if plan.url %}</a>{% endif %}
+                                <h6 class="mb-1 fw-bold">{{ plan.name }}</h6>
+                                {% if plan == userplan.plan %}
+                                    <span class="badge bg-success bg-opacity-10 text-success mt-1">{% trans "Current Plan" %}</span>
+                                {% endif %}
+                                {% if plan.url %}</a>{% endif %}
                         </div>
                     </th>
                 {% endfor %}
@@ -24,13 +28,14 @@
                     <th class="ps-4 fw-normal position-sticky start-0 bg-inherit border-end border-200">
                         <div class="d-flex flex-column py-2">
                             {% if quota_row.0.url %}<a href="{{ quota_row.0.url }}" class="text-decoration-none text-dark">{% endif %}
-                            <span class="fw-semibold">{{ quota_row.0.name }}</span>
-                            <small class="text-muted">{{ quota_row.0.description }}</small>
-                            {% if quota_row.0.url %}</a>{% endif %}
+                                <span class="fw-semibold">{{ quota_row.0.name }}</span>
+                                <small class="text-muted">{{ quota_row.0.description }}</small>
+                                {% if quota_row.0.url %}</a>{% endif %}
                         </div>
                     </th>
                     {% for plan_quota in quota_row.1 %}
-                        <td class="text-center py-2 align-middle {% if forloop.counter0 == current_userplan_index %}bg-primary-soft{% endif %}">
+                        <td class="text-center py-2 align-middle
+                                   {% if forloop.counter0 == current_userplan_index %}bg-primary-soft{% endif %}">
                             {% if plan_quota != None %}
                                 {% if quota_row.0.is_boolean %}
                                     {% if plan_quota.value %}
@@ -44,9 +49,7 @@
                                             <span class="badge bg-info bg-opacity-10 text-info">{% trans 'No Limit' %}</span>
                                         {% else %}
                                             <span class="fw-semibold">{{ plan_quota.value }}</span>
-                                            {% if quota_row.0.unit %}
-                                                <span class="text-muted small">{{ quota_row.0.unit }}</span>
-                                            {% endif %}
+                                            {% if quota_row.0.unit %}<span class="text-muted small">{{ quota_row.0.unit }}</span>{% endif %}
                                         {% endif %}
                                     </span>
                                 {% endif %}
@@ -63,44 +66,50 @@
                     <h6 class="mb-0 fw-bold">{% trans 'Pricing' %}</h6>
                 </th>
             </tr>
-
             {% if user.is_authenticated %}
                 <tr class="border-bottom border-200">
                     <th class="ps-4 position-sticky start-0 border-end border-200"></th>
                     {% for plan in plan_list %}
-                        <td class="text-center py-3 {% if forloop.counter0 == current_userplan_index %}bg-primary-soft{% endif %}">
+                        <td class="text-center py-3
+                                   {% if forloop.counter0 == current_userplan_index %}bg-primary-soft{% endif %}">
                             {% if plan != userplan.plan and not userplan.is_expired and not userplan.plan.is_free %}
-                                <a href="{% url 'create_order_plan_change' pk=plan.id %}" class="btn btn-sm btn-phoenix-primary px-3">
-                                    {% trans "Change" %}
-                                </a>
+                                <a href="{% url 'create_order_plan_change' pk=plan.id %}"
+                                   class="btn btn-sm btn-phoenix-primary px-3">{% trans "Change" %}</a>
                             {% endif %}
                         </td>
                     {% endfor %}
                 </tr>
             {% endif %}
-
             <tr>
                 <th class="ps-4 position-sticky start-0 border-end border-200"></th>
                 {% for plan in plan_list %}
-                    <td class="p-3 {% if forloop.counter0 == current_userplan_index %}bg-primary-soft{% endif %}">
+                    <td class="p-3
+                               {% if forloop.counter0 == current_userplan_index %}bg-primary-soft{% endif %}">
                         {% if plan.available %}
                             <div class="d-flex flex-column gap-2">
                                 {% if not plan.is_free %}
                                     {% for plan_pricing in plan.planpricing_set.all %}
                                         {% if plan_pricing.visible %}
-                                            <div class="p-3 rounded-2 {% if plan_pricing.plan == userplan.plan %}bg-success-soft{% else %}bg-body{% endif %}">
-                                                {% if plan_pricing.pricing.url %}<a href="{{ plan_pricing.pricing.url }}" class="text-decoration-none text-dark">{% endif %}
-                                                <div class="d-flex justify-content-between align-items-center mb-1">
-                                                    <span class="fw-semibold">{{ plan_pricing.pricing.name }}</span>
-                                                    <span class="badge bg-secondary bg-opacity-10 text-secondary fs-10">{{ plan_pricing.pricing.period }} {% trans "days" %}</span>
-                                                </div>
-                                                {% if plan_pricing.pricing.url %}</a>{% endif %}
+                                            <div class="p-3 rounded-2
+                                                        {% if plan_pricing.plan == userplan.plan %}
+                                                            bg-success-soft
+                                                        {% else %}
+                                                            bg-body
+                                                        {% endif %}">
+                                                {% if plan_pricing.pricing.url %}
+                                                    <a href="{{ plan_pricing.pricing.url }}"
+                                                       class="text-decoration-none text-dark">
+                                                    {% endif %}
+                                                    <div class="d-flex justify-content-between align-items-center mb-1">
+                                                        <span class="fw-semibold">{{ plan_pricing.pricing.name }}</span>
+                                                        <span class="badge bg-secondary bg-opacity-10 text-secondary fs-10">{{ plan_pricing.pricing.period }} {% trans "days" %}</span>
+                                                    </div>
+                                                    {% if plan_pricing.pricing.url %}</a>{% endif %}
                                                 <div class="d-flex justify-content-between align-items-end mt-2">
                                                     <span class="fs-5 fw-bold">{{ plan_pricing.price }} <span class="icon-saudi_riyal"></span></span>
                                                     {% if plan_pricing.plan == userplan.plan or userplan.is_expired or userplan.plan.is_free %}
-                                                        <a href="{% url 'pricing_page' request.dealer.slug %}" class="btn btn-sm btn-phoenix-success">
-                                                            {% trans "Buy" %}
-                                                        </a>
+                                                        <a href="{% url 'pricing_page' request.dealer.slug %}"
+                                                           class="btn btn-sm btn-phoenix-success">{% trans "Buy" %}</a>
                                                     {% endif %}
                                                 </div>
                                             </div>
@@ -115,7 +124,8 @@
                                         <div class="d-flex justify-content-between align-items-end mt-2">
                                             <span class="fs-5 fw-bold">0 <span class="icon-saudi_riyal"></span></span>
                                             {% if plan != userplan.plan or userplan.is_expired %}
-                                                <a href="{% url 'create_order_plan_change' pk=plan.id %}" class="btn btn-sm btn-phoenix-primary">
+                                                <a href="{% url 'create_order_plan_change' pk=plan.id %}"
+                                                   class="btn btn-sm btn-phoenix-primary">
                                                     {% if userplan.is_expired %}
                                                         {% trans "Select" %}
                                                     {% else %}
@@ -141,4 +151,4 @@
             </tr>
         </tfoot>
     </table>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/plans/pricing.html b/templates/plans/pricing.html
index b66a22fc..8406fcb7 100644
--- a/templates/plans/pricing.html
+++ b/templates/plans/pricing.html
@@ -1,6 +1,5 @@
 {% extends 'base.html' %}
 {% load i18n %}
-
 {% block body %}
     <h3>{% trans "See our great value plans" %}</h3>
     {% include "plans/plan_table.html" %}
diff --git a/templates/plans/upgrade.html b/templates/plans/upgrade.html
index 12c2eb7b..4d8cc7bf 100644
--- a/templates/plans/upgrade.html
+++ b/templates/plans/upgrade.html
@@ -1,6 +1,5 @@
 {% extends 'base.html' %}
 {% load i18n %}
-
 {% block body %}
     <h2>{% trans "Choose plan" %}</h2>
     {% include "plans/plan_table.html" %}
diff --git a/templates/pricing_page.html b/templates/pricing_page.html
index 2118076a..20d256aa 100644
--- a/templates/pricing_page.html
+++ b/templates/pricing_page.html
@@ -1,12 +1,15 @@
 {% extends 'base.html' %}
 {% load i18n static %}
 {% load custom_filters %}
-{%block title%} {% trans 'Upgrade Plan' %} {%endblock%}
-
-{% block customCSS %}
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-X..." crossorigin="anonymous" referrerpolicy="no-referrer" />
-
-  <style>
+{% block title %}
+    {% trans 'Upgrade Plan' %} {% endblock %}
+    {% block customCSS %}
+        <link rel="stylesheet"
+              href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
+              integrity="sha512-X..."
+              crossorigin="anonymous"
+              referrerpolicy="no-referrer" />
+        <style>
     .pricing-card .card {
       transition: all 0.3s ease-in-out;
     }
@@ -47,214 +50,266 @@
     }
     #pricing_container{
       max-width:60rem;
-    
+
     }
-  </style>
-{% endblock customCSS %}
-
-{% block content %}
-  <div class="container py-5" id="pricing_container">
-    <h1 class="text-center mb-5 text-primary">{{ _("Choose Your Plan")}}</h1>
-    <form method="POST" action="{% url 'submit_plan' request.dealer.slug %}" id="wizardForm">
-      {% csrf_token %}
-       
-      <!--step1: Choose Plans-->
-      <div class="step row justify-content-center mt-5 mb-3" id="step1">
-
-       <div class="col-lg-8 col-md-10">
-         <div class="card shadow-sm border-0 rounded-3">
-            <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
-                    <h4 class="mb-0 fs-4 text-center text-white">
-                      1. {{ _("Select a Plan")}}
-                   </h4>
-            </div>
-            <div class="card-body bg-light-subtle">
-             {% for pp in plan_list %}
-            <div class="col-md-12 mb-3">
-              <input type="radio" class="btn-check" name="selected_plan" id="plan_{{ forloop.counter }}" value="{{ pp.id }}"
-                     data-name="{{ pp.plan.name }}" data-price="{{ pp.price }}" autocomplete="off" {% if forloop.first %}checked{% endif %}>
-              <label class="btn w-100 p-0 pricing-card" for="plan_{{ forloop.counter }}">
-                <div class="card h-100 border border-2 rounded-4">
-                  <div class="card-body p-4">
-                    <h4 class="mb-3">{{ pp.plan.name|capfirst }}</h4>
-                    <h5 class="mb-4">{{ pp.price }} <span class="icon-saudi_riyal"></span><span class="fs-6 fw-normal">/ {{ pp.pricing.period  }}</span> {% trans "days" %}</h5>
-                    <h5>{{_("Include Haikal's")}}</h5>
-                    <ul class="fa-ul ps-3">
-                      {% if pp.plan.description %}
-                        {% for line in pp.plan.description|splitlines %}
-                          <li class="mb-2">
-                            <span class="fa-li"><i class="fas fa-check text-primary"></i></span>
-                            {{ line|capfirst}}
-                          </li>
-                        {% endfor %}
-                      {% endif %}
-                    </ul>
-                  </div>
+        </style>
+    {% endblock customCSS %}
+    {% block content %}
+        <div class="container py-5" id="pricing_container">
+            <h1 class="text-center mb-5 text-primary">{{ _("Choose Your Plan") }}</h1>
+            <form method="POST"
+                  action="{% url 'submit_plan' request.dealer.slug %}"
+                  id="wizardForm">
+                {% csrf_token %}
+                <!--step1: Choose Plans-->
+                <div class="step row justify-content-center mt-5 mb-3" id="step1">
+                    <div class="col-lg-8 col-md-10">
+                        <div class="card shadow-sm border-0 rounded-3">
+                            <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
+                                <h4 class="mb-0 fs-4 text-center text-white">1. {{ _("Select a Plan") }}</h4>
+                            </div>
+                            <div class="card-body bg-light-subtle">
+                                {% for pp in plan_list %}
+                                    <div class="col-md-12 mb-3">
+                                        <input type="radio"
+                                               class="btn-check"
+                                               name="selected_plan"
+                                               id="plan_{{ forloop.counter }}"
+                                               value="{{ pp.id }}"
+                                               data-name="{{ pp.plan.name }}"
+                                               data-price="{{ pp.price }}"
+                                               autocomplete="off"
+                                               {% if forloop.first %}checked{% endif %}>
+                                        <label class="btn w-100 p-0 pricing-card" for="plan_{{ forloop.counter }}">
+                                            <div class="card h-100 border border-2 rounded-4">
+                                                <div class="card-body p-4">
+                                                    <h4 class="mb-3">{{ pp.plan.name|capfirst }}</h4>
+                                                    <h5 class="mb-4">
+                                                        {{ pp.price }} <span class="icon-saudi_riyal"></span><span class="fs-6 fw-normal">/ {{ pp.pricing.period }}</span> {% trans "days" %}
+                                                    </h5>
+                                                    <h5>{{ _("Include Haikal's") }}</h5>
+                                                    <ul class="fa-ul ps-3">
+                                                        {% if pp.plan.description %}
+                                                            {% for line in pp.plan.description|splitlines %}
+                                                                <li class="mb-2">
+                                                                    <span class="fa-li"><i class="fas fa-check text-primary"></i></span>
+                                                                    {{ line|capfirst }}
+                                                                </li>
+                                                            {% endfor %}
+                                                        {% endif %}
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                        </label>
+                                    </div>
+                                {% endfor %}
+                            </div>
+                        </div>
+                    </div>
                 </div>
-              </label>
-            </div>
-          {% endfor %}
-
-            </div>
-        </div>
-
-       </div>
-
-   </div>
-
-   <!--step2: Information-->
-
-       <div class="step d-none row justify-content-center mt-5 mb-3" id="step2">
-
-       <div class="col-lg-8 col-md-10">
-         <div class="card shadow-sm border-0 rounded-3">
-            <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
-                    <h3 class="mb-0 fs-4 text-center text-white">
-                      2. {{ _("Enter Your Information")}}
-                   </h3>
-            </div>
-            <div class="card-body bg-light-subtle">
-            
-                  <label class="form-label" for="first_name">{{ _("First Name")}}</label>
-                  <div class="input-group">
-                    <span class="input-group-text"><i class="fas fa-user"></i></span>
-                    <input type="text" name="first_name" id="first_name" class="form-control form-control-sm" required placeholder="{{ _("First Name")}}" value="{{ request.user.first_name }}">
-                  </div> 
-
-                  <label class="form-label" for="last_name">{{ _("Last Name")}}</label>
-                  <div class="input-group">
-                     <span class="input-group-text"><i class="fas fa-user"></i></span>
-                     <input type="text" name="last_name" id="last_name" class="form-control form-control-sm" required placeholder="{{ _("Last Name")}}" value="{{ request.user.last_name }}">
-                  </div>
-
-                  <label class="form-label" for="email">{{ _("Email Address")}}</label>
-                  <div class="input-group">
-                       <span class="input-group-text"><i class="fas fa-envelope"></i></span>
-                      <input type="email" name="email" id="email" class="form-control form-control-sm" required placeholder="email@example.com" value="{{ request.user.email }}">
-                   </div>
-
-                   <label class="form-label" for="phone">{{ _("Phone Number")}}</label>
-                   <div class="input-group">
-                     <span class="input-group-text"><i class="fas fa-phone"></i></span>
-                     <input type="text" name="phone" id="phone" class="form-control form-control-sm" dir="ltr" placeholder="{{ _("Phone Number")}}" value="{{ request.dealer.phone_number.raw_input }}" required>
-                   </div>
-
-                   <label class="form-label" for="company">{{ _("Company") }}</label>
-                  <div class="input-group">
-                    <span class="input-group-text"><i class="fas fa-building"></i></span>
-                    <input type="text" name="company" id="company" class="form-control form-control-sm" placeholder="{{ _("Company") }}" value="{{ request.dealer.get_local_name }}">
-                  </div>
-            </div>
-        </div>
-
-       </div>
-
-   </div>
-     <!--step3: Payment-->
-    <div class="step d-none row justify-content-center mt-5 mb-3"  id="step3">
-
-       <div class="col-lg-8 col-md-10">
-         <div class="card shadow-sm border-0 rounded-3">
-            <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
-                    <h3 class="mb-0 fs-4 text-center text-white">
-                      3. {{ _("Payment Information")}}
-                   </h3>
-            </div>
-            <div class="card-body bg-light-subtle">
-                <label class="form-label" for="card_name">{{ _("Cardholder Name")}}</label>
-                <div class="input-group">
-                   <span class="input-group-text"><i class="fas fa-user"></i></span>
-                   <input type="text" name="card_name" id="card_name" class="form-control form-control-sm" placeholder="{{ _("Cardholder Name")}}" required>
+                <!--step2: Information-->
+                <div class="step d-none row justify-content-center mt-5 mb-3" id="step2">
+                    <div class="col-lg-8 col-md-10">
+                        <div class="card shadow-sm border-0 rounded-3">
+                            <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
+                                <h3 class="mb-0 fs-4 text-center text-white">2. {{ _("Enter Your Information") }}</h3>
+                            </div>
+                            <div class="card-body bg-light-subtle">
+                                <label class="form-label" for="first_name">{{ _("First Name") }}</label>
+                                <div class="input-group">
+                                    <span class="input-group-text"><i class="fas fa-user"></i></span>
+                                    <input type="text"
+                                           name="first_name"
+                                           id="first_name"
+                                           class="form-control form-control-sm"
+                                           required
+                                           placeholder="{{ _("First Name") }}"
+                                           value="{{ request.user.first_name }}">
+                                </div>
+                                <label class="form-label" for="last_name">{{ _("Last Name") }}</label>
+                                <div class="input-group">
+                                    <span class="input-group-text"><i class="fas fa-user"></i></span>
+                                    <input type="text"
+                                           name="last_name"
+                                           id="last_name"
+                                           class="form-control form-control-sm"
+                                           required
+                                           placeholder="{{ _("Last Name") }}"
+                                           value="{{ request.user.last_name }}">
+                                </div>
+                                <label class="form-label" for="email">{{ _("Email Address") }}</label>
+                                <div class="input-group">
+                                    <span class="input-group-text"><i class="fas fa-envelope"></i></span>
+                                    <input type="email"
+                                           name="email"
+                                           id="email"
+                                           class="form-control form-control-sm"
+                                           required
+                                           placeholder="email@example.com"
+                                           value="{{ request.user.email }}">
+                                </div>
+                                <label class="form-label" for="phone">{{ _("Phone Number") }}</label>
+                                <div class="input-group">
+                                    <span class="input-group-text"><i class="fas fa-phone"></i></span>
+                                    <input type="text"
+                                           name="phone"
+                                           id="phone"
+                                           class="form-control form-control-sm"
+                                           dir="ltr"
+                                           placeholder="{{ _("Phone Number") }}"
+                                           value="{{ request.dealer.phone_number.raw_input }}"
+                                           required>
+                                </div>
+                                <label class="form-label" for="company">{{ _("Company") }}</label>
+                                <div class="input-group">
+                                    <span class="input-group-text"><i class="fas fa-building"></i></span>
+                                    <input type="text"
+                                           name="company"
+                                           id="company"
+                                           class="form-control form-control-sm"
+                                           placeholder="{{ _("Company") }}"
+                                           value="{{ request.dealer.get_local_name }}">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-
-                 <label class="form-label" for="card_number">{{ _("Card Number")}}</label>
-                 <div class="input-group">
-                      <span class="input-group-text"><i class="fas fa-credit-card"></i></span>
-                      <input type="text" name="card_number" id="card_number" class="form-control form-control-sm" placeholder="{{ _("Card Number")}}"
-                         maxlength="19" pattern="^\d{4}\s\d{4}\s\d{4}\s\d{4}$"
-                         inputmode="numeric" required title="Enter a 16-digit card number">
-                 </div>
-
-
-                 <label class="form-label" for="card_expiry">{{ _("Expiry Date")}} (MM/YY)</label>
-                 <div class="input-group">
-                    <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
-                    <input type="text" name="card_expiry" id="card_expiry" class="form-control form-control-sm" placeholder="{{ _("Expiry Date")}}"
-                     maxlength="5" pattern="^(0[1-9]|1[0-2])\/\d{2}$"
-                     inputmode="numeric" required title="Enter expiry in MM/YY format">
-                 </div>
-
-                  <label class="form-label" for="card_cvv">{{ _("CVV") }}</label>
-                  <div class="input-group">
-                      <span class="input-group-text"><i class="fas fa-lock"></i></span>
-                      <input type="text" name="card_cvv" id="card_cvv" class="form-control form-control-sm" placeholder="{{ _("CVV") }}"
-                       maxlength="3" pattern="^\d{3}$"
-                       inputmode="numeric" required title="Enter 3-digit CVV">
-                   </div>
-                 
-            </div>
+                <!--step3: Payment-->
+                <div class="step d-none row justify-content-center mt-5 mb-3"  id="step3">
+                    <div class="col-lg-8 col-md-10">
+                        <div class="card shadow-sm border-0 rounded-3">
+                            <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
+                                <h3 class="mb-0 fs-4 text-center text-white">3. {{ _("Payment Information") }}</h3>
+                            </div>
+                            <div class="card-body bg-light-subtle">
+                                <label class="form-label" for="card_name">{{ _("Cardholder Name") }}</label>
+                                <div class="input-group">
+                                    <span class="input-group-text"><i class="fas fa-user"></i></span>
+                                    <input type="text"
+                                           name="card_name"
+                                           id="card_name"
+                                           class="form-control form-control-sm"
+                                           placeholder="{{ _("Cardholder Name") }}"
+                                           required>
+                                </div>
+                                <label class="form-label" for="card_number">{{ _("Card Number") }}</label>
+                                <div class="input-group">
+                                    <span class="input-group-text"><i class="fas fa-credit-card"></i></span>
+                                    <input type="text"
+                                           name="card_number"
+                                           id="card_number"
+                                           class="form-control form-control-sm"
+                                           placeholder="{{ _("Card Number") }}"
+                                           maxlength="19"
+                                           pattern="^\d{4}\s\d{4}\s\d{4}\s\d{4}$"
+                                           inputmode="numeric"
+                                           required
+                                           title="Enter a 16-digit card number">
+                                </div>
+                                <label class="form-label" for="card_expiry">{{ _("Expiry Date") }} (MM/YY)</label>
+                                <div class="input-group">
+                                    <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
+                                    <input type="text"
+                                           name="card_expiry"
+                                           id="card_expiry"
+                                           class="form-control form-control-sm"
+                                           placeholder="{{ _("Expiry Date") }}"
+                                           maxlength="5"
+                                           pattern="^(0[1-9]|1[0-2])\/\d{2}$"
+                                           inputmode="numeric"
+                                           required
+                                           title="Enter expiry in MM/YY format">
+                                </div>
+                                <label class="form-label" for="card_cvv">{{ _("CVV") }}</label>
+                                <div class="input-group">
+                                    <span class="input-group-text"><i class="fas fa-lock"></i></span>
+                                    <input type="text"
+                                           name="card_cvv"
+                                           id="card_cvv"
+                                           class="form-control form-control-sm"
+                                           placeholder="{{ _("CVV") }}"
+                                           maxlength="3"
+                                           pattern="^\d{3}$"
+                                           inputmode="numeric"
+                                           required
+                                           title="Enter 3-digit CVV">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!--Step4 confirmation-->
+                <div class="step d-none row justify-content-center mt-5 mb-3" id="step4">
+                    <div class="col-lg-8 col-md-10">
+                        <div class="card shadow-sm border-0 rounded-3">
+                            <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
+                                <h3 class="mb-0 fs-4 text-center text-white">4. {{ _("Confirm Your Information") }}</h3>
+                            </div>
+                            <div class="card-body bg-light-subtle">
+                                <h5 class="text-center">
+                                    <i class="fas fa-file-invoice-dollar me-2"></i>{{ _("Order Summary") }}
+                                </h5>
+                                <div class="summary-item">
+                                    <i class="fas fa-box me-2"></i><strong>{{ _("Plan") }}:</strong> <span id="summary_plan"></span>
+                                </div>
+                                <div class="summary-item">
+                                    <i class="fas fa-tag me-2"></i><strong>{{ _("Price") }}:</strong> <span id="summary_price"></span>
+                                </div>
+                                <div class="summary-item">
+                                    <i class="fas fa-receipt me-2"></i><strong>{{ _("VAT") }} (15%):</strong> <span id="summary-tax">0.00</span> <span class="icon-saudi_riyal"></span>
+                                </div>
+                                <div class="summary-item">
+                                    <i class="fas fa-hand-holding-usd me-2"></i><strong>{{ _("Total") }}:</strong> <span id="summary-total">0.00</span> <span class="icon-saudi_riyal"></span>
+                                </div>
+                                <hr>
+                                <h5 class="mt-4 text-center">
+                                    <i class="fas fa-user me-2"></i>{{ _("User Information") }}
+                                </h5>
+                                <div class="summary-item">
+                                    <i class="fas fa-signature me-2"></i><strong>{{ _("Name") }}:</strong> <span id="summary_name"></span>
+                                </div>
+                                <div class="summary-item">
+                                    <i class="fas fa-envelope me-2"></i><strong>{{ _("Email") }}:</strong> <span id="summary_email"></span>
+                                </div>
+                                <div class="summary-item">
+                                    <i class="fas fa-building me-2"></i><strong>{{ _("Company") }}:</strong> <span id="summary_company"></span>
+                                </div>
+                                <div class="summary-item">
+                                    <i class="fas fa-phone me-2"></i><strong>{{ _("Phone") }}:</strong> <span id="summary_phone"></span>
+                                </div>
+                                <hr>
+                                <h5 class="mt-4 text-center">
+                                    <i class="fas fa-credit-card me-2"></i>{{ _("Payment") }}
+                                </h5>
+                                <div class="summary-item">
+                                    <i class="fas fa-user me-2"></i><strong>{{ _("Cardholder") }}:</strong> <span id="summary_card_name"></span>
+                                </div>
+                                <div class="summary-item">
+                                    <i class="fas fa-credit-card me-2"></i><strong>{{ _("Card Number") }}:</strong> <span id="summary_card_number"></span>
+                                </div>
+                                <div class="summary-item">
+                                    <i class="far fa-calendar-alt me-2"></i><strong>{{ _("Expiry") }}:</strong> <span id="summary_card_expiry"></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Navigation -->
+                <div class="d-flex justify-content-between mt-4">
+                    <button type="button"
+                            class="btn btn-lg btn-phoenix-secondary"
+                            id="prevBtn"
+                            disabled>{{ _("Previous") }}</button>
+                    <button type="button" class="btn btn-lg btn-phoenix-primary" id="nextBtn">{{ _("Next") }}</button>
+                    <button type="submit"
+                            class="btn btn-lg btn-phoenix-primary d-none"
+                            id="submitBtn">{{ _("Confirm") }}</button>
+                </div>
+            </form>
         </div>
-
-       </div>
-
-   </div>
-      <!--Step4 confirmation-->
-
-       <div class="step d-none row justify-content-center mt-5 mb-3" id="step4">
-
-       <div class="col-lg-8 col-md-10">
-         <div class="card shadow-sm border-0 rounded-3">
-           
-            <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
-                    <h3 class="mb-0 fs-4 text-center text-white">
-                     4. {{ _("Confirm Your Information")}} 
-                </h3>
-            </div>
-          
-          <div class="card-body bg-light-subtle">
-          <h5 class="text-center"><i class="fas fa-file-invoice-dollar me-2"></i>{{ _("Order Summary")}}</h5>
-          <div class="summary-item"><i class="fas fa-box me-2"></i><strong>{{ _("Plan") }}:</strong> <span id="summary_plan"></span></div>
-          <div class="summary-item"><i class="fas fa-tag me-2"></i><strong>{{ _("Price") }}:</strong> <span id="summary_price"></span></div>
-          <div class="summary-item"><i class="fas fa-receipt me-2"></i><strong>{{ _("VAT") }} (15%):</strong> <span id="summary-tax">0.00</span> <span class="icon-saudi_riyal"></span></div>
-          <div class="summary-item"><i class="fas fa-hand-holding-usd me-2"></i><strong>{{ _("Total") }}:</strong> <span id="summary-total">0.00</span> <span class="icon-saudi_riyal"></span></div>
-          <hr>
-          
-
-          <h5 class="mt-4 text-center"><i class="fas fa-user me-2"></i>{{ _("User Information")}}</h5>
-          <div class="summary-item"><i class="fas fa-signature me-2"></i><strong>{{ _("Name") }}:</strong> <span id="summary_name"></span></div>
-          <div class="summary-item"><i class="fas fa-envelope me-2"></i><strong>{{ _("Email") }}:</strong> <span id="summary_email"></span></div>
-          <div class="summary-item"><i class="fas fa-building me-2"></i><strong>{{ _("Company") }}:</strong> <span id="summary_company"></span></div>
-          <div class="summary-item"><i class="fas fa-phone me-2"></i><strong>{{ _("Phone") }}:</strong> <span id="summary_phone"></span></div>
-          <hr>
-
-          <h5 class="mt-4 text-center"><i class="fas fa-credit-card me-2"></i>{{ _("Payment") }}</h5>
-          <div class="summary-item"><i class="fas fa-user me-2"></i><strong>{{ _("Cardholder") }}:</strong> <span id="summary_card_name"></span></div>
-          <div class="summary-item"><i class="fas fa-credit-card me-2"></i><strong>{{ _("Card Number")}}:</strong> <span id="summary_card_number"></span></div>
-          <div class="summary-item"><i class="far fa-calendar-alt me-2"></i><strong>{{ _("Expiry") }}:</strong> <span id="summary_card_expiry"></span></div>
-               
-
-            </div>
-        </div>
-
-       </div>
-
-   </div>
-
-
-    <!---->
-
-    <!-- Navigation -->
-      <div class="d-flex justify-content-between mt-4">
-        <button type="button" class="btn btn-lg btn-phoenix-secondary" id="prevBtn" disabled>{{ _("Previous") }}</button>
-        <button type="button" class="btn btn-lg btn-phoenix-primary" id="nextBtn">{{ _("Next") }}</button>
-        <button type="submit" class="btn btn-lg btn-phoenix-primary d-none" id="submitBtn">{{ _("Confirm") }}</button>
-      </div>
-    </form>
-  </div>
-{% endblock content %}
-
-{% block customJS %}
-  <script>
+    {% endblock content %}
+    {% block customJS %}
+        <script>
     document.addEventListener("DOMContentLoaded", function () {
       const form = document.getElementById('wizardForm');
 
@@ -412,6 +467,5 @@
       planInputs.forEach(input => input.addEventListener("change", updateSummary));
       updateSummary(); // Initial call
     });
-  </script>
-
-{% endblock customJS %}
\ No newline at end of file
+        </script>
+    {% endblock customJS %}
diff --git a/templates/purchase_orders/car_inventory_item_form.html b/templates/purchase_orders/car_inventory_item_form.html
index 29bbc623..74a5e4bb 100644
--- a/templates/purchase_orders/car_inventory_item_form.html
+++ b/templates/purchase_orders/car_inventory_item_form.html
@@ -1,142 +1,148 @@
 {% extends "base.html" %}
 {% load static i18n crispy_forms_tags %}
-
 {% block content %}
-  <form hx-boost="true" hx-swap="none" action="{% url 'inventory_item_create' request.dealer.slug %}?for_po=1" method="post">
-    <style>
-        .color-card {
-      cursor: pointer;
-      transition: all 0.3s ease;
-      border: 2px solid transparent;
-      width: 80px;  /* Increased from 3rem for better visibility */
-      height: 80px; /* Increased from 3rem for better visibility */
-      margin-right: 10px;
-    }
+    <form hx-boost="true"
+          hx-swap="none"
+          action="{% url 'inventory_item_create' request.dealer.slug %}?for_po=1"
+          method="post">
+        <style>
+      .color-card {
+        cursor: pointer;
+        transition: all 0.3s ease;
+        border: 2px solid transparent;
+        width: 80px;  /* Increased from 3rem for better visibility */
+        height: 80px; /* Increased from 3rem for better visibility */
+        margin-right: 10px;
+      }
 
-    .color-card:hover {
-      transform: translateY(-3px);
-      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-    }
+      .color-card:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+      }
 
-    .color-option {
-      display: block;
-      position: relative;
-      margin: 0;
-      padding: 0;
-      height: 100%;
-    }
+      .color-option {
+        display: block;
+        position: relative;
+        margin: 0;
+        padding: 0;
+        height: 100%;
+      }
 
-    .color-radio {
-      position: absolute;
-      opacity: 0;
-      width: 0;
-      height: 0;
-    }
+      .color-radio {
+        position: absolute;
+        opacity: 0;
+        width: 0;
+        height: 0;
+      }
 
-    .color-radio:checked + .color-display {
-      border: 2px solid #0d6efd;
-      box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
-    }
+      .color-radio:checked + .color-display {
+        border: 2px solid #0d6efd;
+        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
+      }
 
-    .color-radio:focus + .color-display {
-      border-color: #86b7fe;
-      box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
-    }
+      .color-radio:focus + .color-display {
+        border-color: #86b7fe;
+        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
+      }
 
-    .color-display {
-      height: 100%;
-      display: flex;
-      align-items: flex-end;
-      justify-content: center;
-      padding: 10px;
-      border-radius: 0.25rem;
-      transition: all 0.2s ease;
-    }
+      .color-display {
+        height: 100%;
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+        padding: 10px;
+        border-radius: 0.25rem;
+        transition: all 0.2s ease;
+      }
 
-    .color-name {
-      background-color: rgba(255, 255, 255, 0.8);
-      padding: 2px 5px;
-      border-radius: 3px;
-      text-align: center;
-      width: 100%;
-      font-size: 0.8rem;
-    }
+      .color-name {
+        background-color: rgba(255, 255, 255, 0.8);
+        padding: 2px 5px;
+        border-radius: 3px;
+        text-align: center;
+        width: 100%;
+        font-size: 0.8rem;
+      }
 
     /* Added for better layout of color options */
-    .color-options-container {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-      margin-bottom: 20px;
-    }
-    </style>
-    {% csrf_token %}
-    <div class="row g-4">
-      <div class="col">
-        {% include "purchase_orders/partials/po-select.html" with name="make" target="model" data=make_data pk=po_model.pk %}
-      </div>
-      <div class="col">
-        {% include "purchase_orders/partials/po-select.html" with name="model" target="serie" data=model_data pk=po_model.pk %}
-      </div>
-      <div class="col">
-            {{form.year.label}}
-            {{form.year}}
-      </div>
-      <div class="col">
-        {% include "purchase_orders/partials/po-select.html" with name="serie" target="trim" data=serie_data pk=po_model.pk %}
-      </div>
-      <div class="col">
-        {% include "purchase_orders/partials/po-select.html" with name="trim" target="none" data=trim_data pk=po_model.pk %}
-      </div>
-    </div>
-    <div class="row g-4">
-      <div class="col">
-        {{form.vendor.label}}
-        {{form.vendor}}
-      </div>
-    </div>
-
-    <div class="form-group">
-      <label for="account">Account</label>
-      <select class="form-control" name="account" id="account">
-        {% for account in inventory_accounts %}
-          <option value="{{ account.pk }}">{{ account }}"></option>
-        {% endfor %}
-      </select>
-    </div>
-    <div class="row g-4 mt-4">
-      <div class="col ms-6">
-        <p class="fs-5 mb-2">{% trans 'Exterior Colors' %}</p>
-        <div class="color-options-container">
-          {% for color in form.fields.exterior.queryset %}
-            <div class="color-card">
-              <label class="color-option">
-                <input class="color-radio" type="radio" name="exterior" value="{{ color.id }}" {% if color.id == form.instance.exterior.id %}checked{% endif %}>
-                <div class="color-display" style="background-color: rgb({{ color.rgb }})">
-                  <span class="color-name">{{ color.get_local_name }}</span>
-                </div>
-              </label>
+      .color-options-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        margin-bottom: 20px;
+      }
+        </style>
+        {% csrf_token %}
+        <div class="row g-4">
+            <div class="col">
+                {% include "purchase_orders/partials/po-select.html" with name="make" target="model" data=make_data pk=po_model.pk %}
             </div>
-          {% endfor %}
-        </div>
-      </div>
-
-      <div class="col">
-        <p class="fs-5 mb-2">{% trans 'Interior Colors' %}</p>
-        <div class="color-options-container">
-          {% for color in form.fields.interior.queryset %}
-            <div class="color-card">
-              <label class="color-option">
-                <input class="color-radio" type="radio" name="interior" value="{{ color.id }}" {% if color.id == form.instance.interior.id %}checked{% endif %}>
-                <div class="color-display" style="background-color: rgb({{ color.rgb }})">
-                  <span class="color-name">{{ color.get_local_name }}</span>
-                </div>
-              </label>
+            <div class="col">
+                {% include "purchase_orders/partials/po-select.html" with name="model" target="serie" data=model_data pk=po_model.pk %}
+            </div>
+            <div class="col">
+                {{ form.year.label }}
+                {{ form.year }}
+            </div>
+            <div class="col">
+                {% include "purchase_orders/partials/po-select.html" with name="serie" target="trim" data=serie_data pk=po_model.pk %}
+            </div>
+            <div class="col">
+                {% include "purchase_orders/partials/po-select.html" with name="trim" target="none" data=trim_data pk=po_model.pk %}
             </div>
-          {% endfor %}
         </div>
-      </div>
-    </div>
-    <button type="submit" class="btn btn-primary mt-5">{% trans 'Save' %}</button>
-  </form>
-{% endblock content %}
\ No newline at end of file
+        <div class="row g-4">
+            <div class="col">
+                {{ form.vendor.label }}
+                {{ form.vendor }}
+            </div>
+        </div>
+        <div class="form-group">
+            <label for="account">Account</label>
+            <select class="form-control" name="account" id="account">
+                {% for account in inventory_accounts %}<option value="{{ account.pk }}">{{ account }}"></option>{% endfor %}
+            </select>
+        </div>
+        <div class="row g-4 mt-4">
+            <div class="col ms-6">
+                <p class="fs-5 mb-2">{% trans 'Exterior Colors' %}</p>
+                <div class="color-options-container">
+                    {% for color in form.fields.exterior.queryset %}
+                        <div class="color-card">
+                            <label class="color-option">
+                                <input class="color-radio"
+                                       type="radio"
+                                       name="exterior"
+                                       value="{{ color.id }}"
+                                       {% if color.id == form.instance.exterior.id %}checked{% endif %}>
+                                <div class="color-display" style="background-color: rgb({{ color.rgb }})">
+                                    <span class="color-name">{{ color.get_local_name }}</span>
+                                </div>
+                            </label>
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+            <div class="col">
+                <p class="fs-5 mb-2">{% trans 'Interior Colors' %}</p>
+                <div class="color-options-container">
+                    {% for color in form.fields.interior.queryset %}
+                        <div class="color-card">
+                            <label class="color-option">
+                                <input class="color-radio"
+                                       type="radio"
+                                       name="interior"
+                                       value="{{ color.id }}"
+                                       {% if color.id == form.instance.interior.id %}checked{% endif %}>
+                                <div class="color-display" style="background-color: rgb({{ color.rgb }})">
+                                    <span class="color-name">{{ color.get_local_name }}</span>
+                                </div>
+                            </label>
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        <button type="submit" class="btn btn-primary mt-5">{% trans 'Save' %}</button>
+    </form>
+{% endblock content %}
diff --git a/templates/purchase_orders/includes/card_po.html b/templates/purchase_orders/includes/card_po.html
index 26f1cece..b2c7c333 100644
--- a/templates/purchase_orders/includes/card_po.html
+++ b/templates/purchase_orders/includes/card_po.html
@@ -28,174 +28,145 @@
         };
     });
 </script>
-
 {% if not create_po %}
     {% if style == 'po-detail' %}
         <div class="card shadow-sm border-0 mb-2">
-    <div class="card-header bg-light ">
-        <div class="d-flex align-items-center mb-2 ">
-            <span class="me-3 text-primary">
-                {% icon 'uil:bill' 36 %}
-            </span>
-            <h2 class="h3 mb-0 text-primary me-4">
-                {{ po_model.po_number }}
-            </h2>
-            
-           
-        </div>
-        <p>
-              <a class="btn btn-phoenix-primary"
-                    href="{% url 'purchase_order_list' request.dealer.slug request.dealer.entity.slug %}"
-                    title="Click to view the complete list of Purchase Orders"
-                    role="button">
-                    <i class="fas fa-list me-2"></i>{% trans 'PO List' %}
-             </a>
-            </p>
-        
-    </div>
-
-    <div class="card-body">
-        <div class='row g-3'> 
-          
-            <div class='col-12 col-md-3 col-lg-2'> 
-                <h3 class="h4 mb-0 mb-md-4"> 
-                    <span class="badge bg-{% if po_model.is_draft %}success{% elif po_model.is_approved %}success{% elif po_model.is_fulfilled %}primary{% else %}warning{% endif %}">
-                        {{ po_model.get_po_status_display }}
-                    </span>
-                </h3>
-               
-            </div>
-
-           
-            <div class='col-12 col-md-4 col-lg-3'> 
-                {% if po_model.is_draft %}
-                    <h5 class="h6 text-muted mb-1">{% trans 'Draft Date' %}</h5>
-                    <p class="h5 mb-3">{{ po_model.date_draft|date }}</p>
-                {% endif %}
-
-                {% if po_model.is_review %}
-                    <h5 class="h6 text-muted mb-1">{% trans 'Review Date' %}</h5>
-                    <p class="h5 mb-3">{{ po_model.date_in_review|date }}</p>
-                {% endif %}
-
-                {% if po_model.is_approved %}
-                    <h5 class="h6 text-muted mb-1">{% trans 'Approved Date' %}</h5>
-                    <p class="h5 mb-3">{{ po_model.date_approved|date }}</p>
-                {% endif %}
-
-                {% if po_model.is_fulfilled %}
-                    <h5 class="h6 text-muted mb-1">{% trans 'Fulfilled Date' %}</h5>
-                    <p class="h5 mb-3">{{ po_model.date_fulfilled|date }}</p>
-                {% endif %}
-            </div>
-
-          
-            <div class='col-12 col-md-5 col-lg-5'>
-                <div class="row text-center g-0"> 
-                    <div class="col-6 border-end"> 
-                        <div class="p-2">
-                            <h6 class="text-muted mb-2">{% trans 'PO Amount' %}</h6>
-                            <h3 class="fw-light mb-0">
-                                <span class="currency">{{CURRENCY}}</span>{{ po_model.po_amount | absolute | currency_format }}
-                            </h3>
-                        </div>
-                    </div>
-                    <div class="col-6"> 
-                            <h6 class="text-muted mb-2">{% trans 'Amount Received' %}</h6>
-                            <h3 class="fw-light mb-0 text-success">
-                                <span class="currency">{{CURRENCY}}</span>{{ po_model.po_amount_received | currency_format }}
-                            </h3>
-                        </div>
-                    </div>
+            <div class="card-header bg-light ">
+                <div class="d-flex align-items-center mb-2 ">
+                    <span class="me-3 text-primary">{% icon 'uil:bill' 36 %}</span>
+                    <h2 class="h3 mb-0 text-primary me-4">{{ po_model.po_number }}</h2>
                 </div>
-            </div>
-
-            
-            
-        </div>
-    
-
-
-           
-            <div class="card-footer bg-light">
-                 {% if perms.django_ledger.change_purchaseordermodel%}
-                <div class="d-flex flex-wrap gap-2 justify-content-between">
-               
-                    <a href="{% url 'purchase_order_update' dealer_slug=request.dealer.slug entity_slug=entity_slug po_pk=po_model.pk %}"
-                       class="btn btn-phoenix-primary">
-                        <i class="fas fa-edit me-2"></i>{% trans 'Update' %}
+                <p>
+                    <a class="btn btn-phoenix-primary"
+                       href="{% url 'purchase_order_list' request.dealer.slug request.dealer.entity.slug %}"
+                       title="Click to view the complete list of Purchase Orders"
+                       role="button">
+                        <i class="fas fa-list me-2"></i>{% trans 'PO List' %}
                     </a>
-
-                    <div class="d-flex flex-wrap gap-2">
-                       
-                        {% if po_model.can_draft %}
-                            <button class="btn btn-phoenix-secondary"
-                                    onclick="showPOModal('Draft PO', '{% url 'po-action-mark-as-draft' request.dealer.slug entity_slug po_model.pk %}', 'Mark As Draft')">
-                                <i class="fas fa-file me-2"></i>{% trans 'Mark as Draft' %}
-                            </button>
+                </p>
+            </div>
+            <div class="card-body">
+                <div class='row g-3'>
+                    <div class='col-12 col-md-3 col-lg-2'>
+                        <h3 class="h4 mb-0 mb-md-4">
+                            <span class="badge bg-
+                                         {% if po_model.is_draft %}
+                                             success
+                                         {% elif po_model.is_approved %}
+                                             success
+                                         {% elif po_model.is_fulfilled %}
+                                             primary
+                                         {% else %}
+                                             warning
+                                         {% endif %}">{{ po_model.get_po_status_display }}</span>
+                        </h3>
+                    </div>
+                    <div class='col-12 col-md-4 col-lg-3'>
+                        {% if po_model.is_draft %}
+                            <h5 class="h6 text-muted mb-1">{% trans 'Draft Date' %}</h5>
+                            <p class="h5 mb-3">{{ po_model.date_draft|date }}</p>
                         {% endif %}
-
-                        {% if po_model.can_review %}
-                            <button class="btn btn-phoenix-warning"
-                                    onclick="showPOModal('Review PO', '{% url 'po-action-mark-as-review' request.dealer.slug entity_slug po_model.pk %}', 'Mark As Review')">
-                                <i class="fas fa-search me-2"></i>{% trans 'Mark as Review' %}
-                            </button>
+                        {% if po_model.is_review %}
+                            <h5 class="h6 text-muted mb-1">{% trans 'Review Date' %}</h5>
+                            <p class="h5 mb-3">{{ po_model.date_in_review|date }}</p>
                         {% endif %}
-
-                        {% if po_model.can_approve %}
-                            <button class="btn btn-phoenix-success"
-                                    onclick="showPOModal('Approve PO', '{% url 'po-action-mark-as-approved' request.dealer.slug entity_slug po_model.pk %}', 'Mark As Approved')">
-                                <i class="fas fa-check-circle me-2"></i>{% trans 'Mark as Approved' %}
-                            </button>
+                        {% if po_model.is_approved %}
+                            <h5 class="h6 text-muted mb-1">{% trans 'Approved Date' %}</h5>
+                            <p class="h5 mb-3">{{ po_model.date_approved|date }}</p>
                         {% endif %}
-
-                        {% if po_model.can_fulfill %}
-                            <button class="btn btn-phoenix-primary"
-                                    onclick="showPOModal('Fulfill PO', '{% url 'po-action-mark-as-fulfilled' request.dealer.slug entity_slug po_model.pk %}', 'Mark As Fulfilled')">
-                                <i class="fas fa-truck me-2"></i>{% trans 'Mark as Fulfilled' %}
-                            </button>
-                       
-                        {% endif %}
-
-                          
-                        {% if po_model.can_delete %}
-                             {% if perms.django_ledger.delete_purchaseordermodel%}
-                            <button class="btn btn-phoenix-danger"
-                                    onclick="showPOModal('Delete PO', '{% url 'po-delete' request.dealer.slug entity_slug po_model.pk %}', 'Delete')">
-                                <i class="fas fa-trash me-2"></i>{% trans 'Delete' %}
-                            </button>
-                            {% endif %}
-                        {% endif %}
-
-                        {% if po_model.can_void %}
-                            <button class="btn btn-phoenix-danger"
-                                    onclick="showPOModal('Void PO', '{% url 'po-action-mark-as-void' request.dealer.slug entity_slug po_model.pk %}', 'Mark As Void')">
-                                <i class="fas fa-times-circle me-2"></i>{% trans 'Void' %}
-                            </button>
-                        {% endif %}
-
-                        {% if po_model.can_cancel %}
-                            <button class="btn btn-phoenix-secondary"
-                                    onclick="showPOModal('Cancel PO', '{% url 'po-action-mark-as-canceled' request.dealer.slug entity_slug po_model.pk %}', 'Mark As Cancelled')">
-                                <i class="fas fa-ban me-2"></i>{% trans 'Cancel' %}
-                            </button>
-
+                        {% if po_model.is_fulfilled %}
+                            <h5 class="h6 text-muted mb-1">{% trans 'Fulfilled Date' %}</h5>
+                            <p class="h5 mb-3">{{ po_model.date_fulfilled|date }}</p>
                         {% endif %}
                     </div>
+                    <div class='col-12 col-md-5 col-lg-5'>
+                        <div class="row text-center g-0">
+                            <div class="col-6 border-end">
+                                <div class="p-2">
+                                    <h6 class="text-muted mb-2">{% trans 'PO Amount' %}</h6>
+                                    <h3 class="fw-light mb-0">
+                                        <span class="currency">{{ CURRENCY }}</span>{{ po_model.po_amount | absolute | currency_format }}
+                                    </h3>
+                                </div>
+                            </div>
+                            <div class="col-6">
+                                <h6 class="text-muted mb-2">{% trans 'Amount Received' %}</h6>
+                                <h3 class="fw-light mb-0 text-success">
+                                    <span class="currency">{{ CURRENCY }}</span>{{ po_model.po_amount_received | currency_format }}
+                                </h3>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-            {% endif %}
+            </div>
+            <div class="card-footer bg-light">
+                {% if perms.django_ledger.change_purchaseordermodel %}
+                    <div class="d-flex flex-wrap gap-2 justify-content-between">
+                        <a href="{% url 'purchase_order_update' dealer_slug=request.dealer.slug entity_slug=entity_slug po_pk=po_model.pk %}"
+                           class="btn btn-phoenix-primary">
+                            <i class="fas fa-edit me-2"></i>{% trans 'Update' %}
+                        </a>
+                        <div class="d-flex flex-wrap gap-2">
+                            {% if po_model.can_draft %}
+                                <button class="btn btn-phoenix-secondary"
+                                        onclick="showPOModal('Draft PO', '{% url 'po-action-mark-as-draft' request.dealer.slug entity_slug po_model.pk %}', 'Mark As Draft')">
+                                    <i class="fas fa-file me-2"></i>{% trans 'Mark as Draft' %}
+                                </button>
+                            {% endif %}
+                            {% if po_model.can_review %}
+                                <button class="btn btn-phoenix-warning"
+                                        onclick="showPOModal('Review PO', '{% url 'po-action-mark-as-review' request.dealer.slug entity_slug po_model.pk %}', 'Mark As Review')">
+                                    <i class="fas fa-search me-2"></i>{% trans 'Mark as Review' %}
+                                </button>
+                            {% endif %}
+                            {% if po_model.can_approve %}
+                                <button class="btn btn-phoenix-success"
+                                        onclick="showPOModal('Approve PO', '{% url 'po-action-mark-as-approved' request.dealer.slug entity_slug po_model.pk %}', 'Mark As Approved')">
+                                    <i class="fas fa-check-circle me-2"></i>{% trans 'Mark as Approved' %}
+                                </button>
+                            {% endif %}
+                            {% if po_model.can_fulfill %}
+                                <button class="btn btn-phoenix-primary"
+                                        onclick="showPOModal('Fulfill PO', '{% url 'po-action-mark-as-fulfilled' request.dealer.slug entity_slug po_model.pk %}', 'Mark As Fulfilled')">
+                                    <i class="fas fa-truck me-2"></i>{% trans 'Mark as Fulfilled' %}
+                                </button>
+                            {% endif %}
+                            {% if po_model.can_delete %}
+                                {% if perms.django_ledger.delete_purchaseordermodel %}
+                                    <button class="btn btn-phoenix-danger"
+                                            onclick="showPOModal('Delete PO', '{% url 'po-delete' request.dealer.slug entity_slug po_model.pk %}', 'Delete')">
+                                        <i class="fas fa-trash me-2"></i>{% trans 'Delete' %}
+                                    </button>
+                                {% endif %}
+                            {% endif %}
+                            {% if po_model.can_void %}
+                                <button class="btn btn-phoenix-danger"
+                                        onclick="showPOModal('Void PO', '{% url 'po-action-mark-as-void' request.dealer.slug entity_slug po_model.pk %}', 'Mark As Void')">
+                                    <i class="fas fa-times-circle me-2"></i>{% trans 'Void' %}
+                                </button>
+                            {% endif %}
+                            {% if po_model.can_cancel %}
+                                <button class="btn btn-phoenix-secondary"
+                                        onclick="showPOModal('Cancel PO', '{% url 'po-action-mark-as-canceled' request.dealer.slug entity_slug po_model.pk %}', 'Mark As Cancelled')">
+                                    <i class="fas fa-ban me-2"></i>{% trans 'Cancel' %}
+                                </button>
+                            {% endif %}
+                        </div>
+                    </div>
+                {% endif %}
             </div>
         </div>
     {% endif %}
 {% else %}
-      {% if perms.django_ledger.add_purchaseordermodel%}
-    <div class="card border-0 shadow-sm text-center py-5">
-        <div class="card-body">
-            <a href="{% url 'purchase_order_create' request.dealer.slug request.dealer.entity.slug %}" class="text-decoration-none">
-                <span class="text-muted mb-3 d-inline-block">{% icon "ic:baseline-add-circle-outline" 48 %}</span>
-                <h3 class="h4 text-muted">{% trans 'New Purchase Order' %}</h3>
-            </a>
+    {% if perms.django_ledger.add_purchaseordermodel %}
+        <div class="card border-0 shadow-sm text-center py-5">
+            <div class="card-body">
+                <a href="{% url 'purchase_order_create' request.dealer.slug request.dealer.entity.slug %}"
+                   class="text-decoration-none">
+                    <span class="text-muted mb-3 d-inline-block">{% icon "ic:baseline-add-circle-outline" 48 %}</span>
+                    <h3 class="h4 text-muted">{% trans 'New Purchase Order' %}</h3>
+                </a>
+            </div>
         </div>
-    </div>
-      {% endif %}
-{% endif %}
\ No newline at end of file
+    {% endif %}
+{% endif %}
diff --git a/templates/purchase_orders/includes/inventory_item_form.html b/templates/purchase_orders/includes/inventory_item_form.html
index 75f1f6c5..a041c617 100644
--- a/templates/purchase_orders/includes/inventory_item_form.html
+++ b/templates/purchase_orders/includes/inventory_item_form.html
@@ -1,27 +1,27 @@
 {% extends "base.html" %}
 {% load static i18n crispy_forms_tags %}
-
 {% block content %}
-
-<form action="{% url 'inventory_item_create' request.dealer.slug po_model.pk %}" method="post">
-    {% csrf_token %}
-    {% include "purchase_orders/partials/po-select.html" with name="make" target="model" data=make_data pk=po_model.pk %}
-    {% include "purchase_orders/partials/po-select.html" with name="model" target="serie" data=model_data pk=po_model.pk %}
-    {% include "purchase_orders/partials/po-select.html" with name="serie" target="trim" data=serie_data pk=po_model.pk %}
-    {% include "purchase_orders/partials/po-select.html" with name="trim" target="none" data=trim_data pk=po_model.pk %}
-    <div class="form-group">
-        <label for="account">Account</label>
-        <select class="form-control" name="account" id="account">
-            {% for account in inventory_accounts %}
-            <option value="{{ account.pk }}">{{ account }}"></option>
-            {% endfor %}
-        </select>
-    </div>
-    <div class="form-group">
-      <label for="quantity">Quantity</label>
-      <input type="number" class="form-control" id="quantity" name="quantity" required>
-    </div>
-    <button type="submit" class="btn btn-phoenix-primary">Add New Item To Inventory</button>
-  </form>
-
-{% endblock content %}
\ No newline at end of file
+    <form action="{% url 'inventory_item_create' request.dealer.slug po_model.pk %}"
+          method="post">
+        {% csrf_token %}
+        {% include "purchase_orders/partials/po-select.html" with name="make" target="model" data=make_data pk=po_model.pk %}
+        {% include "purchase_orders/partials/po-select.html" with name="model" target="serie" data=model_data pk=po_model.pk %}
+        {% include "purchase_orders/partials/po-select.html" with name="serie" target="trim" data=serie_data pk=po_model.pk %}
+        {% include "purchase_orders/partials/po-select.html" with name="trim" target="none" data=trim_data pk=po_model.pk %}
+        <div class="form-group">
+            <label for="account">Account</label>
+            <select class="form-control" name="account" id="account">
+                {% for account in inventory_accounts %}<option value="{{ account.pk }}">{{ account }}"></option>{% endfor %}
+            </select>
+        </div>
+        <div class="form-group">
+            <label for="quantity">Quantity</label>
+            <input type="number"
+                   class="form-control"
+                   id="quantity"
+                   name="quantity"
+                   required>
+        </div>
+        <button type="submit" class="btn btn-phoenix-primary">Add New Item To Inventory</button>
+    </form>
+{% endblock content %}
diff --git a/templates/purchase_orders/includes/mark_as.html b/templates/purchase_orders/includes/mark_as.html
index 3d1497ec..20064f40 100644
--- a/templates/purchase_orders/includes/mark_as.html
+++ b/templates/purchase_orders/includes/mark_as.html
@@ -4,11 +4,14 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="POModalTitle"></h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                <button type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close"></button>
             </div>
             <div class="modal-body" id="POModalBody">
                 <!-- Content will be inserted here by JavaScript -->
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/purchase_orders/includes/po_item_formset.html b/templates/purchase_orders/includes/po_item_formset.html
index 677cae26..31005851 100644
--- a/templates/purchase_orders/includes/po_item_formset.html
+++ b/templates/purchase_orders/includes/po_item_formset.html
@@ -3,7 +3,6 @@
 {% load icon from django_ledger %}
 {% load custom_filters %}
 {% load widget_tweaks %}
-
 <form action="{% url 'purchase_order_update_items' dealer_slug=dealer_slug entity_slug=entity_slug po_pk=po_model.uuid %}"
       method="post">
     <div class="row g-3">
@@ -18,22 +17,22 @@
                 <table class="table table-hover table-bordered">
                     <thead class="">
                         <tr>
-                            <th style="min-width: 600px;" class="d-flex justify-content-between align-items-center">
+                            <th style="min-width: 600px"
+                                class="d-flex justify-content-between align-items-center">
                                 {% trans 'Item' %}
-                            {% if po_model.is_draft %}
-
-                                <button type="button"
-                                class="btn btn-sm btn-phoenix-success"
-                                data-bs-toggle="modal"
-                                data-bs-target="#mainModal"
-                                hx-get="{% url 'inventory_item_create' dealer_slug %}?for_po=1"
-                                hx-target=".main-modal-body"
-                                hx-select="form"
-                                hx-swap="innerHTML">
-                                <i class="fas fa-plus me-1"></i>{% trans 'Add Item' %}
-                            </button>
-                            {% endif %}
-                        </th>
+                                {% if po_model.is_draft %}
+                                    <button type="button"
+                                            class="btn btn-sm btn-phoenix-success"
+                                            data-bs-toggle="modal"
+                                            data-bs-target="#mainModal"
+                                            hx-get="{% url 'inventory_item_create' dealer_slug %}?for_po=1"
+                                            hx-target=".main-modal-body"
+                                            hx-select="form"
+                                            hx-swap="innerHTML">
+                                        <i class="fas fa-plus me-1"></i>{% trans 'Add Item' %}
+                                    </button>
+                                {% endif %}
+                            </th>
                             <th>{% trans 'Unit Cost' %}</th>
                             <th>{% trans 'Quantity' %}</th>
                             <th>{% trans 'Unit' %}</th>
@@ -50,28 +49,18 @@
                         {% for f in itemtxs_formset %}
                             <tr>
                                 <td>
-                                    {% for hidden_field in f.hidden_fields %}
-                                        {{ hidden_field }}
-                                    {% endfor %}
+                                    {% for hidden_field in f.hidden_fields %}{{ hidden_field }}{% endfor %}
                                     {{ f.item_model|add_class:"form-control" }}
-                                    {% if f.errors %}
-                                        <div class="text-danger small">{{ f.errors }}</div>
-                                    {% endif %}
+                                    {% if f.errors %}<div class="text-danger small">{{ f.errors }}</div>{% endif %}
                                 </td>
-
                                 <td id="{{ f.instance.html_id_unit_cost }}">{{ f.po_unit_cost|add_class:"form-control" }}</td>
                                 <td id="{{ f.instance.html_id_quantity }}">{{ f.po_quantity|add_class:"form-control" }}</td>
                                 <td>{{ f.entity_unit|add_class:"form-control" }}</td>
                                 <td class="text-end" id="{{ f.instance.html_id_total_amount }}">
-                                    <span class="currency">{{CURRENCY}}</span>{{ f.instance.po_total_amount | currency_format }}</td>
+                                    <span class="currency">{{ CURRENCY }}</span>{{ f.instance.po_total_amount | currency_format }}
+                                </td>
                                 <td>{{ f.po_item_status|add_class:"form-control" }}</td>
-                                {% if itemtxs_formset.can_delete %}
-
-                                    <td class="text-center">
-                                        {{ f.DELETE|add_class:"form-check-input" }}
-                                    </td>
-                                {% endif %}
-
+                                {% if itemtxs_formset.can_delete %}<td class="text-center">{{ f.DELETE|add_class:"form-check-input" }}</td>{% endif %}
                                 <td class="text-center">
                                     {% if f.instance.can_create_bill and can_add_bill %}
                                         {{ f.create_bill|add_class:"form-check-input" }}
@@ -80,7 +69,7 @@
                                            href="{% url 'bill-detail' dealer_slug=dealer_slug entity_slug=entity_slug bill_pk=f.instance.bill_model_id %}">
                                             {% trans 'View Bill' %}
                                         </a>
-                                        {% endif %}
+                                    {% endif %}
                                 </td>
                                 <td class="text-center">
                                     {% if f.instance.bill_model %}
@@ -94,18 +83,17 @@
                             </tr>
                         {% endfor %}
                     </tbody>
-
                     <tfoot>
                         <tr>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th class="text-end">{% trans 'Total' %}</th>
-                            <th class="text-end"><span class="currency">{{CURRENCY}}</span>{{ po_model.po_amount | currency_format }}</th>
+                            <th class="text-end">
+                                <span class="currency">{{ CURRENCY }}</span>{{ po_model.po_amount | currency_format }}
+                            </th>
                             <th></th>
-                            {% if itemtxs_formset.can_delete %}
-                                <th></th>
-                            {% endif %}
+                            {% if itemtxs_formset.can_delete %}<th></th>{% endif %}
                             <th></th>
                             <th></th>
                         </tr>
@@ -117,4 +105,4 @@
             <button class="btn btn-phoenix-success">{% trans 'Save' %}</button>
         </div>
     </div>
-</form>
\ No newline at end of file
+</form>
diff --git a/templates/purchase_orders/includes/po_table.html b/templates/purchase_orders/includes/po_table.html
index 4e7e9713..a4cb3afd 100644
--- a/templates/purchase_orders/includes/po_table.html
+++ b/templates/purchase_orders/includes/po_table.html
@@ -1,8 +1,6 @@
 {% load django_ledger %}
 {% load i18n %}
-
 <div class="table-container">
-
     <table class="table is-fullwidth is-narrow is-striped is-bordered django-ledger-table-bottom-margin-75">
         <thead>
             <tr>
@@ -17,11 +15,15 @@
         <tbody>
             {% for po in po_list %}
                 <tr>
-                    <td>{% if po.po_number %}{{ po.po_number }}{% endif %}</td>
+                    <td>
+                        {% if po.po_number %}{{ po.po_number }}{% endif %}
+                    </td>
                     <td>{{ po.po_title }}</td>
                     <td>{{ po.get_status_action_date }}</td>
                     <td>{{ po.get_po_status_display }}</td>
-                    <td><span class="currency">{{CURRENCY}}</span>{{ po.po_amount | currency_format }}</td>
+                    <td>
+                        <span class="currency">{{ CURRENCY }}</span>{{ po.po_amount | currency_format }}
+                    </td>
                     <td class="has-text-centered">
                         <div class="dropdown is-right is-hoverable" id="bill-action-{{ po.uuid }}">
                             <div class="dropdown-trigger">
@@ -46,5 +48,4 @@
             {% endfor %}
         </tbody>
     </table>
-
 </div>
diff --git a/templates/purchase_orders/inventory_item_form.html b/templates/purchase_orders/inventory_item_form.html
index e7c96cd2..ee38df8b 100644
--- a/templates/purchase_orders/inventory_item_form.html
+++ b/templates/purchase_orders/inventory_item_form.html
@@ -1,23 +1,20 @@
 {% extends "base.html" %}
 {% load static i18n crispy_forms_tags %}
-
 {% block content %}
-  <div class="container-fluid mt-4">
-    <form action="" method="post">
-      {% csrf_token %}
-      <div class="form-group">
-        <label for="account">Name</label>
-        <input type="text" class="form-control" id="name" name="name" required>
-      </div>
-      <div class="form-group">
-        <label for="account">Account</label>
-        <select class="form-control" name="account" id="account">
-          {% for account in inventory_accounts %}
-            <option value="{{ account.pk }}">{{ account }}</option>
-          {% endfor %}
-        </select>
-      </div>
-      <button type="submit" class="btn btn-phoenix-primary mt-2">Add New Item To Inventory</button>
-    </form>
-  </div>
-{% endblock content %}
\ No newline at end of file
+    <div class="container-fluid mt-4">
+        <form action="" method="post">
+            {% csrf_token %}
+            <div class="form-group">
+                <label for="account">Name</label>
+                <input type="text" class="form-control" id="name" name="name" required>
+            </div>
+            <div class="form-group">
+                <label for="account">Account</label>
+                <select class="form-control" name="account" id="account">
+                    {% for account in inventory_accounts %}<option value="{{ account.pk }}">{{ account }}</option>{% endfor %}
+                </select>
+            </div>
+            <button type="submit" class="btn btn-phoenix-primary mt-2">Add New Item To Inventory</button>
+        </form>
+    </div>
+{% endblock content %}
diff --git a/templates/purchase_orders/partials/po-select.html b/templates/purchase_orders/partials/po-select.html
index 1ea229ac..33d1f5a1 100644
--- a/templates/purchase_orders/partials/po-select.html
+++ b/templates/purchase_orders/partials/po-select.html
@@ -1,18 +1,12 @@
-<div class="form-group" id="form-{{name}}">
-  <label for="{{name}}">{{name|capfirst}}</label>
-  <select class="form-control"
-          name="{{name}}" id="{{name}}"
-          {% if name != "trim" %}
-            hx-get="{% url 'inventory_items_filter' request.dealer.slug %}"
-            hx-target="#form-{{target}}"
-            hx-select="#form-{{target}}"
-            hx-swap="outerHTML"
-            hx-include="#id_year"
-          {% endif %}
-  >
-  <option value="">--------</option>
-    {% for item in data %}
-      <option value="{{ item.pk }}">{{ item.name }}</option>
-    {% endfor %}
-  </select>
-</div>
\ No newline at end of file
+<div class="form-group" id="form-{{ name }}">
+    <label for="{{ name }}">{{ name|capfirst }}</label>
+    <select class="form-control"
+            name="{{ name }}"
+            id="{{ name }}"
+            {% if name != "trim" %}
+                hx-get="{% url 'inventory_items_filter' request.dealer.slug %}" hx-target="#form-{{ target }}" hx-select="#form-{{ target }}" hx-swap="outerHTML" hx-include="#id_year"
+            {% endif %}>
+        <option value="">--------</option>
+        {% for item in data %}<option value="{{ item.pk }}">{{ item.name }}</option>{% endfor %}
+    </select>
+</div>
diff --git a/templates/purchase_orders/po_confirm_delete.html b/templates/purchase_orders/po_confirm_delete.html
index 7c8a235f..b935dc0d 100644
--- a/templates/purchase_orders/po_confirm_delete.html
+++ b/templates/purchase_orders/po_confirm_delete.html
@@ -1,19 +1,17 @@
 <!-- templates/purchase_orders/po_confirm_delete.html -->
 {% extends "base.html" %}
-
-{% block title %}
-    Confirm Delete - {{ block.super }}
-{% endblock %}
-
+{% block title %}Confirm Delete - {{ block.super }}{% endblock %}
 {% block content %}
     <div class="container mt-4">
         <h2>Confirm Deletion</h2>
-        <p>Are you sure you want to delete the Purchase Order <strong>"{{ po.po_number }}"</strong>?</p>
-
+        <p>
+            Are you sure you want to delete the Purchase Order <strong>"{{ po.po_number }}"</strong>?
+        </p>
         <form method="post">
             {% csrf_token %}
             <button type="submit" class="btn btn-phoenix-danger">Yes, Delete</button>
-            <a href="{% url 'purchase_order_detail' po.id %}" class="btn btn-phoenix-secondary">Cancel</a>
+            <a href="{% url 'purchase_order_detail' po.id %}"
+               class="btn btn-phoenix-secondary">Cancel</a>
         </form>
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/purchase_orders/po_delete.html b/templates/purchase_orders/po_delete.html
index 4f09a8c1..6dabdd26 100644
--- a/templates/purchase_orders/po_delete.html
+++ b/templates/purchase_orders/po_delete.html
@@ -2,7 +2,6 @@
 {% load i18n %}
 {% load static %}
 {% load django_ledger %}
-
 {% block content %}
     <div class="row justify-content-center">
         <div class="col-md-6">
@@ -11,12 +10,15 @@
                 {% csrf_token %}
                 <div class="card shadow">
                     <div class="card-body text-center py-4">
-                        <h2 class="card-title h3 fw-light mb-4">Are you sure you want to delete
-                            Purchase Order {{ po_model.po_number }}?</h2>
-
-                        <p class="card-text text-muted mb-4">All transactions associated with this Purchase Order will be deleted.
-                            If you want to void the PO instead, <a href="{% url 'purchase_order_detail' dealer_slug=request.dealer.slug pk=po_model.uuid %}" class="text-decoration-none">click here</a></p>
-
+                        <h2 class="card-title h3 fw-light mb-4">
+                            Are you sure you want to delete
+                            Purchase Order {{ po_model.po_number }}?
+                        </h2>
+                        <p class="card-text text-muted mb-4">
+                            All transactions associated with this Purchase Order will be deleted.
+                            If you want to void the PO instead, <a href="{% url 'purchase_order_detail' dealer_slug=request.dealer.slug pk=po_model.uuid %}"
+    class="text-decoration-none">click here</a>
+                        </p>
                         <div class="d-flex justify-content-center gap-3 mt-4">
                             <a href="{% url 'purchase_order_update' dealer_slug=request.dealer.slug entity_slug=view.kwargs.entity_slug po_pk=po_model.uuid %}"
                                class="btn btn-phoenix-primary px-4">{% trans 'Go Back' %}</a>
@@ -27,4 +29,4 @@
             </form>
         </div>
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/purchase_orders/po_detail.html b/templates/purchase_orders/po_detail.html
index deb78451..eab970ef 100644
--- a/templates/purchase_orders/po_detail.html
+++ b/templates/purchase_orders/po_detail.html
@@ -3,32 +3,23 @@
 {% load static %}
 {% load django_ledger %}
 {% load custom_filters %}
-
 {% block content %}
     <div class="container-fluid mt-4">
         <div class="row g-1">
-
-                <div class="col-lg-12 mb-3">
-                    <div class="card">
-                        <div class="card-body">
-                            {% include 'purchase_orders/includes/card_po.html' with dealer_slug=request.dealer.slug po_model=po_model entity_slug=entity_slug style='po-detail' %}
-                        </div>
+            <div class="col-lg-12 mb-3">
+                <div class="card">
+                    <div class="card-body">
+                        {% include 'purchase_orders/includes/card_po.html' with dealer_slug=request.dealer.slug po_model=po_model entity_slug=entity_slug style='po-detail' %}
                     </div>
                 </div>
-
-                <div class="col-lg-12">
-                    <div class="table-responsive">
-                        {% po_item_table1 po_items %}
-                    </div>
-                </div>
-
+            </div>
+            <div class="col-lg-12">
+                <div class="table-responsive">{% po_item_table1 po_items %}</div>
+            </div>
         </div>
     </div>
-
     {% include "purchase_orders/includes/mark_as.html" %}
-
 {% endblock %}
-
 {% block customJS %}
     <script>
         document.addEventListener('DOMContentLoaded', function() {
@@ -57,4 +48,4 @@
             };
         });
     </script>
-{% endblock customJS %}
\ No newline at end of file
+{% endblock customJS %}
diff --git a/templates/purchase_orders/po_detail_backup.html b/templates/purchase_orders/po_detail_backup.html
index 0ff0b286..bd5eb9a7 100644
--- a/templates/purchase_orders/po_detail_backup.html
+++ b/templates/purchase_orders/po_detail_backup.html
@@ -1,34 +1,32 @@
 <!-- templates/purchase_orders/po_detail.html -->
 {% extends "base.html" %}
 {% load static i18n %}
-{% block title %}
-    {{ po.po_number }} - Purchase Order - {{ block.super }}
-{% endblock %}
-
+{% block title %}{{ po.po_number }} - Purchase Order - {{ block.super }}{% endblock %}
 {% block content %}
     <div class="container mt-4">
         <h2>Purchase Order: {{ po.po_number }}</h2>
-        <p><strong>Status:</strong>
-            <span class="">
-                {{ po.po_status }}
-            </span>
+        <p>
+            <strong>Status:</strong>
+            <span class="">{{ po.po_status }}</span>
         </p>
-
         <div class="row">
             <div class="col-md-6">
                 <dl class="row">
                     <dt class="col-sm-4">Supplier</dt>
-                    <dd class="col-sm-8">{{ po.supplier.name }}</dd>
-
+                    <dd class="col-sm-8">
+                        {{ po.supplier.name }}
+                    </dd>
                     <dt class="col-sm-4">Created At</dt>
-                    <dd class="col-sm-8">{{ po.created|date:"M d, Y H:i" }}</dd>
-
+                    <dd class="col-sm-8">
+                        {{ po.created|date:"M d, Y H:i" }}
+                    </dd>
                     <dt class="col-sm-4">Total Amount</dt>
-                    <dd class="col-sm-8">${{ po.total_amount|floatformat:2 }}</dd>
+                    <dd class="col-sm-8">
+                        ${{ po.total_amount|floatformat:2 }}
+                    </dd>
                 </dl>
             </div>
         </div>
-
         <h4 class="mt-4">Ordered Items</h4>
         <table class="table table-bordered">
             <thead>
@@ -48,25 +46,39 @@
                         <td>${{ item.inventory_account }}</td>
                     </tr>
                 {% empty %}
-                    <tr><td colspan="4" class="text-center">No items found.</td></tr>
+                    <tr>
+                        <td colspan="4" class="text-center">No items found.</td>
+                    </tr>
                 {% endfor %}
             </tbody>
         </table>
-
         <div class="mt-3">
-
-
-            <button class="btn btn-phoenix-primary" data-bs-toggle="modal" data-bs-target="#POModal"><span class="d-none d-sm-inline-block"><i class="fa-solid fa-receipt"></i>  {% trans 'View Purchase Order' %}</span></button>
-            <a href="{% url 'purchase_order_list' request.dealer.slug request.dealer.entity.slug %}" class="btn btn-phoenix-secondary">Back to List</a>
-
+            <button class="btn btn-phoenix-primary"
+                    data-bs-toggle="modal"
+                    data-bs-target="#POModal">
+                <span class="d-none d-sm-inline-block"><i class="fa-solid fa-receipt"></i>  {% trans 'View Purchase Order' %}</span>
+            </button>
+            <a href="{% url 'purchase_order_list' request.dealer.slug request.dealer.entity.slug %}"
+               class="btn btn-phoenix-secondary">Back to List</a>
         </div>
     </div>
-    <div class="modal fade" id="POModal" data-bs-keyboard="true" tabindex="-1" aria-labelledby="POModalLabel" aria-hidden="true">
+    <div class="modal fade"
+         id="POModal"
+         data-bs-keyboard="true"
+         tabindex="-1"
+         aria-labelledby="POModalLabel"
+         aria-hidden="true">
         <div class="modal-dialog modal-lg">
             <div class="modal-content">
                 <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
-                    <h4 class="mb-0 me-2 text-primary"><i class="fas text-info ms-2"></i></h4>
-                    <button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close"><span class="fas fa-times"></span></button>
+                    <h4 class="mb-0 me-2 text-primary">
+                        <i class="fas text-info ms-2"></i>
+                    </h4>
+                    <button class="btn p-0 text-body-quaternary fs-6"
+                            data-bs-dismiss="modal"
+                            aria-label="Close">
+                        <span class="fas fa-times"></span>
+                    </button>
                 </div>
                 <div class="modal-body p-4">
                     <form action="{% url 'inventory_item_create' po.pk %}" method="post">
@@ -78,18 +90,20 @@
                         <div class="form-group">
                             <label for="account">Account</label>
                             <select class="form-control" name="account" id="account">
-                                {% for account in inventory_accounts %}
-                                    <option value="{{ account.pk }}">{{ account }}"></option>
-                                {% endfor %}
+                                {% for account in inventory_accounts %}<option value="{{ account.pk }}">{{ account }}"></option>{% endfor %}
                             </select>
                         </div>
                         <div class="form-group">
                             <label for="quantity">Quantity</label>
-                            <input type="number" class="form-control" id="quantity" name="quantity" required>
+                            <input type="number"
+                                   class="form-control"
+                                   id="quantity"
+                                   name="quantity"
+                                   required>
                         </div>
                         <button type="submit" class="btn btn-phoenix-primary">Add New Item To Inventory</button>
                     </form>
                 </div>
             </div>
         </div>
-{% endblock %}
+    {% endblock %}
diff --git a/templates/purchase_orders/po_form.html b/templates/purchase_orders/po_form.html
index ccc3b33d..92d84cbb 100644
--- a/templates/purchase_orders/po_form.html
+++ b/templates/purchase_orders/po_form.html
@@ -3,11 +3,11 @@
 {% load crispy_forms_filters %}
 {% block title %}
     {# Check if an 'object'  exists in the context #}
-  {% if object %}
-    {% trans 'Update Vendor'%}
-  {% else %}
-    {% trans 'Add New Vendor'%}
-  {% endif %}
+    {% if object %}
+        {% trans 'Update Vendor' %}
+    {% else %}
+        {% trans 'Add New Vendor' %}
+    {% endif %}
 {% endblock %}
 {% block content %}
 
@@ -44,10 +44,6 @@
 
             </div>
         </div>
-
-       </div>
-
-   </div>
-
-  <!---->
-{% endblock %}
\ No newline at end of file
+    </div>
+    <!---->
+{% endblock %}
diff --git a/templates/purchase_orders/po_list.html b/templates/purchase_orders/po_list.html
index f92df490..eb3ce59d 100644
--- a/templates/purchase_orders/po_list.html
+++ b/templates/purchase_orders/po_list.html
@@ -1,19 +1,13 @@
 <!-- po_list.html -->
 {% extends "base.html" %}
 {% load i18n static %}
-{% block title %}
-    Purchase Orders - {{ block.super }}
-{% endblock %}
-
+{% block title %}Purchase Orders - {{ block.super }}{% endblock %}
 {% block content %}
     <div class="row mt-4">
         <!-- Success Message -->
         {% if messages %}
-            {% for message in messages %}
-                <div class="alert alert-success">{{ message }}</div>
-            {% endfor %}
+            {% for message in messages %}<div class="alert alert-success">{{ message }}</div>{% endfor %}
         {% endif %}
-        
         <h2 class="">
                 {{ _("Purchase Orders") |capfirst }} <li class="fas fa-cart-plus text-primary ms-2"></li>
             </h2>
@@ -32,17 +26,25 @@
             {% include 'partials/search_box.html' %}
           </div>
         </div>
-      </div>
-
         <div class="table-responsive px-1 scrollbar mt-3">
             <table class= "table align-items-center table-flush table-hover">
                 <thead>
                     <tr class="bg-body-highlight">
-                        <th  class="sort white-space-nowrap align-middle" scope="col" style="width:15%">PO Number</th>
-                        <th class="sort white-space-nowrap align-middle" scope="col" style="width:40%">Description</th>
-                        <th class="sort white-space-nowrap align-middle" scope="col" style="width:15%">Status</th>
-                        <th class="sort white-space-nowrap align-middle" scope="col" style="width:15%">Created At</th>
-                        <th class="sort white-space-nowrap align-middle" scope="col" style="width:15%">Actions</th>
+                        <th class="sort white-space-nowrap align-middle"
+                            scope="col"
+                            style="width:15%">PO Number</th>
+                        <th class="sort white-space-nowrap align-middle"
+                            scope="col"
+                            style="width:40%">Description</th>
+                        <th class="sort white-space-nowrap align-middle"
+                            scope="col"
+                            style="width:15%">Status</th>
+                        <th class="sort white-space-nowrap align-middle"
+                            scope="col"
+                            style="width:15%">Created At</th>
+                        <th class="sort white-space-nowrap align-middle"
+                            scope="col"
+                            style="width:15%">Actions</th>
                     </tr>
                 </thead>
                 <tbody class="list">
@@ -50,8 +52,8 @@
                         {% for po in purchase_orders %}
                             <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                                 <td class="align-middle product white-space-nowrap ps-1">{{ po.po_number }}</td>
-                                <td  class="align-middle product white-space-nowrap">{{ po.po_title }}</td>
-                                <td  class="align-middle product white-space-nowrap">
+                                <td class="align-middle product white-space-nowrap">{{ po.po_title }}</td>
+                                <td class="align-middle product white-space-nowrap">
                                     <span class="">
                                         {% if po.po_status == 'draft' %}
                                             <span class="text-warning me-2" data-feather="file"></span>
@@ -69,27 +71,39 @@
                                         {{ po.po_status|capfirst }}
                                     </span>
                                 </td>
-                                <td  class="align-middle product white-space-nowrap">{{ po.created|date:"M d, Y" }}</td>
+                                <td class="align-middle product white-space-nowrap">{{ po.created|date:"M d, Y" }}</td>
                                 <td class="align-middle white-space-nowrap">
                                     <div class="btn-reveal-trigger position-static">
-                                        <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
+                                        <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
+                                                type="button"
+                                                data-bs-toggle="dropdown"
+                                                data-boundary="window"
+                                                aria-haspopup="true"
+                                                aria-expanded="false"
+                                                data-bs-reference="parent">
+                                            <span class="fas fa-ellipsis-h fs-10"></span>
+                                        </button>
                                         <div class="dropdown-menu dropdown-menu-end py-2">
                                             {% if perms.django_ledger.change_purchaseordermodel %}
-                                                <a href="{% url 'purchase_order_detail' request.dealer.slug request.dealer.entity.slug po.pk %}" class="dropdown-item text-success-dark">{% trans 'Purchase Order Detail' %}</a>
+                                                <a href="{% url 'purchase_order_detail' request.dealer.slug request.dealer.entity.slug po.pk %}"
+                                                   class="dropdown-item text-success-dark">{% trans 'Purchase Order Detail' %}</a>
                                             {% endif %}
                                             {% if po.po_status == 'fulfilled' %}
                                                 {% if perms.inventory.add_car %}
-                                                <a href="{% url 'view_items_inventory' dealer_slug=request.dealer.slug entity_slug=entity_slug po_pk=po.pk %}" class="dropdown-item text-success-dark">{% trans 'Inventory Items' %}</a>
+                                                    <a href="{% url 'view_items_inventory' dealer_slug=request.dealer.slug entity_slug=entity_slug po_pk=po.pk %}"
+                                                       class="dropdown-item text-success-dark">{% trans 'Inventory Items' %}</a>
                                                 {% endif %}
                                             {% else %}
-                                                <button class="dropdown-item text-warning-dark" disabled><span class="fas fa-exclamation-triangle me-1"></span> Fulfill the PO Before Viewing Inventory</button>
+                                                <button class="dropdown-item text-warning-dark" disabled>
+                                                    <span class="fas fa-exclamation-triangle me-1"></span> Fulfill the PO Before Viewing Inventory
+                                                </button>
                                             {% endif %}
                                         </div>
                                     </div>
                                 </td>
                             </tr>
-                        {%endfor%}
-                    {% else%}
+                        {% endfor %}
+                    {% else %}
                         <tr>
                             <td colspan="6" class="text-center">No purchase orders found.</td>
                         </tr>
@@ -98,15 +112,10 @@
             </table>
         </div>
         {% if page_obj.paginator.num_pages > 1 %}
-
             <div class="d-flex justify-content-end mt-3">
-
-                <div class="d-flex">
-                    {% include 'partials/pagination.html'%}
-                </div>
-
+                <div class="d-flex">{% include 'partials/pagination.html' %}</div>
             </div>
         {% endif %}
     </div>
     {% include 'modal/delete_modal.html' %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/purchase_orders/po_update.html b/templates/purchase_orders/po_update.html
index ff740265..8995adb3 100644
--- a/templates/purchase_orders/po_update.html
+++ b/templates/purchase_orders/po_update.html
@@ -5,11 +5,8 @@
 {% load custom_filters %}
 {% load widget_tweaks %}
 {% load crispy_forms_tags %}
-
-
 {% block content %}
     <div class="container-fluid py-4">
-
         <div class="row g-4">
             <div class="col-12">
                 {% include 'purchase_orders/includes/card_po.html' with style='po-detail' dealer_slug=request.dealer.slug po_model=po_model entity_slug=entity_slug %}
@@ -23,12 +20,9 @@
                                 <div class="col-12">
                                     {% csrf_token %}
                                     {{ form|crispy }}
-                                    <button type="submit"
-                                            class="btn btn-phoenix-success my-2 me-2">{% trans 'Save PO' %}
-                                    </button>
+                                    <button type="submit" class="btn btn-phoenix-success my-2 me-2">{% trans 'Save PO' %}</button>
                                     <a href="{% url 'purchase_order_detail' request.dealer.slug request.dealer.entity.slug po_model.uuid %}"
                                        class="btn btn-phoenix-secondary my-2">{% trans 'Back to PO Detail' %}</a>
-                                    
                                 </div>
                             </div>
                         </form>
@@ -39,9 +33,7 @@
                 <div class="col-12">
                     <div class="card shadow-sm">
                         <div class="card-header bg-light">
-                            <h3 class="h4 mb-0">
-                                {% trans 'Contract' %} {{ po_model.ce_model.estimate_number }}
-                            </h3>
+                            <h3 class="h4 mb-0">{% trans 'Contract' %} {{ po_model.ce_model.estimate_number }}</h3>
                         </div>
                         <div class="card-body">
                             <div class="table-responsive">
@@ -59,7 +51,9 @@
                                             <th></th>
                                             <th></th>
                                             <th></th>
-                                            <th><span class="currency">{{CURRENCY}}</span>{{ ce_cost_estimate__sum | currency_format }}</th>
+                                            <th>
+                                                <span class="currency">{{ CURRENCY }}</span>{{ ce_cost_estimate__sum | currency_format }}
+                                            </th>
                                         </tr>
                                     </tfoot>
                                     <tbody>
@@ -67,8 +61,12 @@
                                             <tr>
                                                 <td>{{ i.item_model__name }}</td>
                                                 <td>{{ i.ce_quantity__sum }}</td>
-                                                <td><span class="currency">{{CURRENCY}}</span>{{ i.avg_unit_cost | currency_format }}</td>
-                                                <td><span class="currency">{{CURRENCY}}</span>{{ i.ce_cost_estimate__sum | currency_format }}</td>
+                                                <td>
+                                                    <span class="currency">{{ CURRENCY }}</span>{{ i.avg_unit_cost | currency_format }}
+                                                </td>
+                                                <td>
+                                                    <span class="currency">{{ CURRENCY }}</span>{{ i.ce_cost_estimate__sum | currency_format }}
+                                                </td>
                                             </tr>
                                         {% endfor %}
                                     </tbody>
@@ -80,9 +78,7 @@
             {% endif %}
             <div class="col-12">
                 <div class="card shadow-sm">
-                    <div class="card-body">
-                        {% po_item_formset_table po_model itemtxs_formset request.user %}
-                    </div>
+                    <div class="card-body">{% po_item_formset_table po_model itemtxs_formset request.user %}</div>
                 </div>
             </div>
         </div>
@@ -109,7 +105,6 @@
         </div>
     </div>
 {% endblock %}
-
 {% block customJS %}
     <script>
         function showPOModal(title, actionUrl, buttonText) {
@@ -125,4 +120,4 @@
             modal.show();
         }
     </script>
-{% endblock customJS %}
\ No newline at end of file
+{% endblock customJS %}
diff --git a/templates/purchase_orders/po_upload_cars.html b/templates/purchase_orders/po_upload_cars.html
index 957d587e..c0ae98ba 100644
--- a/templates/purchase_orders/po_upload_cars.html
+++ b/templates/purchase_orders/po_upload_cars.html
@@ -1,56 +1,57 @@
 {% extends "base.html" %}
-
 {% block content %}
-  <div class="mt-4">
-    <h1><i class="fa-solid fa-cart-shopping me-1"></i>{{po.po_number}}</h1>
-
-    <div class="d-flex align-items-center">
-      <h4>Status:</h4>
-    {% comment %} Apply appropriate text color based on po.po_status {% endcomment %}
-      {% if po.po_status == 'draft' %}
-        <h4 class="ms-2 text-warning mb-0">{{ po.po_status|capfirst }}</h4>
-      {% elif po.po_status == 'in_review' %}
-        <h4 class="ms-2 text-secondary mb-0">{{ po.po_status|capfirst }}</h4>
-      {% elif po.po_status == 'approved' %}
-        <h4 class="ms-2 text-success mb-0">{{ po.po_status|capfirst }}</h4>
-      {% elif po.po_status == 'fulfilled' %}
-        <h4 class="ms-2 text-success mb-0">{{ po.po_status|capfirst }}</h4>
-      {% elif po.po_status == 'void' %}
-        <h4 class="ms-2 text-danger mb-0">{{ po.po_status|capfirst }}</h4>
-      {% else %}
-        <h4 class="ms-2 text-muted mb-0">{{ po.po_status|capfirst }}</h4> {# Use muted for unknown/default status #}
-      {% endif %}
-    </div>
-
-    <div class="table-responsive mt-3">
-      <table class="table table-striped table-hover align-middle">
-        <thead>
-          <tr class="bg-body-highlight">
-            <th scope="col">Name</th>
-            <th scope="col">Quatnity</th>
-            <th scope="col">Unit Cost</th>
-            <th scope="col">Is Data Uploaded ?</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for i in items %}
-            <tr>
-              <th scope="row">{{ i.item.item_model }}</th>
-              <th scope="row">{{ i.item.po_quantity }}</th>
-              <th scope="row">{{ i.item.po_unit_cost }}</th>
-              <th scope="row">
-                {% if i.status == "uploaded" %}
-                  <i data-feather="check-circle" class="text-success"></i>
-                {% else %}
-                  <a href="{% url 'upload_cars' request.dealer.slug i.item.pk %}" class="btn btn-sm btn-phoenix-primary">
-                    <i data-feather="upload" class="me-2"></i>Upload Data
-                  </a>
-                {% endif %}
-              </th>
-            </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-    </div>
-    <div>
-{% endblock content %}
\ No newline at end of file
+    <div class="mt-4">
+        <h1>
+            <i class="fa-solid fa-cart-shopping me-1"></i>{{ po.po_number }}
+        </h1>
+        <div class="d-flex align-items-center">
+            <h4>Status:</h4>
+            {% comment %} Apply appropriate text color based on po.po_status {% endcomment %}
+            {% if po.po_status == 'draft' %}
+                <h4 class="ms-2 text-warning mb-0">{{ po.po_status|capfirst }}</h4>
+            {% elif po.po_status == 'in_review' %}
+                <h4 class="ms-2 text-secondary mb-0">{{ po.po_status|capfirst }}</h4>
+            {% elif po.po_status == 'approved' %}
+                <h4 class="ms-2 text-success mb-0">{{ po.po_status|capfirst }}</h4>
+            {% elif po.po_status == 'fulfilled' %}
+                <h4 class="ms-2 text-success mb-0">{{ po.po_status|capfirst }}</h4>
+            {% elif po.po_status == 'void' %}
+                <h4 class="ms-2 text-danger mb-0">{{ po.po_status|capfirst }}</h4>
+            {% else %}
+                <h4 class="ms-2 text-muted mb-0">{{ po.po_status|capfirst }}</h4>
+                {# Use muted for unknown/default status #}
+            {% endif %}
+        </div>
+        <div class="table-responsive mt-3">
+            <table class="table table-striped table-hover align-middle">
+                <thead>
+                    <tr class="bg-body-highlight">
+                        <th scope="col">Name</th>
+                        <th scope="col">Quatnity</th>
+                        <th scope="col">Unit Cost</th>
+                        <th scope="col">Is Data Uploaded ?</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for i in items %}
+                        <tr>
+                            <th scope="row">{{ i.item.item_model }}</th>
+                            <th scope="row">{{ i.item.po_quantity }}</th>
+                            <th scope="row">{{ i.item.po_unit_cost }}</th>
+                            <th scope="row">
+                                {% if i.status == "uploaded" %}
+                                    <i data-feather="check-circle" class="text-success"></i>
+                                {% else %}
+                                    <a href="{% url 'upload_cars' request.dealer.slug i.item.pk %}"
+                                       class="btn btn-sm btn-phoenix-primary">
+                                        <i data-feather="upload" class="me-2"></i>Upload Data
+                                    </a>
+                                {% endif %}
+                            </th>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+        <div>
+        {% endblock content %}
diff --git a/templates/purchase_orders/tags/po_item_table.html b/templates/purchase_orders/tags/po_item_table.html
index c194ecad..7ed17921 100644
--- a/templates/purchase_orders/tags/po_item_table.html
+++ b/templates/purchase_orders/tags/po_item_table.html
@@ -1,6 +1,5 @@
 {% load i18n %}
 {% load django_ledger %}
-
 <div class="table-container">
     <table class="table is-fullwidth is-striped is-narrow is-bordered">
         <thead>
@@ -19,17 +18,22 @@
                     <td>{{ item.item_model }}</td>
                     <td class="has-text-centered">{{ item.po_unit_cost }}</td>
                     <td class="has-text-centered">{{ item.po_quantity }}</td>
-                    <td class="{% if item.is_cancelled %}djl-is-strikethrough{% endif %} has-text-centered">
-                        <span class="currency">{{CURRENCY}}</span>{{ item.po_total_amount | currency_format }}</td>
-                    <td class="has-text-weight-bold has-text-centered {% if item.is_cancelled %}has-text-danger{% endif %}">
-                        {% if item.po_item_status %}
-                            {{ item.get_po_item_status_display }}
-                        {% endif %}
+                    <td class="{% if item.is_cancelled %}
+                                   djl-is-strikethrough
+                               {% endif %}
+                               has-text-centered">
+                        <span class="currency">{{ CURRENCY }}</span>{{ item.po_total_amount | currency_format }}
                     </td>
-                    <td class="has-text-centered">{% if item.bill_model_id %}
-                        <a class="is-small is-info button"
-                           href="{% url 'bill-detail' dealer_slug=dealer_slug entity_slug=entity_slug bill_pk=item.bill_model_id %}">View
-                            Bill</a>{% endif %}
+                    <td class="has-text-weight-bold has-text-centered
+                               {% if item.is_cancelled %}has-text-danger{% endif %}">
+                        {% if item.po_item_status %}{{ item.get_po_item_status_display }}{% endif %}
+                    </td>
+                    <td class="has-text-centered">
+                        {% if item.bill_model_id %}
+                            <a class="is-small is-info button"
+                               href="{% url 'bill-detail' dealer_slug=dealer_slug entity_slug=entity_slug bill_pk=item.bill_model_id %}">View
+                            Bill</a>
+                        {% endif %}
                     </td>
                 </tr>
             {% endfor %}
@@ -40,10 +44,11 @@
                 <td></td>
                 <td class="has-text-right">{% trans 'Total PO Amount' %}</td>
                 <td class="has-text-weight-bold has-text-centered">
-                    <span class="currency">{{CURRENCY}}</span>{{ po_model.po_amount | currency_format }}</td>
+                    <span class="currency">{{ CURRENCY }}</span>{{ po_model.po_amount | currency_format }}
+                </td>
                 <td></td>
                 <td></td>
             </tr>
         </tfoot>
     </table>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/representatives/representative_confirm_delete.html b/templates/representatives/representative_confirm_delete.html
index f20794a6..63793620 100644
--- a/templates/representatives/representative_confirm_delete.html
+++ b/templates/representatives/representative_confirm_delete.html
@@ -4,7 +4,5 @@
         <meta charset="UTF-8">
         <title>Title</title>
     </head>
-    <body>
-
-    </body>
-</html>
\ No newline at end of file
+    <body></body>
+</html>
diff --git a/templates/representatives/representative_detail.html b/templates/representatives/representative_detail.html
index 2cf6b84c..988ba5f0 100644
--- a/templates/representatives/representative_detail.html
+++ b/templates/representatives/representative_detail.html
@@ -1,20 +1,30 @@
 {% extends 'base.html' %}
 {% load i18n %}
-{% block title %}{% trans "Representative Details" %}{% endblock title %}
+{% block title %}
+    {% trans "Representative Details" %}
+{% endblock title %}
 {% block content %}
     <div class="row my-4">
         <h2>{{ representative.get_local_name }}</h2>
         <ul class="list-group mb-4">
-            <li class="list-group-item"><strong>{% trans "ID Number" %}:</strong> {{ representative.id_number }}</li>
-            <li class="list-group-item"><strong>{% trans "Phone" %}:</strong> {{ representative.phone_number }}</li>
-            <li class="list-group-item"><strong>{% trans "Address" %}:</strong> {{ representative.address }}</li>
+            <li class="list-group-item">
+                <strong>{% trans "ID Number" %}:</strong> {{ representative.id_number }}
+            </li>
+            <li class="list-group-item">
+                <strong>{% trans "Phone" %}:</strong> {{ representative.phone_number }}
+            </li>
+            <li class="list-group-item">
+                <strong>{% trans "Address" %}:</strong> {{ representative.address }}
+            </li>
         </ul>
         <div class="d-flex">
-            <a href="{% url 'representative_update' representative.id %}" class="btn btn-sm btn-phoenix-warning me-2">{% trans "Edit" %}</a>
-            <form method="post" action="{% url 'representative_delete' representative.id %}">
+            <a href="{% url 'representative_update' representative.id %}"
+               class="btn btn-sm btn-phoenix-warning me-2">{% trans "Edit" %}</a>
+            <form method="post"
+                  action="{% url 'representative_delete' representative.id %}">
                 {% csrf_token %}
                 <button type="submit" class="btn btn-sm btn-phoenix-danger">{% trans "Delete" %}</button>
             </form>
         </div>
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/representatives/representative_form.html b/templates/representatives/representative_form.html
index 6674d46d..f6b32a60 100644
--- a/templates/representatives/representative_form.html
+++ b/templates/representatives/representative_form.html
@@ -1,7 +1,9 @@
 {% extends 'base.html' %}
 {% load i18n %}
 {% load crispy_forms_filters %}
-{% block title %}{% trans "Add Representative" %}{% endblock title %}
+{% block title %}
+    {% trans "Add Representative" %}
+{% endblock title %}
 {% block content %}
     <div class="row my-4">
         <h2>{% trans "Add Representative" %}</h2>
@@ -9,7 +11,8 @@
             {% csrf_token %}
             {{ form|crispy }}
             <button type="submit" class="btn btn-sm btn-phoenix-primary">{% trans "Save" %}</button>
-            <a href="{% url 'representative_list' %}" class="btn btn-sm btn-phoenix-secondary">{% trans "Cancel" %}</a>
+            <a href="{% url 'representative_list' %}"
+               class="btn btn-sm btn-phoenix-secondary">{% trans "Cancel" %}</a>
         </form>
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/representatives/representative_list.html b/templates/representatives/representative_list.html
index fd654299..a92077fc 100644
--- a/templates/representatives/representative_list.html
+++ b/templates/representatives/representative_list.html
@@ -1,15 +1,22 @@
 {% extends 'base.html' %}
 {% load i18n %}
-{% block title %}{% trans "Representatives" %}{% endblock title %}
+{% block title %}
+    {% trans "Representatives" %}
+{% endblock title %}
 {% block content %}
     <div class="row my-4">
         <h2>{% trans "Representatives" %}</h2>
         <div class="d-flex justify-content-between align-items-center mb-3">
             <form method="get" class="d-flex">
-                <input type="text" name="q" class="form-control form-control-sm" placeholder="{% trans 'Search' %}" value="{{ request.GET.q }}">
+                <input type="text"
+                       name="q"
+                       class="form-control form-control-sm"
+                       placeholder="{% trans 'Search' %}"
+                       value="{{ request.GET.q }}">
                 <button type="submit" class="btn btn-sm btn-phoenix-secondary ms-2">{% trans "Search" %}</button>
             </form>
-            <a href="{% url 'representative_create' %}" class="btn btn-sm btn-phoenix-primary">{% trans "Add Representative" %}</a>
+            <a href="{% url 'representative_create' %}"
+               class="btn btn-sm btn-phoenix-primary">{% trans "Add Representative" %}</a>
         </div>
         <table class="table table-hover">
             <thead>
@@ -27,7 +34,8 @@
                         <td>{{ rep.id_number }}</td>
                         <td>{{ rep.phone_number }}</td>
                         <td>
-                            <a href="{% url 'representative_detail' rep.id %}" class="btn btn-sm btn-phoenix-success">{% trans "view" %}</a>
+                            <a href="{% url 'representative_detail' rep.id %}"
+                               class="btn btn-sm btn-phoenix-success">{% trans "view" %}</a>
                         </td>
                     </tr>
                 {% empty %}
@@ -42,7 +50,9 @@
                 <ul class="pagination mb-0">
                     {% if page_obj.has_previous %}
                         <li class="page-item py-0">
-                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
+                            <a class="page-link"
+                               href="?page={{ page_obj.previous_page_number }}"
+                               aria-label="Previous">
                                 <span aria-hidden="true"><span class="fas fa-chevron-left"></span></span>
                             </a>
                         </li>
@@ -55,14 +65,20 @@
                     {% endif %}
                     {% for num in page_obj.paginator.page_range %}
                         {% if page_obj.number == num %}
-                            <li class="page-item active"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
+                            <li class="page-item active">
+                                <a class="page-link" href="?page={{ num }}">{{ num }}</a>
+                            </li>
                         {% else %}
-                            <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
+                            <li class="page-item">
+                                <a class="page-link" href="?page={{ num }}">{{ num }}</a>
+                            </li>
                         {% endif %}
                     {% endfor %}
                     {% if page_obj.has_next %}
                         <li class="page-item">
-                            <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
+                            <a class="page-link"
+                               href="?page={{ page_obj.next_page_number }}"
+                               aria-label="Next">
                                 <span aria-hidden="true"><span class="fas fa-chevron-right"></span></span>
                             </a>
                         </li>
@@ -77,4 +93,4 @@
             </nav>
         {% endif %}
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/sales/estimates/estimate_detail.html b/templates/sales/estimates/estimate_detail.html
index 9c034084..d277ab59 100644
--- a/templates/sales/estimates/estimate_detail.html
+++ b/templates/sales/estimates/estimate_detail.html
@@ -1,265 +1,340 @@
 {% extends "base.html" %}
-{% load i18n custom_filters%}
+{% load i18n custom_filters %}
 {% load crispy_forms_filters %}
-
-{% block title %}{{ _("View Quotation") }}{% endblock title %}
-
+{% block title %}
+    {{ _("View Quotation") }}
+{% endblock title %}
 {% block content %}
-     <!-- Cancel Modal -->
-  <div class="modal fade" id="CancelModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="CancelModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-sm">
-      <div class="modal-content">
-        <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
-          <h4 class="mb-0 me-2 text-danger">{{ _("Delete")}}<i class="fas fa-exclamation-circle text-danger ms-2"></i></h4>
-          <button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close"><span class="fas fa-times"></span></button>
+    <!-- Cancel Modal -->
+    <div class="modal fade"
+         id="CancelModal"
+         data-bs-backdrop="static"
+         data-bs-keyboard="false"
+         tabindex="-1"
+         aria-labelledby="CancelModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog modal-sm">
+            <div class="modal-content">
+                <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
+                    <h4 class="mb-0 me-2 text-danger">
+                        {{ _("Delete") }}<i class="fas fa-exclamation-circle text-danger ms-2"></i>
+                    </h4>
+                    <button class="btn p-0 text-body-quaternary fs-6"
+                            data-bs-dismiss="modal"
+                            aria-label="Close">
+                        <span class="fas fa-times"></span>
+                    </button>
+                </div>
+                <div class="modal-body p-4">
+                    <p>{% trans "Are you sure you want to Cancel this Estimate?" %}</p>
+                </div>
+                <div class="modal-footer flex justify-content-center border-top-0">
+                    <a type="button"
+                       class="btn btn-sm btn-phoenix-danger w-100"
+                       href="{% url 'estimate_mark_as' request.dealer.slug estimate.pk %}?mark=canceled">
+                        <i class="fa-solid fa-circle-check"></i> {% trans "Yes" %}
+                    </a>
+                </div>
+            </div>
         </div>
-        <div class="modal-body p-4">
-          <p>{% trans "Are you sure you want to Cancel this Estimate?" %}</p>
-        </div>
-        <div class="modal-footer flex justify-content-center border-top-0">
-          <a type="button" class="btn btn-sm btn-phoenix-danger w-100" href="{% url 'estimate_mark_as' request.dealer.slug estimate.pk %}?mark=canceled">
-            <i class="fa-solid fa-circle-check"></i> {% trans "Yes" %}
-          </a>
-        </div>
-
-      </div>
     </div>
-  </div>
-
-<!-- Confirm Modal -->
-  <div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-sm">
-      <div class="modal-content ">
-        <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
-          <h5 class="mmb-0 me-2 text-warning-dark" id="confirmModalLabel">
-            <i class="fas fa-exclamation-circle text-warning-dark ms-2"></i>
-            {% trans 'Confirm' %}</h5>
-          <button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close">
-            <span class="fas fa-times"></span>
-          </button>
+    <!-- Confirm Modal -->
+    <div class="modal fade"
+         id="confirmModal"
+         tabindex="-1"
+         aria-labelledby="confirmModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog modal-sm">
+            <div class="modal-content ">
+                <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
+                    <h5 class="mmb-0 me-2 text-warning-dark" id="confirmModalLabel">
+                        <i class="fas fa-exclamation-circle text-warning-dark ms-2"></i>
+                        {% trans 'Confirm' %}
+                    </h5>
+                    <button class="btn p-0 text-body-quaternary fs-6"
+                            data-bs-dismiss="modal"
+                            aria-label="Close">
+                        <span class="fas fa-times"></span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    {% trans 'Are you sure ?' %}
+                    <div class="modal-footer flex justify-content-center border-top-0">
+                        <form id="confirmForm"
+                              method="POST"
+                              action="{% url 'estimate_mark_as' request.dealer.slug estimate.pk %}?mark=approved"
+                              class="form">
+                            {% csrf_token %}
+                            <div class="container-fluid m-0 p-0">
+                                <button type="button"
+                                        class="btn btn-phoenix-danger btn-sm"
+                                        data-bs-dismiss="modal">
+                                    <i class="fa-solid fa-ban"></i> {% trans 'No' %}
+                                </button>
+                                <button type="submit" class="btn btn-phoenix-success btn-sm">
+                                    <i class="fa-solid fa-circle-check"></i> {% trans "Yes" %}
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
         </div>
-        <div class="modal-body">
-          {% trans 'Are you sure ?' %}
-          <div class="modal-footer flex justify-content-center border-top-0">
-            <form id="confirmForm" method="POST" action="{% url 'estimate_mark_as' request.dealer.slug estimate.pk %}?mark=approved" class="form">
-              {% csrf_token %}
-              <div class="container-fluid m-0 p-0">
-                <button type="button" class="btn btn-phoenix-danger btn-sm" data-bs-dismiss="modal"><i class="fa-solid fa-ban"></i> {% trans 'No' %}</button>
-                <button type="submit" class="btn btn-phoenix-success btn-sm"><i class="fa-solid fa-circle-check"></i> {% trans "Yes" %}</button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
     </div>
-  </div>
-     <!-- ============================================-->
-      <!-- <section> begin ============================-->
-
-  <section class="pt-5 pb-9 bg-body-emphasis dark__bg-gray-1200 border-top">
-    <div class="row-small mt-3">
-      <div class="d-flex justify-content-between align-items-end mb-4 mx-3">
-        <div class="d-flex flex-row align-items-center gap-2">
-          <h2 class="mb-0"><i class="fa-regular fa-file-lines"></i> {% trans 'Quotation' %}</h2>
-          <div class="fs-9 text-body-secondary fw-semibold mb-0">
-            {% if estimate.status == 'draft' %}
-              <span class="badge text-bg-warning">{% trans "Draft" %}</span>
-            {% elif estimate.status == 'in_review' %}
-              <span class="badge text-bg-info">{% trans "In Review" %}</span>
-            {% elif estimate.status == 'approved' %}
-              <span class="badge text-bg-success">{% trans "Approved" %}</span>
-            {% elif estimate.status == 'completed' %}
-              <span class="badge text-bg-success">{% trans "Completed" %}</span>
-            {% elif estimate.status == 'canceled' %}
-              <span class="badge text-bg-danger">{% trans "Canceled" %}</span>
+    <!-- ============================================-->
+    <!-- <section> begin ============================-->
+    <section class="pt-5 pb-9 bg-body-emphasis dark__bg-gray-1200 border-top">
+        <div class="row-small mt-3">
+            <div class="d-flex justify-content-between align-items-end mb-4 mx-3">
+                <div class="d-flex flex-row align-items-center gap-2">
+                    <h2 class="mb-0">
+                        <i class="fa-regular fa-file-lines"></i> {% trans 'Quotation' %}
+                    </h2>
+                    <div class="fs-9 text-body-secondary fw-semibold mb-0">
+                        {% if estimate.status == 'draft' %}
+                            <span class="badge text-bg-warning">{% trans "Draft" %}</span>
+                        {% elif estimate.status == 'in_review' %}
+                            <span class="badge text-bg-info">{% trans "In Review" %}</span>
+                        {% elif estimate.status == 'approved' %}
+                            <span class="badge text-bg-success">{% trans "Approved" %}</span>
+                        {% elif estimate.status == 'completed' %}
+                            <span class="badge text-bg-success">{% trans "Completed" %}</span>
+                        {% elif estimate.status == 'canceled' %}
+                            <span class="badge text-bg-danger">{% trans "Canceled" %}</span>
+                        {% endif %}
+                    </div>
+                </div>
+                <div class="d-flex align-items-center gap-2">
+                    {% if estimate.status == 'draft' %}
+                        {% if perms.django_ledger.change_estimatemodel %}
+                            <button id="mark_as_sent_estimate"
+                                    class="btn btn-phoenix-secondary"
+                                    onclick="setFormAction('review')"
+                                    data-bs-toggle="modal"
+                                    data-bs-target="#confirmModal">
+                                <span class="d-none d-sm-inline-block"><i class="fa-solid fa-check-double"></i> {% trans 'Mark As Review' %}</span>
+                            </button>
+                        {% endif %}
+                    {% elif estimate.status == 'in_review' %}
+                        {% if perms.django_ledger.can_approve_estimatemodel %}
+                            <button id="accept_estimate"
+                                    onclick="setFormAction('approved')"
+                                    class="btn btn-phoenix-secondary"
+                                    data-bs-toggle="modal"
+                                    data-bs-target="#confirmModal">
+                                <span class="d-none d-sm-inline-block"><i class="fa-solid fa-check-double"></i> {% trans 'Mark As Approved' %}</span>
+                            </button>
+                        {% endif %}
+                        {% if estimate.can_approve and not request.is_manager %}
+                            <button class="btn btn-phoenix-warning" disabled>
+                                <i class="fas fa-hourglass-start me-2"></i><span class="text-warning">{% trans 'Waiting for Manager Approval' %}</span>
+                            </button>
+                        {% endif %}
+                    {% elif estimate.status == 'approved' %}
+                        {% if perms.django_ledger.change_estimatemodel %}
+                            <a href="{% url 'send_email' request.dealer.slug estimate.pk %}"
+                               class="btn btn-phoenix-primary me-2"><span class="fa-regular fa-paper-plane me-sm-2"></span><span class="d-none d-sm-inline-block">{% trans 'Send Quotation' %}</span></a>
+                        {% endif %}
+                        {% if estimate.sale_orders.first %}
+                            <!--if sale order exist-->
+                            {% if perms.django_ledger.add_invoicemodel %}
+                                <a href="{% url 'invoice_create' request.dealer.slug estimate.pk %}"
+                                   class="btn btn-phoenix-primary"><span class="d-none d-sm-inline-block"><i class="fa-solid fa-receipt"></i>  {% trans 'Create Invoice' %}</span></a>
+                            {% endif %}
+                            {% if perms.inventory.view_saleorder %}
+                                <a href="{% url 'order_detail' request.dealer.slug estimate.sale_orders.first.pk %}"
+                                   class="btn btn-phoenix-primary"><span class="d-none d-sm-inline-block">{{ _("Preview Sale Order") }}</span></a>
+                            {% endif %}
+                        {% else %}
+                            {% if  perms.inventory.add_saleorder %}
+                                <a href="{% url 'create_sale_order' request.dealer.slug estimate.pk %}"
+                                   class="btn btn-phoenix-primary"><span class="d-none d-sm-inline-block"><i class="fa-solid fa-file-import"></i> {% trans 'Create Sale Order' %}</span></a>
+                            {% endif %}
+                        {% endif %}
+                    {% elif estimate.status == 'completed' %}
+                        {% if perms.inventory.view_saleorder %}
+                            <a href="{% url 'order_detail' request.dealer.slug estimate.sale_orders.first.pk %}"
+                               class="btn btn-phoenix-primary"><span class="d-none d-sm-inline-block">{{ _("Preview Sale Order") }}</span></a>
+                        {% endif %}
+                        {% if perms.django_ledger.view_invoicemodel %}
+                        <a href="{% url 'invoice_detail' request.dealer.slug estimate.invoicemodel_set.first.pk %}"
+                           class="btn btn-phoenix-primary btn-sm"
+                           type="button"><i class="fa-solid fa-receipt"></i>
+                    {{ _("View Invoice") }}</a>
+                {% endif %}
             {% endif %}
-          </div>
-        </div>
-        <div class="d-flex align-items-center gap-2">
-            {% if estimate.status == 'draft' %}
+            {% if estimate.can_cancel %}
                 {% if perms.django_ledger.change_estimatemodel %}
-                    <button id="mark_as_sent_estimate" class="btn btn-phoenix-secondary" onclick="setFormAction('review')" data-bs-toggle="modal" data-bs-target="#confirmModal"><span class="d-none d-sm-inline-block"><i class="fa-solid fa-check-double"></i> {% trans 'Mark As Review' %}</span></button>
-                {% endif %}
-            {% elif estimate.status == 'in_review' %}
-                {% if perms.django_ledger.can_approve_estimatemodel %}
-                    <button id="accept_estimate" onclick="setFormAction('approved')" class="btn btn-phoenix-secondary" data-bs-toggle="modal" data-bs-target="#confirmModal"><span class="d-none d-sm-inline-block"><i class="fa-solid fa-check-double"></i> {% trans 'Mark As Approved' %}</span></button>
-                {% endif %}
-                {% if estimate.can_approve and not request.is_manager %}
-                    <button class="btn btn-phoenix-warning" disabled>
-                        <i class="fas fa-hourglass-start me-2"></i><span class="text-warning">{% trans 'Waiting for Manager Approval' %}</span>
+                    <button class="btn btn-phoenix-danger"
+                            data-bs-toggle="modal"
+                            data-bs-target="#CancelModal">
+                        <i class="fa-solid fa-ban"></i> {% trans "Cancel" %}
                     </button>
                 {% endif %}
-            {% elif estimate.status == 'approved' %}
-                  {% if perms.django_ledger.change_estimatemodel %}
-                  <a href="{% url 'send_email' request.dealer.slug estimate.pk %}" class="btn btn-phoenix-primary me-2"><span class="fa-regular fa-paper-plane me-sm-2"></span><span class="d-none d-sm-inline-block">{% trans 'Send Quotation' %}</span></a>
-                  {% endif %}
-              {% if estimate.sale_orders.first %}
-              <!--if sale order exist-->
-                {% if perms.django_ledger.add_invoicemodel %}
-                    <a href="{% url 'invoice_create' request.dealer.slug estimate.pk %}" class="btn btn-phoenix-primary"><span class="d-none d-sm-inline-block"><i class="fa-solid fa-receipt"></i>  {% trans 'Create Invoice' %}</span></a>
-                 {% endif %}
-                 {% if perms.inventory.view_saleorder%}
-                <a href="{% url 'order_detail' request.dealer.slug estimate.sale_orders.first.pk %}" class="btn btn-phoenix-primary"><span class="d-none d-sm-inline-block">{{ _("Preview Sale Order") }}</span></a>
-                 {% endif %}
-             {% else %}
-                  {% if  perms.inventory.add_saleorder%}
-                    <a href="{% url 'create_sale_order' request.dealer.slug estimate.pk %}" class="btn btn-phoenix-primary"><span class="d-none d-sm-inline-block"><i class="fa-solid fa-file-import"></i> {% trans 'Create Sale Order' %}</span></a>
-                  {% endif %}
-              {% endif %}
-
-
-          {% elif estimate.status == 'completed' %}
-               {% if perms.inventory.view_saleorder%}
-                <a href="{% url 'order_detail' request.dealer.slug estimate.sale_orders.first.pk %}" class="btn btn-phoenix-primary"><span class="d-none d-sm-inline-block">{{ _("Preview Sale Order") }}</span></a>
-              {% endif %}
-              {% if perms.django_ledger.view_invoicemodel %}
-                <a href="{% url 'invoice_detail' request.dealer.slug estimate.invoicemodel_set.first.pk %}" class="btn btn-phoenix-primary btn-sm" type="button"><i class="fa-solid fa-receipt"></i>
-                    {{ _("View Invoice")}}</a>
-              {% endif %}
-          {% endif %}
-
-          {% if estimate.can_cancel %}
-            {% if perms.django_ledger.change_estimatemodel %}
-              <button class="btn btn-phoenix-danger" data-bs-toggle="modal" data-bs-target="#CancelModal"><i class="fa-solid fa-ban"></i> {% trans "Cancel" %}</button>
             {% endif %}
-          {% endif %}
         </div>
-      </div>
-      <div class="container bg-body dark__bg-gray-1100 p-4 mb-4 rounded-2">
-        <div class="row">
-          <div class="col mb-2">
-            <h6><i class="fa-solid fa-hashtag"></i>  {% trans 'Quotation Number' %}:</h6>
-            <p class="fs-9 text-body-secondary fw-semibold mb-0">{{estimate.estimate_number}}</p>
-          </div>
-          <div class="col mb-2">
-            <h6><i class="fa-solid fa-calendar-days"></i> {% trans 'Quotation Date' %}:</h6>
-            <p class="fs-9 text-body-secondary fw-semibold mb-0">{{estimate.created}}</p>
-          </div>
-          <div class="col mb-2">
-            <h6><i class="fa-solid fa-user"></i> {% trans 'Customer' %}:</h6>
-            <p class="fs-9 text-body-secondary fw-semibold mb-0">{{estimate.customer.customer_name}}</p>
-          </div>
-          <div class="col mb-2">
-            <h6><i class="fa-solid fa-envelope"></i> {% trans 'Email' %}:</h6>
-            <p class="fs-9 text-body-secondary fw-semibold mb-0">{{estimate.customer.email}}</p>
-          </div>
-          <div class="col">
-            <h6><i class="fa-solid fa-list"></i> {% trans "Quotation Status" %}:</h6>
-            <div class="fs-9 text-body-secondary fw-semibold mb-0">
-              {% if estimate.status == 'draft' %}
-                <span class="badge text-bg-warning">{% trans "Draft" %}</span>
-              {% elif estimate.status == 'in_review' %}
-                <span class="badge text-bg-info">{% trans "In Review" %}</span>
-              {% elif estimate.status == 'approved' %}
-                <span class="badge text-bg-success">{% trans "Approved" %}</span>
-              {% elif estimate.status == 'completed' %}
-                <span class="badge text-bg-success">{% trans "Completed" %}</span>
-              {% elif estimate.status == 'canceled' %}
-                <span class="badge text-bg-danger">{% trans "Canceled" %}</span>
-              {% endif %}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="px-0">
-        <div class="table-responsive scrollbar">
-          <table id="estimate-table" class="table fs-9 text-body mb-0">
-            <thead class="bg-body-secondary">
-              <tr>
-                <th scope="col" style="width: 24px;"><i class="fa-solid fa-hashtag"></i> </th>
-                <th scope="col" style="min-width: 100px;">{% trans "Make" %}</th>
-                <th scope="col" style="min-width: 100px;">{% trans "Model" %}</th>
-                <th scope="col" style="min-width: 100px;">{% trans "Year" %}</th>
-                <th scope="col" style="min-width: 100px;">{% trans "VIN" %}</th>
-                <th scope="col" style="min-width: 100px;">{% trans "Quantity" %}</th>
-                <th scope="col" style="min-width: 100px;">{% trans "Unit Price" %}</th>
-                <th scope="col" style="min-width: 100px;">{% trans "Total" %}</th>
-
-              </tr>
-            </thead>
-            <tbody>
-              {% for item in data.cars %}
-                <tr>
-                  <td class="align-middle"></td>
-                  <td class="align-middle">{{item.make}}</td>
-                  <td class="align-middle">{{item.model}}</td>
-                  <td class="align-middle">{{item.year}}</td>
-                  <td class="align-middle">{{item.vin}}</td>
-                  <td class="align-middle">{{item.quantity}}</td>
-                  <td class="align-middle ps-5">{{item.unit_price}}</td>
-                  <td class="align-middle text-body-tertiary fw-semibold">{{item.total}}</td>
-                </tr>
-              {% endfor %}
-              <tr class="bg-body-secondary total-sum">
-                <td class="align-middle ps-4 fw-semibold text-body-highlight" colspan="7">{% trans "Vat" %} ({{data.vat}})</td>
-                <td class="align-middle text-start fw-semibold">
-                  <span id="grand-total">+ {{data.total_vat_amount|floatformat}}<span class="icon-saudi_riyal"></span></span>
-                </td>
-              </tr>
-              <tr class="bg-body-secondary total-sum">
-                <td class="align-middle ps-4 fw-semibold text-body-highlight" colspan="7">{% trans "Discount Amount" %}</td>
-                <td class="align-middle text-start text-danger fw-semibold">
-                  <form action="{% url 'update_estimate_discount' request.dealer.slug estimate.pk %}" method="post">
-                    {% csrf_token %}
-                    <div class="input-group input-group-sm">
-                      <input type="number" class="form-control" name="discount_amount" value="{{data.total_discount}}" step="0.01" style="width: 1px;">
-                      <span class="input-group-text"><span class="icon-saudi_riyal"></span></span>
-                      <button type="submit" class="btn btn-sm btn-phoenix-primary ms-n2">{% trans "Update" %}</button>
-                    </div>
-                  </form>
-                </td>
-              </tr>
-              <tr class="bg-body-secondary total-sum">
-                <td class="align-middle ps-4 fw-semibold text-body-highlight" colspan="7">{% trans "Additional Services" %}</td>
-                <td class="align-middle text-start fw-semibold">
-                  {% for service in data.additionals %}
-                    <small><span class="fw-semibold">+ {{service.name}} - {{service.price_|floatformat}}<span class="icon-saudi_riyal"></span></span></small><br>
-                  {% endfor %}
-                  <button class="btn btn-phoenix-primary btn-xs ms-auto" type="button" data-bs-toggle="modal" data-bs-target="#additionalModal"><span class="fas fa-plus me-1"></span>{{ _("Add") }}</button>
-                </td>
-              </tr>
-              <tr class="bg-body-secondary total-sum">
-                <td class="align-middle ps-4 fw-bolder text-body-highlight" colspan="7">{% trans "Grand Total" %}</td>
-                <td class="align-middle text-start fw-bolder">
-                  <span id="grand-total">{{data.grand_total|floatformat}}<span class="icon-saudi_riyal"></span></span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
     </div>
-            <!-- end of .row-->
-
-  </section>
-          <!-- <section> close ============================-->
-          <!-- ============================================-->
-           <!-- add update Modal -->
-        <div class="modal fade" id="additionalModal" tabindex="-1" aria-labelledby="additionalModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-md">
+    <div class="container bg-body dark__bg-gray-1100 p-4 mb-4 rounded-2">
+        <div class="row">
+            <div class="col mb-2">
+                <h6>
+                    <i class="fa-solid fa-hashtag"></i>  {% trans 'Quotation Number' %}:
+                </h6>
+                <p class="fs-9 text-body-secondary fw-semibold mb-0">{{ estimate.estimate_number }}</p>
+            </div>
+            <div class="col mb-2">
+                <h6>
+                    <i class="fa-solid fa-calendar-days"></i> {% trans 'Quotation Date' %}:
+                </h6>
+                <p class="fs-9 text-body-secondary fw-semibold mb-0">{{ estimate.created }}</p>
+            </div>
+            <div class="col mb-2">
+                <h6>
+                    <i class="fa-solid fa-user"></i> {% trans 'Customer' %}:
+                </h6>
+                <p class="fs-9 text-body-secondary fw-semibold mb-0">{{ estimate.customer.customer_name }}</p>
+            </div>
+            <div class="col mb-2">
+                <h6>
+                    <i class="fa-solid fa-envelope"></i> {% trans 'Email' %}:
+                </h6>
+                <p class="fs-9 text-body-secondary fw-semibold mb-0">{{ estimate.customer.email }}</p>
+            </div>
+            <div class="col">
+                <h6>
+                    <i class="fa-solid fa-list"></i> {% trans "Quotation Status" %}:
+                </h6>
+                <div class="fs-9 text-body-secondary fw-semibold mb-0">
+                    {% if estimate.status == 'draft' %}
+                        <span class="badge text-bg-warning">{% trans "Draft" %}</span>
+                    {% elif estimate.status == 'in_review' %}
+                        <span class="badge text-bg-info">{% trans "In Review" %}</span>
+                    {% elif estimate.status == 'approved' %}
+                        <span class="badge text-bg-success">{% trans "Approved" %}</span>
+                    {% elif estimate.status == 'completed' %}
+                        <span class="badge text-bg-success">{% trans "Completed" %}</span>
+                    {% elif estimate.status == 'canceled' %}
+                        <span class="badge text-bg-danger">{% trans "Canceled" %}</span>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="px-0">
+        <div class="table-responsive scrollbar">
+            <table id="estimate-table" class="table fs-9 text-body mb-0">
+                <thead class="bg-body-secondary">
+                    <tr>
+                        <th scope="col" style="width: 24px;">
+                            <i class="fa-solid fa-hashtag"></i>
+                        </th>
+                        <th scope="col" style="min-width: 100px;">{% trans "Make" %}</th>
+                        <th scope="col" style="min-width: 100px;">{% trans "Model" %}</th>
+                        <th scope="col" style="min-width: 100px;">{% trans "Year" %}</th>
+                        <th scope="col" style="min-width: 100px;">{% trans "VIN" %}</th>
+                        <th scope="col" style="min-width: 100px;">{% trans "Quantity" %}</th>
+                        <th scope="col" style="min-width: 100px;">{% trans "Unit Price" %}</th>
+                        <th scope="col" style="min-width: 100px;">{% trans "Total" %}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for item in data.cars %}
+                        <tr>
+                            <td class="align-middle"></td>
+                            <td class="align-middle">{{ item.make }}</td>
+                            <td class="align-middle">{{ item.model }}</td>
+                            <td class="align-middle">{{ item.year }}</td>
+                            <td class="align-middle">{{ item.vin }}</td>
+                            <td class="align-middle">{{ item.quantity }}</td>
+                            <td class="align-middle ps-5">{{ item.unit_price }}</td>
+                            <td class="align-middle text-body-tertiary fw-semibold">{{ item.total }}</td>
+                        </tr>
+                    {% endfor %}
+                    <tr class="bg-body-secondary total-sum">
+                        <td class="align-middle ps-4 fw-semibold text-body-highlight" colspan="7">{% trans "Vat" %} ({{ data.vat }})</td>
+                        <td class="align-middle text-start fw-semibold">
+                            <span id="grand-total">+ {{ data.total_vat_amount|floatformat }}<span class="icon-saudi_riyal"></span></span>
+                        </td>
+                    </tr>
+                    <tr class="bg-body-secondary total-sum">
+                        <td class="align-middle ps-4 fw-semibold text-body-highlight" colspan="7">{% trans "Discount Amount" %}</td>
+                        <td class="align-middle text-start text-danger fw-semibold">
+                            <form action="{% url 'update_estimate_discount' request.dealer.slug estimate.pk %}"
+                                  method="post">
+                                {% csrf_token %}
+                                <div class="input-group input-group-sm">
+                                    <input type="number"
+                                           class="form-control"
+                                           name="discount_amount"
+                                           value="{{ data.total_discount }}"
+                                           step="0.01"
+                                           style="width: 1px">
+                                    <span class="input-group-text"><span class="icon-saudi_riyal"></span></span>
+                                    <button type="submit" class="btn btn-sm btn-phoenix-primary ms-n2">{% trans "Update" %}</button>
+                                </div>
+                            </form>
+                        </td>
+                    </tr>
+                    <tr class="bg-body-secondary total-sum">
+                        <td class="align-middle ps-4 fw-semibold text-body-highlight" colspan="7">{% trans "Additional Services" %}</td>
+                        <td class="align-middle text-start fw-semibold">
+                            {% for service in data.additionals %}
+                                <small><span class="fw-semibold">+ {{ service.name }} - {{ service.price_|floatformat }}<span class="icon-saudi_riyal"></span></span></small>
+                                <br>
+                            {% endfor %}
+                            <button class="btn btn-phoenix-primary btn-xs ms-auto"
+                                    type="button"
+                                    data-bs-toggle="modal"
+                                    data-bs-target="#additionalModal">
+                                <span class="fas fa-plus me-1"></span>{{ _("Add") }}
+                            </button>
+                        </td>
+                    </tr>
+                    <tr class="bg-body-secondary total-sum">
+                        <td class="align-middle ps-4 fw-bolder text-body-highlight" colspan="7">{% trans "Grand Total" %}</td>
+                        <td class="align-middle text-start fw-bolder">
+                            <span id="grand-total">{{ data.grand_total|floatformat }}<span class="icon-saudi_riyal"></span></span>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+<!-- end of .row-->
+</section>
+<!-- <section> close ============================-->
+<!-- ============================================-->
+<!-- add update Modal -->
+<div class="modal fade"
+     id="additionalModal"
+     tabindex="-1"
+     aria-labelledby="additionalModalLabel"
+     aria-hidden="true">
+    <div class="modal-dialog modal-md">
         <div class="modal-content">
             <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
-            <h4 class="modal-title" id="additionalModalLabel">{% trans 'Additional Services' %}</h4>
-            <button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close">
-                <span class="fas fa-times"></span>
-            </button>
+                <h4 class="modal-title" id="additionalModalLabel">{% trans 'Additional Services' %}</h4>
+                <button class="btn p-0 text-body-quaternary fs-6"
+                        data-bs-dismiss="modal"
+                        aria-label="Close">
+                    <span class="fas fa-times"></span>
+                </button>
             </div>
             <div class="modal-body">
-                <form action="{% url 'update_estimate_additionals' request.dealer.slug estimate.pk %}" method="post">
+                <form action="{% url 'update_estimate_additionals' request.dealer.slug estimate.pk %}"
+                      method="post">
                     {% csrf_token %}
-                    {{additionals_form|crispy}}
+                    {{ additionals_form|crispy }}
                     <button type="submit" class="btn btn-phoenix-primary">{% trans 'Update' %}</button>
                 </form>
             </div>
         </div>
-        </div>
     </div>
-
+</div>
 {% endblock %}
-
 {% block customJS %}
-  <script>
+    <script>
     function calculateTotals() {
       const table = document.getElementById('estimate-table');
       const rows = table.getElementsByTagName('tbody')[0].rows;
@@ -293,6 +368,5 @@
         // Set the form action with the query parameter
       form.action = "{% url 'estimate_mark_as' request.dealer.slug estimate.pk %}?mark=" + action;
     }
-  </script>
-
-{% endblock %}
\ No newline at end of file
+    </script>
+{% endblock %}
diff --git a/templates/sales/estimates/estimate_form-copy.html b/templates/sales/estimates/estimate_form-copy.html
index 8c67ca98..85591c9c 100644
--- a/templates/sales/estimates/estimate_form-copy.html
+++ b/templates/sales/estimates/estimate_form-copy.html
@@ -1,9 +1,9 @@
 {% extends "base.html" %}
 {% load crispy_forms_filters %}
 {% load i18n static %}
-
-{% block title %}{{ _("Create Quotation") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Create Quotation") }}
+{% endblock title %}
 {% block customCSS %}
     <style>
         .disabled{
@@ -15,69 +15,96 @@
 {% block content %}
     <div class="row mt-4">
         {% if not items %}
-            <div class="alert alert-outline-warning d-flex align-items-center" role="alert">
+            <div class="alert alert-outline-warning d-flex align-items-center"
+                 role="alert">
                 <i class="fa-solid fa-circle-info fs-6"></i>
-                <p class="mb-0 flex-1">{{ _("Please add at least one car before creating a quotation.") }}<a class="ms-3 text-body-primary fs-9" href="{% url 'car_add' request.dealer.slug %}"> {{ _("Add Car") }} </a></p>
-                <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
+                <p class="mb-0 flex-1">
+                    {{ _("Please add at least one car before creating a quotation.") }}<a class="ms-3 text-body-primary fs-9"
+   href="{% url 'car_add' request.dealer.slug %}">{{ _("Add Car") }}</a>
+                </p>
+                <button class="btn-close"
+                        type="button"
+                        data-bs-dismiss="alert"
+                        aria-label="Close"></button>
             </div>
         {% endif %}
         {% if not customer_count %}
-            <div class="alert alert-outline-warning d-flex align-items-center" role="alert">
+            <div class="alert alert-outline-warning d-flex align-items-center"
+                 role="alert">
                 <i class="fa-solid fa-circle-info fs-6"></i>&nbsp;&nbsp;
-                <p class="mb-0 flex-1"> {{ _("Please add at least one customer before creating a quotation.") }}<a class="ms-3 text-body-primary fs-9" href="{% url 'customer_create' request.dealer.slug %}"> {{ _("Add Customer") }} </a></p>
-                <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
+                <p class="mb-0 flex-1">
+                    {{ _("Please add at least one customer before creating a quotation.") }}<a class="ms-3 text-body-primary fs-9"
+   href="{% url 'customer_create' request.dealer.slug %}">{{ _("Add Customer") }}</a>
+                </p>
+                <button class="btn-close"
+                        type="button"
+                        data-bs-dismiss="alert"
+                        aria-label="Close"></button>
             </div>
         {% endif %}
-        <form id="mainForm" method="post" class="needs-validation {% if not items or not customer_count %}disabled{% endif %}">
-            <h3 class="text-center"><i class="fa-regular fa-file-lines"></i> {% trans "Create Quotation" %}</h3>
+        <form id="mainForm"
+              method="post"
+              class="needs-validation
+                     {% if not items or not customer_count %}disabled{% endif %}">
+            <h3 class="text-center">
+                <i class="fa-regular fa-file-lines"></i> {% trans "Create Quotation" %}
+            </h3>
             {% csrf_token %}
             <div class="row g-3 col-10">
                 {{ form|crispy }}
                 <div class="row mt-5">
                     <div id="formrow">
-                        <h3 class="text-start"><i class="fa-solid fa-car-side"></i> {{ _("Cars") }}</h3>
+                        <h3 class="text-start">
+                            <i class="fa-solid fa-car-side"></i> {{ _("Cars") }}
+                        </h3>
                         <div class="form-row row g-3 mb-3 mt-5">
                             <div class="mb-2 col-sm-4  col-md-6 col-lg-4">
                                 <select class="form-control item" name="item[]" required>
                                     {% for item in items %}
-                                        <option style="background-color: rgb({{ item.color }});" value="{{ item.hash }}">{{ item.make }} {{item.model}} {{item.serie}} {{item.trim}} {{item.color_name}} ({{item.hash_count}})</option>
+                                        <option style="background-color: rgb({{ item.color }})"
+                                                value="{{ item.hash }}">
+                                            {{ item.make }} {{ item.model }} {{ item.serie }} {{ item.trim }} {{ item.color_name }} ({{ item.hash_count }})
+                                        </option>
                                     {% empty %}
                                         <option disabled>{% trans "No Cars Found" %}</option>
                                     {% endfor %}
                                 </select>
                             </div>
                             <div class="mb-2 col-sm-4 col-md-3">
-                                <input class="form-control quantity" type="number" placeholder="Quantity" name="quantity[]" required>
+                                <input class="form-control quantity"
+                                       type="number"
+                                       placeholder="Quantity"
+                                       name="quantity[]"
+                                       required>
                             </div>
                             <div class="mb-2 col-sm-3  col-md-3">
-                                <button class="btn btn-sm btn-phoenix-danger removeBtn"><i class="fa-solid fa-trash me-1"></i> {{ _("Remove") }}</button>
+                                <button class="btn btn-sm btn-phoenix-danger removeBtn">
+                                    <i class="fa-solid fa-trash me-1"></i> {{ _("Remove") }}
+                                </button>
                             </div>
                         </div>
                     </div>
                     <div class="col-12">
-                        <button id="addMoreBtn" class="btn btn-sm btn-phoenix-primary"><i class="fa-solid fa-plus me-2"></i> {{ _("Add More")}}</button>
+                        <button id="addMoreBtn" class="btn btn-sm btn-phoenix-primary">
+                            <i class="fa-solid fa-plus me-2"></i> {{ _("Add More") }}
+                        </button>
                     </div>
-
                 </div>
             </div>
 
       
             <div class="d-flex justify-content-center">
-
-                <button class="btn btn-sm btn-phoenix-success me-2" type="submit"><i class="fa-solid fa-floppy-disk me-1"></i>
-                        <!--<i class="bi bi-save"></i> -->
+                <button class="btn btn-sm btn-phoenix-success me-2" type="submit">
+                    <i class="fa-solid fa-floppy-disk me-1"></i>
+                    <!--<i class="bi bi-save"></i> -->
                     {{ _("Save") }}
                 </button>
-
-                <a href="{{request.META.HTTP_REFERER}}" class="btn btn-sm btn-phoenix-danger"><i class="fa-solid fa-ban me-1"></i>{% trans "Cancel" %}</a>
+                <a href="{{ request.META.HTTP_REFERER }}"
+                   class="btn btn-sm btn-phoenix-danger"><i class="fa-solid fa-ban me-1"></i>{% trans "Cancel" %}</a>
             </div>
-
-
-
         </form>
     </div>
 {% endblock content %}
-
 {% block customJS %}
     <script>
         const Toast = Swal.mixin({
@@ -188,4 +215,4 @@
             }
         });
     </script>
-{% endblock customJS %}
\ No newline at end of file
+{% endblock customJS %}
diff --git a/templates/sales/estimates/estimate_form.html b/templates/sales/estimates/estimate_form.html
index 8c4b0e63..710e7cb1 100644
--- a/templates/sales/estimates/estimate_form.html
+++ b/templates/sales/estimates/estimate_form.html
@@ -1,21 +1,21 @@
 {% extends "base.html" %}
 {% load crispy_forms_filters %}
 {% load i18n static %}
-
-{% block title %}{{ _("Create Quotation") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Create Quotation") }}
+{% endblock title %}
 {% block customCSS %}
     <style>
         .disabled{
             opacity: 0.5;
             pointer-events: none;
         }
-             .color-box {
-                width: 20px;
-                height: 20px;
-                border-radius: 4px;
-                border: 1px solid #ccc;
-            }    /* Custom select styles */
+        .color-box {
+            width: 20px;
+            height: 20px;
+            border-radius: 4px;
+            border: 1px solid #ccc;
+        }    /* Custom select styles */
         .custom-select {
             position: relative;
             width: 100%;
@@ -121,26 +121,39 @@
     </style>
 {% endblock customCSS %}
 <!---->
- {% block content%}
-
-   <div class="row justify-content-center mt-5 mb-3">
+{% block content %}
+    <div class="row justify-content-center mt-5 mb-3">
         {% if not items %}
-            <div class="alert alert-outline-warning d-flex align-items-center" role="alert">
+            <div class="alert alert-outline-warning d-flex align-items-center"
+                 role="alert">
                 <i class="fa-solid fa-circle-info fs-6"></i>
-                <p class="mb-0 flex-1">{{ _("Please add at least one car before creating a quotation.") }}<a class="ms-3 text-body-primary fs-9" href="{% url 'car_add' request.dealer.slug %}"> {{ _("Add Car") }} </a></p>
-                <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
+                <p class="mb-0 flex-1">
+                    {{ _("Please add at least one car before creating a quotation.") }}<a class="ms-3 text-body-primary fs-9"
+   href="{% url 'car_add' request.dealer.slug %}">{{ _("Add Car") }}</a>
+                </p>
+                <button class="btn-close"
+                        type="button"
+                        data-bs-dismiss="alert"
+                        aria-label="Close"></button>
             </div>
         {% endif %}
         {% if not customer_count %}
-            <div class="alert alert-outline-warning d-flex align-items-center" role="alert">
+            <div class="alert alert-outline-warning d-flex align-items-center"
+                 role="alert">
                 <i class="fa-solid fa-circle-info fs-6"></i>&nbsp;&nbsp;
-                <p class="mb-0 flex-1"> {{ _("Please add at least one customer before creating a quotation.") }}<a class="ms-3 text-body-primary fs-9" href="{% url 'customer_create' request.dealer.slug %}"> {{ _("Add Customer") }} </a></p>
-                <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
+                <p class="mb-0 flex-1">
+                    {{ _("Please add at least one customer before creating a quotation.") }}<a class="ms-3 text-body-primary fs-9"
+   href="{% url 'customer_create' request.dealer.slug %}">{{ _("Add Customer") }}</a>
+                </p>
+                <button class="btn-close"
+                        type="button"
+                        data-bs-dismiss="alert"
+                        aria-label="Close"></button>
             </div>
         {% endif %}
-       <div class="col-lg-8 col-md-10">
-         <div class="card shadow-sm border-0 rounded-3">
-            <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
+        <div class="col-lg-8 col-md-10">
+            <div class="card shadow-sm border-0 rounded-3">
+                <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
                     <h3 class="mb-0 fs-4 text-center text-white">
                      {% trans "Create Quotation" %}<i class="fa-regular fa-file-lines me-2"></i> 
                    </h3>
@@ -204,16 +217,16 @@
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const Toast = Swal.mixin({
-            toast: true,
-            position: "top-end",
-            showConfirmButton: false,
-            timer: 2000,
-            timerProgressBar: false,
-            didOpen: (toast) => {
-                toast.onmouseenter = Swal.stopTimer;
-                toast.onmouseleave = Swal.resumeTimer;
-            }
-        });
+                toast: true,
+                position: "top-end",
+                showConfirmButton: false,
+                timer: 2000,
+                timerProgressBar: false,
+                didOpen: (toast) => {
+                    toast.onmouseenter = Swal.stopTimer;
+                    toast.onmouseleave = Swal.resumeTimer;
+                }
+            });
             function notify(tag,msg){Toast.fire({icon: tag,titleText: msg});}
 
             const customSelects = document.querySelectorAll('.custom-select');
@@ -293,64 +306,64 @@
                 alert(`Selected value: ${formData.get('car')}`);
             });*/
 
-     document.getElementById('mainForm').addEventListener('submit', async function(e) {
-            e.preventDefault();
+            document.getElementById('mainForm').addEventListener('submit', async function(e) {
+                e.preventDefault();
 
-            const titleInput = document.querySelector('[name="title"]');
-            if (titleInput.value.length < 5) {
-                notify("error", "Customer Estimate Title must be at least 5 characters long.");
-                return; // Stop form submission
-            }
+                const titleInput = document.querySelector('[name="title"]');
+                if (titleInput.value.length < 5) {
+                    notify("error", "Customer Estimate Title must be at least 5 characters long.");
+                    return; // Stop form submission
+                }
 
         // Collect all form data
-            const formData = {
-                csrfmiddlewaretoken: document.querySelector('[name=csrfmiddlewaretoken]').value,
-                title: document.querySelector('[name=title]').value,
-                customer: document.querySelector('[name=customer]').value,
-                item: [],
-                quantity: [1],
-                opportunity_id: "{{opportunity_id}}"
-            };
+                const formData = {
+                    csrfmiddlewaretoken: document.querySelector('[name=csrfmiddlewaretoken]').value,
+                    title: document.querySelector('[name=title]').value,
+                    customer: document.querySelector('[name=customer]').value,
+                    item: [],
+                    quantity: [1],
+                    opportunity_id: "{{opportunity_id}}"
+                };
 
 
         // Collect multi-value fields (e.g., item[], quantity[])
-            document.querySelectorAll('[name="item"]').forEach(input => {
-                formData.item.push(input.value);
-            });
-
-            console.log(formData);
-
-            try {
-            // Send data to the server using fetch
-                const response = await fetch("{% url 'estimate_create' request.dealer.slug %}", {
-                    method: 'POST',
-                    headers: {
-                        'X-CSRFToken': formData.csrfmiddlewaretoken,
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(formData)
+                document.querySelectorAll('[name="item"]').forEach(input => {
+                    formData.item.push(input.value);
                 });
 
+                console.log(formData);
+
+                try {
+            // Send data to the server using fetch
+                    const response = await fetch("{% url 'estimate_create' request.dealer.slug %}", {
+                        method: 'POST',
+                        headers: {
+                            'X-CSRFToken': formData.csrfmiddlewaretoken,
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(formData)
+                    });
+
             // Parse the JSON response
-                const data = await response.json();
+                    const data = await response.json();
 
             // Handle the response
-                if (data.status === "error") {
-                    notify("error", data.message); // Display an error message
-                } else if (data.status === "success") {
-                    notify("success","Estimate created successfully");
-                    setTimeout(() => {
-                        window.location.assign(data.url); // Redirect to the provided URL
-                    }, 1000);
-                } else {
-                    notify("error","Unexpected response from the server");
+                    if (data.status === "error") {
+                        notify("error", data.message); // Display an error message
+                    } else if (data.status === "success") {
+                        notify("success","Estimate created successfully");
+                        setTimeout(() => {
+                            window.location.assign(data.url); // Redirect to the provided URL
+                        }, 1000);
+                    } else {
+                        notify("error","Unexpected response from the server");
+                    }
+                } catch (error) {
+
+                    notify("error", error);
                 }
-            } catch (error) {
+            });
 
-                notify("error", error);
-            }
         });
-
-});
     </script>
-{% endblock customJS %}
\ No newline at end of file
+{% endblock customJS %}
diff --git a/templates/sales/estimates/estimate_list.html b/templates/sales/estimates/estimate_list.html
index 6bdeb04c..0629019e 100644
--- a/templates/sales/estimates/estimate_list.html
+++ b/templates/sales/estimates/estimate_list.html
@@ -1,24 +1,22 @@
 {% extends "base.html" %}
 {% load i18n static %}
-
-{% block title %}{{ _("Quotations") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Quotations") }}
+{% endblock title %}
 {% block content %}
     <div class="row g-3 mt-4 mb-4">
-        
         <div class="row g-3 justify-content-between mb-4">
-        <div class="col-auto">
-          <div class="d-md-flex justify-content-between">
-             <h2 class="mb-3"> {% trans "Quotations" %}<i class="fa-regular fa-file-lines text-primary ms-2"></i></h2>
-          </div>
+            <div class="col-auto">
+                <div class="d-md-flex justify-content-between">
+                    <h2 class="mb-3">
+                        {% trans "Quotations" %}<i class="fa-regular fa-file-lines text-primary ms-2"></i>
+                    </h2>
+                </div>
+            </div>
+            <div class="col-auto">
+                <div class="d-flex">{% include 'partials/search_box.html' %}</div>
+            </div>
         </div>
-        <div class="col-auto">
-          <div class="d-flex">
-            {% include 'partials/search_box.html' %}
-          </div>
-        </div>
-      </div>
-
         <div class="table-responsive px-1 scrollbar">
             <table class="table align-items-center table-flush">
                 <thead>
@@ -73,10 +71,8 @@
         </div>
         {% if page_obj.paginator.num_pages > 1 %}
             <div class="d-flex justify-content-end mt-3">
-                <div class="d-flex">
-                    {% include 'partials/pagination.html'%}
-                </div>
+                <div class="d-flex">{% include 'partials/pagination.html' %}</div>
             </div>
         {% endif %}
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/sales/estimates/estimate_preview.html b/templates/sales/estimates/estimate_preview.html
index 6c2840b6..810bf665 100644
--- a/templates/sales/estimates/estimate_preview.html
+++ b/templates/sales/estimates/estimate_preview.html
@@ -5,13 +5,20 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Invoice</title>
-    <!-- CSS -->
-        <link href="{% static 'css/theme.min.css' %}" type="text/css" rel="stylesheet" id="style-default">
-        <link href="{% static 'css/user.min.css' %}" type="text/css" rel="stylesheet" id="user-style-default">
+        <!-- CSS -->
+        <link href="{% static 'css/theme.min.css' %}"
+              type="text/css"
+              rel="stylesheet"
+              id="style-default">
+        <link href="{% static 'css/user.min.css' %}"
+              type="text/css"
+              rel="stylesheet"
+              id="user-style-default">
         <link href="{% static 'css/custom.css' %}" type="text/css" rel="stylesheet">
-    <!-- Google Fonts - Roboto -->
-        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <!-- Custom CSS -->
+        <!-- Google Fonts - Roboto -->
+        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+              rel="stylesheet">
+        <!-- Custom CSS -->
         <style>
             body {
                 font-family: 'Roboto', sans-serif;
@@ -75,88 +82,132 @@
         </style>
     </head>
     <body>
-
         <div class="row p-2">
             <div class="col-2">
-                <button class="btn btn-sm btn-phoenix-danger w-100" onclick="window.history.back()">الرجوع&nbsp;/&nbsp;Back</button>
+                <button class="btn btn-sm btn-phoenix-danger w-100"
+                        onclick="window.history.back()">الرجوع&nbsp;/&nbsp;Back</button>
             </div>
             <div class="col-2">
                 <button class="btn btn-sm btn-phoenix-primary w-100" id="download-pdf">تحميل&nbsp;/&nbsp;Download</button>
             </div>
             <div class="col-8"></div>
         </div>
-
         <div class="invoice-container" id="invoice-content">
             <div class="invoice-header">
-                <h5 class="fs-5"><span>Quotation</span>&nbsp;/&nbsp;<span>عرض سعر</span></h5>
+                <h5 class="fs-5">
+                    <span>Quotation</span>&nbsp;/&nbsp;<span>عرض سعر</span>
+                </h5>
             </div>
             <div class="invoice-details p-1">
                 <table class="table table-sm table-responsive border-gray-50">
                     <tr>
-                        <td>
-
-                        </td>
+                        <td></td>
                         <td></td>
                         <td>
                             <div class="qr-code">
                                 {% if dealer.logo %}
-                                    <img class="rounded-soft" src="{{ dealer.logo.url|default:'' }}" alt="Dealer Logo"/>
+                                    <img class="rounded-soft"
+                                         src="{{ dealer.logo.url|default:'' }}"
+                                         alt="Dealer Logo" />
                                 {% endif %}
                             </div>
                         </td>
                     </tr>
                     <tr>
-                        <td class="ps-1"><strong>Customer Name</strong></td>
-                        <td class="text-center">{{ dealer.arabic_name }}<br>{{ dealer.name }}</td>
-                        <td class="text-end"><strong>{{ dealer.arabic_name }}</strong></td>
+                        <td class="ps-1">
+                            <strong>Customer Name</strong>
+                        </td>
+                        <td class="text-center">
+                            {{ dealer.arabic_name }}
+                            <br>
+                            {{ dealer.name }}
+                        </td>
+                        <td class="text-end">
+                            <strong>{{ dealer.arabic_name }}</strong>
+                        </td>
                     </tr>
                     <tr>
-                        <td class="ps-1"><strong>Address</strong></td>
+                        <td class="ps-1">
+                            <strong>Address</strong>
+                        </td>
                         <td class="text-center">{{ dealer.address }}</td>
-                        <td class="text-end"> <strong>العنوان</strong></td>
+                        <td class="text-end">
+                            <strong>العنوان</strong>
+                        </td>
                     </tr>
                     <tr>
-                        <td class="ps-1"><strong>Phone</strong></td>
+                        <td class="ps-1">
+                            <strong>Phone</strong>
+                        </td>
                         <td class="text-center">{{ dealer.phone_number }}</td>
-                        <td class="text-end"><strong>جوال</strong></td>
+                        <td class="text-end">
+                            <strong>جوال</strong>
+                        </td>
                     </tr>
                     <tr>
-                        <td><strong>VAT Number</strong></td>
+                        <td>
+                            <strong>VAT Number</strong>
+                        </td>
                         <td>{{ dealer.vrn }}</td>
-                        <td class="text-end"><strong>الرقم الضريبي</strong></td>
+                        <td class="text-end">
+                            <strong>الرقم الضريبي</strong>
+                        </td>
                     </tr>
                 </table>
-
                 <table class="table table-sm table-bordered border-gray-50">
                     <tr>
-                        <td class="ps-1"><strong>Quotation&nbsp;Number</strong></td>
+                        <td class="ps-1">
+                            <strong>Quotation&nbsp;Number</strong>
+                        </td>
                         <td class="text-center">{{ estimate.estimate_number }}</td>
-                        <td class="text-end p-1"><strong>رقم عرض السعر</strong></td>
+                        <td class="text-end p-1">
+                            <strong>رقم عرض السعر</strong>
+                        </td>
                     </tr>
                     <tr>
-                        <td class="ps-1"><strong>Date</strong></td>
+                        <td class="ps-1">
+                            <strong>Date</strong>
+                        </td>
                         <td class="text-center">{{ estimate.date_approved| date:"Y/m/d" }}</td>
-                        <td class="text-end p-1"><strong>التاريخ</strong></td>
+                        <td class="text-end p-1">
+                            <strong>التاريخ</strong>
+                        </td>
                     </tr>
                     <tr>
-                        <td class="ps-1"><strong>Customer</strong></td>
+                        <td class="ps-1">
+                            <strong>Customer</strong>
+                        </td>
                         <td class="text-center">{{ estimate.customer.customer_name }}</td>
-                        <td class="text-end p-1"><strong>العميل</strong></td>
+                        <td class="text-end p-1">
+                            <strong>العميل</strong>
+                        </td>
                     </tr>
                     <tr>
-                        <td class="ps-1"><strong>VAT&nbsp;ID</strong></td>
+                        <td class="ps-1">
+                            <strong>VAT&nbsp;ID</strong>
+                        </td>
                         <td class="text-center">{{ estimate.customer.vrn|default:"-" }}</td>
-                        <td class="text-end p-1"><strong>الرقم الضريبي</strong></td>
+                        <td class="text-end p-1">
+                            <strong>الرقم الضريبي</strong>
+                        </td>
                     </tr>
                     <tr>
-                        <td class="ps-1"><strong>Email</strong></td>
-                        <td class="text-center">{{ estimate.customer.email |default:"N/A" }} </td>
-                        <td class="text-end p-1"><strong>البريد الإلكتروني</strong></td>
+                        <td class="ps-1">
+                            <strong>Email</strong>
+                        </td>
+                        <td class="text-center">{{ estimate.customer.email |default:"N/A" }}</td>
+                        <td class="text-end p-1">
+                            <strong>البريد الإلكتروني</strong>
+                        </td>
                     </tr>
                     <tr>
-                        <td class="ps-1"><strong>Terms</strong></td>
+                        <td class="ps-1">
+                            <strong>Terms</strong>
+                        </td>
                         <td class="text-center">{{ estimate.get_terms_display }}</td>
-                        <td class="text-end p-1"><strong>طريقة&nbsp;الدفع</strong></td>
+                        <td class="text-end p-1">
+                            <strong>طريقة&nbsp;الدفع</strong>
+                        </td>
                     </tr>
                 </table>
             </div>
@@ -168,14 +219,30 @@
                 <table class="table table-sm table-bordered m-1">
                     <thead>
                         <tr>
-                            <th class="text-wrap text-center align-content-center"><span class="fs-10">Make</span> / <span class="fs-10">الصانع</span></th>
-                            <th class="text-wrap text-center align-content-center"><span class="fs-10">Model</span> / <span class="fs-10">الموديل</span></th>
-                            <th class="text-wrap text-center align-content-center"><span class="fs-10">Trim</span> / <span class="fs-10">الفئة</span></th>
-                            <th class="text-wrap text-center align-content-center"><span class="fs-10">Year</span> / <span class="fs-10">السنة</span></th>
-                            <th class="text-wrap text-center align-content-center"><span class="fs-10">VIN</span> / <span class="fs-10">الهيكل</span></th>
-                            <th class="text-wrap text-center align-content-center"><span class="fs-10">Quantity</span> / <span class="fs-10">الكمية</span></th>
-                            <th class="text-wrap text-center align-content-center"><span class="fs-10">Unit Price</span> / <span class="fs-10">سعر الوحدة</span></th>
-                            <th class="text-wrap text-center align-content-center"><span class="fs-10">Including VAT</span> / <span class="fs-10">شامل الضريبة</span></th>
+                            <th class="text-wrap text-center align-content-center">
+                                <span class="fs-10">Make</span> / <span class="fs-10">الصانع</span>
+                            </th>
+                            <th class="text-wrap text-center align-content-center">
+                                <span class="fs-10">Model</span> / <span class="fs-10">الموديل</span>
+                            </th>
+                            <th class="text-wrap text-center align-content-center">
+                                <span class="fs-10">Trim</span> / <span class="fs-10">الفئة</span>
+                            </th>
+                            <th class="text-wrap text-center align-content-center">
+                                <span class="fs-10">Year</span> / <span class="fs-10">السنة</span>
+                            </th>
+                            <th class="text-wrap text-center align-content-center">
+                                <span class="fs-10">VIN</span> / <span class="fs-10">الهيكل</span>
+                            </th>
+                            <th class="text-wrap text-center align-content-center">
+                                <span class="fs-10">Quantity</span> / <span class="fs-10">الكمية</span>
+                            </th>
+                            <th class="text-wrap text-center align-content-center">
+                                <span class="fs-10">Unit Price</span> / <span class="fs-10">سعر الوحدة</span>
+                            </th>
+                            <th class="text-wrap text-center align-content-center">
+                                <span class="fs-10">Including VAT</span> / <span class="fs-10">شامل الضريبة</span>
+                            </th>
                         </tr>
                     </thead>
                     <tbody>
@@ -198,12 +265,10 @@
                     </tbody>
                 </table>
             </div>
-
             <div class="d-flex justify-content-between">
                 <span class="fs-9 fw-thin">Additional&nbsp;Services</span>
                 <span class="fs-9 fw-thin">الخدمات&nbsp;الإضافية</span>
             </div>
-
             {% if data.additionals %}
                 <div class="invoice-table p-1">
                     <table class="table table-sm table-bordered m-1">
@@ -211,7 +276,9 @@
                             <tr>
                                 <th class="text-center fs-10 align-content-center">Type&nbsp;/&nbsp;النوع</th>
                                 <th class="text-center fs-10 align-content-center">Price&nbsp;/&nbsp;القيمة</th>
-                                <th class="text-center fs-10 align-content-center"><span class="fs-10">Including VAT</span> / <span class="fs-10">شامل الضريبة</span></th>
+                                <th class="text-center fs-10 align-content-center">
+                                    <span class="fs-10">Including VAT</span> / <span class="fs-10">شامل الضريبة</span>
+                                </th>
                             </tr>
                         </thead>
                         <tbody>
@@ -230,30 +297,53 @@
                 <div class="table-responsive">
                     <table class="table table-sm table-responsive">
                         <tr>
-                            <td class="text-start ps-1"><strong class="fs-9">VAT</strong></td>
-                            <td class="text-center"><span class="fs-9">{{ data.total_vat_amount|floatformat }} <span class="icon-saudi_riyal"></span></span></td>
-                            <td class="text-end"><strong class="fs-9">ضريبة&nbsp;القيمة&nbsp;المضافة</strong></td>
+                            <td class="text-start ps-1">
+                                <strong class="fs-9">VAT</strong>
+                            </td>
+                            <td class="text-center">
+                                <span class="fs-9">{{ data.total_vat_amount|floatformat }} <span class="icon-saudi_riyal"></span></span>
+                            </td>
+                            <td class="text-end">
+                                <strong class="fs-9">ضريبة&nbsp;القيمة&nbsp;المضافة</strong>
+                            </td>
                         </tr>
                         <tr>
-                            <td class="text-start ps-1"><strong class="fs-9">Total</strong></td>
-                            <td class="text-center"><span class="fs-9">{{ data.grand_total|floatformat }}&nbsp;<span class="icon-saudi_riyal"></span></span></td>
-                            <td class="text-end"><strong class="fs-9">الإجمالي</strong></td>
+                            <td class="text-start ps-1">
+                                <strong class="fs-9">Total</strong>
+                            </td>
+                            <td class="text-center">
+                                <span class="fs-9">{{ data.grand_total|floatformat }}&nbsp;<span class="icon-saudi_riyal"></span></span>
+                            </td>
+                            <td class="text-end">
+                                <strong class="fs-9">الإجمالي</strong>
+                            </td>
                         </tr>
                         <tr>
-                            <td class="text-end" colspan="3"><span class="fs-9 fw-bold">كتابةً:&nbsp;</span><span class="fs-9">{{ data.grand_total|num_to_words }}&nbsp;<span class="icon-saudi_riyal"></span></span></td>
+                            <td class="text-end" colspan="3">
+                                <span class="fs-9 fw-bold">كتابةً:&nbsp;</span><span class="fs-9">{{ data.grand_total|num_to_words }}&nbsp;<span class="icon-saudi_riyal"></span></span>
+                            </td>
                         </tr>
                     </table>
                 </div>
             </div>
-            <br><br>
-            <br><br>
-            <br><br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
             <div class="footer-note">
                 <div class="logo-img text-center">
-                    <img src="{% static 'images/logos/logo-d-pdf.png' %}" alt="Logo"/>
-                    <p class="fs-11 fw-bold"><span>Haikal</span>&nbsp;|&nbsp;<span>هيكل</span></p>
+                    <img src="{% static 'images/logos/logo-d-pdf.png' %}" alt="Logo" />
+                    <p class="fs-11 fw-bold">
+                        <span>Haikal</span>&nbsp;|&nbsp;<span>هيكل</span>
+                    </p>
                 </div>
-                <p class="fs-11"><span class="fw-thin">Powered&nbsp;by&nbsp;</span><a class="text-decoration-none" href="https://tenhal.sa" style="color: #112e40;"><span>TENHAL</span>&nbsp;|&nbsp;<span>تنحل</span></a></p>
+                <p class="fs-11">
+                    <span class="fw-thin">Powered&nbsp;by&nbsp;</span><a class="text-decoration-none"
+   href="https://tenhal.sa"
+   style="color: #112e40"><span>TENHAL</span>&nbsp;|&nbsp;<span>تنحل</span></a>
+                </p>
             </div>
         </div>
         <script src="{% static 'vendors/bootstrap/bootstrap.min.js' %}"></script>
@@ -270,4 +360,4 @@
             });
         </script>
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/sales/estimates/estimate_send.html b/templates/sales/estimates/estimate_send.html
index 0898d3ce..3ae803c3 100644
--- a/templates/sales/estimates/estimate_send.html
+++ b/templates/sales/estimates/estimate_send.html
@@ -1,34 +1,46 @@
 {% extends "base.html" %}
 {% load crispy_forms_filters %}
 {% load i18n static %}
-
-{% block title %}{{ _("Quotation") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Quotation") }}
+{% endblock title %}
 {% block content %}
-  <div class="card email-content">
-    <h5 class="card-header">Send Estimate</h5>
-    <div class="card-body">
-      <form class="d-flex flex-column h-100" action="{% url 'send_email' estimate.pk %}" method="post">
-        {% csrf_token %}
-        <div class="row g-3 mb-2">
-          <div class="col-12">
-            <input class="form-control" name="to" type="text" placeholder="To" value="{{estimate.customer.email}}" />
-          </div>
-          <div class="col-12">
-            <input class="form-control" name="subject" type="text" placeholder="Subject" value="Quotation {{estimate.estimate_number}}" />
-          </div>
+    <div class="card email-content">
+        <h5 class="card-header">Send Estimate</h5>
+        <div class="card-body">
+            <form class="d-flex flex-column h-100"
+                  action="{% url 'send_email' estimate.pk %}"
+                  method="post">
+                {% csrf_token %}
+                <div class="row g-3 mb-2">
+                    <div class="col-12">
+                        <input class="form-control"
+                               name="to"
+                               type="text"
+                               placeholder="To"
+                               value="{{ estimate.customer.email }}" />
+                    </div>
+                    <div class="col-12">
+                        <input class="form-control"
+                               name="subject"
+                               type="text"
+                               placeholder="Subject"
+                               value="Quotation {{ estimate.estimate_number }}" />
+                    </div>
+                </div>
+                <div class="mb-3 flex-1">
+                    <textarea class="form-control" name="message" rows="15" placeholder="Message">{{message}}</textarea>
+                </div>
+                <div class="d-flex justify-content-between align-items-center">
+                    <div class="d-flex">
+                        <a href="{% url 'estimate_detail' request.dealer.slug estimate.pk %}"
+                           class="btn btn-sm btn-phoenix-secondary text-body fs-10 me-1">{{ _("Cancel") }}</a>
+                        <button class="btn btn-sm btn-phoenix-primary fs-10" type="submit">
+                            {{ _("Send") }}<span class="fa-solid fa-paper-plane ms-1"></span>
+                        </button>
+                    </div>
+                </div>
+            </form>
         </div>
-        <div class="mb-3 flex-1">
-          <textarea class="form-control" name="message" rows="15" placeholder="Message">{{message}}</textarea>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <a href="{% url 'estimate_detail' request.dealer.slug estimate.pk %}" class="btn btn-sm btn-phoenix-secondary text-body fs-10 me-1">{{ _("Cancel") }}</a>
-            <button class="btn btn-sm btn-phoenix-primary fs-10" type="submit">{{ _("Send") }}<span class="fa-solid fa-paper-plane ms-1"></span></button>
-          </div>
-        </div>
-      </form>
     </div>
-  </div>
-
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
diff --git a/templates/sales/estimates/payment_request_detail.html b/templates/sales/estimates/payment_request_detail.html
index 47e7432b..bbf0c319 100644
--- a/templates/sales/estimates/payment_request_detail.html
+++ b/templates/sales/estimates/payment_request_detail.html
@@ -89,17 +89,12 @@
         </style>
     </head>
     <body>
-
         <div class="container">
             <h1>عرض سعر السيارة - Tenhal</h1>
-
             <p>المكرمين/</p>
             <input type="text">
-
             <p>السلام عليكم ورحمة الله وبركاته،</p>
-
             <p>بناءً على طلبكم، نورد لكم عرض سعر للسيارة وهو يعد إيجابًا منا بالبيع:</p>
-
             <table>
                 <thead>
                     <tr>
@@ -122,14 +117,22 @@
                     {% endfor %}
                 </tbody>
             </table>
-
-            <p>حمولة المركبة )<input type="text">) سنة الصنع (<input type="text">) (جديد / مستعملة) كلم/ميل</p>
-
-            <p>مستوى اقتصاد الوقود )<input type="text">) رقم الهيكل (في حال كانت السيارة مستعملة فقط) (<input type="text">)</p>
-
+            <p>
+                حمولة المركبة )
+                <input type="text">
+                ) سنة الصنع (
+                <input type="text">
+                ) (جديد / مستعملة) كلم/ميل
+            </p>
+            <p>
+                مستوى اقتصاد الوقود )
+                <input type="text">
+                ) رقم الهيكل (في حال كانت السيارة مستعملة فقط) (
+                <input type="text">
+                )
+            </p>
             <p>مواصفات أخرى:</p>
             <input type="text">
-
             <table>
                 <thead>
                     <tr>
@@ -149,35 +152,49 @@
                     </tr>
                 </tbody>
             </table>
-
-            <p>الإجمالي مع الضريبة كتابةً: <span class="highlight">{{ estimate.get_invoiced_amount.invoice_amount_paid__sum|num_to_words }} <span class="icon-saudi_riyal"></span> فقط لا غير</span></p>
-
-            <p>مدة الضمان: <input type="text"> شهراً، أو <input type="text"> كيلومتراً / ميلاً (أيهما يأتي أولاً)</p>
-
+            <p>
+                الإجمالي مع الضريبة كتابةً: <span class="highlight">{{ estimate.get_invoiced_amount.invoice_amount_paid__sum|num_to_words }} <span class="icon-saudi_riyal"></span> فقط لا غير</span>
+            </p>
+            <p>
+                مدة الضمان:
+                <input type="text">
+                شهراً، أو
+                <input type="text">
+                كيلومتراً / ميلاً (أيهما يأتي أولاً)
+            </p>
             <p>ملاحظات:</p>
             <input type="text">
-
             <p>اسم الشركة / الوكالة:</p>
             <input type="text">
-
             <p>العنوان: المدينة - شارع:</p>
             <input type="text">
-
             <p>ص.ب / رمز بريدي / الهاتف:</p>
             <input type="text">
-
             <div class="signature-section">
                 <p>الموظف المسؤول:</p>
-                <input type="text" style="width: 60%; display: inline-block; border-bottom: 1px solid #333;">
+                <input type="text"
+                       style="width: 60%;
+                              display: inline-block;
+                              border-bottom: 1px solid #333">
                 <p>التوقيع:</p>
-                <input type="text" style="width: 60%; display: inline-block; border-bottom: 1px solid #333;">
-                <p>التاريخ: <input type="text" style="width: 50px;"> / <input type="text" style="width: 50px;"> / <input type="text" style="width: 50px;"></p>
+                <input type="text"
+                       style="width: 60%;
+                              display: inline-block;
+                              border-bottom: 1px solid #333">
+                <p>
+                    التاريخ:
+                    <input type="text" style="width: 50px;">
+                    /
+                    <input type="text" style="width: 50px;">
+                    /
+                    <input type="text" style="width: 50px;">
+                </p>
             </div>
-
             <div class="footer">
-                <p>Powered by <a href="https://tenhal.sa">Tenhal | تنحل</a></p>
+                <p>
+                    Powered by <a href="https://tenhal.sa">Tenhal | تنحل</a>
+                </p>
             </div>
         </div>
-
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/sales/estimates/sale_order_form.html b/templates/sales/estimates/sale_order_form.html
index 89b2fdf0..c540551b 100644
--- a/templates/sales/estimates/sale_order_form.html
+++ b/templates/sales/estimates/sale_order_form.html
@@ -2,9 +2,8 @@
 {% load i18n static %}
 {% load crispy_forms_filters %}
 {% block title %}
-  {% trans 'Sale Order' %}
+    {% trans 'Sale Order' %}
 {% endblock %}
-
 {% block content %}
   <link rel="stylesheet" href="{% static 'flags/sprite.css' %}" />
   <div class="row">
@@ -144,61 +143,64 @@
                           <a class="d-flex align-items-center text-body-highlight" href="#!">
                     {% comment %} <div class="avatar avatar-m me-3 status-online">
                         <img class="rounded-circle" src="" alt="" />
-                    </div> {% endcomment %}
-                            <h6 class="mb-0 text-body-highlight fw-bold">{{car.vin}}</h6>
-                          </a>
-                        </td>
-                        <td class="description align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2 pe-6">{{car.make}}</td>
-                        <td class="create_by align-middle white-space-nowrap fw-semibold text-body-highlight">{{car.model}}</td>
-                        <td class="create_by align-middle white-space-nowrap fw-semibold text-body-highlight">{{car.year}}</td>
-                        <td class="last_activity align-middle text-center py-2">
-                          <div class="d-flex align-items-center flex-1">
-                            <span class="fw-bold fs-9 text-body">{{car.total}} <span class="icon-saudi_riyal"></span></span>
-                          </div>
-                        </td>
-                      </tr>
-                    {% endfor %}
-                  </tbody>
-                </table>
-              </div>
+                                                        </div> {% endcomment %}
+                                                        <h6 class="mb-0 text-body-highlight fw-bold">{{ car.vin }}</h6>
+                                                    </a>
+                                                </td>
+                                                <td class="description align-middle white-space-nowrap text-start fw-bold text-body-tertiary py-2 pe-6">
+                                                    {{ car.make }}
+                                                </td>
+                                                <td class="create_by align-middle white-space-nowrap fw-semibold text-body-highlight">{{ car.model }}</td>
+                                                <td class="create_by align-middle white-space-nowrap fw-semibold text-body-highlight">{{ car.year }}</td>
+                                                <td class="last_activity align-middle text-center py-2">
+                                                    <div class="d-flex align-items-center flex-1">
+                                                        <span class="fw-bold fs-9 text-body">{{ car.total }} <span class="icon-saudi_riyal"></span></span>
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        {% endfor %}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row mx-0">
+                        <form method="post" class="form row g-3 needs-validation" novalidate>
+                            {% csrf_token %}
+                            <div class="col-md-6">
+                                <label for="id_estimate" class="form-label">{% trans "Quotation" %}</label>
+                                <input type="text"
+                                       class="form-control form-control-sm"
+                                       id="id_estimate"
+                                       name="estimate"
+                                       value="{{ form.estimate.value|default_if_none:'' }}"
+                                       readonly>
+                                <div class="invalid-feedback">{% trans "Please provide an estimate." %}</div>
+                            </div>
+                            <div class="col-md-6">
+                                <label for="id_payment_method" class="form-label">{% trans "Payment Method" %}</label>
+                                <select class="form-select form-select-sm"
+                                        id="id_payment_method"
+                                        name="payment_method"
+                                        required>
+                                    {% for value, label in form.payment_method.field.choices %}
+                                        <option value="{{ value }}"
+                                                {% if form.payment_method.value == value %}selected{% endif %}>{{ label }}</option>
+                                    {% endfor %}
+                                </select>
+                                <div class="invalid-feedback">{% trans "Please select a payment method." %}</div>
+                            </div>
+                            <div class="col-12">
+                                <label for="id_comments" class="form-label">{% trans "Comments" %}</label>
+                                <textarea class="form-control" id="id_comments" name="comments" rows="3">{{ form.comments.value|default_if_none:'' }}</textarea>
+                            </div>
+                            <div class="col-12">
+                                <button class="btn btn-phoenix-primary" type="submit">{% trans 'Save' %}</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
             </div>
-          </div>
-          <div class="row mx-0">
-            <form method="post" class="form row g-3 needs-validation" novalidate>
-              {% csrf_token %}
-
-              <div class="col-md-6">
-                <label for="id_estimate" class="form-label">{% trans "Quotation" %}</label>
-                <input type="text" class="form-control form-control-sm" id="id_estimate" name="estimate" value="{{ form.estimate.value|default_if_none:'' }}" readonly>
-                <div class="invalid-feedback">{% trans "Please provide an estimate." %}</div>
-              </div>
-
-              <div class="col-md-6">
-                <label for="id_payment_method" class="form-label">{% trans "Payment Method" %}</label>
-                <select class="form-select form-select-sm" id="id_payment_method" name="payment_method" required>
-                  {% for value, label in form.payment_method.field.choices %}
-                    <option value="{{ value }}" {% if form.payment_method.value == value %}selected{% endif %}>
-                      {{ label }}
-                    </option>
-                  {% endfor %}
-                </select>
-                <div class="invalid-feedback">{% trans "Please select a payment method." %}</div>
-              </div>
-
-              <div class="col-12">
-                <label for="id_comments" class="form-label">{% trans "Comments" %}</label>
-                <textarea class="form-control" id="id_comments" name="comments" rows="3">{{ form.comments.value|default_if_none:'' }}</textarea>
-              </div>
-
-              <div class="col-12">
-                <button class="btn btn-phoenix-primary" type="submit">{% trans 'Save' %}</button>
-              </div>
-            </form>
-          </div>
         </div>
-      </div>
-
-
     </div>
-  </div>
 {% endblock %}
diff --git a/templates/sales/estimates/sale_order_form1.html b/templates/sales/estimates/sale_order_form1.html
index f9445265..ed292417 100644
--- a/templates/sales/estimates/sale_order_form1.html
+++ b/templates/sales/estimates/sale_order_form1.html
@@ -4,27 +4,26 @@
 {% block title %}
     {% trans 'Sale Order' %}
 {% endblock %}
-
 {% block customCSS %}
     <style>
         /* Custom styling */
         .form-section {
-           
+
             border-radius: 0.5rem;
             padding: 1.5rem;
             margin-bottom: 1.5rem;
         }
 
         .form-section-header {
-            
+
             padding-bottom: 0.75rem;
             margin-bottom: 1.5rem;
-          
+
         }
 
         .required-field::after {
             content: " *";
-           
+
         }
 
         .search-select {
@@ -40,7 +39,7 @@
             right: 1rem;
             top: 50%;
             transform: translateY(-50%);
-           
+
         }
 
         .currency-input {
@@ -52,7 +51,7 @@
             left: 1rem;
             top: 50%;
             transform: translateY(-50%);
-            
+
         }
 
         .currency-input input {
@@ -60,18 +59,16 @@
         }
 
         .form-actions {
-           
+
             padding: 1rem;
             border-radius: 0.5rem;
             position:static;
             bottom: 1rem;
-          
+
         }
     </style>
 {% endblock customCSS %}
-
 {% block content %}
-
     <div class="row justify-content-center mb-4">
         <div class="col-lg-10">
             <div class="card shadow">
@@ -80,40 +77,27 @@
                         <h2 class="h4 mb-0">
                             <i class="fas fa-file-invoice me-2"></i> New Sale Order
                         </h2>
-                        <div>
-
-                        </div>
+                        <div></div>
                     </div>
                 </div>
-
                 <div class="card-body">
                     <form id="saleOrderForm" method="post">
                         {% csrf_token %}
-                            <!-- Basic Information Section -->
+                        <!-- Basic Information Section -->
                         <div class="form-section">
                             <h4 class="form-section-header">
                                 <i class="fas fa-info-circle me-2"></i> Basic Information
                             </h4>
-
                             <div class="row g-3">
-                                    <!-- Estimate -->
+                                <!-- Estimate -->
+                                <div class="col-md-6">{{ form.estimate|as_crispy_field }}</div>
+                                <!-- Opportunity -->
+                                <div class="col-md-6">{{ form.opportunity|as_crispy_field }}</div>
+                                <!-- Customer -->
                                 <div class="col-md-6">
-                                    {{form.estimate|as_crispy_field}}
+                                    {% if form.customer %}{{ form.customer|as_crispy_field }}{% endif %}
                                 </div>
-
-                                    <!-- Opportunity -->
-                                <div class="col-md-6">
-                                    {{form.opportunity|as_crispy_field}}
-                                </div>
-
-                                    <!-- Customer -->
-                                <div class="col-md-6">
-                                    {% if form.customer %}
-                                        {{form.customer|as_crispy_field}}
-                                    {% endif %}
-                                </div>
-
-                                    <!-- Vehicle -->
+                                <!-- Vehicle -->
                                 <div class="col-md-6">
                                     <label for="car" class="form-label required-field">Vehicles</label>
                                     <ul class="list-group">
@@ -127,56 +111,45 @@
                                         {% endfor %}
                                     </ul>
                                 </div>
-
                             </div>
-
-                                    <!-- Status -->
-                            <div class="col-md-6">
-                                {{form.status|as_crispy_field}}
-                            </div>
-
+                            <!-- Status -->
+                            <div class="col-md-6">{{ form.status|as_crispy_field }}</div>
                         </div>
                     </div>
-
-                            <!-- Financial Details Section -->
+                    <!-- Financial Details Section -->
                     <div class="form-section">
                         <h4 class="form-section-header">
                             <i class="fas fa-money-bill-wave me-2"></i> Financial Details
                         </h4>
                     </div>
-
-                            <!-- Delivery Information Section -->
+                    <!-- Delivery Information Section -->
                     <div class="form-section">
                         <h4 class="form-section-header">
                             <i class="fas fa-truck me-2"></i> Delivery Information
                         </h4>
-
                         <div class="row g-3">
-                                    <!-- Expected Delivery Date -->
-                            <div class="col-md-6">
-                                {{form.order_date|as_crispy_field}}
-                            </div>
-                            <div class="col-md-6">
-                                {{form.expected_delivery_date|as_crispy_field}}
-                            </div>
-
+                            <!-- Expected Delivery Date -->
+                            <div class="col-md-6">{{ form.order_date|as_crispy_field }}</div>
+                            <div class="col-md-6">{{ form.expected_delivery_date|as_crispy_field }}</div>
                         </div>
-
-                                <!-- Comments -->
+                        <!-- Comments -->
                         <div class="col-12">
                             <label for="comments" class="form-label">Comments</label>
-                            <textarea class="form-control" id="comments" rows="3" placeholder="Enter any additional comments..."></textarea>
+                            <textarea class="form-control"
+                                      id="comments"
+                                      rows="3"
+                                      placeholder="Enter any additional comments..."></textarea>
                         </div>
                     </div>
-
-                            <!-- Form Actions -->
+                    <!-- Form Actions -->
                     <div class="form-actions mt-4">
                         <div class="d-flex justify-content-between">
-                            <a href="{% url 'estimate_detail' request.dealer.slug estimate.pk %}" type="button" class="btn btn-phoenix-secondary">
+                            <a href="{% url 'estimate_detail' request.dealer.slug estimate.pk %}"
+                               type="button"
+                               class="btn btn-phoenix-secondary">
                                 <i class="fas fa-times me-2"></i> Cancel
                             </a>
                             <div>
-
                                 <button type="submit" class="btn btn-phoenix-primary">
                                     <i class="fas fa-check-circle me-2"></i> Submit Order
                                 </button>
@@ -186,9 +159,7 @@
                 </form>
             </div>
         </div>
-
     </div>
-
 {% endblock %}
 {% block customJS %}
     <!-- Custom JavaScript -->
@@ -260,4 +231,4 @@
             });
         });*/
     </script>
-{% endblock customJS %}
\ No newline at end of file
+{% endblock customJS %}
diff --git a/templates/sales/estimates/sale_order_preview.html b/templates/sales/estimates/sale_order_preview.html
index 17508e1d..14bd5d79 100644
--- a/templates/sales/estimates/sale_order_preview.html
+++ b/templates/sales/estimates/sale_order_preview.html
@@ -5,11 +5,13 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Sale Order</title>
-    <!-- Bootstrap CSS -->
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <!-- Google Fonts - Roboto -->
-        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <!-- Custom CSS -->
+        <!-- Bootstrap CSS -->
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+              rel="stylesheet">
+        <!-- Google Fonts - Roboto -->
+        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+              rel="stylesheet">
+        <!-- Custom CSS -->
         <style>
             body {
                 background-color: #f8f9fa;
@@ -114,16 +116,29 @@
             }
         </style>
         {% if LANGUAGE_CODE == 'en' %}
-            <link href="{% static 'css/theme.min.css' %}" type="text/css" rel="stylesheet" id="style-default">
-            <link href="{% static 'css/user.min.css' %}" type="text/css" rel="stylesheet" id="user-style-default">
+            <link href="{% static 'css/theme.min.css' %}"
+                  type="text/css"
+                  rel="stylesheet"
+                  id="style-default">
+            <link href="{% static 'css/user.min.css' %}"
+                  type="text/css"
+                  rel="stylesheet"
+                  id="user-style-default">
         {% else %}
-            <link href="{% static 'css/theme-rtl.min.css' %}" type="text/css" rel="stylesheet" id="style-rtl">
-            <link href="{% static 'css/user-rtl.min.css' %}" type="text/css" rel="stylesheet" id="user-style-rtl">
+            <link href="{% static 'css/theme-rtl.min.css' %}"
+                  type="text/css"
+                  rel="stylesheet"
+                  id="style-rtl">
+            <link href="{% static 'css/user-rtl.min.css' %}"
+                  type="text/css"
+                  rel="stylesheet"
+                  id="user-style-rtl">
         {% endif %}
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+        <link rel="stylesheet"
+              href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     </head>
     <body>
-        {% if estimate.is_completed  %}
+        {% if estimate.is_completed %}
             <main class="main" id="top">
                 <div class="px-3">
                     <div class="row min-vh-100 flex-center p-5">
@@ -135,42 +150,52 @@
                         </div>
                     </div>
                 </div>
-
-
-
             </main>
-        {% else%}
+        {% else %}
             <div class="row p-2">
                 <div class="col-2">
-                    <button class="btn btn-sm btn-phoenix-danger w-100" onclick="window.history.back()">الرجوع&nbsp;/&nbsp;Back</button>
+                    <button class="btn btn-sm btn-phoenix-danger w-100"
+                            onclick="window.history.back()">الرجوع&nbsp;/&nbsp;Back</button>
                 </div>
                 <div class="col-2">
                     <button class="btn btn-sm btn-phoenix-primary w-100" id="download-pdf">تحميل&nbsp;/&nbsp;Download</button>
                 </div>
                 <div class="col-8"></div>
             </div>
-
             <div class="estimate-row" id="estimate-content">
-        <!-- Header -->
+                <!-- Header -->
                 <div class="estimate-header">
-                    <svg width="101" height="24" viewBox="0 0 101 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <!-- SVG Paths -->
+                    <svg width="101"
+                         height="24"
+                         viewBox="0 0 101 24"
+                         fill="none"
+                         xmlns="http://www.w3.org/2000/svg">
+                        <!-- SVG Paths -->
                     </svg>
-                    <h1 style="margin-top: 10px;"><b>{% trans "Sale Order" %}</b></h1>
+                    <h1 style="margin-top: 10px;">
+                        <b>{% trans "Sale Order" %}</b>
+                    </h1>
                     <p>{% trans "Thank you for choosing us. We appreciate your business" %}</p>
                 </div>
-
-        <!-- Details -->
+                <!-- Details -->
                 <div class="estimate-details">
-                    <p><strong>{{ _("Estimate Number") }} :</strong> <span class="highlight">#{{estimate.estimate_number}}</span></p>
-                    <p><strong>{{ _("Date") }} :</strong> {{estimate.date_in_review}}</p>
-                    <p><strong>{{ _("Customer") }} :</strong> {{estimate.customer.customer_name}}</p>
-                    <p><strong>{{ _("Email") }} :</strong> {{estimate.customer.email}}</p>
-                    <p><strong>{{ _("Terms") }} :</strong> {{estimate.terms|title}}</p>
+                    <p>
+                        <strong>{{ _("Estimate Number") }} :</strong> <span class="highlight">#{{ estimate.estimate_number }}</span>
+                    </p>
+                    <p>
+                        <strong>{{ _("Date") }} :</strong> {{ estimate.date_in_review }}
+                    </p>
+                    <p>
+                        <strong>{{ _("Customer") }} :</strong> {{ estimate.customer.customer_name }}
+                    </p>
+                    <p>
+                        <strong>{{ _("Email") }} :</strong> {{ estimate.customer.email }}
+                    </p>
+                    <p>
+                        <strong>{{ _("Terms") }} :</strong> {{ estimate.terms|title }}
+                    </p>
                 </div>
-
-
-        <!-- Items Table -->
+                <!-- Items Table -->
                 <div class="estimate-table">
                     <table class="table table-bordered">
                         <thead>
@@ -199,33 +224,38 @@
                         </tbody>
                     </table>
                 </div>
-
-        <!-- Additional Charges (VAT and Services) -->
+                <!-- Additional Charges (VAT and Services) -->
                 <div class="additional-charges">
-                    <p><strong>{{ _("VAT") }} ({{vat}}%):</strong> <span class="highlight">{{data.vat}} <span class="icon-saudi_riyal"></span></span></p>
-                    <p><strong>{{ _("Additional Services") }} :</strong>
+                    <p>
+                        <strong>{{ _("VAT") }} ({{ vat }}%):</strong> <span class="highlight">{{ data.vat }} <span class="icon-saudi_riyal"></span></span>
+                    </p>
+                    <p>
+                        <strong>{{ _("Additional Services") }} :</strong>
                         <br>
                         {% for service in data.additional_services %}
-                            <span class="highlight">{{service.name}} - {{service.price}} <span class="icon-saudi_riyal"></span></span><br>
+                            <span class="highlight">{{ service.name }} - {{ service.price }} <span class="icon-saudi_riyal"></span></span>
+                            <br>
                         {% endfor %}
                     </p>
                 </div>
-
-        <!-- Total -->
+                <!-- Total -->
                 <div class="estimate-total">
-                    <p><strong>{{ _("Total Amount") }} :</strong> <span class="highlight">{{data.grand_total}} <span class="icon-saudi_riyal"></span></span></p>
+                    <p>
+                        <strong>{{ _("Total Amount") }} :</strong> <span class="highlight">{{ data.grand_total }} <span class="icon-saudi_riyal"></span></span>
+                    </p>
                 </div>
-
-        <!-- Footer Note -->
+                <!-- Footer Note -->
                 <div class="footer-note">
-                    <p>{% trans "If you have any questions, feel free to contact us at" %} <a href="mailto:support@example.com">support@example.com</a>.</p>
+                    <p>
+                        {% trans "If you have any questions, feel free to contact us at" %} <a href="mailto:support@example.com">support@example.com</a>.
+                    </p>
                     <p>{% trans "Thank you for your business" %}</p>
                 </div>
             </div>
         {% endif %}
-    <!-- Bootstrap JS (Optional) -->
+        <!-- Bootstrap JS (Optional) -->
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    <!-- jsPDF Library -->
+        <!-- jsPDF Library -->
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
         <script>
@@ -252,4 +282,4 @@
 
         </script>
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/sales/invoices/approved_invoice_update.html b/templates/sales/invoices/approved_invoice_update.html
index 4211b879..78e1fb08 100644
--- a/templates/sales/invoices/approved_invoice_update.html
+++ b/templates/sales/invoices/approved_invoice_update.html
@@ -1,9 +1,7 @@
 {% extends "base.html" %}
 {% load i18n %}
 {% load crispy_forms_filters %}
-
 {% block content %}
-
     <div class="row">
         <div class="row justify-content-center">
             <div class="col-md-8">
@@ -20,5 +18,4 @@
             </div>
         </div>
     </div>
-
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
diff --git a/templates/sales/invoices/draft_invoice_update.html b/templates/sales/invoices/draft_invoice_update.html
index 4211b879..78e1fb08 100644
--- a/templates/sales/invoices/draft_invoice_update.html
+++ b/templates/sales/invoices/draft_invoice_update.html
@@ -1,9 +1,7 @@
 {% extends "base.html" %}
 {% load i18n %}
 {% load crispy_forms_filters %}
-
 {% block content %}
-
     <div class="row">
         <div class="row justify-content-center">
             <div class="col-md-8">
@@ -20,5 +18,4 @@
             </div>
         </div>
     </div>
-
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
diff --git a/templates/sales/invoices/invoice_create.html b/templates/sales/invoices/invoice_create.html
index 3af9110c..6d5bb2a1 100644
--- a/templates/sales/invoices/invoice_create.html
+++ b/templates/sales/invoices/invoice_create.html
@@ -2,31 +2,14 @@
 {% load crispy_forms_filters %}
 {% load static %}
 {% load i18n %}
-{% block title %}{{ _("Invoice") }}{% endblock title %}
+{% block title %}
+    {{ _("Invoice") }}
+{% endblock title %}
 {% block content %}
-    {% comment %} <div class="row paid">
-        <div class="row justify-content-center">
-            <div class="col-md-8">
-                <div class="card">
-                    <div class="card-header"><i class="fa-solid fa-receipt"></i> {{ _("Add Invoice") }}</div>
-                    <div class="card-body">
-                        <form method="post" action="">
-                            {% csrf_token %}
-                            {{ form|crispy }}
-                            <button type="submit" class="btn btn-phoenix-primary"><i class="fa-solid fa-floppy-disk"></i> {% trans 'Save' %}</button>
-                        </form>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div> {% endcomment %}
-
-    <!---->
     <div class="row paid justify-content-center mt-5 mb-3">
-
-       <div class="col-lg-8 col-md-10">
-         <div class="card shadow-sm border-0 rounded-3">
-            <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
+        <div class="col-lg-8 col-md-10">
+            <div class="card shadow-sm border-0 rounded-3">
+                <div class="card-header bg-gray-200  py-3 border-0 rounded-top-3">
                     <h3 class="mb-0 fs-4 text-center text-white">
                        {{ _("Add Invoice") }}<i class="fa-solid fa-receipt ms-2 text-primary"></i>
                    </h3>
@@ -43,18 +26,10 @@
                          <button class="btn btn-lg btn-phoenix-success md-me-2" type="submit"><i class="fa-solid fa-floppy-disk me-1"></i>{{ _("Save") }}</button>
                          <a href="{% url 'invoice_list' request.dealer.slug %}" class="btn btn-lg btn-phoenix-danger"><i class="fa-solid fa-ban me-1"></i>{% trans "Cancel" %}</a>
                         </div>
-                       
-                </form>
-
-               
-
+                    </form>
+                </div>
             </div>
         </div>
-
-       </div>
-
-   </div>
-
+    </div>
     <!---->
 {% endblock content %}
-
diff --git a/templates/sales/invoices/invoice_detail.html b/templates/sales/invoices/invoice_detail.html
index 5f107f8d..0808dbd8 100644
--- a/templates/sales/invoices/invoice_detail.html
+++ b/templates/sales/invoices/invoice_detail.html
@@ -1,284 +1,380 @@
 {% extends "base.html" %}
 {% load i18n %}
 {% load tenhal_tag %}
-
-{% block title %}{{ _("View Invoice") }}{% endblock title %}
+{% block title %}
+    {{ _("View Invoice") }}
+{% endblock title %}
 {% block customCSS %}
-  <style>
+    <style>
     .disabled{
       opacity: 0.5;
       pointer-events: none;
     }
-  </style>
+    </style>
 {% endblock customCSS %}
 {% block content %}
-  <div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-sm">
-      <div class="modal-content">
-        <div class="modal-header bg-primary">
-          <h5 class="modal-title text-light" id="confirmModalLabel">{% trans 'Confirm' %}</h5>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body">
-          {% trans 'Are you sure ?' %}
-          <div class="modal-footer">
-            <button type="button"
-                    class="btn btn-sm btn-phoenix-danger"
-                    data-bs-dismiss="modal"><i class="fa-solid fa-ban"></i> {% trans 'No' %}
-            </button>
-            <form id="confirmForm" method="POST" action="{% url 'invoice_mark_as' request.dealer.slug invoice.pk %}?mark=accept" class="d-inline">
-              {% csrf_token %}
-              <button type="submit" class="btn btn-phoenix-success btn-sm"><i class="fa-solid fa-circle-check"></i> {% trans "Yes" %}</button>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-     <!-- ============================================-->
-  <div class="modal fade" id="mark_as_paid_Modal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-sm">
-      <div class="modal-content">
-        <div class="modal-header bg-primary">
-          <h5 class="modal-title text-light" id="confirmModalLabel">{% trans 'Confirm' %}</h5>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body">
-          {% trans 'Are you sure ?' %}
-          <div class="modal-footer">
-            <button type="button"
-                    class="btn btn-sm btn-phoenix-danger"
-                    data-bs-dismiss="modal">
-              <i class="fa-solid fa-ban"></i> {% trans 'No' %}
-            </button>
-            <form id="confirmForm" method="POST" action="{% url 'payment_mark_as_paid' request.dealer.slug invoice.pk %}" class="d-inline">
-              {% csrf_token %}
-              <button type="submit" class="btn btn-phoenix-success btn-sm"><i class="fa-solid fa-circle-check"></i> {% trans "Yes" %}</button>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-     <!-- ============================================-->
-      <!-- <section> begin ============================-->
-  <section class="pt-5 pb-9 bg-body-emphasis dark__bg-gray-1200 border-top">
-    <div class="row-small mt-3 mx-3">
-      <div class="d-flex justify-content-between align-items-end mb-4 mx-3">
-        <div class="d-flex flex-row align-items-center gap-2">
-          <h2 class="mb-0"><i class="fa-solid fa-receipt"></i> {% trans 'Invoice' %}</h2>
-          <div class="fs-9 text-body-secondary fw-semibold mt-2">
-            {% if invoice.invoice_status == 'draft' %}
-              <span class="badge text-bg-warning">{% trans "Draft" %}</span>
-            {% elif invoice.invoice_status == 'in_review' %}
-              <span class="badge text-bg-info">{% trans "In Review" %}</span>
-            {% elif invoice.invoice_status == 'approved' %}
-              <span class="badge text-bg-info">{% trans "Approved" %}</span>
-            {% elif invoice.invoice_status == 'declined' %}
-              <span class="badge text-bg-danger">{% trans "Declined" %}</span>
-            {% elif invoice.invoice_status == 'paid' %}
-              <span class="badge text-bg-success">{% trans "Paid" %}</span>
-            {% endif %}
-          </div>
-        </div>
-        <div class="d-flex align-items-center gap-2">
-         {% if perms.inventory.add_payment%}
-          {% if invoice.invoice_status == 'in_review' %}
-            <button id="accept_invoice" class="btn btn-phoenix-secondary" data-bs-toggle="modal" data-bs-target="#confirmModal"><span class="d-none d-sm-inline-block"><i class="fa-solid fa-check-double"></i> {% trans 'Accept' %}</span></button>
-          {% endif %}
-          {% if invoice.invoice_status == 'approved' %}
-             {% if perms.inventory.add_payment%}
-            <a href="{% url 'payment_create' request.dealer.slug invoice.pk %}" class="btn btn-phoenix-success"><span class="d-none d-sm-inline-block"><i class="fa-solid fa-money-bill"></i> {% trans 'Record Payment' %}</span></a>
-              {% endif %}
-          {% endif %}
-          {% if not invoice.is_paid %}
-             {% if perms.inventory.change_payment%}
-            <button {% if invoice.is_review or invoice.amount_paid|to_int < invoice.amount_due|to_int %}disabled{% endif %} id="mark_invoice_as_paid" class="btn btn-phoenix-secondary" data-bs-toggle="modal" data-bs-target="#mark_as_paid_Modal"><span class="d-none d-sm-inline-block"><span class="icon-saudi_riyal"></span> {% trans 'Mark as Paid' %}</span></button>
-              {% endif %}
-          {% endif %}
-        {% endif %}
-          <a href="{% url 'invoice_preview' request.dealer.slug invoice.pk %}" class="btn btn-phoenix-primary"><span class="d-none d-sm-inline-block"><i class="fa-regular fa-eye"></i> {% trans 'Preview' %}</span></a>
-
-        </div>
-      </div>
-      {{invoice.amount_owned}}
-
-            <!-- ============================================-->
-      <div class="card mb-5  {% if invoice.is_review %}disabled{% endif %}">
-        <div class="card-body">
-          <div class="row g-4 g-xl-1 g-xxl-3 justify-content-between">
-            <div class="col-sm-auto">
-              <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center">
-                <div class="d-flex bg-success-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0" style="width:32px; height:32px"><span class="text-success-dark icon-saudi_riyal" style="width:24px; height:24px;font-weight: bold"></span></div>
-                <div>
-                  <p class="fw-bold mb-1">{% trans 'Paid Amount' %}</p>
-                  <h4 class="fw-bolder text-nowrap {% if invoice.is_paid %}text-success{% endif %}">{{invoice.amount_paid}}&nbsp;<span class="icon-saudi_riyal"></span></h4>
-                  <h6 class="fw-bolder text-nowrap">{{ _("Owned") }} <span class="fw-semibold text-nowrap text-success">{{invoice.get_amount_open|floatformat}}&nbsp;<span class="icon-saudi_riyal"></span></span></h6>
-                  <div class="progress" style="height:17px">
-                    <div class="progress-bar fw-semibold bg-{% if invoice.get_progress_percent < 100 %}secondary{% else %}success{% endif %} rounded-2" role="progressbar" style="width: {{invoice.get_progress_percent}}%" aria-valuenow="{{invoice.get_progress_percent}}" aria-valuemin="0" aria-valuemax="100">{{invoice.get_progress_percent}}%</div>
-                  </div>
+    <div class="modal fade"
+         id="confirmModal"
+         tabindex="-1"
+         aria-labelledby="confirmModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog modal-sm">
+            <div class="modal-content">
+                <div class="modal-header bg-primary">
+                    <h5 class="modal-title text-light" id="confirmModalLabel">{% trans 'Confirm' %}</h5>
+                    <button type="button"
+                            class="btn-close"
+                            data-bs-dismiss="modal"
+                            aria-label="Close"></button>
                 </div>
-              </div>
-            </div>
-            {% if 'net' in invoice.terms %}
-              <div class="col-sm-auto">
-                <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center border-start-sm ps-sm-5 border-translucent">
-                  <div class="d-flex bg-primary-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0" style="width:32px; height:32px"><span class="text-primary-dark" data-feather="layout" style="width:24px; height:24px"></span></div>
-                  <div>
-                    <p class="fw-bold mb-1"></p>
-                    <div class="fs-9 text-body-secondary fw-semibold mb-0 d-sm-block d-inline-flex d-md-flex flex-xl-column ">
-                      <table>
-                        <tr>
-                          <td>{% trans 'Terms' %}:</td>
-                          <td><span class="badge rounded bg-success">{{invoice.terms}}</span></td>
-                        </tr>
-                        <tr>
-                          <td>{% trans 'Date Due' %}:</td>
-                          <td><span class="badge rounded bg-success">{{invoice.date_due}}</span></td>
-                        </tr>
-                        <tr>
-                          <td>{% trans 'Due in Days' %}:</td>
-                          <td>
-                            <span class="badge rounded bg-success">{{invoice.due_in_days}}</span>
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>{% trans 'Is Past Due' %}:</td>
-                          <td>
-                            {% if invoice.is_past_due %}
-                              <span class="badge rounded bg-danger">{% trans 'Yes' %}</span>
-                            {% else %}
-                              <span class="badge rounded bg-success">{% trans 'No' %}</span>
-                            {% endif %}
-                          </td>
-                        </tr>
-                      </table>
-
+                <div class="modal-body">
+                    {% trans 'Are you sure ?' %}
+                    <div class="modal-footer">
+                        <button type="button"
+                                class="btn btn-sm btn-phoenix-danger"
+                                data-bs-dismiss="modal">
+                            <i class="fa-solid fa-ban"></i> {% trans 'No' %}
+                        </button>
+                        <form id="confirmForm"
+                              method="POST"
+                              action="{% url 'invoice_mark_as' request.dealer.slug invoice.pk %}?mark=accept"
+                              class="d-inline">
+                            {% csrf_token %}
+                            <button type="submit" class="btn btn-phoenix-success btn-sm">
+                                <i class="fa-solid fa-circle-check"></i> {% trans "Yes" %}
+                            </button>
+                        </form>
                     </div>
-                  </div>
                 </div>
-              </div>
-            {% endif %}
-            <div class="col-sm-auto">
-              <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center border-start-sm ps-sm-5 border-translucent">
-                <div class="d-flex bg-primary-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0" style="width:32px; height:32px"><span class="text-primary-dark" data-feather="layout" style="width:24px; height:24px"></span></div>
-                <div>
-                  <p class="fw-bold mb-1">{% trans 'Due Amount' %}</p>
-                  {% if invoice.is_paid %}
-                    <s><h4 class="fw-bolder text-nowrap">{{invoice.amount_due|floatformat}}&nbsp;<span class="icon-saudi_riyal"></span></h4></s>
-                  {% else %}
-                    <h4 class="fw-bolder text-nowrap">{{invoice.amount_due|floatformat}}&nbsp;<span class="icon-saudi_riyal"></span></h4>
-                  {% endif %}
-                </div>
-              </div>
             </div>
-          </div>
         </div>
-      </div>
-             <!-- <section> begin ============================-->
-      <div class="container bg-body dark__bg-gray-1100 p-4 mb-4 rounded-2 text-body-tertiary {% if invoice.is_review %}disabled{% endif %}">
-        <!---->
-
-        <div class="row">
-          <div class="col mb-2">
-            <h6 class="mb-0 me-3"><i class="fa-solid fa-hashtag"></i> {% trans "Invoice Number" %} :</h6>
-            <p class="fs-9 text-body-secondary fw-semibold mb-0">{{invoice.invoice_number}}</p>
-          </div>
-          <div class="col mb-2">
-            <h6 class="me-3"><i class="fa-solid fa-calendar-days"></i> {% trans "Invoice Date" %} :</h6>
-            <p class="fs-9 text-body-secondary fw-semibold mb-0">{{invoice.created}}</p>
-          </div>
-          <div class="col mb-2">
-            <h6 class="mb-2 me-3"><i class="fa-solid fa-user"></i> {% trans "Customer Name" %} :</h6>
-            <p class="fs-9 text-body-secondary fw-semibold mb-0">{{invoice.customer.customer_name}}</p>
-          </div>
-          <div class="col mb-2">
-            <h6 class="mb-2"><i class="fa-solid fa-envelope"></i> {% trans "Customer Email" %} :</h6>
-            <p class="fs-9 text-body-secondary fw-semibold mb-0">{{invoice.customer.email}}</p>
-          </div>
-          <div class="col">
-            <h6 class="mb-2"><i class="fa-solid fa-list"></i> {% trans "Invoice Status" %} :</h6>
-            <div class="fs-9 text-body-secondary fw-semibold mb-0">
-              {% if invoice.invoice_status == 'draft' %}
-                <span class="badge text-bg-warning">{% trans "Draft" %}</span>
-              {% elif invoice.invoice_status == 'in_review' %}
-                <span class="badge text-bg-info">{% trans "In Review" %}</span>
-              {% elif invoice.invoice_status == 'approved' %}
-                <span class="badge text-bg-info">{% trans "Approved" %}</span>
-              {% elif invoice.invoice_status == 'declined' %}
-                <span class="badge text-bg-danger">{% trans "Declined" %}</span>
-              {% elif invoice.invoice_status == 'paid' %}
-                <span class="badge text-bg-success">{% trans "Paid" %}</span>
-              {% endif %}
-            </div>
-
-          </div>
-        </div>
-      </div>
-      <div class="px-0 {% if invoice.is_review %}disabled{% endif %}">
-        <div class="table-responsive scrollbar">
-          <table id="invoice-table" class="table fs-9 text-body mb-0">
-            <thead class="bg-body-secondary">
-              <tr>
-                <th scope="col" style="width: 24px;"><i class="fa-solid fa-hashtag"></i> </th>
-                <th scope="col" style="min-width: 100px;">{% trans "Make" %}</th>
-                <th scope="col" style="min-width: 100px;">{% trans "Model" %}</th>
-                <th scope="col" style="min-width: 100px;">{% trans "Year" %}</th>
-                <th scope="col" style="min-width: 100px;">{% trans "VIN" %}</th>
-                <th scope="col" style="min-width: 100px;">{% trans "Quantity" %}</th>
-                <th scope="col" style="min-width: 100px;">{% trans "Unit Price" %}</th>
-                <th scope="col" style="min-width: 100px;">{% trans "Total" %}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {% for item in data.cars %}
-                <tr>
-                  <td class="align-middle"></td>
-                  <td class="align-middle">{{item.make}}</td>
-                  <td class="align-middle">{{item.model}}</td>
-                  <td class="align-middle">{{item.year}}</td>
-                  <td class="align-middle">{{item.vin}}</td>
-                  <td class="align-middle">{{item.quantity|floatformat:-1}}</td>
-                  <td class="align-middle ps-5">{{item.total}}</td>
-                  <td class="align-middle text-body-tertiary fw-semibold">{{item.total}}</td>
-                </tr>
-              {% endfor %}
-              <tr class="bg-body-secondary total-sum">
-                <td class="align-middle ps-4 fw-semibold text-body-highlight" colspan="7">{% trans "Discount Amount" %}</td>
-                <td class="align-middle text-start fw-semibold">
-                  <span id="grand-total">- {{data.total_discount|floatformat}}<span class="icon-saudi_riyal"></span></span>
-                </td>
-              </tr>
-              <tr class="bg-body-secondary total-sum">
-                <td class="align-middle ps-4 fw-semibold text-body-highlight" colspan="7">{% trans "VAT" %} ({{data.vat}}%)</td>
-                <td class="align-middle text-start fw-semibold">
-                  <span id="grand-total">+ {{data.total_vat_amount|floatformat}}<span class="icon-saudi_riyal"></span></span>
-                </td>
-              </tr>
-              <tr class="bg-body-secondary total-sum">
-                <td class="align-middle ps-4 fw-semibold text-body-highlight" colspan="7">{% trans "Additional Services" %}</td>
-                <td class="align-middle text-start fw-bold">
-                  {% for service in data.additionals %}
-                    <small><span class="fw-bold">+ {{service.name}} - {{service.price_|floatformat}}<span class="icon-saudi_riyal"></span></span></small><br>
-                  {% endfor %}
-                </td>
-              </tr>
-              <tr class="bg-body-secondary total-sum">
-                <td class="align-middle ps-4 fw-bolder text-body-highlight" colspan="7">{% trans "Grand Total" %}</td>
-                <td class="align-middle text-start fw-bolder">
-                  <span id="grand-total">{{data.grand_total|floatformat}}<span class="icon-saudi_riyal"></span></span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
     </div>
-  </section>
+    <!-- ============================================-->
+    <div class="modal fade"
+         id="mark_as_paid_Modal"
+         tabindex="-1"
+         aria-labelledby="confirmModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog modal-sm">
+            <div class="modal-content">
+                <div class="modal-header bg-primary">
+                    <h5 class="modal-title text-light" id="confirmModalLabel">{% trans 'Confirm' %}</h5>
+                    <button type="button"
+                            class="btn-close"
+                            data-bs-dismiss="modal"
+                            aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    {% trans 'Are you sure ?' %}
+                    <div class="modal-footer">
+                        <button type="button"
+                                class="btn btn-sm btn-phoenix-danger"
+                                data-bs-dismiss="modal">
+                            <i class="fa-solid fa-ban"></i> {% trans 'No' %}
+                        </button>
+                        <form id="confirmForm"
+                              method="POST"
+                              action="{% url 'payment_mark_as_paid' request.dealer.slug invoice.pk %}"
+                              class="d-inline">
+                            {% csrf_token %}
+                            <button type="submit" class="btn btn-phoenix-success btn-sm">
+                                <i class="fa-solid fa-circle-check"></i> {% trans "Yes" %}
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- ============================================-->
+    <!-- <section> begin ============================-->
+    <section class="pt-5 pb-9 bg-body-emphasis dark__bg-gray-1200 border-top">
+        <div class="row-small mt-3 mx-3">
+            <div class="d-flex justify-content-between align-items-end mb-4 mx-3">
+                <div class="d-flex flex-row align-items-center gap-2">
+                    <h2 class="mb-0">
+                        <i class="fa-solid fa-receipt"></i> {% trans 'Invoice' %}
+                    </h2>
+                    <div class="fs-9 text-body-secondary fw-semibold mt-2">
+                        {% if invoice.invoice_status == 'draft' %}
+                            <span class="badge text-bg-warning">{% trans "Draft" %}</span>
+                        {% elif invoice.invoice_status == 'in_review' %}
+                            <span class="badge text-bg-info">{% trans "In Review" %}</span>
+                        {% elif invoice.invoice_status == 'approved' %}
+                            <span class="badge text-bg-info">{% trans "Approved" %}</span>
+                        {% elif invoice.invoice_status == 'declined' %}
+                            <span class="badge text-bg-danger">{% trans "Declined" %}</span>
+                        {% elif invoice.invoice_status == 'paid' %}
+                            <span class="badge text-bg-success">{% trans "Paid" %}</span>
+                        {% endif %}
+                    </div>
+                </div>
+                <div class="d-flex align-items-center gap-2">
+                    {% if perms.inventory.add_payment %}
+                        {% if invoice.invoice_status == 'in_review' %}
+                            <button id="accept_invoice"
+                                    class="btn btn-phoenix-secondary"
+                                    data-bs-toggle="modal"
+                                    data-bs-target="#confirmModal">
+                                <span class="d-none d-sm-inline-block"><i class="fa-solid fa-check-double"></i> {% trans 'Accept' %}</span>
+                            </button>
+                        {% endif %}
+                        {% if invoice.invoice_status == 'approved' %}
+                            {% if perms.inventory.add_payment %}
+                                <a href="{% url 'payment_create' request.dealer.slug invoice.pk %}"
+                                   class="btn btn-phoenix-success"><span class="d-none d-sm-inline-block"><i class="fa-solid fa-money-bill"></i> {% trans 'Record Payment' %}</span></a>
+                            {% endif %}
+                        {% endif %}
+                        {% if not invoice.is_paid %}
+                            {% if perms.inventory.change_payment %}
+                                <button {% if invoice.is_review or invoice.amount_paid|to_int < invoice.amount_due|to_int %}disabled{% endif %}
+                                        id="mark_invoice_as_paid"
+                                        class="btn btn-phoenix-secondary"
+                                        data-bs-toggle="modal"
+                                        data-bs-target="#mark_as_paid_Modal">
+                                    <span class="d-none d-sm-inline-block"><span class="icon-saudi_riyal"></span> {% trans 'Mark as Paid' %}</span>
+                                </button>
+                            {% endif %}
+                        {% endif %}
+                    {% endif %}
+                    <a href="{% url 'invoice_preview' request.dealer.slug invoice.pk %}"
+                       class="btn btn-phoenix-primary"><span class="d-none d-sm-inline-block"><i class="fa-regular fa-eye"></i> {% trans 'Preview' %}</span></a>
+                </div>
+            </div>
+            {{ invoice.amount_owned }}
+            <!-- ============================================-->
+            <div class="card mb-5  {% if invoice.is_review %}disabled{% endif %}">
+                <div class="card-body">
+                    <div class="row g-4 g-xl-1 g-xxl-3 justify-content-between">
+                        <div class="col-sm-auto">
+                            <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center">
+                                <div class="d-flex bg-success-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0"
+                                     style="width:32px;
+                                            height:32px">
+                                    <span class="text-success-dark icon-saudi_riyal"
+                                          style="width:24px;
+                                                 height:24px;
+                                                 font-weight: bold"></span>
+                                </div>
+                                <div>
+                                    <p class="fw-bold mb-1">{% trans 'Paid Amount' %}</p>
+                                    <h4 class="fw-bolder text-nowrap
+                                               {% if invoice.is_paid %}text-success{% endif %}">
+                                        {{ invoice.amount_paid }}&nbsp;<span class="icon-saudi_riyal"></span>
+                                    </h4>
+                                    <h6 class="fw-bolder text-nowrap">
+                                        {{ _("Owned") }} <span class="fw-semibold text-nowrap text-success">{{ invoice.get_amount_open|floatformat }}&nbsp;<span class="icon-saudi_riyal"></span></span>
+                                    </h6>
+                                    <div class="progress" style="height:17px">
+                                        <div class="progress-bar fw-semibold bg-
+                                                    {% if invoice.get_progress_percent < 100 %}
+                                                        secondary
+                                                    {% else %}
+                                                        success
+                                                    {% endif %}
+                                                    rounded-2"
+                                             role="progressbar"
+                                             style="width: {{ invoice.get_progress_percent }}%"
+                                             aria-valuenow="{{ invoice.get_progress_percent }}"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100">{{ invoice.get_progress_percent }}%</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        {% if 'net' in invoice.terms %}
+                            <div class="col-sm-auto">
+                                <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center border-start-sm ps-sm-5 border-translucent">
+                                    <div class="d-flex bg-primary-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0"
+                                         style="width:32px;
+                                                height:32px">
+                                        <span class="text-primary-dark"
+                                              data-feather="layout"
+                                              style="width:24px;
+                                                     height:24px"></span>
+                                    </div>
+                                    <div>
+                                        <p class="fw-bold mb-1"></p>
+                                        <div class="fs-9 text-body-secondary fw-semibold mb-0 d-sm-block d-inline-flex d-md-flex flex-xl-column">
+                                            <table>
+                                                <tr>
+                                                    <td>{% trans 'Terms' %}:</td>
+                                                    <td>
+                                                        <span class="badge rounded bg-success">{{ invoice.terms }}</span>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td>{% trans 'Date Due' %}:</td>
+                                                    <td>
+                                                        <span class="badge rounded bg-success">{{ invoice.date_due }}</span>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td>{% trans 'Due in Days' %}:</td>
+                                                    <td>
+                                                        <span class="badge rounded bg-success">{{ invoice.due_in_days }}</span>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td>{% trans 'Is Past Due' %}:</td>
+                                                    <td>
+                                                        {% if invoice.is_past_due %}
+                                                            <span class="badge rounded bg-danger">{% trans 'Yes' %}</span>
+                                                        {% else %}
+                                                            <span class="badge rounded bg-success">{% trans 'No' %}</span>
+                                                        {% endif %}
+                                                    </td>
+                                                </tr>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        {% endif %}
+                        <div class="col-sm-auto">
+                            <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center border-start-sm ps-sm-5 border-translucent">
+                                <div class="d-flex bg-primary-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0"
+                                     style="width:32px;
+                                            height:32px">
+                                    <span class="text-primary-dark"
+                                          data-feather="layout"
+                                          style="width:24px;
+                                                 height:24px"></span>
+                                </div>
+                                <div>
+                                    <p class="fw-bold mb-1">{% trans 'Due Amount' %}</p>
+                                    {% if invoice.is_paid %}
+                                        <s>
+                                            <h4 class="fw-bolder text-nowrap">
+                                                {{ invoice.amount_due|floatformat }}&nbsp;<span class="icon-saudi_riyal"></span>
+                                            </h4>
+                                        </s>
+                                    {% else %}
+                                        <h4 class="fw-bolder text-nowrap">
+                                            {{ invoice.amount_due|floatformat }}&nbsp;<span class="icon-saudi_riyal"></span>
+                                        </h4>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- <section> begin ============================-->
+            <div class="container bg-body dark__bg-gray-1100 p-4 mb-4 rounded-2 text-body-tertiary
+                        {% if invoice.is_review %}disabled{% endif %}">
+                <!---->
+                <div class="row">
+                    <div class="col mb-2">
+                        <h6 class="mb-0 me-3">
+                            <i class="fa-solid fa-hashtag"></i> {% trans "Invoice Number" %} :
+                        </h6>
+                        <p class="fs-9 text-body-secondary fw-semibold mb-0">{{ invoice.invoice_number }}</p>
+                    </div>
+                    <div class="col mb-2">
+                        <h6 class="me-3">
+                            <i class="fa-solid fa-calendar-days"></i> {% trans "Invoice Date" %} :
+                        </h6>
+                        <p class="fs-9 text-body-secondary fw-semibold mb-0">{{ invoice.created }}</p>
+                    </div>
+                    <div class="col mb-2">
+                        <h6 class="mb-2 me-3">
+                            <i class="fa-solid fa-user"></i> {% trans "Customer Name" %} :
+                        </h6>
+                        <p class="fs-9 text-body-secondary fw-semibold mb-0">{{ invoice.customer.customer_name }}</p>
+                    </div>
+                    <div class="col mb-2">
+                        <h6 class="mb-2">
+                            <i class="fa-solid fa-envelope"></i> {% trans "Customer Email" %} :
+                        </h6>
+                        <p class="fs-9 text-body-secondary fw-semibold mb-0">{{ invoice.customer.email }}</p>
+                    </div>
+                    <div class="col">
+                        <h6 class="mb-2">
+                            <i class="fa-solid fa-list"></i> {% trans "Invoice Status" %} :
+                        </h6>
+                        <div class="fs-9 text-body-secondary fw-semibold mb-0">
+                            {% if invoice.invoice_status == 'draft' %}
+                                <span class="badge text-bg-warning">{% trans "Draft" %}</span>
+                            {% elif invoice.invoice_status == 'in_review' %}
+                                <span class="badge text-bg-info">{% trans "In Review" %}</span>
+                            {% elif invoice.invoice_status == 'approved' %}
+                                <span class="badge text-bg-info">{% trans "Approved" %}</span>
+                            {% elif invoice.invoice_status == 'declined' %}
+                                <span class="badge text-bg-danger">{% trans "Declined" %}</span>
+                            {% elif invoice.invoice_status == 'paid' %}
+                                <span class="badge text-bg-success">{% trans "Paid" %}</span>
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="px-0 {% if invoice.is_review %}disabled{% endif %}">
+                <div class="table-responsive scrollbar">
+                    <table id="invoice-table" class="table fs-9 text-body mb-0">
+                        <thead class="bg-body-secondary">
+                            <tr>
+                                <th scope="col" style="width: 24px;">
+                                    <i class="fa-solid fa-hashtag"></i>
+                                </th>
+                                <th scope="col" style="min-width: 100px;">{% trans "Make" %}</th>
+                                <th scope="col" style="min-width: 100px;">{% trans "Model" %}</th>
+                                <th scope="col" style="min-width: 100px;">{% trans "Year" %}</th>
+                                <th scope="col" style="min-width: 100px;">{% trans "VIN" %}</th>
+                                <th scope="col" style="min-width: 100px;">{% trans "Quantity" %}</th>
+                                <th scope="col" style="min-width: 100px;">{% trans "Unit Price" %}</th>
+                                <th scope="col" style="min-width: 100px;">{% trans "Total" %}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for item in data.cars %}
+                                <tr>
+                                    <td class="align-middle"></td>
+                                    <td class="align-middle">{{ item.make }}</td>
+                                    <td class="align-middle">{{ item.model }}</td>
+                                    <td class="align-middle">{{ item.year }}</td>
+                                    <td class="align-middle">{{ item.vin }}</td>
+                                    <td class="align-middle">{{ item.quantity|floatformat:-1 }}</td>
+                                    <td class="align-middle ps-5">{{ item.total }}</td>
+                                    <td class="align-middle text-body-tertiary fw-semibold">{{ item.total }}</td>
+                                </tr>
+                            {% endfor %}
+                            <tr class="bg-body-secondary total-sum">
+                                <td class="align-middle ps-4 fw-semibold text-body-highlight" colspan="7">{% trans "Discount Amount" %}</td>
+                                <td class="align-middle text-start fw-semibold">
+                                    <span id="grand-total">- {{ data.total_discount|floatformat }}<span class="icon-saudi_riyal"></span></span>
+                                </td>
+                            </tr>
+                            <tr class="bg-body-secondary total-sum">
+                                <td class="align-middle ps-4 fw-semibold text-body-highlight" colspan="7">{% trans "VAT" %} ({{ data.vat }}%)</td>
+                                <td class="align-middle text-start fw-semibold">
+                                    <span id="grand-total">+ {{ data.total_vat_amount|floatformat }}<span class="icon-saudi_riyal"></span></span>
+                                </td>
+                            </tr>
+                            <tr class="bg-body-secondary total-sum">
+                                <td class="align-middle ps-4 fw-semibold text-body-highlight" colspan="7">{% trans "Additional Services" %}</td>
+                                <td class="align-middle text-start fw-bold">
+                                    {% for service in data.additionals %}
+                                        <small><span class="fw-bold">+ {{ service.name }} - {{ service.price_|floatformat }}<span class="icon-saudi_riyal"></span></span></small>
+                                        <br>
+                                    {% endfor %}
+                                </td>
+                            </tr>
+                            <tr class="bg-body-secondary total-sum">
+                                <td class="align-middle ps-4 fw-bolder text-body-highlight" colspan="7">{% trans "Grand Total" %}</td>
+                                <td class="align-middle text-start fw-bolder">
+                                    <span id="grand-total">{{ data.grand_total|floatformat }}<span class="icon-saudi_riyal"></span></span>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </section>
 {% endblock %}
-
 {% block customJS %}
-  <script>
+    <script>
     function calculateTotals() {
       const table = document.getElementById('estimate-table');
       const rows = table.getElementsByTagName('tbody')[0].rows;
@@ -305,6 +401,5 @@
 
     // Run the function on page load
     window.onload = calculateTotals;
-  </script>
-
-{% endblock %}
\ No newline at end of file
+    </script>
+{% endblock %}
diff --git a/templates/sales/invoices/invoice_list.html b/templates/sales/invoices/invoice_list.html
index 7b68e5eb..b34ac9b6 100644
--- a/templates/sales/invoices/invoice_list.html
+++ b/templates/sales/invoices/invoice_list.html
@@ -1,23 +1,22 @@
 {% extends "base.html" %}
 {% load i18n static %}
-
-{% block title %}{{ _("Invoices") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Invoices") }}
+{% endblock title %}
 {% block content %}
     <div class="row mt-4">
-       
-         <div class="row g-3 justify-content-between mb-4">
-        <div class="col-auto">
-          <div class="d-md-flex justify-content-between">
-             <h2 class="mb-3"> {% trans "Invoices" %}<i class="fa-solid fa-receipt ms-2 text-primary"></i></h2>
-          </div>
+        <div class="row g-3 justify-content-between mb-4">
+            <div class="col-auto">
+                <div class="d-md-flex justify-content-between">
+                    <h2 class="mb-3">
+                        {% trans "Invoices" %}<i class="fa-solid fa-receipt ms-2 text-primary"></i>
+                    </h2>
+                </div>
+            </div>
+            <div class="col-auto">
+                <div class="d-flex">{% include 'partials/search_box.html' %}</div>
+            </div>
         </div>
-        <div class="col-auto">
-          <div class="d-flex">
-            {% include 'partials/search_box.html' %}
-          </div>
-        </div>
-      </div>
         <div class="table-responsive px-1 scrollbar">
             <table class="table align-items-center table-flush">
                 <thead>
@@ -71,7 +70,6 @@
                                     {% trans "View" %}
                                 </a>
                             </td>
-
                         </tr>
                     {% empty %}
                         <tr>
@@ -83,10 +81,8 @@
         </div>
         {% if page_obj.paginator.num_pages > 1 %}
             <div class="d-flex justify-content-end mt-3">
-                <div class="d-flex">
-                    {% include 'partials/pagination.html'%}
-                </div>
+                <div class="d-flex">{% include 'partials/pagination.html' %}</div>
             </div>
         {% endif %}
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/sales/invoices/invoice_preview.html b/templates/sales/invoices/invoice_preview.html
index cdd57f2f..939eb82f 100644
--- a/templates/sales/invoices/invoice_preview.html
+++ b/templates/sales/invoices/invoice_preview.html
@@ -5,13 +5,20 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Invoice</title>
-    <!-- CSS -->
-        <link href="{% static 'css/theme.min.css' %}" type="text/css" rel="stylesheet" id="style-default">
-        <link href="{% static 'css/user.min.css' %}" type="text/css" rel="stylesheet" id="user-style-default">
+        <!-- CSS -->
+        <link href="{% static 'css/theme.min.css' %}"
+              type="text/css"
+              rel="stylesheet"
+              id="style-default">
+        <link href="{% static 'css/user.min.css' %}"
+              type="text/css"
+              rel="stylesheet"
+              id="user-style-default">
         <link href="{% static 'css/custom.css' %}" type="text/css" rel="stylesheet">
-    <!-- Google Fonts - Roboto -->
-        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <!-- Custom CSS -->
+        <!-- Google Fonts - Roboto -->
+        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+              rel="stylesheet">
+        <!-- Custom CSS -->
         <style>
             body {
                 font-family: 'Roboto', sans-serif;
@@ -80,17 +87,16 @@
         </style>
     </head>
     <body>
-
         <div class="row p-2">
             <div class="col-2">
-                <button class="btn btn-sm btn-phoenix-danger w-100" onclick="window.history.back()">الرجوع&nbsp;/&nbsp;Back</button>
+                <button class="btn btn-sm btn-phoenix-danger w-100"
+                        onclick="window.history.back()">الرجوع&nbsp;/&nbsp;Back</button>
             </div>
             <div class="col-2">
                 <button class="btn btn-sm btn-phoenix-primary w-100" id="download-pdf">تحميل&nbsp;/&nbsp;Download</button>
             </div>
             <div class="col-8"></div>
         </div>
-
         <div class="invoice-container" id="invoice-content">
             <div class="invoice-header">
                 <h5 class="fs-5">Tax&nbsp;Invoice&nbsp;&nbsp;/&nbsp;&nbsp;فاتورة&nbsp;ضريبية</h5>
@@ -104,64 +110,108 @@
                 <div class="d-flex justify-content-end align-items-end">
                     <div class="dealer-logo ">
                         {% if dealer.logo %}
-                            <img class="rounded-soft" src="{{ dealer.logo.url|default:'' }}" alt="Dealer Logo"/>
+                            <img class="rounded-soft"
+                                 src="{{ dealer.logo.url|default:'' }}"
+                                 alt="Dealer Logo" />
                         {% endif %}
                     </div>
                 </div>
                 <table class="table table-sm table-bordered border-gray-50">
-
                     <tr>
-                        <td class="ps-1"><strong>Customer Name</strong></td>
-                        <td class="text-center">{{ dealer.arabic_name }}<br>{{ dealer.name }}</td>
-                        <td class="text-end"><strong>اسم&nbsp;العميل</strong></td>
+                        <td class="ps-1">
+                            <strong>Customer Name</strong>
+                        </td>
+                        <td class="text-center">
+                            {{ dealer.arabic_name }}
+                            <br>
+                            {{ dealer.name }}
+                        </td>
+                        <td class="text-end">
+                            <strong>اسم&nbsp;العميل</strong>
+                        </td>
                     </tr>
                     <tr>
-                        <td class="ps-1"><strong>Address</strong></td>
+                        <td class="ps-1">
+                            <strong>Address</strong>
+                        </td>
                         <td class="text-center">{{ dealer.address }}</td>
-                        <td class="text-end"> <strong>العنوان</strong></td>
+                        <td class="text-end">
+                            <strong>العنوان</strong>
+                        </td>
                     </tr>
                     <tr>
-                        <td class="ps-1"><strong>Phone</strong></td>
+                        <td class="ps-1">
+                            <strong>Phone</strong>
+                        </td>
                         <td class="text-center">{{ dealer.phone_number }}</td>
-                        <td class="text-end"><strong>جوال</strong></td>
+                        <td class="text-end">
+                            <strong>جوال</strong>
+                        </td>
                     </tr>
                     <tr>
-                        <td class="ps-1"><strong>VAT Number</strong></td>
+                        <td class="ps-1">
+                            <strong>VAT Number</strong>
+                        </td>
                         <td class="text-center">{{ dealer.vrn }}</td>
-                        <td class="text-end  p-1"><strong>الرقم الضريبي</strong></td>
+                        <td class="text-end  p-1">
+                            <strong>الرقم الضريبي</strong>
+                        </td>
                     </tr>
                 </table>
-
                 <table class="table table-sm table-bordered border-gray-50">
                     <tr>
-                        <td class="ps-1"><strong>Invoice&nbsp;Number</strong></td>
+                        <td class="ps-1">
+                            <strong>Invoice&nbsp;Number</strong>
+                        </td>
                         <td class="text-center">{{ invoice.invoice_number }}</td>
-                        <td class="text-end p-1"><strong>رقم&nbsp;الفاتورة</strong></td>
+                        <td class="text-end p-1">
+                            <strong>رقم&nbsp;الفاتورة</strong>
+                        </td>
                     </tr>
                     <tr>
-                        <td class="ps-1"><strong>Date</strong></td>
+                        <td class="ps-1">
+                            <strong>Date</strong>
+                        </td>
                         <td class="text-center">{{ invoice.date_in_review| date:"Y/m/d" }}</td>
-                        <td class="text-end p-1"><strong>التاريخ</strong></td>
+                        <td class="text-end p-1">
+                            <strong>التاريخ</strong>
+                        </td>
                     </tr>
                     <tr>
-                        <td class="ps-1"><strong>Customer</strong></td>
+                        <td class="ps-1">
+                            <strong>Customer</strong>
+                        </td>
                         <td class="text-center">{{ invoice.customer.customer_name }}</td>
-                        <td class="text-end p-1"><strong>العميل</strong></td>
+                        <td class="text-end p-1">
+                            <strong>العميل</strong>
+                        </td>
                     </tr>
                     <tr>
-                        <td class="ps-1"><strong>VAT&nbsp;ID</strong></td>
+                        <td class="ps-1">
+                            <strong>VAT&nbsp;ID</strong>
+                        </td>
                         <td class="text-center">{{ invoice.customer.vrn|default:"-" }}</td>
-                        <td class="text-end p-1"><strong>الرقم&nbsp;الضريبي</strong></td>
+                        <td class="text-end p-1">
+                            <strong>الرقم&nbsp;الضريبي</strong>
+                        </td>
                     </tr>
                     <tr>
-                        <td class="ps-1"><strong>Email</strong></td>
+                        <td class="ps-1">
+                            <strong>Email</strong>
+                        </td>
                         <td class="text-center">{{ invoice.customer.email|default:"N/A" }}</td>
-                        <td class="text-end p-1"><strong>البريد&nbsp;الالكتروني</strong></td>
+                        <td class="text-end p-1">
+                            <strong>البريد&nbsp;الالكتروني</strong>
+                        </td>
                     </tr>
                     <tr>
-                        <td class="ps-1"><strong>Terms</strong></td>
+                        <td class="ps-1">
+                            <strong>Terms</strong>
+                        </td>
                         <td class="text-center">{{ invoice.get_terms_display }}</td>
-                        <td class="text-end p-1"><strong>طريقة&nbsp;الدفع</strong></td>
+                        <td class="text-end p-1">
+                            <strong>طريقة&nbsp;الدفع</strong>
+                        </td>
                     </tr>
                 </table>
             </div>
@@ -173,14 +223,30 @@
                 <table class="table table-sm table-bordered m-1">
                     <thead>
                         <tr>
-                            <th class="text-wrap text-center align-content-center"><span class="fs-10">Make</span> / <span class="fs-10">الصانع</span></th>
-                            <th class="text-wrap text-center align-content-center"><span class="fs-10">Model</span> / <span class="fs-10">الموديل</span></th>
-                            <th class="text-wrap text-center align-content-center"><span class="fs-10">Trim</span> / <span class="fs-10">الفئة</span></th>
-                            <th class="text-wrap text-center align-content-center"><span class="fs-10">Year</span> / <span class="fs-10">السنة</span></th>
-                            <th class="text-wrap text-center align-content-center"><span class="fs-10">VIN</span> / <span class="fs-10">الهيكل</span></th>
-                            <th class="text-wrap text-center align-content-center"><span class="fs-10">Quantity</span> / <span class="fs-10">الكمية</span></th>
-                            <th class="text-wrap text-center align-content-center"><span class="fs-10">Unit Price</span> / <span class="fs-10">سعر الوحدة</span></th>
-                            <th class="text-wrap text-center align-content-center"><span class="fs-10">Including VAT</span> / <span class="fs-10">شامل الضريبة</span></th>
+                            <th class="text-wrap text-center align-content-center">
+                                <span class="fs-10">Make</span> / <span class="fs-10">الصانع</span>
+                            </th>
+                            <th class="text-wrap text-center align-content-center">
+                                <span class="fs-10">Model</span> / <span class="fs-10">الموديل</span>
+                            </th>
+                            <th class="text-wrap text-center align-content-center">
+                                <span class="fs-10">Trim</span> / <span class="fs-10">الفئة</span>
+                            </th>
+                            <th class="text-wrap text-center align-content-center">
+                                <span class="fs-10">Year</span> / <span class="fs-10">السنة</span>
+                            </th>
+                            <th class="text-wrap text-center align-content-center">
+                                <span class="fs-10">VIN</span> / <span class="fs-10">الهيكل</span>
+                            </th>
+                            <th class="text-wrap text-center align-content-center">
+                                <span class="fs-10">Quantity</span> / <span class="fs-10">الكمية</span>
+                            </th>
+                            <th class="text-wrap text-center align-content-center">
+                                <span class="fs-10">Unit Price</span> / <span class="fs-10">سعر الوحدة</span>
+                            </th>
+                            <th class="text-wrap text-center align-content-center">
+                                <span class="fs-10">Including VAT</span> / <span class="fs-10">شامل الضريبة</span>
+                            </th>
                         </tr>
                     </thead>
                     <tbody>
@@ -203,12 +269,10 @@
                     </tbody>
                 </table>
             </div>
-
             <div class="d-flex justify-content-between">
                 <span class="fs-9 fw-thin">Additional&nbsp;Services</span>
                 <span class="fs-9 fw-thin">الخدمات&nbsp;الإضافية</span>
             </div>
-
             {% if data.additionals %}
                 <div class="invoice-table p-1">
                     <table class="table table-sm table-bordered m-1">
@@ -216,7 +280,9 @@
                             <tr>
                                 <th class="text-center fs-10 align-content-center">Type&nbsp;/&nbsp;النوع</th>
                                 <th class="text-center fs-10 align-content-center">Price&nbsp;/&nbsp;القيمة</th>
-                                <th class="text-center fs-10 align-content-center"><span class="fs-10">Including VAT</span> / <span class="fs-10">شامل الضريبة</span></th>
+                                <th class="text-center fs-10 align-content-center">
+                                    <span class="fs-10">Including VAT</span> / <span class="fs-10">شامل الضريبة</span>
+                                </th>
                             </tr>
                         </thead>
                         <tbody>
@@ -235,30 +301,53 @@
                 <div class="table-responsive">
                     <table class="table table-sm table-responsive">
                         <tr>
-                            <td class="text-start ps-1"><strong class="fs-9">VAT</strong></td>
-                            <td class="text-center"><span class="fs-9">{{ data.total_vat_amount|floatformat }} <span class="icon-saudi_riyal"></span></span></td>
-                            <td class="text-end"><strong class="fs-9">ضريبة&nbsp;القيمة&nbsp;المضافة</strong></td>
+                            <td class="text-start ps-1">
+                                <strong class="fs-9">VAT</strong>
+                            </td>
+                            <td class="text-center">
+                                <span class="fs-9">{{ data.total_vat_amount|floatformat }} <span class="icon-saudi_riyal"></span></span>
+                            </td>
+                            <td class="text-end">
+                                <strong class="fs-9">ضريبة&nbsp;القيمة&nbsp;المضافة</strong>
+                            </td>
                         </tr>
                         <tr>
-                            <td class="text-start ps-1"><strong class="fs-9">Total</strong></td>
-                            <td class="text-center"><span class="fs-9">{{ data.grand_total|floatformat }}&nbsp;<span class="icon-saudi_riyal"></span></span></td>
-                            <td class="text-end"><strong class="fs-9">الإجمالي</strong></td>
+                            <td class="text-start ps-1">
+                                <strong class="fs-9">Total</strong>
+                            </td>
+                            <td class="text-center">
+                                <span class="fs-9">{{ data.grand_total|floatformat }}&nbsp;<span class="icon-saudi_riyal"></span></span>
+                            </td>
+                            <td class="text-end">
+                                <strong class="fs-9">الإجمالي</strong>
+                            </td>
                         </tr>
                         <tr>
-                            <td class="text-end" colspan="3"><span class="fs-9 fw-bold">كتابةً:&nbsp;</span><span class="fs-9">{{ data.grand_total|num_to_words }}&nbsp;<span class="icon-saudi_riyal"></span></span></td>
+                            <td class="text-end" colspan="3">
+                                <span class="fs-9 fw-bold">كتابةً:&nbsp;</span><span class="fs-9">{{ data.grand_total|num_to_words }}&nbsp;<span class="icon-saudi_riyal"></span></span>
+                            </td>
                         </tr>
                     </table>
                 </div>
             </div>
-            <br><br>
-            <br><br>
-            <br><br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
             <div class="footer-note">
                 <div class="logo-img text-center">
-                    <img src="{% static 'images/logos/logo-d-pdf.png' %}" alt="Logo"/>
-                    <p class="fs-11 fw-bold"><span>Haikal</span>&nbsp;|&nbsp;<span>هيكل</span></p>
+                    <img src="{% static 'images/logos/logo-d-pdf.png' %}" alt="Logo" />
+                    <p class="fs-11 fw-bold">
+                        <span>Haikal</span>&nbsp;|&nbsp;<span>هيكل</span>
+                    </p>
                 </div>
-                <p class="fs-11"><span class="fw-thin">Powered&nbsp;by&nbsp;</span><a class="text-decoration-none" href="https://tenhal.sa" style="color: #112e40;"><span>TENHAL</span>&nbsp;|&nbsp;<span>تنحل</span></a></p>
+                <p class="fs-11">
+                    <span class="fw-thin">Powered&nbsp;by&nbsp;</span><a class="text-decoration-none"
+   href="https://tenhal.sa"
+   style="color: #112e40"><span>TENHAL</span>&nbsp;|&nbsp;<span>تنحل</span></a>
+                </p>
             </div>
         </div>
         <script src="{% static 'vendors/bootstrap/bootstrap.min.js' %}"></script>
@@ -275,4 +364,4 @@
             });
         </script>
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/sales/invoices/paid_invoice_update.html b/templates/sales/invoices/paid_invoice_update.html
index 4211b879..78e1fb08 100644
--- a/templates/sales/invoices/paid_invoice_update.html
+++ b/templates/sales/invoices/paid_invoice_update.html
@@ -1,9 +1,7 @@
 {% extends "base.html" %}
 {% load i18n %}
 {% load crispy_forms_filters %}
-
 {% block content %}
-
     <div class="row">
         <div class="row justify-content-center">
             <div class="col-md-8">
@@ -20,5 +18,4 @@
             </div>
         </div>
     </div>
-
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
diff --git a/templates/sales/journals/journal_form.html b/templates/sales/journals/journal_form.html
index 9492d444..130ed636 100644
--- a/templates/sales/journals/journal_form.html
+++ b/templates/sales/journals/journal_form.html
@@ -1,25 +1,20 @@
-
-
 {% extends "base.html" %}
 {% load crispy_forms_filters %}
 {% load i18n static %}
-
-{% block title %}{{ _("Create Payment") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Create Payment") }}
+{% endblock title %}
 {% block content %}
     <div class="row mt-4">
         <h3 class="text-center">{% trans "Create Payment" %}</h3>
         <form method="post" class="needs-validation" novalidate>
             {% csrf_token %}
-            <div class="row g-3">
-                {{ form|crispy }}
-            </div>
-
-        <!-- Buttons -->
+            <div class="row g-3">{{ form|crispy }}</div>
+            <!-- Buttons -->
             <div class="mt-4 text-center">
                 <button type="submit" class="btn btn-phoenix-success me-2">{% trans "Save" %}</button>
                 <a href="{% url 'payment_list' %}" class="btn btn-phoenix-secondary">{% trans "Cancel" %}</a>
             </div>
         </form>
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/sales/journals/journal_list.html b/templates/sales/journals/journal_list.html
index c8e3bae1..7d165271 100644
--- a/templates/sales/journals/journal_list.html
+++ b/templates/sales/journals/journal_list.html
@@ -1,13 +1,11 @@
 {% extends "base.html" %}
 {% load i18n static %}
-
-{% block title %}{{ _("Invoices") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Invoices") }}
+{% endblock title %}
 {% block content %}
     <div class="row mt-4">
         <h3 class="text-center">{% trans "Invoices" %}</h3>
-
-
         <div class="table-responsive">
             <table class="table table-sm fs-9 mb-0">
                 <thead>
@@ -30,9 +28,7 @@
                             <td class="align-middle product white-space-nowrap">{{ journal. }}</td>
                             <td class="text-center">
                                 <a href="{% url 'invoice_detail' request.dealer.slug invoice.pk %}"
-                                   class="btn btn-sm btn-phoenix-success">
-                                    {% trans "view" %}
-                                </a>
+                                   class="btn btn-sm btn-phoenix-success">{% trans "view" %}</a>
                             </td>
                         </tr>
                     {% empty %}
@@ -43,12 +39,10 @@
                 </tbody>
             </table>
         </div>
-        {% if page_obj.paginator.num_pages > 1%}
+        {% if page_obj.paginator.num_pages > 1 %}
             <div class="d-flex justify-content-end mt-3">
-                <div class="d-flex">
-                    {% include 'partials/pagination.html'%}
-                </div>
+                <div class="d-flex">{% include 'partials/pagination.html' %}</div>
             </div>
         {% endif %}
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/sales/orders/order_details.html b/templates/sales/orders/order_details.html
index 2807c637..65a5c8c5 100644
--- a/templates/sales/orders/order_details.html
+++ b/templates/sales/orders/order_details.html
@@ -1,6 +1,5 @@
 {% extends "base.html" %}
 {% load static i18n humanize %}
-
 {% block customCSS %}
     <style>
   /* Custom CSS for additional styling */
@@ -69,16 +68,15 @@
         }
     </style>
 {% endblock customCSS %}
-
 {% block content %}
     <div class="container-fluid px-0">
-    <!-- Header -->
+        <!-- Header -->
         <header class="bg-primary py-3">
             <div class="container">
                 <div class="d-flex justify-content-between align-items-center">
                     <h1 class="h4 mb-0 text-light">
                         <i class="fas fa-file-invoice me-2"></i>
-                        {{ _("Sale Order")}} #{{ saleorder.formatted_order_id }}
+                        {{ _("Sale Order") }} #{{ saleorder.formatted_order_id }}
                     </h1>
                     <div>
                         <button class="btn btn-sm btn-outline-light me-2">
@@ -91,30 +89,33 @@
                 </div>
             </div>
         </header>
-
-    <!-- Main Content -->
+        <!-- Main Content -->
         <div class="container py-4">
             <div class="row">
-            <!-- Left Column -->
+                <!-- Left Column -->
                 <div class="col-lg-8 mb-4">
-                <!-- Order Summary Card -->
+                    <!-- Order Summary Card -->
                     <div class="card mb-4 shadow-sm">
                         <div class="card-header d-flex justify-content-between align-items-center">
-                            <h5 class="mb-0 text-primary">{{ _("Order Summary")}}</h5>
+                            <h5 class="mb-0 text-primary">{{ _("Order Summary") }}</h5>
                             <span class="status-badge
-                                         {% if saleorder.status == 'approved' %}bg-success text-white
-                                         {% elif saleorder.status == 'cancelled' %}bg-danger text-white
-                                         {% elif saleorder.status == 'pending_approval' %}bg-warning text-dark
-                                         {% elif saleorder.status == 'delivered' %}bg-info text-white
-                                         {% else %}bg-secondary text-white{% endif %}">
-                                {{ saleorder.get_status_display }}
-                            </span>
+                                         {% if saleorder.status == 'approved' %}
+                                             bg-success text-white
+                                         {% elif saleorder.status == 'cancelled' %}
+                                             bg-danger text-white
+                                         {% elif saleorder.status == 'pending_approval' %}
+                                             bg-warning text-dark
+                                         {% elif saleorder.status == 'delivered' %}
+                                             bg-info text-white
+                                         {% else %}
+                                             bg-secondary text-white
+                                         {% endif %}">{{ saleorder.get_status_display }}</span>
                         </div>
                         <div class="card-body">
                             <div class="row">
                                 <div class="col-md-6">
                                     <div class="mb-3">
-                                        <label class="form-label text-muted small mb-1">{{ _("Order Date")}}</label>
+                                        <label class="form-label text-muted small mb-1">{{ _("Order Date") }}</label>
                                         <p class="mb-0 fw-bold">{{ saleorder.order_date|date }}</p>
                                     </div>
                                     <div class="mb-3">
@@ -122,27 +123,27 @@
                                         <p class="mb-0 fw-bold">{{ saleorder.customer.full_name|capfirst }}</p>
                                     </div>
                                     <div class="mb-3">
-                                        <label class="form-label text-muted small mb-1">{{ _("Payment Method")}}</label>
+                                        <label class="form-label text-muted small mb-1">{{ _("Payment Method") }}</label>
                                         <p class="mb-0 fw-bold">{{ saleorder.get_payment_method_display }}</p>
                                     </div>
                                     <div class="mb-3">
-                                        <label class="form-label text-muted small mb-1">{{ _("Created By")}}</label>
+                                        <label class="form-label text-muted small mb-1">{{ _("Created By") }}</label>
                                         <p class="mb-0 fw-bold">{{ saleorder.created_by }}</p>
                                     </div>
                                 </div>
                                 <div class="col-md-6">
                                     <div class="mb-3">
-                                        <label class="form-label text-muted small mb-1">{{ _("Expected Delivery")}}</label>
+                                        <label class="form-label text-muted small mb-1">{{ _("Expected Delivery") }}</label>
                                         <p class="mb-0 fw-bold">
                                             {% if saleorder.expected_delivery_date %}
                                                 {{ saleorder.expected_delivery_date|date }}
                                             {% else %}
-                                                <span class="text-warning">{{ _("Not scheduled")}}</span>
+                                                <span class="text-warning">{{ _("Not scheduled") }}</span>
                                             {% endif %}
                                         </p>
                                     </div>
                                     <div class="mb-3">
-                                        <label class="form-label text-muted small mb-1">{{ _("Last Updated")}}</label>
+                                        <label class="form-label text-muted small mb-1">{{ _("Last Updated") }}</label>
                                         <p class="mb-0 fw-bold">
                                             {{ saleorder.updated_at|naturaltime|capfirst }} by
                                             {{ saleorder.last_modified_by }}
@@ -150,7 +151,7 @@
                                     </div>
                                     {% if saleorder.status == 'cancelled' %}
                                         <div class="mb-3">
-                                            <label class="form-label text-muted small mb-1">{{ _("Cancellation Reason")}}</label>
+                                            <label class="form-label text-muted small mb-1">{{ _("Cancellation Reason") }}</label>
                                             <p class="mb-0 fw-bold text-danger">{{ saleorder.cancellation_reason|default:"Not specified" }}</p>
                                         </div>
                                     {% endif %}
@@ -158,7 +159,7 @@
                             </div>
                             {% if saleorder.comments %}
                                 <div class="mt-3">
-                                    <label class="form-label text-muted small mb-1">{{ _("Order Comments")}}</label>
+                                    <label class="form-label text-muted small mb-1">{{ _("Order Comments") }}</label>
                                     <blockquote class="blockquote mb-0">
                                         <p class="mb-0">{{ saleorder.comments }}</p>
                                     </blockquote>
@@ -166,11 +167,10 @@
                             {% endif %}
                         </div>
                     </div>
-
-                <!-- Vehicle Details Card -->
+                    <!-- Vehicle Details Card -->
                     <div class="card mb-4 shadow-sm">
                         <div class="card-header">
-                            <h5 class="mb-0">{{ _("Vehicle Details")}}</h5>
+                            <h5 class="mb-0">{{ _("Vehicle Details") }}</h5>
                         </div>
                         <div class="card-body">
                             <div class="row">
@@ -178,7 +178,10 @@
                                     {% for car in data.cars %}
                                         <div class="col-md-4 mb-3">
                                             <img src="{{ car.logo|default:'https://via.placeholder.com/300x200?text=Vehicle+Image' }}"
-                                                 alt="Vehicle" class="img-fluid rounded" width="200" height="100">
+                                                 alt="Vehicle"
+                                                 class="img-fluid rounded"
+                                                 width="200"
+                                                 height="100">
                                         </div>
                                         <div class="col-md-8">
                                             <div class="row">
@@ -208,55 +211,58 @@
                                     {% endfor %}
                                 {% else %}
                                     <div class="col-12 text-center py-4">
-                                        <p class="text-muted">{{ _("No vehicle assigned to this order")}}</p>
+                                        <p class="text-muted">{{ _("No vehicle assigned to this order") }}</p>
                                     </div>
                                 {% endif %}
                             </div>
                         </div>
                     </div>
-
-                <!-- Financial Details Card -->
+                    <!-- Financial Details Card -->
                     <div class="card mb-4 shadow-sm">
                         <div class="card-header">
-                            <h5 class="mb-0">{{ _("Financial Details")}}</h5>
+                            <h5 class="mb-0">{{ _("Financial Details") }}</h5>
                         </div>
                         <div class="card-body">
                             <div class="row">
                                 <div class="col-md-6">
                                     <div class="mb-3">
-                                        <label class="form-label text-muted small mb-1">{{ _("Agreed Price")}}</label>
+                                        <label class="form-label text-muted small mb-1">{{ _("Agreed Price") }}</label>
                                         <p class="mb-0 fw-bold">SAR {{ saleorder.agreed_price|intcomma }}</p>
                                     </div>
                                     <div class="mb-3">
-                                        <label class="form-label text-muted small mb-1">{{ _("Down Payment")}}</label>
+                                        <label class="form-label text-muted small mb-1">{{ _("Down Payment") }}</label>
                                         <p class="mb-0">SAR {{ saleorder.down_payment_amount|intcomma }}</p>
                                     </div>
                                     <div class="mb-3">
-                                        <label class="form-label text-muted small mb-1">{{ _("Trade-In Value")}}</label>
+                                        <label class="form-label text-muted small mb-1">{{ _("Trade-In Value") }}</label>
                                         <p class="mb-0">SAR {{ saleorder.trade_in_value|intcomma }}</p>
                                     </div>
                                 </div>
                                 <div class="col-md-6">
                                     <div class="mb-3">
-                                        <label class="form-label text-muted small mb-1">{{ _("Loan Amount")}}</label>
+                                        <label class="form-label text-muted small mb-1">{{ _("Loan Amount") }}</label>
                                         <p class="mb-0">SAR {{ saleorder.loan_amount|intcomma }}</p>
                                     </div>
                                     <div class="mb-3">
-                                        <label class="form-label text-muted small mb-1">{{ _("Total Paid")}}</label>
+                                        <label class="form-label text-muted small mb-1">{{ _("Total Paid") }}</label>
                                         <p class="mb-0">SAR {{ saleorder.total_paid_amount|intcomma }}</p>
                                     </div>
                                     <div class="mb-3">
-                                        <label class="form-label text-muted small mb-1">{{ _("Remaining Balance")}}</label>
-                                        <p class="mb-0 fw-bold {% if saleorder.remaining_balance > 0 %}text-danger{% else %}text-success{% endif %}">
-                                            SAR {{ saleorder.remaining_balance|intcomma }}
-                                        </p>
+                                        <label class="form-label text-muted small mb-1">{{ _("Remaining Balance") }}</label>
+                                        <p class="mb-0 fw-bold
+                                                  {% if saleorder.remaining_balance > 0 %}
+                                                      text-danger
+                                                  {% else %}
+                                                      text-success
+                                                  {% endif %}">SAR {{ saleorder.remaining_balance|intcomma }}</p>
                                     </div>
                                 </div>
                             </div>
                             <div class="progress mt-3" style="height: 10px;">
                                 {% widthratio saleorder.total_paid_amount saleorder.agreed_price 100 as payment_percentage %}
-                                <div class="progress-bar bg-success" role="progressbar"
-                                     style="width: {{ payment_percentage }}%;"
+                                <div class="progress-bar bg-success"
+                                     role="progressbar"
+                                     style="width: {{ payment_percentage }}%"
                                      aria-valuenow="{{ payment_percentage }}"
                                      aria-valuemin="0"
                                      aria-valuemax="100"></div>
@@ -267,310 +273,343 @@
                             </div>
                         </div>
                     </div>
-
-                <!-- Documents Card -->
+                    <!-- Documents Card -->
                     <div class="card mb-4 shadow-sm">
                         <div class="card-header d-flex justify-content-between align-items-center">
                             <h5 class="mb-0">{{ _("Documents") }}</h5>
                             <button class="btn btn-sm btn-primary">
-                                <i class="fas fa-plus me-1"></i> {{ _("Add Document")}}
+                                <i class="fas fa-plus me-1"></i> {{ _("Add Document") }}
                             </button>
+                        </div>
+                        <div class="card-body">
+                            <div class="file-upload mb-3">
+                                <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-2"></i>
+                                <p class="mb-1">{{ _("Drag & drop files here or click to browse") }}</p>
+                                <p class="small text-muted mb-0">PDF, JPG, PNG up to 10MB</p>
                             </div>
-                            <div class="card-body">
-                                <div class="file-upload mb-3">
-                                    <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-2"></i>
-                                    <p class="mb-1">{{ _("Drag & drop files here or click to browse")}}</p>
-                                    <p class="small text-muted mb-0">PDF, JPG, PNG up to 10MB</p>
-                                </div>
-                                <div class="row">
-                                    {% for document in saleorder.documents.all %}
-                                        <div class="col-md-3 mb-3">
-                                            <div class="card">
-                                                {% if document.file.url|lower|slice:'-3:' == 'pdf' %}
-                                                    <img src="{% static 'images/icons/file.png' %}" class="document-thumbnail card-img-top" alt="PDF Document">
-                                                {% else %}
-                                                    <img src="{{ document.file.url }}" class="document-thumbnail card-img-top" alt="Document">
-                                                {% endif %}
-                                                <div class="card-body p-2">
-                                                    <p class="card-text small mb-1">{{ document.get_filename }}</p>
-                                                    <p class="card-text small text-muted mb-0">Added: {{ document.created_at|date:"F j, Y" }}</p>
-                                                </div>
+                            <div class="row">
+                                {% for document in saleorder.documents.all %}
+                                    <div class="col-md-3 mb-3">
+                                        <div class="card">
+                                            {% if document.file.url|lower|slice:'-3:' == 'pdf' %}
+                                                <img src="{% static 'images/icons/file.png' %}"
+                                                     class="document-thumbnail card-img-top"
+                                                     alt="PDF Document">
+                                            {% else %}
+                                                <img src="{{ document.file.url }}"
+                                                     class="document-thumbnail card-img-top"
+                                                     alt="Document">
+                                            {% endif %}
+                                            <div class="card-body p-2">
+                                                <p class="card-text small mb-1">{{ document.get_filename }}</p>
+                                                <p class="card-text small text-muted mb-0">Added: {{ document.created_at|date:"F j, Y" }}</p>
                                             </div>
                                         </div>
-                                    {% empty %}
-                                        <div class="col-12 text-center py-3">
-                                            <p class="text-muted">{{ _("No documents uploaded yet")}}</p>
-                                        </div>
-                                    {% endfor %}
-                                </div>
+                                    </div>
+                                {% empty %}
+                                    <div class="col-12 text-center py-3">
+                                        <p class="text-muted">{{ _("No documents uploaded yet") }}</p>
+                                    </div>
+                                {% endfor %}
                             </div>
                         </div>
-
-                <!-- Comments Card -->
+                    </div>
+                    <!-- Comments Card -->
+                    <div class="card shadow-sm">
+                        <div class="card-header">
+                            <h5 class="mb-0">{{ _("Comments & Notes") }}</h5>
+                        </div>
+                        <div class="card-body">
+                            {% comment %} <form method="post"
+       action="{% url 'add_sale_order_comment' saleorder.pk %}"> {% endcomment %}
+                            <form method="post" action="">
+                                {% csrf_token %}
+                                <div class="mb-3">
+                                    <textarea class="form-control"
+                                              name="comment"
+                                              rows="3"
+                                              placeholder="Add a comment or note..."
+                                              required></textarea>
+                                    <div class="d-flex justify-content-end mt-2">
+                                        <button type="submit" class="btn btn-primary btn-sm">{{ _("Post Comment") }}</button>
+                                    </div>
+                                </div>
+                            </form>
+                            <div class="timeline">
+                                {% for comment in saleorder.comments.all %}
+                                    <div class="timeline-item">
+                                        <div class="card mb-2">
+                                            <div class="card-body p-3">
+                                                <div class="d-flex justify-content-between mb-1">
+                                                    <strong>{{ comment.created_by.get_full_name|default:comment.created_by.username }}</strong>
+                                                    <small class="text-muted">{{ comment.created_at|date:"F j, Y H:i A" }}</small>
+                                                </div>
+                                                <p class="mb-0">{{ comment.text }}</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                {% empty %}
+                                    <div class="text-center py-3">
+                                        <p class="text-muted">{{ _("No comments yet") }}</p>
+                                    </div>
+                                {% endfor %}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Right Column -->
+                <div class="col-lg-4">
+                    <!-- Actions Card -->
+                    <div class="card mb-4 shadow-sm">
+                        <div class="card-header">
+                            <h5 class="mb-0">{{ _("Order Actions") }}</h5>
+                        </div>
+                        <div class="card-body">
+                            <div class="d-grid gap-2">
+                                {% if saleorder.status == 'pending_approval' %}
+                                    <button class="btn btn-success" onclick="updateStatus('approved')">
+                                        <i class="fas fa-check-circle me-2"></i> Approve Order
+                                    </button>
+                                {% endif %}
+                                {% comment %} <a href="{% url 'edit_sale_order' saleorder.pk %}"
+    class="btn btn-primary"> {% endcomment %}
+                                <a href="" class="btn btn-primary">
+                                    <i class="fas fa-edit me-2"></i> {{ _("Edit Order") }}
+                                </a>
+                                {% if not saleorder.invoice %}
+                                    {% comment %} <a href="{% url 'create_invoice_from_order' saleorder.pk %}"
+    class="btn btn-info"> {% endcomment %}
+                                    <a href="" class="btn btn-info">
+                                        <i class="fas fa-file-invoice-dollar me-2"></i> {{ _("Create Invoice") }}
+                                    </a>
+                                {% endif %}
+                                {% if saleorder.status == 'approved' and not saleorder.actual_delivery_date %}
+                                    <button class="btn btn-warning"
+                                            data-bs-toggle="modal"
+                                            data-bs-target="#deliveryModal">
+                                        <i class="fas fa-truck me-2"></i> {{ _("Schedule Delivery") }}
+                                    </button>
+                                {% endif %}
+                                {% if saleorder.status != 'cancelled' %}
+                                    <button class="btn btn-danger"
+                                            data-bs-toggle="modal"
+                                            data-bs-target="#cancelModal">
+                                        <i class="fas fa-times-circle me-2"></i> {{ _("Cancel Order") }}
+                                    </button>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Status Timeline Card -->
+                    <div class="card mb-4 shadow-sm">
+                        <div class="card-header">
+                            <h5 class="mb-0">{{ _("Order Status Timeline") }}</h5>
+                        </div>
+                        <div class="card-body">
+                            <div class="timeline">
+                                {% for log in saleorder.status_logs.all %}
+                                    <div class="timeline-item">
+                                        <div class="d-flex justify-content-between">
+                                            <strong>{{ log.get_status_display }}</strong>
+                                            <small class="text-muted">{{ log.created_at|date:"F j, Y" }}</small>
+                                        </div>
+                                        <p class="small mb-0">
+                                            {% if log.note %}{{ log.note }}{% endif %}
+                                            <br>
+                                            <small class="text-muted">{{ _("Changed by") }}: {{ log.changed_by.get_full_name|default:log.changed_by.username }}</small>
+                                        </p>
+                                    </div>
+                                {% empty %}
+                                    <div class="text-center py-3">
+                                        <p class="text-muted">{{ _("No status history available") }}</p>
+                                    </div>
+                                {% endfor %}
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Related Items Card -->
+                    <div class="card mb-4 shadow-sm">
+                        <div class="card-header">
+                            <h5 class="mb-0">{{ _("Related Items") }}</h5>
+                        </div>
+                        <div class="card-body">
+                            <div class="mb-3">
+                                <label class="form-label text-muted small mb-1">{{ _("Quotation") }}</label>
+                                <a href="{% url 'estimate_detail' saleorder.estimate.pk %}"
+                                   target="_blank"
+                                   rel="noopener noreferrer">
+                                    <p class="mb-0">
+                                        <span class="badge bg-success ms-1">{{ saleorder.estimate.estimate_number }} <i class="fas fa-external-link-alt ms-2" style="font-size: 0.8rem;"></i></span>
+                                    </p>
+                                </a>
+                            </div>
+                            <div class="mb-3">
+                                <label class="form-label text-muted small mb-1">{{ _("Invoice") }}</label>
+                                <p class="mb-0">
+                                    {% if saleorder.invoice %}
+                                        <a href="{% url 'invoice_detail' saleorder.invoice.pk %}"
+                                           target="_blank"
+                                           rel="noopener noreferrer">
+                                            <p class="mb-0">
+                                                <span class="badge bg-success ms-1">{{ saleorder.invoice.invoice_number }} <i class="fas fa-external-link-alt ms-2" style="font-size: 0.8rem;"></i></span>
+                                            </p>
+                                        </a>
+                                    {% else %}
+                                        <span class="text-muted">{{ _("Not created yet") }}</span>
+                                    {% endif %}
+                                </p>
+                            </div>
+                            <div class="mb-3">
+                                <label class="form-label text-muted small mb-1">{{ _("Opportunity") }}</label>
+                                <a href="{% url 'opportunity_detail' saleorder.opportunity.slug %}"
+                                   target="_blank"
+                                   rel="noopener noreferrer">
+                                    <p class="mb-0">
+                                        <span class="badge bg-success ms-1">{{ saleorder.opportunity }} <i class="fas fa-external-link-alt ms-2" style="font-size: 0.8rem;"></i></span>
+                                    </p>
+                                </a>
+                            </div>
+                            <div class="mb-3">
+                                <label class="form-label text-muted small mb-1">{{ _("Customer") }}</label>
+                                <a href="{% url 'customer_detail' saleorder.customer.slug %}"
+                                   target="_blank"
+                                   rel="noopener noreferrer">
+                                    <p class="mb-0">
+                                        <span class="badge bg-success ms-1">{{ saleorder.customer.full_name|capfirst }} <i class="fas fa-external-link-alt ms-2" style="font-size: 0.8rem;"></i></span>
+                                    </p>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Trade-In Vehicle Card -->
+                    {% if saleorder.trade_in_vehicle %}
                         <div class="card shadow-sm">
                             <div class="card-header">
-                                <h5 class="mb-0">{{ _("Comments & Notes")}}</h5>
+                                <h5 class="mb-0">{{ _("Trade-In Vehicle") }}</h5>
                             </div>
                             <div class="card-body">
-                        {% comment %} <form method="post" action="{% url 'add_sale_order_comment' saleorder.pk %}"> {% endcomment %}
-                                <form method="post" action="">
-                                    {% csrf_token %}
-                                    <div class="mb-3">
-                                        <textarea class="form-control" name="comment" rows="3" placeholder="Add a comment or note..." required></textarea>
-                                        <div class="d-flex justify-content-end mt-2">
-                                            <button type="submit" class="btn btn-primary btn-sm">{{ _("Post Comment")}}</button>
-                                        </div>
+                                <div class="text-center mb-3">
+                                    <img src="{{ saleorder.trade_in_vehicle.image.url|default:'https://via.placeholder.com/300x200?text=Trade-In' }}"
+                                         alt="Trade-In Vehicle"
+                                         class="img-fluid rounded mb-2">
+                                    <h6 class="mb-1">
+                                        {{ saleorder.trade_in_vehicle.year }}
+                                        {{ saleorder.trade_in_vehicle.make }}
+                                        {{ saleorder.trade_in_vehicle.model }}
+                                    </h6>
+                                    <p class="small text-muted mb-2">{{ _("VIN") }}: {{ saleorder.trade_in_vehicle.vin }}</p>
+                                    <p class="fw-bold">SAR {{ saleorder.trade_in_value|intcomma }}</p>
+                                </div>
+                                <div class="row">
+                                    <div class="col-6">
+                                        <p class="small mb-1">
+                                            <i class="fas fa-tachometer-alt me-1 text-muted"></i>
+                                            {{ saleorder.trade_in_vehicle.mileage|intcomma }} {{ _("km") }}
+                                        </p>
                                     </div>
-                                </form>
-                                <div class="timeline">
-                                    {% for comment in saleorder.comments.all %}
-                                        <div class="timeline-item">
-                                            <div class="card mb-2">
-                                                <div class="card-body p-3">
-                                                    <div class="d-flex justify-content-between mb-1">
-                                                        <strong>{{ comment.created_by.get_full_name|default:comment.created_by.username }}</strong>
-                                                        <small class="text-muted">{{ comment.created_at|date:"F j, Y H:i A" }}</small>
-                                                    </div>
-                                                    <p class="mb-0">{{ comment.text }}</p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    {% empty %}
-                                        <div class="text-center py-3">
-                                            <p class="text-muted">{{ _("No comments yet")}}</p>
-                                        </div>
-                                    {% endfor %}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-            <!-- Right Column -->
-                    <div class="col-lg-4">
-                <!-- Actions Card -->
-                        <div class="card mb-4 shadow-sm">
-                            <div class="card-header">
-                                <h5 class="mb-0">{{ _("Order Actions")}}</h5>
-                            </div>
-                            <div class="card-body">
-                                <div class="d-grid gap-2">
-                                    {% if saleorder.status == 'pending_approval' %}
-                                        <button class="btn btn-success" onclick="updateStatus('approved')">
-                                            <i class="fas fa-check-circle me-2"></i> Approve Order
-                                        </button>
-                                    {% endif %}
-
-                            {% comment %} <a href="{% url 'edit_sale_order' saleorder.pk %}" class="btn btn-primary"> {% endcomment %}
-                                    <a href="" class="btn btn-primary">
-                                        <i class="fas fa-edit me-2"></i> {{ _("Edit Order")}}
-                                    </a>
-
-                                    {% if not saleorder.invoice %}
-                            {% comment %} <a href="{% url 'create_invoice_from_order' saleorder.pk %}" class="btn btn-info"> {% endcomment %}
-                                        <a href="" class="btn btn-info">
-                                            <i class="fas fa-file-invoice-dollar me-2"></i> {{ _("Create Invoice")}}
-                                        </a>
-                                    {% endif %}
-
-                                    {% if saleorder.status == 'approved' and not saleorder.actual_delivery_date %}
-                                        <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#deliveryModal">
-                                            <i class="fas fa-truck me-2"></i> {{ _("Schedule Delivery")}}
-                                        </button>
-                                    {% endif %}
-
-                                    {% if saleorder.status != 'cancelled' %}
-                                        <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#cancelModal">
-                                            <i class="fas fa-times-circle me-2"></i> {{ _("Cancel Order")}}
-                                        </button>
-                                    {% endif %}
-                                </div>
-                            </div>
-                        </div>
-
-                <!-- Status Timeline Card -->
-                        <div class="card mb-4 shadow-sm">
-                            <div class="card-header">
-                                <h5 class="mb-0">{{ _("Order Status Timeline")}}</h5>
-                            </div>
-                            <div class="card-body">
-                                <div class="timeline">
-                                    {% for log in saleorder.status_logs.all %}
-                                        <div class="timeline-item">
-                                            <div class="d-flex justify-content-between">
-                                                <strong>{{ log.get_status_display }}</strong>
-                                                <small class="text-muted">{{ log.created_at|date:"F j, Y" }}</small>
-                                            </div>
-                                            <p class="small mb-0">
-                                                {% if log.note %}{{ log.note }}{% endif %}
-                                                <br>
-                                                <small class="text-muted">{{ _("Changed by")}}: {{ log.changed_by.get_full_name|default:log.changed_by.username }}</small>
-                                            </p>
-                                        </div>
-                                    {% empty %}
-                                        <div class="text-center py-3">
-                                            <p class="text-muted">{{ _("No status history available")}}</p>
-                                        </div>
-                                    {% endfor %}
-                                </div>
-                            </div>
-                        </div>
-
-                <!-- Related Items Card -->
-                        <div class="card mb-4 shadow-sm">
-                            <div class="card-header">
-                                <h5 class="mb-0">{{ _("Related Items")}}</h5>
-                            </div>
-                            <div class="card-body">
-                                <div class="mb-3">
-                                    <label class="form-label text-muted small mb-1">{{ _("Quotation") }}</label>
-                                    <a href="{% url 'estimate_detail' saleorder.estimate.pk %}" target="_blank" rel="noopener noreferrer">
-                                        <p class="mb-0">
-                                            <span class="badge bg-success ms-1">{{ saleorder.estimate.estimate_number }} <i class="fas fa-external-link-alt ms-2" style="font-size: 0.8rem;"></i></span>
+                                    <div class="col-6">
+                                        <p class="small mb-1">
+                                            <i class="fas fa-paint-brush me-1 text-muted"></i>
+                                            {{ saleorder.trade_in_vehicle.color }}
                                         </p>
-                                    </a>
-                                </div>
-                                <div class="mb-3">
-                                    <label class="form-label text-muted small mb-1">{{ _("Invoice") }}</label>
-                                    <p class="mb-0">
-                                        {% if saleorder.invoice %}
-                                            <a href="{% url 'invoice_detail' saleorder.invoice.pk %}" target="_blank" rel="noopener noreferrer">
-                                                <p class="mb-0">
-                                                    <span class="badge bg-success ms-1">{{ saleorder.invoice.invoice_number }} <i class="fas fa-external-link-alt ms-2" style="font-size: 0.8rem;"></i></span>
-                                                </p>
-                                            </a>
-                                        {% else %}
-                                            <span class="text-muted">{{ _("Not created yet")}}</span>
-                                        {% endif %}
-                                    </p>
-                                </div>
-                                <div class="mb-3">
-                                    <label class="form-label text-muted small mb-1">{{ _("Opportunity") }}</label>
-                                    <a href="{% url 'opportunity_detail' saleorder.opportunity.slug %}" target="_blank" rel="noopener noreferrer">
-                                        <p class="mb-0">
-                                            <span class="badge bg-success ms-1">{{ saleorder.opportunity }} <i class="fas fa-external-link-alt ms-2" style="font-size: 0.8rem;"></i></span>
-                                        </p>
-                                    </a>
-                                </div>
-                                <div class="mb-3">
-                                    <label class="form-label text-muted small mb-1">{{ _("Customer") }}</label>
-                                    <a href="{% url 'customer_detail' saleorder.customer.slug %}" target="_blank" rel="noopener noreferrer">
-                                        <p class="mb-0">
-                                            <span class="badge bg-success ms-1">{{ saleorder.customer.full_name|capfirst }} <i class="fas fa-external-link-alt ms-2" style="font-size: 0.8rem;"></i></span>
-                                        </p>
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-
-                <!-- Trade-In Vehicle Card -->
-                        {% if saleorder.trade_in_vehicle %}
-                            <div class="card shadow-sm">
-                                <div class="card-header">
-                                    <h5 class="mb-0">{{ _("Trade-In Vehicle")}}</h5>
-                                </div>
-                                <div class="card-body">
-                                    <div class="text-center mb-3">
-                                        <img src="{{ saleorder.trade_in_vehicle.image.url|default:'https://via.placeholder.com/300x200?text=Trade-In' }}"
-                                             alt="Trade-In Vehicle" class="img-fluid rounded mb-2">
-                                        <h6 class="mb-1">
-                                            {{ saleorder.trade_in_vehicle.year }}
-                                            {{ saleorder.trade_in_vehicle.make }}
-                                            {{ saleorder.trade_in_vehicle.model }}
-                                        </h6>
-                                        <p class="small text-muted mb-2">{{ _("VIN") }}: {{ saleorder.trade_in_vehicle.vin }}</p>
-                                        <p class="fw-bold">SAR {{ saleorder.trade_in_value|intcomma }}</p>
                                     </div>
-                                    <div class="row">
-                                        <div class="col-6">
-                                            <p class="small mb-1">
-                                                <i class="fas fa-tachometer-alt me-1 text-muted"></i>
-                                                {{ saleorder.trade_in_vehicle.mileage|intcomma }} {{ _("km") }}
-                                            </p>
-                                        </div>
-                                        <div class="col-6">
-                                            <p class="small mb-1">
-                                                <i class="fas fa-paint-brush me-1 text-muted"></i>
-                                                {{ saleorder.trade_in_vehicle.color }}
-                                            </p>
-                                        </div>
-                                        <div class="col-6">
-                                            <p class="small mb-1">
-                                                <i class="fas fa-gas-pump me-1 text-muted"></i>
-                                                {{ saleorder.trade_in_vehicle.engine }}
-                                            </p>
-                                        </div>
-                                        <div class="col-6">
-                                            <p class="small mb-1">
-                                                <i class="fas fa-cog me-1 text-muted"></i>
-                                                {{ saleorder.trade_in_vehicle.get_transmission_display }}
-                                            </p>
-                                        </div>
+                                    <div class="col-6">
+                                        <p class="small mb-1">
+                                            <i class="fas fa-gas-pump me-1 text-muted"></i>
+                                            {{ saleorder.trade_in_vehicle.engine }}
+                                        </p>
+                                    </div>
+                                    <div class="col-6">
+                                        <p class="small mb-1">
+                                            <i class="fas fa-cog me-1 text-muted"></i>
+                                            {{ saleorder.trade_in_vehicle.get_transmission_display }}
+                                        </p>
                                     </div>
                                 </div>
                             </div>
-                        {% endif %}
-                    </div>
+                        </div>
+                    {% endif %}
                 </div>
             </div>
         </div>
-
-<!-- Cancel Order Modal -->
-        <div class="modal fade" id="cancelModal" tabindex="-1" aria-labelledby="cancelModalLabel" aria-hidden="true">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title" id="cancelModalLabel">{{ _("Cancel Order")}}</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                    </div>
-            {% comment %} <form method="post" action="{% url 'cancel_sale_order' saleorder.pk %}"> {% endcomment %}
-                    <form method="post" action="">
-                        {% csrf_token %}
-                        <div class="modal-body">
-                            <div class="mb-3">
-                                <label for="cancellationReason" class="form-label">{{ _("Reason for Cancellation")}}</label>
-                                <textarea class="form-control" id="cancellationReason" name="cancellation_reason" rows="3" required></textarea>
-                            </div>
-                        </div>
-                        <div class="modal-footer">
-                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _("Close") }}</button>
-                            <button type="submit" class="btn btn-danger">{{ _("Confirm Cancellation")}}</button>
-                        </div>
-                    </form>
+    </div>
+    <!-- Cancel Order Modal -->
+    <div class="modal fade"
+         id="cancelModal"
+         tabindex="-1"
+         aria-labelledby="cancelModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="cancelModalLabel">{{ _("Cancel Order") }}</h5>
+                    <button type="button"
+                            class="btn-close"
+                            data-bs-dismiss="modal"
+                            aria-label="Close"></button>
                 </div>
+                {% comment %} <form method="post" action="{% url 'cancel_sale_order' saleorder.pk %}"> {% endcomment %}
+                <form method="post" action="">
+                    {% csrf_token %}
+                    <div class="modal-body">
+                        <div class="mb-3">
+                            <label for="cancellationReason" class="form-label">{{ _("Reason for Cancellation") }}</label>
+                            <textarea class="form-control"
+                                      id="cancellationReason"
+                                      name="cancellation_reason"
+                                      rows="3"
+                                      required></textarea>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _("Close") }}</button>
+                        <button type="submit" class="btn btn-danger">{{ _("Confirm Cancellation") }}</button>
+                    </div>
+                </form>
             </div>
         </div>
-
-<!-- Schedule Delivery Modal -->
-        <div class="modal fade" id="deliveryModal" tabindex="-1" aria-labelledby="deliveryModalLabel" aria-hidden="true">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title" id="deliveryModalLabel">{{ _("Schedule Delivery")}}</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                    </div>
-            {% comment %} <form method="post" action="{% url 'schedule_delivery' saleorder.pk %}"> {% endcomment %}
-                    <form method="post" action="">
-                        {% csrf_token %}
-                        <div class="modal-body">
-                            <div class="mb-3">
-                                <label for="deliveryDate" class="form-label">{{ _("Delivery Date")}}</label>
-                                <input type="date" class="form-control" id="deliveryDate" name="delivery_date" required>
-                            </div>
-                            <div class="mb-3">
-                                <label for="deliveryNotes" class="form-label">{{ _("Notes") }}</label>
-                                <textarea class="form-control" id="deliveryNotes" name="notes" rows="3"></textarea>
-                            </div>
-                        </div>
-                        <div class="modal-footer">
-                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _("Close") }}</button>
-                            <button type="submit" class="btn btn-primary">{{ _("Schedule Delivery")}}</button>
-                        </div>
-                    </form>
+    </div>
+    <!-- Schedule Delivery Modal -->
+    <div class="modal fade"
+         id="deliveryModal"
+         tabindex="-1"
+         aria-labelledby="deliveryModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="deliveryModalLabel">{{ _("Schedule Delivery") }}</h5>
+                    <button type="button"
+                            class="btn-close"
+                            data-bs-dismiss="modal"
+                            aria-label="Close"></button>
                 </div>
+                {% comment %} <form method="post" action="{% url 'schedule_delivery' saleorder.pk %}"> {% endcomment %}
+                <form method="post" action="">
+                    {% csrf_token %}
+                    <div class="modal-body">
+                        <div class="mb-3">
+                            <label for="deliveryDate" class="form-label">{{ _("Delivery Date") }}</label>
+                            <input type="date"
+                                   class="form-control"
+                                   id="deliveryDate"
+                                   name="delivery_date"
+                                   required>
+                        </div>
+                        <div class="mb-3">
+                            <label for="deliveryNotes" class="form-label">{{ _("Notes") }}</label>
+                            <textarea class="form-control" id="deliveryNotes" name="notes" rows="3"></textarea>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _("Close") }}</button>
+                        <button type="submit" class="btn btn-primary">{{ _("Schedule Delivery") }}</button>
+                    </div>
+                </form>
             </div>
         </div>
+    </div>
 {% endblock content %}
-
 {% block customJS %}
     <script>
     // Status update function
@@ -613,4 +652,4 @@
             });
         });
     </script>
-{% endblock customJS %}
\ No newline at end of file
+{% endblock customJS %}
diff --git a/templates/sales/orders/order_list.html b/templates/sales/orders/order_list.html
index e9c98181..5e6709a1 100644
--- a/templates/sales/orders/order_list.html
+++ b/templates/sales/orders/order_list.html
@@ -1,12 +1,13 @@
 {% extends "base.html" %}
 {% load i18n static humanize %}
-
-{% block title %}{{ _("Orders") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Orders") }}
+{% endblock title %}
 {% block content %}
     <div class="row mt-4">
-        <h3 class="mb-3"><i class="fa-solid fa-list"></i> {% trans "Orders" %}</h3>
-
+        <h3 class="mb-3">
+            <i class="fa-solid fa-list"></i> {% trans "Orders" %}
+        </h3>
         <div class="table-responsive px-1 scrollbar">
             <table class="table align-items-center table-flush">
                 <thead>
@@ -27,21 +28,18 @@
                             <td class="align-middle product white-space-nowrap py-0">{{ order.formatted_order_id }}</td>
                             <td class="align-middle product white-space-nowrap py-0">{{ order.estimate.customer.customer_name }}</td>
                             <td class="align-middle product white-space-nowrap">
-                                <a href="{% url 'estimate_detail' order.estimate.pk %}">
-                                    {{ order.estimate }}
-                                </a>
+                                <a href="{% url 'estimate_detail' order.estimate.pk %}">{{ order.estimate }}</a>
                             </td>
                             <td class="align-middle product white-space-nowrap">
                                 {% if order.invoice %}
-                                    <a href="{% url 'invoice_detail' order.invoice.pk %}">
-                                        {{ order.invoice }}
-                                    </a>
+                                    <a href="{% url 'invoice_detail' order.invoice.pk %}">{{ order.invoice }}</a>
                                 {% endif %}
                             </td>
                             <td class="align-middle product white-space-nowrap py-0">{{ order.status }}</td>
                             <td class="align-middle product white-space-nowrap py-0">{{ order.expected_delivery_date|naturalday|capfirst }}</td>
                             <td class="align-middle product white-space-nowrap py-0">
-                                <a class="btn btn-sm btn-phoenix-success" href="{% url 'sale_order_details' order.estimate.pk order.pk %}">View</a>
+                                <a class="btn btn-sm btn-phoenix-success"
+                                   href="{% url 'sale_order_details' order.estimate.pk order.pk %}">View</a>
                             </td>
                         </tr>
                     {% empty %}
@@ -52,13 +50,10 @@
                 </tbody>
             </table>
         </div>
-        {% if page_obj.paginator.num_pages > 1%}
+        {% if page_obj.paginator.num_pages > 1 %}
             <div class="d-flex justify-content-end mt-3">
-                <div class="d-flex">
-                    {% include 'partials/pagination.html'%}
-                </div>
+                <div class="d-flex">{% include 'partials/pagination.html' %}</div>
             </div>
         {% endif %}
-
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/sales/orders/purchase_order.html b/templates/sales/orders/purchase_order.html
index 8208df09..30e42051 100644
--- a/templates/sales/orders/purchase_order.html
+++ b/templates/sales/orders/purchase_order.html
@@ -1,6 +1,6 @@
 {% load i18n custom_filters %}
 {% block customCSS %}
-  <style>
+    <style>
     .invoice {
       width: 100%;
       height: 400px; /* Fixed height */
@@ -29,84 +29,89 @@
     .b-top {
       border-top: 2px solid #000;
     }
-  </style>
+    </style>
 {% endblock %}
 <div>
-  <div class="row justify-content-center px-12">
-    <button class="btn btn-phoenix-primary" type="button" onclick="printDiv('printableArea')">
-      <i class="fa-solid fa-print"></i> {{ _('Print') }}
-    </button>
-  </div>
-  <div class="container" id="printableArea">
-    <div class="row justify-content-center">
-      <div class="col-md-10">
-        <div class="card mt-2">
-          <div class="card-body text-center">
-            <h2 class="card-title">{{ _('Purchase Order') }}</h2>
-          </div>
-          <div class="card-body">
-            <div class="invoice p-4">
-              <div class="mb-4">
-                <strong>{{ estimate.customer.customer_name }}</strong><br />
-                Order ID #{{ estimate.sale_orders.first.formatted_order_id }}<br />
-                {{ estimate.sale_orders.first.created|date }}
-              </div>
-              <table class="invoice-items table">
-                <thead>
-                  <tr>
-                    <th>Item</th>
-                    <th class="text-end">Price</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr class="b-top"></tr>
-                  {% for item in data.cars %}
-                    <tr>
-                      <td>{{ item.make }}</td>
-                      <td class="text-end">{{ item.unit_price|floatformat }}</td>
-                    </tr>
-                  {% endfor %}
-                  <tr class="b-top">
-                    <td>Additionals :</td>
-                  </tr>
-                  {% for service in data.additionals %}
-                    <tr>
-                      <td>{{ service.name }}</td>
-                      <td class="text-end">{{ service.price_|floatformat }}</td>
-                    </tr>
-                  {% endfor %}
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div class="card-body text-center">
-            <table class="invoice-items table">
-              <thead>
-                <tr>
-                  <th></th>
-                  <th class="text-end">Total</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr class="total">
-                  <td class="text-end" width="80%"></td>
-                  <td class="text-end">{{ data.grand_total|floatformat }}<span class="icon-saudi_riyal"></span></td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div class="card-body text-center"></div>
-        </div>
-        <div class="mt-5">
-          <p>{{ _('Signature') }}:</p>
-        </div>
-      </div>
+    <div class="row justify-content-center px-12">
+        <button class="btn btn-phoenix-primary"
+                type="button"
+                onclick="printDiv('printableArea')">
+            <i class="fa-solid fa-print"></i> {{ _("Print") }}
+        </button>
+    </div>
+    <div class="container" id="printableArea">
+        <div class="row justify-content-center">
+            <div class="col-md-10">
+                <div class="card mt-2">
+                    <div class="card-body text-center">
+                        <h2 class="card-title">{{ _("Purchase Order") }}</h2>
+                    </div>
+                    <div class="card-body">
+                        <div class="invoice p-4">
+                            <div class="mb-4">
+                                <strong>{{ estimate.customer.customer_name }}</strong>
+                                <br />
+                                Order ID #{{ estimate.sale_orders.first.formatted_order_id }}
+                                <br />
+                                {{ estimate.sale_orders.first.created|date }}
+                            </div>
+                            <table class="invoice-items table">
+                                <thead>
+                                    <tr>
+                                        <th>Item</th>
+                                        <th class="text-end">Price</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr class="b-top"></tr>
+                                    {% for item in data.cars %}
+                                        <tr>
+                                            <td>{{ item.make }}</td>
+                                            <td class="text-end">{{ item.unit_price|floatformat }}</td>
+                                        </tr>
+                                    {% endfor %}
+                                    <tr class="b-top">
+                                        <td>Additionals :</td>
+                                    </tr>
+                                    {% for service in data.additionals %}
+                                        <tr>
+                                            <td>{{ service.name }}</td>
+                                            <td class="text-end">{{ service.price_|floatformat }}</td>
+                                        </tr>
+                                    {% endfor %}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="card-body text-center">
+                        <table class="invoice-items table">
+                            <thead>
+                                <tr>
+                                    <th></th>
+                                    <th class="text-end">Total</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr class="total">
+                                    <td class="text-end" width="80%"></td>
+                                    <td class="text-end">
+                                        {{ data.grand_total|floatformat }}<span class="icon-saudi_riyal"></span>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="card-body text-center"></div>
+                </div>
+                <div class="mt-5">
+                    <p>{{ _("Signature") }}:</p>
+                </div>
+            </div>
+        </div>
     </div>
-  </div>
 </div>
-
 {% block customJS %}
-  <script>
+    <script>
     function printDiv(divName) {
       var printContents = document.getElementById(divName).innerHTML
       var originalContents = document.body.innerHTML
@@ -117,5 +122,5 @@
 
       document.body.innerHTML = originalContents
     }
-  </script>
+    </script>
 {% endblock %}
diff --git a/templates/sales/payments/payment_create.html b/templates/sales/payments/payment_create.html
index a5fe1909..7e0ffab0 100644
--- a/templates/sales/payments/payment_create.html
+++ b/templates/sales/payments/payment_create.html
@@ -2,7 +2,9 @@
 {% load crispy_forms_filters %}
 {% load static %}
 {% load i18n %}
-{% block title %}{{ _("Make Payment") }}{% endblock title %}
+{% block title %}
+    {{ _("Make Payment") }}
+{% endblock title %}
 {% block content %}
     <div class="row">
         <div class="row justify-content-center">
@@ -21,4 +23,3 @@
         </div>
     </div>
 {% endblock content %}
-
diff --git a/templates/sales/payments/payment_details.html b/templates/sales/payments/payment_details.html
index cc07c7f3..8d6e34ea 100644
--- a/templates/sales/payments/payment_details.html
+++ b/templates/sales/payments/payment_details.html
@@ -1,12 +1,13 @@
 {% extends "base.html" %}
 {% load i18n static %}
-
-{% block title %}{{ _("Transactions") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Transactions") }}
+{% endblock title %}
 {% block content %}
     <div class="row mt-4">
-        <h3 class="mb-3"><i class="fa-solid fa-right-left"></i> {% trans "Transactions" %}</h3>
-
+        <h3 class="mb-3">
+            <i class="fa-solid fa-right-left"></i> {% trans "Transactions" %}
+        </h3>
         <div class="table-responsive px-1 scrollbar">
             <table class="table align-items-center table-flush">
                 <thead>
@@ -22,13 +23,20 @@
                     <tbody class="list">
                         {% for transaction in transactions %}
                             <tr class="hover-actions-trigger btn-reveal-trigger position-static">
-
                                 <td>{{ forloop.counter }}</td>
-                                <td class="align-middle product white-space-nowrap py-0">{{ transaction.created|date}}</td>
+                                <td class="align-middle product white-space-nowrap py-0">{{ transaction.created|date }}</td>
                                 <td class="align-middle product white-space-nowrap">{{ transaction.account.name }}</td>
                                 <td class="align-middle product white-space-nowrap">{{ transaction.account.code }}</td>
-                                <td class="align-middle product white-space-nowrap text-success">{% if transaction.tx_type == "debit" %}<i class="fa-solid fa-circle-up"></i> {{ transaction.amount }}<span class="icon-saudi_riyal"></span>{% endif %}</td>
-                                <td class="align-middle product white-space-nowrap text-danger">{% if transaction.tx_type == "credit" %}<i class="fa-solid fa-circle-down"></i> {{ transaction.amount }} <span class="icon-saudi_riyal"></span>{% endif %}</td>
+                                <td class="align-middle product white-space-nowrap text-success">
+                                    {% if transaction.tx_type == "debit" %}
+                                        <i class="fa-solid fa-circle-up"></i> {{ transaction.amount }}<span class="icon-saudi_riyal"></span>
+                                    {% endif %}
+                                </td>
+                                <td class="align-middle product white-space-nowrap text-danger">
+                                    {% if transaction.tx_type == "credit" %}
+                                        <i class="fa-solid fa-circle-down"></i> {{ transaction.amount }} <span class="icon-saudi_riyal"></span>
+                                    {% endif %}
+                                </td>
                                 <td class="align-middle product white-space-nowrap">{{ transaction.description }}</td>
                             </tr>
                         {% empty %}
@@ -44,6 +52,5 @@
                     {% include 'partials/pagination.html' %}
                 {% endif %}
             </div>
-
         </div>
-{% endblock %}
\ No newline at end of file
+    {% endblock %}
diff --git a/templates/sales/payments/payment_form.html b/templates/sales/payments/payment_form.html
index ca6966f5..5d9e4c8c 100644
--- a/templates/sales/payments/payment_form.html
+++ b/templates/sales/payments/payment_form.html
@@ -2,7 +2,9 @@
 {% load crispy_forms_filters %}
 {% load static %}
 {% load i18n %}
-{% block title %}{{ _("Make Payment") }}{% endblock title %}
+{% block title %}
+    {{ _("Make Payment") }}
+{% endblock title %}
 {% block extra_css %}
     <style>
         .paid {
@@ -19,19 +21,24 @@
                     {% if model.is_paid %}
                         <div class="card-header">{{ _("Payment Already Made") }}</div>
                     {% else %}
-                        <div class="card-header"><i class="fa-solid fa-hand-holding-dollar"></i> {{ _("Make Payment") }}</div>
+                        <div class="card-header">
+                            <i class="fa-solid fa-hand-holding-dollar"></i> {{ _("Make Payment") }}
+                        </div>
                     {% endif %}
                     <div class="card-body">
                         {% if model %}
-                            <form method="post" action="{% url 'payment_create' request.dealer.slug model.pk %}">
-                        {% endif %}
-                        {% csrf_token %}
-                        {{ form|crispy }}
-                        <button type="submit" class="btn btn-phoenix-primary"><i class="fa-solid fa-floppy-disk"></i> {% trans 'Pay' %}</button>
-                    </form>
+                            <form method="post"
+                                  action="{% url 'payment_create' request.dealer.slug model.pk %}">
+                            {% endif %}
+                            {% csrf_token %}
+                            {{ form|crispy }}
+                            <button type="submit" class="btn btn-phoenix-primary">
+                                <i class="fa-solid fa-floppy-disk"></i> {% trans 'Pay' %}
+                            </button>
+                        </form>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
-    </div>
 {% endblock content %}
diff --git a/templates/sales/payments/payment_list.html b/templates/sales/payments/payment_list.html
index 894411a4..b1cdbbc0 100644
--- a/templates/sales/payments/payment_list.html
+++ b/templates/sales/payments/payment_list.html
@@ -1,16 +1,16 @@
 {% extends "base.html" %}
 {% load i18n static %}
-
-{% block title %}{{ _("Payments") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Payments") }}
+{% endblock title %}
 {% block content %}
     <div class="row mt-4">
         <div class="d-flex justify-content-between mb-2">
-            <h3 class="mb-3"><span class="icon-saudi_riyal"></span> {% trans "Payments" %}</h3>
-        {% comment %} <a href="{% url 'payment_create' %}" class="btn btn-sm btn-phoenix-success ">{% trans "Add Payment" %}</a> {% endcomment %}
-
+            <h3 class="mb-3">
+                <span class="icon-saudi_riyal"></span> {% trans "Payments" %}
+            </h3>
+            {% comment %} <a href="{% url 'payment_create' %}" class="btn btn-sm btn-phoenix-success ">{% trans "Add Payment" %}</a> {% endcomment %}
         </div>
-
         <div class="table-responsive px-1 scrollbar">
             <table class="table align-items-center table-flush">
                 <thead>
@@ -42,7 +42,8 @@
                             <td class="align-middle product white-space-nowrap py-0">{{ journal.timestamp }}</td>
                             <td class="align-middle product white-space-nowrap py-0">{{ journal.description }}</td>
                             <td class="align-middle product white-space-nowrap">
-                                <a href="{% url 'payment_details' request.dealer.slug journal.pk %}" class="btn btn-sm btn-phoenix-primary"><i class="fa-solid fa-eye me-1"></i> {% trans "View Tranactions"|capfirst %}</a>
+                                <a href="{% url 'payment_details' request.dealer.slug journal.pk %}"
+                                   class="btn btn-sm btn-phoenix-primary"><i class="fa-solid fa-eye me-1"></i> {% trans "View Tranactions"|capfirst %}</a>
                             </td>
                         </tr>
                     {% empty %}
@@ -55,10 +56,8 @@
         </div>
         {% if page_obj.paginator.num_pages > 1 %}
             <div class="d-flex justify-content-end mt-3">
-                <div class="d-flex">
-                    {% include 'partials/pagination.html'%}
-                </div>
+                <div class="d-flex">{% include 'partials/pagination.html' %}</div>
             </div>
         {% endif %}
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/sales/saleorder_detail.html b/templates/sales/saleorder_detail.html
index 862f215d..b9aeb9f3 100644
--- a/templates/sales/saleorder_detail.html
+++ b/templates/sales/saleorder_detail.html
@@ -1,9 +1,7 @@
 {% extends "base.html" %}
 {% load i18n %}
 {% load custom_filters %}
-
 {% block title %}{{ page_title }} - {{ sale_order.formatted_order_id }}{% endblock %}
-
 {% block content %}
     <div class="container mt-4">
         <div class="card">
@@ -15,26 +13,28 @@
                     </span>
                 </h2>
             </div>
-
             <div class="card-body">
-            <!-- Basic Information -->
+                <!-- Basic Information -->
                 <div class="row mb-4">
                     <div class="col-md-4">
                         <h4>{% trans "Customer Information" %}</h4>
                         <p>
-                            <strong>{% trans "Name" %}:</strong> {{ sale_order.full_name }}<br>
+                            <strong>{% trans "Name" %}:</strong> {{ sale_order.full_name }}
+                            <br>
                             {% if sale_order.customer %}
-                                <strong>{% trans "Contact" %}:</strong> {{ sale_order.customer.phone_number }}<br>
+                                <strong>{% trans "Contact" %}:</strong> {{ sale_order.customer.phone_number }}
+                                <br>
                                 <strong>{% trans "Email" %}:</strong> {{ sale_order.customer.email }}
                             {% endif %}
                         </p>
                     </div>
-
                     <div class="col-md-4">
                         <h4>{% trans "Order Details" %}</h4>
                         <p>
-                            <strong>{% trans "Order Date" %}:</strong> {{ sale_order.order_date|date }}<br>
-                            <strong>{% trans "Dealer" %}:</strong> {{ sale_order.dealer.name }}<br>
+                            <strong>{% trans "Order Date" %}:</strong> {{ sale_order.order_date|date }}
+                            <br>
+                            <strong>{% trans "Dealer" %}:</strong> {{ sale_order.dealer.name }}
+                            <br>
                             <strong>{% trans "Created By" %}:</strong> {{ sale_order.created_by }}
                         </p>
                     </div>
@@ -47,14 +47,22 @@
                                     <div class="mb-3">
                                         <label for="status" class="form-label">{% trans "Status" %}</label>
                                         <select class="form-select" id="status" name="status">
-                                            <option value="PENDING_APPROVAL" {% if sale_order.status == 'PENDING_APPROVAL' %}selected{% endif %}>{% trans "Pending Approval" %}</option>
-                                            <option value="APPROVED" {% if sale_order.status == 'APPROVED' %}selected{% endif %}>{% trans "Approved" %}</option>
-                                            <option value="IN_FINANCING" {% if sale_order.status == 'IN_FINANCING' %}selected{% endif %}>{% trans "In Financing" %}</option>
-                                            <option value="PARTIALLY_PAID" {% if sale_order.status == 'PARTIALLY_PAID' %}selected{% endif %}>{% trans "Partially Paid" %}</option>
-                                            <option value="FULLY_PAID" {% if sale_order.status == 'FULLY_PAID' %}selected{% endif %}>{% trans "Fully Paid" %}</option>
-                                            <option value="PENDING_DELIVERY" {% if sale_order.status == 'PENDING_DELIVERY' %}selected{% endif %}>{% trans "Pending Delivery" %}</option>
-                                            <option value="DELIVERED" {% if sale_order.status == 'DELIVERED' %}selected{% endif %}>{% trans "Delivered" %}</option>
-                                            <option value="CANCELLED" {% if sale_order.status == 'CANCELLED' %}selected{% endif %}>{% trans "Cancelled" %}</option>
+                                            <option value="PENDING_APPROVAL"
+                                                    {% if sale_order.status == 'PENDING_APPROVAL' %}selected{% endif %}>{% trans "Pending Approval" %}</option>
+                                            <option value="APPROVED"
+                                                    {% if sale_order.status == 'APPROVED' %}selected{% endif %}>{% trans "Approved" %}</option>
+                                            <option value="IN_FINANCING"
+                                                    {% if sale_order.status == 'IN_FINANCING' %}selected{% endif %}>{% trans "In Financing" %}</option>
+                                            <option value="PARTIALLY_PAID"
+                                                    {% if sale_order.status == 'PARTIALLY_PAID' %}selected{% endif %}>{% trans "Partially Paid" %}</option>
+                                            <option value="FULLY_PAID"
+                                                    {% if sale_order.status == 'FULLY_PAID' %}selected{% endif %}>{% trans "Fully Paid" %}</option>
+                                            <option value="PENDING_DELIVERY"
+                                                    {% if sale_order.status == 'PENDING_DELIVERY' %}selected{% endif %}>{% trans "Pending Delivery" %}</option>
+                                            <option value="DELIVERED"
+                                                    {% if sale_order.status == 'DELIVERED' %}selected{% endif %}>{% trans "Delivered" %}</option>
+                                            <option value="CANCELLED"
+                                                    {% if sale_order.status == 'CANCELLED' %}selected{% endif %}>{% trans "Cancelled" %}</option>
                                         </select>
                                     </div>
                                     <button type="submit" class="btn btn-primary">{% trans "Save" %}</button>
@@ -63,8 +71,7 @@
                         </div>
                     {% endif %}
                 </div>
-
-            <!-- Estimate Information -->
+                <!-- Estimate Information -->
                 {% if sale_order.estimate %}
                     <div class="row mb-4">
                         <div class="col-12">
@@ -74,14 +81,25 @@
                                     <div class="row">
                                         <div class="col-md-6">
                                             <p>
-                                                <strong>{% trans "Estimate Number" %}:</strong> {{ sale_order.estimate.estimate_number }}<br>
-                                                <strong>{% trans "Date" %}:</strong> {{ sale_order.estimate.created|date }}<br>
-                                                <strong>{% trans "Status" %}:</strong> <span class="badge {% if sale_order.estimate.status == 'draft' %}bg-warning{% elif sale_order.estimate.status == 'in_review' %}bg-info{% elif sale_order.estimate.status == 'approved' %}bg-primary{% elif sale_order.estimate.status == 'completed' %}bg-success{% elif sale_order.estimate.status == 'canceled' %}bg-danger{% endif %}">{{ sale_order.estimate.get_status_display }}</span>
+                                                <strong>{% trans "Estimate Number" %}:</strong> {{ sale_order.estimate.estimate_number }}
+                                                <br>
+                                                <strong>{% trans "Date" %}:</strong> {{ sale_order.estimate.created|date }}
+                                                <br>
+                                                <strong>{% trans "Status" %}:</strong> <span class="badge
+              {% if sale_order.estimate.status == 'draft' %}
+                  bg-warning
+              {% elif sale_order.estimate.status == 'in_review' %}
+                  bg-info
+              {% elif sale_order.estimate.status == 'approved' %}
+                  bg-primary
+              {% elif sale_order.estimate.status == 'completed' %}
+                  bg-success
+              {% elif sale_order.estimate.status == 'canceled' %}
+                  bg-danger
+              {% endif %}">{{ sale_order.estimate.get_status_display }}</span>
                                             </p>
                                         </div>
-                                        <div class="col-md-6">
-
-                                        </div>
+                                        <div class="col-md-6"></div>
                                     </div>
                                     {% if sale_order.estimate.notes %}
                                         <div class="mt-3">
@@ -94,8 +112,7 @@
                         </div>
                     </div>
                 {% endif %}
-
-            <!-- Invoice Information -->
+                <!-- Invoice Information -->
                 {% if sale_order.invoice %}
                     <div class="row mb-4">
                         <div class="col-12">
@@ -105,10 +122,23 @@
                                     <div class="row">
                                         <div class="col-md-6">
                                             <p>
-                                                <strong>{% trans "Invoice Number" %}:</strong> {{ sale_order.invoice.invoice_number }}<br>
-                                                <strong>{% trans "Date" %}:</strong> {{ sale_order.invoice.created|date }}<br>
+                                                <strong>{% trans "Invoice Number" %}:</strong> {{ sale_order.invoice.invoice_number }}
+                                                <br>
+                                                <strong>{% trans "Date" %}:</strong> {{ sale_order.invoice.created|date }}
+                                                <br>
                                                 <strong>{% trans "Status" %}:</strong>
-                                                <span class="badge {% if sale_order.invoice.invoice_status == 'draft' %}bg-warning{% elif sale_order.invoice.invoice_status == 'in_review' %}bg-info{% elif sale_order.invoice.invoice_status == 'approved' %}bg-primary{% elif sale_order.invoice.invoice_status == 'paid' %}bg-success{% elif sale_order.invoice.invoice_status == 'declined' %}bg-danger{% endif %}">
+                                                <span class="badge
+                                                             {% if sale_order.invoice.invoice_status == 'draft' %}
+                                                                 bg-warning
+                                                             {% elif sale_order.invoice.invoice_status == 'in_review' %}
+                                                                 bg-info
+                                                             {% elif sale_order.invoice.invoice_status == 'approved' %}
+                                                                 bg-primary
+                                                             {% elif sale_order.invoice.invoice_status == 'paid' %}
+                                                                 bg-success
+                                                             {% elif sale_order.invoice.invoice_status == 'declined' %}
+                                                                 bg-danger
+                                                             {% endif %}">
                                                     {{ sale_order.invoice.invoice_status|capfirst }}
                                                 </span>
                                             </p>
@@ -118,20 +148,36 @@
                                                 <table>
                                                     <tbody>
                                                         <tr>
-                                                            <td style="padding-right: 0.5rem;"><strong>{% trans "Amount Paid" %}:</strong></td>
-                                                            <td style="padding-left: 0.5rem;"><span class="currency">{{CURRENCY}}</span>{{ sale_order.invoice.amount_paid|floatformat:2 }}</td>
+                                                            <td style="padding-right: 0.5rem;">
+                                                                <strong>{% trans "Amount Paid" %}:</strong>
+                                                            </td>
+                                                            <td style="padding-left: 0.5rem;">
+                                                                <span class="currency">{{ CURRENCY }}</span>{{ sale_order.invoice.amount_paid|floatformat:2 }}
+                                                            </td>
                                                         </tr>
                                                         <tr>
-                                                            <td style="padding-right: 0.5rem;"><strong>{% trans "Balance Due" %}:</strong></td>
-                                                            <td style="padding-left: 0.5rem;"><span class="currency">{{CURRENCY}}</span>{{ sale_order.invoice.amount_due|floatformat:2 }}</td>
+                                                            <td style="padding-right: 0.5rem;">
+                                                                <strong>{% trans "Balance Due" %}:</strong>
+                                                            </td>
+                                                            <td style="padding-left: 0.5rem;">
+                                                                <span class="currency">{{ CURRENCY }}</span>{{ sale_order.invoice.amount_due|floatformat:2 }}
+                                                            </td>
                                                         </tr>
                                                         <tr>
-                                                            <td style="padding-right: 0.5rem;"><strong>{% trans "Amount Unearned" %}:</strong></td>
-                                                            <td style="padding-left: 0.5rem;"><span class="currency">{{CURRENCY}}</span>{{ sale_order.invoice.amount_unearned|floatformat:2 }}</td>
+                                                            <td style="padding-right: 0.5rem;">
+                                                                <strong>{% trans "Amount Unearned" %}:</strong>
+                                                            </td>
+                                                            <td style="padding-left: 0.5rem;">
+                                                                <span class="currency">{{ CURRENCY }}</span>{{ sale_order.invoice.amount_unearned|floatformat:2 }}
+                                                            </td>
                                                         </tr>
                                                         <tr>
-                                                            <td style="padding-right: 0.5rem;"><strong>{% trans "Amount Receivable" %}:</strong></td>
-                                                            <td style="padding-left: 0.5rem;"><span class="currency">{{CURRENCY}}</span>{{ sale_order.invoice.amount_receivable|floatformat:2 }}</td>
+                                                            <td style="padding-right: 0.5rem;">
+                                                                <strong>{% trans "Amount Receivable" %}:</strong>
+                                                            </td>
+                                                            <td style="padding-left: 0.5rem;">
+                                                                <span class="currency">{{ CURRENCY }}</span>{{ sale_order.invoice.amount_receivable|floatformat:2 }}
+                                                            </td>
                                                         </tr>
                                                     </tbody>
                                                 </table>
@@ -149,8 +195,7 @@
                         </div>
                     </div>
                 {% endif %}
-
-            <!-- Ledger Information -->
+                <!-- Ledger Information -->
                 {% if sale_order.invoice.ledger %}
                     <div class="row mb-4">
                         <div class="col-12">
@@ -160,8 +205,12 @@
                                     <div class="row">
                                         <div class="col-md-6">
                                             <p>
-                                                <strong>{% trans "Ledger Number" %}: </strong><a href="{% url 'ledger_detail' dealer_slug=request.dealer.slug entity_slug=sale_order.invoice.ledger.entity.slug pk=sale_order.invoice.ledger.pk %}" target="_blank" rel="noopener noreferrer"> {{ sale_order.invoice.ledger }} <i class="fa fa-external-link" aria-hidden="true"></i></a><br>
-                                                <strong>{% trans "Date" %}:</strong> {{ sale_order.invoice.ledger.created|date }}<br>
+                                                <strong>{% trans "Ledger Number" %}:</strong><a href="{% url 'ledger_detail' dealer_slug=request.dealer.slug entity_slug=sale_order.invoice.ledger.entity.slug pk=sale_order.invoice.ledger.pk %}"
+   target="_blank"
+   rel="noopener noreferrer"> {{ sale_order.invoice.ledger }} <i class="fa fa-external-link" aria-hidden="true"></i></a>
+                                                <br>
+                                                <strong>{% trans "Date" %}:</strong> {{ sale_order.invoice.ledger.created|date }}
+                                                <br>
                                             </p>
                                         </div>
                                         <div class="col-md-6">
@@ -170,7 +219,9 @@
                                                     <tbody>
                                                         {% for je in sale_order.invoice.ledger.journal_entries.all %}
                                                             <tr>
-                                                                <td style="padding-right: 0.5rem;"><strong>{{je}}</strong></td>
+                                                                <td style="padding-right: 0.5rem;">
+                                                                    <strong>{{ je }}</strong>
+                                                                </td>
                                                             </tr>
                                                         {% endfor %}
                                                     </tbody>
@@ -189,15 +240,15 @@
                         </div>
                     </div>
                 {% endif %}
-
-            <!-- Delivery Information -->
+                <!-- Delivery Information -->
                 {% if sale_order.expected_delivery_date or sale_order.actual_delivery_date %}
                     <div class="row mb-4">
                         <div class="col-12">
                             <h4>{% trans "Delivery Information" %}</h4>
                             <p>
                                 {% if sale_order.expected_delivery_date %}
-                                    <strong>{% trans "Expected Delivery" %}:</strong> {{ sale_order.expected_delivery_date|date:"DATE_FORMAT" }}<br>
+                                    <strong>{% trans "Expected Delivery" %}:</strong> {{ sale_order.expected_delivery_date|date:"DATE_FORMAT" }}
+                                    <br>
                                 {% endif %}
                                 {% if sale_order.actual_delivery_date %}
                                     <strong>{% trans "Actual Delivery" %}:</strong> {{ sale_order.actual_delivery_date|date:"DATETIME_FORMAT" }}
@@ -206,8 +257,7 @@
                         </div>
                     </div>
                 {% endif %}
-
-            <!-- Cars/Items -->
+                <!-- Cars/Items -->
                 {% if sale_order.cars %}
                     <div class="row mb-4">
                         <div class="col-12">
@@ -230,7 +280,9 @@
                                                 <td>{{ car.id_car_model }}</td>
                                                 <td>{{ car.year }}</td>
                                                 <td>{{ car.vin }}</td>
-                                                <td><span class="currency">{{CURRENCY}}</span>{{ car.finances.selling_price|floatformat:2 }}</td>
+                                                <td>
+                                                    <span class="currency">{{ CURRENCY }}</span>{{ car.finances.selling_price|floatformat:2 }}
+                                                </td>
                                             </tr>
                                         {% endfor %}
                                     </tbody>
@@ -239,55 +291,46 @@
                         </div>
                     </div>
                 {% endif %}
-
-            <!-- Cancellation Info -->
+                <!-- Cancellation Info -->
                 {% if is_cancelled %}
                     <div class="row mb-4">
                         <div class="col-12">
                             <div class="alert alert-danger">
                                 <h4>{% trans "Order Cancelled" %}</h4>
                                 <p>
-                                    <strong>{% trans "Cancellation Date" %}:</strong> {{ sale_order.cancelled_date|date:"DATETIME_FORMAT" }}<br>
+                                    <strong>{% trans "Cancellation Date" %}:</strong> {{ sale_order.cancelled_date|date:"DATETIME_FORMAT" }}
+                                    <br>
                                     <strong>{% trans "Reason" %}:</strong> {{ sale_order.cancellation_reason }}
                                 </p>
                             </div>
                         </div>
                     </div>
                 {% endif %}
-
-            <!-- Comments -->
+                <!-- Comments -->
                 {% if sale_order.comments %}
                     <div class="row">
                         <div class="col-12">
                             <h4>{% trans "Comments" %}</h4>
                             <div class="card bg-light">
-                                <div class="card-body">
-                                    {{ sale_order.comments|linebreaks }}
-                                </div>
+                                <div class="card-body">{{ sale_order.comments|linebreaks }}</div>
                             </div>
                         </div>
                     </div>
                 {% endif %}
             </div>
-
             <div class="card-footer text-end">
-                <a href="{% url 'sales_list' request.dealer.slug %}" class="btn btn-phoenix-secondary">
-                    {% trans "Back to List" %}
-                </a>
-
-            <!-- Add links to view full estimate and invoice if they exist -->
+                <a href="{% url 'sales_list' request.dealer.slug %}"
+                   class="btn btn-phoenix-secondary">{% trans "Back to List" %}</a>
+                <!-- Add links to view full estimate and invoice if they exist -->
                 {% if sale_order.estimate %}
-                    <a href="{% url 'estimate_detail' request.dealer.slug sale_order.estimate.pk %}" class="btn btn-info ms-2">
-                        {% trans "View Full Estimate" %}
-                    </a>
+                    <a href="{% url 'estimate_detail' request.dealer.slug sale_order.estimate.pk %}"
+                       class="btn btn-info ms-2">{% trans "View Full Estimate" %}</a>
                 {% endif %}
-
                 {% if sale_order.invoice %}
-                    <a href="{% url 'invoice_detail' request.dealer.slug sale_order.invoice.pk %}" class="btn btn-info ms-2">
-                        {% trans "View Full Invoice" %}
-                    </a>
+                    <a href="{% url 'invoice_detail' request.dealer.slug sale_order.invoice.pk %}"
+                       class="btn btn-info ms-2">{% trans "View Full Invoice" %}</a>
                 {% endif %}
             </div>
         </div>
     </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/send-mail.html b/templates/send-mail.html
index 41a5dadc..1cd19c11 100644
--- a/templates/send-mail.html
+++ b/templates/send-mail.html
@@ -1,43 +1,41 @@
 {% extends "base.html" %}
-
 {% load i18n %}
-
-{% block title %}{{ _("Send Mail") }}{% endblock title %}
-
+{% block title %}
+    {{ _("Send Mail") }}
+{% endblock title %}
 {% block content %}
-  <div class="col">
-    <div class="card email-content">
-      <div class="card-body">
-        <form class="d-flex flex-column h-100" method="post">
-          {% csrf_token %}
-          <div class="row g-3 mb-2">
-            <div class="col-4">
-              {{form.from_email}}
+    <div class="col">
+        <div class="card email-content">
+            <div class="card-body">
+                <form class="d-flex flex-column h-100" method="post">
+                    {% csrf_token %}
+                    <div class="row g-3 mb-2">
+                        <div class="col-4">{{ form.from_email }}</div>
+                        <div class="col-4">{{ form.to_email }}</div>
+                        <div class="col-12">{{ form.subject }}</div>
+                    </div>
+                    <div class="mb-3 flex-1">{{ form.message }}</div>
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div class="d-flex">
+                            <label class="btn btn-link py-0 px-2 text-body fs-9" for="emailAttachment">
+                                <span class="fa-solid fa-paperclip"></span>
+                            </label>
+                            <input class="d-none" id="emailAttachment" type="file" />
+                            <label class="btn btn-link py-0 px-2 text-body fs-9" for="emailPhotos">
+                                <span class="fa-solid fa-image"></span>
+                            </label>
+                            <input class="d-none" id="emailPhotos" type="file" accept="image/*" />
+                        </div>
+                        <div class="d-flex">
+                            <a href="{% url 'estimate_detail' request.dealer.slug estimate.pk %}"
+                               class="btn btn-link text-body fs-10 text-decoration-none">Discard</a>
+                            <button class="btn btn-phoenix-primary fs-10" type="submit">
+                                Send<span class="fa-solid fa-paper-plane ms-1"></span>
+                            </button>
+                        </div>
+                    </div>
+                </form>
             </div>
-            <div class="col-4">
-              {{form.to_email}}
-            </div>
-            <div class="col-12">
-              {{form.subject}}
-            </div>
-          </div>
-          <div class="mb-3 flex-1">
-            {{form.message}}
-          </div>
-          <div class="d-flex justify-content-between align-items-center">
-            <div class="d-flex">
-              <label class="btn btn-link py-0 px-2 text-body fs-9" for="emailAttachment"> <span class="fa-solid fa-paperclip"></span></label>
-              <input class="d-none" id="emailAttachment" type="file" />
-              <label class="btn btn-link py-0 px-2 text-body fs-9" for="emailPhotos"><span class="fa-solid fa-image"></span></label>
-              <input class="d-none" id="emailPhotos" type="file" accept="image/*" />
-            </div>
-            <div class="d-flex">
-              <a href="{% url 'estimate_detail' request.dealer.slug estimate.pk %}" class="btn btn-link text-body fs-10 text-decoration-none">Discard</a>
-              <button class="btn btn-phoenix-primary fs-10" type="submit">Send<span class="fa-solid fa-paper-plane ms-1"></span></button>
-            </div>
-          </div>
-        </form>
-      </div>
+        </div>
     </div>
-  </div>
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
diff --git a/templates/shared/submit_button.html b/templates/shared/submit_button.html
index 5a8771af..19a8a962 100644
--- a/templates/shared/submit_button.html
+++ b/templates/shared/submit_button.html
@@ -1,14 +1,38 @@
-<button type="submit" id="submitBtn" class="btn btn-lg btn-phoenix-success md-me-2" onclick="loadingSpinner()">
-<i id="loadingSpinner" class="submitIcon fa-solid fa-floppy-disk me-1"></i>{{button_text}}
+<button class="btn btn-lg btn-phoenix-success md-me-2"
+        type="submit"
+        id="submit-button">
+    <span id="submit-icon">
+        <i class="fa-solid fa-floppy-disk me-1"></i>
+    </span>
+    <span id="submit-text">{{ title }}</span>
+    <span id="submit-spinner" class="d-none">
+        <i class="fas fa-spinner fa-spin me-1"></i>
+    </span>
 </button>
 <script>
-    function loadingSpinner() {
-        var spinner = document.getElementById("loadingSpinner");
-        var button = document.getElementById("submitBtn");
-        button.disabled = true;
-        spinner.classList.add("fa-spinner");
-        spinner.classList.add("fa-spin");
+  document.addEventListener('DOMContentLoaded', function() {
+    const forms = document.querySelectorAll('form');
 
-        return true;
-    }
+    forms.forEach(form => {
+      form.addEventListener('submit', function() {
+        const submitBtn = this.querySelector('#submit-button');
+        if (submitBtn) {
+        // Disable the button
+          submitBtn.disabled = true;
+
+        // Show spinner and hide save icon
+          const icon = submitBtn.querySelector('#submit-icon');
+          const text = submitBtn.querySelector('#submit-text');
+          const spinner = submitBtn.querySelector('#submit-spinner');
+
+          if (icon) icon.classList.add('d-none');
+          if (spinner) spinner.classList.remove('d-none');
+          if (text) text.textContent = '{{ _("Saving...") }}';
+
+        // Optional: Add a class for styling the disabled state
+          submitBtn.classList.add('btn-disabled');
+        }
+      });
+    });
+  });
 </script>
diff --git a/templates/subscriptions/subscription_plan.html b/templates/subscriptions/subscription_plan.html
index e2580597..24afb022 100644
--- a/templates/subscriptions/subscription_plan.html
+++ b/templates/subscriptions/subscription_plan.html
@@ -1,146 +1,157 @@
 {% extends 'base.html' %}
 {% load i18n %}
 {% load static %}
-
 {% block content %}
-  <div class="row">
-    <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 }} <span class="icon-saudi_riyal"></span></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>
+        <h2 class="mb-7">{{ _("Pricing") }}</h2>
         <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 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 }} <span class="icon-saudi_riyal"></span>
+                                                                    </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>
-          <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 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 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
+{% endblock content %}
diff --git a/templates/tasks/task_list.html b/templates/tasks/task_list.html
index ebb15240..bb358ee8 100644
--- a/templates/tasks/task_list.html
+++ b/templates/tasks/task_list.html
@@ -1,11 +1,9 @@
 {% extends "base.html" %}
 {% load static i18n %}
-
 {% block content %}
     <div class="container mt-4">
         <h1 class="mb-4">Background Tasks</h1>
-
-    <!-- Task Count and Refresh Button -->
+        <!-- Task Count and Refresh Button -->
         <div class="d-flex justify-content-between mb-3">
             <div>
                 <span class="badge bg-primary">Total Tasks: {{ page_obj.paginator.count }}</span>
@@ -16,8 +14,7 @@
                 </a>
             </div>
         </div>
-
-    <!-- Task Table -->
+        <!-- Task Table -->
         <div class="table-responsive">
             <table class="table table-sm fs-9 mb-0">
                 <thead>
@@ -38,9 +35,7 @@
                         <tr>
                             <td>{{ task.id }}</td>
                             <td>
-                                <span class="d-inline-block text-truncate" style="max-width: 150px;">
-                                    {{ task.task_name }}
-                                </span>
+                                <span class="d-inline-block text-truncate" style="max-width: 150px;">{{ task.task_name }}</span>
                             </td>
                             <td>
                                 {% if task.locked_at %}
@@ -64,15 +59,13 @@
                             </td>
                             <td>{{ task.attempts }}</td>
                             <td>{{ task.priority }}</td>
-                    {% comment %} <td>
+                            {% comment %} <td>
                         <div class="btn-group btn-group-sm">
-                            <button class="btn btn-sm btn-phoenix-primary" data-bs-toggle="modal"
-                                    data-bs-target="#taskDetailModal"
-                                    data-task-id="{{ task.id }}">
+                            <button class="btn btn-sm btn-phoenix-primary" data-bs-toggle="modal" data-bs-target="#taskDetailModal" data-task-id="{{ task.id }}">
                                 <i class="bi bi-eye"></i>
                             </button>
                         </div>
-                    </td> {% endcomment %}
+                            </td> {% endcomment %}
                         </tr>
                     {% empty %}
                         <tr>
@@ -82,8 +75,7 @@
                 </tbody>
             </table>
         </div>
-
-    <!-- Pagination -->
+        <!-- Pagination -->
         {% if page_obj.paginator.num_pages > 1 %}
             <nav aria-label="Task pagination">
                 <ul class="pagination justify-content-center">
@@ -95,13 +87,9 @@
                             <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
                         </li>
                     {% endif %}
-
                     <li class="page-item active">
-                        <span class="page-link">
-                            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
-                        </span>
+                        <span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
                     </li>
-
                     {% if page_obj.has_next %}
                         <li class="page-item">
                             <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
@@ -114,28 +102,33 @@
             </nav>
         {% endif %}
     </div>
-
-<!-- Task Detail Modal -->
-    <div class="modal fade" id="taskDetailModal" tabindex="-1" aria-labelledby="taskDetailModalLabel" aria-hidden="true">
+    <!-- Task Detail Modal -->
+    <div class="modal fade"
+         id="taskDetailModal"
+         tabindex="-1"
+         aria-labelledby="taskDetailModalLabel"
+         aria-hidden="true">
         <div class="modal-dialog modal-lg">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="taskDetailModalLabel">Task Details</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    <button type="button"
+                            class="btn-close"
+                            data-bs-dismiss="modal"
+                            aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    <div id="taskDetailsContent">
-                        Loading task details...
-                    </div>
+                    <div id="taskDetailsContent">Loading task details...</div>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-phoenix-secondary" data-bs-dismiss="modal">Close</button>
+                    <button type="button"
+                            class="btn btn-phoenix-secondary"
+                            data-bs-dismiss="modal">Close</button>
                 </div>
             </div>
         </div>
     </div>
 {% endblock %}
-
 {% block extra_js %}
     <script>
 // Load task details in modal
@@ -155,4 +148,4 @@
                 });
         });
     </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/terms_and_privacy.html b/templates/terms_and_privacy.html
index a4bce01e..0337a01d 100644
--- a/templates/terms_and_privacy.html
+++ b/templates/terms_and_privacy.html
@@ -1,7 +1,8 @@
 {% extends 'base.html' %}
 {% load static i18n %}
-
-{% block title %}{{ _("Terms of use and privacy policy")}}{% endblock title %}
+{% block title %}
+    {{ _("Terms of use and privacy policy") }}
+{% endblock title %}
 {% block content %}
     <style>
         h2 {
@@ -11,77 +12,87 @@
             font-size: 1.5em;
         }
     </style>
-
     <div class="content fs-9">
         <div class="row">
             <div class="col-6">
-        <!-- English Section -->
+                <!-- English Section -->
                 <h2>Date: 1/1/2025</h2>
                 <section id="terms">
                     <h2>Terms of Service</h2>
-                    <p>Welcome to <strong>Haikal</strong>, an advanced car inventory management platform owned and operated by <strong>Tenhal Information Technology Company</strong> ("we", "our", "us"). By accessing or using the Haikal system ("the Service"), you agree to be legally bound by the terms outlined below.</p>
+                    <p>
+                        Welcome to <strong>Haikal</strong>, an advanced car inventory management platform owned and operated by <strong>Tenhal Information Technology Company</strong> ("we", "our", "us"). By accessing or using the Haikal system ("the Service"), you agree to be legally bound by the terms outlined below.
+                    </p>
                     <h3>1. Acceptance of Terms</h3>
-                    <p>By using the Service, you confirm that you are authorized to act on behalf of a business entity, agree to these Terms of Service, and comply with all applicable laws and regulations.</p>
-
+                    <p>
+                        By using the Service, you confirm that you are authorized to act on behalf of a business entity, agree to these Terms of Service, and comply with all applicable laws and regulations.
+                    </p>
                     <h3>2. Description of Service</h3>
-                    <p>Haikal provides car dealers and authorized users with tools for managing car inventory, sales, branches, financial transactions, and analytics. Additional services may include integration with government systems, API access, and reporting modules.</p>
-
+                    <p>
+                        Haikal provides car dealers and authorized users with tools for managing car inventory, sales, branches, financial transactions, and analytics. Additional services may include integration with government systems, API access, and reporting modules.
+                    </p>
                     <h3>3. Account Registration & Security</h3>
                     <ul>
                         <li>You must register and maintain a secure account with accurate information.</li>
                         <li>You are solely responsible for any activity under your account.</li>
                         <li>You must notify us immediately if you suspect unauthorized access or breach of your account.</li>
                     </ul>
-
                     <h3>4. License and Restrictions</h3>
                     <ul>
-                        <li>We grant you a non-exclusive, non-transferable, revocable license to use the Service in accordance with these terms.</li>
+                        <li>
+                            We grant you a non-exclusive, non-transferable, revocable license to use the Service in accordance with these terms.
+                        </li>
                         <li>You may not copy, modify, distribute, resell, reverse-engineer, or decompile any part of the Service.</li>
                     </ul>
-
                     <h3>5. User Obligations</h3>
                     <ul>
                         <li>You agree not to upload illegal, harmful, or offensive data to the system.</li>
                         <li>You are responsible for maintaining compliance with data privacy regulations when inputting customer data.</li>
                         <li>You must not attempt to access systems or data not explicitly made available to you.</li>
                     </ul>
-
                     <h3>6. Intellectual Property</h3>
-                    <p>All content, software, user interface designs, databases, and trademarks within Haikal are the intellectual property of Tenhal Information Technology Company and are protected under local and international IP laws.</p>
-
+                    <p>
+                        All content, software, user interface designs, databases, and trademarks within Haikal are the intellectual property of Tenhal Information Technology Company and are protected under local and international IP laws.
+                    </p>
                     <h3>7. Service Availability & Modifications</h3>
                     <ul>
                         <li>We aim to provide 99.9% uptime but do not guarantee uninterrupted access.</li>
                         <li>We may modify or discontinue parts of the service at any time with or without notice.</li>
                     </ul>
-
                     <h3>8. Third-Party Integrations</h3>
-                    <p>We may integrate with external services such as VIN databases, payment processors, or government systems. Use of those services is subject to their own terms and privacy policies.</p>
-
+                    <p>
+                        We may integrate with external services such as VIN databases, payment processors, or government systems. Use of those services is subject to their own terms and privacy policies.
+                    </p>
                     <h3>9. Limitation of Liability</h3>
-                    <p>To the fullest extent permitted by law, Tenhal is not liable for indirect, incidental, punitive, or consequential damages resulting from your use of the Service. Our total liability is limited to the amount you paid us in the last 12 months.</p>
-
+                    <p>
+                        To the fullest extent permitted by law, Tenhal is not liable for indirect, incidental, punitive, or consequential damages resulting from your use of the Service. Our total liability is limited to the amount you paid us in the last 12 months.
+                    </p>
                     <h3>10. Termination</h3>
-                    <p>We may suspend or terminate your access if you violate these terms. Upon termination, your access to the Service and associated data may be revoked or deleted.</p>
-
+                    <p>
+                        We may suspend or terminate your access if you violate these terms. Upon termination, your access to the Service and associated data may be revoked or deleted.
+                    </p>
                     <h3>11. Governing Law</h3>
-                    <p>These terms are governed by the laws of the Kingdom of Saudi Arabia. Any disputes will be resolved exclusively in courts located in Riyadh.</p>
+                    <p>
+                        These terms are governed by the laws of the Kingdom of Saudi Arabia. Any disputes will be resolved exclusively in courts located in Riyadh.
+                    </p>
                 </section>
-
                 <hr>
-
                 <section id="privacy">
                     <h2>Privacy Policy</h2>
-
-                    <p>We value your privacy and are committed to protecting your personal and business data. This Privacy Policy explains how we collect, use, and protect your information when you use Haikal.</p>
-
+                    <p>
+                        We value your privacy and are committed to protecting your personal and business data. This Privacy Policy explains how we collect, use, and protect your information when you use Haikal.
+                    </p>
                     <h3>1. Information We Collect</h3>
                     <ul>
-                        <li><strong>Account Information:</strong> Name, email, phone number, user role, and login credentials.</li>
-                        <li><strong>Business Data:</strong> Inventory details, financial transactions, customer and supplier records.</li>
-                        <li><strong>Technical Data:</strong> IP addresses, browser types, login timestamps, session logs, device identifiers.</li>
+                        <li>
+                            <strong>Account Information:</strong> Name, email, phone number, user role, and login credentials.
+                        </li>
+                        <li>
+                            <strong>Business Data:</strong> Inventory details, financial transactions, customer and supplier records.
+                        </li>
+                        <li>
+                            <strong>Technical Data:</strong> IP addresses, browser types, login timestamps, session logs, device identifiers.
+                        </li>
                     </ul>
-
                     <h3>2. How We Use Your Information</h3>
                     <ul>
                         <li>To operate and improve the Service.</li>
@@ -89,111 +100,107 @@
                         <li>To provide customer support and respond to inquiries.</li>
                         <li>To comply with legal obligations and cooperate with regulators when required.</li>
                     </ul>
-
                     <h3>3. Data Sharing</h3>
                     <ul>
                         <li>We do not sell your information to third parties.</li>
                         <li>We may share data with trusted processors (e.g., hosting, support tools) under strict confidentiality terms.</li>
                         <li>We may disclose data to authorities when legally required.</li>
                     </ul>
-
                     <h3>4. Data Storage and Security</h3>
                     <ul>
                         <li>Your data is stored securely on encrypted servers with access control policies in place.</li>
                         <li>We apply firewalls, intrusion detection, and regular audits to safeguard information.</li>
                     </ul>
-
                     <h3>5. Your Rights</h3>
                     <ul>
                         <li>You have the right to access, correct, or request deletion of your data.</li>
                         <li>You may contact us to object to processing or request data portability.</li>
                     </ul>
-
                     <h3>6. Data Retention</h3>
-                    <p>We retain data as long as necessary to provide the service, comply with legal obligations, or enforce agreements. Upon request, we may anonymize or delete your data.</p>
-
+                    <p>
+                        We retain data as long as necessary to provide the service, comply with legal obligations, or enforce agreements. Upon request, we may anonymize or delete your data.
+                    </p>
                     <h3>7. Cookies and Tracking</h3>
-                    <p>We may use cookies to enhance your experience. These may include session cookies, authentication tokens, and analytics tools.</p>
-
+                    <p>
+                        We may use cookies to enhance your experience. These may include session cookies, authentication tokens, and analytics tools.
+                    </p>
                     <h3>8. International Data Transfers</h3>
-                    <p>If data is processed outside of Saudi Arabia, we ensure adequate protection via agreements and security standards aligned with applicable laws.</p>
-
+                    <p>
+                        If data is processed outside of Saudi Arabia, we ensure adequate protection via agreements and security standards aligned with applicable laws.
+                    </p>
                     <h3>9. Changes to this Policy</h3>
                     <p>We may revise this Privacy Policy from time to time. Updates will be posted here with a revised effective date.</p>
                 </section>
-
-
-
             </div>
             <div class="col-6" dir="rtl">
                 <h2>التاريخ: ١/١/٢٠٢٥</h2>
-        <!-- Arabic Section -->
+                <!-- Arabic Section -->
                 <section class="arabic">
                     <h2>شروط الخدمة</h2>
-                    <p>مرحبًا بك في <strong>هيكل</strong>، منصة متقدمة لإدارة مخزون السيارات، مملوكة وتديرها <strong>شركة تنحل لتقنية المعلومات</strong> ("نحن"، "خاصتنا"). باستخدامك لنظام هيكل، فإنك توافق على الالتزام القانوني بالشروط التالية:</p>
-
+                    <p>
+                        مرحبًا بك في <strong>هيكل</strong>، منصة متقدمة لإدارة مخزون السيارات، مملوكة وتديرها <strong>شركة تنحل لتقنية المعلومات</strong> ("نحن"، "خاصتنا"). باستخدامك لنظام هيكل، فإنك توافق على الالتزام القانوني بالشروط التالية:
+                    </p>
                     <h3>١. قبول الشروط</h3>
-                    <p>باستخدامك للخدمة، فإنك تؤكد أنك مفوض بالتصرف نيابة عن كيان تجاري، وتوافق على شروط الخدمة هذه، وتلتزم بجميع القوانين والأنظمة المعمول بها.</p>
-
+                    <p>
+                        باستخدامك للخدمة، فإنك تؤكد أنك مفوض بالتصرف نيابة عن كيان تجاري، وتوافق على شروط الخدمة هذه، وتلتزم بجميع القوانين والأنظمة المعمول بها.
+                    </p>
                     <h3>٢. وصف الخدمة</h3>
-                    <p>يوفر هيكل أدوات لتجار السيارات والمستخدمين المخولين لإدارة المخزون، المبيعات، الفروع، المعاملات المالية، والتحليلات. تشمل الخدمات الإضافية تكاملات مع أنظمة حكومية، وصول API، وتقارير.</p>
-
+                    <p>
+                        يوفر هيكل أدوات لتجار السيارات والمستخدمين المخولين لإدارة المخزون، المبيعات، الفروع، المعاملات المالية، والتحليلات. تشمل الخدمات الإضافية تكاملات مع أنظمة حكومية، وصول API، وتقارير.
+                    </p>
                     <h3>٣. التسجيل والحماية</h3>
                     <ul>
                         <li>يجب تسجيل حساب دقيق وآمن.</li>
                         <li>أنت مسؤول عن كل نشاط يتم عبر حسابك.</li>
                         <li>يجب إبلاغنا فورًا عند الاشتباه في اختراق الحساب.</li>
                     </ul>
-
                     <h3>٤. الترخيص والقيود</h3>
                     <ul>
                         <li>نمنحك ترخيصًا غير حصري وقابل للإلغاء لاستخدام الخدمة.</li>
                         <li>لا يحق لك نسخ، تعديل، توزيع، أو عكس هندسة أي جزء من الخدمة.</li>
                     </ul>
-
                     <h3>٥. التزامات المستخدم</h3>
                     <ul>
                         <li>عدم تحميل بيانات غير قانونية أو ضارة.</li>
                         <li>أنت مسؤول عن الامتثال لقوانين خصوصية البيانات.</li>
                         <li>لا تحاول الوصول لبيانات أو أنظمة غير مصرّح بها.</li>
                     </ul>
-
                     <h3>٦. الملكية الفكرية</h3>
                     <p>جميع المحتويات، البرمجيات، قواعد البيانات، والتصاميم تخص تنحل وتخضع للقوانين المحلية والدولية.</p>
-
                     <h3>٧. توفر الخدمة والتعديلات</h3>
                     <ul>
                         <li>نهدف لتوفير الخدمة بنسبة تشغيل 99.9٪ ولكن لا نضمن عدم الانقطاع.</li>
                         <li>قد نقوم بتحديث أو تعديل أو إيقاف الخدمة في أي وقت.</li>
                     </ul>
-
                     <h3>٨. تكامل الأطراف الخارجية</h3>
-                    <p>قد نتكامل مع خدمات خارجية مثل قواعد بيانات VIN، ومعالجات الدفع، والأنظمة الحكومية. يخضع استخدام هذه الخدمات لشروطها الخاصة.</p>
-
+                    <p>
+                        قد نتكامل مع خدمات خارجية مثل قواعد بيانات VIN، ومعالجات الدفع، والأنظمة الحكومية. يخضع استخدام هذه الخدمات لشروطها الخاصة.
+                    </p>
                     <h3>٩. حدود المسؤولية</h3>
                     <p>أقصى مسؤولية لنا عن أي ضرر غير مباشر أو عرضي تقتصر على ما دفعته خلال الـ 12 شهرًا الماضية.</p>
-
                     <h3>١٠. الإنهاء</h3>
                     <p>يجوز لنا إنهاء أو تعليق حسابك إذا انتهكت هذه الشروط. وقد يتم حذف بياناتك بعد الإنهاء.</p>
-
                     <h3>١١. القانون الحاكم</h3>
                     <p>تخضع هذه الشروط لقوانين المملكة العربية السعودية، ويكون الاختصاص القضائي لمحاكم الرياض فقط.</p>
                 </section>
-
                 <hr>
-
                 <section class="arabic">
                     <h2>سياسة الخصوصية</h2>
-
-                    <p>نحن نهتم بخصوصيتك وملتزمون بحماية بياناتك الشخصية والتجارية. توضح هذه السياسة كيفية جمع واستخدام وحماية بياناتك عند استخدام نظام هيكل.</p>
-
+                    <p>
+                        نحن نهتم بخصوصيتك وملتزمون بحماية بياناتك الشخصية والتجارية. توضح هذه السياسة كيفية جمع واستخدام وحماية بياناتك عند استخدام نظام هيكل.
+                    </p>
                     <h3>١. المعلومات التي نجمعها</h3>
                     <ul>
-                        <li><strong>بيانات الحساب:</strong> الاسم، البريد الإلكتروني، الهاتف، الدور، بيانات تسجيل الدخول.</li>
-                        <li><strong>بيانات الأعمال:</strong> تفاصيل السيارات، المعاملات المالية، سجلات العملاء والموردين.</li>
-                        <li><strong>بيانات تقنية:</strong> عناوين IP، أنواع المتصفحات، أوقات الدخول، سجلات الجلسات، معرفات الأجهزة.</li>
+                        <li>
+                            <strong>بيانات الحساب:</strong> الاسم، البريد الإلكتروني، الهاتف، الدور، بيانات تسجيل الدخول.
+                        </li>
+                        <li>
+                            <strong>بيانات الأعمال:</strong> تفاصيل السيارات، المعاملات المالية، سجلات العملاء والموردين.
+                        </li>
+                        <li>
+                            <strong>بيانات تقنية:</strong> عناوين IP، أنواع المتصفحات، أوقات الدخول، سجلات الجلسات، معرفات الأجهزة.
+                        </li>
                     </ul>
-
                     <h3>٢. استخدام البيانات</h3>
                     <ul>
                         <li>لتشغيل الخدمة وتحسينها.</li>
@@ -201,39 +208,31 @@
                         <li>لدعم العملاء والاستجابة للاستفسارات.</li>
                         <li>للالتزام بالقوانين والتعاون مع الجهات التنظيمية.</li>
                     </ul>
-
                     <h3>٣. مشاركة البيانات</h3>
                     <ul>
                         <li>لا نبيع بياناتك لأي طرف ثالث.</li>
                         <li>قد نشارك البيانات مع مزودين موثوقين بموجب اتفاقيات سرية.</li>
                         <li>قد نكشف عن البيانات للجهات المختصة عند الطلب القانوني.</li>
                     </ul>
-
                     <h3>٤. التخزين والحماية</h3>
                     <ul>
                         <li>تُخزن البيانات على خوادم مشفرة مع سياسات وصول صارمة.</li>
                         <li>نطبق جدران حماية، واكتشاف التسلل، ومراجعات دورية.</li>
                     </ul>
-
                     <h3>٥. حقوقك</h3>
                     <ul>
                         <li>لك الحق في الوصول إلى بياناتك أو تعديلها أو طلب حذفها.</li>
                         <li>يمكنك الاعتراض على المعالجة أو طلب نقل البيانات.</li>
                     </ul>
-
                     <h3>٦. الاحتفاظ بالبيانات</h3>
                     <p>نحتفظ بالبيانات طالما كانت ضرورية لتقديم الخدمة أو للامتثال للأنظمة. يمكننا إزالتها أو إخفاؤها حسب الطلب.</p>
-
                     <h3>٧. الكوكيز والتتبع</h3>
                     <p>قد نستخدم الكوكيز لتحسين تجربتك، بما في ذلك جلسات التوثيق والتحليلات.</p>
-
                     <h3>٨. نقل البيانات خارجياً</h3>
                     <p>إذا تم نقل البيانات خارج السعودية، نضمن حمايتها وفق اتفاقيات ومعايير قانونية مناسبة.</p>
-
                     <h3>٩. التحديثات</h3>
                     <p>قد نُجري تغييرات على هذه السياسة، وسيتم نشر التعديلات مع تاريخ سريان جديد.</p>
                 </section>
-
             </div>
         </div>
         <div class="row border-top">
@@ -242,9 +241,12 @@
                     <h2>Contact Information</h2>
                     <p>If you have any questions or concerns about these Terms or Privacy practices, please contact us:</p>
                     <p>
-                        <strong>Tenhal Information Technology Company</strong><br>
-                        Riyadh, Saudi Arabia<br>
-                        📧 <a href="mailto:info@tenhal.sa">info@tenhal.sa</a><br>
+                        <strong>Tenhal Information Technology Company</strong>
+                        <br>
+                        Riyadh, Saudi Arabia
+                        <br>
+                        📧 <a href="mailto:info@tenhal.sa">info@tenhal.sa</a>
+                        <br>
                         🌐 <a href="https://www.tenhal.sa" target="_blank">www.tenhal.sa</a>
                     </p>
                 </section>
@@ -254,18 +256,16 @@
                     <h2>معلومات التواصل</h2>
                     <p>لأي استفسار حول هذه الشروط أو سياسة الخصوصية، يرجى التواصل معنا:</p>
                     <p>
-                        <strong>شركة تنحل لتقنية المعلومات</strong><br>
-                        الرياض، المملكة العربية السعودية<br>
-                        📧 <a href="mailto:info@tenhal.sa">info@tenhal.sa</a><br>
+                        <strong>شركة تنحل لتقنية المعلومات</strong>
+                        <br>
+                        الرياض، المملكة العربية السعودية
+                        <br>
+                        📧 <a href="mailto:info@tenhal.sa">info@tenhal.sa</a>
+                        <br>
                         🌐 <a href="https://www.tenhal.sa" target="_blank">tenhal.sa</a>
                     </p>
                 </section>
             </div>
         </div>
     </div>
-
-
-
-
-
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
diff --git a/templates/test.html b/templates/test.html
index d0e82282..4ec78324 100644
--- a/templates/test.html
+++ b/templates/test.html
@@ -1,538 +1,643 @@
 <div class="brand-row">
-  <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>
-      </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>
-      </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 class="brand-title">
+        <h1>All Brands</h1>
     </div>
-    <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 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>
+            </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>
+            </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>
+        <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>
 </div>
diff --git a/templates/toast-alert.html b/templates/toast-alert.html
index ec63b7df..35655a40 100644
--- a/templates/toast-alert.html
+++ b/templates/toast-alert.html
@@ -1,5 +1,5 @@
 <div class="toast-container">
-  <script>
+    <script>
     {% if messages %}
       {% for message in messages %}
         try {
@@ -22,5 +22,5 @@
       {% endfor %}
     {% endif %}
     function notify(tag,msg){Toast.fire({icon: tag,titleText: msg});}
-  </script>
-</div>
\ No newline at end of file
+    </script>
+</div>
diff --git a/templates/tours/start_tour.html b/templates/tours/start_tour.html
index 32d40d8e..2507c3a4 100644
--- a/templates/tours/start_tour.html
+++ b/templates/tours/start_tour.html
@@ -1,24 +1,19 @@
 {% extends "base.html" %}
-
 {% block title %}{{ tour.name }} - Interactive Guide{% endblock %}
-
 {% block content %}
     <div class="container my-4">
         <h1>{{ tour.name }}</h1>
         <p class="lead">{{ tour.description }}</p>
-
         <div class="card mb-4">
             <div class="card-body">
                 <h5 class="card-title">Ready to Start</h5>
                 <p>This interactive guide will walk you through each step of the process.</p>
-                <button class="btn btn-primary" onclick="window.tourManager.loadTour('{{ tour.slug }}')">
-                    Start Guide Now
-                </button>
+                <button class="btn btn-primary"
+                        onclick="window.tourManager.loadTour('{{ tour.slug }}')">Start Guide Now</button>
             </div>
         </div>
     </div>
 {% endblock %}
-
 {% block extra_js %}
     <script>
     // Auto-start the tour after a short delay
@@ -28,4 +23,4 @@
             }, 1000);
         });
     </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/tours/tour_list.html b/templates/tours/tour_list.html
index 8b083485..510c11b2 100644
--- a/templates/tours/tour_list.html
+++ b/templates/tours/tour_list.html
@@ -1,12 +1,9 @@
 {% extends "base.html" %}
-
 {% block title %}Interactive Guides{% endblock %}
-
 {% block content %}
     <div class="container my-4">
         <h1>Interactive Guides</h1>
         <p class="lead">Learn how to use the car inventory system with these interactive step-by-step guides.</p>
-
         <div class="row mt-4">
             {% for tour in tours %}
                 <div class="col-md-4 mb-4">
@@ -22,9 +19,7 @@
                 </div>
             {% empty %}
                 <div class="col-12">
-                    <div class="alert alert-info">
-                        No interactive guides available at this time.
-                    </div>
+                    <div class="alert alert-info">No interactive guides available at this time.</div>
                 </div>
             {% endfor %}
         </div>
diff --git a/templates/two_factor/_wizard_actions.html b/templates/two_factor/_wizard_actions.html
index a5d6db79..6b168038 100644
--- a/templates/two_factor/_wizard_actions.html
+++ b/templates/two_factor/_wizard_actions.html
@@ -1,14 +1,13 @@
 {% load i18n %}
-
 {% if cancel_url %}
-  <a href="{{ cancel_url }}"
-     class="float-right btn btn-link">{% trans "Cancel" %}</a>
+    <a href="{{ cancel_url }}" class="float-right btn btn-link">{% trans "Cancel" %}</a>
 {% endif %}
 {% if wizard.steps.prev %}
-  <button name="wizard_goto_step" type="submit"
-          value="{{ wizard.steps.prev }}"
-          class="btn btn-phoenix-secondary">{% trans "Back" %}</button>
+    <button name="wizard_goto_step"
+            type="submit"
+            value="{{ wizard.steps.prev }}"
+            class="btn btn-phoenix-secondary">{% trans "Back" %}</button>
 {% else %}
-  <button disabled name="" type="button" class="btn">{% trans "Back" %}</button>
+    <button disabled name="" type="button" class="btn">{% trans "Back" %}</button>
 {% endif %}
 <button type="submit" class="btn btn-phoenix-primary">{% trans "Next" %}</button>
diff --git a/templates/two_factor/_wizard_forms.html b/templates/two_factor/_wizard_forms.html
index 46ce1b4a..7abb26eb 100644
--- a/templates/two_factor/_wizard_forms.html
+++ b/templates/two_factor/_wizard_forms.html
@@ -1,4 +1,4 @@
 <table class="mb-3">
-  {{ wizard.management_form }}
-  {{ wizard.form.as_table }}
+    {{ wizard.management_form }}
+    {{ wizard.form.as_table }}
 </table>
diff --git a/templates/two_factor/core/backup_tokens.html b/templates/two_factor/core/backup_tokens.html
index a35dca9b..9763d053 100644
--- a/templates/two_factor/core/backup_tokens.html
+++ b/templates/two_factor/core/backup_tokens.html
@@ -1,28 +1,32 @@
 {% extends "two_factor/_base_focus.html" %}
 {% load i18n %}
-
 {% block content %}
-  <h1>{% block title %}{% trans "Backup Tokens" %}{% endblock %}</h1>
-  <p>{% blocktrans trimmed %}Backup tokens can be used when your primary and backup
-    phone numbers aren't available. The backup tokens below can be used
-    for login verification. If you've used up all your backup tokens, you
-    can generate a new set of backup tokens. Only the backup tokens shown
-    below will be valid.{% endblocktrans %}</p>
-
-  {% if device.token_set.count %}
-    <ul>
-      {% for token in device.token_set.all %}
-        <li>{{ token.token }}</li>
-      {% endfor %}
-    </ul>
-    <p>{% blocktrans %}Print these tokens and keep them somewhere safe.{% endblocktrans %}</p>
-  {% else %}
-    <p>{% trans "You don't have any backup codes yet." %}</p>
-  {% endif %}
-
-  <form method="post">{% csrf_token %}{{ form.as_p }}
-    <a href="{% url 'two_factor:profile'%}"
-       class="float-right btn btn-link">{% trans "Back to Account Security" %}</a>
-    <button class="btn btn-phoenix-primary" type="submit">{% trans "Generate Tokens" %}</button>
-  </form>
+    <h1>
+        {% block title %}
+            {% trans "Backup Tokens" %}
+        {% endblock %}
+    </h1>
+    <p>
+        {% blocktrans trimmed %}
+            Backup tokens can be used when your primary and backup
+            phone numbers aren't available. The backup tokens below can be used
+            for login verification. If you've used up all your backup tokens, you
+            can generate a new set of backup tokens. Only the backup tokens shown
+            below will be valid.
+        {% endblocktrans %}
+    </p>
+    {% if device.token_set.count %}
+        <ul>
+            {% for token in device.token_set.all %}<li>{{ token.token }}</li>{% endfor %}
+        </ul>
+        <p>{% blocktrans %}Print these tokens and keep them somewhere safe.{% endblocktrans %}</p>
+    {% else %}
+        <p>{% trans "You don't have any backup codes yet." %}</p>
+    {% endif %}
+    <form method="post">
+        {% csrf_token %}{{ form.as_p }}
+        <a href="{% url 'two_factor:profile' %}"
+           class="float-right btn btn-link">{% trans "Back to Account Security" %}</a>
+        <button class="btn btn-phoenix-primary" type="submit">{% trans "Generate Tokens" %}</button>
+    </form>
 {% endblock %}
diff --git a/templates/two_factor/core/login.html b/templates/two_factor/core/login.html
index 3d4dd12b..aace82bb 100644
--- a/templates/two_factor/core/login.html
+++ b/templates/two_factor/core/login.html
@@ -1,60 +1,61 @@
 {% extends "base.html" %}
 {% load i18n %}
 {% load two_factor_tags %}
-
-{% block extra_media %}
-  {{ form.media }}
-{% endblock %}
-
+{% block extra_media %}{{ form.media }}{% endblock %}
 {% block content %}
-  <h1>{% block title %}{% trans "Login" %}{% endblock %}</h1>
-
-  {% if wizard.steps.current == 'auth' %}
-    <p>{% blocktrans %}Enter your credentials.{% endblocktrans %}</p>
-  {% elif wizard.steps.current == 'token' %}
-    <p>{{ device|as_verbose_action }}</p>
-  {% elif wizard.steps.current == 'backup' %}
-    <p>{% blocktrans trimmed %}Use this form for entering backup tokens for logging in.
-      These tokens have been generated for you to print and keep safe. Please
-      enter one of these backup tokens to login to your account.{% endblocktrans %}</p>
-  {% endif %}
-
-  <form action="" method="post">
-    {% block main_form_content %}
-      {% csrf_token %}
-      {% include "two_factor/_wizard_forms.html" %}
-
-    {# hidden submit button to enable [enter] key #}
-      <input type="submit" value="" hidden />
-
-      {% if other_devices %}
-        <p>{% trans "Or, alternatively, use one of your other authentication methods:" %}</p>
+    <h1>
+        {% block title %}
+            {% trans "Login" %}
+        {% endblock %}
+    </h1>
+    {% if wizard.steps.current == 'auth' %}
+        <p>{% blocktrans %}Enter your credentials.{% endblocktrans %}</p>
+    {% elif wizard.steps.current == 'token' %}
+        <p>{{ device|as_verbose_action }}</p>
+    {% elif wizard.steps.current == 'backup' %}
         <p>
-          {% for other in other_devices %}
-            <button name="challenge_device" value="{{ other.persistent_id }}"
-                    class="btn btn-phoenix-secondary btn-block" type="submit">
-              {{ other|as_action }}
-            </button>
-          {% endfor %}</p>
-      {% endif %}
-
-      {% include "two_factor/_wizard_actions.html" %}
-    {% endblock %}
-  </form>
-
-  {% block 'backup_tokens' %}
-    {% if backup_tokens %}
-      <hr>
-      <div class="backup_tokens_form">
-        <form action="" method="post">
-          {% csrf_token %}
-          <p>{% trans "As a last resort, you can use a backup token:" %}</p>
-          <p>
-            <button name="wizard_goto_step" type="submit" value="backup"
-                    class="btn btn-sm btn-secondary btn-block">{% trans "Use Backup Token" %}</button>
-          </p>
-        </form>
-      </div>
+            {% blocktrans trimmed %}
+                Use this form for entering backup tokens for logging in.
+                These tokens have been generated for you to print and keep safe. Please
+                enter one of these backup tokens to login to your account.
+            {% endblocktrans %}
+        </p>
     {% endif %}
-  {% endblock %}
+    <form action="" method="post">
+        {% block main_form_content %}
+            {% csrf_token %}
+            {% include "two_factor/_wizard_forms.html" %}
+            {# hidden submit button to enable [enter] key #}
+            <input type="submit" value="" hidden />
+            {% if other_devices %}
+                <p>{% trans "Or, alternatively, use one of your other authentication methods:" %}</p>
+                <p>
+                    {% for other in other_devices %}
+                        <button name="challenge_device"
+                                value="{{ other.persistent_id }}"
+                                class="btn btn-phoenix-secondary btn-block"
+                                type="submit">{{ other|as_action }}</button>
+                    {% endfor %}
+                </p>
+            {% endif %}
+            {% include "two_factor/_wizard_actions.html" %}
+        {% endblock %}
+    </form>
+    {% block 'backup_tokens' %}
+        {% if backup_tokens %}
+            <hr>
+            <div class="backup_tokens_form">
+                <form action="" method="post">
+                    {% csrf_token %}
+                    <p>{% trans "As a last resort, you can use a backup token:" %}</p>
+                    <p>
+                        <button name="wizard_goto_step"
+                                type="submit"
+                                value="backup"
+                                class="btn btn-sm btn-secondary btn-block">{% trans "Use Backup Token" %}</button>
+                    </p>
+                </form>
+            </div>
+        {% endif %}
+    {% endblock %}
 {% endblock %}
diff --git a/templates/two_factor/core/otp_required.html b/templates/two_factor/core/otp_required.html
index 8f0c913b..72ac3fe6 100644
--- a/templates/two_factor/core/otp_required.html
+++ b/templates/two_factor/core/otp_required.html
@@ -1,20 +1,28 @@
 {% extends "base.html" %}
 {% load i18n %}
-
 {% block content %}
-  <h1>{% block title %}{% trans "Permission Denied" %}{% endblock %}</h1>
-
-  <p>{% blocktrans trimmed %}The page you requested, enforces users to verify using
-    two-factor authentication for security reasons. You need to enable these
-    security features in order to access this page.{% endblocktrans %}</p>
-
-  <p>{% blocktrans trimmed %}Two-factor authentication is not enabled for your
-    account. Enable two-factor authentication for enhanced account
-    security.{% endblocktrans %}</p>
-  <p>
-    <a href="javascript:history.go(-1)"
-       class="float-right btn btn-link">{% trans "Go back" %}</a>
-    <a href="{% url 'two_factor:setup' %}" class="btn btn-phoenix-primary">
-      {% trans "Enable Two-Factor Authentication" %}</a>
-  </p>
+    <h1>
+        {% block title %}
+            {% trans "Permission Denied" %}
+        {% endblock %}
+    </h1>
+    <p>
+        {% blocktrans trimmed %}
+            The page you requested, enforces users to verify using
+            two-factor authentication for security reasons. You need to enable these
+            security features in order to access this page.
+        {% endblocktrans %}
+    </p>
+    <p>
+        {% blocktrans trimmed %}
+            Two-factor authentication is not enabled for your
+            account. Enable two-factor authentication for enhanced account
+            security.
+        {% endblocktrans %}
+    </p>
+    <p>
+        <a href="javascript:history.go(-1)" class="float-right btn btn-link">{% trans "Go back" %}</a>
+        <a href="{% url 'two_factor:setup' %}" class="btn btn-phoenix-primary">
+        {% trans "Enable Two-Factor Authentication" %}</a>
+    </p>
 {% endblock %}
diff --git a/templates/two_factor/core/phone_register.html b/templates/two_factor/core/phone_register.html
index 7bb95e79..fc39545f 100644
--- a/templates/two_factor/core/phone_register.html
+++ b/templates/two_factor/core/phone_register.html
@@ -1,24 +1,32 @@
 {% extends "base.html" %}
 {% load i18n %}
-
 {% block content %}
-  <h1>{% block title %}{% trans "Add Backup Phone" %}{% endblock %}</h1>
-
-  {% if wizard.steps.current == 'setup' %}
-    <p>{% blocktrans trimmed %}You'll be adding a backup phone number to your
-      account. This number will be used if your primary method of
-      registration is not available.{% endblocktrans %}</p>
-  {% elif wizard.steps.current == 'validation' %}
-    <p>{% blocktrans trimmed %}We've sent a token to your phone number. Please
-      enter the token you've received.{% endblocktrans %}</p>
-  {% endif %}
-
-  <form action="" method="post">{% csrf_token %}
-    {% include "two_factor/_wizard_forms.html" %}
-
-    {# hidden submit button to enable [enter] key #}
-    <input type="submit" value="" hidden />
-
-    {% include "two_factor/_wizard_actions.html" %}
-  </form>
+    <h1>
+        {% block title %}
+            {% trans "Add Backup Phone" %}
+        {% endblock %}
+    </h1>
+    {% if wizard.steps.current == 'setup' %}
+        <p>
+            {% blocktrans trimmed %}
+                You'll be adding a backup phone number to your
+                account. This number will be used if your primary method of
+                registration is not available.
+            {% endblocktrans %}
+        </p>
+    {% elif wizard.steps.current == 'validation' %}
+        <p>
+            {% blocktrans trimmed %}
+                We've sent a token to your phone number. Please
+                enter the token you've received.
+            {% endblocktrans %}
+        </p>
+    {% endif %}
+    <form action="" method="post">
+        {% csrf_token %}
+        {% include "two_factor/_wizard_forms.html" %}
+        {# hidden submit button to enable [enter] key #}
+        <input type="submit" value="" hidden />
+        {% include "two_factor/_wizard_actions.html" %}
+    </form>
 {% endblock %}
diff --git a/templates/two_factor/core/setup.html b/templates/two_factor/core/setup.html
index 65cc582d..550af976 100644
--- a/templates/two_factor/core/setup.html
+++ b/templates/two_factor/core/setup.html
@@ -1,64 +1,104 @@
 {% extends "base.html" %}
 {% load i18n %}
-
-{% block extra_media %}
-  {{ form.media }}
-{% endblock %}
-
+{% block extra_media %}{{ form.media }}{% endblock %}
 {% block content %}
-  <h1>{% block title %}{% trans "Enable Two-Factor Authentication" %}{% endblock %}</h1>
-  {% if wizard.steps.current == 'welcome' %}
-    <p>{% blocktrans trimmed %}You are about to take your account security to the
-      next level. Follow the steps in this wizard to enable two-factor
-      authentication.{% endblocktrans %}</p>
-  {% elif wizard.steps.current == 'method' %}
-    <p>{% blocktrans trimmed %}Please select which authentication method you would
-      like to use.{% endblocktrans %}</p>
-  {% elif wizard.steps.current == 'generator' %}
-    <p>{% blocktrans trimmed %}To start using a token generator, please use your
-      smartphone to scan the QR code below. For example, use Google
-      Authenticator.{% endblocktrans %}</p>
-    <p><img src="{{ QR_URL }}" alt="QR Code" class="bg-white"/></p>
-    <p>{% blocktrans trimmed %}Alternatively you can use the following secret to
-      setup TOTP in your authenticator or password manager manually.{% endblocktrans %}</p>
-    <p>{% translate "TOTP Secret:" %} <a href="{{ otpauth_url }}">{{ secret_key }}</a></p>
-    <p>{% blocktrans %}Then, enter the token generated by the app.{% endblocktrans %}</p>
-
-  {% elif wizard.steps.current == 'sms' %}
-    <p>{% blocktrans trimmed %}Please enter the phone number you wish to receive the
-      text messages on. This number will be validated in the next step.
-    {% endblocktrans %}</p>
-  {% elif wizard.steps.current == 'call' %}
-    <p>{% blocktrans trimmed %}Please enter the phone number you wish to be called on.
-      This number will be validated in the next step. {% endblocktrans %}</p>
-  {% elif wizard.steps.current == 'validation' %}
-    {% if challenge_succeeded %}
-      {% if device.method == 'call' %}
-        <p>{% blocktrans trimmed %}We are calling your phone right now, please enter the
-          digits you hear.{% endblocktrans %}</p>
-      {% elif device.method == 'sms' %}
-        <p>{% blocktrans trimmed %}We sent you a text message, please enter the tokens we
-          sent.{% endblocktrans %}</p>
-      {% endif %}
-    {% else %}
-      <p class="alert alert-warning" role="alert">{% blocktrans trimmed %}We've
-        encountered an issue with the selected authentication method. Please
-        go back and verify that you entered your information correctly, try
-        again, or use a different authentication method instead. If the issue
-        persists, contact the site administrator.{% endblocktrans %}</p>
+    <h1>
+        {% block title %}
+            {% trans "Enable Two-Factor Authentication" %}
+        {% endblock %}
+    </h1>
+    {% if wizard.steps.current == 'welcome' %}
+        <p>
+            {% blocktrans trimmed %}
+                You are about to take your account security to the
+                next level. Follow the steps in this wizard to enable two-factor
+                authentication.
+            {% endblocktrans %}
+        </p>
+    {% elif wizard.steps.current == 'method' %}
+        <p>
+            {% blocktrans trimmed %}
+                Please select which authentication method you would
+                like to use.
+            {% endblocktrans %}
+        </p>
+    {% elif wizard.steps.current == 'generator' %}
+        <p>
+            {% blocktrans trimmed %}
+                To start using a token generator, please use your
+                smartphone to scan the QR code below. For example, use Google
+                Authenticator.
+            {% endblocktrans %}
+        </p>
+        <p>
+            <img src="{{ QR_URL }}" alt="QR Code" class="bg-white" />
+        </p>
+        <p>
+            {% blocktrans trimmed %}
+                Alternatively you can use the following secret to
+                setup TOTP in your authenticator or password manager manually.
+            {% endblocktrans %}
+        </p>
+        <p>
+            {% translate "TOTP Secret:" %} <a href="{{ otpauth_url }}">{{ secret_key }}</a>
+        </p>
+        <p>{% blocktrans %}Then, enter the token generated by the app.{% endblocktrans %}</p>
+    {% elif wizard.steps.current == 'sms' %}
+        <p>
+            {% blocktrans trimmed %}
+                Please enter the phone number you wish to receive the
+                text messages on. This number will be validated in the next step.
+            {% endblocktrans %}
+        </p>
+    {% elif wizard.steps.current == 'call' %}
+        <p>
+            {% blocktrans trimmed %}
+                Please enter the phone number you wish to be called on.
+                This number will be validated in the next step.
+            {% endblocktrans %}
+        </p>
+    {% elif wizard.steps.current == 'validation' %}
+        {% if challenge_succeeded %}
+            {% if device.method == 'call' %}
+                <p>
+                    {% blocktrans trimmed %}
+                        We are calling your phone right now, please enter the
+                        digits you hear.
+                    {% endblocktrans %}
+                </p>
+            {% elif device.method == 'sms' %}
+                <p>
+                    {% blocktrans trimmed %}
+                        We sent you a text message, please enter the tokens we
+                        sent.
+                    {% endblocktrans %}
+                </p>
+            {% endif %}
+        {% else %}
+            <p class="alert alert-warning" role="alert">
+                {% blocktrans trimmed %}
+                    We've
+                    encountered an issue with the selected authentication method. Please
+                    go back and verify that you entered your information correctly, try
+                    again, or use a different authentication method instead. If the issue
+                    persists, contact the site administrator.
+                {% endblocktrans %}
+            </p>
+        {% endif %}
+    {% elif wizard.steps.current == 'yubikey' %}
+        <p>
+            {% blocktrans trimmed %}
+                To identify and verify your YubiKey, please insert a
+                token in the field below. Your YubiKey will be linked to your
+                account.
+            {% endblocktrans %}
+        </p>
     {% endif %}
-  {% elif wizard.steps.current == 'yubikey' %}
-    <p>{% blocktrans trimmed %}To identify and verify your YubiKey, please insert a
-      token in the field below. Your YubiKey will be linked to your
-      account.{% endblocktrans %}</p>
-  {% endif %}
-
-  <form action="" method="post">{% csrf_token %}
-    {% include "two_factor/_wizard_forms.html" %}
-
-    {# hidden submit button to enable [enter] key #}
-    <input type="submit" value="" hidden />
-
-    {% include "two_factor/_wizard_actions.html" %}
-  </form>
+    <form action="" method="post">
+        {% csrf_token %}
+        {% include "two_factor/_wizard_forms.html" %}
+        {# hidden submit button to enable [enter] key #}
+        <input type="submit" value="" hidden />
+        {% include "two_factor/_wizard_actions.html" %}
+    </form>
 {% endblock %}
diff --git a/templates/two_factor/core/setup_complete.html b/templates/two_factor/core/setup_complete.html
index e676d11a..4409eab2 100644
--- a/templates/two_factor/core/setup_complete.html
+++ b/templates/two_factor/core/setup_complete.html
@@ -1,24 +1,35 @@
 {% extends "base.html" %}
 {% load i18n %}
-
 {% block content %}
-  <h1>{% block title %}{% trans "Enable Two-Factor Authentication" %}{% endblock %}</h1>
-
-  <p>{% blocktrans trimmed %}Congratulations, you've successfully enabled two-factor
-    authentication.{% endblocktrans %}</p>
-
-  {% if not phone_methods %}
-    <p><a href="{% url 'two_factor:profile' %}"
-          class="btn btn-block btn-phoenix-secondary">{% trans "Back to Account Security" %}</a></p>
-  {% else %}
-    <p>{% blocktrans trimmed %}However, it might happen that you don't have access to
-      your primary token device. To enable account recovery, add a phone
-      number.{% endblocktrans %}</p>
-
-    <a href="{% url 'two_factor:profile' %}"
-       class="float-right btn btn-link">{% trans "Back to Account Security" %}</a>
-    <p><a href="{% url 'two_factor:phone_create' %}"
-          class="btn btn-phoenix-success">{% trans "Add Phone Number" %}</a></p>
-  {% endif %}
-
+    <h1>
+        {% block title %}
+            {% trans "Enable Two-Factor Authentication" %}
+        {% endblock %}
+    </h1>
+    <p>
+        {% blocktrans trimmed %}
+            Congratulations, you've successfully enabled two-factor
+            authentication.
+        {% endblocktrans %}
+    </p>
+    {% if not phone_methods %}
+        <p>
+            <a href="{% url 'two_factor:profile' %}"
+               class="btn btn-block btn-phoenix-secondary">{% trans "Back to Account Security" %}</a>
+        </p>
+    {% else %}
+        <p>
+            {% blocktrans trimmed %}
+                However, it might happen that you don't have access to
+                your primary token device. To enable account recovery, add a phone
+                number.
+            {% endblocktrans %}
+        </p>
+        <a href="{% url 'two_factor:profile' %}"
+           class="float-right btn btn-link">{% trans "Back to Account Security" %}</a>
+        <p>
+            <a href="{% url 'two_factor:phone_create' %}"
+               class="btn btn-phoenix-success">{% trans "Add Phone Number" %}</a>
+        </p>
+    {% endif %}
 {% endblock %}
diff --git a/templates/two_factor/profile/disable.html b/templates/two_factor/profile/disable.html
index 6db5fed1..0d22a8bf 100644
--- a/templates/two_factor/profile/disable.html
+++ b/templates/two_factor/profile/disable.html
@@ -1,14 +1,22 @@
 {% extends "base.html" %}
 {% load i18n %}
-
 {% block content %}
-  <h1>{% block title %}{% trans "Disable Two-factor Authentication" %}{% endblock %}</h1>
-  <p>{% blocktrans trimmed %}You are about to disable two-factor authentication. This
-    weakens your account security, are you sure?{% endblocktrans %}</p>
-  <form method="post">
-    {% csrf_token %}
-    <table>{{ form.as_table }}</table>
-    <button class="btn btn-phoenix-danger"
-            type="submit">{% trans "Disable" %}</button>
-  </form>
+    <h1>
+        {% block title %}
+            {% trans "Disable Two-factor Authentication" %}
+        {% endblock %}
+    </h1>
+    <p>
+        {% blocktrans trimmed %}
+            You are about to disable two-factor authentication. This
+            weakens your account security, are you sure?
+        {% endblocktrans %}
+    </p>
+    <form method="post">
+        {% csrf_token %}
+        <table>
+            {{ form.as_table }}
+        </table>
+        <button class="btn btn-phoenix-danger" type="submit">{% trans "Disable" %}</button>
+    </form>
 {% endblock %}
diff --git a/templates/two_factor/profile/profile.html b/templates/two_factor/profile/profile.html
index ecd4b2e5..17049ecb 100644
--- a/templates/two_factor/profile/profile.html
+++ b/templates/two_factor/profile/profile.html
@@ -1,60 +1,80 @@
 {% extends "base.html" %}
 {% load i18n %}
 {% load two_factor_tags %}
-
 {% block content %}
-  <h1>{% block title %}{% trans "Account Security" %}{% endblock %}</h1>
-
-  {% if default_device %}
-    <p>{% blocktrans with primary=default_device|as_action %}Primary method: {{ primary }}{% endblocktrans %}</p>
-
-    {% if available_phone_methods %}
-      <h2>{% trans "Backup Phone Numbers" %}</h2>
-      <p>{% blocktrans trimmed %}If your primary method is not available, we are able to
-        send backup tokens to the phone numbers listed below.{% endblocktrans %}</p>
-      {% if backup_phones %}
-        <ul>
-          {% for phone in backup_phones %}
-            <li>
-              {{ phone|as_action }}
-              <form method="post" action="{% url 'two_factor:phone_delete' phone.id %}"
-                    onsubmit="return confirm({% trans 'Are you sure?' %})">
-                {% csrf_token %}
-                <button class="btn btn-sm btn-phoenix-warning"
-                        type="submit">{% trans "Unregister" %}</button>
-              </form>
-            </li>
-          {% endfor %}
-        </ul>
-      {% endif %}
-      <p><a href="{% url 'two_factor:phone_create' %}"
-            class="btn btn-phoenix-info">{% trans "Add Phone Number" %}</a></p>
+    <h1>
+        {% block title %}
+            {% trans "Account Security" %}
+        {% endblock %}
+    </h1>
+    {% if default_device %}
+        <p>{% blocktrans with primary=default_device|as_action %}Primary method: {{ primary }}{% endblocktrans %}</p>
+        {% if available_phone_methods %}
+            <h2>{% trans "Backup Phone Numbers" %}</h2>
+            <p>
+                {% blocktrans trimmed %}
+                    If your primary method is not available, we are able to
+                    send backup tokens to the phone numbers listed below.
+                {% endblocktrans %}
+            </p>
+            {% if backup_phones %}
+                <ul>
+                    {% for phone in backup_phones %}
+                        <li>
+                            {{ phone|as_action }}
+                            <form method="post"
+                                  action="{% url 'two_factor:phone_delete' phone.id %}"
+                                  onsubmit="return confirm({% trans 'Are you sure?' %})">
+                                {% csrf_token %}
+                                <button class="btn btn-sm btn-phoenix-warning" type="submit">{% trans "Unregister" %}</button>
+                            </form>
+                        </li>
+                    {% endfor %}
+                </ul>
+            {% endif %}
+            <p>
+                <a href="{% url 'two_factor:phone_create' %}"
+                   class="btn btn-phoenix-info">{% trans "Add Phone Number" %}</a>
+            </p>
+        {% endif %}
+        <h2>{% trans "Backup Tokens" %}</h2>
+        <p>
+            {% blocktrans trimmed %}
+                If you don't have any device with you, you can access
+                your account using backup tokens.
+            {% endblocktrans %}
+            {% blocktrans trimmed count counter=backup_tokens %}
+                You have only one backup token remaining.
+            {% plural %}
+                You have {{ counter }} backup tokens remaining.
+            {% endblocktrans %}
+        </p>
+        <p>
+            <a href="{% url 'two_factor:backup_tokens' %}"
+               class="btn btn-phoenix-info">{% trans "Show Codes" %}</a>
+        </p>
+        <h3>{% trans "Disable Two-Factor Authentication" %}</h3>
+        <p>
+            {% blocktrans trimmed %}
+                However we strongly discourage you to do so, you can
+                also disable two-factor authentication for your account.
+            {% endblocktrans %}
+        </p>
+        <p>
+            <a class="btn btn-phoenix-secondary"
+               href="{% url 'two_factor:disable' %}">{% trans "Disable Two-Factor Authentication" %}</a>
+        </p>
+    {% else %}
+        <p>
+            {% blocktrans trimmed %}
+                Two-factor authentication is not enabled for your
+                account. Enable two-factor authentication for enhanced account
+                security.
+            {% endblocktrans %}
+        </p>
+        <p>
+            <a href="{% url 'two_factor:setup' %}" class="btn btn-phoenix-primary">
+            {% trans "Enable Two-Factor Authentication" %}</a>
+        </p>
     {% endif %}
-
-    <h2>{% trans "Backup Tokens" %}</h2>
-    <p>
-      {% blocktrans trimmed %}If you don't have any device with you, you can access
-        your account using backup tokens.{% endblocktrans %}
-      {% blocktrans trimmed count counter=backup_tokens %}
-        You have only one backup token remaining.
-      {% plural %}
-        You have {{ counter }} backup tokens remaining.
-      {% endblocktrans %}
-    </p>
-    <p><a href="{% url 'two_factor:backup_tokens' %}"
-          class="btn btn-phoenix-info">{% trans "Show Codes" %}</a></p>
-
-    <h3>{% trans "Disable Two-Factor Authentication" %}</h3>
-    <p>{% blocktrans trimmed %}However we strongly discourage you to do so, you can
-      also disable two-factor authentication for your account.{% endblocktrans %}</p>
-    <p><a class="btn btn-phoenix-secondary" href="{% url 'two_factor:disable' %}">
-      {% trans "Disable Two-Factor Authentication" %}</a></p>
-  {% else %}
-    <p>{% blocktrans trimmed %}Two-factor authentication is not enabled for your
-      account. Enable two-factor authentication for enhanced account
-      security.{% endblocktrans %}</p>
-    <p><a href="{% url 'two_factor:setup' %}" class="btn btn-phoenix-primary">
-      {% trans "Enable Two-Factor Authentication" %}</a>
-    </p>
-  {% endif %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/users/user_detail.html b/templates/users/user_detail.html
index ecc0bc84..fddd47f7 100644
--- a/templates/users/user_detail.html
+++ b/templates/users/user_detail.html
@@ -1,48 +1,61 @@
 {% extends "base.html" %}
 {% load static %}
 {% load i18n %}
-
-{% block title %}{{ _("View Staff") }}{% endblock title %}
-
+{% block title %}
+    {{ _("View Staff") }}
+{% endblock title %}
 {% block content %}
     <div class="row my-5">
         <div class="card rounded ">
             <div class="card-header ">
-                <p class="mb-0"><i class="fa-solid fa-user"></i> {{ _("User Details") }}</p>
+                <p class="mb-0">
+                    <i class="fa-solid fa-user"></i> {{ _("User Details") }}
+                </p>
             </div>
             <div class="card-body">
                 <div class="row">
                     <div class="col-md-2">
                         {% if user_.logo %}
-                        <img class="rounded-circle" src="{{ user_.logo.url }}" style="width: 100px; height: 100px;" alt="User Image">
+                            <img class="rounded-circle"
+                                 src="{{ user_.logo.url }}"
+                                 style="width: 100px;
+                                        height: 100px"
+                                 alt="User Image">
                         {% else %}
-                        <img class="rounded-circle" src="{% static 'img/default-user.png' %}" style="width: 100px; height: 100px;" alt="Default User Image">
+                            <img class="rounded-circle"
+                                 src="{% static 'img/default-user.png' %}"
+                                 style="width: 100px;
+                                        height: 100px"
+                                 alt="Default User Image">
                         {% endif %}
                     </div>
                     <div class="col-md-5">
-                        <p><strong>{{ _("Name") }}:</strong> {{ user_.name }}</p>
-                        <p><strong>{{ _("Arabic Name") }}:</strong> {{ user_.arabic_name }}</p>
+                        <p>
+                            <strong>{{ _("Name") }}:</strong> {{ user_.name }}
+                        </p>
+                        <p>
+                            <strong>{{ _("Arabic Name") }}:</strong> {{ user_.arabic_name }}
+                        </p>
                     </div>
                     <div class="col-md-5">
-                        <p><strong>{{ _("Phone Number") }}:</strong> {{ user_.phone_number }}</p>
+                        <p>
+                            <strong>{{ _("Phone Number") }}:</strong> {{ user_.phone_number }}
+                        </p>
                         <div>
                             <span><strong>{{ _("Roles") }}:</strong></span>
                             {% for group in user_.groups %}
-                            <span><strong>{{ group.name }}</strong></span>
-                             {% if not forloop.last %}
-                               <span>&amp;</span>
-                             {% endif %}
+                                <span><strong>{{ group.name }}</strong></span>
+                                {% if not forloop.last %}<span>&amp;</span>{% endif %}
                             {% endfor %}
                         </div>
                     </div>
                 </div>
             </div>
             <div class="table-responsive scrollbar mx-n1 px-1">
-                <div class="card-header ">
-
-                </div>
+                <div class="card-header "></div>
                 <h4 class="my-4">Groups</h4>
-                <a class="btn btn-sm btn-phoenix-primary mt-2 mb-4" href="{% url 'user_groups' request.dealer.slug user_.slug %}"><i class="fa-solid fa-users"></i> Manage Groups</a>
+                <a class="btn btn-sm btn-phoenix-primary mt-2 mb-4"
+                   href="{% url 'user_groups' request.dealer.slug user_.slug %}"><i class="fa-solid fa-users"></i> Manage Groups</a>
                 <table class="table table-hover table-responsive-sm fs-9 mb-0">
                     <thead>
                         <tr>
@@ -63,15 +76,16 @@
                 </table>
             </div>
             <div class="card-footer d-flex ">
-                <a class="btn btn-sm btn-phoenix-primary me-1" href="{% url 'user_update' request.dealer.slug user_.slug %}">
+                <a class="btn btn-sm btn-phoenix-primary me-1"
+                   href="{% url 'user_update' request.dealer.slug user_.slug %}">
                     {{ _("Edit") }}
                     <i class="fa-solid fa-pen-to-square"></i>
                 </a>
-
                 <button class="btn btn-phoenix-danger btn-sm delete-btn me-1"
                         data-url="{% url 'user_delete' request.dealer.slug user_.slug %}"
-                        data-message='{{ _("Are you sure you want to delete this user?")}}'
-                        data-bs-toggle="modal" data-bs-target="#deleteModal">
+                        data-message='{{ _("Are you sure you want to delete this user?") }}'
+                        data-bs-toggle="modal"
+                        data-bs-target="#deleteModal">
                     {{ _("Delete") }}
                     <i class="fas fa-trash"></i>
                 </button>
diff --git a/templates/users/user_form.html b/templates/users/user_form.html
index 8a288ee4..e2f58168 100644
--- a/templates/users/user_form.html
+++ b/templates/users/user_form.html
@@ -3,13 +3,12 @@
 {% load crispy_forms_filters %}
 {% block title %}
     {# Check if an 'object'  exists in the context #}
-  {% if object %}
-    {% trans 'Update Staff'%}
-  {% else %}
-    {% trans 'Add New Staff'%}
-  {% endif %}
+    {% if object %}
+        {% trans 'Update Staff' %}
+    {% else %}
+        {% trans 'Add New Staff' %}
+    {% endif %}
 {% endblock %}
-
 {% block content %}
 
   <!---->
@@ -21,9 +20,9 @@
                     <h3 class="mb-0 fs-4 text-center text-white">
                         <i class="fa-solid fa-user-tie"></i>
                         {% if staff.created %}
-                           {{ _("Edit Staff") }}
+                            {{ _("Edit Staff") }}
                         {% else %}
-                          {{ _("Add Staff") }}
+                            {{ _("Add Staff") }}
                         {% endif %}
                    </h3>
             </div>
@@ -53,10 +52,6 @@
 
             </div>
         </div>
-
-       </div>
-
-   </div>
-  <!---->
+    </div>
+    <!---->
 {% endblock %}
-
diff --git a/templates/users/user_group_form.html b/templates/users/user_group_form.html
index 1c0f2d38..b60c5ad5 100644
--- a/templates/users/user_group_form.html
+++ b/templates/users/user_group_form.html
@@ -1,7 +1,9 @@
 {% extends "base.html" %}
 {% load i18n %}
 {% load crispy_forms_filters %}
-{% block title %}{% trans "Group" %}{% endblock title %}
+{% block title %}
+    {% trans "Group" %}
+{% endblock title %}
 {% block content %}
   <div class="row">
     <div class="row">
@@ -31,4 +33,4 @@
       </div>
     </div>
   </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/users/user_list.html b/templates/users/user_list.html
index 20a737af..2a3310a9 100644
--- a/templates/users/user_list.html
+++ b/templates/users/user_list.html
@@ -1,9 +1,9 @@
 {% extends "base.html" %}
 {% load i18n %}
 {% load render_table from django_tables2 %}
-
-{% block title %}{% trans "Staffs" %}{% endblock title %}
-
+{% block title %}
+    {% trans "Staffs" %}
+{% endblock title %}
 {% block content %}
     <section class="">
         <div class="row mt-4">
@@ -11,20 +11,28 @@
                 <div class="d-md-flex justify-content-between">
                     <div>
                         {% if request.user.userplan %}
-                            <a href="{% url 'user_create' request.dealer.slug %}" class="btn btn-sm btn-phoenix-primary me-4"><i class="fa-solid fa-user-tie me-1"></i> {% trans "Add New Staff" %}</a>
-                            <a href="{% url 'group_list' request.dealer.slug %}" class="btn btn-sm btn-phoenix-success"><i class="fa-solid fa-user-group me-1"></i> {% trans "Manage Groups & Permissions" %}</a>
+                            <a href="{% url 'user_create' request.dealer.slug %}"
+                               class="btn btn-sm btn-phoenix-primary me-4"><i class="fa-solid fa-user-tie me-1"></i> {% trans "Add New Staff" %}</a>
+                            <a href="{% url 'group_list' request.dealer.slug %}"
+                               class="btn btn-sm btn-phoenix-success"><i class="fa-solid fa-user-group me-1"></i> {% trans "Manage Groups & Permissions" %}</a>
                         {% else %}
-                            <div class="alert alert-outline-warning d-flex align-items-center" role="alert">
+                            <div class="alert alert-outline-warning d-flex align-items-center"
+                                 role="alert">
                                 <i class="fa-solid fa-circle-info fs-6"></i>
-                                <p class="mb-0 flex-1">{{ _("No Active Subscription,please activate your subscription.") }}<a href="{% url 'pricing_page' request.dealer.slug %}" class="ms-3 text-body-primary fs-9">Manage Subscription</a></p>
-                                <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
+                                <p class="mb-0 flex-1">
+                                    {{ _("No Active Subscription,please activate your subscription.") }}<a href="{% url 'pricing_page' request.dealer.slug %}"
+   class="ms-3 text-body-primary fs-9">Manage Subscription</a>
+                                </p>
+                                <button class="btn-close"
+                                        type="button"
+                                        data-bs-dismiss="alert"
+                                        aria-label="Close"></button>
                             </div>
                         {% endif %}
                     </div>
                 </div>
             </div>
             <div class="table-responsive scrollbar mx-n1 px-1 mt-3">
-
                 <table class="table align-items-center table-flush table-hover">
                     <thead>
                         <tr class="bg-body-highlight">
@@ -42,21 +50,23 @@
                                     <div class="d-flex align-items-center">
                                         <div class="avatar avatar-tiny me-2">
                                             {% if user.logo %}
-                                                <img class="avatar-img rounded-circle" src="{{ user.thumbnail.url }}" onerror="this.src='/static/img/brand/brand-logo.png'" alt="Logo">
+                                                <img class="avatar-img rounded-circle"
+                                                     src="{{ user.thumbnail.url }}"
+                                                     onerror="this.src='/static/img/brand/brand-logo.png'"
+                                                     alt="Logo">
                                             {% endif %}
                                         </div>
-                                        <a class="fs-8 fw-bold" href="{% url 'user_detail' request.dealer.slug user.slug%}">{{ user.arabic_name }}</a>
+                                        <a class="fs-8 fw-bold"
+                                           href="{% url 'user_detail' request.dealer.slug user.slug %}">{{ user.arabic_name }}</a>
                                     </div>
                                 </td>
                                 <td class="align-middle white-space-nowrap align-items-center">{{ user.email }}</td>
                                 <td class="align-middle white-space-nowrap align-items-center justify-content-center">{{ user.phone_number }}</td>
                                 <td>
-
                                     {% for group in user.groups %}
                                         <span class="badge badge-sm bg-primary text-center"><i class="fa-solid fa-scroll"></i> {% trans group.name|title %}</span>
                                     {% endfor %}
                                 </td>
-
                                 <td class="align-middle white-space-nowrap">
                                     <a class="btn btn-phoenix-success"
                                        href="{% url 'user_detail' request.dealer.slug user.slug %}">
@@ -66,7 +76,6 @@
                                 </td>
                             </tr>
                         {% endfor %}
-
                     </tbody>
                 </table>
             </div>
@@ -75,8 +84,6 @@
                     {% include 'partials/pagination.html' %}
                 {% endif %}
             </div>
-
         </div>
     </section>
 {% endblock %}
-
diff --git a/templates/vendors/vendor_form.html b/templates/vendors/vendor_form.html
index d023971c..ded2e8a7 100644
--- a/templates/vendors/vendor_form.html
+++ b/templates/vendors/vendor_form.html
@@ -3,14 +3,12 @@
 {% load crispy_forms_filters %}
 {% block title %}
     {# Check if an 'object'  exists in the context #}
-  {% if object %}
-    {% trans 'Update Vendor'%}
-  {% else %}
-    {% trans 'Add New Vendor'%}
-  {% endif %}
+    {% if object %}
+        {% trans 'Update Vendor' %}
+    {% else %}
+        {% trans 'Add New Vendor' %}
+    {% endif %}
 {% endblock %}
-
-
 {% block content %}
 
 
@@ -32,11 +30,8 @@
                 <form class="row g-3 mb-9" method="post" class="form" enctype="multipart/form-data" novalidate >
                         {% csrf_token %}
                         {{ redirect_field }}
-                       {{ form|crispy }}
-                       {% for error in form.errors %}
-                            <div class="text-danger">{{ error }}</div>
-                       {% endfor %}
-
+                        {{ form|crispy }}
+                        {% for error in form.errors %}<div class="text-danger">{{ error }}</div>{% endfor %}
                         <hr class="my-2">
                        <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-3">
                          <button class="btn btn-lg btn-phoenix-success md-me-2" type="submit"><i class="fa-solid fa-floppy-disk me-1"></i>{{ _("Save") }}</button>
@@ -46,9 +41,6 @@
 
             </div>
         </div>
-
-       </div>
-
-   </div>
-  <!---->
-{% endblock %}
\ No newline at end of file
+    </div>
+    <!---->
+{% endblock %}
diff --git a/templates/vendors/vendors_list.html b/templates/vendors/vendors_list.html
index fa3f8784..fc687cbb 100644
--- a/templates/vendors/vendors_list.html
+++ b/templates/vendors/vendors_list.html
@@ -13,9 +13,10 @@
                 <span class="fas fa-cube ms-2 text-primary"></span>
             </h3>
             {% if perms.django_ledger.add_vendormodel %}
-            <a href="{% url 'vendor_create' request.dealer.slug %}" class="btn btn-md btn-phoenix-primary">
-                <i class="fa fa-plus me-2"></i>{{ _("Add Vendor") }}
-            </a>
+                <a href="{% url 'vendor_create' request.dealer.slug %}"
+                   class="btn btn-md btn-phoenix-primary">
+                    <i class="fa fa-plus me-2"></i>{{ _("Add Vendor") }}
+                </a>
             {% endif %}
         </div>
         {% include "partials/search_box.html" %}
@@ -88,78 +89,76 @@
                                         {% if vendor.logo %}
                                             <div class="avatar avatar-xl me-3">
                                                 <img class="rounded-circle" src="{{ vendor.logo.url }}" alt="" />
-                                        {% else %}
-                                            <div class="avatar avatar-xl me-3">
-                                                <img class="rounded-circle"
-                                                     src="{% static 'images/icons/picture.svg' %}"
-                                                     alt="" />
-                                        {% endif %}
-                                    </div>
-                                    <div>
-                                        <a class="fs-8 fw-bold" href="{% url 'vendor_detail' request.dealer.slug vendor.slug %}">{{ vendor.arabic_name }}</a>
-                                        <div class="d-flex align-items-center">
-                                            <p class="mb-0 text-body-highlight fw-semibold fs-9 me-2">{{ vendor.name }}</p>
+                                            {% else %}
+                                                <div class="avatar avatar-xl me-3">
+                                                    <img class="rounded-circle"
+                                                         src="{% static 'images/icons/picture.svg' %}"
+                                                         alt="" />
+                                                {% endif %}
+                                            </div>
+                                            <div>
+                                                <a class="fs-8 fw-bold"
+                                                   href="{% url 'vendor_detail' request.dealer.slug vendor.slug %}">{{ vendor.arabic_name }}</a>
+                                                <div class="d-flex align-items-center">
+                                                    <p class="mb-0 text-body-highlight fw-semibold fs-9 me-2">{{ vendor.name }}</p>
                                                     <!--<span class="badge badge-phoenix badge-phoenix-primary">{{ vendor.vendor_model.uuid }}</span>-->
+                                                </div>
+                                            </div>
                                         </div>
-                                    </div>
-                                </div>
-                            </td>
-                            <td class="align-middle product white-space-nowrap">
-                                <a class="text-body-highlight" href="">{{ vendor.email }}</a>
-                            </td>
-                            <td class="align-middle product white-space-nowrap">
-                                <a class="text-body-highlight" href="tel:{{ vendor.phone }}">{{ vendor.phone_number }}</a>
-                            </td>
-                            <td class="align-middle product white-space-nowrap">{{ vendor.contact_person }}</td>
-                            <td class="align-middle product white-space-nowrap">{{ vendor.address }}</td>
-                            <td class="align-middle product white-space-nowrap">{{ vendor.created_at|date }}</td>
-                            <td class="align-middle product white-space-nowrap">
-                                <div class="btn-reveal-trigger position-static">
-                                    <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
-                                            type="button"
-                                            data-bs-toggle="dropdown"
-                                            data-boundary="window"
-                                            aria-haspopup="true"
-                                            aria-expanded="false"
-                                            data-bs-reference="parent">
-                                        <span class="fas fa-ellipsis-h fs-10"></span>
-                                    </button>
-                                    <div class="dropdown-menu dropdown-menu-end py-2">
-                                         {% if perms.django_ledger.change_vendormodel %}
-                                        <a href="{% url 'vendor_update' request.dealer.slug vendor.slug %}"
-                                           class="dropdown-item text-success-dark">{% trans "Edit" %}
-                                        </a>
-                                        {% endif %}
-
-                                      {% if perms.django_ledger.delete_vendormodel %}
-                                        <div class="dropdown-divider"></div>
-                                        <button class="delete-btn dropdown-item text-danger"
-                                                data-url="{% url 'vendor_delete' request.dealer.slug vendor.slug %}"
-                                                data-message="{{ _("Are you sure you want to delete this vendor") }}?"
-                                                data-bs-toggle="modal"
-                                                data-bs-target="#deleteModal">{{ _("Delete") }}
-                                        </button>
-                                       {% endif %}
-                                    </div>
-                                </div>
-                            </td>
-                            </tr>
-                        {% empty %}
-                            <tr>
-                                <td colspan="6" class="text-center text-muted">{% trans "No Accounts Found" %}</td>
-                            </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
-            </div>
-            <div class="d-flex justify-content-end mt-3">
-                <div class="d-flex">
-                    {% if is_paginated %}
-                        {% include 'partials/pagination.html' %}
-                    {% endif %}
+                                    </td>
+                                    <td class="align-middle product white-space-nowrap">
+                                        <a class="text-body-highlight" href="">{{ vendor.email }}</a>
+                                    </td>
+                                    <td class="align-middle product white-space-nowrap">
+                                        <a class="text-body-highlight" href="tel:{{ vendor.phone }}">{{ vendor.phone_number }}</a>
+                                    </td>
+                                    <td class="align-middle product white-space-nowrap">{{ vendor.contact_person }}</td>
+                                    <td class="align-middle product white-space-nowrap">{{ vendor.address }}</td>
+                                    <td class="align-middle product white-space-nowrap">{{ vendor.created_at|date }}</td>
+                                    <td class="align-middle product white-space-nowrap">
+                                        <div class="btn-reveal-trigger position-static">
+                                            <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
+                                                    type="button"
+                                                    data-bs-toggle="dropdown"
+                                                    data-boundary="window"
+                                                    aria-haspopup="true"
+                                                    aria-expanded="false"
+                                                    data-bs-reference="parent">
+                                                <span class="fas fa-ellipsis-h fs-10"></span>
+                                            </button>
+                                            <div class="dropdown-menu dropdown-menu-end py-2">
+                                                {% if perms.django_ledger.change_vendormodel %}
+                                                    <a href="{% url 'vendor_update' request.dealer.slug vendor.slug %}"
+                                                       class="dropdown-item text-success-dark">{% trans "Edit" %}</a>
+                                                {% endif %}
+                                                {% if perms.django_ledger.delete_vendormodel %}
+                                                    <div class="dropdown-divider"></div>
+                                                    <button class="delete-btn dropdown-item text-danger"
+                                                            data-url="{% url 'vendor_delete' request.dealer.slug vendor.slug %}"
+                                                            data-message="{{ _("Are you sure you want to delete this vendor") }}?"
+                                                            data-bs-toggle="modal"
+                                                            data-bs-target="#deleteModal">{{ _("Delete") }}</button>
+                                                {% endif %}
+                                            </div>
+                                        </div>
+                                    </td>
+                                </tr>
+                            {% empty %}
+                                <tr>
+                                    <td colspan="6" class="text-center text-muted">{% trans "No Accounts Found" %}</td>
+                                </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
                 </div>
-            </div>
-        {% endif %}
-    </div>
-    {% include 'modal/delete_modal.html' %}
-{% endblock %}
+                <div class="d-flex justify-content-end mt-3">
+                    <div class="d-flex">
+                        {% if is_paginated %}
+                            {% include 'partials/pagination.html' %}
+                        {% endif %}
+                    </div>
+                </div>
+            {% endif %}
+        </div>
+        {% include 'modal/delete_modal.html' %}
+    {% endblock %}
diff --git a/templates/vendors/view_vendor.html b/templates/vendors/view_vendor.html
index b8c84166..18aa9852 100644
--- a/templates/vendors/view_vendor.html
+++ b/templates/vendors/view_vendor.html
@@ -1,10 +1,10 @@
 {% extends 'base.html' %}
 {% load i18n %}
-{% block title %}{% trans "View Vendor" %}{% endblock title %}
-
+{% block title %}
+    {% trans "View Vendor" %}
+{% endblock title %}
 {% block content %}
-
-<!-- Vendor Details -->
+    <!-- Vendor Details -->
     <div class="row mt-4">
         <div class="card shadow rounded">
             <p class="card-header mb-0 fs-5">{% trans "Vendor Details" %}</p>
@@ -28,21 +28,22 @@
                 </ul>
             </div>
             <div class="card-footer d-flex">
-                 {% if perms.django_ledger.change_vendormodel %}
-                <a class="btn btn-sm btn-phoenix-primary me-1" href="{% url 'vendor_update' request.dealer.slug vendor.slug %}">
-                    {% trans "Edit" %}
-                    <i class="fa fa-pencil"></i>
-                </a>
+                {% if perms.django_ledger.change_vendormodel %}
+                    <a class="btn btn-sm btn-phoenix-primary me-1"
+                       href="{% url 'vendor_update' request.dealer.slug vendor.slug %}">
+                        {% trans "Edit" %}
+                        <i class="fa fa-pencil"></i>
+                    </a>
                 {% endif %}
-
-                 {% if perms.django_ledger.delete_vendormodel %}
-                <button class="btn btn-phoenix-danger btn-sm delete-btn"
-                        data-url="{% url 'vendor_delete' request.dealer.slug vendor.slug %}"
-                        data-message="{{ _("Are you sure you want to delete this vendor")}}?"
-                        data-bs-toggle="modal" data-bs-target="#deleteModal">
-                    {{ _("Delete") }}
-                    <i class="fas fa-trash"></i>
-                </button>
+                {% if perms.django_ledger.delete_vendormodel %}
+                    <button class="btn btn-phoenix-danger btn-sm delete-btn"
+                            data-url="{% url 'vendor_delete' request.dealer.slug vendor.slug %}"
+                            data-message="{{ _("Are you sure you want to delete this vendor") }}?"
+                            data-bs-toggle="modal"
+                            data-bs-target="#deleteModal">
+                        {{ _("Delete") }}
+                        <i class="fas fa-trash"></i>
+                    </button>
                 {% endif %}
             </div>
         </div>
diff --git a/templates/welcome-temp.html b/templates/welcome-temp.html
index bf2ac329..4760b7bc 100644
--- a/templates/welcome-temp.html
+++ b/templates/welcome-temp.html
@@ -2,170 +2,213 @@
 <!DOCTYPE html>
 {% get_current_language as LANGUAGE_CODE %}
 <html lang="{{ LANGUAGE_CODE }}"
-      dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}"
+      dir="{% if LANGUAGE_CODE == 'ar' %}
+               rtl
+           {% else %}
+               ltr
+           {% endif %}"
       data-bs-theme=""
       data-navigation-type="default"
       data-navbar-horizontal-shape="default">
-
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="Haikal - The Backbone of Car Qar: An innovative car inventory management system designed to streamline dealership operations. Manage inventory, sales, transfers, and accounting seamlessly with advanced analytics and intuitive tools. Inspired by Arabic origins, Haikal empowers businesses with precision and efficiency.">
-
-    <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' %}">
-    <link rel="shortcut icon" type="image/x-icon" href="{% static 'images/favicons/favicon.ico' %}">
-    <link rel="manifest" href="{% static 'images/favicons/manifest.json' %}">
-    <meta name="msapplication-TileImage" content="{% static 'images/logos/logo-d.png' %}">
-    <meta name="theme-color" content="#ffffff">
-
-    <link href="{% static 'vendors/mapbox-gl/mapbox-gl.css' %}" rel="stylesheet">
-    <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&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">
-
-    {% if LANGUAGE_CODE == 'en' %}
-      <link href="{% static 'css/theme.min.css' %}" type="text/css" rel="stylesheet" id="style-default">
-      <link href="{% static 'css/user.min.css' %}" type="text/css" rel="stylesheet" id="user-style-default">
-    {% else %}
-      <link href="{% static 'css/theme-rtl.min.css' %}" type="text/css" rel="stylesheet" id="style-rtl">
-      <link href="{% static 'css/user-rtl.min.css' %}" type="text/css" rel="stylesheet" id="user-style-rtl">
-    {% endif %}
-
-    <script src="{% static 'vendors/simplebar/simplebar.min.js' %}"></script>
-    <script src="{% static 'js/config.js' %}"></script>
-    <script src="{% static 'js/sweetalert2.all.min.js' %}"></script>
-  </head>
-
-  <body style="--phoenix-scroll-margin-top: 1.2rem;">
-
-    <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 row-small px-3 px-lg-7 px-xxl-3">
-          <a class="navbar-brand me-1 me-sm-3" href="{% url 'home' %}">
-            <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" />
-              <h5 class="logo-text ms-2 d-none d-sm-block">{% trans 'Haikal' %}</h5>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="description"
+              content="Haikal - The Backbone of Car Qar: An innovative car inventory management system designed to streamline dealership operations. Manage inventory, sales, transfers, and accounting seamlessly with advanced analytics and intuitive tools. Inspired by Arabic origins, Haikal empowers businesses with precision and efficiency.">
+        <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' %}">
+        <link rel="shortcut icon"
+              type="image/x-icon"
+              href="{% static 'images/favicons/favicon.ico' %}">
+        <link rel="manifest" href="{% static 'images/favicons/manifest.json' %}">
+        <meta name="msapplication-TileImage"
+              content="{% static 'images/logos/logo-d.png' %}">
+        <meta name="theme-color" content="#ffffff">
+        <link href="{% static 'vendors/mapbox-gl/mapbox-gl.css' %}"
+              rel="stylesheet">
+        <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&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">
+        {% if LANGUAGE_CODE == 'en' %}
+            <link href="{% static 'css/theme.min.css' %}"
+                  type="text/css"
+                  rel="stylesheet"
+                  id="style-default">
+            <link href="{% static 'css/user.min.css' %}"
+                  type="text/css"
+                  rel="stylesheet"
+                  id="user-style-default">
+        {% else %}
+            <link href="{% static 'css/theme-rtl.min.css' %}"
+                  type="text/css"
+                  rel="stylesheet"
+                  id="style-rtl">
+            <link href="{% static 'css/user-rtl.min.css' %}"
+                  type="text/css"
+                  rel="stylesheet"
+                  id="user-style-rtl">
+        {% endif %}
+        <script src="{% static 'vendors/simplebar/simplebar.min.js' %}"></script>
+        <script src="{% static 'js/config.js' %}"></script>
+        <script src="{% static 'js/sweetalert2.all.min.js' %}"></script>
+    </head>
+    <body style="--phoenix-scroll-margin-top: 1.2rem;">
+        <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 row-small px-3 px-lg-7 px-xxl-3">
+                    <a class="navbar-brand me-1 me-sm-3" href="{% url 'home' %}">
+                        <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" />
+                            <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>
+                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                        <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="#home">{% trans 'Home' %}</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">{% trans '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">{% trans 'Subscriptions' %}</a>
+                            </li>
+                        </ul>
+                        <div class="d-grid d-lg-flex align-items-center">
+                            <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>
-          </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>
-          <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <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="#home">{% trans 'Home' %}</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">{% trans '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">{% trans 'Subscriptions' %}</a>
-              </li>
-            </ul>
-            <div class="d-grid d-lg-flex align-items-center">
-              <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>
-
-      <section class="bg-body-emphasis pb-8" id="home">
-        <div class="row-small hero-header-row px-lg-7 px-xxl-3">
-          <div class="row align-items-center">
-            <div class="container-fluid ps-3"
-                 style="
-                        background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('{% static 'images/logos/hero_02.png' %}');
-                        background-size: cover;
-                        background-position: center;
-                        padding: 220px 0 0 0;">
-              <h1 class="fs-3 fs-lg-2 fs-md-1 fs-xl-1 fw-black mb-4">
-                <span class="text-primary me-3">{% trans 'Streamline' %}</span>&nbsp;{% trans 'Your Car Dealership Operations' %}
-              </h1>
-              <p class="fs-5 fs-lg-4 fs-xl-4 fw-normal mb-3">{{ _("Because Inventory Needs Order") }}.</p>
-              <p class="mb-5">{% trans 'Manage inventory, sales, transfers, and accounting seamlessly with Haikal.' %}</p>
-              <a class="btn btn-lg btn-phoenix-primary rounded-pill me-3" href="{% url 'account_signup' %}" role="button">{% trans 'Get Started' %}</a>
-              <a class="btn btn-link fs-8 p-0" href="#feature" role="button">{% trans 'Learn More' %}
-                {% if LANGUAGE_CODE == 'ar' %}
-                  <span class="fa-solid fa-angle-left ms-2 fs-9"></span>
-                {% else %}
-                  <span class="fa-solid fa-angle-right ms-2 fs-9"></span>
-                {% endif %}
-
-              </a>
-            </div>
-
-          </div>
-        </div>
-      </section>
-
-      <section class="pt-15 pb-0" id="feature">
-        <div class="row-small px-lg-7 px-xxl-3">
-          <div class="text-center mb-5">
-            <h4 class="text-primary fw-bolder mb-4">{% trans 'Features' %}</h4>
-            <h2 class="mb-3 text-body-emphasis lh-base">{% trans 'Empowering Your Dealership with Precision and Efficiency' %}</h2>
-          </div>
-          <div class="row">
-            <div class="col-md-4 text-center">
-              <img src="{% static 'images/icons/35420_store.svg' %}" alt="Inventory Management" class="mb-3" width="60">
-              <h5>{% trans 'Inventory Management' %}</h5>
-              <p>{% trans 'Effortlessly manage your car inventory with real-time updates and intuitive tools.' %}</p>
-            </div>
-            <div class="col-md-4 text-center">
-              <img src="{% static 'images/icons/148542_list.svg' %}" alt="Seamless Accounting" class="mb-3" width="60">
-              <h5>{% trans 'Seamless Accounting' %}</h5>
-              <p>{% trans 'Integrated double-entry accounting tailored for car dealers.' %}</p>
-            </div>
-            <div class="col-md-4 text-center">
-              <img src="{% static 'images/icons/114292_report.svg' %}" alt="Advanced Analytics" class="mb-3" width="60">
-              <h5>{% trans 'Advanced Analytics' %}</h5>
-              <p>{% trans 'Gain insights and make data-driven decisions for your business.' %}</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section class="bg-body-emphasis pt-lg-0 pt-xl-8" id="pricing">
-        <div class="row-small position-relative px-lg-7 px-xxl-3 text-center">
-          <h4 class="text-primary fw-bolder mb-4">{% trans 'Subscriptions' %}</h4>
-          <h2 class="mb-3 text-body-emphasis lh-base">{% trans 'Choose the Plan that Fits Your Needs' %}</h2>
-          <p class="mb-5">{% trans 'Flexible plans designed to meet the unique needs of every dealership.' %}</p>
-          <div class="row">
-            {% include "plans/plan_table.html" %}
-          </div>
-
-        </div>
-      </section>
-
-    </main>
-
-    <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>
-    <script src="{% static 'vendors/is/is.min.js' %}"></script>
-    <script src="{% static 'vendors/fontawesome/all.min.js' %}"></script>
-    <script src="{% static 'vendors/lodash/lodash.min.js' %}"></script>
-    <script src="{% static 'vendors/list.js/list.min.js' %}"></script>
-    <script src="{% static 'vendors/feather-icons/feather.min.js' %}"></script>
-    <script src="{% static 'vendors/dayjs/dayjs.min.js' %}"></script>
-    <script src="{% static 'js/phoenix.js' %}"></script>
-    <script src="{% static 'vendors/echarts/echarts.min.js' %}"></script>
-    <script src="{% static 'js/travel-agency-dashboard.js' %}"></script>
-    <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>
-
-  </body>
-
-</html>
\ No newline at end of file
+            <section class="bg-body-emphasis pb-8" id="home">
+                <div class="row-small hero-header-row px-lg-7 px-xxl-3">
+                    <div class="row align-items-center">
+                        <div class="container-fluid ps-3"
+                             style="background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('{% static 'images/logos/hero_02.png' %}');
+                                    background-size: cover;
+                                    background-position: center;
+                                    padding: 220px 0 0 0">
+                            <h1 class="fs-3 fs-lg-2 fs-md-1 fs-xl-1 fw-black mb-4">
+                                <span class="text-primary me-3">{% trans 'Streamline' %}</span>&nbsp;{% trans 'Your Car Dealership Operations' %}
+                            </h1>
+                            <p class="fs-5 fs-lg-4 fs-xl-4 fw-normal mb-3">{{ _("Because Inventory Needs Order") }}.</p>
+                            <p class="mb-5">{% trans 'Manage inventory, sales, transfers, and accounting seamlessly with Haikal.' %}</p>
+                            <a class="btn btn-lg btn-phoenix-primary rounded-pill me-3"
+                               href="{% url 'account_signup' %}"
+                               role="button">{% trans 'Get Started' %}</a>
+                            <a class="btn btn-link fs-8 p-0" href="#feature" role="button">{% trans 'Learn More' %}
+                                {% if LANGUAGE_CODE == 'ar' %}
+                                    <span class="fa-solid fa-angle-left ms-2 fs-9"></span>
+                                {% else %}
+                                    <span class="fa-solid fa-angle-right ms-2 fs-9"></span>
+                                {% endif %}
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section class="pt-15 pb-0" id="feature">
+                <div class="row-small px-lg-7 px-xxl-3">
+                    <div class="text-center mb-5">
+                        <h4 class="text-primary fw-bolder mb-4">{% trans 'Features' %}</h4>
+                        <h2 class="mb-3 text-body-emphasis lh-base">{% trans 'Empowering Your Dealership with Precision and Efficiency' %}</h2>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-4 text-center">
+                            <img src="{% static 'images/icons/35420_store.svg' %}"
+                                 alt="Inventory Management"
+                                 class="mb-3"
+                                 width="60">
+                            <h5>{% trans 'Inventory Management' %}</h5>
+                            <p>{% trans 'Effortlessly manage your car inventory with real-time updates and intuitive tools.' %}</p>
+                        </div>
+                        <div class="col-md-4 text-center">
+                            <img src="{% static 'images/icons/148542_list.svg' %}"
+                                 alt="Seamless Accounting"
+                                 class="mb-3"
+                                 width="60">
+                            <h5>{% trans 'Seamless Accounting' %}</h5>
+                            <p>{% trans 'Integrated double-entry accounting tailored for car dealers.' %}</p>
+                        </div>
+                        <div class="col-md-4 text-center">
+                            <img src="{% static 'images/icons/114292_report.svg' %}"
+                                 alt="Advanced Analytics"
+                                 class="mb-3"
+                                 width="60">
+                            <h5>{% trans 'Advanced Analytics' %}</h5>
+                            <p>{% trans 'Gain insights and make data-driven decisions for your business.' %}</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section class="bg-body-emphasis pt-lg-0 pt-xl-8" id="pricing">
+                <div class="row-small position-relative px-lg-7 px-xxl-3 text-center">
+                    <h4 class="text-primary fw-bolder mb-4">{% trans 'Subscriptions' %}</h4>
+                    <h2 class="mb-3 text-body-emphasis lh-base">{% trans 'Choose the Plan that Fits Your Needs' %}</h2>
+                    <p class="mb-5">{% trans 'Flexible plans designed to meet the unique needs of every dealership.' %}</p>
+                    <div class="row">{% include "plans/plan_table.html" %}</div>
+                </div>
+            </section>
+        </main>
+        <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>
+        <script src="{% static 'vendors/is/is.min.js' %}"></script>
+        <script src="{% static 'vendors/fontawesome/all.min.js' %}"></script>
+        <script src="{% static 'vendors/lodash/lodash.min.js' %}"></script>
+        <script src="{% static 'vendors/list.js/list.min.js' %}"></script>
+        <script src="{% static 'vendors/feather-icons/feather.min.js' %}"></script>
+        <script src="{% static 'vendors/dayjs/dayjs.min.js' %}"></script>
+        <script src="{% static 'js/phoenix.js' %}"></script>
+        <script src="{% static 'vendors/echarts/echarts.min.js' %}"></script>
+        <script src="{% static 'js/travel-agency-dashboard.js' %}"></script>
+        <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>
+    </body>
+</html>
diff --git a/templates/welcome.html b/templates/welcome.html
index 4c6e4f1e..2fa948cf 100644
--- a/templates/welcome.html
+++ b/templates/welcome.html
@@ -1,182 +1,246 @@
 {% extends 'welcome_base.html' %}
 {% load custom_filters %}
 {% load i18n static %}
-
 {% block extraCSS %}
-  <style>
+    <style>
     .btn-check:checked + .btn .card {
       border-color: #0d6efd;
       box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
     }
-  </style>
+    </style>
 {% endblock extraCSS %}
 {% block content %}
-
-
-  <div class="row">
-    <div class="booking-hero-header d-flex align-items-center">
-      <div class="bg-holder overlay bg-opacity-75" style="background-image:url({% static 'video/image-haikal-02.png' %});">
-        <video class="bg-video " autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline" style="height: 100%; width: 100%; offset: right;">
-          <source src="{% static 'video/haikal-video-02.mp4' %}" type="video/mp4" />
-        </video>
-      </div>
-
-      <div class="container-small position-relative z-1 mb-2 p-5">
-        <h2 class="text-secondary-lighter fs-7 fs-md-3 fw-bolder mb-3 text-uppercase">{{ _("Why us")}}?</h2>
-        <h6 class="fs-6 fs-md-2 text-white fw-bolder mb-6 overflow-hidden">{{ _("HAIKAL") }}
-          <span class="typed-text text-primary p-2" data-typed-text="[&quot;<span class=text-primary p-2>{% trans 'Inventory'|upper %}</span>&quot;,&quot;<span class=text-warning p-2>{% trans 'CRM'|upper %}</span>&quot;, &quot;<span class=text-info p-2>{% trans 'Accounting'|upper %}</span>&quot;, &quot;<span class=text-success p-2>{% trans 'Reporting'|upper %}</span>&quot;]"><span class="text-warning p-2"></span></span>
-          <span class="typed-cursor p-2" aria-hidden="true"></span>
-        </h6>
-      </div>
+    <div class="row">
+        <div class="booking-hero-header d-flex align-items-center">
+            <div class="bg-holder overlay bg-opacity-75"
+                 style="background-image:url({% static 'video/image-haikal-02.png' %})">
+                <video class="bg-video"
+                       autoplay="autoplay"
+                       loop="loop"
+                       muted="muted"
+                       playsinline="playsinline"
+                       style="height: 100%;
+                              width: 100%;
+                              offset: right">
+                    <source src="{% static 'video/haikal-video-02.mp4' %}" type="video/mp4" />
+                </video>
+            </div>
+            <div class="container-small position-relative z-1 mb-2 p-5">
+                <h2 class="text-secondary-lighter fs-7 fs-md-3 fw-bolder mb-3 text-uppercase">{{ _("Why us") }}?</h2>
+                <h6 class="fs-6 fs-md-2 text-white fw-bolder mb-6 overflow-hidden">
+                    {{ _("HAIKAL") }}
+                    <span class="typed-text text-primary p-2"
+                          data-typed-text="[&quot;<span class=text-primary p-2>{% trans 'Inventory'|upper %}</span>&quot;,&quot;<span class=text-warning p-2>{% trans 'CRM'|upper %}</span>&quot;, &quot;<span class=text-info p-2>{% trans 'Accounting'|upper %}</span>&quot;, &quot;<span class=text-success p-2>{% trans 'Reporting'|upper %}</span>&quot;]"><span class="text-warning p-2"></span></span>
+                    <span class="typed-cursor p-2" aria-hidden="true"></span>
+                </h6>
+            </div>
+        </div>
+        <section class="pt-6 pt-md-10 pb-10" id="feature">
+            <div class="container-medium">
+                <div class="bg-holder d-none d-xl-block"
+                     style="background-image:url({% static 'images/bg/bg-left-27.png' %});
+                            background-size:auto;
+                            background-position:left"></div>
+                <div class="bg-holder d-none d-xl-block"
+                     style="background-image:url({% static 'images/bg/bg-right-27.png' %});
+                            background-size:auto;
+                            background-position:right"></div>
+                <div class="row g-3 position-relative">
+                    <div class="col-lg-6">
+                        <div class="row g-3">
+                            <div class="col-md-7">
+                                <h4 class="fw-semibold mb-3">{{ _("Because Inventory Needs Order") }}</h4>
+                                <p class="mb-3 mb-md-0 text-body-tertiary">
+                                    {% blocktrans %}Haikal empowers car dealers with a seamless, structured system to manage their inventory effortlessly, ensuring every vehicle is tracked, accounted for, and ready for sale with precision and efficiency.{% endblocktrans %}
+                                </p>
+                            </div>
+                            <div class="col-6 col-md-5">
+                                <div class="img-zoom-hover position-relative h-100 rounded-3 overflow-hidden">
+                                    <a href="#">
+                                        <img class="w-100 h-100 object-fit-cover bg-opacity-75"
+                                             src="{% static 'images/bg/haikal-01.png' %}"
+                                             alt="" />
+                                    </a>
+                                    <div class="backdrop-faded">
+                                        <a class="fw-bold fs-7 text-white stretched-link" href="#">{% trans 'Inventory Management' %}</a>
+                                        <p class="mb-0 text-white fs-9">
+                                            {% trans 'Effortlessly manage your car inventory with real-time updates and intuitive tools.' %}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-6 col-md-5">
+                                <div class="img-zoom-hover position-relative h-100 rounded-3 overflow-hidden">
+                                    <a href="#">
+                                        <img class="w-100 h-100 object-fit-cover bg-opacity-75"
+                                             src="{% static 'images/bg/haikal-10.png' %}"
+                                             alt="" />
+                                    </a>
+                                    <div class="backdrop-faded">
+                                        <a class="fw-bold fs-7 text-white" href="#!">{% trans 'Seamless Accounting' %}</a>
+                                        <p class="mb-0 text-white fs-9">{% trans 'Integrated double-entry accounting tailored for car dealers.' %}</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-7">
+                                <div class="img-zoom-hover position-relative h-100 rounded-3 overflow-hidden">
+                                    <a href="#">
+                                        <img class="w-100 h-md-100 object-fit-cover bg-opacity-75"
+                                             src="{% static 'images/bg/haikal-11.png' %}"
+                                             alt=""
+                                             height="220" />
+                                    </a>
+                                    <div class="backdrop-faded">
+                                        <a class="fw-bold fs-7 text-white" href="#">{% trans 'Advanced Analytics' %}</a>
+                                        <p class="mb-0 text-white fs-9">{% trans 'Gain insights and make data-driven decisions for your business.' %}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-6">
+                        <div class="d-flex flex-column gap-3 h-100">
+                            <div class="img-zoom-hover position-relative h-100 rounded-3 overflow-hidden">
+                                <a href="#">
+                                    <img class="w-100 h-lg-100 object-fit-cover bg-opacity-75"
+                                         src="{% static 'images/bg/haikal-09.png' %}"
+                                         alt=""
+                                         height="220" />
+                                </a>
+                                <div class="backdrop-faded">
+                                    <a class="fw-bold fs-7 text-white" href="#!">{% trans 'CRM' %}</a>
+                                    <p class="mb-0 text-white fs-9">
+                                        {% trans 'Specialized customer relationship management system designed for car dealers, offering streamlined sales.' %}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section class="bg-body-emphasis pt-lg-0 pt-xl-8" id="pricing">
+            <div class="bg-holder d-none d-xl-block"
+                 style="background-image:url({% static 'images/bg/bg-left-29.png' %});
+                        background-size:auto;
+                        background-position:-15%"></div>
+            <div class="container-medium position-relative">
+                <h2 class="mb-7">{{ _("Pricing") }}</h2>
+                <div class="row g-3 mb-7 mb-lg-11">
+                    {% for plan in plan_list %}
+                        <div class="col-lg-3">
+                            <input type="radio"
+                                   class="btn-check"
+                                   name="selected_plan"
+                                   id="plan_{{ forloop.counter }}"
+                                   value="{{ plan.id }}"
+                                   autocomplete="off">
+                            <label class="btn w-100 h-100 p-0" for="plan_{{ forloop.counter }}">
+                                <div class="card h-100 border border-2 rounded-4
+                                            {% if forloop.first %}
+                                                border-primary
+                                            {% else %}
+                                                border-secondary
+                                            {% endif %}">
+                                    <div class="card-body p-4">
+                                        <h2 class="mb-4 h5">{{ plan.name }}</h2>
+                                        <h3 class="h6 mb-3">
+                                            {{ plan.planpricing_set.first.price }}
+                                            <span class="icon-saudi_riyal"></span>
+                                            <span class="fs-8 fw-normal">/ {{ _("Per month") }}</span>
+                                        </h3>
+                                        <h5 class="mb-3 h6">{{ _("Included") }}</h5>
+                                        <ul class="fa-ul ps-3 m-0">
+                                            {% for line in plan.description|splitlines %}
+                                                <li class="d-flex align-items-start mb-2">
+                                                    <span class="fa-li"><i class="fas fa-check text-primary"></i></span>
+                                                    <span class="text-muted fw-semibold">{{ line }}</span>
+                                                </li>
+                                            {% endfor %}
+                                        </ul>
+                                    </div>
+                                </div>
+                            </label>
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </section>
+        <section class="overflow-x-hidden mb-9 pt-lg-0 pt-xl-8">
+            <div class="bg-holder d-none d-xl-block"
+                 style="background-image:url({% static 'images/bg/bg-left-31.png' %});
+                        background-size:22%;
+                        background-position:left;
+                        z-index:1"></div>
+            <div class="bg-holder d-none d-xl-block"
+                 style="background-image:url({% static 'images/bg/bg-right-31.png' %});
+                        background-size:15%;
+                        background-position:right bottom;
+                        z-index:1"></div>
+            <div class="bg-latest-posts"></div>
+            <div class="container-medium text-center position-relative z-2">
+                <h3 class="mb-2 text-body-emphasis">{{ _("Other features") }}</h3>
+                <p class="mb-0 text-body-tertiary mb-13">{{ _("Find out other features included in Haikal") }}</p>
+            </div>
+            <div class="swiper-theme-container swiper-zooming-slider">
+                <div class="swiper-container theme-slider"
+                     data-swiper='{"loop":true,"slidesPerView":1.3,"spaceBetween":32,"speed":2000,"autoplay":true,"centeredSlides":true,"simulateTouch":false,"breakpoints":{"540":{"slidesPerView":1.5},"768":{"slidesPerView":1.8},"1200":{"slidesPerView":2},"1530":{"slidesPerView":2.8}}}'>
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide rounded-3 overflow-hidden">
+                            <div class="position-relative w-100 h-100">
+                                <img class="w-100 h-100 object-fit-cover"
+                                     src="{% static 'images/bg/haikal-02.png' %}"
+                                     alt="" />
+                                <div class="backdrop-faded p-4 p-md-6">
+                                    <a class="text-white fw-bold fs-7" href="#">{{ _("Manage Everything from one place") }}</a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="swiper-slide rounded-3 overflow-hidden">
+                            <div class="position-relative w-100 h-100">
+                                <img class="w-100 h-100 object-fit-cover"
+                                     src="{% static 'images/bg/haikal-08.png' %}"
+                                     alt="" />
+                                <div class="backdrop-faded p-4 p-md-6">
+                                    <a class="text-white fw-bold fs-7" href="#">{{ _("The Car is in the center of your business") }}</a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="swiper-slide rounded-3 overflow-hidden">
+                            <div class="position-relative w-100 h-100">
+                                <img class="w-100 h-100 object-fit-cover"
+                                     src="{% static 'images/bg/haikal-03.png' %}"
+                                     alt="" />
+                                <div class="backdrop-faded p-4 p-md-6">
+                                    <a class="text-white fw-bold fs-7" href="#">{{ _("Fully Integrated System") }}</a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="swiper-slide rounded-3 overflow-hidden">
+                            <div class="position-relative w-100 h-100">
+                                <img class="w-100 h-100 object-fit-cover"
+                                     src="{% static 'images/bg/haikal-04.png' %}"
+                                     alt="" />
+                                <div class="backdrop-faded p-4 p-md-6">
+                                    <a class="text-white fw-bold fs-7" href="#!">{{ _("Advanced Dashboards for better decisions") }}</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="swiper-nav">
+                    <div class="swiper-button-next">
+                        <span class="fas fa-chevron-right text-primary"
+                              data-fa-transform="shrink-3"></span>
+                    </div>
+                    <div class="swiper-button-prev">
+                        <span class="fas fa-chevron-left text-primary" data-fa-transform="shrink-3"></span>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section class="pt-lg-0 pt-xl-8">
+            {% include 'footer.html' %}
+        </section>
     </div>
-
-    <section class="pt-6 pt-md-10 pb-10" id="feature">
-      <div class="container-medium">
-        <div class="bg-holder d-none d-xl-block" style="background-image:url({% static 'images/bg/bg-left-27.png' %});background-size:auto;background-position:left;"></div>
-        <div class="bg-holder d-none d-xl-block" style="background-image:url({% static 'images/bg/bg-right-27.png' %});background-size:auto;background-position:right;"></div>
-
-        <div class="row g-3 position-relative">
-          <div class="col-lg-6">
-            <div class="row g-3">
-              <div class="col-md-7">
-                <h4 class="fw-semibold mb-3">{{ _("Because Inventory Needs Order") }}</h4>
-                <p class="mb-3 mb-md-0 text-body-tertiary">
-                  {% blocktrans %}Haikal empowers car dealers with a seamless, structured system to manage their inventory effortlessly, ensuring every vehicle is tracked, accounted for, and ready for sale with precision and efficiency.{% endblocktrans %}
-                </p>
-              </div>
-              <div class="col-6 col-md-5">
-                <div class="img-zoom-hover position-relative h-100 rounded-3 overflow-hidden"><a href="#"><img class="w-100 h-100 object-fit-cover bg-opacity-75" src="{% static 'images/bg/haikal-01.png' %}" alt="" /></a>
-                  <div class="backdrop-faded">
-                    <a class="fw-bold fs-7 text-white stretched-link" href="#">{% trans 'Inventory Management' %}</a>
-                    <p class="mb-0 text-white fs-9">{% trans 'Effortlessly manage your car inventory with real-time updates and intuitive tools.' %}</p>
-                  </div>
-                </div>
-              </div>
-              <div class="col-6 col-md-5">
-                <div class="img-zoom-hover position-relative h-100 rounded-3 overflow-hidden"><a href="#"> <img class="w-100 h-100 object-fit-cover bg-opacity-75" src="{% static 'images/bg/haikal-10.png' %}" alt="" /></a>
-                  <div class="backdrop-faded">
-                    <a class="fw-bold fs-7 text-white" href="#!">{% trans 'Seamless Accounting' %}</a>
-                    <p class="mb-0 text-white fs-9">{% trans 'Integrated double-entry accounting tailored for car dealers.' %}</p>
-                  </div>
-                </div>
-              </div>
-              <div class="col-md-7">
-                <div class="img-zoom-hover position-relative h-100 rounded-3 overflow-hidden"><a href="#">
-                  <img class="w-100 h-md-100 object-fit-cover bg-opacity-75" src="{% static 'images/bg/haikal-11.png' %}" alt="" height="220" />
-                </a>
-                  <div class="backdrop-faded">
-                    <a class="fw-bold fs-7 text-white" href="#">{% trans 'Advanced Analytics' %}</a>
-                    <p class="mb-0 text-white fs-9">{% trans 'Gain insights and make data-driven decisions for your business.' %}</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-6">
-            <div class="d-flex flex-column gap-3 h-100">
-              <div class="img-zoom-hover position-relative h-100 rounded-3 overflow-hidden">
-                <a href="#">
-                  <img class="w-100 h-lg-100 object-fit-cover bg-opacity-75" src="{% static 'images/bg/haikal-09.png' %}" alt="" height="220" />
-                </a>
-                <div class="backdrop-faded"><a class="fw-bold fs-7 text-white" href="#!">{% trans 'CRM' %}</a>
-                  <p class="mb-0 text-white fs-9">{% trans 'Specialized customer relationship management system designed for car dealers, offering streamlined sales.' %}</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <section class="bg-body-emphasis pt-lg-0 pt-xl-8" id="pricing">
-      <div class="bg-holder d-none d-xl-block" style="background-image:url({% static 'images/bg/bg-left-29.png' %});background-size:auto;background-position:-15%;"></div>
-      <div class="container-medium position-relative">
-        <h2 class="mb-7">{{ _("Pricing") }}</h2>
-        <div class="row g-3 mb-7 mb-lg-11">
-          {% for plan in plan_list %}
-            <div class="col-lg-3">
-              <input type="radio" class="btn-check" name="selected_plan" id="plan_{{ forloop.counter }}" value="{{ plan.id }}" autocomplete="off">
-
-              <label class="btn w-100 h-100 p-0" for="plan_{{ forloop.counter }}">
-                <div class="card h-100 border border-2 rounded-4 {% if forloop.first %}border-primary{% else %}border-secondary{% endif %}">
-                  <div class="card-body p-4">
-                    <h2 class="mb-4 h5">{{ plan.name }}</h2>
-                    <h3 class="h6 mb-3">
-                      {{ plan.planpricing_set.first.price }}
-                      <span class="icon-saudi_riyal"></span>
-                      <span class="fs-8 fw-normal">/ {{ _("Per month") }}</span>
-                    </h3>
-                    <h5 class="mb-3 h6">{{ _("Included") }}</h5>
-                    <ul class="fa-ul ps-3 m-0">
-                      {% for line in plan.description|splitlines %}
-                        <li class="d-flex align-items-start mb-2">
-                          <span class="fa-li"><i class="fas fa-check text-primary"></i></span>
-                          <span class="text-muted fw-semibold">{{ line }}</span>
-                        </li>
-                      {% endfor %}
-                    </ul>
-                  </div>
-                </div>
-              </label>
-            </div>
-          {% endfor %}
-        </div>
-
-      </div>
-    </section>
-
-    <section class="overflow-x-hidden mb-9 pt-lg-0 pt-xl-8">
-      <div class="bg-holder d-none d-xl-block" style="background-image:url({% static 'images/bg/bg-left-31.png' %});background-size:22%;background-position:left;z-index:1;"></div>
-      <div class="bg-holder d-none d-xl-block" style="background-image:url({% static 'images/bg/bg-right-31.png' %});background-size:15%;background-position:right bottom;z-index:1;"></div>
-
-      <div class="bg-latest-posts"></div>
-      <div class="container-medium text-center position-relative z-2">
-        <h3 class="mb-2 text-body-emphasis">{{ _("Other features") }}</h3>
-        <p class="mb-0 text-body-tertiary mb-13">{{ _("Find out other features included in Haikal")}}</p>
-      </div>
-      <div class="swiper-theme-container swiper-zooming-slider">
-        <div class="swiper-container theme-slider" data-swiper='{"loop":true,"slidesPerView":1.3,"spaceBetween":32,"speed":2000,"autoplay":true,"centeredSlides":true,"simulateTouch":false,"breakpoints":{"540":{"slidesPerView":1.5},"768":{"slidesPerView":1.8},"1200":{"slidesPerView":2},"1530":{"slidesPerView":2.8}}}'>
-          <div class="swiper-wrapper">
-            <div class="swiper-slide rounded-3 overflow-hidden">
-              <div class="position-relative w-100 h-100"><img class="w-100 h-100 object-fit-cover" src="{% static 'images/bg/haikal-02.png' %}" alt="" />
-                <div class="backdrop-faded p-4 p-md-6">
-                  <a class="text-white fw-bold fs-7" href="#">{{ _("Manage Everything from one place")}}</a>
-                </div>
-              </div>
-            </div>
-            <div class="swiper-slide rounded-3 overflow-hidden">
-              <div class="position-relative w-100 h-100"><img class="w-100 h-100 object-fit-cover" src="{% static 'images/bg/haikal-08.png' %}" alt="" />
-                <div class="backdrop-faded p-4 p-md-6">
-                  <a class="text-white fw-bold fs-7" href="#">{{ _("The Car is in the center of your business") }}</a>
-                </div>
-              </div>
-            </div>
-            <div class="swiper-slide rounded-3 overflow-hidden">
-              <div class="position-relative w-100 h-100"><img class="w-100 h-100 object-fit-cover" src="{% static 'images/bg/haikal-03.png' %}" alt="" />
-                <div class="backdrop-faded p-4 p-md-6">
-                  <a class="text-white fw-bold fs-7" href="#">{{ _("Fully Integrated System") }}</a>
-                </div>
-              </div>
-            </div>
-            <div class="swiper-slide rounded-3 overflow-hidden">
-              <div class="position-relative w-100 h-100"><img class="w-100 h-100 object-fit-cover" src="{% static 'images/bg/haikal-04.png' %}" alt="" />
-                <div class="backdrop-faded p-4 p-md-6">
-                  <a class="text-white fw-bold fs-7" href="#!">{{ _("Advanced Dashboards for better decisions") }}</a>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="swiper-nav">
-          <div class="swiper-button-next"><span class="fas fa-chevron-right text-primary" data-fa-transform="shrink-3"></span></div>
-          <div class="swiper-button-prev"><span class="fas fa-chevron-left text-primary" data-fa-transform="shrink-3"></span></div>
-        </div>
-      </div>
-    </section>
-    <section class="pt-lg-0 pt-xl-8">
-      {% include 'footer.html' %}
-    </section>
-  </div>
-
-
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/welcome_base.html b/templates/welcome_base.html
index 634e4ce3..2c3dc611 100644
--- a/templates/welcome_base.html
+++ b/templates/welcome_base.html
@@ -2,57 +2,83 @@
 <!DOCTYPE html>
 {% get_current_language as LANGUAGE_CODE %}
 <html lang="{{ LANGUAGE_CODE }}"
-      dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}"
+      dir="{% if LANGUAGE_CODE == 'ar' %}
+               rtl
+           {% else %}
+               ltr
+           {% endif %}"
       data-bs-theme="dark"
       data-navigation-type="default"
       data-navbar-horizontal-shape="default">
-
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="Haikal - The Backbone of Car Qar: An innovative car inventory management system designed to streamline dealership operations. Manage inventory, sales, transfers, and accounting seamlessly with advanced analytics and intuitive tools. Inspired by Arabic origins, Haikal empowers businesses with precision and efficiency.">
-
-    <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' %}">
-    <link rel="shortcut icon" type="image/x-icon" href="{% static 'images/favicons/favicon.ico' %}">
-    <link rel="manifest" href="{% static 'images/favicons/manifest.json' %}">
-    <meta name="msapplication-TileImage" content="{% static 'images/logos/logo-d.png' %}">
-    <meta name="theme-color" content="#ffffff">
-
-    <link href="{% static 'vendors/mapbox-gl/mapbox-gl.css' %}" rel="stylesheet">
-    <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&display=swap" rel="stylesheet">
-     {% comment %} <link href="{% static 'vendors/simplebar/simplebar.min.css' %}" rel="stylesheet"> {% endcomment %}
-    {% comment %} <link href="{% static 'css/sweetalert2.min.css' %}" rel="stylesheet"> {% endcomment %}
-    {% comment %} <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css"> {% endcomment %}
-
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="description"
+              content="Haikal - The Backbone of Car Qar: An innovative car inventory management system designed to streamline dealership operations. Manage inventory, sales, transfers, and accounting seamlessly with advanced analytics and intuitive tools. Inspired by Arabic origins, Haikal empowers businesses with precision and efficiency.">
+        <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' %}">
+        <link rel="shortcut icon"
+              type="image/x-icon"
+              href="{% static 'images/favicons/favicon.ico' %}">
+        <link rel="manifest" href="{% static 'images/favicons/manifest.json' %}">
+        <meta name="msapplication-TileImage"
+              content="{% static 'images/logos/logo-d.png' %}">
+        <meta name="theme-color" content="#ffffff">
+        <link href="{% static 'vendors/mapbox-gl/mapbox-gl.css' %}"
+              rel="stylesheet">
+        <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&display=swap"
+              rel="stylesheet">
+        {% comment %} <link href="{% static 'vendors/simplebar/simplebar.min.css' %}" rel="stylesheet"> {% endcomment %}
+        {% comment %} <link href="{% static 'css/sweetalert2.min.css' %}" rel="stylesheet"> {% endcomment %}
+        {% comment %} <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css"> {% endcomment %}
         {% if LANGUAGE_CODE == 'ar' %}
-            <link href="{% static 'css/theme-rtl.min.css' %}" type="text/css" rel="stylesheet" id="style-rtl">
-            <link href="{% static 'css/user-rtl.min.css' %}" type="text/css" rel="stylesheet" id="user-style-rtl">
+            <link href="{% static 'css/theme-rtl.min.css' %}"
+                  type="text/css"
+                  rel="stylesheet"
+                  id="style-rtl">
+            <link href="{% static 'css/user-rtl.min.css' %}"
+                  type="text/css"
+                  rel="stylesheet"
+                  id="user-style-rtl">
         {% else %}
-            <link href="{% static 'css/theme.min.css' %}" type="text/css" rel="stylesheet" id="style-default">
-            <link href="{% static 'css/user.min.css' %}" type="text/css" rel="stylesheet" id="user-style-default">
+            <link href="{% static 'css/theme.min.css' %}"
+                  type="text/css"
+                  rel="stylesheet"
+                  id="style-default">
+            <link href="{% static 'css/user.min.css' %}"
+                  type="text/css"
+                  rel="stylesheet"
+                  id="user-style-default">
         {% endif %}
-
-    <script src="{% static 'vendors/simplebar/simplebar.min.js' %}"></script>
-    <script src="{% static 'js/config.js' %}"></script>
-    {% comment %} <script src="{% static 'js/sweetalert2.all.min.js' %}"></script> {% endcomment %}
-    <link href="{% static 'css/custom.css' %}" rel="stylesheet">
-  </head>
-
-  <body>
-
-    {% include 'welcome_header.html' %}
-    {% block content %}
-    {% endblock content %}
-
-{% comment %}
+        <script src="{% static 'vendors/simplebar/simplebar.min.js' %}"></script>
+        <script src="{% static 'js/config.js' %}"></script>
+        {% comment %} <script src="{% static 'js/sweetalert2.all.min.js' %}"></script> {% endcomment %}
+        <link href="{% static 'css/custom.css' %}" rel="stylesheet">
+    </head>
+    <body>
+        {% include 'welcome_header.html' %}
+        {% block content %}
+        {% endblock content %}
+        {% comment %}
     <script src="{% static 'vendors/anchorjs/anchor.min.js' %}"></script>
     <script src="{% static 'vendors/is/is.min.js' %}"></script>
     <script src="{% static 'vendors/list.js/list.min.js' %}"></script>
@@ -61,35 +87,31 @@
     <script src="{% static 'js/travel-agency-dashboard.js' %}"></script>
     <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> {% endcomment %}
-
-    <script src="{% static 'vendors/popper/popper.min.js' %}"></script>
-    <script src="{% static 'vendors/bootstrap/bootstrap.min.js' %}"></script>
-    <script src="{% static 'vendors/fontawesome/all.min.js' %}"></script>
-    <script src="{% static 'vendors/lodash/lodash.min.js' %}"></script>
-    <script src="{% static 'vendors/feather-icons/feather.min.js' %}"></script>
-    <script src="{% static 'vendors/typed.js/typed.umd.js' %}"></script>
-    <script src="{% static 'js/phoenix.js' %}"></script>
-
-    {% comment %} <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>
-    <script src="{% static 'vendors/is/is.min.js' %}"></script>
-    <script src="{% static 'vendors/fontawesome/all.min.js' %}"></script>
-    <script src="{% static 'vendors/lodash/lodash.min.js' %}"></script>
-    <script src="{% static 'vendors/list.js/list.min.js' %}"></script>
-    <script src="{% static 'vendors/feather-icons/feather.min.js' %}"></script>
-    <script src="{% static 'vendors/dayjs/dayjs.min.js' %}"></script>
-    <script src="{% static 'js/phoenix.js' %}"></script>
-    <script src="{% static 'vendors/echarts/echarts.min.js' %}"></script>
-    <script src="{% static 'js/travel-agency-dashboard.js' %}"></script>
-    <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/typed.js/typed.umd.js' %}"></script> {% endcomment %}
-
-    {% block customJS %}
-    {% endblock customJS %}
-  </body>
-
-</html>
\ No newline at end of file
+        <script src="{% static 'vendors/swiper/swiper-bundle.min.js' %}"></script> {% endcomment %}
+        <script src="{% static 'vendors/popper/popper.min.js' %}"></script>
+        <script src="{% static 'vendors/bootstrap/bootstrap.min.js' %}"></script>
+        <script src="{% static 'vendors/fontawesome/all.min.js' %}"></script>
+        <script src="{% static 'vendors/lodash/lodash.min.js' %}"></script>
+        <script src="{% static 'vendors/feather-icons/feather.min.js' %}"></script>
+        <script src="{% static 'vendors/typed.js/typed.umd.js' %}"></script>
+        <script src="{% static 'js/phoenix.js' %}"></script>
+        {% comment %} <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>
+            <script src="{% static 'vendors/is/is.min.js' %}"></script>
+            <script src="{% static 'vendors/fontawesome/all.min.js' %}"></script>
+            <script src="{% static 'vendors/lodash/lodash.min.js' %}"></script>
+            <script src="{% static 'vendors/list.js/list.min.js' %}"></script>
+            <script src="{% static 'vendors/feather-icons/feather.min.js' %}"></script>
+            <script src="{% static 'vendors/dayjs/dayjs.min.js' %}"></script>
+            <script src="{% static 'js/phoenix.js' %}"></script>
+            <script src="{% static 'vendors/echarts/echarts.min.js' %}"></script>
+            <script src="{% static 'js/travel-agency-dashboard.js' %}"></script>
+            <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/typed.js/typed.umd.js' %}"></script> {% endcomment %}
+        {% block customJS %}
+        {% endblock customJS %}
+    </body>
+</html>
diff --git a/templates/welcome_footer.html b/templates/welcome_footer.html
index 6ac3bd89..b2477c2a 100644
--- a/templates/welcome_footer.html
+++ b/templates/welcome_footer.html
@@ -1,24 +1,21 @@
 <section class="footer pb-6 pb-md-11 pt-15">
-
-  <div class="container-medium">
-
-    <div class="row gy-3 justify-content-between">
-      <div class="row g-0 justify-content-between align-items-center h-100">
-        <div class="col-12 col-sm-auto text-center">
-          <span class="text-body"> © 2025 {{ _("All right reserved")}}</span>
-          <span class="fw-bold">Haikal</span>&nbsp;|&nbsp;<span class="fw-bold">هيكل</span>
-
+    <div class="container-medium">
+        <div class="row gy-3 justify-content-between">
+            <div class="row g-0 justify-content-between align-items-center h-100">
+                <div class="col-12 col-sm-auto text-center">
+                    <span class="text-body">© 2025 {{ _("All right reserved") }}</span>
+                    <span class="fw-bold">Haikal</span>&nbsp;|&nbsp;<span class="fw-bold">هيكل</span>
+                </div>
+                <div class="col-12 col-sm-auto text-center">
+                    <span class="fw-light  text-opacity-85">{{ _("Powered by") }}</span>
+                    <a class="mx-1 text-decoration-none text-body-highlight"
+                       href="https://tenhal.sa">
+                        <span>TENHAL</span>&nbsp;|&nbsp;<span>تنحل</span>
+                    </a>
+                    <span class="uil-trademark-circle fs-10 fw-light text-opacity-85"></span>
+                </div>
+            </div>
         </div>
-        <div class="col-12 col-sm-auto text-center">
-          <span class="fw-light  text-opacity-85">{{ _("Powered by")}} </span>
-          <a class="mx-1 text-decoration-none text-body-highlight" href="https://tenhal.sa">
-            <span>TENHAL</span>&nbsp;|&nbsp;<span>تنحل</span>
-          </a>
-          <span class="uil-trademark-circle fs-10 fw-light text-opacity-85"></span>
-        </div>
-      </div>
     </div>
-  </div>
-        <!-- end of .container-->
-
-</section>
\ No newline at end of file
+    <!-- end of .container-->
+</section>
diff --git a/templates/welcome_header.html b/templates/welcome_header.html
index 4e361b55..ee1bf6cc 100644
--- a/templates/welcome_header.html
+++ b/templates/welcome_header.html
@@ -1,32 +1,78 @@
 {% load i18n static %}
-<div class="bg-body-emphasis sticky-top" data-navbar-shadow-on-scroll="data-navbar-shadow-on-scroll">
-    <nav class="navbar navbar-landing navbar-expand-lg container-medium"><a class="navbar-brand me-1 me-sm-3" href="{% url 'home' %}">
-        <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" />
-            <h5 class="logo-text ms-2 d-none d-sm-block">{% trans 'Haikal' %}</h5>
-        </div>
-    </a>
+<div class="bg-body-emphasis sticky-top"
+     data-navbar-shadow-on-scroll="data-navbar-shadow-on-scroll">
+    <nav class="navbar navbar-landing navbar-expand-lg container-medium">
+        <a class="navbar-brand me-1 me-sm-3" href="{% url 'home' %}">
+            <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" />
+                <h5 class="logo-text ms-2 d-none d-sm-block">{% trans 'Haikal' %}</h5>
+            </div>
+        </a>
         <div class="d-flex align-items-center gap-2 gap-sm-3 gap-md-4 my-2 order-lg-1">
             <div class="theme-control-toggle fa-icon-wait">
-                <input class="form-check-input ms-0 theme-control-toggle-input" type="checkbox" data-theme-control="phoenixTheme" value="dark" id="themeControlToggleSm" />
-                <label class="mb-0 theme-control-toggle-label theme-control-toggle-light" for="themeControlToggleSm" data-bs-toggle="tooltip" data-bs-placement="bottom" 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="themeControlToggleSm" data-bs-toggle="tooltip" data-bs-placement="bottom" 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="themeControlToggleSm" />
+                <label class="mb-0 theme-control-toggle-label theme-control-toggle-light"
+                       for="themeControlToggleSm"
+                       data-bs-toggle="tooltip"
+                       data-bs-placement="bottom"
+                       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="themeControlToggleSm"
+                       data-bs-toggle="tooltip"
+                       data-bs-placement="bottom"
+                       data-bs-title="{{ _("Switch theme") }}"
+                       style="height:32px;
+                              width:32px">
+                    <span class="icon" data-feather="sun"></span>
+                </label>
             </div>
             <div class="dropdown">
-                <a class="nav-link lh-1 pe-0" id="languageDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <a class="nav-link lh-1 pe-0"
+                   id="languageDropdown"
+                   href="#"
+                   role="button"
+                   data-bs-toggle="dropdown"
+                   aria-haspopup="true"
+                   aria-expanded="false">
                     <span class="me-1" data-feather="globe"></span>
                 </a>
-                <div class="dropdown-menu dropdown-menu-end navbar-dropdown-caret py-0 shadow border" aria-labelledby="languageDropdown">
-                    <a class="dropdown-item fw-lighter" href="{% url 'switch_language' %}?language=en">English</a>
-                    <a class="dropdown-item fw-lighter" href="{% url 'switch_language' %}?language=ar">عربي</a>
+                <div class="dropdown-menu dropdown-menu-end navbar-dropdown-caret py-0 shadow border"
+                     aria-labelledby="languageDropdown">
+                    <a class="dropdown-item fw-lighter"
+                       href="{% url 'switch_language' %}?language=en">English</a>
+                    <a class="dropdown-item fw-lighter"
+                       href="{% url 'switch_language' %}?language=ar">عربي</a>
                 </div>
             </div>
-            <a class="btn btn-link text-body-tertiary p-0 me-2 me-lg-0" href="{% url 'account_login' %}">
+            <a class="btn btn-link text-body-tertiary p-0 me-2 me-lg-0"
+               href="{% url 'account_login' %}">
                 <span data-feather="user" style="width: 20px; height: 20px"></span>
             </a>
         </div>
-        <button class="navbar-toggler fs-8 ps-1 ps-sm-3 pe-0" 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 fs-8 ps-1 ps-sm-3 pe-0"
+                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">
             <ul class="navbar-nav me-auto mt-3 mt-lg-0">
                 <li class="nav-item border-bottom border-translucent border-bottom-lg-0">
@@ -38,8 +84,7 @@
                 <li class="nav-item border-bottom border-translucent border-bottom-lg-0">
                     <a class="nav-link" href="#pricing">{% trans 'Pricing'|upper %}</a>
                 </li>
-
             </ul>
         </div>
     </nav>
-</div>
\ No newline at end of file
+</div>