diff --git a/inventory/models.py b/inventory/models.py
index 665e1db7..765f5754 100644
--- a/inventory/models.py
+++ b/inventory/models.py
@@ -1208,7 +1208,17 @@ class Dealer(models.Model, LocalizedNameMixin):
 
     def save(self, *args, **kwargs):
         if not self.slug:
-            self.slug = slugify(self.name)
+            base_slug = slugify(self.name)
+            self.slug = base_slug
+            counter = 1
+
+            while (
+                self.__class__.objects.filter(slug=self.slug)
+                .exclude(pk=self.pk)
+                .exists()
+            ):
+                self.slug = f"{base_slug}-{counter}"
+                counter += 1
         super().save(*args, **kwargs)
 
     @property
@@ -1790,9 +1800,9 @@ class Organization(models.Model, LocalizedNameMixin):
 
     def deactivate_account(self):
         self.active = False
-        self.user.is_active = False
+        # self.user.is_active = False
         self.customer_model.active = False
-        self.user.save()
+        # self.user.save()
         self.customer_model.save()
         self.save()
 
@@ -2284,7 +2294,17 @@ class Opportunity(models.Model):
             opportinity_for = self.organization.name
 
         if not self.slug:
-            self.slug = slugify(f"opportunity {opportinity_for}")
+            base_slug = slugify(f"opportunity for {opportinity_for}")
+            self.slug = base_slug
+            counter = 1
+
+            while (
+                self.__class__.objects.filter(slug=self.slug)
+                .exclude(pk=self.pk)
+                .exists()
+            ):
+                self.slug = f"{base_slug}-{counter}"
+                counter += 1
         super().save(*args, **kwargs)
 
     class Meta:
diff --git a/inventory/templatetags/custom_filters.py b/inventory/templatetags/custom_filters.py
index 267041cb..1da1709d 100644
--- a/inventory/templatetags/custom_filters.py
+++ b/inventory/templatetags/custom_filters.py
@@ -13,6 +13,17 @@ from django.db.models import Case, Value, When, IntegerField
 
 register = template.Library()
 
+@register.filter
+def get_percentage(value, total):
+   
+    try:
+        value = int(value)
+        total = int(total)
+        if total == 0:
+            return 0
+        return (value / total) * 100
+    except (ValueError, TypeError):
+        return 0
 
 @register.filter(name="percentage")
 def percentage(value):
diff --git a/inventory/views.py b/inventory/views.py
index ee4fa8d5..f4bd58c9 100644
--- a/inventory/views.py
+++ b/inventory/views.py
@@ -465,20 +465,19 @@ class ManagerDashboard(LoginRequiredMixin, TemplateView):
         context["pending_leads"] = pending_leads
         context["canceled_leads"] = canceled_leads
         context["car"] = json.dumps(car_by_make)
-        context["available_cars"] = car_status.get(
-            models.CarStatusChoices.AVAILABLE, 0
-        )
-        context["sold_cars"] = car_status.get(models.CarStatusChoices.SOLD, 0)
-        context["reserved_cars"] = car_status.get(
-            models.CarStatusChoices.RESERVED, 0
-        )
-        context["hold_cars"] = car_status.get(models.CarStatusChoices.HOLD, 0)
-        context["damaged_cars"] = car_status.get(
-            models.CarStatusChoices.DAMAGED, 0
-        )
-        context["transfer_cars"] = car_status.get(
-            models.CarStatusChoices.TRANSFER, 0
-        )
+
+
+        context["available_cars"] =qs.filter(status='available').count()
+        context["sold_cars"] = qs.filter(status='sold').count()
+        context["reserved_cars"] = qs.filter(status='reserved').count()
+        context["hold_cars"] =qs.filter(status='hold').count()
+        context["damaged_cars"] = qs.filter(status='damaged').count()
+        context["transfer_cars"] = qs.filter(status='transfer').count()
+        context["present_inventory_count"]=total_cars-context["sold_cars"]-context["damaged_cars"]
+        cars_sold=qs.filter(status='sold')
+        # cars_sold.aggregate(total_inventory_value=sum())
+
+
         context["customers"] = entity.get_customers().count()
         context["staff"] = models.Staff.objects.filter(dealer=dealer).count()
         context["total_leads"] = models.Lead.objects.filter(dealer=dealer).count()
@@ -486,6 +485,8 @@ class ManagerDashboard(LoginRequiredMixin, TemplateView):
         context["estimates"] = entity.get_estimates().count()
         context["purchase_orders"] = entity.get_purchase_orders().count()
 
+
+
         return context
 
 
@@ -6049,6 +6050,7 @@ def lead_create(request, dealer_slug):
 
                 if instance.lead_type == "customer":
                     customer = models.Customer.objects.filter(
+                        dealer=dealer,
                         email=instance.email
                     ).first()
                     if not customer:
@@ -6068,6 +6070,7 @@ def lead_create(request, dealer_slug):
 
                 if instance.lead_type == "organization":
                     organization = models.Organization.objects.filter(
+                        dealer=dealer,
                         email=instance.email
                     ).first()
                     if not organization:
@@ -6929,11 +6932,11 @@ class OpportunityCreateView(
         if self.request.is_dealer:
             form.fields["lead"].queryset = models.Lead.objects.filter(
                 dealer=dealer
-            )
+            )            
         elif self.request.is_staff:
             form.fields["lead"].queryset = models.Lead.objects.filter(
                 dealer=dealer, staff=self.request.staff
-            )
+            )            
         return form
 
     def get_success_url(self):
@@ -10892,7 +10895,8 @@ def car_sale_report_view(request, dealer_slug):
     # Get distinct values for filter dropdowns
     makes = models.Car.objects.filter(dealer=dealer, status='sold').values_list('id_car_make__name', flat=True).distinct()
     models_qs = models.Car.objects.filter(dealer=dealer, status='sold').values_list('id_car_model__name', flat=True).distinct()
-    series = models.Car.objects.filter(dealer=dealer, status='sold').values_list('id_car_serie__name', flat=True).distinct()
+    series = models.Car.objects.filter(dealer=dealer, status='sold').values_list(
+        'id_car_serie__name', flat=True).distinct()
     years = models.Car.objects.filter(dealer=dealer, status='sold').values_list('year', flat=True).distinct().order_by('-year')
 
     # # Calculate summary data for the filtered results
diff --git a/static/images/logos/users/Gemini_Generated_Image_wf3w0uwf3w0uwf3w.png b/static/images/logos/users/Gemini_Generated_Image_wf3w0uwf3w0uwf3w.png
new file mode 100644
index 00000000..0b4f99a9
Binary files /dev/null and b/static/images/logos/users/Gemini_Generated_Image_wf3w0uwf3w0uwf3w.png differ
diff --git a/templates/bill/includes/card_bill.html b/templates/bill/includes/card_bill.html
index 61492476..8d69620e 100644
--- a/templates/bill/includes/card_bill.html
+++ b/templates/bill/includes/card_bill.html
@@ -218,7 +218,7 @@
                                 {% endif %}
                                 <!-- Mark as Review -->
                                 {% if bill.can_review %}
-                                {{request.is_accountant}}
+                               
                                     <button class="btn btn-phoenix-warning"
                                             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' %}
