diff --git a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
index dcb81b15..c358fc8d 100644
--- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
+++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
@@ -1,18 +1,27 @@
-import React, { memo, useCallback, useEffect, useState } from "react";
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 
-import classNames from "classnames";
+import classNames from 'classnames';
 
-import Spottable from "@enact/spotlight/Spottable";
+import Spottable from '@enact/spotlight/Spottable';
 
-import defaultLogoImg from "../../../assets/images/ic-tab-partners-default@3x.png";
-import defaultimgHorizontal from "../../../assets/images/img-thumb-empty-hor@3x.png";
-import defaultImageItem from "../../../assets/images/img-thumb-empty-product@3x.png";
-import defaultimgVertical from "../../../assets/images/img-thumb-empty-ver@3x.png";
-import IcLiveShow from "../../../assets/images/tag/tag-liveshow.png";
-import usePriceInfo from "../../hooks/usePriceInfo";
-import { $L } from "../../utils/helperMethods";
-import CustomImage from "../CustomImage/CustomImage";
-import css from "./TItemCard.module.less";
+import defaultLogoImg
+  from '../../../assets/images/ic-tab-partners-default@3x.png';
+import defaultimgHorizontal
+  from '../../../assets/images/img-thumb-empty-hor@3x.png';
+import defaultImageItem
+  from '../../../assets/images/img-thumb-empty-product@3x.png';
+import defaultimgVertical
+  from '../../../assets/images/img-thumb-empty-ver@3x.png';
+import IcLiveShow from '../../../assets/images/tag/tag-liveshow.png';
+import usePriceInfo from '../../hooks/usePriceInfo';
+import { $L } from '../../utils/helperMethods';
+import CustomImage from '../CustomImage/CustomImage';
+import css from './TItemCard.module.less';
 
 const SpottableComponent = Spottable("div");
 
@@ -185,8 +194,12 @@ export default memo(function TItemCard({
             <CustomImage src={logo} fallbackSrc={defaultLogoImg} />
           </div>
         )}
-        <h3 className={css.title}>{productName}</h3>
-        {catNm !== null && <h4 className={css.hstmNmTitle}>{catNm}</h4>}
+
+        <h3 className={css.title}>
+          {catNm !== null && <p className={css.hstmNmTitle}>{catNm}</p>}
+          <h3 className={css.productNameTitle}>{productName}</h3>
+        </h3>
+
         {priceInfo ? (
           <p className={css.priceInfo}>
             {parseFloat(originalPrice.replace("$", "")) === 0 ? (
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 197c45ce..2d708aab 100644
--- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
+++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
@@ -157,6 +157,26 @@
       overflow: hidden;
     }
 
+    > h3 {
+      height: 64px;
+      font-weight: bold;
+      line-height: 1.33;
+      font-size: 24px;
+      color: @COLOR_GRAY06;
+      .elip(@clamp:2);
+
+      overflow: hidden;
+      > h3 {
+        height: 64px;
+        font-weight: bold;
+        line-height: 1.33;
+        font-size: 24px;
+        color: @COLOR_GRAY06;
+        .elip(@clamp:2);
+
+        overflow: hidden;
+      }
+    }
     > p {
       font-weight: bold;
       font-size: 30px;
@@ -280,31 +300,38 @@
       .title {
         .size(@w: 438px, @h: 64px);
         margin-left: 10px;
-        align-self: center;
-        font-weight: bold;
-        line-height: 1.33;
-        .elip(@clamp: 2);
+
+        .productNameTitle {
+          align-self: center;
+          font-weight: bold;
+          line-height: 1.33;
+          .elip(@clamp: 2);
+        }
       }
       &.hstNmWrap {
         margin-top: 11px;
 
         .size(@w: 508px, @h: 107px);
+
         .title {
-          margin-left: 10px;
-          .size(@w: 438px, @h: 60px);
-          align-self: flex-start;
-          font-weight: bold;
-          line-height: 30px;
-          .elip(@clamp: 2);
-        }
-        .hstmNmTitle {
-          margin: 5px 0 0 70px;
-          .size(@w: 438px, @h: 26px);
-          color: #767676;
-          font-size: 22px;
-          line-height: 1.18;
-          .elip(@clamp: 1);
-          font-weight: normal;
+          margin-left: 15px;
+          .size(@w: 430px, @h: 100px);
+          .productNameTitle {
+            .size(@w: 430px, @h: 60px);
+            align-self: flex-start;
+            font-weight: bold;
+            line-height: 30px;
+            .elip(@clamp: 2);
+          }
+          .hstmNmTitle {
+            margin: 5px 0 5px 0px;
+            .size(@w: 430px, @h: 26px);
+            color: #767676;
+            font-size: 22px;
+            line-height: 1.18;
+            .elip(@clamp: 1);
+            font-weight: normal;
+          }
         }
       }
     }
@@ -361,18 +388,21 @@
       }
       .title {
         margin-top: 8px;
-        width: 270px;
-        .elip(@clamp: 9);
-        font-weight: bold;
-        line-height: 32px;
-      }
-      .hstmNmTitle {
-        margin-top: 5px;
-        .size(@w: 270px, @h: 30px);
-        color: #767676;
-        font-size: 22px;
-        .elip(@clamp: 1);
-        font-weight: normal;
+
+        .hstmNmTitle {
+          margin-top: 5px;
+          .size(@w: 270px, @h: 30px);
+          color: #767676;
+          font-size: 22px;
+          .elip(@clamp: 1);
+          font-weight: normal;
+        }
+        .productNameTitle {
+          width: 270px;
+          .elip(@clamp: 9);
+          font-weight: bold;
+          line-height: 32px;
+        }
       }
     }
   }