diff --git a/packages/components/src/tree/boards/consts.ts b/packages/components/src/tree/boards/consts.ts
new file mode 100644
index 00000000..491d536f
--- /dev/null
+++ b/packages/components/src/tree/boards/consts.ts
@@ -0,0 +1,3 @@
+export const FOCUSED_STYLE = { color: 'rgb(65, 105, 225)' };
+export const SELECTED_STYLE = { backgroundColor: 'rgb(176, 224, 230)' };
+export const DEFAULT_STYLE = { color: 'rgb(0, 0, 0)' };
diff --git a/packages/components/src/tree/boards/tree-focus.board.tsx b/packages/components/src/tree/boards/tree-focus.board.tsx
index 88801c74..a54f4601 100644
--- a/packages/components/src/tree/boards/tree-focus.board.tsx
+++ b/packages/components/src/tree/boards/tree-focus.board.tsx
@@ -13,6 +13,7 @@ import {
     scenarioPlugin,
 } from '../../board-plugins/index.js';
 import { KeyCodes } from '../../common/index.js';
+import { DEFAULT_STYLE, FOCUSED_STYLE } from './consts.js';
 
 const data: TreeItemData = {
     id: '1',
@@ -70,13 +71,13 @@ export default createBoard({
                 expectElement('[data-id="2"]'),
                 hoverAction('[data-id="3"]'),
                 keyDownAction('[data-id="1"]', KeyCodes.ArrowDown, 40),
-                expectElementStyle('[data-id="2"]', { color: 'rgb(0, 0, 255)' }), //blue (focused)
+                expectElementStyle('[data-id="2"]', FOCUSED_STYLE), // blue (focused)
                 clickAction('#clear'),
-                expectElementStyle('[data-id="2"]', { color: 'rgb(0, 0, 0)' }), //black (not focused)
+                expectElementStyle('[data-id="2"]', DEFAULT_STYLE), // not focused
                 clickAction('#select'),
                 focusAction('#LIST'),
                 keyDownAction('[data-id="5"]', KeyCodes.ArrowDown, 40),
-                expectElementStyle('[data-id="6"]', { color: 'rgb(0, 0, 255)' }), //blue (focused)
+                expectElementStyle('[data-id="6"]', FOCUSED_STYLE), // blue (focused)
             ],
         }),
     ],
diff --git a/packages/components/src/tree/boards/tree-keyboard.board.tsx b/packages/components/src/tree/boards/tree-keyboard.board.tsx
index c1ec1146..1d7151a3 100644
--- a/packages/components/src/tree/boards/tree-keyboard.board.tsx
+++ b/packages/components/src/tree/boards/tree-keyboard.board.tsx
@@ -11,26 +11,13 @@ import {
     scenarioPlugin,
 } from '../../board-plugins/index.js';
 import { KeyCodes } from '../../common/index.js';
+import { FOCUSED_STYLE, SELECTED_STYLE } from './consts.js';
 
 const data: TreeItemData = {
     id: '1',
     title: 'item 1',
     children: [
-        {
-            id: '2',
-            title: 'item 2',
-            children: [
-                {
-                    id: '2.1',
-                    title: 'item 2.1',
-                    children: [
-                        { id: '2.1.1', title: 'item 2.1.1' },
-                        { id: '2.1.2', title: 'item 2.1.2' },
-                        { id: '2.1.3', title: 'item 2.1.3' },
-                    ],
-                },
-            ],
-        },
+        { id: '2', title: 'item 2' },
         { id: '3', title: 'item 3' },
         { id: '4', title: 'item 4' },
         { id: '5', title: 'item 5' },
@@ -55,7 +42,6 @@ export default createBoard({
                     props: {
                         ref: scrollRef,
                         id: 'LIST',
-                        style: { outline: 'none', width: '12rem' },
                     },
                 }}
                 eventRoots={[scrollRef]}
@@ -70,15 +56,15 @@ export default createBoard({
                 keyDownAction('#LIST', KeyCodes.ArrowRight, 39),
                 expectElement('[data-id="2"]'),
                 keyDownAction('[data-id="1"]', KeyCodes.ArrowDown, 40),
-                expectElementStyle('[data-id="2"]', { color: 'rgb(0, 0, 255)' }), //blue (focused)
+                expectElementStyle('[data-id="2"]', FOCUSED_STYLE), //blue (focused)
                 keyDownAction('[data-id="2"]', KeyCodes.Space, 32),
-                expectElementStyle('[data-id="2"]', { textDecorationLine: 'underline' }),
+                expectElementStyle('[data-id="2"]', SELECTED_STYLE),
                 keyDownAction('[data-id="2"]', KeyCodes.Home, 36),
-                expectElementStyle('[data-id="1"]', { color: 'rgb(0, 0, 255)' }), //blue (focused)
+                expectElementStyle('[data-id="1"]', FOCUSED_STYLE), //blue (focused)
                 keyDownAction('[data-id="1"]', KeyCodes.End, 35),
-                expectElementStyle('[data-id="6"]', { color: 'rgb(0, 0, 255)' }), //blue (focused)
+                expectElementStyle('[data-id="6"]', FOCUSED_STYLE), //blue (focused)
                 keyDownAction('[data-id="6"]', KeyCodes.Enter, 13),
-                expectElementStyle('[data-id="6"]', { textDecorationLine: 'underline' }), //selected
+                expectElementStyle('[data-id="6"]', SELECTED_STYLE), // selected
             ],
         }),
     ],
