diff --git a/components/cards/Sites.tsx b/components/cards/Sites.tsx
index d9a7141..d61c938 100644
--- a/components/cards/Sites.tsx
+++ b/components/cards/Sites.tsx
@@ -1,21 +1,48 @@
 "use client"
 import { useRouter } from "next/navigation";
 import { Site } from "@/app/types";
+import { ChevronRight } from "lucide-react";
 
 export default function Sites({ id, name, description, networks }: Site) {
     const router = useRouter();
     return (
-        <div className="card bg-base-200 shadow-xl">
-            <div className="card-body">
-                <h2 className="card-title">{name}</h2>
-                <p>{description}</p>
-                { networks && networks.length > 0 && (
-                    <p>Networks: {networks.map((network) => network.name).join(", ")}</p>
+        <div className="relative group bg-base-200 rounded-xl shadow-lg overflow-hidden h-48" style={{ display: 'block' }}>
+            {/* Card content */}
+            <div className="p-6 pr-20 h-full flex flex-col">
+                <h2 className="text-xl font-bold">{name}</h2>
+                
+                {description ? (
+                    <p className="text-sm opacity-70 mt-2 line-clamp-2">{description}</p>
+                ) : (
+                    <p className="text-sm opacity-50 italic mt-2">No description provided</p>
                 )}
-                <div className="card-actions justify-end">
-                    <button className="btn btn-secondary btn-sm btn-outline" onClick={() => router.push(`/dashboard/sites/${id}`)}>View</button>
+                
+                <div className="mt-auto">
+                    {networks && networks.length > 0 ? (
+                        <div className="mt-3">
+                            <p className="text-sm font-medium mb-1">Networks:</p>
+                            <div className="bg-base-100 p-2 rounded-lg overflow-y-auto max-h-16">
+                                {networks.map((network, index) => (
+                                    <span key={network.id || index} className="inline-block bg-base-300 rounded px-2 py-1 text-xs mr-2 mb-1">
+                                        {network.name}
+                                    </span>
+                                ))}
+                            </div>
+                        </div>
+                    ) : (
+                        <div className="mt-3">
+                            <p className="text-sm opacity-60">No networks configured</p>
+                        </div>
+                    )}
                 </div>
             </div>
+            
+            <div 
+                onClick={() => router.push(`/dashboard/sites/${id}`)}
+                className="absolute top-0 right-0 bottom-0 h-full w-12 bg-primary hover:bg-primary-focus text-primary-content flex items-center justify-center cursor-pointer transition-colors"
+            >
+                <ChevronRight className="h-8 w-8" />
+            </div>
         </div>
-    )
+    );
 }