diff --git a/src/GlobalStyle.jsx b/src/GlobalStyle.jsx
index 08c2a4d..259e05e 100644
--- a/src/GlobalStyle.jsx
+++ b/src/GlobalStyle.jsx
@@ -1,6 +1,88 @@
 import { createGlobalStyle } from 'styled-components';
 
 const GlobalStyle = createGlobalStyle`
+  /* http://meyerweb.com/eric/tools/css/reset/ 
+  v2.0 | 20110126
+  License: none (public domain)
+  */
+
+  * {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+
+  /* HTML5 display-role reset for older browsers */
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  section {
+    display: block;
+  }
+
+  body {
+    line-height: 1;
+  }
+
+  ol,
+  ul {
+    list-style: none;
+  }
+
+  blockquote,
+  q {
+    quotes: none;
+  }
+
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: '';
+    content: none;
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  a {
+    text-decoration: none;
+    color: #000;
+  }
+
+  .txt-hide {
+    position: absolute;
+    overflow: hidden;
+    clip-path: inset(50%);
+    width: 1px;
+    height: 1px;
+  }
+
+  img {
+    vertical-align: top;
+  }
+
+  button {
+    background: none;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+  }
+
   .a11y-hidden {
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(50%);
@@ -116,89 +198,6 @@ const GlobalStyle = createGlobalStyle`
   strong {
     font-weight: bold;
   }
-  
-  /* http://meyerweb.com/eric/tools/css/reset/ 
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-  * {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
-    font: inherit;
-    vertical-align: baseline;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-
-  /* HTML5 display-role reset for older browsers */
-  article,
-  aside,
-  details,
-  figcaption,
-  figure,
-  footer,
-  header,
-  hgroup,
-  menu,
-  nav,
-  section {
-    display: block;
-  }
-
-  body {
-    line-height: 1;
-  }
-
-  ol,
-  ul {
-    list-style: none;
-  }
-
-  blockquote,
-  q {
-    quotes: none;
-  }
-
-  blockquote:before,
-  blockquote:after,
-  q:before,
-  q:after {
-    content: '';
-    content: none;
-  }
-
-  table {
-    border-collapse: collapse;
-    border-spacing: 0;
-  }
-
-  a {
-    text-decoration: none;
-    color: #000;
-  }
-
-  .txt-hide {
-    position: absolute;
-    overflow: hidden;
-    clip-path: inset(50%);
-    width: 1px;
-    height: 1px;
-  }
-
-  img {
-    vertical-align: top;
-  }
-
-  button {
-    background: none;
-    font: inherit;
-    color: inherit;
-    cursor: pointer;
-  }
-
 `
 
 export default GlobalStyle;
diff --git a/src/components/organisms/Header/Hamburger.jsx b/src/components/organisms/Header/Hamburger.jsx
index fcb4fe6..cdf9d73 100644
--- a/src/components/organisms/Header/Hamburger.jsx
+++ b/src/components/organisms/Header/Hamburger.jsx
@@ -1,16 +1,88 @@
 import React from 'react'
+import styled from 'styled-components'
+
+const DivHamburger = styled.div`
+  #hamburger {
+    width: 40px;
+    height: 40px;
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+
+  #hamburger div {
+    width: 100%;
+    height: 2px;
+    border-radius: 4px;
+    background-color: var(--icon);
+    transition: all 0.3s;
+  }
+  /* hover */
+  #hamburger:hover div:first-child{
+    transform: rotate(45deg);
+  }
+
+  #hamburger:hover div:nth-child(2){
+    transform: translate(-1em);
+  }
+
+  #hamburger:hover div:nth-child(3){
+    transform: rotate(-45deg);
+  }
+  /* active */
+  #hamburger:active div:first-child{
+    transform: translate(0.5em) rotate(45deg) ;
+  }
+
+  #hamburger:active div:nth-child(2){
+    transform: translate(-0.5em) ;
+  }
+
+  #hamburger:active div:nth-child(3){
+    transform: translate(0.5em) rotate(-45deg) ;
+  }
+
+  /* opened */
+  /* opened:hover */
+  #hamburger.opened:hover div:first-child{
+    transform: translate(-1em) rotate(-45deg) ;
+  }
+
+  #hamburger.opened:hover div:nth-child(2){
+    transform: translate(0) ;
+  }
+
+  #hamburger.opened:hover div:nth-child(3){
+    transform: translate(-1em) rotate(45deg) ;
+  }
+  /* opened:active */
+  #hamburger.opened:active div:first-child{
+    transform: translate(-1.5em) rotate(-45deg) ;
+  }
+
+  #hamburger.opened:active div:nth-child(2){
+    transform: translate(-0.5em) ;
+  }
+
+  #hamburger.opened:active div:nth-child(3){
+    transform: translate(-1.5em) rotate(45deg) ;
+  }
+`
 
 export default function Hamburger({ isMenuOpen, handleMenu }) {
   return (
-    <button 
-    type="button" 
-    id="hamburger" 
-    className={`menu-btn 
-    ${isMenuOpen ? 'opened' : ''}`} 
-    onClick={handleMenu}>
-        <div></div>
-        <div></div>
-        <div></div>
-    </button>
+    <DivHamburger>
+      <button 
+      type="button" 
+      id="hamburger" 
+      className={`menu-btn 
+      ${isMenuOpen ? 'opened' : ''}`} 
+      onClick={handleMenu}>
+          <div></div>
+          <div></div>
+          <div></div>
+      </button>
+    </DivHamburger>
   )
 }
diff --git a/src/components/organisms/Header/Header.jsx b/src/components/organisms/Header/Header.jsx
index 49d27f7..c69c78a 100644
--- a/src/components/organisms/Header/Header.jsx
+++ b/src/components/organisms/Header/Header.jsx
@@ -1,7 +1,6 @@
 import { useAuthContext } from "../../../hooks/useAuthContext";
 import { useLogout } from "../../../hooks/useLogout"
 import { Link, useLocation } from "react-router-dom";
-import logoSm from "../../../images/당장복습헤_logo @4x.png";
 import iconLogout from "../../../images/icon/icon-logout.svg";
 import iconLogin from "../../../images/icon/icon-login.svg";
 import iconJoin from "../../../images/icon/icon-join.svg";
@@ -25,7 +24,7 @@ function Header ({ isMenuOpen, setIsMenuOpen }) {
                     <h1>
                         <p className="a11y-hidden">당장복습헤_logo</p>
                         <Link href="./">
-                            <img src={logoSm} alt="당장복습헤 로고" className="logo-sm" />
+                            <div alt="당장복습헤 로고" className="logo-sm" />
                         </Link>
                     </h1>
                 </div>
diff --git a/src/components/organisms/Header/Header.style.jsx b/src/components/organisms/Header/Header.style.jsx
index 3d0cfcc..4c10e0c 100644
--- a/src/components/organisms/Header/Header.style.jsx
+++ b/src/components/organisms/Header/Header.style.jsx
@@ -1,4 +1,6 @@
 import styled from "styled-components";
+import logoSm from "../../../images/당장복습헤_logo 1.png";
+import logoXs from "../../../images/logo-xs.png";
 
 export const Header = styled.header`
   position: sticky;
