diff --git a/package.json b/package.json
index 4cc3d38..796328d 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,8 @@
     "react-router-dom": "^6.8.2",
     "react-router-hash-link": "^2.4.3",
     "recharts": "^2.5.0",
-    "sort-by": "^0.0.2"
+    "sort-by": "^0.0.2",
+    "tailwindcss-filters": "^3.0.0"
   },
   "devDependencies": {
     "@types/aos": "^3.0.4",
diff --git a/src/i18n/en/home/roadmap.json b/src/i18n/en/home/roadmap.json
index c67c38f..49c7a2d 100644
--- a/src/i18n/en/home/roadmap.json
+++ b/src/i18n/en/home/roadmap.json
@@ -31,5 +31,41 @@
         "CEOAI Bot Creator and integration with AI."
       ]
     }
-  ]
+  ],
+  "Q2-2023-Header": "Q2 2023",
+  "Q2-2023-Title1": "Form teams",
+  "Q2-2023-Title2": "Ideas & concept",
+
+  "T7-2023-Header": "July 2023",
+  "T7-2023-Title1": "Complete POC ",
+  "T7-2023-Title2": "Launch Hospital Contract Testnet V1",
+  "T7-2023-Title3": "Publish Blue Paper in International Conference",
+  "T7-2023-Title4": "Pitch Deck Release",
+
+  "T8-2023-Header": "Aug 2023",
+  "T8-2023-Title1": "Participate world finalist of WSEEC",
+  "T8-2023-Title2": "Publish White Paper",
+  "T8-2023-Title3": "Alpha Launching",
+  "T8-2023-Title4": "Design Marketplace",
+
+  "T9&10-2023-Header": "Sep & Oct 2023",
+  "T9&10-2023-Title1": "Launch Marketplace Testnet",
+  "T9&10-2023-Title2": "Partnership expansion with clinics",
+  "T9&10-2023-Title3": "Fund raising (Angel)",
+  "T9&10-2023-Title4": "Community growth",
+  "T9&10-2023-Title5": "ERC-20 Token Airdrop Campaign",
+
+  "T11-2023-Header": "Nov 2023",
+  "T11-2023-Title1": "Launch Marketplace V2 Testnet",
+  "T11-2023-Title2": "IDO and Token Listing",
+  "T11-2023-Title3": "Staking",
+  "T11-2023-Title4": "Customize products for hospitals and clinics",
+
+  "T12-2023-Header": "Dec 2023",
+  "T12-2023-Title1": "Beta Launching",
+  "T12-2023-Title2": "Partnership expansion with hospitals",
+  "T12-2023-Title3": "Co-branding Partnerships",
+
+  "T1-2024-Header": "Jan 2024",
+  "T1-2024-Title1": "Launch Mainnet V1"
 }
diff --git a/src/i18n/vi/home/roadmap.json b/src/i18n/vi/home/roadmap.json
index 588db6c..493d323 100644
--- a/src/i18n/vi/home/roadmap.json
+++ b/src/i18n/vi/home/roadmap.json
@@ -31,5 +31,41 @@
         "CEOAI Bot Creator và tích hợp với AI."
       ]
     }