diff --git a/templates/dashboards/manager.html b/templates/dashboards/manager.html
index 67866889..962f274b 100644
--- a/templates/dashboards/manager.html
+++ b/templates/dashboards/manager.html
@@ -1,340 +1,641 @@
-{% load i18n static custom_filters django_ledger %}
+{% extends 'base.html' %}
 {% 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>
-    </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">
-            <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>
-        </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">
-            <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>
-        </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">
-            <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>
-        </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">
-            <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>
-        </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">
-            <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>
-        </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">
-            <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>
+<div class="main-content flex-grow-1 mt-4 mb-3">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+        <p class="fs-2">Dashboard Overview<i class="fas fa-chart-area ms-3 text-primary fs-3"></i></p>
+        <div class="dropdown">
+            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
+                Last 30 Days
+            </button>
+            <ul class="dropdown-menu">
+                <li><a class="dropdown-item" href="#">Today</a></li>
+                <li><a class="dropdown-item" href="#">Last 7 Days</a></li>
+                <li><a class="dropdown-item" href="#">Last 90 Days</a></li>
+            </ul>
         </div>
     </div>
-    <div class="row g-3 pe-xxl-3 my-3">
-        <div class="col-12 col-xl-6 col-xxl-12">
-            <div class="row">
-                <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 class="mt-4 mt-md-0">
-                            <h1 class="text-body-highlight">
-                                {{ total_cars }} <span class="fs-6 text-body-highlight">{{ _("Car") }}</span>
-                            </h1>
-                        </div>
-                    </div>
+
+    <div class="row g-4 mb-5">
+        <div class="col-md-6 col-lg-3">
+            <div class="card h-100 p-3">
+                <div class="card-body">
+                    <h5 class="card-title text-primary">Total Revenue</h5>
+                    <p class="stat-value">$1.25M</p>
+                    <span class="text-success small">+8% from last month</span>
                 </div>
-                <div class="col-4 col-xl-12 col-xxl-4 border-end border-end-xl-0 border-end-xxl py-4 ps-4 ps-sm-5 ps-xl-0 ps-xxl-5">
-                    <h4 class="text-body mb-4">{% trans 'inventory value'|upper %}</h4>
-                    <div class="d-md-flex flex-between-center">
-                        <div class="d-md-flex align-items-center gap-2">
-                            <span class="fas fa-money-check-alt fs-5 text-success-light dark__text-opacity-75"></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_selling_price|currency_format }} <span class="icon-saudi_riyal"></span>
-                            </h3>
-                        </div>
-                    </div>
+            </div>
+        </div>
+        <div class="col-md-6 col-lg-3">
+            <div class="card h-100 p-3">
+                <div class="card-body">
+                    <h5 class="card-title text-primary">Net Profit</h5>
+                    <p class="stat-value">$1.25M</p>
+                    <span class="text-success small">+8% from last month</span>
                 </div>
-                <div class="col-4 col-xl-12 col-xxl-4 border-end border-end-xl-0 border-end-xxl py-4 pe-4 pe-sm-5 pe-xl-0 pe-xxl-5">
-                    <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>
-                            <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>
-                        </div>
-                    </div>
+            </div>
+        </div>
+        <div class="col-md-6 col-lg-3">
+            <div class="card h-100 p-3">
+                <div class="card-body">
+                    <h5 class="card-title text-primary">Gross Profit</h5>
+                    <p class="stat-value">$1.25M</p>
+                    <span class="text-success small">+8% from last month</span>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 col-lg-3">
+            <div class="card h-100 p-3">
+                <div class="card-body">
+                    <h5 class="card-title text-danger">Total Expense</h5>
+                    <p class="stat-value">$1.25M</p>
+                    <span class="text-success small">+8% from last month</span>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 col-lg-3">
+            <div class="card h-100 p-3">
+                <div class="card-body">
+                    <h5 class="card-title text-primary">Total VAT collected</h5>
+                    <p class="stat-value">$1.25M</p>
+                    <span class="text-success small">+8% from last month</span>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 col-lg-3">
+            <div class="card h-100 p-3">
+                <div class="card-body">
+                    <h5 class="card-title text-success">Cars Sold</h5>
+                    <p class="stat-value">{{sold_cars}}</p>
+                    <span class="text-success small">+5 units from last month</span>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 col-lg-3">
+            <div class="card h-100 p-3">
+                <div class="card-body">
+                    <h5 class="card-title text-danger">Average Time on Lot</h5>
+                    <p class="stat-value">10 days</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 col-lg-3">
+            <div class="card h-100 p-3">
+                <div class="card-body">
+                    <h5 class="card-title text-warning">Inventory Value</h5>
+                    <p class="stat-value">$5.8M</p>
+                    <span class="text-danger small">-2% from last month</span>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 col-lg-3">
+            <div class="card h-100 p-3">
+                <div class="card-body">
+                    <h5 class="card-title text-danger">Aging Inventory</h5>
+                    <p class="stat-value">12</p>
+                    <span class="text-success small">-4 cars from last month</span>
                 </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="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>
-                            <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>
-                                        <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>
-                                        <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>
-                                        <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>
-                                        <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>
-                                        <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>
-                                        <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>
-                            </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-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>
-                        </div>
-                    </div>
+
+    <div class="row g-4">
+        <div class="col-lg-8">
+            <div class="card h-100">
+                <div class="card-header">Monthly Revenue & Profit</div>
+                <div class="card-body chart-container">
+                    <canvas id="revenueProfitChart"></canvas>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-4">
+            <div class="card h-100">
+                <div class="card-header">Monthly Cars Sold</div>
+                <div class="card-body d-flex align-items-center justify-content-center">
+                    <canvas id="CarsSoldByMonthChart"></canvas>
+                </div>
+            </div>
+        </div>
+         <div class="col-lg-6">
+            <div class="card h-100">
+                <div class="card-header">Inventory By Make</div>
+                <div class="card-body d-flex align-items-center justify-content-center">
+                    <canvas id="salesByBrandChart"></canvas>
+                </div>
+            </div>
+        </div>
+         <div class="col-lg-6">
+            <div class="card h-100">
+                <div class="card-header">Sales By Make</div>
+                <div class="card-body d-flex align-items-center justify-content-center">
+                    <canvas id="inventoryByBrandChart"></canvas>
+                </div>
+            </div>
+        </div>
+        
+        <div class="col-lg-6">
+            <div class="card h-100">
+                <div class="card-header">Salesperson Performance</div>
+                <div class="card-body chart-container">
+                    <canvas id="salespersonChart"></canvas>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-6">
+            <div class="card h-100">
+                <div class="card-header">Top 5 Lead Sources</div>
+                <div class="card-body chart-container">
+                    <canvas id="leadSourcesChart"></canvas>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-12">
+            <div class="card h-100">
+                <div class="card-header">Appointments by Weekday</div>
+                <div class="card-body chart-container">
+                    <canvas id="appointmentsChart"></canvas>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-lg-12">
+            <div class="card h-100">
+                <div class="card-header">Lead Conversion Funnel</div>
+                <div class="card-body d-flex align-items-center justify-content-center">
+                    <canvas id="leadFunnelChart"></canvas>
                 </div>
             </div>
         </div>
     </div>
