diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Footer/index.tsx b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Actions/index.tsx
similarity index 74%
rename from SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Footer/index.tsx
rename to SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Actions/index.tsx
index 5b75acf48..0710bbf07 100644
--- a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Footer/index.tsx
+++ b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Actions/index.tsx
@@ -1,14 +1,14 @@
-import { DefaultButton, DialogFooter, PrimaryButton } from '@fluentui/react'
 import * as strings from 'ProjectWebPartsStrings'
 import React, { FC, useContext } from 'react'
-import { DISMISS_CHANGE_PHASE_DIALOG } from '../../..//ProjectPhases/reducer'
-import { ProjectPhasesContext } from '../../../ProjectPhases/context'
+import { DISMISS_CHANGE_PHASE_DIALOG } from '../../reducer'
+import { ProjectPhasesContext } from '../../context'
 import { useChangePhase } from '../../useChangePhase'
 import { View } from '../Views'
 import { ChangePhaseDialogContext } from '../context'
 import { SET_VIEW } from '../reducer'
+import { Button, DialogActions } from '@fluentui/react-components'
 
-export const Footer: FC = () => {
+export const Actions: FC = () => {
   const context = useContext(ProjectPhasesContext)
   const { state, dispatch } = useContext(ChangePhaseDialogContext)
   const onChangePhase = useChangePhase()
@@ -47,14 +47,18 @@ export const Footer: FC = () => {
   }
 
   return (
-    <DialogFooter>
-      <DefaultButton
-        text={strings.CancelText}
+    <DialogActions>
+      <Button
+        title={strings.CancelText}
         onClick={() => context.dispatch(DISMISS_CHANGE_PHASE_DIALOG())}
-      />
+      >
+        {strings.CancelText}
+      </Button>
       {actions.map((buttonProps, index) => (
-        <PrimaryButton key={index} {...buttonProps} />
+        <Button appearance='primary' key={index} {...buttonProps}>
+          {buttonProps.text}
+        </Button>
       ))}
-    </DialogFooter>
+    </DialogActions>
   )
 }
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/ChangePhaseDialog.module.scss b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/ChangePhaseDialog.module.scss
index 63e4e4bbf..c8cfc419c 100644
--- a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/ChangePhaseDialog.module.scss
+++ b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/ChangePhaseDialog.module.scss
@@ -1,5 +1,10 @@
-.root {
+.changePhaseDialog {
   width: 550px;
   max-width: 550px;
-  font-weight: 300;
+
+  .dialogContent {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
 }
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Body/index.tsx b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Content/index.tsx
similarity index 92%
rename from SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Body/index.tsx
rename to SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Content/index.tsx
index 2a5441ea4..a2e261e96 100644
--- a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Body/index.tsx
+++ b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Content/index.tsx
@@ -9,7 +9,7 @@ const VIEW_MAP: Record<View, JSX.Element> = {
   [View.Confirm]: null
 }
 
-export const Body: FC = () => {
+export const Content: FC = () => {
   const { state } = useContext(ChangePhaseDialogContext)
   return VIEW_MAP[state.view] ?? null
 }
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/DynamicHomepageContent/DynamicHomepageContent.module.scss b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/DynamicHomepageContent/DynamicHomepageContent.module.scss
deleted file mode 100644
index 8d2190197..000000000
--- a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/DynamicHomepageContent/DynamicHomepageContent.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.root {
-  font-weight: 300;
-}
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/DynamicHomepageContent/index.tsx b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/DynamicHomepageContent/index.tsx
index c700f9d8d..b67404237 100644
--- a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/DynamicHomepageContent/index.tsx
+++ b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/DynamicHomepageContent/index.tsx
@@ -4,22 +4,20 @@ import { UserMessage } from 'pp365-shared-library/lib/components/UserMessage'
 import * as strings from 'ProjectWebPartsStrings'
 import React, { FC, useContext } from 'react'
 import _ from 'underscore'
-import styles from './DynamicHomepageContent.module.scss'
 
 export const DynamicHomepageContent: FC = () => {
   const context = useContext(ProjectPhasesContext)
   const phaseSitePages = context.state.data.phaseSitePages ?? []
   const phaseSitePage = _.find(phaseSitePages, (p) => p.title === context.state.confirmPhase.name)
   return (
-    <div className={styles.root}>
-      <UserMessage
-        text={
-          phaseSitePage
-            ? format(strings.PhaseSitePageFoundDescription, phaseSitePage?.fileLeafRef)
-            : format(strings.PhaseSitePageNotFoundDescription, context.state.confirmPhase.name)
-        }
-        intent={phaseSitePage ? 'info' : 'warning'}
-      />
-    </div>
+    <UserMessage
+      title={strings.PhaseSitePageTitle}
+      text={
+        phaseSitePage
+          ? format(strings.PhaseSitePageFoundDescription, phaseSitePage?.fileLeafRef)
+          : format(strings.PhaseSitePageNotFoundDescription, context.state.confirmPhase.name)
+      }
+      intent={phaseSitePage ? 'info' : 'warning'}
+    />
   )
 }
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/ChangingPhaseView/index.tsx b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/ChangingPhaseView/index.tsx
index c9e5b3a98..8cf11c99b 100644
--- a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/ChangingPhaseView/index.tsx
+++ b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/ChangingPhaseView/index.tsx
@@ -1,14 +1,18 @@
-import { format, ProgressIndicator } from '@fluentui/react'
+import { format } from '@fluentui/react'
 import { ProjectPhasesContext } from '../../../../ProjectPhases/context'
 import * as strings from 'ProjectWebPartsStrings'
 import React, { FC, useContext } from 'react'
+import { Field, ProgressBar } from '@fluentui/react-components'
 
 export const ChangingPhaseView: FC = () => {
   const context = useContext(ProjectPhasesContext)
   return (
-    <ProgressIndicator
+    <Field
       label={strings.PleaseWaitText}
-      description={format(strings.ChangingPhaseDescription, context.state.confirmPhase.name)}
-    />
+      hint={format(strings.ChangingPhaseDescription, context.state.confirmPhase.name)}
+      validationState='none'
+    >
+      <ProgressBar />
+    </Field>
   )
 }
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/InitialView.module.scss b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/InitialView.module.scss
index 07f44d64e..4e7aefb23 100644
--- a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/InitialView.module.scss
+++ b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/InitialView.module.scss
@@ -1,14 +1,16 @@
-@import '~@fluentui/react/dist/sass/References.scss';
+@import "~@fluentui/react/dist/sass/References.scss";
 
 .root {
-  .header {
-    @include ms-fontSize-14;
-  }
-  .commentField {
-    margin: 10px 0 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .tabList {
+    display: flex;
+    justify-content: space-between;
 
-    textarea {
-      height: 100px;
+    .tabItem {
+      cursor: default;
     }
   }
 }
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/StatusActions/StatusActions.module.scss b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/StatusActions/StatusActions.module.scss
new file mode 100644
index 000000000..ecc78f810
--- /dev/null
+++ b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/StatusActions/StatusActions.module.scss
@@ -0,0 +1,7 @@
+.root {
+  margin: 12px 0;
+
+  .button {
+    font-weight: var(--fontWeightRegular);
+  }
+}
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/StatusActions/index.tsx b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/StatusActions/index.tsx
new file mode 100644
index 000000000..6db17905b
--- /dev/null
+++ b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/StatusActions/index.tsx
@@ -0,0 +1,22 @@
+import React, { FC } from 'react'
+import { IStatusActionsProps } from './types'
+import styles from './StatusActions.module.scss'
+import { Button } from '@fluentui/react-components'
+
+export const StatusActions: FC<IStatusActionsProps> = ({ actions }) => {
+  return (
+    <div className={styles.root}>
+      {actions.map((action, index) => (
+        <Button
+          className={styles.button}
+          appearance='subtle'
+          title={action.text}
+          key={index}
+          {...action}
+        >
+          {action.text}
+        </Button>
+      ))}
+    </div>
+  )
+}
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/StatusActions/types.ts b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/StatusActions/types.ts
new file mode 100644
index 000000000..9ec40f527
--- /dev/null
+++ b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/StatusActions/types.ts
@@ -0,0 +1,3 @@
+export interface IStatusActionsProps {
+  actions: any[]
+}
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/StatusOptions/StatusOptions.module.scss b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/StatusOptions/StatusOptions.module.scss
deleted file mode 100644
index 4af269786..000000000
--- a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/StatusOptions/StatusOptions.module.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import '~@fluentui/react/dist/sass/References.scss';
-
-.root {
-  margin: 20px 0 25px 0;
-
-  .action {
-    margin-right: 5px;
-  }
-}
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/StatusOptions/index.tsx b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/StatusOptions/index.tsx
deleted file mode 100644
index 6b9a20917..000000000
--- a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/StatusOptions/index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ActionButton } from '@fluentui/react/lib/Button'
-import React, { FC } from 'react'
-import { IStatusOptionsProps } from './types'
-import styles from './StatusOptions.module.scss'
-
-export const StatusOptions: FC<IStatusOptionsProps> = ({ actions }) => {
-  return (
-    <div className={styles.root}>
-      {actions.map((opt, key) => (
-        <span key={key}>
-          <ActionButton className={styles.action} {...opt} />
-        </span>
-      ))}
-    </div>
-  )
-}
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/StatusOptions/types.ts b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/StatusOptions/types.ts
deleted file mode 100644
index 8228fdfbf..000000000
--- a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/StatusOptions/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { IButtonProps } from '@fluentui/react/lib/Button'
-
-export interface IStatusOptionsProps {
-  actions: IButtonProps[]
-}
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/index.tsx b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/index.tsx
index 70fd39df8..e400c2b22 100644
--- a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/index.tsx
+++ b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/index.tsx
@@ -1,29 +1,39 @@
-import { TextField } from '@fluentui/react/lib/TextField'
 import * as strings from 'ProjectWebPartsStrings'
 import React, { FC } from 'react'
 import styles from './InitialView.module.scss'
-import { StatusOptions } from './StatusOptions'
 import { useInitialView } from './useInitialView'
+import { Field, Label, Tab, TabList, Textarea } from '@fluentui/react-components'
+import { StatusActions } from './StatusActions'
+import { format } from '@fluentui/react'
 
 export const InitialView: FC = () => {
-  const { checklistItem, setComment, comment, actions } = useInitialView()
+  const { checklistItem, checklistItems, setComment, comment, actions } = useInitialView()
   if (!checklistItem) return null
 
   return (
     <div className={styles.root}>
-      <div className={styles.header}>
-        {checklistItem.id}. {checklistItem.title}
-      </div>
-      <TextField
-        className={styles.commentField}
-        onChange={(_, newValue: string) => setComment(newValue)}
-        placeholder={strings.ChecklistCommentPlaceholder}
-        description={strings.ChecklistCommentDescription}
-        multiline
-        value={comment}
-        resizable={false}
-      />
-      <StatusOptions actions={actions} />
+      <TabList className={styles.tabList} selectedValue={checklistItem.id}>
+        {checklistItems.map((item) => (
+          <Tab
+            className={styles.tabItem}
+            key={item.id}
+            title={format(strings.PhaseCheckListItem, item.id)}
+            value={item.id}
+          >
+            {item.id}
+          </Tab>
+        ))}
+      </TabList>
+      <Label weight='semibold'>{checklistItem.title}</Label>
+      <Field hint={strings.ChecklistCommentDescription}>
+        <Textarea
+          rows={4}
+          value={comment}
+          placeholder={strings.ChecklistCommentPlaceholder}
+          onChange={(_, data) => setComment(data.value)}
+        />
+      </Field>
+      <StatusActions actions={actions} />
     </div>
   )
 }
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/useActions.ts b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/useActions.ts
index 2bb0bbba4..38dc89feb 100644
--- a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/useActions.ts
+++ b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/useActions.ts
@@ -1,5 +1,5 @@
-import { IButtonProps } from '@fluentui/react/lib/Button'
 import { ProjectPhasesContext } from 'components/ProjectPhases/context'
+import { getFluentIcon } from 'pp365-shared-library'
 import * as strings from 'ProjectWebPartsStrings'
 import { useContext } from 'react'
 
@@ -12,7 +12,7 @@ import { useContext } from 'react'
 export function useActions(comment: string, onNextChecklistItem: (statusValue: string) => void) {
   const context = useContext(ProjectPhasesContext)
   const isCommentValid = comment?.length >= context.props.commentMinLength
-  const actions: IButtonProps[] = [
+  const actions = [
     {
       text: strings.StatusNotRelevant,
       disabled: !isCommentValid,
@@ -20,7 +20,7 @@ export function useActions(comment: string, onNextChecklistItem: (statusValue: s
         ? strings.CheckpointNotRelevantTooltip
         : strings.CheckpointNotRelevantTooltipCommentEmpty,
       onClick: () => onNextChecklistItem(strings.StatusNotRelevant),
-      iconProps: { iconName: 'Blocked' }
+      icon: getFluentIcon('DismissCircle')
     },
     {
       text: strings.StatusStillOpen,
@@ -29,13 +29,13 @@ export function useActions(comment: string, onNextChecklistItem: (statusValue: s
         ? strings.CheckpointStillOpenTooltip
         : strings.CheckpointStillOpenTooltipCommentEmpty,
       onClick: () => onNextChecklistItem(strings.StatusOpen),
-      iconProps: { iconName: 'CircleRing' }
+      icon: getFluentIcon('Circle')
     },
     {
       text: strings.StatusClosed,
       title: strings.CheckpointDoneTooltip,
       onClick: () => onNextChecklistItem(strings.StatusClosed),
-      iconProps: { iconName: 'CheckMark' }
+      icon: getFluentIcon('CheckmarkCircle')
     }
   ]
   return actions
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/useInitialView.ts b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/useInitialView.ts
index 0c3debe40..b2dbe0b98 100644
--- a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/useInitialView.ts
+++ b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/InitialView/useInitialView.ts
@@ -8,6 +8,7 @@ import { useActions } from './useActions'
 export function useInitialView() {
   const { state } = useContext(ChangePhaseDialogContext)
   const checklistItem = state.checklistItems[state.currentIdx]
+  const checklistItems = state.checklistItems
   const { nextChecklistItem } = useContext(ChangePhaseDialogContext)
   const [comment, setComment] = useState(checklistItem.comment || '')
 
@@ -26,5 +27,5 @@ export function useInitialView() {
 
   const actions = useActions(comment, onNextChecklistItem)
 
-  return { checklistItem, setComment, comment, actions } as const
+  return { checklistItem, checklistItems, setComment, comment, actions } as const
 }
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/SummaryView/CheckListItem/CheckListItem.module.scss b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/SummaryView/CheckListItem/CheckListItem.module.scss
index d024b59c0..6e78dc986 100644
--- a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/SummaryView/CheckListItem/CheckListItem.module.scss
+++ b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/SummaryView/CheckListItem/CheckListItem.module.scss
@@ -1,47 +1,36 @@
-@import '~@fluentui/react/dist/sass/References.scss';
+@import "~@fluentui/react/dist/sass/References.scss";
 
 .checkListItem {
-  margin: 18px 0 0 0;
-
-  .iconContainer {
-    float: left;
-    @include ms-fontSize-18;
-    width: 30px;
-    padding: 8px 0 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border-radius: var(--borderRadiusMedium);
+  padding: 6px;
+
+  &:hover {
+    background-color: var(--colorSubtleBackgroundHover);
   }
 
-  .container {
-    @include ms-Grid;
-    margin-left: 30px;
-
-    .header {
-      @include ms-Grid-row;
-
-      .title {
-        @include ms-Grid-col;
-        @include ms-sm10;
-        @include ms-fontSize-14;
-      }
-
-      .toggle {
-        @include ms-Grid-col;
-        @include ms-sm2;
+  .item {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 12px;
+
+    .title {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 12px;
+
+      .statusIcon {
+        width: 24px;
+        height: 24px;
       }
     }
+  }
 
-    .content {
-      @include ms-Grid-row;
-
-      .comment {
-        @include ms-Grid-col;
-        @include ms-sm12;
-        @include ms-fontSize-12;
-        padding: 8px 0 0 0;
-
-        .label {
-          @include ms-fontWeight-semibold;
-        }
-      }
-    }
+  .comment {
+    padding-left: 36px;
   }
 }
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/SummaryView/CheckListItem/index.tsx b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/SummaryView/CheckListItem/index.tsx
index 696957615..34428ba05 100644
--- a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/SummaryView/CheckListItem/index.tsx
+++ b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/SummaryView/CheckListItem/index.tsx
@@ -1,40 +1,53 @@
-import { Icon } from '@fluentui/react/lib/Icon'
 import { stringIsNullOrEmpty } from '@pnp/core'
 import * as strings from 'ProjectWebPartsStrings'
 import React, { FC, useState } from 'react'
 import styles from './CheckListItem.module.scss'
-import IChecklistItemProps, { STATUS_COLORS, STATUS_ICONS } from './types'
+import IChecklistItemProps, { STATUS_COLORS } from './types'
+import { getFluentIcon } from 'pp365-shared-library'
+import { Button, Text } from '@fluentui/react-components'
 
 export const CheckListItem: FC<IChecklistItemProps> = ({ item }) => {
   const [commentHidden, setCommentHidden] = useState(true)
   const hasComment = !stringIsNullOrEmpty(item.comment)
 
+  const statusIcon = getFluentIcon(
+    item.status === strings.StatusOpen
+      ? 'Circle'
+      : item.status === strings.StatusClosed
+      ? 'CheckmarkCircle'
+      : 'DismissCircle',
+    { color: STATUS_COLORS[item.status], size: 24 }
+  )
+
   return (
-    <li className={styles.checkListItem}>
-      <div className={styles.iconContainer}>
-        <Icon iconName={STATUS_ICONS[item.status]} style={{ color: STATUS_COLORS[item.status] }} />
-      </div>
-      <div className={styles.container}>
-        <div
-          className={styles.header}
-          style={{ cursor: hasComment && 'pointer' }}
-          onClick={() => hasComment && setCommentHidden(!commentHidden)}
-        >
-          <div className={styles.title}>
-            <span>
-              {item.id}. {item.title}
-            </span>
-          </div>
-          <div className={styles.toggle} hidden={!hasComment}>
-            <Icon iconName={commentHidden ? 'ChevronUp' : 'ChevronDown'} />
-          </div>
+    <div
+      className={styles.checkListItem}
+      style={{
+        cursor: hasComment && 'pointer',
+        backgroundColor: !commentHidden && 'var(--colorSubtleBackgroundSelected)'
+      }}
+      onClick={() => hasComment && setCommentHidden(!commentHidden)}
+    >
+      <div className={styles.item}>
+        <div className={styles.title}>
+          <div className={styles.statusIcon}>{statusIcon}</div>
+          <Text>
+            {item.id}. {item.title}
+          </Text>
         </div>
-        <div className={styles.content} hidden={commentHidden}>
-          <div className={styles.comment}>
-            <span className={styles.label}>{strings.CommentLabel}</span> <span>{item.comment}</span>
-          </div>
+        <div hidden={!hasComment}>
+          <Button
+            appearance='transparent'
+            size='small'
+            icon={commentHidden ? getFluentIcon('ChevronUp') : getFluentIcon('ChevronDown')}
+            title={commentHidden ? 'Vis kommentar' : 'Skjul kommentar'}
+          />
         </div>
       </div>
-    </li>
+      <div className={styles.comment} hidden={commentHidden}>
+        <Text weight='semibold'>{strings.CommentLabel}: </Text>
+        <Text>{item.comment}</Text>
+      </div>
+    </div>
   )
 }
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/SummaryView/CheckListItem/types.ts b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/SummaryView/CheckListItem/types.ts
index 82ac2280c..7218d33cd 100644
--- a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/SummaryView/CheckListItem/types.ts
+++ b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/SummaryView/CheckListItem/types.ts
@@ -10,9 +10,3 @@ export const STATUS_COLORS = {
   [strings.StatusClosed]: '#107c10',
   [strings.StatusNotRelevant]: '#e81123'
 }
-
-export const STATUS_ICONS = {
-  [strings.StatusOpen]: 'CircleRing',
-  [strings.StatusClosed]: 'Completed',
-  [strings.StatusNotRelevant]: 'Blocked'
-}
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/SummaryView/SummaryView.module.scss b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/SummaryView/SummaryView.module.scss
index f68542e36..8348da1e4 100644
--- a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/SummaryView/SummaryView.module.scss
+++ b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/SummaryView/SummaryView.module.scss
@@ -1,7 +1,6 @@
-.root {
-    .list {
-        list-style-type: none;
-        margin: 0 0 20px 0;
-        padding: 0;
-    }
-}
\ No newline at end of file
+.summaryView {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding-bottom: 12px;
+}
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/SummaryView/index.tsx b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/SummaryView/index.tsx
index 93d75938a..5369f0c6f 100644
--- a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/SummaryView/index.tsx
+++ b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/Views/SummaryView/index.tsx
@@ -6,12 +6,10 @@ import styles from './SummaryView.module.scss'
 export const SummaryView: FC = () => {
   const { state } = useContext(ChangePhaseDialogContext)
   return (
-    <div className={styles.root}>
-      <ul className={styles.list}>
-        {state.checklistItems.map((item) => (
-          <CheckListItem key={item.id} item={item} />
-        ))}
-      </ul>
+    <div className={styles.summaryView}>
+      {state.checklistItems.map((item) => (
+        <CheckListItem key={item.id} item={item} />
+      ))}
     </div>
   )
 }
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/index.tsx b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/index.tsx
index 4137878a8..bede09d0f 100644
--- a/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/index.tsx
+++ b/SharePointFramework/ProjectWebParts/src/components/ProjectPhases/ChangePhaseDialog/index.tsx
@@ -1,16 +1,23 @@
-import { Dialog, DialogType, format } from '@fluentui/react'
 import SPDataAdapter from '../../../data'
 import * as strings from 'ProjectWebPartsStrings'
 import React, { FC, useContext, useEffect, useReducer } from 'react'
 import { ProjectPhasesContext } from '../context'
-import { DISMISS_CHANGE_PHASE_DIALOG } from '../reducer'
-import { Body } from './Body'
-import styles from './ChangePhaseDialog.module.scss'
+import { Content } from './Content'
 import { ChangePhaseDialogContext } from './context'
 import { DynamicHomepageContent } from './DynamicHomepageContent'
-import { Footer } from './Footer'
+import { Actions } from './Actions'
 import reducer, { CHECKLIST_ITEM_UPDATED, INIT } from './reducer'
 import { View } from './Views'
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTitle,
+  Label
+} from '@fluentui/react-components'
+import { format } from '@fluentui/react'
+import styles from './ChangePhaseDialog.module.scss'
 
 export const ChangePhaseDialog: FC = () => {
   const context = useContext(ProjectPhasesContext)
@@ -39,23 +46,30 @@ export const ChangePhaseDialog: FC = () => {
 
   return (
     <ChangePhaseDialogContext.Provider value={{ state, dispatch, nextChecklistItem }}>
-      <Dialog
-        isOpen={true}
-        containerClassName={styles.root}
-        title={strings.ChangePhaseText}
-        subText={
-          state.view === View.Confirm &&
-          format(strings.ConfirmChangePhase, context.state.confirmPhase.name)
-        }
-        dialogContentProps={{ type: DialogType.largeHeader }}
-        modalProps={{ isDarkOverlay: true, isBlocking: false }}
-        onDismiss={() => context.dispatch(DISMISS_CHANGE_PHASE_DIALOG())}
-      >
-        {state.view === View.Confirm && context.props.useDynamicHomepage && (
-          <DynamicHomepageContent />
-        )}
-        <Body />
-        <Footer />
+      <Dialog open>
+        <DialogSurface>
+          <DialogBody className={styles.changePhaseDialog}>
+            <DialogTitle>
+              {format(strings.ChangePhaseDialogTitle, context.state.confirmPhase.name)}
+            </DialogTitle>
+            <DialogContent className={styles.dialogContent}>
+              <Label weight='semibold'>
+                {format(
+                  strings.ChangePhaseDialogSubtitle,
+                  context.state.phase.name,
+                  context.state.confirmPhase.name
+                )}
+              </Label>
+              {state.view === View.Confirm &&
+                format(strings.ConfirmChangePhase, context.state.confirmPhase.name)}
+              {state.view === View.Confirm && context.props.useDynamicHomepage && (
+                <DynamicHomepageContent />
+              )}
+              <Content />
+            </DialogContent>
+            <Actions />
+          </DialogBody>
+        </DialogSurface>
       </Dialog>
     </ChangePhaseDialogContext.Provider>
   )
diff --git a/SharePointFramework/ProjectWebParts/src/loc/mystrings.d.ts b/SharePointFramework/ProjectWebParts/src/loc/mystrings.d.ts
index 6c89181e9..f5ada0aad 100644
--- a/SharePointFramework/ProjectWebParts/src/loc/mystrings.d.ts
+++ b/SharePointFramework/ProjectWebParts/src/loc/mystrings.d.ts
@@ -29,6 +29,8 @@ declare interface IProjectWebPartsStrings {
   CalloutTemplateFieldLabel: string
   CancelText: string
   CategoryFieldLabel: string
+  ChangePhaseDialogTitle: string
+  ChangePhaseDialogSubtitle: string
   ChangePhaseText: string
   ChangingPhaseDescription: string
   ChecklistCommentDescription: string
@@ -137,6 +139,7 @@ declare interface IProjectWebPartsStrings {
   PhaseChecklistViewUrl: string
   PhaseFieldFieldLabel: string
   PhaseLabel: string
+  PhaseSitePageTitle: string
   PhaseSitePageFoundDescription: string
   PhaseSitePageNotFoundDescription: string
   PhaseUseStartArrowLabel: string
@@ -225,6 +228,7 @@ declare interface IProjectWebPartsStrings {
   WebPartNoAccessMessage: string
   WidthFieldLabel: string
   Yes: string
+  PhaseCheckListItem: string
 }
 
 declare module 'ProjectWebPartsStrings' {
diff --git a/SharePointFramework/ProjectWebParts/src/loc/nb-no.js b/SharePointFramework/ProjectWebParts/src/loc/nb-no.js
index b01641abd..7caf91dc8 100644
--- a/SharePointFramework/ProjectWebParts/src/loc/nb-no.js
+++ b/SharePointFramework/ProjectWebParts/src/loc/nb-no.js
@@ -39,6 +39,8 @@ define([], function () {
     CalloutTemplateFieldLabel: 'Mal for callout',
     CancelText: 'Avbryt',
     CategoryFieldLabel: 'Kategori',
+    ChangePhaseDialogTitle: 'Endre til {0} fasen',
+    ChangePhaseDialogSubtitle: 'Dette vil medføre endring fra {0} til {1} fasen',
     ChangePhaseText: 'Endre til denne fasen',
     ChangingPhaseDescription: 'Endrer fase til {0}',
     ChecklistCommentDescription: 'Kommentar er obligatorisk om sjekkpunktet skal markeres som "Ikke relevant" eller "Fortsatt åpen".',
@@ -154,8 +156,9 @@ define([], function () {
     PhaseLabel: 'Fase',
     PhaseUseStartArrowLabel: 'Bruk startpil',
     PhaseUseEndArrowLabel: 'Bruk avsluttende pil',
+    PhaseSitePageTitle: 'Dynamisk forside er aktivert',
     PhaseSitePageFoundDescription: 'Å endre til denne fasen vil også endre forsiden til prosjektet.<br /><br />Side _{0}_ for fase funnet. Denne siden vil bli brukt som forside for prosjektet. Trykk **Ja** for å fortsette.',
-    PhaseSitePageNotFoundDescription: 'Dynamisk forside er aktivert.<br /><br />Side _{0}_ for fase ble ikke funnet, vennligst opprett. Ved trykk på **Ja** vil ikke forside endres.',
+    PhaseSitePageNotFoundDescription: 'Side _{0}_ for fase ble ikke funnet, vennligst opprett. Ved trykk på **Ja** vil ikke forside endres, men fasen vil bli endret.',
     PleaseWaitText: 'Vennligst vent',
     ProbabilityFieldNameFieldLabel: 'Feltnavn - Sannsynlighet',
     ProbabilityHeaderFieldLabel: 'Sannsynlighet {0}',
@@ -239,6 +242,7 @@ define([], function () {
     ViewXmlFieldLabel: 'Vis XML spørring',
     WebPartNoAccessMessage: 'Du har ikke tilgang til å se denne webdelen.<br/><br/>Du må enten ha tilgang til porteføljeområdet, eller så må prosjektet være fristilt fra porteføljeområdet.',
     WidthFieldLabel: 'Bredde (piksler)',
-    Yes: 'Ja'
+    Yes: 'Ja',
+    PhaseCheckListItem: 'Sjekkpunkt {0}',
   }
 })
diff --git a/SharePointFramework/shared-library/src/icons/iconCatalog.ts b/SharePointFramework/shared-library/src/icons/iconCatalog.ts
index 31fc9ab2d..98c7629ca 100644
--- a/SharePointFramework/shared-library/src/icons/iconCatalog.ts
+++ b/SharePointFramework/shared-library/src/icons/iconCatalog.ts
@@ -84,7 +84,11 @@ import {
   HistoryFilled,
   HistoryRegular,
   ImageFilled,
-  ImageRegular
+  ImageRegular,
+  CircleFilled,
+  CircleRegular,
+  DismissCircleRegular,
+  DismissCircleFilled,
 } from '@fluentui/react-icons'
 
 /**
@@ -262,5 +266,13 @@ export const iconCatalog = {
   PeopleCommunity: {
     regular: PeopleCommunityRegular,
     filled: PeopleCommunityFilled
+  },
+  Circle: {
+    regular: CircleRegular,
+    filled: CircleFilled
+  },
+  DismissCircle: {
+    regular: DismissCircleRegular,
+    filled: DismissCircleFilled
   }
 }