diff --git a/CLAUDE.md b/CLAUDE.md
index bbcaf7d..0f0309d 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -49,7 +49,11 @@ All blog, portfolio, and research entries are MDX files on disk — there's no C
    - `Mermaid` — renders ` ```mermaid ` blocks; mermaid + stylis are transpiled and pre-bundled (see `transpilePackages` and `experimental.optimizePackageImports` in `next.config.js`).
    - `ContentImage` — explicit component for ImageKit-hosted images. The default `img` MDX mapping was intentionally removed so external images / SVGs in MDX don't break; use `<ContentImage>` (or a raw `<img>`) explicitly.
    - `MDXLink`, `Blockquote`, `Table`, `Headings` — styled overrides.
-6. **Research-specific components** live in `src/components/content/research/`: `HeadingResearch` (status chip, title, structured authors + affiliations, venue, action-button row, hr), `ResearchTeaser` (full-bleed figure + caption, lives outside `prose` so it can breathe), `ResearchAbstract` (purple-accented `not-prose` card), `ResearchBibTeX` (anchored at `#bibtex`, copy-to-clipboard, mirrors `Pre.tsx` chrome), `ResearchItem` + `ResearchSections` (listing card + section grouping). The detail page composition is in `src/app/research/[slug]/page.tsx`.
+6. **Research-specific components** live in `src/components/content/research/`:
+   - **Detail-page**: `HeadingResearch` (status chip, title, structured authors + affiliations, venue, action-button row, hr — author/affiliation `<sup>` markers are conditional + carry `title` tooltips, see Conventions), `ResearchTeaser` (full-bleed figure + caption, lives outside `prose` so it can breathe), `ResearchAbstract` (purple-accented `not-prose` card), `ResearchBibTeX` (anchored at `#bibtex`, copy-to-clipboard, mirrors `Pre.tsx` chrome).
+   - **Listing-page**: `ResearchOverview` (intro paragraph), `ResearchNews` (date-column timeline; entries live in the `NEWS` array inside the file), `ResearchAreas` (colored chip row), `ResearchItem` + `ResearchSections` (listing card + section grouping). `ComingSoonImage` is a pastel-gradient placeholder used in place of the listing thumbnail when an entry has `comingSoon: true`.
+   - **Shared**: `SectionHeading` is the bordered `text-lg md:text-xl font-bold text-black dark:text-white` h2 used by every section on the listing page (Overview / News / Research Areas / Sections groupers). Use it for any new sections to keep the rhythm consistent.
+   - The detail page composition is in `src/app/research/[slug]/page.tsx`. The listing page is in `src/app/research/page.tsx` — both pass `pt-6 md:pt-10` to `AppLayoutPage` to give the first section breathing room from the sticky header.
 7. **SEO** is generated per-page in `src/app/blog/[slug]/page.tsx` and the portfolio / research equivalents: `generateMetadata` builds Next.js Metadata (OG, Twitter, canonical, `modifiedTime`), and the page itself injects a single `@graph` JSON-LD block:
    - Blog: `BlogPosting` + `WebPage` + `BreadcrumbList`
    - Portfolio: `SoftwareSourceCode` + `WebPage` + `BreadcrumbList`
@@ -86,7 +90,7 @@ Two layers feed Tailwind v4:
 
 Net result: `bg-primary` (shadcn) and `bg-primary-500` (legacy) render the same color; both surfaces remain valid during the transition. When adding new code, prefer the semantic tokens. Don't write `dark:` overrides for shadcn classes — `--background` etc. switch automatically via `.dark`.
 
-Fonts: `--font-sans` resolves to `var(--font-inter)` (Next/font Google) with the local `@font-face` Inter as a fallback. The legacy `font-primary` utility still maps to Inter via `tailwind.config.js`.
+Fonts: `--font-sans` resolves to `'Google Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`. Google Sans is loaded via Google Fonts CSS (`<link>` in `layout.tsx` head, with `preconnect` to `fonts.gstatic.com` — `font-src` in `next.config.js` CSP must include it). Local Inter `@font-face` stays in `globals.css` as a deeper fallback so the page never FOUCs. `tailwind.config.js` `fontFamily.primary` mirrors the same stack so the legacy `font-primary` utility picks up Google Sans too.
 
 ## Two Build Modes
 
@@ -123,7 +127,14 @@ ISR endpoint at `GET /api/revalidate?secret=<SECRET>&slug=/blog/<slug>`. Secret
 - Commits go through `commitizen` with `cz-conventional-changelog` — run `yarn commit` for the prompt. `lint-staged` runs Prettier on staged `js/jsx/ts/tsx/mdx/md/css` files.
 - Frontmatter `published` for blog and research is `MM/DD/YYYY` (portfolio uses `date`). `featured: true` surfaces an entry on the home page. Optional `updated: "MM/DD/YYYY"` overrides `published` as the freshness signal — it flows into `dateModified` (BlogPosting / ScholarlyArticle JSON-LD), `<meta property="article:modified_time">`, and the sitemap `lastmod`. Set it whenever you make a substantive content edit; leave it off for typo fixes.
 - Authoring convention: open every blog post with a 60–120 word TL;DR paragraph immediately under the H1. LLM crawlers (ChatGPT, Perplexity, AI Overviews) draw ~44% of their citations from the first 30% of an article, so front-loading the answer compounds visibility.
