diff --git a/themes/example/components/DropMenu.js b/themes/example/components/MenuItemDrop.js
similarity index 90%
rename from themes/example/components/DropMenu.js
rename to themes/example/components/MenuItemDrop.js
index fdefeae5..f5e5dd18 100644
--- a/themes/example/components/DropMenu.js
+++ b/themes/example/components/MenuItemDrop.js
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { useState } from 'react'
 
-export const DropMenu = ({ link }) => {
+export const MenuItemDrop = ({ link }) => {
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
 
@@ -19,7 +19,7 @@ export const DropMenu = ({ link }) => {
         {hasSubMenu &&
             <div className='rounded px-2 md:pl-0 md:mr-3 my-4 md:pr-3 text-gray-700 dark:text-gray-200 no-underline md:border-r border-gray-light'>
                 {link?.name}
-                <i className='px-2 fa fa-angle-down'></i>
+                <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
             </div>
         }
 
diff --git a/themes/example/components/Nav.js b/themes/example/components/Nav.js
index 7fa8cf09..a3e48457 100644
--- a/themes/example/components/Nav.js
+++ b/themes/example/components/Nav.js
@@ -1,7 +1,7 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import CONFIG_EXAMPLE from '../config_example'
-import { DropMenu } from './DropMenu'
+import { MenuItemDrop } from './MenuItemDrop'
 
 /**
  * 菜单导航
@@ -37,7 +37,7 @@ export const Nav = (props) => {
             <div className="container mx-auto max-w-4xl md:flex justify-between items-center text-sm md:text-md md:justify-start">
                 <ul className="w-full text-center md:text-left flex flex-wrap justify-center items-stretch md:justify-start md:items-start">
                     {/* {links.map(link => <NormalMenuItem key={link.id} link={link}/>)} */}
-                    {links.map(link => <DropMenu key={link.id} link={link} />)}
+                    {links.map(link => <MenuItemDrop key={link.id} link={link} />)}
                 </ul>
                 <div className="w-full md:w-1/3 text-center md:text-right">
                     {/* <!-- extra links --> */}
diff --git a/themes/fukasawa/components/MenuItemDrop.js b/themes/fukasawa/components/MenuItemDrop.js
index 0d438a1d..3d5f5d3d 100644
--- a/themes/fukasawa/components/MenuItemDrop.js
+++ b/themes/fukasawa/components/MenuItemDrop.js
@@ -18,7 +18,7 @@ export const MenuItemDrop = ({ link }) => {
             <div className='w-full my-auto items-center justify-between flex '>
                 <div><div className={`${link.icon} text-center w-4 mr-2`} />{link.name}</div>
                 {link.slot}
-                {hasSubMenu && <div className='text-right'><i className='px-2 fa fa-angle-right'></i></div>}
+                {hasSubMenu && <div className='text-right'><i className={`px-2 fas fa-chevron-right duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i></div>}
             </div>}
 
         {/* 子菜单 */}
diff --git a/themes/medium/components/MenuItemDrop.js b/themes/medium/components/MenuItemDrop.js
index 26a0b913..1ca515d5 100644
--- a/themes/medium/components/MenuItemDrop.js
+++ b/themes/medium/components/MenuItemDrop.js
@@ -19,7 +19,7 @@ export const MenuItemDrop = ({ link }) => {
             (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
                 <div className='px-1'>
                     {link?.name}
-                    {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
+                    {hasSubMenu && <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>}
                 </div>
             </div>
         }
diff --git a/themes/next/components/MenuItemDrop.js b/themes/next/components/MenuItemDrop.js
index 33de20f1..8b046844 100644
--- a/themes/next/components/MenuItemDrop.js
+++ b/themes/next/components/MenuItemDrop.js
@@ -18,7 +18,7 @@ export const MenuItemDrop = ({ link }) => {
             <div className='w-full my-auto items-center justify-between flex '>
                 <div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
                 {link.slot}
-                {hasSubMenu && <div className='text-right'><i className='px-2 fa fa-angle-right'></i></div>}
+                {hasSubMenu && <div className='text-right'><i className={`px-2 fas fa-chevron-right duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i></div>}
             </div>}
 
         {/* 子菜单 */}
diff --git a/themes/nobelium/components/DropMenu.js b/themes/nobelium/components/MenuItemDrop.js
similarity index 90%
rename from themes/nobelium/components/DropMenu.js
rename to themes/nobelium/components/MenuItemDrop.js
index 2680f0ca..a33a7ec0 100644
--- a/themes/nobelium/components/DropMenu.js
+++ b/themes/nobelium/components/MenuItemDrop.js
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { useState } from 'react'
 
-export const DropMenu = ({ link }) => {
+export const MenuItemDrop = ({ link }) => {
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
 
@@ -19,7 +19,7 @@ export const DropMenu = ({ link }) => {
         {hasSubMenu &&
             <div className='block ml-4 text-black dark:text-gray-50 nav'>
                 {link?.name}
-                <i className='px-2 fa fa-angle-down'></i>
+                <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
             </div>
         }
 
diff --git a/themes/nobelium/components/Nav.js b/themes/nobelium/components/Nav.js
index dd49c8cd..5440f5ac 100644
--- a/themes/nobelium/components/Nav.js
+++ b/themes/nobelium/components/Nav.js
@@ -4,7 +4,7 @@ import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import CONFIG_NOBELIUM from '../config_nobelium'
 import { SvgIcon } from './SvgIcon'
-import { DropMenu } from './DropMenu'
+import { MenuItemDrop } from './MenuItemDrop'
 
 const Nav = props => {
   const { navBarTitle, fullWidth, siteInfo } = props
@@ -95,7 +95,7 @@ const NavBar = props => {
     <div className="flex-shrink-0">
       <ul className="flex flex-row">
         {links.map(
-          link => link && link.show && <DropMenu key={link.id} link={link}/>
+          link => link && link.show && <MenuItemDrop key={link.id} link={link}/>
         )}
       </ul>
     </div>
diff --git a/themes/simple/components/MenuItemDrop.js b/themes/simple/components/MenuItemDrop.js
index d2eb60aa..c6a534d3 100644
--- a/themes/simple/components/MenuItemDrop.js
+++ b/themes/simple/components/MenuItemDrop.js
@@ -22,7 +22,7 @@ export const MenuItemDrop = ({ link }) => {
         {hasSubMenu && <>
             <div className='cursor-pointer font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1'>
                 {link?.name}
-                <i className='px-2 fa fa-angle-down'></i>
+                <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
             </div>
         </>}