diff --git a/src/invidious/views/components/feed_menu.ecr b/src/invidious/views/components/feed_menu.ecr
new file mode 100644
index 00000000..5188689a
--- /dev/null
+++ b/src/invidious/views/components/feed_menu.ecr
@@ -0,0 +1,19 @@
+<div class="h-box pure-g">
+    <div class="pure-u-1-4"></div>
+    <div class="pure-u-1 pure-u-md-1-2">
+        <div class="pure-g">
+            <% feeds = ["Popular", "Top", "Trending"] %>
+            <% if env.get? "user" %>
+            <% feeds << "Subscriptions" %>
+            <% end %>
+            <% feeds.each do |feed| %>
+            <div class="pure-u-1-<%= feeds.size %>">
+                <a href="/feed/<%= feed.downcase %>" style="text-align:center;" class="pure-menu-heading">
+                    <%= translate(locale, feed) %>
+                </a>
+            </div>
+            <% end %>
+        </div>
+    </div>
+    <div class="pure-u-1-4"></div>
+</div>
\ No newline at end of file
diff --git a/src/invidious/views/index.ecr b/src/invidious/views/index.ecr
index a12455b0..6cc978e5 100644
--- a/src/invidious/views/index.ecr
+++ b/src/invidious/views/index.ecr
@@ -3,29 +3,7 @@
 <title>Invidious</title>
 <% end %>
 
-<div class="h-box pure-g">
-    <div class="pure-u-1-4"></div>
-    <div class="pure-u-1 pure-u-md-1-2">
-        <div class="pure-g">
-            <div class="pure-u-1-3">
-                <a href="/feed/popular" style="text-align:center;" class="pure-menu-heading">
-                    <%= translate(locale, "Popular") %>
-                </a>
-            </div>
-            <div class="pure-u-1-3">
-                <a href="/feed/top" style="text-align:center;" class="pure-menu-heading">
-                    <%= translate(locale, "Top") %>
-                </a>
-            </div>
-            <div class="pure-u-1-3">
-                <a href="/feed/trending" style="text-align:center;" class="pure-menu-heading">
-                    <%= translate(locale, "Trending") %>
-                </a>
-            </div>
-        </div>
-    </div>
-    <div class="pure-u-1-4"></div>
-</div>
+<%= rendered "components/feed_menu" %>
 
 <div class="pure-g">
 <% top_videos.each_slice(4) do |slice| %>
diff --git a/src/invidious/views/popular.ecr b/src/invidious/views/popular.ecr
index 8d67241f..f235aad8 100644
--- a/src/invidious/views/popular.ecr
+++ b/src/invidious/views/popular.ecr
@@ -3,29 +3,7 @@
 <title><%= translate(locale, "Popular") %> - Invidious</title>
 <% end %>
 
-<div class="h-box pure-g">
-    <div class="pure-u-1-4"></div>
-    <div class="pure-u-1 pure-u-md-1-2">
-        <div class="pure-g">
-            <div class="pure-u-1-3">
-                <a href="/feed/popular" style="text-align:center;" class="pure-menu-heading">
-                    <%= translate(locale, "Popular") %>
-                </a>
-            </div>
-            <div class="pure-u-1-3">
-                <a href="/feed/top" style="text-align:center;" class="pure-menu-heading">
-                    <%= translate(locale, "Top") %>
-                </a>
-            </div>
-            <div class="pure-u-1-3">
-                <a href="/feed/trending" style="text-align:center;" class="pure-menu-heading">
-                    <%= translate(locale, "Trending") %>
-                </a>
-            </div>
-        </div>
-    </div>
-    <div class="pure-u-1-4"></div>
-</div>
+<%= rendered "components/feed_menu" %>
 
 <div class="pure-g">
 <% popular_videos.each_slice(4) do |slice| %>
diff --git a/src/invidious/views/subscriptions.ecr b/src/invidious/views/subscriptions.ecr
index 6679cdf9..109da18f 100644
--- a/src/invidious/views/subscriptions.ecr
+++ b/src/invidious/views/subscriptions.ecr
@@ -2,6 +2,8 @@
 <title><%= translate(locale, "Subscriptions") %> - Invidious</title>
 <% end %>
 
+<%= rendered "components/feed_menu" %>
+
 <div class="pure-g h-box">
     <div class="pure-u-1-3">
         <h3>
diff --git a/src/invidious/views/top.ecr b/src/invidious/views/top.ecr
index ea5679c4..acf122a6 100644
--- a/src/invidious/views/top.ecr
+++ b/src/invidious/views/top.ecr
@@ -3,29 +3,7 @@
 <title><%= translate(locale, "Top") %> - Invidious</title>
 <% end %>
 
-<div class="h-box pure-g">
-    <div class="pure-u-1-4"></div>
-    <div class="pure-u-1 pure-u-md-1-2">
-        <div class="pure-g">
-            <div class="pure-u-1-3">
-                <a href="/feed/popular" style="text-align:center;" class="pure-menu-heading">
-                    <%= translate(locale, "Popular") %>
-                </a>
-            </div>
-            <div class="pure-u-1-3">
-                <a href="/feed/top" style="text-align:center;" class="pure-menu-heading">
-                    <%= translate(locale, "Top") %>
-                </a>
-            </div>
-            <div class="pure-u-1-3">
-                <a href="/feed/trending" style="text-align:center;" class="pure-menu-heading">
-                    <%= translate(locale, "Trending") %>
-                </a>
-            </div>
-        </div>
-    </div>
-    <div class="pure-u-1-4"></div>
-</div>
+<%= rendered "components/feed_menu" %>
 
 <div class="pure-g">
 <% top_videos.each_slice(4) do |slice| %>
diff --git a/src/invidious/views/trending.ecr b/src/invidious/views/trending.ecr
index a3db4de3..617a9a58 100644
--- a/src/invidious/views/trending.ecr
+++ b/src/invidious/views/trending.ecr
@@ -3,29 +3,7 @@
 <title><%= translate(locale, "Trending") %> - Invidious</title>
 <% end %>
 
-<div class="h-box pure-g">
-    <div class="pure-u-1-4"></div>
-    <div class="pure-u-1 pure-u-md-1-2">
-        <div class="pure-g">
-            <div class="pure-u-1-3">
-                <a href="/feed/popular" style="text-align:center;" class="pure-menu-heading">
-                    <%= translate(locale, "Popular") %>
-                </a>
-            </div>
-            <div class="pure-u-1-3">
-                <a href="/feed/top" style="text-align:center;" class="pure-menu-heading">
-                    <%= translate(locale, "Top") %>
-                </a>
-            </div>
-            <div class="pure-u-1-3">
-                <a href="/feed/trending" style="text-align:center;" class="pure-menu-heading">
-                    <%= translate(locale, "Trending") %>
-                </a>
-            </div>
-        </div>
-    </div>
-    <div class="pure-u-1-4"></div>
-</div>
+<%= rendered "components/feed_menu" %>
 
 <div class="pure-g h-box">
     <div class="pure-u-2-3">