diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
new file mode 100644
index 0000000..69051a7
--- /dev/null
+++ b/.github/pull_request_template.md
@@ -0,0 +1,21 @@
+## 개요
+<!-- 이번 PR의 개요를 설명해주세요. -->
+<!-- 예시: apps/web에 Vitest + React Testing Library 기반 단위 테스트 환경을 구축하고 데이터/로직 레이어와 커스텀 훅에 대한 단위 테스트를 신규 구현합니다. -->
+- 
+
+## 작업 내용
+<!-- 구현/수정한 기능 목록을 상세히 작성해주세요. -->
+
+- 
+
+## 검증 결과
+<!-- 테스트 실행 결과 및 빌드/린트 검증 결과를 작성해주세요. -->
+- **Test Files**: <!-- 예시: 11 passed -->
+- **Tests**: <!-- 예시: 45 passed -->
+- [ ] `tsc --noEmit` 통과
+- [ ] `biome check` (또는 `lint/format`) 통과
+
+## 비고
+<!-- 의존성 추가, 후속 작업, E2E 계획 등 특이사항을 기재해주세요. -->
+<!-- 예시: 통합 테스트(MSW) 및 E2E(Playwright)는 후속 PR로 분리 예정 -->
+- 
diff --git a/apps/extension/domain/bookmarks/quick-bookmark.ts b/apps/extension/domain/bookmarks/quick-bookmark.ts
new file mode 100644
index 0000000..d63fcb6
--- /dev/null
+++ b/apps/extension/domain/bookmarks/quick-bookmark.ts
@@ -0,0 +1,18 @@
+import { browser } from 'wxt/browser';
+
+const POPUP_SIZE = { width: 440, height: 620 };
+
+/** 대상 페이지의 제목/URL을 쿼리로 실어 북마크 추가 팝업 URL을 생성. */
+export function buildQuickBookmarkUrl(targetUrl: string, title: string): string {
+  const params = new URLSearchParams({ url: targetUrl, title });
+  return browser.runtime.getURL(`/quick-bookmark.html?${params.toString()}`);
+}
+
+/** 대상 페이지 정보를 실어 북마크 추가 팝업 창을 연다. */
+export function openQuickBookmarkPopup(targetUrl: string, title: string): void {
+  browser.windows.create({
+    url: buildQuickBookmarkUrl(targetUrl, title),
+    type: 'popup',
+    ...POPUP_SIZE,
+  });
+}
diff --git a/apps/extension/entrypoints/background/context-menu.ts b/apps/extension/entrypoints/background/context-menu.ts
index b594330..072d22d 100644
--- a/apps/extension/entrypoints/background/context-menu.ts
+++ b/apps/extension/entrypoints/background/context-menu.ts
@@ -1,13 +1,8 @@
 import { browser } from 'wxt/browser';
+import { openQuickBookmarkPopup } from '@/domain/bookmarks/quick-bookmark';
 
 const CONTEXT_MENU_ID = 'dookmark-add-bookmark';
 
-// 대상 페이지의 제목/URL을 쿼리로 실어 북마크 추가 팝업 URL을 생성.
-function setQuickBookmarkPopupUrl(targetUrl: string, title: string): string {
-  const params = new URLSearchParams({ url: targetUrl, title });
-  return browser.runtime.getURL(`/quick-bookmark.html?${params.toString()}`);
-}
-
 export function setupContextMenu() {
   if (!browser.contextMenus) return;
 
@@ -30,11 +25,6 @@ export function setupContextMenu() {
     const title = info.linkUrl ? '' : tab?.title || '';
     if (!targetUrl) return;
 
-    browser.windows.create({
-      url: setQuickBookmarkPopupUrl(targetUrl, title),
-      type: 'popup',
-      width: 440,
-      height: 620,
-    });
+    openQuickBookmarkPopup(targetUrl, title);
   });
 }
