diff --git a/src/Components/ProductFilters.jsx b/src/Components/ProductFilters.jsx
index 0f3262a..45a317d 100644
--- a/src/Components/ProductFilters.jsx
+++ b/src/Components/ProductFilters.jsx
@@ -6,7 +6,21 @@ function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 
-export default function ProductFilters({ filterOptions, setFilterOptions, sortOptions, setSortOptions }) {
+export default function ProductFilters({ filterOptions, setFilterOptions, sortOptions, setSortOptions, products, setProducts }) {
+
+  // define a new sort function 
+  const customSort=( criteria )=>{
+
+    const productsCopy = [...products]
+
+    if( criteria == "Price")
+      productsCopy.sort(function(a, b){return a.price - b.price});
+    else if ( criteria == "Newest" )
+      productsCopy.sort(function(a, b){return Number(a.releaseDate) - Number(b.releaseDate) });
+      
+    return productsCopy;
+  };
+
   return (
     <Disclosure
       as="section"
@@ -110,6 +124,24 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                         <button
                           onClick={() => {
                             // TODO
+
+                            // 1 bold the current sort option
+                            const new_sortOptions = [];
+                            sortOptions.forEach(element => {
+                              if (element.name == option.name)
+                                {
+                                  new_sortOptions.push({name: element.name, current:true});
+                                  
+                                }
+                              else
+                                new_sortOptions.push({name: element.name, current: false });
+                            });
+                            setSortOptions(new_sortOptions);
+
+                            // 2 sort accordingly
+                            setProducts(customSort(option.name));
+
+
                           }}
                           className={classNames(
                             option.current ? "font-medium text-gray-900" : "text-gray-500",
diff --git a/src/Components/ProductTable.jsx b/src/Components/ProductTable.jsx
index ea76621..05b44eb 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -47,8 +47,8 @@ export default function ProductTable({ cart, updateCart }) {
     <div className="bg-white">
       <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
         <h2 className="sr-only">Products</h2>
-        <ProductFilters {...{ filterOptions, setFilterOptions, sortOptions, setSortOptions }} />
-
+        {/* pass two more props {products, setProducts} to the Component  */}
+        <ProductFilters {...{ filterOptions, setFilterOptions, sortOptions, setSortOptions, products, setProducts }} />  
         <div className="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
           {products.map((product) => (
             <a key={product.id} className="group">