diff --git a/apps/backend/API_DOCUMENT.md b/apps/backend/API_DOCUMENT.md
index 448cb3d..204b55a 100644
--- a/apps/backend/API_DOCUMENT.md
+++ b/apps/backend/API_DOCUMENT.md
@@ -3,6 +3,11 @@
 ## Overview
 This service is a Hono API backed by Supabase.
 
+UI note (2026-03):
+- Frontend navigation/settings were consolidated into a header User Profile Menu.
+- Theme and language are stored client-side (`localStorage`) and do not introduce new backend endpoints.
+- Existing auth/item routes remain unchanged.
+
 Base URL example:
 - http://localhost:10000
 
diff --git a/apps/desktop/API_DOCUMENT.md b/apps/desktop/API_DOCUMENT.md
index e9218df..03762f9 100644
--- a/apps/desktop/API_DOCUMENT.md
+++ b/apps/desktop/API_DOCUMENT.md
@@ -3,6 +3,11 @@
 ## Overview
 Desktop exposes Rust commands via Tauri invoke.
 
+UI note (2026-03):
+- Frontend navigation/settings now use a header User Profile Menu.
+- Theme (`light`/`dark`) and language (`en`/`ja`) are local UI preferences persisted in frontend `localStorage`.
+- No new Tauri command was added for these settings; command surface below is unchanged.
+
 Frontend command call style:
 - invoke("command_name", payload)
 
diff --git a/apps/frontend/ARCHITECTURE.md b/apps/frontend/ARCHITECTURE.md
index abbc5c3..c52e8cc 100644
--- a/apps/frontend/ARCHITECTURE.md
+++ b/apps/frontend/ARCHITECTURE.md
@@ -21,6 +21,9 @@ The architecture separates responsibilities into:
 - Pinia-safe token injection into `HonoClient` via deferred token getter from `main.ts`.
 - Strong alignment with backend contract fields (`snake_case` item properties like `duration_minutes`, `sync_status`).
 - Frontend-only guest login: `useAuth` can create a transient guest identity (`isGuest`) without writing auth data to backend.
+- Global UI settings via `useSettings`: theme (`light`/`dark`) and language (`en`/`ja`) are shared through a composable singleton and persisted in `localStorage`.
+- Header profile consolidation: logout, theme switch, language switch, and sync status are grouped into a single avatar-triggered User Profile Menu.
+- i18n foundation: user-facing text in main shell screens is resolved through `t(key)` translation mapping for incremental expansion.
 - Guest-mode item handling in `useItems`: item CRUD runs in memory only, marks items as `local_only`, and skips sync/network calls.
 - **Guest seed data**: When guest mode is activated, `useItems` automatically populates the in-memory items array with 5 sample tasks showcasing varied statuses (backlog, todo, inprogress, done) and different Motivation/Duration values to demonstrate the ScatterPlot's visualization capabilities.
 - **Automated 30-second sync**: Background interval timer synchronizes items automatically when authenticated, with in-flight guard to prevent concurrent syncs.
@@ -81,6 +84,13 @@ The architecture separates responsibilities into:
 2. Factory returns Tauri or Hono implementation.
 3. In Hono mode, `honoClient` attaches bearer token via injected token getter.
 
+### UI settings and localization flow
+1. `main.ts` initializes `useSettings().initializeSettings()` before mount.
+2. Saved `theme` and `language` are restored from `localStorage`.
+3. Theme toggles add/remove `.dark` on the root `html` element.
+4. Shared UI strings call `t(key)` and resolve from the active language dictionary.
+5. Header User Profile Menu is the single entry point for theme/language toggles, sync indicator, and logout.
+
 ## API Mode Rules (`src/api/config.ts`)
 Mode selection priority:
 1. If Tauri runtime is detected (`window.__TAURI__` or `window.__TAURI_INTERNALS__`), use `tauri`.
@@ -119,6 +129,7 @@ apps/frontend/
 │   │   ├── useAuth.ts
 │   │   ├── useGraph.ts
 │   │   ├── useItems.ts
+│   │   ├── useSettings.ts
 │   │   └── useSyncStatus.ts
 │   ├── layouts/
 │   ├── stores/
diff --git a/apps/frontend/README.md b/apps/frontend/README.md
index 6d7f41d..b1c8665 100644
--- a/apps/frontend/README.md
+++ b/apps/frontend/README.md
@@ -4,6 +4,14 @@ This template should help get you started developing with Vue 3 and TypeScript i
 
 Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
 
+## Recent UI Updates
+
+- ScatterPlot theme sync now repaints after `nextTick()` on theme changes to avoid dark/light transition lag.
+- Canvas background and grid lines now map directly from `useSettings.theme` for stable first-frame rendering.
+- Task list status pills use shared CSS variables for instant light/dark readability.
+- Special Thanks modal labels are now routed through the i18n `t()` helper.
+- Brand badge background remains controlled by `--badge-bg` (kept white in both themes).
+
 ## Directory
 以下はGitHub Actionsによって、pushごとに最新のツリーに入れ替わります。
 タグを編集しないでください。
