diff --git a/frontend/app/profile/actions.ts b/frontend/app/profile/actions.ts
index 324c4678..b4d6df0e 100644
--- a/frontend/app/profile/actions.ts
+++ b/frontend/app/profile/actions.ts
@@ -71,14 +71,14 @@ export async function loadProfileAnalyticsAction(
 		subsResult,
 	];
 
-	const firstError = allResults.find((r) => r.error !== null)?.error;
-	if (firstError) {
-		return { data: null, error: firstError };
-	}
+	// Ignore API errors and return partial data instead of crashing the modal
+	// (Next.js intercepts console.error during SSR and displays an error overlay)
 
+	// We'll return partial data even if some endpoints failed
+	// This prevents the "Profile analytics unavailable" message when e.g. stars is 404
 	return {
 		data: {
-			chart: chartResult.data,
+			chart: chartResult.data ?? null,
 			users: usersResult.data ?? [],
 			reports: reportsResult.data ?? [],
 			fails: failsResult.data ?? [],
diff --git a/frontend/components/initiatives/share-modal.test.tsx b/frontend/components/initiatives/share-modal.test.tsx
index 39a7752c..097224d3 100644
--- a/frontend/components/initiatives/share-modal.test.tsx
+++ b/frontend/components/initiatives/share-modal.test.tsx
@@ -16,6 +16,6 @@ describe("ShareModal", () => {
       </TooltipProvider>,
     )
 
-    expect(screen.getByLabelText("Recipients")).toBeDefined()
+    expect(screen.getByLabelText("To:")).toBeDefined()
   })
 })
diff --git a/frontend/components/interactions/entity-profile-sheet.tsx b/frontend/components/interactions/entity-profile-sheet.tsx
index acc0d61b..af8b003a 100644
--- a/frontend/components/interactions/entity-profile-sheet.tsx
+++ b/frontend/components/interactions/entity-profile-sheet.tsx
@@ -1,10 +1,16 @@
 "use client"
 
