diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_Default.png
index ab754e1c22..07da0cf6c2 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_Default.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_With_Description.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_With_Description.png
index e60041ecc8..1060c679c5 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_With_Description.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_With_Description.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_With_Description_Only.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_With_Description_Only.png
index cfbe0c1442..06bc7e894d 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_With_Description_Only.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_With_Description_Only.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Playground_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Playground_Default.png
index c940a2c669..b15f99f015 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Playground_Default.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Playground_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_Default.png
index 48cc875b2a..f2b586fa11 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_Default.png and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_With_Description.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_With_Description.png
index e4efbf4fc1..31142025c5 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_With_Description.png and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_With_Description.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_With_Description_Only.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_With_Description_Only.png
index e1182909f3..bde9be8a95 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_With_Description_Only.png and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_With_Description_Only.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Playground_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Playground_Default.png
index fcd75a6633..d8e198f143 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Playground_Default.png and b/packages/fuselage/.loki/reference/chrome_laptop_Playground_Default.png differ
diff --git a/packages/fuselage/src/components/Callout/index.d.ts b/packages/fuselage/src/components/Callout/index.d.ts
index cf84056b00..2a5f859927 100644
--- a/packages/fuselage/src/components/Callout/index.d.ts
+++ b/packages/fuselage/src/components/Callout/index.d.ts
@@ -2,5 +2,7 @@ import { ComponentProps, ForwardRefExoticComponent } from 'react';
 
 import { Box } from '../Box';
 
-type CalloutProps = ComponentProps<typeof Box>;
+type CalloutProps = Omit<ComponentProps<typeof Box>, 'type'> & {
+  type?: 'info' | 'success' | 'warning' | 'danger';
+};
 export const Callout: ForwardRefExoticComponent<CalloutProps>;
diff --git a/packages/fuselage/src/components/Callout/styles.scss b/packages/fuselage/src/components/Callout/styles.scss
index b7e7af56fc..0d6eb63f44 100644
--- a/packages/fuselage/src/components/Callout/styles.scss
+++ b/packages/fuselage/src/components/Callout/styles.scss
@@ -9,6 +9,8 @@
   padding-inline-start: lengths.padding(16);
   padding-inline-end: lengths.padding(32);
 
+  color: colors.foreground(default);
+
   border-radius: lengths.border-radius(2);
 
   &--type-info {
@@ -37,8 +39,6 @@
 
   margin-inline-start: lengths.margin(8);
 
-  color: colors.foreground(default);
-
   @include typography.use-font-scale(c1);
 }
 