-  ]
+  ],
+  "Q2-2023-Header": "Quý 2 - 2023",
+  "Q2-2023-Title1": "Hình thành nhóm",
+  "Q2-2023-Title2": "Ý tưởng và khái niệm",
+
+  "T7-2023-Header": "7 - 2023",
+  "T7-2023-Title1": "Hoàn thành POC",
+  "T7-2023-Title2": "Phát hành Hospital Contract Testnet V1",
+  "T7-2023-Title3": "Xuất bản Blue Paper tại Hội nghị Quốc tế",
+  "T7-2023-Title4": "Phát hành Pitch Deck (Bài thuyết trình) ",
+
+  "T8-2023-Header": "8 - 2023",
+  "T8-2023-Title1": "Tham gia vòng chung kết thế giới WSEEC",
+  "T8-2023-Title2": "Xuất bản White Paper (Báo cáo trắng)",
+  "T8-2023-Title3": "Ra mắt Alpha (Phiên bản thử nghiệm đầu tiên)",
+  "T8-2023-Title4": "Thiết kế Thị trường",
+
+  "T9&10-2023-Header": "9 & 10 - 2023",
+  "T9&10-2023-Title1": "Phát hành Marketplace Testnet ",
+  "T9&10-2023-Title2": "Mở rộng đối tác với các phòng khám",
+  "T9&10-2023-Title3": "Gây quỹ (Angel)",
+  "T9&10-2023-Title4": "Mở rộng cộng đồng",
+  "T9&10-2023-Title5": "Chiến dịch Airdrop ERC-20 Token ",
+
+  "T11-2023-Header": "11 - 2023",
+  "T11-2023-Title1": "Phát hành Marketplace V2 Testnet",
+  "T11-2023-Title2": "IDO và Đưa Token lên sàn",
+  "T11-2023-Title3": "Staking (Tham gia giao dịch đặt cọc)",
+  "T11-2023-Title4": "Tùy chỉnh sản phẩm cho bệnh viện và phòng khám",
+
+  "T12-2023-Header": "12 - 2023",
+  "T12-2023-Title1": "Ra mắt Beta (Phiên bản thử nghiệm cuối cùng)",
+  "T12-2023-Title2": "Mở rộng đối tác với các bệnh viện",
+  "T12-2023-Title3": "Đối tác cùng thương hiệu ",
+
+  "T1-2024-Header": "1 - 2024",
+  "T1-2024-Title1": "Ra mắt Mainnet V1"
 }
diff --git a/src/shared/components/css/Roadmap.css b/src/shared/components/css/Roadmap.css
index 81ffd6e..02ba0ab 100644
--- a/src/shared/components/css/Roadmap.css
+++ b/src/shared/components/css/Roadmap.css
@@ -132,3 +132,19 @@
     top: 30%;
   }
 }
+
+/* .image-container {
+  position: relative;
+}
+
+.image-container::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(6, 182, 212, 1);
+  mix-blend-mode: screen; 
+  opacity: 0.5; 
+} */
diff --git a/src/shared/components/home/QnASection.tsx b/src/shared/components/home/QnASection.tsx
index dd54634..8e5a851 100644
--- a/src/shared/components/home/QnASection.tsx
+++ b/src/shared/components/home/QnASection.tsx
@@ -186,7 +186,7 @@ const QnASection = (props: Props) => {
       className="container flex flex-col lg:flex-row w-[94%] animate-[5s_ease] min-h-[400px] mb-[100px] lg:justify-center mx-auto py-2 text-white "
       id="qna"
     >
-      <div className="w-full lg:w-[50%] min-h-[100px] ">
+      <div className="w-full lg:w-[50%] min-h-[100px] pb-10 ">
         <h1 className="text-4xl font-bold text-center hover:text-orange-400">
           FAQS
         </h1>
@@ -203,7 +203,7 @@ const QnASection = (props: Props) => {
           ...styles,
         }}
       >
