diff --git a/src/components/profile/ProfileOverview.tsx b/src/components/profile/ProfileOverview.tsx
deleted file mode 100644
index fb642a4..0000000
--- a/src/components/profile/ProfileOverview.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { ReactNode } from 'react'
-
-type ProfileOverviewProps = {
-  children: ReactNode
-}
-
-export function ProfileOverview({ children }: ProfileOverviewProps) {
-  return (
-    <section aria-labelledby="pinned-repos" className="space-y-4">
-      {children}
-    </section>
-  )
-}
diff --git a/src/components/repo/RepoListItem.tsx b/src/components/repo/RepoListItem.tsx
index 93d307e..c13b2ad 100644
--- a/src/components/repo/RepoListItem.tsx
+++ b/src/components/repo/RepoListItem.tsx
@@ -1,11 +1,10 @@
-import type { Did, Handle } from '@atcute/lexicons'
-import { useEffect, useState } from 'react'
-import Markdown from 'react-markdown'
+import type { Handle } from '@atcute/lexicons'
 import { Link } from 'react-router-dom'
-import { countStars } from '../../lib/tangled/feed'
+import Markdown from 'react-markdown'
 import type { Repo } from '../../lib/tangled/index'
 import { getRepoName, getRepoRkey } from '../../lib/tangled/repo'
-import { IconStar } from '@tabler/icons-react'
+import { SurfaceCard } from '../shared/SurfaceCard'
+import { RepoStarCount } from './RepoStarCount'
 
 const MAX_VISIBLE_TOPICS = 3
 
@@ -19,29 +18,16 @@ export function RepoListItem({ handle, repo }: RepoListItemProps) {
   const name = getRepoName(repo)
   const rkey = getRepoRkey(repo)
   const repoDid = value.repoDid
-  const [stars, setStars] = useState<number | null>(null)
-  const [starsFailed, setStarsFailed] = useState(false)
-
-  useEffect(() => {
-    if (repoDid === undefined) return
-
-    async function loadStars(repoDid: Did) {
-      try {
-        setStars(await countStars(repoDid))
-      } catch {
-        setStarsFailed(true)
-      }
-    }
-
-    loadStars(repoDid)
-  }, [repoDid])
 
   return (
     <Link
       to={`/${handle}/${encodeURIComponent(rkey)}`}
       className="group block h-full rounded focus-visible:outline-none"
     >
-      <article className="flex h-full flex-col border border-ctp-surface-1 bg-ctp-mantle p-3 transition-colors group-hover:border-ctp-lavender sm:p-4">
+      <SurfaceCard
+        as="article"
+        className="flex h-full flex-col p-3 transition-colors group-hover:border-ctp-lavender sm:p-4"
+      >
         <header className="flex items-start justify-between gap-4">
           <div className="min-w-0">
             <h3 className="truncate font-mono text-base font-semibold text-ctp-text transition-colors group-hover:text-ctp-lavender">
@@ -53,17 +39,7 @@ export function RepoListItem({ handle, repo }: RepoListItemProps) {
             )}
           </div>
 
-          {repoDid !== undefined && (
-            <span className="shrink-0 font-mono text-sm leading-4 tabular-nums text-ctp-yellow">
-              <IconStar
-                size={16}
-                stroke={1.75}
-                aria-hidden="true"
-                className="mr-1 inline-block align-middle text-current"
-              />
-              {starsFailed ? '—' : (stars ?? '…')}
-            </span>
-          )}
+          <RepoStarCount repoDid={repoDid} />
         </header>
 
         {value.description && (
@@ -81,7 +57,7 @@ export function RepoListItem({ handle, repo }: RepoListItemProps) {
             ))}
           </ul>
         )}
-      </article>
+      </SurfaceCard>
     </Link>
   )
 }