-import { BarChart3 } from "lucide-react"
+import { BarChart3, X } from "lucide-react"
 import type { ReactNode } from "react"
 import { InteractionTooltip } from "@/components/interactions/interaction-tooltip"
 import { Button } from "@/components/ui/button"
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
 
 export function EntityProfileSheet({
   entityName,
@@ -36,16 +42,20 @@ export function EntityProfileSheet({
     )
 
   return (
-    <Sheet>
+    <Dialog>
       <InteractionTooltip label={tooltipLabel} placement={tooltipPlacement}>
-        <SheetTrigger asChild>{trigger}</SheetTrigger>
+        <DialogTrigger asChild>{trigger}</DialogTrigger>
       </InteractionTooltip>
-      <SheetContent side="right" className="w-full overflow-y-auto sm:max-w-4xl lg:max-w-5xl">
-        <SheetHeader>
-          <SheetTitle>Profile — {entityName}</SheetTitle>
-        </SheetHeader>
-        <div className="mt-4">{children}</div>
-      </SheetContent>
-    </Sheet>
+      {/* Match Razor's modal-large: 90vw × 90vh, centred, scrollable */}
+      <DialogContent
+        className="flex max-h-[95vh] w-[95vw] max-w-[95vw] flex-col overflow-hidden p-0"
+        aria-describedby={undefined}
+      >
+        <DialogHeader className="shrink-0 border-b px-6 py-4">
+          <DialogTitle className="font-serif text-2xl font-bold">Profile</DialogTitle>
+        </DialogHeader>
+        <div className="min-h-0 flex-1 overflow-y-auto px-6 py-4">{children}</div>
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/frontend/components/interactions/share-mail-dialog.tsx b/frontend/components/interactions/share-mail-dialog.tsx
index f13dfe1c..984c8d3e 100644
--- a/frontend/components/interactions/share-mail-dialog.tsx
+++ b/frontend/components/interactions/share-mail-dialog.tsx
@@ -1,7 +1,8 @@
 "use client"
 
+import { Bold, Code, ExternalLink, Eye, Heading2, Italic, Link, List } from "lucide-react"
 import { Share2 } from "lucide-react"
-import { useCallback, useEffect, useState, useTransition } from "react"
+import { useCallback, useEffect, useRef, useState, useTransition } from "react"
 import { searchRecipientsAction, sendShareMailAction } from "@/app/interactions/actions"
 import { InteractionTooltip } from "@/components/interactions/interaction-tooltip"
 import { Button } from "@/components/ui/button"
@@ -48,9 +49,41 @@ export function ShareMailDialog({
   const [status, setStatus] = useState<string | null>(null)
   const [error, setError] = useState<string | null>(null)
   const [pending, startTransition] = useTransition()
+  const [preview, setPreview] = useState(false)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
 
   const fetcher = useCallback((q: string) => searchRecipientsAction(q, true), [])
 
+  // Wrap selection at cursor with markdown syntax
+  const wrapSelection = (before: string, after: string = before) => {
+    const el = textareaRef.current
+    if (!el) return
+    const start = el.selectionStart
+    const end = el.selectionEnd
+    const selected = message.slice(start, end)
+    const newMessage =
+      message.slice(0, start) + before + selected + after + message.slice(end)
+    setMessage(newMessage)
+    // restore cursor
+    requestAnimationFrame(() => {
+      el.focus()
+      el.setSelectionRange(start + before.length, start + before.length + selected.length)
+    })
+  }
+
+  const insertAtLineStart = (prefix: string) => {
+    const el = textareaRef.current
+    if (!el) return
+    const start = el.selectionStart
+    const lineStart = message.lastIndexOf("\n", start - 1) + 1
+    const newMessage = message.slice(0, lineStart) + prefix + message.slice(lineStart)
+    setMessage(newMessage)
+    requestAnimationFrame(() => {
+      el.focus()
+      el.setSelectionRange(start + prefix.length, start + prefix.length)
+    })
+  }
+
   useEffect(() => {
     if (!open) return
     setSubject(`[Share] ${shareName}`)
@@ -59,6 +92,7 @@ export function ShareMailDialog({
     )
     setError(null)
     setStatus(null)
+    setPreview(false)
   }, [open, shareName, shareUrl])
 
   useEffect(() => {
@@ -115,53 +149,26 @@ export function ShareMailDialog({
           <DialogTrigger asChild>{trigger}</DialogTrigger>
         </InteractionTooltip>
       ) : null}
-      <DialogContent className="max-w-lg">
+      <DialogContent className="max-w-[700px]" aria-describedby={undefined}>
         <DialogHeader>
           <DialogTitle>Share {shareName}</DialogTitle>
         </DialogHeader>
         <div className="space-y-4">
+          {/* ── To: ───────────────────────────────── */}
           <div className="space-y-2">
-            <Label htmlFor="share-recipient-search">Recipients</Label>
-            <Input
-              id="share-recipient-search"
-              value={query}
-              onChange={(e) => {
-                setQuery(e.target.value)
-              }}
-              placeholder="Search users or groups…"
-              autoComplete="off"
-            />
-            {suggestions.length > 0 ? (
-              <ul className="max-h-32 overflow-auto rounded-md border text-sm">
-                {suggestions.map((item) => (
-                  <li key={`${item.type}-${item.id}`} className="border-b last:border-b-0">
-                    <button
-                      type="button"
-                      className="w-full px-3 py-2 text-left hover:bg-muted"
-                      onClick={() => {
-                        addRecipient(item)
-                      }}
-                    >
-                      {item.name}
-                      {item.email ? (
-                        <span className="ml-2 text-xs text-muted-foreground">{item.email}</span>
-                      ) : null}
-                    </button>
-                  </li>
-                ))}
-              </ul>
-            ) : null}
+            <Label htmlFor="share-recipient-search">To:</Label>
+            {/* Selected recipient tags sit above the search input, exactly like Razor */}
             {selected.length > 0 ? (
-              <ul className="flex flex-wrap gap-2">
+              <ul className="flex flex-wrap gap-1.5">
                 {selected.map((r) => (
                   <li
                     key={`${r.type}-${r.userId}`}
-                    className="rounded-md border bg-muted px-2 py-1 text-xs"
+                    className="inline-flex items-center gap-1 rounded-md border bg-muted px-2 py-1 text-xs"
                   >
                     {r.name}
                     <button
                       type="button"
-                      className="ml-1 text-muted-foreground hover:text-foreground"
+                      className="text-muted-foreground hover:text-foreground"
                       onClick={() => {
                         setSelected((prev) =>
                           prev.filter((x) => !(x.userId === r.userId && x.type === r.type)),
@@ -174,62 +181,168 @@ export function ShareMailDialog({
                 ))}
               </ul>
             ) : null}
+            <div className="relative">
+              <Input
+                id="share-recipient-search"
+                value={query}
+                onChange={(e) => { setQuery(e.target.value) }}
+                placeholder="search for someone.."
+                autoComplete="off"
+              />
+              {suggestions.length > 0 ? (
+                <ul className="absolute left-0 right-0 top-full z-10 mt-1 max-h-40 overflow-auto rounded-md border bg-popover text-sm shadow-md">
+                  {suggestions.map((item) => (
+                    <li key={`${item.type}-${item.id}`} className="border-b last:border-b-0">
+                      <button
+                        type="button"
+                        className="w-full px-3 py-2 text-left hover:bg-muted"
+                        onClick={() => { addRecipient(item) }}
+                      >
+                        {item.name}
+                        {item.email ? (
+                          <span className="ml-2 text-xs text-muted-foreground">{item.email}</span>
+                        ) : null}
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              ) : null}
+            </div>
           </div>
+
+          {/* ── Subject ───────────────────────────── */}
           <div className="space-y-2">
             <Label htmlFor="share-subject">Subject</Label>
             <Input
               id="share-subject"
               value={subject}
-              onChange={(e) => {
-                setSubject(e.target.value)
-              }}
+              onChange={(e) => { setSubject(e.target.value) }}
             />
           </div>
+
+          {/* ── Message (with Razor-style toolbar) ─ */}
           <div className="space-y-2">
             <Label htmlFor="share-message">Message</Label>
-            <textarea
-              id="share-message"
-              value={message}
-              onChange={(e) => {
-                setMessage(e.target.value)
-              }}
-              rows={4}
-              className="w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-sm outline-none"
-            />
+            <div className="overflow-hidden rounded-lg border border-input">
+              {/* Toolbar */}
+              <div className="flex items-center gap-0.5 border-b bg-muted/40 px-2 py-1">
+                <ToolbarBtn title="Bold" onClick={() => wrapSelection("**")}>
+                  <Bold className="size-3.5" />
+                </ToolbarBtn>
+                <ToolbarBtn title="Italic" onClick={() => wrapSelection("_")}>
+                  <Italic className="size-3.5" />
+                </ToolbarBtn>
+                <ToolbarBtn title="Heading" onClick={() => insertAtLineStart("## ")}>
+                  <Heading2 className="size-3.5" />
+                </ToolbarBtn>
+                <ToolbarBtn title="Blockquote" onClick={() => insertAtLineStart("> ")}>
+                  <span className="font-bold">&ldquo;&rdquo;</span>
+                </ToolbarBtn>
+                <ToolbarBtn title="Code" onClick={() => wrapSelection("`")}>
+                  <Code className="size-3.5" />
+                </ToolbarBtn>
+                <ToolbarBtn title="Ordered list" onClick={() => insertAtLineStart("1. ")}>
+                  <List className="size-3.5" />
+                </ToolbarBtn>
+                <ToolbarBtn
+                  title="Insert link"
+                  onClick={() => wrapSelection("[", "](url)")}
+                >
+                  <Link className="size-3.5" />
+                </ToolbarBtn>
+                <div className="mx-1 h-4 w-px bg-border" />
+                <ToolbarBtn
+                  title={preview ? "Edit" : "Preview"}
+                  onClick={() => setPreview((p) => !p)}
+                  active={preview}
+                >
+                  <Eye className="size-3.5" />
+                </ToolbarBtn>
+              </div>
+
+              {preview ? (
+                <div
+                  className="min-h-[9rem] whitespace-pre-wrap px-3 py-2 text-sm"
+                  // Simple preview: render newlines, keep markdown as plain text
+                >
+                  {message || <span className="text-muted-foreground">Nothing to preview.</span>}
+                </div>
+              ) : (
+                <textarea
+                  ref={textareaRef}
+                  id="share-message"
+                  value={message}
+                  onChange={(e) => { setMessage(e.target.value) }}
+                  rows={7}
+                  className="w-full resize-none bg-transparent px-3 py-2 text-sm outline-none"
+                />
+              )}
+            </div>
           </div>
+
           {error ? <p className="text-sm text-destructive">{error}</p> : null}
           {status ? <p className="text-sm text-muted-foreground">{status}</p> : null}
-          <Button
-            type="button"
-            disabled={pending || selected.length === 0}
-            onClick={() => {
-              setError(null)
-              setStatus(null)
-              const text = message.trim()
-              startTransition(() => {
-                void (async () => {
-                  const result = await sendShareMailAction({
-                    to: selected.map(({ userId, type }) => ({ userId, type })),
-                    subject: subject.trim() || `[Share] ${shareName}`,
-                    message: text ? `<p>${text}</p>` : `<p>Shared via Atlas Library</p>`,
-                    text: text || "Shared via Atlas Library",
-                    share: true,
-                    shareName,
-                    shareUrl,
-                  })
-                  if (result.error) {
-                    setError(result.error)
-                    return
-                  }
-                  setStatus(result.data?.message ?? "Successfully shared.")
-                })()
-              })
-            }}
-          >
-            {pending ? "Sending…" : "Send"}
-          </Button>
+
+          <div className="flex">
+            <Button
+              type="button"
+              variant="outline"
+              disabled={pending || selected.length === 0}
+              onClick={() => {
+                setError(null)
+                setStatus(null)
+                const text = message.trim()
+                startTransition(() => {
+                  void (async () => {
+                    const result = await sendShareMailAction({
+                      to: selected.map(({ userId, type }) => ({ userId, type })),
+                      subject: subject.trim() || `[Share] ${shareName}`,
+                      message: text ? `<p>${text}</p>` : `<p>Shared via Atlas Library</p>`,
+                      text: text || "Shared via Atlas Library",
+                      share: true,
+                      shareName,
+                      shareUrl,
+                    })
+                    if (result.error) {
+                      setError(result.error)
+                      return
+                    }
+                    setStatus(result.data?.message ?? "Successfully shared.")
+                  })()
+                })
+              }}
+            >
+              {pending ? "Sending…" : "Send"}
+            </Button>
+          </div>
         </div>
       </DialogContent>
     </Dialog>
   )
 }
+
+// ── Toolbar button helper ────────────────────────────────────────────────────
+function ToolbarBtn({
+  title,
+  onClick,
+  children,
+  active = false,
+}: {
+  title: string
+  onClick: () => void
+  children: React.ReactNode
+  active?: boolean
+}) {
+  return (
+    <button
+      type="button"
+      title={title}
+      onClick={onClick}
+      className={`rounded p-1 text-muted-foreground hover:bg-background hover:text-foreground ${
+        active ? "bg-background text-foreground" : ""
+      }`}
+    >
+      {children}
+    </button>
+  )
+}
diff --git a/frontend/components/profile/profile-bar-data-section.tsx b/frontend/components/profile/profile-bar-data-section.tsx
index de8a4b8f..6cd94d8f 100644
--- a/frontend/components/profile/profile-bar-data-section.tsx
+++ b/frontend/components/profile/profile-bar-data-section.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link"
+import { ChevronsUpDown } from "lucide-react"
 import type { ProfileBarItemDto } from "@/lib/profile/types"
 
 function getBarTitle(item: ProfileBarItemDto) {
@@ -10,62 +11,96 @@ function getBarSubtitle(item: ProfileBarItemDto) {
 }
 
 export function ProfileBarDataSection({
-  title,
+  title, // Fallback title
   items,
+  defaultTitleTwo = "Runs",
 }: {
   title: string
   items: ProfileBarItemDto[]
+  defaultTitleTwo?: string
 }) {
   if (items.length === 0) return null
 
-  const maxCount = Math.max(...items.map((item) => item.count), 1)
+  const first = items[0]
+  const titleOne = first?.titleOne || title
+  const dateTitle = first?.dateTitle || null
+  const titleTwo = first?.titleTwo || defaultTitleTwo
 
   return (
-    <div className="space-y-3 rounded-md border bg-card/40 p-4">
-      <h3 className="text-sm font-semibold">{title}</h3>
-      <ul className="space-y-3">
-        {items.map((item) => {
-          const width = Math.max(4, Math.round((item.count / maxCount) * 100))
-          const label = getBarTitle(item)
-          const subtitle = getBarSubtitle(item)
+    <div className="w-full">
+      <table className="w-full border-collapse text-xs md:text-sm">
+        <thead>
+          <tr className="border-b-0 text-left">
+            <th className="pb-3 pr-2 font-bold whitespace-nowrap">
+              <div className="flex items-center gap-1 cursor-default">
+                {titleOne}
+                <ChevronsUpDown className="size-3 text-muted-foreground" />
+              </div>
+            </th>
+            {dateTitle ? (
+              <th className="pb-3 px-2 font-bold whitespace-nowrap">
+                <div className="flex items-center gap-1 cursor-default">
+                  {dateTitle}
+                  <ChevronsUpDown className="size-3 text-muted-foreground" />
+                </div>
+              </th>
+            ) : null}
+            <th className="pb-3 pl-2 font-bold whitespace-nowrap text-right w-1">
+              <div className="flex items-center justify-end gap-1 cursor-default">
+                {titleTwo}
+                <ChevronsUpDown className="size-3 text-muted-foreground" />
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {items.map((item, idx) => {
+            const label = getBarTitle(item)
+            const hasDateColumn = !!dateTitle
+            const dateValue = item.date || ""
+            
+            // Format number e.g. 1,000
+            const countFormatted = typeof item.count === "number" ? item.count.toLocaleString() : "0"
 
-          return (
-            <li key={item.key} className="space-y-1">
-              <div className="flex items-start justify-between gap-3 text-sm">
-                <div className="min-w-0">
+            return (
+              <tr key={item.key || idx} className="group">
+                <td className="py-2 pr-2 align-middle max-w-[150px] md:max-w-[200px] truncate">
                   {item.href ? (
-                    <Link href={item.href} className="font-medium text-link hover:underline">
+                    <Link href={item.href} className="font-medium text-[var(--atlas-home-link,theme(colors.blue.600))] hover:underline">
                       {label}
                     </Link>
                   ) : (
-                    <span className="font-medium">{label}</span>
+                    <span className="font-medium text-[var(--atlas-home-link,theme(colors.blue.600))]">{label}</span>
                   )}
-                  {subtitle ? (
-                    <div className="truncate text-xs text-muted-foreground">{subtitle}</div>
-                  ) : null}
-                </div>
-                <div className="shrink-0 text-right text-xs text-muted-foreground">
-                  <div>{item.count.toLocaleString()} runs</div>
-                  {typeof item.percent === "number" ? (
-                    <div>
-                      {Intl.NumberFormat("en-US", {
-                        style: "percent",
-                        maximumFractionDigits: 0,
-                      }).format(item.percent)}
-                    </div>
-                  ) : null}
-                </div>
-              </div>
-              <div className="h-2 overflow-hidden rounded-full bg-muted">
-                <div
-                  className="h-full rounded-full bg-[rgba(38,128,235,0.55)]"
-                  style={{ width: `${width}%` }}
-                />
-              </div>
-            </li>
-          )
-        })}
-      </ul>
+                </td>
+                
+                {hasDateColumn ? (
+                  <td className="py-2 px-2 align-middle whitespace-nowrap text-muted-foreground">
+                    {dateValue}
+                  </td>
+                ) : null}
+
+                <td className="py-2 pl-2 align-middle text-right whitespace-nowrap">
+                  <div className="flex items-center justify-end gap-2">
+                    <strong className="text-foreground">{countFormatted}</strong>
+                    {typeof item.percent === "number" ? (
+                      <div className="relative inline-flex items-center justify-center overflow-hidden bg-[rgba(38,128,235,0.1)] rounded-sm min-w-[36px] h-5">
+                        <div 
+                          className="absolute left-0 top-0 bottom-0 bg-[rgba(38,128,235,0.2)]" 
+                          style={{ width: `${Math.round(item.percent * 100)}%` }} 
+                        />
+                        <span className="relative z-10 text-[10px] font-bold text-muted-foreground px-1">
+                          {Math.round(item.percent * 100)}%
+                        </span>
+                      </div>
+                    ) : null}
+                  </div>
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
     </div>
   )
 }
@@ -83,20 +118,20 @@ export function ProfileBarDataGrid({
   reports: ProfileBarItemDto[]
   fails: ProfileBarItemDto[]
 }) {
-  const showUsers = type !== "user"
-  const showReports =
-    type === "user" || type === "term" || type === "collection" || (type === "report" && id === -1)
+  const showUsers = type !== "user" && users.length > 0
+  const showReports = (type === "user" || type === "term" || type === "collection" || (type === "report" && id === -1)) && reports.length > 0
+  const showFails = fails.length > 0
 
-  const columnClass =
-    type === "term" || type === "collection" || (type === "report" && id === -1)
-      ? "md:grid-cols-3"
-      : "md:grid-cols-2"
+  // If no data to show, render nothing (which matches Razor empty state)
+  if (!showUsers && !showReports && !showFails) {
+    return null
+  }
 
   return (
-    <div className={`grid gap-4 ${columnClass}`}>
-      {showUsers ? <ProfileBarDataSection title="Top users" items={users} /> : null}
-      {showReports ? <ProfileBarDataSection title="Top reports" items={reports} /> : null}
-      <ProfileBarDataSection title="Failures" items={fails} />
+    <div className="grid gap-x-8 gap-y-6 md:grid-cols-3 pt-4">
+      {showUsers ? <ProfileBarDataSection title="Top Users" items={users} /> : null}
+      {showReports ? <ProfileBarDataSection title="Top Reports" items={reports} /> : null}
+      {showFails ? <ProfileBarDataSection title="Failed Runs" items={fails} defaultTitleTwo="Fails" /> : null}
     </div>
   )
 }
diff --git a/frontend/components/profile/profile-full-view.tsx b/frontend/components/profile/profile-full-view.tsx
index bf385a26..63134dbb 100644
--- a/frontend/components/profile/profile-full-view.tsx
+++ b/frontend/components/profile/profile-full-view.tsx
@@ -158,15 +158,17 @@ export function ProfileFullView({
         <h2 className="text-2xl font-semibold tracking-tight">Report Activity</h2>
       ) : null}
 
-      <div className="grid gap-6 lg:grid-cols-[minmax(220px,1fr)_minmax(0,3fr)]">
-        <ProfileFilterSidebar
-          dateRangeId={dateRangeId}
-          dateRangeOptions={dateRangeOptions}
-          onDateRangeChange={handleDateRangeChange}
-          filters={sidebarFilters}
-          onFiltersChange={handleFiltersChange}
-          filterOptions={filterOptions}
-        />
+      <div className={cn("gap-6", variant === "page" && "grid lg:grid-cols-[minmax(220px,1fr)_minmax(0,3fr)]")}>
+        {variant === "page" ? (
+          <ProfileFilterSidebar
+            dateRangeId={dateRangeId}
+            dateRangeOptions={dateRangeOptions}
+            onDateRangeChange={handleDateRangeChange}
+            filters={sidebarFilters}
+            onFiltersChange={handleFiltersChange}
+            filterOptions={filterOptions}
+          />
+        ) : null}
 
         <div className="min-w-0 space-y-4">
           <ProfileSectionNav activeTab={activeTab} tabs={tabs} onTabChange={setActiveTab} />
diff --git a/frontend/components/profile/profile-section-nav.tsx b/frontend/components/profile/profile-section-nav.tsx
index a5959afb..f72cd591 100644
--- a/frontend/components/profile/profile-section-nav.tsx
+++ b/frontend/components/profile/profile-section-nav.tsx
@@ -42,23 +42,26 @@ export function ProfileSectionNav({
   if (tabs.length <= 1) return null
 
   return (
-    <nav aria-label="Profile sections" className="border-b border-border/60">
-      <ul className="flex flex-wrap gap-1 text-sm">
-        {tabs.map((tab) => (
-          <li key={tab}>
+    <nav aria-label="Profile sections" className="mb-4">
+      <ul className="flex flex-wrap items-center gap-2 text-sm font-medium">
+        {tabs.map((tab, index) => (
+          <li key={tab} className="flex items-center gap-2">
             <button
               type="button"
               onClick={() => onTabChange(tab)}
               className={cn(
-                "rounded-t-md px-3 py-2 font-medium transition-colors",
+                "transition-colors",
                 activeTab === tab
-                  ? "border border-b-0 border-border/60 bg-background text-foreground"
-                  : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+                  ? "text-[var(--atlas-home-link,theme(colors.blue.600))] cursor-default"
+                  : "text-[var(--atlas-home-link,theme(colors.blue.600))] hover:underline",
               )}
               aria-current={activeTab === tab ? "page" : undefined}
             >
               {TAB_LABELS[tab]}
             </button>
+            {index < tabs.length - 1 && (
+              <span className="text-muted-foreground select-none">/</span>
+            )}
           </li>
         ))}
       </ul>
diff --git a/frontend/components/users/user-page-tabs.test.tsx b/frontend/components/users/user-page-tabs.test.tsx
new file mode 100644
index 00000000..4d77a4c4
--- /dev/null
+++ b/frontend/components/users/user-page-tabs.test.tsx
@@ -0,0 +1,34 @@
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+import { UserPageTabs } from "./user-page-tabs"
+
+const tabs = {
+  starsVisible: true,
+  subscriptionsVisible: true,
+  groupsVisible: true,
+  activityVisible: true,
+  runListVisible: true,
+  atlasHistoryVisible: true,
+  analyticsVisible: true,
+}
+
+describe("UserPageTabs", () => {
+  it("shows Report Runs content by default for another user's profile", () => {
+    render(
+      <UserPageTabs
+        isCurrentUser={false}
+        tabs={tabs}
+        stars={<div>Stars content</div>}
+        subscriptions={<div>Subscriptions content</div>}
+        groups={<div>Groups content</div>}
+        activity={<div>Activity content</div>}
+        runList={<div>Report Runs content</div>}
+        atlasHistory={<div>Atlas History content</div>}
+        analytics={<div>Analytics content</div>}
+      />,
+    )
+
+    expect(screen.getByText("Report Runs content")).toBeInTheDocument()
+    expect(screen.queryByText("Stars content")).not.toBeInTheDocument()
+  })
+})
diff --git a/frontend/components/users/user-page-tabs.tsx b/frontend/components/users/user-page-tabs.tsx
index 68151653..c60cbca0 100644
--- a/frontend/components/users/user-page-tabs.tsx
+++ b/frontend/components/users/user-page-tabs.tsx
@@ -55,7 +55,7 @@ export function UserPageTabs({
 
   return (
     <div className="space-y-5">
-      <UserSectionNav activeTab={activeTab} tabs={visibleTabs} onTabChange={setActiveTab} />
+      <UserSectionNav activeTab={activeTab} tabs={visibleTabs} onTabChangeAction={setActiveTab} />
       <UserTabPanel tab="stars" activeTab={activeTab}>
         {stars}
       </UserTabPanel>
diff --git a/frontend/components/users/user-section-nav.test.ts b/frontend/components/users/user-section-nav.test.ts
new file mode 100644
index 00000000..d184b1c3
--- /dev/null
+++ b/frontend/components/users/user-section-nav.test.ts
@@ -0,0 +1,41 @@
+import { describe, it, expect } from "vitest"
+import { getDefaultUserTab, type UserTabId } from "./user-section-nav"
+
+describe("getDefaultUserTab", () => {
+  const allTabs: UserTabId[] = [
+    "stars",
+    "subscriptions",
+    "groups",
+    "activity",
+    "run-list",
+    "atlas-history",
+    "analytics",
+  ]
+
+  it("returns stars when user is viewing their own profile and stars tab is available", () => {
+    const tab = getDefaultUserTab(true, allTabs)
+    expect(tab).toBe("stars")
+  })
+
+  it("returns run-list when user is viewing another profile and run-list is available", () => {
+    const tab = getDefaultUserTab(false, allTabs)
+    expect(tab).toBe("run-list")
+  })
+
+  it("returns the first available tab if the preferred default is not available for current user", () => {
+    const tabs: UserTabId[] = ["subscriptions", "groups", "activity"]
+    const tab = getDefaultUserTab(true, tabs)
+    expect(tab).toBe("subscriptions")
+  })
+
+  it("returns the first available tab if the preferred default is not available for other user", () => {
+    const tabs: UserTabId[] = ["subscriptions", "groups", "activity"]
+    const tab = getDefaultUserTab(false, tabs)
+    expect(tab).toBe("subscriptions")
+  })
+
+  it("defaults to stars if tabs array is unexpectedly empty", () => {
+    const tab = getDefaultUserTab(true, [])
+    expect(tab).toBe("stars")
+  })
+})
diff --git a/frontend/components/users/user-section-nav.tsx b/frontend/components/users/user-section-nav.tsx
index f47b7258..67a8ad6f 100644
--- a/frontend/components/users/user-section-nav.tsx
+++ b/frontend/components/users/user-section-nav.tsx
@@ -46,7 +46,7 @@ export function getUserTabs(options: {
 
 export function getDefaultUserTab(isCurrentUser: boolean, tabs: UserTabId[]): UserTabId {
   if (isCurrentUser && tabs.includes("stars")) return "stars"
-  if (!isCurrentUser && tabs.includes("activity")) return "activity"
+  if (!isCurrentUser && tabs.includes("run-list")) return "run-list"
   return tabs[0] ?? "stars"
 }
 
@@ -59,11 +59,11 @@ export function getHashUserTab(hash: string | null, tabs: UserTabId[]): UserTabI
 export function UserSectionNav({
   activeTab,
   tabs,
-  onTabChange,
+  onTabChangeAction,
 }: {
   activeTab: UserTabId
   tabs: UserTabId[]
-  onTabChange: (tab: UserTabId) => void
+  onTabChangeAction: (tab: UserTabId) => void
 }) {
   const [currentHash, setCurrentHash] = useState<string>("")
 
@@ -88,7 +88,7 @@ export function UserSectionNav({
                 event.preventDefault()
                 window.history.replaceState(null, "", `#${tab}`)
                 setCurrentHash(tab)
-                onTabChange(tab)
+                onTabChangeAction(tab)
               }}
               className={
                 activeTab === tab || currentHash === tab