diff --git a/erpnext/public/scss/point-of-sale.scss b/erpnext/public/scss/point-of-sale.scss
index 61be422..60043bf 100644
--- a/erpnext/public/scss/point-of-sale.scss
+++ b/erpnext/public/scss/point-of-sale.scss
@@ -75,7 +75,14 @@
 		background-color: var(--gray-50);
 	}
 
+	.sticky-element {
+		position: sticky;
+		top: -1px;
+		z-index: 1;
+	}
+
 	> .items-selector {
+		@extend .pos-card;
 		grid-column: span 6 / span 6;
 		display: flex;
 		flex-direction: column;
@@ -83,12 +90,10 @@
 		overflow-x: hidden;
 
 		> .filter-section {
+			@extend .sticky-element;
 			display: grid;
 			grid-template-columns: repeat(12, minmax(0, 1fr));
 			background-color: var(--fg-color);
-			position: sticky;
-			top: -1px;
-			z-index: 1;
 			padding: var(--padding-lg);
 			padding-bottom: var(--padding-sm);
 			align-items: center;
@@ -124,6 +129,10 @@
 				@extend .pointer-no-select;
 				border-radius: var(--border-radius-md);
 				box-shadow: var(--shadow-base);
+
+				&:hover {
+					transform: scale(1.02, 1.02);
+				}
 				
 				.item-display {
 					display: flex;
@@ -180,14 +189,13 @@
 			> .customer-field {
 				display: flex;
 				align-items: center;
+				padding-top: var(--padding-xs);
 			}
 
 			> .customer-details {
+				@extend .sticky-element;
 				display: flex;
 				flex-direction: column;
-				position: sticky;
-				top: -1px;
-				z-index: 1;
 				background-color: var(--fg-color);
 
 				> .header {
@@ -263,6 +271,7 @@
 					display: grid;
 					grid-template-columns: repeat(2, minmax(0, 1fr));
 					margin-top: var(--margin-sm);
+					gap: var(--padding-sm);
 				}
 
 				> .transactions-label {
@@ -445,7 +454,7 @@
 							padding: 3px var(--padding-sm);
 							border-radius: var(--border-radius-sm);
 							background-color: var(--green-100);
-							color: var(--green-700);
+							color: var(--dark-green-500);
 							font-size: var(--text-sm);
 							font-weight: 700;
 						}
@@ -462,19 +471,14 @@
 
 					> .taxes-container {
 						display: none;
-						align-items: center;
-						justify-content: space-between;
+						flex-direction: column;
 						padding: var(--padding-sm) 0px;
 						font-weight: 500;
 						font-size: var(--text-md);
 
-						> .tax-label {
+						> .tax-row {
 							display: flex;
-							align-items: center;
-
-							> .tax-desc {
-								margin-left: var(--margin-md);
-							}
+							justify-content: space-between;
 						}
 					}
 
@@ -702,7 +706,7 @@
 				padding: 3px var(--padding-sm);
 				border-radius: var(--border-radius-sm);
 				background-color: var(--green-100);
-				color: var(--green-700);
+				color: var(--dark-green-500);
 				font-size: var(--text-sm);
 				font-weight: 700;
 			}
@@ -849,6 +853,219 @@
 				display: none;
 			}
 		}
+	}
 
+	> .past-order-list {
+		@extend .pos-card;
+		grid-column: span 4 / span 4;
+		display: none;
+		flex-direction: column;
+		overflow-y: scroll;
+		overflow-x: hidden;
+
+		> .filter-section {
+			@extend .sticky-element;
+			display: flex;
+			flex-direction: column;
+			background-color: var(--fg-color);
+			padding: var(--padding-lg);
+
+			> .search-field {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				margin-top: var(--margin-sm);
+				margin-bottom: var(--margin-xs);
+			}
+
+			> .status-field {
+				width: 100%;
+				display: flex;
+				align-items: center;
+			}
+		}
+
+		> .invoices-container {
+			padding: var(--padding-lg);
+			padding-top: 0px;
+		}
+	}
+
+	> .past-order-summary {
+		// @extend .pos-card;
+		display: none;
+		grid-column: span 6 / span 6;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: var(--padding-lg);
+
+		> .no-summary-placeholder {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			height: 100%;
+			background-color: var(--gray-50);
+			font-weight: 500;
+			border-radius: var(--border-radius-md);
+		}
+
+		> .invoice-summary-wrapper {
+			@extend .pos-card;
+			display: none;
+			position: relative;
+			width: 31rem;
+			height: 100%;
+
+			> .abs-container {
+				position: absolute;
+				display: flex;
+				flex-direction: column;
+				width: 100%;
+				height: 100%;
+				padding: var(--padding-lg);
+
+				> .upper-section {
+					display: flex;
+					justify-content: space-between;
+					width: 100%;
+					margin-bottom: var(--margin-md);
+
+					> .left-section {
+						display: flex;
+						flex-direction: column;
+						align-items: flex-start;
+						justify-content: flex-end;
+						padding-right: var(--padding-sm);
+
+						> .customer-name {
+							font-size: var(--text-2xl);
+							font-weight: 700;
+						}
+
+						> .customer-email {
+							font-size: var(--text-md);
+							font-weight: 500;
+							color: var(--gray-600);
+						}
+
+						> .cashier {
+							font-size: var(--text-md);
+							font-weight: 500;
+							color: var(--gray-600);
+							margin-top: auto;
+						}
+					}
+
+					> .right-section {
+						display: flex;
+						flex-direction: column;
+						align-items: flex-end;
+						justify-content: space-between;
+
+						> .paid-amount {
+							font-size: var(--text-2xl);
+							font-weight: 700;
+						}
+
+						> .invoice-name {
+							font-size: var(--text-md);
+							font-weight: 500;
+							color: var(--gray-600);
+							margin-bottom: var(--margin-sm);
+						}
+					}
+				}
+
+				> .summary-container {
+					display: flex;
+					flex-direction: column;
+					border-radius: var(--border-radius-md);
+					background-color: var(--gray-50);
+					margin: var(--margin-md) 0px;
+
+					> .summary-row-wrapper {
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						padding: var(--padding-sm) var(--padding-md);
+						// border-bottom: 1px solid var(--gray-300);
+					}
+
+					> .taxes-wrapper {
+						display: flex;
+						flex-direction: column;
+						padding: var(--padding-sm) var(--padding-md);
+						// border-bottom: 1px solid var(--gray-300);
+
+						> .tax-row {
+							display: flex;
+							justify-content: space-between;
+						}
+					}
+
+					> .item-row-wrapper {
+						display: flex;
+						align-items: center;
+						padding: var(--padding-sm) var(--padding-md);
+						// border-bottom: 1px solid var(--gray-300);
+
+						> .item-name {
+							@extend .nowrap;
+							font-weight: 500;
+							margin-right: var(--margin-md);
+						}
+	
+						> .item-qty {
+							font-weight: 500;
+							margin-left: auto;
+						}
+	
+						> .item-rate-disc {
+							display: flex;
+							text-align: right;
+							margin-left: var(--margin-md);
+	
+							> .item-disc {
+								color: var(--dark-green-500);
+							}
+	
+							> .item-rate {
+								font-weight: 500;
+								margin-left: var(--margin-md);
+							}
+						}
+					}
+
+					> .grand-total {
+						// font-size: var(--text-lg);
+						font-weight: 700;
+						padding: var(--padding-md);
+					}
+
+					> .payments {
+						font-weight: 700;
+					}
+				}
+
+
+				> .summary-btns {
+					display: flex;
+					justify-content: space-between;
+
+					> .summary-btn {
+						flex: 1;
+						margin: 0px var(--margin-xs);
+					}
+
+					> .new-btn {
+						background-color: var(--blue-500);
+						color:white;
+						font-weight: 500;
+					}
+				}
+			}
+		}
 	}
 }
