diff --git a/frontend/src/component/releases/ReleasePlanTemplate/CreateReleasePlanTemplate.tsx b/frontend/src/component/releases/ReleasePlanTemplate/CreateReleasePlanTemplate.tsx
index ef52aff4ded8..08aae761c84c 100644
--- a/frontend/src/component/releases/ReleasePlanTemplate/CreateReleasePlanTemplate.tsx
+++ b/frontend/src/component/releases/ReleasePlanTemplate/CreateReleasePlanTemplate.tsx
@@ -12,6 +12,12 @@ import { scrollToTop } from 'component/common/util';
 import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { useUiFlag } from 'hooks/useUiFlag';
+import ReleaseTemplateIcon from '@mui/icons-material/DashboardOutlined';
+import type { IReleasePlanMilestonePayload } from 'interfaces/releasePlans';
+import { MilestoneList } from './MilestoneList';
+import { useState } from 'react';
+import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
+import { ReleasePlanTemplateAddStrategyForm } from './ReleasePlanTemplateAddStrategyForm';
 
 const StyledForm = styled('form')(() => ({
     display: 'flex',
@@ -29,12 +35,21 @@ const StyledCancelButton = styled(Button)(({ theme }) => ({
     marginLeft: theme.spacing(3),
 }));
 
+const StyledButton = styled(Button)(({ theme }) => ({
+    marginTop: theme.spacing(1),
+    maxWidth: theme.spacing(20),
+}));
+
 export const CreateReleasePlanTemplate = () => {
     const releasePlansEnabled = useUiFlag('releasePlans');
     usePageTitle('Create release plan template');
     const { setToastApiError, setToastData } = useToast();
     const navigate = useNavigate();
     const { createReleasePlanTemplate } = useReleasePlanTemplatesApi();
+    const [milestones, setMilestones] = useState<
+        IReleasePlanMilestonePayload[]
+    >([{ name: 'Milestone 1', sortOrder: 0 }]);
+    const [addStrategyOpen, setAddStrategyOpen] = useState<boolean>(false);
     const {
         name,
         setName,
@@ -57,7 +72,10 @@ export const CreateReleasePlanTemplate = () => {
         if (isValid) {
             const payload = getTemplatePayload();
             try {
-                const template = await createReleasePlanTemplate(payload);
+                const template = await createReleasePlanTemplate({
+                    ...payload,
+                    milestones,
+                });
                 scrollToTop();
                 setToastData({
                     type: 'success',
@@ -70,33 +88,84 @@ export const CreateReleasePlanTemplate = () => {
         }
     };
 
+    const updateMilestone = (
+        index: number,
+        milestone: IReleasePlanMilestonePayload,
+    ) => {
+        /*
+        setMilestones(() => {
+            return milestones.map((m, i) => {
+                if (i === index) {
+                    return milestone;
+                }
+                return m;
+            });
+        });*/
+    };
+
+    const onSidebarClose = () => {};
+
     if (!releasePlansEnabled) {
         return null;
     }
 
     return (
-        <>
-            <FormTemplate
-                title='Create release plan template'
-                description='Create a release plan template to make it easier for you and your team to release features.'
+        <FormTemplate
+            title='Create release plan template'
+            documentationIcon={<ReleaseTemplateIcon />}
+            description='Create a release plan template to make it easier for you and your team to release features.'
+        >
+            <StyledForm onSubmit={handleSubmit}>
+                <TemplateForm
+                    name={name}
+                    setName={setName}
+                    description={description}
+                    setDescription={setDescription}
+                    errors={errors}
+                    clearErrors={clearErrors}
+                />
+                <MilestoneList
+                    milestones={milestones}
+                    setAddStrategyOpen={setAddStrategyOpen}
+                    errors={errors}
+                    clearErrors={clearErrors}
+                />
+                <StyledButton
+                    variant='text'
+                    color='primary'
+                    onClick={(e) => {
+                        e.preventDefault();
+                        setMilestones([
+                            ...milestones,
+                            {
+                                name: `Milestone ${milestones.length + 1}`,
+                                sortOrder: milestones.length,
+                            },
+                        ]);
+                    }}
+                >
+                    + Add milestone
+                </StyledButton>
+                <StyledButtonContainer>
+                    <CreateButton name='template' permission={ADMIN} />
+                    <StyledCancelButton onClick={handleCancel}>
+                        Cancel
+                    </StyledCancelButton>
+                </StyledButtonContainer>
+            </StyledForm>
+            <SidebarModal
+                label='Add strategy to template milestone'
+                onClose={onSidebarClose}
+                open={addStrategyOpen}
             >
-                <StyledForm onSubmit={handleSubmit}>
-                    <TemplateForm
-                        name={name}
-                        setName={setName}
-                        description={description}
-                        setDescription={setDescription}
-                        errors={errors}
-                        clearErrors={clearErrors}
+                <>
+                    <ReleasePlanTemplateAddStrategyForm
+                        onCancel={() => {
+                            setAddStrategyOpen(false);
+                        }}
                     />
-                    <StyledButtonContainer>
-                        <CreateButton name='template' permission={ADMIN} />
-                        <StyledCancelButton onClick={handleCancel}>
-                            Cancel
-                        </StyledCancelButton>
-                    </StyledButtonContainer>
-                </StyledForm>
-            </FormTemplate>
-        </>
+                </>
+            </SidebarModal>
+        </FormTemplate>
     );
 };
diff --git a/frontend/src/component/releases/ReleasePlanTemplate/EditReleasePlanTemplate.tsx b/frontend/src/component/releases/ReleasePlanTemplate/EditReleasePlanTemplate.tsx
index ccdf3ff2faca..0983e03fe351 100644
--- a/frontend/src/component/releases/ReleasePlanTemplate/EditReleasePlanTemplate.tsx
+++ b/frontend/src/component/releases/ReleasePlanTemplate/EditReleasePlanTemplate.tsx
@@ -5,13 +5,17 @@ import { useReleasePlanTemplate } from 'hooks/api/getters/useReleasePlanTemplate
 import FormTemplate from 'component/common/FormTemplate/FormTemplate';
 import { useTemplateForm } from '../hooks/useTemplateForm';
 import { TemplateForm } from './TemplateForm';
-import { Box, Button, Card, styled } from '@mui/material';
+import { Button, styled } from '@mui/material';
 import { UpdateButton } from 'component/common/UpdateButton/UpdateButton';
 import { ADMIN } from '@server/types/permissions';
 import { useNavigate } from 'react-router-dom';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import useToast from 'hooks/useToast';
 import useReleasePlanTemplatesApi from 'hooks/api/actions/useReleasePlanTemplatesApi/useReleasePlanTemplatesApi';
+import { MilestoneList } from './MilestoneList';
+import { useState } from 'react';
+import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
+import { ReleasePlanTemplateAddStrategyForm } from './ReleasePlanTemplateAddStrategyForm';
 
 const StyledForm = styled('form')(() => ({
     display: 'flex',
@@ -19,33 +23,6 @@ const StyledForm = styled('form')(() => ({
     height: '100%',
 }));
 
-const StyledMilestoneCard = styled(Card)(({ theme }) => ({
-    marginTop: theme.spacing(2),
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    boxShadow: 'none',
-    border: `1px solid ${theme.palette.divider}`,
-    [theme.breakpoints.down('sm')]: {
-        justifyContent: 'center',
-    },
-    transition: 'background-color 0.2s ease-in-out',
-    backgroundColor: theme.palette.background.default,
-    '&:hover': {
-        backgroundColor: theme.palette.neutral.light,
-    },
-    borderRadius: theme.shape.borderRadiusMedium,
-}));
-
-const StyledMilestoneCardBody = styled(Box)(({ theme }) => ({
-    padding: theme.spacing(3, 2),
-}));
-
-const StyledMilestoneCardTitle = styled('span')(({ theme }) => ({
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.fontSizes.bodySize,
-}));
-
 const StyledButtonContainer = styled('div')(() => ({
     marginTop: 'auto',
     display: 'flex',
@@ -59,6 +36,7 @@ const StyledCancelButton = styled(Button)(({ theme }) => ({
 export const EditReleasePlanTemplate = () => {
     const releasePlansEnabled = useUiFlag('releasePlans');
     const templateId = useRequiredPathParam('templateId');
+    const [addStrategyOpen, setAddStrategyOpen] = useState<boolean>(false);
     const { template, loading, error, refetch } =
         useReleasePlanTemplate(templateId);
     usePageTitle(`Edit template: ${template.name}`);
@@ -97,44 +75,54 @@ export const EditReleasePlanTemplate = () => {
             }
         }
     };
+    const onSidebarClose = () => {};
 
     if (!releasePlansEnabled) {
         return null;
     }
 
     return (
-        <>
-            <FormTemplate
-                title={`Edit template ${template.name}`}
-                description='Edit a release plan template that makes it easier for you and your team to release features.'
+        <FormTemplate
+            title={`Edit template ${template.name}`}
+            description='Edit a release plan template that makes it easier for you and your team to release features.'
+        >
+            <StyledForm onSubmit={handleSubmit}>
+                <TemplateForm
+                    name={name}
+                    setName={setName}
+                    description={description}
+                    setDescription={setDescription}
+                    errors={errors}
+                    clearErrors={clearErrors}
+                />
+
+                <MilestoneList
+                    milestones={template.milestones}
+                    setAddStrategyOpen={setAddStrategyOpen}
+                    errors={errors}
+                    clearErrors={clearErrors}
+                />
+
+                <StyledButtonContainer>
+                    <UpdateButton name='template' permission={ADMIN} />
+                    <StyledCancelButton onClick={handleCancel}>
+                        Cancel
+                    </StyledCancelButton>
+                </StyledButtonContainer>
+            </StyledForm>
+            <SidebarModal
+                label='Add strategy to template milestone'
+                onClose={onSidebarClose}
+                open={addStrategyOpen}
             >
-                <StyledForm onSubmit={handleSubmit}>
-                    <TemplateForm
-                        name={name}
-                        setName={setName}
-                        description={description}
-                        setDescription={setDescription}
-                        errors={errors}
-                        clearErrors={clearErrors}
+                <>
+                    <ReleasePlanTemplateAddStrategyForm
+                        onCancel={() => {
+                            setAddStrategyOpen(false);
+                        }}
                     />
-
-                    {template.milestones.map((milestone) => (
-                        <StyledMilestoneCard key={milestone.id}>
-                            <StyledMilestoneCardBody>
-                                <StyledMilestoneCardTitle>
-                                    {milestone.name}
-                                </StyledMilestoneCardTitle>
-                            </StyledMilestoneCardBody>
-                        </StyledMilestoneCard>
-                    ))}
-                    <StyledButtonContainer>
-                        <UpdateButton name='template' permission={ADMIN} />
-                        <StyledCancelButton onClick={handleCancel}>
-                            Cancel
-                        </StyledCancelButton>
-                    </StyledButtonContainer>
-                </StyledForm>
-            </FormTemplate>
-        </>
+                </>
+            </SidebarModal>
+        </FormTemplate>
     );
 };
diff --git a/frontend/src/component/releases/ReleasePlanTemplate/MilestoneCard.tsx b/frontend/src/component/releases/ReleasePlanTemplate/MilestoneCard.tsx
new file mode 100644
index 000000000000..3440ca438b88
--- /dev/null
+++ b/frontend/src/component/releases/ReleasePlanTemplate/MilestoneCard.tsx
@@ -0,0 +1,109 @@
+import { StyledMilestoneCard, StyledMilestoneCardBody } from './TemplateForm';
+import Input from 'component/common/Input/Input';
+import { Button, Grid, styled } from '@mui/material';
+import Edit from '@mui/icons-material/Edit';
+import type { IReleasePlanMilestonePayload } from 'interfaces/releasePlans';
+import { useEffect, useState } from 'react';
+import { useTheme } from '@mui/material';
+
+const StyledEditIcon = styled(Edit)(({ theme }) => ({
+    cursor: 'pointer',
+    marginTop: theme.spacing(-0.25),
+    marginLeft: theme.spacing(0.5),
+    height: theme.spacing(2.5),
+    width: theme.spacing(2.5),
+    color: theme.palette.text.secondary,
+}));
+
+const StyledGridItem = styled(Grid)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+}));
+
+const StyledInput = styled(Input)(({ theme }) => ({
+    width: '100%',
+}));
+
+const StyledMilestoneCardTitle = styled('span')(({ theme }) => ({
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSizes.bodySize,
+}));
+
+interface IMilestoneCard {
+    index: number;
+    milestone: IReleasePlanMilestonePayload;
+    showAddStrategyDialog: (index: number) => void;
+    errors: { [key: string]: string };
+    clearErrors: () => void;
+}
+
+export const MilestoneCard = ({
+    index,
+    milestone,
+    showAddStrategyDialog,
+    errors,
+    clearErrors,
+}: IMilestoneCard) => {
+    const [milestoneName, setMilestoneName] = useState<string>(milestone.name);
+    const [editMode, setEditMode] = useState<boolean>(false);
+    const theme = useTheme();
+
+    useEffect(() => {
+        milestone.name = milestoneName;
+    }, [milestoneName]);
+
+    const editMilestoneNameClick = () => {
+        setEditMode(true);
+    };
+
+    return (
+        <StyledMilestoneCard>
+            <StyledMilestoneCardBody>
+                <Grid container>
+                    <StyledGridItem item xs={10} md={10}>
+                        {editMode && (
+                            <StyledInput
+                                label=''
+                                value={milestoneName}
+                                onChange={(e) =>
+                                    setMilestoneName(e.target.value)
+                                }
+                                error={Boolean(errors?.name)}
+                                errorText={errors?.name}
+                                onFocus={() => clearErrors()}
+                                onBlur={() => setEditMode(false)}
+                                autoFocus
+                                onKeyDownCapture={(e) => {
+                                    if (e.code === 'Enter') {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        setEditMode(false);
+                                    }
+                                }}
+                            />
+                        )}
+                        {!editMode && (
+                            <StyledMilestoneCardTitle
+                                onClick={editMilestoneNameClick}
+                            >
+                                {milestoneName}
+                            </StyledMilestoneCardTitle>
+                        )}
+                        {!editMode && (
+                            <StyledEditIcon onClick={editMilestoneNameClick} />
+                        )}
+                    </StyledGridItem>
+                    <Grid item xs={2} md={2}>
+                        <Button
+                            variant='outlined'
+                            color='primary'
+                            onClick={() => showAddStrategyDialog(index)}
+                        >
+                            Add strategy
+                        </Button>
+                    </Grid>
+                </Grid>
+            </StyledMilestoneCardBody>
+        </StyledMilestoneCard>
+    );
+};
diff --git a/frontend/src/component/releases/ReleasePlanTemplate/MilestoneList.tsx b/frontend/src/component/releases/ReleasePlanTemplate/MilestoneList.tsx
new file mode 100644
index 000000000000..966bf5be5362
--- /dev/null
+++ b/frontend/src/component/releases/ReleasePlanTemplate/MilestoneList.tsx
@@ -0,0 +1,39 @@
+import type { IReleasePlanMilestonePayload } from 'interfaces/releasePlans';
+import { useState } from 'react';
+import { MilestoneCard } from './MilestoneCard';
+
+interface IMilestoneList {
+    milestones: IReleasePlanMilestonePayload[];
+    setAddStrategyOpen: (open: boolean) => void;
+    errors: { [key: string]: string };
+    clearErrors: () => void;
+}
+
+export const MilestoneList = ({
+    milestones,
+    setAddStrategyOpen,
+    errors,
+    clearErrors,
+}: IMilestoneList) => {
+    const [currentMilestone, setCurrentMilestone] = useState<number>(-1);
+
+    const showAddStrategyDialog = (index: number) => {
+        setCurrentMilestone(index);
+        setAddStrategyOpen(true);
+    };
+
+    return (
+        <>
+            {milestones.map((milestone, index) => (
+                <MilestoneCard
+                    key={`milestone_${index.toString()}`}
+                    index={index}
+                    milestone={milestone}
+                    showAddStrategyDialog={showAddStrategyDialog}
+                    errors={errors}
+                    clearErrors={clearErrors}
+                />
+            ))}
+        </>
+    );
+};
diff --git a/frontend/src/component/releases/ReleasePlanTemplate/ReleasePlanTemplateAddStrategyForm.tsx b/frontend/src/component/releases/ReleasePlanTemplate/ReleasePlanTemplateAddStrategyForm.tsx
new file mode 100644
index 000000000000..50eccfae3760
--- /dev/null
+++ b/frontend/src/component/releases/ReleasePlanTemplate/ReleasePlanTemplateAddStrategyForm.tsx
@@ -0,0 +1,34 @@
+import { Button, styled } from '@mui/material';
+import FormTemplate from 'component/common/FormTemplate/FormTemplate';
+
+const StyledCancelButton = styled(Button)(({ theme }) => ({
+    marginLeft: theme.spacing(3),
+}));
+
+const StyledButton = styled(Button)(({ theme }) => ({
+    marginTop: theme.spacing(1),
+    maxWidth: theme.spacing(20),
+}));
+
+const StyledButtonContainer = styled('div')(() => ({
+    marginTop: 'auto',
+    display: 'flex',
+    justifyContent: 'flex-end',
+}));
+
+export const ReleasePlanTemplateAddStrategyForm = ({
+    onCancel,
+}: { onCancel: () => void }) => {
+    return (
+        <FormTemplate
+            modal
+            description='Add a strategy to your release plan template.'
+        >
+            <StyledButtonContainer>
+                <StyledCancelButton onClick={onCancel}>
+                    Cancel
+                </StyledCancelButton>
+            </StyledButtonContainer>
+        </FormTemplate>
+    );
+};
diff --git a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm.tsx b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm.tsx
index 5fdc69515996..48a66ecd83d0 100644
--- a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm.tsx
+++ b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm.tsx
@@ -1,5 +1,5 @@
 import Input from 'component/common/Input/Input';
-import { styled } from '@mui/material';
+import { Box, Card, styled } from '@mui/material';
 
 const StyledInputDescription = styled('p')(({ theme }) => ({
     marginBottom: theme.spacing(1),
@@ -10,6 +10,33 @@ const StyledInput = styled(Input)(({ theme }) => ({
     marginBottom: theme.spacing(2),
 }));
 
+export const StyledMilestoneCard = styled(Card)(({ theme }) => ({
+    marginTop: theme.spacing(2),
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    boxShadow: 'none',
+    border: `1px solid ${theme.palette.divider}`,
+    [theme.breakpoints.down('sm')]: {
+        justifyContent: 'center',
+    },
+    transition: 'background-color 0.2s ease-in-out',
+    backgroundColor: theme.palette.background.default,
+    '&:hover': {
+        backgroundColor: theme.palette.neutral.light,
+    },
+    borderRadius: theme.shape.borderRadiusMedium,
+}));
+
+export const StyledMilestoneCardBody = styled(Box)(({ theme }) => ({
+    padding: theme.spacing(2, 2),
+}));
+
+export const StyledMilestoneCardTitle = styled('span')(({ theme }) => ({
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSizes.bodySize,
+}));
+
 interface ITemplateForm {
     name: string;
     setName: React.Dispatch<React.SetStateAction<string>>;
diff --git a/frontend/src/component/releases/hooks/useTemplateForm.ts b/frontend/src/component/releases/hooks/useTemplateForm.ts
index 49ed900e06f9..e549295702bb 100644
--- a/frontend/src/component/releases/hooks/useTemplateForm.ts
+++ b/frontend/src/component/releases/hooks/useTemplateForm.ts
@@ -1,8 +1,14 @@
+import type { IReleasePlanMilestonePayload } from 'interfaces/releasePlans';
 import { useEffect, useState } from 'react';
 
-export const useTemplateForm = (initialName = '', initialDescription = '') => {
+export const useTemplateForm = (
+    initialName = '',
+    initialDescription = '',
+    initialMilestones: IReleasePlanMilestonePayload[] = [],
+) => {
     const [name, setName] = useState(initialName);
     const [description, setDescription] = useState(initialDescription);
+    const [milestones, setMilestones] = useState(initialMilestones);
     const [errors, setErrors] = useState({});
 
     useEffect(() => {
@@ -13,6 +19,10 @@ export const useTemplateForm = (initialName = '', initialDescription = '') => {
         setDescription(initialDescription);
     }, [initialDescription]);
 
+    useEffect(() => {
+        setMilestones(initialMilestones);
+    }, [initialMilestones]);
+
     const validate = () => {
         if (name.length === 0) {
             setErrors((prev) => ({ ...prev, name: 'Name can not be empty.' }));
@@ -32,11 +42,17 @@ export const useTemplateForm = (initialName = '', initialDescription = '') => {
         };
     };
 
+    const addMilestone = (milestone: IReleasePlanMilestonePayload) => {
+        setMilestones(() => [...milestones, milestone]);
+    };
+
     return {
         name,
         setName,
         description,
         setDescription,
+        milestones,
+        setMilestones,
         errors,
         clearErrors,
         validate,
diff --git a/frontend/src/interfaces/releasePlans.ts b/frontend/src/interfaces/releasePlans.ts
index a8697145995d..8ad6d740157a 100644
--- a/frontend/src/interfaces/releasePlans.ts
+++ b/frontend/src/interfaces/releasePlans.ts
@@ -12,7 +12,7 @@ export interface IReleasePlanTemplate {
     description: string;
     createdAt: string;
     createdByUserId: number;
-    milestones: IReleasePlanMilestone[];
+    milestones: IReleasePlanMilestonePayload[];
 }
 
 export interface IReleasePlanMilestone {
@@ -24,5 +24,17 @@ export interface IReleasePlanTemplatePayload {
     id?: string;
     name: string;
     description: string;
-    milestones?: IReleasePlanMilestone[];
+    milestones?: IReleasePlanMilestonePayload[];
+}
+
+export interface IReleasePlanMilestonePayload {
+    id?: string;
+    name: string;
+    sortOrder: number;
+    strategies?: IReleasePlanStrategyPayload[];
+}
+
+export interface IReleasePlanStrategyPayload {
+    id?: string;
+    name: string;
 }