diff --git a/css/styles.css b/css/styles.css
index e512698..65a71b5 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -34,7 +34,9 @@
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
   box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
 }
-
+.ls-none {
+  list-style: none;
+}
 /* Side Menu */
 .side-menu {
   padding-top: 10px;
@@ -293,3 +295,21 @@
   list-style: none;
   -webkit-padding-start: 0px;
 }
+
+
+
+
+
+
+
+.file-tree-container .file_tree { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
+.file-tree-container .file_tree input[type=radio], .file-tree-container .file_tree input[type=checkbox] { width: 0; height: 0; opacity: 0; position: absolute; margin: 0; }
+.file-tree-container .file_tree label { display: block; width: 100%; font-size: 14px; color: black; height: 30px; line-height: 30px; padding: 0 8px; cursor: pointer; white-space: nowrap; }
+.file-tree-container .file_tree label:hover { color: #a4d3ff; } .file_tree .dir_wrapper { display: none; padding-left: 28px; }
+.file-tree-container .file_tree .dir_wrapper label { padding-left: 0; }
+.file-tree-container .file_tree input[type=checkbox] + label { color: black; padding-left: 30px; }
+.file-tree-container .file_tree input[type=checkbox] + label:hover { color: #a4d3ff; }
+.file-tree-container .file_tree input[type=radio]:checked + label { color: #337ab7; }
+.file-tree-container .file_tree input[type=checkbox]:checked + label + .dir_wrapper { display: block; }
+.file-tree-container .file_tree input[type=checkbox] + label { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAABQCAYAAABxs9dPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjc0Q0FDNEY5NDFGQjExRTQ4MEQ4ODY5MEFBODE4RDk2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjc0Q0FDNEZBNDFGQjExRTQ4MEQ4ODY5MEFBODE4RDk2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NzRDQUM0Rjc0MUZCMTFFNDgwRDg4NjkwQUE4MThEOTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NzRDQUM0Rjg0MUZCMTFFNDgwRDg4NjkwQUE4MThEOTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7T+9ssAAABJ0lEQVR42uzZMQrCMBgF4FbE0UFPILg5qdAbCA7q5qK7p3Bw8BK6u4giboKCJxDB1cFdsOjapb5ACyoiNG3pj30P3hj4SBOaEPP6cFwjWG5oAz0aMSSjMaaIbtGqFJCP2qE1KSCVgjdTkaKyIccr1B49SwGp5NF6HCAbvRjJpOTN9htog/YTAs3QXthFbUja9gQRRBBBBBFEEEEEpQVkalyl0zVD6tYxlfbJZK0h13W5ywgiiCCCCCKIIIII+nGmnp/u4g75k4Bj1IviCHXiAg00xlXQbhwo3TXUQRdoTtKibqPLqFFhH/Ba6BpdSQGpNL3+793ej3pRHCbkGPuz/PnmekgIZPNfRhBBBBFEEEEEEURQ8DO1pXGtjirWN1DZKz/Za54CDABbrytKn66XKwAAAABJRU5ErkJggg==); background-size: 18px 40px; background-position: top 7px left 6px; background-repeat: no-repeat; vertical-align: middle; }
+.file-tree-container .file_tree input[type=checkbox] + label:hover { background-position: top -18px left 6px; }
diff --git a/templates/website.html b/templates/website.html
index 9acab00..b3460eb 100644
--- a/templates/website.html
+++ b/templates/website.html
@@ -197,6 +197,61 @@
 
 </div>
 
+<div class="white-well">
+  <div class="file-tree-container">
+    <div class="file_tree">
+      <input type="checkbox" id="f_myfilms">
+      <label for="f_myfilms">My Films</label>
+      <div class="dir_wrapper">
+        <input type="checkbox" id="f_wehave">
+        <label for="f_wehave">We Have</label>
+        <div class="dir_wrapper">
+          <input type="checkbox" id="f_togo">
+          <label for="f_togo">To Go</label>
+          <div class="dir_wrapper">
+            <input type="radio" name="hosted_files" id="f_deeper_js" value="Deeper.js">
+            <label for="f_deeper_js">Deeper.js</label>
+            <input type="radio" name="hosted_files" id="f_fileception_js" value="Fileception.js">
+            <label for="f_fileception_js">Fileception.js</label>
+          </div>
+        </div>
+      </div>
+
+      <input type="checkbox" id="f_justafolder">
+      <label for="f_justafolder">Just a folder</label>
+      <div class="dir_wrapper">
+        <input type="radio" name="hosted_files" id="f_withafile_js" value="with_a_file.js">
+        <label for="f_withafile_js">with_a_file.js</label>
+      </div>
+
+      <input type="radio" name="hosted_files" id="f_main_js" value="main.js">
+      <label for="f_main_js">main.js</label>
+      <input type="radio" name="hosted_files" id="f_globals_js" value="globals.js">
+      <label for="f_globals_js">globals.js</label>
+      <input type="radio" name="hosted_files" id="f_filler_js" value="filler.js">
+      <label for="f_filler_js">filler.js</label>
+      <input type="radio" name="hosted_files" id="f_horror_vacui_js" value="horror_vacui.js">
+      <label for="f_horror_vacui_js">horror_vacui.js</label>
+    </div>
+  </div>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+