diff --git a/dashboard/package.json b/dashboard/package.json
index 8ae69872a3..8ef257b974 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -42,7 +42,7 @@
 		"socket.io-client": "^4.5.1",
 		"unplugin-icons": "^0.17.0",
 		"unplugin-vue-components": "^0.25.2",
-		"vue": "^3.3.4",
+		"vue": "^3.4.12",
 		"vue-codemirror": "^6.1.1",
 		"vue-echarts": "^6.6.1",
 		"vue-qrcode": "^2.2.2",
diff --git a/dashboard/src2/App.vue b/dashboard/src2/App.vue
index 0634200d06..ddd9694055 100644
--- a/dashboard/src2/App.vue
+++ b/dashboard/src2/App.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script setup>
-import { defineAsyncComponent, computed, watch, ref } from 'vue';
+import { defineAsyncComponent, computed, watch, ref, provide } from 'vue';
 import { Toaster } from 'vue-sonner';
 import { dialogs } from './utils/components';
 import { useRoute } from 'vue-router';
@@ -45,10 +45,10 @@ const MobileNav = defineAsyncComponent(() =>
 );
 
 const route = useRoute();
+const team = getTeam();
 
 const isHideSidebar = computed(() => {
 	if (!session.user) return false;
-	const team = getTeam();
 	return (
 		route.name == 'Welcome' && session.user && team?.doc?.hide_sidebar === true
 	);
@@ -62,6 +62,8 @@ watch(
 		isSaaSFlow.value = window.location.pathname.startsWith('/dashboard/saas');
 	}
 );
+
+provide('team', team);
 </script>
 
 <style src="../src/assets/style.css"></style>
diff --git a/dashboard/src2/components/BuyPrepaidCreditsDialog.vue b/dashboard/src2/components/BuyPrepaidCreditsDialog.vue
deleted file mode 100644
index 2035667130..0000000000
--- a/dashboard/src2/components/BuyPrepaidCreditsDialog.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-	<Dialog :options="{ title: title }" v-model="showDialog">
-		<template v-slot:body-content>
-			<BuyPrepaidCreditsForm
-				@success="onSuccess"
-				:minimumAmount="minimumAmount"
-				:modelValue="modelValue"
-			/>
-		</template>
-	</Dialog>
-</template>
-<script>
-import BuyPrepaidCreditsForm from './BuyPrepaidCreditsForm.vue';
-
-export default {
-	name: 'BuyPrepaidCreditsDialog',
-	components: {
-		BuyPrepaidCreditsForm
-	},
-	props: {
-		minimumAmount: {
-			type: Number,
-			default: 0
-		},
-		title: {
-			type: String,
-			default: 'Add credits to your account'
-		}
-	},
-	emits: ['update:modelValue', 'success'],
-	methods: {
-		onSuccess() {
-			this.$emit('success');
-		},
-		onCancel() {
-			this.showDialog = false;
-		}
-	},
-	computed: {
-		totalAmount() {
-			let creditsToBuy = this.creditsToBuy || 0;
-			if (this.$team.doc.currency === 'INR') {
-				return (
-					creditsToBuy +
-					creditsToBuy * (this.$team.doc.billing_info.gst_percentage || 0)
-				).toFixed(2);
-			} else {
-				return creditsToBuy;
-			}
-		},
-		showDialog: {
-			get() {
-				return this.modelValue;
-			},
-			set(value) {
-				this.$emit('update:modelValue', value);
-			}
-		}
-	}
-};
-</script>
diff --git a/dashboard/src2/components/ChangePaymentModeDialog.vue b/dashboard/src2/components/ChangePaymentModeDialog.vue
deleted file mode 100644
index 8f256ee497..0000000000
--- a/dashboard/src2/components/ChangePaymentModeDialog.vue
+++ /dev/null
@@ -1,146 +0,0 @@
-<template>
-	<Dialog
-		:options="{
-			title: 'Change Payment Mode',
-			actions: [
-				{
-					label: 'Change',
-					variant: 'solid',
-					loading: $resources.changePaymentMode.loading,
-					onClick: () => $resources.changePaymentMode.submit()
-				}
-			]
-		}"
-		:modelValue="modelValue"
-		@update:modelValue="$emit('update:modelValue', $event)"
-	>
-		<template #body-content>
-			<FormControl
-				label="Select Payment Mode"
-				type="select"
-				:options="paymentModeOptions"
-				v-model="paymentMode"
-			/>
-			<p class="mb-5 mt-2 text-base text-gray-600">
-				{{ paymentModeDescription }}
-			</p>
-			<ErrorMessage
-				class="mt-2"
-				:message="$resources.changePaymentMode.error"
-			/>
-		</template>
-	</Dialog>
-	<NewBillingInformationDialog
-		v-model="showBillingInformationDialog"
-		v-if="showBillingInformationDialog"
-	/>
-	<BuyPrepaidCreditsDialog
-		v-if="showPrepaidCreditsDialog"
-		v-model="showPrepaidCreditsDialog"
-		:minimumAmount="$team.doc.currency == 'INR' ? 800 : 10"
-		@success="
-			() => {
-				$resources.upcomingInvoice.reload();
-				showPrepaidCreditsDialog = false;
-			}
-		"
-	/>
-</template>
-<script>
-import { defineAsyncComponent, h } from 'vue';
-import { DashboardError } from '../utils/error';
-import NewBillingInformationDialog from './billing/BillingInformationDialog.vue';
-import { renderDialog } from '../utils/components';
-
-export default {
-	name: 'ChangePaymentModeDialog',
-	props: ['modelValue'],
-	emits: ['update:modelValue'],
-	components: {
-		NewBillingInformationDialog,
-		BuyPrepaidCreditsDialog: defineAsyncComponent(() =>
-			import('../components/BuyPrepaidCreditsDialog.vue')
-		),
-		PrepaidCreditsDialog: defineAsyncComponent(() =>
-			import('@/components/PrepaidCreditsDialog.vue')
-		)
-	},
-	data() {
-		return {
-			showBillingInformationDialog: false,
-			showPrepaidCreditsDialog: false,
-			paymentMode: this.$team.doc.payment_mode
-		};
-	},
-	watch: {
-		show(value) {
-			if (!value) {
-				this.paymentMode = this.$team.doc.payment_mode;
-			}
-		}
-	},
-	resources: {
-		changePaymentMode() {
-			return {
-				url: 'press.api.billing.change_payment_mode',
-				params: {
-					mode: this.paymentMode
-				},
-				onSuccess(data) {
-					if (data && data == 'Unpaid Invoices') {
-						const finalizeInvoicesDialog = defineAsyncComponent(() =>
-							import('./billing/FinalizeInvoicesDialog.vue')
-						);
-						renderDialog(h(finalizeInvoicesDialog));
-					} else {
-						this.$emit('update:modelValue', false);
-						this.$resources.changePaymentMode.reset();
-						this.$team.reload();
-					}
-				},
-				validate() {
-					if (
-						this.paymentMode == 'Card' &&
-						!this.$team.doc.default_payment_method
-					) {
-						this.$emit('update:modelValue', false);
-						this.showBillingInformationDialog = true;
-					}
-
-					if (
-						this.paymentMode == 'Prepaid Credits' &&
-						this.$team.doc.balance === 0
-					) {
-						this.$emit('update:modelValue', false);
-						this.showPrepaidCreditsDialog = true;
-					}
-
-					if (
-						this.paymentMode == 'Paid By Partner' &&
-						!this.$team.doc.partner_email
-					) {
-						throw new DashboardError(
-							'Please add a partner first from Partner section'
-						);
-					}
-				}
-			};
-		}
-	},
-	computed: {
-		paymentModeDescription() {
-			return {
-				Card: `Your card will be charged for monthly subscription`,
-				'Prepaid Credits': `You will be charged from your account balance for monthly subscription`,
-				'Paid By Partner': `Your partner will be charged for monthly subscription`
-			}[this.paymentMode];
-		},
-		paymentModeOptions() {
-			if (this.$team.doc.erpnext_partner) {
-				return ['Card', 'Prepaid Credits'];
-			}
-			return ['Card', 'Prepaid Credits', 'Paid By Partner'];
-		}
-	}
-};
-</script>
diff --git a/dashboard/src2/components/billing/AddCardDialog.vue b/dashboard/src2/components/billing/AddCardDialog.vue
new file mode 100644
index 0000000000..8c7b6d739c
--- /dev/null
+++ b/dashboard/src2/components/billing/AddCardDialog.vue
@@ -0,0 +1,35 @@
+<template>
+	<Dialog v-model="show" :options="{ title: 'Add new card' }">
+		<template #body-content>
+			<div
+				v-if="showMessage"
+				class="mb-5 inline-flex gap-1.5 text-base text-gray-700"
+			>
+				<FeatherIcon class="h-4" name="info" />
+				<span> Add at least one card before changing the payment mode. </span>
+			</div>
+			<CardForm
+				@success="
+					() => {
+						show = false;
+						emit('success');
+					}
+				"
+			/>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import CardForm from './CardForm.vue';
+import { Dialog, FeatherIcon } from 'frappe-ui';
+
+const props = defineProps({
+	showMessage: {
+		type: Boolean,
+		default: false
+	}
+});
+
+const emit = defineEmits(['success']);
+const show = defineModel();
+</script>
diff --git a/dashboard/src2/components/billing/AddPrepaidCreditsDialog.vue b/dashboard/src2/components/billing/AddPrepaidCreditsDialog.vue
new file mode 100644
index 0000000000..50ae196326
--- /dev/null
+++ b/dashboard/src2/components/billing/AddPrepaidCreditsDialog.vue
@@ -0,0 +1,37 @@
+<template>
+	<Dialog v-model="show" :options="{ title: 'Add Credit Balance' }">
+		<template #body-content>
+			<div
+				v-if="showMessage"
+				class="mb-5 inline-flex gap-1.5 text-base text-gray-700"
+			>
+				<FeatherIcon class="h-4" name="info" />
+				<span>
+					Add credits to your account before changing the payment mode.
+				</span>
+			</div>
+			<PrepaidCreditsForm
+				@success="
+					() => {
+						show = false;
+						emit('success');
+					}
+				"
+			/>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import PrepaidCreditsForm from './PrepaidCreditsForm.vue';
+import { Dialog, FeatherIcon } from 'frappe-ui';
+
+const props = defineProps({
+	showMessage: {
+		type: Boolean,
+		default: false
+	}
+});
+
+const emit = defineEmits(['success']);
+const show = defineModel();
+</script>
diff --git a/dashboard/src2/components/billing/BillingDetails.vue b/dashboard/src2/components/billing/BillingDetails.vue
new file mode 100644
index 0000000000..6ae7d0b6de
--- /dev/null
+++ b/dashboard/src2/components/billing/BillingDetails.vue
@@ -0,0 +1,71 @@
+<template>
+	<div class="flex flex-col gap-5">
+		<FormControl
+			v-model="billingInformation.billing_name"
+			type="text"
+			name="billing_name"
+			label="Billing Name"
+			:required="true"
+		/>
+		<NewAddressForm
+			ref="addressFormRef"
+			v-model="billingInformation"
+			@success="() => emit('success')"
+		/>
+		<ErrorMessage class="mt-2" :message="errorMessage" />
+	</div>
+	<div v-if="addressFormRef" class="mt-6">
+		<Button
+			class="w-full"
+			variant="solid"
+			label="Update billing details"
+			:loading="addressFormRef.updateBillingInformation.loading"
+			@click="updateBillingInformation"
+		/>
+	</div>
+</template>
+<script setup>
+import NewAddressForm from './NewAddressForm.vue';
+import { FormControl, ErrorMessage, Button, createResource } from 'frappe-ui';
+import { reactive, ref } from 'vue';
+
+const emit = defineEmits(['success']);
+
+const addressFormRef = ref(null);
+
+const billingInformation = reactive({
+	billing_name: '',
+	address: '',
+	city: '',
+	state: '',
+	postal_code: '',
+	country: '',
+	gstin: ''
+});
+
+createResource({
+	url: 'press.api.account.get_billing_information',
+	auto: true,
+	onSuccess: data => {
+		Object.assign(billingInformation, {
+			address: data.address_line1,
+			city: data.city,
+			state: data.state,
+			postal_code: data.pincode,
+			country: data.country,
+			gstin: data.gstin == 'Not Applicable' ? '' : data.gstin,
+			billing_name: data.billing_name
+		});
+	}
+});
+
+const errorMessage = ref('');
+
+function updateBillingInformation() {
+	if (!billingInformation.billing_name) {
+		errorMessage.value = 'Billing Name is required';
+		return;
+	}
+	addressFormRef.value.updateBillingInformation.submit();
+}
+</script>
diff --git a/dashboard/src2/components/billing/BillingDetailsDialog.vue b/dashboard/src2/components/billing/BillingDetailsDialog.vue
new file mode 100644
index 0000000000..ba701db341
--- /dev/null
+++ b/dashboard/src2/components/billing/BillingDetailsDialog.vue
@@ -0,0 +1,37 @@
+<template>
+	<Dialog v-model="show" :options="{ title: 'Billing Details' }">
+		<template #body-content>
+			<div
+				v-if="showMessage"
+				class="mb-5 inline-flex gap-1.5 text-base text-gray-700"
+			>
+				<FeatherIcon class="h-4" name="info" />
+				<span> Add billing details to your account before proceeding.</span>
+			</div>
+			<BillingDetails
+				ref="billingRef"
+				@success="
+					() => {
+						show = false;
+						emit('success');
+					}
+				"
+			/>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import BillingDetails from './BillingDetails.vue';
+import { FeatherIcon, Dialog } from 'frappe-ui';
+import { ref } from 'vue';
+
+const props = defineProps({
+	showMessage: {
+		type: Boolean,
+		default: false
+	}
+});
+const emit = defineEmits(['success']);
+const show = defineModel();
+const billingRef = ref(null);
+</script>
diff --git a/dashboard/src2/components/billing/BillingInformationDialog.vue b/dashboard/src2/components/billing/BillingInformationDialog.vue
deleted file mode 100644
index 6fab459372..0000000000
--- a/dashboard/src2/components/billing/BillingInformationDialog.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-	<Dialog :options="{ title: 'Add card to create sites' }" v-model="showDialog">
-		<template v-slot:body-content>
-			<StripeCard2
-				class="mb-1"
-				@complete="
-					showDialog = false;
-					$emit('success');
-				"
-			/>
-		</template>
-	</Dialog>
-</template>
-<script>
-import StripeCard2 from '../StripeCard.vue';
-
-export default {
-	props: ['modelValue'],
-	emits: ['update:modelValue', 'success'],
-	components: {
-		StripeCard2
-	},
-	computed: {
-		showDialog: {
-			get() {
-				return this.modelValue;
-			},
-			set(value) {
-				this.$emit('update:modelValue', value);
-			}
-		}
-	}
-};
-</script>
diff --git a/dashboard/src2/components/billing/BillingSummary.vue b/dashboard/src2/components/billing/BillingSummary.vue
new file mode 100644
index 0000000000..50b334faaa
--- /dev/null
+++ b/dashboard/src2/components/billing/BillingSummary.vue
@@ -0,0 +1,123 @@
+<template>
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-col rounded-lg text-base text-gray-900 shadow">
+			<div class="flex flex-col gap-2.5 px-4 py-3">
+				<div class="flex items-center justify-between">
+					<div class="flex flex-col gap-1.5">
+						<div class="text-lg font-semibold">Recurring Charges</div>
+						<div class="text-gray-700">
+							<span>Next charge date — </span>
+							<span>{{ currentMonthEnd() }}</span>
+						</div>
+					</div>
+				</div>
+				<div class="flex items-center justify-between">
+					<div class="flex gap-2 text-gray-700">
+						<i-lucide-credit-card class="h-4 w-4" />
+						<div>
+							<span>Current billing amount so far is </span>
+							<span class="font-medium text-gray-900">
+								{{ currency }} {{ currentBillingAmount?.toFixed(2) || '0.00' }}
+							</span>
+						</div>
+					</div>
+					<div>
+						<Button label="View Invoice" @click="showInvoiceDialog = true" />
+					</div>
+				</div>
+			</div>
+			<div
+				v-if="unpaidAmount.data"
+				class="m-1.5 flex items-center justify-between rounded-lg bg-gray-50 px-2.5 py-2"
+			>
+				<div class="flex h-7 items-center gap-2 text-gray-800">
+					<i-lucide-receipt class="h-4 w-4" />
+					<div>
+						<span>Unpaid amount is </span>
+						<span>{{ currency }} {{ unpaidAmount.data?.toFixed(2) }}</span>
+					</div>
+				</div>
+				<div>
+					<Button variant="solid" label="Pay now" @click="payNow" />
+				</div>
+			</div>
+		</div>
+		<AddPrepaidCreditsDialog
+			v-if="showAddPrepaidCreditsDialog"
+			v-model="showAddPrepaidCreditsDialog"
+			@success="upcomingInvoice.reload()"
+		/>
+		<UpcomingInvoiceDialog v-model="showInvoiceDialog" />
+	</div>
+</template>
+<script setup>
+import AddPrepaidCreditsDialog from './AddPrepaidCreditsDialog.vue';
+import UpcomingInvoiceDialog from './UpcomingInvoiceDialog.vue';
+import { Button, createResource } from 'frappe-ui';
+import { ref, computed, inject } from 'vue';
+import { confirmDialog } from '../../utils/components';
+import router from '../../router';
+
+const team = inject('team');
+const { currentBillingAmount, upcomingInvoice, unpaidInvoices } =
+	inject('billing');
+
+const showAddPrepaidCreditsDialog = ref(false);
+const showInvoiceDialog = ref(false);
+
+const currency = computed(() => (team.doc.currency == 'INR' ? '₹' : '$'));
+
+const unpaidAmount = createResource({
+	url: 'press.api.billing.total_unpaid_amount',
+	cache: 'unpaidAmount',
+	auto: true
+});
+
+const currentMonthEnd = () => {
+	const date = new Date();
+	const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+	return lastDay.toLocaleDateString('en-US', {
+		day: 'numeric',
+		month: 'short',
+		year: 'numeric'
+	});
+};
+
+function payNow() {
+	team.doc.payment_mode == 'Prepaid Credits'
+		? (showAddPrepaidCreditsDialog.value = true)
+		: payUnpaidInvoices();
+}
+
+function payUnpaidInvoices() {
+	let _unpaidInvoices = unpaidInvoices.data;
+	if (_unpaidInvoices.length > 1) {
+		if (team.doc.payment_mode === 'Prepaid Credits') {
+			showAddPrepaidCreditsDialog.value = true;
+		} else {
+			confirmDialog({
+				title: 'Multiple unpaid invoices',
+				message:
+					'You have multiple unpaid invoices. Please pay them from the invoices page',
+				primaryAction: {
+					label: 'Go to invoices',
+					variant: 'solid',
+					onClick: ({ hide }) => {
+						router.push({ name: 'BillingInvoices' });
+						hide();
+					}
+				}
+			});
+		}
+	} else {
+		let invoice = _unpaidInvoices;
+		if (invoice.stripe_invoice_url && team.doc.payment_mode === 'Card') {
+			window.open(
+				`/api/method/press.api.client.run_doc_method?dt=Invoice&dn=${invoice.name}&method=stripe_payment_url`
+			);
+		} else {
+			showAddPrepaidCreditsDialog.value = true;
+		}
+	}
+}
+</script>
diff --git a/dashboard/src2/components/billing/BuyCreditsRazorpay.vue b/dashboard/src2/components/billing/BuyCreditsRazorpay.vue
new file mode 100644
index 0000000000..0f23c0f86b
--- /dev/null
+++ b/dashboard/src2/components/billing/BuyCreditsRazorpay.vue
@@ -0,0 +1,124 @@
+<template>
+	<div>
+		<span
+			v-if="team.doc.currency === 'INR'"
+			class="mt-2.5 inline-flex gap-2 text-base text-gray-700"
+		>
+			<FeatherIcon name="info" class="my-1 h-4" />
+			<span class="leading-5">
+				If you select Razorpay, you can pay using Credit Card, Debit Card, Net
+				Banking, UPI, Wallets, etc. If you are using Net Banking, it may take
+				upto 5 days for balance to reflect.
+			</span>
+		</span>
+		<ErrorMessage class="mt-3" :message="createRazorpayOrder.error" />
+		<div class="mt-8">
+			<Button
+				v-if="!isPaymentComplete"
+				class="w-full"
+				size="md"
+				variant="solid"
+				label="Proceed to payment using Razorpay"
+				:loading="createRazorpayOrder.loading"
+				@click="createRazorpayOrder.submit()"
+			/>
+			<Button
+				v-else
+				class="w-full"
+				size="md"
+				label="Confirming payment"
+				variant="solid"
+				:loading="isVerifyingPayment"
+			/>
+		</div>
+	</div>
+</template>
+<script setup>
+import { Button, ErrorMessage, FeatherIcon, createResource } from 'frappe-ui';
+import { ref, onMounted, onBeforeUnmount, inject } from 'vue';
+import { toast } from 'vue-sonner';
+import { DashboardError } from '../../utils/error';
+
+const props = defineProps({
+	amount: {
+		type: Number,
+		default: 0
+	},
+	minimumAmount: {
+		type: Number,
+		default: 0
+	}
+});
+
+const emit = defineEmits(['success']);
+const team = inject('team');
+
+const isPaymentComplete = ref(false);
+const isVerifyingPayment = ref(false);
+
+const razorpayCheckoutJS = ref(null);
+
+onMounted(() => {
+	razorpayCheckoutJS.value = document.createElement('script');
+	razorpayCheckoutJS.value.setAttribute(
+		'src',
+		'https://checkout.razorpay.com/v1/checkout.js'
+	);
+	razorpayCheckoutJS.value.async = true;
+	document.head.appendChild(razorpayCheckoutJS.value);
+});
+
+onBeforeUnmount(() => {
+	razorpayCheckoutJS.value?.remove();
+});
+
+const createRazorpayOrder = createResource({
+	url: 'press.api.billing.create_razorpay_order',
+	params: { amount: props.amount },
+	onSuccess: data => processOrder(data),
+	validate: () => {
+		if (props.amount < props.minimumAmount) {
+			throw new DashboardError('Amount less than minimum amount required');
+		}
+	}
+});
+
+const handlePaymentFailed = createResource({
+	url: 'press.api.billing.handle_razorpay_payment_failed',
+	onSuccess: () => {
+		console.log('Payment Failed.');
+	}
+});
+
+function processOrder(data) {
+	const options = {
+		key: data.key_id,
+		order_id: data.order_id,
+		name: 'Frappe Cloud',
+		image: 'https://frappe.io/files/cloud.png',
+		prefill: { email: team.doc?.user },
+		handler: handlePaymentSuccess,
+		theme: { color: '#171717' }
+	};
+
+	const rzp = new Razorpay(options);
+
+	// Opens the payment checkout frame
+	rzp.open();
+
+	// Attach failure handler
+	rzp.on('payment.failed', handlePaymentFailure);
+	// rzp.on('payment.success', this.handlePaymentSuccess);
+}
+
+function handlePaymentFailure(response) {
+	handlePaymentFailed.submit({ response });
+	toast.error('Payment failed');
+}
+
+function handlePaymentSuccess() {
+	isPaymentComplete.value = true;
+	emit('success');
+	toast.success('Payment successful');
+}
+</script>
diff --git a/dashboard/src2/components/billing/BuyCreditsStripe.vue b/dashboard/src2/components/billing/BuyCreditsStripe.vue
new file mode 100644
index 0000000000..00f0bc1e8c
--- /dev/null
+++ b/dashboard/src2/components/billing/BuyCreditsStripe.vue
@@ -0,0 +1,168 @@
+<template>
+	<div>
+		<label
+			class="block"
+			:class="{
+				'pointer-events-none h-0.5 opacity-0': step != 'Add Card Details',
+				'mt-4': step == 'Add Card Details'
+			}"
+		>
+			<span class="text-sm leading-4 text-gray-700">
+				Credit or Debit Card
+			</span>
+			<div class="form-input mt-2 block w-full pl-3" ref="cardElementRef"></div>
+			<ErrorMessage class="mt-1" :message="cardErrorMessage" />
+		</label>
+
+		<div v-if="step == 'Setting up Stripe'" class="mt-8 flex justify-center">
+			<Spinner class="h-4 w-4 text-gray-700" />
+		</div>
+		<ErrorMessage
+			class="mt-2"
+			:message="createPaymentIntent.error || errorMessage"
+		/>
+		<div class="mt-8">
+			<Button
+				v-if="step == 'Get Amount'"
+				class="w-full"
+				size="md"
+				variant="solid"
+				label="Proceed to payment using Stripe"
+				:loading="createPaymentIntent.loading"
+				@click="createPaymentIntent.submit()"
+			/>
+			<Button
+				v-else-if="step == 'Add Card Details'"
+				class="w-full"
+				size="md"
+				variant="solid"
+				label="Make payment via Stripe"
+				:loading="paymentInProgress"
+				@click="onBuyClick"
+			/>
+		</div>
+	</div>
+</template>
+<script setup>
+import { Button, ErrorMessage, Spinner, createResource } from 'frappe-ui';
+import { loadStripe } from '@stripe/stripe-js';
+import { ref, nextTick, inject } from 'vue';
+import { toast } from 'vue-sonner';
+import { DashboardError } from '../../utils/error';
+
+const props = defineProps({
+	amount: {
+		type: Number,
+		default: 0
+	},
+	minimumAmount: {
+		type: Number,
+		default: 0
+	}
+});
+
+const emit = defineEmits(['success']);
+
+const team = inject('team');
+
+const step = ref('Get Amount');
+const clientSecret = ref(null);
+const cardErrorMessage = ref(null);
+const errorMessage = ref(null);
+const paymentInProgress = ref(false);
+
+const stripe = ref(null);
+const card = ref(null);
+const elements = ref(null);
+const ready = ref(false);
+
+const cardElementRef = ref(null);
+
+const createPaymentIntent = createResource({
+	url: 'press.api.billing.create_payment_intent_for_buying_credits',
+	params: { amount: props.amount },
+	validate() {
+		if (props.amount < props.minimumAmount && !team.doc.erpnext_partner) {
+			throw new DashboardError(
+				`Amount must be greater than or equal to ${props.minimumAmount}`
+			);
+		}
+	},
+	async onSuccess(data) {
+		step.value = 'Setting up Stripe';
+		let { publishable_key, client_secret } = data;
+		clientSecret.value = client_secret;
+		stripe.value = await loadStripe(publishable_key);
+		elements.value = stripe.value.elements();
+		const style = {
+			base: {
+				color: '#171717',
+				fontFamily: [
+					'ui-sans-serif',
+					'system-ui',
+					'-apple-system',
+					'BlinkMacSystemFont',
+					'"Segoe UI"',
+					'Roboto',
+					'"Helvetica Neue"',
+					'Arial',
+					'"Noto Sans"',
+					'sans-serif',
+					'"Apple Color Emoji"',
+					'"Segoe UI Emoji"',
+					'"Segoe UI Symbol"',
+					'"Noto Color Emoji"'
+				].join(', '),
+				fontSmoothing: 'antialiased',
+				fontSize: '13px',
+				'::placeholder': {
+					color: '#C7C7C7'
+				}
+			},
+			invalid: {
+				color: '#7C7C7C',
+				iconColor: '#7C7C7C'
+			}
+		};
+		card.value = elements.value.create('card', {
+			hidePostalCode: true,
+			style: style,
+			classes: {
+				complete: '',
+				focus: 'bg-gray-100'
+			}
+		});
+
+		step.value = 'Add Card Details';
+		nextTick(() => {
+			card.value.mount(cardElementRef.value);
+		});
+
+		card.value.addEventListener('change', event => {
+			cardErrorMessage.value = event.error?.message || null;
+		});
+		card.value.addEventListener('ready', () => {
+			ready.value = true;
+		});
+	}
+});
+
+async function onBuyClick() {
+	paymentInProgress.value = true;
+	let payload = await stripe.value.confirmCardPayment(clientSecret.value, {
+		payment_method: { card: card.value }
+	});
+
+	if (payload.error) {
+		errorMessage.value = payload.error.message;
+		paymentInProgress.value = false;
+	} else {
+		toast.success(
+			'Payment processed successfully, we will update your account shortly on confirmation from Stripe'
+		);
+		paymentInProgress.value = false;
+		emit('success');
+		errorMessage.value = null;
+	}
+}
+</script>
diff --git a/dashboard/src2/components/billing/CardForm.vue b/dashboard/src2/components/billing/CardForm.vue
new file mode 100644
index 0000000000..4298a0e0de
--- /dev/null
+++ b/dashboard/src2/components/billing/CardForm.vue
@@ -0,0 +1,360 @@
+<template>
+	<div class="relative">
+		<div
+			v-if="!ready"
+			class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-8 transform"
+		>
+			<Spinner class="h-5 w-5 text-gray-700" />
+		</div>
+		<div :class="{ 'opacity-0': !ready }">
+			<div v-show="!tryingMicroCharge">
+				<label class="block">
+					<span class="block text-xs text-gray-600">
+						Credit or Debit Card
+					</span>
+					<div
+						class="form-input mt-2 block h-[unset] w-full py-2 pl-3"
+						ref="cardElementRef"
+					></div>
+					<ErrorMessage class="mt-1" :message="cardErrorMessage" />
+				</label>
+				<FormControl
+					class="mt-4"
+					label="Name on Card"
+					type="text"
+					v-model="billingInformation.cardHolderName"
+				/>
+				<!-- <AddressForm
+					ref="addressFormRef"
+					class="mt-5"
+					v-model:address="billingInformation"
+					@success="console.log('Address form submitted')"
+				/> -->
+				<NewAddressForm
+					ref="addressFormRef"
+					class="mt-5"
+					v-model="billingInformation"
+					@success="console.log('Address form submitted')"
+				/>
+			</div>
+
+			<div class="mt-3 space-y-4" v-show="tryingMicroCharge">
+				<p class="text-base text-gray-700">
+					We are attempting to charge your card with
+					<strong>{{ formattedMicroChargeAmount }}</strong> to make sure the
+					card works. This amount will be <strong>refunded</strong> back to your
+					account.
+				</p>
+
+				<Button
+					:loading="!microChargeCompleted"
+					:loadingText="'Verifying Card'"
+				>
+					Card Verified
+					<template #prefix>
+						<GreenCheckIcon class="h-4 w-4" />
+					</template>
+				</Button>
+			</div>
+
+			<ErrorMessage class="mt-2" :message="errorMessage" />
+
+			<div class="mt-6 flex items-center justify-between">
+				<PoweredByStripeLogo />
+				<Button
+					v-if="showAddAnotherCardButton"
+					label="Add Another Card"
+					@click="clearForm"
+				>
+					<template #prefix>
+						<FeatherIcon class="h-4" name="plus" />
+					</template>
+				</Button>
+				<Button
+					v-else-if="!tryingMicroCharge"
+					variant="solid"
+					label="Verify & Save Card"
+					:loading="addingCard"
+					@click="submit"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import AddressForm from '../AddressForm.vue';
+import NewAddressForm from './NewAddressForm.vue';
+import PoweredByStripeLogo from '../../logo/PoweredByStripeLogo.vue';
+// import GreenCheckIcon from '../icons/GreenCheckIcon.vue';
+import {
+	FeatherIcon,
+	Button,
+	FormControl,
+	Spinner,
+	ErrorMessage,
+	createResource
+} from 'frappe-ui';
+import { currency } from '../../utils/format';
+import { loadStripe } from '@stripe/stripe-js';
+import { ref, reactive, computed, inject, onMounted } from 'vue';
+import { toast } from 'vue-sonner';
+
+const emit = defineEmits(['success']);
+
+const team = inject('team');
+
+const stripe = ref(null);
+const elements = ref(null);
+const card = ref(null);
+const ready = ref(false);
+const _setupIntent = ref(null);
+const errorMessage = ref(null);
+const cardErrorMessage = ref(null);
+const addingCard = ref(false);
+const tryingMicroCharge = ref(false);
+const showAddAnotherCardButton = ref(false);
+const microChargeCompleted = ref(false);
+
+onMounted(() => setupStripeIntent());
+
+const cardElementRef = ref(null);
+
+const getPublishedKeyAndSetupIntent = createResource({
+	url: 'press.api.billing.get_publishable_key_and_setup_intent',
+	onSuccess: async data => {
+		const { publishable_key, setup_intent } = data;
+		_setupIntent.value = setup_intent;
+		stripe.value = await loadStripe(publishable_key);
+		elements.value = stripe.value.elements();
+		const style = {
+			base: {
+				color: '#171717',
+				fontFamily: [
+					'ui-sans-serif',
+					'system-ui',
+					'-apple-system',
+					'BlinkMacSystemFont',
+					'"Segoe UI"',
+					'Roboto',
+					'"Helvetica Neue"',
+					'Arial',
+					'"Noto Sans"',
+					'sans-serif',
+					'"Apple Color Emoji"',
+					'"Segoe UI Emoji"',
+					'"Segoe UI Symbol"',
+					'"Noto Color Emoji"'
+				].join(', '),
+				fontSmoothing: 'antialiased',
+				fontSize: '13px',
+				'::placeholder': {
+					color: '#C7C7C7'
+				}
+			},
+			invalid: {
+				color: '#C7C7C7',
+				iconColor: '#C7C7C7'
+			}
+		};
+		card.value = elements.value.create('card', {
+			hidePostalCode: true,
+			style: style,
+			classes: {
+				complete: '',
+				focus: 'bg-gray-100'
+			}
+		});
+		card.value.mount(cardElementRef.value);
+		card.value.addEventListener('change', event => {
+			cardErrorMessage.value = event.error?.message || null;
+		});
+		card.value.addEventListener('ready', () => {
+			ready.value = true;
+		});
+	}
+});
+
+const countryList = createResource({
+	url: 'press.api.account.country_list',
+	cache: 'countryList',
+	auto: true
+});
+
+const browserTimezone = computed(() => {
+	if (!window.Intl) {
+		return null;
+	}
+	return Intl.DateTimeFormat().resolvedOptions().timeZone;
+});
+
+const billingInformation = reactive({
+	cardHolderName: '',
+	country: '',
+	gstin: ''
+});
+
+createResource({
+	url: 'press.api.account.get_billing_information',
+	params: { timezone: browserTimezone.value },
+	auto: true,
+	onSuccess: data => {
+		billingInformation.country = data?.country;
+		billingInformation.address = data?.address_line1;
+		billingInformation.city = data?.city;
+		billingInformation.state = data?.state;
+		billingInformation.postal_code = data?.pincode;
+		billingInformation.gstin =
+			data?.gstin == 'Not Applicable' ? '' : data?.gstin;
+	}
+});
+
+const setupIntentSuccess = createResource({
+	url: 'press.api.billing.setup_intent_success',
+	makeParams: ({ setupIntent }) => {
+		return {
+			setup_intent: setupIntent,
+			address: billingInformation
+		};
+	},
+	onSuccess: async ({ payment_method_name }) => {
+		await verifyWithMicroChargeIfApplicable(payment_method_name);
+		addingCard.value = false;
+		toast.success('Card added successfully');
+	},
+	onError: error => {
+		console.error(error);
+		addingCard.value = false;
+		errorMessage.value = error.messages.join('\n');
+		toast.error(errorMessage.value);
+	}
+});
+
+const verifyCardWithMicroCharge = createResource({
+	url: 'press.api.billing.create_payment_intent_for_micro_debit',
+	makeParams: ({ paymentMethodName }) => {
+		return { payment_method_name: paymentMethodName };
+	},
+	onSuccess: async paymentIntent => {
+		let { client_secret } = paymentIntent;
+
+		let payload = await stripe.value.confirmCardPayment(client_secret, {
+			payment_method: { card: card.value }
+		});
+
+		if (payload.paymentIntent?.status === 'succeeded') {
+			microChargeCompleted.value = true;
+			emit('success');
+		}
+	},
+	onError: error => {
+		console.error(error);
+		tryingMicroCharge.value = false;
+		errorMessage.value = error.messages.join('\n');
+	}
+});
+
+async function setupStripeIntent() {
+	await getPublishedKeyAndSetupIntent.submit();
+	const { first_name, last_name = '' } = team.doc?.user_info;
+	const fullname = first_name + ' ' + last_name;
+	billingInformation.cardHolderName = fullname.trimEnd();
+}
+
+const addressFormRef = ref(null);
+
+async function submit() {
+	addingCard.value = true;
+	let message = await addressFormRef.value.validate();
+
+	if (message) {
+		errorMessage.value = message;
+		addingCard.value = false;
+		return;
+	} else {
+		errorMessage.value = null;
+	}
+
+	const { setupIntent, error } = await stripe.value.confirmCardSetup(
+		_setupIntent.value.client_secret,
+		{
+			payment_method: {
+				card: card.value,
+				billing_details: {
+					name: billingInformation.cardHolderName,
+					address: {
+						line1: billingInformation.address,
+						city: billingInformation.city,
+						state: billingInformation.state,
+						postal_code: billingInformation.postal_code,
+						country: getCountryCode(team.doc?.country)
+					}
+				}
+			}
+		}
+	);
+	if (error) {
+		addingCard.value = false;
+		let declineCode = error.decline_code;
+		let _errorMessage = error.message;
+		if (declineCode === 'do_not_honor') {
+			errorMessage.value =
+				"Your card was declined. It might be due to insufficient funds or you might've exceeded your daily limit. Please try with another card or contact your bank.";
+			showAddAnotherCardButton.value = true;
+		} else if (declineCode === 'transaction_not_allowed') {
+			errorMessage.value =
+				'Your card was declined. It might be due to restrictions on your card, like international transactions or online payments. Please try with another card or contact your bank.';
+			showAddAnotherCardButton.value = true;
+		} else if (_errorMessage != 'Your card number is incomplete.') {
+			errorMessage.value = _errorMessage;
+		}
+	} else {
+		if (setupIntent?.status === 'succeeded') {
+			setupIntentSuccess.submit({ setupIntent });
+		}
+	}
+}
+
+async function verifyWithMicroChargeIfApplicable(paymentMethodName) {
+	const teamCurrency = team.doc?.currency;
+	const verifyCardsWithMicroCharge = window.verify_cards_with_micro_charge;
+	const isMicroChargeApplicable =
+		verifyCardsWithMicroCharge === 'Both INR and USD' ||
+		(verifyCardsWithMicroCharge == 'Only INR' && teamCurrency === 'INR') ||
+		(verifyCardsWithMicroCharge === 'Only USD' && teamCurrency === 'USD');
+	if (isMicroChargeApplicable) {
+		await _verifyWithMicroCharge(paymentMethodName);
+	} else {
+		emit('success');
+	}
+}
+
+async function _verifyWithMicroCharge(paymentMethodName) {
+	tryingMicroCharge.value = true;
+	return verifyCardWithMicroCharge.submit({
+		paymentMethodName
+	});
+}
+
+function getCountryCode(country) {
+	let code = countryList.data.find(d => d.name === country).code;
+	return code.toUpperCase();
+}
+
+async function clearForm() {
+	ready.value = false;
+	errorMessage.value = null;
+	showAddAnotherCardButton.value = false;
+	card.value = null;
+	setupStripeIntent();
+}
+
+const formattedMicroChargeAmount = computed(() => {
+	if (!team.doc?.currency) {
+		return 0;
+	}
+	return currency(
+		team.doc?.billing_info?.micro_debit_charge_amount,
+		team.doc?.currency
+	);
+});
+</script>
diff --git a/dashboard/src2/components/billing/ChangeCardDialog.vue b/dashboard/src2/components/billing/ChangeCardDialog.vue
new file mode 100644
index 0000000000..648fa266f1
--- /dev/null
+++ b/dashboard/src2/components/billing/ChangeCardDialog.vue
@@ -0,0 +1,138 @@
+<template>
+	<div>
+		<Dialog
+			v-model="show"
+			:options="{ title: 'Choose active card' }"
+			:disableOutsideClickToClose="confirmDialogOpened"
+		>
+			<template #body-content>
+				<div v-if="cards.data?.length" class="flex flex-col gap-2.5">
+					<div
+						v-for="card in cards.data"
+						:key="card.name"
+						class="flex justify-between gap-2 rounded p-2.5 text-base text-gray-900 hover:bg-gray-100"
+					>
+						<div class="flex gap-2">
+							<component :is="cardBrandIcon(card.brand)" class="my-auto" />
+							<div>
+								<div class="flex h-7 items-center gap-1 font-medium">
+									<div>{{ card.name_on_card }}</div>
+									<div>&middot;</div>
+									<div class="flex gap-1 text-gray-700">
+										<div>Card ending in ••••</div>
+										<div>{{ card.last_4 }}</div>
+									</div>
+									<Badge
+										v-if="card.is_default"
+										class="ml-1.5"
+										label="Default"
+										variant="outline"
+										theme="green"
+									/>
+								</div>
+								<div class="text-gray-600">
+									Expiry
+									{{
+										card.expiry_month < 10
+											? `0${card.expiry_month}`
+											: card.expiry_month
+									}}/{{ card.expiry_year }}
+								</div>
+							</div>
+						</div>
+						<div v-if="cards.data.length > 1 && !card.is_default">
+							<Dropdown
+								:options="[
+									{
+										label: 'Set as default',
+										onClick: () => setAsDefault(card.name),
+										condition: () => !card.is_default
+									},
+									{ label: 'Remove', onClick: () => removeCard(card.name) }
+								]"
+							>
+								<Button icon="more-horizontal" variant="ghost" />
+							</Dropdown>
+						</div>
+					</div>
+				</div>
+			</template>
+			<template #actions>
+				<Button
+					label="Add new card"
+					class="w-full"
+					variant="solid"
+					@click="emit('addCard')"
+				>
+					<template #prefix>
+						<FeatherIcon name="plus" class="h-4" />
+					</template>
+				</Button>
+			</template>
+		</Dialog>
+	</div>
+</template>
+<script setup>
+// import { createDialog } from '../dialogs.js';
+import {
+	Dropdown,
+	Badge,
+	Dialog,
+	Button,
+	FeatherIcon,
+	createResource
+} from 'frappe-ui';
+import { cardBrandIcon, confirmDialog } from '../../utils/components';
+import { ref } from 'vue';
+
+const emit = defineEmits(['success', 'addCard']);
+
+const show = defineModel();
+
+const cards = createResource({
+	url: 'press.api.billing.get_payment_methods',
+	cache: 'cards',
+	auto: true
+});
+
+const setAsDefault = card => {
+	createResource({
+		url: 'press.api.billing.set_as_default',
+		params: { name: card },
+		auto: true,
+		onSuccess: () => {
+			cards.reload();
+			emit('success');
+		}
+	});
+};
+
+const confirmDialogOpened = ref(false);
+const removeCard = card => {
+	confirmDialogOpened.value = true;
+	confirmDialog({
+		title: 'Remove Card',
+		message: 'Are you sure you want to remove this card?',
+		primaryAction: {
+			label: 'Remove',
+			variant: 'solid',
+			theme: 'red',
+			onClick: ({ hide }) => {
+				createResource({
+					url: 'press.api.billing.remove_payment_method',
+					params: { name: card },
+					auto: true,
+					onSuccess: () => {
+						cards.reload();
+						confirmDialogOpened.value = false;
+						hide();
+					}
+				});
+			}
+		},
+		onSuccess: () => {
+			confirmDialogOpened.value = false;
+		}
+	});
+};
+</script>
diff --git a/dashboard/src2/components/billing/DropdownItem.vue b/dashboard/src2/components/billing/DropdownItem.vue
new file mode 100644
index 0000000000..c242165bed
--- /dev/null
+++ b/dashboard/src2/components/billing/DropdownItem.vue
@@ -0,0 +1,22 @@
+<template>
+	<div>
+		<Button
+			class="flex w-full justify-between rounded text-base"
+			variant="ghost"
+			:label="label"
+			@click="onClick"
+		>
+			<template v-if="active" #suffix>
+				<FeatherIcon class="h-4" name="check" />
+			</template>
+		</Button>
+	</div>
+</template>
+<script setup>
+import { Button, FeatherIcon } from 'frappe-ui';
+const props = defineProps({
+	label: String,
+	active: Boolean,
+	onClick: Array
+});
+</script>
diff --git a/dashboard/src2/components/billing/FinalizeInvoicesDialog.vue b/dashboard/src2/components/billing/FinalizeInvoicesDialog.vue
index 6452c71e4a..635aed02ae 100644
--- a/dashboard/src2/components/billing/FinalizeInvoicesDialog.vue
+++ b/dashboard/src2/components/billing/FinalizeInvoicesDialog.vue
@@ -23,9 +23,9 @@
 						}}
 					</li>
 				</ul>
