diff --git a/README.md b/README.md
new file mode 100644
index 00000000..005647aa
--- /dev/null
+++ b/README.md
@@ -0,0 +1,98 @@
+<p align="center">
+    <img src="https://user-images.githubusercontent.com/83967672/186716387-7603cec6-d992-485b-a3c3-e50bf0e2c436.png" width="300" height="300">
+</p>
+
+<div align="center">
+  📖  함께 사용하는 우리의 공간, 우리가 체크하자!
+</div>
+
+<br>
+
+<div align="center">
+
+[![Application](http://img.shields.io/badge/Application-blue?style=flat-square&logo=googlechrome&logoColor=white&link=https://https://gongcheck.day//)](https://gongcheck.day/)
+[![Tech Blog](http://img.shields.io/badge/Tech%20Blog-green?style=flat-square&logo=github&logoColor=white&link=https://gong-check.github.io/dev-blog/)](https://gong-check.github.io/dev-blog/)
+
+</div>
+
+<div align="center">
+
+![](https://img.shields.io/github/workflow/status/woowacourse-teams/2022-gong-check/frontend?label=frontend&logo=github&style=flat-square)
+![](https://img.shields.io/github/workflow/status/woowacourse-teams/2022-gong-check/sonarqube%20backend?label=backend&logo=github&style=flat-square)
+![](https://img.shields.io/github/workflow/status/woowacourse-teams/2022-gong-check/sonar%20imagestorage?label=imagestorage&logo=github&style=flat-square)
+
+</div>
+
+## 🛠 Tech Stacks
+
+### Front-End
+
+<img width="1190" alt="Screen Shot 2022-08-27 at 4 45 07 PM" src="https://user-images.githubusercontent.com/83967672/187020629-9dd735c0-e9b0-4928-ba37-32b38a67254e.png">
+
+### Back-End
+
+<img width="1190" alt="Screen Shot 2022-08-26 at 1 04 01 AM" src="https://user-images.githubusercontent.com/83967672/186714598-6796120d-3476-4792-932e-6f9eb22e5df3.png">
+
+### Infra
+
+<img width="1190" alt="Screen Shot 2022-08-26 at 1 05 05 AM" src="https://user-images.githubusercontent.com/83967672/186714751-0c967709-6034-419e-8542-243e7bd696fc.png">
+
+<br>
+
+## 🛰 Infrastructures
+
+### Architecture
+
+<img width="1015" alt="Screen Shot 2022-08-27 at 4 45 57 PM" src="https://user-images.githubusercontent.com/83967672/187020639-8bf9717f-c586-44c0-9fdf-b0416300566e.png">
+
+### CI/CD Pipeline
+
+<img width="1200" alt="Screen Shot 2022-08-27 at 4 46 27 PM" src="https://user-images.githubusercontent.com/83967672/187020661-7531ee0a-f7bd-4a91-af0c-96af810d6866.png">
+
+<br>
+
+## 🫂 Members
+
+|            [코카콜라](https://github.com/intae92)            |             [온스타](https://github.com/cks3066)             |           [어썸오](https://github.com/awesomeo184)           |          [오리](https://github.com/jinyoungchoi95)           |             [쿼리치](https://github.com/meatsby)             |             [찬](https://github.com/kimchan123)              |          [범고래](https://github.com/cndqjacndqja)           |
+| :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: |
+| <img src="https://avatars.githubusercontent.com/u/56149367?v=4" alt="Avatar" style="width:300px;" /> | <img src="https://avatars.githubusercontent.com/u/62434898?v=4" alt="Avatar" style="width:300px;" /> | <img src="https://avatars.githubusercontent.com/u/63030569?v=4" alt="Avatar" style="width:300px;" /> | <img src="https://avatars.githubusercontent.com/u/69106910?v=4" alt="Avatar" style="width:300px;" /> | <img src="https://avatars.githubusercontent.com/u/83967672?v=4" alt="Avatar" style="width:300px;" /> | <img src="https://avatars.githubusercontent.com/u/55445564?v=4" alt="Avatar" style="width:300px;" /> | <img src="https://avatars.githubusercontent.com/u/48307960?v=4" alt="Avatar" style="width:300px;" /> |
+|                          프론트엔드                          |                          프론트엔드                          |                            백엔드                            |                            백엔드                            |                            백엔드                            |                            백엔드                            |                            백엔드                            |
+
+<br>
+
+## 🌌 Team Culture
+
+### 🛎 소통
+
+- 모르는 것을 부끄러워하지 말아요.
+- 질문은 자유롭게, 주장은 근거있게 해주세요.
+- 각 스프린트마다 찐하게 회고해요!
+
+### 📌 공유
+
+- 매일 출근하고 데일리 미팅을 진행해요.
+- 주 단위로 팀 전체의 To-do 리스트를 공유해요.
+- 매일 퇴근 전에 간단히 체크아웃 미팅을 진행해요.
+
+### 🔗 약속
+
+- 수평적인 관계로 서로를 존중해주세요.
+- 10AM-6PM 시간은 잘 지켜주세요.
+- 늦으면 벌칙이 있어요! ☕️
+
+### 🖍 이슈 관리
+
+- 생각나는 이슈가 있으면 바로바로 작성해주세요.
+- 사소해도 괜찮아요.
+- 자세하게 작성해주세요.
+- 이슈 형식에 너무 부담 갖지말아요.
+
+### 🔎 코드 리뷰
+
+- 모든 사람이 Approve 해야 Merge 할 수 있어요.
+- PR 은 일과 중에만 날려주세요.
+- 품질 높은 코드 리뷰를 위해 구체적으로 PR 을 작성해주세요.
+
+### 📝 팀 블로그
+
+- 서로 배운 내용을 일주일에 한 번씩 글로 작성해서 공유해요.
diff --git a/backend/src/main/java/com/woowacourse/gongcheck/core/application/SpaceService.java b/backend/src/main/java/com/woowacourse/gongcheck/core/application/SpaceService.java
index 8f625352..0017b94e 100644
--- a/backend/src/main/java/com/woowacourse/gongcheck/core/application/SpaceService.java
+++ b/backend/src/main/java/com/woowacourse/gongcheck/core/application/SpaceService.java
@@ -46,6 +46,12 @@ public SpaceService(final HostRepository hostRepository, final SpaceRepository s
         this.runningTaskRepository = runningTaskRepository;
     }
 
+    public SpaceResponse findSpace(final Long hostId, final Long spaceId) {
+        Host host = hostRepository.getById(hostId);
+        Space space = spaceRepository.getByHostAndId(host, spaceId);
+        return SpaceResponse.from(space);
+    }
+
     public SpacesResponse findSpaces(final Long hostId) {
         Host host = hostRepository.getById(hostId);
         List<Space> spaces = spaceRepository.findAllByHost(host);
@@ -67,23 +73,6 @@ public Long createSpace(final Long hostId, final SpaceCreateRequest request) {
                 .getId();
     }
 
-    public SpaceResponse findSpace(final Long hostId, final Long spaceId) {
-        Host host = hostRepository.getById(hostId);
-        Space space = spaceRepository.getByHostAndId(host, spaceId);
-        return SpaceResponse.from(space);
-    }
-
-    @Transactional
-    public void changeSpace(final Long hostId, final Long spaceId, final SpaceChangeRequest request) {
-        Host host = hostRepository.getById(hostId);
-        Space space = spaceRepository.getByHostAndId(host, spaceId);
-        Name changeName = new Name(request.getName());
-        checkDuplicateSpaceName(changeName, host, space);
-
-        space.changeName(changeName);
-        space.changeImageUrl(request.getImageUrl());
-    }
-
     @Transactional
     public void removeSpace(final Long hostId, final Long spaceId) {
         Host host = hostRepository.getById(hostId);
@@ -101,6 +90,17 @@ public void removeSpace(final Long hostId, final Long spaceId) {
         spaceRepository.deleteById(spaceId);
     }
 
+    @Transactional
+    public void changeSpace(final Long hostId, final Long spaceId, final SpaceChangeRequest request) {
+        Host host = hostRepository.getById(hostId);
+        Space space = spaceRepository.getByHostAndId(host, spaceId);
+        Name changeName = new Name(request.getName());
+        checkDuplicateSpaceName(changeName, host, space);
+
+        space.changeName(changeName);
+        space.changeImageUrl(request.getImageUrl());
+    }
+
     private void checkDuplicateSpaceName(final Name spaceName, final Host host) {
         if (spaceRepository.existsByHostAndName(host, spaceName)) {
             String message = String.format("이미 존재하는 이름입니다. hostId = %d, spaceName = %s", host.getId(),
diff --git a/backend/src/main/java/com/woowacourse/gongcheck/exception/ControllerAdvice.java b/backend/src/main/java/com/woowacourse/gongcheck/exception/ControllerAdvice.java
index 32987e8a..72157d6a 100644
--- a/backend/src/main/java/com/woowacourse/gongcheck/exception/ControllerAdvice.java
+++ b/backend/src/main/java/com/woowacourse/gongcheck/exception/ControllerAdvice.java
@@ -11,6 +11,7 @@
 import org.springframework.web.bind.MethodArgumentNotValidException;
 import org.springframework.web.bind.annotation.ExceptionHandler;
 import org.springframework.web.bind.annotation.RestControllerAdvice;
+import org.springframework.web.context.request.async.AsyncRequestTimeoutException;
 
 @RestControllerAdvice
 @Slf4j
@@ -51,6 +52,11 @@ public ResponseEntity<ErrorResponse> handleInfrastructureException(final CustomE
         return ResponseEntity.internalServerError().body(ErrorResponse.from(e.getErrorCode()));
     }
 
+    @ExceptionHandler(AsyncRequestTimeoutException.class)
+    public void escapeFromAsyncRequestTimeoutException() {
+        // do nothing
+    }
+
     @ExceptionHandler(Exception.class)
     public ResponseEntity<ErrorResponse> handleInternalServerError(final Exception e) {
         log.error("Stack Trace : {}", extractStackTrace(e));
diff --git a/backend/src/test/java/com/woowacourse/gongcheck/core/application/HostServiceTest.java b/backend/src/test/java/com/woowacourse/gongcheck/core/application/HostServiceTest.java
index b5276855..2308edec 100644
--- a/backend/src/test/java/com/woowacourse/gongcheck/core/application/HostServiceTest.java
+++ b/backend/src/test/java/com/woowacourse/gongcheck/core/application/HostServiceTest.java
@@ -10,7 +10,6 @@
 import com.woowacourse.gongcheck.core.domain.host.Host;
 import com.woowacourse.gongcheck.core.presentation.request.SpacePasswordChangeRequest;
 import com.woowacourse.gongcheck.exception.NotFoundException;
-import org.junit.jupiter.api.BeforeEach;
 import org.junit.jupiter.api.DisplayName;
 import org.junit.jupiter.api.DisplayNameGeneration;
 import org.junit.jupiter.api.DisplayNameGenerator;
@@ -19,7 +18,7 @@
 import org.springframework.beans.factory.annotation.Autowired;
 
 @ApplicationTest
-@DisplayName("HostService 클래스")
+@DisplayName("HostService 클래스의")
 @DisplayNameGeneration(DisplayNameGenerator.ReplaceUnderscores.class)
 class HostServiceTest {
 
@@ -36,48 +35,35 @@ class HostServiceTest {
     class changeSpacePassword_메소드는 {
 
         @Nested
-        class 존재하는_Host의_id와_수정할_패스워드를_받는_경우 {
+        class 존재하는_HostId와_수정할_패스워드를_입력받는_경우 {
 
-            private static final String ORIGIN_PASSWORD = "1234";
             private static final String CHANGING_PASSWORD = "4567";
-            private static final long GITHUB_ID = 1234L;
 
-            private SpacePasswordChangeRequest spacePasswordChangeRequest;
-            private Long hostId;
-
-            @BeforeEach
-            void setUp() {
-                spacePasswordChangeRequest = new SpacePasswordChangeRequest(CHANGING_PASSWORD);
-                hostId = repository.save(Host_생성(ORIGIN_PASSWORD, GITHUB_ID))
-                        .getId();
-            }
+            private final Host host = repository.save(Host_생성("1234", 1L));
+            private final SpacePasswordChangeRequest spacePasswordChangeRequest = new SpacePasswordChangeRequest(
+                    CHANGING_PASSWORD);
 
             @Test
             void 패스워드를_수정한다() {
-                hostService.changeSpacePassword(hostId, spacePasswordChangeRequest);
-                Host actual = repository.getById(Host.class, hostId);
+                hostService.changeSpacePassword(host.getId(), spacePasswordChangeRequest);
+                Host actual = repository.getById(Host.class, host.getId());
 
                 assertThat(actual.getSpacePassword().getValue()).isEqualTo(CHANGING_PASSWORD);
             }
         }
 
         @Nested
-        class 존재하지_않는_Host의_id를_받는_경우 {
+        class 존재하지_않는_HostId를_입력받는_경우 {
 
             private static final String CHANGING_PASSWORD = "4567";
+            private static final long NON_EXIST_HOST_ID = 0L;
 
-            private SpacePasswordChangeRequest spacePasswordChangeRequest;
-            private Long hostId;
-
-            @BeforeEach
-            void setUp() {
-                spacePasswordChangeRequest = new SpacePasswordChangeRequest(CHANGING_PASSWORD);
-                hostId = 0L;
-            }
+            private final SpacePasswordChangeRequest spacePasswordChangeRequest = new SpacePasswordChangeRequest(
+                    CHANGING_PASSWORD);
 
             @Test
             void 예외를_발생시킨다() {
-                assertThatThrownBy(() -> hostService.changeSpacePassword(hostId, spacePasswordChangeRequest))
+                assertThatThrownBy(() -> hostService.changeSpacePassword(NON_EXIST_HOST_ID, spacePasswordChangeRequest))
                         .isInstanceOf(NotFoundException.class)
                         .hasMessageContaining("존재하지 않는 호스트입니다.");
             }
@@ -88,31 +74,26 @@ void setUp() {
     class createEntranceCode_메소드는 {
 
         @Nested
-        class 존재하는_Host의_id를_받는_경우 {
+        class 존재하는_HostId를_입력받는_경우 {
 
-            private Long hostId;
-            private String expected;
-
-            @BeforeEach
-            void setUp() {
-                hostId = repository.save(Host_생성("1234", 1111L))
-                        .getId();
-                expected = entranceCodeProvider.createEntranceCode(hostId);
-            }
+            private final Host host = repository.save(Host_생성("1234", 1L));
+            private final String expected = entranceCodeProvider.createEntranceCode(host.getId());
 
             @Test
-            void 입장코드를_반환한다() {
-                String actual = hostService.createEntranceCode(hostId);
+            void entranceCode를_반환한다() {
+                String actual = hostService.createEntranceCode(host.getId());
                 assertThat(actual).isEqualTo(expected);
             }
         }
 
         @Nested
-        class 존재하지_않는_Host의_id를_받는_경우 {
+        class 존재하지_않는_HostId를_입력받는_경우 {
+
+            private static final long NON_EXIST_HOST_ID = 0L;
 
             @Test
             void 예외를_발생시킨다() {
-                assertThatThrownBy(() -> hostService.createEntranceCode(0L))
+                assertThatThrownBy(() -> hostService.createEntranceCode(NON_EXIST_HOST_ID))
                         .isInstanceOf(NotFoundException.class)
                         .hasMessageContaining("존재하지 않는 호스트입니다.");
             }
diff --git a/backend/src/test/java/com/woowacourse/gongcheck/core/application/SpaceServiceTest.java b/backend/src/test/java/com/woowacourse/gongcheck/core/application/SpaceServiceTest.java
index 08fa625d..2e8c108b 100644
--- a/backend/src/test/java/com/woowacourse/gongcheck/core/application/SpaceServiceTest.java
+++ b/backend/src/test/java/com/woowacourse/gongcheck/core/application/SpaceServiceTest.java
@@ -18,13 +18,16 @@
 import com.woowacourse.gongcheck.core.domain.job.Job;
 import com.woowacourse.gongcheck.core.domain.section.Section;
 import com.woowacourse.gongcheck.core.domain.space.Space;
+import com.woowacourse.gongcheck.core.domain.space.SpaceRepository;
 import com.woowacourse.gongcheck.core.domain.task.RunningTask;
 import com.woowacourse.gongcheck.core.domain.task.Task;
+import com.woowacourse.gongcheck.core.domain.vo.Name;
+import com.woowacourse.gongcheck.core.presentation.request.SpaceChangeRequest;
 import com.woowacourse.gongcheck.core.presentation.request.SpaceCreateRequest;
 import com.woowacourse.gongcheck.exception.BusinessException;
 import com.woowacourse.gongcheck.exception.NotFoundException;
+import java.time.LocalDateTime;
 import java.util.List;
-import org.junit.jupiter.api.BeforeEach;
 import org.junit.jupiter.api.DisplayName;
 import org.junit.jupiter.api.DisplayNameGeneration;
 import org.junit.jupiter.api.DisplayNameGenerator;
@@ -43,37 +46,101 @@ class SpaceServiceTest {
     @Autowired
     private SupportRepository repository;
 
+    @Autowired
+    private SpaceRepository spaceRepository;
+
     @Nested
-    class findSpaces_메서드는 {
+    class findSpace_메서드는 {
+
+        @Nested
+        class 입력받은_Host가_입력받은_Space를_소유하고_있는_경우 {
+
+            private static final String SPACE_NAME = "잠실 캠퍼스";
+
+            private final Host host = repository.save(Host_생성("1234", 1L));
+            private final Space space = repository.save(Space_생성(host, SPACE_NAME));
+
+            @Test
+            void Space_응답을_반환한다() {
+                SpaceResponse actual = spaceService.findSpace(host.getId(), space.getId());
+
+                assertAll(
+                        () -> assertThat(actual.getId()).isEqualTo(space.getId()),
+                        () -> assertThat(actual.getName()).isEqualTo(SPACE_NAME)
+                );
+            }
+        }
 
         @Nested
-        class 존재하지_않는_Host_id를_입력받는_경우 {
+        class 입력받은_Host가_입력받은_Space를_소유하고_있지_않은_경우 {
+
+            private final Host host = repository.save(Host_생성("1234", 1L));
+            private final Host anotherHost = repository.save(Host_생성("1234", 2L));
+            private final Space space = repository.save(Space_생성(anotherHost, "잠실 캠퍼스"));
 
             @Test
             void 예외를_발생시킨다() {
-                assertThatThrownBy(() -> spaceService.findSpaces(0L))
+                assertThatThrownBy(() -> spaceService.findSpace(host.getId(), space.getId()))
+                        .isInstanceOf(NotFoundException.class)
+                        .hasMessageContaining("존재하지 않는 공간입니다.");
+            }
+        }
+
+        @Nested
+        class 존재하지_않는_Host_id를_입력받은_경우 {
+
+            private static final long NON_EXIST_HOST_ID = 0L;
+
+            private final Host host = repository.save(Host_생성("1234", 1L));
+            private final Space dummySpace = repository.save(Space_생성(host, "잠실 캠퍼스"));
+
+            @Test
+            void 예외를_발생시킨다() {
+                assertThatThrownBy(() -> spaceService.findSpace(NON_EXIST_HOST_ID, dummySpace.getId()))
                         .isInstanceOf(NotFoundException.class)
                         .hasMessageContaining("존재하지 않는 호스트입니다.");
             }
         }
 
         @Nested
-        class 존재하는_Host의_id를_입력받은_경우 {
+        class 존재하지_않는_Space_id를_입력받은_경우 {
+
+            private static final long NON_EXIST_SPACE_ID = 0L;
 
-            private Host host;
-            private SpacesResponse expected;
+            private final Host host = repository.save(Host_생성("1234", 1L));
 
-            @BeforeEach
-            void setUp() {
-                host = repository.save(Host_생성("1234", 1234L));
+            @Test
+            void 예외를_발생시킨다() {
+                assertThatThrownBy(() -> spaceService.findSpace(host.getId(), NON_EXIST_SPACE_ID))
+                        .isInstanceOf(NotFoundException.class)
+                        .hasMessageContaining("존재하지 않는 공간입니다.");
+            }
+        }
+    }
 
-                Space space_1 = Space_생성(host, "잠실 캠퍼스");
-                Space space_2 = Space_생성(host, "선릉 캠퍼스");
-                Space space_3 = Space_생성(host, "양평같은방");
-                List<Space> spaces = repository.saveAll(List.of(space_1, space_2, space_3));
+    @Nested
+    class findSpaces_메서드는 {
 
-                expected = SpacesResponse.from(spaces);
+        @Nested
+        class 존재하지_않는_HostId를_입력받는_경우 {
+
+            private static final long NON_EXIST_HOST_ID = 0L;
+
+            @Test
+            void 예외를_발생시킨다() {
+                assertThatThrownBy(() -> spaceService.findSpaces(NON_EXIST_HOST_ID))
+                        .isInstanceOf(NotFoundException.class)
+                        .hasMessageContaining("존재하지 않는 호스트입니다.");
             }
+        }
+
+        @Nested
+        class 올바른_입력을_받는_경우 {
+
+            private final Host host = repository.save(Host_생성("1234", 1L));
+            private final SpacesResponse expected = SpacesResponse.from(
+                    repository.saveAll(List.of(Space_생성(host, "잠실 캠퍼스"), Space_생성(host, "선릉 캠퍼스"),
+                            Space_생성(host, "양평같은방"))));
 
             @Test
             void 해당_Host가_소유한_Space를_응답으로_반환한다() {
@@ -90,17 +157,12 @@ void setUp() {
     class createSpace_메서드는 {
 
         @Nested
-        class Host가_입력받은_Space_이름과_같은_Space를_이미_가지고_있는_경우 {
+        class 입력받은_Space_이름이_Host가_소유한_Space의_이름과_중복되는_경우 {
 
-            private Host host;
-            private SpaceCreateRequest request;
-
-            @BeforeEach
-            void setUp() {
-                host = repository.save(Host_생성("1234", 1234L));
-                Space space = repository.save(Space_생성(host, "잠실 캠퍼스"));
-                request = new SpaceCreateRequest(space.getName().getValue(), "https://image.gongcheck.shop/123sdf5");
-            }
+            private final Host host = repository.save(Host_생성("1234", 1L));
+            private final SpaceCreateRequest request = new SpaceCreateRequest(
+                    repository.save(Space_생성(host, "잠실 캠퍼스")).getName().getValue(),
+                    "https://image.gongcheck.shop/123sdf5");
 
             @Test
             void 예외를_발생시킨다() {
@@ -111,16 +173,12 @@ void setUp() {
         }
 
         @Nested
-        class 존재하지_않는_Host_id를_입력받은_경우 {
+        class 존재하지_않는_HostId를_입력받는_경우 {
 
             private static final long NON_EXIST_HOST_ID = 0L;
 
-            private SpaceCreateRequest request;
-
-            @BeforeEach
-            void setUp() {
-                request = new SpaceCreateRequest("이것은 유일한 Space이름", "https://image.gongcheck.shop/123sdf5");
-            }
+            private final SpaceCreateRequest request = new SpaceCreateRequest("이것은 유일한 Space이름",
+                    "https://image.gongcheck.shop/123sdf5");
 
             @Test
             void 예외를_발생시킨다() {
@@ -131,19 +189,13 @@ void setUp() {
         }
 
         @Nested
-        class 입력받은_Host가_존재하는_경우 {
+        class 올바른_입력을_받는_경우 {
 
             private static final String SPACE_NAME = "잠실 캠퍼스";
             private static final String SPACE_IMAGE_URL = "https://image.gongcheck.shop/123sdf5";
 
-            private Host host;
-            private SpaceCreateRequest request;
-
-            @BeforeEach
-            void setUp() {
-                host = repository.save(Host_생성("1234", 1234L));
-                request = new SpaceCreateRequest(SPACE_NAME, SPACE_IMAGE_URL);
-            }
+            private final Host host = repository.save(Host_생성("1234", 1L));
+            private final SpaceCreateRequest request = new SpaceCreateRequest(SPACE_NAME, SPACE_IMAGE_URL);
 
             @Test
             void Space를_생성한다() {
@@ -159,193 +211,159 @@ void setUp() {
     }
 
     @Nested
-    class findSpace_메서드는 {
+    class removeSpace_메서드는 {
 
         @Nested
-        class Space_목록이_존재하는_경우 {
-
-            private static final String SPACE_NAME = "잠실 캠퍼스";
-
-            private Host host;
-            private Space space;
+        class 입력받은_Host_id가_존재하지_않는_경우 {
 
-            @BeforeEach
-            void setUp() {
-                host = repository.save(Host_생성("1234", 2345L));
-                space = repository.save(Space_생성(host, SPACE_NAME));
-            }
+            private static final long NON_EXIST_HOST_ID = 0L;
+            private static final long DUMMY_SPACE_ID = 1L;
 
             @Test
-            void Job_목록을_조회한다() {
-                SpaceResponse actual = spaceService.findSpace(host.getId(), space.getId());
-
-                assertAll(
-                        () -> assertThat(actual.getId()).isEqualTo(space.getId()),
-                        () -> assertThat(actual.getName()).isEqualTo(SPACE_NAME)
-                );
+            void 예외를_발생시킨다() {
+                assertThatThrownBy(() -> spaceService.removeSpace(NON_EXIST_HOST_ID, DUMMY_SPACE_ID))
+                        .isInstanceOf(NotFoundException.class)
+                        .hasMessageContaining("존재하지 않는 호스트입니다.");
             }
         }
 
         @Nested
-        class 입력받은_Host가_입력받은_Space를_가지고_있지_않은_경우 {
-
-            private Space space;
-            private Host anotherHost;
+        class 입력받은_Host가_입력받은_Space를_소유하고_있지_않은_경우 {
 
-            @BeforeEach
-            void setUp() {
-                Host host = repository.save(Host_생성("1234", 1234L));
-                space = repository.save(Space_생성(host, "잠실 캠퍼스"));
-                anotherHost = repository.save(Host_생성("1234", 2345L));
-            }
+            private final Host host = repository.save(Host_생성("1234", 1L));
+            private final Host anotherHost = repository.save(Host_생성("1234", 2L));
+            private final Space space = repository.save(Space_생성(anotherHost, "잠실 캠퍼스"));
 
             @Test
             void 예외를_발생시킨다() {
-                assertThatThrownBy(() -> spaceService.findSpace(anotherHost.getId(), space.getId()))
+                assertThatThrownBy(() -> spaceService.removeSpace(host.getId(), space.getId()))
                         .isInstanceOf(NotFoundException.class)
                         .hasMessageContaining("존재하지 않는 공간입니다.");
             }
         }
 
         @Nested
-        class 존재하지_않는_Host_id를_입력받은_경우 {
-
-            private static final long NON_EXIST_HOST_ID = 0L;
+        class 올바른_입력을_받는_경우 {
 
-            private Space space;
-
-            @BeforeEach
-            void setUp() {
-                Host host = repository.save(Host_생성("1234", 1234L));
-                space = repository.save(Space_생성(host, "잠실 캠퍼스"));
-            }
+            private final Host host = repository.save(Host_생성("1234", 1L));
+            private final Space space = repository.save(Space_생성(host, "잠실 캠퍼스"));
+            private final Job job = repository.save(Job_생성(space, "청소"));
+            private final Section section = repository.save(Section_생성(job, "대강의실"));
+            private final Task task = repository.save(Task_생성(section, "책상 닦기"));
+            private final RunningTask runningTask = repository.save(RunningTask_생성(task.getId(), false));
 
             @Test
-            void 예외를_발생시킨다() {
-                assertThatThrownBy(() -> spaceService.findSpace(NON_EXIST_HOST_ID, space.getId()))
-                        .isInstanceOf(NotFoundException.class)
-                        .hasMessageContaining("존재하지 않는 호스트입니다.");
+            void 해당_Space_및_관련된_Job_Section_Task_RunningTask를_삭제한다() {
+                spaceService.removeSpace(host.getId(), space.getId());
+
+                assertAll(
+                        () -> assertThat(repository.findById(Space.class, space.getId())).isEmpty(),
+                        () -> assertThat(repository.findById(Job.class, job.getId())).isEmpty(),
+                        () -> assertThat(repository.findById(Section.class, section.getId())).isEmpty(),
+                        () -> assertThat(repository.findById(Task.class, task.getId())).isEmpty(),
+                        () -> assertThat(repository.findById(RunningTask.class, runningTask.getTaskId())).isEmpty()
+                );
             }
         }
+    }
+
+    @Nested
+    class changeSpace_메서드는 {
 
         @Nested
-        class 존재하지_않는_Space_id를_입력받은_경우 {
+        class 입력받은_Host가_존재하지_않는_경우 {
 
-            private Host host;
+            private static final long NON_EXIST_HOST_ID = 0L;
+            private static final long DUMMY_SPACE_ID = 1L;
 
-            @BeforeEach
-            void setUp() {
-                host = repository.save(Host_생성("1234", 1234L));
-            }
+            private final SpaceChangeRequest spaceChangeRequest = new SpaceChangeRequest("잠실 캠퍼스", "changeImageUrl");
 
             @Test
             void 예외를_발생시킨다() {
-                assertThatThrownBy(() -> spaceService.findSpace(host.getId(), 0L))
+                assertThatThrownBy(
+                        () -> spaceService.changeSpace(NON_EXIST_HOST_ID, DUMMY_SPACE_ID, spaceChangeRequest))
                         .isInstanceOf(NotFoundException.class)
-                        .hasMessageContaining("존재하지 않는 공간입니다.");
+                        .hasMessageContaining("존재하지 않는 호스트입니다.");
             }
         }
 
         @Nested
-        class 입력받은_Host가_입력받은_Space를_소유하고_있는_경우 {
-
-            private static final String SPACE_NAME = "잠실 캠퍼스";
+        class 입력받은_Space가_존재하지_않는_경우 {
 
-            private Host host;
-            private Space space;
+            private static final long NON_EXIST_SPACE_ID = 0L;
 
-            @BeforeEach
-            void setUp() {
-                host = repository.save(Host_생성("1234", 1234L));
-                space = repository.save(Space_생성(host, SPACE_NAME));
-            }
+            private final Host host = repository.save(Host_생성("1234", 1L));
+            private final SpaceChangeRequest spaceChangeRequest = new SpaceChangeRequest("잠실 캠퍼스", "changeImageUrl");
 
             @Test
-            void Space_응답을_반환한다() {
-                SpaceResponse actual = spaceService.findSpace(host.getId(), space.getId());
-
-                assertAll(
-                        () -> assertThat(actual.getId()).isEqualTo(space.getId()),
-                        () -> assertThat(actual.getName()).isEqualTo(SPACE_NAME)
-                );
+            void 예외를_발생시킨다() {
+                assertThatThrownBy(
+                        () -> spaceService.changeSpace(host.getId(), NON_EXIST_SPACE_ID, spaceChangeRequest))
+                        .isInstanceOf(NotFoundException.class)
+                        .hasMessageContaining("존재하지 않는 공간입니다.");
             }
         }
-    }
-
-    @Nested
-    class removeSpace_메서드는 {
 
         @Nested
-        class 입력받은_Host_id가_존재하지_않는_경우 {
-
-            private static final long NON_EXIST_HOST_ID = 0L;
+        class 입력받은_Host가_입력받은_Space를_소유하지_않은_경우 {
 
-            private Space space;
-
-            @BeforeEach
-            void setUp() {
-                Host host = repository.save(Host_생성("1234", 1234L));
-                space = repository.save(Space_생성(host, "잠실 캠퍼스"));
-            }
+            private final Host host = repository.save(Host_생성("1234", 1L));
+            private final Host anotherHost = repository.save(Host_생성("1234", 2L));
+            private final Space space = repository.save(Space_생성(anotherHost, "잠실 캠퍼스"));
+            private final SpaceChangeRequest spaceChangeRequest = new SpaceChangeRequest("changeName",
+                    "changeImageUrl");
 
             @Test
             void 예외를_발생시킨다() {
-                assertThatThrownBy(() -> spaceService.removeSpace(NON_EXIST_HOST_ID, space.getId()))
+                assertThatThrownBy(
+                        () -> spaceService.changeSpace(host.getId(), space.getId(), spaceChangeRequest))
                         .isInstanceOf(NotFoundException.class)
-                        .hasMessageContaining("존재하지 않는 호스트입니다.");
+                        .hasMessageContaining("존재하지 않는 공간입니다.");
             }
         }
 
         @Nested
-        class 입력받은_Host가_입력받은_Space를_소유하고_있지_않은_경우 {
+        class 입력받은_Space의_이름이_입력받은_Host가_소유한_Space_이름과_중복되는_경우 {
 
-            private Host anotherHost;
-            private Space space;
+            private static final String SPACE_NAME = "잠실 캠퍼스";
 
-            @BeforeEach
-            void setUp() {
-                Host host = repository.save(Host_생성("1234", 1234L));
-                anotherHost = repository.save(Host_생성("1234", 4567L));
-                space = repository.save(Space_생성(host, "잠실 캠퍼스"));
-            }
+            private final Host host = repository.save(Host_생성("1234", 1L));
+            private final Space existSpace = repository.save(Space_생성(host, SPACE_NAME));
+            private final Space spaceToChangeName = repository.save(Space_생성(host, "선릉 캠퍼스"));
+            private final SpaceChangeRequest spaceChangeRequest = new SpaceChangeRequest(SPACE_NAME, "image");
 
             @Test
             void 예외를_발생시킨다() {
-                assertThatThrownBy(() -> spaceService.removeSpace(anotherHost.getId(), space.getId()))
-                        .isInstanceOf(NotFoundException.class);
+                assertThatThrownBy(
+                        () -> spaceService.changeSpace(host.getId(), spaceToChangeName.getId(), spaceChangeRequest))
+                        .isInstanceOf(BusinessException.class)
+                        .hasMessageContaining("이미 존재하는 이름입니다.");
             }
         }
 
         @Nested
-        class 입력받은_Space_id가_존재하면 {
-
-            private Host host;
-            private Space space;
-            private Job job;
-            private Section section;
-            private Task task;
-            private RunningTask runningTask;
-
-            @BeforeEach
-            void setUp() {
-                host = repository.save(Host_생성("1234", 1234L));
-                space = repository.save(Space_생성(host, "잠실 캠퍼스"));
-                job = repository.save(Job_생성(space, "청소"));
-                section = repository.save(Section_생성(job, "대강의실"));
-                task = repository.save(Task_생성(section, "책상 닦기"));
-                runningTask = repository.save(RunningTask_생성(task.getId(), false));
-            }
+        class 올바른_입력을_받는_경우 {
+
+            private static final String CHANGE_NAME = "잠실 캠퍼스";
+            private static final String CHANGE_IMG_URL = "changeUrl";
+
+            private final Host host = repository.save(Host_생성("1234", 1L));
+            private final Space space = repository.save(Space.builder()
+                    .host(host)
+                    .name(new Name("잠실 캠퍼스"))
+                    .imageUrl("imageUrl")
+                    .createdAt(LocalDateTime.now())
+                    .build());
+            private final SpaceChangeRequest spaceChangeRequest = new SpaceChangeRequest(CHANGE_NAME, CHANGE_IMG_URL);
 
             @Test
-            void 해당_Space_및_관련된_Job_Section_Task_RunningTask를_삭제한다() {
-                spaceService.removeSpace(host.getId(), space.getId());
+            void Space_이름을_변경한다() {
+                spaceService.changeSpace(host.getId(), space.getId(), spaceChangeRequest);
+                Space actual = spaceRepository.getByHostAndId(host, space.getId());
 
                 assertAll(
-                        () -> assertThat(repository.findById(Space.class, space.getId())).isEmpty(),
-                        () -> assertThat(repository.findById(Job.class, job.getId())).isEmpty(),
-                        () -> assertThat(repository.findById(Section.class, section.getId())).isEmpty(),
-                        () -> assertThat(repository.findById(Task.class, task.getId())).isEmpty(),
-                        () -> assertThat(repository.findById(RunningTask.class, runningTask.getTaskId())).isEmpty()
+                        () -> assertThat(actual.getName()).isEqualTo(new Name(CHANGE_NAME)),
+                        () -> assertThat(actual.getImageUrl()).isEqualTo(CHANGE_IMG_URL)
                 );
             }
         }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 06b24265..b29f4ea2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "@react-icons/all-files": "^4.1.0",
         "axios": "^0.27.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -41,7 +42,7 @@
         "babel-cli": "^6.26.0",
         "babel-loader": "^8.2.5",
         "babel-plugin-module-resolver": "^4.1.0",
-        "clean-webpack-plugin": "^4.0.0",
+        "compression-webpack-plugin": "^10.0.0",
         "cross-env": "^7.0.3",
         "cypress": "^10.3.1",
         "cypress-react-selector": "^3.0.0",
@@ -54,10 +55,10 @@
         "html-webpack-plugin": "^5.5.0",
         "nanoid": "^4.0.0",
         "prettier": "^2.7.1",
-        "react-icons": "^4.4.0",
         "start-server-and-test": "^1.14.0",
         "ts-loader": "^9.3.1",
         "typescript": "^4.7.4",
+        "url-loader": "^4.1.1",
         "webpack": "^5.73.0",
         "webpack-cli": "^4.10.0",
         "webpack-dev-server": "^4.9.3"
@@ -2887,6 +2888,14 @@
         "read-package-json-fast": "^2.0.1"
       }
     },
+    "node_modules/@react-icons/all-files": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@react-icons/all-files/-/all-files-4.1.0.tgz",
+      "integrity": "sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -6206,21 +6215,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/clean-webpack-plugin": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-4.0.0.tgz",
-      "integrity": "sha512-WuWE1nyTNAyW5T7oNyys2EN0cfP2fdRxhxnIQWiAp0bMabPdHhoGxM8A6YL2GhqwgrPnnaemVE7nv5XJ2Fhh2w==",
-      "dev": true,
-      "dependencies": {
-        "del": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "webpack": ">=4.0.0 <6.0.0"
-      }
-    },
     "node_modules/cli-boxes": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
@@ -6590,6 +6584,79 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/compression-webpack-plugin": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/compression-webpack-plugin/-/compression-webpack-plugin-10.0.0.tgz",
+      "integrity": "sha512-wLXLIBwpul/ALcm7Aj+69X0pYT3BYt6DdPn3qrgBIh9YejV9Bju9ShhlAsjujLyWMo6SAweFIWaUoFmXZNuNrg==",
+      "dev": true,
+      "dependencies": {
+        "schema-utils": "^4.0.0",
+        "serialize-javascript": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      }
+    },
+    "node_modules/compression-webpack-plugin/node_modules/ajv": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/compression-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/compression-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
+    "node_modules/compression-webpack-plugin/node_modules/schema-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+      "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.8.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/compression/node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -7318,91 +7385,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/del": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz",
-      "integrity": "sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/glob": "^7.1.1",
-        "globby": "^6.1.0",
-        "is-path-cwd": "^2.0.0",
-        "is-path-in-cwd": "^2.0.0",
-        "p-map": "^2.0.0",
-        "pify": "^4.0.1",
-        "rimraf": "^2.6.3"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/del/node_modules/array-union": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
-      "dev": true,
-      "dependencies": {
-        "array-uniq": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/del/node_modules/globby": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
-      "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
-      "dev": true,
-      "dependencies": {
-        "array-union": "^1.0.1",
-        "glob": "^7.0.3",
-        "object-assign": "^4.0.1",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/del/node_modules/globby/node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/del/node_modules/p-map": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
-      "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/del/node_modules/pify": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/del/node_modules/rimraf": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-      "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      }
-    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -10877,39 +10859,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/is-path-cwd": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
-      "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/is-path-in-cwd": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz",
-      "integrity": "sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==",
-      "dev": true,
-      "dependencies": {
-        "is-path-inside": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/is-path-inside": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-2.1.0.tgz",
-      "integrity": "sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==",
-      "dev": true,
-      "dependencies": {
-        "path-is-inside": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/is-plain-obj": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
@@ -14300,27 +14249,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/pinkie": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pinkie-promise": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
-      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
-      "dev": true,
-      "dependencies": {
-        "pinkie": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -14913,15 +14841,6 @@
         "react": ">=16.13.1"
       }
     },
-    "node_modules/react-icons": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
-      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
-      "dev": true,
-      "peerDependencies": {
-        "react": "*"
-      }
-    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -17932,6 +17851,33 @@
       "deprecated": "Please see https://github.com/lydell/urix#deprecated",
       "dev": true
     },
+    "node_modules/url-loader": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
+      "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "mime-types": "^2.1.27",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "file-loader": "*",
+        "webpack": "^4.0.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "file-loader": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/url-parse-lax": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",
@@ -22264,6 +22210,12 @@
         "read-package-json-fast": "^2.0.1"
       }
     },
+    "@react-icons/all-files": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@react-icons/all-files/-/all-files-4.1.0.tgz",
+      "integrity": "sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ==",
+      "requires": {}
+    },
     "@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -24943,15 +24895,6 @@
       "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
       "dev": true
     },
-    "clean-webpack-plugin": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-4.0.0.tgz",
-      "integrity": "sha512-WuWE1nyTNAyW5T7oNyys2EN0cfP2fdRxhxnIQWiAp0bMabPdHhoGxM8A6YL2GhqwgrPnnaemVE7nv5XJ2Fhh2w==",
-      "dev": true,
-      "requires": {
-        "del": "^4.1.1"
-      }
-    },
     "cli-boxes": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
@@ -25262,6 +25205,57 @@
         }
       }
     },
+    "compression-webpack-plugin": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/compression-webpack-plugin/-/compression-webpack-plugin-10.0.0.tgz",
+      "integrity": "sha512-wLXLIBwpul/ALcm7Aj+69X0pYT3BYt6DdPn3qrgBIh9YejV9Bju9ShhlAsjujLyWMo6SAweFIWaUoFmXZNuNrg==",
+      "dev": true,
+      "requires": {
+        "schema-utils": "^4.0.0",
+        "serialize-javascript": "^6.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.11.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.3"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+          "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "ajv": "^8.8.0",
+            "ajv-formats": "^2.1.1",
+            "ajv-keywords": "^5.0.0"
+          }
+        }
+      }
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -25802,74 +25796,6 @@
         "isobject": "^3.0.1"
       }
     },
-    "del": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz",
-      "integrity": "sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==",
-      "dev": true,
-      "requires": {
-        "@types/glob": "^7.1.1",
-        "globby": "^6.1.0",
-        "is-path-cwd": "^2.0.0",
-        "is-path-in-cwd": "^2.0.0",
-        "p-map": "^2.0.0",
-        "pify": "^4.0.1",
-        "rimraf": "^2.6.3"
-      },
-      "dependencies": {
-        "array-union": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-          "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
-          "dev": true,
-          "requires": {
-            "array-uniq": "^1.0.1"
-          }
-        },
-        "globby": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
-          "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
-          "dev": true,
-          "requires": {
-            "array-union": "^1.0.1",
-            "glob": "^7.0.3",
-            "object-assign": "^4.0.1",
-            "pify": "^2.0.0",
-            "pinkie-promise": "^2.0.0"
-          },
-          "dependencies": {
-            "pify": {
-              "version": "2.3.0",
-              "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-              "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-              "dev": true
-            }
-          }
-        },
-        "p-map": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
-          "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
-          "dev": true
-        },
-        "pify": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-          "dev": true
-        },
-        "rimraf": {
-          "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        }
-      }
-    },
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -28537,30 +28463,6 @@
       "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
       "dev": true
     },
-    "is-path-cwd": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
-      "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
-      "dev": true
-    },
-    "is-path-in-cwd": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz",
-      "integrity": "sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==",
-      "dev": true,
-      "requires": {
-        "is-path-inside": "^2.1.0"
-      }
-    },
-    "is-path-inside": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-2.1.0.tgz",
-      "integrity": "sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==",
-      "dev": true,
-      "requires": {
-        "path-is-inside": "^1.0.2"
-      }
-    },
     "is-plain-obj": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
@@ -31181,21 +31083,6 @@
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
       "dev": true
     },
-    "pinkie": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
-      "dev": true
-    },
-    "pinkie-promise": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
-      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
-      "dev": true,
-      "requires": {
-        "pinkie": "^2.0.0"
-      }
-    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -31628,13 +31515,6 @@
         "@babel/runtime": "^7.12.5"
       }
     },
-    "react-icons": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
-      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
-      "dev": true,
-      "requires": {}
-    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -33969,6 +33849,17 @@
       "integrity": "sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==",
       "dev": true
     },
+    "url-loader": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
+      "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "mime-types": "^2.1.27",
+        "schema-utils": "^3.0.0"
+      }
+    },
     "url-parse-lax": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 2bf45369..069b03ee 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,11 +3,11 @@
   "version": "1.0.0",
   "description": "Gong Check Project",
   "scripts": {
-    "start": "cross-env NODE_ENV=development webpack serve",
-    "build": "cross-env NODE_ENV=production webpack",
-    "build-local": "cross-env NODE_ENV=development webpack",
-    "build-staging": "cross-env NODE_ENV=staging webpack",
-    "build-release": "cross-env NODE_ENV=production webpack",
+    "start": "cross-env NODE_ENV=development webpack serve --config webpack.dev.js",
+    "build": "cross-env NODE_ENV=production webpack --config webpack.prod.js",
+    "build:local": "cross-env NODE_ENV=development webpack --config webpack.dev.js",
+    "build:staging": "cross-env NODE_ENV=staging webpack --config webpack.prod.js",
+    "build:release": "cross-env NODE_ENV=production webpack --config webpack.prod.js",
     "lhci": "lhci autorun",
     "prettier": "npx prettier --write 'src/**/*.{tsx,ts,css,html,json}'",
     "cypress:open": "cypress open",
@@ -22,6 +22,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@react-icons/all-files": "^4.1.0",
     "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -54,7 +55,7 @@
     "babel-cli": "^6.26.0",
     "babel-loader": "^8.2.5",
     "babel-plugin-module-resolver": "^4.1.0",
-    "clean-webpack-plugin": "^4.0.0",
+    "compression-webpack-plugin": "^10.0.0",
     "cross-env": "^7.0.3",
     "cypress": "^10.3.1",
     "cypress-react-selector": "^3.0.0",
@@ -67,10 +68,10 @@
     "html-webpack-plugin": "^5.5.0",
     "nanoid": "^4.0.0",
     "prettier": "^2.7.1",
-    "react-icons": "^4.4.0",
     "start-server-and-test": "^1.14.0",
     "ts-loader": "^9.3.1",
     "typescript": "^4.7.4",
+    "url-loader": "^4.1.1",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.9.3"
diff --git a/frontend/public/index.html b/frontend/public/index.html
index bee50722..0db3c929 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -5,6 +5,13 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="google-site-verification" content="kagR4K5UE3D8eryyAxhnW3Jf5jVLBe2yl9nU_Tr8Kuk" />
+    <link
+      rel="preload"
+      href="https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
     <title>Gong Check</title>
   </head>
   <body>
diff --git a/frontend/src/Transitions.tsx b/frontend/src/Transitions.tsx
index 03d3e975..8765f0d6 100644
--- a/frontend/src/Transitions.tsx
+++ b/frontend/src/Transitions.tsx
@@ -10,7 +10,7 @@ interface TransitionsProps {
 const childFactoryCreator = (props: { classNames: string }) => (child: React.ReactElement) =>
   cloneElement(child, props);
 
-const Transitions: React.FC<TransitionsProps> = ({ transition = 'right', pageKey, children }) => (
+const Transitions: React.FC<TransitionsProps> = ({ transition, pageKey, children }) => (
   <TransitionGroup className="transitions-group" childFactory={childFactoryCreator({ classNames: transition })}>
     <CSSTransition key={pageKey} timeout={500}>
       {children}
diff --git a/frontend/src/assets/createSpace-280w.webp b/frontend/src/assets/createSpace-280w.webp
new file mode 100644
index 00000000..0d26c0bb
Binary files /dev/null and b/frontend/src/assets/createSpace-280w.webp differ
diff --git a/frontend/src/assets/createSpace-360w.webp b/frontend/src/assets/createSpace-360w.webp
new file mode 100644
index 00000000..aa54ad85
Binary files /dev/null and b/frontend/src/assets/createSpace-360w.webp differ
diff --git a/frontend/src/assets/createSpace-540w.webp b/frontend/src/assets/createSpace-540w.webp
new file mode 100644
index 00000000..24a9769e
Binary files /dev/null and b/frontend/src/assets/createSpace-540w.webp differ
diff --git a/frontend/src/assets/createSpace-800w.webp b/frontend/src/assets/createSpace-800w.webp
new file mode 100644
index 00000000..079ba11f
Binary files /dev/null and b/frontend/src/assets/createSpace-800w.webp differ
diff --git a/frontend/src/assets/createSpace-fallback.jpg b/frontend/src/assets/createSpace-fallback.jpg
new file mode 100644
index 00000000..cc8e5ece
Binary files /dev/null and b/frontend/src/assets/createSpace-fallback.jpg differ
diff --git a/frontend/src/assets/dashboard-280w.webp b/frontend/src/assets/dashboard-280w.webp
new file mode 100644
index 00000000..44fbea8f
Binary files /dev/null and b/frontend/src/assets/dashboard-280w.webp differ
diff --git a/frontend/src/assets/dashboard-360w.webp b/frontend/src/assets/dashboard-360w.webp
new file mode 100644
index 00000000..d3a00d45
Binary files /dev/null and b/frontend/src/assets/dashboard-360w.webp differ
diff --git a/frontend/src/assets/dashboard-540w.webp b/frontend/src/assets/dashboard-540w.webp
new file mode 100644
index 00000000..ccd07d2b
Binary files /dev/null and b/frontend/src/assets/dashboard-540w.webp differ
diff --git a/frontend/src/assets/dashboard-800w.webp b/frontend/src/assets/dashboard-800w.webp
new file mode 100644
index 00000000..677deb05
Binary files /dev/null and b/frontend/src/assets/dashboard-800w.webp differ
diff --git a/frontend/src/assets/dashboard-fallback.jpg b/frontend/src/assets/dashboard-fallback.jpg
new file mode 100644
index 00000000..39307209
Binary files /dev/null and b/frontend/src/assets/dashboard-fallback.jpg differ
diff --git a/frontend/src/assets/defaultSpaceImage.webp b/frontend/src/assets/defaultSpaceImage.webp
new file mode 100644
index 00000000..41b86716
Binary files /dev/null and b/frontend/src/assets/defaultSpaceImage.webp differ
diff --git a/frontend/src/assets/edit-280w.webp b/frontend/src/assets/edit-280w.webp
new file mode 100644
index 00000000..e006b271
Binary files /dev/null and b/frontend/src/assets/edit-280w.webp differ
diff --git a/frontend/src/assets/edit-360w.webp b/frontend/src/assets/edit-360w.webp
new file mode 100644
index 00000000..794106c7
Binary files /dev/null and b/frontend/src/assets/edit-360w.webp differ
diff --git a/frontend/src/assets/edit-540w.webp b/frontend/src/assets/edit-540w.webp
new file mode 100644
index 00000000..b72f35b6
Binary files /dev/null and b/frontend/src/assets/edit-540w.webp differ
diff --git a/frontend/src/assets/edit-800w.webp b/frontend/src/assets/edit-800w.webp
new file mode 100644
index 00000000..23f5c28b
Binary files /dev/null and b/frontend/src/assets/edit-800w.webp differ
diff --git a/frontend/src/assets/edit-fallback.jpg b/frontend/src/assets/edit-fallback.jpg
new file mode 100644
index 00000000..6986a8d6
Binary files /dev/null and b/frontend/src/assets/edit-fallback.jpg differ
diff --git a/frontend/src/assets/edit2-280w.webp b/frontend/src/assets/edit2-280w.webp
new file mode 100644
index 00000000..1a5cf63b
Binary files /dev/null and b/frontend/src/assets/edit2-280w.webp differ
diff --git a/frontend/src/assets/edit2-360w.webp b/frontend/src/assets/edit2-360w.webp
new file mode 100644
index 00000000..e59e9ebd
Binary files /dev/null and b/frontend/src/assets/edit2-360w.webp differ
diff --git a/frontend/src/assets/edit2-540w.webp b/frontend/src/assets/edit2-540w.webp
new file mode 100644
index 00000000..8e8d42af
Binary files /dev/null and b/frontend/src/assets/edit2-540w.webp differ
diff --git a/frontend/src/assets/edit2-800w.webp b/frontend/src/assets/edit2-800w.webp
new file mode 100644
index 00000000..7e64ceb4
Binary files /dev/null and b/frontend/src/assets/edit2-800w.webp differ
diff --git a/frontend/src/assets/edit2-fallback.jpg b/frontend/src/assets/edit2-fallback.jpg
new file mode 100644
index 00000000..ac7a9108
Binary files /dev/null and b/frontend/src/assets/edit2-fallback.jpg differ
diff --git a/frontend/src/assets/emptyFolder.webp b/frontend/src/assets/emptyFolder.webp
new file mode 100644
index 00000000..013ca9d8
Binary files /dev/null and b/frontend/src/assets/emptyFolder.webp differ
diff --git a/frontend/src/assets/homeCover-360w.webp b/frontend/src/assets/homeCover-360w.webp
new file mode 100644
index 00000000..944995ac
Binary files /dev/null and b/frontend/src/assets/homeCover-360w.webp differ
diff --git a/frontend/src/assets/homeCover-480w.webp b/frontend/src/assets/homeCover-480w.webp
new file mode 100644
index 00000000..fb7a4421
Binary files /dev/null and b/frontend/src/assets/homeCover-480w.webp differ
diff --git a/frontend/src/assets/homeCover-fallback.png b/frontend/src/assets/homeCover-fallback.png
new file mode 100644
index 00000000..7b7ca249
Binary files /dev/null and b/frontend/src/assets/homeCover-fallback.png differ
diff --git a/frontend/src/assets/homeCover.webp b/frontend/src/assets/homeCover.webp
new file mode 100644
index 00000000..0f3ae963
Binary files /dev/null and b/frontend/src/assets/homeCover.webp differ
diff --git a/frontend/src/assets/logoTitle.webp b/frontend/src/assets/logoTitle.webp
new file mode 100644
index 00000000..3cf4a487
Binary files /dev/null and b/frontend/src/assets/logoTitle.webp differ
diff --git a/frontend/src/assets/mobileView1-160w.webp b/frontend/src/assets/mobileView1-160w.webp
new file mode 100644
index 00000000..15c69939
Binary files /dev/null and b/frontend/src/assets/mobileView1-160w.webp differ
diff --git a/frontend/src/assets/mobileView1-240w.webp b/frontend/src/assets/mobileView1-240w.webp
new file mode 100644
index 00000000..279bdb3f
Binary files /dev/null and b/frontend/src/assets/mobileView1-240w.webp differ
diff --git a/frontend/src/assets/mobileView1-320w.webp b/frontend/src/assets/mobileView1-320w.webp
new file mode 100644
index 00000000..b0021123
Binary files /dev/null and b/frontend/src/assets/mobileView1-320w.webp differ
diff --git a/frontend/src/assets/mobileView1-480w.webp b/frontend/src/assets/mobileView1-480w.webp
new file mode 100644
index 00000000..00f2e717
Binary files /dev/null and b/frontend/src/assets/mobileView1-480w.webp differ
diff --git a/frontend/src/assets/mobileView1.png b/frontend/src/assets/mobileView1-fallback.png
similarity index 100%
rename from frontend/src/assets/mobileView1.png
rename to frontend/src/assets/mobileView1-fallback.png
diff --git a/frontend/src/assets/mobileView2-160w.webp b/frontend/src/assets/mobileView2-160w.webp
new file mode 100644
index 00000000..9cac1f1a
Binary files /dev/null and b/frontend/src/assets/mobileView2-160w.webp differ
diff --git a/frontend/src/assets/mobileView2-240w.webp b/frontend/src/assets/mobileView2-240w.webp
new file mode 100644
index 00000000..83d30f98
Binary files /dev/null and b/frontend/src/assets/mobileView2-240w.webp differ
diff --git a/frontend/src/assets/mobileView2-320w.webp b/frontend/src/assets/mobileView2-320w.webp
new file mode 100644
index 00000000..856b5208
Binary files /dev/null and b/frontend/src/assets/mobileView2-320w.webp differ
diff --git a/frontend/src/assets/mobileView2-480w.webp b/frontend/src/assets/mobileView2-480w.webp
new file mode 100644
index 00000000..2640abd9
Binary files /dev/null and b/frontend/src/assets/mobileView2-480w.webp differ
diff --git a/frontend/src/assets/mobileView2.png b/frontend/src/assets/mobileView2-fallback.png
similarity index 100%
rename from frontend/src/assets/mobileView2.png
rename to frontend/src/assets/mobileView2-fallback.png
diff --git a/frontend/src/assets/mobileView3-160w.webp b/frontend/src/assets/mobileView3-160w.webp
new file mode 100644
index 00000000..a22b3c89
Binary files /dev/null and b/frontend/src/assets/mobileView3-160w.webp differ
diff --git a/frontend/src/assets/mobileView3-240w.webp b/frontend/src/assets/mobileView3-240w.webp
new file mode 100644
index 00000000..a794016d
Binary files /dev/null and b/frontend/src/assets/mobileView3-240w.webp differ
diff --git a/frontend/src/assets/mobileView3-320w.webp b/frontend/src/assets/mobileView3-320w.webp
new file mode 100644
index 00000000..b1596085
Binary files /dev/null and b/frontend/src/assets/mobileView3-320w.webp differ
diff --git a/frontend/src/assets/mobileView3-480w.webp b/frontend/src/assets/mobileView3-480w.webp
new file mode 100644
index 00000000..40ae1923
Binary files /dev/null and b/frontend/src/assets/mobileView3-480w.webp differ
diff --git a/frontend/src/assets/mobileView3.png b/frontend/src/assets/mobileView3-fallback.png
similarity index 100%
rename from frontend/src/assets/mobileView3.png
rename to frontend/src/assets/mobileView3-fallback.png
diff --git a/frontend/src/assets/mobileView4-160w.webp b/frontend/src/assets/mobileView4-160w.webp
new file mode 100644
index 00000000..35c7d306
Binary files /dev/null and b/frontend/src/assets/mobileView4-160w.webp differ
diff --git a/frontend/src/assets/mobileView4-240w.webp b/frontend/src/assets/mobileView4-240w.webp
new file mode 100644
index 00000000..851b10fb
Binary files /dev/null and b/frontend/src/assets/mobileView4-240w.webp differ
diff --git a/frontend/src/assets/mobileView4-320w.webp b/frontend/src/assets/mobileView4-320w.webp
new file mode 100644
index 00000000..b4d0f251
Binary files /dev/null and b/frontend/src/assets/mobileView4-320w.webp differ
diff --git a/frontend/src/assets/mobileView4-480w.webp b/frontend/src/assets/mobileView4-480w.webp
new file mode 100644
index 00000000..897921d3
Binary files /dev/null and b/frontend/src/assets/mobileView4-480w.webp differ
diff --git a/frontend/src/assets/mobileView4.png b/frontend/src/assets/mobileView4-fallback.png
similarity index 100%
rename from frontend/src/assets/mobileView4.png
rename to frontend/src/assets/mobileView4-fallback.png
diff --git a/frontend/src/assets/navigationLogo.jpg b/frontend/src/assets/navigationLogo.jpg
new file mode 100644
index 00000000..24743e99
Binary files /dev/null and b/frontend/src/assets/navigationLogo.jpg differ
diff --git a/frontend/src/assets/navigationLogo.webp b/frontend/src/assets/navigationLogo.webp
new file mode 100644
index 00000000..6c0d2787
Binary files /dev/null and b/frontend/src/assets/navigationLogo.webp differ
diff --git a/frontend/src/components/common/Button/styles.ts b/frontend/src/components/common/Button/styles.ts
index 4018ab41..737da9cc 100644
--- a/frontend/src/components/common/Button/styles.ts
+++ b/frontend/src/components/common/Button/styles.ts
@@ -4,10 +4,10 @@ import theme from '@/styles/theme';
 
 const button = css`
   background: ${theme.colors.primary};
-  width: 224px;
+  width: auto;
   height: 48px;
   border-radius: 12px;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 600;
   color: ${theme.colors.white};
   margin: 24px;
diff --git a/frontend/src/components/common/Checkbox/styles.ts b/frontend/src/components/common/Checkbox/styles.ts
index 3de4c0d2..22e852f4 100644
--- a/frontend/src/components/common/Checkbox/styles.ts
+++ b/frontend/src/components/common/Checkbox/styles.ts
@@ -11,6 +11,7 @@ const input = css`
 
 const label = css`
   width: 28px;
+  min-width: 28px;
   height: 28px;
   border: 1px solid ${theme.colors.shadow30};
   border-radius: 10px;
diff --git a/frontend/src/components/common/Dimmer/index.tsx b/frontend/src/components/common/Dimmer/index.tsx
index ef47027d..647ef760 100644
--- a/frontend/src/components/common/Dimmer/index.tsx
+++ b/frontend/src/components/common/Dimmer/index.tsx
@@ -4,11 +4,10 @@ import styles from './styles';
 
 interface DimmerProps {
   children: React.ReactNode;
-  mode: 'full' | 'mobile';
   isAbleClick?: boolean;
 }
 
-const Dimmer: React.FC<DimmerProps> = ({ children, isAbleClick = true, mode = 'full' }) => {
+const Dimmer: React.FC<DimmerProps> = ({ children, isAbleClick = true }) => {
   const { closeModal } = useModal();
 
   const onClickDimmed = (e: React.MouseEvent<HTMLElement>) => {
@@ -16,7 +15,7 @@ const Dimmer: React.FC<DimmerProps> = ({ children, isAbleClick = true, mode = 'f
   };
 
   return (
-    <div css={styles.dimmer(mode)} onClick={onClickDimmed}>
+    <div css={styles.dimmer} onClick={onClickDimmed}>
       {children}
     </div>
   );
diff --git a/frontend/src/components/common/Dimmer/styles.ts b/frontend/src/components/common/Dimmer/styles.ts
index 1bd2914c..e17d300a 100644
--- a/frontend/src/components/common/Dimmer/styles.ts
+++ b/frontend/src/components/common/Dimmer/styles.ts
@@ -2,9 +2,8 @@ import { css } from '@emotion/react';
 
 import theme from '@/styles/theme';
 
-const dimmer = (mode: 'full' | 'mobile') => css`
+const dimmer = css`
   background-color: ${theme.colors.shadow80};
-  max-width: ${mode === 'full' ? '100vw' : '414px'};
   width: 100vw;
   height: 100vh;
   display: flex;
diff --git a/frontend/src/components/common/GitHubLoginButton/index.tsx b/frontend/src/components/common/GitHubLoginButton/index.tsx
index e9d5aa08..dedbb62d 100644
--- a/frontend/src/components/common/GitHubLoginButton/index.tsx
+++ b/frontend/src/components/common/GitHubLoginButton/index.tsx
@@ -1,4 +1,4 @@
-import { GoMarkGithub } from 'react-icons/go';
+import { GoMarkGithub } from '@react-icons/all-files/go/GoMarkGithub';
 
 import styles from './styles';
 
diff --git a/frontend/src/components/common/GitHubLoginButton/styles.ts b/frontend/src/components/common/GitHubLoginButton/styles.ts
index 84339728..a6613032 100644
--- a/frontend/src/components/common/GitHubLoginButton/styles.ts
+++ b/frontend/src/components/common/GitHubLoginButton/styles.ts
@@ -4,15 +4,16 @@ const wrapper = css`
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 260px;
+  width: auto;
   border-radius: 24px;
   color: white;
   background-color: #21262c;
+  padding: 0 16px;
 `;
 
 const text = css`
-  margin-left: 16px;
-  font-size: 24px;
+  margin-left: 12px;
+  font-size: 18px;
 `;
 
 const styles = { wrapper, text };
diff --git a/frontend/src/components/common/LazyImage/index.tsx b/frontend/src/components/common/LazyImage/index.tsx
new file mode 100644
index 00000000..fc717178
--- /dev/null
+++ b/frontend/src/components/common/LazyImage/index.tsx
@@ -0,0 +1,34 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface LazyImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  imageUrl: string | undefined;
+}
+
+const LazyImage: React.FC<LazyImageProps> = ({ imageUrl, ...props }) => {
+  const lazyImageRef = useRef<HTMLImageElement>(null);
+  const observerRef = useRef<IntersectionObserver>();
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  const intersectionCallBack = (entries: IntersectionObserverEntry[], io: IntersectionObserver) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        io.unobserve(entry.target);
+        setIsLoaded(true);
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (!observerRef.current) {
+      observerRef.current = new IntersectionObserver(intersectionCallBack);
+    }
+
+    lazyImageRef.current && observerRef.current.observe(lazyImageRef.current);
+
+    return () => observerRef.current && observerRef.current.disconnect();
+  }, []);
+
+  return <img src={isLoaded ? imageUrl : ''} ref={lazyImageRef} {...props} />;
+};
+
+export default LazyImage;
diff --git a/frontend/src/components/common/SlideMenu/index.tsx b/frontend/src/components/common/SlideMenu/index.tsx
new file mode 100644
index 00000000..aa2c8a70
--- /dev/null
+++ b/frontend/src/components/common/SlideMenu/index.tsx
@@ -0,0 +1,12 @@
+import styles from './styles';
+
+interface SlideMenuProps {
+  children: React.ReactNode;
+  isShowMenu: boolean | null;
+}
+
+const SlideMenu: React.FC<SlideMenuProps> = ({ children, isShowMenu }) => {
+  return <div css={styles.slideMenu(isShowMenu)}>{children}</div>;
+};
+
+export default SlideMenu;
diff --git a/frontend/src/components/common/SlideMenu/styles.ts b/frontend/src/components/common/SlideMenu/styles.ts
new file mode 100644
index 00000000..a16e5c34
--- /dev/null
+++ b/frontend/src/components/common/SlideMenu/styles.ts
@@ -0,0 +1,19 @@
+import { css } from '@emotion/react';
+
+import animation from '@/styles/animation';
+import theme from '@/styles/theme';
+
+const slideMenu = (isShowMenu: boolean | null) => css`
+  position: absolute;
+  min-height: 100vh;
+  background-color: ${theme.colors.white};
+  z-index: 1000000;
+  width: 100%;
+
+  animation: ${isShowMenu === true ? animation.navigatorOpen : animation.navigatorClose} 0.2s ease-out;
+  animation-fill-mode: forwards;
+`;
+
+const styles = { slideMenu };
+
+export default styles;
diff --git a/frontend/src/components/common/Sticky/index.tsx b/frontend/src/components/common/Sticky/index.tsx
new file mode 100644
index 00000000..0f5aef32
--- /dev/null
+++ b/frontend/src/components/common/Sticky/index.tsx
@@ -0,0 +1,33 @@
+import styles from './style';
+import { css } from '@emotion/react';
+import { useEffect, useRef, useState } from 'react';
+
+import useScroll from '@/hooks/useScroll';
+
+import theme from '@/styles/theme';
+
+interface StickyProps {
+  children: React.ReactNode;
+  defaultPosition: number;
+}
+
+const Sticky: React.FC<StickyProps> = ({ children, defaultPosition }) => {
+  const [isActiveSticky, setIsActiveSticky] = useState(false);
+
+  const progressBarRef = useRef<HTMLDivElement>(null);
+  const { scrollPosition } = useScroll();
+
+  useEffect(() => {
+    const isActive = progressBarRef.current?.offsetTop! > defaultPosition;
+
+    setIsActiveSticky(isActive);
+  }, [scrollPosition]);
+
+  return (
+    <div css={styles.sticky(isActiveSticky)} ref={progressBarRef}>
+      {children}
+    </div>
+  );
+};
+
+export default Sticky;
diff --git a/frontend/src/components/common/Sticky/style.ts b/frontend/src/components/common/Sticky/style.ts
new file mode 100644
index 00000000..720556cd
--- /dev/null
+++ b/frontend/src/components/common/Sticky/style.ts
@@ -0,0 +1,24 @@
+import { css } from '@emotion/react';
+
+import theme from '@/styles/theme';
+
+const sticky = (isActiveSticky: boolean) => css`
+  position: sticky;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 16px;
+  background-color: ${theme.colors.white};
+  z-index: 1;
+
+  box-shadow: ${isActiveSticky ? `2px 2px 2px 0px ${theme.colors.shadow30}` : ''};
+`;
+
+const styles = {
+  sticky,
+};
+
+export default styles;
diff --git a/frontend/src/components/common/ToastBar/index.tsx b/frontend/src/components/common/ToastBar/index.tsx
index cf63c86e..695261c6 100644
--- a/frontend/src/components/common/ToastBar/index.tsx
+++ b/frontend/src/components/common/ToastBar/index.tsx
@@ -1,5 +1,5 @@
-import { AiOutlineCheckCircle } from 'react-icons/ai';
-import { BiError } from 'react-icons/bi';
+import { AiOutlineCheckCircle } from '@react-icons/all-files/ai/AiOutlineCheckCircle';
+import { BiError } from '@react-icons/all-files/bi/BiError';
 import { useRecoilValue } from 'recoil';
 
 import { toastState } from '@/recoil/toast';
diff --git a/frontend/src/components/host/ImageBox/index.tsx b/frontend/src/components/host/ImageBox/index.tsx
index f4a22f85..3c28d751 100644
--- a/frontend/src/components/host/ImageBox/index.tsx
+++ b/frontend/src/components/host/ImageBox/index.tsx
@@ -1,4 +1,4 @@
-import { HiPlus } from 'react-icons/hi';
+import { HiPlus } from '@react-icons/all-files/hi/HiPlus';
 
 import styles from './styles';
 
diff --git a/frontend/src/components/host/ImageBox/styles.ts b/frontend/src/components/host/ImageBox/styles.ts
index aeb717c8..4bafeb96 100644
--- a/frontend/src/components/host/ImageBox/styles.ts
+++ b/frontend/src/components/host/ImageBox/styles.ts
@@ -30,6 +30,7 @@ const imageChangeBox = (imageUrl: string, borderStyle?: string) => css`
 `;
 
 const imageInput = css`
+  width: 100%;
   opacity: 0;
   z-index: -1;
 `;
diff --git a/frontend/src/components/host/JobControl/styles.ts b/frontend/src/components/host/JobControl/styles.ts
index 7e954b18..b7947cfb 100644
--- a/frontend/src/components/host/JobControl/styles.ts
+++ b/frontend/src/components/host/JobControl/styles.ts
@@ -11,29 +11,25 @@ const header = css`
   border-bottom: 1px solid ${theme.colors.gray300};
   padding: 16px 32px;
   font-size: 16px;
-
-  @media screen and (max-width: 720px) {
-    font-size: 14px;
-  }
 `;
 
 const createButton = css`
   margin: 0;
   margin-left: 12px;
-  font-size: 1.2em;
+  font-size: 1.1em;
   width: fit-content;
   height: fit-content;
-  padding: 12px;
+  padding: 8px 10px;
   background-color: ${theme.colors.green};
 `;
 
 const jobNameInput = css`
   border: none;
   border-radius: 12px;
-  width: 55%;
+  width: 64%;
   height: 1.5em;
   padding: 1em;
-  font-size: 1.5em;
+  font-size: 1.2em;
   font-weight: 500;
   margin: 12px 0;
   background-color: ${theme.colors.white};
diff --git a/frontend/src/components/host/JobBox/index.tsx b/frontend/src/components/host/JobListCard/JobBox/index.tsx
similarity index 100%
rename from frontend/src/components/host/JobBox/index.tsx
rename to frontend/src/components/host/JobListCard/JobBox/index.tsx
diff --git a/frontend/src/components/host/JobBox/styles.ts b/frontend/src/components/host/JobListCard/JobBox/styles.ts
similarity index 100%
rename from frontend/src/components/host/JobBox/styles.ts
rename to frontend/src/components/host/JobListCard/JobBox/styles.ts
diff --git a/frontend/src/components/host/JobBox/useJobBox.tsx b/frontend/src/components/host/JobListCard/JobBox/useJobBox.tsx
similarity index 100%
rename from frontend/src/components/host/JobBox/useJobBox.tsx
rename to frontend/src/components/host/JobListCard/JobBox/useJobBox.tsx
diff --git a/frontend/src/components/host/JobListCard/index.tsx b/frontend/src/components/host/JobListCard/index.tsx
index a14e29c6..6e175973 100644
--- a/frontend/src/components/host/JobListCard/index.tsx
+++ b/frontend/src/components/host/JobListCard/index.tsx
@@ -1,11 +1,12 @@
 import useJobListCard from './useJobListCard';
 
 import Button from '@/components/common/Button';
-import JobBox from '@/components/host/JobBox';
+import JobBox from '@/components/host/JobListCard/JobBox';
 
 import { JobType } from '@/types';
 
 import emptyFolder from '@/assets/emptyFolder.png';
+import emptyFolderWebp from '@/assets/emptyFolder.webp';
 
 import styles from './styles';
 
@@ -19,7 +20,7 @@ const JobListCard: React.FC<JobListCardProps> = ({ jobs }) => {
   return (
     <div css={styles.layout}>
       <div css={styles.title}>
-        <span>공간 업무 목록</span>
+        <p>업무 목록</p>
         <Button css={styles.newJobButton} onClick={onClickNewJobButton}>
           새 업무 생성
         </Button>
@@ -27,8 +28,8 @@ const JobListCard: React.FC<JobListCardProps> = ({ jobs }) => {
       <div css={styles.jobListWrapper}>
         {jobs.length === 0 ? (
           <div css={styles.empty}>
-            <img src={emptyFolder} alt="" />
-            <div>생성된 업무가 없어요.</div>
+            <img srcSet={`${emptyFolderWebp}`} src={emptyFolder} alt="" />
+            <div>생성된 업무가 없습니다.</div>
           </div>
         ) : (
           jobs.map(job => <JobBox job={job} key={job.id} />)
diff --git a/frontend/src/components/host/JobListCard/styles.ts b/frontend/src/components/host/JobListCard/styles.ts
index 2a1d7465..ec75b1d3 100644
--- a/frontend/src/components/host/JobListCard/styles.ts
+++ b/frontend/src/components/host/JobListCard/styles.ts
@@ -4,19 +4,27 @@ import theme from '@/styles/theme';
 
 const layout = css`
   min-width: 320px;
-  width: 100%;
-  height: 30.2rem;
   background-color: ${theme.colors.white};
   box-shadow: 2px 2px 2px 2px ${theme.colors.shadow10};
   border-radius: 8px;
+
+  @media screen and (min-width: 1024px) {
+    height: 452px;
+    width: 100%;
+  }
+
+  @media screen and (max-width: 1023px) {
+    height: 360px;
+    width: 90%;
+  }
 `;
 
 const title = css`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1rem 1.25rem;
-  font-size: 1.4rem;
+  padding: 0 24px;
+  font-size: 1.2rem;
   border-bottom: 1px solid ${theme.colors.gray300};
 `;
 
@@ -49,11 +57,8 @@ const jobList = css`
 const newJobButton = css`
   width: auto;
   height: 2rem;
-  padding: 6px 10px;
-  font-weight: 500;
-  font-size: 1rem;
+  font-size: 0.9rem;
   padding: 0 12px;
-
   margin: 0;
 `;
 
@@ -84,7 +89,9 @@ const empty = css`
 
   img {
     max-width: 100px;
+    width: 100px;
     margin-bottom: 12px;
+    aspect-ratio: auto 1 / 1;
   }
 `;
 const styles = { layout, title, jobListWrapper, jobList, newJobButton, updateButton, deleteButton, empty };
diff --git a/frontend/src/components/host/LandingView/FloatingActionButton/index.tsx b/frontend/src/components/host/LandingView/FloatingActionButton/index.tsx
new file mode 100644
index 00000000..a2b068f3
--- /dev/null
+++ b/frontend/src/components/host/LandingView/FloatingActionButton/index.tsx
@@ -0,0 +1,22 @@
+import useFloatingActionButton from './useFloatingActionButton';
+import { RefObject } from 'react';
+
+import styles from './styles';
+
+interface FloatingActionButtonProps {
+  mainRef: RefObject<HTMLElement>;
+}
+
+const FloatingActionButton: React.FC<FloatingActionButtonProps> = ({ mainRef }) => {
+  const { eventNumber, onClick } = useFloatingActionButton(mainRef);
+
+  return (
+    <div>
+      <div css={styles.floatingActionButton(eventNumber)} onClick={onClick}>
+        <span>시작하기</span>
+      </div>
+    </div>
+  );
+};
+
+export default FloatingActionButton;
diff --git a/frontend/src/components/host/LandingView/FloatingActionButton/styles.ts b/frontend/src/components/host/LandingView/FloatingActionButton/styles.ts
new file mode 100644
index 00000000..f713cde8
--- /dev/null
+++ b/frontend/src/components/host/LandingView/FloatingActionButton/styles.ts
@@ -0,0 +1,27 @@
+import { css } from '@emotion/react';
+
+import theme from '@/styles/theme';
+
+const floatingActionButton = (eventNumber: number) => css`
+  ${eventNumber === 1 &&
+  `
+    transform: translateX(calc(-50vw + 114px))  scale(1.4);
+    transition-duration: 1.5s;
+    `}
+
+  right: 40px;
+  bottom: 40px;
+  position: fixed;
+  z-index: 200;
+  cursor: pointer;
+  color: white;
+  font-weight: 600;
+  background-color: ${theme.colors.primary};
+  padding: 16px 32px;
+  border-radius: 24px;
+  box-shadow: 0px 0px 2px 3px ${theme.colors.shadow10};
+`;
+
+const styles = { floatingActionButton };
+
+export default styles;
diff --git a/frontend/src/components/host/LandingView/FloatingActionButton/useFloatingActionButton.ts b/frontend/src/components/host/LandingView/FloatingActionButton/useFloatingActionButton.ts
new file mode 100644
index 00000000..92990d33
--- /dev/null
+++ b/frontend/src/components/host/LandingView/FloatingActionButton/useFloatingActionButton.ts
@@ -0,0 +1,26 @@
+import { RefObject, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import useOnContainerScroll from '@/hooks/useOnContainerScroll';
+
+const useFloatingActionButton = (mainRef: RefObject<HTMLElement>) => {
+  const navigate = useNavigate();
+  const [eventNumber, setEventNumber] = useState(0);
+
+  const { scrollInfo } = useOnContainerScroll(mainRef, () => {
+    if (scrollInfo.progress === 1) {
+      setEventNumber(1);
+      return;
+    }
+
+    setEventNumber(0);
+  });
+
+  const onClick = () => {
+    navigate('/host');
+  };
+
+  return { eventNumber, onClick };
+};
+
+export default useFloatingActionButton;
diff --git a/frontend/src/components/host/LandingView/HeroSection/index.tsx b/frontend/src/components/host/LandingView/HeroSection/index.tsx
new file mode 100644
index 00000000..21418a52
--- /dev/null
+++ b/frontend/src/components/host/LandingView/HeroSection/index.tsx
@@ -0,0 +1,36 @@
+import useHeroSection from './useHeroSection';
+import { IoIosArrowDown } from '@react-icons/all-files/io/IoIosArrowDown';
+
+import homeCover_360w from '@/assets/homeCover-360w.webp';
+import homeCover_480w from '@/assets/homeCover-480w.webp';
+import homeCover_fallback from '@/assets/homeCover-fallback.png';
+
+import styles from './styles';
+
+const HeroSection: React.FC = () => {
+  const { isFull, onMouseMove, canvasRef } = useHeroSection();
+
+  return (
+    <>
+      <section css={styles.layout(isFull)} onMouseMove={onMouseMove}>
+        <div css={styles.content}>
+          <div css={styles.homeCoverWrapper}>
+            <picture css={styles.homeCover}>
+              <source media={`(max-width: 360px`} type="image/webp" srcSet={homeCover_360w} />
+              <source type="image/webp" srcSet={homeCover_480w} />
+              <img src={homeCover_fallback} alt="" />
+            </picture>
+          </div>
+          <div css={styles.arrowDownWrapper}>
+            <span>아래로 내려주세요.</span>
+            <IoIosArrowDown />
+          </div>
+          <canvas css={styles.canvas} ref={canvasRef}></canvas>
+        </div>
+      </section>
+      <div css={styles.bottomWrapper(isFull)} />
+    </>
+  );
+};
+
+export default HeroSection;
diff --git a/frontend/src/components/host/LandingView/HeroSection/styles.ts b/frontend/src/components/host/LandingView/HeroSection/styles.ts
new file mode 100644
index 00000000..87aca01c
--- /dev/null
+++ b/frontend/src/components/host/LandingView/HeroSection/styles.ts
@@ -0,0 +1,79 @@
+import { css } from '@emotion/react';
+
+import animation from '@/styles/animation';
+import theme from '@/styles/theme';
+
+const layout = (isFull: boolean) => css`
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  ${isFull ? `transform: translateY(68px);` : `position: fixed; top: 0; z-index: 100;`};
+`;
+
+const content = css`
+  height: 100vh;
+  position: relative;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+  background-color: ${theme.colors.background};
+`;
+
+const homeCoverWrapper = css`
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+`;
+
+const homeCover = css`
+  margin: 1em 0;
+  animation: ${animation.wave} 2s alternate linear infinite;
+
+  source,
+  img {
+    width: 360px;
+    aspect-ratio: auto 1 / 1;
+    @media screen and (min-width: 481px) {
+      width: 480px;
+    }
+  }
+`;
+
+const arrowDownWrapper = css`
+  position: absolute;
+  bottom: 20px;
+  color: ${theme.colors.primary};
+  width: 100%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  animation: ${animation.moveDown} 2s 0s infinite;
+`;
+
+const canvas = css`
+  height: 100%;
+  left: 50%;
+  position: relative;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  width: 100%;
+  z-index: 2;
+  opacity: 0.85;
+`;
+
+const bottomWrapper = (isFull: boolean) => css`
+  margin-bottom: ${isFull ? '20vh' : '100vh'};
+  background-color: ${theme.colors.background};
+`;
+
+const styles = { layout, content, homeCoverWrapper, homeCover, arrowDownWrapper, canvas, bottomWrapper };
+
+export default styles;
diff --git a/frontend/src/components/host/LandingView/HeroSection/useHeroSection.ts b/frontend/src/components/host/LandingView/HeroSection/useHeroSection.ts
new file mode 100644
index 00000000..777ea71d
--- /dev/null
+++ b/frontend/src/components/host/LandingView/HeroSection/useHeroSection.ts
@@ -0,0 +1,92 @@
+import { useEffect, useRef, useState } from 'react';
+
+import useScroll from '@/hooks/useScroll';
+
+import screenSize from '@/constants/screenSize';
+
+const CIRCLE_SIZE = window.innerWidth > screenSize.MOBILE ? 80 : 60;
+
+const useHeroSection = () => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  const positionRef = useRef({ x: window.innerWidth / 2, y: window.innerHeight / 2 });
+
+  const { scrollPosition } = useScroll();
+
+  const scrollPositionInt = scrollPosition + 3;
+
+  const [isFull, setIsFull] = useState(false);
+
+  const onMouseMove = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext('2d');
+    if (!canvas || !ctx) return;
+
+    const target = e.target as HTMLInputElement;
+    const localName = target.localName;
+
+    if (localName !== 'canvas') return;
+
+    positionRef.current = {
+      x: e.nativeEvent.offsetX,
+      y: e.nativeEvent.offsetY,
+    };
+
+    const scale = window.devicePixelRatio;
+    canvas.width = Math.floor(window.innerWidth * scale);
+    canvas.height = Math.floor(window.innerHeight * scale);
+    ctx.scale(scale, scale);
+
+    const x = e.nativeEvent.offsetX;
+    const y = e.nativeEvent.offsetY;
+
+    const radius = CIRCLE_SIZE * scrollPositionInt;
+
+    ctx.beginPath();
+    let circlePath = new Path2D();
+    circlePath.arc(x, y, radius, 0, Math.PI * 2);
+    circlePath.rect(0, 0, window.innerWidth, window.innerHeight);
+    ctx.clip(circlePath, 'evenodd');
+    ctx.fillStyle = '#000000';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.closePath();
+  };
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext('2d');
+    if (!canvas || !ctx) return;
+
+    const scale = window.devicePixelRatio;
+
+    canvas.width = Math.floor(window.innerWidth * scale);
+    canvas.height = Math.floor(window.innerHeight * scale);
+    ctx.scale(scale, scale);
+
+    const x = positionRef.current.x;
+    const y = positionRef.current.y;
+
+    let radius = CIRCLE_SIZE * scrollPositionInt - scrollPositionInt * 2;
+
+    if (radius < 0) radius = 0;
+
+    ctx.beginPath();
+    let circlePath = new Path2D();
+    circlePath.arc(x, y, radius, 0, Math.PI * 2);
+    circlePath.rect(0, 0, window.innerWidth, window.innerHeight);
+    ctx.clip(circlePath, 'evenodd');
+    ctx.fillStyle = '#000000';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.closePath();
+
+    if (scrollPositionInt >= 12) {
+      setIsFull(true);
+    } else {
+      setIsFull(false);
+    }
+  }, [scrollPositionInt]);
+
+  return { isFull, onMouseMove, canvasRef };
+};
+
+export default useHeroSection;
diff --git a/frontend/src/components/host/LandingView/HostPicture/index.tsx b/frontend/src/components/host/LandingView/HostPicture/index.tsx
new file mode 100644
index 00000000..0b50a0ff
--- /dev/null
+++ b/frontend/src/components/host/LandingView/HostPicture/index.tsx
@@ -0,0 +1,21 @@
+import { HostImageType } from '@/types';
+
+import screenSize from '@/constants/screenSize';
+
+interface HostPictureProps {
+  image: HostImageType;
+  className?: string;
+}
+
+const HostPicture: React.FC<HostPictureProps> = ({ image, className }) => {
+  return (
+    <picture className={className}>
+      <source media={`(max-width: ${screenSize.DESKTOP}px)`} type="image/webp" srcSet={image['280w']} />
+      <source media={`(max-width: ${screenSize.DESKTOP_BIC}px)`} type="image/webp" srcSet={image['360w']} />
+      <source type="image/webp" srcSet={image['540w']} />
+      <img src={image.fallback} alt="" />
+    </picture>
+  );
+};
+
+export default HostPicture;
diff --git a/frontend/src/components/host/LandingView/HostViewSection1/index.tsx b/frontend/src/components/host/LandingView/HostViewSection1/index.tsx
new file mode 100644
index 00000000..24ce5132
--- /dev/null
+++ b/frontend/src/components/host/LandingView/HostViewSection1/index.tsx
@@ -0,0 +1,31 @@
+import useHostViewSection1 from './useHostViewSection1';
+
+import { ScreenModeType } from '@/types';
+
+import styles from './styles';
+
+interface HostViewSection1 {
+  screenMode: ScreenModeType;
+}
+
+const HostViewSection1: React.FC<HostViewSection1> = ({ screenMode }) => {
+  const { eventNumber, sectionRef } = useHostViewSection1();
+
+  return (
+    <section css={styles.layout(screenMode)} ref={sectionRef}>
+      <div css={styles.content}>
+        <h1 css={styles.title(screenMode)}>
+          직접 내 공간을 <b>생성</b>하고 <b>관리</b>하고싶다면?
+        </h1>
+        {eventNumber === 1 && (
+          <h1 css={styles.subTitle(screenMode)}>
+            <b>Gong</b>
+            <b>Check</b>과 함께 하세요.
+          </h1>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default HostViewSection1;
diff --git a/frontend/src/components/host/LandingView/HostViewSection1/styles.ts b/frontend/src/components/host/LandingView/HostViewSection1/styles.ts
new file mode 100644
index 00000000..b6e10c70
--- /dev/null
+++ b/frontend/src/components/host/LandingView/HostViewSection1/styles.ts
@@ -0,0 +1,62 @@
+import { css } from '@emotion/react';
+
+import { ScreenModeType } from '@/types';
+
+import animation from '@/styles/animation';
+import theme from '@/styles/theme';
+
+const layout = (screenMode: ScreenModeType) =>
+  css`
+    width: 100vw;
+    height: ${screenMode === 'DESKTOP' ? `100vh` : `50vh`};
+  `;
+
+const content = css`
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: ${theme.colors.background};
+`;
+
+const title = (screenMode: ScreenModeType) => css`
+  top: 21.4vw;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 11;
+  font-size: ${screenMode === 'DESKTOP' ? `2.7vw` : `5vw`};
+  white-space: nowrap;
+  color: ${theme.colors.gray800};
+  position: absolute;
+  b {
+    color: ${theme.colors.primary};
+  }
+
+  b + b {
+    color: ${theme.colors.green};
+  }
+`;
+
+const subTitle = (screenMode: ScreenModeType) => css`
+  position: absolute;
+  top: 44vw;
+  z-index: 11;
+  color: ${theme.colors.gray800};
+  animation: ${animation.fadeIn} 1.5s;
+  white-space: nowrap;
+
+  ${screenMode === 'DESKTOP'
+    ? `left: 33%; font-size: 2.7vw;`
+    : `left: 50%; transform: translateX(-50%); font-size: 5vw;`}
+
+  b {
+    color: ${theme.colors.primary};
+  }
+
+  b + b {
+    color: ${theme.colors.green};
+  }
+`;
+
+const styles = { layout, content, title, subTitle };
+
+export default styles;
diff --git a/frontend/src/components/host/LandingView/HostViewSection1/useHostViewSection1.ts b/frontend/src/components/host/LandingView/HostViewSection1/useHostViewSection1.ts
new file mode 100644
index 00000000..45c91f10
--- /dev/null
+++ b/frontend/src/components/host/LandingView/HostViewSection1/useHostViewSection1.ts
@@ -0,0 +1,23 @@
+import { useRef, useState } from 'react';
+
+import useOnContainerScroll from '@/hooks/useOnContainerScroll';
+
+const useHostViewSection1 = () => {
+  const [eventNumber, setEventNumber] = useState(0);
+  const sectionRef = useRef<HTMLDivElement>(null);
+
+  const { dimension, scrollInfo } = useOnContainerScroll(sectionRef, () => {
+    const progress = Math.min(Math.max(0, scrollInfo.scrollY / dimension.windowHeight), 1) * 100;
+    if (progress === 0) return;
+
+    if (progress >= 80) {
+      setEventNumber(1);
+      return;
+    }
+    setEventNumber(0);
+  });
+
+  return { eventNumber, sectionRef };
+};
+
+export default useHostViewSection1;
diff --git a/frontend/src/components/host/LandingView/HostViewSection2/index.tsx b/frontend/src/components/host/LandingView/HostViewSection2/index.tsx
new file mode 100644
index 00000000..b410194d
--- /dev/null
+++ b/frontend/src/components/host/LandingView/HostViewSection2/index.tsx
@@ -0,0 +1,87 @@
+import HostPicture from '../HostPicture';
+import useHostViewSection2 from './useHostViewSection2';
+
+import { HostImageType, ScreenModeType } from '@/types';
+
+import createSpace_280w from '@/assets/createSpace-280w.webp';
+import createSpace_360w from '@/assets/createSpace-360w.webp';
+import createSpace_540w from '@/assets/createSpace-540w.webp';
+import createSpace_800w from '@/assets/createSpace-800w.webp';
+import createSpace_fallback from '@/assets/createSpace-fallback.jpg';
+import dashboard_280w from '@/assets/dashboard-280w.webp';
+import dashboard_360w from '@/assets/dashboard-360w.webp';
+import dashboard_540w from '@/assets/dashboard-540w.webp';
+import dashboard_800w from '@/assets/dashboard-800w.webp';
+import dashboard_fallback from '@/assets/dashboard-fallback.jpg';
+import edit2_280w from '@/assets/edit2-280w.webp';
+import edit2_360w from '@/assets/edit2-360w.webp';
+import edit2_540w from '@/assets/edit2-540w.webp';
+import edit2_800w from '@/assets/edit2-800w.webp';
+import edit2_fallback from '@/assets/edit2-fallback.jpg';
+import edit_280w from '@/assets/edit-280w.webp';
+import edit_360w from '@/assets/edit-360w.webp';
+import edit_540w from '@/assets/edit-540w.webp';
+import edit_800w from '@/assets/edit-800w.webp';
+import edit_fallback from '@/assets/edit-fallback.jpg';
+
+import theme from '@/styles/theme';
+
+import styles from './styles';
+
+const createSpace: HostImageType = {
+  '280w': createSpace_280w,
+  '360w': createSpace_360w,
+  '540w': createSpace_540w,
+  '800w': createSpace_800w,
+  fallback: createSpace_fallback,
+};
+
+const dashboard: HostImageType = {
+  '280w': dashboard_280w,
+  '360w': dashboard_360w,
+  '540w': dashboard_540w,
+  '800w': dashboard_800w,
+  fallback: dashboard_fallback,
+};
+
+const edit2: HostImageType = {
+  '280w': edit2_280w,
+  '360w': edit2_360w,
+  '540w': edit2_540w,
+  '800w': edit2_800w,
+  fallback: edit2_fallback,
+};
+
+const edit: HostImageType = {
+  '280w': edit_280w,
+  '360w': edit_360w,
+  '540w': edit_540w,
+  '800w': edit_800w,
+  fallback: edit_fallback,
+};
+
+interface HostViewSection2Props {
+  screenMode: ScreenModeType;
+}
+
+const HostViewSection2: React.FC<HostViewSection2Props> = ({ screenMode }) => {
+  const { eventNumber, sectionRef } = useHostViewSection2();
+
+  return (
+    <section css={styles.layout} ref={sectionRef}>
+      <div css={styles.content}>
+        <h1 css={styles.title(screenMode)}>내 공간 관리</h1>
+        {eventNumber >= 1 && (
+          <div css={styles.gridWrapper}>
+            <HostPicture image={createSpace} css={styles.picture(theme.colors.primary)} />
+            <HostPicture image={dashboard} css={styles.picture(theme.colors.primary)} />
+            <HostPicture image={edit} css={styles.picture(theme.colors.green)} />
+            <HostPicture image={edit2} css={styles.picture(theme.colors.green)} />
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default HostViewSection2;
diff --git a/frontend/src/components/host/LandingView/HostViewSection2/styles.ts b/frontend/src/components/host/LandingView/HostViewSection2/styles.ts
new file mode 100644
index 00000000..5756ac22
--- /dev/null
+++ b/frontend/src/components/host/LandingView/HostViewSection2/styles.ts
@@ -0,0 +1,64 @@
+import { css } from '@emotion/react';
+
+import { ScreenModeType } from '@/types';
+
+import animation from '@/styles/animation';
+import theme from '@/styles/theme';
+
+const layout = css`
+  margin-top: 10vh;
+  width: 100vw;
+  height: 100vh;
+`;
+
+const content = css`
+  width: 100%;
+  height: 100%;
+  background-color: ${theme.colors.background};
+  position: relative;
+  display: flex;
+  justify-content: center;
+`;
+
+const title = (screenMode: ScreenModeType) => css`
+  position: absolute;
+  top: 2vw;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 11;
+  font-size: ${screenMode === 'DESKTOP' ? `2.7vw` : `5vw`};
+  color: ${theme.colors.gray800};
+  animation: ${animation.fadeIn} 1.5s;
+  animation-fill-mode: forwards;
+`;
+
+const gridWrapper = css`
+  display: grid;
+  position: absolute;
+  top: 14vw;
+  animation: ${animation.moveUp} 1.5s;
+  animation-fill-mode: forwards;
+  z-index: 11;
+  gap: 10px 20px;
+  grid-template-columns: repeat(2, 1fr);
+
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(1, 1fr);
+    row-gap: 20px;
+  }
+
+  & img {
+    height: 100%;
+    width: 100%;
+  }
+`;
+
+const picture = (color: string) => css`
+  box-shadow: 3px 3px 3px 3px ${theme.colors.shadow20};
+  border-radius: 4px;
+  border: 4px solid ${color};
+`;
+
+const styles = { layout, content, title, gridWrapper, picture };
+
+export default styles;
diff --git a/frontend/src/components/host/LandingView/HostViewSection2/useHostViewSection2.ts b/frontend/src/components/host/LandingView/HostViewSection2/useHostViewSection2.ts
new file mode 100644
index 00000000..8d184f98
--- /dev/null
+++ b/frontend/src/components/host/LandingView/HostViewSection2/useHostViewSection2.ts
@@ -0,0 +1,23 @@
+import { useRef, useState } from 'react';
+
+import useOnContainerScroll from '@/hooks/useOnContainerScroll';
+
+const useHostViewSection2 = () => {
+  const [eventNumber, setEventNumber] = useState(0);
+  const sectionRef = useRef<HTMLDivElement>(null);
+
+  const { dimension, scrollInfo } = useOnContainerScroll(sectionRef, () => {
+    const progress = Math.min(Math.max(0, scrollInfo.scrollY / dimension.windowHeight), 1) * 100;
+    if (progress === 0) return;
+
+    if (progress >= 50) {
+      setEventNumber(1);
+      return;
+    }
+    setEventNumber(0);
+  });
+
+  return { eventNumber, sectionRef };
+};
+
+export default useHostViewSection2;
diff --git a/frontend/src/components/host/LandingView/HostViewSection3/index.tsx b/frontend/src/components/host/LandingView/HostViewSection3/index.tsx
new file mode 100644
index 00000000..e759a2aa
--- /dev/null
+++ b/frontend/src/components/host/LandingView/HostViewSection3/index.tsx
@@ -0,0 +1,21 @@
+import useHostViewSection3 from './useHostViewSection3';
+
+import { ScreenModeType } from '@/types';
+
+import styles from './styles';
+
+interface HostViewSection3Props {
+  screenMode: ScreenModeType;
+}
+
+const HostViewSection3: React.FC<HostViewSection3Props> = ({ screenMode }) => {
+  const { eventNumber, sectionRef } = useHostViewSection3();
+
+  return (
+    <section css={styles.layout} ref={sectionRef}>
+      <div css={styles.content}>{eventNumber === 1 && <h1 css={styles.title(screenMode)}>지금 바로</h1>}</div>
+    </section>
+  );
+};
+
+export default HostViewSection3;
diff --git a/frontend/src/components/host/LandingView/HostViewSection3/styles.ts b/frontend/src/components/host/LandingView/HostViewSection3/styles.ts
new file mode 100644
index 00000000..934453df
--- /dev/null
+++ b/frontend/src/components/host/LandingView/HostViewSection3/styles.ts
@@ -0,0 +1,33 @@
+import { css } from '@emotion/react';
+
+import { ScreenModeType } from '@/types';
+
+import animation from '@/styles/animation';
+import theme from '@/styles/theme';
+
+const layout = css`
+  width: 100vw;
+  height: 42vh;
+`;
+
+const content = css`
+  width: 100%;
+  height: 100%;
+  background-color: ${theme.colors.background};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const title = (screenMode: ScreenModeType) => css`
+  z-index: 11;
+  font-size: ${screenMode === 'DESKTOP' ? `2.7vw` : `5vw`};
+  color: ${theme.colors.gray800};
+  animation: ${animation.moveDown} 1.5s;
+  animation-fill-mode: forwards;
+  padding-bottom: 8vh;
+`;
+
+const styles = { layout, content, title };
+
+export default styles;
diff --git a/frontend/src/components/host/LandingView/HostViewSection3/useHostViewSection3.ts b/frontend/src/components/host/LandingView/HostViewSection3/useHostViewSection3.ts
new file mode 100644
index 00000000..880075ff
--- /dev/null
+++ b/frontend/src/components/host/LandingView/HostViewSection3/useHostViewSection3.ts
@@ -0,0 +1,24 @@
+import { useRef, useState } from 'react';
+
+import useOnContainerScroll from '@/hooks/useOnContainerScroll';
+
+const useHostViewSection3 = () => {
+  const [eventNumber, setEventNumber] = useState(0);
+  const sectionRef = useRef<HTMLDivElement>(null);
+
+  const { dimension, scrollInfo } = useOnContainerScroll(sectionRef, () => {
+    const progress = Math.min(Math.max(0, scrollInfo.scrollY / dimension.windowHeight), 1) * 100;
+    if (progress === 0) return;
+
+    if (progress >= 20) {
+      setEventNumber(1);
+      return;
+    }
+
+    setEventNumber(0);
+  });
+
+  return { eventNumber, sectionRef };
+};
+
+export default useHostViewSection3;
diff --git a/frontend/src/components/host/LandingView/UserPicture/index.tsx b/frontend/src/components/host/LandingView/UserPicture/index.tsx
new file mode 100644
index 00000000..ee3084cb
--- /dev/null
+++ b/frontend/src/components/host/LandingView/UserPicture/index.tsx
@@ -0,0 +1,22 @@
+import { UserImageType } from '@/types';
+
+import screenSize from '@/constants/screenSize';
+
+interface UserPicture {
+  image: UserImageType;
+  className?: string;
+}
+
+const UserPicture: React.FC<UserPicture> = ({ image, className }) => {
+  return (
+    <picture className={className}>
+      <source media={`(max-width: ${screenSize.TABLET}px)`} type="image/webp" srcSet={image['160w']} />
+      <source media={`(max-width: ${screenSize.DESKTOP}px)`} type="image/webp" srcSet={image['240w']} />
+      <source media={`(max-width: ${screenSize.DESKTOP_BIC}px)`} type="image/webp" srcSet={image['320w']} />
+      <source type="image/webp" srcSet={image['480w']} />
+      <img src={image.fallback} alt="" />
+    </picture>
+  );
+};
+
+export default UserPicture;
diff --git a/frontend/src/components/host/LandingView/UserViewSection1/index.tsx b/frontend/src/components/host/LandingView/UserViewSection1/index.tsx
new file mode 100644
index 00000000..1d55ab6a
--- /dev/null
+++ b/frontend/src/components/host/LandingView/UserViewSection1/index.tsx
@@ -0,0 +1,69 @@
+import UserPicture from '../UserPicture';
+import useUserViewSection1 from './useUserViewSection1';
+
+import { ScreenModeType, UserImageType } from '@/types';
+
+import mobileView1_160w from '@/assets/mobileView1-160w.webp';
+import mobileView1_240w from '@/assets/mobileView1-240w.webp';
+import mobileView1_320w from '@/assets/mobileView1-320w.webp';
+import mobileView1_480w from '@/assets/mobileView1-480w.webp';
+import mobileView1_fallback from '@/assets/mobileView1-fallback.png';
+import mobileView2_160w from '@/assets/mobileView2-160w.webp';
+import mobileView2_240w from '@/assets/mobileView2-240w.webp';
+import mobileView2_320w from '@/assets/mobileView2-320w.webp';
+import mobileView2_480w from '@/assets/mobileView2-480w.webp';
+import mobileView2_fallback from '@/assets/mobileView2-fallback.png';
+
+import styles from './styles';
+
+const mobileView1: UserImageType = {
+  '160w': mobileView1_160w,
+  '240w': mobileView1_240w,
+  '320w': mobileView1_320w,
+  '480w': mobileView1_480w,
+  fallback: mobileView1_fallback,
+};
+
+const mobileView2: UserImageType = {
+  '160w': mobileView2_160w,
+  '240w': mobileView2_240w,
+  '320w': mobileView2_320w,
+  '480w': mobileView2_480w,
+  fallback: mobileView2_fallback,
+};
+
+interface UserViewSection1 {
+  screenMode: ScreenModeType;
+}
+
+const UserViewSection1: React.FC<UserViewSection1> = ({ screenMode }) => {
+  const { eventNumber, sectionRef } = useUserViewSection1();
+
+  return (
+    <section css={styles.layout} ref={sectionRef}>
+      <div css={styles.content}>
+        <h1 css={styles.title(screenMode)}>쉽게 확인해요.</h1>
+        <h1 css={styles.subTitle(screenMode)}>함께 사용할</h1>
+
+        {eventNumber >= 1 && (
+          <div css={styles.leftSectionWrapper}>
+            <UserPicture image={mobileView1} css={styles.leftSection(screenMode)} />
+            <h1 css={styles.leftSectionTitle(screenMode)}>
+              <b>공간</b>과
+            </h1>
+          </div>
+        )}
+        {eventNumber === 2 && (
+          <div css={styles.rightSectionWrapper}>
+            <UserPicture image={mobileView2} css={styles.rightSection(screenMode)} />
+            <h1 css={styles.rightSectionTitle(screenMode)}>
+              <b>업무</b>를
+            </h1>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default UserViewSection1;
diff --git a/frontend/src/components/host/LandingView/UserViewSection1/styles.ts b/frontend/src/components/host/LandingView/UserViewSection1/styles.ts
new file mode 100644
index 00000000..8698cc94
--- /dev/null
+++ b/frontend/src/components/host/LandingView/UserViewSection1/styles.ts
@@ -0,0 +1,115 @@
+import { css } from '@emotion/react';
+
+import { ScreenModeType } from '@/types';
+
+import animation from '@/styles/animation';
+import theme from '@/styles/theme';
+
+const layout = css`
+  width: 100vw;
+  height: 100vh;
+  z-index: 10;
+`;
+
+const content = css`
+  width: 100%;
+  height: 100%;
+  background-color: ${theme.colors.background};
+  position: relative;
+  z-index: 10;
+`;
+
+const title = (screenMode: ScreenModeType) => css`
+  position: absolute;
+  color: ${theme.colors.primary};
+  z-index: 11;
+  top: 13vw;
+  ${screenMode === 'DESKTOP'
+    ? `left: 12%; font-size: 4.1vw;`
+    : `left: 50%; transform: translateX(-50%); font-size: 6vw;`}
+`;
+
+const subTitle = (screenMode: ScreenModeType) => css`
+  position: absolute;
+  top: 29vw;
+  z-index: 11;
+  color: ${theme.colors.gray800};
+  ${screenMode === 'DESKTOP'
+    ? `left: 10%; font-size: 2.7vw;`
+    : `left: 30%; transform: translateX(-50%); font-size: 3.7vw;`}
+`;
+
+const leftSectionWrapper = css`
+  animation: ${animation.moveRight} 1.5s;
+  animation-fill-mode: forwards;
+  z-index: 11;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+`;
+
+const leftSection = (screenMode: ScreenModeType) => css`
+  position: absolute;
+  ${screenMode === 'DESKTOP' ? `top: 5vw; right: 25%; width: 20%;` : `top: 28%; left: 20%;`}
+`;
+
+const leftSectionTitle = (screenMode: ScreenModeType) => css`
+  position: absolute;
+  top: 29vw;
+  animation: ${animation.moveDown} 1.5s;
+  animation-fill-mode: forwards;
+  color: ${theme.colors.gray800};
+  z-index: 11;
+  ${screenMode === 'DESKTOP'
+    ? `font-size: 2.7vw; left: 24.5%;`
+    : `font-size: 3.7vw; left: 42%; transform: translateX(-50%);`}
+
+  b {
+    color: ${theme.colors.green};
+  }
+`;
+
+const rightSectionWrapper = css`
+  animation: ${animation.moveLeft} 1.5s;
+  animation-fill-mode: forwards;
+  z-index: 12;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+`;
+
+const rightSection = (screenMode: ScreenModeType) => css`
+  position: absolute;
+  ${screenMode === 'DESKTOP' ? `top: 12vw; right: 10%; width: 20%;` : `top: 32%; right: 20%;`}
+`;
+
+const rightSectionTitle = (screenMode: ScreenModeType) => css`
+  position: absolute;
+  top: 29vw;
+  z-index: 11;
+  animation: ${animation.moveUp} 1.5s;
+  animation-fill-mode: forwards;
+  color: ${theme.colors.gray800};
+  ${screenMode === 'DESKTOP'
+    ? `font-size: 2.7vw; left: 33%;`
+    : `font-size: 3.7vw; left: 54%; transform: translateX(-50%);`}
+
+  b {
+    color: ${theme.colors.green};
+  }
+`;
+
+const styles = {
+  layout,
+  content,
+  title,
+  subTitle,
+  leftSectionWrapper,
+  leftSection,
+  leftSectionTitle,
+  rightSectionWrapper,
+  rightSection,
+  rightSectionTitle,
+};
+
+export default styles;
diff --git a/frontend/src/components/host/LandingView/UserViewSection1/useUserViewSection1.ts b/frontend/src/components/host/LandingView/UserViewSection1/useUserViewSection1.ts
new file mode 100644
index 00000000..e12be71d
--- /dev/null
+++ b/frontend/src/components/host/LandingView/UserViewSection1/useUserViewSection1.ts
@@ -0,0 +1,27 @@
+import { useRef, useState } from 'react';
+
+import useOnContainerScroll from '@/hooks/useOnContainerScroll';
+
+const useUserViewSection1 = () => {
+  const [eventNumber, setEventNumber] = useState(0);
+  const sectionRef = useRef<HTMLDivElement>(null);
+
+  const { dimension, scrollInfo } = useOnContainerScroll(sectionRef, () => {
+    const progress = Math.min(Math.max(0, scrollInfo.scrollY / dimension.windowHeight), 1) * 100;
+    if (progress === 0) return;
+
+    if (progress >= 40 && progress < 80) {
+      setEventNumber(1);
+      return;
+    }
+    if (progress >= 80) {
+      setEventNumber(2);
+      return;
+    }
+    setEventNumber(0);
+  });
+
+  return { eventNumber, sectionRef };
+};
+
+export default useUserViewSection1;
diff --git a/frontend/src/components/host/LandingView/UserViewSection2/index.tsx b/frontend/src/components/host/LandingView/UserViewSection2/index.tsx
new file mode 100644
index 00000000..5e35b03a
--- /dev/null
+++ b/frontend/src/components/host/LandingView/UserViewSection2/index.tsx
@@ -0,0 +1,68 @@
+import UserPicture from '../UserPicture';
+import useUserViewSection2 from './useUserViewSection2';
+
+import { ScreenModeType, UserImageType } from '@/types';
+
+import mobileView3_160w from '@/assets/mobileView3-160w.webp';
+import mobileView3_240w from '@/assets/mobileView3-240w.webp';
+import mobileView3_320w from '@/assets/mobileView3-320w.webp';
+import mobileView3_480w from '@/assets/mobileView3-480w.webp';
+import mobileView3_fallback from '@/assets/mobileView3-fallback.png';
+import mobileView4_160w from '@/assets/mobileView4-160w.webp';
+import mobileView4_240w from '@/assets/mobileView4-240w.webp';
+import mobileView4_320w from '@/assets/mobileView4-320w.webp';
+import mobileView4_480w from '@/assets/mobileView4-480w.webp';
+import mobileView4_fallback from '@/assets/mobileView4-fallback.png';
+
+import styles from './styles';
+
+const mobileView3: UserImageType = {
+  '160w': mobileView3_160w,
+  '240w': mobileView3_240w,
+  '320w': mobileView3_320w,
+  '480w': mobileView3_480w,
+  fallback: mobileView3_fallback,
+};
+
+const mobileView4: UserImageType = {
+  '160w': mobileView4_160w,
+  '240w': mobileView4_240w,
+  '320w': mobileView4_320w,
+  '480w': mobileView4_480w,
+  fallback: mobileView4_fallback,
+};
+
+interface UserViewSection2Props {
+  screenMode: ScreenModeType;
+}
+
+const UserViewSection2: React.FC<UserViewSection2Props> = ({ screenMode }) => {
+  const { sectionRef, eventNumber } = useUserViewSection2();
+
+  return (
+    <section css={styles.layout} ref={sectionRef}>
+      <div css={styles.content}>
+        <h1 css={styles.title(screenMode)}>간단하게 체크해요.</h1>
+        {eventNumber >= 1 && (
+          <div css={styles.leftSectionWrapper}>
+            <UserPicture image={mobileView3} css={styles.leftSection(screenMode)} />
+            <h1 css={styles.leftSectionTitle(screenMode)}>
+              <b>체크리스트</b>와
+            </h1>
+          </div>
+        )}
+        {eventNumber === 2 && (
+          <div css={styles.rightSectionWrapper}>
+            <UserPicture image={mobileView4} css={styles.rightSection(screenMode)} />
+            <h1 css={styles.rightSectionTitle(screenMode)}>
+              <b>상세정보</b> 제공
+            </h1>
+            {screenMode === 'DESKTOP' && <h1 css={styles.rightSectionLittleTitle}>How, Where</h1>}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default UserViewSection2;
diff --git a/frontend/src/components/host/LandingView/UserViewSection2/styles.ts b/frontend/src/components/host/LandingView/UserViewSection2/styles.ts
new file mode 100644
index 00000000..4ccdfe9f
--- /dev/null
+++ b/frontend/src/components/host/LandingView/UserViewSection2/styles.ts
@@ -0,0 +1,109 @@
+import { css } from '@emotion/react';
+
+import { ScreenModeType } from '@/types';
+
+import animation from '@/styles/animation';
+import theme from '@/styles/theme';
+
+const layout = css`
+  width: 100vw;
+  height: 100vh;
+`;
+
+const content = css`
+  width: 100%;
+  height: 100%;
+  background-color: ${theme.colors.background};
+  position: relative;
+`;
+
+const title = (screenMode: ScreenModeType) => css`
+  position: absolute;
+  top: 12vw;
+  z-index: 11;
+  color: ${theme.colors.green};
+  ${screenMode === 'DESKTOP'
+    ? `right: 10%; font-size: 4.1vw;`
+    : `left: 50%; transform: translateX(-50%); font-size: 6vw;`}
+`;
+
+const leftSectionWrapper = css`
+  animation: ${animation.moveDown} 1.5s;
+  animation-fill-mode: forwards;
+  z-index: 11;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+`;
+
+const leftSection = (screenMode: ScreenModeType) => css`
+  position: absolute;
+  ${screenMode === 'DESKTOP' ? `top: 4vw; left: 28%; width: 20%;` : `top: 28%; left: 20%;`}
+`;
+
+const leftSectionTitle = (screenMode: ScreenModeType) => css`
+  position: absolute;
+  top: 28.5vw;
+  z-index: 11;
+  color: ${theme.colors.gray800};
+  animation: ${animation.moveRight} 1.5s;
+  animation-fill-mode: forwards;
+  ${screenMode === 'DESKTOP' ? `right: 26%; font-size: 2.7vw;` : `right: 38%; font-size: 3.7vw;`}
+
+  b {
+    color: ${theme.colors.primary};
+  }
+`;
+
+const rightSectionWrapper = css`
+  position: absolute;
+  z-index: 12;
+  animation: ${animation.moveUp} 1.5s;
+  animation-fill-mode: forwards;
+  height: 100%;
+  width: 100%;
+`;
+
+const rightSection = (screenMode: ScreenModeType) => css`
+  position: absolute;
+  ${screenMode === 'DESKTOP' ? `top: 7vw; left: 6%; width: 20%;` : `top: 32%; right: 20%;`}
+`;
+
+const rightSectionTitle = (screenMode: ScreenModeType) => css`
+  position: absolute;
+  top: 28.5vw;
+  z-index: 11;
+  color: ${theme.colors.gray800};
+  animation: ${animation.moveLeft} 1.5s;
+  animation-fill-mode: forwards;
+  ${screenMode === 'DESKTOP' ? `right: 9%; font-size: 2.7vw;` : `right: 13%; font-size: 3.7vw;`}
+  b {
+    color: ${theme.colors.primary};
+  }
+`;
+
+const rightSectionLittleTitle = css`
+  position: absolute;
+  top: 28.5vw;
+  right: 17%;
+  z-index: 11;
+  font-size: 1vw;
+  color: ${theme.colors.gray500};
+  animation: ${animation.moveLeft} 1.5s;
+  animation-fill-mode: forwards;
+`;
+
+const styles = {
+  layout,
+  content,
+  title,
+  leftSectionWrapper,
+  leftSection,
+  leftSectionTitle,
+  rightSectionWrapper,
+  rightSection,
+  rightSectionTitle,
+  rightSectionLittleTitle,
+};
+
+export default styles;
diff --git a/frontend/src/components/host/LandingView/UserViewSection2/useUserViewSection2.ts b/frontend/src/components/host/LandingView/UserViewSection2/useUserViewSection2.ts
new file mode 100644
index 00000000..caefcb55
--- /dev/null
+++ b/frontend/src/components/host/LandingView/UserViewSection2/useUserViewSection2.ts
@@ -0,0 +1,27 @@
+import { useRef, useState } from 'react';
+
+import useOnContainerScroll from '@/hooks/useOnContainerScroll';
+
+const useUserViewSection2 = () => {
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const [eventNumber, setEventNumber] = useState(0);
+
+  const { dimension, scrollInfo } = useOnContainerScroll(sectionRef, () => {
+    const progress = Math.min(Math.max(0, scrollInfo.scrollY / dimension.windowHeight), 1) * 100;
+    if (progress === 0) return;
+
+    if (progress >= 60 && progress < 100) {
+      setEventNumber(1);
+      return;
+    }
+    if (progress >= 100) {
+      setEventNumber(2);
+      return;
+    }
+    setEventNumber(0);
+  });
+
+  return { sectionRef, eventNumber };
+};
+
+export default useUserViewSection2;
diff --git a/frontend/src/components/host/LandingView/UserViewSection3/index.tsx b/frontend/src/components/host/LandingView/UserViewSection3/index.tsx
new file mode 100644
index 00000000..b25f44f6
--- /dev/null
+++ b/frontend/src/components/host/LandingView/UserViewSection3/index.tsx
@@ -0,0 +1,47 @@
+import UserPicture from '../UserPicture';
+import useUserViewSection3 from './useUserViewSection3';
+
+import { ScreenModeType, UserImageType } from '@/types';
+
+import mobileView3_160w from '@/assets/mobileView3-160w.webp';
+import mobileView3_240w from '@/assets/mobileView3-240w.webp';
+import mobileView3_320w from '@/assets/mobileView3-320w.webp';
+import mobileView3_480w from '@/assets/mobileView3-480w.webp';
+import mobileView3_fallback from '@/assets/mobileView3-fallback.png';
+
+import styles from './styles';
+
+const mobileView3: UserImageType = {
+  '160w': mobileView3_160w,
+  '240w': mobileView3_240w,
+  '320w': mobileView3_320w,
+  '480w': mobileView3_480w,
+  fallback: mobileView3_fallback,
+};
+
+interface UserViewSection3Props {
+  screenMode: ScreenModeType;
+}
+
+const UserViewSection3: React.FC<UserViewSection3Props> = ({ screenMode }) => {
+  const { sectionRef, eventNumber } = useUserViewSection3();
+
+  return (
+    <section css={styles.layout} ref={sectionRef}>
+      <div css={styles.content}>
+        <h1 css={styles.title(screenMode)}>함께 사용해요.</h1>
+        {eventNumber === 1 && (
+          <div>
+            <UserPicture image={mobileView3} css={styles.leftSection(screenMode)} />
+            <UserPicture image={mobileView3} css={styles.rightSection(screenMode)} />
+            <h1 css={styles.subTitle(screenMode)}>
+              여러명이 <b>동시에</b> 같은 업무 체크 가능
+            </h1>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default UserViewSection3;
diff --git a/frontend/src/components/host/LandingView/UserViewSection3/styles.ts b/frontend/src/components/host/LandingView/UserViewSection3/styles.ts
new file mode 100644
index 00000000..b5f6c09d
--- /dev/null
+++ b/frontend/src/components/host/LandingView/UserViewSection3/styles.ts
@@ -0,0 +1,70 @@
+import { css } from '@emotion/react';
+
+import { ScreenModeType } from '@/types';
+
+import animation from '@/styles/animation';
+import theme from '@/styles/theme';
+
+const layout = css`
+  width: 100vw;
+  height: 100vh;
+`;
+
+const content = css`
+  width: 100%;
+  height: 100%;
+  background-color: ${theme.colors.background};
+  position: relative;
+`;
+
+const title = (screenMode: ScreenModeType) => css`
+  position: absolute;
+  top: 2.2vw;
+  z-index: 11;
+  color: ${theme.colors.primary};
+  ${screenMode === 'DESKTOP'
+    ? `left: 38.5%; font-size: 4.1vw;`
+    : `left: 50%; transform: translateX(-50%); font-size: 6vw;`}
+`;
+
+const subTitle = (screenMode: ScreenModeType) => css`
+  position: absolute;
+  z-index: 11;
+  color: ${theme.colors.gray800};
+  animation: ${animation.fadeIn} 1.5s;
+  animation-fill-mode: forwards;
+  ${screenMode === 'DESKTOP'
+    ? `top: 10.5vw; left: 40.4%; font-size: 1.3vw;`
+    : `top: 16vw; left: 50%; transform: translateX(-50%); font-size: 3vw;`}
+
+  b {
+    color: ${theme.colors.green};
+  }
+`;
+
+const leftSection = (screenMode: ScreenModeType) => css`
+  position: absolute;
+  z-index: 11;
+  animation: ${animation.moveRight} 1.5s;
+  animation-fill-mode: forwards;
+  ${screenMode === 'DESKTOP' ? `top: 15vw; left: 26%; width: 18%;` : `top: 20%; left: 20%;`}
+`;
+
+const rightSection = (screenMode: ScreenModeType) => css`
+  position: absolute;
+  z-index: 11;
+  animation: ${animation.moveLeft} 1.5s;
+  animation-fill-mode: forwards;
+  ${screenMode === 'DESKTOP' ? `top: 15vw; right: 26%; width: 18%;` : `top: 28%; right: 20%;`}
+`;
+
+const styles = {
+  layout,
+  content,
+  title,
+  subTitle,
+  leftSection,
+  rightSection,
+};
+
+export default styles;
diff --git a/frontend/src/components/host/LandingView/UserViewSection3/useUserViewSection3.ts b/frontend/src/components/host/LandingView/UserViewSection3/useUserViewSection3.ts
new file mode 100644
index 00000000..8045686c
--- /dev/null
+++ b/frontend/src/components/host/LandingView/UserViewSection3/useUserViewSection3.ts
@@ -0,0 +1,23 @@
+import { useRef, useState } from 'react';
+
+import useOnContainerScroll from '@/hooks/useOnContainerScroll';
+
+const useUserViewSection3 = () => {
+  const [eventNumber, setEventNumber] = useState(0);
+  const sectionRef = useRef<HTMLDivElement>(null);
+
+  const { dimension, scrollInfo } = useOnContainerScroll(sectionRef, () => {
+    const progress = Math.min(Math.max(0, scrollInfo.scrollY / dimension.windowHeight), 1) * 100;
+    if (progress === 0) return;
+
+    if (progress >= 50) {
+      setEventNumber(1);
+      return;
+    }
+    setEventNumber(0);
+  });
+
+  return { sectionRef, eventNumber };
+};
+
+export default useUserViewSection3;
diff --git a/frontend/src/components/host/Navigator/LeftNavigator/index.tsx b/frontend/src/components/host/Navigator/LeftNavigator/index.tsx
new file mode 100644
index 00000000..987461d2
--- /dev/null
+++ b/frontend/src/components/host/Navigator/LeftNavigator/index.tsx
@@ -0,0 +1,25 @@
+import Menu from '../Menu';
+import { useNavigate } from 'react-router-dom';
+
+import logo from '@/assets/navigationLogo.png';
+
+import styles from './styles';
+
+const LeftNavigator: React.FC = () => {
+  const navigate = useNavigate();
+
+  const onClickLogo = () => {
+    if (location.pathname.split('/').length !== 4) navigate(-1);
+  };
+
+  return (
+    <div css={styles.layout}>
+      <div css={styles.logo} onClick={onClickLogo}>
+        <img css={styles.logoImage} src={logo} alt="" />
+      </div>
+      <Menu />
+    </div>
+  );
+};
+
+export default LeftNavigator;
diff --git a/frontend/src/components/host/Navigator/LeftNavigator/styles.ts b/frontend/src/components/host/Navigator/LeftNavigator/styles.ts
new file mode 100644
index 00000000..39254066
--- /dev/null
+++ b/frontend/src/components/host/Navigator/LeftNavigator/styles.ts
@@ -0,0 +1,37 @@
+import { css } from '@emotion/react';
+
+import theme from '@/styles/theme';
+
+const layout = css`
+  font-size: 16px;
+  height: 100vh;
+  width: 14em;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: ${theme.colors.white};
+  box-shadow: 6px 0 8px ${theme.colors.gray350};
+  z-index: 1;
+`;
+
+const logo = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 200px;
+  cursor: pointer;
+`;
+
+const logoImage = css`
+  width: 160px;
+  height: 160px;
+`;
+
+const styles = {
+  layout,
+  logo,
+  logoImage,
+};
+
+export default styles;
diff --git a/frontend/src/components/host/Navigation/index.tsx b/frontend/src/components/host/Navigator/Menu/index.tsx
similarity index 72%
rename from frontend/src/components/host/Navigation/index.tsx
rename to frontend/src/components/host/Navigator/Menu/index.tsx
index 925accac..c1db7d87 100644
--- a/frontend/src/components/host/Navigation/index.tsx
+++ b/frontend/src/components/host/Navigator/Menu/index.tsx
@@ -1,20 +1,14 @@
-import useHostNavigation from './useHostNavigation';
-import { CgHomeAlt } from 'react-icons/cg';
-import { RiLockPasswordLine } from 'react-icons/ri';
-
-import navigationLogo from '@/assets/navigationLogo.png';
+import useMenu from './useMenu';
+import { CgHomeAlt } from '@react-icons/all-files/cg/CgHomeAlt';
+import { RiLockPasswordLine } from '@react-icons/all-files/ri/RiLockPasswordLine';
 
 import styles from './styles';
 
-const Navigation: React.FC = () => {
-  const { selectedSpaceId, spaceData, onClickPasswordUpdate, onClickSpace, onClickNewSpace } = useHostNavigation();
+const Menu = () => {
+  const { selectedSpaceId, spaceData, onClickPasswordUpdate, onClickSpace, onClickNewSpace } = useMenu();
 
   return (
-    <div css={styles.layout}>
-      <div css={styles.logo}>
-        <img src={navigationLogo} alt="" css={styles.logoImage} />
-      </div>
-
+    <>
       <div css={styles.category}>
         <span css={styles.categoryTitle}>Menu</span>
         <div css={styles.categoryList} onClick={onClickPasswordUpdate}>
@@ -47,8 +41,8 @@ const Navigation: React.FC = () => {
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 
-export default Navigation;
+export default Menu;
diff --git a/frontend/src/components/host/Navigation/styles.ts b/frontend/src/components/host/Navigator/Menu/styles.ts
similarity index 69%
rename from frontend/src/components/host/Navigation/styles.ts
rename to frontend/src/components/host/Navigator/Menu/styles.ts
index 0afe853a..ea9e3f0c 100644
--- a/frontend/src/components/host/Navigation/styles.ts
+++ b/frontend/src/components/host/Navigator/Menu/styles.ts
@@ -2,38 +2,6 @@ import { css } from '@emotion/react';
 
 import theme from '@/styles/theme';
 
-const layout = css`
-  font-size: 16px;
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100vh;
-  width: 14em;
-  background-color: ${theme.colors.white};
-  box-shadow: 6px 0 8px ${theme.colors.gray350};
-  z-index: 1;
-
-  @media screen and (max-width: 1024px) {
-    font-size: 14px;
-  }
-  @media screen and (max-width: 720px) {
-    font-size: 12px;
-  }
-`;
-
-const logo = css`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 200px;
-`;
-
-const logoImage = css`
-  width: 160px;
-  height: 160px;
-`;
-
 const category = css`
   width: 100%;
   display: flex;
@@ -42,7 +10,7 @@ const category = css`
 `;
 
 const categoryTitle = css`
-  font-size: 1em;
+  font-size: 0.9em;
   font-weight: 600;
   color: ${theme.colors.gray800};
   margin: 8px 0;
@@ -103,9 +71,6 @@ const addNewSpace = css`
 `;
 
 const styles = {
-  layout,
-  logo,
-  logoImage,
   category,
   categoryTitle,
   categoryList,
diff --git a/frontend/src/components/host/Navigation/useHostNavigation.ts b/frontend/src/components/host/Navigator/Menu/useMenu.ts
similarity index 88%
rename from frontend/src/components/host/Navigation/useHostNavigation.ts
rename to frontend/src/components/host/Navigator/Menu/useMenu.ts
index a876eb4c..457970b6 100644
--- a/frontend/src/components/host/Navigation/useHostNavigation.ts
+++ b/frontend/src/components/host/Navigator/Menu/useMenu.ts
@@ -6,14 +6,16 @@ import apiSpace from '@/apis/space';
 
 import { ID } from '@/types';
 
-const useHostNavigation = () => {
+const useHostNavigator = () => {
   const navigate = useNavigate();
 
   const { spaceId } = useParams() as { spaceId: ID };
 
   const [selectedSpaceId, setSelectedSpaceId] = useState<ID>(spaceId);
 
-  const { data: spaceData } = useQuery(['spaces'], apiSpace.getSpaces);
+  const { data: spaceData } = useQuery(['spaces'], apiSpace.getSpaces, {
+    suspense: false,
+  });
 
   const onClickPasswordUpdate = () => {
     navigate('/host/manage/passwordUpdate');
@@ -31,4 +33,4 @@ const useHostNavigation = () => {
   return { selectedSpaceId, spaceData, onClickPasswordUpdate, onClickSpace, onClickNewSpace };
 };
 
-export default useHostNavigation;
+export default useHostNavigator;
diff --git a/frontend/src/components/host/Navigator/TopNavigator/index.tsx b/frontend/src/components/host/Navigator/TopNavigator/index.tsx
new file mode 100644
index 00000000..e3d93d8c
--- /dev/null
+++ b/frontend/src/components/host/Navigator/TopNavigator/index.tsx
@@ -0,0 +1,40 @@
+import Menu from '../Menu';
+import isNull from '@/utils/isNull';
+import { BiMenu } from '@react-icons/all-files/bi/BiMenu';
+import { BiX } from '@react-icons/all-files/bi/BiX';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import SlideMenu from '@/components/common/SlideMenu';
+
+import logo from '@/assets/logoTitle.png';
+
+import styles from './styles';
+
+const TopNavigator: React.FC = () => {
+  const navigate = useNavigate();
+
+  const [isShowMenu, setIsShowMenu] = useState<boolean | null>(null);
+
+  const onClickMenuIcon = () => setIsShowMenu(prev => !prev);
+
+  const onClickLogo = () => {
+    if (location.pathname.split('/').length !== 4) navigate(-1);
+  };
+
+  return (
+    <>
+      <div css={styles.layout}>
+        {isShowMenu ? <BiX size={32} onClick={onClickMenuIcon} /> : <BiMenu size={32} onClick={onClickMenuIcon} />}
+        <img css={styles.logo} src={logo} alt="" onClick={onClickLogo} />
+      </div>
+      {!isNull(isShowMenu) && (
+        <SlideMenu isShowMenu={isShowMenu}>
+          <Menu />
+        </SlideMenu>
+      )}
+    </>
+  );
+};
+
+export default TopNavigator;
diff --git a/frontend/src/components/host/Navigator/TopNavigator/styles.ts b/frontend/src/components/host/Navigator/TopNavigator/styles.ts
new file mode 100644
index 00000000..ed9a1f4f
--- /dev/null
+++ b/frontend/src/components/host/Navigator/TopNavigator/styles.ts
@@ -0,0 +1,42 @@
+import { css } from '@emotion/react';
+
+import theme from '@/styles/theme';
+
+const layout = css`
+  font-size: 16px;
+  position: fixed;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: translate3d(0, 0, 0);
+  -webkit-transform: translateZ(0);
+  -webkit-overflow-scrolling: touch;
+
+  background-color: ${theme.colors.white};
+  z-index: 1;
+
+  width: 100vw;
+  height: 64px;
+  box-shadow: 0 2px 2px 0px ${theme.colors.shadow30};
+
+  svg {
+    color: ${theme.colors.gray800};
+    cursor: pointer;
+    position: absolute;
+    left: 12px;
+  }
+`;
+
+const logo = css`
+  height: 40px;
+  transform: translateY(4px);
+  cursor: pointer;
+`;
+
+const styles = {
+  layout,
+  logo,
+};
+
+export default styles;
diff --git a/frontend/src/components/host/TaskBox/index.tsx b/frontend/src/components/host/SectionCard/TaskBox/index.tsx
similarity index 88%
rename from frontend/src/components/host/TaskBox/index.tsx
rename to frontend/src/components/host/SectionCard/TaskBox/index.tsx
index 26235ca5..777b665a 100644
--- a/frontend/src/components/host/TaskBox/index.tsx
+++ b/frontend/src/components/host/SectionCard/TaskBox/index.tsx
@@ -1,5 +1,6 @@
 import useTaskBox from './useTaskBox';
-import { BiMinus, BiNews, BiXCircle } from 'react-icons/bi';
+import { BiMinus } from '@react-icons/all-files/bi/BiMinus';
+import { BiNews } from '@react-icons/all-files/bi/BiNews';
 
 import { TaskType } from '@/types';
 
diff --git a/frontend/src/components/host/TaskBox/styles.ts b/frontend/src/components/host/SectionCard/TaskBox/styles.ts
similarity index 100%
rename from frontend/src/components/host/TaskBox/styles.ts
rename to frontend/src/components/host/SectionCard/TaskBox/styles.ts
diff --git a/frontend/src/components/host/TaskBox/useTaskBox.tsx b/frontend/src/components/host/SectionCard/TaskBox/useTaskBox.tsx
similarity index 95%
rename from frontend/src/components/host/TaskBox/useTaskBox.tsx
rename to frontend/src/components/host/SectionCard/TaskBox/useTaskBox.tsx
index af53b8e2..9f870ce8 100644
--- a/frontend/src/components/host/TaskBox/useTaskBox.tsx
+++ b/frontend/src/components/host/SectionCard/TaskBox/useTaskBox.tsx
@@ -1,4 +1,4 @@
-import SectionDetailModal from '../SectionDetailModal';
+import SectionDetailModal from '../../SectionDetailModal';
 
 import useModal from '@/hooks/useModal';
 import useSections from '@/hooks/useSections';
diff --git a/frontend/src/components/host/SectionCard/index.tsx b/frontend/src/components/host/SectionCard/index.tsx
index 7cba22b1..ae2f1e50 100644
--- a/frontend/src/components/host/SectionCard/index.tsx
+++ b/frontend/src/components/host/SectionCard/index.tsx
@@ -1,6 +1,7 @@
-import TaskBox from '../TaskBox';
+import TaskBox from './TaskBox';
 import useSectionCardDefault from './useSectionCardDefault';
-import { BiNews, BiX } from 'react-icons/bi';
+import { BiNews } from '@react-icons/all-files/bi/BiNews';
+import { BiX } from '@react-icons/all-files/bi/BiX';
 
 import { SectionType } from '@/types';
 
diff --git a/frontend/src/components/host/SectionCard/styles.ts b/frontend/src/components/host/SectionCard/styles.ts
index 4f978f21..594e387c 100644
--- a/frontend/src/components/host/SectionCard/styles.ts
+++ b/frontend/src/components/host/SectionCard/styles.ts
@@ -7,10 +7,10 @@ const container = css`
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-width: 480px;
-  height: 360px;
+  min-width: 320px;
+  height: 356px;
   overflow-y: scroll;
-  padding: 32px;
+  padding: 40px 32px;
   background-color: ${theme.colors.white};
   box-shadow: 2px 2px 2px 2px ${theme.colors.shadow20};
   border-radius: 8px;
@@ -42,7 +42,6 @@ const titleWrapper = css`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-size: 20px;
   margin-bottom: 8px;
   padding-bottom: 16px;
   border-bottom: 2px solid ${theme.colors.shadow20};
@@ -79,11 +78,10 @@ const newTaskButton = css`
 `;
 
 const input = css`
-  font-size: 18px;
-  line-height: 38px;
+  font-size: 16px;
   border: 1px solid ${theme.colors.shadow30};
   border-radius: 12px;
-  padding: 0 16px;
+  padding: 4px 16px;
   background-color: ${theme.colors.white};
   width: 80%;
 
diff --git a/frontend/src/components/host/SectionDetailModal/index.tsx b/frontend/src/components/host/SectionDetailModal/index.tsx
index 9eeea7c2..57e42a00 100644
--- a/frontend/src/components/host/SectionDetailModal/index.tsx
+++ b/frontend/src/components/host/SectionDetailModal/index.tsx
@@ -1,5 +1,5 @@
 import useSectionDetailModal from './useSectionDetailModal';
-import { BiX } from 'react-icons/bi';
+import { BiX } from '@react-icons/all-files/bi/BiX';
 
 import Button from '@/components/common/Button';
 import Dimmer from '@/components/common/Dimmer';
@@ -36,7 +36,7 @@ const SectionDetailModal: React.FC<SectionDetailModalProps> = props => {
 
   return (
     <ModalPortal>
-      <Dimmer mode="full" isAbleClick={false}>
+      <Dimmer isAbleClick={false}>
         <div css={styles.container}>
           <BiX size={36} onClick={closeModal} />
           <h1>
@@ -47,7 +47,7 @@ const SectionDetailModal: React.FC<SectionDetailModalProps> = props => {
           <img css={styles.image} src={imageUrl} alt="" onClick={() => fileInput.current?.click()} />
           <input
             type="file"
-            accept="image/gif, image/jpg, image/jpeg, image/png, image/svg"
+            accept="image/gif, image/jpg, image/jpeg, image/png, image/svg, , image/webp"
             ref={fileInput}
             onChange={onChangeImage}
           />
@@ -55,14 +55,14 @@ const SectionDetailModal: React.FC<SectionDetailModalProps> = props => {
             <textarea
               rows={4}
               value={description}
-              placeholder="사용자가 확인할 안내사항을 입력주세요. (128자이내)"
+              placeholder="사용자가 확인할 안내사항을 입력주세요."
               maxLength={128}
               onChange={onChangeText}
             />
             <span>{description?.length || 0}/128</span>
           </div>
           <Button css={styles.saveButton(isDisabledButton)} disabled={isDisabledButton} onClick={onClickSaveButton}>
-            저장
+            {target === 'section' ? '업무 정보 저장' : '작업 정보 저장'}
           </Button>
         </div>
         {isImageLoading && <LoadingOverlay />}
diff --git a/frontend/src/components/host/SectionDetailModal/styles.ts b/frontend/src/components/host/SectionDetailModal/styles.ts
index 3074a197..e25b1dd7 100644
--- a/frontend/src/components/host/SectionDetailModal/styles.ts
+++ b/frontend/src/components/host/SectionDetailModal/styles.ts
@@ -3,7 +3,8 @@ import { css } from '@emotion/react';
 import theme from '@/styles/theme';
 
 const container = css`
-  width: 560px;
+  max-width: 480px;
+  width: 80%;
   background-color: ${theme.colors.white};
   display: flex;
   flex-direction: column;
@@ -15,8 +16,9 @@ const container = css`
 
   h1 {
     align-self: start;
-    font-size: 24px;
-    margin: 0 0 16px 32px;
+    font-size: 1.2rem;
+    margin: 0 0 8px 32px;
+    height: 24px;
   }
 
   svg {
@@ -32,9 +34,10 @@ const container = css`
 `;
 
 const image = css`
-  width: 400px;
-  height: 250px;
+  width: 90%;
+  margin-top: 8px;
   cursor: pointer;
+  border-radius: 8px;
 `;
 
 const description = css`
@@ -48,11 +51,11 @@ const description = css`
     outline: none;
     border: 2px solid ${theme.colors.shadow20};
     border-radius: 8px;
-    font-size: 16px;
+    font-size: 0.9rem;
     color: ${theme.colors.black};
     padding: 8px;
     ::placeholder {
-      font-size: 16px;
+      font-size: 0.9rem;
       color: ${theme.colors.gray500};
     }
     :focus {
@@ -72,7 +75,8 @@ const description = css`
 `;
 
 const saveButton = (isDisabledButton: boolean) => css`
-  font-size: 20px;
+  width: 90%;
+  font-size: 1rem;
   margin: 0;
   background-color: ${isDisabledButton ? theme.colors.gray400 : theme.colors.green};
 `;
diff --git a/frontend/src/components/host/SlackUrlBox/index.tsx b/frontend/src/components/host/SlackUrlModal/SlackUrlBox/index.tsx
similarity index 100%
rename from frontend/src/components/host/SlackUrlBox/index.tsx
rename to frontend/src/components/host/SlackUrlModal/SlackUrlBox/index.tsx
diff --git a/frontend/src/components/host/SlackUrlBox/styles.ts b/frontend/src/components/host/SlackUrlModal/SlackUrlBox/styles.ts
similarity index 78%
rename from frontend/src/components/host/SlackUrlBox/styles.ts
rename to frontend/src/components/host/SlackUrlModal/SlackUrlBox/styles.ts
index 575e6e00..3429f743 100644
--- a/frontend/src/components/host/SlackUrlBox/styles.ts
+++ b/frontend/src/components/host/SlackUrlModal/SlackUrlBox/styles.ts
@@ -14,19 +14,23 @@ const form = css`
 `;
 
 const label = css`
-  font-size: 18px;
-  margin: 20px 0 8px 0;
+  font-size: 16px;
+  margin: 12px 0 8px 0;
+  padding: 0 4px;
   font-weight: 600;
   color: ${theme.colors.gray800};
 `;
 
 const input = css`
   width: 100%;
+  height: 36px;
 `;
 
 const button = css`
+  font-size: 0.8rem;
   margin: 0 8px;
-  width: 58px;
+  width: 48px;
+  height: 32px;
 `;
 
 const styles = { slackUrlBox, form, label, input, button };
diff --git a/frontend/src/components/host/SlackUrlModal/index.tsx b/frontend/src/components/host/SlackUrlModal/index.tsx
index 06bd501f..f03ab43e 100644
--- a/frontend/src/components/host/SlackUrlModal/index.tsx
+++ b/frontend/src/components/host/SlackUrlModal/index.tsx
@@ -1,8 +1,8 @@
 import { Suspense } from 'react';
 
 import Dimmer from '@/components/common/Dimmer';
-import Loading from '@/components/common/Loading';
-import SlackUrlBox from '@/components/host/SlackUrlBox';
+import LoadingOverlay from '@/components/common/LoadingOverlay';
+import SlackUrlBox from '@/components/host/SlackUrlModal/SlackUrlBox';
 
 import { JobType } from '@/types';
 
@@ -19,18 +19,18 @@ interface SlackUrlModalProps {
 const SlackUrlModal: React.FC<SlackUrlModalProps> = ({ jobs }) => {
   return (
     <ModalPortal>
-      <Dimmer mode="full">
+      <Dimmer>
         <div css={styles.container}>
           <div>
             <img css={styles.icon} src={slackIcon} alt="" />
-            <h1 css={styles.title}>Slack 알림 URL</h1>
+            <h1 css={styles.title}>Slack 알림</h1>
           </div>
-          <span css={styles.detail}>사용하시는 Slack 채널의 URL을 수정하세요.</span>
+          <span css={styles.detail}>Slack 채널의 URL을 입력하세요.</span>
           <div css={styles.contents}>
-            <Suspense fallback={<Loading />}>
+            <Suspense fallback={<LoadingOverlay />}>
               {jobs.length === 0 ? (
                 <div css={styles.noJobsInfo}>
-                  <span>생성된 업무가 없어요 😂</span>
+                  <span>생성한 업무가 없습니다.</span>
                 </div>
               ) : (
                 jobs.map((job, index) => <SlackUrlBox key={index} jobName={job.name} jobId={job.id} />)
diff --git a/frontend/src/components/host/SlackUrlModal/styles.ts b/frontend/src/components/host/SlackUrlModal/styles.ts
index be7202ce..80e783ca 100644
--- a/frontend/src/components/host/SlackUrlModal/styles.ts
+++ b/frontend/src/components/host/SlackUrlModal/styles.ts
@@ -3,13 +3,14 @@ import { css } from '@emotion/react';
 import theme from '@/styles/theme';
 
 const container = css`
-  width: 560px;
+  max-width: 480px;
+  width: 80%;
   background-color: ${theme.colors.white};
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 40px 16px;
+  padding: 40px 24px;
   border-radius: 18px;
 
   div {
@@ -19,24 +20,26 @@ const container = css`
 
 const title = css`
   margin: 0;
+  font-size: 1.5rem;
 `;
 
 const detail = css`
   color: ${theme.colors.gray400};
-  margin: 16px 0;
+  margin: 24px 0;
+  font-size: 0.9rem;
 `;
 
 const icon = css`
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   margin-right: 12px;
 `;
 
 const contents = css`
   display: flex;
   flex-direction: column;
-  width: 80%;
-  height: 30vh;
+  width: 90%;
+  height: 24vh;
   overflow-y: scroll;
 
   ::-webkit-scrollbar {
@@ -68,7 +71,7 @@ const noJobsInfo = css`
   width: 100%;
   height: 100%;
 
-  font-size: 24px;
+  font-size: 18px;
   font-weight: 500;
 `;
 
diff --git a/frontend/src/components/host/SpaceDeleteButton/index.tsx b/frontend/src/components/host/SpaceDeleteButton/index.tsx
deleted file mode 100644
index e0b7a8e9..00000000
--- a/frontend/src/components/host/SpaceDeleteButton/index.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useMemo } from 'react';
-import { useMutation, useQuery } from 'react-query';
-import { useNavigate } from 'react-router-dom';
-
-import Button from '@/components/common/Button';
-import SpaceDeleteModal from '@/components/host/SpaceDeleteModal';
-
-import useModal from '@/hooks/useModal';
-import useToast from '@/hooks/useToast';
-
-import apiSpace from '@/apis/space';
-
-import { ID } from '@/types';
-
-import styles from './styles';
-
-interface SpaceDeleteButtonProps {
-  spaceId: ID;
-  spaceName: string;
-}
-
-const SpaceDeleteButton: React.FC<SpaceDeleteButtonProps> = ({ spaceId, spaceName }) => {
-  const navigate = useNavigate();
-
-  const { openModal, closeModal } = useModal();
-  const { openToast } = useToast();
-
-  const text = useMemo(() => `${spaceName} 공간을 삭제합니다`, [spaceName]);
-
-  const { refetch } = useQuery(['deleteSpaces'], apiSpace.getSpaces, {
-    enabled: false,
-    onSuccess: data => {
-      const { spaces } = data;
-
-      if (spaces.length === 0) {
-        navigate('/host/manage/spaceCreate');
-        return;
-      }
-
-      const space = spaces[0];
-      navigate(`/host/manage/${space.id}`);
-    },
-  });
-
-  const { mutate: deleteSpace } = useMutation((spaceId: ID) => apiSpace.deleteSpace(spaceId), {
-    onSuccess: () => {
-      refetch();
-      closeModal();
-      openToast('SUCCESS', '공간이 삭제되었습니다.');
-    },
-  });
-
-  const onClickDeleteSpace = () => {
-    openModal(<SpaceDeleteModal text={text} onClick={() => deleteSpace(spaceId)} />);
-  };
-
-  return (
-    <Button css={styles.spaceDeleteButton} onClick={onClickDeleteSpace}>
-      공간 삭제
-    </Button>
-  );
-};
-
-export default SpaceDeleteButton;
diff --git a/frontend/src/components/host/SpaceDeleteButton/styles.ts b/frontend/src/components/host/SpaceDeleteButton/styles.ts
deleted file mode 100644
index 95aa543c..00000000
--- a/frontend/src/components/host/SpaceDeleteButton/styles.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { css } from '@emotion/react';
-
-import theme from '@/styles/theme';
-
-const spaceDeleteButton = css`
-  background-color: ${theme.colors.red};
-  width: auto;
-  height: 2rem;
-  font-weight: 500;
-  font-size: 1rem;
-  padding: 0 12px;
-  margin: 0 0 24px 12px;
-`;
-
-const styles = { spaceDeleteButton };
-
-export default styles;
diff --git a/frontend/src/components/host/SpaceDeleteModal/index.tsx b/frontend/src/components/host/SpaceDeleteModal/index.tsx
index a9fa9b6c..373d76da 100644
--- a/frontend/src/components/host/SpaceDeleteModal/index.tsx
+++ b/frontend/src/components/host/SpaceDeleteModal/index.tsx
@@ -23,16 +23,17 @@ const SpaceDeleteModal: React.FC<SpaceDeleteModalProps> = ({ text, onClick }) =>
 
   return (
     <ModalPortal>
-      <Dimmer mode="full">
+      <Dimmer>
         <div css={styles.container}>
           <div css={styles.textWrapper}>
-            <span>다음 내용을 입력하시면 공간을 삭제 할 수 있습니다.</span>
+            <span>다음 내용을 입력하시면, 공간을 삭제 할 수 있습니다.</span>
             <span>{text}</span>
           </div>
           <input css={styles.input} onChange={onChange} type="text" required />
           <Button css={styles.button(isDisabledButton)} onClick={onClick} disabled={isDisabledButton}>
-            삭제된 공간은 복구되지 않습니다.
+            삭제
           </Button>
+          <span css={styles.alert}>※ 한번 삭제된 공간은 복구되지 않습니다.</span>
         </div>
       </Dimmer>
     </ModalPortal>
diff --git a/frontend/src/components/host/SpaceDeleteModal/styles.ts b/frontend/src/components/host/SpaceDeleteModal/styles.ts
index e3d6af8c..906410ee 100644
--- a/frontend/src/components/host/SpaceDeleteModal/styles.ts
+++ b/frontend/src/components/host/SpaceDeleteModal/styles.ts
@@ -5,13 +5,14 @@ import theme from '@/styles/theme';
 const layout = css``;
 
 const container = css`
-  width: 480px;
+  max-width: 480px;
+  width: 80%;
   background-color: ${theme.colors.white};
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 2rem 2.5rem;
+  padding: 2rem;
   border-radius: 18px;
 
   div {
@@ -21,12 +22,12 @@ const container = css`
 
 const input = css`
   width: 100%;
-  height: 3rem;
+  height: 2rem;
   border-radius: 12px;
   font-size: 1rem;
   font-weight: 600;
   border: 1px ${theme.colors.gray300} solid;
-  padding: 24px;
+  padding: 16px;
 
   &:focus {
     outline: none;
@@ -35,24 +36,33 @@ const input = css`
 
 const button = (isDisabledButton: boolean) => css`
   width: 100%;
-  height: 3rem;
+  height: 2.4rem;
   background: ${isDisabledButton ? theme.colors.gray400 : theme.colors.red};
+  margin: 16px 0;
 `;
 
 const textWrapper = css`
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-bottom: 1rem;
+  margin-bottom: 0.8rem;
+  font-size: 0.9rem;
+  color: ${theme.colors.gray500};
   span {
-    margin-bottom: 0.4rem;
+    margin-bottom: 0.8rem;
   }
   & > span:nth-last-of-type(1) {
     color: ${theme.colors.red};
+    font-size: 1.1rem;
     font-weight: 600;
   }
 `;
 
-const styles = { layout, container, input, button, textWrapper };
+const alert = css`
+  font-size: 0.8rem;
+  color: ${theme.colors.gray500};
+`;
+
+const styles = { layout, container, input, button, textWrapper, alert };
 
 export default styles;
diff --git a/frontend/src/components/host/SpaceInfoCreateBox/index.tsx b/frontend/src/components/host/SpaceInfo/SpaceInfoCreateBox/index.tsx
similarity index 92%
rename from frontend/src/components/host/SpaceInfoCreateBox/index.tsx
rename to frontend/src/components/host/SpaceInfo/SpaceInfoCreateBox/index.tsx
index 38eda4a4..83750e63 100644
--- a/frontend/src/components/host/SpaceInfoCreateBox/index.tsx
+++ b/frontend/src/components/host/SpaceInfo/SpaceInfoCreateBox/index.tsx
@@ -15,7 +15,7 @@ const SpaceInfoCreateBox: React.FC = () => {
 
   return (
     <>
-      <form onSubmit={e => onSubmitCreateSpace(e, imageUrl)} encType="multipart/form-data">
+      <form css={styles.form} onSubmit={e => onSubmitCreateSpace(e, imageUrl)} encType="multipart/form-data">
         <SpaceInfo>
           <SpaceInfo.header>
             <Button type="submit" css={styles.button({ isActive: isActiveSubmit })}>
diff --git a/frontend/src/components/host/SpaceInfoCreateBox/styles.ts b/frontend/src/components/host/SpaceInfo/SpaceInfoCreateBox/styles.ts
similarity index 66%
rename from frontend/src/components/host/SpaceInfoCreateBox/styles.ts
rename to frontend/src/components/host/SpaceInfo/SpaceInfoCreateBox/styles.ts
index c5cfd324..4bd41119 100644
--- a/frontend/src/components/host/SpaceInfoCreateBox/styles.ts
+++ b/frontend/src/components/host/SpaceInfo/SpaceInfoCreateBox/styles.ts
@@ -2,18 +2,18 @@ import { css } from '@emotion/react';
 
 import theme from '@/styles/theme';
 
-const button = ({ isActive }: { isActive?: boolean }) => css`
-  width: 5rem;
-  height: 2rem;
+const form = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 320px;
+  padding: 0;
   margin: 0;
-  font-size: 1rem;
-  padding: 8px 0;
-  background: ${isActive ? theme.colors.primary : theme.colors.gray400};
 `;
 
 const input = css`
   border: none;
-  font-size: 1.4rem;
+  font-size: 1.2rem;
   font-weight: bold;
   cursor: pointer;
 
@@ -23,9 +23,19 @@ const input = css`
   }
 `;
 
+const button = ({ isActive }: { isActive?: boolean }) => css`
+  width: auto;
+  height: 2rem;
+  margin: 0;
+  font-size: 0.9rem;
+  padding: 0 12px;
+  background: ${isActive ? theme.colors.primary : theme.colors.gray400};
+`;
+
 const styles = {
-  button,
+  form,
   input,
+  button,
 };
 
 export default styles;
diff --git a/frontend/src/components/host/SpaceInfoCreateBox/useSpaceCreateForm.ts b/frontend/src/components/host/SpaceInfo/SpaceInfoCreateBox/useSpaceCreateForm.ts
similarity index 100%
rename from frontend/src/components/host/SpaceInfoCreateBox/useSpaceCreateForm.ts
rename to frontend/src/components/host/SpaceInfo/SpaceInfoCreateBox/useSpaceCreateForm.ts
diff --git a/frontend/src/components/host/SpaceInfoDisplayBox/index.tsx b/frontend/src/components/host/SpaceInfo/SpaceInfoDisplayBox/index.tsx
similarity index 100%
rename from frontend/src/components/host/SpaceInfoDisplayBox/index.tsx
rename to frontend/src/components/host/SpaceInfo/SpaceInfoDisplayBox/index.tsx
diff --git a/frontend/src/components/host/SpaceInfoDisplayBox/styles.ts b/frontend/src/components/host/SpaceInfo/SpaceInfoDisplayBox/styles.ts
similarity index 82%
rename from frontend/src/components/host/SpaceInfoDisplayBox/styles.ts
rename to frontend/src/components/host/SpaceInfo/SpaceInfoDisplayBox/styles.ts
index dbe2a575..2e071127 100644
--- a/frontend/src/components/host/SpaceInfoDisplayBox/styles.ts
+++ b/frontend/src/components/host/SpaceInfo/SpaceInfoDisplayBox/styles.ts
@@ -3,20 +3,19 @@ import { css } from '@emotion/react';
 import theme from '@/styles/theme';
 
 const button = css`
-  width: 5rem;
+  width: auto;
   height: 2rem;
   margin: 0;
-  font-size: 1rem;
-  padding: 8px 0;
+  font-size: 0.9rem;
+  padding: 0 12px;
   background: ${theme.colors.primary};
 `;
 
 const input = css`
   border: none;
-  font-size: 1.4rem;
+  font-size: 1.2rem;
   font-weight: bold;
   cursor: pointer;
-
   width: 100%;
   &:focus {
     outline: none;
diff --git a/frontend/src/components/host/SpaceInfoDisplayBox/useSpaceInfoDisplayBox.ts b/frontend/src/components/host/SpaceInfo/SpaceInfoDisplayBox/useSpaceInfoDisplayBox.ts
similarity index 100%
rename from frontend/src/components/host/SpaceInfoDisplayBox/useSpaceInfoDisplayBox.ts
rename to frontend/src/components/host/SpaceInfo/SpaceInfoDisplayBox/useSpaceInfoDisplayBox.ts
diff --git a/frontend/src/components/host/SpaceInfoUpdateBox/index.tsx b/frontend/src/components/host/SpaceInfo/SpaceInfoUpdateBox/index.tsx
similarity index 93%
rename from frontend/src/components/host/SpaceInfoUpdateBox/index.tsx
rename to frontend/src/components/host/SpaceInfo/SpaceInfoUpdateBox/index.tsx
index e4f952dd..bd6b49c1 100644
--- a/frontend/src/components/host/SpaceInfoUpdateBox/index.tsx
+++ b/frontend/src/components/host/SpaceInfo/SpaceInfoUpdateBox/index.tsx
@@ -22,7 +22,7 @@ const SpaceInfoUpdateBox: React.FC<SpaceInfoUpdateBox> = ({ spaceData, spaceId }
 
   return (
     <>
-      <form onSubmit={e => onSubmitUpdateSpace(e, imageUrl, spaceId)} encType="multipart/form-data">
+      <form css={styles.form} onSubmit={e => onSubmitUpdateSpace(e, imageUrl, spaceId)} encType="multipart/form-data">
         <SpaceInfo>
           <SpaceInfo.header>
             <Button type="submit" css={styles.button({ isActive: isActiveSubmit })}>
diff --git a/frontend/src/components/host/SpaceInfoUpdateBox/styles.ts b/frontend/src/components/host/SpaceInfo/SpaceInfoUpdateBox/styles.ts
similarity index 61%
rename from frontend/src/components/host/SpaceInfoUpdateBox/styles.ts
rename to frontend/src/components/host/SpaceInfo/SpaceInfoUpdateBox/styles.ts
index b9d0ab52..85318f8f 100644
--- a/frontend/src/components/host/SpaceInfoUpdateBox/styles.ts
+++ b/frontend/src/components/host/SpaceInfo/SpaceInfoUpdateBox/styles.ts
@@ -2,9 +2,18 @@ import { css } from '@emotion/react';
 
 import theme from '@/styles/theme';
 
+const form = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 320px;
+  padding: 0;
+  margin: 0;
+`;
+
 const input = css`
   border: none;
-  font-size: 1.4rem;
+  font-size: 1.2rem;
   font-weight: bold;
   cursor: pointer;
 
@@ -15,14 +24,14 @@ const input = css`
 `;
 
 const button = ({ isActive }: { isActive?: boolean }) => css`
-  width: 5rem;
+  width: auto;
   height: 2rem;
   margin: 0;
-  font-size: 1rem;
-  padding: 8px 0;
+  font-size: 0.9rem;
+  padding: 0 12px;
   background: ${isActive ? theme.colors.primary : theme.colors.gray400};
 `;
 
-const styles = { input, button };
+const styles = { form, input, button };
 
 export default styles;
diff --git a/frontend/src/components/host/SpaceInfoUpdateBox/useSpaceUpdateForm.ts b/frontend/src/components/host/SpaceInfo/SpaceInfoUpdateBox/useSpaceUpdateForm.ts
similarity index 100%
rename from frontend/src/components/host/SpaceInfoUpdateBox/useSpaceUpdateForm.ts
rename to frontend/src/components/host/SpaceInfo/SpaceInfoUpdateBox/useSpaceUpdateForm.ts
diff --git a/frontend/src/components/host/SpaceInfo/styles.ts b/frontend/src/components/host/SpaceInfo/styles.ts
index 641ae5fa..5ae763cc 100644
--- a/frontend/src/components/host/SpaceInfo/styles.ts
+++ b/frontend/src/components/host/SpaceInfo/styles.ts
@@ -3,35 +3,39 @@ import { css } from '@emotion/react';
 import theme from '@/styles/theme';
 
 const contentWith = css`
-  width: 80%;
-  margin: 0 auto;
+  padding: 0 24px;
 `;
 
 const spaceInfo = css`
-  height: 100%;
-  min-height: 28rem;
-  min-width: 21rem;
-  background: ${theme.colors.white};
+  min-width: 320px;
+  height: 452px;
+  background-color: ${theme.colors.white};
   border-radius: 8px;
   box-shadow: 2px 2px 2px 2px ${theme.colors.shadow10};
+
+  @media screen and (min-width: 1024px) {
+    width: 320px;
+  }
+
+  @media screen and (max-width: 1023px) {
+    width: 90%;
+  }
 `;
 
 const titleWrapper = css`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 1.25rem;
+  padding: 0 24px;
   border-bottom: 1px solid ${theme.colors.gray300};
 `;
 
 const title = css`
-  margin: 19px;
-  font-size: 1.4rem;
+  font-size: 1.2rem;
 `;
 
 const subTitle = css`
-  font-size: 1rem;
-  font-weight: bold;
+  font-size: 0.8rem;
 `;
 
 const imageContainer = css`
@@ -58,7 +62,7 @@ const inputWrapper = css`
 
 const nameText = css`
   border: none;
-  font-size: 1.4rem;
+  font-size: 1.2rem;
   font-weight: bold;
   width: 100%;
   margin: 0;
diff --git a/frontend/src/components/host/Submissions/index.tsx b/frontend/src/components/host/Submissions/index.tsx
index ec3b2df9..4c30e713 100644
--- a/frontend/src/components/host/Submissions/index.tsx
+++ b/frontend/src/components/host/Submissions/index.tsx
@@ -1,13 +1,9 @@
-import { css } from '@emotion/react';
-import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import Button from '@/components/common/Button';
 
 import emptyFolder from '@/assets/emptyFolder.png';
 
-import theme from '@/styles/theme';
-
 import styles from './styles';
 
 const columns = ['제출자', '업무', '제출일자'];
@@ -25,6 +21,18 @@ interface SubmissionsProps {
   isFullSize?: boolean;
 }
 
+function formatDate(targetDate: string) {
+  const date = new Date(targetDate);
+
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+
+  return `${year}년 ${month}월 ${day}일 ${hours}시 ${minutes}분`;
+}
+
 const Submissions: React.FC<SubmissionsProps> = ({ submissions, isFullSize = false }) => {
   const navigate = useNavigate();
 
@@ -35,7 +43,7 @@ const Submissions: React.FC<SubmissionsProps> = ({ submissions, isFullSize = fal
   return (
     <div css={styles.layout({ isFullSize })}>
       <div css={styles.header}>
-        <p>공간 사용 내역</p>
+        <p>사용 내역</p>
 
         {!isFullSize && (
           <Button css={styles.detailButton} type="button" onClick={onClickSubmissionsDetail}>
@@ -54,24 +62,13 @@ const Submissions: React.FC<SubmissionsProps> = ({ submissions, isFullSize = fal
           </thead>
 
           <tbody>
-            {submissions.length === 0 ? (
-              <tr css={styles.empty}>
-                <td>
-                  <img src={emptyFolder} alt="" />
-                  <div>제출된 내역이 없어요.</div>
-                </td>
+            {submissions.map(({ submissionId, author, jobName, createdAt }) => (
+              <tr key={submissionId}>
+                <td>{author}</td>
+                <td>{jobName}</td>
+                <td css={styles.greenText}>{formatDate(createdAt)}</td>
               </tr>
-            ) : (
-              <>
-                {submissions.map(({ submissionId, author, jobName, createdAt }) => (
-                  <tr key={submissionId}>
-                    <td>{author}</td>
-                    <td>{jobName}</td>
-                    <td css={styles.greenText}>{createdAt}</td>
-                  </tr>
-                ))}
-              </>
-            )}
+            ))}
           </tbody>
         </table>
       </div>
diff --git a/frontend/src/components/host/Submissions/styles.ts b/frontend/src/components/host/Submissions/styles.ts
index 3294538f..00b76191 100644
--- a/frontend/src/components/host/Submissions/styles.ts
+++ b/frontend/src/components/host/Submissions/styles.ts
@@ -3,33 +3,45 @@ import { css } from '@emotion/react';
 import theme from '@/styles/theme';
 
 const layout = ({ isFullSize }: { isFullSize: boolean }) => css`
-  background: ${theme.colors.white};
+  min-width: 320px;
+  background-color: ${theme.colors.white};
   border-radius: 8px;
   font-size: 16px;
   box-shadow: 2px 2px 2px 2px ${theme.colors.shadow10};
+  height: 360px;
+
   ${isFullSize &&
   css`
     margin-top: 5rem;
+    height: 480px;
   `}
+
+  @media screen and (min-width: 1024px) {
+    width: 100%;
+  }
+
+  @media screen and (max-width: 1023px) {
+    width: 90%;
+  }
 `;
 
 const header = css`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 1.25em;
-
+  padding: 0 24px;
+  border-bottom: 1px solid ${theme.colors.gray300};
   p {
-    font-size: 1.3em;
+    font-size: 1.2rem;
   }
 `;
 
 const detailButton = css`
-  width: 5rem;
+  width: auto;
   height: 2rem;
   margin: 0;
-  font-size: 1rem;
-  padding: 8px 0;
+  font-size: 0.9rem;
+  padding: 0 12px;
 `;
 
 const table = ({ isFullSize }: { isFullSize: boolean }) => css`
@@ -50,6 +62,7 @@ const table = ({ isFullSize }: { isFullSize: boolean }) => css`
     display: flex;
     flex-direction: column;
     justify-content: start;
+    height: 100%;
     width: 100%;
     overflow-y: ${isFullSize ? 'scroll' : 'hidden'};
     height: ${isFullSize ? '50vh' : '12.5em'};
@@ -88,43 +101,21 @@ const table = ({ isFullSize }: { isFullSize: boolean }) => css`
   td {
     padding: 1em;
     height: 10px;
-    width: 28vw;
-    min-width: 160px;
+    width: 20vw;
+    min-width: 80px;
     word-wrap: break-word;
     text-align: left;
     &:nth-of-type(3) {
-      width: 60vw;
-      min-width: 320px;
+      width: 30vw;
+      min-width: 160px;
     }
   }
 `;
 
-const empty = css`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  td {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-
-  img {
-    max-width: 100px;
-    margin-bottom: 12px;
-  }
-`;
-
 const greenText = css`
   color: ${theme.colors.green};
 `;
 
-const styles = { layout, header, detailButton, table, empty, greenText };
+const styles = { layout, header, detailButton, table, greenText };
 
 export default styles;
diff --git a/frontend/src/components/user/DetailInfoModal/index.tsx b/frontend/src/components/user/DetailInfoModal/index.tsx
index bb939413..daab1264 100644
--- a/frontend/src/components/user/DetailInfoModal/index.tsx
+++ b/frontend/src/components/user/DetailInfoModal/index.tsx
@@ -13,7 +13,7 @@ export interface DetailInfoModalProps {
 const DetailInfoModal: React.FC<DetailInfoModalProps> = ({ name, imageUrl, description }) => {
   return (
     <ModalPortal>
-      <Dimmer mode="mobile">
+      <Dimmer>
         <div css={styles.container}>
           <h1 css={styles.title}>{name}</h1>
           <div css={styles.imageWrapper}>
diff --git a/frontend/src/components/user/JobCard/index.tsx b/frontend/src/components/user/JobCard/index.tsx
index d49b4259..57d361d3 100644
--- a/frontend/src/components/user/JobCard/index.tsx
+++ b/frontend/src/components/user/JobCard/index.tsx
@@ -2,7 +2,7 @@ import useJobCard from './useJobCard';
 
 import { ID } from '@/types';
 
-import checklistImage from '@/assets/checklistImage.svg';
+import checklistImage from '@/assets/checklistImage2.svg';
 
 import styles from './styles';
 
@@ -18,9 +18,9 @@ const JobCard: React.FC<JobCardProps> = ({ jobName, jobId }) => {
     <div css={styles.jobCard} onClick={onClickJobCard}>
       <div css={styles.textWrapper}>
         <span>{jobName}</span>
-        <span>체크리스트</span>
+        <span>체크하러 가기</span>
       </div>
-      <img src={checklistImage} alt="" />
+      <img css={styles.img} src={checklistImage} alt="" />
     </div>
   );
 };
diff --git a/frontend/src/components/user/JobCard/styles.ts b/frontend/src/components/user/JobCard/styles.ts
index 6c979132..34affc51 100644
--- a/frontend/src/components/user/JobCard/styles.ts
+++ b/frontend/src/components/user/JobCard/styles.ts
@@ -7,30 +7,40 @@ const jobCard = css`
   justify-content: space-around;
   align-items: center;
   border-radius: 24px;
-  width: 320px;
-  height: 144px;
+  max-width: 400px;
+  height: 180px;
+  width: 80%;
   margin: 16px;
   padding: 0 16px;
   background-color: ${theme.colors.gray100};
   box-shadow: 2px 2px 2px 2px ${theme.colors.shadow40};
   cursor: pointer;
+
   :hover {
-    transform: scale(1.01);
+    transform: scale(1.02);
+    background-color: ${theme.colors.gray200};
   }
 `;
 
 const textWrapper = css`
   display: flex;
   flex-direction: column;
-  font-size: 30px;
+  font-size: 28px;
   font-weight: 600;
+  color: ${theme.colors.black};
+
   span + span {
-    margin: 4px 0;
+    margin: 8px 0;
     font-size: 16px;
     font-size: 200;
   }
 `;
 
-const styles = { jobCard, textWrapper };
+const img = css`
+  width: 4.5rem;
+  aspect-ratio: auto 1 / 1;
+`;
+
+const styles = { jobCard, textWrapper, img };
 
 export default styles;
diff --git a/frontend/src/components/user/NameModal/index.tsx b/frontend/src/components/user/NameModal/index.tsx
index 59f472a8..0ab8b4a2 100644
--- a/frontend/src/components/user/NameModal/index.tsx
+++ b/frontend/src/components/user/NameModal/index.tsx
@@ -23,7 +23,7 @@ const NameModal: React.FC<NameModalProps> = ({ title, detail, placeholder, butto
 
   return (
     <ModalPortal>
-      <Dimmer mode="mobile">
+      <Dimmer>
         <div css={styles.container}>
           <h1 css={styles.title}>{title}</h1>
           <span css={styles.detail}>{detail}</span>
diff --git a/frontend/src/components/user/NameModal/styles.ts b/frontend/src/components/user/NameModal/styles.ts
index 0e23829a..437ffa3a 100644
--- a/frontend/src/components/user/NameModal/styles.ts
+++ b/frontend/src/components/user/NameModal/styles.ts
@@ -3,6 +3,8 @@ import { css } from '@emotion/react';
 import theme from '@/styles/theme';
 
 const container = css`
+  max-width: 400px;
+  min-width: 320px;
   width: 80%;
   background-color: ${theme.colors.white};
   display: flex;
diff --git a/frontend/src/components/user/SectionInfoPreview/index.tsx b/frontend/src/components/user/SectionCard/SectionInfoPreview/index.tsx
similarity index 62%
rename from frontend/src/components/user/SectionInfoPreview/index.tsx
rename to frontend/src/components/user/SectionCard/SectionInfoPreview/index.tsx
index 3f43566f..f349c605 100644
--- a/frontend/src/components/user/SectionInfoPreview/index.tsx
+++ b/frontend/src/components/user/SectionCard/SectionInfoPreview/index.tsx
@@ -1,6 +1,6 @@
-import { FaMapMarkedAlt } from 'react-icons/fa';
+import { FaMapMarkedAlt } from '@react-icons/all-files/fa/FaMapMarkedAlt';
 
-import useLazyImage from '@/hooks/useLazyLoading';
+import LazyImage from '@/components/common/LazyImage';
 
 import styles from './styles';
 
@@ -10,12 +10,10 @@ interface SectionInfoPreviewProps {
 }
 
 const SectionInfoPreview: React.FC<SectionInfoPreviewProps> = ({ imageUrl, onClick }) => {
-  const { isLoaded, targetRef: imageRef } = useLazyImage<HTMLImageElement>();
-
   return (
     <div css={styles.wrapper} onClick={onClick}>
       <div css={styles.imageWrapper}>
-        <img css={styles.image} src={isLoaded ? imageUrl : ''} ref={imageRef} />
+        <LazyImage css={styles.image} imageUrl={imageUrl} />
       </div>
       <FaMapMarkedAlt css={styles.icon} size={24} />
     </div>
diff --git a/frontend/src/components/user/SectionInfoPreview/styles.ts b/frontend/src/components/user/SectionCard/SectionInfoPreview/styles.ts
similarity index 100%
rename from frontend/src/components/user/SectionInfoPreview/styles.ts
rename to frontend/src/components/user/SectionCard/SectionInfoPreview/styles.ts
diff --git a/frontend/src/components/user/SectionCard/index.tsx b/frontend/src/components/user/SectionCard/index.tsx
new file mode 100644
index 00000000..9660e7e8
--- /dev/null
+++ b/frontend/src/components/user/SectionCard/index.tsx
@@ -0,0 +1,79 @@
+import SectionInfoPreview from './SectionInfoPreview';
+import { RiInformationLine } from '@react-icons/all-files/ri/RiInformationLine';
+
+import Button from '@/components/common/Button';
+import CheckBox from '@/components/common/Checkbox';
+import DetailInfoModal from '@/components/user/DetailInfoModal';
+
+import useModal from '@/hooks/useModal';
+
+import apis from '@/apis';
+
+import { ID, SectionType, TaskType } from '@/types';
+
+import styles from './styles';
+
+type SectionCardProps = {
+  section: SectionType;
+  sectionsAllCheckMap: any;
+  onClickSectionDetail: any;
+  onClickSectionAllCheck: any;
+};
+
+const SectionCard: React.FC<SectionCardProps> = ({
+  section,
+  sectionsAllCheckMap,
+  onClickSectionDetail,
+  onClickSectionAllCheck,
+}) => {
+  const { openModal } = useModal();
+
+  const onClickCheckBox = (e: React.MouseEvent<HTMLElement, MouseEvent> | React.ChangeEvent<HTMLElement>, id: ID) => {
+    e.preventDefault();
+    apis.postCheckTask(id);
+  };
+
+  const onClickTaskDetail = (task: TaskType) => {
+    openModal(<DetailInfoModal name={task.name} imageUrl={task.imageUrl} description={task.description} />);
+  };
+
+  return (
+    <div css={styles.sectionCard}>
+      <div css={styles.locationHeader}>
+        <p css={styles.locationName}>{section.name}</p>
+        <div css={styles.locationHeaderRightItems}>
+          {!sectionsAllCheckMap.get(`${section.id}`) && (
+            <Button
+              css={styles.sectionAllCheckButton}
+              type="button"
+              onClick={() => onClickSectionAllCheck(section.id!)}
+            >
+              ALL
+            </Button>
+          )}
+          {(section.imageUrl || section.description) && (
+            <SectionInfoPreview imageUrl={section.imageUrl} onClick={() => onClickSectionDetail(section)} />
+          )}
+        </div>
+      </div>
+
+      {section.tasks.map((task, index) => (
+        <div key={task.id} css={styles.task}>
+          <CheckBox
+            onChange={e => onClickCheckBox(e, task.id)}
+            checked={task.checked || false}
+            id={JSON.stringify(task.id)}
+          />
+          <div css={styles.textWrapper}>
+            <span>{task.name}</span>
+            {(task.imageUrl || task.description) && (
+              <RiInformationLine css={styles.icon} size={20} onClick={() => onClickTaskDetail(task)} />
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default SectionCard;
diff --git a/frontend/src/components/user/SectionCard/styles.ts b/frontend/src/components/user/SectionCard/styles.ts
new file mode 100644
index 00000000..0587c383
--- /dev/null
+++ b/frontend/src/components/user/SectionCard/styles.ts
@@ -0,0 +1,79 @@
+import { css } from '@emotion/react';
+
+import theme from '@/styles/theme';
+
+const sectionCard = css`
+  display: flex;
+  flex-direction: column;
+  max-width: 354px;
+  width: 100%;
+  margin: 16px 0;
+  padding: 16px;
+  border: 1px solid ${theme.colors.shadow30};
+  border-radius: 16px;
+  box-shadow: 2px 2px 2px 0px ${theme.colors.shadow30};
+  background-color: ${theme.colors.white};
+`;
+
+const locationHeader = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 8px;
+  min-height: 48px;
+`;
+
+const locationName = css`
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0;
+`;
+
+const locationHeaderRightItems = css`
+  display: flex;
+  gap: 10px;
+`;
+
+const sectionAllCheckButton = css`
+  width: 40px;
+  height: 40px;
+  margin: 0;
+  padding: 0;
+  box-shadow: 2px 2px 2px 0px ${theme.colors.shadow30};
+`;
+
+const task = css`
+  display: flex;
+  gap: 16px;
+  padding: 12px 0;
+`;
+
+const textWrapper = css`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+
+  position: relative;
+
+  font-weight: 500;
+`;
+
+const icon = css`
+  color: ${theme.colors.gray500};
+  margin-left: 16px;
+  cursor: pointer;
+`;
+
+const styles = {
+  sectionCard,
+  task,
+  icon,
+  textWrapper,
+  locationHeader,
+  locationName,
+  locationHeaderRightItems,
+  sectionAllCheckButton,
+};
+
+export default styles;
diff --git a/frontend/src/components/user/SpaceCard/styles.ts b/frontend/src/components/user/SpaceCard/styles.ts
index 97d78de5..b6bd9e56 100644
--- a/frontend/src/components/user/SpaceCard/styles.ts
+++ b/frontend/src/components/user/SpaceCard/styles.ts
@@ -6,8 +6,9 @@ const spaceCard = (imageUrl: string) => css`
   display: flex;
   justify-content: flex-start;
   align-items: flex-end;
-  width: 90%;
-  height: 25vh;
+  max-width: 400px;
+  height: 180px;
+  width: 80%;
   margin: 16px;
   padding: 24px;
   box-shadow: 2px 2px 2px 2px ${theme.colors.shadow40};
@@ -17,13 +18,13 @@ const spaceCard = (imageUrl: string) => css`
   cursor: pointer;
 
   :hover {
-    transform: scale(1.01);
+    transform: scale(1.02);
   }
 `;
 
 const title = css`
   color: ${theme.colors.white};
-  font-size: 36px;
+  font-size: 28px;
   text-shadow: -1px -1px 6px #000, 1px -1px 6px #000, -1px 1px 6px #000, 1px 1px 6px #000;
   background-image: linear-gradient(transparent 90%, ${theme.colors.primary} 10%);
 `;
@@ -33,6 +34,8 @@ const arrow = css`
   box-shadow: 0 0 4px 2px ${theme.colors.shadow90};
   margin-left: auto;
   align-self: center;
+  width: 2rem;
+  aspect-ratio: auto 1 / 1;
 `;
 
 const styles = { spaceCard, title, arrow };
diff --git a/frontend/src/components/user/TaskCard/index.tsx b/frontend/src/components/user/TaskCard/index.tsx
deleted file mode 100644
index da660ff8..00000000
--- a/frontend/src/components/user/TaskCard/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { RiInformationLine } from 'react-icons/ri';
-
-import CheckBox from '@/components/common/Checkbox';
-import DetailInfoModal from '@/components/user/DetailInfoModal';
-
-import useModal from '@/hooks/useModal';
-
-import apis from '@/apis';
-
-import { ID, TaskType } from '@/types';
-
-import styles from './styles';
-
-type TaskCardProps = {
-  tasks: TaskType[];
-};
-
-const TaskCard: React.FC<TaskCardProps> = ({ tasks }) => {
-  const { openModal } = useModal();
-
-  const onClickCheckBox = (e: React.MouseEvent<HTMLElement, MouseEvent> | React.ChangeEvent<HTMLElement>, id: ID) => {
-    e.preventDefault();
-    apis.postCheckTask(id);
-  };
-
-  const onClickTaskDetail = (task: TaskType) => {
-    openModal(<DetailInfoModal name={task.name} imageUrl={task.imageUrl} description={task.description} />);
-  };
-
-  return (
-    <div css={styles.taskCard}>
-      {tasks.map((task, id) => (
-        <div key={id} css={styles.task}>
-          <CheckBox
-            onChange={e => onClickCheckBox(e, task.id)}
-            checked={task.checked || false}
-            id={JSON.stringify(task.id)}
-          />
-          <div css={styles.textWrapper}>
-            <span>{task.name}</span>
-            {(task.imageUrl || task.description) && (
-              <RiInformationLine css={styles.icon} size={20} onClick={() => onClickTaskDetail(task)} />
-            )}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default TaskCard;
diff --git a/frontend/src/components/user/TaskCard/styles.ts b/frontend/src/components/user/TaskCard/styles.ts
deleted file mode 100644
index 5ca1d6db..00000000
--- a/frontend/src/components/user/TaskCard/styles.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { css } from '@emotion/react';
-
-import theme from '@/styles/theme';
-
-const taskCard = css`
-  display: flex;
-  flex-direction: column;
-  width: 320px;
-  padding: 16px;
-`;
-
-const textWrapper = css`
-  display: flex;
-  align-items: center;
-
-  span {
-    font-weight: 500;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-`;
-
-const task = css`
-  display: flex;
-  gap: 16px;
-  margin: 18px 0;
-`;
-
-const icon = css`
-  color: ${theme.colors.gray500};
-  margin-left: 16px;
-  cursor: pointer;
-`;
-
-const styles = { taskCard, task, icon, textWrapper };
-
-export default styles;
diff --git a/frontend/src/constants/screenSize.ts b/frontend/src/constants/screenSize.ts
new file mode 100644
index 00000000..5e695607
--- /dev/null
+++ b/frontend/src/constants/screenSize.ts
@@ -0,0 +1,6 @@
+const MOBILE = 480;
+const TABLET = 768;
+const DESKTOP = 1024;
+const DESKTOP_BIC = 1600;
+
+export default { MOBILE, TABLET, DESKTOP, DESKTOP_BIC };
diff --git a/frontend/src/hooks/useIntersectionObserver.ts b/frontend/src/hooks/useIntersectionObserver.ts
new file mode 100644
index 00000000..8a1bbd81
--- /dev/null
+++ b/frontend/src/hooks/useIntersectionObserver.ts
@@ -0,0 +1,37 @@
+import { RefObject, useEffect, useRef, useState } from 'react';
+
+const useIntersectionObserver = <T extends Element>(targetRef: RefObject<T>, threshold: number = 0) => {
+  const observerRef = useRef<IntersectionObserver>();
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  const intersectionCallBack = (entries: IntersectionObserverEntry[], io: IntersectionObserver) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        setIsLoaded(true);
+        return;
+      }
+      if (!entry.isIntersecting) {
+        setIsLoaded(false);
+        return;
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (!observerRef.current) {
+      observerRef.current = new IntersectionObserver(intersectionCallBack, {
+        threshold,
+      });
+    }
+
+    targetRef.current && observerRef.current.observe(targetRef.current);
+
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, [targetRef.current]);
+
+  return { isLoaded };
+};
+
+export default useIntersectionObserver;
diff --git a/frontend/src/hooks/useLazyLoading.ts b/frontend/src/hooks/useLazyLoading.ts
index b80e0814..844fcc87 100644
--- a/frontend/src/hooks/useLazyLoading.ts
+++ b/frontend/src/hooks/useLazyLoading.ts
@@ -26,6 +26,10 @@ const useLazyLoading = <T extends Element>(threshold: number = 0) => {
     }
 
     targetRef.current && observerRef.current.observe(targetRef.current);
+
+    return () => {
+      observerRef.current?.disconnect();
+    };
   }, []);
 
   return { isLoaded, targetRef };
diff --git a/frontend/src/hooks/useOnContainerScroll.ts b/frontend/src/hooks/useOnContainerScroll.ts
new file mode 100644
index 00000000..1f4bb4ee
--- /dev/null
+++ b/frontend/src/hooks/useOnContainerScroll.ts
@@ -0,0 +1,82 @@
+import useIntersectionObserver from './useIntersectionObserver';
+import { RefObject, useEffect } from 'react';
+
+interface ScrollInfo {
+  scrollY: number;
+  progress: number;
+}
+
+const useOnContainerScroll = (container: RefObject<HTMLElement>, onScroll: (info: ScrollInfo) => void) => {
+  const { isLoaded } = useIntersectionObserver<HTMLElement>(container);
+
+  const dimension = {
+    top: 0,
+    width: 0,
+    height: 0,
+    scrollHeight: 0,
+    windowHeight: 0,
+  };
+  const scrollInfo: ScrollInfo = {
+    scrollY: 0,
+    progress: 0,
+  };
+  const buffer = 1000;
+  let isRunning = false;
+  let latestRequestedTime = 0;
+
+  const onFireScroll = () => {
+    latestRequestedTime = Date.now();
+
+    if (isRunning) {
+      return;
+    }
+
+    isRunning = true;
+
+    const play = () => {
+      requestAnimationFrame(() => {
+        const now = Date.now() - buffer;
+        const scrolled = window.pageYOffset + window.innerHeight;
+        scrollInfo.scrollY = Math.max(scrolled - dimension.top, 0);
+        scrollInfo.progress = Math.min(scrollInfo.scrollY / dimension.scrollHeight, 1);
+        onScroll(scrollInfo);
+        if (now < latestRequestedTime) {
+          play();
+        } else {
+          isRunning = false;
+        }
+      });
+    };
+    play();
+  };
+
+  const setDimension = () => {
+    if (container.current) {
+      dimension.width = container.current.clientWidth;
+      dimension.height = container.current.clientHeight;
+      dimension.scrollHeight = container.current.clientHeight;
+      dimension.top = container.current.getBoundingClientRect().top - document.body.getBoundingClientRect().top;
+      dimension.windowHeight = window.innerHeight;
+    }
+    onFireScroll();
+  };
+
+  useEffect(() => {
+    if (isLoaded) {
+      window.addEventListener('scroll', onFireScroll);
+      window.addEventListener('resize', setDimension);
+      setDimension();
+    }
+    return () => {
+      window.removeEventListener('scroll', onFireScroll);
+      window.removeEventListener('resize', setDimension);
+    };
+  }, [isLoaded]);
+
+  return {
+    dimension,
+    scrollInfo,
+  };
+};
+
+export default useOnContainerScroll;
diff --git a/frontend/src/hooks/useResizeScreen.ts b/frontend/src/hooks/useResizeScreen.ts
new file mode 100644
index 00000000..74df1320
--- /dev/null
+++ b/frontend/src/hooks/useResizeScreen.ts
@@ -0,0 +1,46 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { ScreenModeType } from '@/types';
+
+import screenSize from '@/constants/screenSize';
+
+const useResizeScreen = () => {
+  const [resize, setResize] = useState<number>(window.innerWidth);
+  const [screenMode, setScreenMode] = useState<ScreenModeType>('DESKTOP');
+  const timerDebounce = useRef<ReturnType<typeof setTimeout>>();
+
+  const handleResize = useCallback(() => {
+    if (timerDebounce.current) {
+      clearTimeout(timerDebounce.current);
+    }
+
+    const newTimerDebounce = setTimeout(() => {
+      setResize(window.innerWidth);
+      clearTimeout(timerDebounce.current);
+    }, 800);
+
+    timerDebounce.current = newTimerDebounce;
+  }, []);
+
+  useEffect(() => {
+    if (screenSize.TABLET < resize) {
+      setScreenMode('DESKTOP');
+      return;
+    }
+
+    setScreenMode('MOBILE');
+  }, [resize]);
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      if (timerDebounce.current) clearTimeout(timerDebounce.current);
+    };
+  }, []);
+
+  return { screenMode };
+};
+
+export default useResizeScreen;
diff --git a/frontend/src/hooks/useScroll.ts b/frontend/src/hooks/useScroll.ts
index 31ac0a18..024eab52 100644
--- a/frontend/src/hooks/useScroll.ts
+++ b/frontend/src/hooks/useScroll.ts
@@ -3,12 +3,15 @@ import { useEffect, useState } from 'react';
 const useScroll = () => {
   const [scrollPosition, setScrollPosition] = useState(0);
 
-  const updateScroll = () => {
-    setScrollPosition((scrollY / innerHeight) * 100);
+  const updateScroll = (e: any) => {
+    const newScrollPosition = (scrollY / innerHeight) * 100 || (e.target.scrollTop / innerHeight) * 100 || 0;
+    setScrollPosition(newScrollPosition);
   };
 
   useEffect(() => {
-    window.addEventListener('scroll', updateScroll);
+    window.addEventListener('scroll', updateScroll, { capture: true, passive: true });
+
+    return () => window.removeEventListener('scroll', updateScroll);
   }, []);
 
   return { scrollPosition };
diff --git a/frontend/src/hooks/useTransitionSelect.ts b/frontend/src/hooks/useTransitionSelect.ts
index 81d442de..aa8413b6 100644
--- a/frontend/src/hooks/useTransitionSelect.ts
+++ b/frontend/src/hooks/useTransitionSelect.ts
@@ -1,33 +1,41 @@
 import { useLocation } from 'react-router-dom';
 
+const getPageByPath = (pathname: string) => {
+  const pathList = pathname.split('/');
+
+  if (pathList.length === 4 && pathList[3] === 'pwd') return 'passwordPage';
+  if (pathList.length === 4 && pathList[3] === 'spaces') return 'spaceListPage';
+  if (pathList.length === 5) return 'jobListPage';
+  if (pathList.length === 6) return 'taskListPage';
+
+  return '';
+};
+
 const useTransitionSelect = () => {
   const location = useLocation();
-
   const previousPath = sessionStorage.getItem('path');
 
-  const pathLength = location.pathname.split('/').length;
-  const previousPathLength = previousPath?.split('/').length;
-  const isPwdPage = location.pathname.split('/')[3] == 'pwd';
-  const isPreviousPwdPage = previousPath?.split('/')[3] == 'pwd';
+  const previousPage = getPageByPath(previousPath || '');
+  const currentPage = getPageByPath(location.pathname);
 
   sessionStorage.setItem('path', location.pathname);
 
-  if (pathLength === 4 && isPwdPage) {
+  if (currentPage === 'passwordPage') {
     return '';
   }
-  if (pathLength === 4) {
-    if (isPreviousPwdPage) return '';
+  if (currentPage === 'spaceListPage') {
+    if (previousPage === 'passwordPage') return '';
     return 'slide-left';
   }
-  if (pathLength === 5) {
-    if (previousPathLength === 4 && !isPreviousPwdPage) {
+  if (currentPage === 'jobListPage') {
+    if (previousPage === 'spaceListPage') {
       return 'slide-right';
     }
-    if (previousPathLength === 6) {
+    if (previousPage === 'taskListPage') {
       return 'left';
     }
   }
-  if (pathLength === 6) {
+  if (currentPage === 'taskListPage') {
     return 'right';
   }
 
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index c7d00c16..98998e64 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,4 +1,5 @@
 import App from './App';
+import { disableReactDevTools } from './utils/disableReactDevTools';
 import { Global } from '@emotion/react';
 import ReactDOM from 'react-dom/client';
 import { QueryClient, QueryClientProvider } from 'react-query';
@@ -14,6 +15,10 @@ const queryClient = new QueryClient({
   },
 });
 
+if (process.env.NODE_ENV === 'production') {
+  disableReactDevTools();
+}
+
 root.render(
   <BrowserRouter>
     <Global styles={globalStyle} />
diff --git a/frontend/src/layouts/DefaultLayout/MainPage.tsx b/frontend/src/layouts/DefaultLayout/MainPage.tsx
deleted file mode 100644
index a7a100a6..00000000
--- a/frontend/src/layouts/DefaultLayout/MainPage.tsx
+++ /dev/null
@@ -1,698 +0,0 @@
-import MainSection from './MainSection';
-import { css } from '@emotion/react';
-import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import useLazyLoading from '@/hooks/useLazyLoading';
-import useScroll from '@/hooks/useScroll';
-
-import createSpace from '@/assets/createSpace.png';
-import dashboard from '@/assets/dashboard.png';
-import edit2 from '@/assets/edit2.png';
-import edit from '@/assets/edit.png';
-import mobileView1 from '@/assets/mobileView1.png';
-import mobileView2 from '@/assets/mobileView2.png';
-import mobileView3 from '@/assets/mobileView3.png';
-import mobileView4 from '@/assets/mobileView4.png';
-
-import animation from '@/styles/animation';
-import theme from '@/styles/theme';
-
-const FloatingActionButton: React.FC = () => {
-  const navigate = useNavigate();
-  const { scrollPosition } = useScroll();
-  const [eventNumber, setEventNumber] = useState(0);
-
-  const onClick = () => {
-    navigate('/host');
-  };
-
-  useEffect(() => {
-    if (scrollPosition >= 550) {
-      setEventNumber(1);
-      return;
-    }
-    setEventNumber(0);
-  }, [scrollPosition]);
-
-  return (
-    <div>
-      <div
-        css={css`
-          ${eventNumber === 1 &&
-          `
-            transform: translateX(calc(-50vw + 114px))  scale(1.4);
-            transition-duration: 1.5s;
-            `}
-
-          right: 40px;
-          bottom: 40px;
-          position: fixed;
-          z-index: 200;
-          cursor: pointer;
-          color: white;
-          font-weight: 600;
-          background-color: ${theme.colors.primary};
-          padding: 16px 32px;
-          border-radius: 24px;
-          box-shadow: 0px 0px 2px 3px ${theme.colors.shadow10};
-        `}
-        onClick={onClick}
-      >
-        <span>시작하기</span>
-      </div>
-    </div>
-  );
-};
-
-const MainPage: React.FC = () => {
-  return (
-    <div
-      css={css`
-        width: 100vw;
-        background-color: ${theme.colors.background};
-      `}
-    >
-      <MainSection />
-      <UserViewSection1 />
-      <UserViewSection2 />
-      <UserViewSection3 />
-      <HostViewSection1 />
-      <HostViewSection2 />
-      <HostViewSection3 />
-      <FloatingActionButton />
-    </div>
-  );
-};
-
-const UserViewSection1 = () => {
-  const { isLoaded, targetRef: sectionRef } = useLazyLoading<HTMLSelectElement>();
-  const { scrollPosition } = useScroll();
-  const [eventNumber, setEventNumber] = useState(0);
-
-  useEffect(() => {
-    if (scrollPosition >= 60 && scrollPosition < 100) {
-      setEventNumber(1);
-      return;
-    }
-    if (scrollPosition >= 100) {
-      setEventNumber(2);
-      return;
-    }
-    setEventNumber(0);
-  }, [scrollPosition]);
-
-  return (
-    <section
-      css={css`
-        width: 100vw;
-        height: 100vh;
-        z-index: 10;
-      `}
-      ref={sectionRef}
-    >
-      {isLoaded && (
-        <div
-          css={css`
-            width: 100%;
-            height: 100%;
-            background-color: ${theme.colors.background};
-            position: relative;
-            z-index: 10;
-          `}
-        >
-          <h1
-            css={css`
-              position: absolute;
-              top: 13vw;
-              left: 12%;
-              z-index: 11;
-              font-size: 4.1vw;
-              color: ${theme.colors.primary};
-            `}
-          >
-            쉽게 확인해요.
-          </h1>
-          <h1
-            css={css`
-              position: absolute;
-              top: 29vw;
-              left: 10%;
-              z-index: 11;
-              font-size: 2.7vw;
-              color: ${theme.colors.gray800};
-            `}
-          >
-            함께 사용할
-          </h1>
-          {eventNumber >= 1 && (
-            <>
-              <img
-                css={css`
-                  position: absolute;
-                  top: 5vw;
-                  right: 25%;
-                  width: 20%;
-
-                  animation: ${animation.moveRight} 1.5s;
-                  animation-fill-mode: forwards;
-                  z-index: 11;
-                `}
-                src={mobileView1}
-                alt=""
-              />
-              <h1
-                css={css`
-                  position: absolute;
-                  top: 29vw;
-                  left: 24.5%;
-                  z-index: 11;
-                  font-size: 2.7vw;
-                  animation: ${animation.moveDown} 1.5s;
-                  animation-fill-mode: forwards;
-                  color: ${theme.colors.gray800};
-
-                  b {
-                    color: ${theme.colors.green};
-                  }
-                `}
-              >
-                <b>공간</b>과
-              </h1>
-            </>
-          )}
-          {eventNumber === 2 && (
-            <>
-              <img
-                css={css`
-                  position: absolute;
-                  top: 12vw;
-                  right: 10%;
-                  width: 20%;
-                  animation: ${animation.moveLeft} 1.5s;
-                  animation-fill-mode: forwards;
-                  z-index: 12;
-                `}
-                src={mobileView2}
-                alt=""
-              />
-              <h1
-                css={css`
-                  position: absolute;
-                  top: 29vw;
-                  left: 33%;
-                  z-index: 11;
-                  font-size: 2.7vw;
-                  animation: ${animation.moveUp} 1.5s;
-                  animation-fill-mode: forwards;
-                  color: ${theme.colors.gray800};
-
-                  b {
-                    color: ${theme.colors.green};
-                  }
-                `}
-              >
-                <b>업무</b>를
-              </h1>
-            </>
-          )}
-        </div>
-      )}
-    </section>
-  );
-};
-
-const UserViewSection2 = () => {
-  const { isLoaded, targetRef: sectionRef } = useLazyLoading<HTMLSelectElement>();
-  const { scrollPosition } = useScroll();
-  const [eventNumber, setEventNumber] = useState(0);
-
-  useEffect(() => {
-    if (scrollPosition >= 160 && scrollPosition < 200) {
-      setEventNumber(1);
-      return;
-    }
-    if (scrollPosition >= 200) {
-      setEventNumber(2);
-      return;
-    }
-    setEventNumber(0);
-  }, [scrollPosition]);
-
-  return (
-    <section
-      css={css`
-        width: 100vw;
-        height: 100vh;
-      `}
-      ref={sectionRef}
-    >
-      {isLoaded && (
-        <div
-          css={css`
-            width: 100%;
-            height: 100%;
-            background-color: ${theme.colors.background};
-            position: relative;
-          `}
-        >
-          <h1
-            css={css`
-              position: absolute;
-              top: 12vw;
-              right: 12%;
-              z-index: 11;
-              font-size: 4.1vw;
-              color: ${theme.colors.green};
-            `}
-          >
-            간단하게 체크해요.
-          </h1>
-          {eventNumber >= 1 && (
-            <>
-              <img
-                css={css`
-                  position: absolute;
-                  top: 4vw;
-                  left: 28%;
-                  width: 20%;
-                  animation: ${animation.moveDown} 1.5s;
-                  animation-fill-mode: forwards;
-                  z-index: 11;
-                `}
-                src={mobileView3}
-                alt=""
-              />
-              <h1
-                css={css`
-                  position: absolute;
-                  top: 28.5vw;
-                  right: 30%;
-                  z-index: 11;
-                  font-size: 2.7vw;
-                  color: ${theme.colors.gray800};
-                  animation: ${animation.moveRight} 1.5s;
-                  animation-fill-mode: forwards;
-
-                  b {
-                    color: ${theme.colors.primary};
-                  }
-                `}
-              >
-                <b>체크리스트</b>와
-              </h1>
-            </>
-          )}
-          {eventNumber === 2 && (
-            <>
-              <img
-                css={css`
-                  position: absolute;
-                  top: 7vw;
-                  left: 6%;
-                  width: 20%;
-                  z-index: 12;
-                  animation: ${animation.moveUp} 1.5s;
-                  animation-fill-mode: forwards;
-                `}
-                src={mobileView4}
-                alt=""
-              />
-              <h1
-                css={css`
-                  position: absolute;
-                  top: 28.5vw;
-                  right: 13%;
-                  z-index: 11;
-                  font-size: 2.7vw;
-                  color: ${theme.colors.gray800};
-                  animation: ${animation.moveLeft} 1.5s;
-                  animation-fill-mode: forwards;
-                  b {
-                    color: ${theme.colors.primary};
-                  }
-                `}
-              >
-                <b>상세정보</b> 제공
-              </h1>
-              {innerWidth > 600 && (
-                <h1
-                  css={css`
-                    position: absolute;
-                    top: 28.5vw;
-                    right: 20.7%;
-                    z-index: 11;
-                    font-size: 1vw;
-                    color: ${theme.colors.gray500};
-                    animation: ${animation.moveLeft} 1.5s;
-                    animation-fill-mode: forwards;
-                  `}
-                >
-                  How, Where
-                </h1>
-              )}
-            </>
-          )}
-        </div>
-      )}
-    </section>
-  );
-};
-
-const UserViewSection3 = () => {
-  const { isLoaded, targetRef: sectionRef } = useLazyLoading<HTMLSelectElement>();
-  const { scrollPosition } = useScroll();
-  const [eventNumber, setEventNumber] = useState(0);
-
-  useEffect(() => {
-    if (scrollPosition >= 270) {
-      setEventNumber(1);
-      return;
-    }
-    setEventNumber(0);
-  }, [scrollPosition]);
-
-  return (
-    <section
-      css={css`
-        width: 100vw;
-        height: 100vh;
-      `}
-      ref={sectionRef}
-    >
-      {isLoaded && (
-        <div
-          css={css`
-            width: 100%;
-            height: 100%;
-            background-color: ${theme.colors.background};
-            position: relative;
-          `}
-        >
-          <h1
-            css={css`
-              position: absolute;
-              top: 2.2vw;
-              left: 38.5%;
-              z-index: 11;
-              font-size: 4.1vw;
-              color: ${theme.colors.primary};
-            `}
-          >
-            함께 사용해요.
-          </h1>
-          {eventNumber === 1 && (
-            <>
-              <img
-                css={css`
-                  position: absolute;
-                  top: 15vw;
-                  left: 26%;
-                  width: 18%;
-                  z-index: 11;
-                  animation: ${animation.moveRight} 1.5s;
-                  animation-fill-mode: forwards;
-                `}
-                src={mobileView3}
-                alt=""
-              />
-              <img
-                css={css`
-                  position: absolute;
-                  top: 15vw;
-                  right: 26%;
-                  width: 18%;
-                  z-index: 11;
-                  animation: ${animation.moveLeft} 1.5s;
-                  animation-fill-mode: forwards;
-                `}
-                src={mobileView3}
-                alt=""
-              />
-              {innerWidth > 600 && (
-                <h1
-                  css={css`
-                    position: absolute;
-                    top: 10.5vw;
-                    left: 40.4%;
-                    z-index: 11;
-                    font-size: 1.3vw;
-                    color: ${theme.colors.gray800};
-                    animation: ${animation.fadeIn} 1.5s;
-                    animation-fill-mode: forwards;
-
-                    b {
-                      color: ${theme.colors.green};
-                    }
-                  `}
-                >
-                  여러명이 <b>동시에</b> 같은 업무 체크 가능
-                </h1>
-              )}
-            </>
-          )}
-        </div>
-      )}
-    </section>
-  );
-};
-
-const HostViewSection1 = () => {
-  const { isLoaded, targetRef: sectionRef } = useLazyLoading<HTMLSelectElement>();
-  const { scrollPosition } = useScroll();
-  const [eventNumber, setEventNumber] = useState(0);
-
-  useEffect(() => {
-    if (scrollPosition >= 410) {
-      setEventNumber(1);
-      return;
-    }
-    setEventNumber(0);
-  }, [scrollPosition]);
-
-  return (
-    <section
-      css={css`
-        width: 100vw;
-        height: 100vh;
-      `}
-      ref={sectionRef}
-    >
-      {isLoaded && (
-        <div
-          css={css`
-            width: 100%;
-            height: 100%;
-            position: relative;
-            background-color: ${theme.colors.background};
-          `}
-        >
-          <h1
-            css={css`
-              top: 21.4vw;
-              left: 27%;
-              z-index: 11;
-              font-size: 2.7vw;
-              color: ${theme.colors.gray800};
-              position: absolute;
-              b {
-                color: ${theme.colors.primary};
-              }
-
-              b + b {
-                color: ${theme.colors.green};
-              }
-            `}
-          >
-            직접 내 공간을 <b>생성</b>하고 <b>관리</b>하고싶다면?
-          </h1>
-          {eventNumber === 1 && (
-            <h1
-              css={css`
-                position: absolute;
-                top: 44vw;
-                left: 33%;
-                z-index: 11;
-                font-size: 2.7vw;
-                color: ${theme.colors.gray800};
-                animation: ${animation.fadeIn} 1.5s;
-
-                b {
-                  color: ${theme.colors.primary};
-                }
-
-                b + b {
-                  color: ${theme.colors.green};
-                }
-              `}
-            >
-              <b>Gong</b>
-              <b>Check</b>과 함께 하세요.
-            </h1>
-          )}
-        </div>
-      )}
-    </section>
-  );
-};
-
-const HostViewSection2 = () => {
-  const { isLoaded, targetRef: sectionRef } = useLazyLoading<HTMLSelectElement>(0.2);
-  const { scrollPosition } = useScroll();
-  const [eventNumber, setEventNumber] = useState(0);
-
-  useEffect(() => {
-    if (scrollPosition >= 490) {
-      setEventNumber(1);
-      return;
-    }
-    setEventNumber(0);
-  }, [scrollPosition]);
-
-  return (
-    <section
-      css={css`
-        margin-top: 10vh;
-        width: 100vw;
-        height: 100vh;
-      `}
-      ref={sectionRef}
-    >
-      {isLoaded && (
-        <div
-          css={css`
-            width: 100%;
-            height: 100%;
-            background-color: ${theme.colors.background};
-            position: relative;
-          `}
-        >
-          <h1
-            css={css`
-              position: absolute;
-              top: 2vw;
-              left: 44%;
-              z-index: 11;
-              font-size: 2.7vw;
-              color: ${theme.colors.gray800};
-              animation: ${animation.fadeIn} 1.5s;
-              animation-fill-mode: forwards;
-            `}
-          >
-            내 공간 관리
-          </h1>
-          {eventNumber >= 1 && (
-            <>
-              <img
-                css={css`
-                  box-shadow: 3px 3px 3px 3px ${theme.colors.shadow20};
-                  position: absolute;
-                  top: 12vw;
-                  left: 16%;
-                  width: 32%;
-                  animation: ${animation.moveUp} 1.5s;
-                  animation-fill-mode: forwards;
-                  z-index: 11;
-                  border-radius: 4px;
-                  border: 4px solid ${theme.colors.primary};
-                `}
-                src={createSpace}
-                alt=""
-              />
-              <img
-                css={css`
-                  box-shadow: 3px 3px 3px 3px ${theme.colors.shadow20};
-                  position: absolute;
-                  top: 33vw;
-                  left: 16%;
-                  width: 32%;
-                  animation: ${animation.moveUp} 1.5s;
-                  animation-fill-mode: forwards;
-                  z-index: 11;
-                  border-radius: 4px;
-                  border: 4px solid ${theme.colors.primary};
-                `}
-                src={dashboard}
-                alt=""
-              />
-              <img
-                css={css`
-                  box-shadow: 3px 3px 3px 3px ${theme.colors.shadow20};
-                  position: absolute;
-                  top: 12vw;
-                  right: 16%;
-                  width: 32%;
-                  animation: ${animation.moveUp} 1.5s;
-                  animation-fill-mode: forwards;
-                  z-index: 11;
-                  border-radius: 4px;
-                  border: 6px solid ${theme.colors.green};
-                `}
-                src={edit}
-                alt=""
-              />
-              <img
-                css={css`
-                  box-shadow: 3px 3px 3px 3px ${theme.colors.shadow20};
-                  position: absolute;
-                  top: 33vw;
-                  right: 16%;
-                  width: 32%;
-                  animation: ${animation.moveUp} 1.5s;
-                  animation-fill-mode: forwards;
-                  z-index: 11;
-                  border-radius: 4px;
-                  border: 4px solid ${theme.colors.green};
-                `}
-                src={edit2}
-                alt=""
-              />
-            </>
-          )}
-        </div>
-      )}
-    </section>
-  );
-};
-
-const HostViewSection3 = () => {
-  const { isLoaded, targetRef: sectionRef } = useLazyLoading<HTMLSelectElement>(0.3);
-
-  return (
-    <section
-      css={css`
-        width: 100vw;
-        height: 42vh;
-      `}
-      ref={sectionRef}
-    >
-      {isLoaded && (
-        <div
-          css={css`
-            width: 100%;
-            height: 100%;
-            background-color: ${theme.colors.background};
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          `}
-        >
-          <h1
-            css={css`
-              z-index: 11;
-              font-size: 2.7vw;
-              color: ${theme.colors.gray800};
-              animation: ${animation.moveDown} 1.5s;
-              animation-fill-mode: forwards;
-              padding-bottom: 8vh;
-            `}
-          >
-            지금 바로
-          </h1>
-        </div>
-      )}
-    </section>
-  );
-};
-
-export default MainPage;
diff --git a/frontend/src/layouts/DefaultLayout/MainSection.tsx b/frontend/src/layouts/DefaultLayout/MainSection.tsx
deleted file mode 100644
index dde44920..00000000
--- a/frontend/src/layouts/DefaultLayout/MainSection.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import { css } from '@emotion/react';
-import React, { useEffect, useRef, useState } from 'react';
-import { IoIosArrowDown } from 'react-icons/io';
-
-import useScroll from '@/hooks/useScroll';
-
-import homeCover from '@/assets/homeCover.png';
-
-import animation from '@/styles/animation';
-import theme from '@/styles/theme';
-
-const CIRCLE_SIZE = 80;
-
-const MainSection: React.FC = () => {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-
-  const positionRef = useRef({ x: window.innerWidth / 2, y: window.innerHeight / 2 });
-
-  const { scrollPosition } = useScroll();
-  const scrollPositionInt = scrollPosition + 3;
-
-  const [isFull, setIsFull] = useState(false);
-
-  const onMouseMove = (e: React.MouseEvent<HTMLElement, MouseEvent>, scrollPositionInt: number) => {
-    const canvas = canvasRef.current;
-    const ctx = canvas?.getContext('2d');
-    if (!canvas || !ctx) return;
-
-    const target = e.target as HTMLInputElement;
-    const localName = target.localName;
-
-    if (localName !== 'canvas') return;
-
-    positionRef.current = {
-      x: e.nativeEvent.offsetX,
-      y: e.nativeEvent.offsetY,
-    };
-
-    const scale = window.devicePixelRatio;
-    canvas.width = Math.floor(window.innerWidth * scale);
-    canvas.height = Math.floor(window.innerHeight * scale);
-    ctx.scale(scale, scale);
-
-    const x = e.nativeEvent.offsetX;
-    const y = e.nativeEvent.offsetY;
-
-    const radius = CIRCLE_SIZE * scrollPositionInt;
-
-    ctx.beginPath();
-    let circlePath = new Path2D();
-    circlePath.arc(x, y, radius, 0, Math.PI * 2);
-    circlePath.rect(0, 0, window.innerWidth, window.innerHeight);
-    ctx.clip(circlePath, 'evenodd');
-    ctx.fillStyle = '#000000';
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    ctx.closePath();
-  };
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    const ctx = canvas?.getContext('2d');
-    if (!canvas || !ctx) return;
-
-    const scale = window.devicePixelRatio;
-
-    canvas.width = Math.floor(window.innerWidth * scale);
-    canvas.height = Math.floor(window.innerHeight * scale);
-    ctx.scale(scale, scale);
-
-    const x = positionRef.current.x;
-    const y = positionRef.current.y;
-
-    const radius = CIRCLE_SIZE * scrollPositionInt - scrollPositionInt * 2;
-
-    ctx.beginPath();
-    let circlePath = new Path2D();
-    circlePath.arc(x, y, radius, 0, Math.PI * 2);
-    circlePath.rect(0, 0, window.innerWidth, window.innerHeight);
-    ctx.clip(circlePath, 'evenodd');
-    ctx.fillStyle = '#000000';
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    ctx.closePath();
-
-    if (scrollPositionInt >= 12) {
-      setIsFull(true);
-    } else {
-      setIsFull(false);
-    }
-  }, [scrollPositionInt]);
-
-  // useEffect(() => {
-  //   const canvas = canvasRef.current;
-  //   const ctx = canvas?.getContext('2d');
-  //   if (!canvas || !ctx) return;
-
-  //   const scale = window.devicePixelRatio;
-
-  //   canvas.width = Math.floor(window.innerWidth * scale);
-  //   canvas.height = Math.floor(window.innerHeight * scale);
-  //   ctx.scale(scale, scale);
-
-  //   const x = window.innerWidth / 2;
-  //   const y = window.innerHeight / 2;
-
-  //   const radius = CIRCLE_SIZE * scrollPositionInt;
-
-  //   ctx.beginPath();
-  //   let circlePath = new Path2D();
-  //   circlePath.arc(x, y, radius, 0, Math.PI * 2);
-  //   circlePath.rect(0, 0, window.innerWidth, window.innerHeight);
-  //   ctx.clip(circlePath, 'evenodd');
-  //   ctx.fillStyle = '#000000';
-  //   ctx.fillRect(0, 0, canvas.width, canvas.height);
-  //   ctx.closePath();
-  // }, []);
-
-  return (
-    <>
-      <section
-        css={css`
-          width: 100vw;
-          height: 100vh;
-          overflow: hidden;
-          ${isFull
-            ? `
-            transform: translateY(68px);
-          `
-            : `
-          position: fixed;
-          top: 0;
-          z-index: 100;
-          `}
-        `}
-        onMouseMove={e => onMouseMove(e, scrollPositionInt)}
-      >
-        <div
-          css={css`
-            height: 100vh;
-            position: relative;
-            top: 0;
-            width: 100%;
-            z-index: 1;
-            background-color: ${theme.colors.background};
-          `}
-        >
-          <div
-            css={css`
-              position: absolute;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              width: 100%;
-              height: 100%;
-            `}
-          >
-            <div
-              id="커버"
-              css={css`
-                margin: 1em 0;
-                animation: ${animation.wave} 2s alternate linear infinite;
-              `}
-            >
-              <img src={homeCover} alt="" />
-            </div>
-          </div>
-          <div
-            css={css`
-              position: absolute;
-              bottom: 20px;
-              color: ${theme.colors.primary};
-              width: 100%;
-              -webkit-transform: translate(-50%, -50%);
-              transform: translate(-50%, -50%);
-              z-index: 3;
-              display: flex;
-              flex-direction: column;
-              justify-content: center;
-              align-items: center;
-              animation: ${animation.moveDown} 2s 0s infinite;
-            `}
-          >
-            <span>아래로 내려주세요.</span>
-            <IoIosArrowDown />
-          </div>
-
-          <canvas
-            css={css`
-              height: 100%;
-              left: 50%;
-              position: relative;
-              top: 50%;
-              -webkit-transform: translate(-50%, -50%);
-              transform: translate(-50%, -50%);
-              width: 100%;
-              z-index: 2;
-              opacity: 0.85;
-            `}
-            ref={canvasRef}
-          ></canvas>
-        </div>
-      </section>
-      <div
-        css={css`
-          margin-bottom: ${isFull ? '20vh' : '100vh'};
-          background-color: ${theme.colors.background};
-        `}
-      />
-    </>
-  );
-};
-
-export default MainSection;
diff --git a/frontend/src/layouts/DefaultLayout/index.tsx b/frontend/src/layouts/DefaultLayout/index.tsx
index 1e85f14e..dcd764bd 100644
--- a/frontend/src/layouts/DefaultLayout/index.tsx
+++ b/frontend/src/layouts/DefaultLayout/index.tsx
@@ -1,7 +1,8 @@
-import MainPage from './MainPage';
 import { useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 
+import Landing from '@/pages/host/Landing';
+
 import useModal from '@/hooks/useModal';
 
 const DefaultLayout: React.FC = () => {
@@ -14,7 +15,7 @@ const DefaultLayout: React.FC = () => {
     scrollTo(0, 0);
   }, []);
 
-  return <>{isRootPath ? <MainPage /> : <Outlet />}</>;
+  return <>{isRootPath ? <Landing /> : <Outlet />}</>;
 };
 
 export default DefaultLayout;
diff --git a/frontend/src/layouts/HostLayout/styles.ts b/frontend/src/layouts/HostLayout/styles.ts
index ae453fdb..d9974011 100644
--- a/frontend/src/layouts/HostLayout/styles.ts
+++ b/frontend/src/layouts/HostLayout/styles.ts
@@ -9,14 +9,19 @@ const layout = (isManagePath: boolean) => css`
   min-height: 100vh;
   height: fit-content;
   background-color: ${theme.colors.background};
-  padding-left: ${isManagePath ? '14em' : 0};
 
-  @media screen and (max-width: 1024px) {
-    font-size: 14px;
-  }
   @media screen and (max-width: 720px) {
     font-size: 12px;
   }
+
+  @media screen and (max-width: 1023px) {
+    font-size: 14px;
+    padding-top: ${isManagePath ? '64px' : 0};
+  }
+
+  @media screen and (min-width: 1024px) {
+    padding-left: ${isManagePath ? '14em' : 0};
+  }
 `;
 
 const styles = { layout };
diff --git a/frontend/src/layouts/ManageLayout/index.tsx b/frontend/src/layouts/ManageLayout/index.tsx
index 8841c90d..15a30c0c 100644
--- a/frontend/src/layouts/ManageLayout/index.tsx
+++ b/frontend/src/layouts/ManageLayout/index.tsx
@@ -1,11 +1,34 @@
+import isNull from '@/utils/isNull';
+import { useEffect, useState } from 'react';
 import { Outlet } from 'react-router-dom';
 
-import Navigation from '@/components/host/Navigation';
+import LeftNavigator from '@/components/host/Navigator/LeftNavigator';
+import TopNavigator from '@/components/host/Navigator/TopNavigator';
 
 const ManageLayout = () => {
+  const [isDeskTop, setIsDeskTop] = useState<boolean | null>(null);
+
+  const resizeHandler = () => {
+    if (innerWidth >= 1024) {
+      setIsDeskTop(true);
+      return;
+    }
+    setIsDeskTop(false);
+  };
+
+  useEffect(() => {
+    resizeHandler();
+
+    window.addEventListener('resize', resizeHandler);
+
+    return () => {
+      window.removeEventListener('resize', resizeHandler);
+    };
+  }, []);
+
   return (
     <>
-      <Navigation />
+      {!isNull(isDeskTop) && (isDeskTop ? <LeftNavigator /> : <TopNavigator />)}
       <Outlet />
     </>
   );
diff --git a/frontend/src/layouts/UserLayout/index.tsx b/frontend/src/layouts/UserLayout/index.tsx
index 62697bee..8f60fbb0 100644
--- a/frontend/src/layouts/UserLayout/index.tsx
+++ b/frontend/src/layouts/UserLayout/index.tsx
@@ -27,12 +27,12 @@ const UserLayout: React.FC = () => {
   return (
     <ErrorUserToken>
       <ErrorUserTask>
-        <Suspense fallback={<></>}>
-          <div css={styles.layout}>
-            <Global styles={transitions} />
+        <div css={styles.layout}>
+          <Global styles={transitions} />
+          <Suspense fallback={<div css={styles.fallback} />}>
             <Outlet />
-          </div>
-        </Suspense>
+          </Suspense>
+        </div>
       </ErrorUserTask>
     </ErrorUserToken>
   );
diff --git a/frontend/src/layouts/UserLayout/styles.ts b/frontend/src/layouts/UserLayout/styles.ts
index 1f752698..832c437f 100644
--- a/frontend/src/layouts/UserLayout/styles.ts
+++ b/frontend/src/layouts/UserLayout/styles.ts
@@ -11,6 +11,10 @@ const layout = css`
   background-color: ${theme.colors.white};
 `;
 
-const styles = { layout };
+const fallback = css`
+  opacity: 1;
+`;
+
+const styles = { layout, fallback };
 
 export default styles;
diff --git a/frontend/src/pages/host/DashBoard/index.tsx b/frontend/src/pages/host/DashBoard/index.tsx
index 90ec60bb..e1a5f633 100644
--- a/frontend/src/pages/host/DashBoard/index.tsx
+++ b/frontend/src/pages/host/DashBoard/index.tsx
@@ -1,10 +1,10 @@
 import useDashBoard from './useDashBoard';
-import { GoLinkExternal } from 'react-icons/go';
+import { BiTrash } from '@react-icons/all-files/bi/BiTrash';
+import { GoLinkExternal } from '@react-icons/all-files/go/GoLinkExternal';
 
 import Button from '@/components/common/Button';
 import JobListCard from '@/components/host/JobListCard';
-import SpaceDeleteButton from '@/components/host/SpaceDeleteButton';
-import SpaceInfoDisplayBox from '@/components/host/SpaceInfoDisplayBox';
+import SpaceInfoDisplayBox from '@/components/host/SpaceInfo/SpaceInfoDisplayBox';
 import Submissions from '@/components/host/Submissions';
 
 import slackIcon from '@/assets/slackIcon.svg';
@@ -12,7 +12,8 @@ import slackIcon from '@/assets/slackIcon.svg';
 import styles from './styles';
 
 const DashBoard: React.FC = () => {
-  const { spaceId, spaceData, jobsData, submissionData, onClickSlackButton, onClickLinkButton } = useDashBoard();
+  const { spaceData, jobsData, submissionData, onClickSlackButton, onClickLinkButton, onClickDeleteSpace } =
+    useDashBoard();
 
   return (
     <div css={styles.layout}>
@@ -23,10 +24,13 @@ const DashBoard: React.FC = () => {
             <span>입장 링크 복사</span>
           </Button>
           <Button css={styles.slackButton} onClick={onClickSlackButton}>
-            <img src={slackIcon} alt="슬랙" />
+            <img src={slackIcon} alt="슬랙 URL 편집" />
             <span>URL 편집</span>
           </Button>
-          <SpaceDeleteButton spaceId={spaceId} spaceName={spaceData?.name || ''} />
+          <Button css={styles.spaceDeleteButton} onClick={onClickDeleteSpace}>
+            <BiTrash />
+            <span>공간 삭제</span>
+          </Button>
         </div>
         <div css={styles.cardWrapper}>
           <SpaceInfoDisplayBox spaceData={spaceData!} />
diff --git a/frontend/src/pages/host/DashBoard/styles.ts b/frontend/src/pages/host/DashBoard/styles.ts
index 84c50f25..ef023e34 100644
--- a/frontend/src/pages/host/DashBoard/styles.ts
+++ b/frontend/src/pages/host/DashBoard/styles.ts
@@ -3,9 +3,16 @@ import { css } from '@emotion/react';
 import theme from '@/styles/theme';
 
 const layout = css`
-  padding: 32px 48px;
   display: flex;
   flex-direction: column;
+
+  @media screen and (min-width: 1024px) {
+    padding: 32px 48px;
+  }
+
+  @media screen and (max-width: 1023px) {
+    padding: 32px;
+  }
 `;
 
 const contents = css`
@@ -19,27 +26,49 @@ const contents = css`
 const cardWrapper = css`
   display: flex;
   width: 100%;
-  justify-content: space-around;
   gap: 20px;
-  margin-bottom: 32px;
+  margin-bottom: 20px;
+
+  @media screen and (min-width: 1024px) {
+    flex-direction: row;
+    justify-content: space-around;
+  }
+
+  @media screen and (max-width: 1023px) {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
 `;
 
 const linkButton = css`
   width: auto;
   height: 2rem;
   padding: 0 12px;
-  font-weight: 500;
-  font-size: 1rem;
+  font-size: 0.9rem;
   margin: 0 0 16px 12px;
   background-color: ${theme.colors.green};
   color: ${theme.colors.white};
   box-shadow: 0px 0px 1px 1px ${theme.colors.shadow10};
 
   svg {
-    height: 14px;
-    width: 14px;
-    margin-right: 6px;
-    transform: translateY(2px);
+    height: 20px;
+    width: 20px;
+    transform: translateY(3px);
+  }
+
+  @media screen and (min-width: 1024px) {
+    svg {
+      height: 16px;
+      width: 16px;
+      margin-right: 4px;
+    }
+  }
+
+  @media screen and (max-width: 1023px) {
+    span {
+      display: none;
+    }
   }
 `;
 
@@ -47,27 +76,76 @@ const slackButton = css`
   width: auto;
   height: 2rem;
   padding: 0 12px;
-  font-weight: 500;
-  font-size: 1rem;
+  font-size: 0.9rem;
   margin: 0 0 16px 12px;
   background-color: ${theme.colors.white};
   color: ${theme.colors.black};
   box-shadow: 0px 0px 1px 1px ${theme.colors.shadow30};
 
   img {
-    height: 14px;
-    width: 14px;
-    margin-right: 6px;
+    height: 18px;
+    width: 18px;
     transform: translateY(2px);
   }
+
+  @media screen and (min-width: 1024px) {
+    img {
+      height: 14px;
+      width: 14px;
+      margin-right: 6px;
+    }
+  }
+
+  @media screen and (max-width: 1023px) {
+    span {
+      display: none;
+    }
+  }
 `;
 
 const buttons = css`
-  width: 100%;
   display: flex;
   justify-content: end;
+
+  @media screen and (min-width: 1024px) {
+    width: 100%;
+  }
+
+  @media screen and (max-width: 1023px) {
+    width: 90%;
+  }
+`;
+
+const spaceDeleteButton = css`
+  width: auto;
+  height: 2rem;
+  padding: 0 12px;
+  font-size: 0.9rem;
+  margin: 0 0 16px 12px;
+  background-color: ${theme.colors.red};
+  color: ${theme.colors.white};
+
+  svg {
+    height: 24px;
+    width: 24px;
+    transform: translateY(3px);
+  }
+
+  @media screen and (min-width: 1024px) {
+    svg {
+      height: 16px;
+      width: 16px;
+      margin-right: 4px;
+    }
+  }
+
+  @media screen and (max-width: 1023px) {
+    span {
+      display: none;
+    }
+  }
 `;
 
-const styles = { layout, contents, cardWrapper, slackButton, linkButton, buttons };
+const styles = { layout, contents, cardWrapper, slackButton, linkButton, buttons, spaceDeleteButton };
 
 export default styles;
diff --git a/frontend/src/pages/host/DashBoard/useDashBoard.tsx b/frontend/src/pages/host/DashBoard/useDashBoard.tsx
index 72d8be26..57eebc25 100644
--- a/frontend/src/pages/host/DashBoard/useDashBoard.tsx
+++ b/frontend/src/pages/host/DashBoard/useDashBoard.tsx
@@ -1,7 +1,9 @@
-import { useQuery } from 'react-query';
+import copyUrlToClipboard from '@/utils/copyUrlToClipboard';
+import { useMutation, useQuery } from 'react-query';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import SlackUrlModal from '@/components/host/SlackUrlModal';
+import SpaceDeleteModal from '@/components/host/SpaceDeleteModal';
 
 import useModal from '@/hooks/useModal';
 import useToast from '@/hooks/useToast';
@@ -16,7 +18,7 @@ import { ID } from '@/types';
 const useDashBoard = () => {
   const navigate = useNavigate();
 
-  const { openModal } = useModal();
+  const { openModal, closeModal } = useModal();
   const { openToast } = useToast();
 
   const { spaceId } = useParams() as { spaceId: ID };
@@ -27,15 +29,30 @@ const useDashBoard = () => {
   });
   const { data: jobsData } = useQuery(['jobs', spaceId], () => apiJobs.getJobs(spaceId));
   const { data: submissionData } = useQuery(['submissions', spaceId], () => apiSubmission.getSubmission(spaceId));
-  const { refetch: copyEntranceLink } = useQuery(['entranceCode'], () => apiHost.getEntranceCode(), {
+  const { data: entranceCodeData } = useQuery(['entranceCode'], () => apiHost.getEntranceCode(), {
     suspense: false,
+  });
+
+  const { refetch } = useQuery(['deleteSpaces'], apiSpace.getSpaces, {
     enabled: false,
     onSuccess: data => {
-      navigator.clipboard.writeText(`${location.origin}/enter/${data.entranceCode}/pwd`);
-      openToast('SUCCESS', '공간 입장 링크가 복사되었습니다.');
+      const { spaces } = data;
+
+      if (spaces.length === 0) {
+        navigate('/host/manage/spaceCreate');
+        return;
+      }
+
+      const space = spaces[0];
+      navigate(`/host/manage/${space.id}`);
     },
-    onError: () => {
-      openToast('ERROR', '잠시 후 다시 시도해주세요.');
+  });
+
+  const { mutate: deleteSpace } = useMutation((spaceId: ID) => apiSpace.deleteSpace(spaceId), {
+    onSuccess: () => {
+      refetch();
+      closeModal();
+      openToast('SUCCESS', '공간이 삭제되었습니다.');
     },
   });
 
@@ -44,7 +61,18 @@ const useDashBoard = () => {
   };
 
   const onClickLinkButton = () => {
-    copyEntranceLink();
+    if (entranceCodeData) {
+      copyUrlToClipboard(`${location.origin}/enter/${entranceCodeData.entranceCode}/pwd`);
+      openToast('SUCCESS', '공간 입장 링크가 복사되었습니다.');
+      return;
+    }
+    openToast('ERROR', '다시 시도해주세요.');
+  };
+
+  const onClickDeleteSpace = () => {
+    openModal(
+      <SpaceDeleteModal text={`${spaceData?.name} 공간을 삭제합니다` || ''} onClick={() => deleteSpace(spaceId)} />
+    );
   };
 
   return {
@@ -54,6 +82,7 @@ const useDashBoard = () => {
     submissionData,
     onClickSlackButton,
     onClickLinkButton,
+    onClickDeleteSpace,
   };
 };
 
diff --git a/frontend/src/pages/host/Home/index.tsx b/frontend/src/pages/host/Home/index.tsx
index e3e6feca..ae4ad6e0 100644
--- a/frontend/src/pages/host/Home/index.tsx
+++ b/frontend/src/pages/host/Home/index.tsx
@@ -1,79 +1,20 @@
-import { css } from '@emotion/react';
-
 import GitHubLoginButton from '@/components/common/GitHubLoginButton';
 
 import homeCover from '@/assets/homeCover.png';
+import homeCoverWebp from '@/assets/homeCover.webp';
 import logoTitle from '@/assets/logoTitle.png';
+import logoTitleWebp from '@/assets/logoTitle.webp';
 
-import theme from '@/styles/theme';
+import styles from './styles';
 
 const Home: React.FC = () => {
-  const isMobile = innerWidth < 600;
-
   return (
     <>
-      <div
-        id="헤더"
-        css={css`
-          display: flex;
-          align-items: center;
-          width: 100vw;
-          height: 84px;
-          padding: 0 48px;
-          font-size: 24px;
-          font-weight: 600;
-          background-color: ${theme.colors.skyblue200};
-          box-shadow: 0px 2px 1px 1px ${theme.colors.shadow20};
-
-          img {
-            margin-right: 10px;
-          }
-
-          span > b {
-            font-size: 16px;
-          }
-        `}
-      >
-        <img src={logoTitle} alt="" width={240} />
-        {!isMobile && (
-          <span>
-            <b>for</b> 공간 관리자
-          </span>
-        )}
+      <div css={styles.header}>
+        <img srcSet={`${logoTitleWebp}`} src={logoTitle} alt="공책" />
       </div>
-      <div
-        id="레이아웃"
-        css={css`
-          display: flex;
-          height: calc(100vh - 84px);
-          flex-direction: column;
-          align-items: center;
-
-          img {
-            margin-top: 32px;
-          }
-        `}
-      >
-        {isMobile && (
-          <div
-            css={css`
-              margin: 20px;
-              color: ${theme.colors.red};
-            `}
-          >
-            모바일에 최적화되어있지 않습니다. 데스크탑을 이용해주세요.
-          </div>
-        )}
-        <img src={homeCover} alt="" width={360} />
-        <span
-          css={css`
-            margin: 32px 0 62px 0;
-            color: ${theme.colors.gray800};
-            font-size: ${isMobile ? '16px' : '24px'};
-          `}
-        >
-          관리자 페이지 이용을 위해 로그인이 필요합니다.
-        </span>
+      <div css={styles.layout}>
+        <img srcSet={`${homeCoverWebp}`} src={homeCover} alt="함께 사용하는 우리의 공간 우리가 체크하자, 공책" />
         <GitHubLoginButton />
       </div>
     </>
diff --git a/frontend/src/pages/host/Home/styles.ts b/frontend/src/pages/host/Home/styles.ts
new file mode 100644
index 00000000..9be017a5
--- /dev/null
+++ b/frontend/src/pages/host/Home/styles.ts
@@ -0,0 +1,38 @@
+import { css } from '@emotion/react';
+
+import theme from '@/styles/theme';
+
+const header = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 64px;
+  background-color: ${theme.colors.white};
+  box-shadow: 0px 2px 2px 2px ${theme.colors.shadow20};
+
+  img {
+    height: 40px;
+    transform: translateY(4px);
+    aspect-ratio: auto 5 / 1;
+  }
+`;
+
+const layout = css`
+  display: flex;
+  padding: 48px 0 64px 0;
+  height: calc(100vh - 64px);
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+
+  img {
+    width: 80%;
+    max-width: 420px;
+    aspect-ratio: auto 1 / 1;
+  }
+`;
+
+const styles = { header, layout };
+
+export default styles;
diff --git a/frontend/src/pages/host/JobCreate/styles.ts b/frontend/src/pages/host/JobCreate/styles.ts
index 28af5b5e..5df11450 100644
--- a/frontend/src/pages/host/JobCreate/styles.ts
+++ b/frontend/src/pages/host/JobCreate/styles.ts
@@ -11,10 +11,10 @@ const layout = css`
 `;
 
 const contents = css`
-  width: 95%;
+  width: 100%;
   min-height: 100%;
   background-color: ${theme.colors.white};
-  min-width: 360px;
+  min-width: 356px;
 `;
 
 const grid = css`
@@ -33,7 +33,7 @@ const createCard = css`
   align-items: center;
   width: 100%;
   max-width: 480px;
-  height: 360px;
+  height: 356px;
   background-color: ${theme.colors.gray200};
   font-size: 64px;
   border-radius: 8px;
@@ -43,26 +43,6 @@ const createCard = css`
   }
 `;
 
-const createButton = css`
-  background-color: ${theme.colors.green};
-`;
-
-const jobNameInput = css`
-  border: none;
-  border-radius: 12px;
-  width: 50%;
-  height: 48px;
-  padding: 8px 16px;
-  font-size: 28px;
-  font-weight: 500;
-  margin: 12px 0;
-  background-color: ${theme.colors.shadow20};
-
-  :focus {
-    outline: 2px solid ${theme.colors.shadow30};
-  }
-`;
-
-const styles = { layout, contents, grid, createCard, createButton, jobNameInput };
+const styles = { layout, contents, grid, createCard };
 
 export default styles;
diff --git a/frontend/src/pages/host/JobUpdate/index.tsx b/frontend/src/pages/host/JobUpdate/index.tsx
index 37b44568..1aedf48e 100644
--- a/frontend/src/pages/host/JobUpdate/index.tsx
+++ b/frontend/src/pages/host/JobUpdate/index.tsx
@@ -3,8 +3,6 @@ import useJobUpdate from './useJobUpdate';
 import JobControl from '@/components/host/JobControl';
 import SectionCard from '@/components/host/SectionCard';
 
-import useSections from '@/hooks/useSections';
-
 import styles from './styles';
 
 const JobUpdate: React.FC = () => {
diff --git a/frontend/src/pages/host/JobUpdate/styles.ts b/frontend/src/pages/host/JobUpdate/styles.ts
index 28af5b5e..e77fdb68 100644
--- a/frontend/src/pages/host/JobUpdate/styles.ts
+++ b/frontend/src/pages/host/JobUpdate/styles.ts
@@ -14,7 +14,7 @@ const contents = css`
   width: 95%;
   min-height: 100%;
   background-color: ${theme.colors.white};
-  min-width: 360px;
+  min-width: 356px;
 `;
 
 const grid = css`
@@ -33,7 +33,7 @@ const createCard = css`
   align-items: center;
   width: 100%;
   max-width: 480px;
-  height: 360px;
+  height: 356px;
   background-color: ${theme.colors.gray200};
   font-size: 64px;
   border-radius: 8px;
@@ -43,26 +43,6 @@ const createCard = css`
   }
 `;
 
-const createButton = css`
-  background-color: ${theme.colors.green};
-`;
-
-const jobNameInput = css`
-  border: none;
-  border-radius: 12px;
-  width: 50%;
-  height: 48px;
-  padding: 8px 16px;
-  font-size: 28px;
-  font-weight: 500;
-  margin: 12px 0;
-  background-color: ${theme.colors.shadow20};
-
-  :focus {
-    outline: 2px solid ${theme.colors.shadow30};
-  }
-`;
-
-const styles = { layout, contents, grid, createCard, createButton, jobNameInput };
+const styles = { layout, contents, grid, createCard };
 
 export default styles;
diff --git a/frontend/src/pages/host/Landing/index.tsx b/frontend/src/pages/host/Landing/index.tsx
new file mode 100644
index 00000000..858e9ad2
--- /dev/null
+++ b/frontend/src/pages/host/Landing/index.tsx
@@ -0,0 +1,35 @@
+import React, { useRef } from 'react';
+
+import FloatingActionButton from '@/components/host/LandingView/FloatingActionButton';
+import HeroSection from '@/components/host/LandingView/HeroSection';
+import HostViewSection1 from '@/components/host/LandingView/HostViewSection1';
+import HostViewSection2 from '@/components/host/LandingView/HostViewSection2';
+import HostViewSection3 from '@/components/host/LandingView/HostViewSection3';
+import UserViewSection1 from '@/components/host/LandingView/UserViewSection1';
+import UserViewSection2 from '@/components/host/LandingView/UserViewSection2';
+import UserViewSection3 from '@/components/host/LandingView/UserViewSection3';
+
+import useResizeScreen from '@/hooks/useResizeScreen';
+
+import styles from './styles';
+
+const Landing: React.FC = () => {
+  const mainRef = useRef<HTMLDivElement>(null);
+
+  const { screenMode } = useResizeScreen();
+
+  return (
+    <div css={styles.layout} ref={mainRef}>
+      <HeroSection />
+      <UserViewSection1 screenMode={screenMode} />
+      <UserViewSection2 screenMode={screenMode} />
+      <UserViewSection3 screenMode={screenMode} />
+      <HostViewSection1 screenMode={screenMode} />
+      <HostViewSection2 screenMode={screenMode} />
+      <HostViewSection3 screenMode={screenMode} />
+      <FloatingActionButton mainRef={mainRef} />
+    </div>
+  );
+};
+
+export default Landing;
diff --git a/frontend/src/pages/host/Landing/styles.ts b/frontend/src/pages/host/Landing/styles.ts
new file mode 100644
index 00000000..e8f7e94f
--- /dev/null
+++ b/frontend/src/pages/host/Landing/styles.ts
@@ -0,0 +1,12 @@
+import { css } from '@emotion/react';
+
+import theme from '@/styles/theme';
+
+const layout = css`
+  width: 100vw;
+  background-color: ${theme.colors.background};
+`;
+
+const styles = { layout };
+
+export default styles;
diff --git a/frontend/src/pages/host/PasswordUpdate/index.tsx b/frontend/src/pages/host/PasswordUpdate/index.tsx
index d42fe01c..1cea1b2c 100644
--- a/frontend/src/pages/host/PasswordUpdate/index.tsx
+++ b/frontend/src/pages/host/PasswordUpdate/index.tsx
@@ -1,6 +1,7 @@
 import usePasswordUpdate from './usePasswordUpdate';
-import { FiEyeOff, FiEye } from 'react-icons/fi';
-import { RiLockPasswordLine } from 'react-icons/ri';
+import { FiEye } from '@react-icons/all-files/fi/FiEye';
+import { FiEyeOff } from '@react-icons/all-files/fi/FiEyeOff';
+import { RiLockPasswordLine } from '@react-icons/all-files/ri/RiLockPasswordLine';
 
 import Button from '@/components/common/Button';
 
diff --git a/frontend/src/pages/host/PasswordUpdate/styles.ts b/frontend/src/pages/host/PasswordUpdate/styles.ts
index cb069360..c18c3568 100644
--- a/frontend/src/pages/host/PasswordUpdate/styles.ts
+++ b/frontend/src/pages/host/PasswordUpdate/styles.ts
@@ -12,7 +12,7 @@ const layout = css`
 
   svg + span {
     color: ${theme.colors.shadow50};
-    font-size: 24px;
+    font-size: 16px;
     margin: 24px 0 32px 0;
   }
   svg {
@@ -28,12 +28,12 @@ const content = css`
 
 const inputWrapper = css`
   width: 280px;
-  height: 48px;
+  height: 36px;
   display: flex;
   justify-content: space-around;
   align-items: center;
   background-color: ${theme.colors.gray200};
-  border: 2px solid ${theme.colors.gray400};
+  border: 1px solid ${theme.colors.gray400};
   border-radius: 8px;
   padding: 0 12px;
 
@@ -43,7 +43,7 @@ const inputWrapper = css`
     background-color: ${theme.colors.gray200};
     border: none;
     outline: none;
-    font-size: 20px;
+    font-size: 16px;
     color: ${theme.colors.shadow80};
   }
 
@@ -60,6 +60,7 @@ const inputWrapper = css`
 const button = css`
   margin: 0 0 0 8px;
   width: auto;
+  height: 36px;
   padding: 0 16px;
 `;
 
diff --git a/frontend/src/pages/host/SpaceCreate/index.tsx b/frontend/src/pages/host/SpaceCreate/index.tsx
index e1e88296..6b0dceab 100644
--- a/frontend/src/pages/host/SpaceCreate/index.tsx
+++ b/frontend/src/pages/host/SpaceCreate/index.tsx
@@ -1,4 +1,4 @@
-import SpaceInfoCreateBox from '@/components/host/SpaceInfoCreateBox';
+import SpaceInfoCreateBox from '@/components/host/SpaceInfo/SpaceInfoCreateBox';
 
 import styles from './styles';
 
diff --git a/frontend/src/pages/host/SpaceCreate/styles.ts b/frontend/src/pages/host/SpaceCreate/styles.ts
index 917b604d..221dd35c 100644
--- a/frontend/src/pages/host/SpaceCreate/styles.ts
+++ b/frontend/src/pages/host/SpaceCreate/styles.ts
@@ -1,26 +1,16 @@
 import { css } from '@emotion/react';
 
 const layout = css`
-  width: 100%;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
-`;
-
-const contents = css`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-`;
 
-const text = css`
-  font-size: 2rem;
-  font-weight: bold;
-  margin: 0;
+  @media screen and (max-width: 1023px) {
+    height: calc(100vh - 64px);
+  }
 `;
 
-const styles = { layout, contents, text };
+const styles = { layout };
 
 export default styles;
diff --git a/frontend/src/pages/host/SpaceUpdate/index.tsx b/frontend/src/pages/host/SpaceUpdate/index.tsx
index 0b1953d5..aa2cfb4a 100644
--- a/frontend/src/pages/host/SpaceUpdate/index.tsx
+++ b/frontend/src/pages/host/SpaceUpdate/index.tsx
@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 import { useParams } from 'react-router-dom';
 
-import SpaceInfoUpdateBox from '@/components/host/SpaceInfoUpdateBox';
+import SpaceInfoUpdateBox from '@/components/host/SpaceInfo/SpaceInfoUpdateBox';
 
 import apiSpace from '@/apis/space';
 
diff --git a/frontend/src/pages/host/SpaceUpdate/styles.ts b/frontend/src/pages/host/SpaceUpdate/styles.ts
index a0f978eb..f52e239b 100644
--- a/frontend/src/pages/host/SpaceUpdate/styles.ts
+++ b/frontend/src/pages/host/SpaceUpdate/styles.ts
@@ -6,6 +6,10 @@ const layout = css`
   display: flex;
   justify-content: center;
   align-items: center;
+
+  @media screen and (max-width: 1023px) {
+    height: calc(100vh - 64px);
+  }
 `;
 
 const styles = { layout };
diff --git a/frontend/src/pages/user/JobList/index.tsx b/frontend/src/pages/user/JobList/index.tsx
index 558fa219..12fb8476 100644
--- a/frontend/src/pages/user/JobList/index.tsx
+++ b/frontend/src/pages/user/JobList/index.tsx
@@ -1,8 +1,10 @@
 import useJobList from './useJobList';
-import { IoIosArrowBack } from 'react-icons/io';
+import { IoIosArrowBack } from '@react-icons/all-files/io/IoIosArrowBack';
 
 import JobCard from '@/components/user/JobCard';
 
+import DEFAULT_IMAGE from '@/assets/defaultSpaceImage.webp';
+
 import styles from './styles';
 
 const JobList: React.FC = () => {
@@ -10,11 +12,10 @@ const JobList: React.FC = () => {
 
   return (
     <div css={styles.layout}>
-      <div css={styles.cover(spaceData?.imageUrl)}>
-        <IoIosArrowBack css={styles.arrow} size={40} onClick={goPreviousPage} />
+      <div css={styles.cover(spaceData?.imageUrl || DEFAULT_IMAGE)}>
+        <IoIosArrowBack css={styles.arrow} size={30} onClick={goPreviousPage} />
         <span css={styles.coverText}>{spaceData?.name}</span>
       </div>
-      <span css={styles.text}>체크하실 업무를 선택해주세요.</span>
       {jobsData?.jobs.length === 0 ? (
         <div css={styles.empty}>관리자가 생성한 업무가 없어요</div>
       ) : (
diff --git a/frontend/src/pages/user/JobList/styles.ts b/frontend/src/pages/user/JobList/styles.ts
index 90b1afaa..6ccf5d8a 100644
--- a/frontend/src/pages/user/JobList/styles.ts
+++ b/frontend/src/pages/user/JobList/styles.ts
@@ -26,6 +26,7 @@ const coverText = css`
   text-shadow: 0 0 4px ${theme.colors.black};
   background-image: linear-gradient(transparent 90%, ${theme.colors.primary} 10%);
   width: fit-content;
+  margin-left: 16px;
 `;
 
 const text = css`
diff --git a/frontend/src/pages/user/Password/index.tsx b/frontend/src/pages/user/Password/index.tsx
index d2ef3907..08dfa017 100644
--- a/frontend/src/pages/user/Password/index.tsx
+++ b/frontend/src/pages/user/Password/index.tsx
@@ -3,6 +3,7 @@ import usePassword from './usePassword';
 import Button from '@/components/common/Button';
 
 import homeCover from '@/assets/homeCover.png';
+import homeCoverWebp from '@/assets/homeCover.webp';
 
 import styles from './styles';
 
@@ -12,7 +13,7 @@ const Password: React.FC = () => {
   return (
     <div css={styles.layout}>
       <div css={styles.homeCoverImage}>
-        <img src={homeCover} alt="공책" />
+        <img srcSet={`${homeCoverWebp}`} src={homeCover} alt="공책" />
       </div>
       <div css={styles.textWrapper}>
         <p>비밀번호를 입력해주세요.</p>
@@ -26,6 +27,7 @@ const Password: React.FC = () => {
         <input
           type="password"
           name="password"
+          autoComplete="off"
           onChange={onChangeInput}
           placeholder="비밀번호를 입력해주세요."
           required
diff --git a/frontend/src/pages/user/Password/styles.ts b/frontend/src/pages/user/Password/styles.ts
index 92a4dc0e..b9d2fb29 100644
--- a/frontend/src/pages/user/Password/styles.ts
+++ b/frontend/src/pages/user/Password/styles.ts
@@ -21,6 +21,7 @@ const homeCoverImage = css`
 
   img {
     width: 22em;
+    aspect-ratio: auto 1 / 1;
   }
 `;
 
diff --git a/frontend/src/pages/user/SpaceList/index.tsx b/frontend/src/pages/user/SpaceList/index.tsx
index d23a4e3c..23deeb6c 100644
--- a/frontend/src/pages/user/SpaceList/index.tsx
+++ b/frontend/src/pages/user/SpaceList/index.tsx
@@ -4,7 +4,9 @@ import SpaceCard from '@/components/user/SpaceCard';
 
 import apis from '@/apis';
 
+import DEFAULT_IMAGE from '@/assets/defaultSpaceImage.webp';
 import logo from '@/assets/logoTitle.png';
+import logoWebp from '@/assets/logoTitle.webp';
 
 import styles from './styles';
 
@@ -13,13 +15,13 @@ const SpaceList: React.FC = () => {
 
   return (
     <div css={styles.layout}>
-      <img css={styles.logo} src={logo} alt="공간 체크" />
-      <span css={styles.text}>사용하실 공간을 선택해주세요.</span>
+      <img css={styles.logo} srcSet={`${logoWebp}`} src={logo} alt="공간 체크" />
+      <span css={styles.text}>현재 머무르는 공간을 선택해주세요.</span>
       {spaceData?.spaces.length === 0 ? (
         <div css={styles.empty}>관리자가 생성한 공간 없어요</div>
       ) : (
         spaceData?.spaces.map(space => (
-          <SpaceCard spaceName={space.name} imageUrl={space.imageUrl} key={space.id} id={space.id} />
+          <SpaceCard spaceName={space.name} imageUrl={space.imageUrl || DEFAULT_IMAGE} key={space.id} id={space.id} />
         ))
       )}
       {}
diff --git a/frontend/src/pages/user/SpaceList/styles.ts b/frontend/src/pages/user/SpaceList/styles.ts
index 17747515..050b56e6 100644
--- a/frontend/src/pages/user/SpaceList/styles.ts
+++ b/frontend/src/pages/user/SpaceList/styles.ts
@@ -10,8 +10,9 @@ const layout = css`
 `;
 
 const logo = css`
-  width: 248px;
+  width: 264px;
   margin: 32px 0;
+  aspect-ratio: auto 5 / 1;
 `;
 
 const text = css`
diff --git a/frontend/src/pages/user/TaskList/index.tsx b/frontend/src/pages/user/TaskList/index.tsx
index 10efe0f6..645da54f 100644
--- a/frontend/src/pages/user/TaskList/index.tsx
+++ b/frontend/src/pages/user/TaskList/index.tsx
@@ -1,10 +1,12 @@
 import useTaskList from './useTaskList';
+import { IoIosArrowBack } from '@react-icons/all-files/io/IoIosArrowBack';
 import React from 'react';
-import { IoIosArrowBack } from 'react-icons/io';
 
 import Button from '@/components/common/Button';
-import SectionInfoPreview from '@/components/user/SectionInfoPreview';
-import TaskCard from '@/components/user/TaskCard';
+import Sticky from '@/components/common/Sticky';
+import SectionCard from '@/components/user/SectionCard';
+
+import DEFAULT_IMAGE from '@/assets/defaultSpaceImage.webp';
 
 import styles from './styles';
 
@@ -22,57 +24,43 @@ const TaskList: React.FC = () => {
     sectionsData,
     onClickSectionDetail,
     onClickSectionAllCheck,
-    progressBarRef,
-    isActiveSticky,
   } = useTaskList();
 
   return (
     <div css={styles.layout}>
       <div css={styles.header}>
-        <div css={styles.arrowBackIconWrapper}>
+        <div css={styles.arrowBackIcon}>
           <IoIosArrowBack size={30} onClick={goPreviousPage} />
         </div>
-        <div css={styles.thumbnail(spaceData?.imageUrl)} />
-        <div css={styles.infoWrapper}>
-          <p>{spaceData?.name}</p>
-          <p>{locationState?.jobName}</p>
+        <div css={styles.headerInfo}>
+          <div css={styles.thumbnail(spaceData?.imageUrl || DEFAULT_IMAGE)} />
+          <div css={styles.infoWrapper}>
+            <p>{spaceData?.name}</p>
+            <p>{locationState?.jobName}</p>
+          </div>
         </div>
       </div>
-      <div css={styles.progressBarWrapperSticky(isActiveSticky)} ref={progressBarRef}>
+      <Sticky defaultPosition={232}>
         <div css={styles.progressBarWrapper}>
           <div css={styles.progressBar(percent)} />
           <span css={styles.percentText}>{`${checkedCount}/${totalCount}`}</span>
         </div>
-      </div>
-      <div css={styles.contents}>
-        <form css={styles.form} onSubmit={onSubmit}>
-          {sectionsData?.sections.map(section => (
-            <section css={styles.location} key={section.id!}>
-              <div css={styles.locationHeader}>
-                <p css={styles.locationName}>{section.name}</p>
-                <div css={styles.locationHeaderRightItems}>
-                  {!sectionsAllCheckMap.get(`${section.id}`) && (
-                    <Button
-                      css={styles.sectionAllCheckButton}
-                      type="button"
-                      onClick={() => onClickSectionAllCheck(section.id!)}
-                    >
-                      ALL
-                    </Button>
-                  )}
-                  {(section.imageUrl || section.description) && (
-                    <SectionInfoPreview imageUrl={section.imageUrl} onClick={() => onClickSectionDetail(section)} />
-                  )}
-                </div>
-              </div>
-              <TaskCard tasks={section.tasks} />
-            </section>
-          ))}
-          <Button type="submit" css={styles.button(isAllChecked)} disabled={!isAllChecked}>
-            제출
-          </Button>
-        </form>
-      </div>
+      </Sticky>
+
+      <form css={styles.contents} onSubmit={onSubmit}>
+        {sectionsData?.sections.map(section => (
+          <SectionCard
+            key={section.id}
+            section={section}
+            sectionsAllCheckMap={sectionsAllCheckMap}
+            onClickSectionDetail={onClickSectionDetail}
+            onClickSectionAllCheck={onClickSectionAllCheck}
+          />
+        ))}
+        <Button type="submit" css={styles.button(isAllChecked)} disabled={!isAllChecked}>
+          제출
+        </Button>
+      </form>
     </div>
   );
 };
diff --git a/frontend/src/pages/user/TaskList/styles.ts b/frontend/src/pages/user/TaskList/styles.ts
index 5563dff7..df6acb1f 100644
--- a/frontend/src/pages/user/TaskList/styles.ts
+++ b/frontend/src/pages/user/TaskList/styles.ts
@@ -8,54 +8,36 @@ const layout = css`
   width: 100%;
   align-items: center;
   font-size: 16px;
-  padding: 0 0 32px 0;
+  padding-bottom: 32px;
 `;
 
 const contents = css`
   display: flex;
   flex-direction: column;
-  width: 100%;
+  width: 80%;
   align-items: center;
   margin-top: 16px;
 `;
 
-const location = css`
-  margin: 16px 0;
-  padding: 24px 16px;
-  border: 1px solid ${theme.colors.shadow30};
-  border-radius: 24px;
-  box-shadow: 2px 2px 2px 0px ${theme.colors.shadow30};
-`;
+const header = css`
+  position: relative;
+  width: 100%;
 
-const locationHeader = css`
   display: flex;
-  justify-content: space-between;
+  justify-content: space-evenly;
   align-items: center;
-  padding: 0 8px;
-  min-height: 48px;
-`;
-
-const locationName = css`
-  font-size: 24px;
-  font-weight: 600;
-  margin: 0;
-`;
-
-const locationHeaderRightItems = css`
-  display: flex;
-  gap: 10px;
+  padding: 4em 0 3em 0;
 `;
 
-const header = css`
-  position: relative;
+const headerInfo = css`
+  max-width: 420px;
   width: 100%;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
-  padding: 4em 0 3em 0;
 `;
 
-const thumbnail = (imageUrl: string | undefined) => css`
+const thumbnail = (imageUrl: string) => css`
   width: 120px;
   height: 120px;
   background-image: url(${imageUrl});
@@ -63,29 +45,30 @@ const thumbnail = (imageUrl: string | undefined) => css`
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 40%;
+  box-shadow: 2px 2px 6px 0px ${theme.colors.shadow60};
 `;
 
 const infoWrapper = css`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
   p {
     margin: 0;
   }
 
-  p:nth-of-type(1) {
-    font-weight: 500;
-    font-size: 1em;
-  }
-
   p:nth-of-type(2) {
-    font-size: 1.5em;
+    font-size: 1.8em;
     font-weight: bold;
-    margin-top: 0.5em;
+    margin-top: 0.3em;
   }
 `;
 
-const arrowBackIconWrapper = css`
+const arrowBackIcon = css`
   position: absolute;
-  top: 20px;
-  left: 20px;
+  top: 16px;
+  left: 16px;
 
   svg {
     color: ${theme.colors.black};
@@ -93,26 +76,13 @@ const arrowBackIconWrapper = css`
   }
 `;
 
-const progressBarWrapperSticky = (isSticked: boolean | undefined) => css`
-  position: sticky;
-  top: 0;
-  padding-top: 16px;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: ${theme.colors.white};
-  z-index: 1;
-
-  box-shadow: ${isSticked ? `2px 2px 2px 0px ${theme.colors.shadow30}` : ''};
-`;
-
 const progressBarWrapper = css`
+  background-color: ${theme.colors.white};
   box-shadow: 2px 2px 4px 0px ${theme.colors.shadow40};
   border: 1px solid ${theme.colors.green};
   border-radius: 4px;
   height: 30px;
+  max-width: 380px;
   width: 80%;
   position: relative;
   margin-bottom: 16px;
@@ -175,38 +145,18 @@ const button = (isAllChecked: boolean) =>
     background: ${isAllChecked ? theme.colors.primary : theme.colors.gray400};
   `;
 
-const form = css`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const sectionAllCheckButton = css`
-  width: 40px;
-  height: 40px;
-  margin: 0;
-  padding: 0;
-  box-shadow: 2px 2px 2px 0px ${theme.colors.shadow30};
-`;
-
 const styles = {
   layout,
-  contents,
-  location,
-  locationHeader,
-  locationName,
-  locationHeaderRightItems,
-  arrowBackIconWrapper,
   header,
+  headerInfo,
   thumbnail,
+  arrowBackIcon,
   infoWrapper,
-  progressBarWrapperSticky,
   progressBarWrapper,
   progressBar,
   percentText,
+  contents,
   button,
-  sectionAllCheckButton,
-  form,
 };
 
 export default styles;
diff --git a/frontend/src/pages/user/TaskList/useTaskList.tsx b/frontend/src/pages/user/TaskList/useTaskList.tsx
index 811ffccd..d6b2e791 100644
--- a/frontend/src/pages/user/TaskList/useTaskList.tsx
+++ b/frontend/src/pages/user/TaskList/useTaskList.tsx
@@ -1,13 +1,14 @@
 import { EventSourcePolyfill } from 'event-source-polyfill';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useMutation, useQuery } from 'react-query';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 
 import DetailInfoModal from '@/components/user/DetailInfoModal';
 import NameModal from '@/components/user/NameModal';
 
 import useGoPreviousPage from '@/hooks/useGoPreviousPage';
 import useModal from '@/hooks/useModal';
+import useScroll from '@/hooks/useScroll';
 import useSectionCheck from '@/hooks/useSectionCheck';
 import useToast from '@/hooks/useToast';
 
@@ -17,25 +18,18 @@ import { ID, SectionType } from '@/types';
 import { ApiTaskData } from '@/types/apis';
 
 const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:8080';
-const PROGRESS_BAR_DEFAULT_POSITION = 232;
 
 const useTaskList = () => {
-  const navigate = useNavigate();
-
-  const { spaceId, jobId, hostId } = useParams() as { spaceId: ID; jobId: ID; hostId: ID };
+  const { spaceId, jobId } = useParams() as { spaceId: ID; jobId: ID };
 
   const location = useLocation();
   const locationState = location.state as { jobName: string };
 
-  const { openModal } = useModal();
+  const { openModal, closeModal } = useModal();
   const { openToast } = useToast();
 
   const { goPreviousPage } = useGoPreviousPage();
 
-  const progressBarRef = useRef<HTMLDivElement>(null);
-
-  const [isActiveSticky, setIsActiveSticky] = useState(false);
-
   const [sectionsData, setSectionsData] = useState<ApiTaskData>({
     sections: [
       {
@@ -77,12 +71,6 @@ const useTaskList = () => {
     postSectionAllCheck(sectionId);
   };
 
-  useEffect(() => {
-    const isActive = progressBarRef.current?.offsetTop! > PROGRESS_BAR_DEFAULT_POSITION;
-
-    setIsActiveSticky(isActive);
-  }, [progressBarRef.current?.offsetTop]);
-
   useEffect(() => {
     const tokenKey = sessionStorage.getItem('tokenKey');
     if (!tokenKey) return;
@@ -106,9 +94,12 @@ const useTaskList = () => {
     });
 
     sse.addEventListener('submit', () => {
-      navigate(`/enter/${hostId}/spaces/${spaceId}`);
+      closeModal();
       openToast('SUCCESS', '해당 체크리스트는 제출되었습니다.');
+      goPreviousPage();
     });
+
+    return () => sse.close();
   }, []);
 
   return {
@@ -124,8 +115,6 @@ const useTaskList = () => {
     sectionsData,
     onClickSectionDetail,
     onClickSectionAllCheck,
-    progressBarRef,
-    isActiveSticky,
   };
 };
 
diff --git a/frontend/src/styles/animation.ts b/frontend/src/styles/animation.ts
index 08e8e88b..3cc404ea 100644
--- a/frontend/src/styles/animation.ts
+++ b/frontend/src/styles/animation.ts
@@ -78,6 +78,28 @@ const moveUp = keyframes`
   }
 `;
 
+const scaleUp = keyframes`
+  from {
+    transform: scale(0.7);
+  }
+  to {
+    transform: scale(1);
+  }
+`;
+
+const scaleDown = keyframes`
+  from {
+    opacity: 1;
+    transform: scale(1);
+    
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.7);
+    
+  }
+`;
+
 const customMoveUp = (y: string) => keyframes`
   0% {
     opacity: 0;
@@ -136,6 +158,24 @@ const wave = keyframes`
     transform: skew(2deg, 2deg);
   }`;
 
+const navigatorOpen = keyframes`
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0)
+  }
+`;
+
+const navigatorClose = keyframes`
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%)
+  }
+`;
+
 const animation = {
   fadeIn,
   fadeOut,
@@ -149,6 +189,10 @@ const animation = {
   moveRight,
   moveLeft,
   wave,
+  scaleUp,
+  scaleDown,
+  navigatorOpen,
+  navigatorClose,
 };
 
 export default animation;
diff --git a/frontend/src/styles/global.ts b/frontend/src/styles/global.ts
index b8aa8afa..9e24784f 100644
--- a/frontend/src/styles/global.ts
+++ b/frontend/src/styles/global.ts
@@ -7,11 +7,12 @@ const globalStyle = css`
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
     font-weight: 0;
     font-style: normal;
+    font-display: swap;
   }
 
   * {
     box-sizing: border-box;
-    font-family: '지마켓';
+    font-family: '지마켓', 'Noto Sans Korean', 'Roboto';
   }
 
   a {
@@ -19,14 +20,8 @@ const globalStyle = css`
     color: ${theme.colors.black};
   }
 
-  // 모달이 웹에서도 모바일 환경 처럼 보일 수 있도록 center 처리
   body {
     margin: 0;
-    display: flex;
-    justify-content: center;
-    overflow: scroll;
-    overflow-x: hidden;
-    background-color: ${theme.colors.background};
   }
 
   button {
@@ -39,7 +34,7 @@ const globalStyle = css`
     justify-content: center;
     width: 100vw;
     min-height: 100vh;
-    background-color: ${theme.colors.gray350};
+    background-color: ${theme.colors.white};
   }
 
   #modal {
diff --git a/frontend/src/styles/transitions.ts b/frontend/src/styles/transitions.ts
index 42ccd8af..6a80c2b6 100644
--- a/frontend/src/styles/transitions.ts
+++ b/frontend/src/styles/transitions.ts
@@ -1,8 +1,9 @@
 import { css } from '@emotion/react';
 
+import animation from '@/styles/animation';
+
 const transitions = css`
   .transitions-group {
-    max-width: 414px;
     width: 100vw;
     overflow-x: hidden;
     position: relative;
@@ -62,45 +63,53 @@ const transitions = css`
   // right
   .right-enter {
     z-index: 1;
-    transform: translate3d(100%, 0, 0);
+    transform: translateX(100%);
   }
   .right-enter.right-enter-active {
     z-index: 1;
-    transform: translate3d(0, 0, 0);
-    transition: all 500ms;
+    transform: translateX(0);
+    transition: transform 600ms;
   }
-
   .right-exit {
-    z-index: 1;
-    transform: translate3d(0, 0, 0);
-  }
-
-  .right-exit.right-exit-active {
-    z-index: 1;
-    transform: translate3d(0, 0, 0);
-    transition: all 700ms;
+    z-index: 0;
+    transform: translateX(0);
+    transition: transform 600ms;
   }
 
   // left
   .left-enter {
+    z-index: 0;
+    transform: translateX(0);
+    transition: transform 600ms;
+  }
+  .left-exit {
     z-index: 1;
-    transform: translate3d(0, 0, 0);
+    transform: translateX(0);
   }
-  .left-enter.left-enter-active {
+  .left-exit.left-exit-active {
     z-index: 1;
-    transform: translate3d(0, 0, 0);
-    transition: all 500ms;
+    transform: translateX(100%);
+    transition: transform 600ms;
   }
 
-  .left-exit {
+  // image scale up
+  .image-scale-up-enter.image-scale-up-enter-active {
     z-index: 1;
-    transform: translate3d(0, 0, 0);
+    animation: ${animation.scaleUp} 500ms;
   }
 
-  .left-exit.left-exit-active {
+  .image-scale-down-exit {
+    z-index: 0;
+  }
+
+  // image scale down
+  .image-scale-up-enter {
+    z-index: 0;
+  }
+
+  .image-scale-down-exit.image-scale-down-exit-active {
     z-index: 1;
-    transform: translate3d(100%, 0, 0);
-    transition: all 700ms;
+    animation: ${animation.scaleDown} 500ms;
   }
 `;
 
diff --git a/frontend/src/types/global.d.ts b/frontend/src/types/global.d.ts
index da7fb7f6..f3cc6b14 100644
--- a/frontend/src/types/global.d.ts
+++ b/frontend/src/types/global.d.ts
@@ -3,3 +3,4 @@ declare module '*.jpg';
 declare module '*.jpeg';
 declare module '*.svg';
 declare module '*.gif';
+declare module '*.webp';
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 712cca9f..53ab3ca3 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -26,3 +26,23 @@ export type TaskType = {
   description: string;
   imageUrl: string;
 };
+
+export type ScreenModeType = 'DESKTOP' | 'MOBILE';
+
+type ImagePathType = string;
+
+export type UserImageType = {
+  '160w': ImagePathType;
+  '240w': ImagePathType;
+  '320w': ImagePathType;
+  '480w': ImagePathType;
+  fallback: ImagePathType;
+};
+
+export type HostImageType = {
+  '280w': ImagePathType;
+  '360w': ImagePathType;
+  '540w': ImagePathType;
+  '800w': ImagePathType;
+  fallback: ImagePathType;
+};
diff --git a/frontend/src/utils/copyUrlToClipboard.ts b/frontend/src/utils/copyUrlToClipboard.ts
new file mode 100644
index 00000000..629576bd
--- /dev/null
+++ b/frontend/src/utils/copyUrlToClipboard.ts
@@ -0,0 +1,17 @@
+const urlToClipboard = (url: string): void => {
+  if (isSecureContext && navigator.clipboard) {
+    navigator.clipboard.writeText(url);
+    return;
+  }
+
+  const textarea = document.createElement('textarea');
+  textarea.value = url;
+  textarea.style.opacity = '0';
+  document.body.appendChild(textarea);
+  textarea.select();
+  textarea.setSelectionRange(0, textarea.value.length);
+  document.execCommand('copy');
+  document.body.removeChild(textarea);
+};
+
+export default urlToClipboard;
diff --git a/frontend/src/utils/disableReactDevTools.ts b/frontend/src/utils/disableReactDevTools.ts
new file mode 100644
index 00000000..adc0e9dc
--- /dev/null
+++ b/frontend/src/utils/disableReactDevTools.ts
@@ -0,0 +1,20 @@
+declare global {
+  interface Window {
+    __REACT_DEVTOOLS_GLOBAL_HOOK__: any;
+  }
+}
+
+export function disableReactDevTools() {
+  if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'object') {
+    return;
+  }
+
+  for (const prop in window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
+    if (prop === 'renderers') {
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__[prop] = new Map();
+    } else {
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__[prop] =
+        typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__[prop] === 'function' ? () => {} : null;
+    }
+  }
+}
diff --git a/frontend/src/utils/isNull.ts b/frontend/src/utils/isNull.ts
new file mode 100644
index 00000000..5ab457be
--- /dev/null
+++ b/frontend/src/utils/isNull.ts
@@ -0,0 +1,5 @@
+const isNull = (target: any) => {
+  return target === null;
+};
+
+export default isNull;
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index a12e0411..72b0a4f0 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -4,7 +4,7 @@
     "composite": true,
     "jsx": "react-jsx",
     "jsxImportSource": "@emotion/react",
-    "module": "commonjs",
+    "module": "es6",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "allowJs": true,
diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js
new file mode 100644
index 00000000..2090bcff
--- /dev/null
+++ b/frontend/webpack.common.js
@@ -0,0 +1,40 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: './src/index.tsx',
+  resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js', '...'] },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: 'public/index.html',
+      favicon: 'src/assets/favicon.png',
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx|js|jsx)?$/,
+        exclude: ['/node_modules/'],
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|webp)$/,
+        exclude: ['/node_modules/'],
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: 'assets/images/[name].[ext]',
+          },
+        },
+      },
+      {
+        test: /\.(eot|ttf|woff|woff2)$/i,
+        loader: 'url-loader',
+        options: {
+          name: 'assets/fonts/[name].[ext]',
+        },
+      },
+    ],
+  },
+};
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
deleted file mode 100644
index 439f5361..00000000
--- a/frontend/webpack.config.js
+++ /dev/null
@@ -1,75 +0,0 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const Dotenv = require('dotenv-webpack');
-
-const config = {
-  entry: './src/index.tsx',
-  output: {
-    publicPath: '/',
-    path: path.resolve(__dirname, 'dist'),
-    filename: 'bundle.[chunkhash].js',
-  },
-  devServer: {
-    port: 3000,
-    open: true,
-    hot: true,
-    historyApiFallback: true,
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: 'public/index.html',
-      favicon: 'src/assets/favicon.png',
-    }),
-    new CleanWebpackPlugin({
-      cleanAfterEveryBuildPatterns: ['dist'],
-    }),
-    new Dotenv({
-      path: path.resolve(
-        process.env.NODE_ENV === 'production'
-          ? `./frontend-security/.env.production`
-          : process.env.NODE_ENV === 'staging'
-          ? `./frontend-security/.env.staging`
-          : `./frontend-security/.env.development`
-      ),
-    }),
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.(ts|tsx)?$/,
-        exclude: ['/node_modules/'],
-        use: {
-          loader: 'babel-loader',
-        },
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg)$/,
-        use: {
-          loader: 'file-loader',
-          options: {
-            name: '[path]/[name].[ext]',
-          },
-        },
-      },
-    ],
-  },
-  resolve: {
-    extensions: ['.tsx', '.ts', '.jsx', '.js', '...'],
-  },
-};
-
-module.exports = env => {
-  switch (process.env.NODE_ENV) {
-    case 'production':
-      config.mode = 'production';
-      break;
-    case 'staging':
-      config.mode = 'production';
-      break;
-    default:
-      config.mode = 'development';
-      break;
-  }
-  return config;
-};
diff --git a/frontend/webpack.dev.js b/frontend/webpack.dev.js
new file mode 100644
index 00000000..6baa2a69
--- /dev/null
+++ b/frontend/webpack.dev.js
@@ -0,0 +1,26 @@
+const path = require('path');
+const common = require('./webpack.common');
+const { merge } = require('webpack-merge');
+const Dotenv = require('dotenv-webpack');
+
+module.exports = merge(common, {
+  mode: 'development',
+  output: {
+    publicPath: '/',
+    filename: 'js/bundle.js',
+    path: path.join(__dirname, '/dist'),
+    clean: true,
+  },
+  devtool: 'source-map',
+  devServer: {
+    port: 3000,
+    open: true,
+    hot: true,
+    historyApiFallback: true,
+  },
+  plugins: [
+    new Dotenv({
+      path: path.resolve('./frontend-security/.env.development'),
+    }),
+  ],
+});
diff --git a/frontend/webpack.prod.js b/frontend/webpack.prod.js
new file mode 100644
index 00000000..9af4a04a
--- /dev/null
+++ b/frontend/webpack.prod.js
@@ -0,0 +1,31 @@
+const path = require('path');
+const common = require('./webpack.common');
+const { merge } = require('webpack-merge');
+const Dotenv = require('dotenv-webpack');
+const CompressionPlugin = require('compression-webpack-plugin');
+
+module.exports = merge(common, {
+  mode: 'production',
+  output: {
+    publicPath: '/',
+    filename: 'js/[name].[chunkhash].js',
+    path: path.join(__dirname, '/dist'),
+    clean: true,
+  },
+  devtool: false,
+  plugins: [
+    new Dotenv({
+      path: path.resolve(
+        process.env.NODE_ENV === 'production'
+          ? './frontend-security/.env.production'
+          : './frontend-security/.env.staging'
+      ),
+    }),
+    new CompressionPlugin({
+      algorithm: 'gzip',
+      test: /\.js$|\.css$/,
+      threshold: 10240,
+      minRatio: 0.8,
+    }),
+  ],
+});