diff --git a/web/modals/threads/create/compose-subchannel-modal.css b/web/modals/threads/create/compose-subchannel-modal.css
--- a/web/modals/threads/create/compose-subchannel-modal.css
+++ b/web/modals/threads/create/compose-subchannel-modal.css
@@ -1,33 +1,22 @@
 div.modalHeader {
   padding: 15px;
   font-weight: var(--semi-bold);
-  color: var(--compose-subchannel-header-fg);
-  background-color: var(--compose-subchannel-header-bg);
+  color: var(--text-background-tertiary-default);
+  background-color: var(--frame-background-tertiary-default);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: 30px;
   column-gap: 10px;
 }
 
 div.modalHeaderParentName {
-  color: var(--compose-subchannel-mark-color);
+  color: var(--link-background-secondary-default);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 div.container {
-  width: 383px;
-  overflow-y: auto;
-}
-
-div.stepContainer {
-  position: relative;
-  height: 100vh;
-  max-height: 533px;
-}
-
-div.stepItem {
-  padding: 20px;
+  height: 60vh;
+  overflow: auto;
 }
diff --git a/web/modals/threads/create/compose-subchannel-modal.react.js b/web/modals/threads/create/compose-subchannel-modal.react.js
--- a/web/modals/threads/create/compose-subchannel-modal.react.js
+++ b/web/modals/threads/create/compose-subchannel-modal.react.js
@@ -18,7 +18,7 @@
 import SubchannelMembers from './steps/subchannel-members.react.js';
 import type { VisibilityType } from './steps/subchannel-settings.react.js';
 import SubchannelSettings from './steps/subchannel-settings.react.js';
-import Stepper from '../../../components/stepper.react.js';
+import Button from '../../../components/button.react.js';
 import { updateNavInfoActionType } from '../../../redux/action-types.js';
 import { useSelector } from '../../../redux/redux-utils.js';
 import { nonThreadCalendarQuery } from '../../../selectors/nav-selectors.js';
@@ -183,40 +183,6 @@
     ],
   );
 
-  const stepperButtons = React.useMemo(
-    () => ({
-      settings: {
-        nextProps: {
-          content: 'Next',
-          disabled: !channelName.trim(),
-          onClick: () => {
-            setErrorMessage('');
-            setChannelName(channelName.trim());
-            setActiveStep('members');
-          },
-        },
-      },
-      members: {
-        prevProps: {
-          content: 'Back',
-          onClick: () => setActiveStep('settings'),
-        },
-        nextProps: {
-          content: 'Create',
-          loading: loadingState === 'loading',
-          disabled: pendingUsersToAdd.size === 0,
-          onClick: dispatchCreateSubchannel,
-        },
-      },
-    }),
-    [
-      channelName,
-      dispatchCreateSubchannel,
-      loadingState,
-      pendingUsersToAdd.size,
-    ],
-  );
-
   const subchannelMembers = React.useMemo(
     () => <SubchannelMembers parentThreadInfo={parentThreadInfo} />,
     [parentThreadInfo],
@@ -227,29 +193,81 @@
       ? `Create channel - ${trimText(channelName, 11)}`
       : 'Create channel';
 
+  const subheader = React.useMemo(
+    () => <ComposeSubchannelHeader parentThreadName={parentThreadName} />,
+    [parentThreadName],
+  );
+
+  const modalContent = React.useMemo(() => {
+    if (activeStep === 'settings') {
+      return subchannelSettings;
+    }
+    return subchannelMembers;
+  }, [activeStep, subchannelMembers, subchannelSettings]);
+
+  const onClickNext = React.useCallback(() => {
+    setErrorMessage('');
+    setChannelName(channelName.trim());
+    setActiveStep('members');
+  }, [channelName]);
+
+  const primaryButton = React.useMemo(() => {
+    if (activeStep === 'settings') {
+      return (
+        <Button
+          disabled={!channelName.trim()}
+          variant="filled"
+          onClick={onClickNext}
+        >
+          Next
+        </Button>
+      );
+    }
+
+    return (
+      <Button
+        disabled={loadingState === 'loading' || pendingUsersToAdd.size === 0}
+        variant="filled"
+        onClick={dispatchCreateSubchannel}
+      >
+        Create
+      </Button>
+    );
+  }, [
+    activeStep,
+    channelName,
+    dispatchCreateSubchannel,
+    loadingState,
+    onClickNext,
+    pendingUsersToAdd.size,
+  ]);
+
+  const onClickBack = React.useCallback(() => setActiveStep('settings'), []);
+
+  const secondaryButton = React.useMemo(() => {
+    if (activeStep !== 'members') {
+      return null;
+    }
+
+    return (
+      <Button variant="outline" onClick={onClickBack}>
+        Back
+      </Button>
+    );
+  }, [activeStep, onClickBack]);
+
   return (
-    <Modal name={modalName} onClose={onClose} size="fit-content">
+    <Modal
+      name={modalName}
+      onClose={onClose}
+      size="large"
+      subheader={subheader}
+      primaryButton={primaryButton}
+      secondaryButton={secondaryButton}
+    >
       <div className={css.container}>
-        <ComposeSubchannelHeader parentThreadName={parentThreadName} />
-        <div className={css.stepItem}>
-          <Stepper.Container
-            className={css.stepContainer}
-            activeStep={activeStep}
-          >
-            <Stepper.Item
-              content={subchannelSettings}
-              name="settings"
-              nextProps={stepperButtons.settings.nextProps}
-            />
-            <Stepper.Item
-              content={subchannelMembers}
-              name="members"
-              prevProps={stepperButtons.members.prevProps}
-              nextProps={stepperButtons.members.nextProps}
-              errorMessage={errorMessage}
-            />
-          </Stepper.Container>
-        </div>
+        {modalContent}
+        {errorMessage}
       </div>
     </Modal>
   );
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -182,10 +182,6 @@
   --inline-engagement-bg: var(--shades-black-60);
   --inline-engagement-bg-hover: var(--shades-black-75);
   --inline-engagement-color: var(--fg);
-  --compose-subchannel-header-fg: var(--shades-black-50);
-  --compose-subchannel-header-bg: var(--shades-black-75);
-  --compose-subchannel-label-color: var(--shades-black-50);
-  --compose-subchannel-mark-color: var(--violet-light-100);
   --enum-option-icon-color: var(--violet-dark-100);
   --show-password-bg-hover: var(--shades-black-60);
   --typeahead-overlay-light: var(--shades-black-75);