diff --git a/src/App.tsx b/src/App.tsx
index 96fa1cde..fd3ad3b7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,7 @@ import HomePage from './pages/HomePage';
 import CommunityPage from './pages/CommunityPage';
 import ChatPage from './pages/chatting/index';
 import MyPage from './pages/MyPage';
+import styled from 'styled-components';
 
 function App() {
   return (
@@ -14,16 +15,32 @@ function App() {
       <BrowserRouter>
         <div className="App" style={{display: 'flex'}}>
           <NavigationBar></NavigationBar>
-          <Routes>
-            <Route path="/" element={<HomePage/>} /> 
-            <Route path="/community" element={<CommunityPage/>} /> 
-            <Route path="/chat" element={<ChatPage/>} /> 
-            <Route path="/mypage" element={<MyPage/>} /> 
-          </Routes>
+          <PageWrap>
+            <Routes>
+              <Route path="/" element={<HomePage/>} /> 
+              <Route path="/community" element={<CommunityPage/>} /> 
+              <Route path="/chat" element={<ChatPage/>} /> 
+              <Route path="/mypage" element={<MyPage/>} /> 
+            </Routes>
+          </PageWrap>
         </div>
       </BrowserRouter>  
     </ThemeProvider>
   );
 }
 
+const PageWrap = styled.div`
+  flex: 1; 
+  margin-left: 300px;
+
+  ${props => props.theme.response.tablet} {
+    margin-left: 100px;
+  }
+
+  ${props => props.theme.response.mobile} {
+    margin-left: 0;
+    margin-bottom: 120px;
+  }
+`;
+
 export default App;
diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx
index 370c5731..2b283ab1 100644
--- a/src/components/NavigationBar.tsx
+++ b/src/components/NavigationBar.tsx
@@ -178,12 +178,14 @@ export default function NavigationBar() {
 const NavigationWrap = styled.div`
   border-right: 1px solid ${props => props.theme.color.borderGray};
   background: ${props => props.theme.color.white};
+  position: fixed;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   width: 300px;
   height: 100vh;
+  z-index: 9999;
 
   ${props => props.theme.response.tablet} {
     width: 100px;
@@ -194,7 +196,7 @@ const NavigationWrap = styled.div`
     border-right: none;
     width: 100%;
     height: auto; 
-    position: absolute;
+    position: fixed;
     bottom: 0;
   }
 `;