diff --git a/templates/bill/bill_detail.html b/templates/bill/bill_detail.html
index 568ddc95..dbd9cd7d 100644
--- a/templates/bill/bill_detail.html
+++ b/templates/bill/bill_detail.html
@@ -141,15 +141,15 @@
         </div>
         <div class="card-body px-0 pt-0 pb-2">
           <div class="table-responsive">
-            <table class="table table-hover align-items-center mb-0">
+            <table class="table table-hover">
               <thead >
-                <tr>
+                <tr class="bg-body-highlight">
                   <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Item' %}</th>
                   <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Entity Unit' %}</th>
                   <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Unit Cost' %}</th>
                   <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Quantity' %}</th>
                   <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Total' %}</th>
-                  <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'PO' %}</th>
+                  <th class="sort white-space-nowrap align-middle " scope="col">{% trans 'PO' %}</th>
                 </tr>
               </thead>
                <tbody class="list" id="project-list-table-body">
@@ -182,7 +182,7 @@
                       {% currency_symbol %}{{ bill_item.total_amount | currency_format }}
                     </span>
                   </td>
-                  <td class="align-middle white-space-nowrap">
+                  <td class="align-middle white-space-nowrap pe-2">
                     {% if bill_item.po_model_id %}
                     <a class="btn btn-sm btn-phoenix-primary"
                        href="{% url 'purchase_order_detail' bill_item.po_model_id %}">
diff --git a/templates/bill/transactions/tags/txs_table.html b/templates/bill/transactions/tags/txs_table.html
index 0e801373..ccf6762f 100644
--- a/templates/bill/transactions/tags/txs_table.html
+++ b/templates/bill/transactions/tags/txs_table.html
@@ -3,45 +3,45 @@
 
 {% if style == 'detail' %}
     <div class="table-responsive">
-        <table class="table table-striped table-bordered table-hover">
-            <thead class="table-light">
-                <tr>
-                    <th>{% trans 'Timestamp' %}</th>
-                    <th>{% trans 'Account' %}</th>
-                    <th>{% trans 'Account Name' %}</th>
-                    <th>{% trans 'Unit' %}</th>
-                    <th>{% trans 'Credit' %}</th>
-                    <th>{% trans 'Debit' %}</th>
-                    <th>{% trans 'Description' %}</th>
+        <table class="table  table-hover">
+            <thead >
+                <tr class="bg-body-highlight">
+                    <th class="sort white-space-nowrap align-middle"  scope="col">{% trans 'Timestamp' %}</th>
+                    <th class="sort white-space-nowrap align-middle"  scope="col">{% trans 'Account' %}</th>
+                    <th class="sort white-space-nowrap align-middle"  scope="col">{% trans 'Account Name' %}</th>
+                    <th class="sort white-space-nowrap align-middle"  scope="col">{% trans 'Unit' %}</th>
+                    <th class="sort white-space-nowrap align-middle"  scope="col">{% trans 'Credit' %}</th>
+                    <th class="sort white-space-nowrap align-middle" scope="col">{% trans 'Debit' %}</th>
+                    <th class="sort white-space-nowrap align-middle"  scope="col">{% trans 'Description' %}</th>
                 </tr>
             </thead>
             <tbody>
                 {% for transaction_model in transaction_model_qs %}
                     <tr>
