diff --git a/app/[locale]/(site)/portfolio/[slug]/page.tsx b/app/[locale]/(site)/portfolio/[slug]/page.tsx
index 741b7ac..cff548c 100644
--- a/app/[locale]/(site)/portfolio/[slug]/page.tsx
+++ b/app/[locale]/(site)/portfolio/[slug]/page.tsx
@@ -58,10 +58,18 @@ export default async function PortfolioItemPage({
   }
 
   const t = await getTranslations({ locale: localeKey, namespace: "portfolioDetail" });
+  const title = getLocalizedValue(item.title, localeKey);
+  const category = getLocalizedValue(item.category.name, localeKey);
+  const summary = getLocalizedValue(item.summary, localeKey);
 
   return (
     <>
-      <PageHero />
+      <PageHero
+        locale={localeKey}
+        badge={category}
+        lines={[{ text: title, tone: "soft", align: "center" }]}
+        description={summary}
+      />
 
       <Container size="wide" className="pb-12 lg:pb-16">
         <PortfolioProjectDetail
diff --git a/components/site/portfolio-project-detail.tsx b/components/site/portfolio-project-detail.tsx
index e4bd014..e829dd2 100644
--- a/components/site/portfolio-project-detail.tsx
+++ b/components/site/portfolio-project-detail.tsx
@@ -235,14 +235,7 @@ function ProjectHeader({
             <Link href={getLocalizedPath(locale, "/portfolio", defaultLocale)}>{t("back")}</Link>
           </Button>
 
-          <h1 className="mt-5 text-3xl font-semibold text-foreground sm:text-4xl lg:text-5xl">
-            {getLocalizedValue(item.title, locale)}
-          </h1>
-          <p className="mt-4 max-w-3xl text-base leading-8 text-muted-foreground sm:text-lg">
-            {getLocalizedValue(item.summary, locale)}
-          </p>
-
-          <div className="mt-8">
+          <div className="mt-6">
             <ProjectMeta item={item} locale={locale} />
           </div>