-    <script>
-        document.addEventListener("DOMContentLoaded", function () {
-    /* Car Chart By Make */
-            const { getColor, rgbaColor } = window.phoenix.utils;
-            const handleTooltipPosition = ([pos, , dom, , size]) => {
-        // only for mobile device
-                if (window.innerWidth <= 540) {
-                    const tooltipHeight = dom.offsetHeight;
-                    const obj = {top: pos[1] - tooltipHeight - 20};
-                    obj[pos[0] < size.viewSize[0] / 2 ? 'left' : 'right'] = 5;
-                    return obj;
+</div>
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+{% endblock content %}
+
+
+{% block customJS%}
+
+<script>
+   ctx1=document.getElementById('CarsSoldByMonthChart')
+   new Chart(ctx1,{
+    type: 'bar',
+
+    data: {
+        labels:['January','February','March','April','May','June','July','August','September','October', 'November','December' ],
+
+        datasets: [{
+        label: 'Total Cars Sold',
+        data: [2,3,10,4,30,12,8,9,20,12,15,35],
+        borderWidth: 1
+      }]
+
+    },
+
+
+    options: {
+      scales: {
+        y: {
+          beginAtZero: true
+        }
+      }
+    }
+    
+
+   });
+
+  // Get the canvas context for the chart
+const ctx2 = document.getElementById('revenueProfitChart').getContext('2d');
+
+// Chart.js configuration
+new Chart(ctx2, {
+    type: 'line', // Use a line chart
+    data: {
+        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        datasets: [
+            {
+                label: 'Monthly Revenue',
+                data: [120000, 150000, 130000, 180000, 200000, 175000, 190000, 220000, 210000, 250000, 240000, 280000],
+                borderColor: '#007bff', // A vibrant blue
+                backgroundColor: 'rgba(0, 123, 255, 0.2)',
+                tension: 0.4, // Smooths the line
+                fill: true, // Fills the area under the line
+                pointBackgroundColor: '#007bff',
+                pointRadius: 5,
+                pointHoverRadius: 8
+            },
+            {
+                label: 'Monthly Net Profit',
+                data: [25000, 35000, 28000, 40000, 45000, 38000, 42000, 50000, 48000, 55000, 52000, 60000],
+                borderColor: '#28a745', // A strong green
+                backgroundColor: 'rgba(40, 167, 69, 0.2)',
+                tension: 0.4,
+                fill: true,
+                pointBackgroundColor: '#28a745',
+                pointRadius: 5,
+                pointHoverRadius: 8
+            }
+        ]
+    },
+    options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: true,
+                labels: {
+                    color: '#495057', // Darker legend text
+                    boxWidth: 20
                 }
-                return null; // else default behaviour
-            };
-
-
-            const carData = {{ car|safe }}
-            const carNames = carData.map(item => item.id_car_make__name);
-            const carCounts = carData.map(item => item.count);
-
-            const car_chart = echarts.init(document.getElementById('car-chart-by-make'));
-            option = {
-                color: getColor("danger"),
-                tooltip: {
-                    trigger: 'axis',
-                    position: (...params) => handleTooltipPosition(params),
-                    padding: [7, 10],
-                    axisPointer: {
-                        type: 'none'
-                    },
-                },
-                extraCssText: 'z-index: 1000',
-                responsive: true,
-                xAxis: [
-                    {
-                        type: 'category',
-                        boundaryGap: false,
-                        data: carNames,
-                        axisLine: {
-                            show: true,
-                            lineStyle: {color: getColor('secondary-bg')}
-                        },
-                        axisTick: {
-                            show: false
-                        },
+            },
+            tooltip: {
+                backgroundColor: 'rgba(52, 58, 64, 0.9)', // Darker tooltip background
+                titleColor: 'white',
+                bodyColor: 'white',
+                callbacks: {
+                    label: function(context) {
+                        let label = context.dataset.label || '';
+                        if (label) {
+                            label += ': ';
+                        }
+                        if (context.parsed.y !== null) {
+                            label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
+                        }
+                        return label;
                     }
-                ],
-                yAxis: [
-                    {
-                        show: false,
-                        type: 'value',
-                    }
-                ],
-                series: [
-                    {
-                        type: 'bar',
-                        barWidth: 3,
-                        backgroundStyle: {
-                            borderRadius: [0.5, 0.5, 0, 0],
-                        },
-                        data: carCounts
-                    },
-                ],
+                }
+            }
+        },
+        scales: {
+            x: {
                 grid: {
-                    bottom: 0,
-                    top: 0,
-                    left: 10,
-                    right: 10,
-                    containLabel: false
-                }
-            };
-
-            car_chart.setOption(option);
-
-    /* Car Status Chart */
-            const car_status = echarts.init(document.getElementById('echart-cars-by-status'));
-            const data = [
-                {value: {{available_cars}}, name: '{{ _("Available") }}'},
-                {value: {{sold_cars}}, name: '{{ _("Sold")}}'},
-                {value: {{reserved_cars}}, name: '{{ _("Reserved") }}'},
-                {value: {{transfer_cars}}, name: '{{ _("Transfer") }}'},
-                {value: {{hold_cars}}, name: '{{ _("Hold") }}'},
-                {value: {{damaged_cars}}, name: '{{ _("Damaged") }}'}
-            ];
-
-            option = {
-                color: [
-                    rgbaColor(getColor('success'),0.7),
-                    rgbaColor(getColor('warning'),0.7),
-                    rgbaColor(getColor('danger'),0.7),
-                    rgbaColor(getColor('primary'),0.7),
-                    rgbaColor(getColor('warning-light'),0.7),
-                    rgbaColor(getColor('secondary-light'),0.7),
-                ],
-                tooltip: {
-                    trigger: 'item',
-                    padding: [7, 10],
-                    backgroundColor: getColor('body-highlight-bg'),
-                    borderColor: getColor('body-bg'),
-                    textStyle: {color: getColor('light-text-emphasis')},
-                    borderWidth: 1,
-                    transitionDuration: 0,
-                    extraCssText: 'z-index: 1000'
+                    color: 'rgba(0, 0, 0, 0.1)' // Lighter grid lines for better contrast
                 },
-                responsive: true,
-                maintainAspectRatio: false,
-
-                series: [
-                    {
-                        name: '',
-                        type: 'pie',
-                        radius: ['55%', '90%'],
-                        startAngle: 90,
-                        avoidLabelOverlap: false,
-                        itemStyle: {
-                            borderColor: getColor('body-bg'),
-                            borderWidth: 3
-                        },
-
-                        label: {
-                            show: false
-                        },
-                        emphasis: {
-                            label: {
-                                show: false
-                            }
-                        },
-                        labelLine: {
-                            show: false
-                        },
-                        data
-                    }
-                ],
-                grid: {
-                    bottom: 0,
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    containLabel: false
+                ticks: {
+                    color: '#495057' // Darker text for x-axis labels
+                },
+                border: {
+                     color: '#adb5bd' // A subtle border color
                 }
-            };
-            car_status.setOption(option);
+            },
+            y: {
+                grid: {
+                    color: 'rgba(0, 0, 0, 0.1)'
+                },
+                ticks: {
+                    color: '#495057' // Darker text for y-axis labels
+                },
+                border: {
+                    color: '#adb5bd'
+                }
+            }
+        }
+    }
+});
 
 
+// Get the canvas context for the chart
+const ctx3 = document.getElementById('salesByBrandChart').getContext('2d');
 
-        });
-    </script>
-{% endblock %}
+// Chart.js configuration for the Pie Chart
+new Chart(ctx3, {
+    type: 'pie',
+    data: {
+        labels: ['Toyota', 'Ford', 'Honda', 'BMW', 'Other'],
+        datasets: [{
+            label: 'Car Count by Make',
+            data: [45, 30, 25, 15, 10], // Sample data for car counts
+            backgroundColor: [
+                '#007bff', // Blue
+                '#28a745', // Green
+                '#ffc107', // Yellow
+                '#dc3545', // Red
+                '#6c757d'  // Gray
+            ],
+            hoverOffset: 15,
+        }]
+    },
+    options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                position: 'right', // Places the legend on the right side
+                labels: {
+                    color: '#343a40', // Dark text color for labels
+                    font: {
+                        size: 14
+                    }
+                }
+            },
+            tooltip: {
+                backgroundColor: 'rgba(52, 58, 64, 0.9)',
+                titleColor: '#fff',
+                bodyColor: '#fff',
+                callbacks: {
+                    label: function(context) {
+                        const label = context.label || '';
+                        const value = context.parsed || 0;
+                        const total = context.dataset.data.reduce((a, b) => a + b, 0);
+                        const percentage = ((value / total) * 100).toFixed(2);
+                        return `${label}: ${value} cars (${percentage}%)`;
+                    }
+                }
+            }
+        }
+    }
+});
+
+
+// Get the canvas context for the chart
+const ctx4 = document.getElementById('inventoryByBrandChart').getContext('2d');
+
+// Chart.js configuration for the Pie Chart
+new Chart(ctx4, {
+    type: 'pie',
+    data: {
+        labels: ['Toyota', 'Ford', 'Honda', 'BMW', 'Other'],
+        datasets: [{
+            label: 'Car Count by Make',
+            data: [45, 30, 25, 15, 10], // Sample data for car counts
+            backgroundColor: [
+                '#007bff', // Blue
+                '#28a745', // Green
+                '#ffc107', // Yellow
+                '#dc3545', // Red
+                '#6c757d'  // Gray
+            ],
+            hoverOffset: 15,
+        }]
+    },
+    options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                position: 'right', // Places the legend on the right side
+                labels: {
+                    color: '#343a40', // Dark text color for labels
+                    font: {
+                        size: 14
+                    }
+                }
+            },
+            tooltip: {
+                backgroundColor: 'rgba(52, 58, 64, 0.9)',
+                titleColor: '#fff',
+                bodyColor: '#fff',
+                callbacks: {
+                    label: function(context) {
+                        const label = context.label || '';
+                        const value = context.parsed || 0;
+                        const total = context.dataset.data.reduce((a, b) => a + b, 0);
+                        const percentage = ((value / total) * 100).toFixed(2);
+                        return `${label}: ${value} cars (${percentage}%)`;
+                    }
+                }
+            }
+        }
+    }
+});
+
+
+// Get the canvas context for the chart
+const ctx_salesperson = document.getElementById('salespersonChart').getContext('2d');
+
+// Chart.js configuration for the Salesperson Performance Bar Chart
+new Chart(ctx_salesperson, {
+    type: 'bar',
+    data: {
+        labels: ['John Doe', 'Jane Smith', 'Peter Jones', 'Mary Brown'],
+        datasets: [{
+            label: 'Cars Sold',
+            data: [15, 22, 18, 25], // Sample data for cars sold by each salesperson
+            backgroundColor: [
+                '#007bff', // Blue
+                '#28a745', // Green
+                '#ffc107', // Yellow
+                '#dc3545'  // Red
+            ],
+            borderWidth: 1
+        }]
+    },
+    options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: false // Hide the legend for a single dataset
+            },
+            title: {
+                display: true,
+                text: 'Salesperson Performance',
+                font: {
+                    size: 16
+                }
+            }
+        },
+        scales: {
+            x: {
+                title: {
+                    display: true,
+                    text: 'Salesperson Name'
+                },
+                ticks: {
+                    color: '#495057' // Dark text for x-axis labels
+                }
+            },
+            y: {
+                beginAtZero: true,
+                title: {
+                    display: true,
+                    text: 'Number of Cars Sold'
+                },
+                ticks: {
+                    color: '#495057' // Dark text for y-axis labels
+                }
+            }
+        }
+    }
+});
+
+
+// Get the canvas context for the chart
+const ctx_leadSources = document.getElementById('leadSourcesChart').getContext('2d');
+
+// Chart.js configuration for the Top 5 Lead Sources Bar Chart
+new Chart(ctx_leadSources, {
+    type: 'bar',
+    data: {
+        labels: ['Showroom', 'Referrals', 'WhatsApp', 'Facebook', 'TikTok'], // Labels from the provided list
+        datasets: [{
+            label: 'Number of Leads',
+            data: [45, 35, 25, 20, 15], // Sample data for leads from each source
+            backgroundColor: 'rgba(54, 162, 235, 0.8)', // A consistent blue color for the bars
+            borderColor: 'rgba(54, 162, 235, 1)',
+            borderWidth: 1
+        }]
+    },
+    options: {
+        indexAxis: 'y', // Makes it a horizontal bar chart
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: false
+            },
+            title: {
+                display: true,
+                text: 'Top 5 Lead Sources',
+                font: {
+                    size: 16
+                }
+            }
+        },
+        scales: {
+            x: {
+                beginAtZero: true,
+                title: {
+                    display: true,
+                    text: 'Number of Leads',
+                    color: '#495057'
+                },
+                ticks: {
+                    color: '#495057'
+                }
+            },
+            y: {
+                ticks: {
+                    color: '#495057',
+                    font: {
+                        size: 8 // Decreases the font size to fit more text
+                    }
+                }
+            }
+        }
+    }
+});
+// Get the canvas context for the chart
+const ctx_appointments = document.getElementById('appointmentsChart').getContext('2d');
+
+// Chart.js configuration for the Appointments by Weekday Bar Chart
+new Chart(ctx_appointments, {
+    type: 'bar',
+    data: {
+        labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+        datasets: [{
+            label: 'Number of Appointments',
+            data: [10, 15, 20, 18, 25, 30, 12], // Sample data for appointments per day
+            backgroundColor: 'rgba(75, 192, 192, 0.8)', // A consistent color for the bars
+            borderColor: 'rgba(75, 192, 192, 1)',
+            borderWidth: 1
+        }]
+    },
+    options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: false
+            },
+            title: {
+                display: true,
+                text: 'Appointments by Weekday',
+                font: {
+                    size: 16
+                }
+            }
+        },
+        scales: {
+            x: {
+                title: {
+                    display: true,
+                    text: 'Day of the Week',
+                    color: '#495057'
+                },
+                ticks: {
+                    color: '#495057'
+                }
+            },
+            y: {
+                beginAtZero: true,
+                title: {
+                    display: true,
+                    text: 'Number of Appointments',
+                    color: '#495057'
+                },
+                ticks: {
+                    color: '#495057'
+                }
+            }
+        }
+    }
+});
+
+
+// Get the canvas context for the funnel chart
+const ctx_funnel = document.getElementById('leadFunnelChart').getContext('2d');
+
+// Sample data for the funnel stages
+const funnelData = {
+    labels: ['Initial Contact', 'Qualified Leads', 'Test Drives', 'Negotiation', 'Closed Deals'],
+    data: [250, 180, 120, 80, 45], // Example lead counts at each stage
+};
+
+new Chart(ctx_funnel, {
+    type: 'bar',
+    data: {
+        labels: funnelData.labels,
+        datasets: [{
+            label: 'Number of Leads',
+            data: funnelData.data,
+            backgroundColor: [
+                'rgba(0, 123, 255, 0.8)',
+                'rgba(0, 123, 255, 0.7)',
+                'rgba(0, 123, 255, 0.6)',
+                'rgba(0, 123, 255, 0.5)',
+                'rgba(0, 123, 255, 0.4)'
+            ],
+            borderColor: 'rgba(0, 123, 255, 1)',
+            borderWidth: 1
+        }]
+    },
+    options: {
+        indexAxis: 'y', // Makes it a horizontal bar chart
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: false
+            },
+            title: {
+                display: true,
+                text: 'Lead Conversion Funnel',
+                font: {
+                    size: 16
+                }
+            },
+            tooltip: {
+                callbacks: {
+                    label: function(context) {
+                        const totalLeads = funnelData.data[0];
+                        const currentLeads = context.parsed.x;
+                        const percentage = ((currentLeads / totalLeads) * 100).toFixed(1);
+                        return `Leads: ${currentLeads} (${percentage}%)`;
+                    }
+                }
+            }
+        },
+        scales: {
+            x: {
+                beginAtZero: true,
+                display: false // Hide the x-axis to make it look like a funnel
+            },
+            y: {
+                ticks: {
+                    color: '#495057'
+                }
+            }
+        }
+    }
+});
+
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/dealers/assign_car_makes.html b/templates/dealers/assign_car_makes.html
index 74ac619c..84dc2893 100644
--- a/templates/dealers/assign_car_makes.html
+++ b/templates/dealers/assign_car_makes.html
@@ -33,7 +33,7 @@
             height: 0;
         }
         .car-make-option input[type="checkbox"]:checked + .car-make-image-container .car-make-image {
-            border: 2px solid #2c7be5;
+            border: 3px solid rgb(44, 229, 44);
             box-shadow: 0 0 10px rgba(44, 123, 229, 0.5);
             background: #f0f7ff;
         }
