diff --git a/app/about/page.tsx b/app/about/page.tsx
index 156adaf..26da60b 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -1,6 +1,12 @@
 import type { Metadata } from "next";
 import MagChip from "../components/mag-chip";
 
+type AboutRole = {
+  years: string;
+  role: string;
+  detail?: string;
+};
+
 export const metadata: Metadata = {
   title: "About — Kai T. Chen",
   description:
@@ -161,7 +167,6 @@ export default function About() {
                   roles: [
                     {
                       years: "Apr 2026 – Present",
-                      meta: "On-site",
                       role: "Research Assistant",
                       detail: "RA with an Astra fellow on a compute governance project.",
                     },
@@ -169,23 +174,20 @@ export default function About() {
                 },
                 {
                   org: "Southern University of Science and Technology",
-                  meta: "Shenzhen, China",
+                  meta: "Shenzhen",
                   roles: [
                     {
                       years: "Jun 2024 – Jun 2025",
-                      meta: "On-site",
                       role: "Peer Mentor",
                       detail: "Peer mentor at Zhicheng College for the Class of 2028.",
                     },
                     {
-                      years: "Feb 2024 – Aug 2024",
-                      meta: "On-site",
+                      years: "Feb 2024 – Jul 2024",
                       role: "Research Assistant",
                       detail: "Control theory RA at NCC Lab.",
                     },
                     {
                       years: "Nov 2023 – Jan 2024",
-                      meta: "On-site",
                       role: "Teaching Assistant",
                       detail: "TA for a short-term mindfulness course.",
                     },
@@ -193,13 +195,13 @@ export default function About() {
                 },
                 {
                   org: "SUSTech Psychology Society (SUSPsych)",
-                  meta: "Shenzhen, China · On-site",
+                  meta: "Shenzhen",
                   roles: [
                     {
                       years: "Jun 2024 – Jun 2025",
                       role: "President",
                       detail:
-                        "Mental health workshops and peer support programs with SUSTech Counseling & Psychological Services.",
+                        "Organizing mental health workshops and peer support programs in partnership with SUSTech Counseling & Psychological Services.",
                     },
                     {
                       years: "Oct 2023 – Jun 2024",
@@ -213,7 +215,6 @@ export default function About() {
                   roles: [
                     {
                       years: "Oct 2024 – Jan 2025",
-                      meta: "Hybrid",
                       role: "Teaching Assistant",
                       detail:
                         "TA for Wellness Ambassador Program (WAP), jointly organized by SUSTech and Lingnan University.",
@@ -255,27 +256,17 @@ export default function About() {
                         >
                           {roleItem.role}
                         </p>
-                        <div className="flex gap-2 items-baseline mt-1 flex-wrap">
-                          <span
-                            style={{
-                              fontFamily: "'Nunito'",
-                              fontWeight: 400,
-                              fontSize: 11,
-                              letterSpacing: "0.04em",
-                            }}
-                            className="text-zinc-400 dark:text-zinc-600"
-                          >
-                            {roleItem.years}
-                          </span>
-                          {"meta" in roleItem && roleItem.meta ? (
-                            <span
-                              style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 11 }}
-                              className="text-zinc-300 dark:text-zinc-700"
-                            >
-                              · {roleItem.meta}
-                            </span>
-                          ) : null}
-                        </div>
+                        <span
+                          style={{
+                            fontFamily: "'Nunito'",
+                            fontWeight: 400,
+                            fontSize: 11,
+                            letterSpacing: "0.04em",
+                          }}
+                          className="text-zinc-400 dark:text-zinc-600 block mt-1"
+                        >
+                          {roleItem.years}
+                        </span>
                         {roleItem.detail ? (
                           <p
                             style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 15, lineHeight: 1.55 }}
@@ -295,36 +286,75 @@ export default function About() {
           {/* Volunteering */}
           <div className="mag-card shrink-0">
             <div className="mag-label">Volunteering</div>
-            <div>
+            <div className="flex flex-col">
               {[
                 {
-                  years: "Oct 2023 – Dec 2025",
-                  role: "Certified First Aider",
                   org: "SUSTech Emergency Rescue Association",
+                  meta: "Shenzhen",
+                  roles: [
+                    {
+                      years: "Oct 2023 – Dec 2025",
+                      role: "Certified First Aider",
+                    },
+                  ] as AboutRole[],
                 },
-              ].map(({ years, role, org }, i) => (
+              ].map(({ org, meta: orgMeta, roles }, groupIndex) => (
                 <div
-                  key={i}
-                  className="py-4 border-b border-zinc-100 dark:border-zinc-800/60 last:border-0"
+                  key={org}
+                  className="py-4 md:py-3 border-b border-zinc-100 dark:border-zinc-800/60 last:border-0"
                 >
-                  <span
-                    style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 11, letterSpacing: "0.04em" }}
-                    className="text-zinc-400 dark:text-zinc-600 block mb-1"
-                  >
-                    {years}
-                  </span>
                   <p
                     style={{ fontFamily: "'Nunito'", fontWeight: 600, fontSize: 17, lineHeight: 1.4 }}
                     className="text-zinc-800 dark:text-zinc-200"
-                  >
-                    {role}
-                  </p>
-                  <p
-                    style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 16, lineHeight: 1.5 }}
-                    className="text-[#C4894F] dark:text-[#D9A870] mt-0.5"
                   >
                     {org}
                   </p>
+                  {orgMeta ? (
+                    <p
+                      style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 11, letterSpacing: "0.04em" }}
+                      className="text-zinc-400 dark:text-zinc-600 mt-1"
+                    >
+                      {orgMeta}
+                    </p>
+                  ) : null}
+                  <div className={roles.length > 1 ? "mt-3 space-y-0" : "mt-2.5"}>
+                    {roles.map((roleItem, roleIndex) => (
+                      <div
+                        key={`${groupIndex}-${roleIndex}`}
+                        className={
+                          roleIndex > 0
+                            ? "pt-4 mt-4 border-t border-zinc-100 dark:border-zinc-800/60"
+                            : undefined
+                        }
+                      >
+                        <p
+                          style={{ fontFamily: "'Nunito'", fontWeight: 600, fontSize: 17, lineHeight: 1.4 }}
+                          className="text-[#C4894F] dark:text-[#D9A870]"
+                        >
+                          {roleItem.role}
+                        </p>
+                        <span
+                          style={{
+                            fontFamily: "'Nunito'",
+                            fontWeight: 400,
+                            fontSize: 11,
+                            letterSpacing: "0.04em",
+                          }}
+                          className="text-zinc-400 dark:text-zinc-600 block mt-1"
+                        >
+                          {roleItem.years}
+                        </span>
+                        {roleItem.detail ? (
+                          <p
+                            style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 15, lineHeight: 1.55 }}
+                            className="text-zinc-500 dark:text-zinc-500 mt-1.5"
+                          >
+                            {roleItem.detail}
+                          </p>
+                        ) : null}
+                      </div>
+                    ))}
+                  </div>
                 </div>
               ))}
             </div>