diff --git a/fe/app/_components/burn-dialog.tsx b/fe/app/_components/burn-dialog.tsx
index 670eab3..43924d0 100644
--- a/fe/app/_components/burn-dialog.tsx
+++ b/fe/app/_components/burn-dialog.tsx
@@ -3,6 +3,7 @@
 import { LoaderIcon } from "lucide-react";
 import Image from "next/image";
 import type { ComponentProps, FC, PropsWithChildren } from "react";
+import { useAccount } from "wagmi";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -22,6 +23,8 @@ type Props = ComponentProps<typeof Dialog> & {
 export const BurnDialog: FC<PropsWithChildren<Props>> = (props) => {
 	const { tokenId: tokenIdToBurn, tokenBalance, ...rest } = props;
 
+	const { address } = useAccount();
+
 	const { burnCall, isPending, isConfirming } = useBurn({
 		tokenIdToBurn,
 	});
@@ -31,7 +34,7 @@ export const BurnDialog: FC<PropsWithChildren<Props>> = (props) => {
 			<DialogTrigger asChild>
 				<Button
 					variant="destructive"
-					disabled={!tokenBalance}
+					disabled={!tokenBalance || !address}
 					className="w-16 cursor-pointer"
 				>
 					{isPending || isConfirming ? (
diff --git a/fe/app/_components/count-down.tsx b/fe/app/_components/count-down.tsx
index 6b02223..1dbb128 100644
--- a/fe/app/_components/count-down.tsx
+++ b/fe/app/_components/count-down.tsx
@@ -1,28 +1,42 @@
 "use client";
 
-import { animate, motion, useMotionValue, useTransform } from "motion/react";
-import { type FC, useEffect } from "react";
+import { type FC, startTransition, useEffect, useState } from "react";
+import { cn } from "@/lib/utils";
+import { useTokens } from "../_hooks/use-tokens";
 
 type Props = {
-	coolDownDelay: number | null;
+  coolDownEndTime: number
+  className?: string;
 };
-export const CountDown: FC<Props> = (props) => {
-	const { coolDownDelay } = props;
 
-	const count = useMotionValue(coolDownDelay ?? 60);
-	const rounded = useTransform(count, Math.round);
+export const Countdown:FC<Props> = (props) => {
+  const {coolDownEndTime, className } = props
 
-	useEffect(() => {
-		const animation = animate(count, 0, {
-			duration: (coolDownDelay ?? 60) + 4,
-		});
+  const [timeLeft, setTimeLeft] = useState<number>(0);
 
-		return () => animation.cancel();
-	}, [count, coolDownDelay]);
+  const {setIsCoolDown, setCoolDownEndTime} = useTokens()
 
-	return (
-		<motion.span initial={{ scale: 0.85 }} animate={{ scale: 1.25 }}>
-			{rounded}
-		</motion.span>
-	);
-};
+  useEffect(() => {
+    if (!coolDownEndTime) return;
+
+    const updateTimeLeft = () => {
+      const now = Date.now();
+      const remainingTime = Math.max(0, Math.floor((coolDownEndTime - now) / 1000));
+      setTimeLeft(remainingTime);
+
+      if(remainingTime === 0) {
+        startTransition(() => {
+            setIsCoolDown(false)
+            setCoolDownEndTime(null)
+        })
+      }
+    };
+
+    updateTimeLeft();
+    const interval = setInterval(updateTimeLeft, 1000);
+    
+    return () => clearInterval(interval);
+  }, [coolDownEndTime, setIsCoolDown, setCoolDownEndTime]);
+
+  return <span className={cn("font-bold", className)}>{timeLeft}</span>;
+};
\ No newline at end of file
diff --git a/fe/app/_components/footer.tsx b/fe/app/_components/footer.tsx
index 3a9b598..b15ac8f 100644
--- a/fe/app/_components/footer.tsx
+++ b/fe/app/_components/footer.tsx
@@ -1,5 +1,30 @@
+import { HeartIcon } from "lucide-react";
+import Link from "next/link";
 import type { FC } from "react";
+import { TypographyH6 } from "./typography/h6";
+
+const ADMIN_LINK = process.env.ADMIN_LINK ?? "https://github.com/SiegfriedBz";
 
 export const Footer: FC = () => {
-	return <div>Footer</div>;
+	return (
+		<footer className="flex py-8 pb-12 gap-2 flex-wrap items-center justify-center">
+			<TypographyH6 className="font-semibold">
+				© {new Date().getFullYear()}
+			</TypographyH6>
+			<Link href={"/"} scroll>
+				<TypographyH6 className="font-semibold">Forge</TypographyH6>
+			</Link>
+
+			<a href={ADMIN_LINK} className="group">
+				<span className="inline-flex items-center gap-1">
+					<TypographyH6>Made with</TypographyH6>
+					<HeartIcon className="text-red-400 size-4" />
+					<TypographyH6>by</TypographyH6>
+					<TypographyH6 className="-mb-0.5 font-semibold border-transparent border-b group-hover:border-primary transition duration-300">
+						Siegfried
+					</TypographyH6>
+				</span>
+			</a>
+		</footer>
+	);
 };
diff --git a/fe/app/_components/header.tsx b/fe/app/_components/header.tsx
index 5a5aaf1..e8f0056 100644
--- a/fe/app/_components/header.tsx
+++ b/fe/app/_components/header.tsx
@@ -8,11 +8,12 @@ import { TypographyH2 } from "./typography/h2";
 export const Header: FC = () => {
 	return (
 		<header
-			className={`sticky z-50 opacity-100 top-0
+			className={`
 				flex justify-between items-center
 				h-28 sm:h-32 md:h-32 
 				px-4 sm:px-16
 				bg-background
+				relative
 			`}
 		>
 			<Link href="/" className="flex items-center gap-x-2 sm:gap-x-3">
diff --git a/fe/app/_components/hero.tsx b/fe/app/_components/hero.tsx
index 00ce12c..a65ab91 100644
--- a/fe/app/_components/hero.tsx
+++ b/fe/app/_components/hero.tsx
@@ -57,7 +57,7 @@ export const Hero = () => {
 				className="relative z-10 max-sm:mt-12 mt-8 flex flex-wrap items-center justify-center gap-4"
 			>
 				<Button asChild size={"lg"}>
-					<Link href="#tokenCards">Explore</Link>
+					<Link href="#cards">Explore</Link>
 				</Button>
 			</motion.div>
 		</section>
diff --git a/fe/app/_components/mint-button.tsx b/fe/app/_components/mint-button.tsx
index 181017e..ef8ae10 100644
--- a/fe/app/_components/mint-button.tsx
+++ b/fe/app/_components/mint-button.tsx
@@ -1,71 +1,63 @@
 "use client";
 
 import { LoaderIcon } from "lucide-react";
-import { type FC, useCallback } from "react";
+import { ComponentProps, type FC, useCallback } from "react";
+import { useAccount } from "wagmi";
 import { useCoolDown } from "@/app/_hooks/use-cool-down";
 import { useTokens } from "@/app/_hooks/use-tokens";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { useMint } from "../_hooks/use-mint";
-import { CountDown } from "./count-down";
+import { Countdown } from "./count-down";
 
-type Props = React.ComponentProps<"button"> & {
-	tokenId: number;
-	isBaseToken: boolean;
-};
+type Props = ComponentProps<typeof Button> & { tokenId: number; isBaseToken: boolean }
 
 export const MintButton: FC<Props> = (props) => {
-	const { tokenId, isBaseToken, ...rest } = props;
-
-	const { mintCall, error, isPending, isConfirming, isConfirmed } = useMint({
-		tokenId,
-	});
-
-	const { isCoolDown, setIsCoolDown, forgeabilityByTokenId } = useTokens();
-
-	const coolDownDelay = useCoolDown({
-		isBaseToken,
-		isMintError: error,
-		isMintConfirmed: isConfirmed,
-	});
-
+	const {
+  tokenId,
+  isBaseToken,
+  ...rest
+} = props
+
+  const { address } = useAccount();
+  const { mintCall, error, isPending, isConfirming, isConfirmed } = useMint({ tokenId });
+  const { isCoolDown, setIsCoolDown, forgeabilityByTokenId, coolDownEndTime } = useTokens();
+  
+	useCoolDown({ isBaseToken, isMintError: error, isMintConfirmed: isConfirmed });
+  
 	const isForgeable = !!forgeabilityByTokenId[tokenId];
-
-	const onMint = useCallback(() => {
-		if (isBaseToken) {
-			setIsCoolDown(true);
-		}
-		mintCall();
-	}, [isBaseToken, setIsCoolDown, mintCall]);
-
-	const isDisabled =
-		isPending ||
-		isConfirming ||
-		(isBaseToken && isCoolDown) ||
-		(!isBaseToken && !isForgeable);
-
-	return (
-		<Button
-			onClick={onMint}
-			disabled={isDisabled}
-			className={cn(
-				"w-16 flex items-center cursor-pointer ring-2 ring-transparent",
-				isBaseToken && isCoolDown
-					? "bg-secondary text-secondary-foreground animate-pulse"
-					: "",
-				!isBaseToken && "ring-2 ring-destructive",
-			)}
-			{...rest}
-		>
-			{isPending ? (
-				<LoaderIcon className="animate-spin" />
-			) : isBaseToken && isConfirmed && isCoolDown ? (
-				<CountDown coolDownDelay={coolDownDelay} />
-			) : isBaseToken ? (
-				"Mint"
-			) : (
-				"Forge"
-			)}
-		</Button>
-	);
+  const isDisabled = !address || isPending || isConfirming || (isBaseToken && isCoolDown) || (!isBaseToken && !isForgeable);
+
+  const onMint = useCallback(() => {
+    if (isBaseToken) setIsCoolDown(true);
+    mintCall();
+  }, [isBaseToken, setIsCoolDown, mintCall]);
+
+	if (isBaseToken && isCoolDown && coolDownEndTime) {
+    return (
+      <Button asChild disabled className="flex justify-center items-center ring-2 ring-transparent">
+        <Countdown coolDownEndTime={coolDownEndTime} className="text-lg inline-flex font-semibold justify-center items-center rounded-md w-32 bg-secondary text-secondary-foreground animate-pulse" />
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      onClick={onMint}
+      disabled={isDisabled}
+      className={cn(
+        "w-16 flex items-center cursor-pointer ring-2 ring-transparent",
+        !isBaseToken && "ring-2 ring-destructive"
+      )}
+      {...rest}
+    >
+      {isPending || isConfirming ? (
+        <LoaderIcon className="animate-spin" />
+      )  : isBaseToken ? (
+        "Mint"
+      ) : (
+        "Forge"
+      )}
+    </Button>
+  );
 };
diff --git a/fe/app/_components/token-card.tsx b/fe/app/_components/token-card.tsx
index 7fa8785..4400cc0 100644
--- a/fe/app/_components/token-card.tsx
+++ b/fe/app/_components/token-card.tsx
@@ -49,10 +49,13 @@ export const TokenCard: FC<Props> = (props) => {
 		[isBaseToken, hoveredForgeTokenId, requiredToForgeTokenIds],
 	);
 
+	const firstCardId = id === 0 ? { id: "cards" } : {};
+
 	return (
 		<Card
+		{...firstCardId}
 			className={cn(
-				"max-sm:min-w-[20rem] max-sm:max-w-104 max-md:max-w-108 md:max-w-118",
+				"max-sm:min-w-[20rem] max-sm:max-w-104 max-md:max-w-108 md:max-w-118 scroll-mt-16",
 				isBaseToken && isCoolDown
 					? "ring-1 ring-secondary"
 					: "hover:ring hover:ring-primary/20 transition duration-200",
diff --git a/fe/app/_components/trade-dialog.tsx b/fe/app/_components/trade-dialog.tsx
index d34754a..242f827 100644
--- a/fe/app/_components/trade-dialog.tsx
+++ b/fe/app/_components/trade-dialog.tsx
@@ -3,6 +3,7 @@
 import { LoaderIcon } from "lucide-react";
 import Image from "next/image";
 import type { FC } from "react";
+import { useAccount } from "wagmi";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -22,6 +23,8 @@ type Props = {
 export const TradeDialog: FC<Props> = (props) => {
 	const { tokenId: tokenIdToBurn, tokenBalance } = props;
 
+	const { address } = useAccount();
+
 	const { tradeCall, isPending, isConfirming } = useTrade({
 		tokenIdToBurn,
 	});
@@ -29,7 +32,11 @@ export const TradeDialog: FC<Props> = (props) => {
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
-				<Button variant="secondary" className="w-16" disabled={!tokenBalance}>
+				<Button
+					variant="secondary"
+					className="w-16"
+					disabled={!tokenBalance || !address}
+				>
 					{isPending || isConfirming ? (
 						<LoaderIcon className="animate-spin" />
 					) : (
@@ -37,19 +44,17 @@ export const TradeDialog: FC<Props> = (props) => {
 					)}
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="w-[432px]">
+			<DialogContent className="w-fit max-w-[80vw]">
 				<DialogHeader className="flex">
-					<DialogTitle className="hidden sr-only">Burn</DialogTitle>
-					<div className="grid grid-cols-2 gap-x-2">
-						<div>
-							<div className="relative w-36 min-h-36 flex-1">
-								<Image
-									src={`/tokens/${tokenIdToBurn}.webp`}
-									alt="Token Image"
-									fill
-									className="rounded-lg object-cover"
-								/>
-							</div>
+					<DialogTitle className="hidden sr-only">Burn to trade</DialogTitle>
+					<div className="flex flex-col justify-center items-center sm:flex-row gap-4">
+						<div className="relative w-full sm:w-36 min-h-36 flex-1 max-sm:mt-4 rounded-md ">
+							<Image
+								src={`/tokens/${tokenIdToBurn}.webp`}
+								alt="Token Image"
+								fill
+								className="rounded-md object-cover"
+							/>
 						</div>
 						<TradeForm
 							onTrade={tradeCall}
diff --git a/fe/app/_components/trade-form.tsx b/fe/app/_components/trade-form.tsx
index 496ae85..3758f51 100644
--- a/fe/app/_components/trade-form.tsx
+++ b/fe/app/_components/trade-form.tsx
@@ -13,7 +13,6 @@ import {
 	FormControl,
 	FormField,
 	FormItem,
-	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
 import {
@@ -68,21 +67,17 @@ export const TradeForm: FC<Props> = (props) => {
 		<Form {...form}>
 			<form
 				onSubmit={form.handleSubmit(onSubmit)}
-				className="flex flex-col justify-between mt-0.5"
+				className="flex flex-col justify-between gap-2"
 			>
 				<FormField
 					control={form.control}
 					name="tokenIdToMint"
 					render={({ field }) => (
 						<FormItem>
-							<FormLabel>Token To Mint</FormLabel>
-							<Select
-								onValueChange={field.onChange}
-								// defaultValue={field.value.toString()}
-							>
+							<Select onValueChange={field.onChange}>
 								<FormControl className="w-full">
 									<SelectTrigger className="min-h-16 w-46">
-										<SelectValue placeholder="Select Token" />
+										<SelectValue placeholder="Select Token To Mint" />
 									</SelectTrigger>
 								</FormControl>
 								<SelectContent>
@@ -112,7 +107,7 @@ export const TradeForm: FC<Props> = (props) => {
 						</FormItem>
 					)}
 				/>
-				<DialogFooter className="w-full mb-0.5">
+				<DialogFooter className="w-full">
 					<DialogClose asChild>
 						<Button variant="secondary" type="submit" className="w-full">
 							Trade
diff --git a/fe/app/_context/custom-wagmi-provider.tsx b/fe/app/_context/custom-wagmi-provider.tsx
index 7217f1e..d2c6319 100644
--- a/fe/app/_context/custom-wagmi-provider.tsx
+++ b/fe/app/_context/custom-wagmi-provider.tsx
@@ -1,14 +1,9 @@
 "use client";
 
 import "@rainbow-me/rainbowkit/styles.css";
-import {
-	darkTheme,
-	lightTheme,
-	RainbowKitProvider,
-} from "@rainbow-me/rainbowkit";
+import { darkTheme, RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { useTheme } from "next-themes";
-import { type FC, type PropsWithChildren, useMemo, useState } from "react";
+import { type FC, type PropsWithChildren, useState } from "react";
 import {
 	type Config as WagmiConfig,
 	WagmiProvider,
@@ -16,13 +11,13 @@ import {
 } from "wagmi";
 import { wagmiHttpConfig } from "../_config/wagmi";
 
-const rainbowLightTheme = {
-	accentColor: "#9b2c2c",
-	accentColorForeground: "#fff",
-};
-const rainbowDarkTheme = {
-	accentColor: "#df7368",
-	accentColorForeground: "#000",
+const rainbowTheme = {
+	...darkTheme(),
+	colors: {
+		...darkTheme().colors,
+		modalBackground: "#151210",
+		accentColor: "#df7368",
+	},
 };
 
 type Props = {
@@ -32,25 +27,13 @@ type Props = {
 export const CustomWagmiProvider: FC<PropsWithChildren<Props>> = (props) => {
 	const { initialWagmiState, children } = props;
 
-	const { theme, systemTheme } = useTheme();
-	const currentTheme = useMemo(
-		() => (theme === "system" ? systemTheme : theme),
-		[theme, systemTheme],
-	);
-
 	const [wagmiConfig] = useState<WagmiConfig>(() => wagmiHttpConfig);
 	const [queryClient] = useState<QueryClient>(() => new QueryClient());
 
-	const rainbowTheme = useMemo(() => {
-		return currentTheme === "dark"
-			? darkTheme(rainbowDarkTheme)
-			: lightTheme(rainbowLightTheme);
-	}, [currentTheme]);
-
 	return (
 		<WagmiProvider config={wagmiConfig} initialState={initialWagmiState}>
 			<QueryClientProvider client={queryClient}>
-				<RainbowKitProvider key={currentTheme} theme={rainbowTheme} coolMode>
+				<RainbowKitProvider theme={rainbowTheme} coolMode>
 					{children}
 				</RainbowKitProvider>
 			</QueryClientProvider>
diff --git a/fe/app/_context/root-providers.tsx b/fe/app/_context/root-providers.tsx
index 86d1928..e24dbe0 100644
--- a/fe/app/_context/root-providers.tsx
+++ b/fe/app/_context/root-providers.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import type { FC, PropsWithChildren } from "react";
-import { Toaster } from "sonner";
 import type { State as WagmiState } from "wagmi";
 import { CustomWagmiProvider } from "./custom-wagmi-provider";
 import { ThemeProvider } from "./theme-provider";
@@ -23,7 +22,6 @@ export const RootProviders: FC<PropsWithChildren<Props>> = (props) => {
 			<CustomWagmiProvider initialWagmiState={initialWagmiState}>
 				{children}
 			</CustomWagmiProvider>
-			<Toaster />
 		</ThemeProvider>
 	);
 };
diff --git a/fe/app/_context/tokens-provider.tsx b/fe/app/_context/tokens-provider.tsx
index 73b64f3..dc9f7c1 100644
--- a/fe/app/_context/tokens-provider.tsx
+++ b/fe/app/_context/tokens-provider.tsx
@@ -9,6 +9,7 @@ export const TokensProvider: FC<PropsWithChildren> = (props) => {
 
 	// state for tracking base-tokens cooldown
 	const [isCoolDown, setIsCoolDown] = useState<boolean>(false);
+	const [coolDownEndTime, setCoolDownEndTime] = useState<number | null>(null);
 
 	// state for tracking which forged-token card is hovered
 	const [hoveredForgeTokenId, setHoveredForgeTokenId] = useState<number | null>(
@@ -21,8 +22,10 @@ export const TokensProvider: FC<PropsWithChildren> = (props) => {
 	const value = useMemo(
 		() => ({
 			// base tokens
-			isCoolDown,
+			isCoolDown, 
 			setIsCoolDown,
+			coolDownEndTime, 
+			setCoolDownEndTime,
 
 			// forged tokens
 			forgeabilityByTokenId,
@@ -32,6 +35,7 @@ export const TokensProvider: FC<PropsWithChildren> = (props) => {
 		}),
 		[
 			isCoolDown,
+			coolDownEndTime,
 			forgeabilityByTokenId,
 			reCheckForgeability,
 			hoveredForgeTokenId,
diff --git a/fe/app/_hooks/use-balanceOf.tsx b/fe/app/_hooks/use-balanceOf.tsx
index b705a61..a2cb15d 100644
--- a/fe/app/_hooks/use-balanceOf.tsx
+++ b/fe/app/_hooks/use-balanceOf.tsx
@@ -6,7 +6,6 @@ import {
 	useQuery,
 } from "@tanstack/react-query";
 import { readContract } from "@wagmi/core";
-import { toast } from "sonner";
 import type { ReadContractErrorType } from "viem";
 import { useAccount } from "wagmi";
 import { wagmiHttpConfig } from "../_config/wagmi";
@@ -40,7 +39,7 @@ export const useBalanceOf = (params: ParamsT) => {
 	});
 
 	if (error) {
-		toast.error((error as ReadContractErrorType).shortMessage || error.message);
+		console.log((error as ReadContractErrorType).shortMessage || error.message);
 	}
 
 	return { tokenBalance, refetch, error, isPending };
diff --git a/fe/app/_hooks/use-burn.tsx b/fe/app/_hooks/use-burn.tsx
index b4da206..ce0ee9b 100644
--- a/fe/app/_hooks/use-burn.tsx
+++ b/fe/app/_hooks/use-burn.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useCallback } from "react";
-import { toast } from "sonner";
 import type { BaseError } from "wagmi";
 import { forgeContractConfig } from "@/app/_contracts/forge-contract-config";
 import { useWriteAndWait } from "./use-write-and-wait";
@@ -29,19 +28,6 @@ export const useBurn = (params: ParamsT) => {
 
 	if (error) {
 		console.log((error as BaseError).shortMessage || error.message);
-		toast.error(`Burning Token #${tokenIdToBurn} failed.`);
-	}
-
-	if (hash) {
-		console.log(`Burn Token #${tokenIdToBurn} Transaction Hash: ${hash}`);
-	}
-
-	if (isConfirming) {
-		toast.info(`Waiting for Burn Token #${tokenIdToBurn} confirmation...`);
-	}
-
-	if (isConfirmed) {
-		toast.success(`Burn Token #${tokenIdToBurn} confirmed.`);
 	}
 
 	return { burnCall, hash, error, isPending, isConfirming, isConfirmed };
diff --git a/fe/app/_hooks/use-cool-down.ts b/fe/app/_hooks/use-cool-down.ts
index 1ea1c56..5524d07 100644
--- a/fe/app/_hooks/use-cool-down.ts
+++ b/fe/app/_hooks/use-cool-down.ts
@@ -1,59 +1,44 @@
 "use client";
+
 import { useEffect, useMemo } from "react";
 import { useReadContract } from "wagmi";
 import { forgeContractConfig } from "../_contracts/forge-contract-config";
 import { useTokens } from "./use-tokens";
 
-type ParamsT = {
-	isBaseToken: boolean;
-	isMintError: Error | null;
-	isMintConfirmed: boolean;
-};
-
-export const useCoolDown = (params: ParamsT) => {
-	const { isBaseToken, isMintError, isMintConfirmed } = params;
-
-	const { setIsCoolDown } = useTokens();
-
-	// Fetch cooldown delay from contract
-	const { data: coolDownDelay } = useReadContract({
-		...forgeContractConfig,
-		functionName: "I_COOL_DOWN_DELAY",
-	});
-
-	// Convert cooldown delay to milliseconds
-	const coolDownDelayInMs: number | null = useMemo(() => {
-		return coolDownDelay ? Number(coolDownDelay) * 1000 : null;
-	}, [coolDownDelay]);
-
-	// Handle cooldown logic
-	useEffect(() => {
-		if (!isBaseToken || !coolDownDelayInMs) return;
-
-		// Reset cooldown on error
-		if (isMintError) {
-			setIsCoolDown(false);
-			return;
-		}
-
-		// Start cooldown timer only after transaction is confirmed
-		if (isMintConfirmed) {
-			setIsCoolDown(true);
-			const timer = setTimeout(() => {
-				setIsCoolDown(false);
-			}, coolDownDelayInMs);
-
-			return () => {
-				clearTimeout(timer);
-			};
-		}
-	}, [
-		isBaseToken,
-		isMintError,
-		isMintConfirmed,
-		coolDownDelayInMs,
-		setIsCoolDown,
-	]);
-
-	return coolDownDelayInMs ? coolDownDelayInMs / 1000 : null;
-};
+type Params = {
+	isBaseToken: boolean
+	isMintError: Error | null
+	isMintConfirmed: boolean
+}
+
+export const useCoolDown = (params: Params) => {
+  const { isBaseToken, isMintError, isMintConfirmed } = params
+
+  const { setIsCoolDown, setCoolDownEndTime } = useTokens();
+
+  const { data: coolDownDelay } = useReadContract({
+    ...forgeContractConfig,
+    functionName: "I_COOL_DOWN_DELAY",
+  });
+
+  const coolDownDelayInMs = useMemo(
+    () => (coolDownDelay ? Number(coolDownDelay) * 1000 : null),
+    [coolDownDelay]
+  );
+
+  useEffect(() => {
+    if (!isBaseToken || !coolDownDelayInMs) return;
+
+    if (isMintError) {
+      setIsCoolDown(false);
+      setCoolDownEndTime(null);
+      return;
+    }
+
+    if (isMintConfirmed) {
+      setIsCoolDown(true);
+      setCoolDownEndTime(Date.now() + coolDownDelayInMs);
+    }
+  }, [isBaseToken, isMintError, isMintConfirmed, coolDownDelayInMs, setIsCoolDown, setCoolDownEndTime]);
+
+};
\ No newline at end of file
diff --git a/fe/app/_hooks/use-mint.tsx b/fe/app/_hooks/use-mint.tsx
index f6cf66d..c3bd09e 100644
--- a/fe/app/_hooks/use-mint.tsx
+++ b/fe/app/_hooks/use-mint.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useCallback } from "react";
-import { toast } from "sonner";
 import type { BaseError } from "wagmi";
 import { forgeContractConfig } from "../_contracts/forge-contract-config";
 import { useWriteAndWait } from "./use-write-and-wait";
@@ -28,19 +27,6 @@ export const useMint = (params: ParamsT) => {
 
 	if (error) {
 		console.log((error as BaseError).shortMessage || error.message);
-		toast.error(`Minting Token #${tokenId} failed.`);
-	}
-
-	if (hash) {
-		console.log(`Mint Token #${tokenId} Transaction Hash: ${hash}`);
-	}
-
-	if (isConfirming) {
-		toast.info(`Waiting for Mint Token #${tokenId} confirmation...`);
-	}
-
-	if (isConfirmed) {
-		toast.success(`Mint Token #${tokenId} confirmed.`);
 	}
 
 	return { mintCall, hash, error, isPending, isConfirming, isConfirmed };
diff --git a/fe/app/_hooks/use-tokens.ts b/fe/app/_hooks/use-tokens.ts
index 5a9ab7c..57363e1 100644
--- a/fe/app/_hooks/use-tokens.ts
+++ b/fe/app/_hooks/use-tokens.ts
@@ -7,6 +7,9 @@ export type TokensContextT = {
 	// base tokens
 	isCoolDown: boolean;
 	setIsCoolDown: React.Dispatch<React.SetStateAction<boolean>>;
+	coolDownEndTime: number | null;
+  setCoolDownEndTime: React.Dispatch<React.SetStateAction<number | null>>;
+
 
 	// forge tokens
 	forgeabilityByTokenId: Record<number, boolean>;
diff --git a/fe/app/_hooks/use-trade.tsx b/fe/app/_hooks/use-trade.tsx
index 99ea337..9c4997e 100644
--- a/fe/app/_hooks/use-trade.tsx
+++ b/fe/app/_hooks/use-trade.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useCallback } from "react";
-import { toast } from "sonner";
 import type { BaseError } from "wagmi";
 import { forgeContractConfig } from "../_contracts/forge-contract-config";
 import { useWriteAndWait } from "./use-write-and-wait";
@@ -29,19 +28,6 @@ export const useTrade = (params: ParamsT) => {
 
 	if (error) {
 		console.log((error as BaseError).shortMessage || error.message);
-		toast.error(`Trading Token #${tokenIdToBurn} failed.`);
-	}
-
-	if (hash) {
-		console.log(`Trading Token #${tokenIdToBurn} Transaction Hash: ${hash}`);
-	}
-
-	if (isConfirming) {
-		toast.info(`Waiting for Trading Token #${tokenIdToBurn} confirmation...`);
-	}
-
-	if (isConfirmed) {
-		toast.success(`Trading Token #${tokenIdToBurn} confirmed.`);
 	}
 
 	return { tradeCall, hash, error, isPending, isConfirming, isConfirmed };
diff --git a/fe/app/global-error.tsx b/fe/app/global-error.tsx
index 6db83d4..e3d86a9 100644
--- a/fe/app/global-error.tsx
+++ b/fe/app/global-error.tsx
@@ -1,7 +1,6 @@
+/* eslint-disable @next/next/no-html-link-for-pages */
 "use client";
 
-import Link from "next/link";
-
 export default function GlobalError({
 	error,
 	reset,
@@ -37,7 +36,7 @@ export default function GlobalError({
 						<button type="button" onClick={() => reset()}>
 							Try Again
 						</button>
-						<Link href="/">Go Home</Link>
+						<a href="/">Go Home</a>
 					</div>
 				</div>
 			</body>
diff --git a/fe/app/globals.css b/fe/app/globals.css
index 6ca2137..5fd0b9a 100644
--- a/fe/app/globals.css
+++ b/fe/app/globals.css
@@ -164,7 +164,7 @@
 
 @layer base {
 	* {
-		@apply border-border outline-ring/50;
+		@apply scroll-smooth border-border outline-ring/50;
 	}
 	body {
 		@apply bg-background text-foreground;
diff --git a/fe/app/layout.tsx b/fe/app/layout.tsx
index 68da8fa..6f14372 100644
--- a/fe/app/layout.tsx
+++ b/fe/app/layout.tsx
@@ -34,7 +34,7 @@ export default async function RootLayout({
 	);
 
 	return (
-		<html lang="en" className="scroll-smooth" suppressHydrationWarning>
+		<html lang="en" suppressHydrationWarning>
 			<body
 				className={`${geistSans.variable} ${geistMono.variable} antialiased`}
 			>
diff --git a/fe/app/page.tsx b/fe/app/page.tsx
index 0d82398..41bceb9 100644
--- a/fe/app/page.tsx
+++ b/fe/app/page.tsx
@@ -11,7 +11,7 @@ export default function Home() {
 				<Hero />
 			</section>
 
-			<section id={"tokenCards"} className="scroll-mt-36">
+			<section>
 				<ul className="flex w-full max-sm:flex-col max-md:gap-2 flex-wrap md:gap-4 items-center justify-center">
 					<TokensProvider>
 						<EventsWatcher>
diff --git a/fe/components/ui/dialog.tsx b/fe/components/ui/dialog.tsx
index d9ccec9..41f4ae4 100644
--- a/fe/components/ui/dialog.tsx
+++ b/fe/components/ui/dialog.tsx
@@ -1,143 +1,143 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Dialog({
-  ...props
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 function DialogTrigger({
-  ...props
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
 function DialogPortal({
-  ...props
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
 function DialogClose({
-  ...props
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 function DialogOverlay({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<DialogPrimitive.Overlay
+			data-slot="dialog-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
+	className,
+	children,
+	showCloseButton = true,
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
+	showCloseButton?: boolean;
 }) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
+	return (
+		<DialogPortal data-slot="dialog-portal">
+			<DialogOverlay />
+			<DialogPrimitive.Content
+				data-slot="dialog-content"
+				className={cn(
+					"bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				{showCloseButton && (
+					<DialogPrimitive.Close
+						data-slot="dialog-close"
+						className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+					>
+						<XIcon />
+						<span className="sr-only">Close</span>
+					</DialogPrimitive.Close>
+				)}
+			</DialogPrimitive.Content>
+		</DialogPortal>
+	);
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="dialog-header"
+			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+			{...props}
+		/>
+	);
 }
 
 function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="dialog-footer"
+			className={cn(
+				"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function DialogTitle({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
-  )
+	return (
+		<DialogPrimitive.Title
+			data-slot="dialog-title"
+			className={cn("text-lg leading-none font-semibold", className)}
+			{...props}
+		/>
+	);
 }
 
 function DialogDescription({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
+	return (
+		<DialogPrimitive.Description
+			data-slot="dialog-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-}
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+};
diff --git a/fe/components/ui/dropdown-menu.tsx b/fe/components/ui/dropdown-menu.tsx
index bbe6fb0..129ec40 100644
--- a/fe/components/ui/dropdown-menu.tsx
+++ b/fe/components/ui/dropdown-menu.tsx
@@ -1,257 +1,257 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function DropdownMenu({
-  ...props
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+	return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 
 function DropdownMenuPortal({
-  ...props
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
+	return (
+		<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+	);
 }
 
 function DropdownMenuTrigger({
-  ...props
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  )
+	return (
+		<DropdownMenuPrimitive.Trigger
+			data-slot="dropdown-menu-trigger"
+			{...props}
+		/>
+	);
 }
 
 function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
+	className,
+	sideOffset = 4,
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  )
+	return (
+		<DropdownMenuPrimitive.Portal>
+			<DropdownMenuPrimitive.Content
+				data-slot="dropdown-menu-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+					className,
+				)}
+				{...props}
+			/>
+		</DropdownMenuPrimitive.Portal>
+	);
 }
 
 function DropdownMenuGroup({
-  ...props
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
+	return (
+		<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+	);
 }
 
 function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
+	className,
+	inset,
+	variant = "default",
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
+	inset?: boolean;
+	variant?: "default" | "destructive";
 }) {
-  return (
-    <DropdownMenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<DropdownMenuPrimitive.Item
+			data-slot="dropdown-menu-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
+	className,
+	children,
+	checked,
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
-  return (
-    <DropdownMenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  )
+	return (
+		<DropdownMenuPrimitive.CheckboxItem
+			data-slot="dropdown-menu-checkbox-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			checked={checked}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.CheckboxItem>
+	);
 }
 
 function DropdownMenuRadioGroup({
-  ...props
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  )
+	return (
+		<DropdownMenuPrimitive.RadioGroup
+			data-slot="dropdown-menu-radio-group"
+			{...props}
+		/>
+	);
 }
 
 function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
+	className,
+	children,
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
-  return (
-    <DropdownMenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.RadioItem>
-  )
+	return (
+		<DropdownMenuPrimitive.RadioItem
+			data-slot="dropdown-menu-radio-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<CircleIcon className="size-2 fill-current" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.RadioItem>
+	);
 }
 
 function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
+	className,
+	inset,
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
+	inset?: boolean;
 }) {
-  return (
-    <DropdownMenuPrimitive.Label
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<DropdownMenuPrimitive.Label
+			data-slot="dropdown-menu-label"
+			data-inset={inset}
+			className={cn(
+				"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function DropdownMenuSeparator({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
+	return (
+		<DropdownMenuPrimitive.Separator
+			data-slot="dropdown-menu-separator"
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
 }
 
 function DropdownMenuShortcut({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<span
+			data-slot="dropdown-menu-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function DropdownMenuSub({
-  ...props
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+	return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }
 
 function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
+	className,
+	inset,
+	children,
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
+	inset?: boolean;
 }) {
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </DropdownMenuPrimitive.SubTrigger>
-  )
+	return (
+		<DropdownMenuPrimitive.SubTrigger
+			data-slot="dropdown-menu-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronRightIcon className="ml-auto size-4" />
+		</DropdownMenuPrimitive.SubTrigger>
+	);
 }
 
 function DropdownMenuSubContent({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
-  return (
-    <DropdownMenuPrimitive.SubContent
-      data-slot="dropdown-menu-sub-content"
-      className={cn(
-        "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<DropdownMenuPrimitive.SubContent
+			data-slot="dropdown-menu-sub-content"
+			className={cn(
+				"bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-}
+	DropdownMenu,
+	DropdownMenuPortal,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuLabel,
+	DropdownMenuItem,
+	DropdownMenuCheckboxItem,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuSub,
+	DropdownMenuSubTrigger,
+	DropdownMenuSubContent,
+};
diff --git a/fe/components/ui/form.tsx b/fe/components/ui/form.tsx
index 524b986..22c13ee 100644
--- a/fe/components/ui/form.tsx
+++ b/fe/components/ui/form.tsx
@@ -1,167 +1,167 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import type * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
 import {
-  Controller,
-  FormProvider,
-  useFormContext,
-  useFormState,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues,
-} from "react-hook-form"
-
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
-
-const Form = FormProvider
+	Controller,
+	type ControllerProps,
+	type FieldPath,
+	type FieldValues,
+	FormProvider,
+	useFormContext,
+	useFormState,
+} from "react-hook-form";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+const Form = FormProvider;
 
 type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName
-}
+	name: TName;
+};
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
+	{} as FormFieldContextValue,
+);
 
 const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
-  ...props
+	...props
 }: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  )
-}
+	return (
+		<FormFieldContext.Provider value={{ name: props.name }}>
+			<Controller {...props} />
+		</FormFieldContext.Provider>
+	);
+};
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState } = useFormContext()
-  const formState = useFormState({ name: fieldContext.name })
-  const fieldState = getFieldState(fieldContext.name, formState)
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
-  }
-
-  const { id } = itemContext
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  }
-}
+	const fieldContext = React.useContext(FormFieldContext);
+	const itemContext = React.useContext(FormItemContext);
+	const { getFieldState } = useFormContext();
+	const formState = useFormState({ name: fieldContext.name });
+	const fieldState = getFieldState(fieldContext.name, formState);
+
+	if (!fieldContext) {
+		throw new Error("useFormField should be used within <FormField>");
+	}
+
+	const { id } = itemContext;
+
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState,
+	};
+};
 
 type FormItemContextValue = {
-  id: string
-}
+	id: string;
+};
 
 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
+	{} as FormItemContextValue,
+);
 
 function FormItem({ className, ...props }: React.ComponentProps<"div">) {
-  const id = React.useId()
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div
-        data-slot="form-item"
-        className={cn("grid gap-2", className)}
-        {...props}
-      />
-    </FormItemContext.Provider>
-  )
+	const id = React.useId();
+
+	return (
+		<FormItemContext.Provider value={{ id }}>
+			<div
+				data-slot="form-item"
+				className={cn("grid gap-2", className)}
+				{...props}
+			/>
+		</FormItemContext.Provider>
+	);
 }
 
 function FormLabel({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField()
-
-  return (
-    <Label
-      data-slot="form-label"
-      data-error={!!error}
-      className={cn("data-[error=true]:text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  )
+	const { error, formItemId } = useFormField();
+
+	return (
+		<Label
+			data-slot="form-label"
+			data-error={!!error}
+			className={cn("data-[error=true]:text-destructive", className)}
+			htmlFor={formItemId}
+			{...props}
+		/>
+	);
 }
 
 function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
-
-  return (
-    <Slot
-      data-slot="form-control"
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  )
+	const { error, formItemId, formDescriptionId, formMessageId } =
+		useFormField();
+
+	return (
+		<Slot
+			data-slot="form-control"
+			id={formItemId}
+			aria-describedby={
+				!error
+					? `${formDescriptionId}`
+					: `${formDescriptionId} ${formMessageId}`
+			}
+			aria-invalid={!!error}
+			{...props}
+		/>
+	);
 }
 
 function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
-  const { formDescriptionId } = useFormField()
-
-  return (
-    <p
-      data-slot="form-description"
-      id={formDescriptionId}
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
+	const { formDescriptionId } = useFormField();
+
+	return (
+		<p
+			data-slot="form-description"
+			id={formDescriptionId}
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
 }
 
 function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? "") : props.children
-
-  if (!body) {
-    return null
-  }
-
-  return (
-    <p
-      data-slot="form-message"
-      id={formMessageId}
-      className={cn("text-destructive text-sm", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  )
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message ?? "") : props.children;
+
+	if (!body) {
+		return null;
+	}
+
+	return (
+		<p
+			data-slot="form-message"
+			id={formMessageId}
+			className={cn("text-destructive text-sm", className)}
+			{...props}
+		>
+			{body}
+		</p>
+	);
 }
 
 export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-}
+	useFormField,
+	Form,
+	FormItem,
+	FormLabel,
+	FormControl,
+	FormDescription,
+	FormMessage,
+	FormField,
+};
diff --git a/fe/components/ui/label.tsx b/fe/components/ui/label.tsx
index fb5fbc3..be983a3 100644
--- a/fe/components/ui/label.tsx
+++ b/fe/components/ui/label.tsx
@@ -1,24 +1,24 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
+import * as LabelPrimitive from "@radix-ui/react-label";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Label({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<LabelPrimitive.Root
+			data-slot="label"
+			className={cn(
+				"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
-export { Label }
+export { Label };
diff --git a/fe/components/ui/select.tsx b/fe/components/ui/select.tsx
index 25e5439..d5b05ca 100644
--- a/fe/components/ui/select.tsx
+++ b/fe/components/ui/select.tsx
@@ -1,187 +1,187 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Select({
-  ...props
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
+	return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
 
 function SelectGroup({
-  ...props
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+	return <SelectPrimitive.Group data-slot="select-group" {...props} />;
 }
 
 function SelectValue({
-  ...props
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+	return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
 function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
+	className,
+	size = "default",
+	children,
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
+	size?: "sm" | "default";
 }) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  )
+	return (
+		<SelectPrimitive.Trigger
+			data-slot="select-trigger"
+			data-size={size}
+			className={cn(
+				"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<SelectPrimitive.Icon asChild>
+				<ChevronDownIcon className="size-4 opacity-50" />
+			</SelectPrimitive.Icon>
+		</SelectPrimitive.Trigger>
+	);
 }
 
 function SelectContent({
-  className,
-  children,
-  position = "popper",
-  align = "center",
-  ...props
+	className,
+	children,
+	position = "popper",
+	align = "center",
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        className={cn(
-          "bg-popover text-popover-foreground 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
-          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}
-        align={align}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  )
+	return (
+		<SelectPrimitive.Portal>
+			<SelectPrimitive.Content
+				data-slot="select-content"
+				className={cn(
+					"bg-popover text-popover-foreground 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+					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}
+				align={align}
+				{...props}
+			>
+				<SelectScrollUpButton />
+				<SelectPrimitive.Viewport
+					className={cn(
+						"p-1",
+						position === "popper" &&
+							"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+					)}
+				>
+					{children}
+				</SelectPrimitive.Viewport>
+				<SelectScrollDownButton />
+			</SelectPrimitive.Content>
+		</SelectPrimitive.Portal>
+	);
 }
 
 function SelectLabel({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
-      {...props}
-    />
-  )
+	return (
+		<SelectPrimitive.Label
+			data-slot="select-label"
+			className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+			{...props}
+		/>
+	);
 }
 
 function SelectItem({
-  className,
-  children,
-  ...props
+	className,
+	children,
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
-      )}
-      {...props}
-    >
-      <span className="absolute right-2 flex size-3.5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  )
+	return (
+		<SelectPrimitive.Item
+			data-slot="select-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+				className,
+			)}
+			{...props}
+		>
+			<span className="absolute right-2 flex size-3.5 items-center justify-center">
+				<SelectPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</SelectPrimitive.ItemIndicator>
+			</span>
+			<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+		</SelectPrimitive.Item>
+	);
 }
 
 function SelectSeparator({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
+	return (
+		<SelectPrimitive.Separator
+			data-slot="select-separator"
+			className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
 }
 
 function SelectScrollUpButton({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  )
+	return (
+		<SelectPrimitive.ScrollUpButton
+			data-slot="select-scroll-up-button"
+			className={cn(
+				"flex cursor-default items-center justify-center py-1",
+				className,
+			)}
+			{...props}
+		>
+			<ChevronUpIcon className="size-4" />
+		</SelectPrimitive.ScrollUpButton>
+	);
 }
 
 function SelectScrollDownButton({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  )
+	return (
+		<SelectPrimitive.ScrollDownButton
+			data-slot="select-scroll-down-button"
+			className={cn(
+				"flex cursor-default items-center justify-center py-1",
+				className,
+			)}
+			{...props}
+		>
+			<ChevronDownIcon className="size-4" />
+		</SelectPrimitive.ScrollDownButton>
+	);
 }
 
 export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+};
diff --git a/fe/components/ui/separator.tsx b/fe/components/ui/separator.tsx
index 275381c..50f035f 100644
--- a/fe/components/ui/separator.tsx
+++ b/fe/components/ui/separator.tsx
@@ -1,28 +1,28 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
+	className,
+	orientation = "horizontal",
+	decorative = true,
+	...props
 }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-  return (
-    <SeparatorPrimitive.Root
-      data-slot="separator"
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<SeparatorPrimitive.Root
+			data-slot="separator"
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
-export { Separator }
+export { Separator };
diff --git a/fe/components/ui/tooltip.tsx b/fe/components/ui/tooltip.tsx
index a4e90d4..1018c00 100644
--- a/fe/components/ui/tooltip.tsx
+++ b/fe/components/ui/tooltip.tsx
@@ -1,61 +1,61 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function TooltipProvider({
-  delayDuration = 0,
-  ...props
+	delayDuration = 0,
+	...props
 }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  )
+	return (
+		<TooltipPrimitive.Provider
+			data-slot="tooltip-provider"
+			delayDuration={delayDuration}
+			{...props}
+		/>
+	);
 }
 
 function Tooltip({
-  ...props
+	...props
 }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  )
+	return (
+		<TooltipProvider>
+			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
+		</TooltipProvider>
+	);
 }
 
 function TooltipTrigger({
-  ...props
+	...props
 }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
 function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
+	className,
+	sideOffset = 0,
+	children,
+	...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  )
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				data-slot="tooltip-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	);
 }
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };