diff --git a/com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx b/com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx
index 33e3ac01..bebbc8a4 100644
--- a/com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx
+++ b/com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback } from "react";
 
 import classNames from "classnames";
 
@@ -15,17 +15,36 @@ export default function TDropDown({
   color,
   selectedIndex,
   scrollTop,
+  onOpen,
+  onClose,
   ...rest
 }) {
   const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
-
+  const _onOpen = useCallback(() => {
+    if (onOpen) {
+      onOpen();
+    }
+  }, [onOpen]);
+  const _onClose = useCallback(() => {
+    if (onClose) {
+      onClose();
+    }
+  }, [onClose]);
   return (
     <DropDown
-      className={classNames(css.tDropdown, css[size], css[color], className)}
+      className={classNames(
+        css.tDropdown,
+        css[size],
+        css[color],
+        selectedIndex && css.selected,
+        className
+      )}
       direction={direction}
       selected={selectedIndex}
       onFocus={handleScrollReset}
       onBlur={handleStopScrolling}
+      onOpen={_onOpen}
+      onClose={_onClose}
       {...rest}
     >
       {children}
diff --git a/com.twin.app.shoptime/src/components/TDropDown/TDropDown.module.less b/com.twin.app.shoptime/src/components/TDropDown/TDropDown.module.less
index 04f79a6f..73d682ea 100644
--- a/com.twin.app.shoptime/src/components/TDropDown/TDropDown.module.less
+++ b/com.twin.app.shoptime/src/components/TDropDown/TDropDown.module.less
@@ -31,6 +31,9 @@
     &:focus {
       background-color: @PRIMARY_COLOR_RED !important;
     }
+    &.selected {
+      background-color: @PRIMARY_COLOR_RED !important;
+    }
   }
 }
 
@@ -63,7 +66,10 @@
         > div > div {
           > div {
             padding: 0 15px !important;
-
+            > div[aria-checked="true"] {
+              background-color: @SELECTED_COLOR_RED !important;
+              color: @COLOR_WHITE !important;
+            }
             &:focus {
               background-color: var(
                 --list-item-focus-background-color
diff --git a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.jsx b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.jsx
index 6477d98b..4755191d 100644
--- a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.jsx
+++ b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.jsx
@@ -4,51 +4,47 @@ import React, {
   useMemo,
   useRef,
   useState,
-} from 'react';
+} 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 { setContainerLastFocusedElement } from '@enact/spotlight/src/container';
+import { Job } from "@enact/core/util";
+import Spotlight from "@enact/spotlight";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";
 
 import {
   clearSubCategory,
   continueGetSubCategory,
   getSubCategory,
-} from '../../actions/mainActions';
-import { updatePanel } from '../../actions/panelActions';
-import SectionTitle from '../../components/SectionTitle/SectionTitle';
-import TBody from '../../components/TBody/TBody';
-import TButton, { TYPES } from '../../components/TButton/TButton';
-import TButtonTab, { LIST_TYPE } from '../../components/TButtonTab/TButtonTab';
-import TDropDown from '../../components/TDropDown/TDropDown';
-import THeader from '../../components/THeader/THeader';
-import TPanel from '../../components/TPanel/TPanel';
-import useLogService from '../../hooks/useLogService';
-import usePrevious from '../../hooks/usePrevious';
-import useScrollTo from '../../hooks/useScrollTo';
+} from "../../actions/mainActions";
+import { updatePanel } from "../../actions/panelActions";
+import SectionTitle from "../../components/SectionTitle/SectionTitle";
+import TBody from "../../components/TBody/TBody";
+import TButton, { TYPES } from "../../components/TButton/TButton";
+import TButtonTab, { LIST_TYPE } from "../../components/TButtonTab/TButtonTab";
+import TDropDown from "../../components/TDropDown/TDropDown";
+import THeader from "../../components/THeader/THeader";
+import TPanel from "../../components/TPanel/TPanel";
+import useLogService from "../../hooks/useLogService";
+import usePrevious from "../../hooks/usePrevious";
+import useScrollTo from "../../hooks/useScrollTo";
 import {
   CATEGORY_DATA_MAX_RESULTS_LIMIT,
   LOG_MENU,
   LOG_TP_NO,
   panel_names,
-} from '../../utils/Config';
+} from "../../utils/Config";
 import {
   $L,
   getSpottableDescendants,
   isElementInContainer,
-} from '../../utils/helperMethods';
-import { SpotlightIds } from '../../utils/SpotlightIds';
-import ItemContents from './CategoryContents/ItemContents/ItemContents';
-import ShowContents from './CategoryContents/ShowContents/ShowContents';
-import css from './CategoryPanel.module.less';
+} from "../../utils/helperMethods";
+import { SpotlightIds } from "../../utils/SpotlightIds";
+import ItemContents from "./CategoryContents/ItemContents/ItemContents";
+import ShowContents from "./CategoryContents/ShowContents/ShowContents";
+import css from "./CategoryPanel.module.less";
 
 const TabContainer = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
