diff --git a/com.twin.app.shoptime/src/components/TButton/TButton.jsx b/com.twin.app.shoptime/src/components/TButton/TButton.jsx
index 80c0c218..e7b385d7 100644
--- a/com.twin.app.shoptime/src/components/TButton/TButton.jsx
+++ b/com.twin.app.shoptime/src/components/TButton/TButton.jsx
@@ -20,6 +20,8 @@ const TYPES = {
   terms: "terms",
   agree: "agree",
   popup: "popup",
+  oneDepthCategory: "oneDepthCategory",
+  twoDepthCategory: "twoDepthCategory",
 };
 
 const COLOR = {
diff --git a/com.twin.app.shoptime/src/components/TButton/TButton.module.less b/com.twin.app.shoptime/src/components/TButton/TButton.module.less
index 925f924b..d6612179 100644
--- a/com.twin.app.shoptime/src/components/TButton/TButton.module.less
+++ b/com.twin.app.shoptime/src/components/TButton/TButton.module.less
@@ -143,4 +143,68 @@
       color: @COLOR_WHITE;
     }
   }
+
+  &.oneDepthCategory {
+    position: relative;
+    min-width: 180px;
+    height: 84px;
+    padding: 24px 30px;
+    background-color: @COLOR_WHITE;
+    border-radius: 42px;
+    .font(@fontFamily: @baseFontBold, @fontSize: 30px);
+    line-height: normal;
+    color: @COLOR_GRAY08;
+
+    &:focus {
+      color: @PRIMARY_COLOR_RED;
+      &::after {
+        .focused(@boxShadow: 0, @borderRadius: 42px);
+      }
+    }
+
+    &.selected {
+      background-color: @SELECTED_COLOR_RED;
+      color: @COLOR_WHITE;
+
+      &:focus {
+        &::after {
+          all: unset;
+        }
+      }
+    }
+  }
+
+  &.twoDepthCategory {
+    position: relative;
+    .flex();
+    width: 300px !important;
+    height: 72px;
+    padding: 18px 30px;
+    background-color: @COLOR_WHITE;
+    border-radius: 12px;
+    .font(@fontFamily: @baseFont, @fontSize: 30px);
+    color: @COLOR_GRAY08;
+
+    > div {
+      width: 240px;
+    }
+
+    &:focus {
+      color: @PRIMARY_COLOR_RED;
+      &::after {
+        .focused(@boxShadow: 0, @borderRadius: 12px);
+      }
+    }
+
+    &.selected {
+      background-color: @COLOR_NAVY;
+      color: @COLOR_WHITE;
+
+      &:focus {
+        &::after {
+          all: unset;
+        }
+      }
+    }
+  }
 }