-- **Research authoring**: use the YAML folded scalar (`abstract: >-`) — block scalar (`|`) preserves newlines and the abstract renders with broken lines. Authors use a structured array; `affiliations` indices are 1-based and reference the entry's `affiliations` array. `section` drives listing-page grouping (`top-tier` / `conferences` / `journals` / `workshops` / `others`). `new: true` renders a NEW badge inline with the title on the listing card. Authors matching `SITE_AUTHOR.name` are auto-bolded across `HeadingResearch` and `ResearchItem`.
+- **Research authoring**: use the YAML folded scalar (`abstract: >-`) — block scalar (`|`) preserves newlines and the abstract renders with broken lines. Authors use a structured array; `affiliations` indices are 1-based and reference the entry's `affiliations` array. `section` drives listing-page grouping (`top-tier` / `conferences` / `journals` / `workshops` / `others`). `new: true` renders a NEW badge inline with the title on the listing card. `comingSoon: true` swaps the listing thumbnail for the `ComingSoonImage` pastel placeholder (no thumbnail/teaser required). Authors matching `SITE_AUTHOR.name` are auto-bolded across `HeadingResearch` and `ResearchItem`.
+- **Author / affiliation superscripts** in `HeadingResearch` are conditional. Each marker only renders when it actually disambiguates something:
+  - `*` (corresponding author) — `corresponding: true` on the author. Shows when **2+ authors** AND at least one is corresponding.
+  - `†` (equal contribution) — `equalContribution: true` on the author. Shows when **2+ authors** AND at least 2 are flagged. Renders on every flagged author.
+  - `‡` (principal investigator) — `principalInvestigator: true` on the author. Shows when **2+ authors** AND at least one is PI.
+  - `¹ ² ³` (affiliation indices) — derived from `affiliations: [...]` on each author. Shows when **2+ affiliations** exist on the entry.
+
+  Marker order on each author follows academic convention: `*†‡` then numeric indices. The affiliation legend below the author line drops its leading `<sup>` under the same `showAffSup` rule. Single-author / single-affiliation entries collapse to clean text — no orphan markers. Each `<sup>` has `cursor-help` + a native `title` tooltip (affiliation index sups resolve to the full affiliation name; symbol sups resolve to their caption text). A combined caption line appears below the affiliation row when any symbol marker is shown — e.g. `*Corresponding author · †Equal contribution · ‡Principal investigator` — joined by ` · `.
 
 ## Indexing Helper
 
diff --git a/README.md b/README.md
index 036ed42..4f58f97 100644
--- a/README.md
+++ b/README.md
@@ -70,6 +70,14 @@ Use it as your portfolio. Fork it as a template. Read the source as a reference
 - **Topic archive pages** auto-generated from frontmatter `topics`.
 - **RSS** at `/rss.xml` (summaries) and `/rss-full.xml` (full content) with `<link rel="alternate">` discovery in `<head>`.
 