@@ -6,7 +8,7 @@ export const Header = styled.header`
   width: 100%;
   border-bottom: 2px solid var(--bg);
   background-color: var(--bg-3, #263140);
-  z-index: 10;
+  z-index: 30;
 
   .container {
     width: 100%;
@@ -31,75 +33,12 @@ export const Header = styled.header`
     align-items: center;
   }
 
-  #hamburger {
-    width: 40px;
-    height: 40px;
-    padding: 8px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-  }
-
-  #hamburger div {
-    width: 100%;
-    height: 2px;
-    border-radius: 4px;
-    background-color: var(--icon);
-    transition: all 0.3s;
-  }
-  /* hover */
-  #hamburger:hover div:first-child{
-    transform: rotate(45deg);
-  }
-
-  #hamburger:hover div:nth-child(2){
-    transform: translate(-1em);
-  }
-
-  #hamburger:hover div:nth-child(3){
-    transform: rotate(-45deg);
-  }
-  /* active */
-  #hamburger:active div:first-child{
-    transform: translate(0.5em) rotate(45deg) ;
-  }
-
-  #hamburger:active div:nth-child(2){
-    transform: translate(-0.5em) ;
-  }
-
-  #hamburger:active div:nth-child(3){
-    transform: translate(0.5em) rotate(-45deg) ;
-  }
-
-  /* opened */
-  /* opened:hover */
-  #hamburger.opened:hover div:first-child{
-    transform: translate(-1em) rotate(-45deg) ;
-  }
-
-  #hamburger.opened:hover div:nth-child(2){
-    transform: translate(0) ;
-  }
-
-  #hamburger.opened:hover div:nth-child(3){
-    transform: translate(-1em) rotate(45deg) ;
-  }
-  /* opened:active */
-  #hamburger.opened:active div:first-child{
-    transform: translate(-1.5em) rotate(-45deg) ;
-  }
-
-  #hamburger.opened:active div:nth-child(2){
-    transform: translate(-0.5em) ;
-  }
-
-  #hamburger.opened:active div:nth-child(3){
-    transform: translate(-1.5em) rotate(45deg) ;
-  }
-
   .logo-sm {
-    width: 135px
+    width: 135px;
+    height: 32px;
+    margin: 8px;
+    background: url(${logoSm}) no-repeat;
+    background-size: contain;
   }
 
   h1 {
@@ -135,4 +74,21 @@ export const Header = styled.header`
     gap: 4px;
   }
 
+  @media (max-width: 475px) {
+    .logo-sm {
+      width: 32px;
+      padding: 4px;
+      box-sizing: border-box;
+      background: url(${logoXs}) no-repeat;
+      background-size: contain;
+    }
+
+    .info {
+      gap: 4px;
+    }
+
+    .text-logout {
+      display: none;
+    }
+  }
 `
\ No newline at end of file
diff --git a/src/hooks/useCollection.jsx b/src/hooks/useCollection.jsx
index 7461c28..d0a0574 100644
--- a/src/hooks/useCollection.jsx
+++ b/src/hooks/useCollection.jsx
@@ -16,9 +16,9 @@ function useCollection (transaction, myQuery) { // sever의 데이터르 ㄹ불
                 collection(appFireStore, transaction),
                 where(...myQuery)
             );
-            console.log('myQuery', myQuery);
-            console.log('q',q);
-            console.log('collection', collection(appFireStore, transaction))
+            // console.log('myQuery', myQuery);
+            // console.log('q',q);
+            // console.log('collection', collection(appFireStore, transaction))
         }
 
         const unsubscribe = onSnapshot( // 구독을 끊어주는 함수 반환
diff --git a/src/images/gif/as-is.gif b/src/images/gif/as-is.gif
new file mode 100644
index 0000000..57dbf50
Binary files /dev/null and b/src/images/gif/as-is.gif differ
diff --git a/src/images/gif/to-be.gif b/src/images/gif/to-be.gif
new file mode 100644
index 0000000..842e8a0
Binary files /dev/null and b/src/images/gif/to-be.gif differ
diff --git a/src/images/logo-xs.png b/src/images/logo-xs.png
new file mode 100644
index 0000000..0832cd2
Binary files /dev/null and b/src/images/logo-xs.png differ
diff --git a/src/pages/home/DiaryList.jsx b/src/pages/home/DiaryList.jsx
index 159e078..741d2af 100644
--- a/src/pages/home/DiaryList.jsx
+++ b/src/pages/home/DiaryList.jsx
@@ -6,7 +6,7 @@ import * as H from "./Home.style.jsx"
 
 function DiaryList ({ diaries }) {
     const { deleteDocument } = useFirestore('diary');
-    console.log('diaries', diaries);
+    // console.log('diaries', diaries);
 
     const oldDiaries = diaries.map((item) => {
         return (
diff --git a/src/pages/home/Home.jsx b/src/pages/home/Home.jsx
index a07a2bb..94b9543 100644
--- a/src/pages/home/Home.jsx
+++ b/src/pages/home/Home.jsx
@@ -32,8 +32,8 @@ export default function Home({isMenuOpen, setIsMenuOpen}) {
   
           <div className="category-24hr">
             <h3 className="title">
-            <img src={iconDofDay} alt="icon-d-of-day" className="icon-d-of-day" />
-            <strong>24시간 </strong> &nbsp;| 지금 복습하면&nbsp; <strong>60%</strong>&nbsp;를 더 기억할 수 있어요!
+            {/* <img src={iconDofDay} alt="icon-d-of-day" className="icon-d-of-day" /> */}
+            {/* <strong>24시간 </strong> &nbsp;| 지금 복습하면&nbsp; <p><strong>60%</strong>&nbsp;를 더 기억할 수 있어요!</p> */}
             </h3>
             <ul className="note-list">
               {error && <strong>{error}</strong> }
diff --git a/src/pages/home/Home.style.jsx b/src/pages/home/Home.style.jsx
index b14b00a..442cd81 100644
--- a/src/pages/home/Home.style.jsx
+++ b/src/pages/home/Home.style.jsx
@@ -18,26 +18,14 @@ export const HomeWrapper = styled.div`
       display: flex;
       flex-direction: column;
       align-items: center;
-    }
-
-    .nav {
-      padding: 0;
-    }
-    .nav ul {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-around;
-    }
-
-    .nav ul li {
-      width: 100px;
-      border-radius: 8px 8px 0 0;
+      width: 100%;
+      margin-top: 12px;
     }
 
     section.old {
       margin-top: 0;
     }
-  }
+  } 
 `
 
 export const Old = styled.section`
@@ -66,6 +54,11 @@ export const Old = styled.section`
     margin: 0;
   }
 
+  h2 span {
+    flex-shrink: 0;
+    margin-right: 12px;
+  }
+
   .note-list,
   .one-day .note-list,
   .one-week .note-list,
@@ -119,6 +112,20 @@ export const Old = styled.section`
   .note-content:hover {
     background-color: var(--bg-3);
   }
+
+  @media (max-width:500px) {
+    & {
+      padding: 24px;
+    }
+
+    h2 {
+      margin-bottom: 16px;
+    }
+
+    h3.title {
+      flex-direction: column;
+    }
+  }
 `
 
 export const BtnNew = styled.button`
diff --git a/src/pages/home/menu/Menu.style.jsx b/src/pages/home/menu/Menu.style.jsx
index 4ead1d5..4321147 100644
--- a/src/pages/home/menu/Menu.style.jsx
+++ b/src/pages/home/menu/Menu.style.jsx
@@ -6,7 +6,7 @@ export const Ul = styled.ul`
   height: 100vh;
   background: var(--bg-4);
   transition: all 0.5s;
-  z-index: 20;
+  z-index: 40;
   left: -240px;
   
   &.opened {
diff --git a/src/pages/home/nav/Nav.jsx b/src/pages/home/nav/Nav.jsx
index 5624c9f..a564fe4 100644
--- a/src/pages/home/nav/Nav.jsx
+++ b/src/pages/home/nav/Nav.jsx
@@ -1,7 +1,4 @@
 import React from 'react';
-import iconDofDay from "../../../images/icon/icon-d-of-day.png";
-import iconWofWeek from "../../../images/icon/icon-w-of-week.png";
-import iconMofMonth from "../../../images/icon/icon-m-of-month.png";
 import * as N from "./Nav.style.jsx"
 
 export default function Nav() {
@@ -10,9 +7,9 @@ export default function Nav() {
         <N.Nav className="nav">
             <ul>
                 <li className="tap-all opened">모든 기록</li>
-                <li className="tap-24hr"><img src={iconDofDay} alt="icon-d-of-day" className="icon-d-of-day" />24시간</li>
-                <li className="tap-week"><img src={iconWofWeek} alt="icon-w-of-week" className="icon-w-of-week" />일주일</li>
-                <li className="tap-month"><img src={iconMofMonth} alt="icon-m-of-month" className="icon-m-of-month" />한 달</li>
+                <li className="tap-24hr">24시간</li>
+                <li className="tap-week">일주일</li>
+                <li className="tap-month">한 달</li>
             </ul>
         </N.Nav>
     </>
diff --git a/src/pages/home/nav/Nav.style.jsx b/src/pages/home/nav/Nav.style.jsx
index e7bf661..2278e7a 100644
--- a/src/pages/home/nav/Nav.style.jsx
+++ b/src/pages/home/nav/Nav.style.jsx
@@ -1,9 +1,14 @@
 import styled from "styled-components";
+import iconHeart from "../../../images/icon/heart.svg"
+import iconDofDay from "../../../images/icon/icon-d-of-day.png";
+import iconWofWeek from "../../../images/icon/icon-w-of-week.png";
+import iconMofMonth from "../../../images/icon/icon-m-of-month.png";
 
 export const Nav = styled.nav`
   padding: 48px 0;
   position: sticky;
-  top: 32px;
+  top: 68px;
+  z-index: 20;
 
   ul {
     display: flex;
@@ -34,11 +39,11 @@ export const Nav = styled.nav`
     width: 32px;
     height: 32px;
     vertical-align: -0.6em;
-    background: url("../images/icon/heart_60.svg") ;
+    background: url(${iconHeart}) no-repeat;
   }
 
   ul li.opened::before {
-    background: url("../images/icon/heart.svg") ;
+    background: url(${iconHeart}) no-repeat;
   }
 
   ul li:hover {
@@ -48,4 +53,25 @@ export const Nav = styled.nav`
   ul li.opened:hover {
     background-color: var(--bg-2);
   }
+
+  @media (max-width:748px) {
+    & {
+      padding: 0;
+      top:42px;
+      margin-bottom: -8px;
+    }
+
+    ul {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      gap: 4px;
+    }
+
+    ul li {
+      width: 80px;
+      border-radius: 8px;
+      box-shadow: 0 0 4px #00000025;
+    }
+  }
 `
\ No newline at end of file