diff --git a/apps/rule-manager/client/src/ts/components/icons/index.ts b/apps/rule-manager/client/src/ts/components/icons/index.ts
index 2c306ea2e..db8b9e532 100644
--- a/apps/rule-manager/client/src/ts/components/icons/index.ts
+++ b/apps/rule-manager/client/src/ts/components/icons/index.ts
@@ -39,6 +39,8 @@ import { icon as sortRight } from '@elastic/eui/src/components/icon/assets/sortR
 import { icon as fullScreenExit } from '@elastic/eui/src/components/icon/assets/fullScreenExit';
 import { icon as tokenString } from '@elastic/eui/src/components/icon/assets/tokenString';
 import { icon as beaker } from '@elastic/eui/src/components/icon/assets/beaker';
+import { icon as menuLeft } from '@elastic/eui/src/components/icon/assets/menuLeft';
+import { icon as menuRight } from '@elastic/eui/src/components/icon/assets/menuRight';
 
 const cachedIcons = {
 	apps,
@@ -81,6 +83,8 @@ const cachedIcons = {
 	expandMini,
 	tokenString,
 	beaker,
+	menuLeft,
+	menuRight,
 };
 
 appendIconComponentCache(cachedIcons);
diff --git a/apps/rule-manager/client/src/ts/components/pages/Rules.tsx b/apps/rule-manager/client/src/ts/components/pages/Rules.tsx
index daeb66999..356b0228d 100644
--- a/apps/rule-manager/client/src/ts/components/pages/Rules.tsx
+++ b/apps/rule-manager/client/src/ts/components/pages/Rules.tsx
@@ -7,6 +7,7 @@ import {
 	EuiToolTip,
 	EuiSpacer,
 	EuiComboBox,
+	EuiResizableContainer,
 } from '@elastic/eui';
 import { SortColumns, useRules } from '../hooks/useRules';
 import { StandaloneRuleForm } from '../RuleForm';
@@ -20,6 +21,7 @@ import { useDebouncedValue } from '../hooks/useDebounce';
 import { FullHeightContentWithFixedHeader } from '../layout/FullHeightContentWithFixedHeader';
 import { Tag, TagsContext } from '../context/tags';
 import { ruleTypeOptions } from '../RuleContent';
+import { css } from '@emotion/react';
 
 export const useCreateEditPermissions = () => {
 	const permissions = useContext(PageContext).permissions;
@@ -229,45 +231,68 @@ export const Rules = () => {
 		</>
 	);
 
+	const formIsOpen = formMode !== 'closed';
+
 	return (
-		<EuiFlexGroup direction="row" style={{ height: '100%' }}>
-			<FullHeightContentWithFixedHeader
-				header={tableHeader}
-				content={tableContent}
-			/>
-			{formMode !== 'closed' && (
-				<EuiFlexItem>
-					{rowSelection.size > 1 ? (
-						<RuleFormBatchEdit
-							onClose={() => {
-								setFormMode('closed');
-								fetchRules(pageIndex, queryStr, sortColumns);
-							}}
-							onUpdate={() => fetchRules(pageIndex, queryStr, sortColumns)}
-							ruleIds={rowSelectionArray}
+		<EuiResizableContainer style={{ height: '100%' }}>
+			{(EuiResizablePanel, EuiResizableButton) => (
+				<>
+					<EuiResizablePanel
+						initialSize={formIsOpen ? 60 : 100}
+						minSize="300px"
+						mode={'collapsible'}
+						paddingSize="none"
+						css={css`
+							padding-right: 8px;
+						`}
+					>
+						<FullHeightContentWithFixedHeader
+							header={tableHeader}
+							content={tableContent}
 						/>
-					) : (
-						<StandaloneRuleForm
-							onClose={() => {
-								setFormMode('closed');
-								fetchRules(pageIndex, queryStr, sortColumns);
-							}}
-							onUpdate={(id) => {
-								if (id === currentRuleId) {
-									return;
-								}
+					</EuiResizablePanel>
+					{...formIsOpen ? [<EuiResizableButton />] : []}
+					<EuiResizablePanel
+						initialSize={formIsOpen ? 40 : 0}
+						minSize="400px"
+						mode="main"
+						paddingSize="none"
+						css={css`
+							padding-left: 8px;
+						`}
+					>
+						{rowSelection.size > 1 ? (
+							<RuleFormBatchEdit
+								onClose={() => {
+									setFormMode('closed');
+									fetchRules(pageIndex, queryStr, sortColumns);
+								}}
+								onUpdate={() => fetchRules(pageIndex, queryStr, sortColumns)}
+								ruleIds={rowSelectionArray}
+							/>
+						) : (
+							<StandaloneRuleForm
+								onClose={() => {
+									setFormMode('closed');
+									fetchRules(pageIndex, queryStr, sortColumns);
+								}}
+								onUpdate={(id) => {
+									if (id === currentRuleId) {
+										return;
+									}
 
-								fetchRules(pageIndex, queryStr, sortColumns);
-								setCurrentRuleId(id);
-								if (formMode === 'create') {
-									setFormMode('edit');
-								}
-							}}
-							ruleId={currentRuleId}
-						/>
-					)}
-				</EuiFlexItem>
+									fetchRules(pageIndex, queryStr, sortColumns);
+									setCurrentRuleId(id);
+									if (formMode === 'create') {
+										setFormMode('edit');
+									}
+								}}
+								ruleId={currentRuleId}
+							/>
+						)}
+					</EuiResizablePanel>
+				</>
 			)}
-		</EuiFlexGroup>
+		</EuiResizableContainer>
 	);
 };