diff --git a/src/components/FileManager/index.js b/src/components/FileManager/index.js
index a3ce1f5..521e48b 100644
--- a/src/components/FileManager/index.js
+++ b/src/components/FileManager/index.js
@@ -29,7 +29,7 @@ const FileManager = ({ buttons }) => {
             <div className="self-end">
               <SearchBox
                 className={
-                  "border-[#EEEEEE] focus:border-gray-200 focus:ring-gray-200 placeholder-gray-300"
+                  "border-surfaceBorder focus:border-gray-200 focus:ring-gray-200 placeholder-gray-300"
                 }
                 searchIcon="images/FileManagergray-search-icon.svg"
               />
@@ -38,13 +38,15 @@ const FileManager = ({ buttons }) => {
           {/* cardHolder */}
           <Playlist />
         </div>
-        <div className="bg-white">
+        <div className="">
           <div className="flex flex-col px-7 py-5">
             {/* pageTitleSubTitle & Buttons */}
             <div className="flex flex-row item-center justify-between">
               {/* ? pageTitle */}
               <div className="flex-1">
-                <TitleSubtitle titleBorderClassName={""} />
+                <TitleSubtitle
+                  titleBorderClassName={"w-1 h-5 ml-1 bg-primaryText"}
+                />
               </div>
               {/* buttons */}
               <div className="flex flex-row item-center justify-between self-center gap-2">
@@ -62,7 +64,7 @@ const FileManager = ({ buttons }) => {
             {/* folderLists */}
             <Folderlists />
             {/* ? pageTitle */}
-            <div className="mt-5 rounded-lg shadow-md w-full bg-[#FBFBFB]">
+            <div className="mt-5 rounded shadow w-full bg-background">
               {/* <TitleSubtitle /> */}
               <BasicTable />
             </div>
@@ -93,12 +95,12 @@ FileManager.defaultProps = {
   buttons: [
     {
       name: "رابط کاربری",
-      className: "bg-[#4E85E5] text-white",
+      className: "bg-primary hover:bg-primaryDark text-white",
     },
     {
       name: "فرانت اند",
       className:
-        "bg-transparent border border-[#4E85E5] text-[#4E85E5] font-sansbold",
+        "bg-transparent border border-primary text-primary hover:bg-primary hover:text-white font-bold",
     },
   ],
 };
diff --git a/src/components/MiniComponents/DropDown/index.js b/src/components/MiniComponents/DropDown/index.js
index 1481b58..26023dc 100644
--- a/src/components/MiniComponents/DropDown/index.js
+++ b/src/components/MiniComponents/DropDown/index.js
@@ -17,13 +17,13 @@ export const DropDown = ({}) => {
       </button>
       <div
         id="dropdown"
-        className="hidden z-10 text-xs list-none bg-[#65A9FF]  rounded divide-y divide-gray-100 shadow"
+        className="hidden z-10 text-xs list-none bg-primary  rounded divide-y divide-surfaceBorder shadow"
       >
         <ul className="" aria-labelledby="dropdownButton">
           <li>
             <a
               href="#"
-              className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded"
+              className="block p-3 text-xs text-primaryText hover:bg-primary hover:rounded"
             >
               ایتم شماره1
             </a>
@@ -31,7 +31,7 @@ export const DropDown = ({}) => {
           <li>
             <a
               href="#"
-              className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded"
+              className="block p-3 text-xs text-primaryText hover:bg-primary hover:rounded"
             >
               ایتم شماره1
             </a>
@@ -39,7 +39,7 @@ export const DropDown = ({}) => {
           <li>
             <a
               href="#"
-              className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded"
+              className="block p-3 text-xs text-primaryText hover:bg-primary hover:rounded"
             >
               ایتم شماره1
             </a>
diff --git a/src/components/MiniComponents/Folderlist/index.js b/src/components/MiniComponents/Folderlist/index.js
index 0e30e13..2ceb9b9 100644
--- a/src/components/MiniComponents/Folderlist/index.js
+++ b/src/components/MiniComponents/Folderlist/index.js
@@ -32,7 +32,7 @@ const Folderlists = ({ items }) => {
     >
       {items.map((item, index) => (
         <div
-          className="flex flex-col min-w-[330px] border-2 border-[#EEEEEE] bg-[#FBFBFB] rounded-lg p-4"
+          className="flex flex-col min-w-[330px] border-2 border-surfaceBorder bg-surface rounded p-4"
           onClick={(e) => {
             if (window.isDown) return e.preventDefault();
             ///do here
@@ -65,13 +65,13 @@ const Folderlists = ({ items }) => {
               ))} */}
             </div>
           </div>
-          <p className="text-xs font-sansbold mt-3 text-[#132F52]">
+          <p className="text-xs font-bold mt-3 text-primaryText">
             {item.title}
           </p>
-          <p className="text-xs mt-2 text-[#132F52]">
+          <p className="text-xs mt-2 text-primaryText">
             {item.memory} <span className="">گیگابایت</span>
           </p>
-          <p className="text-xs mt-1 text-left text-[#132F52]">
+          <p className="text-xs mt-1 text-left text-primaryText">
             {item.fileNum} <span className="">فایل</span>
           </p>
         </div>