diff --git a/package-lock.json b/package-lock.json
index 2fac88d..9a847a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@react-spring/parallax": "^9.7.1",
         "@react-spring/web": "^9.7.1",
         "animate.css": "^4.1.1",
+        "aos": "^2.3.4",
         "chart.js": "^3.9.1",
         "chartjs-plugin-datalabels": "^2.2.0",
         "i18next": "^22.4.14",
@@ -30,6 +31,7 @@
         "sort-by": "^0.0.2"
       },
       "devDependencies": {
+        "@types/aos": "^3.0.4",
         "@types/react": "^18.0.27",
         "@types/react-copy-to-clipboard": "^5.0.4",
         "@types/react-dom": "^18.0.10",
@@ -607,6 +609,12 @@
         "node": ">=14"
       }
     },
+    "node_modules/@types/aos": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aos/-/aos-3.0.4.tgz",
+      "integrity": "sha512-mna6Jd6bdK1NpwarLopGvXOgUoCfj0470IwLxuVOFDElTGI0JTd7xSGQ0AjbAEnHErC/b3fA9t2uB3IXVKmckA==",
+      "dev": true
+    },
     "node_modules/@types/d3-array": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.4.tgz",
@@ -790,6 +798,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/aos": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz",
+      "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==",
+      "dependencies": {
+        "classlist-polyfill": "^1.0.3",
+        "lodash.debounce": "^4.0.6",
+        "lodash.throttle": "^4.0.1"
+      }
+    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -963,6 +981,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/classlist-polyfill": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
+      "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ=="
+    },
     "node_modules/classnames": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
@@ -1474,6 +1497,16 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
diff --git a/package.json b/package.json
index ea60d08..4cc3d38 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@react-spring/parallax": "^9.7.1",
     "@react-spring/web": "^9.7.1",
     "animate.css": "^4.1.1",
+    "aos": "^2.3.4",
     "chart.js": "^3.9.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "i18next": "^22.4.14",
@@ -31,6 +32,7 @@
     "sort-by": "^0.0.2"
   },
   "devDependencies": {
+    "@types/aos": "^3.0.4",
     "@types/react": "^18.0.27",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.0.10",
diff --git a/src/i18n/en/home/roadmap.json b/src/i18n/en/home/roadmap.json
index abfb529..c67c38f 100644
--- a/src/i18n/en/home/roadmap.json
+++ b/src/i18n/en/home/roadmap.json
@@ -30,28 +30,6 @@
         "10 Million MarketCap Milestone",
         "CEOAI Bot Creator and integration with AI."
       ]
-    },
-    {
-      "phase": "Phase 4",
-      "listTitle": [
-        "Swap Development and Launch",
-        "Merchandise Launch",
-        "Tier 1 CEX Listings",
-        "CEO Bridge to ETH, Arbitrium and Polygon",
-        "10 Million MarketCap Milestone",
-        "CEOAI Bot Creator and integration with AI."
-      ]
-    },
-    {
-      "phase": "Phase 5",
-      "listTitle": [
-        "Swap Development and Launch",
-        "Merchandise Launch",
-        "Tier 1 CEX Listings",
-        "CEO Bridge to ETH, Arbitrium and Polygon",
-        "10 Million MarketCap Milestone",
-        "CEOAI Bot Creator and integration with AI."
-      ]
     }
   ]
 }
diff --git a/src/i18n/vi/home/qna.json b/src/i18n/vi/home/qna.json
index 1b583dd..d6152ee 100644
--- a/src/i18n/vi/home/qna.json
+++ b/src/i18n/vi/home/qna.json
@@ -46,44 +46,6 @@
           "id": 2,
           "bgcolor": "bg-[#6666FF]",
           "content": "SGPT Token cũng sẽ được sử dụng để thưởng cho các thành viên có đóng góp tích cực cho hệ thống."
