diff --git a/libs/remix-ui/tree-view/src/lib/hooks/extract-data.tsx b/libs/remix-ui/tree-view/src/lib/hooks/extract-data.tsx
new file mode 100644
index 0000000000..8564ed6b2d
--- /dev/null
+++ b/libs/remix-ui/tree-view/src/lib/hooks/extract-data.tsx
@@ -0,0 +1,5 @@
+import React from 'react'
+
+const useExtractData = () => {
+    
+}
\ No newline at end of file
diff --git a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.css b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.css
index e69de29bb2..7e8fbee405 100644
--- a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.css
+++ b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.css
@@ -0,0 +1,32 @@
+.li_tv {
+    list-style-type: none;
+    -webkit-margin-before: 0px;
+    -webkit-margin-after: 0px;
+    -webkit-margin-start: 0px;
+    -webkit-margin-end: 0px;
+    -webkit-padding-start: 0px;
+  }
+  .ul_tv {
+    list-style-type: none;
+    -webkit-margin-before: 0px;
+    -webkit-margin-after: 0px;
+    -webkit-margin-start: 0px;
+    -webkit-margin-end: 0px;
+    -webkit-padding-start: 0px;
+  }
+  .caret_tv {
+    width: 10px;
+    flex-shrink: 0;
+    padding-right: 5px;
+  }
+  .label_item {
+    word-break: break-all;
+  }
+  .label_key {
+    min-width: 15%;
+    max-width: 80%;
+    word-break: break-word;
+  }
+  .label_value {
+    min-width: 10%;
+  }
\ No newline at end of file
diff --git a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx
index d2544cbd83..c2a03f9bfb 100644
--- a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx
+++ b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx
@@ -1,16 +1,43 @@
-import React from 'react';
+import React, { useState } from 'react'
 
-import './remix-ui-tree-view.css';
+import './remix-ui-tree-view.css'
 
-/* eslint-disable-next-line */
-export interface RemixUiTreeViewProps {}
+export interface RemixUiTreeViewProps {
+  data: []
+}
 
 export const RemixUiTreeView = (props: RemixUiTreeViewProps) => {
   return (
-    <div>
-      <h1>Welcome to remix-ui-tree-view!</h1>
-    </div>
-  );
-};
+    <ul key="" data-id="treeViewUl" className="ul_tv ml-0 px-2">
+      <li key="vm trace step" data-id="treeViewLivm trace step" className="li_tv">
+        <div key="vm trace step" data-id="treeViewDivvm trace step" className="d-flex flex-row align-items-center">
+          <div className="px-1 fas fa-caret-right caret caret_tv_2nzIvs" style={{ visibility: "hidden" }}>
+          </div>
+            <span className="w-100">
+              <div className="d-flex mb-1 flex-row label_item">
+                <label className="small font-weight-bold pr-1 label_key">
+                  vm trace step:
+                </label>
+                <label className="m-0 label_value">-</label>
+              </div>
+            </span>
+          </div>
+        </li>
+        <li key="execution step" data-id="treeViewLiexecution step" className="li_tv">
+          <div key="execution step" data-id="treeViewDivexecution step" className="d-flex flex-row align-items-center">
+            <div className="px-1 fas fa-caret-right caret caret_tv" style={{ visibility: "hidden" }}>
+            </div>
+            <span className="w-100">
+              <div className="d-flex mb-1 flex-row label_item">
+                <label className="small font-weight-bold pr-1 label_key">
+                  execution step:
+                </label>
+                <label className="m-0 label_value">-</label>
+              </div>
+            </span>
+          </div>
+        </li>
+      </ul>)
+}
 
-export default RemixUiTreeView;
+export default RemixUiTreeView