diff --git a/README.md b/README.md
index 15cd5bb7..573a4216 100644
--- a/README.md
+++ b/README.md
@@ -34,7 +34,7 @@
 |
 |
 |
-  |
+  |
 |
 |
@@ -42,7 +42,7 @@
김회창 팀장 Back-end 매칭서버 개발 Problem Solving API 개발 인프라 구축 |
김정현 팀원 Back-end 아레나 게임서버 개발 알림 & 게시판 API 개발 화면공유 시스템 관리 |
이귀현 팀원 Front-end 아레나 컴포넌트 개발 |
- 장세정 팀원 Front-end 알림 & 게시판 컴포넌트 개발 회원 컴포넌트 개발 |
+ 장세정 팀원 Front-end 알림 & 게시판 컴포넌트 개발 회원 컴포넌트 개발 |
오승현 팀원 Back-end 채점서버 개발 회원관리 API 개발 |
양건우 팀원 Front-end Problem Solving 컴포넌트 개발 화면 공유 컴포넌트 개발 |
@@ -144,139 +144,139 @@ https://www.erdcloud.com/d/nrfqSDdChRWJpanzz
-## 🎬 Figma Design
-
-### Main
-
-
-
-
-### Login
+## 💻 주요 기능 소개
-
-
-
-
-
+### 메인 화면
-### Community
+- 코드아레나를 대표하는 메인 페이지입니다.
+- 메인페이지에서 다양한 페이지로 접근할 수 있습니다.
+- 코드아레나에 대해 소개하고, 최신 문제와 인기 질문을 소개합니다.
-
+
-
-
-
-
-### Problem Solving
+### 회원가입
-
+- 이메일을 통한 회원가입을 진행합니다.
-
-
-
+
-
-
-
-
+### 로그인
-
+- 쉽고 간편한 로그인을 진행합니다.
-
-
-
-
+
-### Arena Main
-
+### 문제 풀이 페이지
-
-
-
-
+- 온라인 저지 사이트와 같이 스스로 문제 해결 능력을 기를 수 있도록 장려합니다.
-### MyPage
+
-
-
-
-
-
+### 문제 풀기
-### Matching
+- 알고리즘 문제를 풀었다면 제출 후, 제출 현황을 확인할 수 있습니다.
+- 만약 문제를 틀렸다면, 어떤 테스트 케이스에서 틀렸는지 확인할 수 있습니다.
+- 문제에 대한 질문게시판과 문제 수정 요청을 제공합니다.
-
+
+
-
-
-
-
+### 문제 카테고리
-### INGAME
+- 다양한 알고리즘 문제를 카테고리별로 제공합니다.
-
+
-
-
-
-
-### SPECTATORS
+### 문제 생성
-
+- 알고리즘 문제 해결을 위한 새로운 문제를 생성합니다.
+- 문제의 내용부터 입출력 예제를 입력하고, 컴파일을 시도한 후에 제출할 수 있습니다.
+- 사이트 관리자측에서 문제를 검수하고 새로운 알고리즘 문제에 대해 업로드합니다.
-
-
-
-
+
-### RESULT
-
+### 마이 페이지
-
-
-
-
+- 간편한 회원 정보 수정을 제공합니다.
+- 자신의 푼 문제와 레이팅 점수 등을 확인할 수 있습니다.
-## 주요 기능
+
-### 메인 화면
-
+### 커뮤니티 게시판
-### 문제 풀이
+- 어려운 문제에 대해 이야기를 나눌 수 있는 커뮤니티를 제공합니다.
-
+
-### 마이 페이지
-
+- 누구나 자유롭게 질문 글을 작성할 수 있습니다.
+
+
+
+
+### 아레나 메인페이지
+
+- 아레나를 즐길 수 있는 페이지로 이동합니다.
+- 경쟁을 매칭하거나, 방을 찾아 다른 사람의 게임을 관전할 수 있습니다.
+- 인기 Hot Match 방을 소개합니다.
+- 각 모드별 랭킹을 제공하고, 본인의 전적을 확인할 수 있습니다.
+
+
+
+
+### 아레나 메칭 시스템
+
+- 비슷한 Rating 점수를 가진 플레이어끼리 랜덤 매칭을 실시합니다.
+- 유저는 원하는 언어, 모드를 선택하고 수락을 누르면 게임 방이 생성되어 이동합니다.
+
+
+
+
+### 아레나 스피드전 모드
+
+- 아레나 스피드전 모드를 제공합니다.
+- 먼저 제출해서 맞추는 사람이 승리하는 방식입니다.
+- 시간이 모두 소요될 때까지 정답자가 나오지않는다면 무승부로 처리됩니다.
+
+
+
+
+### 아레나 효율전 모드
+
+- 아레나 효율전 모드를 제공합니다.
+- 먼저 제출해서 맞추는 사람이 승리하는 방식과는 달리
+- 제출한 코드 중 메모리와 시간이 가장 효율적인 코드를 제출한 사람이 승리합니다.
+- 중간 채점 현황을 확인할 수 있도록 제공합니다.
-### 아레나 통계
+
-
+
-### 매칭 진행
-
+### 아레나 게임 관전
-### 스피드전 진행, 화면공유 그리고 결과
+- 아레나 게임을 플레이하고있는 방을 관전할 수 있습니다.
+- 플레이어의 화면 공유를 통하여 코딩 작성을 확인할 수 있습니다.
+- 관전자들의 자유로운 소통을 위한 채팅을 제공합니다.
-
+
-### 효율전 진행, 중간 채점현황
-
+### 아레나 게임 배팅
-### 관전자 배팅 및 채팅
+- 다른 플레이어들의 코딩 배틀을 관전하면서 포인트를 배팅할 수 있습니다.
+- 자기가 건 플레이어가 승리한다면 포인트를 더욱 얻을 수 있습니다.
+- 포인트 비율 참고 : 배팅 후 금액 + (배팅 금액 * (우승한 유저의 점수 + 1))
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/asset/gif/Login.gif b/asset/gif/Login.gif
index 89813fe7..52dd86ac 100644
Binary files a/asset/gif/Login.gif and b/asset/gif/Login.gif differ
diff --git a/asset/gif/Main.gif b/asset/gif/Main.gif
deleted file mode 100644
index 1de382ef..00000000
Binary files a/asset/gif/Main.gif and /dev/null differ
diff --git a/asset/gif/Mypage.gif b/asset/gif/Mypage.gif
deleted file mode 100644
index 1d0e6cf0..00000000
Binary files a/asset/gif/Mypage.gif and /dev/null differ
diff --git a/asset/gif/arenaMain.gif b/asset/gif/arenaMain.gif
new file mode 100644
index 00000000..de3c0b5c
Binary files /dev/null and b/asset/gif/arenaMain.gif differ
diff --git a/asset/gif/arena_main.gif b/asset/gif/arena_main.gif
deleted file mode 100644
index 2c69d2a0..00000000
Binary files a/asset/gif/arena_main.gif and /dev/null differ
diff --git a/asset/gif/arena_match.gif b/asset/gif/arena_match.gif
new file mode 100644
index 00000000..9596bfda
Binary files /dev/null and b/asset/gif/arena_match.gif differ
diff --git a/asset/gif/batting.gif b/asset/gif/batting.gif
new file mode 100644
index 00000000..35d99a35
Binary files /dev/null and b/asset/gif/batting.gif differ
diff --git a/asset/gif/community.gif b/asset/gif/community.gif
new file mode 100644
index 00000000..fee09366
Binary files /dev/null and b/asset/gif/community.gif differ
diff --git a/asset/gif/createProblem.gif b/asset/gif/createProblem.gif
new file mode 100644
index 00000000..0da26037
Binary files /dev/null and b/asset/gif/createProblem.gif differ
diff --git a/asset/gif/eff.gif b/asset/gif/eff.gif
new file mode 100644
index 00000000..9d191504
Binary files /dev/null and b/asset/gif/eff.gif differ
diff --git a/asset/gif/eff_ans.gif b/asset/gif/eff_ans.gif
new file mode 100644
index 00000000..de9ce421
Binary files /dev/null and b/asset/gif/eff_ans.gif differ
diff --git a/asset/gif/goProblem.gif b/asset/gif/goProblem.gif
new file mode 100644
index 00000000..1f9cf76e
Binary files /dev/null and b/asset/gif/goProblem.gif differ
diff --git a/asset/gif/mainpage.gif b/asset/gif/mainpage.gif
new file mode 100644
index 00000000..61a21c95
Binary files /dev/null and b/asset/gif/mainpage.gif differ
diff --git a/asset/gif/observe.gif b/asset/gif/observe.gif
new file mode 100644
index 00000000..f84a2138
Binary files /dev/null and b/asset/gif/observe.gif differ
diff --git a/asset/gif/problemCategory.gif b/asset/gif/problemCategory.gif
new file mode 100644
index 00000000..d743f76a
Binary files /dev/null and b/asset/gif/problemCategory.gif differ
diff --git a/asset/gif/profile.gif b/asset/gif/profile.gif
new file mode 100644
index 00000000..097f4d56
Binary files /dev/null and b/asset/gif/profile.gif differ
diff --git a/asset/gif/ps.gif b/asset/gif/ps.gif
deleted file mode 100644
index 392f5f43..00000000
Binary files a/asset/gif/ps.gif and /dev/null differ
diff --git a/asset/gif/question.gif b/asset/gif/question.gif
new file mode 100644
index 00000000..5df8d7e8
Binary files /dev/null and b/asset/gif/question.gif differ
diff --git a/asset/gif/signup.gif b/asset/gif/signup.gif
new file mode 100644
index 00000000..0b0cbdfa
Binary files /dev/null and b/asset/gif/signup.gif differ
diff --git a/asset/gif/solvingProblem.gif b/asset/gif/solvingProblem.gif
new file mode 100644
index 00000000..43bf6e36
Binary files /dev/null and b/asset/gif/solvingProblem.gif differ
diff --git a/asset/gif/speed.gif b/asset/gif/speed.gif
new file mode 100644
index 00000000..9da80267
Binary files /dev/null and b/asset/gif/speed.gif differ
diff --git "a/asset/gif/\352\264\200\354\240\204\354\236\220,\353\262\240\355\214\205.gif" "b/asset/gif/\352\264\200\354\240\204\354\236\220,\353\262\240\355\214\205.gif"
deleted file mode 100644
index e5b88447..00000000
Binary files "a/asset/gif/\352\264\200\354\240\204\354\236\220,\353\262\240\355\214\205.gif" and /dev/null differ
diff --git "a/asset/gif/\353\247\244\354\271\255\354\247\204\355\226\211.gif" "b/asset/gif/\353\247\244\354\271\255\354\247\204\355\226\211.gif"
deleted file mode 100644
index 170c81a1..00000000
Binary files "a/asset/gif/\353\247\244\354\271\255\354\247\204\355\226\211.gif" and /dev/null differ
diff --git "a/asset/gif/\354\212\244\355\224\274\353\223\234\354\240\204\354\247\204\355\226\211.gif" "b/asset/gif/\354\212\244\355\224\274\353\223\234\354\240\204\354\247\204\355\226\211.gif"
deleted file mode 100644
index 1eafe0c4..00000000
Binary files "a/asset/gif/\354\212\244\355\224\274\353\223\234\354\240\204\354\247\204\355\226\211.gif" and /dev/null differ
diff --git "a/asset/gif/\355\232\250\354\234\250\352\262\214\354\236\204\354\247\204\355\226\211.gif" "b/asset/gif/\355\232\250\354\234\250\352\262\214\354\236\204\354\247\204\355\226\211.gif"
deleted file mode 100644
index aca7ae7d..00000000
Binary files "a/asset/gif/\355\232\250\354\234\250\352\262\214\354\236\204\354\247\204\355\226\211.gif" and /dev/null differ
diff --git a/asset/img/Architecture.png b/asset/img/Architecture.png
index 4ee07771..67707f34 100644
Binary files a/asset/img/Architecture.png and b/asset/img/Architecture.png differ
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..c1f0889f
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+ "name": "CodeArena",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {}
+}