-				Please finalize and settle them before removing all payment methods or
-				disabling the account. You can check the details of invoices and make
-				the payment from
+				Please finalize and settle them before removing all payment methods,
+				switching to Paid by Partner method or disabling the account. You can
+				check the details of invoices and make the payment from
 				<Link to="/billing/invoices/">here</Link>. It might take up to 2 hours
 				for the payment to reflect against your invoices.
 			</div>
diff --git a/dashboard/src2/components/billing/NewAddressForm.vue b/dashboard/src2/components/billing/NewAddressForm.vue
new file mode 100644
index 0000000000..17e32a64d5
--- /dev/null
+++ b/dashboard/src2/components/billing/NewAddressForm.vue
@@ -0,0 +1,242 @@
+<template>
+	<div>
+		<div class="flex flex-col gap-5">
+			<div
+				v-for="section in sections"
+				:key="section.name"
+				class="grid gap-4"
+				:class="'grid-cols-' + section.columns"
+			>
+				<div v-for="field in section.fields" :key="field.name">
+					<FormControl
+						v-model="billingInformation[field.fieldname]"
+						:label="field.label || field.fieldname"
+						:type="getInputType(field)"
+						:name="field.fieldname"
+						:options="field.options"
+						:required="field.required"
+					/>
+				</div>
+			</div>
+			<div v-show="billingInformation.country == 'India'">
+				<FormControl
+					label="I have GSTIN"
+					type="checkbox"
+					v-model="gstApplicable"
+				/>
+				<FormControl
+					v-if="gstApplicable"
+					class="mt-5"
+					label="GSTIN"
+					type="text"
+					v-model="billingInformation.gstin"
+				/>
+			</div>
+		</div>
+		<ErrorMessage class="mt-2" :message="updateBillingInformation.error" />
+	</div>
+</template>
+<script setup>
+import { FormControl, ErrorMessage, createResource } from 'frappe-ui';
+import { ref, computed, inject, watch } from 'vue';
+import { toast } from 'vue-sonner';
+import { DashboardError } from '../../utils/error';
+
+const emit = defineEmits(['success']);
+const team = inject('team');
+
+const billingInformation = defineModel();
+
+const updateBillingInformation = createResource({
+	url: 'press.api.account.update_billing_information',
+	makeParams: () => {
+		return { billing_details: billingInformation.value };
+	},
+	validate: async () => {
+		let error = await validate();
+		if (error) throw new DashboardError(error);
+	},
+	onSuccess: () => {
+		toast.success('Billing information updated');
+		emit('success');
+	}
+});
+
+const gstApplicable = ref(false);
+
+watch(
+	() => billingInformation.value.gstin,
+	gstin => {
+		gstApplicable.value = gstin && gstin !== 'Not Applicable';
+	}
+);
+
+async function validate() {
+	// validate mandatory fields
+	for (let field of sections.value.flatMap(s => s.fields)) {
+		if (field.required && !billingInformation.value[field.fieldname]) {
+			return `${field.label} is required`;
+		}
+	}
+
+	if (!gstApplicable.value) {
+		billingInformation.value.gstin = 'Not Applicable';
+	}
+
+	// validate gstin
+	return await validateGST();
+}
+
+const _indianStates = [
+	'Andaman and Nicobar Islands',
+	'Andhra Pradesh',
+	'Arunachal Pradesh',
+	'Assam',
+	'Bihar',
+	'Chandigarh',
+	'Chhattisgarh',
+	'Dadra and Nagar Haveli and Daman and Diu',
+	'Delhi',
+	'Goa',
+	'Gujarat',
+	'Haryana',
+	'Himachal Pradesh',
+	'Jammu and Kashmir',
+	'Jharkhand',
+	'Karnataka',
+	'Kerala',
+	'Ladakh',
+	'Lakshadweep Islands',
+	'Madhya Pradesh',
+	'Maharashtra',
+	'Manipur',
+	'Meghalaya',
+	'Mizoram',
+	'Nagaland',
+	'Odisha',
+	'Other Territory',
+	'Puducherry',
+	'Punjab',
+	'Rajasthan',
+	'Sikkim',
+	'Tamil Nadu',
+	'Telangana',
+	'Tripura',
+	'Uttar Pradesh',
+	'Uttarakhand',
+	'West Bengal'
+];
+
+const _countryList = createResource({
+	url: 'press.api.account.country_list',
+	cache: 'countryList',
+	auto: true,
+	onSuccess: () => {
+		let userCountry = team.doc?.country;
+		if (userCountry) {
+			let country = countryList.value?.find(d => d.label === userCountry);
+			if (country) {
+				billingInformation.value.country = country.value;
+			}
+		}
+	}
+});
+
+const countryList = computed(() => {
+	return (_countryList.data || []).map(d => ({
+		label: d.name,
+		value: d.name
+	}));
+});
+
+const indianStates = computed(() => {
+	return _indianStates.map(state => ({
+		label: state,
+		value: state
+	}));
+});
+
+const sections = computed(() => {
+	return [
+		{
+			name: 'Country and City',
+			columns: 2,
+			fields: [
+				{
+					fieldtype: 'Select',
+					label: 'Country',
+					fieldname: 'country',
+					options: countryList.value,
+					required: true
+				},
+				{
+					fieldtype: 'Data',
+					label: 'City',
+					fieldname: 'city',
+					required: true
+				}
+			]
+		},
+		{
+			name: 'Address',
+			columns: 1,
+			fields: [
+				{
+					fieldtype: 'Data',
+					label: 'Address',
+					fieldname: 'address',
+					required: true
+				}
+			]
+		},
+		{
+			name: 'State and Postal Code',
+			columns: 2,
+			fields: [
+				{
+					fieldtype:
+						billingInformation.value.country === 'India' ? 'Select' : 'Data',
+					label: 'State / Province / Region',
+					fieldname: 'state',
+					required: true,
+					options:
+						billingInformation.value.country === 'India'
+							? indianStates.value
+							: null
+				},
+				{
+					fieldtype: 'Data',
+					label: 'Postal Code',
+					fieldname: 'postal_code',
+					required: true
+				}
+			]
+		}
+	];
+});
+
+function getInputType(field) {
+	return {
+		Data: 'text',
+		Int: 'number',
+		Select: 'select',
+		Check: 'checkbox',
+		Password: 'password',
+		Text: 'textarea',
+		Date: 'date'
+	}[field.fieldtype || 'Data'];
+}
+
+const _validateGST = createResource({
+	url: 'press.api.billing.validate_gst',
+	params: { address: billingInformation.value }
+});
+
+async function validateGST() {
+	billingInformation.value.gstin =
+		billingInformation.value.gstin || 'Not Applicable';
+	await _validateGST.submit();
+}
+
+defineExpose({ updateBillingInformation, validate });
+</script>
diff --git a/dashboard/src2/components/billing/PaymentDetails.vue b/dashboard/src2/components/billing/PaymentDetails.vue
new file mode 100644
index 0000000000..375cba70e0
--- /dev/null
+++ b/dashboard/src2/components/billing/PaymentDetails.vue
@@ -0,0 +1,328 @@
+<template>
+	<div class="flex flex-col gap-4">
+		<div class="text-lg font-semibold text-gray-900">
+			{{ 'Payment details' }}
+		</div>
+		<div class="flex flex-col">
+			<div
+				v-if="team.doc.payment_mode == 'Card'"
+				class="flex items-center justify-between text-base text-gray-900"
+			>
+				<div class="flex flex-col gap-1.5">
+					<div class="font-medium">{{ 'Active card' }}</div>
+					<div class="overflow-hidden text-ellipsis text-gray-700">
+						<div
+							v-if="team.doc.payment_method"
+							class="inline-flex items-center gap-2"
+						>
+							<component :is="cardBrandIcon(team.doc.payment_method.brand)" />
+							<div class="text-gray-700">
+								<span>{{ team.doc.payment_method.name_on_card }}</span>
+								<span> &middot; Card ending in •••• </span>
+								<span>{{ team.doc.payment_method.last_4 }}</span>
+							</div>
+						</div>
+						<span v-else class="text-gray-700">No card added</span>
+					</div>
+				</div>
+				<div class="shrink-0">
+					<Button
+						:label="team.doc.payment_method ? 'Change card' : 'Add card'"
+						@click="changeMethod"
+					>
+						<template v-if="!team.doc.payment_method" #prefix>
+							<FeatherIcon class="h-4" name="plus" />
+						</template>
+					</Button>
+				</div>
+			</div>
+			<div
+				v-if="team.doc.payment_mode == 'Card'"
+				class="my-3 h-px bg-gray-100"
+			/>
+			<div class="flex items-center justify-between text-base text-gray-900">
+				<div class="flex flex-col gap-1.5">
+					<div class="font-medium">{{ 'Mode of payment' }}</div>
+					<div
+						v-if="team.doc.payment_mode"
+						class="inline-flex items-center gap-2 text-gray-700"
+					>
+						<FeatherIcon class="h-4" name="info" />
+						{{ paymentMode.description }}
+					</div>
+					<span v-else class="text-gray-700">Not set</span>
+				</div>
+				<div class="shrink-0">
+					<Dropdown :options="paymentModeOptions">
+						<template #default="{ open }">
+							<Button
+								:label="team.doc.payment_mode ? paymentMode.label : 'Set mode'"
+							>
+								<template #suffix>
+									<FeatherIcon
+										:name="open ? 'chevron-up' : 'chevron-down'"
+										class="h-4"
+									/>
+								</template>
+							</Button>
+						</template>
+					</Dropdown>
+				</div>
+			</div>
+			<div class="my-3 h-px bg-gray-100" />
+			<div class="flex items-center justify-between text-base text-gray-900">
+				<div class="flex flex-col gap-1.5">
+					<div class="font-medium">{{ 'Credit balance' }}</div>
+					<div class="text-gray-700">
+						{{ availableCredits || currency + ' 0.00' }}
+					</div>
+				</div>
+				<div class="shrink-0">
+					<Button
+						:label="'Add credit'"
+						@click="
+							() => {
+								showMessage = false;
+								if (!billingDetailsSummary) {
+									showMessage = true;
+									showBillingDetailsDialog = true;
+									return;
+								}
+								showAddPrepaidCreditsDialog = true;
+							}
+						"
+					>
+						<template #prefix>
+							<FeatherIcon class="h-4" name="plus" />
+						</template>
+					</Button>
+				</div>
+			</div>
+			<div class="my-3 h-px bg-gray-100" />
+			<div class="flex items-center justify-between text-base text-gray-900">
+				<div class="flex flex-col gap-1.5">
+					<div class="font-medium">{{ 'Billing address' }}</div>
+					<div v-if="billingDetailsSummary" class="leading-5 text-gray-700">
+						{{ billingDetailsSummary }}
+					</div>
+					<div v-else class="text-gray-700">No address</div>
+				</div>
+				<div class="shrink-0">
+					<Button
+						:label="billingDetailsSummary ? 'Edit ' : 'Add billing address'"
+						@click="
+							() => {
+								showMessage = false;
+								showBillingDetailsDialog = true;
+							}
+						"
+					>
+						<template v-if="!billingDetailsSummary" #prefix>
+							<FeatherIcon class="h-4" name="plus" />
+						</template>
+					</Button>
+				</div>
+			</div>
+		</div>
+	</div>
+	<BillingDetailsDialog
+		v-if="showBillingDetailsDialog"
+		v-model="showBillingDetailsDialog"
+		:showMessage="showMessage"
+		@success="billingDetails.reload()"
+	/>
+	<AddPrepaidCreditsDialog
+		v-if="showAddPrepaidCreditsDialog"
+		v-model="showAddPrepaidCreditsDialog"
+		:showMessage="showMessage"
+		@success="upcomingInvoice.reload()"
+	/>
+	<AddCardDialog
+		v-if="showAddCardDialog"
+		v-model="showAddCardDialog"
+		:showMessage="showMessage"
+		@success="
+			() => {
+				showMessage = false;
+				showAddCardDialog = false;
+				team.reload();
+			}
+		"
+	/>
+	<ChangeCardDialog
+		v-if="showChangeCardDialog"
+		v-model="showChangeCardDialog"
+		@addCard="
+			() => {
+				showChangeCardDialog = false;
+				showAddCardDialog = true;
+			}
+		"
+		@success="() => team.reload()"
+	/>
+</template>
+<script setup>
+import DropdownItem from './DropdownItem.vue';
+import BillingDetailsDialog from './BillingDetailsDialog.vue';
+import AddPrepaidCreditsDialog from './AddPrepaidCreditsDialog.vue';
+import AddCardDialog from './AddCardDialog.vue';
+import ChangeCardDialog from './ChangeCardDialog.vue';
+import { Dropdown, Button, FeatherIcon, createResource } from 'frappe-ui';
+import {
+	cardBrandIcon,
+	confirmDialog,
+	renderDialog
+} from '../../utils/components';
+import { computed, ref, inject, h, defineAsyncComponent } from 'vue';
+import router from '../../router';
+
+const team = inject('team');
+const {
+	availableCredits,
+	upcomingInvoice,
+	currentBillingAmount,
+	unpaidInvoices
+} = inject('billing');
+
+const showBillingDetailsDialog = ref(false);
+const showAddPrepaidCreditsDialog = ref(false);
+const showAddCardDialog = ref(false);
+const showChangeCardDialog = ref(false);
+
+const currency = computed(() => (team.doc.currency == 'INR' ? '₹' : '$'));
+
+const billingDetails = createResource({
+	url: 'press.api.account.get_billing_information',
+	cache: 'billingDetails',
+	auto: true
+});
+
+const changePaymentMode = createResource({
+	url: 'press.api.billing.change_payment_mode',
+	onSuccess: () => setTimeout(() => team.reload(), 1000)
+});
+
+const billingDetailsSummary = computed(() => {
+	let _billingDetails = billingDetails.data;
+	if (!_billingDetails) return '';
+
+	const { billing_name, address_line1, city, state, country, pincode, gstin } =
+		_billingDetails || {};
+	return [billing_name, address_line1, city, state, country, pincode, gstin]
+		.filter(Boolean)
+		.join(', ');
+});
+
+const paymentModeOptions = [
+	{
+		label: 'Card',
+		value: 'Card',
+		description: 'Your card will be charged for monthly subscription',
+		component: () =>
+			h(DropdownItem, {
+				label: 'Card',
+				active: team.doc.payment_mode === 'Card',
+				onClick: () => updatePaymentMode('Card')
+			})
+	},
+	{
+		label: 'Prepaid credits',
+		value: 'Prepaid Credits',
+		description:
+			'You will be charged from your credit balance for monthly subscription',
+		component: () =>
+			h(DropdownItem, {
+				label: 'Prepaid credits',
+				active: team.doc.payment_mode === 'Prepaid Credits',
+				onClick: () => updatePaymentMode('Prepaid Credits')
+			})
+	},
+	{
+		label: 'Paid by Partner',
+		value: 'Paid By Partner',
+		condition: () => team.doc.partner_email,
+		description: 'Your partner will be charged for monthly subscription',
+		component: () =>
+			h(DropdownItem, {
+				label: 'Paid by Partner',
+				active: team.doc.payment_mode === 'Paid by Partner',
+				onClick: () => updatePaymentMode('Paid By Partner')
+			})
+	}
+];
+
+const paymentMode = computed(() => {
+	return paymentModeOptions.find(o => o.value === team.doc.payment_mode);
+});
+
+function payUnpaidInvoices() {
+	let _unpaidInvoices = unpaidInvoices.data;
+	if (_unpaidInvoices.length > 1) {
+		if (team.doc.payment_mode === 'Prepaid Credits') {
+			showAddPrepaidCreditsDialog.value = true;
+		} else {
+			confirmDialog({
+				title: 'Multiple unpaid invoices',
+				message:
+					'You have multiple unpaid invoices. Please pay them from the invoices page',
+				primaryAction: {
+					label: 'Go to invoices',
+					variant: 'solid',
+					onClick: ({ hide }) => {
+						router.push({ name: 'BillingInvoices' });
+						hide();
+					}
+				}
+			});
+		}
+	} else {
+		let invoice = _unpaidInvoices;
+		if (invoice.stripe_invoice_url && team.doc.payment_mode === 'Card') {
+			window.open(
+				`/api/method/press.api.client.run_doc_method?dt=Invoice&dn=${invoice.name}&method=stripe_payment_url`
+			);
+		} else {
+			showAddPrepaidCreditsDialog.value = true;
+		}
+	}
+}
+
+const showMessage = ref(false);
+function updatePaymentMode(mode) {
+	showMessage.value = false;
+	if (!billingDetailsSummary.value) {
+		showMessage.value = true;
+		showBillingDetailsDialog.value = true;
+		return;
+	}
+	if (mode === 'Prepaid Credits' && team.doc.balance === 0) {
+		showMessage.value = true;
+		showAddPrepaidCreditsDialog.value = true;
+		return;
+	} else if (mode === 'Card' && !team.doc.payment_method) {
+		showMessage.value = true;
+		showAddCardDialog.value = true;
+	} else if (mode === 'Paid By Partner') {
+		if (unpaidInvoices.data.length > 0) {
+			payUnpaidInvoices();
+			return;
+		}
+		if (currentBillingAmount.value) {
+			const finalizeInvoicesDialog = defineAsyncComponent(() =>
+				import('./FinalizeInvoicesDialog.vue')
+			);
+			renderDialog(h(finalizeInvoicesDialog));
+		}
+	}
+	if (!changePaymentMode.loading) changePaymentMode.submit({ mode });
+}
+
+function changeMethod() {
+	if (team.doc.payment_method) {
+		showChangeCardDialog.value = true;
+	} else {
+		showMessage.value = false;
+		showAddCardDialog.value = true;
+	}
+}
+</script>
diff --git a/dashboard/src2/components/billing/PrepaidCreditsForm.vue b/dashboard/src2/components/billing/PrepaidCreditsForm.vue
new file mode 100644
index 0000000000..f1d6712ed1
--- /dev/null
+++ b/dashboard/src2/components/billing/PrepaidCreditsForm.vue
@@ -0,0 +1,125 @@
+<template>
+	<div>
+		<!-- Amount -->
+		<div>
+			<FormControl
+				:label="`Amount (Minimum Amount: ${minimumAmount})`"
+				class="mb-3"
+				v-model.number="creditsToBuy"
+				name="amount"
+				autocomplete="off"
+				type="number"
+				:min="minimumAmount"
+			>
+				<template #prefix>
+					<div class="grid w-4 place-items-center text-sm text-gray-700">
+						{{ team.doc.currency === 'INR' ? '₹' : '$' }}
+					</div>
+				</template>
+			</FormControl>
+			<FormControl
+				v-if="team.doc.currency === 'INR'"
+				:label="`Total Amount + GST (${
+					team.doc?.billing_info.gst_percentage * 100
+				}%)`"
+				disabled
+				:modelValue="totalAmount"
+				name="total"
+				autocomplete="off"
+				type="number"
+			>
+				<template #prefix>
+					<div class="grid w-4 place-items-center text-sm text-gray-700">
+						{{ team.doc.currency === 'INR' ? '₹' : '$' }}
+					</div>
+				</template>
+			</FormControl>
+		</div>
+
+		<!-- Payment Gateway -->
+		<div class="mt-4">
+			<div class="text-xs text-gray-600">Select Payment Gateway</div>
+			<div class="mt-1.5 grid grid-cols-1 gap-2 sm:grid-cols-2">
+				<Button
+					v-if="team.doc.currency === 'INR' || team.doc.razorpay_enabled"
+					size="lg"
+					:class="{
+						'border-[1.5px] border-gray-700': paymentGateway === 'Razorpay'
+					}"
+					@click="paymentGateway = 'Razorpay'"
+				>
+					<RazorpayLogo class="w-24" />
+				</Button>
+				<Button
+					size="lg"
+					:class="{
+						'border-[1.5px] border-gray-700': paymentGateway === 'Stripe'
+					}"
+					@click="paymentGateway = 'Stripe'"
+				>
+					<StripeLogo class="h-7 w-24" />
+				</Button>
+			</div>
+		</div>
+
+		<!-- Payment Button -->
+		<BuyCreditsStripe
+			v-if="paymentGateway === 'Stripe'"
+			:amount="creditsToBuy"
+			:minimumAmount="minimumAmount"
+			@success="() => emit('success')"
+			@cancel="show = false"
+		/>
+
+		<BuyCreditsRazorpay
+			v-if="paymentGateway === 'Razorpay'"
+			:amount="creditsToBuy"
+			:minimumAmount="minimumAmount"
+			@success="() => emit('success')"
+			@cancel="show = false"
+		/>
+	</div>
+</template>
+<script setup>
+import BuyCreditsStripe from './BuyCreditsStripe.vue';
+import BuyCreditsRazorpay from './BuyCreditsRazorpay.vue';
+import RazorpayLogo from '../../logo/RazorpayLogo.vue';
+import StripeLogo from '../../logo/StripeLogo.vue';
+import { FormControl, Button, createResource } from 'frappe-ui';
+import { ref, computed, inject } from 'vue';
+
+const emit = defineEmits(['success']);
+
+const team = inject('team');
+
+const totalUnpaidAmount = createResource({
+	url: 'press.api.billing.total_unpaid_amount',
+	cache: 'totalUnpaidAmount',
+	auto: true
+});
+
+const minimumAmount = computed(() => {
+	if (!team.doc) return 0;
+	const unpaidAmount = totalUnpaidAmount.data || 0;
+	const minimumDefault = team.doc?.currency == 'INR' ? 410 : 5;
+
+	return Math.ceil(
+		unpaidAmount && unpaidAmount > 0 ? unpaidAmount : minimumDefault
+	);
+});
+
+const creditsToBuy = computed(() => minimumAmount.value);
+const paymentGateway = ref('');
+
+const totalAmount = computed(() => {
+	let _creditsToBuy = creditsToBuy.value || 0;
+	if (team.doc?.currency === 'INR') {
+		return (
+			_creditsToBuy +
+			_creditsToBuy * (team.doc.billing_info.gst_percentage || 0)
+		).toFixed(2);
+	} else {
+		return _creditsToBuy;
+	}
+});
+</script>
diff --git a/dashboard/src2/components/billing/UpcomingInvoiceDialog.vue b/dashboard/src2/components/billing/UpcomingInvoiceDialog.vue
new file mode 100644
index 0000000000..fbdf02ddcc
--- /dev/null
+++ b/dashboard/src2/components/billing/UpcomingInvoiceDialog.vue
@@ -0,0 +1,37 @@
+<template>
+	<Dialog
+		v-model="props.showInvoiceDialog"
+		:options="{
+			size: '3xl',
+			title: 'Total usage for this month'
+		}"
+	>
+		<template #body-content>
+			<template v-if="upcomingInvoice.data.upcoming_invoice">
+				<div
+					v-if="upcomingInvoice.data.upcoming_invoice.status === 'Empty'"
+					class="text-base text-gray-600"
+				>
+					Nothing to show
+				</div>
+				<InvoiceTable
+					v-else
+					:invoiceId="upcomingInvoice.data.upcoming_invoice.name"
+				/>
+			</template>
+			<template v-else>
+				<div class="text-base text-gray-600">Nothing to show</div>
+			</template>
+		</template>
+	</Dialog>
+</template>
+
+<script setup>
+import { inject, ref } from 'vue';
+import InvoiceTable from '../InvoiceTable.vue';
+
+const { upcomingInvoice } = inject('billing');
+const props = defineProps({
+	showInvoiceDialog: Boolean
+});
+</script>
diff --git a/dashboard/src2/logo/PoweredByStripeLogo.vue b/dashboard/src2/logo/PoweredByStripeLogo.vue
new file mode 100644
index 0000000000..39719d4870
--- /dev/null
+++ b/dashboard/src2/logo/PoweredByStripeLogo.vue
@@ -0,0 +1,27 @@
+<template>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		xmlns:xlink="http://www.w3.org/1999/xlink"
+		width="119px"
+		height="26px"
+	>
+		<path
+			fill-rule="evenodd"
+			opacity="0.349"
+			fill="rgb(66, 71, 112)"
+			d="M113.000,26.000 L6.000,26.000 C2.686,26.000 -0.000,23.314 -0.000,20.000 L-0.000,6.000 C-0.000,2.686 2.686,-0.000 6.000,-0.000 L113.000,-0.000 C116.314,-0.000 119.000,2.686 119.000,6.000 L119.000,20.000 C119.000,23.314 116.314,26.000 113.000,26.000 ZM118.000,6.000 C118.000,3.239 115.761,1.000 113.000,1.000 L6.000,1.000 C3.239,1.000 1.000,3.239 1.000,6.000 L1.000,20.000 C1.000,22.761 3.239,25.000 6.000,25.000 L113.000,25.000 C115.761,25.000 118.000,22.761 118.000,20.000 L118.000,6.000 Z"
+		/>
+		<path
+			fill-rule="evenodd"
+			opacity="0.502"
+			fill="rgb(66, 71, 112)"
+			d="M60.700,18.437 L59.395,18.437 L60.405,15.943 L58.395,10.871 L59.774,10.871 L61.037,14.323 L62.310,10.871 L63.689,10.871 L60.700,18.437 ZM55.690,16.259 C55.238,16.259 54.774,16.091 54.354,15.764 L54.354,16.133 L53.007,16.133 L53.007,8.566 L54.354,8.566 L54.354,11.229 C54.774,10.913 55.238,10.745 55.690,10.745 C57.100,10.745 58.068,11.881 58.068,13.502 C58.068,15.122 57.100,16.259 55.690,16.259 ZM55.406,11.902 C55.038,11.902 54.669,12.060 54.354,12.376 L54.354,14.628 C54.669,14.943 55.038,15.101 55.406,15.101 C56.164,15.101 56.690,14.449 56.690,13.502 C56.690,12.555 56.164,11.902 55.406,11.902 ZM47.554,15.764 C47.144,16.091 46.681,16.259 46.218,16.259 C44.818,16.259 43.840,15.122 43.840,13.502 C43.840,11.881 44.818,10.745 46.218,10.745 C46.681,10.745 47.144,10.913 47.554,11.229 L47.554,8.566 L48.912,8.566 L48.912,16.133 L47.554,16.133 L47.554,15.764 ZM47.554,12.376 C47.249,12.060 46.881,11.902 46.513,11.902 C45.744,11.902 45.218,12.555 45.218,13.502 C45.218,14.449 45.744,15.101 46.513,15.101 C46.881,15.101 47.249,14.943 47.554,14.628 L47.554,12.376 ZM39.535,13.870 C39.619,14.670 40.251,15.217 41.134,15.217 C41.619,15.217 42.155,15.038 42.702,14.722 L42.702,15.849 C42.103,16.122 41.503,16.259 40.913,16.259 C39.324,16.259 38.209,15.101 38.209,13.460 C38.209,11.871 39.303,10.745 40.808,10.745 C42.187,10.745 43.123,11.829 43.123,13.375 C43.123,13.523 43.123,13.691 43.102,13.870 L39.535,13.870 ZM40.756,11.786 C40.103,11.786 39.598,12.271 39.535,12.997 L41.829,12.997 C41.787,12.281 41.356,11.786 40.756,11.786 ZM35.988,12.618 L35.988,16.133 L34.641,16.133 L34.641,10.871 L35.988,10.871 L35.988,11.397 C36.367,10.976 36.830,10.745 37.282,10.745 C37.430,10.745 37.577,10.755 37.724,10.797 L37.724,11.997 C37.577,11.955 37.409,11.934 37.251,11.934 C36.809,11.934 36.335,12.176 35.988,12.618 ZM29.979,13.870 C30.063,14.670 30.694,15.217 31.578,15.217 C32.062,15.217 32.599,15.038 33.146,14.722 L33.146,15.849 C32.546,16.122 31.946,16.259 31.357,16.259 C29.768,16.259 28.653,15.101 28.653,13.460 C28.653,11.871 29.747,10.745 31.252,10.745 C32.630,10.745 33.567,11.829 33.567,13.375 C33.567,13.523 33.567,13.691 33.546,13.870 L29.979,13.870 ZM31.199,11.786 C30.547,11.786 30.042,12.271 29.979,12.997 L32.273,12.997 C32.231,12.281 31.799,11.786 31.199,11.786 ZM25.274,16.133 L24.200,12.555 L23.137,16.133 L21.927,16.133 L20.117,10.871 L21.464,10.871 L22.527,14.449 L23.590,10.871 L24.810,10.871 L25.873,14.449 L26.936,10.871 L28.283,10.871 L26.484,16.133 L25.274,16.133 ZM17.043,16.259 C15.454,16.259 14.328,15.112 14.328,13.502 C14.328,11.881 15.454,10.745 17.043,10.745 C18.632,10.745 19.748,11.881 19.748,13.502 C19.748,15.112 18.632,16.259 17.043,16.259 ZM17.043,11.871 C16.254,11.871 15.707,12.534 15.707,13.502 C15.707,14.470 16.254,15.133 17.043,15.133 C17.822,15.133 18.369,14.470 18.369,13.502 C18.369,12.534 17.822,11.871 17.043,11.871 ZM11.128,13.533 L9.918,13.533 L9.918,16.133 L8.571,16.133 L8.571,8.892 L11.128,8.892 C12.602,8.892 13.654,9.850 13.654,11.218 C13.654,12.586 12.602,13.533 11.128,13.533 ZM10.939,9.987 L9.918,9.987 L9.918,12.439 L10.939,12.439 C11.718,12.439 12.265,11.944 12.265,11.218 C12.265,10.482 11.718,9.987 10.939,9.987 Z"
+		/>
+		<path
+			fill-rule="evenodd"
+			opacity="0.502"
+			fill="rgb(66, 71, 112)"
+			d="M111.116,14.051 L105.557,14.051 C105.684,15.382 106.659,15.774 107.766,15.774 C108.893,15.774 109.781,15.536 110.555,15.146 L110.555,17.433 C109.784,17.861 108.765,18.169 107.408,18.169 C104.642,18.169 102.704,16.437 102.704,13.013 C102.704,10.121 104.348,7.825 107.049,7.825 C109.746,7.825 111.154,10.120 111.154,13.028 C111.154,13.303 111.129,13.898 111.116,14.051 ZM107.031,10.140 C106.321,10.140 105.532,10.676 105.532,11.955 L108.468,11.955 C108.468,10.677 107.728,10.140 107.031,10.140 ZM98.108,18.169 C97.114,18.169 96.507,17.750 96.099,17.451 L96.093,20.664 L93.254,21.268 L93.253,8.014 L95.753,8.014 L95.901,8.715 C96.293,8.349 97.012,7.825 98.125,7.825 C100.119,7.825 101.997,9.621 101.997,12.927 C101.997,16.535 100.139,18.169 98.108,18.169 ZM97.446,10.340 C96.795,10.340 96.386,10.578 96.090,10.903 L96.107,15.122 C96.383,15.421 96.780,15.661 97.446,15.661 C98.496,15.661 99.200,14.518 99.200,12.989 C99.200,11.504 98.485,10.340 97.446,10.340 ZM89.149,8.014 L91.999,8.014 L91.999,17.966 L89.149,17.966 L89.149,8.014 ZM89.149,4.836 L91.999,4.230 L91.999,6.543 L89.149,7.149 L89.149,4.836 ZM86.110,11.219 L86.110,17.966 L83.272,17.966 L83.272,8.014 L85.727,8.014 L85.905,8.853 C86.570,7.631 87.897,7.879 88.275,8.015 L88.275,10.625 C87.914,10.508 86.781,10.338 86.110,11.219 ZM80.024,14.475 C80.024,16.148 81.816,15.627 82.179,15.482 L82.179,17.793 C81.801,18.001 81.115,18.169 80.187,18.169 C78.502,18.169 77.237,16.928 77.237,15.247 L77.250,6.138 L80.022,5.548 L80.024,8.014 L82.180,8.014 L82.180,10.435 L80.024,10.435 L80.024,14.475 ZM76.485,14.959 C76.485,17.003 74.858,18.169 72.497,18.169 C71.518,18.169 70.448,17.979 69.392,17.525 L69.392,14.814 C70.345,15.332 71.559,15.721 72.500,15.721 C73.133,15.721 73.589,15.551 73.589,15.026 C73.589,13.671 69.273,14.181 69.273,11.038 C69.273,9.028 70.808,7.825 73.111,7.825 C74.052,7.825 74.992,7.969 75.933,8.344 L75.933,11.019 C75.069,10.552 73.972,10.288 73.109,10.288 C72.514,10.288 72.144,10.460 72.144,10.903 C72.144,12.181 76.485,11.573 76.485,14.959 Z"
+		/>
+	</svg>
+</template>
diff --git a/dashboard/src2/logo/RazorpayLogo.vue b/dashboard/src2/logo/RazorpayLogo.vue
new file mode 100644
index 0000000000..6dd7fabb21
--- /dev/null
+++ b/dashboard/src2/logo/RazorpayLogo.vue
@@ -0,0 +1,50 @@
+<template>
+	<svg
+		width="847"
+		height="180"
+		viewBox="0 0 847 180"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M223.833 67.1063C226.646 56.5688 225.484 48.5063 220.345 42.9188C215.207 37.3313 206.224 34.5188 193.398 34.4813H144.247L114.617 145.65H138.414L150.397 100.65H166.112C168.987 100.506 171.852 101.093 174.438 102.356C175.488 103.013 176.363 103.913 176.99 104.981C177.617 106.048 177.977 107.251 178.039 108.488L182.333 145.65H207.837L203.674 111.131C202.849 103.425 199.305 98.8876 193.154 97.5189C200.596 95.4659 207.387 91.5412 212.882 86.1189C218.191 80.893 221.977 74.3204 223.833 67.1063ZM201.049 67.5001C200.023 72.0579 197.231 76.0227 193.285 78.5251C189.534 80.8876 184.059 82.0501 177.101 82.0501H155.011L162.774 53.0063H184.884C191.822 53.0063 196.586 54.1876 199.211 56.5313C201.836 58.8751 202.399 62.5876 201.049 67.5001Z"
+			fill="#0C2651"
+		/>
+		<path
+			d="M292.544 66.1875L289.524 77.4375C288.266 73.4169 285.604 69.9828 282.023 67.7625C277.847 65.2563 273.032 64.0185 268.165 64.2C261.337 64.2018 254.627 65.9856 248.7 69.375C242.248 73.0744 236.676 78.1279 232.366 84.1875C227.616 90.7391 224.137 98.1228 222.108 105.956C219.98 112.928 219.53 120.303 220.795 127.481C221.761 133.151 224.795 138.261 229.309 141.825C234.216 145.333 240.161 147.09 246.187 146.813C251.568 146.825 256.888 145.673 261.782 143.437C266.676 141.2 271.028 137.932 274.541 133.856L271.428 145.594H294.625L315.778 66.1875H292.544ZM282.005 105.563C280.57 112.028 277.377 117.972 272.778 122.738C270.798 124.676 268.451 126.201 265.876 127.225C263.3 128.248 260.547 128.75 257.776 128.7C251.869 128.7 247.893 126.825 245.755 122.831C243.618 118.838 243.561 113.269 245.512 105.956C246.995 99.433 250.238 93.441 254.888 88.6313C256.875 86.6345 259.24 85.0539 261.845 83.9819C264.45 82.9098 267.242 82.3678 270.059 82.3875C275.835 82.3875 279.773 84.3938 281.798 88.3875C283.824 92.3813 284.03 98.025 282.042 105.544L282.005 105.563Z"
+			fill="#0C2651"
+		/>
+		<path
+			d="M398.534 66.2437H331.718L326.786 84.7687H365.679L314.54 129.375L310.171 145.744H379.181L384.113 127.219H342.388L394.371 81.9749L398.534 66.2437Z"
+			fill="#0C2651"
+		/>
+		<path
+			d="M471.614 69.1501C465.409 65.605 458.332 63.8766 451.192 64.1626C443.138 64.0929 435.167 65.7956 427.845 69.1501C420.723 72.4705 414.465 77.3925 409.561 83.5314C404.438 89.9708 400.738 97.4217 398.703 105.394C396.514 112.484 396.243 120.027 397.915 127.256C399.45 133.257 403.264 138.423 408.548 141.656C413.924 144.969 420.8 146.625 429.176 146.625C437.144 146.695 445.028 144.998 452.261 141.656C459.361 138.335 465.589 133.405 470.451 127.256C475.584 120.821 479.291 113.369 481.328 105.394C483.521 98.3039 483.786 90.7579 482.097 83.5314C480.62 77.5504 476.856 72.387 471.614 69.1501ZM458.074 105.356C455.993 113.156 452.936 119.006 448.81 122.869C444.829 126.661 439.512 128.73 434.014 128.625C421.888 128.625 417.893 120.869 422.031 105.356C424.069 97.6564 427.195 91.8501 431.408 87.9376C435.44 84.0812 440.831 81.9721 446.41 82.0689C452.186 82.0689 456.124 83.9439 458.149 87.9376C460.175 91.9314 460.118 97.6501 458.074 105.356Z"
+			fill="#0C2651"
+		/>
+		<path
+			d="M724.213 66.1875L721.194 77.4375C719.936 73.4169 717.274 69.9828 713.693 67.7625C709.524 65.2336 704.708 63.9759 699.835 64.1438C692.995 64.1586 686.278 65.962 680.351 69.375C673.894 73.0736 668.315 78.1271 663.998 84.1875C659.256 90.7434 655.777 98.1257 653.74 105.956C651.631 112.931 651.181 120.302 652.428 127.481C653.394 133.151 656.427 138.261 660.942 141.825C665.913 145.362 671.932 147.119 678.025 146.813C683.286 146.793 688.483 145.655 693.271 143.475C698.212 141.258 702.599 137.973 706.117 133.856L703.004 145.594H726.201L747.373 66.1875H724.213ZM713.618 105.563C712.19 112.026 709.004 117.97 704.41 122.738C702.426 124.67 700.079 126.191 697.504 127.215C694.93 128.238 692.178 128.743 689.408 128.7C683.482 128.7 679.507 126.825 677.369 122.831C675.231 118.838 675.194 113.269 677.125 105.956C678.616 99.4361 681.858 93.4461 686.502 88.6313C688.493 86.6357 690.862 85.056 693.469 83.9841C696.077 82.9122 698.872 82.3695 701.691 82.3875C707.467 82.3875 711.38 84.3875 713.431 88.3875C715.606 92.2688 715.662 98.025 713.618 105.544V105.563Z"
+			fill="#0C2651"
+		/>
+		<path
+			d="M554.182 87.5628L560.108 65.9441C557.609 64.8129 554.88 64.28 552.138 64.3878C546.778 64.3939 541.509 65.7755 536.836 68.4003C532.574 70.7348 528.875 73.973 525.997 77.8878L529.053 66.2441H505.875L484.534 145.65H508.05L519.096 104.194C520.39 98.6623 523.419 93.6891 527.741 90.0003C532.185 86.5295 537.707 84.7309 543.343 84.9191C547.118 84.9033 550.839 85.8109 554.182 87.5628Z"
+			fill="#0C2651"
+		/>
+		<path
+			d="M636.132 69.5437C631.334 65.8774 625.4 64.0126 619.367 64.275C613.497 64.2816 607.712 65.6825 602.49 68.3625C597.257 70.9353 592.746 74.7691 589.363 79.5187L589.457 78.975L593.413 66.2437H570.348L564.459 88.3125C564.459 88.5562 564.328 88.8187 564.272 89.0625L540.081 180H563.709L575.917 134.175C577.084 138.218 579.773 141.652 583.418 143.756C587.649 146.186 592.476 147.382 597.352 147.206C604.201 147.225 610.946 145.523 616.967 142.256C623.375 138.725 628.906 133.797 633.151 127.837C637.82 121.319 641.235 113.987 643.221 106.219C645.364 99.143 645.852 91.6692 644.646 84.375C643.659 78.5774 640.641 73.3201 636.132 69.5437ZM619.424 105.844C617.982 112.207 614.809 118.047 610.253 122.719C606.222 126.574 600.829 128.677 595.251 128.569C589.438 128.569 585.5 126.562 583.418 122.606C581.337 118.65 581.224 112.95 583.268 105.431C584.729 98.9159 587.976 92.9362 592.645 88.1625C594.628 86.2258 596.974 84.699 599.548 83.6695C602.123 82.64 604.875 82.1279 607.647 82.1625C613.273 82.1625 617.192 84.2625 619.236 88.4062C621.28 92.55 621.411 98.4187 619.424 105.844Z"
+			fill="#0C2651"
+		/>
+		<path
+			d="M846.013 63.5999H821.634L817.884 71.4374C817.584 71.8311 817.302 72.2249 816.965 72.7124L816.571 73.3499L786.566 115.312L780.341 66.2436H755.737L768.245 141.506L740.585 180H764.269L771.114 170.231C771.321 169.931 771.527 169.687 771.714 169.369L779.722 157.95L779.984 157.65L815.746 106.631L846.013 63.5999Z"
+			fill="#0C2651"
+		/>
+		<path
+			d="M54.3828 47.1751L47.2567 73.1251L87.4627 47.0438L61.2088 145.65H87.8565L126.656 6.10352e-05L54.3828 47.1751Z"
+			fill="#3395FF"
+		/>
+		<path
+			d="M11.0641 104.175L0 145.65H54.6643L77.0364 61.2748L11.0641 104.175Z"
+			fill="#0C2651"
+		/>
+	</svg>
+</template>
diff --git a/dashboard/src2/logo/StripeLogo.vue b/dashboard/src2/logo/StripeLogo.vue
new file mode 100644
index 0000000000..ec0f16009e
--- /dev/null
+++ b/dashboard/src2/logo/StripeLogo.vue
@@ -0,0 +1,48 @@
+<template>
+	<svg
+		version="1.1"
+		id="Layer_1"
+		xmlns="http://www.w3.org/2000/svg"
+		xmlns:xlink="http://www.w3.org/1999/xlink"
+		x="0px"
+		y="0px"
+		viewBox="0 0 468 222.5"
+		style="enable-background: new 0 0 468 222.5"
+		xml:space="preserve"
+	>
+		<g>
+			<path
+				fill="#635bff"
+				d="M414,113.4c0-25.6-12.4-45.8-36.1-45.8c-23.8,0-38.2,20.2-38.2,45.6c0,30.1,17,45.3,41.4,45.3
+		c11.9,0,20.9-2.7,27.7-6.5v-20c-6.8,3.4-14.6,5.5-24.5,5.5c-9.7,0-18.3-3.4-19.4-15.2h48.9C413.8,121,414,115.8,414,113.4z
+		 M364.6,103.9c0-11.3,6.9-16,13.2-16c6.1,0,12.6,4.7,12.6,16H364.6z"
+			/>
+			<path
+				fill="#635bff"
+				d="M301.1,67.6c-9.8,0-16.1,4.6-19.6,7.8l-1.3-6.2h-22v116.6l25-5.3l0.1-28.3c3.6,2.6,8.9,6.3,17.7,6.3
+		c17.9,0,34.2-14.4,34.2-46.1C335.1,83.4,318.6,67.6,301.1,67.6z M295.1,136.5c-5.9,0-9.4-2.1-11.8-4.7l-0.1-37.1
+		c2.6-2.9,6.2-4.9,11.9-4.9c9.1,0,15.4,10.2,15.4,23.3C310.5,126.5,304.3,136.5,295.1,136.5z"
+			/>
+			<polygon
+				fill="#635bff"
+				points="223.8,61.7 248.9,56.3 248.9,36 223.8,41.3 	"
+			/>
+			<rect x="223.8" y="69.3" fill="#635bff" width="25.1" height="87.5" />
+			<path
+				fill="#635bff"
+				d="M196.9,76.7l-1.6-7.4h-21.6v87.5h25V97.5c5.9-7.7,15.9-6.3,19-5.2v-23C214.5,68.1,202.8,65.9,196.9,76.7z"
+			/>
+			<path
+				fill="#635bff"
+				d="M146.9,47.6l-24.4,5.2l-0.1,80.1c0,14.8,11.1,25.7,25.9,25.7c8.2,0,14.2-1.5,17.5-3.3V135
+		c-3.2,1.3-19,5.9-19-8.9V90.6h19V69.3h-19L146.9,47.6z"
+			/>
+			<path
+				fill="#635bff"
+				d="M79.3,94.7c0-3.9,3.2-5.4,8.5-5.4c7.6,0,17.2,2.3,24.8,6.4V72.2c-8.3-3.3-16.5-4.6-24.8-4.6
+		C67.5,67.6,54,78.2,54,95.9c0,27.6,38,23.2,38,35.1c0,4.6-4,6.1-9.6,6.1c-8.3,0-18.9-3.4-27.3-8v23.8c9.3,4,18.7,5.7,27.3,5.7
+		c20.8,0,35.1-10.3,35.1-28.2C117.4,100.6,79.3,105.9,79.3,94.7z"
+			/>
+		</g>
+	</svg>
+</template>
diff --git a/dashboard/src2/pages/BillingInvoices.vue b/dashboard/src2/pages/BillingInvoices.vue
index 9f9f911eeb..87d5cd2be4 100644
--- a/dashboard/src2/pages/BillingInvoices.vue
+++ b/dashboard/src2/pages/BillingInvoices.vue
@@ -17,7 +17,7 @@
 				</template>
 			</template>
 		</Dialog>
-		<BuyPrepaidCreditsDialog
+		<AddPrepaidCreditsDialog
 			v-if="showBuyPrepaidCreditsDialog"
 			v-model="showBuyPrepaidCreditsDialog"
 			:minimumAmount="minimumAmount"
@@ -36,7 +36,7 @@ import ObjectList from '../components/ObjectList.vue';
 import InvoiceTable from '../components/InvoiceTable.vue';
 import { userCurrency, date } from '../utils/format';
 import { confirmDialog, icon, renderInDialog } from '../utils/components';
-import BuyPrepaidCreditsDialog from '../components/BuyPrepaidCreditsDialog.vue';
+import AddPrepaidCreditsDialog from '../components/billing/AddPrepaidCreditsDialog.vue';
 import { dayjsLocal } from '../utils/dayjs';
 import router from '../router';
 
@@ -46,7 +46,7 @@ export default {
 	components: {
 		ObjectList,
 		InvoiceTable,
-		BuyPrepaidCreditsDialog
+		AddPrepaidCreditsDialog
 	},
 	data() {
 		return {
diff --git a/dashboard/src2/pages/BillingOverview.vue b/dashboard/src2/pages/BillingOverview.vue
index fc0454e064..e2a8c25853 100644
--- a/dashboard/src2/pages/BillingOverview.vue
+++ b/dashboard/src2/pages/BillingOverview.vue
@@ -1,258 +1,42 @@
 <template>
-	<div class="p-5">
-		<div v-if="!$resources.upcomingInvoice.loading">
-			<div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
-				<div class="flex flex-col gap-2 rounded-md border p-4">
-					<div class="flex items-center justify-between">
-						<div class="text-sm text-gray-700">Current Billing Amount</div>
-						<Button @click="showUpcomingInvoiceDialog = true"> Details </Button>
-					</div>
-					<div class="text-lg font-medium">
-						{{ upcomingInvoice ? upcomingInvoice.formatted.total : '0.00' }}
-					</div>
-				</div>
-				<div class="flex flex-col gap-2 rounded-md border p-4">
-					<div class="flex items-center justify-between text-sm text-gray-700">
-						<div>Unpaid Amount</div>
-						<Button
-							:disabled="Boolean($resources.unpaidAmountDue.data == 0)"
-							@click="
-								showPrepaidCreditsDialog = true;
-								title = 'Pay your unpaid amount';
-							"
-							theme="gray"
-							iconLeft="credit-card"
-						>
-							Pay
-						</Button>
-					</div>
-					<div class="text-lg font-medium">
-						{{
-							($team?.doc?.currency == 'INR' ? '₹' : '$') +
-							' ' +
-							Math.ceil($resources.unpaidAmountDue.data)
-						}}
-					</div>
-				</div>
-				<div class="flex flex-col gap-2 rounded-md border p-4">
-					<div class="flex items-center justify-between text-sm text-gray-700">
-						<div>Credits Available</div>
-						<Button
-							@click="
-								() => {
-									if (!$team.doc?.billing_details?.name) {
-										showBillingDetailsDialog = true;
-										showMessage = true;
-										return;
-									}
-									showPrepaidCreditsDialog = true;
-								}
-							"
-							theme="gray"
-							iconLeft="plus"
-							>Add</Button
-						>
-					</div>
-					<div class="text-lg font-medium">
-						{{ availableCredits }}
-					</div>
-				</div>
-
-				<div class="flex flex-col gap-2 rounded-md border p-4">
-					<div class="flex items-center justify-between text-sm text-gray-700">
-						<div>Payment Mode</div>
-						<Button @click="showChangeModeDialog = true"> Change </Button>
-					</div>
-					<div class="text-lg font-medium">
-						{{ $team?.doc?.payment_mode || 'Not set' }}
-					</div>
-					<div class="flex gap-2 items-center">
-						<p class="text-sm text-gray-600">
-							{{ paymentModeDescription }}
-						</p>
-					</div>
-				</div>
-				<div class="flex flex-col gap-2 rounded-md border p-4">
-					<div class="flex items-center justify-between text-sm text-gray-700">
-						<div>Billing Details</div>
-						<Button @click="showBillingDetailsDialog = true"> Update </Button>
-					</div>
-					<div class="overflow-hidden text-base leading-5">
-						<span v-if="$team?.doc?.billing_details">
-							{{ billingDetailsSummary }}
-						</span>
-						<span v-else class="font-normal text-gray-600">Not set</span>
-					</div>
-				</div>
-				<div class="flex flex-col gap-2 rounded-md border p-4">
-					<div class="flex items-center justify-between text-sm text-gray-700">
-						<div>Payment Method</div>
-						<Button @click="showAddCardDialog = true">
-							{{ $team?.doc?.payment_method ? 'Change' : 'Add' }}
-						</Button>
-					</div>
-					<div class="overflow-hidden text-ellipsis text-base font-medium">
-						<div v-if="$team?.doc?.payment_method">
-							{{ $team.doc.payment_method.name_on_card }}
-							<span class="text-gray-500">••••</span>
-							{{ $team.doc.payment_method.last_4 }}
-							&middot;
-							<span class="font-normal text-gray-600">
-								Expiry {{ $team.doc.payment_method.expiry_month }}/{{
-									$team.doc.payment_method.expiry_year
-								}}
-							</span>
-						</div>
-
-						<span v-else class="font-normal text-gray-600">Not set</span>
-					</div>
-				</div>
-			</div>
-
-			<div class="mt-1">
-				<a
-					href="https://frappecloud.com/payment-options"
-					target="_blank"
-					class="text-sm text-gray-700 underline"
-				>
-					Alternative Payment Options
-				</a>
-			</div>
-		</div>
-
-		<div class="py-20 text-center" v-if="$resources.upcomingInvoice.loading">
-			<Button :loading="true" loadingText="Loading" />
-		</div>
-
-		<ChangePaymentModeDialog2 v-model="showChangeModeDialog" />
-
-		<BuyPrepaidCreditsDialog
-			:title="title"
-			v-if="showPrepaidCreditsDialog"
-			v-model="showPrepaidCreditsDialog"
-			:minimumAmount="minimumAmount"
-			@success="
-				() => {
-					$resources.upcomingInvoice.reload();
-					showPrepaidCreditsDialog = false;
-				}
-			"
-		/>
-
-		<UpdateBillingDetails
-			v-model="showBillingDetailsDialog"
-			:message="
-				showMessage ? 'Please update your billing details to add credits' : ''
-			"
-			@updated="
-				showBillingDetailsDialog = false
-				// $resources.billingDetails.reload();
-			"
-		/>
-
-		<StripeCardDialog v-model="showAddCardDialog" />
-
-		<Dialog
-			v-if="upcomingInvoice?.name"
-			v-model="showUpcomingInvoiceDialog"
-			:options="{ title: 'Total usage for this month', size: '3xl' }"
-		>
-			<template #body-content>
-				<InvoiceTable :invoiceId="upcomingInvoice.name" />
-			</template>
-		</Dialog>
+	<div
+		v-if="team.doc"
+		class="flex flex-1 flex-col gap-8 overflow-y-auto px-60 pt-6"
+	>
+		<BillingSummary />
+		<PaymentDetails />
+	</div>
+	<div v-else class="mt-12 flex flex-1 items-center justify-center">
+		<Spinner class="h-8" />
 	</div>
 </template>
-<script>
-import { defineAsyncComponent } from 'vue';
-import InvoiceTable from '../components/InvoiceTable.vue';
-import UpdateBillingDetails from '../components/UpdateBillingDetails.vue';
-
-export default {
-	name: 'BillingOverview',
-	components: {
-		InvoiceTable,
-		UpdateBillingDetails,
-		ChangePaymentModeDialog2: defineAsyncComponent(() =>
-			import('../components/ChangePaymentModeDialog.vue')
-		),
-		BuyPrepaidCreditsDialog: defineAsyncComponent(() =>
-			import('../components/BuyPrepaidCreditsDialog.vue')
-		),
-		StripeCardDialog: defineAsyncComponent(() =>
-			import('../components/StripeCardDialog.vue')
-		)
-	},
-	resources: {
-		upcomingInvoice: { url: 'press.api.billing.upcoming_invoice', auto: true },
-		unpaidAmountDue() {
-			return {
-				url: 'press.api.billing.total_unpaid_amount',
-				auto: true
-			};
-		}
-	},
-	data() {
-		return {
-			showPrepaidCreditsDialog: false,
-			showChangeModeDialog: false,
-			showBillingDetailsDialog: false,
-			showAddCardDialog: false,
-			showUpcomingInvoiceDialog: false,
-			title: 'Add credits to your account',
-			showMessage: false
-		};
-	},
-	mounted() {
-		this.$socket.on('balance_updated', () =>
-			this.$resources.upcomingInvoice.reload()
-		);
-	},
-	beforeUnmount() {
-		this.$socket.off('balance_updated');
-	},
-	computed: {
-		minimumAmount() {
-			const unpaidAmount = this.$resources.unpaidAmountDue.data;
-			const minimumDefault = this.$team?.doc?.currency == 'INR' ? 410 : 5;
-
-			return Math.ceil(
-				unpaidAmount && unpaidAmount > 0 ? unpaidAmount : minimumDefault
-			);
-		},
-		upcomingInvoice() {
-			return this.$resources.upcomingInvoice.data?.upcoming_invoice;
-		},
-		availableCredits() {
-			return this.$resources.upcomingInvoice.data?.available_credits;
-		},
-		billingDetailsSummary() {
-			const billingDetails = this.$team?.doc?.billing_details;
-			if (!billingDetails) {
-				return '';
-			}
-
-			const {
-				billing_name,
-				address_line1,
-				country,
-				city,
-				state,
-				pincode,
-				gstin
-			} = billingDetails;
 
-			return [billing_name, address_line1, city, state, country, pincode, gstin]
-				.filter(Boolean)
-				.join(', ');
-		},
-		paymentModeDescription() {
-			return {
-				Card: `Your card will be charged for monthly subscription`,
-				'Prepaid Credits': `You will be charged from your account balance for monthly subscription`,
-				'Paid By Partner': `Your partner will be charged for monthly subscription`
-			}[this.$team?.doc?.payment_mode];
-		}
-	}
-};
+<script setup>
+import BillingSummary from '../components/billing/BillingSummary.vue';
+import PaymentDetails from '../components/billing/PaymentDetails.vue';
+import { Spinner, createResource } from 'frappe-ui';
+import { computed, provide, inject } from 'vue';
+
+const team = inject('team');
+
+const upcomingInvoice = createResource({
+	url: 'press.api.billing.upcoming_invoice',
+	cache: 'upcomingInvoice',
+	auto: true
+});
+
+const unpaidInvoices = createResource({
+	url: 'press.api.billing.get_unpaid_invoices',
+	cache: ['unpaidInvoices', team.name],
+	auto: true
+});
+
+provide('billing', {
+	upcomingInvoice,
+	availableCredits: computed(() => upcomingInvoice.data?.available_credits),
+	currentBillingAmount: computed(
+		() => upcomingInvoice.data?.upcoming_invoice?.total
+	),
+	unpaidInvoices
+});
 </script>
diff --git a/dashboard/src2/utils/components.jsx b/dashboard/src2/utils/components.jsx
index 1c5f410cd2..8519a72f48 100644
--- a/dashboard/src2/utils/components.jsx
+++ b/dashboard/src2/utils/components.jsx
@@ -1,5 +1,5 @@
 import { FeatherIcon } from 'frappe-ui';
-import { h, isVNode, ref } from 'vue';
+import { h, isVNode, ref, defineAsyncComponent } from 'vue';
 import AddressableErrorDialog from '../components/AddressableErrorDialog.vue';
 import DialogWrapper from '../components/DialogWrapper.vue';
 import ConfirmDialog from '../dialogs/ConfirmDialog.vue';
@@ -60,3 +60,28 @@ export function renderDialog(component) {
 export function renderInDialog(component, options = {}) {
 	renderDialog(<DialogWrapper options={options}>{component}</DialogWrapper>);
 }
+
+export function cardBrandIcon(brand) {
+	const component = {
+		'master-card': defineAsyncComponent(() =>
+			import('@/components/icons/cards/MasterCard.vue')
+		),
+		visa: defineAsyncComponent(() =>
+			import('@/components/icons/cards/Visa.vue')
+		),
+		amex: defineAsyncComponent(() =>
+			import('@/components/icons/cards/Amex.vue')
+		),
+		jcb: defineAsyncComponent(() =>
+			import('@/components/icons/cards/JCB.vue')
+		),
+		generic: defineAsyncComponent(() =>
+			import('@/components/icons/cards/Generic.vue')
+		),
+		'union-pay': defineAsyncComponent(() =>
+			import('@/components/icons/cards/UnionPay.vue')
+		)
+	}[brand || 'generic'];
+
+	return h(component, { class: 'h-4 w-6' });
+}
\ No newline at end of file
diff --git a/dashboard/yarn.lock b/dashboard/yarn.lock
index 1fb2b15825..16288e49ff 100644
--- a/dashboard/yarn.lock
+++ b/dashboard/yarn.lock
@@ -532,6 +532,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.7.tgz#4d2d0f14820ede3b9807ea5fc36dfc8cd7da07f2"
   integrity sha512-7MbVt6xrwFQbunH2DNQsAP5sTGxfqQtErvBIvIMi6EQnbgUOuVYanvREcmFrOPhoXBrTtjhhP+lW+o5UfK+tDg==
 
+"@babel/helper-string-parser@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c"
+  integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==
+
 "@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
   version "7.19.1"
   resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz"
@@ -552,6 +557,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db"
   integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==
 
+"@babel/helper-validator-identifier@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7"
+  integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
+
 "@babel/helper-validator-option@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz#de52000a15a177413c8234fa3a8af4ee8102d0ac"
@@ -665,6 +675,13 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.7.tgz#9a5226f92f0c5c8ead550b750f5608e766c8ce85"
   integrity sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==
 
+"@babel/parser@^7.25.3":
+  version "7.26.2"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.2.tgz#fd7b6f487cfea09889557ef5d4eeb9ff9a5abd11"
+  integrity sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==
+  dependencies:
+    "@babel/types" "^7.26.0"
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.5.tgz#87245a21cd69a73b0b81bcda98d443d6df08f05e"
@@ -1468,6 +1485,14 @@
     "@babel/helper-validator-identifier" "^7.24.7"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.0.tgz#deabd08d6b753bc8e0f198f8709fb575e31774ff"
+  integrity sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
@@ -1788,6 +1813,11 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
 
+"@jridgewell/sourcemap-codec@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
 "@jridgewell/trace-mapping@^0.3.12":
   version "0.3.17"
   resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz"
@@ -2633,9 +2663,9 @@
     "@vue/babel-plugin-jsx" "^1.1.5"
 
 "@vitejs/plugin-vue@^5.0.3":
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.0.3.tgz#164b36653910d27c130cf6c945b4bd9bde5bcbee"
-  integrity sha512-b8S5dVS40rgHdDrw+DQi/xOM9ed+kSRZzfm1T74bMmBDCd8XO87NKlFYInzCtwvtWwXZvo1QxE2OSspTATWrbA==
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz#d1491f678ee3af899f7ae57d9c21dc52a65c7133"
+  integrity sha512-cxh314tzaWwOLqVes2gnnCtvBDcM1UMdn+iFR+UjAn411dPT3tOmqrJjbMd7koZpMAmBM/GqeV4n9ge7JSiJJQ==
 
 "@volar/language-core@2.1.4", "@volar/language-core@~2.1.3":
   version "2.1.4"
@@ -2713,6 +2743,17 @@
     estree-walker "^2.0.2"
     source-map-js "^1.0.2"
 
+"@vue/compiler-core@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.13.tgz#b0ae6c4347f60c03e849a05d34e5bf747c9bda05"
+  integrity sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==
+  dependencies:
+    "@babel/parser" "^7.25.3"
+    "@vue/shared" "3.5.13"
+    entities "^4.5.0"
+    estree-walker "^2.0.2"
+    source-map-js "^1.2.0"
+
 "@vue/compiler-dom@3.3.4":
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz#f56e09b5f4d7dc350f981784de9713d823341151"
@@ -2729,7 +2770,30 @@
     "@vue/compiler-core" "3.4.21"
     "@vue/shared" "3.4.21"
 
-"@vue/compiler-sfc@3.3.4", "@vue/compiler-sfc@^3.1.0":
+"@vue/compiler-dom@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz#bb1b8758dbc542b3658dda973b98a1c9311a8a58"
+  integrity sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==
+  dependencies:
+    "@vue/compiler-core" "3.5.13"
+    "@vue/shared" "3.5.13"
+
+"@vue/compiler-sfc@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz#461f8bd343b5c06fac4189c4fef8af32dea82b46"
+  integrity sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==
+  dependencies:
+    "@babel/parser" "^7.25.3"
+    "@vue/compiler-core" "3.5.13"
+    "@vue/compiler-dom" "3.5.13"
+    "@vue/compiler-ssr" "3.5.13"
+    "@vue/shared" "3.5.13"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.11"
+    postcss "^8.4.48"
+    source-map-js "^1.2.0"
+
+"@vue/compiler-sfc@^3.1.0":
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz#b19d942c71938893535b46226d602720593001df"
   integrity sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==
@@ -2776,6 +2840,14 @@
     "@vue/compiler-dom" "3.4.21"
     "@vue/shared" "3.4.21"
 
+"@vue/compiler-ssr@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz#e771adcca6d3d000f91a4277c972a996d07f43ba"
+  integrity sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==
+  dependencies:
+    "@vue/compiler-dom" "3.5.13"
+    "@vue/shared" "3.5.13"
+
 "@vue/devtools-api@^6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
@@ -2812,37 +2884,38 @@
     estree-walker "^2.0.2"
     magic-string "^0.30.0"
 
-"@vue/reactivity@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.3.4.tgz#a27a29c6cd17faba5a0e99fbb86ee951653e2253"
-  integrity sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==
+"@vue/reactivity@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.5.13.tgz#b41ff2bb865e093899a22219f5b25f97b6fe155f"
+  integrity sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==
   dependencies:
-    "@vue/shared" "3.3.4"
+    "@vue/shared" "3.5.13"
 
-"@vue/runtime-core@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.3.4.tgz#4bb33872bbb583721b340f3088888394195967d1"
-  integrity sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==
+"@vue/runtime-core@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.5.13.tgz#1fafa4bf0b97af0ebdd9dbfe98cd630da363a455"
+  integrity sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==
   dependencies:
-    "@vue/reactivity" "3.3.4"
-    "@vue/shared" "3.3.4"
+    "@vue/reactivity" "3.5.13"
+    "@vue/shared" "3.5.13"
 
-"@vue/runtime-dom@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz#992f2579d0ed6ce961f47bbe9bfe4b6791251566"
-  integrity sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==
+"@vue/runtime-dom@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz#610fc795de9246300e8ae8865930d534e1246215"
+  integrity sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==
   dependencies:
-    "@vue/runtime-core" "3.3.4"
-    "@vue/shared" "3.3.4"
-    csstype "^3.1.1"
+    "@vue/reactivity" "3.5.13"
+    "@vue/runtime-core" "3.5.13"
+    "@vue/shared" "3.5.13"
+    csstype "^3.1.3"
 
-"@vue/server-renderer@3.3.4":
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.3.4.tgz#ea46594b795d1536f29bc592dd0f6655f7ea4c4c"
-  integrity sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==
+"@vue/server-renderer@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.5.13.tgz#429ead62ee51de789646c22efe908e489aad46f7"
+  integrity sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==
   dependencies:
-    "@vue/compiler-ssr" "3.3.4"
-    "@vue/shared" "3.3.4"
+    "@vue/compiler-ssr" "3.5.13"
+    "@vue/shared" "3.5.13"
 
 "@vue/shared@3.3.4":
   version "3.3.4"
@@ -2854,6 +2927,11 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.21.tgz#de526a9059d0a599f0b429af7037cd0c3ed7d5a1"
   integrity sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==
 
+"@vue/shared@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.13.tgz#87b309a6379c22b926e696893237826f64339b6f"
+  integrity sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==
+
 "@vue/test-utils@^2.0.0-rc.19":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.4.1.tgz#7db869b4142d2a5fce4ad6c6dfa01c8ea524f26c"
@@ -3793,10 +3871,10 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^3.1.1:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
-  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+csstype@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
 dash-get@^1.0.2:
   version "1.0.2"
@@ -5593,6 +5671,13 @@ magic-string@^0.30.1:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
+magic-string@^0.30.11:
+  version "0.30.14"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.14.tgz#e9bb29870b81cfc1ec3cc656552f5a7fcbf19077"
+  integrity sha512-5c99P1WKTed11ZC0HMJOj6CDIue6F8ySu+bJL+85q1zBEIY8IklrJ1eiKC2NDRh3Ct3FcvmJPyQHb9erXMTJNw==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.5.0"
+
 make-dir@^3.0.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz"
@@ -6165,6 +6250,11 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
+picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
@@ -6383,6 +6473,15 @@ postcss@^8.4.35:
     picocolors "^1.0.0"
     source-map-js "^1.2.0"
 
+postcss@^8.4.48:
+  version "8.4.49"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19"
+  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz"
@@ -7063,6 +7162,11 @@ source-map-js@^1.2.0:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
 
+source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
 source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
@@ -7739,16 +7843,16 @@ vue-tsc@^2.0.7:
     "@vue/language-core" "2.0.7"
     semver "^7.5.4"
 
-vue@^3.3.4:
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"
-  integrity sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==
+vue@^3.4.12:
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.13.tgz#9f760a1a982b09c0c04a867903fc339c9f29ec0a"
+  integrity sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==
   dependencies:
-    "@vue/compiler-dom" "3.3.4"
-    "@vue/compiler-sfc" "3.3.4"
-    "@vue/runtime-dom" "3.3.4"
-    "@vue/server-renderer" "3.3.4"
-    "@vue/shared" "3.3.4"
+    "@vue/compiler-dom" "3.5.13"
+    "@vue/compiler-sfc" "3.5.13"
+    "@vue/runtime-dom" "3.5.13"
+    "@vue/server-renderer" "3.5.13"
+    "@vue/shared" "3.5.13"
 
 w3c-hr-time@^1.0.2:
   version "1.0.2"
diff --git a/press/api/billing.py b/press/api/billing.py
index 6c09f2219d..ff446cffb1 100644
--- a/press/api/billing.py
+++ b/press/api/billing.py
@@ -360,7 +360,7 @@ def finalize_invoices():
 @frappe.whitelist()
 def unpaid_invoices():
 	team = get_current_team()
-	invoices = frappe.get_all(
+	return frappe.db.get_all(
 		"Invoice",
 		{
 			"team": team,
@@ -371,7 +371,24 @@ def unpaid_invoices():
 		order_by="creation asc",
 	)
 
-	return invoices  # noqa: RET504
+
+@frappe.whitelist()
+def get_unpaid_invoices():
+	team = get_current_team()
+	unpaid_invoices = frappe.db.get_all(
+		"Invoice",
+		{
+			"team": team,
+			"status": "Unpaid",
+			"type": "Subscription",
+		},
+		["name", "status", "period_end", "currency", "amount_due", "total"],
+		order_by="creation asc",
+	)
+
+	if len(unpaid_invoices) == 1:
+		return frappe.get_doc("Invoice", unpaid_invoices[0].name)
+	return unpaid_invoices
 
 
 @frappe.whitelist()