diff --git a/templates/dealers/dealer_detail.html b/templates/dealers/dealer_detail.html
index e7c504ba..8c30f461 100644
--- a/templates/dealers/dealer_detail.html
+++ b/templates/dealers/dealer_detail.html
@@ -1,239 +1,66 @@
 {% 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-clipboard-list me-2"></span>{{ _("Plans History") }}</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>
+    {% trans 'Profile' %}
+{% endblock %}
+
+{% block content %}
+<div class="container-fluid mb-3">
+    <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="dropdown">
+                <button class="btn btn-phoenix-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                    <span class="fas fa-cog me-2"></span>{{ _("Manage Profile") }}
+                </button>
+                <ul class="dropdown-menu dropdown-menu-end">
+                    <li><a class="dropdown-item" href="{% url 'dealer_update' dealer.slug %}"><span class="fas fa-edit me-2"></span>{{ _("Edit Profile") }}</a></li>
+                    <li><a class="dropdown-item" href="{% url 'billing_info' %}"><span class="fas fa-credit-card me-2"></span>{{ _("Billing Information") }}</a></li>
+                    <li><a class="dropdown-item" href="{% url 'order_list' %}"><span class="fas fa-clipboard-list me-2"></span>{{ _("Plans History") }}</a></li>
+                    <li><hr class="dropdown-divider"></li>
+                    <li><a class="dropdown-item text-danger" href="{% url 'account_change_password' %}"><span class="fas fa-key me-2"></span>{{ _("Change Password") }}</a></li>
+                </ul>
             </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" />
-                                            {% 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 %}<li class="fas fa-sign-in-alt ms-1"></li></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 class="row g-3 mb-4">
+        <div class="col-12">
+            <div class="card shadow-sm h-100">
+                <div class="card-body">
+                    <div class="d-flex flex-column flex-sm-row align-items-sm-center g-3 g-sm-5 text-center text-sm-start">
+                        <div class="col-12 col-sm-auto mb-3 mb-sm-0">
+                            <input class="d-none" id="avatarFile" type="file" />
+                            <label class="cursor-pointer avatar avatar-5xl border rounded-circle shadow-sm" for="avatarFile">
+                                {% if dealer.logo %}
+                                    <img src="{{ dealer.logo.url }}" alt="{{ dealer.get_local_name }}" class="rounded-circle" style="max-width: 150px" />
+                                {% else %}
+                                    <img src="{% static 'images/logos/logo.png' %}" alt="{{ dealer.get_local_name }}" class="rounded-circle" style="max-width: 150px" />
+                                {% endif %}
+                            </label>
                         </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 'Contact Information' %}</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' %}<li class="fas fa-location-dot ms-1"></li></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' %}<li class="fas fa-envelope ms-1"></li></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' %}<li class="fas fa-phone ms-1"></li></h5>
