diff --git a/src/components/CourseList/index.js b/src/components/CourseList/index.js
index bc2e9ce..b338d4d 100644
--- a/src/components/CourseList/index.js
+++ b/src/components/CourseList/index.js
@@ -51,7 +51,10 @@ const CourseChapter = ({ courseTitle, lessonName, grade, chapters }) => {
               <div
                 className={`group flex-1 flex flex-col mt-2 bg-white hover:bg-blue-600 border border-blue-600 rounded-md cursor-pointer transition duration-200 ease-in-out   
               ${selectedLesson === lesson ? "bg-blue-600" : ""}`}
-                onClick={() => setSelectedLesson(lesson)}
+                // onClick={() => setSelectedLesson(lesson)}
+                onClick={() =>
+                  setSelectedLesson(selectedLesson === lesson ? null : lesson)
+                }
               >
                 {/* top */}
                 <div className="flex flex-row items-center justify-between p-2">
diff --git a/src/components/Features/index.js b/src/components/Features/index.js
index 51a78ca..3aaafc3 100644
--- a/src/components/Features/index.js
+++ b/src/components/Features/index.js
@@ -11,10 +11,10 @@ const Features = ({ featureTitle, features }) => {
         {features.map((feature, index) => (
           <div className="w-1/2 flex flex-row p-5" key={index}>
             <div
-              className={`flex items-center ml-5 p-2 rounded h-fit`}
-              style={{
-                backgroundColor: feature.iconBgColor,
-              }}
+              className={`flex items-center ml-5 p-2 rounded h-fit ${feature.iconBgColor}`}
+              // style={{
+              //   backgroundColor: feature.iconBgColor,
+              // }}
             >
               <img src={feature.icon} alt="icon" className="w-10" />
             </div>
@@ -63,7 +63,7 @@ Features.defaultProps = {
   features: [
     {
       icon: "images/crown-icon.svg",
-      iconBgColor: "#FFFDC4",
+      iconBgColor: "bg-[#FFFDC4]",
       title: "قابلیت امتیاز دهی",
       status: "جدید",
       content:
@@ -71,7 +71,7 @@ Features.defaultProps = {
     },
     {
       icon: "images/box.svg",
-      iconBgColor: "#CEC4FF",
+      iconBgColor: "bg-[#CEC4FF]",
       title: "قابلیت انتخاب رنگ دلخواه",
       status: "جدید",
       content:
@@ -79,7 +79,7 @@ Features.defaultProps = {
     },
     {
       icon: "images/cake.svg",
-      iconBgColor: "#C4FFF7",
+      iconBgColor: "bg-[#C4FFF7]",
       title: "یادآوری جشن تولد",
       status: "جدید",
       content:
@@ -87,7 +87,7 @@ Features.defaultProps = {
     },
     {
       icon: "images/color-palette.svg",
-      iconBgColor: "#FFC4EB",
+      iconBgColor: "bg-[#FFC4EB]",
       title: "انتخاب سطح و پایه تحصیلی",
       status: "جدید",
       content:
@@ -95,7 +95,7 @@ Features.defaultProps = {
     },
     {
       icon: "images/hat.svg",
-      iconBgColor: "#C4FFE2",
+      iconBgColor: "bg-[#C4FFE2]",
       title: "حالت پرواز",
       status: "جدید",
       content:
@@ -103,7 +103,7 @@ Features.defaultProps = {
     },
     {
       icon: "images/plane.svg",
-      iconBgColor: "#E5FFC4",
+      iconBgColor: "bg-[#E5FFC4]",
       title: "نحوه ارسال جعبه خاطرات",
       status: null,
       content: