diff --git a/ghost/admin/app/components/gh-member-settings-form-cp.hbs b/ghost/admin/app/components/gh-member-settings-form-cp.hbs
index dd12711738..1bfedc69e2 100644
--- a/ghost/admin/app/components/gh-member-settings-form-cp.hbs
+++ b/ghost/admin/app/components/gh-member-settings-form-cp.hbs
@@ -135,71 +135,119 @@
             {{/unless}}
 
             {{#each this.products as |product|}}
-                <div class="gh-main-section-content bordered">
-                    <div class="gh-cp-memberproduct {{if (not (eq product.subscriptions.length 1)) "multiple-subs" ""}}">
+                <div class="gh-member-product-container">
+                    <div class="gh-cp-memberproduct {{if (gt product.subscriptions.length 1) "multiple-subs" ""}}">
                         <h3 class="gh-memberproduct-name">
                             {{product.name}}
-                            {{#unless (eq product.subscriptions.length 1)}}
+                            {{#if (gt product.subscriptions.length 1)}}
                             <span class="gh-memberproduct-subcount">{{product.subscriptions.length}} subscriptions</span>
-                            {{/unless}}
+                            {{/if}}
                         </h3>
+
                         {{#each product.subscriptions as |sub|}}
                         <div class="gh-memberproduct-subscription">
                             <div>
-                                <span class="gh-cp-memberproduct-pricelabel">{{sub.price.nickname}}</span>
-                                &ndash;
-                                <span class="gh-cp-memberproduct-price">{{sub.price.currencySymbol}}{{sub.price.nonDecimalAmount}}/{{sub.price.interval}}</span>
-                                &ndash;
-                                {{#if sub.cancel_at_period_end}}
-                                    <span class="gh-cp-memberproduct-renewal">Has access until {{sub.validUntil}}</span>
-                                    <span class="gh-badge archived">Cancelled</span>
-                                {{else}}
-                                    <span class="gh-cp-memberproduct-renewal">Renews {{sub.validUntil}}</span>
-                                    <span class="gh-badge active">Active</span>
-                                {{/if}}
-                            </div>
-                            {{#if sub.cancellationReason}}
-                                <div class="gh-memberproduct-cancelreason"><span class="fw6">Cancellation reason:</span> {{sub.cancellationReason}}</div>
-                            {{/if}}
-                            <div class="gh-memberproduct-created">Created on {{sub.startDate}}</div>
-
-                            <span class="action-menu">
-                                <GhDropdownButton @dropdownName="subscription-menu-{{sub.id}}" @classNames="gh-btn gh-btn-outline gh-btn-icon gh-btn-subscription-action only-has-icon" @title="User Actions">
-                                    <span>
-                                        {{svg-jar "dotdotdot"}}
-                                        <span class="hidden">Subscription menu</span>
-                                    </span>
-                                </GhDropdownButton>
-                                <GhDropdown @name="subscription-menu-{{sub.id}}" @tagName="ul" @classNames="product-actions-menu dropdown-menu dropdown-align-right">
-                                    <li>
-                                        <a href="https://dashboard.stripe.com/customers/{{sub.customer.id}}" target="_blank" rel="noopener">
-                                            View Stripe customer
-                                        </a>
-                                    </li>
-                                    <li class="divider"></li>
-                                    <li>
-                                        <a href="https://dashboard.stripe.com/subscriptions/{{sub.id}}" target="_blank" rel="noopener">
-                                            View Stripe subscription
-                                        </a>
-                                    </li>
-                                    <li>
+                                <div>
+                                    <span class="gh-cp-memberproduct-pricelabel">{{sub.price.nickname}}</span>
+                                    &ndash;
                                     {{#if sub.cancel_at_period_end}}
-                                        <button {{action "continueSubscription" sub.id}}>
-                                            <span>Continue subscription</span>
-                                        </button>
+                                        <span class="gh-cp-memberproduct-renewal">Has access until {{sub.validUntil}}</span>
+                                        <span class="gh-badge archived">Cancelled</span>
                                     {{else}}
-                                        <button {{action "cancelSubscription" sub.id}}>
-                                            <span class="red">Cancel subscription</span>
-                                        </button>
+                                        <span class="gh-cp-memberproduct-renewal">Renews {{sub.validUntil}}</span>
+                                        <span class="gh-badge active">Active</span>
                                     {{/if}}
-                                    </li>
-                                </GhDropdown>
-                            </span>
+                                </div>
+                                {{#if sub.cancellationReason}}
+                                    <div class="gh-memberproduct-cancelreason"><span class="fw6">Cancellation reason:</span> {{sub.cancellationReason}}</div>
+                                {{/if}}
+                                <div class="gh-memberproduct-created">Created on {{sub.startDate}}</div>
+                            </div>
+
+                            <div class="flex items-center">
+                                <div class="gh-product-card-price">
+                                    <div class="flex items-start">
+                                        <span class="currency-symbol">{{sub.price.currencySymbol}}</span>
+                                        <span class="amount">{{sub.price.nonDecimalAmount}}</span>
+                                    </div>
+                                    <div class="period">{{if (eq sub.price.interval "year") "yearly" "monthly"}}</div>
+                                </div>
+
+                                <span class="action-menu">
+                                    <GhDropdownButton @dropdownName="subscription-menu-{{sub.id}}" @classNames="gh-btn gh-btn-outline gh-btn-icon gh-btn-subscription-action only-has-icon" @title="Actions">
+                                        <span>
+                                            {{svg-jar "dotdotdot"}}
+                                            <span class="hidden">Subscription menu</span>
+                                        </span>
+                                    </GhDropdownButton>
+                                    <GhDropdown @name="subscription-menu-{{sub.id}}" @tagName="ul" @classNames="product-actions-menu dropdown-menu dropdown-align-right">
+                                        <li>
+                                            <a href="https://dashboard.stripe.com/customers/{{sub.customer.id}}" target="_blank" rel="noopener">
+                                                View Stripe customer
+                                            </a>
+                                        </li>
+                                        <li class="divider"></li>
+                                        <li>
+                                            <a href="https://dashboard.stripe.com/subscriptions/{{sub.id}}" target="_blank" rel="noopener">
+                                                View Stripe subscription
+                                            </a>
+                                        </li>
+                                        <li>
+                                        {{#if sub.cancel_at_period_end}}
+                                            <button {{action "continueSubscription" sub.id}}>
+                                                <span>Continue subscription</span>
+                                            </button>
+                                        {{else}}
+                                            <button {{action "cancelSubscription" sub.id}}>
+                                                <span class="red">Cancel subscription</span>
+                                            </button>
+                                        {{/if}}
+                                        </li>
+                                    </GhDropdown>
+                                </span>
+                            </div>
                         </div>
                         {{/each}}
+
+                        {{#if (and (feature "multipleProducts") (eq product.subscriptions.length 0))}}
+                        <div class="gh-memberproduct-subscription">
+                            <div>
+                                <div>
+                                    <span class="gh-cp-memberproduct-pricelabel">Complimentary</span>
+                                    <span class="gh-badge active">Active</span>
+                                </div>
+                                <div class="gh-memberproduct-created">Created on</div>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="gh-product-card-price">
+                                    <div class="flex items-start">
+                                        <span class="currency-symbol">$</span>
+                                        <span class="amount">0</span>
+                                    </div>
+                                    <div class="period">yearly</div>
+                                </div>
+                                <span class="action-menu">
+                                    <GhDropdownButton @dropdownName="subscription-menu-complimentary" @classNames="gh-btn gh-btn-outline gh-btn-icon gh-btn-subscription-action only-has-icon" @title="Actions">
+                                        <span>
+                                            {{svg-jar "dotdotdot"}}
+                                            <span class="hidden">Subscription menu</span>
+                                        </span>
+                                    </GhDropdownButton>
+                                    <GhDropdown @name="subscription-menu-complimentary" @tagName="ul" @classNames="product-actions-menu dropdown-menu dropdown-align-right">
+                                        <li>
+                                            <button>
+                                                <span class="red">Remove complimentary subscription</span>
+                                            </button>
+                                        </li>
+                                    </GhDropdown>
+                                </span>
+                            </div>
+                        </div>
+                        {{/if}}
+
                         {{#if (not (feature "multipleProducts"))}}
                             {{#if this.isAddComplimentaryAllowed}}
-                                <div class="gh-memberproduct-list-footer {{if this.isCreatingComplimentary "min-height" ""}}">
+                                <div class="gh-memberproduct-list-footer bt b--whitegrey pt2 {{if this.isCreatingComplimentary "min-height" ""}}">
                                     {{#if this.isCreatingComplimentary}}
                                         <GhLoadingSpinner />
                                     {{else}}
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index 4bee0b64ad..f262dedced 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -1634,12 +1634,19 @@ p.gh-members-import-errordetail:first-of-type {
 }
 
 /* Member's product list */
+.gh-member-product-container {
+    border: 1px solid var(--whitegrey);
+    border-radius: 3px;
+    margin-bottom: 20px;
+    padding: 24px;
+}
+
 .gh-memberproduct-name {
     display: flex;
     justify-content: space-between;
     font-size: 1.65rem !important;
     font-weight: 600;
-    margin-bottom: 4px !important;
+    margin-bottom: 2px !important;
 }
 
 .gh-cp-memberproduct.multiple-subs .gh-memberproduct-name {
@@ -1673,7 +1680,6 @@ p.gh-members-import-errordetail:first-of-type {
 }
 
 .gh-memberproduct-created {
-    margin-top: 1px;
     color: var(--midgrey);
 }
 
@@ -1685,8 +1691,6 @@ p.gh-members-import-errordetail:first-of-type {
     position:relative;
     margin-top: 12px;
     margin-bottom: -8px;
-    padding-top: 12px;
-    border-top: 1px solid var(--whitegrey);
 }
 
 .gh-memberproduct-list-footer.min-height {
@@ -1755,25 +1759,46 @@ p.gh-members-import-errordetail:first-of-type {
 
 .gh-memberproduct-subscription {
     position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
-.gh-memberproduct-subscription .action-menu {
-    position: absolute;
-    top: -4px;
-    right: 0;
+.gh-cp-memberproduct .gh-product-card-price {
+    padding: 10px 18px;
 }
 
-.gh-memberproduct-subscription .action-menu .gh-btn-subscription-action {
-    opacity: 0;
+.gh-cp-memberproduct:not(.multiple-subs) .gh-product-card-price {
+    margin-top: -19px;
+    padding: 15px 18px;
+}
+
+.product-actions-menu {
+    top: calc(100% - 16px);
+    right: 0px;
+    left: auto;
+}
+
+.gh-cp-memberproduct.multiple-subs .product-actions-menu {
+    top: calc(100% + 6px);
+}
+
+.gh-cp-memberproduct .gh-memberproduct-subscription .action-menu {
+    margin-left: 3vw;
+}
+
+.gh-cp-memberproduct:not(.multiple-subs) .gh-memberproduct-subscription .action-menu {
+    margin-top: -28px;
+}
+
+.gh-memberproduct-subscription .action-menu .gh-btn-subscription-action:not(:hover) {
+    border-color: var(--main-bg-color);
+    box-shadow: none;
 }
 
-.gh-memberproduct-subscription:hover .action-menu .gh-btn-subscription-action,
 .gh-memberproduct-subscription .action-menu .gh-btn-subscription-action.open {
-    opacity: 1;
-}
-
-.gh-cp-memberproduct.multiple-subs .gh-memberproduct-subscription .action-menu {
-    top: 20px;
+    border: 1px solid var(--lightgrey-l1);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 .gh-memberproduct-subscription .action-menu > .gh-btn span {
diff --git a/ghost/admin/app/styles/layouts/products.css b/ghost/admin/app/styles/layouts/products.css
index bf56d8fcff..880d26c4e3 100644
--- a/ghost/admin/app/styles/layouts/products.css
+++ b/ghost/admin/app/styles/layouts/products.css
@@ -115,12 +115,17 @@
     min-width: 90px;
 }
 
+.gh-product-card-price .currency-symbol,
 .gh-product-card-price .amount,
 .gh-product-card-price .currency {
     font-weight: 600;
     color: var(--darkgrey);
 }
 
+.gh-product-card-price .currency-symbol {
+    margin-top: -3px;
+}
+
 .gh-product-card-price .amount {
     font-size: 2.1rem;
     letter-spacing: -0.2px;
@@ -346,12 +351,6 @@
     color: var(--midgrey);
 }
 
-.product-actions-menu {
-    top: calc(100% + 6px);
-    right: 10px;
-    left: auto;
-}
-
 .gh-btn-archive-toggle {
     width: 80px;
 }
diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css
index d58725b75d..86688049b2 100644
--- a/ghost/admin/app/styles/patterns/forms.css
+++ b/ghost/admin/app/styles/patterns/forms.css
@@ -792,10 +792,8 @@ textarea {
 }
 
 .form-rich-radio .gh-radio-label {
-    padding: 12px 12px 12px 14px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+    position: relative;
+    padding: 12px 40px 12px 14px;
 }
 
 .form-rich-radio .gh-radio-label .description h4 {
@@ -815,6 +813,9 @@ textarea {
 }
 
 .form-rich-radio .check {
+    position: absolute;
+    top: calc(50% - 7px);
+    right: 12px;
     color: var(--darkgrey);
     width: 14px;
     height: 14px;
diff --git a/ghost/admin/public/assets/icons/dotdotdot.svg b/ghost/admin/public/assets/icons/dotdotdot.svg
index 714b035960..3266507c18 100644
--- a/ghost/admin/public/assets/icons/dotdotdot.svg
+++ b/ghost/admin/public/assets/icons/dotdotdot.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>circle{fill:currentColor;}</style></defs><title>navigation-menu-horizontal</title><circle cx="3.25" cy="12" r="3.25"/><circle cx="12" cy="12" r="3.25"/><circle cx="20.75" cy="12" r="3.25"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>circle{fill:currentColor;}</style></defs><title>navigation-menu-horizontal</title><circle cx="3.25" cy="12" r="2.6"/><circle cx="12" cy="12" r="2.6"/><circle cx="20.75" cy="12" r="2.6"/></svg>
\ No newline at end of file