diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
index 6a46746..14932fb 100644
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,9 +1,4 @@
-# 📘 Issue Description
--
-
----
-
-## 🔍 Steps to Reproduce
+## 📘 Description
 -
 
 ## ✅ Acceptance Criteria
@@ -15,3 +10,6 @@
 ## 📜 Additional Notes
 - 
 
+⚠ Do not apply until the ODHack begins.
+
+⚠ Read our guidelines before applying.
\ No newline at end of file
diff --git a/frontend/app/components/Bounded.tsx b/frontend/app/components/Bounded.tsx
deleted file mode 100644
index a90c26a..0000000
--- a/frontend/app/components/Bounded.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-interface BoundedProps {
-  children: React.ReactNode;
-  title: string;
-}
-
-const Bounded = ({ children, title }: BoundedProps) => {
-  return (
-    <main className="p-8">
-      <h1 className="text-3xl font-bold mb-8">{title}</h1>
-      <div className="flex flex-wrap justify-center gap-8">{children}</div>
-    </main>
-  );
-};
-
-export default Bounded;
diff --git a/frontend/app/components/home/feature-section.tsx b/frontend/app/components/home/feature-section.tsx
new file mode 100644
index 0000000..70a3653
--- /dev/null
+++ b/frontend/app/components/home/feature-section.tsx
@@ -0,0 +1,92 @@
+import { BarChart3, Coins, Lock, Shield, Users, Zap } from "lucide-react";
+
+export function FeatureSection() {
+	const features = [
+		{
+			icon: <Shield className="h-8 w-8" />,
+			title: "Smart Contract Escrow",
+			description: (
+				<>
+					Automated protection with Stellar smart contracts. Trustless Work API
+					abstracts the complexities of smart contract configuration. It
+					leverages the blockchain to ensure transactions are secure and
+					transparent, providing fairness without bias in the marketplace. Read
+					more on
+					<a
+						href="https://www.trustlesswork.com/"
+						target="_blank"
+						className="text-blue-500 hover:underline"
+					>
+						<span></span> Trustless Work
+					</a>
+				</>
+			),
+			gradient: "from-blue-500 to-cyan-500",
+		},
+		{
+			icon: <Zap className="h-8 w-8" />,
+			title: "Lightning Settlement",
+			description: "3-5 second finality on Stellar network",
+			gradient: "from-yellow-500 to-orange-500",
+		},
+		{
+			icon: <Lock className="h-8 w-8" />,
+			title: "Non-Custodial Trading",
+			description: "Keep full control of your assets",
+			gradient: "from-purple-500 to-pink-500",
+		},
+		{
+			icon: <Coins className="h-8 w-8" />,
+			title: "Multi-Asset Support",
+			description: "Trade any Stellar-based token",
+			gradient: "from-green-500 to-emerald-500",
+		},
+		{
+			icon: <Users className="h-8 w-8" />,
+			title: "DAO Governance",
+			description: "Community-driven protocol decisions",
+			gradient: "from-red-500 to-pink-500",
+		},
+		{
+			icon: <BarChart3 className="h-8 w-8" />,
+			title: "Real-Time Analytics",
+			description: "Advanced trading metrics & insights",
+			gradient: "from-indigo-500 to-purple-500",
+		},
+	];
+
+	return (
+		<div className="relative bg-black/5 dark:bg-white/5 py-24">
+			<div className="max-w-6xl mx-auto px-4">
+				<h2 className="text-3xl font-bold text-center mb-4">
+					Built for the Future of Finance
+				</h2>
+				<p className="text-center text-muted-foreground mb-16 max-w-[600px] mx-auto">
+					Leveraging the power of Stellar blockchain to provide a secure,
+					efficient, and truly decentralized trading experience.
+				</p>
+				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+					{features.map((feature) => (
+						<div
+							key={feature.title}
+							className="group relative p-6 rounded-xl bg-card hover:bg-card/50 transition-all duration-300"
+						>
+							<div
+								className={`absolute inset-0 opacity-0 group-hover:opacity-10 bg-gradient-to-br ${feature.gradient} rounded-xl transition-opacity duration-300`}
+							/>
+							<div className="relative">
+								<div
+									className={`mb-4 bg-gradient-to-br ${feature.gradient} text-white p-3 rounded-lg inline-block`}
+								>
+									{feature.icon}
+								</div>
+								<h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
+								<p className="text-muted-foreground">{feature.description}</p>
+							</div>
+						</div>
+					))}
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/frontend/app/components/ui/hero-section.tsx b/frontend/app/components/home/hero-section.tsx
similarity index 97%
rename from frontend/app/components/ui/hero-section.tsx
rename to frontend/app/components/home/hero-section.tsx
index 83d2789..85a7095 100644
--- a/frontend/app/components/ui/hero-section.tsx
+++ b/frontend/app/components/home/hero-section.tsx
@@ -1,8 +1,8 @@
-import { Button } from "@/app/components/ui/button";
 import { ArrowRight } from "lucide-react";
 import Link from "next/link";
-import * as React from "react";
-import { SafeSwapLogo } from "./SafeSwapLogo";
+
+import { SafeSwapLogo } from "@/app/components/shared/safe-swap-logo";
+import { Button } from "@/app/components/ui/button";
 
 export function HeroSection() {
 	return (
diff --git a/frontend/app/components/ui/stats-section.tsx b/frontend/app/components/home/stats-section.tsx
similarity index 97%
rename from frontend/app/components/ui/stats-section.tsx
rename to frontend/app/components/home/stats-section.tsx
index 91dc239..963c523 100644
--- a/frontend/app/components/ui/stats-section.tsx
+++ b/frontend/app/components/home/stats-section.tsx
@@ -1,5 +1,3 @@
-import * as React from "react";
-
 export function StatsSection() {
 	return (
 		<div className="relative py-20 overflow-hidden">
diff --git a/frontend/app/components/ui/add-product-modal.tsx b/frontend/app/components/marketplace/add-product-modal.tsx
similarity index 85%
rename from frontend/app/components/ui/add-product-modal.tsx
rename to frontend/app/components/marketplace/add-product-modal.tsx
index 9a6a356..fea7d79 100644
--- a/frontend/app/components/ui/add-product-modal.tsx
+++ b/frontend/app/components/marketplace/add-product-modal.tsx
@@ -1,15 +1,16 @@
 import React from "react";
-import { Button } from "./button";
-import { Input } from "./input";
-import { Label } from "./label";
+
+import { Button } from "@/app/components/ui/button";
+import { Input } from "@/app/components/ui/input";
+import { Label } from "@/app/components/ui/label";
 import {
 	Select,
 	SelectContent,
 	SelectItem,
 	SelectTrigger,
 	SelectValue,
-} from "./select";
-import { Textarea } from "./textarea";
+} from "@/app/components/ui/select";
+import { Textarea } from "@/app/components/ui/textarea";
 
 interface AddProductModalProps {
 	isOpen: boolean;
@@ -24,8 +25,8 @@ const AddProductModal: React.FC<AddProductModalProps> = ({
 
 	return (
 		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-			<div className="bg-white rounded-lg shadow-lg w-[90%] max-w-xl p-6">
-				<h2 className="text-2xl font-bold mb-4">Add New Product</h2>
+			<div className="bg-white rounded-lg shadow-lg w-[90%] max-w-xl p-6 dark:bg-neutral-950">
+				<h2 className="text-2xl text-center font-bold mb-4">Add New Product</h2>
 				<form className="space-y-4">
 					{/* Product Name */}
 					<div>
@@ -91,12 +92,7 @@ const AddProductModal: React.FC<AddProductModalProps> = ({
 					<Button variant="secondary" onClick={onClose}>
 						Close
 					</Button>
-					<Button
-						variant="default"
-						className="bg-black text-white hover:bg-black/80"
-					>
-						Save
-					</Button>
+					<Button>Save</Button>
 				</div>
 			</div>
 		</div>
diff --git a/frontend/app/components/marketplace/breadcrumb-navigation.tsx b/frontend/app/components/marketplace/breadcrumb-navigation.tsx
new file mode 100644
index 0000000..8e837b6
--- /dev/null
+++ b/frontend/app/components/marketplace/breadcrumb-navigation.tsx
@@ -0,0 +1,24 @@
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+} from "@/app/components/ui/breadcrumb";
+
+export default function BreadcrumbNavigation() {
+	return (
+		<Breadcrumb>
+			<BreadcrumbList className="text-base">
+				<BreadcrumbItem>
+					<BreadcrumbLink href="/">Home</BreadcrumbLink>
+				</BreadcrumbItem>
+				<BreadcrumbSeparator />
+				<BreadcrumbItem>
+					<BreadcrumbPage>Marketplace</BreadcrumbPage>
+				</BreadcrumbItem>
+			</BreadcrumbList>
+		</Breadcrumb>
+	);
+}
diff --git a/frontend/app/components/marketplace/filters.tsx b/frontend/app/components/marketplace/filters.tsx
new file mode 100644
index 0000000..9fdd799
--- /dev/null
+++ b/frontend/app/components/marketplace/filters.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { Checkbox, Slider } from "@radix-ui/themes";
+import { useState } from "react";
+
+import { SidebarContent, SidebarHeader } from "@/app/components/ui/sidebar";
+
+const Filters = () => {
+	const [priceRange, setPriceRange] = useState<[number, number]>([0, 1500]);
+	const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+
+	const handleCategoryChange = (category: string) => {
+		setSelectedCategories((prev) =>
+			prev.includes(category)
+				? prev.filter((c) => c !== category)
+				: [...prev, category],
+		);
+	};
+
+	return (
+		<>
+			<SidebarHeader className="p-6 border-b">
+				<h2 className="text-xl font-semibold">Filters</h2>
+			</SidebarHeader>
+			<SidebarContent className="p-6">
+				<div className="space-y-8">
+					<div>
+						<h3 className="mb-2 text-lg font-medium">Price range</h3>
+						<Slider
+							min={0}
+							max={1500}
+							step={10}
+							value={priceRange}
+							onValueChange={(value) =>
+								setPriceRange(value as [number, number])
+							}
+							className="mb-3"
+						/>
+						<div className="flex justify-between text-lg">
+							<span>${priceRange[0]}</span>
+							<span>${priceRange[1]}</span>
+						</div>
+					</div>
+					<div>
+						<h3 className="mb-2 text-lg font-medium">Categories</h3>
+						<div className="space-y-3">
+							{["Electronics", "Furniture", "Appliances", "Sports"].map(
+								(category) => (
+									<div key={category} className="flex items-center">
+										<Checkbox
+											id={category}
+											checked={selectedCategories.includes(category)}
+											onCheckedChange={() => handleCategoryChange(category)}
+										/>
+										<label htmlFor={category} className="ml-3 text-lg">
+											{category}
+										</label>
+									</div>
+								),
+							)}
+						</div>
+					</div>
+				</div>
+			</SidebarContent>
+		</>
+	);
+};
+
+export default Filters;
diff --git a/frontend/app/components/marketplace/index.ts b/frontend/app/components/marketplace/index.ts
deleted file mode 100644
index b7492fc..0000000
--- a/frontend/app/components/marketplace/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ProductsPagination } from "./products-pagination";
diff --git a/frontend/app/components/marketplace/products-pagination.tsx b/frontend/app/components/marketplace/products-pagination.tsx
index 31bf175..1be064d 100644
--- a/frontend/app/components/marketplace/products-pagination.tsx
+++ b/frontend/app/components/marketplace/products-pagination.tsx
@@ -6,7 +6,7 @@ import {
 	PaginationLink,
 	PaginationNext,
 	PaginationPrevious,
-} from "../ui/pagination";
+} from "@/app/components/ui/pagination";
 import {
 	Select,
 	SelectContent,
@@ -14,15 +14,12 @@ import {
 	SelectItem,
 	SelectTrigger,
 	SelectValue,
-} from "../ui/select";
+} from "@/app/components/ui/select";
 
 export const ProductsPagination = () => {
 	return (
-		<section
-			className="w-full pb-10 mt-2 flex flex-col justify-center items-start gap-5 
-    md:flex-row md:items-center md:gap-0 md:max-w-2xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl"
-		>
-			<div className="w-full gap-2 flex justify-center items-center md:w-[50%] md:justify-start">
+		<section className="w-full pt-5 mt-2 flex flex-col gap-5 md:flex-row md:gap-0">
+			<div className="w-full gap-2 flex items-center justify-center md:justify-start md:w-[50%]">
 				<label className="opacity-80">Show result:</label>
 				<Select>
 					<SelectTrigger className="w-[70px]">
@@ -41,7 +38,7 @@ export const ProductsPagination = () => {
 			</div>
 
 			<div className="w-full md:w-[50%]">
-				<Pagination>
+				<Pagination className="justify-center md:justify-end">
 					<PaginationContent>
 						<PaginationItem>
 							<PaginationPrevious href="#" />
diff --git a/frontend/app/components/products/Images.tsx b/frontend/app/components/products/Images.tsx
index e849428..fbfd19e 100644
--- a/frontend/app/components/products/Images.tsx
+++ b/frontend/app/components/products/Images.tsx
@@ -1,46 +1,45 @@
 import Image from "next/image";
-import React from "react";
 
 interface ImageProps {
-  images: {
-    src: string;
-    alt: string;
-  }[];
+	images: {
+		src: string;
+		alt: string;
+	}[];
 }
 
 const Images = ({ images }: ImageProps) => {
-  if (!images || images.length === 0) {
-    return <p>No images available</p>;
-  }
+	if (!images || images.length === 0) {
+		return <p>No images available</p>;
+	}
 
-  const mainImage = images[0];
+	const mainImage = images[0];
 
-  return (
-    <div className="flex flex-col gap-8">
-      <Image
-        src={mainImage.src}
-        alt={mainImage.alt}
-        width={500}
-        height={450}
-        className="w-full rounded-lg shadow-lg"
-      />
+	return (
+		<div className="flex flex-col gap-8">
+			<Image
+				src={mainImage.src}
+				alt={mainImage.alt}
+				width={500}
+				height={450}
+				className="w-full rounded-lg shadow-lg"
+			/>
 
-      {images.length > 1 && (
-        <div className="flex justify-between gap-2">
-          {images.map((image, index) => (
-            <Image
-              width={200}
-              height={150}
-              key={index}
-              src={image.src}
-              alt={image.alt}
-              className="w-1/4 rounded-lg cursor-pointer shadow-lg"
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
+			{images.length > 1 && (
+				<div className="flex justify-between gap-2">
+					{images.map((image, index) => (
+						<Image
+							width={200}
+							height={150}
+							key={index}
+							src={image.src}
+							alt={image.alt}
+							className="w-1/4 rounded-lg cursor-pointer shadow-lg"
+						/>
+					))}
+				</div>
+			)}
+		</div>
+	);
 };
 
 export default Images;
diff --git a/frontend/app/components/products/ProductDetailModal.tsx b/frontend/app/components/products/ProductDetailModal.tsx
deleted file mode 100644
index 891f15d..0000000
--- a/frontend/app/components/products/ProductDetailModal.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import { Button } from "@/app/components/ui/button";
-import { ShoppingCart, Star } from "lucide-react";
-import ImageCarousel from "../ui/image-carrousel";
-
-interface Product {
-	id: number;
-	images: { src: string; alt: string }[];
-	name: string;
-	description: string;
-	price: number;
-	category: string;
-}
-
-function ProductDetailModal({
-	isOpen,
-	onClose,
-	product,
-}: {
-	isOpen: boolean;
-	onClose: () => void;
-	product: Product | null;
-}) {
-	if (!product) return null;
-	const renderStars = (rating: number) => {
-		const filledStars = Math.floor(rating);
-		const halfStars = rating % 1 >= 0.5 ? 1 : 0;
-		const emptyStars = 5 - (filledStars + halfStars);
-
-		return [
-			...Array(filledStars).fill("filled"),
-			...Array(halfStars).fill("half"),
-			...Array(emptyStars).fill("empty"),
-		];
-	};
-
-	const rating = 4.3;
-
-	return (
-		<div
-			className={`fixed inset-0 z-50 flex items-center justify-center transition-opacity ${
-				isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
-			}`}
-		>
-			<div className="fixed inset-0 bg-background/80 backdrop-blur-sm" />
-			<div
-				className="relative w-full max-w-md mx-auto p-6 rounded-lg shadow-lg bg-background border"
-				role="dialog"
-				aria-labelledby="product-detail-modal"
-			>
-				<button
-					onClick={onClose}
-					className="absolute top-2 right-2 text-muted-foreground hover:text-foreground transition-colors"
-				>
-					<span className="sr-only">Close</span>✕
-				</button>
-
-				<h2
-					className="text-2xl font-bold text-foreground"
-					id="product-detail-modal"
-				>
-					{product.name}
-				</h2>
-				<div className="mt-4">
-					<div className="flex flex-wrap justify-center gap-4">
-						<ImageCarousel images={product.images} />
-					</div>
-					<p className="mt-4 text-lg text-muted-foreground">
-						{product.category}
-					</p>
-					<p className="mt-2 text-lg text-foreground">
-						{product.price ? `$${product.price}` : "Price not available"}
-					</p>
-					<p className="mt-2 text-sm text-muted-foreground">
-						{product.description}
-					</p>
-				</div>
-
-				<div className="mt-4 flex items-center">
-					{renderStars(rating).map((star, index) => {
-						if (star === "filled") {
-							return <Star key={index} className="h-5 w-5 text-yellow-400" />;
-						} else if (star === "half") {
-							return (
-								<Star
-									key={index}
-									className="h-5 w-5 text-yellow-400 opacity-50"
-								/>
-							);
-						} else {
-							return (
-								<Star key={index} className="h-5 w-5 text-muted-foreground" />
-							);
-						}
-					})}
-					<span className="ml-2 text-sm text-muted-foreground">
-						{rating.toFixed(1)} / 5
-					</span>
-				</div>
-
-				<div className="mt-6 gap-4">
-					<Button>
-						<ShoppingCart className="mr-2 h-4 w-4" />
-						Add to Cart
-					</Button>
-				</div>
-
-				<div className="mt-6 flex justify-end">
-					<Button variant="secondary" onClick={onClose}>
-						Close
-					</Button>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default ProductDetailModal;
diff --git a/frontend/app/components/products/images-carrousel.tsx b/frontend/app/components/products/images-carrousel.tsx
new file mode 100644
index 0000000..c4e30b4
--- /dev/null
+++ b/frontend/app/components/products/images-carrousel.tsx
@@ -0,0 +1,50 @@
+import Image from "next/image";
+import * as React from "react";
+
+import { Card, CardContent } from "@/app/components/ui/card";
+import {
+	Carousel,
+	CarouselContent,
+	CarouselItem,
+	CarouselNext,
+	CarouselPrevious,
+} from "@/app/components/ui/carousel";
+
+interface ImagesCarouselProps {
+	images: { src: string; alt: string }[];
+}
+
+const ImagesCarousel: React.FC<ImagesCarouselProps> = ({ images }) => {
+	return (
+		<Carousel className="w-full max-w-xs">
+			<div className="relative">
+				<CarouselContent>
+					{images.map((image, index) => (
+						<CarouselItem key={index}>
+							<Card className="border-0 shadow-none">
+								<CardContent className="p-0">
+									<div className="relative aspect-square">
+										<Image
+											src={image.src}
+											alt={image.alt}
+											width={320}
+											height={320}
+											priority
+											className="rounded-t-lg h-[320px]"
+										/>
+									</div>
+								</CardContent>
+							</Card>
+						</CarouselItem>
+					))}
+				</CarouselContent>
+				<div className="absolute inset-0 flex items-center justify-between p-4">
+					<CarouselPrevious className="h-8 w-8 left-1 translate-x-0" />
+					<CarouselNext className="h-8 w-8 right-1 translate-x-0" />
+				</div>
+			</div>
+		</Carousel>
+	);
+};
+
+export default ImagesCarousel;
diff --git a/frontend/app/components/providers/theme-provider.tsx b/frontend/app/components/providers/theme-provider.tsx
index 0e2a2f1..fba8ad6 100644
--- a/frontend/app/components/providers/theme-provider.tsx
+++ b/frontend/app/components/providers/theme-provider.tsx
@@ -2,7 +2,6 @@
 
 import { ThemeProvider as NextThemesProvider } from "next-themes";
 import { type ThemeProviderProps } from "next-themes";
-import * as React from "react";
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
 	return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
diff --git a/frontend/app/components/shared/delivery-country.tsx b/frontend/app/components/shared/delivery-country.tsx
new file mode 100644
index 0000000..571bc2d
--- /dev/null
+++ b/frontend/app/components/shared/delivery-country.tsx
@@ -0,0 +1,48 @@
+import { MapPin } from "lucide-react";
+import Image from "next/image";
+
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/app/components/ui/select";
+
+export function DeliveryCountry() {
+	return (
+		<div className="flex items-center">
+			<MapPin />
+			<p className="ml-2">Ship to</p>
+			<Select defaultValue="CRC">
+				<SelectTrigger className="w-[85px] border-none shadow-none px-1 focus:ring-0 text-base">
+					<SelectValue placeholder="Select a country" />
+				</SelectTrigger>
+				<SelectContent className="min-w-[85px]">
+					<SelectGroup>
+						<SelectLabel>Countries</SelectLabel>
+						<SelectItem
+							value="CRC"
+							className="flex items-center justify-between"
+						>
+							<div className="flex gap-1 items-center">
+								CRC
+								<Image
+									src="/images/costa-rica.svg"
+									alt="Costa Rica flag"
+									width={20}
+									height={14}
+									priority
+								/>
+							</div>
+						</SelectItem>
+					</SelectGroup>
+				</SelectContent>
+			</Select>
+		</div>
+	);
+}
+
+export default DeliveryCountry;
diff --git a/frontend/app/components/shared/footer.tsx b/frontend/app/components/shared/footer.tsx
new file mode 100644
index 0000000..2cdd8af
--- /dev/null
+++ b/frontend/app/components/shared/footer.tsx
@@ -0,0 +1,22 @@
+import Link from "next/link";
+
+import { SafeSwapLogo } from "@/app/components/shared/safe-swap-logo";
+
+export default function Footer() {
+	return (
+		<footer className="flex items-center justify-between px-6 py-4 border-t">
+			<div className="flex items-center gap-2">
+				<SafeSwapLogo width={150} height={40} />
+				<p className="text-sm text-muted-foreground">Built on Stellar</p>
+			</div>
+			<div className="flex gap-4">
+				<Link
+					href="/marketplace"
+					className="text-sm text-muted-foreground hover:underline underline-offset-4"
+				>
+					Marketplace
+				</Link>
+			</div>
+		</footer>
+	);
+}
diff --git a/frontend/app/components/header/Header.tsx b/frontend/app/components/shared/header.tsx
similarity index 56%
rename from frontend/app/components/header/Header.tsx
rename to frontend/app/components/shared/header.tsx
index 1d5de3d..e5d73bb 100644
--- a/frontend/app/components/header/Header.tsx
+++ b/frontend/app/components/shared/header.tsx
@@ -1,16 +1,5 @@
 "use client";
 
-import { SafeSwapLogo } from "@/app/components/ui/SafeSwapLogo";
-import { Button } from "@/app/components/ui/button";
-import DeliveryLocationButton from "@/app/components/ui/delivery-location-button";
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from "@/app/components/ui/dropdown-menu";
-import { Input } from "@/app/components/ui/input";
-import { ThemeToggle } from "@/app/components/ui/theme-toggle";
 import {
 	History,
 	List,
@@ -23,6 +12,18 @@ import {
 import Link from "next/link";
 import { useState } from "react";
 
+import DeliveryCountry from "@/app/components/shared/delivery-country";
+import { SafeSwapLogo } from "@/app/components/shared/safe-swap-logo";
+import { Button } from "@/app/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/app/components/ui/dropdown-menu";
+import { Input } from "@/app/components/ui/input";
+import { ThemeToggle } from "@/app/components/ui/theme-toggle";
+
 export default function Header() {
 	const [searchTerm, setSearchTerm] = useState<string>("");
 	const showSearchBar = searchTerm !== undefined && setSearchTerm !== undefined;
@@ -34,39 +35,41 @@ export default function Header() {
 					<Link href={"/"}>
 						<SafeSwapLogo width={150} height={40} />
 					</Link>
+					<DeliveryCountry />
+				</div>
+				<div className="flex items-center gap-4">
+					{showSearchBar ? (
+						<div className="relative w-full pl-2 max-w-[18.75rem] md:w-[18.75rem]">
+							<Input
+								type="search"
+								placeholder="What are you looking for?"
+								value={searchTerm}
+								onChange={(e) => setSearchTerm(e.target.value)}
+								className="w-full h-10 pr-10"
+							/>
+							<Button
+								size="icon"
+								variant="ghost"
+								className="absolute right-0 top-0 h-full"
+							>
+								<Search className="!h-5 !w-5" />
+								<span className="sr-only">Search</span>
+							</Button>
+						</div>
+					) : null}
 				</div>
-				{showSearchBar ? (
-					<div className="relative w-full pl-2 max-w-[18.75rem] md:w-[18.75rem]">
-						<Input
-							type="search"
-							placeholder="Search products..."
-							value={searchTerm}
-							onChange={(e) => setSearchTerm(e.target.value)}
-							className="w-full h-8 pr-10"
-						/>
-						<Button
-							size="icon"
-							variant="ghost"
-							className="absolute right-0 top-0 h-full"
-						>
-							<Search className="h-5 w-5" />
-							<span className="sr-only">Search</span>
-						</Button>
-					</div>
-				) : null}
-				<div className="flex gap-4">
-					<DeliveryLocationButton />
-					<Button size="lg" className="group">
-						<Wallet className="mr-2 h-4 w-4 transition-transform group-hover:scale-110" />
-						Connect Wallet
+				<div className="flex gap-1">
+					<Button variant="ghost" size="icon" className="group">
+						<Wallet className="!h-6 !w-6 transition-transform group-hover:scale-110" />
 					</Button>
-					<Button className="group h-auto">
-						<ShoppingCart className="h-5 w-5 transition-transform group-hover:scale-110" />
+					<ThemeToggle />
+					<Button variant="ghost" size="icon" className="group h-auto">
+						<ShoppingCart className="!h-6 !w-6 transition-transform group-hover:scale-110" />
 					</Button>
 					<DropdownMenu>
 						<DropdownMenuTrigger asChild>
-							<Button className="group h-auto">
-								<User className="h-5 w-5 transition-transform group-hover:scale-110" />
+							<Button variant="ghost" size="icon" className="group h-auto">
+								<User className="!h-6 !w-6 transition-transform group-hover:scale-110" />
 							</Button>
 						</DropdownMenuTrigger>
 						<DropdownMenuContent className="w-48">
@@ -88,7 +91,6 @@ export default function Header() {
 							</DropdownMenuItem>
 						</DropdownMenuContent>
 					</DropdownMenu>
-					<ThemeToggle />
 				</div>
 			</header>
 		</>
diff --git a/frontend/app/components/ui/SafeSwapLogo.tsx b/frontend/app/components/shared/safe-swap-logo.tsx
similarity index 99%
rename from frontend/app/components/ui/SafeSwapLogo.tsx
rename to frontend/app/components/shared/safe-swap-logo.tsx
index a3c0ef5..82aa849 100644
--- a/frontend/app/components/ui/SafeSwapLogo.tsx
+++ b/frontend/app/components/shared/safe-swap-logo.tsx
@@ -1,4 +1,5 @@
 "use client";
+
 import Image from "next/image";
 import { useEffect, useState } from "react";
 
diff --git a/frontend/app/components/header/subheader/SubHeader.tsx b/frontend/app/components/shared/sub-header.tsx
similarity index 66%
rename from frontend/app/components/header/subheader/SubHeader.tsx
rename to frontend/app/components/shared/sub-header.tsx
index d5d8468..cb6769e 100644
--- a/frontend/app/components/header/subheader/SubHeader.tsx
+++ b/frontend/app/components/shared/sub-header.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import { Button } from "@radix-ui/themes";
 import { CirclePlus } from "lucide-react";
 import { useState } from "react";
-import AddProductModal from "../../ui/add-product-modal";
-import BreadcrumbNavigation from "../../ui/breadcrumb-navigation";
+
+import AddProductModal from "@/app/components/marketplace/add-product-modal";
+import BreadcrumbNavigation from "@/app/components/marketplace/breadcrumb-navigation";
+import { Button } from "@/app/components/ui/button";
 
 interface SubHeaderProps {
 	name: string;
@@ -19,10 +20,7 @@ const SubHeader = ({ name }: SubHeaderProps) => {
 				{/* Breadcrumb Navigation */}
 				<BreadcrumbNavigation />
 
-				<Button
-					className="flex items-center gap-2 bg-black cursor-pointer"
-					onClick={() => setShowModal(true)}
-				>
+				<Button onClick={() => setShowModal(true)}>
 					<CirclePlus className="w-5 h-5" />
 					Add {name}
 				</Button>
diff --git a/frontend/app/components/sidebar/Sidebar.tsx b/frontend/app/components/sidebar/Sidebar.tsx
deleted file mode 100644
index 1192f1e..0000000
--- a/frontend/app/components/sidebar/Sidebar.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { SidebarContent, SidebarHeader } from "@/app/components/ui/sidebar";
-import { Checkbox, Slider } from "@radix-ui/themes";
-
-const SidebarComponent = () => {
-  const [priceRange, setPriceRange] = useState<[number, number]>([0, 1500]);
-  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
-
-  const handleCategoryChange = (category: string) => {
-    setSelectedCategories((prev) =>
-      prev.includes(category)
-        ? prev.filter((c) => c !== category)
-        : [...prev, category]
-    );
-  };
-
-  return (
-    <>
-      <SidebarHeader className="p-6 border-b">
-        <h2 className="text-xl font-semibold">Filters</h2>
-      </SidebarHeader>
-      <SidebarContent className="p-6">
-        <div className="space-y-8">
-          <div>
-            <h3 className="mb-2 text-lg font-medium">Price range</h3>
-            <Slider
-              min={0}
-              max={1500}
-              step={10}
-              value={priceRange}
-              onValueChange={(value) =>
-                setPriceRange(value as [number, number])
-              }
-              className="mb-3"
-            />
-            <div className="flex justify-between text-lg">
-              <span>${priceRange[0]}</span>
-              <span>${priceRange[1]}</span>
-            </div>
-          </div>
-          <div>
-            <h3 className="mb-2 text-lg font-medium">Categories</h3>
-            <div className="space-y-3">
-              {["Electronics", "Furniture", "Appliances", "Sports"].map(
-                (category) => (
-                  <div key={category} className="flex items-center">
-                    <Checkbox
-                      id={category}
-                      checked={selectedCategories.includes(category)}
-                      onCheckedChange={() => handleCategoryChange(category)}
-                    />
-                    <label htmlFor={category} className="ml-3 text-lg">
-                      {category}
-                    </label>
-                  </div>
-                )
-              )}
-            </div>
-          </div>
-        </div>
-      </SidebarContent>
-    </>
-  );
-};
-
-export default SidebarComponent;
diff --git a/frontend/app/components/ui/breadcrumb-navigation.tsx b/frontend/app/components/ui/breadcrumb-navigation.tsx
deleted file mode 100644
index 107abba..0000000
--- a/frontend/app/components/ui/breadcrumb-navigation.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-"use client";
-
-import { ChevronRight } from "lucide-react";
-import React from "react";
-
-export function Breadcrumb({ children }: { children: React.ReactNode }) {
-	return <nav aria-label="breadcrumb">{children}</nav>;
-}
-
-export function BreadcrumbList({ children }: { children: React.ReactNode }) {
-	return <ol className="flex space-x-2">{children}</ol>;
-}
-
-export function BreadcrumbItem({ children }: { children: React.ReactNode }) {
-	return <li className="flex items-center">{children}</li>;
-}
-
-export function BreadcrumbSeparator() {
-	return (
-		<span className="mx-1 text-gray-400">
-			<ChevronRight size={16} />
-		</span>
-	);
-}
-
-export default function BreadcrumbNavigation() {
-	return (
-		<nav aria-label="breadcrumb">
-			<ol className="flex items-center space-x-2">
-				{/* Home */}
-				<BreadcrumbItem>
-					<a
-						href="/"
-						className="text-gray-500 hover:text-gray-700 transition-colors"
-					>
-						Home
-					</a>
-				</BreadcrumbItem>
-				<BreadcrumbSeparator />
-
-				{/* Marketplace */}
-				<BreadcrumbItem>
-					<span className="text-foreground font-medium">Marketplace</span>
-				</BreadcrumbItem>
-			</ol>
-		</nav>
-	);
-}
diff --git a/frontend/app/components/ui/breadcrumb.tsx b/frontend/app/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..982c622
--- /dev/null
+++ b/frontend/app/components/ui/breadcrumb.tsx
@@ -0,0 +1,114 @@
+import { cn } from "@/lib/utils";
+import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+
+const Breadcrumb = React.forwardRef<
+	HTMLElement,
+	React.ComponentPropsWithoutRef<"nav"> & {
+		separator?: React.ReactNode;
+	}
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<
+	HTMLOListElement,
+	React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+	<ol
+		ref={ref}
+		className={cn(
+			"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+			className,
+		)}
+		{...props}
+	/>
+));
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<
+	HTMLLIElement,
+	React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+	<li
+		ref={ref}
+		className={cn("inline-flex items-center gap-1.5", className)}
+		{...props}
+	/>
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+	HTMLAnchorElement,
+	React.ComponentPropsWithoutRef<"a"> & {
+		asChild?: boolean;
+	}
+>(({ asChild, className, ...props }, ref) => {
+	const Comp = asChild ? Slot : "a";
+
+	return (
+		<Comp
+			ref={ref}
+			className={cn("transition-colors hover:text-foreground", className)}
+			{...props}
+		/>
+	);
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<
+	HTMLSpanElement,
+	React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+	<span
+		ref={ref}
+		role="link"
+		aria-disabled="true"
+		aria-current="page"
+		className={cn("font-normal text-foreground", className)}
+		{...props}
+	/>
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({
+	children,
+	className,
+	...props
+}: React.ComponentProps<"li">) => (
+	<li
+		role="presentation"
+		aria-hidden="true"
+		className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+		{...props}
+	>
+		{children ?? <ChevronRightIcon />}
+	</li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({
+	className,
+	...props
+}: React.ComponentProps<"span">) => (
+	<span
+		role="presentation"
+		aria-hidden="true"
+		className={cn("flex h-9 w-9 items-center justify-center", className)}
+		{...props}
+	>
+		<DotsHorizontalIcon className="h-4 w-4" />
+		<span className="sr-only">More</span>
+	</span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+	Breadcrumb,
+	BreadcrumbList,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+	BreadcrumbEllipsis,
+};
diff --git a/frontend/app/components/ui/button.tsx b/frontend/app/components/ui/button.tsx
index 9619b09..d18eb21 100644
--- a/frontend/app/components/ui/button.tsx
+++ b/frontend/app/components/ui/button.tsx
@@ -35,9 +35,9 @@ const buttonVariants = cva(
 );
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -54,4 +54,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/frontend/app/components/ui/card.tsx b/frontend/app/components/ui/card.tsx
index 848fb6f..37425cf 100644
--- a/frontend/app/components/ui/card.tsx
+++ b/frontend/app/components/ui/card.tsx
@@ -3,80 +3,80 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
-      className
-    )}
-    {...props}
-  />
+	<div
+		ref={ref}
+		className={cn(
+			"rounded-xl border bg-card text-card-foreground shadow",
+			className,
+		)}
+		{...props}
+	/>
 ));
 Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("flex flex-col", className)} {...props} />
+	<div ref={ref} className={cn("flex flex-col", className)} {...props} />
 ));
 CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn(
-      "font-semibold leading-none tracking-tight px-4 pt-4",
-      className
-    )}
-    {...props}
-  />
+	<h3
+		ref={ref}
+		className={cn(
+			"font-semibold leading-none tracking-tight px-4 pt-4",
+			className,
+		)}
+		{...props}
+	/>
 ));
 CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
+	<p
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
 ));
 CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("px-4 pb-4", className)} {...props} />
+	<div ref={ref} className={cn("px-4 pb-4", className)} {...props} />
 ));
 CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center px-4 pb-4", className)}
-    {...props}
-  />
+	<div
+		ref={ref}
+		className={cn("flex items-center px-4 pb-4", className)}
+		{...props}
+	/>
 ));
 CardFooter.displayName = "CardFooter";
 
 export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardDescription,
-  CardContent,
+	Card,
+	CardHeader,
+	CardFooter,
+	CardTitle,
+	CardDescription,
+	CardContent,
 };
diff --git a/frontend/app/components/ui/carousel.tsx b/frontend/app/components/ui/carousel.tsx
index 245576a..156d47e 100644
--- a/frontend/app/components/ui/carousel.tsx
+++ b/frontend/app/components/ui/carousel.tsx
@@ -1,261 +1,261 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import { Button } from "@/app/components/ui/button";
+import { cn } from "@/lib/utils";
+import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
 import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { cn } from "@/lib/utils"
-import { Button } from "@/app/components/ui/button"
-import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons"
+	type UseEmblaCarouselType,
+} from "embla-carousel-react";
+import * as React from "react";
 
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
 
 type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-  setApi?: (api: CarouselApi) => void
-}
+	opts?: CarouselOptions;
+	plugins?: CarouselPlugin;
+	orientation?: "horizontal" | "vertical";
+	setApi?: (api: CarouselApi) => void;
+};
 
 type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
+	carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+	api: ReturnType<typeof useEmblaCarousel>[1];
+	scrollPrev: () => void;
+	scrollNext: () => void;
+	canScrollPrev: boolean;
+	canScrollNext: boolean;
+} & CarouselProps;
 
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 
 function useCarousel() {
-  const context = React.useContext(CarouselContext)
+	const context = React.useContext(CarouselContext);
 
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
-  }
+	if (!context) {
+		throw new Error("useCarousel must be used within a <Carousel />");
+	}
 
-  return context
+	return context;
 }
 
 const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement> & CarouselProps
 >(
-  (
-    {
-      orientation = "horizontal",
-      opts,
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const [carouselRef, api] = useEmblaCarousel(
-      {
-        ...opts,
-        axis: orientation === "horizontal" ? "x" : "y",
-      },
-      plugins
-    )
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
+	(
+		{
+			orientation = "horizontal",
+			opts,
+			setApi,
+			plugins,
+			className,
+			children,
+			...props
+		},
+		ref,
+	) => {
+		const [carouselRef, api] = useEmblaCarousel(
+			{
+				...opts,
+				axis: orientation === "horizontal" ? "x" : "y",
+			},
+			plugins,
+		);
+		const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+		const [canScrollNext, setCanScrollNext] = React.useState(false);
 
-    const onSelect = React.useCallback((api: CarouselApi) => {
-      if (!api) {
-        return
-      }
+		const onSelect = React.useCallback((api: CarouselApi) => {
+			if (!api) {
+				return;
+			}
 
-      setCanScrollPrev(api.canScrollPrev())
-      setCanScrollNext(api.canScrollNext())
-    }, [])
+			setCanScrollPrev(api.canScrollPrev());
+			setCanScrollNext(api.canScrollNext());
+		}, []);
 
-    const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
-    }, [api])
+		const scrollPrev = React.useCallback(() => {
+			api?.scrollPrev();
+		}, [api]);
 
-    const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
-    }, [api])
+		const scrollNext = React.useCallback(() => {
+			api?.scrollNext();
+		}, [api]);
 
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === "ArrowLeft") {
-          event.preventDefault()
-          scrollPrev()
-        } else if (event.key === "ArrowRight") {
-          event.preventDefault()
-          scrollNext()
-        }
-      },
-      [scrollPrev, scrollNext]
-    )
+		const handleKeyDown = React.useCallback(
+			(event: React.KeyboardEvent<HTMLDivElement>) => {
+				if (event.key === "ArrowLeft") {
+					event.preventDefault();
+					scrollPrev();
+				} else if (event.key === "ArrowRight") {
+					event.preventDefault();
+					scrollNext();
+				}
+			},
+			[scrollPrev, scrollNext],
+		);
 
-    React.useEffect(() => {
-      if (!api || !setApi) {
-        return
-      }
+		React.useEffect(() => {
+			if (!api || !setApi) {
+				return;
+			}
 
-      setApi(api)
-    }, [api, setApi])
+			setApi(api);
+		}, [api, setApi]);
 
-    React.useEffect(() => {
-      if (!api) {
-        return
-      }
+		React.useEffect(() => {
+			if (!api) {
+				return;
+			}
 
-      onSelect(api)
-      api.on("reInit", onSelect)
-      api.on("select", onSelect)
+			onSelect(api);
+			api.on("reInit", onSelect);
+			api.on("select", onSelect);
 
-      return () => {
-        api?.off("select", onSelect)
-      }
-    }, [api, onSelect])
+			return () => {
+				api?.off("select", onSelect);
+			};
+		}, [api, onSelect]);
 
-    return (
-      <CarouselContext.Provider
-        value={{
-          carouselRef,
-          api: api,
-          opts,
-          orientation:
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext,
-        }}
-      >
-        <div
-          ref={ref}
-          onKeyDownCapture={handleKeyDown}
-          className={cn("relative", className)}
-          role="region"
-          aria-roledescription="carousel"
-          {...props}
-        >
-          {children}
-        </div>
-      </CarouselContext.Provider>
-    )
-  }
-)
-Carousel.displayName = "Carousel"
+		return (
+			<CarouselContext.Provider
+				value={{
+					carouselRef,
+					api: api,
+					opts,
+					orientation:
+						orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+					scrollPrev,
+					scrollNext,
+					canScrollPrev,
+					canScrollNext,
+				}}
+			>
+				<div
+					ref={ref}
+					onKeyDownCapture={handleKeyDown}
+					className={cn("relative", className)}
+					role="region"
+					aria-roledescription="carousel"
+					{...props}
+				>
+					{children}
+				</div>
+			</CarouselContext.Provider>
+		);
+	},
+);
+Carousel.displayName = "Carousel";
 
 const CarouselContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel()
