diff --git a/src/util.cr b/src/util.cr
index 8d0f0df..50ad6d0 100644
--- a/src/util.cr
+++ b/src/util.cr
@@ -143,3 +143,7 @@ def set_token_cookie(env, token)
   cookie.expires = Time.local.shift years: 1
   env.response.cookies << cookie
 end
+
+macro render_component(filename)
+  render "src/views/components/#{{{filename}}}.ecr"
+end
diff --git a/src/views/components/card.ecr b/src/views/components/card.ecr
new file mode 100644
index 0000000..91cde5b
--- /dev/null
+++ b/src/views/components/card.ecr
@@ -0,0 +1,35 @@
+<div class="item" data-mtime="<%= item.mtime.to_unix %>" data-progress="<%= progress || 0.0 %>"
+  <% if item.is_a? Entry %>
+  id="<%= item.id %>"
+  <% end %>>
+
+  <a class="acard"
+    <% unless item.is_a? Entry %>
+    href="<%= base_url %>book/<%= item.id %>"
+    <% end %>>
+
+    <div class="uk-card uk-card-default"
+      <% if item.is_a? Entry %>
+      onclick="showModal(&quot;<%= item.encoded_path %>&quot;, '<%= item.pages %>', <%= (progress.not_nil! * 100).round(1) %>, &quot;<%= item.book.encoded_display_name %>&quot;, &quot;<%= item.encoded_display_name %>&quot;, '<%= item.title_id %>', '<%= item.id %>')"
+      <% end %>>
+
+      <div class="uk-card-media-top">
+        <img data-src="<%= item.cover_url %>" data-width data-height alt="" uk-img>
+      </div>
+
+      <div class="uk-card-body">
+        <% unless (item.is_a? Title && item.entries.size == 0) || progress.nil? %>
+        <div class="uk-card-badge uk-label"><%= (progress * 100).round(1) %>%</div>
+        <% end %>
+
+        <h3 class="uk-card-title break-word" data-title="<%= item.display_name.gsub("\"", "&quot;") %>"><%= item.display_name %></h3>
+        <% if item.is_a? Entry %>
+        <p><%= item.pages %> pages</p>
+        <% end %>
+        <% if item.is_a? Title %>
+        <p><%= item.size %> entries</p>
+        <% end %>
+      </div>
+    </div>
+  </a>
+</div>
diff --git a/src/views/components/sort-form.ecr b/src/views/components/sort-form.ecr
new file mode 100644
index 0000000..6036a15
--- /dev/null
+++ b/src/views/components/sort-form.ecr
@@ -0,0 +1,8 @@
+<div class="uk-form-horizontal">
+  <select class="uk-select" id="sort-select">
+    <% hash.each do |k, v| %>
+    <option id="<%= k %>-up">▲ <%= v %></option>
+    <option id="<%= k %>-down">▼ <%= v %></option>
+    <% end %>
+  </select>
+</div>
diff --git a/src/views/index.ecr b/src/views/index.ecr
index 51c9b55..afbbec5 100644
--- a/src/views/index.ecr
+++ b/src/views/index.ecr
@@ -8,37 +8,19 @@
     </form>
   </div>
   <div class="uk-margin-bottom uk-width-1-4@s">
-    <div class="uk-form-horizontal">
-      <select class="uk-select" id="sort-select">
-        <option id="name-up">▲ Name</option>
-        <option id="name-down">▼ Name</option>
-        <option id="date-up">▲ Date Modified</option>
-        <option id="date-down">▼ Date Modified</option>
-        <option id="progress-up">▲ Progress</option>
-        <option id="progress-down">▼ Progress</option>
-      </select>
-    </div>
+    <% hash = {
+      "name" => "Name",
+      "date" => "Date Modified",
+      "progress" => "Progress"
+    } %>
+    <%= render_component "sort-form" %>
   </div>
 </div>
 <div id="item-container" class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
