diff --git a/change/@fluentui-react-tree-d63bed0b-49b4-4783-8de0-da7822310165.json b/change/@fluentui-react-tree-d63bed0b-49b4-4783-8de0-da7822310165.json
new file mode 100644
index 00000000000000..a9584d25a5647c
--- /dev/null
+++ b/change/@fluentui-react-tree-d63bed0b-49b4-4783-8de0-da7822310165.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: restructure stories, add separate category for flat tree",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tree/etc/react-tree.api.md b/packages/react-components/react-tree/etc/react-tree.api.md
index b680ce0c98c1f0..1635f372aff3f6 100644
--- a/packages/react-components/react-tree/etc/react-tree.api.md
+++ b/packages/react-components/react-tree/etc/react-tree.api.md
@@ -132,7 +132,7 @@ export type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;
 
 // @public (undocumented)
 export type TreeItemLayoutSlots = {
-    root: Slot<'div'>;
+    root: Slot<'span'>;
     iconBefore?: Slot<'span'>;
     iconAfter?: Slot<'span'>;
     aside?: Slot<'span'>;
diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.types.ts b/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.types.ts
index eb204f80a8d671..cdd1b3f9d17031 100644
--- a/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.types.ts
+++ b/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.types.ts
@@ -2,7 +2,7 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utili
 import { TreeItemContextValue } from '../../contexts/treeItemContext';
 
 export type TreeItemLayoutSlots = {
-  root: Slot<'div'>;
+  root: Slot<'span'>;
   /**
    * Icon slot that renders right before main content
    */
@@ -11,6 +11,9 @@ export type TreeItemLayoutSlots = {
    * Icon slot that renders right after main content
    */
   iconAfter?: Slot<'span'>;
+  /**
+   * slot that render right after main content and iconAfter
+   */
   aside?: Slot<'span'>;
 };
 
diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/__snapshots__/TreeItemLayout.test.tsx.snap b/packages/react-components/react-tree/src/components/TreeItemLayout/__snapshots__/TreeItemLayout.test.tsx.snap
index f07aa64b74c752..277c480f29e21a 100644
--- a/packages/react-components/react-tree/src/components/TreeItemLayout/__snapshots__/TreeItemLayout.test.tsx.snap
+++ b/packages/react-components/react-tree/src/components/TreeItemLayout/__snapshots__/TreeItemLayout.test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`TreeItemLayout renders a default state 1`] = `
 <div>
-  <div
+  <span
     class="fui-TreeItemLayout"
   >
     Default TreeItemLayout
-  </div>
+  </span>
 </div>
 `;
diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.ts b/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.ts
index 5042722a75ea0b..bf0f7a0cb3a644 100644
--- a/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.ts
+++ b/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.ts
@@ -16,13 +16,13 @@ export const useTreeItemLayout_unstable = (
   props: TreeItemLayoutProps,
   ref: React.Ref<HTMLElement>,
 ): TreeItemLayoutState => {
-  const { iconAfter, iconBefore, aside, as = 'div' } = props;
+  const { iconAfter, iconBefore, aside, as = 'span' } = props;
   const treeItemContext = useTreeItemContext_unstable();
 
   return {
     ...treeItemContext,
     components: {
-      root: 'div',
+      root: 'span',
       iconBefore: 'span',
       iconAfter: 'span',
       aside: 'span',
diff --git a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.ts b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.ts
index 11c058a7e65963..6aee99522a2d86 100644
--- a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.ts
+++ b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.ts
@@ -20,6 +20,7 @@ const useRootStyles = makeStyles({
     width: '100%',
     display: 'flex',
     alignItems: 'center',
+    ...typographyStyles.body1,
   },
 });
 
@@ -50,16 +51,13 @@ const useContentStyles = makeStyles({
     ...shorthands.gap(tokens.spacingVerticalNone, tokens.spacingHorizontalNone),
   },
 });
-const useMainStyles = makeStyles({
-  base: {
-    ...typographyStyles.body1,
-  },
-});
+
 const useDescriptionStyles = makeStyles({
   base: {
     ...typographyStyles.caption1,
   },
 });
+
 const useAsideStyles = makeStyles({
   base: {
     display: 'flex',
@@ -79,7 +77,6 @@ export const useTreeItemPersonaLayoutStyles_unstable = (
   const rootStyles = useRootStyles();
   const mediaStyles = useMediaStyles();
   const contentStyles = useContentStyles();
-  const mainStyles = useMainStyles();
   const descriptionStyles = useDescriptionStyles();
   const asideStyles = useAsideStyles();
 
@@ -95,7 +92,7 @@ export const useTreeItemPersonaLayoutStyles_unstable = (
     );
   }
   if (state.main) {
-    state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainStyles.base, state.main.className);
+    state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, state.main.className);
   }
   if (state.description) {
     state.description.className = mergeClasses(
diff --git a/packages/react-components/react-tree/stories/Tree/TreeAppearance.md b/packages/react-components/react-tree/stories/A_Tree/TreeAppearance.md
similarity index 100%
rename from packages/react-components/react-tree/stories/Tree/TreeAppearance.md
rename to packages/react-components/react-tree/stories/A_Tree/TreeAppearance.md
diff --git a/packages/react-components/react-tree/stories/Tree/TreeAppearance.stories.tsx b/packages/react-components/react-tree/stories/A_Tree/TreeAppearance.stories.tsx
similarity index 100%
rename from packages/react-components/react-tree/stories/Tree/TreeAppearance.stories.tsx
rename to packages/react-components/react-tree/stories/A_Tree/TreeAppearance.stories.tsx
diff --git a/packages/react-components/react-tree/stories/Tree/TreeBestPractices.md b/packages/react-components/react-tree/stories/A_Tree/TreeBestPractices.md
similarity index 100%
rename from packages/react-components/react-tree/stories/Tree/TreeBestPractices.md
rename to packages/react-components/react-tree/stories/A_Tree/TreeBestPractices.md
diff --git a/packages/react-components/react-tree/stories/Tree/TreeControllingOpenAndClose.md b/packages/react-components/react-tree/stories/A_Tree/TreeControllingOpenAndClose.md
similarity index 100%
rename from packages/react-components/react-tree/stories/Tree/TreeControllingOpenAndClose.md
rename to packages/react-components/react-tree/stories/A_Tree/TreeControllingOpenAndClose.md
diff --git a/packages/react-components/react-tree/stories/Tree/TreeControllingOpenAndClose.stories.tsx b/packages/react-components/react-tree/stories/A_Tree/TreeControllingOpenAndClose.stories.tsx
similarity index 100%
rename from packages/react-components/react-tree/stories/Tree/TreeControllingOpenAndClose.stories.tsx
rename to packages/react-components/react-tree/stories/A_Tree/TreeControllingOpenAndClose.stories.tsx
diff --git a/packages/react-components/react-tree/stories/Tree/TreeDefault.stories.tsx b/packages/react-components/react-tree/stories/A_Tree/TreeDefault.stories.tsx
similarity index 100%
rename from packages/react-components/react-tree/stories/Tree/TreeDefault.stories.tsx
rename to packages/react-components/react-tree/stories/A_Tree/TreeDefault.stories.tsx
diff --git a/packages/react-components/react-tree/stories/Tree/TreeDefaultOpenTrees.md b/packages/react-components/react-tree/stories/A_Tree/TreeDefaultOpenTrees.md
similarity index 100%
rename from packages/react-components/react-tree/stories/Tree/TreeDefaultOpenTrees.md
rename to packages/react-components/react-tree/stories/A_Tree/TreeDefaultOpenTrees.md
diff --git a/packages/react-components/react-tree/stories/Tree/TreeDefaultOpenTrees.stories.tsx b/packages/react-components/react-tree/stories/A_Tree/TreeDefaultOpenTrees.stories.tsx
similarity index 100%
rename from packages/react-components/react-tree/stories/Tree/TreeDefaultOpenTrees.stories.tsx
rename to packages/react-components/react-tree/stories/A_Tree/TreeDefaultOpenTrees.stories.tsx
diff --git a/packages/react-components/react-tree/stories/Tree/TreeDescription.md b/packages/react-components/react-tree/stories/A_Tree/TreeDescription.md
similarity index 100%
rename from packages/react-components/react-tree/stories/Tree/TreeDescription.md
rename to packages/react-components/react-tree/stories/A_Tree/TreeDescription.md
diff --git a/packages/react-components/react-tree/stories/Tree/TreeSize.md b/packages/react-components/react-tree/stories/A_Tree/TreeSize.md
similarity index 100%
rename from packages/react-components/react-tree/stories/Tree/TreeSize.md
rename to packages/react-components/react-tree/stories/A_Tree/TreeSize.md
diff --git a/packages/react-components/react-tree/stories/Tree/TreeSize.stories.tsx b/packages/react-components/react-tree/stories/A_Tree/TreeSize.stories.tsx
similarity index 100%
rename from packages/react-components/react-tree/stories/Tree/TreeSize.stories.tsx
rename to packages/react-components/react-tree/stories/A_Tree/TreeSize.stories.tsx
diff --git a/packages/react-components/react-tree/stories/Tree/index.stories.tsx b/packages/react-components/react-tree/stories/A_Tree/index.stories.tsx
similarity index 79%
rename from packages/react-components/react-tree/stories/Tree/index.stories.tsx
rename to packages/react-components/react-tree/stories/A_Tree/index.stories.tsx
index 37f3efc4801942..23315dbb92ded1 100644
--- a/packages/react-components/react-tree/stories/Tree/index.stories.tsx
+++ b/packages/react-components/react-tree/stories/A_Tree/index.stories.tsx
@@ -8,9 +8,6 @@ export { DefaultOpenTrees } from './TreeDefaultOpenTrees.stories';
 export { Appearance } from './TreeAppearance.stories';
 export { Size } from './TreeSize.stories';
 export { OpenItemsControlled } from './TreeControllingOpenAndClose.stories';
-export { UseFlatTree as useFlatTree } from './useFlatTree.stories';
-export { FlattenTree as flattenTree } from './flattenTree.stories';
-export { Virtualization } from './Virtualization.stories';
 
 export default {
   title: 'Preview Components/Tree/Tree',
diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemActions.md b/packages/react-components/react-tree/stories/B_TreeItem/TreeItemActions.md
similarity index 100%
rename from packages/react-components/react-tree/stories/TreeItem/TreeItemActions.md
rename to packages/react-components/react-tree/stories/B_TreeItem/TreeItemActions.md
diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemActions.stories.tsx b/packages/react-components/react-tree/stories/B_TreeItem/TreeItemActions.stories.tsx
similarity index 100%
rename from packages/react-components/react-tree/stories/TreeItem/TreeItemActions.stories.tsx
rename to packages/react-components/react-tree/stories/B_TreeItem/TreeItemActions.stories.tsx
diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemDefault.stories.tsx b/packages/react-components/react-tree/stories/B_TreeItem/TreeItemDefault.stories.tsx
similarity index 100%
rename from packages/react-components/react-tree/stories/TreeItem/TreeItemDefault.stories.tsx
rename to packages/react-components/react-tree/stories/B_TreeItem/TreeItemDefault.stories.tsx
diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemDescription.md b/packages/react-components/react-tree/stories/B_TreeItem/TreeItemDescription.md
similarity index 55%
rename from packages/react-components/react-tree/stories/TreeItem/TreeItemDescription.md
rename to packages/react-components/react-tree/stories/B_TreeItem/TreeItemDescription.md
index 0dc57ec18b0f55..73143049232401 100644
--- a/packages/react-components/react-tree/stories/TreeItem/TreeItemDescription.md
+++ b/packages/react-components/react-tree/stories/B_TreeItem/TreeItemDescription.md
@@ -1,3 +1,16 @@
 The `TreeItem` component represents a single item in a tree. It can contain child items in the form of another `Tree` component or standalone `TreeItem`. The content and layout of a `TreeItem` can be defined using the `TreeItemLayout` or `TreeItemPersonaLayout` component, which should be used as a direct child of `TreeItem`.
 
 When a `TreeItem` has child items, an expand/collapse control is displayed, allowing the user to show or hide the children.
+
+<!-- Don't allow prettier to collapse code block into single line -->
+<!-- prettier-ignore -->
+> **⚠️ Preview components are considered unstable:**
+>
+> ```jsx
+>
+> import { Tree, TreeItem } from '@fluentui/react-components/unstable';
+>
+> ```
+>
+> - Features and APIs may change before final release
+> - Please contact us if you intend to use this in your product
diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemExpandCollapseIconOnly.md b/packages/react-components/react-tree/stories/B_TreeItem/TreeItemExpandCollapseIconOnly.md
similarity index 100%
rename from packages/react-components/react-tree/stories/TreeItem/TreeItemExpandCollapseIconOnly.md
rename to packages/react-components/react-tree/stories/B_TreeItem/TreeItemExpandCollapseIconOnly.md
diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemExpandCollapseIconOnly.stories.tsx b/packages/react-components/react-tree/stories/B_TreeItem/TreeItemExpandCollapseIconOnly.stories.tsx
similarity index 100%
rename from packages/react-components/react-tree/stories/TreeItem/TreeItemExpandCollapseIconOnly.stories.tsx
rename to packages/react-components/react-tree/stories/B_TreeItem/TreeItemExpandCollapseIconOnly.stories.tsx
diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemExpandIcon.md b/packages/react-components/react-tree/stories/B_TreeItem/TreeItemExpandIcon.md
similarity index 100%
rename from packages/react-components/react-tree/stories/TreeItem/TreeItemExpandIcon.md
rename to packages/react-components/react-tree/stories/B_TreeItem/TreeItemExpandIcon.md
diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemExpandIcon.stories.tsx b/packages/react-components/react-tree/stories/B_TreeItem/TreeItemExpandIcon.stories.tsx
similarity index 100%
rename from packages/react-components/react-tree/stories/TreeItem/TreeItemExpandIcon.stories.tsx
rename to packages/react-components/react-tree/stories/B_TreeItem/TreeItemExpandIcon.stories.tsx
diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemWithInlineStyle.md b/packages/react-components/react-tree/stories/B_TreeItem/TreeItemWithInlineStyle.md
similarity index 100%
rename from packages/react-components/react-tree/stories/TreeItem/TreeItemWithInlineStyle.md
rename to packages/react-components/react-tree/stories/B_TreeItem/TreeItemWithInlineStyle.md
diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemWithInlineStyle.stories.tsx b/packages/react-components/react-tree/stories/B_TreeItem/TreeItemWithInlineStyle.stories.tsx
similarity index 100%
rename from packages/react-components/react-tree/stories/TreeItem/TreeItemWithInlineStyle.stories.tsx
rename to packages/react-components/react-tree/stories/B_TreeItem/TreeItemWithInlineStyle.stories.tsx
diff --git a/packages/react-components/react-tree/stories/TreeItem/index.stories.tsx b/packages/react-components/react-tree/stories/B_TreeItem/index.stories.tsx
similarity index 80%
rename from packages/react-components/react-tree/stories/TreeItem/index.stories.tsx
rename to packages/react-components/react-tree/stories/B_TreeItem/index.stories.tsx
index 315138827be72d..5173f20fb7e330 100644
--- a/packages/react-components/react-tree/stories/TreeItem/index.stories.tsx
+++ b/packages/react-components/react-tree/stories/B_TreeItem/index.stories.tsx
@@ -4,11 +4,8 @@ import descriptionMd from './TreeItemDescription.md';
 export { Default } from './TreeItemDefault.stories';
 export { ExpandCollapseIconOnly } from './TreeItemExpandCollapseIconOnly.stories';
 export { ExpandIcon } from './TreeItemExpandIcon.stories';
-export { IconBefore } from './TreeItemIconBefore.stories';
-export { IconAfter } from './TreeItemIconAfter.stories';
 export { Actions } from './TreeItemActions.stories';
 export { WithInlineStyle } from './TreeItemWithInlineStyle.stories';
-export { AddRemoveTreeItem } from './TreeItemAddRemove.stories';
 
 export default {
   title: 'Preview Components/Tree/TreeItem',
diff --git a/packages/react-components/react-tree/stories/C_Layouts/LayoutsDefault.stories.tsx b/packages/react-components/react-tree/stories/C_Layouts/LayoutsDefault.stories.tsx
new file mode 100644
index 00000000000000..ee983511110be4
--- /dev/null
+++ b/packages/react-components/react-tree/stories/C_Layouts/LayoutsDefault.stories.tsx
@@ -0,0 +1,154 @@
+import * as React from 'react';
+import { Tree, TreeItem, TreeItemLayout, TreeItemPersonaLayout } from '@fluentui/react-tree';
+import {
+  CalendarMonthRegular,
+  LockClosedRegular,
+  LinkSquareRegular,
+  Important16Regular,
+  MoreHorizontal20Regular,
+  FlagRegular,
+} from '@fluentui/react-icons';
+import {
+  Avatar,
+  Button,
+  CounterBadge,
+  Menu,
+  MenuItem,
+  MenuList,
+  MenuPopover,
+  MenuTrigger,
+  Text,
+  tokens,
+} from '@fluentui/react-components';
+
+export const Default = () => {
+  return (
+    <Tree aria-label="Tree">
+      <TreeItem>
+        <TreeItemLayout
+          iconBefore={<CalendarMonthRegular />}
+          iconAfter={
+            <>
+              <LockClosedRegular />
+              <LinkSquareRegular />
+            </>
+          }
+          aside={
+            <>
+              <Important16Regular primaryFill="red" />
+              <CounterBadge count={1} color="danger" size="small" />
+            </>
+          }
+        >
+          Content
+        </TreeItemLayout>
+        <Tree>
+          <TreeItem>
+            <TreeItemLayout>level 2, item 1</TreeItemLayout>
+          </TreeItem>
+          <TreeItem>
+            <TreeItemLayout>level 2, item 2</TreeItemLayout>
+          </TreeItem>
+          <TreeItem>
+            <TreeItemLayout>level 2, item 3</TreeItemLayout>
+          </TreeItem>
+        </Tree>
+      </TreeItem>
+      <TreeItem
+        actions={
+          <>
+            <Button aria-label="Edit" appearance="subtle" icon={<FlagRegular />} />
+            <Menu>
+              <MenuTrigger disableButtonEnhancement>
+                <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontal20Regular />} />
+              </MenuTrigger>
+
+              <MenuPopover>
+                <MenuList>
+                  <MenuItem>New </MenuItem>
+                  <MenuItem>New Window</MenuItem>
+                  <MenuItem disabled>Open File</MenuItem>
+                  <MenuItem>Open Folder</MenuItem>
+                </MenuList>
+              </MenuPopover>
+            </Menu>
+          </>
+        }
+      >
+        <TreeItemLayout
+          iconBefore={<CalendarMonthRegular />}
+          iconAfter={
+            <>
+              <LockClosedRegular />
+              <LinkSquareRegular />
+            </>
+          }
+        >
+          Content
+        </TreeItemLayout>
+        <Tree>
+          <TreeItem>
+            <TreeItemLayout>level 2, item 1</TreeItemLayout>
+            <Tree>
+              <TreeItem>
+                <TreeItemLayout>level 3, item 1</TreeItemLayout>
+              </TreeItem>
+            </Tree>
+          </TreeItem>
+        </Tree>
+      </TreeItem>
+      <TreeItem>
+        <TreeItemPersonaLayout
+          aside={
+            <>
+              <Text font="numeric" as="span" style={{ whiteSpace: 'nowrap' }}>
+                00:00 AM
+              </Text>
+              <div style={{ display: 'flex', marginLeft: 'auto', gap: tokens.spacingHorizontalXS }}>
+                <Important16Regular primaryFill="red" />
+                <CounterBadge count={1} color="danger" size="small" />
+              </div>
+            </>
+          }
+          description="description"
+          media={<Avatar />}
+        >
+          Content
+        </TreeItemPersonaLayout>
+        <Tree>
+          <TreeItem>
+            <TreeItemLayout>level 2, item 1</TreeItemLayout>
+            <Tree>
+              <TreeItem>
+                <TreeItemLayout>level 3, item 1</TreeItemLayout>
+              </TreeItem>
+            </Tree>
+          </TreeItem>
+        </Tree>
+      </TreeItem>
+      <TreeItem>
+        <TreeItemPersonaLayout
+          aside={
+            <div style={{ display: 'flex', marginLeft: 'auto', gap: tokens.spacingHorizontalXS }}>
+              <Important16Regular primaryFill="red" />
+              <CounterBadge count={1} color="danger" size="small" />
+            </div>
+          }
+          media={<Avatar shape="square" />}
+        >
+          Content
+        </TreeItemPersonaLayout>
+        <Tree>
+          <TreeItem>
+            <TreeItemLayout>level 2, item 1</TreeItemLayout>
+            <Tree>
+              <TreeItem>
+                <TreeItemLayout>level 3, item 1</TreeItemLayout>
+              </TreeItem>
+            </Tree>
+          </TreeItem>
+        </Tree>
+      </TreeItem>
+    </Tree>
+  );
+};
diff --git a/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayout.md b/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayout.md
new file mode 100644
index 00000000000000..0cdf37c7c53de6
--- /dev/null
+++ b/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayout.md
@@ -0,0 +1,3 @@
+You can leverage multiple props to customize the appearance of a `TreeItemLayout` component. It includes the use of `iconBefore`, `iconAfter` and `aside` slots that can be combined to present meaningful content.
+
+> ⚠️ `iconBefore`, `iconAfter` and `aside` are marked as `aria-hidden` by default
diff --git a/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayout.stories.tsx b/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayout.stories.tsx
new file mode 100644
index 00000000000000..cf912c888e08d1
--- /dev/null
+++ b/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayout.stories.tsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-tree';
+import {
+  Image20Regular,
+  Important16Regular,
+  LockClosed20Regular,
+  SquareMultiple20Regular,
+} from '@fluentui/react-icons';
+import { CounterBadge } from '@fluentui/react-components';
+import story from './TreeItemLayout.md';
+
+export const Layout = () => (
+  <Tree aria-label="Tree">
+    <TreeItem aria-description="Private, 1 message">
+      <TreeItemLayout
+        iconBefore={<Image20Regular />}
+        iconAfter={
+          <>
+            <LockClosed20Regular />
+            <SquareMultiple20Regular />
+          </>
+        }
+        aside={
+          <>
+            <Important16Regular primaryFill="red" />
+            <CounterBadge count={1} color="danger" size="small" />
+          </>
+        }
+      >
+        Content
+      </TreeItemLayout>
+      <Tree>
+        <TreeItem>
+          <TreeItemLayout>Tree Item</TreeItemLayout>
+          <Tree>
+            <TreeItem>
+              <TreeItemLayout>level 2, item 1</TreeItemLayout>
+            </TreeItem>
+            <TreeItem>
+              <TreeItemLayout>level 2, item 2</TreeItemLayout>
+            </TreeItem>
+            <TreeItem>
+              <TreeItemLayout>level 2, item 3</TreeItemLayout>
+            </TreeItem>
+          </Tree>
+        </TreeItem>
+        <TreeItem>
+          <TreeItemLayout>level 2, item 2</TreeItemLayout>
+        </TreeItem>
+        <TreeItem>
+          <TreeItemLayout>level 2, item 3</TreeItemLayout>
+        </TreeItem>
+      </Tree>
+    </TreeItem>
+    <TreeItem aria-description="Private">
+      <TreeItemLayout
+        iconBefore={<Image20Regular />}
+        iconAfter={
+          <>
+            <LockClosed20Regular />
+            <SquareMultiple20Regular />
+          </>
+        }
+        aside={<Important16Regular primaryFill="red" />}
+      >
+        Content
+      </TreeItemLayout>
+      <Tree>
+        <TreeItem>
+          <TreeItemLayout>level 2, item 1</TreeItemLayout>
+          <Tree>
+            <TreeItem>
+              <TreeItemLayout>level 3, item 1</TreeItemLayout>
+            </TreeItem>
+          </Tree>
+        </TreeItem>
+      </Tree>
+    </TreeItem>
+  </Tree>
+);
+
+Layout.parameters = {
+  docs: {
+    description: {
+      story,
+    },
+  },
+};
diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemLayoutAside.md b/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayoutAside.md
similarity index 79%
rename from packages/react-components/react-tree/stories/Layouts/TreeItemLayoutAside.md
rename to packages/react-components/react-tree/stories/C_Layouts/TreeItemLayoutAside.md
index 993f85a456f07b..79bcee802bbd0e 100644
--- a/packages/react-components/react-tree/stories/Layouts/TreeItemLayoutAside.md
+++ b/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayoutAside.md
@@ -1 +1,3 @@
 The `Tree` component allows for an `aside` prop to be added to individual `TreeItemLayout` or `TreeItemPersonaLayout` layout components. This creates an area on the right side of the `TreeItem` where additional information can be displayed, such as a badge with notification count or an icon indicating importance. When actions are specified using the `actions` prop, they will overlay the `aside` area on hover.
+
+> ⚠️ Aside content is `aria-hidden` by default in both `TreeItemLayout` and `TreeItemPersonaLayout`
diff --git a/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayoutAside.stories.tsx b/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayoutAside.stories.tsx
new file mode 100644
index 00000000000000..b164b80b12c778
--- /dev/null
+++ b/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayoutAside.stories.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-tree';
+import { CounterBadge } from '@fluentui/react-components';
+import { FluentIconsProps, Important16Regular } from '@fluentui/react-icons';
+import story from './TreeItemLayoutAside.md';
+
+const iconStyleProps: FluentIconsProps = {
+  primaryFill: 'red',
+};
+
+const AsideContent = ({ isImportant, messageCount }: { isImportant?: boolean; messageCount?: number }) => (
+  <>
+    {isImportant && <Important16Regular {...iconStyleProps} />}
+    {messageCount && messageCount > 0 && <CounterBadge count={messageCount} color="danger" size="small" />}
+  </>
+);
+
+export const Aside = () => (
+  <Tree aria-label="Tree">
+    <TreeItem aria-description="Important, 3 message">
+      <TreeItemLayout aside={<AsideContent isImportant={true} messageCount={3} />}>level 1, item 1</TreeItemLayout>
+      <Tree>
+        <TreeItem aria-description="Important">
+          <TreeItemLayout aside={<AsideContent isImportant={true} />}>level 2, item 1</TreeItemLayout>
+        </TreeItem>
+        <TreeItem aria-description="2 messages">
+          <TreeItemLayout aside={<AsideContent messageCount={2} />}>level 2, item 2</TreeItemLayout>
+        </TreeItem>
+        <TreeItem aria-description="1 messages">
+          <TreeItemLayout aside={<AsideContent messageCount={1} />}>level 2, item 3</TreeItemLayout>
+        </TreeItem>
+      </Tree>
+    </TreeItem>
+    <TreeItem aria-description="Important, 1 message">
+      <TreeItemLayout aside={<AsideContent isImportant={true} messageCount={1} />}>level 1, item 2</TreeItemLayout>
+      <Tree>
+        <TreeItem aria-description="1 message">
+          <TreeItemLayout aside={<AsideContent messageCount={1} />}>level 2, item 1</TreeItemLayout>
+          <Tree>
+            <TreeItem>
+              <TreeItemLayout aside={<AsideContent />}>level 3, item 1</TreeItemLayout>
+            </TreeItem>
+          </Tree>
+        </TreeItem>
+
+        <TreeItem aria-description="Important">
+          <TreeItemLayout aside={<AsideContent isImportant={true} />}>level 2, item 2</TreeItemLayout>
+          <Tree>
+            <TreeItem>
+              <TreeItemLayout>level 3, item 1</TreeItemLayout>
+            </TreeItem>
+            <TreeItem>
+              <TreeItemLayout>level 3, item 2</TreeItemLayout>
+            </TreeItem>
+            <TreeItem>
+              <TreeItemLayout>level 3, item 3</TreeItemLayout>
+            </TreeItem>
+          </Tree>
+        </TreeItem>
+      </Tree>
+    </TreeItem>
+  </Tree>
+);
+
+Aside.parameters = {
+  docs: {
+    description: {
+      story,
+    },
+  },
+};
diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemIconAfter.stories.tsx b/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayoutIconAfter.stories.tsx
similarity index 100%
rename from packages/react-components/react-tree/stories/TreeItem/TreeItemIconAfter.stories.tsx
rename to packages/react-components/react-tree/stories/C_Layouts/TreeItemLayoutIconAfter.stories.tsx
diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemIconBefore.md b/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayoutIconBefore.md
similarity index 100%
rename from packages/react-components/react-tree/stories/TreeItem/TreeItemIconBefore.md
rename to packages/react-components/react-tree/stories/C_Layouts/TreeItemLayoutIconBefore.md
diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemIconBefore.stories.tsx b/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayoutIconBefore.stories.tsx
similarity index 95%
rename from packages/react-components/react-tree/stories/TreeItem/TreeItemIconBefore.stories.tsx
rename to packages/react-components/react-tree/stories/C_Layouts/TreeItemLayoutIconBefore.stories.tsx
index 3f48f39de41687..e682ab6faa47e2 100644
--- a/packages/react-components/react-tree/stories/TreeItem/TreeItemIconBefore.stories.tsx
+++ b/packages/react-components/react-tree/stories/C_Layouts/TreeItemLayoutIconBefore.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-tree';
 import { Image20Regular } from '@fluentui/react-icons';
-import story from './TreeItemIconBefore.md';
+import story from './TreeItemLayoutIconBefore.md';
 
 export const IconBefore = () => {
   return (
diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayout.md b/packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayout.md
similarity index 100%
rename from packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayout.md
rename to packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayout.md
diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayout.stories.tsx b/packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayout.stories.tsx
similarity index 59%
rename from packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayout.stories.tsx
rename to packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayout.stories.tsx
index 8a7b3a94cec786..5fecd6750fe646 100644
--- a/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayout.stories.tsx
+++ b/packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayout.stories.tsx
@@ -1,19 +1,7 @@
 import * as React from 'react';
-import {
-  Avatar,
-  Button,
-  CounterBadge,
-  Menu,
-  MenuItem,
-  MenuList,
-  MenuPopover,
-  MenuTrigger,
-  makeStyles,
-  shorthands,
-  tokens,
-} from '@fluentui/react-components';
+import { Avatar, CounterBadge, makeStyles, shorthands, tokens } from '@fluentui/react-components';
 import { Tree, TreeItem, TreeItemPersonaLayout } from '@fluentui/react-tree';
-import { Flag20Regular, FluentIconsProps, Important16Regular, MoreHorizontal20Regular } from '@fluentui/react-icons';
+import { Important16Regular } from '@fluentui/react-icons';
 import story from './TreeItemPersonaLayout.md';
 
 const useBadgeStyles = makeStyles({
@@ -26,56 +14,22 @@ const useBadgeStyles = makeStyles({
   },
 });
 
-const useStyles = makeStyles({
-  unread: {
-    fontWeight: 'bold',
-  },
-});
-
-const iconStyleProps: FluentIconsProps = {
-  primaryFill: 'red',
-};
-
 const Badges = () => {
   const badgeStyles = useBadgeStyles();
   return (
     <div className={badgeStyles.base}>
-      <Important16Regular {...iconStyleProps} />
+      <Important16Regular primaryFill="red" />
       <CounterBadge count={1} color="danger" size="small" />
     </div>
   );
 };
 
-const RenderActions = () => {
-  return (
-    <>
-      <Button aria-label="Report" appearance="subtle" icon={<Flag20Regular />} />
-      <Menu>
-        <MenuTrigger disableButtonEnhancement>
-          <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontal20Regular />} />
-        </MenuTrigger>
-
-        <MenuPopover>
-          <MenuList>
-            <MenuItem>New </MenuItem>
-            <MenuItem>New Window</MenuItem>
-            <MenuItem disabled>Open File</MenuItem>
-            <MenuItem>Open Folder</MenuItem>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </>
-  );
-};
-
-export const TreePersonaLayout = () => {
-  const styles = useStyles();
-
+export const Layout = () => {
   return (
     <Tree aria-label="Tree">
-      <TreeItem aria-description="1 new message, important" actions={<RenderActions />}>
+      <TreeItem aria-description="1 new message, important">
         <TreeItemPersonaLayout
-          description={<div className={styles.unread}>Secondary text slot</div>}
+          description="Secondary text slot"
           aside={
             <>
               <span>00:00 AM</span>
@@ -84,7 +38,7 @@ export const TreePersonaLayout = () => {
           }
           media={<Avatar />}
         >
-          <div className={styles.unread}>Primary text slot</div>
+          Primary text slot
         </TreeItemPersonaLayout>
         <Tree>
           <TreeItem>
@@ -101,7 +55,7 @@ export const TreePersonaLayout = () => {
           </TreeItem>
         </Tree>
       </TreeItem>
-      <TreeItem aria-description="1 message, important" actions={<RenderActions />}>
+      <TreeItem aria-description="1 message, important">
         <TreeItemPersonaLayout
           description="Secondary text slot"
           aside={
@@ -134,7 +88,7 @@ export const TreePersonaLayout = () => {
   );
 };
 
-TreePersonaLayout.parameters = {
+Layout.parameters = {
   docs: {
     description: {
       story,
diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutDefault.stories.tsx b/packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayoutDefault.stories.tsx
similarity index 100%
rename from packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutDefault.stories.tsx
rename to packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayoutDefault.stories.tsx
diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutDescription.md b/packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayoutDescription.md
similarity index 100%
rename from packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutDescription.md
rename to packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayoutDescription.md
diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutMedia.md b/packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayoutMedia.md
similarity index 100%
rename from packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutMedia.md
rename to packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayoutMedia.md
diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutMedia.stories.tsx b/packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayoutMedia.stories.tsx
similarity index 100%
rename from packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutMedia.stories.tsx
rename to packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayoutMedia.stories.tsx
diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutReadUnread.md b/packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayoutReadUnread.md
similarity index 100%
rename from packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutReadUnread.md
rename to packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayoutReadUnread.md
diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutReadUnread.stories.tsx b/packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayoutReadUnread.stories.tsx
similarity index 73%
rename from packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutReadUnread.stories.tsx
rename to packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayoutReadUnread.stories.tsx
index 1b645c8592cfe7..b81f62c813545a 100644
--- a/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutReadUnread.stories.tsx
+++ b/packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayoutReadUnread.stories.tsx
@@ -5,7 +5,7 @@ import story from './TreeItemPersonaLayoutReadUnread.md';
 
 const useStyles = makeStyles({
   unread: {
-    fontWeight: tokens.fontWeightSemibold,
+    fontWeight: tokens.fontWeightBold,
   },
 });
 
@@ -14,17 +14,18 @@ export const ReadUnread = () => {
 
   return (
     <Tree aria-label="Tree">
-      <TreeItem>
+      <TreeItem expandIcon="">
         <TreeItemPersonaLayout description="Secondary text content" media={<Avatar />}>
           Read content message
         </TreeItemPersonaLayout>
       </TreeItem>
-      <TreeItem aria-description="New message">
+      <TreeItem expandIcon="•" aria-description="New message">
         <TreeItemPersonaLayout
-          description={<div className={styles.unread}>Secondary text content</div>}
+          description={{ className: styles.unread, children: 'Secondary text content' }}
+          className={styles.unread}
           media={<Avatar />}
         >
-          <div className={styles.unread}>Unread content message</div>
+          Unread content message
         </TreeItemPersonaLayout>
       </TreeItem>
     </Tree>
diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutWithDescription.md b/packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayoutWithDescription.md
similarity index 100%
rename from packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutWithDescription.md
rename to packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayoutWithDescription.md
diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutWithDescription.stories.tsx b/packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayoutWithDescription.stories.tsx
similarity index 100%
rename from packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutWithDescription.stories.tsx
rename to packages/react-components/react-tree/stories/C_Layouts/TreeItemPersonaLayoutWithDescription.stories.tsx
diff --git a/packages/react-components/react-tree/stories/Layouts/description.md b/packages/react-components/react-tree/stories/C_Layouts/description.md
similarity index 66%
rename from packages/react-components/react-tree/stories/Layouts/description.md
rename to packages/react-components/react-tree/stories/C_Layouts/description.md
index 84d5122c05da1c..2388f533089c09 100644
--- a/packages/react-components/react-tree/stories/Layouts/description.md
+++ b/packages/react-components/react-tree/stories/C_Layouts/description.md
@@ -2,4 +2,17 @@ The `TreeItem` component allows for flexible display of items in a tree structur
 
 The `TreeItemLayout` component is designed to provide a consistent and functional structure for displaying a tree item. It defines the content and layout of the item in a simple and straightforward manner. This layout is ideal for displaying information about items that do not require additional visual elements, such as files or folders in a file system.
 
-On the other hand, the `TreeItemPersonaLayout` component provides a more visually appealing representation of a tree item by including a media element, typically an avatar, alongside a description. This layout is perfect for displaying lists of people or topics, where the media element can represent an individual or a topic icon. As with `TreeItemLayout`, `TreeItemPersonaLayout` should only be used as a direct child of TreeItem.
+On the other hand, the `TreeItemPersonaLayout` component provides a more visually appealing representation of a tree item by including a media element, typically an avatar, alongside a description. This layout is perfect for displaying lists of people or topics, where the media element can represent an individual or a topic icon. As with `TreeItemLayout`, `TreeItemPersonaLayout` should only be used as a direct child of `TreeItem`.
+
+<!-- Don't allow prettier to collapse code block into single line -->
+<!-- prettier-ignore -->
+> **⚠️ Preview components are considered unstable:**
+>
+> ```jsx
+>
+> import { Tree, TreeItem, TreeItemLayout, TreeItemPersonaLayout } from '@fluentui/react-components/unstable';
+>
+> ```
+>
+> - Features and APIs may change before final release
+> - Please contact us if you intend to use this in your product
diff --git a/packages/react-components/react-tree/stories/Layouts/index.stories.tsx b/packages/react-components/react-tree/stories/C_Layouts/index.stories.tsx
similarity index 60%
rename from packages/react-components/react-tree/stories/Layouts/index.stories.tsx
rename to packages/react-components/react-tree/stories/C_Layouts/index.stories.tsx
index 1e6036662837c6..c487f4b2c5750d 100644
--- a/packages/react-components/react-tree/stories/Layouts/index.stories.tsx
+++ b/packages/react-components/react-tree/stories/C_Layouts/index.stories.tsx
@@ -1,18 +1,19 @@
 import { TreeItemLayout, TreeItemPersonaLayout } from '@fluentui/react-tree';
 import descriptionMd from './description.md';
 
-export { DefaultTreeItemLayout } from './TreeItemLayoutDefault.stories';
-export { DefaultTreeItemPersonaLayout } from './TreeItemPersonaLayoutDefault.stories';
+export { Default } from './LayoutsDefault.stories';
+export { Layout as TreeItemLayout } from './TreeItemLayout.stories';
 export { Aside } from './TreeItemLayoutAside.stories';
+export { IconBefore } from './TreeItemLayoutIconBefore.stories';
+export { IconAfter } from './TreeItemLayoutIconAfter.stories';
+export { Layout as TreeItemPersonaLayout } from './TreeItemPersonaLayout.stories';
 export { Media } from './TreeItemPersonaLayoutMedia.stories';
 export { WithDescription } from './TreeItemPersonaLayoutWithDescription.stories';
 export { ReadUnread } from './TreeItemPersonaLayoutReadUnread.stories';
-export { Layout } from './TreeItemLayout.stories';
-export { TreePersonaLayout } from './TreeItemPersonaLayout.stories';
 
 export default {
   title: 'Preview Components/Tree/Layouts',
-  component: [TreeItemPersonaLayout, TreeItemLayout],
+  subcomponents: { TreeItemLayout, TreeItemPersonaLayout },
   parameters: {
     docs: {
       description: {
diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemAddRemove.md b/packages/react-components/react-tree/stories/D_flatTree/TreeItemAddRemove.md
similarity index 100%
rename from packages/react-components/react-tree/stories/TreeItem/TreeItemAddRemove.md
rename to packages/react-components/react-tree/stories/D_flatTree/TreeItemAddRemove.md
diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemAddRemove.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/TreeItemAddRemove.stories.tsx
similarity index 100%
rename from packages/react-components/react-tree/stories/TreeItem/TreeItemAddRemove.stories.tsx
rename to packages/react-components/react-tree/stories/D_flatTree/TreeItemAddRemove.stories.tsx
diff --git a/packages/react-components/react-tree/stories/Tree/Virtualization.md b/packages/react-components/react-tree/stories/D_flatTree/Virtualization.md
similarity index 100%
rename from packages/react-components/react-tree/stories/Tree/Virtualization.md
rename to packages/react-components/react-tree/stories/D_flatTree/Virtualization.md
diff --git a/packages/react-components/react-tree/stories/Tree/Virtualization.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/Virtualization.stories.tsx
similarity index 100%
rename from packages/react-components/react-tree/stories/Tree/Virtualization.stories.tsx
rename to packages/react-components/react-tree/stories/D_flatTree/Virtualization.stories.tsx
diff --git a/packages/react-components/react-tree/stories/D_flatTree/flatTreeBestPractices.md b/packages/react-components/react-tree/stories/D_flatTree/flatTreeBestPractices.md
new file mode 100644
index 00000000000000..7c4a092b6ae14b
--- /dev/null
+++ b/packages/react-components/react-tree/stories/D_flatTree/flatTreeBestPractices.md
@@ -0,0 +1,14 @@
+<details>
+<summary>
+ Best Practices
+</summary>
+
+### Do
+
+TODO: add here a list with do's
+
+### Don't
+
+TODO: add here a list with don'ts
+
+</details>
diff --git a/packages/react-components/react-tree/stories/D_flatTree/flatTreeDescription.md b/packages/react-components/react-tree/stories/D_flatTree/flatTreeDescription.md
new file mode 100644
index 00000000000000..3676e83f80631d
--- /dev/null
+++ b/packages/react-components/react-tree/stories/D_flatTree/flatTreeDescription.md
@@ -0,0 +1,12 @@
+<!-- Don't allow prettier to collapse code block into single line -->
+<!-- prettier-ignore -->
+> **⚠️ Preview components are considered unstable:**
+>
+> ```jsx
+>
+> import { useFlatTree_unstable, flattenTree_unstable } from '@fluentui/react-components/unstable';
+>
+> ```
+>
+> - Features and APIs may change before final release
+> - Please contact us if you intend to use this in your product
diff --git a/packages/react-components/react-tree/stories/Tree/flattenTree.md b/packages/react-components/react-tree/stories/D_flatTree/flattenTree.md
similarity index 100%
rename from packages/react-components/react-tree/stories/Tree/flattenTree.md
rename to packages/react-components/react-tree/stories/D_flatTree/flattenTree.md
diff --git a/packages/react-components/react-tree/stories/Tree/flattenTree.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/flattenTree.stories.tsx
similarity index 100%
rename from packages/react-components/react-tree/stories/Tree/flattenTree.stories.tsx
rename to packages/react-components/react-tree/stories/D_flatTree/flattenTree.stories.tsx
diff --git a/packages/react-components/react-tree/stories/D_flatTree/index.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/index.stories.tsx
new file mode 100644
index 00000000000000..a054b8503018f6
--- /dev/null
+++ b/packages/react-components/react-tree/stories/D_flatTree/index.stories.tsx
@@ -0,0 +1,18 @@
+import descriptionMd from './flatTreeDescription.md';
+import bestPracticesMd from './flatTreeBestPractices.md';
+
+export { UseFlatTree as Default } from './useFlatTree.stories';
+export { FlattenTree as flattenTree } from './flattenTree.stories';
+export { Virtualization } from './Virtualization.stories';
+export { AddRemoveTreeItem } from './TreeItemAddRemove.stories';
+
+export default {
+  title: 'Preview Components/Tree/flatTree',
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd, bestPracticesMd].join('\n'),
+      },
+    },
+  },
+};
diff --git a/packages/react-components/react-tree/stories/Tree/useFlatTree.md b/packages/react-components/react-tree/stories/D_flatTree/useFlatTree.md
similarity index 100%
rename from packages/react-components/react-tree/stories/Tree/useFlatTree.md
rename to packages/react-components/react-tree/stories/D_flatTree/useFlatTree.md
diff --git a/packages/react-components/react-tree/stories/Tree/useFlatTree.stories.tsx b/packages/react-components/react-tree/stories/D_flatTree/useFlatTree.stories.tsx
similarity index 100%
rename from packages/react-components/react-tree/stories/Tree/useFlatTree.stories.tsx
rename to packages/react-components/react-tree/stories/D_flatTree/useFlatTree.stories.tsx
diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemLayout.md b/packages/react-components/react-tree/stories/Layouts/TreeItemLayout.md
deleted file mode 100644
index da5e107408907b..00000000000000
--- a/packages/react-components/react-tree/stories/Layouts/TreeItemLayout.md
+++ /dev/null
@@ -1 +0,0 @@
-You can combine multiple props to customize the appearance and behavior of a `Tree` component. It includes the use of `icons`, `badges`, `actions`, and layouts, which can be composed together to create a more complex and flexible user interface.
diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemLayout.stories.tsx b/packages/react-components/react-tree/stories/Layouts/TreeItemLayout.stories.tsx
deleted file mode 100644
index e4c18236396efa..00000000000000
--- a/packages/react-components/react-tree/stories/Layouts/TreeItemLayout.stories.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import * as React from 'react';
-import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-tree';
-import {
-  Flag20Regular,
-  FluentIconsProps,
-  Image20Regular,
-  Important16Regular,
-  LockClosed20Regular,
-  MoreHorizontal20Regular,
-  SquareMultiple20Regular,
-} from '@fluentui/react-icons';
-import { Button, CounterBadge, Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-components';
-import story from './TreeItemLayout.md';
-
-const iconStyleProps: FluentIconsProps = {
-  primaryFill: 'red',
-};
-
-const Badges = ({ isImportant, messageCount }: { isImportant?: boolean; messageCount?: number }) => (
-  <>
-    {isImportant && <Important16Regular {...iconStyleProps} />}
-    {messageCount && messageCount > 0 && <CounterBadge count={messageCount} color="danger" size="small" />}
-  </>
-);
-
-const RenderIconsAfter = () => (
-  <>
-    <LockClosed20Regular />
-    <SquareMultiple20Regular />
-  </>
-);
-
-const Actions = () => (
-  <>
-    <Button aria-label="Report" appearance="subtle" icon={<Flag20Regular />} />
-    <Menu>
-      <MenuTrigger disableButtonEnhancement>
-        <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontal20Regular />} />
-      </MenuTrigger>
-
-      <MenuPopover>
-        <MenuList>
-          <MenuItem>New </MenuItem>
-          <MenuItem>New Window</MenuItem>
-          <MenuItem disabled>Open File</MenuItem>
-          <MenuItem>Open Folder</MenuItem>
-        </MenuList>
-      </MenuPopover>
-    </Menu>
-  </>
-);
-
-const treeItemLayoutProps = {
-  iconBefore: <Image20Regular />,
-  iconAfter: <RenderIconsAfter />,
-};
-
-export const Layout = () => (
-  <Tree aria-label="Tree">
-    <TreeItem aria-description="Private, 1 message" actions={<Actions />}>
-      <TreeItemLayout {...treeItemLayoutProps} aside={<Badges isImportant={true} messageCount={1} />}>
-        Content
-      </TreeItemLayout>
-      <Tree>
-        <TreeItem actions={<Actions />}>
-          <TreeItemLayout>Tree Item</TreeItemLayout>
-          <Tree>
-            <TreeItem>
-              <TreeItemLayout>level 2, item 1</TreeItemLayout>
-            </TreeItem>
-            <TreeItem>
-              <TreeItemLayout>level 2, item 2</TreeItemLayout>
-            </TreeItem>
-            <TreeItem>
-              <TreeItemLayout>level 2, item 3</TreeItemLayout>
-            </TreeItem>
-          </Tree>
-        </TreeItem>
-        <TreeItem>
-          <TreeItemLayout>level 2, item 2</TreeItemLayout>
-        </TreeItem>
-        <TreeItem>
-          <TreeItemLayout>level 2, item 3</TreeItemLayout>
-        </TreeItem>
-      </Tree>
-    </TreeItem>
-    <TreeItem aria-description="Private" actions={<Actions />}>
-      <TreeItemLayout {...treeItemLayoutProps} aside={<Important16Regular {...iconStyleProps} />}>
-        Content
-      </TreeItemLayout>
-      <Tree>
-        <TreeItem actions={<Actions />}>
-          <TreeItemLayout>level 2, item 1</TreeItemLayout>
-          <Tree>
-            <TreeItem>
-              <TreeItemLayout>level 3, item 1</TreeItemLayout>
-            </TreeItem>
-          </Tree>
-        </TreeItem>
-      </Tree>
-    </TreeItem>
-  </Tree>
-);
-
-Layout.parameters = {
-  docs: {
-    description: {
-      story,
-    },
-  },
-};
diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemLayoutAside.stories.tsx b/packages/react-components/react-tree/stories/Layouts/TreeItemLayoutAside.stories.tsx
deleted file mode 100644
index 4b3ba588c7dd4f..00000000000000
--- a/packages/react-components/react-tree/stories/Layouts/TreeItemLayoutAside.stories.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import * as React from 'react';
-import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-tree';
-import { Button, CounterBadge } from '@fluentui/react-components';
-import { Edit20Regular, FluentIconsProps, Important16Regular, MoreHorizontal20Regular } from '@fluentui/react-icons';
-import story from './TreeItemLayoutAside.md';
-
-const iconStyleProps: FluentIconsProps = {
-  primaryFill: 'red',
-};
-
-const RenderAside = ({ isImportant, messageCount }: { isImportant?: boolean; messageCount?: number }) => (
-  <>
-    {isImportant && <Important16Regular {...iconStyleProps} />}
-    {messageCount && messageCount > 0 && <CounterBadge count={messageCount} color="danger" size="small" />}
-  </>
-);
-
-const Actions = () => (
-  <>
-    <Button appearance="subtle" icon={<Edit20Regular aria-label="Edit" />} />
-    <Button appearance="subtle" icon={<MoreHorizontal20Regular aria-label="More options" />} />
-  </>
-);
-
-export const Aside = () => (
-  <Tree aria-label="Tree">
-    <TreeItem aria-description="Important, 3 message">
-      <TreeItemLayout aside={<RenderAside isImportant={true} messageCount={3} />}>level 1, item 1</TreeItemLayout>
-      <Tree>
-        <TreeItem aria-description="Important" actions={<Actions />}>
-          <TreeItemLayout aside={<RenderAside isImportant={true} />}>level 2, item 1</TreeItemLayout>
-        </TreeItem>
-        <TreeItem aria-description="2 messages" actions={<Actions />}>
-          <TreeItemLayout aside={<RenderAside messageCount={2} />}>level 2, item 2</TreeItemLayout>
-        </TreeItem>
-        <TreeItem aria-description="1 messages" actions={<Actions />}>
-          <TreeItemLayout aside={<RenderAside messageCount={1} />}>level 2, item 3</TreeItemLayout>
-        </TreeItem>
-      </Tree>
-    </TreeItem>
-    <TreeItem aria-description="Important, 1 message">
-      <TreeItemLayout aside={<RenderAside isImportant={true} messageCount={1} />}>level 1, item 2</TreeItemLayout>
-      <Tree>
-        <TreeItem aria-description="1 message" actions={<Actions />}>
-          <TreeItemLayout aside={<RenderAside messageCount={1} />}>level 2, item 1</TreeItemLayout>
-          <Tree>
-            <TreeItem actions={<Actions />}>
-              <TreeItemLayout aside={<RenderAside />}>level 3, item 1</TreeItemLayout>
-            </TreeItem>
-          </Tree>
-        </TreeItem>
-
-        <TreeItem aria-description="Important" actions={<Actions />}>
-          <TreeItemLayout aside={<RenderAside isImportant={true} />}>level 2, item 2</TreeItemLayout>
-          <Tree>
-            <TreeItem actions={<Actions />}>
-              <TreeItemLayout>level 3, item 1</TreeItemLayout>
-            </TreeItem>
-            <TreeItem actions={<Actions />}>
-              <TreeItemLayout>level 3, item 2</TreeItemLayout>
-            </TreeItem>
-            <TreeItem actions={<Actions />}>
-              <TreeItemLayout>level 3, item 3</TreeItemLayout>
-            </TreeItem>
-          </Tree>
-        </TreeItem>
-      </Tree>
-    </TreeItem>
-  </Tree>
-);
-
-Aside.parameters = {
-  docs: {
-    description: {
-      story,
-    },
-  },
-};
diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemLayoutDefault.stories.tsx b/packages/react-components/react-tree/stories/Layouts/TreeItemLayoutDefault.stories.tsx
deleted file mode 100644
index c06f819cbf1773..00000000000000
--- a/packages/react-components/react-tree/stories/Layouts/TreeItemLayoutDefault.stories.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-tree';
-
-export const DefaultTreeItemLayout = () => {
-  return (
-    <Tree aria-label="Tree">
-      <TreeItem>
-        <TreeItemLayout>level 1, item 1</TreeItemLayout>
-        <Tree>
-          <TreeItem>
-            <TreeItemLayout>level 2, item 1</TreeItemLayout>
-          </TreeItem>
-          <TreeItem>
-            <TreeItemLayout>level 2, item 2</TreeItemLayout>
-          </TreeItem>
-          <TreeItem>
-            <TreeItemLayout>level 2, item 3</TreeItemLayout>
-          </TreeItem>
-        </Tree>
-      </TreeItem>
-      <TreeItem>
-        <TreeItemLayout>level 1, item 2</TreeItemLayout>
-        <Tree>
-          <TreeItem>
-            <TreeItemLayout>level 2, item 1</TreeItemLayout>
-            <Tree>
-              <TreeItem>
-                <TreeItemLayout>level 3, item 1</TreeItemLayout>
-              </TreeItem>
-            </Tree>
-          </TreeItem>
-        </Tree>
-      </TreeItem>
-    </Tree>
-  );
-};