diff --git a/auth-web/package-lock.json b/auth-web/package-lock.json
index 5eafa5e904..97efc9ae48 100644
--- a/auth-web/package-lock.json
+++ b/auth-web/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "auth-web",
-  "version": "2.5.10",
+  "version": "2.5.11",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "auth-web",
-      "version": "2.5.9",
+      "version": "2.5.11",
       "dependencies": {
         "@bcrs-shared-components/base-address": "2.0.3",
         "@bcrs-shared-components/bread-crumb": "1.0.8",
diff --git a/auth-web/package.json b/auth-web/package.json
index 3cc7f30762..29fdbf0a57 100644
--- a/auth-web/package.json
+++ b/auth-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.5.10",
+  "version": "2.5.11",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,
diff --git a/auth-web/src/models/refund.ts b/auth-web/src/models/refund.ts
new file mode 100644
index 0000000000..38c88f9e5c
--- /dev/null
+++ b/auth-web/src/models/refund.ts
@@ -0,0 +1,10 @@
+export interface RefundRequest {
+  reason: string
+  refundRevenue?: RefundRevenueType[]
+}
+
+export interface RefundRevenueType {
+  paymentLineItemId: string
+  refundAmount: number
+  refundType: string
+}
diff --git a/auth-web/src/routes/router.ts b/auth-web/src/routes/router.ts
index 37be425b15..01b54b2c60 100644
--- a/auth-web/src/routes/router.ts
+++ b/auth-web/src/routes/router.ts
@@ -54,6 +54,7 @@ import PaymentView from '@/views/pay/PaymentView.vue'
 import PendingApprovalView from '@/views/auth/PendingApprovalView.vue'
 import PriceListView from '@/views/auth/PriceListView.vue'
 import ProfileDeactivatedView from '@/views/auth/ProfileDeactivatedView.vue'
+import RefundViewVue from '@/views/pay/RefundView.vue'
 import RequestNameView from '@/views/auth/home/RequestNameView.vue'
 import RestrictedProductView from '@/views/auth/RestrictedProductView.vue'
 import ReviewAccountView from '@/views/auth/staff/ReviewAccountView.vue'
@@ -829,6 +830,16 @@ export function getRoutes (): RouteConfig[] {
       },
       props: (route) => ({ shortNameId: route.params.shortNameId })
     },
+    {
+      path: '/pay/refund',
+      name: 'refund',
+      component: RefundViewVue,
+      props: true,
+      meta: {
+        requiresAuth: true,
+        allowedRoles: [Role.CreateCredits, Role.FasRefund]
+      }
+    },
     { path: '*', name: 'notfound', component: PageNotFound }
   ]
 
diff --git a/auth-web/src/services/payment.services.ts b/auth-web/src/services/payment.services.ts
index f476524c2c..461b5e4ac1 100644
--- a/auth-web/src/services/payment.services.ts
+++ b/auth-web/src/services/payment.services.ts
@@ -16,6 +16,7 @@ import ConfigHelper from '@/util/config-helper'
 import { LinkedShortNameFilterParams } from '@/models/pay/short-name'
 import { Payment } from '@/models/Payment'
 import { PaymentTypes } from '@/util/constants'
+import { RefundRequest } from '@/models/refund'
 import { axios } from '@/util/http-util'
 
 export default class PaymentService {
@@ -45,6 +46,11 @@ export default class PaymentService {
     )
   }
 
