diff --git a/erpnext/accounts/report/accounts_payable/accounts_payable.html b/erpnext/accounts/report/accounts_payable/accounts_payable.html
index d3020b22a40..46b40017034 100644
--- a/erpnext/accounts/report/accounts_payable/accounts_payable.html
+++ b/erpnext/accounts/report/accounts_payable/accounts_payable.html
@@ -1 +1,220 @@
-{% include "accounts/report/accounts_receivable/accounts_receivable.html" %}
+<style type="text/css">
+    body, html {
+        margin-top: 10px;
+        padding: 0;
+        width: 100%;
+        height: auto;
+        font-family: Inter, sans-serif;
+        font-size: 14px;
+        line-height: 21px;
+        color: #171717;
+    }
+
+    .title-letter-spacing {
+        font-size: 15px;
+        font-weight: 600;
+        color: #171717;
+    }
+
+    .report-table table {
+        width: 100%;
+        table-layout: fixed;
+        border-collapse: collapse;
+    }
+
+    .report-table thead th {
+        background: #f8f8f8;
+        text-align: center;
+        font-size: 14px;
+        font-weight: 500;
+        color: #7c7c7c;
+        border-top: 1px solid #ededed;
+        border-bottom: 1px solid #ededed;
+        padding: 6px 8px;
+    }
+
+    .report-table tbody td {
+        padding: 6px 8px;
+        border-top: 1px solid #ededed;
+        border-bottom: 1px solid #ededed;
+        vertical-align: top;
+        word-wrap: break-word;
+        font-size: 14px;
+    }
+
+    .report-table thead th:first-child {
+        border-left: 1px solid #ededed;
+    }
+
+    .report-table thead th:last-child {
+        border-right: 1px solid #ededed;
+    }
+
+    .report-table tbody tr:last-child td {
+        border-bottom: none;
+    }
+
+    .text-center { text-align: center; }
+    .text-right { text-align: right; font-variant-numeric: tabular-nums; }
+    .text-left { text-align: left; }
+    .text-bold { font-weight: 700; }
+
+    .report-meta {
+        margin: 10px 0 14px;
+        padding: 8px 10px;
+        font-size: 14px;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .report-meta .left,
+    .report-meta .right {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .report-meta strong {
+        color: #7c7c7c;
+        font-weight: 500;
+    }
+
+    @media print {
+        @page {
+            size: A4;
+            margin-top: 10mm;
+        }
+        thead { display: table-header-group; }
+        tr { page-break-inside: avoid; }
+    }
+</style>
+
+<br>
+
+<div>
+
+    <!-- Title -->
+    <div class="text-center" style="margin-bottom: 12px;">
+        <div class="title-letter-spacing">
+            {%= __(report.report_name) %}
+        </div>
+    </div>
+
+    <!-- Meta -->
+    <div class="report-meta">
+        <div class="left">
+            <div>
+                <strong>{%= __("Supplier") %}:</strong>
+                {%= (filters.party.length && filters.party.join(", ")) || __("All Parties") %}
+            </div>
+        </div>
+
+        <div class="right text-right">
+            <div>
+                <strong>{%= __("Report Date") %}:</strong>
+                {%= frappe.datetime.str_to_user(filters.report_date) %}
+            </div>
+        </div>
+    </div>
+
+    <!-- Main Table -->
+    <div class="report-table">
+        <table>
+            <thead>
+                <tr>
+                    <th style="width: 8em; text-align: left;">{%= __("Date") %}</th>
+                    <th style="text-align: left;">{%= __("Reference") %}</th>
+
+                    {% if(filters.show_remarks) { %}
+                        <th style="text-align: left;">{%= __("Remarks") %}</th>
+                    {% } %}
+
+                    <th style="width: 10em; text-align: right;">{%= __("Age (Days)") %}</th>
+                    <th style="width: 10em; text-align: right;">{%= __("Invoiced Amount") %}</th>
+                    <th style="width: 11em; text-align: right;">{%= __("Outstanding Amount") %}</th>
+                </tr>
+            </thead>
+
+            <tbody>
+                {% for(var i=0, l=data.length; i<l; i++) { %}
+                    <tr>
+                        <td class="text-left">{%= frappe.datetime.str_to_user(data[i]["posting_date"]) %}</td>
+
+                        <td class="{% if(i == data.length - 1) { %}text-left text-bold{% } %}">
+                            {% if(i == data.length - 1) { %}
+                                {%= __("Total") %}
+                            {% } else { %}
+                                {%= data[i]["voucher_no"] %}
+                            {% } %}
+                        </td>
+
+                        {% if(filters.show_remarks) { %}
+                            <td class="text-left">
+                                {% if(data[i]["remarks"] && data[i]["remarks"] != "No Remarks") { %}
+                                    {%= data[i]["remarks"] %}
+                                {% } %}
+                            </td>
+                        {% } %}
+
+                        <td class="text-right">{%= data[i]["age"] %}</td>
+                        <td class="text-right">{%= format_currency(data[i]["invoiced"], data[i]["currency"]) %}</td>
+                        <td class="text-right">{%= format_currency(data[i]["outstanding"], data[i]["currency"]) %}</td>
+                    </tr>
+                {% } %}
+            </tbody>
+        </table>
+    </div>
+
+    &nbsp;
+
+    {% if(filters.show_future_payments) { %}
+        {%
+            var balance_row = data.slice(-1).pop();
+            var start = report.columns.findIndex(e => e.fieldname == 'age');
+            var currency = data[data.length - 1]["currency"];
+
+            var ranges = [
+                report.columns[start].label,
+                report.columns[start+1].label,
+                report.columns[start+2].label,
+                report.columns[start+3].label,
+                report.columns[start+4].label,
+                report.columns[start+5].label
+            ];
+        %}
+
+        {% if(balance_row) { %}
+        <div class="report-table">
+            <table>
+                <thead>
+                    <tr>
+                        <th style="text-align: right;"></th>
+                        {% for(var i = 0; i < ranges.length; i++) { %}
+                            <th style="text-align: right;">{%= __(ranges[i]) %}</th>
+                        {% } %}
+                        <th style="text-align: right;">{%= __("Total") %}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>{%= __("Total Outstanding") %}</td>
+                        <td class="text-right">{%= format_number(balance_row["age"], null, 2) %}</td>
+                        <td class="text-right">{%= format_currency(balance_row["range1"], currency) %}</td>
+                        <td class="text-right">{%= format_currency(balance_row["range2"], currency) %}</td>
+                        <td class="text-right">{%= format_currency(balance_row["range3"], currency) %}</td>
+                        <td class="text-right">{%= format_currency(balance_row["range4"], currency) %}</td>
+                        <td class="text-right">{%= format_currency(balance_row["range5"], currency) %}</td>
+                        <td class="text-right">{%= format_currency(flt(balance_row["outstanding"]), currency) %}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        {% } %}
+    {% } %}
+
+    <p class="text-right">
+        {%= __("Printed on {0}", [
+            frappe.datetime.str_to_user(frappe.datetime.get_datetime_as_string())
+        ]) %}
+    </p>
+
+</div>
\ No newline at end of file