diff --git a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
index 32910c76..d6b843ba 100644
--- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
+++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
@@ -1,17 +1,14 @@
-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 { SpotlightIds } from '../../utils/SpotlightIds';
-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");
+const SpottableComponent = Spottable("div");
 
 const TYPE_VERTICAL = "vertical";
 const TYPE_HORIZONTAL = "horizontal";
@@ -48,6 +45,7 @@ export default memo(function TItemCard({
         .map((item) => item.trim());
 
       let originalPrice, discountedPrice, discountRate;
+
       if (priceParts.length === 4) {
         [originalPrice, discountedPrice, , discountRate] = priceParts;
       } else if (priceParts.length === 2) {
diff --git a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
index 80047947..20702bc1 100644
--- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
+++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
@@ -5,7 +5,6 @@
 .horizontal {
   /* normal */
   display: flex;
-  gap: 20px;
   .size(@w: 660px, @h: 236px);
   padding: 18px;
   border-radius: 12px;
@@ -15,6 +14,7 @@
   // left contents (image contetns)
   > div:nth-child(1) {
     position: relative;
+    margin-right: 20px;
     color: @COLOR_WHITE;
 
     img {
@@ -60,11 +60,11 @@
 
     p {
       .flex(@justifyCenter: flex-start);
-      gap: 5px;
       .font(@fontFamily: @baseFontBold, @fontSize: 30px);
       color: @PRIMARY_COLOR_RED;
 
       span {
+        margin-left: 5px;
         .font(@fontFamily: @baseFont, @fontSize: 18px);
         color: @COLOR_GRAY04;
         text-decoration: line-through;
@@ -86,7 +86,6 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: 12px;
   .size(@w: 324px, @h: 438px);
   padding: 18px;
   border-radius: 12px;
@@ -97,6 +96,7 @@
   > div:nth-child(1) {
     position: relative;
     .size(@w: 288px, @h: 288px);
+    margin-bottom: 12px;
     color: @COLOR_WHITE;
 
     img {
@@ -129,10 +129,10 @@
   // bottom contents
   > div:nth-child(2) {
     .flex(@direction: column, @alignCenter: flex-start);
-    gap: 6px;
     flex-grow: 1;
 
     h3 {
+      margin-bottom: 6px;
       .font(@fontFamily: @baseFontBold, @fontSize: 24px);
       color: @COLOR_GRAY06;
       .elip(@clamp:2);
@@ -142,11 +142,11 @@
 
     p {
       .flex(@justifyCenter: flex-start);
-      gap: 5px;
       .font(@fontFamily: @baseFontBold, @fontSize: 30px);
       color: @PRIMARY_COLOR_RED;
       letter-spacing: -1px;
       span {
+        margin-left: 5px;
         .font(@fontFamily: @baseFont, @fontSize: 18px);
         color: @COLOR_GRAY04;
         text-decoration: line-through;