diff --git a/src/components/Home/Home.tsx b/src/components/Home/Home.tsx
index 749b0e33..a70c6d80 100644
--- a/src/components/Home/Home.tsx
+++ b/src/components/Home/Home.tsx
@@ -28,7 +28,7 @@ const Home: React.FC = () => (
             <Button className="flex justify-center items-center mr-5 mb-5 bg-blue-500 hover:bg-blue-700 text-white py-1 px-16 rounded w-40 h-9 font-sans font-bold">
               Apply
             </Button>
-            <Button className="flex justify-center items-center mr-5 mb-5 text-black py-1 px-16 rounded w-40 h-9 font-sans font-bold">
+            <Button className="flex justify-center items-center mr-5 mb-5 text-black py-1 px-16 rounded w-40 h-9 font-sans">
               See more
             </Button>
           </div>
diff --git a/src/components/Layout/MenuDrawer/MenuDrawer.tsx b/src/components/Layout/MenuDrawer/MenuDrawer.tsx
index d0b8cc2a..7f0a03bf 100644
--- a/src/components/Layout/MenuDrawer/MenuDrawer.tsx
+++ b/src/components/Layout/MenuDrawer/MenuDrawer.tsx
@@ -15,9 +15,14 @@ const { Text } = Typography;
 interface MenuDrawerProps {
   openMenu: boolean;
   setOpenMenu: (value: boolean) => void;
+  handleMentorRegistration: () => void;
 }
 
-const MenuDrawer: React.FC<MenuDrawerProps> = ({ openMenu, setOpenMenu }) => {
+const MenuDrawer: React.FC<MenuDrawerProps> = ({
+  openMenu,
+  setOpenMenu,
+  handleMentorRegistration,
+}) => {
   const handleOpenMenu = (): boolean => {
     return openMenu;
   };
@@ -50,6 +55,12 @@ const MenuDrawer: React.FC<MenuDrawerProps> = ({ openMenu, setOpenMenu }) => {
         <a href="" target="_blank" rel="noreferrer">
           <Text className={styles.antTypography}>Join Us</Text>
         </a>
+        <Button
+          className="mr-5 mb-5 w-40 h-9 font-sans text-black-400 py-1 px-4 rounded"
+          onClick={handleMentorRegistration}
+        >
+          Become a Mentor
+        </Button>
         <Space direction="horizontal" size={20}>
           <a
             href="https://www.facebook.com/sustainableeducationfoundation/"
diff --git a/src/components/Layout/Navbar/Navbar.tsx b/src/components/Layout/Navbar/Navbar.tsx
index 2b352ca3..076c7a4f 100644
--- a/src/components/Layout/Navbar/Navbar.tsx
+++ b/src/components/Layout/Navbar/Navbar.tsx
@@ -63,6 +63,7 @@ const Navbar: React.FC = () => {
     } else {
       navigate('/mentor-registration');
     }
+    setOpenMenu(false);
   };
 
   return (
@@ -95,13 +96,13 @@ const Navbar: React.FC = () => {
               <a href="" target="_blank" rel="noreferrer">
                 <Text className={styles.antTypography}>Join Us</Text>
               </a>
+              <Button
+                className="mr-5 mb-5 w-40 h-9 font-sans text-black-400 py-1 px-4 rounded"
+                onClick={handleMentorRegistration}
+              >
+                Become a Mentor
+              </Button>
             </div>
-            <Button
-              className={styles.loginButton}
-              onClick={handleMentorRegistration}
-            >
-              Become a Mentor
-            </Button>
           </Space>
         </Col>
         <Col md={4} lg={4} xl={3} className={styles.socialMediaContainer}>
@@ -168,7 +169,11 @@ const Navbar: React.FC = () => {
           </Space>
         </Col>
       </Row>
-      <MenuDrawer openMenu={openMenu} setOpenMenu={setOpenMenu} />
+      <MenuDrawer
+        openMenu={openMenu}
+        setOpenMenu={setOpenMenu}
+        handleMentorRegistration={handleMentorRegistration}
+      />
       {isLoginModalVisible ? (
         <LoginModal handleClose={handleLoginModalClose} />
       ) : null}
diff --git a/src/components/LoginModal/index.tsx b/src/components/LoginModal/index.tsx
index 9dfc4ab3..d8555d12 100644
--- a/src/components/LoginModal/index.tsx
+++ b/src/components/LoginModal/index.tsx
@@ -50,7 +50,7 @@ const LoginModal: React.FC<LoginModalProps> = ({ handleClose }) => {
 
   return (
     <div className="fixed z-10 inset-0 overflow-y-auto">
-      <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      <div className="flex min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0 flex-col items-center justify-center h-screen w-full p-5 ">
         <div className="fixed inset-0 transition-opacity">
           <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
         </div>
diff --git a/src/components/LogoutModal/index.tsx b/src/components/LogoutModal/index.tsx
index 6434fdcc..3751bd1f 100644
--- a/src/components/LogoutModal/index.tsx
+++ b/src/components/LogoutModal/index.tsx
@@ -34,7 +34,7 @@ const LogoutModal: React.FC<LogoutModalProps> = ({ onClose }) => {
 
   return (
     <div className="fixed z-10 inset-0 overflow-y-auto">
-      <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      <div className="flex min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0 flex-col items-center justify-center h-screen w-full p-5 ">
         <div className="fixed inset-0 transition-opacity">
           <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
         </div>