diff --git a/assets/css/default.css b/assets/css/default.css
index 98dd818..d38394a 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -144,7 +144,40 @@ body a.channel-owner {
   text-align: inherit;
   color: var(--Color1) !important;
 }
-
+.backend {
+  display: inline-block;
+  color: #81A1C1;
+  margin-bottom: 5px;
+}
+.backend-unhealthy {
+  cursor: not-allowed;
+}
+.backend-status {
+  font-size: 1rem;
+  color: #42ae3c;
+}
+.backend-healthy .backend-status {
+  color: #42ae3c;
+}
+.backend-unhealthy .backend-status {
+  color: #fd4848;
+}
+.backend-selected {
+  background: #81A1C1;
+  color: #2E3440 !important;
+  padding: 1px 5px 2px;
+  font-weight: bold;
+}
+.backend-selected .backend-status {
+  display:none;
+}
+.dark-theme .backend-selected:hover,
+.light-theme .backend-selected:hover {
+  color: #2E3440 !important;
+}
+.backend-separator {
+   
+}
 #watch-info {
   text-align: center;
   margin: 10px 0 15px 0;
diff --git a/patches/020-disable-switching-to-unhealthy-backends.patch b/patches/020-disable-switching-to-unhealthy-backends.patch
index 5bf272d..380adc5 100644
--- a/patches/020-disable-switching-to-unhealthy-backends.patch
+++ b/patches/020-disable-switching-to-unhealthy-backends.patch
@@ -1,8 +1,8 @@
 diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr
-index 413cfc22..347ca227 100644
+index 413cfc22..af006ba9 100644
 --- a/src/invidious/views/template.ecr
 +++ b/src/invidious/views/template.ecr
-@@ -120,13 +120,18 @@
+@@ -120,15 +120,20 @@
                  <% end %>
                  <% current_page = env.get("current_page") %>
                  <% CONFIG.invidious_companion.each_with_index do | companion, index | %>
@@ -14,17 +14,20 @@ index 413cfc22..347ca227 100644
 -                        ">•</span>
 -                    </a>
 +                    <% if status[index] == BackendInfo::Status::Working.to_i %>
-+                        <a class="backend-healthy" href="/switchbackend?backend_id=<%= index.to_s %>&referer=<%= current_page %>" style="<%= current_backend == index ? "text-decoration-line: underline; font-weight:bold;" : "" %> display: inline-block;">
++                        <a class="backend backend-healthy<%= current_backend == index ? " backend-selected" : "" %>" href="/switchbackend?backend_id=<%= index.to_s %>&referer=<%= current_page %>">
 +                            <%= HTML.escape(CONFIG.backend_name_prefix + (index + 1).to_s) %> <%= HTML.escape(companion.note) %>
-+                            <span style="font-size: 1rem; color: #42ae3c; ">•</span>
++                            <span class="backend-status">•</span>
 +                        </a>
 +                    <% end %>
 +                    <% if status[index] == BackendInfo::Status::Dead.to_i %>
-+                        <span class="backend-unhealthy" style="cursor: not-allowed;<%= current_backend == index ? " text-decoration-line: underline; font-weight:bold;" : "" %> display: inline-block;">
++                        <span class="backend backend-unhealthy<%= current_backend == index ? " backend-selected" : "" %>">
 +                            <%= HTML.escape(CONFIG.backend_name_prefix + (index + 1).to_s) %> <%= HTML.escape(companion.note) %>
-+                            <span style="font-size: 1rem; color: #fd4848; ">•</span>
++                            <span class="backend-status">•</span>
 +                        </span>
 +                    <% end %>
                      <% if !(index == CONFIG.invidious_companion.size-1) %>
-                     <span> | </span>
+-                    <span> | </span>
++                    <span class="backend-separator"> | </span>
                      <% end %>
+                 <% end %>
+             </div>