-        <ul className="flex flex-col items-center gap-4 w-[75%] mx-auto md:w-[85%] lg:w-full">
+        <ul className="flex flex-col items-center gap-4 w-[90%] mx-auto md:w-[85%] lg:w-full">
           {qnaData.map((item: any, index: any) => {
             return (
               <li
diff --git a/src/shared/components/home/RoadMap.tsx b/src/shared/components/home/RoadMap.tsx
index 8af2a2f..1171a6e 100644
--- a/src/shared/components/home/RoadMap.tsx
+++ b/src/shared/components/home/RoadMap.tsx
@@ -47,9 +47,9 @@ const RoadMap = (props: Props) => {
   });
   const styles1 = useSpring({
     opacity: isVisible ? 1 : 0,
-    transform: isVisible ? "scaleY(1)" : "scaleY(0)",
+    transform: isVisible ? "translateX(0%)" : "translateX(-100%)",
     config: {
-      duration: 500,
+      duration: 700,
     },
   });
 
@@ -58,240 +58,385 @@ const RoadMap = (props: Props) => {
       className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll my-20 w-[94%] "
       id="roadmap"
     >
-      <h1 className="text-4xl font-bold text-center hover:text-orange-400 pb-20 relative">
+      <h1 className="text-4xl font-bold text-center hover:text-orange-400 pb-8 relative">
         Road Map
       </h1>
-      <div className="max-tablet:flex max-tablet:flex-wrap max-tablet:justify-between max-tablet:pl-4 gap-5  max-tablet:h-full relative tablet:h-[716px] desktop:h-[895px]">
-        <div
-          className="hidden tablet:block absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]  tablet:w-[880px] tablet:h-[280px] bg-cover bg-no-repeat bg-center desktop:w-[1020px] desktop:h-[325px]"
-          style={{ backgroundImage: `url(${backgroundRoadMap})` }}
-        ></div>
-        <div className=" max-tablet:w-[40%] tablet:absolute tablet:top-[360px] tablet:left-[0px] desktop:top-[460px] desktop:left-[40px]">
+      <animated.div
+        style={{
+          ...styles1,
+        }}
+      >
+        <div className="flex flex-wrap justify-between sm:px-8 sm:grid sm:grid-cols-2  grid-flow-row  gap-5  max-tablet:h-full relative tablet:h-[716px] desktop:h-[895px]">
           <div
-            className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
-            style={{ backgroundImage: `url(${boderItem})` }}
-          >
-            <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
-              Q2 2023
-            </span>
-          </div>
-          <div className="flex flex-col gap-3">
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Form teams
+            className="image-container hidden  tablet:block absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]  tablet:w-[880px] tablet:h-[280px] bg-cover bg-no-repeat bg-center desktop:w-[1026px] desktop:h-[327px]"
+            style={{
+              backgroundImage: `url(${backgroundRoadMap})`,
+              filter: "hue-rotate(183deg)",
+            }}
+          ></div>
+          <div className=" tablet:absolute tablet:top-[360px] tablet:left-[0px] desktop:top-[460px] desktop:left-[00px]">
+            <div
+              className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
+              style={{
+                backgroundImage: `url(${boderItem})`,
+                filter: "hue-rotate(180deg)",
+              }}
+            >
+              <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
+                {t("Q2-2023-Header")}
               </span>
             </div>
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Ideas & concept
-              </span>
+            <div className="flex flex-col gap-3">
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("Q2-2023-Title1")}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("Q2-2023-Title2")}
+                </span>
+              </div>
             </div>
           </div>
-        </div>
-        <div className=" max-tablet:w-[40%] tablet:absolute tablet:top-[40px] tablet:left-[60px] desktop:top-[120px] desktop:left-[100px]">
-          <div
-            className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
-            style={{ backgroundImage: `url(${boderItem})` }}
-          >
-            <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
-              July 2023
-            </span>
-          </div>
-          <div className="flex flex-col gap-3 max-w-[280px]">
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Complete POC{" "}
-              </span>
-            </div>
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Launch Hospital Contract Testnet V1
-              </span>
-            </div>
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Publish Blue Paper in International Conference
+          <div className="   tablet:absolute tablet:top-[20px] tablet:left-[60px] desktop:top-[100px] desktop:left-[100px]">
+            <div
+              className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
+              style={{
+                backgroundImage: `url(${boderItem})`,
+                filter: "hue-rotate(180deg)",
+              }}
+            >
+              <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
+                {t("T7-2023-Header")}
               </span>
             </div>
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Pitch Deck Release
-              </span>
+            <div className="flex flex-col gap-3 max-w-[280px]">
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("T7-2023-Title1")}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("T7-2023-Title2")}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("T7-2023-Title3")}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("T7-2023-Title4")}
+                </span>
+              </div>
             </div>
           </div>
