diff --git a/frontend/src/components/Settings/Transactions/TransactionDetails.vue b/frontend/src/components/Settings/Transactions/TransactionDetails.vue
index 832db3fd..efd2cc88 100644
--- a/frontend/src/components/Settings/Transactions/TransactionDetails.vue
+++ b/frontend/src/components/Settings/Transactions/TransactionDetails.vue
@@ -1,12 +1,33 @@
 <template>
 	<div class="flex flex-col h-full text-base">
-		<div class="flex items-center space-x-2 mb-8 -ml-1.5">
-			<ChevronLeft
-				class="size-5 stroke-1.5 text-ink-gray-7 cursor-pointer"
-				@click="emit('updateStep', 'list')"
-			/>
-			<div class="text-xl font-semibold text-ink-gray-9">
-				{{ __('Transaction Details') }}
+		<div class="flex items-center justify-between mb-10 -ml-1.5">
+			<div class="flex items-center space-x-2">
+				<ChevronLeft
+					class="size-5 stroke-1.5 text-ink-gray-7 cursor-pointer"
+					@click="emit('updateStep', 'list')"
+				/>
+				<div class="text-xl font-semibold text-ink-gray-9">
+					{{ __('Transaction Details') }}
+				</div>
+			</div>
+			<div class="space-x-2">
+				<Button
+					v-if="
+						transactionData?.payment_for_document_type &&
+						transactionData?.payment_for_document
+					"
+					@click="openDetails()"
+				>
+					{{ __('Open the ') }}
+					{{
+						transactionData.payment_for_document_type == 'LMS Course'
+							? __('Course')
+							: __('Batch')
+					}}
+				</Button>
+				<Button variant="solid" @click="saveTransaction()">
+					{{ __('Save') }}
+				</Button>
 			</div>
 		</div>
 		<div v-if="transactionData" class="overflow-y-auto">
@@ -21,6 +42,12 @@
 					type="checkbox"
 					v-model="transactionData.payment_for_certificate"
 				/>
+				<FormControl
+					:label="__('Member Consent')"
+					type="checkbox"
+					v-model="transactionData.member_consent"
+					:disabled="true"
+				/>
 			</div>
 
 			<div class="grid grid-cols-3 gap-5 mt-5">
@@ -28,22 +55,27 @@
 					:label="__('Member')"
 					doctype="User"
 					v-model="transactionData.member"
+					:required="true"
 				/>
 				<FormControl
 					:label="__('Billing Name')"
 					v-model="transactionData.billing_name"
+					:required="true"
 				/>
 				<Link
 					:label="__('Source')"
 					v-model="transactionData.source"
 					doctype="LMS Source"
 				/>
-				<Link
+				<FormControl
+					type="select"
+					:options="documentTypeOptions"
 					:label="__('Payment For Document Type')"
 					v-model="transactionData.payment_for_document_type"
 					doctype="DocType"
 				/>
 				<Link
+					v-if="transactionData.payment_for_document_type"
 					:label="__('Payment For Document')"
 					v-model="transactionData.payment_for_document"
 					:doctype="transactionData.payment_for_document_type"
@@ -58,8 +90,13 @@
 					:label="__('Currency')"
 					v-model="transactionData.currency"
 					doctype="Currency"
+					:required="true"
+				/>
+				<FormControl
+					:label="__('Amount')"
+					v-model="transactionData.amount"
+					:required="true"
 				/>
-				<FormControl :label="__('Amount')" v-model="transactionData.amount" />
 				<FormControl
 					v-if="transactionData.amount_with_gst"
 					:label="__('Amount with GST')"
@@ -103,6 +140,7 @@
 					:label="__('Address')"
 					v-model="transactionData.address"
 					doctype="Address"
+					:required="true"
 				/>
 				<FormControl :label="__('GSTIN')" v-model="transactionData.gstin" />
 				<FormControl :label="__('PAN')" v-model="transactionData.pan" />
@@ -116,25 +154,12 @@
 				/>
 			</div>
 		</div>
-		<div class="space-x-2 mt-auto ml-auto">
-			<Button @click="openDetails()">
-				{{ __('Open the ') }}
-				{{
-					data.payment_for_document_type == 'LMS Course'
-						? __('Course')
-						: __('Batch')
-				}}
-			</Button>
-			<Button variant="solid" @click="saveTransaction()">
-				{{ __('Save') }}
-			</Button>
-		</div>
 	</div>
 </template>
 <script setup lang="ts">
-import { Button, FormControl } from 'frappe-ui'
+import { Button, FormControl, toast } from 'frappe-ui'
 import { useRouter } from 'vue-router'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { ChevronLeft } from 'lucide-vue-next'
 import Link from '@/components/Controls/Link.vue'
 
