diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
index d83bf54..4fd20a5 100644
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@@ -136,13 +136,14 @@ export const Header: React.FC<HeaderProps> = ({
                     padding: "6px 12px",
                     marginLeft: "8px",
                     transition:
-                      "background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease",
+                      "background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease",
                     border: "1px solid transparent",
                     "&:hover": {
                       backgroundColor:
                         mode === "dark"
                           ? "rgba(255, 255, 255, 0.05)"
                           : "rgba(0, 0, 0, 0.04)",
+                      transform: "translateY(-1px)",
                       border: `1px solid ${mode === "dark"
                           ? "rgba(255, 255, 255, 0.2)"
                           : "rgba(0, 0, 0, 0.1)"
@@ -153,6 +154,7 @@ export const Header: React.FC<HeaderProps> = ({
                           : "0 4px 12px rgba(0,0,0,0.08)",
                     },
                     "&:active": {
+                      transform: "translateY(0px)",
                       boxShadow: "none",
                     },
                   }}
@@ -187,7 +189,9 @@ export const Header: React.FC<HeaderProps> = ({
                             ? "rgba(255,255,255,0.2)"
                             : "rgba(0,0,0,0.1)"
                           }`,
+                        transition: "transform 0.3s ease",
                         ".MuiButtonBase-root:hover &": {
+                          transform: "rotate(5deg)",
                           borderColor: "primary.main",
                         },
                       }}