diff --git a/src/Views/Home/Sidebar/index.js b/src/Views/Home/Sidebar/index.js
index 00f672e..906dec2 100644
--- a/src/Views/Home/Sidebar/index.js
+++ b/src/Views/Home/Sidebar/index.js
@@ -18,7 +18,7 @@ function Sidebar({ list, setActive }) {
           .map((material, index) => (
             <li
               key={index}
-              className="w-full h-12 flex items-center p-2 odd:bg-gray-300 even:bg-slate-400 odd:text-gray-600 even:text-white text-center font-sansbold cursor-pointer"
+              className="w-full h-12 flex items-center p-2 odd:bg-gray-300 even:bg-slate-400 odd:text-gray-600 even:text-[#1f232a] text-center font-sansbold cursor-pointer"
               onClick={() => setActive(material)}
             >
               {material.name}
diff --git a/src/components/AnimatedProgressBar/index.js b/src/components/MiniComponents/AnimatedProgressBar/index.js
similarity index 91%
rename from src/components/AnimatedProgressBar/index.js
rename to src/components/MiniComponents/AnimatedProgressBar/index.js
index 54f6d38..be0133d 100644
--- a/src/components/AnimatedProgressBar/index.js
+++ b/src/components/MiniComponents/AnimatedProgressBar/index.js
@@ -12,7 +12,7 @@ const AnimatedProgressBar = ({ rangeWidth, parentBg, childBg }) => {
   return (
     <div className={`flex-row w-full rounded-full h-2 ${parentBg}`}>
       <div
-        className={`h-full rounded-full dark:bg-gray-300 duration-500 ${childBg}`}
+        className={`h-full rounded-full bg-surface duration-500 ${childBg}`}
         style={{ width: progressBar ? rangeWidth : 0 }}
       ></div>
     </div>
diff --git a/src/components/MiniComponents/index.js b/src/components/MiniComponents/index.js
index 8e69547..d8fbd95 100644
--- a/src/components/MiniComponents/index.js
+++ b/src/components/MiniComponents/index.js
@@ -12,6 +12,7 @@ import DropDown from "./DropDown";
 import IconText from "./IconText";
 import SelectYear from "./SelectYear";
 import OfferSection from "./OfferSection";
+import AnimatedProgressBar from "./AnimatedProgressBar";
 
 function MiniComponents() {
   const list = {
@@ -27,6 +28,7 @@ function MiniComponents() {
     10: <IconText />,
     11: <SelectYear />,
     12: <OfferSection />,
+    13: <AnimatedProgressBar />,
   };
   const [type, setType] = useState(1);
 
diff --git a/src/components/ProductSalesAmount/ProductSalesDesign2/index.js b/src/components/ProductSalesAmount/ProductSalesDesign2/index.js
index 0e2c466..cb6feb2 100644
--- a/src/components/ProductSalesAmount/ProductSalesDesign2/index.js
+++ b/src/components/ProductSalesAmount/ProductSalesDesign2/index.js
@@ -1,5 +1,5 @@
 import React from "react";
-import AnimatedProgressBar from "../../AnimatedProgressBar";
+import AnimatedProgressBar from "../../MiniComponents/AnimatedProgressBar";
 import TitleSubtitle from "../../MiniComponents/TitleSubtitle";
 
 const ProductSalesDesign2 = ({ incomes }) => {