diff --git a/app/components/layouts/LandingNavbar.vue b/app/components/layouts/LandingNavbar.vue
index 1dca98b..f6372c4 100644
--- a/app/components/layouts/LandingNavbar.vue
+++ b/app/components/layouts/LandingNavbar.vue
@@ -24,6 +24,22 @@ import LinkIcon from '~/components/ui/LinkIcon.vue';
 </script>
 
 <style scoped lang="scss">
+.navbar-end .navbar-item {
+  &:hover,
+  &:focus {
+    background-color: transparent;
+    color: inherit;
+  }
+}
+
+.navbar-end .navbar-item:first-child a {
+  transition: opacity 0.16s ease;
+
+  &:hover {
+    opacity: 0.65;
+  }
+}
+
 .navbar-controls {
   display: flex;
   align-items: center;
diff --git a/app/components/layouts/Navbar.vue b/app/components/layouts/Navbar.vue
index 8096235..68fc21d 100644
--- a/app/components/layouts/Navbar.vue
+++ b/app/components/layouts/Navbar.vue
@@ -44,6 +44,22 @@ const logoSrc = computed(() => (colorMode.value === 'dark' ? '/icon-dark.png' :
 </script>
 
 <style scoped lang="scss">
+.navbar-end .navbar-item {
+  &:hover,
+  &:focus {
+    background-color: transparent;
+    color: inherit;
+  }
+}
+
+.navbar-end .navbar-item:first-child a {
+  transition: opacity 0.16s ease;
+
+  &:hover {
+    opacity: 0.65;
+  }
+}
+
 .navbar-controls {
   display: flex;
   align-items: center;