-                                    </div>
-                                    <div class="col-auto" dir="ltr">{{ dealer.phone_number }}</div>
-                                </div>
-                            </div>
+                        
+                        <div class="flex-1 col-12 col-sm ms-2">
+                            <h3>{{ dealer.get_local_name }}</h3>
+                            <p class="text-body-secondary mb-1">{% trans 'Joined' %} {{ dealer.joined_at|timesince }} {% trans 'ago' %}</p>
+                            <span class="badge bg-primary-subtle text-primary">{% trans 'Last login' %}: {{ dealer.user.last_login|date:"D M d, Y H:i" }}</span>
                         </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>
-                                        </div>
-                                    </div>
+                        
+                        <div class="col-12 col-sm-auto d-flex align-items-center justify-content-around flex-wrap mt-3 mt-sm-0">
+                            <div class="text-center mx-3 mb-2 mb-sm-0">
+                                <h6 class="mb-2 text-body-secondary">{% trans 'Total users'|capfirst %}</h6>
+                                <h4 class="fs-7 text-body-highlight mb-2">{{ dealer.staff_count }} / {{ allowed_users }}</h4>
+                                <div class="progress" style="height: 5px; width: 100px;">
+                                    <div class="progress-bar bg-success" role="progressbar" style="width: {{ dealer.staff_count|get_percentage:allowed_users }}%;" aria-valuenow="{{ dealer.staff_count|get_percentage:allowed_users }}" aria-valuemin="0" aria-valuemax="100"></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">{{ _("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 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"><i class="fa-solid fa-pen-to-square me-1"></i>{% trans 'Update' %}</button>
-                                        </form>
-                                    </div>
+                            <div class="text-center mx-3 mb-2 mb-sm-0">
+                                <h6 class="mb-2 text-body-secondary">{% trans 'Total cars'|capfirst %}</h6>
+                                <h4 class="fs-7 text-body-highlight mb-2">{{ cars_count }} / {{ allowed_cars }}</h4>
+                                <div class="progress" style="height: 5px; width: 100px;">
+                                    <div class="progress-bar bg-info" role="progressbar" style="width: {{ cars_count|get_percentage:allowed_cars }}%;" aria-valuenow="{{ cars_count|get_percentage:allowed_cars }}" aria-valuemin="0" aria-valuemax="100"></div>
                                 </div>
                             </div>
                         </div>
@@ -241,4 +68,179 @@
                 </div>
             </div>
         </div>
-    {% endblock %}
+    </div>
+
+    <div class="row g-3">
+        <div class="col-12">
+            <div class="card shadow-sm">
+                <div class="card-body">
+                    <ul class="nav nav-tabs nav-justified" id="profileTabs" role="tablist">
+                        <li class="nav-item" role="presentation">
+                            <button class="nav-link active" id="subscription-tab" data-bs-toggle="tab" data-bs-target="#subscription-pane" type="button" role="tab" aria-controls="subscription-pane" aria-selected="true"><span class="fas fa-star me-2"></span>{{ _("Plan & Subscription") }}</button>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                            <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-pane" type="button" role="tab" aria-controls="contact-pane" aria-selected="false"><span class="fas fa-info-circle me-2"></span>{{ _("Company Details") }}</button>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                            <button class="nav-link" id="makes-tab" data-bs-toggle="tab" data-bs-target="#makes-pane" type="button" role="tab" aria-controls="makes-pane" aria-selected="false"><span class="fas fa-car me-2"></span>{{ _("Car Brands") }}</button>
+                        </li>
+                    </ul>
+                    <div class="tab-content pt-4" id="profileTabsContent">
+                        <div class="tab-pane fade show active" id="subscription-pane" role="tabpanel" aria-labelledby="subscription-tab">
+                            <div class="row g-3">
+                                <div class="col-12 col-lg-6">
+                                    <div class="card  h-100 shadow-sm">
+                                        <div class="card-body">
+                                            <div class="d-flex align-items-center justify-content-between mb-3">
+                                                <h3 class="mb-0">{{ dealer.user.userplan.plan|capfirst }}</h3>
+                                                {% if dealer.user.userplan and not dealer.user.userplan.is_expired %}
+                                                    <span class="badge bg-success-subtle text-success">{{ _("Active") }}</span>
+                                                {% elif dealer.user.userplan and dealer.user.userplan.is_expired %}
+                                                    <span class="badge bg-danger-subtle text-danger">{{ _("Expired") }}</span>
+                                                {% else %}
+                                                    <span class="badge bg-warning-subtle text-warning">{{ _("No Active Plan") }}</span>
+                                                {% endif %}
+                                            </div>
+                                            <p class="fs-9 text-body-secondary">
+                                                {% if dealer.user.userplan and not dealer.user.userplan.is_expired %}
+                                                    {% trans 'Active until' %}: {{ dealer.user.userplan.expire }} &nbsp; <small>{% trans 'Days left' %}: {{ dealer.user.userplan.days_left }}</small>
+                                                {% else %}
+                                                    {% trans 'Please subscribe or renew your plan to continue using our services.' %}
+                                                {% endif %}
+                                            </p>
+                                            
+                                            <div class="d-flex align-items-end mb-3">
+                                                <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>
+                                            
+                                            <ul class="list-unstyled mb-4">
+                                                {% for line in dealer.user.userplan.plan.description|splitlines %}
+                                                <li class="d-flex align-items-center mb-1">
+                                                    <span class="uil uil-check-circle text-success me-2"></span>
+                                                    <span class="text-body-secondary">{{ line }}</span>
+                                                </li>
+                                                {% endfor %}
+                                            </ul>
+                                            
+                                            <div class="d-flex justify-content-end gap-2">
+                                                {% if dealer.user.userplan.is_expired %}
+                                                    <a href="{% url 'pricing_page' request.dealer.slug %}" class="btn btn-warning"><span class="fas fa-redo-alt me-2"></span>{{ _("Renew") }}</a>
+                                                {% endif %}
+                                                {% if dealer.user.userplan.plan.name != "Enterprise" %}
+                                                    <a href="{% url 'pricing_page' request.dealer.slug %}" class="btn btn-primary"><span class="fas fa-rocket me-2"></span>{{ _("Upgrade Plan") }}</a>
+                                                {% endif %}
+                                                {% if not dealer.user.userplan %}
+                                                     <a href="{% url 'pricing_page' request.dealer.slug %}" class="btn btn-success"><span class="fas fa-cart-plus me-2"></span>{{ _("Subscribe Now") }}</a>
+                                                {% endif %}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-12 col-lg-6">
+                                    <div class="card h-100 shadow-sm">
+                                        <div class="card-body d-flex flex-column justify-content-center">
+                                            <div class="d-flex justify-content-between mb-4">
+                                                <h5 class="mb-0 text-body-highlight">{{ _("Manage Users & Cars") }}</h5>
+                                            </div>
+                                            <div class="mb-4">
+                                                <h6 class="text-body-secondary">{{ _("Total users") }}</h6>
+                                                <div class="progress" style="height: 10px;">
+                                                    <div class="progress-bar bg-success" role="progressbar" style="width: {{ dealer.staff_count|get_percentage:allowed_users }}%;" aria-valuenow="{{ dealer.staff_count|get_percentage:allowed_users }}" aria-valuemin="0" aria-valuemax="100"></div>
+                                                </div>
+                                                <div class="d-flex justify-content-between text-body-secondary fs-9 mt-2">
+                                                    <span>{{ _("Used") }}: {{ dealer.staff_count }}</span>
+                                                    <span>{{ _("Limit") }}: {{ allowed_users }}</span>
+                                                </div>
+                                            </div>
+                                            <div class="mb-4">
+                                                <h6 class="text-body-secondary">{{ _("Total cars") }}</h6>
+                                                <div class="progress" style="height: 10px;">
+                                                    <div class="progress-bar bg-info" role="progressbar" style="width: {{ cars_count|get_percentage:allowed_cars }}%;" aria-valuenow="{{ cars_count|get_percentage:allowed_cars }}" aria-valuemin="0" aria-valuemax="100"></div>
+                                                </div>
+                                                <div class="d-flex justify-content-between text-body-secondary fs-9 mt-2">
+                                                    <span>{{ _("Used") }}: {{ cars_count }}</span>
+                                                    <span>{{ _("Limit") }}: {{ allowed_cars }}</span>
+                                                </div>
+                                            </div>
+                                            <small class="text-body-secondary mt-auto">{{ _("Contact support to increase your limits") }}</small>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="tab-pane fade" id="contact-pane" role="tabpanel" aria-labelledby="contact-tab">
+                            <div class="row g-3">
+                                <div class="col-12 col-lg-6">
+                                    <div class="card h-100 shadow-sm">
+                                        <div class="card-body">
+                                            <h5 class="mb-3">{% trans 'Contact Information' %}</h5>
+                                            <div class="d-flex align-items-center mb-3">
+                                                <span class="fas fa-location-dot me-3 text-primary"></span>
+                                                <div>
+                                                    <h6 class="mb-0">{% trans 'Address' %}</h6>
+                                                    <p class="mb-0 text-body-secondary">{{ dealer.address }}</p>
+                                                </div>
+                                            </div>
+                                            <div class="d-flex align-items-center mb-3">
+                                                <span class="fas fa-envelope me-3 text-info"></span>
+                                                <div>
+                                                    <h6 class="mb-0">{% trans 'Email' %}</h6>
+                                                    <p class="mb-0 text-body-secondary">{{ dealer.user.email }}</p>
+                                                </div>
+                                            </div>
+                                            <div class="d-flex align-items-center">
+                                                <span class="fas fa-phone me-3 text-success"></span>
+                                                <div>
+                                                    <h6 class="mb-0">{% trans 'Phone' %}</h6>
+                                                    <p class="mb-0 text-body-secondary" dir="ltr">{{ dealer.phone_number }}</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-12 col-lg-6">
+                                    <div class="card h-100 shadow-sm">
+                                        <div class="card-body">
+                                            <h5 class="mb-3">{{ _("VAT Information") }}</h5>
+                                            <form action="{% url 'dealer_vat_rate_update' request.dealer.slug %}" method="post">
+                                                {% csrf_token %}
+                                                {{ vatform|crispy }}
+                                                <button class="btn btn-phoenix-primary mt-3" type="submit"><i class="fa-solid fa-pen-to-square me-1"></i>{% trans 'Update VAT' %}</button>
+                                            </form>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="tab-pane fade" id="makes-pane" role="tabpanel" aria-labelledby="makes-tab">
+                            <div class="card h-100 shadow-sm">
+                                <div class="card-body">
+                                    <h5 class="mb-4">{{ _("Makes you are selling") }}</h5>
+                                    <div class="d-flex flex-wrap gap-3 mb-4">
+                                        {% for make in car_makes %}
+                                            <div class="text-center p-2 border rounded-3">
+                                                {% if make.logo %}
+                                                    <img src="{{ make.logo.url }}" alt="{{ make.get_local_name }}" class="rounded" style="height: 48px; width: auto; background-color:white;" />
+                                                {% endif %}
+                                                <p class="fs-8 text-body-secondary mt-1 mb-0">{{ make.get_local_name }}</p>
+                                            </div>
+                                        {% empty %}
+                                            <p class="text-body-secondary">{{ _("No car makes selected.") }}</p>
+                                        {% endfor %}
+                                    </div>
+                                    <a class="btn btn-phoenix-warning" href="{% url 'assign_car_makes' request.dealer.slug %}"><span class="fas fa-plus me-2"></span>{{ _("Select Makes") }}</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/empty-illustration-page.html b/templates/empty-illustration-page.html
index 31d704ac..ab301dcb 100644
--- a/templates/empty-illustration-page.html
+++ b/templates/empty-illustration-page.html
@@ -46,8 +46,9 @@
        {% else %}
             {% static 'images/no_content/no_item.jpg' as final_image_path %}
        {% endif %}