-        </div>
-        <div className=" max-tablet:w-[40%] tablet:absolute tablet:top-[530px] tablet:left-[140px] desktop:top-[620px] desktop:left-[240px] ">
-          <div
-            className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
-            style={{ backgroundImage: `url(${boderItem})` }}
-          >
-            <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
-              Aug 2023
-            </span>
-          </div>
-          <div className="flex flex-col gap-3">
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Participate world finalist of WSEEC
-              </span>
-            </div>
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Publish White Paper
-              </span>
-            </div>
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Alpha Launching
+          <div className="   tablet:absolute tablet:top-[530px] tablet:left-[100px] desktop:top-[620px] desktop:left-[140px] ">
+            <div
+              className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
+              style={{
+                backgroundImage: `url(${boderItem})`,
+                filter: "hue-rotate(180deg)",
+              }}
+            >
+              <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
+                {t("T8-2023-Header")}
               </span>
             </div>
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Design Marketplace
-              </span>
+            <div className="flex flex-col gap-3">
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("T8-2023-Title1")}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("T8-2023-Title2")}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("T8-2023-Title3")}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("T8-2023-Title4")}
+                </span>
+              </div>
             </div>
           </div>
-        </div>
-        <div className=" max-tablet:w-[40%] tablet:absolute tablet:top-[340px] tablet:left-[340px] tablet1:left-[400px] desktop:top-[424px] desktop:left-[444px] ">
-          <div
-            className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
-            style={{ backgroundImage: `url(${boderItem})` }}
-          >
-            <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
-              Sep & Oct 2023
-            </span>
-          </div>
-          <div className="flex flex-col gap-3">
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Launch Marketplace Testnet
-              </span>
-            </div>
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Partnership expansion with clinics
-              </span>
-            </div>
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Fund raising (Angel)
-              </span>
-            </div>
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Community growth
+          <div className="   tablet:absolute tablet:top-[340px] tablet:left-[340px] tablet1:left-[400px] desktop:top-[424px] desktop:left-[420px] ">
+            <div
+              className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
+              style={{
+                backgroundImage: `url(${boderItem})`,
+                filter: "hue-rotate(180deg)",
+              }}
+            >
+              <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
+                {t("T9&10-2023-Header")}
               </span>
             </div>
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                ERC-20 Token Airdrop Campaign
-              </span>
+            <div className="flex flex-col gap-3">
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("T9&10-2023-Title1")}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("T9&10-2023-Title2")}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("T9&10-2023-Title3")}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("T9&10-2023-Title4")}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("T9&10-2023-Title5")}
+                </span>
+              </div>
             </div>
           </div>
-        </div>
 
-        <div className=" max-tablet:w-[40%] tablet:absolute tablet:top-[20px] tablet:left-[362px] desktop:top-[90px] desktop:left-[500px] ">
-          <div
-            className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
-            style={{ backgroundImage: `url(${boderItem})` }}
-          >
-            <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
-              Nov 2023
-            </span>
-          </div>
-          <div className="flex flex-col gap-3 max-w-[280px] desktop:max-w-[350px]">
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Launch Marketplace V2 Testnet
-              </span>
-            </div>
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                IDO and Token Listing
+          <div className="   tablet:absolute tablet:top-[20px] tablet:left-[362px] desktop:top-[80px] desktop:left-[500px] ">
+            <div
+              className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
+              style={{
+                backgroundImage: `url(${boderItem})`,
+                filter: "hue-rotate(180deg)",
+              }}
+            >
+              <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
+                {t("T11-2023-Header")}
               </span>
             </div>
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Staking
-              </span>
-            </div>
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Customize products for hospitals and clinics
-              </span>
+            <div className="flex flex-col gap-3 max-w-[280px] desktop:max-w-[350px]">
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("T11-2023-Title1")}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("T11-2023-Title2")}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("T11-2023-Title3")}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("T11-2023-Title4")}
+                </span>
+              </div>
             </div>
           </div>
