diff --git a/packages/esm-billing-app/src/billable-services/bill-manager/bill-manager.scss b/packages/esm-billing-app/src/billable-services/bill-manager/bill-manager.scss
index 9f3ad0771..e3651597a 100644
--- a/packages/esm-billing-app/src/billable-services/bill-manager/bill-manager.scss
+++ b/packages/esm-billing-app/src/billable-services/bill-manager/bill-manager.scss
@@ -1,4 +1,5 @@
 @use '@carbon/layout';
+@use '@carbon/colors';
 
 .billManagerContainer {
   margin: layout.$layout-01;
@@ -6,21 +7,21 @@
 }
 
 .billListContainer {
-  background-color: white;
+  background-color: colors.$white-0;
 }
 
 .dataTableSkeleton {
-  margin-top: 0.625rem;
+  margin-top: layout.$spacing-05;
 }
 
 .refundedItem {
-  background-color: #fee2e2;
-}
+  background-color: colors.$red-20;
 
-.refundedItem:hover {
-  background-color: #fecaca !important;
-}
+  &:hover {
+    background-color: colors.$red-30 !important;
+  }
 
-.refundedItem:active {
-  background-color: #fca5a5 !important;
+  &:active {
+    background-color: colors.$red-40 !important;
+  }
 }
diff --git a/packages/esm-billing-app/src/billable-services/bill-manager/modals/cancel-bill.scss b/packages/esm-billing-app/src/billable-services/bill-manager/modals/cancel-bill.scss
index 9a4a1e271..5bcd5de30 100644
--- a/packages/esm-billing-app/src/billable-services/bill-manager/modals/cancel-bill.scss
+++ b/packages/esm-billing-app/src/billable-services/bill-manager/modals/cancel-bill.scss
@@ -1,4 +1,5 @@
 @use '@carbon/type';
+@use '@carbon/layout';
 
 .modalHeaderLabel {
   @include type.type-style('label-02');
@@ -10,7 +11,7 @@
 
 .button_spinner {
   padding: 0;
-  margin-right: 12px;
+  margin-right: layout.$spacing-03;
 }
 
 .loading_wrapper {
diff --git a/packages/esm-billing-app/src/billable-services/bill-manager/modals/refund-bill.modal.tsx b/packages/esm-billing-app/src/billable-services/bill-manager/modals/refund-bill.modal.tsx
index eb2bb0652..82ec09b7a 100644
--- a/packages/esm-billing-app/src/billable-services/bill-manager/modals/refund-bill.modal.tsx
+++ b/packages/esm-billing-app/src/billable-services/bill-manager/modals/refund-bill.modal.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { showSnackbar } from '@openmrs/esm-framework';
 import { processBillItems } from '../../../billing.resource';
 import { mutate } from 'swr';
-import { LineItem, MappedBill } from '../../../types';
+import { LineItem, MappedBill, PaymentStatus } from '../../../types';
 
 export const RefundBillModal: React.FC<{
   onClose: () => void;
@@ -23,7 +23,7 @@ export const RefundBillModal: React.FC<{
       priceName: lineItem.priceName,
       priceUuid: lineItem.priceUuid,
       lineItemOrder: lineItem.lineItemOrder,
-      paymentStatus: 'CREDITED',
+      paymentStatus: PaymentStatus.CREDITED,
       billableService: lineItem.billableService.split(':').at(0),
     };
 
@@ -44,7 +44,7 @@ export const RefundBillModal: React.FC<{
           revalidate: true,
         });
         showSnackbar({
-          title: t('billItems', 'Refund Items'),
+          title: t('refundItems', 'Refund Items'),
           subtitle: 'Item has been successfully refunded.',
           kind: 'success',
           timeoutInMs: 3000,
diff --git a/packages/esm-billing-app/src/index.ts b/packages/esm-billing-app/src/index.ts
index f62057bea..3e04fdb0c 100644
--- a/packages/esm-billing-app/src/index.ts
+++ b/packages/esm-billing-app/src/index.ts
@@ -22,6 +22,7 @@ import { DeleteBillModal } from './billable-services/bill-manager/modals/delete-
 import PriceInfoOrder from './billable-services/billiable-item/test-order/price-info-order.componet';
 import ProcedureOrder from './billable-services/billiable-item/test-order/procedure-order.component';
 import ImagingOrder from './billable-services/billiable-item/test-order/imaging-order.component';
+import { RefundBillModal } from './billable-services/bill-manager/modals/refund-bill.modal';
 
 const moduleName = '@kenyaemr/esm-billing-app';
 
@@ -70,6 +71,7 @@ export const deleteBillModal = getSyncLifecycle(DeleteBillModal, options);
 // bill manager extensions
 export const waiveBillForm = getSyncLifecycle(WaiveBillForm, options);
 export const editBillForm = getSyncLifecycle(EditBillForm, options);
+export const refundBillModal = getSyncLifecycle(RefundBillModal, options);
 
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
diff --git a/packages/esm-billing-app/src/types/index.ts b/packages/esm-billing-app/src/types/index.ts
index ce0d7f104..b6861a673 100644
--- a/packages/esm-billing-app/src/types/index.ts
+++ b/packages/esm-billing-app/src/types/index.ts
@@ -276,3 +276,13 @@ export type QueueEntry = {
 };
 
 export type RequestStatus = 'INITIATED' | 'COMPLETE' | 'FAILED' | 'NOT-FOUND';
+
+export enum PaymentStatus {
+  POSTED = 'POSTED',
+  PENDING = 'PENDING',
+  PAID = 'PAID',
+  CREDITED = 'CREDITED',
+  CANCELLED = 'CANCELLED',
+  ADJUSTED = 'ADJUSTED',
+  EXEMPTED = 'EXEMPTED',
+}