diff --git a/src/components/urls.vue b/src/components/urls.vue
index 2175f9fcc62d4ce86f9573867b613439753b86b6..03053a63d162341a2c33115f70c7b875a747a75f 100644
--- a/src/components/urls.vue
+++ b/src/components/urls.vue
@@ -11,13 +11,15 @@
         :title="url.linkTitle + '- open in a new tab or window'"
         rel="noopener noreferrer"
         target="_blank"
+        class="content__link"
+        :class="$q.dark.isActive ? 'text-white' : 'text-accent'"
       >
         <span>{{ url.linkTitle }}</span>
 
         <q-icon
           :name="fasExternalLinkAlt"
           size="12px"
-          class="q-pl-xs"
+          class="content__link-icon q-pl-xs"
         />
       </a>
 
@@ -97,6 +99,23 @@ export default {
   flex-wrap: wrap;
 }
 
+.content__link {
+  border-bottom: 1px var(--q-color-accent) dotted;
+  text-decoration: none;
+
+  @media (prefers-color-scheme: dark) {
+    border-color: var(--q-color-white);
+  }
+}
+
+.content__link {
+  &:focus,
+  &:hover,
+  &:active {
+    border-bottom-style: solid;
+  }
+}
+
 .url-text {
   display: flex;
   padding-right: 4px;