diff --git a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
index 3543bb4c..e1068b02 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
@@ -629,13 +629,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
             ({ panelPrdtId, productData }) =>
               fp.isNotNil(panelPrdtId) &&
               fp.pipe(() => productData, fp.get("prdtNm"), fp.isNotNil)()
-                ? // ? fp.pipe(() => productData, fp.get("prdtNm"))()
-                  // `${fp.get("prdtId")(productData)} ${fp.get("prdtNm")(productData)}`
-                  fp.pipe(
-                    () => productData,
-                    (data) =>
-                      `${fp.get("prdtId")(data)} ${fp.get("prdtNm")(data)}`
-                  )()
+                ? fp.pipe(() => productData, fp.get("prdtNm"))()
                 : null
           )();
 
@@ -714,6 +708,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
       >
         <THeaderCustom
           className={css.header}
+          prdtId={productData?.prdtId}
           title={headerTitle}
           onBackButton
           onClick={onClick(false)}
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.module.less
index b98e7dd7..59acb745 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.module.less
@@ -5,7 +5,7 @@
   position: relative;
   width: 1114px; // ProductDetail과 동일한 고정 크기
   max-width: 1114px;
-  height: 670px; // ProductDetail과 동일한 고정 높이
+  height: 944px; // ProductDetail과 동일한 고정 높이
   margin-bottom: 30px; // ProductDetail과 동일한 간격
   cursor: pointer;
   background-color: rgba(255, 255, 255, 1);
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.jsx
index 7c8dc715..70c411e2 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.jsx
@@ -1,10 +1,18 @@
-import React, { useCallback } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+} from 'react';
 
 import classNames from 'classnames';
 
 import Spottable from '@enact/spotlight/Spottable';
 
-import { $L } from '../../../../../utils/helperMethods';
+import TButtonScroller
+  from '../../../../../components/TButtonScroller/TButtonScroller';
+import {
+  scaleH,
+  scaleW,
+} from '../../../../../utils/helperMethods';
 import StarRating from '../../../components/StarRating';
 import css from './UserReviewDetail.module.less';
 
@@ -30,6 +38,10 @@ export default function UserReviewDetail({
     }
   }, [onNext, currentIndex, totalReviews]);
 