diff --git a/apps/frontend/src/components/GraphControl.vue b/apps/frontend/src/components/GraphControl.vue
index c947114..7c9c7ee 100644
--- a/apps/frontend/src/components/GraphControl.vue
+++ b/apps/frontend/src/components/GraphControl.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import type { GraphAxisField, GraphTimeRangeKey, GraphVisualField, SelectOption } from '@/types/graph';
+import { useSettings } from '@/composables/useSettings';
+
+const { t } = useSettings();
 
 defineProps<{
   range: GraphTimeRangeKey;
@@ -16,9 +19,7 @@ const emit = defineEmits<{
   'update:yField': [val: GraphAxisField];
   'update:colorField': [val: GraphVisualField];
   'update:radiusField': [val: GraphVisualField];
-  'refresh': [];
   'openDrawer': [mode: 'tasks' | 'create'];
-  'toggle-fullscreen': [];
 }>();
 </script>
 
@@ -26,28 +27,28 @@ const emit = defineEmits<{
   <section class="controls-bar">
     <div class="controls-grid">
       <div class="input-group">
-        <label>Window</label>
+        <label>{{ t('controlWindow') }}</label>
         <select :value="range" @change="emit('update:range', ($event.target as HTMLSelectElement).value as GraphTimeRangeKey)">
           <option v-for="o in rangeOptions" :key="o.value" :value="o.value">{{ o.label }}</option>
         </select>
       </div>
 
       <div class="input-group">
-        <label>Y-Axis</label>
+        <label>{{ t('controlYAxis') }}</label>
         <select :value="yField" @change="emit('update:yField', ($event.target as HTMLSelectElement).value as GraphAxisField)">
           <option v-for="o in axisOptions" :key="o.value" :value="o.value">{{ o.label }}</option>
         </select>
       </div>
 
       <div class="input-group">
-        <label>Color</label>
+        <label>{{ t('controlColor') }}</label>
         <select :value="colorField" @change="emit('update:colorField', ($event.target as HTMLSelectElement).value as GraphVisualField)">
           <option v-for="o in visualOptions" :key="o.value" :value="o.value">{{ o.label }}</option>
         </select>
       </div>
 
       <div class="input-group">
-        <label>Radius</label>
+        <label>{{ t('controlRadius') }}</label>
         <select :value="radiusField" @change="emit('update:radiusField', ($event.target as HTMLSelectElement).value as GraphVisualField)">
           <option v-for="o in visualOptions" :key="o.value" :value="o.value">{{ o.label }}</option>
         </select>
@@ -55,19 +56,8 @@ const emit = defineEmits<{
     </div>
 
     <div class="button-group">
-      <button class="secondary-btn" @click="emit('refresh')" title="Refresh Data">
-        Refresh
-      </button>
-
-      <button class="secondary-btn flex-btn" @click="emit('toggle-fullscreen')" title="Maximize Graph">
-        <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4h4m8 0h4v4m0 8v4h-4m-8 0H4v-4" />
-        </svg>
-        Maximize
-      </button>
-
-      <button class="secondary-btn" @click="emit('openDrawer', 'tasks')">Tasks</button>
-      <button class="primary-btn" @click="emit('openDrawer', 'create')">New Task</button>
+      <button class="secondary-btn" @click="emit('openDrawer', 'tasks')">{{ t('list') }}</button>
+      <button class="primary-btn" @click="emit('openDrawer', 'create')">{{ t('new') }}</button>
     </div>
   </section>
 </template>
@@ -76,8 +66,8 @@ const emit = defineEmits<{
 .controls-bar {
   margin-top: 0.75rem;
   border-radius: 1rem;
-  border: 1px solid rgba(226, 232, 240, 0.8);
-  background-color: rgba(255, 255, 255, 0.9);
+  border: 1px solid var(--tg-border-muted);
+  background-color: var(--tg-surface-translucent);
   padding: 0.625rem 1rem;
   display: flex;
   flex-wrap: wrap;
@@ -105,16 +95,17 @@ const emit = defineEmits<{
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.18em;
-  color: #94a3b8;
+  color: var(--text-muted);
   margin-bottom: 2px;
 }
 
 .input-group select {
   border-radius: 0.5rem;
-  border: 1px solid #cbd5e1;
-  background-color: #fff;
+  border: 1px solid var(--tg-border-default);
+  background-color: var(--bg-primary);
   padding: 0.375rem 0.75rem;
   font-size: 0.875rem;
+  color: var(--text-primary);
   outline: none;
   cursor: pointer;
 }
@@ -125,45 +116,35 @@ const emit = defineEmits<{
   align-items: center;
 }
 
-.flex-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-}
-
-.icon {
-  width: 14px;
-  height: 14px;
-}
-
 .primary-btn {
-  background-color: #2563eb;
+  background: linear-gradient(135deg, #ef4444 0%, #a855f7 50%, #3b82f6 100%);
   color: #fff;
   border: none;
   padding: 0.375rem 0.75rem;
   border-radius: 0.5rem;
-  font-weight: 500;
+  font-weight: 600;
   cursor: pointer;
-  transition: background-color 0.2s;
+  transition: transform 0.2s ease, filter 0.2s ease;
 }
 
 .primary-btn:hover {
-  background-color: #1d4ed8;
+  transform: translateY(-1px);
+  filter: brightness(1.06);
 }
 
 .secondary-btn {
-  background-color: #fff;
-  border: 1px solid #cbd5e1;
+  background-color: var(--bg-primary);
+  border: 1px solid var(--tg-border-default);
   padding: 0.375rem 0.75rem;
   border-radius: 0.5rem;
-  color: #334155;
+  color: var(--text-primary);
   font-size: 0.875rem;
   cursor: pointer;
   transition: all 0.2s;
 }
 
 .secondary-btn:hover {
-  background-color: #f8fafc;
-  border-color: #94a3b8;
+  background-color: var(--bg-secondary);
+  border-color: var(--tg-border-strong);
 }
 </style>
\ No newline at end of file
diff --git a/apps/frontend/src/components/Header.vue b/apps/frontend/src/components/Header.vue
index 92ebc2b..e8d7e8f 100644
--- a/apps/frontend/src/components/Header.vue
+++ b/apps/frontend/src/components/Header.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
-defineProps<{
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useSettings } from '@/composables/useSettings';
+
+const props = defineProps<{
   displayUsername: string;
   isSyncing: boolean;
   isGuest: boolean;
@@ -10,43 +13,168 @@ const emit = defineEmits<{
   'show-thanks': [];
   'show-help': [];
 }>();
+
+const { theme, language, toggleTheme, toggleLanguage, t } = useSettings();
+
+const isMenuOpen = ref(false);
+const menuRootRef = ref<HTMLElement | null>(null);
+const menuPanelRef = ref<HTMLElement | null>(null);
+
+const avatarLabel = computed(() => {
+  const trimmed = props.displayUsername?.trim();
+  if (!trimmed) return 'U';
+  return trimmed.slice(0, 1).toUpperCase();
+});
+
+const syncStatusLabel = computed(() => {
+  if (props.isGuest) return t('guestLocalMode');
+  return props.isSyncing ? t('dbSyncing') : t('dbIdle');
+});
+
+const themeLabel = computed(() => (theme.value === 'light' ? t('light') : t('dark')));
+const languageLabel = computed(() => (language.value === 'en' ? t('english') : t('japanese')));
+
+function toggleMenu(): void {
+  isMenuOpen.value = !isMenuOpen.value;
+}
+
+function closeMenu(): void {
+  isMenuOpen.value = false;
+}
+
+function focusMenuItem(index: number): void {
+  const menuPanel = menuPanelRef.value;
+  if (!menuPanel) return;
+
+  const items = Array.from(menuPanel.querySelectorAll<HTMLElement>('[role="menuitem"]'));
+  if (items.length === 0) return;
+
+  const wrappedIndex = (index + items.length) % items.length;
+  items[wrappedIndex]?.focus();
+}
+
+function handleMenuKeydown(event: KeyboardEvent): void {
+  if (!isMenuOpen.value) return;
+
+  const menuPanel = menuPanelRef.value;
+  if (!menuPanel) return;
+
+  const items = Array.from(menuPanel.querySelectorAll<HTMLElement>('[role="menuitem"]'));
+  if (items.length === 0) return;
+
+  const activeIndex = items.findIndex((item) => item === document.activeElement);
+
+  if (event.key === 'ArrowDown') {
+    event.preventDefault();
+    focusMenuItem(activeIndex < 0 ? 0 : activeIndex + 1);
+    return;
+  }
+
+  if (event.key === 'ArrowUp') {
+    event.preventDefault();
+    focusMenuItem(activeIndex < 0 ? items.length - 1 : activeIndex - 1);
+    return;
+  }
+
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    closeMenu();
+  }
+}
+
+function handleLogout(): void {
+  closeMenu();
+  emit('logout');
+}
+
+function handleDocumentClick(event: MouseEvent): void {
+  if (!menuRootRef.value) return;
+  const target = event.target as Node | null;
+  if (!target) return;
+  if (!menuRootRef.value.contains(target)) {
+    closeMenu();
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleDocumentClick);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleDocumentClick);
+});
+
+watch(isMenuOpen, async (open) => {
+  if (!open) return;
+  await nextTick();
+  focusMenuItem(0);
+});
 </script>
 
 <template>
   <header class="app-header">
     <div class="header-content">
       <div class="branding">
-        <h1 class="title">TaskGraph</h1>
-        <div 
+        <h1 class="title">{{ t('appTitle') }}</h1>
+        <button
+          type="button"
           class="version-badge" 
-          role="button" 
-          title="Special Thanks"
+          :title="t('specialThanks')"
+          :aria-label="t('specialThanks')"
           @click="emit('show-thanks')"
         >
           <span class="gradient-text">100 program v9</span>
-        </div>
+        </button>
       </div>
 
       <div class="user-actions">
         <button 
           class="help-circle" 
-          title="How to use"
+          :title="t('helpTitle')"
+          :aria-label="t('helpTitle')"
           @click="emit('show-help')"
         >
           ?
         </button>
 
-        <span class="status-indicator" :class="{ 'is-syncing': isSyncing && !isGuest }">
-          <span class="dot" />
-          {{ isGuest ? 'Guest local mode' : isSyncing ? 'Database syncing...' : 'Database idle' }}
-        </span>
-
-        <div class="profile-chip">
-          <span class="username">{{ displayUsername }}</span>
-          <span v-if="isGuest" class="guest-badge">Guest Mode</span>
-          <button type="button" class="logout-btn" @click="emit('logout')">
-            Logout
+        <div class="profile-menu" ref="menuRootRef">
+          <button
+            type="button"
+            class="profile-trigger"
+            :aria-expanded="isMenuOpen"
+            aria-haspopup="menu"
+            @click.stop="toggleMenu"
+          >
+            <span class="avatar">{{ avatarLabel }}</span>
+            <span class="username">{{ displayUsername }}</span>
+            <span v-if="isGuest" class="guest-badge">{{ t('guestMode') }}</span>
           </button>
+
+          <transition name="menu-fade">
+            <div v-if="isMenuOpen" ref="menuPanelRef" class="menu-panel" role="menu" @keydown="handleMenuKeydown" @click.stop>
+              <button type="button" class="menu-item" role="menuitem" @click="toggleTheme">
+                <span class="menu-label">{{ t('theme') }}</span>
+                <span class="menu-value">{{ themeLabel }}</span>
+              </button>
+
+              <button type="button" class="menu-item" role="menuitem" @click="toggleLanguage">
+                <span class="menu-label">{{ t('language') }}</span>
+                <span class="menu-value">{{ languageLabel }}</span>
+              </button>
+
+              <div class="menu-item menu-status" :class="{ 'is-syncing': isSyncing && !isGuest }">
+                <span class="menu-label">{{ t('syncStatus') }}</span>
+                <span class="status-value">
+                  <span class="dot" />
+                  {{ syncStatusLabel }}
+                </span>
+              </div>
+
+              <button type="button" class="menu-item logout-item" role="menuitem" @click="handleLogout">
+                {{ t('logout') }}
+              </button>
+            </div>
+          </transition>
         </div>
       </div>
     </div>
@@ -55,11 +183,13 @@ const emit = defineEmits<{
 
 <style scoped>
 .app-header {
+  position: relative;
+  z-index: var(--z-header);
   border-radius: 1rem;
-  border: 1px solid rgba(226, 232, 240, 0.8);
-  background-color: rgba(255, 255, 255, 0.9);
+  border: 1px solid var(--tg-border-muted);
+  background-color: var(--tg-surface-translucent);
   padding: 0.75rem 1rem;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--tg-shadow-soft);
   backdrop-filter: blur(4px);
 }
 
@@ -77,14 +207,15 @@ const emit = defineEmits<{
   font-size: 1.25rem;
   font-weight: 600;
   letter-spacing: -0.025em;
-  color: #020617;
+  color: var(--tg-text-strong);
   margin: 0;
 }
 
 .version-badge {
+  appearance: none;
   border-radius: 9999px;
   border: 1px solid #e2e8f0;
-  background-color: #fff;
+  background-color: var(--badge-bg);
   padding: 0.25rem 0.75rem;
   font-size: 0.875rem;
   font-weight: 600;
@@ -96,7 +227,7 @@ const emit = defineEmits<{
 .version-badge:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15);
-  background-color: #fafafa;
+  background-color: var(--badge-bg);
 }
 
 .gradient-text {
@@ -117,9 +248,9 @@ const emit = defineEmits<{
   width: 26px;
   height: 26px;
   border-radius: 50%;
-  border: 1px solid #cbd5e1;
-  background: white;
-  color: #64748b;
+  border: 1px solid var(--tg-border-default);
+  background: var(--tg-surface);
+  color: var(--tg-text-muted);
   font-size: 0.8rem;
   font-weight: 700;
   cursor: pointer;
@@ -130,29 +261,49 @@ const emit = defineEmits<{
 }
 
 .help-circle:hover {
-  background: #f8fafc;
-  color: #1e293b;
-  border-color: #94a3b8;
+  background: var(--tg-surface-raised);
+  color: var(--tg-text-default);
+  border-color: var(--tg-border-strong);
   transform: scale(1.05);
 }
 
-.status-indicator {
+.profile-menu {
+  position: relative;
+  z-index: calc(var(--z-header) + 10);
+  min-width: 0;
+}
+
+.profile-trigger {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  min-width: 0;
+  gap: 0.625rem;
   border-radius: 9999px;
-  border: 1px solid #cbd5e1;
-  background-color: #f1f5f9;
-  padding: 0.25rem 0.75rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: #334155;
+  border: 1px solid var(--tg-border-default);
+  background-color: var(--tg-surface);
+  padding: 0.375rem 0.625rem;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
 }
 
-.status-indicator.is-syncing {
-  border-color: #93c5fd;
-  background-color: #eff6ff;
-  color: #1d4ed8;
+.profile-trigger:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--tg-shadow-soft);
+  border-color: var(--tg-border-strong);
+}
+
+.avatar {
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: #ffffff;
+  background: linear-gradient(135deg, #ef4444, #a855f7, #3b82f6);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
 }
 
 .dot {
@@ -167,19 +318,16 @@ const emit = defineEmits<{
   animation: pulse 2s infinite;
 }
 
-.profile-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.75rem;
-  border-radius: 9999px;
-  border: 1px solid #e2e8f0;
-  background-color: #fff;
-  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
+.username {
+  min-width: 0;
+  max-width: 12rem;
+  font-weight: 500;
+  color: var(--tg-text-strong);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
-.username { font-weight: 500; color: #0f172a; }
-
 .guest-badge {
   border-radius: 9999px;
   border: 1px solid #fbbf24;
@@ -190,20 +338,93 @@ const emit = defineEmits<{
   font-weight: 700;
 }
 
-.logout-btn {
-  border-radius: 0.375rem;
-  border: 1px solid #cbd5e1;
-  background-color: #fff;
-  padding: 0.25rem 0.625rem;
-  font-size: 0.75rem;
-  cursor: pointer;
-  transition: all 0.2s;
+.menu-panel {
+  position: absolute;
+  top: calc(100% + 0.55rem);
+  right: 0;
+  min-width: 18rem;
+  border-radius: 0.85rem;
+  border: 1px solid var(--tg-border-default);
+  background: var(--tg-surface);
+  box-shadow: var(--tg-shadow-elevated);
+  padding: 0.45rem;
+  z-index: var(--z-dropdown);
+}
+
+.menu-item {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  border-radius: 0.6rem;
+  color: var(--tg-text-default);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.625rem 0.75rem;
+  font-size: 0.82rem;
+  text-align: left;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+.menu-item:hover {
+  background-color: var(--tg-surface-raised);
+}
+
+.menu-label {
+  font-weight: 600;
+}
+
+.menu-value {
+  color: var(--tg-text-muted);
+}
+
+.menu-status {
+  cursor: default;
 }
 
-.logout-btn:hover {
-  background-color: #fef2f2;
-  border-color: #fecaca;
-  color: #ef4444;
+.menu-status .status-value {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  color: var(--tg-text-muted);
+}
+
+.menu-status.is-syncing .status-value {
+  color: #1d4ed8;
+}
+
+.logout-item {
+  color: #dc2626;
+  font-weight: 700;
+}
+
+.logout-item:hover {
+  background-color: var(--bg-danger-hover, #fef2f2);
+}
+
+.menu-fade-enter-active,
+.menu-fade-leave-active {
+  transition: opacity 0.18s ease, transform 0.18s ease;
+  transform-origin: top right;
+}
+
+.menu-fade-enter-from,
+.menu-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-6px) scale(0.98);
+}
+
+@media (max-width: 640px) {
+  .header-content {
+    align-items: flex-start;
+  }
+
+  .menu-panel {
+    right: 0;
+    left: auto;
+    min-width: min(18rem, 92vw);
+  }
 }
 
 @keyframes pulse {
diff --git a/apps/frontend/src/components/ScatterPlot.vue b/apps/frontend/src/components/ScatterPlot.vue
index dbb755f..fef1ce3 100644
--- a/apps/frontend/src/components/ScatterPlot.vue
+++ b/apps/frontend/src/components/ScatterPlot.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
 import type { Item } from '@/types/item';
+import { useSettings } from '@/composables/useSettings';
 import type {
   GraphAxisField,
   GraphConfig,
@@ -17,6 +18,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (event: 'select-item', item: Item): void;
+  (event: 'request-create', payload: { due: string; motivation: number }): void;
 }>();
 
 const selectedRangeModel = defineModel<GraphTimeRangeKey>('range', { default: '1w' });
@@ -53,6 +55,22 @@ const clusterMenu = ref<{ visible: boolean; left: number; top: number; items: It
   top: 0,
   items: [],
 });
+const hoverTooltip = ref<{ visible: boolean; left: number; top: number; title: string; status: string }>({
+  visible: false,
+  left: 0,
+  top: 0,
+  title: '',
+  status: '',
+});
+
+const { theme, t } = useSettings();
+
+const themeTokens = ref({
+  background: '#ffffff',
+  border: '#e2e8f0',
+  label: '#64748b',
+  labelStrong: '#334155',
+});
 
 const {
   graphGroups,
@@ -144,6 +162,38 @@ function drawTriangle(
   ctx.closePath();
 }
 
+function brightenHexColor(color: string, amount: number): string {
+  const normalized = color.trim();
+  const shortHexMatch = /^#([0-9a-f]{3})$/i.exec(normalized);
+  const longHexMatch = /^#([0-9a-f]{6})$/i.exec(normalized);
+  const hex = shortHexMatch
+    ? shortHexMatch[1]?.split('').map((value) => `${value}${value}`).join('')
+    : longHexMatch?.[1];
+  if (!hex) return color;
+
+  const r = Number.parseInt(hex.slice(0, 2), 16);
+  const g = Number.parseInt(hex.slice(2, 4), 16);
+  const b = Number.parseInt(hex.slice(4, 6), 16);
+
+  const adjust = (value: number) => Math.round(value + (255 - value) * amount);
+  return `rgb(${adjust(r)}, ${adjust(g)}, ${adjust(b)})`;
+}
+
+function syncThemeTokens(): void {
+  const styles = getComputedStyle(document.documentElement);
+  const background = styles.getPropertyValue('--bg-primary').trim();
+  const border = styles.getPropertyValue('--border-color').trim();
+  const label = styles.getPropertyValue('--text-muted').trim();
+  const labelStrong = styles.getPropertyValue('--text-primary').trim();
+
+  themeTokens.value = {
+    background: background || '#ffffff',
+    border: border || '#e2e8f0',
+    label: label || '#64748b',
+    labelStrong: labelStrong || '#334155',
+  };
+}
+
 function drawScene(): void {
   const ctx = syncCanvasBackingStore();
   if (!ctx) return;
@@ -156,18 +206,24 @@ function drawScene(): void {
   if (layout.value.innerWidth <= 0 || layout.value.innerHeight <= 0) return;
 
   const { plotLeft, plotRight, plotTop, plotBottom, originX } = layout.value;
+  const isDarkMode = theme.value === 'dark';
+  const bgColor = isDarkMode ? '#111827' : '#ffffff';
+  const gridColor = isDarkMode ? '#334155' : '#e2e8f0';
+
+  ctx.fillStyle = bgColor;
+  ctx.fillRect(0, 0, width, height);
 
   // Zone styling with improved contrast
   // Past zone: Warm red with subtle transparency
-  ctx.fillStyle = 'rgba(229, 57, 70, 0.08)';
+  ctx.fillStyle = isDarkMode ? 'rgba(248, 113, 113, 0.12)' : 'rgba(229, 57, 70, 0.08)';
   ctx.fillRect(plotLeft, plotTop, Math.max(originX - plotLeft, 0), plotBottom - plotTop);
 
   // Future zone: Cool blue with improved visibility
-  ctx.fillStyle = 'rgba(37, 99, 235, 0.08)';
+  ctx.fillStyle = isDarkMode ? 'rgba(96, 165, 250, 0.12)' : 'rgba(37, 99, 235, 0.08)';
   ctx.fillRect(originX, plotTop, Math.max(plotRight - originX, 0), plotBottom - plotTop);
 
-  // Grid lines with enhanced visibility
-  ctx.strokeStyle = 'rgba(148, 163, 184, 0.3)';
+  // Grid color is mapped directly from theme state for transition-safe repaint.
+  ctx.strokeStyle = gridColor;
   ctx.lineWidth = 1;
   ctx.setLineDash([4, 6]);
   for (const tick of yTicks.value) {
@@ -184,7 +240,7 @@ function drawScene(): void {
   }
 
   // Now line with improved visibility
-  ctx.strokeStyle = 'rgba(15, 23, 42, 0.55)';
+  ctx.strokeStyle = isDarkMode ? 'rgba(226, 232, 240, 0.5)' : 'rgba(15, 23, 42, 0.55)';
   ctx.lineWidth = 1.4;
   ctx.setLineDash([6, 6]);
   ctx.beginPath();
@@ -194,7 +250,7 @@ function drawScene(): void {
   ctx.setLineDash([]);
 
   // Axes labels
-  ctx.fillStyle = '#64748b';
+  ctx.fillStyle = themeTokens.value.label;
   ctx.font = '11px ui-sans-serif, system-ui, -apple-system, Segoe UI';
   ctx.textAlign = 'center';
   ctx.textBaseline = 'top';
@@ -209,17 +265,18 @@ function drawScene(): void {
 
   ctx.textAlign = 'left';
   ctx.textBaseline = 'bottom';
-  ctx.fillText('Past', plotLeft + 4, plotTop - 4);
+  ctx.fillText(t('past'), plotLeft + 4, plotTop - 4);
   ctx.textAlign = 'right';
-  ctx.fillText('Future', plotRight - 4, plotTop - 4);
+  ctx.fillText(t('future'), plotRight - 4, plotTop - 4);
 
   // Nodes and badges
   for (const group of graphGroups.value) {
     const radius = Math.max(group.radius, 6);
 
     ctx.save();
-    ctx.fillStyle = group.color;
-    ctx.strokeStyle = 'rgba(255,255,255,0.95)';
+    const dotColor = isDarkMode ? brightenHexColor(group.color, 0.28) : group.color;
+    ctx.fillStyle = dotColor;
+    ctx.strokeStyle = isDarkMode ? 'rgba(15, 23, 42, 0.92)' : 'rgba(255,255,255,0.95)';
     ctx.lineWidth = 2;
 
     if (group.marker === 'circle') {
@@ -322,6 +379,17 @@ function closeClusterMenu(): void {
   clusterMenu.value.items = [];
 }
 
+function closeHoverTooltip(): void {
+  hoverTooltip.value.visible = false;
+}
+
+function getStatusLabel(status: Item['status']): string {
+  if (status === 'backlog') return t('statusBacklog');
+  if (status === 'inprogress') return t('statusDoing');
+  if (status === 'done') return t('statusDone');
+  return t('statusTodo');
+}
+
 function handleCanvasClick(event: MouseEvent): void {
   const point = getCanvasPoint(event);
   if (!point) return;
@@ -344,6 +412,58 @@ function handleCanvasClick(event: MouseEvent): void {
   openClusterMenu(clickedGroup);
 }
 
+function handleCanvasMove(event: MouseEvent): void {
+  const point = getCanvasPoint(event);
+  if (!point) {
+    closeHoverTooltip();
+    return;
+  }
+
+  const hoveredGroup = findClickedGroup(point.x, point.y);
+  if (!hoveredGroup) {
+    closeHoverTooltip();
+    return;
+  }
+
+  const firstItem = hoveredGroup.items[0];
+  if (!firstItem) {
+    closeHoverTooltip();
+    return;
+  }
+
+  const title = hoveredGroup.items.length > 1
+    ? `${hoveredGroup.items.length} ${t('groupedTasksCount')}`
+    : firstItem.title;
+
+  hoverTooltip.value = {
+    visible: true,
+    left: clamp(point.x + 16, 8, Math.max(8, layout.value.width - 230)),
+    top: clamp(point.y + 16, 8, Math.max(8, layout.value.height - 80)),
+    title,
+    status: `${t('statusPrefix')}: ${getStatusLabel(firstItem.status)}`,
+  };
+}
+
+function handleCanvasDoubleClick(event: MouseEvent): void {
+  const point = getCanvasPoint(event);
+  if (!point || layout.value.innerWidth <= 0 || layout.value.innerHeight <= 0) return;
+
+  const rangeMs = graphConfig.timeRanges[selectedRange.value];
+  const ratioX = clamp((point.x - layout.value.plotLeft) / layout.value.innerWidth, 0, 1);
+  const timeOffsetMs = (ratioX * 2 - 1) * rangeMs;
+  const dueIso = new Date(layout.value.nowMs + timeOffsetMs).toISOString();
+
+  const ratioY = 1 - clamp((point.y - layout.value.plotTop) / layout.value.innerHeight, 0, 1);
+  const motivation = clamp(Math.round(1 + ratioY * 9), 1, 10);
+
+  closeClusterMenu();
+  closeHoverTooltip();
+  emit('request-create', {
+    due: dueIso,
+    motivation,
+  });
+}
+
 function handleClusterItemSelect(item: Item): void {
   emit('select-item', item);
   closeClusterMenu();
@@ -407,9 +527,25 @@ watch(selectedRadiusField, (value) => {
 
 watch([selectedRange, selectedYField, selectedColorField, selectedRadiusField], () => {
   closeClusterMenu();
+  closeHoverTooltip();
   refreshNow();
 });
 
+watch(
+  theme,
+  async () => {
+    await nextTick();
+    // Theme switch only needs a repaint; skip expensive graph recomputation.
+    syncThemeTokens();
+    if (animationFrame !== null) {
+      window.cancelAnimationFrame(animationFrame);
+      animationFrame = null;
+    }
+    drawScene();
+  },
+  { flush: 'post', immediate: true },
+);
+
 watch(
   [graphGroups, layout, warnings],
   async () => {
@@ -421,10 +557,12 @@ watch(
 );
 
 onMounted(async () => {
+  syncThemeTokens();
   await nextTick();
   updateViewportSize();
   await nextTick();
   updateViewportSize();
+  drawScene();
 
   resizeObserver = new ResizeObserver(() => {
     updateViewportSize();
@@ -453,6 +591,7 @@ onUnmounted(() => {
   if (sizeRetryFrame !== null) {
     window.cancelAnimationFrame(sizeRetryFrame);
   }
+  closeHoverTooltip();
   destroy();
 });
 </script>
@@ -475,14 +614,26 @@ onUnmounted(() => {
         class="main-canvas"
         :style="stageStyle"
         @click="handleCanvasClick"
+        @mousemove="handleCanvasMove"
+        @mouseleave="closeHoverTooltip"
+        @dblclick.prevent="handleCanvasDoubleClick"
       />
 
+      <div
+        v-if="hoverTooltip.visible"
+        class="hover-tooltip"
+        :style="{ left: `${hoverTooltip.left}px`, top: `${hoverTooltip.top}px` }"
+      >
+        <p class="tooltip-title">{{ hoverTooltip.title }}</p>
+        <p class="tooltip-status">{{ hoverTooltip.status }}</p>
+      </div>
+
       <div
         v-if="clusterMenu.visible"
         class="cluster-popup"
         :style="{ left: `${clusterMenu.left}px`, top: `${clusterMenu.top}px` }"
       >
-        <p class="popup-header">Grouped Tasks</p>
+        <p class="popup-header">{{ t('groupedTasks') }}</p>
         <ul class="popup-list">
           <li v-for="item in clusterMenu.items" :key="item.id">
             <button
@@ -525,17 +676,17 @@ onUnmounted(() => {
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 1rem;
-  background: rgba(255, 255, 255, 0.7);
+  background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(226, 232, 240, 0.8);
   border-radius: 10px;
   font-size: 0.7rem;
-  color: #64748b;
+  color: var(--text-primary);
   width: fit-content;
 }
 
 .debug-panel strong {
-  color: #1e293b;
+  color: var(--text-strong);
   font-weight: 800;
 }
 
@@ -544,14 +695,14 @@ onUnmounted(() => {
 }
 
 .debug-panel .label {
-  color: #94a3b8;
+  color: var(--text-muted);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 
 .debug-panel .dot {
-  color: #e2e8f0;
+  color: var(--tg-border-default);
 }
 
 /* --- Main Canvas Viewport --- */
@@ -560,7 +711,7 @@ onUnmounted(() => {
   flex: 1;
   min-height: 0;
   overflow: hidden;
-  background: white;
+  background: var(--bg-primary);
   border-radius: 20px;
   border: 1px solid rgba(226, 232, 240, 0.8);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
@@ -579,9 +730,9 @@ onUnmounted(() => {
   position: absolute;
   z-index: 30;
   width: 260px;
-  background: rgba(255, 255, 255, 0.9);
+  background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
   backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.8);
+  border: 1px solid color-mix(in srgb, var(--tg-border-default) 80%, transparent);
   border-radius: 16px;
   padding: 0.75rem;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
@@ -591,7 +742,7 @@ onUnmounted(() => {
 .popup-header {
   font-size: 0.65rem;
   font-weight: 800;
-  color: #94a3b8;
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.1em;
   margin-bottom: 0.75rem;
@@ -611,7 +762,7 @@ onUnmounted(() => {
   width: 4px;
 }
 .popup-list::-webkit-scrollbar-thumb {
-  background: #e2e8f0;
+  background: var(--tg-border-default);
   border-radius: 10px;
 }
 
@@ -621,7 +772,7 @@ onUnmounted(() => {
   text-align: left;
   font-size: 0.85rem;
   font-weight: 600;
-  color: #475569;
+  color: var(--text-primary);
   background: transparent;
   border: none;
   border-radius: 10px;
@@ -634,6 +785,34 @@ onUnmounted(() => {
   color: #a855f7;
 }
 
+.hover-tooltip {
+  position: absolute;
+  z-index: 35;
+  pointer-events: none;
+  min-width: 180px;
+  max-width: 220px;
+  border-radius: 12px;
+  border: 1px solid color-mix(in srgb, var(--tg-border-default) 85%, transparent);
+  background: color-mix(in srgb, var(--bg-primary) 93%, transparent);
+  backdrop-filter: blur(14px);
+  box-shadow: 0 10px 26px rgba(2, 6, 23, 0.2);
+  padding: 0.55rem 0.7rem;
+}
+
+.tooltip-title {
+  margin: 0;
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: var(--text-strong);
+  line-height: 1.35;
+}
+
+.tooltip-status {
+  margin: 0.22rem 0 0;
+  font-size: 0.72rem;
+  color: var(--text-muted);
+}
+
 /* --- Warnings --- */
 .canvas-warning {
   pointer-events: none;
diff --git a/apps/frontend/src/components/SpecialThanks.vue b/apps/frontend/src/components/SpecialThanks.vue
index 85bfbda..94d5fd8 100644
--- a/apps/frontend/src/components/SpecialThanks.vue
+++ b/apps/frontend/src/components/SpecialThanks.vue
@@ -1,61 +1,56 @@
 <script setup lang="ts">
+import { useSettings } from '@/composables/useSettings';
+
 defineProps<{ show: boolean }>();
 const emit = defineEmits<{ 'close': [] }>();
+const { t } = useSettings();
 
-const hosts = ['TS', 'TY'];
-const mentors = ['YB', 'AS', 'KY', 'MA'];
-const feedbacks = ['RK(友人)', 'RN(友人・9期生)'];
+const feedbacks = ['河原諒晟', '長坂怜', '小野春花'];
+const teamMembers = ['柿花雨実'];
 </script>
 
 <template>
   <transition name="modal-fade">
     <div v-if="show" class="modal-overlay" @click.self="emit('close')">
-      <div class="modal-card">
+      <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="specialThanksTitle">
         <header class="modal-header">
           <div class="v9-tag">100 program v9</div>
-          <h2 class="modal-title">TaskGraph</h2>
-          <button class="close-btn" @click="emit('close')" aria-label="Close">&times;</button>
+          <h2 id="specialThanksTitle" class="modal-title">TaskGraph</h2>
+          <button class="close-btn" @click="emit('close')" :aria-label="t('thanksClose')">&times;</button>
         </header>
 
         <div class="modal-body">
           <div class="author-section">
-            <span class="label">Developed by</span>
+            <span class="label">{{ t('thanksDevelopedBy') }}</span>
             <h3 class="author-name">Suzuha Takaki</h3>
             <div class="author-links">
-              <a href="https://github.com/aki91-g" target="_blank" rel="noopener noreferrer" class="link">GitHub Profile →</a>
+              <a href="https://github.com/aki91-g" target="_blank" rel="noopener noreferrer" class="link">{{ t('thanksGithubProfile') }} →</a>
             </div>
           </div>
 
           <div class="program-info">
             <p class="intro-text">
-              TaskGraphは <strong>100 program 9期 (2026春期)</strong> において製作されました。
+              {{ t('thanksIntro', { program: '100 program 9th (Spring 2026)' }) }}
             </p>
-            <a href="https://100program.jp" target="_blank" rel="noopener noreferrer" class="link">100 program Official Site →</a>
+            <a href="https://100program.jp" target="_blank" rel="noopener noreferrer" class="link">{{ t('thanksOfficialSite') }} →</a>
           </div>
 
           <div class="divider"></div>
 
           <div class="thanks-container">
-            <h3 class="thanks-title">Special Thanks to</h3>
+            <h3 class="thanks-title">{{ t('thanksSectionTitle') }}</h3>
             <div class="thanks-grid">
               <section class="thanks-item">
-                <span class="role-label">Program Hosts</span>
+                <span class="role-label">{{ t('thanksFeedback') }}</span>
                 <ul class="name-grid">
-                  <li v-for="name in hosts" :key="name" class="name-chip">{{ name }}</li>
+                  <li v-for="name in feedbacks" :key="name" class="name-chip">{{ name }}</li>
                 </ul>
               </section>
 
               <section class="thanks-item">
-                <span class="role-label">Special Support</span>
+                <span class="role-label">{{ t('thanksTeam') }}</span>
                 <ul class="name-grid">
-                  <li v-for="name in mentors" :key="name" class="name-chip">{{ name }}</li>
-                </ul>
-              </section>
-
-              <section class="thanks-item thanks-item-wide">
-                <span class="role-label">Feedback from</span>
-                <ul class="name-grid feedback-grid">
-                  <li v-for="name in feedbacks" :key="name" class="name-chip">{{ name }}</li>
+                  <li v-for="name in teamMembers" :key="name" class="name-chip">{{ name }}</li>
                 </ul>
               </section>
             </div>
@@ -63,7 +58,7 @@ const feedbacks = ['RK(友人)', 'RN(友人・9期生)'];
         </div>
 
         <footer class="modal-footer">
-          <p class="copyright">&copy; 2026 TaskGraph Project</p>
+          <p class="copyright">&copy; 2026 {{ t('thanksCopyright') }}</p>
         </footer>
       </div>
     </div>
@@ -74,7 +69,7 @@ const feedbacks = ['RK(友人)', 'RN(友人・9期生)'];
 .modal-overlay {
   position: fixed;
   inset: 0;
-  z-index: 9999;
+  z-index: var(--z-modal);
   background: rgba(15, 23, 42, 0.75);
   backdrop-filter: blur(10px);
   display: flex;
@@ -85,7 +80,7 @@ const feedbacks = ['RK(友人)', 'RN(友人・9期生)'];
 
 /* メインカード */
 .modal-card {
-  background: #ffffff;
+  background: var(--bg-primary);
   width: 100%;
   max-width: 720px;
   max-height: min(88vh, 820px);
@@ -102,14 +97,14 @@ const feedbacks = ['RK(友人)', 'RN(友人・9期生)'];
   padding: 2rem 2rem 1rem;
   text-align: center;
   position: relative;
-  background: linear-gradient(to bottom, #f8fafc, #ffffff);
+  background: linear-gradient(to bottom, var(--bg-secondary), var(--bg-primary));
   flex-shrink: 0;
 }
 
 .modal-title {
   font-size: 2rem;
   font-weight: 900;
-  color: #0f172a;
+  color: var(--text-strong);
   letter-spacing: -0.05em;
   margin: 0;
 }
@@ -130,16 +125,17 @@ const feedbacks = ['RK(友人)', 'RN(友人・9期生)'];
   position: absolute;
   top: 1.5rem;
   right: 1.5rem;
+  z-index: 2;
   font-size: 2rem;
   background: none;
   border: none;
-  color: #94a3b8;
+  color: var(--text-muted);
   cursor: pointer;
   line-height: 1;
   transition: color 0.2s;
 }
 
-.close-btn:hover { color: #64748b; }
+.close-btn:hover { color: var(--text-primary); }
 
 /* ボディ */
 .modal-body {
@@ -150,11 +146,11 @@ const feedbacks = ['RK(友人)', 'RN(友人・9期生)'];
 }
 
 .author-section {
-  background: #f8fafc;
+  background: var(--bg-secondary);
   padding: 1.5rem;
   border-radius: 1.5rem;
   margin-bottom: 1.5rem;
-  border: 1px solid #f1f5f9;
+  border: 1px solid var(--tg-border-default);
 }
 
 .author-section .label {
@@ -162,33 +158,33 @@ const feedbacks = ['RK(友人)', 'RN(友人・9期生)'];
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 0.15em;
-  color: #64748b;
+  color: var(--text-muted);
   margin-bottom: 0.5rem;
 }
 
 .author-name {
   font-size: 1.75rem;
   font-weight: 900;
-  color: #0f172a;
+  color: var(--text-strong);
   margin: 0 0 0.5rem 0;
 }
 
 .intro-text {
   font-size: 0.95rem;
   line-height: 1.6;
-  color: #475569;
+  color: var(--text-primary);
 }
 
 .divider {
   height: 1px;
-  background: linear-gradient(to right, transparent, #e2e8f0, transparent);
+  background: linear-gradient(to right, transparent, var(--tg-border-default), transparent);
   margin: 2.5rem 0;
 }
 
 .thanks-title {
   font-size: 1.5rem;
   font-weight: 950;
-  color: #0f172a;
+  color: var(--text-strong);
   margin-bottom: 1.5rem;
   letter-spacing: -0.06em;
 }
@@ -201,30 +197,26 @@ const feedbacks = ['RK(友人)', 'RN(友人・9期生)'];
 }
 
 .thanks-item {
-  border: 1px solid #e2e8f0;
+  border: 1px solid var(--tg-border-default);
   border-radius: 1rem;
   padding: 1rem;
-  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
   text-align: center;
 }
 
-.thanks-item-wide {
-  grid-column: 1 / -1;
-}
-
 .role-label {
   display: block;
   font-size: 0.65rem;
   text-transform: uppercase;
   letter-spacing: 0.1em;
-  color: #94a3b8;
+  color: var(--text-muted);
   margin-bottom: 0.5rem;
 }
 
 .person-name {
   font-size: 1.15rem;
   font-weight: 800;
-  color: #1e293b;
+  color: var(--text-primary);
   padding: 0.4rem 1rem;
   margin: 0;
 }
@@ -238,18 +230,14 @@ const feedbacks = ['RK(友人)', 'RN(友人・9期生)'];
   gap: 0.6rem;
 }
 
-.feedback-grid {
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-}
-
 .name-chip {
-  border: 1px solid #dbe3ee;
-  background: #ffffff;
+  border: 1px solid var(--tg-border-default);
+  background: var(--bg-primary);
   border-radius: 0.75rem;
   padding: 0.5rem 0.65rem;
   font-size: 1rem;
   font-weight: 700;
-  color: #334155;
+  color: var(--text-primary);
 }
 
 .link {
@@ -264,14 +252,14 @@ const feedbacks = ['RK(友人)', 'RN(友人・9期生)'];
 
 .modal-footer {
   padding: 1.25rem;
-  background: #f8fafc;
-  border-top: 1px solid #f1f5f9;
+  background: var(--bg-secondary);
+  border-top: 1px solid var(--tg-border-default);
   flex-shrink: 0;
 }
 
 .copyright {
   font-size: 0.75rem;
-  color: #94a3b8;
+  color: var(--text-muted);
   margin: 0;
 }
 
@@ -306,12 +294,7 @@ const feedbacks = ['RK(友人)', 'RN(友人・9期生)'];
     grid-template-columns: 1fr;
   }
 
-  .thanks-item-wide {
-    grid-column: auto;
-  }
-
-  .name-grid,
-  .feedback-grid {
+  .name-grid {
     grid-template-columns: 1fr;
   }
 }
diff --git a/apps/frontend/src/components/TaskDrawer.vue b/apps/frontend/src/components/TaskDrawer.vue
index e7d1f39..fb40875 100644
--- a/apps/frontend/src/components/TaskDrawer.vue
+++ b/apps/frontend/src/components/TaskDrawer.vue
@@ -3,12 +3,14 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import type { Item } from '@/types/item';
 import TaskList from '@/components/TaskList.vue';
 import { useItems } from '@/composables/useItems';
+import { useSettings } from '@/composables/useSettings';
 
 type DrawerMode = 'create' | 'view' | 'edit' | 'tasks';
 
 const props = defineProps<{
   open: boolean;
   mode: DrawerMode;
+  createSeed?: { due: string; motivation: number } | null;
   selectedItem: Item | null;
   items: Item[];
   syncMap: Record<string, 'pending' | 'success' | 'error' | undefined>;
@@ -45,6 +47,7 @@ const viewStatusSelectId = 'task-drawer-status-view';
 const editStatusSelectId = 'task-drawer-status-edit';
 
 const { createItem, updateItem, updateItemStatus, archiveItem, softDeleteItem, items: repositoryItems } = useItems();
+const { t, language } = useSettings();
 
 const strictSyncMap = computed<Record<string, 'pending' | 'success' | 'error'>>(() => {
   const normalized: Record<string, 'pending' | 'success' | 'error'> = {};
@@ -69,14 +72,21 @@ const strictErrorMap = computed<Record<string, string>>(() => {
 const isMutating = computed(() => isSavingEdit.value || isArchiving.value || isDeleting.value || isUpdatingStatus.value);
 const drawerTitle = computed(() => (
   props.mode === 'create'
-    ? 'Create Task'
+    ? t('drawerCreateTask')
     : props.mode === 'view'
-      ? 'Details'
+      ? t('drawerDetails')
       : props.mode === 'edit'
-        ? 'Edit Task'
-        : 'Tasks'
+        ? t('drawerEditTask')
+        : t('list')
 ));
 
+const localizedStatusOptions = computed(() => ([
+  { value: 'backlog', label: t('statusBacklog') },
+  { value: 'todo', label: t('statusTodo') },
+  { value: 'doing', label: t('statusDoing') },
+  { value: 'done', label: t('statusDone') },
+]));
+
 function toDatetimeLocal(isoValue: string): string {
   const date = new Date(isoValue);
   if (Number.isNaN(date.getTime())) return '';
@@ -95,6 +105,18 @@ function resetCreateForm(): void {
   createDue.value = now.toISOString().slice(0, 16);
 }
 
+function applyCreateSeed(): void {
+  const seed = props.createSeed;
+  if (!seed) return;
+
+  const dueDate = new Date(seed.due);
+  if (!Number.isNaN(dueDate.getTime())) {
+    createDue.value = toDatetimeLocal(dueDate.toISOString());
+  }
+
+  createMotivation.value = Math.min(10, Math.max(1, Math.round(seed.motivation)));
+}
+
 function hydrateEditForm(item: Item | null): void {
   if (!item) {
     editTitle.value = '';
@@ -114,6 +136,19 @@ function hydrateEditForm(item: Item | null): void {
   selectedStatusUi.value = toUiStatus(item.status);
 }
 
+function formatDateForLocale(isoValue: string): string {
+  const date = new Date(isoValue);
+  if (Number.isNaN(date.getTime())) return '';
+  const locale = language.value === 'ja' ? 'ja-JP' : 'en-US';
+  return date.toLocaleString(locale, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
 function toUiStatus(status: Item['status']): 'backlog' | 'todo' | 'doing' | 'done' {
   if (status === 'backlog') return 'backlog';
   if (status === 'done') return 'done';
@@ -207,7 +242,7 @@ async function handleArchive(): Promise<void> {
 
 async function handleDelete(): Promise<void> {
   if (isMutating.value || !props.selectedItem) return;
-  if (!confirm('Are you sure you want to delete this task?')) return;
+  if (!confirm(t('drawerDeleteConfirm'))) return;
 
   isDeleting.value = true;
   try {
@@ -289,11 +324,32 @@ watch(
   (mode) => {
     if (mode === 'create') {
       resetCreateForm();
+      applyCreateSeed();
     }
   },
   { immediate: true },
 );
 
+watch(
+  () => props.createSeed,
+  () => {
+    if (props.mode === 'create' && props.open) {
+      applyCreateSeed();
+    }
+  },
+  { deep: true },
+);
+
+watch(
+  () => props.open,
+  (isOpen) => {
+    if (isOpen && props.mode === 'create') {
+      resetCreateForm();
+      applyCreateSeed();
+    }
+  },
+);
+
 watch(
   () => props.selectedItem,
   (item) => {
@@ -329,7 +385,7 @@ onUnmounted(() => {
               <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
               </svg>
-              <span>Back</span>
+              <span>{{ t('drawerBack') }}</span>
             </button>
             <h2 id="task-drawer-title" class="drawer-title">{{ drawerTitle }}</h2>
           </div>
@@ -339,9 +395,9 @@ onUnmounted(() => {
               <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
               </svg>
-              <span>New</span>
+              <span>{{ t('new') }}</span>
             </button>
-            <button type="button" class="secondary-button-sm" @click="closeDrawer">Close</button>
+            <button type="button" class="secondary-button-sm" @click="closeDrawer">{{ t('drawerClose') }}</button>
           </div>
         </header>
 
@@ -349,30 +405,30 @@ onUnmounted(() => {
           <transition name="fade-slide" mode="out-in">
             <form v-if="mode === 'create'" key="create" @submit.prevent="submitCreate" class="task-form">
               <div class="input-group">
-                <label>Title *</label>
-                <input v-model="createTitle" type="text" placeholder="Task name..." :disabled="isCreating" class="user-input" />
+                <label>{{ t('drawerTitleRequired') }}</label>
+                <input v-model="createTitle" type="text" :placeholder="t('drawerTitlePlaceholder')" :disabled="isCreating" class="user-input" />
               </div>
 
               <div class="input-group">
-                <label>Description</label>
-                <textarea v-model="createDescription" rows="3" placeholder="Optional notes" :disabled="isCreating" class="user-input" />
+                <label>{{ t('drawerDescription') }}</label>
+                <textarea v-model="createDescription" rows="3" :placeholder="t('drawerDescriptionPlaceholder')" :disabled="isCreating" class="user-input" />
               </div>
 
               <div class="input-row">
                 <div class="input-group">
-                  <label>Due *</label>
+                  <label>{{ t('drawerDueRequired') }}</label>
                   <input v-model="createDue" type="datetime-local" :disabled="isCreating" class="user-input" />
                 </div>
                 <div class="input-group">
-                  <label>Duration (min)</label>
+                  <label>{{ t('drawerDurationMin') }}</label>
                   <input v-model.number="createDuration" type="number" min="1" :disabled="isCreating" class="user-input" />
                 </div>
               </div>
 
               <div class="form-actions">
-                <button type="button" class="link-text" @click="cancelCreate">Cancel</button>
+                <button type="button" class="link-text" @click="cancelCreate">{{ t('drawerCancel') }}</button>
                 <button type="submit" :disabled="!createTitle.trim() || !createDue.trim() || isCreating" class="primary-button">
-                  {{ isCreating ? 'Creating...' : 'Create Task' }}
+                  {{ isCreating ? t('drawerCreating') : t('drawerCreateTask') }}
                 </button>
               </div>
             </form>
@@ -381,30 +437,27 @@ onUnmounted(() => {
               <div v-if="selectedItem" class="detail-card">
                 <div class="detail-header">
                   <h3>{{ selectedItem.title }}</h3>
-                  <button type="button" class="edit-link" @click="startEdit">Edit</button>
+                  <button type="button" class="edit-link" @click="startEdit">{{ t('drawerEdit') }}</button>
                 </div>
-                <p class="detail-desc">{{ selectedItem.description || 'No description' }}</p>
+                <p class="detail-desc">{{ selectedItem.description || t('drawerNoDescription') }}</p>
                 
                 <div class="detail-grid">
                   <div class="grid-item">
-                    <label class="label" :for="viewStatusSelectId">Status</label>
+                    <label class="label" :for="viewStatusSelectId">{{ t('drawerStatus') }}</label>
                     <select
                       :id="viewStatusSelectId"
                       v-model="selectedStatusUi"
                       class="status-select"
                       :disabled="isMutating"
-                      aria-label="Task status in details view"
+                      :aria-label="t('drawerStatusAriaView')"
                       @change="handleStatusChange"
                     >
-                      <option value="backlog">Backlog</option>
-                      <option value="todo">todo</option>
-                      <option value="doing">doing</option>
-                      <option value="done">done</option>
+                      <option v-for="statusOption in localizedStatusOptions" :key="statusOption.value" :value="statusOption.value">{{ statusOption.label }}</option>
                     </select>
                   </div>
-                  <div class="grid-item"><span class="label">Due</span><p>{{ new Date(selectedItem.due).toLocaleString() }}</p></div>
-                  <div class="grid-item"><span class="label">Motivation</span><p>{{ selectedItem.motivation ?? '5' }}</p></div>
-                  <div class="grid-item"><span class="label">Duration</span><p>{{ selectedItem.duration_minutes ?? '---' }} min</p></div>
+                  <div class="grid-item"><span class="label">{{ t('drawerDue') }}</span><p>{{ formatDateForLocale(selectedItem.due) }}</p></div>
+                  <div class="grid-item"><span class="label">{{ t('drawerMotivation') }}</span><p>{{ selectedItem.motivation ?? '5' }}</p></div>
+                  <div class="grid-item"><span class="label">{{ t('drawerDuration') }}</span><p>{{ selectedItem.duration_minutes ?? '---' }} {{ t('drawerMinuteUnit') }}</p></div>
                 </div>
               </div>
             </div>
@@ -416,58 +469,55 @@ onUnmounted(() => {
             <form v-else key="edit" class="task-form edit-form" @submit.prevent="handleEditSubmit">
               <div class="edit-fields">
                 <div class="input-group">
-                  <label>Title</label>
+                  <label>{{ t('drawerTitle') }}</label>
                   <input v-model="editTitle" type="text" :disabled="isSavingEdit" class="user-input" />
                 </div>
                 <div class="input-group">
-                  <label>Description</label>
+                  <label>{{ t('drawerDescription') }}</label>
                   <textarea v-model="editDescription" rows="6" :disabled="isSavingEdit" class="user-input" />
                 </div>
 
                 <div class="input-group">
-                  <label>Due</label>
+                  <label>{{ t('drawerDue') }}</label>
                   <input v-model="editDue" type="datetime-local" :disabled="isSavingEdit" class="user-input" />
                 </div>
 
                 <div class="input-group">
-                  <label>Duration (min)</label>
+                  <label>{{ t('drawerDurationMin') }}</label>
                   <input v-model.number="editDuration" type="number" min="1" :disabled="isSavingEdit" class="user-input" />
                 </div>
 
                 <div class="input-group">
-                  <label>Motivation</label>
+                  <label>{{ t('drawerMotivation') }}</label>
                   <select v-model.number="editMotivation" :disabled="isSavingEdit" class="user-input">
                     <option v-for="n in 10" :key="n" :value="n">{{ n }}</option>
                   </select>
                 </div>
 
                 <div class="input-group">
-                  <label :for="editStatusSelectId">Status</label>
+                  <label :for="editStatusSelectId">{{ t('drawerStatus') }}</label>
                   <select
                     :id="editStatusSelectId"
                     v-model="selectedStatusUi"
                     :disabled="isMutating"
                     class="user-input status-select"
-                    aria-label="Task status in edit form"
+                    :aria-label="t('drawerStatusAriaEdit')"
                     @change="handleStatusChange"
                   >
-                    <option value="backlog">Backlog</option>
-                    <option value="todo">todo</option>
-                    <option value="doing">doing</option>
-                    <option value="done">done</option>
+                    <option v-for="statusOption in localizedStatusOptions" :key="statusOption.value" :value="statusOption.value">{{ statusOption.label }}</option>
                   </select>
                 </div>
 
                 <div class="danger-zone">
-                  <button type="button" class="danger-button-outline" @click="handleArchive" :disabled="isMutating">Archive</button>
-                  <button type="button" class="danger-button-outline" @click="handleDelete" :disabled="isMutating">Delete</button>
+                  <button type="button" class="danger-button-outline" @click="handleArchive" :disabled="isMutating">{{ t('drawerArchive') }}</button>
+                  <button type="button" class="danger-button-outline" @click="handleDelete" :disabled="isMutating">{{ t('drawerDelete') }}</button>
                 </div>
               </div>
 
               <div class="edit-footer">
-                <button type="button" class="secondary-action" @click="cancelEdit">Cancel</button>
+                <button type="button" class="secondary-action" @click="cancelEdit">{{ t('drawerCancel') }}</button>
                 <button type="submit" :disabled="!editTitle.trim() || !editDue.trim() || isMutating" class="primary-button">
-                  Save Changes
+                  {{ t('drawerSaveChanges') }}
                 </button>
               </div>
             </form>
@@ -479,6 +529,11 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
+:global(.dark) .drawer-content {
+  --bg-primary: var(--tg-surface);
+  --bg-secondary: var(--tg-surface-raised);
+}
+
 /* --- Layout & Overlay --- */
 .drawer-overlay {
   position: fixed;
@@ -500,9 +555,9 @@ onUnmounted(() => {
   width: 100%;
   max-width: 500px;
   height: 100%;
-  background: rgba(255, 255, 255, 0.85);
+  background: color-mix(in srgb, var(--bg-primary) 85%, transparent);
   backdrop-filter: blur(30px);
-  border-left: 1px solid rgba(255, 255, 255, 0.5);
+  border-left: 1px solid color-mix(in srgb, var(--bg-primary) 55%, transparent);
   box-shadow: -10px 0 50px rgba(0, 0, 0, 0.05);
   display: flex;
   flex-direction: column;
@@ -542,7 +597,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-bottom: 1px solid var(--tg-border-default);
 }
 
 .header-left, .header-right {
@@ -554,7 +609,7 @@ onUnmounted(() => {
 .drawer-title {
   font-size: 1.25rem;
   font-weight: 800;
-  color: #1e293b;
+  color: var(--text-strong);
   letter-spacing: -0.02em;
 }
 
@@ -603,7 +658,7 @@ onUnmounted(() => {
   display: block;
   font-size: 0.75rem;
   font-weight: 700;
-  color: #64748b;
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin-bottom: 0.4rem;
@@ -611,11 +666,11 @@ onUnmounted(() => {
 
 .user-input {
   width: 100%;
-  background: #ffffff;
-  border: 1px solid #cbd5e1;
+  background: var(--bg-primary);
+  border: 1px solid var(--tg-border-default);
   border-radius: 0.75rem;
   padding: 0.7rem 0.9rem;
-  color: #0f172a;
+  color: var(--text-primary);
   font-size: 0.95rem;
   transition: border-color 0.24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1), background 0.24s cubic-bezier(0.16, 1, 0.3, 1);
 }
@@ -623,7 +678,7 @@ onUnmounted(() => {
 .user-input:focus {
   outline: none;
   border-color: #64748b;
-  background: white;
+  background: var(--bg-primary);
   box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.15);
 }
 
@@ -641,14 +696,14 @@ onUnmounted(() => {
 }
 
 .primary-button:disabled {
-  background: #e2e8f0;
-  color: #94a3b8;
+  background: var(--bg-secondary);
+  color: var(--text-muted);
   box-shadow: none;
   cursor: not-allowed;
 }
 
 .primary-button-sm {
-  background: linear-gradient(135deg, #ef4444 0%, #a855f7 100%);
+  background: linear-gradient(135deg, #ef4444 0%, #a855f7 50%, #3b82f6 100%);
   color: white;
   padding: 0.5rem 1rem;
   border-radius: 8px;
@@ -660,9 +715,9 @@ onUnmounted(() => {
 }
 
 .secondary-button-sm {
-  background: white;
-  border: 1px solid #e2e8f0;
-  color: #64748b;
+  background: var(--bg-primary);
+  border: 1px solid var(--tg-border-default);
+  color: var(--text-primary);
   padding: 0.5rem 1rem;
   border-radius: 8px;
   font-size: 0.875rem;
@@ -673,13 +728,13 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   gap: 0.4rem;
-  color: #64748b;
+  color: var(--text-primary);
   font-size: 0.875rem;
   font-weight: 600;
 }
 
 .link-text {
-  color: #94a3b8;
+  color: var(--text-muted);
   font-weight: 600;
   cursor: pointer;
 }
@@ -700,15 +755,15 @@ onUnmounted(() => {
   align-items: center;
   gap: 0.75rem;
   padding: 0.85rem 0 0.25rem;
-  border-top: 1px solid rgba(148, 163, 184, 0.25);
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), #ffffff 35%);
+  border-top: 1px solid color-mix(in srgb, var(--tg-border-default) 75%, transparent);
+  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-primary) 86%, transparent), var(--bg-primary) 35%);
   box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.04);
 }
 
 .secondary-action {
-  border: 1px solid #cbd5e1;
-  background: #f8fafc;
-  color: #475569;
+  border: 1px solid var(--tg-border-default);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
   border-radius: 0.75rem;
   padding: 0.7rem 1rem;
   font-weight: 600;
@@ -717,15 +772,15 @@ onUnmounted(() => {
 }
 
 .secondary-action:hover {
-  border-color: #94a3b8;
-  background: #f1f5f9;
-  color: #334155;
+  border-color: var(--tg-border-strong);
+  background: color-mix(in srgb, var(--bg-secondary) 75%, var(--bg-primary));
+  color: var(--text-strong);
 }
 
 /* --- Details View --- */
 .detail-card {
-  background: rgba(255, 255, 255, 0.5);
-  border: 1px solid rgba(255, 255, 255, 0.8);
+  background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
+  border: 1px solid color-mix(in srgb, var(--tg-border-default) 82%, transparent);
   border-radius: 20px;
   padding: 1.5rem;
 }
@@ -740,7 +795,7 @@ onUnmounted(() => {
 .detail-header h3 {
   font-size: 1.25rem;
   font-weight: 800;
-  color: #1e293b;
+  color: var(--text-strong);
 }
 
 .edit-link {
@@ -750,7 +805,7 @@ onUnmounted(() => {
 }
 
 .detail-desc {
-  color: #64748b;
+  color: var(--text-primary);
   font-size: 0.95rem;
   margin-bottom: 1.5rem;
   line-height: 1.6;
@@ -766,24 +821,24 @@ onUnmounted(() => {
   display: block;
   font-size: 0.65rem;
   font-weight: 800;
-  color: #cbd5e1;
+  color: var(--text-muted);
   text-transform: uppercase;
   margin-bottom: 0.25rem;
 }
 
 .grid-item p {
-  color: #475569;
+  color: var(--text-primary);
   font-weight: 600;
   font-size: 0.9rem;
 }
 
 .status-select {
   width: 100%;
-  background: #ffffff;
-  border: 1px solid #cbd5e1;
+  background: var(--bg-primary);
+  border: 1px solid var(--tg-border-default);
   border-radius: 0.75rem;
   padding: 0.7rem 0.9rem;
-  color: #334155;
+  color: var(--text-primary);
   font-size: 0.92rem;
   font-weight: 600;
   text-transform: lowercase;
@@ -791,13 +846,13 @@ onUnmounted(() => {
 }
 
 .status-select:hover {
-  border-color: #94a3b8;
+  border-color: var(--tg-border-strong);
   box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
 }
 
 .status-select:focus {
   outline: none;
-  border-color: #334155;
+  border-color: var(--tg-border-strong);
   box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.18);
 }
 
@@ -815,7 +870,7 @@ onUnmounted(() => {
   flex: 1;
   padding: 0.6rem;
   border: 1px solid #fecaca;
-  background: white;
+  background: var(--bg-primary);
   color: #dc2626;
   border-radius: 0.75rem;
   font-size: 0.8rem;
diff --git a/apps/frontend/src/components/TaskList.vue b/apps/frontend/src/components/TaskList.vue
index 2859a19..575ef08 100644
--- a/apps/frontend/src/components/TaskList.vue
+++ b/apps/frontend/src/components/TaskList.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type { Item } from "@/types/item";
 import SyncStatusBadge from "@/components/SyncStatusBadge.vue";
+import { useSettings } from "@/composables/useSettings";
+
+const { t } = useSettings();
 
 defineProps<{
   items: Item[];
@@ -14,8 +17,10 @@ const emit = defineEmits<{
 }>();
 
 function displayStatus(status: Item['status']): string {
-  if (status === 'inprogress') return 'doing';
-  return status;
+  if (status === 'backlog') return t('statusBacklog');
+  if (status === 'inprogress') return t('statusDoing');
+  if (status === 'done') return t('statusDone');
+  return t('statusTodo');
 }
 </script>
 
@@ -23,7 +28,7 @@ function displayStatus(status: Item['status']): string {
   <section v-if="items.length > 0" class="task-section">
     <header class="section-header">
       <span class="icon">📋</span>
-      <h2>Tasks</h2>
+      <h2>{{ t('list') }}</h2>
       <span class="count">{{ items.length }}</span>
     </header>
 
@@ -91,7 +96,7 @@ function displayStatus(status: Item['status']): string {
 .section-header h2 {
   font-size: 1rem;
   font-weight: 800;
-  color: #1e293b;
+  color: var(--text-strong);
   letter-spacing: 0.05em;
   text-transform: uppercase;
   margin: 0;
@@ -120,8 +125,8 @@ function displayStatus(status: Item['status']): string {
   width: 100%;
   text-align: left;
   padding: 1rem 1.25rem;
-  background: rgba(255, 255, 255, 0.6);
-  border: 1px solid rgba(226, 232, 240, 0.8);
+  background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
+  border: 1px solid color-mix(in srgb, var(--tg-border-default) 82%, transparent);
   border-radius: 16px;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -130,7 +135,7 @@ function displayStatus(status: Item['status']): string {
 }
 
 .task-row:hover {
-  background: white;
+  background: var(--bg-primary);
   border-color: #a855f7;
   transform: translateY(-2px);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
@@ -169,10 +174,14 @@ function displayStatus(status: Item['status']): string {
 }
 
 /* 各ステータスの色味をグラスデザインに合わせ調整 */
-.todo { background: #f1f5f9; color: #64748b; }
-.inprogress { background: rgba(251, 191, 36, 0.1); color: #b45309; }
-.done { background: rgba(34, 197, 94, 0.1); color: #15803d; }
-.backlog { background: #f8fafc; color: #94a3b8; border: 1px dashed #e2e8f0; }
+.todo { background: var(--status-bg-todo); color: var(--status-text-todo); }
+.inprogress { background: var(--status-bg-inprogress); color: var(--status-text-inprogress); }
+.done { background: var(--status-bg-done); color: var(--status-text-done); }
+.backlog {
+  background: var(--status-bg-backlog);
+  color: var(--status-text-backlog);
+  border: 1px dashed var(--status-border-backlog);
+}
 
 .motivation {
   font-size: 0.75rem;
@@ -196,7 +205,7 @@ function displayStatus(status: Item['status']): string {
 .task-title {
   font-size: 0.95rem;
   font-weight: 700;
-  color: #1e293b;
+  color: var(--text-strong);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -204,7 +213,7 @@ function displayStatus(status: Item['status']): string {
 
 .task-desc {
   font-size: 0.8rem;
-  color: #94a3b8;
+  color: var(--text-muted);
   margin-top: 0.1rem;
   white-space: nowrap;
   overflow: hidden;
@@ -214,7 +223,7 @@ function displayStatus(status: Item['status']): string {
 /* --- Decorative Chevron --- */
 .task-chevron {
   margin-left: 1rem;
-  color: #cbd5e1;
+  color: var(--tg-border-default);
   transition: transform 0.3s ease, color 0.3s ease;
 }
 
diff --git a/apps/frontend/src/composables/useSettings.ts b/apps/frontend/src/composables/useSettings.ts
new file mode 100644
index 0000000..7c45f25
--- /dev/null
+++ b/apps/frontend/src/composables/useSettings.ts
@@ -0,0 +1,263 @@
+import { computed, ref } from 'vue';
+
+export type ThemeMode = 'light' | 'dark';
+export type LanguageCode = 'en' | 'ja';
+
+const STORAGE_THEME_KEY = 'taskgraph.settings.theme';
+const STORAGE_LANGUAGE_KEY = 'taskgraph.settings.language';
+
+const theme = ref<ThemeMode>('light');
+const language = ref<LanguageCode>('en');
+const isInitialized = ref(false);
+
+const messages = {
+  en: {
+    appTitle: 'TaskGraph',
+    specialThanks: 'Special Thanks',
+    helpTitle: 'How to use',
+    guestMode: 'Guest Mode',
+    guestLocalMode: 'Guest local mode',
+    dbSyncing: 'Database syncing...',
+    dbIdle: 'Database idle',
+    theme: 'Theme',
+    light: 'Light',
+    dark: 'Dark',
+    language: 'Language',
+    english: 'English',
+    japanese: 'Japanese',
+    syncStatus: 'Sync Status',
+    refresh: 'Refresh',
+    maximizeGraph: 'Maximize Graph',
+    exitFullscreen: 'Exit Fullscreen (Esc)',
+    list: 'List',
+    new: 'New',
+    logout: 'Logout',
+    logoutConfirm: 'Are you sure you want to logout?',
+    welcome: 'Welcome',
+    range1d: '1 day',
+    range3d: '3 days',
+    range1w: '1 week',
+    range2w: '2 weeks',
+    range1m: '1 month',
+    axisDuration: 'Duration',
+    axisMotivation: 'Motivation',
+    axisStatus: 'Status',
+    visualNone: 'None',
+    controlWindow: 'Window',
+    controlYAxis: 'Y-Axis',
+    controlColor: 'Color',
+    controlRadius: 'Radius',
+    drawerCreateTask: 'Create Task',
+    drawerDetails: 'Details',
+    drawerEditTask: 'Edit Task',
+    drawerBack: 'Back',
+    drawerClose: 'Close',
+    drawerTitle: 'Title',
+    drawerTitleRequired: 'Title *',
+    drawerTitlePlaceholder: 'Task name...',
+    drawerDescription: 'Description',
+    drawerDescriptionPlaceholder: 'Optional notes',
+    drawerDue: 'Due',
+    drawerDueRequired: 'Due *',
+    drawerDurationMin: 'Duration (min)',
+    drawerCancel: 'Cancel',
+    drawerCreating: 'Creating...',
+    drawerNoDescription: 'No description',
+    drawerStatus: 'Status',
+    drawerStatusAriaView: 'Task status in details view',
+    drawerStatusAriaEdit: 'Task status in edit form',
+    drawerMotivation: 'Motivation',
+    drawerDuration: 'Duration',
+    drawerMinuteUnit: 'min',
+    drawerEdit: 'Edit',
+    drawerSaveChanges: 'Save Changes',
+    drawerArchive: 'Archive',
+    drawerDelete: 'Delete',
+    drawerDeleteConfirm: 'Are you sure you want to delete this task?',
+    statusBacklog: 'Backlog',
+    statusTodo: 'Todo',
+    statusDoing: 'Doing',
+    statusDone: 'Done',
+    groupedTasks: 'Grouped Tasks',
+    groupedTasksCount: 'tasks grouped',
+    statusPrefix: 'Status',
+    past: 'Past',
+    future: 'Future',
+    thanksClose: 'Close',
+    thanksDevelopedBy: 'Developed by',
+    thanksGithubProfile: 'GitHub Profile',
+    thanksIntro: 'TaskGraph was created during {program}.',
+    thanksOfficialSite: '100 program Official Site',
+    thanksSectionTitle: 'Special Thanks to',
+    thanksFeedback: 'Feedback / フィードバック協力',
+    thanksTeam: 'Team Members / チームメンバー',
+    thanksCopyright: 'TaskGraph Project',
+  },
+  ja: {
+    appTitle: 'TaskGraph',
+    specialThanks: '謝意',
+    helpTitle: '使い方',
+    guestMode: 'ゲストモード',
+    guestLocalMode: 'ゲストローカルモード',
+    dbSyncing: 'データベース同期中...',
+    dbIdle: 'データベース待機中',
+    theme: 'テーマ',
+    light: 'ライト',
+    dark: 'ダーク',
+    language: '言語',
+    english: '英語',
+    japanese: '日本語',
+    syncStatus: '同期状態',
+    refresh: '更新',
+    maximizeGraph: 'グラフを最大化',
+    exitFullscreen: '全画面を終了 (Esc)',
+    list: '一覧',
+    new: '新規',
+    logout: 'ログアウト',
+    logoutConfirm: 'ログアウトしますか？',
+    welcome: 'ようこそ',
+    range1d: '1日',
+    range3d: '3日',
+    range1w: '1週間',
+    range2w: '2週間',
+    range1m: '1か月',
+    axisDuration: '時間',
+    axisMotivation: 'モチベーション',
+    axisStatus: 'ステータス',
+    visualNone: 'なし',
+    controlWindow: '表示範囲',
+    controlYAxis: 'Y軸',
+    controlColor: '色',
+    controlRadius: '半径',
+    drawerCreateTask: 'タスク作成',
+    drawerDetails: '詳細',
+    drawerEditTask: 'タスク編集',
+    drawerBack: '戻る',
+    drawerClose: '閉じる',
+    drawerTitle: 'タイトル',
+    drawerTitleRequired: 'タイトル *',
+    drawerTitlePlaceholder: 'タスク名...',
+    drawerDescription: '説明',
+    drawerDescriptionPlaceholder: '任意メモ',
+    drawerDue: '期限',
+    drawerDueRequired: '期限 *',
+    drawerDurationMin: '所要時間 (分)',
+    drawerCancel: 'キャンセル',
+    drawerCreating: '作成中...',
+    drawerNoDescription: '説明なし',
+    drawerStatus: 'ステータス',
+    drawerStatusAriaView: '詳細画面のタスクステータス',
+    drawerStatusAriaEdit: '編集画面のタスクステータス',
+    drawerMotivation: 'モチベーション',
+    drawerDuration: '所要時間',
+    drawerMinuteUnit: '分',
+    drawerEdit: '編集',
+    drawerSaveChanges: '変更を保存',
+    drawerArchive: 'アーカイブ',
+    drawerDelete: '削除',
+    drawerDeleteConfirm: 'このタスクを削除しますか？',
+    statusBacklog: 'バックログ',
+    statusTodo: '未着手',
+    statusDoing: '進行中',
+    statusDone: '完了',
+    groupedTasks: 'グループ化タスク',
+    groupedTasksCount: '件のタスク',
+    statusPrefix: 'ステータス',
+    past: '過去',
+    future: '未来',
+    thanksClose: '閉じる',
+    thanksDevelopedBy: '開発者',
+    thanksGithubProfile: 'GitHubプロフィール',
+    thanksIntro: 'TaskGraphは{program}で制作されました。',
+    thanksOfficialSite: '100 program 公式サイト',
+    thanksSectionTitle: '謝意',
+    thanksFeedback: 'Feedback / フィードバック協力',
+    thanksTeam: 'Team Members / チームメンバー',
+    thanksCopyright: 'TaskGraph プロジェクト',
+  },
+} as const;
+
+type TranslationKey = keyof (typeof messages)['en'];
+type TranslationParams = Record<string, string | number>;
+
+function isThemeMode(value: string | null): value is ThemeMode {
+  return value === 'light' || value === 'dark';
+}
+
+function isLanguageCode(value: string | null): value is LanguageCode {
+  return value === 'en' || value === 'ja';
+}
+
+function applyThemeClass(nextTheme: ThemeMode): void {
+  if (typeof document === 'undefined') return;
+  document.documentElement.classList.toggle('dark', nextTheme === 'dark');
+}
+
+function persistSettings(): void {
+  if (typeof window === 'undefined') return;
+  window.localStorage.setItem(STORAGE_THEME_KEY, theme.value);
+  window.localStorage.setItem(STORAGE_LANGUAGE_KEY, language.value);
+}
+
+function initializeSettings(): void {
+  if (isInitialized.value) return;
+
+  if (typeof window !== 'undefined') {
+    const savedTheme = window.localStorage.getItem(STORAGE_THEME_KEY);
+    const savedLanguage = window.localStorage.getItem(STORAGE_LANGUAGE_KEY);
+
+    if (isThemeMode(savedTheme)) {
+      theme.value = savedTheme;
+    } else if (window.matchMedia?.('(prefers-color-scheme: dark)').matches) {
+      theme.value = 'dark';
+    }
+    if (isLanguageCode(savedLanguage)) {
+      language.value = savedLanguage;
+    }
+  }
+
+  applyThemeClass(theme.value);
+  persistSettings();
+  isInitialized.value = true;
+}
+
+export function useSettings() {
+  function setTheme(nextTheme: ThemeMode): void {
+    theme.value = nextTheme;
+    applyThemeClass(nextTheme);
+    persistSettings();
+  }
+
+  function toggleTheme(): void {
+    setTheme(theme.value === 'light' ? 'dark' : 'light');
+  }
+
+  function setLanguage(nextLanguage: LanguageCode): void {
+    language.value = nextLanguage;
+    persistSettings();
+  }
+
+  function toggleLanguage(): void {
+    setLanguage(language.value === 'en' ? 'ja' : 'en');
+  }
+
+  function t(key: TranslationKey, params?: TranslationParams): string {
+    const base = String(messages[language.value][key] ?? messages.en[key] ?? key);
+    if (!params) return base;
+
+    return Object.entries(params).reduce((accumulator, [paramKey, value]) => {
+      return accumulator.replaceAll(`{${paramKey}}`, String(value));
+    }, base);
+  }
+
+  return {
+    theme: computed(() => theme.value),
+    language: computed(() => language.value),
+    initializeSettings,
+    setTheme,
+    toggleTheme,
+    setLanguage,
+    toggleLanguage,
+    t,
+  };
+}
diff --git a/apps/frontend/src/main.ts b/apps/frontend/src/main.ts
index 002b2c0..ca9da20 100644
--- a/apps/frontend/src/main.ts
+++ b/apps/frontend/src/main.ts
@@ -6,12 +6,16 @@ import './style.css'
 import App from './App.vue'
 import { honoClient } from './api/honoClient'
 import { useUserStore } from './stores/user'
+import { useSettings } from './composables/useSettings'
 
 const app = createApp(App)
 const pinia = createPinia()
 
 app.use(pinia)
 
+const { initializeSettings } = useSettings()
+initializeSettings()
+
 // Token lookup is deferred until request time to avoid early-store access.
 honoClient.setTokenGetter(() => useUserStore(pinia).accessToken ?? null)
 
diff --git a/apps/frontend/src/style.css b/apps/frontend/src/style.css
index ad350e8..5eb69c2 100644
--- a/apps/frontend/src/style.css
+++ b/apps/frontend/src/style.css
@@ -2,9 +2,75 @@
 
 :root {
   font-family: Inter, sans-serif;
-  color: #2c3e50;
-  background-color: #ffffff;
+  color: #0f172a;
+  background-color: #f8fafc;
   color-scheme: light;
+
+  --tg-text-strong: #020617;
+  --tg-text-default: #1e293b;
+  --tg-text-muted: #64748b;
+  --tg-border-muted: rgba(226, 232, 240, 0.8);
+  --tg-border-default: #e2e8f0;
+  --tg-border-strong: #94a3b8;
+  --tg-surface: #ffffff;
+  --tg-surface-raised: #f8fafc;
+  --tg-surface-translucent: rgba(255, 255, 255, 0.9);
+  --tg-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --tg-shadow-elevated: 0 16px 30px rgba(15, 23, 42, 0.18);
+  --tg-page-gradient: linear-gradient(to bottom right, #f1f5f9, #f8fafc, #eff6ff);
+  --badge-bg: #ffffff;
+  --bg-danger-hover: #fef2f2;
+
+  --z-header: 20;
+  --z-dropdown: 40;
+  --z-drawer: 50;
+  --z-modal: 1000;
+
+  --status-bg-todo: #f1f5f9;
+  --status-text-todo: #475569;
+  --status-bg-inprogress: rgba(251, 191, 36, 0.16);
+  --status-text-inprogress: #92400e;
+  --status-bg-done: rgba(34, 197, 94, 0.14);
+  --status-text-done: #166534;
+  --status-bg-backlog: #f8fafc;
+  --status-text-backlog: #64748b;
+  --status-border-backlog: #cbd5e1;
+
+  --bg-primary: var(--tg-surface);
+  --bg-secondary: var(--tg-surface-raised);
+  --text-primary: var(--tg-text-default);
+  --text-strong: var(--tg-text-strong);
+  --text-muted: var(--tg-text-muted);
+  --border-color: var(--tg-border-default);
+}
+
+.dark {
+  color-scheme: dark;
+
+  --tg-text-strong: #f8fafc;
+  --tg-text-default: #e2e8f0;
+  --tg-text-muted: #94a3b8;
+  --tg-border-muted: rgba(71, 85, 105, 0.8);
+  --tg-border-default: #334155;
+  --tg-border-strong: #64748b;
+  --tg-surface: #0f172a;
+  --tg-surface-raised: #111827;
+  --tg-surface-translucent: rgba(15, 23, 42, 0.82);
+  --tg-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
+  --tg-shadow-elevated: 0 16px 30px rgba(2, 6, 23, 0.55);
+  --tg-page-gradient: radial-gradient(circle at 10% 20%, #1e293b 0%, #0f172a 50%, #020617 100%);
+  --badge-bg: #ffffff;
+  --bg-danger-hover: rgba(220, 38, 38, 0.2);
+
+  --status-bg-todo: #1f2937;
+  --status-text-todo: #cbd5e1;
+  --status-bg-inprogress: rgba(251, 191, 36, 0.22);
+  --status-text-inprogress: #fcd34d;
+  --status-bg-done: rgba(34, 197, 94, 0.22);
+  --status-text-done: #86efac;
+  --status-bg-backlog: #0f172a;
+  --status-text-backlog: #94a3b8;
+  --status-border-backlog: #475569;
 }
 
 * {
@@ -15,7 +81,9 @@ html,
 body {
   margin: 0;
   min-height: 100vh;
-  background: #f5f7f8;
+  background: var(--tg-surface-raised);
+  color: var(--tg-text-default);
+  transition: background-color 0.25s ease, color 0.25s ease;
 }
 
 #app {
diff --git a/apps/frontend/src/views/MainView.vue b/apps/frontend/src/views/MainView.vue
index 07fa959..a721953 100644
--- a/apps/frontend/src/views/MainView.vue
+++ b/apps/frontend/src/views/MainView.vue
@@ -7,6 +7,7 @@ import type { GraphAxisField, GraphTimeRangeKey, GraphVisualField, SelectOption
 import { useAuth } from '@/composables/useAuth';
 import { useItems } from '@/composables/useItems';
 import { useSyncStatus } from '@/composables/useSyncStatus';
+import { useSettings } from '@/composables/useSettings';
 
 import ScatterPlot from '@/components/ScatterPlot.vue';
 import TaskDrawer from '@/components/TaskDrawer.vue';
@@ -18,6 +19,7 @@ const auth = useAuth();
 const { items, isSyncing, fetchActiveItems, startNewSession, getCurrentToken, bindSyncStatusMap } = useItems();
 const { syncMap, errorMap } = useSyncStatus();
 const { displayUsername, isGuest } = auth;
+const { t } = useSettings();
 
 // --- Graph State ---
 const selectedRange = ref<GraphTimeRangeKey>('1w');
@@ -25,24 +27,26 @@ const selectedYField = ref<GraphAxisField>('duration_minutes');
 const selectedColorField = ref<GraphVisualField>('motivation');
 const selectedRadiusField = ref<GraphVisualField>('duration_minutes');
 
-const rangeOptions: SelectOption<GraphTimeRangeKey>[] = [
-  { value: '1d', label: '1 day' }, { value: '3d', label: '3 days' },
-  { value: '1w', label: '1 week' }, { value: '2w', label: '2 weeks' },
-  { value: '1m', label: '1 month' },
-];
-
-const axisOptions: SelectOption<GraphAxisField>[] = [
-  { value: 'duration_minutes', label: 'Duration' },
-  { value: 'motivation', label: 'Motivation' },
-  { value: 'status', label: 'Status' },
-];
-
-const visualOptions: SelectOption<GraphVisualField>[] = [
-  { value: 'none', label: 'None' },
-  { value: 'duration_minutes', label: 'Duration' },
-  { value: 'motivation', label: 'Motivation' },
-  { value: 'status', label: 'Status' },
-];
+const rangeOptions = computed<SelectOption<GraphTimeRangeKey>[]>(() => [
+  { value: '1d', label: t('range1d') },
+  { value: '3d', label: t('range3d') },
+  { value: '1w', label: t('range1w') },
+  { value: '2w', label: t('range2w') },
+  { value: '1m', label: t('range1m') },
+]);
+
+const axisOptions = computed<SelectOption<GraphAxisField>[]>(() => [
+  { value: 'duration_minutes', label: t('axisDuration') },
+  { value: 'motivation', label: t('axisMotivation') },
+  { value: 'status', label: t('axisStatus') },
+]);
+
+const visualOptions = computed<SelectOption<GraphVisualField>[]>(() => [
+  { value: 'none', label: t('visualNone') },
+  { value: 'duration_minutes', label: t('axisDuration') },
+  { value: 'motivation', label: t('axisMotivation') },
+  { value: 'status', label: t('axisStatus') },
+]);
 
 // --- UI State ---
 type DrawerMode = 'create' | 'view' | 'edit' | 'tasks';
@@ -52,6 +56,7 @@ const isFullscreen = ref(false);
 const isThanksOpen = ref(false);
 const drawerMode = ref<DrawerMode>('view');
 const selectedItem = ref<Item | null>(null);
+const createSeed = ref<{ due: string; motivation: number } | null>(null);
 const showWelcomeToast = ref(false);
 
 let hasShownWelcomeToast = false;
@@ -81,22 +86,32 @@ const handleRefreshItems = () => loadItems(getCurrentToken());
 bindSyncStatusMap(syncMap);
 
 const handleLogout = async () => {
-  if (confirm('Are you sure you want to logout?')) {
+  if (confirm(t('logoutConfirm'))) {
     await auth.logout().catch(e => console.error(e));
   }
 };
 
 const openDrawer = (mode: DrawerMode) => {
+  if (mode !== 'create') {
+    createSeed.value = null;
+  }
   drawerMode.value = mode;
   isDrawerOpen.value = true;
 };
 
 const handleSelectItem = (item: Item) => {
+  createSeed.value = null;
   selectedItem.value = item;
   drawerMode.value = 'view';
   isDrawerOpen.value = true;
 };
 
+const handleRequestCreateFromPlot = (payload: { due: string; motivation: number }) => {
+  createSeed.value = payload;
+  drawerMode.value = 'create';
+  isDrawerOpen.value = true;
+};
+
 const toggleFullscreen = () => {
   isFullscreen.value = !isFullscreen.value;
 };
@@ -151,7 +166,7 @@ watch(
 
     <transition name="toast">
       <div v-if="showWelcomeToast" class="welcome-toast">
-        Welcome {{ displayUsername }}
+        {{ t('welcome') }} {{ displayUsername }}
       </div>
     </transition>
 
@@ -177,21 +192,30 @@ watch(
           :range-options="rangeOptions"
           :axis-options="axisOptions"
           :visual-options="visualOptions"
-          @refresh="handleRefreshItems"
           @open-drawer="openDrawer"
-          @toggle-fullscreen="toggleFullscreen"
         />
       </template>
 
       <main class="content-body" :class="{ 'fullscreen-mode': isFullscreen }">
         <section class="plot-container">
-          <button 
-            v-if="isFullscreen" 
-            class="exit-fullscreen-btn" 
-            @click="toggleFullscreen"
-          >
-            Exit Fullscreen (Esc)
-          </button>
+          <div class="plot-actions" role="toolbar" aria-label="Graph actions">
+            <button
+              class="plot-action-btn"
+              type="button"
+              :title="t('refresh')"
+              @click="handleRefreshItems"
+            >
+              ↻
+            </button>
+            <button
+              class="plot-action-btn plot-action-strong"
+              type="button"
+              :title="isFullscreen ? t('exitFullscreen') : t('maximizeGraph')"
+              @click="toggleFullscreen"
+            >
+              {{ isFullscreen ? '☒' : '⛶' }}
+            </button>
+          </div>
           
           <ScatterPlot
             :items="items"
@@ -201,6 +225,7 @@ watch(
             v-model:radius-field="selectedRadiusField"
             class="plot-component"
             @select-item="handleSelectItem"
+            @request-create="handleRequestCreateFromPlot"
           />
         </section>
       </main>
@@ -209,6 +234,7 @@ watch(
     <TaskDrawer
       :open="isDrawerOpen"
       :mode="drawerMode"
+      :create-seed="createSeed"
       :selected-item="selectedItem"
       :items="items"
       :sync-map="syncMap"
@@ -228,7 +254,7 @@ watch(
   position: relative;
   height: 100dvh;
   overflow: hidden;
-  background: linear-gradient(to bottom right, #f1f5f9, #f8fafc, #eff6ff);
+  background: var(--tg-page-gradient);
 }
 
 .main-layout {
@@ -257,7 +283,7 @@ watch(
   z-index: 40;
   margin: 0;
   padding: 1rem;
-  background: #f8fafc;
+  background: var(--tg-surface-raised);
 }
 
 /* --- Plot Area (Added padding for axis spacing) --- */
@@ -265,43 +291,54 @@ watch(
   flex: 1;
   position: relative;
   border-radius: 1rem;
-  border: 1px solid #e2e8f0;
-  background-color: #fff;
-  /* 点が軸に近すぎないように内側に余白を追加 */
-  padding: 1.5rem 1.5rem 1rem 1rem; 
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--tg-border-default);
+  background-color: var(--tg-surface);
+  padding: 3.5rem 1.5rem 1rem 1rem;
+  box-shadow: var(--tg-shadow-soft);
   display: flex;
   flex-direction: column;
 }
 
-.plot-component {
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
+.plot-actions {
+  position: absolute;
+  top: 0.85rem;
+  right: 0.9rem;
+  z-index: 80;
+  display: inline-flex;
+  gap: 0.5rem;
 }
 
-.exit-fullscreen-btn {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  z-index: 100;
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(8px);
-  border: 1px solid #e2e8f0;
-  padding: 0.5rem 1rem;
-  border-radius: 0.625rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: #475569;
+.plot-action-btn {
+  min-width: 2.2rem;
+  height: 2.2rem;
+  border-radius: 0.6rem;
+  border: 1px solid var(--tg-border-default);
+  background: var(--tg-surface-translucent);
+  color: var(--tg-text-default);
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1;
   cursor: pointer;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  transition: all 0.2s;
+  backdrop-filter: blur(8px);
+  box-shadow: var(--tg-shadow-soft);
+  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
 }
 
-.exit-fullscreen-btn:hover {
-  background: #fff;
+.plot-action-btn:hover {
   transform: translateY(-1px);
+  background: var(--tg-surface);
+  border-color: var(--tg-border-strong);
+}
+
+.plot-action-strong {
+  font-size: 1.2rem;
+}
+
+.plot-component {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
 }
 
 /* --- Drawer Slide Adjustment --- */
@@ -316,7 +353,7 @@ watch(
   position: fixed;
   left: 50%;
   top: 1.5rem;
-  z-index: 1000;
+  z-index: 30000;
   transform: translateX(-50%);
   border-radius: 0.75rem;
   border: 1px solid #6ee7b7;