diff --git a/lenskartapp/src/Components/Login.jsx/LoginComponent.jsx b/lenskartapp/src/Components/Login.jsx/LoginComponent.jsx
index a960ba0..8dd09a8 100644
--- a/lenskartapp/src/Components/Login.jsx/LoginComponent.jsx
+++ b/lenskartapp/src/Components/Login.jsx/LoginComponent.jsx
@@ -14,17 +14,21 @@ import {
     useDisclosure,
     Image
   } from '@chakra-ui/react';
+import SignUpComponent from './SingnUpComponent';
 
 
-const LoginComponent = () => {
+const LoginComponent = ({text, asALink}) => {
     const { isOpen, onOpen, onClose } = useDisclosure()
 
   const initialRef = React.useRef(null)
   const finalRef = React.useRef(null)
+  const styleObj = {
+    border:'none',background:'none', color: asALink ? 'blue' : null
+   };
 
   return (
     <>
-      <Button onClick={onOpen}>Login</Button>
+      <Button style={styleObj} onClick={onOpen}>{text}</Button>
       {/* <Button ml={4} ref={finalRef}>
         I'll receive focus on close
       </Button> */}
@@ -54,11 +58,12 @@ const LoginComponent = () => {
           </ModalBody>
 
           <ModalFooter>
-            <Button colorScheme='blue' mr={3}>
+            <Button style={{width: '100%', background: '#cccccc', margin: 'auto', borderRadius: '25px', color: 'navy'}} colorScheme='blue' mr={3}>
               Save
             </Button>
-            <Button onClick={onClose}>Cancel</Button>
+            {/* <Button onClick={onClose}>Cancel</Button> */}
           </ModalFooter>
+          <SignUpComponent text='New member? Create an Account' asALink= {true}/>
         </ModalContent>
       </Modal>
       
diff --git a/lenskartapp/src/Components/Login.jsx/SingnUpComponent.jsx b/lenskartapp/src/Components/Login.jsx/SingnUpComponent.jsx
index 19965ad..67fe5d1 100644
--- a/lenskartapp/src/Components/Login.jsx/SingnUpComponent.jsx
+++ b/lenskartapp/src/Components/Login.jsx/SingnUpComponent.jsx
@@ -13,17 +13,22 @@ import {
     Input,
     useDisclosure
   } from '@chakra-ui/react';
+import LoginComponent from './LoginComponent';
 
+ 
 
-const SignUpComponent = () => {
+const SignUpComponent = ({text, asALink}) => {
     const { isOpen, onOpen, onClose } = useDisclosure()
 
   const initialRef = React.useRef(null)
   const finalRef = React.useRef(null)
+  const styleObj = {
+    border:'none',background:'none', marginLeft: '-45px', color: asALink ? 'blue' : null
+   };
 
   return (
     <>
-      <Button onClick={onOpen}>Login</Button>
+      <Button style={styleObj}  onClick={onOpen}>{text}</Button>
       {/* <Button ml={4} ref={finalRef}>
         I'll receive focus on close
       </Button> */}
@@ -36,7 +41,7 @@ const SignUpComponent = () => {
       >
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader>Create your account</ModalHeader>
+          <ModalHeader>Create an account</ModalHeader>
           <ModalCloseButton />
           <ModalBody pb={6}>
             <FormControl>
@@ -60,14 +65,20 @@ const SignUpComponent = () => {
               <FormLabel>Password</FormLabel>
               <Input type='password' placeholder='Password' />
             </FormControl>
+            <br />
+            <p style={{color: 'navy', fontSize: '14px'}}>Got a Referral Code?( Optional )</p>
+            <br /><br />
+            <input type="checkbox" /><span style={{color: 'navy', fontSize: '14px'}}> Get Updates on Whatsapp</span>
+            <p style={{fontSize: '13px'}}>By creating this account, you agree to our Privacy Policy</p>
           </ModalBody>
 
           <ModalFooter>
-            <Button colorScheme='blue' mr={3}>
+            <Button  style={{width: '100%', background: '#cccccc', margin: 'auto', borderRadius: '25px', color: 'navy'}}  colorScheme='blue' mr={3}>
               Create an Account
             </Button>
-            <Button onClick={onClose}>Cancel</Button>
+            {/* <Button onClick={onClose}>Cancel</Button> */}
           </ModalFooter>
+          <LoginComponent text= 'Have an account? Sign In' asALink = {true} />
         </ModalContent>
       </Modal>
     </>
diff --git a/lenskartapp/src/Components/Navbar/Navbar.jsx b/lenskartapp/src/Components/Navbar/Navbar.jsx
index a0d484e..672de31 100644
--- a/lenskartapp/src/Components/Navbar/Navbar.jsx
+++ b/lenskartapp/src/Components/Navbar/Navbar.jsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import style from "../../Styles/Navbar.module.css"
+import LoginComponent from '../Login.jsx/LoginComponent'
+import SignUpComponent from '../Login.jsx/SingnUpComponent'
 
 const Navbar = () => {
   return (
@@ -18,8 +20,12 @@ const Navbar = () => {
         
         <Link className={style.Link} to="/trackOrder">Track Order
         </Link>
-        <Link className={style.Link1} to="/signIn">Sign In & Sign Up
+        <LoginComponent text= 'Login' asALink={false} />
+        <SignUpComponent text='& Sign Up' asALink={false} />
+        {/* <Link className={style.Link1} to="/signIn">Sign In 
         </Link>
+        <Link className={style.Link1} to="/signIn">&Sign Up
+        </Link> */}
         <Link className={style.Link2} to="/whislist">
         
             Whislist</Link>