diff --git a/com.twin.app.shoptime/src/components/THeader/THeader.jsx b/com.twin.app.shoptime/src/components/THeader/THeader.jsx
new file mode 100644
index 00000000..a2a4695e
--- /dev/null
+++ b/com.twin.app.shoptime/src/components/THeader/THeader.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+import css from "./THeader.module.less";
+import classNames from "classnames";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused" },
+  "div"
+);
+
+export default function THeader({ title, className }) {
+  return (
+    <Container className={classNames(css.tHeader, className)}>
+      <div className={css.title}>{title}</div>
+    </Container>
+  );
+}
diff --git a/com.twin.app.shoptime/src/components/THeader/THeader.module.less b/com.twin.app.shoptime/src/components/THeader/THeader.module.less
new file mode 100644
index 00000000..b2d89827
--- /dev/null
+++ b/com.twin.app.shoptime/src/components/THeader/THeader.module.less
@@ -0,0 +1,18 @@
+@import "../../style/CommonStyle.module.less";
+@import "../../style/utils.module.less";
+
+.tHeader {
+  width: 100%;
+  height: 90px;
+  color: #222;
+  font-family: @baseFontBold;
+  background-color: #fff;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  .title {
+    font-size: 42px;
+    margin-left: 61px;
+  }
+}
diff --git a/com.twin.app.shoptime/src/components/THeader/package.json b/com.twin.app.shoptime/src/components/THeader/package.json
new file mode 100644
index 00000000..21a53e4c
--- /dev/null
+++ b/com.twin.app.shoptime/src/components/THeader/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "THeader.jsx",
+  "styles": [
+    "THeader.module.less"
+  ]
+}
\ No newline at end of file