diff --git a/.changeset/witty-impalas-flow.md b/.changeset/witty-impalas-flow.md
new file mode 100644
index 0000000000000..f0685178bf1ec
--- /dev/null
+++ b/.changeset/witty-impalas-flow.md
@@ -0,0 +1,6 @@
+---
+'@rocket.chat/ui-client': minor
+'@rocket.chat/meteor': minor
+---
+
+Improves the Outbound Message modal’s scrolling on smaller viewports and with large templates
diff --git a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessagePreview/OutboundMessagePreview.tsx b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessagePreview/OutboundMessagePreview.tsx
index 5230cc9060af7..8f01e7ed680b9 100644
--- a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessagePreview/OutboundMessagePreview.tsx
+++ b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessagePreview/OutboundMessagePreview.tsx
@@ -6,6 +6,7 @@ import type {
 	ILivechatContact,
 } from '@rocket.chat/core-typings';
 import { Box, Margins } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -14,7 +15,7 @@ import { formatPhoneNumber } from '../../../../../lib/formatPhoneNumber';
 import type { TemplateParameters } from '../../definitions/template';
 import TemplatePreview from '../TemplatePreview';
 
-type OutboundMessagePreviewProps = {
+type OutboundMessagePreviewProps = ComponentProps<typeof Box> & {
 	template?: IOutboundProviderTemplate;
 	contactName?: ILivechatContact['name'];
 	providerName?: IOutboundProviderMetadata['providerName'];
@@ -50,6 +51,7 @@ const OutboundMessagePreview = ({
 	sender: rawSender,
 	recipient: rawRecipient,
 	templateParameters,
+	...props
 }: OutboundMessagePreviewProps) => {
 	const { t } = useTranslation();
 
@@ -68,7 +70,7 @@ const OutboundMessagePreview = ({
 	}, [agentName, agentUsername, departmentName]);
 
 	return (
-		<div>
+		<Box {...props} is='section'>
 			<ul>
 				<Margins blockStart={24}>
 					<Box is='li' mbs={0}>
@@ -99,7 +101,7 @@ const OutboundMessagePreview = ({
 					<TemplatePreview template={template} parameters={templateParameters} />
 				</Box>
 			) : null}
-		</div>
+		</Box>
 	);
 };
 
diff --git a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/OutboundMessageWizard.tsx b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/OutboundMessageWizard.tsx
index 859a0994a123e..468f041c26ca0 100644
--- a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/OutboundMessageWizard.tsx
+++ b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/OutboundMessageWizard.tsx
@@ -147,10 +147,10 @@ const OutboundMessageWizard = ({ defaultValues = {}, onSuccess, onError }: Outbo
 
 	return (
 		<ErrorBoundary fallbackRender={() => <GenericError icon='circle-exclamation' />}>
-			<Wizard api={wizardApi}>
+			<Wizard api={wizardApi} display='flex' flexDirection='column' height='100%'>
 				<WizardTabs />
 
-				<Box mbs={16}>
+				<Box mbs={16} minHeight={0} flexGrow={1}>
 					<WizardContent id='recipient'>
 						<RecipientStep defaultValues={state} onDirty={handleDirtyStep} onSubmit={handleSubmit} />
 					</WizardContent>
diff --git a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/components/OutboundMessageForm.tsx b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/components/OutboundMessageForm.tsx
new file mode 100644
index 0000000000000..2b24a9cd01f9f
--- /dev/null
+++ b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/components/OutboundMessageForm.tsx
@@ -0,0 +1,12 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+
+type OutboundMessageFormProps = ComponentProps<typeof Box> & {
+	onSubmit?: () => void;
+};
+
+const OutboundMessageForm = ({ onSubmit, ...props }: OutboundMessageFormProps) => (
+	<Box is='form' display='flex' flexDirection='column' height='100%' flexGrow={1} flexShrink={0} onSubmit={onSubmit} {...props} />
+);
+
+export default OutboundMessageForm;
diff --git a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/MessageForm/MessageForm.tsx b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/MessageForm/MessageForm.tsx
index 1d1dde6475fac..dda545c6ad949 100644
--- a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/MessageForm/MessageForm.tsx
+++ b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/MessageForm/MessageForm.tsx
@@ -1,5 +1,5 @@
 import type { IOutboundProviderTemplate, Serialized, ILivechatContact } from '@rocket.chat/core-typings';
-import { Box, Button, FieldGroup } from '@rocket.chat/fuselage';
+import { Box, Button, FieldGroup, Scrollable } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useToastBarDispatch } from '@rocket.chat/fuselage-toastbar';
 import type { ReactNode } from 'react';
@@ -12,6 +12,7 @@ import TemplatePlaceholderField from './components/TemplatePlaceholderField';
 import TemplatePreviewForm from './components/TemplatePreviewField';
 import type { TemplateParameters } from '../../../../definitions/template';
 import { extractParameterMetadata } from '../../../../utils/template';
+import Form from '../../components/OutboundMessageForm';
 import { FormFetchError } from '../../utils/errors';
 
 export type MessageFormData = {
@@ -78,16 +79,18 @@ const MessageForm = (props: MessageFormProps) => {
 	});
 
 	return (
-		<form id={messageFormId} onSubmit={handleSubmit(submit)} noValidate>
-			<FieldGroup>
-				<TemplateField control={control} templates={templates} onChange={() => setValue('templateParameters', {})} />
+		<Form id={messageFormId} onSubmit={handleSubmit(submit)} noValidate>
+			<Scrollable vertical>
+				<FieldGroup justifyContent='start' pi={2}>
+					<TemplateField control={control} templates={templates} onChange={() => setValue('templateParameters', {})} />
 
-				{parametersMetadata.map((metadata) => (
-					<TemplatePlaceholderField key={metadata.id} control={control} metadata={metadata} contact={contact} />
-				))}
+					{parametersMetadata.map((metadata) => (
+						<TemplatePlaceholderField key={metadata.id} control={control} metadata={metadata} contact={contact} />
+					))}
 
-				{template ? <TemplatePreviewForm control={control} template={template} /> : null}
-			</FieldGroup>
+					{template ? <TemplatePreviewForm control={control} template={template} /> : null}
+				</FieldGroup>
+			</Scrollable>
 
 			{customActions ?? (
 				<Box mbs={24} display='flex' justifyContent='end'>
@@ -96,7 +99,7 @@ const MessageForm = (props: MessageFormProps) => {
 					</Button>
 				</Box>
 			)}
-		</form>
+		</Form>
 	);
 };
 
diff --git a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/MessageForm/components/TemplateField.tsx b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/MessageForm/components/TemplateField.tsx
index 0c9ef49dbd258..1f116ac24c326 100644
--- a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/MessageForm/components/TemplateField.tsx
+++ b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/MessageForm/components/TemplateField.tsx
@@ -1,6 +1,7 @@
 import type { IOutboundProviderTemplate, Serialized } from '@rocket.chat/core-typings';
 import { Field, FieldError, FieldHint, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import type { ComponentProps } from 'react';
 import { useId } from 'react';
 import type { Control } from 'react-hook-form';
 import { useController } from 'react-hook-form';
@@ -11,13 +12,13 @@ import TemplateSelect from '../../../../TemplateSelect';
 import { cxp } from '../../../utils/cx';
 import type { MessageFormData } from '../MessageForm';
 
-type TemplateFieldProps = {
+type TemplateFieldProps = ComponentProps<typeof Field> & {
 	control: Control<MessageFormData>;
 	templates: Serialized<IOutboundProviderTemplate>[] | undefined;
 	onChange?: (templateId: string) => void;
 };
 
-const TemplateField = ({ control, templates, onChange: onChangeExternal }: TemplateFieldProps) => {
+const TemplateField = ({ control, templates, onChange: onChangeExternal, ...props }: TemplateFieldProps) => {
 	const { t } = useTranslation();
 	const templateFieldId = useId();
 
@@ -46,7 +47,7 @@ const TemplateField = ({ control, templates, onChange: onChangeExternal }: Templ
 	});
 
 	return (
-		<Field>
+		<Field {...props}>
 			<FieldLabel is='span' required id={templateFieldId}>
 				{t('Template')}
 			</FieldLabel>
diff --git a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/RecipientForm/RecipientForm.tsx b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/RecipientForm/RecipientForm.tsx
index 942249923aa12..b9f815fdca996 100644
--- a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/RecipientForm/RecipientForm.tsx
+++ b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/RecipientForm/RecipientForm.tsx
@@ -1,5 +1,5 @@
 import type { IOutboundProviderMetadata, Serialized, ILivechatContact } from '@rocket.chat/core-typings';
-import { Box, Button, FieldGroup } from '@rocket.chat/fuselage';
+import { Box, Button, FieldGroup, Scrollable } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useToastBarDispatch } from '@rocket.chat/fuselage-toastbar';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
@@ -14,6 +14,7 @@ import ContactField from './components/ContactField';
 import RecipientField from './components/RecipientField';
 import SenderField from './components/SenderField';
 import { omnichannelQueryKeys } from '../../../../../../../lib/queryKeys';
+import Form from '../../components/OutboundMessageForm';
 import { ContactNotFoundError, ProviderNotFoundError } from '../../utils/errors';
 
 export type RecipientFormData = {
@@ -184,43 +185,45 @@ const RecipientForm = (props: RecipientFormProps) => {
 	});
 
 	return (
-		<form id={recipientFormId} onSubmit={handleSubmit(submit)} noValidate>
-			<FieldGroup>
-				<ContactField
-					control={control}
-					isError={isErrorContact || isContactNotFound}
-					isFetching={isFetchingContact}
-					onRetry={refetchContact}
-				/>
-
-				<ChannelField
-					control={control}
-					contact={contact}
-					disabled={!contactId}
-					isFetching={isFetchingProvider}
-					isError={isErrorProvider || isProviderNotFound}
-					onRetry={refetchProvider}
-				/>
-
-				<RecipientField
-					control={control}
-					contact={contact}
-					type={provider?.providerType || 'phone'}
-					disabled={!providerId || !contact}
-					isLoading={isFetchingContact}
-				/>
-
-				<SenderField control={control} provider={provider} disabled={!recipient || !provider} isLoading={isFetchingProvider} />
-			</FieldGroup>
+		<Form id={recipientFormId} onSubmit={handleSubmit(submit)} noValidate>
+			<Scrollable vertical>
+				<FieldGroup justifyContent='start' pi={2}>
+					<ContactField
+						control={control}
+						isError={isErrorContact || isContactNotFound}
+						isFetching={isFetchingContact}
+						onRetry={refetchContact}
+					/>
+
+					<ChannelField
+						control={control}
+						contact={contact}
+						disabled={!contactId}
+						isFetching={isFetchingProvider}
+						isError={isErrorProvider || isProviderNotFound}
+						onRetry={refetchProvider}
+					/>
+
+					<RecipientField
+						control={control}
+						contact={contact}
+						type={provider?.providerType || 'phone'}
+						disabled={!providerId || !contact}
+						isLoading={isFetchingContact}
+					/>
+
+					<SenderField control={control} provider={provider} disabled={!recipient || !provider} isLoading={isFetchingProvider} />
+				</FieldGroup>
+			</Scrollable>
 
 			{customActions ?? (
-				<Box mbs={24} display='flex' justifyContent='end'>
+				<Box mbs={24} display='flex' justifyContent='end' flexGrow={0} flexShrink={0}>
 					<Button type='submit' primary loading={isSubmitting}>
 						{t('Submit')}
 					</Button>
 				</Box>
 			)}
-		</form>
+		</Form>
 	);
 };
 
diff --git a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/RepliesForm/RepliesForm.tsx b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/RepliesForm/RepliesForm.tsx
index f7e6acc2f13e5..4d442b89d207f 100644
--- a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/RepliesForm/RepliesForm.tsx
+++ b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/RepliesForm/RepliesForm.tsx
@@ -1,5 +1,5 @@
 import type { Serialized, ILivechatDepartment, ILivechatDepartmentAgents } from '@rocket.chat/core-typings';
-import { Box, Button, FieldGroup } from '@rocket.chat/fuselage';
+import { Box, Button, FieldGroup, Scrollable } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useToastBarDispatch } from '@rocket.chat/fuselage-toastbar';
 import { useEndpoint, usePermission, useUser } from '@rocket.chat/ui-contexts';
@@ -13,6 +13,7 @@ import AgentField from './components/AgentField';
 import DepartmentField from './components/DepartmentField';
 import { useAllowedAgents } from './hooks/useAllowedAgents';
 import { omnichannelQueryKeys } from '../../../../../../../lib/queryKeys';
+import Form from '../../components/OutboundMessageForm';
 import { FormFetchError } from '../../utils/errors';
 
 export type RepliesFormData = {
@@ -115,25 +116,27 @@ const RepliesForm = (props: RepliesFormProps) => {
 	});
 
 	return (
-		<form id={repliesFormId} onSubmit={handleSubmit(submit)} noValidate>
-			<FieldGroup>
-				<DepartmentField
-					control={control}
-					onlyMyDepartments={!canAssignAllDepartments}
-					isError={isErrorDepartment}
-					isFetching={isFetchingDepartment}
-					onRefetch={refetchDepartment}
-					onChange={() => setValue('agentId', '')}
-				/>
-
-				<AgentField
-					control={control}
-					agents={agents}
-					canAssignAgent={canAssignAnyAgent || canAssignSelfOnlyAgent}
-					disabled={!departmentId}
-					isLoading={isFetchingDepartment}
-				/>
-			</FieldGroup>
+		<Form id={repliesFormId} onSubmit={handleSubmit(submit)} noValidate>
+			<Scrollable vertical>
+				<FieldGroup justifyContent='start' pi={2}>
+					<DepartmentField
+						control={control}
+						onlyMyDepartments={!canAssignAllDepartments}
+						isError={isErrorDepartment}
+						isFetching={isFetchingDepartment}
+						onRefetch={refetchDepartment}
+						onChange={() => setValue('agentId', '')}
+					/>
+
+					<AgentField
+						control={control}
+						agents={agents}
+						canAssignAgent={canAssignAnyAgent || canAssignSelfOnlyAgent}
+						disabled={!departmentId}
+						isLoading={isFetchingDepartment}
+					/>
+				</FieldGroup>
+			</Scrollable>
 
 			{customActions ?? (
 				<Box mbs={24} display='flex' justifyContent='end'>
@@ -142,7 +145,7 @@ const RepliesForm = (props: RepliesFormProps) => {
 					</Button>
 				</Box>
 			)}
-		</form>
+		</Form>
 	);
 };
 
diff --git a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/RepliesForm/components/AgentField.tsx b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/RepliesForm/components/AgentField.tsx
index 424587969176e..96b6cd9fc904c 100644
--- a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/RepliesForm/components/AgentField.tsx
+++ b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/RepliesForm/components/AgentField.tsx
@@ -1,5 +1,6 @@
 import type { ILivechatDepartmentAgents, Serialized } from '@rocket.chat/core-typings';
 import { Field, FieldError, FieldHint, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
 import { useId } from 'react';
 import type { Control } from 'react-hook-form';
 import { useController } from 'react-hook-form';
@@ -9,7 +10,7 @@ import AutoCompleteAgent from '../../../../AutoCompleteDepartmentAgent';
 import { cxp } from '../../../utils/cx';
 import type { RepliesFormData } from '../RepliesForm';
 
-type AgentFieldProps = {
+type AgentFieldProps = ComponentProps<typeof Field> & {
 	control: Control<RepliesFormData>;
 	agents: Serialized<ILivechatDepartmentAgents>[];
 	canAssignAgent?: boolean;
@@ -17,7 +18,7 @@ type AgentFieldProps = {
 	isLoading?: boolean;
 };
 
-const AgentField = ({ control, agents, canAssignAgent, disabled = false, isLoading = false }: AgentFieldProps) => {
+const AgentField = ({ control, agents, canAssignAgent, disabled = false, isLoading = false, ...props }: AgentFieldProps) => {
 	const { t } = useTranslation();
 	const agentFieldId = useId();
 
@@ -30,7 +31,7 @@ const AgentField = ({ control, agents, canAssignAgent, disabled = false, isLoadi
 	});
 
 	return (
-		<Field>
+		<Field {...props}>
 			<FieldLabel htmlFor={agentFieldId}>{`${t('Agent')} (${t('optional')})`}</FieldLabel>
 			<FieldRow>
 				<AutoCompleteAgent
diff --git a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/RepliesForm/components/DepartmentField.tsx b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/RepliesForm/components/DepartmentField.tsx
index a0095174d7661..f455f5a027ac8 100644
--- a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/RepliesForm/components/DepartmentField.tsx
+++ b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/forms/RepliesForm/components/DepartmentField.tsx
@@ -1,5 +1,6 @@
 import { Field, FieldError, FieldHint, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import type { ComponentProps } from 'react';
 import { useId } from 'react';
 import type { Control } from 'react-hook-form';
 import { useController } from 'react-hook-form';
@@ -10,7 +11,7 @@ import RetryButton from '../../../components/RetryButton';
 import { cxp } from '../../../utils/cx';
 import type { RepliesFormData } from '../RepliesForm';
 
-type DepartmentFieldProps = {
+type DepartmentFieldProps = ComponentProps<typeof Field> & {
 	control: Control<RepliesFormData>;
 	onlyMyDepartments?: boolean;
 	isError: boolean;
@@ -26,6 +27,7 @@ const DepartmentField = ({
 	isFetching,
 	onRefetch,
 	onChange: onChangeExternal,
+	...props
 }: DepartmentFieldProps) => {
 	const { t } = useTranslation();
 	const departmentFieldId = useId();
@@ -49,7 +51,7 @@ const DepartmentField = ({
 	});
 
 	return (
-		<Field>
+		<Field {...props}>
 			<FieldLabel is='span' id={departmentFieldId}>{`${t('Department')} (${t('optional')})`}</FieldLabel>
 			<FieldRow>
 				<AutoCompleteDepartment
diff --git a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/MessageStep.tsx b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/MessageStep.tsx
index bb5ce6aa063b0..6830f6e7b4b83 100644
--- a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/MessageStep.tsx
+++ b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/MessageStep.tsx
@@ -18,20 +18,18 @@ const MessageStep = ({ contact, templates, defaultValues, onSubmit }: MessageSte
 	});
 
 	return (
-		<div>
-			<MessageForm
-				contact={contact}
-				templates={templates}
-				defaultValues={defaultValues}
-				onSubmit={handleSubmit}
-				renderActions={({ isSubmitting }) => (
-					<WizardActions>
-						<WizardBackButton />
-						<WizardNextButton manual type='submit' loading={isSubmitting} />
-					</WizardActions>
-				)}
-			/>
-		</div>
+		<MessageForm
+			contact={contact}
+			templates={templates}
+			defaultValues={defaultValues}
+			onSubmit={handleSubmit}
+			renderActions={({ isSubmitting }) => (
+				<WizardActions>
+					<WizardBackButton />
+					<WizardNextButton manual type='submit' loading={isSubmitting} />
+				</WizardActions>
+			)}
+		/>
 	);
 };
 
diff --git a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/RecipientStep.tsx b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/RecipientStep.tsx
index 689a6f8648a9c..88e9c64e7c573 100644
--- a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/RecipientStep.tsx
+++ b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/RecipientStep.tsx
@@ -19,18 +19,16 @@ const RecipientStep = ({ defaultValues, onDirty, onSubmit }: RecipientStepProps)
 	});
 
 	return (
-		<div>
-			<RecipientForm
-				defaultValues={defaultValues}
-				onDirty={onDirty}
-				onSubmit={handleSubmit}
-				renderActions={({ isSubmitting }) => (
-					<WizardActions>
-						<WizardNextButton manual type='submit' loading={isSubmitting} />
-					</WizardActions>
-				)}
-			/>
-		</div>
+		<RecipientForm
+			defaultValues={defaultValues}
+			onDirty={onDirty}
+			onSubmit={handleSubmit}
+			renderActions={({ isSubmitting }) => (
+				<WizardActions>
+					<WizardNextButton manual type='submit' loading={isSubmitting} />
+				</WizardActions>
+			)}
+		/>
 	);
 };
 
diff --git a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/RepliesStep.tsx b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/RepliesStep.tsx
index 7c569115c4a92..d3abec35e7aab 100644
--- a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/RepliesStep.tsx
+++ b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/RepliesStep.tsx
@@ -18,18 +18,16 @@ const RepliesStep = ({ defaultValues, onSubmit }: RepliesStepProps) => {
 	});
 
 	return (
-		<div>
-			<RepliesForm
-				defaultValues={defaultValues}
-				onSubmit={handleSubmit}
-				renderActions={({ isSubmitting }) => (
-					<WizardActions>
-						<WizardBackButton />
-						<WizardNextButton manual type='submit' loading={isSubmitting} />
-					</WizardActions>
-				)}
-			/>
-		</div>
+		<RepliesForm
+			defaultValues={defaultValues}
+			onSubmit={handleSubmit}
+			renderActions={({ isSubmitting }) => (
+				<WizardActions>
+					<WizardBackButton />
+					<WizardNextButton manual type='submit' loading={isSubmitting} />
+				</WizardActions>
+			)}
+		/>
 	);
 };
 
diff --git a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/ReviewStep.tsx b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/ReviewStep.tsx
index b6cf83197bb02..3237ed57eb9f7 100644
--- a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/ReviewStep.tsx
+++ b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/ReviewStep.tsx
@@ -1,4 +1,4 @@
-import { Box, Button } from '@rocket.chat/fuselage';
+import { Box, Button, Scrollable } from '@rocket.chat/fuselage';
 import { WizardActions, WizardBackButton } from '@rocket.chat/ui-client';
 import { useMutation } from '@tanstack/react-query';
 import type { ComponentProps } from 'react';
@@ -16,10 +16,10 @@ const ReviewStep = ({ onSend, ...props }: ReviewStepProps) => {
 	const sendMutation = useMutation({ mutationFn: onSend });
 
 	return (
-		<div>
-			<Box maxHeight={500} overflowX='hidden' overflowY='auto'>
-				<OutboundMessagePreview {...props} />
-			</Box>
+		<Box display='flex' flexDirection='column' height='100%'>
+			<Scrollable vertical>
+				<OutboundMessagePreview {...props} maxHeight={500} />
+			</Scrollable>
 
 			<WizardActions annotation={t('Messages_cannot_be_unsent')}>
 				<WizardBackButton />
@@ -28,7 +28,7 @@ const ReviewStep = ({ onSend, ...props }: ReviewStepProps) => {
 					{t('Send')}
 				</Button>
 			</WizardActions>
-		</div>
+		</Box>
 	);
 };
 
diff --git a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/__snapshots__/MessageStep.spec.tsx.snap b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/__snapshots__/MessageStep.spec.tsx.snap
index 4e25cd5e1229c..c60d28eb8f14d 100644
--- a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/__snapshots__/MessageStep.spec.tsx.snap
+++ b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/__snapshots__/MessageStep.spec.tsx.snap
@@ -6,38 +6,36 @@ exports[`MessageStep renders Default without crashing 1`] = `
     <div
       class="rcx-box rcx-box--full rcx-css-162rsse"
     >
-      <div>
+      <div
+        data-testid="message-form"
+      >
         <div
-          data-testid="message-form"
+          class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
         >
           <div
-            class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
+            class="rcx-button-group rcx-button-group--align-start"
+            role="group"
           >
-            <div
-              class="rcx-button-group rcx-button-group--align-start"
-              role="group"
+            <button
+              class="rcx-box rcx-box--full rcx-button rcx-button-group__item"
+              type="button"
             >
-              <button
-                class="rcx-box rcx-box--full rcx-button rcx-button-group__item"
-                type="button"
+              <span
+                class="rcx-button--content"
               >
-                <span
-                  class="rcx-button--content"
-                >
-                  Back
-                </span>
-              </button>
-              <button
-                class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item"
-                type="submit"
+                Back
+              </span>
+            </button>
+            <button
+              class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item"
+              type="submit"
+            >
+              <span
+                class="rcx-button--content"
               >
-                <span
-                  class="rcx-button--content"
-                >
-                  Next
-                </span>
-              </button>
-            </div>
+                Next
+              </span>
+            </button>
           </div>
         </div>
       </div>
@@ -52,38 +50,36 @@ exports[`MessageStep renders WithDefaultValues without crashing 1`] = `
     <div
       class="rcx-box rcx-box--full rcx-css-162rsse"
     >
-      <div>
+      <div
+        data-testid="message-form"
+      >
         <div
-          data-testid="message-form"
+          class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
         >
           <div
-            class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
+            class="rcx-button-group rcx-button-group--align-start"
+            role="group"
           >
-            <div
-              class="rcx-button-group rcx-button-group--align-start"
-              role="group"
+            <button
+              class="rcx-box rcx-box--full rcx-button rcx-button-group__item"
+              type="button"
             >
-              <button
-                class="rcx-box rcx-box--full rcx-button rcx-button-group__item"
-                type="button"
+              <span
+                class="rcx-button--content"
               >
-                <span
-                  class="rcx-button--content"
-                >
-                  Back
-                </span>
-              </button>
-              <button
-                class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item"
-                type="submit"
+                Back
+              </span>
+            </button>
+            <button
+              class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item"
+              type="submit"
+            >
+              <span
+                class="rcx-button--content"
               >
-                <span
-                  class="rcx-button--content"
-                >
-                  Next
-                </span>
-              </button>
-            </div>
+                Next
+              </span>
+            </button>
           </div>
         </div>
       </div>
diff --git a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/__snapshots__/RecipientStep.spec.tsx.snap b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/__snapshots__/RecipientStep.spec.tsx.snap
index 7a42710074c6c..8141b4b06a536 100644
--- a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/__snapshots__/RecipientStep.spec.tsx.snap
+++ b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/__snapshots__/RecipientStep.spec.tsx.snap
@@ -6,28 +6,26 @@ exports[`RecipientStep renders Default without crashing 1`] = `
     <div
       class="rcx-box rcx-box--full rcx-css-162rsse"
     >
-      <div>
+      <div
+        data-testid="recipient-form"
+      >
         <div
-          data-testid="recipient-form"
+          class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
         >
           <div
-            class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
+            class="rcx-button-group rcx-button-group--align-start"
+            role="group"
           >
-            <div
-              class="rcx-button-group rcx-button-group--align-start"
-              role="group"
+            <button
+              class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item"
+              type="submit"
             >
-              <button
-                class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item"
-                type="submit"
+              <span
+                class="rcx-button--content"
               >
-                <span
-                  class="rcx-button--content"
-                >
-                  Next
-                </span>
-              </button>
-            </div>
+                Next
+              </span>
+            </button>
           </div>
         </div>
       </div>
@@ -42,28 +40,26 @@ exports[`RecipientStep renders WithDefaultValues without crashing 1`] = `
     <div
       class="rcx-box rcx-box--full rcx-css-162rsse"
     >
-      <div>
+      <div
+        data-testid="recipient-form"
+      >
         <div
-          data-testid="recipient-form"
+          class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
         >
           <div
-            class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
+            class="rcx-button-group rcx-button-group--align-start"
+            role="group"
           >
-            <div
-              class="rcx-button-group rcx-button-group--align-start"
-              role="group"
+            <button
+              class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item"
+              type="submit"
             >
-              <button
-                class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item"
-                type="submit"
+              <span
+                class="rcx-button--content"
               >
-                <span
-                  class="rcx-button--content"
-                >
-                  Next
-                </span>
-              </button>
-            </div>
+                Next
+              </span>
+            </button>
           </div>
         </div>
       </div>
diff --git a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/__snapshots__/RepliesStep.spec.tsx.snap b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/__snapshots__/RepliesStep.spec.tsx.snap
index a23b2bbfa7f1e..e3249db6dbd08 100644
--- a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/__snapshots__/RepliesStep.spec.tsx.snap
+++ b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/__snapshots__/RepliesStep.spec.tsx.snap
@@ -6,38 +6,36 @@ exports[`RepliesStep renders Default without crashing 1`] = `
     <div
       class="rcx-box rcx-box--full rcx-css-162rsse"
     >
-      <div>
+      <div
+        data-testid="replies-form"
+      >
         <div
-          data-testid="replies-form"
+          class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
         >
           <div
-            class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
+            class="rcx-button-group rcx-button-group--align-start"
+            role="group"
           >
-            <div
-              class="rcx-button-group rcx-button-group--align-start"
-              role="group"
+            <button
+              class="rcx-box rcx-box--full rcx-button rcx-button-group__item"
+              type="button"
             >
-              <button
-                class="rcx-box rcx-box--full rcx-button rcx-button-group__item"
-                type="button"
+              <span
+                class="rcx-button--content"
               >
-                <span
-                  class="rcx-button--content"
-                >
-                  Back
-                </span>
-              </button>
-              <button
-                class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item"
-                type="submit"
+                Back
+              </span>
+            </button>
+            <button
+              class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item"
+              type="submit"
+            >
+              <span
+                class="rcx-button--content"
               >
-                <span
-                  class="rcx-button--content"
-                >
-                  Next
-                </span>
-              </button>
-            </div>
+                Next
+              </span>
+            </button>
           </div>
         </div>
       </div>
@@ -52,38 +50,36 @@ exports[`RepliesStep renders WithDefaultValues without crashing 1`] = `
     <div
       class="rcx-box rcx-box--full rcx-css-162rsse"
     >
-      <div>
+      <div
+        data-testid="replies-form"
+      >
         <div
-          data-testid="replies-form"
+          class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
         >
           <div
-            class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
+            class="rcx-button-group rcx-button-group--align-start"
+            role="group"
           >
-            <div
-              class="rcx-button-group rcx-button-group--align-start"
-              role="group"
+            <button
+              class="rcx-box rcx-box--full rcx-button rcx-button-group__item"
+              type="button"
             >
-              <button
-                class="rcx-box rcx-box--full rcx-button rcx-button-group__item"
-                type="button"
+              <span
+                class="rcx-button--content"
               >
-                <span
-                  class="rcx-button--content"
-                >
-                  Back
-                </span>
-              </button>
-              <button
-                class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item"
-                type="submit"
+                Back
+              </span>
+            </button>
+            <button
+              class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item"
+              type="submit"
+            >
+              <span
+                class="rcx-button--content"
               >
-                <span
-                  class="rcx-button--content"
-                >
-                  Next
-                </span>
-              </button>
-            </div>
+                Next
+              </span>
+            </button>
           </div>
         </div>
       </div>
diff --git a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/__snapshots__/ReviewStep.spec.tsx.snap b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/__snapshots__/ReviewStep.spec.tsx.snap
index b065e27062f08..9d3e1c3150758 100644
--- a/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/__snapshots__/ReviewStep.spec.tsx.snap
+++ b/apps/meteor/client/components/Omnichannel/OutboundMessage/components/OutboundMessageWizard/steps/__snapshots__/ReviewStep.spec.tsx.snap
@@ -6,24 +6,23 @@ exports[`ReviewStep renders Default without crashing 1`] = `
     <div
       class="rcx-box rcx-box--full rcx-css-162rsse"
     >
-      <div>
+      <div
+        class="rcx-box rcx-box--full rcx-css-ogq2n4"
+      >
         <div
-          class="rcx-box rcx-box--full rcx-css-1ir42z0"
-        >
-          <div
-            agentname="John Doe"
-            agentusername="johndoe"
-            contactname="Jane Smith"
-            data-testid="outbound-message-preview"
-            departmentname="Support"
-            providername="Rocket.Chat"
-            providertype="phone"
-            recipient="+0987654321"
-            sender="+1234567890"
-            template="[object Object]"
-            templateparameters="[object Object]"
-          />
-        </div>
+          agentname="John Doe"
+          agentusername="johndoe"
+          contactname="Jane Smith"
+          data-testid="outbound-message-preview"
+          departmentname="Support"
+          maxheight="500"
+          providername="Rocket.Chat"
+          providertype="phone"
+          recipient="+0987654321"
+          sender="+1234567890"
+          template="[object Object]"
+          templateparameters="[object Object]"
+        />
         <div
           class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
         >
diff --git a/apps/meteor/client/components/Omnichannel/OutboundMessage/modals/OutboundMessageModal/OutboundMessageModal.tsx b/apps/meteor/client/components/Omnichannel/OutboundMessage/modals/OutboundMessageModal/OutboundMessageModal.tsx
index 7ca5d4af946dc..8c81a0dbb4a9e 100644
--- a/apps/meteor/client/components/Omnichannel/OutboundMessage/modals/OutboundMessageModal/OutboundMessageModal.tsx
+++ b/apps/meteor/client/components/Omnichannel/OutboundMessage/modals/OutboundMessageModal/OutboundMessageModal.tsx
@@ -46,13 +46,13 @@ const OutboundMessageModal = ({ defaultValues, onClose }: OutboundMessageModalPr
 
 	return (
 		<ModalBackdrop bg='transparent' onClick={(e) => e.stopPropagation()} onMouseDown={(e) => e.stopPropagation()} onKeyDown={handleKeyDown}>
-			<Modal aria-labelledby={modalId} display={isClosing ? 'none' : 'block'}>
+			<Modal aria-labelledby={modalId} display={isClosing ? 'none' : undefined}>
 				<ModalHeader>
 					<ModalTitle id={modalId}>{t('Outbound_message')}</ModalTitle>
 					<ModalClose aria-label={t('Close')} onClick={() => setClosingConfirmation(true)} />
 				</ModalHeader>
 
-				<ModalContent pbe={16}>
+				<ModalContent pbe={16} height='100%'>
 					<OutboundMessageWizard defaultValues={defaultValues} onSuccess={onClose} onError={onClose} />
 				</ModalContent>
 			</Modal>
diff --git a/packages/ui-client/src/components/Wizard/Wizard.tsx b/packages/ui-client/src/components/Wizard/Wizard.tsx
index 4630398d024d4..54d2eb8fee435 100644
--- a/packages/ui-client/src/components/Wizard/Wizard.tsx
+++ b/packages/ui-client/src/components/Wizard/Wizard.tsx
@@ -1,16 +1,17 @@
-import { memo, type ReactNode } from 'react';
+import { Box } from '@rocket.chat/fuselage';
+import { ComponentProps, memo, type ReactNode } from 'react';
 
 import { WizardContext } from './WizardContext';
 import type { WizardAPI } from './WizardContext';
 
-type WizardProps = {
+type WizardProps = ComponentProps<typeof Box> & {
 	api: WizardAPI;
 	children: ReactNode;
 };
 
-const Wizard = ({ children, api }: WizardProps) => (
+const Wizard = ({ children, api, ...props }: WizardProps) => (
 	<WizardContext.Provider value={api}>
-		<div className='steps-wizard'>{children}</div>
+		<Box {...props}>{children}</Box>
 	</WizardContext.Provider>
 );
 
diff --git a/packages/ui-client/src/components/Wizard/WizardContent.tsx b/packages/ui-client/src/components/Wizard/WizardContent.tsx
index e5211b2933a95..0133eb275956f 100644
--- a/packages/ui-client/src/components/Wizard/WizardContent.tsx
+++ b/packages/ui-client/src/components/Wizard/WizardContent.tsx
@@ -14,7 +14,7 @@ const WizardContent = ({ id, children }: WizardContentProps) => {
 		return null;
 	}
 
-	return <div>{children}</div>;
+	return children;
 };
 
 export default memo(WizardContent);
diff --git a/packages/ui-client/src/components/Wizard/__snapshots__/Wizard.spec.tsx.snap b/packages/ui-client/src/components/Wizard/__snapshots__/Wizard.spec.tsx.snap
index 9ccdb31495766..8a8c5ff408a72 100644
--- a/packages/ui-client/src/components/Wizard/__snapshots__/Wizard.spec.tsx.snap
+++ b/packages/ui-client/src/components/Wizard/__snapshots__/Wizard.spec.tsx.snap
@@ -7,7 +7,7 @@ exports[`renders BasicWizard without crashing 1`] = `
       class="rcx-box rcx-box--full"
     >
       <div
-        class="steps-wizard"
+        class="rcx-box rcx-box--full"
       >
         <div
           class="rcx-box rcx-box--full rcx-tabs--with-divider rcx-tabs rcx-css-1tbw8nv"
@@ -43,44 +43,42 @@ exports[`renders BasicWizard without crashing 1`] = `
             </div>
           </div>
         </div>
-        <div>
+        <div
+          class="rcx-box rcx-box--full rcx-css-4q8ri8"
+        >
           <div
-            class="rcx-box rcx-box--full rcx-css-4q8ri8"
+            class="rcx-states"
           >
-            <div
-              class="rcx-states"
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-states__icon rcx-icon--name-magnifier rcx-icon rcx-css-d884y5"
             >
-              <i
-                aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-states__icon rcx-icon--name-magnifier rcx-icon rcx-css-d884y5"
-              >
-                
-              </i>
-              <h3
-                class="rcx-states__title"
-              >
-                First step
-              </h3>
-            </div>
+              
+            </i>
+            <h3
+              class="rcx-states__title"
+            >
+              First step
+            </h3>
           </div>
+        </div>
+        <div
+          class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
+        >
           <div
-            class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
+            class="rcx-button-group rcx-button-group--align-start"
+            role="group"
           >
-            <div
-              class="rcx-button-group rcx-button-group--align-start"
-              role="group"
+            <button
+              class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item"
+              type="button"
             >
-              <button
-                class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item"
-                type="button"
+              <span
+                class="rcx-button--content"
               >
-                <span
-                  class="rcx-button--content"
-                >
-                  Next
-                </span>
-              </button>
-            </div>
+                Next
+              </span>
+            </button>
           </div>
         </div>
       </div>
@@ -96,7 +94,7 @@ exports[`renders OrderedTabsWizard without crashing 1`] = `
       class="rcx-box rcx-box--full"
     >
       <div
-        class="steps-wizard"
+        class="rcx-box rcx-box--full"
       >
         <div
           class="rcx-box rcx-box--full rcx-tabs--with-divider rcx-tabs rcx-css-1tbw8nv"
@@ -132,44 +130,42 @@ exports[`renders OrderedTabsWizard without crashing 1`] = `
             </div>
           </div>
         </div>
-        <div>
+        <div
+          class="rcx-box rcx-box--full rcx-css-4q8ri8"
+        >
           <div
-            class="rcx-box rcx-box--full rcx-css-4q8ri8"
+            class="rcx-states"
           >
-            <div
-              class="rcx-states"
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-states__icon rcx-icon--name-magnifier rcx-icon rcx-css-d884y5"
             >
-              <i
-                aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-states__icon rcx-icon--name-magnifier rcx-icon rcx-css-d884y5"
-              >
-                
-              </i>
-              <h3
-                class="rcx-states__title"
-              >
-                First step
-              </h3>
-            </div>
+              
+            </i>
+            <h3
+              class="rcx-states__title"
+            >
+              First step
+            </h3>
           </div>
+        </div>
+        <div
+          class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
+        >
           <div
-            class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
+            class="rcx-button-group rcx-button-group--align-start"
+            role="group"
           >
-            <div
-              class="rcx-button-group rcx-button-group--align-start"
-              role="group"
+            <button
+              class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item"
+              type="button"
             >
-              <button
-                class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item"
-                type="button"
+              <span
+                class="rcx-button--content"
               >
-                <span
-                  class="rcx-button--content"
-                >
-                  Next
-                </span>
-              </button>
-            </div>
+                Next
+              </span>
+            </button>
           </div>
         </div>
       </div>
diff --git a/packages/ui-client/src/components/Wizard/__snapshots__/WizardActions.spec.tsx.snap b/packages/ui-client/src/components/Wizard/__snapshots__/WizardActions.spec.tsx.snap
index cb0259b40eba3..e1ed486f0a3bc 100644
--- a/packages/ui-client/src/components/Wizard/__snapshots__/WizardActions.spec.tsx.snap
+++ b/packages/ui-client/src/components/Wizard/__snapshots__/WizardActions.spec.tsx.snap
@@ -7,7 +7,7 @@ exports[`renders Default without crashing 1`] = `
       class="rcx-box rcx-box--full rcx-css-1lvbc7v"
     >
       <div
-        class="steps-wizard"
+        class="rcx-box rcx-box--full"
       >
         <div
           class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
@@ -52,7 +52,7 @@ exports[`renders WithAnnotation without crashing 1`] = `
       class="rcx-box rcx-box--full rcx-css-1lvbc7v"
     >
       <div
-        class="steps-wizard"
+        class="rcx-box rcx-box--full"
       >
         <div
           class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"