diff --git a/packages/website/src/components/CodeListing.tsx b/packages/website/src/components/CodeListing.tsx
index f5b5469b8..17c6aa272 100644
--- a/packages/website/src/components/CodeListing.tsx
+++ b/packages/website/src/components/CodeListing.tsx
@@ -39,6 +39,7 @@ export function CodeListing({
 				{optional ? <Badge variant="filled">Optional</Badge> : null}
 				<Title order={4} className="font-mono">
 					{name}
+					{optional ? '?' : ''}
 				</Title>
 				<Title order={4}>{separator}</Title>
 				<Title order={4} className="font-mono break-all">
diff --git a/packages/website/src/components/MethodItem.tsx b/packages/website/src/components/MethodItem.tsx
index 37fd1ebcf..10747d19e 100644
--- a/packages/website/src/components/MethodItem.tsx
+++ b/packages/website/src/components/MethodItem.tsx
@@ -9,12 +9,12 @@ import { Visibility } from '~/DocModel/Visibility';
 type MethodResolvable = ReturnType<DocMethod['toJSON']> | ReturnType<DocMethodSignature['toJSON']>;
 
 function getShorthandName(data: MethodResolvable) {
-	return `${data.name}(${data.parameters.reduce((prev, cur, index) => {
+	return `${data.name}${data.optional ? '?' : ''}(${data.parameters.reduce((prev, cur, index) => {
 		if (index === 0) {
-			return `${prev}${cur.name}`;
+			return `${prev}${cur.isOptional ? `[${cur.name}]` : cur.name}`;
 		}
 
-		return `${prev}, ${cur.name}`;
+		return `${prev}, ${cur.isOptional ? `[${cur.name}]` : cur.name}`;
 	}, '')})`;
 }