diff --git a/parts/static/style.css b/parts/static/style.css
index b96e0d4..ff8b9b7 100644
--- a/parts/static/style.css
+++ b/parts/static/style.css
@@ -2,8 +2,8 @@ html {
   background-color: #D7E2E2;
   color: #000F0F;
   font-family: 'Roboto', sans-serif;
-  font-size:large;
   overflow-y: scroll;
+  text-align: center;
 }
 
 body {
@@ -11,7 +11,7 @@ body {
 }
 
 h1 {
-  padding: 16pt;
+  padding: 16px;
   margin: 0 0 20pt 0;
   text-align: center;
   color: #D7E2E2;
@@ -42,39 +42,39 @@ a {
 
 input[type=text].search-bar {
   color: #404040;
-	font-size: x-large;
-	padding: 5pt 8pt 5pt 8pt;
-	margin-top: 8pt;
-	margin-bottom: 8pt;
+  font-size: 1.6em;
+  padding: 5pt 8pt 5pt 8pt;
+  margin-top: 8pt;
+  margin-bottom: 8pt;
   margin-left: 20pt;
   width: 70%;
-  border: 2pt solid grey;
-  border-radius: 5pt;
+  border: 1px solid grey;
 }
 
-.search-bar-container {
-  text-align: center;
+.filter-container p {
+  text-align: left;
+  color: #226666;
+  font-size: 10px;
+  margin: 2px;
 }
 
 .filter-container {
-  background-color: #226666;
-  padding: 10pt 15pt 10pt 15pt;
-  margin-top: 10pt;
-  margin-bottom: 10pt;
+  width: 30%;
   display: inline-block;
+  border: 1px #226666 solid;
 }
 
-.filter-container p {
-  text-align: left;
-  color: #D7E2E2;
-  font-size: 10pt;
-  margin-top: 4pt;
-  margin-left: 3pt;
-  margin-bottom: 4pt;
+.filter-container ul {
+  display: flex;
+  justify-content: stretch;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
-.filter-concontainertainer {
-  text-align: center;
+.filter-container li {
+  flex: 1;
+  font-size: 0.8em;
 }
 
 input[type=checkbox]{
@@ -82,70 +82,17 @@ input[type=checkbox]{
 }
 
 input[type=checkbox] + label.toggle-btn {
-  display: inline-block;
-  padding: 5pt;
-  color: #013A3A;
-  margin-top: 6pt;
-  margin-bottom: 6pt;
-  margin-left: 3pt;
-  margin-right: 3pt;
-  width: 80pt;
-  line-height: 300%;
-  text-align: center;
-  border: 1pt solid #013A3A;
+  padding:6px 0 6px 0;
+  display: block;
+  color: rgba(94,146,146, 0.5);
+  background-color: #D7E2E2;
   transition: 0.2s;
   -webkit-transition: 0.2s;
 }
 
 input[type=checkbox]:checked + label.toggle-btn {
-  background-color: #D7E2E2;
-  border: 1pt solid #D7E2E2;
-  color: #000F0F;
-}
-
-div label input {
-   margin-right:100px;
-}
-
-.tooltip {
-    position: relative;
-    display: inline-block;
-}
-
-.tooltip .tooltiptext {
-    font-size: 10pt;
-    visibility: hidden;
-    width: 120px;
-    background-color: black;
-    color: #fff;
-    text-align: center;
-    border-radius: 6px;
-    padding: 5px 0;
-    position: absolute;
-    z-index: 1;
-    top: -5px;
-    right: 105%;
-    margin-left: -60px;
-
-    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
-    opacity: 0;
-    transition: opacity 0.2s;
-}
-
-.tooltip:hover .tooltiptext {
-    visibility: visible;
-    opacity: 1;
-}
-
-.tooltip .tooltiptext::after {
-    content: " ";
-    position: absolute;
-    top: 50%;
-    left: 100%; /* To the right of the tooltip */
-    margin-top: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent transparent transparent black;
+  color: #D7E2E2;
+  background-color: #226666;
 }
 
 .shadow {
@@ -179,41 +126,14 @@ div label input {
 }
 
 .round-button {
-  position: absolute;
-  bottom: 15pt;
-  left: calc(11% - 20pt);
-  width: 40pt;
-  height: 32pt;
-  border-radius: 20pt;
-  background-color: #5E9292;
-  font-size: 20pt;
-  padding-top: 8pt;
-  box-shadow: 2pt 1pt 8pt black;
-}
-
-.round-button-left {
-  position: absolute;
-  bottom: 15pt;
-  left: calc(22% - 20pt);
-  width: 40pt;
-  height: 32pt;
-  border-radius: 20pt;
-  background-color: #5E9292;
-  font-size: 20pt;
-  padding-top: 8pt;
-  box-shadow: 2pt 1pt 8pt black;
-}
-
-.round-button-right {
-  position: absolute;
-  bottom: 15pt;
-  left: calc(33% - 20pt);
-  width: 40pt;
-  height: 32pt;
-  border-radius: 20pt;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 28px;
+  font-size: 32px;
   background-color: #5E9292;
-  font-size: 20pt;
-  padding-top: 8pt;
   box-shadow: 2pt 1pt 8pt black;
 }
 
@@ -221,20 +141,11 @@ div label input {
   color: #D7E2E2;
 }
 
-.round-button-left a{
-  color: #D7E2E2;
-}
-
-.round-button-right a{
-  color: #D7E2E2;
-}
-
 .small-square-button {
   position: absolute;
-  top: 5pt;
-  right: 5pt;
-  padding-right: 5pt;
-  font-size: 16pt;
+  top: 5px;
+  right: 10px;
+  font-size: 40px;
 }
 
 .small-square-button a {
@@ -246,13 +157,13 @@ div label input {
   align-items: center;
   justify-content: center;
   position: fixed;
-  bottom: 15pt;
-  right: 15pt;
-  width: 40pt;
-  height: 40pt;
-  border-radius: 20pt;
+  bottom: 20px;
+  right: 20px;
+  width: 56px;
+  height: 56px;
+  border-radius: 28px;
+  font-size: 32px;
   background-color: #5E9292;
-  font-size: 22pt;
   box-shadow: 2pt 1pt 8pt black;
 }
 
@@ -264,19 +175,16 @@ div label input {
   font-size: 12pt;
 }
 
-.bottom-spacer {
-  height: 80pt;
-}
-
-table#results {
+#results {
   width: 100%;
   max-width: 1280px;
   margin-left: auto;
   margin-right: auto;
   border-collapse: collapse;
+  margin-top: 1em;
 }
 
-table#results th {
+#results th {
   background-color: #226666;
   color: #D7E2E2;
   padding: 5pt;
@@ -284,36 +192,42 @@ table#results th {
   border-left: 2px solid #D7E2E2;
 }
 
-table#results tr:nth-child(odd) {
+#results tr:nth-child(odd) {
   background-color: #5E9292;
 }
 
-table#results td {
+#results td {
   padding: 4pt;
   cursor: pointer;
+  text-align: left;
 }
 
-table#results #location {
+#results #location {
   width: 18%;
 }
 
-table#results #partno {
+#results #partno {
   /*width: 20%;*/
 }
 
-table#results #description {
+#results #description {
   width: 70%;
 }
 
-table#results #docs {
+#results #docs {
   width: 5%;
 }
 
-table#details {
-  position: absolute;
-  left: 0;
+#info-container {
   width: 35%;
-  margin-top: 0;
+  height: 85%;
+  display: flex;
+  flex-direction:column;
+  justify-content:space-between;
+}
+
+#details {
+  width: 100%;
 }
 
 #magical_autofill{