+### Design system
+
+- **shadcn/ui** (radix-nova style) as the single primitive layer. Components live under `src/components/ui/` and are managed by the shadcn CLI (`npx shadcn@latest add <name>`); rerun with `--diff` to merge upstream updates without losing local edits.
+- **Theme bridge** in `src/styles/globals.css` `@theme inline` — shadcn semantic tokens (`--primary`, `--background`, `--foreground`, `--muted`, `--border`, `--ring`) map onto the legacy blue-primary / neutral-theme palette in OKLCH so legacy classes (`bg-primary-500`, `text-theme-700`) and shadcn classes (`bg-primary`, `text-foreground`) render identically across light/dark.
+- **Site composition components** under `src/components/site/` (Header, Footer, Nav, Hero, Searchbar, BackToTop, MobileNav, ThemeMenu, link/image wrappers, AppLayoutPage) — bespoke pieces that compose shadcn primitives + project state.
+- **Single primitive ecosystem** — `radix-ui` (shadcn's base), `lucide-react` (icons inside shadcn), `sonner` (toasts), `tw-animate-css` (animations), `class-variance-authority` (variants), `tailwind-merge` (className merging).
+- **Typography** — Google Sans loaded from Google Fonts with a system-font fallback chain (`system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, …`). Local Inter `@font-face` is kept as a deeper fallback so the page never FOUCs.
+
 ### Performance
 
 - **Core Web Vitals attribution** for CLS, LCP, **INP**, FCP, TTFB via Vercel Speed Insights.
@@ -80,13 +88,15 @@ Use it as your portfolio. Fork it as a template. Read the source as a reference
 
 ### Tooling
 
-- **TypeScript** strict-mode, `@/*` path aliases.
+- **TypeScript** strict-mode, `@/*` path alias.
 - **ESLint flat config** (`eslint.config.mjs`, replacing the deprecated `next lint`).
-- **Vitest** suite (48 tests, ~1.7s) covering schema generators, sorters, content readers.
+- **Prettier** with `@ianvs/prettier-plugin-sort-imports` (actively maintained successor to `@trivago`) + `prettier-plugin-tailwindcss`.
+- **shadcn CLI** for primitive sync — `npx shadcn@latest add`, `--diff`, `--dry-run`.
+- **Vitest** suite (48 tests, ~1.7s) covering schema generators, sorters, content readers. Vite resolves `@/*` paths via the native `resolve.tsconfigPaths: true` (no plugin).
 - **JSON-LD validator** (`yarn validate:json-ld`) walks the build output and verifies every `<script type="application/ld+json">` block.
 - **Alt-text auditor** (`yarn audit:alt-text`) flags weak `alt` attributes in MDX.
 - **GitHub Actions CI**: type-check + lint + test + build + JSON-LD validation on every push/PR.
-- **Yarn 4** via Corepack, with a `vercel.json` `installCommand` so deploy hosts honour the lockfile.
+- **Yarn 4** via Corepack, with a `vercel.json` `installCommand` (`corepack enable && corepack prepare yarn@4.14.1 --activate && yarn install --immutable`) so deploy hosts actually run Yarn 4 and honour the lockfile.
 
 ---
 
@@ -97,9 +107,12 @@ Use it as your portfolio. Fork it as a template. Read the source as a reference
 | Framework        | Next.js 16 (App Router) + React 19                                    |
 | Language         | TypeScript                                                            |
 | Styling          | Tailwind CSS v4 (with `@tailwindcss/typography`)                      |
+| Design system    | shadcn/ui (radix-nova) on `radix-ui`                                  |
+| Icons            | `lucide-react` (shadcn) + `react-icons` (legacy site components)      |
+| Toasts           | `sonner`                                                              |
+| Fonts            | Google Sans (Google Fonts) + Inter (local @font-face fallback)        |
 | Content          | MDX (`next-mdx-remote/rsc`) + `gray-matter`                           |
 | Markdown plugins | remark-gfm, remark-math, rehype-prism-plus, rehype-slug, rehype-katex |
-| Animation        | framer-motion                                                         |
 | Comments         | Giscus (deferred)                                                     |
 | Diagrams         | Mermaid (lazy)                                                        |
 | Math             | KaTeX                                                                 |
@@ -111,6 +124,7 @@ Use it as your portfolio. Fork it as a template. Read the source as a reference
 | PWA              | @ducanh2912/next-pwa (Workbox 7)                                      |
 | Testing          | Vitest + happy-dom + @testing-library/react                           |
 | Lint             | ESLint 9 (flat config) + eslint-config-next                           |
+| Format           | Prettier 3 + `@ianvs/prettier-plugin-sort-imports`                    |
 | Package manager  | Yarn 4 (Corepack)                                                     |
 | Hosting          | Vercel (primary) + static export for any CDN                          |
 
@@ -177,7 +191,10 @@ src/
 │   ├── rss.xml/route.ts          # RSS summary feed
 │   └── rss-full.xml/route.ts     # RSS full-content feed
 ├── components/                   # UI + content components
+│   ├── ui/                       # shadcn/ui primitives (managed by `npx shadcn@latest add`)
+│   ├── site/                     # Bespoke composition components (Header, Footer, Nav, AppLayoutPage, Hero, Searchbar, BackToTop, …)
 │   ├── content/mdx/              # MDX overrides (Pre, Code, ContentImage, TLDR, FAQ, HowTo, …)
+│   ├── content/research/         # Research-page sections (HeadingResearch, ResearchOverview, ResearchNews, ResearchAreas, ResearchSections, ComingSoonImage, SectionHeading, …)
 │   └── SEO/Breadcrumbs.tsx
 ├── data/
 │   ├── blog/*.mdx                # Blog posts (slug = filename)
@@ -320,18 +337,21 @@ authors:
     email: 'aannafee@gmu.edu'
     affiliations: [1] # 1-based indices into the entry's affiliations array
     corresponding: true
+    # equalContribution: true       # OPTIONAL: → † on each flagged author + a "†Equal contribution" caption
+    # principalInvestigator: true   # OPTIONAL: → ‡ on PI + a "‡Principal investigator" caption
 affiliations:
   - name: 'George Mason University'
     location: 'Fairfax, Virginia, USA'
     url: 'https://www.gmu.edu'
 venue:
-  name: 'CS700 — Computer Geometry, Course Project'
+  name: 'CS700 — Research Methodology in Computer Science, Course Project'
   short: 'GMU CS700'
   year: 2025
   status: 'tech-report' # preprint | under-review | accepted | published | workshop | tech-report
 published: '12/08/2025'
 featured: true # surfaces on the home page
 new: true # renders a "NEW" badge inline with the title on the listing card
+comingSoon: true # OPTIONAL: renders a "Coming soon!" pastel placeholder in place of the listing thumbnail (for conditionally accepted / pre-publication entries that don't have a teaser yet)
 section: 'others' # top-tier | conferences | journals | workshops | others
 topics: ['3D Graphics', 'Mesh Simplification']
 keywords: ['mesh decimation', 'QEM', 'vertex clustering']
@@ -357,6 +377,19 @@ bibtex: |
 
 The detail page renders the structured fields in the hero (status chip from `venue.status`, authors with affiliation superscripts, venue line, action-button row driven by `links` and `bibtex`). Authors matching `SITE_AUTHOR.name` are bolded. The `bibtex` field renders as a copy-to-clipboard code block anchored at `#bibtex`.
 
+**Author / affiliation superscripts are conditional** — each marker only renders when it actually disambiguates something:
+
+| Flag on `Author`              | Glyph   | Caption                 | Renders when                    |
+| ----------------------------- | ------- | ----------------------- | ------------------------------- |
+| `corresponding: true`         | `*`     | \*Corresponding author  | 2+ authors AND ≥1 corresponding |
+| `equalContribution: true`     | `†`     | †Equal contribution     | 2+ authors AND ≥2 flagged equal |
+| `principalInvestigator: true` | `‡`     | ‡Principal investigator | 2+ authors AND ≥1 PI            |
+| `affiliations: [n]`           | `¹ ² ³` | _(legend below)_        | 2+ affiliations on the entry    |
+
+Marker order on each author: `*†‡` then numeric affiliation indices (academic convention). Single-author / single-affiliation entries skip everything — no orphan markers. When markers do show, each `<sup>` carries a native `title` tooltip (affiliation index sups resolve to the full affiliation name; symbol sups resolve to their caption). A combined caption line — e.g. `*Corresponding author · †Equal contribution · ‡Principal investigator` — auto-renders below the affiliation row.
+
+The research listing page (`/research`) renders an Overview paragraph, a date-column News timeline, and a colored chip row of Research Areas above the section-grouped listings. Section headings across the page (Overview / News / Research Areas / Top-Tier Venues / Conferences / Journals / Workshops / Others) share a single `<SectionHeading>` component (`text-lg md:text-xl`, `font-bold`, `text-black dark:text-white`, bordered bottom).
+
 ### Special MDX components
 
 ```mdx
@@ -420,7 +453,7 @@ y = \sigma(Wx + b)
 
 ### Vercel (recommended)
 
-Zero-config — Vercel detects Next.js and uses the `installCommand` from `vercel.json` (`corepack enable && yarn install --immutable`) so Yarn 4 is honoured. Set `NEXT_PUBLIC_SITE_URL` to your production domain in the Vercel project settings.
+Zero-config — Vercel detects Next.js and uses the `installCommand` from `vercel.json` (`corepack enable && corepack prepare yarn@4.14.1 --activate && yarn install --immutable`) so Yarn 4 actually runs (the explicit `corepack prepare` step is required because `corepack enable` alone doesn't reliably switch the active yarn binary on Vercel's image — without it, Vercel falls back to Yarn 1.22 and silently rewrites the lockfile). Set `NEXT_PUBLIC_SITE_URL` to your production domain in the Vercel project settings.
 
 ### Static export
 
diff --git a/src/app/research/[slug]/page.tsx b/src/app/research/[slug]/page.tsx
index f8e7f22..289e3ef 100644
--- a/src/app/research/[slug]/page.tsx
+++ b/src/app/research/[slug]/page.tsx
@@ -226,7 +226,7 @@ export default async function ResearchEntryPage({ params }: Props) {
     }
 
     return (
-      <AppLayoutPage>
+      <AppLayoutPage className='pt-6 md:pt-10'>
         <script type='application/ld+json' dangerouslySetInnerHTML={{ __html: JSON.stringify(graphJsonLd) }} />
         <BackToTop />
 
diff --git a/src/app/research/page.tsx b/src/app/research/page.tsx
index 33d2a57..5315d9c 100644
--- a/src/app/research/page.tsx
+++ b/src/app/research/page.tsx
@@ -114,7 +114,7 @@ export default async function ResearchPage() {
   }
 
   return (
-    <AppLayoutPage>
+    <AppLayoutPage className='pt-6 md:pt-10'>
       <script type='application/ld+json' dangerouslySetInnerHTML={{ __html: JSON.stringify(graphJsonLd) }} />
       {/* h1 kept for accessibility / SEO; visual title removed per design — sections below carry the page */}
       <h1 className='sr-only'>Research</h1>
