diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
index 8e99048..ce064d4 100644
--- a/src/app/gallery/page.tsx
+++ b/src/app/gallery/page.tsx
@@ -2,7 +2,6 @@
 import type { Metadata } from 'next';
 import { Button } from '@/components/ui/button';
 import Link from 'next/link';
-import Image from 'next/image';
 import { ExternalLink } from 'lucide-react';
 
 export const metadata: Metadata = {
@@ -79,24 +78,22 @@ export default async function GalleryPage() {
           <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
             {videos.length > 0 ? videos.map((video) => (
               <div key={video.id} className="bg-card rounded-lg shadow-sm border overflow-hidden flex flex-col">
-                <Link href={`https://www.youtube.com/watch?v=${video.id}`} target="_blank" rel="noopener noreferrer" className="block relative group">
-                  <Image
-                    src={`https://img.youtube.com/vi/${video.id}/hqdefault.jpg`}
-                    alt={`Thumbnail for ${video.title}`}
-                    width={480}
-                    height={360}
-                    className="w-full h-auto object-cover transition-transform duration-300 group-hover:scale-105"
-                  />
-                   <div className="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                    <svg className="w-16 h-16 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
-                  </div>
-                </Link>
+                <div className="relative w-full pt-[56.25%]"> {/* 16:9 Aspect Ratio */}
+                  <iframe
+                    className="absolute top-0 left-0 w-full h-full"
+                    src={`https://www.youtube.com/embed/${video.id}`}
+                    title={video.title}
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    allowFullScreen
+                  ></iframe>
+                </div>
                 <div className="p-4 flex-grow">
                    <h2 className="text-lg font-semibold text-card-foreground">
-                     <Link href={`https://www.youtube.com/watch?v=${video.id}`} target="_blank" rel="noopener noreferrer" className="hover:underline flex items-center gap-2">
-                       {video.title} <ExternalLink className="w-4 h-4 text-muted-foreground" />
-                     </Link>
+                       {video.title}
                    </h2>
+                   <a href={`https://www.youtube.com/watch?v=${video.id}`} target="_blank" rel="noopener noreferrer" className="text-sm text-primary hover:underline flex items-center gap-1 mt-2">
+                        Watch on YouTube <ExternalLink className="w-4 h-4" />
+                   </a>
                 </div>
               </div>
             )) : (