diff --git a/src/common_components/header/Header.tsx b/src/common_components/header/Header.tsx
index bf4ef452..c7d4ccde 100644
--- a/src/common_components/header/Header.tsx
+++ b/src/common_components/header/Header.tsx
@@ -274,6 +274,10 @@ export const Header: FC<Props> = ({ userInfo, userIsLoading }) => {
                 height: "100%",
                 borderX: "solid 1px token(colors.gray.200)",
                 display: { base: "none", lg: "block" },
+                transition: "all 0.2s",
+                _hover: {
+                  backgroundColor: "gray.100",
+                },
               })}>
               サインアウト
             </button>
@@ -316,6 +320,10 @@ export const Header: FC<Props> = ({ userInfo, userIsLoading }) => {
                 height: "100%",
                 borderX: "solid 1px token(colors.gray.200)",
                 display: { base: "none", lg: "block" },
+                transition: "all 0.2s",
+                _hover: {
+                  backgroundColor: "gray.100",
+                },
               })}>
               サインイン/新規登録
             </button>
diff --git a/src/common_components/header/HeaderMenuItems.tsx b/src/common_components/header/HeaderMenuItems.tsx
index 214b8c58..c23717d7 100644
--- a/src/common_components/header/HeaderMenuItems.tsx
+++ b/src/common_components/header/HeaderMenuItems.tsx
@@ -13,12 +13,20 @@ const HeaderMenuTargetItemLinkStyle = css({
   whiteSpace: "nowrap",
   color: "tsukuba.purple",
   borderBottom: "2px solid ",
+  transition: "all 0.2s",
+  _hover: {
+    backgroundColor: "gray.100",
+  },
 });
 const HeaderMenuItemLinkStyle = css({
   display: "block",
   paddingX: 5,
   lineHeight: 5,
   whiteSpace: "nowrap",
+  transition: "all 0.2s",
+  _hover: {
+    backgroundColor: "gray.100",
+  },
 });
 export const HeaderMenuItems: FC<{
   menu: MenuData[];