diff --git a/src/routes/Topic/Create/BSide/BTopicCreate.styles.tsx b/src/routes/Topic/Create/BSide/BTopicCreate.styles.tsx
new file mode 100644
index 0000000..12f759a
--- /dev/null
+++ b/src/routes/Topic/Create/BSide/BTopicCreate.styles.tsx
@@ -0,0 +1,48 @@
+import { styled } from 'styled-components';
+
+import { colors } from '@styles/theme';
+
+export const Container = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  background-color: ${colors.navy};
+`;
+
+export const PageControllerContainer = styled.div`
+  position: absolute;
+  bottom: 66px;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateX(-50%);
+`;
+
+export const PageController = styled.div<{ currentStage: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  color: ${(props) => (props.currentStage ? colors.purple : colors.navy2)};
+  text-align: center;
+  background-color: ${colors.navy};
+  border: 2px solid ${(props) => (props.currentStage ? colors.purple : colors.navy2)};
+  border-radius: 50%;
+`;
+
+export const PageControllerLine = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 13px;
+  height: 0;
+  text-align: center;
+  background-color: ${colors.navy};
+  border: 1px solid ${colors.navy2};
+`;
diff --git a/src/routes/Topic/Create/BSide/BTopicCreate.tsx b/src/routes/Topic/Create/BSide/BTopicCreate.tsx
new file mode 100644
index 0000000..3cb8311
--- /dev/null
+++ b/src/routes/Topic/Create/BSide/BTopicCreate.tsx
@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { CONFIG, INPUT_TYPE } from 'src/constants/form';
+
+import {
+  Container,
+  PageController,
+  PageControllerContainer,
+  PageControllerLine,
+} from './BTopicCreate.styles';
+import BTopicCreateStep1 from './BTopicCreateStep1';
+import BTopicCreateStep2 from './BTopicCreateStep2';
+
+interface TopicCreateDTO {
+  topicTitle: string;
+  ATopic: string;
+  BTopic: string;
+  topicCategory: string;
+}
+
+const BTopicCreate = () => {
+  const navigate = useNavigate();
+  const methods = useForm<TopicCreateDTO>({ mode: 'onChange' });
+  const [searchParams] = useSearchParams();
+  const step = searchParams.get('step');
+
+  const navigateToNextStep = () => {
+    navigate('/topics/create/B?step=2');
+  };
+
+  if (step === null) {
+    return;
+  }
+
+  const Step =
+    step === '1' ? (
+      <BTopicCreateStep1 />
+    ) : (
+      <BTopicCreateStep2 topicTitle="툴 어떤게 좋을까요?" topicCategory="디자인" />
+    );
+
+  return (
+    <FormProvider {...methods}>
+      <Container>
+        {Step}
+        <PageControllerContainer>
+          <PageController currentStage={Number(step) === 1}>1</PageController>
+          <PageControllerLine />
+          <PageController onClick={navigateToNextStep} currentStage={Number(step) === 2}>
+            2
+          </PageController>
+        </PageControllerContainer>
+      </Container>
+    </FormProvider>
+  );
+};
+
+export default BTopicCreate;