diff --git a/src/assets/right-arrow.svg b/src/assets/right-arrow.svg
new file mode 100644
index 0000000..400f9cb
--- /dev/null
+++ b/src/assets/right-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="7" height="8" viewBox="0 0 7 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.15919 0.602513C2.02112 0.46583 1.79728 0.46583 1.65921 0.602513C1.52115 0.739197 1.52115 0.960805 1.65921 1.09749L4.59104 4L1.65921 6.90251C1.52115 7.0392 1.52115 7.2608 1.65921 7.39749C1.79728 7.53417 2.02112 7.53417 2.15919 7.39749L5.34076 4.24773C5.34084 4.24765 5.34092 4.24757 5.34101 4.24749C5.47907 4.1108 5.47907 3.8892 5.34101 3.75251C5.34092 3.75243 5.34084 3.75235 5.34076 3.75227L2.15919 0.602513Z" fill="#DCDDDE"/>
+</svg>
diff --git a/src/components/shared/ContextMenu.tsx b/src/components/shared/ContextMenu.tsx
new file mode 100644
index 0000000..fb12e44
--- /dev/null
+++ b/src/components/shared/ContextMenu.tsx
@@ -0,0 +1,116 @@
+import { Dispatch, SetStateAction, useRef, useState } from 'react'
+import RightArrow from '../../assets/right-arrow.svg'
+
+function Item({
+  name,
+  isDropdown,
+  isWarning,
+  onClick,
+  children,
+}: {
+  name: string
+  isDropdown?: boolean
+  isWarning?: boolean
+  onClick?: () => void
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      onClick={onClick}
+      className={` relative hover:bg-primary ${isWarning && 'hover:bg-red'} rounded-[3px] bg-[#202225] flex w-[117px] justify-between items-center px-2 py-1`}
+    >
+      <div className='font-["Whitney"] font-medium text-[#DCDDDE] text-[11.5px]'>
+        {name}
+      </div>
+      {isDropdown && (
+        <div>
+          <img src={RightArrow} alt='dropdown btn' />
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}
+
+function SubMenu({
+  name,
+  list,
+  openSubMenu,
+  setOpenSubMenu,
+}: {
+  name: string
+  list: string[]
+  openSubMenu: string | null
+  setOpenSubMenu: Dispatch<SetStateAction<string | null>>
+}) {
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+    setOpenSubMenu(name)
+  }
+
+  const handleMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => {
+      setOpenSubMenu((prevOpenSubMenu: string | null) => {
+        return prevOpenSubMenu === name ? null : prevOpenSubMenu
+      })
+    }, 300)
+  }
+
+  return (
+    <div
+      className='relative'
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <Item name={name} isDropdown />
+
+      {openSubMenu === name && (
+        <div
+          className='absolute left-[125px] top-0 bg-[#202225] flex flex-col p-1 rounded-[5px] shadow-md'
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          {list.map((item, index) => (
+            <Item key={index} name={item} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function ContextMenu() {
+  const [openSubMenu, setOpenSubMenu] = useState<string | null>(null)
+
+  return (
+    <div className='bg-[#202225] inline-flex flex-col p-1 rounded-[5px]'>
+      <Item name='프로필' />
+      <Item name='멘션' />
+      <Item name='메시지' />
+      <Item name='통화' />
+      <Item name='메모 추가하기' />
+      <div className='h-[1px] my-1 bg-[#2F2F34] ' />
+      <SubMenu
+        name='앱'
+        list={['1']}
+        openSubMenu={openSubMenu}
+        setOpenSubMenu={setOpenSubMenu}
+      />
+      <SubMenu
+        name='서버에 초대하기'
+        list={['2']}
+        openSubMenu={openSubMenu}
+        setOpenSubMenu={setOpenSubMenu}
+      />
+      <Item name='친구 초대하기' />
+      <Item name='거절' />
+      <Item name='차단하기' isWarning />
+      <div className='h-[1px] my-1 bg-[#2F2F34] ' />
+      <Item name='관리자 뷰' />
+    </div>
+  )
+}