diff --git a/buildtime/client/logical-editor/src/components/PropertySideBar.jsx b/buildtime/client/logical-editor/src/components/PropertySideBar.jsx
new file mode 100644
index 000000000..8527c6213
--- /dev/null
+++ b/buildtime/client/logical-editor/src/components/PropertySideBar.jsx
@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import { useState } from 'react';
+import { Tree } from 'react-arborist';
+import TreeView from './TreeView';
+
+const PropertySideBar = ({ properties, setUpdate }) => {
+ return (
+
+ );
+};
+
+export default PropertySideBar;
+
diff --git a/buildtime/client/logical-editor/src/components/TreeView.jsx b/buildtime/client/logical-editor/src/components/TreeView.jsx
new file mode 100644
index 000000000..3dc319e3d
--- /dev/null
+++ b/buildtime/client/logical-editor/src/components/TreeView.jsx
@@ -0,0 +1,29 @@
+import {Tree} from 'react-arborist';
+
+const TreeView = ({ data, setUpdate }) => {
+ return (
+
+ {Node}
+
+ );
+};
+
+const Node = ({ node, style, dragHandle, tree }) => {
+ console.log(node, tree);
+
+ return (
+
{setUpdate(prev => !prev); node.toggle()}}>
+ {node.isLeaf ? "📄" : node.isOpen ? "📂" : "📁"}
+ {node.data.label}
+
+ );
+};
+
+export default TreeView;
+
+
diff --git a/buildtime/client/logical-editor/src/pages/PropertyPage.jsx b/buildtime/client/logical-editor/src/pages/PropertyPage.jsx
new file mode 100644
index 000000000..be6cebc51
--- /dev/null
+++ b/buildtime/client/logical-editor/src/pages/PropertyPage.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { useState } from 'react'
+import PropertySideBar from '../components/PropertySideBar';
+import UseFetch from '../components/tools/UseFetch';
+
+const PropertyPage = () => {
+ const { data: properties, isLoading, error } = UseFetch(`http://localhost:8088/propertygroup/1`)
+ const [update, setUpdate] = useState(false)
+
+ if (isLoading) return
Loading profile...
+ if (error) return
Error: {error}
+
+ return (
+
+ );
+};
+
+export default PropertyPage;
+