-                        <td>{{ transaction_model.timestamp }}</td>
-                        <td>{{ transaction_model.account_code }}</td>
-                        <td>{{ transaction_model.account_name }}</td>
-                        <td>{% if transaction_model.entity_unit_name %}{{ transaction_model.entity_unit_name }}{% endif %}</td>
-                        <td>{% if transaction_model.is_credit %}${{ transaction_model.amount | currency_format }}{% endif %}</td>
-                        <td>{% if transaction_model.is_debit %}${{ transaction_model.amount | currency_format }}{% endif %}</td>
-                        <td>{% if transaction_model.description %}{{ transaction_model.description }}{% endif %}</td>
+                        <td class="sort white-space-nowrap align-middle ps-1" scope="col" >{{ transaction_model.timestamp }}</td>
+                        <td class="sort white-space-nowrap align-middle"  scope="col">{{ transaction_model.account_code }}</td>
+                        <td class="sort white-space-nowrap align-middle"  scope="col">{{ transaction_model.account_name }}</td>
+                        <td class="sort white-space-nowrap align-middle"  scope="col">{% if transaction_model.entity_unit_name %}{{ transaction_model.entity_unit_name }}{% endif %}</td>
+                        <td class="sort white-space-nowrap align-middle"  scope="col">{% if transaction_model.is_credit %}${{ transaction_model.amount | currency_format }}{% endif %}</td>
+                        <td class="sort white-space-nowrap align-middle"  scope="col">{% if transaction_model.is_debit %}${{ transaction_model.amount | currency_format }}{% endif %}</td>
+                        <td class="sort white-space-nowrap align-middle pe-1"  scope="col">{% if transaction_model.description %}{{ transaction_model.description }}{% endif %}</td>
                     </tr>
                 {% endfor %}
                 <tr class="fw-bold">
-                    <td colspan="3"></td>
-                    <td class="text-end">{% trans 'Total' %}</td>
-                    <td>{% currency_symbol %}{{ total_credits | currency_format }}</td>
-                    <td>{% currency_symbol %}{{ total_debits | currency_format }}</td>
-                    <td></td>
+                    <td class="sort white-space-nowrap align-middle"  colspan="3"></td>
+                    <td  class="class="sort white-space-nowrap align-middle" " scope="col">{% trans 'Total' %}</td>
+                    <td class="sort white-space-nowrap align-middle"  scope="col">{% currency_symbol %}{{ total_credits | currency_format }}</td>
+                    <td class="sort white-space-nowrap align-middle"  scope="col">{% currency_symbol %}{{ total_debits | currency_format }}</td>
+                    <td class="sort white-space-nowrap align-middle"  scope="col"></td>
                 </tr>
             </tbody>
         </table>
     </div>
 {% elif style == 'compact' %}
     <div class="table-responsive">
-        <table class="table table-striped table-bordered table-hover">
-            <thead class="table-light">
-                <tr>
+        <table class="table  table-hover">
+            <thead>
+                <tr class="bg-body-highlight">
                     <th>{% trans 'Account' %}</th>
                     <th>{% trans 'Account Name' %}</th>
                     <th>{% trans 'Credit' %}</th>
diff --git a/templates/purchase_orders/po_upload_cars.html b/templates/purchase_orders/po_upload_cars.html
index 3f70aa13..cd767118 100644
--- a/templates/purchase_orders/po_upload_cars.html
+++ b/templates/purchase_orders/po_upload_cars.html
@@ -3,7 +3,29 @@
 {% block content %}
 <div class="mt-4">
 <h1><i class="fa-solid fa-cart-shopping me-1"></i>{{po.po_number}}</h1>
-<h4>Satus:{{po.po_status|capfirst}}</h4>
+
+<div class="d-flex align-items-center">
+    <h4>Status:</h4>
+    {% comment %} Apply appropriate text color based on po.po_status {% endcomment %}
+    {% if po.po_status == 'draft' %}
+        <h4 class="ms-2 text-warning mb-0">{{ po.po_status|capfirst }}</h4>
+    {% elif po.po_status == 'in_review' %}
+        <h4 class="ms-2 text-primary mb-0">{{ po.po_status|capfirst }}</h4>
+    {% elif po.po_status == 'approved' %}
+        <h4 class="ms-2 text-info mb-0">{{ po.po_status|capfirst }}</h4>
+    {% elif po.po_status == 'fulfilled' %}
+        <h4 class="ms-2 text-success mb-0">{{ po.po_status|capfirst }}</h4>
+    {% elif po.po_status == 'void' %}
+        <h4 class="ms-2 text-danger mb-0">{{ po.po_status|capfirst }}</h4>
+    {% else %}
+        <h4 class="ms-2 text-muted mb-0">{{ po.po_status|capfirst }}</h4> {# Use muted for unknown/default status #}
+    {% endif %}
+</div>
+   
+    
+
+
+
   <div class="table-responsive mt-3">
     <table class="table table-striped table-hover align-middle">
       <thead>