diff --git a/SmearcarDB/server.py b/SmearcarDB/server.py
index 18037eb..1a617d7 100644
--- a/SmearcarDB/server.py
+++ b/SmearcarDB/server.py
@@ -232,6 +232,7 @@ patch_functions = {
 }
 
 
+
 # Render the client at the default URL
 @app.route("/")
 def initial():
@@ -350,5 +351,42 @@ def editors():
     else:
         return "Bad Request"
 
+@app.route("/directory", methods=["GET","POST"])
+def directory():
+    rootDir = "directory/"
+    if request.method == "GET":
+        return jsonify({"dir": rootDir})
+    if request.method == "POST":
+        received = request.get_json()
+        files = []
+        for filename in os.listdir(received["path"]):
+            file = {}
+            filedir = received["path"]+filename
+            isdir = os.path.isdir(filedir)
+            file["name"] = filename
+            file["date"] = datetime.datetime.fromtimestamp(os.path.getmtime(filedir)).strftime("%B %d, %Y")
+            if(isdir):
+                file["size"] = "- - - -"
+                file["folder"] = "true"
+            else:
+                file["size"] = sizeof_fmt(os.path.getsize(filedir))
+                file["folder"] = "false"
+            
+            files.append(file)
+        return jsonify(files)
+
+def sizeof_fmt(num, suffix='B'):
+    for unit in ['','K','M','G','T','P','E','Z']:
+        if abs(num) < 1024.0:
+            return "%3.1f%s%s" % (num, unit, suffix)
+        num /= 1024.0
+    return "%.1f%s%s" % (num, 'Yi', suffix)
+
+@app.route("/directory/<path:file>", methods=["GET"])
+def dir_download(file):
+    print(file)
+    return send_file(file)
+
 if __name__ == "__main__":
     app.run(host="0.0.0.0")
+
diff --git a/SmearcarDB/static/index.css b/SmearcarDB/static/index.css
index 4fdca24..aa7e4af 100644
--- a/SmearcarDB/static/index.css
+++ b/SmearcarDB/static/index.css
@@ -436,4 +436,101 @@ a {
 	font-weight: 300;
 	margin: auto 3% auto;
 	font-family: 'Saira Condensed', sans-serif;
+}
+
+#directory p {
+	font-size: 150%;
+	padding: 1.5vh 2vh 1.5vh 2vh;
+}
+
+#directoryHeader {
+	height: 10%;
+	display: grid;
+	grid-template-columns: 70% 15% 10% 5%;
+	grid-template-rows: 100%;
+	color: black;
+	background-color: white;
+}
+
+#directoryHeader p {
+	display: grid;
+	cursor: pointer;
+	grid-template-columns: 19fr 1fr;
+	grid-template-rows: 100%;
+	padding: 2.3vh;
+}
+
+#directoryHeader p:hover {
+	background-color: rgba(0,0,0,0.1);
+}
+
+#directoryHeader i {
+	margin: auto;
+	display: none;
+	opacity: 0;
+}
+
+#directoryCont {
+	overflow-y: auto;
+}
+
+.item {
+	display: grid;
+	cursor: pointer;
+	grid-template-columns: 70% 15% 10% 5%;
+	grid-template-rows: 100%;
+	margin: 1vh 0 1vh 0;
+}
+
+.item p {
+	pointer-events: none;
+}
+
+.item a {
+	grid-column: 4;
+	grid-row: 2;
+	margin: auto;
+	font-size: 140%;
+}
+
+.item a:hover {
+	color: #F47922;
+}
+
+#directoryLocation {
+	height: 10%;
+	margin-bottom: 2vh;
+	opacity: 0;
+	display: block;
+}
+
+#directoryLocation p {
+	padding: 0.5vh;
+	margin: 1vh 1.5vh 1vh 1.5vh;
+	border-radius: 5px;
+	display: inline-block;
+}
+
+#directoryLocation i {
+	font-size: 150%;
+}
+
+#directoryHeader .name, .item .name {
+	grid-column: 1;
+}
+
+#directoryHeader .date, .item .modified {
+	grid-column: 2;
+}
+
+#directoryHeader .size, .item .size {
+	grid-column: 3;
+}
+
+#directoryHeader p, .item p {
+	margin: 0;
+}
+
+.subdir:hover {
+	background-color: rgba(0,0,0,0.1);
 }