diff --git a/apps/extension/entrypoints/quick-bookmark/App.tsx b/apps/extension/entrypoints/quick-bookmark/App.tsx
index c6630a8..a513cbc 100644
--- a/apps/extension/entrypoints/quick-bookmark/App.tsx
+++ b/apps/extension/entrypoints/quick-bookmark/App.tsx
@@ -48,6 +48,26 @@ async function saveMetadataWithRetry(
 }
 
 export function CreateApp() {
+  useEffect(() => {
+    const syncTheme = () => {
+      const savedTheme = localStorage.getItem('theme') || 'system';
+      const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const isDark = savedTheme === 'dark' || (savedTheme === 'system' && systemPrefersDark);
+      document.documentElement.classList.toggle('dark', isDark);
+    };
+
+    syncTheme();
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    mediaQuery.addEventListener('change', syncTheme);
+    window.addEventListener('storage', syncTheme);
+
+    return () => {
+      mediaQuery.removeEventListener('change', syncTheme);
+      window.removeEventListener('storage', syncTheme);
+    };
+  }, []);
+
   const params = useMemo(() => new URLSearchParams(window.location.search), []);
 
   const [title, setTitle] = useState(params.get('title') ?? '');
diff --git a/apps/extension/entrypoints/sidepanel/pages/main.tsx b/apps/extension/entrypoints/sidepanel/pages/main.tsx
index 648fcc7..bc838d3 100644
--- a/apps/extension/entrypoints/sidepanel/pages/main.tsx
+++ b/apps/extension/entrypoints/sidepanel/pages/main.tsx
@@ -1,7 +1,7 @@
 import { browser } from 'wxt/browser';
+import { openQuickBookmarkPopup } from '@/domain/bookmarks/quick-bookmark';
 import { useLocalDnd } from '@/domain/dnd/use-local-dnd';
 import { useSidepanel } from '@/entrypoints/sidepanel/providers/sidepanel-provider';
-import { useTheme } from '@/entrypoints/sidepanel/providers/theme-provider';
 import { useNavigation } from '@/entrypoints/sidepanel/shared/hooks/use-navigation';
 import { SidepanelContent } from '@/entrypoints/sidepanel/ui/shared/sidepanel-content';
 import { SidepanelFooter } from '@/entrypoints/sidepanel/ui/shared/sidepanel-footer';
@@ -14,7 +14,6 @@ const WEB_BASE_URL = 'http://localhost:3000';
 
 export function MainPage() {
   const nav = useNavigation();
-  const { theme, toggleTheme } = useTheme();
   const {
     loading,
     searchQuery,
@@ -32,7 +31,7 @@ export function MainPage() {
 
   return (
     <SidepanelContent
-      header={<SidepanelHeader theme={theme} onToggleTheme={toggleTheme} />}
+      header={<SidepanelHeader />}
       main={
         <SidepanelMain
           loading={loading}
@@ -46,6 +45,10 @@ export function MainPage() {
           onNavigateToDashboard={() => {
             browser.tabs.create({ url: `${WEB_BASE_URL}/dashboard` });
           }}
+          onAddClick={async () => {
+            const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
+            if (tab?.url) openQuickBookmarkPopup(tab.url, tab.title ?? '');
+          }}
         >
           {!searchQuery && (
             <FavoritesSection favorites={favorites} onToggleFavorite={toggleFavorite} />
diff --git a/apps/extension/entrypoints/sidepanel/providers/theme-provider.tsx b/apps/extension/entrypoints/sidepanel/providers/theme-provider.tsx
index 7f271cd..64d55bf 100644
--- a/apps/extension/entrypoints/sidepanel/providers/theme-provider.tsx
+++ b/apps/extension/entrypoints/sidepanel/providers/theme-provider.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import type React from 'react';
 import { createContext, useContext, useEffect, useState } from 'react';
 
-type Theme = 'light' | 'dark';
+export type Theme = 'light' | 'dark' | 'system';
 
 interface ThemeContextType {
   theme: Theme;
@@ -12,28 +14,63 @@ interface ThemeContextType {
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [theme, setTheme] = useState<Theme>('light');
+  const [theme, setTheme] = useState<Theme>('system');
+  const [systemPrefersDark, setSystemPrefersDark] = useState<boolean>(false);
 
-  // Load saved theme on mount
+  // Load saved theme, sync system theme and setup storage listeners on mount
   useEffect(() => {
-    const savedTheme = localStorage.getItem('theme') as Theme | null;
-    const initialTheme = savedTheme || 'light';
-    setTheme(initialTheme);
-    document.documentElement.classList.toggle('dark', initialTheme === 'dark');
+    const loadTheme = () => {
+      const savedTheme = localStorage.getItem('theme') as Theme | null;
+      if (savedTheme) {
+        setTheme(savedTheme);
+      } else {
+        localStorage.setItem('theme', 'system');
+      }
+    };
+
+    loadTheme();
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    setSystemPrefersDark(mediaQuery.matches);
+
+    const handleSystemThemeChange = (e: MediaQueryListEvent) => {
+      setSystemPrefersDark(e.matches);
+    };
+
+    // 다른 익스텐션 탭/창에서 테마 변경 시 동기화
+    const handleStorageChange = (e: StorageEvent) => {
+      if (e.key === 'theme') {
+        loadTheme();
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleSystemThemeChange);
+    window.addEventListener('storage', handleStorageChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleSystemThemeChange);
+      window.removeEventListener('storage', handleStorageChange);
+    };
   }, []);
 
-  // Sync class list and localStorage whenever theme state changes
+  const isDark = theme === 'dark' || (theme === 'system' && systemPrefersDark);
+
+  // Declarative side-effect to sync document class and localStorage
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', isDark);
+    localStorage.setItem('theme', theme);
+  }, [theme, isDark]);
+
   const toggleTheme = () => {
-    const nextTheme = theme === 'light' ? 'dark' : 'light';
-    setTheme(nextTheme);
-    localStorage.setItem('theme', nextTheme);
-    document.documentElement.classList.toggle('dark', nextTheme === 'dark');
+    setTheme((prev) => {
+      if (prev === 'system') return 'light';
+      if (prev === 'light') return 'dark';
+      return 'system';
+    });
   };
 
   return (
-    <ThemeContext.Provider value={{ theme, toggleTheme, isDark: theme === 'dark' }}>
-      {children}
-    </ThemeContext.Provider>
+    <ThemeContext.Provider value={{ theme, toggleTheme, isDark }}>{children}</ThemeContext.Provider>
   );
 }
 
diff --git a/apps/extension/entrypoints/sidepanel/ui/auth/login-required.tsx b/apps/extension/entrypoints/sidepanel/ui/auth/login-required.tsx
index e78c076..e189932 100644
--- a/apps/extension/entrypoints/sidepanel/ui/auth/login-required.tsx
+++ b/apps/extension/entrypoints/sidepanel/ui/auth/login-required.tsx
@@ -11,9 +11,13 @@ export function LoginRequired({ onOpenLoginTab }: LoginRequiredProps) {
         </h1>
       </div>
       <div className='bg-surface-container-lowest border border-outline-variant rounded-2xl p-6 shadow-lg w-full box-border text-center'>
-        <h2 className='text-lg font-bold text-on-surface mt-0 mb-2.5'>스마트한 북마크 관리</h2>
+        <h2 className='text-lg font-bold text-on-surface mt-0 mb-2.5'>
+          실시간 크로스 브라우저 북마크 동기화 서비스
+        </h2>
         <p className='text-[12.5px] text-on-surface-variant leading-relaxed mb-6'>
-          북마크를 인공지능으로 지능화하여 한눈에 관리하고 탐색해 보세요.
+          여러 브라우저의 북마크를 한곳에서 관리하고
+          <br />
+          어디서든 빠르게 찾아보세요.
         </p>
         <button
           type='button'
diff --git a/apps/extension/entrypoints/sidepanel/ui/shared/sidepanel-header.tsx b/apps/extension/entrypoints/sidepanel/ui/shared/sidepanel-header.tsx
index 6fa2c31..0a25ad4 100644
--- a/apps/extension/entrypoints/sidepanel/ui/shared/sidepanel-header.tsx
+++ b/apps/extension/entrypoints/sidepanel/ui/shared/sidepanel-header.tsx
@@ -1,11 +1,9 @@
 import { ArrowLeft, Moon, Sun } from 'lucide-react';
+import { useTheme } from '@/entrypoints/sidepanel/providers/theme-provider';
 
-interface SidepanelHeaderProps {
-  theme: 'light' | 'dark';
-  onToggleTheme: () => void;
-}
+export function SidepanelHeader() {
+  const { toggleTheme, isDark } = useTheme();
 
-export function SidepanelHeader({ theme, onToggleTheme }: SidepanelHeaderProps) {
   return (
     <header className='flex items-center justify-between h-[52px] px-4 border-b border-outline-variant bg-surface-container-lowest shrink-0'>
       <button
@@ -19,13 +17,13 @@ export function SidepanelHeader({ theme, onToggleTheme }: SidepanelHeaderProps)
       <button
         type='button'
         className='bg-transparent border-0 p-1.5 text-on-surface-variant cursor-pointer rounded-full flex items-center justify-center transition-all duration-200 w-8 h-8 hover:bg-surface-container-low hover:text-on-surface'
-        onClick={onToggleTheme}
+        onClick={toggleTheme}
         aria-label='Toggle Theme'
       >
-        {theme === 'light' ? (
-          <Sun size={18} strokeWidth={2} aria-hidden='true' />
-        ) : (
+        {isDark ? (
           <Moon size={18} strokeWidth={2} aria-hidden='true' />
+        ) : (
+          <Sun size={18} strokeWidth={2} aria-hidden='true' />
         )}
       </button>
     </header>
diff --git a/apps/extension/entrypoints/sidepanel/ui/shared/sidepanel-main.tsx b/apps/extension/entrypoints/sidepanel/ui/shared/sidepanel-main.tsx
index d3da39c..4f13aac 100644
--- a/apps/extension/entrypoints/sidepanel/ui/shared/sidepanel-main.tsx
+++ b/apps/extension/entrypoints/sidepanel/ui/shared/sidepanel-main.tsx
@@ -18,6 +18,7 @@ interface SidepanelMainProps {
   onDragOver: (event: DragOverEvent) => void;
   onDragEnd: (event: DragEndEvent) => void;
   onNavigateToDashboard: () => void;
+  onAddClick?: () => void;
   children: React.ReactNode;
 }
 
@@ -31,6 +32,7 @@ export function SidepanelMain({
   onDragOver,
   onDragEnd,
   onNavigateToDashboard,
+  onAddClick,
   children,
 }: SidepanelMainProps) {
   return (
@@ -57,6 +59,7 @@ export function SidepanelMain({
         <button
           type='button'
           className='flex-1 flex items-center justify-center gap-1.5 bg-primary text-on-primary border-0 py-2.5 px-4 text-sm font-semibold rounded-[20px] cursor-pointer shadow-sm transition-all duration-200 hover:brightness-95 hover:-translate-y-[1px]'
+          onClick={onAddClick}
         >
           <Plus size={14} strokeWidth={2.5} aria-hidden='true' />
           <span>북마크</span>
diff --git a/apps/extension/entrypoints/welcome/App.tsx b/apps/extension/entrypoints/welcome/App.tsx
index d5fec55..493ec54 100644
--- a/apps/extension/entrypoints/welcome/App.tsx
+++ b/apps/extension/entrypoints/welcome/App.tsx
@@ -1,4 +1,5 @@
 import { Bookmark, MousePointerClick, PanelRight, Search } from 'lucide-react';
+import { useEffect } from 'react';
 import { browser } from 'wxt/browser';
 
 const WEB_BASE_URL = 'http://localhost:3000';
@@ -11,13 +12,13 @@ const STEPS = [
   },
   {
     icon: Bookmark,
-    title: '브라우저 북마크 자동 동기화',
-    desc: '기존 북마크가 자동으로 동기화되고, 여러 브라우저의 북마크를 한곳에서 관리해요.',
+    title: '크로스 브라우저 실시간 동기화',
+    desc: '크롬, 웨일, 엣지 등 어떤 브라우저를 쓰든 기존 북마크가 안전하고 실시간으로 연동됩니다.',
   },
   {
     icon: MousePointerClick,
-    title: '우클릭으로 빠른 저장',
-    desc: '웹페이지에서 우클릭 → "Dookmark로 북마크하기"로 메모·태그·폴더까지 바로 지정해요.',
+    title: '자유로운 북마크 저장',
+    desc: '우클릭, 브라우저 기본 북마크 모두 자동으로 동기화됩니다.',
   },
   {
     icon: Search,
@@ -27,6 +28,26 @@ const STEPS = [
 ];
 
 export function WelcomeApp() {
+  useEffect(() => {
+    const syncTheme = () => {
+      const savedTheme = localStorage.getItem('theme') || 'system';
+      const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const isDark = savedTheme === 'dark' || (savedTheme === 'system' && systemPrefersDark);
+      document.documentElement.classList.toggle('dark', isDark);
+    };
+
+    syncTheme();
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    mediaQuery.addEventListener('change', syncTheme);
+    window.addEventListener('storage', syncTheme);
+
+    return () => {
+      mediaQuery.removeEventListener('change', syncTheme);
+      window.removeEventListener('storage', syncTheme);
+    };
+  }, []);
+
   const handleLogin = () => {
     browser.tabs.create({ url: `${WEB_BASE_URL}/auth?deviceType=EXTENSION` });
   };
@@ -41,7 +62,9 @@ export function WelcomeApp() {
           </h1>
           <h2 className='text-xl font-bold text-on-surface m-0'>Dookmark에 오신 것을 환영합니다</h2>
           <p className='text-[14px] text-on-surface-variant leading-relaxed m-0 max-w-[420px]'>
-            북마크를 더 똑똑하게 — 여러 브라우저의 북마크를 한곳에서 관리하고, 메모·태그로 정리하고,
+            여러 브라우저의 북마크를 한곳에서 관리하고
+          </p>
+          <p className='text-[14px] text-on-surface-variant leading-relaxed m-0 max-w-[420px]'>
             어디서든 빠르게 찾아보세요.
           </p>
         </div>
@@ -58,7 +81,9 @@ export function WelcomeApp() {
               </span>
               <div className='flex flex-col gap-1 min-w-0'>
                 <span className='text-[13.5px] font-bold text-on-surface'>{title}</span>
-                <span className='text-[12px] text-on-surface-variant leading-relaxed'>{desc}</span>
+                <span className='text-[12px] text-on-surface-variant leading-relaxed whitespace-pre-line'>
+                  {desc}
+                </span>
               </div>
             </div>
           ))}
diff --git a/apps/extension/public/icon/128.png b/apps/extension/public/icon/128.png
index 9e35d13..994e36e 100644
Binary files a/apps/extension/public/icon/128.png and b/apps/extension/public/icon/128.png differ
diff --git a/apps/extension/public/icon/16.png b/apps/extension/public/icon/16.png
index cd09f8c..b86b695 100644
Binary files a/apps/extension/public/icon/16.png and b/apps/extension/public/icon/16.png differ
diff --git a/apps/extension/public/icon/32.png b/apps/extension/public/icon/32.png
index f51ce1b..e987cbd 100644
Binary files a/apps/extension/public/icon/32.png and b/apps/extension/public/icon/32.png differ
diff --git a/apps/extension/public/icon/48.png b/apps/extension/public/icon/48.png
index cb7a449..d08f3a1 100644
Binary files a/apps/extension/public/icon/48.png and b/apps/extension/public/icon/48.png differ
diff --git a/apps/extension/public/icon/96.png b/apps/extension/public/icon/96.png
index c28ad52..b4fe38d 100644
Binary files a/apps/extension/public/icon/96.png and b/apps/extension/public/icon/96.png differ
diff --git a/apps/web/app/favicon.ico b/apps/web/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/apps/web/app/favicon.ico and /dev/null differ
diff --git a/apps/web/app/icon.svg b/apps/web/app/icon.svg
new file mode 100644
index 0000000..b3c464a
--- /dev/null
+++ b/apps/web/app/icon.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <style>
+    :root {
+      --primary: #3d6fa8;
+      --bg: rgba(61, 111, 168, 0.15);
+      --border: rgba(61, 111, 168, 0.20);
+    }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --primary: #a5caf1;
+        --bg: rgba(165, 202, 241, 0.15);
+        --border: rgba(165, 202, 241, 0.20);
+      }
+    }
+    .bg {
+      fill: var(--bg);
+      stroke: var(--border);
+      stroke-width: 1.5px;
+    }
+    .text {
+      fill: var(--primary);
+      font-family: system-ui, -apple-system, sans-serif;
+      font-weight: 800;
+      font-size: 18px;
+    }
+  </style>
+  <rect class="bg" x="1.5" y="1.5" width="29" height="29" rx="8" />
+  <text class="text" x="50%" y="53%" dominant-baseline="central" text-anchor="middle">D</text>
+</svg>
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index c98e3c7..dcd50f9 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -18,7 +18,9 @@ export default function RootLayout({
         <script>
           {`
             try {
-              if (localStorage.getItem('theme') !== 'light') {
+              const savedTheme = localStorage.getItem('theme');
+              const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+              if (savedTheme === 'dark' || (!savedTheme || savedTheme === 'system' ? systemPrefersDark : false)) {
                 document.documentElement.classList.add('dark');
               } else {
                 document.documentElement.classList.remove('dark');
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index f9b8a33..da94347 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -54,21 +54,21 @@ export default function LandingPage() {
         {/* Chrome Extension Badge badge */}
         <div className='inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-surface-container-high/60 border border-outline/20 text-xs font-semibold text-on-surface mb-6 backdrop-blur-sm'>
           <Chrome size={14} className='text-primary' />
-          <span>Chrome 익스텐션 사이드바 연동 지원</span>
+          <span>크롬·엣지·웨일 등 크로스 브라우저 연동 지원</span>
         </div>
 
         <h1 className='text-4xl md:text-6xl font-extrabold tracking-tight leading-[1.15] max-w-4xl text-on-surface'>
-          지능적으로 북마크를 관리하는
+          흩어진 북마크를 관리하는
           <br />
-          가장 스마트한 방법,{' '}
-          <span className='text-primary dark:text-primary-fixed-dim'>Dookmark</span>
+          최고의 서비스, <span className='text-primary dark:text-primary-fixed-dim'>Dookmark</span>
         </h1>
 
         <p className='mt-6 text-base md:text-lg text-on-surface-variant max-w-2xl leading-relaxed'>
           웹 서핑 중 클릭 한 번으로 북마크를 보관하고, 익스텐션 사이드바와 실시간으로 동기화하세요.
-          AI가 카테고리를 자동 분류하고 요약해 주는 북마크 솔루션입니다.
         </p>
-
+        <p className='mt-6 text-base md:text-lg text-on-surface-variant max-w-2xl leading-relaxed'>
+          다양한 브라우저의 북마크를 한곳에서 안전하게 관리할 수 있습니다.
+        </p>
         {/* CTA Buttons */}
         <div className='mt-10 flex flex-col sm:flex-row gap-4 justify-center w-full max-w-md'>
           <button
@@ -107,10 +107,10 @@ export default function LandingPage() {
             <div className='w-10 h-10 rounded-xl bg-secondary/15 border border-secondary/20 flex items-center justify-center text-secondary mb-4'>
               <Cpu size={20} />
             </div>
-            <h3 className='text-base font-bold mb-2'>AI 지능형 요약 및 분류</h3>
+            <h3 className='text-base font-bold mb-2'>다중 브라우저 통합 관리</h3>
             <p className='text-xs text-on-surface-variant leading-relaxed'>
-              수집한 웹페이지의 핵심 내용을 자동으로 분류하고 요약 문구를 뽑아내어, 검색 한 번으로
-              원하는 맥락을 빠르게 찾습니다.
+              크롬, 엣지, 웨일 등 서로 다른 브라우저의 북마크가 자동으로 Dookmark 중앙 서버와
+              연동되어 모든 기기에서 완벽히 일치된 북마크 트리를 제공합니다.
             </p>
           </div>
 
@@ -118,10 +118,10 @@ export default function LandingPage() {
             <div className='w-10 h-10 rounded-xl bg-success-container/50 border border-success/20 flex items-center justify-center text-success mb-4'>
               <ShieldCheck size={20} />
             </div>
-            <h3 className='text-base font-bold mb-2'>강력한 보안 및 쿠키 세션</h3>
+            <h3 className='text-base font-bold mb-2'>이중 백업 및 충돌 방지 가드</h3>
             <p className='text-xs text-on-surface-variant leading-relaxed'>
-              HttpOnly 암호화 보안 세션 및 자동 사일런트 리프레시 인터셉터 설계를 통해 해킹 걱정
-              없는 완벽한 개인 보안 공간을 제공합니다.
+              이중 데이터 정합성 가드 기술을 통해 북마크 추가, 이동, 삭제 시 데이터 중복이나 충돌
+              유실을 원천 차단하고 어떤 환경에서도 안전하게 복원합니다.
             </p>
           </div>
         </div>
diff --git a/apps/web/playwright.config.ts b/apps/web/playwright.config.ts
index 8479748..e0b48a0 100644
--- a/apps/web/playwright.config.ts
+++ b/apps/web/playwright.config.ts
@@ -29,23 +29,18 @@ export default defineConfig({
     baseURL: WEB_BASE_URL,
     trace: 'on-first-retry',
     screenshot: 'only-on-failure',
+    colorScheme: 'dark',
   },
 
   projects: [
     { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
     { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
-    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
     // 반응형 전용 스위트는 @responsive 태그로 모바일 뷰포트에서 실행
     {
       name: 'mobile-chromium',
       use: { ...devices['Pixel 5'] },
       grep: /@responsive/,
     },
-    {
-      name: 'mobile-webkit',
-      use: { ...devices['iPhone 13'] },
-      grep: /@responsive/,
-    },
   ],
 
   webServer: {
diff --git a/apps/web/test/e2e/tests/dashboard.spec.ts b/apps/web/test/e2e/tests/dashboard.spec.ts
index 44bce77..4289deb 100644
--- a/apps/web/test/e2e/tests/dashboard.spec.ts
+++ b/apps/web/test/e2e/tests/dashboard.spec.ts
@@ -16,48 +16,54 @@ test.describe('대시보드', () => {
     await setCookies(context, authedCookies(), 'full');
     await page.goto('/dashboard');
 
-    await expect(page.getByRole('heading', { name: '대시보드' })).toBeVisible();
+    // 콘텐츠 단언은 보이는 main 영역으로 스코프한다.
+    // (RSC 스트리밍은 콘텐츠를 body 최상위 <div hidden>에 먼저 실은 뒤 $RC로 main에 옮기므로,
+    //  문서 전역 getByText는 그 찰나에 숨김 복사본까지 잡아 strict-mode 위반을 낸다)
+    const main = page.getByRole('main');
+    await expect(main.getByRole('heading', { name: '대시보드' })).toBeVisible();
     // 통계 카드 (fullDashboard 값)
-    await expect(page.getByText('전체 북마크')).toBeVisible();
-    await expect(page.getByText('128')).toBeVisible();
-    await expect(page.getByText('즐겨찾기')).toBeVisible();
+    await expect(main.getByText('전체 북마크')).toBeVisible();
+    await expect(main.getByText('128')).toBeVisible();
+    await expect(main.getByText('즐겨찾기')).toBeVisible();
     // 리스트 위젯
-    await expect(page.getByRole('link', { name: 'MDN Web Docs' })).toBeVisible();
-    await expect(page.getByText('개발')).toBeVisible();
+    await expect(main.getByRole('link', { name: 'MDN Web Docs' })).toBeVisible();
+    await expect(main.getByText('개발')).toBeVisible();
   });
 
   test('차트(canvas)가 실제로 렌더된다', async ({ page, context }) => {
     await setCookies(context, authedCookies(), 'full');
     await page.goto('/dashboard');
 
+    const main = page.getByRole('main');
     // 활동 추이(Line) + 브라우저 분포(Doughnut) = canvas 2개 이상
-    await expect(page.locator('canvas').first()).toBeVisible();
-    expect(await page.locator('canvas').count()).toBeGreaterThanOrEqual(2);
+    await expect(main.locator('canvas').first()).toBeVisible();
+    expect(await main.locator('canvas').count()).toBeGreaterThanOrEqual(2);
     // 잔디 히트맵 위젯 (div 기반)
-    await expect(page.getByText('활동 잔디')).toBeVisible();
+    await expect(main.getByText('활동 잔디')).toBeVisible();
   });
 
   test('빈 데이터는 빈 상태 메시지를 보여준다', async ({ page, context }) => {
     await setCookies(context, authedCookies(), 'empty');
     await page.goto('/dashboard');
 
-    await expect(page.getByRole('heading', { name: '대시보드' })).toBeVisible();
-    await expect(page.getByText('아직 방문 기록이 없어요')).toBeVisible(); // 인기 북마크
-    await expect(page.getByText('폴더가 없어요')).toBeVisible(); // 주요 폴더
+    const main = page.getByRole('main');
+    await expect(main.getByRole('heading', { name: '대시보드' })).toBeVisible();
+    await expect(main.getByText('아직 방문 기록이 없어요')).toBeVisible(); // 인기 북마크
+    await expect(main.getByText('폴더가 없어요')).toBeVisible(); // 주요 폴더
     // 차트 빈 상태 힌트
-    await expect(page.getByText('북마크를 저장하거나 방문하면 추이가 그려져요')).toBeVisible();
+    await expect(main.getByText('북마크를 저장하거나 방문하면 추이가 그려져요')).toBeVisible();
   });
 
   test('기간 필터 클릭이 ?period= URL을 바꾸고 RSC가 재페치한다', async ({ page, context }) => {
     await setCookies(context, authedCookies(), 'full');
     await page.goto('/dashboard');
 
-    // webkit은 하이드레이션 직후 첫 클릭을 삼킬 수 있어 클릭+URL확인을 재시도한다
+    // 하이드레이션 직후 첫 클릭이 삼켜질 수 있어 클릭+URL확인을 재시도한다
     await expect(async () => {
       await page.getByRole('link', { name: '7일' }).click();
       await expect(page).toHaveURL(/period=7/, { timeout: 2000 });
     }).toPass({ timeout: 10_000 });
-    await expect(page.getByRole('heading', { name: '대시보드' })).toBeVisible();
+    await expect(page.getByRole('main').getByRole('heading', { name: '대시보드' })).toBeVisible();
   });
 
   test('서버 페치 실패 시 클라이언트 폴백이 사일런트 리프레시로 복구한다', async ({
@@ -68,8 +74,9 @@ test.describe('대시보드', () => {
     await setCookies(context, authedCookies(), 'fallback');
     await page.goto('/dashboard');
 
-    await expect(page.getByRole('heading', { name: '대시보드' })).toBeVisible();
-    await expect(page.getByText('전체 북마크')).toBeVisible();
+    const main = page.getByRole('main');
+    await expect(main.getByRole('heading', { name: '대시보드' })).toBeVisible();
+    await expect(main.getByText('전체 북마크')).toBeVisible();
   });
 
   test('완전 인증 실패 시 폴백이 세션 만료 화면을 보여준다', async ({ page, context }) => {
diff --git a/apps/web/test/e2e/tests/landing.spec.ts b/apps/web/test/e2e/tests/landing.spec.ts
index bdc2856..82c0f5f 100644
--- a/apps/web/test/e2e/tests/landing.spec.ts
+++ b/apps/web/test/e2e/tests/landing.spec.ts
@@ -12,8 +12,8 @@ test.describe('랜딩 페이지', () => {
     await expect(page.getByRole('heading', { level: 1 })).toContainText('Dookmark');
     // 피처 카드 3종
     await expect(page.getByRole('heading', { name: '실시간 동기화' })).toBeVisible();
-    await expect(page.getByRole('heading', { name: 'AI 지능형 요약 및 분류' })).toBeVisible();
-    await expect(page.getByRole('heading', { name: '강력한 보안 및 쿠키 세션' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: '다중 브라우저 통합 관리' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: '이중 백업 및 충돌 방지 가드' })).toBeVisible();
     // 푸터
     await expect(page.getByText(/© 2026 Dookmark/)).toBeVisible();
   });
diff --git a/apps/web/test/e2e/tests/responsive.spec.ts b/apps/web/test/e2e/tests/responsive.spec.ts
index 248b7c4..4e02c92 100644
--- a/apps/web/test/e2e/tests/responsive.spec.ts
+++ b/apps/web/test/e2e/tests/responsive.spec.ts
@@ -34,10 +34,11 @@ test.describe('반응형 레이아웃', () => {
   test('대시보드 통계 그리드: 모바일 2열 → 데스크톱 4열 @responsive', async ({ page, context }) => {
     await setCookies(context, authedCookies(), 'full');
     await page.goto('/dashboard');
-    await expect(page.getByRole('heading', { name: '대시보드' })).toBeVisible();
+    const main = page.getByRole('main');
+    await expect(main.getByRole('heading', { name: '대시보드' })).toBeVisible();
 
     // 첫 번째 그리드 = 통계 카드 (grid-cols-2 lg:grid-cols-4)
-    const statGrid = page.locator('main .grid').first();
+    const statGrid = main.locator('.grid').first();
 
     await page.setViewportSize(MOBILE);
     expect(
diff --git a/apps/web/ui/auth/auth-content.tsx b/apps/web/ui/auth/auth-content.tsx
index 00391de..25a4e80 100644
--- a/apps/web/ui/auth/auth-content.tsx
+++ b/apps/web/ui/auth/auth-content.tsx
@@ -51,7 +51,7 @@ export function AuthContent() {
           </div>
           <h2 className='text-3xl font-bold tracking-tight text-on-surface'>Dookmark</h2>
           <p className='text-sm text-on-surface-variant mt-1.5'>
-            지능형 북마크 관리 플랫폼에 오신 것을 환영합니다.
+            여러 브라우저의 북마크를 한곳에서.
           </p>
         </div>
 
diff --git a/apps/web/ui/shared/theme-context.tsx b/apps/web/ui/shared/theme-context.tsx
index 521203e..51596ff 100644
--- a/apps/web/ui/shared/theme-context.tsx
+++ b/apps/web/ui/shared/theme-context.tsx
@@ -3,7 +3,7 @@
 import type React from 'react';
 import { createContext, useContext, useEffect, useState } from 'react';
 
-type Theme = 'light' | 'dark';
+type Theme = 'light' | 'dark' | 'system';
 
 interface ThemeContextType {
   theme: Theme;
@@ -14,37 +14,53 @@ interface ThemeContextType {
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  // Read initial value synchronously if possible, or default to 'dark'
-  const [theme, setTheme] = useState<Theme>('dark');
+  const [theme, setTheme] = useState<Theme>('system');
+  const [systemPrefersDark, setSystemPrefersDark] = useState<boolean>(false);
 
-  // Load saved theme on mount
+  // Load saved theme and set up media query listener on mount
   useEffect(() => {
     const savedTheme = localStorage.getItem('theme') as Theme | null;
     if (savedTheme) {
       setTheme(savedTheme);
     } else {
-      localStorage.setItem('theme', 'dark');
+      localStorage.setItem('theme', 'system');
     }
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    setSystemPrefersDark(mediaQuery.matches);
+
+    const handleSystemThemeChange = (e: MediaQueryListEvent) => {
+      setSystemPrefersDark(e.matches);
+    };
+
+    mediaQuery.addEventListener('change', handleSystemThemeChange);
+    return () => {
+      mediaQuery.removeEventListener('change', handleSystemThemeChange);
+    };
   }, []);
 
-  // Declarative side-effect to sync document class and localStorage when theme changes
+  const isDark = theme === 'dark' || (theme === 'system' && systemPrefersDark);
+
+  // Declarative side-effect to sync document class and localStorage when theme or system pref changes
   useEffect(() => {
-    if (theme === 'dark') {
+    if (isDark) {
       document.documentElement.classList.add('dark');
     } else {
       document.documentElement.classList.remove('dark');
     }
     localStorage.setItem('theme', theme);
-  }, [theme]);
+  }, [theme, isDark]);
 
   const toggleTheme = () => {
-    setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'));
+    setTheme((prev) => {
+      if (prev === 'system') return 'light';
+      if (prev === 'light') return 'dark';
+      return 'system';
+    });
   };
 
   return (
-    <ThemeContext.Provider value={{ theme, toggleTheme, isDark: theme === 'dark' }}>
-      {children}
-    </ThemeContext.Provider>
+    <ThemeContext.Provider value={{ theme, toggleTheme, isDark }}>{children}</ThemeContext.Provider>
   );
 }