diff --git a/frontend_nuxt/components/MenuComponent.vue b/frontend_nuxt/components/MenuComponent.vue
index 9291a6aaf..e7d977306 100644
--- a/frontend_nuxt/components/MenuComponent.vue
+++ b/frontend_nuxt/components/MenuComponent.vue
@@ -314,6 +314,7 @@ const gotoTag = (t) => {
   border-radius: 10px;
   display: flex;
   align-items: center;
+  transition: background-color 0.5s ease;
 }
 
 .menu-item:hover {
@@ -408,6 +409,7 @@ const gotoTag = (t) => {
   gap: 5px;
   border-radius: 8px;
   cursor: pointer;
+  transition: background-color 0.5s ease;
 }
 
 .section-item:hover {
diff --git a/frontend_nuxt/pages/index.vue b/frontend_nuxt/pages/index.vue
index 8fbfd1c88..04013333e 100644
--- a/frontend_nuxt/pages/index.vue
+++ b/frontend_nuxt/pages/index.vue
@@ -487,6 +487,7 @@ const sanitizeDescription = (text) => stripMarkdown(text)
   align-items: center;
   width: 100%;
   border-bottom: 1px solid var(--normal-border-color);
+  transition: background-color 0.5s ease;
 }
 
 .article-item:hover {