diff --git a/static/js/src/advantage/distributor/components/DistributorShopForm/DistributorShopForm.tsx b/static/js/src/advantage/distributor/components/DistributorShopForm/DistributorShopForm.tsx
index 4e1b526ecab..34ad103648d 100644
--- a/static/js/src/advantage/distributor/components/DistributorShopForm/DistributorShopForm.tsx
+++ b/static/js/src/advantage/distributor/components/DistributorShopForm/DistributorShopForm.tsx
@@ -8,68 +8,86 @@ import AddSubscriptions from "./AddSubscriptions/AddSubscriptions";
 const DistributorShopForm = () => {
   return (
     <form className="distributor-shop-selector">
-      <Strip includeCol={false} className="u-no-padding--top">
+      <ol className="p-stepped-list">
+        <li className="p-stepped-list__item">
+          <Strip includeCol={false} className="u-no-padding--top">
+            <Row>
+              <Col size={6}>
+                <h2 className="p-stepped-list__title">
+                  Verify deal registration information
+                </h2>
+              </Col>
+              <Col size={6}>
+                <DealRegistration />
+              </Col>
+            </Row>
+          </Strip>
+          <Row>
+            <hr className="p-rule is-muted" />
+          </Row>
+        </li>
+        <li className="p-stepped-list__item">
+          <Strip includeCol={false} className="u-no-padding--top">
+            <Row>
+              <Col size={6}>
+                <h2 className="p-stepped-list__title">
+                  Fill in technical user&lsquo;s contact
+                </h2>
+              </Col>
+              <Col size={6}>
+                <TechnicalUserContact />
+              </Col>
+            </Row>
+          </Strip>
+        </li>
         <Row>
-          <Col size={6}>
-            <h2>Verify deal registration information</h2>
-          </Col>
-          <Col size={6}>
-            <DealRegistration />
-          </Col>
+          <hr className="p-rule is-muted" />
         </Row>
-      </Strip>
-      <Row>
-        <hr className="p-rule is-muted" />
-      </Row>
-      <Strip includeCol={false} className="u-no-padding--top">
+        <li className="p-stepped-list__item">
+          <Strip includeCol={false} className="u-no-padding--top">
+            <Row>
+              <Col size={6}>
+                <h2 className="p-stepped-list__title">Select your currency</h2>
+              </Col>
+              <Col size={6}>
+                <Currency />
+              </Col>
+            </Row>
+          </Strip>
+        </li>
         <Row>
-          <Col size={6}>
-            <h2>Fill in technical user&lsquo;s contact</h2>
-          </Col>
-          <Col size={6}>
-            <TechnicalUserContact />
-          </Col>
+          <hr className="p-rule is-muted" />
         </Row>
-      </Strip>
-      <Row>
-        <hr className="p-rule is-muted" />
-      </Row>
-      <Strip includeCol={false} className="u-no-padding--top">
+        <li className="p-stepped-list__item">
+          <Strip includeCol={false} className="u-no-padding--top">
+            <Row>
+              <Col size={6}>
+                <h2 className="p-stepped-list__title">Add subscriptions</h2>
+              </Col>
+              <Col size={6}>
+                <AddSubscriptions />
+              </Col>
+            </Row>
+          </Strip>
+        </li>
         <Row>
-          <Col size={6}>
-            <h2>Select your currency</h2>
-          </Col>
-          <Col size={6}>
-            <Currency />
-          </Col>
+          <hr className="p-rule is-muted" />
         </Row>
-      </Strip>
-      <Row>
-        <hr className="p-rule is-muted" />
-      </Row>
-      <Strip includeCol={false} className="u-no-padding--top">
-        <Row>
-          <Col size={6}>
-            <h2>Add subscriptions</h2>
-          </Col>
-          <Col size={6}>
-            <AddSubscriptions />
-          </Col>
-        </Row>
-      </Strip>
-      <Row>
-        <hr className="p-rule is-muted" />
-      </Row>
-      <Strip includeCol={false} className="u-no-padding--top">
-        <Row>
-          <Col size={6}>
-            <h2>Select the subscription duration</h2>
-          </Col>
-          <Col size={6}>
-            <Duration />
-          </Col>
-        </Row>
-      </Strip>
+        <li className="p-stepped-list__item">
+          <Strip includeCol={false} className="u-no-padding--top">
+            <Row>
+              <Col size={6}>
+                <h2 className="p-stepped-list__title">
+                  Select the subscription duration
+                </h2>
+              </Col>
+              <Col size={6}>
+                <Duration />
+              </Col>
+            </Row>
+          </Strip>
+        </li>
+      </ol>
     </form>
   );
 };
