diff --git a/s/index.tpl.html b/s/index.tpl.html
index a8a60c0..7962f77 100644
--- a/s/index.tpl.html
+++ b/s/index.tpl.html
@@ -4,16 +4,14 @@
   <title>f0ck me!</title>
   <link rel="icon" type="image/gif" href="./s/favicon.gif" />
   <link rel="stylesheet" type="text/css" href="./s/style.css">
+  <link rel="stylesheet" type="text/css" href="//codepen.io/assets/reset/normalize.css">
 </head>
 <body>
   <div class="navbar"><a href="/">f0ck.me</a> | <a href="/how">how to</a> | <a href="/contact">Contact</a></div>
-  <div class="body">
-    <div id="posts" data-last="{{ last }}">
-      {% for item in items %}<a href="./{{ item.id }}" title="{{ item.mime }}"><img class="thumb" src="./t/{{ item.id }}.png" /></a>
-      {% endfor %}
-    </div>
-    <div class="clear"></div>
-  </div>
+  <ul id="posts" data-last="{{ last }}">
+    {% for item in items %}<li class="post"><a href="//f0ck.me/{{ item.id }}" title="{{ item.mime }}"><img class="thumb" src="//f0ck.me/t/{{ item.id }}.png" /></a></li>
+    {% endfor %}
+  </ul>
   <script src="./s/jquery-3.1.0.min.js"></script>
   <script>
   var scrollListener = () => {
@@ -26,7 +24,7 @@
             var html = "";
             for(var i = 0; i < msg.items.length; i++)
               if(msg.items[i].id)
-                html += "<a href=\"./"+msg.items[i].id+"\" title=\""+msg.items[i].mime+"\"><img class=\"thumb\" src=\"./t/"+msg.items[i].id+".png\" /></a>\n";
+                html += "<li class=\"post\"><a href=\"//f0ck.me/"+msg.items[i].id+"\" title=\""+msg.items[i].mime+"\"><img class=\"thumb\" src=\"//f0ck.me/t/"+msg.items[i].id+".png\" /></a></li>\n";
             $('#posts').append(html);
             $('#posts').data('last', msg.last);
           }
diff --git a/s/style.css b/s/style.css
index d061f3b..0db9f35 100644
--- a/s/style.css
+++ b/s/style.css
@@ -1,24 +1,35 @@
 html, body {
   height: 100%;
+  width: 100%;
 }
 body {
-  width: 100%;
   margin: 1em auto 3em auto;
   background-color: #262626;
   color: #fff;
   font-family: Monospace;
 }
-.body {
-  width: 90%;
-  margin: 1em auto 3em auto;
-  background-color: #262626;
-  color: #fff;
-  font-family: Monospace;
+ul#posts {
+  width: calc(100% - 50px);
+  margin: 0;
+  margin-left: 25px;
+  padding: 0;
+  list-style: none;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-flow: row wrap;
+  justify-content: space-around;
+}
+li.post {
+  padding: 5px;
+  width: 128px;
+  height: 128px;
+  margin-top: 5px;
+  line-height: 128px;
 }
 .thumb {
-  border: 0;
-  margin: 0 8px 8px 0;
-  float: left;
   border: 2px solid #4c4a4a;
 }
 .thumb:hover {
@@ -53,6 +64,7 @@ a:hover {
 }
 .navbar {
   text-align: center;
+  margin-top: 7px;
 }
 .return {
   text-align: center;
