diff --git a/front/package.json b/front/package.json
index 90faa4b..db7bc22 100644
--- a/front/package.json
+++ b/front/package.json
@@ -33,6 +33,8 @@
     "@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-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.3",
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/yarn.lock b/yarn.lock
index bd9f831..86cb9d6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4499,6 +4499,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"
@@ -11041,6 +11089,8 @@ __metadata:
     "@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-separator": "npm:^1.1.0"
     "@radix-ui/react-slot": "npm:^1.1.0"
     "@radix-ui/react-tooltip": "npm:^1.1.3"