diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNavItem/CategoryNavItem.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNavItem/CategoryNavItem.jsx
index ba985b8e..178c0a9c 100644
--- a/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNavItem/CategoryNavItem.jsx
+++ b/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNavItem/CategoryNavItem.jsx
@@ -35,7 +35,7 @@ export default memo(function CategoryNavItem({
       )}
       key={"categoryInfo-" + index}
       onClick={() => handleClick(categoryCode)}
-      spotlightId={"spotlightId-" + currentCategoryCode}
+      spotlightId={"spotlightId-" + categoryCode}
       {...rest}
     >
       <div>
diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx
index f0231629..a3a90912 100644
--- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx
+++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx
@@ -66,8 +66,9 @@ export default function OnSalePanel() {
       />
       <TBody className={css.tBody} cbScrollTo={getScrollTo}>
         {saleInfos &&
-          saleInfos.map(({ saleNm, saleProductInfos }, index) => (
+          saleInfos.map(({ saleNm, saleProductInfos, expsOrd }, index) => (
             <OnSaleProductList
+              exposureOrder={expsOrd}
               key={"saleInfo-" + index}
               saleName={saleNm}
               saleProductInfos={saleProductInfos}
diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductList/OnSaleProductList.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductList/OnSaleProductList.jsx
index 4110c3f2..b953a814 100644
--- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductList/OnSaleProductList.jsx
+++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductList/OnSaleProductList.jsx
@@ -1,8 +1,13 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect } from "react";
 
 import { VirtualGridList } from "@enact/sandstone/VirtualList";
+import {
+  getContainerId,
+  setContainerLastFocusedElement,
+} from "@enact/spotlight/src/container";
 
 import SectionTitle from "../../../components/SectionTitle/SectionTitle";
+import useScrollTo from "../../../hooks/useScrollTo";
 import { scaleH, scaleW } from "../../../utils/helperMethods";
 import OnSaleProductItem from "../OnSaleProductList/OnSaleProductItem/OnSaleProductItem";
 import css from "./OnSaleProductList.module.less";
@@ -14,10 +19,26 @@ const LIST_ITEM_CONF = {
 };
 
 export default function OnSaleProductList({
+  exposureOrder,
   saleName,
   saleProductInfos,
   ...rest
 }) {
+  const { getScrollTo, scrollLeft } = useScrollTo();
+
+  useEffect(() => {
+    const containerId = "container-" + exposureOrder;
+    const container = document.getElementById(containerId);
+
+    if (container) {
+      const childrenId = getContainerId(container?.children[1]);
+      childrenId &&
+        setContainerLastFocusedElement(null, [containerId, childrenId]);
+    }
+
+    scrollLeft();
+  }, [saleProductInfos]);
+
   const renderItem = useCallback(
     ({ index, ...rest }) => {
       return (
@@ -32,11 +53,12 @@ export default function OnSaleProductList({
   );
 
   return (
-    <div className={css.container} {...rest}>
+    <div className={css.container} id={"container-" + exposureOrder} {...rest}>
       {saleName && <SectionTitle title={saleName} />}
 
       {saleProductInfos && (
         <VirtualGridList
+          cbScrollTo={getScrollTo}
           className={css.virtualGridList}
           dataSize={saleProductInfos.length}
           direction="horizontal"