diff --git a/src/App.jsx b/src/App.jsx
index c56be86..83b85fd 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -17,7 +17,7 @@ import NoInternetScreen from "./Pages/NoInternetScreen";
 import WelcomeToOptifii from "./Pages/Onboarding/WelcomeToOptifii";
 import LoginPhoneNumber from "./Pages/Onboarding/LoginPhoneNumber";
 import LoginEmailAddress from "./Pages/Onboarding/LoginEmailAddress";
-import LoginEmailOtp from "./Pages/Onboarding/LoginEmailOtp";
+import LoginEmailOtp from "./Pages/Onboarding/LoginOtp";
 
 const App = () => {
   // const { isAuthenticate } = useSelector((state) => state?.auth);
diff --git a/src/Pages/Onboarding/Footer.jsx b/src/Pages/Onboarding/Footer.jsx
index e6d2591..ec4caca 100644
--- a/src/Pages/Onboarding/Footer.jsx
+++ b/src/Pages/Onboarding/Footer.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Box, Text, HStack, VStack, Link, Image, Divider, Stack, Container } from '@chakra-ui/react';
-import o_logo from '../../assets/o_logo.png';
+import o_logo from '../../assets/o_logo.svg';
 import { FaDribbble, FaLinkedinIn } from "react-icons/fa";
 import { GrInstagram } from "react-icons/gr";
 
diff --git a/src/Pages/Onboarding/Header.jsx b/src/Pages/Onboarding/Header.jsx
index 6033dff..a8ea80b 100644
--- a/src/Pages/Onboarding/Header.jsx
+++ b/src/Pages/Onboarding/Header.jsx
@@ -2,7 +2,7 @@ import { Box, Container, HStack, Image, Text } from '@chakra-ui/react'
 import React from 'react'
 import SecondaryButton from '../../Components/Buttons/SecondaryButton'
 import PrimaryButton from '../../Components/Buttons/PrimaryButton'
