From 15a87c164fac4053568777c45be1799f4f7b1804 Mon Sep 17 00:00:00 2001
From: v-rakeshsh <155614445+v-rakeshsh@users.noreply.github.com>
Date: Thu, 19 Sep 2024 10:10:10 +0530
Subject: [PATCH] feat(fluentUI-migration): ActionButton fluentui v8 to v9
 migration (#7401)

#### Details

Action Button migration from V8 to V9
| V8 Component | V9 Component | Reference Link |
|--------|--------|--------|
| Action Button | Button |
https://react.fluentui.dev/?path=/docs/components-button-button--docs |
| Primary Button | Button |
https://react.fluentui.dev/?path=/docs/components-button-button--docs |
| CommandBarButton | Combination of Menu, MenuTrigger, MenuButton,
MenuPopover, MenuList | 1. MenuButton -
https://react.fluentui.dev/?path=/docs/components-button-menubutton--docs
2. Menu -
https://react.fluentui.dev/?path=/docs/components-menu-menu--docs 3.
MenuList -
https://react.fluentui.dev/?path=/docs/components-menu-menulist--docs |
| IconProps for Action Button and action button internally takes care of
showing the icon | Created a component
**src/common/icons/fluentui-v9-icons.tsx** to consume
@fluentui/react-icons icons | Cell |

### Styling Improvements:

* Updated the width property from `100%` to `auto` for better layout
flexibility in multiple snapshot files.
* Added new CSS classes for better button and icon styling, including
hover and focus states.
* Adjusted font-weight to `normal` for better text consistency.

### Component Enhancements:

* Added `FluentUIV9Icon` import and updated the components to use the
new icon.
* Improved the components with new styles and updated its component
structure to use Fluent UI v9 components.

##### Motivation

1. Migrate Action Button of V8 to V9 Button in all locations of code.
2. Changed types to align with V9 button.
3. Changed styling to align with old UI.
4. Fixed test cases to cover >90% coverage.


##### Context

UI locations for all the files are mentioned with images in below file:


[ActionButtonComparison](https://microsoft-my.sharepoint.com/:w:/r/personal/v-singhanjal_microsoft_com/_layouts/15/Doc.aspx?sourcedoc=%7B8893E880-1CFB-4D25-8E5F-3AD94CA0E9EB%7D&file=Document%202.docx&action=editNew&mobileredirect=true&wdOrigin=MARKETING.WORD.SIGNIN%2CAPPHOME-WEB.BANNER.NEWBLANK&wdPreviousSession=2dab2adc-a3f9-4816-a2b9-7175f764cb0f&wdPreviousSessionSrc=AppHomeWeb&ct=1724306297464&share=IQGA6JOI-xwlTY5fOtlMoOnrAX4RP9xcmRvEolaQPAyCsOs)


Due to FluentUI V9 Migration there are slight differences between old
and new Icons. PFA screenshots below.

- **More Actions, Collapse all Icons**


![image](https://github.com/user-attachments/assets/db29f19c-b089-4f7f-996c-ccac195ee0a6)

![image](https://github.com/user-attachments/assets/dcf1041f-a1b1-4a81-b88a-65643fc805c4)

- **Expand, Move to Assessment Icons**


![image](https://github.com/user-attachments/assets/1637ab2c-874f-47a1-a702-f71f82a9d920)

![image](https://github.com/user-attachments/assets/69e55a22-b464-441d-b22d-e6ca617ed6fe)

- **Export result, Save Assessment, Load Assessment, Start over Icons**


![image](https://github.com/user-attachments/assets/c34995c5-4b1d-46bc-8bb8-b4631f7065c2)

![image](https://github.com/user-attachments/assets/331cf997-531b-475a-a2ac-31551d50e60b)

- **File issue, Copy failure details Icons**


![image](https://github.com/user-attachments/assets/ddc57a1c-e8cd-4c25-b798-a948c80f61ed)

![image](https://github.com/user-attachments/assets/aacfd3df-dc58-4df5-8380-76a41cad190e)






Note :

1. isNarrowMode property is added in details-view-command-bar.tsx and
other related files to differentiate the rendering of button in normal
mode and menu in minimize mode.
2. SaveAssessmentDialog is now moved out of SaveAssessmentButton file as
with v9 button migration to menu, dialog in narrow mode was not
rendering as it was getting close once menu button is clicked.
3. Accessibility test has a failure for aria-hidden-focus. There is an
existing issue with fluentui and as per them these are Tabster dummy
inputs and they must be added to the exception list. They are
intentionally aria - hidden as their purpose is to redirect focus to the
correct element right when they receive focus and not having aria -
hidden will result in the screen readers choking starting to announce
them.
Please refer for more information on the
error:https://github.com/microsoft/fluentui/issues/25133
5. Changed buttonRef: IRefObject<IButton>; to ButtonRefFunction, as
ButtonRefFunction can be used in future when we migrate the dialog to v9
from V8.
6. Changed /load-assessment-button.tsx to functional component from
class component so that i can consume makeStyles hooks, as hooks cannot
be used in class components, hence converted to Functional component.
7. Removed IPoint because its deprecated in latest Fluent UI V8.
8. Removed expand-collapse-all-button.scss because to consume makeStyles
hooks and to use V9 themes, hence created
expand-collapse-all-button.-styles.tsx.

Technical Debt:
These will be take care in up coming PR for v8 to v9 migration.
**IButton**:
1. We are stilling using IButton from v8 for ref object in
src\DetailsView\components\details-view-command-bar.tsx, because when we
tried to use useRef instead of IButton, we have converted the component
from class to functional component to consume useRef hook.
2. But after converting to functional component and using useRef, focus
back to kebab button is not going in narrow mode when we close the
dialog.

**Card footer button scroll behaviour**
1. If multiple issues are shown in the card footer, when we expand all
issues, and if we click on the first issue section button, scroll goes
to the bottom of the page i.e, the focus goes to the last section.

**Closing dialog focus issue**
1. In Narromode,When we open the dialog on click of export or save
assessment or start over, and when we close the dialog, focus is not
going back to the Kebab button, as dialog is still in v8, we will take
care of this focus back issues during v9 dialog migration.

**Focus style inconsistency**
1. We explicitly added focus styling for buttons to show focus like
kebab button / buttons, after closing the file issue dialog, but when we
use keyboard to navigate to these kebab or other buttons, browser
default focus styles are getting applied, for which it might look thick
border for keyboard focus, but on close of dialog, the focus goes to
button with little thin border.

#### Pull request checklist
<!-- If a checklist item is not applicable to this change, write "n/a"
in the checkbox -->
- [ ] Addresses an existing issue: #0000
- [x] Ran `yarn fastpass`
- [x] Added/updated relevant unit test(s) (and ran `yarn test`)
- [x] Verified code coverage for the changes made. Check coverage report
at: `<rootDir>/test-results/unit/coverage`
- [ ] PR title *AND* final merge commit title both start with a semantic
tag (`fix:`, `chore:`, `feat(feature-name):`, `refactor:`). See
`CONTRIBUTING.md`.
- [x] (UI changes only) Added screenshots/GIFs to description above
- [x] (UI changes only) Verified usability with NVDA/JAWS

---------

Co-authored-by: v-sharmachir <v-sharmachir@microsoft.com>
Co-authored-by: Prachi Naigaonkar <v-prachin@microsoft.com>
Co-authored-by: Chirag Sharma <150002431+v-sharmachir@users.noreply.github.com>
Co-authored-by: Jeevani Chinthala <v-jeevanic@microsoft.com>
Co-authored-by: Anjali Singh <v-singhanjal@microsoft.com>
---
 .../axe-results-with-issues.snap.html         |   31 +-
 .../axe-results-without-issues.snap.html      |   31 +-
 ...sults-with-baseline-aware-issues.snap.html |   31 +-
 .../combined-results-with-issues.snap.html    |   31 +-
 .../combined-results-without-issues.snap.html |   31 +-
 .../summary-scan-with-issues.snap.html        |   31 +-
 .../summary-scan-without-issues.snap.html     |   31 +-
 .../components/assessment-instance-table.tsx  |    5 +-
 .../components/command-bar-buttons-menu.scss  |   52 +-
 .../components/command-bar-buttons-menu.tsx   |   71 +-
 .../components/command-button-styles.tsx      |   27 +
 .../components/common-dialog-styles.scss      |    3 +-
 .../components/details-view-command-bar.tsx   |   33 +-
 .../failure-instance-panel-control.tsx        |   21 +-
 src/DetailsView/components/iframe-warning.tsx |    6 +-
 .../components/inline-start-over-button.tsx   |   11 +-
 .../components/load-assessment-button.tsx     |   27 +-
 .../components/report-export-button.tsx       |   18 +-
 .../components/requirement-instructions.scss  |    1 +
 ...nt-view-next-requirement-configuration.tsx |   11 +-
 .../components/requirement-view.scss          |    4 +-
 .../save-assessment-button-factory.tsx        |    2 +
 .../components/save-assessment-button.tsx     |   84 +-
 .../components/save-assessment-dialog.tsx     |   76 +
 .../start-over-component-factory.tsx          |   44 +-
 .../components/start-over-dropdown-styles.tsx |   57 +
 .../components/start-over-dropdown.tsx        |  157 +-
 .../components/start-over-menu-item.scss      |   15 +
 .../components/static-content-common.scss     |    5 +-
 ...b-stops-instance-section-props-factory.tsx |    2 +-
 .../transfer-to-assessment-button.tsx         |   18 +-
 .../card-footer-instance-action-buttons.scss  |   42 +-
 .../card-footer-instance-action-buttons.tsx   |  201 +-
 .../cards/card-footer-menu-items-builder.ts   |   21 +-
 .../cards/collapsible-component-cards.scss    |    5 +-
 .../cards/collapsible-component-cards.tsx     |   12 +-
 .../expand-collapse-all-button-styles.tsx     |   19 +
 .../cards/expand-collapse-all-button.scss     |    9 -
 .../cards/expand-collapse-all-button.tsx      |   39 +-
 .../cards/rules-with-instances.scss           |    1 +
 .../components/cards/rules-with-instances.tsx |    2 +-
 .../components/collapsible-component.scss     |    7 +-
 .../components/collapsible-component.tsx      |   19 +-
 .../insights-command-button-style.tsx         |   14 +
 .../controls/insights-command-button.scss     |    4 +
 .../controls/insights-command-button.tsx      |   52 +-
 src/common/components/theme.tsx               |    5 +-
 src/common/icons/fluentui-v9-icons.tsx        |   74 +
 src/common/styles/theme-v9-dark-theme.ts      |    3 +-
 src/popup/Styles/popup.scss                   |    5 +-
 src/reports/automated-checks-report.scss      |    2 +-
 src/reports/components/instance-details.scss  |    3 +-
 .../components/outcome-summary-bar.scss       |   18 +-
 .../collapsible-result-section.tsx            |    2 +-
 .../combined-report-rules-only-sections.tsx   |    2 +-
 .../report-collapsible-container.tsx          |    2 +-
 .../common/pretty-print-axe-violations.ts     |    3 +
 .../__snapshots__/reflow-ui.test.ts.snap      |  270 ++-
 .../tests/details-view/reflow-ui.test.ts      |    6 +
 .../assessment-instance-table.test.tsx.snap   |    8 +-
 .../command-bar-buttons-menu.test.tsx.snap    |  135 +-
 .../details-view-command-bar.test.tsx.snap    | 1709 +++++++++++++----
 ...ilure-instance-panel-control.test.tsx.snap |  143 +-
 .../iframe-warning.test.tsx.snap              |    3 +
 .../inline-start-over-button.test.tsx.snap    |   15 +-
 .../load-assessment-button.test.tsx.snap      |   14 +-
 .../report-export-button.test.tsx.snap        |   15 +-
 ...xt-requirement-configuration.test.tsx.snap |    9 +-
 .../save-assessment-button.test.tsx.snap      |   52 +-
 .../save-assessment-dialog.test.tsx.snap      |   47 +
 ...start-over-component-factory.test.tsx.snap |  133 +-
 .../start-over-dropdown.test.tsx.snap         |  143 +-
 ...ransfer-to-assessment-button.test.tsx.snap |   12 +-
 .../command-bar-buttons-menu.test.tsx         |   79 +-
 .../details-view-command-bar.test.tsx         |   96 +-
 ...-assessment-dialog-settings.test.tsx.snap} |    0
 ... save-assessment-dialog-settings.test.tsx} |    0
 .../failure-instance-panel-control.test.tsx   |   57 +-
 .../components/report-export-button.test.tsx  |    5 +-
 .../save-assessment-button.test.tsx           |  135 +-
 .../save-assessment-dialog.test.tsx           |  112 ++
 .../start-over-component-factory.test.tsx     |   14 +-
 .../components/start-over-dropdown.test.tsx   |  174 +-
 .../collapsible-component.test.tsx.snap       |  140 +-
 ...oter-instance-action-buttons.test.tsx.snap |  272 +--
 ...ard-footer-menu-items-builder.test.ts.snap |   16 +-
 .../collapsible-component-cards.test.tsx.snap |   62 +-
 .../expand-collapse-all-button.test.tsx.snap  |   18 +-
 .../instance-details-footer.test.tsx.snap     |   18 +-
 ...rd-footer-instance-action-buttons.test.tsx |   69 +-
 .../card-footer-menu-items-builder.test.ts    |    2 +-
 .../collapsible-component-cards.test.tsx      |   21 +-
 .../cards/expand-collapse-all-button.test.tsx |   17 +-
 .../components/collapsible-component.test.tsx |   26 +-
 .../insights-command-button.test.tsx.snap     |  109 +-
 .../controls/insights-command-button.test.tsx |   58 +-
 .../theme-family-customizer.test.tsx          |   57 +-
 .../report-collapsible-container.test.tsx     |    2 +-
 .../content-panel-button.test.tsx.snap        |   67 +-
 .../content/content-panel-button.test.tsx     |   43 +-
 src/views/content/content-panel-button.tsx    |   16 +-
 src/views/content/content.scss                |   19 +-
 102 files changed, 4084 insertions(+), 1867 deletions(-)
 create mode 100644 src/DetailsView/components/command-button-styles.tsx
 create mode 100644 src/DetailsView/components/save-assessment-dialog.tsx
 create mode 100644 src/DetailsView/components/start-over-dropdown-styles.tsx
 create mode 100644 src/common/components/cards/expand-collapse-all-button-styles.tsx
 delete mode 100644 src/common/components/cards/expand-collapse-all-button.scss
 create mode 100644 src/common/components/controls/insights-command-button-style.tsx
 create mode 100644 src/common/icons/fluentui-v9-icons.tsx
 create mode 100644 src/tests/unit/tests/DetailsView/components/__snapshots__/save-assessment-dialog.test.tsx.snap
 rename src/tests/unit/tests/DetailsView/components/details-view-overlay/settings-panel/settings/save-assessment-dialog/__snapshots__/{save-assessment-dialog.test.tsx.snap => save-assessment-dialog-settings.test.tsx.snap} (100%)
 rename src/tests/unit/tests/DetailsView/components/details-view-overlay/settings-panel/settings/save-assessment-dialog/{save-assessment-dialog.test.tsx => save-assessment-dialog-settings.test.tsx} (100%)
 create mode 100644 src/tests/unit/tests/DetailsView/components/save-assessment-dialog.test.tsx

diff --git a/packages/report-e2e-tests/src/examples/axe-results-with-issues.snap.html b/packages/report-e2e-tests/src/examples/axe-results-with-issues.snap.html
index 4f4bbb57fc3..f1b5f8f62ea 100644
--- a/packages/report-e2e-tests/src/examples/axe-results-with-issues.snap.html
+++ b/packages/report-e2e-tests/src/examples/axe-results-with-issues.snap.html
@@ -823,7 +823,7 @@
   border: none;
   display: flex;
   align-items: baseline;
-  width: 100%;
+  width: auto;
 }
 .collapsible-container .collapsible-control:hover {
   background-color: var(--neutral-alpha-4);
@@ -993,13 +993,27 @@
     color: buttontext !important;
   }
 }
-.kebab-menu-icon--EUIj-:hover {
-  border-style: solid !important;
-  border-width: 1px;
-  padding-left: 8px !important;
-  padding-right: 8px !important;
-  padding-top: 5px !important;
-  padding-bottom: 5px !important;
+.fileissue--x5mek {
+  font-weight: 400 !important;
+}
+.fileissue--x5mek:hover > span > svg {
+  color: var(--insights-button-hover);
+}
+.fileissue--x5mek:focus {
+  outline: 1px solid;
+}
+.copyfailuredetails--NHZE4 {
+  font-weight: 400 !important;
+}
+.copyfailuredetails--NHZE4:hover > span > svg {
+  color: var(--insights-button-hover);
+}
+.menu-Button--ElHFS:hover {
+  border: 1px solid var(--primary-text) !important;
+  color: var(--primary-text) !important;
+}
+.menu-Button--ElHFS:focus {
+  outline: 1px solid;
 }
 .kebab-menu-button--9Qt0a {
   margin-right: 8px;
@@ -1105,6 +1119,7 @@
   display: flex;
   align-items: baseline;
   text-align: left;
+  font-weight: normal;
 }
 .rule-details-group--Tb-LW .rule-detail .outcome-chip {
   vertical-align: middle;
diff --git a/packages/report-e2e-tests/src/examples/axe-results-without-issues.snap.html b/packages/report-e2e-tests/src/examples/axe-results-without-issues.snap.html
index 6353a8da4ed..82cc6386c5b 100644
--- a/packages/report-e2e-tests/src/examples/axe-results-without-issues.snap.html
+++ b/packages/report-e2e-tests/src/examples/axe-results-without-issues.snap.html
@@ -823,7 +823,7 @@
   border: none;
   display: flex;
   align-items: baseline;
-  width: 100%;
+  width: auto;
 }
 .collapsible-container .collapsible-control:hover {
   background-color: var(--neutral-alpha-4);
@@ -993,13 +993,27 @@
     color: buttontext !important;
   }
 }
-.kebab-menu-icon--EUIj-:hover {
-  border-style: solid !important;
-  border-width: 1px;
-  padding-left: 8px !important;
-  padding-right: 8px !important;
-  padding-top: 5px !important;
-  padding-bottom: 5px !important;
+.fileissue--x5mek {
+  font-weight: 400 !important;
+}
+.fileissue--x5mek:hover > span > svg {
+  color: var(--insights-button-hover);
+}
+.fileissue--x5mek:focus {
+  outline: 1px solid;
+}
+.copyfailuredetails--NHZE4 {
+  font-weight: 400 !important;
+}
+.copyfailuredetails--NHZE4:hover > span > svg {
+  color: var(--insights-button-hover);
+}
+.menu-Button--ElHFS:hover {
+  border: 1px solid var(--primary-text) !important;
+  color: var(--primary-text) !important;
+}
+.menu-Button--ElHFS:focus {
+  outline: 1px solid;
 }
 .kebab-menu-button--9Qt0a {
   margin-right: 8px;
@@ -1105,6 +1119,7 @@
   display: flex;
   align-items: baseline;
   text-align: left;
+  font-weight: normal;
 }
 .rule-details-group--Tb-LW .rule-detail .outcome-chip {
   vertical-align: middle;
diff --git a/packages/report-e2e-tests/src/examples/combined-results-with-baseline-aware-issues.snap.html b/packages/report-e2e-tests/src/examples/combined-results-with-baseline-aware-issues.snap.html
index 6ac41740ecd..8bd749c05c2 100644
--- a/packages/report-e2e-tests/src/examples/combined-results-with-baseline-aware-issues.snap.html
+++ b/packages/report-e2e-tests/src/examples/combined-results-with-baseline-aware-issues.snap.html
@@ -823,7 +823,7 @@
   border: none;
   display: flex;
   align-items: baseline;
-  width: 100%;
+  width: auto;
 }
 .collapsible-container .collapsible-control:hover {
   background-color: var(--neutral-alpha-4);
@@ -993,13 +993,27 @@
     color: buttontext !important;
   }
 }
-.kebab-menu-icon--EUIj-:hover {
-  border-style: solid !important;
-  border-width: 1px;
-  padding-left: 8px !important;
-  padding-right: 8px !important;
-  padding-top: 5px !important;
-  padding-bottom: 5px !important;
+.fileissue--x5mek {
+  font-weight: 400 !important;
+}
+.fileissue--x5mek:hover > span > svg {
+  color: var(--insights-button-hover);
+}
+.fileissue--x5mek:focus {
+  outline: 1px solid;
+}
+.copyfailuredetails--NHZE4 {
+  font-weight: 400 !important;
+}
+.copyfailuredetails--NHZE4:hover > span > svg {
+  color: var(--insights-button-hover);
+}
+.menu-Button--ElHFS:hover {
+  border: 1px solid var(--primary-text) !important;
+  color: var(--primary-text) !important;
+}
+.menu-Button--ElHFS:focus {
+  outline: 1px solid;
 }
 .kebab-menu-button--9Qt0a {
   margin-right: 8px;
@@ -1105,6 +1119,7 @@
   display: flex;
   align-items: baseline;
   text-align: left;
+  font-weight: normal;
 }
 .rule-details-group--Tb-LW .rule-detail .outcome-chip {
   vertical-align: middle;
diff --git a/packages/report-e2e-tests/src/examples/combined-results-with-issues.snap.html b/packages/report-e2e-tests/src/examples/combined-results-with-issues.snap.html
index ee8684840cd..2e231865805 100644
--- a/packages/report-e2e-tests/src/examples/combined-results-with-issues.snap.html
+++ b/packages/report-e2e-tests/src/examples/combined-results-with-issues.snap.html
@@ -823,7 +823,7 @@
   border: none;
   display: flex;
   align-items: baseline;
-  width: 100%;
+  width: auto;
 }
 .collapsible-container .collapsible-control:hover {
   background-color: var(--neutral-alpha-4);
@@ -993,13 +993,27 @@
     color: buttontext !important;
   }
 }
-.kebab-menu-icon--EUIj-:hover {
-  border-style: solid !important;
-  border-width: 1px;
-  padding-left: 8px !important;
-  padding-right: 8px !important;
-  padding-top: 5px !important;
-  padding-bottom: 5px !important;
+.fileissue--x5mek {
+  font-weight: 400 !important;
+}
+.fileissue--x5mek:hover > span > svg {
+  color: var(--insights-button-hover);
+}
+.fileissue--x5mek:focus {
+  outline: 1px solid;
+}
+.copyfailuredetails--NHZE4 {
+  font-weight: 400 !important;
+}
+.copyfailuredetails--NHZE4:hover > span > svg {
+  color: var(--insights-button-hover);
+}
+.menu-Button--ElHFS:hover {
+  border: 1px solid var(--primary-text) !important;
+  color: var(--primary-text) !important;
+}
+.menu-Button--ElHFS:focus {
+  outline: 1px solid;
 }
 .kebab-menu-button--9Qt0a {
   margin-right: 8px;
@@ -1105,6 +1119,7 @@
   display: flex;
   align-items: baseline;
   text-align: left;
+  font-weight: normal;
 }
 .rule-details-group--Tb-LW .rule-detail .outcome-chip {
   vertical-align: middle;
diff --git a/packages/report-e2e-tests/src/examples/combined-results-without-issues.snap.html b/packages/report-e2e-tests/src/examples/combined-results-without-issues.snap.html
index a32457f113f..8f385a00930 100644
--- a/packages/report-e2e-tests/src/examples/combined-results-without-issues.snap.html
+++ b/packages/report-e2e-tests/src/examples/combined-results-without-issues.snap.html
@@ -823,7 +823,7 @@
   border: none;
   display: flex;
   align-items: baseline;
-  width: 100%;
+  width: auto;
 }
 .collapsible-container .collapsible-control:hover {
   background-color: var(--neutral-alpha-4);
@@ -993,13 +993,27 @@
     color: buttontext !important;
   }
 }
-.kebab-menu-icon--EUIj-:hover {
-  border-style: solid !important;
-  border-width: 1px;
-  padding-left: 8px !important;
-  padding-right: 8px !important;
-  padding-top: 5px !important;
-  padding-bottom: 5px !important;
+.fileissue--x5mek {
+  font-weight: 400 !important;
+}
+.fileissue--x5mek:hover > span > svg {
+  color: var(--insights-button-hover);
+}
+.fileissue--x5mek:focus {
+  outline: 1px solid;
+}
+.copyfailuredetails--NHZE4 {
+  font-weight: 400 !important;
+}
+.copyfailuredetails--NHZE4:hover > span > svg {
+  color: var(--insights-button-hover);
+}
+.menu-Button--ElHFS:hover {
+  border: 1px solid var(--primary-text) !important;
+  color: var(--primary-text) !important;
+}
+.menu-Button--ElHFS:focus {
+  outline: 1px solid;
 }
 .kebab-menu-button--9Qt0a {
   margin-right: 8px;
@@ -1105,6 +1119,7 @@
   display: flex;
   align-items: baseline;
   text-align: left;
+  font-weight: normal;
 }
 .rule-details-group--Tb-LW .rule-detail .outcome-chip {
   vertical-align: middle;
diff --git a/packages/report-e2e-tests/src/examples/summary-scan-with-issues.snap.html b/packages/report-e2e-tests/src/examples/summary-scan-with-issues.snap.html
index 48eb7885d27..2cffaae5f5e 100644
--- a/packages/report-e2e-tests/src/examples/summary-scan-with-issues.snap.html
+++ b/packages/report-e2e-tests/src/examples/summary-scan-with-issues.snap.html
@@ -823,7 +823,7 @@
   border: none;
   display: flex;
   align-items: baseline;
-  width: 100%;
+  width: auto;
 }
 .collapsible-container .collapsible-control:hover {
   background-color: var(--neutral-alpha-4);
@@ -993,13 +993,27 @@
     color: buttontext !important;
   }
 }
-.kebab-menu-icon--EUIj-:hover {
-  border-style: solid !important;
-  border-width: 1px;
-  padding-left: 8px !important;
-  padding-right: 8px !important;
-  padding-top: 5px !important;
-  padding-bottom: 5px !important;
+.fileissue--x5mek {
+  font-weight: 400 !important;
+}
+.fileissue--x5mek:hover > span > svg {
+  color: var(--insights-button-hover);
+}
+.fileissue--x5mek:focus {
+  outline: 1px solid;
+}
+.copyfailuredetails--NHZE4 {
+  font-weight: 400 !important;
+}
+.copyfailuredetails--NHZE4:hover > span > svg {
+  color: var(--insights-button-hover);
+}
+.menu-Button--ElHFS:hover {
+  border: 1px solid var(--primary-text) !important;
+  color: var(--primary-text) !important;
+}
+.menu-Button--ElHFS:focus {
+  outline: 1px solid;
 }
 .kebab-menu-button--9Qt0a {
   margin-right: 8px;
@@ -1105,6 +1119,7 @@
   display: flex;
   align-items: baseline;
   text-align: left;
+  font-weight: normal;
 }
 .rule-details-group--Tb-LW .rule-detail .outcome-chip {
   vertical-align: middle;
diff --git a/packages/report-e2e-tests/src/examples/summary-scan-without-issues.snap.html b/packages/report-e2e-tests/src/examples/summary-scan-without-issues.snap.html
index a6da8970e97..5431243a905 100644
--- a/packages/report-e2e-tests/src/examples/summary-scan-without-issues.snap.html
+++ b/packages/report-e2e-tests/src/examples/summary-scan-without-issues.snap.html
@@ -823,7 +823,7 @@
   border: none;
   display: flex;
   align-items: baseline;
-  width: 100%;
+  width: auto;
 }
 .collapsible-container .collapsible-control:hover {
   background-color: var(--neutral-alpha-4);
@@ -993,13 +993,27 @@
     color: buttontext !important;
   }
 }
-.kebab-menu-icon--EUIj-:hover {
-  border-style: solid !important;
-  border-width: 1px;
-  padding-left: 8px !important;
-  padding-right: 8px !important;
-  padding-top: 5px !important;
-  padding-bottom: 5px !important;
+.fileissue--x5mek {
+  font-weight: 400 !important;
+}
+.fileissue--x5mek:hover > span > svg {
+  color: var(--insights-button-hover);
+}
+.fileissue--x5mek:focus {
+  outline: 1px solid;
+}
+.copyfailuredetails--NHZE4 {
+  font-weight: 400 !important;
+}
+.copyfailuredetails--NHZE4:hover > span > svg {
+  color: var(--insights-button-hover);
+}
+.menu-Button--ElHFS:hover {
+  border: 1px solid var(--primary-text) !important;
+  color: var(--primary-text) !important;
+}
+.menu-Button--ElHFS:focus {
+  outline: 1px solid;
 }
 .kebab-menu-button--9Qt0a {
   margin-right: 8px;
@@ -1105,6 +1119,7 @@
   display: flex;
   align-items: baseline;
   text-align: left;
+  font-weight: normal;
 }
 .rule-details-group--Tb-LW .rule-detail .outcome-chip {
   vertical-align: middle;
diff --git a/src/DetailsView/components/assessment-instance-table.tsx b/src/DetailsView/components/assessment-instance-table.tsx
index c3fd59b0136..998e7c28d53 100644
--- a/src/DetailsView/components/assessment-instance-table.tsx
+++ b/src/DetailsView/components/assessment-instance-table.tsx
@@ -13,6 +13,7 @@ import { IRenderFunction } from '@fluentui/utilities';
 import { AssessmentDefaultMessageGenerator } from 'assessments/assessment-default-message-generator';
 import { InstanceTableHeaderType, InstanceTableRow } from 'assessments/types/instance-table-data';
 import { InsightsCommandButton } from 'common/components/controls/insights-command-button';
+import { FluentUIV9Icon } from 'common/icons/fluentui-v9-icons';
 import { ManualTestStatus } from 'common/types/store-data/manual-test-status';
 import { hasIn } from 'lodash';
 import * as React from 'react';
@@ -125,7 +126,9 @@ export class AssessmentInstanceTable extends React.Component<AssessmentInstanceT
         return (
             <InsightsCommandButton
                 data-automation-id={passUnmarkedInstancesButtonAutomationId}
-                iconProps={{ iconName: 'skypeCheck' }}
+                insightsCommandButtonIconProps={{
+                    icon: <FluentUIV9Icon iconName="Checkmark20Filled" />,
+                }}
                 onClick={this.onPassUnmarkedInstances}
                 disabled={disabled}
             >
diff --git a/src/DetailsView/components/command-bar-buttons-menu.scss b/src/DetailsView/components/command-bar-buttons-menu.scss
index 93ca0e64e30..b5183d4665d 100644
--- a/src/DetailsView/components/command-bar-buttons-menu.scss
+++ b/src/DetailsView/components/command-bar-buttons-menu.scss
@@ -5,16 +5,62 @@
 
 .command-bar-buttons-menu-button {
     font-size: 16px;
+    padding: 9px !important;
+    color: $primary-text !important;
+
+    &:hover {
+        background-color: $neutral-2 !important;
+    }
+
+    &:focus {
+        outline: 1px solid;
+    }
+}
+
+.menu-list {
+    top: 19px !important;
+}
+
+.menu-item {
+    padding-bottom: unset !important;
+
+    &:hover {
+        background: none !important;
+    }
+}
+
+.menu-button {
+    align-items: flex-start !important;
+    font-weight: 400 !important;
+    margin-left: -8px !important;
+
+    &:hover {
+        background: 'none !important';
+        color: $insights-button-hover;
+
+        & > span {
+            & > svg {
+                color: $insights-button-hover;
+            }
+        }
+    }
+}
+
+.refresh-icon {
+    color: $insights-button-hover !important;
 }
 
 .command-bar-buttons-submenu {
+    min-width: fit-content;
+
     button {
         height: 36px;
     }
-
-    min-width: fit-content;
 }
 
 .command-bar-buttons-menu {
-    height: $details-view-command-bar-height;
+    height: 17px;
+    margin-left: 9px !important;
+    margin-top: 8px !important;
+    margin-bottom: 16px !important;
 }
diff --git a/src/DetailsView/components/command-bar-buttons-menu.tsx b/src/DetailsView/components/command-bar-buttons-menu.tsx
index d63904e6627..21d1b682efb 100644
--- a/src/DetailsView/components/command-bar-buttons-menu.tsx
+++ b/src/DetailsView/components/command-bar-buttons-menu.tsx
@@ -1,13 +1,17 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 import {
-    CommandBarButton,
-    IButton,
-    IContextualMenuItem,
-    IRefObject,
-    TooltipHost,
-} from '@fluentui/react';
+    Menu,
+    MenuButton,
+    MenuList,
+    MenuPopover,
+    MenuProps,
+    MenuTrigger,
+    Tooltip,
+} from '@fluentui/react-components';
+import { FluentUIV9Icon } from 'common/icons/fluentui-v9-icons';
 import { NamedFC } from 'common/react/named-fc';
+import { ButtonRefFunction } from 'DetailsView/components/details-view-command-bar';
 import { StartOverMenuItem } from 'DetailsView/components/start-over-component-factory';
 import * as React from 'react';
 import styles from './command-bar-buttons-menu.scss';
@@ -18,30 +22,33 @@ export type CommandBarButtonsMenuProps = {
     loadAssessmentButton?: JSX.Element | null;
     transferToAssessmentButton?: JSX.Element | null;
     getStartOverMenuItem: () => StartOverMenuItem;
-    buttonRef: IRefObject<IButton>;
+    buttonRef?: ButtonRefFunction;
+    hasSubMenu?: boolean;
 };
 
 export const CommandBarButtonsMenu = NamedFC<CommandBarButtonsMenuProps>(
     'CommandBarButtonsMenu',
     props => {
+        const [open, setOpen] = React.useState(false);
+        const onOpenChange: MenuProps['onOpenChange'] = (e, data) => setOpen(data.open);
         const exportButton = props.renderExportReportButton();
-        const overflowItems: IContextualMenuItem[] = [];
 
+        const overflowItems: any[] = [];
         if (exportButton != null) {
             overflowItems.push({
                 key: 'export report',
-                onRender: () => <div role="menuitem">{exportButton}</div>,
+                children: <>{exportButton}</>,
             });
         }
         if (props.saveAssessmentButton && props.loadAssessmentButton) {
             overflowItems.push(
                 {
                     key: 'save assessment',
-                    onRender: () => <div role="menuitem">{props.saveAssessmentButton}</div>,
+                    children: <>{props.saveAssessmentButton}</>,
                 },
                 {
                     key: 'load assessment',
-                    onRender: () => <div role="menuitem">{props.loadAssessmentButton}</div>,
+                    children: <>{props.loadAssessmentButton}</>,
                 },
             );
         }
@@ -49,7 +56,7 @@ export const CommandBarButtonsMenu = NamedFC<CommandBarButtonsMenuProps>(
         if (props.transferToAssessmentButton) {
             overflowItems.push({
                 key: 'transfer to assessment',
-                onRender: () => <div role="menuitem">{props.transferToAssessmentButton}</div>,
+                children: <>{props.transferToAssessmentButton}</>,
             });
         }
 
@@ -59,19 +66,33 @@ export const CommandBarButtonsMenu = NamedFC<CommandBarButtonsMenuProps>(
         });
 
         return (
-            <TooltipHost content="More actions" aria-label="More actions">
-                <CommandBarButton
-                    ariaLabel="More actions"
-                    className={styles.commandBarButtonsMenu}
-                    role="button"
-                    menuIconProps={{
-                        iconName: 'More',
-                        className: styles.commandBarButtonsMenuButton,
-                    }}
-                    menuProps={{ items: overflowItems, className: styles.commandBarButtonsSubmenu }}
-                    componentRef={props.buttonRef}
-                />
-            </TooltipHost>
+            <>
+                <Menu open={open} onOpenChange={onOpenChange}>
+                    <Tooltip content="More actions" relationship="label">
+                        <MenuTrigger disableButtonEnhancement>
+                            <MenuButton
+                                appearance="transparent"
+                                aria-label="More actions"
+                                icon={<FluentUIV9Icon iconName="MoreHorizontalRegular" />}
+                                className={styles.commandBarButtonsMenuButton}
+                                ref={() => props.buttonRef}
+                            />
+                        </MenuTrigger>
+                    </Tooltip>
+                    <MenuPopover
+                        style={{
+                            border: 'unset !important',
+                            borderRadius: 'unset !important',
+                        }}
+                    >
+                        <MenuList className={styles.menuList}>
+                            {overflowItems.map((item, index) => (
+                                <span key={index}>{item?.children}</span>
+                            ))}
+                        </MenuList>
+                    </MenuPopover>
+                </Menu>
+            </>
         );
     },
 );
diff --git a/src/DetailsView/components/command-button-styles.tsx b/src/DetailsView/components/command-button-styles.tsx
new file mode 100644
index 00000000000..d5ab409246c
--- /dev/null
+++ b/src/DetailsView/components/command-button-styles.tsx
@@ -0,0 +1,27 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { makeStyles, tokens } from '@fluentui/react-components';
+
+export const useCommandButtonStyle = makeStyles({
+    assessmentButton: {
+        fontWeight: '400 !important',
+        paddingLeft: '5px !important',
+        textDecoration: 'none !important',
+
+        '&:focus': {
+            outline: '1px solid',
+        },
+
+        '&:hover': {
+            background: 'none !important',
+            color: tokens.colorNeutralForeground2BrandHover,
+
+            '& > span': {
+                '& >svg': {
+                    color: tokens.colorNeutralForeground2BrandHover,
+                },
+            },
+        },
+    },
+});
diff --git a/src/DetailsView/components/common-dialog-styles.scss b/src/DetailsView/components/common-dialog-styles.scss
index 3647cb137f7..ff960381e2e 100644
--- a/src/DetailsView/components/common-dialog-styles.scss
+++ b/src/DetailsView/components/common-dialog-styles.scss
@@ -3,13 +3,12 @@
 div.insights-dialog-main-override {
     width: 75%;
     max-width: 500px;
+    user-select: text;
     @media screen and (width <= 500px) {
         min-width: 240px;
         width: 75%;
     }
 
-    user-select: text;
-
     .dialog-body {
         font-size: 16px;
     }
diff --git a/src/DetailsView/components/details-view-command-bar.tsx b/src/DetailsView/components/details-view-command-bar.tsx
index a73659ca89f..51765cce4fe 100644
--- a/src/DetailsView/components/details-view-command-bar.tsx
+++ b/src/DetailsView/components/details-view-command-bar.tsx
@@ -35,6 +35,7 @@ import {
     SaveAssessmentButtonFactoryDeps,
     SaveAssessmentButtonFactoryProps,
 } from 'DetailsView/components/save-assessment-button-factory';
+import { SaveAssessmentDialog } from 'DetailsView/components/save-assessment-dialog';
 import { ShouldShowReportExportButtonProps } from 'DetailsView/components/should-show-report-export-button';
 import { StartOverFactoryDeps } from 'DetailsView/components/start-over-component-factory';
 import {
@@ -75,6 +76,7 @@ export type DetailsViewCommandBarState = {
     isInvalidLoadAssessmentDialogOpen: boolean;
     isLoadAssessmentDialogOpen: boolean;
     isReportExportDialogOpen: boolean;
+    isSaveAssessmentDialogOpen: boolean;
     loadedAssessmentData: VersionedAssessmentData;
     startOverDialogState: StartOverDialogState;
 };
@@ -91,6 +93,8 @@ export type TransferToAssessmentButtonFactory = (
     props: TransferToAssessmentButtonProps,
 ) => JSX.Element | null;
 
+export type ButtonRefFunction = (ref: any) => void;
+
 export interface DetailsViewCommandBarProps {
     deps: DetailsViewCommandBarDeps;
     tabStoreData: TabStoreData;
@@ -116,6 +120,7 @@ export class DetailsViewCommandBar extends React.Component<
     public exportDialogCloseFocus?: IButton;
     public startOverDialogCloseFocus?: IButton;
     public transferToAssessmentDialogCloseFocus?: IButton;
+    public loadAssessmentDialogFocus?: IButton;
 
     public constructor(props) {
         super(props);
@@ -123,6 +128,7 @@ export class DetailsViewCommandBar extends React.Component<
             isInvalidLoadAssessmentDialogOpen: false,
             isLoadAssessmentDialogOpen: false,
             isReportExportDialogOpen: false,
+            isSaveAssessmentDialogOpen: false,
             loadedAssessmentData: {} as VersionedAssessmentData,
             startOverDialogState: 'none',
         };
@@ -142,6 +148,7 @@ export class DetailsViewCommandBar extends React.Component<
                 {this.renderLoadAssessmentDialog()}
                 {this.renderStartOverDialog()}
                 {this.renderTransferToAssessmentDialog()}
+                {this.renderSaveAssessmentDialog()}
             </div>
         );
     }
@@ -262,9 +269,20 @@ export class DetailsViewCommandBar extends React.Component<
     private renderSaveAssessmentButton = (): JSX.Element | null => {
         return this.props.switcherNavConfiguration.SaveAssessmentButton({
             ...this.props,
+            handleSaveAssessmentButtonClick: this.handleSaveAssessmentButtonClick,
         });
     };
 
+    private renderSaveAssessmentDialog = (): JSX.Element | null => {
+        return (
+            <SaveAssessmentDialog
+                {...this.props}
+                isOpen={this.state.isSaveAssessmentDialogOpen}
+                onClose={this.toggleSaveAssessmentDialog}
+            />
+        );
+    };
+
     private renderTransferToAssessmentButton = (): JSX.Element | null => {
         return this.props.switcherNavConfiguration.TransferToAssessmentButton({
             ...this.props,
@@ -326,6 +344,19 @@ export class DetailsViewCommandBar extends React.Component<
         }));
     };
 
+    private toggleSaveAssessmentDialog = () => {
+        this.setState(prevState => ({
+            isSaveAssessmentDialogOpen: !prevState.isSaveAssessmentDialogOpen,
+        }));
+    };
+
+    private handleSaveAssessmentButtonClick = (event: React.MouseEvent<any>) => {
+        this.props.deps.getAssessmentActionMessageCreator().saveAssessment(event);
+        if (this.props.userConfigurationStoreData.showSaveAssessmentDialog) {
+            this.toggleSaveAssessmentDialog();
+        }
+    };
+
     private setAssessmentState = (parsedAssessmentData: VersionedAssessmentData) => {
         this.setState(_ => ({
             loadedAssessmentData: parsedAssessmentData,
@@ -382,7 +413,7 @@ export class DetailsViewCommandBar extends React.Component<
         return {
             ...this.props,
             openDialog: this.showStartOverDialog,
-            buttonRef: ref => (this.startOverDialogCloseFocus = ref),
+            buttonRef: ref => (this.startOverDialogCloseFocus = ref ?? undefined),
         };
     };
 
diff --git a/src/DetailsView/components/failure-instance-panel-control.tsx b/src/DetailsView/components/failure-instance-panel-control.tsx
index f367db179aa..c0f592590f0 100644
--- a/src/DetailsView/components/failure-instance-panel-control.tsx
+++ b/src/DetailsView/components/failure-instance-panel-control.tsx
@@ -1,10 +1,11 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { ActionButton, Icon, ILabelStyles, ITextFieldStyles, TextField } from '@fluentui/react';
-import { Link } from '@fluentui/react-components';
+import { Icon, ILabelStyles, ITextFieldStyles, TextField } from '@fluentui/react';
+import { Link, Button } from '@fluentui/react-components';
 import { AssessmentsProvider } from 'assessments/types/assessments-provider';
 import { FlaggedComponent } from 'common/components/flagged-component';
 import { FeatureFlags } from 'common/feature-flags';
+import { FluentUIV9Icon } from 'common/icons/fluentui-v9-icons';
 import { CapturedInstanceActionType } from 'common/types/captured-instance-action-type';
 import { FailureInstanceData } from 'common/types/failure-instance-data';
 import { FeatureFlagStoreData } from 'common/types/store-data/feature-flag-store-data';
@@ -15,7 +16,6 @@ import { ActionAndCancelButtonsComponent } from './action-and-cancel-buttons-com
 import { FailureInstancePanelDetails } from './failure-instance-panel-details';
 import styles from './failure-instance-panel.scss';
 import { GenericPanel, GenericPanelProps } from './generic-panel';
-
 export interface FailureInstancePanelControlProps {
     step: string;
     test: VisualizationType;
@@ -83,19 +83,20 @@ export class FailureInstancePanelControl extends React.Component<
     private renderButton(): JSX.Element {
         if (this.props.actionType === CapturedInstanceActionType.CREATE) {
             return (
-                <ActionButton
-                    ariaLabel={FailureInstancePanelControl.addFailureInstanceLabel}
-                    ariaDescription="Open add a failure instance panel"
-                    iconProps={{ iconName: 'Add' }}
+                <Button
+                    appearance="transparent"
+                    aria-label={FailureInstancePanelControl.addFailureInstanceLabel}
+                    aria-description="Open add a failure instance panel"
+                    icon={<FluentUIV9Icon iconName="AddRegular" />}
                     onClick={this.openFailureInstancePanel}
                 >
                     {FailureInstancePanelControl.addFailureInstanceLabel}
-                </ActionButton>
+                </Button>
             );
         } else {
             return (
                 <Link className={styles.editButton} onClick={this.openFailureInstancePanel}>
-                    <Icon iconName="edit" ariaLabel={'edit instance'} />
+                    <Icon iconName="edit" aria-label={'edit instance'} />
                 </Link>
             );
         }
@@ -207,7 +208,7 @@ export class FailureInstancePanelControl extends React.Component<
         });
     };
 
-    private onValidateSelector = (event): void => {
+    private onValidateSelector = (): void => {
         this.props.addPathForValidation(this.state.currentInstance.path);
     };
 
diff --git a/src/DetailsView/components/iframe-warning.tsx b/src/DetailsView/components/iframe-warning.tsx
index 21a7f19eb42..707e64ba013 100644
--- a/src/DetailsView/components/iframe-warning.tsx
+++ b/src/DetailsView/components/iframe-warning.tsx
@@ -19,7 +19,11 @@ export const IframeWarningContainerAutomationId = 'iframe-warning-container';
 export const IframeWarning = NamedFC<IframeWarningProps>('IframeWarning', props => (
     <div data-automation-id={IframeWarningContainerAutomationId}>
         There are iframes in the target page. To have complete results,{' '}
-        <Link className="insights-link" onClick={props.onAllowPermissionsClick}>
+        <Link
+            className="insights-link"
+            onClick={props.onAllowPermissionsClick}
+            style={{ fontSize: 12 }}
+        >
             give Accessibility Insights additional permissions
         </Link>
         ; this will trigger a rescan of the test.
diff --git a/src/DetailsView/components/inline-start-over-button.tsx b/src/DetailsView/components/inline-start-over-button.tsx
index 7e98b66b229..a2438ffb3ce 100644
--- a/src/DetailsView/components/inline-start-over-button.tsx
+++ b/src/DetailsView/components/inline-start-over-button.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-
 import { InsightsCommandButton } from 'common/components/controls/insights-command-button';
+import { FluentUIV9Icon } from 'common/icons/fluentui-v9-icons';
 import { NamedFC } from 'common/react/named-fc';
 import { VisualizationType } from 'common/types/visualization-type';
 import { DetailsViewActionMessageCreator } from 'DetailsView/actions/details-view-action-message-creator';
@@ -23,11 +23,14 @@ export const InlineStartOverButton = NamedFC<InlineStartOverButtonProps>(
         return (
             <InsightsCommandButton
                 onClick={rescan}
-                text="Start over"
-                iconProps={{ iconName: 'Refresh' }}
+                insightsCommandButtonIconProps={{
+                    icon: <FluentUIV9Icon iconName="ArrowClockwiseRegular" />,
+                }}
                 className={styles.inlineStartOverButton}
                 data-automation-id={inlineStartOverButtonDataAutomationId}
-            />
+            >
+                Start over
+            </InsightsCommandButton>
         );
     },
 );
diff --git a/src/DetailsView/components/load-assessment-button.tsx b/src/DetailsView/components/load-assessment-button.tsx
index 4c23fa027fb..37a0d5f5959 100644
--- a/src/DetailsView/components/load-assessment-button.tsx
+++ b/src/DetailsView/components/load-assessment-button.tsx
@@ -1,12 +1,16 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-
 import { AssessmentDataParser } from 'common/assessment-data-parser';
 import { InsightsCommandButton } from 'common/components/controls/insights-command-button';
+import { FluentUIV9Icon } from 'common/icons/fluentui-v9-icons';
+import { NamedFC } from 'common/react/named-fc';
 import { AssessmentStoreData } from 'common/types/store-data/assessment-result-data';
 import { TabStoreData } from 'common/types/store-data/tab-store-data';
 import { UrlParser } from 'common/url-parser';
 import { DetailsViewActionMessageCreator } from 'DetailsView/actions/details-view-action-message-creator';
+import { useCommandButtonStyle } from 'DetailsView/components/command-button-styles';
+import { ButtonRefFunction } from 'DetailsView/components/details-view-command-bar';
+
 import { LoadAssessmentHelper } from 'DetailsView/components/load-assessment-helper';
 import * as React from 'react';
 
@@ -21,20 +25,29 @@ export interface LoadAssessmentButtonProps {
     tabStoreData: TabStoreData;
     assessmentStoreData: AssessmentStoreData;
     handleLoadAssessmentButtonClick: () => void;
+    isNarrowMode?: boolean;
+    buttonRef?: ButtonRefFunction;
 }
 
 export const loadAssessmentButtonAutomationId = 'load-assessment-button';
 
-export class LoadAssessmentButton extends React.Component<LoadAssessmentButtonProps> {
-    public render(): JSX.Element {
+export const LoadAssessmentButton = NamedFC<LoadAssessmentButtonProps>(
+    'LoadAssessmentButton',
+    props => {
+        const loadButtonStyles = useCommandButtonStyle();
         return (
             <InsightsCommandButton
                 data-automation-id={loadAssessmentButtonAutomationId}
-                iconProps={{ iconName: 'FabricOpenFolderHorizontal' }}
-                onClick={this.props.handleLoadAssessmentButtonClick}
+                insightsCommandButtonIconProps={{
+                    icon: <FluentUIV9Icon iconName="FolderOpenRegular" />,
+                }}
+                onClick={props.handleLoadAssessmentButtonClick}
+                className={loadButtonStyles.assessmentButton}
+                ref={props.buttonRef}
+                {...props}
             >
                 Load assessment
             </InsightsCommandButton>
         );
-    }
-}
+    },
+);
diff --git a/src/DetailsView/components/report-export-button.tsx b/src/DetailsView/components/report-export-button.tsx
index 2f7e538a71d..9d101596389 100644
--- a/src/DetailsView/components/report-export-button.tsx
+++ b/src/DetailsView/components/report-export-button.tsx
@@ -1,24 +1,34 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { IButton, IRefObject } from '@fluentui/react';
 import { InsightsCommandButton } from 'common/components/controls/insights-command-button';
+import { FluentUIV9Icon } from 'common/icons/fluentui-v9-icons';
 import { NamedFC } from 'common/react/named-fc';
+import { useCommandButtonStyle } from 'DetailsView/components/command-button-styles';
+import { ButtonRefFunction } from 'DetailsView/components/details-view-command-bar';
 import * as React from 'react';
 
 export interface ReportExportButtonProps {
     showReportExportDialog: () => void;
-    buttonRef?: IRefObject<IButton>;
+    buttonRef?: ButtonRefFunction;
+    isNarrowMode?: boolean;
 }
 
 export const reportExportButtonAutomationId = 'report-export-button';
 
 export const ReportExportButton = NamedFC<ReportExportButtonProps>('ReportExportButton', props => {
+    const exportButtonStyles = useCommandButtonStyle();
+
     return (
         <InsightsCommandButton
-            iconProps={{ iconName: 'Export' }}
+            insightsCommandButtonIconProps={{
+                icon: <FluentUIV9Icon iconName="ArrowExportRegular" />,
+            }}
             onClick={props.showReportExportDialog}
-            componentRef={props.buttonRef}
+            ref={props.buttonRef}
             data-automation-id={reportExportButtonAutomationId}
+            id={reportExportButtonAutomationId}
+            className={exportButtonStyles.assessmentButton}
+            {...props}
         >
             Export result
         </InsightsCommandButton>
diff --git a/src/DetailsView/components/requirement-instructions.scss b/src/DetailsView/components/requirement-instructions.scss
index 86cba129b64..8569cd4ed9d 100644
--- a/src/DetailsView/components/requirement-instructions.scss
+++ b/src/DetailsView/components/requirement-instructions.scss
@@ -9,6 +9,7 @@
     line-height: 20px;
     padding-left: 0.5vw;
     display: block;
+    color: $neutral-80;
 }
 
 .requirement-instructions {
diff --git a/src/DetailsView/components/requirement-view-next-requirement-configuration.tsx b/src/DetailsView/components/requirement-view-next-requirement-configuration.tsx
index 72182239a06..9cc4ac93a44 100644
--- a/src/DetailsView/components/requirement-view-next-requirement-configuration.tsx
+++ b/src/DetailsView/components/requirement-view-next-requirement-configuration.tsx
@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { PrimaryButton } from '@fluentui/react';
+import { Button } from '@fluentui/react-components';
 import { AutomatedChecks } from 'assessments/automated-checks/assessment';
 import { AssessmentsProvider } from 'assessments/types/assessments-provider';
 import { Assessment } from 'assessments/types/iassessment';
@@ -71,14 +71,17 @@ export const getNextRequirementConfigurationForQuickAssess = (
     );
     if (requirementIndex === props.deps.quickAssessRequirementKeys.length - 1) {
         return (
-            <PrimaryButton
-                text={'Complete'}
+            <Button
+                appearance="primary"
+                shape="square"
                 className={props.className}
                 onClick={
                     props.deps.dataTransferViewController.showQuickAssessToAssessmentConfirmDialog
                 }
                 data-automation-id={completeButtonAutomationId}
-            ></PrimaryButton>
+            >
+                Complete
+            </Button>
         );
     }
 
diff --git a/src/DetailsView/components/requirement-view.scss b/src/DetailsView/components/requirement-view.scss
index ee2cedab751..1cffedec0b1 100644
--- a/src/DetailsView/components/requirement-view.scss
+++ b/src/DetailsView/components/requirement-view.scss
@@ -33,13 +33,13 @@
     }
 
     .requirement-content {
+        padding-left: 32px;
+
         @media screen and (width >= 1200px) {
             display: grid;
             grid-template-columns: 1fr 308px;
         }
 
-        padding-left: 32px;
-
         .main-content {
             margin-top: 10px;
             width: 90%;
diff --git a/src/DetailsView/components/save-assessment-button-factory.tsx b/src/DetailsView/components/save-assessment-button-factory.tsx
index 9cba012860d..64090972935 100644
--- a/src/DetailsView/components/save-assessment-button-factory.tsx
+++ b/src/DetailsView/components/save-assessment-button-factory.tsx
@@ -24,6 +24,8 @@ export type SaveAssessmentButtonFactoryProps = {
     assessmentStoreData: AssessmentStoreData;
     tabStoreData: TabStoreData;
     userConfigurationStoreData: UserConfigurationStoreData;
+    isNarrowMode?: boolean;
+    handleSaveAssessmentButtonClick: (event: React.MouseEvent<any>) => void;
 };
 
 export function getSaveButtonForAssessment(props: SaveAssessmentButtonFactoryProps): JSX.Element {
diff --git a/src/DetailsView/components/save-assessment-button.tsx b/src/DetailsView/components/save-assessment-button.tsx
index c654dea7bb0..0c15a21f88d 100644
--- a/src/DetailsView/components/save-assessment-button.tsx
+++ b/src/DetailsView/components/save-assessment-button.tsx
@@ -1,13 +1,13 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { Checkbox, Dialog, DialogFooter, DialogType, PrimaryButton, Stack } from '@fluentui/react';
-import { useBoolean } from '@fluentui/react-hooks';
 import { InsightsCommandButton } from 'common/components/controls/insights-command-button';
+import { FluentUIV9Icon } from 'common/icons/fluentui-v9-icons';
 import { UserConfigMessageCreator } from 'common/message-creators/user-config-message-creator';
 import { NamedFC } from 'common/react/named-fc';
 import { UserConfigurationStoreData } from 'common/types/store-data/user-configuration-store';
 import { AssessmentActionMessageCreator } from 'DetailsView/actions/assessment-action-message-creator';
-import styles from 'DetailsView/components/common-dialog-styles.scss';
+import { useCommandButtonStyle } from 'DetailsView/components/command-button-styles';
+
 import * as React from 'react';
 
 export interface SaveAssessmentButtonDeps {
@@ -19,75 +19,29 @@ export interface SaveAssessmentButtonProps {
     href: string;
     deps: SaveAssessmentButtonDeps;
     userConfigurationStoreData: UserConfigurationStoreData;
+    handleSaveAssessmentButtonClick: (event: React.MouseEvent<any>) => void;
+    isNarrowMode?: boolean;
+    buttonRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;
 }
 
 export const SaveAssessmentButton = NamedFC<SaveAssessmentButtonProps>(
     'SaveAssessmentButton',
     props => {
-        const [dialogHidden, { setTrue: hideDialog, setFalse: showDialog }] = useBoolean(true);
-
-        function handleSaveAssessmentClick(event: React.MouseEvent<any>) {
-            props.deps.getAssessmentActionMessageCreator().saveAssessment(event);
-            if (props.userConfigurationStoreData.showSaveAssessmentDialog) {
-                showDialog();
-            }
-        }
-
-        function handleDontShowAgainClick(event: React.MouseEvent<any>, checked?: boolean) {
-            if (checked === undefined) return;
-            props.deps.userConfigMessageCreator.setSaveAssessmentDialogState(!checked);
-        }
+        const saveAssessmentStyles = useCommandButtonStyle();
 
         return (
-            <>
-                <InsightsCommandButton
-                    iconProps={{ iconName: 'Save' }}
-                    download={props.download}
-                    href={props.href}
-                    onClick={handleSaveAssessmentClick}
-                >
-                    Save assessment
-                </InsightsCommandButton>
-                <Dialog
-                    hidden={dialogHidden}
-                    onDismiss={hideDialog}
-                    dialogContentProps={{
-                        type: DialogType.normal,
-                        title: 'Assessment saved',
-                    }}
-                    modalProps={{
-                        isBlocking: false,
-                        containerClassName: styles.insightsDialogMainOverride,
-                    }}
-                >
-                    <div className={styles.dialogBody}>
-                        To load this assessment, use the <strong>Load assessment</strong> button in
-                        the Accessibility Insights Assessment command bar.
-                    </div>
-                    <DialogFooter>
-                        <Stack
-                            horizontal
-                            horizontalAlign="space-between"
-                            wrap
-                            verticalAlign="center"
-                            tokens={{ childrenGap: 6 }}
-                        >
-                            <Stack.Item grow disableShrink>
-                                <Checkbox
-                                    checked={
-                                        !props.userConfigurationStoreData.showSaveAssessmentDialog
-                                    }
-                                    label="Don't show again"
-                                    onChange={handleDontShowAgainClick}
-                                />
-                            </Stack.Item>
-                            <Stack.Item grow>
-                                <PrimaryButton onClick={hideDialog} text="Got it" />
-                            </Stack.Item>
-                        </Stack>
-                    </DialogFooter>
-                </Dialog>
-            </>
+            <InsightsCommandButton
+                as="a"
+                className={saveAssessmentStyles?.assessmentButton}
+                onClick={props.handleSaveAssessmentButtonClick}
+                insightsCommandButtonIconProps={{
+                    icon: <FluentUIV9Icon iconName="SaveRegular" />,
+                }}
+                ref={props.buttonRef}
+                {...props}
+            >
+                Save assessment
+            </InsightsCommandButton>
         );
     },
 );
diff --git a/src/DetailsView/components/save-assessment-dialog.tsx b/src/DetailsView/components/save-assessment-dialog.tsx
new file mode 100644
index 00000000000..5399718dec2
--- /dev/null
+++ b/src/DetailsView/components/save-assessment-dialog.tsx
@@ -0,0 +1,76 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { Checkbox, Dialog, DialogFooter, DialogType, PrimaryButton, Stack } from '@fluentui/react';
+import { UserConfigMessageCreator } from 'common/message-creators/user-config-message-creator';
+import { NamedFC } from 'common/react/named-fc';
+import { UserConfigurationStoreData } from 'common/types/store-data/user-configuration-store';
+import { AssessmentActionMessageCreator } from 'DetailsView/actions/assessment-action-message-creator';
+import styles from 'DetailsView/components/common-dialog-styles.scss';
+import * as React from 'react';
+
+export type SaveAssessmentDialogDeps = {
+    getAssessmentActionMessageCreator: () => AssessmentActionMessageCreator;
+    userConfigMessageCreator: UserConfigMessageCreator;
+};
+
+export const saveAssessmentDialogLoadButtonAutomationId = 'save-assessment-dialog-load-button';
+export interface SaveAssessmentDialogProps {
+    deps: SaveAssessmentDialogDeps;
+    isOpen: boolean;
+    onClose: () => void;
+    userConfigurationStoreData: UserConfigurationStoreData;
+}
+
+export const SaveAssessmentDialog = NamedFC<SaveAssessmentDialogProps>(
+    'SaveAssessmentDialog',
+    props => {
+        function handleDontShowAgainClick(event: React.MouseEvent<any>, checked?: boolean) {
+            if (checked === undefined) return;
+            props.deps.userConfigMessageCreator.setSaveAssessmentDialogState(!checked);
+        }
+        return (
+            <>
+                <Dialog
+                    hidden={!props.isOpen}
+                    onDismiss={props.onClose}
+                    dialogContentProps={{
+                        type: DialogType.normal,
+                        title: 'Assessment saved',
+                    }}
+                    modalProps={{
+                        isBlocking: false,
+                        containerClassName: styles.insightsDialogMainOverride,
+                    }}
+                >
+                    <div className={styles.dialogBody}>
+                        To load this assessment, use the <strong>Load assessment</strong> button in
+                        the Accessibility Insights Assessment command bar.
+                    </div>
+                    <DialogFooter>
+                        <Stack
+                            horizontal
+                            horizontalAlign="space-between"
+                            wrap
+                            verticalAlign="center"
+                            tokens={{ childrenGap: 6 }}
+                        >
+                            <Stack.Item grow disableShrink>
+                                <Checkbox
+                                    checked={
+                                        !props.userConfigurationStoreData.showSaveAssessmentDialog
+                                    }
+                                    label="Don't show again"
+                                    onChange={handleDontShowAgainClick}
+                                />
+                            </Stack.Item>
+                            <Stack.Item grow>
+                                <PrimaryButton onClick={props.onClose} text="Got it" />
+                            </Stack.Item>
+                        </Stack>
+                    </DialogFooter>
+                </Dialog>
+            </>
+        );
+    },
+);
diff --git a/src/DetailsView/components/start-over-component-factory.tsx b/src/DetailsView/components/start-over-component-factory.tsx
index d610fded63c..2d381389354 100644
--- a/src/DetailsView/components/start-over-component-factory.tsx
+++ b/src/DetailsView/components/start-over-component-factory.tsx
@@ -1,11 +1,13 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { IButton, IContextualMenuItem, IRefObject } from '@fluentui/react';
+import { IContextualMenuItem } from '@fluentui/react';
 import { AssessmentsProvider } from 'assessments/types/assessments-provider';
 import { InsightsCommandButton } from 'common/components/controls/insights-command-button';
+import { FluentUIV9Icon } from 'common/icons/fluentui-v9-icons';
 import { AssessmentStoreData } from 'common/types/store-data/assessment-result-data';
 import { VisualizationStoreData } from 'common/types/store-data/visualization-store-data';
 import { DetailsViewActionMessageCreator } from 'DetailsView/actions/details-view-action-message-creator';
+import { ButtonRefFunction } from 'DetailsView/components/details-view-command-bar';
 import { DetailsRightPanelConfiguration } from 'DetailsView/components/details-view-right-panel';
 import { StartOverDialogType } from 'DetailsView/components/start-over-dialog';
 import {
@@ -27,7 +29,9 @@ export type StartOverFactoryProps = {
     rightPanelConfiguration: DetailsRightPanelConfiguration;
     visualizationStoreData: VisualizationStoreData;
     openDialog: (dialogType: StartOverDialogType) => void;
-    buttonRef: IRefObject<IButton>;
+    buttonRef: ButtonRefFunction;
+    hasSubMenu?: boolean;
+    isNarrowMode?: boolean;
 };
 
 export type StartOverMenuItem = Omit<IContextualMenuItem, 'key'>;
@@ -41,9 +45,7 @@ export const AssessmentStartOverFactory: StartOverComponentFactory = {
     getStartOverComponent: props => getStartOverComponentForAssessment(props, 'down'),
     getStartOverMenuItem: props => {
         return {
-            onRender: () => (
-                <div role="menuitem">{getStartOverComponentForAssessment(props, 'left')}</div>
-            ),
+            children: <div>{getStartOverComponentForAssessment(props, 'left')}</div>,
         };
     },
 };
@@ -52,26 +54,41 @@ export const QuickAssessStartOverFactory: StartOverComponentFactory = {
     getStartOverComponent: props => getStartOverComponentForQuickAssess(props, 'down'),
     getStartOverMenuItem: props => {
         return {
-            onRender: () => (
-                <div role="menuitem">{getStartOverComponentForQuickAssess(props, 'left')}</div>
-            ),
+            children: <div>{getStartOverComponentForQuickAssess(props, 'left')}</div>,
         };
     },
 };
 
 export const FastpassStartOverFactory: StartOverComponentFactory = {
-    getStartOverComponent: props => {
-        return <InsightsCommandButton {...getStartOverPropsForFastPass(props)} />;
+    getStartOverComponent: props => getStartOverComponentFastPass(props),
+    getStartOverMenuItem: props => {
+        return {
+            children: <div>{getStartOverComponentFastPass(props)}</div>,
+        };
     },
-    getStartOverMenuItem: getStartOverPropsForFastPass,
 };
 
+export function getStartOverComponentFastPass(props: StartOverFactoryProps): JSX.Element {
+    const startOverProps = getStartOverPropsForFastPass(props);
+    return (
+        <InsightsCommandButton
+            insightsCommandButtonIconProps={{
+                icon: <FluentUIV9Icon iconName="ArrowClockwiseRegular" />,
+            }}
+            {...startOverProps}
+        >
+            {startOverProps.text}
+        </InsightsCommandButton>
+    );
+}
+
 export function getStartOverComponentForAssessment(
     props: StartOverFactoryProps,
     dropdownDirection: DropdownDirection,
 ): JSX.Element {
     const selectedTest = props.assessmentStoreData.assessmentNavState.selectedTestType;
     const test = props.deps.getProvider().forType(selectedTest);
+
     const startOverProps: StartOverProps = {
         singleTestSuffix: test!.title,
         allTestSuffix: 'Assessment',
@@ -80,6 +97,8 @@ export function getStartOverComponentForAssessment(
         buttonRef: props.buttonRef,
         rightPanelOptions: props.rightPanelConfiguration.startOverContextMenuKeyOptions,
         switcherStartOverPreferences: { showTest: true },
+        hasSubMenu: props.hasSubMenu,
+        isNarrowMode: props.isNarrowMode,
     };
 
     return <StartOverDropdown {...startOverProps} />;
@@ -101,6 +120,8 @@ export function getStartOverComponentForQuickAssess(
         buttonRef: props.buttonRef,
         rightPanelOptions: props.rightPanelConfiguration.startOverContextMenuKeyOptions,
         switcherStartOverPreferences: { showTest },
+        hasSubMenu: props.hasSubMenu,
+        isNarrowMode: props.isNarrowMode,
     };
 
     return <StartOverDropdown {...startOverProps} />;
@@ -119,5 +140,6 @@ export function getStartOverPropsForFastPass(props: StartOverFactoryProps): Star
         'data-automation-id': startOverAutomationId,
         text: 'Start over',
         className: styles.startOverMenuItem,
+        isNarrowMode: props.isNarrowMode,
     };
 }
diff --git a/src/DetailsView/components/start-over-dropdown-styles.tsx b/src/DetailsView/components/start-over-dropdown-styles.tsx
new file mode 100644
index 00000000000..ffcb99cf455
--- /dev/null
+++ b/src/DetailsView/components/start-over-dropdown-styles.tsx
@@ -0,0 +1,57 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { makeStyles, tokens } from '@fluentui/react-components';
+
+export const useStartOverDropdownStyles: any = makeStyles({
+    menuButton: {
+        alignItems: 'flex-start !important',
+        fontWeight: '400 !important',
+        color: tokens.colorNeutralForeground2,
+        paddingLeft: '4px',
+
+        ':focus': {
+            outline: '1px solid',
+        },
+
+        ':hover': {
+            background: 'none !important',
+            color: tokens.colorNeutralForeground2BrandHover,
+
+            '& > span': {
+                '& > svg': {
+                    color: tokens.colorNeutralForeground2BrandHover,
+                },
+            },
+        },
+    },
+
+    chevronIcon: {
+        color: tokens.colorNeutralForeground2,
+
+        ':hover': {
+            background: 'none !important',
+            color: tokens.colorNeutralForeground2BrandHover,
+        },
+    },
+
+    defaultChevron: {
+        color: `${tokens.colorNeutralStrokeAccessible} !important`,
+
+        ':hover': {
+            color: `unset !important`,
+        },
+    },
+
+    menuPopover: {
+        borderRadius: tokens.borderRadiusNone,
+    },
+
+    menuItem: {
+        borderRadius: tokens.borderRadiusNone,
+
+        ':hover': {
+            backgroundColor: 'unset !important',
+        },
+    },
+});
diff --git a/src/DetailsView/components/start-over-dropdown.tsx b/src/DetailsView/components/start-over-dropdown.tsx
index 438e0931e1f..ab329c243f8 100644
--- a/src/DetailsView/components/start-over-dropdown.tsx
+++ b/src/DetailsView/components/start-over-dropdown.tsx
@@ -1,32 +1,45 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
+import { DirectionalHint } from '@fluentui/react';
+
 import {
-    ContextualMenu,
-    DirectionalHint,
-    IButton,
-    IContextualMenuItem,
-    IRefObject,
-} from '@fluentui/react';
-import { IPoint } from '@fluentui/utilities';
-import { InsightsCommandButton } from 'common/components/controls/insights-command-button';
+    Menu,
+    MenuButton,
+    MenuItem,
+    MenuItemProps,
+    MenuList,
+    MenuPopover,
+    MenuTrigger,
+} from '@fluentui/react-components';
+
+import { FluentUIV9Icon } from 'common/icons/fluentui-v9-icons';
+import { NamedFC } from 'common/react/named-fc';
+import { ButtonRefFunction } from 'DetailsView/components/details-view-command-bar';
 import { StartOverDialogType } from 'DetailsView/components/start-over-dialog';
+import { useStartOverDropdownStyles } from 'DetailsView/components/start-over-dropdown-styles';
 import * as React from 'react';
 
 import { StartOverContextMenuKeyOptions } from './details-view-right-panel';
 
+export type StartOverDropdownMenuItems = MenuItemProps & {
+    name: string;
+};
+
 export interface StartOverState {
     isContextMenuVisible: boolean;
-    target?: HTMLElement | string | MouseEvent | IPoint | null;
+    target?: HTMLElement | string | MouseEvent | null;
 }
 
 export interface StartOverProps {
     singleTestSuffix: string;
     dropdownDirection: DropdownDirection;
     openDialog: (dialogType: StartOverDialogType) => void;
-    buttonRef: IRefObject<IButton>;
+    buttonRef?: ButtonRefFunction;
     allTestSuffix: string;
     rightPanelOptions: StartOverContextMenuKeyOptions;
     switcherStartOverPreferences: StartOverContextMenuKeyOptions;
+    hasSubMenu?: boolean;
+    isNarrowMode?: boolean;
 }
 
 const dropdownDirections = {
@@ -42,70 +55,26 @@ const dropdownDirections = {
 
 export type DropdownDirection = keyof typeof dropdownDirections;
 
-export class StartOverDropdown extends React.Component<StartOverProps, StartOverState> {
-    constructor(props: StartOverProps) {
-        super(props);
-
-        this.state = {
-            isContextMenuVisible: false,
-        };
-    }
-
-    public render(): JSX.Element {
-        const direction = this.props.dropdownDirection;
-        return (
-            <div>
-                <InsightsCommandButton
-                    iconProps={{
-                        iconName: 'Refresh',
-                    }}
-                    text="Start over"
-                    ariaLabel="start over menu"
-                    onClick={this.openDropdown}
-                    menuIconProps={{
-                        iconName: dropdownDirections[direction].iconName,
-                    }}
-                    componentRef={this.props.buttonRef}
-                />
-                {this.renderContextMenu()}
-            </div>
-        );
-    }
-
-    private renderContextMenu(): JSX.Element | null {
-        if (!this.state.isContextMenuVisible) {
-            return null;
-        }
-
-        const direction = this.props.dropdownDirection;
-
-        return (
-            <ContextualMenu
-                onDismiss={() => this.dismissDropdown()}
-                target={this.state.target}
-                items={this.getMenuItems()}
-                directionalHint={dropdownDirections[direction].directionalHint}
-            />
-        );
-    }
-
-    private getMenuItems(): IContextualMenuItem[] {
+export const StartOverDropdown = NamedFC<StartOverProps>('StartOverDropdown', props => {
+    const stylesValue: any = useStartOverDropdownStyles();
+    const direction = props.dropdownDirection;
+    const getMenuItemsV9 = (): StartOverDropdownMenuItems[] => {
         const {
             singleTestSuffix,
             allTestSuffix,
             rightPanelOptions,
             switcherStartOverPreferences: startOverButtonOptionPreferences,
-        } = this.props;
-        const items: IContextualMenuItem[] = [];
+        } = props;
+        const items: StartOverDropdownMenuItems[] = [];
         const assessmentKey = {
             key: 'assessment',
             name: `Start over ${allTestSuffix}`,
-            onClick: this.onStartOverAllTestsMenu,
+            onClick: onStartOverAllTestsMenu,
         };
         const testKey = {
             key: 'test',
             name: `Start over ${singleTestSuffix}`,
-            onClick: this.onStartOverTestMenu,
+            onClick: onStartOverTestMenu,
         };
 
         items.push(assessmentKey);
@@ -115,21 +84,59 @@ export class StartOverDropdown extends React.Component<StartOverProps, StartOver
         }
 
         return items;
-    }
-
-    private onStartOverTestMenu = (): void => {
-        this.props.openDialog('test');
     };
 
-    private onStartOverAllTestsMenu = (): void => {
-        this.props.openDialog('assessment');
+    const onStartOverTestMenu = (): void => {
+        props.openDialog('test');
     };
 
-    private openDropdown = (event): void => {
-        this.setState({ target: event.currentTarget, isContextMenuVisible: true });
+    const onStartOverAllTestsMenu = (): void => {
+        props.openDialog('assessment');
     };
-
-    private dismissDropdown(): void {
-        this.setState({ target: null, isContextMenuVisible: false });
-    }
-}
+    return (
+        <div>
+            <Menu>
+                <MenuTrigger disableButtonEnhancement>
+                    <MenuButton
+                        role={props.isNarrowMode ? 'menuitem' : 'button'}
+                        ref={props.buttonRef}
+                        appearance="transparent"
+                        shape="square"
+                        className={stylesValue?.menuButton}
+                        icon={<FluentUIV9Icon iconName="ArrowClockwiseRegular" />}
+                        aria-label="start over menu"
+                        menuIcon={
+                            direction === 'left' ? (
+                                <FluentUIV9Icon
+                                    iconName="ChevronRight20Regular"
+                                    customClass={stylesValue?.chevronIcon}
+                                />
+                            ) : (
+                                <FluentUIV9Icon
+                                    iconName="ChevronDown20Regular"
+                                    customClass={stylesValue?.chevronIcon}
+                                />
+                            )
+                        }
+                    >
+                        Start over
+                    </MenuButton>
+                </MenuTrigger>
+                <MenuPopover className={stylesValue?.menuPopover}>
+                    <MenuList>
+                        {getMenuItemsV9().map(item => (
+                            <MenuItem
+                                persistOnClick={false}
+                                className={stylesValue?.menuItem}
+                                key={item.key}
+                                {...item}
+                            >
+                                {item.name}
+                            </MenuItem>
+                        ))}
+                    </MenuList>
+                </MenuPopover>
+            </Menu>
+        </div>
+    );
+});
diff --git a/src/DetailsView/components/start-over-menu-item.scss b/src/DetailsView/components/start-over-menu-item.scss
index 98d78dbb984..7a7915242c4 100644
--- a/src/DetailsView/components/start-over-menu-item.scss
+++ b/src/DetailsView/components/start-over-menu-item.scss
@@ -3,8 +3,23 @@
 @import '../../common/styles/colors.scss';
 
 .start-over-menu-item {
+    font-weight: 400 !important;
+    padding-left: 3px !important;
+
+    &:hover {
+        background: none !important;
+        color: $insights-button-hover !important;
+
+        & > span {
+            & > svg {
+                color: $insights-button-hover;
+            }
+        }
+    }
+
     .start-over-menu-item-icon {
         line-height: 16px;
+        margin-left: -8px !important;
     }
 
     button:disabled,
diff --git a/src/DetailsView/components/static-content-common.scss b/src/DetailsView/components/static-content-common.scss
index 6e19200fead..4baec46015d 100644
--- a/src/DetailsView/components/static-content-common.scss
+++ b/src/DetailsView/components/static-content-common.scss
@@ -8,6 +8,8 @@
     padding-right: $fast-pass-right-panel-margin-right;
     padding-left: $fast-pass-right-panel-margin-left;
     margin-bottom: auto;
+    background-color: $neutral-2;
+    height: 100%;
 
     ol {
         -webkit-padding-start: 16px; // Chrome versions before 87 use non-standard name: https://caniuse.com/mdn-css_properties_padding-inline-start
@@ -21,9 +23,6 @@
     i {
         font-size: 16px;
     }
-
-    background-color: $neutral-2;
-    height: 100%;
 }
 
 .details-view-toggle {
diff --git a/src/DetailsView/components/tab-stops/tab-stops-instance-section-props-factory.tsx b/src/DetailsView/components/tab-stops/tab-stops-instance-section-props-factory.tsx
index 52855af3dae..c1400225d36 100644
--- a/src/DetailsView/components/tab-stops/tab-stops-instance-section-props-factory.tsx
+++ b/src/DetailsView/components/tab-stops/tab-stops-instance-section-props-factory.tsx
@@ -79,7 +79,7 @@ export const FastPassTabStopsInstanceSectionPropsFactory: TabStopsInstanceSectio
                 buttonAriaLabel: buttonAriaLabel,
                 headingLevel,
                 deps: deps,
-                onExpandToggle: (event: React.MouseEvent<HTMLDivElement>) => {
+                onExpandToggle: (event: React.MouseEvent<HTMLButtonElement>) => {
                     deps.tabStopRequirementActionMessageCreator!.toggleTabStopRequirementExpand(
                         result.id,
                         event,
diff --git a/src/DetailsView/components/transfer-to-assessment-button.tsx b/src/DetailsView/components/transfer-to-assessment-button.tsx
index d5901d940ed..95fbb73f66e 100644
--- a/src/DetailsView/components/transfer-to-assessment-button.tsx
+++ b/src/DetailsView/components/transfer-to-assessment-button.tsx
@@ -1,19 +1,21 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { IRefObject, IButton } from '@fluentui/react';
 import { InsightsCommandButton } from 'common/components/controls/insights-command-button';
+import { FluentUIV9Icon } from 'common/icons/fluentui-v9-icons';
 import { NamedFC } from 'common/react/named-fc';
+import { useCommandButtonStyle } from 'DetailsView/components/command-button-styles';
+import { ButtonRefFunction } from 'DetailsView/components/details-view-command-bar';
 import { DataTransferViewController } from 'DetailsView/data-transfer-view-controller';
 import * as React from 'react';
 
 export type TransferToAssessmentButtonDeps = {
     dataTransferViewController: DataTransferViewController;
 };
-
 export interface TransferToAssessmentButtonProps {
     deps: TransferToAssessmentButtonDeps;
-    buttonRef?: IRefObject<IButton>;
+    buttonRef?: ButtonRefFunction;
+    isNarrowMode?: boolean;
 }
 
 export const transferToAssessmentButtonAutomationId = 'transfer-to-assessment-button';
@@ -21,14 +23,20 @@ export const transferToAssessmentButtonAutomationId = 'transfer-to-assessment-bu
 export const TransferToAssessmentButton = NamedFC<TransferToAssessmentButtonProps>(
     'TransferToAssessmentButton',
     props => {
+        const saveAssessmentStyles = useCommandButtonStyle();
+
         return (
             <InsightsCommandButton
+                className={saveAssessmentStyles.assessmentButton}
                 data-automation-id={transferToAssessmentButtonAutomationId}
-                iconProps={{ iconName: 'fabricMoveToFolder' }}
+                insightsCommandButtonIconProps={{
+                    icon: <FluentUIV9Icon iconName="FolderArrowRightRegular" />,
+                }}
                 onClick={
                     props.deps.dataTransferViewController.showQuickAssessToAssessmentConfirmDialog
                 }
-                componentRef={props.buttonRef}
+                ref={props.buttonRef}
+                isNarrowMode={props.isNarrowMode}
             >
                 Move to assessment
             </InsightsCommandButton>
diff --git a/src/common/components/cards/card-footer-instance-action-buttons.scss b/src/common/components/cards/card-footer-instance-action-buttons.scss
index 98e7830d437..b41623a07ca 100644
--- a/src/common/components/cards/card-footer-instance-action-buttons.scss
+++ b/src/common/components/cards/card-footer-instance-action-buttons.scss
@@ -11,14 +11,44 @@
     @media screen and (forced-colors: active) {
         color: buttontext !important;
     }
+}
+
+.fileissue {
+    font-weight: 400 !important;
 
     &:hover {
-        border-style: solid !important;
-        border-width: 1px;
-        padding-left: 8px !important;
-        padding-right: 8px !important;
-        padding-top: 5px !important;
-        padding-bottom: 5px !important;
+        & > span {
+            & > svg {
+                color: $insights-button-hover;
+            }
+        }
+    }
+
+    &:focus {
+        outline: 1px solid;
+    }
+}
+
+.copyfailuredetails {
+    font-weight: 400 !important;
+
+    &:hover {
+        & > span {
+            & > svg {
+                color: $insights-button-hover;
+            }
+        }
+    }
+}
+
+.menu-Button {
+    &:hover {
+        border: 1px solid $primary-text !important;
+        color: $primary-text !important;
+    }
+
+    &:focus {
+        outline: 1px solid;
     }
 }
 
diff --git a/src/common/components/cards/card-footer-instance-action-buttons.tsx b/src/common/components/cards/card-footer-instance-action-buttons.tsx
index 2b61787c9c1..8aacb1e4a35 100644
--- a/src/common/components/cards/card-footer-instance-action-buttons.tsx
+++ b/src/common/components/cards/card-footer-instance-action-buttons.tsx
@@ -1,14 +1,24 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { ActionButton, DirectionalHint, IButton } from '@fluentui/react';
 import { registerIcons } from '@fluentui/react/lib/Styling';
 import {
-    CardFooterMenuItem,
+    Button,
+    Menu,
+    MenuButton,
+    MenuItem,
+    MenuList,
+    MenuPopover,
+    MenuTrigger,
+    tokens,
+} from '@fluentui/react-components';
+import {
     CardFooterMenuItemsBuilder,
     CardFooterMenuItemsDeps,
 } from 'common/components/cards/card-footer-menu-items-builder';
 import { CardsViewController } from 'common/components/cards/cards-view-controller';
+import { FluentUIV9Icon } from 'common/icons/fluentui-v9-icons';
 import { MoreActionsMenuIcon } from 'common/icons/more-actions-menu-icon';
+import { NamedFC } from 'common/react/named-fc';
 import { NarrowModeStatus } from 'DetailsView/components/narrow-mode-detector';
 import * as React from 'react';
 import { CreateIssueDetailsTextData } from '../../types/create-issue-details-text-data';
@@ -38,102 +48,113 @@ export interface CardFooterInstanceActionButtonsProps {
     narrowModeStatus?: NarrowModeStatus;
 }
 
-export class CardFooterInstanceActionButtons extends React.Component<CardFooterInstanceActionButtonsProps> {
-    private toastRef: React.RefObject<Toast>;
-    private fileIssueButtonRef: IButton | null;
-    private kebabButtonRef: IButton | null;
-    constructor(props: CardFooterInstanceActionButtonsProps) {
-        super(props);
-        this.toastRef = React.createRef();
-    }
+export const CardFooterInstanceActionButtons = NamedFC<CardFooterInstanceActionButtonsProps>(
+    'CardFooterInstanceActionButtonsProps',
+    props => {
+        const toastRef = React.useRef(null);
+        const fileIssueButtonRef: any = React.useRef(null);
+        const kebabButtonRef: any = React.useRef(null);
 
-    public render(): JSX.Element | null {
-        const menuItems = this.getMenuItems();
-        if (menuItems.length === 0) {
-            return null;
-        }
+        const focusButtonAfterDialogClosed = (): void => {
+            if (props?.narrowModeStatus?.isCardFooterCollapsed) {
+                kebabButtonRef?.current?.focus();
+            } else {
+                fileIssueButtonRef?.current?.focus();
+            }
+        };
 
-        return (
-            // The wrapper has to be a real element, not a <>, because we want the placeholder elements
-            // the dialog/toast involve to be considered as part of the button for the purposes of layout
-            // calculation in this component's parent.
-            <div onKeyDown={event => event.stopPropagation()}>
-                {this.renderButtons()}
-                {this.renderCopyFailureDetailsToast()}
-            </div>
-        );
-    }
+        const getMenuItems = () => {
+            return props.deps.cardFooterMenuItemsBuilder.getCardFooterMenuItems({
+                ...props,
+                toastRef: toastRef,
+                fileIssueButtonRef: ref => (fileIssueButtonRef.current = ref),
+                onIssueFilingSettingsDialogDismissed: focusButtonAfterDialogClosed,
+            });
+        };
 
-    public renderButtons(): JSX.Element {
-        if (this.props.narrowModeStatus?.isCardFooterCollapsed) {
-            return this.renderKebabButton();
-        } else {
-            return this.renderExpandedButtons();
-        }
-    }
+        const renderCopyFailureDetailsToast = () => {
+            const { cardInteractionSupport } = props.deps;
 
-    public renderKebabButton(): JSX.Element {
-        return (
-            <ActionButton
-                componentRef={ref => (this.kebabButtonRef = ref)}
-                ariaLabel={this.props.kebabMenuAriaLabel || 'More actions'}
-                menuIconProps={{
-                    iconName: 'MoreActionsMenuIcon',
-                    className: styles.kebabMenuIcon,
-                }}
-                menuProps={{
-                    directionalHint: DirectionalHint.bottomRightEdge,
-                    shouldFocusOnMount: true,
-                    items: this.getMenuItems(),
-                }}
-            />
-        );
-    }
+            if (!cardInteractionSupport.supportsCopyFailureDetails) {
+                return null;
+            }
 
-    public renderExpandedButtons(): JSX.Element {
-        const menuItems = this.getMenuItems();
+            return <Toast ref={toastRef} deps={props.deps} />;
+        };
 
-        return (
-            <>
-                {menuItems.map(props => (
-                    <span key={props.key}>
-                        <ActionButton
-                            onClick={props.onClick}
-                            text={props.text}
-                            iconProps={props.iconProps}
-                            className={props.key}
-                            componentRef={props.componentRef}
+        const renderKebabButton = () => {
+            return (
+                <Menu>
+                    <MenuTrigger>
+                        <MenuButton
+                            className={styles.menuButton}
+                            ref={ref => (kebabButtonRef.current = ref)}
+                            appearance="transparent"
+                            shape="square"
+                            aria-label={props?.kebabMenuAriaLabel}
+                            icon={<FluentUIV9Icon iconName="MoreVerticalRegular" />}
                         />
-                    </span>
-                ))}
-            </>
-        );
-    }
-
-    public renderCopyFailureDetailsToast(): JSX.Element | null {
-        const { cardInteractionSupport } = this.props.deps;
+                    </MenuTrigger>
+                    <MenuPopover
+                        style={{
+                            borderRadius: tokens.borderRadiusNone,
+                        }}
+                    >
+                        <MenuList>
+                            {getMenuItems().map((item: any, index: number) => (
+                                <MenuItem
+                                    className={styles.kebabMenuIcon}
+                                    key={`${item.key}-${index}-kebabMenuItem`}
+                                    icon={<FluentUIV9Icon iconName={item?.iconName} />}
+                                    {...item}
+                                >
+                                    {item?.text}
+                                </MenuItem>
+                            ))}
+                        </MenuList>
+                    </MenuPopover>
+                </Menu>
+            );
+        };
 
-        if (!cardInteractionSupport.supportsCopyFailureDetails) {
-            return null;
-        }
+        const renderExpandedButtons = () => {
+            const menuItems = getMenuItems();
+            return (
+                <>
+                    {menuItems.map(menuItem => (
+                        <Button
+                            as="button"
+                            appearance="transparent"
+                            onClick={menuItem.onClick}
+                            icon={<FluentUIV9Icon iconName={menuItem?.iconName} />}
+                            className={styles[menuItem.key]}
+                            size="medium"
+                            key={`${menuItem.key}-expandedButtons`}
+                        >
+                            {menuItem.text}
+                        </Button>
+                    ))}
+                </>
+            );
+        };
 
-        return <Toast ref={this.toastRef} deps={this.props.deps} />;
-    }
+        const renderButtons = () => {
+            if (props.narrowModeStatus?.isCardFooterCollapsed) {
+                return renderKebabButton();
+            } else {
+                return renderExpandedButtons();
+            }
+        };
 
-    private getMenuItems(): CardFooterMenuItem[] {
-        return this.props.deps.cardFooterMenuItemsBuilder.getCardFooterMenuItems({
-            ...this.props,
-            toastRef: this.toastRef,
-            fileIssueButtonRef: ref => (this.fileIssueButtonRef = ref),
-            onIssueFilingSettingsDialogDismissed: this.focusButtonAfterDialogClosed,
-        });
-    }
+        const menuItems = getMenuItems();
+        const menuItemsJsx =
+            menuItems?.length === 0 ? null : (
+                <div onKeyDown={event => event.stopPropagation()}>
+                    {renderButtons()}
+                    {renderCopyFailureDetailsToast()}
+                </div>
+            );
 
-    private focusButtonAfterDialogClosed = (): void => {
-        if (this.props.narrowModeStatus?.isCardFooterCollapsed) {
-            this.kebabButtonRef?.focus();
-        } else {
-            this.fileIssueButtonRef?.focus();
-        }
-    };
-}
+        return menuItemsJsx;
+    },
+);
diff --git a/src/common/components/cards/card-footer-menu-items-builder.ts b/src/common/components/cards/card-footer-menu-items-builder.ts
index e602a20f446..62471a69d31 100644
--- a/src/common/components/cards/card-footer-menu-items-builder.ts
+++ b/src/common/components/cards/card-footer-menu-items-builder.ts
@@ -1,13 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import {
-    IButton,
-    IButtonProps,
-    IContextualMenuItem,
-    IContextualMenuRenderItem,
-    IRefObject,
-} from '@fluentui/react';
+import { IButtonProps, IContextualMenuItem } from '@fluentui/react';
 import { IssueDetailsTextGenerator } from 'background/issue-details-text-generator';
 import { CardInteractionSupport } from 'common/components/cards/card-interaction-support';
 import { CardsViewController } from 'common/components/cards/cards-view-controller';
@@ -18,13 +12,14 @@ import { CreateIssueDetailsTextData } from 'common/types/create-issue-details-te
 import { ToolData } from 'common/types/store-data/unified-data-interface';
 import { UserConfigurationStoreData } from 'common/types/store-data/user-configuration-store';
 import { DetailsViewActionMessageCreator } from 'DetailsView/actions/details-view-action-message-creator';
+import { ButtonRefFunction } from 'DetailsView/components/details-view-command-bar';
 import { IssueFilingServiceProvider } from 'issue-filing/issue-filing-service-provider';
 import React from 'react';
 
 export type CardFooterMenuItem = IContextualMenuItem & IButtonProps;
 
 export type CardFooterMenuItemsProps = {
-    fileIssueButtonRef: IRefObject<IButton> & IRefObject<IContextualMenuRenderItem>;
+    fileIssueButtonRef: ButtonRefFunction;
     toastRef: React.RefObject<Toast>;
     issueDetailsData: CreateIssueDetailsTextData;
     userConfigurationStoreData: UserConfigurationStoreData | null;
@@ -54,11 +49,9 @@ export class CardFooterMenuItemsBuilder {
             items.push({
                 key: 'fileissue',
                 text: 'File issue',
-                iconProps: {
-                    iconName: 'ladybugSolid',
-                },
+                iconName: 'BugFilled',
                 onClick: event => this.fileIssue(props, event),
-                componentRef: props.fileIssueButtonRef,
+                componentRef: () => props.fileIssueButtonRef,
             });
         }
 
@@ -66,9 +59,7 @@ export class CardFooterMenuItemsBuilder {
             items.push({
                 key: 'copyfailuredetails',
                 text: `Copy failure details`,
-                iconProps: {
-                    iconName: 'copy',
-                },
+                iconName: 'DocumentCopyRegular',
                 onClick: event => void this.copyFailureDetails(props, event),
             });
         }
diff --git a/src/common/components/cards/collapsible-component-cards.scss b/src/common/components/cards/collapsible-component-cards.scss
index 7a08179bd9e..767121076ca 100644
--- a/src/common/components/cards/collapsible-component-cards.scss
+++ b/src/common/components/cards/collapsible-component-cards.scss
@@ -36,8 +36,9 @@
         border: none;
         display: flex;
         align-items: baseline;
-        width: 100%;
+        width: auto;
         height: fit-content;
+        margin-left: -5px;
 
         &:hover {
             background-color: $neutral-alpha-4;
@@ -58,7 +59,7 @@
     }
 
     .collapsible-container-content {
-        margin-left: 24px;
+        margin-left: 27px;
 
         &[aria-hidden='true'] {
             display: none;
diff --git a/src/common/components/cards/collapsible-component-cards.tsx b/src/common/components/cards/collapsible-component-cards.tsx
index db55a829077..abb81b60c5d 100644
--- a/src/common/components/cards/collapsible-component-cards.tsx
+++ b/src/common/components/cards/collapsible-component-cards.tsx
@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { ActionButton } from '@fluentui/react';
+import { Button } from '@fluentui/react-components';
 import { css } from '@fluentui/utilities';
 import { HeadingElementForLevel, HeadingLevel } from 'common/components/heading-element-for-level';
 import { NamedFC } from 'common/react/named-fc';
@@ -24,7 +24,7 @@ export interface CollapsibleComponentCardsProps {
     containerClassName?: string;
     buttonAriaLabel?: string;
     deps: CollapsibleComponentCardsDeps;
-    onExpandToggle: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onExpandToggle: (event: React.MouseEvent<HTMLButtonElement>) => void;
     isExpanded?: boolean;
 }
 
@@ -58,7 +58,7 @@ const CollapsibleComponentCards = NamedFC<CollapsibleComponentCardsProps>(
             collapsedCSSClassName = null;
         }
 
-        const onClick = (event: React.MouseEvent<HTMLDivElement>) => {
+        const onClick = (event: React.MouseEvent<HTMLButtonElement>) => {
             if (event.nativeEvent.detail === 0 && deps.setFocusVisibility != null) {
                 // 0 => keyboard event
                 deps.setFocusVisibility(true);
@@ -77,15 +77,15 @@ const CollapsibleComponentCards = NamedFC<CollapsibleComponentCardsProps>(
                 )}
             >
                 <HeadingElementForLevel headingLevel={headingLevel as HeadingLevel}>
-                    <ActionButton
+                    <Button
                         data-automation-id={collapsibleButtonAutomationId}
                         className={styles.collapsibleControl}
                         onClick={onClick}
                         aria-expanded={showContent}
-                        ariaLabel={buttonAriaLabel}
+                        aria-label={buttonAriaLabel}
                     >
                         <span className={styles.collapsibleTitle}>{header}</span>
-                    </ActionButton>
+                    </Button>
                 </HeadingElementForLevel>
                 {contentWrapper}
             </div>
diff --git a/src/common/components/cards/expand-collapse-all-button-styles.tsx b/src/common/components/cards/expand-collapse-all-button-styles.tsx
new file mode 100644
index 00000000000..cccc508b1a3
--- /dev/null
+++ b/src/common/components/cards/expand-collapse-all-button-styles.tsx
@@ -0,0 +1,19 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+import { makeStyles, tokens } from '@fluentui/react-components';
+
+export const useExpandCollapseAllButtonStyles: any = makeStyles({
+    expandCollapseAllButton: {
+        display: 'flex',
+        padding: 'unset',
+        paddingRight: '27px!important',
+        paddingLeft: '1px!important',
+        marginLeft: '1px!important',
+        marginTop: '2px!important',
+        fontWeight: tokens?.fontSizeBase400,
+    },
+
+    customStyleIcon: {
+        color: tokens.colorNeutralForeground2BrandHover,
+    },
+});
diff --git a/src/common/components/cards/expand-collapse-all-button.scss b/src/common/components/cards/expand-collapse-all-button.scss
deleted file mode 100644
index 16378df2f2a..00000000000
--- a/src/common/components/cards/expand-collapse-all-button.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// Copyright (c) Microsoft Corporation. All rights reserved.
-// Licensed under the MIT License.
-.expand-collapse-all-button {
-    display: flex;
-    padding: unset;
-    padding-right: 27px;
-    margin-left: -2px;
-    margin-top: 2px;
-}
diff --git a/src/common/components/cards/expand-collapse-all-button.tsx b/src/common/components/cards/expand-collapse-all-button.tsx
index be52744e834..218cb8b6bbd 100644
--- a/src/common/components/cards/expand-collapse-all-button.tsx
+++ b/src/common/components/cards/expand-collapse-all-button.tsx
@@ -1,10 +1,11 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { ActionButton } from '@fluentui/react';
+import { Button } from '@fluentui/react-components';
+import { useExpandCollapseAllButtonStyles } from 'common/components/cards/expand-collapse-all-button-styles';
+import { FluentUIV9Icon } from 'common/icons/fluentui-v9-icons';
 import { CardSelectionMessageCreator } from 'common/message-creators/card-selection-message-creator';
 import { NamedFC } from 'common/react/named-fc';
 import * as React from 'react';
-import styles from './expand-collapse-all-button.scss';
 
 export type ExpandCollapseAllButtonProps = {
     allCardsCollapsed: boolean;
@@ -14,30 +15,48 @@ export type ExpandCollapseAllButtonProps = {
 export const ExpandCollapseAllButton = NamedFC<ExpandCollapseAllButtonProps>(
     'ExpandCollapseAllButton',
     props => {
+        const getStyles: any = useExpandCollapseAllButtonStyles();
         const { allCardsCollapsed, cardSelectionMessageCreator } = props;
 
         let expandCollapseAllButtonHandler = cardSelectionMessageCreator.collapseAllRules;
         let buttonText = 'Collapse all';
-        let iconName = 'ChevronDown';
         let ariaLabel: string | undefined = undefined;
 
         if (allCardsCollapsed) {
             expandCollapseAllButtonHandler = cardSelectionMessageCreator.expandAllRules;
             buttonText = 'Expand all';
-            iconName = 'ChevronRight';
             ariaLabel = 'Expand all rules to show failed instances.';
         }
 
+        const IconName = () => {
+            if (allCardsCollapsed) {
+                return (
+                    <FluentUIV9Icon
+                        iconName="ChevronRight32Regular"
+                        customClass={getStyles?.customStyleIcon}
+                    />
+                );
+            }
+            return (
+                <FluentUIV9Icon
+                    iconName="ChevronDown32Regular"
+                    customClass={getStyles?.customStyleIcon}
+                />
+            );
+        };
+
         return (
-            <ActionButton
-                iconProps={{ iconName }}
-                onClick={expandCollapseAllButtonHandler}
-                aria-expanded={!allCardsCollapsed}
+            <Button
+                icon={<IconName />}
+                size="medium"
+                appearance="transparent"
+                className={getStyles?.expandCollapseAllButton}
                 aria-label={ariaLabel}
-                className={styles.expandCollapseAllButton}
+                aria-expanded={!allCardsCollapsed}
+                onClick={expandCollapseAllButtonHandler}
             >
                 {buttonText}
-            </ActionButton>
+            </Button>
         );
     },
 );
diff --git a/src/common/components/cards/rules-with-instances.scss b/src/common/components/cards/rules-with-instances.scss
index bacbcc52b6e..8d315a3daf8 100644
--- a/src/common/components/cards/rules-with-instances.scss
+++ b/src/common/components/cards/rules-with-instances.scss
@@ -13,6 +13,7 @@
         display: flex;
         align-items: baseline;
         text-align: left;
+        font-weight: normal;
 
         :global(.outcome-chip) {
             vertical-align: middle;
diff --git a/src/common/components/cards/rules-with-instances.tsx b/src/common/components/cards/rules-with-instances.tsx
index 20d70033233..1c8d91cb4c1 100644
--- a/src/common/components/cards/rules-with-instances.tsx
+++ b/src/common/components/cards/rules-with-instances.tsx
@@ -85,7 +85,7 @@ export const RulesWithInstances = NamedFC<RulesWithInstancesProps>(
                 buttonAriaLabel: buttonAriaLabel,
                 headingLevel,
                 deps: deps,
-                onExpandToggle: (event: React.MouseEvent<HTMLDivElement>) => {
+                onExpandToggle: (event: React.MouseEvent<HTMLButtonElement>) => {
                     cardSelectionMessageCreator?.toggleRuleExpandCollapse(rule.id, event);
                 },
                 isExpanded: rule.isExpanded,
diff --git a/src/common/components/collapsible-component.scss b/src/common/components/collapsible-component.scss
index d570ebce936..b5aec73b135 100644
--- a/src/common/components/collapsible-component.scss
+++ b/src/common/components/collapsible-component.scss
@@ -8,15 +8,18 @@ span.collapsible-title {
 }
 
 .collapsible {
-    padding: 0;
     cursor: pointer;
-    width: 100%;
+    width: auto;
     border: none;
     outline: none;
     line-height: 0.25px;
     display: flex;
     justify-content: flex-start;
     align-items: center;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-right: 27px !important;
+    padding-left: 1px !important;
 
     h2 {
         font-weight: $normal-title-font-weight;
diff --git a/src/common/components/collapsible-component.tsx b/src/common/components/collapsible-component.tsx
index 74f7e739002..e020f3cda5a 100644
--- a/src/common/components/collapsible-component.tsx
+++ b/src/common/components/collapsible-component.tsx
@@ -1,8 +1,9 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { ActionButton } from '@fluentui/react';
+import { Button } from '@fluentui/react-components';
 import { css } from '@fluentui/utilities';
 import styles from 'common/components/collapsible-component.scss';
+import { FluentUIV9Icon } from 'common/icons/fluentui-v9-icons';
 import * as React from 'react';
 
 export interface CollapsibleComponentProps {
@@ -20,9 +21,6 @@ export class CollapsibleComponent extends React.Component<
     CollapsibleComponentProps,
     CollapsibleComponentState
 > {
-    private readonly iconNameDown = 'ChevronDown';
-    private readonly iconNameUp = 'ChevronRight';
-
     constructor(props: CollapsibleComponentProps) {
         super(props);
         this.state = { showContent: true };
@@ -34,11 +32,9 @@ export class CollapsibleComponent extends React.Component<
 
     public render(): JSX.Element {
         const showContent = this.state.showContent;
-        let iconName = this.iconNameUp;
         let content: JSX.Element | null = null;
 
         if (showContent) {
-            iconName = this.iconNameDown;
             content = (
                 <div className={css(this.props.contentClassName, styles.collapsibleContent)}>
                     {this.props.content}
@@ -48,14 +44,19 @@ export class CollapsibleComponent extends React.Component<
 
         return (
             <div className={css(this.props.containerClassName)}>
-                <ActionButton
+                <Button
                     className={styles.collapsible}
-                    iconProps={{ iconName: iconName }}
+                    appearance="transparent"
                     onClick={this.onClick}
                     aria-expanded={showContent}
                 >
+                    {showContent ? (
+                        <FluentUIV9Icon iconName="ChevronDown24Regular" />
+                    ) : (
+                        <FluentUIV9Icon iconName="ChevronRight24Regular" />
+                    )}
                     {this.props.header}
-                </ActionButton>
+                </Button>
                 {content}
             </div>
         );
diff --git a/src/common/components/controls/insights-command-button-style.tsx b/src/common/components/controls/insights-command-button-style.tsx
new file mode 100644
index 00000000000..46448173caf
--- /dev/null
+++ b/src/common/components/controls/insights-command-button-style.tsx
@@ -0,0 +1,14 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { makeStyles, tokens } from '@fluentui/react-components';
+
+export const useInsightsCommandButtonStyle = makeStyles({
+    button: {
+        fontWeight: tokens?.fontWeightRegular,
+    },
+
+    menuItem: {
+        border: 'unset !important',
+    },
+});
diff --git a/src/common/components/controls/insights-command-button.scss b/src/common/components/controls/insights-command-button.scss
index 3be08255899..82e426e2bae 100644
--- a/src/common/components/controls/insights-command-button.scss
+++ b/src/common/components/controls/insights-command-button.scss
@@ -15,6 +15,10 @@
         }
     }
 
+    &:hover {
+        background: none !important;
+    }
+
     &:active:not(:disabled) {
         .command-bar-button-icon {
             color: $primary-text;
diff --git a/src/common/components/controls/insights-command-button.tsx b/src/common/components/controls/insights-command-button.tsx
index bd8b2f8e213..d9e0ac1cf69 100644
--- a/src/common/components/controls/insights-command-button.tsx
+++ b/src/common/components/controls/insights-command-button.tsx
@@ -1,25 +1,55 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { ActionButton, css, IButtonProps } from '@fluentui/react';
+import { mergeClasses, MenuButtonProps, Button, MenuItem } from '@fluentui/react-components';
+
+import { useInsightsCommandButtonStyle } from 'common/components/controls/insights-command-button-style';
 import { NamedFC } from 'common/react/named-fc';
 import * as React from 'react';
 import styles from './insights-command-button.scss';
 
-export type InsightsCommandButtonProps = IButtonProps;
+export type InsightsCommandButtonIconProps = {
+    className?: string;
+    icon?: JSX.Element;
+};
+
+export type InsightsCommandButtonProps = (MenuButtonProps | any) & {
+    insightsCommandButtonIconProps?: InsightsCommandButtonIconProps;
+    isNarrowMode?: boolean;
+};
 
 // See https://www.figma.com/file/Wj4Ggf6GGQBQkiDIaHfXRX2B/Accessibility-Insights%3A-Styles?node-id=1%3A27
 export const InsightsCommandButton = NamedFC<InsightsCommandButtonProps>(
     'InsightsCommandButton',
-    props => {
-        return (
-            <ActionButton
+    React.forwardRef((props, ref) => {
+        const overrides = useInsightsCommandButtonStyle();
+        return props.isNarrowMode ? (
+            <MenuItem
+                className={overrides.menuItem}
+                icon={{
+                    children: props.insightsCommandButtonIconProps?.icon,
+                }}
+                ref={ref}
                 {...props}
-                className={css(styles.insightsCommandButton, props.className)}
-                iconProps={{
-                    ...props.iconProps,
-                    className: css(styles.commandBarButtonIcon, props.iconProps?.className),
+            >
+                {props.children}
+            </MenuItem>
+        ) : (
+            <Button
+                appearance="transparent"
+                className={mergeClasses(
+                    styles?.insightsCommandButton,
+                    props.className,
+                    overrides?.button,
+                )}
+                shape="square"
+                icon={{
+                    children: props.insightsCommandButtonIconProps?.icon,
                 }}
-            />
+                ref={ref}
+                {...props}
+            >
+                {props.children}
+            </Button>
         );
-    },
+    }),
 );
diff --git a/src/common/components/theme.tsx b/src/common/components/theme.tsx
index f1d6f53e6c8..f228e9276e5 100644
--- a/src/common/components/theme.tsx
+++ b/src/common/components/theme.tsx
@@ -70,7 +70,10 @@ export class ThemeInner extends React.Component<ThemeInnerProps, ThemeState> {
     private loadAppropriateTheme(isHighContrast: boolean): void {
         const appropriateThemeV8 = isHighContrast ? HighContrastTheme : DefaultTheme;
         const appropriateThemeV9 = isHighContrast ? ThemeV9DarkTheme : webLightTheme;
-        this.setState({ themeValueV8: appropriateThemeV8, themeValueV9: appropriateThemeV9 });
+        this.setState({
+            themeValueV8: appropriateThemeV8,
+            themeValueV9: appropriateThemeV9,
+        });
     }
 
     private isHighContrastEnabled(props: ThemeInnerProps): boolean {
diff --git a/src/common/icons/fluentui-v9-icons.tsx b/src/common/icons/fluentui-v9-icons.tsx
new file mode 100644
index 00000000000..8471ec26417
--- /dev/null
+++ b/src/common/icons/fluentui-v9-icons.tsx
@@ -0,0 +1,74 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+import { makeStyles, mergeClasses, tokens } from '@fluentui/react-components';
+import {
+    ArrowExportRegular,
+    FolderArrowRightRegular,
+    FolderOpenRegular,
+    SaveRegular,
+    ArrowClockwiseRegular,
+    Checkmark20Filled,
+    ChevronDown20Regular,
+    ChevronRight20Regular,
+    InfoRegular,
+    DocumentCopyRegular,
+    BugFilled,
+    MoreVerticalRegular,
+    ChevronDown32Regular,
+    ChevronRight32Regular,
+    MoreHorizontalRegular,
+    AddRegular,
+    ChevronDown24Regular,
+    ChevronRight24Regular,
+} from '@fluentui/react-icons';
+import { NamedFC } from 'common/react/named-fc';
+import { isUndefined } from 'lodash';
+
+import React from 'react';
+
+export const Icons = {
+    ArrowExportRegular: ArrowExportRegular,
+    FolderArrowRightRegular: FolderArrowRightRegular,
+    FolderOpenRegular: FolderOpenRegular,
+    SaveRegular: SaveRegular,
+    ArrowClockwiseRegular: ArrowClockwiseRegular,
+    Checkmark20Filled: Checkmark20Filled,
+    ChevronDown20Regular: ChevronDown20Regular,
+    ChevronRight20Regular: ChevronRight20Regular,
+    InfoRegular: InfoRegular,
+    BugFilled: BugFilled,
+    DocumentCopyRegular: DocumentCopyRegular,
+    MoreVerticalRegular: MoreVerticalRegular,
+    ChevronDown32Regular: ChevronDown32Regular,
+    ChevronRight32Regular: ChevronRight32Regular,
+    MoreHorizontalRegular: MoreHorizontalRegular,
+    AddRegular: AddRegular,
+    ChevronDown24Regular: ChevronDown24Regular,
+    ChevronRight24Regular: ChevronRight24Regular,
+};
+
+export const useIconStyles = makeStyles({
+    refreshIcon: {
+        paddingLeft: '14px',
+    },
+    IconTheme: {
+        color: tokens.colorCompoundBrandStrokeHover,
+    },
+});
+
+export type FluentUIV9IconProps = {
+    iconName: string | any;
+    customClass?: string | any;
+};
+
+export const FluentUIV9Icon = NamedFC<FluentUIV9IconProps>('FluentUIV9Icon', props => {
+    const styleClasses: any = useIconStyles();
+    const isIconAvailable = !isUndefined(props?.iconName) && Icons[props.iconName];
+
+    if (isIconAvailable) {
+        const Icon = Icons[props?.iconName];
+        return <Icon className={mergeClasses(styleClasses?.IconTheme, props?.customClass)} />;
+    }
+
+    return null;
+});
diff --git a/src/common/styles/theme-v9-dark-theme.ts b/src/common/styles/theme-v9-dark-theme.ts
index 225f8bcf602..2e6469365db 100644
--- a/src/common/styles/theme-v9-dark-theme.ts
+++ b/src/common/styles/theme-v9-dark-theme.ts
@@ -1,6 +1,5 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-
 import { webDarkTheme } from '@fluentui/react-components';
 
 // This is a copy of our ThemeDark from V9 slightly adjusted to account for the page background
@@ -9,4 +8,6 @@ import { webDarkTheme } from '@fluentui/react-components';
 export const ThemeV9DarkTheme = {
     ...webDarkTheme,
     colorNeutralBackground1: '#161616',
+    colorNeutralForeground2: '#fff',
+    colorCompoundBrandStrokeHover: '#ffffff',
 };
diff --git a/src/popup/Styles/popup.scss b/src/popup/Styles/popup.scss
index 50ba7f6c024..e0f55af42cd 100644
--- a/src/popup/Styles/popup.scss
+++ b/src/popup/Styles/popup.scss
@@ -153,12 +153,11 @@ html {
 }
 
 #popup-container .ms-Link {
+    color: $communication-primary;
+    font-weight: 600;
     @media screen and (forced-colors: active) {
         color: linktext !important;
     }
-
-    color: $communication-primary;
-    font-weight: 600;
 }
 
 #popup-container .main-section {
diff --git a/src/reports/automated-checks-report.scss b/src/reports/automated-checks-report.scss
index d8ddd79bc5b..06a2b93c72c 100644
--- a/src/reports/automated-checks-report.scss
+++ b/src/reports/automated-checks-report.scss
@@ -89,7 +89,7 @@ $outcome-not-applicable-summary-color: $neutral-outcome;
         border: none;
         display: flex;
         align-items: baseline;
-        width: 100%;
+        width: auto;
 
         &:hover {
             background-color: $neutral-alpha-4;
diff --git a/src/reports/components/instance-details.scss b/src/reports/components/instance-details.scss
index ea035bd6225..13f7e6f479f 100644
--- a/src/reports/components/instance-details.scss
+++ b/src/reports/components/instance-details.scss
@@ -80,6 +80,7 @@
         padding-bottom: 14px;
         padding-left: 0;
         padding-right: 20px;
+        border-bottom: 0.5px solid $neutral-10;
 
         > * {
             margin-top: 12px;
@@ -89,8 +90,6 @@
             padding: 0;
         }
 
-        border-bottom: 0.5px solid $neutral-10;
-
         &:last-child {
             border-bottom: none;
         }
diff --git a/src/reports/components/outcome-summary-bar.scss b/src/reports/components/outcome-summary-bar.scss
index 7990591b419..984a03786b2 100644
--- a/src/reports/components/outcome-summary-bar.scss
+++ b/src/reports/components/outcome-summary-bar.scss
@@ -51,6 +51,7 @@ $outcome-not-applicable-color: $neutral-outcome;
     }
 
     .fail {
+        background-color: $outcome-fail-color;
         @extend %block;
         @include cross-icon-styles($outcome-summary-icon-size, 0, $outcome-fail-color);
 
@@ -58,11 +59,10 @@ $outcome-not-applicable-color: $neutral-outcome;
             bottom: -1px;
             margin-right: 8px;
         }
-
-        background-color: $outcome-fail-color;
     }
 
     .pass {
+        background-color: $outcome-pass-color;
         @extend %block;
         @include check-icon-styles($outcome-summary-icon-size, 0, $outcome-pass-color);
 
@@ -71,12 +71,11 @@ $outcome-not-applicable-color: $neutral-outcome;
             margin-right: 8px;
             margin-left: 4px;
         }
-
-        background-color: $outcome-pass-color;
     }
 
     .inapplicable,
     .unscannable {
+        background-color: $outcome-not-applicable-color;
         @extend %block;
         @include inapplicable-icon-styles(
             $outcome-summary-icon-size,
@@ -89,11 +88,13 @@ $outcome-not-applicable-color: $neutral-outcome;
             margin-right: 8px;
             margin-left: 4px;
         }
-
-        background-color: $outcome-not-applicable-color;
     }
 
     .incomplete {
+        background-color: $outcome-incomplete-summary-background;
+        color: $outcome-incomplete-summary-consistent-foreground;
+        border: 2px $outcome-incomplete-border-color solid;
+        height: 12px;
         @extend %block;
         @include incomplete-icon-styles(14px, 3px);
 
@@ -101,11 +102,6 @@ $outcome-not-applicable-color: $neutral-outcome;
             margin-right: 6px;
             border-color: $outcome-incomplete-summary-consistent-foreground;
         }
-
-        background-color: $outcome-incomplete-summary-background;
-        color: $outcome-incomplete-summary-consistent-foreground;
-        border: 2px $outcome-incomplete-border-color solid;
-        height: 12px;
     }
 
     .summary-bar-left-edge {
diff --git a/src/reports/components/report-sections/collapsible-result-section.tsx b/src/reports/components/report-sections/collapsible-result-section.tsx
index 84a3dc5dcb8..c9b5a88a4fb 100644
--- a/src/reports/components/report-sections/collapsible-result-section.tsx
+++ b/src/reports/components/report-sections/collapsible-result-section.tsx
@@ -37,7 +37,7 @@ export const CollapsibleResultSection = NamedFC<CollapsibleResultSectionProps>(
             content: <RulesOnly {...props} />,
             headingLevel: props.headingLevel,
             testKey,
-            onExpandToggle: (event: React.MouseEvent<HTMLDivElement>) => {
+            onExpandToggle: (event: React.MouseEvent<HTMLButtonElement>) => {
                 cardSelectionMessageCreator?.toggleRuleExpandCollapse(containerId, event);
             },
         });
diff --git a/src/reports/components/report-sections/combined-report-rules-only-sections.tsx b/src/reports/components/report-sections/combined-report-rules-only-sections.tsx
index ab0f99433f6..4d6ea6994ba 100644
--- a/src/reports/components/report-sections/combined-report-rules-only-sections.tsx
+++ b/src/reports/components/report-sections/combined-report-rules-only-sections.tsx
@@ -43,7 +43,7 @@ const makeCombinedReportRulesOnlySection = (options: {
                         outcomeType={outcomeType}
                     />
                 ),
-                onExpandToggle: (event: React.MouseEvent<HTMLDivElement>) => {
+                onExpandToggle: (event: React.MouseEvent<HTMLButtonElement>) => {
                     cardSelectionMessageCreator?.toggleRuleExpandCollapse(sectionId, event);
                 },
                 headingLevel: 3,
diff --git a/src/reports/components/report-sections/report-collapsible-container.tsx b/src/reports/components/report-sections/report-collapsible-container.tsx
index 288a0016460..6407b6ae983 100644
--- a/src/reports/components/report-sections/report-collapsible-container.tsx
+++ b/src/reports/components/report-sections/report-collapsible-container.tsx
@@ -14,7 +14,7 @@ export interface ReportCollapsibleContainerProps {
     containerClassName?: string;
     buttonAriaLabel?: string;
     testKey?: string;
-    onExpandToggle?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onExpandToggle?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 const ReportCollapsibleContainer = NamedFC<ReportCollapsibleContainerProps>(
diff --git a/src/tests/end-to-end/common/pretty-print-axe-violations.ts b/src/tests/end-to-end/common/pretty-print-axe-violations.ts
index fadf2ac027f..6b7c408cc08 100644
--- a/src/tests/end-to-end/common/pretty-print-axe-violations.ts
+++ b/src/tests/end-to-end/common/pretty-print-axe-violations.ts
@@ -28,6 +28,9 @@ export function normalizeSelector(selector: string): string {
         const identifier = output.slice(1);
         output = `${output[0]}${normalizeOfficeFabricClassName(identifier)}`;
     }
+    if (/i\S+nth-child\(\d\)/.test(output)) {
+        output = 'i:nth-child(0)';
+    }
     return output;
 }
 
diff --git a/src/tests/end-to-end/tests/details-view/__snapshots__/reflow-ui.test.ts.snap b/src/tests/end-to-end/tests/details-view/__snapshots__/reflow-ui.test.ts.snap
index f1048a42543..22a4d8b89d6 100644
--- a/src/tests/end-to-end/tests/details-view/__snapshots__/reflow-ui.test.ts.snap
+++ b/src/tests/end-to-end/tests/details-view/__snapshots__/reflow-ui.test.ts.snap
@@ -4,9 +4,79 @@ exports[`Details View -> Assessment -> Reflow With command bar button visible sh
 
 exports[`Details View -> Assessment -> Reflow With command bar button visible should pass accessibility validation with high contrast mode=true 1`] = `[]`;
 
-exports[`Details View -> Assessment -> Reflow With command bar button visible with command bar button expanded should pass accessibility validation with command bar menu open and high contrast mode=false 1`] = `[]`;
+exports[`Details View -> Assessment -> Reflow With command bar button visible with command bar button expanded should pass accessibility validation with command bar menu open and high contrast mode=false 1`] = `
+[
+  {
+    "id": "aria-hidden-focus",
+    "nodes": [
+      {
+        "failureSummary": "Fix all of the following:
+  Focusable content should have tabindex="-1" or be removed from the DOM",
+        "selector": [
+          "i:nth-child(0)",
+        ],
+      },
+      {
+        "failureSummary": "Fix all of the following:
+  Focusable content should have tabindex="-1" or be removed from the DOM",
+        "selector": [
+          "i:nth-child(0)",
+        ],
+      },
+    ],
+  },
+  {
+    "id": "aria-required-children",
+    "nodes": [
+      {
+        "failureSummary": "Fix any of the following:
+  Element has children which are not allowed: button[tabindex], [role=button]
+  Element uses aria-busy="true" while showing a loader",
+        "selector": [
+          ".fui-MenuList",
+        ],
+      },
+    ],
+  },
+]
+`;
 
-exports[`Details View -> Assessment -> Reflow With command bar button visible with command bar button expanded should pass accessibility validation with command bar menu open and high contrast mode=true 1`] = `[]`;
+exports[`Details View -> Assessment -> Reflow With command bar button visible with command bar button expanded should pass accessibility validation with command bar menu open and high contrast mode=true 1`] = `
+[
+  {
+    "id": "aria-hidden-focus",
+    "nodes": [
+      {
+        "failureSummary": "Fix all of the following:
+  Focusable content should have tabindex="-1" or be removed from the DOM",
+        "selector": [
+          "i:nth-child(0)",
+        ],
+      },
+      {
+        "failureSummary": "Fix all of the following:
+  Focusable content should have tabindex="-1" or be removed from the DOM",
+        "selector": [
+          "i:nth-child(0)",
+        ],
+      },
+    ],
+  },
+  {
+    "id": "aria-required-children",
+    "nodes": [
+      {
+        "failureSummary": "Fix any of the following:
+  Element has children which are not allowed: button[tabindex], [role=button]
+  Element uses aria-busy="true" while showing a loader",
+        "selector": [
+          ".fui-MenuList",
+        ],
+      },
+    ],
+  },
+]
+`;
 
 exports[`Details View -> Assessment -> Reflow With hamburger button visible should pass accessibility validation with high contrast mode=false 1`] = `[]`;
 
@@ -16,13 +86,105 @@ exports[`Details View -> Assessment -> Reflow With hamburger button visible with
 
 exports[`Details View -> Assessment -> Reflow With hamburger button visible with hamburger button expanded should pass accessibility validation with command bar menu open and high contrast mode=true 1`] = `[]`;
 
-exports[`Details View -> Fastpass -> Reflow With high contrast mode=false With command bar button visible with command bar button expanded should pass accessibility validation with command bar menu open and high contrast mode=%s 1`] = `[]`;
+exports[`Details View -> Fastpass -> Reflow With high contrast mode=false With command bar button visible with command bar button expanded should pass accessibility validation with command bar menu open and high contrast mode=%s 1`] = `
+[
+  {
+    "id": "aria-hidden-focus",
+    "nodes": [
+      {
+        "failureSummary": "Fix all of the following:
+  Focusable content should have tabindex="-1" or be removed from the DOM",
+        "selector": [
+          "i:nth-child(0)",
+        ],
+      },
+      {
+        "failureSummary": "Fix all of the following:
+  Focusable content should have tabindex="-1" or be removed from the DOM",
+        "selector": [
+          "i:nth-child(0)",
+        ],
+      },
+    ],
+  },
+  {
+    "id": "aria-required-children",
+    "nodes": [
+      {
+        "failureSummary": "Fix any of the following:
+  Element has children which are not allowed: button[tabindex]
+  Element uses aria-busy="true" while showing a loader",
+        "selector": [
+          ".fui-MenuList",
+        ],
+      },
+    ],
+  },
+]
+`;
 
 exports[`Details View -> Fastpass -> Reflow With high contrast mode=false and card kebab menu collapsed 1`] = `[]`;
 
-exports[`Details View -> Fastpass -> Reflow With high contrast mode=false and card kebab menu expanded 1`] = `[]`;
+exports[`Details View -> Fastpass -> Reflow With high contrast mode=false and card kebab menu expanded 1`] = `
+[
+  {
+    "id": "aria-hidden-focus",
+    "nodes": [
+      {
+        "failureSummary": "Fix all of the following:
+  Focusable content should have tabindex="-1" or be removed from the DOM",
+        "selector": [
+          "i:nth-child(0)",
+        ],
+      },
+      {
+        "failureSummary": "Fix all of the following:
+  Focusable content should have tabindex="-1" or be removed from the DOM",
+        "selector": [
+          "i:nth-child(0)",
+        ],
+      },
+    ],
+  },
+]
+`;
 
-exports[`Details View -> Fastpass -> Reflow With high contrast mode=true With command bar button visible with command bar button expanded should pass accessibility validation with command bar menu open and high contrast mode=%s 1`] = `[]`;
+exports[`Details View -> Fastpass -> Reflow With high contrast mode=true With command bar button visible with command bar button expanded should pass accessibility validation with command bar menu open and high contrast mode=%s 1`] = `
+[
+  {
+    "id": "aria-hidden-focus",
+    "nodes": [
+      {
+        "failureSummary": "Fix all of the following:
+  Focusable content should have tabindex="-1" or be removed from the DOM",
+        "selector": [
+          "i:nth-child(0)",
+        ],
+      },
+      {
+        "failureSummary": "Fix all of the following:
+  Focusable content should have tabindex="-1" or be removed from the DOM",
+        "selector": [
+          "i:nth-child(0)",
+        ],
+      },
+    ],
+  },
+  {
+    "id": "aria-required-children",
+    "nodes": [
+      {
+        "failureSummary": "Fix any of the following:
+  Element has children which are not allowed: button[tabindex]
+  Element uses aria-busy="true" while showing a loader",
+        "selector": [
+          ".fui-MenuList",
+        ],
+      },
+    ],
+  },
+]
+`;
 
 exports[`Details View -> Fastpass -> Reflow With high contrast mode=true and card kebab menu collapsed 1`] = `
 [
@@ -42,15 +204,107 @@ exports[`Details View -> Fastpass -> Reflow With high contrast mode=true and car
 ]
 `;
 
-exports[`Details View -> Fastpass -> Reflow With high contrast mode=true and card kebab menu expanded 1`] = `[]`;
+exports[`Details View -> Fastpass -> Reflow With high contrast mode=true and card kebab menu expanded 1`] = `
+[
+  {
+    "id": "aria-hidden-focus",
+    "nodes": [
+      {
+        "failureSummary": "Fix all of the following:
+  Focusable content should have tabindex="-1" or be removed from the DOM",
+        "selector": [
+          "i:nth-child(0)",
+        ],
+      },
+      {
+        "failureSummary": "Fix all of the following:
+  Focusable content should have tabindex="-1" or be removed from the DOM",
+        "selector": [
+          "i:nth-child(0)",
+        ],
+      },
+    ],
+  },
+]
+`;
 
 exports[`Details View -> Quick Assess -> Reflow With command bar button visible should pass accessibility validation with high contrast mode=false 1`] = `[]`;
 
 exports[`Details View -> Quick Assess -> Reflow With command bar button visible should pass accessibility validation with high contrast mode=true 1`] = `[]`;
 
-exports[`Details View -> Quick Assess -> Reflow With command bar button visible with command bar button expanded should pass accessibility validation with command bar menu open and high contrast mode=false 1`] = `[]`;
+exports[`Details View -> Quick Assess -> Reflow With command bar button visible with command bar button expanded should pass accessibility validation with command bar menu open and high contrast mode=false 1`] = `
+[
+  {
+    "id": "aria-hidden-focus",
+    "nodes": [
+      {
+        "failureSummary": "Fix all of the following:
+  Focusable content should have tabindex="-1" or be removed from the DOM",
+        "selector": [
+          "i:nth-child(0)",
+        ],
+      },
+      {
+        "failureSummary": "Fix all of the following:
+  Focusable content should have tabindex="-1" or be removed from the DOM",
+        "selector": [
+          "i:nth-child(0)",
+        ],
+      },
+    ],
+  },
+  {
+    "id": "aria-required-children",
+    "nodes": [
+      {
+        "failureSummary": "Fix any of the following:
+  Element has children which are not allowed: button[tabindex], [role=button]
+  Element uses aria-busy="true" while showing a loader",
+        "selector": [
+          ".fui-MenuList",
+        ],
+      },
+    ],
+  },
+]
+`;
 
-exports[`Details View -> Quick Assess -> Reflow With command bar button visible with command bar button expanded should pass accessibility validation with command bar menu open and high contrast mode=true 1`] = `[]`;
+exports[`Details View -> Quick Assess -> Reflow With command bar button visible with command bar button expanded should pass accessibility validation with command bar menu open and high contrast mode=true 1`] = `
+[
+  {
+    "id": "aria-hidden-focus",
+    "nodes": [
+      {
+        "failureSummary": "Fix all of the following:
+  Focusable content should have tabindex="-1" or be removed from the DOM",
+        "selector": [
+          "i:nth-child(0)",
+        ],
+      },
+      {
+        "failureSummary": "Fix all of the following:
+  Focusable content should have tabindex="-1" or be removed from the DOM",
+        "selector": [
+          "i:nth-child(0)",
+        ],
+      },
+    ],
+  },
+  {
+    "id": "aria-required-children",
+    "nodes": [
+      {
+        "failureSummary": "Fix any of the following:
+  Element has children which are not allowed: button[tabindex], [role=button]
+  Element uses aria-busy="true" while showing a loader",
+        "selector": [
+          ".fui-MenuList",
+        ],
+      },
+    ],
+  },
+]
+`;
 
 exports[`Details View -> Quick Assess -> Reflow With hamburger button visible should pass accessibility validation with high contrast mode=false 1`] = `[]`;
 
diff --git a/src/tests/end-to-end/tests/details-view/reflow-ui.test.ts b/src/tests/end-to-end/tests/details-view/reflow-ui.test.ts
index e4765658a49..84f7fba12ae 100644
--- a/src/tests/end-to-end/tests/details-view/reflow-ui.test.ts
+++ b/src/tests/end-to-end/tests/details-view/reflow-ui.test.ts
@@ -239,6 +239,12 @@ describe('Details View ->', () => {
         // this is a false positive because background is black and link is having yellow as per high contrast theme
         // standards so this criteria does not apply
         // Please refer for more information on the error:https://github.com/dequelabs/axe-core/issues/3464
+        // this results object has a failure for aria-hidden-focus
+        // These are Tabster dummy inputs and they must be added to the exception list.
+        // They are intentionally aria - hidden as their purpose is to redirect focus to the correct element
+        // right when they receive focus and not having aria - hidden will result in the screen readers choking
+        // starting to announce them.
+        // Please refer for more information on the error:https://github.com/microsoft/fluentui/issues/25133
         expect(results).toMatchSnapshot();
     }
 
diff --git a/src/tests/unit/tests/DetailsView/components/__snapshots__/assessment-instance-table.test.tsx.snap b/src/tests/unit/tests/DetailsView/components/__snapshots__/assessment-instance-table.test.tsx.snap
index da7dfa6aaae..2fbf380a138 100644
--- a/src/tests/unit/tests/DetailsView/components/__snapshots__/assessment-instance-table.test.tsx.snap
+++ b/src/tests/unit/tests/DetailsView/components/__snapshots__/assessment-instance-table.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`AssessmentInstanceTable with instances renders per snapshot 1`] = `
     <mock-insightscommandbutton
       data-automation-id="assessment-instance-table-pass-unmarked-instances-button"
       disabled="false"
-      iconprops="[object Object]"
+      insightscommandbuttoniconprops="[object Object]"
     >
       Pass unmarked instances
     </mock-insightscommandbutton>
@@ -72,8 +72,10 @@ exports[`AssessmentInstanceTable with instances renders per snapshot: InsightsCo
   "children": "Pass unmarked instances",
   "data-automation-id": "assessment-instance-table-pass-unmarked-instances-button",
   "disabled": false,
-  "iconProps": {
-    "iconName": "skypeCheck",
+  "insightsCommandButtonIconProps": {
+    "icon": <FluentUIV9Icon
+      iconName="Checkmark20Filled"
+    />,
   },
   "onClick": [Function],
 }
diff --git a/src/tests/unit/tests/DetailsView/components/__snapshots__/command-bar-buttons-menu.test.tsx.snap b/src/tests/unit/tests/DetailsView/components/__snapshots__/command-bar-buttons-menu.test.tsx.snap
index 5173525f82c..ec3b7afef46 100644
--- a/src/tests/unit/tests/DetailsView/components/__snapshots__/command-bar-buttons-menu.test.tsx.snap
+++ b/src/tests/unit/tests/DetailsView/components/__snapshots__/command-bar-buttons-menu.test.tsx.snap
@@ -2,97 +2,66 @@
 
 exports[`CommandBarButtonsMenu renders CommandBarButtonsMenu 1`] = `
 <DocumentFragment>
-  <mock-styledtooltiphostbase
-    aria-label="More actions"
-    content="More actions"
+  <mock-menu
+    open="false"
   >
-    <mock-customizedcommandbarbutton
-      arialabel="More actions"
-      classname="commandBarButtonsMenu"
-      componentref="[object Object]"
-      menuiconprops="[object Object]"
-      menuprops="[object Object]"
-      role="button"
-    />
-  </mock-styledtooltiphostbase>
+    <mock-tooltip
+      content="More actions"
+      relationship="label"
+    >
+      <mock-menutrigger
+        disablebuttonenhancement="true"
+      >
+        <mock-menubutton
+          appearance="transparent"
+          aria-label="More actions"
+          classname="commandBarButtonsMenuButton"
+          icon="[object Object]"
+        />
+      </mock-menutrigger>
+    </mock-tooltip>
+    <mock-menupopover
+      style="border-radius: unset !important;"
+    >
+      <mock-menulist
+        classname="menuList"
+      >
+        <span>
+          Save assessment button
+        </span>
+        <span>
+          Load assessment button
+        </span>
+        <span>
+          Transfer to assessment button
+        </span>
+        <span />
+      </mock-menulist>
+    </mock-menupopover>
+  </mock-menu>
 </DocumentFragment>
 `;
 
-exports[`CommandBarButtonsMenu renders CommandBarButtonsMenu: CustomizedCommandBarButton props 1`] = `
-{
-  "ariaLabel": "More actions",
-  "className": "commandBarButtonsMenu",
-  "componentRef": {},
-  "menuIconProps": {
-    "className": "commandBarButtonsMenuButton",
-    "iconName": "More",
-  },
-  "menuProps": {
-    "className": "commandBarButtonsSubmenu",
-    "items": [
-      {
-        "key": "save assessment",
-        "onRender": [Function],
-      },
-      {
-        "key": "load assessment",
-        "onRender": [Function],
-      },
-      {
-        "key": "transfer to assessment",
-        "onRender": [Function],
-      },
-      {
-        "key": "start over",
-      },
-    ],
-  },
-  "role": "button",
-}
+exports[`CommandBarButtonsMenu renders all child buttons with hasSubMenu false,: render export report menuitem 1`] = `
+<span>
+  Report export button
+</span>
 `;
 
-exports[`CommandBarButtonsMenu renders all child buttons,: render export report menuitem 1`] = `
-<div
-  role="menuitem"
->
-  <React.Fragment>
-    Report export button
-  </React.Fragment>
-</div>
+exports[`CommandBarButtonsMenu renders all child buttons with hasSubMenu false,: render load assessment menuitem 1`] = `
+<span>
+  Load assessment button
+</span>
 `;
 
-exports[`CommandBarButtonsMenu renders all child buttons,: render load assessment menuitem 1`] = `
-<div
-  role="menuitem"
->
-  <React.Fragment>
-    Load assessment button
-  </React.Fragment>
-</div>
+exports[`CommandBarButtonsMenu renders all child buttons with hasSubMenu false,: render save assessment menuitem 1`] = `
+<span>
+  Save assessment button
+</span>
 `;
 
-exports[`CommandBarButtonsMenu renders all child buttons,: render save assessment menuitem 1`] = `
-<div
-  role="menuitem"
->
-  <React.Fragment>
-    Save assessment button
-  </React.Fragment>
-</div>
-`;
-
-exports[`CommandBarButtonsMenu renders all child buttons,: render start over menuitem 1`] = `
-<React.Fragment>
-  Start over button
-</React.Fragment>
-`;
-
-exports[`CommandBarButtonsMenu renders all child buttons,: render transfer to assessment menuitem 1`] = `
-<div
-  role="menuitem"
->
-  <React.Fragment>
-    Transfer to assessment button
-  </React.Fragment>
-</div>
+exports[`CommandBarButtonsMenu renders all child buttons with hasSubMenu false,: render transfer to assessment menuitem 1`] = `
+<span>
+  Transfer to assessment button
+</span>
 `;
diff --git a/src/tests/unit/tests/DetailsView/components/__snapshots__/details-view-command-bar.test.tsx.snap b/src/tests/unit/tests/DetailsView/components/__snapshots__/details-view-command-bar.test.tsx.snap
index 6bab4280c53..bcc6451902e 100644
--- a/src/tests/unit/tests/DetailsView/components/__snapshots__/details-view-command-bar.test.tsx.snap
+++ b/src/tests/unit/tests/DetailsView/components/__snapshots__/details-view-command-bar.test.tsx.snap
@@ -1,5 +1,271 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`DetailsViewCommandBar Button focus render statover component 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body
+    class=""
+    data-tabster="{"root":{}}"
+  >
+    <div
+      id="fluent-default-layer-host"
+      style="position: fixed; z-index: 1000000;"
+    />
+    <div>
+      <div
+        aria-label="command bar"
+        class="detailsViewCommandBar"
+        role="region"
+      >
+        <div
+          aria-labelledby="switch-to-target"
+          class="detailsViewTargetPage"
+        >
+          <span
+            id="switch-to-target"
+          >
+            Target page: 
+          </span>
+          <mock-newtablinkwithtooltip
+            aria-label="Switch to target page: command-bar-test-tab-title"
+            classname="targetPageLink"
+            role="link"
+            tooltipcontent="Switch to target page: command-bar-test-tab-title"
+          >
+            <span
+              class="targetPageTitle"
+            >
+              command-bar-test-tab-title
+            </span>
+          </mock-newtablinkwithtooltip>
+        </div>
+        <button
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="More actions"
+          class="fui-Button r1alrhcs fui-MenuButton commandBarButtonsMenuButton ___cpe5h10_1yhfyj7 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb fjxutwb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f18ktai2 fwbmr0d f44c6la"
+          data-tabster="{"restorer":{"type":1}}"
+          id="menur3"
+          type="button"
+        >
+          <span
+            class="fui-Button__icon rywnvv2 fui-MenuButton__icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 20 20"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6.25 10a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm5 0a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM15 11.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+        </button>
+        <mock-invalidloadassessmentdialog
+          assessmentstoredata="[object Object]"
+          datatransferviewstoredata="[object Object]"
+          deps="[object Object]"
+          featureflagstoredata="[object Object]"
+          isopen="false"
+          narrowmodestatus="[object Object]"
+          rightpanelconfiguration="[object Object]"
+          scanmetadata="[object Object]"
+          switchernavconfiguration="[object Object]"
+          tabstoredata="[object Object]"
+          userconfigurationstoredata="[object Object]"
+        />
+        <mock-loadassessmentdialog
+          assessmentstoredata="[object Object]"
+          datatransferviewstoredata="[object Object]"
+          deps="[object Object]"
+          featureflagstoredata="[object Object]"
+          isopen="false"
+          loadedassessmentdata="[object Object]"
+          narrowmodestatus="[object Object]"
+          prevtab="[object Object]"
+          rightpanelconfiguration="[object Object]"
+          scanmetadata="[object Object]"
+          switchernavconfiguration="[object Object]"
+          tabid="5"
+          tabstoredata="[object Object]"
+          userconfigurationstoredata="[object Object]"
+        />
+        <mock-saveassessmentdialog
+          assessmentstoredata="[object Object]"
+          datatransferviewstoredata="[object Object]"
+          deps="[object Object]"
+          featureflagstoredata="[object Object]"
+          isopen="false"
+          narrowmodestatus="[object Object]"
+          rightpanelconfiguration="[object Object]"
+          scanmetadata="[object Object]"
+          switchernavconfiguration="[object Object]"
+          tabstoredata="[object Object]"
+          userconfigurationstoredata="[object Object]"
+        />
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      aria-label="command bar"
+      class="detailsViewCommandBar"
+      role="region"
+    >
+      <div
+        aria-labelledby="switch-to-target"
+        class="detailsViewTargetPage"
+      >
+        <span
+          id="switch-to-target"
+        >
+          Target page: 
+        </span>
+        <mock-newtablinkwithtooltip
+          aria-label="Switch to target page: command-bar-test-tab-title"
+          classname="targetPageLink"
+          role="link"
+          tooltipcontent="Switch to target page: command-bar-test-tab-title"
+        >
+          <span
+            class="targetPageTitle"
+          >
+            command-bar-test-tab-title
+          </span>
+        </mock-newtablinkwithtooltip>
+      </div>
+      <button
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="More actions"
+        class="fui-Button r1alrhcs fui-MenuButton commandBarButtonsMenuButton ___cpe5h10_1yhfyj7 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb fjxutwb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f18ktai2 fwbmr0d f44c6la"
+        data-tabster="{"restorer":{"type":1}}"
+        id="menur3"
+        type="button"
+      >
+        <span
+          class="fui-Button__icon rywnvv2 fui-MenuButton__icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.25 10a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm5 0a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM15 11.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+      </button>
+      <mock-invalidloadassessmentdialog
+        assessmentstoredata="[object Object]"
+        datatransferviewstoredata="[object Object]"
+        deps="[object Object]"
+        featureflagstoredata="[object Object]"
+        isopen="false"
+        narrowmodestatus="[object Object]"
+        rightpanelconfiguration="[object Object]"
+        scanmetadata="[object Object]"
+        switchernavconfiguration="[object Object]"
+        tabstoredata="[object Object]"
+        userconfigurationstoredata="[object Object]"
+      />
+      <mock-loadassessmentdialog
+        assessmentstoredata="[object Object]"
+        datatransferviewstoredata="[object Object]"
+        deps="[object Object]"
+        featureflagstoredata="[object Object]"
+        isopen="false"
+        loadedassessmentdata="[object Object]"
+        narrowmodestatus="[object Object]"
+        prevtab="[object Object]"
+        rightpanelconfiguration="[object Object]"
+        scanmetadata="[object Object]"
+        switchernavconfiguration="[object Object]"
+        tabid="5"
+        tabstoredata="[object Object]"
+        userconfigurationstoredata="[object Object]"
+      />
+      <mock-saveassessmentdialog
+        assessmentstoredata="[object Object]"
+        datatransferviewstoredata="[object Object]"
+        deps="[object Object]"
+        featureflagstoredata="[object Object]"
+        isopen="false"
+        narrowmodestatus="[object Object]"
+        rightpanelconfiguration="[object Object]"
+        scanmetadata="[object Object]"
+        switchernavconfiguration="[object Object]"
+        tabstoredata="[object Object]"
+        userconfigurationstoredata="[object Object]"
+      />
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
 exports[`DetailsViewCommandBar renders invalid load assessment dialog: invalid load assessment dialog hidden 1`] = `
 <DocumentFragment>
   <div
@@ -33,58 +299,55 @@ exports[`DetailsViewCommandBar renders invalid load assessment dialog: invalid l
       class="detailsViewCommandButtons"
     >
       <button
-        class="ms-Button ms-Button--action ms-Button--command insightsCommandButton root-109"
+        class="fui-Button r1alrhcs ___140khrv_1s9dz87 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f7otkfg"
         data-automation-id="report-export-button"
-        data-is-focusable="true"
+        id="report-export-button"
         type="button"
       >
         <span
-          class="ms-Button-flexContainer flexContainer-110"
-          data-automationid="splitbuttonprimary"
+          class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
         >
-          <i
+          <svg
             aria-hidden="true"
-            class="ms-Icon root-105 ms-Button-icon commandBarButtonIcon icon-112 commandBarButtonIcon"
-            data-icon-name="Export"
-          />
-          <span
-            class="ms-Button-textContainer textContainer-111"
+            class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <span
-              class="ms-Button-label label-113"
-              id="id__15"
-            >
-              Export result
-            </span>
-          </span>
+            <path
+              d="M2.5 4c.28 0 .5.22.5.5v11a.5.5 0 0 1-1 0v-11c0-.28.22-.5.5-.5ZM5 10c0-.28.22-.5.5-.5h10.8l-3.15-3.15a.5.5 0 0 1 .7-.7l4 4a.5.5 0 0 1 0 .7l-4 4a.5.5 0 0 1-.7-.7l3.14-3.15H5.5A.5.5 0 0 1 5 10Z"
+              fill="currentColor"
+            />
+          </svg>
         </span>
+        Export result
       </button>
       <button
-        class="ms-Button ms-Button--action ms-Button--command insightsCommandButton root-109"
+        class="fui-Button r1alrhcs ___140khrv_1s9dz87 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f7otkfg"
         data-automation-id="load-assessment-button"
-        data-is-focusable="true"
         type="button"
       >
         <span
-          class="ms-Button-flexContainer flexContainer-110"
-          data-automationid="splitbuttonprimary"
+          class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
         >
-          <i
+          <svg
             aria-hidden="true"
-            class="ms-Icon root-105 ms-Button-icon commandBarButtonIcon icon-112 commandBarButtonIcon"
-            data-icon-name="FabricOpenFolderHorizontal"
-          />
-          <span
-            class="ms-Button-textContainer textContainer-111"
+            class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <span
-              class="ms-Button-label label-113"
-              id="id__18"
-            >
-              Load assessment
-            </span>
-          </span>
+            <path
+              d="M3 5.5v6.6l1.5-2.6A3 3 0 0 1 7.1 8H15v-.5c0-.83-.67-1.5-1.5-1.5h-4a.5.5 0 0 1-.35-.15l-1.71-1.7A.5.5 0 0 0 7.09 4H4.5C3.67 4 3 4.67 3 5.5Zm1.28 10.48.22.02h9.4a2 2 0 0 0 1.73-1l2.17-3.75A1.5 1.5 0 0 0 16.5 9H7.1a2 2 0 0 0-1.73 1L3.2 13.75a1.5 1.5 0 0 0 1.08 2.23ZM2 14.46V5.5A2.5 2.5 0 0 1 4.5 3h2.59c.4 0 .78.16 1.06.44L9.7 5h3.79A2.5 2.5 0 0 1 16 7.5V8h.5a2.5 2.5 0 0 1 2.16 3.75L16.5 15.5a3 3 0 0 1-2.6 1.5H4.5a2.54 2.54 0 0 1-1.62-.6A2.5 2.5 0 0 1 2 14.46Z"
+              fill="currentColor"
+            />
+          </svg>
         </span>
+        Load assessment
       </button>
     </div>
     <mock-exportdialog
@@ -111,6 +374,7 @@ exports[`DetailsViewCommandBar renders invalid load assessment dialog: invalid l
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-loadassessmentdialog
       assessmentstoredata="[object Object]"
@@ -126,6 +390,7 @@ exports[`DetailsViewCommandBar renders invalid load assessment dialog: invalid l
       switchernavconfiguration="[object Object]"
       tabid="5"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-startoverdialog
       assessmentstoredata="[object Object]"
@@ -138,6 +403,7 @@ exports[`DetailsViewCommandBar renders invalid load assessment dialog: invalid l
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-quickassesstoassessmentconfirmdialog
       assessmentstoredata="[object Object]"
@@ -150,6 +416,20 @@ exports[`DetailsViewCommandBar renders invalid load assessment dialog: invalid l
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-saveassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
   </div>
 </DocumentFragment>
@@ -188,58 +468,55 @@ exports[`DetailsViewCommandBar renders invalid load assessment dialog: invalid l
       class="detailsViewCommandButtons"
     >
       <button
-        class="ms-Button ms-Button--action ms-Button--command insightsCommandButton root-109"
+        class="fui-Button r1alrhcs ___140khrv_1s9dz87 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f7otkfg"
         data-automation-id="report-export-button"
-        data-is-focusable="true"
+        id="report-export-button"
         type="button"
       >
         <span
-          class="ms-Button-flexContainer flexContainer-110"
-          data-automationid="splitbuttonprimary"
+          class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
         >
-          <i
+          <svg
             aria-hidden="true"
-            class="ms-Icon root-105 ms-Button-icon commandBarButtonIcon icon-112 commandBarButtonIcon"
-            data-icon-name="Export"
-          />
-          <span
-            class="ms-Button-textContainer textContainer-111"
+            class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <span
-              class="ms-Button-label label-113"
-              id="id__15"
-            >
-              Export result
-            </span>
-          </span>
+            <path
+              d="M2.5 4c.28 0 .5.22.5.5v11a.5.5 0 0 1-1 0v-11c0-.28.22-.5.5-.5ZM5 10c0-.28.22-.5.5-.5h10.8l-3.15-3.15a.5.5 0 0 1 .7-.7l4 4a.5.5 0 0 1 0 .7l-4 4a.5.5 0 0 1-.7-.7l3.14-3.15H5.5A.5.5 0 0 1 5 10Z"
+              fill="currentColor"
+            />
+          </svg>
         </span>
+        Export result
       </button>
       <button
-        class="ms-Button ms-Button--action ms-Button--command insightsCommandButton root-109"
+        class="fui-Button r1alrhcs ___140khrv_1s9dz87 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f7otkfg"
         data-automation-id="load-assessment-button"
-        data-is-focusable="true"
         type="button"
       >
         <span
-          class="ms-Button-flexContainer flexContainer-110"
-          data-automationid="splitbuttonprimary"
+          class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
         >
-          <i
+          <svg
             aria-hidden="true"
-            class="ms-Icon root-105 ms-Button-icon commandBarButtonIcon icon-112 commandBarButtonIcon"
-            data-icon-name="FabricOpenFolderHorizontal"
-          />
-          <span
-            class="ms-Button-textContainer textContainer-111"
+            class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <span
-              class="ms-Button-label label-113"
-              id="id__18"
-            >
-              Load assessment
-            </span>
-          </span>
+            <path
+              d="M3 5.5v6.6l1.5-2.6A3 3 0 0 1 7.1 8H15v-.5c0-.83-.67-1.5-1.5-1.5h-4a.5.5 0 0 1-.35-.15l-1.71-1.7A.5.5 0 0 0 7.09 4H4.5C3.67 4 3 4.67 3 5.5Zm1.28 10.48.22.02h9.4a2 2 0 0 0 1.73-1l2.17-3.75A1.5 1.5 0 0 0 16.5 9H7.1a2 2 0 0 0-1.73 1L3.2 13.75a1.5 1.5 0 0 0 1.08 2.23ZM2 14.46V5.5A2.5 2.5 0 0 1 4.5 3h2.59c.4 0 .78.16 1.06.44L9.7 5h3.79A2.5 2.5 0 0 1 16 7.5V8h.5a2.5 2.5 0 0 1 2.16 3.75L16.5 15.5a3 3 0 0 1-2.6 1.5H4.5a2.54 2.54 0 0 1-1.62-.6A2.5 2.5 0 0 1 2 14.46Z"
+              fill="currentColor"
+            />
+          </svg>
         </span>
+        Load assessment
       </button>
     </div>
     <mock-exportdialog
@@ -266,6 +543,7 @@ exports[`DetailsViewCommandBar renders invalid load assessment dialog: invalid l
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-loadassessmentdialog
       assessmentstoredata="[object Object]"
@@ -281,6 +559,7 @@ exports[`DetailsViewCommandBar renders invalid load assessment dialog: invalid l
       switchernavconfiguration="[object Object]"
       tabid="5"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-startoverdialog
       assessmentstoredata="[object Object]"
@@ -293,6 +572,7 @@ exports[`DetailsViewCommandBar renders invalid load assessment dialog: invalid l
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-quickassesstoassessmentconfirmdialog
       assessmentstoredata="[object Object]"
@@ -305,6 +585,20 @@ exports[`DetailsViewCommandBar renders invalid load assessment dialog: invalid l
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-saveassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
   </div>
 </DocumentFragment>
@@ -343,58 +637,55 @@ exports[`DetailsViewCommandBar renders load assessment dialog: load assessment d
       class="detailsViewCommandButtons"
     >
       <button
-        class="ms-Button ms-Button--action ms-Button--command insightsCommandButton root-109"
+        class="fui-Button r1alrhcs ___140khrv_1s9dz87 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f7otkfg"
         data-automation-id="report-export-button"
-        data-is-focusable="true"
+        id="report-export-button"
         type="button"
       >
         <span
-          class="ms-Button-flexContainer flexContainer-110"
-          data-automationid="splitbuttonprimary"
+          class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
         >
-          <i
+          <svg
             aria-hidden="true"
-            class="ms-Icon root-105 ms-Button-icon commandBarButtonIcon icon-112 commandBarButtonIcon"
-            data-icon-name="Export"
-          />
-          <span
-            class="ms-Button-textContainer textContainer-111"
+            class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <span
-              class="ms-Button-label label-113"
-              id="id__9"
-            >
-              Export result
-            </span>
-          </span>
+            <path
+              d="M2.5 4c.28 0 .5.22.5.5v11a.5.5 0 0 1-1 0v-11c0-.28.22-.5.5-.5ZM5 10c0-.28.22-.5.5-.5h10.8l-3.15-3.15a.5.5 0 0 1 .7-.7l4 4a.5.5 0 0 1 0 .7l-4 4a.5.5 0 0 1-.7-.7l3.14-3.15H5.5A.5.5 0 0 1 5 10Z"
+              fill="currentColor"
+            />
+          </svg>
         </span>
+        Export result
       </button>
       <button
-        class="ms-Button ms-Button--action ms-Button--command insightsCommandButton root-109"
+        class="fui-Button r1alrhcs ___140khrv_1s9dz87 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f7otkfg"
         data-automation-id="load-assessment-button"
-        data-is-focusable="true"
         type="button"
       >
         <span
-          class="ms-Button-flexContainer flexContainer-110"
-          data-automationid="splitbuttonprimary"
+          class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
         >
-          <i
+          <svg
             aria-hidden="true"
-            class="ms-Icon root-105 ms-Button-icon commandBarButtonIcon icon-112 commandBarButtonIcon"
-            data-icon-name="FabricOpenFolderHorizontal"
-          />
-          <span
-            class="ms-Button-textContainer textContainer-111"
+            class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <span
-              class="ms-Button-label label-113"
-              id="id__12"
-            >
-              Load assessment
-            </span>
-          </span>
+            <path
+              d="M3 5.5v6.6l1.5-2.6A3 3 0 0 1 7.1 8H15v-.5c0-.83-.67-1.5-1.5-1.5h-4a.5.5 0 0 1-.35-.15l-1.71-1.7A.5.5 0 0 0 7.09 4H4.5C3.67 4 3 4.67 3 5.5Zm1.28 10.48.22.02h9.4a2 2 0 0 0 1.73-1l2.17-3.75A1.5 1.5 0 0 0 16.5 9H7.1a2 2 0 0 0-1.73 1L3.2 13.75a1.5 1.5 0 0 0 1.08 2.23ZM2 14.46V5.5A2.5 2.5 0 0 1 4.5 3h2.59c.4 0 .78.16 1.06.44L9.7 5h3.79A2.5 2.5 0 0 1 16 7.5V8h.5a2.5 2.5 0 0 1 2.16 3.75L16.5 15.5a3 3 0 0 1-2.6 1.5H4.5a2.54 2.54 0 0 1-1.62-.6A2.5 2.5 0 0 1 2 14.46Z"
+              fill="currentColor"
+            />
+          </svg>
         </span>
+        Load assessment
       </button>
     </div>
     <mock-exportdialog
@@ -421,6 +712,7 @@ exports[`DetailsViewCommandBar renders load assessment dialog: load assessment d
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-loadassessmentdialog
       assessmentstoredata="[object Object]"
@@ -436,6 +728,7 @@ exports[`DetailsViewCommandBar renders load assessment dialog: load assessment d
       switchernavconfiguration="[object Object]"
       tabid="5"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-startoverdialog
       assessmentstoredata="[object Object]"
@@ -448,6 +741,7 @@ exports[`DetailsViewCommandBar renders load assessment dialog: load assessment d
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-quickassesstoassessmentconfirmdialog
       assessmentstoredata="[object Object]"
@@ -460,6 +754,20 @@ exports[`DetailsViewCommandBar renders load assessment dialog: load assessment d
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-saveassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
   </div>
 </DocumentFragment>
@@ -498,58 +806,55 @@ exports[`DetailsViewCommandBar renders load assessment dialog: load assessment d
       class="detailsViewCommandButtons"
     >
       <button
-        class="ms-Button ms-Button--action ms-Button--command insightsCommandButton root-109"
+        class="fui-Button r1alrhcs ___140khrv_1s9dz87 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f7otkfg"
         data-automation-id="report-export-button"
-        data-is-focusable="true"
+        id="report-export-button"
         type="button"
       >
         <span
-          class="ms-Button-flexContainer flexContainer-110"
-          data-automationid="splitbuttonprimary"
+          class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
         >
-          <i
+          <svg
             aria-hidden="true"
-            class="ms-Icon root-105 ms-Button-icon commandBarButtonIcon icon-112 commandBarButtonIcon"
-            data-icon-name="Export"
-          />
-          <span
-            class="ms-Button-textContainer textContainer-111"
+            class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <span
-              class="ms-Button-label label-113"
-              id="id__9"
-            >
-              Export result
-            </span>
-          </span>
+            <path
+              d="M2.5 4c.28 0 .5.22.5.5v11a.5.5 0 0 1-1 0v-11c0-.28.22-.5.5-.5ZM5 10c0-.28.22-.5.5-.5h10.8l-3.15-3.15a.5.5 0 0 1 .7-.7l4 4a.5.5 0 0 1 0 .7l-4 4a.5.5 0 0 1-.7-.7l3.14-3.15H5.5A.5.5 0 0 1 5 10Z"
+              fill="currentColor"
+            />
+          </svg>
         </span>
+        Export result
       </button>
       <button
-        class="ms-Button ms-Button--action ms-Button--command insightsCommandButton root-109"
+        class="fui-Button r1alrhcs ___140khrv_1s9dz87 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f7otkfg"
         data-automation-id="load-assessment-button"
-        data-is-focusable="true"
         type="button"
       >
         <span
-          class="ms-Button-flexContainer flexContainer-110"
-          data-automationid="splitbuttonprimary"
+          class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
         >
-          <i
+          <svg
             aria-hidden="true"
-            class="ms-Icon root-105 ms-Button-icon commandBarButtonIcon icon-112 commandBarButtonIcon"
-            data-icon-name="FabricOpenFolderHorizontal"
-          />
-          <span
-            class="ms-Button-textContainer textContainer-111"
+            class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <span
-              class="ms-Button-label label-113"
-              id="id__12"
-            >
-              Load assessment
-            </span>
-          </span>
+            <path
+              d="M3 5.5v6.6l1.5-2.6A3 3 0 0 1 7.1 8H15v-.5c0-.83-.67-1.5-1.5-1.5h-4a.5.5 0 0 1-.35-.15l-1.71-1.7A.5.5 0 0 0 7.09 4H4.5C3.67 4 3 4.67 3 5.5Zm1.28 10.48.22.02h9.4a2 2 0 0 0 1.73-1l2.17-3.75A1.5 1.5 0 0 0 16.5 9H7.1a2 2 0 0 0-1.73 1L3.2 13.75a1.5 1.5 0 0 0 1.08 2.23ZM2 14.46V5.5A2.5 2.5 0 0 1 4.5 3h2.59c.4 0 .78.16 1.06.44L9.7 5h3.79A2.5 2.5 0 0 1 16 7.5V8h.5a2.5 2.5 0 0 1 2.16 3.75L16.5 15.5a3 3 0 0 1-2.6 1.5H4.5a2.54 2.54 0 0 1-1.62-.6A2.5 2.5 0 0 1 2 14.46Z"
+              fill="currentColor"
+            />
+          </svg>
         </span>
+        Load assessment
       </button>
     </div>
     <mock-exportdialog
@@ -576,6 +881,7 @@ exports[`DetailsViewCommandBar renders load assessment dialog: load assessment d
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-loadassessmentdialog
       assessmentstoredata="[object Object]"
@@ -591,6 +897,7 @@ exports[`DetailsViewCommandBar renders load assessment dialog: load assessment d
       switchernavconfiguration="[object Object]"
       tabid="5"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-startoverdialog
       assessmentstoredata="[object Object]"
@@ -603,6 +910,7 @@ exports[`DetailsViewCommandBar renders load assessment dialog: load assessment d
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-quickassesstoassessmentconfirmdialog
       assessmentstoredata="[object Object]"
@@ -615,6 +923,20 @@ exports[`DetailsViewCommandBar renders load assessment dialog: load assessment d
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-saveassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
   </div>
 </DocumentFragment>
@@ -653,32 +975,345 @@ exports[`DetailsViewCommandBar renders report export dialog: export dialog hidde
       class="detailsViewCommandButtons"
     >
       <button
-        class="ms-Button ms-Button--action ms-Button--command insightsCommandButton root-109"
+        class="fui-Button r1alrhcs ___140khrv_1s9dz87 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f7otkfg"
         data-automation-id="report-export-button"
-        data-is-focusable="true"
+        id="report-export-button"
         type="button"
       >
         <span
-          class="ms-Button-flexContainer flexContainer-110"
-          data-automationid="splitbuttonprimary"
+          class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
         >
-          <i
+          <svg
             aria-hidden="true"
-            class="ms-Icon root-105 ms-Button-icon commandBarButtonIcon icon-112 commandBarButtonIcon"
-            data-icon-name="Export"
-          />
-          <span
-            class="ms-Button-textContainer textContainer-111"
+            class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <span
-              class="ms-Button-label label-113"
-              id="id__6"
-            >
-              Export result
-            </span>
-          </span>
+            <path
+              d="M2.5 4c.28 0 .5.22.5.5v11a.5.5 0 0 1-1 0v-11c0-.28.22-.5.5-.5ZM5 10c0-.28.22-.5.5-.5h10.8l-3.15-3.15a.5.5 0 0 1 .7-.7l4 4a.5.5 0 0 1 0 .7l-4 4a.5.5 0 0 1-.7-.7l3.14-3.15H5.5A.5.5 0 0 1 5 10Z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        Export result
+      </button>
+    </div>
+    <mock-exportdialog
+      description=""
+      featureflagstoredata="[object Object]"
+      htmlexportdata=""
+      htmlfilename=""
+      htmlfileurl="#"
+      isopen="false"
+      jsonexportdata=""
+      jsonfilename=""
+      jsonfileurl="#"
+      reportexportformat="Assessment"
+      reportexportservices="[object Object],[object Object],[object Object]"
+    />
+    <mock-invalidloadassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-loadassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      loadedassessmentdata="[object Object]"
+      narrowmodestatus="[object Object]"
+      prevtab="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabid="5"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-startoverdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      dialogstate="none"
+      featureflagstoredata="[object Object]"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-quickassesstoassessmentconfirmdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isshown="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-saveassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DetailsViewCommandBar renders report export dialog: export dialog open 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="command bar"
+    class="detailsViewCommandBar"
+    role="region"
+  >
+    <div
+      aria-labelledby="switch-to-target"
+      class="detailsViewTargetPage"
+    >
+      <span
+        id="switch-to-target"
+      >
+        Target page: 
+      </span>
+      <mock-newtablinkwithtooltip
+        aria-label="Switch to target page: command-bar-test-tab-title"
+        classname="targetPageLink"
+        role="link"
+        tooltipcontent="Switch to target page: command-bar-test-tab-title"
+      >
+        <span
+          class="targetPageTitle"
+        >
+          command-bar-test-tab-title
+        </span>
+      </mock-newtablinkwithtooltip>
+    </div>
+    <div
+      class="detailsViewCommandButtons"
+    >
+      <button
+        class="fui-Button r1alrhcs ___140khrv_1s9dz87 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f7otkfg"
+        data-automation-id="report-export-button"
+        id="report-export-button"
+        type="button"
+      >
+        <span
+          class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
+        >
+          <svg
+            aria-hidden="true"
+            class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M2.5 4c.28 0 .5.22.5.5v11a.5.5 0 0 1-1 0v-11c0-.28.22-.5.5-.5ZM5 10c0-.28.22-.5.5-.5h10.8l-3.15-3.15a.5.5 0 0 1 .7-.7l4 4a.5.5 0 0 1 0 .7l-4 4a.5.5 0 0 1-.7-.7l3.14-3.15H5.5A.5.5 0 0 1 5 10Z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        Export result
+      </button>
+    </div>
+    <mock-exportdialog
+      featureflagstoredata="[object Object]"
+      htmlexportdata=""
+      htmlfilename="Assessment_20240307_commandbartesttabtit.html"
+      htmlfileurl="#"
+      isopen="true"
+      jsonexportdata=""
+      jsonfilename="Assessment_20240307_commandbartesttabtit.json"
+      jsonfileurl="#"
+      reportexportformat="Assessment"
+      reportexportservices="[object Object],[object Object],[object Object]"
+    />
+    <mock-invalidloadassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-loadassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      loadedassessmentdata="[object Object]"
+      narrowmodestatus="[object Object]"
+      prevtab="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabid="5"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-startoverdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      dialogstate="none"
+      featureflagstoredata="[object Object]"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-quickassesstoassessmentconfirmdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isshown="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-saveassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DetailsViewCommandBar renders save assessment dialog: Save assessment dialog open 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="command bar"
+    class="detailsViewCommandBar"
+    role="region"
+  >
+    <div
+      aria-labelledby="switch-to-target"
+      class="detailsViewTargetPage"
+    >
+      <span
+        id="switch-to-target"
+      >
+        Target page: 
+      </span>
+      <mock-newtablinkwithtooltip
+        aria-label="Switch to target page: command-bar-test-tab-title"
+        classname="targetPageLink"
+        role="link"
+        tooltipcontent="Switch to target page: command-bar-test-tab-title"
+      >
+        <span
+          class="targetPageTitle"
+        >
+          command-bar-test-tab-title
+        </span>
+      </mock-newtablinkwithtooltip>
+    </div>
+    <div
+      class="detailsViewCommandButtons"
+    >
+      <button
+        class="fui-Button r1alrhcs ___140khrv_1s9dz87 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f7otkfg"
+        data-automation-id="report-export-button"
+        id="report-export-button"
+        type="button"
+      >
+        <span
+          class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
+        >
+          <svg
+            aria-hidden="true"
+            class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M2.5 4c.28 0 .5.22.5.5v11a.5.5 0 0 1-1 0v-11c0-.28.22-.5.5-.5ZM5 10c0-.28.22-.5.5-.5h10.8l-3.15-3.15a.5.5 0 0 1 .7-.7l4 4a.5.5 0 0 1 0 .7l-4 4a.5.5 0 0 1-.7-.7l3.14-3.15H5.5A.5.5 0 0 1 5 10Z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        Export result
+      </button>
+      <a
+        class="fui-Button r1alrhcs ___140khrv_1s9dz87 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f7otkfg"
+        download="SavedAssessment_undefined_undefined.a11ywebassessment"
+        role="button"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
+        >
+          <svg
+            aria-hidden="true"
+            class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M3 5c0-1.1.9-2 2-2h8.38a2 2 0 0 1 1.41.59l1.62 1.62A2 2 0 0 1 17 6.62V15a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm2-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1v-4.5c0-.83.67-1.5 1.5-1.5h7c.83 0 1.5.67 1.5 1.5V16a1 1 0 0 0 1-1V6.62a1 1 0 0 0-.3-.7L14.1 4.28a1 1 0 0 0-.71-.29H13v2.5c0 .83-.67 1.5-1.5 1.5h-4A1.5 1.5 0 0 1 6 6.5V4H5Zm2 0v2.5c0 .28.22.5.5.5h4a.5.5 0 0 0 .5-.5V4H7Zm7 12v-4.5a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0-.5.5V16h8Z"
+              fill="currentColor"
+            />
+          </svg>
         </span>
-      </button>
+        Save assessment
+      </a>
     </div>
     <mock-exportdialog
       description=""
@@ -704,6 +1339,7 @@ exports[`DetailsViewCommandBar renders report export dialog: export dialog hidde
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-loadassessmentdialog
       assessmentstoredata="[object Object]"
@@ -719,6 +1355,7 @@ exports[`DetailsViewCommandBar renders report export dialog: export dialog hidde
       switchernavconfiguration="[object Object]"
       tabid="5"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-startoverdialog
       assessmentstoredata="[object Object]"
@@ -731,6 +1368,7 @@ exports[`DetailsViewCommandBar renders report export dialog: export dialog hidde
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-quickassesstoassessmentconfirmdialog
       assessmentstoredata="[object Object]"
@@ -743,12 +1381,26 @@ exports[`DetailsViewCommandBar renders report export dialog: export dialog hidde
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-saveassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="true"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
   </div>
 </DocumentFragment>
 `;
 
-exports[`DetailsViewCommandBar renders report export dialog: export dialog open 1`] = `
+exports[`DetailsViewCommandBar renders save assessment dialog: save assessment dialog hidden 1`] = `
 <DocumentFragment>
   <div
     aria-label="command bar"
@@ -781,41 +1433,68 @@ exports[`DetailsViewCommandBar renders report export dialog: export dialog open
       class="detailsViewCommandButtons"
     >
       <button
-        class="ms-Button ms-Button--action ms-Button--command insightsCommandButton root-109"
+        class="fui-Button r1alrhcs ___140khrv_1s9dz87 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f7otkfg"
         data-automation-id="report-export-button"
-        data-is-focusable="true"
+        id="report-export-button"
         type="button"
       >
         <span
-          class="ms-Button-flexContainer flexContainer-110"
-          data-automationid="splitbuttonprimary"
+          class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
         >
-          <i
+          <svg
             aria-hidden="true"
-            class="ms-Icon root-105 ms-Button-icon commandBarButtonIcon icon-112 commandBarButtonIcon"
-            data-icon-name="Export"
-          />
-          <span
-            class="ms-Button-textContainer textContainer-111"
+            class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <span
-              class="ms-Button-label label-113"
-              id="id__6"
-            >
-              Export result
-            </span>
-          </span>
+            <path
+              d="M2.5 4c.28 0 .5.22.5.5v11a.5.5 0 0 1-1 0v-11c0-.28.22-.5.5-.5ZM5 10c0-.28.22-.5.5-.5h10.8l-3.15-3.15a.5.5 0 0 1 .7-.7l4 4a.5.5 0 0 1 0 .7l-4 4a.5.5 0 0 1-.7-.7l3.14-3.15H5.5A.5.5 0 0 1 5 10Z"
+              fill="currentColor"
+            />
+          </svg>
         </span>
+        Export result
       </button>
+      <a
+        class="fui-Button r1alrhcs ___140khrv_1s9dz87 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f7otkfg"
+        download="SavedAssessment_undefined_undefined.a11ywebassessment"
+        role="button"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
+        >
+          <svg
+            aria-hidden="true"
+            class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M3 5c0-1.1.9-2 2-2h8.38a2 2 0 0 1 1.41.59l1.62 1.62A2 2 0 0 1 17 6.62V15a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm2-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1v-4.5c0-.83.67-1.5 1.5-1.5h7c.83 0 1.5.67 1.5 1.5V16a1 1 0 0 0 1-1V6.62a1 1 0 0 0-.3-.7L14.1 4.28a1 1 0 0 0-.71-.29H13v2.5c0 .83-.67 1.5-1.5 1.5h-4A1.5 1.5 0 0 1 6 6.5V4H5Zm2 0v2.5c0 .28.22.5.5.5h4a.5.5 0 0 0 .5-.5V4H7Zm7 12v-4.5a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0-.5.5V16h8Z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        Save assessment
+      </a>
     </div>
     <mock-exportdialog
+      description=""
       featureflagstoredata="[object Object]"
       htmlexportdata=""
-      htmlfilename="Assessment_20240307_commandbartesttabtit.html"
+      htmlfilename=""
       htmlfileurl="#"
-      isopen="true"
+      isopen="false"
       jsonexportdata=""
-      jsonfilename="Assessment_20240307_commandbartesttabtit.json"
+      jsonfilename=""
       jsonfileurl="#"
       reportexportformat="Assessment"
       reportexportservices="[object Object],[object Object],[object Object]"
@@ -831,6 +1510,7 @@ exports[`DetailsViewCommandBar renders report export dialog: export dialog open
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-loadassessmentdialog
       assessmentstoredata="[object Object]"
@@ -846,6 +1526,7 @@ exports[`DetailsViewCommandBar renders report export dialog: export dialog open
       switchernavconfiguration="[object Object]"
       tabid="5"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-startoverdialog
       assessmentstoredata="[object Object]"
@@ -858,6 +1539,7 @@ exports[`DetailsViewCommandBar renders report export dialog: export dialog open
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-quickassesstoassessmentconfirmdialog
       assessmentstoredata="[object Object]"
@@ -870,6 +1552,20 @@ exports[`DetailsViewCommandBar renders report export dialog: export dialog open
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-saveassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
   </div>
 </DocumentFragment>
@@ -908,67 +1604,82 @@ exports[`DetailsViewCommandBar renders start assessment over dialog: start asses
       class="detailsViewCommandButtons"
     >
       <button
-        class="ms-Button ms-Button--action ms-Button--command insightsCommandButton root-109"
+        class="fui-Button r1alrhcs ___140khrv_1s9dz87 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f7otkfg"
         data-automation-id="report-export-button"
-        data-is-focusable="true"
+        id="report-export-button"
         type="button"
       >
         <span
-          class="ms-Button-flexContainer flexContainer-110"
-          data-automationid="splitbuttonprimary"
+          class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
         >
-          <i
+          <svg
             aria-hidden="true"
-            class="ms-Icon root-105 ms-Button-icon commandBarButtonIcon icon-112 commandBarButtonIcon"
-            data-icon-name="Export"
-          />
-          <span
-            class="ms-Button-textContainer textContainer-111"
+            class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <span
-              class="ms-Button-label label-113"
-              id="id__30"
-            >
-              Export result
-            </span>
-          </span>
+            <path
+              d="M2.5 4c.28 0 .5.22.5.5v11a.5.5 0 0 1-1 0v-11c0-.28.22-.5.5-.5ZM5 10c0-.28.22-.5.5-.5h10.8l-3.15-3.15a.5.5 0 0 1 .7-.7l4 4a.5.5 0 0 1 0 .7l-4 4a.5.5 0 0 1-.7-.7l3.14-3.15H5.5A.5.5 0 0 1 5 10Z"
+              fill="currentColor"
+            />
+          </svg>
         </span>
+        Export result
       </button>
       <div>
         <button
+          aria-expanded="true"
+          aria-haspopup="menu"
           aria-label="start over menu"
-          class="ms-Button ms-Button--action ms-Button--command insightsCommandButton root-109"
-          data-is-focusable="true"
+          class="fui-Button r1alrhcs fui-MenuButton ___b3z9fu0_617zfn0 f1q9pm1r f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 fxoiby5 f15q0o9g f1kyxi2w f1t6ax4o fycuoez f1dswenw f9hdeju f7otkfg"
+          data-tabster="{"restorer":{"type":1}}"
+          id="menur1"
+          role="button"
           type="button"
         >
           <span
-            class="ms-Button-flexContainer flexContainer-110"
-            data-automationid="splitbuttonprimary"
+            class="fui-Button__icon rywnvv2 fui-MenuButton__icon ___1n29ach_duziql0 f1nizpg2 fqyhrn0"
           >
-            <i
+            <svg
               aria-hidden="true"
-              class="ms-Icon root-105 ms-Button-icon commandBarButtonIcon icon-112 commandBarButtonIcon"
-              data-icon-name="Refresh"
-            />
-            <span
-              class="ms-Button-textContainer textContainer-111"
+              class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 20 20"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <span
-                class="ms-Button-label label-113"
-                id="id__33"
-              >
-                Start over
-              </span>
-            </span>
-            <i
+              <path
+                d="M4 10a6 6 0 0 1 10.47-4H12.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-1 0v1.6a7 7 0 1 0 1.98 4.36.5.5 0 1 0-1 .08L16 10a6 6 0 0 1-12 0Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+          Start over
+          <span
+            class="fui-MenuButton__menuIcon ___c2pfdf0_8ts8a30 fwrc4pm f1ugzwwg fvblgha frx94fk fbyavb5"
+          >
+            <svg
               aria-hidden="true"
-              class="ms-Icon root-105 ms-Button-menuIcon menuIcon-114"
-              data-icon-name="ChevronDown"
-            />
+              class="___1p6ai22_1ra22ji f1w7gpdv fez10in fg4l7m0 fkfq4zb f9hdeju f139oj5f"
+              fill="currentColor"
+              height="20"
+              viewBox="0 0 20 20"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
+                fill="currentColor"
+              />
+            </svg>
           </span>
         </button>
         <span
-          class="ms-layer"
+          hidden=""
         />
       </div>
     </div>
@@ -996,6 +1707,7 @@ exports[`DetailsViewCommandBar renders start assessment over dialog: start asses
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-loadassessmentdialog
       assessmentstoredata="[object Object]"
@@ -1011,6 +1723,7 @@ exports[`DetailsViewCommandBar renders start assessment over dialog: start asses
       switchernavconfiguration="[object Object]"
       tabid="5"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-startoverdialog
       assessmentstoredata="[object Object]"
@@ -1023,6 +1736,7 @@ exports[`DetailsViewCommandBar renders start assessment over dialog: start asses
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-quickassesstoassessmentconfirmdialog
       assessmentstoredata="[object Object]"
@@ -1035,6 +1749,20 @@ exports[`DetailsViewCommandBar renders start assessment over dialog: start asses
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-saveassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
   </div>
 </DocumentFragment>
@@ -1073,63 +1801,78 @@ exports[`DetailsViewCommandBar renders start assessment over dialog: start asses
       class="detailsViewCommandButtons"
     >
       <button
-        class="ms-Button ms-Button--action ms-Button--command insightsCommandButton root-109"
+        class="fui-Button r1alrhcs ___140khrv_1s9dz87 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f7otkfg"
         data-automation-id="report-export-button"
-        data-is-focusable="true"
+        id="report-export-button"
         type="button"
       >
         <span
-          class="ms-Button-flexContainer flexContainer-110"
-          data-automationid="splitbuttonprimary"
+          class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
         >
-          <i
+          <svg
             aria-hidden="true"
-            class="ms-Icon root-105 ms-Button-icon commandBarButtonIcon icon-112 commandBarButtonIcon"
-            data-icon-name="Export"
-          />
-          <span
-            class="ms-Button-textContainer textContainer-111"
+            class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <span
-              class="ms-Button-label label-113"
-              id="id__30"
-            >
-              Export result
-            </span>
-          </span>
+            <path
+              d="M2.5 4c.28 0 .5.22.5.5v11a.5.5 0 0 1-1 0v-11c0-.28.22-.5.5-.5ZM5 10c0-.28.22-.5.5-.5h10.8l-3.15-3.15a.5.5 0 0 1 .7-.7l4 4a.5.5 0 0 1 0 .7l-4 4a.5.5 0 0 1-.7-.7l3.14-3.15H5.5A.5.5 0 0 1 5 10Z"
+              fill="currentColor"
+            />
+          </svg>
         </span>
+        Export result
       </button>
       <div>
         <button
+          aria-expanded="false"
+          aria-haspopup="menu"
           aria-label="start over menu"
-          class="ms-Button ms-Button--action ms-Button--command insightsCommandButton root-109"
-          data-is-focusable="true"
+          class="fui-Button r1alrhcs fui-MenuButton ___5uqdeq0_1y5fi4n f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1kyxi2w f1t6ax4o fycuoez f1dswenw f9hdeju f7otkfg"
+          data-tabster="{"restorer":{"type":1}}"
+          id="menur1"
+          role="button"
           type="button"
         >
           <span
-            class="ms-Button-flexContainer flexContainer-110"
-            data-automationid="splitbuttonprimary"
+            class="fui-Button__icon rywnvv2 fui-MenuButton__icon ___963sj20_1qpm2bl f1nizpg2"
           >
-            <i
+            <svg
               aria-hidden="true"
-              class="ms-Icon root-105 ms-Button-icon commandBarButtonIcon icon-112 commandBarButtonIcon"
-              data-icon-name="Refresh"
-            />
-            <span
-              class="ms-Button-textContainer textContainer-111"
+              class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 20 20"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <span
-                class="ms-Button-label label-113"
-                id="id__33"
-              >
-                Start over
-              </span>
-            </span>
-            <i
+              <path
+                d="M4 10a6 6 0 0 1 10.47-4H12.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-1 0v1.6a7 7 0 1 0 1.98 4.36.5.5 0 1 0-1 .08L16 10a6 6 0 0 1-12 0Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+          Start over
+          <span
+            class="fui-MenuButton__menuIcon ___c2pfdf0_8ts8a30 fwrc4pm f1ugzwwg fvblgha frx94fk fbyavb5"
+          >
+            <svg
               aria-hidden="true"
-              class="ms-Icon root-105 ms-Button-menuIcon menuIcon-114"
-              data-icon-name="ChevronDown"
-            />
+              class="___1p6ai22_1ra22ji f1w7gpdv fez10in fg4l7m0 fkfq4zb f9hdeju f139oj5f"
+              fill="currentColor"
+              height="20"
+              viewBox="0 0 20 20"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
+                fill="currentColor"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -1158,6 +1901,7 @@ exports[`DetailsViewCommandBar renders start assessment over dialog: start asses
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-loadassessmentdialog
       assessmentstoredata="[object Object]"
@@ -1173,6 +1917,7 @@ exports[`DetailsViewCommandBar renders start assessment over dialog: start asses
       switchernavconfiguration="[object Object]"
       tabid="5"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-startoverdialog
       assessmentstoredata="[object Object]"
@@ -1185,6 +1930,7 @@ exports[`DetailsViewCommandBar renders start assessment over dialog: start asses
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-quickassesstoassessmentconfirmdialog
       assessmentstoredata="[object Object]"
@@ -1197,6 +1943,20 @@ exports[`DetailsViewCommandBar renders start assessment over dialog: start asses
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-saveassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
   </div>
 </DocumentFragment>
@@ -1235,67 +1995,82 @@ exports[`DetailsViewCommandBar renders start test over dialog: start test over d
       class="detailsViewCommandButtons"
     >
       <button
-        class="ms-Button ms-Button--action ms-Button--command insightsCommandButton root-109"
+        class="fui-Button r1alrhcs ___140khrv_1s9dz87 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f7otkfg"
         data-automation-id="report-export-button"
-        data-is-focusable="true"
+        id="report-export-button"
         type="button"
       >
         <span
-          class="ms-Button-flexContainer flexContainer-110"
-          data-automationid="splitbuttonprimary"
+          class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
         >
-          <i
+          <svg
             aria-hidden="true"
-            class="ms-Icon root-105 ms-Button-icon commandBarButtonIcon icon-112 commandBarButtonIcon"
-            data-icon-name="Export"
-          />
-          <span
-            class="ms-Button-textContainer textContainer-111"
+            class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <span
-              class="ms-Button-label label-113"
-              id="id__21"
-            >
-              Export result
-            </span>
-          </span>
+            <path
+              d="M2.5 4c.28 0 .5.22.5.5v11a.5.5 0 0 1-1 0v-11c0-.28.22-.5.5-.5ZM5 10c0-.28.22-.5.5-.5h10.8l-3.15-3.15a.5.5 0 0 1 .7-.7l4 4a.5.5 0 0 1 0 .7l-4 4a.5.5 0 0 1-.7-.7l3.14-3.15H5.5A.5.5 0 0 1 5 10Z"
+              fill="currentColor"
+            />
+          </svg>
         </span>
+        Export result
       </button>
       <div>
         <button
+          aria-expanded="true"
+          aria-haspopup="menu"
           aria-label="start over menu"
-          class="ms-Button ms-Button--action ms-Button--command insightsCommandButton root-109"
-          data-is-focusable="true"
+          class="fui-Button r1alrhcs fui-MenuButton ___b3z9fu0_617zfn0 f1q9pm1r f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 fxoiby5 f15q0o9g f1kyxi2w f1t6ax4o fycuoez f1dswenw f9hdeju f7otkfg"
+          data-tabster="{"restorer":{"type":1}}"
+          id="menur0"
+          role="button"
           type="button"
         >
           <span
-            class="ms-Button-flexContainer flexContainer-110"
-            data-automationid="splitbuttonprimary"
+            class="fui-Button__icon rywnvv2 fui-MenuButton__icon ___1n29ach_duziql0 f1nizpg2 fqyhrn0"
           >
-            <i
+            <svg
               aria-hidden="true"
-              class="ms-Icon root-105 ms-Button-icon commandBarButtonIcon icon-112 commandBarButtonIcon"
-              data-icon-name="Refresh"
-            />
-            <span
-              class="ms-Button-textContainer textContainer-111"
+              class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 20 20"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <span
-                class="ms-Button-label label-113"
-                id="id__24"
-              >
-                Start over
-              </span>
-            </span>
-            <i
+              <path
+                d="M4 10a6 6 0 0 1 10.47-4H12.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-1 0v1.6a7 7 0 1 0 1.98 4.36.5.5 0 1 0-1 .08L16 10a6 6 0 0 1-12 0Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+          Start over
+          <span
+            class="fui-MenuButton__menuIcon ___c2pfdf0_8ts8a30 fwrc4pm f1ugzwwg fvblgha frx94fk fbyavb5"
+          >
+            <svg
               aria-hidden="true"
-              class="ms-Icon root-105 ms-Button-menuIcon menuIcon-114"
-              data-icon-name="ChevronDown"
-            />
+              class="___1p6ai22_1ra22ji f1w7gpdv fez10in fg4l7m0 fkfq4zb f9hdeju f139oj5f"
+              fill="currentColor"
+              height="20"
+              viewBox="0 0 20 20"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
+                fill="currentColor"
+              />
+            </svg>
           </span>
         </button>
         <span
-          class="ms-layer"
+          hidden=""
         />
       </div>
     </div>
@@ -1323,6 +2098,7 @@ exports[`DetailsViewCommandBar renders start test over dialog: start test over d
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-loadassessmentdialog
       assessmentstoredata="[object Object]"
@@ -1338,6 +2114,7 @@ exports[`DetailsViewCommandBar renders start test over dialog: start test over d
       switchernavconfiguration="[object Object]"
       tabid="5"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-startoverdialog
       assessmentstoredata="[object Object]"
@@ -1350,6 +2127,7 @@ exports[`DetailsViewCommandBar renders start test over dialog: start test over d
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-quickassesstoassessmentconfirmdialog
       assessmentstoredata="[object Object]"
@@ -1362,6 +2140,20 @@ exports[`DetailsViewCommandBar renders start test over dialog: start test over d
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-saveassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
   </div>
 </DocumentFragment>
@@ -1400,63 +2192,78 @@ exports[`DetailsViewCommandBar renders start test over dialog: start test over d
       class="detailsViewCommandButtons"
     >
       <button
-        class="ms-Button ms-Button--action ms-Button--command insightsCommandButton root-109"
+        class="fui-Button r1alrhcs ___140khrv_1s9dz87 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f7otkfg"
         data-automation-id="report-export-button"
-        data-is-focusable="true"
+        id="report-export-button"
         type="button"
       >
         <span
-          class="ms-Button-flexContainer flexContainer-110"
-          data-automationid="splitbuttonprimary"
+          class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
         >
-          <i
+          <svg
             aria-hidden="true"
-            class="ms-Icon root-105 ms-Button-icon commandBarButtonIcon icon-112 commandBarButtonIcon"
-            data-icon-name="Export"
-          />
-          <span
-            class="ms-Button-textContainer textContainer-111"
+            class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <span
-              class="ms-Button-label label-113"
-              id="id__21"
-            >
-              Export result
-            </span>
-          </span>
+            <path
+              d="M2.5 4c.28 0 .5.22.5.5v11a.5.5 0 0 1-1 0v-11c0-.28.22-.5.5-.5ZM5 10c0-.28.22-.5.5-.5h10.8l-3.15-3.15a.5.5 0 0 1 .7-.7l4 4a.5.5 0 0 1 0 .7l-4 4a.5.5 0 0 1-.7-.7l3.14-3.15H5.5A.5.5 0 0 1 5 10Z"
+              fill="currentColor"
+            />
+          </svg>
         </span>
+        Export result
       </button>
       <div>
         <button
+          aria-expanded="false"
+          aria-haspopup="menu"
           aria-label="start over menu"
-          class="ms-Button ms-Button--action ms-Button--command insightsCommandButton root-109"
-          data-is-focusable="true"
+          class="fui-Button r1alrhcs fui-MenuButton ___5uqdeq0_1y5fi4n f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1kyxi2w f1t6ax4o fycuoez f1dswenw f9hdeju f7otkfg"
+          data-tabster="{"restorer":{"type":1}}"
+          id="menur0"
+          role="button"
           type="button"
         >
           <span
-            class="ms-Button-flexContainer flexContainer-110"
-            data-automationid="splitbuttonprimary"
+            class="fui-Button__icon rywnvv2 fui-MenuButton__icon ___963sj20_1qpm2bl f1nizpg2"
           >
-            <i
+            <svg
               aria-hidden="true"
-              class="ms-Icon root-105 ms-Button-icon commandBarButtonIcon icon-112 commandBarButtonIcon"
-              data-icon-name="Refresh"
-            />
-            <span
-              class="ms-Button-textContainer textContainer-111"
+              class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 20 20"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <span
-                class="ms-Button-label label-113"
-                id="id__24"
-              >
-                Start over
-              </span>
-            </span>
-            <i
+              <path
+                d="M4 10a6 6 0 0 1 10.47-4H12.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-1 0v1.6a7 7 0 1 0 1.98 4.36.5.5 0 1 0-1 .08L16 10a6 6 0 0 1-12 0Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+          Start over
+          <span
+            class="fui-MenuButton__menuIcon ___c2pfdf0_8ts8a30 fwrc4pm f1ugzwwg fvblgha frx94fk fbyavb5"
+          >
+            <svg
               aria-hidden="true"
-              class="ms-Icon root-105 ms-Button-menuIcon menuIcon-114"
-              data-icon-name="ChevronDown"
-            />
+              class="___1p6ai22_1ra22ji f1w7gpdv fez10in fg4l7m0 fkfq4zb f9hdeju f139oj5f"
+              fill="currentColor"
+              height="20"
+              viewBox="0 0 20 20"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
+                fill="currentColor"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -1485,6 +2292,7 @@ exports[`DetailsViewCommandBar renders start test over dialog: start test over d
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-loadassessmentdialog
       assessmentstoredata="[object Object]"
@@ -1500,6 +2308,7 @@ exports[`DetailsViewCommandBar renders start test over dialog: start test over d
       switchernavconfiguration="[object Object]"
       tabid="5"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-startoverdialog
       assessmentstoredata="[object Object]"
@@ -1512,6 +2321,7 @@ exports[`DetailsViewCommandBar renders start test over dialog: start test over d
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-quickassesstoassessmentconfirmdialog
       assessmentstoredata="[object Object]"
@@ -1524,6 +2334,20 @@ exports[`DetailsViewCommandBar renders start test over dialog: start test over d
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-saveassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
   </div>
 </DocumentFragment>
@@ -1562,31 +2386,30 @@ exports[`DetailsViewCommandBar renders transfer to assessment dialog: transfer t
       class="detailsViewCommandButtons"
     >
       <button
-        class="ms-Button ms-Button--action ms-Button--command insightsCommandButton root-109"
+        class="fui-Button r1alrhcs ___140khrv_1s9dz87 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f7otkfg"
         data-automation-id="report-export-button"
-        data-is-focusable="true"
+        id="report-export-button"
         type="button"
       >
         <span
-          class="ms-Button-flexContainer flexContainer-110"
-          data-automationid="splitbuttonprimary"
+          class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
         >
-          <i
+          <svg
             aria-hidden="true"
-            class="ms-Icon root-105 ms-Button-icon commandBarButtonIcon icon-112 commandBarButtonIcon"
-            data-icon-name="Export"
-          />
-          <span
-            class="ms-Button-textContainer textContainer-111"
+            class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <span
-              class="ms-Button-label label-113"
-              id="id__39"
-            >
-              Export result
-            </span>
-          </span>
+            <path
+              d="M2.5 4c.28 0 .5.22.5.5v11a.5.5 0 0 1-1 0v-11c0-.28.22-.5.5-.5ZM5 10c0-.28.22-.5.5-.5h10.8l-3.15-3.15a.5.5 0 0 1 .7-.7l4 4a.5.5 0 0 1 0 .7l-4 4a.5.5 0 0 1-.7-.7l3.14-3.15H5.5A.5.5 0 0 1 5 10Z"
+              fill="currentColor"
+            />
+          </svg>
         </span>
+        Export result
       </button>
       <div>
         Transfer to assessment stub
@@ -1616,6 +2439,7 @@ exports[`DetailsViewCommandBar renders transfer to assessment dialog: transfer t
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-loadassessmentdialog
       assessmentstoredata="[object Object]"
@@ -1631,6 +2455,7 @@ exports[`DetailsViewCommandBar renders transfer to assessment dialog: transfer t
       switchernavconfiguration="[object Object]"
       tabid="5"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-startoverdialog
       assessmentstoredata="[object Object]"
@@ -1643,6 +2468,7 @@ exports[`DetailsViewCommandBar renders transfer to assessment dialog: transfer t
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-quickassesstoassessmentconfirmdialog
       assessmentstoredata="[object Object]"
@@ -1655,6 +2481,20 @@ exports[`DetailsViewCommandBar renders transfer to assessment dialog: transfer t
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-saveassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
   </div>
 </DocumentFragment>
@@ -1693,31 +2533,30 @@ exports[`DetailsViewCommandBar renders transfer to assessment dialog: transfer t
       class="detailsViewCommandButtons"
     >
       <button
-        class="ms-Button ms-Button--action ms-Button--command insightsCommandButton root-109"
+        class="fui-Button r1alrhcs ___140khrv_1s9dz87 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f7otkfg"
         data-automation-id="report-export-button"
-        data-is-focusable="true"
+        id="report-export-button"
         type="button"
       >
         <span
-          class="ms-Button-flexContainer flexContainer-110"
-          data-automationid="splitbuttonprimary"
+          class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
         >
-          <i
+          <svg
             aria-hidden="true"
-            class="ms-Icon root-105 ms-Button-icon commandBarButtonIcon icon-112 commandBarButtonIcon"
-            data-icon-name="Export"
-          />
-          <span
-            class="ms-Button-textContainer textContainer-111"
+            class="___134f6oe_gm9x020 f1w7gpdv fez10in fg4l7m0 fq3bhnu"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 20 20"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <span
-              class="ms-Button-label label-113"
-              id="id__39"
-            >
-              Export result
-            </span>
-          </span>
+            <path
+              d="M2.5 4c.28 0 .5.22.5.5v11a.5.5 0 0 1-1 0v-11c0-.28.22-.5.5-.5ZM5 10c0-.28.22-.5.5-.5h10.8l-3.15-3.15a.5.5 0 0 1 .7-.7l4 4a.5.5 0 0 1 0 .7l-4 4a.5.5 0 0 1-.7-.7l3.14-3.15H5.5A.5.5 0 0 1 5 10Z"
+              fill="currentColor"
+            />
+          </svg>
         </span>
+        Export result
       </button>
       <div>
         Transfer to assessment stub
@@ -1747,6 +2586,7 @@ exports[`DetailsViewCommandBar renders transfer to assessment dialog: transfer t
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-loadassessmentdialog
       assessmentstoredata="[object Object]"
@@ -1762,6 +2602,7 @@ exports[`DetailsViewCommandBar renders transfer to assessment dialog: transfer t
       switchernavconfiguration="[object Object]"
       tabid="5"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-startoverdialog
       assessmentstoredata="[object Object]"
@@ -1774,6 +2615,7 @@ exports[`DetailsViewCommandBar renders transfer to assessment dialog: transfer t
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-quickassesstoassessmentconfirmdialog
       assessmentstoredata="[object Object]"
@@ -1786,11 +2628,29 @@ exports[`DetailsViewCommandBar renders transfer to assessment dialog: transfer t
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-saveassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
   </div>
 </DocumentFragment>
 `;
 
+exports[`DetailsViewCommandBar renders with buttons  1`] = `<DocumentFragment />`;
+
+exports[`DetailsViewCommandBar renders with buttons : CommandBarButtonsMenu props 1`] = `undefined`;
+
 exports[`DetailsViewCommandBar renders with buttons collapsed into a menu 1`] = `
 <DocumentFragment>
   <div
@@ -1845,6 +2705,7 @@ exports[`DetailsViewCommandBar renders with buttons collapsed into a menu 1`] =
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-loadassessmentdialog
       assessmentstoredata="[object Object]"
@@ -1860,6 +2721,7 @@ exports[`DetailsViewCommandBar renders with buttons collapsed into a menu 1`] =
       switchernavconfiguration="[object Object]"
       tabid="5"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-startoverdialog
       assessmentstoredata="[object Object]"
@@ -1872,6 +2734,7 @@ exports[`DetailsViewCommandBar renders with buttons collapsed into a menu 1`] =
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-quickassesstoassessmentconfirmdialog
       assessmentstoredata="[object Object]"
@@ -1884,6 +2747,20 @@ exports[`DetailsViewCommandBar renders with buttons collapsed into a menu 1`] =
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-saveassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
   </div>
 </DocumentFragment>
@@ -1940,25 +2817,10 @@ exports[`DetailsViewCommandBar renders with export button and start over 1`] = `
         Transfer to assessment stub
       </div>
       <button
-        class="ms-Button ms-Button--action ms-Button--command root-109"
-        data-is-focusable="true"
+        class="fui-Button r1alrhcs"
         type="button"
       >
-        <span
-          class="ms-Button-flexContainer flexContainer-110"
-          data-automationid="splitbuttonprimary"
-        >
-          <span
-            class="ms-Button-textContainer textContainer-111"
-          >
-            <span
-              class="ms-Button-label label-113"
-              id="id__0"
-            >
-              Start Over Component
-            </span>
-          </span>
-        </span>
+        Start Over Component
       </button>
     </div>
     <mock-exportdialog
@@ -1985,6 +2847,7 @@ exports[`DetailsViewCommandBar renders with export button and start over 1`] = `
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-loadassessmentdialog
       assessmentstoredata="[object Object]"
@@ -2000,6 +2863,7 @@ exports[`DetailsViewCommandBar renders with export button and start over 1`] = `
       switchernavconfiguration="[object Object]"
       tabid="5"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-startoverdialog
       assessmentstoredata="[object Object]"
@@ -2012,6 +2876,7 @@ exports[`DetailsViewCommandBar renders with export button and start over 1`] = `
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-quickassesstoassessmentconfirmdialog
       assessmentstoredata="[object Object]"
@@ -2024,6 +2889,20 @@ exports[`DetailsViewCommandBar renders with export button and start over 1`] = `
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-saveassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
   </div>
 </DocumentFragment>
@@ -2093,6 +2972,7 @@ exports[`DetailsViewCommandBar renders with export button, without start over 1`
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-loadassessmentdialog
       assessmentstoredata="[object Object]"
@@ -2108,6 +2988,7 @@ exports[`DetailsViewCommandBar renders with export button, without start over 1`
       switchernavconfiguration="[object Object]"
       tabid="5"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-startoverdialog
       assessmentstoredata="[object Object]"
@@ -2120,6 +3001,7 @@ exports[`DetailsViewCommandBar renders with export button, without start over 1`
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-quickassesstoassessmentconfirmdialog
       assessmentstoredata="[object Object]"
@@ -2132,6 +3014,20 @@ exports[`DetailsViewCommandBar renders with export button, without start over 1`
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-saveassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
   </div>
 </DocumentFragment>
@@ -2200,6 +3096,7 @@ exports[`DetailsViewCommandBar renders without export button and without start o
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-loadassessmentdialog
       assessmentstoredata="[object Object]"
@@ -2215,6 +3112,7 @@ exports[`DetailsViewCommandBar renders without export button and without start o
       switchernavconfiguration="[object Object]"
       tabid="5"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-startoverdialog
       assessmentstoredata="[object Object]"
@@ -2227,6 +3125,7 @@ exports[`DetailsViewCommandBar renders without export button and without start o
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-quickassesstoassessmentconfirmdialog
       assessmentstoredata="[object Object]"
@@ -2239,6 +3138,20 @@ exports[`DetailsViewCommandBar renders without export button and without start o
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-saveassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
   </div>
 </DocumentFragment>
@@ -2283,25 +3196,10 @@ exports[`DetailsViewCommandBar renders without export button, with start over 1`
         Transfer to assessment stub
       </div>
       <button
-        class="ms-Button ms-Button--action ms-Button--command root-109"
-        data-is-focusable="true"
+        class="fui-Button r1alrhcs"
         type="button"
       >
-        <span
-          class="ms-Button-flexContainer flexContainer-110"
-          data-automationid="splitbuttonprimary"
-        >
-          <span
-            class="ms-Button-textContainer textContainer-111"
-          >
-            <span
-              class="ms-Button-label label-113"
-              id="id__3"
-            >
-              Start Over Component
-            </span>
-          </span>
-        </span>
+        Start Over Component
       </button>
     </div>
     <mock-exportdialog
@@ -2328,6 +3226,7 @@ exports[`DetailsViewCommandBar renders without export button, with start over 1`
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-loadassessmentdialog
       assessmentstoredata="[object Object]"
@@ -2343,6 +3242,7 @@ exports[`DetailsViewCommandBar renders without export button, with start over 1`
       switchernavconfiguration="[object Object]"
       tabid="5"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-startoverdialog
       assessmentstoredata="[object Object]"
@@ -2355,6 +3255,7 @@ exports[`DetailsViewCommandBar renders without export button, with start over 1`
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
     <mock-quickassesstoassessmentconfirmdialog
       assessmentstoredata="[object Object]"
@@ -2367,6 +3268,20 @@ exports[`DetailsViewCommandBar renders without export button, with start over 1`
       scanmetadata="[object Object]"
       switchernavconfiguration="[object Object]"
       tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
+    />
+    <mock-saveassessmentdialog
+      assessmentstoredata="[object Object]"
+      datatransferviewstoredata="[object Object]"
+      deps="[object Object]"
+      featureflagstoredata="[object Object]"
+      isopen="false"
+      narrowmodestatus="[object Object]"
+      rightpanelconfiguration="[object Object]"
+      scanmetadata="[object Object]"
+      switchernavconfiguration="[object Object]"
+      tabstoredata="[object Object]"
+      userconfigurationstoredata="[object Object]"
     />
   </div>
 </DocumentFragment>
diff --git a/src/tests/unit/tests/DetailsView/components/__snapshots__/failure-instance-panel-control.test.tsx.snap b/src/tests/unit/tests/DetailsView/components/__snapshots__/failure-instance-panel-control.test.tsx.snap
index 71a7881e13e..b4df5ffc26b 100644
--- a/src/tests/unit/tests/DetailsView/components/__snapshots__/failure-instance-panel-control.test.tsx.snap
+++ b/src/tests/unit/tests/DetailsView/components/__snapshots__/failure-instance-panel-control.test.tsx.snap
@@ -1,13 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FailureInstancePanelControlTest closeFailureInstancePanel: CustomizedActionButton props 1`] = `
+exports[`FailureInstancePanelControlTest closeFailureInstancePanel: Button props 1`] = `
 {
-  "ariaDescription": "Open add a failure instance panel",
-  "ariaLabel": "Add a failure instance",
+  "appearance": "transparent",
+  "aria-description": "Open add a failure instance panel",
+  "aria-label": "Add a failure instance",
   "children": "Add a failure instance",
-  "iconProps": {
-    "iconName": "Add",
-  },
+  "icon": <FluentUIV9Icon
+    iconName="AddRegular"
+  />,
   "onClick": [Function],
 }
 `;
@@ -25,88 +26,94 @@ exports[`FailureInstancePanelControlTest closeFailureInstancePanel: FlaggedCompo
 }
 `;
 
-exports[`FailureInstancePanelControlTest componentDidUpdate reassigns state: CustomizedActionButton props 1`] = `
+exports[`FailureInstancePanelControlTest componentDidUpdate reassigns state: Button props 1`] = `
 {
-  "ariaDescription": "Open add a failure instance panel",
-  "ariaLabel": "Add a failure instance",
+  "appearance": "transparent",
+  "aria-description": "Open add a failure instance panel",
+  "aria-label": "Add a failure instance",
   "children": "Add a failure instance",
-  "iconProps": {
-    "iconName": "Add",
-  },
+  "icon": <FluentUIV9Icon
+    iconName="AddRegular"
+  />,
   "onClick": [Function],
 }
 `;
 
 exports[`FailureInstancePanelControlTest componentDidUpdate reassigns state: FlaggedComponent props 1`] = `undefined`;
 
-exports[`FailureInstancePanelControlTest onAddFailureInstance: CustomizedActionButton props 1`] = `
+exports[`FailureInstancePanelControlTest onAddFailureInstance: Button props 1`] = `
 {
-  "ariaDescription": "Open add a failure instance panel",
-  "ariaLabel": "Add a failure instance",
+  "appearance": "transparent",
+  "aria-description": "Open add a failure instance panel",
+  "aria-label": "Add a failure instance",
   "children": "Add a failure instance",
-  "iconProps": {
-    "iconName": "Add",
-  },
+  "icon": <FluentUIV9Icon
+    iconName="AddRegular"
+  />,
   "onClick": [Function],
 }
 `;
 
 exports[`FailureInstancePanelControlTest onAddFailureInstance: FlaggedComponent props 1`] = `undefined`;
 
-exports[`FailureInstancePanelControlTest onFailureDescriptionChange: CustomizedActionButton props 1`] = `
+exports[`FailureInstancePanelControlTest onFailureDescriptionChange: Button props 1`] = `
 {
-  "ariaDescription": "Open add a failure instance panel",
-  "ariaLabel": "Add a failure instance",
+  "appearance": "transparent",
+  "aria-description": "Open add a failure instance panel",
+  "aria-label": "Add a failure instance",
   "children": "Add a failure instance",
-  "iconProps": {
-    "iconName": "Add",
-  },
+  "icon": <FluentUIV9Icon
+    iconName="AddRegular"
+  />,
   "onClick": [Function],
 }
 `;
 
 exports[`FailureInstancePanelControlTest onFailureDescriptionChange: FlaggedComponent props 1`] = `undefined`;
 
-exports[`FailureInstancePanelControlTest onSaveEditedFailureInstance: CustomizedActionButton props 1`] = `undefined`;
+exports[`FailureInstancePanelControlTest onSaveEditedFailureInstance: Button props 1`] = `undefined`;
 
 exports[`FailureInstancePanelControlTest onSaveEditedFailureInstance: FlaggedComponent props 1`] = `undefined`;
 
-exports[`FailureInstancePanelControlTest onSelectorChange : CustomizedActionButton props 1`] = `
+exports[`FailureInstancePanelControlTest onSelectorChange : Button props 1`] = `
 {
-  "ariaDescription": "Open add a failure instance panel",
-  "ariaLabel": "Add a failure instance",
+  "appearance": "transparent",
+  "aria-description": "Open add a failure instance panel",
+  "aria-label": "Add a failure instance",
   "children": "Add a failure instance",
-  "iconProps": {
-    "iconName": "Add",
-  },
+  "icon": <FluentUIV9Icon
+    iconName="AddRegular"
+  />,
   "onClick": [Function],
 }
 `;
 
 exports[`FailureInstancePanelControlTest onSelectorChange : FlaggedComponent props 1`] = `undefined`;
 
-exports[`FailureInstancePanelControlTest onValidateSelector : CustomizedActionButton props 1`] = `
+exports[`FailureInstancePanelControlTest onValidateSelector : Button props 1`] = `
 {
-  "ariaDescription": "Open add a failure instance panel",
-  "ariaLabel": "Add a failure instance",
+  "appearance": "transparent",
+  "aria-description": "Open add a failure instance panel",
+  "aria-label": "Add a failure instance",
   "children": "Add a failure instance",
-  "iconProps": {
-    "iconName": "Add",
-  },
+  "icon": <FluentUIV9Icon
+    iconName="AddRegular"
+  />,
   "onClick": [Function],
 }
 `;
 
 exports[`FailureInstancePanelControlTest onValidateSelector : FlaggedComponent props 1`] = `undefined`;
 
-exports[`FailureInstancePanelControlTest openFailureInstancePanel: CustomizedActionButton props 1`] = `
+exports[`FailureInstancePanelControlTest openFailureInstancePanel: Button props 1`] = `
 {
-  "ariaDescription": "Open add a failure instance panel",
-  "ariaLabel": "Add a failure instance",
+  "appearance": "transparent",
+  "aria-description": "Open add a failure instance panel",
+  "aria-label": "Add a failure instance",
   "children": "Add a failure instance",
-  "iconProps": {
-    "iconName": "Add",
-  },
+  "icon": <FluentUIV9Icon
+    iconName="AddRegular"
+  />,
   "onClick": [Function],
 }
 `;
@@ -115,13 +122,14 @@ exports[`FailureInstancePanelControlTest openFailureInstancePanel: FlaggedCompon
 
 exports[`FailureInstancePanelControlTest render FailureInstancePanelControl: create without instance 1`] = `
 <DocumentFragment>
-  <mock-customizedactionbutton
-    ariadescription="Open add a failure instance panel"
-    arialabel="Add a failure instance"
-    iconprops="[object Object]"
+  <mock-button
+    appearance="transparent"
+    aria-description="Open add a failure instance panel"
+    aria-label="Add a failure instance"
+    icon="[object Object]"
   >
     Add a failure instance
-  </mock-customizedactionbutton>
+  </mock-button>
   <mock-genericpanel
     classname="failureInstancePanel"
     closebuttonarialabel="Close failure instance panel"
@@ -154,14 +162,15 @@ exports[`FailureInstancePanelControlTest render FailureInstancePanelControl: cre
 </DocumentFragment>
 `;
 
-exports[`FailureInstancePanelControlTest render FailureInstancePanelControl: create without instance: CustomizedActionButton props 1`] = `
+exports[`FailureInstancePanelControlTest render FailureInstancePanelControl: create without instance: Button props 1`] = `
 {
-  "ariaDescription": "Open add a failure instance panel",
-  "ariaLabel": "Add a failure instance",
+  "appearance": "transparent",
+  "aria-description": "Open add a failure instance panel",
+  "aria-label": "Add a failure instance",
   "children": "Add a failure instance",
-  "iconProps": {
-    "iconName": "Add",
-  },
+  "icon": <FluentUIV9Icon
+    iconName="AddRegular"
+  />,
   "onClick": [Function],
 }
 `;
@@ -216,7 +225,7 @@ exports[`FailureInstancePanelControlTest render FailureInstancePanelControl: edi
 </DocumentFragment>
 `;
 
-exports[`FailureInstancePanelControlTest render FailureInstancePanelControl: edit without instance: CustomizedActionButton props 1`] = `undefined`;
+exports[`FailureInstancePanelControlTest render FailureInstancePanelControl: edit without instance: Button props 1`] = `undefined`;
 
 exports[`FailureInstancePanelControlTest render FailureInstancePanelControl: edit without instance: FlaggedComponent props 1`] = `
 {
@@ -233,13 +242,14 @@ exports[`FailureInstancePanelControlTest render FailureInstancePanelControl: edi
 
 exports[`FailureInstancePanelControlTest render FailureInstancePanelControl: partial original instance 1`] = `
 <DocumentFragment>
-  <mock-customizedactionbutton
-    ariadescription="Open add a failure instance panel"
-    arialabel="Add a failure instance"
-    iconprops="[object Object]"
+  <mock-button
+    appearance="transparent"
+    aria-description="Open add a failure instance panel"
+    aria-label="Add a failure instance"
+    icon="[object Object]"
   >
     Add a failure instance
-  </mock-customizedactionbutton>
+  </mock-button>
   <mock-genericpanel
     classname="failureInstancePanel"
     closebuttonarialabel="Close failure instance panel"
@@ -271,14 +281,15 @@ exports[`FailureInstancePanelControlTest render FailureInstancePanelControl: par
 </DocumentFragment>
 `;
 
-exports[`FailureInstancePanelControlTest render FailureInstancePanelControl: partial original instance: CustomizedActionButton props 1`] = `
+exports[`FailureInstancePanelControlTest render FailureInstancePanelControl: partial original instance: Button props 1`] = `
 {
-  "ariaDescription": "Open add a failure instance panel",
-  "ariaLabel": "Add a failure instance",
+  "appearance": "transparent",
+  "aria-description": "Open add a failure instance panel",
+  "aria-label": "Add a failure instance",
   "children": "Add a failure instance",
-  "iconProps": {
-    "iconName": "Add",
-  },
+  "icon": <FluentUIV9Icon
+    iconName="AddRegular"
+  />,
   "onClick": [Function],
 }
 `;
diff --git a/src/tests/unit/tests/DetailsView/components/__snapshots__/iframe-warning.test.tsx.snap b/src/tests/unit/tests/DetailsView/components/__snapshots__/iframe-warning.test.tsx.snap
index c37b5b63b54..ce90dfcbbc7 100644
--- a/src/tests/unit/tests/DetailsView/components/__snapshots__/iframe-warning.test.tsx.snap
+++ b/src/tests/unit/tests/DetailsView/components/__snapshots__/iframe-warning.test.tsx.snap
@@ -8,6 +8,7 @@ exports[`AssessmentIframeWarning render 1`] = `
     There are iframes in the target page. To have complete results, 
     <mock-link
       classname="insights-link"
+      style="font-size: 12px;"
     >
       give Accessibility Insights additional permissions
     </mock-link>
@@ -29,6 +30,7 @@ exports[`FastPassIframeWarning render 1`] = `
     There are iframes in the target page. To have complete results, 
     <mock-link
       classname="insights-link"
+      style="font-size: 12px;"
     >
       give Accessibility Insights additional permissions
     </mock-link>
@@ -50,6 +52,7 @@ exports[`IframeWarning render 1`] = `
     There are iframes in the target page. To have complete results, 
     <mock-link
       classname="insights-link"
+      style="font-size: 12px;"
     >
       give Accessibility Insights additional permissions
     </mock-link>
diff --git a/src/tests/unit/tests/DetailsView/components/__snapshots__/inline-start-over-button.test.tsx.snap b/src/tests/unit/tests/DetailsView/components/__snapshots__/inline-start-over-button.test.tsx.snap
index fe551795e68..a599b2f8b38 100644
--- a/src/tests/unit/tests/DetailsView/components/__snapshots__/inline-start-over-button.test.tsx.snap
+++ b/src/tests/unit/tests/DetailsView/components/__snapshots__/inline-start-over-button.test.tsx.snap
@@ -5,20 +5,23 @@ exports[`InlineStartOverButton renders 1`] = `
   <mock-insightscommandbutton
     classname="inlineStartOverButton"
     data-automation-id="inline-start-over-button"
-    iconprops="[object Object]"
-    text="Start over"
-  />
+    insightscommandbuttoniconprops="[object Object]"
+  >
+    Start over
+  </mock-insightscommandbutton>
 </DocumentFragment>
 `;
 
 exports[`InlineStartOverButton renders: InsightsCommandButton props 1`] = `
 {
+  "children": "Start over",
   "className": "inlineStartOverButton",
   "data-automation-id": "inline-start-over-button",
-  "iconProps": {
-    "iconName": "Refresh",
+  "insightsCommandButtonIconProps": {
+    "icon": <FluentUIV9Icon
+      iconName="ArrowClockwiseRegular"
+    />,
   },
   "onClick": [Function],
-  "text": "Start over",
 }
 `;
diff --git a/src/tests/unit/tests/DetailsView/components/__snapshots__/load-assessment-button.test.tsx.snap b/src/tests/unit/tests/DetailsView/components/__snapshots__/load-assessment-button.test.tsx.snap
index ded7755519c..fe27bc45eb1 100644
--- a/src/tests/unit/tests/DetailsView/components/__snapshots__/load-assessment-button.test.tsx.snap
+++ b/src/tests/unit/tests/DetailsView/components/__snapshots__/load-assessment-button.test.tsx.snap
@@ -3,8 +3,9 @@
 exports[`LoadAssessmentButton should render per the snapshot 1`] = `
 <DocumentFragment>
   <mock-insightscommandbutton
+    classname="___173moxi_0000000 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f139oj5f f7otkfg"
     data-automation-id="load-assessment-button"
-    iconprops="[object Object]"
+    insightscommandbuttoniconprops="[object Object]"
   >
     Load assessment
   </mock-insightscommandbutton>
@@ -13,11 +14,18 @@ exports[`LoadAssessmentButton should render per the snapshot 1`] = `
 
 exports[`LoadAssessmentButton should render per the snapshot: InsightsCommandButton props 1`] = `
 {
+  "assessmentStoreData": undefined,
   "children": "Load assessment",
+  "className": "___173moxi_0000000 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f139oj5f f7otkfg",
   "data-automation-id": "load-assessment-button",
-  "iconProps": {
-    "iconName": "FabricOpenFolderHorizontal",
+  "deps": undefined,
+  "handleLoadAssessmentButtonClick": [Function],
+  "insightsCommandButtonIconProps": {
+    "icon": <FluentUIV9Icon
+      iconName="FolderOpenRegular"
+    />,
   },
   "onClick": [Function],
+  "tabStoreData": undefined,
 }
 `;
diff --git a/src/tests/unit/tests/DetailsView/components/__snapshots__/report-export-button.test.tsx.snap b/src/tests/unit/tests/DetailsView/components/__snapshots__/report-export-button.test.tsx.snap
index ecf04f37e6c..3518166909c 100644
--- a/src/tests/unit/tests/DetailsView/components/__snapshots__/report-export-button.test.tsx.snap
+++ b/src/tests/unit/tests/DetailsView/components/__snapshots__/report-export-button.test.tsx.snap
@@ -3,9 +3,10 @@
 exports[`ReportExportButton renders ReportExportButton 1`] = `
 <DocumentFragment>
   <mock-insightscommandbutton
-    componentref="[object Object]"
+    classname="___173moxi_0000000 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f139oj5f f7otkfg"
     data-automation-id="report-export-button"
-    iconprops="[object Object]"
+    id="report-export-button"
+    insightscommandbuttoniconprops="[object Object]"
   >
     Export result
   </mock-insightscommandbutton>
@@ -15,11 +16,15 @@ exports[`ReportExportButton renders ReportExportButton 1`] = `
 exports[`ReportExportButton renders ReportExportButton: InsightsCommandButton props 1`] = `
 {
   "children": "Export result",
-  "componentRef": {},
+  "className": "___173moxi_0000000 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f139oj5f f7otkfg",
   "data-automation-id": "report-export-button",
-  "iconProps": {
-    "iconName": "Export",
+  "id": "report-export-button",
+  "insightsCommandButtonIconProps": {
+    "icon": <FluentUIV9Icon
+      iconName="ArrowExportRegular"
+    />,
   },
   "onClick": [MockFunction],
+  "showReportExportDialog": [MockFunction],
 }
 `;
diff --git a/src/tests/unit/tests/DetailsView/components/__snapshots__/requirement-view-next-requirement-configuration.test.tsx.snap b/src/tests/unit/tests/DetailsView/components/__snapshots__/requirement-view-next-requirement-configuration.test.tsx.snap
index 04db392f552..66bbc99b99a 100644
--- a/src/tests/unit/tests/DetailsView/components/__snapshots__/requirement-view-next-requirement-configuration.test.tsx.snap
+++ b/src/tests/unit/tests/DetailsView/components/__snapshots__/requirement-view-next-requirement-configuration.test.tsx.snap
@@ -43,11 +43,14 @@ exports[`RequirementViewNextRequirementConfiguration getNextRequirementConfigura
 `;
 
 exports[`RequirementViewNextRequirementConfiguration getNextRequirementConfigurationForQuickAssess returns Complete button when it is last requirement in quickAssessRequirementKeys 1`] = `
-<CustomizedPrimaryButton
+<Button
+  appearance="primary"
   data-automation-id="complete-button"
   onClick={[Function]}
-  text="Complete"
-/>
+  shape="square"
+>
+  Complete
+</Button>
 `;
 
 exports[`RequirementViewNextRequirementConfiguration getNextRequirementConfigurationForQuickAssess returns NextRequirementButton with next requirement in quickAssessRequirementKeys 1`] = `
diff --git a/src/tests/unit/tests/DetailsView/components/__snapshots__/save-assessment-button.test.tsx.snap b/src/tests/unit/tests/DetailsView/components/__snapshots__/save-assessment-button.test.tsx.snap
index 091a9c81524..9b160201c0b 100644
--- a/src/tests/unit/tests/DetailsView/components/__snapshots__/save-assessment-button.test.tsx.snap
+++ b/src/tests/unit/tests/DetailsView/components/__snapshots__/save-assessment-button.test.tsx.snap
@@ -1,54 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SaveAssessmentButton on dialog enabled render snapshot of dialog 1`] = `
+exports[`SaveAssessmentButton should render per snapshot 1`] = `
 <DocumentFragment>
-  <mock-customizedactionbutton
+  <mock-insightscommandbutton
+    as="a"
+    deps="[object Object]"
     download="download"
     href="url"
-    iconprops="[object Object]"
+    insightscommandbuttoniconprops="[object Object]"
+    userconfigurationstoredata="[object Object]"
   >
     Save assessment
-  </mock-customizedactionbutton>
-  <mock-dialog
-    dialogcontentprops="[object Object]"
-    hidden="false"
-    modalprops="[object Object]"
-  >
-    <div
-      class="dialogBody"
-    >
-      To load this assessment, use the 
-      <strong>
-        Load assessment
-      </strong>
-       button in the Accessibility Insights Assessment command bar.
-    </div>
-    <mock-styleddialogfooterbase>
-      <mock-stack
-        horizontal="true"
-        horizontalalign="space-between"
-        tokens="[object Object]"
-        verticalalign="center"
-        wrap="true"
-      >
-        <mock-stackitem
-          disableshrink="true"
-          grow="true"
-        >
-          <mock-styledcheckboxbase
-            checked="false"
-            label="Don't show again"
-          />
-        </mock-stackitem>
-        <mock-stackitem
-          grow="true"
-        >
-          <mock-customizedprimarybutton
-            text="Got it"
-          />
-        </mock-stackitem>
-      </mock-stack>
-    </mock-styleddialogfooterbase>
-  </mock-dialog>
+  </mock-insightscommandbutton>
 </DocumentFragment>
 `;
diff --git a/src/tests/unit/tests/DetailsView/components/__snapshots__/save-assessment-dialog.test.tsx.snap b/src/tests/unit/tests/DetailsView/components/__snapshots__/save-assessment-dialog.test.tsx.snap
new file mode 100644
index 00000000000..e5882d45f8a
--- /dev/null
+++ b/src/tests/unit/tests/DetailsView/components/__snapshots__/save-assessment-dialog.test.tsx.snap
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SaveAssessmentDialog render snapshot of dialog 1`] = `
+<DocumentFragment>
+  <mock-dialog
+    dialogcontentprops="[object Object]"
+    hidden="false"
+    modalprops="[object Object]"
+  >
+    <div
+      class="dialogBody"
+    >
+      To load this assessment, use the 
+      <strong>
+        Load assessment
+      </strong>
+       button in the Accessibility Insights Assessment command bar.
+    </div>
+    <mock-styleddialogfooterbase>
+      <mock-stack
+        horizontal="true"
+        horizontalalign="space-between"
+        tokens="[object Object]"
+        verticalalign="center"
+        wrap="true"
+      >
+        <mock-stackitem
+          disableshrink="true"
+          grow="true"
+        >
+          <mock-styledcheckboxbase
+            checked="false"
+            label="Don't show again"
+          />
+        </mock-stackitem>
+        <mock-stackitem
+          grow="true"
+        >
+          <mock-customizedprimarybutton
+            text="Got it"
+          />
+        </mock-stackitem>
+      </mock-stack>
+    </mock-styleddialogfooterbase>
+  </mock-dialog>
+</DocumentFragment>
+`;
diff --git a/src/tests/unit/tests/DetailsView/components/__snapshots__/start-over-component-factory.test.tsx.snap b/src/tests/unit/tests/DetailsView/components/__snapshots__/start-over-component-factory.test.tsx.snap
index 0cd75f2d92e..7c4bae06f11 100644
--- a/src/tests/unit/tests/DetailsView/components/__snapshots__/start-over-component-factory.test.tsx.snap
+++ b/src/tests/unit/tests/DetailsView/components/__snapshots__/start-over-component-factory.test.tsx.snap
@@ -1,33 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`StartOverComponentFactory AssessmentStartOverFactory getStartOverComponent 1`] = `
-<StartOverDropdown
-  allTestSuffix="Assessment"
-  dropdownDirection="down"
-  rightPanelOptions={
-    {
-      "showTest": true,
-    }
-  }
-  singleTestSuffix="the title"
-  switcherStartOverPreferences={
-    {
-      "showTest": true,
-    }
-  }
-/>
+{
+  "allTestSuffix": "Assessment",
+  "buttonRef": undefined,
+  "dropdownDirection": "down",
+  "hasSubMenu": true,
+  "isNarrowMode": undefined,
+  "openDialog": undefined,
+  "rightPanelOptions": {
+    "showTest": true,
+  },
+  "singleTestSuffix": "the title",
+  "switcherStartOverPreferences": {
+    "showTest": true,
+  },
+}
 `;
 
 exports[`StartOverComponentFactory AssessmentStartOverFactory getStartOverComponent: StartOverDropdown props 1`] = `undefined`;
 
 exports[`StartOverComponentFactory AssessmentStartOverFactory getStartOverMenuItem 1`] = `
 <DocumentFragment>
-  <div
-    role="menuitem"
-  >
+  <div>
     <mock-startoverdropdown
       alltestsuffix="Assessment"
       dropdowndirection="left"
+      hassubmenu="true"
       rightpaneloptions="[object Object]"
       singletestsuffix="the title"
       switcherstartoverpreferences="[object Object]"
@@ -41,6 +40,8 @@ exports[`StartOverComponentFactory AssessmentStartOverFactory getStartOverMenuIt
   "allTestSuffix": "Assessment",
   "buttonRef": undefined,
   "dropdownDirection": "left",
+  "hasSubMenu": true,
+  "isNarrowMode": undefined,
   "openDialog": undefined,
   "rightPanelOptions": {
     "showTest": true,
@@ -63,9 +64,18 @@ exports[`StartOverComponentFactory FastpassStartOverFactory getStartOverComponen
       "iconName": "Refresh",
     }
   }
+  insightsCommandButtonIconProps={
+    {
+      "icon": <FluentUIV9Icon
+        iconName="ArrowClockwiseRegular"
+      />,
+    }
+  }
   onClick={[Function]}
   text="Start over"
-/>
+>
+  Start over
+</InsightsCommandButton>
 `;
 
 exports[`StartOverComponentFactory FastpassStartOverFactory getStartOverComponent renders scanning is false => component matches snapshot: StartOverDropdown props 1`] = `undefined`;
@@ -81,24 +91,48 @@ exports[`StartOverComponentFactory FastpassStartOverFactory getStartOverComponen
       "iconName": "Refresh",
     }
   }
+  insightsCommandButtonIconProps={
+    {
+      "icon": <FluentUIV9Icon
+        iconName="ArrowClockwiseRegular"
+      />,
+    }
+  }
   onClick={[Function]}
   text="Start over"
-/>
+>
+  Start over
+</InsightsCommandButton>
 `;
 
 exports[`StartOverComponentFactory FastpassStartOverFactory getStartOverComponent renders scanning is true => component matches snapshot: StartOverDropdown props 1`] = `undefined`;
 
 exports[`StartOverComponentFactory FastpassStartOverFactory getStartOverMenuItem renders scanning is false => component matches snapshot 1`] = `
 {
-  "className": "startOverMenuItem",
-  "data-automation-id": "start-over",
-  "disabled": false,
-  "iconProps": {
-    "className": "startOverMenuItemIcon",
-    "iconName": "Refresh",
-  },
-  "onClick": [Function],
-  "text": "Start over",
+  "children": <div>
+    <InsightsCommandButton
+      className="startOverMenuItem"
+      data-automation-id="start-over"
+      disabled={false}
+      iconProps={
+        {
+          "className": "startOverMenuItemIcon",
+          "iconName": "Refresh",
+        }
+      }
+      insightsCommandButtonIconProps={
+        {
+          "icon": <FluentUIV9Icon
+            iconName="ArrowClockwiseRegular"
+          />,
+        }
+      }
+      onClick={[Function]}
+      text="Start over"
+    >
+      Start over
+    </InsightsCommandButton>
+  </div>,
 }
 `;
 
@@ -106,15 +140,30 @@ exports[`StartOverComponentFactory FastpassStartOverFactory getStartOverMenuItem
 
 exports[`StartOverComponentFactory FastpassStartOverFactory getStartOverMenuItem renders scanning is true => component matches snapshot 1`] = `
 {
-  "className": "startOverMenuItem",
-  "data-automation-id": "start-over",
-  "disabled": true,
-  "iconProps": {
-    "className": "startOverMenuItemIcon",
-    "iconName": "Refresh",
-  },
-  "onClick": [Function],
-  "text": "Start over",
+  "children": <div>
+    <InsightsCommandButton
+      className="startOverMenuItem"
+      data-automation-id="start-over"
+      disabled={true}
+      iconProps={
+        {
+          "className": "startOverMenuItemIcon",
+          "iconName": "Refresh",
+        }
+      }
+      insightsCommandButtonIconProps={
+        {
+          "icon": <FluentUIV9Icon
+            iconName="ArrowClockwiseRegular"
+          />,
+        }
+      }
+      onClick={[Function]}
+      text="Start over"
+    >
+      Start over
+    </InsightsCommandButton>
+  </div>,
 }
 `;
 
@@ -124,6 +173,7 @@ exports[`StartOverComponentFactory QuickAssessStartOverFactory getStartOverCompo
 <StartOverDropdown
   allTestSuffix="Quick Assess"
   dropdownDirection="down"
+  hasSubMenu={true}
   rightPanelOptions={
     {
       "showTest": true,
@@ -142,12 +192,11 @@ exports[`StartOverComponentFactory QuickAssessStartOverFactory getStartOverCompo
 
 exports[`StartOverComponentFactory QuickAssessStartOverFactory getStartOverMenuItem 1`] = `
 <DocumentFragment>
-  <div
-    role="menuitem"
-  >
+  <div>
     <mock-startoverdropdown
       alltestsuffix="Quick Assess"
       dropdowndirection="left"
+      hassubmenu="true"
       rightpaneloptions="[object Object]"
       singletestsuffix=""
       switcherstartoverpreferences="[object Object]"
@@ -161,6 +210,8 @@ exports[`StartOverComponentFactory QuickAssessStartOverFactory getStartOverMenuI
   "allTestSuffix": "Quick Assess",
   "buttonRef": undefined,
   "dropdownDirection": "left",
+  "hasSubMenu": true,
+  "isNarrowMode": undefined,
   "openDialog": undefined,
   "rightPanelOptions": {
     "showTest": true,
diff --git a/src/tests/unit/tests/DetailsView/components/__snapshots__/start-over-dropdown.test.tsx.snap b/src/tests/unit/tests/DetailsView/components/__snapshots__/start-over-dropdown.test.tsx.snap
index 49f8929ccdc..29c53954b40 100644
--- a/src/tests/unit/tests/DetailsView/components/__snapshots__/start-over-dropdown.test.tsx.snap
+++ b/src/tests/unit/tests/DetailsView/components/__snapshots__/start-over-dropdown.test.tsx.snap
@@ -3,32 +3,38 @@
 exports[`StartOverDropdownTest render 1`] = `
 <DocumentFragment>
   <div>
-    <mock-insightscommandbutton
-      arialabel="start over menu"
-      componentref="[object Object]"
-      iconprops="[object Object]"
-      menuiconprops="[object Object]"
-      text="Start over"
-    />
-  </div>
-</DocumentFragment>
-`;
-
-exports[`StartOverDropdownTest render ContextualMenu 1`] = `
-<DocumentFragment>
-  <div>
-    <mock-insightscommandbutton
-      arialabel="start over menu"
-      componentref="[object Object]"
-      iconprops="[object Object]"
-      menuiconprops="[object Object]"
-      text="Start over"
-    />
-    <mock-styledcontextualmenubase
-      directionalhint="7"
-      items="[object Object],[object Object]"
-      target="test event"
-    />
+    <mock-menu>
+      <mock-menutrigger
+        disablebuttonenhancement="true"
+      >
+        <mock-menubutton
+          appearance="transparent"
+          aria-label="start over menu"
+          icon="[object Object]"
+          menuicon="[object Object]"
+          role="button"
+          shape="square"
+        >
+          Start over
+        </mock-menubutton>
+      </mock-menutrigger>
+      <mock-menupopover>
+        <mock-menulist>
+          <mock-menuitem
+            name="Start over all test suffix stub"
+            persistonclick="false"
+          >
+            Start over all test suffix stub
+          </mock-menuitem>
+          <mock-menuitem
+            name="Start over single test suffix stub"
+            persistonclick="false"
+          >
+            Start over single test suffix stub
+          </mock-menuitem>
+        </mock-menulist>
+      </mock-menupopover>
+    </mock-menu>
   </div>
 </DocumentFragment>
 `;
@@ -36,35 +42,72 @@ exports[`StartOverDropdownTest render ContextualMenu 1`] = `
 exports[`StartOverDropdownTest render with dropdown on left 1`] = `
 <DocumentFragment>
   <div>
-    <mock-insightscommandbutton
-      arialabel="start over menu"
-      componentref="[object Object]"
-      iconprops="[object Object]"
-      menuiconprops="[object Object]"
-      text="Start over"
-    />
-    <mock-styledcontextualmenubase
-      directionalhint="8"
-      items="[object Object],[object Object]"
-      target="test target"
-    />
+    <mock-menu>
+      <mock-menutrigger
+        disablebuttonenhancement="true"
+      >
+        <mock-menubutton
+          appearance="transparent"
+          aria-label="start over menu"
+          icon="[object Object]"
+          menuicon="[object Object]"
+          role="button"
+          shape="square"
+        >
+          Start over
+        </mock-menubutton>
+      </mock-menutrigger>
+      <mock-menupopover>
+        <mock-menulist>
+          <mock-menuitem
+            name="Start over all test suffix stub"
+            persistonclick="false"
+          >
+            Start over all test suffix stub
+          </mock-menuitem>
+          <mock-menuitem
+            name="Start over single test suffix stub"
+            persistonclick="false"
+          >
+            Start over single test suffix stub
+          </mock-menuitem>
+        </mock-menulist>
+      </mock-menupopover>
+    </mock-menu>
   </div>
 </DocumentFragment>
 `;
 
-exports[`StartOverDropdownTest render: InsightsCommandButton props 1`] = `
+exports[`StartOverDropdownTest render with dropdown on left: MenuButton props 1`] = `
 {
-  "ariaLabel": "start over menu",
-  "componentRef": {},
-  "iconProps": {
-    "iconName": "Refresh",
-  },
-  "menuIconProps": {
-    "iconName": "ChevronDown",
-  },
-  "onClick": [Function],
-  "text": "Start over",
+  "appearance": "transparent",
+  "aria-label": "start over menu",
+  "children": "Start over",
+  "className": undefined,
+  "icon": <FluentUIV9Icon
+    iconName="ArrowClockwiseRegular"
+  />,
+  "menuIcon": <FluentUIV9Icon
+    iconName="ChevronRight20Regular"
+  />,
+  "role": "button",
+  "shape": "square",
 }
 `;
 
-exports[`StartOverDropdownTest render: StyledContextualMenuBase props 1`] = `undefined`;
+exports[`StartOverDropdownTest render: MenuButton props 1`] = `
+{
+  "appearance": "transparent",
+  "aria-label": "start over menu",
+  "children": "Start over",
+  "className": undefined,
+  "icon": <FluentUIV9Icon
+    iconName="ArrowClockwiseRegular"
+  />,
+  "menuIcon": <FluentUIV9Icon
+    iconName="ChevronDown20Regular"
+  />,
+  "role": "button",
+  "shape": "square",
+}
+`;
diff --git a/src/tests/unit/tests/DetailsView/components/__snapshots__/transfer-to-assessment-button.test.tsx.snap b/src/tests/unit/tests/DetailsView/components/__snapshots__/transfer-to-assessment-button.test.tsx.snap
index 314bcb4fda3..f495cc13fe9 100644
--- a/src/tests/unit/tests/DetailsView/components/__snapshots__/transfer-to-assessment-button.test.tsx.snap
+++ b/src/tests/unit/tests/DetailsView/components/__snapshots__/transfer-to-assessment-button.test.tsx.snap
@@ -13,8 +13,9 @@ exports[`TransferToAssessmentButton getTransferToAssessmentButton 1`] = `
 exports[`TransferToAssessmentButton render 1`] = `
 <DocumentFragment>
   <mock-insightscommandbutton
+    classname="___173moxi_0000000 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f139oj5f f7otkfg"
     data-automation-id="transfer-to-assessment-button"
-    iconprops="[object Object]"
+    insightscommandbuttoniconprops="[object Object]"
   >
     Move to assessment
   </mock-insightscommandbutton>
@@ -24,11 +25,14 @@ exports[`TransferToAssessmentButton render 1`] = `
 exports[`TransferToAssessmentButton render: InsightsCommandButton props 1`] = `
 {
   "children": "Move to assessment",
-  "componentRef": undefined,
+  "className": "___173moxi_0000000 f1t6ax4o fmntwad fgslppp f1dswenw f9hdeju f139oj5f f7otkfg",
   "data-automation-id": "transfer-to-assessment-button",
-  "iconProps": {
-    "iconName": "fabricMoveToFolder",
+  "insightsCommandButtonIconProps": {
+    "icon": <FluentUIV9Icon
+      iconName="FolderArrowRightRegular"
+    />,
   },
+  "isNarrowMode": undefined,
   "onClick": [Function],
 }
 `;
diff --git a/src/tests/unit/tests/DetailsView/components/command-bar-buttons-menu.test.tsx b/src/tests/unit/tests/DetailsView/components/command-bar-buttons-menu.test.tsx
index 10d1d1f8063..ed2f641f570 100644
--- a/src/tests/unit/tests/DetailsView/components/command-bar-buttons-menu.test.tsx
+++ b/src/tests/unit/tests/DetailsView/components/command-bar-buttons-menu.test.tsx
@@ -1,33 +1,34 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 import {
-    CommandBarButton,
-    IButton,
-    IOverflowSetItemProps,
-    RefObject,
-    TooltipHost,
-} from '@fluentui/react';
-import { render } from '@testing-library/react';
+    Menu,
+    MenuButton,
+    MenuItem,
+    MenuList,
+    MenuPopover,
+    MenuTrigger,
+    Tooltip,
+} from '@fluentui/react-components';
+import { fireEvent, render, screen } from '@testing-library/react';
 import {
     CommandBarButtonsMenu,
     CommandBarButtonsMenuProps,
 } from 'DetailsView/components/command-bar-buttons-menu';
-import { StartOverMenuItem } from 'DetailsView/components/start-over-component-factory';
 import * as React from 'react';
 import {
-    expectMockedComponentPropsToMatchSnapshots,
-    getMockComponentClassPropsForCall,
     mockReactComponents,
+    useOriginalReactElements,
 } from 'tests/unit/mock-helpers/mock-module-helpers';
 import { IMock, Mock, Times } from 'typemoq';
 
-jest.mock('@fluentui/react');
+jest.mock('@fluentui/react-components');
+jest.mock('common/icons/fluentui-v9-icons');
 
 describe('CommandBarButtonsMenu', () => {
-    mockReactComponents([TooltipHost, CommandBarButton]);
+    mockReactComponents([Tooltip, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuItem]);
 
     let renderExportReportComponentMock: IMock<() => JSX.Element>;
-    let getStartOverMenuItemMock: IMock<() => StartOverMenuItem>;
+    let getStartOverMenuItemMock: any;
     let commandBarButtonsMenuProps: CommandBarButtonsMenuProps;
 
     beforeEach(() => {
@@ -38,37 +39,41 @@ describe('CommandBarButtonsMenu', () => {
             saveAssessmentButton: <>Save assessment button</>,
             loadAssessmentButton: <>Load assessment button</>,
             transferToAssessmentButton: <>Transfer to assessment button</>,
-
             getStartOverMenuItem: getStartOverMenuItemMock.object,
-            buttonRef: {} as RefObject<IButton>,
-        } as CommandBarButtonsMenuProps;
+            buttonRef: {} as any,
+            hasSubMenu: false,
+        };
     });
 
     it('renders CommandBarButtonsMenu', () => {
         const wrapper = render(<CommandBarButtonsMenu {...commandBarButtonsMenuProps} />);
-        expectMockedComponentPropsToMatchSnapshots([CommandBarButton]);
         expect(wrapper.asFragment()).toMatchSnapshot();
     });
 
-    it('renders all child buttons,', () => {
+    it('renders all child buttons with hasSubMenu false,', () => {
+        useOriginalReactElements('@fluentui/react-components', [
+            'Menu',
+            'MenuButton',
+            'MenuTrigger',
+            'MenuPopover',
+            'MenuList',
+            'MenuItem',
+            'Tooltip',
+        ]);
         setupExportReportMenuItem();
         setupStartOverMenuItem();
 
-        render(<CommandBarButtonsMenu {...commandBarButtonsMenuProps} />);
-        const commandBarProps = getMockComponentClassPropsForCall(CommandBarButton);
-
-        const overflowItems: IOverflowSetItemProps[] = commandBarProps.menuProps?.items;
-
-        expect(commandBarProps.menuProps?.items).toBeDefined();
-        expect(commandBarProps.menuProps?.items).toHaveLength(5);
-
-        expect(overflowItems[0].onRender()).toMatchSnapshot('render export report menuitem');
-        expect(overflowItems[1].onRender()).toMatchSnapshot('render save assessment menuitem');
-        expect(overflowItems[2].onRender()).toMatchSnapshot('render load assessment menuitem');
-        expect(overflowItems[3].onRender()).toMatchSnapshot(
-            'render transfer to assessment menuitem',
-        );
-        expect(overflowItems[4].onRender()).toMatchSnapshot('render start over menuitem');
+        const test = render(<CommandBarButtonsMenu {...commandBarButtonsMenuProps} />);
+        const getMoreActionsButton = test.queryByRole('button');
+        fireEvent.click(getMoreActionsButton);
+        const hasExportButton = screen.getByText('Report export button');
+        const hasSaveButton = screen.getByText('Save assessment button');
+        const hasLoadButton = screen.getByText('Load assessment button');
+        const hasTransferButton = screen.getByText('Transfer to assessment button');
+        expect(hasExportButton).toMatchSnapshot('render export report menuitem');
+        expect(hasSaveButton).toMatchSnapshot('render save assessment menuitem');
+        expect(hasLoadButton).toMatchSnapshot('render load assessment menuitem');
+        expect(hasTransferButton).toMatchSnapshot('render transfer to assessment menuitem');
 
         renderExportReportComponentMock.verifyAll();
         getStartOverMenuItemMock.verifyAll();
@@ -78,16 +83,16 @@ describe('CommandBarButtonsMenu', () => {
         renderExportReportComponentMock
             .setup(r => r())
             .returns(() => <>Report export button</>)
-            .verifiable(Times.once());
+            .verifiable(Times.atLeastOnce());
     }
 
     function setupStartOverMenuItem(): void {
         const startOverMenuItem = {
-            onRender: () => <>Start over button</>,
+            children: <>Start over button</>,
         };
         getStartOverMenuItemMock
             .setup(s => s())
-            .returns(() => startOverMenuItem)
-            .verifiable(Times.once());
+            .returns(() => startOverMenuItem.children)
+            .verifiable(Times.atLeastOnce());
     }
 });
diff --git a/src/tests/unit/tests/DetailsView/components/details-view-command-bar.test.tsx b/src/tests/unit/tests/DetailsView/components/details-view-command-bar.test.tsx
index 280b613949e..8e59835ed23 100644
--- a/src/tests/unit/tests/DetailsView/components/details-view-command-bar.test.tsx
+++ b/src/tests/unit/tests/DetailsView/components/details-view-command-bar.test.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 import '@testing-library/jest-dom';
-import { ActionButton } from '@fluentui/react';
+import { Button } from '@fluentui/react-components';
 import { act, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Assessments } from 'assessments/assessments';
@@ -41,16 +41,19 @@ import {
 } from 'DetailsView/components/details-view-switcher-nav';
 import { ExportDialog } from 'DetailsView/components/export-dialog';
 import { InvalidLoadAssessmentDialog } from 'DetailsView/components/invalid-load-assessment-dialog';
+import { LoadAssessmentButton } from 'DetailsView/components/load-assessment-button';
 import { LoadAssessmentDataValidator } from 'DetailsView/components/load-assessment-data-validator';
 import { LoadAssessmentDialog } from 'DetailsView/components/load-assessment-dialog';
 import { LoadAssessmentHelper } from 'DetailsView/components/load-assessment-helper';
 import { QuickAssessToAssessmentDialog } from 'DetailsView/components/quick-assess-to-assessment-dialog';
 import { ReportExportButton } from 'DetailsView/components/report-export-button';
 import { ReportExportDialogFactoryProps } from 'DetailsView/components/report-export-dialog-factory';
+import { SaveAssessmentButton } from 'DetailsView/components/save-assessment-button';
 import {
     SaveAssessmentButtonFactoryProps,
     getSaveButtonForAssessment,
 } from 'DetailsView/components/save-assessment-button-factory';
+import { SaveAssessmentDialog } from 'DetailsView/components/save-assessment-dialog';
 import {
     StartOverFactoryProps,
     getStartOverComponentForAssessment,
@@ -74,6 +77,7 @@ import {
     useOriginalReactElements,
 } from 'tests/unit/mock-helpers/mock-module-helpers';
 import { IMock, It, Mock } from 'typemoq';
+import { AssessmentDataFormatter } from '../../../../../common/assessment-data-formatter';
 
 jest.mock('DetailsView/components/report-export-button');
 jest.mock('DetailsView/components/load-assessment-dialog');
@@ -81,19 +85,26 @@ jest.mock('DetailsView/components/start-over-dialog');
 jest.mock('DetailsView/components/export-dialog');
 jest.mock('DetailsView/components/command-bar-buttons-menu');
 jest.mock('DetailsView/components/invalid-load-assessment-dialog');
+jest.mock('DetailsView/components/save-assessment-dialog');
 jest.mock('common/components/new-tab-link-with-tooltip');
 jest.mock('DetailsView/components/quick-assess-to-assessment-dialog');
+jest.mock('DetailsView/components/load-assessment-button');
+jest.mock('DetailsView/components/save-assessment-button');
+
 describe('DetailsViewCommandBar', () => {
     mockReactComponents([
         ReportExportButton,
+        SaveAssessmentButton,
         LoadAssessmentDialog,
         StartOverDialog,
+        SaveAssessmentDialog,
         CommandBarButtonsMenu,
         InvalidLoadAssessmentDialog,
         NewTabLinkWithTooltip,
         ReportExportButton,
         ExportDialog,
         QuickAssessToAssessmentDialog,
+        LoadAssessmentButton,
     ]);
     const thePageTitle = 'command-bar-test-tab-title';
     const thePageUrl = 'command-bar-test-url';
@@ -125,6 +136,7 @@ describe('DetailsViewCommandBar', () => {
     let fileURLProviderMock: IMock<FileURLProvider>;
     let loadAssessmentHelper: LoadAssessmentHelper;
     let assessmentDataParser: AssessmentDataParser;
+    let assessmentDataFormatter: AssessmentDataFormatter;
     const urlParser: UrlParser = new UrlParser();
     let dataTransferViewControllerMock: IMock<DataTransferViewController>;
     const reportExportServiceProvider: ReportExportServiceProvider =
@@ -144,7 +156,9 @@ describe('DetailsViewCommandBar', () => {
                 _prevTargetPageData,
                 _newTargetPageId,
             ) => {
-                if (toggleLoad) toggleLoadAssessmentDialog();
+                if (toggleLoad) {
+                    toggleLoadAssessmentDialog();
+                }
                 if (toggleInvalidLoad) toggleInvalidLoadAssessmentDialog();
             },
         } as LoadAssessmentHelper;
@@ -160,6 +174,7 @@ describe('DetailsViewCommandBar', () => {
         getStartOverComponentMock = Mock.ofInstance(props => null);
         fileURLProviderMock = Mock.ofType(FileURLProvider);
         assessmentDataParser = new AssessmentDataParser();
+        assessmentDataFormatter = new AssessmentDataFormatter();
         loadAssessmentDataValidator = new LoadAssessmentDataValidator(
             Assessments,
             featureFlagStoreData,
@@ -261,6 +276,7 @@ describe('DetailsViewCommandBar', () => {
                 fileURLProvider: fileURLProviderMock.object,
                 loadAssessmentHelper: loadAssessmentHelper,
                 assessmentDataParser: assessmentDataParser,
+                assessmentDataFormatter: assessmentDataFormatter,
                 urlParser: urlParser,
                 dataTransferViewController: dataTransferViewControllerMock.object,
                 getProvider: () => assessmentsProviderStub,
@@ -278,6 +294,7 @@ describe('DetailsViewCommandBar', () => {
             },
             rightPanelConfiguration,
             dataTransferViewStoreData: { showQuickAssessToAssessmentConfirmDialog: false },
+            userConfigurationStoreData: { showSaveAssessmentDialog: false },
         } as DetailsViewCommandBarProps;
     }
 
@@ -298,9 +315,10 @@ describe('DetailsViewCommandBar', () => {
     });
 
     test('renders null when tab closed', () => {
-        tabStoreData.isClosed = true;
-
-        expect(renderTest()).toBeNull();
+        const props = getProps();
+        props.tabStoreData.isClosed = true;
+        const result = render(<DetailsViewCommandBar {...props} />);
+        expect(result.container.firstChild).toBeNull();
     });
 
     test('renders with buttons collapsed into a menu', () => {
@@ -313,6 +331,20 @@ describe('DetailsViewCommandBar', () => {
         expectMockedComponentPropsToMatchSnapshots([CommandBarButtonsMenu]);
     });
 
+    test('renders with buttons ', () => {
+        useOriginalReactElements('DetailsView/components/load-assessment-button', [
+            'LoadAssessmentButton',
+        ]);
+        tabStoreData.isClosed = true;
+        isCommandBarCollapsed = false;
+        const props = getProps();
+
+        const renderResult = render(<DetailsViewCommandBar {...props} />);
+
+        expect(renderResult.asFragment()).toMatchSnapshot();
+        expectMockedComponentPropsToMatchSnapshots([CommandBarButtonsMenu]);
+    });
+
     test('renders report export dialog', async () => {
         const originalDate = Date;
         const mockDate = new Date('2024-03-07T12:00:00Z');
@@ -323,7 +355,8 @@ describe('DetailsViewCommandBar', () => {
             'ReportExportButton',
         ]);
         const renderResult = render(<DetailsViewCommandBar {...props} />);
-        const exportButton = renderResult.getByRole('button', { name: 'Export result' });
+
+        const exportButton = renderResult.getByText('Export result');
         expect(getMockComponentClassPropsForCall(ExportDialog, 1).isOpen).toBe(false);
         expect(renderResult.asFragment()).toMatchSnapshot('export dialog hidden');
         await userEvent.click(exportButton);
@@ -332,11 +365,26 @@ describe('DetailsViewCommandBar', () => {
         global.Date = originalDate;
     });
 
+    test('renders save assessment dialog', async () => {
+        const props = getProps(['SaveAssessmentButton']);
+        props.userConfigurationStoreData.showSaveAssessmentDialog = true;
+        useOriginalReactElements('DetailsView/components/save-assessment-button', [
+            'SaveAssessmentButton',
+        ]);
+        const renderResult = render(<DetailsViewCommandBar {...props} />);
+        const saveButton = renderResult.getByText('Save assessment');
+        expect(getMockComponentClassPropsForCall(SaveAssessmentDialog, 1).isOpen).toBe(false);
+        expect(renderResult.asFragment()).toMatchSnapshot('save assessment dialog hidden');
+        await userEvent.click(saveButton);
+        expect(getMockComponentClassPropsForCall(SaveAssessmentDialog, 2).isOpen).toBe(true);
+        expect(renderResult.asFragment()).toMatchSnapshot('Save assessment dialog open');
+    });
+
     test('renders load assessment dialog', async () => {
         const props = getProps(['LoadAssessmentButton']);
         props.deps.loadAssessmentHelper = getLoadAssessmentHelperStub({ toggleLoad: true });
         const renderResult = render(<DetailsViewCommandBar {...props} />);
-        const loadAssessmentButton = renderResult.getByRole('button', { name: 'Load assessment' });
+        const loadAssessmentButton = renderResult.getByText('Load assessment');
         expect(getMockComponentClassPropsForCall(LoadAssessmentDialog, 1).isOpen).toBe(false);
         expect(renderResult.asFragment()).toMatchSnapshot('load assessment dialog hidden');
         await userEvent.click(loadAssessmentButton);
@@ -348,7 +396,7 @@ describe('DetailsViewCommandBar', () => {
         const props = getProps(['LoadAssessmentButton']);
         props.deps.loadAssessmentHelper = getLoadAssessmentHelperStub({ toggleInvalidLoad: true });
         const renderResult = render(<DetailsViewCommandBar {...props} />);
-        const loadAssessmentButton = renderResult.getByRole('button', { name: 'Load assessment' });
+        const loadAssessmentButton = renderResult.getByText('Load assessment');
         expect(getMockComponentClassPropsForCall(InvalidLoadAssessmentDialog, 1).isOpen).toBe(
             false,
         );
@@ -377,7 +425,7 @@ describe('DetailsViewCommandBar', () => {
         const props = getProps(['StartOverComponent']);
         const renderResult = render(<DetailsViewCommandBar {...props} />);
         expect(getMockComponentClassPropsForCall(StartOverDialog, 1).dialogState).toBe('none');
-        const startOverMenuButton = renderResult.getByRole('button', { name: 'start over menu' });
+        const startOverMenuButton = renderResult.getByText('Start over');
         await userEvent.click(startOverMenuButton);
         const startOverAssessmentButton = renderResult.getByRole('menuitem', {
             name: 'Start over Assessment',
@@ -429,9 +477,7 @@ describe('DetailsViewCommandBar', () => {
             useOriginalReactElements('DetailsView/components/export-dialog', ['ExportDialog']);
             const props = getProps(['ReportExportDialogFactory', 'CommandBar']);
             const renderResult = render(<DetailsViewCommandBar {...props} />);
-            const exportButton = renderResult.getByRole('button', {
-                name: 'Export result',
-            });
+            const exportButton = renderResult.getByText('Export result');
             expect(exportButton).not.toHaveFocus();
             getMockComponentCall(ExportDialog)[0].afterDismissed();
             expect(exportButton).toHaveFocus();
@@ -504,6 +550,16 @@ describe('DetailsViewCommandBar', () => {
             expect(renderResult.baseElement).toHaveFocus();
         });
 
+        test('render statover component', async () => {
+            isCommandBarCollapsed = true;
+            useOriginalReactElements('DetailsView/components/start-over-dialog', [
+                'StartOverDialog',
+            ]);
+            const props = getProps(['StartOverComponent', 'CommandBar']);
+            const renderResult = render(<DetailsViewCommandBar {...props} />);
+            expect(renderResult).toMatchSnapshot();
+        });
+
         test('focus start over button when focus ref is set', async () => {
             useOriginalReactElements('DetailsView/components/start-over-dialog', [
                 'StartOverDialog',
@@ -512,9 +568,7 @@ describe('DetailsViewCommandBar', () => {
 
             const renderResult = render(<DetailsViewCommandBar {...props} />);
             expect(renderResult.baseElement).toHaveFocus();
-            const startOverMenuButton = renderResult.getByRole('button', {
-                name: 'start over menu',
-            });
+            const startOverMenuButton = renderResult.getByText('Start over');
             act(() => {
                 getMockComponentCall(StartOverDialog)[0].dismissDialog();
             });
@@ -539,7 +593,7 @@ describe('DetailsViewCommandBar', () => {
         showReportExportButton = renderExportResults;
 
         if (renderStartOver) {
-            startOverComponent = <ActionButton>Start Over Component</ActionButton>;
+            startOverComponent = <Button>Start Over Component</Button>;
         }
 
         const props = getProps();
@@ -554,16 +608,6 @@ describe('DetailsViewCommandBar', () => {
         expect(renderResult.asFragment()).toMatchSnapshot();
     }
 
-    function renderTest(): JSX.Element {
-        const testSubject = getTestSubject();
-
-        return testSubject.render();
-    }
-
-    function getTestSubject(): DetailsViewCommandBar {
-        return new DetailsViewCommandBar(getProps());
-    }
-
     function setupReportExportDialogFactory(
         expectedProps?: Partial<ReportExportDialogFactoryProps>,
     ): void {
diff --git a/src/tests/unit/tests/DetailsView/components/details-view-overlay/settings-panel/settings/save-assessment-dialog/__snapshots__/save-assessment-dialog.test.tsx.snap b/src/tests/unit/tests/DetailsView/components/details-view-overlay/settings-panel/settings/save-assessment-dialog/__snapshots__/save-assessment-dialog-settings.test.tsx.snap
similarity index 100%
rename from src/tests/unit/tests/DetailsView/components/details-view-overlay/settings-panel/settings/save-assessment-dialog/__snapshots__/save-assessment-dialog.test.tsx.snap
rename to src/tests/unit/tests/DetailsView/components/details-view-overlay/settings-panel/settings/save-assessment-dialog/__snapshots__/save-assessment-dialog-settings.test.tsx.snap
diff --git a/src/tests/unit/tests/DetailsView/components/details-view-overlay/settings-panel/settings/save-assessment-dialog/save-assessment-dialog.test.tsx b/src/tests/unit/tests/DetailsView/components/details-view-overlay/settings-panel/settings/save-assessment-dialog/save-assessment-dialog-settings.test.tsx
similarity index 100%
rename from src/tests/unit/tests/DetailsView/components/details-view-overlay/settings-panel/settings/save-assessment-dialog/save-assessment-dialog.test.tsx
rename to src/tests/unit/tests/DetailsView/components/details-view-overlay/settings-panel/settings/save-assessment-dialog/save-assessment-dialog-settings.test.tsx
diff --git a/src/tests/unit/tests/DetailsView/components/failure-instance-panel-control.test.tsx b/src/tests/unit/tests/DetailsView/components/failure-instance-panel-control.test.tsx
index 757f06340d9..3e5f7fd7d37 100644
--- a/src/tests/unit/tests/DetailsView/components/failure-instance-panel-control.test.tsx
+++ b/src/tests/unit/tests/DetailsView/components/failure-instance-panel-control.test.tsx
@@ -1,11 +1,12 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { ActionButton, TextField } from '@fluentui/react';
-import { Link } from '@fluentui/react-components';
+import { TextField } from '@fluentui/react';
+import { Link, Button } from '@fluentui/react-components';
 import { act, fireEvent, render } from '@testing-library/react';
 import { Assessments } from 'assessments/assessments';
 import { FlaggedComponent } from 'common/components/flagged-component';
+import { FluentUIV9Icon } from 'common/icons/fluentui-v9-icons';
 import { CapturedInstanceActionType } from 'common/types/captured-instance-action-type';
 import { FeatureFlagStoreData } from 'common/types/store-data/feature-flag-store-data';
 import { VisualizationType } from 'common/types/visualization-type';
@@ -30,15 +31,18 @@ jest.mock('common/components/flagged-component');
 jest.mock('DetailsView/components/generic-panel');
 jest.mock('DetailsView/components/action-and-cancel-buttons-component');
 jest.mock('DetailsView/components/failure-instance-panel-details');
+jest.mock('common/icons/fluentui-v9-icons');
+
 describe('FailureInstancePanelControlTest', () => {
     mockReactComponents([
-        ActionButton,
+        Button,
         Link,
         GenericPanel,
         FlaggedComponent,
         TextField,
         ActionAndCancelButtonsComponent,
         FailureInstancePanelDetails,
+        FluentUIV9Icon,
     ]);
     let addPathForValidationMock: IMock<(path) => void>;
     let addInstanceMock: IMock<(instanceData, test, step) => void>;
@@ -55,7 +59,7 @@ describe('FailureInstancePanelControlTest', () => {
     test('render FailureInstancePanelControl: create without instance', () => {
         const props = createPropsWithType(CapturedInstanceActionType.CREATE);
         const renderResult = render(<FailureInstancePanelControl {...props} />);
-        expectMockedComponentPropsToMatchSnapshots([ActionButton, FlaggedComponent]);
+        expectMockedComponentPropsToMatchSnapshots([Button, FlaggedComponent]);
         expect(renderResult.asFragment()).toMatchSnapshot();
     });
 
@@ -72,7 +76,7 @@ describe('FailureInstancePanelControlTest', () => {
             failureInstance: { failureDescription: 'original text' },
         };
         const renderResult = render(<FailureInstancePanelControl {...props} />);
-        expectMockedComponentPropsToMatchSnapshots([ActionButton, FlaggedComponent]);
+        expectMockedComponentPropsToMatchSnapshots([Button, FlaggedComponent]);
         expect(renderResult.asFragment()).toMatchSnapshot();
         const flaggedProps = getMockComponentClassPropsForCall(FlaggedComponent);
         expect(flaggedProps.enableJSXElement.props.path).toBeUndefined();
@@ -81,7 +85,7 @@ describe('FailureInstancePanelControlTest', () => {
     test('render FailureInstancePanelControl: edit without instance', () => {
         const props = createPropsWithType(CapturedInstanceActionType.EDIT);
         const renderResult = render(<FailureInstancePanelControl {...props} />);
-        expectMockedComponentPropsToMatchSnapshots([ActionButton, FlaggedComponent]);
+        expectMockedComponentPropsToMatchSnapshots([Button, FlaggedComponent]);
         expect(renderResult.asFragment()).toMatchSnapshot();
     });
 
@@ -90,7 +94,7 @@ describe('FailureInstancePanelControlTest', () => {
         const description = 'description';
         const props = createPropsWithType(CapturedInstanceActionType.CREATE);
         const renderResult = render(<FailureInstancePanelControl {...props} />);
-        expectMockedComponentPropsToMatchSnapshots([ActionButton, FlaggedComponent]);
+        expectMockedComponentPropsToMatchSnapshots([Button, FlaggedComponent]);
         const genericPanelProp = getMockComponentClassPropsForCall(GenericPanel);
         const textField = renderResult.getByRole('textbox') as HTMLInputElement;
         fireEvent.change(textField, { target: { value: description } });
@@ -112,6 +116,7 @@ describe('FailureInstancePanelControlTest', () => {
             'ActionButton',
             'DefaultButton',
         ]);
+
         useOriginalReactElements('@fluentui/react-components', ['Link', 'Button']);
         useOriginalReactElements('DetailsView/components/generic-panel', ['GenericPanel']);
         useOriginalReactElements('common/components/flagged-component', ['FlaggedComponent']);
@@ -125,9 +130,9 @@ describe('FailureInstancePanelControlTest', () => {
         const props = createPropsWithType(CapturedInstanceActionType.CREATE);
 
         const renderResult = render(<FailureInstancePanelControl {...props} />);
-        expectMockedComponentPropsToMatchSnapshots([ActionButton, FlaggedComponent]);
+        expectMockedComponentPropsToMatchSnapshots([Button, FlaggedComponent]);
 
-        fireEvent.click(renderResult.getByRole('button'));
+        fireEvent.click(renderResult.getByText('Add a failure instance'));
         const textField = renderResult.getByRole('textbox') as HTMLInputElement;
         fireEvent.change(textField, { target: { value: description } });
 
@@ -140,8 +145,8 @@ describe('FailureInstancePanelControlTest', () => {
         props.featureFlagStoreData = { manualInstanceDetails: true };
         props.failureInstance.path = '';
         const renderResult = render(<FailureInstancePanelControl {...props} />);
-        expectMockedComponentPropsToMatchSnapshots([ActionButton, FlaggedComponent]);
-        fireEvent.click(renderResult.getByRole('button'));
+        expectMockedComponentPropsToMatchSnapshots([Button, FlaggedComponent]);
+        fireEvent.click(renderResult.getByText('Add a failure instance'));
         const cssSelector = renderResult.getByLabelText('CSS Selector') as HTMLInputElement;
         fireEvent.change(cssSelector, { target: { value: selector } });
         expect(cssSelector.value).toBe(selector);
@@ -163,8 +168,8 @@ describe('FailureInstancePanelControlTest', () => {
             .verifiable(Times.once());
 
         const renderResult = render(<FailureInstancePanelControl {...props} />);
-        expectMockedComponentPropsToMatchSnapshots([ActionButton, FlaggedComponent]);
-        fireEvent.click(renderResult.getByRole('button'));
+        expectMockedComponentPropsToMatchSnapshots([Button, FlaggedComponent]);
+        fireEvent.click(renderResult.getByText('Add a failure instance'));
         fireEvent.click(renderResult.getByText('Validate CSS selector'));
 
         addPathForValidationMock.verifyAll();
@@ -180,8 +185,8 @@ describe('FailureInstancePanelControlTest', () => {
         props.failureInstance = failureInstance;
         props.featureFlagStoreData = { manualInstanceDetails: true };
         const renderResult = render(<FailureInstancePanelControl {...props} />);
-        expectMockedComponentPropsToMatchSnapshots([ActionButton, FlaggedComponent]);
-        fireEvent.click(renderResult.getByRole('button'));
+        expectMockedComponentPropsToMatchSnapshots([Button, FlaggedComponent]);
+        fireEvent.click(renderResult.getByText('Add a failure instance'));
 
         expect(renderResult.container.querySelector('.failureInstancePanel')).not.toBeNull;
         const failureDescription = renderResult.getByLabelText('Comment') as HTMLInputElement;
@@ -209,7 +214,7 @@ describe('FailureInstancePanelControlTest', () => {
             .verifiable(Times.once());
 
         const renderResult = render(<FailureInstancePanelControl {...props} />);
-        expectMockedComponentPropsToMatchSnapshots([ActionButton, FlaggedComponent]);
+        expectMockedComponentPropsToMatchSnapshots([Button, FlaggedComponent]);
         fireEvent.click(renderResult.getByRole('button'));
         const textField = renderResult.getByRole('textbox') as HTMLInputElement;
         fireEvent.change(textField, { target: { value: description } });
@@ -234,8 +239,8 @@ describe('FailureInstancePanelControlTest', () => {
             .verifiable(Times.once());
 
         const renderResult = render(<FailureInstancePanelControl {...props} />);
-        expectMockedComponentPropsToMatchSnapshots([ActionButton, FlaggedComponent]);
-        fireEvent.click(renderResult.getByRole('button'));
+        expectMockedComponentPropsToMatchSnapshots([Button, FlaggedComponent]);
+        fireEvent.click(renderResult.getByText('Add a failure instance'));
         const textField = renderResult.getByRole('textbox') as HTMLInputElement;
         fireEvent.change(textField, { target: { value: description } });
         fireEvent.click(renderResult.getByText('Add failed instance'));
@@ -271,20 +276,18 @@ describe('FailureInstancePanelControlTest', () => {
         newProps.failureInstance = newFailureInstance;
         newProps.featureFlagStoreData = { manualInstanceDetails: true };
         prevProps.featureFlagStoreData = { manualInstanceDetails: true };
-        const { rerender, getByLabelText, getByText, getByRole } = render(
-            <FailureInstancePanelControl {...prevProps} />,
-        );
-        expectMockedComponentPropsToMatchSnapshots([ActionButton, FlaggedComponent]);
-        fireEvent.click(getByRole('button'));
-        const pathField = getByLabelText('CSS Selector') as HTMLInputElement;
+        const renderResult = render(<FailureInstancePanelControl {...prevProps} />);
+        expectMockedComponentPropsToMatchSnapshots([Button, FlaggedComponent]);
+        fireEvent.click(renderResult.getByText('Add a failure instance'));
+        const pathField = renderResult.getByLabelText('CSS Selector') as HTMLInputElement;
         expect(pathField.value).toEqual(prevProps.failureInstance.path);
-        const emptySnippetText = getByText(
+        const emptySnippetText = renderResult.getByText(
             'Code snippet will auto-populate based on the CSS selector input.',
         );
         expect(emptySnippetText).not.toBeNull();
-        rerender(<FailureInstancePanelControl {...newProps} />);
+        renderResult.rerender(<FailureInstancePanelControl {...newProps} />);
         expect(pathField.value).toEqual(newProps.failureInstance.path);
-        const filledSnippetText = getByText(newProps.failureInstance.snippet);
+        const filledSnippetText = renderResult.getByText(newProps.failureInstance.snippet);
         expect(filledSnippetText).not.toBeNull();
     });
 
diff --git a/src/tests/unit/tests/DetailsView/components/report-export-button.test.tsx b/src/tests/unit/tests/DetailsView/components/report-export-button.test.tsx
index 8b82b022af7..9e9e327aa7a 100644
--- a/src/tests/unit/tests/DetailsView/components/report-export-button.test.tsx
+++ b/src/tests/unit/tests/DetailsView/components/report-export-button.test.tsx
@@ -1,10 +1,8 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-
-import { IButton } from '@fluentui/react';
-
 import { render } from '@testing-library/react';
 import { InsightsCommandButton } from 'common/components/controls/insights-command-button';
+
 import {
     ReportExportButton,
     ReportExportButtonProps,
@@ -27,7 +25,6 @@ describe(ReportExportButton.displayName, () => {
         showDialogMock = jest.fn();
         props = {
             showReportExportDialog: showDialogMock,
-            buttonRef: {} as React.RefObject<IButton>,
         };
     });
 
diff --git a/src/tests/unit/tests/DetailsView/components/save-assessment-button.test.tsx b/src/tests/unit/tests/DetailsView/components/save-assessment-button.test.tsx
index aa4b5bff5ce..53c4ee74133 100644
--- a/src/tests/unit/tests/DetailsView/components/save-assessment-button.test.tsx
+++ b/src/tests/unit/tests/DetailsView/components/save-assessment-button.test.tsx
@@ -1,16 +1,9 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import {
-    ActionButton,
-    Checkbox,
-    Dialog,
-    DialogFooter,
-    PrimaryButton,
-    Stack,
-} from '@fluentui/react';
-import { fireEvent, render, RenderResult, act } from '@testing-library/react';
-
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { InsightsCommandButton } from 'common/components/controls/insights-command-button';
 import { UserConfigMessageCreator } from 'common/message-creators/user-config-message-creator';
 import { UserConfigurationStoreData } from 'common/types/store-data/user-configuration-store';
 import { AssessmentActionMessageCreator } from 'DetailsView/actions/assessment-action-message-creator';
@@ -22,19 +15,25 @@ import * as React from 'react';
 import {
     getMockComponentClassPropsForCall,
     mockReactComponents,
-    mockReactComponent,
     useOriginalReactElements,
 } from 'tests/unit/mock-helpers/mock-module-helpers';
-import { IMock, It, Mock, Times } from 'typemoq';
+import { IMock, It, Mock } from 'typemoq';
+
+jest.mock('@fluentui/react-components', () => ({
+    ...jest.requireActual('@fluentui/react-components'),
+    makeStyles: () => () => ({}),
+}));
+
+jest.mock('common/components/controls/insights-command-button');
 
-jest.mock('@fluentui/react');
 describe('SaveAssessmentButton', () => {
-    mockReactComponents([DialogFooter, Stack, Checkbox, Stack.Item, PrimaryButton, ActionButton]);
-    mockReactComponent(Dialog, 'Dialog');
+    mockReactComponents([InsightsCommandButton]);
     let propsStub: SaveAssessmentButtonProps;
     let assessmentActionMessageCreatorMock: IMock<AssessmentActionMessageCreator>;
     let userConfigMessageCreatorMock: IMock<UserConfigMessageCreator>;
     let userConfigurationStoreData: UserConfigurationStoreData;
+    const handleSaveAssessmentButtonClickMock =
+        Mock.ofType<(event: React.MouseEvent<any>) => void>();
 
     beforeEach(() => {
         assessmentActionMessageCreatorMock = Mock.ofType<AssessmentActionMessageCreator>();
@@ -50,100 +49,28 @@ describe('SaveAssessmentButton', () => {
             download: 'download',
             href: 'url',
             userConfigurationStoreData,
+            handleSaveAssessmentButtonClick: handleSaveAssessmentButtonClickMock.object,
         };
     });
 
-    describe('on dialog enabled', () => {
-        describe('render', () => {
-            beforeEach(() => {
-                mockReactComponent(Dialog, 'Dialog');
-                wrapper = render(<SaveAssessmentButton {...propsStub} />);
-                fireEvent.click(wrapper.container.querySelector('mock-customizedactionbutton'));
-            });
-            it('snapshot of dialog', () => {
-                expect(wrapper.asFragment()).toMatchSnapshot();
-            });
-
-            it('dialog is visible', () => {
-                expect(getMockComponentClassPropsForCall(Dialog, 2).hidden).toEqual(false);
-            });
-
-            it('dialog is hidden (dismissed) when onDismiss is called', () => {
-                act(() => {
-                    getMockComponentClassPropsForCall(Dialog, 2).onDismiss();
-                });
-                expect(getMockComponentClassPropsForCall(Dialog, 3).hidden).toEqual(true);
-            });
-        });
-        let wrapper: RenderResult;
-        describe('interaction', () => {
-            beforeEach(() => {
-                useOriginalReactElements('@fluentui/react', [
-                    'Dialog',
-                    'DialogFooter',
-                    'Stack',
-                    'Checkbox',
-                    'PrimaryButton',
-                    'ActionButton',
-                ]);
-
-                wrapper = render(<SaveAssessmentButton {...propsStub} />);
-                fireEvent.click(wrapper.getByRole('link'));
-            });
-
-            it('when "dont show again" box is clicked, set the showSaveAssessmentDialog user config state to `false`', () => {
-                // The "Don't show again" checkbox logic is inverted
-                const checkbox = wrapper.getByRole('checkbox');
-                // Check "Don't show again" = true
-
-                fireEvent.click(checkbox);
-                // showSaveAssessmentDialog = false ("Enable the dialog" = false)
-                userConfigMessageCreatorMock.verify(
-                    x => x.setSaveAssessmentDialogState(false),
-                    Times.atLeastOnce(),
-                );
-            });
-
-            it('should call saveAssessment on click', async () => {
-                assessmentActionMessageCreatorMock.verify(
-                    x => x.saveAssessment(It.isAny()),
-                    Times.atLeastOnce(),
-                );
-            });
-            it('dialog is hidden (dismissed) when "got it" button is clicked', async () => {
-                const gotItButtonProps = getMockComponentClassPropsForCall(PrimaryButton);
-                act(() => {
-                    gotItButtonProps.onClick();
-                });
-                // since upgrading to React 18, this test is nondeterministic between being run in
-                // isolation and being run with the entire test suite. If you are working on this test
-                // and running it all by itself locally, it will include an additional empty render after
-                // the link click in the beforeEach, making this test fail.
-                const getProps = getMockComponentClassPropsForCall(Dialog, 3);
-                expect(getProps.hidden).toEqual(true);
-            });
-        });
+    it('should render per snapshot', async () => {
+        const wrapper = render(<SaveAssessmentButton {...propsStub} />);
+        expect(wrapper.asFragment()).toMatchSnapshot();
     });
 
-    describe('on dialog disabled', () => {
-        mockReactComponents([Dialog, DialogFooter, Stack, Checkbox, Stack.Item, PrimaryButton]);
-        let wrapper: RenderResult;
-
-        beforeEach(() => {
-            propsStub.userConfigurationStoreData.showSaveAssessmentDialog = false;
-            wrapper = render(<SaveAssessmentButton {...propsStub} />);
-            fireEvent.click(wrapper.getByRole('link'));
-        });
-
-        it('saves assessment without dialog (dialog is hidden)', () => {
-            expect(getMockComponentClassPropsForCall(Dialog).hidden).toEqual(true);
-        });
+    it('render Save assement button with props to match with mock props', () => {
+        render(<SaveAssessmentButton {...propsStub} />);
+        const insightsButtonProps = getMockComponentClassPropsForCall(InsightsCommandButton).deps;
+        expect(insightsButtonProps).toEqual(propsStub.deps);
+    });
 
-        it('should call saveAssessment on click', async () => {
-            assessmentActionMessageCreatorMock.verify(
-                x => x.saveAssessment(It.isAny()),
-                Times.atLeastOnce(),
-            );
-        });
+    it('should call save assessment button click method on click', async () => {
+        useOriginalReactElements('common/components/controls/insights-command-button', [
+            'InsightsCommandButton',
+        ]);
+        handleSaveAssessmentButtonClickMock.setup(m => m(It.isAny())).verifiable();
+        const wrapper = render(<SaveAssessmentButton {...propsStub} />);
+        await userEvent.click(wrapper.getByRole('button'));
+        handleSaveAssessmentButtonClickMock.verifyAll();
     });
 });
diff --git a/src/tests/unit/tests/DetailsView/components/save-assessment-dialog.test.tsx b/src/tests/unit/tests/DetailsView/components/save-assessment-dialog.test.tsx
new file mode 100644
index 00000000000..7badd2949dc
--- /dev/null
+++ b/src/tests/unit/tests/DetailsView/components/save-assessment-dialog.test.tsx
@@ -0,0 +1,112 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { Checkbox, Dialog, DialogFooter, PrimaryButton, Stack } from '@fluentui/react';
+import { fireEvent, render, RenderResult } from '@testing-library/react';
+import { UserConfigMessageCreator } from 'common/message-creators/user-config-message-creator';
+import { UserConfigurationStoreData } from 'common/types/store-data/user-configuration-store';
+import { AssessmentActionMessageCreator } from 'DetailsView/actions/assessment-action-message-creator';
+import {
+    SaveAssessmentDialog,
+    SaveAssessmentDialogProps,
+} from 'DetailsView/components/save-assessment-dialog';
+import React from 'react';
+import { IMock, Mock, Times } from 'typemoq';
+import {
+    getMockComponentClassPropsForCall,
+    mockReactComponent,
+    mockReactComponents,
+    useOriginalReactElements,
+} from '../../../mock-helpers/mock-module-helpers';
+
+jest.mock('@fluentui/react');
+
+let propsStub: SaveAssessmentDialogProps;
+let assessmentActionMessageCreatorMock: IMock<AssessmentActionMessageCreator>;
+let userConfigMessageCreatorMock: IMock<UserConfigMessageCreator>;
+let userConfigurationStoreData: UserConfigurationStoreData;
+let onCloseMock: jest.Mock;
+
+beforeEach(() => {
+    mockReactComponents([DialogFooter, Stack, Checkbox, Stack.Item, PrimaryButton]);
+    mockReactComponent(Dialog, 'Dialog');
+    assessmentActionMessageCreatorMock = Mock.ofType<AssessmentActionMessageCreator>();
+    userConfigurationStoreData = {
+        showSaveAssessmentDialog: true,
+    } as UserConfigurationStoreData;
+    onCloseMock = jest.fn();
+    userConfigMessageCreatorMock = Mock.ofType(UserConfigMessageCreator);
+    propsStub = {
+        deps: {
+            getAssessmentActionMessageCreator: () => assessmentActionMessageCreatorMock.object,
+            userConfigMessageCreator: userConfigMessageCreatorMock.object,
+        },
+        userConfigurationStoreData,
+        isOpen: true,
+        onClose: onCloseMock,
+    };
+});
+
+describe('SaveAssessmentDialog', () => {
+    it('render snapshot of dialog', () => {
+        const wrapper = render(<SaveAssessmentDialog {...propsStub} />);
+        expect(wrapper.asFragment()).toMatchSnapshot();
+    });
+
+    it('dialog is visible', () => {
+        render(<SaveAssessmentDialog {...propsStub} />);
+        expect(getMockComponentClassPropsForCall(Dialog).hidden).toEqual(false);
+    });
+
+    it('dialog is hidden (dismissed) when onDismiss is called', () => {
+        propsStub.isOpen = false;
+        render(<SaveAssessmentDialog {...propsStub} />);
+        expect(getMockComponentClassPropsForCall(Dialog).hidden).toEqual(true);
+    });
+});
+
+describe('dialog interaction', () => {
+    let wrapper: RenderResult;
+
+    beforeEach(() => {
+        useOriginalReactElements('@fluentui/react', [
+            'Dialog',
+            'DialogFooter',
+            'Stack',
+            'Checkbox',
+        ]);
+        propsStub.isOpen = true;
+        propsStub.userConfigurationStoreData.showSaveAssessmentDialog = false;
+        wrapper = render(<SaveAssessmentDialog {...propsStub} />);
+    });
+
+    it('dialog is hidden (dismissed) when "got it" button is clicked', () => {
+        const gotItButtonProps = getMockComponentClassPropsForCall(PrimaryButton);
+        gotItButtonProps.onClick();
+        expect(onCloseMock).toHaveBeenCalled();
+    });
+
+    it('when "dont show again" box is clicked, set the showSaveAssessmentDialog user config state to `false`', () => {
+        const checkbox = wrapper.getByRole('checkbox');
+        fireEvent.click(checkbox);
+
+        userConfigMessageCreatorMock.verify(
+            x => x.setSaveAssessmentDialogState(true),
+            Times.once(),
+        );
+    });
+});
+
+describe('on dialog disabled', () => {
+    mockReactComponents([Dialog, DialogFooter, Stack, Checkbox, Stack.Item, PrimaryButton]);
+
+    beforeEach(() => {
+        propsStub.isOpen = false;
+        propsStub.userConfigurationStoreData.showSaveAssessmentDialog = false;
+        render(<SaveAssessmentDialog {...propsStub} />);
+    });
+
+    it('saves assessment without dialog (dialog is hidden)', () => {
+        expect(getMockComponentClassPropsForCall(Dialog).hidden).toEqual(true);
+    });
+});
diff --git a/src/tests/unit/tests/DetailsView/components/start-over-component-factory.test.tsx b/src/tests/unit/tests/DetailsView/components/start-over-component-factory.test.tsx
index 690215d3387..debd5020cab 100644
--- a/src/tests/unit/tests/DetailsView/components/start-over-component-factory.test.tsx
+++ b/src/tests/unit/tests/DetailsView/components/start-over-component-factory.test.tsx
@@ -86,6 +86,7 @@ describe('StartOverComponentFactory', () => {
                     showTest: true,
                 },
             },
+            hasSubMenu: true,
         } as StartOverFactoryProps;
     }
 
@@ -93,14 +94,14 @@ describe('StartOverComponentFactory', () => {
         it('getStartOverComponent', () => {
             const props = getProps(true);
             const rendered = AssessmentStartOverFactory.getStartOverComponent(props);
-            expect(rendered).toMatchSnapshot();
+            expect(rendered.props).toMatchSnapshot();
             expectMockedComponentPropsToMatchSnapshots([StartOverDropdown]);
         });
 
         it('getStartOverMenuItem', () => {
             const props = getProps(true);
             const menuItem = AssessmentStartOverFactory.getStartOverMenuItem(props);
-            const renderResult = render(menuItem.onRender());
+            const renderResult = render(menuItem.children);
 
             expect(renderResult.asFragment()).toMatchSnapshot();
             expectMockedComponentPropsToMatchSnapshots([StartOverDropdown]);
@@ -118,7 +119,7 @@ describe('StartOverComponentFactory', () => {
         it('getStartOverMenuItem', () => {
             const props = getProps(true);
             const menuItem = QuickAssessStartOverFactory.getStartOverMenuItem(props);
-            const renderResult = render(menuItem.onRender());
+            const renderResult = render(menuItem.children);
             expect(renderResult.asFragment()).toMatchSnapshot();
             expectMockedComponentPropsToMatchSnapshots([StartOverDropdown]);
         });
@@ -140,9 +141,7 @@ describe('StartOverComponentFactory', () => {
             '%s',
             (
                 testName: string,
-                getComponentOrMenuItem: (
-                    props: StartOverFactoryProps,
-                ) => JSX.Element | StartOverMenuItem,
+                getComponentOrMenuItem: (props: StartOverFactoryProps) => any | StartOverMenuItem,
                 clickComponentOrMenuItem: (
                     item: JSX.Element | StartOverMenuItem,
                     event: any,
@@ -179,6 +178,7 @@ describe('StartOverComponentFactory', () => {
                     props.deps.detailsViewActionMessageCreator = actionMessageCreatorMock.object;
 
                     const item = getComponentOrMenuItem(props);
+
                     clickComponentOrMenuItem(item, event);
 
                     actionMessageCreatorMock.verify(
@@ -196,7 +196,7 @@ describe('StartOverComponentFactory', () => {
         }
 
         function clickStartOverMenuItem(startOverMenuItem: IContextualMenuItem, event: any): void {
-            startOverMenuItem.onClick(event);
+            startOverMenuItem.children.props.children?.props.onClick(event);
         }
     });
 });
diff --git a/src/tests/unit/tests/DetailsView/components/start-over-dropdown.test.tsx b/src/tests/unit/tests/DetailsView/components/start-over-dropdown.test.tsx
index 773e262a338..2de16d36165 100644
--- a/src/tests/unit/tests/DetailsView/components/start-over-dropdown.test.tsx
+++ b/src/tests/unit/tests/DetailsView/components/start-over-dropdown.test.tsx
@@ -1,28 +1,54 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { ContextualMenu, IButton, IRefObject } from '@fluentui/react';
-import { act, render } from '@testing-library/react';
-
-import { InsightsCommandButton } from 'common/components/controls/insights-command-button';
+import {
+    Menu,
+    MenuButton,
+    MenuItem,
+    MenuList,
+    MenuPopover,
+    MenuTrigger,
+} from '@fluentui/react-components';
+import {
+    ArrowClockwiseRegular,
+    ChevronRightRegular,
+    ChevronDownRegular,
+} from '@fluentui/react-icons';
+import { fireEvent, render } from '@testing-library/react';
 import { StartOverContextMenuKeyOptions } from 'DetailsView/components/details-view-right-panel';
 import { StartOverDialogType } from 'DetailsView/components/start-over-dialog';
-import * as React from 'react';
+import { StartOverDropdown, StartOverProps } from 'DetailsView/components/start-over-dropdown';
+import React from 'react';
 import {
     expectMockedComponentPropsToMatchSnapshots,
     getMockComponentClassPropsForCall,
     mockReactComponents,
+    useOriginalReactElements,
 } from 'tests/unit/mock-helpers/mock-module-helpers';
 import { IMock, Mock, Times } from 'typemoq';
 
-import {
-    StartOverDropdown,
-    StartOverProps,
-} from '../../../../../DetailsView/components/start-over-dropdown';
 jest.mock('@fluentui/react');
+jest.mock('@fluentui/react-components');
+jest.mock('@fluentui/react-icons');
 jest.mock('common/components/controls/insights-command-button');
+jest.mock('DetailsView/components/start-over-dropdown-styles', () => {
+    return {
+        useStartOverDropdownStyles: jest.fn(),
+    };
+});
+jest.mock('common/icons/fluentui-v9-icons');
 
 describe('StartOverDropdownTest', () => {
-    mockReactComponents([ContextualMenu, InsightsCommandButton]);
+    mockReactComponents([
+        Menu,
+        MenuTrigger,
+        MenuItem,
+        MenuButton,
+        ArrowClockwiseRegular,
+        ChevronRightRegular,
+        ChevronDownRegular,
+        MenuPopover,
+        MenuList,
+    ]);
     let defaultProps: StartOverProps;
     let openDialogMock: IMock<(dialogType: StartOverDialogType) => void>;
 
@@ -35,7 +61,7 @@ describe('StartOverDropdownTest', () => {
             switcherStartOverPreferences: { showTest: true },
             dropdownDirection: 'down',
             openDialog: openDialogMock.object,
-            buttonRef: {} as IRefObject<IButton>,
+            buttonRef: {} as any,
         };
     });
 
@@ -43,21 +69,56 @@ describe('StartOverDropdownTest', () => {
         const renderResult = render(<StartOverDropdown {...defaultProps} />);
 
         expect(renderResult.asFragment()).toMatchSnapshot();
-        expectMockedComponentPropsToMatchSnapshots([ContextualMenu, InsightsCommandButton]);
+        expectMockedComponentPropsToMatchSnapshots([MenuButton]);
     });
 
-    it('render ContextualMenu', async () => {
-        const renderResult = render(<StartOverDropdown {...defaultProps} />);
+    it('render with dropdown on left', async () => {
+        const props: StartOverProps = {
+            ...defaultProps,
+            dropdownDirection: 'left',
+        };
 
-        await act(() =>
-            getMockComponentClassPropsForCall(InsightsCommandButton).onClick({
-                currentTarget: 'test event',
-            }),
-        );
+        const renderResult = render(<StartOverDropdown {...props} />);
         expect(renderResult.asFragment()).toMatchSnapshot();
+        expectMockedComponentPropsToMatchSnapshots([MenuButton]);
+    });
+});
 
-        const mockProps = getMockComponentClassPropsForCall(ContextualMenu);
-        expect(mockProps.target).toBe('test event');
+describe('StartOverDropdownTest user interaction', () => {
+    let defaultProps: StartOverProps;
+    let openDialogMock: IMock<(dialogType: StartOverDialogType) => void>;
+
+    beforeEach(() => {
+        openDialogMock = Mock.ofInstance(() => null);
+        defaultProps = {
+            singleTestSuffix: 'single test suffix stub',
+            allTestSuffix: 'all test suffix stub',
+            rightPanelOptions: { showTest: true },
+            switcherStartOverPreferences: { showTest: true },
+            dropdownDirection: 'down',
+            openDialog: openDialogMock.object,
+            buttonRef: {} as any,
+        };
+    });
+
+    it('should open the start assessment over dialog', async () => {
+        useOriginalReactElements('@fluentui/react-components', [
+            'Menu',
+            'MenuTrigger',
+            'MenuButton',
+            'MenuPopover',
+            'MenuList',
+            'MenuItem',
+        ]);
+        openDialogMock.setup(sds => sds('assessment')).verifiable(Times.once());
+
+        const renderResult = render(<StartOverDropdown {...defaultProps} />);
+        fireEvent.click(renderResult.getByRole('button'));
+        getMockComponentClassPropsForCall(MenuList)
+            .children.find(elem => elem.key === 'assessment')
+            .props.onClick();
+
+        openDialogMock.verifyAll();
     });
 
     const menuButtonOptions = [true, false];
@@ -82,78 +143,25 @@ describe('StartOverDropdownTest', () => {
                 defaultProps.rightPanelOptions = rightPanelOptions;
                 defaultProps.switcherStartOverPreferences = switcherPreferences;
 
-                render(<StartOverDropdown {...defaultProps} />);
-                await act(() =>
-                    getMockComponentClassPropsForCall(InsightsCommandButton).onClick({
-                        currentTarget: 'test target',
-                    }),
-                );
-
+                const renderResult = render(<StartOverDropdown {...defaultProps} />);
+                fireEvent.click(renderResult.getByRole('button'));
                 const isStartOverOptionRendered = getMockComponentClassPropsForCall(
-                    ContextualMenu,
-                ).items.some(item => item.key === optionKey);
+                    MenuList,
+                ).children.some(item => item.key === optionKey);
                 expect(isStartOverOptionRendered).toEqual(shouldFindOption);
             });
         });
     });
 
-    it('render with dropdown on left', async () => {
-        mockReactComponents([InsightsCommandButton]);
-        const props: StartOverProps = {
-            ...defaultProps,
-            dropdownDirection: 'left',
-        };
-
-        const renderResult = render(<StartOverDropdown {...props} />);
-        await act(() =>
-            getMockComponentClassPropsForCall(InsightsCommandButton).onClick({
-                currentTarget: 'test target',
-            }),
-        );
-        expect(renderResult.asFragment()).toMatchSnapshot();
-    });
-
     it('should open the start test over dialog', async () => {
         openDialogMock.setup(sds => sds('test')).verifiable(Times.once());
 
-        render(<StartOverDropdown {...defaultProps} />);
-        await act(() =>
-            getMockComponentClassPropsForCall(InsightsCommandButton).onClick({
-                currentTarget: 'test target',
-            }),
-        );
-        getMockComponentClassPropsForCall(ContextualMenu)
-            .items.find(elem => elem.key === 'test')
-            .onClick();
-
-        openDialogMock.verifyAll();
-    });
-
-    it('should open the start assessment over dialog', async () => {
-        openDialogMock.setup(sds => sds('assessment')).verifiable(Times.once());
-
-        render(<StartOverDropdown {...defaultProps} />);
-        await act(() =>
-            getMockComponentClassPropsForCall(InsightsCommandButton).onClick({
-                currentTarget: 'test target',
-            }),
-        );
-        getMockComponentClassPropsForCall(ContextualMenu)
-            .items.find(elem => elem.key === 'assessment')
-            .onClick();
+        const renderResult = render(<StartOverDropdown {...defaultProps} />);
+        fireEvent.click(renderResult.getByRole('button'));
+        getMockComponentClassPropsForCall(MenuList)
+            .children.find(elem => elem.key === 'test')
+            .props.onClick();
 
         openDialogMock.verifyAll();
     });
-
-    it('should dismiss the contextMenu', async () => {
-        const renderResult = render(<StartOverDropdown {...defaultProps} />);
-        await act(() =>
-            getMockComponentClassPropsForCall(InsightsCommandButton).onClick({
-                currentTarget: 'test target',
-            }),
-        );
-        await act(() => getMockComponentClassPropsForCall(ContextualMenu).onDismiss());
-        const mockContextualmenu = renderResult.container.querySelector('mock-contextualmenu');
-        expect(mockContextualmenu).toBeNull();
-    });
 });
diff --git a/src/tests/unit/tests/common/components/__snapshots__/collapsible-component.test.tsx.snap b/src/tests/unit/tests/common/components/__snapshots__/collapsible-component.test.tsx.snap
index b805c263a30..a47e76efb2d 100644
--- a/src/tests/unit/tests/common/components/__snapshots__/collapsible-component.test.tsx.snap
+++ b/src/tests/unit/tests/common/components/__snapshots__/collapsible-component.test.tsx.snap
@@ -5,15 +5,15 @@ exports[`CollapsibleComponentTest render expanded with content-class-name 1`] =
   <div
     class=""
   >
-    <mock-customizedactionbutton
+    <mock-button
+      appearance="transparent"
       aria-expanded="true"
       classname="collapsible"
-      iconprops="[object Object]"
     >
       <div>
         Some header
       </div>
-    </mock-customizedactionbutton>
+    </mock-button>
     <div
       class="content-class-name collapsibleContent"
     >
@@ -25,16 +25,19 @@ exports[`CollapsibleComponentTest render expanded with content-class-name 1`] =
 </DocumentFragment>
 `;
 
-exports[`CollapsibleComponentTest render expanded with content-class-name: CustomizedActionButton props 1`] = `
+exports[`CollapsibleComponentTest render expanded with content-class-name: Button props 1`] = `
 {
+  "appearance": "transparent",
   "aria-expanded": true,
-  "children": <div>
-    Some header
-  </div>,
+  "children": [
+    <FluentUIV9Icon
+      iconName="ChevronDown24Regular"
+    />,
+    <div>
+      Some header
+    </div>,
+  ],
   "className": "collapsible",
-  "iconProps": {
-    "iconName": "ChevronDown",
-  },
   "onClick": [Function],
 }
 `;
@@ -44,15 +47,15 @@ exports[`CollapsibleComponentTest render expanded without content-class-name 1`]
   <div
     class=""
   >
-    <mock-customizedactionbutton
+    <mock-button
+      appearance="transparent"
       aria-expanded="true"
       classname="collapsible"
-      iconprops="[object Object]"
     >
       <div>
         Some header
       </div>
-    </mock-customizedactionbutton>
+    </mock-button>
     <div
       class="collapsibleContent"
     >
@@ -64,16 +67,19 @@ exports[`CollapsibleComponentTest render expanded without content-class-name 1`]
 </DocumentFragment>
 `;
 
-exports[`CollapsibleComponentTest render expanded without content-class-name: CustomizedActionButton props 1`] = `
+exports[`CollapsibleComponentTest render expanded without content-class-name: Button props 1`] = `
 {
+  "appearance": "transparent",
   "aria-expanded": true,
-  "children": <div>
-    Some header
-  </div>,
+  "children": [
+    <FluentUIV9Icon
+      iconName="ChevronDown24Regular"
+    />,
+    <div>
+      Some header
+    </div>,
+  ],
   "className": "collapsible",
-  "iconProps": {
-    "iconName": "ChevronDown",
-  },
   "onClick": [Function],
 }
 `;
@@ -83,15 +89,15 @@ exports[`CollapsibleComponentTest render with container-class-name 1`] = `
   <div
     class="a-container"
   >
-    <mock-customizedactionbutton
+    <mock-button
+      appearance="transparent"
       aria-expanded="true"
       classname="collapsible"
-      iconprops="[object Object]"
     >
       <div>
         Some header
       </div>
-    </mock-customizedactionbutton>
+    </mock-button>
     <div
       class="collapsibleContent"
     >
@@ -103,16 +109,19 @@ exports[`CollapsibleComponentTest render with container-class-name 1`] = `
 </DocumentFragment>
 `;
 
-exports[`CollapsibleComponentTest render with container-class-name: CustomizedActionButton props 1`] = `
+exports[`CollapsibleComponentTest render with container-class-name: Button props 1`] = `
 {
+  "appearance": "transparent",
   "aria-expanded": true,
-  "children": <div>
-    Some header
-  </div>,
+  "children": [
+    <FluentUIV9Icon
+      iconName="ChevronDown24Regular"
+    />,
+    <div>
+      Some header
+    </div>,
+  ],
   "className": "collapsible",
-  "iconProps": {
-    "iconName": "ChevronDown",
-  },
   "onClick": [Function],
 }
 `;
@@ -122,15 +131,15 @@ exports[`CollapsibleComponentTest render without container-class-name 1`] = `
   <div
     class=""
   >
-    <mock-customizedactionbutton
+    <mock-button
+      appearance="transparent"
       aria-expanded="true"
       classname="collapsible"
-      iconprops="[object Object]"
     >
       <div>
         Some header
       </div>
-    </mock-customizedactionbutton>
+    </mock-button>
     <div
       class="collapsibleContent"
     >
@@ -142,44 +151,53 @@ exports[`CollapsibleComponentTest render without container-class-name 1`] = `
 </DocumentFragment>
 `;
 
-exports[`CollapsibleComponentTest render without container-class-name: CustomizedActionButton props 1`] = `
+exports[`CollapsibleComponentTest render without container-class-name: Button props 1`] = `
 {
+  "appearance": "transparent",
   "aria-expanded": true,
-  "children": <div>
-    Some header
-  </div>,
+  "children": [
+    <FluentUIV9Icon
+      iconName="ChevronDown24Regular"
+    />,
+    <div>
+      Some header
+    </div>,
+  ],
   "className": "collapsible",
-  "iconProps": {
-    "iconName": "ChevronDown",
-  },
   "onClick": [Function],
 }
 `;
 
-exports[`CollapsibleComponentTest toggle from expanded to collapsed: CustomizedActionButton props 1`] = `
+exports[`CollapsibleComponentTest toggle from expanded to collapsed: Button props 1`] = `
 {
+  "appearance": "transparent",
   "aria-expanded": true,
-  "children": <div>
-    Some header
-  </div>,
+  "children": [
+    <FluentUIV9Icon
+      iconName="ChevronDown24Regular"
+    />,
+    <div>
+      Some header
+    </div>,
+  ],
   "className": "collapsible",
-  "iconProps": {
-    "iconName": "ChevronDown",
-  },
   "onClick": [Function],
 }
 `;
 
-exports[`CollapsibleComponentTest toggle from expanded to collapsed: CustomizedActionButton props 2`] = `
+exports[`CollapsibleComponentTest toggle from expanded to collapsed: Button props 2`] = `
 {
+  "appearance": "transparent",
   "aria-expanded": true,
-  "children": <div>
-    Some header
-  </div>,
+  "children": [
+    <FluentUIV9Icon
+      iconName="ChevronDown24Regular"
+    />,
+    <div>
+      Some header
+    </div>,
+  ],
   "className": "collapsible",
-  "iconProps": {
-    "iconName": "ChevronDown",
-  },
   "onClick": [Function],
 }
 `;
@@ -189,15 +207,15 @@ exports[`CollapsibleComponentTest toggle from expanded to collapsed: collapsed 1
   <div
     class=""
   >
-    <mock-customizedactionbutton
-      aria-expanded="true"
+    <mock-button
+      appearance="transparent"
+      aria-expanded="false"
       classname="collapsible"
-      iconprops="[object Object]"
     >
       <div>
         Some header
       </div>
-    </mock-customizedactionbutton>
+    </mock-button>
   </div>
 </DocumentFragment>
 `;
@@ -207,15 +225,15 @@ exports[`CollapsibleComponentTest toggle from expanded to collapsed: expanded 1`
   <div
     class=""
   >
-    <mock-customizedactionbutton
+    <mock-button
+      appearance="transparent"
       aria-expanded="true"
       classname="collapsible"
-      iconprops="[object Object]"
     >
       <div>
         Some header
       </div>
-    </mock-customizedactionbutton>
+    </mock-button>
     <div
       class="collapsibleContent"
     >
diff --git a/src/tests/unit/tests/common/components/cards/__snapshots__/card-footer-instance-action-buttons.test.tsx.snap b/src/tests/unit/tests/common/components/cards/__snapshots__/card-footer-instance-action-buttons.test.tsx.snap
index 62fe97ce263..ed3b2d934a7 100644
--- a/src/tests/unit/tests/common/components/cards/__snapshots__/card-footer-instance-action-buttons.test.tsx.snap
+++ b/src/tests/unit/tests/common/components/cards/__snapshots__/card-footer-instance-action-buttons.test.tsx.snap
@@ -2,39 +2,48 @@
 
 exports[`CardFooterInstanceActionButtons renders per snapshot with test-kebabmenuarialabel aria label passed as prop: action button menu props 1`] = `
 {
-  "ariaLabel": "test-kebabmenuarialabel",
-  "componentRef": [Function],
-  "menuIconProps": {
-    "className": "kebabMenuIcon",
-    "iconName": "MoreActionsMenuIcon",
-  },
-  "menuProps": {
-    "directionalHint": 6,
-    "items": [
-      {
-        "key": "item1",
-        "onClick": [Function],
-        "text": "item 1",
-      },
-      {
-        "key": "item2",
-        "onClick": [Function],
-        "text": "item 2",
-      },
-    ],
-    "shouldFocusOnMount": true,
-  },
+  "appearance": "transparent",
+  "aria-disabled": undefined,
+  "aria-expanded": undefined,
+  "aria-haspopup": "menu",
+  "aria-label": "test-kebabmenuarialabel",
+  "className": "menuButton",
+  "data-tabster": "{"restorer":{"type":1}}",
+  "icon": <FluentUIV9Icon
+    iconName="MoreVerticalRegular"
+  />,
+  "id": "menur0",
+  "onClick": [Function],
+  "onContextMenu": [Function],
+  "onKeyDown": [Function],
+  "onKeyUp": [Function],
+  "onMouseEnter": [Function],
+  "onMouseLeave": [Function],
+  "onMouseMove": [Function],
+  "role": "button",
+  "shape": "square",
+  "tabIndex": 0,
 }
 `;
 
 exports[`CardFooterInstanceActionButtons renders per snapshot with test-kebabmenuarialabel aria label passed as prop: component snapshot 1`] = `
 <DocumentFragment>
   <div>
-    <mock-customizedactionbutton
-      arialabel="test-kebabmenuarialabel"
-      menuiconprops="[object Object]"
-      menuprops="[object Object]"
-    />
+    <button
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="test-kebabmenuarialabel"
+      class="fui-Button r1alrhcs fui-MenuButton menuButton ___14ayyxl_z6mxox0 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb fjxutwb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f18ktai2 fwbmr0d f44c6la"
+      data-tabster="{"restorer":{"type":1}}"
+      id="menur0"
+      role="button"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="fui-Button__icon rywnvv2 fui-MenuButton__icon"
+      />
+    </button>
     <mock-toast
       deps="[object Object]"
       timeoutlength="6000"
@@ -45,39 +54,47 @@ exports[`CardFooterInstanceActionButtons renders per snapshot with test-kebabmen
 
 exports[`CardFooterInstanceActionButtons renders per snapshot with undefined aria label passed as prop: action button menu props 1`] = `
 {
-  "ariaLabel": "More actions",
-  "componentRef": [Function],
-  "menuIconProps": {
-    "className": "kebabMenuIcon",
-    "iconName": "MoreActionsMenuIcon",
-  },
-  "menuProps": {
-    "directionalHint": 6,
-    "items": [
-      {
-        "key": "item1",
-        "onClick": [Function],
-        "text": "item 1",
-      },
-      {
-        "key": "item2",
-        "onClick": [Function],
-        "text": "item 2",
-      },
-    ],
-    "shouldFocusOnMount": true,
-  },
+  "appearance": "transparent",
+  "aria-disabled": undefined,
+  "aria-expanded": undefined,
+  "aria-haspopup": "menu",
+  "aria-label": undefined,
+  "className": "menuButton",
+  "data-tabster": "{"restorer":{"type":1}}",
+  "icon": <FluentUIV9Icon
+    iconName="MoreVerticalRegular"
+  />,
+  "id": "menur1",
+  "onClick": [Function],
+  "onContextMenu": [Function],
+  "onKeyDown": [Function],
+  "onKeyUp": [Function],
+  "onMouseEnter": [Function],
+  "onMouseLeave": [Function],
+  "onMouseMove": [Function],
+  "role": "button",
+  "shape": "square",
+  "tabIndex": 0,
 }
 `;
 
 exports[`CardFooterInstanceActionButtons renders per snapshot with undefined aria label passed as prop: component snapshot 1`] = `
 <DocumentFragment>
   <div>
-    <mock-customizedactionbutton
-      arialabel="More actions"
-      menuiconprops="[object Object]"
-      menuprops="[object Object]"
-    />
+    <button
+      aria-expanded="false"
+      aria-haspopup="menu"
+      class="fui-Button r1alrhcs fui-MenuButton menuButton ___14ayyxl_z6mxox0 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb fjxutwb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f1fabniw fj0ryk1 f18ktai2 fwbmr0d f44c6la"
+      data-tabster="{"restorer":{"type":1}}"
+      id="menur1"
+      role="button"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="fui-Button__icon rywnvv2 fui-MenuButton__icon"
+      />
+    </button>
     <mock-toast
       deps="[object Object]"
       timeoutlength="6000"
@@ -89,18 +106,24 @@ exports[`CardFooterInstanceActionButtons renders per snapshot with undefined ari
 exports[`CardFooterInstanceActionButtons renders without copyFailureDetails supported: component snapshot 1`] = `
 <DocumentFragment>
   <div>
-    <span>
-      <mock-customizedactionbutton
-        classname="item1"
-        text="item 1"
-      />
-    </span>
-    <span>
-      <mock-customizedactionbutton
-        classname="item2"
-        text="item 2"
-      />
-    </span>
+    <mock-button
+      appearance="transparent"
+      as="button"
+      classname="item1"
+      icon="[object Object]"
+      size="medium"
+    >
+      item 1
+    </mock-button>
+    <mock-button
+      appearance="transparent"
+      as="button"
+      classname="item2"
+      icon="[object Object]"
+      size="medium"
+    >
+      item 2
+    </mock-button>
   </div>
 </DocumentFragment>
 `;
@@ -108,18 +131,24 @@ exports[`CardFooterInstanceActionButtons renders without copyFailureDetails supp
 exports[`CardFooterInstanceActionButtons with isCardFooterCollapsed=false renders per snapshot: component snapshot 1`] = `
 <DocumentFragment>
   <div>
-    <span>
-      <mock-customizedactionbutton
-        classname="item1"
-        text="item 1"
-      />
-    </span>
-    <span>
-      <mock-customizedactionbutton
-        classname="item2"
-        text="item 2"
-      />
-    </span>
+    <mock-button
+      appearance="transparent"
+      as="button"
+      classname="item1"
+      icon="[object Object]"
+      size="medium"
+    >
+      item 1
+    </mock-button>
+    <mock-button
+      appearance="transparent"
+      as="button"
+      classname="item2"
+      icon="[object Object]"
+      size="medium"
+    >
+      item 2
+    </mock-button>
     <mock-toast
       deps="[object Object]"
       timeoutlength="6000"
@@ -128,41 +157,66 @@ exports[`CardFooterInstanceActionButtons with isCardFooterCollapsed=false render
 </DocumentFragment>
 `;
 
-exports[`CardFooterInstanceActionButtons with isCardFooterCollapsed=true renders per snapshot: action button menu props 1`] = `
-{
-  "ariaLabel": "More actions",
-  "componentRef": [Function],
-  "menuIconProps": {
-    "className": "kebabMenuIcon",
-    "iconName": "MoreActionsMenuIcon",
-  },
-  "menuProps": {
-    "directionalHint": 6,
-    "items": [
-      {
-        "key": "item1",
-        "onClick": [Function],
-        "text": "item 1",
-      },
-      {
-        "key": "item2",
-        "onClick": [Function],
-        "text": "item 2",
-      },
-    ],
-    "shouldFocusOnMount": true,
-  },
-}
-`;
-
 exports[`CardFooterInstanceActionButtons with isCardFooterCollapsed=true renders per snapshot: component snapshot 1`] = `
 <DocumentFragment>
   <div>
-    <mock-customizedactionbutton
-      arialabel="More actions"
-      menuiconprops="[object Object]"
-      menuprops="[object Object]"
+    <mock-menu>
+      <mock-menutrigger />
+      <mock-menupopover
+        style="border-radius: var(--borderRadiusNone);"
+      >
+        <mock-menulist>
+          <mock-menuitem
+            classname="kebabMenuIcon"
+            icon="[object Object]"
+            text="item 1"
+          >
+            item 1
+          </mock-menuitem>
+          <mock-menuitem
+            classname="kebabMenuIcon"
+            icon="[object Object]"
+            text="item 2"
+          >
+            item 2
+          </mock-menuitem>
+        </mock-menulist>
+      </mock-menupopover>
+    </mock-menu>
+    <mock-toast
+      deps="[object Object]"
+      timeoutlength="6000"
     />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardFooterInstanceActionButtons with isCardFooterCollapsed=true renders per snapshot: kebab button menu 1`] = `
+<DocumentFragment>
+  <div>
+    <mock-menu>
+      <mock-menutrigger />
+      <mock-menupopover
+        style="border-radius: var(--borderRadiusNone);"
+      >
+        <mock-menulist>
+          <mock-menuitem
+            classname="kebabMenuIcon"
+            icon="[object Object]"
+            text="item 1"
+          >
+            item 1
+          </mock-menuitem>
+          <mock-menuitem
+            classname="kebabMenuIcon"
+            icon="[object Object]"
+            text="item 2"
+          >
+            item 2
+          </mock-menuitem>
+        </mock-menulist>
+      </mock-menupopover>
+    </mock-menu>
     <mock-toast
       deps="[object Object]"
       timeoutlength="6000"
diff --git a/src/tests/unit/tests/common/components/cards/__snapshots__/card-footer-menu-items-builder.test.ts.snap b/src/tests/unit/tests/common/components/cards/__snapshots__/card-footer-menu-items-builder.test.ts.snap
index 6ac8f907f20..d0657d38964 100644
--- a/src/tests/unit/tests/common/components/cards/__snapshots__/card-footer-menu-items-builder.test.ts.snap
+++ b/src/tests/unit/tests/common/components/cards/__snapshots__/card-footer-menu-items-builder.test.ts.snap
@@ -5,9 +5,7 @@ exports[`CardFooterMenuItemsBuilder Returns expected menu items: supportsIssueFi
 exports[`CardFooterMenuItemsBuilder Returns expected menu items: supportsIssueFiling=false supportsCopyFailureDetails=true 1`] = `
 [
   {
-    "iconProps": {
-      "iconName": "copy",
-    },
+    "iconName": "DocumentCopyRegular",
     "key": "copyfailuredetails",
     "onClick": [Function],
     "text": "Copy failure details",
@@ -19,9 +17,7 @@ exports[`CardFooterMenuItemsBuilder Returns expected menu items: supportsIssueFi
 [
   {
     "componentRef": [Function],
-    "iconProps": {
-      "iconName": "ladybugSolid",
-    },
+    "iconName": "BugFilled",
     "key": "fileissue",
     "onClick": [Function],
     "text": "File issue",
@@ -33,17 +29,13 @@ exports[`CardFooterMenuItemsBuilder Returns expected menu items: supportsIssueFi
 [
   {
     "componentRef": [Function],
-    "iconProps": {
-      "iconName": "ladybugSolid",
-    },
+    "iconName": "BugFilled",
     "key": "fileissue",
     "onClick": [Function],
     "text": "File issue",
   },
   {
-    "iconProps": {
-      "iconName": "copy",
-    },
+    "iconName": "DocumentCopyRegular",
     "key": "copyfailuredetails",
     "onClick": [Function],
     "text": "Copy failure details",
diff --git a/src/tests/unit/tests/common/components/cards/__snapshots__/collapsible-component-cards.test.tsx.snap b/src/tests/unit/tests/common/components/cards/__snapshots__/collapsible-component-cards.test.tsx.snap
index f4af89f1170..cfd69f8a6a2 100644
--- a/src/tests/unit/tests/common/components/cards/__snapshots__/collapsible-component-cards.test.tsx.snap
+++ b/src/tests/unit/tests/common/components/cards/__snapshots__/collapsible-component-cards.test.tsx.snap
@@ -6,9 +6,9 @@ exports[`CollapsibleComponentCardsTest render with buttonAriaLabel set to: some
     class="collapsibleContainer"
   >
     <mock-headingelementforlevel>
-      <mock-customizedactionbutton
+      <mock-button
         aria-expanded="true"
-        arialabel="some button label"
+        aria-label="some button label"
         classname="collapsibleControl"
         data-automation-id="collapsible-component-cards-button"
       >
@@ -21,7 +21,7 @@ exports[`CollapsibleComponentCardsTest render with buttonAriaLabel set to: some
             Some header
           </mock-headingelementforlevel>
         </span>
-      </mock-customizedactionbutton>
+      </mock-button>
     </mock-headingelementforlevel>
     <div
       class="collapsibleContainerContent"
@@ -40,7 +40,7 @@ exports[`CollapsibleComponentCardsTest render with buttonAriaLabel set to: undef
     class="collapsibleContainer"
   >
     <mock-headingelementforlevel>
-      <mock-customizedactionbutton
+      <mock-button
         aria-expanded="true"
         classname="collapsibleControl"
         data-automation-id="collapsible-component-cards-button"
@@ -54,7 +54,7 @@ exports[`CollapsibleComponentCardsTest render with buttonAriaLabel set to: undef
             Some header
           </mock-headingelementforlevel>
         </span>
-      </mock-customizedactionbutton>
+      </mock-button>
     </mock-headingelementforlevel>
     <div
       class="collapsibleContainerContent"
@@ -73,7 +73,7 @@ exports[`CollapsibleComponentCardsTest render with containerClassName set to: a-
     class="a-container collapsibleContainer"
   >
     <mock-headingelementforlevel>
-      <mock-customizedactionbutton
+      <mock-button
         aria-expanded="true"
         classname="collapsibleControl"
         data-automation-id="collapsible-component-cards-button"
@@ -87,7 +87,7 @@ exports[`CollapsibleComponentCardsTest render with containerClassName set to: a-
             Some header
           </mock-headingelementforlevel>
         </span>
-      </mock-customizedactionbutton>
+      </mock-button>
     </mock-headingelementforlevel>
     <div
       class="collapsibleContainerContent"
@@ -106,7 +106,7 @@ exports[`CollapsibleComponentCardsTest render with containerClassName set to: un
     class="collapsibleContainer"
   >
     <mock-headingelementforlevel>
-      <mock-customizedactionbutton
+      <mock-button
         aria-expanded="true"
         classname="collapsibleControl"
         data-automation-id="collapsible-component-cards-button"
@@ -120,7 +120,7 @@ exports[`CollapsibleComponentCardsTest render with containerClassName set to: un
             Some header
           </mock-headingelementforlevel>
         </span>
-      </mock-customizedactionbutton>
+      </mock-button>
     </mock-headingelementforlevel>
     <div
       class="collapsibleContainerContent"
@@ -139,7 +139,7 @@ exports[`CollapsibleComponentCardsTest render with contentClassName set to: cont
     class="collapsibleContainer"
   >
     <mock-headingelementforlevel>
-      <mock-customizedactionbutton
+      <mock-button
         aria-expanded="true"
         classname="collapsibleControl"
         data-automation-id="collapsible-component-cards-button"
@@ -153,7 +153,7 @@ exports[`CollapsibleComponentCardsTest render with contentClassName set to: cont
             Some header
           </mock-headingelementforlevel>
         </span>
-      </mock-customizedactionbutton>
+      </mock-button>
     </mock-headingelementforlevel>
     <div
       class="content-class-name-a collapsibleContainerContent"
@@ -172,7 +172,7 @@ exports[`CollapsibleComponentCardsTest render with contentClassName set to: unde
     class="collapsibleContainer"
   >
     <mock-headingelementforlevel>
-      <mock-customizedactionbutton
+      <mock-button
         aria-expanded="true"
         classname="collapsibleControl"
         data-automation-id="collapsible-component-cards-button"
@@ -186,7 +186,7 @@ exports[`CollapsibleComponentCardsTest render with contentClassName set to: unde
             Some header
           </mock-headingelementforlevel>
         </span>
-      </mock-customizedactionbutton>
+      </mock-button>
     </mock-headingelementforlevel>
     <div
       class="collapsibleContainerContent"
@@ -207,24 +207,18 @@ exports[`CollapsibleComponentCardsTest toggle from expanded to collapsed: collap
     <mock-headingelementforlevel>
       <button
         aria-expanded="true"
-        class="ms-Button ms-Button--action ms-Button--command collapsibleControl root-109"
+        class="fui-Button r1alrhcs collapsibleControl"
         data-automation-id="collapsible-component-cards-button"
-        data-is-focusable="true"
         type="button"
       >
         <span
-          class="ms-Button-flexContainer flexContainer-110"
-          data-automationid="splitbuttonprimary"
+          class="collapsibleTitle"
         >
-          <span
-            class="collapsibleTitle"
+          <mock-headingelementforlevel
+            headinglevel="5"
           >
-            <mock-headingelementforlevel
-              headinglevel="5"
-            >
-              Some header
-            </mock-headingelementforlevel>
-          </span>
+            Some header
+          </mock-headingelementforlevel>
         </span>
       </button>
     </mock-headingelementforlevel>
@@ -247,24 +241,18 @@ exports[`CollapsibleComponentCardsTest toggle from expanded to collapsed: expand
     <mock-headingelementforlevel>
       <button
         aria-expanded="true"
-        class="ms-Button ms-Button--action ms-Button--command collapsibleControl root-109"
+        class="fui-Button r1alrhcs collapsibleControl"
         data-automation-id="collapsible-component-cards-button"
-        data-is-focusable="true"
         type="button"
       >
         <span
-          class="ms-Button-flexContainer flexContainer-110"
-          data-automationid="splitbuttonprimary"
+          class="collapsibleTitle"
         >
-          <span
-            class="collapsibleTitle"
+          <mock-headingelementforlevel
+            headinglevel="5"
           >
-            <mock-headingelementforlevel
-              headinglevel="5"
-            >
-              Some header
-            </mock-headingelementforlevel>
-          </span>
+            Some header
+          </mock-headingelementforlevel>
         </span>
       </button>
     </mock-headingelementforlevel>
diff --git a/src/tests/unit/tests/common/components/cards/__snapshots__/expand-collapse-all-button.test.tsx.snap b/src/tests/unit/tests/common/components/cards/__snapshots__/expand-collapse-all-button.test.tsx.snap
index c445a71ed49..acf19311bae 100644
--- a/src/tests/unit/tests/common/components/cards/__snapshots__/expand-collapse-all-button.test.tsx.snap
+++ b/src/tests/unit/tests/common/components/cards/__snapshots__/expand-collapse-all-button.test.tsx.snap
@@ -2,25 +2,27 @@
 
 exports[`ExpandCollapseAllButton renders per snapshot with allCardsCollapsed false 1`] = `
 <DocumentFragment>
-  <mock-customizedactionbutton
+  <mock-button
+    appearance="transparent"
     aria-expanded="true"
-    classname="expandCollapseAllButton"
-    iconprops="[object Object]"
+    icon="[object Object]"
+    size="medium"
   >
     Collapse all
-  </mock-customizedactionbutton>
+  </mock-button>
 </DocumentFragment>
 `;
 
 exports[`ExpandCollapseAllButton renders per snapshot with allCardsCollapsed true 1`] = `
 <DocumentFragment>
-  <mock-customizedactionbutton
+  <mock-button
+    appearance="transparent"
     aria-expanded="false"
     aria-label="Expand all rules to show failed instances."
-    classname="expandCollapseAllButton"
-    iconprops="[object Object]"
+    icon="[object Object]"
+    size="medium"
   >
     Expand all
-  </mock-customizedactionbutton>
+  </mock-button>
 </DocumentFragment>
 `;
diff --git a/src/tests/unit/tests/common/components/cards/__snapshots__/instance-details-footer.test.tsx.snap b/src/tests/unit/tests/common/components/cards/__snapshots__/instance-details-footer.test.tsx.snap
index e418392b343..48b291adddd 100644
--- a/src/tests/unit/tests/common/components/cards/__snapshots__/instance-details-footer.test.tsx.snap
+++ b/src/tests/unit/tests/common/components/cards/__snapshots__/instance-details-footer.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`InstanceDetailsFooter renders as null when no card interactions are supported: CardFooterInstanceActionButtons props 1`] = `undefined`;
+exports[`InstanceDetailsFooter renders as null when no card interactions are supported: CardFooterInstanceActionButtonsProps props 1`] = `undefined`;
 
 exports[`InstanceDetailsFooter renders per snapshot when all card interactions are supported (ie, web) 1`] = `
 <DocumentFragment>
@@ -17,7 +17,7 @@ exports[`InstanceDetailsFooter renders per snapshot when all card interactions a
         Highlight visible
       </label>
     </div>
-    <mock-cardfooterinstanceactionbuttons
+    <mock-cardfooterinstanceactionbuttonsprops
       deps="[object Object]"
       issuedetailsdata="[object Object]"
       kebabmenuarialabel="More Actions for failure instance body img in rule some-rule"
@@ -27,7 +27,7 @@ exports[`InstanceDetailsFooter renders per snapshot when all card interactions a
 </DocumentFragment>
 `;
 
-exports[`InstanceDetailsFooter renders per snapshot when all card interactions are supported (ie, web): CardFooterInstanceActionButtons props 1`] = `
+exports[`InstanceDetailsFooter renders per snapshot when all card interactions are supported (ie, web): CardFooterInstanceActionButtonsProps props 1`] = `
 {
   "deps": {
     "cardInteractionSupport": {
@@ -59,7 +59,7 @@ exports[`InstanceDetailsFooter renders per snapshot with highlightState="hidden"
         Highlight hidden
       </label>
     </div>
-    <mock-cardfooterinstanceactionbuttons
+    <mock-cardfooterinstanceactionbuttonsprops
       deps="[object Object]"
       issuedetailsdata="[object Object]"
       kebabmenuarialabel="More Actions for failure instance body img in rule some-rule"
@@ -69,7 +69,7 @@ exports[`InstanceDetailsFooter renders per snapshot with highlightState="hidden"
 </DocumentFragment>
 `;
 
-exports[`InstanceDetailsFooter renders per snapshot with highlightState="hidden": CardFooterInstanceActionButtons props 1`] = `
+exports[`InstanceDetailsFooter renders per snapshot with highlightState="hidden": CardFooterInstanceActionButtonsProps props 1`] = `
 {
   "deps": {
     "cardInteractionSupport": {
@@ -101,7 +101,7 @@ exports[`InstanceDetailsFooter renders per snapshot with highlightState="unavail
         Highlight unavailable
       </label>
     </div>
-    <mock-cardfooterinstanceactionbuttons
+    <mock-cardfooterinstanceactionbuttonsprops
       deps="[object Object]"
       issuedetailsdata="[object Object]"
       kebabmenuarialabel="More Actions for failure instance body img in rule some-rule"
@@ -111,7 +111,7 @@ exports[`InstanceDetailsFooter renders per snapshot with highlightState="unavail
 </DocumentFragment>
 `;
 
-exports[`InstanceDetailsFooter renders per snapshot with highlightState="unavailable": CardFooterInstanceActionButtons props 1`] = `
+exports[`InstanceDetailsFooter renders per snapshot with highlightState="unavailable": CardFooterInstanceActionButtonsProps props 1`] = `
 {
   "deps": {
     "cardInteractionSupport": {
@@ -143,7 +143,7 @@ exports[`InstanceDetailsFooter renders per snapshot with highlightState="visible
         Highlight visible
       </label>
     </div>
-    <mock-cardfooterinstanceactionbuttons
+    <mock-cardfooterinstanceactionbuttonsprops
       deps="[object Object]"
       issuedetailsdata="[object Object]"
       kebabmenuarialabel="More Actions for failure instance body img in rule some-rule"
@@ -153,7 +153,7 @@ exports[`InstanceDetailsFooter renders per snapshot with highlightState="visible
 </DocumentFragment>
 `;
 
-exports[`InstanceDetailsFooter renders per snapshot with highlightState="visible": CardFooterInstanceActionButtons props 1`] = `
+exports[`InstanceDetailsFooter renders per snapshot with highlightState="visible": CardFooterInstanceActionButtonsProps props 1`] = `
 {
   "deps": {
     "cardInteractionSupport": {
diff --git a/src/tests/unit/tests/common/components/cards/card-footer-instance-action-buttons.test.tsx b/src/tests/unit/tests/common/components/cards/card-footer-instance-action-buttons.test.tsx
index 4af0fc6a184..a4b31d82562 100644
--- a/src/tests/unit/tests/common/components/cards/card-footer-instance-action-buttons.test.tsx
+++ b/src/tests/unit/tests/common/components/cards/card-footer-instance-action-buttons.test.tsx
@@ -1,6 +1,15 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { ActionButton, IButton } from '@fluentui/react';
+import {
+    Button,
+    Menu,
+    MenuButton,
+    MenuItem,
+    MenuList,
+    MenuPopover,
+    MenuTrigger,
+    Tooltip,
+} from '@fluentui/react-components';
 import { render, RenderResult } from '@testing-library/react';
 import {
     CardFooterInstanceActionButtons,
@@ -22,14 +31,25 @@ import { IMock, It, Mock, Times } from 'typemoq';
 import { Toast } from '../../../../../../common/components/toast';
 import {
     expectMockedComponentPropsToMatchSnapshots,
-    getMockComponentClassPropsForCall,
     mockReactComponents,
+    useOriginalReactElements,
 } from '../../../../mock-helpers/mock-module-helpers';
 
-jest.mock('@fluentui/react');
+jest.mock('@fluentui/react-components');
 jest.mock('../../../../../../common/components/toast');
-describe(CardFooterInstanceActionButtons, () => {
-    mockReactComponents([Toast, ActionButton]);
+
+jest.mock('common/icons/fluentui-v9-icons');
+describe('CardFooterInstanceActionButtons', () => {
+    mockReactComponents([
+        Toast,
+        Button,
+        MenuItem,
+        Menu,
+        MenuTrigger,
+        MenuPopover,
+        MenuList,
+        Tooltip,
+    ]);
 
     let defaultProps: CardFooterInstanceActionButtonsProps;
     let defaultDeps: CardFooterInstanceActionButtonsDeps;
@@ -52,7 +72,6 @@ describe(CardFooterInstanceActionButtons, () => {
     beforeEach(() => {
         menuItemsBuilderMock = Mock.ofType<CardFooterMenuItemsBuilder>();
         cardsViewControllerMock = Mock.ofType<CardsViewController>();
-
         defaultDeps = {
             cardInteractionSupport: allCardInteractionsSupported,
             cardFooterMenuItemsBuilder: menuItemsBuilderMock.object,
@@ -70,7 +89,6 @@ describe(CardFooterInstanceActionButtons, () => {
         setupGetMenuItems([], defaultProps);
 
         const renderResult = render(<CardFooterInstanceActionButtons {...defaultProps} />);
-
         expect(renderResult.container.firstChild).toBeNull();
     });
 
@@ -106,12 +124,18 @@ describe(CardFooterInstanceActionButtons, () => {
         });
 
         function verifySnapshots(renderedElement: RenderResult): void {
+            useOriginalReactElements('@fluentui/react-components', [
+                'Tooltip',
+                'Menu',
+                'MenuTrigger',
+                'MenuButton',
+                'MenuPopover',
+                'MenuList',
+                'MenuItem',
+            ]);
             expect(renderedElement.asFragment()).toMatchSnapshot('component snapshot');
             if (isCardFooterCollapsed) {
-                expectMockedComponentPropsToMatchSnapshots(
-                    [ActionButton],
-                    'action button menu props',
-                );
+                expect(renderedElement.asFragment()).toMatchSnapshot('kebab button menu');
             }
         }
     });
@@ -130,13 +154,13 @@ describe(CardFooterInstanceActionButtons, () => {
             const renderResult = render(<CardFooterInstanceActionButtons {...newProps} />);
 
             expect(renderResult.asFragment()).toMatchSnapshot('component snapshot');
-            expectMockedComponentPropsToMatchSnapshots([ActionButton], 'action button menu props');
+            expectMockedComponentPropsToMatchSnapshots([MenuButton], 'action button menu props');
         },
     );
 
-    it('onIssueFilingSettingsDialogDismissed focuses kebab button', async () => {
+    it('onIssueFilingSettingsDialogDismissed focus kebab button', async () => {
+        useOriginalReactElements('@fluentui/react-components', ['Button']);
         defaultProps.narrowModeStatus = { isCardFooterCollapsed: true } as NarrowModeStatus;
-        const kebabButtonMock = Mock.ofType<IButton>();
         let menuItemsProps: CardFooterMenuItemsProps;
 
         menuItemsBuilderMock
@@ -149,22 +173,17 @@ describe(CardFooterInstanceActionButtons, () => {
                 menuItemsProps = props;
                 return menuItems;
             });
-
-        render(<CardFooterInstanceActionButtons {...defaultProps} />);
-
-        // call ref callback to set rendered component's ref to our button mock
-        const kebabButtonRefCallback = getMockComponentClassPropsForCall(ActionButton)
-            .componentRef as (ref: IButton) => void;
-        kebabButtonRefCallback(kebabButtonMock.object);
-
+        const result = render(<CardFooterInstanceActionButtons {...defaultProps} />);
         menuItemsProps.onIssueFilingSettingsDialogDismissed();
+        jest.spyOn(menuItemsProps, 'onIssueFilingSettingsDialogDismissed');
+        const getButton = result.getByRole('button');
 
-        kebabButtonMock.verify(k => k.focus(), Times.once());
+        expect(document.activeElement).toBe(getButton);
     });
 
     it('File issue button is focused when issue filing settings dialog is dismissed', async () => {
         defaultProps.narrowModeStatus = { isCardFooterCollapsed: false } as NarrowModeStatus;
-        const fileIssueButtonMock = Mock.ofType<IButton>();
+        const fileIssueButtonMock = Mock.ofType<HTMLButtonElement>();
 
         let menuItemsProps: CardFooterMenuItemsProps;
         menuItemsBuilderMock
@@ -186,7 +205,7 @@ describe(CardFooterInstanceActionButtons, () => {
         );
 
         // call ref callback to set rendered component's ref to our button mock
-        const buttonRefCallback = menuItemsProps.fileIssueButtonRef as (button: IButton) => void;
+        const buttonRefCallback = menuItemsProps.fileIssueButtonRef as any;
         buttonRefCallback(fileIssueButtonMock.object);
 
         menuItemsProps.onIssueFilingSettingsDialogDismissed();
diff --git a/src/tests/unit/tests/common/components/cards/card-footer-menu-items-builder.test.ts b/src/tests/unit/tests/common/components/cards/card-footer-menu-items-builder.test.ts
index a0e3bc8b6c7..938f4690383 100644
--- a/src/tests/unit/tests/common/components/cards/card-footer-menu-items-builder.test.ts
+++ b/src/tests/unit/tests/common/components/cards/card-footer-menu-items-builder.test.ts
@@ -30,7 +30,7 @@ import { IMock, It, Mock, MockBehavior, Times } from 'typemoq';
 describe(CardFooterMenuItemsBuilder, () => {
     let props: CardFooterMenuItemsProps;
     let deps: CardFooterMenuItemsDeps;
-    const fileIssueButtonRef = () => null;
+    const fileIssueButtonRef = {} as any;
     const issueDetailsData = { snippet: 'test snipper' } as CreateIssueDetailsTextData;
     const userConfigurationStoreData = {
         bugService: 'test-bug-service',
diff --git a/src/tests/unit/tests/common/components/cards/collapsible-component-cards.test.tsx b/src/tests/unit/tests/common/components/cards/collapsible-component-cards.test.tsx
index 32d2c88fade..67b9660c73a 100644
--- a/src/tests/unit/tests/common/components/cards/collapsible-component-cards.test.tsx
+++ b/src/tests/unit/tests/common/components/cards/collapsible-component-cards.test.tsx
@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { ActionButton } from '@fluentui/react';
+import { Button } from '@fluentui/react-components';
 import { render } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 
@@ -19,15 +19,16 @@ import {
     useOriginalReactElements,
 } from '../../../../mock-helpers/mock-module-helpers';
 
-jest.mock('@fluentui/react');
+jest.mock('@fluentui/react-components');
 jest.mock('common/components/heading-element-for-level');
+
 describe('CollapsibleComponentCardsTest', () => {
-    mockReactComponents([HeadingElementForLevel, ActionButton]);
+    mockReactComponents([HeadingElementForLevel, Button]);
     const eventStubFactory = new EventStubFactory();
 
     let setFocusVisibilityMock: IMock<SetFocusVisibility>;
-    let onExpandToggleMock: IMock<(event: React.MouseEvent<HTMLDivElement>) => void>;
-    let clickEventMock: IMock<React.MouseEvent<HTMLDivElement>>;
+    let onExpandToggleMock: IMock<(event: React.MouseEvent<HTMLButtonElement>) => void>;
+    let clickEventMock: IMock<React.MouseEvent<HTMLButtonElement>>;
 
     const partialProps: Partial<CollapsibleComponentCardsProps> = {
         header: <HeadingElementForLevel headingLevel={5}>Some header</HeadingElementForLevel>,
@@ -42,8 +43,8 @@ describe('CollapsibleComponentCardsTest', () => {
     };
 
     beforeEach(() => {
-        onExpandToggleMock = Mock.ofType<(event: React.MouseEvent<HTMLDivElement>) => void>();
-        clickEventMock = Mock.ofType<React.MouseEvent<HTMLDivElement>>();
+        onExpandToggleMock = Mock.ofType<(event: React.MouseEvent<HTMLButtonElement>) => void>();
+        clickEventMock = Mock.ofType<React.MouseEvent<HTMLButtonElement>>();
         setFocusVisibilityMock = Mock.ofType<SetFocusVisibility>();
         partialProps.deps = {
             setFocusVisibility: setFocusVisibilityMock.object,
@@ -80,7 +81,7 @@ describe('CollapsibleComponentCardsTest', () => {
         } as CollapsibleComponentCardsProps;
 
         const control = CardsCollapsibleControl(props);
-        useOriginalReactElements('@fluentui/react', ['ActionButton']);
+        useOriginalReactElements('@fluentui/react-components', ['Button']);
         const renderResult = render(control);
 
         expect(renderResult.asFragment()).toMatchSnapshot('expanded');
@@ -105,7 +106,7 @@ describe('CollapsibleComponentCardsTest', () => {
             eventStubFactory.createKeypressEvent();
 
             const control = CardsCollapsibleControl(props);
-            useOriginalReactElements('@fluentui/react', ['ActionButton']);
+            useOriginalReactElements('@fluentui/react-components', ['Button']);
             const renderResult = render(control);
 
             const button = renderResult.getByRole('button');
@@ -118,7 +119,7 @@ describe('CollapsibleComponentCardsTest', () => {
             eventStubFactory.createMouseClickEvent();
 
             const control = CardsCollapsibleControl(props);
-            useOriginalReactElements('@fluentui/react', ['ActionButton']);
+            useOriginalReactElements('@fluentui/react-components', ['Button']);
             const renderResult = render(control);
 
             await userEvent.click(renderResult.getByRole('button'));
diff --git a/src/tests/unit/tests/common/components/cards/expand-collapse-all-button.test.tsx b/src/tests/unit/tests/common/components/cards/expand-collapse-all-button.test.tsx
index 2574599287d..cd349e72bb8 100644
--- a/src/tests/unit/tests/common/components/cards/expand-collapse-all-button.test.tsx
+++ b/src/tests/unit/tests/common/components/cards/expand-collapse-all-button.test.tsx
@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { ActionButton } from '@fluentui/react';
+import { Button } from '@fluentui/react-components';
 import { render } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 
@@ -13,9 +13,16 @@ import {
     useOriginalReactElements,
 } from '../../../../mock-helpers/mock-module-helpers';
 
-jest.mock('@fluentui/react');
+jest.mock('@fluentui/react-components');
+jest.mock('common/components/cards/expand-collapse-all-button-styles', () => {
+    return {
+        useExpandCollapseAllButtonStyles: jest.fn(),
+    };
+});
+jest.mock('common/icons/fluentui-v9-icons');
+
 describe('ExpandCollapseAllButton', () => {
-    mockReactComponents([ActionButton]);
+    mockReactComponents([Button]);
     let cardSelectionMessageCreatorMock: IMock<AutomatedChecksCardSelectionMessageCreator>;
 
     beforeEach(() => {
@@ -37,7 +44,7 @@ describe('ExpandCollapseAllButton', () => {
 
     it('sends an expandAllRules message when clicked with all cards collapsed', async () => {
         cardSelectionMessageCreatorMock.setup(mock => mock.expandAllRules(It.isAny())).verifiable();
-        useOriginalReactElements('@fluentui/react', ['ActionButton']);
+        useOriginalReactElements('@fluentui/react-components', ['Button']);
         const renderResult = render(
             <ExpandCollapseAllButton
                 cardSelectionMessageCreator={cardSelectionMessageCreatorMock.object}
@@ -54,7 +61,7 @@ describe('ExpandCollapseAllButton', () => {
         cardSelectionMessageCreatorMock
             .setup(mock => mock.collapseAllRules(It.isAny()))
             .verifiable();
-        useOriginalReactElements('@fluentui/react', ['ActionButton']);
+        useOriginalReactElements('@fluentui/react-components', ['Button']);
         const renderResult = render(
             <ExpandCollapseAllButton
                 cardSelectionMessageCreator={cardSelectionMessageCreatorMock.object}
diff --git a/src/tests/unit/tests/common/components/collapsible-component.test.tsx b/src/tests/unit/tests/common/components/collapsible-component.test.tsx
index 91c3da5e974..a9f56ffc6d3 100644
--- a/src/tests/unit/tests/common/components/collapsible-component.test.tsx
+++ b/src/tests/unit/tests/common/components/collapsible-component.test.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { ActionButton } from '@fluentui/react';
-import { render } from '@testing-library/react';
+import { Button } from '@fluentui/react-components';
+import { act, render } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import * as React from 'react';
 
@@ -11,12 +11,15 @@ import {
 } from '../../../../../common/components/collapsible-component';
 import {
     expectMockedComponentPropsToMatchSnapshots,
+    getMockComponentClassPropsForCall,
     mockReactComponents,
 } from '../../../mock-helpers/mock-module-helpers';
 
-jest.mock('@fluentui/react');
+jest.mock('@fluentui/react-components');
+
+jest.mock('common/icons/fluentui-v9-icons');
 describe('CollapsibleComponentTest', () => {
-    mockReactComponents([ActionButton]);
+    mockReactComponents([Button]);
     test('render expanded with content-class-name', () => {
         const props: CollapsibleComponentProps = {
             header: <div>Some header</div>,
@@ -25,7 +28,7 @@ describe('CollapsibleComponentTest', () => {
         };
         const renderResult = render(<CollapsibleComponent {...props} />);
         expect(renderResult.asFragment()).toMatchSnapshot();
-        expectMockedComponentPropsToMatchSnapshots([ActionButton]);
+        expectMockedComponentPropsToMatchSnapshots([Button]);
     });
 
     test('render expanded without content-class-name', () => {
@@ -35,7 +38,7 @@ describe('CollapsibleComponentTest', () => {
         };
         const renderResult = render(<CollapsibleComponent {...props} />);
         expect(renderResult.asFragment()).toMatchSnapshot();
-        expectMockedComponentPropsToMatchSnapshots([ActionButton]);
+        expectMockedComponentPropsToMatchSnapshots([Button]);
     });
 
     test('render with container-class-name', () => {
@@ -47,7 +50,7 @@ describe('CollapsibleComponentTest', () => {
 
         const renderResult = render(<CollapsibleComponent {...props} />);
         expect(renderResult.asFragment()).toMatchSnapshot();
-        expectMockedComponentPropsToMatchSnapshots([ActionButton]);
+        expectMockedComponentPropsToMatchSnapshots([Button]);
     });
 
     test('render without container-class-name', () => {
@@ -58,7 +61,7 @@ describe('CollapsibleComponentTest', () => {
 
         const renderResult = render(<CollapsibleComponent {...props} />);
         expect(renderResult.asFragment()).toMatchSnapshot();
-        expectMockedComponentPropsToMatchSnapshots([ActionButton]);
+        expectMockedComponentPropsToMatchSnapshots([Button]);
     });
 
     test('toggle from expanded to collapsed', async () => {
@@ -69,9 +72,12 @@ describe('CollapsibleComponentTest', () => {
 
         const renderResult = render(<CollapsibleComponent {...props} />);
         expect(renderResult.asFragment()).toMatchSnapshot('expanded');
-        expectMockedComponentPropsToMatchSnapshots([ActionButton]);
+        act(() => {
+            getMockComponentClassPropsForCall(Button).onClick();
+        });
+        expectMockedComponentPropsToMatchSnapshots([Button]);
         await userEvent.click(renderResult.container.querySelector('mock-customizedactionbutton'));
         expect(renderResult.asFragment()).toMatchSnapshot('collapsed');
-        expectMockedComponentPropsToMatchSnapshots([ActionButton]);
+        expectMockedComponentPropsToMatchSnapshots([Button]);
     });
 });
diff --git a/src/tests/unit/tests/common/components/controls/__snapshots__/insights-command-button.test.tsx.snap b/src/tests/unit/tests/common/components/controls/__snapshots__/insights-command-button.test.tsx.snap
index 3e7a881c42d..ca0211739cd 100644
--- a/src/tests/unit/tests/common/components/controls/__snapshots__/insights-command-button.test.tsx.snap
+++ b/src/tests/unit/tests/common/components/controls/__snapshots__/insights-command-button.test.tsx.snap
@@ -2,75 +2,116 @@
 
 exports[`InsightsCommandButton renders per snapshot with extra className combined with its own 1`] = `
 <DocumentFragment>
-  <mock-mockconstructor
-    classname="insightsCommandButton test-extra-class-name"
-    iconprops="[object Object]"
+  <mock-button
+    appearance="transparent"
+    classname=""
+    icon="[object Object]"
+    insightscommandbuttoniconprops="[object Object]"
+    shape="square"
   />
 </DocumentFragment>
 `;
 
-exports[`InsightsCommandButton renders per snapshot with extra className combined with its own: mockConstructor props 1`] = `
+exports[`InsightsCommandButton renders per snapshot with extra className combined with its own: Button props 1`] = `
 {
-  "className": "insightsCommandButton test-extra-class-name",
-  "iconProps": {
-    "className": "commandBarButtonIcon",
+  "appearance": "transparent",
+  "children": undefined,
+  "className": "",
+  "icon": {
+    "children": undefined,
   },
+  "insightsCommandButtonIconProps": {
+    "className": "startOverMenuItemIcon",
+  },
+  "shape": "square",
 }
 `;
 
 exports[`InsightsCommandButton renders per snapshot with extra icon className combined with its own 1`] = `
 <DocumentFragment>
-  <mock-mockconstructor
-    classname="insightsCommandButton"
-    iconprops="[object Object]"
-  />
+  <mock-button
+    appearance="transparent"
+    icon="[object Object]"
+    insightscommandbuttoniconprops="[object Object]"
+    shape="square"
+  >
+    Load assessment
+  </mock-button>
 </DocumentFragment>
 `;
 
-exports[`InsightsCommandButton renders per snapshot with extra icon className combined with its own: mockConstructor props 1`] = `
+exports[`InsightsCommandButton renders per snapshot with extra icon className combined with its own: Button props 1`] = `
 {
-  "className": "insightsCommandButton",
-  "iconProps": {
-    "className": "commandBarButtonIcon icon-class-name",
+  "appearance": "transparent",
+  "children": "Load assessment",
+  "className": undefined,
+  "icon": {
+    "children": <FolderOpenRegular
+      className="icon-class-name"
+    />,
   },
+  "insightsCommandButtonIconProps": {
+    "icon": <FolderOpenRegular
+      className="icon-class-name"
+    />,
+  },
+  "shape": "square",
 }
 `;
 
 exports[`InsightsCommandButton renders per snapshot with iconProps passed through 1`] = `
 <DocumentFragment>
-  <mock-mockconstructor
-    classname="insightsCommandButton"
-    iconprops="[object Object]"
-  />
+  <mock-button
+    appearance="transparent"
+    icon="[object Object]"
+    insightscommandbuttoniconprops="[object Object]"
+    shape="square"
+  >
+    Load assessment
+  </mock-button>
 </DocumentFragment>
 `;
 
-exports[`InsightsCommandButton renders per snapshot with iconProps passed through: mockConstructor props 1`] = `
+exports[`InsightsCommandButton renders per snapshot with iconProps passed through: Button props 1`] = `
 {
-  "className": "insightsCommandButton",
-  "iconProps": {
-    "className": "commandBarButtonIcon",
-    "testProperty": "test-value",
+  "appearance": "transparent",
+  "children": "Load assessment",
+  "className": undefined,
+  "icon": {
+    "children": <FolderOpenRegular />,
   },
+  "insightsCommandButtonIconProps": {
+    "icon": <FolderOpenRegular />,
+  },
+  "shape": "square",
 }
 `;
 
 exports[`InsightsCommandButton renders per snapshot with props passed through 1`] = `
 <DocumentFragment>
-  <mock-mockconstructor
-    classname="insightsCommandButton"
-    iconprops="[object Object]"
-    text="test-text"
-  />
+  <mock-button
+    appearance="transparent"
+    classname=""
+    icon="[object Object]"
+    insightscommandbuttoniconprops="[object Object]"
+    shape="square"
+  >
+    test-text
+  </mock-button>
 </DocumentFragment>
 `;
 
-exports[`InsightsCommandButton renders per snapshot with props passed through: mockConstructor props 1`] = `
+exports[`InsightsCommandButton renders per snapshot with props passed through: Button props 1`] = `
 {
-  "className": "insightsCommandButton",
-  "iconProps": {
-    "className": "commandBarButtonIcon",
+  "appearance": "transparent",
+  "children": "test-text",
+  "className": "",
+  "icon": {
+    "children": undefined,
+  },
+  "insightsCommandButtonIconProps": {
+    "className": "startOverMenuItemIcon",
   },
-  "text": "test-text",
+  "shape": "square",
 }
 `;
diff --git a/src/tests/unit/tests/common/components/controls/insights-command-button.test.tsx b/src/tests/unit/tests/common/components/controls/insights-command-button.test.tsx
index 55036284cf6..317ade60ba9 100644
--- a/src/tests/unit/tests/common/components/controls/insights-command-button.test.tsx
+++ b/src/tests/unit/tests/common/components/controls/insights-command-button.test.tsx
@@ -1,6 +1,8 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { IIconProps, ActionButton } from '@fluentui/react';
+import { Button } from '@fluentui/react-components';
+import { FolderOpenRegular } from '@fluentui/react-icons';
+
 import { render } from '@testing-library/react';
 import { InsightsCommandButton } from 'common/components/controls/insights-command-button';
 import * as React from 'react';
@@ -9,37 +11,57 @@ import {
     mockReactComponents,
 } from '../../../../mock-helpers/mock-module-helpers';
 
-jest.mock('@fluentui/react', () => ({
-    ...jest.requireActual('@fluentui/react'),
-    ActionButton: jest.fn(),
-}));
+jest.mock('common/components/controls/insights-command-button-style', () => {
+    return {
+        useInsightsCommandButtonStyle: jest.fn(),
+    };
+});
+
+jest.mock('@fluentui/react-components');
+
 describe('InsightsCommandButton', () => {
-    mockReactComponents([ActionButton]);
+    mockReactComponents([Button]);
+    const props = {
+        insightsCommandButtonIconProps: {
+            className: 'startOverMenuItemIcon',
+        },
+        className: '',
+    };
     it('renders per snapshot with props passed through', () => {
-        const renderResult = render(<InsightsCommandButton text={'test-text'} />);
+        const renderResult = render(
+            <InsightsCommandButton {...props}>test-text</InsightsCommandButton>,
+        );
         expect(renderResult.asFragment()).toMatchSnapshot();
-        expectMockedComponentPropsToMatchSnapshots([ActionButton]);
+        expectMockedComponentPropsToMatchSnapshots([Button]);
     });
 
     it('renders per snapshot with extra className combined with its own', () => {
-        const renderResult = render(<InsightsCommandButton className={'test-extra-class-name'} />);
+        const renderResult = render(<InsightsCommandButton {...props} />);
         expect(renderResult.asFragment()).toMatchSnapshot();
-        expectMockedComponentPropsToMatchSnapshots([ActionButton]);
+        expectMockedComponentPropsToMatchSnapshots([Button]);
     });
 
     it('renders per snapshot with iconProps passed through', () => {
-        const iconProps = { testProperty: 'test-value' } as IIconProps;
-        const renderResult = render(<InsightsCommandButton iconProps={iconProps} />);
+        const renderResult = render(
+            <InsightsCommandButton insightsCommandButtonIconProps={{ icon: <FolderOpenRegular /> }}>
+                Load assessment
+            </InsightsCommandButton>,
+        );
         expect(renderResult.asFragment()).toMatchSnapshot();
-        expectMockedComponentPropsToMatchSnapshots([ActionButton]);
+        expectMockedComponentPropsToMatchSnapshots([Button]);
     });
 
     it('renders per snapshot with extra icon className combined with its own', () => {
-        const iconProps = {
-            className: 'icon-class-name',
-        } as IIconProps;
-        const renderResult = render(<InsightsCommandButton iconProps={iconProps} />);
+        const renderResult = render(
+            <InsightsCommandButton
+                insightsCommandButtonIconProps={{
+                    icon: <FolderOpenRegular className="icon-class-name" />,
+                }}
+            >
+                Load assessment
+            </InsightsCommandButton>,
+        );
         expect(renderResult.asFragment()).toMatchSnapshot();
-        expectMockedComponentPropsToMatchSnapshots([ActionButton]);
+        expectMockedComponentPropsToMatchSnapshots([Button]);
     });
 });
diff --git a/src/tests/unit/tests/common/components/theme-family-customizer.test.tsx b/src/tests/unit/tests/common/components/theme-family-customizer.test.tsx
index 79db336d289..729ff75309d 100644
--- a/src/tests/unit/tests/common/components/theme-family-customizer.test.tsx
+++ b/src/tests/unit/tests/common/components/theme-family-customizer.test.tsx
@@ -1,31 +1,41 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 import { ThemeProvider } from '@fluentui/react';
+import { FluentProvider, webLightTheme } from '@fluentui/react-components';
 import { render } from '@testing-library/react';
 import { ThemeFamilyCustomizer } from 'common/components/theme-family-customizer';
 import { DefaultTheme } from 'common/styles/default-theme';
 import { FastPassTheme } from 'common/styles/fast-pass-theme';
+import { FastPassV9Theme } from 'common/styles/fast-pass-v9-theme';
 import { HighContrastTheme } from 'common/styles/high-contrast-theme';
+import { ThemeV9DarkTheme } from 'common/styles/theme-v9-dark-theme';
 import { UserConfigurationStoreData } from 'common/types/store-data/user-configuration-store';
 import * as React from 'react';
 import {
     getMockComponentClassPropsForCall,
     mockReactComponents,
 } from '../../../mock-helpers/mock-module-helpers';
+
 jest.mock('@fluentui/react');
+jest.mock('@fluentui/react-components');
 
 describe('ThemeFamilyCustomizer', () => {
-    mockReactComponents([ThemeProvider]);
+    mockReactComponents([ThemeProvider, FluentProvider]);
     it.each`
-        themeFamily    | enableHighContrast | expectedThemeName
-        ${'default'}   | ${false}           | ${'DefaultTheme'}
-        ${'default'}   | ${undefined}       | ${'DefaultTheme'}
-        ${'default'}   | ${true}            | ${'HighContrastTheme'}
-        ${'fast-pass'} | ${false}           | ${'FastPassTheme'}
-        ${'fast-pass'} | ${true}            | ${'HighContrastTheme'}
+        themeFamily    | enableHighContrast | expectedThemeName      | fluentUIVersion
+        ${'default'}   | ${false}           | ${'DefaultTheme'}      | ${'v8'}
+        ${'default'}   | ${undefined}       | ${'DefaultTheme'}      | ${'v8'}
+        ${'default'}   | ${true}            | ${'HighContrastTheme'} | ${'v8'}
+        ${'fast-pass'} | ${false}           | ${'FastPassTheme'}     | ${'v8'}
+        ${'fast-pass'} | ${true}            | ${'HighContrastTheme'} | ${'v8'}
+        ${'default'}   | ${false}           | ${'webLightTheme'}     | ${'v9'}
+        ${'default'}   | ${undefined}       | ${'webLightTheme'}     | ${'v9'}
+        ${'default'}   | ${true}            | ${'ThemeV9DarkTheme'}  | ${'v9'}
+        ${'fast-pass'} | ${false}           | ${'FastPassV9Theme'}   | ${'v9'}
+        ${'fast-pass'} | ${true}            | ${'ThemeV9DarkTheme'}  | ${'v9'}
     `(
-        'renders themeFamily $themeFamily using $expectedThemeName with highContrast=$enableHighContrast',
-        ({ themeFamily, enableHighContrast, expectedThemeName }) => {
+        'renders ThemeProvider themeFamily $themeFamily using $expectedThemeName with highContrast=$enableHighContrast',
+        ({ themeFamily, enableHighContrast, expectedThemeName, fluentUIVersion }) => {
             render(
                 <ThemeFamilyCustomizer
                     themeFamily={themeFamily}
@@ -33,19 +43,32 @@ describe('ThemeFamilyCustomizer', () => {
                         { enableHighContrast } as UserConfigurationStoreData
                     }
                 >
-                    stub children
+                    <FluentProvider theme={themeFamily}>stub children</FluentProvider>
                 </ThemeFamilyCustomizer>,
             );
 
-            const themeFromTestSubject = getMockComponentClassPropsForCall(ThemeProvider).theme;
+            if (fluentUIVersion === 'v8') {
+                const themeFromTestSubject = getMockComponentClassPropsForCall(ThemeProvider).theme;
+
+                const expectedTheme = {
+                    DefaultTheme,
+                    FastPassTheme,
+                    HighContrastTheme,
+                }[expectedThemeName];
+
+                expect(themeFromTestSubject).toMatchObject(expectedTheme);
+            } else {
+                const themeFromTestSubjectV9 =
+                    getMockComponentClassPropsForCall(FluentProvider).theme;
 
-            const expectedTheme = {
-                DefaultTheme,
-                FastPassTheme,
-                HighContrastTheme,
-            }[expectedThemeName];
+                const expectedV9Theme = {
+                    webLightTheme,
+                    FastPassV9Theme,
+                    ThemeV9DarkTheme,
+                }[expectedThemeName];
 
-            expect(themeFromTestSubject).toMatchObject(expectedTheme);
+                expect(themeFromTestSubjectV9).toMatchObject(expectedV9Theme);
+            }
         },
     );
 });
diff --git a/src/tests/unit/tests/reports/components/report-sections/report-collapsible-container.test.tsx b/src/tests/unit/tests/reports/components/report-sections/report-collapsible-container.test.tsx
index 57c31bddcde..8575592fd29 100644
--- a/src/tests/unit/tests/reports/components/report-sections/report-collapsible-container.test.tsx
+++ b/src/tests/unit/tests/reports/components/report-sections/report-collapsible-container.test.tsx
@@ -21,7 +21,7 @@ describe('ReportCollapsibleContainerControl', () => {
         buttonAriaLabel: [undefined, 'some button label'],
         id: [undefined, 'some id'],
     };
-    const onExpandToggleMock = Mock.ofType<(event: React.MouseEvent<HTMLDivElement>) => void>();
+    const onExpandToggleMock = Mock.ofType<(event: React.MouseEvent<HTMLButtonElement>) => void>();
     forOwn(optionalPropertiesObject, (propertyValues, propertyName) => {
         propertyValues.forEach(value => {
             test(`render with ${propertyName} set to: ${value}`, () => {
diff --git a/src/tests/unit/tests/views/content/__snapshots__/content-panel-button.test.tsx.snap b/src/tests/unit/tests/views/content/__snapshots__/content-panel-button.test.tsx.snap
index e5a306e1a38..ee1c8cec38a 100644
--- a/src/tests/unit/tests/views/content/__snapshots__/content-panel-button.test.tsx.snap
+++ b/src/tests/unit/tests/views/content/__snapshots__/content-panel-button.test.tsx.snap
@@ -2,66 +2,79 @@
 
 exports[`ContentPanelButton renders from content 1`] = `
 <DocumentFragment>
-  <mock-customizedactionbutton
-    arialabel="info and examples"
-    iconprops="[object Object]"
+  <mock-button
+    appearance="transparent"
+    aria-label="info and examples"
+    classname="info"
+    icon="[object Object]"
   >
     TEXT
-  </mock-customizedactionbutton>
+  </mock-button>
 </DocumentFragment>
 `;
 
-exports[`ContentPanelButton renders from content: CustomizedActionButton props 1`] = `
+exports[`ContentPanelButton renders from content: Button props 1`] = `
 {
-  "ariaLabel": "info and examples",
+  "appearance": "transparent",
+  "aria-label": "info and examples",
   "children": "TEXT",
-  "iconProps": {
-    "iconName": "iconName",
-  },
+  "className": "info",
+  "icon": <FluentUIV9Icon
+    iconName="info"
+  />,
   "onClick": [Function],
 }
 `;
 
 exports[`ContentPanelButton renders from path 1`] = `
 <DocumentFragment>
-  <mock-customizedactionbutton
-    arialabel="info and examples"
-    iconprops="[object Object]"
+  <mock-button
+    appearance="transparent"
+    aria-label="info and examples"
+    classname="info"
+    icon="[object Object]"
   >
     TEXT
-  </mock-customizedactionbutton>
+  </mock-button>
 </DocumentFragment>
 `;
 
-exports[`ContentPanelButton renders from path: CustomizedActionButton props 1`] = `
+exports[`ContentPanelButton renders from path: Button props 1`] = `
 {
-  "ariaLabel": "info and examples",
+  "appearance": "transparent",
+  "aria-label": "info and examples",
   "children": "TEXT",
-  "iconProps": {
-    "iconName": "iconName",
-  },
+  "className": "info",
+  "icon": <FluentUIV9Icon
+    iconName="iconName"
+  />,
   "onClick": [Function],
 }
 `;
 
+exports[`ContentPanelButton renders with reference is null 1`] = `<DocumentFragment />`;
+
+exports[`ContentPanelButton renders with reference is null: Button props 1`] = `undefined`;
+
 exports[`ContentPanelButton renders without iconName 1`] = `
 <DocumentFragment>
-  <mock-customizedactionbutton
-    arialabel="info and examples"
-    iconprops="[object Object]"
+  <mock-button
+    appearance="transparent"
+    aria-label="info and examples"
+    classname="info"
   >
     TEXT
-  </mock-customizedactionbutton>
+  </mock-button>
 </DocumentFragment>
 `;
 
-exports[`ContentPanelButton renders without iconName: CustomizedActionButton props 1`] = `
+exports[`ContentPanelButton renders without iconName: Button props 1`] = `
 {
-  "ariaLabel": "info and examples",
+  "appearance": "transparent",
+  "aria-label": "info and examples",
   "children": "TEXT",
-  "iconProps": {
-    "iconName": undefined,
-  },
+  "className": "info",
+  "icon": undefined,
   "onClick": [Function],
 }
 `;
diff --git a/src/tests/unit/tests/views/content/content-panel-button.test.tsx b/src/tests/unit/tests/views/content/content-panel-button.test.tsx
index 232e5b1c1ca..44997f4680c 100644
--- a/src/tests/unit/tests/views/content/content-panel-button.test.tsx
+++ b/src/tests/unit/tests/views/content/content-panel-button.test.tsx
@@ -1,20 +1,22 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { ActionButton } from '@fluentui/react';
+import { Button } from '@fluentui/react-components';
 import { render } from '@testing-library/react';
 import * as React from 'react';
 import {
     expectMockedComponentPropsToMatchSnapshots,
+    getMockComponentClassPropsForCall,
     mockReactComponents,
 } from 'tests/unit/mock-helpers/mock-module-helpers';
 import { ContentPage } from 'views/content/content-page';
 import { ContentPanelButton } from 'views/content/content-panel-button';
 import { ContentActionMessageCreator } from '../../../../../common/message-creators/content-action-message-creator';
 
-jest.mock('@fluentui/react');
+jest.mock('@fluentui/react-components');
+jest.mock('../../../../../common/message-creators/content-action-message-creator');
 
 describe('ContentPanelButton', () => {
-    mockReactComponents([ActionButton]);
+    mockReactComponents([Button]);
     const content = {
         for: {
             testing: ContentPage.create(() => 'CONTENT FOR TESTING' as any),
@@ -32,7 +34,7 @@ describe('ContentPanelButton', () => {
             <ContentPanelButton
                 deps={deps}
                 reference={content.for.testing}
-                iconName="iconName"
+                iconName="info"
                 contentTitle={contentTitle}
             >
                 TEXT
@@ -40,7 +42,7 @@ describe('ContentPanelButton', () => {
         );
 
         expect(renderResult.asFragment()).toMatchSnapshot();
-        expectMockedComponentPropsToMatchSnapshots([ActionButton]);
+        expectMockedComponentPropsToMatchSnapshots([Button]);
     });
 
     it('renders from path', () => {
@@ -56,7 +58,7 @@ describe('ContentPanelButton', () => {
         );
 
         expect(renderResult.asFragment()).toMatchSnapshot();
-        expectMockedComponentPropsToMatchSnapshots([ActionButton]);
+        expectMockedComponentPropsToMatchSnapshots([Button]);
     });
 
     it('renders without iconName', () => {
@@ -67,6 +69,33 @@ describe('ContentPanelButton', () => {
         );
 
         expect(renderResult.asFragment()).toMatchSnapshot();
-        expectMockedComponentPropsToMatchSnapshots([ActionButton]);
+        expectMockedComponentPropsToMatchSnapshots([Button]);
+    });
+
+    it('renders with reference is null', () => {
+        const renderResult = render(
+            <ContentPanelButton deps={deps} reference={''} contentTitle={contentTitle}>
+                TEXT
+            </ContentPanelButton>,
+        );
+        expect(renderResult.asFragment()).toMatchSnapshot();
+        expectMockedComponentPropsToMatchSnapshots([Button]);
+    });
+
+    it('button onClick', () => {
+        const deps: any = {
+            contentProvider: ContentPage.provider(content),
+            contentActionMessageCreator: {
+                openContentPanel: jest.fn(),
+            },
+        };
+        render(
+            <ContentPanelButton deps={deps} reference={'for/testing'} contentTitle={contentTitle}>
+                TEXT
+            </ContentPanelButton>,
+        );
+
+        getMockComponentClassPropsForCall(Button).onClick();
+        expect(deps.contentActionMessageCreator.openContentPanel).toHaveBeenCalled();
     });
 });
diff --git a/src/views/content/content-panel-button.tsx b/src/views/content/content-panel-button.tsx
index ed06b4461a5..1207dc32efa 100644
--- a/src/views/content/content-panel-button.tsx
+++ b/src/views/content/content-panel-button.tsx
@@ -1,8 +1,8 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { ActionButton } from '@fluentui/react';
+import { Button } from '@fluentui/react-components';
+import { FluentUIV9Icon } from 'common/icons/fluentui-v9-icons';
 import * as React from 'react';
-
 import { ContentActionMessageCreator } from '../../common/message-creators/content-action-message-creator';
 import { NamedFC } from '../../common/react/named-fc';
 import { ContentProvider, ContentReference } from './content-page';
@@ -34,16 +34,18 @@ export const ContentPanelButton = NamedFC<ContentPanelButtonProps>(
         }
 
         const onClick = ev =>
-            contentActionMessageCreator.openContentPanel(ev, contentPath, contentTitle);
+            contentActionMessageCreator?.openContentPanel(ev, contentPath, contentTitle);
 
         return (
-            <ActionButton
-                iconProps={{ iconName }}
+            <Button
+                className="info"
+                appearance="transparent"
+                icon={iconName && <FluentUIV9Icon iconName={iconName} />}
                 onClick={onClick}
-                ariaLabel={'info and examples'}
+                aria-label={'info and examples'}
             >
                 {children}
-            </ActionButton>
+            </Button>
         );
     },
 );
diff --git a/src/views/content/content.scss b/src/views/content/content.scss
index f3c97ec6cf6..61e29d8cc09 100644
--- a/src/views/content/content.scss
+++ b/src/views/content/content.scss
@@ -14,6 +14,17 @@
     }
 }
 
+.info {
+    /* stylelint-disable-next-line length-zero-no-unit */
+    padding: 0px !important;
+    color: $link !important;
+    font-weight: 400 !important;
+
+    &:hover {
+        color: $link-hover !important;
+    }
+}
+
 .content-header {
     @include text-style-title-l;
 
@@ -221,15 +232,15 @@
     }
 
     .do-header {
-        @include check-icon-styles($icon-size, 0, $do-color);
-
         border-bottom: 2px solid $do-color;
+
+        @include check-icon-styles($icon-size, 0, $do-color);
     }
 
     .dont-header {
-        @include cross-icon-styles($icon-size, 0, $dont-color);
-
         border-bottom: 2px solid $dont-color;
+
+        @include cross-icon-styles($icon-size, 0, $dont-color);
     }
 
     .pass-header {