diff --git a/components/reference-cards.tsx b/components/reference-cards.tsx
index c22a12d..d6af78d 100644
--- a/components/reference-cards.tsx
+++ b/components/reference-cards.tsx
@@ -4,9 +4,10 @@ import { REFERENCES } from "@/data/references";
 
 type ReferenceCardsProps = {
   className?: string;
+  cardClassName?: string;
 };
 
-export function ReferenceCards({ className }: ReferenceCardsProps) {
+export function ReferenceCards({ className, cardClassName }: ReferenceCardsProps) {
   return (
     <div className={className}>
       {REFERENCES.map((item) => {
@@ -17,7 +18,7 @@ export function ReferenceCards({ className }: ReferenceCardsProps) {
             role={item.role}
             avatar={item.avatar}
             rating={item.rating}
-            className="h-full w-70 shrink-0 rounded-sm"
+            className={`h-full rounded-sm ${cardClassName || "w-70 shrink-0"}`}
           />
         );
 
diff --git a/components/references-detail-content.tsx b/components/references-detail-content.tsx
index 4a4d10f..b96479a 100644
--- a/components/references-detail-content.tsx
+++ b/components/references-detail-content.tsx
@@ -11,7 +11,10 @@ export function ReferencesDetailContent() {
         {"<- Hakkımda'ya dön"}
       </Link>
 
-      <ReferenceCards className="flex flex-wrap gap-3" />
+      <ReferenceCards
+        className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3"
+        cardClassName="w-full"
+      />
     </section>
   );
 }