diff --git a/src/assets/icon/BackPush.svg b/src/assets/icon/BackPush.svg
index dae901ba..8f347d10 100644
--- a/src/assets/icon/BackPush.svg
+++ b/src/assets/icon/BackPush.svg
@@ -1,3 +1,3 @@
-<svg width="15" height="24" viewBox="0 0 15 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 1L2 12L14 23" stroke="black" stroke-width="2" stroke-linecap="round"/>
+<svg width="15" height="18" viewBox="0 0 16 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 1L2 12L14 23" stroke="black" stroke-width="3" stroke-linecap="butt"/>
 </svg>
diff --git a/src/components/common/button/Button.tsx b/src/components/common/button/Button.tsx
index 6b3adb89..f99c2f0a 100644
--- a/src/components/common/button/Button.tsx
+++ b/src/components/common/button/Button.tsx
@@ -72,6 +72,21 @@ const Button = ({
       : ''
   }
   ${FONT_STYLE['NSK']}
+  ${
+    buttonType === 'Plain-blue'
+      ? 'hover:bg-blue-500 hover:text-white-0 focus:bg-blue-500 focus:text-white-0 focus:outline-none'
+      : ''
+  }
+  ${
+    buttonType === 'Plain-red'
+      ? 'hover:bg-red-400 hover:text-white-0 foucs: bg-red-400 focus:text-white-0'
+      : ''
+  }
+  ${
+    buttonType === 'Round-blue-500'
+      ? 'hover:bg-blue-700 hover:text-white-0 focus:bg-blue-700 focus:text-white-0 focus:outline-none'
+      : ''
+  }
   `
   return (
     <button
diff --git a/src/components/common/chips/Chips.stories.tsx b/src/components/common/chips/Chips.stories.tsx
new file mode 100644
index 00000000..bedd0369
--- /dev/null
+++ b/src/components/common/chips/Chips.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Chips from './Chips'
+
+const meta: Meta<typeof Chips> = {
+  component: Chips,
+  tags: ['autodocs'],
+  title: 'components/Chips',
+  argTypes: {
+    label: {
+      control: 'text'
+    },
+    isSelected: {
+      control: 'select',
+      options: [true, false]
+    }
+  }
+}
+export default meta
+type Story = StoryObj<typeof Chips>
+
+export const Default: Story = {
+  render: (args) => <Chips label={args.label} isSelected={args.isSelected} />
+}
diff --git a/src/components/common/chips/Chips.tsx b/src/components/common/chips/Chips.tsx
new file mode 100644
index 00000000..79d361c6
--- /dev/null
+++ b/src/components/common/chips/Chips.tsx
@@ -0,0 +1,18 @@
+interface ChipsProps {
+  label: string
+  isSelected: boolean
+}
+const Chips = ({ label, isSelected }: ChipsProps) => {
+  return (
+    <div
+      className={`rounded-[100px] font-semibold text-lg cursor-pointer flex justify-center items-center border-2 w-20 h-10 ${
+        isSelected
+          ? 'bg-green-5 text-green-50 border-green-50'
+          : 'bg-transparent border-gray-20'
+      }`}>
+      {label}
+    </div>
+  )
+}
+
+export default Chips
diff --git a/src/components/common/header/Header.tsx b/src/components/common/header/Header.tsx
index 636b406e..b6abc23e 100644
--- a/src/components/common/header/Header.tsx
+++ b/src/components/common/header/Header.tsx
@@ -76,6 +76,20 @@ const Header = ({
             </span>
             <span className={'mx-[20px] font-nsk subHead-18'}>{pageTitle}</span>
           </div>
+        ) : headerType === 'Map' ? (
+          <>
+            <div className={'flex flex-row items-center'}>
+              <Icon
+                icon={'Logo'}
+                classStyle={'w-[50px] cursor-pointer'}
+                onClick={() => navigate('/')}
+              />
+              <span className={'mx-[30px] font-nsk subHead-18'}>
+                {pageTitle}
+              </span>
+            </div>
+            <div className={'flex items-center justify-between'}></div>
+          </>
         ) : (
           ''
         )}
diff --git a/src/components/common/header/HeaderType.ts b/src/components/common/header/HeaderType.ts
index 49f9b3fd..cd5be39b 100644
--- a/src/components/common/header/HeaderType.ts
+++ b/src/components/common/header/HeaderType.ts
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
 
-type HeaderType = 'BackPush' | 'Logo' | 'Close' | 'CloseWithTitle'
+type HeaderType = 'BackPush' | 'Logo' | 'Close' | 'CloseWithTitle' | 'Map'
 export interface HeaderProps {
   headerType: HeaderType
   pageTitle?: string
diff --git a/src/components/common/icon/Icon.tsx b/src/components/common/icon/Icon.tsx
index 08ba4a90..ac009b0b 100644
--- a/src/components/common/icon/Icon.tsx
+++ b/src/components/common/icon/Icon.tsx
@@ -2,12 +2,15 @@ import Icons from './Icons'
 export type IconType = keyof typeof Icons
 
 export interface IconProps {
-  icon: IconType
+  icon?: IconType
   classStyle?: string
   onClick?: () => void
 }
 
 const Icon = ({ icon, classStyle, onClick }: IconProps) => {
+  if (!icon) {
+    return null
+  }
   const SvgIcon = Icons[icon]
   return <SvgIcon className={classStyle} onClick={onClick} />
 }
diff --git a/src/components/common/standardButton/StandardButton.stories.tsx b/src/components/common/standardButton/StandardButton.stories.tsx
new file mode 100644
index 00000000..33d912be
--- /dev/null
+++ b/src/components/common/standardButton/StandardButton.stories.tsx
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import StandardButton from './StandardButton'
+
+const meta: Meta<typeof StandardButton> = {
+  component: StandardButton,
+  tags: ['autodocs'],
+  title: 'components/StandardButton',
+  argTypes: {
+    label: {
+      control: 'text'
+    },
+    state: {
+      control: 'select',
+      options: ['disabled', 'enabled']
+    },
+    style: {
+      control: 'select',
+      options: ['outlined', 'filled']
+    }
+  }
+}
+export default meta
+type Story = StoryObj<typeof StandardButton>
+
+export const Default: Story = {
+  render: (args) => (
+    <StandardButton label={args.label} state={args.state} style={args.style} />
+  )
+}
diff --git a/src/components/common/standardButton/StandardButton.tsx b/src/components/common/standardButton/StandardButton.tsx
new file mode 100644
index 00000000..641b64a1
--- /dev/null
+++ b/src/components/common/standardButton/StandardButton.tsx
@@ -0,0 +1,25 @@
+interface StandardButtonProps {
+  label: string
+  state: 'disabled' | 'enabled'
+  style: 'outlined' | 'filled'
+}
+const StandardButton = ({ label, state, style }: StandardButtonProps) => {
+  return (
+    <div
+      className={`rounded-[8px] cursor-pointer flex justify-center items-center font-medium border border-1 w-full h-full px-[0px] py-[10px] ${
+        state === 'enabled'
+          ? // enabled
+            style === 'filled'
+            ? 'bg-green-50 text-white-0 border-green-50'
+            : 'bg-transparent text-green-50 border-green-50'
+          : // disabled
+          style === 'filled'
+          ? 'bg-gray-10 text-gray-50 border-gray-50'
+          : 'bg-transparent text-gray-40 border-gray-40'
+      }`}>
+      {label}
+    </div>
+  )
+}
+
+export default StandardButton
diff --git a/src/components/common/toast/index.tsx b/src/components/common/toast/index.tsx
index e1bb0bd8..03b2a0b2 100644
--- a/src/components/common/toast/index.tsx
+++ b/src/components/common/toast/index.tsx
@@ -3,7 +3,7 @@ const Toast = () => {
   return (
     <ToastContainer
       position={'top-center'}
-      autoClose={1500}
+      autoClose={700}
       closeButton={false}
       newestOnTop
       hideProgressBar={true}
diff --git a/src/components/common/topNavigation/TopNavigation.stories.tsx b/src/components/common/topNavigation/TopNavigation.stories.tsx
new file mode 100644
index 00000000..14fff8a8
--- /dev/null
+++ b/src/components/common/topNavigation/TopNavigation.stories.tsx
@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import TopNavigation from './TopNavigation'
+import Icons from '../icon/Icons'
+
+const iconNames = [...Object.keys(Icons), undefined] as (
+  | keyof typeof Icons
+  | undefined
+)[]
+
+const meta: Meta<typeof TopNavigation> = {
+  component: TopNavigation,
+  tags: ['autodocs'],
+  title: 'components/TopNavigation',
+  argTypes: {
+    title: {
+      control: 'text'
+    },
+    type: {
+      control: 'select',
+      options: ['left', 'center']
+    },
+    icon1: {
+      control: 'select',
+      options: iconNames
+    },
+    icon2: {
+      control: 'select',
+      options: iconNames
+    },
+    icon3: {
+      control: 'select',
+      options: iconNames
+    }
+    // icon1: {
+    //   control: 'select',
+    //   options: ['SideBar', 'Alarm', undefined]
+    // },
+    // icon2: {
+    //   control: 'select',
+    //   options: ['SideBar', 'Alarm', undefined]
+    // },
+    // icon3: {
+    //   control: 'select',
+    //   options: ['SideBar', 'Alarm', undefined]
+    // }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof TopNavigation>
+
+export const Default: Story = {
+  render: (args) => (
+    <TopNavigation
+      title={args.title}
+      type={args.type}
+      icon1={args.icon1}
+      icon2={args.icon2}
+      icon3={args.icon3}
+    />
+  )
+}
diff --git a/src/components/common/topNavigation/TopNavigation.tsx b/src/components/common/topNavigation/TopNavigation.tsx
new file mode 100644
index 00000000..96d107f7
--- /dev/null
+++ b/src/components/common/topNavigation/TopNavigation.tsx
@@ -0,0 +1,44 @@
+import Icon, { IconType } from '../icon/Icon'
+
+interface TopNavigationProps {
+  title: string
+  type: 'left' | 'center'
+  //   icon1: 'SideBar' | 'Alarm' | undefined
+  //   icon2: 'SideBar' | 'Alarm' | undefined
+  //   icon3: 'SideBar' | 'Alarm' | undefined
+  icon1: IconType | undefined
+  icon2: IconType | undefined
+  icon3: IconType | undefined
+}
+const TopNavigation = ({
+  title,
+  type,
+  icon1,
+  icon2,
+  icon3
+}: TopNavigationProps) => {
+  return (
+    <div
+      className={`fixed flex flex-row items-center font-semibold left-[50%] z-10 top-0 translate-x-[-50%] w-full h-[60px] bg-white-0 text-black-800 px-[22px] border-b-[1px] border-gray-5`}>
+      <Icon icon={'BackPush'} classStyle={'cursor-pointer ml-3'} />
+      {type === 'left' ? (
+        <>
+          <div className={'ml-7'}>{title}</div>
+          <div
+            className={`flex flex-row justify-center items-center absolute right-8 float-right`}>
+            <Icon icon={icon1} classStyle={'cursor-pointer mr-2'} />
+            <Icon icon={icon2} classStyle={'cursor-pointer mr-2'} />
+            <Icon icon={icon3} classStyle={'cursor-pointer'} />
+          </div>
+        </>
+      ) : (
+        <div className={`absolute left-1/2 transform -translate-x-1/2`}>
+          {title}
+        </div>
+      )}
+      {/* <div className={`flex flex-row`}>{title}</div> */}
+    </div>
+  )
+}
+
+export default TopNavigation
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 1f524e98..b01917b6 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -99,7 +99,7 @@ export const router = createBrowserRouter(
           path: 'map',
           element: (
             <>
-              <Header headerType={'Logo'} pageTitle={'학원 지도'} />
+              <Header headerType={'Map'} pageTitle={'학원 지도'} />
               <MapPage />
             </>
           )
diff --git a/tailwind.config.js b/tailwind.config.js
index efaae3e2..3b8a4d79 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -47,7 +47,7 @@ export default {
         r200: 'rgba(244,244,244,1)'
       },
       gray: {
-        5: '#F2F2F2',
+        5: '#F7F7F7',
         10: '#E4E4E4',
         20: '#D4D3D3',
         30: '#C7C7C7',