diff --git a/frontend/src/components/client/ClientView.tsx b/frontend/src/components/client/ClientView.tsx
index 43eb60ab..89a31ff0 100644
--- a/frontend/src/components/client/ClientView.tsx
+++ b/frontend/src/components/client/ClientView.tsx
@@ -18,6 +18,9 @@ const ClientView = () => {
 export default ClientView;
 
 const ClientViewContainer = styled.main`
-  padding: 0 24px;
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 60px;
   background-color: ${({ theme }) => theme.tokenColors['surface-default']};
+  scrollbar-width: none;
 `;
diff --git a/frontend/src/components/client/Header.tsx b/frontend/src/components/client/Header.tsx
index 292b7917..63b95415 100644
--- a/frontend/src/components/client/Header.tsx
+++ b/frontend/src/components/client/Header.tsx
@@ -7,8 +7,10 @@ const Header = () => {
 export default Header;
 
 const HeaderContainer = styled.div`
-  display: flex;
+  width: 100%;
   height: 60px;
-  padding: 0 60px;
+  position: fixed;
+  display: flex;
   background-color: ${({ theme }) => theme.tokenColors['surface-default']};
+  z-index: 11000;
 `;
diff --git a/frontend/src/components/client/Player.tsx b/frontend/src/components/client/Player.tsx
index d23d7003..a0c6082f 100644
--- a/frontend/src/components/client/Player.tsx
+++ b/frontend/src/components/client/Player.tsx
@@ -7,7 +7,7 @@ import CustomPlayIcon from '@assets/custom_play_icon.svg';
 import PauseIcon from '@assets/icons/pause_icon.svg';
 import PlayIcon from '@assets/icons/play_icon.svg';
 
-const Player = ({ videoUrl }: { videoUrl: string; }) => {
+const Player = ({ videoUrl }: { videoUrl: string }) => {
   const [onHLSReady, setOnHLSReady] = useState(false);
   const [isPaused, setIsPaused] = useState(false);
   const [showIcon, setShowIcon] = useState(false);
diff --git a/frontend/src/components/host/Header.tsx b/frontend/src/components/host/Header.tsx
index b0c74772..36f417b1 100644
--- a/frontend/src/components/host/Header.tsx
+++ b/frontend/src/components/host/Header.tsx
@@ -9,8 +9,11 @@ export default function Header() {
 }
 
 const Container = styled.header`
+  width: 100%;
+  height: 60px;
+  position: fixed;
   background-color: #222222;
-  padding: 10px 20px;
   color: #fff;
   font-weight: bold;
+  z-index: 11000;
 `;
diff --git a/frontend/src/components/host/Setting.tsx b/frontend/src/components/host/Setting.tsx
index 5b5a8ec4..12a3c035 100644
--- a/frontend/src/components/host/Setting.tsx
+++ b/frontend/src/components/host/Setting.tsx
@@ -18,5 +18,6 @@ export default function Setting() {
 }
 
 const Container = styled.main`
-  flex: 7;
+  flex: 1;
+  overflow-y: auto;
 `;
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 8d916395..983a2933 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -17,6 +17,7 @@ body,
 #root {
   height: 100%;
   margin: 0;
+  background-color: #141517;
 }
 
 body {
diff --git a/frontend/src/pages/ClientPage.tsx b/frontend/src/pages/ClientPage.tsx
index 6619315f..9a9b34f8 100644
--- a/frontend/src/pages/ClientPage.tsx
+++ b/frontend/src/pages/ClientPage.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
-import { Chat, ClientView, Header } from '@components/client';
+import { ClientView, Header } from '@components/client';
+import { ChatRoom } from '@components/chat';
 
 export default function ClientPage() {
   return (
@@ -8,14 +9,16 @@ export default function ClientPage() {
       <Header />
       <ClientContainer>
         <ClientView />
-        <Chat />
+        <ChatRoom />
       </ClientContainer>
     </>
   );
 }
 
 const ClientContainer = styled.div`
+  box-sizing: border-box;
+  padding: 60px 10px 0 10px;
+  height: 100%;
   display: flex;
-  justify-content: center;
-  background-color: ${({ theme }) => theme.tokenColors['surface-default']};
+  background-color: ${({ theme }) => theme.tokenColors['susrface-default']};
 `;
diff --git a/frontend/src/pages/HostPage.tsx b/frontend/src/pages/HostPage.tsx
index ddbb2c02..643d2628 100644
--- a/frontend/src/pages/HostPage.tsx
+++ b/frontend/src/pages/HostPage.tsx
@@ -1,4 +1,5 @@
-import { Setting, Chat, Header } from '@components/host';
+import { ChatRoom } from '@components/chat';
+import { Setting, Header } from '@components/host';
 import styled from 'styled-components';
 
 export default function HostPage() {
@@ -7,12 +8,15 @@ export default function HostPage() {
       <Header />
       <FlexContainer>
         <Setting />
-        <Chat />
+        <ChatRoom />
       </FlexContainer>
     </>
   );
 }
 
 const FlexContainer = styled.div`
+  box-sizing: border-box;
+  height: 100%;
   display: flex;
+  padding-top: 60px;
 `;