+	const { carouselRef, orientation } = useCarousel();
 
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
-      <div
-        ref={ref}
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-})
-CarouselContent.displayName = "CarouselContent"
+	return (
+		<div ref={carouselRef} className="overflow-hidden">
+			<div
+				ref={ref}
+				className={cn(
+					"flex",
+					orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+					className,
+				)}
+				{...props}
+			/>
+		</div>
+	);
+});
+CarouselContent.displayName = "CarouselContent";
 
 const CarouselItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel()
+	const { orientation } = useCarousel();
 
-  return (
-    <div
-      ref={ref}
-      role="group"
-      aria-roledescription="slide"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-CarouselItem.displayName = "CarouselItem"
+	return (
+		<div
+			ref={ref}
+			role="group"
+			aria-roledescription="slide"
+			className={cn(
+				"min-w-0 shrink-0 grow-0 basis-full",
+				orientation === "horizontal" ? "pl-4" : "pt-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+CarouselItem.displayName = "CarouselItem";
 
 const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
+	HTMLButtonElement,
+	React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute  h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeftIcon className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  )
-})
-CarouselPrevious.displayName = "CarouselPrevious"
+	return (
+		<Button
+			ref={ref}
+			variant={variant}
+			size={size}
+			className={cn(
+				"absolute  h-8 w-8 rounded-full",
+				orientation === "horizontal"
+					? "-left-12 top-1/2 -translate-y-1/2"
+					: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+				className,
+			)}
+			disabled={!canScrollPrev}
+			onClick={scrollPrev}
+			{...props}
+		>
+			<ArrowLeftIcon className="h-4 w-4" />
+			<span className="sr-only">Previous slide</span>
+		</Button>
+	);
+});
+CarouselPrevious.displayName = "CarouselPrevious";
 
 const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
