diff --git a/com.twin.app.shoptime/src/components/SectionTitle/SectionTitle.jsx b/com.twin.app.shoptime/src/components/SectionTitle/SectionTitle.jsx
new file mode 100644
index 00000000..994392a6
--- /dev/null
+++ b/com.twin.app.shoptime/src/components/SectionTitle/SectionTitle.jsx
@@ -0,0 +1,17 @@
+import React, { memo } from "react";
+
+import classNames from "classnames";
+
+import css from "./SectionTitle.module.less";
+
+export default memo(function SectionTitle({ className, title, ...rest }) {
+  return (
+    <h2
+      className={classNames(className ? className : css.sectionTitle)}
+      {...rest}
+    >
+      <span />
+      {title}
+    </h2>
+  );
+});
diff --git a/com.twin.app.shoptime/src/components/SectionTitle/SectionTitle.module.less b/com.twin.app.shoptime/src/components/SectionTitle/SectionTitle.module.less
new file mode 100644
index 00000000..27706026
--- /dev/null
+++ b/com.twin.app.shoptime/src/components/SectionTitle/SectionTitle.module.less
@@ -0,0 +1,15 @@
+@import "../../style/CommonStyle.module.less";
+@import "../../style/utils.module.less";
+
+.sectionTitle {
+  .flex(@justifyCenter: flex-start);
+  gap: 12px;
+  .font(@fontFamily: @baseFontBold, @fontSize: 42px);
+  color: @COLOR_GRAY08;
+
+  span {
+    display: inline-block;
+    .size(@w: 6px, @h: 36px);
+    background-color: @PRIMARY_COLOR_RED;
+  }
+}
diff --git a/com.twin.app.shoptime/src/components/SectionTitle/package.json b/com.twin.app.shoptime/src/components/SectionTitle/package.json
new file mode 100644
index 00000000..90dfcdc0
--- /dev/null
+++ b/com.twin.app.shoptime/src/components/SectionTitle/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "SectionTitle.jsx",
+  "styles": [
+    "SectionTitle.module.less"
+  ]
+}