diff --git a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
index 85e651d8..32910c76 100644
--- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
+++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
@@ -1,11 +1,15 @@
-import React, { memo, useCallback } from "react";
+import React, {
+  memo,
+  useCallback,
+} from 'react';
 
-import classNames from "classnames";
+import classNames from 'classnames';
 
-import Spottable from "@enact/spotlight/Spottable";
+import Spottable from '@enact/spotlight/Spottable';
 
-import { $L } from "../../utils/helperMethods";
-import css from "./TItemCard.module.less";
+import { $L } from '../../utils/helperMethods';
+import { SpotlightIds } from '../../utils/SpotlightIds';
+import css from './TItemCard.module.less';
 
 const SpottableComponent = Spottable("li");
 
@@ -71,6 +75,7 @@ export default memo(function TItemCard({
         type === TYPE_VERTICAL && css.vertical
       )}
       onClick={() => handleClick(productId)}
+      spotlightId={SpotlightIds.TITEM_CARD + productId}
     >
       <div>
         <img src={imageSource} alt={imageAlt} />
diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less
index 2002960d..b15efbd9 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less
@@ -8,7 +8,8 @@
   left: 0;
   top: 0;
   display: flex;
-  
+  // display: none;
+
   &.hide {
     width: auto;
   }
@@ -22,12 +23,10 @@
   left: 0;
   z-index: 1;
 
-
   &.hide {
     width: auto;
     z-index: 0;
   }
-  
 }
 
 .tabWrap {
@@ -42,22 +41,20 @@
   z-index: 1;
   flex-grow: 0;
   transition: width 0.5s ease;
-  
+
   > img {
     width: 54px;
     height: 54px;
-    margin: -40px 24px 84px 42px
-
+    margin: -40px 24px 84px 42px;
   }
-  
+
   &.expanded {
     width: 402px;
-    
+
     > img {
       width: 234px;
       height: 54px;
     }
-  
   }
 
   &.secondDepthLayout {
@@ -68,9 +65,7 @@
     padding-bottom: unset;
     padding-top: 71px;
     z-index: 0;
-     justify-content: flex-start;
-
-
+    justify-content: flex-start;
   }
   &.extraArea {
     flex-grow: 1;
@@ -80,9 +75,4 @@
   &.hide {
     width: 0;
   }
-
-
- 
 }
-
-
diff --git a/com.twin.app.shoptime/src/components/TopButton/TopButton.jsx b/com.twin.app.shoptime/src/components/TopButton/TopButton.jsx
new file mode 100644
index 00000000..9a18180e
--- /dev/null
+++ b/com.twin.app.shoptime/src/components/TopButton/TopButton.jsx
@@ -0,0 +1,27 @@
+import React, {
+  memo,
+  useCallback,
+} from 'react';
+
+import Spotlight from '@enact/spotlight';
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './TopButton.module.less';
+
+const SpottableComponent = Spottable("button");
+
+export default memo(function TopButton({ className, targetId, ...rest }) {
+  const handleClick = useCallback(() => {
+    targetId && Spotlight.focus(targetId);
+  }, [targetId]);
+
+  return (
+    <div className={css.container}>
+      <SpottableComponent
+        className={className && className}
+        onClick={handleClick}
+        {...rest}
+      />
+    </div>
+  );
+});
diff --git a/com.twin.app.shoptime/src/components/TopButton/TopButton.module.less b/com.twin.app.shoptime/src/components/TopButton/TopButton.module.less
new file mode 100644
index 00000000..85ca2b90
--- /dev/null
+++ b/com.twin.app.shoptime/src/components/TopButton/TopButton.module.less
@@ -0,0 +1,19 @@
+@import "../../style/CommonStyle.module.less";
+@import "../../style/utils.module.less";
+
+.container {
+  .flex();
+  width: 100%;
+
+  /* normal */
+  button {
+    .size(@w: 120px, @h: 120px);
+    margin: 60px 0;
+    background-image: url("../../../assets/button/120x120/btn-top-nor.svg");
+
+    /* focuesd */
+    &:focus-within {
+      background-image: url("../../../assets/button/120x120/btn-top-foc.svg");
+    }
+  }
+}
diff --git a/com.twin.app.shoptime/src/components/TopButton/package.json b/com.twin.app.shoptime/src/components/TopButton/package.json
new file mode 100644
index 00000000..f68161fd
--- /dev/null
+++ b/com.twin.app.shoptime/src/components/TopButton/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "TopButton.jsx",
+  "styles": [
+    "TopButton.module.less"
+  ]
+}