+	HTMLButtonElement,
+	React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
+	const { orientation, scrollNext, canScrollNext } = useCarousel();
 
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRightIcon className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  )
-})
-CarouselNext.displayName = "CarouselNext"
+	return (
+		<Button
+			ref={ref}
+			variant={variant}
+			size={size}
+			className={cn(
+				"absolute h-8 w-8 rounded-full",
+				orientation === "horizontal"
+					? "-right-12 top-1/2 -translate-y-1/2"
+					: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+				className,
+			)}
+			disabled={!canScrollNext}
+			onClick={scrollNext}
+			{...props}
+		>
+			<ArrowRightIcon className="h-4 w-4" />
+			<span className="sr-only">Next slide</span>
+		</Button>
+	);
+});
+CarouselNext.displayName = "CarouselNext";
 
 export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-}
+	type CarouselApi,
+	Carousel,
+	CarouselContent,
+	CarouselItem,
+	CarouselPrevious,
+	CarouselNext,
+};
diff --git a/frontend/app/components/ui/delivery-location-button.tsx b/frontend/app/components/ui/delivery-location-button.tsx
deleted file mode 100644
index 61e4fee..0000000
--- a/frontend/app/components/ui/delivery-location-button.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import {
-	Select,
-	SelectContent,
-	SelectGroup,
-	SelectItem,
-	SelectLabel,
-	SelectTrigger,
-	SelectValue,
-} from "@/app/components/ui/select";
-import * as React from "react";
-
-export function DeliveryLocationButton() {
-	return (
-		<Select>
-			<SelectTrigger className="w-[180px]">
-				<SelectValue placeholder="Select a country" />
-			</SelectTrigger>
-			<SelectContent>
-				<SelectGroup>
-					<SelectLabel>Countries</SelectLabel>
-				</SelectGroup>
-				<SelectItem value="cr" className="flex items-center justify-between">
-					Costa Rica
-					<img
-						src="/images/costarica.svg"
-						alt="Costa Rica flag"
-						className="inline-block w-6 h-6 ml-2"
-					/>
-				</SelectItem>
-			</SelectContent>
-		</Select>
-	);
-}
-
-export default DeliveryLocationButton;
diff --git a/frontend/app/components/ui/dropdown-menu.tsx b/frontend/app/components/ui/dropdown-menu.tsx
index 0fc4c0e..ac5606c 100644
--- a/frontend/app/components/ui/dropdown-menu.tsx
+++ b/frontend/app/components/ui/dropdown-menu.tsx
@@ -1,200 +1,200 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
+	React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+		inset?: boolean;
+	}
 >(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto" />
-  </DropdownMenuPrimitive.SubTrigger>
-))
+	<DropdownMenuPrimitive.SubTrigger
+		ref={ref}
+		className={cn(
+			"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<ChevronRight className="ml-auto" />
+	</DropdownMenuPrimitive.SubTrigger>
+));
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+	DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+	React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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}
-  />
-))
+	<DropdownMenuPrimitive.SubContent
+		ref={ref}
+		className={cn(
+			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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}
+	/>
+));
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+	DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 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",
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+	<DropdownMenuPrimitive.Portal>
+		<DropdownMenuPrimitive.Content
+			ref={ref}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 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",
+				className,
+			)}
+			{...props}
+		/>
+	</DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
-  }
+	React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+		inset?: boolean;
+	}
 >(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+	<DropdownMenuPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+	React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 >(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-))