\ No newline at end of file
diff --git a/erpnext/selling/page/point_of_sale/pos_controller.js b/erpnext/selling/page/point_of_sale/pos_controller.js
index 4875ec0..9a7ddd9 100644
--- a/erpnext/selling/page/point_of_sale/pos_controller.js
+++ b/erpnext/selling/page/point_of_sale/pos_controller.js
@@ -190,7 +190,7 @@
 	}
 
 	toggle_recent_order() {
-		const show = this.recent_order_list.$component.hasClass('d-none');
+		const show = this.recent_order_list.$component.is(':hidden');
 		this.toggle_recent_order_list(show);
 	}
 
diff --git a/erpnext/selling/page/point_of_sale/pos_item_cart.js b/erpnext/selling/page/point_of_sale/pos_item_cart.js
index 867cd2d..9551114 100644
--- a/erpnext/selling/page/point_of_sale/pos_item_cart.js
+++ b/erpnext/selling/page/point_of_sale/pos_item_cart.js
@@ -159,7 +159,7 @@
 		});
 
 		this.$customer_section.on('click', '.customer-display', function(e) {
-			if ($(this).find('.reset-customer-btn').length == 0) return;
+			if ($(e.target).closest('.reset-customer-btn').length) return;
 
 			const show = me.$cart_container.is(':visible');
 			me.toggle_customer_info(show);
@@ -495,20 +495,17 @@
 		if (taxes.length) {
 			const currency = this.events.get_frm().doc.currency;
 			this.$totals_section.find('.taxes-container').css('display', 'flex').html(
-				`<div class="tax-label">
-					<div>Tax Charges</div>
-					<div class="tax-desc">
-					${
-						taxes.map((t, i) => {
-							let margin_left = '';
-							if (i !== 0) margin_left = '10px';
-							const description = /[0-9]+/.test(t.description) ? t.description : `${t.description} @ ${t.rate}%`;
-							return `<span style="margin-left: ${margin_left}">${description}</span>`
-						}).join('')
-					}
-					</div>
-				</div>
-				<div class="">${format_currency(value, currency)}</div>`
+				`${
+					taxes.map((t, i) => {
+						const description = /[0-9]+/.test(t.description) ? t.description : `${t.description} @ ${t.rate}%`;
+						return `<div class="tax-row">
+									<div class="tax-label">
+										${description}
+									</div>
+									<div class="tax-value">${format_currency(value, currency)}</div>
+								</div>`
+					}).join('')
+				}`
 			)
 		} else {
 			this.$totals_section.find('.taxes-container').css('display', 'none').html('');
@@ -926,11 +923,12 @@
 
 			res.forEach(invoice => {
 				const posting_datetime = moment(invoice.posting_date+" "+invoice.posting_time).format("Do MMMM, h:mma");
-				let indicator_color = '';
-
-				if (in_list(['Paid', 'Consolidated'], invoice.status)) (indicator_color = 'green');
-				if (invoice.status === 'Draft') (indicator_color = 'red');
-				if (invoice.status === 'Return') (indicator_color = 'grey');
+				let indicator_color = {
+					'Paid': 'green',
+					'Draft': 'red',
+					'Return': 'gray',
+					'Consolidated': 'blue'
+				};
 
 				transaction_container.append(
 					`<div class="invoice-wrapper" data-invoice-name="${escape(invoice.name)}">
@@ -943,8 +941,9 @@
 								${format_currency(invoice.grand_total, invoice.currency, 0) || 0}
 							</div>
 							<div class="invoice-status">
-								<span class="indicator ${indicator_color}" />
-								${invoice.status}
+								<span class="indicator-pill whitespace-nowrap ${indicator_color[invoice.status]}">
+									<span>${invoice.status}</span>
+								</span>
 							</div>
 						</div>
 					</div>
diff --git a/erpnext/selling/page/point_of_sale/pos_item_selector.js b/erpnext/selling/page/point_of_sale/pos_item_selector.js
index e2a2365..38fe645 100644
--- a/erpnext/selling/page/point_of_sale/pos_item_selector.js
+++ b/erpnext/selling/page/point_of_sale/pos_item_selector.js
@@ -17,7 +17,7 @@
 
 	prepare_dom() {
 		this.wrapper.append(
-			`<section class="pos-card items-selector">
+			`<section class="items-selector">
 				<div class="filter-section">
 					<div class="label">All Items</div>
 					<div class="search-field"></div>
diff --git a/erpnext/selling/page/point_of_sale/pos_past_order_list.js b/erpnext/selling/page/point_of_sale/pos_past_order_list.js
index b256247..166d9cf 100644
--- a/erpnext/selling/page/point_of_sale/pos_past_order_list.js
+++ b/erpnext/selling/page/point_of_sale/pos_past_order_list.js
@@ -14,17 +14,13 @@
 
 	prepare_dom() {
 		this.wrapper.append(
-			`<section class="col-span-4 flex flex-col shadow rounded past-order-list bg-white mx-h-70 h-100 d-none">
-				<div class="flex flex-col rounded w-full scroll-y">
-					<div class="filter-section flex flex-col p-8 pb-2 bg-white sticky z-100">
-						<div class="search-field flex items-center text-grey"></div>
-						<div class="status-field flex items-center text-grey text-bold"></div>
-					</div>
-					<div class="flex flex-1 flex-col p-8 pt-2">
-						<div class="text-grey mb-6">RECENT ORDERS</div>
-						<div class="invoices-container rounded border grid grid-cols-1"></div>					
-					</div>
+			`<section class="past-order-list">
+				<div class="filter-section">
+					<div class="label">Recent Orders</div>
+					<div class="search-field"></div>
+					<div class="status-field"></div>
 				</div>
+				<div class="invoices-container"></div>
 			</section>`
 		);
 
@@ -77,10 +73,6 @@
 		this.status_field.set_value('Draft');
 	}
 
-	toggle_component(show) {
-		show ? this.$component.removeClass('d-none') && this.refresh_list() : this.$component.addClass('d-none');
-	}
-
 	refresh_list() {
 		frappe.dom.freeze();
 		this.events.reset_summary();
@@ -106,23 +98,26 @@
 	get_invoice_html(invoice) {
 		const posting_datetime = moment(invoice.posting_date+" "+invoice.posting_time).format("Do MMMM, h:mma");
 		return (
-			`<div class="invoice-wrapper flex p-4 justify-between border-b-grey pointer no-select" data-invoice-name="${escape(invoice.name)}">
-				<div class="flex flex-col justify-end">
-					<div class="text-dark-grey text-bold overflow-hidden whitespace-nowrap mb-2">${invoice.name}</div>
-					<div class="flex items-center">
-						<div class="flex items-center f-shrink-1 text-dark-grey overflow-hidden whitespace-nowrap">
-							<svg class="mr-2" width="12" height="12" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
-								<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
-							</svg>
-							${invoice.customer}
-						</div>
+			`<div class="invoice-wrapper" data-invoice-name="${escape(invoice.name)}">
+				<div class="invoice-name-date">
+					<div class="invoice-name">${invoice.name}</div>
+					<div class="invoice-date">
+						<svg class="mr-2" width="12" height="12" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+							<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
+						</svg>
+						${invoice.customer}
 					</div>
 				</div>
-				<div class="flex flex-col text-right">
-					<div class="f-shrink-0 text-lg text-dark-grey text-bold ml-4">${format_currency(invoice.grand_total, invoice.currency, 0) || 0}</div>
-					<div class="f-shrink-0 text-grey ml-4">${posting_datetime}</div>
+				<div class="invoice-total-status">
+					<div class="invoice-total">${format_currency(invoice.grand_total, invoice.currency, 0) || 0}</div>
+					<div class="invoice-date">${posting_datetime}</div>
 				</div>
-			</div>`
+			</div>
+			<div class="seperator"></div>`
 		);
 	}
+
+	toggle_component(show) {
+		show ? this.$component.css('display', 'flex') && this.refresh_list() : this.$component.css('display', 'none');
+	}
 };
\ No newline at end of file
diff --git a/erpnext/selling/page/point_of_sale/pos_past_order_summary.js b/erpnext/selling/page/point_of_sale/pos_past_order_summary.js
index 6fd4c26..2e94ece 100644
--- a/erpnext/selling/page/point_of_sale/pos_past_order_summary.js
+++ b/erpnext/selling/page/point_of_sale/pos_past_order_summary.js
@@ -8,85 +8,39 @@
 
 	init_component() {
 		this.prepare_dom();
-		this.init_child_components();
+		this.init_email_print_dialog();
 		this.bind_events();
 		this.attach_shortcuts();
 	}
 
 	prepare_dom() {
 		this.wrapper.append(
-			`<section class="col-span-6 flex flex-col items-center shadow rounded past-order-summary bg-white mx-h-70 h-100 d-none">
-				<div class="no-summary-placeholder flex flex-1 items-center justify-center p-16">
-					<div class="no-item-wrapper flex items-center h-18 pr-4 pl-4">
-						<div class="flex-1 text-center text-grey">Select an invoice to load summary data</div>
-					</div>
+			`<section class="past-order-summary">
+				<div class="no-summary-placeholder">
+					Select an invoice to load summary data
 				</div>
-				<div class="summary-wrapper d-none flex-1 w-66 text-dark-grey relative">
-					<div class="summary-container absolute flex flex-col pt-16 pb-16 pr-8 pl-8 w-full h-full"></div>
+				<div class="invoice-summary-wrapper">
+					<div class="abs-container">
+						<div class="upper-section"></div>
+						<div class="label">Items</div>
+						<div class="items-container summary-container"></div>
+						<div class="label">Totals</div>
+						<div class="totals-container summary-container"></div>
+						<div class="label">Payments</div>
+						<div class="payments-container summary-container"></div>
+						<div class="summary-btns"></div>
+					</div>
 				</div>
 			</section>`
 		);
 
 		this.$component = this.wrapper.find('.past-order-summary');
-		this.$summary_wrapper = this.$component.find('.summary-wrapper');
-		this.$summary_container = this.$component.find('.summary-container');
-	}
-
-	init_child_components() {
-		this.init_upper_section();
-		this.init_items_summary();
-		this.init_totals_summary();
-		this.init_payments_summary();
-		this.init_summary_buttons();
-		this.init_email_print_dialog();
-	}
-
-	init_upper_section() {
-		this.$summary_container.append(
-			`<div class="flex upper-section justify-between w-full h-24"></div>`
-		);
-
+		this.$summary_wrapper = this.$component.find('.invoice-summary-wrapper');
+		this.$summary_container = this.$component.find('.abs-container');
 		this.$upper_section = this.$summary_container.find('.upper-section');
-	}
-
-	init_items_summary() {
-		this.$summary_container.append(
-			`<div class="flex flex-col flex-1 mt-6 w-full scroll-y">
-				<div class="text-grey mb-4 sticky bg-white">ITEMS</div>
-				<div class="items-summary-container border rounded flex flex-col w-full"></div>
-			</div>`
-		);
-
-		this.$items_summary_container = this.$summary_container.find('.items-summary-container');
-	}
-
-	init_totals_summary() {
-		this.$summary_container.append(
-			`<div class="flex flex-col mt-6 w-full f-shrink-0">
-				<div class="text-grey mb-4">TOTALS</div>
-				<div class="summary-totals-container border rounded flex flex-col w-full"></div>
-			</div>`
-		);
-
-		this.$totals_summary_container = this.$summary_container.find('.summary-totals-container');
-	}
-
-	init_payments_summary() {
-		this.$summary_container.append(
-			`<div class="flex flex-col mt-6 w-full f-shrink-0">
-				<div class="text-grey mb-4">PAYMENTS</div>
-				<div class="payments-summary-container border rounded flex flex-col w-full mb-4"></div>
-			</div>`
-		);
-
-		this.$payment_summary_container = this.$summary_container.find('.payments-summary-container');
-	}
-
-	init_summary_buttons() {
-		this.$summary_container.append(
-			`<div class="summary-btns flex summary-btns justify-between w-full f-shrink-0"></div>`
-		);
-
+		this.$items_container = this.$summary_container.find('.items-container');
+		this.$totals_container = this.$summary_container.find('.totals-container');
+		this.$payment_container = this.$summary_container.find('.payments-container');
 		this.$summary_btns = this.$summary_container.find('.summary-btns');
 	}
 
@@ -121,132 +75,88 @@
 	}
 
 	get_upper_section_html(doc) {
-		const { status } = doc; let indicator_color = '';
+		const { status } = doc;
+		let indicator_color = '';
 
 		in_list(['Paid', 'Consolidated'], status) && (indicator_color = 'green');
 		status === 'Draft' && (indicator_color = 'red');
 		status === 'Return' && (indicator_color = 'grey');
 
-		return `<div class="flex flex-col items-start justify-end pr-4">
-					<div class="text-lg text-bold pt-2">${doc.customer}</div>
-					<div class="text-grey">${this.customer_email}</div>
-					<div class="text-grey mt-auto">Sold by: ${doc.owner}</div>
+		return `<div class="left-section">
+					<div class="customer-name">${doc.customer}</div>
+					<div class="customer-email">${this.customer_email}</div>
+					<div class="cashier">Sold by: ${doc.owner}</div>
 				</div>
-				<div class="flex flex-col flex-1 items-end justify-between">
-					<div class="text-2-5xl text-bold">${format_currency(doc.paid_amount, doc.currency)}</div>
-					<div class="flex justify-between">
-						<div class="text-grey mr-4">${doc.name}</div>
-						<div class="text-grey text-bold indicator ${indicator_color}">${doc.status}</div>
-					</div>
+				<div class="right-section">
+					<div class="paid-amount">${format_currency(doc.paid_amount, doc.currency)}</div>
+					<div class="invoice-name">${doc.name}</div>
+					<span class="indicator-pill whitespace-nowrap ${indicator_color}"><span>${doc.status}</span></span>
 				</div>`;
 	}
 
+	get_item_html(doc, item_data) {
+		return `<div class="item-row-wrapper">
+					<div class="item-name">${item_data.item_name}</div>
+					<div class="item-qty">${item_data.qty || 0}</div>
+					<div class="item-rate-disc">${get_rate_discount_html()}</div>
+				</div>`;
+
+		function get_rate_discount_html() {
+			if (item_data.rate && item_data.price_list_rate && item_data.rate !== item_data.price_list_rate) {
+				return `<span class="item-disc">(${item_data.discount_percentage}% off)</span>
+						<div class="item-rate">${format_currency(item_data.rate, doc.currency)}</div>`;
+			} else {
+				return `<div class="item-rate">${format_currency(item_data.price_list_rate || item_data.rate, doc.currency)}</div>`;
+			}
+		}
+	}
+
 	get_discount_html(doc) {
 		if (doc.discount_amount) {
-			return `<div class="total-summary-wrapper flex items-center h-12 pr-4 pl-4 pointer border-b-grey no-select">
-					<div class="flex f-shrink-1 items-center">
-						<div class="text-md-0 text-dark-grey text-bold overflow-hidden whitespace-nowrap  mr-2">
-							Discount
-						</div>
-						<span class="text-grey">(${doc.additional_discount_percentage} %)</span>
-					</div>
-					<div class="flex flex-col f-shrink-0 ml-auto text-right">
-						<div class="text-md-0 text-dark-grey text-bold">${format_currency(doc.discount_amount, doc.currency)}</div>
-					</div>
-				</div>`;
+			return `<div class="summary-row-wrapper">
+						<div>Discount (${doc.additional_discount_percentage} %)</div>
+						<div>${format_currency(doc.discount_amount, doc.currency)}</div>
+					</div>`;
 		} else {
 			return ``;
 		}
 	}
 
 	get_net_total_html(doc) {
-		return `<div class="total-summary-wrapper flex items-center h-12 pr-4 pl-4 pointer border-b-grey no-select">
-					<div class="flex f-shrink-1 items-center">
-						<div class="text-md-0 text-dark-grey text-bold overflow-hidden whitespace-nowrap">
-							Net Total
-						</div>
-					</div>
-					<div class="flex flex-col f-shrink-0 ml-auto text-right">
-						<div class="text-md-0 text-dark-grey text-bold">${format_currency(doc.net_total, doc.currency)}</div>
-					</div>
+		return `<div class="summary-row-wrapper">
+					<div>Net Total</div>
+					<div>${format_currency(doc.net_total, doc.currency)}</div>
 				</div>`;
 	}
 
 	get_taxes_html(doc) {
-		const taxes = doc.taxes.map((t, i) => {
-			let margin_left = '';
-			if (i !== 0) margin_left = 'ml-2';
-			return `<span class="pl-2 pr-2 ${margin_left}">${t.description} @${t.rate}%</span>`;
-		}).join('');
+		if (!doc.taxes.length) return '';
 
 		return `
-			<div class="total-summary-wrapper flex items-center justify-between h-12 pr-4 pl-4 border-b-grey">
-				<div class="flex">
-					<div class="text-md-0 text-dark-grey text-bold w-fit">Tax Charges</div>
-					<div class="flex ml-6 text-dark-grey">${taxes}</div>
-				</div>
-				<div class="flex flex-col text-right">
-					<div class="text-md-0 text-dark-grey text-bold">
-						${format_currency(doc.base_total_taxes_and_charges, doc.currency)}
-					</div>
-				</div>
+			<div class="taxes-wrapper">
+				${
+					doc.taxes.map((t, i) => {
+						const description = /[0-9]+/.test(t.description) ? t.description : `${t.description} @ ${t.rate}%`;
+						return `<div class="tax-row">
+									<div class="tax-label">${description}</div>
+									<div class="tax-value">${format_currency(t.tax_amount_after_discount_amount, doc.currency)}</div>
+								</div>`
+					}).join('')
+				}
 			</div>`;
 	}
 
 	get_grand_total_html(doc) {
-		return `<div class="total-summary-wrapper flex items-center h-12 pr-4 pl-4 pointer border-b-grey no-select">
-					<div class="flex f-shrink-1 items-center">
-						<div class="text-md-0 text-dark-grey text-bold overflow-hidden whitespace-nowrap">
-							Grand Total
-						</div>
-					</div>
-					<div class="flex flex-col f-shrink-0 ml-auto text-right">
-						<div class="text-md-0 text-dark-grey text-bold">${format_currency(doc.grand_total, doc.currency)}</div>
-					</div>
+		return `<div class="summary-row-wrapper grand-total">
+					<div>Grand Total</div>
+					<div>${format_currency(doc.grand_total, doc.currency)}</div>
 				</div>`;
 	}
 
-	get_item_html(doc, item_data) {
-		return `<div class="item-summary-wrapper flex items-center h-12 pr-4 pl-4 border-b-grey pointer no-select">
-					<div class="flex w-6 h-6 rounded bg-light-grey mr-4 items-center justify-center font-bold f-shrink-0">
-						<span>${item_data.qty || 0}</span>
-					</div>
-					<div class="flex flex-col f-shrink-1">
-						<div class="text-md text-dark-grey text-bold overflow-hidden whitespace-nowrap">
-							${item_data.item_name}
-						</div>
-					</div>
-					<div class="flex f-shrink-0 ml-auto text-right">
-						${get_rate_discount_html()}
-					</div>
-				</div>`;
-
-		function get_rate_discount_html() {
-			if (item_data.rate && item_data.price_list_rate && item_data.rate !== item_data.price_list_rate) {
-				return `<span class="text-grey mr-2">
-							(${item_data.discount_percentage}% off)
-						</span>
-						<div class="text-md-0 text-dark-grey text-bold">
-							${format_currency(item_data.rate, doc.currency)}
-						</div>`;
-			} else {
-				return `<div class="text-md-0 text-dark-grey text-bold">
-							${format_currency(item_data.price_list_rate || item_data.rate, doc.currency)}
-						</div>`;
-			}
-		}
-	}
-
 	get_payment_html(doc, payment) {
-		return `<div class="payment-summary-wrapper flex items-center h-12 pr-4 pl-4 pointer border-b-grey no-select">
-					<div class="flex f-shrink-1 items-center">
-						<div class="text-md-0 text-dark-grey text-bold overflow-hidden whitespace-nowrap">
-							${payment.mode_of_payment}
-						</div>
-					</div>
-					<div class="flex flex-col f-shrink-0 ml-auto text-right">
-						<div class="text-md-0 text-dark-grey text-bold">${format_currency(payment.amount, doc.currency)}</div>
-					</div>
+		return `<div class="summary-row-wrapper payments">
+					<div>${payment.mode_of_payment}</div>
+					<div>${format_currency(payment.amount, doc.currency)}</div>
 				</div>`;
 	}
 
@@ -254,22 +164,22 @@
 		this.$summary_container.on('click', '.return-btn', () => {
 			this.events.process_return(this.doc.name);
 			this.toggle_component(false);
-			this.$component.find('.no-summary-placeholder').removeClass('d-none');
-			this.$summary_wrapper.addClass('d-none');
+			this.$component.find('.no-summary-placeholder').css('display', 'flex');
+			this.$summary_wrapper.css('display', 'none');
 		});
 
 		this.$summary_container.on('click', '.edit-btn', () => {
 			this.events.edit_order(this.doc.name);
 			this.toggle_component(false);
-			this.$component.find('.no-summary-placeholder').removeClass('d-none');
-			this.$summary_wrapper.addClass('d-none');
+			this.$component.find('.no-summary-placeholder').css('display', 'flex');
+			this.$summary_wrapper.css('display', 'none');
 		});
 
 		this.$summary_container.on('click', '.new-btn', () => {
 			this.events.new_order();
 			this.toggle_component(false);
-			this.$component.find('.no-summary-placeholder').removeClass('d-none');
-			this.$summary_wrapper.addClass('d-none');
+			this.$component.find('.no-summary-placeholder').css('display', 'flex');
+			this.$summary_wrapper.css('display', 'none');
 		});
 
 		this.$summary_container.on('click', '.email-btn', () => {
@@ -312,10 +222,6 @@
 		});
 	}
 
-	toggle_component(show) {
-		show ? this.$component.removeClass('d-none') : this.$component.addClass('d-none');
-	}
-
 	send_email() {
 		const frm = this.events.get_frm();
 		const recipients = this.email_dialog.get_values().recipients;
@@ -338,8 +244,10 @@
 				if(!r.exc) {
 					frappe.utils.play_sound("email");
 					if(r.message["emails_not_sent_to"]) {
-						frappe.msgprint(__("Email not sent to {0} (unsubscribed / disabled)",
-							[ frappe.utils.escape_html(r.message["emails_not_sent_to"]) ]) );
+						frappe.msgprint(__(
+							"Email not sent to {0} (unsubscribed / disabled)", 
+							[ frappe.utils.escape_html(r.message["emails_not_sent_to"]) ]
+						));
 					} else {
 						frappe.show_alert({
 							message: __('Email sent successfully.'),
@@ -361,9 +269,7 @@
 				m.visible_btns.forEach(b => {
 					const class_name = b.split(' ')[0].toLowerCase();
 					this.$summary_btns.append(
-						`<div class="${class_name}-btn border rounded h-14 flex flex-1 items-center mr-4 justify-center text-md text-bold no-select pointer">
-							${b}
-						</div>`
+						`<div class="summary-btn btn btn-default ${class_name}-btn">${b}</div>`
 					);
 				});
 			}
@@ -372,28 +278,20 @@
 	}
 
 	show_summary_placeholder() {
-		this.$summary_wrapper.addClass("d-none");
-		this.$component.find('.no-summary-placeholder').removeClass('d-none');
+		this.$summary_wrapper.css('display', 'none');
+		this.$component.find('.no-summary-placeholder').css('display', 'flex');
 	}
 
 	switch_to_post_submit_summary() {
-		// switch to full width view
-		this.$component.removeClass('col-span-6').addClass('col-span-10');
-		this.$summary_wrapper.removeClass('w-66').addClass('w-40');
-
 		// switch place holder with summary container
-		this.$component.find('.no-summary-placeholder').addClass('d-none');
-		this.$summary_wrapper.removeClass('d-none');
+		this.$component.find('.no-summary-placeholder').css('display', 'none');
+		this.$summary_wrapper.css('display', 'flex');
 	}
 
 	switch_to_recent_invoice_summary() {
-		// switch full width view with 60% view
-		this.$component.removeClass('col-span-10').addClass('col-span-6');
-		this.$summary_wrapper.removeClass('w-40').addClass('w-66');
-
 		// switch place holder with summary container
-		this.$component.find('.no-summary-placeholder').addClass('d-none');
-		this.$summary_wrapper.removeClass('d-none');
+		this.$component.find('.no-summary-placeholder').css('display', 'none');
+		this.$summary_wrapper.css('display', 'flex');
 	}
 
 	get_condition_btn_map(after_submission) {
@@ -410,8 +308,8 @@
 	load_summary_of(doc, after_submission=false) {
 		this.$summary_wrapper.removeClass("d-none");
 
-		after_submission ?
-			this.switch_to_post_submit_summary() : this.switch_to_recent_invoice_summary();
+		// after_submission ?
+		// 	this.switch_to_post_submit_summary() : this.switch_to_recent_invoice_summary();
 
 		this.doc = doc;
 
@@ -437,19 +335,19 @@
 	}
 
 	attach_items_info(doc) {
-		this.$items_summary_container.html('');
-		doc.items.forEach(item => {
+		this.$items_container.html('');
+		doc.items.forEach((item, i) => {
 			const item_dom = this.get_item_html(doc, item);
-			this.$items_summary_container.append(item_dom);
+			this.$items_container.append(item_dom);
 		});
 	}
 
 	attach_payments_info(doc) {
-		this.$payment_summary_container.html('');
+		this.$payment_container.html('');
 		doc.payments.forEach(p => {
 			if (p.amount) {
 				const payment_dom = this.get_payment_html(doc, p);
-				this.$payment_summary_container.append(payment_dom);
+				this.$payment_container.append(payment_dom);
 			}
 		});
 		if (doc.redeem_loyalty_points && doc.loyalty_amount) {
@@ -457,20 +355,24 @@
 				mode_of_payment: 'Loyalty Points',
 				amount: doc.loyalty_amount,
 			});
-			this.$payment_summary_container.append(payment_dom);
+			this.$payment_container.append(payment_dom);
 		}
 	}
 
 	attach_totals_info(doc) {
-		this.$totals_summary_container.html('');
+		this.$totals_container.html('');
 
-		const discount_dom = this.get_discount_html(doc);
 		const net_total_dom = this.get_net_total_html(doc);
 		const taxes_dom = this.get_taxes_html(doc);
+		const discount_dom = this.get_discount_html(doc);
 		const grand_total_dom = this.get_grand_total_html(doc);
-		this.$totals_summary_container.append(discount_dom);
-		this.$totals_summary_container.append(net_total_dom);
-		this.$totals_summary_container.append(taxes_dom);
-		this.$totals_summary_container.append(grand_total_dom);
+		this.$totals_container.append(net_total_dom);
+		this.$totals_container.append(taxes_dom);
+		this.$totals_container.append(discount_dom);
+		this.$totals_container.append(grand_total_dom);
+	}
+
+	toggle_component(show) {
+		show ? this.$component.css('display', 'flex') : this.$component.css('display', 'none');
 	}
 };
\ No newline at end of file