-        },
-        {
-          "id": 3,
-          "bgcolor": "bg-[#3366FF]",
-          "content": "ádasffj12k"
-        },
-        {
-          "id": 4,
-          "bgcolor": "bg-[#0066FF]",
-          "content": "ádasffj123k"
-        }
-      ]
-    },
-    {
-      "id": 4,
-      "title": "Điều gì tiếp theo cho Fight Out?",
-      "bgcolor": "bg-[#CC66FF]",
-
-      "contents": [
-        {
-          "id": 1,
-          "bgcolor": "bg-[#9966FF]",
-          "content": "Chúng tôi có kế hoạch lớn cho Fight Out sau khi bán trước! Phát triển nền tảng Fight Out và metaverse, đồng thời tiếp tục giới thiệu các đại sứ Fight Out cho các chương trình đào tạo riêng đều được nêu trong báo cáo chính thức của chúng tôi."
-        },
-        {
-          "id": 2,
-          "bgcolor": "bg-[#6666FF]",
-          "content": "Chúng tôi có kế hoạch lớn cho Fight Out sau khi bán trước! Phát triển nền tảng Fight Out và metaverse, đồng thời tiếp tục giới thiệu các đại sứ Fight Out cho các chương trình đào tạo riêng đều được nêu trong báo cáo chính thức của chúng tôi."
-        },
-        {
-          "id": 3,
-          "bgcolor": "bg-[#3366FF]",
-          "content": "Chúng tôi có kế hoạch lớn cho Fight Out sau khi bán trước! Phát triển nền tảng Fight Out và metaverse, đồng thời tiếp tục giới thiệu các đại sứ Fight Out cho các chương trình đào tạo riêng đều được nêu trong báo cáo chính thức của chúng tôi."
-        },
-        {
-          "id": 4,
-          "bgcolor": "bg-[#0066FF]",
-          "content": "Chúng tôi có kế hoạch lớn cho Fight Out sau khi bán trước! Phát triển nền tảng Fight Out và metaverse, đồng thời tiếp tục giới thiệu các đại sứ Fight Out cho các chương trình đào tạo riêng đều được nêu trong báo cáo chính thức của chúng tôi."
         }
       ]
     }
diff --git a/src/index.css b/src/index.css
index 420f091..11e3f2f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -60,36 +60,48 @@ html {
   }
 }
 