+  static refundInvoice (invoiceId: string, refundPayload: RefundRequest): AxiosPromise<any> {
+    const url = `${ConfigHelper.getPayAPIURL()}/payment-requests/${invoiceId}/refunds`
+    return axios.post(url, refundPayload)
+  }
+
   static downloadOBInvoice (paymentId: string): AxiosPromise<any> {
     const url = `${ConfigHelper.getPayAPIURL()}/payment-requests/${paymentId}/reports`
     const headers = {
diff --git a/auth-web/src/stores/org.ts b/auth-web/src/stores/org.ts
index 7e4b507cf1..5fdc44ad13 100644
--- a/auth-web/src/stores/org.ts
+++ b/auth-web/src/stores/org.ts
@@ -53,6 +53,7 @@ import KeyCloakService from 'sbc-common-components/src/services/keycloak.service
 import OrgService from '@/services/org.services'
 import PaymentService from '@/services/payment.services'
 import PermissionService from '@/services/permission.services'
+import { RefundRequest } from './../models/refund'
 import StaffService from '@/services/staff.services'
 import UserService from '@/services/user.services'
 import { UserSettings } from 'sbc-common-components/src/models/userSettings'
@@ -811,6 +812,11 @@ export const useOrgStore = defineStore('org', () => {
     return response?.data || {}
   }
 
+  async function refundInvoice (invoiceId, refundPayload: RefundRequest) {
+    const response = await PaymentService.refundInvoice(invoiceId, refundPayload)
+    return response?.data || {}
+  }
+
   async function updateInvoicePaymentMethodAsCreditCard (invoicePayload) {
     const response = await PaymentService.updateInvoicePaymentMethodAsCreditCard(invoicePayload.paymentId, invoicePayload.accountId)
     return response?.data || {}
@@ -1108,6 +1114,7 @@ export const useOrgStore = defineStore('org', () => {
     getProductList,
     addToCurrentSelectedProducts,
     resetoCurrentSelectedProducts,
+    refundInvoice,
     setSubscribedProducts,
     currentSelectedProductsPremiumOnly,
     fetchCurrentOrganizationGLInfo,
diff --git a/auth-web/src/util/constants.ts b/auth-web/src/util/constants.ts
index 86b036a0cc..8b60e8736f 100644
--- a/auth-web/src/util/constants.ts
+++ b/auth-web/src/util/constants.ts
@@ -48,7 +48,9 @@ export enum Role {
     ManageGlCodes = 'manage_gl_codes',
     FasSearch = 'fas_search',
     ViewAllTransactions = 'view_all_transactions',
-    ManageEft = 'manage_eft'
+    ManageEft = 'manage_eft',
+    CreateCredits = 'create_credits',
+    FasRefund = 'fas_refund'
 }
 
 export enum Pages {
diff --git a/auth-web/src/views/pay/RefundView.vue b/auth-web/src/views/pay/RefundView.vue
new file mode 100644
index 0000000000..49d244743c
--- /dev/null
+++ b/auth-web/src/views/pay/RefundView.vue
@@ -0,0 +1,303 @@
+<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)"
+      />
+      <v-btn
+        :disabled="!invoiceId.trim()"
+        @click="fetchInvoice"
+      >
+        Fetch Invoice
+      </v-btn>
+      <v-radio-group
+        v-model="refundType"
+        row
+      >
+        <v-radio
+          label="Full refund"
+          :value="RefundType.FULL"
+        />
+        <v-radio
+          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)"
+              >
+                {{ refundedItems.includes(index) ? 'Remove from Refund' : 'Add to Refund' }}
+              </v-btn>
+            </td>
+          </tr>
+        </tbody>
+      </v-simple-table>
+      <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>
+      <div
+        v-if="refundType === RefundType.FULL && paymentLineItems.length > 0"
+      >
+        <h3>
+          By pressing the refund action, the full paid amount will be refunded: ${{ invoicePaid.toFixed(2) }}
+        </h3>
+      </div>
+      <v-text-field
+        v-model="refundComment"
+        label="Refund Comment"
+        :rules="[v => !!v || 'Refund comment is required']"
+        required
+      />
+      <br>
+      <v-btn
+        :disabled="isFinalizeDisabled"
+        @click="processRefund"
+      >
+        REFUND
+      </v-btn>
+      <v-alert
+        v-if="refundResponse"
+        class="mt-4"
+        border="left"
+        dense
+        outlined
+        prominent
+        shaped
+        text
+        :type="refundResponse.includes('success') ? 'success' : 'error'"
+      >
+        {{ refundResponse }}
+      </v-alert>
+    </v-container>
+  </v-app>
+</template>
+
+<script lang="ts">
+
+import { computed, defineComponent, reactive, toRefs, watch } from '@vue/composition-api'
+import { Invoice } from '@/models/invoice'
+import { useOrgStore } from '@/stores/org'
+
+enum RefundType {
+  FULL = 'full',
+  PARTIAL = 'partial'
+}
+
+enum RefundLineTypes {
+  OTHER_FEES = 'OTHER_FEES',
+  SERVICE_FEE = 'SERVICE_FEE',
+}
+
+export default defineComponent({
+  name: 'PaymentRefund',
+  setup () {
+    const state = reactive({
+      invoiceId: '',
+      invoicePaid: 0,
+      paymentLineItems: [],
+      refundedItems: [],
+      orgStore: useOrgStore(),
+      refundComment: '',
+      totalRefund: {
+        baseFee: 0,
+        serviceFee: 0,
+        priorityFee: 0
+      },
+      refundType: RefundType.FULL,
+      refundResponse: ''
+    })
+
+    function fetchInvoice () {
+      // Should resolve REG0031233 -> 31233 etc.
+      const invoiceId = state.invoiceId.match(/\d+/)
+      state.orgStore.getInvoice({ invoiceId: invoiceId }).then((invoice: Invoice) => {
+        state.invoicePaid = invoice.paid
+        state.paymentLineItems = invoice.lineItems ? invoice.lineItems.map(item => ({
+          ...item,
+          isEditable: true
+        })) : []
+      }).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]
+            if (item.total > 0) {
+              refundPayload.refundRevenue.push({
+                paymentLineItemId: item.id,
+                refundAmount: parseFloat(item.total),
+                refundType: RefundLineTypes.OTHER_FEES
+              })
+            }
+            if (item.serviceFees > 0) {
+              refundPayload.refundRevenue.push({
+                paymentLineItemId: item.id,
+                refundAmount: item.serviceFees,
+                refundType: RefundLineTypes.SERVICE_FEE
+              })
+            }
+          })
+        } else {
+          delete refundPayload.refundRevenue
+        }
+
+        const response = await state.orgStore.refundInvoice(state.invoiceId, refundPayload)
+        state.refundResponse = 'Refund successful.'
+        console.log('Refund successful:', response)
+      } catch (error) {
+        state.refundResponse = 'Refund failed.'
+        console.error('Refund process failed:', error)
+      }
+    }
+
+    function changeRefundPayload (item, index) {
+      const isRefunded = state.refundedItems.includes(index)
+      if (!isRefunded) {
+        // Mark as refunded and make non-editable
+        item.isEditable = false
+        state.refundedItems.push(index)
+      } else {
+        // If removing from refund, make editable again
+        item.isEditable = true
+        const itemIndex = state.refundedItems.indexOf(index)
+        state.refundedItems.splice(itemIndex, 1)
+      }
+
+      // Recalculate totals based on current refundedItems
+      state.totalRefund.baseFee = 0
+      state.totalRefund.serviceFee = 0
+      state.totalRefund.priorityFee = 0
+
+      state.refundedItems.forEach(refundedIndex => {
+        const refundedItem = state.paymentLineItems[refundedIndex]
+        state.totalRefund.baseFee += Number(refundedItem.total)
+        state.totalRefund.serviceFee += refundedItem.serviceFees
+        state.totalRefund.priorityFee += refundedItem.priorityFees
+      })
+    }
+
+    function clearRefundState () {
+      state.totalRefund.baseFee = 0
+      state.totalRefund.serviceFee = 0
+      state.totalRefund.priorityFee = 0
+      state.paymentLineItems = []
+      state.refundedItems = []
+    }
+
+    const isFinalizeDisabled = computed(() => {
+      return state.refundComment.trim().length === 0 ||
+        (state.refundType === RefundType.PARTIAL && state.totalRefund.baseFee === 0 && state.totalRefund.serviceFee === 0)
+    })
+
+    watch(() => state.invoiceId, () => {
+      state.refundResponse = ''
+    })
+
+    return {
+      ...toRefs(state),
+      fetchInvoice,
+      processRefund,
+      changeRefundPayload,
+      isFinalizeDisabled,
+      RefundType
+    }
+  }
+})
+
+</script>