+  useEffect(() => {
+    console.log("####currentIndex", currentIndex);
+  }, [currentIndex]);
+
   // 리뷰 데이터가 없을 때 처리
   if (!currentReview) {
     return (
@@ -49,7 +61,7 @@ export default function UserReviewDetail({
   };
 
   return (
-    <div className={classNames(css.container, className)}>
+    <>
       {/* Left Arrow - 이전 리뷰가 있을 때만 표시 */}
       {hasMultipleReviews && currentIndex > 0 && (
         <SpottableButton
@@ -59,63 +71,66 @@ export default function UserReviewDetail({
           aria-label="Previous review"
         />
       )}
-
-      {/* Main Content */}
-      <div className={css.mainContent}>
-        <div className={css.reviewContainer}>
-          {/* Review Image */}
-          {reviewImage && (
-            <div className={css.imageSection}>
-              <img
-                src={reviewImage.imgUrl}
-                alt="Review image"
-                className={css.reviewImage}
-              />
-            </div>
-          )}
-
-          {/* Review Info */}
-          <div className={css.infoSection}>
-            {/* Rating and Meta */}
-            <div className={css.metaSection}>
-              {/* Star Rating */}
-              {currentReview.rvwRtng && (
-                <div className={css.ratingContainer}>
-                  <StarRating
-                    rating={currentReview.rvwRtng}
-                    className={css.starRating}
+      <div className={classNames(css.container, className)}>
+        {/* Main Content */}
+        <div className={css.mainContent}>
+          <TButtonScroller
+            className={css.scrollContainer}
+            width={scaleW(900)}
+            boxHeight={scaleH(557)}
+          >
+            <div className={css.reviewContainer}>
+              {" "}
+              {/* Review Image */}
+              {reviewImage && (
+                <div className={css.imageSection}>
+                  <img
+                    src={reviewImage.imgUrl}
+                    alt="Review image"
+                    className={css.reviewImage}
                   />
                 </div>
               )}
+              {/* Review Info */}
+              <div className={css.infoSection}>
+                {/* Rating and Meta */}
+                <div className={css.metaSection}>
+                  {/* Star Rating */}
+                  {currentReview.rvwRtng && (
+                    <div className={css.ratingContainer}>
+                      <StarRating
+                        rating={currentReview.rvwRtng}
+                        className={css.starRating}
+                      />
+                    </div>
+                  )}
 
-              {/* Email */}
-              {(currentReview.wrtrNknm || currentReview.rvwWrtrId) && (
-                <div className={css.email}>
-                  {currentReview.wrtrNknm || currentReview.rvwWrtrId}
-                </div>
-              )}
+                  {/* Email */}
+                  {(currentReview.wrtrNknm || currentReview.rvwWrtrId) && (
+                    <div className={css.email}>
+                      {currentReview.wrtrNknm || currentReview.rvwWrtrId}
+                    </div>
+                  )}
 
-              {/* Date */}
-              {currentReview.rvwRgstDtt && (
-                <div className={css.date}>
-                  {formatDate(currentReview.rvwRgstDtt)}
+                  {/* Date */}
+                  {currentReview.rvwRgstDtt && (
+                    <div className={css.date}>
+                      {formatDate(currentReview.rvwRgstDtt)}
+                    </div>
+                  )}
                 </div>
-              )}
+
+                {/* Review Text */}
+                {currentReview.rvwCtnt && (
+                  <div className={css.reviewText}>
+                    "{currentReview.rvwCtnt}"
+                  </div>
+                )}
+              </div>
             </div>
-
-            {/* Review Text */}
-            {currentReview.rvwCtnt && (
-              <div className={css.reviewText}>"{currentReview.rvwCtnt}"</div>
-            )}
-          </div>
-        </div>
-
-        {/* Custom Scrollbar (피그마 스타일) */}
-        <div className={css.customScrollbar}>
-          <div className={css.scrollTrack} />
+          </TButtonScroller>
         </div>
       </div>
-
       {/* Right Arrow - 다음 리뷰가 있을 때만 표시 */}
       {hasMultipleReviews && currentIndex < totalReviews - 1 && (
         <SpottableButton
@@ -125,6 +140,6 @@ export default function UserReviewDetail({
           aria-label="Next review"
         />
       )}
-    </div>
+    </>
   );
 }
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.module.less
index 902c4a98..d4ebde34 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.module.less
@@ -2,60 +2,22 @@
 @import "../../../../../style/utils.module.less";
 
 .container {
-  width: 100%;
-  height: 100%;
-  padding-left: 30px;
-  padding-right: 30px;
+  // width: 100%;
+  // height:100%;
+  max-width: 900px;
+  max-height: 557px;
   display: flex;
-  justify-content: center;
+  justify-content: space-around;
   align-items: center;
   :focus {
     border: none;
   }
-  // 좌측 화살표 (이전 리뷰) - detailpanel PNG 사용
-  .leftArrow {
-    width: 50px;
-    height: 50px;
-    padding: 3px;
-    cursor: pointer;
-    align-self: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    // 화살표 아이콘 (< 모양, 17px x 29px)
-    &::before {
-      content: "";
-      width: 17px;
-      height: 29px;
-      background-image: url("../../../../../../assets/images/detailpanel/left-arrow.svg");
-      background-position: center;
-      background-size: 17px 29px;
-      background-repeat: no-repeat;
-      display: block;
-    }
-
-    &:focus {
-      outline: 4px solid @PRIMARY_COLOR_RED !important;
-
-      &::before {
-        background-image: url("../../../../../../assets/images/detailpanel/left-arrow-red.svg");
-      }
-    }
-
-    &:hover {
-      &::before {
-        background-image: url("../../../../../../assets/images/detailpanel/left-arrow-red.svg");
-      }
-    }
-  }
 
   // 메인 콘텐츠 영역 (피그마 레이아웃 적용)
   .mainContent {
     flex: 1;
     height: 557px;
-    padding: 30px;
-    overflow: hidden;
+    overflow: auto;
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
@@ -63,20 +25,34 @@
     .reviewContainer {
       flex: 1;
       align-self: stretch;
-      padding: 30px;
+      // padding: 30px;
       background: #f8f8f8;
       border-radius: 12px;
       display: flex;
       justify-content: flex-start;
       align-items: flex-start;
       margin-right: 30px; // gap: 30 → margin-right: 30px
+      // 스크롤바 너비를 6px로 명확하게 설정
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
 
+      &::-webkit-scrollbar-track {
+        background: transparent; // 트랙 배경은 투명하게
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: #9c9c9c; // 스크롤바 색상
+      }
+
+      // 스크롤바 thumb에 hover 효과 적용
+      &:focus::-webkit-scrollbar-thumb {
+        background: #c72054;
+      }
       // 이미지 섹션 (피그마: flex: 1, align-self: stretch, padding: 5px 4px)
       .imageSection {
         flex: 1;
-        align-self: stretch;
-        display: flex;
-
+        margin: 30px 0 0 30px;
         .reviewImage {
           width: 357px;
           height: 467px;
@@ -95,7 +71,7 @@
         justify-content: flex-start;
         align-items: flex-start;
         margin-left: 30px; // gap: 30 → margin-left: 30px
-
+        margin-top: 30px;
         // 메타 섹션 (별점, 이메일, 날짜)
         .metaSection {
           align-self: stretch;
@@ -152,7 +128,7 @@
           font-weight: 400;
           line-height: 31px;
           word-wrap: break-word;
-          overflow: hidden;
+          padding: 0 20px 0 0;
         }
       }
     }
@@ -176,44 +152,6 @@
     }
   }
 
-  // 우측 화살표 (다음 리뷰) - detailpanel PNG 사용
-  .rightArrow {
-    width: 50px;
-    height: 50px;
-    padding: 3px;
-    cursor: pointer;
-    align-self: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    // 화살표 아이콘 (> 모양, 17px x 29px)
-    &::before {
-      content: "";
-      width: 17px;
-      height: 29px;
-      background-image: url("../../../../../../assets/images/detailpanel/right-arrow.svg");
-      background-position: center;
-      background-size: 17px 29px;
-      background-repeat: no-repeat;
-      display: block;
-    }
-
-    &:focus {
-      outline: 4px solid @PRIMARY_COLOR_RED !important;
-
-      &::before {
-        background-image: url("../../../../../../assets/images/detailpanel/right-arrow-red.svg");
-      }
-    }
-
-    &:hover {
-      &::before {
-        background-image: url("../../../../../../assets/images/detailpanel/right-arrow-red.svg");
-      }
-    }
-  }
-
   // 리뷰 데이터가 없을 때
   .noReview {
     display: flex;
@@ -224,3 +162,87 @@
     font-family: @baseFont;
   }
 }
+
+// 좌측 화살표 (이전 리뷰) - detailpanel PNG 사용
+.leftArrow {
+  width: 50px;
+  height: 50px;
+  padding: 3px;
+  cursor: pointer;
+  align-self: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 5px; //포커스 가 보이지 않음으로 인하여 처리.
+  // 화살표 아이콘 (< 모양, 17px x 29px)
+  &::before {
+    content: "";
+    width: 17px;
+    height: 29px;
+    background-image: url("../../../../../../assets/images/detailpanel/left-arrow.svg");
+    background-position: center;
+    background-size: 17px 29px;
+    background-repeat: no-repeat;
+    display: block;
+  }
+
+  &:focus {
+    outline: 4px solid @PRIMARY_COLOR_RED !important;
+
+    &::before {
+      background-image: url("../../../../../../assets/images/detailpanel/left-arrow-red.svg");
+    }
+  }
+
+  &:hover {
+    &::before {
+      background-image: url("../../../../../../assets/images/detailpanel/left-arrow-red.svg");
+    }
+  }
+}
+
+// 우측 화살표 (다음 리뷰) - detailpanel PNG 사용
+.rightArrow {
+  width: 50px;
+  height: 50px;
+  padding: 3px;
+  cursor: pointer;
+  align-self: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 5px;
+  // 화살표 아이콘 (> 모양, 17px x 29px)
+  &::before {
+    content: "";
+    width: 17px;
+    height: 29px;
+    background-image: url("../../../../../../assets/images/detailpanel/right-arrow.svg");
+    background-position: center;
+    background-size: 17px 29px;
+    background-repeat: no-repeat;
+    display: block;
+  }
+
+  &:focus {
+    outline: 4px solid @PRIMARY_COLOR_RED !important;
+
+    &::before {
+      background-image: url("../../../../../../assets/images/detailpanel/right-arrow-red.svg");
+    }
+  }
+
+  &:hover {
+    &::before {
+      background-image: url("../../../../../../assets/images/detailpanel/right-arrow-red.svg");
+    }
+  }
+}
+
+.scrollContainer {
+  > div {
+    margin-top: 30px;
+    background-color: #f8f8f8;
+    border-radius: 12px;
+  }
+}
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.jsx
index ed2ce04e..1173d912 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.jsx
@@ -118,7 +118,13 @@ export default function UserReviewsPopup({
       // User-Reviews 모드: selectedImageIndex를 그대로 사용
       setCurrentReviewIndex(selectedImageIndex);
     }
-  }, [mode, selectedImageIndex, images, reviewsWithImages, allReviews]);
+  }, [
+    mode,
+    // selectedImageIndex,
+    // images,
+    // reviewsWithImages,
+    // allReviews,
+  ]);
 
   // 리뷰 네비게이션 핸들러 (All-Images 및 User-Reviews 모드)
   const handlePreviousReview = useCallback(() => {
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.module.less
index c19a9dd6..77ff2a99 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.module.less
@@ -52,7 +52,7 @@
       overflow: hidden;
       display: flex;
       justify-content: center; // 중앙 정렬
-      align-items: center; // 중앙 정렬
+      align-items: end; // 중앙 정렬
       position: relative;
 
       .scrollerOverride {
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx
index 7909c871..fa02fb5b 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx
@@ -23,6 +23,7 @@ const Container = SpotlightContainerDecorator(
 const SpottableComponent = Spottable("button");
 
 export default function THeaderCustom({
+  prdtId,
   title,
   className,
   onBackButton,
@@ -93,6 +94,7 @@ export default function THeaderCustom({
         marqueeDisabled={marqueeDisabled}
         aria-label={ariaLabel}
       >
+        {prdtId && <span className={css.prdtId}>ID : {prdtId}</span>}
         {convertedTitle && (
           <span dangerouslySetInnerHTML={{ __html: convertedTitle }} />
         )}
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.module.less b/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.module.less
index 67e1dcd9..6b5109d3 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.module.less
@@ -9,9 +9,14 @@
   justify-content: flex-start;
   align-items: center;
   background-color: transparent; // DetailPanel에서는 배경 투명
-
+  .prdtId {
+    font-size: 30px;
+    font-weight: 700;
+    color: #999;
+    margin-right: 10px;
+  }
   .title {
-    width: 1710px;
+    width: 1650px;
     font-size: 25px;
     font-weight: 600;
     color: #eaeaea;