diff --git a/README.md b/README.md
index 553e9d9..d008910 100644
--- a/README.md
+++ b/README.md
@@ -1,69 +1,84 @@
 ## 🧑‍💻 프로젝트 소개
-### 우리들의 행복한 시간 ⏰   
+
+### 우리들의 행복한 시간 ⏰
+
 > 우리FIS 아카데미 교육생들을 대상으로 공부한 시간을 측정하여 학습 기록을 확인할 수 있는 서비스
 
-[우행시에 접속하고 싶다면? 클릭해주세요! 👀](https://woohangshi.vercel.app/)   
-- 테스트 유저 ID: test@test.com 
+[우행시에 접속하고 싶다면? 클릭해주세요! 👀](https://woohangshi.vercel.app/)
+
+- 테스트 유저 ID: test@test.com
 - 테스트 유저 PW: test1234!
 
 <br/>
 
 ## 👻 팀원구성
+
 | <img src="https://github.com/riverkite0708.png" width="200" /> | <img src="https://github.com/Kong-E.png" width="200" /> | <img src="https://github.com/doyi0107.png" width="200" /> |
-|:---:|:---:|:---:|
-| [강재연](https://github.com/riverkite0708) | [공소연](https://github.com/Kong-E) | [이도이](https://github.com/doyi0107) |
-| 프론트엔드 | 프론트엔드 | 프론트엔드 |
-| UI 가이드라인, <br /> 기록확인, 마이페이지 구현 | 인증/인가, 공부하기 구현, <br /> API 설정 | 랜딩 페이지, 과목선택, <br /> 순위조회 구현 |
+| :------------------------------------------------------------: | :-----------------------------------------------------: | :-------------------------------------------------------: |
+|           [강재연](https://github.com/riverkite0708)           |           [공소연](https://github.com/Kong-E)           |           [이도이](https://github.com/doyi0107)           |
+|                           프론트엔드                           |                       프론트엔드                        |                        프론트엔드                         |
+|        UI 가이드라인, <br /> 기록확인, 마이페이지 구현         |        인증/인가, 공부하기 구현, <br /> API 설정        |        랜딩 페이지, 과목선택, <br /> 순위조회 구현        |
 
 | <img src="https://github.com/khwoowoo.png" width="200" /> | <img src="https://github.com/rlfrkdms1.png" width="200" /> | <img src="https://github.com/qbobl5.png" width="200" /> | <img src="https://github.com/yaejinkong.png" width="200" /> |
-|:---:|:---:|:---:|:---:|
-| [강현우(팀장)](https://github.com/khwoowoo) | [길가은](https://github.com/rlfrkdms1) | [김혜빈](https://github.com/qbobl5) | [공예진](https://github.com/yaejinkong) |
-| 백엔드 | 백엔드 | 백엔드 | 백엔드 |
-| 클라우드 인프라 구축, <br /> 랭킹 API 개발 | 인증/인가, 이메일 인증 기능, <br /> 공부시간 기록 API 개발 | CI 환경 구축, <br /> 타이머 조회 및 캘린더 API 개발 | 과목 및 회원 정보 API 개발 |
+| :-------------------------------------------------------: | :--------------------------------------------------------: | :-----------------------------------------------------: | :---------------------------------------------------------: |
+|        [강현우(팀장)](https://github.com/khwoowoo)        |           [길가은](https://github.com/rlfrkdms1)           |           [김혜빈](https://github.com/qbobl5)           |           [공예진](https://github.com/yaejinkong)           |
+|                          백엔드                           |                           백엔드                           |                         백엔드                          |                           백엔드                            |
+|        클라우드 인프라 구축, <br /> 랭킹 API 개발         | 인증/인가, 이메일 인증 기능, <br /> 공부시간 기록 API 개발 |   CI 환경 구축, <br /> 타이머 조회 및 캘린더 API 개발   |                 과목 및 회원 정보 API 개발                  |
 
 <br/>
 
 ## ⭐ 프로젝트 주요 기능
+
 준비중 입니다.
 
 <br/>
 
 ## ⚙️ 시스템 아키텍처
-### 프로젝트 구조도   
-![프로젝트 구조도](https://github.com/user-attachments/assets/97c151ee-4875-4c52-b446-0f5b88dabaaa)
----
-### 인프라 구조도   
+
+### 프로젝트 구조도
+
+## ![프로젝트 구조도](https://github.com/user-attachments/assets/97c151ee-4875-4c52-b446-0f5b88dabaaa)
+
+### 인프라 구조도
+
 ![인프라 구조도](https://github.com/user-attachments/assets/81017061-93c3-4720-9abc-eafc10874017)
 
 <br/>
 
 ## 📚 기술 스택
-### Common   
+
+### Common
+
 ![Notion](https://img.shields.io/badge/Notion-eeeeee.svg?style=flat-square&logo=notion&logoColor=000000)
 ![GitHub](https://img.shields.io/badge/Github-%23121011.svg?style=flat-square&logo=github&logoColor=white)
 ![Postman](https://img.shields.io/badge/Postman-FF6C37?style=flat-square&logo=postman&logoColor=white)
 
-### UI/UX   
+### UI/UX
+
 ![Radix UI](https://img.shields.io/badge/Radix%20ui-161618.svg?style=flat-square&logo=radix-ui&logoColor=white)
 ![figma](https://img.shields.io/badge/Figma-f24e1e?style=flat-square&logo=figma&logoColor=ffffff)
 
-### Frontend   
+### Frontend
+
 ![Next JS](https://img.shields.io/badge/Next.js-black?style=flat-square&logo=next.js&logoColor=white)
 ![Zustand](https://img.shields.io/badge/Zustand-orange?style=flat-square&logo=zustand&logoColor=white)
 ![TypeScript](https://img.shields.io/badge/TypeScript-%23007ACC.svg?style=flat-square&logo=typescript&logoColor=white)
 ![authjs](https://img.shields.io/badge/Auth.js-1eabf4?style=flat-square&logo=nextauth&logoColor=black)
-![SWR](https://img.shields.io/badge/SWR-black.svg?style=flat-square&logo=swr&logoColor=white)   
+![SWR](https://img.shields.io/badge/SWR-black.svg?style=flat-square&logo=swr&logoColor=white)  
 ![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=flat-square&logo=ESLint&logoColor=white)
 ![Prettier](https://img.shields.io/badge/Prettier-%23F7B93E.svg?style=flat-square&logo=prettier&logoColor=black)
 ![Vercel](https://img.shields.io/badge/Vercel-000000?style=flat-square&logo=Vercel&logoColor=white)
 
-### Backend    
+### Backend
+
 <img src="https://img.shields.io/badge/SpringBoot-6DB33F?style=flat-square&logo=SpringBoot&logoColor=white"> <img src="https://img.shields.io/badge/SpringDataJpa-6DB33F?style=flat-square&logo=SpringDataJpat&logoColor=white"> <img src="https://img.shields.io/badge/QueryDsl-137CBD?style=flat-square&logo=QueryDsl&logoColor=white"> <img src="https://img.shields.io/badge/Gradle-02303A?style=flat-square&logo=Gradle&logoColor=white"> <img src="https://img.shields.io/badge/Swagger-85EA2D?style=flat-square&logo=Swagger&logoColor=white"> <img src="https://img.shields.io/badge/JWT-black?style=flat-square&logo=JSON%20web%20tokens">
 
-### Infra & DB   
+### Infra & DB
+
 <img src="https://img.shields.io/badge/MySQL-4479A1?style=flat-square&logo=MySQL&logoColor=white"> <img src="https://img.shields.io/badge/AmazonEC2-FF9900?style=flat-square&logo=AmazonEC2&logoColor=white"> <img src="https://img.shields.io/badge/AmazonRDS-527FFF?style=flat-square&logo=AmazonRDS&logoColor=white"> <img src="https://img.shields.io/badge/AmazonS3-569A31?style=flat-square&logo=AmazonS3&logoColor=white"> <img src="https://img.shields.io/badge/Redis-DC382D?style=flat-square&logo=Redis&logoColor=white">
 
-### CI/CD   
+### CI/CD
+
 <img src="https://img.shields.io/badge/GithubActions-2088FF?style=flat-square&logo=GithubActions&logoColor=white"> <img src="https://img.shields.io/badge/AmazonElasticBeanstalk-yellow?style=flat-square&logo=AmazonAWS&logoColor=white" alt="Amazon Elastic Beanstalk Status" />
 
 <br/>
@@ -77,18 +92,18 @@
 │   ├── easteregg/ ▶️ 이스터에그 폴더
 │   ├── icons/ ▶️ 아이콘 폴더
 │   ├── imgs/ ▶️ 이미지 폴더
-│   └── fonts/ 폰트 폴더 
+│   └── fonts/ 폰트 폴더
 ├── app/ ▶️ 앱 라우팅 폴더
-│   ├── (auth)/ ▶️ 인증 인가 폴더 
-│   ├── actions/ ▶️ auth.js 함수 호출 폴더 
+│   ├── (auth)/ ▶️ 인증 인가 폴더
+│   ├── actions/ ▶️ auth.js 함수 호출 폴더
 │   ├── api/auth/[...nextauth]/ ▶️ auth.js 설정 폴더
 │   ├── mypage/ ▶️ 마이페이지 폴더
 │   ├── ranking/ ▶️ 순위조회 폴더
 │   ├── record/ ▶️ 기록확인 폴더
 │   ├── study/ ▶️ 공부시작 폴더
-│   ├── page.tsx ▶️ root 경로 페이지 
-│   └── layout.tsx ▶️ root 경로 레이아웃 구조 
-├── components/ ▶️ 컴포넌트 폴더 
+│   ├── page.tsx ▶️ root 경로 페이지
+│   └── layout.tsx ▶️ root 경로 레이아웃 구조
+├── components/ ▶️ 컴포넌트 폴더
 │   ├── common/ ▶️ 공통 컴포넌트 폴더
 │   │   ├── Header/
 │   │   │   ├── Header컴포넌트.tsx
@@ -99,7 +114,7 @@
 │   │   ├── 컴포넌트.tsx
 │   │   └── 컴포넌트.module.css
 │   ├── 라우팅폴더명/컴포넌트.tsx
-│   └── 라우팅폴더명/컴포넌트.module.css 
+│   └── 라우팅폴더명/컴포넌트.module.css
 ├── constants/
 │   └── 상수명.ts
 ├── hooks/
@@ -107,7 +122,7 @@
 ├── apis/
 │   ├── instancs.ts ▶️ api 요청 기본 설정 파일
 │   └── 도메인Api.ts
-├── stores/ ▶️ Zustand Store 폴더 
+├── stores/ ▶️ Zustand Store 폴더
 │   └── 도메인Store.ts
 ├── types/ ▶️ TypeScript Interface 설정 폴더
 │   └── 도메인Type.ts
@@ -121,7 +136,8 @@
 └── package.json ▶️ NPM 프로젝트 설정 파일
 ```
 
-## 🎈 Commit 방법   
+## 🎈 Commit 방법
+
 꼭 다음의 방법을 따라서 커밋할 필요는 없지만, 알아보기 쉽게하기 위함.
 \
 커밋의 제목은 타입을 기재 후 간단한 요약(명령조)을 기재 함.
@@ -129,19 +145,20 @@
 본문 작성시 자세한 내용을 누구든 알아볼 수 있기 기재 함(어떻게 보다 **왜**에 초점을 맞춰 작성).
 \
 **타입은 다음과 같음.**
-* feat : 새로운 기능 추가
-* fix : 버그 수정
-* docs : 문서 수정
-* style : 코드 formatting, 세미콜론(;) 누락, 코드 변경이 없는 경우
-* refactor : 코드 리팩터링
-* test : 테스트 코드, 리팩터링 테스트 코드 추가(프로덕션 코드 변경 X)
-* chore : 빌드 업무 수정, 패키지 매니저 수정(프로덕션 코드 변경 X)
-* design : CSS 등 사용자 UI 디자인 변경
-* comment : 필요한 주석 추가 및 변경
-* rename : 파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우
-* remove : 파일을 삭제하는 작업만 수행한 경우
-* !BREAKING CHANGE : 커다란 API 변경의 경우
-* !HOTFIX : 급하게 치명적인 버그를 고쳐야 하는 경우
+
+- feat : 새로운 기능 추가
+- fix : 버그 수정
+- docs : 문서 수정
+- style : 코드 formatting, 세미콜론(;) 누락, 코드 변경이 없는 경우
+- refactor : 코드 리팩터링
+- test : 테스트 코드, 리팩터링 테스트 코드 추가(프로덕션 코드 변경 X)
+- chore : 빌드 업무 수정, 패키지 매니저 수정(프로덕션 코드 변경 X)
+- design : CSS 등 사용자 UI 디자인 변경
+- comment : 필요한 주석 추가 및 변경
+- rename : 파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우
+- remove : 파일을 삭제하는 작업만 수행한 경우
+- !BREAKING CHANGE : 커다란 API 변경의 경우
+- !HOTFIX : 급하게 치명적인 버그를 고쳐야 하는 경우
 
 예시
 `[feat/#이슈번호]: 타워 추가`
diff --git a/apis/instance.ts b/apis/instance.ts
index 2874d58..0fb83dc 100644
--- a/apis/instance.ts
+++ b/apis/instance.ts
@@ -7,7 +7,9 @@ import { redirect } from 'next/dist/server/api-utils';
 
 interface RequestOptions {
   headers?: Record<string, string>;
-  [key: string]: string | Record<string, string> | undefined;
+  isMultipart?: boolean; // 멀티파트 여부를 나타내는 속성 추가
+  body?: any; // 요청 본문에 대한 타입 정의
+  [key: string]: any; // 다른 속성 허용
 }
 
 const fetchInstance = async (url: string, options: RequestOptions = {}) => {
@@ -15,10 +17,16 @@ const fetchInstance = async (url: string, options: RequestOptions = {}) => {
   const accessToken = session?.user?.accessToken;
 
   const headers: RequestOptions['headers'] = {
-    'Content-Type': 'application/json',
     ...options.headers,
   };
 
+  // FormData인 경우 Content-Type 설정 제거
+  if (options.body instanceof FormData) {
+    delete headers['Content-Type'];
+  } else {
+    headers['Content-Type'] = 'application/json';
+  }
+
   if (accessToken) {
     headers.Authorization = `Bearer ${accessToken}`;
   }
@@ -35,7 +43,7 @@ const fetchInstance = async (url: string, options: RequestOptions = {}) => {
         console.error('Token Expired');
       }
       console.error('Fetch Error:', errorResponse);
-      return { error: errorResponse };
+      return response;
     }
 
     if (response.headers.get('Content-Type')?.includes('application/json')) {
diff --git a/apis/memberApi.ts b/apis/memberApi.ts
index a579bb8..544f362 100644
--- a/apis/memberApi.ts
+++ b/apis/memberApi.ts
@@ -1,3 +1,4 @@
+import { revalidatePath } from 'next/cache';
 import { instance } from './instance';
 
 // 유저정보 조회
@@ -9,6 +10,16 @@ export const getUserInfo = async () => {
   return response;
 };
 
+// 유저정보 수정
+export const patchUserInfo = async ({ name, course }: { name: string; course: string }) => {
+  const response = await instance(`members`, {
+    method: 'PATCH',
+    body: JSON.stringify({ name, course }),
+  });
+
+  return response;
+};
+
 // 비밀번호 업데이트
 export const postPwUpdate = async ({ oldPassword, newPassword }: { oldPassword: string; newPassword: string }) => {
   const response = await instance('members', {
diff --git a/apis/rankingApi.ts b/apis/rankingApi.ts
index a577585..b28c22d 100644
--- a/apis/rankingApi.ts
+++ b/apis/rankingApi.ts
@@ -1,6 +1,6 @@
 import { instance } from './instance';
 import { ApiResponse } from '../types/rankingType';
-import rankingImg from '../assets/icons/ranking_profile_img.png';
+import rankingImg from '@/public/imgs/ranking/ranking_profile_img.png';
 
 //랭킹 조회 api
 export const getMemberRanking = async ({
diff --git a/app/font.css b/app/font.css
index acc086e..5a3c3bf 100644
--- a/app/font.css
+++ b/app/font.css
@@ -4,15 +4,15 @@
   font-weight: 900;
   font-display: swap;
   src:
-    url('/font/Pretendard-Black.subset.woff2') format('woff2'),
-    url('/font/Pretendard-Black.subset.woff') format('woff');
+    url('/fonts/Pretendard-Black.subset.woff2') format('woff2'),
+    url('/fonts/Pretendard-Black.subset.woff') format('woff');
 }
 
 @font-face {
   font-family: 'Pretendard';
   font-weight: 700;
   font-display: swap;
-  src: url('/font/Pretendard-Bold.subset.woff') format('woff');
+  src: url('/fonts/Pretendard-Bold.subset.woff') format('woff');
 }
 
 @font-face {
@@ -20,8 +20,8 @@
   font-weight: 500;
   font-display: swap;
   src:
-    url('/font/Pretendard-Medium.subset.woff2') format('woff2'),
-    url('/font/Pretendard-Medium.subset.woff') format('woff');
+    url('/fonts/Pretendard-Medium.subset.woff2') format('woff2'),
+    url('/fonts/Pretendard-Medium.subset.woff') format('woff');
 }
 
 @font-face {
@@ -29,8 +29,8 @@
   font-weight: 400;
   font-display: swap;
   src:
-    url('/font/Pretendard-Regular.subset.woff2') format('woff2'),
-    url('/font/Pretendard-Regular.subset.woff') format('woff');
+    url('/fonts/Pretendard-Regular.subset.woff2') format('woff2'),
+    url('/fonts/Pretendard-Regular.subset.woff') format('woff');
 }
 
 @font-face {
@@ -38,6 +38,6 @@
   font-weight: 100;
   font-display: swap;
   src:
-    url('/font/Pretendard-Thin.subset.woff2') format('woff2'),
-    url('/font/Pretendard-Thin.subset.woff') format('woff');
+    url('/fonts/Pretendard-Thin.subset.woff2') format('woff2'),
+    url('/fonts/Pretendard-Thin.subset.woff') format('woff');
 }
diff --git a/app/mypage/infoupdate/page.tsx b/app/mypage/infoupdate/page.tsx
new file mode 100644
index 0000000..a553972
--- /dev/null
+++ b/app/mypage/infoupdate/page.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import ClassRadioGroup from '@/components/auth/ClassRadioGroup';
+import InputField from '@/components/auth/InputField';
+import CommonButton from '@/components/common/CommonButton';
+import { Box } from '@radix-ui/themes';
+import { patchUserInfo } from '@/apis/memberApi';
+import { useState, useTransition } from 'react';
+
+export default function InfoUpdate() {
+  const [isPending, startTransition] = useTransition();
+  const [userInfo, setUserInfo] = useState({
+    name: '',
+    course: '',
+  });
+
+  const handleNameChange = (name: string) => {
+    setUserInfo({ ...userInfo, name });
+  };
+
+  const handleCourseChange = (value: string) => {
+    setUserInfo({ ...userInfo, course: value });
+  };
+
+  const submitHandler = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (userInfo.name.trim() === '') {
+      alert('수정할 이름을 입력해주세요.');
+      return;
+    }
+    if (userInfo.course === '') {
+      alert('수정할 과정을 선택해주세요.');
+      return;
+    }
+
+    // Transition 안에서 비동기 작업 시작
+    startTransition(() => {
+      patchUserInfo(userInfo); // 유저 정보 패치
+      localStorage.removeItem('userInfo'); // 로컬 스토리지에서 유저 정보 제거
+    });
+  };
+
+  return (
+    <Box className="form_box" p="1">
+      <form onSubmit={submitHandler}>
+        <Box className="row">
+          <InputField
+            label="이름"
+            id="user_name"
+            placeholder="이름을 입력해주세요."
+            value={userInfo.name}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleNameChange(e.target.value)}
+          />
+          <Box mt="3" className="row">
+            <ClassRadioGroup course={userInfo.course} onChange={handleCourseChange} />
+          </Box>
+          <Box mt="5">
+            <CommonButton type="submit" style="dark_purple" disabled={isPending}>
+              {isPending ? '수정 중...' : '수정하기'}
+            </CommonButton>
+          </Box>
+        </Box>
+      </form>
+    </Box>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
index 069e358..1a64e8c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,24 +1,29 @@
-import { Box, Flex, Text } from '@radix-ui/themes';
+import { Box } from '@radix-ui/themes';
 import Image from 'next/image';
+import Landing from '@/components/landing/Landing';
 
 export default function Page() {
-  const rand = Math.floor(Math.random() * 3);
+  // const rand = Math.floor(Math.random() * 3);
   return (
-    <Box p="6">
-      <Flex justify="center" align="center" direction="column">
-        <div
-          style={{
-            backgroundImage: `url(/easteregg/${rand}.jpg)`,
-            backgroundPosition: '50% 50%',
-            backgroundSize: 'cover',
-          }}
-        >
-          <Image src={`/easteregg/bg.jpg`} alt="이스터에그" width={445} height={500} style={{ visibility: 'hidden' }} />
-        </div>
-        <Text as="p" mt="2">
-          업데이트 예정입니다 ^^
-        </Text>
-      </Flex>
+    <Box>
+      <Landing />
     </Box>
+
+    // <Box p="6">
+    //   <Flex justify="center" align="center" direction="column">
+    //     <div
+    //       style={{
+    //         backgroundImage: `url(/easteregg/${rand}.jpg)`,
+    //         backgroundPosition: '50% 50%',
+    //         backgroundSize: 'cover',
+    //       }}
+    //     >
+    //       <Image src={`/easteregg/bg.jpg`} alt="이스터에그" width={445} height={500} style={{ visibility: 'hidden' }} />
+    //     </div>
+    //     <Text as="p" mt="2">
+    //       업데이트 예정입니다 ^^
+    //     </Text>
+    //   </Flex>
+    // </Box>
   );
 }
diff --git a/app/ranking/page.tsx b/app/ranking/page.tsx
index 3970ea0..fb9663c 100644
--- a/app/ranking/page.tsx
+++ b/app/ranking/page.tsx
@@ -4,7 +4,7 @@ import TopRankings from '@/components/ranking/topRanking';
 import FullRankingList from '@/components/ranking/fullRankingList';
 import { Box, Flex } from '@radix-ui/themes';
 import styles from './page.module.css';
-import rankingImg from '@/assets/icons/ranking_profile_img.png';
+import rankingImg from '@/public/imgs/ranking/ranking_profile_img.png';
 import { getMemberRanking } from '@/apis/rankingApi';
 import { Student, ApiResponse } from '@/types/rankingType';
 
diff --git a/assets/icons/ranking_1.png b/assets/icons/ranking_1.png
deleted file mode 100644
index 5673bc3..0000000
Binary files a/assets/icons/ranking_1.png and /dev/null differ
diff --git a/assets/icons/ranking_2.png b/assets/icons/ranking_2.png
deleted file mode 100644
index a8cf46f..0000000
Binary files a/assets/icons/ranking_2.png and /dev/null differ
diff --git a/assets/icons/ranking_3.png b/assets/icons/ranking_3.png
deleted file mode 100644
index abcfe68..0000000
Binary files a/assets/icons/ranking_3.png and /dev/null differ
diff --git a/assets/icons/subject_edit_close_btn.png b/assets/icons/subject_edit_close_btn.png
deleted file mode 100644
index 8a7a587..0000000
Binary files a/assets/icons/subject_edit_close_btn.png and /dev/null differ
diff --git a/components/auth/ClassRadioGroup.tsx b/components/auth/ClassRadioGroup.tsx
new file mode 100644
index 0000000..86704c7
--- /dev/null
+++ b/components/auth/ClassRadioGroup.tsx
@@ -0,0 +1,39 @@
+import { Flex, RadioGroup, Text } from '@radix-ui/themes';
+
+interface ClassRadioGroupProps {
+  course: string;
+  onChange: (value: string) => void;
+}
+
+export default function ClassRadioGroup({ course, onChange }: ClassRadioGroupProps) {
+  return (
+    <>
+      <Text as="label" weight="medium" htmlFor="user_cls">
+        클래스
+      </Text>
+      <Flex
+        mt="2"
+        justify="start"
+        align="center"
+        direction="row"
+        gap="30px"
+        gapY="10px"
+        wrap="wrap"
+        className="radio_box"
+        asChild
+      >
+        <RadioGroup.Root defaultValue="ai" name="user_cls" size="3" value={course} onValueChange={onChange}>
+          <RadioGroup.Item id="user_cls_ai" value="AI 엔지니어링">
+            AI 엔지니어링
+          </RadioGroup.Item>
+          <RadioGroup.Item id="user_cls_cloud" value="클라우드 엔지니어링">
+            클라우드 엔지니어링
+          </RadioGroup.Item>
+          <RadioGroup.Item id="user_cls_service" value="클라우드 서비스">
+            클라우드 서비스 개발
+          </RadioGroup.Item>
+        </RadioGroup.Root>
+      </Flex>
+    </>
+  );
+}
diff --git a/components/auth/InputField.tsx b/components/auth/InputField.tsx
index 1a49982..ed3ace8 100644
--- a/components/auth/InputField.tsx
+++ b/components/auth/InputField.tsx
@@ -11,13 +11,13 @@ interface InputFieldProps {
 
 export default function InputField({ label, id, type = 'text', placeholder, value, onChange }: InputFieldProps) {
   return (
-    <Box mt="3" className="row">
+    <>
       <Text as="label" weight="medium" htmlFor={id}>
         {label}
       </Text>
       <Box mt="2">
         <input type={type} id={id} placeholder={placeholder} value={value} onChange={onChange} />
       </Box>
-    </Box>
+    </>
   );
 }
diff --git a/components/auth/JoinForm.tsx b/components/auth/JoinForm.tsx
index b739d81..809f26d 100644
--- a/components/auth/JoinForm.tsx
+++ b/components/auth/JoinForm.tsx
@@ -7,6 +7,7 @@ import AuthFormLayout from './AuthFormLayout';
 import { useJoinStore } from '@/stores/authStore';
 import { useState } from 'react';
 import { isValidPassword } from '@/utils/validateUtils';
+import ClassRadioGroup from './ClassRadioGroup';
 
 interface JoinFormProps {
   onJoin: (e: React.FormEvent<HTMLFormElement>) => void;
@@ -78,84 +79,61 @@ export default function JoinForm({ onJoin }: JoinFormProps) {
     <AuthFormLayout title="회원가입">
       <form onSubmit={handleSubmit}>
         <div className="input_box">
-          <InputField
-            label="이메일"
-            id="user_email"
-            placeholder="이메일을 입력해주세요."
-            value={email}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleEmailChange(e.target.value)}
-          />
+          <Box mt="3" className="row">
+            <InputField
+              label="이메일"
+              id="user_email"
+              placeholder="이메일을 입력해주세요."
+              value={email}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleEmailChange(e.target.value)}
+            />
+          </Box>
           {error.email && (
             <Text as="p" color="red" size="2" weight="medium" mt="2" ml="2">
               이메일 형식이 올바르지 않습니다.
             </Text>
           )}
-          <InputField
-            label="이름"
-            id="user_name"
-            placeholder="이름을 입력해주세요."
-            value={name}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleNameChange(e.target.value)}
-          />
-          <InputField
-            label="비밀번호"
-            id="user_pw"
-            type="password"
-            placeholder="비밀번호를 입력해주세요."
-            value={password}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => handlePasswordChange(e.target.value)}
-          />
+          <Box mt="3" className="row">
+            <InputField
+              label="이름"
+              id="user_name"
+              placeholder="이름을 입력해주세요."
+              value={name}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleNameChange(e.target.value)}
+            />
+          </Box>
+          <Box mt="3" className="row">
+            <InputField
+              label="비밀번호"
+              id="user_pw"
+              type="password"
+              placeholder="비밀번호를 입력해주세요."
+              value={password}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handlePasswordChange(e.target.value)}
+            />
+          </Box>
           {error.password && (
             <Text as="p" color="red" size="2" weight="medium" mt="2" ml="2">
               영어, 숫자, 특수문자를 포함한 최소 8자 이상, 최대 20자 이하여야 합니다.
             </Text>
           )}
-          <InputField
-            label="비밀번호 확인"
-            id="user_pw_re"
-            type="password"
-            placeholder="비밀번호를 다시 입력해주세요."
-            value={passwordCheck}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => handlePasswordCheckChange(e.target.value)}
-          />
+          <Box mt="3" className="row">
+            <InputField
+              label="비밀번호 확인"
+              id="user_pw_re"
+              type="password"
+              placeholder="비밀번호를 다시 입력해주세요."
+              value={passwordCheck}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handlePasswordCheckChange(e.target.value)}
+            />
+          </Box>
           {error.passwordCheck && (
             <Text as="p" color="red" size="2" weight="medium" mt="2" ml="2">
               비밀번호가 일치하지 않습니다.
             </Text>
           )}
           <Box mt="3" className="row">
-            <Text as="label" weight="medium" htmlFor="user_cls">
-              클래스
-            </Text>
-            <Flex
-              mt="2"
-              justify="start"
-              align="center"
-              direction="row"
-              gap="30px"
-              gapY="10px"
-              wrap="wrap"
-              className="radio_box"
-              asChild
-            >
-              <RadioGroup.Root
-                defaultValue="ai"
-                name="user_cls"
-                size="3"
-                value={course}
-                onValueChange={handleCourseChange}
-              >
-                <RadioGroup.Item id="user_cls_ai" value="AI 엔지니어링">
-                  AI 엔지니어링
-                </RadioGroup.Item>
-                <RadioGroup.Item id="user_cls_cloud" value="클라우드 엔지니어링">
-                  클라우드 엔지니어링
-                </RadioGroup.Item>
-                <RadioGroup.Item id="user_cls_service" value="클라우드 서비스">
-                  클라우드 서비스 개발
-                </RadioGroup.Item>
-              </RadioGroup.Root>
-            </Flex>
+            <ClassRadioGroup course={course} onChange={handleCourseChange} />
           </Box>
         </div>
         <Box mt="6" className="btn_join">
diff --git a/components/auth/LoginForm.tsx b/components/auth/LoginForm.tsx
index 50a8f0b..d0fb11a 100644
--- a/components/auth/LoginForm.tsx
+++ b/components/auth/LoginForm.tsx
@@ -40,21 +40,25 @@ export default function LoginForm({ onLogin }: LoginFormProps) {
     <AuthFormLayout title="로그인">
       <form onSubmit={handleLogin}>
         <div className="input_box">
-          <InputField
-            label="이메일"
-            id="user_email"
-            placeholder="이메일을 입력해주세요."
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-          />
-          <InputField
-            label="비밀번호"
-            id="user_pw"
-            type="password"
-            placeholder="비밀번호를 입력해주세요."
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-          />
+          <Box mt="3" className="row">
+            <InputField
+              label="이메일"
+              id="user_email"
+              placeholder="이메일을 입력해주세요."
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </Box>
+          <Box mt="3" className="row">
+            <InputField
+              label="비밀번호"
+              id="user_pw"
+              type="password"
+              placeholder="비밀번호를 입력해주세요."
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+          </Box>
         </div>
         <Box mt="6" className="btn_login">
           <CommonButton type="submit" style="dark_purple">
diff --git a/components/common/CommonButton.tsx b/components/common/CommonButton.tsx
index c3e332b..683784d 100644
--- a/components/common/CommonButton.tsx
+++ b/components/common/CommonButton.tsx
@@ -6,19 +6,20 @@ import Link from 'next/link';
 interface CommonButtonProps {
   type: 'submit' | 'button' | 'link';
   href?: string;
+  disabled?: boolean;
   style: 'dark_purple' | 'light_purple' | 'dark_gray' | 'light_gray';
   children: React.ReactNode;
 }
 
-export default function CommonButton({ type, href, style, children }: CommonButtonProps) {
+export default function CommonButton({ type, href, disabled, style, children }: CommonButtonProps) {
   return (
     <>
       {type == 'submit' ? (
-        <button type="submit" className={styles[style]}>
+        <button type="submit" className={styles[style]} disabled={disabled}>
           {children}
         </button>
       ) : type == 'button' ? (
-        <button type="button" className={styles[style]}>
+        <button type="button" className={styles[style]} disabled={disabled}>
           {children}
         </button>
       ) : (
diff --git a/components/common/Header/Header.module.css b/components/common/Header/Header.module.css
index 6190e0e..16bdd9f 100644
--- a/components/common/Header/Header.module.css
+++ b/components/common/Header/Header.module.css
@@ -2,21 +2,34 @@
   background-color: #fff;
   border-bottom: 2px solid var(--main-color-3);
 }
+
+.header_landing {
+  position: sticky;
+  top: 0;
+  border-bottom: none;
+  background-color: #fff;
+  transition: background-color 0.3s ease;
+  z-index: 100;
+}
+
 .header_inner {
   position: relative;
 }
+
 .logo {
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
 }
+
 .logo p {
   font-size: 28px;
   font-weight: 300;
   line-height: 1;
   color: var(--main-color-3);
 }
+
 .logo p i {
   display: inline-block;
   font-weight: 700;
@@ -26,9 +39,11 @@
   height: 75px;
   line-height: 75px;
 }
+
 .gnb ul li {
   position: relative;
 }
+
 .gnb ul li:before {
   content: '';
   display: block;
@@ -41,6 +56,7 @@
   border-radius: 100%;
   background-color: var(--main-color-2);
 }
+
 .gnb ul li:first-of-type:before {
   display: none;
 }
@@ -51,19 +67,23 @@
   top: 50%;
   transform: translateY(-50%);
 }
+
 .user_name {
   background-size: cover;
   background-position: 50% 50%;
   border-radius: 100%;
   overflow: hidden;
 }
+
 .user_txt {
   line-height: 1;
 }
+
 .user_txt strong {
   display: block;
   font-weight: 500;
 }
+
 .user_txt p {
   line-height: 1;
   color: #bab2bb;
@@ -83,9 +103,11 @@
     line-height: 60px;
     gap: 32px;
   }
+
   .gnb ul li:before {
     left: -17px;
   }
+
   .gnb ul li p {
     font-size: 16px;
   }
@@ -94,9 +116,11 @@
     width: 30px;
     height: 30px;
   }
+
   .user_txt strong {
     font-size: 14px;
   }
+
   .user_txt p {
     font-size: 12px;
   }
@@ -109,13 +133,16 @@
     height: 60px;
     text-align: center;
   }
+
   .logo p {
     font-size: 20px;
     line-height: 60px !important;
   }
+
   .gnb {
     display: none;
   }
+
   .user_info {
     display: none;
   }
diff --git a/components/common/Header/Header.tsx b/components/common/Header/Header.tsx
index eda4efb..6064033 100644
--- a/components/common/Header/Header.tsx
+++ b/components/common/Header/Header.tsx
@@ -4,22 +4,49 @@ import Link from 'next/link';
 import { Box, Flex, Heading, Strong, Text } from '@radix-ui/themes';
 import styles from './Header.module.css';
 import HeaderNav from './HeaderNav';
-import rankingImg from '@/assets/icons/ranking_profile_img.png';
+import rankingImg from '@/public/imgs/ranking/ranking_profile_img.png';
 import Image from 'next/image';
 
 import { useUserInfoStore } from '@/stores/memberStore';
 import { useSession } from 'next-auth/react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { getUserInfo } from '@/apis/memberApi';
+import { usePathname } from 'next/navigation';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
 
 export default function Header() {
   const { userInfo, setUserInfo } = useUserInfoStore();
 
-  const { data: session, update } = useSession();
+  const { data: session } = useSession();
 
   const accessToken = session?.user?.accessToken;
   const refreshToken = session?.user?.refreshToken;
 
+  // 루트 경로에서만 특정 이벤트 추가
+  const pathname = usePathname();
+  const isRootPath = pathname === '/';
+
+  useEffect(() => {
+    if (isRootPath) {
+      const header = document.querySelector(`.${styles.header_landing}`);
+
+      gsap.to(header, {
+        backgroundColor: 'rgba(255, 255, 255, 0.5)',
+        backdropFilter: 'blur(8px)',
+        scrollTrigger: {
+          trigger: document.body,
+          start: '2% 0%',
+          end: '10% 20%',
+          scrub: true,
+          markers: false,
+        },
+      });
+    }
+  }, [isRootPath]);
+
   // update();
 
   useEffect(() => {
@@ -42,11 +69,11 @@ export default function Header() {
         }
       }
     })();
-  }, [accessToken, refreshToken, setUserInfo]);
+  });
 
   return (
     <Box px="5" asChild>
-      <header className={styles.header}>
+      <header className={`${isRootPath ? styles.header_landing : styles.header}`}>
         <Box className={styles.header_inner}>
           <Heading as="h1" className={styles.logo}>
             <Link href="/">
diff --git a/components/landing/Landing.module.css b/components/landing/Landing.module.css
new file mode 100644
index 0000000..701cfd2
--- /dev/null
+++ b/components/landing/Landing.module.css
@@ -0,0 +1,295 @@
+@font-face {
+  font-family: 'yg-jalnan';
+  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'SUIT-Regular';
+  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.landing_wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  top: 0;
+}
+
+/* 인트로 섹션 */
+.intro {
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 95vh;
+  background: linear-gradient(to bottom, #fff 3%, #f9f9ff 10%, #e7dcfd 50%, #d0d4ff 100%);
+}
+
+.intro_section {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.timer_icon_wrap {
+  width: 35%;
+  height: auto;
+}
+
+.timer_icon {
+  animation: swing 2s infinite ease-in-out;
+}
+
+@keyframes swing {
+  0% {
+    transform: translateX(-10px) rotate(-5deg);
+  }
+
+  50% {
+    transform: translateX(10px) rotate(5deg);
+  }
+
+  100% {
+    transform: translateX(-10px) rotate(-5deg);
+  }
+}
+
+.intro_text_wrap {
+  padding: 0px 50px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.intro_text {
+  font: 90px 'yg-jalnan';
+  color: rgb(68, 68, 68);
+}
+
+.intro_btn_wrap {
+  margin-top: 30px;
+}
+
+.intro_text_detail {
+  font-family: 'SUIT-Regular';
+  color: rgb(68, 68, 68);
+}
+
+.intro_btn {
+  font-weight: bold;
+  background-color: white;
+  padding: 12px 15px;
+  margin-right: 10px;
+  font-size: 16px;
+  cursor: pointer;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+  border-radius: 8px;
+}
+
+.intro_btn:hover {
+  background-color: var(--main-color-2);
+  color: white;
+}
+
+.inquiry_icon {
+  width: 27px;
+  padding-right: 8px;
+}
+
+.notion_icon {
+  width: 25px;
+  padding-right: 10px;
+}
+
+.intro_arrow_wrap {
+  position: absolute;
+  bottom: 100px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.arrow {
+  width: 50px;
+  animation: blink 1.5s infinite ease-in-out;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  50% {
+    opacity: 0.4;
+    transform: translateY(10px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 부가설명 */
+
+.add_explane {
+  width: 100%;
+  background-color: #fdfdfd;
+  text-align: center;
+  padding: 150px 0px;
+}
+
+.add_explane_text {
+  font-size: 30px;
+  line-height: 55px;
+  font-weight: 500;
+}
+
+/* 타이머소개섹션 */
+
+/* animation 설정*/
+.timer_detail_wrap,
+.timer_img_wrap,
+.ranking_detail_wrap,
+.ranking_img_wrap,
+.cal_detail_wrap,
+.cal_img_wrap {
+  opacity: 0;
+  transform: translateY(150px);
+  transition: all 0.5s;
+}
+
+.timer_detail,
+.ranking_detail,
+.cal_detail {
+  display: block;
+  margin-top: 15px;
+}
+
+.timer_detail_wrap {
+  padding: 100px 0px 50px 0px;
+  text-align: center;
+}
+
+.timer_title {
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.timer_title_icon {
+  width: 35px;
+  padding-right: 10px;
+}
+
+.timer_img_wrap {
+  padding-bottom: 100px;
+}
+
+.timer_img_desktop,
+.timer_img_mobile {
+  position: relative;
+  width: 45%;
+  border-radius: 20px;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+}
+
+.timer_img_desktop {
+  left: 50%;
+  transform: translate(-50%, 0%);
+}
+
+.timer_img_mobile {
+  width: 15%;
+  left: 25%;
+  transform: translate(-30%, 20%);
+}
+
+/* 랭킹 소개, 기록 확인*/
+
+.ranking,
+.cal {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.ranking_inner,
+.cal_inner {
+  width: 80%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ranking_img_wrap,
+.cal_img_wrap {
+  width: 50%;
+  display: flex;
+}
+
+.ranking_img_wrap {
+  justify-content: flex-end;
+}
+
+.cal_img_wrap {
+  justify-content: flex-start;
+}
+
+.ranking_img_desktop,
+.cal_img_desktop {
+  border-radius: 20px;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  width: 80%;
+}
+
+.cal_img_desktop {
+  width: 85%;
+}
+
+.ranking_title {
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+}
+
+.cal_title {
+  font-weight: bold;
+}
+
+.cal_title_icon {
+  width: 42px;
+}
+
+.cal_detail_wrap {
+  padding-left: 100px;
+  text-align: left;
+}
+
+.cal_title_icon {
+  height: 40px;
+  padding-right: 5px;
+}
+
+/* 기록확인 */
+
+.cal_img_desktop,
+.cal_record_img {
+  position: relative;
+  border-radius: 20px;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+}
+
+.cal_record_img {
+  width: 50%;
+  height: 80%;
+  right: 20%;
+  transform: translate(-40%, 60%);
+}
diff --git a/components/landing/Landing.tsx b/components/landing/Landing.tsx
new file mode 100644
index 0000000..a9bd3db
--- /dev/null
+++ b/components/landing/Landing.tsx
@@ -0,0 +1,216 @@
+'use client';
+import { Box, Text } from '@radix-ui/themes';
+import styles from './Landing.module.css';
+import { useEffect, useRef } from 'react';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import Image from 'next/image';
+
+gsap.registerPlugin(ScrollTrigger);
+
+export default function Landing() {
+  const timerRef = useRef(null);
+  const rankingRef = useRef(null);
+  const calRef = useRef(null);
+
+  const timerDetailRef = useRef(null);
+  const timerImgWrapRef = useRef(null);
+  const rankingDetailRef = useRef(null);
+  const rankingImgWrapRef = useRef(null);
+  const calDetailRef = useRef(null);
+  const calImgWrapRef = useRef(null);
+
+  useEffect(() => {
+    const commonGsapAni = {
+      y: 0,
+      opacity: 1,
+      ease: 'circ.out',
+    };
+
+    const tl = gsap.timeline({
+      scrollTrigger: {
+        trigger: timerRef.current,
+        start: '0% 80%',
+        end: '50% 50%',
+        scrub: true,
+        markers: false,
+      },
+    });
+
+    tl.to(timerDetailRef.current, commonGsapAni).to(timerImgWrapRef.current, commonGsapAni);
+
+    const t2 = gsap.timeline({
+      scrollTrigger: {
+        trigger: rankingRef.current,
+        start: '60% bottom',
+        end: 'bottom 70%',
+        scrub: true,
+        markers: false,
+      },
+    });
+
+    t2.to(rankingDetailRef.current, commonGsapAni, 0).to(rankingImgWrapRef.current, commonGsapAni, 0);
+
+    const t3 = gsap.timeline({
+      scrollTrigger: {
+        trigger: calRef.current,
+        start: '0% 50%',
+        end: '50% 30%',
+        scrub: true,
+        markers: false,
+      },
+    });
+
+    t3.to(calDetailRef.current, commonGsapAni, 0).to(calImgWrapRef.current, commonGsapAni, 0);
+  }, []);
+
+  return (
+    <Box className={styles.landing_wrap}>
+      <section className={styles.intro}>
+        <div className={styles.intro_section}>
+          <div className={styles.timer_icon_wrap}>
+            <Image
+              src="/imgs/landing/landing_timer_icon.png"
+              alt="랜딩타이머아이콘"
+              className={styles.timer_icon}
+              width={500}
+              height={500}
+              quality={100}
+              layout="responsive"
+            />
+          </div>
+          <div className={styles.intro_text_wrap}>
+            <Text className={styles.intro_text}>우행시</Text>
+            <Text size="6" className={styles.intro_text_detail}>
+              <strong>우</strong>리들의 <strong>행</strong>복한 <strong>시</strong>간을 효율적으로 관리하자!
+              <br />
+              쉽고 간편하게 공부 기록을 확인해보세요.
+            </Text>
+            <div className={styles.intro_btn_wrap}>
+              <a
+                href="https://docs.google.com/forms/d/1N7evntVJ_DmTpZdOxVvR3y8IHkLWBoiKxLxFbTDtFtE/edit?ts=66ce99ee"
+                target="_blank"
+                rel="noopener noreferrer"
+                className={styles.intro_btn}
+              >
+                <img src="/imgs/landing/inquiry.png" alt="문의하기아이콘" className={styles.inquiry_icon} />
+                문의하기
+              </a>
+              <a
+                href="https://ionized-toad-6ee.notion.site/woohaengshi-8e37b80ac8c64feba132ae91bde8d4c8"
+                target="_blank"
+                rel="noopener noreferrer"
+                className={styles.intro_btn}
+              >
+                <img src="/imgs/landing/notion.png" alt="노션아이콘" className={styles.notion_icon} />
+                노션보러가기
+              </a>
+            </div>
+          </div>
+        </div>
+        <div className={styles.intro_arrow_wrap}>
+          <img src="/imgs/landing/arrow.png" alt="스크롤 유도 아이콘" className={styles.arrow} />
+        </div>
+      </section>
+      <section className={styles.add_explane}>
+        <Text className={styles.add_explane_text}>
+          시간 측정부터 과목 선택, 랭킹 확인까지 한 번에! <br />
+          교육생의 학습 시간을 체계적으로 관리할 수 있는 서비스, <br />
+          우행시와 함께라면 성장을 눈으로 확인할 수 있습니다.
+        </Text>
+      </section>
+      {/* 타이머 소개 섹션 */}
+      <section ref={timerRef} className={styles.timer}>
+        <div ref={timerDetailRef} className={styles.timer_detail_wrap}>
+          <Text size="8" className={styles.timer_title}>
+            <img src="/imgs/landing/clock.png" alt="타이머아이콘" className={styles.timer_title_icon} />
+            공부시작
+          </Text>
+          <Text size="5" className={styles.timer_detail}>
+            내가 선택한 과목으로 공부 시간을 실시간으로 측정할 수 있어요. <br />
+            언제 어디서든 공부를 시작하고 시간을 기록해보세요.
+          </Text>
+        </div>
+        <div ref={timerImgWrapRef} className={styles.timer_img_wrap}>
+          <img
+            src="/imgs/landing/landing_timer_desktop.png"
+            alt="랜딩타이머데스크탑"
+            className={styles.timer_img_desktop}
+          />
+          <img
+            src="/imgs/landing/landing_timer_mobile.png"
+            alt="랜딩타이머모바일"
+            className={styles.timer_img_mobile}
+          />
+        </div>
+      </section>
+      {/* 순위조회 소개 섹션 */}
+      <section ref={rankingRef} className={styles.ranking}>
+        <div className={styles.ranking_inner}>
+          <div ref={rankingDetailRef} className={styles.ranking_detail_wrap}>
+            <Text size="8" className={styles.ranking_title}>
+              <Image
+                src="/imgs/landing/trophy.png"
+                width={50}
+                height={50}
+                quality={100}
+                alt="트로피아이콘"
+                className={styles.ranking_title_icon}
+              />
+              순위조회
+              <br />
+            </Text>
+            <Text size="5" className={styles.ranking_detail}>
+              일, 주, 월별로 나의 학습 순위를 확인하고, <br />
+              다른 반 학생들과 경쟁할 수 있어요. <br />
+              매일 꾸준히 공부한 시간만큼 높은 순위에 오를 수 있습니다!
+            </Text>
+          </div>
+          <div ref={rankingImgWrapRef} className={styles.ranking_img_wrap}>
+            <img
+              src="/imgs/landing/landing_ranking_desktop.png"
+              alt="랜딩랭킹데스크탑"
+              className={styles.ranking_img_desktop}
+            />
+          </div>
+        </div>
+      </section>
+      {/* 기록확인 소개 섹션 */}
+      <section ref={calRef} className={styles.cal}>
+        <div className={styles.cal_inner}>
+          <div ref={calImgWrapRef} className={styles.cal_img_wrap}>
+            <img src="/imgs/landing/landing_cal_desktop.png" alt="랜딩캘린더모달" className={styles.cal_img_desktop} />
+            <img
+              src="/imgs/landing/landing_cal_record.png"
+              alt="랜딩캘린더기록확인"
+              className={styles.cal_record_img}
+            />
+          </div>
+          <div ref={calDetailRef} className={styles.cal_detail_wrap}>
+            <Text size="8" className={styles.cal_title}>
+              <Image
+                src="/imgs/landing/cal.png"
+                width={50}
+                height={50}
+                quality={100}
+                alt="트로피아이콘"
+                className={styles.cal_title_icon}
+              />
+              기록확인
+              <br />
+            </Text>
+            <Text size="5" className={styles.cal_detail}>
+              한눈에 나의 학습 기록을 확인해보세요.
+              <br />
+              일별 공부 시간을 달력에 표시하고, <br />
+              각 날짜에 공부한 과목을 쉽게 확인할 수 있어요.
+              <br />
+              해당 날짜를 클릭하면, <br />
+              모달창에서 나만의 회고록을 작성할 수 있습니다.
+            </Text>
+          </div>
+        </div>
+      </section>
+    </Box>
+  );
+}
diff --git a/components/mypage/MypageTabMenu.tsx b/components/mypage/MypageTabMenu.tsx
index e54bc6f..27b28e4 100644
--- a/components/mypage/MypageTabMenu.tsx
+++ b/components/mypage/MypageTabMenu.tsx
@@ -18,6 +18,7 @@ export default function MypageTabMenu() {
     { link: '/mypage', title: '내 배지 조회' },
     { link: '/mypage/subjectedit', title: '과목 편집' },
     { link: '/mypage/pwupdate', title: '비밀번호 수정' },
+    { link: '/mypage/infoupdate', title: '회원정보 수정' },
   ];
 
   const [pathTabTitle] = tabMenu.filter((tab) => {
diff --git a/components/mypage/PwUpdateForm.tsx b/components/mypage/PwUpdateForm.tsx
index 429cc9d..f544d46 100644
--- a/components/mypage/PwUpdateForm.tsx
+++ b/components/mypage/PwUpdateForm.tsx
@@ -66,7 +66,7 @@ export default function PwUpdateForm({ onUpdate }: IUpdateForm) {
   };
 
   return (
-    <Box className="form_box">
+    <Box className="form_box" p="1">
       <form onSubmit={submitHandler}>
         <Box className="row">
           <Text as="label" weight="medium">
diff --git a/components/mypage/UserProfile.module.css b/components/mypage/UserProfile.module.css
index 51da37e..410326b 100644
--- a/components/mypage/UserProfile.module.css
+++ b/components/mypage/UserProfile.module.css
@@ -2,17 +2,22 @@
   font-size: 0;
   text-align: center;
 }
+
 .img_box {
   position: relative;
   display: inline-block;
 }
+
 .back_img {
   background-repeat: no-repeat;
   background-position: 50% 50%;
   border-radius: 100%;
   background-size: cover;
   overflow: hidden;
+  width: 180px;
+  height: 180px;
 }
+
 .back_img span {
   width: 180px;
   height: 180px;
@@ -21,6 +26,7 @@
 .btn_file input[type='file'] {
   display: none;
 }
+
 .btn_file button {
   position: absolute;
   right: 0px;
diff --git a/components/ranking/fullRankingList.tsx b/components/ranking/fullRankingList.tsx
index b81d058..4277a8e 100644
--- a/components/ranking/fullRankingList.tsx
+++ b/components/ranking/fullRankingList.tsx
@@ -4,7 +4,7 @@ import Image from 'next/image';
 import styles from './fullRankingList.module.css';
 import InfiniteScroll from 'react-infinite-scroller';
 import { Student } from '@/types/rankingType';
-import rankingImg from '@/assets/icons/ranking_profile_img.png';
+import rankingImg from '@/public/imgs/ranking/ranking_profile_img.png';
 import { formatTime } from '@/utils/formatTimeUtils';
 
 interface FullRankingListProps {
diff --git a/components/ranking/topRanking.tsx b/components/ranking/topRanking.tsx
index 7d1abd1..44abd52 100644
--- a/components/ranking/topRanking.tsx
+++ b/components/ranking/topRanking.tsx
@@ -4,7 +4,7 @@ import styles from './topRankingList.module.css';
 import rankingOne from '@/public/imgs/medal_first_on.svg';
 import rankingTwo from '@/public/imgs/medal_second_on.svg';
 import rankingThird from '@/public/imgs/medal_third_on.svg';
-import rankingImg from '@/assets/icons/ranking_profile_img.png';
+import rankingImg from '@/public/imgs/ranking/ranking_profile_img.png';
 import Image from 'next/image';
 
 import { Student } from '@/types/rankingType';
diff --git a/middleware.ts b/middleware.ts
index 1a29c67..21285a1 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -31,5 +31,5 @@ export default async function middleware(request: NextRequest, response: NextRes
 
 // 미들웨어가 적용될 경로 설정
 export const config = {
-  matcher: ['/', '/ranking', '/record', '/study', '/mypage'],
+  matcher: ['/', '/ranking', '/record', '/study', '/mypage/:path*'],
 };
diff --git a/package-lock.json b/package-lock.json
index dc16933..49913b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/themes": "^3.1.1",
         "@vercel/analytics": "^1.3.1",
+        "gsap": "^3.12.5",
         "js-cookie": "^3.0.5",
         "lodash": "^4.17.21",
         "next": "14.2.5",
@@ -8018,6 +8019,11 @@
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "dev": true
     },
+    "node_modules/gsap": {
+      "version": "3.12.5",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz",
+      "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ=="
+    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
diff --git a/package.json b/package.json
index e0599fa..d291a80 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^3.1.1",
     "@vercel/analytics": "^1.3.1",
+    "gsap": "^3.12.5",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "next": "14.2.5",
diff --git a/public/imgs/landing/arrow.png b/public/imgs/landing/arrow.png
new file mode 100644
index 0000000..9edef51
Binary files /dev/null and b/public/imgs/landing/arrow.png differ
diff --git a/public/imgs/landing/cal.png b/public/imgs/landing/cal.png
new file mode 100644
index 0000000..e5bb1f3
Binary files /dev/null and b/public/imgs/landing/cal.png differ
diff --git a/public/imgs/landing/cal_timer.png b/public/imgs/landing/cal_timer.png
new file mode 100644
index 0000000..51cda5a
Binary files /dev/null and b/public/imgs/landing/cal_timer.png differ
diff --git a/public/imgs/landing/clock.png b/public/imgs/landing/clock.png
new file mode 100644
index 0000000..71837c7
Binary files /dev/null and b/public/imgs/landing/clock.png differ
diff --git a/public/imgs/landing/inquiry.png b/public/imgs/landing/inquiry.png
new file mode 100644
index 0000000..5496934
Binary files /dev/null and b/public/imgs/landing/inquiry.png differ
diff --git a/public/imgs/landing/landing_cal_desktop.png b/public/imgs/landing/landing_cal_desktop.png
new file mode 100644
index 0000000..8c96f8e
Binary files /dev/null and b/public/imgs/landing/landing_cal_desktop.png differ
diff --git a/public/imgs/landing/landing_cal_record.png b/public/imgs/landing/landing_cal_record.png
new file mode 100644
index 0000000..d14c4a3
Binary files /dev/null and b/public/imgs/landing/landing_cal_record.png differ
diff --git a/public/imgs/landing/landing_ranking_desktop.png b/public/imgs/landing/landing_ranking_desktop.png
new file mode 100644
index 0000000..9ad1dc4
Binary files /dev/null and b/public/imgs/landing/landing_ranking_desktop.png differ
diff --git a/public/imgs/landing/landing_timer.png b/public/imgs/landing/landing_timer.png
new file mode 100644
index 0000000..066072f
Binary files /dev/null and b/public/imgs/landing/landing_timer.png differ
diff --git a/public/imgs/landing/landing_timer_desktop.png b/public/imgs/landing/landing_timer_desktop.png
new file mode 100644
index 0000000..0a0ae2f
Binary files /dev/null and b/public/imgs/landing/landing_timer_desktop.png differ
diff --git a/public/imgs/landing/landing_timer_icon.png b/public/imgs/landing/landing_timer_icon.png
new file mode 100644
index 0000000..95d792d
Binary files /dev/null and b/public/imgs/landing/landing_timer_icon.png differ
diff --git a/public/imgs/landing/landing_timer_mobile.png b/public/imgs/landing/landing_timer_mobile.png
new file mode 100644
index 0000000..288866b
Binary files /dev/null and b/public/imgs/landing/landing_timer_mobile.png differ
diff --git a/public/imgs/landing/notion.png b/public/imgs/landing/notion.png
new file mode 100644
index 0000000..2ebabb7
Binary files /dev/null and b/public/imgs/landing/notion.png differ
diff --git a/public/imgs/landing/timer_caleander.png b/public/imgs/landing/timer_caleander.png
new file mode 100644
index 0000000..a77a140
Binary files /dev/null and b/public/imgs/landing/timer_caleander.png differ
diff --git a/public/imgs/landing/trophy.png b/public/imgs/landing/trophy.png
new file mode 100644
index 0000000..3a74c44
Binary files /dev/null and b/public/imgs/landing/trophy.png differ
diff --git a/assets/icons/profile_img_file.png b/public/imgs/mypage/profile_img_file.png
similarity index 100%
rename from assets/icons/profile_img_file.png
rename to public/imgs/mypage/profile_img_file.png
diff --git a/assets/icons/ranking_profile_img.png b/public/imgs/ranking/ranking_profile_img.png
similarity index 100%
rename from assets/icons/ranking_profile_img.png
rename to public/imgs/ranking/ranking_profile_img.png
diff --git a/assets/icons/subject_delete.png b/public/imgs/subject/subject_delete.png
similarity index 100%
rename from assets/icons/subject_delete.png
rename to public/imgs/subject/subject_delete.png
diff --git a/assets/icons/subject_edit_back.png b/public/imgs/subject/subject_edit_back.png
similarity index 100%
rename from assets/icons/subject_edit_back.png
rename to public/imgs/subject/subject_edit_back.png
diff --git a/public/timeout.png b/public/timeout.png
index 7803f0d..558f239 100644
Binary files a/public/timeout.png and b/public/timeout.png differ
diff --git a/stores/authStore.ts b/stores/authStore.ts
index d99d7b6..33fadfc 100644
--- a/stores/authStore.ts
+++ b/stores/authStore.ts
@@ -5,11 +5,13 @@ interface joinState {
   name: string;
   password: string;
   passwordCheck: string;
+  image: File | null;
   course: string;
   setEmail: (email: string) => void;
   setName: (name: string) => void;
   setPassword: (password: string) => void;
   setPasswordCheck: (passwordCheck: string) => void;
+  setImage: (image: File | null) => void;
   setCourse: (course: string) => void;
   setAllEmpty: () => void;
 }
@@ -19,11 +21,13 @@ export const useJoinStore = create<joinState>((set) => ({
   name: '',
   password: '',
   passwordCheck: '',
+  image: null,
   course: '',
   setEmail: (email: string) => set({ email }),
   setName: (name: string) => set({ name }),
   setPassword: (password: string) => set({ password }),
   setPasswordCheck: (passwordCheck: string) => set({ passwordCheck }),
+  setImage: (image: File | null) => set({ image }),
   setCourse: (course: string) => set({ course }),
-  setAllEmpty: () => set({ email: '', name: '', password: '', passwordCheck: '', course: '' }),
+  setAllEmpty: () => set({ email: '', name: '', password: '', passwordCheck: '', image: null, course: '' }),
 }));