diff --git a/app/services-and-resources/documents/page.tsx b/app/about/documents/page.tsx
similarity index 100%
rename from app/services-and-resources/documents/page.tsx
rename to app/about/documents/page.tsx
diff --git a/app/about/executives/page.tsx b/app/about/executives/page.tsx
index a2f6945..f11285c 100644
--- a/app/about/executives/page.tsx
+++ b/app/about/executives/page.tsx
@@ -90,63 +90,60 @@ export default async function Executives() {
   const executives = await loadExecutives();
 
   return (
-    <div className="">
-      <div className="max-w-6xl mx-auto px-4 py-12 md:py-20">
-        <HeroText text="Our Team"></HeroText>
-
-        <Text as="p">Get to know your 2024-25 ASSU Executive Team.</Text>
-        <Divider />
-
-        <div className="max-w-3xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
-          {executives.map((executive, index) => (
-            <div
-              key={`${executive.name}-${index}`}
-              className="bg-white rounded-lg shadow-sm p-6 md:p-8 flex flex-col space-y-6"
-            >
-              <div className="relative w-full aspect-[4/5] rounded-lg overflow-hidden bg-gray-200">
-                {executive.image ? (
-                  <Image
-                    src={executive.image}
-                    alt={`${executive.name}${
-                      executive.title ? ` - ${executive.title}` : ""
-                    }`}
-                    fill
-                    sizes="(max-width: 768px) 100vw, 50vw"
-                    className="object-cover"
-                  />
-                ) : (
-                  <div className="absolute inset-0 flex items-center justify-center text-gray-400 text-sm">
-                    No image available
-                  </div>
-                )}
-              </div>
-
-              <div className="space-y-3">
-                <Text
-                  as="h2"
-                  className="text-3xl md:text-4xl font-bold text-[var(--color-text-primary)]"
-                >
-                  {executive.name}
-                </Text>
-                {executive.title && (
-                  <Text
-                    as="h3"
-                    className="text-xl md:text-2xl text-[var(--color-text-primary)]"
-                  >
-                    {executive.title}
-                  </Text>
-                )}
-              </div>
+    <div className="mx-auto px-4">
+      <HeroText text="Our Team"></HeroText>
+
+      <Text as="p">Get to know your 2024-25 ASSU Executive Team.</Text>
+
+      <div className="mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
+        {executives.map((executive, index) => (
+          <div
+            key={`${executive.name}-${index}`}
+            className="bg-white rounded-lg shadow-sm p-6 md:p-8 flex flex-col space-y-6"
+          >
+            <div className="relative w-full aspect-[4/5] rounded-lg overflow-hidden bg-gray-200">
+              {executive.image ? (
+                <Image
+                  src={executive.image}
+                  alt={`${executive.name}${
+                    executive.title ? ` - ${executive.title}` : ""
+                  }`}
+                  fill
+                  sizes="(max-width: 768px) 100vw, 50vw"
+                  className="object-cover"
+                />
+              ) : (
+                <div className="absolute inset-0 flex items-center justify-center text-gray-400 text-sm">
+                  No image available
+                </div>
+              )}
+            </div>
 
+            <div className="space-y-3">
               <Text
-                as="p"
-                className="text-[var(--color-text-secondary)] leading-relaxed text-base md:text-lg whitespace-pre-line"
+                as="h2"
+                className="text-3xl md:text-4xl font-bold text-[var(--color-text-primary)]"
               >
-                {executive.bio}
+                {executive.name}
               </Text>
+              {executive.title && (
+                <Text
+                  as="h3"
+                  className="text-xl md:text-2xl text-[var(--color-text-primary)]"
+                >
+                  {executive.title}
+                </Text>
+              )}
             </div>
-          ))}
-        </div>
+
+            <Text
+              as="p"
+              className="text-[var(--color-text-secondary)] leading-relaxed text-base md:text-lg whitespace-pre-line"
+            >
+              {executive.bio}
+            </Text>
+          </div>
+        ))}
       </div>
 
       <Divider />
diff --git a/app/about/page.tsx b/app/about/page.tsx
index f47c3b1..cb78808 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -6,6 +6,7 @@ import VerticalTimeline, {
 } from "@/components/common/VerticalTimeline";
 import MapSection from "@/components/common/MapSection";
 import ContactInfoGrid from "@/components/layout/ContactInfoGrid";
+import HeroText from "@/components/sections/HeroText";
 
 export default function About() {
   const overlays: OverlayBlock[] = [
@@ -28,51 +29,45 @@ export default function About() {
   ];
 
   return (
-    <div className="bg-gray-lighter">
-      <div className="max-w-5xl mx-auto">
-        <AssuImage
-          src="/images/about-assu-hero.webp"
-          alt="University of Toronto campus with historic buildings"
-          overlays={overlays}
-          aspectClassName="aspect-[4/3] md:aspect-[18/9]"
-          sizes="(max-width: 640px) 100vw, (max-width: 980px) 100vw, 980px"
-          className="mb-8"
-        />
-        <Divider borderTopWidth="3px" />
-        <Text as="h2" className="text-5xl font-sans font-bold">
-          About the ASSU
-        </Text>
-        <Divider borderTopWidth="3px" />
-        <Text as="p" className="text-lg">
-          The Arts and Science Students’ Union (ASSU) is the academic student
-          union for over 27,000 full-time undergraduate students in the Faculty
-          of Arts & Science at the University of Toronto. Based in Sidney Smith,
-          1068, ASSU is made up of over 60 course unions, 7 elected executives,
-          and 3 staff members. Through our structure of course unions, we
-          organize with students and community members to hold events, change
-          policies, improve programs, run successful campaigns, and provide
-          support for academic grievances.
-        </Text>
-        <Text as="p" className="text-lg">
-          ASSU recognizes that our academic experience is inherently linked to
-          our lived experience and seeks to support our members in addressing
-          the systemic barriers that they face, including poverty, racism,
-          sexism, homophobia, transphobia, ableism, and discrimination based
-          upon immigration status. We work to ensure that the academic needs and
-          concerns of all students are fulfilled.
-        </Text>
-        <Divider />
-        <VerticalTimeline
-          timelinePoints={assuTimelineData}
-          header="Our History"
-          className="mb-8"
-        />
-        <Divider margin="0" />
-        <ContactInfoGrid />
-        <Divider borderTopWidth="3px" margin="0" />
-        <MapSection title="" description="" className="!py-8" />
-        <Divider borderTopWidth="3px" />
-      </div>
+    <div className=" mx-auto">
+      <AssuImage
+        src="/images/about-assu-hero.webp"
+        alt="University of Toronto campus with historic buildings"
+        overlays={overlays}
+        aspectClassName="aspect-[4/3] md:aspect-[18/9]"
+        sizes="(max-width: 640px) 100vw, (max-width: 980px) 100vw, 980px"
+        className="mb-8"
+      />
+      <HeroText text="About the ASSU"></HeroText>
+      <Text as="p" className="text-lg">
+        The Arts and Science Students’ Union (ASSU) is the academic student
+        union for over 27,000 full-time undergraduate students in the Faculty of
+        Arts & Science at the University of Toronto. Based in Sidney Smith,
+        1068, ASSU is made up of over 60 course unions, 7 elected executives,
+        and 3 staff members. Through our structure of course unions, we organize
+        with students and community members to hold events, change policies,
+        improve programs, run successful campaigns, and provide support for
+        academic grievances.
+      </Text>
+      <Text as="p" className="text-lg">
+        ASSU recognizes that our academic experience is inherently linked to our
+        lived experience and seeks to support our members in addressing the
+        systemic barriers that they face, including poverty, racism, sexism,
+        homophobia, transphobia, ableism, and discrimination based upon
+        immigration status. We work to ensure that the academic needs and
+        concerns of all students are fulfilled.
+      </Text>
+      <Divider />
+      <VerticalTimeline
+        timelinePoints={assuTimelineData}
+        header="Our History"
+        className="mb-8"
+      />
+      <Divider margin="0" />
+      <ContactInfoGrid />
+      <Divider borderTopWidth="3px" margin="0" />
+      <MapSection title="" description="" className="!py-8" />
+      <Divider borderTopWidth="3px" />
     </div>
   );
 }
diff --git a/app/about/staff/page.tsx b/app/about/staff/page.tsx
index 38aa2e3..2927928 100644
--- a/app/about/staff/page.tsx
+++ b/app/about/staff/page.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import Text from "@/components/common/Text";
 import Image from "next/image";
 import HeroText from "@/components/sections/HeroText";
+import Divider from "@/components/common/Divider";
 
 type StaffMember = {
   name: string;
@@ -32,80 +33,73 @@ const staff: StaffMember[] = [
 
 export default function Staff() {
   return (
-    <div className="min-h-screen bg-gray-lighter">
+    <div className="min-h-screen">
       {/* Header Section */}
-      <div className="max-w-3xl mx-auto px-4 py-12 md:py-20">
-        <div className="text-center mb-16">
-          <HeroText text="Our Staff"></HeroText>
-          <Text
-            as="p"
-            className="text-xl md:text-2xl text-[var(--color-text-secondary)] mb-4"
-          >
-            At the heart of the ASSU is a dedicated group of individuals
-            committed to enriching the academic and campus experience for all
-            Arts and Science students at the University of Toronto.
-          </Text>
-          <div className="w-full h-px bg-black opacity-25"></div>
-        </div>
+      <HeroText text="Our Staff"></HeroText>
+      <Text as="p" className=" text-[var(--color-text-secondary)] mb-4">
+        At the heart of the ASSU is a dedicated group of individuals committed
+        to enriching the academic and campus experience for all Arts and Science
+        students at the University of Toronto.
+      </Text>
+      <Divider></Divider>
 
-        {/* Staff Grid */}
-        <div className="max-w-3xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
-          {staff.map((member, index) => (
-            <div
-              key={`${member.name}-${index}`}
-              className="bg-white rounded-lg shadow-sm p-6 md:p-8 flex flex-col space-y-6"
-            >
-              <div className="relative w-full aspect-[4/5] rounded-lg overflow-hidden bg-gray-200">
-                {member.image ? (
-                  <Image
-                    src={member.image}
-                    alt={`${member.name}${
-                      member.title ? ` - ${member.title}` : ""
-                    }`}
-                    fill
-                    sizes="(max-width: 768px) 100vw, 50vw"
-                    className="object-cover"
-                  />
-                ) : (
-                  <div className="absolute inset-0 flex items-center justify-center text-gray-400 text-sm">
-                    No image available
-                  </div>
-                )}
-              </div>
+      {/* Staff Grid */}
+      <div className="mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
+        {staff.map((member, index) => (
+          <div
+            key={`${member.name}-${index}`}
+            className="bg-white rounded-lg shadow-sm p-6 md:p-8 flex flex-col space-y-6"
+          >
+            <div className="relative w-full aspect-[4/5] rounded-lg overflow-hidden bg-gray-200">
+              {member.image ? (
+                <Image
+                  src={member.image}
+                  alt={`${member.name}${
+                    member.title ? ` - ${member.title}` : ""
+                  }`}
+                  fill
+                  sizes="(max-width: 768px) 100vw, 50vw"
+                  className="object-cover"
+                />
+              ) : (
+                <div className="absolute inset-0 flex items-center justify-center text-gray-400 text-sm">
+                  No image available
+                </div>
+              )}
+            </div>
 
-              <div className="space-y-3">
+            <div className="space-y-3">
+              <Text
+                as="h2"
+                className="text-3xl md:text-4xl font-bold text-[var(--color-text-primary)]"
+              >
+                {member.name}
+              </Text>
+              {member.title && (
                 <Text
-                  as="h2"
-                  className="text-3xl md:text-4xl font-bold text-[var(--color-text-primary)]"
+                  as="h3"
+                  className="text-xl md:text-2xl text-[var(--color-text-primary)]"
                 >
-                  {member.name}
+                  {member.title}
                 </Text>
-                {member.title && (
-                  <Text
-                    as="h3"
-                    className="text-xl md:text-2xl text-[var(--color-text-primary)]"
-                  >
-                    {member.title}
-                  </Text>
-                )}
-              </div>
+              )}
+            </div>
 
-              <Text
-                as="p"
-                className="text-[var(--color-text-secondary)] leading-relaxed text-base md:text-lg whitespace-pre-line"
-              >
-                {member.bio}
-              </Text>
+            <Text
+              as="p"
+              className="text-[var(--color-text-secondary)] leading-relaxed text-base md:text-lg whitespace-pre-line"
+            >
+              {member.bio}
+            </Text>
 
-              <a
-                href={`mailto:${member.email}`}
-                className="text-pink font-semibold underline"
-              >
-                {member.email}
-              </a>
-            </div>
-          ))}
-        </div>
+            <a
+              href={`mailto:${member.email}`}
+              className="text-pink font-semibold underline"
+            >
+              {member.email}
+            </a>
+          </div>
+        ))}
       </div>
     </div>
   );
diff --git a/app/awards-and-grants/awards/page.tsx b/app/awards-and-grants/awards/page.tsx
index 65884a6..bfbf4dd 100644
--- a/app/awards-and-grants/awards/page.tsx
+++ b/app/awards-and-grants/awards/page.tsx
@@ -1,6 +1,7 @@
 import Link from "@/components/common/Link";
 import Divider from "../../../components/common/Divider";
 import Tabs, { TabItem } from "../../../components/common/Tabs";
+import HeroText from "@/components/sections/HeroText";
 
 type AwardLink = {
   label: string;
@@ -802,16 +803,7 @@ export default function Awards() {
 
   return (
     <div className="max-w-6xl mx-auto px-4 py-8 space-y-8">
-      {/* Top horizontal line */}
-      <Divider color="var(--color-gray)" borderTopWidth="3px" />
-
-      {/* ASSU Awards Title */}
-      <h1 className="text-4xl font-bold text-gray-darker text-left">
-        ASSU Awards
-      </h1>
-
-      {/* Bottom horizontal line */}
-      <Divider color="var(--color-gray)" borderTopWidth="3px" />
+      <HeroText text="ASSU Awards"></HeroText>
 
       {/* Gavin Nowlan Award Section */}
       <div className="space-y-4">
@@ -837,8 +829,7 @@ export default function Awards() {
         <Tabs tabs={gavinNowlanTabs} defaultActiveTab="criteria" />
       </div>
 
-      {/* Separator line */}
-      <div className="border-t border-gray-light my-8"></div>
+      <Divider color="var(--color-gray-light)" margin="32px auto" />
 
       {/* William Gardner Award Section */}
       <div className="space-y-4">
@@ -864,8 +855,7 @@ export default function Awards() {
         <Tabs tabs={williamGardnerTabs} defaultActiveTab="criteria" />
       </div>
 
-      {/* Separator line */}
-      <div className="border-t border-gray-light my-8"></div>
+      <Divider color="var(--color-gray-light)" margin="32px auto" />
 
       {/* Abdullah Shihipar Award Section */}
       <div className="space-y-4">
@@ -891,8 +881,7 @@ export default function Awards() {
         <Tabs tabs={abdullahShihiparTabs} defaultActiveTab="criteria" />
       </div>
 
-      {/* Separator line */}
-      <div className="border-t border-gray-light my-8"></div>
+      <Divider color="var(--color-gray-light)" margin="32px auto" />
 
       {/* Ikran Jama Award Section */}
       <div className="space-y-4">
@@ -918,8 +907,7 @@ export default function Awards() {
         <Tabs tabs={ikranJamaTabs} defaultActiveTab="criteria" />
       </div>
 
-      {/* Separator line */}
-      <div className="border-t border-gray-light my-8"></div>
+      <Divider color="var(--color-gray-light)" margin="32px auto" />
 
       {/* Fatemeh Nami Award Section */}
       <div className="space-y-4">
@@ -945,8 +933,7 @@ export default function Awards() {
         <Tabs tabs={fatemehNamiTabs} defaultActiveTab="criteria" />
       </div>
 
-      {/* Separator line */}
-      <div className="border-t border-gray-light my-8"></div>
+      <Divider color="var(--color-gray-light)" margin="32px auto" />
 
       {/* ASSU First Year Award Section */}
       <div className="space-y-4">
@@ -972,8 +959,7 @@ export default function Awards() {
         <Tabs tabs={firstYearTabs} defaultActiveTab="criteria" />
       </div>
 
-      {/* Separator line */}
-      <div className="border-t border-gray-light my-8"></div>
+      <Divider color="var(--color-gray-light)" margin="32px auto" />
 
       {/* ASSU 2nd Year Award Section */}
       <div className="space-y-4">
@@ -999,8 +985,7 @@ export default function Awards() {
         <Tabs tabs={secondYearTabs} defaultActiveTab="criteria" />
       </div>
 
-      {/* Separator line */}
-      <div className="border-t border-gray-light my-8"></div>
+      <Divider color="var(--color-gray-light)" margin="32px auto" />
 
       {/* Ranjini Ghosh Teaching Award Section */}
       <div className="space-y-4">
@@ -1026,8 +1011,7 @@ export default function Awards() {
         <Tabs tabs={teachingAwardTabs} defaultActiveTab="criteria" />
       </div>
 
-      {/* Separator line */}
-      <div className="border-t border-gray-light my-8"></div>
+      <Divider color="var(--color-gray-light)" margin="32px auto" />
 
       {/* Sanjeev Dewett Course Union Award Section */}
       <div className="space-y-4">
@@ -1053,8 +1037,7 @@ export default function Awards() {
         <Tabs tabs={courseUnionAwardTabs} defaultActiveTab="criteria" />
       </div>
 
-      {/* Separator line */}
-      <div className="border-t border-gray-light my-8"></div>
+      <Divider color="var(--color-gray-light)" margin="32px auto" />
 
       {/* Terry Buckland Award Section */}
       <div className="space-y-4">
@@ -1066,8 +1049,7 @@ export default function Awards() {
         <Tabs tabs={terryBucklandTabs} defaultActiveTab="criteria" />
       </div>
 
-      {/* Separator line */}
-      <div className="border-t border-gray-light my-8"></div>
+      <Divider color="var(--color-gray-light)" margin="32px auto" />
 
       {/* Urmila Sarkar Service Award Section */}
       <div className="space-y-4">
@@ -1079,8 +1061,7 @@ export default function Awards() {
         <Tabs tabs={urmilaSarkarTabs} defaultActiveTab="criteria" />
       </div>
 
-      {/* Separator line */}
-      <div className="border-t border-gray-light my-8"></div>
+      <Divider color="var(--color-gray-light)" margin="32px auto" />
 
       {/* Katharine Ball Award Section */}
       <div className="space-y-4">
@@ -1106,8 +1087,7 @@ export default function Awards() {
         <Tabs tabs={katharineBallTabs} defaultActiveTab="criteria" />
       </div>
 
-      {/* Separator line */}
-      <div className="border-t border-gray-light my-8"></div>
+      <Divider color="var(--color-gray-light)" margin="32px auto" />
 
       {/* Ali Saeed Memorial Award Section */}
       <div className="space-y-4">
@@ -1133,8 +1113,7 @@ export default function Awards() {
         <Tabs tabs={aliSaeedTabs} defaultActiveTab="criteria" />
       </div>
 
-      {/* Separator line */}
-      <div className="border-t border-gray-light my-8"></div>
+      <Divider color="var(--color-gray-light)" margin="32px auto" />
 
       {/* ASSU Graduating Student Leadership Award Section */}
       <div className="space-y-4">
@@ -1160,7 +1139,6 @@ export default function Awards() {
         <Tabs tabs={graduatingStudentTabs} defaultActiveTab="criteria" />
       </div>
 
-      {/* Separator line */}
       <div className="border-t border-gray-light my-8"></div>
 
       {/* ASSU New Student Initiative Award Section */}
diff --git a/app/awards-and-grants/grants/page.tsx b/app/awards-and-grants/grants/page.tsx
index a14147a..a3229b1 100644
--- a/app/awards-and-grants/grants/page.tsx
+++ b/app/awards-and-grants/grants/page.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import ContentGrid, { ContentItem } from "@/components/layout/ContentGrid";
 import Divider from "@/components/common/Divider";
 import Link from "@/components/common/Link";
+import HeroText from "@/components/sections/HeroText";
 
 // Grid items for the Grants page
 const items: ContentItem[] = [
@@ -11,17 +12,7 @@ const items: ContentItem[] = [
     id: "travel-grant",
     title: "ASSU Travel Grant",
     mergeKey: "travel",
-    node: (
-      <div className="flex items-start gap-3">
-        {/* <AssuImage
-          src="/svg/abs-shape.svg"
-          alt=""
-          className="w-6 h-6 shrink-0"
-          imgClassName="w-full h-full object-contain"
-          radiusClassName=""
-        /> */}
-      </div>
-    ),
+    node: <div />,
   },
   {
     id: "travel-grant-desc",
@@ -46,17 +37,7 @@ const items: ContentItem[] = [
     id: "deferred-exam-fee-1",
     title: "Deferred Exam Fee Grant",
     mergeKey: "defer",
-    node: (
-      <div className="flex items-start gap-3">
-        {/* <AssuImage
-          src="/svg/droplet.svg"
-          alt=""
-          className="w-6 h-6 shrink-0"
-          imgClassName="w-full h-full object-contain"
-          radiusClassName=""
-        /> */}
-      </div>
-    ),
+    node: <div />,
   },
   {
     id: "deferred-exam-fee-1-desc",
@@ -82,17 +63,7 @@ const items: ContentItem[] = [
     id: "donation-requests",
     title: "Donation Requests",
     mergeKey: "donation",
-    node: (
-      <div className="flex items-start gap-3">
-        {/* <AssuImage
-          src="/svg/heart.svg"
-          alt=""
-          className="w-6 h-6 shrink-0"
-          imgClassName="w-full h-full object-contain"
-          radiusClassName=""
-        /> */}
-      </div>
-    ),
+    node: <div />,
   },
   {
     id: "donation-requests-desc",
@@ -118,37 +89,29 @@ const items: ContentItem[] = [
 
 export default function GrantsPage() {
   return (
-    <div className="min-h-screen bg-gray-lighter" aria-labelledby="page-title">
-      <main className="max-w-5xl mx-auto px-6 py-12">
-        <Divider />
-        <h1 id="page-title" className="text-4xl font-bold mb-8">
-          ASSU Grants
-        </h1>
-        <Divider />
+    <div className="min-h-screen " aria-labelledby="page-title">
+      <HeroText text="ASSU Grants"></HeroText>
 
-        {/* Top notice line under the heading */}
-        <p className="mt-6 mb-8 text-base md:text-lg text-gray-700">
-          All forms should be submitted to{" "}
-          <Link href="/contact-us">ASSU office (Sid Smith Room 1068)</Link>, or
-          email{" "}
-          <Link href="mailto:students.assu@utoronto.ca">
-            students.assu@utoronto.ca
-          </Link>
-          .
-        </p>
+      <p className="mt-6 mb-8 text-base md:text-lg text-gray-700">
+        All forms should be submitted to{" "}
+        <Link href="/contact-us">ASSU office (Sid Smith Room 1068)</Link>, or
+        email{" "}
+        <Link href="mailto:students.assu@utoronto.ca">
+          students.assu@utoronto.ca
+        </Link>
+        .
+      </p>
 
-        <Divider />
+      <Divider margin="0" />
 
-        {/* ContentGrid draws the thin separators between cells like the mock */}
-        <ContentGrid
-          items={items}
-          columns={2}
-          ariaLabel="ASSU grants grid"
-          className="mt-2"
-        />
+      <ContentGrid
+        items={items}
+        columns={2}
+        ariaLabel="ASSU grants grid"
+        className="mt-2"
+      />
 
-        <Divider />
-      </main>
+      <Divider />
     </div>
   );
 }
diff --git a/app/awards-and-grants/page.tsx b/app/awards-and-grants/page.tsx
index adf602f..a13fbac 100644
--- a/app/awards-and-grants/page.tsx
+++ b/app/awards-and-grants/page.tsx
@@ -43,13 +43,11 @@ export default function AwardsAndGrants() {
         Check eligibility, application deadlines, and get guidance on securing
         funding for your academic journey.
       </Text>
-      <Divider />
-      {/* add content grid here */}
+      <Divider margin="0" />
       <ContentGrid
         items={contentItems}
         columns={2}
         ariaLabel="Awards and grants options"
-        className="mt-6"
       />
     </div>
   );
diff --git a/app/contact-us/page.tsx b/app/contact-us/page.tsx
index cbbb4c2..9701a6f 100644
--- a/app/contact-us/page.tsx
+++ b/app/contact-us/page.tsx
@@ -2,11 +2,11 @@
 
 import Divider from "../../components/common/Divider";
 import MapSection from "../../components/common/MapSection";
-import Link from "@/components/common/Link";
 import Accordion, {
   type AccordionItemData,
 } from "@/components/common/Accordion";
 import HeroText from "@/components/sections/HeroText";
+import ContactInfoGrid from "@/components/layout/ContactInfoGrid";
 
 const faqItems: AccordionItemData[] = [
   {
@@ -55,101 +55,28 @@ const faqItems: AccordionItemData[] = [
 
 export default function ContactUs() {
   return (
-    <div className="bg-gray-lighter min-h-screen">
-      <div className="max-w-3xl mx-auto px-4 py-8">
-        <HeroText text="Frequently Asked Questions" />
-        <div className="mb-8">
-          <Accordion items={faqItems} />
-        </div>
+    <div>
+      <HeroText text="Frequently Asked Questions" />
+      <Accordion items={faqItems} />
 
-        {/* removed unused contact form, TODO LATER */}
+      {/* removed unused contact form, TODO LATER */}
+      <Divider margin="0" />
+      <ContactInfoGrid></ContactInfoGrid>
+      <Divider margin="0" />
 
-        {/* Contact Information Section - 4 columns */}
-        <div className="mb-8 max-w-3xl">
-          <Divider borderTopWidth="4px" />
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 py-8">
-            {/* Column 1 - Three dots SVG and Contact Us */}
-            <div className="text-left">
-              <h3 className="text-base font-sans text-gray-darker font-semibold">
-                Contact Us
-              </h3>
-            </div>
-            {/* Column 2 - Address */}
-            <div className="text-left relative">
-              <div className="hidden md:block absolute left-0 top-0 bottom-0 w-px bg-gray-light -ml-20"></div>
-              <div className="md:-ml-16">
-                <h3 className="text-base font-sans text-gray-darker font-semibold mb-3 text-left">
-                  Address
-                </h3>
-                <div className="text-gray-dark font-body text-left text-sm">
-                  <p className="text-left">100 St. George Street</p>
-                  <p className="text-left">Sidney Smith Hall</p>
-                  <p className="text-left">Room 1068</p>
-                </div>
-              </div>
-            </div>
-
-            {/* Column 3 - Contact Details */}
-            <div className="text-left relative">
-              <div className="hidden md:block absolute left-0 top-0 bottom-0 w-px bg-gray-light -ml-20"></div>
-              <div className="md:-ml-16">
-                <h3 className="text-base font-sans text-gray-darker font-semibold mb-3 text-left">
-                  Contact
-                </h3>
-                <div className="text-gray-dark font-body space-y-1 text-left text-sm">
-                  <p className="text-left">Phone: (416) 978-4903</p>
-                  <p className="text-left">Fax: (416) 971-2161</p>
-                  <p className="mt-2 text-left">students.assu@utoronto.ca</p>
-                  <div className="flex gap-3 mt-4 justify-start">
-                    <Link href="https://www.linkedin.com/company/uoft-assu/about/">
-                      Linkedin
-                    </Link>
-                    <Link href="https://www.instagram.com/assu_uoft/?hl=en">
-                      Instagram
-                    </Link>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Column 4 - Opening Hours */}
-            <div className="text-left relative">
-              <div className="hidden md:block absolute left-0 top-0 bottom-0 w-px bg-gray-light -ml-20"></div>
-              <div className="md:-ml-16">
-                <h3 className="text-base font-sans text-gray-darker font-semibold mb-3 text-left">
-                  Opening Hours
-                </h3>
-                <div className="text-gray-dark font-body space-y-1 text-left text-sm">
-                  <p className="text-left">Monday 10:00 am - 5:00 pm</p>
-                  <p className="text-left">Tuesday 10:00 am - 5:00 pm</p>
-                  <p className="text-left">Wednesday 10:00 am - 6:00 pm</p>
-                  <p className="text-left">Thursday 10:00 am - 6:00 pm</p>
-                  <p className="text-left">
-                    Friday 10:00 am - 5:00 pm (Friday closed from May-Aug)
-                  </p>
-                  <p className="font-bold text-left">Weekends Closed</p>
-                </div>
-              </div>
-            </div>
-          </div>
-          {/* Final thick horizontal line */}
-          <Divider borderTopWidth="4px" />
-        </div>
-
-        {/* Map Section */}
-        <MapSection
-          title=""
-          description=""
-          mapConfig={{
-            lat: 43.6629,
-            lng: -79.3957,
-            zoom: 15,
-            height: "400px",
-            markerTitle: "ASSU - Sidney Smith Hall",
-            ariaLabel: "Map showing ASSU location at Sidney Smith Hall",
-          }}
-        />
-      </div>
+      {/* Map Section */}
+      <MapSection
+        title=""
+        description=""
+        mapConfig={{
+          lat: 43.6629,
+          lng: -79.3957,
+          zoom: 15,
+          height: "400px",
+          markerTitle: "ASSU - Sidney Smith Hall",
+          ariaLabel: "Map showing ASSU location at Sidney Smith Hall",
+        }}
+      />
     </div>
   );
 }
diff --git a/app/course-unions/page.tsx b/app/course-unions/page.tsx
index 7f962ce..11f9764 100644
--- a/app/course-unions/page.tsx
+++ b/app/course-unions/page.tsx
@@ -39,50 +39,51 @@ export default async function CourseUnionsPage() {
   const unions = await loadCourseUnions();
 
   return (
-    <main className="min-h-screen bg-gray-lighter" aria-labelledby="page-title">
-      <div className="max-w-3xl mx-auto px-4 py-8 md:py-12">
-        <HeroText text="Course Unions" />
-        <Text
-          as="p"
-          className="text-base md:text-xl lg:text-2xl text-[var(--color-text-primary)] mb-4"
-        >
-          Course Unions are the core of the Arts and Science Students&apos;
-          Union. From A to Z, Anthropology to Women & Gender Studies, these
-          academic unions represent the students in disciplines within the
-          Faculty of Arts and Science and by taking any course you are
-          automatically a part of them.
-          <br />
-          <br />
-          We have nearly 55 active Course Unions offering several academic and
-          social services for their members. While each Course Union is unique,
-          both in vision and in form, all share the common goals of meeting
-          students&apos; needs and representing students&apos; views.
-        </Text>
-        <section aria-label="Course unions list" className="mt-10">
-          <Accordion type="single" collapsible className="w-full">
-            {unions.map((union, index) => (
-              <AccordionItem
-                key={`${union.name}-${index}`}
-                value={`${union.name}-${index}`}
-              >
-                <AccordionTrigger>
-                  <span className="flex-1 text-left">{union.name}</span>
-                </AccordionTrigger>
-                <AccordionContent className="pt-4">
-                  <a
-                    href={union.link}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="text-pink underline break-words"
-                  >
-                    {union.link}
-                  </a>
-                </AccordionContent>
-              </AccordionItem>
-            ))}
-          </Accordion>
-        </section>
-      </div>
-    </main>
+    <div aria-labelledby="page-title">
+      <HeroText text="Course Unions" />
+      <Text
+        as="p"
+        className="text-base md:text-xl lg:text-2xl text-[var(--color-text-primary)] mb-4"
+      >
+        Course Unions are the core of the Arts and Science Students&apos; Union.
+        From A to Z, Anthropology to Women & Gender Studies, these academic
+        unions represent the students in disciplines within the Faculty of Arts
+        and Science and by taking any course you are automatically a part of
+        them.
+      </Text>
+      <Text
+        as="p"
+        className="text-base md:text-xl lg:text-2xl text-[var(--color-text-primary)] mb-4"
+      >
+        We have nearly 55 active Course Unions offering several academic and
+        social services for their members. While each Course Union is unique,
+        both in vision and in form, all share the common goals of meeting
+        students&apos; needs and representing students&apos; views.
+      </Text>
+      <section aria-label="Course unions list" className="mt-5">
+        <Accordion type="single" collapsible className="w-full">
+          {unions.map((union, index) => (
+            <AccordionItem
+              key={`${union.name}-${index}`}
+              value={`${union.name}-${index}`}
+            >
+              <AccordionTrigger>
+                <span className="flex-1 text-left">{union.name}</span>
+              </AccordionTrigger>
+              <AccordionContent className="pt-4">
+                <a
+                  href={union.link}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="text-pink underline break-words"
+                >
+                  {union.link}
+                </a>
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </section>
+    </div>
   );
 }
diff --git a/app/course-unions/union-resources/page.tsx b/app/course-unions/union-resources/page.tsx
index cfa7f3b..f8f3b2f 100644
--- a/app/course-unions/union-resources/page.tsx
+++ b/app/course-unions/union-resources/page.tsx
@@ -48,8 +48,8 @@ export default function UnionResources() {
   ];
 
   return (
-    <div className="bg-gray-lighter p-8">
-      <div className="max-w-7xl mx-auto">
+    <div className="p-8">
+      <div className="mx-auto">
         {/* Main layout container */}
         <div className="flex flex-col sm:flex-row">
           {/* Left side - Header, description, contact, and diamonds */}
diff --git a/app/get-involved/current/page.tsx b/app/get-involved/current/page.tsx
index aa42552..b6629f5 100644
--- a/app/get-involved/current/page.tsx
+++ b/app/get-involved/current/page.tsx
@@ -1,5 +1,6 @@
 import HeroImage from "@/components/sections/HeroImage";
 import Divider from "@/components/common/Divider";
+import HeroText from "@/components/sections/HeroText";
 
 export default function Current() {
   // Current projects data based on the Wix site with specific text formatting
@@ -103,18 +104,8 @@ export default function Current() {
   return (
     <div className="min-h-screen bg-[rgb(243,243,243)]">
       {/* Current Projects Section */}
-      <section className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
-        {/* Divider above Current Projects */}
-        <Divider className="mb-8" color="black" />
-
-        <div className="mb-8">
-          <h1 className="text-4xl md:text-5xl font-bold text-black mb-4">
-            Current Projects
-          </h1>
-          {/* Divider below title */}
-          <Divider className="mb-8" color="black" />
-        </div>
-
+      <section className="mx-auto px-4 sm:px-6 lg:px-8 py-10">
+        <HeroText text="Current Projects"></HeroText>
         {/* Projects Grid - Responsive layout */}
         <div className="bg-[rgb(243,243,243)]">
           {/* Mobile: Single column layout */}
@@ -338,7 +329,7 @@ export default function Current() {
       </section>
 
       {/* Hero Image Section */}
-      <section className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 -mb-4">
+      <section className="mx-auto px-4 sm:px-6 lg:px-8 -mb-4">
         <HeroImage
           src="/images/involved-current-projects.webp"
           alt="University building with spire and green dome"
@@ -348,20 +339,11 @@ export default function Current() {
       </section>
 
       {/* Achievements Section */}
-      <section className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-2">
-        {/* Divider above Achievements */}
-        <Divider className="mb-8" color="black" />
-
-        <div className="mb-4">
-          <h2 className="text-4xl md:text-5xl font-bold text-black mb-4">
-            Achievements in the Past Year
-          </h2>
-          {/* Divider below title */}
-          <Divider className="mb-1" color="black" />
-        </div>
+      <section className="mx-auto px-4 sm:px-6 lg:px-8 pt-6 pb-2">
+        <HeroText text="Achievements"></HeroText>
 
         {/* Simple bulleted list */}
-        <div className="max-w-4xl mx-auto">
+        <div className="mx-auto">
           <ul className="space-y-0.1">
             {achievements.map((achievement, index) => (
               <li key={index} className="text-xl text-black flex items-start">
diff --git a/app/get-involved/initiatives/page.tsx b/app/get-involved/initiatives/page.tsx
index fd795b8..0bd9502 100644
--- a/app/get-involved/initiatives/page.tsx
+++ b/app/get-involved/initiatives/page.tsx
@@ -5,6 +5,7 @@ import Button from "@/components/common/Button";
 import ContentGrid, { ContentItem } from "@/components/layout/ContentGrid";
 import Divider from "@/components/common/Divider";
 import AssuImage from "@/components/common/AssuImage";
+import HeroText from "@/components/sections/HeroText";
 
 // Content items for the Initiatives page (pairs row-by-row in the grid)
 const items: ContentItem[] = [
@@ -80,24 +81,13 @@ const items: ContentItem[] = [
 
 export default function InitiativesPage() {
   return (
-    <div className="min-h-screen bg-gray-lighter" aria-labelledby="page-title">
-      <main className="max-w-5xl mx-auto px-6 py-12">
-        <Divider />
-        <h1 id="page-title" className="text-4xl font-bold mb-8">
-          Our Initiatives
-        </h1>
-        <Divider />
+    <div aria-labelledby="page-title">
+      <HeroText text="Our Initiatives"></HeroText>
 
-        {/* ContentGrid draws the thin separators between cells like the mock */}
-        <ContentGrid
-          items={items}
-          columns={2}
-          ariaLabel="Initiatives grid"
-          className="mt-6"
-        />
+      {/* ContentGrid draws the thin separators between cells like the mock */}
+      <ContentGrid items={items} columns={2} ariaLabel="Initiatives grid" />
 
-        <Divider />
-      </main>
+      <Divider />
     </div>
   );
 }
diff --git a/app/get-involved/page.tsx b/app/get-involved/page.tsx
index 57f1ee1..40458df 100644
--- a/app/get-involved/page.tsx
+++ b/app/get-involved/page.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import Button from "@/components/common/Button";
 import ContentGrid, { ContentItem } from "@/components/layout/ContentGrid";
 import Divider from "@/components/common/Divider";
+import HeroText from "@/components/sections/HeroText";
 
 // Define data
 const items: ContentItem[] = [
@@ -57,19 +58,15 @@ const items: ContentItem[] = [
 
 export default function GetInvolved() {
   return (
-    <div className="min-h-screen bg-gray-lighter" aria-labelledby="page-title">
+    <div aria-labelledby="page-title">
       <main className="max-w-5xl mx-auto px-6 py-12">
-        <Divider />
-        {/* Page Title */}
-        <h1 className="text-4xl font-bold mb-8">Get Involved</h1>
-        <Divider />
+        <HeroText text="Get Involved"></HeroText>
 
-        {/* ContentGrid draws the thin separators between cells like the mock */}
         <ContentGrid
           items={items}
           columns={2}
           ariaLabel="Get Involved options"
-          className="mt-6"
+          className="mb-6"
         />
 
         <Divider />
diff --git a/app/get-involved/upcoming/page.tsx b/app/get-involved/upcoming/page.tsx
index 2560bee..e360b7b 100644
--- a/app/get-involved/upcoming/page.tsx
+++ b/app/get-involved/upcoming/page.tsx
@@ -17,40 +17,18 @@ export default async function Upcoming() {
   // Fetch upcoming posts data at build time
   const allPosts = await fetchUpcomingPosts();
 
-  // Get current date (at start of day for comparison)
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-
-  // Separate upcoming and past events
-  const upcomingPosts = allPosts.filter((post) => {
-    // Clone the date to avoid mutating the original
-    const postDate = new Date(post.dateObj.getTime());
-    postDate.setHours(0, 0, 0, 0);
-    return postDate >= today;
-  });
-
-  const pastPosts = allPosts.filter((post) => {
-    // Clone the date to avoid mutating the original
-    const postDate = new Date(post.dateObj.getTime());
-    postDate.setHours(0, 0, 0, 0);
-    return postDate < today;
-  });
-
-  // Sort upcoming posts by date (earliest first) and past posts by date (newest first)
-  upcomingPosts.sort((a, b) => a.dateObj.getTime() - b.dateObj.getTime());
-  pastPosts.sort((a, b) => b.dateObj.getTime() - a.dateObj.getTime());
-
-  console.log(
-    `Filtered posts: ${upcomingPosts.length} upcoming, ${pastPosts.length} past`
+  // Sort all events by date (newest first)
+  const sortedPosts = [...allPosts].sort(
+    (a, b) => b.dateObj.getTime() - a.dateObj.getTime()
   );
 
   return (
     <>
       <HeroText text="Events" />
-      {pastPosts.length > 0 && <BlogList posts={pastPosts} />}
-      {pastPosts.length === 0 && (
+      {sortedPosts.length > 0 && <BlogList posts={sortedPosts} />}
+      {sortedPosts.length === 0 && (
         <p className="text-center text-gray-dark py-8">
-          No past events to display.
+          No events to display.
         </p>
       )}
     </>
diff --git a/app/not-found.tsx b/app/not-found.tsx
index 3d2ed93..8f9dc0d 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -15,7 +15,6 @@ export default function NotFound() {
         404
       </Text>
 
-      {/* Error Message */}
       <Text
         as="h2"
         className="text-2xl md:text-3xl font-semibold mb-4"
diff --git a/app/palette/page.tsx b/app/palette/page.tsx
deleted file mode 100644
index c0b2d8b..0000000
--- a/app/palette/page.tsx
+++ /dev/null
@@ -1,329 +0,0 @@
-import AssuImage from "components/common/AssuImage";
-import Button from "components/common/Button";
-import ImageCard from "components/common/ImageCard";
-import CardGrid from "components/layout/CardGrid";
-import { ImageCarousel } from "@/components/common/ImageCarousel";
-import Tabs, { TabItem } from "components/common/Tabs";
-import ContentGrid from "@/components/layout/ContentGrid";
-import MapSection from "@/components/common/MapSection";
-
-const tabsData: TabItem[] = [
-  {
-    id: "tab1",
-    label: "Title 1",
-    content: (
-      <div>
-        <h3 className="text-xl font-sans font-bold text-gray-darker mb-3">
-          Title 1
-        </h3>
-        <p className="text-gray-dark mb-4">
-          Description 1. This is some sample text content for the first tab. You
-          can put any content here that you want to display when this tab is
-          active.
-        </p>
-        <p className="text-gray-dark">
-          Additional description text for tab 1 content area.
-        </p>
-      </div>
-    ),
-  },
-  {
-    id: "tab2",
-    label: "Title 2",
-    content: (
-      <div>
-        <h3 className="text-xl font-sans font-bold text-gray-darker mb-3">
-          Title 2
-        </h3>
-        <p className="text-gray-dark mb-4">
-          Description 2. This is some sample text content for the second tab.
-          You can customize this content as needed for your specific use case.
-        </p>
-        <p className="text-gray-dark">
-          Additional description text for tab 2 content area.
-        </p>
-      </div>
-    ),
-  },
-  {
-    id: "tab3",
-    label: "Title 3",
-    content: (
-      <div>
-        <h3 className="text-xl font-sans font-bold text-gray-darker mb-3">
-          Title 3
-        </h3>
-        <p className="text-gray-dark mb-4">
-          Description 3. This is some sample text content for the third tab. The
-          tab component supports as many tabs as you need.
-        </p>
-        <p className="text-gray-dark">
-          Additional description text for tab 3 content area.
-        </p>
-      </div>
-    ),
-  },
-];
-
-export default function Home() {
-  return (
-    <>
-      <div className="min-h-screen bg-gray-lighter p-8">
-        <div className="max-w-4xl mx-auto">
-          {/* Page Title */}
-          {/* Page Title */}
-          <h1 className="text-6xl font-sans text-gray-darker mb-8">
-            ASSU Styling Demo
-          </h1>
-
-          {/* Colors & Typography Section */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
-            {/* Brand Colors */}
-            {/* Brand Colors */}
-            <div className="bg-white p-6 rounded-lg shadow-lg">
-              <h2 className="text-3xl font-sans text-pink mb-4">
-                Primary Brand Color
-              </h2>
-              <div className="space-y-2">
-                <div className="flex items-center gap-3">
-                  <div className="w-12 h-12 bg-pink rounded"></div>
-                  <span className="font-body text-gray-darker">
-                    Primary Pink (pink) - Most used color
-                  </span>
-                </div>
-                <div className="flex items-center gap-3">
-                  <div className="w-8 h-8 bg-pink-light rounded"></div>
-                  <span className="font-body text-gray-darker">
-                    Light Pink (pink-light)
-                  </span>
-                </div>
-                <div className="flex items-center gap-3">
-                  <div className="w-8 h-8 bg-pink-lighter rounded"></div>
-                  <span className="font-body text-gray-darker">
-                    Lighter Pink (pink-lighter)
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            {/* Typography */}
-            {/* Typography */}
-            <div className="bg-white p-6 rounded-lg shadow-lg">
-              <h2 className="text-3xl font-sans text-pink mb-4">Typography</h2>
-              <div className="space-y-2">
-                <p className="text-2xl font-sans text-gray-darker">
-                  Questrial Heading
-                </p>
-                <p className="text-lg font-body text-gray-dark">
-                  din-next-w01-light Body
-                </p>
-                <p className="text-base font-body text-gray">Secondary Text</p>
-                <p className="text-sm font-body text-gray-light">Small Text</p>
-              </div>
-            </div>
-          </div>
-
-          {/* Buttons */}
-          <div className="bg-white p-6 rounded-lg shadow-lg mb-8">
-            <h2 className="text-3xl font-sans text-pink mb-8">
-              ASSU Button Styles
-            </h2>
-            <div className="flex flex-wrap gap-4">
-              <Button>Button</Button>
-            </div>
-          </div>
-
-          <div className="mb-8">
-            <Tabs tabs={tabsData} defaultActiveTab="tab1" />
-          </div>
-
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <div className="bg-pink p-4 rounded text-center">
-              <div className="text-2xl font-sans text-white">Primary Pink</div>
-              <div className="text-sm font-body text-white">pink</div>
-            </div>
-            <div className="bg-pink-light p-4 rounded text-center">
-              <div className="text-2xl font-sans text-gray-darker">
-                Light Pink
-              </div>
-              <div className="text-sm font-body text-gray-dark">pink-light</div>
-            </div>
-            <div className="bg-pink-lighter p-4 rounded text-center">
-              <div className="text-2xl font-sans text-gray-darker">
-                Lighter Pink
-              </div>
-              <div className="text-sm font-body text-gray-dark">
-                pink-lighter
-              </div>
-            </div>
-            <div className="bg-blue-dark p-4 rounded text-center">
-              <div className="text-2xl font-sans text-white">Dark Blue</div>
-              <div className="text-sm font-body text-white">blue-dark</div>
-            </div>
-          </div>
-
-          {/* Image Card */}
-          <div className="mt-10 bg-white p-6 rounded-lg shadow-lg mb-8">
-            <h2 className="text-3xl font-sans text-pink mb-8">Image Card</h2>
-            <div className="flex flex-wrap gap-4">
-              <ImageCard
-                size="sm"
-                subtitle="date here"
-                description="description here"
-                imageSrc="/images/gallery-2.webp"
-                title="Image Card Example"
-                imageAltText="Image card example"
-              />
-            </div>
-          </div>
-
-          {/* Image Card Grid */}
-          <div className="mt-10 bg-white p-6 rounded-lg shadow-lg mb-8">
-            <h2 className="text-3xl font-sans text-pink mb-8">
-              Image Card Grid
-            </h2>
-            <div className="flex flex-wrap gap-4">
-              <CardGrid
-                columns={4}
-                ariaLabel="Unions grid"
-                items={[
-                  {
-                    id: "raffle",
-                    imageSrc: "/images/gallery-1.webp",
-                    imageAltText: "Students holding a raffle sign",
-                    title: "Test Raffle Contest",
-                    subtitle: "Mar 4, 2025",
-                    description: "Enter our test raffle contest!",
-                    href: "/events/test-raffle",
-                  },
-                  {
-                    id: "asa",
-                    imageSrc: "/images/gallery-2.webp",
-                    imageAltText: "Anthropology club photo",
-                    title: "Anthropology Students' Association (ASA)",
-                    href: "/unions/asa",
-                  },
-                  {
-                    id: "raffle2",
-                    imageSrc: "/images/gallery-1.webp",
-                    imageAltText: "Students holding a raffle sign",
-                    title: "Test Raffle Contest",
-                    subtitle: "Mar 4, 2025",
-                    description: "Enter our test raffle contest!",
-                    href: "/events/test-raffle",
-                  },
-                  {
-                    id: "asa2",
-                    imageSrc: "/images/gallery-2.webp",
-                    imageAltText: "Anthropology club photo",
-                    title: "Anthropology Students' Association (ASA)",
-                    href: "/unions/asa",
-                  },
-                ]}
-              />
-            </div>
-          </div>
-
-          {/* Content Grid */}
-          <div className="mt-10 bg-white p-6 rounded-lg shadow-lg mb-8">
-            <h2 className="text-3xl font-sans text-pink mb-8">
-              Image Card Grid
-            </h2>
-            <div className="flex flex-wrap gap-4">
-              <ContentGrid
-                items={[
-                  {
-                    id: "current1",
-                    title: "Increasing Accessibility",
-                    description: "Increasing Accessibility on campus",
-                    ariaLabel: "Increasing Accessibility on campus",
-                    node: <Button>Button</Button>,
-                  },
-                  {
-                    id: "current2",
-                    title: "Ethics pre-requisite",
-                    description: "Ethics pre-requisite module",
-                    ariaLabel: "Ethics pre-requisite module",
-                    node: <Button>Button</Button>,
-                  },
-                  {
-                    id: "current3",
-                    title: "Syllabus archive",
-                    description: "Digital Syllabus archive",
-                    ariaLabel: "Digital Syllabus archive",
-                    node: <Button>Button</Button>,
-                  },
-                  {
-                    id: "current4",
-                    title: "Room 1068",
-                    description: "Revitalizing Room 1068 ASSU Podcast",
-                    ariaLabel: "Revitalizing Room 1068 ASSU Podcast",
-                    node: <Button>Button</Button>,
-                  },
-                ]}
-                columns={2}
-                ariaLabel="content grid"
-              />
-            </div>
-          </div>
-
-          <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 gap-6">
-            <AssuImage
-              src="/next.svg"
-              alt="Next.js logo"
-              caption="Regular image with overlay"
-              sizes="(max-width: 640px) 100vw, 50vw"
-              aspectClassName="aspect-square"
-              overlays={[
-                {
-                  content: (
-                    <span className="inline-block rounded bg-black/40 px-2 py-1 text-sm">
-                      Top left title
-                    </span>
-                  ),
-                  position: "top-left",
-                },
-                {
-                  content: (
-                    <span className="inline-block rounded bg-black/40 px-2 py-1 text-xs">
-                      Bottom right description
-                    </span>
-                  ),
-                  position: "bottom-right",
-                },
-              ]}
-            />
-
-            <AssuImage
-              src="/public-not-exist.svg"
-              alt="Broken image example"
-              caption="Demonstrates error fallback"
-              overlay=""
-              sizes="(max-width: 640px) 100vw, 50vw"
-              aspectClassName="aspect-[4/3]"
-            />
-          </div>
-
-          <main className="min-h-screen bg-gray-100">
-            <ImageCarousel />
-          </main>
-
-          {/* Map Section */}
-          <MapSection
-            title=""
-            description=""
-            mapConfig={{
-              lat: 37.4419, // Stanford University coordinates
-              lng: -122.1419,
-              zoom: 16,
-              height: "600px",
-              markerTitle: "ASSU Office Location",
-              ariaLabel:
-                "Interactive map showing ASSU office location at Stanford University",
-            }}
-          />
-        </div>
-      </div>
-    </>
-  );
-}
diff --git a/app/services-and-resources/handbook/page.tsx b/app/services-and-resources/handbook/page.tsx
index c5d62c2..7d5e414 100644
--- a/app/services-and-resources/handbook/page.tsx
+++ b/app/services-and-resources/handbook/page.tsx
@@ -2,15 +2,12 @@ import Divider from "@/components/common/Divider";
 import Text from "@/components/common/Text";
 import Link from "@/components/common/Link";
 import Image from "next/image";
+import HeroText from "@/components/sections/HeroText";
 
 export default function Handbook() {
   return (
     <div className="max-w-7xl mx-auto px-4">
-      <Divider borderTopWidth="3px" />
-      <Text as="h1" className="text-5xl font-sans font-bold">
-        Academic Handbook
-      </Text>
-      <Divider borderTopWidth="3px" />
+      <HeroText text="Academic Handbook"></HeroText>
       <Text as="p" className="text-lg">
         The ASSU Academic Handbook is an essential guide to rules, regulations,
         and services that students need to be aware of at the St. George campus
diff --git a/app/services-and-resources/misc/page.tsx b/app/services-and-resources/misc/page.tsx
index feb3e2e..b40b486 100644
--- a/app/services-and-resources/misc/page.tsx
+++ b/app/services-and-resources/misc/page.tsx
@@ -2,6 +2,7 @@ import Divider from "components/common/Divider";
 import Text from "components/common/Text";
 // import Link from "components/common/Link";
 import LinkSection, { LinkItem } from "components/common/LinkSection";
+import HeroText from "@/components/sections/HeroText";
 
 export default function Misc() {
   const studentSocieties: LinkItem[] = [
@@ -64,11 +65,7 @@ export default function Misc() {
 
   return (
     <div>
-      <Divider borderTopWidth="3px" />
-      <Text as="h1" className="text-5xl font-sans font-bold">
-        Useful Links
-      </Text>
-      <Divider borderTopWidth="3px" />
+      <HeroText text="Useful Links"></HeroText>
       <Text as="p" className="text-lg">
         Find essential links to student societies, academic resources, and U of
         T services. <br /> Easily access the resources that keep you informed
@@ -78,7 +75,6 @@ export default function Misc() {
       <LinkSection header="Student Societies" links={studentSocieties} />
       <Divider />
       <LinkSection header="U of T Resources" links={uoftLinks} isArrowFilled />
-      <Divider />
     </div>
   );
 }
diff --git a/app/services-and-resources/office-services/page.tsx b/app/services-and-resources/office-services/page.tsx
index 996ce7d..54542b6 100644
--- a/app/services-and-resources/office-services/page.tsx
+++ b/app/services-and-resources/office-services/page.tsx
@@ -4,6 +4,8 @@ import React from "react";
 import ContentGrid, { ContentItem } from "@/components/layout/ContentGrid";
 import Divider from "@/components/common/Divider";
 import Link from "@/components/common/Link";
+import HeroText from "@/components/sections/HeroText";
+import Text from "@/components/common/Text";
 
 // Grid items for Office Services
 const items: ContentItem[] = [
@@ -160,32 +162,22 @@ const items: ContentItem[] = [
 
 export default function OfficeServicesPage() {
   return (
-    <div className="min-h-screen bg-gray-lighter" aria-labelledby="page-title">
-      <main className="max-w-5xl mx-auto px-6 py-12">
-        <Divider />
-        <h1 id="page-title" className="text-4xl font-bold mb-6">
-          Office Services
-        </h1>
-        <Divider />
+    <div aria-labelledby="page-title">
+      <HeroText text="Office Services"></HeroText>
 
-        {/* Intro body text under the heading */}
-        <p className="mt-6 mb-8 text-base md:text-lg text-gray-700 max-w-4xl">
-          Supporting students with essential resources, our office services
-          provide printing, study spaces, locker rentals, and administrative
-          assistance to enhance your campus experience. Visit us for everything
-          you need!
-        </p>
+      {/* Intro body text under the heading */}
+      <Text as="p">
+        Supporting students with essential resources, our office services
+        provide printing, study spaces, locker rentals, and administrative
+        assistance to enhance your campus experience. Visit us for everything
+        you need!
+      </Text>
+      <Divider margin="0"></Divider>
 
-        {/* Main content grid */}
-        <ContentGrid
-          items={items}
-          columns={2}
-          ariaLabel="Office services"
-          className="mt-2"
-        />
+      {/* Main content grid */}
+      <ContentGrid items={items} columns={2} ariaLabel="Office services" />
 
-        <Divider />
-      </main>
+      <Divider />
     </div>
   );
 }
diff --git a/app/services-and-resources/page.tsx b/app/services-and-resources/page.tsx
index 7ba10ce..aefd255 100644
--- a/app/services-and-resources/page.tsx
+++ b/app/services-and-resources/page.tsx
@@ -2,6 +2,8 @@ import Text from "@/components/common/Text";
 import HeroText from "@/components/sections/HeroText";
 import ContentGrid from "@/components/layout/ContentGrid";
 import Link from "next/link";
+import Divider from "@/components/common/Divider";
+import Button from "@/components/common/Button";
 
 export default function ServicesAndResources() {
   const services = [
@@ -122,68 +124,50 @@ export default function ServicesAndResources() {
   return (
     <div className="min-h-screen bg-[rgb(243,243,243)] w-full max-w-none">
       {/* Header Section */}
-      <section className="w-[120%] -ml-[10%] px-8 py-8">
-        <div className="text-left mb-16">
-          <HeroText text="Student Resources" />
-
-          <Text as="p" className="text-lg text-gray-700 mb-4 max-w-3xl mx-auto">
-            ASSU offers a various amount of services in order to provide support
-            for students.
-            <br />
-            <br />
-            Stop by anytime to scan our events board and see what current
-            campaigns ASSU has going on or to take a break between classes and
-            chat with our friendly executive and staff!
-          </Text>
-        </div>
-      </section>
-
+      <HeroText text="Student Resources" />
+      <Text as="p" className="text-lg text-gray-700 mb-4 mx-auto">
+        ASSU offers a various amount of services in order to provide support for
+        students.
+      </Text>
+      <Text as="p" className="text-lg text-gray-700 mb-4 mx-auto">
+        Stop by anytime to scan our events board and see what current campaigns
+        ASSU has going on or to take a break between classes and chat with our
+        friendly executive and staff!
+      </Text>
+      <Divider margin="0" />
       {/* Services Grid*/}
-      <section className="px-4 pb-2 -mt-20 max-w-3xl mx-auto">
-        <div className="border-t border-b border-gray-300 bg-[rgb(243,243,243)]">
-          <ContentGrid
-            ariaLabel="Services and resources"
-            columns={3}
-            mergeAdjacentOnMobile={false}
-            className="w-full max-w-6xl mx-auto md:[&_[role='gridcell']]:px-10 md:[&_[role='gridcell']]:py-12 [&_[role='gridcell']]:px-8 [&_[role='gridcell']]:py-10"
-            items={services.map((service) => ({
-              id: service.id,
-              node: (
-                <div className="flex h-full flex-col items-center gap-6 text-center">
-                  <div className="w-16 h-16 flex items-center justify-center">
-                    {service.icon}
-                  </div>
-                  <div className="space-y-4">
-                    <h3 className="text-xl font-bold text-black">
-                      {service.title}
-                    </h3>
-                    <p className="text-gray-700 leading-relaxed">
-                      {service.description}
-                    </p>
-                  </div>
-                  <Link
-                    href={service.href}
-                    className="mt-auto bg-[rgb(201,8,111)] text-white px-6 py-3 rounded-lg font-semibold hover:bg-[rgb(180,7,100)] transition-colors duration-300 flex items-center"
-                  >
-                    EXPLORE
-                    <svg
-                      className="w-4 h-4 ml-2"
-                      fill="white"
-                      viewBox="0 0 20 20"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-                        clipRule="evenodd"
-                      />
-                    </svg>
-                  </Link>
+      <ContentGrid
+        ariaLabel="Services and resources"
+        columns={3}
+        mergeAdjacentOnMobile={false}
+        className="w-full mx-auto"
+        cellClassName="flex flex-col px-8 py-10 md:px-10 md:py-12 min-h-[380px] md:min-h-[450px]"
+        items={services.map((service) => ({
+          id: service.id,
+          node: (
+            <div className="flex w-full flex-1 flex-col items-center justify-between text-center">
+              <div className="flex flex-col items-center gap-6">
+                <div className="w-16 h-16 flex items-center justify-center">
+                  {service.icon}
                 </div>
-              ),
-            }))}
-          />
-        </div>
-      </section>
+                <div className="space-y-4">
+                  <h3 className="text-xl font-bold text-black">
+                    {service.title}
+                  </h3>
+                  <p className="text-gray-700 leading-relaxed">
+                    {service.description}
+                  </p>
+                </div>
+              </div>
+
+              <Button>
+                <Link href={service.href}>EXPLORE →</Link>
+              </Button>
+            </div>
+          ),
+        }))}
+      />
+      <Divider />
     </div>
   );
 }
diff --git a/app/services-and-resources/resources/page.tsx b/app/services-and-resources/resources/page.tsx
index 4ed4b38..abcdb23 100644
--- a/app/services-and-resources/resources/page.tsx
+++ b/app/services-and-resources/resources/page.tsx
@@ -4,6 +4,7 @@ import Accordion, {
   type AccordionItemData,
 } from "@/components/common/Accordion";
 import ContentGrid from "@/components/layout/ContentGrid";
+import Divider from "@/components/common/Divider";
 
 const faqItems: AccordionItemData[] = [
   {
@@ -36,6 +37,36 @@ const faqItems: AccordionItemData[] = [
     answer:
       "Victoria College tutors help with labs, concepts, and past test questions. Tutoring is free and open to all enrolled Arts and Science chemistry students.",
   },
+  {
+    value: "faq-6",
+    question: "Math Aid Centres",
+    answer:
+      "The Department of Mathematics provides free math assistance to all first-year Arts & Science students, with one-on-one tutoring available.",
+  },
+  {
+    value: "faq-7",
+    question: "Statistics Aid Centres",
+    answer:
+      "The Department of Statistics provides free statistical help to undergraduate students.",
+  },
+  {
+    value: "faq-8",
+    question: "Economics Study Centre",
+    answer:
+      "The Department of Economics provides free assistance to students enrolled in core undergraduate economics courses.",
+  },
+  {
+    value: "faq-9",
+    question: "Philosophy Essay Clinic",
+    answer:
+      "The Department of Philosophy provides free assistance to students enrolled in philosophy courses at the University.",
+  },
+  {
+    value: "faq-10",
+    question: "English Language Learning (ELL)",
+    answer:
+      "The English Language Learning Program supports all U of T undergraduates enrolled in the Faculty of Arts and Science whose first language is not English (ESL or multilingual students), as well as native speakers seeking to improve their English language skills.",
+  },
 ];
 
 const collegeResources = [
@@ -143,18 +174,19 @@ const collegeResources = [
 
 export default function Resources() {
   return (
-    <div className="w-full max-w-screen-3xl mx-auto space-y-10 px-4">
-      <HeroText text="Frequently asked questions" />
+    <div>
+      <HeroText text="Frequently Asked Questions" />
       <Accordion items={faqItems} />
       <HeroText text="College Specific Resources" />
-
-      <div className="border-t border-gray-300 max-w-3xl mx-auto w-full">
-        <ContentGrid
-          ariaLabel="College specific resources"
-          columns={3}
-          mergeAdjacentOnMobile={false}
-          className="w-full max-w-3xl mx-auto md:[&_[role='gridcell']]:px-8 md:[&_[role='gridcell']]:py-8 [&_[role='gridcell']]:px-6 [&_[role='gridcell']]:py-6"
-          items={collegeResources.map((college) => ({
+      <Divider margin="0"></Divider>
+      <ContentGrid
+        ariaLabel="College specific resources"
+        columns={4}
+        mergeAdjacentOnMobile={false}
+        className="w-full mx-auto"
+        cellClassName="px-6 py-6 md:px-8 md:py-8"
+        items={[
+          ...collegeResources.map((college) => ({
             id: college.id,
             node: (
               <div className="flex h-full flex-col gap-3">
@@ -171,7 +203,7 @@ export default function Resources() {
                       href={link.href}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="px-3 py-2 text-xs bg-gray-dark text-white rounded-none hover:bg-gray-800 transition min-h-[40px] text-left"
+                      className="px-3 py-2 text-xs bg-gray-dark text-white rounded-none hover:bg-gray-800 transition min-h-[40px]"
                     >
                       {link.label}
                     </a>
@@ -179,9 +211,35 @@ export default function Resources() {
                 </div>
               </div>
             ),
-          }))}
-        />
-      </div>
+          })),
+          {
+            id: "icons-only",
+            node: (
+              <div className="flex h-full items-center justify-center gap-6">
+                <svg className="w-14 h-14" viewBox="0 0 64 64" fill="none">
+                  <circle
+                    cx="32"
+                    cy="32"
+                    r="26"
+                    stroke="rgb(201,8,111)"
+                    strokeWidth="1"
+                  />
+                </svg>
+                <svg
+                  className="w-14 h-14"
+                  viewBox="0 0 64 64"
+                  fill="rgb(201,8,111)"
+                >
+                    <polygon
+                      points="22.89,10 41.11,10 54,22.89 54,41.11 41.11,54 22.89,54 10,41.11 10,22.89"
+                      fill="rgb(201,8,111)"
+                    />
+                </svg>
+              </div>
+            ),
+          },
+        ]}
+      />
     </div>
   );
 }
diff --git a/app/services-and-resources/tests/page.tsx b/app/services-and-resources/tests/page.tsx
index 5f42003..024c3a1 100644
--- a/app/services-and-resources/tests/page.tsx
+++ b/app/services-and-resources/tests/page.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import HeroText from "../../../components/sections/HeroText";
 import Divider from "../../../components/common/Divider";
 import { KeyValueList } from "../../../components/common/KeyValueList";
+import Text from "../../../components/common/Text";
 import { fetchTestsData } from "@/lib/tests";
 
 export async function generateStaticParams() {
@@ -20,27 +21,31 @@ export default async function Tests() {
   const testData = await fetchTestsData();
 
   return (
-    <div className="w-full max-w-3xl mx-auto space-y-4">
+    <div className="w-full mx-auto space-y-4">
       <HeroText text="Past Test Library" />
-
-      <div className="text-gray-dark text-sm whitespace-pre-line space-y-4">
-        <p>
+      <Text
+        as="div"
+        className="text-gray-dark text-sm whitespace-pre-line space-y-4 mb-0"
+      >
+        <Text as="p" color="gray-dark" className="text-sm mb-0">
           All the tests listed below have been donated by students in the past.
-        </p>
-        <p>
+        </Text>
+        <Text as="p" color="gray-dark" className="text-sm mb-0">
           You can access them at our{" "}
-          <span className="text-pink font-medium">ASSU office at SS1068</span>{" "}
+          <Text as="span" color="pink" className="font-medium mb-0">
+            ASSU office at SS1068
+          </Text>{" "}
           (not available online).
-        </p>
-        <p>
+        </Text>
+        <Text as="p" color="gray-dark" className="text-sm mb-0">
           We are currently having a Test Drive in attempts to greatly expand our
           test bank. We are having a draw for the students who donate tests we
           don&apos;t currently have.{" "}
-          <span className="text-pink font-medium">
+          <Text as="span" color="pink" className="font-medium mb-0">
             Past tests can be submitted to the ASSU office.
-          </span>
-        </p>
-      </div>
+          </Text>
+        </Text>
+      </Text>
 
       <Divider />
       <KeyValueList items={testData} />
diff --git a/components/common/LinkSection.tsx b/components/common/LinkSection.tsx
index fe4c136..a5e92ac 100644
--- a/components/common/LinkSection.tsx
+++ b/components/common/LinkSection.tsx
@@ -21,9 +21,9 @@ export default function LinkSection({
   className = "",
 }: LinkSectionProps) {
   return (
-    <div className={`min-h-[300px] mb-6 ${className}`}>
+    <div className={className}>
       {/* Main layout container */}
-      <div className="flex h-full">
+      <div className="flex h-full mb-6">
         {/* Left side - Header and Arrow */}
         <div className="flex flex-col justify-between w-45">
           {/* Header at top left */}
diff --git a/components/common/Tabs.tsx b/components/common/Tabs.tsx
index fc276e7..5589b6b 100644
--- a/components/common/Tabs.tsx
+++ b/components/common/Tabs.tsx
@@ -1,7 +1,12 @@
 "use client";
 
 import { useState } from "react";
-import { Tabs as TabsRoot, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
+import {
+  Tabs as TabsRoot,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from "../ui/tabs";
 
 export interface TabItem {
   id: string;
@@ -41,12 +46,11 @@ export default function Tabs({
     >
       {/* Tab List */}
       <div className="relative md:static">
-
         <TabsList
           aria-label="Tabs navigation"
           className={`flex md:justify-center border-b-2 border-gray-lighter overflow-x-auto overflow-y-visible scrollbar-hide h-auto items-end bg-transparent p-0 rounded-none ${tabListClassName}`}
         >
-          {tabs.map((tab, index) => {
+          {tabs.map((tab, _index) => {
             const isActive = tab.id === activeTab;
             return (
               <TabsTrigger
diff --git a/components/layout/ContentGrid.tsx b/components/layout/ContentGrid.tsx
index aa86a9a..9c1df6d 100644
--- a/components/layout/ContentGrid.tsx
+++ b/components/layout/ContentGrid.tsx
@@ -17,6 +17,7 @@ interface ContentGridProps {
   // grid label for screen readers
   ariaLabel?: string;
   className?: string;
+  cellClassName?: string;
   mergeAdjacentOnMobile?: boolean;
 }
 
@@ -27,7 +28,7 @@ function chunk<T>(arr: T[], size: number): T[][] {
 }
 
 function groupForMobile(items: ContentItem[], enabled: boolean) {
-  if (!enabled) return items.map(i => [i]);
+  if (!enabled) return items.map((i) => [i]);
   const groups: ContentItem[][] = [];
   let i = 0;
   while (i < items.length) {
@@ -49,12 +50,14 @@ export default function ContentGrid({
   columns = 2,
   ariaLabel = "Content grid",
   className = "",
+  cellClassName = "",
   mergeAdjacentOnMobile = true,
 }: ContentGridProps) {
   const colCount = Math.max(1, columns);
   const rows = chunk(items, colCount);
   const mobileGroups = groupForMobile(items, mergeAdjacentOnMobile);
-  const cellBase = "relative p-5 md:p-6 min-h-11 min-w-11 focus-within:outline-none rounded-none";
+  const cellBase =
+    "relative p-5 md:p-6 min-h-11 min-w-11 focus-within:outline-none rounded-none";
   const titleCls = "text-base md:text-lg font-semibold text-pink";
   const descCls = "mt-2 text-sm md:text-base text-gray-700";
 
@@ -68,10 +71,9 @@ export default function ContentGrid({
       >
         {mobileGroups.map((group, idx) => {
           const isFirst = idx === 0;
-          const mobileTop =
-            !isFirst
-              ? "before:content-[''] before:absolute before:top-0 before:left-4 before:right-4 before:h-px before:bg-gray-500"
-              : "";
+          const mobileTop = !isFirst
+            ? "before:content-[''] before:absolute before:top-0 before:left-4 before:right-4 before:h-px before:bg-gray-500"
+            : "";
           return (
             <div key={idx} role="row" className={["contents"].join(" ")}>
               <div
@@ -79,12 +81,16 @@ export default function ContentGrid({
                 tabIndex={0}
                 className={[
                   cellBase,
+                  cellClassName,
                   mobileTop,
                   "focus-visible:ring-2 focus-visible:ring-pink focus-visible:ring-offset-2 cursor-default",
                 ].join(" ")}
               >
                 {group.map((item, j) => (
-                  <div key={item.id ?? j} className={j > 0 ? "pt-5" : ""}>
+                  <div
+                    key={item.id ?? j}
+                    className={j > 0 ? "pt-5 flex-1 flex" : ""}
+                  >
                     {item.title ? (
                       <p className={titleCls} id={`content-title-${item.id}`}>
                         {item.title}
@@ -93,7 +99,9 @@ export default function ContentGrid({
                     {item.description ? (
                       <p className={descCls}>{item.description}</p>
                     ) : null}
-                    {item.node ? <div className="pt-5">{item.node}</div> : null}
+                    {item.node ? (
+                      <div className="pt-5 flex-1 flex">{item.node}</div>
+                    ) : null}
                   </div>
                 ))}
               </div>
@@ -108,11 +116,10 @@ export default function ContentGrid({
         aria-label={ariaLabel}
         aria-rowcount={rows.length}
         aria-colcount={colCount}
-        className={[
-          "hidden md:grid gap-0",
-          `md:grid-cols-${columns}`,
-          "mx-auto",
-        ].join(" ")}
+        className="hidden md:grid gap-0 mx-auto"
+        style={{
+          gridTemplateColumns: `repeat(${colCount}, minmax(0, 1fr))`,
+        }}
       >
         {rows.map((row, rIndex) => (
           <div key={`row-${rIndex}`} role="row" className="contents">
@@ -137,6 +144,7 @@ export default function ContentGrid({
                   {...(item.title ? { "aria-labelledby": titleId } : {})}
                   className={[
                     cellBase,
+                    cellClassName,
                     partialTop,
                     partialLeft,
                     "focus-visible:ring-2 focus-visible:ring-pink focus-visible:ring-offset-2",
@@ -151,7 +159,9 @@ export default function ContentGrid({
                   {item.description ? (
                     <p className={descCls}>{item.description}</p>
                   ) : null}
-                  {item.node ? <div className="pt-5">{item.node}</div> : null}
+                  {item.node ? (
+                    <div className="pt-5 flex-1 flex">{item.node}</div>
+                  ) : null}
                 </div>
               );
             })}
@@ -160,4 +170,4 @@ export default function ContentGrid({
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index 3651d63..7d550f8 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -62,7 +62,7 @@ const NAV: NavGroup[] = [
     items: [
       { label: "ASSU Executives", href: "/about/executives" },
       { label: "ASSU Staff", href: "/about/staff" },
-      { label: "Documents", href: "/services-and-resources/documents" },
+      { label: "Documents", href: "/about/documents" },
     ],
   },
   {
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
index e419173..640c5d0 100644
--- a/components/ui/accordion.tsx
+++ b/components/ui/accordion.tsx
@@ -11,7 +11,7 @@ function Accordion({
     <AccordionPrimitive.Root
       data-slot="accordion"
       className={cn(
-        "w-full max-w-3xl mx-auto border-t border-[var(--color-line)] divide-y divide-[var(--color-line)]",
+        "w-full mx-auto border-t border-[var(--color-line)] divide-y divide-[var(--color-line)]",
         className
       )}
       {...props}
diff --git a/public/svg/abs-shape.svg b/public/svg/abs-shape.svg
index daa4a52..4919704 100644
--- a/public/svg/abs-shape.svg
+++ b/public/svg/abs-shape.svg
@@ -1,5 +1,5 @@
 <svg preserveAspectRatio="none" data-bbox="25 20 150 160" viewBox="25 20 150 160" height="200" width="200" xmlns="http://www.w3.org/2000/svg" data-type="shape" role="presentation" aria-hidden="true" aria-label="">
     <g>
-        <path d="M104.687 62.329V20C60.677 20 25 55.817 25 100s35.677 80 79.687 80v-42.329C118.106 162.86 144.557 180 175 180V20c-30.443 0-56.894 17.14-70.313 42.329z"></path>
+        <path d="M104.687 62.329V20C60.677 20 25 55.817 25 100s35.677 80 79.687 80v-42.329C118.106 162.86 144.557 180 175 180V20c-30.443 0-56.894 17.14-70.313 42.329z" fill="none" stroke="rgb(201,8,111)" stroke-width="1.5"></path>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/svg/droplet.svg b/public/svg/droplet.svg
index a819a1a..662922c 100644
--- a/public/svg/droplet.svg
+++ b/public/svg/droplet.svg
@@ -1,5 +1,5 @@
 <svg preserveAspectRatio="none" data-bbox="0 0 226.002 318.307" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 226.002 318.307" role="presentation" aria-hidden="true" aria-label="">
     <g>
-        <path d="M113.008 318.307c31.188 0 57.608-10.822 79.888-33.101.635-.655.635-.655 1.276-1.277 21.009-21.644 31.83-48.057 31.83-78.624 0-26.75-10.821-56.979-31.83-90.404-2.871-4.121-5.411-8.593-8.278-12.741L114.596 0 35.653 110.138C12.099 143.245 0 174.751 0 205.305c0 31.203 10.828 57.629 33.107 79.901 22.279 22.278 48.706 33.101 79.901 33.101z"></path>
+        <path d="M113.008 318.307c31.188 0 57.608-10.822 79.888-33.101.635-.655.635-.655 1.276-1.277 21.009-21.644 31.83-48.057 31.83-78.624 0-26.75-10.821-56.979-31.83-90.404-2.871-4.121-5.411-8.593-8.278-12.741L114.596 0 35.653 110.138C12.099 143.245 0 174.751 0 205.305c0 31.203 10.828 57.629 33.107 79.901 22.279 22.278 48.706 33.101 79.901 33.101z" fill="none" stroke="rgb(201,8,111)" stroke-width="1.5"></path>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/public/svg/heart.svg b/public/svg/heart.svg
index 2a93c33..daef90f 100644
--- a/public/svg/heart.svg
+++ b/public/svg/heart.svg
@@ -1,5 +1,5 @@
 <svg data-bbox="20 32.5 160 135" viewBox="0 0 200 200" height="200" width="200" xmlns="http://www.w3.org/2000/svg" data-type="shape">
     <g>
-        <path d="M137.778 32.5c-15.568 0-29.041 8.477-36.346 20.992-.636 1.09-2.229 1.09-2.865 0C91.258 40.977 77.785 32.5 62.222 32.5 38.901 32.5 20 51.359 20 74.627c0 9.782 3.889 20.648 9.088 25.822L88.81 162.73c6.099 6.36 16.282 6.36 22.381 0l59.72-62.281c5.061-5.037 9.089-16.04 9.089-25.822 0-23.268-18.907-42.127-42.222-42.127z"></path>
+        <path d="M137.778 32.5c-15.568 0-29.041 8.477-36.346 20.992-.636 1.09-2.229 1.09-2.865 0C91.258 40.977 77.785 32.5 62.222 32.5 38.901 32.5 20 51.359 20 74.627c0 9.782 3.889 20.648 9.088 25.822L88.81 162.73c6.099 6.36 16.282 6.36 22.381 0l59.72-62.281c5.061-5.037 9.089-16.04 9.089-25.822 0-23.268-18.907-42.127-42.222-42.127z" fill="none" stroke="rgb(201,8,111)" stroke-width="1.5"></path>
     </g>
-</svg>
\ No newline at end of file
+</svg>