diff --git a/com.twin.app.shoptime/src/components/TButton/TButton.module.less b/com.twin.app.shoptime/src/components/TButton/TButton.module.less
index a7f485d6..9c697449 100644
--- a/com.twin.app.shoptime/src/components/TButton/TButton.module.less
+++ b/com.twin.app.shoptime/src/components/TButton/TButton.module.less
@@ -43,7 +43,7 @@
     max-width: 650px;
     letter-spacing: -0.75px;
   }
-  &.extraLarge {
+  &.extra {
     min-width: 350px;
     max-width: 900px;
   }
diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
index e11163a1..bf67489b 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
@@ -413,7 +413,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
       if (index === 3) {
         dispatch(resetPanels());
         deActivateTab();
-        Spotlight.focus(SpotlightIds.TBODY);
+        Spotlight.focus(SpotlightIds.TPANEL);
         return;
       }
       if (target) {
@@ -425,7 +425,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
         setMainExpanded(true);
       }
     },
-    [cursorVisible, deActivateTab, dispatch, panels]
+    [cursorVisible, deActivateTab, dispatch, selectedTitle]
   );
 
   const onClickSubItem = useCallback(
diff --git a/com.twin.app.shoptime/src/hooks/useScrollTo.js b/com.twin.app.shoptime/src/hooks/useScrollTo.js
index e9ed2eb7..79cba814 100644
--- a/com.twin.app.shoptime/src/hooks/useScrollTo.js
+++ b/com.twin.app.shoptime/src/hooks/useScrollTo.js
@@ -1,11 +1,15 @@
-import React, { useCallback, useEffect, useRef } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+} from 'react';
 
 export default function useScrollTo() {
   const scrollTo = useRef();
 
-  const scrollTop = useCallback(({ animate = true } = {}) => {
+  const scrollTop = useCallback(({ scaleX = 0, animate = true } = {}) => {
     if (scrollTo && scrollTo.current) {
-      scrollTo.current({ position: { y: 0 }, animate: animate });
+      scrollTo.current({ position: { y: scaleX }, animate: animate });
     }
   }, []);
 
@@ -15,6 +19,12 @@ export default function useScrollTo() {
     }
   }, []);
 
+  const scrollBottom = useCallback(({ scaleY = 0, animate } = {}) => {
+    if (scrollTo && scrollTo.current) {
+      scrollTo.current({ position: { y: scaleY }, animate: animate });
+    }
+  }, []);
+
   const getScrollTo = useCallback((cbScrollTo) => {
     scrollTo.current = cbScrollTo;
   }, []);
@@ -23,5 +33,5 @@ export default function useScrollTo() {
     scrollTop();
   }, []);
 
-  return { getScrollTo, scrollLeft, scrollTop };
+  return { getScrollTo, scrollLeft, scrollTop, scrollBottom };
 }
