diff --git a/src/components/carousels/customPaginationSilder/index.jsx b/src/components/carousels/customPaginationSilder/index.jsx
index 6f19c60..d44da0f 100644
--- a/src/components/carousels/customPaginationSilder/index.jsx
+++ b/src/components/carousels/customPaginationSilder/index.jsx
@@ -15,6 +15,8 @@ import ChatApp from 'src/components/chat';
 
 import PanZoom from 'react-easy-panzoom';
 import Image from 'next/image';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
+import SellIcon from '@mui/icons-material/Sell';
 
 const variants = {
   enter: (direction) => {
@@ -59,80 +61,127 @@ function ProductDetailsCarousel({ ...props }) {
   const { slug, item, meta } = props;
   const [modal, setModal] = useState();
   const [priceTag, setPriceTag] = useState(true);
+  const [bigImg, setBigImg] = useState(false);
 
   // JSON 문자열인 meta를 객체 배열로 파싱
   const annotations = meta && typeof meta === 'string' ? JSON.parse(meta) : meta;
 
   return (
     <div>
-      <div className="slide-wrapper">
-        <Button
-          variant="contained"
-          onClick={() => setPriceTag(!priceTag)}
-          sx={{ position: 'absolute', right: 0, top: 0, zIndex: 3 }}
-        >
-          가격표시
-        </Button>
+      <IconButton
+        onClick={() => setPriceTag(!priceTag)}
+        sx={{ position: 'absolute', right: 45, bottom: 0, zIndex: 3, backgroundColor: 'white' }}
+      >
+        <SellIcon />
+      </IconButton>
+      <IconButton
+        onClick={() => setBigImg(!bigImg)}
+        sx={{ position: 'absolute', right: 0, bottom: 0, zIndex: 3, backgroundColor: 'white' }}
+      >
+        <ZoomInIcon />
+      </IconButton>
 
-        {item && (
-          <Image
-            priority
-            fill
-            objectFit="cover"
-            sizes="50%"
-            src={item?.url || item?.src}
-            alt="hero-carousel"
-            blurDataURL={item.blurDataURL}
-          />
-        )}
+      {item && <img style={{ width: '100%' }} src={item?.url || item?.src} alt="hero-carousel" />}
 
-        {/* 저장된 금액 표시 */}
+      {/* 저장된 금액 표시 */}
 
-        {annotations
-          ? annotations.map((annotation, idx) => (
-              <Button
-                key={idx}
+      {annotations
+        ? annotations.map((annotation, idx) => (
+            <Button
+              key={idx}
+              sx={{
+                position: 'absolute',
+                top: `${annotation.y * 100}%`, // 상대값을 퍼센트로 변환
+                left: `${annotation.x * 100}%`,
+                transform: 'translate(-50%, -50%)', // 중앙 정렬
+                backgroundColor: 'rgba(0,0,0,0.7)',
+                color: '#fff',
+                padding: '2px 5px',
+                borderRadius: '4px',
+                display: priceTag ? 'block' : 'none'
+              }}
+              onClick={() => setModal(true)}
+            >
+              <Typography>
+                {annotation.id}: {annotation.price}
+              </Typography>
+            </Button>
+          ))
+        : ''}
+      {modal && (
+        <Modal open={modal}>
+          <Stack direction={'column'} sx={{ backgroundColor: '#fff' }}>
+            <Stack direction="row">
+              <IconButton
+                aria-label="close"
+                onClick={() => setModal(false)}
                 sx={{
                   position: 'absolute',
-                  top: `${annotation.y * 100}%`, // 상대값을 퍼센트로 변환
-                  left: `${annotation.x * 100}%`,
-                  transform: 'translate(-50%, -50%)', // 중앙 정렬
-                  backgroundColor: 'rgba(0,0,0,0.7)',
-                  color: '#fff',
-                  padding: '2px 5px',
-                  borderRadius: '4px',
-                  display: priceTag ? 'block' : 'none'
+                  right: 5,
+                  top: 5,
+                  zIndex: 111
                 }}
-                onClick={() => setModal(true)}
               >
-                <Typography>
-                  {annotation.id}: {annotation.price}
-                </Typography>
-              </Button>
-            ))
-          : ''}
-        {modal && (
-          <Modal open={modal}>
-            <Stack direction={'column'} sx={{ backgroundColor: '#fff' }}>
-              <Stack direction="row">
-                <IconButton
-                  aria-label="close"
-                  onClick={() => setModal(false)}
-                  sx={{
-                    position: 'absolute',
-                    right: 5,
-                    top: 5,
-                    zIndex: 111
-                  }}
-                >
-                  <MdClear />
-                </IconButton>
-              </Stack>
-              <ChatApp slug={slug} />
+                <MdClear />
+              </IconButton>
             </Stack>
-          </Modal>
-        )}
-      </div>
+            <ChatApp slug={slug} />
+          </Stack>
+        </Modal>
+      )}
+      {bigImg && (
+        <Modal open={bigImg}>
+          <Stack
+            direction={'column'}
+            sx={{ height: '100%', backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center' }}
+          >
+            <Stack direction="row" sx={{ justifyContent: 'center', alignItems: 'center' }}>
+              <IconButton
+                aria-label="close"
+                onClick={() => setBigImg(false)}
+                sx={{
+                  position: 'absolute',
+                  right: 5,
+                  top: 5,
+                  zIndex: 111
+                }}
+              >
+                <MdClear />
+              </IconButton>
+            </Stack>
+            {item && (
+              <PanZoom>
+                <Box sx={{}}>
+                  <img style={{ width: '100%' }} src={item?.url || item?.src} alt="hero-carousel" />
+                  {annotations
+                    ? annotations.map((annotation, idx) => (
+                        <Button
+                          key={idx}
+                          sx={{
+                            position: 'absolute',
+                            top: `${annotation.y * 100}%`, // 상대값을 퍼센트로 변환
+                            left: `${annotation.x * 100}%`,
+                            transform: 'translate(-50%, -50%)', // 중앙 정렬
+                            backgroundColor: 'rgba(0,0,0,0.7)',
+                            color: '#fff',
+                            padding: '2px 5px',
+                            borderRadius: '4px',
+                            display: priceTag ? 'block' : 'none'
+                          }}
+                          onClick={() => setModal(true)}
+                        >
+                          <Typography>
+                            {annotation.id}: {annotation.price}
+                          </Typography>
+                        </Button>
+                      ))
+                    : ''}
+                </Box>
+              </PanZoom>
+            )}
+          </Stack>
+        </Modal>
+      )}
     </div>
   );
 }