diff --git a/index.html b/index.html
index 9cdad27..8bcf8a2 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,23 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>HowAboutQuestion</title>
+    <title>문제어때</title>
+    <meta name="description" content="내 안의 작은 학습방, 문제어때. 문제를 만들고 풀고 분석하세요." />
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="문제어때" />
+    <meta property="og:description" content="내 안의 작은 학습방, 문제어때. 문제를 만들고 풀고 분석하세요." />
+    <meta property="og:image" content="https://d2ab13l3eziju4.cloudfront.net/frontend/thumbnail.png" />
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="문제어때" />
+    <meta name="twitter:description" content="내 안의 작은 학습방, 문제어때. 문제를 만들고 풀고 분석하세요." />
+    <meta name="twitter:image" content="https://d2ab13l3eziju4.cloudfront.net/frontend/thumbnail.png" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/public/favicon.png b/public/favicon.png
index d0bc708..3e205ae 100644
Binary files a/public/favicon.png and b/public/favicon.png differ
diff --git a/src/assets/images/logo.webp b/src/assets/images/logo.webp
new file mode 100644
index 0000000..311e539
Binary files /dev/null and b/src/assets/images/logo.webp differ
diff --git a/src/pages/help/Help.module.scss b/src/pages/help/Help.module.scss
index 8734e48..fd4106a 100644
--- a/src/pages/help/Help.module.scss
+++ b/src/pages/help/Help.module.scss
@@ -65,3 +65,61 @@
   flex-direction: column;
   gap: 64px;
 }
