diff --git a/stash-web/src/App.css b/stash-web/src/App.css
index 61c4dd3..037d5f3 100644
--- a/stash-web/src/App.css
+++ b/stash-web/src/App.css
@@ -334,10 +334,31 @@
 }
 
 .detail-hero-icon {
-  font-size: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  margin-bottom: var(--su-space-2);
+  border-radius: 50%;
+  background-color: var(--su-color-primary-soft);
+  color: var(--su-color-primary);
+  font-size: 24px;
   line-height: 1;
 }
 
+.detail-hero-title {
+  font-size: var(--su-font-size-xl);
+  font-weight: var(--su-font-weight-strong);
+  line-height: 1.5;
+}
+
+.detail-hero-count {
+  margin-top: var(--su-space-1);
+  font-size: var(--su-font-size-md);
+  color: var(--su-text-muted);
+}
+
 .item-card {
   display: flex;
   flex-direction: column;
diff --git a/stash-web/src/components/content/DetailView.tsx b/stash-web/src/components/content/DetailView.tsx
index d1dfb41..ab92f51 100644
--- a/stash-web/src/components/content/DetailView.tsx
+++ b/stash-web/src/components/content/DetailView.tsx
@@ -1,4 +1,4 @@
-import { Badge, Breadcrumb, Card, Empty, Space, Title } from '@stash/ui'
+import { Breadcrumb, Card, Empty, Space, Title } from '@stash/ui'
 import { categoryCount, type Category } from '../../data/types'
 import { AppGrid } from './AppGrid'
 import { CesCardGrid } from './CesCardGrid'
@@ -83,8 +83,10 @@ export function DetailView({ category, groupId, onBack, onOpenItem }: DetailView
         <span className="detail-hero-icon" aria-hidden="true">
           {category.icon}
         </span>
-        <Title level={2}>{title}</Title>
-        <Badge count={count} tone="neutral" />
+        <Title level={1} as="h2" weight="strong" className="detail-hero-title">
+          {title}
+        </Title>
+        <span className="detail-hero-count">[{count}]</span>
       </div>
 
       {renderBody()}