diff --git a/assets/views/index.jet.html b/assets/views/index.jet.html
index bcdf741..7be7a69 100644
--- a/assets/views/index.jet.html
+++ b/assets/views/index.jet.html
@@ -1,77 +1,83 @@
 {{- extends "layout/default" }}
 {{- block body() }}
+<div class="row justify-content-center mb-5">
+    <!-- Landing page if user is not logged in -->
+    {{- if !.LoggedIn }}
+    <div class="col-12">
+        <div class="alert alert-info mb-4" role="alert">
+            Not logged in. You can login <a href="/settings" class="alert-link">here</a>.
+        </div>
 
-<div class="container mb-5">
-  {{- if !.LoggedIn }}
-  <div class="alert alert-info mb-4" role="alert">
-    Not logged in. You can login <a href="/settings" class="alert-link">here</a>.
-  </div>
+        <div class="card mb-4">
+            <div class="card-header p-3">
+                <div class="d-flex justify-content-between align-items-center">
+                    <h2 class="h4 fw-bold mb-0">Today's illustration rankings</h2>
+                    <a href="/ranking?content=all" class="btn btn-sm btn-outline-primary">See more</a>
+                </div>
+            </div>
+            <div class="card-body p-3">
+                <div class="row flex-nowrap overflow-auto">
+                    {{- include "fragments/ranking-tn" .NoTokenData.Contents }}
+                </div>
+            </div>
+        </div>
+    </div>
+    {{- else }}
 
-  <div class="card mb-4">
-    <div class="card-header p-3">
-      <div class="d-flex justify-content-between align-items-center">
-        <h2 class="h4 fw-bold mb-0">Today's illustration rankings</h2>
-        <a href="/ranking?content=all" class="btn btn-sm btn-outline-primary">See more</a>
-      </div>
+    <!-- Landing page if user is logged in -->
+    <div class="col-sm-12 col-md-9">
+        <div class="card mb-4">
+            <div class="card-header p-3">
+            <div class="d-flex justify-content-between align-items-center">
+                <h2 class="h4 fw-bold mb-0">Newest works by users you follow</h2>
+                <a href="/self/followingWorks" class="btn btn-sm btn-outline-primary">See more</a>
+            </div>
+            </div>
+            <div class="card-body p-3">
+            <div class="row flex-nowrap overflow-auto">
+                {{- include "fragments/small-tn" .Data.Following }}
+            </div>
+            </div>
+        </div>
     </div>
-    <div class="card-body p-3">
-      <div class="row flex-nowrap overflow-auto">
-        {{- include "fragments/ranking-tn" .NoTokenData.Contents }}
-      </div>
-    </div>
-  </div>
 
-  {{- else }}
-  <div class="card mb-4">
-    <div class="card-header p-3">
-      <h2 class="h4 fw-bold mb-0">Filter</h2>
-    </div>
-    <div class="card-body p-3">
-      <nav class="nav nav-pills">
-        <a class="nav-link" href="/?mode=all">All</a>
-        <a class="nav-link" href="/?mode=r18">R-18</a>
-      </nav>
-    </div>
-  </div>
+    <div class="col-12">
+        <!-- Filter settings -->
+        <div class="card mb-4">
+            <div class="card-header p-3">
+                <h2 class="h4 fw-bold mb-0">Filter</h2>
+            </div>
+            <div class="card-body p-3">
+                <a href="/?mode=all" class="btn btn-outline-primary me-2" role="button">All</a>
+                <a href="/?mode=r18" class="btn btn-outline-danger" role="button" >R-18</a>
+            </div>
+        </div>
 
-  <div class="card mb-4">
-    <div class="card-header p-3">
-      <div class="d-flex justify-content-between align-items-center">
-        <h2 class="h4 fw-bold mb-0">Newest works by users you follow</h2>
-        <a href="/self/followingWorks" class="btn btn-sm btn-outline-primary">See more</a>
-      </div>
-    </div>
-    <div class="card-body p-3">
-      <div class="row flex-nowrap overflow-auto">
-        {{- include "fragments/small-tn" .Data.Following }}
-      </div>
-    </div>
-  </div>
+        <div class="card mb-4">
+            <div class="card-header p-3">
+            <h2 class="h4 fw-bold mb-0">Recommended works</h2>
+            </div>
+            <div class="card-body p-3">
+            <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
+                {{- include "fragments/small-tn" .Data.Recommended }}
+            </div>
+            </div>
+        </div>
 
-  <div class="card mb-4">
-    <div class="card-header p-3">
-      <h2 class="h4 fw-bold mb-0">Recommended works</h2>
-    </div>
-    <div class="card-body p-3">
-      <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
-        {{- include "fragments/small-tn" .Data.Recommended }}
-      </div>
-    </div>
-  </div>
+        {{- range .Data.RecommendByTags }}
+        <div class="card mb-4">
+            <div class="card-header p-3">
+            <h2 class="h4 fw-bold mb-0">Recommended illustrations tagged <a href="/tags/{{.Name}}" class="text-decoration-none">#{{.Name}}</a></h2>
+            </div>
+            <div class="card-body p-3">
+            <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
+                {{- include "fragments/small-tn" .Artworks }}
+            </div>
+            </div>
+        </div>
+        {{- end }}
 
-  {{- range .Data.RecommendByTags }}
-  <div class="card mb-4">
-    <div class="card-header p-3">
-      <h2 class="h4 fw-bold mb-0">Recommended illustrations tagged <a href="/tags/{{.Name}}" class="text-decoration-none">#{{.Name}}</a></h2>
-    </div>
-    <div class="card-body p-3">
-      <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
-        {{- include "fragments/small-tn" .Artworks }}
-      </div>
-    </div>
-  </div>
-  {{- end }}
-
-  {{- end }}
+{{- end }}
+</div>
 </div>
 {{- end }}