diff --git a/apps/admin-x-settings/src/components/settings/membership/offers/OffersModal.tsx b/apps/admin-x-settings/src/components/settings/membership/offers/OffersModal.tsx
index 73c096c26f..7b7db2a1c6 100644
--- a/apps/admin-x-settings/src/components/settings/membership/offers/OffersModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/offers/OffersModal.tsx
@@ -25,7 +25,6 @@ const OfferCard: React.FC<{amount: number, cadence: string, currency: string, du
     let updatedPrice = originalPrice;
     let tierName = offerTier?.name + ' ' + (cadence === 'month' ? 'Monthly' : 'Yearly') + ' — ' + (duration === 'once' ? 'First payment' : duration === 'repeating' ? 'Repeating' : 'Forever');
     let originalPriceWithCurrency = getSymbol(currency) + numberWithCommas(currencyToDecimal(originalPrice));
-    const updatedPriceWithCurrency = getSymbol(currency) + numberWithCommas(currencyToDecimal(updatedPrice));
 
     switch (type) {
     case 'percent':
@@ -47,6 +46,8 @@ const OfferCard: React.FC<{amount: number, cadence: string, currency: string, du
         break;
     }
 
+    const updatedPriceWithCurrency = getSymbol(currency) + numberWithCommas(currencyToDecimal(updatedPrice));
+  
     return (
         <div className='flex cursor-pointer flex-col gap-6 border border-transparent bg-grey-100 p-5 transition-all hover:border-grey-100 hover:bg-grey-75 hover:shadow-sm dark:bg-grey-950 dark:hover:border-grey-800' onClick={onClick}>
             <div className='flex items-center justify-between'>
diff --git a/apps/admin-x-settings/test/acceptance/membership/offers.test.ts b/apps/admin-x-settings/test/acceptance/membership/offers.test.ts
new file mode 100644
index 0000000000..4e290102e9
--- /dev/null
+++ b/apps/admin-x-settings/test/acceptance/membership/offers.test.ts
@@ -0,0 +1,54 @@
+import {expect, test} from '@playwright/test';
+import {globalDataRequests, mockApi, responseFixtures, settingsWithStripe, toggleLabsFlag} from '../../utils/acceptance';
+
+test.describe('Offers Modal', () => {
+    test.beforeEach(async () => {
+        toggleLabsFlag('adminXOffers', true);
+    });
+
+    test('Offers Modal is available', async ({page}) => {
+        await mockApi({page, requests: {
+            ...globalDataRequests,
+            browseSettings: {...globalDataRequests.browseSettings, response: settingsWithStripe}
+        }});
+        await page.goto('/');
+        const section = page.getByTestId('offers');
+        await section.getByRole('button', {name: 'Manage offers'}).click();
+        const modal = page.getByTestId('offers-modal');
+        await expect(modal).toBeVisible();
+    });
+
+    test('Can view active offers', async ({page}) => {
+        await mockApi({page, requests: {
+            ...globalDataRequests,
+            browseSettings: {...globalDataRequests.browseSettings, response: settingsWithStripe},
+            browseOffers: {method: 'GET', path: '/offers/?limit=all', response: responseFixtures.offers},
+            browseTiers: {method: 'GET', path: '/tiers/', response: responseFixtures.tiers}
+        }});
+
+        await page.goto('/');
+        const section = page.getByTestId('offers');
+        await section.getByRole('button', {name: 'Manage offers'}).click();
+        const modal = page.getByTestId('offers-modal');
+        await expect(modal).toContainText('Active offers');
+        await expect(modal).toContainText('First offer');
+        await expect(modal).toContainText('Second offer'); 
+    });
+
+    test('Can view archived offers', async ({page}) => {
+        await mockApi({page, requests: {
+            ...globalDataRequests,
+            browseSettings: {...globalDataRequests.browseSettings, response: settingsWithStripe},
+            browseOffers: {method: 'GET', path: '/offers/?limit=all', response: responseFixtures.offers},
+            browseTiers: {method: 'GET', path: '/tiers/', response: responseFixtures.tiers}
+        }});
+
+        await page.goto('/');
+        const section = page.getByTestId('offers');
+        await section.getByRole('button', {name: 'Manage offers'}).click();
+        const modal = page.getByTestId('offers-modal');
+        await modal.getByText('Archived').click();
+        await expect(modal).toContainText('Archived offers');
+        await expect(modal).toContainText('Third offer'); 
+    });
+});
diff --git a/apps/admin-x-settings/test/acceptance/membership/tiers.test.ts b/apps/admin-x-settings/test/acceptance/membership/tiers.test.ts
index 52f8a98d3d..69fc65bcac 100644
--- a/apps/admin-x-settings/test/acceptance/membership/tiers.test.ts
+++ b/apps/admin-x-settings/test/acceptance/membership/tiers.test.ts
@@ -1,12 +1,5 @@
 import {expect, test} from '@playwright/test';
-import {globalDataRequests, mockApi, responseFixtures, updatedSettingsResponse} from '../../utils/acceptance';
-
-const settingsWithStripe = updatedSettingsResponse([
-    {key: 'stripe_connect_publishable_key', value: 'pk_test_123'},
-    {key: 'stripe_connect_secret_key', value: 'sk_test_123'},
-    {key: 'stripe_connect_display_name', value: 'Dummy'},
-    {key: 'stripe_connect_account_id', value: 'acct_123'}
-]);
+import {globalDataRequests, mockApi, responseFixtures, settingsWithStripe} from '../../utils/acceptance';
 
 test.describe('Tier settings', async () => {
     test('Supports creating a new tier', async ({page}) => {
diff --git a/apps/admin-x-settings/test/utils/acceptance.ts b/apps/admin-x-settings/test/utils/acceptance.ts
index 96c20c1efc..7e3b1301da 100644
--- a/apps/admin-x-settings/test/utils/acceptance.ts
+++ b/apps/admin-x-settings/test/utils/acceptance.ts
@@ -123,6 +123,13 @@ export const globalDataRequests = {
     browseMe: {method: 'GET', path: '/users/me/?include=roles', response: responseFixtures.me}
 };
 
+export const settingsWithStripe = updatedSettingsResponse([
+    {key: 'stripe_connect_publishable_key', value: 'pk_test_123'},
+    {key: 'stripe_connect_secret_key', value: 'sk_test_123'},
+    {key: 'stripe_connect_display_name', value: 'Dummy'},
+    {key: 'stripe_connect_account_id', value: 'acct_123'}
+]);
+
 export const limitRequests = {
     browseUsers: {method: 'GET', path: '/users/?limit=100&include=roles', response: responseFixtures.users},
     browseInvites: {method: 'GET', path: '/invites/', response: responseFixtures.invites},
diff --git a/apps/admin-x-settings/test/utils/responses/offers.json b/apps/admin-x-settings/test/utils/responses/offers.json
index 0974e8027c..b6194c9f43 100644
--- a/apps/admin-x-settings/test/utils/responses/offers.json
+++ b/apps/admin-x-settings/test/utils/responses/offers.json
@@ -39,6 +39,26 @@
                 "id": "645453f4d254799990dd0e22",
                 "name": "Supporter"
             }
+        },
+        {
+            "id": "6487f0c364fca78ec2fff600",
+            "name": "Third offer",
+            "code": "third-offer",
+            "display_title": "Third offer",
+            "display_description": "",
+            "type": "percent",
+            "cadence": "month",
+            "amount": 12,
+            "duration": "repeating",
+            "duration_in_months": 3,
+            "currency_restriction": false,
+            "currency": null,
+            "status": "archived",
+            "redemption_count": 0,
+            "tier": {
+                "id": "645453f4d254799990dd0e22",
+                "name": "Supporter"
+            }
         }
     ]
 }