diff --git a/ghost/admin/app/components/modals/membership/offer.hbs b/ghost/admin/app/components/modals/membership/offer.hbs
index 065998fa01..1871c55aa7 100644
--- a/ghost/admin/app/components/modals/membership/offer.hbs
+++ b/ghost/admin/app/components/modals/membership/offer.hbs
@@ -1,29 +1,57 @@
 <div class="modal-content">
-    <header class="modal-header" data-test-modal="delete-user" {{did-insert this.setup}}>
+    <header class="modal-header">
         <h1>New offer</h1>
     </header>
-    <a class="close" href="" role="button" title="Close" {{on "click" @close}}>
-        {{svg-jar "close"}}<span class="hidden">Close</span>
-    </a>
-
     <form>
         <div class="modal-body">
-            
+            <div class="gh-main-section columns-3">
+                <div class="gh-main-section-block span-2">
+                    <h4 class="gh-main-section-header small bn">Basic</h4>
+                    <div class="gh-main-section-content grey gh-product-priceform-block">
+                        <GhFormGroup @errors={{this.errors}} @property="name">
+                            <label for="name" class="fw6">Name</label>
+                            <GhTextInput
+                                @name="name"
+                                @placeholder="Black Friday"
+                                @id="name"
+                                @class="gh-input" />
+                            <GhErrorMessage @errors={{this.errors}} @property="name" />
+                            <p>User internally</p>
+                        </GhFormGroup>
+                    </div>
+
+                    <h4 class="gh-main-section-header small bn">Discount info</h4>
+                    <div class="gh-main-section-content grey gh-product-priceform-block">
+                        <GhFormGroup @errors={{this.errors}} @property="name">
+                            <label for="name" class="fw6">Product – cadence</label>
+                            <GhTextInput
+                                @name="product-cadence"
+                                @placeholder=""
+                                @id="product-cadence"
+                                @class="gh-input" />
+                            <GhErrorMessage @errors={{this.errors}} @property="product-cadence" />
+                        </GhFormGroup>
+                    </div>
+                </div>
+                <div class="gh-main-section-block">
+                    <h4 class="gh-main-section-header small bn">Portal preview</h4>
+                </div>
+            </div>
         </div>
     </form>
 
     <div class="modal-footer">
         <button
-            class="gh-btn mr3"
+            class="gh-btn"
             {{on "click" @close}}
             {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
             {{on "mousedown" (optional this.noop)}}
-            data-test-button="cancel-customize"
+            data-test-button="cancel-offer"
         >
             <span>Cancel</span>
         </button>
 
-        <GhTaskButton @buttonText="Add subscription"
+        <GhTaskButton @buttonText="Add offer"
             @successText={{"Added"}}
             {{!-- @task={{this.addProduct}} --}}
             @class="gh-btn gh-btn-green gh-btn-icon gh-btn-add-memberproduct"
diff --git a/ghost/admin/app/components/modals/membership/offer.js b/ghost/admin/app/components/modals/membership/offer.js
index 14ad767f75..fa30055352 100644
--- a/ghost/admin/app/components/modals/membership/offer.js
+++ b/ghost/admin/app/components/modals/membership/offer.js
@@ -2,5 +2,6 @@ import Component from '@glimmer/component';
 import {inject as service} from '@ember/service';
 
 export default class ModalsMembershipOfferComponent extends Component {
+    @service config;
     @service settings;
 }
diff --git a/ghost/admin/app/controllers/settings/membership.js b/ghost/admin/app/controllers/settings/membership.js
index c76be6c754..5826ad17af 100644
--- a/ghost/admin/app/controllers/settings/membership.js
+++ b/ghost/admin/app/controllers/settings/membership.js
@@ -39,6 +39,7 @@ export default class MembersAccessController extends Controller {
     @tracked stripePlanError = '';
 
     @tracked portalPreviewUrl = '';
+    @tracked offersExist = true;
 
     portalPreviewGuid = Date.now().valueOf();
 
diff --git a/ghost/admin/app/routes/settings/membership/offer.js b/ghost/admin/app/routes/settings/membership/offer.js
index 3a548a4cd5..c108607ada 100644
--- a/ghost/admin/app/routes/settings/membership/offer.js
+++ b/ghost/admin/app/routes/settings/membership/offer.js
@@ -3,7 +3,7 @@ import {action} from '@ember/object';
 import {bind} from '@ember/runloop';
 import {inject as service} from '@ember/service';
 
-export default class MembershipOfferRoute extends AuthenticatedRoute {
+export default class SettingsMembershipOfferRoute extends AuthenticatedRoute {
     @service feature;
     @service modals;
     @service settings;
diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css
index bd4a9974bb..fb8d24a5df 100644
--- a/ghost/admin/app/styles/layouts/main.css
+++ b/ghost/admin/app/styles/layouts/main.css
@@ -1241,13 +1241,13 @@
 }
 
 /* Grey background modifiers */
-.gh-main-section-content.grey .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red),
-.gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-black):not(.gh-btn-link) {
+.gh-main-section-content.grey .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-text),
+.gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-black):not(.gh-btn-link):not(.gh-btn-text) {
     background: var(--whitegrey-d2);
 }
 
