diff --git a/Frontend/public/LogoSmall.png b/Frontend/public/LogoSmall.png
new file mode 100644
index 0000000..b150335
Binary files /dev/null and b/Frontend/public/LogoSmall.png differ
diff --git a/Frontend/src/Components/CommonModule/NavBarModule/Logo.jsx b/Frontend/src/Components/CommonModule/NavBarModule/Logo.jsx
index 492b406..76bd9b1 100644
--- a/Frontend/src/Components/CommonModule/NavBarModule/Logo.jsx
+++ b/Frontend/src/Components/CommonModule/NavBarModule/Logo.jsx
@@ -1,11 +1,14 @@
 import React from "react";
+import { NavLink } from "react-router-dom";
 import LogoImage from "/Logo.svg";
 import Style from "./NavBar.module.css";
 
 const Logo = () => {
     return (
         <div className={Style.logoContainer}>
-            <img className={Style.logo} src={LogoImage} alt="Logo" />
+            <NavLink to="/" className={Style.logoLink}>
+                <img className={Style.logo} src={LogoImage} alt="Logo" />
+            </NavLink>
         </div>
     );
 };
diff --git a/Frontend/src/Components/CommonModule/NavBarModule/NavBar.jsx b/Frontend/src/Components/CommonModule/NavBarModule/NavBar.jsx
index 0940834..77abde4 100644
--- a/Frontend/src/Components/CommonModule/NavBarModule/NavBar.jsx
+++ b/Frontend/src/Components/CommonModule/NavBarModule/NavBar.jsx
@@ -22,7 +22,7 @@ const NavBar = () => {
                                 <NavLink
                                     to="/"
                                     className={({ isActive }) =>
-                                        isActive ? `${Style.menuLink} ${Style.active}` : Style.menuLink
+                                        isActive ? `${Style.menuLink} ${Style.active} ${Style.hide}` : `${Style.menuLink} ${Style.hide}`
                                     }
                                 >
                                     Home
@@ -62,7 +62,7 @@ const NavBar = () => {
                     </div>
                     <div className={Style.searchContainer}>
                         <input
-                            className={Style.searchInput}
+                            className={`${Style.searchInput} ${Style.hide}`}
                             type="text"
                             placeholder="Search your wallpaper"
                         />
diff --git a/Frontend/src/Components/CommonModule/NavBarModule/NavBar.module.css b/Frontend/src/Components/CommonModule/NavBarModule/NavBar.module.css
index 3046653..f0725e0 100644
--- a/Frontend/src/Components/CommonModule/NavBarModule/NavBar.module.css
+++ b/Frontend/src/Components/CommonModule/NavBarModule/NavBar.module.css
@@ -187,7 +187,7 @@
 }
 
 
-@media (max-width: 1211px) {
+/* @media (max-width: 1211px) {
     .menu {
         font-size: 0.6em;
         gap: 3em;
@@ -208,14 +208,6 @@
 }
 
 @media (max-width: 992px) {
-    /* .navItems {
-        width: 80%;
-    }
-
-    .menuItem {
-        margin: 0 20px;
-    } */
-
     .searchContainer {
         width: 400px;
     }
@@ -275,6 +267,136 @@
         top: 2.5em;
         left: 1em;
     }
+} */
+
+@media (max-width: 425px) {
+    .MainContainer{
+        padding: 0.2em 0;
+        gap: 0%;
+    }
+
+    .MainContainer::before{
+        border-radius: 4.5px;
+        margin: -1px;
+        padding: 1px;
+    }
+
+    .navbar{
+        height: fit-content;
+        width: 78%;
+        border-radius: 4.5px;
+        margin-top: 0.7%;
+    }
+
+    .navbarWrapper{
+        padding: 0;
+        padding-left: 5.5%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .logo {
+        width: 60%;
+        margin-right: 0%;
+        content: url('/LogoSmall.png');
+    }
+
+    .logoContainer{
+        position: fixed;
+        top: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .logoLink{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .navItems{
+        display: flex;
+        flex-direction: row;
+        width: 60%;
+        justify-content: left;
+    }
+
+    .menu{
+        display: flex;
+        font-size: 1.6vw;
+        gap: 2em;
+        align-items: center;
+    }
+
+    .menuLink {
+        margin-top: 6px;
+        padding-bottom: 8px;
+    }
+
+    .menuLink::after {
+        bottom: 3.2px;
+        left: 50%;
+        width: 16px;
+        height: 1.25px;
+    }
+    
+    .searchContainer {
+        padding: 0;
+        width: 35%;
+        height: fit-content;
+        border-radius: 4.5px;
+        justify-content: right;
+    }
+
+    .searchInput{
+        padding: 0;
+        height: fit-content;
+    }
+    
+    .searchButton img{
+        width: 2.8vw;
+        padding: 1px 1px;
+    }
+
+    .searchButton{
+        padding: 0 5px;
+        height: fit-content;
+        display: flex;
+    }
+
+    .profileContainer {
+        padding-left: 0.5px;
+        gap: 0.01rem;
+        justify-content: center;
+        align-content: center;
+    }
+
+    .profileButton{
+        justify-content: center;
+        align-content: center;
+        padding: 0;
+        padding-right: 5px;
+        padding-left: 2px;
+        padding-top: 1vw;
+    }
+    
+    .profileButton img{
+        width: 3vw;
+        padding: 0;
+    }
+
+    .logoContainer {
+        margin-right: 0.2em;
+        top: 1em;
+        left: 0.3em;
+        width: 14%; 
+    }
+
+    .hide{
+        display: none;
+    }
 }
 
 /* dark theme */
diff --git a/Frontend/src/Components/GalleryModule/Gallery.jsx b/Frontend/src/Components/GalleryModule/Gallery.jsx
index f1fd998..906ab7f 100644
--- a/Frontend/src/Components/GalleryModule/Gallery.jsx
+++ b/Frontend/src/Components/GalleryModule/Gallery.jsx
@@ -44,6 +44,7 @@ const Gallery = () => {
                         <Route path="desktop" element={<Desktop />} />
                         <Route path="" element={<Navigate to="mobile" replace />} />
                     </Routes>
+                    <div className={Styles.blendOverlay2} style={{ opacity: showBlend ? 1 : 0 }} />
                 </div>
             </div>
         </div>
diff --git a/Frontend/src/Components/GalleryModule/Gallery.module.css b/Frontend/src/Components/GalleryModule/Gallery.module.css
index 21fcebd..6c4cb8b 100644
--- a/Frontend/src/Components/GalleryModule/Gallery.module.css
+++ b/Frontend/src/Components/GalleryModule/Gallery.module.css
@@ -49,7 +49,7 @@ body {
     left: 0;
     right: 0;
     height: 50px;
-    width: 99.6%;
+    width: 99.8%;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
     pointer-events: none;
     z-index: 10;
@@ -57,6 +57,21 @@ body {
     transition: opacity 0.15s ease-in-out;
 }
 
+.blendOverlay2 {
+    position: sticky;
+    display: none;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 20px;
+    width: 100%;
+    background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
+    pointer-events: none;
+    z-index: 10;
+    opacity: 1;
+    transition: opacity 0.15s ease-in-out;
+}
+
 @media (max-width: 768px) {
     .imgGrid {
         grid-template-columns: 1fr;
@@ -67,4 +82,28 @@ body {
     .galleryContent{
         margin-left: 23.75%;
     }
+}
+
+@media (max-width: 425px) {
+    .mainContent{
+        width: 100%;
+        justify-content: center;
+        justify-items: center;
+        margin-top: 3.6em;
+        margin-bottom: 3.5em;
+    }
+
+    .galleryContent{
+        margin-left: 3%;
+        padding: 0;
+        width: 90%;
+    }
+
+    .blendOverlay{
+        width: 100%;
+    }
+
+    .blendOverlay2{
+        display: block;
+    }
 }
\ No newline at end of file
diff --git a/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.jsx b/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.jsx
index 46bcf32..7d3ea16 100644
--- a/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.jsx
+++ b/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.jsx
@@ -50,7 +50,7 @@ const SideBar = () => {
                         </li>
                     </ul>
                 </div>
-                <div className={styles.copyright}>
+                <div className={`${styles.copyright} ${styles.hide}`}>
                     <p id="copyright">© WallGodds<small> 2025</small></p>
                 </div>
             </div>
diff --git a/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.module.css b/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.module.css
index b149cc6..877de22 100644
--- a/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.module.css
+++ b/Frontend/src/Components/GalleryModule/SideBarModule/SideBar.module.css
@@ -3,7 +3,7 @@
     top: 3.9em;
     height: 100vh; /* Ensure sidebar takes full height */
     width: clamp(12%, 13vw, 20%); /* Adjust width dynamically */
-    min-height: 100vh; /* Ensure it fills the full height */
+    min-height: 100vh;
     padding-left: 3.75%;
     display: flex;
     flex-direction: column;
@@ -169,4 +169,74 @@ small {
     .listItem img {
         width: 1.2em;
     }
+}
+
+@media (max-width: 425px) {
+    .sidebar {
+        z-index: 1001;
+        width: 100vw;
+        min-height: 0;
+        top: 419px;
+        left: 0;
+        padding: 5px 5vw;
+        padding-bottom: 16px;
+        flex-direction: row;
+        background: none;
+    }
+    
+    
+    .mainContainer {
+        position: fixed;
+        bottom: 7px;
+        border-radius: 3.7px;
+        width: 91%;
+        min-height: 0px;
+        height: 45px;
+        border-radius: 10px;
+        flex-direction: row;
+        justify-content: space-around;
+    }
+    
+    
+    .listContainer {
+        padding: 2px;
+    }
+    
+    .verticalList {
+        flex-direction: row-reverse;
+        gap: 19vw;
+        width: 100%;
+        margin: 0;
+        padding: 2px 0px;
+    }
+
+    .listItem, .listItem.active, .listItem:hover{
+        transform: rotate(90deg);
+    }
+    
+    .listItem.active{
+        box-shadow: 1px -1px 2.5px #00000089;
+    }
+
+    .listItem{
+        padding: 20px 10px;
+        border-radius: 7px;
+    }
+
+    .listItem::before{
+        padding: 2.6px;
+        border-radius: 7px;
+    }
+
+    .listItem img{
+        width: 2.5vw;
+    }
+
+    .listItem:nth-child(3) img {
+        width: 3vw !important; 
+    }
+
+    .hide{
+        display: none;
+    }
 }
\ No newline at end of file
diff --git a/Frontend/src/Components/GalleryModule/TabletSection/ImgCardsTablet/ImgCard.module.css b/Frontend/src/Components/GalleryModule/TabletSection/ImgCardsTablet/ImgCard.module.css
index 28f3bfc..81016da 100644
--- a/Frontend/src/Components/GalleryModule/TabletSection/ImgCardsTablet/ImgCard.module.css
+++ b/Frontend/src/Components/GalleryModule/TabletSection/ImgCardsTablet/ImgCard.module.css
@@ -1,6 +1,6 @@
 .imgCard {
-    width: 350px;
-    /* height: 480px; */
+    /* width: 350px; */
+    width: 100%;
     height: fit-content;
     display: flex;
     align-items: end;
@@ -71,4 +71,37 @@
 .icon:hover,
 .downloadBtn:hover {
     transform: scale(1.1);
+}
+
+@media (max-width: 425px) {
+    .icons{
+        margin: 5.5%;
+    }
+
+    .icon{
+        width: 5.5vw;
+    }
+
+    .icon:nth-child(1) {
+        width: 5.7vw !important; 
+    }
+
+    .imgCard{
+        position: relative;
+    }
+
+    .bottomBar{
+        position: absolute;
+        bottom: 0;
+        padding: 0.4em 0.6em;
+    }
+
+    .username{
+        font-size: 4.2vw;
+        margin-left: 1.25em;
+    }
+
+    .downloadBtn{
+        width: 35vw;
+    }
 }
\ No newline at end of file
diff --git a/Frontend/src/Components/GalleryModule/TabletSection/Tablet.jsx b/Frontend/src/Components/GalleryModule/TabletSection/Tablet.jsx
index c549e74..f9f8858 100644
--- a/Frontend/src/Components/GalleryModule/TabletSection/Tablet.jsx
+++ b/Frontend/src/Components/GalleryModule/TabletSection/Tablet.jsx
@@ -11,9 +11,9 @@ const Tablet = () => {
     return (
         <div className={Styles.gallery}>
             <div className={Styles.imgCards}>
+                <ImgCard imageSrc={img3} />
                 <ImgCard imageSrc={img1} />
                 <ImgCard imageSrc={img2} />
-                <ImgCard imageSrc={img3} />
             </div>
             <div className={Styles.imgCards}>
                 <ImgCard imageSrc={img4} />
diff --git a/Frontend/src/Components/GalleryModule/TabletSection/Tablet.module.css b/Frontend/src/Components/GalleryModule/TabletSection/Tablet.module.css
index fab7d57..06a0ea7 100644
--- a/Frontend/src/Components/GalleryModule/TabletSection/Tablet.module.css
+++ b/Frontend/src/Components/GalleryModule/TabletSection/Tablet.module.css
@@ -10,7 +10,6 @@ body {
     margin-top: 0;
     overflow: visible;
     min-height: 100vh;
-    width: fit-co;
 }
 
 .imgCards {
@@ -19,4 +18,20 @@ body {
     justify-content: left;
     margin-bottom: 4%;
     gap: 6%;
+}
+
+@media (max-width: 576px){
+    .imgCards{
+        flex-wrap: wrap;
+    }
+}
+
+@media (max-width: 425px){
+    .gallery{
+        width: 100%;
+    }
+
+    .imgCards{
+        width: 100%;
+    }
 }
\ No newline at end of file
diff --git a/Frontend/src/Components/ThemeModule/ThemeToggle.module.css b/Frontend/src/Components/ThemeModule/ThemeToggle.module.css
index a4f2c9c..73073eb 100644
--- a/Frontend/src/Components/ThemeModule/ThemeToggle.module.css
+++ b/Frontend/src/Components/ThemeModule/ThemeToggle.module.css
@@ -58,3 +58,9 @@ body {
     border-color: rgba(255, 255, 255, 0.3);
     box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
 }
+
+@media (max-width: 425px) {
+    .themeToggle {
+        display: none;
+    }
+}