diff --git a/packages/components/src/tree/boards/tree-multi-selection.tsx b/packages/components/src/tree/boards/tree-multi-selection.tsx
new file mode 100644
index 00000000..58d1d70c
--- /dev/null
+++ b/packages/components/src/tree/boards/tree-multi-selection.tsx
@@ -0,0 +1,81 @@
+import { createBoard } from '@wixc3/react-board';
+import React, { useRef, useState } from 'react';
+import { Tree } from '../tree.js';
+import { TreeItemData } from '../../board-assets/index.js';
+import { TreeItemRenderer } from '../../board-assets/tree-items/tree-item-renderer.js';
+
+const data: TreeItemData = {
+    id: '1',
+    title: 'item 1',
+    children: [
+        {
+            id: '2',
+            title: 'item 2',
+            children: [
+                {
+                    id: '2.1',
+                    title: 'item 2.1',
+                    children: [
+                        { id: '2.1.1', title: 'item 2.1.1' },
+                        { id: '2.1.2', title: 'item 2.1.2' },
+                        { id: '2.1.3', title: 'item 2.1.3' },
+                    ],
+                },
+            ],
+        },
+        { id: '3', title: 'item 3' },
+        { id: '4', title: 'item 4' },
+        { id: '5', title: 'item 5' },
+        { id: '6', title: 'item 6' },
+    ],
+};
+
+export default createBoard({
+    name: 'Tree multi-selection',
+    Board: () => {
+        const openItemsControl = useState<string[]>([]);
+        const scrollRef = useRef<HTMLDivElement>(null);
+        return (
+            <Tree<typeof data>
+                data={data}
+                getId={(it) => it.id}
+                ItemRenderer={TreeItemRenderer}
+                getChildren={(it) => it.children || []}
+                openItemsControls={openItemsControl}
+                overlay={{ el: () => null, props: {} }}
+                listRoot={{
+                    props: {
+                        ref: scrollRef,
+                        id: 'LIST',
+                        style: { outline: 'none', width: '12rem' },
+                    },
+                }}
+                eventRoots={[scrollRef]}
+            />
+        );
+    },
+    // plugins: [
+    //     scenarioPlugin.use({
+    //         title: 'tree focus test',
+    //         events: [
+    //             clickAction('[data-id="1"]'),
+    //             keyDownAction('#LIST', KeyCodes.ArrowRight, 39),
+    //             expectElement('[data-id="2"]'),
+    //             keyDownAction('[data-id="1"]', KeyCodes.ArrowDown, 40),
+    //             expectElementStyle('[data-id="2"]', { color: 'rgb(0, 0, 255)' }), //blue (focused)
+    //             keyDownAction('[data-id="2"]', KeyCodes.Space, 32),
+    //             expectElementStyle('[data-id="2"]', { textDecorationLine: 'underline' }),
+    //             keyDownAction('[data-id="2"]', KeyCodes.Home, 36),
+    //             expectElementStyle('[data-id="1"]', { color: 'rgb(0, 0, 255)' }), //blue (focused)
+    //             keyDownAction('[data-id="1"]', KeyCodes.End, 35),
+    //             expectElementStyle('[data-id="6"]', { color: 'rgb(0, 0, 255)' }), //blue (focused)
+    //             keyDownAction('[data-id="6"]', KeyCodes.Enter, 13),
+    //             expectElementStyle('[data-id="6"]', { textDecorationLine: 'underline' }), //selected
+    //         ],
+    //     }),
+    // ],
+    environmentProps: {
+        windowWidth: 600,
+        windowHeight: 400,
+    },
+});