-
+       <p class="sm">
        <img src="{{ final_image_path }}" alt="No-empty-state-image" class="empty-state-image">
+       <p>
 
     <!-- Title -->
      <h3 class="empty-state-title">
diff --git a/templates/header.html b/templates/header.html
index 89219412..cec75ee8 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -46,15 +46,15 @@
                     </li>
                     {% endif %}
 
-                    {% if perms.inventory.add_car %}
-                        {% comment %} <li class="nav-item">
+                    {% comment %} {% if perms.inventory.add_car %}
+                        <li class="nav-item">
                             <a class="nav-link" href="{% url 'upload_cars' request.dealer.slug %}">
                                 <div class="d-flex align-items-center">
                                 <span class="nav-link-icon"><span class="fas fa-file-import"></span></span><span class="nav-link-text">{% trans "Bulk Upload"|capfirst %}</span>
                                 </div>
                             </a>
-                        </li> {% endcomment %}
-                    {% endif %}
+                        </li>
+                    {% endif %} {% endcomment %}
                 {% if perms.django_ledger.view_purchaseordermodel %}
                     <li class="nav-item">
                         <a class="nav-link" href="{% url 'purchase_order_list' request.dealer.slug request.dealer.entity.slug %}">
@@ -294,6 +294,8 @@
             </div>
             </div>
             {% endif %}
+            <!---->
+            
             {% if perms.django_ledger.can_view_reports %}
               <div class="nav-item-wrapper">
                 <a class="nav-link dropdown-indicator label-1" href="#nv-reports" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="nv-reports">
@@ -302,80 +304,70 @@
                     <span class="nav-link-icon"><i class="fa-solid fa-book-open"></i></span><span class="nav-link-text">{% trans 'Reports' %}</span>
                   </div>
                 </a>
-
-                {% if perms.django_ledger.view_accountmodel %}
-                  <div class="parent-wrapper label-1">
-                    <ul class="nav collapse parent" data-bs-parent="#navbarVerticalCollapse" id="nv-reports">
+                
+                <div class="parent-wrapper label-1">
+                  <ul class="nav collapse parent" data-bs-parent="#navbarVerticalCollapse" id="nv-reports">
+                    <li class="collapsed-nav-item-title d-none">{% trans 'Financials' %}</li>
+                    {% if perms.django_ledger.view_accountmodel %}
                       <li class="nav-item">
-                        {% comment %} {% if request.user.is_authenticated and request.is_dealer %}
-                          <a class="nav-link" href="{% url 'entity-dashboard' request.dealer.entity.slug %}">
-                        {% elif request.user.is_authenticated and request.is_staff %}
-                          <a class="nav-link" href="{% url 'entity-dashboard' request.user.staffmember.staff.dealer.entity.slug %}">
-                        {% else %}
-                          <a class="nav-link" href="#">
-                        {% endif %} {% endcomment %}
-                        <div class="d-flex align-items-center">
-                          {% comment %} <i class="fa-solid fa-chart-line"></i><span class="nav-link-text">{% trans 'Dashboard'|capfirst %}</span> {% endcomment %}
-                        </div>
-                      </a>
-                      {% if request.user.is_authenticated %}
-                        <a class="nav-link" href="{% url 'entity-cf' request.dealer.slug request.dealer.entity.slug %}">
-                      {% else %}
-                        <a class="nav-link" href="#">
-                      {% endif %}
-                      <div class="d-flex align-items-center">
-                        <i class="fa-solid fa-sack-dollar"></i><span class="nav-link-text">{% trans 'Cash Flow'|capfirst %}</span>
-                      </div>
-                    </a>
-                    {% if request.user.is_authenticated %}
-                      <a class="nav-link" href="{% url 'entity-ic' request.dealer.slug request.dealer.entity.slug %}">
-                    {% else %}
-                      <a class="nav-link" href="#">
+                          
+                          <a class="nav-link" href="{% url 'entity-cf' request.dealer.slug request.dealer.entity.slug %}">
+                            <div class="d-flex align-items-center">
+                              <span class="nav-link-icon"><span class="fas fa-solid fa-sack-dollar"></span></span><span class="nav-link-text">{% trans 'Cash Flow'|capfirst %}</span>
+                            </div>
+                          </a>
+                         
+                         
+                      </li>
+                   
+                      <li class="nav-item">
+                             <a class="nav-link" href="{% url 'entity-ic' request.dealer.slug request.dealer.entity.slug %}">
+                               <div class="d-flex align-items-center">
+                                <span class="nav-link-icon"><span class="fa-solid fa-sheet-plastic"></span></span><span class="nav-link-text">{% trans 'Income Statement'|capfirst %}</span>
+                                </div>
+                           </a>    
+                      </li>
+                    
+
+                   
+                      <li class="nav-item">
+                           <a class="nav-link" href="{% url 'entity-bs' request.dealer.slug request.dealer.entity.slug %}">
+                              <div class="d-flex align-items-center">
+                               <span class="nav-link-icon"><span class="fas fa-solid fa-scale-balanced"></span></span><span class="nav-link-text">{% trans 'Balance Sheet'|capfirst %}</span>
+                              </div>
+                           </a> 
+                      </li>
+                   
+                    <li class="nav-item">
+                           <!--car purchase report-->
+                            <a class="nav-link" href="{% url 'po-report' request.dealer.slug  %}">
+                              <div class="d-flex align-items-center">
+                                  <span class="nav-link-icon"><span class="fas fa-chart-pie"></span></span><span class="nav-link-text">{% trans 'Car purchase Report'|capfirst %}</span>
+                              </div>
+                          </a>
+                    </li>
+                   
+                      <li class="nav-item">
+                          <!--car sale report-->
+                              <a class="nav-link" href="{% url 'car-sale-report' request.dealer.slug  %}">
+                                <div class="d-flex align-items-center">
+                                   <span class="nav-link-icon"><span class="fas fa-chart-pie"></span></span><span class="nav-link-text">{% trans 'Car Sale Report'|capfirst %}</span>
+                                </div>
+                              </a>
+                      </li>
                     {% endif %}
