diff --git a/app/package.json b/app/package.json
index 4f6cfe5..ba596ce 100644
--- a/app/package.json
+++ b/app/package.json
@@ -35,6 +35,7 @@
     "react-hot-loader": "4.13.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
+    "react-ui-tree": "^4.0.0",
     "styled-components": "^5.2.1"
   },
   "devDependencies": {
diff --git a/app/src/react/components/persea/index.jsx b/app/src/react/components/persea/index.jsx
index 72b9e65..2b35e14 100644
--- a/app/src/react/components/persea/index.jsx
+++ b/app/src/react/components/persea/index.jsx
@@ -14,7 +14,6 @@ import {
 
 import Dashboard from 'components/dashboard';
 import ProjectRoute from 'components/project/route';
-import ResourceRoute from 'components/resource/route';
 
 const Persea = React.memo(({history}) => {
   const isLoggedIn = useSelector(userIdSelector);
@@ -25,7 +24,6 @@ const Persea = React.memo(({history}) => {
           {isLoggedIn ? <Redirect to="/" /> : Login}
         </Route>
         <Route path="/dashboard" component={Dashboard} />
-        <Route path="/project/:uuid:uri(/.*)" component={ResourceRoute} />
         <Route path="/project/:uuid" component={ProjectRoute} />
       </Switch>
       <Route exact path="/">
diff --git a/app/src/react/components/project/index.jsx b/app/src/react/components/project/index.jsx
index 8e31a11..40560d6 100644
--- a/app/src/react/components/project/index.jsx
+++ b/app/src/react/components/project/index.jsx
@@ -3,19 +3,60 @@ import './index.scss';
 import {join} from 'path';
 
 import {PropTypes, React} from '@latus/react';
-import {Link} from 'react-router-dom';
+import {
+  Link,
+  Route,
+} from 'react-router-dom';
+import Tree from 'react-ui-tree';
+
+import ResourceRoute from 'components/resource/route';
+
+const renderNode = ({isFile, label, path}) => (
+  isFile
+    ? <Link to={path}>{label}</Link>
+    : <span>{label}</span>
+);
+
+const treeFromResourcePath = (tree, uuid, [isFile, resourcePath]) => {
+  const parts = resourcePath.split('/');
+  parts.shift();
+  let walk = tree;
+  parts.forEach((part) => {
+    let index = walk.children.findIndex(({label}) => label === part);
+    if (-1 === index) {
+      index = walk.children.length;
+      walk.children.push({
+        children: [],
+        isFile,
+        label: part,
+        path: join('/project', uuid, resourcePath),
+      });
+    }
+    walk = walk.children[index];
+  });
+}
+
+const treeFromResourcePaths = (uuid, resourcePaths) => {
+  const tree = {label: uuid, children: []};
+  resourcePaths
+    .forEach((resourcePath) => treeFromResourcePath(tree, uuid, resourcePath));
+  return tree;
+};
 
 const Project = ({project: {label, resourcePaths}, uuid}) => (
   <div className="project">
-    <h2 className="project__title">{label}</h2>
-    <ul>
-      {resourcePaths.map(([isFile, resourcePath]) => (
-        <li key={resourcePath}>
-          {isFile ? 'File: ' : 'Directory: '}
-          <Link to={join('/project', uuid, resourcePath)}>{resourcePath}</Link>
-        </li>
-      ))}
-    </ul>
+    <div className="sidebar">
+      <Tree
+        paddingLeft={20}
+        tree={treeFromResourcePaths(uuid, resourcePaths)}
+        // onChange={this.handleChange}
+        // isNodeCollapsed={this.isNodeCollapsed}
+        renderNode={renderNode}
+      />
+    </div>
+    <div className="resource-container">
+      <Route path="/project/:uuid:uri(/.*)" component={ResourceRoute} />
+    </div>
   </div>
 );
 
diff --git a/app/src/react/components/project/index.scss b/app/src/react/components/project/index.scss
index e69de29..53b7f64 100644
--- a/app/src/react/components/project/index.scss
+++ b/app/src/react/components/project/index.scss
@@ -0,0 +1,27 @@
+.project {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  .sidebar {
+    padding: 1em;
+    min-width: 25rem;
+  }
+  .m-node {
+    .caret-right::before {
+      content: "\25B8";
+      font-size: 0.7em;
+      padding-right: 0.5em;
+    }
+    .caret-down::before {
+      content: "\25BE";
+      font-size: 0.7em;
+      padding-right: 0.5em;
+    }
+  }
+  .resource-container {
+    background-color: rgba(255, 255, 255, 0.1);
+    flex-grow: 1;
+    padding: 1em;
+  }
+}
+
diff --git a/app/yarn.lock b/app/yarn.lock
index ed9c081..26aaea9 100644
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -2553,6 +2553,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.5:
+  version "2.2.6"
+  resolved "http://npm.cha0sdev/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
+
 clean-css@4.2.x, clean-css@^4.2.3:
   version "4.2.3"
   resolved "http://npm.cha0sdev/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -5443,6 +5448,11 @@ js-base64@^2.1.8:
   resolved "http://npm.cha0sdev/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
+js-tree@^2.0.1:
+  version "2.0.2"
+  resolved "http://npm.cha0sdev/js-tree/-/js-tree-2.0.2.tgz#25cd00c55a236bd3e02578b25d1c6721803c4085"
+  integrity sha512-+pqyPOy8vZXW5v+M16rpSFsUO7rtxxnDAKn70DtSkDYhlMUs7QHhprcq/b4FBCbZMeyFv2Pfg8NWgIle9qLMbw==
+
 js-yaml@3.14.0:
   version "3.14.0"
   resolved "http://npm.cha0sdev/js-yaml/-/js-yaml-3.14.0.tgz#a7a34170f26a21bb162424d8adacb4113a69e482"
@@ -7274,7 +7284,7 @@ promise-inflight@^1.0.1:
   resolved "http://npm.cha0sdev/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
-prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "http://npm.cha0sdev/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -7520,6 +7530,15 @@ react-router@5.2.0, react-router@^5.2.0:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-ui-tree@^4.0.0:
+  version "4.0.0"
+  resolved "http://npm.cha0sdev/react-ui-tree/-/react-ui-tree-4.0.0.tgz#99e36a68e274409485614ab1f31f52fdf884907e"
+  integrity sha512-2y649h0psahtYb4NW5KK/zcwnzH0Di4a0PPzsorNyHzLGr5fXGB4MyubMcZ1BGD5nZFIATalvCeSJ/YDvIriVw==
+  dependencies:
+    classnames "^2.2.5"
+    js-tree "^2.0.1"
+    prop-types "^15.5.10"
+
 react@^16.14.0:
   version "16.14.0"
   resolved "http://npm.cha0sdev/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"