@@ -340,6 +254,11 @@ td p {
   padding: 0;
 }
 
+.button-container {
+  display: flex;
+  justify-content: space-evenly;
+}
+
 .map {
   position: absolute;
   right: 5%;
@@ -355,8 +274,4 @@ td p {
 
 .nothidden{
   display: initial !important;
-}
-
-.results-locations{
-  
 }
\ No newline at end of file
diff --git a/parts/templates/partsearch.html b/parts/templates/partsearch.html
index ca59997..fb8823d 100644
--- a/parts/templates/partsearch.html
+++ b/parts/templates/partsearch.html
@@ -9,28 +9,26 @@
   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
   crossorigin="anonymous"></script>
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
-    <link rel="stylesheet" type="text/css" href="parts/static/style.css" media="screen and (min-width:500px)">
-    <link rel="stylesheet" type="text/css" href="parts/static/style-m.css" media="screen and (max-width:500px)">
-    <link rel="apple-touch-icon-precomposed" href="parts/static/apple-touch-icon.png">
+    <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='style.css')}}" media="screen and (min-width:500px)">
+    <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='style-m.css')}}" media="screen and (max-width:500px)">
+    <link rel="apple-touch-icon-precomposed" href="{{url_for('static', filename='apple-touch-icon.png')}}">
 
     <script src="https://use.fontawesome.com/2fef7be393.js"></script>
