diff --git a/frontend/src/components/Sidebar.css b/frontend/src/components/Sidebar.css
index 5db25f45..8589d2e7 100644
--- a/frontend/src/components/Sidebar.css
+++ b/frontend/src/components/Sidebar.css
@@ -16,6 +16,11 @@
   
   /* Dark theme (default) */
   background-color: #0a1628;
+
+  width: var(--sidebar-width);
+  transition:
+    transform 0.3s ease,
+    width 0.3s ease;
 }
 
 /* Dark theme explicit */
@@ -76,6 +81,41 @@
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
 }
 
+.show-sidebar-button {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  z-index: 1200;
+  width: 44px;
+  height: 44px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-sidebar-button {
+  display: none;
+}
+
+/* Light theme show sidebar button */
+.sidebar.light ~ .show-sidebar-button,
+.sidebar.light + .show-sidebar-button {
+  background-color: #f1f5f9;
+  color: #1e293b;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.sidebar.light ~ .show-sidebar-button:hover,
+.sidebar.light + .show-sidebar-button:hover {
+  background-color: #e2e8f0;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+}
+
 /* Navigation links section container */
 .nav-links {
   list-style: none;
@@ -84,7 +124,7 @@
   padding: 0;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   flex: 1;
   gap: 20px;
 }
@@ -97,7 +137,7 @@
   padding: 0;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   margin-top: auto;
   border-top: 1px solid rgba(59, 130, 246, 0.12);
   padding-top: 30px;
@@ -147,8 +187,8 @@
 /* Expanded state styling */
 .nav-link.expanded {
   border-radius: 25px;
-  width: auto;
-  min-width: 160px;
+  width: 100%;
+  min-width: 180px;
   padding: 0 20px;
   justify-content: flex-start;
   gap: 15px;
@@ -207,15 +247,17 @@
 
 /* Search bar styling - Dark theme (default) */
 .search-bar {
+  position: relative;
   display: flex;
   align-items: center;
   width: 100%;
-  max-width: 190px;
   background-color: #334155;
   border-radius: 25px;
-  padding: 8px;
+  padding: 1px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   transition: all 0.3s ease;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /* Light theme search bar */
@@ -252,6 +294,12 @@
   flex-shrink: 0;
 }
 
+.search-toggle-wrapper {
+  display: flex;
+  align-items: center;
+  padding-right: 0.5rem;
+}
+
 /* Light theme search toggle button */
 .sidebar.light .search-toggle-button {
   background-color: #e2e8f0;
@@ -269,6 +317,7 @@
 /* Search input field - Dark theme (default) */
 .search-input {
   flex: 1;
+  min-width: 0;
   border: none;
   background: transparent;
   color: #ffffff;
@@ -296,10 +345,10 @@
 
 /* Search icon - Dark theme (default) */
 .search-icon {
+  flex-shrink: 0;
   color: #94A3B8;
   font-size: 16px;
-  padding-right: 8px;
-  transition: color 0.3s ease;
+  padding-right: 1rem;
 }
 
 /* Light theme search icon */
@@ -308,17 +357,53 @@
 }
 
 /* Responsive design */
-@media (max-width: 768px) {
-  .sidebar {
-    width: var(--sidebar-width, 0px) !important;
-  }
-  
+@media (max-width: 480px) {
   .nav-link.expanded {
-    min-width: 140px;
     padding: 0 15px;
   }
 
-  .search-bar {
-    max-width: 150px;
+  .search-toggle-wrapper {
+    display: none;
+  }
+
+  .sidebar-content {
+    padding-top: 70px;
+  }
+
+  .show-sidebar-button {
+    right: 16px;
+  }  
+
+  .close-sidebar-button {
+    position: fixed;
+    top: 16px;
+    right: 16px;
+    z-index: 1200;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.2s ease;
+  }
+
+  .sidebar.sidebar--hidden {
+    transform: translateX(-100%);
+  }
+}
+
+@media (max-width: 1024px) {
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    z-index: 1000;
+    transform: translateX(0);
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1024px) {
+  .show-sidebar-button {
+    display: none;
   }
 }
\ No newline at end of file
diff --git a/frontend/src/components/Sidebar.jsx b/frontend/src/components/Sidebar.jsx
index 4cf80258..66b22eaf 100644
--- a/frontend/src/components/Sidebar.jsx
+++ b/frontend/src/components/Sidebar.jsx
@@ -2,7 +2,7 @@
 //Last updated 17 September 2025
 //Added theme support
 
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import {
   LayoutDashboard,
@@ -17,6 +17,7 @@ import {
   Search,
 } from "lucide-react";
 import "./Sidebar.css";
+import { X } from "lucide-react";
 
 
 //Button component that we use throughout the sidebar
@@ -55,6 +56,7 @@ const SIDEBAR_EXPANDED_KEY = "sidebarExpanded";
 const Sidebar = ({ onWidthChange = () => {}, isDarkMode = true }) => {
   const navigate = useNavigate();
   const location = useLocation();
+
   const [isExpanded, setIsExpanded] = useState(() => {
     if (typeof window === "undefined") return true;
     try {
@@ -65,8 +67,35 @@ const Sidebar = ({ onWidthChange = () => {}, isDarkMode = true }) => {
       return true;
     }
   }); // Track whether sidebar is expanded (persisted)
+
   const [searchValue, setSearchValue] = useState(''); // Track search input value
 
+  // Track whether the sidebar is hidden on mobile/tablet
+  const [isHidden, setIsHidden] = useState(false);
+
+  // Track whether the current viewport is mobile or tablet
+  const [isMobile, setIsMobile] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth <= 1024;
+  });
+
+  // Detect screen size changes for mobile/tablet behavior
+  useEffect(() => {
+    const handleResize = () => {
+      const mobile = window.innerWidth <= 1024;
+      setIsMobile(mobile);
+
+      // Only force-show sidebar again when leaving mobile
+      if (!mobile) {
+        setIsHidden(false);
+      }
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   // Determine active item based on current route
   const getActiveItem = () => {
     const path = location.pathname;
@@ -99,6 +128,10 @@ const Sidebar = ({ onWidthChange = () => {}, isDarkMode = true }) => {
   //Navigate to the specified route
   const handleNavClick = (itemKey, route) => {
     navigate(route);
+
+    if (isMobile) {
+      setIsHidden(true);
+    }
   };
 
   //Once search is functional, this search value should be used as the search parameter. Just a placeholder for now, though.
@@ -107,97 +140,105 @@ const Sidebar = ({ onWidthChange = () => {}, isDarkMode = true }) => {
   };
 
   return (          
-    <nav className={`sidebar ${isDarkMode ? 'dark' : 'light'}`} style={{'--sidebar-width': isExpanded ? '220px' : '80px'}}>
-      <div className="sidebar-content">       
-        <div className="search-container">
-          {/* only display when the navbar is expanded! */}
-          {isExpanded ? (
-            <div className="search-bar">
-              <button className="search-toggle-button" onClick={toggleSidebar} aria-label="Collapse sidebar">
-                <ArrowLeft size={18} />
-              </button>
-              <input
-                type="text"
-                placeholder="Search..."
-                value={searchValue}
-                onChange={handleSearchChange}
-                className="search-input"
-              />
-              <span className="search-icon">
-                <Search size={16} />
-              </span>
-            </div>
-          ) : (
-            <button className="toggle-button" onClick={toggleSidebar} aria-label="Expand sidebar">
-              <Menu size={18} strokeWidth={2.2} />
+    <>
+      <nav className={`sidebar ${isDarkMode ? 'dark' : 'light'} ${isHidden ? 'sidebar--hidden' : ''}`} style={{ '--sidebar-width': isExpanded ? '220px' : '80px' }}>
+        <div className="sidebar-content">
+          {/* This closes the sidebar for mobile and tablet views */}
+          {isMobile && !isHidden && (
+            <button className="close-sidebar-button" onClick={() => setIsHidden(true)} aria-label="Close sidebar">
+              <X size={20} strokeWidth={2.2} />
             </button>
           )}
+
+          <div className="search-container">
+            {isExpanded ? (
+              <>
+                {/* The collapse arrow is only displayed when the sidebar is expanded (e.g. 1024px) */}
+                <div className="search-toggle-wrapper">
+                  <button className="search-toggle-button" onClick={toggleSidebar} aria-label="Collapse sidebar">
+                    <ArrowLeft size={18} />
+                  </button>
+                </div>
+
+                <div className="search-bar">
+                  <input className="search-input" type="text" placeholder="Search..." value={searchValue} onChange={handleSearchChange}/>
+                  <span className="search-icon">
+                    <Search size={16} />
+                  </span>
+                </div>
+              </>
+            ) : (
+              <button className="toggle-button" onClick={toggleSidebar}aria-label="Expand sidebar">
+                <Menu size={18} strokeWidth={2.2} />
+              </button>
+            )}
+          </div>
+
+          {/* Main navigation area */}
+          <ul className="nav-links">
+            <NavButton
+              href={"/dashboard"}
+              name={"Dashboard"}
+              icon={LayoutDashboard}
+              isExpanded={isExpanded}
+              isActive={activeItem === "home"}
+              onClick={() => handleNavClick("home", "/dashboard")}
+            />
+            <NavButton
+              href={"/cloud-platforms"}
+              name={"Cloud Platforms"}
+              icon={Cloud}
+              isExpanded={isExpanded}
+              isActive={activeItem === "cloud-platforms"}
+              onClick={() => handleNavClick("cloud-platforms", "/cloud-platforms")}
+            />
+            <NavButton
+              href={"/scans"}
+              name={"Scans"}
+              icon={FileSearch}
+              isExpanded={isExpanded}
+              isActive={activeItem === "scans"}
+              onClick={() => handleNavClick("scans", "/scans")}
+            />
+            <NavButton
+              href={"/evidence-scanner"}
+              name={"Evidence"}
+              icon={ShieldCheck}
+              isExpanded={isExpanded}
+              isActive={activeItem === "tasks"}
+              onClick={() => handleNavClick("tasks", "/evidence-scanner")}
+            />
+          </ul>
+          
+          {/* Settings section at bottom */}
+          <ul className="nav-settings">
+            <NavButton
+              href={"/settings"}
+              name={"Settings"}
+              icon={Settings}
+              isExpanded={isExpanded}
+              isActive={activeItem === "settings"}
+              onClick={() => handleNavClick("settings", "/settings")}
+            />
+            <NavButton
+              href={"/account"}
+              name={"Account"}
+              icon={User}
+              isExpanded={isExpanded}
+              isActive={activeItem === "account"}
+              onClick={() => handleNavClick("account", "/account")}
+            />
+          </ul>
         </div>
+      </nav>
 
-        {/* Main navigation area */}
-        <ul className="nav-links">
-          <NavButton
-            href={"/dashboard"}
-            name={"Dashboard"}
-            icon={LayoutDashboard}
-            isExpanded={isExpanded}
-            isActive={activeItem === "home"}
-            onClick={() => handleNavClick("home", "/dashboard")}
-          />
-          <NavButton
-            href={"/cloud-platforms"}
-            name={"Cloud Platforms"}
-            icon={Cloud}
-            isExpanded={isExpanded}
-            isActive={activeItem === "cloud-platforms"}
-            onClick={() => handleNavClick("cloud-platforms", "/cloud-platforms")}
-          />
-          <NavButton
-            href={"/scans"}
-            name={"Scans"}
-            icon={FileSearch}
-            isExpanded={isExpanded}
-            isActive={activeItem === "scans"}
-            onClick={() => handleNavClick("scans", "/scans")}
-          />
-          <NavButton
-            href={"/evidence-scanner"}
-            name={"Evidence"}
-            icon={ShieldCheck}
-            isExpanded={isExpanded}
-            isActive={activeItem === "tasks"}
-            onClick={() => handleNavClick("tasks", "/evidence-scanner")}
-          />
-          {/* <NavButton
-            href={"/reports"}
-            name={"Reports"}
-            icon={FileText}
-            isExpanded={isExpanded}
-            isActive={activeItem === "reports"}
-          /> */}
-        </ul>
-        
-        {/* Settings section at bottom */}
-        <ul className="nav-settings">
-          <NavButton
-            href={"/settings"}
-            name={"Settings"}
-            icon={Settings}
-            isExpanded={isExpanded}
-            isActive={activeItem === "settings"}
-            onClick={() => handleNavClick("settings", "/settings")}
-          />
-          <NavButton
-            href={"/account"}
-            name={"Account"}
-            icon={User}
-            isExpanded={isExpanded}
-            isActive={activeItem === "account"}
-            onClick={() => handleNavClick("account", "/account")}
-          />
-        </ul>
-      </div>
-    </nav>
+      {/* Show sidebar button when hidden on mobile/tablet */}
+      {isHidden && isMobile && (
+        <button className="show-sidebar-button" onClick={() => setIsHidden(false)} aria-label="Show sidebar">
+          <Menu size={22} />
+        </button>
+      )}
+    </>
   );
 };
 
diff --git a/frontend/src/pages/AccountPage.css b/frontend/src/pages/AccountPage.css
index 9bf4a490..d46eb353 100644
--- a/frontend/src/pages/AccountPage.css
+++ b/frontend/src/pages/AccountPage.css
@@ -103,3 +103,9 @@
   line-height: 1.5;
 }
 
+@media (max-width: 480px) {
+  .account-page {
+    margin-left: 0 !important;
+    width: 100% !important;
+  }
+}
diff --git a/frontend/src/pages/Auth/LoginPage.css b/frontend/src/pages/Auth/LoginPage.css
index c1e59aca..c7bac5cf 100644
--- a/frontend/src/pages/Auth/LoginPage.css
+++ b/frontend/src/pages/Auth/LoginPage.css
@@ -8,7 +8,7 @@
   --border: rgba(59, 130, 246, 0.1);
 
   min-height: 100vh;
-  background: #0a1628;
+  background: var(--bg-dark);
   color: #ffffff;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   display: flex;
@@ -17,6 +17,9 @@
 }
 
 .auth-header {
+  position: fixed;
+  top: 0;
+  width: 100%;
   padding: 1.5rem 5%;
   display: flex;
   justify-content: space-between;
@@ -24,6 +27,7 @@
   background: rgba(10, 22, 40, 0.95);
   border-bottom: 1px solid var(--border);
   backdrop-filter: blur(10px);
+  z-index: 999;
 }
 
 .auth-logo img {
@@ -69,13 +73,44 @@
   width: 100%;
 }
 
+/* Hamburger menu */
+.auth-hamburger {
+  display: none;
+  font-size: 1.75rem;
+  background: none;
+  border: none;
+  color: var(--text-main);
+  cursor: pointer;
+  padding: 0.25rem;
+}
+
+/* Mobile dropdown nav */
+.auth-mobile-nav {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: 0;
+  background: var(--bg-dark);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  padding: 1.5rem 5%;
+  z-index: 10;
+}
+
+.auth-mobile-nav a {
+  color: var(--text-main);
+}
+
 .login-main {
   flex: 1;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   min-height: calc(100vh - 120px);
   gap: 1.5rem;
-  padding: 1.5rem 5% 2.5rem;
+  padding: 10rem 5% 2.5rem;
+
 }
 
 .login-brand {
@@ -281,12 +316,15 @@
 }
 
 .login-form-header h2 {
-  font-size: 2rem;
+  font-size: 2.5rem;
+  font-weight: 700;
   margin-bottom: 0.5rem;
+  text-align: center;
 }
 
 .login-form-header p {
   color: #b0c4de;
+  text-align: center;
 }
 
 .login-form {
@@ -448,7 +486,7 @@
   cursor: pointer;
   transition: transform 0.2s ease, border-color 0.2s ease;
   width: 100%;
-  max-width: 280px;
+  max-width: 18.75rem;
 }
 
 .social-btn:focus-visible {
@@ -511,7 +549,8 @@
   color: var(--accent);
 }
 
-@media (max-width: 1024px) {
+
+@media (max-width: 1023px) {
   .login-main {
     grid-template-columns: 1fr;
   }
@@ -520,12 +559,17 @@
     min-height: 60vh;
   }
 
+  .login-form-card {
+    max-width: none;
+  }
+
   .brand-features {
     display: none;
   }
 }
 
-@media (max-width: 640px) {
+
+@media (max-width: 780px) {
   .auth-header {
     padding: 1rem 1.5rem;
   }
@@ -534,14 +578,34 @@
     gap: 1rem;
   }
 
+  .auth-nav {
+    display: none;
+  }
+
+  .auth-hamburger {
+    display: block;
+  }
+
   .login-brand {
     padding: 2.5rem 1.5rem;
   }
 
   .login-form-section {
-    padding: 2.5rem 1.5rem;
+    padding: 2.5rem 0;
+  }
+
+  .login-form-header {
+    text-align: center;
   }
 
+  .login-form-card {
+    padding: 3rem 1.55rem
+  }
+
+  .login-main {
+    padding: 8rem 1.5rem 2.5rem;
+  }
+  
   .social-login {
     grid-template-columns: 1fr;
   }
diff --git a/frontend/src/pages/Auth/SignUpPage.css b/frontend/src/pages/Auth/SignUpPage.css
index f9c6919b..0a902630 100644
--- a/frontend/src/pages/Auth/SignUpPage.css
+++ b/frontend/src/pages/Auth/SignUpPage.css
@@ -1,7 +1,3 @@
-.signup-page .login-main {
-  padding-top: 1.5rem;
-}
-
 .signup-brand__content {
   max-width: 460px;
 }
@@ -66,6 +62,7 @@
 
 .signup-form-card {
   max-width: 480px;
+  width: 100%;
 }
 
 .signup-form-grid {
@@ -173,7 +170,6 @@
   justify-content: center;
   gap: 0.5rem;
   padding: 0.85rem;
-
 }
 
 .social-login .social-btn svg {
@@ -202,6 +198,11 @@
     grid-template-columns: 1fr;
   }
 
+  .signup-form-card {
+    max-width: none;
+    width: 100%;
+  }
+
   .social-login {
     grid-template-columns: 1fr;
   }
diff --git a/frontend/src/pages/Auth/components/LoginHeader.jsx b/frontend/src/pages/Auth/components/LoginHeader.jsx
index acdd21e8..2c8b1e7a 100644
--- a/frontend/src/pages/Auth/components/LoginHeader.jsx
+++ b/frontend/src/pages/Auth/components/LoginHeader.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 const navLinks = [
   { label: "Home", href: "/" },
@@ -9,12 +9,15 @@ const navLinks = [
 ];
 
 const LoginHeader = () => {
+  const [menuOpen, setMenuOpen] = useState(false);
+
   return (
     <header className="auth-header">
       <a className="auth-logo" href="/" aria-label="AutoAudit home">
         <img src="/AutoAudit.png" alt="AutoAudit" />
       </a>
 
+      {/* Desktop Header */}
       <nav className="auth-nav" aria-label="Primary navigation">
         {navLinks.map((link) => (
           <a key={link.label} href={link.href}>
@@ -22,6 +25,31 @@ const LoginHeader = () => {
           </a>
         ))}
       </nav>
+
+      <button
+        className="auth-hamburger"
+        aria-label="Toggle menu"
+        aria-expanded={menuOpen}
+        onClick={() => setMenuOpen((prev) => !prev)}
+      >
+        ☰
+      </button>
+
+      {/* Mobile menu */}
+      {menuOpen && (
+        <nav className="auth-mobile-nav" aria-label="Auth Mobile navigation">
+          {navLinks.map((link) => (
+            <a
+              key={link.label}
+              href={link.href}
+              onClick={() => setMenuOpen(false)}
+            >
+              {link.label}
+            </a>
+          ))}
+        </nav>
+      )}
+
     </header>
   );
 };
diff --git a/frontend/src/pages/Connections/ConnectionsPage.css b/frontend/src/pages/Connections/ConnectionsPage.css
index 5d51788e..fa7b30c2 100644
--- a/frontend/src/pages/Connections/ConnectionsPage.css
+++ b/frontend/src/pages/Connections/ConnectionsPage.css
@@ -262,6 +262,7 @@
 .empty-state svg {
   color: var(--text-tertiary);
   margin-bottom: 16px;
+  margin: auto;
 }
 
 .empty-state h3 {
@@ -303,6 +304,16 @@
   }
 }
 
+@media (max-width: 480px) {
+  .header-content {
+    padding-top: 1rem;
+  }
+  .connections-page {
+    margin-left: 0 !important;
+    width: 100% !important;
+  }
+}
+
 @media (max-width: 768px) {
   .form-row {
     grid-template-columns: 1fr;
diff --git a/frontend/src/pages/Contact/ContactPage.css b/frontend/src/pages/Contact/ContactPage.css
index 54d4c8d5..eaa5c6e5 100644
--- a/frontend/src/pages/Contact/ContactPage.css
+++ b/frontend/src/pages/Contact/ContactPage.css
@@ -1,4 +1,6 @@
 .contact-page {
+  --bg-dark: #0a1628;
+  --bg-darker: #0f1f38;
   --accent: #3b82f6;
   --accent-strong: #2563eb;
   --border: rgba(59, 130, 246, 0.1);
@@ -16,7 +18,7 @@
 }
 
 .contact-hero {
-  padding: 10rem 5% 4rem;
+  padding: 12rem 5% 4rem;
   background: linear-gradient(135deg, #0a1628 0%, #162a4a 50%, #1e3a5f 100%);
   position: relative;
   overflow: hidden;
@@ -70,6 +72,7 @@
 
 .contact-hero h1 {
   font-size: clamp(2.5rem, 6vw, 3.5rem);
+  font-weight: 700;
   margin-bottom: 1rem;
   background: linear-gradient(135deg, #ffffff, var(--accent));
   -webkit-background-clip: text;
@@ -128,6 +131,7 @@
 
 .info-card h3 {
   font-size: 1.25rem;
+  font-weight: 700;
   margin-bottom: 0.5rem;
 }
 
@@ -190,6 +194,9 @@
 
 .contact-form-wrapper h2 {
   margin-bottom: 1.5rem;
+  font-weight: 700;
+  font-size: 1.5rem;
+  margin-bottom: 3rem;
 }
 
 .form-group {
@@ -285,6 +292,7 @@
 
 .faq-header h2 {
   font-size: 2.4rem;
+  font-weight: 700;
   margin-bottom: 0.75rem;
 }
 
@@ -351,8 +359,12 @@
 }
 
 @media (max-width: 768px) {
+  .contact-form-wrapper h2 {
+    text-align: center;
+  }
+
   .contact-hero {
-    padding-top: 8rem;
+    padding-top: 12rem;
   }
 
   .form-row {
@@ -360,6 +372,6 @@
   }
 
   .contact-form-wrapper {
-    padding: 2rem;
+    padding: 2rem 1.5rem;
   }
 }
diff --git a/frontend/src/pages/Dashboard.css b/frontend/src/pages/Dashboard.css
index 152cd3a1..1d518e7a 100644
--- a/frontend/src/pages/Dashboard.css
+++ b/frontend/src/pages/Dashboard.css
@@ -312,7 +312,7 @@ input:checked + .slider:before {
   justify-content: center;
   font-size: 12px;
   font-weight: bold;
-  margin-top: 2px;
+  margin: auto;
 }
 
 .stat-card.emerald .stat-icon {
@@ -522,17 +522,28 @@ input:checked + .slider:before {
     grid-column: 1 / -1;
     grid-row: auto;
   }
+
+  .stat-info {
+    flex-direction: column;
+  }
+
 }
  
-@media (max-width: 640px) {
+@media (max-width: 780px) {
   .main-grid {
     grid-template-columns: 1fr;
   }
+
   .dashboard-header {
     flex-direction: column;
     gap: 16px;
     align-items: flex-start;
   }
+
+  .stat-info {
+    flex-direction: row;
+  }
+
   .theme-toggle {
     align-self: flex-end;
   }
@@ -550,4 +561,27 @@ input:checked + .slider:before {
   .top-toolbar {
     grid-template-columns: 1fr;
   }
+
+  .toolbar-button.secondary, .toolbar-button.primary {
+    width: 180px;
+  }
+}
+
+@media (max-width: 480px) {
+  .dashboard {
+    margin-left: 0 !important;
+    width: 100% !important;
+  }
+}
+
+@media (max-width: 376px) { 
+  .issue-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .chart-dropdown {
+    margin: auto;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/pages/Evidence.css b/frontend/src/pages/Evidence.css
index 95d007b7..76bd55b9 100644
--- a/frontend/src/pages/Evidence.css
+++ b/frontend/src/pages/Evidence.css
@@ -959,14 +959,23 @@
 }
 
 @media (max-width: 480px) {
+  .brand-wrap {
+    padding-left: 0;
+  }
+
   .evidence-scanner {
-    padding: 16px;
+    margin-left: 0 !important;
+    width: 100% !important;
   }
   
   .evidence-card,
   .results-card {
     padding: 16px;
   }
+
+  .evidence-subtitle {
+    margin: 6px 0 25px 0;
+  }
   
   .brand-title {
     font-size: 24px;
diff --git a/frontend/src/pages/Landing/AboutUs.css b/frontend/src/pages/Landing/AboutUs.css
index 2f0a025b..31199204 100644
--- a/frontend/src/pages/Landing/AboutUs.css
+++ b/frontend/src/pages/Landing/AboutUs.css
@@ -1,3 +1,7 @@
+h1, h2 {
+  font-weight: 700;
+}
+
 .about-page {
   --accent: #3b82f6;
   --accent-strong: #2563eb;
@@ -17,7 +21,7 @@
 
 .about-hero {
   background: linear-gradient(135deg, #0a1628 0%, #1a3a4f 50%, #2a4a5f 100%);
-  padding: 6rem 5% 4rem;
+  padding: 10rem 5% 4rem;
   text-align: center;
   position: relative;
   overflow: hidden;
@@ -236,16 +240,13 @@
 }
 
 @media (max-width: 768px) {
-  .about-hero {
-    padding: 4rem 5% 3rem;
-  }
-
   .section {
     padding: 0 1.5rem;
   }
 
   .section-content {
     padding: 2rem;
+    text-align: center;
   }
 
   .cta-section {
diff --git a/frontend/src/pages/Landing/LandingPage.css b/frontend/src/pages/Landing/LandingPage.css
index 87dfd48f..43a1fe81 100644
--- a/frontend/src/pages/Landing/LandingPage.css
+++ b/frontend/src/pages/Landing/LandingPage.css
@@ -1,20 +1,16 @@
+html {
+  scroll-behavior: smooth;
+}
+
 .landing-page {
   --bg-dark: #0a1628;
   --bg-darker: #0f1f38;
-  --bg-mid: #162a4a;
-  /* Section backgrounds: subtle, consistent gradients (avoid bright jumps) */
-  --bg-gradient: linear-gradient(
-    135deg,
-    var(--bg-dark) 0%,
-    var(--bg-darker) 55%,
-    var(--bg-mid) 100%
-  );
+  --bg-gradient: linear-gradient(135deg, #0a1628 0%, #162a4a 50%, #1e3a5f 100%);
   --text-main: #ffffff;
   --text-muted: #b0c4de;
-  /* Brand blues (less cyan/teal) */
-  --accent: #3b82f6;
-  --accent-strong: #2563eb;
-  --border: rgba(59, 130, 246, 0.1);
+  --accent: #40e0d0;
+  --accent-strong: #1e90ff;
+  --border: rgba(64, 224, 208, 0.1);
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   color: var(--text-main);
   background: var(--bg-dark);
@@ -34,8 +30,6 @@
 
 /* Shared section background treatment (except hero which has its own glow layers) */
 .landing-stats,
-.landing-features,
-.landing-benefits,
 .landing-cta,
 .landing-footer {
   background: var(--bg-gradient);
@@ -43,8 +37,6 @@
 }
 
 .landing-stats::before,
-.landing-features::before,
-.landing-benefits::before,
 .landing-cta::before,
 .landing-footer::before {
   content: "";
@@ -68,8 +60,10 @@
 
 /* Header */
 .landing-header {
-  position: sticky;
+  width: 100%;
+  position: fixed;
   top: 0;
+  z-index: 5;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -77,7 +71,6 @@
   background: rgba(10, 22, 40, 0.95);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--border);
-  z-index: 5;
 }
 
 .landing-logo img {
@@ -150,6 +143,7 @@
 .btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 30px rgba(59, 130, 246, 0.5);
+  transition: all 0.7s ease;
 }
 
 .btn-secondary {
@@ -160,10 +154,51 @@
 
 .btn-secondary:hover {
   background: var(--accent);
-  color: var(--bg-dark);
+  color: var(--text-main);
   transform: translateY(-2px);
 }
 
+/* Hamburger button */
+.hamburger {
+  display: none;
+  font-size: 1.75rem;
+  background: none;
+  border: none;
+  color: var(--text-main);
+  cursor: pointer;
+  padding: 0.25rem;
+}
+
+/* Mobile dropdown nav */
+.mobile-nav {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: 0;
+  background: #0a1628;
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  padding: 1.5rem 5%;
+  z-index: 10;
+}
+
+.mobile-nav a {
+  color: var(--text-main);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.mobile-nav a:hover {
+  color: var(--accent);
+}
+
+.mobile-nav .btn-primary {
+  width: fit-content;
+}
+
 /* LandingHeader overrides */
 .landing-header .btn-primary {
   flex-wrap: wrap;
@@ -180,7 +215,7 @@
 /* Hero */
 .landing-hero {
   background: var(--bg-gradient);
-  padding: 6rem 5% 4rem;
+  padding: 10rem 5% 4rem;
   position: relative;
   isolation: isolate;
 }
@@ -235,6 +270,7 @@
 
 .hero-text h1 {
   font-size: clamp(2.5rem, 5vw, 3.5rem);
+  font-weight: bold;
   margin-bottom: 1.5rem;
   line-height: 1.2;
   background-image: linear-gradient(
@@ -315,6 +351,7 @@
 
 /* Stats */
 .landing-stats {
+  background: linear-gradient(135deg, #0a1628, #1e3a5f);
   padding: 5rem 5%;
   text-align: left;
 }
@@ -328,7 +365,7 @@
 }
 
 .landing-stats .stat-card {
-  display: flex;
+  display: grid;
   align-items: center;
   justify-content: center;
   gap: 1.25rem;
@@ -355,6 +392,7 @@
   line-height: 1;
   text-align: center;
   flex-shrink: 0;
+  margin: auto;
 }
 
 .landing-stats .stat-card .stat-label {
@@ -363,12 +401,12 @@
   font-size: 0.875rem;
   margin: 0;
   text-align: center;
-  max-width: 14ch;
 }
 
 /* Features */
 .landing-features {
   padding: 6rem 5%;
+  background: var(--bg-darker);
 }
 
 .section-header {
@@ -380,15 +418,17 @@
 .section-header h2 {
   color: var(--accent);
   font-family: inherit;
-  text-transform: none;
-  letter-spacing: 0.5px;
-  font-size: clamp(1.5rem, 3vw, 2.2rem);
-  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 5px;
+  font-size: clamp(1rem, 3vw, 1.5rem);
   margin-bottom: 0.5rem;
+  margin-top: 3rem;
+
 }
 
 .landing-features h3 {
   font-size: clamp(2.25rem, 4vw, 2.8rem);
+  font-weight: bold;
   margin-bottom: 1rem;
   color: var(--text-main);
   font-family: inherit;
@@ -484,6 +524,7 @@
 /* Benefits */
 .landing-benefits {
   padding: 6rem 5%;
+  background: var(--bg-darker);
 }
 
 .benefits-container {
@@ -570,7 +611,9 @@
 
 .benefits-content h2 {
   font-size: 2.5rem;
+  font-weight: 700;
   margin-bottom: 1.75rem;
+  margin-top: 3rem;
 }
 
 .benefit-item {
@@ -626,6 +669,7 @@
 /* CTA */
 .landing-cta {
   padding: 6rem 5%;
+  background: linear-gradient(135deg, #1e3a5f, #0a1628);
   text-align: center;
 }
 
@@ -634,6 +678,10 @@
   margin: 0 auto;
 }
 
+.cta-content h2{
+  font-weight: 700;
+}
+
 .landing-cta h2 {
   font-size: 2.75rem;
   margin-bottom: 1rem;
@@ -654,8 +702,9 @@
 
 /* Footer */
 .landing-footer {
+  background: var(--bg-dark);
   padding: 4rem 5% 2.5rem;
-  border-top: 1px solid var(--border);
+  border-top: 1px solid v
 }
 
 .footer-content {
@@ -669,6 +718,7 @@
 .footer-section h3 {
   margin-bottom: 1rem;
   font-size: 1.1rem;
+  font-weight: 700;
 }
 
 .footer-section ul {
@@ -700,15 +750,18 @@
 }
 
 /* Responsive */
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   .landing-header {
-    flex-direction: column;
-    gap: 1rem;
+    flex-direction: row;
+    align-items: center;
   }
 
   .landing-nav {
-    flex-wrap: wrap;
-    justify-content: center;
+    display: none;
+  }
+
+  .hamburger {
+    display: block;
   }
 
   .hero-text {
@@ -723,16 +776,65 @@
     max-width: 420px;
     margin: 0 auto;
   }
+
+  .stat-card {
+    grid-template-rows: repeat(2, 1fr);
+  }
+
+  .floating-card {
+    text-align: center;
+    margin: auto;
+  }
+
+  .feature-card, .feature-icon {
+    margin: auto;
+    text-align: center;
+  }
+
+  .benefits-visual {
+    display: none;
+  }
+
+  .benefits-content h2 {
+    text-align: center;
+  }
+
+  .footer-content{
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    margin-inline: 1rem;
+    row-gap: 4rem;
+  }
+  
 }
 
-@media (min-width: 768px) {
+@media (min-width: 768px) and (max-width: 1023px) {
+  .landing-nav {
+    display: none;
+  }
+
+  .hamburger {
+    display: block;
+  }
+
   .features-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+
+  .footer-content {
+    row-gap: 4rem;
+  }
 }
 
 @media (min-width: 1024px) {
+  .landing-stats .stats-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .features-grid {
     grid-template-columns: repeat(3, minmax(0, 1fr));
+  } 
+  
+  .footer-content {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
diff --git a/frontend/src/pages/Landing/components/HeroSection.jsx b/frontend/src/pages/Landing/components/HeroSection.jsx
index 1cfc2e94..38fcfd67 100644
--- a/frontend/src/pages/Landing/components/HeroSection.jsx
+++ b/frontend/src/pages/Landing/components/HeroSection.jsx
@@ -24,7 +24,6 @@ const HeroSection = ({ onSignInClick }) => {
     <section className="landing-hero">
       <div className="hero-content">
         <div className="hero-text">
-          <p className="section-tag">AutoAudit Platform</p>
           <h1>Access your compliance dashboard and security insights.</h1>
           <p>
             Compliance made easy for you. View your dashboards anytime,
diff --git a/frontend/src/pages/Landing/components/LandingHeader.jsx b/frontend/src/pages/Landing/components/LandingHeader.jsx
index 360e8e02..03e982fc 100644
--- a/frontend/src/pages/Landing/components/LandingHeader.jsx
+++ b/frontend/src/pages/Landing/components/LandingHeader.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 const navLinks = [
   { label: "Home", href: "/" },
@@ -9,6 +9,13 @@ const navLinks = [
 ];
 
 const LandingHeader = ({ onSignInClick, hiddenLinks = [], showSignIn = true }) => {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const visibleLinks = navLinks.filter(
+    (link) =>
+      !hiddenLinks.map((l) => l.toLowerCase()).includes(link.label.toLowerCase())
+  );
+
   return (
     <header className="landing-header">
       <a className="landing-logo" href="/" aria-label="AutoAudit home">
@@ -18,24 +25,56 @@ const LandingHeader = ({ onSignInClick, hiddenLinks = [], showSignIn = true }) =
         </picture>
       </a>
 
-      <nav className="landing-nav" aria-label="Primary navigation">
-        {navLinks
-          .filter((link) => !hiddenLinks.map((l) => l.toLowerCase()).includes(link.label.toLowerCase()))
-          .map((link) => (
-            <a key={link.label} href={link.href}>
-              {link.label}
-            </a>
-          ))}
+      {/* Desktop nav */}
+      <nav className="landing-nav desktop-nav" aria-label="Primary navigation">
+        {visibleLinks.map((link) => (
+          <a key={link.label} href={link.href}>
+            {link.label}
+          </a>
+        ))}
         {showSignIn && (
-          <button
-            type="button"
-            className="btn-primary"
-            onClick={onSignInClick}
-          >
+          <button className="btn-primary" onClick={onSignInClick}>
             Sign In
           </button>
         )}
       </nav>
+
+      {/* Hamburger toggle */}
+      <button
+        className="hamburger"
+        aria-label="Toggle menu"
+        aria-expanded={menuOpen}
+        onClick={() => setMenuOpen(!menuOpen)}
+      >
+        ☰
+      </button>
+
+      {/* Mobile menu */}
+      {menuOpen && (
+        <nav className="mobile-nav" aria-label="Mobile navigation">
+          {visibleLinks.map((link) => (
+            <a
+              key={link.label}
+              href={link.href}
+              onClick={() => setMenuOpen(false)}
+            >
+              {link.label}
+            </a>
+          ))}
+
+          {showSignIn && (
+            <button
+              className="btn-primary"
+              onClick={() => {
+                setMenuOpen(false);
+                onSignInClick?.();
+              }}
+            >
+              Sign In
+            </button>
+          )}
+        </nav>
+      )}
     </header>
   );
 };
diff --git a/frontend/src/pages/Scans/ScansPage.css b/frontend/src/pages/Scans/ScansPage.css
index 969763df..46024466 100644
--- a/frontend/src/pages/Scans/ScansPage.css
+++ b/frontend/src/pages/Scans/ScansPage.css
@@ -319,6 +319,14 @@
   }
 }
 
+@media (max-width: 480px) {
+  .scans-page {
+    margin-left: 0 !important;
+    width: 100% !important;
+  }
+}
+
+
 @media (max-width: 768px) {
   .form-row {
     grid-template-columns: 1fr;
diff --git a/frontend/src/pages/SettingsPage.css b/frontend/src/pages/SettingsPage.css
index 94931dd3..03600723 100644
--- a/frontend/src/pages/SettingsPage.css
+++ b/frontend/src/pages/SettingsPage.css
@@ -75,3 +75,9 @@
   line-height: 1.5;
 }
 
+@media (max-width: 480px) {
+  .settings-page {
+    margin-left: 0 !important;
+    width: 100% !important;
+  }
+}