diff --git a/front/package.json b/front/package.json
index a4af53f..e0b5721 100644
--- a/front/package.json
+++ b/front/package.json
@@ -15,6 +15,7 @@
"dependencies": {
"@radix-ui/react-avatar": "^1.1.1",
"@radix-ui/react-checkbox": "^1.1.2",
+ "@radix-ui/react-context-menu": "^2.2.2",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-slot": "^1.1.0",
"@tanstack/query-core": "^5.59.0",
diff --git a/front/src/components/ui/context-menu.stories.tsx b/front/src/components/ui/context-menu.stories.tsx
new file mode 100644
index 0000000..2d993af
--- /dev/null
+++ b/front/src/components/ui/context-menu.stories.tsx
@@ -0,0 +1,109 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import {
+ ContextMenu,
+ ContextMenuCheckboxItem,
+ ContextMenuContent,
+ ContextMenuItem,
+ ContextMenuLabel,
+ ContextMenuRadioGroup,
+ ContextMenuRadioItem,
+ ContextMenuSeparator,
+ ContextMenuShortcut,
+ ContextMenuSub,
+ ContextMenuSubContent,
+ ContextMenuSubTrigger,
+ ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+
+const meta: Meta = {
+ component: ContextMenu,
+ title: "Context Menu",
+ args: {
+ className: "",
+ },
+ argTypes: {
+ className: {
+ type: "string",
+ control: "text",
+ },
+ },
+};
+type Story = StoryObj;
+
+const Render = (args: Meta) => (
+
+
+ Right click here
+
+
+
+ Back
+ ⌘[
+
+
+ Forward
+ ⌘]
+
+
+ Reload
+ ⌘R
+
+
+ More Tools
+
+
+ Save Page As...
+ ⇧⌘S
+
+ Create Shortcut...
+ Name Window...
+
+ Developer Tools
+
+
+
+
+ Show Bookmarks Bar
+ ⌘⇧B
+
+ Show Full URLs
+
+
+ Controls
+ Left click
+ Right click
+
+
+
+);
+
+export const Default: Story = {
+ args: {
+ className: "",
+ },
+ parameters: {
+ backgrounds: {
+ default: "light",
+ },
+ },
+ render: Render,
+};
+
+export const DarkMode: Story = {
+ args: {
+ className: "",
+ },
+ parameters: {
+ backgrounds: {
+ default: "dark",
+ },
+ },
+ render: (args) => (
+
+
+
+ ),
+};
+
+export default meta;
diff --git a/front/src/components/ui/context-menu.tsx b/front/src/components/ui/context-menu.tsx
new file mode 100644
index 0000000..9102cf8
--- /dev/null
+++ b/front/src/components/ui/context-menu.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import {
+ CheckboxItem,
+ Content,
+ Group,
+ Item,
+ ItemIndicator,
+ Label,
+ Portal,
+ RadioGroup,
+ RadioItem,
+ Root,
+ Separator,
+ Sub,
+ SubContent,
+ SubTrigger,
+ Trigger,
+} from "@radix-ui/react-context-menu";
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+const ContextMenu = Root;
+const ContextMenuTrigger = Trigger;
+const ContextMenuGroup = Group;
+const ContextMenuPortal = Portal;
+const ContextMenuSub = Sub;
+const ContextMenuRadioGroup = RadioGroup;
+
+const ContextMenuSubTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+
+));
+ContextMenuSubTrigger.displayName = SubTrigger.displayName;
+
+const ContextMenuSubContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+ContextMenuSubContent.displayName = SubContent.displayName;
+
+const ContextMenuContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+));
+ContextMenuContent.displayName = Content.displayName;
+
+const ContextMenuItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, ...props }, ref) => (
+