diff --git a/backend/routes/albums.js b/backend/routes/albums.js
index b5ea92c..20235fe 100644
--- a/backend/routes/albums.js
+++ b/backend/routes/albums.js
@@ -47,6 +47,13 @@ router.get("/:id", async (req, res) => {
     );
     album.tracks = tracks;
 
+    // 티저 이미지 조회
+    const [teasers] = await pool.query(
+      "SELECT image_url FROM album_teasers WHERE album_id = ? ORDER BY sort_order",
+      [album.id]
+    );
+    album.teasers = teasers.map((t) => t.image_url);
+
     res.json(album);
   } catch (error) {
     console.error("앨범 조회 오류:", error);
diff --git a/frontend/src/pages/pc/AlbumDetail.jsx b/frontend/src/pages/pc/AlbumDetail.jsx
index 2ed31e3..54e5d57 100644
--- a/frontend/src/pages/pc/AlbumDetail.jsx
+++ b/frontend/src/pages/pc/AlbumDetail.jsx
@@ -1,13 +1,15 @@
 import { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
-import { ArrowLeft, Calendar, Music2, Play, Clock } from 'lucide-react';
+import { ArrowLeft, Calendar, Music2, Play, Clock, X, ChevronLeft, ChevronRight } from 'lucide-react';
 
 function AlbumDetail() {
     const { id } = useParams();
     const navigate = useNavigate();
     const [album, setAlbum] = useState(null);
     const [loading, setLoading] = useState(true);
+    const [lightbox, setLightbox] = useState({ open: false, images: [], index: 0 });
+    const [slideDirection, setSlideDirection] = useState(0);
 
     useEffect(() => {
         fetch(`/api/albums/${id}`)
@@ -70,6 +72,7 @@ function AlbumDetail() {
     }
 
     return (
+        <>
         <motion.div 
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
@@ -89,13 +92,13 @@ function AlbumDetail() {
                 </motion.button>
 
                 {/* 앨범 정보 헤더 */}
-                <div className="flex gap-10 mb-10">
-                    {/* 앨범 커버 */}
+                <div className="flex gap-8 mb-10">
+                    {/* 앨범 커버 - 크기 증가 */}
                     <motion.div
                         initial={{ opacity: 0, scale: 0.9 }}
                         animate={{ opacity: 1, scale: 1 }}
                         transition={{ duration: 0.4 }}
-                        className="w-72 h-72 flex-shrink-0 rounded-2xl overflow-hidden shadow-2xl"
+                        className="w-80 h-80 flex-shrink-0 rounded-2xl overflow-hidden shadow-2xl"
                     >
                         <img
                             src={album.cover_url}
@@ -109,31 +112,55 @@ function AlbumDetail() {
                         initial={{ opacity: 0, y: 20 }}
                         animate={{ opacity: 1, y: 0 }}
                         transition={{ delay: 0.1, duration: 0.4 }}
-                        className="flex-1 pt-2"
+                        className="flex-1 flex flex-col"
                     >
-                        <span className="inline-block w-fit px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full mb-3">
-                            {album.album_type}
-                        </span>
-                        <h1 className="text-4xl font-bold mb-4">{album.title}</h1>
-                        
-                        <div className="flex items-center gap-6 text-gray-500 mb-4">
-                            <div className="flex items-center gap-2">
-                                <Calendar size={18} />
-                                <span>{formatDate(album.release_date)}</span>
-                            </div>
-                            <div className="flex items-center gap-2">
-                                <Music2 size={18} />
-                                <span>{album.tracks?.length || 0}곡</span>
-                            </div>
-                            <div className="flex items-center gap-2">
-                                <Clock size={18} />
-                                <span>{getTotalDuration()}</span>
+                        <div>
+                            <span className="inline-block w-fit px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full mb-3">
+                                {album.album_type}
+                            </span>
+                            <h1 className="text-4xl font-bold mb-3">{album.title}</h1>
+                            
+                            <div className="flex items-center gap-6 text-gray-500 mb-3">
+                                <div className="flex items-center gap-2">
+                                    <Calendar size={18} />
+                                    <span>{formatDate(album.release_date)}</span>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                    <Music2 size={18} />
+                                    <span>{album.tracks?.length || 0}곡</span>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                    <Clock size={18} />
+                                    <span>{getTotalDuration()}</span>
+                                </div>
                             </div>
+
+                            <p className="text-sm text-primary font-medium mb-4">
+                                타이틀곡: {album.tracks?.find(t => t.is_title_track === 1)?.title || album.tracks?.[0]?.title}
+                            </p>
                         </div>
 
-                        <p className="text-sm text-primary font-medium">
-                            타이틀곡: {album.tracks?.find(t => t.is_title_track === 1)?.title || album.tracks?.[0]?.title}
-                        </p>
+                        {/* 앨범 티저 이미지 */}
+                        {album.teasers && album.teasers.length > 0 && (
+                            <div className="mt-auto">
+                                <p className="text-xs text-gray-400 mb-2">Official Teaser</p>
+                                <div className="flex gap-2">
+                                    {album.teasers.map((teaser, index) => (
+                                        <div 
+                                            key={index}
+                                            onClick={() => setLightbox({ open: true, images: album.teasers, index })}
+                                            className="w-24 h-24 bg-gray-200 rounded-lg overflow-hidden cursor-pointer transition-all duration-200 hover:scale-110 hover:shadow-xl hover:z-10"
+                                        >
+                                            <img 
+                                                src={teaser}
+                                                alt={`Teaser ${index + 1}`}
+                                                className="w-full h-full object-cover"
+                                            />
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
                     </motion.div>
                 </div>
 
@@ -200,8 +227,117 @@ function AlbumDetail() {
                         </div>
                     </motion.div>
                 </div>
+
+                {/* 컨셉 포토 섹션 */}
+                <motion.div
+                    initial={{ opacity: 0, y: 30 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.4, duration: 0.4 }}
+                    className="mt-10"
+                >
+                    <div className="flex items-center justify-between mb-4">
+                        <h2 className="text-xl font-bold">컨셉 포토</h2>
+                        <button className="text-sm text-primary hover:underline">
+                            전체보기 (12장)
+                        </button>
+                    </div>
+                    {/* 4장 정사각형 그리드 - 실제 이미지는 object-cover로 크롭 */}
+                    <div className="grid grid-cols-4 gap-4">
+                        {[1, 2, 3, 4].map((num) => (
+                            <div 
+                                key={num}
+                                className="group relative aspect-square bg-gray-200 rounded-xl overflow-hidden cursor-pointer"
+                            >
+                                {/* 실제 이미지가 들어갈 자리 - object-cover로 중앙 크롭 */}
+                                {/* <img src={photo.url} className="w-full h-full object-cover" /> */}
+                                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors" />
+                                {/* 더미 플레이스홀더 */}
+                                <div className="absolute inset-0 flex items-center justify-center text-gray-400">
+                                    <span className="text-4xl font-bold">{num}</span>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </motion.div>
             </div>
         </motion.div>
+
+        {/* 라이트박스 모달 */}
+        {lightbox.open && (
+            <div 
+                className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center"
+                onClick={() => setLightbox({ ...lightbox, open: false })}
+            >
+                {/* 닫기 버튼 */}
+                <button 
+                    className="absolute top-6 right-6 text-white/70 hover:text-white transition-colors"
+                    onClick={() => setLightbox({ ...lightbox, open: false })}
+                >
+                    <X size={32} />
+                </button>
+
+                {/* 이전 버튼 */}
+                {lightbox.images.length > 1 && (
+                    <button 
+                        className="absolute left-6 text-white/70 hover:text-white transition-colors"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            setSlideDirection(-1);
+                            setLightbox({
+                                ...lightbox,
+                                index: (lightbox.index - 1 + lightbox.images.length) % lightbox.images.length
+                            });
+                        }}
+                    >
+                        <ChevronLeft size={48} />
+                    </button>
+                )}
+
+                {/* 이미지 */}
+                <motion.img 
+                    key={lightbox.index}
+                    src={lightbox.images[lightbox.index]}
+                    alt="확대 이미지"
+                    className="max-w-[90vw] max-h-[90vh] object-contain rounded-lg"
+                    onClick={(e) => e.stopPropagation()}
+                    initial={{ opacity: 0, x: slideDirection * 100 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    transition={{ duration: 0.25, ease: 'easeOut' }}
+                />
+
+                {/* 다음 버튼 */}
+                {lightbox.images.length > 1 && (
+                    <button 
+                        className="absolute right-6 text-white/70 hover:text-white transition-colors"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            setSlideDirection(1);
+                            setLightbox({
+                                ...lightbox,
+                                index: (lightbox.index + 1) % lightbox.images.length
+                            });
+                        }}
+                    >
+                        <ChevronRight size={48} />
+                    </button>
+                )}
+
+                {/* 인디케이터 */}
+                <div className="absolute bottom-6 flex gap-2">
+                    {lightbox.images.map((_, i) => (
+                        <button
+                            key={i}
+                            className={`w-2 h-2 rounded-full transition-colors ${i === lightbox.index ? 'bg-white' : 'bg-white/40'}`}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                setLightbox({ ...lightbox, index: i });
+                            }}
+                        />
+                    ))}
+                </div>
+            </div>
+        )}
+    </>
     );
 }