diff --git a/packages/onboarding-ui/.loki/reference/desktop_forms_AdminInfoForm_AdminInfoForm.png b/packages/onboarding-ui/.loki/reference/desktop_forms_AdminInfoForm_AdminInfoForm.png
index b2b13e049c..bcbb4b7dee 100644
Binary files a/packages/onboarding-ui/.loki/reference/desktop_forms_AdminInfoForm_AdminInfoForm.png and b/packages/onboarding-ui/.loki/reference/desktop_forms_AdminInfoForm_AdminInfoForm.png differ
diff --git a/packages/onboarding-ui/.loki/reference/desktop_forms_OrganizationInfoForm_OrganizationInfoForm.png b/packages/onboarding-ui/.loki/reference/desktop_forms_OrganizationInfoForm_OrganizationInfoForm.png
index ea85f275bc..3f4175c8fe 100644
Binary files a/packages/onboarding-ui/.loki/reference/desktop_forms_OrganizationInfoForm_OrganizationInfoForm.png and b/packages/onboarding-ui/.loki/reference/desktop_forms_OrganizationInfoForm_OrganizationInfoForm.png differ
diff --git a/packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_OptionCard_OptionCard.png b/packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_OptionCard_OptionCard.png
deleted file mode 100644
index 45dc0cfc48..0000000000
Binary files a/packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_OptionCard_OptionCard.png and /dev/null differ
diff --git a/packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_OptionCard_OptionCard_Selected.png b/packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_OptionCard_OptionCard_Selected.png
deleted file mode 100644
index 67453d0726..0000000000
Binary files a/packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_OptionCard_OptionCard_Selected.png and /dev/null differ
diff --git a/packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_RegisterServerForm.png b/packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_RegisterServerForm.png
index 0dd83351f4..8ed16a6440 100644
Binary files a/packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_RegisterServerForm.png and b/packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_RegisterServerForm.png differ
diff --git a/packages/onboarding-ui/.loki/reference/desktop_pages_AdminInfoPage_AdminInfoPage.png b/packages/onboarding-ui/.loki/reference/desktop_pages_AdminInfoPage_AdminInfoPage.png
index 026a50620d..464986d40b 100644
Binary files a/packages/onboarding-ui/.loki/reference/desktop_pages_AdminInfoPage_AdminInfoPage.png and b/packages/onboarding-ui/.loki/reference/desktop_pages_AdminInfoPage_AdminInfoPage.png differ
diff --git a/packages/onboarding-ui/.loki/reference/desktop_pages_CloudAccountEmailPage_CloudAccountEmailPage.png b/packages/onboarding-ui/.loki/reference/desktop_pages_CloudAccountEmailPage_CloudAccountEmailPage.png
index 68ec2c22ef..2367cdb5fd 100644
Binary files a/packages/onboarding-ui/.loki/reference/desktop_pages_CloudAccountEmailPage_CloudAccountEmailPage.png and b/packages/onboarding-ui/.loki/reference/desktop_pages_CloudAccountEmailPage_CloudAccountEmailPage.png differ
diff --git a/packages/onboarding-ui/.loki/reference/desktop_pages_OrganizationInfoPage_OrganizationInfoPage.png b/packages/onboarding-ui/.loki/reference/desktop_pages_OrganizationInfoPage_OrganizationInfoPage.png
index 6200584cd0..f0c1d2c3f0 100644
Binary files a/packages/onboarding-ui/.loki/reference/desktop_pages_OrganizationInfoPage_OrganizationInfoPage.png and b/packages/onboarding-ui/.loki/reference/desktop_pages_OrganizationInfoPage_OrganizationInfoPage.png differ
diff --git a/packages/onboarding-ui/.loki/reference/desktop_pages_RegisterServerPage_RegisterServerPage.png b/packages/onboarding-ui/.loki/reference/desktop_pages_RegisterServerPage_RegisterServerPage.png
index 72242d9314..7a5e262493 100644
Binary files a/packages/onboarding-ui/.loki/reference/desktop_pages_RegisterServerPage_RegisterServerPage.png and b/packages/onboarding-ui/.loki/reference/desktop_pages_RegisterServerPage_RegisterServerPage.png differ
diff --git a/packages/onboarding-ui/.loki/reference/mobile_forms_AdminInfoForm_AdminInfoForm.png b/packages/onboarding-ui/.loki/reference/mobile_forms_AdminInfoForm_AdminInfoForm.png
index 1f5096d736..d24e662bf1 100644
Binary files a/packages/onboarding-ui/.loki/reference/mobile_forms_AdminInfoForm_AdminInfoForm.png and b/packages/onboarding-ui/.loki/reference/mobile_forms_AdminInfoForm_AdminInfoForm.png differ
diff --git a/packages/onboarding-ui/.loki/reference/mobile_forms_OrganizationInfoForm_OrganizationInfoForm.png b/packages/onboarding-ui/.loki/reference/mobile_forms_OrganizationInfoForm_OrganizationInfoForm.png
index 513dd6ae06..8ad6ae1772 100644
Binary files a/packages/onboarding-ui/.loki/reference/mobile_forms_OrganizationInfoForm_OrganizationInfoForm.png and b/packages/onboarding-ui/.loki/reference/mobile_forms_OrganizationInfoForm_OrganizationInfoForm.png differ
diff --git a/packages/onboarding-ui/.loki/reference/mobile_forms_RegisterServerForm_OptionCard_OptionCard.png b/packages/onboarding-ui/.loki/reference/mobile_forms_RegisterServerForm_OptionCard_OptionCard.png
deleted file mode 100644
index 87d015e464..0000000000
Binary files a/packages/onboarding-ui/.loki/reference/mobile_forms_RegisterServerForm_OptionCard_OptionCard.png and /dev/null differ
diff --git a/packages/onboarding-ui/.loki/reference/mobile_forms_RegisterServerForm_OptionCard_OptionCard_Selected.png b/packages/onboarding-ui/.loki/reference/mobile_forms_RegisterServerForm_OptionCard_OptionCard_Selected.png
deleted file mode 100644
index 7c0abec735..0000000000
Binary files a/packages/onboarding-ui/.loki/reference/mobile_forms_RegisterServerForm_OptionCard_OptionCard_Selected.png and /dev/null differ
diff --git a/packages/onboarding-ui/.loki/reference/mobile_forms_RegisterServerForm_RegisterServerForm.png b/packages/onboarding-ui/.loki/reference/mobile_forms_RegisterServerForm_RegisterServerForm.png
index 59ae4defc2..92de471b06 100644
Binary files a/packages/onboarding-ui/.loki/reference/mobile_forms_RegisterServerForm_RegisterServerForm.png and b/packages/onboarding-ui/.loki/reference/mobile_forms_RegisterServerForm_RegisterServerForm.png differ
diff --git a/packages/onboarding-ui/.loki/reference/mobile_pages_AdminInfoPage_AdminInfoPage.png b/packages/onboarding-ui/.loki/reference/mobile_pages_AdminInfoPage_AdminInfoPage.png
index 20ab013cc4..f61f9198eb 100644
Binary files a/packages/onboarding-ui/.loki/reference/mobile_pages_AdminInfoPage_AdminInfoPage.png and b/packages/onboarding-ui/.loki/reference/mobile_pages_AdminInfoPage_AdminInfoPage.png differ
diff --git a/packages/onboarding-ui/.loki/reference/mobile_pages_CloudAccountEmailPage_CloudAccountEmailPage.png b/packages/onboarding-ui/.loki/reference/mobile_pages_CloudAccountEmailPage_CloudAccountEmailPage.png
index 51bc87579c..48644a70ee 100644
Binary files a/packages/onboarding-ui/.loki/reference/mobile_pages_CloudAccountEmailPage_CloudAccountEmailPage.png and b/packages/onboarding-ui/.loki/reference/mobile_pages_CloudAccountEmailPage_CloudAccountEmailPage.png differ
diff --git a/packages/onboarding-ui/.loki/reference/mobile_pages_OrganizationInfoPage_OrganizationInfoPage.png b/packages/onboarding-ui/.loki/reference/mobile_pages_OrganizationInfoPage_OrganizationInfoPage.png
index 2629d96b8a..96264669a2 100644
Binary files a/packages/onboarding-ui/.loki/reference/mobile_pages_OrganizationInfoPage_OrganizationInfoPage.png and b/packages/onboarding-ui/.loki/reference/mobile_pages_OrganizationInfoPage_OrganizationInfoPage.png differ
diff --git a/packages/onboarding-ui/.loki/reference/mobile_pages_RegisterServerPage_RegisterServerPage.png b/packages/onboarding-ui/.loki/reference/mobile_pages_RegisterServerPage_RegisterServerPage.png
index 4cbbaf655c..72e0562fe0 100644
Binary files a/packages/onboarding-ui/.loki/reference/mobile_pages_RegisterServerPage_RegisterServerPage.png and b/packages/onboarding-ui/.loki/reference/mobile_pages_RegisterServerPage_RegisterServerPage.png differ
diff --git a/packages/onboarding-ui/.loki/reference/tablet_forms_AdminInfoForm_AdminInfoForm.png b/packages/onboarding-ui/.loki/reference/tablet_forms_AdminInfoForm_AdminInfoForm.png
index b2b13e049c..bcbb4b7dee 100644
Binary files a/packages/onboarding-ui/.loki/reference/tablet_forms_AdminInfoForm_AdminInfoForm.png and b/packages/onboarding-ui/.loki/reference/tablet_forms_AdminInfoForm_AdminInfoForm.png differ
diff --git a/packages/onboarding-ui/.loki/reference/tablet_forms_OrganizationInfoForm_OrganizationInfoForm.png b/packages/onboarding-ui/.loki/reference/tablet_forms_OrganizationInfoForm_OrganizationInfoForm.png
index ea85f275bc..3f4175c8fe 100644
Binary files a/packages/onboarding-ui/.loki/reference/tablet_forms_OrganizationInfoForm_OrganizationInfoForm.png and b/packages/onboarding-ui/.loki/reference/tablet_forms_OrganizationInfoForm_OrganizationInfoForm.png differ
diff --git a/packages/onboarding-ui/.loki/reference/tablet_forms_RegisterServerForm_OptionCard_OptionCard.png b/packages/onboarding-ui/.loki/reference/tablet_forms_RegisterServerForm_OptionCard_OptionCard.png
deleted file mode 100644
index 55f1169e6e..0000000000
Binary files a/packages/onboarding-ui/.loki/reference/tablet_forms_RegisterServerForm_OptionCard_OptionCard.png and /dev/null differ
diff --git a/packages/onboarding-ui/.loki/reference/tablet_forms_RegisterServerForm_OptionCard_OptionCard_Selected.png b/packages/onboarding-ui/.loki/reference/tablet_forms_RegisterServerForm_OptionCard_OptionCard_Selected.png
deleted file mode 100644
index 464a54a44a..0000000000
Binary files a/packages/onboarding-ui/.loki/reference/tablet_forms_RegisterServerForm_OptionCard_OptionCard_Selected.png and /dev/null differ
diff --git a/packages/onboarding-ui/.loki/reference/tablet_forms_RegisterServerForm_RegisterServerForm.png b/packages/onboarding-ui/.loki/reference/tablet_forms_RegisterServerForm_RegisterServerForm.png
index 34c76dd3a7..85334f9709 100644
Binary files a/packages/onboarding-ui/.loki/reference/tablet_forms_RegisterServerForm_RegisterServerForm.png and b/packages/onboarding-ui/.loki/reference/tablet_forms_RegisterServerForm_RegisterServerForm.png differ
diff --git a/packages/onboarding-ui/.loki/reference/tablet_pages_AdminInfoPage_AdminInfoPage.png b/packages/onboarding-ui/.loki/reference/tablet_pages_AdminInfoPage_AdminInfoPage.png
index 56e069f3c3..8f4d76f352 100644
Binary files a/packages/onboarding-ui/.loki/reference/tablet_pages_AdminInfoPage_AdminInfoPage.png and b/packages/onboarding-ui/.loki/reference/tablet_pages_AdminInfoPage_AdminInfoPage.png differ
diff --git a/packages/onboarding-ui/.loki/reference/tablet_pages_CloudAccountEmailPage_CloudAccountEmailPage.png b/packages/onboarding-ui/.loki/reference/tablet_pages_CloudAccountEmailPage_CloudAccountEmailPage.png
index 41afd69f50..293eb6f583 100644
Binary files a/packages/onboarding-ui/.loki/reference/tablet_pages_CloudAccountEmailPage_CloudAccountEmailPage.png and b/packages/onboarding-ui/.loki/reference/tablet_pages_CloudAccountEmailPage_CloudAccountEmailPage.png differ
diff --git a/packages/onboarding-ui/.loki/reference/tablet_pages_OrganizationInfoPage_OrganizationInfoPage.png b/packages/onboarding-ui/.loki/reference/tablet_pages_OrganizationInfoPage_OrganizationInfoPage.png
index f172391f73..138869c396 100644
Binary files a/packages/onboarding-ui/.loki/reference/tablet_pages_OrganizationInfoPage_OrganizationInfoPage.png and b/packages/onboarding-ui/.loki/reference/tablet_pages_OrganizationInfoPage_OrganizationInfoPage.png differ
diff --git a/packages/onboarding-ui/.loki/reference/tablet_pages_RegisterServerPage_RegisterServerPage.png b/packages/onboarding-ui/.loki/reference/tablet_pages_RegisterServerPage_RegisterServerPage.png
index 06c58ee881..12e8cf4de6 100644
Binary files a/packages/onboarding-ui/.loki/reference/tablet_pages_RegisterServerPage_RegisterServerPage.png and b/packages/onboarding-ui/.loki/reference/tablet_pages_RegisterServerPage_RegisterServerPage.png differ
diff --git a/packages/onboarding-ui/.storybook/main.ts b/packages/onboarding-ui/.storybook/main.ts
index 9c7cce1c74..28e2f062c5 100644
--- a/packages/onboarding-ui/.storybook/main.ts
+++ b/packages/onboarding-ui/.storybook/main.ts
@@ -1,6 +1,6 @@
 module.exports = {
   addons: ['@storybook/addon-essentials'],
-  stories: ['../src/**/*.stories.tsx'],
+  stories: ['../src/**/*.stories.tsx', '../src/**/stories.tsx'],
   features: {
     postcss: false,
   },
diff --git a/packages/onboarding-ui/src/common/Form/Form.tsx b/packages/onboarding-ui/src/common/Form/Form.tsx
index 930107cf4c..2546465327 100644
--- a/packages/onboarding-ui/src/common/Form/Form.tsx
+++ b/packages/onboarding-ui/src/common/Form/Form.tsx
@@ -13,6 +13,7 @@ const Form: FC<{ onSubmit: () => void }> = ({
     padding={40}
     width='full'
     maxWidth={576}
+    borderRadius={4}
     onSubmit={onSubmit}
   >
     {children}
diff --git a/packages/onboarding-ui/src/flows/SelfHostedRegistration/mocks.ts b/packages/onboarding-ui/src/flows/SelfHostedRegistration/mocks.ts
new file mode 100644
index 0000000000..e2c2e4e20a
--- /dev/null
+++ b/packages/onboarding-ui/src/flows/SelfHostedRegistration/mocks.ts
@@ -0,0 +1,104 @@
+import { action } from '@storybook/addon-actions';
+import { countries } from 'countries-list';
+import type { Validate } from 'react-hook-form';
+
+export const logSubmit =
+  <T extends (...args: any[]) => any>(onSubmit: T) =>
+  (...args: Parameters<T>): ReturnType<T> => {
+    action('submit')(...args);
+    return onSubmit(...args);
+  };
+
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const simulateNetworkDelay = () => delay(3000 * Math.random());
+
+const fetchMock =
+  <T extends (...args: any[]) => any>(endpoint: string, handler: T) =>
+  async (...args: Parameters<T>): Promise<ReturnType<T>> => {
+    action(`fetch(${endpoint})`)(...args);
+    await simulateNetworkDelay();
+    return handler(...args);
+  };
+
+export const validateUsername = fetchMock(
+  '/username/validate',
+  (username: string) => {
+    if (username === 'admin') {
+      return `Username "${username}" is not available`;
+    }
+
+    return true;
+  }
+);
+
+export const validateEmail = fetchMock('/email/validate', (email: string) => {
+  if (email === 'admin@rocket.chat') {
+    return `Email "${email}" is already in use`;
+  }
+
+  return true;
+});
+
+export const validatePassword: Validate<string> = (password: string) => {
+  if (password.length < 6) {
+    return `Password is too short`;
+  }
+
+  return true;
+};
+
+export const organizationTypes: [string, string][] = [
+  ['community', 'Community'],
+  ['enterprise', 'Enterprise'],
+  ['government', 'Government'],
+  ['nonprofit', 'Nonprofit'],
+];
+
+export const organizationIndustryOptions: [string, string][] = [
+  ['aerospaceDefense', 'Aerospace and Defense'],
+  ['blockchain', 'Blockchain'],
+  ['consulting', 'Consulting'],
+  ['consumerGoods', 'Consumer Packaged Goods'],
+  ['contactCenter', 'Contact Center'],
+  ['education', 'Education'],
+  ['entertainment', 'Entertainment'],
+  ['financialServices', 'Financial Services'],
+  ['gaming', 'Gaming'],
+  ['healthcare', 'Healthcare'],
+  ['hospitalityBusinness', 'Hospitality Businness'],
+  ['insurance', 'Insurance'],
+  ['itSecurity', 'IT Security'],
+  ['logistics', 'Logistics'],
+  ['manufacturing', 'Manufacturing'],
+  ['media', 'Media'],
+  ['pharmaceutical', 'Pharmaceutical'],
+  ['realEstate', 'Real Estate'],
+  ['religious', 'Religious'],
+  ['retail', 'Retail'],
+  ['socialNetwork', 'Social Network'],
+  ['technologyProvider', 'Technology Provider'],
+  ['technologyServices', 'Technology Services'],
+  ['telecom', 'Telecom'],
+  ['utilities', 'Utilities'],
+  ['other', 'Other'],
+];
+
+export const organizationSizeOptions: [string, string][] = [
+  ['0', '1-10 people'],
+  ['1', '11-50 people'],
+  ['2', '51-100 people'],
+  ['3', '101-250 people'],
+  ['4', '251-500 people'],
+  ['5', '501-1000 people'],
+  ['6', '1001-4000 people'],
+  ['7', '4000 or more people'],
+];
+
+export const countryOptions: [string, string][] = [
+  ...Object.entries(countries).map<[string, string]>(([code, { name }]) => [
+    code,
+    name,
+  ]),
+  ['worldwide', 'Worldwide'],
+];
diff --git a/packages/onboarding-ui/src/flows/SelfHostedRegistration/stories.tsx b/packages/onboarding-ui/src/flows/SelfHostedRegistration/stories.tsx
new file mode 100644
index 0000000000..9164744204
--- /dev/null
+++ b/packages/onboarding-ui/src/flows/SelfHostedRegistration/stories.tsx
@@ -0,0 +1,219 @@
+import { Box, Callout } from '@rocket.chat/fuselage';
+import type { Meta, Story } from '@storybook/react';
+import { useState } from 'react';
+
+import type { AdminInfoPayload } from '../../forms/AdminInfoForm/AdminInfoForm';
+import type { CloudAccountEmailPayload } from '../../forms/CloudAccountEmailForm/CloudAccountEmailForm';
+import type { OrganizationInfoPayload } from '../../forms/OrganizationInfoForm/OrganizationInfoForm';
+import type { RegisterServerPayload } from '../../forms/RegisterServerForm/RegisterServerForm';
+import AdminInfoPage from '../../pages/AdminInfoPage';
+import AwaitingConfirmationPage from '../../pages/AwaitingConfirmationPage';
+import CloudAccountEmailPage from '../../pages/CloudAccountEmailPage';
+import ConfirmationProcessPage from '../../pages/ConfirmationProcessPage';
+import EmailConfirmedPage from '../../pages/EmailConfirmedPage';
+import OrganizationInfoPage from '../../pages/OrganizationInfoPage';
+import RegisterServerPage from '../../pages/RegisterServerPage';
+import {
+  countryOptions,
+  logSubmit,
+  organizationIndustryOptions,
+  organizationSizeOptions,
+  organizationTypes,
+  validateEmail,
+  validatePassword,
+  validateUsername,
+} from './mocks';
+
+export default {
+  title: 'flows/Self-Hosted Registration',
+  parameters: {
+    layout: 'fullscreen',
+    actions: { argTypesRegex: '^on.*' },
+    loki: { skip: true },
+  },
+} as Meta;
+
+export const SelfHostedRegistration: Story = () => {
+  const [path, navigateTo] =
+    useState<`/${
+      | 'admin-info'
+      | 'org-info'
+      | 'register-server'
+      | 'cloud-email'
+      | 'awaiting'
+      | 'home'
+      | 'email'
+      | 'confirmation-progress'
+      | 'email-confirmed'}`>('/admin-info');
+
+  const [adminInfo, setAdminInfo] =
+    useState<Omit<AdminInfoPayload, 'password'>>();
+
+  const [organizationInfo, setOrganizationInfo] =
+    useState<OrganizationInfoPayload>();
+
+  const [serverRegistration, setServerRegistration] = useState<{
+    updates?: boolean;
+    agreement?: boolean;
+    cloudAccountEmail?: string;
+    securityCode?: string;
+  }>();
+
+  const handleAdminInfoSubmit = logSubmit((data: AdminInfoPayload) => {
+    setAdminInfo(data);
+    navigateTo('/org-info');
+  });
+
+  const handleOrganizationInfoSubmit = logSubmit(
+    (data: OrganizationInfoPayload) => {
+      setOrganizationInfo(data);
+      navigateTo('/register-server');
+    }
+  );
+
+  const handleRegisterServerSubmit = logSubmit(
+    (data: RegisterServerPayload) => {
+      switch (data.registerType) {
+        case 'standalone': {
+          navigateTo('/home');
+          break;
+        }
+
+        case 'registered': {
+          setServerRegistration((serverRegistration) => ({
+            ...serverRegistration,
+            updates: data.updates,
+            agreement: data.agreement,
+          }));
+          navigateTo('/cloud-email');
+          break;
+        }
+      }
+    }
+  );
+
+  const handleCloudAccountEmailSubmit = logSubmit(
+    (data: CloudAccountEmailPayload) => {
+      setServerRegistration((serverRegistration) => ({
+        ...serverRegistration,
+        cloudAccountEmail: data.email,
+        securityCode: 'Funny Tortoise In The Hat',
+      }));
+      navigateTo('/awaiting');
+    }
+  );
+
+  if (path === '/admin-info') {
+    return (
+      <AdminInfoPage
+        currentStep={1}
+        stepCount={4}
+        passwordRulesHint=''
+        validateUsername={validateUsername}
+        validateEmail={validateEmail}
+        validatePassword={validatePassword}
+        initialValues={adminInfo}
+        onSubmit={handleAdminInfoSubmit}
+      />
+    );
+  }
+
+  if (path === '/org-info') {
+    return (
+      <OrganizationInfoPage
+        currentStep={2}
+        stepCount={4}
+        organizationTypeOptions={organizationTypes}
+        organizationIndustryOptions={organizationIndustryOptions}
+        organizationSizeOptions={organizationSizeOptions}
+        countryOptions={countryOptions}
+        initialValues={organizationInfo}
+        onBackButtonClick={() => navigateTo('/admin-info')}
+        onSubmit={handleOrganizationInfoSubmit}
+      />
+    );
+  }
+
+  if (path === '/register-server') {
+    return (
+      <RegisterServerPage
+        currentStep={3}
+        stepCount={4}
+        initialValues={{
+          ...(serverRegistration?.updates && {
+            updates: serverRegistration?.updates,
+          }),
+          ...(serverRegistration?.agreement && {
+            agreement: serverRegistration?.agreement,
+          }),
+        }}
+        onBackButtonClick={() => navigateTo('/org-info')}
+        onSubmit={handleRegisterServerSubmit}
+      />
+    );
+  }
+
+  if (path === '/cloud-email') {
+    return (
+      <CloudAccountEmailPage
+        currentStep={4}
+        stepCount={4}
+        initialValues={{}}
+        onBackButtonClick={() => navigateTo('/register-server')}
+        onSubmit={handleCloudAccountEmailSubmit}
+      />
+    );
+  }
+
+  if (path === '/awaiting') {
+    if (!serverRegistration?.cloudAccountEmail) {
+      throw new Error('missing cloud account email');
+    }
+
+    if (!serverRegistration?.securityCode) {
+      throw new Error('missing verification code');
+    }
+
+    setTimeout(() => {
+      navigateTo('/confirmation-progress');
+    }, 5000);
+
+    return (
+      <AwaitingConfirmationPage
+        emailAddress={serverRegistration.cloudAccountEmail}
+        securityCode={serverRegistration.securityCode}
+        onChangeEmailRequest={() => navigateTo('/admin-info')}
+        onResendEmailRequest={() => undefined}
+      />
+    );
+  }
+
+  if (path === '/confirmation-progress') {
+    setTimeout(() => {
+      navigateTo('/email-confirmed');
+    }, 3000);
+
+    return <ConfirmationProcessPage />;
+  }
+
+  if (path === '/email-confirmed') {
+    return <EmailConfirmedPage />;
+  }
+
+  if (path === '/home') {
+    return (
+      <Box
+        width='100vw'
+        height='100vh'
+        display='flex'
+        justifyContent='center'
+        alignItems='center'
+      >
+        <Callout type='success'>This is the home of the workspace.</Callout>
+      </Box>
+    );
+  }
+
+  throw new Error('invalid path');
+};
+SelfHostedRegistration.storyName = 'Self-Hosted Registration';
diff --git a/packages/onboarding-ui/src/forms/AdminInfoForm/AdminInfoForm.tsx b/packages/onboarding-ui/src/forms/AdminInfoForm/AdminInfoForm.tsx
index cbe4c18464..42f86ec83a 100644
--- a/packages/onboarding-ui/src/forms/AdminInfoForm/AdminInfoForm.tsx
+++ b/packages/onboarding-ui/src/forms/AdminInfoForm/AdminInfoForm.tsx
@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 
 import Form from '../../common/Form';
 
-type AdminInfoFormInputs = {
+export type AdminInfoPayload = {
   fullname: string;
   username: string;
   companyEmail: string;
@@ -23,17 +23,19 @@ type AdminInfoFormInputs = {
 type AdminInfoFormProps = {
   currentStep: number;
   stepCount: number;
+  passwordRulesHint: string;
+  initialValues?: Omit<AdminInfoPayload, 'password'>;
   validateUsername: Validate<string>;
   validateEmail: Validate<string>;
-  passwordRulesHint: string;
   validatePassword: Validate<string>;
-  onSubmit: SubmitHandler<AdminInfoFormInputs>;
+  onSubmit: SubmitHandler<AdminInfoPayload>;
 };
 
 const AdminInfoForm = ({
   currentStep,
   stepCount,
   passwordRulesHint,
+  initialValues,
   validateUsername,
   validateEmail,
   validatePassword,
@@ -44,8 +46,13 @@ const AdminInfoForm = ({
   const {
     register,
     handleSubmit,
-    formState: { isDirty, isValidating, isSubmitting, errors },
-  } = useForm<AdminInfoFormInputs>();
+    formState: { isValidating, isSubmitting, errors },
+  } = useForm<AdminInfoPayload>({
+    defaultValues: {
+      ...initialValues,
+      password: '',
+    },
+  });
 
   return (
     <Form onSubmit={handleSubmit(onSubmit)}>
@@ -60,14 +67,16 @@ const AdminInfoForm = ({
             </Field.Label>
             <Field.Row>
               <TextInput
-                {...register('fullname', { required: true })}
+                {...register('fullname', {
+                  required: String(t('component.form.requiredField')),
+                })}
                 placeholder={t(
                   'form.adminInfoForm.fields.fullName.placeholder'
                 )}
               />
             </Field.Row>
             {errors.fullname && (
-              <Field.Error>{t('component.form.requiredField')}</Field.Error>
+              <Field.Error>{errors.fullname.message}</Field.Error>
             )}
           </Field>
           <Field>
@@ -77,7 +86,7 @@ const AdminInfoForm = ({
             <Field.Row>
               <TextInput
                 {...register('username', {
-                  required: true,
+                  required: String(t('component.form.requiredField')),
                   validate: validateUsername,
                 })}
                 placeholder={t(
@@ -86,7 +95,7 @@ const AdminInfoForm = ({
               />
             </Field.Row>
             {errors.username && (
-              <Field.Error>{t('component.form.requiredField')}</Field.Error>
+              <Field.Error>{errors.username.message}</Field.Error>
             )}
           </Field>
           <Field>
@@ -96,7 +105,7 @@ const AdminInfoForm = ({
             <Field.Row>
               <EmailInput
                 {...register('companyEmail', {
-                  required: true,
+                  required: String(t('component.form.requiredField')),
                   validate: validateEmail,
                 })}
                 placeholder={t(
@@ -105,7 +114,7 @@ const AdminInfoForm = ({
               />
             </Field.Row>
             {errors.companyEmail && (
-              <Field.Error>{t('component.form.requiredField')}</Field.Error>
+              <Field.Error>{errors.companyEmail.message}</Field.Error>
             )}
           </Field>
           <Field>
@@ -115,7 +124,7 @@ const AdminInfoForm = ({
             <Field.Row>
               <PasswordInput
                 {...register('password', {
-                  required: true,
+                  required: String(t('component.form.requiredField')),
                   validate: validatePassword,
                 })}
                 placeholder={t(
@@ -125,18 +134,14 @@ const AdminInfoForm = ({
             </Field.Row>
             <Field.Hint>{passwordRulesHint}</Field.Hint>
             {errors.password && (
-              <Field.Error>{t('component.form.requiredField')}</Field.Error>
+              <Field.Error>{errors.password.message}</Field.Error>
             )}
           </Field>
         </FieldGroup>
       </Form.Container>
       <Form.Footer>
         <ButtonGroup flexGrow={1}>
-          <Button
-            type='submit'
-            primary
-            disabled={!isDirty || isValidating || isSubmitting}
-          >
+          <Button type='submit' primary disabled={isValidating || isSubmitting}>
             {t('component.form.action.next')}
           </Button>
         </ButtonGroup>
diff --git a/packages/onboarding-ui/src/forms/CloudAccountEmailForm/CloudAccountEmailForm.tsx b/packages/onboarding-ui/src/forms/CloudAccountEmailForm/CloudAccountEmailForm.tsx
index 659c479e48..af50f5366a 100644
--- a/packages/onboarding-ui/src/forms/CloudAccountEmailForm/CloudAccountEmailForm.tsx
+++ b/packages/onboarding-ui/src/forms/CloudAccountEmailForm/CloudAccountEmailForm.tsx
@@ -1,30 +1,26 @@
 import { ButtonGroup, Button, TextInput, Field } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
-import { useForm, SubmitHandler, UseFormProps } from 'react-hook-form';
+import { useForm, SubmitHandler } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import Form from '../../common/Form';
 
-type CloudAccountEmailFormInputs = {
+export type CloudAccountEmailPayload = {
   email: string;
 };
 
 type CloudAccountEmailFormProps = {
   currentStep: number;
   stepCount: number;
+  initialValues?: Partial<CloudAccountEmailPayload>;
   onBackButtonClick: () => void;
-  onSubmit: SubmitHandler<CloudAccountEmailFormInputs>;
-};
-
-const options: UseFormProps<CloudAccountEmailFormInputs> = {
-  defaultValues: {
-    email: '',
-  },
+  onSubmit: SubmitHandler<CloudAccountEmailPayload>;
 };
 
 const CloudAccountEmailForm = ({
   currentStep,
   stepCount,
+  initialValues,
   onBackButtonClick,
   onSubmit,
 }: CloudAccountEmailFormProps): ReactElement => {
@@ -34,7 +30,12 @@ const CloudAccountEmailForm = ({
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm<CloudAccountEmailFormInputs>(options);
+  } = useForm<CloudAccountEmailPayload>({
+    defaultValues: {
+      email: '',
+      ...initialValues,
+    },
+  });
 
   return (
     <Form onSubmit={handleSubmit(onSubmit)}>
@@ -53,7 +54,7 @@ const CloudAccountEmailForm = ({
             />
           </Field.Row>
           {errors.email && (
-            <Field.Error>{t('global.fieldRequired')}</Field.Error>
+            <Field.Error>{t('component.form.requiredField')}</Field.Error>
           )}
         </Field>
       </Form.Container>
diff --git a/packages/onboarding-ui/src/forms/OrganizationInfoForm/OrganizationInfoForm.tsx b/packages/onboarding-ui/src/forms/OrganizationInfoForm/OrganizationInfoForm.tsx
index 8b10bca76b..3f1c835a0a 100644
--- a/packages/onboarding-ui/src/forms/OrganizationInfoForm/OrganizationInfoForm.tsx
+++ b/packages/onboarding-ui/src/forms/OrganizationInfoForm/OrganizationInfoForm.tsx
@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 
 import Form from '../../common/Form';
 
-type OrganizationInfoFormInputs = {
+export type OrganizationInfoPayload = {
   organizationName: string;
   organizationType: string;
   organizationIndustry: string;
@@ -28,7 +28,8 @@ type OrganizationInfoFormProps = {
   organizationIndustryOptions: SelectOptions;
   organizationSizeOptions: SelectOptions;
   countryOptions: SelectOptions;
-  onSubmit: SubmitHandler<OrganizationInfoFormInputs>;
+  initialValues?: OrganizationInfoPayload;
+  onSubmit: SubmitHandler<OrganizationInfoPayload>;
   onBackButtonClick: () => void;
 };
 
@@ -39,6 +40,7 @@ const OrganizationInfoForm = ({
   organizationIndustryOptions,
   organizationSizeOptions,
   countryOptions,
+  initialValues,
   onSubmit,
   onBackButtonClick,
 }: OrganizationInfoFormProps): ReactElement => {
@@ -48,8 +50,10 @@ const OrganizationInfoForm = ({
     register,
     control,
     handleSubmit,
-    formState: { isDirty, isValidating, isSubmitting, errors },
-  } = useForm<OrganizationInfoFormInputs>();
+    formState: { isValidating, isSubmitting, errors },
+  } = useForm<OrganizationInfoPayload>({
+    defaultValues: initialValues,
+  });
 
   return (
     <Form onSubmit={handleSubmit(onSubmit)}>
@@ -161,11 +165,7 @@ const OrganizationInfoForm = ({
           <Button onClick={onBackButtonClick}>
             {t('component.form.action.back')}
           </Button>
-          <Button
-            type='submit'
-            primary
-            disabled={!isDirty || isValidating || isSubmitting}
-          >
+          <Button type='submit' primary disabled={isValidating || isSubmitting}>
             {t('component.form.action.next')}
           </Button>
         </ButtonGroup>
diff --git a/packages/onboarding-ui/src/forms/RegisterServerForm/RegisterOptionCard.tsx b/packages/onboarding-ui/src/forms/RegisterServerForm/RegisterOptionCard.tsx
index 97d591ccc4..1cbc3d5827 100644
--- a/packages/onboarding-ui/src/forms/RegisterServerForm/RegisterOptionCard.tsx
+++ b/packages/onboarding-ui/src/forms/RegisterServerForm/RegisterOptionCard.tsx
@@ -8,10 +8,11 @@ import OptionCard from './OptionCard';
 const RegisterOptionCard = (): ReactElement => {
   const { t } = useTranslation();
 
-  const { register, setValue } = useFormContext();
+  const { register, setValue, trigger } = useFormContext();
 
   const onClickCard = () => {
     setValue('registerType', 'registered');
+    trigger('agreement');
   };
 
   const selected = useWatch({ name: 'registerType' }) === 'registered';
@@ -68,7 +69,19 @@ const RegisterOptionCard = (): ReactElement => {
           </label>
         </Box>
         <Box color='default' fontScale='c1'>
-          <CheckBox mie='x8' disabled={!selected} {...register('agreement')} />{' '}
+          <CheckBox
+            mie='x8'
+            disabled={!selected}
+            {...register('agreement', {
+              validate: (value) => {
+                if (!selected) {
+                  return true;
+                }
+
+                return value;
+              },
+            })}
+          />{' '}
           <Box is='label' htmlFor='agreement' withRichContent>
             <Trans i18nKey='form.serverRegistrationForm.register.agreement'>
               I agree with
diff --git a/packages/onboarding-ui/src/forms/RegisterServerForm/RegisterServerForm.tsx b/packages/onboarding-ui/src/forms/RegisterServerForm/RegisterServerForm.tsx
index fb6fa5235d..1913b96808 100644
--- a/packages/onboarding-ui/src/forms/RegisterServerForm/RegisterServerForm.tsx
+++ b/packages/onboarding-ui/src/forms/RegisterServerForm/RegisterServerForm.tsx
@@ -7,7 +7,7 @@ import Form from '../../common/Form';
 import RegisterOptionCard from './RegisterOptionCard';
 import StandaloneOptionCard from './StandaloneOptionCard';
 
-type RegisterServerFormInputs = {
+export type RegisterServerPayload = {
   registerType: 'registered' | 'standalone';
   agreement: boolean;
   updates: boolean;
@@ -16,29 +16,37 @@ type RegisterServerFormInputs = {
 type RegisterServerFormProps = {
   currentStep: number;
   stepCount: number;
-  onSubmit: SubmitHandler<RegisterServerFormInputs>;
+  initialValues?: Partial<RegisterServerPayload>;
+  onSubmit: SubmitHandler<RegisterServerPayload>;
   onBackButtonClick: () => void;
 };
 
 const RegisterServerForm = ({
   currentStep,
   stepCount,
+  initialValues,
   onSubmit,
   onBackButtonClick,
 }: RegisterServerFormProps): ReactElement => {
   const { t } = useTranslation();
 
-  const methods = useForm<RegisterServerFormInputs>({
+  const form = useForm<RegisterServerPayload>({
+    mode: 'onChange',
     defaultValues: {
       registerType: 'registered',
       agreement: false,
-      updates: false,
+      updates: true,
+      ...initialValues,
     },
   });
-  const { handleSubmit } = methods;
+
+  const {
+    formState: { isValidating, isSubmitting, isValid },
+    handleSubmit,
+  } = form;
 
   return (
-    <FormProvider {...methods}>
+    <FormProvider {...form}>
       <Form onSubmit={handleSubmit(onSubmit)}>
         <Form.Steps currentStep={currentStep} stepCount={stepCount} />
         <Form.Title>{t('form.serverRegistrationForm.title')}</Form.Title>
@@ -51,7 +59,11 @@ const RegisterServerForm = ({
             <Button onClick={onBackButtonClick}>
               {t('component.form.action.back')}
             </Button>
-            <Button type='submit' primary>
+            <Button
+              type='submit'
+              primary
+              disabled={isValidating || isSubmitting || !isValid}
+            >
               {t('component.form.action.next')}
             </Button>
           </ButtonGroup>
diff --git a/packages/onboarding-ui/src/forms/RegisterServerForm/StandaloneOptionCard.tsx b/packages/onboarding-ui/src/forms/RegisterServerForm/StandaloneOptionCard.tsx
index cbb93dc776..edacf6f249 100644
--- a/packages/onboarding-ui/src/forms/RegisterServerForm/StandaloneOptionCard.tsx
+++ b/packages/onboarding-ui/src/forms/RegisterServerForm/StandaloneOptionCard.tsx
@@ -8,10 +8,11 @@ import OptionCard from './OptionCard';
 const RegisterOptionCard = (): ReactElement => {
   const { t } = useTranslation();
 
-  const { register, setValue } = useFormContext();
+  const { register, setValue, trigger } = useFormContext();
 
   const onClickCard = () => {
     setValue('registerType', 'standalone');
+    trigger('agreement');
   };
 
   const selected = useWatch({ name: 'registerType' }) === 'standalone';
diff --git a/packages/onboarding-ui/src/hooks/useStyle.ts b/packages/onboarding-ui/src/hooks/useStyle.ts
deleted file mode 100644
index ab9b8b4a1f..0000000000
--- a/packages/onboarding-ui/src/hooks/useStyle.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import {
-  createClassName,
-  escapeName,
-  transpile,
-  attachRules,
-  css,
-} from '@rocket.chat/css-in-js';
-import { useDebugValue, useLayoutEffect, useMemo } from 'react';
-
-export const useStyle = (
-  cssFn: ReturnType<typeof css>,
-  arg: unknown = undefined
-): string | undefined => {
-  const content = useMemo(() => (cssFn ? cssFn(arg) : undefined), [arg, cssFn]);
-
-  const className = useMemo(() => {
-    if (!content) {
-      return;
-    }
-
-    return content ? createClassName(content) : undefined;
-  }, [content]);
-
-  useDebugValue(className);
-
-  useLayoutEffect(() => {
-    if (!content || !className) {
-      return;
-    }
-
-    const escapedClassName = escapeName(className);
-    const transpiledContent = transpile(`.${escapedClassName}`, content);
-    const detach = attachRules(transpiledContent);
-
-    return () => {
-      setTimeout(detach, 1000);
-    };
-  }, [className, content]);
-
-  return className;
-};
diff --git a/packages/onboarding-ui/src/pages/AdminInfoPage/AdminInfoPage.tsx b/packages/onboarding-ui/src/pages/AdminInfoPage/AdminInfoPage.tsx
index 3671f0c3e1..9bfb710397 100644
--- a/packages/onboarding-ui/src/pages/AdminInfoPage/AdminInfoPage.tsx
+++ b/packages/onboarding-ui/src/pages/AdminInfoPage/AdminInfoPage.tsx
@@ -4,20 +4,17 @@ import type { SubmitHandler, Validate } from 'react-hook-form';
 import BackgroundLayer from '../../common/BackgroundLayer';
 import FormPageLayout from '../../common/FormPageLayout';
 import AdminInfoForm from '../../forms/AdminInfoForm';
+import type { AdminInfoPayload } from '../../forms/AdminInfoForm/AdminInfoForm';
 
 type AdminInfoPageProps = {
   currentStep: number;
   stepCount: number;
+  passwordRulesHint: string;
+  initialValues?: Omit<AdminInfoPayload, 'password'>;
   validateUsername: Validate<string>;
   validateEmail: Validate<string>;
-  passwordRulesHint: string;
   validatePassword: Validate<string>;
-  onSubmit: SubmitHandler<{
-    fullname: string;
-    username: string;
-    companyEmail: string;
-    password: string;
-  }>;
+  onSubmit: SubmitHandler<AdminInfoPayload>;
 };
 
 const AdminInfoPage = (props: AdminInfoPageProps): ReactElement => (
diff --git a/packages/onboarding-ui/src/pages/CloudAccountEmailPage/CloudAccountEmailPage.tsx b/packages/onboarding-ui/src/pages/CloudAccountEmailPage/CloudAccountEmailPage.tsx
index d78182b304..82d7bb1c4a 100644
--- a/packages/onboarding-ui/src/pages/CloudAccountEmailPage/CloudAccountEmailPage.tsx
+++ b/packages/onboarding-ui/src/pages/CloudAccountEmailPage/CloudAccountEmailPage.tsx
@@ -4,17 +4,19 @@ import type { SubmitHandler } from 'react-hook-form';
 import BackgroundLayer from '../../common/BackgroundLayer';
 import FormPageLayout from '../../common/FormPageLayout';
 import CloudAccountEmailForm from '../../forms/CloudAccountEmailForm';
+import type { CloudAccountEmailPayload } from '../../forms/CloudAccountEmailForm/CloudAccountEmailForm';
 
 type CloudAccountEmailPageProps = {
   currentStep: number;
   stepCount: number;
+  initialValues?: Partial<CloudAccountEmailPayload>;
   onBackButtonClick: () => void;
   onSubmit: SubmitHandler<{
     email: string;
   }>;
 };
 
-const OrganizationInfoPage = (
+const CloudAccountEmailPage = (
   props: CloudAccountEmailPageProps
 ): ReactElement => (
   <BackgroundLayer>
@@ -24,4 +26,4 @@ const OrganizationInfoPage = (
   </BackgroundLayer>
 );
 
-export default OrganizationInfoPage;
+export default CloudAccountEmailPage;
diff --git a/packages/onboarding-ui/src/pages/OrganizationInfoPage/OrganizationInfoPage.tsx b/packages/onboarding-ui/src/pages/OrganizationInfoPage/OrganizationInfoPage.tsx
index 4df7192d5c..ad23b8a244 100644
--- a/packages/onboarding-ui/src/pages/OrganizationInfoPage/OrganizationInfoPage.tsx
+++ b/packages/onboarding-ui/src/pages/OrganizationInfoPage/OrganizationInfoPage.tsx
@@ -4,6 +4,7 @@ import type { SubmitHandler } from 'react-hook-form';
 import BackgroundLayer from '../../common/BackgroundLayer';
 import FormPageLayout from '../../common/FormPageLayout';
 import OrganizationInfoForm from '../../forms/OrganizationInfoForm';
+import type { OrganizationInfoPayload } from '../../forms/OrganizationInfoForm/OrganizationInfoForm';
 
 type OrganizationInfoPageProps = {
   currentStep: number;
@@ -12,13 +13,8 @@ type OrganizationInfoPageProps = {
   organizationIndustryOptions: (readonly [string, string])[];
   organizationSizeOptions: (readonly [string, string])[];
   countryOptions: (readonly [string, string])[];
-  onSubmit: SubmitHandler<{
-    organizationName: string;
-    organizationType: string;
-    organizationIndustry: string;
-    organizationSize: string;
-    country: string;
-  }>;
+  initialValues?: OrganizationInfoPayload;
+  onSubmit: SubmitHandler<OrganizationInfoPayload>;
   onBackButtonClick: () => void;
 };
 
diff --git a/packages/onboarding-ui/src/pages/RegisterServerPage/RegisterServerPage.tsx b/packages/onboarding-ui/src/pages/RegisterServerPage/RegisterServerPage.tsx
index 44b2baad6a..8f9da77f22 100644
--- a/packages/onboarding-ui/src/pages/RegisterServerPage/RegisterServerPage.tsx
+++ b/packages/onboarding-ui/src/pages/RegisterServerPage/RegisterServerPage.tsx
@@ -4,19 +4,17 @@ import type { SubmitHandler } from 'react-hook-form';
 import BackgroundLayer from '../../common/BackgroundLayer';
 import FormPageLayout from '../../common/FormPageLayout';
 import RegisterServerForm from '../../forms/RegisterServerForm';
+import type { RegisterServerPayload } from '../../forms/RegisterServerForm/RegisterServerForm';
 
 type RegisterServerPageProps = {
   currentStep: number;
   stepCount: number;
-  onSubmit: SubmitHandler<{
-    registerType: 'registered' | 'standalone';
-    agreement: boolean;
-    updates: boolean;
-  }>;
+  initialValues?: Partial<RegisterServerPayload>;
+  onSubmit: SubmitHandler<RegisterServerPayload>;
   onBackButtonClick: () => void;
 };
 
-const OrganizationInfoPage = (props: RegisterServerPageProps): ReactElement => (
+const RegisterServerPage = (props: RegisterServerPageProps): ReactElement => (
   <BackgroundLayer>
     <FormPageLayout>
       <RegisterServerForm {...props} />
@@ -24,4 +22,4 @@ const OrganizationInfoPage = (props: RegisterServerPageProps): ReactElement => (
   </BackgroundLayer>
 );
 
-export default OrganizationInfoPage;
+export default RegisterServerPage;