diff --git a/src/components/content/research/ComingSoonImage.tsx b/src/components/content/research/ComingSoonImage.tsx
new file mode 100644
index 0000000..b5b749b
--- /dev/null
+++ b/src/components/content/research/ComingSoonImage.tsx
@@ -0,0 +1,30 @@
+import { cn } from '@/lib/utils'
+
+type ComingSoonImageProps = {
+  className?: string
+}
+
+/**
+ * Pastel-gradient placeholder used in place of a real thumbnail/OG image when a
+ * research entry is pre-publication (`comingSoon: true` in the MDX frontmatter).
+ * Sized to fill its parent — drop into the same `relative aspect-[5/4]` slot the
+ * NextImage normally occupies.
+ */
+export const ComingSoonImage: React.FunctionComponent<ComingSoonImageProps> = ({ className }) => {
+  return (
+    <div
+      role='img'
+      aria-label='Coming soon'
+      className={cn(
+        'flex h-full w-full items-center justify-center',
+        'bg-gradient-to-br from-amber-50 via-rose-50 to-blue-100',
+        'dark:from-amber-950/40 dark:via-rose-950/30 dark:to-blue-900/40',
+        className
+      )}
+    >
+      <span className='font-serif text-2xl leading-none font-medium tracking-tight text-gray-900 md:text-3xl dark:text-gray-100'>
+        Coming <span className='italic'>soon!</span>
+      </span>
+    </div>
+  )
+}
diff --git a/src/components/content/research/HeadingResearch.tsx b/src/components/content/research/HeadingResearch.tsx
index 88754af..bdf3d23 100644
--- a/src/components/content/research/HeadingResearch.tsx
+++ b/src/components/content/research/HeadingResearch.tsx
@@ -4,6 +4,7 @@ import { SITE_AUTHOR } from '@/libs/constants/site'
 import { twclsx } from '@/libs/twclsx'
 
 import { Affiliation, Author, ResearchLinks, Venue } from 'me'
