diff --git a/client/src/components/Text.tsx b/client/src/components/Text.tsx
index d76ce2b..6d9d70a 100644
--- a/client/src/components/Text.tsx
+++ b/client/src/components/Text.tsx
@@ -6,6 +6,7 @@ interface StyleProps {
   fontSize?: string;
   fontWeight?: string;
   fontFamily?: string;
+  margin?: string;
 }
 
 interface Props extends StyleProps {
@@ -17,11 +18,10 @@ const StyledText = styled.p<StyleProps>`
   font-family: ${({ fontFamily }) => fontFamily};
   font-size: ${({ fontSize }) => fontSize};
   font-weight: ${({ fontWeight }) => fontWeight};
+  margin: ${({ margin }) => margin};
 `;
 
 const Text: FC<Props> = ({ text, ...props }) => {
-  console.log(props);
-
   return <StyledText {...props}>{text}</StyledText>;
 };
 
diff --git a/client/src/container/TodoTitle.tsx b/client/src/container/TodoTitle.tsx
new file mode 100644
index 0000000..da443e1
--- /dev/null
+++ b/client/src/container/TodoTitle.tsx
@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import Text from '../components/Text';
+
+import { Todo } from '../core/todo/index';
+
+const TodoTitle = ({ activeTodo }: { activeTodo: Todo }): ReactElement => {
+  return <Text text={activeTodo.title} fontSize={'54px'} fontWeight={'700'} margin={'35px 0'} />;
+};
+export default TodoTitle;
diff --git a/client/src/page/Main.tsx b/client/src/page/Main.tsx
index d700a7a..d17a22c 100644
--- a/client/src/page/Main.tsx
+++ b/client/src/page/Main.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import TodoStatus from '../container/TodoStatus';
 import { mockTodosData } from '../util/GlobalState';
 import { ReactElement } from 'react';
+import TodoTitle from '../container/TodoTitle';
 
 const Wrapper = styled.div`
   height: 90vh;
@@ -18,6 +19,7 @@ const Main = (): ReactElement => {
   return (
     <Wrapper>
       <TodoStatus activeTodo={todosArray[0]} />
+      <TodoTitle activeTodo={todosArray[0]} />
     </Wrapper>
   );
 };
diff --git a/client/src/util/GlobalState.ts b/client/src/util/GlobalState.ts
index 9f8ce78..a6e7479 100644
--- a/client/src/util/GlobalState.ts
+++ b/client/src/util/GlobalState.ts
@@ -11,7 +11,7 @@ export const readWriteAtom = atom(
 export const mockTodosData = atom([
   {
     id: '0',
-    title: 'default title',
+    title: '다람쥐 헌 쳇바퀴에 올라타',
     content: 'default content',
     owner: 'default user',
     importance: 1,