diff --git a/i_love_qr.svg b/i_love_qr.svg
deleted file mode 100644
index d801ace..0000000
--- a/i_love_qr.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23"><path d="M1 1h7v7h-7zM11 1h2v2h1v1h-1v1h1v6h-1v-2h-1v-1h1v-2h-1v-3h-1v3h-1v3h-1v-6h1v-1h1zM15 1h7v7h-7zM2 2v5h5v-5zM16 2v5h5v-5zM3 3h3v3h-3zM17 3h3v3h-3zM11 7h1v1h-1zM1 9h1v1h-1zM3 9h5v1h-2v1h3v-1h1v-1h2v2h-2v1h-5v-2h-1v1h-1zM15 9h5v3h1v1h-3v-1h1v-2h-4zM21 10h1v1h-1zM1 11h1v1h-1zM12 11h1v1h-1zM14 11h1v3h-1zM3 12h2v2h-4v-1h2zM16 12h1v2h2v1h-2v1h-2v-1h1zM6 13h3v1h-3zM10 13h3v1h1v5h-1v-2h-2v-1h2v-1h-1v-1h-1v2h-1v-1h-1v-1h1zM21 13h1v1h-1zM1 15h7v7h-7zM19 15h2v1h-1v1h-2v-1h1zM2 16v5h5v-5zM9 16h1v3h1v1h-2zM21 16h1v2h-1zM3 17h3v3h-3zM15 17h1v1h-1zM11 18h1v1h-1zM16 18h3v2h1v1h-1v1h-1v-1h-2v-1h2v-1h-2zM12 19h1v1h-1zM14 19h1v1h-1zM9 21h2v1h-2zM12 21h1v1h-1zM20 21h1v1h-1z"/></svg>
\ No newline at end of file
diff --git a/public/emoji.png b/public/frown.png
similarity index 100%
rename from public/emoji.png
rename to public/frown.png
diff --git a/public/main.css b/public/main.css
index bb79e66..93a2ad1 100644
--- a/public/main.css
+++ b/public/main.css
@@ -4,8 +4,8 @@
   background-repeat: no-repeat;
   background-size: cover;
   height: 7em;
-  margin-bottom: 1em;
-  margin-top: 1em;
+  margin: 1em 0;
+  padding: 0 5px;
   position: relative;
   width: 100%;
 }
@@ -20,82 +20,112 @@
 
 #appTitle {
   color: white;
-  font-size: 3em;
-  overflow: hidden;
-  text-align: center;
-  white-space: nowrap;
+  font-size: 1.5em;
+  line-height: 3.2em;
 }
 
-@media screen and (max-width: 500px) {
+@media screen and (min-width: 500px) {
   #appTitle {
-    color: white;
-    font-size: 1.5em;
-    margin-left: 0;
-    overflow: hidden;
-    padding-left: 0;
-    padding-top: 13px;
-    text-align: left;
-    white-space: nowrap;
+    font-size: 3em;
+    line-height: 1.5em;
+    text-align: center;
+  }
+
+  #miniImg1{
+    margin: 0 0 0 2em;
+  }
+
+  .status{
+    width: 35%;
+  }
+
+  .sticker{
+    font-size: 40%;
+    width: 19%;
   }
 }
 
 .resultContainer {
-    margin-top: 1em;
-    overflow: hidden;
+  margin-top: 1em;
+  overflow: hidden;
+  width: 100%;
 }
 
