diff --git a/client/src/App.tsx b/client/src/App.tsx
index 19af313..c11f7d0 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -2,11 +2,14 @@ import { ReactElement } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { Provider } from 'jotai';
 import styled from 'styled-components';
+import { ToastContainer } from 'react-toastify';
 
 import Header from './container/Header';
 import Menubar from './container/Menubar';
-import Main from '@page/Main';
+
 import Todos from '@page/Todos';
+import Main from './page/Main';
+import OverLay from '@components/OverLay';
 
 const Wrapper = styled.div`
   width: 100%;
@@ -16,6 +19,8 @@ const App = (): ReactElement => {
   return (
     <Provider>
       <BrowserRouter>
+        <ToastContainer />
+        <OverLay />
         <Menubar />
         <Wrapper>
           <Header />
diff --git a/client/src/components/Input.tsx b/client/src/components/Input.tsx
new file mode 100644
index 0000000..cef86bf
--- /dev/null
+++ b/client/src/components/Input.tsx
@@ -0,0 +1,20 @@
+// import { ReactElement, memo, FC } from 'react';
+// import styled from 'styled-components';
+
+// interface InputProps {
+//   type: string;
+//   width?: string;
+//   height?: string;
+//   onChange: Function;
+//   value?: any;
+// }
+// const StyledInput = styled.input<InputProps>`
+//   width: 100%;
+// `;
+
+// const Input: FC<InputProps> = ({ value, type, width, height, onChange }: InputProps): ReactElement => {
+//   console.log('fjadhfdkja');
+//   return <input value={value} onChange={onChange} type={type} />;
+// };
+
+// export default memo(Input);
diff --git a/client/src/components/LabeledInput.tsx b/client/src/components/LabeledInput.tsx
new file mode 100644
index 0000000..df0a36b
--- /dev/null
+++ b/client/src/components/LabeledInput.tsx
@@ -0,0 +1,87 @@
+import { ReactElement, useState, memo } from 'react';
+import Text from '@components/Text';
+import { PRIMARY_COLORS } from '@util/Constants';
+import { getTodayDate } from '@util/Common';
+
+import styled from 'styled-components';
+import Select from '@components/Select';
+import { toast } from 'react-toastify';
+
+const { darkGray, lightGray } = PRIMARY_COLORS;
+
+interface InputProps {
+  label: string;
+  maxLength: number | string;
+  type: string;
+  id: string;
+}
+
+const Wrapper = styled.div`
+  width: 100%;
+
+  & {
+    width: 100%;
+    gap: 5px;
+  }
+  > *:focus {
+    outline: 1px solid ${darkGray};
+  }
+  > input,
+  textarea,
+  select {
+    padding: 8px;
+    border: 1px solid ${lightGray};
+    border-radius: 5px;
+    color: ${darkGray};
+  }
+  > input[type='text'],
+  textarea {
+    &:last-child {
+      width: 100%;
+    }
+  }
+  > input[type='date'] {
+    &:last-child {
+      width: 30%;
+    }
+  }
+`;
+
+const LabeledInput = ({ label, maxLength, type, id }: InputProps): ReactElement => {
+  const [input, setInput] = useState('');
+  const [dateInput, setDateInput] = useState(getTodayDate());
+
+  const handleOnChangeText = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const { value } = e.target;
+
+    if (maxLength === Number.MAX_VALUE || maxLength < 0) {
+      return setInput(value);
+    }
+    if (maxLength > value.length) {
+      return setInput(value);
+    }
+    toast.error('제목은 50자 이상 입력 불가능합니다.');
+  };
+
+  const handleOnChangeDate = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const { value } = e.target;
+
+    if (getTodayDate() <= value) {
+      return setDateInput(value);
+    }
+
+    toast.error('새로 생성하는 Todo는 과거로 설정 불가능합니다.');
+  };
+
+  return (
+    <Wrapper>
+      <Text text={label} fontFamily={'SanSerif'} fontSize={'18px'} color={darkGray} fontWeight={'500'} />
+      {type === 'text' && <input value={input} onChange={handleOnChangeText} type={type} id={id} />}
+      {type === 'textarea' && <textarea id={id} />}
+      {type === 'select' && <Select options={['A', 'B', 'C']} id={id} />}
+      {type === 'date' && <input type="date" value={dateInput} id={id} onChange={handleOnChangeDate} />}
+    </Wrapper>
+  );
+};
+
+export default memo(LabeledInput);
diff --git a/client/src/components/OverLay.tsx b/client/src/components/OverLay.tsx
new file mode 100644
index 0000000..5578c65
--- /dev/null
+++ b/client/src/components/OverLay.tsx
@@ -0,0 +1,31 @@
+import { TABLE_MODALS } from '@util/Constants';
+import { modalTypeAtom } from '@util/GlobalState';
+import { useAtom } from 'jotai';
+import { ReactElement } from 'react';
+import styled from 'styled-components';
+
+const StyledOverlay = styled.div`
+  background-color: rgba(0, 0, 0, 0.7);
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 10;
+`;
+
+const { none } = TABLE_MODALS;
+
+const OverLay = (): ReactElement => {
+  const [modalType, setModalType] = useAtom(modalTypeAtom);
+
+  const hanldeOnClick = (): void => {
+    setModalType(none);
+  };
+
+  return <>{modalType !== none && <StyledOverlay onClick={hanldeOnClick} />}</>;
+};
+
+export default OverLay;
diff --git a/client/src/components/Select.tsx b/client/src/components/Select.tsx
new file mode 100644
index 0000000..d0d7d92
--- /dev/null
+++ b/client/src/components/Select.tsx
@@ -0,0 +1,28 @@
+import { PRIMARY_COLORS } from '@util/Constants';
+import { ReactElement, memo } from 'react';
+import styled from 'styled-components';
+
+const { lightGray, black } = PRIMARY_COLORS;
+
+const StyledSelect = styled.select`
+  width: 20%;
+  border: 1px solid ${lightGray};
+  border-radius: 5px;
+  padding: 8px;
+  color: ${black};
+`;
+
+const Select = ({ options, id }: { options: string[]; id: string }): ReactElement => {
+  return (
+    <StyledSelect id={id}>
+      {options.map((value) => {
+        return (
+          <option key={value} value={value}>
+            {value}
+          </option>
+        );
+      })}
+    </StyledSelect>
+  );
+};
+export default memo(Select);
diff --git a/client/src/container/Header.tsx b/client/src/container/Header.tsx
index a68fe4e..883b16c 100644
--- a/client/src/container/Header.tsx
+++ b/client/src/container/Header.tsx
@@ -15,6 +15,7 @@ const Wrapper = styled.div`
   height: 10vh;
   padding: 25px;
   font-family: 'Roboto';
+  z-index: -10;
 `;
 
 const Header = (): ReactElement => {
diff --git a/client/src/container/TableModal.tsx b/client/src/container/TableModal.tsx
new file mode 100644
index 0000000..5413b55
--- /dev/null
+++ b/client/src/container/TableModal.tsx
@@ -0,0 +1,108 @@
+import { memo, ReactElement, useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { useAtom } from 'jotai';
+
+import Text from '@components/Text';
+
+import { TABLE_MODALS, PRIMARY_COLORS, MODAL_INPUT_LIST, MODAL_LABEL_ID } from '@util/Constants';
+import { modalTypeAtom } from '@util/GlobalState';
+
+import LabeledInput from '@components/LabeledInput';
+import Button from '@components/Button';
+import { getModalValues } from '@util/Common';
+
+const { create, update, none } = TABLE_MODALS;
+const { offWhite, red, blue } = PRIMARY_COLORS;
+
+interface WrapperProps {
+  ref: any;
+}
+
+const Wrapper = styled.div<WrapperProps>`
+  width: 50vw;
+  height: 70vh;
+  left: 21vw;
+  position: absolute;
+  background-color: ${offWhite};
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 20px;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 30px;
+  gap: 10px;
+`;
+
+const ButtonWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  gap: 15px;
+  padding-top: 15px;
+  text-align: right;
+  justify-content: flex-end;
+`;
+
+const TableModal = (): ReactElement => {
+  const [modalType, setModalType] = useAtom(modalTypeAtom);
+  const [modalHeader, setModalHeader] = useState('');
+  const modalWrapper = useRef<HTMLInputElement>();
+
+  useEffect(() => {
+    if (modalType === create) {
+      return setModalHeader('할 일 추가하기');
+    }
+    if (modalType === update) {
+      return setModalHeader('할 일 수정하기');
+    }
+    setModalHeader(none);
+  }, [modalType]);
+
+  const setComplete = (): void => {
+    let newData = {};
+
+    if (modalWrapper.current === undefined) {
+      return;
+    }
+
+    const userInputs = getModalValues(modalWrapper.current);
+
+    userInputs.forEach((item) => {
+      const { id, value } = item;
+      newData = { ...newData, [id]: value };
+    });
+
+    console.log(newData);
+  };
+
+  const setCancel = (): void => {
+    setModalType(none);
+  };
+
+  return (
+    <Wrapper ref={modalWrapper}>
+      <Text text={modalHeader} fontFamily={'SanSerif'} fontSize={'24px'} fontWeight={'600'} />
+      {MODAL_INPUT_LIST.map((item) => {
+        const { type, label, maxLength } = item;
+        return (
+          <LabeledInput
+            key={`${label}-${type}`}
+            id={MODAL_LABEL_ID[label as keyof typeof MODAL_LABEL_ID]}
+            label={label}
+            maxLength={maxLength}
+            type={type}
+          />
+        );
+      })}
+      <ButtonWrapper>
+        <Button context={<Text text="취소" color={red} fontWeight={'700'} fontSize={'18px'} />} onClick={setCancel} />
+        <Button
+          context={<Text text="확인" color={blue} fontWeight={'700'} fontSize={'18px'} />}
+          onClick={setComplete}
+        />
+      </ButtonWrapper>
+    </Wrapper>
+  );
+};
+
+export default memo(TableModal);
diff --git a/client/src/hooks/useTextInput.tsx b/client/src/hooks/useTextInput.tsx
new file mode 100644
index 0000000..9bd7c00
--- /dev/null
+++ b/client/src/hooks/useTextInput.tsx
@@ -0,0 +1,15 @@
+import Text from '@components/Text';
+import { useState } from 'react';
+
+const useTextInput = (label: string, maxLength?: number): any[] => {
+  const [inputText, setInputText] = useState('');
+
+  const handleOnChange = ({ target }): void => {
+    console.log(target);
+    console.log(inputText.length);
+  };
+
+  return [handleOnChange];
+};
+
+export default useTextInput;
diff --git a/client/src/images/Create.svg b/client/src/images/Create.svg
new file mode 100644
index 0000000..00385e4
--- /dev/null
+++ b/client/src/images/Create.svg
@@ -0,0 +1,18 @@
+<svg width="108" height="108" viewBox="0 0 108 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_191_6481)">
+<circle cx="54" cy="50" r="50" fill="#312317"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M56.7843 31.4394C56.7843 29.6089 55.3004 28.125 53.4699 28.125C51.6395 28.125 50.1555 29.6089 50.1555 31.4394V46.1552L35.4394 46.1552C33.6089 46.1552 32.125 47.6391 32.125 49.4696C32.125 51.3001 33.6089 52.784 35.4394 52.784L50.1555 52.784V68.5606C50.1555 70.3911 51.6395 71.875 53.4699 71.875C55.3004 71.875 56.7843 70.3911 56.7843 68.5606V52.784L72.5606 52.784C74.3911 52.784 75.875 51.3001 75.875 49.4696C75.875 47.6391 74.3911 46.1552 72.5606 46.1552L56.7843 46.1552V31.4394Z" fill="#FCFCFC"/>
+<defs>
+<filter id="filter0_d_191_6481" x="0" y="0" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_191_6481"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_191_6481" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/client/src/page/Main.tsx b/client/src/page/Main.tsx
index a2f5440..36138f6 100644
--- a/client/src/page/Main.tsx
+++ b/client/src/page/Main.tsx
@@ -10,7 +10,8 @@ import TodoContents from '@container/TodoContents';
 
 import useTodoList from '../hooks/useTodoList';
 
-import { isFinishedAtom } from '@util/GlobalState';
+import { isFinishedAtom, modalTypeAtom } from '@util/GlobalState';
+import { TABLE_MODALS } from '@util/Constants';
 
 import 'react-toastify/dist/ReactToastify.css';
 
@@ -22,9 +23,18 @@ const Wrapper = styled.div`
   align-items: center;
 `;
 
+const { none } = TABLE_MODALS;
+
 const Main = (): ReactElement => {
   const [, activeTodo] = useTodoList();
   const [isFinished] = useAtom(isFinishedAtom);
+  const [modalType, setModalType] = useAtom(modalTypeAtom);
+
+  useEffect(() => {
+    if (modalType !== none) {
+      setModalType(none);
+    }
+  }, []);
 
   useEffect(() => {
     if (isFinished) {
@@ -44,7 +54,6 @@ const Main = (): ReactElement => {
       ) : (
         <div>Good Job bbb</div>
       )}
-      <ToastContainer />
     </Wrapper>
   );
 };
diff --git a/client/src/page/Todos.tsx b/client/src/page/Todos.tsx
index c9721ac..66ae7ff 100644
--- a/client/src/page/Todos.tsx
+++ b/client/src/page/Todos.tsx
@@ -1,21 +1,50 @@
 import { ReactElement } from 'react';
 import styled from 'styled-components';
+import { useAtom } from 'jotai';
+
+import { modalTypeAtom } from '@util/GlobalState';
+import { TABLE_MODALS } from '@util/Constants';
+
+import TableModal from '@container/TableModal';
+import Image from '@components/Image';
+import Button from '@components/Button';
 import TodosHeader from '@container/TodosHeader';
 import Table from '@container/Table';
 
+import Create from '../images/Create.svg';
+
 const Wrapper = styled.div`
   height: 90vh;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
+  position: relative;
+`;
+
+const StyledButton = styled.div`
+  position: fixed;
+  bottom: 5%;
+  right: 5%;
+  width: 80px;
+  height: 80px;
 `;
 
 const Todos = (): ReactElement => {
+  const [modalType, setModalType] = useAtom(modalTypeAtom);
+
+  const hanldeOnClick = (): void => {
+    setModalType(TABLE_MODALS.create);
+  };
+
   return (
     <Wrapper>
       <TodosHeader />
       <Table />
+      <StyledButton>
+        <Button context={<Image src={Create} height={'80px;'} width={'80px;'} />} onClick={hanldeOnClick} />
+      </StyledButton>
+      {modalType !== TABLE_MODALS.none && <TableModal />}
     </Wrapper>
   );
 };
diff --git a/client/src/util/Common.ts b/client/src/util/Common.ts
index f9e9dd1..6d7f020 100644
--- a/client/src/util/Common.ts
+++ b/client/src/util/Common.ts
@@ -26,3 +26,11 @@ const getFormattedDate = (todoUntil: string): string => {
 export const isSameObject = (obj1: any, obj2: any): boolean => {
   return JSON.stringify(obj1) === JSON.stringify(obj2);
 };
+
+export const getModalValues = (div: Element): any[] => {
+  return [...div.querySelectorAll('textarea'), ...div.querySelectorAll('select'), ...div.querySelectorAll('input')];
+};
+
+export const getTodayDate = (): string => {
+  return new Date().toJSON().split('T')[0];
+};
diff --git a/client/src/util/Constants.ts b/client/src/util/Constants.ts
index 1ac25ca..c3d5276 100644
--- a/client/src/util/Constants.ts
+++ b/client/src/util/Constants.ts
@@ -42,3 +42,28 @@ export const PRIMARY_COLORS = {
 };
 
 export const INITIAL_TODO = { id: undefined, importance: 1, until: new Date() };
+
+export enum TABLE_MODALS {
+  create = 'create',
+  update = 'update',
+  delete = 'delete',
+  none = 'none',
+}
+
+export const MODAL_INPUT_LIST = [
+  { label: '제목', maxLength: 50, type: 'text' },
+  { label: '상세 내용', maxLength: Number.MAX_VALUE, type: 'textarea' },
+  { label: '마감일', type: 'date', maxLength: -1 },
+  { label: '중요도', type: 'select', maxLength: -1 },
+  { label: '먼저 할 일', maxLength: Number.MAX_VALUE, type: 'textarea' },
+  { label: '이어서 할 일', maxLength: Number.MAX_VALUE, type: 'textarea' },
+];
+
+export const MODAL_LABEL_ID = {
+  제목: 'title',
+  '상세 내용': 'contents',
+  마감일: 'until',
+  중요도: 'importance',
+  '먼저 할 일': 'prev',
+  '이어서 할 일': 'next',
+};
diff --git a/client/src/util/GlobalState.ts b/client/src/util/GlobalState.ts
index 5cb15f6..bb1d678 100644
--- a/client/src/util/GlobalState.ts
+++ b/client/src/util/GlobalState.ts
@@ -1,5 +1,7 @@
 import { atom } from 'jotai';
 import { TodoList } from '@core/todo/todoList.js';
+import { TABLE_MODALS } from './Constants.js';
+
 // import { Todo } from '@core/todo/todoList.js';
 
 // import sortRawTestCase from '../core/todo/test/sort.data.json';
@@ -73,3 +75,5 @@ export const elasedTimeAtom = atom(0); // 초 단위 경과시간
 export const startTimeAtom = atom(new Date());
 export const postponeClicked = atom(false);
 export const isFinishedAtom = atom(false);
+
+export const modalTypeAtom = atom(TABLE_MODALS.none);