diff --git a/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_left_panel.tsx b/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_left_panel.tsx
index 0d4a422a27..aea8e93cb5 100644
--- a/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_left_panel.tsx
+++ b/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_left_panel.tsx
@@ -23,6 +23,8 @@ import useOpenPricingModal from 'components/common/hooks/useOpenPricingModal';
 import useCanSelfHostedExpand from 'components/common/hooks/useCanSelfHostedExpand';
 import {getExpandSeatsLink} from 'selectors/cloud';
 import useControlSelfHostedExpansionModal from 'components/common/hooks/useControlSelfHostedExpansionModal';
+import {useQuery} from 'utils/http_utils';
+import {STORAGE_KEY_EXPANSION_IN_PROGRESS} from 'components/self_hosted_purchases/constants';
 
 const DAYS_UNTIL_EXPIRY_WARNING_DISPLAY_THRESHOLD = 30;
 const DAYS_UNTIL_EXPIRY_DANGER_DISPLAY_THRESHOLD = 5;
@@ -58,6 +60,19 @@ const EnterpriseEditionLeftPanel = ({
     const canExpand = useCanSelfHostedExpand();
     const selfHostedExpansionModal = useControlSelfHostedExpansionModal({trackingLocation: 'license_settings_add_seats'});
     const expandableLink = useSelector(getExpandSeatsLink);
+    const isSelfHostedExpansionEnabled = useSelector(getConfig)?.ServiceSettings?.SelfHostedExpansion;
+
+    const query = useQuery();
+    const actionQueryParam = query.get('action');
+
+    useEffect(() => {
+        console.log(actionQueryParam);
+        if (actionQueryParam === 'show_expansion_modal' && canExpand && isSelfHostedExpansionEnabled) {
+            console.log("Open modal!");
+            selfHostedExpansionModal.open();
+            query.set('action', '');
+        }
+    }, [])
 
     useEffect(() => {
         async function fetchUnSanitizedLicense() {
@@ -73,7 +88,6 @@ const EnterpriseEditionLeftPanel = ({
 
     const skuName = getSkuDisplayName(unsanitizedLicense.SkuShortName, unsanitizedLicense.IsGovSku === 'true');
     const expirationDays = getRemainingDaysFromFutureTimestamp(parseInt(unsanitizedLicense.ExpiresAt, 10));
-    const isSelfHostedExpansionEnabled = useSelector(getConfig)?.ServiceSettings?.SelfHostedExpansion;
 
     const viewPlansButton = (
         <button
diff --git a/webapp/channels/src/components/announcement_bar/overage_users_banner/index.tsx b/webapp/channels/src/components/announcement_bar/overage_users_banner/index.tsx
index d22fe6389f..ab53ac8be9 100644
--- a/webapp/channels/src/components/announcement_bar/overage_users_banner/index.tsx
+++ b/webapp/channels/src/components/announcement_bar/overage_users_banner/index.tsx
@@ -4,6 +4,7 @@
 import React, {useMemo} from 'react';
 import {FormattedMessage} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
+import {useHistory} from 'react-router-dom';
 
 import {getCurrentUser, isCurrentUserSystemAdmin} from 'mattermost-redux/selectors/entities/users';
 import {GlobalState} from 'types/store';
@@ -16,9 +17,10 @@ import {makeGetCategory} from 'mattermost-redux/selectors/entities/preferences';
 import {PreferenceType} from '@mattermost/types/preferences';
 import {useExpandOverageUsersCheck} from 'components/common/hooks/useExpandOverageUsersCheck';
 import useOpenSalesLink from 'components/common/hooks/useOpenSalesLink';
-import {StatTypes, Preferences, AnnouncementBarTypes} from 'utils/constants';
+import {StatTypes, Preferences, AnnouncementBarTypes, ConsolePages} from 'utils/constants';
 
 import './overage_users_banner.scss';
+import useCWSAvailabilityCheck from 'components/common/hooks/useCWSAvailabilityCheck';
 
 type AdminHasDismissedItArgs = {
     preferenceName: string;
@@ -56,6 +58,8 @@ const OverageUsersBanner = () => {
     const prefixPreferences = isOver10PercerntPurchasedSeats ? 'error' : 'warn';
     const prefixLicenseId = (license.Id || '').substring(0, 8);
     const preferenceName = `${prefixPreferences}_overage_seats_${prefixLicenseId}`;
+    const history = useHistory();
+    const isAirGapped = !useCWSAvailabilityCheck();
 
     const overageByUsers = activeUsers - seatsPurchased;
 
@@ -86,7 +90,14 @@ const OverageUsersBanner = () => {
     const handleUpdateSeatsSelfServeClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
         e.preventDefault();
         trackEventFn('Self Serve');
-        window.open(expandableLink(license.Id), '_blank');
+
+        if (isAirGapped) {
+            window.open(expandableLink(license.Id), '_blank');
+        }
+
+        if (isExpandable) {
+            history.push(`${ConsolePages.LICENSE}?action=show_expansion_modal`);
+        }
     };
 
     const handleContactSalesClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
diff --git a/webapp/channels/src/components/common/hooks/useControlSelfHostedExpansionModal.ts b/webapp/channels/src/components/common/hooks/useControlSelfHostedExpansionModal.ts
index db44768fd0..dd581f23d5 100644
--- a/webapp/channels/src/components/common/hooks/useControlSelfHostedExpansionModal.ts
+++ b/webapp/channels/src/components/common/hooks/useControlSelfHostedExpansionModal.ts
@@ -12,8 +12,8 @@ import {Client4} from 'mattermost-redux/client';
 import {getCurrentUser} from 'mattermost-redux/selectors/entities/common';
 import {HostedCustomerTypes} from 'mattermost-redux/action_types';
 
-import {STORAGE_KEY_EXPANSION_IN_PROGRESS} from 'components/self_hosted_expansion_modal/constants';
-import SelfHostedExpansionModal from 'components/self_hosted_expansion_modal';
+import {STORAGE_KEY_EXPANSION_IN_PROGRESS} from 'components/self_hosted_purchases/constants';
+import SelfHostedExpansionModal from 'components/self_hosted_purchases/self_hosted_expansion_modal';
 
 import {useControlModal, ControlModal} from './useControlModal';
 import useCanSelfHostedExpand from './useCanSelfHostedExpand';
diff --git a/webapp/channels/src/components/common/hooks/useControlSelfHostedPurchaseModal.ts b/webapp/channels/src/components/common/hooks/useControlSelfHostedPurchaseModal.ts
index 1cbd91372b..8de1c55a9d 100644
--- a/webapp/channels/src/components/common/hooks/useControlSelfHostedPurchaseModal.ts
+++ b/webapp/channels/src/components/common/hooks/useControlSelfHostedPurchaseModal.ts
@@ -7,8 +7,8 @@ import {useDispatch, useSelector} from 'react-redux';
 import {trackEvent} from 'actions/telemetry_actions';
 import {closeModal, openModal} from 'actions/views/modals';
 import {ModalIdentifiers, TELEMETRY_CATEGORIES} from 'utils/constants';
-import SelfHostedPurchaseModal from 'components/self_hosted_purchase_modal';
-import {STORAGE_KEY_PURCHASE_IN_PROGRESS} from 'components/self_hosted_purchase_modal/constants';
+import SelfHostedPurchaseModal from 'components/self_hosted_purchases/self_hosted_purchase_modal';
+import {STORAGE_KEY_PURCHASE_IN_PROGRESS} from 'components/self_hosted_purchases/constants';
 import PurchaseInProgressModal from 'components/purchase_in_progress_modal';
 import {Client4} from 'mattermost-redux/client';
 import {getCurrentUser} from 'mattermost-redux/selectors/entities/common';
diff --git a/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/index.tsx b/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/index.tsx
index ce1cd6a1c3..d76f81c4ec 100644
--- a/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/index.tsx
+++ b/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/index.tsx
@@ -16,10 +16,13 @@ import {savePreferences} from 'mattermost-redux/actions/preferences';
 import {makeGetCategory} from 'mattermost-redux/selectors/entities/preferences';
 import {PreferenceType} from '@mattermost/types/preferences';
 import {useExpandOverageUsersCheck} from 'components/common/hooks/useExpandOverageUsersCheck';
-import {LicenseLinks, StatTypes, Preferences} from 'utils/constants';
+import {LicenseLinks, StatTypes, Preferences, ConsolePages} from 'utils/constants';
 
 import './overage_users_banner_notice.scss';
 import ExternalLink from 'components/external_link';
+import useControlSelfHostedExpansionModal from 'components/common/hooks/useControlSelfHostedExpansionModal';
+import {NavLink} from 'react-router-dom';
+import useCWSAvailabilityCheck from 'components/common/hooks/useCWSAvailabilityCheck';
 
 type AdminHasDismissedArgs = {
     preferenceName: string;
@@ -53,15 +56,16 @@ const OverageUsersBannerNotice = () => {
     const prefixLicenseId = (license.Id || '').substring(0, 8);
     const preferenceName = `${prefixPreferences}_overage_seats_${prefixLicenseId}`;
 
+    const isAirGapped = !useCWSAvailabilityCheck();
     const overageByUsers = activeUsers - seatsPurchased;
     const isOverageState = isBetween5PercerntAnd10PercentPurchasedSeats || isOver10PercerntPurchasedSeats;
     const hasPermission = isAdmin && isOverageState && !isCloud;
     const {
         cta,
-        expandableLink,
         trackEventFn,
         getRequestState,
         isExpandable,
+        expandableLink,
     } = useExpandOverageUsersCheck({
         shouldRequest: hasPermission && !adminHasDismissed({overagePreferences, preferenceName}),
         licenseId: license.Id,
@@ -69,6 +73,8 @@ const OverageUsersBannerNotice = () => {
         banner: 'invite modal',
     });
 
+    const selfHostedExpansionModal = useControlSelfHostedExpansionModal({trackingLocation: 'overage_user_banner_notice'});
+
     if (!hasPermission || adminHasDismissed({overagePreferences, preferenceName})) {
         return null;
     }
@@ -96,12 +102,31 @@ const OverageUsersBannerNotice = () => {
 
                         const handleClick = () => {
                             trackEventFn(isExpandable ? 'Self Serve' : 'Contact Sales');
+                            if (isExpandable) {
+                                selfHostedExpansionModal.open()
+                            }
                         };
 
+                        if (isAirGapped) {
+                            window.open(expandableLink(license.Id), '_blank');
+                        }
+
+                        if (isExpandable) {
+                            return (
+                                <NavLink
+                                    to={`${ConsolePages.LICENSE}?action=show_expansion_modal`}
+                                    target='_blank'
+                                    rel='noreferrer'
+                                >
+                                    {cta}
+                                </NavLink>
+                            )
+                        }
+
                         return (
                             <ExternalLink
                                 className='overage_users_banner__button'
-                                href={isExpandable ? expandableLink(license.Id) : LicenseLinks.CONTACT_SALES}
+                                href={LicenseLinks.CONTACT_SALES}
                                 onClick={handleClick}
                             >
                                 {cta}
diff --git a/webapp/channels/src/components/purchase_in_progress_modal/index.test.tsx b/webapp/channels/src/components/purchase_in_progress_modal/index.test.tsx
index fc1b87159e..8b950d0d79 100644
--- a/webapp/channels/src/components/purchase_in_progress_modal/index.test.tsx
+++ b/webapp/channels/src/components/purchase_in_progress_modal/index.test.tsx
@@ -11,7 +11,7 @@ import {GlobalState} from 'types/store';
 import {TestHelper as TH} from 'utils/test_helper';
 import {Client4} from 'mattermost-redux/client';
 
-import {STORAGE_KEY_PURCHASE_IN_PROGRESS} from 'components/self_hosted_purchase_modal/constants';
+import {STORAGE_KEY_PURCHASE_IN_PROGRESS} from 'components/self_hosted_purchases/constants';
 
 import PurchaseInProgressModal from './';
 
diff --git a/webapp/channels/src/components/self_hosted_expansion_modal/constants.tsx b/webapp/channels/src/components/self_hosted_expansion_modal/constants.tsx
deleted file mode 100644
index 83c13f3567..0000000000
--- a/webapp/channels/src/components/self_hosted_expansion_modal/constants.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-export const STORAGE_KEY_EXPANSION_IN_PROGRESS = 'EXPANSION_IN_PROGRESS';
diff --git a/webapp/channels/src/components/self_hosted_purchase_modal/address.tsx b/webapp/channels/src/components/self_hosted_purchases/address.tsx
similarity index 100%
rename from webapp/channels/src/components/self_hosted_purchase_modal/address.tsx
rename to webapp/channels/src/components/self_hosted_purchases/address.tsx
diff --git a/webapp/channels/src/components/self_hosted_purchase_modal/constants.ts b/webapp/channels/src/components/self_hosted_purchases/constants.ts
similarity index 71%
rename from webapp/channels/src/components/self_hosted_purchase_modal/constants.ts
rename to webapp/channels/src/components/self_hosted_purchases/constants.ts
index 3415fbf14f..58ddf362f8 100644
--- a/webapp/channels/src/components/self_hosted_purchase_modal/constants.ts
+++ b/webapp/channels/src/components/self_hosted_purchases/constants.ts
@@ -2,3 +2,4 @@
 // See LICENSE.txt for license information.
 
 export const STORAGE_KEY_PURCHASE_IN_PROGRESS = 'PURCHASE_IN_PROGRESS';
+export const STORAGE_KEY_EXPANSION_IN_PROGRESS = 'EXPANSION_IN_PROGRESS';
\ No newline at end of file
diff --git a/webapp/channels/src/components/self_hosted_purchase_modal/contact_sales_link.tsx b/webapp/channels/src/components/self_hosted_purchases/contact_sales_link.tsx
similarity index 100%
rename from webapp/channels/src/components/self_hosted_purchase_modal/contact_sales_link.tsx
rename to webapp/channels/src/components/self_hosted_purchases/contact_sales_link.tsx
diff --git a/webapp/channels/src/components/self_hosted_expansion_modal/error_page.scss b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/error_page.scss
similarity index 100%
rename from webapp/channels/src/components/self_hosted_expansion_modal/error_page.scss
rename to webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/error_page.scss
diff --git a/webapp/channels/src/components/self_hosted_expansion_modal/error_page.tsx b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/error_page.tsx
similarity index 95%
rename from webapp/channels/src/components/self_hosted_expansion_modal/error_page.tsx
rename to webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/error_page.tsx
index dc68cb4137..2b1d0e93d9 100644
--- a/webapp/channels/src/components/self_hosted_expansion_modal/error_page.tsx
+++ b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/error_page.tsx
@@ -13,6 +13,7 @@ import './error_page.scss';
 
 interface Props {
     canRetry: boolean;
+    tryAgain: () => void;
 }
 
 export default function SelfHostedExpansionErrorPage(props: Props) {
@@ -70,9 +71,7 @@ export default function SelfHostedExpansionErrorPage(props: Props) {
                 icon={icon}
                 error={true}
                 formattedButtonText={formattedButtonText}
-                buttonHandler={() => {
-                    //TODO: Open self hosted expansion modal
-                }}
+                buttonHandler={props.tryAgain}
                 formattedTertiaryButonText={tertiaryButtonText}
                 tertiaryButtonHandler={() => window.open(contactSupportLink, '_blank', 'noreferrer')}
             />
diff --git a/webapp/channels/src/components/self_hosted_expansion_modal/expansion_card.scss b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/expansion_card.scss
similarity index 100%
rename from webapp/channels/src/components/self_hosted_expansion_modal/expansion_card.scss
rename to webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/expansion_card.scss
diff --git a/webapp/channels/src/components/self_hosted_expansion_modal/expansion_card.tsx b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/expansion_card.tsx
similarity index 100%
rename from webapp/channels/src/components/self_hosted_expansion_modal/expansion_card.tsx
rename to webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/expansion_card.tsx
diff --git a/webapp/channels/src/components/self_hosted_expansion_modal/index.test.tsx b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/index.test.tsx
similarity index 100%
rename from webapp/channels/src/components/self_hosted_expansion_modal/index.test.tsx
rename to webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/index.test.tsx
diff --git a/webapp/channels/src/components/self_hosted_expansion_modal/index.tsx b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/index.tsx
similarity index 94%
rename from webapp/channels/src/components/self_hosted_expansion_modal/index.tsx
rename to webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/index.tsx
index 4bb217bc32..7801ef7d6a 100644
--- a/webapp/channels/src/components/self_hosted_expansion_modal/index.tsx
+++ b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/index.tsx
@@ -11,10 +11,10 @@ import {StripeCardElementChangeEvent} from '@stripe/stripe-js';
 
 import UpgradeSvg from 'components/common/svg_images_components/upgrade_svg';
 import RootPortal from 'components/root_portal';
-import ContactSalesLink from 'components/self_hosted_purchase_modal/contact_sales_link';
-import ErrorPage from 'components/self_hosted_expansion_modal/error_page';
-import SuccessPage from 'components/self_hosted_expansion_modal/success_page';
-import Submitting from 'components/self_hosted_purchase_modal/submitting';
+import ContactSalesLink from 'components/self_hosted_purchases/contact_sales_link';
+import ErrorPage from 'components/self_hosted_purchases/self_hosted_expansion_modal/error_page';
+import SuccessPage from 'components/self_hosted_purchases/self_hosted_expansion_modal/success_page';
+import Submitting from './submitting';
 
 import useLoadStripe from 'components/common/hooks/useLoadStripe';
 import CardInput, {CardInputType} from 'components/payment_form/card_input';
@@ -23,7 +23,7 @@ import Input from 'components/widgets/inputs/input/input';
 
 import BackgroundSvg from 'components/common/svg_images_components/background_svg';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
-import StripeProvider from '../self_hosted_purchase_modal/stripe_provider';
+import StripeProvider from '../stripe_provider';
 
 import {closeModal} from 'actions/views/modals';
 import {ModalIdentifiers, TELEMETRY_CATEGORIES} from 'utils/constants';
@@ -46,11 +46,12 @@ import SelfHostedExpansionCard from './expansion_card';
 
 import './self_hosted_expansion_modal.scss';
 
-import {STORAGE_KEY_EXPANSION_IN_PROGRESS} from './constants';
-import Address from 'components/self_hosted_purchase_modal/address';
+import {STORAGE_KEY_EXPANSION_IN_PROGRESS} from '../constants';
+import Address from 'components/self_hosted_purchases/address';
 import ChooseDifferentShipping from 'components/choose_different_shipping';
-import Terms from 'components/self_hosted_purchase_modal/terms';
+import Terms from 'components/self_hosted_purchases/self_hosted_purchase_modal/terms';
 import useControlSelfHostedExpansionModal from 'components/common/hooks/useControlSelfHostedExpansionModal';
+import classNames from 'classnames';
 
 export interface FormState {
     cardName: string;
@@ -189,6 +190,7 @@ export default function SelfHostedExpansionModal() {
     const [formState, setFormState] = useState<FormState>(initialState);
     const [show] = useState(true);
     const canRetry = formState.error !== '422';
+    const showForm = progress !== SelfHostedSignupProgress.PAID && progress !== SelfHostedSignupProgress.CREATED_LICENSE && !formState.submitting && !formState.error && !formState.succeeded;
 
     const title = intl.formatMessage({
         id: 'self_hosted_expansion.expansion_modal.title',
@@ -200,6 +202,7 @@ export default function SelfHostedExpansionModal() {
     const submit = async () => {
         let submitProgress = progress;
         let signupCustomerResult: SelfHostedSignupCustomerResponse | null = null;
+        setFormState({...formState, submitting: true});
         try {
             const [firstName, lastName] = inferNames(user, formState.cardName);
 
@@ -344,8 +347,7 @@ export default function SelfHostedExpansionModal() {
                     }}
                 >
                     <div className='SelfHostedExpansionModal'>
-                        <div className='form-view'>
-                            <div className='lhs'>
+                        {<div className={classNames('form-view', {'form-view--hide': !showForm})}>                            <div className='lhs'>
                                 <h2 className='title'>{title}</h2>
                                 <UpgradeSvg
                                     width={267}
@@ -503,21 +505,21 @@ export default function SelfHostedExpansionModal() {
                                     initialSeats={additionalSeats}
                                 />
                             </div>
-                        </div>
+                        </div>}
                         {((formState.succeeded || progress === SelfHostedSignupProgress.CREATED_LICENSE)) && !formState.error && !formState.submitting && (
                             <SuccessPage
                                 onClose={selfHostedExpansionModal.close}
                             />
                         )}
-                        {formState.submitting && !formState.error && (
+                        {formState.submitting && (
                             <Submitting
-                                desiredPlanName={currentPlan}
-                                progressBar={formState.progressBar}
+                                currentPlan={currentPlan}
                             />
                         )}
                         {formState.error && (
                             <ErrorPage
                                 canRetry={canRetry}
+                                tryAgain={() => {setFormState({...formState, submitting: false, error: ''})}}
                             />
                         )}
                         <div className='background-svg'>
diff --git a/webapp/channels/src/components/self_hosted_expansion_modal/self_hosted_expansion_modal.scss b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/self_hosted_expansion_modal.scss
similarity index 98%
rename from webapp/channels/src/components/self_hosted_expansion_modal/self_hosted_expansion_modal.scss
rename to webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/self_hosted_expansion_modal.scss
index 7166c369e7..e0c4ccd007 100644
--- a/webapp/channels/src/components/self_hosted_expansion_modal/self_hosted_expansion_modal.scss
+++ b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/self_hosted_expansion_modal.scss
@@ -83,6 +83,10 @@
             }
         }
 
+        &--hide {
+            display: none;
+        }
+
         >.lhs {
             width: 25%;
         }
diff --git a/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/submitting.tsx b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/submitting.tsx
new file mode 100644
index 0000000000..72cd5b6810
--- /dev/null
+++ b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/submitting.tsx
@@ -0,0 +1,122 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useEffect, useState} from 'react';
+
+import {FormattedMessage, useIntl} from 'react-intl';
+
+import {useSelector} from 'react-redux';
+
+import {getSelfHostedSignupProgress} from 'mattermost-redux/selectors/entities/hosted_customer';
+import {SelfHostedSignupProgress} from '@mattermost/types/hosted_customer';
+import {ValueOf} from '@mattermost/types/utilities';
+
+import CreditCardSvg from 'components/common/svg_images_components/credit_card_svg';
+import IconMessage from 'components/purchase_modal/icon_message';
+
+function useConvertProgressToWaitingExplanation(progress: ValueOf<typeof SelfHostedSignupProgress>, planName: string): React.ReactNode {
+    const intl = useIntl();
+    switch (progress) {
+    case SelfHostedSignupProgress.START:
+    case SelfHostedSignupProgress.CREATED_CUSTOMER:
+    case SelfHostedSignupProgress.CREATED_INTENT:
+        return intl.formatMessage({
+            id: 'self_hosted_signup.progress_step.submitting_payment',
+            defaultMessage: 'Submitting payment information',
+        });
+    case SelfHostedSignupProgress.CONFIRMED_INTENT:
+    case SelfHostedSignupProgress.CREATED_SUBSCRIPTION:
+        return intl.formatMessage({
+            id: 'self_hosted_signup.progress_step.verifying_payment',
+            defaultMessage: 'Verifying payment details',
+        });
+    case SelfHostedSignupProgress.PAID:
+    case SelfHostedSignupProgress.CREATED_LICENSE:
+        return intl.formatMessage({
+            id: 'self_hosted_signup.progress_step.applying_license',
+            defaultMessage: 'Applying your {planName} license to your Mattermost instance',
+        }, {planName});
+    default:
+        return intl.formatMessage({
+            id: 'self_hosted_signup.progress_step.submitting_payment',
+            defaultMessage: 'Submitting payment information',
+        });
+    }
+}
+
+export function convertProgressToBar(progress: ValueOf<typeof SelfHostedSignupProgress>): number {
+    switch (progress) {
+    case SelfHostedSignupProgress.START:
+        return 15;
+    case SelfHostedSignupProgress.CREATED_CUSTOMER:
+        return 30;
+    case SelfHostedSignupProgress.CREATED_INTENT:
+        return 45;
+    case SelfHostedSignupProgress.CONFIRMED_INTENT:
+        return 60;
+    case SelfHostedSignupProgress.CREATED_SUBSCRIPTION:
+        return 75;
+    case SelfHostedSignupProgress.PAID:
+        return 85;
+    case SelfHostedSignupProgress.CREATED_LICENSE:
+        return 100;
+    default:
+        return 0;
+    }
+}
+
+interface Props {
+    currentPlan: string;
+}
+
+const maxProgressBar = 100;
+const maxFakeProgressIncrement = 5;
+const fakeProgressInterval = 600;
+
+export default function Submitting(props: Props) {
+    const [barProgress, setBarProgress] = useState(0);
+    const signupProgress = useSelector(getSelfHostedSignupProgress);
+    const waitingExplanation = useConvertProgressToWaitingExplanation(signupProgress, props.currentPlan);
+    const footer = (
+        <div className='ProcessPayment-progress'>
+            <div
+                className='ProcessPayment-progress-fill'
+                style={{width: `${barProgress}%`}}
+            />
+        </div>
+    );
+
+    useEffect(() => {
+        const maxProgressForCurrentSignupProgress = convertProgressToBar(signupProgress);
+        const interval = setInterval(() => {
+            if (barProgress < maxProgressBar) {
+                setBarProgress(Math.min(maxProgressForCurrentSignupProgress, barProgress + maxFakeProgressIncrement));
+            }
+        }, fakeProgressInterval);
+    
+        return () => clearInterval(interval);
+    }, [barProgress]);
+
+    return (
+
+        <div className='submitting'>
+            <IconMessage
+                formattedTitle={(
+                    <FormattedMessage
+                        id='admin.billing.subscription.verifyPaymentInformation'
+                        defaultMessage='Verifying your payment information'
+                    />
+                )}
+                formattedSubtitle={waitingExplanation}
+                icon={
+                    <CreditCardSvg
+                        width={444}
+                        height={313}
+                    />
+                }
+                footer={footer}
+                className={'processing'}
+            />
+        </div>
+    );
+}
diff --git a/webapp/channels/src/components/self_hosted_expansion_modal/success_page.scss b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/success_page.scss
similarity index 100%
rename from webapp/channels/src/components/self_hosted_expansion_modal/success_page.scss
rename to webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/success_page.scss
diff --git a/webapp/channels/src/components/self_hosted_expansion_modal/success_page.tsx b/webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/success_page.tsx
similarity index 100%
rename from webapp/channels/src/components/self_hosted_expansion_modal/success_page.tsx
rename to webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/success_page.tsx
diff --git a/webapp/channels/src/components/self_hosted_purchase_modal/error.tsx b/webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/error.tsx
similarity index 100%
rename from webapp/channels/src/components/self_hosted_purchase_modal/error.tsx
rename to webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/error.tsx
diff --git a/webapp/channels/src/components/self_hosted_purchase_modal/index.test.tsx b/webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/index.test.tsx
similarity index 99%
rename from webapp/channels/src/components/self_hosted_purchase_modal/index.test.tsx
rename to webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/index.test.tsx
index 3ccbb74ce2..cb2dcd5b2b 100644
--- a/webapp/channels/src/components/self_hosted_purchase_modal/index.test.tsx
+++ b/webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/index.test.tsx
@@ -15,7 +15,7 @@ import {SelfHostedProducts, ModalIdentifiers} from 'utils/constants';
 
 import {DeepPartial} from '@mattermost/types/utilities';
 
-import SelfHostedPurchaseModal, {makeInitialState, canSubmit, State} from './';
+import SelfHostedPurchaseModal, {makeInitialState, canSubmit, State} from '.';
 
 interface MockCardInputProps {
     onCardInputChange: (event: {complete: boolean}) => void;
diff --git a/webapp/channels/src/components/self_hosted_purchase_modal/index.tsx b/webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/index.tsx
similarity index 99%
rename from webapp/channels/src/components/self_hosted_purchase_modal/index.tsx
rename to webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/index.tsx
index d4b55b80a4..b2f9326cca 100644
--- a/webapp/channels/src/components/self_hosted_purchase_modal/index.tsx
+++ b/webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/index.tsx
@@ -53,23 +53,23 @@ import {
     SelfHostedSignupCustomerResponse,
 } from '@mattermost/types/hosted_customer';
 
-import {Seats, errorInvalidNumber} from '../seats_calculator';
+import {Seats, errorInvalidNumber} from '../../seats_calculator';
 
-import ContactSalesLink from './contact_sales_link';
+import ContactSalesLink from '../contact_sales_link';
 import Submitting, {convertProgressToBar} from './submitting';
 import ErrorPage from './error';
 import SuccessPage from './success_page';
 import SelfHostedCard from './self_hosted_card';
-import StripeProvider from './stripe_provider';
+import StripeProvider from '../stripe_provider';
 import Terms from './terms';
-import Address from './address';
+import Address from '../address';
 import useNoEscape from './useNoEscape';
 
 import {SetPrefix, UnionSetActions} from './types';
 
 import './self_hosted_purchase_modal.scss';
 
-import {STORAGE_KEY_PURCHASE_IN_PROGRESS} from './constants';
+import {STORAGE_KEY_PURCHASE_IN_PROGRESS} from '../constants';
 
 export interface State {
 
diff --git a/webapp/channels/src/components/self_hosted_purchase_modal/self_hosted_card.tsx b/webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/self_hosted_card.tsx
similarity index 97%
rename from webapp/channels/src/components/self_hosted_purchase_modal/self_hosted_card.tsx
rename to webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/self_hosted_card.tsx
index 59b9d4af0f..c8101a94d9 100644
--- a/webapp/channels/src/components/self_hosted_purchase_modal/self_hosted_card.tsx
+++ b/webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/self_hosted_card.tsx
@@ -17,8 +17,8 @@ import {
     SelfHostedProducts,
 } from 'utils/constants';
 
-import Consequences from '../seats_calculator/consequences';
-import SeatsCalculator, {Seats} from '../seats_calculator';
+import Consequences from '../../seats_calculator/consequences';
+import SeatsCalculator, {Seats} from '../../seats_calculator';
 
 // Card has a bunch of props needed for monthly/yearly payments that
 // do not apply to self-hosted.
diff --git a/webapp/channels/src/components/self_hosted_purchase_modal/self_hosted_purchase_modal.scss b/webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/self_hosted_purchase_modal.scss
similarity index 100%
rename from webapp/channels/src/components/self_hosted_purchase_modal/self_hosted_purchase_modal.scss
rename to webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/self_hosted_purchase_modal.scss
diff --git a/webapp/channels/src/components/self_hosted_purchase_modal/submitting.tsx b/webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/submitting.tsx
similarity index 100%
rename from webapp/channels/src/components/self_hosted_purchase_modal/submitting.tsx
rename to webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/submitting.tsx
diff --git a/webapp/channels/src/components/self_hosted_purchase_modal/success_page.scss b/webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/success_page.scss
similarity index 100%
rename from webapp/channels/src/components/self_hosted_purchase_modal/success_page.scss
rename to webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/success_page.scss
diff --git a/webapp/channels/src/components/self_hosted_purchase_modal/success_page.tsx b/webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/success_page.tsx
similarity index 100%
rename from webapp/channels/src/components/self_hosted_purchase_modal/success_page.tsx
rename to webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/success_page.tsx
diff --git a/webapp/channels/src/components/self_hosted_purchase_modal/terms.tsx b/webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/terms.tsx
similarity index 100%
rename from webapp/channels/src/components/self_hosted_purchase_modal/terms.tsx
rename to webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/terms.tsx
diff --git a/webapp/channels/src/components/self_hosted_purchase_modal/types.ts b/webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/types.ts
similarity index 100%
rename from webapp/channels/src/components/self_hosted_purchase_modal/types.ts
rename to webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/types.ts
diff --git a/webapp/channels/src/components/self_hosted_purchase_modal/useNoEscape.ts b/webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/useNoEscape.ts
similarity index 100%
rename from webapp/channels/src/components/self_hosted_purchase_modal/useNoEscape.ts
rename to webapp/channels/src/components/self_hosted_purchases/self_hosted_purchase_modal/useNoEscape.ts
diff --git a/webapp/channels/src/components/self_hosted_purchase_modal/stripe_provider.tsx b/webapp/channels/src/components/self_hosted_purchases/stripe_provider.tsx
similarity index 100%
rename from webapp/channels/src/components/self_hosted_purchase_modal/stripe_provider.tsx
rename to webapp/channels/src/components/self_hosted_purchases/stripe_provider.tsx