diff --git a/inventory/forms.py b/inventory/forms.py
index bf6640e8..ef79ae92 100644
--- a/inventory/forms.py
+++ b/inventory/forms.py
@@ -9,6 +9,7 @@ from phonenumber_field.phonenumber import PhoneNumber
 from .mixins import AddClassMixin
 from django.forms.models import inlineformset_factory
 from django_ledger.forms.invoice import InvoiceModelCreateForm as InvoiceModelCreateFormBase
+from django_ledger.forms.bill import BillModelCreateForm as BillModelCreateFormBase
 from .models import (
     Dealer,
     # Branch,
@@ -637,4 +638,13 @@ class InvoiceModelCreateForm(InvoiceModelCreateFormBase):
         self.fields['cash_account'].widget = forms.HiddenInput()
         self.fields['prepaid_account'].widget = forms.HiddenInput()
         self.fields['unearned_account'].widget = forms.HiddenInput()
-        self.fields['date_draft'] = forms.DateField(widget=DateInput(attrs={'type': 'date'}))
\ No newline at end of file
+        self.fields['date_draft'] = forms.DateField(widget=DateInput(attrs={'type': 'date'}))
+        
+class BillModelCreateForm(BillModelCreateFormBase):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        
+        self.fields['cash_account'].widget = forms.HiddenInput()
+        self.fields['prepaid_account'].widget = forms.HiddenInput()
+        self.fields['unearned_account'].widget = forms.HiddenInput()
+        self.fields['date_draft'] = forms.DateField(widget=DateInput(attrs={'type': 'date'}))
diff --git a/inventory/views.py b/inventory/views.py
index 99685af6..415ccae4 100644
--- a/inventory/views.py
+++ b/inventory/views.py
@@ -1,6 +1,7 @@
 from decimal import Decimal
 from django.core.paginator import Paginator
 from django.forms import DateField, DateInput, HiddenInput, TextInput
+from django_ledger.forms.bill import ApprovedBillModelUpdateForm, InReviewBillModelUpdateForm
 from django.utils.decorators import method_decorator
 from django.views.decorators.csrf import csrf_exempt
 from django_ledger.models import (
diff --git a/templates/ledger/bills/bill_detail.html b/templates/ledger/bills/bill_detail.html
index 07798133..d259c91e 100644
--- a/templates/ledger/bills/bill_detail.html
+++ b/templates/ledger/bills/bill_detail.html
@@ -1,122 +1,273 @@
-{% extends 'base.html' %}
+{% extends "base.html" %}
 {% load i18n %}
 
-{% block title %}
-  {{ page_title }}
-{% endblock %}
+{% block title %}{{ _("View Bill") }}{% endblock title %}
 
 {% block content %}
-  <!-- Delete Modal -->
-  <div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-sm">
-      <div class="modal-content rounded">
-        <div class="modal-body d-flex justify-content-center">
-          <h1 class="text-danger me-2"><i class="bi bi-exclamation-diamond-fill"></i></h1>
-          <span class="text-danger">{% trans 'Are you sure you want to delete this account?' %}</span>
-        </div>
-        <div class="btn-group">
-          <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">{% trans 'No' %}</button>
-          <div class="btn btn-sm btn-danger">
-            <form action="{% url 'account_delete' account.pk %}" method="post">
-              {% csrf_token %}
-              <button type="submit" class="btn btn-sm btn-danger">{% trans 'Yes' %}</button>
+<div class="modal fade" id="mark_as_approved_Modal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header bg-primary">
+        <h5 class="modal-title text-light" id="confirmModalLabel">{% trans 'Confirm' %}</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+          {% trans 'Are you sure' %}
+            <div class="modal-footer">
+              <button type="button"
+                      class="btn btn-sm btn-danger"
+                      data-bs-dismiss="modal">
+                  {% trans 'No' %}
+              </button>     
+              <form id="confirmForm" method="POST" action="{% url 'bill_mark_as_approved' bill.pk %}" class="d-inline">
+                {% csrf_token %}
+                <button type="submit" class="btn btn-success btn-sm">{% trans "Yes" %}</button>
+              </form>
+          </div>
+      </div>
+      </div>
+    </div>
+  </div>
+     <!-- ============================================-->      
+<div class="modal fade" id="mark_as_paid_Modal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header bg-primary">
+        <h5 class="modal-title text-light" id="confirmModalLabel">{% trans 'Confirm' %}</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+          {% trans 'Are you sure' %}
+            <div class="modal-footer">
+              <button type="button"
+                      class="btn btn-sm btn-danger"
+                      data-bs-dismiss="modal">
+                  {% trans 'No' %}
+              </button>     
+              <form id="confirmForm" method="POST" action="{% url 'bill_mark_as_paid' bill.pk %}" class="d-inline">
+                {% csrf_token %}
+                <button type="submit" class="btn btn-success btn-sm">{% trans "Yes" %}</button>
             </form>
           </div>
-        </div>
+      </div>
       </div>
     </div>
   </div>
-
-  <div class="row my-5">
-    <div class="card rounded">
-      <div class="card-header">
-        <p class="mb-0">{{ header_title|upper }}</p>
-      </div>
-      <div class="card-body">
-        <div class="row">
-          <div class="col-md-6">
-            <p>
-              <strong>{{ _('Account Name') }}:</strong> {{ account.name }}
-            </p>
-            <p>
-              <strong>{{ _('Account Code') }}:</strong> {{ account.code }}
-            </p>
-          </div>
-          <div class="col-md-6">
-            <p>
-              <strong>{{ _('Balance Type') }}:</strong> {{ account.balance_type }}
-            </p>
-            <p>
-              <strong>{{ _('Active') }}:</strong> {{ account.active }}
-            </p>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col">
-            <table class="table is-fullwidth is-narrow is-striped is-bordered django-ledger-table-bottom-margin-75">
-              <tr>
-                <th class="has-text-centered">{{ _('JE Number') }}</th>
-                <th class="has-text-centered">{{ _('Date') }}</th>
-                <th class="has-text-centered">{{ _('Debit') }}</th>
-                <th class="has-text-centered">{{ _('Credit') }}</th>
-                <th class="has-text-centered">{{ _('Description') }}</th>
-                <th class="has-text-centered">{{ _('Unit') }}</th>
-                <th class="has-text-centered">{{ _('Actions') }}</th>
-              </tr>
-
-              {% for tx in account.transactionmodel_set.all %}
-                <tr class="has-text-centered">
-                  <td>{{ tx.journal_entry.je_number }}</td>
-                  <td>{{ tx.journal_entry.timestamp }}</td>
-                  <td>
-                    {% if tx.tx_type == 'debit' %}
-                      ${{ tx.amount }}
-                    {% endif %}
-                  </td>
-                  <td>
-                    {% if tx.tx_type == 'credit' %}
-                      ${{ tx.amount }}
-                    {% endif %}
-                  </td>
-                  <td>{{ tx.description }}</td>
-                  <td>{{ tx.journal_entry.entity_unit.name }}</td>
-                  <td>
-                    <div class="btn-reveal-trigger position-static">
-                      <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
-                      <div class="dropdown-menu dropdown-menu-end py-2">
-                        <a class="dropdown-item" href="{% url 'payment_details' tx.journal_entry.pk %}">{% trans 'view'|capfirst %}</a>
+     <!-- ============================================-->      
+      <!-- <section> begin ============================-->
+        <section class="pt-5 pb-9 bg-body-emphasis dark__bg-gray-1200 border-top">
+          <div class="row-small mt-3">
+            <div class="d-flex justify-content-between align-items-end mb-4">
+              <h2 class="mb-0">{% trans 'Bill' %}</h2>
+              <div class="d-flex align-items-center gap-2">                    
+                  {% if bill.is_draft %}
+                    <a href="{% url 'in_review_bill' bill.pk %}" class="btn btn-phoenix-primary"><span class="d-none d-sm-inline-block">{% trans 'Review Bill' %}</span></a>                                                            
+                  {% endif %}                    
+                  {% if bill.is_review %}
+                  <button id="mark_bill_as_approved" class="btn btn-phoenix-secondary" data-bs-toggle="modal" data-bs-target="#mark_as_approved_Modal"><span class="d-none d-sm-inline-block">{% trans 'Mark as Approved' %}</span></button>
+                  {% endif %}                                      
+                  {% if bill.is_approved %}
+                    <a href="{% url 'payment_create' bill.pk %}" class="btn btn-phoenix-primary"><span class="d-none d-sm-inline-block">{% trans 'Record Payment' %}</span></a>                                                            
+                  {% endif %}                                      
+                  {% if bill.is_approved %}
+                    <button id="mark_bill_as_paid" class="btn btn-phoenix-secondary" data-bs-toggle="modal" data-bs-target="#mark_as_paid_Modal"><span class="d-none d-sm-inline-block">{% trans 'Mark as Paid' %}</span></button>
+                  {% endif %}                
+              </div>
+            </div>
+            
+            <!-- ============================================-->      
+            <div class="card mb-5">
+              <div class="card-body">
+                <div class="row g-4 g-xl-1 g-xxl-3 justify-content-between">
+                  <div class="col-sm-auto">
+                    <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center">
+                      <div class="d-flex bg-success-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0" style="width:32px; height:32px"><span class="text-success-dark" data-feather="dollar-sign" style="width:24px; height:24px"></span></div>
+                     <div>
+                        <p class="fw-bold mb-1">{% trans 'Paid Amount' %}</p>
+                        <h4 class="fw-bolder text-nowrap {% if bill.is_paid %}text-success{% endif %}">${{bill.amount_paid}}</h4>
+                        <h6 class="fw-bolder text-nowrap">Owned <span class="fw-semibold text-nowrap text-success">${{bill.get_amount_open}}</span></h6>                        
+                            <div class="progress" style="height:17px">
+                              <div class="progress-bar fw-semibold bg-{% if bill.get_progress_percent < 100 %}secondary{% else %}success{% endif %} rounded-2" role="progressbar" style="width: {{bill.get_progress_percent}}%" aria-valuenow="{{bill.get_progress_percent}}" aria-valuemin="0" aria-valuemax="100">{{bill.get_progress_percent}}%</div>
+                            </div>
+                          </div>                         
+                        </div>
+                  </div>             
+                  {% if 'net' in bill.terms %}
+                  <div class="col-sm-auto">
+                    <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center border-start-sm ps-sm-5 border-translucent">
+                      <div class="d-flex bg-primary-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0" style="width:32px; height:32px"><span class="text-primary-dark" data-feather="layout" style="width:24px; height:24px"></span></div>
+                      <div>
+                        <p class="fw-bold mb-1"></p>                        
+                        <div class="fs-9 text-body-secondary fw-semibold mb-0 d-sm-block d-inline-flex d-md-flex flex-xl-column ">
+                          <table>
+                            <tr>
+                              <td>{% trans 'Terms' %}:</td>
+                              <td><span class="badge rounded bg-success">{{bill.bill_number}}</span></td>
+                            </tr>
+                            <tr>
+                              <td>{% trans 'Date Due' %}:</td>
+                              <td><span class="badge rounded bg-success">{{bill.date_due}}</span></td>
+                            </tr>
+                            <tr>
+                              <td>{% trans 'Due in Days' %}:</td>
+                              <td>                                
+                                <span class="badge rounded bg-success">{{bill.due_in_days}}</span>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td>{% trans 'Is Past Due' %}:</td>
+                              <td>
+                                {% if bill.is_past_due %}
+                                  <span class="badge rounded bg-danger">{% trans 'Yes' %}</span>
+                                {% else %}
+                                  <span class="badge rounded bg-success">{% trans 'No' %}</span>
+                                {% endif %}
+                              </td>
+                            </tr>                            
+                          </table>
+                                                 
+                        </div>                        
                       </div>
                     </div>
-                  </td>
-                </tr>
-              {% endfor %}
-              <tr class="has-text-weight-bold">
-                <td></td>
-                <td class="has-text-right">Total</td>
-                <td class="has-text-centered">${{ total_debits }}</td>
-                <td class="has-text-centered">${{ total_credits }}</td>
-                <td></td>
-                <td></td>
-                <td></td>
-              </tr>
-            </table>
+                  </div>
+                  {% endif %}    
+                  <div class="col-sm-auto">
+                    <div class="d-sm-block d-inline-flex d-md-flex flex-xl-column flex-xxl-row align-items-center align-items-xl-start align-items-xxl-center border-start-sm ps-sm-5 border-translucent">
+                      <div class="d-flex bg-primary-subtle rounded flex-center me-3 mb-sm-3 mb-md-0 mb-xl-3 mb-xxl-0" style="width:32px; height:32px"><span class="text-primary-dark" data-feather="layout" style="width:24px; height:24px"></span></div>
+                      <div>
+                        <p class="fw-bold mb-1">{% trans 'Due Amount' %}</p>
+                        {% if bill.is_paid %}
+                          <s><h4 class="fw-bolder text-nowrap">${{bill.amount_due}} </h4></s>
+                        {% else %}
+                          <h4 class="fw-bolder text-nowrap">${{bill.amount_due}} </h4>
+                        {% endif %}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+             <!-- <section> begin ============================-->
+            <div class="bg-body dark__bg-gray-1100 p-4 mb-4 rounded-2 text-body-tertiary">
+                <div class="row g-4">
+                  <div class="col-12 col-lg-3">
+                    <div class="row g-4 g-lg-2">
+                      <div class="col-12 col-sm-6 col-lg-12">
+                        <div class="row align-items-center g-0">
+                          <div class="col-auto col-lg-6 col-xl-5">
+                            <h6 class="mb-0 me-3">{% trans "Bill Number" %} :</h6>
+                          </div>
+                          <div class="col-auto col-lg-6 col-xl-7">
+                            <p class="fs-9 text-body-secondary fw-semibold mb-0">#{{bill.bill_number}}</p>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="col-12 col-sm-6 col-lg-12">
+                        <div class="row align-items-center g-0">
+                          <div class="col-auto col-lg-6 col-xl-5">
+                            <h6 class="me-3">{% trans "Bill Date" %} :</h6>
+                          </div>
+                          <div class="col-auto col-lg-6 col-xl-7">
+                            <p class="fs-9 text-body-secondary fw-semibold mb-0">{{bill.created}}</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-6 col-lg-5">
+                    <div class="row align-items-center g-0">
+                        <div class="col-auto col-lg-6 col-xl-5">
+                        <h6 class="mb-2 me-3">{% trans "Customer Name" %} :</h6>
+                        <p class="fs-9 text-body-secondary fw-semibold mb-0">{{bill.vendor.vendor_name}}</p>                                               
+                      </div>                      
+                    </div>
+                  </div>
+                   <div class="col-12 col-sm-6 col-lg-4">
+                    <div class="row g-4">
+                      <div class="col-12 col-lg-6">
+                        <h6 class="mb-2"> {% trans "bill Status" %} :</h6>
+                        <div class="fs-9 text-body-secondary fw-semibold mb-0">
+                          {% if bill.bill_status == 'draft' %}
+                            <span class="badge text-bg-warning">{% trans "Draft" %}</span>
+                          {% elif bill.bill_status == 'in_review' %}
+                            <span class="badge text-bg-info">{% trans "In Review" %}</span>
+                          {% elif bill.bill_status == 'approved' %}
+                            <span class="badge text-bg-info">{% trans "Approved" %}</span>
+                          {% elif bill.bill_status == 'declined' %}
+                            <span class="badge text-bg-danger">{% trans "Declined" %}</span>
+                          {% elif bill.bill_status == 'paid' %}
+                            <span class="badge text-bg-success">{% trans "Paid" %}</span>
+                          {% endif %}
+                        </div>
+                      </div>                      
+                    </div>
+                  </div>
+                </div>
+              </div>                            
+              <div class="px-0">
+                <div class="table-responsive scrollbar">
+                  <table id="bill-table" class="table fs-9 text-body mb-0">
+                    <thead class="bg-body-secondary">                        
+                      <tr>
+                        <th scope="col" style="width: 24px;">#</th>
+                        <th scope="col" style="min-width: 260px;">{% trans "Item" %}</th>                        
+                        <th scope="col" style="min-width: 60px;">{% trans "Quantity" %}</th>
+                        <th scope="col" style="min-width: 60px;">{% trans "Unit Price" %}</th>
+                        <th scope="col" style="min-width: 60px;">{% trans "Total" %}</th>                        
+                      </tr>
+                    </thead>
+                    <tbody>
+                        {% for item in car_and_item_info %}
+                            <tr>
+                                <td class="">{{forloop.counter}}</td>
+                                <td class="">{{item.car.id_car_model}}</td>                                
+                                <td class="align-middle">{{item.itemmodel.quantity}}</td>                                
+                                <td class="align-middle ps-5">{{item.car.finances.cost_price}}</td>
+                                <td class="align-middle text-body-tertiary fw-semibold">{{item.total}}</td>
+                            </tr>
+                      {% endfor %}                      
+                      <tr class="bg-body-secondary total-sum">
+                        <td class="align-middle ps-4 fw-bolder text-body-highlight" colspan="4">{% trans "Grand Total" %}</td>                                                                                                
+                        <td class="align-middle text-start fw-bolder">                            
+                        <span id="grand-total">{{grand_total}}</span>                            
+                        </td>                        
+                      </tr>                                                                  
+                    </tbody>
+                  </table>
+                </div>                
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
-      <div class="card-footer d-flex">
-        <a class="btn btn-sm btn-primary me-1" href="{% url 'account_update' account.pk %}">
-          <!-- <i class="bi bi-pencil-square"></i> -->
-          {{ _('Edit') }}
-        </a>
-        <a class="btn btn-sm btn-danger me-1" data-bs-toggle="modal" data-bs-target="#deleteModal">
-          <!-- <i class="bi bi-trash-fill"></i> -->
-          {{ _('Delete') }}
-        </a>
-        <a class="btn btn-sm btn-secondary" href="{% url 'account_list' %}">
-          <!-- <i class="bi bi-arrow-left-square-fill"></i> -->
-          {% trans 'Back to List' %}
-        </a>
-      </div>
-    </div>
-  </div>
 {% endblock %}
+
+{% block extra_js %}
+<script>
+    function calculateTotals() {
+        const table = document.getElementById('estimate-table');
+        const rows = table.getElementsByTagName('tbody')[0].rows;
+        let grandTotal = 0;
+
+        for (let row of rows) {
+            // Ensure the row has the expected number of cells
+            if (row.cells.length >= 5) {
+                const quantity = parseFloat(row.cells[2].textContent); // Quantity column
+                const unitPrice = parseFloat(row.cells[3].textContent); // Unit Price column
+
+                if (!isNaN(quantity) && !isNaN(unitPrice)) {
+                    const total = quantity * unitPrice;
+                    row.cells[4].textContent = total.toFixed(2); // Populate Total column
+                    grandTotal += total; // Add to grand total
+                }
+            }
+        }
+
+        // Display the grand total
+        document.getElementById('grand-total').textContent = grandTotal.toFixed(2);
+    }
+
+
+    // Run the function on page load
+    window.onload = calculateTotals;          
+    </script>
+
+{% endblock %}
\ No newline at end of file
diff --git a/templates/ledger/bills/bill_form.html b/templates/ledger/bills/bill_form.html
index 1e9759c7..46b068bd 100644
--- a/templates/ledger/bills/bill_form.html
+++ b/templates/ledger/bills/bill_form.html
@@ -1,38 +1,159 @@
 {% extends "base.html" %}
-{% load i18n %}
 {% load crispy_forms_filters %}
-{% block title %}{% trans "account" %}{% endblock title %}
+{% load i18n static %}
+
+{% block title %}{{ _("Create Bill") }}{% endblock title %}
 
 {% block content %}
-<div class="row my-5">
-    <!-- Display Form Errors -->
-    <div class="card shadow rounded">
-        <div class="card-header bg-primary text-white">
-            <p class="mb-0">
-                {% if account.created %}
-                <!--<i class="bi bi-pencil-square"></i>--> 
-                    {{ _("Edit Account") }}
-                {% else %}
-                <!--<i class="bi bi-person-plus"></i> -->
-                    {{ _("Add Account") }}
-                {% endif %}
-            </p>
-        </div>
-        <div class="card-body">
-            <form method="post" class="form" novalidate>
-                 {% csrf_token %}
-            {{ form|crispy }}
-                {% for error in form.errors %}
-                <div class="text-danger">{{ error }}</div>
-                {% endfor %}
-             <div class="d-flex justify-content-end">
-                    <button class="btn btn-sm btn-success me-1" type="submit">
-                        {{ _("Save") }}
-                    </button>
-                 <a href="{{request.META.HTTP_REFERER}}" class="btn btn-sm btn-danger">{% trans "Cancel"|capfirst %}</a>
+<div class="row mt-4">
+    <h3 class="text-center">{% trans "Create Bill" %}</h3>
+    <form id="mainForm" method="post" class="needs-validation">
+        {% csrf_token %}
+        <div class="row g-3">
+            {{ form|crispy }}            
+            <div class="row mt-5">
+                <div id="formrow">
+                    <h3 class="text-start">Unit Items</h3>
+                    <div class="form-row row g-3 mb-3 mt-5">
+                        <div class="mb-2 col-sm-2">
+                            <select class="form-control item" name="item[]" required>
+                                {% for item in items %}
+                                    <option value="{{ item.product.pk }}">{{ item.car.id_car_model }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                        <div class="mb-2 col-sm-2">
+                            <input class="form-control quantity" type="number" placeholder="Quantity" name="quantity[]" required>
+                        </div>
+                        <div class="mb-2 col-sm-1">
+                            <button class="btn btn-danger removeBtn">Remove</button>
+                        </div>
+                    </div>
                 </div>
-            </form>
+                <div class="col-12">
+                    <button id="addMoreBtn" class="btn btn-primary">Add More</button>
+                </div>
+            </div>
         </div>
-    </div>
+
+        <!-- Buttons -->
+        <div class="mt-5 text-center">
+            <button type="submit" class="btn btn-success me-2" {% if not items %}disabled{% endif %}>{% trans "Save" %}</button>
+            <a href="{% url 'bill_list' %}" class="btn btn-secondary">{% trans "Cancel" %}</a>
+        </div>
+    </form>
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock content %}
+
+{% block extra_js %}
+<script>
+    const Toast = Swal.mixin({
+        toast: true,
+        position: "top-end",
+        showConfirmButton: false,
+        timer: 2000,
+        timerProgressBar: false,
+            didOpen: (toast) => {
+            toast.onmouseenter = Swal.stopTimer;
+            toast.onmouseleave = Swal.resumeTimer;
+            }
+        });
+    // Add new form fields
+    document.getElementById('addMoreBtn').addEventListener('click', function(e) {
+        e.preventDefault();
+        const formrow = document.getElementById('formrow');
+        const newForm = document.createElement('div');
+        newForm.className = 'form-row row g-3 mb-3 mt-5';
+        newForm.innerHTML = `
+            <div class="mb-2 col-sm-2">
+                <select class="form-control item" name="item[]" required>
+                    {% for item in items %}
+                        <option value="{{ item.product.pk }}">{{ item.car.id_car_model }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <div class="mb-2 col-sm-2">
+                <input class="form-control quantity" type="number" placeholder="Quantity" name="quantity[]" required>
+            </div>             
+            <div class="mb-2 col-sm-1">
+                <button class="btn btn-danger removeBtn">Remove</button>
+            </div>
+        `;
+        formrow.appendChild(newForm);
+
+        // Add remove button functionality
+        newForm.querySelector('.removeBtn').addEventListener('click', function() {
+            newForm.remove();
+        });
+    });
+
+    // Add remove button functionality to the initial form
+    document.querySelectorAll('.form-row').forEach(row => {
+        row.querySelector('.removeBtn').addEventListener('click', function() {
+            row.remove();
+        });
+    });
+
+    // Handle form submission
+    document.getElementById('mainForm').addEventListener('submit', async function(e) {
+        e.preventDefault();
+
+        /*const titleInput = document.querySelector('[name="title"]');
+        if (titleInput.value.length < 5) {
+            notify("error", "Customer billte Title must be at least 5 characters long.");
+            return; // Stop form submission
+        }*/
+
+        // Collect all form data
+        const formData = {
+            csrfmiddlewaretoken: document.querySelector('[name=csrfmiddlewaretoken]').value,
+            vendor: document.querySelector('[name=vendor]').value,
+            xref: document.querySelector('[name=xref]').value,
+            date_draft: document.querySelector('[name=date_draft]').value,
+            terms: document.querySelector('[name=terms]').value,
+            item: [],
+            quantity: []
+        };
+
+
+        // Collect multi-value fields (e.g., item[], quantity[])
+        document.querySelectorAll('[name="item[]"]').forEach(input => {
+            formData.item.push(input.value);
+        });
+        document.querySelectorAll('[name="quantity[]"]').forEach(input => {
+            formData.quantity.push(input.value);
+        });
+        console.log(formData);
+        
+        try {
+            // Send data to the server using fetch
+            const response = await fetch("{% url 'bill_create' %}", {
+                method: 'POST',
+                headers: {
+                    'X-CSRFToken': formData.csrfmiddlewaretoken,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(formData)
+            });
+
+            // Parse the JSON response
+            const data = await response.json();
+
+            // Handle the response
+            if (data.status === "error") {
+                notify("error", data.message); // Display an error message
+            } else if (data.status === "success") {
+                notify("success","Bill created successfully");
+                setTimeout(() => {
+                    window.location.assign(data.url); // Redirect to the provided URL
+                }, 1000);
+            } else {
+                notify("error","Unexpected response from the server");
+            }
+        } catch (error) {
+            
+            notify("error", error); 
+        }
+    });
+</script>
+{% endblock extra_js %}
\ No newline at end of file
diff --git a/templates/ledger/bills/bill_list.html b/templates/ledger/bills/bill_list.html
index a7830700..20486004 100644
--- a/templates/ledger/bills/bill_list.html
+++ b/templates/ledger/bills/bill_list.html
@@ -30,30 +30,25 @@
           </div>
         </div>
 
-        <!-- Customer Table -->
-
-        {% if page_obj.object_list %}
+        <!-- Customer Table -->                 
           <div id="accountsTable">
             <div class="table-responsive">
               <table class="table table-sm fs-9 mb-0">
                 <thead>
                   <tr class="bg-body-highlight">
                     <th class="border-top border-translucent ps-3">
-                      {% trans 'Account Name' %}
+                      {% trans 'Bill Number' %}
                     </th>
                     <th class="border-top border-translucent">
-                      {% trans 'Code' %}
-                    </th>
+                      {% trans 'Bill Status' %}
+                    </th>                   
                     <th class="border-top border-translucent text-end pe-3">
-                      {% trans 'Balance Type' %}
-                    </th>
-                    <th class="border-top border-translucent text-end pe-3">
-                      {% trans 'Active' %}
+                      {% trans 'Vendor' %}
                     </th>
                     <th class="border-top border-translucent text-end align-middle pe-0 ps-4" scope="col"></th>
                   </tr>
                 </thead>
-                <tbody class="list">
+                <tbody class="list">                  
                   {% for bill in bills %}
                     <div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
                       <div class="modal-dialog modal-sm">
@@ -78,31 +73,16 @@
                       </div>
                     </div>
                     <tr>
-                      <td class="align-middle ps-3">{{ bill.name }}</td>
-                      <td class="align-middle">{{ bill.code }}</td>
+                      <td class="align-middle ps-3">{{ bill.bill_number }}</td>
+                      <td class="align-middle">{{ bill.bill_status }}</td>                      
                       <td class="align-middle text-end py-3 pe-3">
-                        {% if bill.balance_type == 'debit' %}
-                          <div class="badge badge-phoenix fs-10 badge-phoenix-success">
-                            <span class="fw-bold">{{ _('Debit') }}</span><span class="ms-1 fas fa-arrow-circle-down"></span>
-                          </div>
-                        {% else %}
-                          <div class="badge badge-phoenix fs-10 badge-phoenix-danger">
-                            <span class="fw-bold">{{ _('Credit') }}</span><span class="ms-1 fas fa-arrow-circle-up"></span>
-                          </div>
-                        {% endif %}
-                      </td>
-                      <td class="align-middle text-end py-3 pe-3">
-                        {% if bill.active %}
-                          <span class="fw-bold text-success fas fa-check-circle"></span>
-                        {% else %}
-                          <span class="fw-bold text-danger far fa-times-circle"></span>
-                        {% endif %}
+                        {{bill.vendor.vendor_name}}
                       </td>
                       <td>
                         <div class="btn-reveal-trigger position-static">
                           <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs-10"></span></button>
                           <div class="dropdown-menu dropdown-menu-end py-2">
-                            <a href="{% url 'bill_detail' bill.uuid %}" class="dropdown-item text-success-dark">{% trans 'View' %}</a>
+                            <a href="{% url 'bill_detail' bill.pk %}" class="dropdown-item text-success-dark">{% trans 'View' %}</a>
                             <div class="dropdown-divider"></div><button class="dropdown-item text-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">{% trans 'Delete' %}</button>
                           </div>
                         </div>
@@ -157,8 +137,7 @@
                 </nav>
               </div>
             </div>
-          </div>
-        {% endif %}
+          </div>        
       </main>
     </div>
   </div>
diff --git a/templates/ledger/bills/bill_update_form.html b/templates/ledger/bills/bill_update_form.html
new file mode 100644
index 00000000..e43c596c
--- /dev/null
+++ b/templates/ledger/bills/bill_update_form.html
@@ -0,0 +1,21 @@
+{% extends 'base.html' %}
+{% load i18n %}
+{% load crispy_forms_filters %}
+{% block title %}{% trans "Bill" %}{% endblock title %}
+{% block content %}
+<div class="row my-4">
+    <h2>{% trans "Bill" %}</h2>
+    <form method="post">
+        {% csrf_token %}
+        {{ form|crispy }}        
+        <button type="submit" class="btn btn-sm btn-primary">
+        {% if bill.is_draft %}
+            {% trans "Mark As Review" %}
+        {% elif bill.is_review or bill.is_approved %}
+            {% trans "Save" %}
+        {% endif %}    
+        </button>
+        <a href="{% url 'bill_detail' pk=bill.pk %}" class="btn btn-sm btn-secondary">{% trans "Cancel" %}</a>
+    </form>
+</div>
+{% endblock %}
\ No newline at end of file