\ No newline at end of file
diff --git a/SmearcarDB/static/index.js b/SmearcarDB/static/index.js
index 5f3faf9..e2c141d 100644
--- a/SmearcarDB/static/index.js
+++ b/SmearcarDB/static/index.js
@@ -1,14 +1,8 @@
-var navSelect = "home";
-var dataMode;
-var serverURL = window.location.origin;
-var data;
-var languageChart;
-var dataOpen = false;
-var submittable = true;
-var flipMode = "dataValues1";
-var dropOp = {};
-var dropOpStore = {};
-var loginInfo = {};
+var navSelect = "home", flipMode = "dataValues1", currDir = "",
+    dataMode, data, languageChart, rootDir, files,
+    serverURL = window.location.origin,
+    dataOpen = false, submittable = true, clickable = true,
+    dropOp = {}, dropOpStore = {}, loginInfo = {};
 
 var navi = [ // Array containing navigation items in form [Font-Awesome class name, Display Text, Onclick function].
     ["home", "Home", "home"],
@@ -24,7 +18,6 @@ var authorityLabels = {
     3: "#3: No access"
 };
 
-
 var modals = [
     {
         name: "Add Language",
@@ -200,6 +193,7 @@ function createNav() {
 function updateMain(op) { // Updates the actual page.
     updateNav(op);
     if(flipMode === "dataValues2") navSelect = "dataValues2";
+    if(op === "files") getFiles();
     document.getElementById(navSelect).style.opacity = "0";
     setTimeout(function() {
         document.getElementById(navSelect).style.display = "none";
@@ -246,6 +240,186 @@ function getData(updatePage) {
         );
 }
 
+function getFiles() {
+    $.ajax({
+        url: serverURL + "/directory",
+        type: 'GET'
+    })
+    .then(
+        function success(incoming) {
+            rootDir = incoming.dir;
+            listDir("");
+        }
+    );
+}
+
+function listDir(dir) {
+    $.ajax({
+        url: serverURL + "/directory",
+        type: 'POST',
+        dataType: "json",
+        contentType: 'application/json;charset=UTF-8',
+        data: JSON.stringify({path:rootDir+dir})
+    })
+    .then(
+        function success(incoming) {
+            files = incoming;
+            dispDir();
+            clickable = true;
+        }
+    );
+}
+
+function dispDir() {
+    updateLocation();
+    document.getElementById("directory").removeChild(document.getElementById("directoryCont"));
+    var cont = document.createElement("div");
+    cont.id = "directoryCont";
+    cont.style.opacity = "0";
+    cont.className = "transition";
+
+    selectName = "";
+    var item;
+    if(files.length === 0) {
+        var p = document.createElement("p");
+        p.appendChild(document.createTextNode("Nothing here!"));
+        p.style.fontWeight = "100";
+        cont.appendChild(p);
+    }
+    for(var i = 0; i < files.length; i++) {
+        item = createRow();
+
+        var curr = files[i];
+        var name = document.createTextNode(curr.name);
+        var modified = document.createTextNode(curr.date);
+        var size = document.createTextNode(curr.size);
+
+        item.childNodes[0].appendChild(name);
+        item.childNodes[1].appendChild(modified);
+        item.childNodes[2].appendChild(size);
+
+        var ext = document.createAttribute("ext");
+
+        if(curr.folder == "true") {
+            ext.value = "fol";
+        } else {
+            console.log(name);
+            var f = document.createElement("i");
+            var a = document.createElement("a");
+            a.href = getURI(curr.name)
+            a.setAttribute("target", "_blank");
+            f.className = "fa fa-download transition";
+            a.appendChild(f);
+            item.appendChild(a);
+        }
+        item.setAttributeNode(ext);
+
+        item.onclick = function() {
+            if(clickable == true) {
+                var name = this.childNodes[0].innerText;
+                if(selectName == name) {
+                    clickable = false;
+                    attr = this.getAttribute("ext");
+                    if(attr == "fol") {
+                        clearTbl();
+                        setTimeout(function() {
+                            currDir += name+"/";
+                            listDir(currDir);
+                        }, 300)
+                        return;
+                    }
+                }
+                selectName = name;
+                selectDiv = this;
+                for(var i =0; i < document.getElementsByClassName("item").length;i++){
+                    document.getElementsByClassName("item")[i].style.backgroundColor = "";
+                }
+                this.style.backgroundColor = "#d9d9d9";
+            }
+        }
+        cont.appendChild(item);
+        item = null;
+    }
+    document.getElementById("directory").appendChild(cont);
+    setTimeout(function() {
+        document.getElementById("directoryCont").style.opacity = "1";
+    }, 100);
+}
+
+function getURI(name) {
+    var dirs = (rootDir+currDir+name).split("/");
+    var uri = window.location.origin+"/directory";
+    for(var i = 0; i < dirs.length; i++) uri+="/"+encodeURIComponent(dirs[i]);
+    return uri;
+}
+
+function clearTbl() {
+    selected = undefined;
+    selectDiv = undefined;
+    document.getElementById("directoryCont").style.opacity = "0";
+    document.getElementById("directoryLocation").style.opacity = "0";
+}
+
+function createRow() {
+    var item = document.createElement("div");
+    item.className = "item transition card";
+    var name = document.createElement("p");
+    name.className = "name";
+    item.appendChild(name);
+    var modified = document.createElement("p");
+    modified.className = "modified";
+    item.appendChild(modified);
+    var size = document.createElement("p");
+    size.className = "size";
+    item.appendChild(size);
+    return item;
+}
+
+function updateLocation() {
+    var loc = document.getElementById("directoryLocation");
+    while(loc.firstChild) loc.removeChild(loc.firstChild);
+    loc.style.opacity = "1";
+    var subdir = currDir.split("/");
+    subdir = subdir.slice(0, subdir.length-1);
+    for(var i = 0; i < subdir.length+1; i++) {
+        var p = document.createElement("p");
+        var ic = document.createElement("i");
+        ic.className = "fa fa-angle-right";
+        if(i !== 0) loc.appendChild(ic);
+        if(i === 0) {
+            p.appendChild(document.createTextNode("Database"));
+        } else {
+            p.appendChild(document.createTextNode(subdir[i-1]));
+        }
+        if(i !== subdir.length) {
+            p.style.cursor = "pointer";
+            p.className = "subdir transition";
+            p.onclick = function() {
+                clickable = false;
+                clearTbl();
+                subdirNum = subdir.indexOf(this.innerText);
+                if(subdirNum === -1) {
+                    currDir = "";
+                } else {
+                    currDir = subdir.slice(0, subdirNum+1).reduce(function(a,b) { return a+"/"+b; })+"/";
+                }
+                listDir(currDir);
+            }
+        }   
+        loc.appendChild(p);
+    }
+}
+
+function downloadFile(name) {
+    $.ajax({
+        url: serverURL + "/directory/download",
+        type: 'POST',
+        dataType: "json",
+        contentType: 'application/json;charset=UTF-8',
+        data: JSON.stringify({path:rootDir+currDir+name})
+    });
+}
+
 function language(language) {
     return data.values.filter(function(element) {
         return element.id === parseInt(language);
diff --git a/SmearcarDB/templates/index.html b/SmearcarDB/templates/index.html
index e4f9df9..7abbb7c 100644
--- a/SmearcarDB/templates/index.html
+++ b/SmearcarDB/templates/index.html
@@ -93,8 +93,25 @@
             </div>
         </div>
         <div id="files" class="optionContainer">
-            <div class="temp card">
-                <h2>Currently in progress!</h2>
+            <div id="directory">
+                <div id="directoryLocation" class="card transition">
+                    <p>Database</p>
+                </div>
+                <div id="directoryHeader" class="card transition">
+                    <p class="name transition">Name
+                        <i class="fa fa-chevron-down transition"></i>
+                        <i class="fa fa-chevron-up transition"></i>
+                    </p>
+                    <p class="date transition">Date Modified
+                        <i class="fa fa-chevron-down transition"></i>
+                        <i class="fa fa-chevron-up transition"></i>
+                    </p>
+                    <p class="size transition">Size
+                        <i class="fa fa-chevron-down transition"></i>
+                        <i class="fa fa-chevron-up transition"></i>
+                    </p>
+                </div>
+                <div id="directoryCont"></div>
             </div>
         </div>
         <div id="about" class="optionContainer">