diff --git a/src/App.vue b/src/App.vue
index 47d3d55e..099c9e2b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -270,7 +270,7 @@ h2 {
 }
 
 .dark .link {
-    @apply hover:(focus:text-red-400 hover:text-red-400);
+    @apply focus:text-red-400 hover:text-red-400;
 }
 
 .dark .link-secondary {
diff --git a/src/components/FooterComponent.vue b/src/components/FooterComponent.vue
index 1b90653c..b3abc080 100644
--- a/src/components/FooterComponent.vue
+++ b/src/components/FooterComponent.vue
@@ -2,27 +2,27 @@
     <footer class="mt-10 w-full rounded-xl py-4 text-center children:(mx-3)">
         <a aria-label="GitHub" href="https://github.com/TeamPiped/Piped" target="_blank">
             <font-awesome-icon :icon="['fab', 'github']" />
-            <span v-t="'actions.source_code'" class="ml-2 hover:font-bold" />
+            <span v-t="'actions.source_code'" class="ml-2 hover:underline" />
         </a>
         <a href="https://docs.piped.video/" target="_blank">
             <font-awesome-icon :icon="['fa', 'book']" />
-            <span v-t="'actions.documentation'" class="ml-2 hover:font-bold" />
+            <span v-t="'actions.documentation'" class="ml-2 hover:underline" />
         </a>
         <a href="https://github.com/TeamPiped/Piped#donations" target="_blank">
             <font-awesome-icon :icon="['fab', 'bitcoin']" />
-            <span v-t="'actions.donations'" class="ml-2 hover:font-bold" />
+            <span v-t="'actions.donations'" class="ml-2 hover:underline" />
         </a>
         <a v-if="statusPageHref" :href="statusPageHref">
             <font-awesome-icon :icon="['fa', 'server']" />
-            <span v-t="'actions.status_page'" class="ml-2 hover:font-bold" />
+            <span v-t="'actions.status_page'" class="ml-2 hover:underline" />
         </a>
         <a v-if="donationHref" :href="donationHref">
             <font-awesome-icon :icon="['fa', 'donate']" />
-            <span v-t="'actions.instance_donations'" class="ml-2 hover:font-bold" />
+            <span v-t="'actions.instance_donations'" class="ml-2 hover:underline" />
         </a>
         <a v-if="privacyPolicyHref" :href="privacyPolicyHref" target="_blank">
             <font-awesome-icon :icon="['fa', 'eye']" />
-            <span v-t="'actions.instance_privacy_policy'" class="ml-2 hover:font-bold" />
+            <span v-t="'actions.instance_privacy_policy'" class="ml-2 hover:underline" />
         </a>
     </footer>
 </template>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 9b90b952..6e9eb986 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -230,11 +230,11 @@ export default {
 }
 
 .nav-link {
-    @apply hover:font-bold hover:text-red-500;
+    @apply hover:text-red-500;
 }
 
 .dark .nav-link {
-    @apply hover:font-bold hover:text-red-400;
+    @apply hover:text-red-400;
 }
 
 @media screen and (max-width: 848px) {
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 1aff69ed..d9d451cd 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -212,7 +212,7 @@ export default {
     @apply mt-1 text-xs text-gray-600 font-normal;
 }
 
-.video-info .dark {
-    @apply text-gray-300;
+.dark .video-info {
+    @apply text-gray-400;
 }
 </style>