diff --git a/src/components/Banner.jsx b/src/components/Banner.jsx
index f300351..91b6f50 100644
--- a/src/components/Banner.jsx
+++ b/src/components/Banner.jsx
@@ -14,7 +14,7 @@ const Banner = () => {
           p={12}
         >
           <Box w="50%" display="flex" flexDirection="column" gap={4}>
-            <Image src={text} h="104px" w="598px" />
+            <Image src={text}  w="598px" />
             <Text
               fontSize="20px"
               fontWeight={400}
diff --git a/src/components/OS/Hybrid.jsx b/src/components/OS/Hybrid.jsx
new file mode 100644
index 0000000..837e93e
--- /dev/null
+++ b/src/components/OS/Hybrid.jsx
@@ -0,0 +1,241 @@
+import { Box, Container, Heading, Image, Text } from "@chakra-ui/react";
+import React from "react";
+import htmlpng from "../../assets/html.png";
+import reactjs from "../../assets/react.png";
+import codeIgniter from "../../assets/codeigniter.png";
+import java from "../../assets/java.png";
+import anugular from "../../assets/angular.png";
+import vue from "../../assets/vue.png";
+const Hybrid = () => {
+  return (
+    <Container>
+      <Heading color="#ACACAC" fontWeight={500} fontSize="18px" mt="1rem">
+        Front-End
+      </Heading>
+      <Box display="flex" alignItems="center" flexDirection="column">
+        <Box
+          display={"flex"}
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="space-between"
+          gap={4}
+          py="2rem"
+        >
+          <Box
+            w="288px"
+            h={"99px"}
+            p={"1.4rem"}
+            display={"flex"}
+            bgColor="#0F0F0F"
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Image src={htmlpng} w="45.31px" h="50px" />
+            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
+              HTML
+            </Text>
+          </Box>
+          <Box
+            w="288px"
+            h={"99px"}
+            p={"1.4rem"}
+            display={"flex"}
+            bgColor="#0F0F0F"
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Image src={reactjs} w="45.31px" h="50px" />
+            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
+              React
+            </Text>
+          </Box>
+          <Box
+            w="288px"
+            h={"99px"}
+            p={"1.4rem"}
+            display={"flex"}
+            bgColor="#0F0F0F"
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Image src={codeIgniter} w="45.31px" h="50px" />
+            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
+              Code Igniter
+            </Text>
+          </Box>
+        </Box>
+        <Box
+          display={"flex"}
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="space-between"
+          gap={4}
+        >
+          <Box
+            w="288px"
+            h={"99px"}
+            p={"1.4rem"}
+            display={"flex"}
+            bgColor="#0F0F0F"
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Image src={java} w="45.31px" h="50px" />
+            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
+              Java
+            </Text>
+          </Box>
+          <Box
+            w="288px"
+            h={"99px"}
+            p={"1.4rem"}
+            display={"flex"}
+            bgColor="#0F0F0F"
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Image src={anugular} w="45.31px" h="50px" />
+            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
+              Anugular
+            </Text>
+          </Box>
+          <Box
+            w="288px"
+            h={"99px"}
+            p={"1.4rem"}
+            display={"flex"}
+            bgColor="#0F0F0F"
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Image src={vue} w="45.31px" h="50px" />
+            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
+              vue
+            </Text>
+          </Box>
+        </Box>
+      </Box>
+
+      <Heading color="#ACACAC" fontWeight={500} fontSize="18px" mt="1rem">
+        Back-End
+      </Heading>
+      <Box display="flex" alignItems="center" flexDirection="column">
+        <Box
+          display={"flex"}
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="space-between"
+          gap={4}
+          py="2rem"
+        >
+          <Box
+            w="288px"
+            h={"99px"}
+            p={"1.4rem"}
+            display={"flex"}
+            bgColor="#0F0F0F"
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Image src={htmlpng} w="45.31px" h="50px" />
+            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
+              HTML
+            </Text>
+          </Box>
+          <Box
+            w="288px"
+            h={"99px"}
+            p={"1.4rem"}
+            display={"flex"}
+            bgColor="#0F0F0F"
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Image src={reactjs} w="45.31px" h="50px" />
+            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
+              React
+            </Text>
+          </Box>
+          <Box
+            w="288px"
+            h={"99px"}
+            p={"1.4rem"}
+            display={"flex"}
+            bgColor="#0F0F0F"
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Image src={codeIgniter} w="45.31px" h="50px" />
+            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
+              Code Igniter
+            </Text>
+          </Box>
+        </Box>
+        <Box
+          display={"flex"}
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="space-between"
+          gap={4}
+        >
+          <Box
+            w="288px"
+            h={"99px"}
+            p={"1.4rem"}
+            display={"flex"}
+            bgColor="#0F0F0F"
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Image src={java} w="45.31px" h="50px" />
+            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
+              Java
+            </Text>
+          </Box>
+          <Box
+            w="288px"
+            h={"99px"}
+            p={"1.4rem"}
+            display={"flex"}
+            bgColor="#0F0F0F"
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Image src={anugular} w="45.31px" h="50px" />
+            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
+              Anugular
+            </Text>
+          </Box>
+          <Box
+            w="288px"
+            h={"99px"}
+            p={"1.4rem"}
+            display={"flex"}
+            bgColor="#0F0F0F"
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Image src={vue} w="45.31px" h="50px" />
+            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
+              vue
+            </Text>
+          </Box>
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default Hybrid;
diff --git a/src/components/WhatWeTeach.jsx b/src/components/WhatWeTeach.jsx
index 5ba5baf..725f3b1 100644
--- a/src/components/WhatWeTeach.jsx
+++ b/src/components/WhatWeTeach.jsx
@@ -1,12 +1,7 @@
 import { Box, Container, Flex, Heading, Image, Text } from "@chakra-ui/react";
 import React from "react";
 import CompactTable from "../components/ui/compactTabs";
-import htmlpng from "../assets/html.png";
-import reactjs from "../assets/react.png";
-import codeIgniter from "../assets/codeigniter.png";
-import java from "../assets/java.png";
-import anugular from "../assets/angular.png";
-import vue from "../assets/vue.png";
+
 const WhatWeTeach = () => {
   return (
     <Container
@@ -22,232 +17,7 @@ const WhatWeTeach = () => {
         What tech we use
       </Heading>
       <CompactTable />
-      <Box borderBottom="1px solid #E0E0E0" w={"100%"} />
-      <Heading color="#ACACAC" fontWeight={500} fontSize="18px" mt="1rem">
-        Front-End
-      </Heading>
-      <Box display="flex" alignItems="center" flexDirection="column">
-        <Box
-          display={"flex"}
-          flexDirection="row"
-          alignItems="center"
-          justifyContent="space-between"
-          gap={4}
-          py="2rem"
-        >
-          <Box
-            w="288px"
-            h={"99px"}
-            p={"1.4rem"}
-            display={"flex"}
-            bgColor="#0F0F0F"
-            flexDirection="row"
-            justifyContent="space-between"
-            alignItems="center"
-          >
-            <Image src={htmlpng} w="45.31px" h="50px" />
-            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
-              HTML
-            </Text>
-          </Box>
-          <Box
-            w="288px"
-            h={"99px"}
-            p={"1.4rem"}
-            display={"flex"}
-            bgColor="#0F0F0F"
-            flexDirection="row"
-            justifyContent="space-between"
-            alignItems="center"
-          >
-            <Image src={reactjs} w="45.31px" h="50px" />
-            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
-              React
-            </Text>
-          </Box>
-          <Box
-            w="288px"
-            h={"99px"}
-            p={"1.4rem"}
-            display={"flex"}
-            bgColor="#0F0F0F"
-            flexDirection="row"
-            justifyContent="space-between"
-            alignItems="center"
-          >
-            <Image src={codeIgniter} w="45.31px" h="50px" />
-            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
-              Code Igniter
-            </Text>
-          </Box>
-        </Box>
-        <Box
-          display={"flex"}
-          flexDirection="row"
-          alignItems="center"
-          justifyContent="space-between"
-          gap={4}
-        >
-          <Box
-            w="288px"
-            h={"99px"}
-            p={"1.4rem"}
-            display={"flex"}
-            bgColor="#0F0F0F"
-            flexDirection="row"
-            justifyContent="space-between"
-            alignItems="center"
-          >
-            <Image src={java} w="45.31px" h="50px" />
-            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
-              Java
-            </Text>
-          </Box>
-          <Box
-            w="288px"
-            h={"99px"}
-            p={"1.4rem"}
-            display={"flex"}
-            bgColor="#0F0F0F"
-            flexDirection="row"
-            justifyContent="space-between"
-            alignItems="center"
-          >
-            <Image src={anugular} w="45.31px" h="50px" />
-            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
-              Anugular
-            </Text>
-          </Box>
-          <Box
-            w="288px"
-            h={"99px"}
-            p={"1.4rem"}
-            display={"flex"}
-            bgColor="#0F0F0F"
-            flexDirection="row"
-            justifyContent="space-between"
-            alignItems="center"
-          >
-            <Image src={vue} w="45.31px" h="50px" />
-            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
-              vue
-            </Text>
-          </Box>
-        </Box>
-      </Box>
-
-      <Heading color="#ACACAC" fontWeight={500} fontSize="18px" mt="1rem">
-        Back-End
-      </Heading>
-      <Box display="flex" alignItems="center" flexDirection="column">
-        <Box
-          display={"flex"}
-          flexDirection="row"
-          alignItems="center"
-          justifyContent="space-between"
-          gap={4}
-          py="2rem"
-        >
-          <Box
-            w="288px"
-            h={"99px"}
-            p={"1.4rem"}
-            display={"flex"}
-            bgColor="#0F0F0F"
-            flexDirection="row"
-            justifyContent="space-between"
-            alignItems="center"
-          >
-            <Image src={htmlpng} w="45.31px" h="50px" />
-            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
-              HTML
-            </Text>
-          </Box>
-          <Box
-            w="288px"
-            h={"99px"}
-            p={"1.4rem"}
-            display={"flex"}
-            bgColor="#0F0F0F"
-            flexDirection="row"
-            justifyContent="space-between"
-            alignItems="center"
-          >
-            <Image src={reactjs} w="45.31px" h="50px" />
-            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
-              React
-            </Text>
-          </Box>
-          <Box
-            w="288px"
-            h={"99px"}
-            p={"1.4rem"}
-            display={"flex"}
-            bgColor="#0F0F0F"
-            flexDirection="row"
-            justifyContent="space-between"
-            alignItems="center"
-          >
-            <Image src={codeIgniter} w="45.31px" h="50px" />
-            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
-              Code Igniter
-            </Text>
-          </Box>
-        </Box>
-        <Box
-          display={"flex"}
-          flexDirection="row"
-          alignItems="center"
-          justifyContent="space-between"
-          gap={4}
-        >
-          <Box
-            w="288px"
-            h={"99px"}
-            p={"1.4rem"}
-            display={"flex"}
-            bgColor="#0F0F0F"
-            flexDirection="row"
-            justifyContent="space-between"
-            alignItems="center"
-          >
-            <Image src={java} w="45.31px" h="50px" />
-            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
-              Java
-            </Text>
-          </Box>
-          <Box
-            w="288px"
-            h={"99px"}
-            p={"1.4rem"}
-            display={"flex"}
-            bgColor="#0F0F0F"
-            flexDirection="row"
-            justifyContent="space-between"
-            alignItems="center"
-          >
-            <Image src={anugular} w="45.31px" h="50px" />
-            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
-              Anugular
-            </Text>
-          </Box>
-          <Box
-            w="288px"
-            h={"99px"}
-            p={"1.4rem"}
-            display={"flex"}
-            bgColor="#0F0F0F"
-            flexDirection="row"
-            justifyContent="space-between"
-            alignItems="center"
-          >
-            <Image src={vue} w="45.31px" h="50px" />
-            <Text fontSize="16px" fontWeight={400} color="#FFFFFF">
-              vue
-            </Text>
-          </Box>
-        </Box>
-      </Box>
+   
     </Container>
   );
 };
diff --git a/src/components/ui/compactTabs.jsx b/src/components/ui/compactTabs.jsx
index 14e6390..0126a1d 100644
--- a/src/components/ui/compactTabs.jsx
+++ b/src/components/ui/compactTabs.jsx
@@ -1,59 +1,7 @@
-// import React, { useState } from "react";
-// import {
-//   Flex,
-//   Box,
-//   IconButton,
-//   Text,
-//   Image,
-//   Container,
-// } from "@chakra-ui/react";
-// import { FaHome, FaSyncAlt, FaBinoculars } from "react-icons/fa";
-// import { SiGoogletagmanager } from "react-icons/si";
-
-// const TabsComponent = () => {
-//   const [activeTab, setActiveTab] = useState("tab1");
-
-//   const tabs = [
-//     { id: "tab1", label: "Hybrid", icon: null },
-//     { id: "tab2", label: "IOS", icon: null },
-//     { id: "tab3", label: "Andriod", icon: null },
-//     { id: "tab4", label: "AI/ML", icon: null },
-//   ];
-//   return (
-//     <Container>
-//       <Flex p={1} justifyContent="center" w="442px">
-//         {tabs.map((tab) => (
-//           <Flex
-//             key={tab.id}
-//             alignItems="center"
-//             color={activeTab === tab.id ? "white" : "gray.400"}
-//             px={"4rem"}
-//             py={1}
-//             cursor="pointer"
-//             borderBottom={activeTab === tab.id ? "2px solid #E8155D" : "none"}
-//             onClick={() => setActiveTab(tab.id)}
-//             transition="color 0.3s, border-bottom 0.3s"
-//             w="100%"
-//           >
-//             {tab.label && (
-//               <Text color="#FFFFFF" fontWeight={400} fontSize="20px">
-//                 {tab.label}
-//               </Text>
-//             )}
-//           </Flex>
-//         ))}
-//       </Flex>
-//     </Container>
-//   );
-// };
-
-// export default TabsComponent;
-
-// import React, { useState } from "react";
-import { Container, Flex, Image, Box, Text } from "@chakra-ui/react";
+import { Container, Flex,  Box, Text } from "@chakra-ui/react";
 import { useState } from "react";
-
-const HybridComponent = () => <div>Home Content</div>;
+import Hybrid from "../OS/Hybrid";
+const HybridComponent = () => <Hybrid/>;
 const IOSComponent = () => <div>IOS Content</div>;
 const AndriodComponent = () => <div>Sync Content</div>;
 const AIMLComponent = () => <div>Prosperity Content</div>;
@@ -80,7 +28,7 @@ const TabsComponent = () => {
 
   return (
     <Container>
-      <Flex p={1} justifyContent="center" w="442px">
+      <Flex  p={1} justifyContent="center" w="100%">
         {tabs.map((tab) => (
           <Flex
             key={tab.id}
@@ -112,9 +60,11 @@ const TabsComponent = () => {
           </Flex>
         ))}
       </Flex>
+        <Box borderBottom="1px solid #E0E0E0" w={"100%"} />
       <Box maxW="container.md" mt="2rem">
         <ActiveTabComponent />
       </Box>
+      
     </Container>
   );
 };