+	<DropdownMenuPrimitive.CheckboxItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		checked={checked}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<DropdownMenuPrimitive.ItemIndicator>
+				<Check className="h-4 w-4" />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</DropdownMenuPrimitive.CheckboxItem>
+));
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+	DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+	React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
 >(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+	<DropdownMenuPrimitive.RadioItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<DropdownMenuPrimitive.ItemIndicator>
+				<Circle className="h-2 w-2 fill-current" />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
-  }
+	React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+		inset?: boolean;
+	}
 >(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+	<DropdownMenuPrimitive.Label
+		ref={ref}
+		className={cn(
+			"px-2 py-1.5 text-sm font-semibold",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+	React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+	<DropdownMenuPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 my-1 h-px bg-muted", className)}
+		{...props}
+	/>
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+	return (
+		<span
+			className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+			{...props}
+		/>
+	);
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-}
+	DropdownMenu,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuCheckboxItem,
+	DropdownMenuRadioItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuGroup,
+	DropdownMenuPortal,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuRadioGroup,
+};
diff --git a/frontend/app/components/ui/feature-section.tsx b/frontend/app/components/ui/feature-section.tsx
deleted file mode 100644
index cc1bed6..0000000
--- a/frontend/app/components/ui/feature-section.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { BarChart3, Coins, Lock, Shield, Users, Zap } from "lucide-react";
-import * as React from "react";
-
-export function FeatureSection() {
-  const features = [
-    {
-      icon: <Shield className="h-8 w-8" />,
-      title: "Smart Contract Escrow",
-      description: (
-        <>
-          Automated protection with Stellar smart contracts. Trustless Work API
-          abstracts the complexities of smart contract configuration. It
-          leverages the blockchain to ensure transactions are secure and
-          transparent, providing fairness without bias in the marketplace. Read
-          more on
-          <a
-            href="https://www.trustlesswork.com/"
-            target="_blank"
-            className="text-blue-500 hover:underline"
-          >
-            <span></span> Trustless Work
-          </a>
-        </>
-      ),
-      gradient: "from-blue-500 to-cyan-500",
-    },
-    {
-      icon: <Zap className="h-8 w-8" />,
-      title: "Lightning Settlement",
-      description: "3-5 second finality on Stellar network",
-      gradient: "from-yellow-500 to-orange-500",
-    },
-    {
-      icon: <Lock className="h-8 w-8" />,
-      title: "Non-Custodial Trading",
-      description: "Keep full control of your assets",
-      gradient: "from-purple-500 to-pink-500",
-    },
-    {
-      icon: <Coins className="h-8 w-8" />,
-      title: "Multi-Asset Support",
-      description: "Trade any Stellar-based token",
-      gradient: "from-green-500 to-emerald-500",
-    },
-    {
-      icon: <Users className="h-8 w-8" />,
-      title: "DAO Governance",
-      description: "Community-driven protocol decisions",
-      gradient: "from-red-500 to-pink-500",
-    },
-    {
-      icon: <BarChart3 className="h-8 w-8" />,
-      title: "Real-Time Analytics",
-      description: "Advanced trading metrics & insights",
-      gradient: "from-indigo-500 to-purple-500",
-    },
-  ];
-
-  return (
-    <div className="relative bg-black/5 dark:bg-white/5 py-24">
-      <div className="max-w-6xl mx-auto px-4">
-        <h2 className="text-3xl font-bold text-center mb-4">
-          Built for the Future of Finance
-        </h2>
-        <p className="text-center text-muted-foreground mb-16 max-w-[600px] mx-auto">
-          Leveraging the power of Stellar blockchain to provide a secure,
-          efficient, and truly decentralized trading experience.
-        </p>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {features.map((feature) => (
-            <div
-              key={feature.title}
-              className="group relative p-6 rounded-xl bg-card hover:bg-card/50 transition-all duration-300"
-            >
-              <div
-                className={`absolute inset-0 opacity-0 group-hover:opacity-10 bg-gradient-to-br ${feature.gradient} rounded-xl transition-opacity duration-300`}
-              />
-              <div className="relative">
-                <div
-                  className={`mb-4 bg-gradient-to-br ${feature.gradient} text-white p-3 rounded-lg inline-block`}
-                >
-                  {feature.icon}
-                </div>
-                <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
-                <p className="text-muted-foreground">{feature.description}</p>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/app/components/ui/footer.tsx b/frontend/app/components/ui/footer.tsx
deleted file mode 100644
index f1c2269..0000000
--- a/frontend/app/components/ui/footer.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import Link from "next/link";
-import * as React from "react";
-import { SafeSwapLogo } from "./SafeSwapLogo";
-
-export default function Footer() {
-	return (
-		<footer className="w-full border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 py-4">
-			<div className="container mx-auto flex flex-col sm:flex-row items-center justify-between gap-4 px-6">
-				<div className="flex items-center gap-2">
-					<SafeSwapLogo width={150} height={40} />
-					<p className="text-sm text-muted-foreground">Built on Stellar</p>
-				</div>
-				<div className="flex gap-4">
-					<Link
-						href="/marketplace"
-						className="text-sm text-muted-foreground hover:underline underline-offset-4"
-					>
-						Marketplace
-					</Link>
-				</div>
-			</div>
-		</footer>
-	);
-}
diff --git a/frontend/app/components/ui/image-carrousel.tsx b/frontend/app/components/ui/image-carrousel.tsx
deleted file mode 100644
index c6f895e..0000000
--- a/frontend/app/components/ui/image-carrousel.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import Image from "next/image";
-import * as React from "react";
-
-import { Card, CardContent } from "./card";
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "./carousel";
-
-interface ImageCarouselProps {
-  images: { src: string; alt: string }[];
-}
-
-const ImageCarousel: React.FC<ImageCarouselProps> = ({ images }) => {
-  return (
-    <Carousel className="w-full max-w-xs">
-      <div className="relative">
-        <CarouselContent>
-          {images.map((image, index) => (
-            <CarouselItem key={index}>
-              <Card className="border-0 shadow-none">
-                <CardContent className="p-0">
-                  <div className="relative aspect-square">
-                    <Image
-                      src={image.src}
-                      alt={image.alt}
-                      width={320}
-                      height={320}
-                      priority
-                      className="rounded-t-lg h-[320px]"
-                    />
-                  </div>
-                </CardContent>
-              </Card>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <div className="absolute inset-0 flex items-center justify-between p-4">
-          <CarouselPrevious className="h-8 w-8 left-1 translate-x-0" />
-          <CarouselNext className="h-8 w-8 right-1 translate-x-0" />
-        </div>
-      </div>
-    </Carousel>
-  );
-};
-
-export default ImageCarousel;
diff --git a/frontend/app/components/ui/sidebar.tsx b/frontend/app/components/ui/sidebar.tsx
index 0be724e..d1abb3b 100644
--- a/frontend/app/components/ui/sidebar.tsx
+++ b/frontend/app/components/ui/sidebar.tsx
@@ -5,118 +5,118 @@ import { Menu, X } from "lucide-react";
 import React, { createContext, useContext, useState, ReactNode } from "react";
 
 interface SidebarContextType {
-  isOpen: boolean;
-  toggleSidebar: () => void;
+	isOpen: boolean;
+	toggleSidebar: () => void;
 }
 
 const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
 
 export const SidebarProvider = ({ children }: { children: ReactNode }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const toggleSidebar = () => setIsOpen(!isOpen);
+	const [isOpen, setIsOpen] = useState(false);
+	const toggleSidebar = () => setIsOpen(!isOpen);
 
-  return (
-    <SidebarContext.Provider value={{ isOpen, toggleSidebar }}>
-      {children}
-    </SidebarContext.Provider>
-  );
+	return (
+		<SidebarContext.Provider value={{ isOpen, toggleSidebar }}>
+			{children}
+		</SidebarContext.Provider>
+	);
 };
 
 export const useSidebar = () => {
-  const context = useContext(SidebarContext);
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider");
-  }
-  return context;
+	const context = useContext(SidebarContext);
+	if (!context) {
+		throw new Error("useSidebar must be used within a SidebarProvider");
+	}
+	return context;
 };
 
 export const Sidebar = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const { isOpen } = useSidebar();
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transition-transform duration-300",
-        isOpen ? "translate-x-0" : "-translate-x-full",
-        className
-      )}
-      {...props}
-    />
-  );
+	const { isOpen } = useSidebar();
+	return (
+		<div
+			ref={ref}
+			className={cn(
+				"fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transition-transform duration-300",
+				isOpen ? "translate-x-0" : "-translate-x-full",
+				className,
+			)}
+			{...props}
+		/>
+	);
 });
 Sidebar.displayName = "Sidebar";
 
 export const SidebarHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "px-4 py-2 border-b flex justify-between items-center",
-      className
-    )}
-    {...props}
-  >
-    {props.children}
-    <SidebarClose />
-  </div>
+	<div
+		ref={ref}
+		className={cn(
+			"px-4 py-2 border-b flex justify-between items-center",
+			className,
+		)}
+		{...props}
+	>
+		{props.children}
+		<SidebarClose />
+	</div>
 ));
 SidebarHeader.displayName = "SidebarHeader";
 
 export const SidebarContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex-1 overflow-y-auto p-4", className)}
