diff --git a/static/index.html b/static/index.html
index 264758f..82e09f2 100644
--- a/static/index.html
+++ b/static/index.html
@@ -147,7 +147,7 @@
 <section>
 {{ range $category, $movies := .Categories }}
 <article>
-    <h2 class="category-title"><a href="/category/{{ $category }}">{{ $category }}</a></h2>
+    <h2 class="category-title"><a href="/movies/category/{{ $category }}">{{ $category }}</a></h2>
     <div class="section">
         <div class="row">
             <div class="row__inner">
diff --git a/static/list.html b/static/list.html
new file mode 100644
index 0000000..6a0a77d
--- /dev/null
+++ b/static/list.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>YTSFlix {{ .Category}}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        body,
+        html {
+            padding: 0;
+            margin: 0;
+            background: #171618;
+            color: #ecf0f1;
+            font-family: 'Open Sans', sans-serif;
+            width: 100%;
+        }
+        .section {
+            padding: 0px 10px 0px 10px;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+        }
+        * {
+            box-sizing: border-box;
+        }
+        h1,
+        p {
+            text-align: center;
+        }
+        p {
+            width: 100%;
+            max-width: 500px;
+            margin: auto;
+        }
+        .contain {
+            width: 100%;
+        }
+        .row {
+            width: 100%;
+        }
+        .row__inner {
+            transition: 450ms -webkit-transform;
+            transition: 450ms transform;
+            transition: 450ms transform, 450ms -webkit-transform;
+            font-size: 0;
+            white-space: nowrap;
+            margin: 25px 0;
+            padding-bottom: 10px;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            width: 100%;
+        }
+        .tile {
+            margin: 16px;
+            position: relative;
+            display: inline-block;
+            width: 143px;
+            height: 201px;
+            margin-right: 10px;
+            font-size: 20px;
+            cursor: pointer;
+            transition: 450ms all;
+            -webkit-transform-origin: center left;
+            transform-origin: center left;
+        }
+        .tile__img {
+            width: 143px;
+            height: 201px;
+            -o-object-fit: cover;
+            object-fit: cover;
+        }
+        .tile__details {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            top: 0;
+            font-size: 10px;
+            opacity: 0;
+            background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
+            transition: 450ms opacity;
+        }
+        .tile__details:after,
+        .tile__details:before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            display: #000;
+        }
+        /*.tile__details:after {*/
+            /*margin-top: -25px;*/
+            /*margin-left: -25px;*/
+            /*width: 50px;*/
+            /*height: 50px;*/
+            /*border: 3px solid #ecf0f1;*/
+            /*line-height: 50px;*/
+            /*text-align: center;*/
+            /*border-radius: 100%;*/
+            /*background: rgba(0,0,0,0.5);*/
+            /*z-index: 1;*/
+        /*}*/
+        .tile__details:before {
+            content: '▶';
+            left: 0;
+            width: 100%;
+            font-size: 30px;
+            margin-left: 7px;
+            margin-top: -18px;
+            text-align: center;
+            z-index: 2;
+            color: white
+        }
+        .tile:hover .tile__details {
+            opacity: 1;
+        }
+        .tile__title {
+            position: absolute;
+            bottom: 0;
+            padding: 10px;
+            color: white;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            width: 130px;
+        }
+        .row__inner:hover {
+            -webkit-transform: translate3d(-10.724999999999994px, 0, 0);
+            transform: translate3d(-10.724999999999994px, 0, 0);
+        }
+        .row__inner:hover .tile {
+            opacity: 0.6;
+            z-index: 1;
+        }
+        .row__inner:hover .tile:hover {
+            -webkit-transform: scale(1.15);
+            transform: scale(1.15);
+            opacity: 1;
+            z-index: 2;
+        }
+        .tile:hover ~ .tile {
+            -webkit-transform: translate3d(21.44999999999999px, 0, 0);
+            transform: translate3d(21.44999999999999px, 0, 0);
+        }
+        .category-title {
+            margin: 0;
+            padding-left: 16px;
+        }
+    </style>
+<body>
+{{template "navigation"}}
+<section>
+    <h2 class="category-title">{{ .Category }}</h2>
+    <div class="section">
+        <div class="row">
+            <div class="row__inner">
+            {{ range $title, $movie := .Movies }}
+                <a class="tile" href="{{ $movie.Link }}">
+                    <div class="tile__media">
+                        <img class="tile__img" src="{{ .Cover }}" alt=""  />
+                    </div>
+                    <div class="tile__details">
+                        <div class="tile__title">
+                            {{ $title }}
+                        </div>
+                    </div>
+                </a>
+            {{ end }}
+            </div>
+        </div>
+    </div>
+</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/static/nav.html b/static/nav.html
index b4c0024..cfb0181 100644
--- a/static/nav.html
+++ b/static/nav.html
@@ -78,7 +78,7 @@
                         window.location = "/movies/" + search;
                     }
                 </script>
-                <input id="search" type="text" name="search" class="search" placeholder="Search"/>
+                <input id="search" type="text" name="search" class="search" placeholder="Search" value=""/>
             </form>
         </li>
     </ul>
