diff --git a/app/page.jsx b/app/page.jsx
index 36fa2e4..77b2264 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -10,7 +10,7 @@ import { Plus_Jakarta_Sans } from "next/font/google";
 import Logos from "../public/Qubit.png";
 import { CarouselCard } from "@/components/StyleComponents/Carousel";
 import AboutUs from "./Elements/AboutUs";
-import { ArrowRight } from "lucide-react";
+import Link from "next/link";
 
 // const plusJakartaSans = Plus_Jakarta_Sans({ subsets: ['latin'] });
 
@@ -62,11 +62,13 @@ const Page = () => {
   }, [timelineControls, pieChartControls]);
 
   const timelineVariants = {
-    hidden: { opacity: 0 },
+    hidden: { opacity: 0, y: 50 },
     visible: {
       opacity: 1,
+      y: 0,
       transition: {
-        staggerChildren: 0.3,
+        duration: 0.5,
+        staggerChildren: 0.2,
       },
     },
   };
@@ -99,255 +101,374 @@ const Page = () => {
 
   return (
     <>
-      <div className="relative min-h-screen overflow-hidden  ">
-        <div className="absolute inset-0 -z-10">
-          <div className="absolute inset-0 bg-gradient-to-br from-gray-900 via-blue-900 to-black"></div>
-          <div className="absolute inset-0 bg-[linear-gradient(to_right,#90caf9_1px,transparent_1px),linear-gradient(to_bottom,#09baf3_1px,transparent_1px)] bg-[size:8rem_8rem] opacity-80"></div>
-          <div className="absolute inset-0 bg-[linear-gradient(circle_at_top,#ffffff10,transparent_90%)]"></div>
-          <div className="absolute inset-0  bg-[radial-gradient(1500px_2500px_ellipse_at_center,_var(--tw-gradient-stops))] from-blue-800 via-black to-black opacity-90"></div>
-        </div>
+    <div className="relative min-h-scree overflow-hidden  ">
+      <div className="absolute inset-0 -z-10">
+  <div className="absolute inset-0 bg-gradient-to-br from-gray-900 via-blue-900 to-black"></div>
+  <div className="absolute inset-0 bg-[linear-gradient(to_right,#90caf9_1px,transparent_1px),linear-gradient(to_bottom,#09baf3_1px,transparent_1px)] bg-[size:8rem_8rem] opacity-80"></div>
+  <div className="absolute inset-0 bg-[linear-gradient(circle_at_top,#ffffff10,transparent_90%)]"></div>
+  <div className="absolute inset-0  bg-[radial-gradient(1500px_2500px_ellipse_at_center,_var(--tw-gradient-stops))] from-blue-800 via-black to-black opacity-90"></div>
+</div>
 
-        <div className="relative z-10">
-          <nav className="p-4 bg-black  shadow-2xl shadow-black">
-            <motion.div
-              className="container mx-auto flex justify-between h-10 mt-2"
-              initial={{ y: -50, opacity: 0 }}
-              animate={{ y: 0, opacity: 1 }}
-              transition={{ duration: 0.5 }}
-            >
-              <div className="text-3xl flex font-bold text-white">QUBIT</div>
-              <div className="flex space-x-4">
-                <motion.span
-                  className="text-gray-500 hover:text-white hover:cursor-pointer text-xl transition font-semibold"
-                  whileHover={{ scale: 1.1, color: "#ffffff" }}
-                  whileTap={{ scale: 0.95 }}
-                >
-                  Scraping
-                </motion.span>
-                <motion.span
-                  className="text-gray-500 hover:text-white hover:cursor-pointer text-xl transition font-semibold"
-                  whileHover={{ scale: 1.1, color: "#ffffff" }}
-                  whileTap={{ scale: 0.95 }}
-                >
-                  Services
-                </motion.span>
-                <motion.span
-                  className="text-gray-500 hover:text-white hover:cursor-pointer text-xl transition font-semibold"
-                  whileHover={{ scale: 1.1, color: "#ffffff" }}
-                  whileTap={{ scale: 0.95 }}
-                >
-                  About Us
-                </motion.span>
-              </div>
-            </motion.div>
-          </nav>
-
-          <div className="grid grid-cols-2">
-            <div className="text-black">
-              <div className="mt-52 ml-32">
-                {/* Animated Header */}
-                <motion.h1
-                  className="font-bold text-2xl text-gray-600 h-10"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  transition={{ duration: 1 }}
-                >
-                  {"Keep Your device Safe".split("").map((char, index) => (
-                    <motion.span
-                      key={index}
-                      initial={{ opacity: 0, y: 50 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      transition={{ delay: index * 0.1, duration: 0.2 }}
-                    >
-                      {char}
-                    </motion.span>
-                  ))}
-                </motion.h1>
-
-                {/* Animated Text Blocks */}
-                <motion.p
-                  className="text-5xl font-extrabold text-white h-14"
-                  initial={{ opacity: 0, x: -100 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  transition={{ delay: 0.8, duration: 0.8 }}
-                >
-                  Real Time Vulnerability
-                </motion.p>
-
-                <motion.p
-                  className="text-5xl font-extrabold text-blue-600 h-14"
-                  initial={{ opacity: 0, x: -100 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  transition={{ delay: 0.8, duration: 0.8 }}
-                >
-                  Reporting System with
-                </motion.p>
-
-                <motion.p
-                  className="text-5xl font-extrabold text-white h-14"
-                  initial={{ opacity: 0, x: -100 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  transition={{ delay: 0.8, duration: 0.8 }}
-                >
-                  Cutting Edge Technology
-                </motion.p>
-              </div>
-              <motion.div
-                className="mt-5 ml-24"
+      <div className="relative z-10">
+        <nav className="p-4 bg-black  shadow-2xl shadow-black">
+          <motion.div
+            className="container mx-auto flex justify-between h-10 mt-2"
+            initial={{ y: -50, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{ duration: 0.5 }}
+          >
+            <div className="text-3xl flex font-bold text-white">
+              
+              QUBIT
+            </div>
+            <div className="flex space-x-4">
+              <motion.span
+                className="text-gray-500 hover:text-white hover:cursor-pointer text-xl transition font-semibold"
+                whileHover={{ scale: 1.1, color: "#ffffff" }}
+                whileTap={{ scale: 0.95 }}
+              >
+                Scraping
+              </motion.span>
+              <motion.span
+                className="text-gray-500 hover:text-white hover:cursor-pointer text-xl transition font-semibold"
+                whileHover={{ scale: 1.1, color: "#ffffff" }}
+                whileTap={{ scale: 0.95 }}
+              >
+                Services
+              </motion.span>
+              <motion.span
+                className="text-gray-500 hover:text-white hover:cursor-pointer text-xl transition font-semibold"
+                whileHover={{ scale: 1.1, color: "#ffffff" }}
+                whileTap={{ scale: 0.95 }}
+              >
+                About Us
+              </motion.span>
+            </div>
+          </motion.div>
+        </nav>
+
+        <div className="grid grid-cols-2">
+
+          <div className="text-black">
+            <div className="mt-52 ml-32">
+
+              {/* Animated Header */}
+              <motion.h1
+                className="font-bold text-2xl text-gray-600 h-10"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 1 }}
+              >
+                {"Keep Your device Safe".split("").map((char, index) => (
+                  <motion.span
+                    key={index}
+                    initial={{ opacity: 0, y: 50 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.1, duration: 0.2 }}
+                  >
+                    {char}
+                  </motion.span>
+                ))}
+              </motion.h1>
+
+              {/* Animated Text Blocks */}
+              <motion.p
+                className="text-5xl font-extrabold text-white h-14"
                 initial={{ opacity: 0, x: -100 }}
                 animate={{ opacity: 1, x: 0 }}
                 transition={{ delay: 0.8, duration: 0.8 }}
               >
-                <Button />
-              </motion.div>
+                Real Time Vulnerability
+              </motion.p>
+
+              <motion.p
+                className="text-5xl font-extrabold text-blue-600 h-14"
+                initial={{ opacity: 0, x: -100 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.8, duration: 0.8 }}
+              >
+                Reporting System with
+              </motion.p>
+
+              <motion.p
+                className="text-5xl font-extrabold text-white h-14"
+                initial={{ opacity: 0, x: -100 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.8, duration: 0.8 }}
+              >
+                Cutting Edge Technology
+              </motion.p>
             </div>
+            {/* <motion.div
+              className="h-[1px] w-[80%] mt-5 ml-32 bg-gray-300"
+              initial={{ width: "0%" }}
+              animate={{ width: "80%" }}
+              transition={{ duration: 1 }}
+            /> */}
+            {/* <div className="flex items-center space-x-2 ml-32 mt-3">
+              <motion.div
+                className="flex -space-x-5"
+                variants={containerVariants}
+                initial="hidden"
+                animate="visible"
+              >
+                <motion.div variants={slideIn} transition={{ duration: 0.5 }}>
+                  <Image
+                    className="w-16 h-16 rounded-full border-2 border-white shadow-lg"
+                    src={Profile4}
+                    alt="User 2"
+                  />
+                </motion.div>
+
+                <motion.div variants={slideIn} transition={{ duration: 0.5 }}>
+                  <Image
+                    className="w-16 h-16 rounded-full border-2 border-white shadow-lg"
+                    src={Profile2}
+                    alt="User 2"
+                  />
+                </motion.div>
+
+                <motion.div variants={slideIn} transition={{ duration: 0.5 }}>
+                  <Image
+                    className="w-16 h-16 rounded-full border-2 border-white shadow-lg"
+                    src={Profile4}
+                    alt="User 3"
+                  />
+                </motion.div>
+
+                <motion.div variants={slideIn} transition={{ duration: 0.5 }}>
+                  <Image
+                    className="w-16 h-16 rounded-full border-2 border-white shadow-lg"
+                    src={Profile2}
+                    alt="User 4"
+                  />
+                </motion.div>
+
+                <motion.div variants={slideIn} transition={{ duration: 0.5 }}>
+                  <Image
+                    className="w-16 h-16 rounded-full border-2 border-white shadow-lg"
+                    src={Profile2}
+                    alt="User 2"
+                  />
+                </motion.div>
+              </motion.div>
+
+              <motion.div
+                className="text-white"
+                initial={{ opacity: 0, y: 100 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.8, duration: 0.8 }}
+              >
+                <div className="text-2xl font-bold text-gray-600">100+</div>
+                <div className="text-sm font-bold text-gray-600">
+                  Registered Users
+                </div>
+              </motion.div>
+            </div> */}
+            {/* <motion.div
+              className="h-[1px] w-[80%] mt-5 ml-32 bg-gray-400"
+              initial={{ width: "0%" }}
+              animate={{ width: "80%" }}
+              transition={{ duration: 1 }}
+            /> */}
             <motion.div
-              className="text-black"
-              initial={{ opacity: 0, y: 100 }}
-              animate={{ opacity: 1, y: 0 }}
+              className="mt-5 ml-24"
+              initial={{ opacity: 0, x: -100 }}
+              animate={{ opacity: 1, x: 0 }}
               transition={{ delay: 0.8, duration: 0.8 }}
             >
-              <Image src={Mobilebg} alt="mobilebg" className="mt-8" />
+              <Link href="https://rvrs.teamqubit.in/SignUp">
+              <Button />
+              </Link>
             </motion.div>
           </div>
+          <motion.div
+            className="text-black"
+            initial={{ opacity: 0, y: 100 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.8, duration: 0.8 }}
+          >
+            <Image src={Mobilebg} alt="mobilebg" className="mt-8" />
+          </motion.div>
+        </div>
+
+        <div className="mt-20">
+          <div className="space-x-4 text-center">
+            <span className="font-bold text-5xl text-white">Team</span>
+            <span className="font-bold text-5xl text-blue-600">Qubit</span>
+            <span className="font-bold text-5xl text-white">
+              Revolutionizing Web Scraping
+            </span>
+          </div>
+        </div>
 
-          <div className="mt-32">
+        <div ref={timelineRef} className="mt-20 px-4 relative">
+          <div className="absolute left-1/2 h-[680px] bottom-[90px] w-[4px] bg-gray-500 transform -translate-x-1/2"></div>
+          <motion.div
+            className="space-y-24 relative"
+            variants={timelineVariants}
+            initial="hidden"
+            animate={timelineControls}
+          >
             <motion.div
-              className="text-center mb-16"
-              initial={{ opacity: 0, y: 20 }}
+              variants={itemVariants}
+              className="flex items-center"
+              initial={{ opacity: 0, y: 50 }}
               animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5 }}
+              transition={{ duration: 0.8, ease: "easeOut" }}
             >
-              <h2 className="text-5xl font-bold">
-                <span className="text-white">Team </span>
-                <span className="text-blue-600">Qubit </span>
-                <span className="text-white">Revolutionizing Web Scraping</span>
-              </h2>
-            </motion.div>
-
-            <div ref={timelineRef} className="mt-20 px-4 relative">
-              <div className="absolute left-1/2 h-full w-1 bg-blue-200 transform -translate-x-1/2"></div>
-              <motion.div
-                className="space-y-24 relative"
-                variants={timelineVariants}
-                initial="hidden"
-                animate={timelineControls}
-              >
+              <div className="w-[30%] pr-8 text-right relative left-44 transition-transform transform hover:scale-105 z-10">
                 <motion.div
-                  variants={itemVariants}
-                  className="flex items-center mb-16"
+                  className="bg-gradient-to-r bg-white p-6 rounded-lg shadow-lg inline-block transition-shadow duration-300 hover:shadow-xl"
+                  initial={{ opacity: 0, y: 50 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.8, ease: "easeOut" }}
                 >
-                  <div className="w-5/12 pr-8">
-                    <motion.div
-                      className="bg-white p-6 relative left-12 rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl hover:scale-105 text-right"
-                      whileHover={{ y: -5 }}
-                    >
-                      <h3 className="text-xl font-semibold mb-2 text-blue-600">
-                        Efficient Data Extraction
-                      </h3>
-                      <p className="text-gray-700">
-                        Efficient data extraction employs methods like
-                        throttling and IP rotation to gather data quickly while
-                        minimizing risks of website blocking.
-                      </p>
-                    </motion.div>
-                  </div>
-                  <div className="w-2/12 flex justify-center">
-                    <div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center z-10">
-                      <ArrowRight className="text-white" size={24} />
-                    </div>
-                  </div>
-                  <div className="w-5/12 pl-8"></div>
+                  <h3 className="text-xl font-semibold mb-2 text-black text-center">
+                    Efficient Data Extraction
+                  </h3>
+                  <p className="text-gray-600 text-right">
+                    Efficient data extraction employs methods like throttling
+                    and IP rotation to gather data quickly while minimizing
+                    risks of website blocking.
+                  </p>
                 </motion.div>
+              </div>
 
-                <motion.div
-                  variants={itemVariants}
-                  className="flex items-center mb-16"
-                >
-                  <div className="w-5/12 pr-8"></div>
-                  <div className="w-2/12 flex justify-center">
-                    <div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center z-10">
-                      <ArrowRight className="text-white" size={24} />
-                    </div>
-                  </div>
-                  <div className="w-5/12 pl-8">
-                    <motion.div
-                      className="bg-white p-6 rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl hover:scale-105 text-left"
-                      whileHover={{ y: -5 }}
-                    >
-                      <h3 className="text-xl font-semibold mb-2 text-blue-600">
-                        Advanced Analytics
-                      </h3>
-                      <p className="text-gray-700">
-                        Advanced analytics utilizes sophisticated techniques to
-                        analyze data, providing valuable insights from web
-                        scraping for informed business decisions and trend
-                        analysis.
-                      </p>
-                    </motion.div>
-                  </div>
-                </motion.div>
+              <motion.div
+                className="absolute left-1/2 w-[138px] h-[4px] bg-gray-500 transform -translate-x-full"
+                initial={{ width: 0 }}
+                animate={{ width: "138px" }}
+                transition={{ duration: 0.8, ease: "easeOut" }}
+              ></motion.div>
 
-                <motion.div
-                  variants={itemVariants}
-                  className="flex items-center mb-16"
-                >
-                  <div className="w-5/12 pr-8">
-                    <motion.div
-                      className="bg-white p-6 rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl hover:scale-105 text-right"
-                      whileHover={{ y: -5 }}
-                    >
-                      <h3 className="text-xl font-semibold mb-2 text-blue-600">
-                        Scalable Infrastructure
-                      </h3>
-                      <p className="text-gray-700">
-                        Scalable infrastructure allows seamless growth,
-                        efficiently managing increased workloads in web scraping
-                        to ensure optimal performance and resource allocation.
-                      </p>
-                    </motion.div>
-                  </div>
-                  <div className="w-2/12 flex justify-center">
-                    <div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center z-10">
-                      <ArrowRight className="text-white" size={24} />
-                    </div>
-                  </div>
-                  <div className="w-5/12 pl-8"></div>
-                </motion.div>
-              </motion.div>
-            </div>
-          </div>
+              <motion.div
+                className="w-4 h-4 bg-gray-500 rounded-full absolute left-1/2 transform -translate-x-1/2"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.8, ease: "easeOut" }}
+              ></motion.div>
+
+              <div className="w-1/2 pl-8"></div>
+            </motion.div>
 
-          <div ref={pieChartRef} className="mt-24 pb-20">
             <motion.div
-              className="text-5xl font-bold text-center mb-10"
+              variants={itemVariants}
+              className="flex items-center"
               initial={{ opacity: 0, y: 50 }}
-              animate={pieChartVisible ? { opacity: 1, y: 0 } : {}}
-              transition={{ duration: 0.5 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, ease: "easeOut" }}
             >
-              <span className="text-white">Services Provided by </span>
-              <span className="text-blue-600">Qubit </span>
+              <div className="w-1/2 pr-8"></div>
+
+              <motion.div
+                className="w-4 h-4 bg-gray-500 rounded-full absolute left-1/2 transform -translate-x-1/2"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.8, ease: "easeOut" }}
+              ></motion.div>
+
+              <motion.div
+                className="absolute left-1/2 w-[144px] h-[4px] bg-gray-500"
+                initial={{ width: 0 }}
+                animate={{ width: "144px" }}
+                transition={{ duration: 0.8, ease: "easeOut" }}
+              ></motion.div>
+
+              <div className="w-[30%] pl-8 text-left relative left-28 transition-transform transform hover:scale-105">
+                <motion.div
+                  className="bg-gradient-to-r bg-white p-6 rounded-lg shadow-lg inline-block transition-shadow duration-300 hover:shadow-xl"
+                  initial={{ opacity: 0, y: 50 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.8, ease: "easeOut" }}
+                >
+                  <h3 className="text-xl font-semibold mb-2 text-black text-center">
+                    Advanced Analytics
+                  </h3>
+                  <p className="text-gray-600">
+                    Advanced analytics utilizes sophisticated techniques to
+                    analyze data, providing valuable insights from web scraping
+                    for informed business decisions and trend analysis.
+                  </p>
+                </motion.div>
+              </div>
             </motion.div>
+
             <motion.div
-              className="flex justify-center"
-              initial={{ opacity: 0, y: 100 }}
+              variants={itemVariants}
+              className="flex items-center"
+              initial={{ opacity: 0, y: 50 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.8, ease: "easeOut" }}
             >
+              <div className="w-[30%] pr-8 z-10 text-right relative left-44 transition-transform transform hover:scale-105">
+                <motion.div
+                  className="bg-gradient-to-r bg-white p-6 rounded-lg shadow-lg inline-block transition-shadow duration-300 hover:shadow-xl"
+                  initial={{ opacity: 0, y: 50 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.8, ease: "easeOut" }}
+                >
+                  <h3 className="text-xl font-semibold mb-2 text-black text-center">
+                    Scalable Infrastructure
+                  </h3>
+                  <p className="text-gray-600">
+                    Scalable infrastructure allows seamless growth, efficiently
+                    managing increased workloads in web scraping to ensure
+                    optimal performance and resource allocation.
+                  </p>
+                </motion.div>
+              </div>
+
               <motion.div
-                className="mb-20 mt-20 w-full max-w-4xl"
-                initial={{ scale: 0.9 }}
-                animate={{ scale: 1 }}
-                transition={{ duration: 0.6, ease: "easeInOut" }}
-              >
-                <CarouselCard />
-              </motion.div>
+                className="absolute left-1/2 w-[138px] h-[4px] bg-gray-500 -translate-x-full"
+                initial={{ width: 0 }}
+                animate={{ width: "138px" }}
+                transition={{ duration: 0.8, ease: "easeOut" }}
+              ></motion.div>
+
+              <motion.div
+                className="w-4 h-4 bg-gray-500 rounded-full absolute left-1/2 transform -translate-x-1/2"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.8, ease: "easeOut" }}
+              ></motion.div>
+
+              <div className="w-1/2 pl-8"></div>
             </motion.div>
-          </div>
+          </motion.div>
+        </div>
+
+        <div ref={pieChartRef} className="mt-24 pb-20">
+          <motion.div
+            className="text-5xl font-bold text-center mb-10"
+            initial={{ opacity: 0, y: 50 }}
+            animate={pieChartVisible ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.5 }}
+          >
+            <span className="text-white">Services Provided by </span>
+            <span className="text-blue-600">Qubit </span>
+          </motion.div>
+          <motion.div
+            className="flex justify-center"
+            initial={{ opacity: 0, y: 100 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, ease: "easeOut" }}
+          >
+            <motion.div
+              className="mb-20 mt-20 w-full max-w-4xl"
+              initial={{ scale: 0.9 }}
+              animate={{ scale: 1 }}
+              transition={{ duration: 0.6, ease: "easeInOut" }}
+            >
+              <CarouselCard />
+            </motion.div>
+          </motion.div>
         </div>
       </div>
+
+    </div>
       <AboutUs />
-    </>
+      </>
   );
 };