diff --git a/src/components/EnterpriseApp/data/constants.js b/src/components/EnterpriseApp/data/constants.js
index 8669c4983a..6feaac51f7 100644
--- a/src/components/EnterpriseApp/data/constants.js
+++ b/src/components/EnterpriseApp/data/constants.js
@@ -20,7 +20,7 @@ export const BUDGET_STATUSES = {
   upcoming: 'Upcoming',
 };
 
-export const OFFER_TYPES = {
+export const BUDGET_TYPES = {
   ecommerce: 'ecommerce',
   subsidy: 'subsidy',
 };
diff --git a/src/components/EnterpriseSubsidiesContext/data/hooks.js b/src/components/EnterpriseSubsidiesContext/data/hooks.js
index e10f23bed0..2a5443a25e 100644
--- a/src/components/EnterpriseSubsidiesContext/data/hooks.js
+++ b/src/components/EnterpriseSubsidiesContext/data/hooks.js
@@ -10,7 +10,7 @@ import { camelCaseObject } from '@edx/frontend-platform/utils';
 import EcommerceApiService from '../../../data/services/EcommerceApiService';
 import LicenseManagerApiService from '../../../data/services/LicenseManagerAPIService';
 import SubsidyApiService from '../../../data/services/EnterpriseSubsidyApiService';
-import { OFFER_TYPES } from '../../EnterpriseApp/data/constants';
+import { BUDGET_TYPES } from '../../EnterpriseApp/data/constants';
 
 export const useEnterpriseOffers = ({ enablePortalLearnerCreditManagementScreen, enterpriseId }) => {
   const [offers, setOffers] = useState([]);
@@ -26,9 +26,7 @@ export const useEnterpriseOffers = ({ enablePortalLearnerCreditManagementScreen,
       try {
         const [enterpriseSubsidyResponse, ecommerceApiResponse] = await Promise.all([
           SubsidyApiService.getSubsidyByCustomerUUID(enterpriseId, { subsidyType: 'learner_credit' }),
-          EcommerceApiService.fetchEnterpriseOffers({
-            isCurrent: true,
-          }),
+          EcommerceApiService.fetchEnterpriseOffers(),
         ]);
 
         // We have to consider both type of offers active and inactive.
@@ -40,7 +38,7 @@ export const useEnterpriseOffers = ({ enablePortalLearnerCreditManagementScreen,
 
         enterpriseSubsidyResults.forEach((result) => {
           offerData.push({
-            source: OFFER_TYPES.subsidy,
+            source: BUDGET_TYPES.subsidy,
             id: result.uuid,
             name: result.title,
             start: result.activeDatetime,
@@ -51,7 +49,7 @@ export const useEnterpriseOffers = ({ enablePortalLearnerCreditManagementScreen,
 
         ecommerceOffersResults.forEach((result) => {
           offerData.push({
-            source: OFFER_TYPES.ecommerce,
+            source: BUDGET_TYPES.ecommerce,
             id: result.id,
             name: result.displayName,
             start: result.startDatetime,
diff --git a/src/components/EnterpriseSubsidiesContext/data/tests/hooks.test.js b/src/components/EnterpriseSubsidiesContext/data/tests/hooks.test.js
index 3e3ad44f52..ec1c5466af 100644
--- a/src/components/EnterpriseSubsidiesContext/data/tests/hooks.test.js
+++ b/src/components/EnterpriseSubsidiesContext/data/tests/hooks.test.js
@@ -4,7 +4,7 @@ import { useCoupons, useCustomerAgreement, useEnterpriseOffers } from '../hooks'
 import EcommerceApiService from '../../../../data/services/EcommerceApiService';
 import LicenseManagerApiService from '../../../../data/services/LicenseManagerAPIService';
 import SubsidyApiService from '../../../../data/services/EnterpriseSubsidyApiService';
-import { OFFER_TYPES } from '../../../EnterpriseApp/data/constants';
+import { BUDGET_TYPES } from '../../../EnterpriseApp/data/constants';
 
 jest.mock('@edx/frontend-platform/config', () => ({
   getConfig: jest.fn(() => ({
@@ -52,7 +52,7 @@ describe('useEnterpriseOffers', () => {
       start: '2021-05-15T19:56:09Z',
       end: '2100-05-15T19:56:09Z',
       isCurrent: true,
-      source: OFFER_TYPES.ecommerce,
+      source: BUDGET_TYPES.ecommerce,
     }];
 
     SubsidyApiService.getSubsidyByCustomerUUID.mockResolvedValueOnce({
@@ -71,9 +71,7 @@ describe('useEnterpriseOffers', () => {
 
     await waitForNextUpdate();
 
-    expect(EcommerceApiService.fetchEnterpriseOffers).toHaveBeenCalledWith({
-      isCurrent: true,
-    });
+    expect(EcommerceApiService.fetchEnterpriseOffers).toHaveBeenCalled();
     expect(result.current).toEqual({
       offers: mockOffers,
       isLoading: false,
@@ -133,7 +131,7 @@ describe('useEnterpriseOffers', () => {
         start: '2021-05-15T19:56:09Z',
         end: '2100-05-15T19:56:09Z',
         isCurrent: true,
-        source: OFFER_TYPES.subsidy,
+        source: BUDGET_TYPES.subsidy,
       },
       {
         id: 'uuid',
@@ -141,7 +139,7 @@ describe('useEnterpriseOffers', () => {
         start: '2021-05-15T19:56:09Z',
         end: '2100-05-15T19:56:09Z',
         isCurrent: true,
-        source: OFFER_TYPES.ecommerce,
+        source: BUDGET_TYPES.ecommerce,
       },
     ];
 
@@ -216,7 +214,7 @@ describe('useEnterpriseOffers', () => {
         start: '2005-05-15T19:56:09Z',
         end: '2006-05-15T19:56:09Z',
         isCurrent: false,
-        source: OFFER_TYPES.subsidy,
+        source: BUDGET_TYPES.subsidy,
       },
       {
         id: 'offer-2',
@@ -224,7 +222,7 @@ describe('useEnterpriseOffers', () => {
         start: '2006-05-15T19:56:09Z',
         end: '2099-05-15T19:56:09Z',
         isCurrent: true,
-        source: OFFER_TYPES.subsidy,
+        source: BUDGET_TYPES.subsidy,
       },
     ];
 
diff --git a/src/components/learner-credit-management/BudgetCard-V2.jsx b/src/components/learner-credit-management/BudgetCard-V2.jsx
index b3ac7c695f..2e5fe3a360 100644
--- a/src/components/learner-credit-management/BudgetCard-V2.jsx
+++ b/src/components/learner-credit-management/BudgetCard-V2.jsx
@@ -1,39 +1,14 @@
-/* eslint-disable */
+/* eslint-disable no-nested-ternary */
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Stack,
-  Col,
-  Card,
-  Skeleton,
 } from '@edx/paragon';
 
 import { useOfferSummary } from './data/hooks';
-import SubBudgetCard from './Budgetcard-V3';
-import { OFFER_TYPES } from '../EnterpriseApp/data/constants';
+import SubBudgetCard from './SubBudgetCard';
+import { BUDGET_TYPES } from '../EnterpriseApp/data/constants';
 
-const LoadingCards = () => (
-  <Stack gap={4}>
-    <Col className="d-flex flex-column">
-      <Card className="h-100">
-        <Card.Section className="d-flex align-items-center">
-          <div className="w-100" data-testid="loading-skeleton-card-3">
-            <Skeleton height={60} />
-          </div>
-        </Card.Section>
-      </Card>
-    </Col>
-    <Col className="d-flex flex-column">
-      <Card className="h-100">
-        <Card.Section className="d-flex align-items-center">
-          <div className="w-100" data-testid="loading-skeleton-card-3">
-            <Skeleton height={60} />
-          </div>
-        </Card.Section>
-      </Card>
-    </Col>
-  </Stack>
-);
 const BudgetCard = ({
   offer,
   enterpriseUUID,
@@ -52,12 +27,11 @@ const BudgetCard = ({
   } = useOfferSummary(enterpriseUUID, offer);
 
   return (
-    <Stack gap={4} className='mt-4'>
-      {isLoadingOfferSummary ? (
-        <LoadingCards />
-      ) : offerType === OFFER_TYPES.ecommerce ? (
+    <Stack gap={4} className="mt-4">
+      {isLoadingOfferSummary && offerType === BUDGET_TYPES.ecommerce ? (
         <SubBudgetCard
-          id={offerSummary.offerId}
+          isLoading={isLoadingOfferSummary}
+          id={offerSummary?.offerId}
           start={start}
           end={end}
           available={offerSummary?.remainingFunds}
@@ -68,6 +42,7 @@ const BudgetCard = ({
       ) : (
         offerSummary?.budgetsSummary.map((budget) => (
           <SubBudgetCard
+            isLoading={isLoadingOfferSummary}
             key={budget.subsidyAccessPolicyUuid}
             id={budget.subsidyAccessPolicyUuid}
             start={start}
diff --git a/src/components/learner-credit-management/Budgetcard-V3.jsx b/src/components/learner-credit-management/Budgetcard-V3.jsx
deleted file mode 100644
index 9d901beea2..0000000000
--- a/src/components/learner-credit-management/Budgetcard-V3.jsx
+++ /dev/null
@@ -1,101 +0,0 @@
-/* eslint-disable */
-import { Link } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import dayjs from 'dayjs';
-import {
-    Card,
-    Button,
-    Stack,
-    Row,
-    Col,
-} from '@edx/paragon';
-
-import { BUDGET_STATUSES, ROUTE_NAMES } from '../EnterpriseApp/data/constants';
-import { getBudgetStatus } from './data/utils';
-
-const SubBudgetCard = ({
-    id,
-    start,
-    end,
-    available,
-    spent,
-    displayName,
-    enterpriseSlug,
-}) => {
-    const formattedStartDate = dayjs(start).format('MMMM D, YYYY');
-    const formattedExpirationDate = dayjs(end).format('MMMM D, YYYY');
-    const budgetStatus = getBudgetStatus(start, end);
-
-    const renderActions = (id) => (
-        <Button
-            data-testid="view-budget"
-            as={Link}
-            to={`/${enterpriseSlug}/admin/${ROUTE_NAMES.learnerCredit}/${id}`}
-        >
-            View budget
-        </Button>
-    );
-
-    const renderCardHeader = (budgetType, id) => {
-        const subtitle = (
-            <div className="d-flex flex-wrap align-items-center">
-                <span data-testid="offer-date">
-                    {formattedStartDate} - {formattedExpirationDate}
-                </span>
-            </div>
-        );
-
-        return (
-            <Card.Header
-                title={budgetType}
-                subtitle={subtitle}
-                actions={(
-                    <div>
-                        {budgetStatus !== BUDGET_STATUSES.upcoming && renderActions(id)}
-                    </div>
-                )}
-            />
-        );
-    };
-
-    const renderCardSection = (available, spent) => (
-        <Card.Section
-            title="Balance"
-            muted
-        >
-            <Row className="d-flex flex-row justify-content-start w-md-75">
-                <Col xs="6" md="auto" className="d-flex flex-column mb-3 mb-md-0">
-                    <span className="small">Available</span>
-                    <span>{available}</span>
-                </Col>
-                <Col xs="6" md="auto" className="d-flex flex-column mb-3 mb-md-0">
-                    <span className="small">Spent</span>
-                    <span>{spent}</span>
-                </Col>
-            </Row>
-        </Card.Section>
-    );
-
-    return (
-        <Card
-            orientation="horizontal"
-        >
-            <Card.Body>
-                {renderCardHeader(displayName || 'Overview', id)}
-                {budgetStatus !== BUDGET_STATUSES.upcoming && renderCardSection(available, spent)}
-            </Card.Body>
-        </Card>
-    );
-};
-
-SubBudgetCard.propTypes = {
-    enterpriseSlug: PropTypes.string.isRequired,
-    id: PropTypes.string,
-    start: PropTypes.string,
-    end: PropTypes.string,
-    spent: PropTypes.number,
-    available: PropTypes.number,
-    displayName: PropTypes.string,
-};
-
-export default SubBudgetCard;
diff --git a/src/components/learner-credit-management/MultipleBudgetsPage.jsx b/src/components/learner-credit-management/MultipleBudgetsPage.jsx
index 3df18c465a..81f7065ac8 100644
--- a/src/components/learner-credit-management/MultipleBudgetsPage.jsx
+++ b/src/components/learner-credit-management/MultipleBudgetsPage.jsx
@@ -6,6 +6,7 @@ import {
   Col,
   Card,
   Hyperlink,
+  Container,
 } from '@edx/paragon';
 import { connect } from 'react-redux';
 import { Helmet } from 'react-helmet';
@@ -35,26 +36,28 @@ const MultipleBudgetsPage = ({
       <Stack>
         <Helmet title={PAGE_TITLE} />
         <Hero title={PAGE_TITLE} />
-        <Card>
-          <Card.Section className="text-center">
-            <Row>
-              <Col xs={12} lg={{ span: 8, offset: 2 }}>
-                <h3 className="mb-3">No budgets for your organization</h3>
-                <p>
-                  We were unable to find any budgets for your organization. Please contact
-                  Customer Support if you have questions.
-                </p>
-                <Hyperlink
-                  className="btn btn-brand"
-                  target="_blank"
-                  destination={configuration.ENTERPRISE_SUPPORT_URL}
-                >
-                  Contact support
-                </Hyperlink>
-              </Col>
-            </Row>
-          </Card.Section>
-        </Card>
+        <Container className="py-3" fluid>
+          <Card>
+            <Card.Section className="text-center">
+              <Row>
+                <Col xs={12} lg={{ span: 8, offset: 2 }}>
+                  <h3 className="mb-3">No budgets for your organization</h3>
+                  <p>
+                    We were unable to find any budgets for your organization. Please contact
+                    Customer Support if you have questions.
+                  </p>
+                  <Hyperlink
+                    className="btn btn-brand"
+                    target="_blank"
+                    destination={configuration.ENTERPRISE_SUPPORT_URL}
+                  >
+                    Contact support
+                  </Hyperlink>
+                </Col>
+              </Row>
+            </Card.Section>
+          </Card>
+        </Container>
       </Stack>
     );
   }
diff --git a/src/components/learner-credit-management/SubBudgetCard.jsx b/src/components/learner-credit-management/SubBudgetCard.jsx
new file mode 100644
index 0000000000..d3360cea43
--- /dev/null
+++ b/src/components/learner-credit-management/SubBudgetCard.jsx
@@ -0,0 +1,103 @@
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import dayjs from 'dayjs';
+import {
+  Card,
+  Button,
+  Row,
+  Col,
+} from '@edx/paragon';
+
+import { BUDGET_STATUSES, ROUTE_NAMES } from '../EnterpriseApp/data/constants';
+import { formatPrice, getBudgetStatus } from './data/utils';
+
+const SubBudgetCard = ({
+  id,
+  start,
+  end,
+  available,
+  spent,
+  displayName,
+  enterpriseSlug,
+  isLoading,
+}) => {
+  const formattedStartDate = dayjs(start).format('MMMM D, YYYY');
+  const formattedExpirationDate = dayjs(end).format('MMMM D, YYYY');
+  const budgetStatus = getBudgetStatus(start, end);
+
+  const renderActions = (budgetId) => (
+    <Button
+      data-testid="view-budget"
+      as={Link}
+      to={`/${enterpriseSlug}/admin/${ROUTE_NAMES.learnerCredit}/${budgetId}`}
+    >
+      View budget
+    </Button>
+  );
+
+  const renderCardHeader = (budgetType, budgetId) => {
+    const subtitle = (
+      <div className="d-flex flex-wrap align-items-center">
+        <span data-testid="offer-date">
+          {formattedStartDate} - {formattedExpirationDate}
+        </span>
+      </div>
+    );
+
+    return (
+      <Card.Header
+        title={budgetType}
+        subtitle={subtitle}
+        className="mb-3"
+        actions={
+                    budgetStatus !== BUDGET_STATUSES.upcoming
+                      ? renderActions(budgetId)
+                      : undefined
+                }
+      />
+    );
+  };
+
+  const renderCardSection = (availableBalance, spentBalance) => (
+    <Card.Section
+      title="Balance"
+      muted
+    >
+      <Row className="d-flex flex-row justify-content-start w-md-75">
+        <Col xs="6" md="auto" className="d-flex flex-column mb-3 mb-md-0">
+          <span className="small">Available</span>
+          <span>{formatPrice(availableBalance)}</span>
+        </Col>
+        <Col xs="6" md="auto" className="d-flex flex-column mb-3 mb-md-0">
+          <span className="small">Spent</span>
+          <span>{formatPrice(spentBalance)}</span>
+        </Col>
+      </Row>
+    </Card.Section>
+  );
+
+  return (
+    <Card
+      orientation="horizontal"
+      isLoading={isLoading}
+    >
+      <Card.Body>
+        {renderCardHeader(displayName || 'Overview', id)}
+        {budgetStatus !== BUDGET_STATUSES.upcoming && renderCardSection(available, spent)}
+      </Card.Body>
+    </Card>
+  );
+};
+
+SubBudgetCard.propTypes = {
+  enterpriseSlug: PropTypes.string.isRequired,
+  id: PropTypes.string,
+  start: PropTypes.string,
+  end: PropTypes.string,
+  spent: PropTypes.number,
+  isLoading: PropTypes.bool,
+  available: PropTypes.number,
+  displayName: PropTypes.string,
+};
+
+export default SubBudgetCard;
diff --git a/src/components/learner-credit-management/data/utils.js b/src/components/learner-credit-management/data/utils.js
index 15d3eae2a2..47d17e7994 100644
--- a/src/components/learner-credit-management/data/utils.js
+++ b/src/components/learner-credit-management/data/utils.js
@@ -127,3 +127,11 @@ export const getBudgetStatus = (startDateStr, endDateStr) => {
   }
   return BUDGET_STATUSES.expired;
 };
+
+export const formatPrice = (price) => {
+  const USDollar = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  });
+  return USDollar.format(price);
+};
diff --git a/src/components/learner-credit-management/tests/BudgetCard.test.jsx b/src/components/learner-credit-management/tests/BudgetCard.test.jsx
index 0bffaaf5e6..d8aa511a4a 100644
--- a/src/components/learner-credit-management/tests/BudgetCard.test.jsx
+++ b/src/components/learner-credit-management/tests/BudgetCard.test.jsx
@@ -14,7 +14,7 @@ import '@testing-library/jest-dom/extend-expect';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import BudgetCard from '../BudgetCard-V2';
 import { useOfferSummary, useOfferRedemptions } from '../data/hooks';
-import { OFFER_TYPES } from '../../EnterpriseApp/data/constants';
+import { BUDGET_TYPES } from '../../EnterpriseApp/data/constants';
 
 jest.mock('../data/hooks');
 useOfferSummary.mockReturnValue({
@@ -122,7 +122,7 @@ describe('<BudgetCard />', () => {
         name: mockOfferDisplayName,
         start: '2022-01-01',
         end: '2023-01-01',
-        offerType: OFFER_TYPES.ecommerce,
+        offerType: BUDGET_TYPES.ecommerce,
       };
       const mockOfferRedemption = {
         created: '2022-02-01',