diff --git a/src/app/page.tsx b/src/app/page.tsx
index d710a003..3a16b20f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,7 @@
+'use client'
+
 import { Button, Chip, ChipButton, QRCode, Typography } from '@/components'
+import Tooltip from '@/components/tooltip'
 
 const Home = () => {
   return (
@@ -23,21 +26,12 @@ const Home = () => {
       <Typography size="body2">Typography</Typography>
       <Typography size="body3">Typography</Typography>
       <Typography size="body4">Typography</Typography>
-      <Chip size="sm" fontSize="h7" colorScheme="orange">
-        진영 Pick
-      </Chip>
-      <Chip size="md" fontSize="body3" colorScheme="neutral-400">
-        🍝 태그설명
-      </Chip>
-      <Chip size="md" fontSize="body3" colorScheme="orange">
-        🍝 태그설명
-      </Chip>
-      <Chip size="lg" fontSize="body0" colorScheme="neutral-500">
-        도라방스
-      </Chip>
-      <ChipButton rightIcon={{ type: 'close' }}>한우갈비</ChipButton>
+
+      <Tooltip label="아아아아아아아" onClose={() => null}>
+        테스트 테스트
+      </Tooltip>
     </main>
   )
 }
 
-export default Home
+export default Home
\ No newline at end of file
diff --git a/src/components/common/icons/RoundedTriangle.svg b/src/components/common/icons/RoundedTriangle.svg
new file mode 100644
index 00000000..c7a42f18
--- /dev/null
+++ b/src/components/common/icons/RoundedTriangle.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="17" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.34121 1.46267C10.1339 0.285767 11.8661 0.285764 12.6588 1.46267L21.0246 13.8827C21.9194 15.2111 20.9675 17 19.3658 17H2.63419C1.03247 17 0.0805812 15.2111 0.975395 13.8827L9.34121 1.46267Z" fill="#E5684C"/>
+</svg>
diff --git a/src/components/common/icons/index.ts b/src/components/common/icons/index.ts
index 6a43e282..f29ef9fc 100644
--- a/src/components/common/icons/index.ts
+++ b/src/components/common/icons/index.ts
@@ -9,6 +9,7 @@ import HeartStraightOutlined from './HeartStraightOutlined.svg'
 import Info from './Info.svg'
 import InfoCircle from './InfoCircle.svg'
 import Plus from './Plus.svg'
+import RoundedTriangle from './RoundedTriangle.svg'
 import Search from './Search.svg'
 import ShareNetwork from './ShareNetwork.svg'
 import SignOut from './SignOut.svg'
@@ -26,6 +27,7 @@ export const icons = {
   info: Info,
   infoCircle: InfoCircle,
   plus: Plus,
+  roundedTriangle: RoundedTriangle,
   search: Search,
   shareNetwork: ShareNetwork,
   signOut: SignOut,
diff --git a/src/components/tooltip/index.tsx b/src/components/tooltip.tsx
similarity index 69%
rename from src/components/tooltip/index.tsx
rename to src/components/tooltip.tsx
index 8ed2b40a..699706b3 100644
--- a/src/components/tooltip/index.tsx
+++ b/src/components/tooltip.tsx
@@ -2,18 +2,24 @@ import { HTMLAttributes, forwardRef } from 'react'
 
 import cn from '@/utils/cn'
 import { VariantProps, cva } from 'class-variance-authority'
-import AccessibleIconButton from '../accessible-icon-button'
+import AccessibleIconButton from './accessible-icon-button'
+import Typography from './common/typography'
+import RoundedTriangle from './common/icons/RoundedTriangle.svg'
+import { Icon } from '.'
+
+/* Polygon 3 */
 
 const TooltipVariants = cva<{
   color: Record<'orange' | 'neutral', string>
   size: Record<'sm' | 'md' | 'lg', string>
 }>(
-  `absolute whitespace-nowrap flex gap-2.5 items-center z-10 text-white rounded-full left-0 top-[calc(100%+20px)] after:content-[''] after:absolute after:border-8 after:rounded-sm after:bottom-[calc(100%-11px)] after:left-6  after:rotate-45`,
+  `absolute whitespace-nowrap flex gap-2.5 items-center z-10 text-white rounded-full left-0 top-[calc(100%+20px)] 
+  `,
   {
     variants: {
       color: {
-        neutral: `bg-neutral-500 after:border-neutral-500`,
-        orange: `bg-orange-400 after:border-orange-400`,
+        neutral: `bg-neutral-500`,
+        orange: `bg-orange-400`,
       },
       size: {
         lg: 'px-7 py-5 ',
@@ -40,7 +46,7 @@ interface TooltipProps
 const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   ({ size, color, className, label, children, onClose, ...props }, ref) => {
     return (
-      <div className="relative">
+      <div className="relative ">
         {children}
         <div
           role="tooltip"
@@ -48,9 +54,13 @@ const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
           ref={ref}
           className={cn(TooltipVariants({ color, size }), className)}
         >
-          <span className="text-white font-bold leading-tight text-[15px]">
+          <Typography size="h5-2" className="text-white">
             {label}
-          </span>
+          </Typography>
+          <Icon
+            type="roundedTriangle"
+            className="absolute bottom-[calc(100%-6px)] left-5 w-[22px] h-[18px]"
+          />
           <AccessibleIconButton
             label="닫기"
             icon={{
@@ -58,6 +68,7 @@ const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
               onClick: onClose,
               stroke: 'neutral-000',
               'aria-hidden': true,
+              size: 'sm',
             }}
           />
         </div>
diff --git a/src/components/tooltip/tooltip.stories.ts b/src/stories/tooltip.stories.ts
similarity index 93%
rename from src/components/tooltip/tooltip.stories.ts
rename to src/stories/tooltip.stories.ts
index 64d3398f..55655fe2 100644
--- a/src/components/tooltip/tooltip.stories.ts
+++ b/src/stories/tooltip.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import Tooltip from '@/components/tooltip/index'
+import Tooltip from '@/components/tooltip'
 
 const meta = {
   title: 'DesignSystem/Tooltip',