diff --git a/auth-web/src/views/pay/RefundView.vue b/auth-web/src/views/pay/RefundView.vue
index 9f10e9c6af..43811ed9c5 100644
--- a/auth-web/src/views/pay/RefundView.vue
+++ b/auth-web/src/views/pay/RefundView.vue
@@ -1,128 +1,183 @@
 <template>
-  <!-- TODO: Note this code is very rough and will need to be rewritten. -->
   <v-app>
     <v-container>
       <h2 class="mb-4">
         MVP Refunds - OPS only for now.
       </h2>
       <v-text-field
-        v-model="invoiceId"
-        label="Invoice Number EG. (REG00012343 or 12343)"
+          id="invoice-id-input"
+          v-model="invoiceId"
+          label="Invoice Number EG. (REG00012343 or 12343)"
       />
       <v-btn
-        :disabled="!invoiceId.trim()"
-        @click="fetchInvoice"
+          id="fetch-invoice-btn"
+          :disabled="!invoiceId.trim()"
+          @click="fetchInvoice"
       >
         Fetch Invoice
       </v-btn>
       <v-radio-group
-        v-model="refundType"
-        row
+          id="refund-type-radio-group"
+          v-model="refundType"
+          row
       >
         <v-radio
-          label="Full refund"
-          :value="RefundType.FULL"
+            id="radio-full-refund"
+            label="Full refund"
+            :value="RefundType.FULL"
         />
         <v-radio
-          label="Partial Refund"
-          :value="RefundType.PARTIAL"
+            id="radio-partial-refund"
+            label="Partial Refund"
+            :value="RefundType.PARTIAL"
         />
       </v-radio-group>
-      <v-simple-table>
-        <thead>
-          <tr>
-            <th id="line-item-number-header">
-              Line Item #
-            </th>
-            <th id="description-header">
-              Description
-            </th>
-            <th id="filing-fee-header">
-              Filing Fee
-            </th>
-            <th id="priority-fee-header">
-              Priority Fees
-            </th>
-            <th id="future-effective-fee-header">
-              Future Effective Fees
-            </th>
-            <th id="service-fee-header">
-              Service Fees
-            </th>
-            <th
-              v-if="refundType === RefundType.PARTIAL"
-              id="action-header"
-            >
-              Actions
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="(item, index) in paymentLineItems"
-            :key="index"
-          >
-            <td>{{ index + 1 }}</td>
-            <td>{{ item.description }}</td>
-            <td>
-              <v-text-field
-                v-model.number="item.total"
-                type="number"
-                :disabled="refundType === RefundType.FULL"
-                dense
-                hide-details="auto"
-              />
-            </td>
-
-            <td>
-              <v-text-field
-                v-model.number="item.priorityFees"
-                type="number"
-                :disabled="refundType === RefundType.FULL"
-                dense
-                hide-details="auto"
-              />
-            </td>
-            <td>
-              <v-text-field
-                v-model.number="item.futureEffectiveFees"
-                type="number"
-                :disabled="refundType === RefundType.FULL"
-                dense
-                hide-details="auto"
-              />
-            </td>
-            <td>
-              <v-text-field
-                v-model.number="item.serviceFees"
-                type="number"
-                :disabled="refundType === RefundType.FULL"
-                dense
-                hide-details="auto"
-              />
-            </td>
-            <td v-if="refundType === RefundType.PARTIAL">
-              <v-btn
-                small
-                @click="changeRefundPayload(item, index)"
+      <v-alert
+          id="partial-refund-cc-warning"
+          v-if="showRefundCreditCardError()"
+          class="mt-4"
+          border="left"
+          dense
+          outlined
+          prominent
+          shaped
+          text
+          :type="'error'"
+      >
+        Partial Refunds can only be applied to credit card invoices.
+      </v-alert>
+      <div
+          id="partial-refund-add-refund-info"
+          v-if="refundType === RefundType.PARTIAL"
+          class="mb-4"
+      >
+        <h4>
+          Specify the fee amounts to be refunded and click 'Add to Refund', the refund summary entries will be appear for review.
+        </h4>
+      </div>
+      <v-form ref="form">
+        <v-simple-table id="invoice-line-items-table">
+          <thead id="invoice-line-items-headers">
+            <tr>
+              <th
+                  :id="'header-items-' + index"
+                  v-for="(item, index) in headers"
+                  :key="index"
               >