@@ -148,21 +173,40 @@ const props = defineProps<{
 	data: any
 }>()
 
-watch(
-	() => props.data,
-	(newVal) => {
-		transactionData.value = newVal ? { ...newVal } : null
-	},
-	{ immediate: true }
-)
+const saveTransaction = () => {
+	if (props.data?.name) {
+		updateTransaction()
+	} else {
+		createTransaction()
+	}
+}
 
-const saveTransaction = (close: () => void) => {
-	props.transactions.value.setValue
+const createTransaction = () => {
+	console.log(props.transactions)
+	props.transactions.insert
 		.submit({
 			...transactionData.value,
 		})
 		.then(() => {
-			close()
+			toast.success(__('Transaction created successfully'))
+		})
+		.catch((err: any) => {
+			toast.error(__(err.messages?.[0] || err))
+			console.error(err)
+		})
+}
+
+const updateTransaction = () => {
+	props.transactions.setValue
+		.submit({
+			...transactionData.value,
+		})
+		.then(() => {
+			toast.success(__('Transaction updated successfully'))
+		})
+		.catch((err: any) => {
+			toast.error(__(err.messages?.[0] || err))
+			console.error(err)
 		})
 }
 
@@ -181,4 +225,48 @@ const openDetails = () => {
 		show.value = false
 	}
 }
+
+const emptyTransactionData = {
+	payment_received: false,
+	payment_for_certificate: false,
+	member: null,
+	billing_name: null,
+	source: null,
+	payment_for_document_type: null,
+	payment_for_document: null,
+	member_consent: false,
+	currency: null,
+	amount: null,
+	amount_with_gst: null,
+	coupon: null,
+	coupon_code: null,
+	discount_amount: null,
+	original_amount: null,
+	order_id: null,
+	payment_id: null,
+	gstin: null,
+	pan: null,
+	address: null,
+}
+
+watch(
+	() => props.data,
+	(newVal) => {
+		transactionData.value = newVal ? { ...newVal } : emptyTransactionData
+	},
+	{ immediate: true }
+)
+
+const documentTypeOptions = computed(() => {
+	return [
+		{
+			label: __('Course'),
+			value: 'LMS Course',
+		},
+		{
+			label: __('Batch'),
+			value: 'LMS Batch',
+		},
+	]
+})
 </script>
diff --git a/frontend/src/components/Settings/Transactions/TransactionList.vue b/frontend/src/components/Settings/Transactions/TransactionList.vue
index 40a2289e..305b24a8 100644
--- a/frontend/src/components/Settings/Transactions/TransactionList.vue
+++ b/frontend/src/components/Settings/Transactions/TransactionList.vue
@@ -1,12 +1,20 @@
 <template>
 	<div class="flex min-h-0 flex-col text-base">
-		<div class="mb-5">
-			<div class="text-xl font-semibold mb-1 text-ink-gray-9">
-				{{ __(label) }}
-			</div>
-			<div class="text-ink-gray-6 leading-5">
-				{{ __(description) }}
+		<div class="flex items-center justify-between mb-5">
+			<div>
+				<div class="text-xl font-semibold mb-1 text-ink-gray-9">
+					{{ __(label) }}
+				</div>
+				<div class="text-ink-gray-6 leading-5">
+					{{ __(description) }}
+				</div>
 			</div>
+			<Button @click="emit('updateStep', 'new', null)">
+				<template #prefix>
+					<FeatherIcon name="plus" class="h-4 w-4 stroke-1.5" />
+				</template>
+				{{ __('Add Transaction') }}
+			</Button>
 		</div>
 
 		<div class="flex items-center space-x-5 mb-4">
diff --git a/frontend/src/components/Settings/Transactions/Transactions.vue b/frontend/src/components/Settings/Transactions/Transactions.vue
index 74aeaac4..d2045b8a 100644
--- a/frontend/src/components/Settings/Transactions/Transactions.vue
+++ b/frontend/src/components/Settings/Transactions/Transactions.vue
@@ -1,6 +1,13 @@
 <template>
+	<TransactionDetails
+		v-if="step == 'new'"
+		:transactions="transactions"
+		:data="data"
+		v-model:show="show"
+		@updateStep="updateStep"
+	/>
 	<TransactionList
-		v-if="step === 'list'"
+		v-else-if="step === 'list'"
 		:label="props.label"
 		:description="props.description"
 		:transactions="transactions"
@@ -33,6 +40,8 @@ const updateStep = (newStep: 'list' | 'new' | 'edit', newData: any) => {
 	step.value = newStep
 	if (newData) {
 		data.value = newData
+	} else {
+		data.value = null
 	}
 }