diff --git a/com.twin.app.shoptime/src/reducers/homeReducer.js b/com.twin.app.shoptime/src/reducers/homeReducer.js
index 6aee115e..78f3cdf1 100644
--- a/com.twin.app.shoptime/src/reducers/homeReducer.js
+++ b/com.twin.app.shoptime/src/reducers/homeReducer.js
@@ -1,4 +1,4 @@
-import { types } from "../actions/actionTypes";
+import { types } from '../actions/actionTypes';
 
 const initialState = {
   termsData: {},
@@ -56,7 +56,7 @@ export const homeReducer = (state = initialState, action) => {
       return {
         ...state,
         themeCurationHotelDetailData: hotelInfos,
-        HotelData: action.payload,
+        hotelData: action.payload,
       };
     }
 
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
index 4d1f8f8a..135f727e 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
@@ -37,6 +37,7 @@ export default function ItemDetail() {
   const hotelInfos = useSelector(
     (state) => state.home.themeCurationHotelDetailData
   );
+  const hotelData = useSelector((state) => state.home.hotelData);
 
   const dispatch = useDispatch();
 
@@ -99,7 +100,7 @@ export default function ItemDetail() {
         className={css.header}
         title={
           (selectedPrdtId && productData?.prdtNm) ||
-          (selectedCurationId && hotelInfos[selectedIndex]?.hotelNm)
+          (selectedCurationId && hotelData?.hotelInfo.curationNm)
         }
         onBackButton
         onClick={onClick}
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.jsx
index af1020d9..8646a512 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.jsx
@@ -7,7 +7,6 @@ import React, {
 
 import { useSelector } from 'react-redux';
 
-import logo from '../../../../assets/images/icons/ic-partners-netflix@3x.png';
 import TButton from '../../../components/TButton/TButton';
 import TQRCode from '../../../components/TQRCode/TQRCode';
 import { $L } from '../../../utils/helperMethods';
@@ -22,9 +21,7 @@ export default function HotelOption({ selectedIndex, setSelectedIndex }) {
   const hotelInfos = useSelector(
     (state) => state.home.themeCurationHotelDetailData
   );
-  const HotelData = useSelector((state) => state.home.HotelData);
-
-  console.log("#hotelInfos", HotelData);
+  const hotelData = useSelector((state) => state.home.hotelData);
 
   useEffect(() => {
     let label = "";
@@ -48,7 +45,8 @@ export default function HotelOption({ selectedIndex, setSelectedIndex }) {
   return (
     <div className={css.optionContainer}>
       <div className={css.topLayer}>
-        <img src={HotelData?.hotelInfo.patncLogoPath} alt="patncLogoPath" />
+        <img src={hotelData?.hotelInfo.patncLogoPath} alt="" />
+
         <div className={css.rating}>
           <StarRating
             rating={hotelInfos[selectedIndex]?.hotelDetailInfo.revwGrd}
@@ -56,13 +54,15 @@ export default function HotelOption({ selectedIndex, setSelectedIndex }) {
           <span className={css.line} /> <div>{label}</div>
         </div>
       </div>
-      <div className={css.title}>
-        {"HOTELHOTELHOTELHOTELHOTELHOTELHOTELHOTELHOTELHOTEL"}
-      </div>
+      <div className={css.title}>{hotelInfos[selectedIndex]?.hotelNm}</div>
       <div className={css.amenities}></div>
       <div className={css.bottomLayer}>
         <div>
-          <div className={css.today}>{$L("Today, 1 Night(s) 2 Adult(s)")}</div>
+          <div className={css.today}>
+            {$L(
+              `Today, ${hotelInfos[selectedIndex]?.hotelDetailInfo.nights} Night(s) 2 Adult(s)`
+            )}
+          </div>
           <div className={css.roomType}>
             {hotelInfos[selectedIndex]?.hotelDetailInfo.roomType}
           </div>
@@ -85,7 +85,7 @@ export default function HotelOption({ selectedIndex, setSelectedIndex }) {
           </div>
         </div>
       </div>
-      <TButton className={css.tbutton} type="extraLarge">
+      <TButton className={css.tbutton} size="extra">
         {$L("SEE MORE")}
       </TButton>
     </div>
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.module.less
index f7430af6..79afa832 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.module.less
@@ -93,7 +93,7 @@
         border-radius: 6px;
         border: solid 1px #dadada;
         background-image: linear-gradient(to top, #f5f5f5, #fff);
-        margin: 5px 0 0 6px;
+        margin: 8px 0 0 6px;
         padding: 16px 16px 16px 16px;
       }
 
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx
index 69925ebc..d5cfc06c 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx
@@ -30,17 +30,19 @@ export default function OptionPartnerPrice({
     installmentMonths,
   } = productInfos;
 
+  console.log("#offerInfo", offerInfo);
+
   const { discountRate } = usePriceInfo(priceInfo) || {};
   const TYPE_CASE = {
-    case1: price2 && !price3 && !price5,
-    case2: price2 && price3 && !price5,
-    case3: price2 && price3 && price5,
-    case4: price2 && !price3 && price5,
-    case5: price2 && !price3 && !price5,
-    case6: price2 && price3 && !price5,
-    case7: price2 && price3 && price5,
-    case8: price2 && !price3 && price5,
-    case9: !price2 && !price3 && !price5 && offerInfo,
+    case1: price2 && !price3 && !price5 && !offerInfo,
+    case2: price2 && price3 && !price5 && !offerInfo,
+    case3: price2 && price3 && price5 && !offerInfo,
+    case4: price2 && !price3 && price5 && !offerInfo,
+    case5: price2 && !price3 && !price5 && !offerInfo,
+    case6: price2 && price3 && !price5 && !offerInfo,
+    case7: price2 && price3 && price5 && !offerInfo,
+    case8: price2 && !price3 && price5 && !offerInfo,
+    case9: offerInfo,
   };
 
   const renderPriceItem = useCallback(() => {
@@ -68,7 +70,7 @@ export default function OptionPartnerPrice({
         if (TYPE_CASE.case9) {
           return (
             <div className={css.wrapper}>
-              <span className={css.name}>{$L("Call for info")}</span>
+              <span className={css.offerInfo}>{$L("Call for info")}</span>
             </div>
           );
         }
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.module.less b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.module.less
index 4f9dba0d..2d8d144f 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.module.less
@@ -53,6 +53,11 @@
           margin-top: 6px;
         }
       }
+      .offerInfo {
+        font-size: 60px;
+        font-weight: bold;
+        color: #808080;
+      }
       .discountedPrc {
         font-size: 24px;
         color: @COLOR_GRAY03;
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/YouMayLike/YouMayLike.jsx b/com.twin.app.shoptime/src/views/DetailPanel/YouMayLike/YouMayLike.jsx
index 66173da1..912d8f19 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/YouMayLike/YouMayLike.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/YouMayLike/YouMayLike.jsx
@@ -1,21 +1,30 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 
-import classNames from "classnames";
-import { useDispatch, useSelector } from "react-redux";
+import classNames from 'classnames';
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
-import { Job } from "@enact/core/util";
-import Spotlight from "@enact/spotlight";
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-import Spottable from "@enact/spotlight/Spottable";
+import { Job } from '@enact/core/util';
+import Spotlight from '@enact/spotlight';
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
 
-import { getMainYouMayLike } from "../../../actions/mainActions";
-import { pushPanel } from "../../../actions/panelActions";
-import TItemCard from "../../../components/TItemCard/TItemCard";
-import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridList";
-import { panel_names } from "../../../utils/Config";
-import { $L } from "../../../utils/helperMethods";
-import { SpotlightIds } from "../../../utils/SpotlightIds";
-import css from "./YouMayLike.module.less";
+import { getMainYouMayLike } from '../../../actions/mainActions';
+import { pushPanel } from '../../../actions/panelActions';
+import TItemCard from '../../../components/TItemCard/TItemCard';
+import TVirtualGridList
+  from '../../../components/TVirtualGridList/TVirtualGridList';
+import { panel_names } from '../../../utils/Config';
+import { $L } from '../../../utils/helperMethods';
+import { SpotlightIds } from '../../../utils/SpotlightIds';
+import css from './YouMayLike.module.less';
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "default-element", preserveId: true },
@@ -31,6 +40,8 @@ export default function YouMayLike() {
   const youmaylikeData = useSelector((state) => state.main.youmaylikeData);
   const data = useSelector((state) => state.main.productData);
 
+  console.log("#youmaylike", youmaylikeData);
+
   useEffect(() => {
     dispatch(
       getMainYouMayLike({
@@ -70,7 +81,7 @@ export default function YouMayLike() {
 
   const renderItem = useCallback(
     ({ index, ...rest }) => {
-      const { imgUrl, patnrId, prdtId, prdtNm, priceInfo } =
+      const { imgUrl, patnrId, prdtId, prdtNm, priceInfo, offerInfo } =
         youmaylikeData[index];
 
       const handleItemClick = () => {
@@ -93,6 +104,7 @@ export default function YouMayLike() {
           imageAlt={prdtId}
           imageSource={imgUrl}
           priceInfo={priceInfo}
+          offerInfo={offerInfo}
           productName={prdtNm}
           onClick={handleItemClick}
         />
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeHotelIndicator.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeHotelIndicator.jsx
index 18958343..f269dc2e 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeHotelIndicator.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeHotelIndicator.jsx
@@ -32,13 +32,14 @@ export default function ThemeHotelIndicator({
 }) {
   const [selectedImage, setSelectedImage] = useState(null);
   const [imageSelectedIndex, setImageSelectedIndex] = useState(0);
+  const containerRef = useRef(null);
   const hotelInfos = useSelector(
     (state) => state.home.themeCurationHotelDetailData
   );
   const { cursorVisible } = useSelector((state) => state.common.appStatus);
-
   const imageLength = hotelInfos[selectedIndex]?.hotelDetailInfo.imgUrls.length;
 
+  const { getScrollTo, scrollBottom, scrollTop } = useScrollTo();
   useEffect(() => {
     const image =
       hotelInfos[selectedIndex]?.hotelDetailInfo.imgUrls[imageSelectedIndex];
@@ -60,12 +61,21 @@ export default function ThemeHotelIndicator({
   const handleUpClick = () => {
     if (selectedIndex > 0) {
       setSelectedIndex((prev) => prev - 1);
+      // scrollTop({ scaleX: , animate: true });
     }
   };
 
   const handleDownClick = useCallback(() => {
     if (hotelInfos.length - 1 !== selectedIndex) {
       setSelectedIndex((prev) => prev + 1);
+      if (selectedIndex > 1) {
+        scrollBottom({
+          scaleY: 144 * selectedIndex,
+          animate: true,
+        });
+      }
+
+      console.log("###!!");
     }
   }, [selectedIndex]);
 
@@ -149,9 +159,13 @@ export default function ThemeHotelIndicator({
               selectedIndex === 0 && css.disable
             )}
           />
-          <Container className={css.tVirtualGridListContainer}>
+          <Container
+            className={css.tVirtualGridListContainer}
+            ref={containerRef}
+          >
             {hotelInfos && hotelInfos.length > 0 && (
               <TVirtualGridList
+                cbScrollTo={getScrollTo}
                 className={css.tVirtualGridList}
                 dataSize={hotelInfos.length}
                 itemWidth={144}