diff --git a/change/@fluentui-react-tree-b5db8474-a1ba-4ec8-9c42-18215b9e2632.json b/change/@fluentui-react-tree-b5db8474-a1ba-4ec8-9c42-18215b9e2632.json
new file mode 100644
index 0000000000000..c810e568d80b3
--- /dev/null
+++ b/change/@fluentui-react-tree-b5db8474-a1ba-4ec8-9c42-18215b9e2632.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: delegate focus outline to layout components",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.styles.ts b/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.styles.ts
index 60133a89f2963..4e9998baf8a94 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.styles.ts
+++ b/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.styles.ts
@@ -1,9 +1,11 @@
-import { GriffelStyle, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { GriffelStyle, makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { TreeItemCSSProperties, TreeItemSlots, TreeItemState } from './TreeItem.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
-import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { treeItemLevelToken } from '../../utils/tokens';
+import { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';
+import { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';
 
 export const treeItemClassNames: SlotClassNames<TreeItemSlots> = {
   root: 'fui-TreeItem',
@@ -18,7 +20,28 @@ const useBaseStyles = makeResetStyles({
   backgroundColor: tokens.colorSubtleBackground,
   color: tokens.colorNeutralForeground2,
   paddingRight: tokens.spacingHorizontalNone,
-  ...createFocusOutlineStyle(),
+  // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser
+  ':focus': {
+    outlineStyle: 'none',
+  },
+  ':focus-visible': {
+    outlineStyle: 'none',
+  },
+  // This adds the focus outline for the TreeItemLayout element
+  ...createCustomFocusIndicatorStyle(
+    {
+      ...shorthands.borderRadius(tokens.borderRadiusMedium),
+      outlineColor: tokens.colorStrokeFocus2,
+      outlineRadius: tokens.borderRadiusMedium,
+      // FIXME: tokens.strokeWidthThick causes some weird bugs
+      outlineWidth: '2px',
+      outlineStyle: 'solid',
+    },
+    {
+      customizeSelector: selector =>
+        `${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`,
+    },
+  ),
 });
 
 type StaticLevel = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts b/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts
index a9b8ee6500229..3fd3930db02cc 100644
--- a/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts
+++ b/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts
@@ -23,7 +23,6 @@ const useRootBaseStyles = makeResetStyles({
   minHeight: '32px',
   boxSizing: 'border-box',
   ...shorthands.gridArea('layout'),
-  ...shorthands.borderRadius(tokens.borderRadiusMedium),
   ':active': {
     color: tokens.colorNeutralForeground2Pressed,
     backgroundColor: tokens.colorSubtleBackgroundPressed,