-/* .text-container {
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  .text-container span {
-    display: inline-block;
-    opacity: 0;
-    transform: translateX(-10px);
-    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
-  } */
 .back-to-top {
   position: fixed;
-  bottom: 20px;
-  right: 20px;
   color: #fff;
-  width: 60px;
-  height: 60px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   opacity: 0;
-  transition: opacity 0.4s ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 .back-to-top.visible {
   opacity: 1;
 }
 
+/* .animation__showLine {
+  animation: showline 2s linear;
+}
+
+@keyframes showline {
+  0% {
+    max-height: 0;
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+
+    max-height: 100vh;
+  }
+} */
+
+[data-aos="animation__showLine"] {
+  opacity: 0;
+  max-height: 0px;
+  transition-property: max-height, opacity;
+}
+
+[data-aos="animation__showLine"].aos-animate {
+  opacity: 1;
+  max-height: 100vh;
+}
+
 @keyframes TopToBottom {
   0% {
     transform: translate(50%, -20px);
diff --git a/src/shared/components/Footer.tsx b/src/shared/components/Footer.tsx
index dc8f5ba..bd6153b 100644
--- a/src/shared/components/Footer.tsx
+++ b/src/shared/components/Footer.tsx
@@ -4,7 +4,7 @@ type Props = {};
 
 const Footer = (props: Props) => {
   return (
-    <div className="container mx-auto md: px-4 flex flex-col gap-4 items-center md:flex-row justify-between text-white py-12">
+    <div className="container xl:w-[90%]  mx-auto md: px-4 flex flex-col gap-4 items-center md:flex-row justify-between text-white py-12">
       <div className="md:w-1/4 flex gap-2 items-center">
         <div className="bg-white rounded-full overflow-hidden p-1">
           <img
diff --git a/src/shared/components/Header.tsx b/src/shared/components/Header.tsx
index 9bff24b..03540cc 100644
--- a/src/shared/components/Header.tsx
+++ b/src/shared/components/Header.tsx
@@ -94,7 +94,7 @@ const Header = (props: Props) => {
     <>
       {isScrolled ? (
         <div className="fixed w-full z-30 p-4 transition-all duration-150 bg-gray-800">
-          <div className="container md:gap-2 mx-auto flex justify-between items-center ">
+          <div className="container md:gap-2 mx-auto flex justify-between items-center xl:w-[90%] ">
             <div
               className="flex gap-2 items-center cursor-pointer hover:text-orange-400"
               onClick={() => backToHome()}
@@ -125,7 +125,7 @@ const Header = (props: Props) => {
               ) : (
                 <>
                   <div className="flex lg:gap-4 gap-10 items-center">
-                    <ul className="flex lg:gap-4   ">
+                    <ul className="flex lg:gap-8   ">
                       {menuItems.map((item) => (
                         <HashLink
                           to={`${item.path}#${item.id}`}
@@ -144,7 +144,7 @@ const Header = (props: Props) => {
                       ))}
                       <li className="inline-block group relative">
                         <p className="text-white text-md transition-all duration-150 cursor-pointer transform motion-safe:group-hover:scale-110 group-hover:text-orange-500">
-                          SGPT Products{" "}
+                          SGPT Products
                         </p>
                         <div className=" h-10 w-[140px] absolute top-3"></div>
                         <ul className="hidden group-hover:flex animate-show-list-language  absolute top-10 left-[-8px] flex-col gap-y-4 pt-2 bg-slate-800 w-[200px] min-h-[50px] rounded">
@@ -171,7 +171,7 @@ const Header = (props: Props) => {
                           {currentLanguage}
                         </span>
                         <div className=" h-10 w-[140px] absolute top-3"></div>
-                        <ul className="hidden group-hover:flex animate-show-list-language  absolute top-10 flex-col gap-y-4 bg-slate-800 w-[120px] rounded">
+                        <ul className="hidden group-hover:flex animate-show-list-language  absolute top-10 flex-col gap-y-4 bg-slate-800 w-[120px] rounded z-10">
                           {languages.map((lng, index) => (
                             <>
                               <li
@@ -187,7 +187,7 @@ const Header = (props: Props) => {
                         </ul>
                       </div>
                     </ul>
-                    <div className="flex gap-4">
+                    <div className="flex gap-4 z-20">
                       <Button size="sm" onClick={() => openLocalPdf()}>
                         <div className="flex items-center gap-2 shadow-slate-50 transition-all transform motion-safe:hover:scale-110">
                           <BsNewspaper />
@@ -300,7 +300,7 @@ const Header = (props: Props) => {
         </div>
       ) : (
         <div className="fixed z-30 w-full p-5 transition-all duration-150">
-          <div className="container mx-auto flex justify-between items-center">
+          <div className="container mx-auto flex justify-between items-center xl:w-[90%]">
             <div className="flex gap-2 items-center">
               <div className="bg-white w-12 rounded-full overflow-hidden p-1">
                 <img
@@ -356,7 +356,7 @@ const Header = (props: Props) => {
                     {currentLanguage}
                   </span>
                   <div className=" h-9 w-[140px]  absolute top-3"></div>
-                  <ul className="hidden group-hover:flex animate-show-list-language absolute top-10 flex-col gap-y-4 ">
+                  <ul className="hidden group-hover:flex animate-show-list-language absolute top-10 flex-col gap-y-4 lg:w-[120px] lg:pb-[12px] z-10 ">
                     {languages.map((lng, index) => (
                       <>
                         <li
diff --git a/src/shared/components/backtotop/index.tsx b/src/shared/components/backtotop/index.tsx
index fa1f057..651afd6 100644
--- a/src/shared/components/backtotop/index.tsx
+++ b/src/shared/components/backtotop/index.tsx
@@ -32,7 +32,7 @@ const BackToTopButton = () => {
 
   return (
     <div
-      className={`bg-orange-500 back-to-top ${
+      className={`bg-orange-500 back-to-top hover:scale-[1.1] transition-all duration-1000 ease-in-out right-0 md:right-[20px] bottom-[10px] md:bottom-[20px] w-[40px] h-[40px] sm:w-[60px] sm:h-[60px] ${
         isVisible ? "visible" : ""
       } group relative m-12 flex justify-center z-[1000]`}
       onClick={scrollToTop}
diff --git a/src/shared/components/css/QnASection.css b/src/shared/components/css/QnASection.css
index 244957c..0b87c1d 100644
--- a/src/shared/components/css/QnASection.css
+++ b/src/shared/components/css/QnASection.css
@@ -1,17 +1,26 @@
 .iconDropDown {
   transform: rotate(0deg);
-  transition: transform 2.5s;
+  /* transition: transform 2.5s; */
 }
 .iconDropUp {
   transform: rotate(180deg);
-  transition: transform 1s;
+  /* transition: transform 1s; */
 }
 
 .listItem__QnA {
   max-height: 0;
   overflow: hidden;
-  transition: all 1.5s ease-in-out;
+  /* transition: all 1s ease-in; */
 }
 .listItem__QnA-active {
   max-height: 150vh;
 }
+.transitionHoverArrow {
+  transition-property: font-size;
+  transition-duration: 300ms;
+}
+
+.transitionArrowUpAndDown {
+  transition-property: rotate;
+  transition-duration: 3000ms;
+}
diff --git a/src/shared/components/css/Roadmap.css b/src/shared/components/css/Roadmap.css
index e090254..81ffd6e 100644
--- a/src/shared/components/css/Roadmap.css
+++ b/src/shared/components/css/Roadmap.css
@@ -6,14 +6,14 @@
 }
 
 #timeline:hover .tl-item {
-  width: 20%;
+  /* width: 25%; */
 }
 
 .tl-item {
   width: 100%;
   transform: translate3d(0, 0, 0);
   position: relative;
-  height: 80vh;
+  height: 70vh;
   color: #fff;
   overflow: hidden;
   transition: width 0.5s ease;
@@ -61,11 +61,11 @@
 .tl-item:hover .tl-content {
   opacity: 1;
   transform: translateY(0);
-  transition: all 0.75s ease 0.5s;
+  transition: all 0.5s ease 0.5s;
 }
 .tl-item:hover .tl-title {
   top: 15%;
-  transition: all 0.75s ease 0.5s;
+  transition: all 0.5s ease 0.5s;
 }
 .tl-item:hover .tl-bg {
   filter: grayscale(0);
@@ -112,7 +112,7 @@
 
 @media only screen and (max-width: 768px) {
   #timeline {
-    width: 75%;
+    width: 85%;
     margin: 0 auto;
   }
   .tl-item:hover {
diff --git a/src/shared/components/healthcare/ApproachSection.tsx b/src/shared/components/healthcare/ApproachSection.tsx
index 0496f72..467e064 100644
--- a/src/shared/components/healthcare/ApproachSection.tsx
+++ b/src/shared/components/healthcare/ApproachSection.tsx
@@ -65,7 +65,7 @@ const Approach = () => {
   }, [t]);
   return (
     <div
-      className="container mx-auto text-black md:min-h-[100vh] animate-on-scroll my-20 relative"
+      className="container lg:w-[94%] mx-auto text-black md:min-h-[100vh] animate-on-scroll my-20 relative"
       id="appRoach"
     >
       <h1 className="text-4xl font-bold text-center pb-20 ">The Approach​ ​</h1>
@@ -73,9 +73,11 @@ const Approach = () => {
         {appRoachData.map((item: any) => {
           return (
             <div
+              data-aos="zoom-in"
+              data-aos-duration="500"
               className="flex flex-col shadow-[0_0px_8px_2px_rgba(0,0,0,0.1)] 
             hover:shadow-[0_0px_16px_4px_rgba(0,0,0,0.3)] 
-            transition-all duration-500 ease-in-out group w-[60%] p-4 rounded-lg md:w-[30%] md:min-h-[360px] lg:w-[25%] "
+            transition-all duration-500  group w-[60%] p-4 rounded-lg md:w-[30%] md:min-h-[360px] lg:w-[25%] "
             >
               <div className=" transition-all duration-500 ease-in-out md flex flex-col gap-y-4">
                 <p className=" text-2xl text-center" key={item.title}>
diff --git a/src/shared/components/healthcare/Competitions.tsx b/src/shared/components/healthcare/Competitions.tsx
index 828bbc5..9941978 100644
--- a/src/shared/components/healthcare/Competitions.tsx
+++ b/src/shared/components/healthcare/Competitions.tsx
@@ -4,7 +4,7 @@ const Competitions = () => {
   return (
     <div
       id="competitions"
-      className="container mx-auto text-black md:min-h-[100vh] animate-on-scroll my-20 relative"
+      className="container w-[94%] mx-auto text-black md:min-h-[100vh] animate-on-scroll my-20 relative"
     >
       <h1 className="text-4xl font-bold text-center pb-20 ">Competitions</h1>
       <div className="w-[330px] h-[220px] md:w-[600px] md:h-[400px] lg:w-[800px] lg:h-[500px] border-l-2 border-b-2 border-black mx-auto relative md:absolute md:top-[50%] md:translate-y-[-50%] md:left-[50%] md:translate-x-[-50%] ">
diff --git a/src/shared/components/healthcare/CustomerInsight.tsx b/src/shared/components/healthcare/CustomerInsight.tsx
index 50a237a..6427241 100644
--- a/src/shared/components/healthcare/CustomerInsight.tsx
+++ b/src/shared/components/healthcare/CustomerInsight.tsx
@@ -1,9 +1,11 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { BiSearchAlt } from "react-icons/bi";
 import { TbFileDislike, TbFileLike } from "react-icons/tb";
 import { AiOutlineMessage } from "react-icons/ai";
-import customerInsight from "../../../assets/images/image22.png";
+import Aos from "aos";
+import "aos/dist/aos.css";
 import { useTranslation } from "react-i18next";
+import customerInsight from "../../../assets/images/image22.png";
 
 const listInsight = [
   {
@@ -24,16 +26,24 @@ const listInsight = [
   },
 ];
 const CustomerInsight = () => {
+  useEffect(() => {
+    Aos.init();
+  }, []);
   const { t } = useTranslation("customerInsightHealthCare");
   return (
     <div
-      className="container mx-auto text-black md:min-h-[60vh] animate-on-scroll py-20 bg-slate-200 rounded-lg"
+      className="w-full  text-black md:min-h-[60vh] animate-on-scroll py-20 bg-slate-200 rounded-lg"
       id="customerInsight"
     >
       <h1 className="text-4xl font-bold text-center pb-20 relative">
         {t("title")}​
       </h1>
-      <div className="flex flex-wrap gap-y-10 sm:flex-row sm:items-start justify-around sm:gap-y-4 min-h-[50vh]  relative ">
+      <div
+        data-aos="fade-up"
+        data-aos-easing="ease-out-cubic"
+        data-aos-duration="500"
+        className="container w-[94%] mx-auto flex flex-wrap gap-y-10 sm:flex-row sm:items-start justify-around sm:gap-y-4 min-h-[50vh]  relative "
+      >
         <div className="hidden md:block absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] border w-[150px] h-[150px] md:w-[200px] md:h-[200px] lg:w-[300px] lg:h-[300px]  bg-white rounded-[50%] overflow-hidden">
           <div className="absolute top-[0%] left-[0%] w-[75px] h-[75px] md:w-[100px] md:h-[100px] lg:w-[150px] lg:h-[150px]  border-r-[1.5px] border-b-[1.5px] border-slate-400 group ">
             <BiSearchAlt className="text-black absolute top-[50%] left-[50%] text-[16px] md:text-[20px] lg:text-[24px]  group-hover:text-orange-500 motion-safe:group-hover:scale-110" />
diff --git a/src/shared/components/healthcare/FirstSection.tsx b/src/shared/components/healthcare/FirstSection.tsx
index 9a4cfc7..0600b39 100644
--- a/src/shared/components/healthcare/FirstSection.tsx
+++ b/src/shared/components/healthcare/FirstSection.tsx
@@ -5,26 +5,26 @@ const FirstSection = () => {
   return (
     <div
       id="firstSection"
-      className="flex items-center justify-around min-h-[100vh] bg-gradient-to-r from-cyan-500 to-blue-500"
+      className=" flex items-center  min-h-[100vh] bg-gradient-to-r from-cyan-500 to-blue-500"
     >
-      <h1 className="pl-12 text-white text-5xl font-bold">
-        SGPT for Healthcare
-      </h1>
-      <div className="lg:h-full lg:w-1/5 hidden lg:flex justify-center items-center relative">
-        <img
-          src={robotImage2}
-          className="object-cover absolute left-30 border-4 backdrop-blur-sm shadow-2xl shadow-cyan-300 border-cyan-500 rounded-full w-full aspect-square transition-all duration-500 cursor-pointer filter  hover:border-orange-500"
-          alt="robot-ai"
-        />
+      <div className="container w-[94%] flex justify-between mx-auto">
+        <h1 className="text-white text-5xl font-bold">SGPT for Healthcare</h1>
+        <div className=" lg:h-full lg:w-1/5 hidden lg:flex justify-center items-center relative">
+          <img
+            src={robotImage2}
+            className="object-cover absolute left-30 border-4 backdrop-blur-sm shadow-2xl shadow-cyan-300 border-cyan-500 rounded-full w-full aspect-square transition-all duration-500 cursor-pointer filter  hover:border-orange-500"
+            alt="robot-ai"
+          />
 
-        <img
-          src={robotImage}
-          className="object-cover absolute top-36 left-[-20%] border-4 backdrop-blur-sm shadow-2xl shadow-cyan-300 border-cyan-500 rounded-full w-40 aspect-square hover:border-orange-500"
-          alt="robot-ai"
-        />
+          <img
+            src={robotImage}
+            className="object-cover absolute top-36 left-[-20%] border-4 backdrop-blur-sm shadow-2xl shadow-cyan-300 border-cyan-500 rounded-full w-40 aspect-square hover:border-orange-500"
+            alt="robot-ai"
+          />
 
-        <div className="absolute w-10 aspect-square blur-sm bg-gradient-to-br from-rose-500 to-indigo-700 rounded-full top-32 -left-10"></div>
-        <div className="absolute w-10 aspect-square bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-sky-400 to-indigo-900 blur-sm rounded-full bottom-56 right-10"></div>
+          <div className="absolute w-10 aspect-square blur-sm bg-gradient-to-br from-rose-500 to-indigo-700 rounded-full top-32 -left-10"></div>
+          <div className="absolute w-10 aspect-square bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-sky-400 to-indigo-900 blur-sm rounded-full bottom-56 right-10"></div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/shared/components/healthcare/ProblemsSection.tsx b/src/shared/components/healthcare/ProblemsSection.tsx
index c44543c..628f4fe 100644
--- a/src/shared/components/healthcare/ProblemsSection.tsx
+++ b/src/shared/components/healthcare/ProblemsSection.tsx
@@ -2,7 +2,8 @@ import React, { useState, useEffect } from "react";
 import { HiOutlineUserGroup } from "react-icons/hi";
 import { TbReportSearch } from "react-icons/tb";
 import { useTranslation } from "react-i18next";
-
+import Aos from "aos";
+import "aos/dist/aos.css";
 import userBehavior from "../../../assets/images/icon-user-behavior.png";
 import userInformation from "../../../assets/images/image20.png";
 import userInteraction from "../../../assets/images/image21.png";
@@ -26,6 +27,9 @@ const listProblems = [
   },
 ];
 const ProblemsSection = () => {
+  useEffect(() => {
+    Aos.init();
+  }, []);
   const { t } = useTranslation("problemsSectionHealthCare");
   const [problemsSectionData, setProblemsSectionData] = useState([]);
   useEffect(() => {
@@ -33,7 +37,7 @@ const ProblemsSection = () => {
   }, [t]);
   return (
     <div
-      className="container mx-auto text-black md:min-h-[80vh] animate-on-scroll my-20 relative"
+      className="container w-[94%] mx-auto text-black md:min-h-[80vh] animate-on-scroll my-20 relative"
       id="problems"
     >
       <h1 className="text-4xl font-bold text-center pb-20 relative">
@@ -50,7 +54,11 @@ const ProblemsSection = () => {
           return (
             <>
               <p className="line-problems first:hidden my-auto w-[2px] h-[150px] bg-slate-400"></p>
-              <div className="flex h-full justify-around [&>*:first-child]:items-center flex-1 ">
+              <div
+                data-aos="flip-left"
+                data-aos-duration="500"
+                className="flex h-full justify-around [&>*:first-child]:items-center flex-1  "
+              >
                 <div className="relative flex flex-col items-center gap-y-4 flex:1 text-black p-8 rounded-lg">
                   <div className="flex flex-col gap-y-2 items-center">
                     <img className="w-[44px] h-[44px] " src={item.src} alt="" />
diff --git a/src/shared/components/healthcare/SolutionsOfProduct​.tsx b/src/shared/components/healthcare/SolutionsOfProduct​.tsx
index 921c984..328b19c 100644
--- a/src/shared/components/healthcare/SolutionsOfProduct​.tsx
+++ b/src/shared/components/healthcare/SolutionsOfProduct​.tsx
@@ -1,12 +1,14 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { BiSearchAlt } from "react-icons/bi";
 import { useTranslation } from "react-i18next";
 import { TbFileDislike, TbFileLike } from "react-icons/tb";
 import { AiOutlineMessage } from "react-icons/ai";
-import customerInsight from "../../../assets/images/image22.png";
 import { BsDatabaseCheck } from "react-icons/bs";
 import { RiCodeSSlashLine, RiSettings4Line } from "react-icons/ri";
-
+import Aos from "aos";
+import "aos/dist/aos.css";
+import customerInsight from "../../../assets/images/image22.png";
+// import "../../../index.css";
 const listSolutions = [
   {
     title: "DATA",
@@ -30,17 +32,24 @@ const listSolutions = [
   },
 ];
 const SolutionsOfProduct = () => {
+  useEffect(() => {
+    Aos.init();
+  }, []);
   const { t } = useTranslation("solutionsOfProductHealthCare");
   return (
     <div
-      className="container mx-auto text-black md:min-h-[60vh] animate-on-scroll py-20 bg-slate-200 rounded-lg px-10"
+      className="w-full text-black md:min-h-[60vh] animate-on-scroll py-20 bg-slate-200 rounded-lg px-10"
       id="solutionsOfProduct"
     >
       <h1 className="text-4xl font-bold text-center pb-20 relative">
         The Solutions of Product​
       </h1>
-      <div className="flex flex-col gap-y-10 w-[100%] md:w-[60%] h-full">
-        <div className="flex items-center w-full gap-x-8">
+      <div className="container w-[94%] mx-auto flex flex-col gap-y-10  h-full">
+        <div
+          data-aos="fade-left"
+          data-aos-duration="1000"
+          className="flex items-center w-full gap-x-8"
+        >
           <div className="w-[80px] bg-black flex h-[80px] rounded-[50%] justify-center items-center group">
             <BsDatabaseCheck
               className="text-white text-[32px] group-hover:rotateY transition-all 
@@ -55,8 +64,20 @@ const SolutionsOfProduct = () => {
             </ul>
           </div>
         </div>
-        <div className="w-[2px] h-[40px] ml-[40px] bg-black"></div>
-        <div className="flex items-center w-full gap-x-8">
+        <div
+          data-aos="animation__showLine"
+          data-aos-duration="1500"
+          data-aos-easing="ease-in-out"
+          data-aos-delay="100"
+          className="w-[2px] h-[40px] ml-[40px] bg-black"
+        ></div>
+        <div
+          data-aos="fade-left"
+          data-aos-duration="1000"
+          data-aos-easing="ease-in-out"
+          data-aos-delay="300"
+          className="flex items-center w-full gap-x-8"
+        >
           <div className="w-[80px] bg-black flex h-[80px] rounded-[50%] justify-center items-center group">
             <RiCodeSSlashLine
               className="text-white text-[32px] group-hover:rotateY transition-all 
@@ -70,9 +91,21 @@ const SolutionsOfProduct = () => {
             </ul>
           </div>
         </div>
-        <div className="w-[2px] h-[40px] ml-[40px] bg-black"></div>
+        <div
+          data-aos="animation__showLine"
+          data-aos-duration="1500"
+          data-aos-easing="ease-in-out"
+          data-aos-delay="100"
+          className="w-[2px] h-[40px] ml-[40px] bg-black overflow-hidden"
+        ></div>
 
-        <div className="flex items-center w-full gap-x-8">
+        <div
+          data-aos="fade-left"
+          data-aos-duration="1000"
+          data-aos-easing="ease-in-out"
+          data-aos-delay="300"
+          className="flex items-center w-full gap-x-8"
+        >
           <div className="w-[80px] bg-black flex h-[80px] rounded-[50%] justify-center items-center group">
             <RiSettings4Line
               className="text-white text-[32px] group-hover:rotateY transition-all 
diff --git a/src/shared/components/home/AboutSection.tsx b/src/shared/components/home/AboutSection.tsx
index 86f7c11..c7d826c 100644
--- a/src/shared/components/home/AboutSection.tsx
+++ b/src/shared/components/home/AboutSection.tsx
@@ -16,13 +16,13 @@ const AboutSection = (props: Props) => {
 
   return (
     <div
-      className="container mx-auto text-white py-2 lg:flex-row flex-col flex relative scroll-mt-16 "
+      className="container mx-auto text-white py-2 lg:flex-row flex-col flex relative scroll-mt-16 w-[94%]  "
       id="about"
       style={{
         backgroundImage: `url(https://awv3node-homepage.surge.sh/build/assets/stars.svg)}`,
       }}
     >
-      <div className="flex flex-col justify-center gap-10 lg:w-1/2 w-full  px-8 pt-2 order-1">
+      <div className="flex flex-col justify-center gap-10 lg:w-1/2 w-full  px-8 pt-2 order-1 xl:px-0 ">
         <div className="flex flex-col gap-8">
           <h4 className="text-3xl uppercase font-bold hover:text-orange-400">
             {t("title1")}
diff --git a/src/shared/components/home/FirstSection.tsx b/src/shared/components/home/FirstSection.tsx
index 66616a5..45e2a2e 100644
--- a/src/shared/components/home/FirstSection.tsx
+++ b/src/shared/components/home/FirstSection.tsx
@@ -68,7 +68,7 @@ const FirstSection = () => {
   });
   return (
     <animated.div
-      className=" lg:min-h-screen sm:px-1 md:px-10 lg:px-0 flex bg-cover bg-center bg-no-repeat relative"
+      className=" lg:min-h-screen sm:px-1 md:px-10 lg:px-0  flex bg-cover bg-center bg-no-repeat relative"
       id="home"
       style={springs}
     >
@@ -86,8 +86,8 @@ const FirstSection = () => {
           <source src={VideoSGPTBg} type="video/mp4" />
         </video>
       </div>
-      <div className="absolute top-0 left-0 w-full h-full bg-black opacity-60 "></div>
-      <div className="container flex mx-auto min-h-[70vh] justify-center text-white z-20 mt-20">
+      <div className="absolute top-0 left-0 w-full h-full bg-black opacity-60  "></div>
+      <div className="container  flex mx-auto min-h-[70vh] justify-center text-white z-20 mt-20 w-[94%]  ">
         <div className="lg:w-4/5 w-[99%] sm:w-full flex flex-col justify-center lg:pb-0 gap-16 pb-20 z-50 px-1">
           <div className="flex flex-col gap-10 ">
             <h4 className="lg:w-3/4 lg:text-5xl md:text-5xl text-3xl font-bold hover:text-orange-400">
@@ -132,7 +132,7 @@ const FirstSection = () => {
                     key={social.name}
                     onClick={() => window.open(social.link, "_blank")}
                   >
-                    <div className="flex items-center gap-2 transform motion-safe:hover:scale-110">
+                    <div className="flex items-center gap-2 transform motion-safe:hover:scale-110 transition-all duration-500">
                       {social.icon}
                       {social.name}
                     </div>
diff --git a/src/shared/components/home/QnASection.tsx b/src/shared/components/home/QnASection.tsx
index 16af19e..dd54634 100644
--- a/src/shared/components/home/QnASection.tsx
+++ b/src/shared/components/home/QnASection.tsx
@@ -183,14 +183,14 @@ const QnASection = (props: Props) => {
 
   return (
     <div
-      className="container animate-[5s_ease]  min-h-[400px] mb-[100px] lg:justify-center lg:flex  mx-auto py-2 text-white "
+      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] ">
         <h1 className="text-4xl font-bold text-center hover:text-orange-400">
           FAQS
         </h1>
-        <h2 className="text-center ">
+        <h2 className="text-center">
           {t("navtitle")}
           {/* Out here. Got a question that’s not on the list? Let us know
                     below! */}
@@ -214,7 +214,7 @@ const QnASection = (props: Props) => {
                   showListItem("title" + item.id, index + item.title)
                 }
               >
-                <div className="w-full min-h-[20px] flex justify-between items-center p-2 z-10 relative ">
+                <div className="w-full min-h-[20px] flex justify-between items-center p-2 z-10 relative group ">
                   {/* <div
                     className={`absolute h-full left-0 top-0 w-2 ${item.bgcolor}`}
                   ></div> */}
@@ -224,11 +224,11 @@ const QnASection = (props: Props) => {
                   <div className="listQnA h-6 w-6 flex cursor-pointer ">
                     <VscChevronDown
                       id={index + item.title}
-                      className="iconDropDown iconActive hover:text-2xl m-auto text-orange-500"
+                      className="iconDropDown iconActive group-hover:text-2xl m-auto text-orange-500 transition-all duration-500 ease-in-out"
                     />
                   </div>
                 </div>
-                <ul className="listItem__QnA flex-col w-full list-answer ">
+                <ul className="listItem__QnA flex-col w-full transition-all duration-1000 ease-in">
                   {item.contents.map((list: any, index: any) => {
                     return (
                       <li
diff --git a/src/shared/components/home/RoadMap.tsx b/src/shared/components/home/RoadMap.tsx
index 9f12462..84eebd1 100644
--- a/src/shared/components/home/RoadMap.tsx
+++ b/src/shared/components/home/RoadMap.tsx
@@ -51,7 +51,7 @@ const RoadMap = (props: Props) => {
 
   return (
     <div
-      className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll my-20"
+      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">
@@ -61,7 +61,7 @@ const RoadMap = (props: Props) => {
       <animated.div
         id="timeline"
         style={{ ...styles }}
-        className="w-full flex flex-col gap-y-4 md:flex-row"
+        className="w-full flex flex-col gap-y-4 lg:flex-row"
       >
         {/* <animated.div
           style={{ ...styles1 }}
@@ -69,7 +69,10 @@ const RoadMap = (props: Props) => {
         ></animated.div> */}
         {roadMapData.map((item: any, index: any) => {
           return (
-            <div key={index} className="tl-item md:hover:w-[35%!important] ">
+            <div
+              key={index}
+              className="tl-item w-[80%]mx-auto lg:hover:w-[150%!important] "
+            >
               <div
                 className="tl-bg"
                 style={{
@@ -77,7 +80,7 @@ const RoadMap = (props: Props) => {
                 }}
               ></div>
               <h4 className="tl-title">{item.phase}</h4>
-              <ol className="tl-content flex flex-col gap-y-[12px]">
+              <ol className="tl-content w-[90%] md:w-[60%] lg:w-[90%] mx-auto flex flex-col gap-y-[12px]">
                 {item.listTitle.map((listItem: any, index: any) => {
                   return (
                     <li key={index} className="flex items-center gap-x-[20px]">
diff --git a/src/shared/components/home/TokenomicsSection.tsx b/src/shared/components/home/TokenomicsSection.tsx
index e4706d6..284f138 100644
--- a/src/shared/components/home/TokenomicsSection.tsx
+++ b/src/shared/components/home/TokenomicsSection.tsx
@@ -185,7 +185,7 @@ const TokenomicsSection = (props: Props) => {
   ChartJS.register(ChartDataLabels);
   return (
     <div className="w-full pb-24 scroll-mt-16" id="tokenomics">
-      <div className="container mx-auto">
+      <div className="container w-[94%] mx-auto">
         <h1 className="text-4xl text-white font-bold text-center mb-16  hover:text-orange-400">
           Tokenomics
         </h1>