-.faded{
- opacity: 0.5;
+.breadcrumbs{
+  margin-left: 10px;
 }
 
-.itemImg {
-  font-size: 11vw;
-  margin-left: -3vw;
-  width: 300%;
+.card{
+  margin: 5px;
+  padding: 5px;
 }
 
-@media screen and (min-width: 500px) {
-  .itemImg {
-    font-size: 9vw;
-    margin-left: 0;
-    width: 100%;
-  }
+.titleCard{
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+.image {
+  flex: 1;
+}
+
+.itemImg {
+  max-height: 150px;
+  max-width: 100%;
 }
 
 .itemTitle {
-    text-align: center;
+  flex: 2;
 }
 
-.infoBox {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+.center {
+  font-weight: bold;
+  padding: 20px;
+  text-align: center;
 }
 
-article {
-  background-color: whitesmoke;
-  border-radius: 3px;
-  margin-bottom: 1em;
-  padding-bottom: 1em;
-  padding-top: 1em;
+.subTitle{
+  font-size: 0.75em;
+  font-style: italic;
+  font-weight: normal;
 }
 
-.miniSearchItem{
-  padding-bottom: 1em;
-  padding-top: 1em;
+.right {
+  text-align: right;
 }
+
+.status{
+  width: 65%;
+}
+
+.faded{
+  opacity: 0.5;
+}
+
+.infoTitle{
+  font-size: 2em;
+  margin-top: -7.5px;
+}
+
 .miniItemImg{
-  width:100%;
+  width: 32.5%;
+}
 
+#miniImg1{
+  margin: 0 0 0 0.05em;
 }
-.searchResultList {
-  list-style: none;
-  padding: 0;
+
+#miniImg2{
+  float: right;
+  margin-right: 0;
 }
 
-.stickers{
+.sticker{
   border: 1px dotted black;
-  font-size: 30%;
-  padding-bottom: 1em;
-  padding-top: 1em;
+  display: inline-block;
+  font-size: 90%;
+  margin: 0;
+  padding: 1em 0;
+  width: 99%;
 }
diff --git a/public/wrench.png b/public/wrench.png
new file mode 100644
index 0000000..21d8a4e
Binary files /dev/null and b/public/wrench.png differ
diff --git a/views/item.ejs b/views/item.ejs
index c8807d2..8761768 100644
--- a/views/item.ejs
+++ b/views/item.ejs
@@ -1,6 +1,6 @@
 <% include ./partials/header %>
-<div class="resultContainer container">
-	<div class="col-xs-12"><% include ./partials/itemCards %></div>
-	<div class="col-xs-12"><% include ./partials/itemImgInfo %></div>
+<div class="resultContainer">
+  <% include ./partials/itemCards %>
+  <% include ./partials/itemImgInfo %>
 </div>
 <% include ./partials/footer %>
diff --git a/views/notFound.ejs b/views/notFound.ejs
index 20dc903..f5efa0b 100644
--- a/views/notFound.ejs
+++ b/views/notFound.ejs
@@ -1,11 +1,9 @@
 <% include ./partials/header %>
-
-<img class="col-xs-12 col-lg-4 col-lg-offset-4" src="/emoji.png" alt="" />
-<article style='margin-top:2em'class="col-xs-12 col-lg-4 col-lg-offset-4">
+<center>
+  <img width="50%" src="/frown.png" alt="frown" />
+</center>
+<article class="subCard">
   <p>Sorry, item not found with the id:</p>
-  <p>
-    <strong><%= id %></strong>
-  </p>
+  <strong><%= id %></strong>
 </article>
-
 <% include ./partials/footer %>
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index d9c57fd..f501e3c 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -11,6 +11,6 @@
 </head>
 
 <body>
-    <div class="logo col-xs-12">
-        <div id="appTitle">CoderBunker Inventory</div>
-    </div>
+  <div class="logo">
+    <div id="appTitle">CoderBunker Inventory</div>
+  </div>
diff --git a/views/partials/itemCards.ejs b/views/partials/itemCards.ejs
index 2658c29..8b84bb6 100644
--- a/views/partials/itemCards.ejs
+++ b/views/partials/itemCards.ejs
@@ -1,32 +1,43 @@
-<div class="col-xs-12">
-  <span> <a href="/search?floor=<%- floor %>"> <%- floor.toLowerCase() %> </a></span> >
-  <span> <a href="/search?floor=<%- floor %>&room=<%- room %>"> <%- room.toLowerCase() %>  </a></span> >
-  <span> <a href="/search?floor=<%- floor %>&room=<%- room %>&location=<%- location %>"> <%- location.toLowerCase() %>  </a></span> >
-  <span> <a href="/search?fixture=<%- fixture %>"> <%- fixture.toLowerCase() %> </a></span>
+<div class="breadcrumbs">
+  <span> <a href="/search?floor=<%- floor %>"> <%- floor %> </a></span> >
+  <span> <a href="/search?floor=<%- floor %>&room=<%- room %>"> <%- room %>  </a></span> >
+  <span> <a href="/search?floor=<%- floor %>&room=<%- room %>&location=<%- location %>"> <%- location %>  </a></span> >
+  <span> <a href="/search?fixture=<%- fixture %>"> <%- fixture %> </a></span>
 </div>
 <% if (uuid) { %>
-  <div class="well col-xs-12"> 
+  <div class="card titleCard">
 <% } else { %>
-  <div class="well faded col-xs-12">
+  <div class="card titleCard faded">
 <% } %>
-  <div class="col-xs-2">
+  <div class="image">
     <% if (picture === undefined || picture === '') { %>
-      <img class="itemImg" src="noImg.png" />
+      <% if (uuid) { %>
+        <a href="/<%- uuid %>"> <img class="itemImg" src="noImg.png" /> </a>
+      <% } else { %>
+        <img class="itemImg" src="noImg.png" />
+      <% } %>
     <% }else{ %>
-      <img class="itemImg" src=" <%- picture %> " />
-    <%}%>
+      <% if (uuid) { %>
+        <a href="/<%- uuid %>"><img class="itemImg" src=" <%- picture %> " /> </a>
+      <% } else { %>
+        <img class="itemImg" src=" <%- picture %> " />
+      <% } %>
+    <% } %>
   </div>
-  <div class="itemTitle col-xs-8">
+  <div class="itemTitle">
     <% if (uuid) { %>
-      <h4> <a href="/<%- uuid %>"> <%- fixture.toUpperCase().bold() %> </a> </h4>
+      <div class="center">
+        <a href="/<%- uuid %>"> <%- fixture %> </a>
     <% } else { %>
-      <h4> <%- fixture.toUpperCase().bold() %> </h4>
+      <div class="center">
+      <%- fixture %>
     <% } %>
-    <span> <%- model.toLowerCase().italics() %> </span>
+    <div class="subTitle"> <%- model %> </div>
+    </div>
   </div>
-  <div class="itemImg col-xs-2">
+  <div class="image right">
     <% if (status === 'broken') { %>
-      <span class="glyphicon glyphicon-wrench" title="Status: <%- status %>" alt="<%- status %>" style="color:red"></span>
-    <%}%>
+      <img class="status" title="Status: <%- status %>" alt="<%- status %>" src="wrench.png" />
+    <% } %>
   </div>
 </div>
diff --git a/views/partials/itemImgInfo.ejs b/views/partials/itemImgInfo.ejs
index 6a28ee2..eaec51e 100644
--- a/views/partials/itemImgInfo.ejs
+++ b/views/partials/itemImgInfo.ejs
@@ -1,39 +1,39 @@
 <% if (HOWTO) { %>
-  <article class="well col-xs-12">
-    <h2>How To</h2>
+  <article class="card">
+    <div class="infoTitle">How To</div>
     <%- HOWTO %>
   </article>
-<%}%>
+<% } %>
 <% if (Troubleshooting) { %>
-  <article class="well col-xs-12">
-    <h2>Need Help</h2>
+  <article class="card">
+    <div class="infoTitle">Need Help</div>
     <%- Troubleshooting %>
   </article>
 <% } %>
 <% if ( similarItems.length > 0 ) { %>
-  <article class="well col-xs-12">
-    <h2>Similar Items</h2>
-      <% for(var i = 0; i < similarItems.length; i++){ %>
-        <div class='miniSearchItem col-xs-4'>
-          <% if (!similarItems[i].picture) { %>
-            <% if (!similarItems[i].uuid) { %>
-              <img class="miniItemImg faded" src="noImg.png" />
-            <% }else{ %>
-              <a href="/<%- similarItems[i].uuid %>"> <img class="miniItemImg" src="noImg.png" /> </a>
-            <%}%>
-          <% } else{ %>
-            <% if (!similarItems[i].uuid) { %>
-              <img class="miniItemImg faded" src=" <%- similarItems[i].picture %> " />
-            <% }else{ %>
-              <a href="/<%- similarItems[i].uuid %>"> <img class="miniItemImg" src=" <%- similarItems[i].picture %> " /> </a>
-            <%} %>
+  <div class="card">
+    <div class="infoTitle">Similar Items</div>
+    <div class='miniSearchItem'>
+      <% for (var i = 0; i < similarItems.length; i++) { %>
+        <% if (!similarItems[i].picture) { %>
+          <% if (!similarItems[i].uuid) { %>
+            <img class="miniItemImg faded" src="noImg.png" id='miniImg<%- i %>' />
+          <% }else{ %>
+            <a href="/<%- similarItems[i].uuid %>"> <img class="miniItemImg" src="noImg.png" id='miniImg<%- i %>'/> </a>
+          <%}%>
+        <% } else{ %>
+          <% if (!similarItems[i].uuid) { %>
+            <img class="miniItemImg faded" src=" <%- similarItems[i].picture %> " id='miniImg<%- i %>'/>
+          <% }else{ %>
+            <a href="/<%- similarItems[i].uuid %>"> <img class="miniItemImg" src=" <%- similarItems[i].picture %> " id='miniImg<%- i %>'/> </a>
           <% } %>
-         </div>
+        <% } %>
       <% } %>
-  </article>
-<%}%>
-<article class="well col-xs-12">
-  <h2>Details</h2>
+    </div>
+  </div>
+<% } %>
+<article class="card">
+  <div class="infoTitle">Details</div>
   <%- details %>
   <ul>
     <li>model: <%- model %></li>
diff --git a/views/qrList.ejs b/views/qrList.ejs
index 2b6f3d7..76bdd2e 100644
--- a/views/qrList.ejs
+++ b/views/qrList.ejs
@@ -1,22 +1,18 @@
 <% include ./partials/header %>
-<div class="col-xs-12">
-  <% for ( var i = 0; i < matches.length; i++) {%>
-    <div class="stickers col-xs-3">
-      <div class="col-xs-12">
-        <%- matches[i].floor.toLowerCase() %> >
-        <%- matches[i].room.toLowerCase() %> >
-        <%- matches[i].location.toLowerCase() %> >
-        <%- matches[i].fixture.toLowerCase() %>
-      </div>
-      <div class="col-xs-12">
+<div class="resultContainer">
+  <center>
+    <% for ( var i = 0; i < matches.length; i++) {%>
+      <div class="sticker">
+        <div class="breadcrumbs">
+          <%- matches[i].floor %> >
+          <%- matches[i].room %> >
+          <%- matches[i].location %> >
+          <%- matches[i].fixture %>
+        </div>
         <%- matches[i].qr %>
+        <%- matches[i].uuid %>
       </div>
-      <div class="col-xs-12">
-        <center>
-          <%- matches[i].uuid %>
-        </center>
-      </div>
-    </div>
-  <% } %>
+    <% } %>
+  </center>
 </div>
 <% include ./partials/footer %>
diff --git a/views/recent.ejs b/views/recent.ejs
index 372cf57..15aac3c 100644
--- a/views/recent.ejs
+++ b/views/recent.ejs
@@ -1,7 +1,7 @@
 <% include ./partials/header %>
-<div class="resultContainer col-xs-12">
-  <h1>Recently scanned QR code</h1>
-  <article class="col-xs-12">
+<div class="resultContainer">
+  <h2 style="padding: 5px">Recently scanned QR codes</h2>
+  <article class="subCard">
     <ul class='recent-list'>
       <% for(var i = 0; i <allScans.length; i++){%>
         <% if(allScans[i].fixture) { %>
diff --git a/views/search.ejs b/views/search.ejs
index 0542dd2..743a699 100644
--- a/views/search.ejs
+++ b/views/search.ejs
@@ -1,5 +1,5 @@
 <% include ./partials/header %>
-<div class="resultContainer col-xs-12">
+<div class="resultContainer">
   <% matches.forEach(function(el) { %>
     <%- include('./partials/itemCards', el); %>
   <% }) %>