diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2dea8c1..34e2607 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -20268,6 +20268,15 @@
         "throttle-debounce": "^2.1.0"
       }
     },
+    "react-spring": {
+      "version": "8.0.27",
+      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",
+      "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-syntax-highlighter": {
       "version": "13.5.3",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-13.5.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index f00b888..faf69ae 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,7 @@
     "react-app-rewired": "^2.1.6",
     "react-dom": "^17.0.1",
     "react-scripts": "^4.0.1",
+    "react-spring": "^8.0.27",
     "recoil": "^0.1.2",
     "typescript": "^4.1.2",
     "web-vitals": "^0.2.4"
diff --git a/frontend/src/components/atoms/HeaderButton/HeaderButton.tsx b/frontend/src/components/atoms/HeaderButton/HeaderButton.tsx
index 087d0f9..a0c0ad0 100644
--- a/frontend/src/components/atoms/HeaderButton/HeaderButton.tsx
+++ b/frontend/src/components/atoms/HeaderButton/HeaderButton.tsx
@@ -8,12 +8,15 @@ const buttonCss = (): SerializedStyles => css`
   user-select: none;
   cursor: pointer;
   color: inherit;
-  minwidth: 0px;
+  min-width: 0px;
   padding: 6px;
   margin: auto;
   white-space: nowrap;
   border-radius: 3px;
   font-size: inherit;
+  border: 0;
+  outline: 0;
+
   &:hover {
     background-color: #cccccc;
   }
diff --git a/frontend/src/components/organisms/HeaderMenu/HeaderMenu.tsx b/frontend/src/components/organisms/HeaderMenu/HeaderMenu.tsx
index f1d632b..0f2e45a 100644
--- a/frontend/src/components/organisms/HeaderMenu/HeaderMenu.tsx
+++ b/frontend/src/components/organisms/HeaderMenu/HeaderMenu.tsx
@@ -1,7 +1,9 @@
 /** @jsx jsx */
 /** @jsxRuntime classic */
 import { jsx, css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
+import { animated, useSpring, useTransition } from 'react-spring';
 
 import { HeaderButton } from '@components/atoms';
 import { ReactComponent as HamburgerMenu } from '@assets/hamburgerMenu.svg';
@@ -9,7 +11,7 @@ import { ReactComponent as DoubleChevronRight } from '@assets/doubleChevronRight
 import { hoveredMenuToggleState, staticMenuToggleState } from '@/stores';
 import { Menu } from '@molecules/index';
 
-const wrapperCss = () => css`
+const wrapperCss = css`
   position: relative;
   display: flex;
   align-items: center;
@@ -21,7 +23,7 @@ const wrapperCss = () => css`
   margin-right: 8px;
   min-width: 0;
 `;
-const hoverAreaCss = () => css`
+const hoverAreaCss = css`
   position: absolute;
   display: inline-block;
   top: 45px;
@@ -29,12 +31,9 @@ const hoverAreaCss = () => css`
   width: 100%;
   height: 100vh;
 `;
-const menuCss = (staticMenuToggle: boolean) => css`
+const AnimatedMenu = styled(animated.div)`
   position: absolute;
   display: inline-block;
-  top: ${staticMenuToggle ? 0 : 50}px;
-  left: 0;
-  margin-top: ${staticMenuToggle ? 0 : 10}px;
 `;
 
 function HeaderMenu(): JSX.Element {
@@ -44,10 +43,16 @@ function HeaderMenu(): JSX.Element {
   const [hoveredMenuToggle, setHoveredMenuToggle] = useRecoilState(
     hoveredMenuToggleState,
   );
+  const menuStyleProps = useSpring({
+    top: staticMenuToggle ? 0 : 50,
+    left: hoveredMenuToggle || staticMenuToggle ? 0 : -240,
+    opacity: hoveredMenuToggle || staticMenuToggle ? 1 : 0,
+    marginTop: staticMenuToggle ? 0 : 10,
+  });
 
   return (
     <div
-      css={wrapperCss()}
+      css={wrapperCss}
       onMouseEnter={() => setHoveredMenuToggle(true)}
       onMouseLeave={() => setHoveredMenuToggle(false)}
     >
@@ -55,12 +60,10 @@ function HeaderMenu(): JSX.Element {
         {staticMenuToggle ||
           (!hoveredMenuToggle ? <HamburgerMenu /> : <DoubleChevronRight />)}
       </HeaderButton>
-      <div css={hoverAreaCss()} />
-      {(staticMenuToggle || hoveredMenuToggle) && (
-        <div css={menuCss(staticMenuToggle)}>
-          <Menu />
-        </div>
-      )}
+      <div css={hoverAreaCss} />
+      <AnimatedMenu style={menuStyleProps}>
+        <Menu />
+      </AnimatedMenu>
     </div>
   );
 }