diff --git a/frontend/src/components/NavBar/UserInfo/UserInfo.styled.ts b/frontend/src/components/NavBar/UserInfo/UserInfo.styled.ts
index 2f99fb293..9b7831e25 100644
--- a/frontend/src/components/NavBar/UserInfo/UserInfo.styled.ts
+++ b/frontend/src/components/NavBar/UserInfo/UserInfo.styled.ts
@@ -17,7 +17,4 @@ export const Text = styled.div`
   &:hover {
     color: ${({ theme }) => theme.user.hoverColor};
   }
-}
 `;
-
-export const LogoutLink = styled.a``;
diff --git a/frontend/src/components/NavBar/UserInfo/UserInfo.tsx b/frontend/src/components/NavBar/UserInfo/UserInfo.tsx
index b52cc7631..1a86b8c7a 100644
--- a/frontend/src/components/NavBar/UserInfo/UserInfo.tsx
+++ b/frontend/src/components/NavBar/UserInfo/UserInfo.tsx
@@ -19,9 +19,7 @@ const UserInfo = () => {
         </S.Wrapper>
       }
     >
-      <DropdownItem href="logout">
-        <S.LogoutLink>Log out</S.LogoutLink>
-      </DropdownItem>
+      <DropdownItem href="/logout">Log out</DropdownItem>
     </Dropdown>
   ) : null;
 };
diff --git a/frontend/src/components/common/Dropdown/DropdownItem.tsx b/frontend/src/components/common/Dropdown/DropdownItem.tsx
index 4caf6b5f6..999ee90a6 100644
--- a/frontend/src/components/common/Dropdown/DropdownItem.tsx
+++ b/frontend/src/components/common/Dropdown/DropdownItem.tsx
@@ -15,12 +15,12 @@ const DropdownItem = React.forwardRef<unknown, DropdownItemProps>(
     const confirmation = useConfirm();
 
     const handleClick = (e: ClickEvent) => {
-      if (!onClick) return;
-
       // eslint-disable-next-line no-param-reassign
       e.stopPropagation = true;
       e.syntheticEvent.stopPropagation();
 
+      if (!onClick) return;
+
       if (confirm) {
         confirmation(confirm, onClick);
       } else {