diff --git a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx
index e861c852c50..0821b5b1805 100644
--- a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx
+++ b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx
@@ -22,7 +22,9 @@ const Feature = () => {
     <>
       <Row>
         <Col size={6}>
-          <h2>What security coverage do you need?</h2>
+          <h2 className="p-stepped-list__title">
+            What security coverage do you need?
+          </h2>
         </Col>
         <Col size={6}>
           <div
diff --git a/static/js/src/advantage/subscribe/react/components/Form/Form.tsx b/static/js/src/advantage/subscribe/react/components/Form/Form.tsx
index 84d07f98807..b346952e73b 100644
--- a/static/js/src/advantage/subscribe/react/components/Form/Form.tsx
+++ b/static/js/src/advantage/subscribe/react/components/Form/Form.tsx
@@ -18,81 +18,104 @@ const Form = () => {
 
   return (
     <form className="product-selector">
-      <Strip includeCol={false}>
-        <Col size={6}>
-          <h2>Who will be using this subscription?</h2>
-        </Col>
-        <Col size={6}>
-          <ProductUser />
-        </Col>
-      </Strip>
-      {productUser !== ProductUsers.myself ? (
-        <>
-          <Row>
-            <hr />
-          </Row>
+      <ol className="p-stepped-list">
+        <li className="p-stepped-list__item">
           <Strip includeCol={false}>
             <Col size={6}>
-              <h2>What are you setting up?</h2>
+              <h2 className="p-stepped-list__title">
+                Who will be using this subscription?
+              </h2>
             </Col>
             <Col size={6}>
-              <ProductType />
+              <ProductUser />
             </Col>
           </Strip>
-          {!disabled && (
-            <>
-              <Row>
-                <hr />
-              </Row>
+        </li>
+        {productUser !== ProductUsers.myself ? (
+          <>
+            <Row>
+              <hr />
+            </Row>
+            <li className="p-stepped-list__item">
               <Strip includeCol={false}>
                 <Col size={6}>
-                  <h2>For how many machines?</h2>
+                  <h2 className="p-stepped-list__title">
+                    What are you setting up?
+                  </h2>
                 </Col>
                 <Col size={6}>
-                  <Quantity />
+                  <ProductType />
                 </Col>
               </Strip>
-              <Row>
-                <hr />
-              </Row>
-
-              <Strip includeCol={false}>
-                <Col size={6}>
-                  <h2>What Ubuntu LTS version are you running?</h2>
-                  <p style={{ marginLeft: "3.6rem" }}>
-                    {" "}
-                    Ubuntu Pro is available for Ubuntu 16.04 LTS and higher.
-                    <br />{" "}
-                    <a href="/contact-us/form?product=pro">
-                      Are you using an older version?
-                    </a>
-                  </p>
-                </Col>
-                <Col size={6}>
-                  <Version />
-                </Col>
-              </Strip>
-              <Row>
-                <hr />
-              </Row>
-              <Strip includeCol={false}>
-                <Feature />
-              </Strip>
-              <Row>
-                <hr />
-              </Row>
-              <Strip includeCol={false}>
-                <Col size={12}>
-                  <h2>Do you also need phone and ticket support?</h2>
-                </Col>
-                <Col size={12}>
-                  <Support />
-                </Col>
-              </Strip>
-            </>
-          )}
-        </>
-      ) : null}
+            </li>
+            {!disabled && (
+              <>
+                <Row>
+                  <hr />
+                </Row>
+                <li className="p-stepped-list__item">
+                  <Strip includeCol={false}>
+                    <Col size={6}>
+                      <h2 className="p-stepped-list__title">
+                        For how many machines?
+                      </h2>
+                    </Col>
+                    <Col size={6}>
+                      <Quantity />
+                    </Col>
+                  </Strip>
+                </li>
+                <Row>
+                  <hr />
+                </Row>
+                <li className="p-stepped-list__item">
+                  <Strip includeCol={false}>
+                    <Col size={6}>
+                      <h2 className="p-stepped-list__title">
+                        What Ubuntu LTS version are you running?
+                      </h2>
+                      <p style={{ marginLeft: "3.6rem" }}>
+                        {" "}
+                        Ubuntu Pro is available for Ubuntu 16.04 LTS and higher.
+                        <br />{" "}
+                        <a href="/contact-us/form?product=pro">
+                          Are you using an older version?
+                        </a>
+                      </p>
+                    </Col>
+                    <Col size={6}>
+                      <Version />
+                    </Col>
+                  </Strip>
+                </li>
+                <Row>
+                  <hr />
+                </Row>
+                <li className="p-stepped-list__item">
+                  <Strip includeCol={false}>
+                    <Feature />
+                  </Strip>
+                </li>
+                <Row>
+                  <hr />
+                </Row>
+                <li className="p-stepped-list__item">
+                  <Strip includeCol={false}>
+                    <Col size={12}>
+                      <h2 className="p-stepped-list__title">
+                        Do you also need phone and ticket support?
+                      </h2>
+                    </Col>
+                    <Col size={12}>
+                      <Support />
+                    </Col>
+                  </Strip>
+                </li>
+              </>
+            )}
+          </>
+        ) : null}
+      </ol>
     </form>
   );
 };
diff --git a/static/sass/_pattern_distributor.scss b/static/sass/_pattern_distributor.scss
index b70070cddb3..aa4381ab212 100644
--- a/static/sass/_pattern_distributor.scss
+++ b/static/sass/_pattern_distributor.scss
@@ -1,54 +1,51 @@
 @mixin ubuntu-p-distributor {
   .distributor-shop-selector {
     counter-reset: headings;
+    .p-stepped-list__title {
+      margin-bottom: 2rem;
+
+      &::before {
+        align-items: center;
+        border: 1px solid #000;
+        border-radius: 50%;
+        content: counter(p-stepped-list-counter);
+        text-align: center;
+        font-size: 1rem;
+      }
+    }
   }
 
   @media screen and (min-width: $breakpoint-large) {
     .distributor-shop-selector {
       padding-top: 2rem;
-
-      h2 {
+      .p-stepped-list__title {
+        padding-left: 3.7rem;
         width: $breakpoint-x-small + 100px;
+
+        &::before {
+          font-size: 1.5rem;
+          height: 2.5rem;
+          line-height: 2.5rem;
+          width: 2.5rem;
+        }
       }
-      > .p-strip {
-        padding-bottom: 3rem;
-        padding-top: 3rem;
 
-        > .row {
-          > .col-6:nth-child(2) {
-            padding-top: 1rem;
+      .p-stepped-list > .p-stepped-list__item {
+        padding-bottom: 0;
+        > .p-strip {
+          padding-bottom: 3rem;
+          padding-top: 3rem;
+
+          > .row {
+            > .col-6:nth-child(2) {
+              padding-top: 1rem;
+            }
           }
         }
       }
     }
   }
 
-  .distributor-shop-selector h2 {
-    counter-increment: headings;
-    display: flex;
-    flex-direction: row;
-    gap: 1.2rem;
-    margin-bottom: 2rem;
-
-    &::before {
-      @extend .p-heading--2;
-
-      align-items: center;
-      border: 1px solid #000;
-      border-radius: 50%;
-      content: counter(headings);
-      display: inline-flex;
-      flex-shrink: 0;
-      font-size: 1.5rem;
-      height: 2.5rem;
-      justify-content: center;
-      margin-top: 2px;
-      padding-top: 0;
-      text-align: center;
-      width: 2.5rem;
-    }
-  }
-
   .distributor-shop-selector.p-card--radio--column.is-selected {
     box-shadow:
       0 4px 4px rgb(0 0 0 / 5%),
diff --git a/static/sass/_pattern_subscribe.scss b/static/sass/_pattern_subscribe.scss
index 808ac9ddbbf..04916cabf68 100644
--- a/static/sass/_pattern_subscribe.scss
+++ b/static/sass/_pattern_subscribe.scss
@@ -1,46 +1,40 @@
 @mixin ubuntu-p-ua-subscribe {
   .product-selector {
     counter-reset: headings;
+    .p-stepped-list__title {
+      margin-bottom: 2rem;
+
+      &::before {
+        content: counter(p-stepped-list-counter);
+        width: 2rem;
+      }
+    }
   }
 
   @media screen and (min-width: $breakpoint-large) {
     .product-selector {
       padding-top: 6rem;
 
-      > .p-strip {
-        padding-top: 0.5rem;
+      .p-stepped-list__title {
+        padding-left: 3.7rem;
+      }
+
+      > .p-stepped-list > .p-stepped-list__item {
+        padding-bottom: 0;
 
-        > .row {
-          > .col-6:nth-child(2) {
-            padding-top: 1rem;
+        > .p-strip {
+          padding-top: 0.5rem;
+
+          > .row {
+            > .col-6:nth-child(2) {
+              padding-top: 1rem;
+            }
           }
         }
       }
     }
   }
 
-  .product-selector h2 {
-    counter-increment: headings;
-    display: flex;
-    flex-direction: row;
-    gap: 1.2rem;
-    margin-bottom: 2rem;
-
-    &::before {
-      @extend .p-heading--2;
-
-      align-items: center;
-      content: counter(headings);
-      display: inline-flex;
-      flex-shrink: 0;
-      height: 2.5rem;
-      justify-content: center;
-      margin-top: 4px;
-      padding-top: 0;
-      width: 2.5rem;
-    }
-  }
-
   .product-selector .p-card--radio--column.is-selected {
     box-shadow:
       0 4px 4px rgb(0 0 0 / 5%),