diff --git a/src/components/ProductFilter/VerticalExpandableProductFilter/arrow-top.png b/public/images/arrow-top.png
similarity index 100%
rename from src/components/ProductFilter/VerticalExpandableProductFilter/arrow-top.png
rename to public/images/arrow-top.png
diff --git a/src/components/Features/box.svg b/public/images/box.svg
similarity index 100%
rename from src/components/Features/box.svg
rename to public/images/box.svg
diff --git a/src/components/Features/cake.svg b/public/images/cake.svg
similarity index 100%
rename from src/components/Features/cake.svg
rename to public/images/cake.svg
diff --git a/src/components/Features/color-palette.svg b/public/images/color-palette.svg
similarity index 100%
rename from src/components/Features/color-palette.svg
rename to public/images/color-palette.svg
diff --git a/src/components/Features/crown-icon.svg b/public/images/crown-icon.svg
similarity index 100%
rename from src/components/Features/crown-icon.svg
rename to public/images/crown-icon.svg
diff --git a/src/components/Features/hat.svg b/public/images/hat.svg
similarity index 100%
rename from src/components/Features/hat.svg
rename to public/images/hat.svg
diff --git a/src/components/Features/plane.svg b/public/images/plane.svg
similarity index 100%
rename from src/components/Features/plane.svg
rename to public/images/plane.svg
diff --git a/src/components/ProductFilter/VerticalExpandableProductFilter/search.png b/public/images/search.png
similarity index 100%
rename from src/components/ProductFilter/VerticalExpandableProductFilter/search.png
rename to public/images/search.png
diff --git a/src/components/Features/index.js b/src/components/Features/index.js
index f37f3f4..53d8267 100644
--- a/src/components/Features/index.js
+++ b/src/components/Features/index.js
@@ -1,39 +1,30 @@
 import React from "react";