+
+.floatingBtn {
+  display: none;
+  position: fixed;
+  bottom: 28px;
+  left: 24px;
+  z-index: 198;
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  background-color: $bg-white;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  padding: 0;
+  overflow: hidden;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &:hover {
+    transform: scale(1.08);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+  }
+}
+
+@media (max-width: 768px) {
+  .main {
+    padding: 40px 24px 80px;
+  }
+
+  .heroTitle {
+    font-size: $font-2xl;
+  }
+
+  .heroDesc {
+    font-size: $font-md;
+  }
+
+  .categoryTitle {
+    font-size: $font-xl;
+    margin-bottom: 24px;
+  }
+
+  .sectionList {
+    gap: 48px;
+  }
+
+  .floatingBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
diff --git a/src/pages/help/Help.tsx b/src/pages/help/Help.tsx
index 02b7bc9..59fb0ce 100644
--- a/src/pages/help/Help.tsx
+++ b/src/pages/help/Help.tsx
@@ -13,6 +13,7 @@ import styles from '@/pages/help/Help.module.scss';
 const Help: React.FC = () => {
   const firstStepId = helpCategories[0].steps[0].id;
   const [activeStepId, setActiveStepId] = useState(firstStepId);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const sectionRefs = useRef<Map<string, HTMLElement>>(new Map());
 
   useEffect(() => {
@@ -50,7 +51,10 @@ const Help: React.FC = () => {
   const handleStepClick = (_categoryId: string, stepId: string) => {
     const el = sectionRefs.current.get(stepId);
     if (el) {
-      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      const NAVBAR_HEIGHT = 60;
+      const PADDING = 24;
+      const top = el.getBoundingClientRect().top + window.scrollY - NAVBAR_HEIGHT - PADDING;
+      window.scrollTo({ top, behavior: 'smooth' });
     }
   };
 
@@ -69,6 +73,8 @@ const Help: React.FC = () => {
           categories={helpCategories}
           activeStepId={activeStepId}
           onStepClick={handleStepClick}
+          isOpen={isSidebarOpen}
+          onClose={() => setIsSidebarOpen(false)}
         />
         <div className={styles.mainWrapper}>
           <main className={styles.main}>
@@ -96,6 +102,15 @@ const Help: React.FC = () => {
           </main>
         </div>
       </div>
+
+      <button
+        className={styles.floatingBtn}
+        onClick={() => setIsSidebarOpen(prev => !prev)}
+        aria-label="목차 열기"
+      >
+        <img src="src/assets/images/logo.webp" alt="목차" />
+      </button>
+
       <Footer />
     </div>
   );
diff --git a/src/pages/help/components/HelpSection.tsx b/src/pages/help/components/HelpSection.tsx
index 51d6b9e..28d4dfd 100644
--- a/src/pages/help/components/HelpSection.tsx
+++ b/src/pages/help/components/HelpSection.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import styles from '@/pages/help/components/HelpSection.module.scss';
 import type { HelpStep } from '@/pages/help/types';
 
diff --git a/src/pages/help/components/HelpSidebar.module.scss b/src/pages/help/components/HelpSidebar.module.scss
index 637f75f..f9c6606 100644
--- a/src/pages/help/components/HelpSidebar.module.scss
+++ b/src/pages/help/components/HelpSidebar.module.scss
@@ -65,3 +65,37 @@
     background-color: $blue-1;
   }
 }
+
+.overlay {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .sidebar {
+    position: fixed;
+    top: 60px;
+    left: 0;
+    z-index: 200;
+    height: calc(100vh - 60px);
+    width: 280px;
+    min-width: 280px;
+    background-color: $bg-white;
+    border-right: 1px solid $gray-1;
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
+    display: block;
+
+    &.open {
+      transform: translateX(0);
+    }
+  }
+
+  .overlay {
+    display: block;
+    position: fixed;
+    inset: 0;
+    top: 60px;
+    z-index: 199;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+}
diff --git a/src/pages/help/components/HelpSidebar.tsx b/src/pages/help/components/HelpSidebar.tsx
index 3534ebb..68f0729 100644
--- a/src/pages/help/components/HelpSidebar.tsx
+++ b/src/pages/help/components/HelpSidebar.tsx
@@ -6,34 +6,53 @@ interface Props {
   categories: HelpCategory[];
   activeStepId: string;
   onStepClick: (categoryId: string, stepId: string) => void;
+  isOpen?: boolean;
+  onClose?: () => void;
 }
 
 /**
  *
  */
-const HelpSidebar: React.FC<Props> = ({ categories, activeStepId, onStepClick }) => {
+const HelpSidebar: React.FC<Props> = ({
+  categories,
+  activeStepId,
+  onStepClick,
+  isOpen,
+  onClose,
+}) => {
+  /**
+   *
+   */
+  const handleStepClick = (categoryId: string, stepId: string) => {
+    onStepClick(categoryId, stepId);
+    onClose?.();
+  };
+
   return (
-    <aside className={styles.sidebar}>
-      <nav className={styles.nav}>
-        {categories.map(category => (
-          <div key={category.id} className={styles.navSection}>
-            <p className={styles.navCategory}>{category.label}</p>
-            <ul className={styles.stepList}>
-              {category.steps.map(step => (
-                <li key={step.id}>
-                  <button
-                    className={`${styles.stepItem} ${activeStepId === step.id ? styles.active : ''}`}
-                    onClick={() => onStepClick(category.id, step.id)}
-                  >
-                    {step.title}
-                  </button>
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
-      </nav>
-    </aside>
+    <>
+      {isOpen && <div className={styles.overlay} onClick={onClose} />}
+      <aside className={`${styles.sidebar} ${isOpen ? styles.open : ''}`}>
+        <nav className={styles.nav}>
+          {categories.map(category => (
+            <div key={category.id} className={styles.navSection}>
+              <p className={styles.navCategory}>{category.label}</p>
+              <ul className={styles.stepList}>
+                {category.steps.map(step => (
+                  <li key={step.id}>
+                    <button
+                      className={`${styles.stepItem} ${activeStepId === step.id ? styles.active : ''}`}
+                      onClick={() => handleStepClick(category.id, step.id)}
+                    >
+                      {step.title}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </nav>
+      </aside>
+    </>
   );
 };
 
diff --git a/src/pages/landing/Landing.module.scss b/src/pages/landing/Landing.module.scss
index d515d21..0163dbd 100644
--- a/src/pages/landing/Landing.module.scss
+++ b/src/pages/landing/Landing.module.scss
@@ -324,6 +324,10 @@
 
   .hero {
     grid-template-columns: 1fr;
+
+    .heroText {
+      max-width: 100%;
+    }
   }
 
   .featuresCard {
@@ -340,15 +344,60 @@
     gap: 72px;
   }
 
+  .hero {
+    text-align: center;
+
+    .heroText {
+      max-width: 100%;
+
+      h2 {
+        font-size: $font-3xl;
+      }
+
+      .heroButtons {
+        justify-content: center;
+
+        > * {
+          font-size: $font-md;
+          padding: 8px 16px;
+        }
+      }
+    }
+
+    .heroImage {
+      max-width: 200px;
+      margin: 0 auto;
+    }
+  }
+
   .featuresCard {
     padding: 36px 20px 48px;
   }
 
+  .featuresTitle {
+    font-size: $font-2xl;
+  }
+
   .featuresTabs {
     gap: 12px;
   }
 
-  .featureDetailCard,
+  .featureDetailCard {
+    grid-template-columns: 1fr;
+
+    .featureDetailContent {
+      order: 2;
+    }
+
+    .featureDetailImage {
+      order: 1;
+    }
+  }
+
+  .featureDetailTitle {
+    font-size: $font-xl;
+  }
+
   .previewStats,
   .previewChartArea {
     grid-template-columns: 1fr;
diff --git a/src/pages/landing/Landing.tsx b/src/pages/landing/Landing.tsx
index 406a455..44c1f25 100644
--- a/src/pages/landing/Landing.tsx
+++ b/src/pages/landing/Landing.tsx
@@ -74,7 +74,7 @@ const Landing: React.FC = () => {
           className={`${styles.hero} ${visible.hero ? styles['animate-stagger'] : ''}`}
         >
           <div className={styles.heroText}>
-            <h1>내 손 안에 작은 학습방</h1>
+            <h1>내 안의 작은 학습방</h1>
             <h2>문제 어때</h2>
             <div className={styles.heroButtons}>
               <CustomButton
diff --git a/src/pages/welcome/Welcome.tsx b/src/pages/welcome/Welcome.tsx
index a63fd19..f83e08f 100644
--- a/src/pages/welcome/Welcome.tsx
+++ b/src/pages/welcome/Welcome.tsx
@@ -73,7 +73,7 @@ const Welcome: React.FC = () => {
           className={`${styles.hero} ${visible.hero ? styles['animate-stagger'] : ''}`}
         >
           <div className={styles.heroText}>
-            <h1>내 손 안에 작은 학습방</h1>
+            <h1>내 안의 작은 학습방</h1>
             <h2>문제 어때</h2>
             <div className={styles.heroButtons}>
               <CustomButton text="문제풀기" variant="primary" size="medium" />
@@ -81,7 +81,7 @@ const Welcome: React.FC = () => {
             </div>
           </div>
           <div className={styles.heroImage}>
-            <img src="src/assets/images/logo.png" alt="Hero" />
+            <img src="src/assets/images/logo.webp" alt="Hero" />
           </div>
         </section>
 
diff --git a/src/shared/navbar/Navbar.module.scss b/src/shared/navbar/Navbar.module.scss
index 2b54471..bbde5ff 100644
--- a/src/shared/navbar/Navbar.module.scss
+++ b/src/shared/navbar/Navbar.module.scss
@@ -27,6 +27,7 @@
     font-weight: $font-bold;
     color: $black;
   }
+
   .navLinks {
     display: flex;
     gap: 24px;
@@ -75,4 +76,75 @@
       }
     }
   }
+
+  .hamburger {
+    display: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: $black;
+    padding: 4px;
+    line-height: 0;
+  }
+
+  .mobileMenu {
+    display: none;
+  }
+
+  .menuOverlay {
+    display: none;
+  }
+
+  @media (max-width: 768px) {
+    .logoTitle {
+      display: none;
+    }
+
+    .navLinks {
+      display: none;
+    }
+
+    .actions {
+      display: none;
+    }
+
+    .hamburger {
+      display: flex;
+      align-items: center;
+    }
+
+    .menuOverlay {
+      display: block;
+      position: fixed;
+      inset: 0;
+      top: 60px;
+      z-index: 98;
+    }
+
+    .mobileMenu {
+      display: flex;
+      flex-direction: column;
+      position: fixed;
+      top: 60px;
+      left: 0;
+      right: 0;
+      z-index: 99;
+      background-color: $bg-white;
+      border-bottom: 1px solid $gray-1;
+      padding: 8px 0;
+
+      div {
+        font-size: $font-md;
+        font-weight: $font-medium;
+        color: $black;
+        cursor: pointer;
+        padding: 14px 24px;
+
+        &:hover {
+          background-color: $gray-1;
+        }
+      }
+
+    }
+  }
 }
diff --git a/src/shared/navbar/Navbar.tsx b/src/shared/navbar/Navbar.tsx
index 36be659..149afca 100644
--- a/src/shared/navbar/Navbar.tsx
+++ b/src/shared/navbar/Navbar.tsx
@@ -6,9 +6,11 @@
  * @create 2025.08.18
  * @note
  * - 2025.08.18: 최초 생성 (khaelilm1311)
- * - 2026.05.12: 로그인 버튼 주석 (eunchang)
+ * - 2026.05.12: 로그인 버튼 주석 (cod0216)
+ * - 2026.06.10: 모바일 햄버거 메뉴 추가 (cod0216)
  */
-import React from 'react';
+import React, { useState } from 'react';
+import { RiMenuLine, RiCloseLine } from 'react-icons/ri';
 import CustomButton from '@/shared/custombutton/CustomButton';
 import styles from '@/shared/navbar/Navbar.module.scss';
 import { useNavbar } from '@/hooks/useNavbar';
@@ -18,13 +20,23 @@ import { useNavbar } from '@/hooks/useNavbar';
  */
 const Navbar: React.FC = () => {
   const { goHome, goSupport, goHelp, goIntro, handleDownload } = useNavbar();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  /**
+   *
+   */
+  const handleNavClick = (action: () => void) => {
+    action();
+    setIsMenuOpen(false);
+  };
 
   return (
     <div className={styles.navbar}>
       <div className={styles.logoBox} onClick={goHome} style={{ cursor: 'pointer' }}>
-        <img className={styles.logoImage} src="src/assets/images/logo.png" />
+        <img className={styles.logoImage} src="src/assets/images/logo.webp" />
         <span className={styles.logoTitle}>문제어때</span>
       </div>
+
       <div className={styles.navLinks}>
         <div onClick={goIntro}>소개</div>
         <div onClick={goHelp}>도움말</div>
@@ -35,6 +47,21 @@ const Navbar: React.FC = () => {
         {/* <CustomButton text="로그인" variant="primary" size="medium" /> */}
         <CustomButton text="다운로드" variant="primary" size="medium" onClick={handleDownload} />
       </div>
+
+      <button className={styles.hamburger} onClick={() => setIsMenuOpen(prev => !prev)}>
+        {isMenuOpen ? <RiCloseLine size={24} /> : <RiMenuLine size={24} />}
+      </button>
+
+      {isMenuOpen && (
+        <>
+          <div className={styles.menuOverlay} onClick={() => setIsMenuOpen(false)} />
+          <div className={styles.mobileMenu}>
+            <div onClick={() => handleNavClick(goIntro)}>소개</div>
+            <div onClick={() => handleNavClick(goHelp)}>도움말</div>
+            <div onClick={() => handleNavClick(goSupport)}>고객센터</div>
+          </div>
+        </>
+      )}
     </div>
   );
 };
