diff --git a/auth-web/package-lock.json b/auth-web/package-lock.json
index 8b26477ae6..f681bae2b8 100644
--- a/auth-web/package-lock.json
+++ b/auth-web/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "auth-web",
-  "version": "2.6.47",
+  "version": "2.6.48",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "auth-web",
-      "version": "2.6.47",
+      "version": "2.6.48",
       "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 f14f514587..379b710d36 100644
--- a/auth-web/package.json
+++ b/auth-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.6.47",
+  "version": "2.6.48",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,
diff --git a/auth-web/src/components/pay/eft/ShortNameRefund.vue b/auth-web/src/components/pay/eft/ShortNameRefund.vue
new file mode 100644
index 0000000000..c78d99f208
--- /dev/null
+++ b/auth-web/src/components/pay/eft/ShortNameRefund.vue
@@ -0,0 +1,152 @@
+<template>
+  <v-card>
+    <v-card-title class="card-title">
+      <v-icon
+        class="pr-5"
+        color="link"
+        left
+      >
+        mdi-file-document
+      </v-icon>
+      Short Name Refund
+    </v-card-title>
+    <v-card-text class="d-flex justify-space-between align-center card-content mt-4">
+      <span>No refund initiated. SBC Finance can initiate refund if a CAS supplier number is created for the short name.</span>
+      <v-btn
+        class="mt-0 font-weight-regular"
+        color="primary"
+        outlined
+        dark
+        large
+        :unsettledAmount="unsettledAmount"
+        :shortNameDetails="shortNameDetails"
+        @click="initiateRefund"
+      >
+        Initiate Refund
+      </v-btn>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, reactive, toRefs } from '@vue/composition-api'
+import CommonUtils from '@/util/common-util'
+import { DEFAULT_DATA_OPTIONS } from '@/components/datatable/resources'
+import _ from 'lodash'
+
+export default defineComponent({
+  name: 'ShortNameRefund',
+  props: {
+    shortNameDetails: {
+      type: Object,
+      default: () => ({})
+    },
+    unsettledAmount: {
+      type: String,
+      default: ''
+    }
+  },
+  setup (props, { root }) {
+    const state = reactive({
+      actionDropdown: [],
+      isShortNameLinkingDialogOpen: false,
+      eftShortNameSummary: {},
+      results: [],
+      totalResults: 0,
+      filters: {
+        pageNumber: 1,
+        pageLimit: 5
+      },
+      loading: false,
+      options: _.cloneDeep(DEFAULT_DATA_OPTIONS),
+      expanded: []
+    })
+
+    const isLinked = computed<boolean>(() => {
+      return state.totalResults > 0 || state.loading
+    })
+
+    function initiateRefund () {
+      root.$router?.push({
+        name: 'shortnamerefund',
+        query: {
+          shortNameDetails: JSON.stringify(props.shortNameDetails),
+          unsettledAmount: props.unsettledAmount
+        }
+      })
+    }
+
+    return {
+      ...toRefs(state),
+      state,
+      isLinked,
+      initiateRefund,
+      formatCurrency: CommonUtils.formatAmount,
+      formatAccountDisplayName: CommonUtils.formatAccountDisplayName
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/theme.scss';
+@import '@/assets/scss/actions.scss';
+@import '@/assets/scss/ShortnameTables.scss';
+
+.card-title {
+  background-color: $app-lt-blue;
+  justify-content: left;
+  height: 75px;
+  font-weight: bold;
+  font-size: 1.125rem;
+
+  .v-icon {
+    font-size: 36px;
+  }
+}
+
+.base-table__item-row-green {
+  background-color: $table-green !important;
+}
+
+::v-deep {
+  .base-table__item-cell {
+    padding: 16px 0 16px 0
+  }
+
+  // Remove border for rows that are expanded with additional information
+  tr:has(+ tr.expanded-item-row) td {
+    border-bottom: none !important;
+  }
+}
+
+.unlink-action-btn {
+  border-radius: 4px !important;
+}
+
+.expanded-item-row {
+  td {
+    .expanded-item {
+      display: grid;
+      max-width: 80%;
+      padding: 5px 0px 0px 0px;
+      font-size: 16px;
+      grid-template-columns: 35px 1fr;
+      align-items: start;
+
+      .v-icon {
+        justify-content: left;
+        grid-column: 1;
+        padding-right: 4px !important;
+        margin-right: 0px !important;
+      }
+    }
+
+    .alert-item {
+      .v-icon {
+        color: $app-alert-orange;
+      }
+    }
+  }
+}
+</style>
diff --git a/auth-web/src/models/refund.ts b/auth-web/src/models/refund.ts
index 38c88f9e5c..d944dd0c43 100644
--- a/auth-web/src/models/refund.ts
+++ b/auth-web/src/models/refund.ts
@@ -8,3 +8,12 @@ export interface RefundRevenueType {
   refundAmount: number
   refundType: string
 }
+
+export interface EftRefundRequest {
+  shortNameId: number
+  refundAmount: number
+  casSupplierNum: string
+  refundEmail: string
+  comment?: string
+  shortName?: string
+}
diff --git a/auth-web/src/resources/BreadcrumbResources.ts b/auth-web/src/resources/BreadcrumbResources.ts
index 82a27f4f9c..8d30352ed5 100644
--- a/auth-web/src/resources/BreadcrumbResources.ts
+++ b/auth-web/src/resources/BreadcrumbResources.ts
@@ -39,6 +39,11 @@ export const ShortNameDetailsBreadcrumb: BreadcrumbIF = {
   to: { name: 'shortnamedetails' }
 }
 
+export const ShortNameRefundBreadcrumb: BreadcrumbIF = {
+  text: 'Refund Information',
+  to: { name: 'shortnamerefund' }
+}
+
 export const CreatAccountBreadcrumb: BreadcrumbIF = {
   text: 'Create Account',
   to: { name: 'chooseauthmethodview' }
diff --git a/auth-web/src/routes/router.ts b/auth-web/src/routes/router.ts
index a116e1483c..27076a2d50 100644
--- a/auth-web/src/routes/router.ts
+++ b/auth-web/src/routes/router.ts
@@ -4,6 +4,7 @@ import {
   MyBusinessRegistryBreadcrumb,
   RegistryDashboardBreadcrumb,
   RegistryHomeBreadcrumb, ShortNameDetailsBreadcrumb, ShortNameMappingBreadcrumb,
+  ShortNameRefundBreadcrumb,
   StaffBusinessRegistryBreadcrumb,
   StaffDashboardBreadcrumb
 } from '@/resources/BreadcrumbResources'
@@ -71,6 +72,7 @@ import SetupAccountView from '@/views/auth/staff/SetupAccountView.vue'
 import SetupGovmAccountView from '@/views/auth/staff/SetupGovmAccountView.vue'
 import ShortNameDetailsView from '@/views/pay/eft/ShortNameDetailsView.vue'
 import ShortNameMappingView from '@/views/pay/ShortNameMappingView.vue'
+import ShortNameRefundView from '@/views/pay/eft/ShortNameRefundView.vue'
 import SigninView from '@/views/auth/SigninView.vue'
 import SignoutView from '@/views/auth/SignoutView.vue'
 import StaffActiveAccountsTable from '@/components/auth/staff/account-management/StaffActiveAccountsTable.vue'
@@ -887,6 +889,26 @@ export function getRoutes (): RouteConfig[] {
       },
       props: (route) => ({ shortNameId: route.params.shortNameId })
     },
+    {
+      path: '/pay/shortname-details/:shortNameId/refund',
+      name: 'shortnamerefund',
+      component: ShortNameRefundView,
+      meta: {
+        requiresAuth: true,
+        allowedRoles: [Role.EftRefund],
+        breadcrumb: [
+          StaffDashboardBreadcrumb,
+          ShortNameMappingBreadcrumb,
+          ShortNameDetailsBreadcrumb,
+          ShortNameRefundBreadcrumb
+        ],
+        showNavBar: true
+      },
+      props: route => ({
+        shortNameDetails: JSON.parse(route.query.shortNameDetails || '{}'),
+        unsettledAmount: route.query.unsettledAmount || ''
+      })
+    },
     {
       path: '/pay/refund',
       name: 'refund',
diff --git a/auth-web/src/services/payment.services.ts b/auth-web/src/services/payment.services.ts
index 33292b2872..279801e25e 100644
--- a/auth-web/src/services/payment.services.ts
+++ b/auth-web/src/services/payment.services.ts
@@ -1,4 +1,5 @@
 import { EFTShortnameResponse, EFTTransactionFilterParams, EFTTransactionListResponse } from '@/models/eft-transaction'
+import { EftRefundRequest, RefundRequest } from '@/models/refund'
 import { FilingTypeResponse, GLCode, GLCodeResponse } from '@/models/Staff'
 import { Invoice, InvoiceListResponse } from '@/models/invoice'
 import { LinkedShortNameFilterParams, ShortNameSummaryFilterParams } from '@/models/pay/short-name'
@@ -16,7 +17,6 @@ import { AxiosPromise } from 'axios'
 import ConfigHelper from '@/util/config-helper'
 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 {
@@ -51,6 +51,11 @@ export default class PaymentService {
     return axios.post(url, refundPayload)
   }
 
+  static refundEFT (refundPayload: EftRefundRequest): AxiosPromise<any> {
+    const url = `${ConfigHelper.getPayAPIURL()}/eft-shortnames/shortname_refund`
+    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 73ff578e48..e2d9dc075e 100644
--- a/auth-web/src/stores/org.ts
+++ b/auth-web/src/stores/org.ts
@@ -37,6 +37,7 @@ import {
 import { BcolAccountDetails, BcolProfile } from '@/models/bcol'
 import { CreateRequestBody as CreateInvitationRequestBody, Invitation } from '@/models/Invitation'
 import { EFTInvoiceListResponse, FailedEFTInvoice, FailedInvoice, NonSufficientFundsInvoiceListResponse } from '@/models/invoice'
+import { EftRefundRequest, RefundRequest } from './../models/refund'
 import { Products, ProductsRequestBody } from '@/models/Staff'
 import { StatementFilterParams, StatementNotificationSettings, StatementSettings, StatementsSummary } from '@/models/statement'
 import { computed, reactive, toRefs } from '@vue/composition-api'
@@ -53,7 +54,6 @@ 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'
@@ -856,6 +856,11 @@ export const useOrgStore = defineStore('org', () => {
     return response?.data || {}
   }
 
+  async function refundEFT (refundPayload: EftRefundRequest) {
+    const response = await PaymentService.refundEFT(refundPayload)
+    return response?.data || {}
+  }
+
   async function updateInvoicePaymentMethodAsCreditCard (invoicePayload) {
     const response = await PaymentService.updateInvoicePaymentMethodAsCreditCard(invoicePayload.paymentId, invoicePayload.accountId)
     return response?.data || {}
@@ -1157,6 +1162,7 @@ export const useOrgStore = defineStore('org', () => {
     addToCurrentSelectedProducts,
     resetoCurrentSelectedProducts,
     refundInvoice,
+    refundEFT,
     setSubscribedProducts,
     currentSelectedProductsPremiumOnly,
     fetchCurrentOrganizationGLInfo,
diff --git a/auth-web/src/util/constants.ts b/auth-web/src/util/constants.ts
index e7be78905b..1d64e6ee3b 100644
--- a/auth-web/src/util/constants.ts
+++ b/auth-web/src/util/constants.ts
@@ -54,6 +54,7 @@ export enum Role {
     FasSearch = 'fas_search',
     ViewAllTransactions = 'view_all_transactions',
     ManageEft = 'manage_eft',
+    EftRefund = 'eft_refund',
     CreateCredits = 'create_credits',
     FasRefund = 'fas_refund',
     BcolStaffAdmin = 'bcol_staff_admin'
diff --git a/auth-web/src/views/pay/eft/ShortNameDetailsView.vue b/auth-web/src/views/pay/eft/ShortNameDetailsView.vue
index d608259d2f..c17815f1dc 100644
--- a/auth-web/src/views/pay/eft/ShortNameDetailsView.vue
+++ b/auth-web/src/views/pay/eft/ShortNameDetailsView.vue
@@ -16,10 +16,36 @@
         {{ unsettledAmountHeader }}
       </h1>
       <p class="mt-3 mb-0">
-        Review and verify short name details
+        Review and verify short name details {{ canEFTRefund }}, {{ displayRefundAlert }}
       </p>
+      <v-alert
+        v-if="displayRefundAlert && canEFTRefund"
+        class="mt-3 mb-0 alert-item account-alert-inner"
+        :icon="false"
+        prominent
+        outlined
+        type="warning"
+      >
+        <div class="account-alert-inner mb-0">
+          <v-icon
+            medium
+          >
+            mdi-alert
+          </v-icon>
+          <p class="account-alert__info mb-0 pl-3">
+            Please verify if the {{ unsettledAmount }} balance is eligible for a refund, or you can link to a new account.
+          </p>
+        </div>
+      </v-alert>
     </div>
 
+    <ShortNameRefund
+      v-if="displayRefundAlert && canEFTRefund"
+      :shortNameDetails="shortNameDetails"
+      :unsettledAmount="unsettledAmount"
+      class="mb-12"
+    />
+
     <ShortNameAccountLink
       class="mb-12"
       :shortNameDetails="shortNameDetails"
@@ -36,12 +62,23 @@
 import { PropType, computed, defineComponent, onMounted, reactive, toRefs } from '@vue/composition-api'
 import CommonUtils from '@/util/common-util'
 import PaymentService from '@/services/payment.services'
+import { Role } from '@/util/constants'
 import ShortNameAccountLink from '@/components/pay/eft/ShortNameAccountLink.vue'
+import ShortNameRefund from '@/components/pay/eft/ShortNameRefund.vue'
 import ShortNameTransactions from '@/components/pay/eft/ShortNameTransactions.vue'
+import moment from 'moment'
+import { useUserStore } from '@/stores/user'
+
+interface ShortNameDetails {
+  shortName: string;
+  creditsRemaining?: number;
+  linkedAccountsCount: number;
+  lastPaymentReceivedDate: Date;
+}
 
 export default defineComponent({
   name: 'ShortNameMappingView',
-  components: { ShortNameAccountLink, ShortNameTransactions },
+  components: { ShortNameAccountLink, ShortNameTransactions, ShortNameRefund },
   props: {
     shortNameId: {
       type: String as PropType<string>,
@@ -49,22 +86,35 @@ export default defineComponent({
     }
   },
   setup (props) {
+    const userStore = useUserStore()
+    const currentUser = computed(() => userStore.currentUser)
     const state = reactive({
-      shortNameDetails: {},
+      shortNameDetails: {} as ShortNameDetails,
       highlightIndex: -1,
       snackbar: false,
-      snackbarText: ''
+      snackbarText: '',
+      unsettledAmount: '',
+      displayRefundAlert: false,
+      canEFTRefund: computed((): boolean => currentUser.value?.roles?.includes(Role.EftRefund))
     })
 
     onMounted(async () => {
       await loadShortname(props.shortNameId)
+      const details: ShortNameDetails = state.shortNameDetails
+
+      state.unsettledAmount = details.creditsRemaining !== undefined
+        ? CommonUtils.formatAmount(details.creditsRemaining) : ''
+
+      state.displayRefundAlert = (
+        (details.creditsRemaining > 0 && details.linkedAccountsCount > 0) ||
+        (details.creditsRemaining > 0 && details.linkedAccountsCount <= 0 &&
+          moment(details.lastPaymentReceivedDate).isBefore(moment().subtract(30, 'days')))
+      )
     })
 
     const unsettledAmountHeader = computed<string>(() => {
-      const details = state.shortNameDetails
-      const unsettledAmount = details.creditsRemaining !== undefined
-        ? CommonUtils.formatAmount(details.creditsRemaining) : ''
-      return `Unsettled Amount for ${details.shortName}: ${unsettledAmount}`
+      const details: ShortNameDetails = state.shortNameDetails
+      return `Unsettled Amount for ${details.shortName}: ${state.unsettledAmount}`
     })
 
     async function onLinkAccount (account: any, results: Array<any>) {
@@ -104,6 +154,17 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '$assets/scss/theme.scss';
-
+@import '@/assets/scss/theme.scss';
+  .account-alert-inner {
+    .v-icon {
+      color: $app-alert-orange;
+    }
+    background-color: $BCgovGold0 !important;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+  }
+  .account-alert__info {
+    flex: 1 1 auto;
+  }
 </style>
diff --git a/auth-web/src/views/pay/eft/ShortNameRefundView.vue b/auth-web/src/views/pay/eft/ShortNameRefundView.vue
new file mode 100644
index 0000000000..4d6c288af9
--- /dev/null
+++ b/auth-web/src/views/pay/eft/ShortNameRefundView.vue
@@ -0,0 +1,267 @@
+<template>
+  <v-container
+    id="shortname-details"
+    class="view-container"
+  >
+    <div class="view-header flex-column">
+      <h1 class="view-header__title">
+        Refund Information
+      </h1>
+    </div>
+    <v-card class="pl-5 py-2 mt-5 pr-5">
+      <v-form
+        ref="refundForm"
+        v-model="isFormValid"
+      >
+        <v-card-text>
+          <v-row no-gutters>
+            <v-col class="col-12 col-sm-12 ">
+              <v-row>
+                <v-col class="col-6 col-sm-3 font-weight-bold">
+                  Short Name
+                </v-col>
+                <v-col class="pl-0">
+                  {{ shortNameDetails.shortName }}
+                </v-col>
+              </v-row>
+
+              <v-row>
+                <v-col class="col-6 col-sm-3 font-weight-bold">
+                  Unsettled Amount on Short Name
+                </v-col>
+                <v-col class="pl-0">
+                  {{ unsettledAmount }}
+                </v-col>
+              </v-row>
+
+              <v-row>
+                <v-col class="col-6 col-sm-3 font-weight-bold">
+                  Refund Amount
+                </v-col>
+                <v-text-field
+                  v-model.trim="refundAmount"
+                  filled
+                  label="Refund Amount"
+                  persistent-hint
+                  data-test="refundAmount"
+                  :rules="refundAmountRules"
+                />
+              </v-row>
+
+              <v-row>
+                <v-col class="col-6 col-sm-3 font-weight-bold">
+                  CAS Supplier Number
+                </v-col>
+                <v-text-field
+                  v-model.trim="casSupplierNum"
+                  filled
+                  label="CAS Supplier Number"
+                  persistent-hint
+                  data-test="casSupplierNumber"
+                  :rules="casSupplierNumRules"
+                />
+              </v-row>
+
+              <v-row>
+                <v-col class="col-6 col-sm-3 font-weight-bold">
+                  Email
+                </v-col>
+                <v-text-field
+                  v-model.trim="email"
+                  filled
+                  label="Email"
+                  persistent-hint
+                  data-test="email"
+                  :rules="emailRules"
+                />
+              </v-row>
+
+              <v-row>
+                <v-col class="col-6 col-sm-3 font-weight-bold">
+                  Staff Comment
+                </v-col>
+                <v-text-field
+                  v-model.trim="staffComment"
+                  filled
+                  label="Staff Comment (Optional)"
+                  persistent-hint
+                  data-test="staffComment"
+                  :rules="staffCommentRules"
+                />
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-actions class="pr-4 justify-end pa-3 pb-5">
+          <v-btn
+            large
+            outlined
+            class="px-7"
+            color="primary"
+            data-test="btn-edit-routing-cancel"
+            @click="handleCancelOrBack"
+          >
+            <span>{{ backButtonLabel }}</span>
+          </v-btn>
+          <v-btn
+            large
+            :color="buttonColor"
+            class="px-8 font-weight-bold"
+            data-test="btn-edit-routing-done"
+            :disabled="!isFormValid || isSubmitted"
+            @click="submitRefundRequest"
+          >
+            <span>{{ buttonText }}</span>
+          </v-btn>
+        </v-card-actions>
+      </v-form>
+    </v-card>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, ref, toRefs, watch } from '@vue/composition-api'
+import { EftRefundRequest } from '@/models/refund'
+import { useOrgStore } from '@/stores/org'
+
+export default defineComponent({
+  name: 'ShortNameRefundView',
+  props: {
+    shortNameDetails: {
+      type: Object,
+      default: () => ({
+        shortName: ''
+      })
+    },
+    unsettledAmount: {
+      type: String,
+      default: ''
+    },
+    shortNameId: {
+      type: Number,
+      default: undefined
+    }
+  },
+  setup (props, { root }) {
+    const state = reactive({
+      refundAmount: undefined,
+      casSupplierNum: '',
+      email: '',
+      staffComment: '',
+      refundAmountRules: [
+        v => !!v || 'Refund Amount is required',
+        v => parseFloat(v) < parseFloat(props.shortNameDetails?.creditsRemaining) || 'Amount must be less than unsettled amount on short name',
+        v => /^\d+(\.\d{1,2})?$/.test(v) || 'Amounts must be less than 2 decimal places'
+      ],
+      casSupplierNumRules: [
+        v => !!v || 'CAS Supplier Number is required'
+      ],
+      emailRules: [
+        v => !!v || 'Email is required',
+        v => {
+          const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+          return pattern.test(v) || 'Valid email is required'
+        }
+      ],
+      orgStore: useOrgStore(),
+      staffCommentRules: [
+        v => (v.length < 500) || 'Cannot exceed 500 characters'
+      ],
+      isSubmitted: false
+    })
+
+    const refundForm = ref(null)
+    const isFormValid = ref(false)
+    const buttonText = ref('Submit Refund Request')
+    const buttonColor = ref('primary')
+    const backButtonLabel = ref('Cancel')
+
+    function handleCancelOrBack () {
+      if (backButtonLabel.value === 'Cancel') {
+        clearForm()
+      } else {
+        root.$router?.push({
+          name: 'shortnamedetails',
+          query: {
+            shortNameId: props.shortNameDetails.id
+          }
+        })
+      }
+    }
+
+    function clearForm () {
+      state.refundAmount = undefined
+      state.casSupplierNum = ''
+      state.email = ''
+      state.staffComment = ''
+      refundForm.value.resetValidation()
+      state.isSubmitted = false
+      buttonText.value = 'Submit Refund Request'
+      buttonColor.value = 'primary'
+      backButtonLabel.value = 'Cancel'
+    }
+
+    async function submitRefundRequest () {
+      if (refundForm.value.validate()) {
+        const refundPayload: EftRefundRequest = {
+          shortNameId: props.shortNameDetails.id,
+          refundAmount: state.refundAmount,
+          casSupplierNum: state.casSupplierNum,
+          refundEmail: state.email,
+          comment: state.staffComment,
+          shortName: props.shortNameDetails.shortName
+        }
+        try {
+          await state.orgStore.refundEFT(refundPayload)
+          state.isSubmitted = true
+          buttonText.value = 'Approved'
+          buttonColor.value = 'green'
+          backButtonLabel.value = 'Back'
+        } catch (error) {
+          state.isSubmitted = false
+          buttonText.value = 'Failed'
+          buttonColor.value = 'red'
+        }
+      }
+    }
+
+    watch(() => state.isSubmitted, (newVal) => {
+      if (newVal) {
+        buttonText.value = 'Approved'
+        buttonColor.value = 'green'
+      } else {
+        buttonText.value = 'Submit Refund Request'
+        buttonColor.value = 'primary'
+      }
+    })
+
+    return {
+      ...toRefs(state),
+      refundForm,
+      isFormValid,
+      clearForm,
+      submitRefundRequest,
+      buttonText,
+      buttonColor,
+      backButtonLabel,
+      handleCancelOrBack
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/theme.scss';
+.account-alert-inner {
+  .v-icon {
+    color: $app-alert-orange;
+  }
+  background-color: $BCgovGold0 !important;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+.account-alert__info {
+  flex: 1 1 auto;
+}
+</style>
diff --git a/auth-web/tests/unit/components/ShortNameRefund.spec.ts b/auth-web/tests/unit/components/ShortNameRefund.spec.ts
new file mode 100644
index 0000000000..0713dffe99
--- /dev/null
+++ b/auth-web/tests/unit/components/ShortNameRefund.spec.ts
@@ -0,0 +1,43 @@
+import { createLocalVue, mount } from '@vue/test-utils'
+import ShortNameRefund from '@/components/pay/eft/ShortNameRefund.vue'
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Vuetify from 'vuetify'
+import sinon from 'sinon'
+
+Vue.use(Vuetify)
+Vue.use(VueRouter)
+
+describe('ShortNameRefund.vue', () => {
+  let wrapper
+  const localVue = createLocalVue()
+  const vuetify = new Vuetify({})
+  let sandbox
+
+  beforeEach(() => {
+    sandbox = sinon.createSandbox()
+    wrapper = mount(ShortNameRefund, {
+      propsData: {
+        shortNameDetails: { shortName: 'SHORTNAME', id: 1 },
+        unsettledAmount: '100.0'
+      },
+      localVue,
+      vuetify
+    })
+  })
+
+  afterEach(() => {
+    wrapper.destroy()
+    sandbox.restore()
+  })
+
+  it('is a Vue instance', () => {
+    expect(wrapper.vm).toBeTruthy()
+  })
+
+  it('renders the component correctly', () => {
+    expect(wrapper.find('.card-title').text()).toContain('Short Name Refund')
+    expect(wrapper.find('.card-content span').text())
+      .toContain('No refund initiated. SBC Finance can initiate refund if a CAS supplier number is created for the short name.')
+  })
+})
diff --git a/auth-web/tests/unit/views/ShortNameRefundView.spec.ts b/auth-web/tests/unit/views/ShortNameRefundView.spec.ts
new file mode 100644
index 0000000000..538339360a
--- /dev/null
+++ b/auth-web/tests/unit/views/ShortNameRefundView.spec.ts
@@ -0,0 +1,62 @@
+import { createLocalVue, mount } from '@vue/test-utils'
+import ShortNameRefundView from '@/views/pay/eft/ShortNameRefundView.vue'
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Vuetify from 'vuetify'
+import sinon from 'sinon'
+
+Vue.use(Vuetify)
+Vue.use(VueRouter)
+
+describe('ShortNameRefundView.vue', () => {
+  let wrapper
+  const localVue = createLocalVue()
+  const vuetify = new Vuetify({})
+  let sandbox
+
+  beforeEach(() => {
+    sandbox = sinon.createSandbox()
+    wrapper = mount(ShortNameRefundView, {
+      propsData: {
+        shortNameDetails: { shortName: 'TEST', creditsRemaining: '500.0' },
+        unsettledAmount: '100.0'
+      },
+      localVue,
+      vuetify
+    })
+  })
+
+  afterEach(() => {
+    wrapper.destroy()
+    sandbox.restore()
+  })
+
+  it('is a Vue instance', () => {
+    expect(wrapper.vm).toBeTruthy()
+  })
+
+  it('renders the component correctly', () => {
+    expect(wrapper.find('.view-header__title').text()).toBe('Refund Information')
+    expect(wrapper.find('[data-test="refundAmount"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="casSupplierNumber"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="email"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="staffComment"]').exists()).toBe(true)
+  })
+
+  it('clears the form when the cancel button is clicked', async () => {
+    await wrapper.setData({
+      refundAmount: 100.00,
+      casSupplierNum: 'CAS-123',
+      email: 'test@example.com',
+      staffComment: 'Test comment'
+    })
+
+    const cancelButton = wrapper.find('[data-test="btn-edit-routing-cancel"]')
+    await cancelButton.trigger('click')
+
+    expect(wrapper.vm.$data.refundAmount).toBe(undefined)
+    expect(wrapper.vm.$data.casSupplierNum).toBe('')
+    expect(wrapper.vm.$data.email).toBe('')
+    expect(wrapper.vm.$data.staffComment).toBe('')
+  })
+})