diff --git a/frontend/app/components/marketplace/filters.tsx b/frontend/app/components/marketplace/filters.tsx
index 9fdd799..e7723f3 100644
--- a/frontend/app/components/marketplace/filters.tsx
+++ b/frontend/app/components/marketplace/filters.tsx
@@ -1,14 +1,23 @@
 "use client";
 
-import { Checkbox, Slider } from "@radix-ui/themes";
-import { useState } from "react";
+import { Checkbox } from "../ui/checkbox";
+import { Slider } from "../ui/slider";
 
-import { SidebarContent, SidebarHeader } from "@/app/components/ui/sidebar";
-
-const Filters = () => {
-	const [priceRange, setPriceRange] = useState<[number, number]>([0, 1500]);
-	const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+interface FiltersProps {
+	priceRange: [number, number];
+	setPriceRange: (value: [number, number]) => void;
+	selectedCategories: string[];
+	setSelectedCategories: (
+		value: string[] | ((prev: string[]) => string[]),
+	) => void;
+}
 
+const Filters: React.FC<FiltersProps> = ({
+	priceRange,
+	setPriceRange,
+	selectedCategories,
+	setSelectedCategories,
+}) => {
 	const handleCategoryChange = (category: string) => {
 		setSelectedCategories((prev) =>
 			prev.includes(category)
@@ -19,49 +28,41 @@ const Filters = () => {
 
 	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>
+			<h2 className="text-xl font-semibold mb-4">Filters</h2>
+			<div className="space-y-8">
+				<div>
+					<h3 className="text-lg font-medium">Price Range</h3>
+					<Slider
+						min={0}
+						max={1500}
+						step={10}
+						value={priceRange}
+						onValueChange={setPriceRange}
+					/>
+					<div className="flex justify-between mt-2">
+						<span>${priceRange[0]}</span>
+						<span>${priceRange[1]}</span>
 					</div>
 				</div>
-			</SidebarContent>
+
+				<div>
+					<h3 className="text-lg font-medium">Categories</h3>
+					{["Electronics", "Furniture", "Appliances", "Sports"].map(
+						(category) => (
+							<div key={category} className="flex items-center space-x-3">
+								<Checkbox
+									id={category}
+									checked={selectedCategories.includes(category)}
+									onCheckedChange={() => handleCategoryChange(category)}
+								/>
+								<label htmlFor={category} className="text-sm cursor-pointer">
+									{category}
+								</label>
+							</div>
+						),
+					)}
+				</div>
+			</div>
 		</>
 	);
 };
diff --git a/frontend/app/marketplace/[productId]/page.tsx b/frontend/app/marketplace/[productId]/page.tsx
index 7801153..118ee87 100644
--- a/frontend/app/marketplace/[productId]/page.tsx
+++ b/frontend/app/marketplace/[productId]/page.tsx
@@ -1,6 +1,6 @@
 import { Share2, ShoppingCart, Star } from "lucide-react";
 
-import Images from "@/app/components/products/images";
+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";
diff --git a/frontend/app/marketplace/page.tsx b/frontend/app/marketplace/page.tsx
index 9525234..2db7a54 100644
--- a/frontend/app/marketplace/page.tsx
+++ b/frontend/app/marketplace/page.tsx
@@ -7,6 +7,7 @@ import { useState } from "react";
 
 import AddProductModal from "@/app/components/marketplace/add-product-modal";
 import BreadcrumbNavigation from "@/app/components/marketplace/breadcrumb-navigation";
+import Filters from "@/app/components/marketplace/filters";
 import { ProductsPagination } from "@/app/components/marketplace/products-pagination";
 import { Button } from "@/app/components/ui/button";
 import {
@@ -20,15 +21,16 @@ 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]
-	// );
+	const [priceRange, setPriceRange] = useState<[number, number]>([0, 1500]);
+	const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+
+	const filteredProducts = products.filter(
+		(product) =>
+			product.price >= priceRange[0] &&
+			product.price <= priceRange[1] &&
+			(selectedCategories.length === 0 ||
+				selectedCategories.includes(product.category)),
+	);
 
 	return (
 		<main className="container p-6 mx-auto">
@@ -41,50 +43,64 @@ export default function ProductList() {
 					</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">
+			<section className="flex flex-col md:flex-row gap-6 mt-6">
+				{/* Filters */}
+				<aside className="w-full md:w-1/4">
+					<Filters
+						priceRange={priceRange}
+						setPriceRange={setPriceRange}
+						selectedCategories={selectedCategories}
+						setSelectedCategories={setSelectedCategories}
+					/>
+				</aside>
+
+				{/* Product List */}
+				<section className="grid flex-grow grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4">
+					{filteredProducts.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}`}>
-									<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"
-									/>
+									<CardTitle className="text-xl font-medium cursor-pointer hover:underline pt-0">
+										{product.name}
+									</CardTitle>
 								</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>
-				))}
+							</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>
 			</section>
+
 			<ProductsPagination />
 			<AddProductModal isOpen={showModal} onClose={() => setShowModal(false)} />
 		</main>