-  <%- titles.each_with_index do |t, i| -%>
-  <div class="item" data-mtime="<%= t.mtime.to_unix %>" data-progress="<%= percentage[i] %>">
-    <a class="acard" href="<%= base_url %>book/<%= t.id %>">
-      <div class="uk-card uk-card-default">
-        <div class="uk-card-media-top">
-          <img data-src="<%= t.cover_url %>" data-width data-height alt="" uk-img>
-        </div>
-        <div class="uk-card-body">
-          <%- if t.entries.size > 0 -%>
-          <div class="uk-card-badge uk-label"><%= (percentage[i] * 100).round(1) %>%</div>
-          <%- end -%>
-          <h3 class="uk-card-title break-word" data-title="<%= t.display_name.gsub("\"", "&quot;") %>"><%= t.display_name %></h3>
-          <p><%= t.size %> entries</p>
-        </div>
-      </div>
-    </a>
-  </div>
-  <%- end -%>
+  <% titles.each_with_index do |item, i| %>
+  <% progress = percentage[i] %>
+  <%= render_component "card" %>
+  <% end %>
 </div>
 
 <% content_for "script" do %>
@@ -46,4 +28,4 @@
 <script src="<%= base_url %>js/dots.js"></script>
 <script src="<%= base_url %>js/search.js"></script>
 <script src="<%= base_url %>js/sort-items.js"></script>
-<% end %>
\ No newline at end of file
+<% end %>
diff --git a/src/views/title.ecr b/src/views/title.ecr
index a2f6eeb..1f704b2 100644
--- a/src/views/title.ecr
+++ b/src/views/title.ecr
@@ -22,52 +22,24 @@
     </form>
   </div>
   <div class="uk-margin-bottom uk-width-1-4@s">
-    <div class="uk-form-horizontal">
-      <select class="uk-select" id="sort-select">
-        <option id="auto-up">▲ Auto</option>
-        <option id="auto-down">▼ Auto</option>
-        <option id="name-up">▲ Name</option>
-        <option id="name-down">▼ Name</option>
-        <option id="date-up">▲ Date Modified</option>
-        <option id="date-down">▼ Date Modified</option>
-        <option id="progress-up">▲ Progress</option>
-        <option id="progress-down">▼ Progress</option>
-      </select>
-    </div>
+    <% hash = {
+      "auto" => "Auto",
+      "name" => "Name",
+      "date" => "Date Modified",
+      "progress" => "Progress"
+    } %>
+    <%= render_component "sort-form" %>
   </div>
 </div>
 <div id="item-container" class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
-  <%- title.titles.each_with_index do |t, i| -%>
-  <div class="item" data-mtime="<%= t.mtime.to_unix %>" data-progress="0.0">
-    <a class="acard" href="<%= base_url %>book/<%= t.id %>">
-      <div class="uk-card uk-card-default">
-        <div class="uk-card-media-top">
-          <img data-src="<%= t.cover_url %>" data-width data-height alt="" uk-img>
-        </div>
-        <div class="uk-card-body">
-          <h3 class="uk-card-title break-word" data-title="<%= t.display_name.gsub("\"", "&quot;") %>"><%= t.display_name %></h3>
-          <p><%= t.size %> entries</p>
-        </div>
-      </div>
-    </a>
-  </div>
-  <%- end -%>
-  <%- title.entries.each_with_index do |e, i| -%>
-  <div class="item" data-mtime="<%= e.mtime.to_unix %>" data-progress="<%= percentage[i] %>" id="<%= e.id %>">
-    <a class="acard">
-      <div class="uk-card uk-card-default" onclick="showModal(&quot;<%= e.encoded_path %>&quot;, '<%= e.pages %>', <%= (percentage[i] * 100).round(1) %>, &quot;<%= title.encoded_display_name %>&quot;, &quot;<%= e.encoded_display_name %>&quot;, '<%= e.title_id %>', '<%= e.id %>')">
-        <div class="uk-card-media-top">
-          <img data-src="<%= e.cover_url %>" alt="" data-width data-height uk-img>
-        </div>
-        <div class="uk-card-body">
-          <div class="uk-card-badge uk-label"><%= (percentage[i] * 100).round(1) %>%</div>
-          <h3 class="uk-card-title break-word" data-title="<%= e.display_name.gsub("\"", "&quot;") %>"><%= e.display_name %></h3>
-          <p><%= e.pages %> pages</p>
-        </div>
-      </div>
-    </a>
-  </div>
-  <%- end -%>
+  <% title.titles.each_with_index do |item, i| %>
+  <% progress = nil %>
+  <%= render_component "card" %>
+  <% end %>
+  <% title.entries.each_with_index do |item, i| %>
+  <% progress = percentage[i] %>
+  <%= render_component "card" %>
+  <% end %>
 </div>
 
 <div id="modal" class="uk-flex-top" uk-modal>