-    <script type="text/javascript" src="parts/static/common.js"></script>
-    <script type="text/javascript" src="parts/static/script.js"></script>
+    <script type="text/javascript" src="{{url_for('static', filename='common.js')}}"></script>
+    <script type="text/javascript" src="{{url_for('static', filename='script.js')}}"></script>
   </head>
   <body>
     <h1>ELAB Part Search Engine</h1>
     <p>Looking for obsolete ICs that were discontinued years ago? Just start typing!</p>
-    <div class="search-bar-container">
     <input type="text" name="search-bar" class="search-bar" placeholder="Search parts">
-    </div>
-    <div class="filter-concontainertainer">
       <div class="filter-container">
         <p>SEARCH IN</p>
-        <input type="checkbox" class="checkbox" id="location"></input><label class="toggle-btn" for="location">Locations<br/><i class="fa fa-map" style="font-size:28pt"></i></label>
-        <input type="checkbox" class="checkbox" id="partno" checked></input><label class="toggle-btn" for="partno">Part Number<br/><i class="fa fa-hashtag" style="font-size:28pt"></i></label>
-        <input type="checkbox" class="checkbox" id="description" checked></input><label class="toggle-btn" for="description">Description<br/><i class="fa fa-edit" style="font-size:28pt"></i></label>
+        <ul>
+          <li><input type="checkbox" class="checkbox" id="location"><label class="toggle-btn" for="location">Locations<br><i class="fa fa-map" style="font-size:20pt"></i></label></li>
+          <li><input type="checkbox" class="checkbox" id="partno" checked=""><label class="toggle-btn" for="partno">Part Number<br><i class="fa fa-hashtag" style="font-size:20pt"></i></label></li>
+          <li><input type="checkbox" class="checkbox" id="description" checked=""><label class="toggle-btn" for="description">Description<br><i class="fa fa-edit" style="font-size:20pt"></i></label></li>
+        </ul>
       </div>
-    </div>
     <table id="results">
       <tr>
         <th id="location">Location</th>
@@ -39,41 +37,41 @@
       </tr>
     </table>
     <h3 id="no-results">No results.</h3>
-    <div class="bottom-spacer"></div>
-
     <div class="shadow" onclick="overlay_out()"></div>
   	<div class="overlay">
       <h2>Part Details</h2>
