diff --git a/src/components/common/ZzalCard.tsx b/src/components/common/ZzalCard.tsx
index 5d1a2512..4ffbdf48 100644
--- a/src/components/common/ZzalCard.tsx
+++ b/src/components/common/ZzalCard.tsx
@@ -8,11 +8,19 @@ interface ZzalCardProps {
   alt: string;
   hasAnimation?: boolean;
   width?: number | string;
+  className?: string;
 }
 
-const ZzalCard = ({ children, src, alt, width = 72, hasAnimation = true }: ZzalCardProps) => {
+const ZzalCard = ({
+  children,
+  src,
+  alt,
+  width = 72,
+  hasAnimation = true,
+  className,
+}: ZzalCardProps) => {
   return (
-    <div className={`group relative w-${width} rounded-lg bg-base-100 shadow-xl`}>
+    <div className={cn(`group relative w-${width} rounded-lg bg-base-100 shadow-xl`, className)}>
       <div className="button-container absolute right-2 top-1 z-10 w-fit opacity-0 transition-opacity duration-500 ease-in-out group-hover:opacity-100">
         {children}
       </div>