diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index 7ec36fd..db59396 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -16,6 +16,10 @@ body {
   width: 100vw;
 }
 
+.w-75{
+  width: 75%;
+}
+
 .h-fit{
   height: fit-content;
 }
@@ -355,9 +359,17 @@ body {
 }
 
 
+@media (max-width: 992px) { 
+  .ilustration-img{
+    height: 50%;
+  }
+}
 
-
-
+@media (max-width: 768px) {
+  .landing-page section:not(:last-of-type){
+    margin-bottom: 0!important;
+  }
+}
 
 
 
diff --git a/src/components/layout/guest/MainNav.jsx b/src/components/layout/guest/MainNav.jsx
index b4adffc..fe65e7f 100644
--- a/src/components/layout/guest/MainNav.jsx
+++ b/src/components/layout/guest/MainNav.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Navbar, Nav, Container, Button } from 'react-bootstrap';
+import { Navbar, Nav, Container, Button, Offcanvas } from 'react-bootstrap';
 import logo from '../../../assets/images/logo.png';
 import logoWhite from '../../../assets/images/logo-w.png';
 import { useLocation } from 'react-router-dom';
@@ -8,6 +8,10 @@ const MainNav = () => {
   const location = useLocation();
   const [scrolled, setScrolled] = useState(false);
 
+  const [show, setShow] = useState(false);
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
   const handleScroll = () => {
     if (window.scrollY > 80) {
       setScrolled(true);
@@ -25,51 +29,76 @@ const MainNav = () => {
   
   const getNavbarMenu = () => {
     if (location.pathname === '/') {
-      return 'd-block w-100';
+      return 'd-block flex-grow-1';
     } else{
       return 'd-none'
     }
   };
 
   return (
-    <Navbar collapseOnSelect expand="md" className={`position-fixed w-100 ${scrolled ? 'bg-blue' : 'bg-blur'}`} style={{zIndex:"99",top:"0"}}>
-        <Container>
-          {/* <Navbar.Brand href="#home" className='text-white'>
-            <img
-              alt=""
-              src={logo}
-              height="32"
-              className="d-inline-block align-top"
-            />{' '}
-          </Navbar.Brand> */}
-          <Navbar.Brand href="/" className='text-white'>
-            <img
-              alt=""
-              src={(location.pathname === '/' || scrolled) ? logoWhite : logo}
-              height="32"
-              className="d-inline-block align-top"
-            />{' '}
-          </Navbar.Brand>
-          <div className={getNavbarMenu()}>
-            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
-            <Navbar.Collapse id="responsive-navbar-nav">
-              <Nav className="w-100 w-lg-75 justify-content-center">
-                <Nav.Link href="#hero" className='text-white me-3'>Home.</Nav.Link>
-                <Nav.Link href="#whatis" className='text-white me-3'>What Is.</Nav.Link>
-                <Nav.Link href="#feature" className='text-white me-3'>Feature.</Nav.Link>
-                <Nav.Link href="#youget" className='text-white me-3'>You Get.</Nav.Link>
-                <Nav.Link href="#contacts" className='text-white me-3'>Join Now.</Nav.Link>
-                <Nav.Link href="/signup" className='text-white me-3 d-block d-md-none'>Sign Up</Nav.Link>
-                <Nav.Link href="/login" className='text-white me-3 d-block d-md-none'>Login</Nav.Link>
-              </Nav>
-              <Nav className='d-none d-lg-flex'>
-                <Button as='a' href='/signup' variant='white-blue' className='btn-nav mx-1 rounded-4 py-2 fs-6' size='lg'>Sign<span className="ts">_</span>Up</Button>
-                <Button as='a' href='/login' variant='outline-white' className='btn-nav mx-1 rounded-4 py-2 fs-6' size='lg'>Login</Button>
-              </Nav>
-            </Navbar.Collapse>
-          </div>
-        </Container>
+    <>
+      <Navbar collapseOnSelect expand="lg" className={`position-fixed w-100 ${scrolled ? 'bg-blue' : 'bg-blur'}`} style={{zIndex:"99",top:"0"}}>
+          <Container>
+            {/* <Navbar.Brand href="#home" className='text-white'>
+              <img
+                alt=""
+                src={logo}
+                height="32"
+                className="d-inline-block align-top"
+              />{' '}
+            </Navbar.Brand> */}
+            <Navbar.Brand href="/" className='text-white'>
+              <img
+                alt=""
+                src={(location.pathname === '/' || scrolled) ? logoWhite : logo}
+                height="32"
+                className="d-inline-block align-top"
+              />{' '}
+            </Navbar.Brand>
+            <div className={getNavbarMenu()}>
+              <div className='d-none d-lg-block'>
+                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
+                <Navbar.Collapse id="responsive-navbar-nav">
+                  <Nav className="w-100 w-lg-75 justify-content-center">
+                    <Nav.Link href="#hero" className='text-white me-3'>Home.</Nav.Link>
+                    <Nav.Link href="#whatis" className='text-white me-3'>What Is.</Nav.Link>
+                    <Nav.Link href="#feature" className='text-white me-3'>Feature.</Nav.Link>
+                    <Nav.Link href="#youget" className='text-white me-3'>You Get.</Nav.Link>
+                    <Nav.Link href="#contacts" className='text-white me-3'>Join Now.</Nav.Link>
+                    <Nav.Link href="/signup" className='text-white me-3 d-block d-md-none'>Sign Up</Nav.Link>
+                    <Nav.Link href="/login" className='text-white me-3 d-block d-md-none'>Login</Nav.Link>
+                  </Nav>
+                  <Nav className='d-flex'>
+                    <Button as='a' href='/signup' variant='white-blue' className='btn-nav mx-1 rounded-4 py-2 fs-6' size='lg'>Sign<span className="ts">_</span>Up</Button>
+                    <Button as='a' href='/login' variant='outline-white' className='btn-nav mx-1 rounded-4 py-2 fs-6' size='lg'>Login</Button>
+                  </Nav>
+                </Navbar.Collapse>
+              </div>
+              <div className='d-flex d-lg-none justify-content-end'>
+                <Button variant="outline-white" onClick={handleShow}>
+                  <i className="bi bi-list text-white"></i>
+                </Button>
+              </div>
+            </div>
+          </Container>
       </Navbar>
+      <Offcanvas show={show} onHide={handleClose} placement='end'>
+        <Offcanvas.Header closeButton>
+          <Offcanvas.Title>Menu</Offcanvas.Title>
+        </Offcanvas.Header>
+        <Offcanvas.Body>
+          <Nav.Link href="#hero" style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>Home.</Nav.Link>
+          <Nav.Link href="#whatis" style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>What Is.</Nav.Link>
+          <Nav.Link href="#feature" style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>Feature.</Nav.Link>
+          <Nav.Link href="#youget" style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>You Get.</Nav.Link>
+          <Nav.Link href="#contacts" 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" 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" 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>
+        </Offcanvas.Body>
+      </Offcanvas>
+    </>
   );
 };
 
diff --git a/src/roles/guest/landing_page/views/Home.jsx b/src/roles/guest/landing_page/views/Home.jsx
index a01a8bc..71f147a 100644
--- a/src/roles/guest/landing_page/views/Home.jsx
+++ b/src/roles/guest/landing_page/views/Home.jsx
@@ -15,15 +15,15 @@ const Home = () => {
         <section id='hero' className='bg-gd h-screen position-relative'>
             <Container className='pt-5 position-relative' style={{zIndex:"2"}}>
                 <Row>   
-                    <Col md={6} className="col-12 pe-5 text-white d-flex flex-column">
+                    <Col lg={6} className="col-12 pe-5 text-white d-flex flex-column">
                         <h1 className='fw-bold display-4'>Your Learning, <br /> Your Way</h1>
                         <p className='pe-5 fs-5 mt-4'>Transform the way you learn <span className='text-warning'>English</span> with exercises that adapt to your pace and style.</p>
-                        <div className="d-flex w-100 pe-5 mt-4">
-                            <Button variant='warning' size='lg' className='rounded-4 me-3 w-100 text-dark'>SIGN UP</Button>
+                        <div className="d-flex w-100 pe-5 mt-4 flex-column flex-sm-row">
+                            <Button variant='warning' size='lg' className='rounded-4 me-3 mb-3 mb-sm-0 w-100 text-dark'>SIGN UP</Button>
                             <Button variant='outline-light' size='lg' className='rounded-4 w-100'>READ MORE</Button>
                         </div>
                     </Col>
-                    <Col md={6} className="col-12 d-flex items-center">
+                    <Col lg={6} className="col-12 d-none d-lg-flex items-center">
                         <img src={illustration} alt="/" className='w-100'/>
                     </Col>
                 </Row>
@@ -35,8 +35,8 @@ const Home = () => {
         <section id='whatis'>
             <Container className='mt-5'>
                 <Row>
-                    <Col md={6} className='col-12'>
-                        <img src={illustration2} alt="/" />
+                    <Col md={6} className='col-12 d-none d-md-block'>
+                        <img src={illustration2} alt="/" className='w-75'/>
                     </Col>
                     <Col md={6} className='col-12 d-flex flex-column justify-content-center'>
                         <div className='d-flex align-items-center mb-3'>
@@ -47,8 +47,8 @@ const Home = () => {
                         <p className='fs-5'>
                             <span className='text-blue fw-bold'>SEALS</span> refers to a personalized approach to language education that adjusts to the individual learner's needs, pace, and skill level.
                         </p>
-                        <div className="d-flex">
-                            <Button variant='gd' size='lg' className='rounded-4 w-100 me-3'>Basic Learning</Button>
+                        <div className="d-flex flex-column flex-sm-row">
+                            <Button variant='gd' size='lg' className='rounded-4 w-100 me-3 mb-3 mb-sm-0'>Basic Learning</Button>
                             <Button variant='gd' size='lg' className='rounded-4 w-100'>Advance Learning</Button>
                         </div>
                     </Col>
@@ -63,7 +63,7 @@ const Home = () => {
                     <span className='text-blue fw-bold'> English</span> skills.
                 </h5>
                 <Row>
-                    <Col sm={6} md={3} className='col-12'>
+                    <Col sm={6} md={3} className='col-12 mb-3 mb-md-0'>
                         <div className='p-4 rounded rounded-4 bg-white'>
                             <img src={Feature1} alt="/" />
                             <h4 className='my-3'>Listening</h4>
@@ -72,7 +72,7 @@ const Home = () => {
                             </p>
                         </div>
                     </Col>
-                    <Col sm={6} md={3} className='col-12'>
+                    <Col sm={6} md={3} className='col-12 mb-3 mb-md-0'>
                         <div className='p-4 rounded rounded-4 bg-white'>
                             <img src={Feature2} alt="/" />
                             <h4 className='my-3'>Reading</h4>
@@ -81,7 +81,7 @@ const Home = () => {
                             </p>
                         </div>
                     </Col>
-                    <Col sm={6} md={3} className='col-12'>
+                    <Col sm={6} md={3} className='col-12 mb-3 mb-md-0'>
                         <div className='p-4 rounded rounded-4 bg-white'>
                             <img src={Feature3} alt="/" />
                             <h4 className='my-3'>Grammar</h4>
@@ -90,7 +90,7 @@ const Home = () => {
                             </p>
                         </div>
                     </Col>
-                    <Col sm={6} md={3} className='col-12'>
+                    <Col sm={6} md={3} className='col-12 mb-3 mb-md-0'>
                         <div className='p-4 rounded rounded-4 bg-white'>
                             <img src={Feature4} alt="/" />
                             <h4 className='my-3'>Vocabulary</h4>
@@ -105,8 +105,8 @@ const Home = () => {
         <section id='youget'>
             <Container className='mt-5'>
                 <Row>
-                    <Col md={6} className='col-12'>
-                        <img src={SvgService} alt="/" />
+                    <Col md={6} className='col-12 d-none d-md-block'>
+                        <img src={SvgService} alt="/" className='w-75'/>
                     </Col>
                     <Col md={6} className='col-12'>
                         <h1 className='fw-bold'>What Will You <span className='text-blue'>Get </span>?</h1>
@@ -176,7 +176,7 @@ const Home = () => {
             </div> */}
             <Container className='position-relative' style={{zIndex:"2"}}>
                 <Row>
-                    <Col sm={6} className='col-12 pe-5'>
+                    <Col md={6} className='col-12 pe-5'>
                         <div>
                             <h4>SEALS</h4>
                             <p className='text-blue-50'>The first free end-to-end analytics service for the site, designed to work with enterprises of various levels and business segments.</p>
@@ -211,7 +211,7 @@ const Home = () => {
                             </p>
                         </div>
                     </Col>
-                    <Col sm={6} className='col-12 ps-5 d-flex flex-column justify-content-between'>
+                    <Col md={6} className='col-12 ps-5 d-none d-md-flex flex-column justify-content-between'>
                         <div className="d-flex">
                             <a href="#whatis" className='me-4 text-white text-decoration-none'>What is.</a>
                             <a href="#feature" className='me-4 text-white text-decoration-none'>Feature.</a>