diff --git a/hub/services/static/css/servala-main.css b/hub/services/static/css/servala-main.css
index 784acab..bd5e811 100644
--- a/hub/services/static/css/servala-main.css
+++ b/hub/services/static/css/servala-main.css
@@ -12509,4 +12509,24 @@ a.btn:focus {
 
 .accordion-button:not(.collapsed)::after {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+}
+
+.pricing-table thead.table-dark {
+    background-color: #160037 !important;
+}
+
+.pricing-table .final-price-header {
+    background-color: #9A63EC !important;
+    color: #fff !important;
+}
+
+.pricing-table .final-price-cell {
+    background-color: #f9fafb !important;
+    color: #160037 !important;
+}
+
+.price-chart {
+    background-color: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
 }
\ No newline at end of file
diff --git a/hub/services/templates/services/pricelist.html b/hub/services/templates/services/pricelist.html
index ed208db..47402d5 100644
--- a/hub/services/templates/services/pricelist.html
+++ b/hub/services/templates/services/pricelist.html
@@ -37,7 +37,7 @@
                                 <h3 class="mb-3 text-secondary">{{ service_level }}</h3>
                                 {% if pricing_data %}
                                     <div class="table-responsive">
-                                        <table class="table table-striped table-bordered table-sm">
+                                        <table class="table table-striped table-bordered table-sm pricing-table">
                                             <thead class="table-dark">
                                                 <tr>
                                                     <th>Cloud Provider</th>
@@ -59,7 +59,7 @@
                                                     <th>Discount Model</th>
                                                     <th>Discount Details</th>
                                                     {% endif %}
-                                                    <th class="table-warning">Final Price</th>
+                                                    <th class="final-price-header">Final Price</th>
                                                 </tr>
                                             </thead>
                                             <tbody>
@@ -107,7 +107,7 @@
                                                         {% endif %}
                                                     </td>
                                                     {% endif %}
-                                                    <td class="table-warning fw-bold">{{ row.final_price|floatformat:2 }}</td>
+                                                    <td class="final-price-cell fw-bold">{{ row.final_price|floatformat:2 }}</td>
                                                 </tr>
                                                 {% endfor %}
                                             </tbody>
@@ -115,7 +115,7 @@
                                     </div>
                                     
                                     {# Price Chart #}
-                                    <div class="mt-3">
+                                    <div class="price-chart mt-3">
                                         <h5 class="text-muted">Price Chart - Units vs Final Price</h5>
                                         <div style="height: 400px;">
                                             <canvas id="chart-{{ group_name|slugify }}-{{ service_level|slugify }}" width="400" height="200"></canvas>