-import optifii_logo from '../../assets/optifii_logo.png'
+import optifii_logo from '../../assets/optifii_logo.svg'
 
 const Header = () => {
     return (
diff --git a/src/Pages/Onboarding/LoginEmailAddress.jsx b/src/Pages/Onboarding/LoginEmailAddress.jsx
index 32f7cf8..759b327 100644
--- a/src/Pages/Onboarding/LoginEmailAddress.jsx
+++ b/src/Pages/Onboarding/LoginEmailAddress.jsx
@@ -4,15 +4,20 @@ import PrimaryButton from '../../Components/Buttons/PrimaryButton'
 import { HiOutlineMail } from "react-icons/hi";
 import SecondaryButton from '../../Components/Buttons/SecondaryButton';
 import LoginEmailAddressFrame from './LoginEmailAddressFrame';
+import { useNavigate } from 'react-router-dom';
 
 const LoginEmailAddress = () => {
+
+    const navigate = useNavigate();
+
     return (
         <LoginEmailAddressFrame>
-            <Box
-                w={"100%"}
-                my={5}
-            >
-                <Container maxW={'container.xl'}>
+            <Container maxW={'container.xl'}>
+                <Box
+                    w={"100%"}
+                    my={5}
+                    boxShadow={"md"}
+                >
                     <Box bg={'#fff'} p={4} borderRadius={"md"} display={"flex"} justifyContent={"center"}>
                         <Box maxW={650} >
                             <Text
@@ -34,12 +39,12 @@ const LoginEmailAddress = () => {
                             </Text>
                             <Box mt={12}>
                                 <Text
-                                 fontSize={"sm"}
-                                 fontWeight={500}
-                                 color={"#313039"}
-                                 mb={2}
+                                    fontSize={"sm"}
+                                    fontWeight={500}
+                                    color={"#313039"}
+                                    mb={2}
                                 >
-                                Enter e-mail address
+                                    Enter e-mail address
                                 </Text>
                                 <InputGroup>
                                     <InputLeftElement pointerEvents='none'>
@@ -53,7 +58,9 @@ const LoginEmailAddress = () => {
 
                                 <Box mt={6}>
                                     <HStack justifyContent={"center"} mt={6} >
-                                        <PrimaryButton w={"300px"} title={"Send OTP"} />
+                                        <PrimaryButton
+                                            onClick={() => navigate("/login-otp")}
+                                            w={"300px"} title={"Send OTP"} />
                                     </HStack>
                                     <HStack justifyContent={"center"} mt={4} >
                                         <Text fontSize={"xs"} fontWeight={500} mb={0}>Don’t  have an account?</Text>
@@ -82,8 +89,8 @@ const LoginEmailAddress = () => {
 
 
                     </Box>
-                </Container>
-            </Box>
+                </Box>
+            </Container>
         </LoginEmailAddressFrame>
     )
 }
diff --git a/src/Pages/Onboarding/LoginEmailOtp.jsx b/src/Pages/Onboarding/LoginOtp.jsx
similarity index 88%
rename from src/Pages/Onboarding/LoginEmailOtp.jsx
rename to src/Pages/Onboarding/LoginOtp.jsx
index 49a5f59..2aafa21 100644
--- a/src/Pages/Onboarding/LoginEmailOtp.jsx
+++ b/src/Pages/Onboarding/LoginOtp.jsx
@@ -1,16 +1,17 @@
 import React from 'react'
 import { Box, Input, PinInput, PinInputField, Button, Text, Checkbox, HStack, Link, Container, InputGroup, InputLeftElement, Divider } from '@chakra-ui/react';
 import PrimaryButton from '../../Components/Buttons/PrimaryButton'
-import LoginEmailOtpFrame from './LoginEmailOtpFrame';
+import LoginOtpFrame from './LoginOtpFrame';
 
-const LoginEmailOtp = () => {
+const LoginOtp = () => {
     return (
-        <LoginEmailOtpFrame>
-            <Box
-                w={"100%"}
-                my={5}
-            >
-                <Container maxW={'container.xl'}>
+        <LoginOtpFrame>
+            <Container maxW={'container.xl'}>
+                <Box
+                    w={"100%"}
+                    my={5}
+                    boxShadow={"md"}
+                >
                     <Box bg={'#fff'} p={4} borderRadius={"md"} display={"flex"} justifyContent={"center"}>
                         <Box maxW={650} >
                             <Text
@@ -62,10 +63,10 @@ const LoginEmailOtp = () => {
 
 
                     </Box>
-                </Container>
-            </Box>
-        </LoginEmailOtpFrame>
+                </Box>
+            </Container>
+        </LoginOtpFrame>
     )
 }
 
-export default LoginEmailOtp
\ No newline at end of file
+export default LoginOtp
\ No newline at end of file
diff --git a/src/Pages/Onboarding/LoginEmailOtpFrame.jsx b/src/Pages/Onboarding/LoginOtpFrame.jsx
similarity index 88%
rename from src/Pages/Onboarding/LoginEmailOtpFrame.jsx
rename to src/Pages/Onboarding/LoginOtpFrame.jsx
index dbfbd7e..7a0355f 100644
--- a/src/Pages/Onboarding/LoginEmailOtpFrame.jsx
+++ b/src/Pages/Onboarding/LoginOtpFrame.jsx
@@ -4,7 +4,7 @@ import { Box } from '@chakra-ui/react'
 import Header from './Header'
 import Footer from './Footer'
 
-const LoginEmailOtpFrame = ({children}) => {
+const LoginOtpFrame = ({children}) => {
     return (
 
         <Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
@@ -27,4 +27,4 @@ const LoginEmailOtpFrame = ({children}) => {
     )
 }
 
-export default LoginEmailOtpFrame
\ No newline at end of file
+export default LoginOtpFrame
\ No newline at end of file
diff --git a/src/Pages/Onboarding/LoginPhoneNumber.jsx b/src/Pages/Onboarding/LoginPhoneNumber.jsx
index 45db6bb..a374813 100644
--- a/src/Pages/Onboarding/LoginPhoneNumber.jsx
+++ b/src/Pages/Onboarding/LoginPhoneNumber.jsx
@@ -4,15 +4,20 @@ import { Box, Input, Button, Text, Checkbox, HStack, Link, Container, InputGroup
 import PrimaryButton from '../../Components/Buttons/PrimaryButton'
 import { MdOutlineLocalPhone } from "react-icons/md";
 import SecondaryButton from '../../Components/Buttons/SecondaryButton';
+import { useNavigate } from 'react-router-dom';
 
 const LoginPhoneNumber = () => {
+
+    const navigate = useNavigate();
+
     return (
         <LoginPhoneNumberFrame>
-            <Box
-                w={"100%"}
-                my={5}
-            >
-                <Container maxW={'container.xl'}>
+            <Container maxW={'container.xl'}>
+                <Box
+                    w={"100%"}
+                    my={5}
+                    boxShadow={"md"}
+                >
                     <Box bg={'#fff'} p={4} borderRadius={"md"} display={"flex"} justifyContent={"center"}>
                         <Box maxW={650} >
                             <Text
@@ -33,13 +38,13 @@ const LoginPhoneNumber = () => {
                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur.
                             </Text>
                             <Box mt={12}>
-                            <Text
-                                fontSize={"sm"}
-                                fontWeight={500}
-                                color={"#313039"}
-                                mb={2}
+                                <Text
+                                    fontSize={"sm"}
+                                    fontWeight={500}
+                                    color={"#313039"}
+                                    mb={2}
                                 >
-                                Enter phone number
+                                    Enter phone number
                                 </Text>
                                 <InputGroup>
                                     <InputLeftElement pointerEvents='none'>
@@ -53,7 +58,9 @@ const LoginPhoneNumber = () => {
 
                                 <Box mt={6}>
                                     <HStack justifyContent={"center"} mt={6} >
-                                        <PrimaryButton w={"300px"} title={"Send OTP"} />
+                                        <PrimaryButton
+                                          onClick={() => navigate("/login-otp")}
+                                         w={"300px"} title={"Send OTP"} />
                                     </HStack>
                                     <HStack justifyContent={"center"} mt={4} >
                                         <Text fontSize={"xs"} fontWeight={500} mb={0}>Don’t  have an account?</Text>
@@ -82,8 +89,8 @@ const LoginPhoneNumber = () => {
 
 
                     </Box>
-                </Container>
-            </Box>
+                </Box>
+            </Container>
         </LoginPhoneNumberFrame>
     )
 }
diff --git a/src/Pages/Onboarding/WelcomeToOptifii.jsx b/src/Pages/Onboarding/WelcomeToOptifii.jsx
index 4eb4a9d..0984803 100644
--- a/src/Pages/Onboarding/WelcomeToOptifii.jsx
+++ b/src/Pages/Onboarding/WelcomeToOptifii.jsx
@@ -1,21 +1,31 @@
 import React, { useState } from 'react'
 import WelcomeFrame from './WelcomeFrame'
-import { Box, Grid, GridItem, Input, FormControl, FormLabel, InputGroup, InputRightElement, Button, Text, Checkbox, HStack, Link, UnorderedList, ListItem, Container } from '@chakra-ui/react';
+import { Box, Grid, GridItem, Input, FormControl, FormLabel, InputGroup, InputRightElement, Button, Text, Checkbox, HStack, Link, UnorderedList, ListItem, Container, useDisclosure, Modal, ModalOverlay, ModalHeader, ModalCloseButton, ModalBody, ModalContent, VStack, Image } from '@chakra-ui/react';
 import { FaEye, FaEyeSlash } from 'react-icons/fa';
 import PrimaryButton from '../../Components/Buttons/PrimaryButton'
+import { CiMobile3 } from "react-icons/ci";
+import { FcGoogle } from "react-icons/fc";
+import bell from "../../assets/bell.svg"
+import { Navigate, useNavigate } from 'react-router-dom';
 
 const WelcomeToOptifii = () => {
     const [showPassword, setShowPassword] = useState(false);
     const [showConfirmPassword, setShowConfirmPassword] = useState(false);
     const handlePasswordVisibility = () => setShowPassword(!showPassword);
 
+    const { isOpen, onOpen, onClose } = useDisclosure()
+
+    const navigate = useNavigate();
+
     return (
         <WelcomeFrame>
-            <Box
-                w={"100%"}
-                my={5}
-            >
-                <Container maxW={'container.xl'}>
+
+            <Container maxW={'container.xl'}>
+                <Box
+                    w={"100%"}
+                    my={5}
+                    boxShadow={"md"}
+                >
                     <Box bg={'#fff'} p={4} borderRadius={"md"}>
                         <Text
                             color={'#100F14'}
@@ -42,7 +52,7 @@ const WelcomeToOptifii = () => {
                                 <GridItem colSpan={{ base: 4, md: 2 }}>
                                     <FormControl>
                                         <FormLabel fontSize="sm">Company</FormLabel>
-                                        <Input fontSize="xs" fontWeight={500} value="Website Developers India Pvt Ltd"  />
+                                        <Input fontSize="xs" fontWeight={500} value="Website Developers India Pvt Ltd" />
                                     </FormControl>
                                 </GridItem>
 
@@ -207,7 +217,7 @@ const WelcomeToOptifii = () => {
                                                     bg={"transparent"}
                                                     _hover={{ opacity: 0.7 }}
 
-                                                    onClick={()=>setShowConfirmPassword(!showConfirmPassword)}>
+                                                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}>
                                                     {showConfirmPassword ? <FaEyeSlash /> : <FaEye />}
                                                 </Button>
                                             </InputRightElement>
@@ -226,7 +236,9 @@ const WelcomeToOptifii = () => {
                                     </Checkbox>
                                 </HStack>
                                 <HStack justifyContent={"center"} mt={6} >
-                                    <PrimaryButton w={"300px"} title={"Register with us"} />
+                                    <PrimaryButton
+                                        onClick={onOpen}
+                                        w={"300px"} title={"Register with us"} />
                                 </HStack>
                                 <HStack justifyContent={"center"} mt={4} >
                                     <Text fontSize={"xs"} fontWeight={500} mb={0}>Already have an account?</Text>
@@ -234,12 +246,132 @@ const WelcomeToOptifii = () => {
                                 </HStack>
                             </Box>
                         </Box>
-
-
-
                     </Box>
-                </Container>
-            </Box>
+                </Box>
+                <Modal isOpen={isOpen} onClose={onClose}>
+                    <ModalOverlay />
+                    <ModalContent>
+                        <ModalHeader></ModalHeader>
+                        <ModalCloseButton />
+                        <ModalBody>
+                            <HStack justifyContent={"center"} mb={2}>
+                                <Image
+                                    src={bell}
+                                    alt="bell"
+                                    w={10}
+                                    h={12}
+                                ></Image>
+                            </HStack>
+                            <Text
+                                color={"#100F14"}
+                                fontSize={"xl"}
+                                fontWeight={"600"}
+                                textAlign={"center"}
+                                mb={2}
+                            >
+                                Register to get free access
+                                to all our recourses
+                            </Text>
+                            <Text
+                                color={"#100F14"}
+                                fontSize={"sm"}
+                                fontWeight={"500"}
+                                textAlign={"center"}
+                            >
+                                Sign up to see more
+                            </Text>
+                            <VStack>
+                                <Button
+                                    onClick={() => navigate("/login-email-address")}
+                                    _hover={{ opacity: 0.8 }}
+                                    borderRadius={"full"}
+                                    bg={"#100F14"}
+                                    color={"#fff"}
+                                    border={"1px solid #9794AA"}
+                                    fontSize={"sm"}
+                                    fontWeight={"500"}
+                                    w={"100%"}
+                                    px={4}
+                                    py={6}
+                                >Continue with email</Button>
+                                <Button
+                                onClick={() => navigate("/login-phone-number")}
+                                    _hover={{ opacity: 0.8 }}
+                                    borderRadius={"full"}
+                                    color={"#100F14"}
+                                    bg={"transparent"}
+                                    border={"1px solid #9794AA"}
+                                    fontSize={"sm"}
+                                    fontWeight={"500"}
+                                    w={"100%"}
+                                    px={4}
+                                    py={6}
+                                >
+                                    <CiMobile3 style={{ marginRight: "8px", color: "#6311CB" }} size={20} />
+                                    Mobile number
+                                </Button>
+                                <Button
+                                    _hover={{ opacity: 0.8 }}
+                                    borderRadius={"full"}
+                                    color={"#100F14"}
+                                    bg={"transparent"}
+                                    border={"1px solid #9794AA"}
+                                    fontSize={"sm"}
+                                    fontWeight={"500"}
+                                    w={"100%"}
+                                    px={4}
+                                    py={6}
+                                >
+                                    <FcGoogle style={{ marginRight: "8px", color: "#6311CB" }} size={20} />
+                                    Continue with Google
+                                </Button>
+                            </VStack>
+
+                            <Text
+                                color={"#686677"}
+                                fontSize={"xs"}
+                                fontWeight={500}
+                                textAlign={"center"}
+                                mt={4}
+                                mb={0}
+                            >
+                                By continuing, you agree to the <Link
+                                    color={"#100F14"}
+                                    textDecoration={"underline"}
+                                    fontWeight={600}
+                                >Terms of Service </Link>
+                            </Text>
+                            <Text
+                                color={"#686677"}
+                                fontSize={"xs"}
+                                fontWeight={500}
+                                textAlign={"center"}
+                            >
+                                and acknowledge you’ve read our <Link
+                                    color={"#100F14"}
+                                    textDecoration={"underline"}
+                                    fontWeight={600}
+                                >Privacy Policy.</Link>
+                            </Text>
+                            <Text
+                                color={"#686677"}
+                                fontSize={"sm"}
+                                fontWeight={500}
+                                textAlign={"center"}
+                                mt={4}
+                            >
+                                Already a member? <Link
+                                    color={"#100F14"}
+                                    textDecoration={"underline"}
+                                    fontWeight={600}
+                                >Log in</Link>
+                            </Text>
+                        </ModalBody>
+
+
+                    </ModalContent>
+                </Modal>
+            </Container>
         </WelcomeFrame>
     )
 }
diff --git a/src/assets/bell.svg b/src/assets/bell.svg
new file mode 100644
index 0000000..2e65f74
--- /dev/null
+++ b/src/assets/bell.svg
@@ -0,0 +1,6 @@
+<svg width="38" height="49" viewBox="0 0 38 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.5 37L37.5 18.5C37.5 8.28274 29.2173 1.41726e-05 19 1.28328e-05C8.78274 1.1493e-05 0.500011 8.28274 0.50001 18.5L0.500008 37L37.5 37Z" fill="#6938EF"/>
+<path d="M8.28921 36.9999C8.28921 30.9054 13.2298 25.9648 19.3243 25.9648C25.4188 25.9648 30.3594 30.9054 30.3594 36.9999L8.28921 36.9999Z" fill="#F0276C"/>
+<path d="M8.28921 37.0001C8.28921 43.0946 13.2298 48.0352 19.3243 48.0352C25.4188 48.0352 30.3594 43.0946 30.3594 37.0001L8.28921 37.0001Z" fill="#EDB500"/>
+<path d="M19 22.0703C22.0473 22.0703 24.5176 19.6 24.5176 16.5528C24.5176 13.5055 22.0473 11.0352 19 11.0352C15.9528 11.0352 13.4825 13.5055 13.4825 16.5528C13.4825 19.6 15.9528 22.0703 19 22.0703Z" fill="#FAFAFF"/>
+</svg>
diff --git a/src/assets/o_logo.png b/src/assets/o_logo.png
deleted file mode 100644
index 75a2c26..0000000
Binary files a/src/assets/o_logo.png and /dev/null differ
diff --git a/src/assets/o_logo.svg b/src/assets/o_logo.svg
new file mode 100644
index 0000000..6efa75e
--- /dev/null
+++ b/src/assets/o_logo.svg
@@ -0,0 +1,3 @@
+<svg width="46" height="50" viewBox="0 0 46 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.6228 49.1689C32.779 49.1689 41.4968 43.0104 45.2455 34.224C41.7403 32.4345 39.3402 28.7894 39.3402 24.5838C39.3402 20.3783 41.7401 16.7334 45.245 14.9438C41.496 6.15802 32.7786 0 22.6228 0C12.4669 0 3.7494 6.1581 0.000493148 14.944C3.50523 16.7337 5.90492 20.3785 5.90492 24.5838C5.90492 28.7893 3.505 32.4342 0 34.2238C3.74864 43.0103 12.4665 49.1689 22.6228 49.1689ZM22.6228 41.3018C31.8556 41.3018 39.3402 33.8172 39.3402 24.5844C39.3402 15.3516 31.8556 7.86696 22.6228 7.86696C13.39 7.86696 5.90535 15.3516 5.90535 24.5844C5.90535 33.8172 13.39 41.3018 22.6228 41.3018Z" fill="white"/>
+</svg>