From 3a455c4ec8149014ddb5cb75cf4a758c67bdb2c1 Mon Sep 17 00:00:00 2001
From: CeeJayyy007 <63643138+CeeJayyy007@users.noreply.github.com>
Date: Thu, 7 Aug 2025 21:36:22 -0400
Subject: [PATCH 01/15] chore: fix linting for backend ser4vice and
 responsiveness for the nav bar on the landing page

---
 .../components/section/floating-nav.tsx       | 187 +++++++++++++-----
 1 file changed, 139 insertions(+), 48 deletions(-)

diff --git a/packages/frontend/src/features/landing/components/section/floating-nav.tsx b/packages/frontend/src/features/landing/components/section/floating-nav.tsx
index 6078e5d..bcaf0e0 100644
--- a/packages/frontend/src/features/landing/components/section/floating-nav.tsx
+++ b/packages/frontend/src/features/landing/components/section/floating-nav.tsx
@@ -5,6 +5,7 @@ import { Button } from '@/shared/components/ui/button';
 import { cn } from '@/shared/lib/utils';
 import { SharedIcons } from '@/shared/components/icons';
 import Link from 'next/link';
+import { Menu, X } from 'lucide-react';
 
 interface NavItem {
   label: string;
@@ -22,6 +23,7 @@ const navItems: NavItem[] = [
 export function FloatingNav() {
   const [isScrolled, setIsScrolled] = useState(false);
   const [activeHash, setActiveHash] = useState('');
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   useEffect(() => {
     // Update active hash on mount and hash change
@@ -61,58 +63,147 @@ export function FloatingNav() {
       // Update URL and trigger hashchange after scrolling
       window.history.pushState(null, '', href);
       window.dispatchEvent(new HashChangeEvent('hashchange'));
+
+      // Close mobile menu if open
+      if (isMenuOpen) setIsMenuOpen(false);
     }
   };
 
   return (
-    <nav
-      className={cn(
-        'fixed left-1/2 top-4 z-50 flex h-[70px] w-full max-w-screen-xl -translate-x-1/2 items-center justify-between rounded-2xl border border-[#C3D0FF] bg-[#E8EDFFBF] px-6 py-2 transition-all duration-300',
-        isScrolled ? 'shadow-lg backdrop-blur-md' : ''
-      )}
-    >
-      {/* Logo */}
-      <Link href="#home" className="flex items-center gap-2">
-        <SharedIcons.logo className="h-8 w-8" />
-        <span className="text-lg font-bold text-primary">CommuNet</span>
-      </Link>
-
-      {/* Navigation Links */}
-      <div className="flex items-center gap-6">
-        {navItems.map((item) => (
-          <Link
-            href={item.href}
-            key={item.href}
-            onClick={(e) => {
-              e.preventDefault();
-              handleNavClick(item.href);
-            }}
-            className={cn(
-              'px-2 text-base font-medium text-primary hover:border-b hover:border-primary',
-              item.href === activeHash ? 'border-b border-primary' : ''
-            )}
-          >
-            {item.label}
-          </Link>
-        ))}
-      </div>
-
-      {/* Action Buttons */}
-      <div className="flex items-center gap-3">
-        <Link href="/auth/register">
-          <Button className="h-10 bg-primary px-4 hover:bg-primary-500">
-            Get Started
-          </Button>
-        </Link>
-        <Link href="/auth/login">
-          <Button
-            variant="outline"
-            className="h-10 bg-[#E8EDFFBF] px-4 text-primary hover:bg-primary/10"
-          >
-            Login
-          </Button>
+    <>
+      <nav
+        className={cn(
+          'fixed left-1/2 top-4 z-40 flex h-[70px] w-full max-w-screen-xl -translate-x-1/2 items-center justify-between rounded-2xl border border-[#C3D0FF] bg-[#E8EDFFBF] px-4 py-2 transition-all duration-300 md:px-6',
+          isScrolled ? 'shadow-lg backdrop-blur-md' : ''
+        )}
+      >
+        {/* Logo */}
+        <Link href="#home" className="flex items-center gap-2">
+          <SharedIcons.logo className="h-8 w-8" />
+          <span className="text-lg font-bold text-primary">CommuNet</span>
         </Link>
-      </div>
-    </nav>
+
+        {/* Navigation Links (desktop) */}
+        <div className="hidden items-center gap-6 md:flex">
+          {navItems.map((item) => (
+            <Link
+              href={item.href}
+              key={item.href}
+              onClick={(e) => {
+                e.preventDefault();
+                handleNavClick(item.href);
+              }}
+              className={cn(
+                'px-2 text-base font-medium text-primary hover:border-b hover:border-primary',
+                item.href === activeHash ? 'border-b border-primary' : ''
+              )}
+            >
+              {item.label}
+            </Link>
+          ))}
+        </div>
+
+        {/* Action Buttons (desktop) */}
+        <div className="hidden items-center gap-3 md:flex">
+          <Link href="/auth/register">
+            <Button className="h-10 bg-primary px-4 hover:bg-primary-500">
+              Get Started
+            </Button>
+          </Link>
+          <Link href="/auth/login">
+            <Button
+              variant="outline"
+              className="h-10 bg-[#E8EDFFBF] px-4 text-primary hover:bg-primary/10"
+            >
+              Login
+            </Button>
+          </Link>
+        </div>
+
+        {/* Hamburger (mobile) */}
+        <button
+          aria-label="Open menu"
+          className="inline-flex items-center justify-center rounded-md p-2 text-primary md:hidden"
+          onClick={() => setIsMenuOpen(true)}
+        >
+          <Menu className="h-6 w-6" />
+        </button>
+      </nav>
+
+      {/* Mobile Menu Overlay */}
+      {isMenuOpen && (
+        <div className="fixed inset-0 z-50 md:hidden">
+          {/* Backdrop */}
+          <div
+            className="absolute inset-0 bg-black/50"
+            onClick={() => setIsMenuOpen(false)}
+            aria-hidden="true"
+          />
+
+          {/* Panel */}
+          <div className="absolute inset-y-0 right-0 flex w-4/5 max-w-xs flex-col gap-4 bg-white p-6 shadow-xl">
+            <div className="flex items-center justify-between">
+              <Link
+                href="#home"
+                className="flex items-center gap-2"
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleNavClick('#home');
+                }}
+              >
+                <SharedIcons.logo className="h-7 w-7" />
+                <span className="text-base font-bold text-primary">
+                  CommuNet
+                </span>
+              </Link>
+              <button
+                aria-label="Close menu"
+                className="rounded-md p-2 text-primary"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                <X className="h-6 w-6" />
+              </button>
+            </div>
+
+            <nav className="mt-2 flex flex-col gap-2">
+              {navItems.map((item) => (
+                <Link
+                  href={item.href}
+                  key={item.href}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    handleNavClick(item.href);
+                  }}
+                  className={cn(
+                    'rounded-md px-2 py-3 text-base font-medium',
+                    item.href === activeHash
+                      ? 'bg-primary/10 text-primary'
+                      : 'text-primary hover:bg-primary/5'
+                  )}
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </nav>
+
+            <div className="mt-auto flex flex-col gap-2">
+              <Link href="/auth/register" onClick={() => setIsMenuOpen(false)}>
+                <Button className="h-10 w-full bg-primary px-4 hover:bg-primary-500">
+                  Get Started
+                </Button>
+              </Link>
+              <Link href="/auth/login" onClick={() => setIsMenuOpen(false)}>
+                <Button
+                  variant="outline"
+                  className="h-10 w-full bg-[#E8EDFFBF] px-4 text-primary hover:bg-primary/10"
+                >
+                  Login
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
   );
 }

From 1e021014c8f75c3071b0f08a07fb6c3389528698 Mon Sep 17 00:00:00 2001
From: CeeJayyy007 <63643138+CeeJayyy007@users.noreply.github.com>
Date: Thu, 7 Aug 2025 21:46:55 -0400
Subject: [PATCH 02/15] chore: update landing page responsiveness

---
 .../components/section/about-section.tsx      | 25 ++++++------
 .../components/section/contact-section.tsx    | 19 ++++++----
 .../components/section/features-section.tsx   | 17 +++++----
 .../landing/components/section/footer.tsx     |  6 +--
 .../components/section/forum-section.tsx      | 38 +++++++++----------
 .../components/section/hero-section.tsx       | 11 +++---
 .../components/section/mentor-section.tsx     | 29 ++++++++------
 .../landing/components/section/newsletter.tsx | 17 ++++-----
 .../landing/components/section/partners.tsx   |  9 +++--
 9 files changed, 90 insertions(+), 81 deletions(-)

diff --git a/packages/frontend/src/features/landing/components/section/about-section.tsx b/packages/frontend/src/features/landing/components/section/about-section.tsx
index 11570f7..1544fc9 100644
--- a/packages/frontend/src/features/landing/components/section/about-section.tsx
+++ b/packages/frontend/src/features/landing/components/section/about-section.tsx
@@ -2,20 +2,19 @@ import Image from 'next/image';
 
 export function AboutSection() {
   return (
-    <section id="about" className="">
-      <div className="relative mx-auto max-w-7xl pt-[160px]"></div>
-      <div className="relative mx-auto max-w-7xl rounded-2xl bg-[#E8EDFF] px-[64px]">
-        <div className="grid gap-16 lg:grid-cols-2">
+    <section id="about" className="pt-16 sm:pt-20 md:pt-24">
+      <div className="relative mx-auto max-w-7xl rounded-2xl bg-[#E8EDFF] px-4 py-10 sm:px-6 md:px-10 lg:px-16">
+        <div className="grid gap-10 sm:gap-12 lg:grid-cols-2 lg:gap-16">
           {/* Content */}
-          <div className="flex flex-col justify-center space-y-6">
+          <div className="flex flex-col justify-center space-y-4 sm:space-y-6">
             <div className="space-y-4">
               <p className="paragraph-lg font-medium uppercase tracking-wider text-neutral-dark-100">
                 OUR STORY
               </p>
-              <h1 className="font-semibold tracking-tight text-primary-500">
+              <h1 className="text-3xl font-semibold tracking-tight text-primary-500 sm:text-4xl md:text-5xl">
                 About Us
               </h1>
-              <p className="text-xl font-normal leading-10">
+              <p className="text-base font-normal leading-7 sm:text-lg md:text-xl md:leading-9">
                 In 2019, Wunmi Adekanmbi discovered Alberta’s thriving tech
                 scene but also noticed a lack of diversity. Determined to create
                 a more inclusive space, she founded Immigrant Techies Alberta, a
@@ -28,15 +27,15 @@ export function AboutSection() {
           </div>
 
           {/* Forum Preview */}
-          <div className="h-[700px]">
+          <div className="h-[320px] sm:h-[420px] md:h-[560px] lg:h-[700px]">
             {/* Floating avatars */}
-            <div className="flex h-full w-full items-center justify-center pr-8">
+            <div className="flex h-full w-full items-center justify-center pr-0 sm:pr-6 lg:pr-8">
               <Image
                 src="/landing/about/image.png"
                 alt=""
-                height={680}
-                width={680}
-                className="absolute h-auto w-auto"
+                height={560}
+                width={560}
+                className="absolute h-auto w-auto max-w-[80%] sm:max-w-[85%] md:max-w-none"
                 priority
               />
             </div>
@@ -46,7 +45,7 @@ export function AboutSection() {
 
       {/* Background decoration */}
       <div className="absolute inset-0 -z-10">
-        <div className="absolute left-1/2 top-1/2 h-[800px] w-[800px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-50/50" />
+        <div className="absolute left-1/2 top-1/2 hidden h-[800px] w-[800px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-50/50 sm:block" />
       </div>
     </section>
   );
diff --git a/packages/frontend/src/features/landing/components/section/contact-section.tsx b/packages/frontend/src/features/landing/components/section/contact-section.tsx
index 17a8d56..103a4df 100644
--- a/packages/frontend/src/features/landing/components/section/contact-section.tsx
+++ b/packages/frontend/src/features/landing/components/section/contact-section.tsx
@@ -65,19 +65,22 @@ export function ContactSection() {
   }
 
   return (
-    <section id="contact" className="container-wide w-full px-16 py-[160px]">
+    <section
+      id="contact"
+      className="container-wide w-full px-4 py-12 sm:px-6 sm:py-16 lg:px-16 lg:py-24"
+    >
       <div className="mb-16 text-center">
         <h6 className="mb-2 font-semibold text-neutral-dark-100">
           Have Questions? We&apos;re Here to Help
         </h6>
-        <h1 className="text-5xl font-semibold text-primary-500">
+        <h1 className="text-3xl font-semibold text-primary-500 sm:text-4xl md:text-5xl">
           Get In Touch
         </h1>
       </div>
 
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-          <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-8">
             <FormField
               control={form.control}
               name="first_name"
@@ -87,7 +90,7 @@ export function ContactSection() {
                     <Input
                       {...field}
                       placeholder="First Name"
-                      className={`h-[60px] w-full rounded-xl border-[0.5px] border-[#C3D0FF] shadow-[0_4px_20px_0px_rgba(0,0,0,0.08)] ring-8 focus-visible:ring-offset-0 ${
+                      className={`h-12 w-full rounded-xl border-[0.5px] border-[#C3D0FF] shadow-[0_4px_20px_0px_rgba(0,0,0,0.08)] ring-8 focus-visible:ring-offset-0 sm:h-[60px] ${
                         isFieldValid('first_name')
                           ? 'bg-[#E9EEFF] ring-[#E9EEFF]'
                           : 'bg-neutral-light-200 ring-neutral-light-200'
@@ -107,7 +110,7 @@ export function ContactSection() {
                     <Input
                       {...field}
                       placeholder="Last Name"
-                      className={`h-[60px] w-full rounded-xl border-[#C3D0FF] shadow-[0_4px_20px_0px_rgba(0,0,0,0.08)] ring-8 focus-visible:ring-offset-0 ${
+                      className={`h-12 w-full rounded-xl border-[#C3D0FF] shadow-[0_4px_20px_0px_rgba(0,0,0,0.08)] ring-8 focus-visible:ring-offset-0 sm:h-[60px] ${
                         isFieldValid('last_name')
                           ? 'bg-[#E9EEFF] ring-[#E9EEFF]'
                           : 'bg-neutral-light-200 ring-neutral-light-200'
@@ -128,7 +131,7 @@ export function ContactSection() {
                   <Input
                     {...field}
                     placeholder="Email"
-                    className={`h-[60px] w-full rounded-xl border-[#C3D0FF] shadow-[0_4px_20px_0px_rgba(0,0,0,0.08)] ring-8 focus-visible:ring-offset-0 ${
+                    className={`h-12 w-full rounded-xl border-[#C3D0FF] shadow-[0_4px_20px_0px_rgba(0,0,0,0.08)] ring-8 focus-visible:ring-offset-0 sm:h-[60px] ${
                       isFieldValid('email')
                         ? 'bg-[#E9EEFF] ring-[#E9EEFF]'
                         : 'bg-neutral-light-200 ring-neutral-light-200'
@@ -148,7 +151,7 @@ export function ContactSection() {
                   <Textarea
                     {...field}
                     placeholder="Write your questions and messages here..."
-                    className={`h-[204px] w-full rounded-xl border-[#C3D0FF] text-xl shadow-[0_4px_20px_0px_rgba(0,0,0,0.08)] ring-8 focus-visible:ring-offset-0 ${
+                    className={`h-40 w-full rounded-xl border-[#C3D0FF] text-base shadow-[0_4px_20px_0px_rgba(0,0,0,0.08)] ring-8 focus-visible:ring-offset-0 sm:h-[204px] sm:text-xl ${
                       isFieldValid('contact_message')
                         ? 'bg-[#E9EEFF] ring-[#E9EEFF]'
                         : 'bg-neutral-light-200 ring-neutral-light-200'
@@ -162,7 +165,7 @@ export function ContactSection() {
           <Button
             type="submit"
             className={cn(
-              'h-[60px] w-full',
+              'h-12 w-full sm:h-[60px]',
               isSubmitted && 'bg-success-500 text-white'
             )}
             disabled={
diff --git a/packages/frontend/src/features/landing/components/section/features-section.tsx b/packages/frontend/src/features/landing/components/section/features-section.tsx
index 11373c2..9a5bb9b 100644
--- a/packages/frontend/src/features/landing/components/section/features-section.tsx
+++ b/packages/frontend/src/features/landing/components/section/features-section.tsx
@@ -42,20 +42,23 @@ export function FeaturesSection() {
   const router = useRouter();
 
   return (
-    <section id="features" className="px-16 py-[160px]">
+    <section
+      id="features"
+      className="px-4 py-16 sm:px-6 sm:py-20 md:py-24 lg:px-16 lg:py-32"
+    >
       <div className="mx-auto flex max-w-7xl flex-col items-center">
-        <div className="mb-[120px] flex flex-col items-center gap-2 text-center">
+        <div className="mb-14 flex flex-col items-center gap-2 text-center sm:mb-20 lg:mb-28">
           <h6 className="text-center font-semibold text-neutral-dark-100">
             WHY JOIN US?
           </h6>
-          <h2 className="text-5xl font-semibold text-primary-500">
+          <h2 className="text-3xl font-semibold text-primary-500 sm:text-4xl md:text-5xl">
             Connect. Learn. Thrive.
           </h2>
         </div>
-        <div className="grid grid-cols-1 gap-16 md:grid-cols-2 lg:grid-cols-4">
+        <div className="grid grid-cols-1 gap-8 sm:gap-10 md:grid-cols-2 lg:grid-cols-4 lg:gap-12">
           {features.map((feature) => (
             <div
-              className="flex flex-col items-center p-4 transition-all duration-200 hover:scale-110 hover:cursor-pointer hover:rounded-3xl hover:bg-neutral-light-100 hover:shadow-xl"
+              className="flex flex-col items-center p-4 transition-transform duration-200 hover:scale-105 hover:cursor-pointer hover:rounded-3xl hover:bg-neutral-light-100 hover:shadow-xl md:hover:scale-110"
               key={feature.title}
               onClick={() => {
                 router.push(feature.link);
@@ -67,12 +70,12 @@ export function FeaturesSection() {
                 description={feature.description}
                 icon={feature.icon}
                 bgColor={feature.bgColor}
-                iconClassName="h-[64px] w-[56px]"
+                iconClassName="h-12 w-12 sm:h-[56px] sm:w-[48px] md:h-[64px] md:w-[56px]"
               />
             </div>
           ))}
         </div>
-        <Link href="/home" className="mt-24">
+        <Link href="/home" className="mt-10 sm:mt-16 lg:mt-24">
           <Button className="px-12">Explore CommuNet</Button>
         </Link>
       </div>
diff --git a/packages/frontend/src/features/landing/components/section/footer.tsx b/packages/frontend/src/features/landing/components/section/footer.tsx
index e8d981a..6762b73 100644
--- a/packages/frontend/src/features/landing/components/section/footer.tsx
+++ b/packages/frontend/src/features/landing/components/section/footer.tsx
@@ -44,7 +44,7 @@ const FooterLink = ({ href, children }: FooterLinkProps) => {
 export function FooterSection() {
   return (
     <footer className="border-t bg-[#E9EEFF]">
-      <div className="flex justify-between px-16 py-8">
+      <div className="flex flex-col justify-between gap-8 px-4 py-8 sm:px-6 md:flex-row md:px-10 lg:px-16">
         {/* Logo and Social Links */}
         <div className="space-y-4">
           <Link href="#home" className="flex items-center gap-2">
@@ -72,7 +72,7 @@ export function FooterSection() {
         </div>
 
         {/* Company Links */}
-        <div className="flex gap-4">
+        <div className="grid grid-cols-2 gap-8 md:flex md:gap-8">
           <div className="flex flex-col">
             <h6 className="mb-4 font-semibold text-primary-500">Company</h6>
             <div className="flex flex-col gap-2">
@@ -108,7 +108,7 @@ export function FooterSection() {
       <Separator className="my-2 border-[0.5px] border-[#C3D0FF]" />
 
       {/* Copyright */}
-      <div className="px-16 py-4">
+      <div className="px-4 py-4 sm:px-6 lg:px-16">
         <p className="text-sm text-gray-600">
           © {new Date().getFullYear()} CommuNet. All rights reserved.
         </p>
diff --git a/packages/frontend/src/features/landing/components/section/forum-section.tsx b/packages/frontend/src/features/landing/components/section/forum-section.tsx
index 667884f..f44e5ae 100644
--- a/packages/frontend/src/features/landing/components/section/forum-section.tsx
+++ b/packages/frontend/src/features/landing/components/section/forum-section.tsx
@@ -4,55 +4,55 @@ import Link from 'next/link';
 
 export function ForumSection() {
   return (
-    <section className="relative overflow-hidden rounded-3xl bg-[#E9EEFF]">
-      <div className="relative z-10 mx-16">
-        <div className="grid lg:grid-cols-2">
+    <section className="relative overflow-hidden rounded-3xl bg-[#E9EEFF] px-4 py-12 sm:px-6 sm:py-16 lg:px-16 lg:py-24">
+      <div className="relative z-10">
+        <div className="grid gap-10 lg:grid-cols-2 lg:gap-12">
           {/* Content */}
-          <div className="flex flex-col justify-center space-y-6">
+          <div className="flex flex-col justify-center space-y-4 sm:space-y-6">
             <div className="space-y-4">
               <p className="paragraph-lg font-medium uppercase tracking-wider text-neutral-dark-100">
                 SEE WHAT&apos;S HAPPENING
               </p>
-              <h1 className="font-semibold tracking-tight text-primary-500">
+              <h1 className="text-3xl font-semibold tracking-tight text-primary-500 sm:text-4xl md:text-5xl">
                 Join the Conversation
               </h1>
-              <p className="text-xl font-normal leading-8">
+              <p className="text-base font-normal leading-7 sm:text-lg md:text-xl md:leading-8">
                 Join conversations with fellow immigrants, mentors, and industry
                 professionals. Ask questions, share experiences, and find
                 support in a welcoming community that understands your journey.
               </p>
             </div>
-            <Button className="h-[60px] w-fit px-12">
+            <Button className="h-12 w-fit px-8 sm:h-[60px] sm:px-12">
               <Link href="/home">Explore the Forum</Link>
             </Button>
           </div>
 
           {/* Forum Preview */}
-          <div className="h-[700px]">
+          <div className="h-[360px] sm:h-[480px] md:h-[560px] lg:h-[700px]">
             {/* Floating avatars */}
-            <div className="flex h-full w-full items-center justify-center pr-8">
+            <div className="relative flex h-full w-full items-center justify-center pr-0 sm:pr-4 md:pr-8">
               <Image
                 src="/landing/forum/3.png"
                 alt=""
-                height={680}
-                width={680}
-                className="absolute h-auto w-auto"
+                height={520}
+                width={520}
+                className="absolute h-auto w-auto max-w-[70%] sm:max-w-[80%] md:max-w-none"
                 priority
               />
               <Image
                 src="/landing/forum/2.png"
                 alt=""
-                height={514}
-                width={514}
-                className="absolute h-auto w-auto"
+                height={440}
+                width={440}
+                className="absolute h-auto w-auto max-w-[65%] sm:max-w-[75%] md:max-w-none"
                 priority
               />
               <Image
                 src="/landing/forum/1.png"
                 alt=""
-                height={520}
-                width={681}
-                className="absolute h-auto w-auto"
+                height={460}
+                width={600}
+                className="absolute h-auto w-auto max-w-[75%] sm:max-w-[85%] md:max-w-none"
                 priority
               />
             </div>
@@ -62,7 +62,7 @@ export function ForumSection() {
 
       {/* Background decoration */}
       <div className="absolute inset-0 -z-10">
-        <div className="absolute left-1/2 top-1/2 h-[800px] w-[800px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-50/50" />
+        <div className="absolute left-1/2 top-1/2 hidden h-[800px] w-[800px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-50/50 sm:block" />
       </div>
     </section>
   );
diff --git a/packages/frontend/src/features/landing/components/section/hero-section.tsx b/packages/frontend/src/features/landing/components/section/hero-section.tsx
index 3ddda49..71b5a5c 100644
--- a/packages/frontend/src/features/landing/components/section/hero-section.tsx
+++ b/packages/frontend/src/features/landing/components/section/hero-section.tsx
@@ -4,13 +4,12 @@ import Link from 'next/link';
 
 export function HeroSection() {
   return (
-    <section id="home" className="">
-      <div className="relative mx-auto max-w-7xl pt-[160px]"></div>
-      <div className="relative mx-auto max-w-7xl rounded-2xl bg-[#E8EDFF] px-[64px] py-16">
-        <div className="grid items-center gap-12 lg:grid-cols-2">
+    <section id="home" className="pt-24 sm:pt-28 md:pt-36">
+      <div className="relative mx-auto max-w-7xl rounded-2xl bg-[#E8EDFF] px-4 py-10 sm:px-6 sm:py-14 md:px-10 md:py-16 lg:px-16 lg:py-20">
+        <div className="grid items-center gap-8 sm:gap-10 md:gap-12 lg:grid-cols-2">
           {/* Left content column */}
           <div className="text-left">
-            <h1 className="text-[64px] font-semibold tracking-tight text-gray-900 md:text-5xl lg:text-6xl">
+            <h1 className="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl">
               Your <span className="text-primary">Pathway to Growth</span>,
               Support and Community
             </h1>
@@ -26,7 +25,7 @@ export function HeroSection() {
           </div>
 
           {/* Right image column */}
-          <div className="relative h-full w-full">
+          <div className="relative order-first h-full w-full lg:order-none">
             <HeroImageSVG.hero className="h-auto w-full object-contain" />
           </div>
         </div>
diff --git a/packages/frontend/src/features/landing/components/section/mentor-section.tsx b/packages/frontend/src/features/landing/components/section/mentor-section.tsx
index 2a0bf1a..bcb5f36 100644
--- a/packages/frontend/src/features/landing/components/section/mentor-section.tsx
+++ b/packages/frontend/src/features/landing/components/section/mentor-section.tsx
@@ -36,15 +36,18 @@ const steps: ItemCardProps[] = [
 
 export function MentorSection() {
   return (
-    <section id="mentorship" className="mx-auto pt-[160px]">
-      <div className="mb-[120px] text-center">
+    <section
+      id="mentorship"
+      className="mx-auto px-4 pt-16 sm:px-6 md:px-8 lg:pt-24"
+    >
+      <div className="mb-10 text-center sm:mb-16 lg:mb-24">
         <h6 className="mb-2 font-semibold text-neutral-dark-100">
           HOW IT WORKS
         </h6>
-        <h2 className="mb-6 text-5xl font-semibold text-primary-500">
+        <h2 className="mb-6 text-3xl font-semibold text-primary-500 sm:text-4xl md:text-5xl">
           Find a Mentor & Grow Your Career
         </h2>
-        <p className="mx-auto max-w-2xl text-center text-xl font-normal">
+        <p className="mx-auto max-w-2xl text-center text-base font-normal sm:text-lg md:text-xl">
           Gain support from experienced mentors who have navigated the
           challenges of immigrating and building a career. Whether you need
           career advice, skill development, or industry insights, our mentors
@@ -52,8 +55,8 @@ export function MentorSection() {
         </p>
       </div>
 
-      <div className="mb-12 grid grid-cols-1 gap-24 rounded-3xl bg-[#E9EEFF] p-16">
-        <div className="flex items-start gap-8">
+      <div className="mb-12 grid grid-cols-1 gap-10 rounded-3xl bg-[#E9EEFF] p-6 sm:gap-12 sm:p-10 md:p-12 lg:gap-16 lg:p-16">
+        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
           {steps.map((step, index) => (
             <ItemCard
               key={index}
@@ -61,19 +64,21 @@ export function MentorSection() {
               icon={step.icon}
               title={step.title}
               description={step.description}
-              iconClassName="h-[64px] w-[61px]"
+              iconClassName="h-12 w-12 sm:h-[48px] sm:w-[48px] md:h-[56px] md:w-[56px] lg:h-[64px] lg:w-[61px]"
             />
           ))}
         </div>
 
-        <div className="flex justify-center gap-4">
-          <Link href="/mentorship" className="h-[60px] w-fit">
-            <Button className="px-12" variant="outline">
+        <div className="flex flex-col justify-center gap-3 sm:flex-row sm:gap-4">
+          <Link href="/mentorship" className="h-12 w-full sm:h-[60px] sm:w-fit">
+            <Button className="w-full px-8 sm:px-12" variant="outline">
               Become a Mentor
             </Button>
           </Link>
-          <Link href="/mentorship" className="h-[60px] w-fit">
-            <Button className="px-12">Apply for Mentorship</Button>
+          <Link href="/mentorship" className="h-12 w-full sm:h-[60px] sm:w-fit">
+            <Button className="w-full px-8 sm:px-12">
+              Apply for Mentorship
+            </Button>
           </Link>
         </div>
       </div>
diff --git a/packages/frontend/src/features/landing/components/section/newsletter.tsx b/packages/frontend/src/features/landing/components/section/newsletter.tsx
index 6623d0e..c42cc0f 100644
--- a/packages/frontend/src/features/landing/components/section/newsletter.tsx
+++ b/packages/frontend/src/features/landing/components/section/newsletter.tsx
@@ -63,12 +63,12 @@ export function NewsletterSection() {
   };
 
   return (
-    <section className="mx-auto w-full max-w-3xl px-4 py-16">
+    <section className="mx-auto w-full max-w-3xl px-4 py-12 sm:py-16">
       <div className="space-y-4 text-center">
         <h6 className="mb-2 font-semibold text-neutral-dark-100">
           BE IN THE KNOW
         </h6>
-        <h1 className="text-5xl font-semibold text-primary-500">
+        <h1 className="text-3xl font-semibold text-primary-500 sm:text-4xl md:text-5xl">
           Subscribe to our Newsletter
         </h1>
         <p className="paragraph-lg text-neutral-dark-100">
@@ -77,11 +77,8 @@ export function NewsletterSection() {
       </div>
 
       <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="mt-8 flex gap-2"
-        >
-          <div className="relative flex w-full">
+        <form onSubmit={form.handleSubmit(onSubmit)} className="mt-8">
+          <div className="relative flex w-full flex-col gap-3 sm:flex-row sm:gap-2">
             <FormField
               control={form.control}
               name="email"
@@ -92,7 +89,7 @@ export function NewsletterSection() {
                       <Input
                         placeholder="johndoe@email.com"
                         className={cn(
-                          'h-[60px] w-full rounded-xl border-[#C3D0FF] shadow-[0_4px_20px_0px_rgba(0,0,0,0.08)]',
+                          'h-12 w-full rounded-xl border-[#C3D0FF] shadow-[0_4px_20px_0px_rgba(0,0,0,0.08)] sm:h-[60px]',
                           isSubmitted && 'pl-10',
                           form.formState.isValid
                             ? 'bg-[#E9EEFF] ring-8 ring-[#E9EEFF]'
@@ -111,12 +108,12 @@ export function NewsletterSection() {
                 </FormItem>
               )}
             />
-            <div className="absolute right-0 flex">
+            <div className="flex sm:absolute sm:right-0">
               <Button
                 type="submit"
                 disabled={form.formState.isSubmitting || isSubmitted}
                 className={cn(
-                  'h-[60px] w-fit rounded-xl bg-primary-500 px-12 text-white'
+                  'h-12 w-full rounded-xl bg-primary-500 px-8 text-white sm:h-[60px] sm:w-fit sm:px-12'
                 )}
               >
                 {isSubmitted ? 'Subscribed!' : 'Subscribe'}
diff --git a/packages/frontend/src/features/landing/components/section/partners.tsx b/packages/frontend/src/features/landing/components/section/partners.tsx
index f3f0beb..1529464 100644
--- a/packages/frontend/src/features/landing/components/section/partners.tsx
+++ b/packages/frontend/src/features/landing/components/section/partners.tsx
@@ -18,7 +18,10 @@ const PARTNER_LOGOS = [
 export function PartnersSection({ className }: PartnersProps) {
   return (
     <div
-      className={cn('w-full overflow-hidden bg-background py-12', className)}
+      className={cn(
+        'w-full overflow-hidden bg-background py-8 sm:py-10 lg:py-12',
+        className
+      )}
     >
       <h6 className="mb-8 text-center font-semibold text-neutral-dark-100">
         OUR TRUSTED PARTNERS
@@ -30,7 +33,7 @@ export function PartnersSection({ className }: PartnersProps) {
           {PARTNER_LOGOS.map((logo) => (
             <div
               key={logo.name}
-              className="mx-8 flex h-[120px] w-[120px] items-center justify-center"
+              className="mx-4 flex h-16 w-16 items-center justify-center sm:mx-6 sm:h-20 sm:w-20 md:h-24 md:w-24 lg:mx-8 lg:h-[120px] lg:w-[120px]"
             >
               <Image
                 src={logo.src}
@@ -48,7 +51,7 @@ export function PartnersSection({ className }: PartnersProps) {
           {PARTNER_LOGOS.map((logo) => (
             <div
               key={`${logo.name}-duplicate`}
-              className="mx-8 flex h-[120px] w-[120px] items-center justify-center"
+              className="mx-4 flex h-16 w-16 items-center justify-center sm:mx-6 sm:h-20 sm:w-20 md:h-24 md:w-24 lg:mx-8 lg:h-[120px] lg:w-[120px]"
             >
               <Image
                 src={logo.src}

From 18421ecf03407dd32a8add0f5612a17ca7be2bbf Mon Sep 17 00:00:00 2001
From: CeeJayyy007 <63643138+CeeJayyy007@users.noreply.github.com>
Date: Thu, 7 Aug 2025 22:01:05 -0400
Subject: [PATCH 03/15] chore: fix landing page responsiveness for contact,
 newsletter and footer sections

---
 .../landing/components/landing-page.tsx       |   2 +-
 .../components/section/contact-section.tsx    | 162 +++++++++---------
 .../landing/components/section/footer.tsx     |   8 +-
 .../landing/components/section/newsletter.tsx | 115 +++++++------
 4 files changed, 147 insertions(+), 140 deletions(-)

diff --git a/packages/frontend/src/features/landing/components/landing-page.tsx b/packages/frontend/src/features/landing/components/landing-page.tsx
index 885733a..33e5c6c 100644
--- a/packages/frontend/src/features/landing/components/landing-page.tsx
+++ b/packages/frontend/src/features/landing/components/landing-page.tsx
@@ -28,7 +28,7 @@ export const LandingPage = () => {
   }, []);
 
   return (
-    <main className="container-wide relative min-h-screen px-0">
+    <main className="relative min-h-screen w-full px-0">
       <div className={hash === '#about' ? 'block' : 'hidden'}>
         <AboutSection />
         <MissionSection />
diff --git a/packages/frontend/src/features/landing/components/section/contact-section.tsx b/packages/frontend/src/features/landing/components/section/contact-section.tsx
index 103a4df..24835d3 100644
--- a/packages/frontend/src/features/landing/components/section/contact-section.tsx
+++ b/packages/frontend/src/features/landing/components/section/contact-section.tsx
@@ -67,31 +67,73 @@ export function ContactSection() {
   return (
     <section
       id="contact"
-      className="container-wide w-full px-4 py-12 sm:px-6 sm:py-16 lg:px-16 lg:py-24"
+      className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 py-12 sm:py-16 lg:py-24"
     >
-      <div className="mb-16 text-center">
-        <h6 className="mb-2 font-semibold text-neutral-dark-100">
-          Have Questions? We&apos;re Here to Help
-        </h6>
-        <h1 className="text-3xl font-semibold text-primary-500 sm:text-4xl md:text-5xl">
-          Get In Touch
-        </h1>
-      </div>
+      <div className="mx-auto w-full max-w-screen-xl px-4 sm:px-6 lg:px-16">
+        <div className="mb-16 text-center">
+          <h6 className="mb-2 font-semibold text-neutral-dark-100">
+            Have Questions? We&apos;re Here to Help
+          </h6>
+          <h1 className="text-3xl font-semibold text-primary-500 sm:text-4xl md:text-5xl">
+            Get In Touch
+          </h1>
+        </div>
 
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-8">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-8">
+              <FormField
+                control={form.control}
+                name="first_name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        placeholder="First Name"
+                        className={`h-12 w-full rounded-xl border-[0.5px] border-[#C3D0FF] shadow-[0_4px_20px_0px_rgba(0,0,0,0.08)] ring-8 focus-visible:ring-offset-0 sm:h-[60px] ${
+                          isFieldValid('first_name')
+                            ? 'bg-[#E9EEFF] ring-[#E9EEFF]'
+                            : 'bg-neutral-light-200 ring-neutral-light-200'
+                        }`}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="last_name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        placeholder="Last Name"
+                        className={`h-12 w-full rounded-xl border-[#C3D0FF] shadow-[0_4px_20px_0px_rgba(0,0,0,0.08)] ring-8 focus-visible:ring-offset-0 sm:h-[60px] ${
+                          isFieldValid('last_name')
+                            ? 'bg-[#E9EEFF] ring-[#E9EEFF]'
+                            : 'bg-neutral-light-200 ring-neutral-light-200'
+                        }`}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
             <FormField
               control={form.control}
-              name="first_name"
+              name="email"
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
                     <Input
                       {...field}
-                      placeholder="First Name"
-                      className={`h-12 w-full rounded-xl border-[0.5px] border-[#C3D0FF] shadow-[0_4px_20px_0px_rgba(0,0,0,0.08)] ring-8 focus-visible:ring-offset-0 sm:h-[60px] ${
-                        isFieldValid('first_name')
+                      placeholder="Email"
+                      className={`h-12 w-full rounded-xl border-[#C3D0FF] shadow-[0_4px_20px_0px_rgba(0,0,0,0.08)] ring-8 focus-visible:ring-offset-0 sm:h-[60px] ${
+                        isFieldValid('email')
                           ? 'bg-[#E9EEFF] ring-[#E9EEFF]'
                           : 'bg-neutral-light-200 ring-neutral-light-200'
                       }`}
@@ -103,15 +145,15 @@ export function ContactSection() {
             />
             <FormField
               control={form.control}
-              name="last_name"
+              name="contact_message"
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <Input
+                    <Textarea
                       {...field}
-                      placeholder="Last Name"
-                      className={`h-12 w-full rounded-xl border-[#C3D0FF] shadow-[0_4px_20px_0px_rgba(0,0,0,0.08)] ring-8 focus-visible:ring-offset-0 sm:h-[60px] ${
-                        isFieldValid('last_name')
+                      placeholder="Write your questions and messages here..."
+                      className={`h-40 w-full rounded-xl border-[#C3D0FF] text-base shadow-[0_4px_20px_0px_rgba(0,0,0,0.08)] ring-8 focus-visible:ring-offset-0 sm:h-[204px] sm:text-xl ${
+                        isFieldValid('contact_message')
                           ? 'bg-[#E9EEFF] ring-[#E9EEFF]'
                           : 'bg-neutral-light-200 ring-neutral-light-200'
                       }`}
@@ -121,65 +163,25 @@ export function ContactSection() {
                 </FormItem>
               )}
             />
-          </div>
-          <FormField
-            control={form.control}
-            name="email"
-            render={({ field }) => (
-              <FormItem>
-                <FormControl>
-                  <Input
-                    {...field}
-                    placeholder="Email"
-                    className={`h-12 w-full rounded-xl border-[#C3D0FF] shadow-[0_4px_20px_0px_rgba(0,0,0,0.08)] ring-8 focus-visible:ring-offset-0 sm:h-[60px] ${
-                      isFieldValid('email')
-                        ? 'bg-[#E9EEFF] ring-[#E9EEFF]'
-                        : 'bg-neutral-light-200 ring-neutral-light-200'
-                    }`}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="contact_message"
-            render={({ field }) => (
-              <FormItem>
-                <FormControl>
-                  <Textarea
-                    {...field}
-                    placeholder="Write your questions and messages here..."
-                    className={`h-40 w-full rounded-xl border-[#C3D0FF] text-base shadow-[0_4px_20px_0px_rgba(0,0,0,0.08)] ring-8 focus-visible:ring-offset-0 sm:h-[204px] sm:text-xl ${
-                      isFieldValid('contact_message')
-                        ? 'bg-[#E9EEFF] ring-[#E9EEFF]'
-                        : 'bg-neutral-light-200 ring-neutral-light-200'
-                    }`}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <Button
-            type="submit"
-            className={cn(
-              'h-12 w-full sm:h-[60px]',
-              isSubmitted && 'bg-success-500 text-white'
-            )}
-            disabled={
-              isSubmitted ||
-              !isFieldValid('first_name') ||
-              !isFieldValid('last_name') ||
-              !isFieldValid('email') ||
-              !isFieldValid('contact_message')
-            }
-          >
-            {isSubmitted ? 'Message Sent!' : 'Send Message'}
-          </Button>
-        </form>
-      </Form>
+            <Button
+              type="submit"
+              className={cn(
+                'h-12 w-full sm:h-[60px]',
+                isSubmitted && 'bg-success-500 text-white'
+              )}
+              disabled={
+                isSubmitted ||
+                !isFieldValid('first_name') ||
+                !isFieldValid('last_name') ||
+                !isFieldValid('email') ||
+                !isFieldValid('contact_message')
+              }
+            >
+              {isSubmitted ? 'Message Sent!' : 'Send Message'}
+            </Button>
+          </form>
+        </Form>
+      </div>
     </section>
   );
 }
diff --git a/packages/frontend/src/features/landing/components/section/footer.tsx b/packages/frontend/src/features/landing/components/section/footer.tsx
index 6762b73..7251a7a 100644
--- a/packages/frontend/src/features/landing/components/section/footer.tsx
+++ b/packages/frontend/src/features/landing/components/section/footer.tsx
@@ -43,8 +43,8 @@ const FooterLink = ({ href, children }: FooterLinkProps) => {
 
 export function FooterSection() {
   return (
-    <footer className="border-t bg-[#E9EEFF]">
-      <div className="flex flex-col justify-between gap-8 px-4 py-8 sm:px-6 md:flex-row md:px-10 lg:px-16">
+    <footer className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 border-t bg-[#E9EEFF]">
+      <div className="mx-auto flex w-full max-w-screen-xl flex-col justify-between gap-8 px-4 py-8 sm:px-6 md:flex-row md:px-10 lg:px-16">
         {/* Logo and Social Links */}
         <div className="space-y-4">
           <Link href="#home" className="flex items-center gap-2">
@@ -105,10 +105,10 @@ export function FooterSection() {
         </div>
       </div>
 
-      <Separator className="my-2 border-[0.5px] border-[#C3D0FF]" />
+      <Separator className="mx-auto my-2 w-full max-w-screen-xl border-[0.5px] border-[#C3D0FF]" />
 
       {/* Copyright */}
-      <div className="px-4 py-4 sm:px-6 lg:px-16">
+      <div className="mx-auto w-full max-w-screen-xl px-4 py-4 sm:px-6 lg:px-16">
         <p className="text-sm text-gray-600">
           © {new Date().getFullYear()} CommuNet. All rights reserved.
         </p>
diff --git a/packages/frontend/src/features/landing/components/section/newsletter.tsx b/packages/frontend/src/features/landing/components/section/newsletter.tsx
index c42cc0f..086dc19 100644
--- a/packages/frontend/src/features/landing/components/section/newsletter.tsx
+++ b/packages/frontend/src/features/landing/components/section/newsletter.tsx
@@ -63,65 +63,70 @@ export function NewsletterSection() {
   };
 
   return (
-    <section className="mx-auto w-full max-w-3xl px-4 py-12 sm:py-16">
-      <div className="space-y-4 text-center">
-        <h6 className="mb-2 font-semibold text-neutral-dark-100">
-          BE IN THE KNOW
-        </h6>
-        <h1 className="text-3xl font-semibold text-primary-500 sm:text-4xl md:text-5xl">
-          Subscribe to our Newsletter
-        </h1>
-        <p className="paragraph-lg text-neutral-dark-100">
-          Stay up to date with our latest news and updates
-        </p>
-      </div>
+    <section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 py-12 sm:py-16">
+      <div className="mx-auto w-full max-w-screen-xl px-4">
+        <div className="space-y-4 text-center">
+          <h6 className="mb-2 font-semibold text-neutral-dark-100">
+            BE IN THE KNOW
+          </h6>
+          <h1 className="text-3xl font-semibold text-primary-500 sm:text-4xl md:text-5xl">
+            Subscribe to our Newsletter
+          </h1>
+          <p className="paragraph-lg text-neutral-dark-100">
+            Stay up to date with our latest news and updates
+          </p>
+        </div>
 
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="mt-8">
-          <div className="relative flex w-full flex-col gap-3 sm:flex-row sm:gap-2">
-            <FormField
-              control={form.control}
-              name="email"
-              render={({ field }) => (
-                <FormItem className="flex-1">
-                  <FormControl>
-                    <div className="relative">
-                      <Input
-                        placeholder="johndoe@email.com"
-                        className={cn(
-                          'h-12 w-full rounded-xl border-[#C3D0FF] shadow-[0_4px_20px_0px_rgba(0,0,0,0.08)] sm:h-[60px]',
-                          isSubmitted && 'pl-10',
-                          form.formState.isValid
-                            ? 'bg-[#E9EEFF] ring-8 ring-[#E9EEFF]'
-                            : 'bg-neutral-light-200 ring-8 ring-neutral-light-200'
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="mx-auto mt-8 w-full max-w-3xl"
+          >
+            <div className="relative flex w-full flex-col gap-3 sm:flex-row sm:gap-2">
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormControl>
+                      <div className="relative">
+                        <Input
+                          placeholder="johndoe@email.com"
+                          className={cn(
+                            'h-12 w-full rounded-xl border-[#C3D0FF] shadow-[0_4px_20px_0px_rgba(0,0,0,0.08)] sm:h-[60px]',
+                            isSubmitted && 'pl-10',
+                            form.formState.isValid
+                              ? 'bg-[#E9EEFF] ring-8 ring-[#E9EEFF]'
+                              : 'bg-neutral-light-200 ring-8 ring-neutral-light-200'
+                          )}
+                          type="email"
+                          {...field}
+                          disabled={form.formState.isSubmitting}
+                        />
+                        {isSubmitted && (
+                          <SharedIcons.check className="absolute left-2 top-1/2 h-6 w-6 -translate-y-1/2" />
                         )}
-                        type="email"
-                        {...field}
-                        disabled={form.formState.isSubmitting}
-                      />
-                      {isSubmitted && (
-                        <SharedIcons.check className="absolute left-2 top-1/2 h-6 w-6 -translate-y-1/2" />
-                      )}
-                    </div>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <div className="flex sm:absolute sm:right-0">
-              <Button
-                type="submit"
-                disabled={form.formState.isSubmitting || isSubmitted}
-                className={cn(
-                  'h-12 w-full rounded-xl bg-primary-500 px-8 text-white sm:h-[60px] sm:w-fit sm:px-12'
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
                 )}
-              >
-                {isSubmitted ? 'Subscribed!' : 'Subscribe'}
-              </Button>
+              />
+              <div className="flex sm:absolute sm:right-0">
+                <Button
+                  type="submit"
+                  disabled={form.formState.isSubmitting || isSubmitted}
+                  className={cn(
+                    'h-12 w-full rounded-xl bg-primary-500 px-8 text-white sm:h-[60px] sm:w-fit sm:px-12'
+                  )}
+                >
+                  {isSubmitted ? 'Subscribed!' : 'Subscribe'}
+                </Button>
+              </div>
             </div>
-          </div>
-        </form>
-      </Form>
+          </form>
+        </Form>
+      </div>
     </section>
   );
 }

From 1ee29d40ab10dac79c9b9ecfcb30e828ec376eaa Mon Sep 17 00:00:00 2001
From: CeeJayyy007 <63643138+CeeJayyy007@users.noreply.github.com>
Date: Thu, 7 Aug 2025 22:15:25 -0400
Subject: [PATCH 04/15] chore: fix image responsiveness

---
 .../components/section/about-section.tsx      | 23 ++++----
 .../components/section/forum-section.tsx      | 55 +++++++++----------
 2 files changed, 36 insertions(+), 42 deletions(-)

diff --git a/packages/frontend/src/features/landing/components/section/about-section.tsx b/packages/frontend/src/features/landing/components/section/about-section.tsx
index 1544fc9..8cc48b4 100644
--- a/packages/frontend/src/features/landing/components/section/about-section.tsx
+++ b/packages/frontend/src/features/landing/components/section/about-section.tsx
@@ -26,19 +26,16 @@ export function AboutSection() {
             </div>
           </div>
 
-          {/* Forum Preview */}
-          <div className="h-[320px] sm:h-[420px] md:h-[560px] lg:h-[700px]">
-            {/* Floating avatars */}
-            <div className="flex h-full w-full items-center justify-center pr-0 sm:pr-6 lg:pr-8">
-              <Image
-                src="/landing/about/image.png"
-                alt=""
-                height={560}
-                width={560}
-                className="absolute h-auto w-auto max-w-[80%] sm:max-w-[85%] md:max-w-none"
-                priority
-              />
-            </div>
+          {/* About illustration */}
+          <div className="relative h-[320px] sm:h-[420px] md:h-[560px] lg:h-[700px] xl:h-[800px]">
+            <Image
+              src="/landing/about/image.png"
+              alt="About illustration"
+              fill
+              sizes="(max-width: 640px) 90vw, (max-width: 1024px) 50vw, (max-width: 1536px) 40vw, 640px"
+              className="object-contain"
+              priority
+            />
           </div>
         </div>
       </div>
diff --git a/packages/frontend/src/features/landing/components/section/forum-section.tsx b/packages/frontend/src/features/landing/components/section/forum-section.tsx
index f44e5ae..2e5bf51 100644
--- a/packages/frontend/src/features/landing/components/section/forum-section.tsx
+++ b/packages/frontend/src/features/landing/components/section/forum-section.tsx
@@ -27,35 +27,32 @@ export function ForumSection() {
             </Button>
           </div>
 
-          {/* Forum Preview */}
-          <div className="h-[360px] sm:h-[480px] md:h-[560px] lg:h-[700px]">
-            {/* Floating avatars */}
-            <div className="relative flex h-full w-full items-center justify-center pr-0 sm:pr-4 md:pr-8">
-              <Image
-                src="/landing/forum/3.png"
-                alt=""
-                height={520}
-                width={520}
-                className="absolute h-auto w-auto max-w-[70%] sm:max-w-[80%] md:max-w-none"
-                priority
-              />
-              <Image
-                src="/landing/forum/2.png"
-                alt=""
-                height={440}
-                width={440}
-                className="absolute h-auto w-auto max-w-[65%] sm:max-w-[75%] md:max-w-none"
-                priority
-              />
-              <Image
-                src="/landing/forum/1.png"
-                alt=""
-                height={460}
-                width={600}
-                className="absolute h-auto w-auto max-w-[75%] sm:max-w-[85%] md:max-w-none"
-                priority
-              />
-            </div>
+          {/* Forum illustration */}
+          <div className="relative h-[360px] sm:h-[480px] md:h-[560px] lg:h-[700px] xl:h-[800px]">
+            <Image
+              src="/landing/forum/2.png"
+              alt=""
+              fill
+              sizes="(max-width: 640px) 90vw, (max-width: 1024px) 50vw, (max-width: 1536px) 40vw, 480px"
+              className="object-contain"
+              priority
+            />
+            <Image
+              src="/landing/forum/3.png"
+              alt="Forum illustration"
+              fill
+              sizes="(max-width: 640px) 90vw, (max-width: 1024px) 50vw, (max-width: 1536px) 40vw, 640px"
+              className="object-contain"
+              priority
+            />
+            <Image
+              src="/landing/forum/1.png"
+              alt=""
+              fill
+              sizes="(max-width: 640px) 90vw, (max-width: 1024px) 50vw, (max-width: 1536px) 40vw, 480px"
+              className="object-contain"
+              priority
+            />
           </div>
         </div>
       </div>

From faa3b4b8b95c97f69fa311900fef297b9b8cf3ca Mon Sep 17 00:00:00 2001
From: CeeJayyy007 <63643138+CeeJayyy007@users.noreply.github.com>
Date: Thu, 7 Aug 2025 22:32:29 -0400
Subject: [PATCH 05/15] chore: fix responsiveness for auth pages

---
 .../frontend/src/app/auth/forgot-password/page.tsx  | 13 +++++++++----
 packages/frontend/src/app/auth/login/page.tsx       | 13 +++++++++----
 packages/frontend/src/app/auth/register/page.tsx    | 13 +++++++++----
 .../frontend/src/app/auth/reset-password/page.tsx   | 10 ++++++----
 4 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/app/auth/forgot-password/page.tsx b/packages/frontend/src/app/auth/forgot-password/page.tsx
index 394f1d2..ebe4a77 100644
--- a/packages/frontend/src/app/auth/forgot-password/page.tsx
+++ b/packages/frontend/src/app/auth/forgot-password/page.tsx
@@ -11,14 +11,19 @@ export const metadata: Metadata = {
 
 const ForgotPasswordPage = () => {
   return (
-    <div className="container-wide relative flex h-[100vh] items-center justify-between">
-      <div className="w-1/4 min-w-[420px]">
+    <div className="relative mx-auto flex min-h-screen w-full max-w-screen-xl items-center justify-center px-4 sm:gap-8 md:gap-12 lg:gap-16">
+      <div className="w-full sm:w-[420px]">
         <Suspense fallback={<div>Loading...</div>}>
           <ForgotPasswordForm />
         </Suspense>
       </div>
-      <Separator orientation="vertical" className="h-full" />
-      <div className="w-2/4">
+      <div className="hidden sm:block">
+        <Separator
+          orientation="vertical"
+          className="mx-6 h-[70vh] md:mx-8 lg:mx-10"
+        />
+      </div>
+      <div className="hidden flex-1 sm:block">
         <AuthCarousel />
       </div>
     </div>
diff --git a/packages/frontend/src/app/auth/login/page.tsx b/packages/frontend/src/app/auth/login/page.tsx
index 3bcbfbb..d6c5672 100644
--- a/packages/frontend/src/app/auth/login/page.tsx
+++ b/packages/frontend/src/app/auth/login/page.tsx
@@ -9,12 +9,17 @@ export const metadata: Metadata = {
 
 const LoginPage = () => {
   return (
-    <div className="container-wide relative flex h-[100vh] items-center justify-between">
-      <div className="w-1/4 min-w-[420px]">
+    <div className="relative mx-auto flex min-h-screen w-full max-w-screen-xl items-center justify-center px-4 sm:gap-8 md:gap-12 lg:gap-16">
+      <div className="w-full sm:w-[420px]">
         <AuthForm />
       </div>
-      <Separator orientation="vertical" className="h-full" />
-      <div className="w-2/4">
+      <div className="hidden sm:block">
+        <Separator
+          orientation="vertical"
+          className="mx-6 h-[70vh] md:mx-8 lg:mx-10"
+        />
+      </div>
+      <div className="hidden flex-1 sm:block">
         <AuthCarousel />
       </div>
     </div>
diff --git a/packages/frontend/src/app/auth/register/page.tsx b/packages/frontend/src/app/auth/register/page.tsx
index 8bd53fb..96df53b 100644
--- a/packages/frontend/src/app/auth/register/page.tsx
+++ b/packages/frontend/src/app/auth/register/page.tsx
@@ -10,12 +10,17 @@ export const metadata: Metadata = {
 
 export default function RegisterPage() {
   return (
-    <div className="container-wide relative flex h-[100vh] items-center justify-between">
-      <div className="w-1/4 min-w-[420px]">
+    <div className="relative mx-auto flex min-h-screen w-full max-w-screen-xl items-center justify-center px-4 sm:gap-8 md:gap-12 lg:gap-16">
+      <div className="w-full sm:w-[420px]">
         <AuthForm />
       </div>
-      <Separator orientation="vertical" className="h-full" />
-      <div className="w-2/4">
+      <div className="hidden sm:block">
+        <Separator
+          orientation="vertical"
+          className="mx-6 h-[70vh] md:mx-8 lg:mx-10"
+        />
+      </div>
+      <div className="hidden flex-1 sm:block">
         <AuthCarousel />
       </div>
     </div>
diff --git a/packages/frontend/src/app/auth/reset-password/page.tsx b/packages/frontend/src/app/auth/reset-password/page.tsx
index 636d988..fdfd2a3 100644
--- a/packages/frontend/src/app/auth/reset-password/page.tsx
+++ b/packages/frontend/src/app/auth/reset-password/page.tsx
@@ -26,14 +26,16 @@ const ResetPasswordContent = () => {
   }, [router, searchParams]);
 
   return (
-    <div className="container-wide relative flex h-[100vh] items-center justify-between">
-      <div className="w-1/4 min-w-[420px]">
+    <div className="relative mx-auto flex min-h-screen w-full max-w-screen-xl items-center justify-between px-4">
+      <div className="w-full sm:w-[420px]">
         <Suspense fallback={<div>Loading...</div>}>
           <ForgotPasswordForm />
         </Suspense>
       </div>
-      <Separator orientation="vertical" className="h-full" />
-      <div className="w-2/4">
+      <div className="hidden h-full sm:block">
+        <Separator orientation="vertical" className="h-[70vh]" />
+      </div>
+      <div className="hidden flex-1 sm:block">
         <AuthCarousel />
       </div>
     </div>

From 40b6cc9eaf5940f5a309c490e24b9cac6fd9f1db Mon Sep 17 00:00:00 2001
From: CeeJayyy007 <63643138+CeeJayyy007@users.noreply.github.com>
Date: Thu, 7 Aug 2025 22:32:59 -0400
Subject: [PATCH 06/15] chore: fix auth responsiveness

---
 packages/frontend/src/app/auth/reset-password/page.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/app/auth/reset-password/page.tsx b/packages/frontend/src/app/auth/reset-password/page.tsx
index fdfd2a3..80ceba0 100644
--- a/packages/frontend/src/app/auth/reset-password/page.tsx
+++ b/packages/frontend/src/app/auth/reset-password/page.tsx
@@ -26,14 +26,17 @@ const ResetPasswordContent = () => {
   }, [router, searchParams]);
 
   return (
-    <div className="relative mx-auto flex min-h-screen w-full max-w-screen-xl items-center justify-between px-4">
+    <div className="relative mx-auto flex min-h-screen w-full max-w-screen-xl items-center justify-center px-4 sm:gap-8 md:gap-12 lg:gap-16">
       <div className="w-full sm:w-[420px]">
         <Suspense fallback={<div>Loading...</div>}>
           <ForgotPasswordForm />
         </Suspense>
       </div>
-      <div className="hidden h-full sm:block">
-        <Separator orientation="vertical" className="h-[70vh]" />
+      <div className="hidden sm:block">
+        <Separator
+          orientation="vertical"
+          className="mx-6 h-[70vh] md:mx-8 lg:mx-10"
+        />
       </div>
       <div className="hidden flex-1 sm:block">
         <AuthCarousel />

From a0885acad05e5f170c34b5eaaf765d6caf3e556b Mon Sep 17 00:00:00 2001
From: CeeJayyy007 <63643138+CeeJayyy007@users.noreply.github.com>
Date: Thu, 7 Aug 2025 23:13:13 -0400
Subject: [PATCH 07/15] chore: fix sidebar responsiveness

---
 .../shared/components/layout/main-layout.tsx  | 32 +++++++++++++---
 .../navigation/main-nav/main-nav.tsx          |  2 +-
 .../components/navigation/side-nav/index.tsx  |  1 +
 .../navigation/side-nav/mobile-sidebar.tsx    | 37 +++++++++++++++++++
 .../navigation/side-nav/sidebar.tsx           | 35 +++++++++++-------
 .../src/shared/store/sidebar.store.ts         | 15 ++++++++
 6 files changed, 102 insertions(+), 20 deletions(-)
 create mode 100644 packages/frontend/src/shared/components/navigation/side-nav/mobile-sidebar.tsx
 create mode 100644 packages/frontend/src/shared/store/sidebar.store.ts

diff --git a/packages/frontend/src/shared/components/layout/main-layout.tsx b/packages/frontend/src/shared/components/layout/main-layout.tsx
index a770e3f..30e0305 100644
--- a/packages/frontend/src/shared/components/layout/main-layout.tsx
+++ b/packages/frontend/src/shared/components/layout/main-layout.tsx
@@ -1,8 +1,10 @@
 'use client';
 
 import { MainNav } from '../navigation/main-nav';
-import { Sidebar } from '../navigation/side-nav';
+import { Sidebar, MobileSidebar } from '../navigation/side-nav';
 import { useState } from 'react';
+import { Menu } from 'lucide-react';
+import { useSidebarStore } from '@/shared/store/sidebar.store';
 
 interface MainLayoutProps {
   children: React.ReactNode;
@@ -11,14 +13,34 @@ interface MainLayoutProps {
 const MainLayout = ({ children }: MainLayoutProps) => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 
+  const { open } = useSidebarStore();
+
   return (
     <div className="flex h-screen w-full">
-      <Sidebar isOpen={isSidebarOpen} onToggle={setIsSidebarOpen} />
+      {/* Permanent sidebar for md+ */}
+      <div className="hidden md:block">
+        <Sidebar isOpen={isSidebarOpen} onToggle={setIsSidebarOpen} />
+      </div>
+
+      {/* Mobile drawer */}
+      <MobileSidebar />
+
       <main
-        className={`flex flex-1 flex-col ${isSidebarOpen ? 'ml-[260px]' : 'ml-[92px]'}`}
+        className={`flex flex-1 flex-col ${isSidebarOpen ? 'md:ml-[260px]' : 'md:ml-[92px]'}`}
       >
-        <MainNav />
-        <div className="flex-1 bg-neutral-light-200 p-8">{children}</div>
+        <div className="sticky top-0 z-30 flex h-full items-center justify-between border-b bg-background px-4 md:px-6">
+          <button
+            aria-label="Open menu"
+            onClick={open}
+            className="inline-flex h-9 w-9 items-center justify-center rounded-md border md:hidden"
+          >
+            <Menu className="h-5 w-5" />
+          </button>
+          <div className="flex-1">
+            <MainNav />
+          </div>
+        </div>
+        <div className="flex-1 bg-neutral-light-200 p-4 md:p-8">{children}</div>
       </main>
     </div>
   );
diff --git a/packages/frontend/src/shared/components/navigation/main-nav/main-nav.tsx b/packages/frontend/src/shared/components/navigation/main-nav/main-nav.tsx
index 537e0fa..53cb94f 100644
--- a/packages/frontend/src/shared/components/navigation/main-nav/main-nav.tsx
+++ b/packages/frontend/src/shared/components/navigation/main-nav/main-nav.tsx
@@ -35,7 +35,7 @@ export const MainNav = () => {
   };
 
   return (
-    <div className="sticky top-0 z-30 w-full border-b bg-white py-4">
+    <div className="sticky top-0 z-30 w-full bg-white py-4">
       <div className="flex h-full items-center justify-between px-8">
         <BreadcrumbNav />
         <div className="flex items-center gap-2">
diff --git a/packages/frontend/src/shared/components/navigation/side-nav/index.tsx b/packages/frontend/src/shared/components/navigation/side-nav/index.tsx
index 563a419..5968c10 100644
--- a/packages/frontend/src/shared/components/navigation/side-nav/index.tsx
+++ b/packages/frontend/src/shared/components/navigation/side-nav/index.tsx
@@ -1,2 +1,3 @@
 export * from './sidebar';
 export * from './nav-item';
+export * from './mobile-sidebar';
diff --git a/packages/frontend/src/shared/components/navigation/side-nav/mobile-sidebar.tsx b/packages/frontend/src/shared/components/navigation/side-nav/mobile-sidebar.tsx
new file mode 100644
index 0000000..63c9c6a
--- /dev/null
+++ b/packages/frontend/src/shared/components/navigation/side-nav/mobile-sidebar.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogOverlay
+} from '@/shared/components/ui/dialog';
+import { Sidebar } from './sidebar';
+import { useSidebarStore } from '@/shared/store/sidebar.store';
+
+export const MobileSidebar = () => {
+  const { isOpen, close } = useSidebarStore();
+  const [expanded, setExpanded] = useState(true);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => (open ? undefined : close())}>
+      <DialogOverlay className="!bg-black/30" />
+      <DialogContent
+        closeButton={false}
+        className="fixed inset-0 z-50 translate-x-0 translate-y-0 rounded-none border-0 bg-transparent p-0 shadow-none data-[state=open]:animate-in data-[state=closed]:animate-out"
+      >
+        {/* Sidebar fixed to the left; keep its toggle visible */}
+        <Sidebar isOpen={expanded} onToggle={setExpanded} />
+        {/* Click-catcher area to close when clicking outside the sidebar */}
+        <div
+          className={
+            expanded
+              ? 'absolute inset-0 left-[260px] md:left-[260px]'
+              : 'absolute inset-0 left-[92px] md:left-[92px]'
+          }
+          onClick={close}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/packages/frontend/src/shared/components/navigation/side-nav/sidebar.tsx b/packages/frontend/src/shared/components/navigation/side-nav/sidebar.tsx
index 6a0b2ce..faae742 100644
--- a/packages/frontend/src/shared/components/navigation/side-nav/sidebar.tsx
+++ b/packages/frontend/src/shared/components/navigation/side-nav/sidebar.tsx
@@ -19,9 +19,14 @@ import { AlertDialogUI } from '@/shared/components/notification/alert-dialog';
 interface SidebarProps {
   isOpen: boolean;
   onToggle: (isOpen: boolean) => void;
+  hideToggle?: boolean;
 }
 
-export const Sidebar = ({ isOpen, onToggle }: SidebarProps) => {
+export const Sidebar = ({
+  isOpen,
+  onToggle,
+  hideToggle = false
+}: SidebarProps) => {
   const pathname = usePathname();
   const { logout } = useAuth();
   const router = useRouter();
@@ -63,26 +68,28 @@ export const Sidebar = ({ isOpen, onToggle }: SidebarProps) => {
   return (
     <div
       className={cn(
-        'fixed left-0 top-0 z-40 flex h-screen flex-col overflow-visible bg-primary p-6 transition-all duration-300',
+        'fixed left-0 top-0 z-50 flex h-screen flex-col overflow-visible bg-primary p-6 transition-all duration-300',
         isOpen ? 'w-[260px]' : 'w-[92px]'
       )}
     >
       <div className="flex h-full flex-col overflow-visible">
         <AlertDialogUI />
-        <Button
-          onClick={toggleSidebar}
-          className={cn(
-            'group absolute z-10 h-7 w-7 rounded-full bg-neutral-light-400 p-0 hover:bg-neutral-light-600',
-            isOpen ? 'left-[246px]' : 'left-[78px]'
-          )}
-        >
-          <SharedIcons.chevronLeft
+        {!hideToggle && (
+          <Button
+            onClick={toggleSidebar}
             className={cn(
-              'h-6 w-6 stroke-primary transition-transform duration-300 group-hover:stroke-black',
-              !isOpen && 'rotate-180'
+              'group absolute z-10 h-7 w-7 rounded-full bg-neutral-light-400 p-0 hover:bg-neutral-light-600',
+              isOpen ? 'left-[246px]' : 'left-[78px]'
             )}
-          />
-        </Button>
+          >
+            <SharedIcons.chevronLeft
+              className={cn(
+                'h-6 w-6 stroke-primary transition-transform duration-300 group-hover:stroke-black',
+                !isOpen && 'rotate-180'
+              )}
+            />
+          </Button>
+        )}
         <div
           className="mb-6 flex flex-shrink-0 cursor-pointer flex-row items-center gap-2"
           onClick={() => router.push('/')}
diff --git a/packages/frontend/src/shared/store/sidebar.store.ts b/packages/frontend/src/shared/store/sidebar.store.ts
new file mode 100644
index 0000000..c200f39
--- /dev/null
+++ b/packages/frontend/src/shared/store/sidebar.store.ts
@@ -0,0 +1,15 @@
+import { create } from 'zustand';
+
+interface SidebarState {
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+}
+
+export const useSidebarStore = create<SidebarState>((set) => ({
+  isOpen: false,
+  open: () => set({ isOpen: true }),
+  close: () => set({ isOpen: false }),
+  toggle: () => set((s) => ({ isOpen: !s.isOpen }))
+}));

From 48b077fa060ba3b07d25c2cf1665265f5a0e7bae Mon Sep 17 00:00:00 2001
From: CeeJayyy007 <63643138+CeeJayyy007@users.noreply.github.com>
Date: Thu, 7 Aug 2025 23:23:53 -0400
Subject: [PATCH 08/15] chore: fix mobile responsiveness for netwroking page

---
 .../networking/components/networking.tsx      | 16 +++++++--------
 .../navigation/main-nav/main-nav.tsx          | 20 ++++++++++---------
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/features/networking/components/networking.tsx b/packages/frontend/src/features/networking/components/networking.tsx
index 7e6d4cd..2def8d9 100644
--- a/packages/frontend/src/features/networking/components/networking.tsx
+++ b/packages/frontend/src/features/networking/components/networking.tsx
@@ -128,16 +128,16 @@ export const Networking = () => {
   // Loading
   if (isLoading) {
     return (
-      <div className="container h-full w-full space-y-4">
+      <div className="container h-full w-full space-y-4 px-4 md:px-0">
         <Card>
-          <CardHeader className="flex animate-pulse flex-row items-center justify-between space-y-0 pb-4">
+          <CardHeader className="flex animate-pulse flex-col items-start justify-between gap-3 space-y-0 pb-4 md:flex-row md:items-center">
             <div className="h-8 w-32 rounded-md bg-muted" />
             <div className="h-10 w-64 rounded-md bg-muted" />
           </CardHeader>
           <CardContent className="space-y-6">
             <div className="space-y-4">
               <div className="h-10 w-full rounded-md bg-muted" />
-              <div className="grid grid-cols-3 gap-4">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
                 <div className="h-10 rounded-md bg-muted" />
                 <div className="h-10 rounded-md bg-muted" />
                 <div className="h-10 rounded-md bg-muted" />
@@ -147,7 +147,7 @@ export const Networking = () => {
         </Card>
         <Card className="mt-6">
           <CardContent>
-            <div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-4">
+            <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
               {[...Array(8)].map((_, index) => (
                 <div
                   key={index}
@@ -170,14 +170,14 @@ export const Networking = () => {
   }
 
   return (
-    <div className="container h-full w-full space-y-4">
+    <div className="container h-full w-full space-y-4 px-4 md:px-0">
       <Tabs defaultValue="network" onValueChange={setActiveTab}>
         <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
+          <CardHeader className="flex flex-col items-start justify-between gap-3 space-y-0 pb-4 md:flex-row md:items-center">
             <CardTitle>
               <h4 className="font-semibold">Search Networks</h4>
             </CardTitle>
-            <TabsList className="grid grid-cols-3">
+            <TabsList className="flex w-full max-w-full gap-2 overflow-x-auto md:grid md:grid-cols-3 md:gap-0">
               <TabsTrigger value="network">Network</TabsTrigger>
               <TabsTrigger value="mentor">Mentors</TabsTrigger>
               <TabsTrigger value="connection">Connections</TabsTrigger>
@@ -199,7 +199,7 @@ export const Networking = () => {
                   />
                 ) : (
                   <>
-                    <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
+                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
                       {paginatedData.map((request) => (
                         <NetworkingCard key={request.id} profile={request} />
                       ))}
diff --git a/packages/frontend/src/shared/components/navigation/main-nav/main-nav.tsx b/packages/frontend/src/shared/components/navigation/main-nav/main-nav.tsx
index 53cb94f..0cb594f 100644
--- a/packages/frontend/src/shared/components/navigation/main-nav/main-nav.tsx
+++ b/packages/frontend/src/shared/components/navigation/main-nav/main-nav.tsx
@@ -36,17 +36,19 @@ export const MainNav = () => {
 
   return (
     <div className="sticky top-0 z-30 w-full bg-white py-4">
-      <div className="flex h-full items-center justify-between px-8">
+      <div className="flex h-full items-center justify-between px-4 md:px-8">
         <BreadcrumbNav />
         <div className="flex items-center gap-2">
-          <IconInput
-            leftIcon="search"
-            className="h-10 w-[250px] rounded-full bg-neutral-light-100"
-            placeholder="Search"
-            onChange={(e) => {
-              console.log(e.target.value);
-            }}
-          />
+          <div className="hidden sm:block">
+            <IconInput
+              leftIcon="search"
+              className="h-10 w-[220px] rounded-full bg-neutral-light-100 md:w-[250px]"
+              placeholder="Search"
+              onChange={(e) => {
+                console.log(e.target.value);
+              }}
+            />
+          </div>
 
           <DropdownMenu>
             <DropdownMenuTrigger asChild>

From 2044f0daa0e27a706201a03dbf103127eaae30c0 Mon Sep 17 00:00:00 2001
From: CeeJayyy007 <63643138+CeeJayyy007@users.noreply.github.com>
Date: Fri, 8 Aug 2025 00:15:32 -0400
Subject: [PATCH 09/15] chore: update resources page and components to be
 responsive

---
 .../src/app/resources/[[...slug]]/page.tsx    |  6 ++---
 .../resources/components/edit-news-form.tsx   | 16 +++++++-----
 .../resources/components/forms/base-form.tsx  |  2 +-
 .../components/forms/opportunity-form.tsx     |  9 +++----
 .../resources/components/news-form.tsx        | 21 ++++++++-------
 .../resources/components/news-list.tsx        | 26 +++++++++----------
 .../custom-switch/custom-switch.tsx           |  2 +-
 .../shared/components/layout/main-layout.tsx  |  3 ++-
 .../navigation/main-nav/main-nav.tsx          |  2 +-
 .../navigation/side-nav/sidebar.tsx           |  2 +-
 10 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/packages/frontend/src/app/resources/[[...slug]]/page.tsx b/packages/frontend/src/app/resources/[[...slug]]/page.tsx
index 4978f61..6992a0b 100644
--- a/packages/frontend/src/app/resources/[[...slug]]/page.tsx
+++ b/packages/frontend/src/app/resources/[[...slug]]/page.tsx
@@ -20,7 +20,7 @@ export default async function NewsPage({ params }: NewsPageProps) {
       // Handle /news - Show all news
       return (
         <Suspense fallback={<NewsLoadingSkeleton />}>
-          <div className="flex w-full justify-center">
+          <div className="flex w-full justify-center px-4 md:px-0">
             <NewsList />
           </div>
         </Suspense>
@@ -30,7 +30,7 @@ export default async function NewsPage({ params }: NewsPageProps) {
       // Handle /news/create
       return (
         <Suspense fallback={<NewsFormSkeleton />}>
-          <div className="flex w-full justify-center">
+          <div className="flex w-full justify-center px-4 md:px-0">
             <NewsFormWrapper />
           </div>
         </Suspense>
@@ -41,7 +41,7 @@ export default async function NewsPage({ params }: NewsPageProps) {
       if (!id) return notFound();
       return (
         <Suspense fallback={<NewsFormSkeleton />}>
-          <div className="flex w-full justify-center">
+          <div className="flex w-full justify-center px-4 md:px-0">
             <EditNewsFormWrapper id={id} />
           </div>
         </Suspense>
diff --git a/packages/frontend/src/features/resources/components/edit-news-form.tsx b/packages/frontend/src/features/resources/components/edit-news-form.tsx
index 4290adb..e40eedd 100644
--- a/packages/frontend/src/features/resources/components/edit-news-form.tsx
+++ b/packages/frontend/src/features/resources/components/edit-news-form.tsx
@@ -402,8 +402,8 @@ const EditNewsForm = ({ id }: { id: string }) => {
 
   if (isLoading) {
     return (
-      <Card className="flex h-full w-[840px] flex-col rounded-[24px]">
-        <CardContent className="flex items-center justify-center p-8">
+      <Card className="flex h-full w-full max-w-3xl flex-col rounded-[24px]">
+        <CardContent className="flex items-center justify-center p-6 sm:p-8">
           Loading {titles[mode]} form...
         </CardContent>
       </Card>
@@ -411,10 +411,10 @@ const EditNewsForm = ({ id }: { id: string }) => {
   }
 
   return (
-    <Card className="flex h-full w-[840px] flex-col rounded-[24px]">
+    <Card className="flex h-full w-full max-w-3xl flex-col rounded-[24px]">
       <AlertDialogUI />
-      <CardHeader className="justify-center p-8">
-        <CardTitle className="flex flex-col space-y-6 text-center">
+      <CardHeader className="justify-center p-6 sm:p-8">
+        <CardTitle className="flex flex-col space-y-4 text-center sm:space-y-6">
           <div className="relative flex items-center justify-center gap-2">
             <IconButton
               leftIcon="arrowLeft"
@@ -422,11 +422,13 @@ const EditNewsForm = ({ id }: { id: string }) => {
               className="absolute left-0 h-10 w-10"
               onClick={() => router.back()}
             />
-            <h2 className="font-semibold">{titles[mode]}</h2>
+            <h2 className="break-words text-xl font-semibold leading-tight sm:text-2xl md:text-3xl">
+              {titles[mode]}
+            </h2>
           </div>
         </CardTitle>
       </CardHeader>
-      <CardContent className="flex flex-col justify-center gap-4">
+      <CardContent className="flex flex-col justify-center gap-4 p-4 sm:p-6">
         <FormProvider {...methods}>
           <form onSubmit={methods.handleSubmit(onSubmit)} className="space-y-6">
             {formComponents[mode]}
diff --git a/packages/frontend/src/features/resources/components/forms/base-form.tsx b/packages/frontend/src/features/resources/components/forms/base-form.tsx
index 4c443c7..9c55d62 100644
--- a/packages/frontend/src/features/resources/components/forms/base-form.tsx
+++ b/packages/frontend/src/features/resources/components/forms/base-form.tsx
@@ -96,7 +96,7 @@ export const BaseForm = ({
         required
       />
 
-      <div className="flex w-full gap-4">
+      <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
         <FormRadio
           name="type"
           label="News Type"
diff --git a/packages/frontend/src/features/resources/components/forms/opportunity-form.tsx b/packages/frontend/src/features/resources/components/forms/opportunity-form.tsx
index 15c186f..d0e0eb1 100644
--- a/packages/frontend/src/features/resources/components/forms/opportunity-form.tsx
+++ b/packages/frontend/src/features/resources/components/forms/opportunity-form.tsx
@@ -45,7 +45,6 @@ export const OpportunityForm = ({
     formState: { errors }
   } = useFormContext<OpportunityFormValues>();
 
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [removeCompanyLogo, setRemoveCompanyLogo] = useState(false);
 
   // Ensure salary range options are properly formatted
@@ -58,12 +57,10 @@ export const OpportunityForm = ({
   const handleCompanyLogoUpload = async (files: File[]) => {
     try {
       if (files && files.length > 0) {
-        setSelectedFile(files[0]);
         await onFileUpload(files);
         setRemoveCompanyLogo(false); // Reset removal flag when new file is uploaded
         toast.success('Company logo uploaded successfully');
       } else {
-        setSelectedFile(null);
         toast.error('No file selected');
       }
     } catch (error) {
@@ -122,8 +119,8 @@ export const OpportunityForm = ({
         existingFiles={displayFiles}
         onRemove={handleFileRemove}
       />
-      <Label className="mt-2">Location</Label>
-      <div className="flex w-full gap-4">
+      <Label className="mt-2 text-sm sm:text-base">Location</Label>
+      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
         <FormInput
           name="province"
           label="Province"
@@ -146,7 +143,7 @@ export const OpportunityForm = ({
         placeholder="Select salary range"
         options={formattedSalaryRanges}
       />
-      <div className="flex w-full gap-4">
+      <div className="flex w-full flex-wrap gap-3 sm:gap-4">
         <CustomSwitch
           name="settings"
           label="Work Mode"
diff --git a/packages/frontend/src/features/resources/components/news-form.tsx b/packages/frontend/src/features/resources/components/news-form.tsx
index 57b981a..ea8c42a 100644
--- a/packages/frontend/src/features/resources/components/news-form.tsx
+++ b/packages/frontend/src/features/resources/components/news-form.tsx
@@ -29,7 +29,6 @@ import { useOpportunityStore } from '../store';
 import { useResourcesStore } from '../store';
 import { useEffect, useState } from 'react';
 import { CreateNewsDto } from '../dto/news-dto';
-import { CreateResourceDto } from '../dto/resource-dto';
 import { CreateOpportunityDto } from '../dto/opportunity-dto';
 import { WorkSettings } from '../lib/constants/enums';
 import { AlertDialogUI } from '@/shared/components/notification/alert-dialog';
@@ -299,8 +298,8 @@ const NewsForm = () => {
 
   if (isLoading) {
     return (
-      <Card className="flex h-full w-[840px] flex-col rounded-[24px]">
-        <CardContent className="flex items-center justify-center p-8">
+      <Card className="flex h-full w-full max-w-3xl flex-col rounded-[24px]">
+        <CardContent className="flex items-center justify-center p-6 sm:p-8">
           Loading {titles[mode].create} form...
         </CardContent>
       </Card>
@@ -308,10 +307,10 @@ const NewsForm = () => {
   }
 
   return (
-    <Card className="flex h-full w-[840px] flex-col rounded-[24px]">
+    <Card className="flex h-full w-full max-w-3xl flex-col rounded-[24px]">
       <AlertDialogUI />
-      <CardHeader className="justify-center p-8">
-        <CardTitle className="flex flex-col space-y-6 text-center">
+      <CardHeader className="justify-center p-6 sm:p-8">
+        <CardTitle className="flex flex-col space-y-4 text-center sm:space-y-6">
           <div className="relative flex items-center justify-center gap-2">
             <IconButton
               leftIcon="arrowLeft"
@@ -319,12 +318,16 @@ const NewsForm = () => {
               className="absolute left-0 h-10 w-10"
               onClick={() => router.back()}
             />
-            <h2 className="font-semibold">Create {titles[mode].create}</h2>
+            <h2 className="break-words text-2xl font-semibold leading-tight sm:text-3xl md:text-3xl">
+              Create {titles[mode].create}
+            </h2>
           </div>
-          <h4>{titles[mode].info}</h4>
+          <h4 className="text-base leading-snug text-muted-foreground sm:text-lg md:text-lg">
+            {titles[mode].info}
+          </h4>
         </CardTitle>
       </CardHeader>
-      <CardContent className="flex flex-col justify-center gap-4">
+      <CardContent className="flex flex-col justify-center gap-4 p-4 sm:p-6">
         <FormProvider {...methods}>
           <form onSubmit={methods.handleSubmit(onSubmit)} className="space-y-6">
             {formComponents[mode]}
diff --git a/packages/frontend/src/features/resources/components/news-list.tsx b/packages/frontend/src/features/resources/components/news-list.tsx
index ea5cd57..210cd29 100644
--- a/packages/frontend/src/features/resources/components/news-list.tsx
+++ b/packages/frontend/src/features/resources/components/news-list.tsx
@@ -199,7 +199,7 @@ export const NewsList = () => {
   );
 
   const renderLoadingState = () => (
-    <div className="grid grid-cols-2 gap-6">
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
       {Array.from({ length: 4 }).map((_, index) => (
         <div
           key={index}
@@ -210,11 +210,11 @@ export const NewsList = () => {
   );
 
   return (
-    <div className="container-wide w-full space-y-6">
+    <div className="container-wide w-full space-y-6 px-4 md:px-0">
       <div className="flex items-center justify-between">
         <Tabs value={activeTab} defaultValue="news" className="w-full">
-          <div className="mb-6 flex items-center justify-between">
-            <TabsList className="h-12 w-fit">
+          <div className="mb-6 flex flex-col items-start justify-between gap-3 md:flex-row md:items-center">
+            <TabsList className="h-12 w-full max-w-full md:w-fit">
               <TabsTrigger
                 value="news"
                 className={`h-10`}
@@ -255,7 +255,7 @@ export const NewsList = () => {
           {/* News Tab Content */}
           <TabsContent value="news">
             {activeTab === 'news' && (
-              <div className="flex w-full gap-8">
+              <div className="flex w-full flex-col gap-6">
                 <div className="flex w-full flex-col gap-6">
                   <div className="relative w-full">
                     {isNewsLoading ? (
@@ -285,7 +285,7 @@ export const NewsList = () => {
                     defaultValue="recent"
                     className="w-full rounded-3xl bg-white p-6"
                   >
-                    <div className="flex justify-between">
+                    <div className="flex flex-col items-start justify-between gap-3 md:flex-row md:items-center">
                       <h3 className="font-semibold">
                         {newsSubTab === 'recent'
                           ? 'Recent News'
@@ -293,7 +293,7 @@ export const NewsList = () => {
                             ? "Editor's Pick"
                             : 'Most Read'}
                       </h3>
-                      <TabsList className="mb-6">
+                      <TabsList className="mb-6 flex w-full max-w-full gap-2 md:w-auto md:gap-0">
                         {/* Recent News */}
                         <TabsTrigger
                           value="recent"
@@ -324,7 +324,7 @@ export const NewsList = () => {
                         renderNewsEmptyState()
                       ) : (
                         <>
-                          <div className="grid grid-cols-2 gap-6">
+                          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                             {paginatedRecentNews.map((item) => (
                               <NewsCard key={item.id} {...item} />
                             ))}
@@ -351,7 +351,7 @@ export const NewsList = () => {
                         renderNewsEmptyState()
                       ) : (
                         <>
-                          <div className="grid grid-cols-2 gap-6">
+                          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                             {paginatedEditorsPickNews.map((item) => (
                               <NewsCard key={item.id} {...item} />
                             ))}
@@ -375,11 +375,11 @@ export const NewsList = () => {
           {/* Content Library Tab Content */}
           <TabsContent value="contentLibrary">
             {activeTab === 'contentLibrary' && (
-              <div className="flex w-full flex-col gap-6 rounded-2xl bg-white p-6">
-                <div className="flex items-center justify-between">
+              <div className="flex w-full flex-col gap-6 rounded-2xl bg-white p-4 sm:p-6">
+                <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
                   <h2>Templates and Files</h2>
                   {resourceItems.length > 0 && (
-                    <div className="flex w-fit">
+                    <div className="flex w-full md:w-fit">
                       <Select
                         value={selectedResourceType}
                         onValueChange={setSelectedResourceType}
@@ -405,7 +405,7 @@ export const NewsList = () => {
                   renderResourcesEmptyState()
                 ) : (
                   <>
-                    <div className="grid grid-cols-2 gap-6">
+                    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                       {paginatedResources.map((item) => (
                         <ResourceCard
                           key={item.id}
diff --git a/packages/frontend/src/shared/components/custom-switch/custom-switch.tsx b/packages/frontend/src/shared/components/custom-switch/custom-switch.tsx
index 0292c4e..988589e 100644
--- a/packages/frontend/src/shared/components/custom-switch/custom-switch.tsx
+++ b/packages/frontend/src/shared/components/custom-switch/custom-switch.tsx
@@ -69,7 +69,7 @@ export function CustomSwitch<T>({
             key={index}
             onClick={() => onChange?.(option.value)}
             className={cn(
-              'z-10 min-w-[120px] flex-1 px-2 text-center text-sm font-medium transition-colors duration-200',
+              'z-10 min-w-0 flex-1 px-2 text-center text-xs font-medium transition-colors duration-200 sm:text-sm',
               activeIndex === index
                 ? 'text-primary-foreground'
                 : 'text-muted-foreground'
diff --git a/packages/frontend/src/shared/components/layout/main-layout.tsx b/packages/frontend/src/shared/components/layout/main-layout.tsx
index 30e0305..5bc408b 100644
--- a/packages/frontend/src/shared/components/layout/main-layout.tsx
+++ b/packages/frontend/src/shared/components/layout/main-layout.tsx
@@ -28,7 +28,8 @@ const MainLayout = ({ children }: MainLayoutProps) => {
       <main
         className={`flex flex-1 flex-col ${isSidebarOpen ? 'md:ml-[260px]' : 'md:ml-[92px]'}`}
       >
-        <div className="sticky top-0 z-30 flex h-full items-center justify-between border-b bg-background px-4 md:px-6">
+        {/* Keep a fixed 56px top bar to avoid stretching when content is short */}
+        <div className="sticky top-0 z-30 flex min-h-16 items-center justify-between border-b bg-background px-4 md:px-6">
           <button
             aria-label="Open menu"
             onClick={open}
diff --git a/packages/frontend/src/shared/components/navigation/main-nav/main-nav.tsx b/packages/frontend/src/shared/components/navigation/main-nav/main-nav.tsx
index 0cb594f..9497ff2 100644
--- a/packages/frontend/src/shared/components/navigation/main-nav/main-nav.tsx
+++ b/packages/frontend/src/shared/components/navigation/main-nav/main-nav.tsx
@@ -35,7 +35,7 @@ export const MainNav = () => {
   };
 
   return (
-    <div className="sticky top-0 z-30 w-full bg-white py-4">
+    <div className="sticky top-0 z-30 w-full bg-white">
       <div className="flex h-full items-center justify-between px-4 md:px-8">
         <BreadcrumbNav />
         <div className="flex items-center gap-2">
diff --git a/packages/frontend/src/shared/components/navigation/side-nav/sidebar.tsx b/packages/frontend/src/shared/components/navigation/side-nav/sidebar.tsx
index faae742..9004311 100644
--- a/packages/frontend/src/shared/components/navigation/side-nav/sidebar.tsx
+++ b/packages/frontend/src/shared/components/navigation/side-nav/sidebar.tsx
@@ -68,7 +68,7 @@ export const Sidebar = ({
   return (
     <div
       className={cn(
-        'fixed left-0 top-0 z-50 flex h-screen flex-col overflow-visible bg-primary p-6 transition-all duration-300',
+        'fixed left-0 top-0 z-50 flex h-screen flex-col overflow-visible bg-primary p-6 pt-4 transition-all duration-300',
         isOpen ? 'w-[260px]' : 'w-[92px]'
       )}
     >

From 384a2d0f9e61180084690c26798240ce8095d7e4 Mon Sep 17 00:00:00 2001
From: CeeJayyy007 <63643138+CeeJayyy007@users.noreply.github.com>
Date: Fri, 8 Aug 2025 01:13:04 -0400
Subject: [PATCH 10/15] chore: fix responsiveness for the event page and
 supporting components

---
 .../src/app/events/[[...slug]]/page.tsx       | 10 ++--
 .../events/components/common/base-form.tsx    |  4 +-
 .../events/components/common/event-card.tsx   | 22 ++++----
 .../components/common/time-location-form.tsx  |  4 +-
 .../features/events/components/event-form.tsx | 28 ++++++-----
 .../features/events/components/event-list.tsx | 50 +++++++++++++------
 .../src/shared/components/ui/progress.tsx     |  2 +-
 .../shared/components/upload/file-upload.tsx  | 18 ++++---
 8 files changed, 80 insertions(+), 58 deletions(-)

diff --git a/packages/frontend/src/app/events/[[...slug]]/page.tsx b/packages/frontend/src/app/events/[[...slug]]/page.tsx
index 945463a..cfe4e56 100644
--- a/packages/frontend/src/app/events/[[...slug]]/page.tsx
+++ b/packages/frontend/src/app/events/[[...slug]]/page.tsx
@@ -20,7 +20,7 @@ export default async function EventPage({ params }: EventPageProps) {
       // Handle /events - Show all events
       return (
         <Suspense fallback={<EventsLoadingSkeleton />}>
-          <div className="flex w-full justify-center">
+          <div className="flex w-full justify-center px-4 md:px-0">
             <EventList />
           </div>
         </Suspense>
@@ -30,7 +30,7 @@ export default async function EventPage({ params }: EventPageProps) {
       // Handle /events/create
       return (
         <Suspense fallback={<EventFormSkeleton />}>
-          <div className="flex w-full justify-center">
+          <div className="flex w-full justify-center px-4 md:px-0">
             <EventFormWrapper />
           </div>
         </Suspense>
@@ -41,7 +41,7 @@ export default async function EventPage({ params }: EventPageProps) {
       if (!id) return notFound();
       return (
         <Suspense fallback={<EventFormSkeleton />}>
-          <div className="flex w-full justify-center">
+          <div className="flex w-full justify-center px-4 md:px-0">
             <EventFormWrapper />
           </div>
         </Suspense>
@@ -53,7 +53,7 @@ export default async function EventPage({ params }: EventPageProps) {
         // Handle /events/:id/subscribers
         return (
           <Suspense fallback={<EventDetailsSkeleton />}>
-            <div className="flex w-full justify-center">
+            <div className="flex w-full justify-center px-4 md:px-0">
               <EventSubscribers eventId={action} />
             </div>
           </Suspense>
@@ -64,7 +64,7 @@ export default async function EventPage({ params }: EventPageProps) {
       if (action && !id) {
         return (
           <Suspense fallback={<EventDetailsSkeleton />}>
-            <div className="flex w-full justify-center">
+            <div className="flex w-full justify-center px-4 md:px-0">
               <EventDetails />
             </div>
           </Suspense>
diff --git a/packages/frontend/src/features/events/components/common/base-form.tsx b/packages/frontend/src/features/events/components/common/base-form.tsx
index c652526..67628cf 100644
--- a/packages/frontend/src/features/events/components/common/base-form.tsx
+++ b/packages/frontend/src/features/events/components/common/base-form.tsx
@@ -161,7 +161,7 @@ export const BaseForm = ({
         required
       />
 
-      <div className="flex w-full gap-4">
+      <div className="flex w-full flex-wrap gap-3 sm:gap-4">
         <CustomSwitch
           name="is_free"
           label="Free or Paid Event"
@@ -174,7 +174,7 @@ export const BaseForm = ({
         />
       </div>
 
-      <div className="flex w-full gap-4">
+      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
         <FormInput
           name="link"
           label="Registration Link"
diff --git a/packages/frontend/src/features/events/components/common/event-card.tsx b/packages/frontend/src/features/events/components/common/event-card.tsx
index bb88ca7..7e0dc8f 100644
--- a/packages/frontend/src/features/events/components/common/event-card.tsx
+++ b/packages/frontend/src/features/events/components/common/event-card.tsx
@@ -104,12 +104,12 @@ export const EventCard = ({
   };
 
   return (
-    <Card className="overflow-hidden rounded-2xl border border-neutral-light-300 bg-white shadow-lg transition-shadow duration-300 hover:shadow-xl">
+    <Card className="overflow-hidden rounded-2xl border border-neutral-light-300 bg-white shadow-lg transition-shadow duration-300 hover:shadow-xl md:mx-0">
       <AlertDialogUI />
       <div className="flex h-full flex-col md:flex-row">
         {/* Image Section */}
-        <div className="flex w-full items-center justify-center p-4 md:w-2/5 md:p-6">
-          <div className="group aspect-[16/9] w-full overflow-hidden rounded-xl border border-neutral-light-400 bg-neutral-light-100">
+        <div className="flex w-full items-center justify-center p-3 sm:p-4 md:w-2/5 md:p-6">
+          <div className="group aspect-[16/9] w-full max-w-md overflow-hidden rounded-xl border border-neutral-light-400 bg-neutral-light-100 sm:max-w-none">
             <ImagePreview
               imagePath={image}
               fallbackImage={'/event/placeholder.jpg'}
@@ -123,11 +123,11 @@ export const EventCard = ({
         </div>
 
         {/* Content Section */}
-        <div className="flex flex-1 flex-col justify-between gap-4 p-4 md:p-6">
+        <div className="flex flex-1 flex-col justify-between gap-3 p-4 md:gap-4 md:p-6">
           <div className="flex flex-col gap-2">
             {/* Title and Icon */}
             <div className="flex items-center justify-between gap-2">
-              <h2 className="line-clamp-1 text-heading-h4 font-semibold text-neutral-dark-700">
+              <h2 className="line-clamp-1 text-lg font-semibold text-neutral-dark-700 sm:text-xl md:text-2xl">
                 {title}
               </h2>
               <span className="flex items-center rounded-full bg-primary-300 p-2">
@@ -142,11 +142,11 @@ export const EventCard = ({
               </span>
             </div>
             {/* Description */}
-            <p className="line-clamp-3 text-paragraph-base text-neutral-dark-300">
+            <p className="line-clamp-3 text-sm text-neutral-dark-300 sm:text-base">
               {description}
             </p>
             {/* Info Row */}
-            <div className="mt-2 flex flex-wrap gap-4 text-primary-700">
+            <div className="mt-2 flex flex-wrap gap-3 text-primary-700 sm:gap-4">
               <EventInfo
                 icon={<Calendar className="h-4 w-4" />}
                 text={
@@ -164,18 +164,18 @@ export const EventCard = ({
             </div>
           </div>
           {/* Buttons Row */}
-          <div className="mt-4 flex w-full gap-3">
+          <div className="mt-3 flex w-full flex-col gap-3 sm:flex-row">
             <IconButton
               label="Learn More"
               rightIcon="arrowRight"
-              className="flex-1 transition-transform duration-200 hover:scale-105"
+              className="w-full flex-1 transition-transform duration-200 hover:scale-105"
               onClick={handleLearnMore}
             />
             {canEdit && (
               <IconButton
                 label="Edit Details"
                 rightIcon="pencil"
-                className="flex-1 transition-transform duration-200 hover:scale-105"
+                className="w-full flex-1 transition-transform duration-200 hover:scale-105"
                 onClick={handleEdit}
               />
             )}
@@ -184,7 +184,7 @@ export const EventCard = ({
                 label="Delete Event"
                 rightIcon="delete"
                 variant="outline"
-                className="flex-1 transition-transform duration-200 hover:scale-105 hover:border-destructive hover:bg-destructive hover:text-white"
+                className="w-full flex-1 transition-transform duration-200 hover:scale-105 hover:border-destructive hover:bg-destructive hover:text-white"
                 onClick={() => setIsDeleteModalOpen(true)}
               />
             )}
diff --git a/packages/frontend/src/features/events/components/common/time-location-form.tsx b/packages/frontend/src/features/events/components/common/time-location-form.tsx
index a6e3166..f026058 100644
--- a/packages/frontend/src/features/events/components/common/time-location-form.tsx
+++ b/packages/frontend/src/features/events/components/common/time-location-form.tsx
@@ -151,7 +151,7 @@ export const TimeLocationForm = ({
           required
         />
       </div>
-      <div className="flex w-full gap-4">
+      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
         <FormSelect
           name="start_time"
           label="Event Start Time"
@@ -192,7 +192,7 @@ export const TimeLocationForm = ({
         />
       </div>
 
-      <div className="flex w-full justify-start gap-4 pt-4">
+      <div className="flex w-full justify-start gap-3 pt-4 sm:gap-4">
         <CustomSwitch
           name="type"
           label="Event Type"
diff --git a/packages/frontend/src/features/events/components/event-form.tsx b/packages/frontend/src/features/events/components/event-form.tsx
index 66c2da3..c819607 100644
--- a/packages/frontend/src/features/events/components/event-form.tsx
+++ b/packages/frontend/src/features/events/components/event-form.tsx
@@ -312,9 +312,9 @@ const EventForm = () => {
   // Show loading state while fetching event data
   if (isLoadingEvent) {
     return (
-      <Card className="flex w-[840px] flex-col rounded-[24px]">
-        <CardHeader className="justify-center p-8">
-          <CardTitle className="flex flex-col space-y-6 text-center">
+      <Card className="mx-auto flex w-full max-w-3xl flex-col rounded-[24px]">
+        <CardHeader className="justify-center p-6 sm:p-8">
+          <CardTitle className="flex flex-col space-y-4 text-center sm:space-y-6">
             <div className="relative flex items-center justify-center gap-2">
               <IconButton
                 leftIcon="arrowLeft"
@@ -322,12 +322,14 @@ const EventForm = () => {
                 className="absolute left-0 h-10 w-10"
                 onClick={() => router.back()}
               />
-              <h2 className="font-semibold">Loading Event...</h2>
+              <h2 className="break-words text-xl font-semibold leading-tight sm:text-2xl md:text-3xl">
+                Loading Event...
+              </h2>
             </div>
           </CardTitle>
         </CardHeader>
-        <CardContent className="flex flex-col justify-center gap-4">
-          <div className="flex items-center justify-center p-8">
+        <CardContent className="flex flex-col justify-center gap-4 p-4 sm:p-6">
+          <div className="flex items-center justify-center p-6 sm:p-8">
             <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-primary-500"></div>
           </div>
         </CardContent>
@@ -336,10 +338,10 @@ const EventForm = () => {
   }
 
   return (
-    <Card className="flex w-[840px] flex-col rounded-[24px]">
+    <Card className="mx-auto flex w-full max-w-3xl flex-col rounded-[24px]">
       <AlertDialogUI />
-      <CardHeader className="justify-center p-8">
-        <CardTitle className="flex flex-col space-y-6 text-center">
+      <CardHeader className="justify-center p-6 sm:p-8">
+        <CardTitle className="flex flex-col space-y-4 text-center sm:space-y-6">
           <div className="relative flex items-center justify-center gap-2">
             <IconButton
               leftIcon="arrowLeft"
@@ -347,16 +349,16 @@ const EventForm = () => {
               className="absolute left-0 h-10 w-10"
               onClick={() => router.back()}
             />
-            <h2 className="font-semibold">
+            <h2 className="break-words text-xl font-semibold leading-tight sm:text-2xl md:text-3xl">
               {isEdit ? 'Edit Event' : 'Create New Event'}
             </h2>
           </div>
-          <h4>
+          <h4 className="text-sm leading-snug text-muted-foreground sm:text-base md:text-lg">
             {activeStep === 1 ? 'Event Information' : 'Event Time & Location'}
           </h4>
         </CardTitle>
       </CardHeader>
-      <CardContent className="flex flex-col justify-center gap-4">
+      <CardContent className="flex flex-col justify-center gap-4 p-4 sm:p-6">
         <FormProvider {...methods}>
           <form
             onSubmit={
@@ -372,7 +374,7 @@ const EventForm = () => {
             ) : (
               <TimeLocationForm existingEventData={eventForEdit} />
             )}
-            <div className="flex w-full gap-4 pt-5">
+            <div className="flex w-full flex-col gap-3 pt-5 sm:flex-row sm:gap-4">
               {activeStep === 2 && (
                 <IconButton
                   className="w-full"
diff --git a/packages/frontend/src/features/events/components/event-list.tsx b/packages/frontend/src/features/events/components/event-list.tsx
index 596e01b..b775c42 100644
--- a/packages/frontend/src/features/events/components/event-list.tsx
+++ b/packages/frontend/src/features/events/components/event-list.tsx
@@ -164,9 +164,16 @@ export const EventList = () => {
 
     return (
       <>
-        {eventsList.map((event) => (
-          <EventCard key={event.id} {...event} />
-        ))}
+        <div className="flex w-full flex-col gap-4">
+          {eventsList.map((event) => (
+            <div
+              key={event.id}
+              className="mx-auto w-full max-w-md sm:max-w-lg md:max-w-none"
+            >
+              <EventCard {...event} />
+            </div>
+          ))}
+        </div>
         {totalEvents.length > eventsPerPage && (
           <div className="mt-6">
             <PaginationComponent
@@ -181,23 +188,34 @@ export const EventList = () => {
   };
 
   return (
-    <Tabs defaultValue="all" className="container h-full w-full">
-      <div className="mb-6 flex items-center justify-between">
-        <div className="flex items-center justify-start gap-4">
+    <Tabs defaultValue="all" className="container h-full w-full px-4 md:px-0">
+      <div className="mb-6 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="flex items-center justify-start gap-3 md:gap-4">
           <span className="text-sm text-neutral-dark-300">Sort Events By:</span>
-          <TabsList>
-            <TabsTrigger value="all">All Events</TabsTrigger>
-            <TabsTrigger value="upcoming">Upcoming Events</TabsTrigger>
-            <TabsTrigger value="my-events">My Events</TabsTrigger>
+          <TabsList className="max-w-full">
+            <TabsTrigger value="all">
+              <span className="sm:hidden">All</span>
+              <span className="hidden sm:inline">All Events</span>
+            </TabsTrigger>
+            <TabsTrigger value="upcoming">
+              <span className="sm:hidden">Upcoming</span>
+              <span className="hidden sm:inline">Upcoming Events</span>
+            </TabsTrigger>
+            <TabsTrigger value="my-events">
+              <span className="sm:hidden">My Events</span>
+              <span className="hidden sm:inline">My Events</span>
+            </TabsTrigger>
           </TabsList>
         </div>
         {canCreateEvent && (
-          <IconButton
-            leftIcon="plusCircle"
-            label="Create New Event"
-            className="w-[236px] bg-secondary-500"
-            onClick={() => router.push('/events/create')}
-          />
+          <div className="w-full md:w-auto">
+            <IconButton
+              leftIcon="plusCircle"
+              label="Create New Event"
+              className="w-full bg-secondary-500 md:w-[236px]"
+              onClick={() => router.push('/events/create')}
+            />
+          </div>
         )}
       </div>
 
diff --git a/packages/frontend/src/shared/components/ui/progress.tsx b/packages/frontend/src/shared/components/ui/progress.tsx
index eba7f38..d11f483 100644
--- a/packages/frontend/src/shared/components/ui/progress.tsx
+++ b/packages/frontend/src/shared/components/ui/progress.tsx
@@ -12,7 +12,7 @@ const Progress = React.forwardRef<
   <ProgressPrimitive.Root
     ref={ref}
     className={cn(
-      'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',
+      'relative h-2 w-full max-w-full overflow-hidden rounded-full bg-primary/20',
       className
     )}
     {...props}
diff --git a/packages/frontend/src/shared/components/upload/file-upload.tsx b/packages/frontend/src/shared/components/upload/file-upload.tsx
index 49d5b55..f6584d4 100644
--- a/packages/frontend/src/shared/components/upload/file-upload.tsx
+++ b/packages/frontend/src/shared/components/upload/file-upload.tsx
@@ -253,7 +253,7 @@ export const FileUpload = ({
                   </div>
                 </>
               ) : (
-                <div className="w-full space-y-4">
+                <div className="w-full space-y-4 overflow-hidden">
                   {allFiles.map((file) => (
                     <div
                       key={file.name}
@@ -276,8 +276,8 @@ export const FileUpload = ({
                       )}
 
                       <div className="flex w-full flex-col gap-2">
-                        <div className="flex w-full items-center justify-between">
-                          <p className="flex-1 truncate text-sm font-medium">
+                        <div className="flex w-full min-w-0 items-center justify-between gap-2">
+                          <p className="min-w-0 max-w-40 flex-1 truncate text-sm font-medium sm:max-w-full">
                             {file.name}
                             {file.isExisting && (
                               <span className="ml-2 text-xs text-neutral-500">
@@ -311,7 +311,7 @@ export const FileUpload = ({
                         </div>
 
                         {uploadStatus[file.name] && (
-                          <div className="flex w-full flex-col gap-1">
+                          <div className="flex w-full flex-col gap-1 overflow-hidden">
                             <Progress
                               value={uploadStatus[file.name].progress}
                               className={cn(
@@ -324,14 +324,14 @@ export const FileUpload = ({
                             />
                             {!uploadStatus[file.name].error &&
                               !uploadStatus[file.name].success && (
-                                <p className="text-base">
+                                <p className="w-full truncate text-ellipsis text-sm">
                                   {(file.size / (1024 * 1024)).toFixed(2)} MB
                                 </p>
                               )}
 
                             {uploadStatus[file.name].error && (
-                              <div className="flex items-center gap-2">
-                                <p className="text-base text-red-500">
+                              <div className="flex items-center gap-2 overflow-hidden">
+                                <p className="w-full truncate text-ellipsis text-sm text-red-500">
                                   {uploadStatus[file.name].error}
                                 </p>
                                 <Button
@@ -348,7 +348,9 @@ export const FileUpload = ({
                               </div>
                             )}
                             {uploadStatus[file.name].success && (
-                              <p className="mt-2 text-sm">Upload Successful!</p>
+                              <p className="mt-2 truncate text-sm">
+                                Upload Successful!
+                              </p>
                             )}
                           </div>
                         )}

From 64441910a55330e8f7ebce705ea89539ea5019e6 Mon Sep 17 00:00:00 2001
From: CeeJayyy007 <63643138+CeeJayyy007@users.noreply.github.com>
Date: Fri, 8 Aug 2025 01:28:24 -0400
Subject: [PATCH 11/15] chore: update responsiveness for profile page

---
 .../user-profile/components/edit-profile.tsx  | 28 +++++++++--------
 .../multi-step-form/personal-info-form.tsx    |  8 ++---
 .../multi-step-form/social-links-form.tsx     |  2 +-
 .../multi-step-form/upload-resume.tsx         |  4 +--
 .../user-profile/components/view-profile.tsx  | 30 ++++++++++---------
 .../src/shared/components/stepper/stepper.tsx | 11 +++++--
 6 files changed, 46 insertions(+), 37 deletions(-)

diff --git a/packages/frontend/src/features/user-profile/components/edit-profile.tsx b/packages/frontend/src/features/user-profile/components/edit-profile.tsx
index cc57201..aa874c2 100644
--- a/packages/frontend/src/features/user-profile/components/edit-profile.tsx
+++ b/packages/frontend/src/features/user-profile/components/edit-profile.tsx
@@ -288,8 +288,8 @@ export const EditProfile = () => {
 
   if (isLoading) {
     return (
-      <Card className="flex w-[840px] flex-col rounded-[24px]">
-        <CardContent className="flex items-center justify-center p-8">
+      <Card className="mx-auto flex w-full max-w-3xl flex-col rounded-[24px]">
+        <CardContent className="flex items-center justify-center p-6 sm:p-8">
           Loading profile...
         </CardContent>
       </Card>
@@ -298,8 +298,8 @@ export const EditProfile = () => {
 
   if (error) {
     return (
-      <Card className="flex w-[840px] flex-col rounded-[24px]">
-        <CardContent className="flex items-center justify-center p-8">
+      <Card className="mx-auto flex w-full max-w-3xl flex-col rounded-[24px]">
+        <CardContent className="flex items-center justify-center p-6 sm:p-8">
           Error loading profile: {error.message}
         </CardContent>
       </Card>
@@ -307,10 +307,10 @@ export const EditProfile = () => {
   }
 
   return (
-    <Card className="flex w-[840px] flex-col rounded-[24px]">
+    <Card className="mx-auto flex w-full max-w-3xl flex-col rounded-[24px]">
       <AlertDialogUI />
-      <CardHeader className="justify-center p-8">
-        <CardTitle className="flex flex-col space-y-6 text-center">
+      <CardHeader className="justify-center p-6 sm:p-8">
+        <CardTitle className="flex flex-col space-y-4 text-center sm:space-y-6">
           <div className="relative flex items-center justify-center gap-2">
             <IconButton
               leftIcon="arrowLeft"
@@ -318,9 +318,11 @@ export const EditProfile = () => {
               className="absolute left-0 h-10 w-10"
               onClick={() => router.back()}
             />
-            <h2 className="font-semibold">Update Profile</h2>
+            <h2 className="break-words text-xl font-semibold leading-tight sm:text-2xl md:text-3xl">
+              Update Profile
+            </h2>
           </div>
-          <h4 className="font-normal text-neutral-dark-600">
+          <h4 className="text-sm font-normal text-neutral-dark-600 sm:text-base">
             {activeStep === 1 && 'Personal Information'}
             {activeStep === 2 && 'Social Links'}
             {activeStep === 3 && 'Professional Information'}
@@ -329,7 +331,7 @@ export const EditProfile = () => {
           <Stepper activeStep={activeStep} totalSteps={4} />
         </CardTitle>
       </CardHeader>
-      <CardContent className="flex flex-col justify-center gap-4">
+      <CardContent className="flex flex-col justify-center gap-4 p-4 sm:p-6">
         <FormProvider {...methods}>
           <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
             {getStepContent(
@@ -340,9 +342,9 @@ export const EditProfile = () => {
               user?.pictureUploadLink,
               user?.resumeUploadLink
             )}
-            <div className="flex w-full justify-between pt-5">
+            <div className="flex w-full flex-col gap-3 pt-5 sm:flex-row sm:justify-between">
               <IconButton
-                className="w-[180px]"
+                className="w-full sm:w-[180px]"
                 type="button"
                 leftIcon="arrowLeft"
                 onClick={handleBack}
@@ -351,7 +353,7 @@ export const EditProfile = () => {
                 label="Previous"
               />
               <IconButton
-                className="w-[180px]"
+                className="w-full sm:w-[180px]"
                 type="submit"
                 disabled={isSubmitting}
                 rightIcon={activeStep === 4 ? undefined : 'arrowRight'}
diff --git a/packages/frontend/src/features/user-profile/components/multi-step-form/personal-info-form.tsx b/packages/frontend/src/features/user-profile/components/multi-step-form/personal-info-form.tsx
index 6ffc117..9c795f8 100644
--- a/packages/frontend/src/features/user-profile/components/multi-step-form/personal-info-form.tsx
+++ b/packages/frontend/src/features/user-profile/components/multi-step-form/personal-info-form.tsx
@@ -108,7 +108,7 @@ export const PersonalInfoForm = ({
         />
       </div>
 
-      <div className="flex w-full gap-4">
+      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
         <FormInput
           name="firstName"
           label="First Name"
@@ -124,7 +124,7 @@ export const PersonalInfoForm = ({
           required
         />
       </div>
-      <div className="flex w-full gap-4">
+      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
         <div className="flex-1">
           <FormSelect
             name="province"
@@ -144,7 +144,7 @@ export const PersonalInfoForm = ({
           />
         </div>
       </div>
-      <div className="flex w-full gap-4">
+      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
         <div className="flex-1">
           <FormDatePicker
             name="dob"
@@ -164,7 +164,7 @@ export const PersonalInfoForm = ({
           />
         </div>
       </div>
-      <div className="flex w-full gap-4">
+      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
         <FormInput
           name="countryOfOrigin"
           label="Country of Origin"
diff --git a/packages/frontend/src/features/user-profile/components/multi-step-form/social-links-form.tsx b/packages/frontend/src/features/user-profile/components/multi-step-form/social-links-form.tsx
index 0fe4bc1..5d91aa4 100644
--- a/packages/frontend/src/features/user-profile/components/multi-step-form/social-links-form.tsx
+++ b/packages/frontend/src/features/user-profile/components/multi-step-form/social-links-form.tsx
@@ -63,7 +63,7 @@ export const SocialLinksForm = () => {
       <Button
         variant="ghost"
         type="button"
-        className="flex w-[152px] items-center justify-start gap-2 p-0 text-lg font-medium text-primary hover:bg-white"
+        className="flex w-full items-center justify-center gap-2 p-0 text-lg font-medium text-primary hover:bg-white sm:w-[152px] sm:justify-start"
         onClick={handleAddLink}
       >
         <SharedIcons.plusCircle className="h-6 w-6" />
diff --git a/packages/frontend/src/features/user-profile/components/multi-step-form/upload-resume.tsx b/packages/frontend/src/features/user-profile/components/multi-step-form/upload-resume.tsx
index 3a5bbcc..6750858 100644
--- a/packages/frontend/src/features/user-profile/components/multi-step-form/upload-resume.tsx
+++ b/packages/frontend/src/features/user-profile/components/multi-step-form/upload-resume.tsx
@@ -104,7 +104,7 @@ export const UploadResume = ({
       />
 
       <div className="mt-6 flex w-full flex-col gap-4">
-        <div className="flex w-full gap-4">
+        <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
           <FormInput
             name="profession"
             label="Profession"
@@ -120,7 +120,7 @@ export const UploadResume = ({
             required
           />
         </div>
-        <div className="flex w-full gap-4">
+        <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
           <div className="flex-1">
             <FormSelect
               name="workStatus"
diff --git a/packages/frontend/src/features/user-profile/components/view-profile.tsx b/packages/frontend/src/features/user-profile/components/view-profile.tsx
index 6450e23..153c6ab 100644
--- a/packages/frontend/src/features/user-profile/components/view-profile.tsx
+++ b/packages/frontend/src/features/user-profile/components/view-profile.tsx
@@ -241,8 +241,8 @@ export const ViewProfile = ({ slug }: ViewProfileProps) => {
 
   if (isLoading) {
     return (
-      <Card className="flex min-w-[840px] flex-col rounded-[24px]">
-        <CardContent className="flex items-center justify-center p-8">
+      <Card className="mx-auto flex w-full max-w-3xl flex-col rounded-[24px]">
+        <CardContent className="flex items-center justify-center p-6 sm:p-8">
           Loading profile...
         </CardContent>
       </Card>
@@ -251,8 +251,8 @@ export const ViewProfile = ({ slug }: ViewProfileProps) => {
 
   if (error) {
     return (
-      <Card className="flex w-[840px] flex-col rounded-[24px]">
-        <CardContent className="flex items-center justify-center p-8">
+      <Card className="mx-auto flex w-full max-w-3xl flex-col rounded-[24px]">
+        <CardContent className="flex items-center justify-center p-6 sm:p-8">
           Error loading profile: {error.message}
         </CardContent>
       </Card>
@@ -260,8 +260,8 @@ export const ViewProfile = ({ slug }: ViewProfileProps) => {
   }
 
   return (
-    <div className="container-default mx-auto min-w-[1024px] max-w-4xl">
-      <Card className="space-y-8 p-6">
+    <div className="container-default mx-auto w-full px-4 md:px-0">
+      <Card className="mx-auto w-full max-w-3xl space-y-8 p-4 sm:p-6">
         {/* Edit Profile Button - Only show for own profile */}
         <div className="flex justify-between gap-4">
           <IconButton
@@ -328,17 +328,19 @@ export const ViewProfile = ({ slug }: ViewProfileProps) => {
         </div>
 
         {/* Stats Section */}
-        <div className="flex items-center justify-center gap-8">
+        <div className="flex flex-col items-center justify-center gap-6 sm:flex-row sm:gap-8">
           <StatItem
             label="Mentees Tutored"
             value={profileDataBuilder.stats.menteesTutored}
           />
-          <Separator orientation="vertical" className="h-12" />
+          <Separator orientation="horizontal" className="w-40 sm:hidden" />
+          <Separator orientation="vertical" className="hidden h-12 sm:block" />
           <StatItem
             label="Group Sessions"
             value={profileDataBuilder.stats.groupSessions}
           />
-          <Separator orientation="vertical" className="h-12" />
+          <Separator orientation="horizontal" className="w-40 sm:hidden" />
+          <Separator orientation="vertical" className="hidden h-12 sm:block" />
           <StatItem
             label="Personal Sessions"
             value={profileDataBuilder.stats.personalSessions}
@@ -363,7 +365,7 @@ export const ViewProfile = ({ slug }: ViewProfileProps) => {
         <div className="space-y-6">
           {/* Personal Information */}
           {profileDataBuilder.personalInfo.length > 0 && (
-            <Card className="bg-neutral-light-200 p-6">
+            <Card className="bg-neutral-light-200 p-4 sm:p-6">
               <InfoGroup
                 title="Personal Information"
                 items={profileDataBuilder.personalInfo}
@@ -374,7 +376,7 @@ export const ViewProfile = ({ slug }: ViewProfileProps) => {
           {/* Contact Details */}
           {profileDataBuilder.contactDetails.length > 0 &&
             settings?.shareContactDetails && (
-              <Card className="bg-neutral-light-200 p-6">
+              <Card className="bg-neutral-light-200 p-4 sm:p-6">
                 <InfoGroup
                   title="Contact Details"
                   items={profileDataBuilder.contactDetails}
@@ -384,7 +386,7 @@ export const ViewProfile = ({ slug }: ViewProfileProps) => {
 
           {/* Professional Information */}
           {profileDataBuilder.professionalInfo.length > 0 && (
-            <Card className="bg-neutral-light-200 p-6">
+            <Card className="bg-neutral-light-200 p-4 sm:p-6">
               <InfoGroup
                 title="Professional Information"
                 items={profileDataBuilder.professionalInfo}
@@ -395,7 +397,7 @@ export const ViewProfile = ({ slug }: ViewProfileProps) => {
           {/* Links */}
           {profileDataBuilder.links.length > 0 &&
             settings?.shareSocialLinks && (
-              <Card className="bg-neutral-light-200 p-6">
+              <Card className="bg-neutral-light-200 p-4 sm:p-6">
                 <InfoGroup title="Links" items={profileDataBuilder.links} />
               </Card>
             )}
@@ -417,7 +419,7 @@ export const ViewProfile = ({ slug }: ViewProfileProps) => {
         onClose={() => setIsResumeModalOpen(false)}
         title={`${profileDataBuilder.name}'s Resume`}
         description="Preview and download the resume"
-        height="h-full"
+        height="h-[80vh] sm:h-full"
         filePath={
           displayedUser?.resumeUploadLink?.startsWith('http')
             ? displayedUser.resumeUploadLink
diff --git a/packages/frontend/src/shared/components/stepper/stepper.tsx b/packages/frontend/src/shared/components/stepper/stepper.tsx
index a817206..d6cd232 100644
--- a/packages/frontend/src/shared/components/stepper/stepper.tsx
+++ b/packages/frontend/src/shared/components/stepper/stepper.tsx
@@ -12,11 +12,16 @@ const StepperIndicator = ({
   return (
     <div className="flex items-center justify-center">
       {Array.from({ length: totalSteps }, (_, index) => (
-        <div key={index} className={clsx('m-4 h-2 w-16 rounded-full')}>
+        <div
+          key={index}
+          className={clsx(
+            'mx-2 h-1.5 w-10 rounded-full sm:mx-3 sm:h-2 sm:w-16 md:mx-4'
+          )}
+        >
           {index >= activeStep ? (
-            <div className="h-2 w-16 rounded-full bg-neutral-light-300"></div>
+            <div className="h-1.5 w-10 rounded-full bg-neutral-light-300 sm:h-2 sm:w-16"></div>
           ) : (
-            <div className="h-2 w-16 rounded-full bg-secondary-100"></div>
+            <div className="h-1.5 w-10 rounded-full bg-secondary-100 sm:h-2 sm:w-16"></div>
           )}
         </div>
       ))}

From 1cdfb77ede5bc62dc1a9095bcc816e8f377dc1eb Mon Sep 17 00:00:00 2001
From: CeeJayyy007 <63643138+CeeJayyy007@users.noreply.github.com>
Date: Fri, 8 Aug 2025 01:35:04 -0400
Subject: [PATCH 12/15] chore: fix responsiveness for settings and support page

---
 .../src/features/settings/components/settings.tsx     | 10 +++++-----
 .../src/features/support/components/support.tsx       | 11 ++++++-----
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/features/settings/components/settings.tsx b/packages/frontend/src/features/settings/components/settings.tsx
index 2ef73ed..e53efdb 100644
--- a/packages/frontend/src/features/settings/components/settings.tsx
+++ b/packages/frontend/src/features/settings/components/settings.tsx
@@ -32,14 +32,14 @@ export const Settings = () => {
 
   return (
     <div
-      className={`container-wide grid min-h-full w-full gap-6 ${
+      className={`container-wide grid min-h-full w-full gap-6 px-4 md:px-0 ${
         isLocalAuth
-          ? 'grid-cols-1 items-center justify-center md:grid-cols-2'
+          ? 'grid-cols-1 items-start md:grid-cols-2'
           : 'grid-cols-1 place-items-center'
       }`}
     >
       {isLocalAuth && (
-        <div className="h-full rounded-[24px] border bg-card p-6">
+        <div className="h-full rounded-[24px] border bg-card p-4 sm:p-6">
           <h4 className="mb-8 font-semibold">Security and Account</h4>
 
           <div className="space-y-4">
@@ -49,7 +49,7 @@ export const Settings = () => {
       )}
 
       <div
-        className={`min-h-full rounded-[24px] border bg-card p-6 ${
+        className={`min-h-full rounded-[24px] border bg-card p-4 sm:p-6 ${
           !isLocalAuth ? 'w-full max-w-lg' : ''
         }`}
       >
@@ -62,7 +62,7 @@ export const Settings = () => {
         <div>
           <h6 className="text-paragraph-lg font-semibold">Account Control</h6>
 
-          <div className="flex flex-row justify-start gap-4">
+          <div className="flex flex-row flex-wrap justify-start gap-4">
             <Button
               variant="link"
               className="h-10 w-fit p-0 text-base hover:text-destructive"
diff --git a/packages/frontend/src/features/support/components/support.tsx b/packages/frontend/src/features/support/components/support.tsx
index f946e42..278aa68 100644
--- a/packages/frontend/src/features/support/components/support.tsx
+++ b/packages/frontend/src/features/support/components/support.tsx
@@ -5,10 +5,10 @@ import { SupportForm } from './support-form';
 
 export const Support = () => {
   return (
-    <div className="container-wide min-h-screen">
+    <div className="container-wide min-h-screen px-4 md:px-0">
       <div className="grid items-center gap-8 divide-x-0 divide-border py-8 lg:grid-cols-2 lg:divide-x">
         {/* Left Column - Image */}
-        <div className="flex min-h-full flex-col items-center overflow-hidden rounded-2xl bg-primary-5 p-6">
+        <div className="flex min-h-full flex-col items-center overflow-hidden rounded-2xl bg-primary-5 p-4 sm:p-6">
           <h3 className="mb-auto font-bold">
             Have questions? Connect with us here
           </h3>
@@ -19,14 +19,15 @@ export const Support = () => {
               width={500}
               height={500}
               priority
-              sizes="(max-width: 768px) 100vw, 50vw"
+              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 50vw"
+              className="h-auto w-full max-w-xs sm:max-w-sm md:max-w-md"
             />
           </div>
         </div>
 
         {/* Right Column - Support Form Card */}
-        <div className="w-full pl-8">
-          <div className="space-y-6 rounded-2xl border bg-card p-6 text-card-foreground shadow-sm">
+        <div className="w-full lg:pl-8">
+          <div className="space-y-6 rounded-2xl border bg-card p-4 text-card-foreground shadow-sm sm:p-6">
             <h3 className="text-center font-bold">Contact Form</h3>
             <SupportForm />
           </div>

From 4ef8fb0105edc2cb9dc2a5ddbb137b39aeec5a7a Mon Sep 17 00:00:00 2001
From: CeeJayyy007 <63643138+CeeJayyy007@users.noreply.github.com>
Date: Fri, 8 Aug 2025 02:02:11 -0400
Subject: [PATCH 13/15] chore: fix responsiveness for messages page

---
 .../src/features/messages/components/messages.tsx    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/features/messages/components/messages.tsx b/packages/frontend/src/features/messages/components/messages.tsx
index e58027f..4c0829e 100644
--- a/packages/frontend/src/features/messages/components/messages.tsx
+++ b/packages/frontend/src/features/messages/components/messages.tsx
@@ -119,7 +119,7 @@ export const Messages = ({ userId }: { userId: string | undefined }) => {
   // Display loading state
   if (isLoading && chatList.length === 0) {
     return (
-      <div className="flex h-screen w-full items-center justify-center rounded-2xl bg-white">
+      <div className="flex min-h-[60vh] w-full items-center justify-center rounded-2xl bg-white p-4">
         <div className="text-center">
           <div className="mx-auto mb-4 h-8 w-32 animate-pulse rounded bg-gray-200" />
           <div className="mx-auto h-4 w-48 animate-pulse rounded bg-gray-200" />
@@ -131,7 +131,7 @@ export const Messages = ({ userId }: { userId: string | undefined }) => {
   // Display error state
   if (error) {
     return (
-      <div className="flex h-screen w-full items-center justify-center rounded-2xl bg-white">
+      <div className="flex min-h-[60vh] w-full items-center justify-center rounded-2xl bg-white p-4">
         <EmptyStateCard
           icon={AlertCircle}
           title="Could not load messages"
@@ -149,10 +149,10 @@ export const Messages = ({ userId }: { userId: string | undefined }) => {
   }
 
   return (
-    <div className="flex h-screen w-full rounded-2xl bg-white">
+    <div className="flex h-[100dvh] w-full flex-col rounded-2xl bg-white md:h-screen md:flex-row">
       {/* Sidebar */}
-      <div className="w-80 border-r px-6">
-        <div className="relative top-4 mb-4 flex items-center gap-2">
+      <div className="h-1/2 w-full overflow-y-auto border-b px-4 md:h-auto md:w-80 md:overflow-visible md:border-b-0 md:border-r md:px-6">
+        <div className="mb-4 mt-4 flex items-center gap-2 md:mt-6">
           <IconInput
             leftIcon="search"
             className="w-full rounded-full bg-neutral-light-200"
@@ -170,7 +170,7 @@ export const Messages = ({ userId }: { userId: string | undefined }) => {
       </div>
 
       {/* Main Chat Area */}
-      <div className="flex flex-1 flex-col">
+      <div className="flex h-1/2 flex-col overflow-y-auto md:h-auto md:flex-1 md:overflow-visible">
         {selectedUserId ? (
           <>
             <ChatHeader

From 931a36ad88988194f38867f94adbed3902bb204d Mon Sep 17 00:00:00 2001
From: CeeJayyy007 <63643138+CeeJayyy007@users.noreply.github.com>
Date: Fri, 8 Aug 2025 02:21:51 -0400
Subject: [PATCH 14/15] chore: fix responsiveness for admin page

---
 .../src/features/admin/components/admin.tsx   |  2 +-
 .../common/admin-table/user-table.tsx         | 86 ++++++++++---------
 .../components/common/user-management.tsx     | 20 +++--
 .../analytics/components/analytics.tsx        | 18 ++--
 4 files changed, 65 insertions(+), 61 deletions(-)

diff --git a/packages/frontend/src/features/admin/components/admin.tsx b/packages/frontend/src/features/admin/components/admin.tsx
index 38b18bc..9f81eb1 100644
--- a/packages/frontend/src/features/admin/components/admin.tsx
+++ b/packages/frontend/src/features/admin/components/admin.tsx
@@ -17,7 +17,7 @@ const AdminDashboard = () => {
   const [activeTab, setActiveTab] = useState('analytics');
 
   return (
-    <div className="container mx-auto space-y-6 py-6">
+    <div className="container mx-auto space-y-6 px-4 py-6 md:px-6">
       <div className="flex flex-col gap-2">
         <h1 className="text-3xl font-bold tracking-tight">Admin Dashboard</h1>
         <p className="text-muted-foreground">
diff --git a/packages/frontend/src/features/admin/components/common/admin-table/user-table.tsx b/packages/frontend/src/features/admin/components/common/admin-table/user-table.tsx
index 1d1ff1f..0f490c3 100644
--- a/packages/frontend/src/features/admin/components/common/admin-table/user-table.tsx
+++ b/packages/frontend/src/features/admin/components/common/admin-table/user-table.tsx
@@ -130,50 +130,52 @@ export const UsersTable = ({
 
   return (
     <>
-      <div className="rounded-md border">
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
-                  <TableHead key={header.id}>
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
-                  </TableHead>
-                ))}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map((row) => (
-                <TableRow key={row.id}>
-                  {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
-                    </TableCell>
+      <div className="w-full overflow-x-auto">
+        <div className="inline-block max-w-[320px] rounded-md border align-middle sm:min-w-full">
+          <Table>
+            <TableHeader>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
                   ))}
                 </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell
-                  colSpan={columns.length}
-                  className="h-24 text-center"
-                >
-                  No users found.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow key={row.id}>
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell key={cell.id}>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={columns.length}
+                    className="h-24 text-center"
+                  >
+                    No users found.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
       </div>
 
       {/* Single set of modals - only rendered once when selectedUser exists */}
diff --git a/packages/frontend/src/features/admin/components/common/user-management.tsx b/packages/frontend/src/features/admin/components/common/user-management.tsx
index e10617b..f781b88 100644
--- a/packages/frontend/src/features/admin/components/common/user-management.tsx
+++ b/packages/frontend/src/features/admin/components/common/user-management.tsx
@@ -178,12 +178,12 @@ export const UserManagement = () => {
 
   return (
     <div className="space-y-4">
-      <div className="flex flex-col justify-between gap-4 sm:flex-row">
+      <div className="flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
         <h2 className="text-2xl font-semibold">User Management</h2>
-        <div className="flex gap-2">
+        <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
           <IconInput
             leftIcon="search"
-            className="h-10 w-[250px] rounded-full bg-neutral-light-100"
+            className="h-10 w-full rounded-full bg-neutral-light-100 sm:w-[250px]"
             placeholder="Search"
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
@@ -274,7 +274,7 @@ export const UserManagement = () => {
         </div>
       )}
 
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col items-start justify-between gap-2 sm:flex-row">
         <div className="text-sm text-gray-600">
           Showing {filteredUsers.length} of {users.length} users
         </div>
@@ -284,11 +284,13 @@ export const UserManagement = () => {
         />
       </div>
 
-      <UsersTable
-        users={paginatedUsers}
-        columnVisibility={columnVisibility}
-        setColumnVisibility={setColumnVisibility}
-      />
+      <div className="overflow-x-auto">
+        <UsersTable
+          users={paginatedUsers}
+          columnVisibility={columnVisibility}
+          setColumnVisibility={setColumnVisibility}
+        />
+      </div>
 
       <div className="flex justify-center">
         <PaginationComponent
diff --git a/packages/frontend/src/features/analytics/components/analytics.tsx b/packages/frontend/src/features/analytics/components/analytics.tsx
index 76782f1..3bdab01 100644
--- a/packages/frontend/src/features/analytics/components/analytics.tsx
+++ b/packages/frontend/src/features/analytics/components/analytics.tsx
@@ -56,7 +56,7 @@ export const Analytics = () => {
 
   if (analyticsError) {
     return (
-      <div className="container-wide p-6">
+      <div className="w-full p-4 sm:p-6">
         <div className="flex h-64 items-center justify-center rounded-lg border border-red-200 bg-red-50">
           <p className="text-red-600">
             Error loading analytics: {analyticsError}
@@ -68,10 +68,10 @@ export const Analytics = () => {
 
   return (
     <>
-      <div className="container-wide space-y-6 p-6" id="analytics-dashboard">
+      <div className="w-full space-y-6 p-4 sm:p-6" id="analytics-dashboard">
         {/* Header Section */}
-        <div className="flex items-center justify-between">
-          <div>
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div className="min-w-0">
             <h1 className="text-3xl font-bold text-gray-900">
               Analytics Dashboard
             </h1>
@@ -79,7 +79,7 @@ export const Analytics = () => {
               Monitor your platform&apos;s performance and user engagement
             </p>
           </div>
-          <div className="flex items-center gap-4">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
             <AnalyticsSelect
               options={selectOptions}
               placeholder="Select period"
@@ -99,7 +99,7 @@ export const Analytics = () => {
         </div>
 
         {/* Key Metrics Row */}
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+        <div className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-4">
           <div className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md">
             <MetricCard
               title="Total Users"
@@ -161,7 +161,7 @@ export const Analytics = () => {
         </div>
 
         {/* New Users Chart */}
-        <div className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md">
+        <div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-shadow hover:shadow-md sm:p-6">
           <div className="mb-6 flex items-center justify-between">
             <h3 className="text-lg font-semibold text-gray-900">
               New Users Growth
@@ -179,7 +179,7 @@ export const Analytics = () => {
         </div>
 
         {/* Charts Row */}
-        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+        <div className="grid grid-cols-1 gap-4 sm:gap-6 lg:grid-cols-3">
           {/* User Status Distribution */}
           <div className="flex flex-col justify-between rounded-xl border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md">
             <div className="mb-4 flex items-center justify-between">
@@ -214,7 +214,7 @@ export const Analytics = () => {
 
           {/* User Activity */}
           <div className="lg:col-span-2">
-            <div className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md">
+            <div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-shadow hover:shadow-md sm:p-6">
               <div className="mb-4 flex items-center justify-between">
                 <h3 className="text-lg font-semibold text-gray-900">
                   User Activity

From 172d7476277df3ed15f6f57364be46fa8e2f6c9b Mon Sep 17 00:00:00 2001
From: CeeJayyy007 <63643138+CeeJayyy007@users.noreply.github.com>
Date: Fri, 8 Aug 2025 13:22:04 -0400
Subject: [PATCH 15/15] chore: update mentorship flow

---
 .../components/common/base-form.tsx           |  6 ++--
 .../components/common/mentee-card.tsx         |  2 +-
 .../components/common/mentor-card.tsx         |  2 +-
 .../components/common/mentorship-form.tsx     | 16 +++++------
 .../components/common/mentorship-section.tsx  |  2 +-
 .../components/mentee-dashboard.tsx           | 28 +++++++++----------
 .../mentorship/components/mentee-form.tsx     |  2 +-
 .../components/mentor-dashboard.tsx           | 16 +++++------
 .../mentorship/components/mentor-form.tsx     |  2 +-
 .../components/mentorship-apply.tsx           | 10 +++++--
 .../components/mentorship-waitlist.tsx        |  4 +--
 .../components/table/data-table.tsx           |  4 +--
 12 files changed, 49 insertions(+), 45 deletions(-)

diff --git a/packages/frontend/src/features/mentorship/components/common/base-form.tsx b/packages/frontend/src/features/mentorship/components/common/base-form.tsx
index e35f346..3c88a82 100644
--- a/packages/frontend/src/features/mentorship/components/common/base-form.tsx
+++ b/packages/frontend/src/features/mentorship/components/common/base-form.tsx
@@ -76,7 +76,7 @@ export const BaseForm = ({
         onUpload={handleFileUpload}
       />
 
-      <div className="flex w-full gap-4">
+      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
         <FormInput
           name="firstName"
           label="First Name"
@@ -96,7 +96,7 @@ export const BaseForm = ({
       </div>
       {isMentor && (
         <>
-          <div className="flex w-full gap-4">
+          <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
             <FormInput
               name="profession"
               label="Profession"
@@ -118,7 +118,7 @@ export const BaseForm = ({
               }}
             />
           </div>
-          <div className="flex w-full gap-4">
+          <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
             <FormInput
               name="max_mentees"
               label="No. of mentees you can accomodate"
diff --git a/packages/frontend/src/features/mentorship/components/common/mentee-card.tsx b/packages/frontend/src/features/mentorship/components/common/mentee-card.tsx
index b21c596..3885f97 100644
--- a/packages/frontend/src/features/mentorship/components/common/mentee-card.tsx
+++ b/packages/frontend/src/features/mentorship/components/common/mentee-card.tsx
@@ -9,7 +9,7 @@ interface MenteeCardProps {
 
 const MenteeCard = ({ title, value, icon }: MenteeCardProps) => {
   return (
-    <div className="flex h-[112px] w-full min-w-[664px] justify-between rounded-2xl border border-neutral-light-400 bg-neutral-light-200 p-4 shadow-sm">
+    <div className="flex h-[112px] w-full min-w-0 justify-between rounded-2xl border border-neutral-light-400 bg-neutral-light-200 p-4 shadow-sm sm:min-w-[220px]">
       <div className="flex w-full flex-col gap-2">
         <h5 className="font-normal">{title}</h5>
         <h4 className="font-bold">{value}</h4>
diff --git a/packages/frontend/src/features/mentorship/components/common/mentor-card.tsx b/packages/frontend/src/features/mentorship/components/common/mentor-card.tsx
index 0097084..12995d5 100644
--- a/packages/frontend/src/features/mentorship/components/common/mentor-card.tsx
+++ b/packages/frontend/src/features/mentorship/components/common/mentor-card.tsx
@@ -32,7 +32,7 @@ const MentorCard = ({
   return (
     <div
       className={cn(
-        'flex h-[156px] w-full min-w-[380px] justify-between rounded-2xl border border-neutral-light-400 p-4 shadow-sm',
+        'flex h-[156px] w-full min-w-0 justify-between rounded-2xl border border-neutral-light-400 p-4 shadow-sm sm:min-w-[380px]',
         className
       )}
     >
diff --git a/packages/frontend/src/features/mentorship/components/common/mentorship-form.tsx b/packages/frontend/src/features/mentorship/components/common/mentorship-form.tsx
index addd078..e3d59d9 100644
--- a/packages/frontend/src/features/mentorship/components/common/mentorship-form.tsx
+++ b/packages/frontend/src/features/mentorship/components/common/mentorship-form.tsx
@@ -159,8 +159,8 @@ export const MentorshipForm = ({ title, description }: MentorshipFormProps) => {
   // loading state
   if (isLoading) {
     return (
-      <Card className="flex w-[840px] flex-col rounded-[24px]">
-        <CardContent className="flex items-center justify-center p-8">
+      <Card className="mx-auto flex w-full max-w-3xl flex-col rounded-[24px]">
+        <CardContent className="flex items-center justify-center p-6 sm:p-8">
           Loading {title} form...
         </CardContent>
       </Card>
@@ -170,8 +170,8 @@ export const MentorshipForm = ({ title, description }: MentorshipFormProps) => {
   // error state
   if (error) {
     return (
-      <Card className="flex w-[840px] flex-col rounded-[24px]">
-        <CardContent className="flex items-center justify-center p-8">
+      <Card className="mx-auto flex w-full max-w-3xl flex-col rounded-[24px]">
+        <CardContent className="flex items-center justify-center p-6 sm:p-8">
           Error loading {title} form: {error.message}
         </CardContent>
       </Card>
@@ -180,9 +180,9 @@ export const MentorshipForm = ({ title, description }: MentorshipFormProps) => {
 
   // success state
   return (
-    <Card className="flex w-[840px] flex-col rounded-[24px]">
-      <CardHeader className="justify-center p-8">
-        <CardTitle className="flex flex-col space-y-6 text-center">
+    <Card className="mx-auto flex w-full max-w-3xl flex-col rounded-[24px]">
+      <CardHeader className="justify-center p-6 sm:p-8">
+        <CardTitle className="flex flex-col space-y-4 text-center sm:space-y-6">
           <div className="relative flex items-center justify-center gap-2">
             <IconButton
               leftIcon="arrowLeft"
@@ -194,7 +194,7 @@ export const MentorshipForm = ({ title, description }: MentorshipFormProps) => {
           </div>
         </CardTitle>
       </CardHeader>
-      <CardContent className="flex flex-col justify-center gap-4">
+      <CardContent className="flex flex-col justify-center gap-4 p-4 sm:p-6">
         <FormProvider {...methods}>
           <form onSubmit={methods.handleSubmit(onSubmit)} className="space-y-6">
             <BaseForm
diff --git a/packages/frontend/src/features/mentorship/components/common/mentorship-section.tsx b/packages/frontend/src/features/mentorship/components/common/mentorship-section.tsx
index ad6488f..9dfc32d 100644
--- a/packages/frontend/src/features/mentorship/components/common/mentorship-section.tsx
+++ b/packages/frontend/src/features/mentorship/components/common/mentorship-section.tsx
@@ -20,7 +20,7 @@ const MentorshipSection = ({ children, className }: MentorshipSectionProps) => {
   return (
     <div
       className={cn(
-        'flex h-[252px] w-full flex-col items-center gap-6 rounded-2xl bg-neutral-light-100 p-4 shadow-sm',
+        'flex w-full flex-col items-center gap-4 rounded-2xl bg-neutral-light-100 p-4 shadow-sm',
         className
       )}
     >
diff --git a/packages/frontend/src/features/mentorship/components/mentee-dashboard.tsx b/packages/frontend/src/features/mentorship/components/mentee-dashboard.tsx
index f8785d1..b58491b 100644
--- a/packages/frontend/src/features/mentorship/components/mentee-dashboard.tsx
+++ b/packages/frontend/src/features/mentorship/components/mentee-dashboard.tsx
@@ -147,29 +147,29 @@ const MenteeDashboard = () => {
   };
 
   return (
-    <div className="container-wide flex w-full flex-col gap-6">
+    <div className="container-wide flex w-full flex-col gap-6 px-4 md:px-0">
       <MentorshipSection className="h-auto w-full">
         <MentorshipSection.Header>
           <h6 className="font-semibold">Hey, {user?.firstName}!👋</h6>
         </MentorshipSection.Header>
 
         <MentorshipSection.Content className="w-full">
-          <div className="flex w-full gap-4">
-            <div className="flex min-h-[370px] w-full flex-col justify-between rounded-2xl border-2 border-gray-200 bg-neutral-light-200 p-6">
-              <div className="flex items-center justify-between">
+          <div className="flex w-full flex-col gap-4 lg:flex-row">
+            <div className="flex min-h-[370px] w-full flex-col justify-between rounded-2xl border-2 border-gray-200 bg-neutral-light-200 p-4 sm:p-6">
+              <div className="flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
                 <h5 className="font-normal">Current Mentor</h5>
 
                 <Button
-                  className="w-fit"
+                  className="w-full sm:w-fit"
                   onClick={() => setIsPastMentorsOpen(true)}
                 >
                   View Past Mentors
                 </Button>
               </div>
 
-              <div className="flex justify-between gap-6">
-                <div className="ml-10 flex flex-col items-center gap-3">
-                  <Avatar className="h-[120px] w-[120px]">
+              <div className="flex flex-col justify-between gap-6 sm:flex-row">
+                <div className="flex flex-col items-center gap-3 sm:ml-10">
+                  <Avatar className="h-[96px] w-[96px] sm:h-[120px] sm:w-[120px]">
                     <AvatarImage src={mentor?.avatarUrl} alt="Mentor avatar" />
                     <AvatarFallback>MC</AvatarFallback>
                   </Avatar>
@@ -209,7 +209,7 @@ const MenteeDashboard = () => {
                 </div>
               </div>
 
-              <div className="flex gap-4">
+              <div className="flex flex-col gap-3 sm:flex-row sm:gap-4">
                 <Button
                   className="flex h-10 w-full items-center gap-2"
                   variant="outline"
@@ -224,7 +224,7 @@ const MenteeDashboard = () => {
                 </Button>
               </div>
             </div>
-            <div className="flex flex-col gap-4">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-4">
               <MenteeCard
                 title="Mentrorship Started"
                 value="09/01/2025"
@@ -245,14 +245,14 @@ const MenteeDashboard = () => {
         </MentorshipSection.Content>
       </MentorshipSection>
       <MentorshipSection className="h-auto w-full">
-        <div className="flex w-full gap-4">
-          <div className="flex w-1/4 flex-col gap-4">
+        <div className="flex w-full flex-col gap-4 lg:flex-row">
+          <div className="flex w-full flex-col gap-4 lg:w-1/3">
             <MentorshipSection.Header>
               <h6 className="font-semibold">Session Notes</h6>
             </MentorshipSection.Header>
 
             <MentorshipSection.Content>
-              <ScrollArea className="h-[400px] pr-4">
+              <ScrollArea className="h-[300px] pr-2 sm:h-[400px] sm:pr-4">
                 <div className="flex flex-col gap-4">
                   {notes.map((note) => (
                     <NotesCard
@@ -268,7 +268,7 @@ const MenteeDashboard = () => {
             </MentorshipSection.Content>
           </div>
 
-          <div className="flex w-3/4 flex-col gap-4">
+          <div className="flex w-full flex-col gap-4 lg:w-2/3">
             <MentorshipSection.Header>
               <h6 className="font-semibold">Take Notes</h6>
             </MentorshipSection.Header>
diff --git a/packages/frontend/src/features/mentorship/components/mentee-form.tsx b/packages/frontend/src/features/mentorship/components/mentee-form.tsx
index 3dc6375..df73f5b 100644
--- a/packages/frontend/src/features/mentorship/components/mentee-form.tsx
+++ b/packages/frontend/src/features/mentorship/components/mentee-form.tsx
@@ -2,7 +2,7 @@ import MentorshipForm from './common/mentorship-form';
 
 const MenteeForm = () => {
   return (
-    <div className="flex w-full justify-center">
+    <div className="flex w-full justify-center px-4 md:px-0">
       <MentorshipForm
         title="Apply to be a Mentee"
         description="Why do you want to be mentored?"
diff --git a/packages/frontend/src/features/mentorship/components/mentor-dashboard.tsx b/packages/frontend/src/features/mentorship/components/mentor-dashboard.tsx
index db7b4a3..37a3a68 100644
--- a/packages/frontend/src/features/mentorship/components/mentor-dashboard.tsx
+++ b/packages/frontend/src/features/mentorship/components/mentor-dashboard.tsx
@@ -135,17 +135,17 @@ const MentorDashboard = () => {
   }
 
   return (
-    <div className="container-wide flex flex-col gap-6">
+    <div className="container-wide flex flex-col gap-6 px-4 md:px-0">
       <MentorshipSection>
         <MentorshipSection.Header>
           <h6 className="font-semibold">Hey, {user?.firstName}!👋</h6>
-          <div className="flex items-center gap-4">
-            <Button className="h-10">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
+            <Button className="h-10 w-full sm:w-auto">
               <PlusCircleIcon className="h-4 w-4" /> Create a Session
             </Button>
             <Button
               variant="outline"
-              className="h-10 w-fit"
+              className="h-10 w-full sm:w-fit"
               onClick={handleViewProfile}
             >
               <UserRoundPlus className="h-4 w-4" /> View Profile
@@ -160,7 +160,7 @@ const MentorDashboard = () => {
         </MentorshipSection.Header>
 
         <MentorshipSection.Content>
-          <div className="flex gap-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
             <MentorCard
               title="Minutes Mentored"
               value={mentorStatistics?.minutesMentored?.toString() || '0'}
@@ -204,11 +204,11 @@ const MentorDashboard = () => {
         </MentorshipSection.Content>
       </MentorshipSection>
 
-      <div className="flex gap-4">
+      <div className="flex flex-col gap-4 lg:flex-row">
         <MentorshipSection className="h-[444px]">
           <MentorshipSection.Header>
             <h6 className="font-semibold">Upcoming Sessions</h6>
-            <Button className="h-10">View All</Button>
+            <Button className="h-10 w-full sm:w-auto">View All</Button>
           </MentorshipSection.Header>
           <MentorshipSection.Content>
             <DataTable columns={sessionsColumns} data={upcomingSessionsData} />
@@ -225,7 +225,7 @@ const MentorDashboard = () => {
                 </h6>
               </div>
             </div>
-            <Button className="h-10">View All</Button>
+            <Button className="h-10 w-full sm:w-auto">View All</Button>
           </MentorshipSection.Header>
           <MentorshipSection.Content>
             <DataTable
diff --git a/packages/frontend/src/features/mentorship/components/mentor-form.tsx b/packages/frontend/src/features/mentorship/components/mentor-form.tsx
index 83fab8d..6abb26b 100644
--- a/packages/frontend/src/features/mentorship/components/mentor-form.tsx
+++ b/packages/frontend/src/features/mentorship/components/mentor-form.tsx
@@ -2,7 +2,7 @@ import MentorshipForm from './common/mentorship-form';
 
 const MentorForm = () => {
   return (
-    <div className="flex w-full justify-center">
+    <div className="flex w-full justify-center px-4 md:px-0">
       <MentorshipForm
         title="Apply to be a Mentor"
         description="Have you provided mentorship in other organizations (yes or no)? If yes, provide details (optional)"
diff --git a/packages/frontend/src/features/mentorship/components/mentorship-apply.tsx b/packages/frontend/src/features/mentorship/components/mentorship-apply.tsx
index 178ef86..2355ed7 100644
--- a/packages/frontend/src/features/mentorship/components/mentorship-apply.tsx
+++ b/packages/frontend/src/features/mentorship/components/mentorship-apply.tsx
@@ -6,7 +6,7 @@ import { MentorshipIcons } from './icons';
 
 export const MentorshipApply = () => {
   return (
-    <Card className="mx-auto h-auto w-auto px-8 py-12">
+    <Card className="mx-auto h-auto w-full max-w-5xl px-4 py-8 sm:px-8 sm:py-12">
       <div className="flex w-full flex-col items-center space-y-8">
         <h3 className="text-center font-semibold">Apply for Mentorship</h3>
 
@@ -16,7 +16,7 @@ export const MentorshipApply = () => {
           meaningful connections.
         </p>
 
-        <div className="flex w-full items-center justify-between gap-8 px-4 md:px-12">
+        <div className="flex w-full flex-col items-stretch justify-between gap-8 px-2 sm:px-4 md:flex-row md:items-center md:px-8">
           <div className="flex h-full flex-1 flex-col items-center space-y-6">
             <h5 className="min-h-[60px] px-4 text-center font-medium">
               Looking for guidance to achieve your goals?
@@ -29,7 +29,11 @@ export const MentorshipApply = () => {
             </Button>
           </div>
 
-          <Separator orientation="vertical" className="h-[400px] border-2" />
+          <Separator className="my-2 md:hidden" />
+          <Separator
+            orientation="vertical"
+            className="hidden h-[400px] border-2 md:block"
+          />
 
           <div className="flex h-full flex-1 flex-col items-center space-y-6">
             <h5 className="min-h-[60px] px-4 text-center font-medium">
diff --git a/packages/frontend/src/features/mentorship/components/mentorship-waitlist.tsx b/packages/frontend/src/features/mentorship/components/mentorship-waitlist.tsx
index 3b36300..b8c4371 100644
--- a/packages/frontend/src/features/mentorship/components/mentorship-waitlist.tsx
+++ b/packages/frontend/src/features/mentorship/components/mentorship-waitlist.tsx
@@ -45,8 +45,8 @@ export function MentorshipWaitlist({
     : null;
 
   return (
-    <div className="flex h-full w-full items-center justify-center">
-      <Card className="mx-auto my-8 w-full max-w-4xl">
+    <div className="flex h-full w-full items-center justify-center px-4 md:px-0">
+      <Card className="mx-auto my-8 w-full max-w-3xl sm:max-w-4xl">
         <CardHeader>
           <CardTitle className="text-center text-2xl font-semibold">
             Application In Progress
diff --git a/packages/frontend/src/features/mentorship/components/table/data-table.tsx b/packages/frontend/src/features/mentorship/components/table/data-table.tsx
index d266cb3..70b1b50 100644
--- a/packages/frontend/src/features/mentorship/components/table/data-table.tsx
+++ b/packages/frontend/src/features/mentorship/components/table/data-table.tsx
@@ -34,8 +34,8 @@ export function DataTable<TData, TValue>({
   });
 
   return (
-    <div className="border-0">
-      <Table>
+    <div className="w-full overflow-x-auto">
+      <Table className="min-w-[720px] sm:min-w-0">
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id} className="bg-neutral-light-300">