diff --git a/front/package.json b/front/package.json
index 6ac6f18..48a1295 100644
--- a/front/package.json
+++ b/front/package.json
@@ -28,10 +28,19 @@
     "@radix-ui/react-context-menu": "^2.2.2",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-hover-card": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@solana/web3.js": "^1.95.4",
     "@tanstack/query-core": "^5.59.0",
@@ -43,6 +52,7 @@
     "next": "14.2.15",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "sonner": "^1.7.0",
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7",
     "viem": "2.21.19",
diff --git a/front/src/components/ui/checkbox.stories.tsx b/front/src/components/ui/checkbox.stories.tsx
index 1b1f2fa..e0c1111 100644
--- a/front/src/components/ui/checkbox.stories.tsx
+++ b/front/src/components/ui/checkbox.stories.tsx
@@ -1,12 +1,13 @@
 import { Meta, StoryObj } from "@storybook/react";
 
 import { Checkbox, CheckboxProps } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
 
 const meta: Meta<CheckboxProps> = {
 	component: Checkbox,
 	title: "Checkbox",
 	args: {
-		children: "Enable checkbox",
+		disabled: false,
 		className: "",
 	},
 	argTypes: {
@@ -22,7 +23,12 @@ const meta: Meta<CheckboxProps> = {
 };
 type Story = StoryObj<CheckboxProps>;
 
-const Render = (args: CheckboxProps) => <Checkbox {...args} />;
+const Render = (args: CheckboxProps) => (
+	<div className="flex items-center gap-x-2">
+		<Checkbox id="enable" {...args} />
+		<Label htmlFor="enable">Enable cookies</Label>
+	</div>
+);
 
 export const LightMode: Story = {
 	args: {
diff --git a/front/src/components/ui/command.stories.tsx b/front/src/components/ui/command.stories.tsx
index bd32361..72e0d2e 100644
--- a/front/src/components/ui/command.stories.tsx
+++ b/front/src/components/ui/command.stories.tsx
@@ -37,7 +37,7 @@ const meta: Meta<CommandProps> = {
 	},
 };
 type Story = StoryObj<CommandProps>;
-type DarkModeMeta = CommandProps & { dark?: boolean };
+type DarkModeMeta = CommandProps & { dark?: boolean; className?: string };
 
 const Render = (args: DarkModeMeta) => {
 	const [open, setOpen] = React.useState(false);
diff --git a/front/src/components/ui/context-menu.stories.tsx b/front/src/components/ui/context-menu.stories.tsx
index 7e1b060..e29cf9e 100644
--- a/front/src/components/ui/context-menu.stories.tsx
+++ b/front/src/components/ui/context-menu.stories.tsx
@@ -30,7 +30,7 @@ const meta: Meta = {
 	},
 };
 type Story = StoryObj;
-type DarkModeMeta = { dark?: boolean };
+type DarkModeMeta = { dark?: boolean; className?: string };
 
 const Render = (args: DarkModeMeta) => (
 	<ContextMenu {...args}>
diff --git a/front/src/components/ui/dialog.stories.tsx b/front/src/components/ui/dialog.stories.tsx
index a653155..7814f28 100644
--- a/front/src/components/ui/dialog.stories.tsx
+++ b/front/src/components/ui/dialog.stories.tsx
@@ -26,7 +26,7 @@ const meta: Meta = {
 	},
 };
 type Story = StoryObj;
-type DarkModeMeta = { dark?: boolean };
+type DarkModeMeta = { dark?: boolean; className?: string };
 
 const Render = (args: DarkModeMeta) => (
 	<Dialog>
diff --git a/front/src/components/ui/dropdown-menu.stories.tsx b/front/src/components/ui/dropdown-menu.stories.tsx
index 4d916c9..7c1c027 100644
--- a/front/src/components/ui/dropdown-menu.stories.tsx
+++ b/front/src/components/ui/dropdown-menu.stories.tsx
@@ -24,7 +24,7 @@ const meta: Meta = {
 	},
 };
 type Story = StoryObj;
-type DarkModeMeta = { dark?: boolean };
+type DarkModeMeta = { dark?: boolean; className?: string };
 
 const Render = (args: DarkModeMeta) => (
 	<DropdownMenu {...args}>
diff --git a/front/src/components/ui/hover-card.stories.tsx b/front/src/components/ui/hover-card.stories.tsx
new file mode 100644
index 0000000..544006b
--- /dev/null
+++ b/front/src/components/ui/hover-card.stories.tsx
@@ -0,0 +1,71 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { CalendarDays } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
+
+const meta: Meta = {
+	component: HoverCard,
+	title: "Hover Card",
+	args: {
+		className: "",
+	},
+	argTypes: {
+		className: {
+			type: "string",
+			control: "text",
+		},
+	},
+};
+type Story = StoryObj;
+type DarkModeMeta = { dark?: boolean; className?: string };
+
+const Render = (args: DarkModeMeta) => (
+	<HoverCard>
+		<HoverCardTrigger asChild>
+			<Button variant="link">Bedrock</Button>
+		</HoverCardTrigger>
+		<HoverCardContent className={args.dark ? "dark w-80" : "w-80"}>
+			<div className="flex justify-between space-x-4">
+				<div className="space-y-1">
+					<h4 className="text-sm font-semibold">Bedrock</h4>
+					<p className="text-sm">Your decentralized workspace by design, not by promise.</p>
+					<div className="flex items-center pt-2">
+						<CalendarDays className="mr-2 h-4 w-4 opacity-70" />{" "}
+						<span className="text-xs text-muted-foreground">Since June 2024</span>
+					</div>
+				</div>
+			</div>
+		</HoverCardContent>
+	</HoverCard>
+);
+
+export const LightMode: Story = {
+	args: {
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "light",
+		},
+	},
+	render: Render,
+};
+
+export const DarkMode: Story = {
+	args: {
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "dark",
+		},
+	},
+	render: (args) => (
+		<div className="dark">
+			<Render {...args} dark />
+		</div>
+	),
+};
+
+export default meta;
diff --git a/front/src/components/ui/hover-card.tsx b/front/src/components/ui/hover-card.tsx
new file mode 100644
index 0000000..575d870
--- /dev/null
+++ b/front/src/components/ui/hover-card.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { Root, Trigger, Content } from "@radix-ui/react-hover-card";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+const HoverCard = Root;
+const HoverCardTrigger = Trigger;
+
+const HoverCardContent = React.forwardRef<
+	React.ElementRef<typeof Content>,
+	React.ComponentPropsWithoutRef<typeof Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<Content
+		ref={ref}
+		align={align}
+		sideOffset={sideOffset}
+		className={cn(
+			"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			className,
+		)}
+		{...props}
+	/>
+));
+HoverCardContent.displayName = Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/front/src/components/ui/input.stories.tsx b/front/src/components/ui/input.stories.tsx
index 1a41a6e..2c92063 100644
--- a/front/src/components/ui/input.stories.tsx
+++ b/front/src/components/ui/input.stories.tsx
@@ -6,15 +6,10 @@ const meta: Meta<InputProps> = {
 	component: Input,
 	title: "Input",
 	args: {
-		value: "Text input",
 		disabled: false,
 		className: "",
 	},
 	argTypes: {
-		value: {
-			type: "string",
-			control: "text",
-		},
 		disabled: {
 			type: "boolean",
 			control: "boolean",
@@ -27,11 +22,10 @@ const meta: Meta<InputProps> = {
 };
 type Story = StoryObj<InputProps>;
 
-const Render = (args: InputProps) => <Input {...args} />;
+const Render = (args: InputProps) => <Input {...args} defaultValue="Text value" />;
 
 export const LightMode: Story = {
 	args: {
-		value: "Text input",
 		disabled: false,
 		className: "",
 	},
@@ -45,7 +39,6 @@ export const LightMode: Story = {
 
 export const DarkMode: Story = {
 	args: {
-		value: "Text input",
 		disabled: false,
 		className: "",
 	},
diff --git a/front/src/components/ui/popover.stories.tsx b/front/src/components/ui/popover.stories.tsx
new file mode 100644
index 0000000..5d6f4a6
--- /dev/null
+++ b/front/src/components/ui/popover.stories.tsx
@@ -0,0 +1,74 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+
+const meta: Meta = {
+	component: Popover,
+	title: "Popover",
+	args: {
+		className: "",
+	},
+	argTypes: {
+		className: {
+			type: "string",
+			control: "text",
+		},
+	},
+};
+type Story = StoryObj;
+type DarkModeMeta = { dark?: boolean; className?: string };
+
+const Render = (args: DarkModeMeta) => (
+	<Popover {...args}>
+		<PopoverTrigger asChild>
+			<Button variant="outline">Open</Button>
+		</PopoverTrigger>
+		<PopoverContent className={args.dark ? "dark w-80" : "w-80"}>
+			<div className="grid gap-4">
+				<div className="space-y-2">
+					<h4 className="font-medium leading-none">File</h4>
+					<p className="text-sm text-muted-foreground">Change file parameters</p>
+				</div>
+				<div className="grid gap-2">
+					<div className="grid grid-cols-3 items-center gap-4">
+						<Label htmlFor="name">File name</Label>
+						<Input id="name" defaultValue="file.pdf" className="col-span-2 h-8" />
+					</div>
+				</div>
+			</div>
+		</PopoverContent>
+	</Popover>
+);
+
+export const LightMode: Story = {
+	args: {
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "light",
+		},
+	},
+	render: Render,
+};
+
+export const DarkMode: Story = {
+	args: {
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "dark",
+		},
+	},
+	render: (args) => (
+		<div className="dark">
+			<Render {...args} dark />
+		</div>
+	),
+};
+
+export default meta;
diff --git a/front/src/components/ui/popover.tsx b/front/src/components/ui/popover.tsx
new file mode 100644
index 0000000..e18f1ca
--- /dev/null
+++ b/front/src/components/ui/popover.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { Root, Trigger, Anchor, Content, Portal } from "@radix-ui/react-popover";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Popover = Root;
+const PopoverTrigger = Trigger;
+const PopoverAnchor = Anchor;
+
+const PopoverContent = React.forwardRef<
+	React.ElementRef<typeof Content>,
+	React.ComponentPropsWithoutRef<typeof Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<Portal>
+		<Content
+			ref={ref}
+			align={align}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				className,
+			)}
+			{...props}
+		/>
+	</Portal>
+));
+PopoverContent.displayName = Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/front/src/components/ui/progress.stories.tsx b/front/src/components/ui/progress.stories.tsx
new file mode 100644
index 0000000..fe3517b
--- /dev/null
+++ b/front/src/components/ui/progress.stories.tsx
@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Progress, ProgressProps } from "@/components/ui/progress";
+
+const meta: Meta<ProgressProps> = {
+	component: Progress,
+	title: "Progress",
+	args: {
+		value: 20,
+		className: "",
+	},
+	argTypes: {
+		value: {
+			type: "string",
+			control: "number",
+		},
+		className: {
+			type: "string",
+			control: "text",
+		},
+	},
+};
+type Story = StoryObj<ProgressProps>;
+
+const Render = (args: ProgressProps) => <Progress {...args} />;
+
+export const LightMode: Story = {
+	args: {
+		value: 20,
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "light",
+		},
+	},
+	render: Render,
+};
+
+export const DarkMode: Story = {
+	args: {
+		value: 20,
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "dark",
+		},
+	},
+	render: (args) => (
+		<div className="dark">
+			<Render {...args} />
+		</div>
+	),
+};
+
+export default meta;
diff --git a/front/src/components/ui/progress.tsx b/front/src/components/ui/progress.tsx
new file mode 100644
index 0000000..862f28e
--- /dev/null
+++ b/front/src/components/ui/progress.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { Indicator, Root } from "@radix-ui/react-progress";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+export type ProgressProps = React.ComponentPropsWithoutRef<typeof Root>;
+
+const Progress = React.forwardRef<React.ElementRef<typeof Root>, ProgressProps>(
+	({ className, value, ...props }, ref) => (
+		<Root
+			ref={ref}
+			className={cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className)}
+			{...props}
+		>
+			<Indicator
+				className="h-full w-full flex-1 bg-primary transition-all"
+				style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+			/>
+		</Root>
+	),
+);
+Progress.displayName = Root.displayName;
+
+export { Progress };
diff --git a/front/src/components/ui/radio-group.stories.tsx b/front/src/components/ui/radio-group.stories.tsx
new file mode 100644
index 0000000..7cd4b44
--- /dev/null
+++ b/front/src/components/ui/radio-group.stories.tsx
@@ -0,0 +1,66 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+
+const meta: Meta = {
+	component: RadioGroup,
+	title: "Radio Group",
+	args: {
+		className: "",
+	},
+	argTypes: {
+		className: {
+			type: "string",
+			control: "text",
+		},
+	},
+};
+type Story = StoryObj;
+
+const Render = (args: object) => (
+	<RadioGroup defaultValue="option-one" {...args}>
+		<div className="flex items-center space-x-2">
+			<RadioGroupItem value="option-one" id="option-one" />
+			<Label htmlFor="option-one">Option One</Label>
+		</div>
+		<div className="flex items-center space-x-2">
+			<RadioGroupItem value="option-two" id="option-two" />
+			<Label htmlFor="option-two">Option Two</Label>
+		</div>
+		<div className="flex items-center space-x-2">
+			<RadioGroupItem value="option-three" id="option-three" />
+			<Label htmlFor="option-three">Option Three</Label>
+		</div>
+	</RadioGroup>
+);
+
+export const LightMode: Story = {
+	args: {
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "light",
+		},
+	},
+	render: Render,
+};
+
+export const DarkMode: Story = {
+	args: {
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "dark",
+		},
+	},
+	render: (args) => (
+		<div className="dark">
+			<Render {...args} />
+		</div>
+	),
+};
+
+export default meta;
diff --git a/front/src/components/ui/radio-group.tsx b/front/src/components/ui/radio-group.tsx
new file mode 100644
index 0000000..5573bbb
--- /dev/null
+++ b/front/src/components/ui/radio-group.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { CheckIcon } from "@radix-ui/react-icons";
+import { Indicator, Item, Root } from "@radix-ui/react-radio-group";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+const RadioGroup = React.forwardRef<React.ElementRef<typeof Root>, React.ComponentPropsWithoutRef<typeof Root>>(
+	({ className, ...props }, ref) => {
+		return <Root className={cn("grid gap-2", className)} {...props} ref={ref} />;
+	},
+);
+RadioGroup.displayName = Root.displayName;
+
+const RadioGroupItem = React.forwardRef<React.ElementRef<typeof Item>, React.ComponentPropsWithoutRef<typeof Item>>(
+	({ className, ...props }, ref) => {
+		return (
+			<Item
+				ref={ref}
+				className={cn(
+					"aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+					className,
+				)}
+				{...props}
+			>
+				<Indicator className="flex items-center justify-center">
+					<CheckIcon className="h-3.5 w-3.5 fill-primary" />
+				</Indicator>
+			</Item>
+		);
+	},
+);
+RadioGroupItem.displayName = Item.displayName;
+
+export { RadioGroup, RadioGroupItem };
diff --git a/front/src/components/ui/scroll-area.stories.tsx b/front/src/components/ui/scroll-area.stories.tsx
new file mode 100644
index 0000000..2ba43c3
--- /dev/null
+++ b/front/src/components/ui/scroll-area.stories.tsx
@@ -0,0 +1,69 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const meta: Meta = {
+	component: ScrollArea,
+	title: "Scroll Area",
+	args: {
+		className: "",
+	},
+	argTypes: {
+		className: {
+			type: "string",
+			control: "text",
+		},
+	},
+};
+type Story = StoryObj;
+type DarkModeMeta = { dark?: boolean; className?: string };
+
+const versions = Array.from({ length: 22 }).map((_, i, a) => `v1.${a.length - i - 1}`);
+
+const Render = (args: DarkModeMeta) => (
+	<ScrollArea {...args} className={cn("h-72 w-48 rounded-md border", args.className)}>
+		<div className="p-4">
+			<h4 className="mb-4 text-sm font-medium leading-none text-primary">Versions</h4>
+			{versions.map((version) => (
+				<>
+					<div key={version} className="text-sm text-primary">
+						{version}
+					</div>
+					<Separator orientation="horizontal" className="my-2" />
+				</>
+			))}
+		</div>
+	</ScrollArea>
+);
+
+export const LightMode: Story = {
+	args: {
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "light",
+		},
+	},
+	render: Render,
+};
+
+export const DarkMode: Story = {
+	args: {
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "dark",
+		},
+	},
+	render: (args) => (
+		<div className="dark">
+			<Render {...args} />
+		</div>
+	),
+};
+
+export default meta;
diff --git a/front/src/components/ui/scroll-area.tsx b/front/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..6d3977d
--- /dev/null
+++ b/front/src/components/ui/scroll-area.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { Root, Viewport, ScrollAreaScrollbar, ScrollAreaThumb, Corner } from "@radix-ui/react-scroll-area";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+const ScrollArea = React.forwardRef<React.ElementRef<typeof Root>, React.ComponentPropsWithoutRef<typeof Root>>(
+	({ className, children, ...props }, ref) => (
+		<Root ref={ref} className={cn("relative overflow-hidden border-primary", className)} {...props}>
+			<Viewport className="h-full w-full rounded-[inherit]">{children}</Viewport>
+			<ScrollBar />
+			<Corner />
+		</Root>
+	),
+);
+ScrollArea.displayName = Root.displayName;
+
+const ScrollBar = React.forwardRef<
+	React.ElementRef<typeof ScrollAreaScrollbar>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+	<ScrollAreaScrollbar
+		ref={ref}
+		orientation={orientation}
+		className={cn(
+			"flex touch-none select-none transition-colors",
+			orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+			orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+			className,
+		)}
+		{...props}
+	>
+		<ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+	</ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
diff --git a/front/src/components/ui/select.stories.tsx b/front/src/components/ui/select.stories.tsx
new file mode 100644
index 0000000..cd70199
--- /dev/null
+++ b/front/src/components/ui/select.stories.tsx
@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+const meta: Meta = {
+	component: Select,
+	title: "Select",
+	args: {
+		className: "",
+	},
+	argTypes: {
+		className: {
+			type: "string",
+			control: "text",
+		},
+	},
+};
+type Story = StoryObj;
+type DarkModeMeta = { dark?: boolean; className?: string };
+
+const Render = (args: DarkModeMeta) => (
+	<Select {...args}>
+		<SelectTrigger className="w-[180px]">
+			<SelectValue placeholder="Content type" />
+		</SelectTrigger>
+		<SelectContent className={args.dark ? "dark" : ""}>
+			<SelectItem value="text">Text</SelectItem>
+			<SelectItem value="image">Image</SelectItem>
+			<SelectItem value="video">Video</SelectItem>
+		</SelectContent>
+	</Select>
+);
+
+export const LightMode: Story = {
+	args: {
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "light",
+		},
+	},
+	render: Render,
+};
+
+export const DarkMode: Story = {
+	args: {
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "dark",
+		},
+	},
+	render: (args) => (
+		<div className="dark">
+			<Render {...args} dark />
+		</div>
+	),
+};
+
+export default meta;
diff --git a/front/src/components/ui/select.tsx b/front/src/components/ui/select.tsx
new file mode 100644
index 0000000..341ddfb
--- /dev/null
+++ b/front/src/components/ui/select.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
+import {
+	Root,
+	Group,
+	Value,
+	Trigger,
+	ScrollUpButton,
+	ScrollDownButton,
+	Icon,
+	Portal,
+	Content,
+	Label,
+	Viewport,
+	Item,
+	Separator,
+	ItemIndicator,
+	ItemText,
+} from "@radix-ui/react-select";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Select = Root;
+const SelectGroup = Group;
+const SelectValue = Value;
+
+const SelectTrigger = React.forwardRef<
+	React.ElementRef<typeof Trigger>,
+	React.ComponentPropsWithoutRef<typeof Trigger>
+>(({ className, children, ...props }, ref) => (
+	<Trigger
+		ref={ref}
+		className={cn(
+			"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 text-primary",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<Icon asChild>
+			<CaretSortIcon className="h-4 w-4 opacity-50" />
+		</Icon>
+	</Trigger>
+));
+SelectTrigger.displayName = Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+	React.ElementRef<typeof ScrollUpButton>,
+	React.ComponentPropsWithoutRef<typeof ScrollUpButton>
+>(({ className, ...props }, ref) => (
+	<ScrollUpButton
+		ref={ref}
+		className={cn("flex cursor-default items-center justify-center py-1", className)}
+		{...props}
+	>
+		<ChevronUpIcon />
+	</ScrollUpButton>
+));
+SelectScrollUpButton.displayName = ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+	React.ElementRef<typeof ScrollDownButton>,
+	React.ComponentPropsWithoutRef<typeof ScrollDownButton>
+>(({ className, ...props }, ref) => (
+	<ScrollDownButton
+		ref={ref}
+		className={cn("flex cursor-default items-center justify-center py-1", className)}
+		{...props}
+	>
+		<ChevronDownIcon />
+	</ScrollDownButton>
+));
+SelectScrollDownButton.displayName = ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+	React.ElementRef<typeof Content>,
+	React.ComponentPropsWithoutRef<typeof Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+	<Portal>
+		<Content
+			ref={ref}
+			className={cn(
+				"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				position === "popper" &&
+					"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+				className,
+			)}
+			position={position}
+			{...props}
+		>
+			<SelectScrollUpButton />
+			<Viewport
+				className={cn(
+					"p-1",
+					position === "popper" &&
+						"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+				)}
+			>
+				{children}
+			</Viewport>
+			<SelectScrollDownButton />
+		</Content>
+	</Portal>
+));
+SelectContent.displayName = Content.displayName;
+
+const SelectLabel = React.forwardRef<React.ElementRef<typeof Label>, React.ComponentPropsWithoutRef<typeof Label>>(
+	({ className, ...props }, ref) => (
+		<Label ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", className)} {...props} />
+	),
+);
+SelectLabel.displayName = Label.displayName;
+
+const SelectItem = React.forwardRef<React.ElementRef<typeof Item>, React.ComponentPropsWithoutRef<typeof Item>>(
+	({ className, children, ...props }, ref) => (
+		<Item
+			ref={ref}
+			className={cn(
+				"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+				className,
+			)}
+			{...props}
+		>
+			<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+				<ItemIndicator>
+					<CheckIcon className="h-4 w-4" />
+				</ItemIndicator>
+			</span>
+			<ItemText>{children}</ItemText>
+		</Item>
+	),
+);
+SelectItem.displayName = Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+	React.ElementRef<typeof Separator>,
+	React.ComponentPropsWithoutRef<typeof Separator>
+>(({ className, ...props }, ref) => (
+	<Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+));
+SelectSeparator.displayName = Separator.displayName;
+
+export {
+	Select,
+	SelectGroup,
+	SelectValue,
+	SelectTrigger,
+	SelectContent,
+	SelectLabel,
+	SelectItem,
+	SelectSeparator,
+	SelectScrollUpButton,
+	SelectScrollDownButton,
+};
diff --git a/front/src/components/ui/sheet.stories.tsx b/front/src/components/ui/sheet.stories.tsx
index b3689ac..ea91385 100644
--- a/front/src/components/ui/sheet.stories.tsx
+++ b/front/src/components/ui/sheet.stories.tsx
@@ -33,7 +33,7 @@ const meta: Meta<SheetContentProps> = {
 	},
 };
 type Story = StoryObj<SheetContentProps>;
-type DarkModeMeta = SheetContentProps & { dark?: boolean };
+type DarkModeMeta = SheetContentProps & { dark?: boolean; className?: string };
 
 const Render = (args: DarkModeMeta) => (
 	<Sheet>
diff --git a/front/src/components/ui/slider.stories.tsx b/front/src/components/ui/slider.stories.tsx
new file mode 100644
index 0000000..06898c8
--- /dev/null
+++ b/front/src/components/ui/slider.stories.tsx
@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Slider, SliderProps } from "@/components/ui/slider";
+
+const meta: Meta<SliderProps> = {
+	component: Slider,
+	title: "Slider",
+	args: {
+		disabled: false,
+		className: "",
+	},
+	argTypes: {
+		disabled: {
+			type: "boolean",
+			control: "boolean",
+		},
+		className: {
+			type: "string",
+			control: "text",
+		},
+	},
+};
+type Story = StoryObj<SliderProps>;
+
+const Render = (args: SliderProps) => <Slider {...args} defaultValue={[20]} min={0} max={100} />;
+
+export const LightMode: Story = {
+	args: {
+		disabled: false,
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "light",
+		},
+	},
+	render: Render,
+};
+
+export const DarkMode: Story = {
+	args: {
+		disabled: false,
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "dark",
+		},
+	},
+	render: (args) => (
+		<div className="dark">
+			<Render {...args} />
+		</div>
+	),
+};
+
+export default meta;
diff --git a/front/src/components/ui/slider.tsx b/front/src/components/ui/slider.tsx
new file mode 100644
index 0000000..a922f6e
--- /dev/null
+++ b/front/src/components/ui/slider.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { Root, Track, Thumb, Range } from "@radix-ui/react-slider";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+export type SliderProps = React.ComponentPropsWithoutRef<typeof Root>;
+
+const Slider = React.forwardRef<React.ElementRef<typeof Root>, SliderProps>(({ className, ...props }, ref) => (
+	<Root ref={ref} className={cn("relative flex w-full touch-none select-none items-center", className)} {...props}>
+		<Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+			<Range className="absolute h-full bg-primary" />
+		</Track>
+		<Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+	</Root>
+));
+Slider.displayName = Root.displayName;
+
+export { Slider };
diff --git a/front/src/components/ui/sonner.stories.tsx b/front/src/components/ui/sonner.stories.tsx
new file mode 100644
index 0000000..ac8b6d9
--- /dev/null
+++ b/front/src/components/ui/sonner.stories.tsx
@@ -0,0 +1,61 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Toaster } from "@/components/ui/sonner";
+
+const meta: Meta = {
+	component: Toaster,
+	title: "Sonner",
+};
+type Story = StoryObj;
+
+const Render = () => {
+	return (
+		<>
+			<Toaster />
+			<Button
+				variant="outline"
+				onClick={() =>
+					toast("File has been created", {
+						description: "file.pdf",
+						action: {
+							label: "Navigate to file",
+							onClick: () => {},
+						},
+						cancel: {
+							label: "Undo",
+							onClick: () => {},
+						},
+					})
+				}
+			>
+				Open toaster
+			</Button>
+		</>
+	);
+};
+
+export const LightMode: Story = {
+	parameters: {
+		backgrounds: {
+			default: "light",
+		},
+	},
+	render: Render,
+};
+
+export const DarkMode: Story = {
+	parameters: {
+		backgrounds: {
+			default: "dark",
+		},
+	},
+	render: (args) => (
+		<div className="dark">
+			<Render {...args} />
+		</div>
+	),
+};
+
+export default meta;
diff --git a/front/src/components/ui/sonner.tsx b/front/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..9f45665
--- /dev/null
+++ b/front/src/components/ui/sonner.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+	return (
+		<Sonner
+			className="toaster group"
+			toastOptions={{
+				classNames: {
+					toast:
+						"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+					description: "group-[.toast]:text-muted-foreground",
+					actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+					cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+				},
+			}}
+			{...props}
+		/>
+	);
+};
+
+export { Toaster };
diff --git a/front/src/components/ui/switch.stories.tsx b/front/src/components/ui/switch.stories.tsx
new file mode 100644
index 0000000..ec66120
--- /dev/null
+++ b/front/src/components/ui/switch.stories.tsx
@@ -0,0 +1,63 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Label } from "@/components/ui/label";
+import { Switch, SwitchProps } from "@/components/ui/switch";
+
+const meta: Meta<SwitchProps> = {
+	component: Switch,
+	title: "Switch",
+	args: {
+		disabled: false,
+		className: "",
+	},
+	argTypes: {
+		disabled: {
+			type: "boolean",
+			control: "boolean",
+		},
+		className: {
+			type: "string",
+			control: "text",
+		},
+	},
+};
+type Story = StoryObj<SwitchProps>;
+
+const Render = (args: SwitchProps) => (
+	<div className="flex items-center gap-x-2">
+		<Switch id="enable" {...args} />
+		<Label htmlFor="enable">Enable cookies</Label>
+	</div>
+);
+
+export const LightMode: Story = {
+	args: {
+		disabled: false,
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "light",
+		},
+	},
+	render: Render,
+};
+
+export const DarkMode: Story = {
+	args: {
+		disabled: false,
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "dark",
+		},
+	},
+	render: (args) => (
+		<div className="dark">
+			<Render {...args} />
+		</div>
+	),
+};
+
+export default meta;
diff --git a/front/src/components/ui/switch.tsx b/front/src/components/ui/switch.tsx
new file mode 100644
index 0000000..ac13893
--- /dev/null
+++ b/front/src/components/ui/switch.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { Root, Thumb } from "@radix-ui/react-switch";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+export type SwitchProps = Omit<React.ComponentProps<typeof Root>, "value">;
+
+const Switch = React.forwardRef<React.ElementRef<typeof Root>, SwitchProps>(({ className, ...props }, ref) => (
+	<Root
+		className={cn(
+			"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+			className,
+		)}
+		{...props}
+		ref={ref}
+	>
+		<Thumb
+			className={cn(
+				"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+			)}
+		/>
+	</Root>
+));
+Switch.displayName = Root.displayName;
+
+export { Switch };
diff --git a/front/src/components/ui/tabs.stories.tsx b/front/src/components/ui/tabs.stories.tsx
new file mode 100644
index 0000000..948b891
--- /dev/null
+++ b/front/src/components/ui/tabs.stories.tsx
@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+const meta: Meta = {
+	component: Tabs,
+	title: "Tabs",
+};
+type Story = StoryObj;
+
+const Render = () => {
+	return (
+		<Tabs defaultValue="left" className="w-[50%]">
+			<TabsList className="grid w-full grid-cols-2">
+				<TabsTrigger value="left">Left</TabsTrigger>
+				<TabsTrigger value="right">Right</TabsTrigger>
+			</TabsList>
+			<TabsContent value="left">
+				<p className="text-primary">Welcome to the left tab</p>
+			</TabsContent>
+			<TabsContent value="right">
+				<p className="text-primary">Welcome to the right tab</p>
+			</TabsContent>
+		</Tabs>
+	);
+};
+
+export const LightMode: Story = {
+	parameters: {
+		backgrounds: {
+			default: "light",
+		},
+	},
+	render: Render,
+};
+
+export const DarkMode: Story = {
+	parameters: {
+		backgrounds: {
+			default: "dark",
+		},
+	},
+	render: (args) => (
+		<div className="dark">
+			<Render {...args} />
+		</div>
+	),
+};
+
+export default meta;
diff --git a/front/src/components/ui/tabs.tsx b/front/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..88805b1
--- /dev/null
+++ b/front/src/components/ui/tabs.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { List, Root, Trigger, Content } from "@radix-ui/react-tabs";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = Root;
+
+const TabsList = React.forwardRef<React.ElementRef<typeof List>, React.ComponentPropsWithoutRef<typeof List>>(
+	({ className, ...props }, ref) => (
+		<List
+			ref={ref}
+			className={cn(
+				"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	),
+);
+TabsList.displayName = List.displayName;
+
+const TabsTrigger = React.forwardRef<React.ElementRef<typeof Trigger>, React.ComponentPropsWithoutRef<typeof Trigger>>(
+	({ className, ...props }, ref) => (
+		<Trigger
+			ref={ref}
+			className={cn(
+				"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+				className,
+			)}
+			{...props}
+		/>
+	),
+);
+TabsTrigger.displayName = Trigger.displayName;
+
+const TabsContent = React.forwardRef<React.ElementRef<typeof Content>, React.ComponentPropsWithoutRef<typeof Content>>(
+	({ className, ...props }, ref) => (
+		<Content
+			ref={ref}
+			className={cn(
+				"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+				className,
+			)}
+			{...props}
+		/>
+	),
+);
+TabsContent.displayName = Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/front/src/components/ui/textarea.stories.tsx b/front/src/components/ui/textarea.stories.tsx
new file mode 100644
index 0000000..f6ba6b6
--- /dev/null
+++ b/front/src/components/ui/textarea.stories.tsx
@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Textarea, TextareaProps } from "@/components/ui/textarea";
+
+const meta: Meta<TextareaProps> = {
+	component: Textarea,
+	title: "Textarea",
+	args: {
+		disabled: false,
+		className: "",
+	},
+	argTypes: {
+		disabled: {
+			type: "boolean",
+			control: "boolean",
+		},
+		className: {
+			type: "string",
+			control: "text",
+		},
+	},
+};
+type Story = StoryObj<TextareaProps>;
+
+const Render = (args: TextareaProps) => <Textarea {...args} />;
+
+export const LightMode: Story = {
+	args: {
+		disabled: false,
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "light",
+		},
+	},
+	render: Render,
+};
+
+export const DarkMode: Story = {
+	args: {
+		disabled: false,
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "dark",
+		},
+	},
+	render: (args) => (
+		<div className="dark">
+			<Render {...args} />
+		</div>
+	),
+};
+
+export default meta;
diff --git a/front/src/components/ui/textarea.tsx b/front/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..5e78e9c
--- /dev/null
+++ b/front/src/components/ui/textarea.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+	return (
+		<textarea
+			className={cn(
+				"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			ref={ref}
+			{...props}
+		/>
+	);
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };
diff --git a/yarn.lock b/yarn.lock
index 4f25fdb..70d6512 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4176,6 +4176,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/number@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/number@npm:1.1.0"
+  checksum: 10c0/a48e34d5ff1484de1b7cf5d7317fefc831d49e96a2229f300fd37b657bd8cfb59c922830c00ec02838ab21de3b299a523474592e4f30882153412ed47edce6a4
+  languageName: node
+  linkType: hard
+
 "@radix-ui/primitive@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/primitive@npm:1.0.1"
@@ -4595,6 +4602,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-hover-card@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "@radix-ui/react-hover-card@npm:1.1.2"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.1"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.1"
+    "@radix-ui/react-popper": "npm:1.2.0"
+    "@radix-ui/react-portal": "npm:1.1.2"
+    "@radix-ui/react-presence": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/9d41b8afb4687af0fb876289056182aaef7ba501abd509f587c99e32a3a41054bb303cfd21c626035e9765ea3f408c3c9729d725784bd5384f41ae1e6e8bd488
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-icons@npm:^1.3.0":
   version: 1.3.1
   resolution: "@radix-ui/react-icons@npm:1.3.1"
@@ -4690,6 +4724,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-popover@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "@radix-ui/react-popover@npm:1.1.2"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.1"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.1"
+    "@radix-ui/react-focus-guards": "npm:1.1.1"
+    "@radix-ui/react-focus-scope": "npm:1.1.0"
+    "@radix-ui/react-id": "npm:1.1.0"
+    "@radix-ui/react-popper": "npm:1.2.0"
+    "@radix-ui/react-portal": "npm:1.1.2"
+    "@radix-ui/react-presence": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-slot": "npm:1.1.0"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+    aria-hidden: "npm:^1.1.1"
+    react-remove-scroll: "npm:2.6.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/d8fb4e3507a3cd6168bdbb6b840fb8eb538b3b1ce62192a1dcc4e8e4947fbf082c437c0ad5f6faed078006dcb7073867e493378d04c50372c6ea826c5a811f2c
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-popper@npm:1.2.0":
   version: 1.2.0
   resolution: "@radix-ui/react-popper@npm:1.2.0"
@@ -4838,6 +4905,54 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-progress@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-progress@npm:1.1.0"
+  dependencies:
+    "@radix-ui/react-context": "npm:1.1.0"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/36b722fe274f843162cea186993bc8254ab034341becc88d031e44e1fd3a31dd3c3e7b8fb64e19a02d04da842e3f3b5a7638ed4924cf70f50925889d4439e3ed
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-radio-group@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "@radix-ui/react-radio-group@npm:1.2.1"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.1"
+    "@radix-ui/react-direction": "npm:1.1.0"
+    "@radix-ui/react-presence": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-roving-focus": "npm:1.1.0"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+    "@radix-ui/react-use-previous": "npm:1.1.0"
+    "@radix-ui/react-use-size": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/dfd64762c45a4f33a4fd05161d6eb9b68ff5d0d7cbc26800549d589029dc1c0e23bfb631d88100ed7c155c1f1a0baf9f7e7352d5083b80e733b33f5faede9d26
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-roving-focus@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-roving-focus@npm:1.1.0"
@@ -4865,6 +4980,72 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-scroll-area@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "@radix-ui/react-scroll-area@npm:1.2.0"
+  dependencies:
+    "@radix-ui/number": "npm:1.1.0"
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.1"
+    "@radix-ui/react-direction": "npm:1.1.0"
+    "@radix-ui/react-presence": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.0"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/e33eca1b9f254003a08b2647add9278b1d90dd2e9128cbdd73b310e9363c4461d7149fd973e81ddcbdbf420b040b8fe864684919c58956a5f6e84fff2d1340b9
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-select@npm:^2.1.2":
+  version: 2.1.2
+  resolution: "@radix-ui/react-select@npm:2.1.2"
+  dependencies:
+    "@radix-ui/number": "npm:1.1.0"
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-collection": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.1"
+    "@radix-ui/react-direction": "npm:1.1.0"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.1"
+    "@radix-ui/react-focus-guards": "npm:1.1.1"
+    "@radix-ui/react-focus-scope": "npm:1.1.0"
+    "@radix-ui/react-id": "npm:1.1.0"
+    "@radix-ui/react-popper": "npm:1.2.0"
+    "@radix-ui/react-portal": "npm:1.1.2"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-slot": "npm:1.1.0"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.0"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.0"
+    "@radix-ui/react-use-previous": "npm:1.1.0"
+    "@radix-ui/react-visually-hidden": "npm:1.1.0"
+    aria-hidden: "npm:^1.1.1"
+    react-remove-scroll: "npm:2.6.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/cb9d510cbbcc64ec56e1aa19da83220e21e7a101857be423cfb6c159b11bcd8f29b3f67c473df81b1a5203700731ab5f5861f4633ff3f1dec3d58ec74825b16a
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-separator@npm:^1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-separator@npm:1.1.0"
@@ -4884,6 +5065,35 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-slider@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "@radix-ui/react-slider@npm:1.2.1"
+  dependencies:
+    "@radix-ui/number": "npm:1.1.0"
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-collection": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.1"
+    "@radix-ui/react-direction": "npm:1.1.0"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.0"
+    "@radix-ui/react-use-previous": "npm:1.1.0"
+    "@radix-ui/react-use-size": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/f39b67f019accc2fddebddb0d7f5bca7fc6ce8b370d294779e5139f7f36135ead9dff8672a9e4d5c771103280df9a05185ff17656d11e9eb88170e8f30e5efb4
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-slot@npm:1.0.2":
   version: 1.0.2
   resolution: "@radix-ui/react-slot@npm:1.0.2"
@@ -4915,6 +5125,57 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-switch@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-switch@npm:1.1.1"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+    "@radix-ui/react-use-previous": "npm:1.1.0"
+    "@radix-ui/react-use-size": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/8b61aa3bf80d3a2037d67495cf5de9e1ffc0d0843edc0cde5adc1ff1a9b99b0a6b63a85951c79769ab5a44d484611d90dc85933a86d71f28028caa53d8db177b
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-tabs@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-tabs@npm:1.1.1"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.1"
+    "@radix-ui/react-direction": "npm:1.1.0"
+    "@radix-ui/react-id": "npm:1.1.0"
+    "@radix-ui/react-presence": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-roving-focus": "npm:1.1.0"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/86fa6beda5ac5fbc6cede483e198641fbba0b1e4ad30db3488fbfefdf460ca4e35d765f5b22f73ded1849252b2432cfa755783218f282721462f90f2ad1adf30
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-tooltip@npm:^1.1.3":
   version: 1.1.3
   resolution: "@radix-ui/react-tooltip@npm:1.1.3"
@@ -12018,10 +12279,19 @@ __metadata:
     "@radix-ui/react-context-menu": "npm:^2.2.2"
     "@radix-ui/react-dialog": "npm:^1.1.2"
     "@radix-ui/react-dropdown-menu": "npm:^2.1.2"
+    "@radix-ui/react-hover-card": "npm:^1.1.2"
     "@radix-ui/react-icons": "npm:^1.3.0"
     "@radix-ui/react-label": "npm:^2.1.0"
+    "@radix-ui/react-popover": "npm:^1.1.2"
+    "@radix-ui/react-progress": "npm:^1.1.0"
+    "@radix-ui/react-radio-group": "npm:^1.2.1"
+    "@radix-ui/react-scroll-area": "npm:^1.2.0"
+    "@radix-ui/react-select": "npm:^2.1.2"
     "@radix-ui/react-separator": "npm:^1.1.0"
+    "@radix-ui/react-slider": "npm:^1.2.1"
     "@radix-ui/react-slot": "npm:^1.1.0"
+    "@radix-ui/react-switch": "npm:^1.1.1"
+    "@radix-ui/react-tabs": "npm:^1.1.1"
     "@radix-ui/react-tooltip": "npm:^1.1.3"
     "@solana/web3.js": "npm:^1.95.4"
     "@storybook/addon-essentials": "npm:^8.4.1"
@@ -12055,6 +12325,7 @@ __metadata:
     prettier: "npm:^3.3.3"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
+    sonner: "npm:^1.7.0"
     storybook: "npm:^8.4.1"
     tailwind-merge: "npm:^2.5.3"
     tailwindcss: "npm:^3.4.13"
@@ -17586,6 +17857,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sonner@npm:^1.7.0":
+  version: 1.7.0
+  resolution: "sonner@npm:1.7.0"
+  peerDependencies:
+    react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  checksum: 10c0/02b16249b0c6e3a62c50dbcb643bb089aecd82c4f0ae988d00903e427d5485933d6cb59047fe5da338b548b6a3311643e511f63ed60a938458295015f7a3fdfd
+  languageName: node
+  linkType: hard
+
 "source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.0, source-map-js@npm:^1.2.1":
   version: 1.2.1
   resolution: "source-map-js@npm:1.2.1"