diff --git a/server/src/routes/auth.routes.ts b/server/src/routes/auth.routes.ts
index 7165601..f03cd84 100644
--- a/server/src/routes/auth.routes.ts
+++ b/server/src/routes/auth.routes.ts
@@ -14,7 +14,12 @@ const roleSchema = z.preprocess(
 
 const registerSchema = z.object({
   email: z.string().trim().email(),
-  password: z.string().min(6),
+  password: z
+    .string()
+    .min(8, 'Password must be at least 8 characters')
+    .regex(/[A-Z]/, 'Password must contain at least 1 uppercase letter')
+    .regex(/[0-9]/, 'Password must contain at least 1 number')
+    .regex(/[!@#$%^&*]/, 'Password must contain at least 1 special character (!@#$%^&*)'),
   displayName: z.string().trim().min(1).max(100).optional(),
   name: z.string().trim().min(1).max(100).optional(),
   role: roleSchema,
diff --git a/web/src/app/login/page.tsx b/web/src/app/login/page.tsx
index 3218252..9d835b4 100644
--- a/web/src/app/login/page.tsx
+++ b/web/src/app/login/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { FormEvent, useEffect, useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { api } from "@/lib/api";
@@ -17,6 +18,7 @@ export default function LoginPage() {
   const router = useRouter();
   const [email, setEmail] = useState("eleanor@writerspub.com");
   const [password, setPassword] = useState("password123");
+  const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
@@ -61,14 +63,25 @@ export default function LoginPage() {
             className="w-full px-4 py-3 rounded-xl bg-[#4a5033]/5 border border-[#4a5033]/10"
             placeholder="Email"
           />
-          <input
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            required
-            className="w-full px-4 py-3 rounded-xl bg-[#4a5033]/5 border border-[#4a5033]/10"
-            placeholder="Password"
-          />
+          <div className="relative">
+            <input
+              type={showPassword ? "text" : "password"}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              className="w-full px-4 py-3 pr-12 rounded-xl bg-[#4a5033]/5 border border-[#4a5033]/10"
+              placeholder="Password"
+            />
+
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              className="absolute right-4 top-1/2 -translate-y-1/2 opacity-60 hover:opacity-100 transition cursor-pointer"
+              aria-label={showPassword ? "Hide password" : "Show password"}
+            >
+              {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+            </button>
+          </div>
           {error ? <p className="text-xs text-rose-600 font-semibold">{error}</p> : null}
           <InkButton type="submit" className="w-full py-3 rounded-xl justify-center" disabled={loading}>
             {loading ? "Signing in..." : "Sign In"}
diff --git a/web/src/app/signup/page.tsx b/web/src/app/signup/page.tsx
index d8ad846..38c33ca 100644
--- a/web/src/app/signup/page.tsx
+++ b/web/src/app/signup/page.tsx
@@ -15,6 +15,49 @@ interface RegisterResponse {
   tokens: { accessToken: string; refreshToken: string };
 }
 
+interface PasswordRule {
+  label: string;
+  message: string;
+  test: (value: string) => boolean;
+}
+
+const passwordRules: PasswordRule[] = [
+  {
+    label: "8+ characters",
+    message: "Password must be at least 8 characters",
+    test: (value) => value.length >= 8,
+  },
+  {
+    label: "Uppercase letter",
+    message: "Password must contain at least 1 uppercase letter",
+    test: (value) => /[A-Z]/.test(value),
+  },
+  {
+    label: "Number",
+    message: "Password must contain at least 1 number",
+    test: (value) => /[0-9]/.test(value),
+  },
+  {
+    label: "Special character",
+    message: "Password must contain at least 1 special character (!@#$%^&*)",
+    test: (value) => /[!@#$%^&*]/.test(value),
+  },
+];
+
+function getPasswordStrength(password: string) {
+  const passedRules = passwordRules.filter((rule) => rule.test(password)).length;
+
+  if (passedRules <= 1) {
+    return { label: "Weak", barClass: "bg-rose-500", textClass: "text-rose-600" };
+  }
+
+  if (passedRules <= 3) {
+    return { label: "Medium", barClass: "bg-amber-500", textClass: "text-amber-600" };
+  }
+
+  return { label: "Strong", barClass: "bg-emerald-500", textClass: "text-emerald-600" };
+}
+
 export default function SignupPage() {
   const router = useRouter();
   const [displayName, setDisplayName] = useState("");
@@ -23,9 +66,22 @@ export default function SignupPage() {
   const [role, setRole] = useState<Role>("writer");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
+  const [passwordTouched, setPasswordTouched] = useState(false);
+
+  const passwordStrength = getPasswordStrength(password);
+  const passwordErrors = passwordRules
+    .filter((rule) => !rule.test(password))
+    .map((rule) => rule.message);
+
+  const showPasswordFeedback = passwordTouched || password.length > 0;
 
   const onSubmit = async (e: FormEvent) => {
     e.preventDefault();
+    setPasswordTouched(true);
+    if (passwordErrors.length > 0) {
+      setError(passwordErrors[0]);
+      return;
+    }
     setLoading(true);
     setError("");
     try {
@@ -76,12 +132,48 @@ export default function SignupPage() {
           <input
             type="password"
             value={password}
-            onChange={(e) => setPassword(e.target.value)}
+            onChange={(e) => {
+              setPassword(e.target.value);
+              setPasswordTouched(true);
+              setError("");
+            }}
+            onBlur={() => setPasswordTouched(true)}
             required
-            minLength={6}
+            minLength={8}
             className="w-full px-4 py-3 rounded-xl bg-[#4a5033]/5 border border-[#4a5033]/10"
             placeholder="Password"
           />
+          {showPasswordFeedback ? (
+            <div className="space-y-3 rounded-xl border border-[#4a5033]/10 bg-[#4a5033]/5 p-4">
+              <div className="flex items-center justify-between gap-3 text-xs font-semibold">
+                <span className={passwordStrength.textClass}>Password strength</span>
+                <span className={passwordStrength.textClass}>{passwordStrength.label}</span>
+              </div>
+              <div className="h-2 overflow-hidden rounded-full bg-black/10">
+                <div
+                  className={`h-full w-full rounded-full transition-colors ${passwordStrength.barClass}`}
+                  style={{
+                    width:
+                      passwordStrength.label === "Weak"
+                        ? "25%"
+                        : passwordStrength.label === "Medium"
+                          ? "60%"
+                          : "100%",
+                  }}
+                />
+              </div>
+              <ul className="space-y-1 text-xs">
+                {passwordRules.map((rule) => {
+                  const isValid = rule.test(password);
+                  return (
+                    <li key={rule.label} className={isValid ? "text-emerald-600" : "text-rose-600"}>
+                      {isValid ? "✓" : "•"} {rule.message}
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          ) : null}
           <select
             value={role}
             onChange={(e) => setRole(e.target.value as Role)}
diff --git a/web/src/components/layout/MainLayout.tsx b/web/src/components/layout/MainLayout.tsx
index 7011bef..a79fd85 100644
--- a/web/src/components/layout/MainLayout.tsx
+++ b/web/src/components/layout/MainLayout.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { motion } from "framer-motion";
-import { PenTool, Search, Briefcase, Bell, User, Trophy } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { PenTool, Search, Briefcase, Bell, User, Trophy, Menu, X, } from "lucide-react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { cn } from "@/lib/utils";
@@ -22,17 +22,34 @@ export function MainLayout({ children }: { children: React.ReactNode }) {
   const role = useUserRole();
   const isEditor = role === "editor" || role === "admin";
   const [isMounted, setIsMounted] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   useEffect(() => {
     setIsMounted(true);
   }, []);
 
+  useEffect(() => {
+    if (mobileMenuOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [mobileMenuOpen]);
+
   useEffect(() => {
     if (isMounted && !authenticated) router.replace("/login");
   }, [authenticated, router, isMounted]);
 
   if (!isMounted || !authenticated) {
-    return <div className="min-h-screen flex items-center justify-center opacity-40 font-serif italic text-sm">Preparing workspace...</div>;
+    return (
+      <div className="min-h-screen flex items-center justify-center opacity-40 font-serif italic text-sm">
+        Preparing workspace...
+      </div>
+    );
   }
 
   const items = isEditor
@@ -50,15 +67,15 @@ export function MainLayout({ children }: { children: React.ReactNode }) {
       <motion.header
         initial={{ y: -100 }}
         animate={{ y: 0 }}
-        className="fixed top-0 inset-x-0 z-50 p-6 flex justify-center pointer-events-none"
+        className="fixed top-0 inset-x-0 z-50 p-6 flex justify-center"
       >
-        <div className="glass-card px-8 py-3 rounded-2xl flex items-center gap-12 pointer-events-auto border-[#4a5033]/10 shadow-2xl shadow-[#4a5033]/5">
+        <div className="glass-card w-full max-w-5xl px-4 sm:px-8 py-3 rounded-2xl flex items-center justify-between pointer-events-auto border-[#4a5033]/10 shadow-2xl shadow-[#4a5033]/5">
           {/* Logo */}
           <Link href="/" className="flex items-center gap-2 group">
-             <div className="w-8 h-8 ink-bg rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
-                <PenTool size={16} className="text-[#daddc6]" />
-             </div>
-             <span className="font-serif font-black italic tracking-tighter text-lg">Pub</span>
+            <div className="w-8 h-8 ink-bg rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
+              <PenTool size={16} className="text-[#daddc6]" />
+            </div>
+            <span className="font-serif font-black italic tracking-tighter text-lg">Pub</span>
           </Link>
 
           {/* Nav Links */}
@@ -78,23 +95,87 @@ export function MainLayout({ children }: { children: React.ReactNode }) {
             ))}
           </nav>
 
+          <button
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            className="md:hidden w-11 h-11 rounded-2xl glass-card flex items-center justify-center border border-[#4a5033]/10 text-[#4a5033] transition-all duration-300"
+          >
+            {mobileMenuOpen ? <X size={22} /> : <Menu size={22} />}
+          </button>
+
           {/* User Section */}
-          <div className="flex items-center gap-4 pl-8 border-l border-[#4a5033]/10">
-             <Link href="/notifications" className="opacity-40 hover:opacity-100 transition-opacity">
-                <Bell size={18} />
-             </Link>
-             <Link href="/profile" className="w-8 h-8 rounded-full bg-[#4a5033]/10 flex items-center justify-center hover:bg-[#4a5033]/20 transition-colors">
-                <User size={18} />
-             </Link>
-             <button
-               onClick={handleLogout}
-               className="text-[10px] font-bold uppercase tracking-widest opacity-40 hover:opacity-100 transition-opacity"
-               id="logout-btn"
-             >
-               Logout
-             </button>
+          <div className="hidden md:flex items-center gap-4 pl-8 border-l border-[#4a5033]/10">
+            <Link href="/notifications" className="opacity-40 hover:opacity-100 transition-opacity">
+              <Bell size={18} />
+            </Link>
+            <Link href="/profile" className="w-8 h-8 rounded-full bg-[#4a5033]/10 flex items-center justify-center hover:bg-[#4a5033]/20 transition-colors">
+              <User size={18} />
+            </Link>
+            <button
+              onClick={handleLogout}
+              className="text-[10px] font-bold uppercase tracking-widest opacity-40 hover:opacity-100 transition-opacity"
+              id="logout-btn"
+            >
+              Logout
+            </button>
           </div>
         </div>
+        <AnimatePresence>
+          {mobileMenuOpen && (
+            <>
+              <div
+                className="fixed inset-0 bg-black/20 backdrop-blur-sm z-[9998] md:hidden"
+                onClick={() => setMobileMenuOpen(false)}
+              />
+              <motion.div
+                initial={{ opacity: 0, y: -20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -20 }}
+                transition={{ duration: 0.25 }}
+                className="fixed top-24 left-6 right-6 md:hidden rounded-3xl p-6 border border-[#4a5033]/15 shadow-2xl shadow-[#4a5033]/10 z-[9999] bg-[#e8e7d8]/95 backdrop-blur-2xl max-h-[calc(100vh-120px)] overflow-y-auto"
+              >
+                <div className="flex flex-col gap-5 text-sm font-medium uppercase tracking-widest">
+                  {items.map((item) => (
+                    <Link
+                      key={item.href}
+                      href={item.href}
+                      onClick={() => setMobileMenuOpen(false)}
+                      className="flex items-center gap-3 border-b border-[#4a5033]/10 pb-3"
+                    >
+                      <item.icon size={16} />
+                      {item.label}
+                    </Link>
+                  ))}
+
+                  <Link
+                    href="/notifications"
+                    onClick={() => setMobileMenuOpen(false)}
+                    className="flex items-center gap-3 border-b border-[#4a5033]/10 pb-3"
+                  >
+                    <Bell size={16} />
+                    Notifications
+                  </Link>
+
+                  <Link
+                    href="/profile"
+                    onClick={() => setMobileMenuOpen(false)}
+                    className="flex items-center gap-3 border-b border-[#4a5033]/10 pb-3"
+                  >
+                    <User size={16} />
+                    Profile
+                  </Link>
+
+                  <button
+                    onClick={handleLogout}
+                    className="text-left flex items-center gap-3 pt-2 text-red-600"
+                  >
+                    <X size={16} />
+                    Logout
+                  </button>
+                </div>
+              </motion.div>
+            </>
+          )}
+        </AnimatePresence>
       </motion.header>
 
       {/* Page Content */}
@@ -109,7 +190,7 @@ export function MainLayout({ children }: { children: React.ReactNode }) {
 
       {/* Footer */}
       <footer className="py-12 border-t border-[#4a5033]/5 text-center text-[10px] font-bold uppercase tracking-widest opacity-30 mt-auto">
-         &copy; 2026 Writers&apos; Pub &bull; The Digital Atelier &bull; Premium Creative Ecosystem
+        &copy; 2026 Writers&apos; Pub &bull; The Digital Atelier &bull; Premium Creative Ecosystem
       </footer>
     </div>
   );