-                {{ refundedItems.includes(index) ? 'Remove from Refund' : 'Add to Refund' }}
-              </v-btn>
-            </td>
-          </tr>
-        </tbody>
-      </v-simple-table>
+                {{ item }}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              id="item-row"
+              v-for="(item, index) in paymentLineItems"
+              :key="index"
+            >
+              <td>{{ index + 1 }}</td>
+              <td>{{ item.description }}</td>
+              <td>
+                <v-text-field
+                  v-model.number="item.filingFees"
+                  type="number"
+                  prefix="$"
+                  :suffix="`/ $${item.filingFeesOriginal}`"
+                  :disabled="disableFeeInputs() || isRefundItemAdded(index)"
+                  :rules="[validateRefundFeeAmount(item.filingFeesOriginal)]"
+                  dense
+                  hide-details="auto"
+                />
+              </td>
+              <td>
+                <v-text-field
+                  v-model.number="item.priorityFees"
+                  type="number"
+                  prefix="$"
+                  :suffix="`/ $${item.priorityFeesOriginal}`"
+                  :disabled="disableFeeInputs() || isRefundItemAdded(index)"
+                  :rules="[validateRefundFeeAmount(item.priorityFeesOriginal)]"
+                  dense
+                  hide-details="auto"
+                />
+              </td>
+              <td>
+                <v-text-field
+                  v-model.number="item.futureEffectiveFees"
+                  type="number"
+                  prefix="$"
+                  :suffix="`/ $${item.futureEffectiveFeesOriginal}`"
+                  :disabled="disableFeeInputs() || isRefundItemAdded(index)"
+                  :rules="[validateRefundFeeAmount(item.futureEffectiveFeesOriginal)]"
+                  dense
+                  hide-details="auto"
+                />
+              </td>
+              <td>
+                <v-text-field
+                  v-model.number="item.serviceFees"
+                  type="number"
+                  prefix="$"
+                  :suffix="`/ $${item.serviceFeesOriginal}`"
+                  :disabled="disableFeeInputs() || isRefundItemAdded(index)"
+                  :rules="[validateRefundFeeAmount(item.serviceFeesOriginal)]"
+                  dense
+                  hide-details="auto"
+                />
+              </td>
+              <td v-if="showPartialRefundAction()">
+                <v-btn
+                    id="partial-refund-action-btn"
+                    small
+                    :disabled="disablePartialRefundAction(item)"
+                    @click="changeRefundPayload(item, index)"
+                >
+                  {{ isRefundItemAdded(index) ? 'Remove from Refund' : 'Add to Refund' }}
+                </v-btn>
+              </td>
+            </tr>
+          </tbody>
+        </v-simple-table>
+      </v-form>
       <v-divider class="mb-4" />
       <h2 class="mb-4">
         Refund Summary:
       </h2>
-      <!-- TODO: this wont work for multiple payment line items, but we can worry about that after the demo. -->
-      <div v-if="totalRefund.baseFee">
-        Base Fee from: ${{ paymentLineItems[0].filingFees.toFixed(2) }} -> ${{ totalRefund.baseFee.toFixed(2) }}
-      </div>
-      <div v-if="totalRefund.serviceFee">
-        Service Fee from: ${{ totalRefund.serviceFee.toFixed(2) }} -> ${{ totalRefund.serviceFee.toFixed(2) }}
+      <div
+          id="partial-refund-summary-info"
+          v-if="refundType === RefundType.PARTIAL"
+          class="mb-4"
+      >
+        <h4>
+          By pressing the refund action, the specified amounts in the summary below will be refunded.
+        </h4>
       </div>
