diff --git a/app/recap/components/graph/languages.tsx b/app/recap/components/graph/languages.tsx
index e5fd489..cbbff50 100644
--- a/app/recap/components/graph/languages.tsx
+++ b/app/recap/components/graph/languages.tsx
@@ -96,9 +96,13 @@ export const LanguagesUsageGraph: FC<Props> = ({ data }) => {
 			<CardHeader className="items-start pb-0">
 				<CardTitle>言語の使用率</CardTitle>
 				<CardDescription>
-					{limitedData.length === 0
-						? "データがありません。"
-						: `あなたが最も使用した言語は <b>${limitedData[0].language}</b> です。`}
+				  {limitedData.length === 0 ? (
+				    "データがありません。"
+				  ) : (
+				    <>
+				      あなたが最も使用した言語は <b>{limitedData[0].language}</b> です。
+				    </>
+				  )}
 				</CardDescription>
 			</CardHeader>
 			<CardContent className="flex-1 pb-0">
diff --git a/app/recap/components/overview.tsx b/app/recap/components/overview.tsx
index 1880b52..20848be 100644
--- a/app/recap/components/overview.tsx
+++ b/app/recap/components/overview.tsx
@@ -188,10 +188,13 @@ export const OverView: FC<Props> = async ({ data }) => {
 						<CardHeader>
 							<CardTitle>リポジトリごとの統計</CardTitle>
 							<CardDescription>
-								{data.repositoriesByCommitCount.length === 0
-									? "データがありません。"
-									: `あなたが最もコミットしたリポジトリは{" "}
-								<b>${data.repositoriesByCommitCount[0].nameWithOwner}</b> です。`}
+							  {data.repositoriesByCommitCount.length === 0 ? (
+							    "データがありません。"
+							  ) : (
+							    <>
+							      あなたが最もコミットしたリポジトリは <b>{data.repositoriesByCommitCount[0].nameWithOwner}</b> です。
+							    </>
+							  )}
 							</CardDescription>
 						</CardHeader>
 						<CardContent>