diff --git a/templates/purchase_orders/includes/card_po.html b/templates/purchase_orders/includes/card_po.html
index ed963fea..8ccb4492 100644
--- a/templates/purchase_orders/includes/card_po.html
+++ b/templates/purchase_orders/includes/card_po.html
@@ -15,7 +15,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
         document.getElementById('POModalBody').innerHTML = `
             <div class="d-flex justify-content-center gap-3 py-3">
-                <a class="btn btn-primary px-4" href="${actionUrl}">
+                <a class="btn btn-outline-primary px-4" href="${actionUrl}">
                     <i class="fas fa-check-circle me-2"></i>${buttonText}
                 </a>
                 <button class="btn btn-outline-secondary" data-bs-dismiss="modal">
@@ -45,7 +45,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
             <div class="card-body">
                 <h3 class="h4 mb-4">
-                    <span class="badge bg-{% if po_model.is_draft %}secondary{% elif po_model.is_approved %}success{% elif po_model.is_fulfilled %}primary{% else %}warning{% endif %}">
+                    <span class="badge bg-{% if po_model.is_draft %}success{% elif po_model.is_approved %}success{% elif po_model.is_fulfilled %}primary{% else %}warning{% endif %}">
                         {{ po_model.get_po_status_display }}
                     </span>
                 </h3>
@@ -214,7 +214,7 @@ document.addEventListener('DOMContentLoaded', function() {
                         {% endif %}
 
                         {% if po_model.can_cancel %}
-                            <button class="btn btn-outline-danger"
+                            <button class="btn btn-outline-secondary"
                                    onclick="djLedger.toggleModal('{{ po_model.get_mark_as_canceled_html_id }}')">
                                 <i class="fas fa-window-close me-2"></i>{% trans 'Cancel' %}
                             </button>
diff --git a/templates/purchase_orders/includes/po_item_formset.html b/templates/purchase_orders/includes/po_item_formset.html
index fc3ebe53..064a12f1 100644
--- a/templates/purchase_orders/includes/po_item_formset.html
+++ b/templates/purchase_orders/includes/po_item_formset.html
@@ -95,7 +95,7 @@
             </div>
         </div>
         <div class="col-12">
-            <button class="btn btn-primary">{% trans 'Save' %}</button>
+            <button class="btn btn-outline-success">{% trans 'Save' %}</button>
         </div>
     </div>
 </form>
\ No newline at end of file
diff --git a/templates/purchase_orders/po_list.html b/templates/purchase_orders/po_list.html
index e9359b72..f25e0080 100644
--- a/templates/purchase_orders/po_list.html
+++ b/templates/purchase_orders/po_list.html
@@ -1,74 +1,76 @@
 <!-- po_list.html -->
 {% extends "base.html" %}
-
+{% load i18n static %}
 {% block title %}
     Purchase Orders - {{ block.super }}
 {% endblock %}
 
 {% block content %}
-<div class="container mt-4">
-    <h2 class="mb-4">Purchase Orders</h2>
-
-    <!-- Success Message -->
-    {% if messages %}
-        {% for message in messages %}
+    <div class="row mt-4">
+        <!-- Success Message -->
+       {% if messages %}
+          {% for message in messages %}
             <div class="alert alert-success">{{ message }}</div>
-        {% endfor %}
-    {% endif %}
-
-    <!-- Add New PO Button -->
-    <div class="d-flex justify-content-between align-items-center mb-3">
-        <a href="{% url 'purchase_order_create' %}" class="btn btn-primary">
-            <i class="bi bi-plus-lg"></i> Create New PO
-        </a>
-    </div>
-    <!-- PO Table -->
-    <div class="table-responsive">
-        <table class="table table-striped table-hover align-middle">
-            <thead class="table-dark">
-                <tr>
-                    <th scope="col">PO Number</th>
-                    <th scope="col">Description</th>
-                    <th scope="col">Status</th>
-                    <th scope="col">Created At</th>
-                    <th scope="col">Actions</th>
-                </tr>
-            </thead>
-            <tbody>
+          {% endfor %}
+        {% endif %}
+         <!-- Add New PO Button -->
+        <div class="d-flex justify-content-between mb-2">
+            <h3 class="">
+                {{ _("Purchase Orders") |capfirst }}
+            </h2>
+            <a href="{% url 'purchase_order_create' %}"
+               class="btn btn-md btn-phoenix-primary"><i class="fa fa-plus me-2"></i>{{ _("Create New PO") }}</a>
+        </div>
+        {% include "partials/search_box.html" %}
+       
+            <div class="table-responsive px-1 scrollbar mt-3">
+                <table class= "table align-items-center table-flush table-hover">
+                    <thead>
+                        <tr class="bg-body-highlight">
+                            <th  class="sort white-space-nowrap align-middle" scope="col" style="width:15%">PO Number</th>
+                            <th class="sort white-space-nowrap align-middle" scope="col" style="width:40%">Description</th>
+                            <th class="sort white-space-nowrap align-middle" scope="col" style="width:15%">Status</th>
+                            <th class="sort white-space-nowrap align-middle" scope="col" style="width:15%">Created At</th>
+                            <th class="sort white-space-nowrap align-middle" scope="col" style="width:15%">Actions</th> 
+                        </tr>
+                    </thead>
+                    <tbody class="list">
                 {% if purchase_orders %}
                     {% for po in purchase_orders %}
-                        <tr>
-                            <td>{{ po.po_number }}</td>
-                            <td>{{ po.po_title }}</td>
-                            <td>
+                      
+                            <tr class="hover-actions-trigger btn-reveal-trigger position-static">
+                                <td class="align-middle product white-space-nowrap">{{ po.po_number }}</td>
+                            <td  class="align-middle product white-space-nowrap">{{ po.po_title }}</td>
+                            <td  class="align-middle product white-space-nowrap">
                                 <span class="">
                                     {{ po.po_status|capfirst }}
                                 </span>
                             </td>
-                            <td>{{ po.created|date:"M d, Y" }}</td>
-                            <td>
-                              <a href="{% url 'purchase_order_detail' po.pk %}" class="btn btn-sm btn-info me-1">
-                                    View
-                              </a>
-                                {% comment %} <a href="{% url 'purchase_order_detail' po.id %}" class="btn btn-sm btn-info me-1">
-                                    View
+                            <td  class="align-middle product white-space-nowrap">{{ po.created|date:"M d, Y" }}</td>
+                            <td class="align-middle product white-space-nowrap">
+                                <a href="{% url 'purchase_order_detail' po.pk %}"
+                                   class="btn btn-sm btn-phoenix-success">
+                                    <i class="fa-regular fa-eye me-1"></i>
+                                    {% trans "view"|capfirst %}
                                 </a>
-                                <a href="{% url 'purchase_order_update' po.id %}" class="btn btn-sm btn-warning me-1">
-                                    Edit
-                                </a>
-                                <a href="{% url 'purchase_order_delete' po.id %}" class="btn btn-sm btn-danger">
-                                    Delete
-                                </a> {% endcomment %}
                             </td>
-                        </tr>
-                    {% endfor %}
-                {% else %}
-                    <tr>
+                            </tr>
+                    {%endfor%}
+                {% else%}
+                     <tr>
                         <td colspan="6" class="text-center">No purchase orders found.</td>
                     </tr>
                 {% endif %}
-            </tbody>
-        </table>
+                    </tbody>
+                </table>
+            </div>
+            <div class="d-flex justify-content-end mt-3">
+                <div class="d-flex">
+                    {% if is_paginated %}
+                        {% include 'partials/pagination.html' %}
+                    {% endif %}
+                </div>
+            </div>
     </div>
-</div>
+    {% include 'modal/delete_modal.html' %}
 {% endblock %}
\ No newline at end of file
diff --git a/templates/purchase_orders/po_update.html b/templates/purchase_orders/po_update.html
index e9a4e16a..d5e841fa 100644
--- a/templates/purchase_orders/po_update.html
+++ b/templates/purchase_orders/po_update.html
@@ -24,12 +24,13 @@
                                     {% csrf_token %}
                                     {{ form|crispy }}
                                     <button type="submit"
-                                            class="btn btn-primary w-100 my-2">{% trans 'Save PO' %}
+                                            class="btn btn-outline-success w-100 my-2">{% trans 'Save PO' %}
                                     </button>
                                     <a href="{% url 'purchase_order_detail' po_model.uuid %}"
-                                       class="btn btn-dark w-100 my-2">{% trans 'Back to PO Detail' %}</a>
+                                       class="btn btn-outline-secondary w-100 my-2">{% trans 'Back to PO Detail' %}</a>
                                     <a href="{% url 'purchase_order_list' %}"
-                                       class="btn btn-info w-100 my-2">{% trans 'PO List' %}</a>
+                                       class="btn btn-outline-info 
+                                       info w-100 my-2">{% trans 'PO List' %}</a>
                                 </div>
                             </div>
                         </form>
diff --git a/templates/purchase_orders/tags/po_item_table.html b/templates/purchase_orders/tags/po_item_table.html
index f4109ad9..1a82cc16 100644
--- a/templates/purchase_orders/tags/po_item_table.html
+++ b/templates/purchase_orders/tags/po_item_table.html
@@ -4,7 +4,7 @@
 <div class="table-container">
     <table class="table is-fullwidth is-striped is-narrow is-bordered">
         <thead>
-            <tr class="has-text-centered">
+            <tr class="has-text-centered bg-body-highlight">
                 <th>{% trans 'Item' %}</th>
                 <th>{% trans 'Unit Cost' %}</th>
                 <th>{% trans 'PO Qty' %}</th>