diff --git a/crates/frontend/public/assets/style.css b/crates/frontend/public/assets/style.css
index 9a4ca86..2c1c2c1 100644
--- a/crates/frontend/public/assets/style.css
+++ b/crates/frontend/public/assets/style.css
@@ -79,9 +79,6 @@ header {
   nav {
     display: flex;
 
-    border-radius: 12px;
-    background: color-mix(in srgb, var(--background-darker), var(--dilute-color) 5%);
-
     a {
       text-decoration: none;
       margin: 4px 8px;
@@ -259,19 +256,6 @@ ul.collection-list {
         margin: 8px initial;
       }
 
-      .comps {
-        display: inline;
-
-        span {
-          margin: 0 2px;
-          background: var(--primary-color);
-          color: var(--text-on-primary-color);
-          font-size: .8em;
-          padding: 3px 8px;
-          border-radius: 12px;
-        }
-      }
-
       .description {
         grid-area: description;
         white-space: nowrap;
@@ -363,3 +347,16 @@ svg.icon {
   color: var(--text-on-background-color);
   stroke: var(--text-on-background-color);
 }
+
+.component-chips {
+  display: inline;
+
+  span.chip {
+    margin: 0 2px;
+    background: var(--primary-color);
+    color: var(--text-on-primary-color);
+    font-size: .8em;
+    padding: 3px 8px;
+    border-radius: 12px;
+  }
+}
diff --git a/crates/frontend/public/templates/components/sections/calendars_section.html b/crates/frontend/public/templates/components/sections/calendars_section.html
index 02c39c6..67e5ccb 100644
--- a/crates/frontend/public/templates/components/sections/calendars_section.html
+++ b/crates/frontend/public/templates/components/sections/calendars_section.html
@@ -8,9 +8,9 @@
       <span class="title">
         {%- if calendar.principal != user.id -%}{{ calendar.principal }}/{%- endif -%}
         {{ calendar.meta.displayname.to_owned().unwrap_or(calendar.id.to_owned()) }}
-        <div class="comps">
+        <div class="component-chips">
           {% for comp in calendar.components %}
-          <span>{{ comp }}</span>
+          <span class="chip">{{ comp }}</span>
           {% endfor %}
         </div>
       </span>
@@ -58,9 +58,9 @@
       <span class="title">
         {%- if calendar.principal != user.id -%}{{ calendar.principal }}/{%- endif -%}
         {{ calendar.meta.displayname.to_owned().unwrap_or(calendar.id.to_owned()) }}
-        <div class="comps">
+        <div class="component-chips">
           {% for comp in calendar.components %}
-          <span>{{ comp }}</span>
+          <span class="chip">{{ comp }}</span>
           {% endfor %}
         </div>
       </span>