diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.tsx b/frontend/src/component/common/FormTemplate/FormTemplate.tsx
index ec397b671a1..4cf226892e9 100644
--- a/frontend/src/component/common/FormTemplate/FormTemplate.tsx
+++ b/frontend/src/component/common/FormTemplate/FormTemplate.tsx
@@ -34,7 +34,6 @@ const StyledContainer = styled('section', {
     minHeight: modal ? '100vh' : '80vh',
     borderRadius: modal ? 0 : theme.spacing(2),
     width: '100%',
-    height: '100%',
     display: 'flex',
     margin: '0 auto',
     [theme.breakpoints.down(1100)]: {
diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectSegments/ProjectSegments.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectSegments/ProjectSegments.tsx
index 30cc0c570be..90c9449f62f 100644
--- a/frontend/src/component/project/Project/ProjectSettings/ProjectSegments/ProjectSegments.tsx
+++ b/frontend/src/component/project/Project/ProjectSettings/ProjectSegments/ProjectSegments.tsx
@@ -41,7 +41,7 @@ export const ProjectSegments = () => {
                         onClose={() => navigate(GO_BACK)}
                         label="Create segment"
                     >
-                        <CreateSegment />
+                        <CreateSegment modal />
                     </SidebarModal>
                 }
             />
@@ -53,7 +53,7 @@ export const ProjectSegments = () => {
                         onClose={() => navigate(GO_BACK)}
                         label="Edit segment"
                     >
-                        <EditSegment />
+                        <EditSegment modal />
                     </SidebarModal>
                 }
             />
diff --git a/frontend/src/component/segments/CreateSegment/CreateSegment.tsx b/frontend/src/component/segments/CreateSegment/CreateSegment.tsx
index 388ce665237..aa2593e50c9 100644
--- a/frontend/src/component/segments/CreateSegment/CreateSegment.tsx
+++ b/frontend/src/component/segments/CreateSegment/CreateSegment.tsx
@@ -18,7 +18,11 @@ import { SEGMENT_CREATE_BTN_ID } from 'utils/testIds';
 import { useSegmentLimits } from 'hooks/api/getters/useSegmentLimits/useSegmentLimits';
 import { useOptionalPathParam } from 'hooks/useOptionalPathParam';
 
-export const CreateSegment = () => {
+interface ICreateSegmentProps {
+    modal?: boolean;
+}
+
+export const CreateSegment = ({ modal }: ICreateSegmentProps) => {
     const projectId = useOptionalPathParam('projectId');
     const { uiConfig } = useUiConfig();
     const { setToastData, setToastApiError } = useToast();
@@ -87,6 +91,7 @@ export const CreateSegment = () => {
     return (
         <FormTemplate
             loading={loading}
+            modal={modal}
             title="Create segment"
             description={segmentsFormDescription}
             documentationLink={segmentsDocsLink}
diff --git a/frontend/src/component/segments/EditSegment/EditSegment.tsx b/frontend/src/component/segments/EditSegment/EditSegment.tsx
index 68bcdaea1f3..37a2a3a1e08 100644
--- a/frontend/src/component/segments/EditSegment/EditSegment.tsx
+++ b/frontend/src/component/segments/EditSegment/EditSegment.tsx
@@ -20,7 +20,11 @@ import { SEGMENT_SAVE_BTN_ID } from 'utils/testIds';
 import { useSegmentLimits } from 'hooks/api/getters/useSegmentLimits/useSegmentLimits';
 import { useOptionalPathParam } from 'hooks/useOptionalPathParam';
 
-export const EditSegment = () => {
+interface IEditSegmentProps {
+    modal?: boolean;
+}
+
+export const EditSegment = ({ modal }: IEditSegmentProps) => {
     const projectId = useOptionalPathParam('projectId');
     const segmentId = useRequiredPathParam('segmentId');
     const { segment } = useSegment(Number(segmentId));
@@ -91,6 +95,7 @@ export const EditSegment = () => {
     return (
         <FormTemplate
             loading={loading}
+            modal={modal}
             title="Edit segment"
             description={segmentsFormDescription}
             documentationLink={segmentsDocsLink}