diff --git a/client/src/components/Design/components/Icon/Icon.style.ts b/client/src/components/Design/components/Icon/Icon.style.ts
index fa08309ec..43620715b 100644
--- a/client/src/components/Design/components/Icon/Icon.style.ts
+++ b/client/src/components/Design/components/Icon/Icon.style.ts
@@ -19,6 +19,7 @@ const ICON_DEFAULT_COLOR: Record<IconType, IconColor> = {
   toss: 'white',
   meatballs: 'black',
   editPencil: 'gray',
+  heundeut: 'gray',
 };
 
 export const iconStyle = ({iconType, theme, iconColor}: IconStylePropsWithTheme) => {
diff --git a/client/src/components/Design/components/Icon/Icon.tsx b/client/src/components/Design/components/Icon/Icon.tsx
index ae8f4b36d..d59a08bc4 100644
--- a/client/src/components/Design/components/Icon/Icon.tsx
+++ b/client/src/components/Design/components/Icon/Icon.tsx
@@ -14,6 +14,7 @@ import X from '@assets/image/x.svg';
 import PencilMini from '@assets/image/pencil_mini.svg';
 import Meatballs from '@assets/image/meatballs.svg';
 import EditPencil from '@assets/image/editPencil.svg';
+import Heundeut from '@assets/image/heundeut.svg';
 import {IconProps} from '@HDcomponents/Icon/Icon.type';
 import {useTheme} from '@theme/HDesignProvider';
 
@@ -34,6 +35,7 @@ const ICON = {
   toss: <img src={Toss} width="16" height="16" alt="toss icon" />,
   meatballs: <Meatballs />,
   editPencil: <EditPencil />,
+  heundeut: <Heundeut />,
 };
 
 export const Icon: React.FC<IconProps> = ({iconColor, iconType, ...htmlProps}: IconProps) => {
diff --git a/client/src/components/Design/components/Icon/Icon.type.ts b/client/src/components/Design/components/Icon/Icon.type.ts
index 580f0e919..4d92e73b5 100644
--- a/client/src/components/Design/components/Icon/Icon.type.ts
+++ b/client/src/components/Design/components/Icon/Icon.type.ts
@@ -15,7 +15,8 @@ export type IconType =
   | 'pencilMini'
   | 'toss'
   | 'meatballs'
-  | 'editPencil';
+  | 'editPencil'
+  | 'heundeut';
 
 export type IconColor = ColorKeys;
 
diff --git a/client/src/components/Design/components/Switch/Switch.stories.tsx b/client/src/components/Design/components/Switch/Switch.stories.tsx
deleted file mode 100644
index 870783682..000000000
--- a/client/src/components/Design/components/Switch/Switch.stories.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-
-import Switch from '@HDcomponents/Switch/Switch';
-
-const meta = {
-  title: 'Components/Switch',
-  component: Switch,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    value: {
-      description: '',
-      control: {type: 'select', options: ['홈', '관리']},
-    },
-    values: {
-      description: '',
-    },
-    onChange: {
-      description: '',
-    },
-  },
-  args: {
-    value: '홈',
-    values: ['홈', '관리'],
-    onChange: value => alert(`${value} 선택됨`),
-  },
-} satisfies Meta<typeof Switch>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {};
diff --git a/client/src/components/Design/components/Switch/Switch.style.ts b/client/src/components/Design/components/Switch/Switch.style.ts
deleted file mode 100644
index d88c18748..000000000
--- a/client/src/components/Design/components/Switch/Switch.style.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import {css} from '@emotion/react';
-
-export const switchContainerStyle = css({
-  display: 'flex',
-  gap: '0.75rem',
-});
diff --git a/client/src/components/Design/components/Switch/Switch.tsx b/client/src/components/Design/components/Switch/Switch.tsx
deleted file mode 100644
index 4a1275185..000000000
--- a/client/src/components/Design/components/Switch/Switch.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import TextButton from '../TextButton/TextButton';
-
-import {switchContainerStyle} from './Switch.style';
-import {SwitchProps} from './Switch.type';
-
-function Switch({value, values, onChange}: SwitchProps) {
-  return (
-    <div css={switchContainerStyle}>
-      {values.map((item, index) => (
-        <TextButton
-          key={`${index}_${item}`}
-          textColor={value === item ? 'black' : 'gray'}
-          textSize="bodyBold"
-          onClick={() => onChange(values[index])}
-        >
-          {item}
-        </TextButton>
-      ))}
-    </div>
-  );
-}
-
-export default Switch;
diff --git a/client/src/components/Design/components/Switch/Switch.type.ts b/client/src/components/Design/components/Switch/Switch.type.ts
deleted file mode 100644
index 7e0d31d0f..000000000
--- a/client/src/components/Design/components/Switch/Switch.type.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface SwitchProps {
-  value: string;
-  values: string[];
-  onChange: (value: string) => void;
-}
diff --git a/client/src/components/Design/components/TextButton/TextButton.tsx b/client/src/components/Design/components/TextButton/TextButton.tsx
index 9e73667d5..f21fd6549 100644
--- a/client/src/components/Design/components/TextButton/TextButton.tsx
+++ b/client/src/components/Design/components/TextButton/TextButton.tsx
@@ -1,8 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import {forwardRef} from 'react';
 
-import {useTheme} from '@theme/HDesignProvider';
-
 import Text from '../Text/Text';
 
 import {TextButtonProps} from './TextButton.type';
@@ -11,8 +9,6 @@ export const TextButton: React.FC<TextButtonProps> = forwardRef<HTMLButtonElemen
   {textColor, textSize, children, ...htmlProps}: TextButtonProps,
   ref,
 ) {
-  const {theme} = useTheme();
-
   return (
     <button ref={ref} {...htmlProps}>
       <Text size={textSize} textColor={textColor}>
diff --git a/client/src/components/Design/components/TextButton/TextButton.type.ts b/client/src/components/Design/components/TextButton/TextButton.type.ts
index 0299d89b9..5a1287734 100644
--- a/client/src/components/Design/components/TextButton/TextButton.type.ts
+++ b/client/src/components/Design/components/TextButton/TextButton.type.ts
@@ -1,6 +1,6 @@
 import {TextSize} from '../Text/Text.type';
 
-export type TextColor = 'black' | 'gray';
+export type TextColor = 'black' | 'gray' | 'onTertiary';
 
 export interface TextButtonStyleProps {
   textColor: TextColor;
diff --git a/client/src/components/Design/components/TopNav/Back.tsx b/client/src/components/Design/components/TopNav/Back.tsx
deleted file mode 100644
index 5bbd83618..000000000
--- a/client/src/components/Design/components/TopNav/Back.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import {useNavigate} from 'react-router-dom';
-
-import TextButton from '@HDcomponents/TextButton/TextButton';
-
-type BackProps = {
-  onClick?: () => void;
-};
-
-function Back({onClick}: BackProps) {
-  const navigate = useNavigate();
-
-  return (
-    <TextButton onClick={() => (onClick ? onClick() : navigate(-1))} textSize="bodyBold" textColor="gray">
-      뒤로가기
-    </TextButton>
-  );
-}
-
-export default Back;
diff --git a/client/src/components/Design/components/TopNav/NavItem.style.ts b/client/src/components/Design/components/TopNav/NavItem.style.ts
new file mode 100644
index 000000000..eb65ca32f
--- /dev/null
+++ b/client/src/components/Design/components/TopNav/NavItem.style.ts
@@ -0,0 +1,9 @@
+import {css} from '@emotion/react';
+
+export const navItemStyle = css({
+  padding: '0 0.5rem',
+
+  ':first-of-type': {
+    paddingLeft: 0,
+  },
+});
diff --git a/client/src/components/Design/components/TopNav/NavItem.tsx b/client/src/components/Design/components/TopNav/NavItem.tsx
new file mode 100644
index 000000000..41c38a150
--- /dev/null
+++ b/client/src/components/Design/components/TopNav/NavItem.tsx
@@ -0,0 +1,55 @@
+/** @jsxImportSource @emotion/react */
+import type {NavItemProps} from './NavItem.type';
+
+import {useLocation, useNavigate} from 'react-router-dom';
+
+import getDeletedLastPath from '@utils/getDeletedLastPath';
+
+import TextButton from '../TextButton/TextButton';
+
+import {navItemStyle} from './NavItem.style';
+
+const NavItem = ({displayName, routePath, onHandleRouteInFunnel, noEmphasis = false, children}: NavItemProps) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const matchPath = location.pathname.includes(routePath);
+
+  const handleNavigation = () => {
+    if (onHandleRouteInFunnel) {
+      onHandleRouteInFunnel();
+      return;
+    }
+
+    switch (routePath) {
+      case '/':
+        navigate('/');
+        break;
+      case '-1':
+        navigate(-1);
+        break;
+      default:
+        navigate(`${getDeletedLastPath(location.pathname)}${routePath}`);
+        break;
+    }
+  };
+
+  const getTextColor = () => {
+    if (noEmphasis) return 'gray';
+
+    return matchPath ? 'onTertiary' : 'gray';
+  };
+
+  return (
+    <li css={navItemStyle} onClick={handleNavigation}>
+      {children ? (
+        children
+      ) : (
+        <TextButton textColor={getTextColor()} textSize="bodyBold">
+          {displayName}
+        </TextButton>
+      )}
+    </li>
+  );
+};
+
+export default NavItem;
diff --git a/client/src/components/Design/components/TopNav/NavItem.type.ts b/client/src/components/Design/components/TopNav/NavItem.type.ts
new file mode 100644
index 000000000..d5b302468
--- /dev/null
+++ b/client/src/components/Design/components/TopNav/NavItem.type.ts
@@ -0,0 +1,14 @@
+export type NavItemOptionProps = {
+  displayName?: string;
+  onHandleRouteInFunnel?: () => void;
+};
+
+export type NavItemRequireProps = {
+  routePath: string;
+};
+
+export type NavItemStyleProps = {
+  noEmphasis?: boolean;
+};
+
+export type NavItemProps = NavItemRequireProps & NavItemOptionProps & NavItemStyleProps & React.PropsWithChildren;
diff --git a/client/src/components/Design/components/TopNav/TopNav.stories.tsx b/client/src/components/Design/components/TopNav/TopNav.stories.tsx
deleted file mode 100644
index 885ed4f5b..000000000
--- a/client/src/components/Design/components/TopNav/TopNav.stories.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import type {Meta, StoryObj} from '@storybook/react';
-
-import React from 'react';
-import {reactRouterParameters, withRouter} from 'storybook-addon-react-router-v6';
-
-import TopNav from '@HDcomponents/TopNav/TopNav';
-
-import Switch from '../Switch/Switch';
-
-import Back from './Back';
-
-const meta = {
-  title: 'Components/TopNav',
-  component: TopNav,
-  tags: ['autodocs'],
-  decorators: [withRouter],
-  parameters: {
-    reactRouter: reactRouterParameters({
-      location: {
-        pathParams: {
-          eventId: '123123',
-        },
-      },
-      routing: {path: '/event/:eventId/home'},
-    }),
-    // layout: 'centered',
-  },
-  argTypes: {
-    children: {
-      description: '',
-      control: {type: 'select'},
-      options: ['Back', 'Switch', 'Any'],
-      mapping: {
-        Back: <Back />,
-        Switch: <Switch values={['홈', '관리']} value="홈" onChange={value => console.log(value)} />,
-        Any: <div />,
-      },
-    },
-  },
-  args: {
-    children: 'Back',
-  },
-} satisfies Meta<typeof TopNav>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {};
diff --git a/client/src/components/Design/components/TopNav/TopNav.style.ts b/client/src/components/Design/components/TopNav/TopNav.style.ts
index 9ca69c7b0..b0efc6695 100644
--- a/client/src/components/Design/components/TopNav/TopNav.style.ts
+++ b/client/src/components/Design/components/TopNav/TopNav.style.ts
@@ -7,12 +7,3 @@ export const topNavStyle = css({
   padding: '0 1rem',
   width: '100%',
 });
-
-export const topNavNonStyle = css({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: '0 1rem',
-  width: '100%',
-  height: '1.5rem',
-});
diff --git a/client/src/components/Design/components/TopNav/TopNav.tsx b/client/src/components/Design/components/TopNav/TopNav.tsx
index 1530322e9..91f0eba07 100644
--- a/client/src/components/Design/components/TopNav/TopNav.tsx
+++ b/client/src/components/Design/components/TopNav/TopNav.tsx
@@ -1,20 +1,19 @@
 /** @jsxImportSource @emotion/react */
-import React from 'react';
+import NavItem from './NavItem';
+import {topNavStyle} from './TopNav.style';
 
-import Switch from '@HDcomponents/Switch/Switch';
-
-import {topNavNonStyle, topNavStyle} from './TopNav.style';
-import Back from './Back';
+type TopNavProps = React.PropsWithChildren & {
+  Element?: React.ReactNode;
+};
 
-const TopNav: React.FC<React.PropsWithChildren> = ({children}) => {
-  const hasBack = React.Children.toArray(children).some(child => React.isValidElement(child) && child.type === Back);
-  const hasSwitch = React.Children.toArray(children).some(
-    child => React.isValidElement(child) && child.type === Switch,
+const TopNav = ({children}: TopNavProps) => {
+  return (
+    <nav>
+      <ul css={topNavStyle}>{children}</ul>
+    </nav>
   );
-
-  const isExistNav = hasBack || hasSwitch;
-
-  return <div css={isExistNav ? topNavStyle : topNavNonStyle}>{children}</div>;
 };
 
+TopNav.Item = NavItem;
+
 export default TopNav;
diff --git a/client/src/components/Design/index.tsx b/client/src/components/Design/index.tsx
index eed1b359e..a75245994 100644
--- a/client/src/components/Design/index.tsx
+++ b/client/src/components/Design/index.tsx
@@ -17,14 +17,12 @@ import Input from './components/Input/Input';
 import LabelInput from './components/LabelInput/LabelInput';
 import ListButton from './components/ListButton/ListButton';
 import LabelGroupInput from './components/LabelGroupInput/LabelGroupInput';
-import Switch from './components/Switch/Switch';
 import Top from './components/Top/Top';
 import Tab from './components/Tabs/Tab';
 import Tabs from './components/Tabs/Tabs';
 import Text from './components/Text/Text';
 import TextButton from './components/TextButton/TextButton';
 import Title from './components/Title/Title';
-import Back from './components/TopNav/Back';
 import TopNav from './components/TopNav/TopNav';
 import DepositCheck from './components/DepositCheck/DepositCheck';
 import DepositToggle from './components/DepositToggle/DepositToggle';
@@ -48,7 +46,6 @@ export {
   LabelInput,
   ListButton,
   LabelGroupInput,
-  Switch,
   Top,
   Tab,
   Tabs,
@@ -56,7 +53,6 @@ export {
   TextButton,
   Title,
   TopNav,
-  Back,
   MainLayout,
   FunnelLayout,
   ContentLayout,
diff --git a/client/src/components/Common/Logo/Logo.style.ts b/client/src/components/Logo/Logo.style.ts
similarity index 100%
rename from client/src/components/Common/Logo/Logo.style.ts
rename to client/src/components/Logo/Logo.style.ts
diff --git a/client/src/components/Common/Logo/RunningDogLogo.tsx b/client/src/components/Logo/RunningDogLogo.tsx
similarity index 100%
rename from client/src/components/Common/Logo/RunningDogLogo.tsx
rename to client/src/components/Logo/RunningDogLogo.tsx
diff --git a/client/src/components/Common/Logo/StandingDogLogo.tsx b/client/src/components/Logo/StandingDogLogo.tsx
similarity index 100%
rename from client/src/components/Common/Logo/StandingDogLogo.tsx
rename to client/src/components/Logo/StandingDogLogo.tsx
diff --git a/client/src/components/Common/Logo/index.ts b/client/src/components/Logo/index.ts
similarity index 100%
rename from client/src/components/Common/Logo/index.ts
rename to client/src/components/Logo/index.ts
diff --git a/client/src/hooks/useEventPageLayout.ts b/client/src/hooks/useEventPageLayout.ts
index 4322d5c4c..57fea80d2 100644
--- a/client/src/hooks/useEventPageLayout.ts
+++ b/client/src/hooks/useEventPageLayout.ts
@@ -4,11 +4,9 @@ import getEventIdByUrl from '@utils/getEventIdByUrl';
 
 import {ROUTER_URLS} from '@constants/routerUrls';
 
-import useNavSwitch from './useNavSwitch';
 import useRequestGetEvent from './queries/event/useRequestGetEvent';
 
 const useEventPageLayout = () => {
-  const navProps = useNavSwitch();
   const eventId = getEventIdByUrl();
   const {eventName, bankName, accountNumber} = useRequestGetEvent();
 
@@ -23,7 +21,6 @@ const useEventPageLayout = () => {
 
   return {
     eventId,
-    navProps,
     isAdmin,
     isLoginPage,
     eventOutline,
diff --git a/client/src/hooks/useNavSwitch.tsx b/client/src/hooks/useNavSwitch.tsx
deleted file mode 100644
index a622a7a30..000000000
--- a/client/src/hooks/useNavSwitch.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import {useEffect, useState} from 'react';
-import {useLocation, useNavigate} from 'react-router-dom';
-
-const PATH_TABLE: Record<string, string> = {
-  홈: 'home',
-  관리: 'admin',
-};
-
-const PATH_DISPLAY_TABLE: Record<string, string> = {
-  home: '홈',
-  admin: '관리',
-};
-
-const useNavSwitch = () => {
-  const paths = ['홈', '관리'];
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  const pathArray = location.pathname.split('/');
-  const basePath = pathArray.slice(0, -1).join('/');
-  const lastPath = pathArray[pathArray.length - 1];
-
-  const [nav, setNav] = useState(PATH_DISPLAY_TABLE[lastPath]);
-
-  useEffect(() => {
-    const isLogin = lastPath === 'login';
-    setNav(isLogin ? '관리' : PATH_DISPLAY_TABLE[lastPath]);
-  }, [location]);
-
-  const onChange = (displayName: string) => {
-    setNav(displayName);
-    navigate(`${basePath}/${PATH_TABLE[displayName]}`);
-  };
-
-  return {
-    nav,
-    paths,
-    onChange,
-  };
-};
-
-export default useNavSwitch;
diff --git a/client/src/pages/AccountPage/Account.tsx b/client/src/pages/AccountPage/Account.tsx
index 1b7d685ff..29e389fe6 100644
--- a/client/src/pages/AccountPage/Account.tsx
+++ b/client/src/pages/AccountPage/Account.tsx
@@ -5,7 +5,7 @@ import BankSelectModal from '@components/Modal/BankSelectModal/BankSelectModal';
 
 import useAccount from '@hooks/useAccount';
 
-import {Back, FixedButton, Flex, FunnelLayout, LabelInput, MainLayout, Top, TopNav} from '@components/Design';
+import {FixedButton, Flex, FunnelLayout, LabelInput, MainLayout, Top, TopNav} from '@components/Design';
 
 import getDeletedLastPath from '@utils/getDeletedLastPath';
 
@@ -25,7 +25,7 @@ const Account = () => {
   return (
     <MainLayout backgroundColor="white">
       <TopNav>
-        <Back />
+        <TopNav.Item displayName="뒤로가기" noEmphasis routePath="-1" />
       </TopNav>
       <FunnelLayout>
         <Top>
diff --git a/client/src/pages/AddBillFunnel/AddBillFunnel.tsx b/client/src/pages/AddBillFunnel/AddBillFunnel.tsx
index a98b60919..acb13d698 100644
--- a/client/src/pages/AddBillFunnel/AddBillFunnel.tsx
+++ b/client/src/pages/AddBillFunnel/AddBillFunnel.tsx
@@ -2,7 +2,7 @@ import {Member} from 'types/serviceType';
 
 import useAddBillFunnel from '@hooks/useAddBillFunnel';
 
-import {Back, MainLayout, TopNav} from '@components/Design';
+import {MainLayout, TopNav} from '@components/Design';
 
 import PriceStep from './steps/PriceStep';
 import {TitleStep} from './steps/TitleStep';
@@ -20,7 +20,7 @@ const AddBillFunnel = () => {
   return (
     <MainLayout backgroundColor="white">
       <TopNav>
-        <Back />
+        <TopNav.Item displayName="뒤로가기" noEmphasis routePath="-1" />
       </TopNav>
       {step === 'price' && <PriceStep billInfo={billInfo} setBillInfo={setBillInfo} setStep={setStep} />}
       {step === 'title' && <TitleStep billInfo={billInfo} setBillInfo={setBillInfo} setStep={setStep} />}
diff --git a/client/src/pages/CreateEventPage/CompleteCreateEventStep.tsx b/client/src/pages/CreateEventPage/CompleteCreateEventStep.tsx
index 7c2415c67..34ee64661 100644
--- a/client/src/pages/CreateEventPage/CompleteCreateEventStep.tsx
+++ b/client/src/pages/CreateEventPage/CompleteCreateEventStep.tsx
@@ -1,10 +1,11 @@
-import {useLocation, useNavigate} from 'react-router-dom';
+import {useNavigate} from 'react-router-dom';
 import {css} from '@emotion/react';
 
-import {RunningDog} from '@components/Common/Logo';
 import Top from '@components/Design/components/Top/Top';
 
-import {FixedButton, MainLayout, Title, TopNav} from '@HDesign/index';
+import {RunningDog} from '@components/Logo';
+
+import {FixedButton} from '@HDesign/index';
 
 import {ROUTER_URLS} from '@constants/routerUrls';
 
diff --git a/client/src/pages/CreateEventPage/CreateEventFunnel.tsx b/client/src/pages/CreateEventPage/CreateEventFunnel.tsx
index d9347a389..0b1bdf914 100644
--- a/client/src/pages/CreateEventPage/CreateEventFunnel.tsx
+++ b/client/src/pages/CreateEventPage/CreateEventFunnel.tsx
@@ -3,7 +3,7 @@ import {useNavigate} from 'react-router-dom';
 import useFunnel from '@hooks/useFunnel';
 import useCreateEventData from '@hooks/useCreateEventData';
 
-import {Back, MainLayout, TopNav} from '@components/Design';
+import {MainLayout, TopNav} from '@components/Design';
 
 import SetEventNameStep from './SetEventNameStep';
 import SetEventPasswordStep from './SetEventPasswordStep';
@@ -31,7 +31,11 @@ const CreateEventFunnel = () => {
 
   return (
     <MainLayout backgroundColor="white">
-      <TopNav>{step !== STEP_SEQUENCE[STEP_SEQUENCE.length - 1] && <Back onClick={handleBack} />}</TopNav>
+      <TopNav>
+        {step !== STEP_SEQUENCE[STEP_SEQUENCE.length - 1] && (
+          <TopNav.Item displayName="뒤로가기" noEmphasis routePath="" onHandleRouteInFunnel={handleBack} />
+        )}
+      </TopNav>
       <Funnel>
         <Step name="eventName">
           <SetEventNameStep moveToNextStep={moveToNextStep} {...eventNameProps} />
diff --git a/client/src/pages/EditBillPage/EditBillPage.tsx b/client/src/pages/EditBillPage/EditBillPage.tsx
index c9bf1448d..75a02d755 100644
--- a/client/src/pages/EditBillPage/EditBillPage.tsx
+++ b/client/src/pages/EditBillPage/EditBillPage.tsx
@@ -7,7 +7,7 @@ import Top from '@components/Design/components/Top/Top';
 
 import useEditBillPage from '@hooks/useEditBillPage';
 
-import {Back, FixedButton, Flex, MainLayout, TopNav} from '@components/Design';
+import {FixedButton, Flex, MainLayout, TopNav} from '@components/Design';
 
 const EditBillPage = () => {
   const {
@@ -31,7 +31,7 @@ const EditBillPage = () => {
   return (
     <MainLayout backgroundColor="white">
       <TopNav>
-        <Back />
+        <TopNav.Item displayName="뒤로가기" noEmphasis routePath="-1" />
       </TopNav>
       <div
         css={css`
diff --git a/client/src/pages/EventPage/AdminPage/EventMember.tsx b/client/src/pages/EventPage/AdminPage/EventMember.tsx
index a59f124f8..91fb8b276 100644
--- a/client/src/pages/EventPage/AdminPage/EventMember.tsx
+++ b/client/src/pages/EventPage/AdminPage/EventMember.tsx
@@ -3,18 +3,7 @@ import {Report} from 'types/serviceType';
 
 import useEventMember from '@hooks/useEventMember';
 
-import {
-  Back,
-  MainLayout,
-  TopNav,
-  Top,
-  Amount,
-  DepositToggle,
-  Icon,
-  IconButton,
-  FixedButton,
-  Text,
-} from '@components/Design';
+import {MainLayout, TopNav, Top, Amount, DepositToggle, Icon, IconButton, FixedButton, Text} from '@components/Design';
 import {useTheme} from '@components/Design';
 
 import {eventMemberStyle, memberList, eventMember, memberEditInput, noneReports} from './EventMember.style';
@@ -26,7 +15,7 @@ const EventMember = () => {
   return (
     <MainLayout backgroundColor="white">
       <TopNav>
-        <Back />
+        <TopNav.Item displayName="뒤로가기" noEmphasis routePath="-1" />
       </TopNav>
       <section css={eventMemberStyle}>
         <Top>
diff --git a/client/src/pages/EventPage/EventPageLayout.tsx b/client/src/pages/EventPage/EventPageLayout.tsx
index 3e33fedde..c0747a727 100644
--- a/client/src/pages/EventPage/EventPageLayout.tsx
+++ b/client/src/pages/EventPage/EventPageLayout.tsx
@@ -6,15 +6,14 @@ import useEventPageLayout from '@hooks/useEventPageLayout';
 
 import {ShareEventButton} from '@components/ShareEventButton';
 
-import {MainLayout, TopNav, Switch} from '@HDesign/index';
+import {Flex, Icon, IconButton, MainLayout, TopNav} from '@HDesign/index';
 
 export type EventPageContextProps = Event & {
   isAdmin: boolean;
 };
 
 const EventPageLayout = () => {
-  const {navProps, isAdmin, isLoginPage, eventOutline} = useEventPageLayout();
-  const {nav, paths, onChange} = navProps;
+  const {isAdmin, isLoginPage, eventOutline} = useEventPageLayout();
 
   const outletContext: EventPageContextProps = {
     isAdmin,
@@ -23,10 +22,18 @@ const EventPageLayout = () => {
 
   return (
     <MainLayout backgroundColor="gray">
-      <TopNav>
-        <Switch value={nav} values={paths} onChange={onChange} />
+      <Flex justifyContent="spaceBetween" alignItems="center" margin="0 1rem 0 0">
+        <TopNav>
+          <TopNav.Item routePath="/">
+            <IconButton variants="none">
+              <Icon iconType="heundeut" />
+            </IconButton>
+          </TopNav.Item>
+          <TopNav.Item displayName="홈" routePath="/home" />
+          <TopNav.Item displayName="관리" routePath="/admin" />
+        </TopNav>
         {!isLoginPage && <ShareEventButton eventOutline={eventOutline} />}
-      </TopNav>
+      </Flex>
       <Outlet context={outletContext} />
     </MainLayout>
   );
diff --git a/client/src/pages/MainPage/Section/MainSection.tsx b/client/src/pages/MainPage/Section/MainSection.tsx
index 5ae1dd8cb..3be031978 100644
--- a/client/src/pages/MainPage/Section/MainSection.tsx
+++ b/client/src/pages/MainPage/Section/MainSection.tsx
@@ -1,9 +1,10 @@
 import {css, keyframes} from '@emotion/react';
 import {useNavigate} from 'react-router-dom';
 
-import {StandingDog} from '@components/Common/Logo';
 import ChevronDown from '@assets/image/chevronDownLarge.svg';
 
+import {StandingDog} from '@components/Logo';
+
 import {Button, Text} from '@HDesign/index';
 
 import {ROUTER_URLS} from '@constants/routerUrls';