diff --git a/app/(Admin Dashboard)/admin/page.tsx b/app/(Admin Dashboard)/admin/page.tsx
index 78e399c..0052843 100644
--- a/app/(Admin Dashboard)/admin/page.tsx	
+++ b/app/(Admin Dashboard)/admin/page.tsx	
@@ -58,11 +58,13 @@ export default function Admin() {
                 Admin Login
               </Heading>
             </Card.Header>
-            <Input placeholder={"2xl"} hideBelow={'2xl'} />
-            <Input placeholder={"xl"} hideBelow={'xl'} />
-            <Input placeholder={"lg"} hideBelow={'lg'} />
-            <Input placeholder={"md"} hideBelow={'md'} />
-            <Input placeholder={"sm"} hideBelow={'sm'} />
+            <Input placeholder={"4k"} hideBelow={'4k'} />
+            <Input placeholder={"laptopL"} hideBelow={'laptopL'} />
+            <Input placeholder={"laptop"} hideBelow={'laptop'} />
+            <Input placeholder={"tablet"} hideBelow={'tablet'} />
+            <Input placeholder={"mobileL"} hideBelow={'mobileL'} />
+            <Input placeholder={"mobileM"} hideBelow={'mobileM'} />
+            <Input placeholder={"mobileS"} hideBelow={'mobileS'} />
             <Card.Body>
               <form action="submit">
                 <Fieldset.Root>
diff --git a/app/(Admin Dashboard)/components/navbar.tsx b/app/(Admin Dashboard)/components/navbar.tsx
index 782c52d..786aadd 100644
--- a/app/(Admin Dashboard)/components/navbar.tsx	
+++ b/app/(Admin Dashboard)/components/navbar.tsx	
@@ -19,6 +19,7 @@ import {
   Heading,
   Center,
   Card,
+  StackProps,
 } from "@chakra-ui/react";
 import {
   MdBrightness4 as MdMoon,
@@ -63,38 +64,39 @@ export default function Navbar() {
 
   const [open, setOpen] = useState(false)
   // Container props
-  const ContainerProps = {
-    h: { mobile: "10dvh", tablet: "30dvh", laptop: "50dvh", xLarge: "70dvh", "2XLarge": "90dvh" }, //"2XLarge": "10dvh",
+  const ContainerProps: StackProps = {
+    h: { base: "12dvh" }, //"2XLarge": "10dvh",
     zIndex: 2, //2,
 
     py: { base: 5, mdTo2xl: 8 },//isFixed ? (notMobileDevice ? 8 : 2) : notMobileDevice ? 8 : 5,
 
     boxShadow: { base: "2xl" },//isFixed ? "2xl" : "none",
     bg: {
-      base: colorMode === "light"
-        ? "black"
-        : "blackAlpha.950"
-      ,
-      aboveBase: colorMode === "light"
-        ? "black"
-        : "blackAlpha.950"
+      base: "black",
     },
-    w: "100dvw",
+    w: "100%",
     className: openSans.className,//openSans.className,
     justifyContent: "space-between",
-  } as const;
+
+  };
 
   // Nav text props
-  const navTextProps = {
+  const navTextProps: StackProps = {
+    fontSize: "16px",
+    fontWeight: 600,
+    _light: { color: "white" },
+  };
+  // Mobile nav text props
+  const mobileNavTextProps: StackProps = {
     fontSize: "16px",
     fontWeight: 600,
     _light: { color: "white" },
-  } as const;
+  };
 
   return (
     <HStack {...ContainerProps} as={"nav"} color={"#f8f7f7"}>
 
-      <ChakraLink asChild pl={{ mobile: 4, laptop: 8 }}>
+      <ChakraLink asChild pl={{ base: 4, md: 8 }}>
         <NextLink href="/">
           <ChakraImage asChild >
             <Image
@@ -107,7 +109,7 @@ export default function Navbar() {
 
         </NextLink>
       </ChakraLink>
-      <HStack justifyContent={"space-evenly"} spaceX={6} px={8} hideBelow={"laptop"}>
+      <HStack justifyContent={"space-evenly"} spaceX={6} px={8} hideBelow={"md"}>
         <ChakraLink asChild>
           <NextLink href="/about">
             <Text {...navTextProps}>About</Text>
@@ -175,9 +177,9 @@ export default function Navbar() {
       </HStack>
 
       {/* Mobile Menu */}
-      <Drawer.Root size={"full"} open={open} onOpenChange={(e) => setOpen(e.open)}  >
-        <Drawer.Trigger asChild mr={8}>
-          <Button variant="outline" size="sm">
+      <Drawer.Root size={"full"} open={open} onOpenChange={(e) => setOpen(e.open)} >
+        <Drawer.Trigger asChild mr={8} hideFrom={"md"}>
+          <Button variant="outline" size="sm" color="white">
             Menu
           </Button>
         </Drawer.Trigger>
@@ -195,24 +197,24 @@ export default function Navbar() {
                     <VStack gapY={4} alignItems={"start"}>
                       <ChakraLink asChild>
                         <NextLink href="/about">
-                          <Text {...navTextProps}>About</Text>
+                          <Text {...mobileNavTextProps}>About</Text>
                         </NextLink>
                       </ChakraLink>
                       <ChakraLink asChild>
                         <NextLink href="/contact">
-                          <Text {...navTextProps}>Contact</Text>
+                          <Text {...mobileNavTextProps}>Contact</Text>
                         </NextLink>
                       </ChakraLink>
                       <ChakraLink asChild>
                         <NextLink href="/services">
-                          <Text {...navTextProps}>Services</Text>
+                          <Text {...mobileNavTextProps}>Services</Text>
                         </NextLink>
                       </ChakraLink>
 
                       <ChakraLink asChild>
                         <NextLink href="/programs">
                           <Box position={"relative"} display={"inline-block"}>
-                            <Text {...navTextProps}>
+                            <Text {...mobileNavTextProps}>
                               {/* Float the badge to the above the text */}
                               Programs
                             </Text>
@@ -227,7 +229,7 @@ export default function Navbar() {
                       <ChakraLink asChild>
                         <NextLink href="/resources">
                           <Box position={"relative"} display={"inline-block"}>
-                            <Text {...navTextProps}>
+                            <Text {...mobileNavTextProps}>
                               {/* Float the badge to the above the text */}
                               Resources
                             </Text>
diff --git a/app/(Public Pages)/(About)/about/page.tsx b/app/(Public Pages)/(About)/about/page.tsx
index f0568d9..dedf51a 100644
--- a/app/(Public Pages)/(About)/about/page.tsx	
+++ b/app/(Public Pages)/(About)/about/page.tsx	
@@ -1,7 +1,6 @@
 "use client";
 import NextImage from "next/image";
 import TeamMemberCard from "@/components/about/team-member-card";
-// import { GemIcon } from '@/components/ui/icons';
 import { executiveBoard, teamMembers } from "@/data/team";
 import {
   Container,
@@ -9,191 +8,223 @@ import {
   Text,
   AbsoluteCenter,
   VStack,
-  HStack,
+  Stack,
   Heading,
   Link as ChakraLink,
   SimpleGrid,
   Image as ChakraImage,
   Card,
   Avatar,
+  Center,
 } from "@chakra-ui/react";
 import { poppins } from "@/components/ui/fonts";
 import NextLink from "next/link";
-import checkDeviceSize from "@/components/ui/breakpoints";
 import { Icon } from "@/components/ui/icons/icon";
 
 export default function AboutUs() {
-  const notMobileDevice = checkDeviceSize();
   return (
-    <>
-      {notMobileDevice ? (
-        <VStack w={"100%"}>
-          <Box
-            position="relative"
-            w={"100%"}
-            h={"58vh"}
-            bgImage={"url('/assets/about-us/about-HeroImage.webp')"}
-            bgSize={"cover"}
-            backgroundPosition={"center"}
-            bgRepeat={"no-repeat"}
-
-          //  alt="Mokse hero image"
-          >
-            <AbsoluteCenter
-              textAlign="center"
-              bg="rgba(0, 0, 0, 0.4)"
-              w={"100%"}
-              h={"100%"}
-              alignItems={"center"}
+    <VStack w={"100%"}>
+      <Box
+        position="relative"
+        w={"100%"}
+        h={{ base: "45vh", md: "58vh" }}
+        bgImage={"url('/assets/about-us/about-HeroImage.webp')"}
+        bgSize={"cover"}
+        backgroundPosition={"center"}
+        bgRepeat={"no-repeat"}
+      >
+        <AbsoluteCenter
+          textAlign="center"
+          bg="rgba(0, 0, 0, 0.4)"
+          w={"100%"}
+          h={"100%"}
+          alignItems={"center"}
+          display="flex"
+          justifyContent="center"
+        >
+          <SimpleGrid columns={1} w="100%">
+            <VStack
+              w={{ base: "90%", md: "75%" }}
+              pl={{ base: 0, md: 16 }}
+              margin="0 auto"
             >
-              <SimpleGrid columns={2} gap={6}>
-                <VStack w={"75%"} pl={16}>
-                  <Heading as={"h1"} p={2}>
-                    <Text
-                      textStyle={"7xl"}
-                      className={poppins.className}
-                      textAlign={"start"}
-                      textTransform={"capitalize"}
-                      overflow={"hidden"}
-                      wordBreak={"none"}
-                      verticalAlign={"baseline"}
-                      _light={{ color: "white" }}
-                    >
-                      About Us
-                    </Text>
-                  </Heading>
-                  <Text _light={{ color: "white" }}>
-                    Our organization strives to break down barriers and stop the
-                    stigma associated with incarceration through technical
-                    assistance, consulting services, educational conferences,
-                    and business support programs.
-                  </Text>
-                </VStack>
-              </SimpleGrid>
-            </AbsoluteCenter>
-          </Box>
-          {/* ABOUT US */}
-          <Container as={"main"} maxW={"7xl"} h={"100%"}>
-            <SimpleGrid as={"section"} pt={12} pb={35} columns={[1, 2]} gap={6}>
-              <Card.Root p={8}>
-                <Avatar.Root size={"2xl"}>
-                  <Icon name={"Gem"} size={8} color={"#44C1B4"} />
-                </Avatar.Root>
-                <Box>
-                  <Heading as="h3">Vision</Heading>
-                  <Text>
-                    A society where all individuals have equal opportunities to
-                    thrive, learn, and lead. Empowered to contribute positively
-                    to their communities without the stigma or limitations from
-                    their past.
-                  </Text>
-                </Box>
-              </Card.Root>
-              <Card.Root p={8}>
-                <Avatar.Root size={"2xl"}>
-                  <Icon name={"Gem"} size={8} color={"#44C1B4"} />
-                </Avatar.Root>
-                <Box>
-                  <Heading as="h3">Mission</Heading>
-                  <Text>
-                    To promote education, empowerment, and entrepreneurship
-                    among incarcerated learners and individuals. Our
-                    organization strives to break down barriers and stop the
-                    stigma associated with incarceration through consulting
-                    services, educational conferences, and business support
-                    programs.
-                  </Text>
-                </Box>
-              </Card.Root>
-            </SimpleGrid>
-            <section>
-              <Heading
-                as="h2"
-                textAlign={"center"}
-                className={poppins.className}
-                textStyle={"4xl"}
-              >
-                Executive Board Members
+              <Heading as={"h1"} p={2}>
+                <Text
+                  textStyle={{ base: "5xl", md: "7xl" }}
+                  className={poppins.className}
+                  textAlign={{ base: "center", md: "start" }}
+                  textTransform={"capitalize"}
+                  overflow={"hidden"}
+                  wordBreak={"normal"}
+                  verticalAlign={"baseline"}
+                  color={"white"}
+                >
+                  About Us
+                </Text>
               </Heading>
-              <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} gap={8}>
-                {executiveBoard.map((member) => (
-                  <TeamMemberCard key={member.name} {...member} />
-                ))}
-              </SimpleGrid>
-            </section>
-            <section>
-              <Heading
-                as="h2"
-                textAlign={"center"}
-                className={poppins.className}
-                textStyle={"4xl"}
+              <Text
+                color={"white"}
+                textAlign={{ base: "center", md: "start" }}
+                px={{ base: 4, md: 0 }}
               >
-                Our Team
+                Our organization strives to break down barriers and stop the
+                stigma associated with incarceration through technical
+                assistance, consulting services, educational conferences,
+                and business support programs.
+              </Text>
+            </VStack>
+          </SimpleGrid>
+        </AbsoluteCenter>
+      </Box>
+
+      <Container as={"main"} maxW={"7xl"} h={"100%"} px={{ base: 4, md: 8 }}>
+        <SimpleGrid
+          as={"section"}
+          pt={12}
+          pb={"35px"}
+          columns={{ base: 1, md: 2 }}
+          gap={6}
+        >
+          <Card.Root p={8}>
+            <Avatar.Root size={"2xl"}>
+              <Icon name={"Gem"} size={8} color={"#44C1B4"} />
+            </Avatar.Root>
+            <Box mt={4}>
+              <Heading as="h3" textStyle="xl" mb={2}>
+                Vision
               </Heading>
-              <SimpleGrid columns={[2, 3, 4]} gapY={10} gapX={16}>
-                {teamMembers.map((member) => (
-                  <TeamMemberCard
-                    key={member.name + member.email}
-                    {...member}
-                  />
-                ))}
-              </SimpleGrid>
-            </section>
-            <section>
-              <Heading
-                as="h2"
-                textAlign={"center"}
-                className={poppins.className}
-                textStyle={"4xl"}
-              >
-                Our Partners
+              <Text>
+                A society where all individuals have equal opportunities to
+                thrive, learn, and lead. Empowered to contribute positively
+                to their communities without the stigma or limitations from
+                their past.
+              </Text>
+            </Box>
+          </Card.Root>
+
+          <Card.Root p={8}>
+            <Avatar.Root size={"2xl"}>
+              <Icon name={"Gem"} size={8} color={"#44C1B4"} />
+            </Avatar.Root>
+            <Box mt={4}>
+              <Heading as="h3" textStyle="xl" mb={2}>
+                Mission
               </Heading>
-              <Text textAlign={"center"} mt={4}>
-                Join us in creating meaningful change through collaborative
-                projects and shared resources.
+              <Text>
+                To promote education, empowerment, and entrepreneurship
+                among incarcerated learners and individuals. Our
+                organization strives to break down barriers and stop the
+                stigma associated with incarceration through consulting
+                services, educational conferences, and business support
+                programs.
               </Text>
-              <HStack justifyContent={"center"} gap={16} mt={8}>
-                <Box>
-                  <ChakraLink asChild variant="underline">
-                    <NextLink
-                      href="https://www.facebook.com/profile.php?id=61569163410278"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <ChakraImage asChild>
-                        <NextImage
-                          src="/assets/partners/ht-logo.webp"
-                          alt="HT Partner"
-                          width={300}
-                          height={300}
-                        />
-                      </ChakraImage>
-                    </NextLink>
-                  </ChakraLink>
-                </Box>
-                <Box>
-                  <ChakraLink asChild variant="underline">
-                    <NextLink
-                      href="https://www.instagram.com/osobeautifulreentry/"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <ChakraImage asChild>
-                        <NextImage
-                          src="/assets/partners/oh-so-beautiful-logo.webp"
-                          alt="Oh So Beautiful Reentry"
-                          width={300}
-                          height={300}
-                        />
-                      </ChakraImage>
-                    </NextLink>
-                  </ChakraLink>
-                </Box>
-              </HStack>
-            </section>
-          </Container>
-        </VStack>
-      ) : null}
-    </>
+            </Box>
+          </Card.Root>
+        </SimpleGrid>
+
+        <Box as="section" py={8}>
+          <Heading
+            as="h2"
+            textAlign={"center"}
+            className={poppins.className}
+            textStyle={{ base: "3xl", md: "4xl" }}
+            mb={8}
+          >
+            Executive Board Members
+          </Heading>
+          <SimpleGrid columns={{ base: 1, sm: 2, lg: 4 }} gap={8}>
+
+            {executiveBoard.map((member) => (
+              <Center key={member.name}>
+                <TeamMemberCard {...member} />
+              </Center>
+            ))}
+
+          </SimpleGrid>
+        </Box>
+
+        <Box as="section" py={8}>
+          <Heading
+            as="h2"
+            textAlign={"center"}
+            className={poppins.className}
+            textStyle={{ base: "3xl", md: "4xl" }}
+            mb={8}
+          >
+            Our Team
+          </Heading>
+          <SimpleGrid
+            columns={{ base: 1, sm: 2, md: 3, lg: 4 }}
+            gapY={10}
+            gapX={{ base: 6, md: 16 }}
+          >
+            {teamMembers.map((member) => (
+              <Center key={member.name + member.email}>
+                <TeamMemberCard  {...member} />
+              </Center>
+            ))}
+          </SimpleGrid>
+        </Box>
+
+        <Box as="section" py={12} pb={20}>
+          <Heading
+            as="h2"
+            textAlign={"center"}
+            className={poppins.className}
+            textStyle={{ base: "3xl", md: "4xl" }}
+          >
+            Our Partners
+          </Heading>
+          <Text textAlign={"center"} mt={4}>
+            Join us in creating meaningful change through collaborative
+            projects and shared resources.
+          </Text>
+          <Stack
+            direction={{ base: "column", md: "row" }}
+            justifyContent={"center"}
+            alignItems={"center"}
+            gap={{ base: 8, md: 16 }}
+            mt={8}
+          >
+            <Box>
+              <ChakraLink asChild variant="underline">
+                <NextLink
+                  href="https://www.facebook.com/profile.php?id=61569163410278"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <ChakraImage asChild w={{ base: "200px", md: "300px" }}>
+                    <NextImage
+                      src="/assets/partners/ht-logo.webp"
+                      alt="HT Partner"
+                      width={300}
+                      height={300}
+                    />
+                  </ChakraImage>
+                </NextLink>
+              </ChakraLink>
+            </Box>
+            <Box>
+              <ChakraLink asChild variant="underline">
+                <NextLink
+                  href="https://www.instagram.com/osobeautifulreentry/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <ChakraImage asChild w={{ base: "200px", md: "300px" }}>
+                    <NextImage
+                      src="/assets/partners/oh-so-beautiful-logo.webp"
+                      alt="Oh So Beautiful Reentry"
+                      width={300}
+                      height={300}
+                    />
+                  </ChakraImage>
+                </NextLink>
+              </ChakraLink>
+            </Box>
+          </Stack>
+        </Box>
+      </Container>
+    </VStack>
   );
-}
+}
\ No newline at end of file
diff --git a/app/(Public Pages)/(Contact)/contact/page.tsx b/app/(Public Pages)/(Contact)/contact/page.tsx
index aebf4cd..0c000ca 100644
--- a/app/(Public Pages)/(Contact)/contact/page.tsx	
+++ b/app/(Public Pages)/(Contact)/contact/page.tsx	
@@ -1,23 +1,22 @@
 "use client";
 
-import Image from "next/image";
+import NextLink from "next/link";
 import ContactForm from "@/components/contact/contact-form";
 import { contactInfo, socialLinks, mapEmbedUrl } from "@/data/contact";
 
-import NextLink from "next/link";
 import {
   Box,
   Text,
   HStack,
+  Stack,
   Heading,
   Card,
   Link as ChakraLink,
-  Image as ChakraImage,
   Avatar,
   VStack,
+  SimpleGrid,
 } from "@chakra-ui/react";
 
-import checkDeviceSize from "@/components/ui/breakpoints";
 import {
   HeaderTemplate,
   PageBuilder,
@@ -25,201 +24,117 @@ import {
 } from "@/components/page-builder/template";
 import { Icon } from "@/components/ui/icons/icon";
 import { poppins } from "@/components/ui/fonts";
-import { Section } from "lucide-react";
 
 export default function Contact() {
-  const notMobileDevice = checkDeviceSize();
   return (
-    <>
-      {notMobileDevice ? (
-        <PageBuilder>
-          <HeaderTemplate
-            title="Contact Us"
-            imageHeight={"52.1vh"}
-            image="/assets/contact/1500.jpg"
-            imageLabel="Contact Us Hero"
-            description="Find out how you can contribute and make a positive impact in your community"
-          />
-
-          <SectionTemplate >
-            <VStack justify={"center"} align={"center"} gap={4} mb={10}>
-              <Heading as={"h2"}>Get in Touch</Heading>
-              <Text>
-                We&apos;re here to support you. Reach out to learn more about our
-                services, volunteer opportunities, and ways to contribute
-              </Text>
-
-              <HStack justify={"left"} align={"center"} gap={4}>
-                {socialLinks.map((link) => (
-                  <ChakraLink asChild key={link.url}>
-                    <NextLink
-                      href={link.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <Icon
-                        name={link.platform}
-                        border={"lg"}
-                        borderRadius={"full"}
-                        size={8}
-                        bg={"teal.focusRing"}
-                        borderColor={"teal.focusRing"}
-                        aria-label={`Visit our ${link.platform} page`}
-                      />
-                      <span>{link.platform}</span>
-                    </NextLink>
-                  </ChakraLink>
-                ))}
-              </HStack>
-              {/* Contact Info Cards Section */}
-              <HStack>
-                {contactInfo.map((info) => {
-                  info.value ? (
-                    <a href={info.value}>{info.value}</a>
-                  ) : (
-                    <Text>{info.value}</Text>
-                  );
+    <PageBuilder>
+      <HeaderTemplate
+        title="Contact Us"
+        imageHeight={{ base: "40vh", md: "52.1vh" }}
+        image="/assets/contact/1500.jpg"
+        imageLabel="Contact Us Hero"
+        description="Find out how you can contribute and make a positive impact in your community"
+      />
 
-                  return (
-                    <Card.Root
-                      key={info.label}
-                      variant="outline"
-                      w={"xxs"}
-                      h={"xxs"}
-                    >
-                      <Card.Body>
-                        <Avatar.Root my={4} boxSize={12}>
-                          <Icon name={info.icon} size={6} />
-                        </Avatar.Root>
-                        <Card.Title className={poppins.className}>
-                          {info.label}
-                        </Card.Title>
-                        <ChakraLink href={info.phoneNumber}>{info.value}</ChakraLink>
-                      </Card.Body>
-                    </Card.Root>
-                  );
-                })}
-              </HStack>
-            </VStack>
+      <SectionTemplate>
+        <VStack justify={"center"} align={"center"} gap={{ base: 8, md: 10 }} mb={12} px={{ base: 4, md: 0 }}>
+          <VStack gap={4} textAlign="center" maxW="3xl">
+            <Heading as={"h2"} textStyle={{ base: "3xl", md: "4xl" }}>
+              Get in Touch
+            </Heading>
+            <Text textStyle={{ base: "md", md: "lg" }}>
+              We're here to support you. Reach out to learn more about our
+              services, volunteer opportunities, and ways to contribute.
+            </Text>
+          </VStack>
 
-            {/* Google Maps Embed Section */}
-            <section>
-              <Box asChild width="100%" height="50vh">
-                <iframe
-                  loading="lazy"
-                  // src={mapEmbedUrl}
-                  style={{ border: 0 }}
-                  allowFullScreen
-                  src="https://maps.google.com/maps?q=497%20Hooksett%20Road%2C%20Suite%20362%2C%20Manchester%2C%20NH%2003104&amp;t=m&amp;z=10&amp;output=embed&amp;iwloc=near"
-                  title="497 Hooksett Road, Suite 362, Manchester, NH 03104"
-                  referrerPolicy="no-referrer-when-downgrade"
-                  aria-label="497 Hooksett Road, Suite 362, Manchester, NH 03104"
-                ></iframe>
-              </Box>
-              {/* Contact Form Section */}
-            </section>
-            <section>
-              <ContactForm />
-            </section>
-          </SectionTemplate>
-
-          <main></main>
-        </PageBuilder>
-      ) : (
-        <>
-          <main>
-            {/* Hero Section */}
-            <section>
-              <ChakraImage asChild>
-                <Image
-                  src="/assets/contact/1500.jpg"
-                  alt="Contact Mokse"
-                  fill
-                  priority
-                />
-              </ChakraImage>
-              <div>
-                <h1>Contact Us</h1>
-                <p>
-                  Find out how you can contribute and make a positive impact in
-                  your community
-                </p>
-              </div>
-            </section>
-
-            {/* Get In Touch Section */}
-            <section>
-              <div>
-                <h2>Get in Touch</h2>
-                <p>
-                  We&apos;re here to support you. Reach out to learn more about
-                  our services, volunteer opportunities, and ways to contribute
-                </p>
-                <div>
-                  {socialLinks.map((link) => (
-                    <a
-                      key={link.platform}
-                      href={link.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
+          {/* Social Links - Using a wrapping Row to prevent overflow on tiny screens */}
+          <Stack direction="row" wrap="wrap" justify="center" align="center" gap={6}>
+            {socialLinks.map((link) => (
+              <ChakraLink asChild key={link.url} _hover={{ textDecoration: "none" }}>
+                <NextLink
+                  href={link.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <HStack gap={3}>
+                    <Icon
+                      name={link.platform}
+                      border={"lg"}
+                      borderRadius={"full"}
+                      size={10}
+                      bg={"teal.focusRing"}
+                      borderColor={"teal.focusRing"}
                       aria-label={`Visit our ${link.platform} page`}
-                    >
-                      <Icon name={link.platform} size={10} />
-                      <span>{link.platform}</span>
-                    </a>
-                  ))}
-                </div>
-              </div>
-            </section>
-
-            {/* Contact Info Cards Section */}
-            <section>
-              <div>
-                {contactInfo.map((info) => {
-                  const content = info.phoneNumber ? (
-                    <a href={info.phoneNumber}>{info.value}</a>
-                  ) : (
-                    <p>{info.value}</p>
-                  );
-
-                  return (
-                    <article key={info.label}>
-                      hello
-                      <div>{info.icon}</div>
-                      <h4>{info.label}</h4>
-                      {content}
-                    </article>
-                  );
-                })}
-              </div>
-            </section>
+                    />
+                    <Text display={{ base: "none", sm: "block" }} fontWeight="medium">
+                      {link.platform}
+                    </Text>
+                  </HStack>
+                </NextLink>
+              </ChakraLink>
+            ))}
+          </Stack>
 
-            {/* Google Maps Embed Section */}
-            <section>
-              <div>
-                <iframe
-                  src={mapEmbedUrl}
-                  width="100%"
-                  height="100%"
-                  style={{ border: 0 }}
-                  allowFullScreen
-                  loading="lazy"
-                  referrerPolicy="no-referrer-when-downgrade"
-                  title="Mokse Office Location"
-                />
-              </div>
-            </section>
+          {/* Contact Info Cards - Responsive Grid to stack on mobile, 3 columns on desktop */}
+          <SimpleGrid columns={{ base: 1, md: 3 }} gap={6} w="full" maxW="6xl" mt={4}>
+            {contactInfo.map((info) => {
+              return (
+                <Card.Root
+                  key={info.label}
+                  variant="outline"
+                  w="full"
+                  minH="200px"
+                  alignItems="center"
+                  textAlign="center"
+                >
+                  <Card.Body display="flex" flexDirection="column" alignItems="center">
+                    <Avatar.Root my={4} boxSize={14} bg="transparent">
+                      <Icon name={info.icon} size={8} color="teal.focusRing" />
+                    </Avatar.Root>
+                    <Card.Title className={poppins.className} mb={3}>
+                      {info.label}
+                    </Card.Title>
+                    {info.phoneNumber ? (
+                      <ChakraLink href={info.phoneNumber} color="teal.focusRing">
+                        {info.value}
+                      </ChakraLink>
+                    ) : (
+                      <Text>{info.value}</Text>
+                    )}
+                  </Card.Body>
+                </Card.Root>
+              );
+            })}
+          </SimpleGrid>
+        </VStack>
 
-            {/* Contact Form Section */}
-            <section>
-              <div>
-                <ContactForm />
-              </div>
-            </section>
-          </main>
-          )
-        </>
-      )}
-    </>
+        {/* Map & Form Section - Side by Side on Desktop, Stacked on Mobile */}
+        <SimpleGrid columns={{ base: 1, lg: 2 }} gap={10} w="full" maxW="7xl" mx="auto" pb={12}>
+          <Box
+            as="section"
+            w="100%"
+            h={{ base: "40vh", lg: "auto" }}
+            minH="400px"
+            borderRadius="xl"
+            overflow="hidden"
+            boxShadow="md"
+          >
+            <iframe
+              loading="lazy"
+              src={mapEmbedUrl || "https://maps.google.com/maps?q=497%20Hooksett%20Road%2C%20Suite%20362%2C%20Manchester%2C%20NH%2003104&t=m&z=10&output=embed&iwloc=near"}
+              style={{ border: 0, width: "100%", height: "100%" }}
+              allowFullScreen
+              title="497 Hooksett Road, Suite 362, Manchester, NH 03104"
+              referrerPolicy="no-referrer-when-downgrade"
+              aria-label="Mokse Office Location"
+            />
+          </Box>
+          <Box as="section" w="100%">
+            <ContactForm />
+          </Box>
+        </SimpleGrid>
+      </SectionTemplate>
+    </PageBuilder>
   );
-}
+}
\ No newline at end of file
diff --git a/app/(Public Pages)/(Home)/components/Pictures.tsx b/app/(Public Pages)/(Home)/components/Pictures.tsx
new file mode 100644
index 0000000..f39b940
--- /dev/null
+++ b/app/(Public Pages)/(Home)/components/Pictures.tsx	
@@ -0,0 +1,69 @@
+import { Box, Center, Container, Grid, GridItem, SimpleGrid } from "@chakra-ui/react";
+
+export default function Pictures() {
+    const ImageSrcs = ['/assets/home/IMG_1011-300x300.webp', '/assets/home/IMG_1012-300x300.webp', '/assets/home/IMG_1027-300x300.webp', '/assets/home/IMG_0995-300x300.webp']
+
+    return (
+        <Container fluid asChild >
+            <Grid
+                templateColumns={{ base: "repeat(1, 1fr)", md: "repeat(4, 1fr)" }}
+                gap={{ base: 20, md: 8 }}
+            >
+                <GridItem colSpan={{ base: 1, md: 2 }} justifySelf={"center"}>
+                    <Box
+                        bgImage={"url('/assets/home/IMG_0997-1-1024x683.webp')"}
+                        bgRepeat={{ base: "no-repeat" }}
+                        backgroundPosition={"center"}
+                        bgSize={{ base: "100%", md: "contain" }}
+                        role="img"
+                        aria-label="Mokse hero image 1"
+                        rounded="md"
+
+                        _portrait={{ h: { base: "230px", md: "216px" }, w: { base: "343px", md: "325px" } }}
+                        _landscape={{ h: { base: "100px", md: "100px" }, w: { base: "230px", md: "216px" } }}
+
+                    />
+
+                </GridItem>
+                <GridItem colSpan={{ base: 1, md: 2 }}>
+                    <Center>
+                        <Box
+                            bgImage={"url('/assets/home/IMG_1004-1024x683.webp')"}
+                            bgRepeat={{ base: "no-repeat" }}
+                            backgroundPosition={"center"}
+                            bgSize={{ base: "100%", md: "contain" }}
+                            role="img"
+                            aria-label="Mokse hero image 1"
+                            rounded="md"
+                            _portrait={{ h: { base: "230px", md: "216px" }, w: { base: "343px", md: "325px" } }}
+                            _landscape={{ h: { base: "343px", md: "325px" }, w: { base: "230px", md: "216px" } }}
+
+                        />
+                    </Center>
+
+                </GridItem>
+
+                {ImageSrcs.map((src, index) => (
+                    <GridItem key={index} colSpan={{ base: 1, md: 2 }} >
+                        <Center>
+                            <Box
+                                aspectRatio={{ base: "square" }}
+                                bgImage={`url(${src})`}
+                                bgRepeat={{ base: "no-repeat" }}
+                                backgroundPosition={"center"}
+                                bgSize={{ base: "cover", md: "contain" }}
+                                role="img"
+                                aria-label="Mokse hero image 1"
+                                rounded="md"
+                                _portrait={{ h: { base: "230px", md: "325px" }, w: { md: "325px", } }}
+                                _landscape={{ h: { md: "325px" }, w: { base: "125%", md: "325px" } }}
+
+                            />
+                        </Center>
+
+                    </GridItem>
+                ))}
+            </Grid>
+        </Container>
+    )
+}
\ No newline at end of file
diff --git a/app/(Public Pages)/(Home)/page.tsx b/app/(Public Pages)/(Home)/page.tsx
index 8bce2ef..f5c5965 100644
--- a/app/(Public Pages)/(Home)/page.tsx	
+++ b/app/(Public Pages)/(Home)/page.tsx	
@@ -22,41 +22,42 @@ import {
   Image as ChakraImage,
   HStack,
   AspectRatio,
+  Grid,
 } from "@chakra-ui/react";
 import { poppins } from "@/components/ui/fonts";
 // import { openSans } from "@/components/ui/fonts"; 
 import { Icon } from "@/components/ui/icons/icon";
+import Pictures from "./components/Pictures";
 
 export default function Home() {
   return (
-    <VStack w={{ mobile: "100dvw" }}>
+    <VStack w={{ base: "100%" }}>
       <Box
-        roundedBottomRight={{ mobile: "40px" }}
-        w={{ mobile: "100dvw" }}
-        h={{ mobile: "98dvh" }}
+        roundedBottomRight={{ base: "40px" }}
+        w={{ base: "100%" }}
+        h={{ base: "98dvh", md: "92dvh" }}
         bgImage={"url('/assets/home/HeroImage.jpg')"}
-        bgSize={{ mobile: "291%" }}
-        backgroundPosition={{ mobile: "right bottom" }}
-        bgRepeat={{ mobile: "no-repeat" }}
-        bgColor={{ mobile: "rgba(0, 0, 0, 0.4)" }}
-        bgBlendMode={{ mobile: "multiply" }}
+        bgSize={{ base: "291%", md: "100%" }}
+        backgroundPosition={{ base: "right bottom", md: "center" }}
+        bgRepeat={{ base: "no-repeat" }}
+        bgColor={{ base: "rgba(0, 0, 0, 0.4)" }}
+        bgBlendMode={{ base: "multiply" }}
         role="img"
         aria-label="Mokse hero image 1"
-      // alt="Mokse hero image"
       >
-        <SimpleGrid w={{ mobile: "100%" }} h={{ mobile: "100%" }} pt={{ mobile: "28dvh" }} columns={{ mobile: 1 }}>
-          <VStack gap={{ mobile: 5 }} >
+        <SimpleGrid w={{ base: "100%" }} h={{ base: "100%" }} pt={{ base: "28dvh", md: "12dvh" }} columns={{ base: 1 }}>
+          <VStack gap={{ base: 5 }} >
             <Heading as={"h1"}
-              size={{ mobile: "3xl" }}
+              size={{ base: "3xl", md: "6xl" }}
               className={poppins.className}
               textTransform={"capitalize"}
-              verticalAlign={"baseline"}
-              textAlign={{ mobile: "center" }}
-              lineHeight={{ mobile: "1.48" }}
-              letterSpacing={{ mobile: "1px" }}
-              alignSelf={{ mobile: "normal", tablet: "start" }}
+              verticalAlign={{ base: "baseline" }}
+              textAlign={{ base: "center", md: "left" }}
+              lineHeight={{ base: "1.48" }}
+              letterSpacing={{ base: "1px" }}
+              alignSelf={{ base: "normal", md: "start" }}
               _dark={{ color: "white" }}
-              _light={{ color: "white" }} pl={1}
+              _light={{ color: "white" }} pl={{ base: 1, md: "100px" }}
             >
               Empowering<br />
               change through<br />
@@ -64,12 +65,13 @@ export default function Home() {
               advocacy
             </Heading>
 
-            <Container w={{ mobile: "container.xs" }} >
+            <Container w={{ base: "container.xs", md: "container.md" }} >
               <Text
-                textAlign={{ mobile: "center" }}
-                alignSelf={{ mobile: "center" }}
+                textAlign={{ base: "center", md: "left" }}
+                alignSelf={{ base: "center", }}
                 _dark={{ color: "white" }}
                 _light={{ color: "white" }}
+                w={{ base: "100%", md: "40%" }}
               >
                 We strive to break down barriers and stop the
                 stigma associated with incarceration through
@@ -78,12 +80,12 @@ export default function Home() {
               </Text>
             </Container>
 
-            <Button justifySelf={{ mobile: "baseline" }}
-              mt={{ mobile: "5dvh" }}
+            <Button justifySelf={{ base: "baseline", md: "start" }}
+              mt={{ base: "5dvh" }}
               bg={"teal.focusRing"}
               variant={"solid"}
               rounded={"md"}
-              size={{ mobile: "lg" }}
+              size={{ base: "lg" }}
               boxShadow={"0px 12px 24px -8px #3b4fe466"}
             >
               <ChakraLink asChild
@@ -100,9 +102,9 @@ export default function Home() {
 
       <Container fluid>
         <VStack>
-          <Container pt={{ mobile: "15dvh" }}>
+          <Container pt={{ base: "15dvh" }}>
             <Heading as="h2"
-              size={{ mobile: "2xl" }}
+              size={{ base: "2xl" }}
               fontWeight={"bold"}
               className={poppins.className}
               textAlign={"center"}
@@ -121,10 +123,10 @@ export default function Home() {
             bg={"brand.Mturquoise"}
             variant="solid"
             rounded="md"
-            size={{ mobile: "lg" }}
+            size={{ base: "lg" }}
             boxShadow={"0px 12px 24px -8px #3b4fe466"}
-            mt={{ mobile: "2dvh" }}
-            mb={{ mobile: "15dvh" }}
+            mt={{ base: "2dvh" }}
+            mb={{ base: "15dvh" }}
           >
             <ChakraLink asChild>
               <NextLink href="/about">
@@ -134,8 +136,8 @@ export default function Home() {
             </ChakraLink>
           </Button>
           <SimpleGrid
-            columns={{ mobile: 1, tablet: 2 }}
-            row={{ mobile: 1, tablet: 2 }}
+            columns={{ base: 1, md: 2 }}
+            row={{ base: 1, md: 2 }}
             pt={8}
             gap={8}
             css={{
@@ -153,44 +155,44 @@ export default function Home() {
         </VStack>
       </Container >
 
-      <Container bg={"brand.Mturquoise"} position={"relative"} h={{ mobile: "80dvh" }} mt={{ mobile: "36dvh" }}>
-        <Float placement={"top-end"} offsetY={"90px"} offsetX={"127px"}>
+      <Container bg={"brand.Mturquoise"} position={"relative"} h={{ base: "80dvh" }} mt={{ base: "36dvh" }}>
+        <Float placement={"top-end"} offsetY={{ base: "90px" }} offsetX={{ base: "127px" }}>
           <ChakraImage
             // height={"53%"}
             // width={"325px"}
             src={"/dots.webp"}
             alt={"Mokse hero image"}
             pt={0}
-            hideFrom={"mobile"}
+            hideBelow={"md"}
           />
           <Box
-            w={{ mobile: "255px" }}
-            h={{ mobile: "392px" }}
-            bgImage={{ mobile: "url('/home-backdrop-image.jpg')" }}
-            bgSize={{ mobile: "contain" }}
-            bgRepeat={{ mobile: "no-repeat" }}
+            w={{ base: "255px" }}
+            h={{ base: "392px" }}
+            bgImage={{ base: "url('/home-backdrop-image.jpg')" }}
+            bgSize={{ base: "contain" }}
+            bgRepeat={{ base: "no-repeat" }}
             rounded={"lg"}
-            bgBlendMode={{ mobile: "multiply" }}
+            bgBlendMode={{ base: "multiply" }}
             role="img"
             aria-label="Mokse hero image 1"
             position={"relative"}
           >
-            <Float placement={"top-start"} offsetY={{ mobile: "118px" }} offsetX={{ mobile: "-32px" }}>
+            <Float placement={"top-start"} offsetY={{ base: "118px" }} offsetX={{ base: "-32px" }}>
               <Box
-                w={{ mobile: "255px" }}
-                h={{ mobile: "392px" }}
-                bgImage={{ mobile: "url('/assets/home/Image-1-1.jpg')" }}
-                bgSize={{ mobile: "contain" }}
-                bgRepeat={{ mobile: "no-repeat" }}
+                w={{ base: "255px" }}
+                h={{ base: "392px" }}
+                bgImage={{ base: "url('/assets/home/Image-1-1.jpg')" }}
+                bgSize={{ base: "contain" }}
+                bgRepeat={{ base: "no-repeat" }}
                 rounded={"lg"}
-                bgBlendMode={{ mobile: "multiply" }}
+                bgBlendMode={{ base: "multiply" }}
                 role="img"
                 aria-label="Mokse hero image 2" />
             </Float>
           </Box>
         </Float>
 
-        <Container h={{ mobile: "46dvh" }} mt={{ mobile: "40dvh" }} >
+        <Container h={{ base: "46dvh" }} mt={{ base: "40dvh" }} >
           <HStack>
             <Heading as={"h2"}>
               <Text textStyle={"2xl"} >
@@ -199,7 +201,7 @@ export default function Home() {
               <Text textStyle={"2xl"}>- Get Involved!</Text>
             </Heading>
           </HStack>
-          <Box pt={{ mobile: "2dvh" }} >
+          <Box pt={{ base: "2dvh" }} >
             <Text >
               Are you passionate about helping justice-impacted
               individuals? We need compassionate volunteers to assist in
@@ -207,17 +209,17 @@ export default function Home() {
               administrative support.
             </Text>
           </Box>
-          <Button mt={{ mobile: "4dvh" }}
-            size={{ mobile: "lg" }} h={{ mobile: "6dvh" }}>
+          <Button mt={{ base: "4dvh" }}
+            size={{ base: "lg" }} h={{ base: "6dvh" }}>
             Get Involved <Icon name={"ArrowRight"} />
           </Button>
         </Container>
       </Container>
 
       <Container fluid centerContent>
-        <SimpleGrid
-          columns={{ mobile: 1, tablet: 2 }}
-          row={{ mobile: 1, tablet: 2 }}
+        <Grid
+          templateColumns={{ base: "repeat(1, 1fr)", md: "repeat(2, 1fr)" }}
+          templateRows={{ base: "repeat(1, 1fr)", md: "repeat(2, 1fr)" }}
           pt={8}
           gap={8}
           css={{
@@ -229,34 +231,34 @@ export default function Home() {
           {getInvolved.map((f) => (
             <FeatureCard key={f.title} {...f} />
           ))}
-        </SimpleGrid>
+        </Grid>
         <Button
           bg={"brand.Mturquoise"}
           variant="solid"
-          w={{ mobile: "45dvw" }}
-          h={{ mobile: "8dvh" }}
+          w={{ base: "45dvw", md: "20dvw" }}
+          h={{ base: "8dvh" }}
           alignSelf={"center"}
-          mt={{ mobile: 8 }}
-          mb={{ mobile: 16 }}
+          mt={{ base: 8 }}
+          mb={{ base: 16 }}
           boxShadow={"0px 12px 24px -8px #3b4fe466"}>
           <ChakraLink asChild>
             <NextLink href="https://www.paypal.com/donate/?hosted_button_id=G46WV8T5NG85A">
-              <Text _light={{ color: "white" }} textStyle={{ mobile: "lg" }}>Donate</Text>
+              <Text _light={{ color: "white" }} textStyle={{ base: "lg" }}>Donate</Text>
             </NextLink>
           </ChakraLink>
         </Button>
       </Container>
       <Container pb={14} fluid asChild>
         <Card.Root
-          flexDirection={{ mobile: "column" }}
-          borderRadius={"0"}
+          flexDirection={{ base: "column", md: "row" }}
           gap={6}
           bg="rgba(0, 0, 0, 0.0)"
-          w={{ mobile: "sm" }}
+          p={10}
+          maxW={{ base: "sm", md: "md", laptop: "4xl" }}
         >
-          <Card.Body w={{}}>
+          <Card.Body w={{ base: "100%", md: "100%" }} gap={4} p={0}>
             <Heading
-              textStyle={{ mobile: "3xl" }}
+              textStyle={{ base: "3xl" }}
               className={poppins.className}
               textAlign={"left"}
               verticalAlign={"baseline"}
@@ -269,115 +271,21 @@ export default function Home() {
           </Card.Body>
 
           <AspectRatio
-            maxW={{ mobile: "100%" }} maxH={{ mobile: "450px" }} ratio={16 / 9}>
+            maxW={{ base: "100%", md: "100%" }}
+            minW={{ base: "100%", md: "100px" }}
+            maxH={{ base: "450px", md: "100%" }}
+            minH={{ base: "100%", md: "100px" }}
+            ratio={16 / 9}>
             <iframe
               src="https://www.youtube-nocookie.com/embed/p2q--KoXnXA?si=6mz92ZtuwqfrvnSZ"
               title="YouTube video player"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-              referrerPolicy="strict-origin-when-cross-origin"
+              allowFullScreen
             />
           </AspectRatio>
         </Card.Root>
       </Container >
 
-      <Container fluid centerContent>
-        <SimpleGrid columns={{ mobile: 1 }} gap={20} pt={8}>
-          <GridItem colSpan={{ mobile: 1 }}>
-            <Box
-              h={{ mobile: "230px" }}
-              w={{ mobile: "343px" }}
-              bgImage={"url('/assets/home/IMG_0997-1-1024x683.webp')"}
-              bgRepeat={{ mobile: "no-repeat" }}
-              backgroundPosition={"center"}
-              bgSize={{ mobile: "100%" }}
-              role="img"
-              aria-label="Mokse hero image 1"
-              rounded="md"
-            />
-          </GridItem>
-          <GridItem colSpan={{ mobile: 1 }}>
-            <Box
-              h={{ mobile: "230px" }}
-              w={{ mobile: "343px" }}
-              bgImage={"url('/assets/home/IMG_1004-1024x683.webp')"}
-              bgRepeat={{ mobile: "no-repeat" }}
-              backgroundPosition={"center"}
-              bgSize={{ mobile: "100%" }}
-              role="img"
-              aria-label="Mokse hero image 1"
-              rounded="md"
-            />
-          </GridItem>
-          <GridItem colSpan={{ mobile: 1 }}>
-            <Center
-              w={{ mobile: "343px" }}
-              h={{ mobile: "230px" }}>
-              <Box
-                h={{ mobile: "125%" }}
-                aspectRatio={{ mobile: "square" }}
-                bgImage={"url('/assets/home/IMG_1011-300x300.webp')"}
-                bgRepeat={{ mobile: "no-repeat" }}
-                backgroundPosition={"center"}
-                bgSize={{ mobile: "cover" }}
-                role="img"
-                aria-label="Mokse hero image 1"
-                rounded="md"
-              />
-            </Center>
-          </GridItem>
-          <GridItem colSpan={{ mobile: 1 }}>
-            <Center
-              w={{ mobile: "343px" }}
-              h={{ mobile: "230px" }}>
-              <Box
-                h={{ mobile: "125%" }}
-                aspectRatio={{ mobile: "square" }}
-                bgImage={"url('/assets/home/IMG_1012-300x300.webp')"}
-                bgRepeat={{ mobile: "no-repeat" }}
-                backgroundPosition={"center"}
-                bgSize={{ mobile: "cover" }}
-                role="img"
-                aria-label="Mokse hero image 1"
-                rounded="md"
-              />
-            </Center>
-          </GridItem>
-          <GridItem colSpan={{ mobile: 1 }}>
-            <Center
-              w={{ mobile: "343px" }}
-              h={{ mobile: "230px" }}>
-              <Box
-                h={{ mobile: "125%" }}
-                aspectRatio={{ mobile: "square" }}
-                bgImage={"url('/assets/home/IMG_1027-300x300.webp')"}
-                bgRepeat={{ mobile: "no-repeat" }}
-                backgroundPosition={"center"}
-                bgSize={{ mobile: "cover" }}
-                role="img"
-                aria-label="Mokse hero image 1"
-                rounded="md"
-              />
-            </Center>
-          </GridItem>
-          <GridItem >
-            <Center
-              w={{ mobile: "343px" }}
-              h={{ mobile: "230px" }}>
-              <Box
-                h={{ mobile: "125%" }}
-                aspectRatio={{ mobile: "square" }}
-                bgImage={"url('/assets/home/IMG_0995-300x300.webp')"}
-                bgRepeat={{ mobile: "no-repeat" }}
-                backgroundPosition={"center"}
-                bgSize={{ mobile: "cover" }}
-                role="img"
-                aria-label="Mokse hero image 1"
-                rounded="md"
-              />
-            </Center>
-          </GridItem>
-        </SimpleGrid>
-      </Container>
+      <Pictures />
     </VStack >
   );
 }
diff --git a/app/(Public Pages)/(Programs)/programs/navigators-network/page.tsx b/app/(Public Pages)/(Programs)/programs/navigators-network/page.tsx
index 2f270ab..5033309 100644
--- a/app/(Public Pages)/(Programs)/programs/navigators-network/page.tsx	
+++ b/app/(Public Pages)/(Programs)/programs/navigators-network/page.tsx	
@@ -1,6 +1,6 @@
 "use client";
 import { HeaderTemplate, PageBuilder, SectionTemplate } from '@/components/page-builder/template';
-import { Button, Link as ChakraLink, Text, Image, HStack, Center, VStack, Box, Heading, List, Card } from "@chakra-ui/react";
+import { Button, Link as ChakraLink, Text, Image as ChakraImage, Stack, Center, VStack, Box, Heading, List, Card } from "@chakra-ui/react";
 import NextLink from "next/link";
 import NextImage from "next/image";
 
@@ -9,127 +9,157 @@ export default function NavigatorsNetwork() {
         <PageBuilder>
             <HeaderTemplate
                 title="Navigators Network"
-                imageHeight={"52.1vh"}
+                imageHeight={{ base: "40vh", md: "52.1vh" }}
                 image="/assets/navigators-network/background.webp"
                 imageLabel="Navigators Network Hero"
-                description="A Connected Hub for Stronger Community Support “Find Your Way”"
+                description='A Connected Hub for Stronger Community Support “Find Your Way”'
             />
+
+            {/* SECTION 1: Intro */}
             <SectionTemplate>
-                <HStack>
-                    <Image asChild alt="">
-                        <NextImage
-                            src="/assets/navigators-network/partners-shaking-hands.webp"
-                            alt="Navigators Network Background"
-                            width={575} // start was 1024 //300w // 768w  // 1536 
-                            height={383} // start 683
-                        />
-                    </Image>
-                    <Heading size={"4xl"}>Navigator&apos;s Network</Heading>
-                    <Text>Navigator&apos;s Network is launching as a collaboration platform for organizations that want to improve access, coordination, and real-world outcomes.</Text>
-                    <Button>
-                        <ChakraLink asChild>
-                            <NextLink href={"https://forms.office.com/Pages/ResponsePage.aspx?id=ek_Mq-3o7UmR4e2p9bxT6nRWmhssVxdCt8_vzCmu28ZUMkMwTFBIT09VMDVEVlpMOVlHU0NGVUVCWi4u"}>
-                                <Text color={'black'}>Get Launch Updates</Text>
-                            </NextLink>
-                        </ChakraLink>
-                    </Button>
-                </HStack>
-            </SectionTemplate>
-            <SectionTemplate>
-                <HStack>
-                    <Heading size={'4xl'}>Built for Organizations That Want to Work Better Together</Heading>
-                    <Text>Navigator&apos;s Network connects:</Text>
-                    <List.Root>
-                        <List.Item>Service providers</List.Item>
-                        <List.Item>Government and community agencies</List.Item>
-                        <List.Item>Community-focused businesses</List.Item>
-                    </List.Root>
-                    <Text>So they can:</Text>
-                    <List.Root>
-                        <List.Item>Share reliable referral pathways</List.Item>
-                        <List.Item>Coordinate support across systems</List.Item>
-                        <List.Item>Work from the same playbook</List.Item>
-                    </List.Root>
-                    <Image asChild alt="">
-                        <NextImage
-                            src="/assets/navigators-network/women-shaking-hands-outside.webp"
-                            alt="Women shaking hands"
-                            width={550}
-                            height={593}
-                        />
-                    </Image>
-                </HStack>
+                <Stack direction={{ base: "column", md: "row" }} gap={{ base: 8, md: 12 }} align="center">
+                    <Box w={{ base: "100%", md: "50%" }}>
+                        <ChakraImage asChild borderRadius="md" overflow="hidden">
+                            <NextImage
+                                src="/assets/navigators-network/partners-shaking-hands.webp"
+                                alt="Navigators Network Background"
+                                width={575}
+                                height={383}
+                                style={{ width: "100%", height: "auto", objectFit: "cover" }}
+                            />
+                        </ChakraImage>
+                    </Box>
+                    <VStack w={{ base: "100%", md: "50%" }} align="flex-start" gap={6}>
+                        <Heading size={{ base: "3xl", md: "4xl" }}>Navigator&apos;s Network</Heading>
+                        <Text textStyle={{ base: "md", md: "lg" }}>
+                            Navigator&apos;s Network is launching as a collaboration platform for organizations that want to improve access, coordination, and real-world outcomes.
+                        </Text>
+                        <Button colorScheme="blue" size="lg">
+                            <ChakraLink asChild _hover={{ textDecoration: "none" }}>
+                                <NextLink href="https://forms.office.com/Pages/ResponsePage.aspx?id=ek_Mq-3o7UmR4e2p9bxT6nRWmhssVxdCt8_vzCmu28ZUMkMwTFBIT09VMDVEVlpMOVlHU0NGVUVCWi4u" target="_blank">
+                                    <Text color="black" fontWeight="medium">Get Launch Updates</Text>
+                                </NextLink>
+                            </ChakraLink>
+                        </Button>
+                    </VStack>
+                </Stack>
             </SectionTemplate>
+
+            {/* SECTION 2: Built for Organizations */}
             <SectionTemplate>
-                <Center>
-                    <Card.Root gap={40} flexDirection={"row"} border={0}>
-                        <Image asChild alt="">
+                <Stack direction={{ base: "column-reverse", md: "row" }} gap={{ base: 8, md: 16 }} align="center">
+                    {/* Grouped the text and lists together so they form one half of the layout */}
+                    <VStack w={{ base: "100%", md: "50%" }} align="flex-start" gap={6}>
+                        <Heading size={{ base: "3xl", md: "4xl" }}>
+                            Built for Organizations That Want to Work Better Together
+                        </Heading>
+
+                        <Box>
+                            <Text fontWeight="bold" mb={2}>Navigator&apos;s Network connects:</Text>
+                            <List.Root ps={5} spaceY={1}>
+                                <List.Item>Service providers</List.Item>
+                                <List.Item>Government and community agencies</List.Item>
+                                <List.Item>Community-focused businesses</List.Item>
+                            </List.Root>
+                        </Box>
+
+                        <Box>
+                            <Text fontWeight="bold" mb={2}>So they can:</Text>
+                            <List.Root ps={5} spaceY={1}>
+                                <List.Item>Share reliable referral pathways</List.Item>
+                                <List.Item>Coordinate support across systems</List.Item>
+                                <List.Item>Work from the same playbook</List.Item>
+                            </List.Root>
+                        </Box>
+                    </VStack>
+
+                    <Box w={{ base: "100%", md: "50%" }}>
+                        <ChakraImage asChild borderRadius="md" overflow="hidden">
                             <NextImage
-                                src="/assets/navigators-network/top-view-convo.webp"
-                                alt="Top view of co-workers talking"
+                                src="/assets/navigators-network/women-shaking-hands-outside.webp"
+                                alt="Women shaking hands"
                                 width={550}
-                                height={743}
+                                height={593}
+                                style={{ width: "100%", height: "auto", objectFit: "cover" }}
                             />
-                        </Image>
-
-                        <Center>
-                            <VStack>
-                                <Heading size={'4xl'} maxWidth={"500px"} fontWeight={700}>
-                                    Launching Soon — Now Onboarding Partners
-                                </Heading>
-                                <Card.Title>We are actively building the platform and onboarding early partners.</Card.Title>
-
-                                <VStack w={"full"} gap={5} alignItems={'left'}><Card.Description textStyle={"lg"}>
-                                    Organizations that sign up now will receive:
-                                    <VStack w={"full"} gap={5} alignItems={"self-start"}>
-                                        <List.Root>
-                                            <List.Item>Early access opportunities</List.Item>
-                                            <List.Item>Partnership details</List.Item>
-                                            <List.Item>Feature updates as they go live</List.Item>
-                                            <List.Item>Shared resource announcements</List.Item>
-                                        </List.Root>
-                                    </VStack>
-                                </Card.Description></VStack>
+                        </ChakraImage>
+                    </Box>
+                </Stack>
+            </SectionTemplate>
 
-                            </VStack>
-                        </Center>
+            {/* SECTION 3: Launching Soon */}
+            <SectionTemplate>
+                <Card.Root variant="unstyled" w="full">
+                    <Stack direction={{ base: "column", md: "row" }} gap={{ base: 8, md: 16 }} align="center">
+                        <Box w={{ base: "100%", md: "50%" }}>
+                            <ChakraImage asChild borderRadius="md" overflow="hidden">
+                                <NextImage
+                                    src="/assets/navigators-network/top-view-convo.webp"
+                                    alt="Top view of co-workers talking"
+                                    width={550}
+                                    height={743}
+                                    style={{ width: "100%", height: "auto", objectFit: "cover" }}
+                                />
+                            </ChakraImage>
+                        </Box>
 
-                    </Card.Root>
-                </Center>
+                        <VStack w={{ base: "100%", md: "50%" }} align="flex-start" gap={6}>
+                            <Heading size={{ base: "3xl", md: "4xl" }} fontWeight={700}>
+                                Launching Soon — Now Onboarding Partners
+                            </Heading>
+                            <Text textStyle="lg" fontWeight="medium" color="fg.muted">
+                                We are actively building the platform and onboarding early partners.
+                            </Text>
 
+                            <Box>
+                                <Text textStyle="lg" mb={3}>Organizations that sign up now will receive:</Text>
+                                <List.Root ps={5} spaceY={2}>
+                                    <List.Item>Early access opportunities</List.Item>
+                                    <List.Item>Partnership details</List.Item>
+                                    <List.Item>Feature updates as they go live</List.Item>
+                                    <List.Item>Shared resource announcements</List.Item>
+                                </List.Root>
+                            </Box>
+                        </VStack>
+                    </Stack>
+                </Card.Root>
             </SectionTemplate >
 
+            {/* SECTION 4: Get In Touch */}
             <SectionTemplate>
-                <Center>
-                    <Card.Root gap={40} flexDirection={"row"} border={0}>
-                        <Center>
-                            <VStack>
-                                <Heading size={"6xl"}>Get In Touch</Heading>
-                                <VStack w={"full"} gap={5} alignItems={'left'}>
-                                    <Card.Title color={"#6E7180"}>Christiana "Sunshine" Longway</Card.Title>
-                                    <Card.Description color={"#6E7180"} textStyle={"lg"}>Sunshine@mokse.org</Card.Description>
-                                    <Button bg={'#43c0b3'}>
-                                        {/*BUTTON GOES TO TOP OF PAGE */}
-                                        Launching April 23rd, 2026
-                                    </Button>
-                                </VStack>
+                <Card.Root variant="unstyled" w="full">
+                    <Stack direction={{ base: "column", md: "row" }} gap={{ base: 8, md: 16 }} align="center">
+                        <VStack w={{ base: "100%", md: "50%" }} align="flex-start" gap={6}>
+                            <Heading size={{ base: "4xl", md: "6xl" }}>Get In Touch</Heading>
 
+                            <VStack align="flex-start" gap={2}>
+                                <Text fontWeight="bold" fontSize="xl" color="#6E7180">
+                                    Christiana "Sunshine" Longway
+                                </Text>
+                                <Text textStyle="lg" color="#6E7180">
+                                    Sunshine@mokse.org
+                                </Text>
                             </VStack>
-                        </Center>
 
-                        <Image asChild alt="">
-                            <NextImage
-                                src='/assets/navigators-network/women-holding-map.webp'
-                                alt='Women holding map'
-                                width={600}
-                                height={603}
-                            />
-                        </Image>
-                    </Card.Root>
-                </Center>
+                            <Button bg="#43c0b3" color="white" size="lg" mt={4} _hover={{ bg: "#359c91" }}>
+                                Launching April 23rd, 2026
+                            </Button>
+                        </VStack>
 
+                        <Box w={{ base: "100%", md: "50%" }}>
+                            <ChakraImage asChild borderRadius="md" overflow="hidden">
+                                <NextImage
+                                    src='/assets/navigators-network/women-holding-map.webp'
+                                    alt='Women holding map'
+                                    width={600}
+                                    height={603}
+                                    style={{ width: "100%", height: "auto", objectFit: "cover" }}
+                                />
+                            </ChakraImage>
+                        </Box>
+                    </Stack>
+                </Card.Root>
             </SectionTemplate>
-        </PageBuilder >
-
-    )
+        </PageBuilder>
+    );
 }
\ No newline at end of file
diff --git a/app/(Public Pages)/(Programs)/programs/page.tsx b/app/(Public Pages)/(Programs)/programs/page.tsx
index d2c64ab..886ed15 100644
--- a/app/(Public Pages)/(Programs)/programs/page.tsx	
+++ b/app/(Public Pages)/(Programs)/programs/page.tsx	
@@ -1,181 +1,242 @@
 "use client";
-import { BodyTemplate, HeaderTemplate, PageBuilder, SectionTemplate } from "@/components/page-builder/template";
-import { Box, Button, Card, Center, Container, Flex, Float, HStack, Portal, ScrollArea, Stack, Tabs, Tag, VStack, Icon as ChakraIcon, ClientOnly, Image } from "@chakra-ui/react";
+import { HeaderTemplate, PageBuilder, SectionTemplate } from "@/components/page-builder/template";
+import { Box, Button, Center, Flex, Float, HStack, Stack, Tabs, Tag, ClientOnly, Image as ChakraImage, SimpleGrid, useBreakpointValue } from "@chakra-ui/react";
 import NavigatorsNetwork from "./navigators-network/page";
 import StopTheStigma from "./stop-the-stigma/page";
 import NextImage from "next/image";
 import { Tooltip } from "@/components/ui/tooltip";
 import { Icon } from "@/components/ui/icons/icon";
-import { useState, useRef } from "react";
-import { usePathname } from "next/navigation";
-import { FaAngleRight } from "react-icons/fa6";
-
+import { useState } from "react";
 
 export default function Programs() {
     const [showPrograms, setShowPrograms] = useState(true);
+    const orientation = useBreakpointValue<"horizontal" | "vertical">({
+        base: "horizontal",
+        md: "vertical",
+    });
+
     return (
         <PageBuilder>
-            <Card.Root>
-                <HeaderTemplate
-                    imageHeight="8vh"
-                />
-                <Tabs.Root defaultValue="Programs" orientation="vertical" variant={'outline'}>
-                    <Flex direction={'row'} gap={0}>
-                        <Tabs.List minW={'9vw'} hidden={!showPrograms}>
-                            <Tabs.Trigger value="Programs" _selected={{
-                                bg: "blue.500",
-                                color: "white",
-                            }}>
-                                All Programs
-                            </Tabs.Trigger>
-                            <Tabs.Trigger value="Stop-The-Stigma" _selected={{
-                                bg: "blue.500",
-                                color: "white",
-                            }}>
-                                Stop The Stigma
-                            </Tabs.Trigger>
-                            <Tabs.Trigger value="Navigators-Network" _selected={{
-                                bg: "blue.500",
-                                color: "white",
-                            }}>
-                                Navigators Network
-                            </Tabs.Trigger>
-                        </Tabs.List>
-                        <Tabs.Content value="Programs" p={0} position={'relative'}>
-                            <Float placement={"top-start"} zIndex={1} offsetX={"48px"} offsetY={5}>
-                                <Button onClick={() => setShowPrograms(!showPrograms)}><ChakraIcon as={FaAngleRight} rotateX={"90deg"} /> Go Back</Button>
-                            </Float>
-                            <Container fluid>
+            {/* 1. Mobile First Header: Tall on phones, shorter on desktops */}
+            <HeaderTemplate
+                title="Our Programs"
+                imageHeight={{ base: "15vh", md: "12vh", lg: "8vh" }}
+            />
+
+            {/* 2. Mobile First Wrapper: Auto height on phones to prevent scrolling bugs, fixed min-height on desktop */}
+            <Flex w="full" minH={{ base: "auto", lg: "calc(100vh - 8vh)" }} bg="bg.muted">
+
+                {/* 3. Mobile First Tabs: Horizontal on phones/tablets, Vertical only on large desktops */}
+                <Tabs.Root
+                    defaultValue="Programs"
+                    orientation={orientation}
+                    variant="line"
+                    w="full"
+                    display="flex"
+                    flexDirection={{ base: "column", lg: "row" }}
+                >
+                    <Tabs.List
+                        display="flex"
+                        flexDirection={{ base: "row", lg: "column" }}
+
+                        // Mobile: Always 100% width. Desktop: Animates between 280px and 0px.
+                        w={{ base: "100%", lg: showPrograms ? "280px" : "0px" }}
+                        minW={{ base: "100%", lg: showPrograms ? "280px" : "0px" }}
+
+                        // Mobile: Always visible. Desktop: Fades out when closed.
+                        opacity={{ base: 1, lg: showPrograms ? 1 : 0 }}
+
+                        // Mobile: Standard padding. Desktop: Shrinks to 0 when closed.
+                        p={{ base: 2, md: 4, lg: showPrograms ? 4 : 0 }}
+
+                        // Mobile: Bottom border. Desktop: Right border.
+                        borderRightWidth={{ base: "0px", lg: showPrograms ? "1px" : "0px" }}
+                        borderBottomWidth={{ base: "1px", lg: "0px" }}
+                        borderColor="border.subtle"
+                        bg="bg.panel"
+
+                        // Mobile: Allows native horizontal swiping. Desktop: Hides overflow for animation.
+                        overflowX={{ base: "auto", lg: "hidden" }}
+                        overflowY="hidden"
+
+                        // Mobile: NO transition (prevents lag). Desktop: Smooth slide transition.
+                        transition={{ base: "none", lg: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)" }}
+                        gap={{ base: 4, lg: 2 }}
+                    >
+                        <Tabs.Trigger
+                            value="Programs"
+                            w={{ base: "auto", lg: "full" }}
+                            justifyContent={{ base: "center", lg: "flex-start" }}
+                            flexShrink={0} // CRITICAL: Prevents text from squishing on small phones
+                            whiteSpace="nowrap"
+                        >
+                            All Programs
+                        </Tabs.Trigger>
+                        <Tabs.Trigger
+                            value="Stop-The-Stigma"
+                            w={{ base: "auto", lg: "full" }}
+                            justifyContent={{ base: "center", lg: "flex-start" }}
+                            flexShrink={0}
+                            whiteSpace="nowrap"
+                        >
+                            Stop The Stigma
+                        </Tabs.Trigger>
+                        <Tabs.Trigger
+                            value="Navigators-Network"
+                            w={{ base: "auto", lg: "full" }}
+                            justifyContent={{ base: "center", lg: "flex-start" }}
+                            flexShrink={0}
+                            whiteSpace="nowrap"
+                        >
+                            Navigators Network
+                        </Tabs.Trigger>
+                    </Tabs.List>
+
+                    {/* MAIN CONTENT PANE */}
+                    <Box
+                        flex="1"
+                        position="relative"
+                        w="full"
+                        bg="bg.canvas"
+                        transition={{ base: "none", lg: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)" }}
+                    >
+
+                        {/* Universal Toggle Button - Hidden on mobile/tablet, only appears on large screens */}
+                        <Float placement="top-start" offsetX={6} offsetY={6} display={{ base: "none", lg: "flex" }} zIndex={10}>
+                            <Button
+                                size="sm"
+                                variant="surface"
+                                boxShadow="sm"
+                                onClick={() => setShowPrograms(!showPrograms)}
+                            >
+                                <Icon
+                                    name="AngleRight"
+                                    style={{ transform: showPrograms ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)" }}
+                                />
+                                {showPrograms ? "Collapse" : "Expand"} Menu
+                            </Button>
+                        </Float>
+
+                        <Tabs.Content value="Programs" p={{ base: 4, md: 8, lg: 10 }} pt={{ lg: 20 }} h="full">
+                            <Box maxW="7xl" mx="auto">
                                 <SectionTemplate
-                                    title={"Programs"}
-                                    description={"Discover our innovative programs designed to empower and support justice-impacted individuals on their journey to reintegration and success. Explore our range of services, resources, and opportunities to get involved and make a positive impact in your community."} >
-                                    <ScrollArea.Root height={"4xl"} maxW={"full"} mt={8}>
-                                        <ScrollArea.Viewport>
-                                            <ScrollArea.Content spaceY="4" textStyle="sm">
-
-                                                <Flex gapX={4} gapY={4}>
-                                                    <Card.Root
-                                                        borderWidth=".5px"
-                                                        borderRadius="md"
-                                                        shadow="xs"
-                                                        w={'xs'}
-                                                        h={'sm'}
-                                                    >
-                                                        <Center>
-                                                            <ClientOnly fallback={<Box boxSize={'xs'} bg={"blue.500"} />}>
-                                                                <Image asChild>
-                                                                    <NextImage
-                                                                        src={"/assets/stop-the-stigma/EFCO STS.webp"}
-                                                                        alt="MOKSE Logo"
-                                                                        width={180}
-                                                                        height={50}
-                                                                    />
-                                                                </Image>
-                                                            </ClientOnly>
-                                                        </Center>
-
-                                                        <Card.Body p={4}>
-                                                            <Stack>
-                                                                <strong>Stop The Stigma</strong>
-                                                                <Box fontSize="sm" color="gray.500">
-                                                                    description
-                                                                </Box>
-                                                                <Stack direction={"row"} gap={2}>
-                                                                    <Tooltip content={"test"}>
-                                                                        <Tag.Root size={"lg"} maxW={"xs"}>
-                                                                            <Tag.Label>
-                                                                                Label
-                                                                            </Tag.Label>
-                                                                        </Tag.Root>
-                                                                    </Tooltip>
-                                                                    <Tag.Root size={"lg"} maxW={"xs"}>
-                                                                        <Tag.Label>{"Category"}</Tag.Label>
-                                                                    </Tag.Root>
-                                                                </Stack>
-                                                            </Stack>
-                                                        </Card.Body>
-                                                    </Card.Root>
-                                                    <Card.Root
-                                                        borderWidth=".5px"
-                                                        borderRadius="md"
-                                                        shadow="xs"
-                                                        flexDirection="column"
-                                                        w={'xs'}
-                                                        h={'sm'}
-                                                    >
-                                                        <Center>
-                                                            <ClientOnly fallback={<Box boxSize={'xs'} bg={"blue.500"} />}>
-                                                                <Image asChild>
-                                                                    <NextImage
-                                                                        src={"/assets/navigators-network/EFCO BookShire.png"}
-                                                                        alt="MOKSE Logo"
-                                                                        width={225}
-                                                                        height={50}
-                                                                    />
-                                                                </Image>
-                                                            </ClientOnly>
-                                                        </Center>
-                                                        <Card.Body p={4}>
-                                                            <Stack>
-                                                                <strong>Navigators Network</strong>
-                                                                <Box fontSize="sm" color="gray.500">
-                                                                    description
-                                                                </Box>
-                                                                <Stack direction={"row"} gap={2}>
-                                                                    <Tooltip content={"test"}>
-                                                                        <Tag.Root size={"lg"} maxW={"xs"}>
-                                                                            <Tag.Label>
-                                                                                Label
-                                                                            </Tag.Label>
-                                                                        </Tag.Root>
-                                                                    </Tooltip>
-                                                                    <Tag.Root size={"lg"} maxW={"xs"}>
-                                                                        <Tag.Label>{"Category"}</Tag.Label>
-                                                                    </Tag.Root>
-                                                                </Stack>
-                                                            </Stack>
-                                                        </Card.Body>
-                                                    </Card.Root></Flex>
-                                            </ScrollArea.Content>
-                                        </ScrollArea.Viewport>
-                                        <ScrollArea.Corner />
-                                    </ScrollArea.Root>
+                                    title="Programs"
+                                    description="Discover our innovative programs designed to empower and support justice-impacted individuals on their journey to reintegration and success. Explore our range of services, resources, and opportunities to get involved and make a positive impact in your community."
+                                >
+                                    {/* 4. Mobile First Grid: 1 column on phones, 2 columns on tablets/desktops */}
+                                    <SimpleGrid columns={{ base: 1, md: 2 }} gap={{ base: 6, md: 8 }} mt={{ base: 8, md: 10 }} w="full">
+
+                                        {/* Program Card 1 */}
+                                        <Box
+                                            borderWidth="1px"
+                                            borderColor="border.subtle"
+                                            borderRadius="xl"
+                                            shadow="sm"
+                                            bg="bg.panel"
+                                            w="full"
+                                            overflow="hidden"
+                                            transition="transform 0.2s, box-shadow 0.2s"
+                                            _hover={{ transform: "translateY(-4px)", shadow: "md" }}
+                                        >
+                                            <Center bg="gray.100" p={6} minH={{ base: "120px", md: "140px" }}>
+                                                <ClientOnly fallback={<Box boxSize="100px" bg="blue.500" />}>
+                                                    <ChakraImage asChild>
+                                                        <NextImage
+                                                            src="/assets/stop-the-stigma/EFCO STS.webp"
+                                                            alt="Stop The Stigma Logo"
+                                                            width={180}
+                                                            height={50}
+                                                            style={{ objectFit: "contain", maxWidth: "100%", height: "auto" }}
+                                                        />
+                                                    </ChakraImage>
+                                                </ClientOnly>
+                                            </Center>
+                                            <Box p={{ base: 5, md: 6 }}>
+                                                <Stack gap={3}>
+                                                    <Box fontWeight="bold" fontSize={{ base: "lg", md: "xl" }}>Stop The Stigma</Box>
+                                                    <Box fontSize={{ base: "sm", md: "md" }} color="fg.muted" lineClamp={3}>
+                                                        An annual conference centered on the stigma of disability and incarceration.
+                                                    </Box>
+                                                    <HStack gap={2} mt={2} wrap="wrap">
+                                                        <Tooltip content="Conference">
+                                                            <Tag.Root size={{ base: "sm", md: "md" }} variant="subtle" colorPalette="blue">
+                                                                <Tag.Label>Conference</Tag.Label>
+                                                            </Tag.Root>
+                                                        </Tooltip>
+                                                        <Tag.Root size={{ base: "sm", md: "md" }} variant="outline">
+                                                            <Tag.Label>Advocacy</Tag.Label>
+                                                        </Tag.Root>
+                                                    </HStack>
+                                                </Stack>
+                                            </Box>
+                                        </Box>
+
+                                        {/* Program Card 2 */}
+                                        <Box
+                                            borderWidth="1px"
+                                            borderColor="border.subtle"
+                                            borderRadius="xl"
+                                            shadow="sm"
+                                            bg="bg.panel"
+                                            w="full"
+                                            overflow="hidden"
+                                            transition="transform 0.2s, box-shadow 0.2s"
+                                            _hover={{ transform: "translateY(-4px)", shadow: "md" }}
+                                        >
+                                            <Center bg="gray.100" p={6} minH={{ base: "120px", md: "140px" }}>
+                                                <ClientOnly fallback={<Box boxSize="100px" bg="blue.500" />}>
+                                                    <ChakraImage asChild>
+                                                        <NextImage
+                                                            src="/assets/navigators-network/EFCO BookShire.png"
+                                                            alt="Navigators Network Logo"
+                                                            width={225}
+                                                            height={50}
+                                                            style={{ objectFit: "contain", maxWidth: "100%", height: "auto" }}
+                                                        />
+                                                    </ChakraImage>
+                                                </ClientOnly>
+                                            </Center>
+                                            <Box p={{ base: 5, md: 6 }}>
+                                                <Stack gap={3}>
+                                                    <Box fontWeight="bold" fontSize={{ base: "lg", md: "xl" }}>Navigators Network</Box>
+                                                    <Box fontSize={{ base: "sm", md: "md" }} color="fg.muted" lineClamp={3}>
+                                                        A collaboration platform for organizations that want to improve access and coordination.
+                                                    </Box>
+                                                    <HStack gap={2} mt={2} wrap="wrap">
+                                                        <Tooltip content="Network">
+                                                            <Tag.Root size={{ base: "sm", md: "md" }} variant="subtle" colorPalette="teal">
+                                                                <Tag.Label>Network</Tag.Label>
+                                                            </Tag.Root>
+                                                        </Tooltip>
+                                                        <Tag.Root size={{ base: "sm", md: "md" }} variant="outline">
+                                                            <Tag.Label>Collaboration</Tag.Label>
+                                                        </Tag.Root>
+                                                    </HStack>
+                                                </Stack>
+                                            </Box>
+                                        </Box>
+
+                                    </SimpleGrid>
                                 </SectionTemplate>
-                            </Container>
+                            </Box>
                         </Tabs.Content>
-                        <Tabs.Content value="Navigators-Network" p={0} position={'relative'}>
-                            <Float placement={"top-start"} zIndex={1} offsetX={"48px"} offsetY={5}>
-                                <Button onClick={() => setShowPrograms(!showPrograms)} ><ChakraIcon><Icon name={"AngleRight"} /></ChakraIcon> Go Back</Button>
-                            </Float>
-                            <ScrollArea.Root height={"4xl"} maxW="full">
-                                <ScrollArea.Viewport>
-                                    <ScrollArea.Content spaceY="1" textStyle="sm">
-                                        <NavigatorsNetwork />
-                                    </ScrollArea.Content>
-                                </ScrollArea.Viewport>
-                                <ScrollArea.Corner />
-                            </ScrollArea.Root>
+
+                        {/* Sub-Components */}
+                        <Tabs.Content value="Navigators-Network" p={0} h="full">
+                            <Box h="full" overflowY="auto">
+                                <NavigatorsNetwork />
+                            </Box>
                         </Tabs.Content>
-                        <Tabs.Content value="Stop-The-Stigma" position={'relative'} p={0} >
-                            <Float placement={"top-start"} zIndex={1} offsetX={"48px"} offsetY={5}>
-                                <Button onClick={() => setShowPrograms(!showPrograms)} ><ChakraIcon rotateX={180} asChild><Icon name={"AngleRight"} /></ChakraIcon> Go Back</Button>
-                            </Float>
-                            <ScrollArea.Root height={"4xl"} maxW="full">
-                                <ScrollArea.Viewport>
-                                    <ScrollArea.Content spaceY="1" textStyle="sm" position={'relative'}>
-                                        <StopTheStigma />
-                                    </ScrollArea.Content>
-                                </ScrollArea.Viewport>
-                                <ScrollArea.Scrollbar>
-                                    <ScrollArea.Thumb />
-                                </ScrollArea.Scrollbar>
-                                <ScrollArea.Corner />
-                            </ScrollArea.Root>
+
+                        <Tabs.Content value="Stop-The-Stigma" p={0} h="full">
+                            <Box h="full" overflowY="auto">
+                                <StopTheStigma />
+                            </Box>
                         </Tabs.Content>
-                    </Flex >
-                </Tabs.Root >
-            </Card.Root>
 
-        </PageBuilder >
-    )
+                    </Box>
+                </Tabs.Root>
+            </Flex>
+        </PageBuilder>
+    );
 }
\ No newline at end of file
diff --git a/app/(Public Pages)/(Programs)/programs/stop-the-stigma/page.tsx b/app/(Public Pages)/(Programs)/programs/stop-the-stigma/page.tsx
index fef2ee2..367b48b 100644
--- a/app/(Public Pages)/(Programs)/programs/stop-the-stigma/page.tsx	
+++ b/app/(Public Pages)/(Programs)/programs/stop-the-stigma/page.tsx	
@@ -9,7 +9,7 @@ import {
   Text,
   VStack,
   HStack,
-  Image,
+  Image as ChakraImage,
   Heading,
   Button,
   Strong,
@@ -17,8 +17,6 @@ import {
   Float,
   Box,
   Container,
-  Flex,
-  AbsoluteCenter,
   SimpleGrid,
 } from "@chakra-ui/react";
 import NextImage from "next/image";
@@ -27,206 +25,201 @@ import { poppins } from "@/components/ui/fonts";
 import {
   HeaderTemplate,
   PageBuilder,
-  BodyTemplate,
   SectionTemplate,
 } from "@/components/page-builder/template";
 import FeatureCard from "@/components/home/feature-card";
 
-import {
-  FaRegObjectGroup as FaObjectGroup,
-  FaRegListAlt as FaListAlt,
-  FaRegNewspaper as FaNewspaper,
-  FaRegKeyboard as FaKeyboard,
-} from "react-icons/fa";
-import { MdBrightness5 as MdSun } from "react-icons/md";
 export default function StopTheStigma() {
-  const [countdownTarget, setCountdownTarget] = useState<{
-    target: number;
-  }>({
-    // Set the date we're counting down to
+  const [countdownTarget] = useState({
     target: new Date("Feb 19, 2026 00:00:00").getTime(),
   });
-  const [countdown, setCountdown] = useState<{
-    days: number | string;
-    hours: number | string;
-    minutes: number | string;
-    seconds: number | string;
-  }>({
-    // Initial time values
-    days: 0,
-    hours: 0,
-    minutes: 0,
-    seconds: 0,
+
+  const [countdown, setCountdown] = useState({
+    days: 0 as number | string,
+    hours: 0 as number | string,
+    minutes: 0 as number | string,
+    seconds: 0 as number | string,
   });
 
   useEffect(() => {
     const updateTimer = setInterval(() => {
-      // Get today's date and time
       const now = new Date().getTime();
-      // Find the distance between now and the countdown date
       const distance = countdownTarget.target - now;
-      // If the count down is over, write some text
+
       if (distance < 0) {
         clearInterval(updateTimer);
-        setCountdown((prev) => ({
-          ...prev,
+        setCountdown({
           days: "O",
           hours: "V",
           minutes: "E",
           seconds: "R",
-        }));
+        });
         return;
       }
-      setCountdown((prev) => ({
-        ...prev,
+
+      setCountdown({
         days: Math.floor(distance / (1000 * 60 * 60 * 24)),
-        hours: Math.floor(
-          (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
-        ),
+        hours: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
         minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
         seconds: Math.floor((distance % (1000 * 60)) / 1000),
-      }));
+      });
     }, 1000);
     return () => clearInterval(updateTimer);
-  }, []);
+  }, [countdownTarget.target]);
 
-  const { colorMode, toggleColorMode } = useColorMode();
   return (
-    <>
-      <PageBuilder>
-        <HeaderTemplate
-          image="/assets/stop-the-stigma/stop-stigma-auditorium.webp"
-          imageHeight="100vh"
-          imageLabel="Stop The Stigma Conference"
-          title="Stop The Stigma Conference"
-          titleAlignment={2}
-          titleLocation={100}
-        >
-          <Float placement={"bottom-center"} offsetY={"280px"}>
-            <HStack gapX={"8"} >
-              <For
-                each={[
-                  { label: "Days", value: countdown.days },
-                  { label: "Hours", value: countdown.hours },
-                  { label: "Minutes", value: countdown.minutes },
-                  { label: "Seconds", value: countdown.seconds },
-                ]}
-              >
-                {({
-                  label,
-                  value,
-                }: {
-                  label: string;
-                  value: number | string;
-                }) => {
-                  return (
-                    <Card.Root key={label} bg={"blackAlpha.950"} w={"180px"} h={"180px"}>
-                      <Card.Body position={'relative'}>
-                        <Float placement={"middle-center"}>
-                          <VStack gapY={10}>
-                            <Text className={poppins.className} fontSize={45}>{value}</Text>
-                            <Text className={poppins.className} fontSize={45 / 2}>{label}</Text>
-                          </VStack>
-                        </Float>
-                      </Card.Body>
-                    </Card.Root>
-                  );
-                }}
-              </For>
-            </HStack>
-          </Float>
-        </HeaderTemplate>
+    <PageBuilder>
+      <HeaderTemplate
+        image="/assets/stop-the-stigma/stop-stigma-auditorium.webp"
+        imageHeight={{ base: "80vh", md: "100vh" }}
+        imageLabel="Stop The Stigma Conference"
+        title="Stop The Stigma Conference"
+        titleLocation={100}
+      >
+        {/* Adjusted the Float offset and card sizing so it doesn't break mobile viewports */}
+        <Float placement={"bottom-center"} offsetY={{ base: "10%", md: "15%" }} w="full">
+          <HStack gap={{ base: 2, md: 6 }} justify="center" w="full" px={4}>
+            <For
+              each={[
+                { label: "Days", value: countdown.days },
+                { label: "Hours", value: countdown.hours },
+                { label: "Minutes", value: countdown.minutes },
+                { label: "Seconds", value: countdown.seconds },
+              ]}
+            >
+              {({ label, value }) => (
+                <Card.Root
+                  key={label}
+                  bg={"blackAlpha.950"}
+                  w={{ base: "70px", md: "120px", lg: "180px" }}
+                  h={{ base: "80px", md: "120px", lg: "180px" }}
+                >
+                  <Card.Body p={0} h="full">
+                    <Center h="full">
+                      <VStack gap={0}>
+                        <Text
+                          className={poppins.className}
+                          fontSize={{ base: "2xl", md: "4xl", lg: "5xl" }}
+                          color="white"
+                          lineHeight="1"
+                        >
+                          {value}
+                        </Text>
+                        <Text
+                          className={poppins.className}
+                          fontSize={{ base: "xs", md: "md", lg: "xl" }}
+                          color="gray.400"
+                        >
+                          {label}
+                        </Text>
+                      </VStack>
+                    </Center>
+                  </Card.Body>
+                </Card.Root>
+              )}
+            </For>
+          </HStack>
+        </Float>
+      </HeaderTemplate>
 
-        <SectionTemplate>
-          <Container fluid h={"100%"}>
-            <Flex gapX={24} p={20}>
-              <Image asChild aspectRatio={4 / 5} fit={"contain"} maxW={"830px"} mx={"auto"} width={"full"}>
-                <NextImage src={"/assets/stop-the-stigma/Linkedin-Carousels.png"} width={1080} height={1350} alt={"test"} fetchPriority={"high"} sizes={"(max-width:1080px) 100vw,1080px"} />
-              </Image>
-              <Center>
-                <VStack>
-                  <Heading as={"h1"} mb={4} size={"5xl"} fontWeight={'bold'} >
-                    What is STOP THE STIGMA?
-                  </Heading>
-                  <Text textStyle={"lg"}>
-                    <Strong>STOP THE STIGMA</Strong> is an annual conference centered
-                    on the stigma of disability and incarceration. Now in its fourth
-                    year the conference continues to provide a space for justice
-                    impacted individuals to have their voices and stories heard.
-                    Presented by Mokse and The Community, STOP THE STIGMA integrates
-                    innovative media, storytelling, and design to engage audiences and
-                    amplify impact. Together, we build an inclusive platform to
-                    challenge assumptions and inspire action.
-                  </Text>
-                  <Button
-                    bg={"teal.focusRing"}
-                    variant="solid"
-                    rounded="md"
-                    size={"xl"}
-                  >
-                    <ChakraLink asChild>
-                      <NextLink href="https://docs.google.com/forms/d/e/1FAIpQLSe4Z0LI5JpkPH3eKBw-8ANquRWRxNJKwpS465KOStu3Jb4v_A/viewform?usp=embed_facebook">
-                        <Text>Register Here</Text>
-                      </NextLink>
-                    </ChakraLink>
-                  </Button>
-                </VStack>
-              </Center>
-            </Flex>
-          </Container>
-         {/* </SectionTemplate>
+      {/* SECTION: What is Stop The Stigma */}
+      <SectionTemplate>
+        <Container fluid py={{ base: 12, md: 20 }}>
+          {/* Replaced fixed Flex with a responsive Stack that stacks vertically on mobile */}
+          <Stack direction={{ base: "column", lg: "row" }} gap={{ base: 10, lg: 24 }} align="center">
+            <Box w={{ base: "100%", lg: "50%" }} maxW="600px">
+              <ChakraImage asChild aspectRatio={4 / 5} fit={"contain"} width={"full"}>
+                <NextImage
+                  src={"/assets/stop-the-stigma/Linkedin-Carousels.png"}
+                  width={1080}
+                  height={1350}
+                  alt={"Stop The Stigma Carousel"}
+                  priority
+                  sizes={"(max-width:1080px) 100vw,1080px"}
+                />
+              </ChakraImage>
+            </Box>
 
-         <SectionTemplate>  */}
-          <Container fluid height={"100"} h={"100"} bgColor={"midnightblue"} color={"white"} > 
+            <VStack w={{ base: "100%", lg: "50%" }} align={{ base: "center", lg: "flex-start" }} textAlign={{ base: "center", lg: "left" }} gap={6}>
+              <Heading as={"h1"} size={{ base: "3xl", md: "5xl" }} fontWeight={'bold'}>
+                What is STOP THE STIGMA?
+              </Heading>
+              <Text textStyle={{ base: "md", md: "lg" }} color="fg.muted">
+                <Strong color="fg">STOP THE STIGMA</Strong> is an annual conference centered
+                on the stigma of disability and incarceration. Now in its fourth
+                year the conference continues to provide a space for justice
+                impacted individuals to have their voices and stories heard.
+                Presented by Mokse and The Community, STOP THE STIGMA integrates
+                innovative media, storytelling, and design to engage audiences and
+                amplify impact. Together, we build an inclusive platform to
+                challenge assumptions and inspire action.
+              </Text>
+              <Button
+                bg={"teal.focusRing"}
+                color="white"
+                variant="solid"
+                rounded="md"
+                size={"xl"}
+                _hover={{ bg: "teal.600" }}
+              >
+                <ChakraLink asChild _hover={{ textDecoration: "none" }}>
+                  <NextLink href="https://docs.google.com/forms/d/e/1FAIpQLSe4Z0LI5JpkPH3eKBw-8ANquRWRxNJKwpS465KOStu3Jb4v_A/viewform" target="_blank">
+                    <Text>Register Here</Text>
+                  </NextLink>
+                </ChakraLink>
+              </Button>
+            </VStack>
+          </Stack>
+        </Container>
+      </SectionTemplate>
 
-            <Heading as={"h2"} size={'5xl'} textAlign={"center"} mb={10} fontWeight={'bold'} >
-                Conference Highlights
+      {/* SECTION: Highlights */}
+      {/* Moved background color to the Section wrapper to ensure it spans full bleed organically */}
+      <Box as="section" bg={"midnightblue"} color={"white"} py={{ base: 16, md: 24 }}>
+        <Container fluid>
+          <VStack gap={12}>
+            <Heading as={"h2"} size={{ base: "3xl", md: "5xl" }} textAlign={"center"} fontWeight={'bold'}>
+              Conference Highlights
             </Heading>
-            
-            <VStack gapY={16} >
-              <SimpleGrid columns={2} gap="75px" mb="20" w="40vw" textStyle={"lg"} >
 
-                <FeatureCard 
-                  
-                  title={"Opening Night Film - Being Michelle"}
-                  description={
-                    "A groundbreaking documentary that sets the tone for the conference by centering the lived experience of a Deaf woman navigating incarceration and disability."
-                  }
-                  icon={"Keyboard"}
-                />
-                <FeatureCard
-                  title={"Panels on Race, Incarceration, and Disability"}
-                  description={
-                    "Thought-provoking conversations that tackle the intersections of systemic racism, ableism, and mass incarceration—areas where stigma and structural barriers collide most powerfully."
-                  }
-                  icon={"Newspaper"}
-                />
-                <FeatureCard
-                  title={"Theatrical Premiere - Brick by Brick"}
-                  description={
-                    "A one-act play debuting at the conference, offering a creative lens into stories of resilience, justice, and belonging."
-                  }
-                  icon={"ListAlt"}
-                />
-                <FeatureCard
-                  title={"35 Inspiring Speakers"}
-                  description={
-                    "A diverse lineup of national leaders, educators, advocates, and directly impacted individuals sharing expertise, lived experience, and visions for inclusive futures."
-                  }
-                  icon={"ObjectGroup"}
-                />
-
-              </SimpleGrid>
-            </VStack>
-          </Container>
-        </SectionTemplate>
+            {/* Replaced 40vw with fluid widths and updated columns to stack on mobile */}
+            <SimpleGrid
+              columns={{ base: 1, md: 2 }}
+              gap={{ base: 8, md: 16 }}
+              w={{ base: "100%", lg: "80%" }}
+              mx="auto"
+            >
+              <FeatureCard
+                title={"Opening Night Film - Being Michelle"}
+                description={"A groundbreaking documentary that sets the tone for the conference by centering the lived experience of a Deaf woman navigating incarceration and disability."}
+                icon={"Keyboard"}
+              />
+              <FeatureCard
+                title={"Panels on Race, Incarceration, and Disability"}
+                description={"Thought-provoking conversations that tackle the intersections of systemic racism, ableism, and mass incarceration—areas where stigma and structural barriers collide most powerfully."}
+                icon={"Newspaper"}
+              />
+              <FeatureCard
+                title={"Theatrical Premiere - Brick by Brick"}
+                description={"A one-act play debuting at the conference, offering a creative lens into stories of resilience, justice, and belonging."}
+                icon={"ListAlt"}
+              />
+              <FeatureCard
+                title={"35 Inspiring Speakers"}
+                description={"A diverse lineup of national leaders, educators, advocates, and directly impacted individuals sharing expertise, lived experience, and visions for inclusive futures."}
+                icon={"ObjectGroup"}
+              />
+            </SimpleGrid>
+          </VStack>
+        </Container>
+      </Box>
 
-        <HeaderTemplate
-          image="/assets/stop-the-stigma/stop-stigma-sect2_background.webp"
-          imageHeight="25vh"
-          imageLabel="Stop The Stigma Conference"
-        />
-      </PageBuilder >
-    </>
+      {/* FOOTER BANNER */}
+      <HeaderTemplate
+        image="/assets/stop-the-stigma/stop-stigma-sect2_background.webp"
+        imageHeight={{ base: "15vh", md: "25vh" }}
+        imageLabel="Stop The Stigma Conference Footer"
+      />
+    </PageBuilder>
   );
-}
+}
\ No newline at end of file
diff --git a/app/(Public Pages)/(Resources)/resources/Navigators.tsx b/app/(Public Pages)/(Resources)/resources/Navigators.tsx
index bbef404..6e1f88e 100644
--- a/app/(Public Pages)/(Resources)/resources/Navigators.tsx	
+++ b/app/(Public Pages)/(Resources)/resources/Navigators.tsx	
@@ -1,4 +1,5 @@
 "use client";
+
 import {
   Box,
   Card,
@@ -7,87 +8,69 @@ import {
   Portal,
   useFilter,
   useListCollection,
-  Group,
   ScrollArea,
   Center,
   Tag,
-  Stack, Image,
+  Stack,
+  Image,
   ClientOnly,
 } from "@chakra-ui/react";
-import NextImage from "next/image";
 import { Tooltip } from "@/components/ui/tooltip";
 import { AllResources } from "./mockIndex";
 import { Icon } from "@/components/ui/icons/icon";
-
 import { resourceCollectionRegistry } from "./mockResourceRegistry";
-
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 
 export default function Navigators() {
-  //Retrieve mock data from json file
-  const [searchlist, setSearchlist] = useState(null);
-
   const { contains } = useFilter({ sensitivity: "base" });
 
-  const [value, setValue] = useState("Initial value");
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  const [formData, setFormData] = useState<{
-    searchRegion: string;
-    searchCategory: string;
-    searchQuery: string;
-  }>({
-    searchQuery: "",
+  const [formData, setFormData] = useState({
     searchRegion: "",
     searchCategory: "",
+    searchQuery: "",
   });
 
-  const regionCollection = resourceCollectionRegistry.Regions;
-  const categoryCollection = resourceCollectionRegistry.Categories;
-  const titleCollection = resourceCollectionRegistry.Titles;
-
-  const { collection: regionDropDown, filter: filterRegions } =
-    useListCollection({
-      initialItems: regionCollection.items,
-      itemToString: (item) => item.label,
-      filter: contains,
-    });
-  const { collection: categoryDropDown, filter: filterCategories } =
-    useListCollection({
-      initialItems: categoryCollection.items,
-      itemToString: (item) => item.label,
-      filter: contains,
-    });
-  const { collection: titleDropDown, filter: filterTitles } = useListCollection(
-    {
-      initialItems: titleCollection.items,
-      itemToString: (item) => item.label,
-      filter: contains,
-    },
-  );
-  const [regionInput, setRegionInput] = useState("");
-  const [categoryInput, setCategoryInput] = useState("");
-  const [titleInput, setTitleInput] = useState("");
-
+  // Data States
   const [allResources, setAllResources] = useState<any[]>(AllResources);
   const [filteredItems, setFilteredItems] = useState(AllResources);
 
+  // Dynamic Dropdown States
   const [dynamicRegions, setDynamicRegions] = useState(resourceCollectionRegistry.Regions.items);
   const [dynamicCategories, setDynamicCategories] = useState(resourceCollectionRegistry.Categories.items);
   const [dynamicTitles, setDynamicTitles] = useState(resourceCollectionRegistry.Titles.items);
 
+  // Chakra UI Collections (bound to dynamic state)
+  const { collection: regionDropDown, filter: filterRegions } = useListCollection({
+    initialItems: dynamicRegions,
+    itemToString: (item) => item.label,
+    filter: contains,
+  });
+
+  const { collection: categoryDropDown, filter: filterCategories } = useListCollection({
+    initialItems: dynamicCategories,
+    itemToString: (item) => item.label,
+    filter: contains,
+  });
+
+  const { collection: titleDropDown, filter: filterTitles } = useListCollection({
+    initialItems: dynamicTitles,
+    itemToString: (item) => item.label,
+    filter: contains,
+  });
+
+  const [regionInput, setRegionInput] = useState("");
+  const [categoryInput, setCategoryInput] = useState("");
+  const [titleInput, setTitleInput] = useState("");
+
   // --- SILENT BACKGROUND FETCH TO UPGRADE DATA ---
   useEffect(() => {
     const fetchResources = async () => {
       try {
         const res = await fetch("/api/notion/database", { method: "POST" });
         if (!res.ok) throw new Error("Failed to fetch Notion data");
-
         const data = await res.json();
-
         const formattedData = data.payload;
 
-        // Extract unique values
         const uniqueRegions = Array.from(new Set(formattedData.flatMap((item: any) => item.region)))
           .filter(Boolean)
           .map((region) => ({ label: String(region), value: String(region) }));
@@ -100,313 +83,210 @@ export default function Navigators() {
           label: String(item.title), value: String(item.title)
         }));
 
-        // Overwrite the mock state with live Notion state
         setAllResources(formattedData);
         setFilteredItems(formattedData);
         setDynamicRegions(uniqueRegions);
         setDynamicCategories(uniqueCategories);
         setDynamicTitles(uniqueTitles);
-
       } catch (error) {
         console.error("Notion fetch failed, falling back to mock JSON data:", error);
-        // We don't need to do anything here; the UI is already populated with AllResources!
       }
     };
-
     fetchResources();
   }, []);
+
   const applyFilters = () => {
-    const noFilters =
-      !formData.searchRegion &&
-      !formData.searchCategory &&
-      !formData.searchQuery;
+    const noFilters = !formData.searchRegion && !formData.searchCategory && !formData.searchQuery;
+
     if (noFilters) {
-      setFilteredItems(AllResources);
+      setFilteredItems(allResources);
       return;
     }
-    let results = AllResources;
+
+    let results = allResources;
+
     if (formData.searchRegion) {
-      results = results.filter((resources) =>
-        resources.region.includes(formData.searchRegion),
-      );
+      results = results.filter((r) => r.region.includes(formData.searchRegion));
     }
     if (formData.searchCategory) {
-      results = results.filter((resources) =>
-        resources.category.includes(formData.searchCategory),
-      );
+      results = results.filter((r) => r.category.includes(formData.searchCategory));
     }
     if (formData.searchQuery) {
       const q = formData.searchQuery.toLowerCase();
       results = results.filter(
-        (resources) =>
-          resources.title.toLowerCase().includes(q) ||
-          resources.description.toLowerCase().includes(q),
+        (r) => r.title.toLowerCase().includes(q) || r.description.toLowerCase().includes(q)
       );
     }
     setFilteredItems(results);
   };
+
   return (
-    <Card.Body gap={6}>
-      <Group attached align={"center"} justify={"center"}>
-        <Combobox.Root
-          collection={regionDropDown}
-          onInputValueChange={(event) => {
-            const value = event?.inputValue;
-            setRegionInput(value);
-            setFormData((previousInfo) => ({
-              ...previousInfo,
-              searchRegion: value,
-            }));
-            if (!value) {
-              filterRegions("");
-              setFilteredItems(AllResources);
-            } else {
-              filterRegions(value);
-              applyFilters();
-            }
-          }}
-        >
-          <Combobox.Control>
-            <Combobox.Input
-              placeholder="Select a Region"
-              onSelect={(details) => {
-                const { value } = details?.currentTarget;
-                setRegionInput(value);
-                setFormData((previousInfo) => ({
-                  ...previousInfo,
-                  searchRegion: value,
-                }));
-                if (!value) {
-                  filterRegions("");
-                  setFilteredItems(AllResources);
-                } else {
-                  filterRegions(value);
-                  applyFilters();
-                }
-              }}
-              onChange={(event) => {
-                const { value } = event?.target;
-                setRegionInput(value);
-                setFormData((previousInfo) => ({
-                  ...previousInfo,
-                  searchRegion: value,
-                }));
-                if (!value) {
-                  filterRegions("");
-                  setFilteredItems(AllResources);
-                } else {
-                  filterRegions(value);
-                  applyFilters();
-                }
-              }}
-            />
-            <Combobox.IndicatorGroup>
-              <Combobox.ClearTrigger />
-              <Combobox.Trigger />
-            </Combobox.IndicatorGroup>
-          </Combobox.Control>
-          <Portal>
-            <Combobox.Positioner>
-              <Combobox.Content>
-                <Combobox.Empty>No items found</Combobox.Empty>
-                {regionDropDown.items.map((item) => (
-                  <Combobox.Item item={item} key={item.value}>
-                    {item.label}
-                    <Combobox.ItemIndicator />
-                  </Combobox.Item>
-                ))}
-              </Combobox.Content>
-            </Combobox.Positioner>
-          </Portal>
-        </Combobox.Root>
-        <Combobox.Root
-          collection={categoryDropDown}
-          onInputValueChange={(event) => {
-            const value = event?.inputValue;
-            setCategoryInput(value);
-            setFormData((previousInfo) => ({
-              ...previousInfo,
-              searchCategory: value,
-            }));
-            if (!value) {
-              filterCategories("");
-              setFilteredItems(AllResources);
-            } else {
-              filterCategories(value);
-              applyFilters();
-            }
-          }}
-        >
-          <Combobox.Control>
-            <Combobox.Input
-              placeholder=" Select a Category"
-              onSelect={(details) => {
-                const { value } = details?.currentTarget;
-                setCategoryInput(value);
-                setFormData((previousInfo) => ({
-                  ...previousInfo,
-                  searchCategory: value,
-                }));
-                if (!value) {
-                  filterCategories("");
-                  setFilteredItems(AllResources);
-                } else {
-                  filterCategories(value);
-                  applyFilters();
-                }
-              }}
-              onChange={(event) => {
-                const { value } = event?.target;
-                setCategoryInput(value);
-                setFormData((previousInfo) => ({
-                  ...previousInfo,
-                  searchCategory: value,
-                }));
-                if (!value) {
-                  filterCategories("");
-                  setFilteredItems(AllResources);
-                }
-                filterCategories(value);
-                applyFilters();
-              }}
-            />
-            <Combobox.IndicatorGroup>
-              <Combobox.ClearTrigger />
-              <Combobox.Trigger />
-            </Combobox.IndicatorGroup>
-          </Combobox.Control>
-          <Portal>
-            <Combobox.Positioner>
-              <Combobox.Content>
-                <Combobox.Empty>No items found</Combobox.Empty>
-                {categoryDropDown.items.map((item) => (
-                  <Combobox.Item item={item} key={item.value}>
-                    {item.label}
-                    <Combobox.ItemIndicator />
-                  </Combobox.Item>
-                ))}
-              </Combobox.Content>
-            </Combobox.Positioner>
-          </Portal>
-        </Combobox.Root>
-        <Combobox.Root
-          collection={titleDropDown}
-          onInputValueChange={(event) => {
-            const value = event?.inputValue;
-            setTitleInput(value);
-            setFormData((previousInfo) => ({
-              ...previousInfo,
-              searchQuery: value,
-            }));
-            if (!value) {
-              filterTitles("");
-              setFilteredItems(AllResources);
-            }
-            filterTitles(value);
-            applyFilters();
-          }}
-        >
-          <Combobox.Control>
-            <Combobox.Input
-              placeholder="Search by Title"
-              onChange={(event) => {
-                const { value } = event?.target;
-                setTitleInput(value);
-                setFormData((prev) => ({
-                  ...prev,
-                  searchQuery: value,
-                }));
-                if (!value) {
-                  filterTitles("");
-                  setFilteredItems(AllResources);
-                }
-                filterTitles(value);
-                applyFilters();
-              }}
-              onSelect={(details) => {
-                const { value } = details?.currentTarget;
-                setTitleInput(value);
-                setFormData((prev) => ({
-                  ...prev,
-                  searchQuery: value,
-                }));
-                if (!value) {
-                  filterTitles("");
-                  setFilteredItems(AllResources);
-                }
-                filterTitles(value);
-                applyFilters();
-              }}
-            />
-            <Combobox.IndicatorGroup>
-              <Combobox.ClearTrigger />
-            </Combobox.IndicatorGroup>
-          </Combobox.Control>
-          <Portal>
-            <Combobox.Positioner>
-              <Combobox.Content>
-                <Combobox.Empty>No items found</Combobox.Empty>
-                {titleDropDown.items.map((item) => (
-                  <Combobox.Item item={item} key={item.value}>
-                    {item.label}
-                    <Combobox.ItemIndicator />
-                  </Combobox.Item>
-                ))}
-              </Combobox.Content>
-            </Combobox.Positioner>
-          </Portal>
-        </Combobox.Root>
+    <Card.Body gap={6} px={{ base: 2, md: 6 }}>
+
+      {/* Responsive Layout Fix: Stacks vertically on mobile, horizontally on desktop */}
+      <Stack direction={{ base: "column", md: "row" }} gap={4} w="full" align="center" justify="center">
+
+        <Box w={{ base: "100%", md: "auto" }} flex="1">
+          <Combobox.Root
+            collection={regionDropDown}
+            onInputValueChange={(event) => {
+              const value = event?.inputValue || "";
+              setRegionInput(value);
+              setFormData((prev) => ({ ...prev, searchRegion: value }));
+              if (!value) setFilteredItems(allResources);
+              else { filterRegions(value); applyFilters(); }
+            }}
+          >
+            <Combobox.Control>
+              <Combobox.Input placeholder="Select a Region" />
+              <Combobox.IndicatorGroup>
+                <Combobox.ClearTrigger />
+                <Combobox.Trigger />
+              </Combobox.IndicatorGroup>
+            </Combobox.Control>
+            <Portal>
+              <Combobox.Positioner>
+                <Combobox.Content>
+                  <Combobox.Empty>No items found</Combobox.Empty>
+                  {regionDropDown.items.map((item) => (
+                    <Combobox.Item item={item} key={item.value}>
+                      {item.label}
+                      <Combobox.ItemIndicator />
+                    </Combobox.Item>
+                  ))}
+                </Combobox.Content>
+              </Combobox.Positioner>
+            </Portal>
+          </Combobox.Root>
+        </Box>
+
+        <Box w={{ base: "100%", md: "auto" }} flex="1">
+          <Combobox.Root
+            collection={categoryDropDown}
+            onInputValueChange={(event) => {
+              const value = event?.inputValue || "";
+              setCategoryInput(value);
+              setFormData((prev) => ({ ...prev, searchCategory: value }));
+              if (!value) setFilteredItems(allResources);
+              else { filterCategories(value); applyFilters(); }
+            }}
+          >
+            <Combobox.Control>
+              <Combobox.Input placeholder="Select a Category" />
+              <Combobox.IndicatorGroup>
+                <Combobox.ClearTrigger />
+                <Combobox.Trigger />
+              </Combobox.IndicatorGroup>
+            </Combobox.Control>
+            <Portal>
+              <Combobox.Positioner>
+                <Combobox.Content>
+                  <Combobox.Empty>No items found</Combobox.Empty>
+                  {categoryDropDown.items.map((item) => (
+                    <Combobox.Item item={item} key={item.value}>
+                      {item.label}
+                      <Combobox.ItemIndicator />
+                    </Combobox.Item>
+                  ))}
+                </Combobox.Content>
+              </Combobox.Positioner>
+            </Portal>
+          </Combobox.Root>
+        </Box>
+
+        <Box w={{ base: "100%", md: "auto" }} flex="1">
+          <Combobox.Root
+            collection={titleDropDown}
+            onInputValueChange={(event) => {
+              const value = event?.inputValue || "";
+              setTitleInput(value);
+              setFormData((prev) => ({ ...prev, searchQuery: value }));
+              if (!value) setFilteredItems(allResources);
+              else { filterTitles(value); applyFilters(); }
+            }}
+          >
+            <Combobox.Control>
+              <Combobox.Input placeholder="Search by Title" />
+              <Combobox.IndicatorGroup>
+                <Combobox.ClearTrigger />
+              </Combobox.IndicatorGroup>
+            </Combobox.Control>
+            <Portal>
+              <Combobox.Positioner>
+                <Combobox.Content>
+                  <Combobox.Empty>No items found</Combobox.Empty>
+                  {titleDropDown.items.map((item) => (
+                    <Combobox.Item item={item} key={item.value}>
+                      {item.label}
+                      <Combobox.ItemIndicator />
+                    </Combobox.Item>
+                  ))}
+                </Combobox.Content>
+              </Combobox.Positioner>
+            </Portal>
+          </Combobox.Root>
+        </Box>
+
         <Button
-          onClick={async () => {
+          w={{ base: "100%", md: "auto" }}
+          onClick={() => {
             if (!titleInput && !categoryInput && !regionInput) {
-              filterTitles("");
-              filterCategories("");
-              filterRegions("");
-              setFilteredItems(AllResources);
+              setFilteredItems(allResources);
+            } else {
+              applyFilters();
             }
-            applyFilters();
-            // await searchNotion();
           }}
           aria-label="Search Resources"
         >
           <Icon name={"Search"} />
+          <Box display={{ base: "inline", md: "none" }} ml={2}>Search</Box>
         </Button>
-      </Group>
+      </Stack>
+
       {/* CARD TABLE SECTION */}
       <ScrollArea.Root height={"xl"} maxW="full">
         <ScrollArea.Viewport>
-          <ScrollArea.Content spaceY="1" textStyle="sm">
+          <ScrollArea.Content spaceY={4} textStyle="sm" p={{ base: 1, md: 4 }}>
             {filteredItems.map((item) => (
               <Card.Root
                 key={item.id}
                 borderWidth=".5px"
                 borderRadius="md"
-                shadow="xs"
-                flexDirection="row"
+                shadow="sm"
+                // Responsive Fix: Stack image on top of text on mobile, row on desktop
+                flexDirection={{ base: "column", sm: "row" }}
                 overflow="hidden"
               >
-                <Center borderRadius="md">
+                <Center borderRadius="md" w={{ base: "100%", sm: "120px" }} minH="120px" bg="#545454">
                   <ClientOnly fallback={<Box boxSize={120} bg={"blue.500"} />}>
-                    <Image src={item.WebLogoURL} alt={item.title} width={120} height={120} fit="contain" p={2} bg="#545454" />
+                    <Image
+                      src={item.WebLogoURL}
+                      alt={item.title}
+                      width={120}
+                      height={120}
+                      fit="contain"
+                      p={2}
+                    />
                   </ClientOnly>
                 </Center>
-                <Card.Body p={4}>
-                  <Stack>
-                    <strong>{item.title}</strong>
+
+                <Card.Body p={4} flex="1">
+                  <Stack gap={2}>
+                    <strong style={{ fontSize: "1.1rem" }}>{item.title}</strong>
                     <Box fontSize="sm" color="gray.500" lineClamp={2}>
                       {item.description}
                     </Box>
-                    <Stack direction={"row"} gap={2}>
+                    <Stack direction="row" gap={2} wrap="wrap">
                       <Tooltip content={item.region.join(", ")}>
-                        <Tag.Root size={"lg"} maxW={"xs"}>
+                        <Tag.Root size="lg">
                           <Tag.Label>
-                            {item.region.length > 0
+                            {item.region.length > 1
                               ? `+${item.region.length} Regions`
-                              : item.region}
+                              : item.region[0]}
                           </Tag.Label>
                         </Tag.Root>
                       </Tooltip>
-                      <Tag.Root size={"lg"} maxW={"xs"}>
+                      <Tag.Root size="lg">
                         <Tag.Label>{item.category.join(", ")}</Tag.Label>
                       </Tag.Root>
                     </Stack>
@@ -423,4 +303,4 @@ export default function Navigators() {
       </ScrollArea.Root>
     </Card.Body>
   );
-}
+}
\ No newline at end of file
diff --git a/app/(Public Pages)/(Resources)/resources/page.tsx b/app/(Public Pages)/(Resources)/resources/page.tsx
index 623b8ef..4859fcb 100644
--- a/app/(Public Pages)/(Resources)/resources/page.tsx	
+++ b/app/(Public Pages)/(Resources)/resources/page.tsx	
@@ -7,22 +7,12 @@ import {
   Input,
   InputGroup,
   Card,
-  HStack,
+  Stack,
   Heading,
-  Button,
-  Combobox,
-  Portal,
   useFilter,
   useListCollection,
-  Group,
-  ScrollArea,
-  Center,
-  Tag,
-  Stack,
-  Tabs,
 } from "@chakra-ui/react";
 import { useRef, useState } from "react";
-import checkDeviceSize from "@/components/ui/breakpoints";
 import { Icon } from "@/components/ui/icons/icon";
 import {
   BodyTemplate,
@@ -32,19 +22,14 @@ import {
 
 import { resourceCollectionRegistry } from "./mockResourceRegistry";
 import { AllResources } from "./mockIndex";
-import { Tooltip } from "@/components/ui/tooltip";
 import Navigators from "./Navigators";
-import Networks from "./Networks";
-import Calendar from "./Calendar";
+
 export default function SearchResources() {
-  //Retrieve mock data from json file
   const [searchlist, setSearchlist] = useState(null);
-
   const { contains } = useFilter({ sensitivity: "base" });
 
-  const [value, setValue] = useState("Initial value");
+  const [value, setValue] = useState("");
   const inputRef = useRef<HTMLInputElement | null>(null);
-  const notMobileDevice = checkDeviceSize();
 
   const endElement = value ? (
     <CloseButton
@@ -88,8 +73,9 @@ export default function SearchResources() {
       initialItems: titleCollection.items,
       itemToString: (item) => item.label,
       filter: contains,
-    },
+    }
   );
+
   const [regionInput, setRegionInput] = useState("");
   const [categoryInput, setCategoryInput] = useState("");
   const [titleInput, setTitleInput] = useState("");
@@ -107,12 +93,12 @@ export default function SearchResources() {
     let results = AllResources;
     if (formData.searchRegion) {
       results = results.filter((resources) =>
-        resources.region.includes(formData.searchRegion),
+        resources.region.includes(formData.searchRegion)
       );
     }
     if (formData.searchCategory) {
       results = results.filter((resources) =>
-        resources.category.includes(formData.searchCategory),
+        resources.category.includes(formData.searchCategory)
       );
     }
     if (formData.searchQuery) {
@@ -120,55 +106,40 @@ export default function SearchResources() {
       results = results.filter(
         (resources) =>
           resources.title.toLowerCase().includes(q) ||
-          resources.description.toLowerCase().includes(q),
+          resources.description.toLowerCase().includes(q)
       );
     }
     setFilteredItems(results);
   };
+
   return (
-    <>
-      {notMobileDevice ? (
-        <>
-          <PageBuilder>
-            <HeaderTemplate
-              title={"Resources"}
-              imageHeight={"28vh"}
-              titleAlignment={2}
-              titleLocation={100} />
-            <BodyTemplate>
-              <Container fluid>
-                <Card.Root>
-                  <Navigators /> 
-                </Card.Root>
-              </Container>
-            </BodyTemplate>
-          </PageBuilder>
-        </>
-      ) : (
-        // This is a placeholder for the mobile view to be updated later
-        // Search
-        <Container as={"main"} maxW={"7xl"} h={"100%"}>
-          <HStack as={"section"}>
-            <article>
-              <Icon name="Gem" />
-              <Box>
-                <Heading as="h3">Search</Heading>
-                <InputGroup endElement={endElement}>
-                  <Input
-                    list={searchlist ?? ""}
-                    ref={inputRef}
-                    placeholder="Email"
-                    value={value}
-                    onChange={(e) => {
-                      setValue(e.currentTarget.value);
-                    }}
-                  />
-                </InputGroup>
-              </Box>
-            </article>
-          </HStack>
+    <PageBuilder>
+      <HeaderTemplate
+        title={"Resources"}
+        imageHeight={{ base: "30vh", md: "10vh" }}
+      />
+
+      <BodyTemplate>
+        <Container fluid px={{ base: 0, md: 4 }}>
+          {/* Unified Layout: Stacks vertically on mobile, horizontally on desktop */}
+          <Stack direction={{ base: "column", md: "row" }} gap={6} w="full" align="flex-start">
+
+            {/* Search/Filter Sidebar Area */}
+
+
+            {/* Main Content Area (Navigators / Results) */}
+            <Box flex="1" w="full">
+              <Card.Root w="full" variant="outline">
+                <Card.Body>
+                  <Navigators />
+                  {/* Future implementation: Render your filteredItems here */}
+                </Card.Body>
+              </Card.Root>
+            </Box>
+
+          </Stack>
         </Container>
-      )}
-    </>
+      </BodyTemplate>
+    </PageBuilder>
   );
-}
+}
\ No newline at end of file
diff --git a/app/(Public Pages)/(Services)/services/page.tsx b/app/(Public Pages)/(Services)/services/page.tsx
index e041902..4a9d10d 100644
--- a/app/(Public Pages)/(Services)/services/page.tsx	
+++ b/app/(Public Pages)/(Services)/services/page.tsx	
@@ -1,10 +1,12 @@
+"use client";
+
 import Image from "next/image";
 import NextLink from "next/link";
 import ServiceCard from "@/components/services/service-card";
 import SupportCard from "@/components/services/support-card";
 import FaqItem from "@/components/services/faq-item";
 import { services, supportOptions, faqItems } from "@/data/services";
-import { Link as ChakraLink, HStack, SimpleGrid } from "@chakra-ui/react";
+import { Link as ChakraLink, SimpleGrid, Stack } from "@chakra-ui/react";
 import {
   HeaderTemplate,
   PageBuilder,
@@ -14,49 +16,55 @@ import {
 
 export default function Services() {
   return (
-    <>
-      <PageBuilder>
-        <HeaderTemplate
-          title="Services"
-          image="/assets/services/2033.jpg"
-          imageLabel="Services Hero"
-          description="At MOKSE, we offer a range of services designed to empower and support our community"
-        />
-        <BodyTemplate>
-          <SectionTemplate
-            title="Take the Next Step Today!"
-            description="
-            Whether you're seeking support for yourself or your organization, we
-            invite you to learn more about our services and how we can help."
-          >
-            <SimpleGrid columns={[1, 2, 3]} gap={4}>
-              {services.map((service) => (
-                <ServiceCard key={service.title} {...service} />
-              ))}
-            </SimpleGrid>
-          </SectionTemplate>
-          <section>
-
+    <PageBuilder>
+      <HeaderTemplate
+        title="Services"
+        image="/assets/services/2033.jpg"
+        imageLabel="Services Hero"
+        description="At MOKSE, we offer a range of services designed to empower and support our community."
+      />
+      
+      <BodyTemplate>
+        <SectionTemplate
+          title="Take the Next Step Today!"
+          description="Whether you're seeking support for yourself or your organization, we invite you to learn more about our services and how we can help."
+        >
+          {/* Swapped array syntax for explicit object mapping to ensure clean mobile scaling */}
+          <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={{ base: 6, md: 8 }} w="full">
+            {services.map((service) => (
+              <ServiceCard key={service.title} {...service} />
+            ))}
+          </SimpleGrid>
+        </SectionTemplate>
 
+        <SectionTemplate
+          title="Make a Difference!"
+          description="Get Involved! Your support can make a significant impact on the lives of justice-impacted individuals. Explore the various ways you can contribute to our mission and help us create a more inclusive and supportive community."
+        >
+          {/* Converted HStack to a responsive Stack to ensure cards stack naturally on mobile rather than squishing */}
+          <Stack
+            direction={{ base: "column", md: "row" }}
+            justify="center"
+            align="center"
+            gap={{ base: 6, md: 8 }}
+            wrap="wrap"
+            pt={{ base: 4, md: 10 }}
+            w="full"
+          >
+            {supportOptions.map((option) => (
+              <SupportCard key={option.title} {...option} />
+            ))}
+          </Stack>
+        </SectionTemplate>
 
-          </section>
-          <section>
-
-            <SectionTemplate
-              title="Make a Difference!"
-              description="Get Involved!
-                          Your support can make a significant impact on the lives of justice-impacted individuals. Explore the various ways you can contribute to our mission and help us create a more inclusive and supportive community."
-            >
-              <HStack justify={"center"} align={"center"} gap={4} wrap={"wrap"} paddingTop={10}>
-                {supportOptions.map((option) => (
-                  <SupportCard key={option.title} {...option} />
-                ))}
-              </HStack>
-            </SectionTemplate>
-          </section>
+        {/* Wrapped the FAQ section in the template to maintain unified padding and margins */}
+        <SectionTemplate
+          title="Frequently Asked Questions"
+          description="Find answers to common questions about our services and support programs."
+        >
           <FaqItem />
-        </BodyTemplate>
-      </PageBuilder>
-    </>
+        </SectionTemplate>
+      </BodyTemplate>
+    </PageBuilder>
   );
-}
+}
\ No newline at end of file
diff --git a/app/(Public Pages)/layout.tsx b/app/(Public Pages)/layout.tsx
index 1ab212b..b5edd1c 100644
--- a/app/(Public Pages)/layout.tsx	
+++ b/app/(Public Pages)/layout.tsx	
@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Open_Sans } from "next/font/google";
 // import Footer from "@/components/common/footer";
 import Footer from "@/app/(Admin Dashboard)/components/footer";
@@ -16,7 +16,13 @@ export const metadata: Metadata = {
   title: "Mokse - Empowering Change Through Education and Advocacy",
   description:
     "We strive to break down barriers and stop the stigma associated with incarceration through consulting services, educational conferences, and business support programs.",
+
 };
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1
+}
 
 export default function RootLayout({
   children,
diff --git a/components/home/feature-card.tsx b/components/home/feature-card.tsx
index 9a77433..88eabfd 100644
--- a/components/home/feature-card.tsx
+++ b/components/home/feature-card.tsx
@@ -17,14 +17,27 @@ export default function FeatureCard({
   icon,
 }: FeatureCardProps) {
   return (
-    <Card.Root variant="outline" w={{ mobile: "xs" }} h={"xs"}>
-      <Card.Body>
-        <Avatar.Root my={4} boxSize={12}>
-          <Icon name={icon} size={6} />
+    <Card.Root
+      variant="outline"
+      w="full"
+      h="full" // Ensures cards in a grid stretch to the exact same vertical height
+      overflow="hidden" // Prevents text from ever breaking out of the borders
+    >
+      <Card.Body gap={3} display="flex" flexDirection="column">
+        {/* bg="transparent" removes the default gray circle if your icon already has color */}
+        <Avatar.Root my={2} boxSize={12} bg="transparent">
+          <Icon name={icon} size={8} color="teal.focusRing" />
         </Avatar.Root>
-        <Card.Title className={poppins.className}>{title}</Card.Title>
-        <Text>{description}</Text>
+
+        <Card.Title className={poppins.className} textStyle="xl">
+          {title}
+        </Card.Title>
+
+        {/* Added line height and muted color for better readability on long paragraphs */}
+        <Text color="fg.muted" lineHeight="tall" flex="1">
+          {description}
+        </Text>
       </Card.Body>
     </Card.Root>
   );
-}
+}
\ No newline at end of file
diff --git a/components/page-builder/template.tsx b/components/page-builder/template.tsx
index 718978c..921232b 100644
--- a/components/page-builder/template.tsx
+++ b/components/page-builder/template.tsx
@@ -3,43 +3,39 @@ import {
   Box,
   Text,
   Stack,
-  AbsoluteCenter,
   VStack,
   Heading,
-  SimpleGrid,
   Link,
-  GridItem,
-  // Float, 
+  Center,
 } from "@chakra-ui/react";
 import NextLink from "next/link";
-
 import { poppins } from "../ui/fonts";
 
 export function HeaderTemplate({
   title,
-  titleAlignment = 1,
   titleLocation = 75,
   image,
   imageHeight,
   imageLabel,
   description,
-  direction,
+  direction = "column",
   children,
 }: {
   title?: string;
-  titleAlignment?: number;
+  titleAlignment?: number; // Kept for backwards compatibility if used elsewhere
   titleLocation?: number;
   image?: string;
-  imageHeight?: string;
+  imageHeight?: any; // Changed to 'any' to accept Chakra responsive objects like { base: "40vh", md: "58vh" }
   imageLabel?: string;
   description?: string;
-  direction?: "row" | "column"; children?: React.ReactNode;
+  direction?: "row" | "column";
+  children?: React.ReactNode;
 }) {
   return (
     <Box
       position="relative"
       w={"100%"}
-      h={imageHeight ?? "58vh"}
+      h={imageHeight ?? { base: "40vh", md: "58vh" }}
       bgImage={`url(${image})`}
       bgSize={"cover"}
       backgroundPosition={"center"}
@@ -47,53 +43,57 @@ export function HeaderTemplate({
       aria-label={`${imageLabel} Image`}
     >
       {children}
-      <AbsoluteCenter
-        textAlign="center"
+      {/* Replaced AbsoluteCenter with Center to better handle natural flex heights */}
+      <Center
         bg="rgba(0, 0, 0, 0.4)"
         w={"100%"}
         h={"100%"}
-        alignItems={"center"}
+        px={{ base: 4, md: 16 }}
       >
-        <SimpleGrid columns={2} gap={6}>
-          <GridItem colSpan={titleAlignment}>
-            <VStack direction={direction} w={`${titleLocation}%`} pl={16} >
-              <Heading as={"h1"} p={2} alignItems={"center"}>
-                <Text
-                  textStyle={"7xl"}
-                  className={poppins.className}
-                  // textAlign={"start"}
-                  textTransform={"capitalize"}
-                  overflow={"hidden"}
-                  wordBreak={"none"}
-                  verticalAlign={"baseline"}
-                  _light={{ color: "white" }}
-                >
-                  {title}
-                </Text>
-              </Heading>
-              <Container fluid>
-                <Text _light={{ color: "white" }}>{description}</Text>
-              </Container>
-            </VStack>
-          </GridItem>
-        </SimpleGrid>
-      </AbsoluteCenter>
-    </Box >
+        <VStack
+          direction={direction}
+          // On mobile, take up 100% of space. On desktop, respect the titleLocation percentage.
+          w={{ base: "100%", md: `${titleLocation}%` }}
+          align={{ base: "center", md: "flex-start" }}
+          textAlign={{ base: "center", md: "left" }}
+          gap={4}
+        >
+          <Heading as={"h1"}>
+            <Text
+              textStyle={{ base: "4xl", md: "7xl" }}
+              className={poppins.className}
+              textTransform={"capitalize"}
+              overflow={"hidden"}
+              wordBreak={"normal"}
+              verticalAlign={"baseline"}
+              color={"white"}
+            >
+              {title}
+            </Text>
+          </Heading>
+          <Text color={"white"} textStyle={{ base: "md", md: "lg" }}>
+            {description}
+          </Text>
+        </VStack>
+      </Center>
+    </Box>
   );
 }
+
 export function BodyTemplate({ children }: { children: React.ReactNode }) {
   return (
-    <Container maxW={"7xl"} h={"100%"}>
+    <Container maxW={"7xl"} h={"100%"} px={{ base: 4, md: 8 }}>
       <VStack gapY={8} w={"100%"}>
         {children}
       </VStack>
     </Container>
   );
 }
+
 export function SectionTemplate({
   title,
   description,
-  direction,
+  direction = "column",
   children,
 }: {
   title?: string;
@@ -102,26 +102,41 @@ export function SectionTemplate({
   children: React.ReactNode;
 }) {
   return (
-    <>
-      <Container direction={direction} fluid>
-        <Heading as="h2">
-          <Text
-            textStyle={"5xl"}
-            className={poppins.variable}
-            textAlign={"center"}
-            textWrapStyle={"balance"}
-            verticalAlign={"baseline"}
-            wordWrap={"normal"}
-          >
-            {title}
-          </Text>
-        </Heading>
+    <Box as="section" w="100%" py={{ base: 8, md: 12 }}>
+      {/* Removed the invalid 'direction' prop from Container */}
+      <Container fluid px={{ base: 4, md: 8 }}>
+        <VStack gap={4} mb={8}>
+          {title && (
+            <Heading as="h2">
+              <Text
+                textStyle={{ base: "3xl", md: "5xl" }}
+                className={poppins.variable}
+                textAlign={"center"}
+                textWrapStyle={"balance"}
+                verticalAlign={"baseline"}
+                wordWrap={"normal"}
+              >
+                {title}
+              </Text>
+            </Heading>
+          )}
+          {description && (
+            <Text textStyle={"md"} textAlign={"center"} maxW="3xl">
+              {description}
+            </Text>
+          )}
+        </VStack>
+
+        {/* Applied the requested direction strictly to the children via Stack */}
+        <Stack
+          direction={{ base: "column", md: direction }}
+          w="100%"
+          alignItems="center"
+        >
+          {children}
+        </Stack>
       </Container>
-      <Text textStyle={"md"} textAlign={"center"}>
-        {description}
-      </Text>
-      {children}
-    </>
+    </Box>
   );
 }
 
@@ -133,26 +148,31 @@ export function PageBuilder({
   children: React.ReactNode;
 }>) {
   return (
-    <Stack direction={direction ?? "column"} w={"100%"}>
+    <Stack direction={{ base: "column", md: direction ?? "column" }} w={"100%"}>
       {children}
     </Stack>
   );
 }
 
-/** 
-* @param linkTo The URL to link to  
-* @param props The props for the text element
-* @param displayText The text to display
-*/
-export function LinkBuilder(
-  { linkTo, props, displayText }
-    : Readonly<{
-      linkTo: string;
-      props: React.ComponentProps<typeof Text>
-      displayText: string;
-    }>) {
-  return <Link asChild>
-    <NextLink href={linkTo}>
-      <Text {...props}>{displayText}</Text></NextLink>
-  </Link>;
+/**
+ * @param linkTo The URL to link to
+ * @param props The props for the text element
+ * @param displayText The text to display
+ */
+export function LinkBuilder({
+  linkTo,
+  props,
+  displayText,
+}: Readonly<{
+  linkTo: string;
+  props: React.ComponentProps<typeof Text>;
+  displayText: string;
+}>) {
+  return (
+    <Link asChild>
+      <NextLink href={linkTo}>
+        <Text {...props}>{displayText}</Text>
+      </NextLink>
+    </Link>
+  );
 }
\ No newline at end of file
diff --git a/components/services/faq-item.tsx b/components/services/faq-item.tsx
index ada8b74..ff93906 100644
--- a/components/services/faq-item.tsx
+++ b/components/services/faq-item.tsx
@@ -1,58 +1,38 @@
 "use client";
 
-// import { useState } from "react"; 
 import {
   Accordion,
-  // Button, 
   Card,
-  // Container, 
   Span,
-  Text,
 } from "@chakra-ui/react";
 import { Icon } from "../ui/icons/icon";
 import { faqItems } from "@/data/services";
-import { SectionTemplate } from "../page-builder/template";
-// interface FaqItemProps {
-//   index: string;
-//   question: string;
-//   answer: string;
-// }
 
 export default function FaqItem() {
-  // const [isOpen, setIsOpen] = useState(false); 
-
   return (
-    <SectionTemplate
-      title="Frequently Asked Questions"
-      description="Find Out How MoKse Supports Change"
-    >
-      <Card.Root minW={"100%"}>
-        <Card.Header>
-          <Text textStyle={"3xl"}>Frequently Asked Questions</Text>
-        </Card.Header>
-        <Card.Body>
-          <Card.Root>
-            <Card.Body>
-              <Accordion.Root collapsible defaultValue={["0"]}>
-                {faqItems.map((item) => {
-                  const { index, question, answer } = item;
-                  return (
-                    <Accordion.Item key={index} value={item.index}>
-                      <Accordion.ItemTrigger>
-                        <Span flex="1">{question}</Span>
-                        <Icon name="Plus" size={4} />
-                      </Accordion.ItemTrigger>
-                      <Accordion.ItemContent>
-                        <Accordion.ItemBody>{answer}</Accordion.ItemBody>
-                      </Accordion.ItemContent>
-                    </Accordion.Item>
-                  );
-                })}
-              </Accordion.Root>
-            </Card.Body>
-          </Card.Root>
-        </Card.Body>
-      </Card.Root>
-    </SectionTemplate>
+    <Card.Root w="100%" maxW="4xl" variant="outline">
+      <Card.Body>
+        <Accordion.Root collapsible >
+          {faqItems.map((item) => {
+            const { index, question, answer } = item;
+            return (
+              <Accordion.Item key={index} value={index}>
+                <Accordion.ItemTrigger py={4}>
+                  <Span flex="1" textAlign="left" fontWeight="medium" textStyle="lg">
+                    {question}
+                  </Span>
+                  {/* The parent trigger automatically handles standard open/close states, 
+                      but if you are using a custom icon, it stays here */}
+                  <Icon name="Plus" size={4} />
+                </Accordion.ItemTrigger>
+                <Accordion.ItemContent pb={4}>
+                  <Accordion.ItemBody color="fg.muted" lineHeight="tall">{answer}</Accordion.ItemBody>
+                </Accordion.ItemContent>
+              </Accordion.Item>
+            );
+          })}
+        </Accordion.Root>
+      </Card.Body>
+    </Card.Root>
   );
-}
+}
\ No newline at end of file
diff --git a/components/services/service-card.tsx b/components/services/service-card.tsx
index 1ab7d38..e37324d 100644
--- a/components/services/service-card.tsx
+++ b/components/services/service-card.tsx
@@ -4,9 +4,7 @@ import NextLink from "next/link";
 
 import { IconName } from "../ui/icons/icon-registry";
 import { Icon } from "../ui/icons/icon";
-import { Card, Image as ChakraImage, Float, Heading } from "@chakra-ui/react";
-import { Link as ChakraLink } from "@chakra-ui/react";
-// import { SimpleGrid } from "@chakra-ui/react"; 
+import { Box, Card, Float, Heading, Link as ChakraLink } from "@chakra-ui/react";
 
 interface ServiceCardProps {
   icon: IconName;
@@ -26,33 +24,47 @@ export default function ServiceCard({
   iconLink,
 }: ServiceCardProps) {
   return (
-    <Card.Root maxW={430} minW={342} borderRadius={8} gapY={8} minH={650}>
-      <ChakraImage asChild borderTopRadius={8}>
-        <Image src={image} alt={imageAlt} width={384} height={286} />
-      </ChakraImage>
-      <Card.Body height={400}>
-        <ChakraLink asChild>
-          <NextLink
-            href={iconLink}
-          >
-            <Float>
+    <Card.Root
+      w="100%"
+      borderRadius="lg"
+      overflow="hidden"
+      variant="outline"
+    >
+      <Box position="relative" w="100%" aspectRatio={4 / 3}>
+        <Image
+          src={image}
+          alt={imageAlt}
+          fill
+          style={{ objectFit: "cover" }}
+        />
+
+        <Float placement="bottom-end" offsetX={6} offsetY={0}>
+          <ChakraLink asChild>
+            <NextLink href={iconLink}>
               <Icon
                 name={icon}
                 bg={"teal.focusRing"}
+                color="white"
                 borderRadius={"lg"}
                 p={4}
                 boxSize={14}
-                position={"absolute"}
-                right={10}
-                top={255}
+                boxShadow="md"
+                aria-label={`Learn more about ${title}`}
+                _hover={{ transform: "scale(1.05)", transition: "all 0.2s" }}
               />
-            </Float>
+            </NextLink>
+          </ChakraLink>
+        </Float>
+      </Box>
 
-          </NextLink>
-        </ChakraLink>
-        <Heading as={"h4"}>{title}</Heading>
-        <Card.Description>{description}</Card.Description>
+      <Card.Body pt={10} pb={6} gap={4}>
+        <Heading as={"h4"} textStyle="xl" fontWeight="semibold">
+          {title}
+        </Heading>
+        <Card.Description textStyle="md" color="fg.muted" lineHeight="tall">
+          {description}
+        </Card.Description>
       </Card.Body>
     </Card.Root>
   );
-}
+}
\ No newline at end of file
diff --git a/components/ui/theme.ts b/components/ui/theme.ts
index 1883eee..4caf642 100644
--- a/components/ui/theme.ts
+++ b/components/ui/theme.ts
@@ -3,11 +3,13 @@ import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"
 const config = defineConfig({
   theme: {
     breakpoints: {
-      mobile: "375px",
-      tablet: "768px",
-      laptop: "1024px",
-      xLarge: "1440px",
-      "2XLarge": "2560px",
+      xs: "320px",
+      sm: "375px",
+      md: "425px",
+      lg: "768px",
+      xl: "1024px",
+      "2xl": "1440px",
+      "4k": "2560px",
     },
     tokens: {
       colors: {
diff --git a/package.json b/package.json
index be5ea36..b53402c 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "eslint . 2>&1",
-    "typecheck": "tsc --noEmit 2>&1"
+    "typecheck": "tsc --noEmit 2>&1",
+    "postinstall": "npx @chakra-ui/cli typegen ./components/ui/theme.ts"
   },
   "dependencies": {
     "@chakra-ui/react": "^3.34.0",
@@ -33,4 +34,4 @@
     "tailwindcss": "^4",
     "typescript": "^5"
   }
-}
+}
\ No newline at end of file