diff --git a/src/assets/gsfcircle.png b/src/assets/gsfcircle.png
new file mode 100644
index 0000000..f93eaf9
Binary files /dev/null and b/src/assets/gsfcircle.png differ
diff --git a/src/assets/properity.png b/src/assets/properity.png
new file mode 100644
index 0000000..e2c1b3a
Binary files /dev/null and b/src/assets/properity.png differ
diff --git a/src/assets/regccircle.png b/src/assets/regccircle.png
new file mode 100644
index 0000000..5c3e723
Binary files /dev/null and b/src/assets/regccircle.png differ
diff --git a/src/assets/wokacircle.png b/src/assets/wokacircle.png
new file mode 100644
index 0000000..4799831
Binary files /dev/null and b/src/assets/wokacircle.png differ
diff --git a/src/components/OS/HybridMobile.jsx b/src/components/OS/HybridMobile.jsx
index b8d91ed..277c4fb 100644
--- a/src/components/OS/HybridMobile.jsx
+++ b/src/components/OS/HybridMobile.jsx
@@ -13,7 +13,7 @@ import tsx from "../../assets/typescript.png";
 const techStack = [
   { name: "HTML", image: htmlpng },
   { name: "React", image: reactjs },
-  { name: "Code Igniter", image: codeIgniter },
+  { name: "CodeIgniter", image: codeIgniter },
   { name: "Java", image: java },
   { name: "Angular", image: angular },
   { name: "Vue", image: vue },
@@ -38,150 +38,133 @@ const Hybrid = () => {
       bgColor="black"
       gap={3}
       px={{ base: "1rem", md: "2rem" }} 
-    >
+          >
       <Heading color="#ACACAC" fontWeight={500} fontSize="18px" mt="1rem">
         Front-End
       </Heading>
-      <Box
-        display="flex"
-        alignItems="center"
-        flexDirection="column"
-        maxHeight="300px"
-        overflowY="scroll" 
-        w="100%"
-      >
+      <Box display="flex" alignItems="center" flexDirection="column">
         <Box
           display="flex"
-          flexDirection={{ base: "column", md: "column" }}
+          flexDirection={{ base: "row", md: "row" }} // Stack items on mobile
           alignItems="center"
           justifyContent="center"
           gap={4}
           py="2rem"
-          flexWrap="wrap"
+          flexWrap="wrap" // Ensure wrapping on smaller screens
         >
-          {techStack.slice(0, 3).map((tech) => (
+          {techStack.slice(0, 2).map((tech) => (
             <Box
               key={tech.name}
-              w={{ base: "100%", sm: "288px" }}
+              w={{ base: "110px", sm: "288px" }}
               h="99px"
-              p="1.4rem"
+              p="1rem"
               display="flex"
               bgColor="#0F0F0F"
-              flexDirection="column"
+              flexDirection="row"
               justifyContent="space-between"
               alignItems="center"
               filter="grayscale(100%)"
               _hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
             >
-              <Image src={tech.image} w="45.31px" h="50px" />
-              <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
+              <Image src={tech.image} h="30px" />
+              <Text fontSize="14px" fontWeight={400} color="#FFFFFF">
                 {tech.name}
               </Text>
             </Box>
           ))}
         </Box>
-
         <Box
           display="flex"
-          flexDirection={{ base: "column", md: "column" }}
+          flexDirection={{ base: "row", md: "row" }}
           alignItems="center"
           justifyContent="center"
           gap={4}
           flexWrap="wrap"
         >
-          {techStack.slice(3).map((tech) => (
+          {techStack.slice(2).map((tech) => (
             <Box
-              key={tech.name}
-              w={{ base: "100%", sm: "288px" }}
-              h="99px"
-              p="1.4rem"
-              display="flex"
-              bgColor="#0F0F0F"
-              flexDirection="column"
-              justifyContent="space-between"
-              alignItems="center"
-              filter="grayscale(100%)"
-              _hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
-            >
-              <Image src={tech.image} w="45.31px" h="50px" />
-              <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
-                {tech.name}
-              </Text>
-            </Box>
+            key={tech.name}
+            w={{ base: "110px", sm: "288px" }}
+            h="99px"
+            p="10px"
+            display="flex"
+            bgColor="#0F0F0F"
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+            filter="grayscale(100%)"
+            _hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
+          >
+            <Image src={tech.image} h="30px" />
+            <Text fontSize="14px" fontWeight={400} color="#FFFFFF">
+              {tech.name}
+            </Text>
+          </Box>
           ))}
         </Box>
       </Box>
 
-      {/* Back-End Section */}
       <Heading color="#ACACAC" fontWeight={500} fontSize="18px" mt="1rem">
         Back-End
       </Heading>
-      <Box
-        display="flex"
-        alignItems="center"
-        flexDirection="column"
-        maxHeight="300px" 
-        overflowY="auto"  
-        w="100%"
-      >
+      <Box display="flex" alignItems="center" flexDirection="column">
         <Box
           display="flex"
-          flexDirection={{ base: "column", md: "column" }}
+          flexDirection={{ base: "row", md: "row" }}
           alignItems="center"
           justifyContent="center"
           gap={4}
           py="2rem"
           flexWrap="wrap"
         >
-          {backEnd.slice(0, 3).map((tech) => (
-            <Box
-              key={tech.name}
-              w={{ base: "100%", sm: "288px" }}
-              h="99px"
-              p="1.4rem"
-              display="flex"
-              bgColor="#0F0F0F"
-              flexDirection="column"
-              justifyContent="space-between"
-              alignItems="center"
-              filter="grayscale(100%)"
-              _hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
-            >
-              <Image src={tech.image} w="45.31px" h="50px" />
-              <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
-                {tech.name}
-              </Text>
-            </Box>
+          {backEnd.slice(0, 2).map((tech) => (
+             <Box
+             key={tech.name}
+             w={{ base: "110px", sm: "288px" }}
+             h="99px"
+             p="1rem"
+             display="flex"
+             bgColor="#0F0F0F"
+             flexDirection="row"
+             justifyContent="space-between"
+             alignItems="center"
+             filter="grayscale(100%)"
+             _hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
+           >
+             <Image src={tech.image} h="30px" />
+             <Text fontSize="14px" fontWeight={400} color="#FFFFFF">
+               {tech.name}
+             </Text>
+           </Box>
           ))}
         </Box>
-
         <Box
           display="flex"
-          flexDirection={{ base: "column", md: "column" }}
+          flexDirection={{ base: "row", md: "row" }}
           alignItems="center"
           justifyContent="center"
           gap={4}
           flexWrap="wrap"
         >
-          {backEnd.slice(3).map((tech) => (
+          {backEnd.slice(2).map((tech) => (
             <Box
-              key={tech.name}
-              w={{ base: "100%", sm: "288px" }}
-              h="99px"
-              p="1.4rem"
-              display="flex"
-              bgColor="#0F0F0F"
-              flexDirection="column"
-              justifyContent="space-between"
-              alignItems="center"
-              filter="grayscale(100%)"
-              _hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
-            >
-              <Image src={tech.image} w="45.31px" h="50px" />
-              <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
-                {tech.name}
-              </Text>
-            </Box>
+            key={tech.name}
+            w={{ base: "110px", sm: "288px" }}
+            h="99px"
+            p="1rem"
+            display="flex"
+            bgColor="#0F0F0F"
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+            filter="grayscale(100%)"
+            _hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
+          >
+            <Image src={tech.image} h="30px" />
+            <Text fontSize="14px" fontWeight={400} color="#FFFFFF">
+              {tech.name}
+            </Text>
+          </Box>
           ))}
         </Box>
       </Box>
diff --git a/src/components/Testinomals.jsx b/src/components/Testinomals.jsx
index fa23d5b..1942f3e 100644
--- a/src/components/Testinomals.jsx
+++ b/src/components/Testinomals.jsx
@@ -1,28 +1,58 @@
 import React, { useEffect, useState } from "react";
-import { Box, Flex, Text, Image, Heading, HStack, Container } from "@chakra-ui/react";
+import {
+  Box,
+  Flex,
+  Text,
+  Image,
+  Heading,
+  HStack,
+  Container,
+} from "@chakra-ui/react";
 import simpletend from "../assets/simpletend.png";
 import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
 import upperQuotes from "../assets/upperquotes.png";
 import lowerQuotes from "../assets/lowerqoutes.png";
+import regc from "../assets/regccircle.png"
+import wokacircle from "../assets/wokacircle.png"
+import gsfcircle from "../assets/gsfcircle.png"
+import prosperity from "../assets/properity.png"
+
 
 const testimonials = [
   {
     quote:
-      "The team is professional and dedicated to the project; we feel they’re part of our own team.",
+      "The team is professional and dedicated to the project; we feel they’re part of our own team. Although the app is still in development, we are impressed with WDI’s ability to solve problems quickly. The team is knowledgeable and professional; they’ve delivered everything they promised and communicated effectively through emails and Zoom calls. Customers can expect a great experience.",
     author: "Saeed Saatchi",
     role: "CEO & Founder, SimpliFiend",
+    img :simpletend
   },
   {
     quote:
-      "We had an excellent experience working with the team; they were highly skilled and collaborative.",
-    author: "John Doe",
-    role: "Product Manager, Example Corp",
+      "Indeed, I am very happy with the quality of work carried out by Website Developers India Pvt. Ltd. They are prompt at work, and their team delivers on time with high-value solutions at affordable costs. Everything from them was outstanding in their delivery.",
+    author: "Manvendra Kishor",
+    role: "Director, WOKA",
+    img :wokacircle
   },
   {
     quote:
-      "Their commitment to the project was evident from the start, and they delivered exceptional results.",
-    author: "Jane Smith",
-    role: "CTO, Tech Innovations",
+      "I'm so excited about the services offered by Website Developers India Pvt. Ltd. Their team did a great job and at cheaper rates. The supportive team at WDI helped in make my project more than I had expected. I would recommend them for web or app development services.",
+    author: "Samantha Johnson",
+    role: "Founder, prosperity.",
+    img:prosperity
+  },
+  {
+    quote:
+      "I am very pleased with the services of WDI Their knowledgeable developers created a high-quality website for me at an affordable cost. The supportive team quickly solved any bugs arising in the project.",
+    author: "Sophia Garcia,",
+    role: "Founder, Regroup.",
+    img :regc
+  },
+  {
+    quote:
+      "Indeed, I am very happy with the quality of work carried out by Website Developers India Pvt. Ltd. They are prompt at work, and their team delivers on time with high-value solutions at affordable costs. Everything from them was outstanding in their delivery.",
+    author: "Shramesh Sharma",
+    role: "Founder, GetSetFit.",
+    img :gsfcircle
   },
 ];
 
@@ -71,115 +101,124 @@ const Carousel = () => {
   }, []); // Empty dependency array ensures effect runs once on mount
 
   return (
-      <Container bgColor="black" maxW="container.2xl" overflow="hidden">
-        <Heading fontWeight={600} fontSize="40px" textAlign="center" color="#ffff">Testimonial</Heading>
-        <Flex
-          w="full"
-          bg="black"
-          _dark={{
-            bg: "#3e3e3e",
-          }}
-          py={"6rem"}
-          // px={"3rem"}
-          alignItems="center"
-          justifyContent="center"
-        >
-          <Flex w="full" pos="relative">
-            <Flex h="100%" w="100%" {...carouselStyle}>
-              {testimonials.map((testimonial, index) => (
+    <Container bgColor="black" maxW="container.2xl" overflow="hidden"  p={4}>
+
+      <Heading
+        fontWeight={600}
+        fontSize="40px"
+        textAlign="center"
+        color="#ffff"
+      >
+        Testimonial
+      </Heading>
+      <Flex
+        w="full"
+        bg="black"
+        _dark={{
+          bg: "#3e3e3e",
+        }}
+        py={"6rem"}
+        // px={"3rem"}
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Flex w="full" pos="relative" p={4}>
+          <Flex h="100%" w="100%" {...carouselStyle}>
+            {testimonials.map((testimonial, index) => (
+              <Box
+                px="3rem"
+                key={`slide-${index}`}
+                flex="none"
+                boxSize="full"
+                shadow="md"
+              >
                 <Box
-                  px="3rem"
-                  key={`slide-${index}`}
-                  flex="none"
-                  boxSize="full"
-                  shadow="md"
+                  position="relative"
+                  display="flex"
+                  flexDirection="column"
+                  alignItems="center"
+                  textAlign="center"
                 >
                   <Box
-                    position="relative"
                     display="flex"
                     flexDirection="column"
+                    bgColor="#6D6D6D40"
                     alignItems="center"
-                    textAlign="center"
+                    px="5rem"
+                    py="4rem"
+                    w="100%"
+                    h="300px"
+                    gap="1.1rem"
+                    borderRadius="10px"
                   >
-                    <Box
-                      display="flex"
-                      flexDirection="column"
-                      bgColor="#6D6D6D40"
-                      p="4rem"
-                      w="100%"
-                      h="100%"
-                      gap="2rem"
-                      borderRadius="10px"
+                    <Heading
+                      mt="1rem"
+                      fontSize="20px"
+                      lineHeight="30px"
+                      fontWeight={600}
+                      color="#FFFFFF"
                     >
-                      <Heading
-                        mt="1rem"
-                        fontSize="20px"
-                        lineHeight="30px"
-                        fontWeight={600}
-                        color="#FFFFFF"
-                      >
-                        “{testimonial.quote}”
-                      </Heading>
-                      <Text
-                        color="#E8155D"
-                        fontWeight={500}
-                        fontSize="18px"
-                        lineHeight="27px"
-                      >
-                        {testimonial.role}
-                      </Text>
-                      <Text
-                        color="#E8155D"
-                        fontWeight={500}
-                        fontSize="18px"
-                        lineHeight="27px"
-                      >
-                        {testimonial.author}
-                      </Text>
-                    </Box>
-                    <Box
-                      p={2}
-                      bg="black"
-                      position="absolute"
-                      w="149px"
-                      h="149px"
-                      top="-80px"
-                      left="50%"
-                      transform="translateX(-50%)"
-                      borderRadius="50%"
+                      “{testimonial.quote}”
+                    </Heading>
+                    <Text
+                      color="#E8155D"
+                      fontWeight={500}
+                      fontSize="18px"
+                      lineHeight="20px"
                     >
-                      <Image src={simpletend} w="129px" h="129px" />
-                    </Box>
-                    <Image
-                      src={lowerQuotes}
-                      w="99.15px"
-                      h="88.39px"
-                      position="absolute"
-                      bottom="-37"
-                      right="10px"
-                    />
-                    <Image
-                      src={upperQuotes}
-                      w="99.15px"
-                      h="88.39px"
-                      position="absolute"
-                      top="-37"
-                      left="40px"
-                    />
+                      {testimonial.role}
+                    </Text>
+                    <Text
+                      color="#E8155D"
+                      fontWeight={500}
+                      fontSize="18px"
+                      lineHeight="27px"
+                    >
+                      {testimonial.author}
+                    </Text>
                   </Box>
+                  <Box
+                    p={2}
+                    bg="black"
+                    position="absolute"
+                    w="149px"
+                    h="149px"
+                    top="-80px"
+                    left="50%"
+                    transform="translateX(-50%)"
+                    borderRadius="50%"
+                  >
+                    <Image src={testimonial.img} w="129px" h="129px" />
+                  </Box>
+                  <Image
+                    src={lowerQuotes}
+                    w="99.15px"
+                    h="88.39px"
+                    position="absolute"
+                    bottom="-37"
+                    right="10px"
+                  />
+                  <Image
+                    src={upperQuotes}
+                    w="99.15px"
+                    h="88.39px"
+                    position="absolute"
+                    top="-37"
+                    left="40px"
+                  />
                 </Box>
-              ))}
-            </Flex>
-            <Text {...arrowStyles} left="0" onClick={prevSlide}>
-              <FaChevronLeft />
-            </Text>
-            <Text {...arrowStyles} right="0" onClick={nextSlide}>
-              <FaChevronRight />
-            </Text>
-
+              </Box>
+            ))}
           </Flex>
+          <Text {...arrowStyles} left="0" onClick={prevSlide}>
+            <FaChevronLeft />
+          </Text>
+          <Text {...arrowStyles} right="0" onClick={nextSlide}>
+            <FaChevronRight />
+          </Text>
         </Flex>
-      </Container>
+      </Flex>
+    </Container>
   );
 };
 
diff --git a/src/components/ui/Mobile/Tabs.jsx b/src/components/ui/Mobile/Tabs.jsx
index 585d965..3e80042 100644
--- a/src/components/ui/Mobile/Tabs.jsx
+++ b/src/components/ui/Mobile/Tabs.jsx
@@ -1,6 +1,6 @@
 import { Container, Flex, Box, Text } from "@chakra-ui/react";
 import { useState } from "react";
-import Hybrid from "../../OS/Hybrid";
+import Hybrid from "../../OS/HybridMobile";
 
 const HybridComponent = () => <Hybrid />;
 const IOSComponent = () => <div>IOS Content</div>;