diff --git a/css/style.css b/css/style.css
index 0f0e36d..8bf2315 100644
--- a/css/style.css
+++ b/css/style.css
@@ -20,7 +20,6 @@ ul {
 
 ul:nth-child(1) {
   padding: 1em 1em;
-  position: absolute;
 }
 
 li:hover {
@@ -66,6 +65,13 @@ li::before {
 }
 section {
   grid-area: section;
+  margin: 1em 2em;
+}
+
+textarea {
+  width: 100%;
+  height: 100%;
+  resize: none;
 }
 
 aside {
@@ -97,6 +103,7 @@ sub {
   height: 100%;
   justify-items: center;
   align-items: center;
+  top: 0;
 }
 
 .settingsBtn {
diff --git a/index.php b/index.php
index 2b37039..5cb0c0c 100644
--- a/index.php
+++ b/index.php
@@ -20,9 +20,11 @@
             <button class="settingsBtn">Settings</button>
         </nav>
         <aside>
-            <ul>
+            <div>
+                <ul>
 
-            </ul>
+                </ul>
+            </div>
             <div class="loading">
                 <img src="img/loading.gif" alt="loading">
             </div>
@@ -30,7 +32,7 @@
 
 
         <section>
-            lolo
+            <textarea name="" id="" cols="30" rows="10"></textarea>
         </section>
 
         <footer>
diff --git a/js/controller.js b/js/controller.js
index 0318b84..335ec64 100644
--- a/js/controller.js
+++ b/js/controller.js
@@ -43,9 +43,9 @@ class Controller {
     this.model.dirTree().then(
       function (value) {
         view.removeDirTree();
-        view.drawDirTree(value);
+        view.drawDirTree(value, undefined, this);
         view.dirTreeToggler();
-      },
+      }.bind(this),
       function (error) {}
     );
   }
@@ -61,4 +61,13 @@ class Controller {
     this.view.closeSettings();
     console.log(repo.value);
   }
+
+  loadFile(file) {
+    this.model.readFile(file).then(
+      function (value) {
+        this.view.openFile(value);
+      }.bind(this),
+      function (error) {}
+    );
+  }
 }
diff --git a/js/model.js b/js/model.js
index 7468253..a650a40 100644
--- a/js/model.js
+++ b/js/model.js
@@ -66,4 +66,8 @@ class Model {
   setBaseDir(baseDir) {
     localStorage.setItem("baseDir", baseDir);
   }
+
+  readFile(file) {
+    return pfs.readFile(file, "utf8");
+  }
 }
diff --git a/js/view.js b/js/view.js
index 36c948d..9658c8c 100644
--- a/js/view.js
+++ b/js/view.js
@@ -1,7 +1,11 @@
 class View {
   constructor() {}
 
-  drawDirTree(dirtree, ulToAdd = document.getElementsByTagName("ul")[0]) {
+  drawDirTree(
+    dirtree,
+    ulToAdd = document.getElementsByTagName("ul")[0],
+    parrentObj
+  ) {
     var dirtreeul = document.getElementsByTagName("ul");
     var tag = document.createElement("li");
     var text = document.createTextNode(dirtree[0]);
@@ -16,17 +20,25 @@ class View {
       tag.parentElement.appendChild(newul);
       for (let i = 1; i < dirtree.length; i++) {
         if (Array.isArray(dirtree[i])) {
-          this.drawDirTree(dirtree[i], newul);
+          this.drawDirTree(dirtree[i], newul, parrentObj);
         } else {
           var tag = document.createElement("li");
           var text = document.createTextNode(dirtree[i]);
           tag.appendChild(text);
           newul.appendChild(tag);
+          var _this = this;
+          tag.addEventListener("click", function () {
+            parrentObj.loadFile(dirtree[0] + dirtree[i]);
+          });
         }
       }
     }
   }
 
+  openFile(fileread) {
+    let textArea = document.getElementsByTagName("textarea")[0];
+  }
+
   removeDirTree() {
     let mainul = document.getElementsByTagName("ul")[0];
     while (mainul.firstChild) {
@@ -61,7 +73,7 @@ class View {
     let repo = document.getElementById("inputRepository");
     let baseDir = document.getElementById("inputBaseDir");
 
-    repo.value = localStorage.getItem("repo")
+    repo.value = localStorage.getItem("repo");
     baseDir.value = localStorage.getItem("baseDir");
   }