diff --git a/Dockerfile b/Dockerfile
index 0780da0..2e6b44d 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -2,6 +2,7 @@ FROM python:3
 ADD main.py /
 ADD requirements.txt /
 ADD templates /templates
+ADD static /static
 
 VOLUME /download/
 
@@ -10,4 +11,4 @@ RUN pip install manga-py
 
 
 
-CMD ["python", "./main.py"]
\ No newline at end of file
+CMD ["python", "./main.py"]
diff --git a/static/style.css b/static/style.css
index 1847971..8eb4bda 100644
--- a/static/style.css
+++ b/static/style.css
@@ -6,13 +6,45 @@
     text-decoration: none;
     font-size: 16px
 }
-body{
-    background: white;
+.grid-container{
+    display: grid;
+    grid-template-columns: min-content auto auto auto;
+    grid-template-rows: auto auto auto;
+    grid-gap: 10px;
+   // background-color: #2196F3;
+    padding: 10px;
 }
-.wrapper{
-    display: block;
+.grid-container > div {
+   // background-color: rgba(255,255,0.9);
+    text-align: center;
+    padding: 20px 0;
+    fonrt-size: 30px;
 }
-
-.main {
- float:right
+.header{
+    grid-column-start: 1;
+    grid-column-end: 5;
+}
+.nav{
+    grid-column:1;
+    //border-style: dotted;
+}
+ul{
+    list-style: none;
+    text-align:left;
+    padding-left:2px;
+}
+.main{
+    grid-column-start: 2;
+    grid-column-end: 5;
+    grid-row-start: 2;
+    grid-row-end: 2;
+    //background-color: rgba(255,255,0,0.9);
+    overflow: scroll;
+    height: 200px;
+}
+.footer{
+    grid-column-start: 1;
+    grid-column-end: 5;
+    grid-row: 3;
+    padding-bottom:2px;
 }
diff --git a/templates/index.html b/templates/index.html
index ffa5288..8d61f66 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,22 +6,35 @@
     <title>Title</title>
 </head>
   <body>
-    <div class="container">
-      <Header>
-        <h1>Test</h1>
-      </header>
-      <div class=wrapper>
-        <nav>
-          <ul>
-            <li><a href="/active"><button class=button>Active</button></a></li>
-            <li><a href="/download"><button class=button>Download</button></a></li>
-            <li><a href="http://google.com"><button class=button>Test</button></a></li>
-            <li><button class=button>asdfl</button></li>
-        </nav>
-        <section>
-          HIIIIIII
-        <section>
+    <dev class="grid-container">
+      <div class="header">Super Awesome Mange Downloading and Viewing Thing</div>
+      <div class="nav" align="left">
+        <ul>
+          <li><button class=button onclick="activeReturn()">Active</button>
+          <li><button class=button onclick="downloadReturn()">Download</button>
+         <!-- <li><a href="http://google.com"><button class=button>google<>/button></a></li>
+          <li><button class=button onclick="clickTest()">asdfl</button></li>-->
+        </ul>
+      </div>
+      <div class="main" id="main">
+
+      </div>
+      <div class="footer">
+        bottom stuffs
       </div>
     </div>
 </body>
 </html>
+
+<script>
+  function activeReturn() {
+      fetch('/active')
+          .then(response => response.json())
+          .then(data => document.getElementById("main").innerHTML = JSON.stringify(data));
+  };
+   function downloadReturn() {
+      fetch('/download')
+          .then(response => response.json())
+          .then(data => document.getElementById("main").innerHTML = JSON.stringify(data));
+   };
+</script>