-    {...props}
-  />
+	<div
+		ref={ref}
+		className={cn("flex-1 overflow-y-auto p-4", className)}
+		{...props}
+	/>
 ));
 SidebarContent.displayName = "SidebarContent";
 
 export const SidebarTrigger = React.forwardRef<
-  HTMLButtonElement,
-  React.ButtonHTMLAttributes<HTMLButtonElement>
+	HTMLButtonElement,
+	React.ButtonHTMLAttributes<HTMLButtonElement>
 >(({ className, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar();
-  return (
-    <button
-      ref={ref}
-      onClick={toggleSidebar}
-      className={cn("p-2", className)}
-      {...props}
-    >
-      <Menu size={30} className="text-black" />
-      <span className="sr-only">Toggle Sidebar</span>
-    </button>
-  );
+	const { toggleSidebar } = useSidebar();
+	return (
+		<button
+			ref={ref}
+			onClick={toggleSidebar}
+			className={cn("p-2", className)}
+			{...props}
+		>
+			<Menu size={30} className="text-black" />
+			<span className="sr-only">Toggle Sidebar</span>
+		</button>
+	);
 });
 SidebarTrigger.displayName = "SidebarTrigger";
 
 export const SidebarClose = React.forwardRef<
-  HTMLButtonElement,
-  React.ButtonHTMLAttributes<HTMLButtonElement>
+	HTMLButtonElement,
+	React.ButtonHTMLAttributes<HTMLButtonElement>
 >(({ className, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar();
-  return (
-    <button
-      ref={ref}
-      onClick={toggleSidebar}
-      className={cn(
-        "absolute right-4 top-4 opacity-70 hover:opacity-100",
-        className
-      )}
-      {...props}
-    >
-      <X className="h-4 w-4" />
-      <span className="sr-only">Close Sidebar</span>
-    </button>
-  );
+	const { toggleSidebar } = useSidebar();
+	return (
+		<button
+			ref={ref}
+			onClick={toggleSidebar}
+			className={cn(
+				"absolute right-4 top-4 opacity-70 hover:opacity-100",
+				className,
+			)}
+			{...props}
+		>
+			<X className="h-4 w-4" />
+			<span className="sr-only">Close Sidebar</span>
+		</button>
+	);
 });
 SidebarClose.displayName = "SidebarClose";
 
diff --git a/frontend/app/components/ui/theme-toggle.tsx b/frontend/app/components/ui/theme-toggle.tsx
index 91a5294..4cbb8a2 100644
--- a/frontend/app/components/ui/theme-toggle.tsx
+++ b/frontend/app/components/ui/theme-toggle.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useTheme } from "next-themes";
+
 import { Button } from "@/app/components/ui/button";
 import {
 	DropdownMenu,
@@ -7,9 +9,7 @@ import {
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "@/app/components/ui/dropdown-menu";
-import { useTheme } from "next-themes";
-import * as React from "react";
-import { IoMoon, IoSunny } from "react-icons/io5";
+import { Moon, Sun } from "lucide-react";
 
 export function ThemeToggle() {
 	const { setTheme } = useTheme();
@@ -18,8 +18,8 @@ export function ThemeToggle() {
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
 				<Button variant="ghost" size="icon">
-					<IoSunny className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-					<IoMoon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+					<Sun className="!h-6 !w-6 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+					<Moon className="absolute !h-6 !w-6 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
 					<span className="sr-only">Toggle theme</span>
 				</Button>
 			</DropdownMenuTrigger>
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 23e2a07..9fb0206 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,12 +1,10 @@
-import { Theme } from "@radix-ui/themes";
 import type { Metadata } from "next";
 import localFont from "next/font/local";
-import Footer from "./components/ui/footer";
+
 import "./globals.css";
-import Header from "./components/header/Header";
 import { ThemeProvider } from "./components/providers/theme-provider";
-import SidebarComponent from "./components/sidebar/Sidebar";
-import { Sidebar, SidebarProvider } from "./components/ui/sidebar";
+import Footer from "./components/shared/footer";
+import Header from "./components/shared/header";
 
 const geistSans = localFont({
 	src: "./fonts/GeistVF.woff",
@@ -40,20 +38,9 @@ export default function RootLayout({
 					enableSystem
 					disableTransitionOnChange
 				>
-					<Theme>
-						<SidebarProvider>
-							<div className="flex min-h-screen">
-								<Sidebar>
-									<SidebarComponent />
-								</Sidebar>
-								<div className="flex-1 overflow-auto">
-									<Header />
-									{children}
-								</div>
-							</div>
-						</SidebarProvider>
-						<Footer />
-					</Theme>
+					<Header />
+					<div className="min-h-[calc(100vh-160px)]">{children}</div>
+					<Footer />
 				</ThemeProvider>
 			</body>
 		</html>
diff --git a/frontend/app/marketplace/[productId]/page.tsx b/frontend/app/marketplace/[productId]/page.tsx
new file mode 100644
index 0000000..7801153
--- /dev/null
+++ b/frontend/app/marketplace/[productId]/page.tsx
@@ -0,0 +1,106 @@
+import { Share2, ShoppingCart, Star } from "lucide-react";
+
+import Images from "@/app/components/products/images";
+import SubHeader from "@/app/components/shared/sub-header";
+import { Button } from "@/app/components/ui/button";
+import { products } from "@/constants/testDataProduct";
+import { Product } from "@/entities/Product";
+import { useUtils } from "@/utils/utils.hook";
+
+interface ProductDetailsProps {
+	params: {
+		productId: string;
+	};
+}
+
+const ProductDetails = ({ params }: ProductDetailsProps) => {
+	const getProductById = (id: number): Product | undefined => {
+		return products.find((product) => product.id === id);
+	};
+
+	const { renderStars } = useUtils();
+	const product = getProductById(parseInt(params.productId));
+
+	return (
+		<>
+			<SubHeader name="Product" />
+			<main className="flex justify-center w-2/3 gap-10 mx-auto py-10">
+				{product && (
+					<section className="w-1/2">
+						<Images images={product.images} />
+					</section>
+				)}
+
+				<section className="w-1/2 space-y-6">
+					<div>
+						<h1 className="text-3xl font-bold">{product?.name}</h1>
+						<p className="text-zinc-600 text-xl font-semibold mt-3">$98.00</p>
+					</div>
+
+					<div>
+						<h3 className="font-medium mb-2">Category:</h3>
+						<p className="text-gray-700 text-sm leading-relaxed">
+							{product?.category}
+						</p>
+					</div>
+
+					<div>
+						<h3 className="font-medium mb-2">Quantity:</h3>
+						<div className="flex items-center gap-2">
+							<Button size="icon" variant="secondary">
+								-
+							</Button>
+							<span>1</span>
+							<Button size="icon" variant="secondary">
+								+
+							</Button>
+						</div>
+					</div>
+
+					<div className="mt-4 flex items-center">
+						{product &&
+							renderStars(product.starts).map((star, index) => {
+								if (star === "filled") {
+									return (
+										<Star key={index} className="h-5 w-5 text-yellow-400" />
+									);
+								} else if (star === "half") {
+									return (
+										<Star
+											key={index}
+											className="h-5 w-5 text-yellow-400 opacity-50"
+										/>
+									);
+								} else {
+									return <Star key={index} className="h-5 w-5 text-gray-300" />;
+								}
+							})}
+						<span className="ml-2 text-sm text-gray-600">
+							{product?.starts.toFixed(1)} / 5
+						</span>
+					</div>
+
+					<div>
+						<h3 className="font-medium mb-2">Description:</h3>
+						<p className="text-gray-700 text-sm leading-relaxed">
+							{product?.description}
+						</p>
+					</div>
+
+					<div className="flex justify-center items-center gap-3">
+						<Button className="w-9/12">
+							<ShoppingCart className="mr-2 h-4 w-4" />
+							Add to Cart
+						</Button>
+						<Button>
+							<Share2 className="mr-2 h-4 w-4" />
+							Share
+						</Button>
+					</div>
+				</section>
+			</main>
+		</>
+	);
+};
+
+export default ProductDetails;
diff --git a/frontend/app/marketplace/page.tsx b/frontend/app/marketplace/page.tsx
index e982472..9525234 100644
--- a/frontend/app/marketplace/page.tsx
+++ b/frontend/app/marketplace/page.tsx
@@ -1,7 +1,92 @@
 "use client";
 
-import ProductList from "../products/page";
+import { CirclePlus, MessageSquareMore, ShoppingCart } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
 
-export default function Marketplace() {
-	return <ProductList />;
+import AddProductModal from "@/app/components/marketplace/add-product-modal";
+import BreadcrumbNavigation from "@/app/components/marketplace/breadcrumb-navigation";
+import { ProductsPagination } from "@/app/components/marketplace/products-pagination";
+import { Button } from "@/app/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/app/components/ui/card";
+import { products } from "@/constants/testDataProduct";
+
+export default function ProductList() {
+	const [showModal, setShowModal] = useState(false);
+	// const filteredProducts = products.filter(
+	//   (product) =>
+	//     (searchTerm === "" ||
+	//       product.name.toLowerCase().includes(searchTerm.toLowerCase())) &&
+	//     (selectedCategories.length === 0 ||
+	//       selectedCategories.includes(product.category)) &&
+	//     product.price >= priceRange[0] &&
+	//     product.price <= priceRange[1]
+	// );
+
+	return (
+		<main className="container p-6 mx-auto">
+			<section className="flex items-end justify-between">
+				<BreadcrumbNavigation />
+				<div className="flex justify-end">
+					<Button onClick={() => setShowModal(true)}>
+						<CirclePlus className="mr-2 h-4 w-4" />
+						Add Product
+					</Button>
+				</div>
+			</section>
+			<section className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-4">
+				{products?.map((product) => (
+					<Card
+						key={product.id}
+						className="hover:shadow-lg mx-auto sm:mx-0 max-w-[24rem] sm:w-auto"
+					>
+						<CardHeader>
+							<div className="aspect-square">
+								<Link href={`/marketplace/${product.id}`}>
+									<Image
+										src={product.images[0].src}
+										alt={product.images[0].alt}
+										width={320}
+										height={320}
+										priority
+										className="w-full h-full rounded-t-lg cursor-pointer"
+									/>
+								</Link>
+							</div>
+							<p className="text-medium text-gray-500 px-4 pt-4">
+								{product.category}
+							</p>
+							<Link href={`/marketplace/${product.id}`}>
+								<CardTitle className="text-xl font-medium cursor-pointer hover:underline pt-0">
+									{product.name}
+								</CardTitle>
+							</Link>
+						</CardHeader>
+						<CardContent className="pt-4">
+							<span className="text-3xl font-bold">${product.price}</span>
+						</CardContent>
+						<CardFooter className="flex flex-col gap-3">
+							<Button className="w-full">
+								<ShoppingCart className="mr-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
+								Add to Cart
+							</Button>
+							<Button variant="secondary" className="w-full">
+								<MessageSquareMore className="mr-2 h-4 w-4" />
+								Chat with Seller
+							</Button>
+						</CardFooter>
+					</Card>
+				))}
+			</section>
+			<ProductsPagination />
+			<AddProductModal isOpen={showModal} onClose={() => setShowModal(false)} />
+		</main>
+	);
 }
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 2c82064..43860a3 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -1,14 +1,15 @@
 "use client";
-import { FeatureSection } from "@/app/components/ui/feature-section";
-import { HeroSection } from "@/app/components/ui/hero-section";
-import { StatsSection } from "@/app/components/ui/stats-section";
+
+import { FeatureSection } from "@/app/components/home/feature-section";
+import { HeroSection } from "@/app/components/home/hero-section";
+import { StatsSection } from "@/app/components/home/stats-section";
 
 export default function Home() {
-  return (
-    <main className="flex min-h-screen flex-col">
-      <HeroSection />
-      <StatsSection />
-      <FeatureSection />
-    </main>
-  );
+	return (
+		<main className="flex min-h-screen flex-col">
+			<HeroSection />
+			<StatsSection />
+			<FeatureSection />
+		</main>
+	);
 }
diff --git a/frontend/app/products/[productId]/page.tsx b/frontend/app/products/[productId]/page.tsx
deleted file mode 100644
index 25a8179..0000000
--- a/frontend/app/products/[productId]/page.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import Bounded from "@/app/components/Bounded";
-import SubHeader from "@/app/components/header/subheader/SubHeader";
-import Images from "@/app/components/products/Images";
-import { Button } from "@/app/components/ui/button";
-import { products } from "@/constants/testDataProduct";
-import { Product } from "@/entities/Product";
-import { useUtils } from "@/utils/utils.hook";
-import { Share2, ShoppingCart, Star } from "lucide-react";
-
-interface ProductDetailsProps {
-	params: {
-		productId: string;
-	};
-}
-
-const ProductDetails = ({ params }: ProductDetailsProps) => {
-	const getProductById = (id: number): Product | undefined => {
-		return products.find((product) => product.id === id);
-	};
-
-	const { renderStars } = useUtils();
-	const product = getProductById(parseInt(params.productId));
-
-	return (
-		<>
-			<SubHeader name="Product" />
-			<Bounded title="Product Details">
-				<div className="flex justify-center w-2/3 gap-10 mx-auto py-10">
-					{product && (
-						<section className="w-1/2">
-							<Images images={product.images} />
-						</section>
-					)}
-
-					<section className="w-1/2 space-y-6">
-						<div>
-							<h1 className="text-3xl font-bold text-foreground">
-								{product?.name}
-							</h1>
-							<p className="text-primary text-xl font-semibold mt-3">$98.00</p>
-						</div>
-
-						<div>
-							<h3 className="font-medium mb-2 text-foreground">Category:</h3>
-							<p className="text-muted-foreground text-sm leading-relaxed">
-								{product?.category}
-							</p>
-						</div>
-
-						<div>
-							<h3 className="font-medium mb-2 text-foreground">Quantity:</h3>
-							<div className="flex items-center gap-2">
-								<Button variant="outline" size="sm" className="px-3">
-									-
-								</Button>
-								<span className="text-foreground">1</span>
-								<Button variant="outline" size="sm" className="px-3">
-									+
-								</Button>
-							</div>
-						</div>
-
-						<div className="mt-4 flex items-center">
-							{product &&
-								renderStars(product.starts).map((star, index) => {
-									if (star === "filled") {
-										return (
-											<Star key={index} className="h-5 w-5 text-yellow-400" />
-										);
-									} else if (star === "half") {
-										return (
-											<Star
-												key={index}
-												className="h-5 w-5 text-yellow-400 opacity-50"
-											/>
-										);
-									} else {
-										return (
-											<Star
-												key={index}
-												className="h-5 w-5 text-muted-foreground"
-											/>
-										);
-									}
-								})}
-							<span className="ml-2 text-sm text-muted-foreground">
-								{product?.starts.toFixed(1)} / 5
-							</span>
-						</div>
-
-						<div>
-							<h3 className="font-medium mb-2 text-foreground">Description:</h3>
-							<p className="text-muted-foreground text-sm leading-relaxed">
-								{product?.description}
-							</p>
-						</div>
-
-						<div className="flex justify-center items-center gap-3">
-							<Button className="w-9/12">
-								<ShoppingCart className="mr-2 h-4 w-4" />
-								Add to Cart
-							</Button>
-							<Button>
-								<Share2 className="mr-2 h-4 w-4" />
-								Share
-							</Button>
-						</div>
-					</section>
-				</div>
-			</Bounded>
-		</>
-	);
-};
-
-export default ProductDetails;
diff --git a/frontend/app/products/page.tsx b/frontend/app/products/page.tsx
deleted file mode 100644
index 5c4def2..0000000
--- a/frontend/app/products/page.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { products } from "@/constants/testDataProduct";
-import { Card } from "@radix-ui/themes";
-import { MessageSquareMore, ShoppingCart } from "lucide-react";
-import Image from "next/image";
-import Link from "next/link";
-import Bounded from "../components/Bounded";
-import SubHeader from "../components/header/subheader/SubHeader";
-import { ProductsPagination } from "../components/marketplace";
-import { Button } from "../components/ui/button";
-import {
-	CardContent,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "../components/ui/card";
-
-export default function ProductList() {
-	return (
-		<>
-			<SubHeader name="Product" />
-			<Bounded title="Products">
-				{products?.map((product) => (
-					<Card key={product.id} className="hover:shadow-lg transition-shadow">
-						<CardHeader>
-							<div className="relative aspect-square max-w-cl">
-								<Link href={`/products/${product.id}`}>
-									<Image
-										src={product.images[0].src}
-										alt={product.images[0].alt}
-										width={320}
-										height={320}
-										priority
-										className="rounded-t-lg h-[320px] cursor-pointer"
-									/>
-								</Link>
-							</div>
-							<Link href={`/products/${product.id}`}>
-								<CardTitle className="text-xl font-medium cursor-pointer hover:text-primary">
-									{product.name}
-								</CardTitle>
-							</Link>
-						</CardHeader>
-						<CardContent>
-							<p className="text-lg text-muted-foreground">
-								{product.category}
-							</p>
-							<span className="text-3xl font-bold text-foreground">
-								${product.price}
-							</span>
-						</CardContent>
-						<CardFooter className="flex justify-between gap-2 items-center flex-wrap">
-							<div className="flex flex-col m-auto">
-								<Button className="mb-4">
-									<ShoppingCart className="mr-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
-									Add to Cart
-								</Button>
-								<div className="flex flex-row justify-around gap-2">
-									<Button variant="secondary" className="text-[16px]">
-										<MessageSquareMore className="mr-2 h-4 w-4" />
-										Chat with Seller
-									</Button>
-								</div>
-							</div>
-						</CardFooter>
-					</Card>
-				))}
-				<ProductsPagination />
-			</Bounded>
-		</>
-	);
-}
diff --git a/frontend/constants/testDataProduct.ts b/frontend/constants/testDataProduct.ts
index b83b5e4..e24e9aa 100644
--- a/frontend/constants/testDataProduct.ts
+++ b/frontend/constants/testDataProduct.ts
@@ -1,91 +1,91 @@
 import { Product } from "@/entities/Product";
 
 export const products: Product[] = [
-  {
-    id: 1,
-    name: "MacBook Pro 14",
-    price: 1299,
-    category: "Electronics",
-    description: "The new MacBook Pro 14-inch with the M1 Pro chip.",
-    images: [
-      { src: "/images/macbook-pro-14.webp", alt: "MacBook Pro 14" },
-      { src: "/images/macbook-pro-14.webp", alt: "MacBook Pro 14" },
-      { src: "/images/macbook-pro-14.webp", alt: "MacBook Pro 14" },
-    ],
-    starts: 4.5,
-  },
-  {
-    id: 2,
-    name: "Samsung Galaxy S24 FE",
-    price: 699,
-    category: "Electronics",
-    description: "The new Samsung Galaxy S24 FE with 5G support.",
-    images: [
-      {
-        src: "/images/samsung-galaxy-s24-fe.webp",
-        alt: "Samsung Galaxy S24 FE",
-      },
-      {
-        src: "/images/samsung-galaxy-s24-fe.webp",
-        alt: "Samsung Galaxy S24 FE",
-      },
-      {
-        src: "/images/samsung-galaxy-s24-fe.webp",
-        alt: "Samsung Galaxy S24 FE",
-      },
-    ],
-    starts: 4,
-  },
-  {
-    id: 3,
-    name: "Ergonomic Chair",
-    price: 299,
-    category: "Furniture",
-    description: "Ergonomic chair for your home office.",
-    images: [
-      { src: "/images/ergonomic-chair.jpg", alt: "Ergonomic Chair" },
-      { src: "/images/ergonomic-chair.jpg", alt: "Ergonomic Chair" },
-      { src: "/images/ergonomic-chair.jpg", alt: "Ergonomic Chair" },
-    ],
-    starts: 2,
-  },
-  {
-    id: 4,
-    name: "Coffee Maker",
-    price: 89,
-    category: "Appliances",
-    description: "Coffee maker with built-in grinder.",
-    images: [
-      { src: "/images/coffee-maker.webp", alt: "Coffee Maker" },
-      { src: "/images/coffee-maker.webp", alt: "Coffee Maker" },
-      { src: "/images/coffee-maker.webp", alt: "Coffee Maker" },
-    ],
-    starts: 1,
-  },
-  {
-    id: 5,
-    name: "Running Shoes",
-    price: 129,
-    category: "Sports",
-    description: "Running shoes for your daily workout.",
-    images: [
-      { src: "/images/running-shoes.jpg", alt: "Running Shoes" },
-      { src: "/images/running-shoes.jpg", alt: "Running Shoes" },
-      { src: "/images/running-shoes.jpg", alt: "Running Shoes" },
-    ],
-    starts: 5,
-  },
-  {
-    id: 6,
-    name: "Wireless Earbuds",
-    price: 159,
-    category: "Electronics",
-    description: "Wireless earbuds with active noise cancellation.",
-    images: [
-      { src: "/images/wireless-earbuds.jpg", alt: "Wireless Earbuds" },
-      { src: "/images/wireless-earbuds.jpg", alt: "Wireless Earbuds" },
-      { src: "/images/wireless-earbuds.jpg", alt: "Wireless Earbuds" },
-    ],
-    starts: 3,
-  },
+	{
+		id: 1,
+		name: "MacBook Pro 14",
+		price: 1299,
+		category: "Electronics",
+		description: "The new MacBook Pro 14-inch with the M1 Pro chip.",
+		images: [
+			{ src: "/images/macbook-pro-14.webp", alt: "MacBook Pro 14" },
+			{ src: "/images/macbook-pro-14.webp", alt: "MacBook Pro 14" },
+			{ src: "/images/macbook-pro-14.webp", alt: "MacBook Pro 14" },
+		],
+		starts: 4.5,
+	},
+	{
+		id: 2,
+		name: "Samsung Galaxy S24 FE",
+		price: 699,
+		category: "Electronics",
+		description: "The new Samsung Galaxy S24 FE with 5G support.",
+		images: [
+			{
+				src: "/images/samsung-galaxy-s24-fe.webp",
+				alt: "Samsung Galaxy S24 FE",
+			},
+			{
+				src: "/images/samsung-galaxy-s24-fe.webp",
+				alt: "Samsung Galaxy S24 FE",
+			},
+			{
+				src: "/images/samsung-galaxy-s24-fe.webp",
+				alt: "Samsung Galaxy S24 FE",
+			},
+		],
+		starts: 4,
+	},
+	{
+		id: 3,
+		name: "Ergonomic Chair",
+		price: 299,
+		category: "Furniture",
+		description: "Ergonomic chair for your home office.",
+		images: [
+			{ src: "/images/ergonomic-chair.jpg", alt: "Ergonomic Chair" },
+			{ src: "/images/ergonomic-chair.jpg", alt: "Ergonomic Chair" },
+			{ src: "/images/ergonomic-chair.jpg", alt: "Ergonomic Chair" },
+		],
+		starts: 2,
+	},
+	{
+		id: 4,
+		name: "Coffee Maker",
+		price: 89,
+		category: "Appliances",
+		description: "Coffee maker with built-in grinder.",
+		images: [
+			{ src: "/images/coffee-maker.webp", alt: "Coffee Maker" },
+			{ src: "/images/coffee-maker.webp", alt: "Coffee Maker" },
+			{ src: "/images/coffee-maker.webp", alt: "Coffee Maker" },
+		],
+		starts: 1,
+	},
+	{
+		id: 5,
+		name: "Running Shoes",
+		price: 129,
+		category: "Sports",
+		description: "Running shoes for your daily workout.",
+		images: [
+			{ src: "/images/running-shoes.jpg", alt: "Running Shoes" },
+			{ src: "/images/running-shoes.jpg", alt: "Running Shoes" },
+			{ src: "/images/running-shoes.jpg", alt: "Running Shoes" },
+		],
+		starts: 5,
+	},
+	{
+		id: 6,
+		name: "Wireless Earbuds",
+		price: 159,
+		category: "Electronics",
+		description: "Wireless earbuds with active noise cancellation.",
+		images: [
+			{ src: "/images/wireless-earbuds.jpg", alt: "Wireless Earbuds" },
+			{ src: "/images/wireless-earbuds.jpg", alt: "Wireless Earbuds" },
+			{ src: "/images/wireless-earbuds.jpg", alt: "Wireless Earbuds" },
+		],
+		starts: 3,
+	},
 ];
diff --git a/frontend/entities/Product.ts b/frontend/entities/Product.ts
index 00769cb..1d1a9e9 100644
--- a/frontend/entities/Product.ts
+++ b/frontend/entities/Product.ts
@@ -1,13 +1,9 @@
 export interface Product {
-  id: number;
-  images: { src: string; alt: string }[];
-  name: string;
-  price: number;
-  description: string;
-  category: string;
-  starts: number;
-}
-
-export interface ProductListProps {
-  products: Product[];
+	id: number;
+	images: { src: string; alt: string }[];
+	name: string;
+	price: number;
+	description: string;
+	category: string;
+	starts: number;
 }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f44b99b..1b78f8f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -22,7 +22,6 @@
 				"next-themes": "^0.4.4",
 				"react": "^18",
 				"react-dom": "^18",
-				"react-icons": "^5.3.0",
 				"sharp": "^0.33.5",
 				"tailwind-merge": "^2.5.4",
 				"tailwindcss-animate": "^1.0.7"
@@ -79,6 +78,74 @@
 				"@biomejs/cli-win32-x64": "1.9.4"
 			}
 		},
+		"node_modules/@biomejs/cli-darwin-arm64": {
+			"version": "1.9.4",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-1.9.4.tgz",
+			"integrity": "sha512-bFBsPWrNvkdKrNCYeAp+xo2HecOGPAy9WyNyB/jKnnedgzl4W4Hb9ZMzYNbf8dMCGmUdSavlYHiR01QaYR58cw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@biomejs/cli-darwin-x64": {
+			"version": "1.9.4",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-1.9.4.tgz",
+			"integrity": "sha512-ngYBh/+bEedqkSevPVhLP4QfVPCpb+4BBe2p7Xs32dBgs7rh9nY2AIYUL6BgLw1JVXV8GlpKmb/hNiuIxfPfZg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@biomejs/cli-linux-arm64": {
+			"version": "1.9.4",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-1.9.4.tgz",
+			"integrity": "sha512-fJIW0+LYujdjUgJJuwesP4EjIBl/N/TcOX3IvIHJQNsAqvV2CHIogsmA94BPG6jZATS4Hi+xv4SkBBQSt1N4/g==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@biomejs/cli-linux-arm64-musl": {
+			"version": "1.9.4",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-1.9.4.tgz",
+			"integrity": "sha512-v665Ct9WCRjGa8+kTr0CzApU0+XXtRgwmzIf1SeKSGAv+2scAlW6JR5PMFo6FzqqZ64Po79cKODKf3/AAmECqA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
 		"node_modules/@biomejs/cli-linux-x64": {
 			"version": "1.9.4",
 			"resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-1.9.4.tgz",
@@ -113,6 +180,50 @@
 				"node": ">=14.21.3"
 			}
 		},
+		"node_modules/@biomejs/cli-win32-arm64": {
+			"version": "1.9.4",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-1.9.4.tgz",
+			"integrity": "sha512-tlbhLk+WXZmgwoIKwHIHEBZUwxml7bRJgk0X2sPyNR3S93cdRq6XulAZRQJ17FYGGzWne0fgrXBKpl7l4M87Hg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@biomejs/cli-win32-x64": {
+			"version": "1.9.4",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-1.9.4.tgz",
+			"integrity": "sha512-8Y5wMhVIPaWe6jw2H+KlEm4wP/f7EW3810ZLmDlrEEy5KvBsb9ECEfu/kMWD484ijfQ8+nIi0giMgu9g1UAuuA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@emnapi/runtime": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz",
+			"integrity": "sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==",
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"tslib": "^2.4.0"
+			}
+		},
 		"node_modules/@eslint-community/eslint-utils": {
 			"version": "4.4.1",
 			"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz",
@@ -252,6 +363,130 @@
 			"dev": true,
 			"license": "BSD-3-Clause"
 		},
+		"node_modules/@img/sharp-darwin-arm64": {
+			"version": "0.33.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
+			"integrity": "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "Apache-2.0",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			},
+			"optionalDependencies": {
+				"@img/sharp-libvips-darwin-arm64": "1.0.4"
+			}
+		},
+		"node_modules/@img/sharp-darwin-x64": {
+			"version": "0.33.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz",
+			"integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==",
+			"cpu": [
+				"x64"
+			],
+			"license": "Apache-2.0",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			},
+			"optionalDependencies": {
+				"@img/sharp-libvips-darwin-x64": "1.0.4"
+			}
+		},
+		"node_modules/@img/sharp-libvips-darwin-arm64": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz",
+			"integrity": "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "LGPL-3.0-or-later",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
+		"node_modules/@img/sharp-libvips-darwin-x64": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz",
+			"integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==",
+			"cpu": [
+				"x64"
+			],
+			"license": "LGPL-3.0-or-later",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
+		"node_modules/@img/sharp-libvips-linux-arm": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz",
+			"integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==",
+			"cpu": [
+				"arm"
+			],
+			"license": "LGPL-3.0-or-later",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
+		"node_modules/@img/sharp-libvips-linux-arm64": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz",
+			"integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "LGPL-3.0-or-later",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
+		"node_modules/@img/sharp-libvips-linux-s390x": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz",
+			"integrity": "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==",
+			"cpu": [
+				"s390x"
+			],
+			"license": "LGPL-3.0-or-later",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
 		"node_modules/@img/sharp-libvips-linux-x64": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz",
@@ -268,6 +503,22 @@
 				"url": "https://opencollective.com/libvips"
 			}
 		},
+		"node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz",
+			"integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "LGPL-3.0-or-later",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
 		"node_modules/@img/sharp-libvips-linuxmusl-x64": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz",
@@ -284,6 +535,72 @@
 				"url": "https://opencollective.com/libvips"
 			}
 		},
+		"node_modules/@img/sharp-linux-arm": {
+			"version": "0.33.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz",
+			"integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==",
+			"cpu": [
+				"arm"
+			],
+			"license": "Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			},
+			"optionalDependencies": {
+				"@img/sharp-libvips-linux-arm": "1.0.5"
+			}
+		},
+		"node_modules/@img/sharp-linux-arm64": {
+			"version": "0.33.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz",
+			"integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			},
+			"optionalDependencies": {
+				"@img/sharp-libvips-linux-arm64": "1.0.4"
+			}
+		},
+		"node_modules/@img/sharp-linux-s390x": {
+			"version": "0.33.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz",
+			"integrity": "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==",
+			"cpu": [
+				"s390x"
+			],
+			"license": "Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			},
+			"optionalDependencies": {
+				"@img/sharp-libvips-linux-s390x": "1.0.4"
+			}
+		},
 		"node_modules/@img/sharp-linux-x64": {
 			"version": "0.33.5",
 			"resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz",
@@ -306,6 +623,28 @@
 				"@img/sharp-libvips-linux-x64": "1.0.4"
 			}
 		},
+		"node_modules/@img/sharp-linuxmusl-arm64": {
+			"version": "0.33.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz",
+			"integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			},
+			"optionalDependencies": {
+				"@img/sharp-libvips-linuxmusl-arm64": "1.0.4"
+			}
+		},
 		"node_modules/@img/sharp-linuxmusl-x64": {
 			"version": "0.33.5",
 			"resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz",
@@ -328,6 +667,63 @@
 				"@img/sharp-libvips-linuxmusl-x64": "1.0.4"
 			}
 		},
+		"node_modules/@img/sharp-wasm32": {
+			"version": "0.33.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz",
+			"integrity": "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==",
+			"cpu": [
+				"wasm32"
+			],
+			"license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+			"optional": true,
+			"dependencies": {
+				"@emnapi/runtime": "^1.2.0"
+			},
+			"engines": {
+				"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
+		"node_modules/@img/sharp-win32-ia32": {
+			"version": "0.33.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz",
+			"integrity": "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==",
+			"cpu": [
+				"ia32"
+			],
+			"license": "Apache-2.0 AND LGPL-3.0-or-later",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
+		"node_modules/@img/sharp-win32-x64": {
+			"version": "0.33.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz",
+			"integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==",
+			"cpu": [
+				"x64"
+			],
+			"license": "Apache-2.0 AND LGPL-3.0-or-later",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
 		"node_modules/@isaacs/cliui": {
 			"version": "8.0.2",
 			"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -443,6 +839,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"darwin"
@@ -458,6 +855,7 @@
 			"cpu": [
 				"x64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"darwin"
@@ -473,6 +871,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
@@ -488,6 +887,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
@@ -535,6 +935,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"win32"
@@ -550,6 +951,7 @@
 			"cpu": [
 				"ia32"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"win32"
@@ -565,6 +967,7 @@
 			"cpu": [
 				"x64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"win32"
@@ -1964,17 +2367,17 @@
 			}
 		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
-			"version": "8.18.2",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.18.2.tgz",
-			"integrity": "sha512-adig4SzPLjeQ0Tm+jvsozSGiCliI2ajeURDGHjZ2llnA+A67HihCQ+a3amtPhUakd1GlwHxSRvzOZktbEvhPPg==",
+			"version": "8.19.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.19.0.tgz",
+			"integrity": "sha512-NggSaEZCdSrFddbctrVjkVZvFC6KGfKfNK0CU7mNK/iKHGKbzT4Wmgm08dKpcZECBu9f5FypndoMyRHkdqfT1Q==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@eslint-community/regexpp": "^4.10.0",
-				"@typescript-eslint/scope-manager": "8.18.2",
-				"@typescript-eslint/type-utils": "8.18.2",
-				"@typescript-eslint/utils": "8.18.2",
-				"@typescript-eslint/visitor-keys": "8.18.2",
+				"@typescript-eslint/scope-manager": "8.19.0",
+				"@typescript-eslint/type-utils": "8.19.0",
+				"@typescript-eslint/utils": "8.19.0",
+				"@typescript-eslint/visitor-keys": "8.19.0",
 				"graphemer": "^1.4.0",
 				"ignore": "^5.3.1",
 				"natural-compare": "^1.4.0",
@@ -1994,16 +2397,16 @@
 			}
 		},
 		"node_modules/@typescript-eslint/parser": {
-			"version": "8.18.2",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.18.2.tgz",
-			"integrity": "sha512-y7tcq4StgxQD4mDr9+Jb26dZ+HTZ/SkfqpXSiqeUXZHxOUyjWDKsmwKhJ0/tApR08DgOhrFAoAhyB80/p3ViuA==",
+			"version": "8.19.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.19.0.tgz",
+			"integrity": "sha512-6M8taKyOETY1TKHp0x8ndycipTVgmp4xtg5QpEZzXxDhNvvHOJi5rLRkLr8SK3jTgD5l4fTlvBiRdfsuWydxBw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@typescript-eslint/scope-manager": "8.18.2",
-				"@typescript-eslint/types": "8.18.2",
-				"@typescript-eslint/typescript-estree": "8.18.2",
-				"@typescript-eslint/visitor-keys": "8.18.2",
+				"@typescript-eslint/scope-manager": "8.19.0",
+				"@typescript-eslint/types": "8.19.0",
+				"@typescript-eslint/typescript-estree": "8.19.0",
+				"@typescript-eslint/visitor-keys": "8.19.0",
 				"debug": "^4.3.4"
 			},
 			"engines": {
@@ -2019,14 +2422,14 @@
 			}
 		},
 		"node_modules/@typescript-eslint/scope-manager": {
-			"version": "8.18.2",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.18.2.tgz",
-			"integrity": "sha512-YJFSfbd0CJjy14r/EvWapYgV4R5CHzptssoag2M7y3Ra7XNta6GPAJPPP5KGB9j14viYXyrzRO5GkX7CRfo8/g==",
+			"version": "8.19.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.19.0.tgz",
+			"integrity": "sha512-hkoJiKQS3GQ13TSMEiuNmSCvhz7ujyqD1x3ShbaETATHrck+9RaDdUbt+osXaUuns9OFwrDTTrjtwsU8gJyyRA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@typescript-eslint/types": "8.18.2",
-				"@typescript-eslint/visitor-keys": "8.18.2"
+				"@typescript-eslint/types": "8.19.0",
+				"@typescript-eslint/visitor-keys": "8.19.0"
 			},
 			"engines": {
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2037,14 +2440,14 @@
 			}
 		},
 		"node_modules/@typescript-eslint/type-utils": {
-			"version": "8.18.2",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.18.2.tgz",
-			"integrity": "sha512-AB/Wr1Lz31bzHfGm/jgbFR0VB0SML/hd2P1yxzKDM48YmP7vbyJNHRExUE/wZsQj2wUCvbWH8poNHFuxLqCTnA==",
+			"version": "8.19.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.19.0.tgz",
+			"integrity": "sha512-TZs0I0OSbd5Aza4qAMpp1cdCYVnER94IziudE3JU328YUHgWu9gwiwhag+fuLeJ2LkWLXI+F/182TbG+JaBdTg==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@typescript-eslint/typescript-estree": "8.18.2",
-				"@typescript-eslint/utils": "8.18.2",
+				"@typescript-eslint/typescript-estree": "8.19.0",
+				"@typescript-eslint/utils": "8.19.0",
 				"debug": "^4.3.4",
 				"ts-api-utils": "^1.3.0"
 			},
@@ -2061,9 +2464,9 @@
 			}
 		},
 		"node_modules/@typescript-eslint/types": {
-			"version": "8.18.2",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.18.2.tgz",
-			"integrity": "sha512-Z/zblEPp8cIvmEn6+tPDIHUbRu/0z5lqZ+NvolL5SvXWT5rQy7+Nch83M0++XzO0XrWRFWECgOAyE8bsJTl1GQ==",
+			"version": "8.19.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.19.0.tgz",
+			"integrity": "sha512-8XQ4Ss7G9WX8oaYvD4OOLCjIQYgRQxO+qCiR2V2s2GxI9AUpo7riNwo6jDhKtTcaJjT8PY54j2Yb33kWtSJsmA==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
@@ -2075,14 +2478,14 @@
 			}
 		},
 		"node_modules/@typescript-eslint/typescript-estree": {
-			"version": "8.18.2",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.18.2.tgz",
-			"integrity": "sha512-WXAVt595HjpmlfH4crSdM/1bcsqh+1weFRWIa9XMTx/XHZ9TCKMcr725tLYqWOgzKdeDrqVHxFotrvWcEsk2Tg==",
+			"version": "8.19.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.19.0.tgz",
+			"integrity": "sha512-WW9PpDaLIFW9LCbucMSdYUuGeFUz1OkWYS/5fwZwTA+l2RwlWFdJvReQqMUMBw4yJWJOfqd7An9uwut2Oj8sLw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@typescript-eslint/types": "8.18.2",
-				"@typescript-eslint/visitor-keys": "8.18.2",
+				"@typescript-eslint/types": "8.19.0",
+				"@typescript-eslint/visitor-keys": "8.19.0",
 				"debug": "^4.3.4",
 				"fast-glob": "^3.3.2",
 				"is-glob": "^4.0.3",
@@ -2128,16 +2531,16 @@
 			}
 		},
 		"node_modules/@typescript-eslint/utils": {
-			"version": "8.18.2",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.18.2.tgz",
-			"integrity": "sha512-Cr4A0H7DtVIPkauj4sTSXVl+VBWewE9/o40KcF3TV9aqDEOWoXF3/+oRXNby3DYzZeCATvbdksYsGZzplwnK/Q==",
+			"version": "8.19.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.19.0.tgz",
+			"integrity": "sha512-PTBG+0oEMPH9jCZlfg07LCB2nYI0I317yyvXGfxnvGvw4SHIOuRnQ3kadyyXY6tGdChusIHIbM5zfIbp4M6tCg==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.4.0",
-				"@typescript-eslint/scope-manager": "8.18.2",
-				"@typescript-eslint/types": "8.18.2",
-				"@typescript-eslint/typescript-estree": "8.18.2"
+				"@typescript-eslint/scope-manager": "8.19.0",
+				"@typescript-eslint/types": "8.19.0",
+				"@typescript-eslint/typescript-estree": "8.19.0"
 			},
 			"engines": {
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2152,13 +2555,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/visitor-keys": {
-			"version": "8.18.2",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.18.2.tgz",
-			"integrity": "sha512-zORcwn4C3trOWiCqFQP1x6G3xTRyZ1LYydnj51cRnJ6hxBlr/cKPckk+PKPUw/fXmvfKTcw7bwY3w9izgx5jZw==",
+			"version": "8.19.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.19.0.tgz",
+			"integrity": "sha512-mCFtBbFBJDCNCWUl5y6sZSCHXw1DEFEk3c/M3nRK2a4XUB8StGFtmcEMizdjKuBzB6e/smJAAWYug3VrdLMr1w==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@typescript-eslint/types": "8.18.2",
+				"@typescript-eslint/types": "8.19.0",
 				"eslint-visitor-keys": "^4.2.0"
 			},
 			"engines": {
@@ -3056,9 +3459,9 @@
 			}
 		},
 		"node_modules/es-abstract": {
-			"version": "1.23.7",
-			"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.7.tgz",
-			"integrity": "sha512-OygGC8kIcDhXX+6yAZRGLqwi2CmEXCbLQixeGUgYeR+Qwlppqmo7DIDr8XibtEBZp+fJcoYpoatp5qwLMEdcqQ==",
+			"version": "1.23.8",
+			"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.8.tgz",
+			"integrity": "sha512-lfab8IzDn6EpI1ibZakcgS6WsfEBiB+43cuJo+wgylx1xKXf+Sp+YR3vFuQwC/u3sxYwV8Cxe3B0DpVUu/WiJQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -3097,8 +3500,10 @@
 				"object-inspect": "^1.13.3",
 				"object-keys": "^1.1.1",
 				"object.assign": "^4.1.7",
+				"own-keys": "^1.0.0",
 				"regexp.prototype.flags": "^1.5.3",
 				"safe-array-concat": "^1.1.3",
+				"safe-push-apply": "^1.0.0",
 				"safe-regex-test": "^1.1.0",
 				"string.prototype.trim": "^1.2.10",
 				"string.prototype.trimend": "^1.0.9",
@@ -3503,29 +3908,29 @@
 			}
 		},
 		"node_modules/eslint-plugin-react": {
-			"version": "7.37.2",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.2.tgz",
-			"integrity": "sha512-EsTAnj9fLVr/GZleBLFbj/sSuXeWmp1eXIN60ceYnZveqEaUCyW4X+Vh4WTdUhCkW4xutXYqTXCUSyqD4rB75w==",
+			"version": "7.37.3",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.3.tgz",
+			"integrity": "sha512-DomWuTQPFYZwF/7c9W2fkKkStqZmBd3uugfqBYLdkZ3Hii23WzZuOLUskGxB8qkSKqftxEeGL1TB2kMhrce0jA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"array-includes": "^3.1.8",
 				"array.prototype.findlast": "^1.2.5",
-				"array.prototype.flatmap": "^1.3.2",
+				"array.prototype.flatmap": "^1.3.3",
 				"array.prototype.tosorted": "^1.1.4",
 				"doctrine": "^2.1.0",
-				"es-iterator-helpers": "^1.1.0",
+				"es-iterator-helpers": "^1.2.1",
 				"estraverse": "^5.3.0",
 				"hasown": "^2.0.2",
 				"jsx-ast-utils": "^2.4.1 || ^3.0.0",
 				"minimatch": "^3.1.2",
 				"object.entries": "^1.1.8",
 				"object.fromentries": "^2.0.8",
-				"object.values": "^1.2.0",
+				"object.values": "^1.2.1",
 				"prop-types": "^15.8.1",
 				"resolve": "^2.0.0-next.5",
 				"semver": "^6.3.1",
-				"string.prototype.matchall": "^4.0.11",
+				"string.prototype.matchall": "^4.0.12",
 				"string.prototype.repeat": "^1.0.0"
 			},
 			"engines": {
@@ -3838,6 +4243,20 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/fsevents": {
+			"version": "2.3.3",
+			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+			"hasInstallScript": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+			}
+		},
 		"node_modules/function-bind": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -5239,6 +5658,24 @@
 				"node": ">= 0.8.0"
 			}
 		},
