diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js
index ea184cab29..db0dd6e517 100644
--- a/ghost/portal/src/App.js
+++ b/ghost/portal/src/App.js
@@ -18,8 +18,8 @@ const React = require('react');
 const DEV_MODE_DATA = {
     showPopup: true,
     site: Fixtures.site,
-    member: Fixtures.member.paid,
-    page: 'signup'
+    member: Fixtures.member.free,
+    page: 'offer'
 };
 
 function SentryErrorBoundary({site, children}) {
@@ -518,13 +518,20 @@ export default class App extends React.Component {
     }
 
     handleOfferQuery({site, offerId}) {
-        removePortalLinkFromUrl();
         const prices = getAvailablePrices({site});
         const priceId = prices?.[0]?.id;
-        if (this.state.member) {
-            this.dispatchAction('checkoutPlan', {plan: priceId, offerId});
+        const showOfferScreen = false;
+        if (showOfferScreen) {
+            this.dispatchAction('openPopup', {
+                page: 'offer'
+            });
         } else {
-            this.dispatchAction('signup', {plan: priceId, offerId});
+            removePortalLinkFromUrl();
+            if (this.state.member) {
+                this.dispatchAction('checkoutPlan', {plan: priceId, offerId});
+            } else {
+                this.dispatchAction('signup', {plan: priceId, offerId});
+            }
         }
     }
 
diff --git a/ghost/portal/src/components/pages/OfferPage.js b/ghost/portal/src/components/pages/OfferPage.js
new file mode 100644
index 0000000000..02dc11098f
--- /dev/null
+++ b/ghost/portal/src/components/pages/OfferPage.js
@@ -0,0 +1,14 @@
+import {offer} from '../../utils/fixtures';
+const React = require('react');
+
+export default class OfferPage extends React.Component {
+    render() {
+        return (
+            <div className='gh-portal-content'>
+                <div style={{paddingLeft: '16px', paddingRight: '16px', paddingTop: '12px'}}>
+                    Offer - {offer.name}
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/ghost/portal/src/pages.js b/ghost/portal/src/pages.js
index 57e9f90958..3c0504db1f 100644
--- a/ghost/portal/src/pages.js
+++ b/ghost/portal/src/pages.js
@@ -6,6 +6,7 @@ import LoadingPage from './components/pages/LoadingPage';
 import AccountPlanPage from './components/pages/AccountPlanPage';
 import AccountProfilePage from './components/pages/AccountProfilePage';
 import LinkPage from './components/pages/LinkPage';
+import OfferPage from './components/pages/OfferPage';
 
 /** List of all available pages in Portal, mapped to their UI component
  * Any new page added to portal needs to be mapped here
@@ -18,7 +19,8 @@ const Pages = {
     accountProfile: AccountProfilePage,
     magiclink: MagicLinkPage,
     loading: LoadingPage,
-    links: LinkPage
+    links: LinkPage,
+    offer: OfferPage
 };
 
 /** Return page if valid, fallback to signup */
@@ -33,4 +35,4 @@ export const isAccountPage = function ({page}) {
     return page.includes('account');
 };
 
-export default Pages;
\ No newline at end of file
+export default Pages;
diff --git a/ghost/portal/src/utils/fixtures.js b/ghost/portal/src/utils/fixtures.js
index b0a9755ec7..178a96afde 100644
--- a/ghost/portal/src/utils/fixtures.js
+++ b/ghost/portal/src/utils/fixtures.js
@@ -339,6 +339,26 @@ export const testSite = {
     portal_plans: ['free', 'monthly', 'yearly']
 };
 
+export const offer = {
+    id: '615fc537e1a950452c06e64d',
+    name: 'Black Friday',
+    code: 'black-friday',
+    display_title: 'Black Friday Special',
+    display_description: 'Black Friday Sale!',
+    type: 'percent',
+    cadence: 'month',
+    amount: 50,
+    duration: 'once',
+    duration_in_months: null,
+    currency_restriction: false,
+    currency: null,
+    status: 'active',
+    tier: {
+        id: '61233747fa18731c77a36691',
+        name: 'Basic'
+    }
+};
+
 export function generateAccountPlanFixture() {
     return {
         site: {