+import { Fragment } from 'react'
 import {
   HiGlobeAlt,
   HiOutlineDatabase,
@@ -84,7 +85,7 @@ export const HeadingResearch: React.FunctionComponent<HeadingResearchProps> = (p
       </h1>
 
       {props.topics && props.topics.length > 0 && (
-        <div className={twclsx('mb-6 flex w-full flex-wrap items-center justify-center gap-2')}>
+        <div className={twclsx('mb-6 flex w-full flex-wrap items-center justify-center gap-2.5')}>
           {props.topics.map((topic) => (
             <span
               key={topic}
@@ -100,60 +101,128 @@ export const HeadingResearch: React.FunctionComponent<HeadingResearchProps> = (p
         </div>
       )}
 
-      <div
-        className={twclsx(
-          'flex flex-wrap items-center justify-center gap-x-2 gap-y-1',
-          'text-base text-gray-700 dark:text-gray-300'
-        )}
-      >
-        {props.authors.map((author, i) => {
-          const indices = author.affiliations ?? []
-          const supText = indices.join(',')
-          const isLast = i === props.authors.length - 1
-          const isOwner = author.name === SITE_AUTHOR.name
-          const nameClass = isOwner ? twclsx('font-semibold text-purple-700 dark:text-purple-300') : undefined
-
-          const nameNode = author.url ? (
-            <UnstyledLink href={author.url} className={twclsx('hover:underline', nameClass)}>
-              {author.name}
-            </UnstyledLink>
-          ) : (
-            <span className={nameClass}>{author.name}</span>
-          )
-
-          return (
-            <span key={`${author.name}-${i}`} className={twclsx('inline-flex items-baseline')}>
-              {nameNode}
-              {author.corresponding && <sup className={nameClass}>*</sup>}
-              {supText && <sup className={nameClass}>{supText}</sup>}
-              {!isLast && <span>,&nbsp;</span>}
-            </span>
-          )
-        })}
-      </div>
+      {/* Suppress meaningless markers: each superscript only renders when it actually
+          disambiguates something. Single-author / single-affiliation entries collapse
+          to clean text. Marker order on each author follows academic convention:
+          symbol markers (* † ‡) first, then numeric affiliation indices. */}
+      {(() => {
+        const hasMultipleAuthors = props.authors.length > 1
+        const equalContribCount = props.authors.filter((a) => a.equalContribution).length
 
-      {props.affiliations && props.affiliations.length > 0 && (
-        <p className={twclsx('text-center text-sm text-gray-500 dark:text-gray-400', 'mx-auto mt-2 max-w-2xl')}>
-          {props.affiliations.map((aff, i) => {
-            const idx = i + 1
-            const text = aff.location ? `${aff.name}, ${aff.location}` : aff.name
-            const isLast = i === (props.affiliations as Affiliation[]).length - 1
-            return (
-              <span key={`${aff.name}-${i}`}>
-                <sup>{idx}</sup>
-                {aff.url ? (
-                  <UnstyledLink href={aff.url} className={twclsx('hover:underline')}>
-                    {text}
+        const showAffSup = (props.affiliations?.length ?? 0) > 1
+        const showCorrespondingSup = hasMultipleAuthors && props.authors.some((a) => a.corresponding)
+        const showEqualContribSup = hasMultipleAuthors && equalContribCount >= 2
+        const showPISup = hasMultipleAuthors && props.authors.some((a) => a.principalInvestigator)
+
+        const captions: { glyph: string; label: string }[] = []
+        if (showCorrespondingSup) captions.push({ glyph: '*', label: 'Corresponding author' })
+        if (showEqualContribSup) captions.push({ glyph: '†', label: 'Equal contribution' })
+        if (showPISup) captions.push({ glyph: '‡', label: 'Principal investigator' })
+
+        return (
+          <>
+            <div
+              className={twclsx(
+                'flex flex-wrap items-center justify-center gap-x-2 gap-y-1',
+                'text-base text-gray-700 dark:text-gray-300'
+              )}
+            >
+              {props.authors.map((author, i) => {
+                const indices = author.affiliations ?? []
+                const supText = indices.join(',')
+                const isLast = i === props.authors.length - 1
+                const isOwner = author.name === SITE_AUTHOR.name
+                const nameClass = isOwner ? twclsx('font-semibold text-purple-700 dark:text-purple-300') : undefined
+
+                // Resolve affiliation names for the tooltip so a reader who mouses
+                // over `<sup>1,2</sup>` gets "George Mason University; …" instead
+                // of having to scan down to the affiliation legend.
+                const affTitle = indices
+                  .map((idx) => props.affiliations?.[idx - 1])
+                  .filter((a): a is Affiliation => Boolean(a))
+                  .map((a) => (a.location ? `${a.name}, ${a.location}` : a.name))
+                  .join('; ')
+
+                const nameNode = author.url ? (
+                  <UnstyledLink href={author.url} className={twclsx('hover:underline', nameClass)}>
+                    {author.name}
                   </UnstyledLink>
                 ) : (
-                  text
-                )}
-                {!isLast && ', '}
-              </span>
-            )
-          })}
-        </p>
-      )}
+                  <span className={nameClass}>{author.name}</span>
+                )
+
+                return (
+                  <span key={`${author.name}-${i}`} className={twclsx('inline-flex items-baseline')}>
+                    {nameNode}
+                    {author.corresponding && showCorrespondingSup && (
+                      <sup className={twclsx(nameClass, 'cursor-help')} title='Corresponding author'>
+                        *
+                      </sup>
+                    )}
+                    {author.equalContribution && showEqualContribSup && (
+                      <sup className={twclsx(nameClass, 'cursor-help')} title='Equal contribution'>
+                        †
+                      </sup>
+                    )}
+                    {author.principalInvestigator && showPISup && (
+                      <sup className={twclsx(nameClass, 'cursor-help')} title='Principal investigator'>
+                        ‡
+                      </sup>
+                    )}
+                    {supText && showAffSup && (
+                      <sup className={twclsx(nameClass, 'cursor-help')} title={affTitle || undefined}>
+                        {supText}
+                      </sup>
+                    )}
+                    {!isLast && <span>,&nbsp;</span>}
+                  </span>
+                )
+              })}
+            </div>
+
+            {props.affiliations && props.affiliations.length > 0 && (
+              <p className={twclsx('text-center text-sm text-gray-500 dark:text-gray-400', 'mx-auto mt-2 max-w-2xl')}>
+                {props.affiliations.map((aff, i) => {
+                  const idx = i + 1
+                  const text = aff.location ? `${aff.name}, ${aff.location}` : aff.name
+                  const isLast = i === (props.affiliations as Affiliation[]).length - 1
+                  return (
+                    <span key={`${aff.name}-${i}`}>
+                      {showAffSup && (
+                        <sup className='cursor-help' title={text}>
+                          {idx}
+                        </sup>
+                      )}
+                      {aff.url ? (
+                        <UnstyledLink href={aff.url} className={twclsx('hover:underline')}>
+                          {text}
+                        </UnstyledLink>
+                      ) : (
+                        text
+                      )}
+                      {!isLast && ', '}
+                    </span>
+                  )
+                })}
+              </p>
+            )}
+
+            {captions.length > 0 && (
+              <p className={twclsx('mt-1 text-center text-xs text-gray-500 dark:text-gray-400')}>
+                {captions.map((cap, i) => (
+                  <Fragment key={cap.glyph}>
+                    {i > 0 && <span aria-hidden='true'>{' · '}</span>}
+                    <span>
+                      <sup>{cap.glyph}</sup>
+                      {cap.label}
+                    </span>
+                  </Fragment>
+                ))}
+              </p>
+            )}
+          </>
+        )
+      })()}
 
       {venueParts.length > 0 && (
         <p className={twclsx('mt-2 text-center text-sm italic', 'text-gray-500 dark:text-gray-400')}>
diff --git a/src/components/content/research/ResearchAreas.tsx b/src/components/content/research/ResearchAreas.tsx
index f2ddfaa..141cdd3 100644
--- a/src/components/content/research/ResearchAreas.tsx
+++ b/src/components/content/research/ResearchAreas.tsx
@@ -1,3 +1,5 @@
+import { SectionHeading } from './SectionHeading'
+
 type Area = {
   label: string
   className: string
@@ -29,10 +31,8 @@ const AREAS: Area[] = [
 export const ResearchAreas: React.FunctionComponent = () => {
   return (
     <section className='mb-10 md:mb-12'>
-      <h2 className='mb-3 border-b border-gray-200 pb-2 text-sm font-semibold tracking-wider text-gray-500 uppercase md:text-base dark:border-gray-800 dark:text-gray-400'>
-        Research Areas
-      </h2>
-      <div className='flex flex-wrap items-center gap-2'>
+      <SectionHeading>Research Areas</SectionHeading>
+      <div className='flex flex-wrap items-center gap-2.5'>
         {AREAS.map((area) => (
           <span
             key={area.label}
diff --git a/src/components/content/research/ResearchItem.tsx b/src/components/content/research/ResearchItem.tsx
index 6f24eab..3ea3fbd 100644
--- a/src/components/content/research/ResearchItem.tsx
+++ b/src/components/content/research/ResearchItem.tsx
@@ -4,6 +4,8 @@ import { SITE_AUTHOR } from '@/libs/constants/site'
 import { generateOgImage } from '@/libs/metapage'
 import { twclsx } from '@/libs/twclsx'
 
+import { ComingSoonImage } from './ComingSoonImage'
+
 import type { Research } from 'me'
 import NextImage from 'next/image'
 import { Fragment } from 'react'
@@ -62,15 +64,19 @@ export const ResearchItem: React.FunctionComponent<ResearchItemProps> = (props)
           href={urlPost}
           className='relative block aspect-[5/4] w-32 flex-shrink-0 overflow-hidden rounded-md bg-gray-100 shadow-sm ring-1 ring-gray-200 sm:w-36 md:w-44 dark:bg-gray-800 dark:ring-gray-800'
         >
-          <NextImage
-            src={imageSrc}
-            alt={props.title}
-            fill
-            sizes='(max-width: 640px) 128px, (max-width: 768px) 144px, 176px'
-            quality={90}
-            className='object-cover transition-transform duration-300 group-hover:scale-[1.03]'
-            priority={props.priority ?? false}
-          />
+          {props.comingSoon ? (
+            <ComingSoonImage className='transition-transform duration-300 group-hover:scale-[1.03]' />
+          ) : (
+            <NextImage
+              src={imageSrc}
+              alt={props.title}
+              fill
+              sizes='(max-width: 640px) 128px, (max-width: 768px) 144px, 176px'
+              quality={90}
+              className='object-cover transition-transform duration-300 group-hover:scale-[1.03]'
+              priority={props.priority ?? false}
+            />
+          )}
         </UnstyledLink>
 
         <div className='flex min-w-0 flex-1 flex-col pt-0.5'>
diff --git a/src/components/content/research/ResearchNews.tsx b/src/components/content/research/ResearchNews.tsx
index 2396927..027fd7a 100644
--- a/src/components/content/research/ResearchNews.tsx
+++ b/src/components/content/research/ResearchNews.tsx
@@ -1,5 +1,7 @@
 import { UnstyledLink } from '@/components/site/links'
 
+import { SectionHeading } from './SectionHeading'
+
 type NewsItem = {
   date: string
   emoji?: string
@@ -28,9 +30,7 @@ const NEWS: NewsItem[] = [
 export const ResearchNews: React.FunctionComponent = () => {
   return (
     <section className='mb-10 md:mb-12'>
-      <h2 className='mb-3 border-b border-gray-200 pb-2 text-sm font-semibold tracking-wider text-gray-500 uppercase md:text-base dark:border-gray-800 dark:text-gray-400'>
-        News
-      </h2>
+      <SectionHeading>News</SectionHeading>
       <ul className='flex flex-col gap-3'>
         {NEWS.map((item, i) => (
           <li
diff --git a/src/components/content/research/ResearchOverview.tsx b/src/components/content/research/ResearchOverview.tsx
index 7e5f8a8..49bc833 100644
--- a/src/components/content/research/ResearchOverview.tsx
+++ b/src/components/content/research/ResearchOverview.tsx
@@ -1,9 +1,9 @@
+import { SectionHeading } from './SectionHeading'
+
 export const ResearchOverview: React.FunctionComponent = () => {
   return (
     <section className='mb-10 md:mb-12'>
-      <h2 className='mb-3 border-b border-gray-200 pb-2 text-sm font-semibold tracking-wider text-gray-500 uppercase md:text-base dark:border-gray-800 dark:text-gray-400'>
-        Overview
-      </h2>
+      <SectionHeading>Overview</SectionHeading>
       <p className='text-base leading-7 text-gray-700 dark:text-gray-300'>
         My work sits at the intersection of artificial intelligence and 3D computer graphics. I focus on how machine
         learning can accelerate and augment traditional graphics pipelines — particularly mesh simplification, geometric
diff --git a/src/components/content/research/ResearchSections.tsx b/src/components/content/research/ResearchSections.tsx
index c30a415..9b235cc 100644
--- a/src/components/content/research/ResearchSections.tsx
+++ b/src/components/content/research/ResearchSections.tsx
@@ -1,4 +1,5 @@
 import { ResearchItem } from './ResearchItem'
+import { SectionHeading } from './SectionHeading'
 
 import type { Research } from 'me'
 
@@ -31,9 +32,7 @@ export const ResearchSections: React.FunctionComponent<ResearchSectionsProps> =
     <div className='flex flex-col gap-12 pb-12'>
       {grouped.map((group, groupIdx) => (
         <section key={group.key}>
-          <h2 className='mb-2 border-b border-gray-200 pb-2 text-sm font-semibold tracking-wider text-gray-500 uppercase md:text-base dark:border-gray-800 dark:text-gray-400'>
-            {group.label}
-          </h2>
+          <SectionHeading className='mb-2'>{group.label}</SectionHeading>
           <div className='flex flex-col divide-y divide-gray-100 dark:divide-gray-800'>
             {group.items.map((post, i) => (
               <ResearchItem key={post.slug} {...post} priority={groupIdx === 0 && i === 0} />
diff --git a/src/components/content/research/SectionHeading.tsx b/src/components/content/research/SectionHeading.tsx
new file mode 100644
index 0000000..bf54486
--- /dev/null
+++ b/src/components/content/research/SectionHeading.tsx
@@ -0,0 +1,17 @@
+import { cn } from '@/lib/utils'
+
+type SectionHeadingProps = {
+  children: React.ReactNode
+  className?: string
+}
+
+export const SectionHeading: React.FC<SectionHeadingProps> = ({ children, className }) => (
+  <h2
+    className={cn(
+      'mb-3 border-b border-gray-200 pb-2 text-lg font-bold text-black md:text-xl dark:border-gray-800 dark:text-white',
+      className
+    )}
+  >
+    {children}
+  </h2>
+)
diff --git a/src/components/content/research/index.ts b/src/components/content/research/index.ts
index b7fec0a..e581445 100644
--- a/src/components/content/research/index.ts
+++ b/src/components/content/research/index.ts
@@ -1,3 +1,4 @@
+export * from './ComingSoonImage'
 export * from './HeadingResearch'
 export * from './ResearchAbstract'
 export * from './ResearchAreas'
@@ -7,3 +8,4 @@ export * from './ResearchNews'
 export * from './ResearchOverview'
 export * from './ResearchSections'
 export * from './ResearchTeaser'
+export * from './SectionHeading'
diff --git a/src/components/site/inputs/Searchbar.tsx b/src/components/site/inputs/Searchbar.tsx
index 68e840d..1160fac 100644
--- a/src/components/site/inputs/Searchbar.tsx
+++ b/src/components/site/inputs/Searchbar.tsx
@@ -21,7 +21,7 @@ const Component: React.FunctionComponent<SearchbarProps> = ({
   className
 }) => {
   return (
-    <InputGroup className={cn('mb-10 h-11', className)}>
+    <InputGroup className={cn('mb-6 h-11', className)}>
       <InputGroupAddon align='inline-start'>
         <HiOutlineSearch className='text-muted-foreground' />
       </InputGroupAddon>
diff --git a/src/components/site/templates/Hero.tsx b/src/components/site/templates/Hero.tsx
index 2bea34f..723adba 100644
--- a/src/components/site/templates/Hero.tsx
+++ b/src/components/site/templates/Hero.tsx
@@ -8,7 +8,7 @@ export type HeroProps = {
 }
 
 export const Hero: React.FunctionComponent<HeroProps> = (props) => (
-  <section className={twclsx('content-auto pt-4 pb-8 md:pt-8 md:pb-16', props.className)}>
+  <section className={twclsx('content-auto pt-4 pb-4 md:pt-8 md:pb-8', props.className)}>
     <h1 className='mb-3 md:mb-4'>{props.title}</h1>
     <p>{props.description}</p>
     {props.children}
diff --git a/src/data/research/mesh-decimation-benchmark.mdx b/src/data/research/mesh-decimation-benchmark.mdx
index 442f36c..fd166d5 100644
--- a/src/data/research/mesh-decimation-benchmark.mdx
+++ b/src/data/research/mesh-decimation-benchmark.mdx
@@ -26,7 +26,7 @@ affiliations:
     location: 'Fairfax, Virginia, USA'
     url: 'https://www.gmu.edu'
 venue:
-  name: 'CS700 — Computer Geometry, Course Project'
+  name: 'CS700 — Research Methodology in Computer Science, Course Project'
   short: 'GMU CS700'
   year: 2025
   status: 'tech-report'
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 301644f..3f07516 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -43,7 +43,16 @@ declare module 'me' {
     name: string
     url?: string
     affiliations?: Array<number>
+    /** Renders a `*` superscript next to the name + a "*Corresponding author" caption.
+     * Suppressed on single-author papers (the marker has nothing to disambiguate). */
     corresponding?: boolean
+    /** Marks shared first-authorship. Renders a `†` superscript on every author with the
+     * flag set + a "†Equal contribution" caption. Requires at least 2 authors flagged
+     * (the concept of "equal" is meaningless with one). */
+    equalContribution?: boolean
+    /** Marks the senior / PI author. Renders a `‡` superscript + a "‡Principal
+     * investigator" caption. Suppressed on single-author papers. */
+    principalInvestigator?: boolean
     email?: string
     orcid?: string
   }
@@ -107,6 +116,9 @@ declare module 'me' {
     section?: 'top-tier' | 'conferences' | 'journals' | 'workshops' | 'others'
     /** Renders a "NEW" badge inline with the title on listing cards. */
     new?: boolean
+    /** Renders a "Coming soon!" placeholder in place of the listing thumbnail
+     * when no thumbnail/teaser exists yet (e.g. conditionally accepted papers). */
+    comingSoon?: boolean
     related?: Array<string>
   }