+      <v-simple-table
+          id="refund-summary-table"
+          v-if="refundType === RefundType.PARTIAL">
+        <thead id="refund-summary-headers">
+        <tr>
+          <th
+              :id="'header-summary-items-' + index"
+              v-for="(item, index) in headers.slice(0, -1)"
+              :key="index"
+          >
+            {{ item }}
+          </th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="(item, index) in refundItems"
+            :key="index"
+        >
+          <td>{{ item + 1 }}</td>
+          <td>{{ paymentLineItems[item].description }}</td>
+          <td>${{ paymentLineItems[item].filingFees }}</td>
+          <td>${{ paymentLineItems[item].priorityFees }}</td>
+          <td>${{ paymentLineItems[item].futureEffectiveFees }}</td>
+          <td>${{ paymentLineItems[item].serviceFees }}</td>
+        </tr>
+        </tbody>
+      </v-simple-table>
       <div
         v-if="refundType === RefundType.FULL && paymentLineItems.length > 0"
       >
@@ -133,13 +188,14 @@
       <v-text-field
         v-model="refundComment"
         label="Refund Comment"
-        :rules="[v => !!v || 'Refund comment is required']"
+        :rules="[validateRefundComment]"
         required
       />
       <br>
       <v-btn
-        :disabled="isFinalizeDisabled"
-        @click="processRefund"
+          id="process-refund-btn"
+          :disabled="isRefundSubmitDisabled"
+          @click="processRefund"
       >
         REFUND
       </v-btn>
@@ -161,9 +217,9 @@
 </template>
 
 <script lang="ts">
-
-import { computed, defineComponent, reactive, toRefs, watch } from '@vue/composition-api'
+import { computed, defineComponent, nextTick, reactive, toRefs, watch } from '@vue/composition-api'
 import { Invoice } from '@/models/invoice'
