diff --git a/frontend/src/assets/styles/main.scss b/frontend/src/assets/styles/main.scss
index 9eb6e49c..90d18c2b 100644
--- a/frontend/src/assets/styles/main.scss
+++ b/frontend/src/assets/styles/main.scss
@@ -359,3 +359,10 @@ a[data-active='false']:hover {
 [data-radix-popper-content-wrapper] {
   z-index: 9999 !important;
 }
+
+// Components
+@layer components {
+  .link-style {
+    @apply text-blue-500 hover:underline;
+  }
+}
diff --git a/frontend/src/views/admin/oidc/OIDC.vue b/frontend/src/views/admin/oidc/OIDC.vue
index 8656343e..fa844403 100644
--- a/frontend/src/views/admin/oidc/OIDC.vue
+++ b/frontend/src/views/admin/oidc/OIDC.vue
@@ -10,7 +10,7 @@
         href="https://libredesk.io/docs/sso/"
         target="_blank"
         rel="noopener noreferrer"
-        class="text-blue-500 hover:underline"
+        class="link-style"
       >
         <p>Learn more</p>
       </a>
diff --git a/frontend/src/views/admin/templates/Templates.vue b/frontend/src/views/admin/templates/Templates.vue
index 65e419a1..7798b390 100644
--- a/frontend/src/views/admin/templates/Templates.vue
+++ b/frontend/src/views/admin/templates/Templates.vue
@@ -48,7 +48,7 @@
       <template #help>
         <p>Design templates for customer communications and responses.</p>
         <p>Modify content for internal and external emails.</p>
-        <a href="https://libredesk.io/docs/templating/" target="_blank" rel="noopener noreferrer" class="text-blue-500 hover:underline">
+        <a href="https://libredesk.io/docs/templating/" target="_blank" rel="noopener noreferrer" class="link-style">
           <p>Learn more</p>
         </a>
       </template>