diff --git a/assets/css/default.css b/assets/css/default.css
index c238835f..910a8fed 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -760,6 +760,10 @@ h1, h2, h3, h4, h5, p,
   margin: 0 2px;
 }
 
+/*
+ * Compilations
+ */
+
 input.compilation-video-timestamp {
   width: 50px;
   height: 20px;
diff --git a/src/invidious/views/components/item.ecr b/src/invidious/views/components/item.ecr
index 57115b8f..b0f50fe2 100644
--- a/src/invidious/views/components/item.ecr
+++ b/src/invidious/views/components/item.ecr
@@ -87,93 +87,6 @@
                     </p>
                 </a></div>
             </div>
-        <% when InvidiousCompilation %>
-            <% url = "/compilation?list=#{item.id}" %>   
-            <a style="width:100%" href="<%= url %>">
-                <% if !env.get("preferences").as(Preferences).thin_mode %>
-                    <div class="thumbnail">
-                        <img loading="lazy" tabindex="-1" class="thumbnail" src="<%= URI.parse(item.thumbnail || "/").request_target %>" alt="" />
-                        <p class="length"><%= translate_count(locale, "generic_videos_count", item.video_count, NumberFormatting::Separator) %></p>
-                    </div>
-                <% end %>
-                <p dir="auto"><%= HTML.escape(item.title) %></p>
-            </a>
-            <a href="/channel/<%= item.ucid %>">
-                <p dir="auto"><b><%= HTML.escape(item.author) %><% if !item.is_a?(InvidiousCompilation) && !item.is_a?(InvidiousPlaylist) && !item.author_verified.nil? && item.author_verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %></b></p>
-            </a>    
-        <% when CompilationVideo %>
-            <div style="width:100%; height:50px; border:1px solid black;">
-            <!-- <a style="width:100%" href="/watch?v=<%= item.id %>&list=<%= item.compid %>&index=<%= item.index %>">
-                <% if !env.get("preferences").as(Preferences).thin_mode %>
-                    <div class="thumbnail">
-                        <img loading="lazy" tabindex="-1" class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg" alt="" />
-
-                        <% if compid_form = env.get?("remove_compilation_items") %>
-                            <form data-onsubmit="return_false" action="/compilation_ajax?action_remove_video=1&set_video_id=<%= item.index %>&compilation_id=<%= compid_form %>&referer=<%= env.get("current_page") %>" method="post">
-                                <input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>">
-                                <p class="watched">
-                                    <button type="submit" style="all:unset" data-onclick="remove_compilation_item" data-index="<%= item.index %>" data-compid="<%= compid_form %>"><i class="icon ion-md-trash"></i></button>
-                                </p>
-                            </form>
-                        <% end %>
-                    </div>
-                <% end %>
-                <p dir="auto"><%= HTML.escape(item.title) %></p>
-            </a> -->
-            </div>
-        <% when PlaylistVideo %>
-            <a style="width:100%" href="/watch?v=<%= item.id %>&list=<%= item.plid %>&index=<%= item.index %>">
-                <% if !env.get("preferences").as(Preferences).thin_mode %>
-                    <div class="thumbnail">
-                        <img loading="lazy" tabindex="-1" class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg" alt="" />
-
-                        <% if plid_form = env.get?("remove_playlist_items") %>
-                            <form data-onsubmit="return_false" action="/playlist_ajax?action_remove_video=1&set_video_id=<%= item.index %>&playlist_id=<%= plid_form %>&referer=<%= env.get("current_page") %>" method="post">
-                                <input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>">
-                                <p class="watched">
-                                    <button type="submit" style="all:unset" data-onclick="remove_playlist_item" data-index="<%= item.index %>" data-plid="<%= plid_form %>"><i class="icon ion-md-trash"></i></button>
-                                </p>
-                            </form>
-                        <% end %>
-
-                        <% if item.responds_to?(:live_now) && item.live_now %>
-                            <p class="length"><i class="icon ion-ios-play-circle"></i> <%= translate(locale, "LIVE") %></p>
-                        <% elsif item.length_seconds != 0 %>
-                            <p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
-                        <% end %>
-
-                        <% if item_watched %>
-                            <div class="watched-overlay"></div>
-                            <div class="watched-indicator" data-length="<%= item.length_seconds %>" data-id="<%= item.id %>"></div>
-                        <% end %>
-                    </div>
-                <% end %>
-                <p dir="auto"><%= HTML.escape(item.title) %></p>
-            </a>
-
-            <div class="video-card-row flexible">
-                <div class="flex-left"><a href="/channel/<%= item.ucid %>">
-                    <p class="channel-name" dir="auto"><%= HTML.escape(item.author) %></p>
-                </a></div>
-                <% endpoint_params = "?v=#{item.id}&list=#{item.plid}" %>
-                <%= rendered "components/video-context-buttons" %>
-            </div>
-
-            <div class="video-card-row flexible">
-                <div class="flex-left">
-                    <% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %>
-                        <p dir="auto"><%= translate(locale, "Premieres in `x`", recode_date((item.premiere_timestamp.as(Time) - Time.utc).ago, locale)) %></p>
-                    <% elsif Time.utc - item.published > 1.minute %>
-                        <p dir="auto"><%= translate(locale, "Shared `x` ago", recode_date(item.published, locale)) %></p>
-                    <% end %>
-                </div>
-
-                <% if item.responds_to?(:views) && item.views %>
-                <div class="flex-right">
-                    <p dir="auto"><%= translate_count(locale, "generic_views_count", item.views || 0, NumberFormatting::Short) %></p>
-                </div>
-                <% end %>
-            </div>
         <% when Category %>
         <% else %>
             <%-
@@ -184,6 +97,42 @@
               elsif item.is_a?(MixVideo)
                 link_url = "/watch?v=#{item.id}&list=#{item.rdid}"
                 endpoint_params = "?v=#{item.id}&list=#{item.rdid}"
+              elsif item.is_a?(InvidiousCompilation)
+                <% when InvidiousCompilation %>
+                    <% url = "/compilation?list=#{item.id}" %>   
+                    <a style="width:100%" href="<%= url %>">
+                    <% if !env.get("preferences").as(Preferences).thin_mode %>
+                        <div class="thumbnail">
+                            <img loading="lazy" tabindex="-1" class="thumbnail" src="<%= URI.parse(item.thumbnail || "/").request_target %>" alt="" />
+                            <p class="length"><%= translate_count(locale, "generic_videos_count", item.video_count, NumberFormatting::Separator) %></p>
+                        </div>
+                    <% end %>
+                    <p dir="auto"><%= HTML.escape(item.title) %></p>
+              elsif item.is_a?(CompilationVideo)
+                <% when CompilationVideo %>
+                    <div style="width:100%; height:50px; border:1px solid black;">
+                    <!-- <a style="width:100%" href="/watch?v=<%= item.id %>&list=<%= item.compid %>&index=<%= item.index %>">
+                        <% if !env.get("preferences").as(Preferences).thin_mode %>
+                        <div class="thumbnail">
+                            <img loading="lazy" tabindex="-1" class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg" alt="" />
+
+                            <% if compid_form = env.get?("remove_compilation_items") %>
+                                <form data-onsubmit="return_false" action="/compilation_ajax?action_remove_video=1&set_video_id=<%= item.index %>&compilation_id=<%= compid_form %>&referer=<%= env.get("current_page") %>" method="post">
+                                    <input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>">
+                                    <p class="watched">
+                                        <button type="submit" style="all:unset" data-onclick="remove_compilation_item" data-index="<%= item.index %>" data-compid="<%= compid_form %>"><i class="icon ion-md-trash"></i></button>
+                                    </p>
+                                </form>
+                            <% end %>
+                        </div>
+                    <% end %>
+                    <p dir="auto"><%= HTML.escape(item.title) %></p>
+                    </a> -->
+                    </div>      
+                    </a>
+                    <a href="/channel/<%= item.ucid %>">
+                        <p dir="auto"><b><%= HTML.escape(item.author) %><% if !item.is_a?(InvidiousCompilation) && !item.is_a?(InvidiousPlaylist) && !item.author_verified.nil? && item.author_verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %></b></p>
+                    </a>
               else
                 link_url = "/watch?v=#{item.id}"
                 endpoint_params = "?v=#{item.id}"
@@ -223,12 +172,12 @@
                                     data-onclick="add_playlist_item" data-id="<%= item.id %>" data-plid="<%= plid_form %>"><i class="icon ion-md-add"></i></button>
                         </form>
                     <% elsif compid_form = env.get? "add_compilation_items" %>
-                            <form data-onsubmit="return_false" action="/compilation_ajax?action_add_video=1&video_id=<%= item.id %>&compilation_id=<%= compid_form %>&referer=<%= env.get("current_page") %>" method="post">
-                                <input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>">
-                                <p class="watched">
-                                    <button type="submit" style="all:unset" data-onclick="add_compilation_item" data-id="<%= item.id %>" data-compid="<%= compid_form %>"><i class="icon ion-md-add"></i></button>
-                                </p>
-                            </form>       
+                        <form data-onsubmit="return_false" action="/compilation_ajax?action_add_video=1&video_id=<%= item.id %>&compilation_id=<%= compid_form %>&referer=<%= env.get("current_page") %>" method="post">
+                            <input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>">
+                            <p class="watched">
+                                <button type="submit" style="all:unset" data-onclick="add_compilation_item" data-id="<%= item.id %>" data-compid="<%= compid_form %>"><i class="icon ion-md-add"></i></button>
+                            </p>
+                        </form>
                     <%- elsif item.is_a?(PlaylistVideo) && (plid_form = env.get?("remove_playlist_items")) -%>
                         <%- form_parameters = "action_remove_video=1&set_video_id=#{item.index}&playlist_id=#{plid_form}&referer=#{env.get("current_page")}" -%>
                         <form data-onsubmit="return_false" action="/playlist_ajax?<%= form_parameters %>" method="post">