+import { PaymentTypes } from '@/util/constants'
 import { useOrgStore } from '@/stores/org'
 
 enum RefundType {
@@ -181,71 +237,134 @@ enum RefundLineTypes {
 export default defineComponent({
   name: 'PaymentRefund',
   setup () {
+    const headers = [
+      'Line Item #',
+      'Description',
+      'Filing Fee',
+      'Priority Fee',
+      'Future Effective Fees',
+      'Service Fees',
+      'Action']
     const state = reactive({
+      form: null,
+      shouldValidate: true,
+      disableSubmit: false,
       invoiceId: '',
+      invoicePaymentMethod: '',
       invoicePaid: 0,
       paymentLineItems: [],
-      refundedItems: [],
+      refundItems: [],
       orgStore: useOrgStore(),
       refundComment: '',
       totalRefund: {
         baseFee: 0,
         serviceFee: 0,
-        priorityFee: 0
+        priorityFee: 0,
+        futureEffectiveFee: 0
       },
       refundType: RefundType.FULL,
       refundResponse: ''
     })
 
+    const validateRefundComment = (value: string) => {
+      if (!state.shouldValidate) return true
+      return !!value || 'Refund comment is required'
+    }
+
+    const validateRefundFeeAmount = (maxAmount: number) => (value: number) => {
+      if (!state.shouldValidate) return true
+      return (value <= maxAmount) || `Refund amount exceeds $${maxAmount}`
+    }
+
+    function showRefundCreditCardError() {
+      if (state.refundType !== RefundType.PARTIAL) return false
+      return state.invoicePaymentMethod && state.invoicePaymentMethod !== PaymentTypes.DIRECT_PAY
+    }
+
+    function disableFeeInputs() {
+      return state.refundType === RefundType.FULL ||
+          state.invoicePaymentMethod !== PaymentTypes.DIRECT_PAY ||
+          state.disableSubmit
+    }
+
+    function disablePartialRefundAction(item: any) {
+      return item.filingFees > item.filingFeesOriginal ||
+          item.priorityFees > item.priorityFeesOriginal ||
+          item.futureEffectiveFees > item.futureEffectiveFeesOriginal ||
+          item.serviceFees > item.serviceFeesOriginal
+    }
+
+    function showPartialRefundAction() {
+      return !disableFeeInputs() && state.refundType === RefundType.PARTIAL
+    }
+
+    function isRefundItemAdded(index) {
+      return state.refundItems.includes(index)
+    }
+
     function matchInvoiceId (invoiceId: string) {
       // Should resolve REG0031233 -> 31233 etc.
       return invoiceId.match(/\d+/)
     }
 
+    function updateInvoiceState(invoice: any) {
+      state.invoicePaid = invoice.paid
+      state.invoicePaymentMethod = invoice.paymentMethod
+      state.paymentLineItems = invoice.lineItems ? updateInvoiceLineItems(invoice.lineItems) : []
+    }
+
+    function updateInvoiceLineItems(lineItems: any) {
+      return lineItems.map(item => ({
+        ...item,
+        ...Object.fromEntries(
+          Object.entries(item).map(([key, value]) => [`${key}Original`, value])
+        )
+      }))
+    }
+
     function fetchInvoice () {
       const invoiceId = matchInvoiceId(state.invoiceId)
       state.orgStore.getInvoice({ invoiceId: invoiceId }).then((invoice: Invoice) => {
-        state.invoicePaid = invoice.paid
-        state.paymentLineItems = invoice.lineItems ? invoice.lineItems.map(item => ({
-          ...item,
-          isEditable: true
-        })) : []
+        updateInvoiceState(invoice)
       }).catch((error: Error) => console.error('Failed to fetch invoice:', error))
       clearRefundState()
     }
 
-    async function processRefund () {
-      try {
-        let refundPayload = {
-          reason: state.refundComment,
-          refundRevenue: []
-        }
-
-        if (state.refundType === RefundType.PARTIAL) {
-          state.refundedItems.forEach(index => {
-            const item = state.paymentLineItems[index]
-            const feeTypes = [
-              { key: 'total', type: RefundLineTypes.BASE_FEES },
-              { key: 'priorityFees', type: RefundLineTypes.PRIORITY_FEES },
-              { key: 'futureEffectiveFees', type: RefundLineTypes.FUTURE_EFFECTIVE_FEES },
-              { key: 'serviceFees', type: RefundLineTypes.SERVICE_FEES }
-            ]
+    function getRefundPayload() {
+      let refundPayload = {
+        reason: state.refundComment,
+        refundRevenue: []
+      }
+      if (state.refundType === RefundType.PARTIAL) {
+        state.refundItems.forEach(index => {
+          const item = state.paymentLineItems[index]
+          const feeTypes = [
+            { key: 'filingFees', type: RefundLineTypes.BASE_FEES },
+            { key: 'priorityFees', type: RefundLineTypes.PRIORITY_FEES },
+            { key: 'futureEffectiveFees', type: RefundLineTypes.FUTURE_EFFECTIVE_FEES },
+            { key: 'serviceFees', type: RefundLineTypes.SERVICE_FEES }
+          ]
 
-            feeTypes.forEach(fee => {
-              if (item[fee.key] > 0) {
-                refundPayload.refundRevenue.push({
-                  paymentLineItemId: item.id,
-                  refundAmount: parseFloat(item[fee.key]),
-                  refundType: fee.type
-                })
-              }
-            })
+          feeTypes.forEach(fee => {
+            if (item[fee.key] > 0) {
+              refundPayload.refundRevenue.push({
+                paymentLineItemId: item.id,
+                refundAmount: parseFloat(item[fee.key]),
+                refundType: fee.type
+              })
+            }
           })
-        }
+        })
+      }
+      return refundPayload
+    }
 
+    async function processRefund () {
+      try {
         const invoiceId = matchInvoiceId(state.invoiceId)
-        const response = await state.orgStore.refundInvoice(invoiceId, refundPayload)
+        const response = await state.orgStore.refundInvoice(invoiceId, getRefundPayload())
         state.refundResponse = 'Refund successful.'
+        state.disableSubmit = true
         console.log('Refund successful:', response)
       } catch (error) {
         state.refundResponse = 'Refund failed.'
@@ -254,42 +373,48 @@ export default defineComponent({
     }
 
     function changeRefundPayload (item, index) {
-      const isRefunded = state.refundedItems.includes(index)
+      const isRefunded = state.refundItems.includes(index)
       if (!isRefunded) {
-        // Mark as refunded and make non-editable
-        item.isEditable = false
-        state.refundedItems.push(index)
+        state.refundItems.push(index)
+        state.refundItems.sort()
       } else {
-        // If removing from refund, make editable again
-        item.isEditable = true
-        const itemIndex = state.refundedItems.indexOf(index)
-        state.refundedItems.splice(itemIndex, 1)
+        const itemIndex = state.refundItems.indexOf(index)
+        state.refundItems.splice(itemIndex, 1)
       }
 
       // Recalculate totals based on current refundedItems
       state.totalRefund.baseFee = 0
       state.totalRefund.serviceFee = 0
       state.totalRefund.priorityFee = 0
+      state.totalRefund.futureEffectiveFee = 0
 
-      state.refundedItems.forEach(refundedIndex => {
+      state.refundItems.forEach(refundedIndex => {
         const refundedItem = state.paymentLineItems[refundedIndex]
-        state.totalRefund.baseFee += Number(refundedItem.total)
+        state.totalRefund.baseFee += Number(refundedItem.filingFees)
         state.totalRefund.serviceFee += refundedItem.serviceFees
         state.totalRefund.priorityFee += refundedItem.priorityFees
+        state.totalRefund.futureEffectiveFee += refundedItem.futureEffectiveFees
       })
     }
 
-    function clearRefundState () {
+    async function clearRefundState () {
+      state.disableSubmit = false
+      state.shouldValidate = false
       state.totalRefund.baseFee = 0
       state.totalRefund.serviceFee = 0
       state.totalRefund.priorityFee = 0
       state.paymentLineItems = []
-      state.refundedItems = []
+      state.refundItems = []
+      state.refundComment = ''
+      state.refundResponse = ''
+      state.form.resetValidation()
+      await nextTick()
+      state.shouldValidate = true
     }
 
-    const isFinalizeDisabled = computed(() => {
-      return state.refundComment.trim().length === 0 ||
-        (state.refundType === RefundType.PARTIAL && state.totalRefund.baseFee === 0 && state.totalRefund.serviceFee === 0)
+    const isRefundSubmitDisabled = computed(() => {
+      return state.refundComment.trim().length === 0 || state.disableSubmit ||
+        (state.refundType === RefundType.PARTIAL && state.refundItems.length === 0)
     })
 
     watch(() => state.invoiceId, () => {
@@ -300,9 +425,19 @@ export default defineComponent({
       ...toRefs(state),
       fetchInvoice,
       processRefund,
+      getRefundPayload,
       changeRefundPayload,
-      isFinalizeDisabled,
-      RefundType
+      isRefundSubmitDisabled,
+      isRefundItemAdded,
+      RefundType,
+      RefundLineTypes,
+      validateRefundComment,
+      validateRefundFeeAmount,
+      disableFeeInputs,
+      showPartialRefundAction,
+      disablePartialRefundAction,
+      showRefundCreditCardError,
+      headers
     }
   }
 })
diff --git a/auth-web/tests/unit/components/RefundView.spec.ts b/auth-web/tests/unit/components/RefundView.spec.ts
new file mode 100644
index 0000000000..c7e0c1ddb3
--- /dev/null
+++ b/auth-web/tests/unit/components/RefundView.spec.ts
@@ -0,0 +1,258 @@
+import { Wrapper, createLocalVue, mount } from '@vue/test-utils'
+import RefundViewVue from '@/views/pay/RefundView.vue'
+import { VueConstructor } from 'vue'
+import Vuetify from 'vuetify'
+import { axios } from '@/util/http-util'
+import { setupIntersectionObserverMock } from '../util/helper-functions'
+import sinon from 'sinon'
+
+sessionStorage.setItem('AUTH_API_CONFIG', JSON.stringify({
+  AUTH_API_URL: 'https://localhost:8080/api/v1/11',
+  PAY_API_URL: 'https://pay-api-dev.apps.silver.devops.gov.bc.ca/api/v1'
+}))
+
+const vuetify = new Vuetify({})
+const invoiceInputSelector = '#invoice-id-input'
+const fetchInvoiceBtnSelector = '#fetch-invoice-btn'
+const partialRefundBtnActionSelector = '#partial-refund-action-btn'
+const refundTypeRadioGroupSelector = '#refund-type-radio-group'
+const partialRefundRadioSelector = '#radio-partial-refund'
+const partialRefundCcWarningSelector = '#partial-refund-cc-warning'
+const partialRefundInfoSelector = '#partial-refund-add-refund-info'
+const invoiceLineItemsTableSelector = '#invoice-line-items-table'
+const invoiceLineItemsHeadersSelector = '#invoice-line-items-headers'
+const partialRefundSummaryInfoSelector = '#partial-refund-summary-info'
+const refundSummaryTableSelector = '#refund-summary-table'
+const refundSummaryHeadersSelector = '#refund-summary-headers'
+
+const headers = [
+  'Line Item #',
+  'Description',
+  'Filing Fee',
+  'Priority Fee',
+  'Future Effective Fees',
+  'Service Fees',
+  'Action'
+]
+
+describe('RefundView.vue', () => {
+  setupIntersectionObserverMock()
+  let wrapper: Wrapper<any>
+  let localVue: VueConstructor<any>
+  let invoiceResponse: any
+  let sandbox: sinon.SinonSandbox
+
+  beforeEach(async () => {
+    localVue = createLocalVue()
+    invoiceResponse = {
+      'id': 3828,
+      'lineItems': [
+        {
+          'id': 5335,
+          'description': 'Item 1',
+          'filingFees': 20.0,
+          'futureEffectiveFees': 0.0,
+          'priorityFees': 33.0,
+          'serviceFees': 1.5,
+          'total': 53.0
+        },
+        {
+          'id': 5336,
+          'description': 'Item 2',
+          'filingFees': 10.0,
+          'futureEffectiveFees': 5.0,
+          'priorityFees': 0.0,
+          'serviceFees': 1.5,
+          'total': 10.0
+        }
+      ],
+      'paid': 66.0,
+      'paymentMethod': 'DIRECT_PAY'
+    }
+
+    sandbox = sinon.createSandbox()
+    const get = sandbox.stub(axios, 'get')
+    get.returns(Promise.resolve({ data: invoiceResponse }))
+
+    wrapper = mount(RefundViewVue, {
+      localVue,
+      vuetify
+    })
+    await wrapper.vm.$nextTick()
+  })
+
+  afterEach(() => {
+    wrapper.destroy()
+    sessionStorage.clear()
+    sandbox.restore()
+
+    vi.resetModules()
+    vi.clearAllMocks()
+  })
+
+  function getTextFieldValue (element) {
+    return element.findComponent({ name: 'v-text-field' }).props('value')
+  }
+
+  it('Renders Full/Partial Refund Views', async () => {
+    expect(wrapper.find(invoiceLineItemsTableSelector).exists()).toBe(true)
+    expect(wrapper.find(invoiceInputSelector).exists()).toBe(true)
+    expect(wrapper.find(fetchInvoiceBtnSelector).exists()).toBe(true)
+    expect(wrapper.find(refundTypeRadioGroupSelector).exists()).toBe(true)
+
+    expect(wrapper.find(refundSummaryTableSelector).exists()).toBe(false)
+    expect(wrapper.find(partialRefundCcWarningSelector).exists()).toBe(false)
+    expect(wrapper.find(partialRefundInfoSelector).exists()).toBe(false)
+    expect(wrapper.find(partialRefundSummaryInfoSelector).exists()).toBe(false)
+
+    const refundPartialRadio = wrapper.find(partialRefundRadioSelector)
+    expect(refundPartialRadio.exists()).toBe(true)
+    await refundPartialRadio.setChecked()
+    expect(wrapper.vm.refundType).toBe(wrapper.vm.RefundType.PARTIAL)
+
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find(refundSummaryTableSelector).exists()).toBe(true)
+    expect(wrapper.find(partialRefundInfoSelector).exists()).toBe(true)
+    expect(wrapper.find(partialRefundSummaryInfoSelector).exists()).toBe(true)
+
+    const invoiceInput = wrapper.find(invoiceInputSelector)
+    const fetchInvoiceBtn = wrapper.find(fetchInvoiceBtnSelector)
+
+    await invoiceInput.setValue('1234')
+    expect(wrapper.vm.invoiceId).toBe('1234')
+    await fetchInvoiceBtn.trigger('click')
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.paymentLineItems.length).toBe(2)
+
+    // Confirm Invoice Line item table renders properly
+    expect(wrapper.find(invoiceLineItemsHeadersSelector).exists()).toBe(true)
+    const titles = wrapper.find(invoiceLineItemsHeadersSelector)
+      .findAll('[id^="header-items-"]')
+    expect(titles.length).toBe(headers.length)
+    for (let i = 0; i < headers.length; i++) {
+      expect(titles.at(i).text()).toBe(headers[i])
+    }
+    const itemRows = wrapper.find(invoiceLineItemsTableSelector).findAll('[id="item-row"]')
+    expect(itemRows.length).toBe(invoiceResponse.lineItems.length)
+    const lineItems = invoiceResponse.lineItems
+    for (let i = 0; i < lineItems.length; i++) {
+      const columns = itemRows.at(i).findAll('td')
+      expect(columns.at(0).text()).toBe((i + 1).toString())
+      expect(columns.at(1).text()).toBe(lineItems[i].description)
+      expect(getTextFieldValue(columns.at(2))).toBe(lineItems[i].filingFees)
+      expect(getTextFieldValue(columns.at(3))).toBe(lineItems[i].priorityFees)
+      expect(getTextFieldValue(columns.at(4))).toBe(lineItems[i].futureEffectiveFees)
+      expect(getTextFieldValue(columns.at(5))).toBe(lineItems[i].serviceFees)
+      const actionButton = columns.at(6).find(partialRefundBtnActionSelector)
+      expect(actionButton.exists()).toBe(true)
+
+      // Add refund to summary table
+      await actionButton.trigger('click')
+    }
+    await wrapper.vm.$nextTick()
+
+    // Confirm summary table renders properly
+    expect(wrapper.find(refundSummaryTableSelector).exists()).toBe(true)
+    const summaryTitles = wrapper.find(refundSummaryHeadersSelector)
+      .findAll('[id^="header-summary-items-"]')
+    expect(summaryTitles.length).toBe(headers.length - 1)
+    for (let i = 0; i < headers.length - 1; i++) {
+      expect(summaryTitles.at(i).text()).toBe(headers[i])
+    }
+    const refundItems = wrapper.vm.refundItems
+    const paymentLineItems = wrapper.vm.paymentLineItems
+    expect(refundItems.length === paymentLineItems.length).toBe(true)
+    for (let i = 0; i < refundItems.length; i++) {
+      const columns = itemRows.at(i).findAll('td')
+      const refundItemIndex = refundItems[i]
+      expect(columns.at(0).text()).toBe((refundItemIndex + 1).toString())
+      expect(columns.at(1).text()).toBe(paymentLineItems[refundItemIndex].description)
+      expect(getTextFieldValue(columns.at(2))).toBe(paymentLineItems[refundItemIndex].filingFees)
+      expect(getTextFieldValue(columns.at(3))).toBe(paymentLineItems[refundItemIndex].priorityFees)
+      expect(getTextFieldValue(columns.at(4))).toBe(paymentLineItems[refundItemIndex].futureEffectiveFees)
+      expect(getTextFieldValue(columns.at(5))).toBe(paymentLineItems[refundItemIndex].serviceFees)
+    }
+  })
+
+  it('Test full refund payload generation', async () => {
+    const invoiceInput = wrapper.find(invoiceInputSelector)
+    const fetchInvoiceBtn = wrapper.find(fetchInvoiceBtnSelector)
+
+    await invoiceInput.setValue('1234')
+    expect(wrapper.vm.invoiceId).toBe('1234')
+    await fetchInvoiceBtn.trigger('click')
+    await wrapper.vm.$nextTick()
+
+    wrapper.vm.refundComment = 'refund comment'
+    const refundPayload = wrapper.vm.getRefundPayload()
+    expect(refundPayload.reason === 'refund comment')
+    expect(refundPayload.refundRevenue.length).toBe(0)
+  })
+
+  it('Test partial refund payload generation', async () => {
+    const refundPartialRadio = wrapper.find(partialRefundRadioSelector)
+    expect(refundPartialRadio.exists()).toBe(true)
+    await refundPartialRadio.setChecked()
+
+    const invoiceInput = wrapper.find(invoiceInputSelector)
+    const fetchInvoiceBtn = wrapper.find(fetchInvoiceBtnSelector)
+
+    await invoiceInput.setValue('1234')
+    expect(wrapper.vm.invoiceId).toBe('1234')
+    await fetchInvoiceBtn.trigger('click')
+    await wrapper.vm.$nextTick()
+
+    wrapper.vm.refundItems = [0, 1]
+    wrapper.vm.refundComment = 'refund comment'
+    await wrapper.vm.$nextTick()
+
+    let refundPayload = wrapper.vm.getRefundPayload()
+    expect(refundPayload.reason === 'refund comment')
+    expect(refundPayload.refundRevenue.length).toBe(6)
+
+    // Test all line items without adjusting refund amounts
+    const RefundLineTypes = wrapper.vm.RefundLineTypes
+    const paymentLineItems = wrapper.vm.paymentLineItems
+    let firstLineItemRefunds = refundPayload.refundRevenue
+      .filter(item => item.paymentLineItemId === paymentLineItems[0].id)
+    let secondLineItemRefunds = refundPayload.refundRevenue
+      .filter(item => item.paymentLineItemId === wrapper.vm.paymentLineItems[1].id)
+    expect(firstLineItemRefunds.length).toBe(3)
+    expect(firstLineItemRefunds[0].refundType === RefundLineTypes.BASE_FEES)
+    expect(firstLineItemRefunds[0].refundAmount === paymentLineItems[0].filingFees)
+    expect(firstLineItemRefunds[1].refundType === RefundLineTypes.PRIORITY_FEES)
+    expect(firstLineItemRefunds[1].refundAmount === paymentLineItems[0].priorityFees)
+    expect(firstLineItemRefunds[2].refundType === RefundLineTypes.SERVICE_FEES)
+    expect(firstLineItemRefunds[2].refundAmount === paymentLineItems[0].serviceFees)
+    expect(secondLineItemRefunds.length).toBe(3)
+    expect(secondLineItemRefunds[0].refundType === RefundLineTypes.BASE_FEES)
+    expect(secondLineItemRefunds[0].refundAmount === paymentLineItems[1].filingFees)
+    expect(secondLineItemRefunds[1].refundType === RefundLineTypes.FUTURE_EFFECTIVE_FEES)
+    expect(secondLineItemRefunds[1].refundAmount === paymentLineItems[1].futureEffectiveFees)
+    expect(secondLineItemRefunds[2].refundType === RefundLineTypes.SERVICE_FEES)
+    expect(secondLineItemRefunds[2].refundAmount === paymentLineItems[1].serviceFees)
+
+    // Test partial refunds with adjustments
+    paymentLineItems[0].filingFees = 15
+    paymentLineItems[0].priorityFees = 0
+    paymentLineItems[0].serviceFees = 0
+    paymentLineItems[1].filingFees = 0
+    paymentLineItems[1].futureEffectiveFees = 2.5
+    paymentLineItems[1].serviceFees = 1.5
+
+    refundPayload = wrapper.vm.getRefundPayload()
+    firstLineItemRefunds = refundPayload.refundRevenue
+      .filter(item => item.paymentLineItemId === paymentLineItems[0].id)
+    secondLineItemRefunds = refundPayload.refundRevenue
+      .filter(item => item.paymentLineItemId === wrapper.vm.paymentLineItems[1].id)
+    expect(firstLineItemRefunds.length).toBe(1)
+    expect(firstLineItemRefunds[0].refundType === RefundLineTypes.BASE_FEES)
+    expect(firstLineItemRefunds[0].refundAmount === 15)
+    expect(secondLineItemRefunds.length).toBe(2)
+    expect(secondLineItemRefunds[0].refundType === RefundLineTypes.FUTURE_EFFECTIVE_FEES)
+    expect(secondLineItemRefunds[0].refundAmount === 2.5)
+    expect(secondLineItemRefunds[1].refundType === RefundLineTypes.SERVICE_FEES)
+    expect(secondLineItemRefunds[1].refundAmount === 1.5)
+  })
+})