-        </div>
 
-        <div className=" max-tablet:w-[40%] tablet:absolute tablet:bottom-[130px] tablet:right-[20px] desktop:right-[80px] desktop:bottom-[160px]  ">
-          <div
-            className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
-            style={{ backgroundImage: `url(${boderItem})` }}
-          >
-            <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
-              Dec 2023
-            </span>
-          </div>
-          <div className="flex flex-col gap-3 max-w-[280px]">
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Beta Launching
+          <div className="   tablet:absolute tablet:bottom-[110px] tablet:right-[10px] desktop:right-[60px] desktop:bottom-[140px]  ">
+            <div
+              className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
+              style={{
+                backgroundImage: `url(${boderItem})`,
+                filter: "hue-rotate(180deg)",
+              }}
+            >
+              <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
+                {t("T12-2023-Header")}
               </span>
             </div>
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Partnership expansion with hospitals
-              </span>
-            </div>
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Co-branding Partnerships
-              </span>
+            <div className="flex flex-col gap-3 max-w-[280px]">
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("T12-2023-Title1")}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("T12-2023-Title2")}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("T12-2023-Title3")}
+                </span>
+              </div>
             </div>
           </div>
-        </div>
 
-        <div className=" max-tablet:w-[40%] tablet:absolute tablet:top-[80px] tablet:right-[0px] desktop:right-[20px] desktop:top-[140px]">
-          <div
-            className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
-            style={{ backgroundImage: `url(${boderItem})` }}
-          >
-            <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
-              Jan 2024
-            </span>
-          </div>
-          <div className="flex flex-col gap-3 max-w-[280px]">
-            <div className="flex items-center gap-2">
-              <img className="w-[14px] h-[12px]" src={dotOrange} alt="" />
-              <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
-                Launch Mainnet V1
+          <div className="   tablet:absolute tablet:top-[80px] tablet:right-[0px] desktop:right-[20px] desktop:top-[160px]">
+            <div
+              className="w-max bg-no-repeat px-8 py-[16px] bg-center bg-contain"
+              style={{
+                backgroundImage: `url(${boderItem})`,
+                filter: "hue-rotate(180deg)",
+              }}
+            >
+              <span className="m-1 max-tablet:text-2xl  tablet:text-[18px] desktop:text-[20px] font-bold">
+                {t("T1-2024-Header")}
               </span>
             </div>
+            <div className="flex flex-col gap-3 max-w-[280px]">
+              <div className="flex items-center gap-2">
+                <img
+                  className="w-[14px] h-[12px]"
+                  src={dotOrange}
+                  style={{ filter: "hue-rotate(180deg)" }}
+                  alt=""
+                />
+                <span className="text-[18px] tablet:text-[14px] desktop:text-[18px]">
+                  {t("T1-2024-Title1")}
+                </span>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
+      </animated.div>
       {/* <animated.div
         id="timeline"
         style={{ ...styles }}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index af50554..c6ab80f 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -34,6 +34,7 @@ module.exports = {
     },
   },
   plugins: [
+    require("tailwindcss-filters"),
     {
       "postcss-import": {},
       tailwindcss: {},
diff --git a/yarn.lock b/yarn.lock
index 075c78b..37a578c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -841,7 +841,7 @@ lodash.throttle@^4.0.1:
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
   integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
 
-lodash@^4.17.19, lodash@^4.17.21:
+lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -1254,6 +1254,13 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+tailwindcss-filters@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/tailwindcss-filters/-/tailwindcss-filters-3.0.0.tgz#d5d40ca018a54b1aa2bdc57aeb6677529c24c8d8"
+  integrity sha512-xhortqs8fSp9id17EnneYhmruA5DfU6K0zvN6/mgDlEXKaHthjXlR74Ta+4lrX5Lp7tp6YigB09WO0TOWn7VEQ==
+  dependencies:
+    lodash "^4.17.15"
+
 tailwindcss@^3.2.7:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"