-                    <div class="d-flex align-items-center">
-                      <i class="fa-solid fa-sheet-plastic"></i><span class="nav-link-text">{% trans 'Income Statement'|capfirst %}</span>
-                    </div>
-                  </a>
-                  {% if request.user.is_authenticated %}
-                    <a class="nav-link" href="{% url 'entity-bs' request.dealer.slug request.dealer.entity.slug %}">
-                  {% else %}
-                    <a class="nav-link" href="#">
-                  {% endif %}
-                  <div class="d-flex align-items-center">
-                    <i class="fa-solid fa-scale-balanced"></i><span class="nav-link-text">{% trans 'Balance Sheet'|capfirst %}</span>
-                  </div>
-                  </a>
-                    <!--car purchase report-->
-                   {% if request.user.is_authenticated %}
-                    <a class="nav-link" href="{% url 'po-report' request.dealer.slug  %}">
-                  {% else %}
-                    <a class="nav-link" href="#">
-                  {% endif %}
-                  <div class="d-flex align-items-center">
-                    <i class="fas fa-chart-pie"></i><span class="nav-link-text">{% trans 'Car purchase Report'|capfirst %}</span>
-                  </div>
-                  </a>
-
-                  <!--car sale report-->
-                   {% if request.user.is_authenticated %}
-                    <a class="nav-link" href="{% url 'car-sale-report' request.dealer.slug  %}">
-                  {% else %}
-                    <a class="nav-link" href="#">
-                  {% endif %}
-                  <div class="d-flex align-items-center">
-                    <i class="fas fa-chart-pie"></i><span class="nav-link-text">{% trans 'Car Sale Report'|capfirst %}</span>
-                  </div>
-                     </a>
-
-                  </li>
-                  </ul>
-                  </div>
-                {% endif %}
+                    
+                   
+                </ul>
             </div>
+            </div>
+           {% endif %}
+            <!---->
+           
         </li>
     </ul>
     {# --- Support & Contact Section (New) --- #}
-       <div class="mt-auto bg-info-subtle">
+       <div class="mt-auto">
 
             <ul class="navbar-nav flex-column">
               <li class="nav-item">
@@ -408,15 +400,16 @@
 
     {% endif %}
 
-</div>
+    </div>
   </div>
-  {% endif %}
+
   <div class="navbar-vertical-footer">
     <button class="btn navbar-vertical-toggle border-0 fw-semibold w-100 white-space-nowrap d-flex align-items-center">
       <span class="fas fa-angle-double-left fs-8"></span><span class="fas fa-angle-double-right fs-8"></span><span class="navbar-vertical-footer-text ms-2">Collapsed View</span>
     </button>
   </div>
-  </nav>
+
+</nav>
 
 
 <nav class="navbar navbar-top fixed-top navbar-expand" id="navbarDefault">
@@ -492,40 +485,45 @@
                   {% if request.is_dealer %}
                     <h6 class="mt-2 text-body-emphasis">{{ user.dealer.get_local_name }}</h6>
                   {% else %}
-                    <h6 class="mt-2 text-body-emphasis">{{ user.staff.get_local_name }}</h6>
+                    <h6 class="mt-2 text-body-emphasis">{{ user.staffmember.staff.get_local_name }}</h6>
                   {% endif %}
                 </div>
               </div>
               <div class="overflow-auto scrollbar" style="height: 10rem;">
                 <ul class="nav d-flex flex-column mb-2 pb-1">
-                    {% if not request.dealer %}
-                    <li class="nav-item">
-                        <a hx-boost="false" class="nav-link px-3 d-block" href="{% url 'staff_detail' request.dealer.slug request.staff.slug %}"> <span class="me-2 text-body align-bottom" data-feather="user"></span><span>{% translate 'profile'|capfirst %}</span></a>
-                    </li>
-                    {% else %}
+                  {% if request.is_dealer %}
                     <li class="nav-item">
                       <a class="nav-link px-3 d-block" href="{% url 'dealer_detail' request.dealer.slug %}"> <span class="me-2 text-body align-bottom" data-feather="user"></span><span>{% translate 'profile'|capfirst %}</span></a>
                     </li>
-
+                  {% else %}
+                    <li class="nav-item">
+                      <a hx-boost="false" class="nav-link px-3 d-block" href="{% url 'staff_detail' request.dealer.slug request.staff.slug %}"> <span class="me-2 text-body align-bottom" data-feather="user"></span><span>{% translate 'profile'|capfirst %}</span></a>
+                    </li>
+                  {% endif %}
+                  {% if request.is_dealer %}
                     <li class="nav-item">
                       <a class="nav-link px-3 d-block" href="{% url 'user_list' request.dealer.slug %}"><span class="me-2 text-body align-bottom" data-feather="users"></span>{{ _("Staff & Groups") }}</a>
                     </li>
                     <li class="nav-item">
                       <a class="nav-link px-3 d-block" href="{% url 'dealer_activity'  request.dealer.slug %}"> <span class="me-2 text-body align-bottom" data-feather="lock"></span>{{ _("Activities") }}</a>
                     </li>
-                  <li class="nav-item">
-                      <a class="nav-link px-3 d-block" href="{% url 'dealer_settings' request.dealer.slug %}"> <span class="me-2 text-body align-bottom" data-feather="settings"></span>{{ _("Settings") }}</a>
-                  </li>
-                  <li class="nav-item">
-                      <a class="nav-link px-3 d-block" href="{% url 'management'  request.dealer.slug %}"> <span class="me-2 text-body align-bottom" data-feather="shield"></span>{{ _("Admin Managemnet") }}</a>
-                  </li>
-                  <li class="nav-item">
-                    <a class="nav-link px-3 d-block" href="{% url 'help_center' %}"> <span class="me-2 text-body align-bottom" data-feather="help-circle"></span>{{ _("Help Center") }}</a>
-                  </li>
                   {% endif %}
+                  <li class="nav-item">
+                    {% if request.is_dealer %}
+                      <a class="nav-link px-3 d-block" href="{% url 'dealer_settings' request.dealer.slug %}"> <span class="me-2 text-body align-bottom" data-feather="settings"></span>{{ _("Settings") }}</a>
+                    {% endif %}
+                  </li>
+                  <li class="nav-item">
+                    {% if request.is_dealer %}
+                      <a class="nav-link px-3 d-block" href="{% url 'management'  request.dealer.slug %}"> <span class="me-2 text-body align-bottom" data-feather="shield"></span>{{ _("Admin Managemnet") }}</a>
+                    {% endif %}
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link px-3 d-block" href="#"> <span class="me-2 text-body align-bottom" data-feather="help-circle"></span>{{ _("Help Center") }}</a>
+                  </li>
                   {% if request.is_staff %}
                     <li class="nav-item">
-                      <a hx-boost="false" class="nav-link px-3 d-block" href="{% url 'schedule_calendar' request.dealer.slug %}"> <span class="me-2 text-body align-bottom" data-feather="calendar"></span>{{ _("My Calendar") }}</a>
+                      <a hx-boost="false" class="nav-link px-3 d-block" href="{% url 'schedule_calendar' request.dealer.slug%}"> <span class="me-2 text-body align-bottom" data-feather="calendar"></span>{{ _("My Calendar") }}</a>
                     </li>
                     {% endif %}
                 <!--<li class="nav-item"><a class="nav-link px-3 d-block" href=""> Language</a></li>-->
@@ -537,7 +535,7 @@
                   <a class="nav-link px-3 d-block" href=""> <span class="me-2 text-body align-bottom" data-feather="user-plus"></span>Add another account</a>
                 </li>-->
                 </ul>
-                <hr />
+              </hr>
                 <div class="px-3">
                   <a class="btn btn-sm btn-phoenix-danger d-flex flex-center w-100" href="{% url 'account_logout' %}"> <span class="me-2" data-feather="log-out"> </span>{% trans 'Sign Out' %}</a>
                 </div>
diff --git a/templates/message-illustration.html b/templates/message-illustration.html
index edc13595..f7a025a5 100644
--- a/templates/message-illustration.html
+++ b/templates/message-illustration.html
@@ -39,8 +39,9 @@
 </style>
 
 <div class="empty-state-container alert mb-2"  role="alert">
-
+     <div class="sm">
     <img src="{% static 'images/no_content/no_item.jpg' %}" alt="message-image" class="empty-state-image mb-2">
+     </div>
     <!-- Title -->
     <h3 class="empty-state-title mb-2">
          {% blocktrans %}{{ value1}}{% endblocktrans %}
diff --git a/templates/staff/staff_detail.html b/templates/staff/staff_detail.html
index 85549624..cc6c56bd 100644
--- a/templates/staff/staff_detail.html
+++ b/templates/staff/staff_detail.html
@@ -2,108 +2,124 @@
 {% 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 'staff_password_reset' request.dealer.slug staff.pk %}"
-                               class="btn btn-phoenix-danger"><span class="fas fa-key me-2"></span>{{ _("Change Password") }}</a>
+{% block content %}
+    <div class="container-fluid py-4">
+        <div class="row align-items-center justify-content-between g-3 mb-5">
+            <div class="col-auto">
+                <h1 class="display-5 fw-bolder mb-0">{% trans 'User Profile' %}</h1>
+            </div>
+            <div class="col-auto">
+                <a href="{% url 'staff_password_reset' request.dealer.slug staff.pk %}"
+                   class="btn btn-phoenix-primary btn-lg shadow-sm">
+                    <i class="fas fa-key me-2"></i>{{ _("Change Password") }}
+                </a>
+            </div>
+        </div>
+
+        <div class="row g-4">
+            <div class="col-12 col-xl-4">
+                <div class="card h-100 shadow-sm border-0">
+                    <div class="card-body text-center p-5">
+                        <div class="avatar avatar-10xl mb-4 position-relative">
+                            {% if staff.logo %}
+                                <img src="{{ staff.logo.url }}"
+                                     alt="{{ staff.get_local_name }}"
+                                     class="rounded-circle img-fluid border border-5 border-body-tertiary"
+                                     style="object-fit: cover; width: 160px; height: 160px;"/>
+                            {% else %}
+                                <span class="rounded-circle d-inline-flex align-items-center justify-content-center bg-primary text-white"
+                                      style="width: 160px; height: 160px; font-size: 4rem;">
+                                    {{ staff.get_local_name|first|upper }}
+                                </span>
+                            {% endif %}
+                            {% comment %} <input class="d-none" id="avatarFile" type="file"/>
+                            <label class="btn btn-primary btn-sm position-absolute bottom-0 end-0 rounded-circle"
+                                   for="avatarFile" data-bs-toggle="tooltip" title="{% trans 'Change Profile picture' %}">
+                                <i class="fas fa-camera"></i>
+                            </label> {% endcomment %}
                         </div>
+                        <h2 class="h3 mb-1 fw-bold">{{ staff.get_local_name }}</h2>
+                        <p class="text-body-secondary mt-3 mb-0">
+                            <i class="fas fa-clock me-1"></i>{% trans 'Joined' %} {{ staff.created|timesince }} {% trans 'ago' %}
+                        </p>
                     </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 staff.logo %}
