diff --git a/apps/drive-web/src/components/ui/middle-truncated-text.tsx b/apps/drive-web/src/components/ui/middle-truncated-text.tsx
index 240dcf6..5662fb6 100644
--- a/apps/drive-web/src/components/ui/middle-truncated-text.tsx
+++ b/apps/drive-web/src/components/ui/middle-truncated-text.tsx
@@ -1,9 +1,17 @@
-function MiddleTruncatedText({ children }: { children: string }) {
+import { cn } from "@/lib/utils"
+
+function MiddleTruncatedText({
+	children,
+	className,
+}: {
+	children: string
+	className?: string
+}) {
 	const LAST_PART_LENGTH = 3
 	const lastPart = children.slice(children.length - LAST_PART_LENGTH)
 	const firstPart = children.slice(0, children.length - LAST_PART_LENGTH)
 	return (
-		<p className="max-w-full flex">
+		<p className={cn("max-w-full flex", className)}>
 			<span className="flex-1 truncate">{firstPart}</span>
 			<span className="w-min">{lastPart}</span>
 		</p>