diff --git a/src/components/repo/RepoStarCount.tsx b/src/components/repo/RepoStarCount.tsx
new file mode 100644
index 0000000..8464d14
--- /dev/null
+++ b/src/components/repo/RepoStarCount.tsx
@@ -0,0 +1,47 @@
+import type { Did } from '@atcute/lexicons'
+import { useEffect, useState } from 'react'
+import { IconStar } from '@tabler/icons-react'
+import { countStars } from '../../lib/tangled/feed'
+
+type RepoStarCountProps = {
+  repoDid?: Did
+}
+
+export function RepoStarCount({ repoDid }: RepoStarCountProps) {
+  const [stars, setStars] = useState<number | null>(null)
+  const [starsFailed, setStarsFailed] = useState(false)
+
+  useEffect(() => {
+    if (repoDid === undefined) return
+
+    let cancelled = false
+    setStars(null)
+    setStarsFailed(false)
+
+    countStars(repoDid)
+      .then((count) => {
+        if (!cancelled) setStars(count)
+      })
+      .catch(() => {
+        if (!cancelled) setStarsFailed(true)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [repoDid])
+
+  if (repoDid === undefined) return null
+
+  return (
+    <span className="shrink-0 font-mono text-sm leading-4 tabular-nums text-ctp-yellow">
+      <IconStar
+        size={16}
+        stroke={1.75}
+        aria-hidden="true"
+        className="mr-1 inline-block align-middle text-current"
+      />
+      {starsFailed ? '—' : (stars ?? '…')}
+    </span>
+  )
+}
diff --git a/src/components/repo/RepoView.tsx b/src/components/repo/RepoView.tsx
index a5c66b4..52d17e2 100644
--- a/src/components/repo/RepoView.tsx
+++ b/src/components/repo/RepoView.tsx
@@ -1,12 +1,10 @@
-import type { Did } from '@atcute/lexicons'
-import { useEffect, useState } from 'react'
 import Markdown from 'react-markdown'
 import rehypeRaw from 'rehype-raw'
 import rehypeSanitize from 'rehype-sanitize'
-import { countStars } from '../../lib/tangled/feed'
 import type { Repo } from '../../lib/tangled/index'
 import { getRepoName } from '../../lib/tangled/repo'
-import { IconStar } from '@tabler/icons-react'
+import { SurfaceCard } from '../shared/SurfaceCard'
+import { RepoStarCount } from './RepoStarCount'
 
 type RepoProps = {
   repo: Repo
@@ -16,42 +14,16 @@ export function RepoView({ repo }: RepoProps) {
   const { value } = repo
   const name = getRepoName(repo)
   const repoDid = value.repoDid
-  const [stars, setStars] = useState<number | null>(null)
-  const [starsFailed, setStarsFailed] = useState(false)
-
-  useEffect(() => {
-    if (repoDid === undefined) return
-
-    async function loadStars(repoDid: Did) {
-      try {
-        setStars(await countStars(repoDid))
-      } catch {
-        setStarsFailed(true)
-      }
-    }
-
-    loadStars(repoDid)
-  }, [repoDid])
 
   return (
-    <article className="rounded border border-ctp-surface-1 bg-ctp-mantle p-6 transition-colors hover:border-ctp-lavender">
+    <SurfaceCard as="article" className="p-6 transition-colors hover:border-ctp-lavender">
       <header className="flex items-start justify-between gap-4">
         <div className="min-w-0">
           <h1 className="truncate font-mono text-2xl font-bold text-ctp-text">{name}</h1>
           {value.knot && <p className="mt-1 font-mono text-sm text-ctp-overlay-1">{value.knot}</p>}
         </div>
 
-        {repoDid !== undefined && (
-          <span className="shrink-0 font-mono text-sm leading-4 tabular-nums text-ctp-yellow">
-            <IconStar
-              size={16}
-              stroke={1.75}
-              aria-hidden="true"
-              className="mr-1 inline-block align-middle text-current"
-            />
-            {starsFailed ? '—' : (stars ?? '…')}
-          </span>
-        )}
+        <RepoStarCount repoDid={repoDid} />
       </header>
 
       {value.description && (
@@ -77,6 +49,6 @@ export function RepoView({ repo }: RepoProps) {
           </a>
         </div>
       )}
-    </article>
+    </SurfaceCard>
   )
 }
diff --git a/src/components/shared/SurfaceCard.tsx b/src/components/shared/SurfaceCard.tsx
new file mode 100644
index 0000000..a0d7d7d
--- /dev/null
+++ b/src/components/shared/SurfaceCard.tsx
@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react'
+
+type SurfaceCardProps = {
+  as?: 'article' | 'div'
+  children: ReactNode
+  className?: string
+}
+
+export function SurfaceCard({ as = 'div', children, className = '' }: SurfaceCardProps) {
+  const Component = as
+
+  return (
+    <Component className={`rounded border border-ctp-surface-1 bg-ctp-mantle ${className}`}>
+      {children}
+    </Component>
+  )
+}
diff --git a/src/components/string/StringListItem.tsx b/src/components/string/StringListItem.tsx
index 031b546..9ff4505 100644
--- a/src/components/string/StringListItem.tsx
+++ b/src/components/string/StringListItem.tsx
@@ -1,6 +1,7 @@
 import { Link } from 'react-router-dom'
 import { parseResourceUri } from '@atcute/lexicons'
 import type { StringRecord } from '../../lib/tangled'
+import { SurfaceCard } from '../shared/SurfaceCard'
 
 type StringListItemProps = {
   handle: string
@@ -17,7 +18,10 @@ export function StringListItem({ handle, stringRecord }: StringListItemProps) {
 
   return (
     <Link to={`/strings/${handle}/${encodeURIComponent(rkey)}`} className="block">
-      <article className="group h-full border-ctp-surface-1 p-4 transition-colors hover:border-ctp-lavender">
+      <SurfaceCard
+        as="article"
+        className="group h-full p-4 transition-colors hover:border-ctp-lavender"
+      >
         <h3 className="truncate font-mono text-base font-semibold text-ctp-text">
           {value.filename}
         </h3>
@@ -31,7 +35,7 @@ export function StringListItem({ handle, stringRecord }: StringListItemProps) {
         <p className="mt-3 line-clamp-4 whitespace-pre-wrap font-mono text-sm leading-snug text-ctp-overlay-1">
           {value.contents}
         </p>
-      </article>
+      </SurfaceCard>
     </Link>
   )
 }
diff --git a/src/index.css b/src/index.css
index 93adc0e..f80bee2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -226,10 +226,6 @@
     text-align: left;
   }
 
-  main {
-    padding-block: 3rem;
-  }
-
   article {
     border: 1px solid var(--app-border);
     border-radius: 0.25rem;
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index ae11cb7..641cbb1 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -6,8 +6,8 @@ import { IconPin } from '@tabler/icons-react'
 import { type ReactNode, useEffect, useState } from 'react'
 import { useParams, useSearchParams } from 'react-router-dom'
 import { ProfilePageSkeleton } from '../components/shared/PageSkeletons'
+import { PageContainer } from '../components/layout/PageContainer'
 import { ProfileHeader } from '../components/profile/ProfileHeader'
-import { ProfileOverview } from '../components/profile/ProfileOverview'
 import { ProfileTabs } from '../components/profile/ProfileTabs'
 import { RepoListItem } from '../components/repo/RepoListItem'
 import { StringListItem } from '../components/string/StringListItem'
@@ -123,71 +123,77 @@ export function ProfilePage() {
   const activeSection = parseProfileSection(searchParams.get('view'))
 
   return (
-    <main className="mx-auto w-full max-w-6xl px-6 py-8">
-      <ProfileHeader miniDoc={identity} profile={profile} blueskyProfile={bskyProfile} />
-      <ProfileTabs handle={identity.handle} />
-
-      <div className="mt-8">
-        {activeSection === 'overview' && (
-          <ProfileOverview>
-            <h2
-              id="pinned-repos"
-              className="flex items-center gap-2 font-mono text-xs font-semibold uppercase tracking-widest text-ctp-overlay-1"
-            >
-              <IconPin size={14} stroke={1.75} aria-hidden="true" />
-              Pinned
-            </h2>
-            {pinnedRepos?.length === 0 && <p>No repos found.</p>}
-            {pinnedRepos && pinnedRepos.length > 0 && (
-              <div className="grid gap-4 lg:grid-cols-2">
-                {pinnedRepos.map((repo) => (
-                  <RepoListItem key={repo.uri} handle={identity.handle} repo={repo} />
-                ))}
-              </div>
-            )}
-          </ProfileOverview>
-        )}
-
-        {activeSection === 'repos' && (
-          <ProfileCollection title="Repositories">
-            {repos.items.length === 0 && <p>No repositories found.</p>}
-            {repos.items.length > 0 && (
-              <div className="grid gap-4 lg:grid-cols-2">
-                {repos.items.map((repo) => (
-                  <RepoListItem key={repo.uri} handle={identity.handle} repo={repo} />
-                ))}
-              </div>
-            )}
-          </ProfileCollection>
-        )}
-
-        {activeSection === 'strings' && (
-          <ProfileCollection title="Strings">
-            {strings.items.length === 0 && <p>No strings found.</p>}
-            {strings.items.length > 0 && (
-              <div className="grid gap-4 lg:grid-cols-2">
-                {strings.items.map((string) => (
-                  <StringListItem key={string.uri} handle={identity.handle} stringRecord={string} />
-                ))}
-              </div>
-            )}
-          </ProfileCollection>
-        )}
-
-        {activeSection === 'stars' && (
-          <ProfileCollection title="Stars">
-            {starredRepos.length === 0 && <p>No stars found.</p>}
-
-            {starredRepos.length > 0 && (
-              <div className="grid gap-4 lg:grid-cols-2">
-                {starredRepos.map(({ repo, handle }) => (
-                  <RepoListItem key={repo.uri} handle={handle} repo={repo} />
-                ))}
-              </div>
-            )}
-          </ProfileCollection>
-        )}
-      </div>
+    <main>
+      <PageContainer className="py-8">
+        <ProfileHeader miniDoc={identity} profile={profile} blueskyProfile={bskyProfile} />
+        <ProfileTabs handle={identity.handle} />
+
+        <div className="mt-8">
+          {activeSection === 'overview' && (
+            <section aria-labelledby="pinned-repos" className="space-y-4">
+              <h2
+                id="pinned-repos"
+                className="flex items-center gap-2 font-mono text-xs font-semibold uppercase tracking-widest text-ctp-overlay-1"
+              >
+                <IconPin size={14} stroke={1.75} aria-hidden="true" />
+                Pinned
+              </h2>
+              {pinnedRepos?.length === 0 && <p>No repos found.</p>}
+              {pinnedRepos && pinnedRepos.length > 0 && (
+                <div className="grid gap-4 lg:grid-cols-2">
+                  {pinnedRepos.map((repo) => (
+                    <RepoListItem key={repo.uri} handle={identity.handle} repo={repo} />
+                  ))}
+                </div>
+              )}
+            </section>
+          )}
+
+          {activeSection === 'repos' && (
+            <ProfileCollection title="Repositories">
+              {repos.items.length === 0 && <p>No repositories found.</p>}
+              {repos.items.length > 0 && (
+                <div className="grid gap-4 lg:grid-cols-2">
+                  {repos.items.map((repo) => (
+                    <RepoListItem key={repo.uri} handle={identity.handle} repo={repo} />
+                  ))}
+                </div>
+              )}
+            </ProfileCollection>
+          )}
+
+          {activeSection === 'strings' && (
+            <ProfileCollection title="Strings">
+              {strings.items.length === 0 && <p>No strings found.</p>}
+              {strings.items.length > 0 && (
+                <div className="grid gap-4 lg:grid-cols-2">
+                  {strings.items.map((string) => (
+                    <StringListItem
+                      key={string.uri}
+                      handle={identity.handle}
+                      stringRecord={string}
+                    />
+                  ))}
+                </div>
+              )}
+            </ProfileCollection>
+          )}
+
+          {activeSection === 'stars' && (
+            <ProfileCollection title="Stars">
+              {starredRepos.length === 0 && <p>No stars found.</p>}
+
+              {starredRepos.length > 0 && (
+                <div className="grid gap-4 lg:grid-cols-2">
+                  {starredRepos.map(({ repo, handle }) => (
+                    <RepoListItem key={repo.uri} handle={handle} repo={repo} />
+                  ))}
+                </div>
+              )}
+            </ProfileCollection>
+          )}
+        </div>
+      </PageContainer>
     </main>
   )
 }
diff --git a/src/pages/RepoPage.tsx b/src/pages/RepoPage.tsx
index 09446f7..95a2569 100644
--- a/src/pages/RepoPage.tsx
+++ b/src/pages/RepoPage.tsx
@@ -6,6 +6,7 @@ import type { $output as RepoTreeResponse } from '@atcute/tangled/types/repo/tre
 import { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { RepoPageSkeleton } from '../components/shared/PageSkeletons'
+import { PageContainer } from '../components/layout/PageContainer'
 import { ProfileByline } from '../components/profile/ProfileByline'
 import { RepoReadme } from '../components/repo/RepoReadme'
 import { RepoView } from '../components/repo/RepoView'
@@ -75,20 +76,22 @@ export function RepoPage() {
   }
 
   return (
-    <main className="mx-auto w-full max-w-6xl px-6 py-8">
-      <ProfileByline
-        miniDoc={identity}
-        profile={profile}
-        bskyProfile={bskyProfile}
-        label={getRepoName(repo)}
-      />
+    <main>
+      <PageContainer className="py-8">
+        <ProfileByline
+          miniDoc={identity}
+          profile={profile}
+          bskyProfile={bskyProfile}
+          label={getRepoName(repo)}
+        />
 
-      <section className="mt-8 space-y-6">
-        <RepoView repo={repo} />
-        <RepoReadme readme={rootTree?.readme} />
+        <section className="mt-8 space-y-6">
+          <RepoView repo={repo} />
+          <RepoReadme readme={rootTree?.readme} />
 
-        <RepoWorkspace repo={repo} onRootTree={setRootTree} />
-      </section>
+          <RepoWorkspace repo={repo} onRootTree={setRootTree} />
+        </section>
+      </PageContainer>
     </main>
   )
 }