diff --git a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
index f4d0a912..533ca564 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
@@ -1,15 +1,17 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
 import Spottable from "@enact/spotlight/Spottable";
 
+import { pushPanel } from "../../../actions/panelActions";
 import SectionTitle from "../../../components/SectionTitle/SectionTitle";
 import TItemCard from "../../../components/TItemCard/TItemCard";
 import TScroller from "../../../components/TScroller/TScroller";
 import useScrollReset from "../../../hooks/useScrollReset";
 import useScrollTo from "../../../hooks/useScrollTo";
+import { panel_names } from "../../../utils/Config";
 import { $L } from "../../../utils/helperMethods";
 import css from "./BestSeller.module.less";
 
@@ -20,6 +22,7 @@ const Container = SpotlightContainerDecorator(
 );
 
 const BestSeller = () => {
+  const dispatch = useDispatch();
   const bestSellerDatas = useSelector(
     (state) => state.product.bestSellerData.bestSeller
   );
@@ -32,6 +35,27 @@ const BestSeller = () => {
   useEffect(() => {
     setDrawChk(true);
   }, [bestSellerDatas]);
+  const handleCardClick = useCallback((item) => {
+    dispatch(
+      pushPanel(
+        {
+          name: panel_names.DETAIL_PANEL,
+          panelInfo: { patnrId: item.patnrId, prdtId: item.prdtId },
+        },
+        [dispatch, item]
+      )
+    );
+  });
+  const handleMoreCardClick = useCallback(() => {
+    dispatch(
+      pushPanel(
+        {
+          name: panel_names.TRENDING_NOW_PANEL,
+        },
+        [dispatch]
+      )
+    );
+  });
   return (
     <Container className={css.bestSellerWrap}>
       <SectionTitle title={$L(`BEST SELLER`)} />
@@ -54,11 +78,15 @@ const BestSeller = () => {
               rank={item.rankOrd}
               onFocus={index === 0 ? handleScrollReset : null}
               onBlur={handleStopScrolling}
+              onClick={() => handleCardClick(item)}
             />
           ))}
 
         {drawChk && (
-          <SpottableComponent className={css.addItem}></SpottableComponent>
+          <SpottableComponent
+            className={css.addItem}
+            onClick={handleMoreCardClick}
+          ></SpottableComponent>
         )}
       </TScroller>
     </Container>
diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSaleItem/HomeOnSaleItem.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSaleItem/HomeOnSaleItem.jsx
index aac1e725..074eff36 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSaleItem/HomeOnSaleItem.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSaleItem/HomeOnSaleItem.jsx
@@ -1,7 +1,12 @@
 import React, { useCallback } from "react";
 
+import { useDispatch } from "react-redux";
+
 import Spottable from "@enact/spotlight/Spottable";
 
+import { pushPanel } from "../../../../actions/panelActions";
+import { panel_names } from "../../../../utils/Config";
+import { $L } from "../../../../utils/helperMethods";
 import css from "./HomeOnSaleItem.module.less";
 
 const SpottableComponent = Spottable("div");
@@ -33,15 +38,31 @@ export default function HomeOnSaleItem({ homeOnSaleInfos, itemData, ...rest }) {
   const { originalPrice, discountedPrice, discountRate } = parsePriceInfo(
     itemData.priceInfo
   );
+  const dispatch = useDispatch();
 
+  const handleCardClick = useCallback(
+    (itemData) => {
+      dispatch(
+        pushPanel({
+          name: panel_names.ON_SALE_PANEL,
+          panelInfo: { categoryIncFlag: "Y", lgCatCd: itemData.lgCatCd },
+        })
+      );
+    },
+    [dispatch, itemData]
+  );
   return (
-    <SpottableComponent className={css.onSaleItemList} {...rest}>
+    <SpottableComponent
+      className={css.onSaleItemList}
+      onClick={() => handleCardClick(itemData)}
+      {...rest}
+    >
       <img src={itemData.imgUrl} className={css.onSaleItemListImg} />
       <div className={css.onSaleItemListBox}>
         <div className={css.onSaleItemListBoxTitle}>{itemData.catNm}</div>
         {discountRate && (
           <div className={css.onSaleItemListBoxSaleBox}>
-            up to&nbsp;
+            {$L(`up to `)}
             <span className={css.onSaleItemListBoxSaleBoxPer}>
               {discountRate}
             </span>
diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
index 1dd249ee..637da986 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
@@ -1,15 +1,17 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
 import Spottable from "@enact/spotlight/Spottable";
 
+import { pushPanel } from "../../../actions/panelActions";
 import SectionTitle from "../../../components/SectionTitle/SectionTitle";
 import TItemCard, { TYPES } from "../../../components/TItemCard/TItemCard";
 import TScroller from "../../../components/TScroller/TScroller";
 import useScrollReset from "../../../hooks/useScrollReset";
 import useScrollTo from "../../../hooks/useScrollTo";
+import { panel_names } from "../../../utils/Config";
 import { $L } from "../../../utils/helperMethods";
 import css from "../PopularShow/PopularShow.module.less";
 
@@ -20,6 +22,7 @@ const Container = SpotlightContainerDecorator(
 );
 
 const PopularShow = ({ ...rest }) => {
+  const dispatch = useDispatch();
   const topInfos = useSelector((state) => state.main.top20ShowData.topInfos);
   const [drawChk, setDrawChk] = useState(false);
   const { getScrollTo, scrollLeft } = useScrollTo();
@@ -30,6 +33,16 @@ const PopularShow = ({ ...rest }) => {
   useEffect(() => {
     setDrawChk(true);
   }, [topInfos]);
+  const handleCardClick = useCallback(() => {
+    dispatch(
+      pushPanel(
+        {
+          name: panel_names.TRENDING_NOW_PANEL,
+        },
+        [dispatch]
+      )
+    );
+  });
   return (
     <Container className={css.popularShow}>
       <SectionTitle className={css.subTitle} title={$L(`POPULAR SHOW`)} />
@@ -55,6 +68,7 @@ const PopularShow = ({ ...rest }) => {
                 type={TYPES.videoShow}
                 onFocus={index === 0 ? handleScrollReset : null}
                 onBlur={handleStopScrolling}
+                onClick={handleCardClick}
               />
             );
           })}
diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
index 5abb81e7..b8a1df3b 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 
@@ -6,10 +6,12 @@ import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainer
 import Spottable from "@enact/spotlight/Spottable";
 
 import { getSubCategory } from "../../../actions/mainActions";
+import { pushPanel } from "../../../actions/panelActions";
 import TItemCard from "../../../components/TItemCard/TItemCard";
 import TScroller from "../../../components/TScroller/TScroller";
 import useScrollReset from "../../../hooks/useScrollReset";
 import useScrollTo from "../../../hooks/useScrollTo";
+import { panel_names } from "../../../utils/Config";
 import CategoryNav from "../../HomePanel/SubCategory/CategoryNav/CategoryNav";
 import css from "../../HomePanel/SubCategory/SubCategory.module.less";
 
@@ -31,20 +33,53 @@ const SubCategory = () => {
     (state) => state.main.subCategoryData.categoryItemInfos
   );
   const [currentLgCatCd, setCurrentLgCatCd] = useState(null);
+  const [currentLgCatNm, setCurrentLgCatNm] = useState(null);
+  const [currentCOUNT, setCurrentCOUNT] = useState(null);
   const [drawChk, setDrawChk] = useState(false);
-  const handleCategoryNav = (lgCatCd, LgCatNm) => {
+  const handleCategoryNav = (lgCatCd, LgCatNm, COUNT) => {
     if (currentLgCatCd === lgCatCd) {
       return;
     }
 
     setCurrentLgCatCd(lgCatCd);
+    setCurrentLgCatNm(LgCatNm);
+    setCurrentCOUNT(COUNT);
   };
-
+  const handleCardClick = useCallback((item) => {
+    dispatch(
+      pushPanel(
+        {
+          name: panel_names.DETAIL_PANEL,
+          panelInfo: { patnrId: item.patnrId, prdtId: item.prdtId },
+        },
+        [dispatch, item]
+      )
+    );
+  });
+  const handleMoreCardClick = useCallback(() => {
+    dispatch(
+      pushPanel(
+        {
+          name: panel_names.CATEGORY_PANEL,
+          panelInfo: {
+            lgCatCd: currentLgCatCd,
+            lgCatNm: currentLgCatNm,
+            COUNT: currentCOUNT,
+          },
+          //lgCatCd, lgCatNm, COUNT
+        },
+        [dispatch, categoryInfos]
+      )
+    );
+  });
   useEffect(() => {
     if (categoryInfos && !currentLgCatCd) {
       const initialLgCatCd = categoryInfos[0].lgCatCd;
-
+      const initialLgCatNm = categoryInfos[0].lgCatNm;
+      const initialCOUNT = categoryInfos[0].COUNT;
       setCurrentLgCatCd(initialLgCatCd);
+      setCurrentLgCatNm(initialLgCatNm);
+      setCurrentCOUNT(initialCOUNT);
     }
   }, [categoryInfos]);
   const { getScrollTo, scrollLeft } = useScrollTo();
@@ -96,12 +131,16 @@ const SubCategory = () => {
                 productId={item.prdtId}
                 onFocus={index === 0 ? handleScrollReset : null}
                 onBlur={handleStopScrolling}
+                onClick={() => handleCardClick(item)}
               />
             );
           })}
 
         {drawChk && (
-          <SpottableComponent className={css.addItem}></SpottableComponent>
+          <SpottableComponent
+            className={css.addItem}
+            onClick={handleMoreCardClick}
+          ></SpottableComponent>
         )}
       </TScroller>
     </Container>