-      <div>
-      <table id="details">
-        <tr id="location-head" class="details-header"><td>LOCATION</td></tr>
-        <tr id="location" class="details-content"><td><p></p>
-          <select class="pinfo-input" id="container-dropdown" onchange="container_onchange()">
-            {% for container in containers %}
-            <option value="{{container['id']}}">{{container['name']}}</option>
-            {% endfor %}
-          </select>
-          <select class="pinfo-input" id="location-dropdown">
-            <option value="-1" selected="true">-- Select a container --</option>
-          </select>
-        </td></tr>
-        <tr id="partno-head" class="details-header"><td>PART NUMBER</td></tr>
-        <tr id="partno" class="details-content"><td><p></p><input type="text" name="partno-input" placeholder="Part Number" class="pinfo-input" id="partno-input"/></td></tr>
-        <tr id="description-head" class="details-header"><td>DESCRIPTION</td></tr>
-        <tr id="description" class="details-content"><td><p></p><input type="text" name="description-input" placeholder="Description" class="pinfo-input" id="description-input"/></td></tr>
-        <tr id="magical_autofill" style="display:none"><td><input type="button" id="magic-autofill-button" onclick="octopartFetch()" value="magical auto-fill" style="margin-bottom:6pt"/> powered by <a href="http://octopart.com" class="small_link">OctoPart™</a></td></tr>
-        <tr id="datasheet-head" class="details-header"><td>DATASHEET: </td></tr>
-        <tr id="datasheet" style="display: none"><td><input type="file" accept=".pdf" class="pinfo-input" id="datasheet-finput"></td></tr>
-        <tr id="datasheet" style="display: none"><td>OR: <input type="text" class="pinfo-input" name="datasheet-url-input" style="width:80%; margin-bottom: 6pt;" placeholder="Datasheet URL"></td></tr>
-        <tr id="notes-head" class="details-header"><td>NOTES</td></tr>
-        <tr id="notes" class="details-content"><td><p></p><input type="text" name="notes-input" class="pinfo-input" placeholder="Notes"></td></tr>
-      </table>
-      <img src="" id="map" class="map"/>
+      <div id="info-container">
+        <img src="" id="map" class="map"/>
+        <table id="details">
+          <tr id="location-head" class="details-header"><td>LOCATION</td></tr>
+          <tr id="location" class="details-content"><td><p></p>
+            <select class="pinfo-input" id="container-dropdown" onchange="container_onchange()">
+              {% for container in containers %}
+              <option value="{{container['id']}}">{{container['name']}}</option>
+              {% endfor %}
+            </select>
+            <select class="pinfo-input" id="location-dropdown">
+              <option value="-1" selected="true">-- Select a container --</option>
+            </select>
+          </td></tr>
+          <tr id="partno-head" class="details-header"><td>PART NUMBER</td></tr>
+          <tr id="partno" class="details-content"><td><p></p><input type="text" name="partno-input" placeholder="Part Number" class="pinfo-input" id="partno-input"/></td></tr>
+          <tr id="description-head" class="details-header"><td>DESCRIPTION</td></tr>
+          <tr id="description" class="details-content"><td><p></p><input type="text" name="description-input" placeholder="Description" class="pinfo-input" id="description-input"/></td></tr>
+          <tr id="magical_autofill" style="display:none"><td><input type="button" id="magic-autofill-button" onclick="octopartFetch()" value="magical auto-fill" style="margin-bottom:6pt"/> powered by <a href="http://octopart.com" class="small_link">OctoPart™</a></td></tr>
+          <tr id="datasheet-head" class="details-header"><td>DATASHEET: </td></tr>
+          <tr id="datasheet" style="display: none"><td><input type="file" accept=".pdf" class="pinfo-input" id="datasheet-finput"></td></tr>
+          <tr id="datasheet" style="display: none"><td>OR: <input type="text" class="pinfo-input" name="datasheet-url-input" style="width:80%; margin-bottom: 6pt;" placeholder="Datasheet URL"></td></tr>
+          <tr id="notes-head" class="details-header"><td>NOTES</td></tr>
+          <tr id="notes" class="details-content"><td><p></p><input type="text" name="notes-input" class="pinfo-input" placeholder="Notes"></td></tr>
+        </table>
+        <div class="button-container">
+          <div class="round-button"><a href="#" id="delete-button"><i class="fa fa-trash" aria-hidden="true"></i></a></div>
+          <div class="round-button"><a href="#" id="edit-button"><i class="fa fa-pencil" aria-hidden="true"></i></a></div>
+          <div class="round-button"><a href="#" id="duplicate-button" onclick="init_edit(-1)"><i class="fa fa-copy" aria-hidden="true"></i></a></div>
+        </div>
       </div>
       <div>
-      <div class="round-button-left"><a href="#" id="edit-button"><i class="fa fa-pencil" aria-hidden="true"></i></a></div>
-      <div class="round-button"><a href="#" id="delete-button"><i class="fa fa-trash" aria-hidden="true"></i></a></div>
-      <div class="round-button-right"><a href="#" id="duplicate-button" onclick="init_edit(-1)"><i class="fa fa-copy" aria-hidden="true"></i></a></div>
       <div class="small-square-button"><a href="#" onclick="overlay_out()"><i class="fa fa-times" aria-hidden="true"></i></a></div>
      </div>
   	</div>