-.gh-main-section-content.grey .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):hover,
-.gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-link):hover {
+.gh-main-section-content.grey .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-text):hover,
+.gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-link):not(.gh-btn-text):hover {
     background: color-mod(var(--whitegrey-d2) l(-4%));
 }
 
diff --git a/ghost/admin/app/styles/layouts/products.css b/ghost/admin/app/styles/layouts/products.css
index 69c896cb5a..67028e4b60 100644
--- a/ghost/admin/app/styles/layouts/products.css
+++ b/ghost/admin/app/styles/layouts/products.css
@@ -664,4 +664,19 @@
 
 .fullscreen-modal-edit-offer {
     max-width: 1020px;
+}
+
+.gh-offers-list {
+    padding: 0;
+}
+
+.gh-offers-list-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 20px;
+}
+
+.gh-offers-list-footer a svg path {
+    stroke-width: 1.5px;
 }
\ No newline at end of file
diff --git a/ghost/admin/app/templates/settings/membership.hbs b/ghost/admin/app/templates/settings/membership.hbs
index 244f414345..7ad8f10fd0 100644
--- a/ghost/admin/app/templates/settings/membership.hbs
+++ b/ghost/admin/app/templates/settings/membership.hbs
@@ -233,6 +233,47 @@
                         <div class="gh-expandable-content">
                             {{#liquid-if this.offersOpen}}
                             <div class="gh-setting-content-extended">
+                                {{#if this.offersExist}}
+                                <div class="gh-main-content-card gh-offers-list">
+                                    <table class="gh-list tabbed">
+                                        <thead>
+                                            <tr>
+                                                <th class="gh-list-header">Name</th>
+                                                <th class="gh-list-header">Product</th>
+                                                <th class="gh-list-header">Terms</th>
+                                                <th class="gh-list-header">Redemptions</th>
+                                                <th class="gh-list-header"></th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td class="gh-list-data">Black Friday</td>
+                                                <td class="gh-list-data">Bronze - Monthly</td>
+                                                <td class="gh-list-data">50%</td>
+                                                <td class="gh-list-data">65</td>
+                                                <td class="gh-list-data lightgrey">Actions</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="gh-list-data">Intro to Gold</td>
+                                                <td class="gh-list-data">Gold - Yearly</td>
+                                                <td class="gh-list-data">$299</td>
+                                                <td class="gh-list-data">3</td>
+                                                <td class="gh-list-data lightgrey">Actions</td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                    <div class="gh-offers-list-footer">
+                                        <div>
+                                            <LinkTo @route="settings.membership.offer" class="gh-btn gh-btn-text gh-btn-icon green">
+                                                <span>{{svg-jar "add-stroke"}} Add offer</span>
+                                            </LinkTo>
+                                        </div>
+                                        <div>
+                                            <span class="lightgrey f8">&larr; Prev 1 2 3 Next &rarr;</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                {{else}}
                                 <div class="gh-main-content-card gh-offers gh-offers-list-cta">
                                     {{svg-jar "discount-bubble" class="discount-bubble"}}
                                     <h4>Provide special offers to new signups</h4>
@@ -244,6 +285,7 @@
                                         <span>{{svg-jar "add"}} Add offer</span>
                                     </LinkTo>
                                 </div>
+                                {{/if}}
                             </div>
                             {{/liquid-if}}
                         </div>