diff --git a/fakejson.json b/fakejson.json
new file mode 100644
index 0000000..5b67c62
--- /dev/null
+++ b/fakejson.json
@@ -0,0 +1,10 @@
+[{
+	"debris": "/BOUGHT/180712_hp_agreement conditions_2018_2019_amypickles.pdf",
+	"librarian": "wdka"
+}, {
+	"debris": "/BOUGHT/AmyPickles_Tutor Evaluations WdKA Elective Program 2018.pdf",
+	"librarian": ["Karen", "brenda", "jeanette"]
+}, {
+	"debris": "/BOUGHT/debris.bought.references/debris.bought.references.angela_davis_voices_of_resistance_excerpt1.pdf",
+	"librarian": "Karen"
+}]
diff --git a/library.py b/library.py
new file mode 100644
index 0000000..7dee6e1
--- /dev/null
+++ b/library.py
@@ -0,0 +1,48 @@
+from flask import Flask, render_template, Markup, jsonify
+import json
+
+app = Flask(__name__, static_url_path='', static_folder="static", template_folder="templates")
+app.jinja_env.add_extension('jinja2.ext.loopcontrols')
+
+
+# SETTING THE VARIABLES
+path = "/static/files/"
+
+
+#move this list to Jinja so it can be placed in layout
+#give back clicked value
+librarians = ["Alana", "Gentian", "Laurie", "Matias", "Scott", "Stacy", "Max", "Clara_B", "Michelle", "Clara_J_B", "Karen", "Lumsden_Primary_School", "Aaron", "Leo", "Maria", "Laura", "Honey", "Tender_Center", "wdka", "Naomi", "Cristina", "Julie", "ssw", "cyberspace", "Hannah", "Katarina", "Anastasia", "Kimmy", "Marie","Katherine", "Allison", "Mariana", "Viki", "Alice", "Eric", "hks", "cbk", "Sophie", "Antonio", "Jeremiah", "Angela", "Renee", "Marta", "Katherine", "Anna", "Auryn", "Ashley", "Anne", "Denise", "Eva", "Jonnah", "Kitty", "Masha", "Mia", "Cian", "Senke", "Maud", "Jinnie", "Rubin", "Julia", "Alana", "Gentian", "Laurie", "Matias","Scott", "Stacy"]
+
+
+with open('fakejson.json', 'r', encoding='utf8') as filesandnames:
+    filetoname_dict = json.load(filesandnames)
+
+#this value we should get from template
+    librarianselected = filetoname_dict[2]["librarian"]
+
+#go from librarian name to file
+    for file in filetoname_dict:
+        if librarianselected in file["librarian"]:
+            thedebris = file["debris"]
+            print(str(librarianselected)+" contributed with the following debris : "+str(thedebris))
+    print("---------------------------------------------------")
+
+#this value we should get from template
+    fileselected = filetoname_dict[1]["debris"]
+
+#go from file name to librarian name
+    print(fileselected)
+    for file in filetoname_dict:
+        if fileselected in file["debris"]:
+            thelibrarian = file["librarian"]
+            print("librarians for "+ str(fileselected)+" are: " + str(thelibrarian))
+
+
+
+@app.route("/")
+def home():
+    return render_template('layout.html', filetoname_dict=filetoname_dict, librarians=librarians)
+
+@app.route('/about/')
+def about():
+    return render_template('about.html')
diff --git a/static/css/main.css b/static/css/main.css
new file mode 100644
index 0000000..ba3771d
--- /dev/null
+++ b/static/css/main.css
@@ -0,0 +1,62 @@
+
+* {
+  box-sizing: border-box;
+}
+
+body{
+  margin: 0;
+  height: 100vh;
+}
+
+
+.main-column-left {
+  padding: 5em;
+  float: left;
+  width: 50%;
+  background: red;
+  overflow-y: scroll;
+  height: 100vh;
+}
+
+.main-column-right {
+  float: right;
+  width: 50%;
+  background: purple;
+  overflow-y: scroll;
+  height: 100vh;
+}
+
+.main:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+ul {
+  list-style-type: none;
+  text-decoration: none;
+}
+
+.nav-top {
+  height: 1.5em;
+  background: white;
+  width: 100%;
+  display: inline-block;
+  position: fixed;
+  border: 0.1em black solid;
+}
+
+.nav-bottom{
+  height: 1.5em;
+  background: white;
+  width: 100%;
+  display: inline-block;
+  bottom: 0;
+  position: fixed;
+  border: 0.1em black solid;
+  z-index: 10000;
+}
+
+.nav-buttons {
+
+}
diff --git a/templates/about.html b/templates/about.html
new file mode 100644
index 0000000..e69de29
diff --git a/templates/layout.html b/templates/layout.html
new file mode 100644
index 0000000..2a3cc66
--- /dev/null
+++ b/templates/layout.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Library</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
+
+  </head>
+  <body>
+    <div class="nav-top">
+      <ul>
+        <li><a class="nav-button" style="text-align: left;">BOUGHT</a></li>
+        <li><a class="nav-button" style="text-align: center;">STOLEN</a>
+        <li><a class="nav-button" style="text-align: right;">REPURPOSED</a>
+    </ul>
+    </div>
+    <div class="main">
+      <div class="main-column-left">
+        {% for librarian in librarians %}
+        {{ librarian }} <br />
+        {% endfor %}
+
+        {% for file in filetoname_dict %}
+          {{file["debris"]}}<br>
+        {% endfor %}
+      </div>
+      <div class="main-column-right">
+        <p>aizjdsoiajdijazoidjiazjdijzad
+        juzahdizahidhazihdzahdio
+      aoizjdiajdiajidzjaizj</p>
+        {% block content %}
+        {% endblock content %}
+      </div>
+    </div>
+    <div class="nav-bottom">
+      <ul>
+        <li><a class="nav-button" style="text-align: left;">COPIED</a></li>
+        <li><a class="nav-button" style="text-align: center;">FOUND</a></li>
+        <li><a class="nav-button" style="text-align: right;">GIFT</a></li>
+      </ul>
+    </div>
+
+  </body>
+</html>