diff --git a/src/components/layout/guest/MainNav.jsx b/src/components/layout/guest/MainNav.jsx
index 283b222..a423ec7 100644
--- a/src/components/layout/guest/MainNav.jsx
+++ b/src/components/layout/guest/MainNav.jsx
@@ -92,9 +92,9 @@ const MainNav = () => {
           <Nav.Link href="#feature" onClick={() => setShow(false)} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>Feature.</Nav.Link>
           <Nav.Link href="#youget" onClick={() => setShow(false)} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>You Get.</Nav.Link>
           <Nav.Link href="#contacts" onClick={() => setShow(false)} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top border-bottom text-blue'>Join Now.</Nav.Link>
-          <div className="d-flex w-100 justify-content-between mt-3">
-            <Nav.Link href="/signup" onClick={() => setShow(false)} style={{fontSize:"3.5vh"}} className='w-50 text-center me-1 py-2 border-top text-black bg-warning rounded-3'>Sign Up</Nav.Link>
-            <Nav.Link href="/login" onClick={() => setShow(false)} style={{fontSize:"3.5vh"}} className='w-50 text-center ms-1 py-2 border-top border-bottom text-white bg-blue rounded-3'>Login</Nav.Link>
+          <div className="d-flex w-100 justify-content-between mt-2">
+            <Nav.Link href="/signup" onClick={() => setShow(false)} className='fs-3 w-50 text-center me-1 py-2 border-top text-black bg-warning rounded-3'>Sign Up</Nav.Link>
+            <Nav.Link href="/login" onClick={() => setShow(false)} className='fs-3 w-50 text-center ms-1 py-2 border-top border-bottom text-white bg-blue rounded-3'>Login</Nav.Link>
           </div>
         </Offcanvas.Body>
       </Offcanvas>
diff --git a/src/components/layout/user/UserNavbar.jsx b/src/components/layout/user/UserNavbar.jsx
index bbfd89d..84ed9d6 100644
--- a/src/components/layout/user/UserNavbar.jsx
+++ b/src/components/layout/user/UserNavbar.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Navbar, Container, Nav, Modal, Button, OverlayTrigger, Tooltip  } from 'react-bootstrap';
+import { Navbar, Container, Nav, Modal, Button, OverlayTrigger, Tooltip, Offcanvas } from 'react-bootstrap';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import logo from '../../../assets/images/logo.png';
 import logoW from '../../../assets/images/logo-w.png';
@@ -23,6 +23,10 @@ const UserNavbar = () => {
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
 
+  const [showMenu, setShowMenu] = useState(false);
+  const handleCloseMenu = () => setShowMenu(false);
+  const handleShowMenu = () => setShowMenu(true);
+
   const [showReport, setShowReport] = useState(false);
   const handleCloseReport = () => setShowReport(false);
   const handleShowReport = () => setShowReport(true);
@@ -50,7 +54,7 @@ const UserNavbar = () => {
   return (
     <>
       <Navbar bg={bgBlue() ? 'blue' : 'white'} expand="md" fixed="top">
-        <Container fluid className='px-0'>
+        <Container fluid className='px-md-0'>
           <Navbar.Brand as={Link} to="/learning" className='col-md-3 col-lg-2 d-flex items-center'>
             <img
               alt="logo"
@@ -58,8 +62,11 @@ const UserNavbar = () => {
               height="32"
             />
           </Navbar.Brand>
-          <Navbar.Toggle aria-controls="navbar-nav" />
-          <div className="navbar-title col-md-6 col-lg-8">
+          {/* <Navbar.Toggle className='custom-toggle shadow-none border-white' /> */}
+          <Button variant="btn-outline-white" onClick={handleShowMenu} className='border py-0 d-block d-md-none'>
+            <i className="bi bi-list text-white fs-3"></i>
+          </Button>
+          <div className="d-none d-md-block navbar-title col-md-6 col-lg-8">
             {hasTopicAndLevel ? (
               lastSegment === 'exercise' ? (
                 <h5 className={`text-center m-0 ${bgBlue() ? 'text-white' : 'text-blue'}`}>
@@ -73,7 +80,7 @@ const UserNavbar = () => {
               )
             ):('')}
           </div>
-          <Navbar.Collapse id="navbar-nav" className='col-md-3 col-lg-2 d-flex items-center'>
+          <Navbar.Collapse id="navbar-nav" className='col-md-3 col-lg-2 d-none d-md-flex items-center'>
             <Nav className={bgBlue() ? 'd-flex' : 'd-none'}>
               <OverlayTrigger
                 placement='bottom'
@@ -124,6 +131,22 @@ const UserNavbar = () => {
       <Modal centered show={showReport} onHide={handleCloseReport} size='lg'>
         <Report onClose={handleCloseReport}/>
       </Modal>
+
+      <Offcanvas show={showMenu} onHide={handleCloseMenu} placement={'end'}>
+        <Offcanvas.Header closeButton>
+          <Offcanvas.Title>Menu</Offcanvas.Title>
+        </Offcanvas.Header>
+        <Offcanvas.Body className='h-100'>
+          <Nav.Link as={Link} to="home" onClick={() => handleCloseMenu()} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>Home.</Nav.Link>
+          <Nav.Link as={Link} to="module" onClick={() => handleCloseMenu()} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>Learning.</Nav.Link>
+          <Nav.Link as={Link} to="history" onClick={() => handleCloseMenu()} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>History.</Nav.Link>
+          <Nav.Link as={Link} to="setting" onClick={() => handleCloseMenu()} style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>Setting.</Nav.Link>
+          <div className="d-flex w-100 justify-content-between mt-2">
+            <Nav.Link onClick={() => (handleCloseMenu(), handleShowReport())} className='fs-3 w-50 text-center me-1 py-2 border-top text-black bg-warning rounded-3'>Report</Nav.Link>
+            <Nav.Link onClick={() => (handleCloseMenu(), handleShow())} className='fs-3 w-50 text-center ms-1 py-2 border-top border-bottom text-white bg-red rounded-3'>Logout</Nav.Link>
+          </div>
+        </Offcanvas.Body>
+      </Offcanvas>
     </>
   );
 };
diff --git a/src/components/layout/user/UserSideNav.jsx b/src/components/layout/user/UserSideNav.jsx
index 7eb2242..7692c87 100644
--- a/src/components/layout/user/UserSideNav.jsx
+++ b/src/components/layout/user/UserSideNav.jsx
@@ -31,7 +31,7 @@ const UserSideNav = () => {
             height={72} width={72}
             style={{objectFit:'cover'}} 
           />
-          <h6 className='display-username text-white text-center truncate truncate-2 my-3'>{validName(username)}</h6>
+          <h6 className='display-username text-white text-center text-capitalize truncate truncate-2 my-3'>{validName(username)}</h6>
         </div>
         <Nav className="flex-column">
           <Nav.Link as={NavLink} to="home" className="mb-2 text-white rounded">