diff --git a/frontend/src/components/MainNav.vue b/frontend/src/components/MainNav.vue
index bf1719e..c56118a 100644
--- a/frontend/src/components/MainNav.vue
+++ b/frontend/src/components/MainNav.vue
@@ -5,11 +5,7 @@
         <v-app-bar-title style="align-self: center">
           <span style="font-size: 20px">
             ALHP Status
-            <a
-              class="ms-2"
-              href="https://somegit.dev/ALHP/ALHP.GO"
-              style="color: white; font-size: 25px"
-              target="_blank">
+            <a class="ms-2 gitea-link" href="https://somegit.dev/ALHP/ALHP.GO" target="_blank">
               <i class="fa fa-gitea"></i>
             </a>
           </span>
@@ -28,4 +24,15 @@ import { useDisplay } from 'vuetify'
 const { mobile, width } = useDisplay()
 </script>
 
-<style scoped></style>
+<style scoped>
+.gitea-link {
+  color: white;
+  font-size: 25px;
+  text-decoration: none; /* Optional: To prevent underlining */
+  transition: color 0.2s; /* Smooth color transition */
+}
+
+.gitea-link:hover {
+  color: #609926;
+}
+</style>