diff --git a/src/components/CourseList/index.js b/src/components/CourseList/index.js
index b338d4d..9ad496d 100644
--- a/src/components/CourseList/index.js
+++ b/src/components/CourseList/index.js
@@ -4,23 +4,23 @@ const CourseChapter = ({ courseTitle, lessonName, grade, chapters }) => {
   const [selectedLesson, setSelectedLesson] = useState(null);
 
   return (
-    <div className="max-h-[444px] relative p-4 bg-[#196EC033] rounded overflow-y-auto scrollYDesign">
+    <div className="max-h-[444px] relative p-4 bg-surface border border-surfaceBorder rounded overflow-y-auto scrollYDesign">
       {/* top */}
       <div className="flex flex-row items-center justify-between">
-        <h2 className="text-blue-800 text-base">{courseTitle}</h2>
+        <h2 className="text-primaryText text-base">{courseTitle}</h2>
         <div className="flex flex-row-reverse items-center divide-x">
-          <span className="text-blue-800 text-sm px-2">{lessonName}</span>
-          <span className="text-blue-800 text-sm px-2">{grade}</span>
+          <span className="text-primaryText text-sm px-2">{lessonName}</span>
+          <span className="text-primaryText text-sm px-2">{grade}</span>
         </div>
       </div>
       {/* divider */}
-      <div className="border-b border-blue-300 my-5"></div>
+      <div className="border-b border-surfaceBorder my-5"></div>
       {/* course title */}
       {chapters.map((chapter, index) => (
         <div className="flex flex-col mt-4" key={index}>
-          <div className="bg-blue-600 rounded-sm p-4 flex flex-row items-center justify-between">
-            <p className="text-sm text-white">{chapter.title}</p>
-            <span className="text-sm text-white">{chapter.duration}</span>
+          <div className="bg-primary rounded p-4 flex flex-row items-center justify-between">
+            <p className="text-sm text-primaryText">{chapter.title}</p>
+            <span className="text-sm text-primaryText">{chapter.duration}</span>
           </div>
           {/* course lessons */}
           {chapter.lessons.map((lesson, i) => (
@@ -35,22 +35,22 @@ const CourseChapter = ({ courseTitle, lessonName, grade, chapters }) => {
               >
                 <div
                   className={`w-4 h-4 flex justify-center items-center rounded-full 
-                ${selectedLesson === lesson ? "bg-red-600" : "bg-blue-600"},
-                ${lesson.passed ? "bg-red-600" : "bg-blue-600"}
+                ${selectedLesson === lesson ? "bg-error" : "bg-success"},
+                ${lesson.passed ? "bg-error" : "bg-success"}
               `}
                 ></div>
                 {Number(i) !== chapter.lessons.length - 1 && (
                   <span
                     className={`h-[65px] border-r-2 border-dotted  ${
-                      lesson.passed ? "border-green-400" : "border-purple-400"
+                      lesson.passed ? "border-success" : "border-error"
                     }`}
                   ></span>
                 )}
               </div>
               {/* left div content  */}
               <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" : ""}`}
+                className={`group flex-1 flex flex-col mt-2 bg-white hover:bg-primary border border-primary rounded cursor-pointer transition duration-200 ease-in-out   
+              ${selectedLesson === lesson ? "bg-primary" : ""}`}
                 // onClick={() => setSelectedLesson(lesson)}
                 onClick={() =>
                   setSelectedLesson(selectedLesson === lesson ? null : lesson)
@@ -60,13 +60,13 @@ const CourseChapter = ({ courseTitle, lessonName, grade, chapters }) => {
                 <div className="flex flex-row items-center justify-between p-2">
                   <p
                     className={`text-sm text-blue-500 group-hover:text-white
-                  ${selectedLesson === lesson ? "text-red-600" : ""}`}
+                  ${selectedLesson === lesson ? "primaryText" : ""}`}
                   >
                     {lesson.title}
                   </p>
                   <span
                     className={`text-xs text-blue-500 group-hover:text-white border-r border-blue-200 pr-1
-                ${selectedLesson === lesson ? "text-red-600" : ""}`}
+                ${selectedLesson === lesson ? "primaryText" : ""}`}
                   >
                     {lesson.duration}
                   </span>
@@ -74,13 +74,13 @@ const CourseChapter = ({ courseTitle, lessonName, grade, chapters }) => {
                 {/* divider */}
                 <div
                   className={`border-t border-blue-600 group-hover:border-white ${
-                    selectedLesson === lesson ? "border-red-600" : ""
+                    selectedLesson === lesson ? "primaryText" : ""
                   }`}
                 ></div>
                 {/* bottom */}
                 <span
                   className={`text-xs text-center text-blue-500 group-hover:text-white p-2
-              ${selectedLesson === lesson ? "text-red-600" : ""}`}
+              ${selectedLesson === lesson ? "primaryText" : ""}`}
                 >
                   {lesson.play}
                 </span>
diff --git a/src/components/CurrentDateTime/CurrentDateShamsi/index.js b/src/components/CurrentDateTime/CurrentDateShamsi/index.js
index 60a3d4d..68df75e 100644
--- a/src/components/CurrentDateTime/CurrentDateShamsi/index.js
+++ b/src/components/CurrentDateTime/CurrentDateShamsi/index.js
@@ -15,8 +15,8 @@ const CurrentDateShamsi = ({ color, fontSize }) => {
   const weekday = date.toLocaleDateString("fa-IR", option2);
 
   return (
-    <p className={`${color} ${fontSize}`}>
-      <span className="text-[#0F0543]">{weekday}</span> {todayDate}
+    <p className={`text-primaryDark ${fontSize}`}>
+      <span className="text-primaryText">{weekday}</span> {todayDate}
     </p>
   );
 };
@@ -24,6 +24,5 @@ const CurrentDateShamsi = ({ color, fontSize }) => {
 export default CurrentDateShamsi;
 
 CurrentDateShamsi.defaultProps = {
-  color: "text-red-600",
   fontSize: "text-lg",
 };
diff --git a/src/components/CurrentDateTime/CurrentTime/index.js b/src/components/CurrentDateTime/CurrentTime/index.js
index 1881fe7..2561a79 100644
--- a/src/components/CurrentDateTime/CurrentTime/index.js
+++ b/src/components/CurrentDateTime/CurrentTime/index.js
@@ -1,18 +1,17 @@
 import React from "react";
 
-const CurrentTime = ({ color, fontSize }) => {
+const CurrentTime = ({ fontSize }) => {
   const today = new Date(),
     time =
       today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
   {
     console.log(time);
   }
-  return <p className={`${color} ${fontSize}`}>{time}</p>;
+  return <p className={`text-primaryText ${fontSize}`}>{time}</p>;
 };
 
 export default CurrentTime;
 
 CurrentTime.defaultProps = {
-  color: "text-red-600",
   fontSize: "text-lg",
 };
diff --git a/src/components/CurrentDateTime/index.js b/src/components/CurrentDateTime/index.js
index 4a26595..9d834f4 100644
--- a/src/components/CurrentDateTime/index.js
+++ b/src/components/CurrentDateTime/index.js
@@ -15,7 +15,7 @@ function CurrentDateTime() {
   return (
     <div className="w-full flex flex-col items-center">
       <select
-        className="w-20 bg-gray-200 mb-10"
+        className="w-20 m-10 bg-surface border border-surfaceBorder"
         onChange={(e) => setType(e.target.value)}
       >
         {Object.keys(list).map((option, index) => (
diff --git a/src/components/DivideX/DistributedData/index.js b/src/components/DivideX/DistributedData/index.js
index c56d1c8..18363a3 100644
--- a/src/components/DivideX/DistributedData/index.js
+++ b/src/components/DivideX/DistributedData/index.js
@@ -2,25 +2,25 @@ import React from "react";
 
 const DistributedData = ({ items }) => {
   return (
-    <div className="w-[750px] flex flex-col items-center gap-y-4 mx-auto bg-white shadow-sm rounded-lg pt-3">
+    <div className="w-[750px] flex flex-col items-center gap-y-4 mx-auto bg-surface border border-surfaceBorder shadow-sm rounded pt-3">
       {items.map((row, index) => (
         <div
-          className={`flex flex-row items-center justify-around w-full border-[#9DACD344] pb-3 ${
+          className={`flex flex-row items-center justify-around w-full border-surfaceBorder pb-3 ${
             index + 1 < items.length ? "border-b" : ""
           }`}
           key={index}
         >
           {row.map((item, index) => (
             <div
-              className={`flex items-center font-sansbold text-xs border-[#9DACD344] flex-1 justify-around ${
+              className={`flex items-center font-bold text-xs border-surfaceBorder flex-1 justify-around ${
                 index + 1 < row.length ? "border-l" : ""
               } ${item?.className || ""}`}
             >
-              {item.name && <p className="text-[#0F0543]">{item.name}</p>}
+              {item.name && <p className="text-primary">{item.name}</p>}
               {item.number && (
                 <span
                   className={` ${
-                    item.remaining ? "text-[#E16524]" : "text-[#2483E1]"
+                    item.remaining ? "text-[#E16524]" : "text-primaryText"
                   }`}
                 >
                   {item.number}
diff --git a/src/components/DivideX/ReligiousTimes/index.js b/src/components/DivideX/ReligiousTimes/index.js
index c3ddfa6..bd663db 100644
--- a/src/components/DivideX/ReligiousTimes/index.js
+++ b/src/components/DivideX/ReligiousTimes/index.js
@@ -5,14 +5,14 @@ const ReligiousTimes = ({ hours }) => {
     <div className="w-[550px] flex flex-row items-center justify-around bg-white shadow-sm rounded-lg py-3.5 px-0.5 mt-10 mr-10">
       {hours.map((hour, index) => (
         <div className="flex flex-row items-center" key={index}>
-          <span className="text-xs text-[#0F0543] font-sansbold">
+          <span className="text-xs text-primaryText font-bold">
             {hour.partOfDay}
           </span>
-          <span className="text-xs text-[#2483E1] font-sansbold mr-1">
+          <span className="text-xs text-primary font-bold mr-1">
             {hour.time}
           </span>
           {Number(index) !== hours.length - 1 && (
-            <div className="h-[20px] w-0.5 bg-[#9DACD344] mx-2"></div>
+            <div className="h-[20px] w-0.5 bg-surfaceBorder mx-2"></div>
           )}
         </div>
       ))}
diff --git a/src/components/Features/index.js b/src/components/Features/index.js
index 3aaafc3..8878b9a 100644
--- a/src/components/Features/index.js
+++ b/src/components/Features/index.js
@@ -3,8 +3,8 @@ import Button from "../ButtonDesign/Button";
 
 const Features = ({ featureTitle, features }) => {
   return (
-    <section className="bg-white border-2 border-gray-400 rounded">
-      <h2 className="mr-7 my-5 text-lg font-sansbold text-[#246E8A]">
+    <section className="bg-surface border border-surfaceBorder rounded">
+      <h2 className="mr-7 my-5 text-lg font-bold text-secondary">
         {featureTitle}
       </h2>
       <div className="w-full flex flex-wrap justify-around items-center">
@@ -22,7 +22,7 @@ const Features = ({ featureTitle, features }) => {
               <div className="flex items-center">
                 <strong className="text-base">{feature.title}</strong>
                 {feature.status && (
-                  <span className="mr-4 text-xs px-2 py-1 rounded-lg bg-blue-100">
+                  <span className="mr-4 text-xs px-2 py-1 rounded bg-primary">
                     {feature.status}
                   </span>
                 )}
@@ -35,7 +35,7 @@ const Features = ({ featureTitle, features }) => {
         ))}
       </div>
       {/* footer */}
-      <div className="flex flex-col sm:flex-row items-center justify-between py-10 px-7 bg-blue-100 ">
+      <div className="flex flex-col sm:flex-row items-center justify-between py-10 px-7 bg-primary ">
         <div>
           <h2 className="text-base">هزاران درصد تحفیف</h2>
           <p className="mt-4 text-sm">
@@ -46,8 +46,8 @@ const Features = ({ featureTitle, features }) => {
         <Button
           text={"مشاهده امکانات"}
           className="mt-5 sm:mt-0 px-7 py-3 bg-white
-          hover:bg-blue-600 text-sm sm:text-base text-blue-600 hover:text-white rounded-md border-2
-          border-blue-600 cursor-pointer 
+          hover:bg-primaryDark text-sm sm:text-base text-primaryDark hover:text-white rounded border-2
+          border-primaryDark cursor-pointer 
           "
         />
       </div>