diff --git a/assets/views/index.jet.html b/assets/views/index.jet.html
index 229ed68..2257eac 100644
--- a/assets/views/index.jet.html
+++ b/assets/views/index.jet.html
@@ -1,42 +1,75 @@
 {{- extends "layout/default" }}
 {{- block body() }}
 
-<div class="container">
+<div class="container mb-5">
   {{- if !.LoggedIn }}
-  <p>Not logged in. You can login <a href="/settings">here</a>.</p>
-  <div class="component-header">
-    <h2>Today's illustration rankings</h2>
-    <a href="/ranking?content=all">See more</a>
+  <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="artwork-container-scroll">
-    {{- include "fragments/ranking-tn" .NoTokenData.Contents }}
+
+  <div class="card mb-4">
+    <div class="card-header px-4 py-3">
+      <div class="d-flex justify-content-between align-items-center">
+        <h2 class="h3 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>
 
   {{- else }}
-  <div class="switcher">
-    <span class="switch-title">Filter</span>
-    <a href="/?mode=all" class="switch-button">All</a>
-    <a href="/?mode=r18" class="switch-button">R-18</a>
+  <div class="card mb-4">
+    <div class="card-header px-4 py-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="component-header">
-    <h2>Newest works by users you follow</h2>
-    <a href="/self/followingWorks">See more</a>
+
+  <div class="card mb-4">
+    <div class="card-header px-4 py-3">
+      <div class="d-flex justify-content-between align-items-center">
+        <h2 class="h3 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="artwork-container-scroll">
-    {{- include "fragments/small-tn" .Data.Following }}
+
+  <div class="card mb-4">
+    <div class="card-header px-4 py-3">
+      <h2 class="h3 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>
-  <br />
-  <h2>Recommended works</h2>
-  <div class="artwork-container">
-    {{- include "fragments/small-tn" .Data.Recommended }}
-  </div>
-  <br />
+
   {{- range .Data.RecommendByTags }}
-  <h2>Recommended illustrations tagged <a href="/tags/{{.Name}}">#{{.Name}}</a></h2>
-  <div class="artwork-container">
-    {{- include "fragments/small-tn" .Artworks }}
+  <div class="card mb-4">
+    <div class="card-header px-4 py-3">
+      <h2 class="h3 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>
-  <br />
   {{- end }}
 
   {{- end }}