diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.tsx
index 0b5092926200dc..c36f7dba5eaf56 100644
--- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.tsx
+++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.tsx
@@ -5,12 +5,12 @@ import { Button, mergeClasses, Tooltip } from '@fluentui/react-components';
 import { V0IconComponent, V9IconComponent } from './types';
 import { useComparisonTileStyles } from './ComparisonTile.styles';
 
-interface IComparisonTileProps {
+interface ComparisonTileProps {
   V0Icon: V0IconComponent;
   V9Icon?: V9IconComponent;
 }
 
-export const ComparisonTile: React.FC<IComparisonTileProps> = ({ V0Icon, V9Icon }) => {
+export const ComparisonTile: React.FC<ComparisonTileProps> = ({ V0Icon, V9Icon }) => {
   const noV9Icon = !V9Icon;
 
   const tooltipWarningContent = <ul>{noV9Icon && <li>No equivalent icon available</li>}</ul>;
diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconGrid.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconGrid.tsx
index ff12cd383583e5..98a059b097787c 100644
--- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconGrid.tsx
+++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/IconGrid.tsx
@@ -6,7 +6,7 @@ import { V0IconComponent, V9IconComponent } from './types';
 
 const ComparisonTile = React.memo(ComparisonTileBase);
 
-interface IIconGridProps {
+interface IconGridProps {
   entries: {
     V0Icon: V0IconComponent;
     V9Icon?: V9IconComponent;
@@ -15,11 +15,11 @@ interface IIconGridProps {
 
 const ROW_SIZE = 3;
 
-interface IRowProps extends ListChildComponentProps {
-  data: IIconGridProps['entries'];
+interface RowProps extends ListChildComponentProps {
+  data: IconGridProps['entries'];
 }
 
-const Row = ({ index, style, data }: IRowProps) => {
+const Row = ({ index, style, data }: RowProps) => {
   const start = index * ROW_SIZE;
   const items = data.slice(start, start + 3);
   return (
@@ -33,7 +33,7 @@ const Row = ({ index, style, data }: IRowProps) => {
   );
 };
 
-export const IconGrid: React.FC<IIconGridProps> = ({ entries }) => {
+export const IconGrid: React.FC<IconGridProps> = ({ entries }) => {
   return (
     <List width="100%" itemCount={entries.length / ROW_SIZE} height={600} itemData={entries} itemSize={110}>
       {Row}
diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/BrandColors.stories.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/BrandColors.stories.tsx
index b59da59d01bf98..c9eccc059f26d3 100644
--- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/BrandColors.stories.tsx
+++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/BrandColors.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ColorCompare } from './ColorCompare';
 import { darkThemeBrandMap, lightThemeBrandMap } from './themeMap';
 
-import { makeStyles, shorthands } from '@griffel/react';
+import { makeStyles, shorthands } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: {
diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/NamedColors.stories.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/NamedColors.stories.tsx
index 69a1ec0143cda4..4697aef1f51f25 100644
--- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/NamedColors.stories.tsx
+++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/NamedColors.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ColorCompare } from './ColorCompare';
 import { namedColorMap } from './themeMap';
 
-import { makeStyles, shorthands } from '@griffel/react';
+import { makeStyles, shorthands } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: {
diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/NeutralColors.stories.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/NeutralColors.stories.tsx
index 78a56b481812b8..6707dc54a53f07 100644
--- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/NeutralColors.stories.tsx
+++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/NeutralColors.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ColorCompare } from './ColorCompare';
 import { lightThemeNeutralMap, darkThemeNeutralMap } from './themeMap';
 
-import { makeStyles, shorthands } from '@griffel/react';
+import { makeStyles, shorthands } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: {
diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/SemanticColors.stories.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/SemanticColors.stories.tsx
index c07a065a55eb84..7e014795105685 100644
--- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/SemanticColors.stories.tsx
+++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/SemanticColors.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ColorCompare } from './ColorCompare';
 import { semanticToAliasMap } from './themeMap';
 
-import { makeStyles, shorthands } from '@griffel/react';
+import { makeStyles, shorthands } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: {
diff --git a/apps/public-docsite-v9/src/Concepts/Slots/SlotSketch.stories.tsx b/apps/public-docsite-v9/src/Concepts/Slots/SlotSketch.stories.tsx
index 5b8be42a4ad3f2..0eab2d637bbd76 100644
--- a/apps/public-docsite-v9/src/Concepts/Slots/SlotSketch.stories.tsx
+++ b/apps/public-docsite-v9/src/Concepts/Slots/SlotSketch.stories.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import { Input, tokens, typographyStyles } from '@fluentui/react-components';
+import { makeStyles, mergeClasses, shorthands, Input, tokens, typographyStyles } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: {
diff --git a/apps/public-docsite-v9/src/Concepts/components/WhatsNewBoxes.tsx b/apps/public-docsite-v9/src/Concepts/components/WhatsNewBoxes.tsx
index caf9b7857cc9db..f5678ae405e46d 100644
--- a/apps/public-docsite-v9/src/Concepts/components/WhatsNewBoxes.tsx
+++ b/apps/public-docsite-v9/src/Concepts/components/WhatsNewBoxes.tsx
@@ -7,11 +7,11 @@ type Box = {
   text: 'string';
 };
 
-interface IWhatsNewBoxProps {
+interface WhatsNewBoxProps {
   boxes: Box[];
 }
 
-export const WhatsNewBoxes: React.FC<IWhatsNewBoxProps> = props => {
+export const WhatsNewBoxes: React.FC<WhatsNewBoxProps> = props => {
   const styles = useWhatsNewStyles();
 
   return (
diff --git a/apps/public-docsite-v9/src/DocsComponents/FluentDocsContainer.stories.tsx b/apps/public-docsite-v9/src/DocsComponents/FluentDocsContainer.stories.tsx
index e03cbda640bce2..8ae689e4df658c 100644
--- a/apps/public-docsite-v9/src/DocsComponents/FluentDocsContainer.stories.tsx
+++ b/apps/public-docsite-v9/src/DocsComponents/FluentDocsContainer.stories.tsx
@@ -3,14 +3,14 @@ import { DocsContainer, DocsContextProps } from '@storybook/addon-docs';
 import { FluentStoryContext } from '@fluentui/react-storybook-addon';
 import { webLightTheme, FluentProvider } from '@fluentui/react-components';
 
-interface IFluentDocsContainerProps {
+interface FluentDocsContainerProps {
   context: FluentStoryContext & DocsContextProps;
 }
 
 /**
  * A container that wraps storybook's native docs container to add extra components to the docs experience
  */
-export const FluentDocsContainer: React.FC<IFluentDocsContainerProps> = ({ children, context }) => {
+export const FluentDocsContainer: React.FC<FluentDocsContainerProps> = ({ children, context }) => {
   return (
     <>
       {/** TODO add table of contents */}
diff --git a/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx b/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx
index 2734cd91731f8b..c9041b2334b1c1 100644
--- a/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx
+++ b/apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx
@@ -10,8 +10,7 @@ import {
   PRIMARY_STORY,
   Stories,
 } from '@storybook/addon-docs';
-import { makeStyles, shorthands } from '@griffel/react';
-import { tokens, Link, Text } from '@fluentui/react-components';
+import { makeStyles, shorthands, tokens, Link, Text } from '@fluentui/react-components';
 import { DIR_ID, THEME_ID, themes } from '@fluentui/react-storybook-addon';
 import { DirSwitch } from './DirSwitch.stories';
 import { ThemePicker } from './ThemePicker.stories';
diff --git a/apps/public-docsite-v9/src/DocsComponents/Toc.stories.tsx b/apps/public-docsite-v9/src/DocsComponents/Toc.stories.tsx
index 91c12bd7cd2cb2..3e42e2126cd649 100644
--- a/apps/public-docsite-v9/src/DocsComponents/Toc.stories.tsx
+++ b/apps/public-docsite-v9/src/DocsComponents/Toc.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { addons } from '@storybook/addons';
 import { NAVIGATE_URL } from '@storybook/core-events';
-import { makeStyles, shorthands } from '@griffel/react';
+import { makeStyles, shorthands } from '@fluentui/react-components';
 import { useRef } from 'react';
 
 const useTocStyles = makeStyles({