-                                                <img src="{{ staff.logo.url }}"
-                                                     alt="{{ staff.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="{{ staff.get_local_name }}"
-                                                     class=""
-                                                     style="max-width: 150px" />
-                                            {% endif %}
-                                        </label>
+
+            <div class="col-12 col-xl-8">
+                <div class="card h-100 shadow-sm border-0">
+                    <div class="card-header bg-body-tertiary border-bottom-0 py-4 px-5">
+                        <h4 class="mb-0">{% trans 'Personal Details' %}</h4>
+                    </div>
+                    <div class="card-body p-5">
+                        <div class="row g-4 mb-4">
+                            <div class="col-md-6">
+                                <div class="d-flex align-items-center">
+                                    <div class="icon-shape icon-md rounded-circle bg-primary-subtle text-primary me-3">
+                                        <i class="fas fa-envelope"></i>
                                     </div>
-                                    
-                                    <div class="col-12 col-sm-auto flex-1">
-                                        <h3>{{ staff.get_local_name }}</h3>
-                                        <p>
-                                        <li class="fas fa-user-shield me-1"></li>{% trans 'Role' %}:
-                                        {% for group in staff.groups%}
-                                        <span class="text-body-secondary me-2">&nbsp;{{group}}</span>
+                                    <div>
+                                        <h6 class="mb-0 text-body-secondary">{% trans 'Email Address' %}</h6>
+                                        <p class="mb-0">{{ staff.user.email }}</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="d-flex align-items-center">
+                                    <div class="icon-shape icon-md rounded-circle bg-success-subtle text-success me-3">
+                                        <i class="fas fa-phone"></i>
+                                    </div>
+                                    <div>
+                                        <h6 class="mb-0 text-body-secondary">{% trans 'Phone Number' %}</h6>
+                                        <p class="mb-0" dir="ltr">{{ staff.phone_number }}</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-12">
+                                <div class="d-flex align-items-start">
+                                    <div class="icon-shape icon-md rounded-circle bg-warning-subtle text-warning me-3">
+                                        <i class="fas fa-location-dot"></i>
+                                    </div>
+                                    <div>
+                                        <h6 class="mb-0 text-body-secondary">{% trans 'Address' %}</h6>
+                                        <p class="mb-0">{{ staff.address|default:"N/A" }}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <hr class="my-4">
+
+                        <div class="row g-4">
+                            <div class="col-md-6">
+                                <div class="d-flex align-items-center">
+                                    <div class="icon-shape icon-md rounded-circle bg-info-subtle text-info me-3">
+                                        <i class="fas fa-sign-in-alt"></i>
+                                    </div>
+                                    <div>
+                                        <h6 class="mb-0 text-body-secondary">{% trans 'Last Login' %}</h6>
+                                        <p class="mb-0">{{ staff.user.last_login|date:"D, M d, Y H:i" }}</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="d-flex align-items-center">
+                                    <div class="icon-shape icon-md rounded-circle bg-danger-subtle text-danger me-3">
+                                        <i class="fas fa-user-shield"></i>
+                                    </div>
+                                    <div>
+                                        <h6 class="mb-0 text-body-secondary">{% trans 'Role' %}</h6>
+                                        {% for group in staff.groups %}
+                                         <p class="mb-0 text-success fw-bold">{{group}}</p>
                                         {% endfor %}
-                                        </p>
-                                        <p class="text-body-secondary">{% trans 'Joined' %} {{ staff.created|timesince }} {% trans 'ago' %}</p>
                                         
                                     </div>
                                 </div>
-                                
-                            </div>
-                            <div class="d-flex flex-between-center pt-4">
-                                <div>
-                                    <h6 class="mb-2 text-body-secondary">{% trans 'last login'|capfirst %}<li class="fas fa-sign-in-alt ms-1"></li></h6>
-                                    <h4 class="fs-7 text-body-highlight mb-0">{{ staff.user.last_login|date:"D M d, Y H:i" }}</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 'Contact Information' %}</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' %}<li class="fas fa-location-dot ms-1"></li></h5>
-                                    </div>
-                                    <div class="col-auto">
-                                        <p class="text-body-secondary">{{ staff.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' %}<li class="fas fa-envelope ms-1"></li></h5>
-                                    </div>
-                                    <div class="col-auto">{{ staff.user.email }}</div>
-                                </div>
-                                <div class="row flex-between-center">
-                                    <div class="col-auto">
-                                        <h5 class="text-body-highlight mb-0">{% trans 'Phone' %}<li class="fas fa-phone ms-1"></li></h5>
-                                    </div>
-                                    <div class="col-auto" dir="ltr">{{ staff.phone_number }}</div>
-                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-            
         </div>
-    {% endblock %}
-
-
-   
\ No newline at end of file
+    </div>
+{% endblock %}
\ No newline at end of file