+		"node_modules/own-keys": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+			"integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"get-intrinsic": "^1.2.6",
+				"object-keys": "^1.1.1",
+				"safe-push-apply": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/p-limit": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -5601,15 +6038,6 @@
 				"react": "^18.3.1"
 			}
 		},
-		"node_modules/react-icons": {
-			"version": "5.4.0",
-			"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz",
-			"integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==",
-			"license": "MIT",
-			"peerDependencies": {
-				"react": "*"
-			}
-		},
 		"node_modules/react-is": {
 			"version": "16.13.1",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -5881,6 +6309,23 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/safe-push-apply": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+			"integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"isarray": "^2.0.5"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/safe-regex-test": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 956e5db..a24994c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,7 +23,6 @@
 		"next-themes": "^0.4.4",
 		"react": "^18",
 		"react-dom": "^18",
-		"react-icons": "^5.3.0",
 		"sharp": "^0.33.5",
 		"tailwind-merge": "^2.5.4",
 		"tailwindcss-animate": "^1.0.7"
diff --git a/frontend/public/images/costarica.svg b/frontend/public/images/costa-rica.svg
similarity index 100%
rename from frontend/public/images/costarica.svg
rename to frontend/public/images/costa-rica.svg
diff --git a/frontend/utils/utils.hook.ts b/frontend/utils/utils.hook.ts
index 44b9d96..71807c4 100644
--- a/frontend/utils/utils.hook.ts
+++ b/frontend/utils/utils.hook.ts
@@ -1,15 +1,15 @@
 export const useUtils = () => {
-  const renderStars = (rating: number) => {
-    const filledStars = Math.floor(rating);
-    const halfStars = rating % 1 >= 0.5 ? 1 : 0;
-    const emptyStars = 5 - (filledStars + halfStars);
+	const renderStars = (rating: number) => {
+		const filledStars = Math.floor(rating);
+		const halfStars = rating % 1 >= 0.5 ? 1 : 0;
+		const emptyStars = 5 - (filledStars + halfStars);
 
-    return [
-      ...Array(filledStars).fill("filled"),
-      ...Array(halfStars).fill("half"),
-      ...Array(emptyStars).fill("empty"),
-    ];
-  };
+		return [
+			...Array(filledStars).fill("filled"),
+			...Array(halfStars).fill("half"),
+			...Array(emptyStars).fill("empty"),
+		];
+	};
 
-  return { renderStars };
+	return { renderStars };
 };
diff --git a/package.json b/package.json
index c392d04..8ffd387 100644
--- a/package.json
+++ b/package.json
@@ -15,9 +15,5 @@
   "license": "ISC",
   "devDependencies": {
     "lefthook": "^1.8.2"
-  },
-  "dependencies": {
-    "@shadcn/ui": "^0.0.4",
-    "lucide-react": "^0.468.0"
   }
 }