@@ -342,6 +338,15 @@ export default function CategoryPanel({ panelInfo, isOnTop }) {
     }
   }, [categoryItemInfos, categoryShowInfos, tab]);
 
+  useEffect(() => {
+    const c = document.getElementById("floatLayer");
+
+    c.classList.add("category_dropdown");
+    return () => {
+      c.classList.remove("category_dropdown");
+    };
+  }, []);
+
   return (
     <TPanel>
       <THeader title="CATEGORY" />
diff --git a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.module.less b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.module.less
index c47381c3..1027bbf6 100644
--- a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.module.less
+++ b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.module.less
@@ -36,7 +36,7 @@
   }
 }
 
-[id="floatLayer"] {
+[class="category_dropdown"] {
   > div > div[id] > div:nth-child(2) {
     -webkit-filter: none !important;
     filter: none !important;
diff --git a/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx b/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx
index ae92634a..d7abfcad 100644
--- a/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx
@@ -1,36 +1,33 @@
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import { useDispatch, useSelector } from "react-redux";
+
+import { Job } from "@enact/core/util";
+import Spotlight from "@enact/spotlight";
 
 import {
   getMyInfoCheckoutInfo,
   getTaxInfos,
-} from '../../actions/checkoutActions';
-import { changeAppStatus } from '../../actions/commonActions';
-import { getShoptimeTerms } from '../../actions/empActions';
-import { popPanel } from '../../actions/panelActions';
-import TBody from '../../components/TBody/TBody';
-import TFullPopup from '../../components/TFullPopup/TFullPopup';
-import THeader from '../../components/THeader/THeader';
-import TPanel from '../../components/TPanel/TPanel';
-import TScroller from '../../components/TScroller/TScroller';
-import { $L } from '../../utils/helperMethods';
-import css from './CheckOutPanel.module.less';
-import CheckoutQRCode from './components/CheckoutQRCode';
-import CheckOutTerms from './components/CheckOutTerms';
-import PinCode from './components/PinCode';
-import PinCodeInput from './components/PinCodeInput';
-import FixedSideBar from './container/FixedSideBar';
-import InformationContainer from './container/InformationContainer';
-import OrderItemsSideBar from './container/OrderItemsSideBar';
-import SummaryContainer from './container/SummaryCotainer';
+} from "../../actions/checkoutActions";
+import { changeAppStatus } from "../../actions/commonActions";
+import { getShoptimeTerms } from "../../actions/empActions";
+import { popPanel } from "../../actions/panelActions";
+import TBody from "../../components/TBody/TBody";
+import TFullPopup from "../../components/TFullPopup/TFullPopup";
+import THeader from "../../components/THeader/THeader";
+import TPanel from "../../components/TPanel/TPanel";
+import TScroller from "../../components/TScroller/TScroller";
+import useScrollTo from "../../hooks/useScrollTo";
+import { $L } from "../../utils/helperMethods";
+import css from "./CheckOutPanel.module.less";
+import CheckoutQRCode from "./components/CheckoutQRCode";
+import CheckOutTerms from "./components/CheckOutTerms";
+import PinCode from "./components/PinCode";
+import PinCodeInput from "./components/PinCodeInput";
+import FixedSideBar from "./container/FixedSideBar";
+import InformationContainer from "./container/InformationContainer";
+import OrderItemsSideBar from "./container/OrderItemsSideBar";
+import SummaryContainer from "./container/SummaryCotainer";
 
 export default function CheckOutPanel() {
   const dispatch = useDispatch();
@@ -55,6 +52,10 @@ export default function CheckOutPanel() {
   const [offerSideBarOpen, setOfferSideBarOpen] = useState(false);
   const [placeOrderPopup, setPlaceOrderPopup] = useState(false);
 
+  const { getScrollTo: getScrollToBody, scrollTop: scrollTopBody } =
+    useScrollTo();
+  const spotJob = useRef(new Job((func) => func(), 1000));
+
   useEffect(() => {
     dispatch(getShoptimeTerms());
 
@@ -96,6 +97,15 @@ export default function CheckOutPanel() {
     );
   }, [dispatch, infoForCheckoutData, productData]);
 
+  useEffect(() => {
+    spotJob.current.start(() => {
+      Spotlight.focus("spotlightId_backBtn");
+    });
+    return () => {
+      spotJob.current.stop();
+    };
+  }, []);
+
   const onBackClick = useCallback(() => {
     dispatch(popPanel());
   }, [dispatch]);
@@ -114,7 +124,7 @@ export default function CheckOutPanel() {
         isTabActivated={false}
         spotlightDisabled={orderSideBarOpen || offerSideBarOpen}
       >
-        <TBody className={css.tbody}>
+        <TBody className={css.tbody} cbScrollTo={getScrollToBody}>
           <THeader
             className={css.theader}
             title="CHECKOUT"
@@ -126,6 +136,7 @@ export default function CheckOutPanel() {
             <InformationContainer
               toggleOrderSideBar={toggleOrderSideBar}
               toggleOfferSideBar={toggleOfferSideBar}
+              scrollTopBody={scrollTopBody}
             />
           </div>
           {/* <CheckoutQRCode open={false} /> */}
diff --git a/com.twin.app.shoptime/src/views/CheckOutPanel/components/OffersPromotionItemCard.jsx b/com.twin.app.shoptime/src/views/CheckOutPanel/components/OffersPromotionItemCard.jsx
index 5a882efe..5e1805de 100644
--- a/com.twin.app.shoptime/src/views/CheckOutPanel/components/OffersPromotionItemCard.jsx
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/components/OffersPromotionItemCard.jsx
@@ -1,20 +1,14 @@
-import React, {
-  memo,
-  useCallback,
-  useState,
-} from 'react';
+import React, { memo, useCallback, useEffect, useState } from "react";
 
-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
+import classNames from "classnames";
 
-import CustomImage from '../../../components/CustomImage/CustomImage';
-import TDropDown from '../../../components/TDropDown/TDropDown';
-import {
-  $L,
-  scaleW,
-} from '../../../utils/helperMethods';
-import css from './OffersPromotionItemCard.module.less';
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
+
+import CustomImage from "../../../components/CustomImage/CustomImage";
+import TDropDown from "../../../components/TDropDown/TDropDown";
+import { $L, scaleW } from "../../../utils/helperMethods";
+import css from "./OffersPromotionItemCard.module.less";
 
 const OffersPromotionItemContainer = SpotlightContainerDecorator("div");
 
@@ -43,7 +37,7 @@ export default memo(function OffersPromotionItemCard({
   const [selectedCoupon, setSelectedCoupon] = useState(null);
   const [dcPrice, setDcPrice] = useState(price3 || price2);
   const [selectedIndex, setSelectedIndex] = useState(-1);
-
+  const [openChk, setOpenChk] = useState(false);
   const couponSetting = useCallback(
     (info, param) => {
       const itemPrice = price3 ? Number(price3) : Number(price2);
@@ -88,6 +82,21 @@ export default memo(function OffersPromotionItemCard({
     console.log("chw", selectedCoupon, dcPrice);
   };
 
+  const dropDownOpen = useCallback(() => {
+    setOpenChk(true);
+  }, []);
+  const dropDownClose = useCallback(() => {
+    setOpenChk(false);
+  }, []);
+
+  useEffect(() => {
+    const c = document.getElementById("floatLayer");
+
+    c.classList.add("checkout_dropdown");
+    return () => {
+      c.classList.remove("checkout_dropdown");
+    };
+  }, []);
   return (
     <OffersPromotionItemContainer className={css.itemContainer}>
       <div className={css.itemHeader}>
@@ -143,10 +152,15 @@ export default memo(function OffersPromotionItemCard({
       </div>
       <div className={css.dropDownWrap}>
         <TDropDown
-          className={css.dropDown}
+          className={classNames(
+            css.dropDown,
+            openChk === true ? css.selected : null
+          )}
           width="x-large"
           selectedIndex={selectedIndex}
           onSelect={handleCouponSelect}
+          onOpen={dropDownOpen}
+          onClose={dropDownClose}
         >
           {prdtCoupon.map((item) => item.cpnTtl)}
         </TDropDown>
diff --git a/com.twin.app.shoptime/src/views/CheckOutPanel/components/OffersPromotionItemCard.module.less b/com.twin.app.shoptime/src/views/CheckOutPanel/components/OffersPromotionItemCard.module.less
index 9696973d..bf1db91a 100644
--- a/com.twin.app.shoptime/src/views/CheckOutPanel/components/OffersPromotionItemCard.module.less
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/components/OffersPromotionItemCard.module.less
@@ -88,4 +88,112 @@
       }
     }
   }
+  > .dropDownWrap {
+    width: 600px;
+    margin: 10px auto 0;
+    > div.dropDown {
+      width: 100%;
+      &.selected {
+        > div {
+          > div {
+            background-color: @COLOR_WHITE !important;
+            color: @PRIMARY_COLOR_RED !important;
+            border: 1px solid @PRIMARY_COLOR_RED !important;
+            box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
+            > div:nth-child(2) {
+              > div:first-child {
+                color: @PRIMARY_COLOR_RED !important;
+              }
+            }
+          }
+        }
+      }
+
+      > div {
+        width: 100%;
+
+        > div {
+          width: 100% !important;
+          background-color: @COLOR_WHITE !important;
+          color: @COLOR_GRAY03 !important;
+          border: 1px solid @COLOR_GRAY02;
+          > div:nth-child(2) {
+            > div:first-child {
+              color: @COLOR_GRAY03 !important;
+            }
+          }
+          &:focus,
+          &:active {
+            background-color: @COLOR_WHITE !important;
+            color: @PRIMARY_COLOR_RED !important;
+            border: 1px solid @PRIMARY_COLOR_RED !important;
+            box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
+            > div:nth-child(2) {
+              > div:first-child {
+                color: @PRIMARY_COLOR_RED !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+[class="checkout_dropdown"] {
+  > div > div[id] > div:nth-child(2) {
+    -webkit-filter: none !important;
+    filter: none !important;
+    > div:nth-child(1) {
+      height: 123px !important;
+      width: 600px !important;
+      margin-top: 0 !important;
+      border-radius: 0 0 6px 6px !important;
+      background-color: @COLOR_GRAY03 !important;
+      overflow: hidden;
+      > div {
+        width: 600px !important;
+        height: 123px !important;
+        border-radius: 0 !important;
+        padding-top: 0 !important;
+        > div {
+          > div {
+            > div {
+              padding: 0 !important;
+
+              &:first-child {
+                > div:nth-child(1) {
+                  border-radius: 6px 6px 0 0 !important;
+                  overflow: hidden;
+                  &:focus {
+                    border-radius: 0 !important;
+                  }
+                  > div:first-child {
+                    will-change: unset !important;
+                  }
+                }
+              }
+              &:last-child {
+                > div:nth-child(1) {
+                  border-radius: 0 0 6px 6px !important;
+                  overflow: hidden;
+                  &:focus {
+                    border-radius: 0 0 6px 6px !important;
+                  }
+                }
+              }
+              > div:nth-child(1) {
+                height: 61px !important;
+                padding: 20px 19px !important;
+                &:focus {
+                  background-color: @PRIMARY_COLOR_RED !important;
+                  color: @COLOR_WHITE !important;
+                  box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.jsx b/com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.jsx
index 688bbf62..59219476 100644
--- a/com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.jsx
+++ b/com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.jsx
@@ -1,21 +1,19 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from "react";
 
-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import { useDispatch, useSelector } from "react-redux";
 
-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
 
-import TButton from '../../../components/TButton/TButton';
-import { $L } from '../../../utils/helperMethods';
-import BillingAddressCard from '../components/BillingAddressCard';
-import PaymentCard from '../components/PaymentCard';
-import ShippingAddressCard from '../components/ShippingAddressCard';
-import Subject from '../components/Subject';
-import css from './InformationContainer.module.less';
+import TButton from "../../../components/TButton/TButton";
+import useScrollTo from "../../../hooks/useScrollTo";
+import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance";
+import { $L } from "../../../utils/helperMethods";
+import BillingAddressCard from "../components/BillingAddressCard";
+import PaymentCard from "../components/PaymentCard";
+import ShippingAddressCard from "../components/ShippingAddressCard";
+import Subject from "../components/Subject";
+import css from "./InformationContainer.module.less";
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
@@ -27,19 +25,42 @@ const BtnSpot = Spottable("p");
 export default function InformationContainer({
   toggleOfferSideBar,
   toggleOrderSideBar,
+  scrollTopBody,
 }) {
-  const dispatch = useDispatch();
-
   const checkoutData = useSelector((state) => state.checkout?.checkoutData);
+  const { cursorVisible } = useSelector((state) => state.common.appStatus);
 
-  const handleButtonClick = useCallback(() => {}, []);
+  const { getScrollTo } = useScrollTo();
+  const { scrollTopByDistance } = useScrollTopByDistance();
+
+  const handleFocus = (e) => {
+    const test = e;
+    const target = e.currentTarget.getAttribute("data-spotlight-id");
+
+    const targetValue = '[data-spotlight-id="' + target + '"]';
+    if (cursorVisible) {
+      return;
+    }
+    scrollTopByDistance(
+      `[data-marker="scroll-marker"]`,
+      targetValue,
+      scrollTopBody,
+      40
+    );
+  };
 
   return (
     <>
       <Container className={css.container}>
+        <div data-marker="scroll-marker" />
         <Subject title="ORDER ITEMS" />
         <div className={css.markBtn}>
-          <BtnSpot onClick={toggleOrderSideBar}>
+          <BtnSpot
+            onClick={toggleOrderSideBar}
+            scrollTopBody={scrollTopBody}
+            spotlightId="checkout-btn-first"
+            onFocus={handleFocus}
+          >
             {checkoutData.productList?.length} ITEMS
           </BtnSpot>
         </div>
@@ -61,7 +82,14 @@ export default function InformationContainer({
         <div className={css.listBox}>
           <Subject title="OFFERS & PROMOTION" />
           <div className={css.markBtn}>
-            <BtnSpot onClick={toggleOfferSideBar}>$12.60</BtnSpot>
+            <BtnSpot
+              onClick={toggleOfferSideBar}
+              scrollTopBody={scrollTopBody}
+              spotlightId="checkout-btn-fifth"
+              onFocus={handleFocus}
+            >
+              $12.60
+            </BtnSpot>
           </div>
         </div>
       </Container>