diff --git a/app/Home.css b/app/Home.css
index cdcde36..80d6ef4 100644
--- a/app/Home.css
+++ b/app/Home.css
@@ -108,6 +108,16 @@
   overflow-y: hidden;
 }
 
+.featureContainer {
+  overflow-x: hidden;
+}
+
+.featureVideo,
+.featureImage {
+  height: 512px;
+  border-radius: 12px;
+}
+
 @media (max-width: 1280px) {
   .hero-img {
     background-image: url(../public/images/heroBannerMobile.webp);
@@ -121,4 +131,9 @@
   .whatMakesItDifferent {
     font-size: 52px;
   }
+
+  .featureVideo,
+  .featureImage {
+    height: 300px;
+  }
 }
diff --git a/app/components/Feature.tsx b/app/components/Feature.tsx
new file mode 100644
index 0000000..9333fc2
--- /dev/null
+++ b/app/components/Feature.tsx
@@ -0,0 +1,141 @@
+import Container from "@/styles/Container.styled";
+import Flex from "@/styles/Flex.styled";
+import Text from "@/styles/Text.styled";
+import Image from "next/image";
+import React, { useEffect } from "react";
+import { gsap, ScrollTrigger } from "gsap/all";
+
+interface FeatureProps {
+  textOnLeft?: boolean;
+  isAImage?: boolean;
+  imageSrc?: string;
+  imageAltText?: string;
+  videoSrc?: string;
+  videoAltText?: string;
+  headingText?: string;
+  headingPara?: string;
+}
+
+const Feature = ({
+  textOnLeft = true,
+  isAImage = false,
+  imageSrc,
+  videoSrc,
+  imageAltText,
+  videoAltText,
+  headingText,
+  headingPara
+}: FeatureProps) => {
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+    const features = document.querySelectorAll(".featureContainer");
+    features.forEach((feature) => {
+      const featureText = feature.querySelector(".featureText");
+      const featureAsset = feature.querySelector(".featureAsset");
+      const tl = gsap.timeline({
+        scrollTrigger: {
+          trigger: feature,
+          start: "top bottom",
+          end: "bottom 90%",
+          scrub: true
+        }
+      });
+      tl.fromTo(featureText, { xPercent: -100, opacity: 0 }, { xPercent: 0, opacity: 1 });
+      tl.fromTo(featureAsset, { xPercent: 100, opacity: 0 }, { xPercent: 0, opacity: 1 }, "<");
+    });
+  }, []);
+  return (
+    <Flex
+      className="featureContainer"
+      as={"section"}
+      mFlexDirection={textOnLeft ? "column" : "column-reverse"}
+      height="100vh"
+      padding="48px"
+      mPadding="24px"
+      alignItems="center"
+      justifyContent="center"
+      gap="64px"
+      mGap="48px"
+    >
+      {textOnLeft && (
+        <Flex
+          as={"main"}
+          gap="24px"
+          flexDirection="column"
+          width="calc(45% - 64px)"
+          mWidth="100%"
+          className="featureText"
+        >
+          <Text
+            as={"h2"}
+            fontSize="48px"
+            mFontSize="28px"
+            fontWeight="900"
+            letterSpacing="2px"
+            textTransform="uppercase"
+            fontFamily="sans-serif"
+            color="#707172"
+            tabIndex={0}
+            className="focus-outline"
+          >
+            {headingText}
+          </Text>
+          <Text as={"p"} fontSize="18px" fontWeight="400" tabIndex={0} className="focus-outline">
+            {headingPara}
+          </Text>
+        </Flex>
+      )}
+      <Container as={"aside"} width="45%" mWidth="100%" className="featureAsset">
+        {isAImage ? (
+          <Image
+            src={imageSrc ? imageSrc : "This is a image"}
+            fill
+            alt={imageAltText ? imageAltText : ""}
+            className="featureImage"
+          />
+        ) : (
+          <iframe
+            className="featureVideo"
+            width="100%"
+            height="360"
+            allowFullScreen
+            frameBorder={0}
+            src={videoSrc ? videoSrc : "https://www.youtube.com/embed/ElZfdU54Cp8?si=Bsr85Bsc_wbeTEkG"}
+            title={videoAltText ? videoAltText : "This is a video"}
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          ></iframe>
+        )}
+      </Container>
+      {!textOnLeft && (
+        <Flex
+          as={"main"}
+          gap="24px"
+          flexDirection="column"
+          width="calc(45% - 64px)"
+          mWidth="100%"
+          className="featureText"
+        >
+          <Text
+            as={"h2"}
+            fontSize="48px"
+            mFontSize="28px"
+            fontWeight="900"
+            letterSpacing="2px"
+            textTransform="uppercase"
+            fontFamily="sans-serif"
+            color="#707172"
+            tabIndex={0}
+            className="focus-outline"
+          >
+            {headingText}
+          </Text>
+          <Text as={"p"} fontSize="18px" fontWeight="400" tabIndex={0} className="focus-outline">
+            {headingPara}
+          </Text>
+        </Flex>
+      )}
+    </Flex>
+  );
+};
+
+export default Feature;
diff --git a/app/components/LoginContainer.tsx b/app/components/LoginContainer.tsx
index 7cc41e5..058f9c7 100644
--- a/app/components/LoginContainer.tsx
+++ b/app/components/LoginContainer.tsx
@@ -18,7 +18,7 @@ const LoginContainer = () => {
 
   return (
     <Flex
-      as={"main"}
+      as={"section"}
       backgroundColor={Theme.colors.white}
       height="100vh"
       padding="48px"
@@ -26,7 +26,7 @@ const LoginContainer = () => {
       justifyContent="center"
       alignItems="center"
     >
-      <Container width="50%" padding="48px" mPadding="0" mWidth="100%" as={"section"} className="signin-signup">
+      <Container width="50%" padding="48px" mPadding="0" mWidth="100%" as={"article"} className="signin-signup">
         <Text
           fontSize="30px"
           fontWeight="500"
diff --git a/app/components/ScrollArrow.tsx b/app/components/ScrollArrow.tsx
index 2f443ae..7f55b2a 100644
--- a/app/components/ScrollArrow.tsx
+++ b/app/components/ScrollArrow.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Player } from "@lottiefiles/react-lottie-player";
-import Arrow from "../../public/images/rightArrowWhite.json";
+import rightArrowWhiteSrc from "../../public/images/rightArrowWhite.json";
+import trackArrowSrc from "../../public/images/trackArrow.json";
 import Container from "@/styles/Container.styled";
 import { useLenis } from "@studio-freight/react-lenis";
 
@@ -9,20 +10,38 @@ interface ScrollArrowProps {
   bottom?: string;
   left?: string;
   right?: string;
+  height?: string;
+  width?: string;
   rotate?: string;
+  scrollToId: string;
+  rightArrowWhite?: boolean;
+  trackArrow?: boolean;
+  className?: string;
 }
 
-const ScrollArrow = ({ top, bottom, left, right, rotate = "0deg" }: ScrollArrowProps) => {
+const ScrollArrow = ({
+  top,
+  bottom,
+  left,
+  right,
+  rotate = "0deg",
+  rightArrowWhite,
+  trackArrow,
+  scrollToId,
+  height,
+  width,
+  className
+}: ScrollArrowProps) => {
   const lenis = useLenis(() => {});
 
   const handleKBScroll = (event: React.KeyboardEvent<HTMLDivElement>) => {
     if (event.key === "Enter" || event.key === " ") {
-      lenis.scrollTo("#container-2", { lerp: 0.05 });
+      lenis.scrollTo(scrollToId, { lerp: 0.05 });
     }
   };
 
   const handleScroll = () => {
-    lenis.scrollTo("#container-2", { lerp: 0.05 });
+    lenis.scrollTo(scrollToId, { lerp: 0.05 });
   };
 
   return (
@@ -34,12 +53,23 @@ const ScrollArrow = ({ top, bottom, left, right, rotate = "0deg" }: ScrollArrowP
       $bottom={bottom}
       $right={right}
       $left={left}
+      role="button"
+      aria-label="arrow button to scroll down"
       cursor="pointer"
       onClick={handleScroll}
       onKeyDown={handleKBScroll}
-      className="focus-outline"
+      className={`focus-outline ${className}`}
     >
-      <Player autoplay loop src={Arrow} style={{ height: "150px", width: "150px" }}></Player>
+      {rightArrowWhite && (
+        <Player
+          autoplay
+          loop
+          src={rightArrowWhiteSrc}
+          style={{ height: height, width: width }}
+          className="rightArrowWhite"
+        />
+      )}
+      {trackArrow && <Player autoplay loop src={trackArrowSrc} className="trackArrow" />}
     </Container>
   );
 };
diff --git a/app/components/SignIn.tsx b/app/components/SignIn.tsx
index 5e67727..78bb16a 100644
--- a/app/components/SignIn.tsx
+++ b/app/components/SignIn.tsx
@@ -68,13 +68,13 @@ const SignIn = () => {
           fontSize="18px"
           fontWeight="400"
           color="#b60000"
-          as={"h3"}
+          as={"span"}
           $height="24px"
           data-cy="signInErrorMessage"
           aria-live="polite"
-          role="status"
+          role="alert"
         >
-          {isError ? isError : ""}
+          {isError ? isError : null}
         </Text>
         <Input
           value={email}
@@ -156,7 +156,7 @@ const SignIn = () => {
         }}
       >
         <Text fontWeight="600" fontSize="18px" tabIndex={-1}>
-          {isPending ? "Submitting..." : "Login"}
+          {isPending ? "Submitting..." : "Sign In"}
         </Text>
       </Container>
       <Container
diff --git a/app/components/SignUp.tsx b/app/components/SignUp.tsx
index 87d6720..dfefb8e 100644
--- a/app/components/SignUp.tsx
+++ b/app/components/SignUp.tsx
@@ -8,6 +8,7 @@ import Input from "@/styles/Input.styled";
 import Container from "@/styles/Container.styled";
 import { FaRegEye, FaRegEyeSlash } from "react-icons/fa6";
 import Text from "@/styles/Text.styled";
+import { SERVER_URL } from "@/utils/global";
 
 const SignUp = () => {
   const [name, setName] = useState("");
@@ -79,7 +80,7 @@ const SignUp = () => {
     }
 
     try {
-      const url = "http://localhost:5000/api/user/register";
+      const url = `${SERVER_URL}/api/user/register`;
       const data = {
         name,
         email,
diff --git a/app/components/WhatMakesItDifferent.tsx b/app/components/WhatMakesItDifferent.tsx
index 4664371..9e7ec38 100644
--- a/app/components/WhatMakesItDifferent.tsx
+++ b/app/components/WhatMakesItDifferent.tsx
@@ -1,9 +1,40 @@
-import React from "react";
+import React, { useEffect } from "react";
 import "./../Home.css";
 import Flex from "@/styles/Flex.styled";
 import ScrollArrow from "./ScrollArrow";
+import Container from "@/styles/Container.styled";
+import gsap from "gsap";
+import SplitTextJS from "split-text-js";
 
 const WhatMakesItDifferent = () => {
+  useEffect(() => {
+    const titles = gsap.utils.toArray(".ThreeDText");
+    const tl = gsap.timeline({ repeat: -1, repeatDelay: 0.2 });
+    titles.forEach((title) => {
+      const splitTitle = new SplitTextJS(title);
+      // const splitTitle = new SplitText(title, { type: 'chars' });
+      tl.from(
+        splitTitle.chars,
+        {
+          opacity: 0,
+          y: 80,
+          rotateX: -90,
+          stagger: 0.02
+        },
+        "<"
+      ).to(
+        splitTitle.chars,
+        {
+          opacity: 0,
+          y: -80,
+          rotateX: 90,
+          stagger: 0.02
+        },
+        "<1"
+      );
+    });
+  }, []);
+
   return (
     <Flex
       backgroundColor="white"
@@ -13,8 +44,35 @@ const WhatMakesItDifferent = () => {
       id="container-2"
       padding="48px"
       mPadding="24px"
+      alignItems="center"
+      justifyContent="center"
+      className="whatMakesItDifferent"
+      as={"section"}
     >
-      <ScrollArrow bottom="0" right="0" />
+      <Container as={"article"} tabIndex={-1}>
+        <Container
+          className="textWrapper focus-outline"
+          as={"main"}
+          tabIndex={0}
+          aria-label="What makes Byteping different?"
+          $position="relative"
+        >
+          <h2 className="ThreeDText">WHAT</h2>
+          <h2 className="ThreeDText">MAKES</h2>
+          <h2 className="ThreeDText">BYTEPING</h2>
+          <h2 className="ThreeDText">DIFFERENT</h2>
+          <h2 className="ThreeDText">?</h2>
+        </Container>
+      </Container>
+      <ScrollArrow
+        bottom="0"
+        right="0"
+        trackArrow
+        scrollToId="#container-1"
+        width="150px"
+        height="150px"
+        className="trackArrowContainer"
+      />
     </Flex>
   );
 };
diff --git a/app/motion/motion.css b/app/motion/motion.css
index 1f5aa35..205a4aa 100644
--- a/app/motion/motion.css
+++ b/app/motion/motion.css
@@ -88,6 +88,29 @@ svg.company-logo text.company-logo-text {
   border: 2px solid rgb(255, 255, 255);
 }
 
+.textWrapper {
+  text-align: center;
+}
+
+.ThreeDText {
+  font-size: 8rem;
+  color: rgb(0, 0, 0);
+  line-height: 0;
+}
+
+.ThreeDText:nth-child(even) {
+  color: rgb(99, 99, 99);
+}
+
+.trackArrowContainer {
+  top: calc(50% - 75px);
+}
+
+.trackArrow {
+  width: 150px;
+  height: 150px;
+}
+
 @media (max-width: 1280px) {
   svg.company-logo {
     width: 140px;
@@ -97,4 +120,17 @@ svg.company-logo text.company-logo-text {
   svg.company-logo text.company-logo-text {
     font-size: 1rem;
   }
+
+  .ThreeDText {
+    font-size: 2.8rem;
+  }
+
+  .trackArrowContainer {
+    top: calc(50% - 30px);
+  }
+
+  .trackArrow {
+    width: 60px;
+    height: 60px;
+  }
 }
diff --git a/app/page.tsx b/app/page.tsx
index 2520f96..5dbf388 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -11,6 +11,7 @@ import Container from "./styles/Container.styled";
 import Theme from "./styles/Theme.styled";
 import ScrollArrow from "./components/ScrollArrow";
 import WhatMakesItDifferent from "./components/WhatMakesItDifferent";
+import Feature from "./components/Feature";
 
 const Home = () => {
   const router = useRouter();
@@ -34,6 +35,7 @@ const Home = () => {
         alignItems="center"
         justifyContent="flex-end"
         mJustifyContent="flex-start"
+        id="container-1"
       >
         <Link href={"/"} className="hero-img-logo focus-outline" aria-label="Home page link of Byteping">
           <svg className="company-logo" aria-hidden="true">
@@ -42,15 +44,25 @@ const Home = () => {
             </text>
           </svg>
         </Link>
-        <Container border="2px solid white" padding="48px" mPadding="24px" width="528px" mWidth="312px" tabIndex={-1}>
+        <Container
+          border="2px solid white"
+          padding="48px"
+          mPadding="24px"
+          width="528px"
+          mWidth="312px"
+          tabIndex={-1}
+          as={"aside"}
+        >
           <Text
+            as={"h1"}
             fontSize="3.5rem"
             mFontSize="32px"
             fontWeight="100"
             color={Theme.colors.white}
             letterSpacing="4px"
             data-cy="companyMotto"
-            role="hero text"
+            role="heading"
+            aria-level={1}
             aria-label="Company motto sentence"
             tabIndex={0}
             className="focus-outline"
@@ -58,9 +70,29 @@ const Home = () => {
             IMPRESSIVE EXPERIENCES THAT DELIVER
           </Text>
         </Container>
-        <ScrollArrow rotate="90deg" bottom="0" right="0" />
+        <ScrollArrow
+          rotate="90deg"
+          bottom="0"
+          right="0"
+          rightArrowWhite
+          scrollToId="#container-2"
+          height="150px"
+          width="150px"
+        />
       </Flex>
       <WhatMakesItDifferent />
+      <Feature
+        headingText="Web accessibility"
+        headingPara="I design web apps with a touch of magic, making them accessible to all by weaving the threads of inclusivity into every line of code."
+        isAImage={false}
+        videoSrc="https://www.youtube.com/embed/0jjR-d2XnzE?si=G8VoZiB3sVsoQ4Kc"
+      />
+      <Feature
+        headingText="E2E Testing"
+        headingPara="I write tests that embrace failure gracefully and ironically, struggle to craft ones that always succeed. It's a coding paradox."
+        isAImage={false}
+        videoSrc="https://www.youtube.com/embed/VBgdEkmweQQ?si=UGqnG__0caal4oX7"
+      />
       <LoginContainer />
     </>
   );
diff --git a/app/styles/Global.styled.ts b/app/styles/Global.styled.ts
index 4db5d76..48af43a 100644
--- a/app/styles/Global.styled.ts
+++ b/app/styles/Global.styled.ts
@@ -10,6 +10,7 @@ const GlobalStyle = createGlobalStyle`
     body {
       -ms-overflow-style: none;
       scrollbar-width: none;
+      overflow-x: hidden;
     }
 
     body::-webkit-scrollbar {
diff --git a/app/types/split-text-js.d.ts b/app/types/split-text-js.d.ts
new file mode 100644
index 0000000..5daa363
--- /dev/null
+++ b/app/types/split-text-js.d.ts
@@ -0,0 +1 @@
+declare module "split-text-js";
diff --git a/app/utils/global.ts b/app/utils/global.ts
index 8649f72..90cae75 100644
--- a/app/utils/global.ts
+++ b/app/utils/global.ts
@@ -1 +1,2 @@
-export const SERVER_URL = "http://localhost:5000";
+// export const SERVER_URL = "http://localhost:5000";
+export const SERVER_URL = "https://byteping.onrender.com";
diff --git a/app/utils/http.ts b/app/utils/http.ts
index 0472d8d..74f12de 100644
--- a/app/utils/http.ts
+++ b/app/utils/http.ts
@@ -1,10 +1,12 @@
+import { SERVER_URL } from "./global";
+
 interface LoginType {
   email: string;
   password: string;
 }
 
 export const loginSubmitHandler = async ({ data }: { data: LoginType }) => {
-  const response = await fetch("http://localhost:5000/api/user/login", {
+  const response = await fetch(`${SERVER_URL}/api/user/login`, {
     method: "post",
     headers: {
       "Content-type": "application/json"
diff --git a/cypress/e2e/signUp.cy.ts b/cypress/e2e/signUp.cy.ts
index 97e1426..d66bea3 100644
--- a/cypress/e2e/signUp.cy.ts
+++ b/cypress/e2e/signUp.cy.ts
@@ -1,11 +1,12 @@
 /// <reference types="Cypress" />
+import { SERVER_URL } from "@/utils/global";
 import { signUpJsonTypes } from "../types";
 
 describe("sign up", () => {
   beforeEach(() => {
     cy.viewport(1500, 800);
     cy.clock();
-    cy.intercept("POST", "http://localhost:5000/api/user/register", {
+    cy.intercept("POST", `${SERVER_URL}/api/user/register`, {
       _id: "65746f73fd62be74c03caace",
       name: "Brian",
       email: "brian@gmail.com",
diff --git a/package-lock.json b/package-lock.json
index aa93560..0fe39c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "react-icons": "^4.11.0",
         "react-spinners": "^0.13.8",
         "socket.io-client": "^4.7.2",
+        "split-text-js": "^1.0.3",
         "styled-components": "^6.0.8",
         "utf-8-validate": "^5.0.10",
         "ws": "^8.14.2"
@@ -15212,6 +15213,11 @@
       "integrity": "sha512-lpT8hSQp9jAKp9mhtBU4Xjon8LPGBvLIuBiSVhMEtmLecTh2mO0tlqrAMp47tBXzMr13NJMQ2lf7RpQGLJ3HsQ==",
       "dev": true
     },
+    "node_modules/split-text-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/split-text-js/-/split-text-js-1.0.3.tgz",
+      "integrity": "sha512-M27Ou2Vje/d5PK7CMgZGjVBqjRwRw6pwS6j1/tI0utkQ/LBU4Jugc7bMBqyd2bPjgZDu4z6KYfT2lkrNUCvVXA=="
+    },
     "node_modules/split2": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
@@ -27363,6 +27369,11 @@
       "integrity": "sha512-lpT8hSQp9jAKp9mhtBU4Xjon8LPGBvLIuBiSVhMEtmLecTh2mO0tlqrAMp47tBXzMr13NJMQ2lf7RpQGLJ3HsQ==",
       "dev": true
     },
+    "split-text-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/split-text-js/-/split-text-js-1.0.3.tgz",
+      "integrity": "sha512-M27Ou2Vje/d5PK7CMgZGjVBqjRwRw6pwS6j1/tI0utkQ/LBU4Jugc7bMBqyd2bPjgZDu4z6KYfT2lkrNUCvVXA=="
+    },
     "split2": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
diff --git a/package.json b/package.json
index b9e3ab2..d24c971 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "react-icons": "^4.11.0",
     "react-spinners": "^0.13.8",
     "socket.io-client": "^4.7.2",
+    "split-text-js": "^1.0.3",
     "styled-components": "^6.0.8",
     "utf-8-validate": "^5.0.10",
     "ws": "^8.14.2"
diff --git a/public/images/trackArrow.json b/public/images/trackArrow.json
index f2abf63..4cec03a 100644
--- a/public/images/trackArrow.json
+++ b/public/images/trackArrow.json
@@ -291,9 +291,9 @@
                             "c": {
                                 "a": 0,
                                 "k": [
-                                    0.996078431372549,
-                                    0.7843137254901961,
-                                    0.15294117647058825,
+                                    0,
+                                    0,
+                                    0,
                                     1
                                 ],
                                 "ix": 4
@@ -551,9 +551,9 @@
                             "c": {
                                 "a": 0,
                                 "k": [
-                                    0.988235294118,
-                                    0.666666666667,
-                                    0.247058823529,
+                                    0,
+                                    0,
+                                    0,
                                     1
                                 ],
                                 "ix": 3
@@ -581,9 +581,9 @@
                             "c": {
                                 "a": 0,
                                 "k": [
-                                    0.996078431372549,
-                                    0.7843137254901961,
-                                    0.15294117647058825,
+                                    0,
+                                    0,
+                                    0,
                                     1
                                 ],
                                 "ix": 4
@@ -907,9 +907,9 @@
                             "c": {
                                 "a": 0,
                                 "k": [
-                                    0.988235294118,
-                                    0.666666666667,
-                                    0.247058823529,
+                                    0,
+                                    0,
+                                    0,
                                     1
                                 ],
                                 "ix": 3
@@ -937,9 +937,9 @@
                             "c": {
                                 "a": 0,
                                 "k": [
-                                    0.996078431372549,
-                                    0.7843137254901961,
-                                    0.15294117647058825,
+                                    0,
+                                    0,
+                                    0,
                                     1
                                 ],
                                 "ix": 4