-import Tag from "../Tag";
-
-import crown from "./crown-icon.svg";
-import box from "./box.svg";
-import cake from "./cake.svg";
-import colorPalette from "./color-palette.svg";
-import hat from "./hat.svg";
-import plane from "./plane.svg";
 
 const Features = ({ features }) => {
   return (
     <section className="bg-white border-2 border-gray-400 rounded m-7">
-      {/* top */}
       <h2 className="text-lg font-sansbold text-productTitle mr-7 my-5">
         امکانات و ویژگی ها
       </h2>
       <div className="w-full flex flex-wrap justify-around items-center">
         {features.map((feature, index) => (
           <div className="flex flex-row w-2/5 p-5" key={index}>
-            {/* 1 */}
             <div
               className="rounded p-2 ml-5 flex items-center"
               style={{
                 backgroundColor: feature.iconBgColor,
-                height: "fit",
+                height: "fit-content",
               }}
             >
               <img src={feature.icon} alt="" className="w-10 h-10" />
             </div>
-            {/* 2 */}
             <div className="flex flex-col">
               <div className="flex items-center">
-                <p className={`text-base`}>{feature.title}</p>
+                <strong className={`text-base font-medium`}>
+                  {feature.title}
+                </strong>
                 <span
-                  className={`mr-4 text-sm px-2 py-1 rounded-lg bg-blue-100`}
+                  className={`mr-4 text-xs px-2 py-1 rounded-lg bg-blue-100`}
                 >
                   {feature.status}
                 </span>
@@ -45,13 +36,10 @@ const Features = ({ features }) => {
           </div>
         ))}
       </div>
-      {/* footer */}
-      <div className="flex flex-col sm:flex-row items-center justify-between py-10 px-7 bg-rangeBgColor ">
+      <div className="flex flex-col sm:flex-row items-center justify-between py-10 px-7 bg-blue-100 ">
         <div>
-          <h2 className="font-semibold text-base text-productTitle">
-            هزاران درصد تحفیف
-          </h2>
-          <p className="mt-4 text-sm text-productTitle">
+          <h2 className="font-semibold text-base">هزاران درصد تحفیف</h2>
+          <p className="mt-4 text-sm">
             با وارد کردن کد بهار نگو تابستون از تخفیف 10 درصدی ویژه برخوردار
             شوید
           </p>
@@ -61,7 +49,7 @@ const Features = ({ features }) => {
           bg-white
           hover:bg-blue-600
           border-2
-          border-blue-600"
+          border-blue-600 cursor-pointer"
         >
           مشاهده امکانات
         </button>
@@ -75,7 +63,7 @@ export default Features;
 Features.defaultProps = {
   features: [
     {
-      icon: crown,
+      icon: "images/crown-icon.svg",
       iconBgColor: "#FFFDC4",
       title: "قابلیت امتیاز دهی",
       status: "جدید",
@@ -83,7 +71,7 @@ Features.defaultProps = {
         "قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.",
     },
     {
-      icon: box,
+      icon: "images/box.svg",
       iconBgColor: "#CEC4FF",
       title: "قابلیت انتخاب رنگ دلخواه",
       status: "جدید",
@@ -91,7 +79,7 @@ Features.defaultProps = {
         "قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.",
     },
     {
-      icon: cake,
+      icon: "images/cake.svg",
       iconBgColor: "#C4FFF7",
       title: "یادآوری جشن تولد",
       status: "جدید",
@@ -99,7 +87,7 @@ Features.defaultProps = {
         "قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.",
     },
     {
-      icon: colorPalette,
+      icon: "images/color-palette.svg",
       iconBgColor: "#FFC4EB",
       title: "انتخاب سطح و پایه تحصیلی",
       status: "جدید",
@@ -107,7 +95,7 @@ Features.defaultProps = {
         "قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.",
     },
     {
-      icon: hat,
+      icon: "images/hat.svg",
       iconBgColor: "#C4FFE2",
       title: "حالت پرواز",
       status: "جدید",
@@ -115,7 +103,7 @@ Features.defaultProps = {
         "قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.",
     },
     {
-      icon: plane,
+      icon: "images/plane.svg",
       iconBgColor: "#E5FFC4",
       title: "نحوه ارسال جعبه خاطرات",
       status: "جدید",
diff --git a/src/components/ProductFilter/VerticalExpandableProductFilter/index.js b/src/components/ProductFilter/VerticalExpandableProductFilter/index.js
index c440406..6a52640 100644
--- a/src/components/ProductFilter/VerticalExpandableProductFilter/index.js
+++ b/src/components/ProductFilter/VerticalExpandableProductFilter/index.js
@@ -1,11 +1,7 @@
 import React, { useState, useEffect } from "react";
 import _ from "lodash";
-
 import Checkbox from "../../Checkbox";
 
-import arrowIcon from "./arrow-top.png";
-import searchIcon from "./search.png";
-
 const langDetector = (lang = "fa", option1, option2) => {
   return lang === "fa" ? option1 : option2;
 };
@@ -49,7 +45,7 @@ export default function VerticalExpandableProductFilter(props) {
             type="submit"
             className="p-1 focus:outline-none focus:shadow-outline"
           >
-            <img src={searchIcon} className="w-5 h-5" alt="" />
+            <img src="images/search.png" className="w-5 h-5" alt="" />
           </button>
         </span>
       </form>
@@ -58,7 +54,7 @@ export default function VerticalExpandableProductFilter(props) {
           (item1, i) => (
             <li
               key={i}
-              className="hover:bg-gray-100 px-3 flex flex-row items-center justify-between py-2"
+              className="hover:bg-gray-100 px-3 flex flex-row items-center justify-between py-4"
             >
               <div className="flex flex-row items-center">
                 <Checkbox />
@@ -68,7 +64,7 @@ export default function VerticalExpandableProductFilter(props) {
               </div>
               {item1.subList?.length > 0 && (
                 <img
-                  src={arrowIcon}
+                  src="images/arrow-top.png"
                   alt=""
                   className={_.join(
                     [
diff --git a/src/redux/data.js b/src/redux/data.js
index 7d9a3e8..c858bfb 100644
--- a/src/redux/data.js
+++ b/src/redux/data.js
@@ -14,6 +14,7 @@ import CommentDesign from "../components/CommentDesign";
 import CounterDesign from "../components/CounterDesign";
 import CourseList from "../components/CourseList";
 import ProductFilter from "../components/ProductFilter";
+import Features from "../components/Features";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -268,6 +269,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Features",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Features",
+      component: <Features />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",