diff --git a/bridge-browser/index.html b/bridge-browser/index.html
index 1cc2ae1..445dbeb 100644
--- a/bridge-browser/index.html
+++ b/bridge-browser/index.html
@@ -308,6 +308,10 @@ <h2>
             <span id="showLogLabel">Show Floating Log</span>
             <input type="checkbox" id="showLog" />
           </label>
+          <label class="checkbox-row">
+            <span id="soundLabel">Notification Sound</span>
+            <input type="checkbox" id="logSound" />
+          </label>
           <button
             type="button"
             id="sessionPresetToggle"
diff --git a/bridge-browser/src/background/attention_sound.ts b/bridge-browser/src/background/attention_sound.ts
index 856e8d9..075c682 100644
--- a/bridge-browser/src/background/attention_sound.ts
+++ b/bridge-browser/src/background/attention_sound.ts
@@ -3,13 +3,18 @@ import { getErrorMessage } from './errors';
 const OFFSCREEN_DOCUMENT_PATH = "offscreen.html";
 const PLAY_ATTENTION_SOUND = "PLAY_ATTENTION_SOUND";
 
+export type LogSoundType = "info" | "success" | "warn" | "error" | "action";
+
 let creatingOffscreenDocument: Promise<void> | null = null;
 
-export async function playAttentionSound(): Promise<{ success: boolean; error?: string }> {
+export async function playAttentionSound(
+  logType?: LogSoundType
+): Promise<{ success: boolean; error?: string }> {
   try {
     await ensureOffscreenDocument();
     const response: unknown = await chrome.runtime.sendMessage({
       type: PLAY_ATTENTION_SOUND,
+      logType,
     });
 
     if (isRecord(response) && response.success === false) {
diff --git a/bridge-browser/src/background/messages.ts b/bridge-browser/src/background/messages.ts
index 3c7cd6a..21fcc84 100644
--- a/bridge-browser/src/background/messages.ts
+++ b/bridge-browser/src/background/messages.ts
@@ -1,3 +1,6 @@
+import { isMessageRequest, type MessageRequest } from '../types';
+import { playAttentionSound, type LogSoundType } from './attention_sound';
+import { bindSession, handleHandshake } from './connection';
 import { isMessageRequest, type MessageRequest, type SessionDisconnectReason } from '../types';
 import { playAttentionSound } from './attention_sound';
 import { handleHandshake } from './connection';
@@ -46,6 +49,15 @@ function dispatchRuntimeMessage(
     case "GET_STATUS":
       handleGetStatus(request, sender, sendResponse);
       return true;
+    case "SET_LOG_VISIBLE":
+      handleSetLogVisible(request, currentTabId, sendResponse);
+      return true;
+    case "SET_LOG_SOUND_ENABLED":
+      handleSetLogSoundEnabled(request, currentTabId, sendResponse);
+      return true;
+    case "PLAY_LOG_SOUND":
+      respondAsync(playLogSound(request), sendResponse);
+      return true;
     case "REQUEST_USER_ATTENTION":
       respondAsync(requestUserAttention(request, sender), sendResponse);
       return true;
@@ -100,6 +112,19 @@ function handleGetStatus(
     return;
   }
 
+  respondAsync(
+    Promise.all([
+      getSession(targetTabId),
+      chrome.storage.sync.get(["logSoundEnabled"]) as Promise<Record<string, unknown>>,
+    ]).then(([session, syncItems]) => ({
+      connected: Boolean(session),
+      port: session?.port,
+      showLog: session?.showLog ?? false,
+      soundEnabled: syncItems.logSoundEnabled === true,
+      workspaceId: session?.workspaceId ?? 'global',
+    })),
+    sendResponse
+  );
   respondAsync(getStatusResponse(targetTabId), sendResponse);
 }
 
@@ -189,12 +214,23 @@ function handleSetLogVisible(
   );
 }
 
+function handleSetLogSoundEnabled(
 function handleSetAutoSend(
   request: MessageRequest,
   currentTabId: number | null | undefined,
   sendResponse: SendResponse
 ): void {
   const targetTabId = request.tabId ?? currentTabId;
+  const soundEnabled = request.soundEnabled === true;
+
+  respondAsync(
+    chrome.storage.sync.set({ logSoundEnabled: soundEnabled }).then(() => {
+      if (targetTabId) {
+        void chrome.tabs.sendMessage(targetTabId, {
+          type: "SET_LOG_SOUND_ENABLED",
+          soundEnabled,
+        }).catch(ignoreRuntimeError);
+      }
   if (!targetTabId) {
     sendResponse({ success: false, error: "Missing Tab ID" });
     return;
@@ -218,6 +254,23 @@ function handleSetAutoSend(
   );
 }
 
+async function playLogSound(request: MessageRequest): Promise<{ success: boolean; error?: string }> {
+  if (!isLogSoundType(request.logType)) {
+    return { success: false, error: "Unsupported log sound type." };
+  }
+
+  return playAttentionSound(request.logType);
+}
+
+function isLogSoundType(value: unknown): value is LogSoundType {
+  return value === "info" ||
+    value === "success" ||
+    value === "warn" ||
+    value === "error" ||
+    value === "action";
+}
+
+function handleConnectExisting(
 function handleSetAutoApproveTools(
   request: MessageRequest,
   currentTabId: number | null | undefined,
diff --git a/bridge-browser/src/content/main.ts b/bridge-browser/src/content/main.ts
index 6940705..92e94dc 100644
--- a/bridge-browser/src/content/main.ts
+++ b/bridge-browser/src/content/main.ts
@@ -79,6 +79,8 @@ function handleRuntimeMessage(request: unknown, sendResponse: RuntimeSendRespons
     Logger.toggle(show);
     Logger.log("Logger Visible: " + show, "info");
   }
+  if (request.type === "SET_LOG_SOUND_ENABLED") {
+    Logger.setSoundEnabled(request.soundEnabled === true);
   if (request.type === "SET_AUTO_SEND") {
     CONFIG.autoSend = request.autoSend !== false;
     if (!CONFIG.autoSend) {
@@ -523,6 +525,7 @@ function startObserver() {
   // 2. Check initial status
   chrome.runtime.sendMessage({ type: "GET_STATUS" }, async (response: unknown) => {
     if (isStatusResponse(response) && response.connected) {
+      Logger.setSoundEnabled(response.soundEnabled === true);
       isClientConnected = true;
       if (typeof response.workspaceId === "string") {
         currentWorkspaceId = response.workspaceId;
diff --git a/bridge-browser/src/modules/logger.ts b/bridge-browser/src/modules/logger.ts
index 808e7a2..7b7c385 100644
--- a/bridge-browser/src/modules/logger.ts
+++ b/bridge-browser/src/modules/logger.ts
@@ -21,6 +21,7 @@ export const Logger = {
   filterButtons: new Map<LoggerFilterType, HTMLButtonElement>(),
   activeTypes: new Set<LoggerLogType>(["summary"]),
   isMinimized: false,
+  soundEnabled: false,
 
   init() {
     if (this.el) {return;}
@@ -291,7 +292,24 @@ export const Logger = {
     }
   },
 
+  setSoundEnabled(enabled: boolean) {
+    this.soundEnabled = enabled;
+  },
+
+  playLogSound(type: LoggerLogType) {
+    if (!this.soundEnabled || !isStandardLogType(type)) {return;}
+
+    try {
+      chrome.runtime.sendMessage({ type: "PLAY_LOG_SOUND", logType: type }, () => {
+        void chrome.runtime.lastError;
+      });
+    } catch {
+      // Logger may be reused outside an extension context during local testing.
+    }
+  },
+
   log(msg: string, type: LoggerLogType = "info") {
+    this.playLogSound(type);
     if (!this.el || this.el.style.display === "none") {return;}
     const line = document.createElement("div");
     line.className = "line";
@@ -319,3 +337,7 @@ export const Logger = {
     }
   },
 };
+
+function isStandardLogType(type: LoggerLogType): type is typeof STANDARD_LOG_TYPES[number] {
+  return STANDARD_LOG_TYPES.includes(type as typeof STANDARD_LOG_TYPES[number]);
+}
diff --git a/bridge-browser/src/offscreen/audio.ts b/bridge-browser/src/offscreen/audio.ts
index bf6c635..8faa818 100644
--- a/bridge-browser/src/offscreen/audio.ts
+++ b/bridge-browser/src/offscreen/audio.ts
@@ -1,5 +1,38 @@
 const PLAY_ATTENTION_SOUND = "PLAY_ATTENTION_SOUND";
 
+type LogSoundType = "info" | "success" | "warn" | "error" | "action";
+
+type ToneStep = {
+  frequency: number;
+  duration: number;
+  gap?: number;
+  type?: OscillatorType;
+};
+
+const SOUND_PATTERNS: Record<LogSoundType, ToneStep[]> = {
+  info: [
+    { frequency: 660, duration: 0.12 },
+    { frequency: 880, duration: 0.16 },
+  ],
+  success: [
+    { frequency: 784, duration: 0.12 },
+    { frequency: 1046.5, duration: 0.22 },
+  ],
+  warn: [
+    { frequency: 523.25, duration: 0.14, type: "triangle" },
+    { frequency: 392, duration: 0.24, type: "triangle" },
+  ],
+  error: [
+    { frequency: 220, duration: 0.16, type: "square" },
+    { frequency: 196, duration: 0.26, type: "square" },
+  ],
+  action: [
+    { frequency: 880, duration: 0.08 },
+    { frequency: 987.77, duration: 0.08 },
+    { frequency: 1174.66, duration: 0.16 },
+  ],
+};
+
 let audioContext: AudioContext | null = null;
 
 chrome.runtime.onMessage.addListener((request, _sender, sendResponse) => {
@@ -7,7 +40,8 @@ chrome.runtime.onMessage.addListener((request, _sender, sendResponse) => {
     return false;
   }
 
-  void playAttentionSound()
+  const logType = getLogSoundType(request.logType);
+  void playAttentionSound(logType)
     .then(() => sendResponse({ success: true }))
     .catch((error) => {
       sendResponse({
@@ -19,25 +53,30 @@ chrome.runtime.onMessage.addListener((request, _sender, sendResponse) => {
   return true;
 });
 
-async function playAttentionSound(): Promise<void> {
+async function playAttentionSound(logType: LogSoundType): Promise<void> {
   const context = getAudioContext();
   if (context.state === "suspended") {
     await context.resume();
   }
 
+  const pattern = SOUND_PATTERNS[logType];
   const start = context.currentTime + 0.01;
   const output = context.createGain();
+  const totalDuration = pattern.reduce((sum, tone) => sum + tone.duration + (tone.gap ?? 0.03), 0);
   output.gain.setValueAtTime(0.0001, start);
-  output.gain.linearRampToValueAtTime(0.12, start + 0.02);
-  output.gain.exponentialRampToValueAtTime(0.0001, start + 0.48);
+  output.gain.linearRampToValueAtTime(0.1, start + 0.02);
+  output.gain.exponentialRampToValueAtTime(0.0001, start + totalDuration + 0.06);
   output.connect(context.destination);
 
-  playTone(context, output, 880, start, 0.16);
-  playTone(context, output, 1174.66, start + 0.16, 0.24);
+  let cursor = start;
+  for (const tone of pattern) {
+    playTone(context, output, tone, cursor);
+    cursor += tone.duration + (tone.gap ?? 0.03);
+  }
 
   window.setTimeout(() => {
     output.disconnect();
-  }, 650);
+  }, Math.ceil((totalDuration + 0.2) * 1000));
 }
 
 function getAudioContext(): AudioContext {
@@ -61,24 +100,23 @@ function getWebkitAudioContext(): typeof AudioContext | undefined {
 function playTone(
   context: AudioContext,
   output: AudioNode,
-  frequency: number,
-  start: number,
-  duration: number
+  tone: ToneStep,
+  start: number
 ): void {
   const oscillator = context.createOscillator();
   const gain = context.createGain();
 
-  oscillator.type = "sine";
-  oscillator.frequency.setValueAtTime(frequency, start);
+  oscillator.type = tone.type ?? "sine";
+  oscillator.frequency.setValueAtTime(tone.frequency, start);
 
   gain.gain.setValueAtTime(0.0001, start);
   gain.gain.linearRampToValueAtTime(1, start + 0.01);
-  gain.gain.exponentialRampToValueAtTime(0.0001, start + duration);
+  gain.gain.exponentialRampToValueAtTime(0.0001, start + tone.duration);
 
   oscillator.connect(gain);
   gain.connect(output);
   oscillator.start(start);
-  oscillator.stop(start + duration + 0.03);
+  oscillator.stop(start + tone.duration + 0.03);
   oscillator.addEventListener(
     "ended",
     () => {
@@ -89,6 +127,18 @@ function playTone(
   );
 }
 
+function getLogSoundType(value: unknown): LogSoundType {
+  return isLogSoundType(value) ? value : "action";
+}
+
+function isLogSoundType(value: unknown): value is LogSoundType {
+  return value === "info" ||
+    value === "success" ||
+    value === "warn" ||
+    value === "error" ||
+    value === "action";
+}
+
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === "object" && value !== null;
 }
diff --git a/bridge-browser/src/popup/index.ts b/bridge-browser/src/popup/index.ts
index df83ce7..0eae048 100644
--- a/bridge-browser/src/popup/index.ts
+++ b/bridge-browser/src/popup/index.ts
@@ -15,6 +15,9 @@ type PopupElements = {
   autoSendInput: HTMLInputElement;
   autoApproveToolsInput: HTMLInputElement;
   showLogInput: HTMLInputElement;
+  soundInput: HTMLInputElement;
+  availableView: HTMLElement;
+  gatewayList: HTMLElement;
   sessionPresetToggle: HTMLButtonElement;
   sessionPresetPanel: HTMLElement;
   defaultAutoApproveToolsInput: HTMLInputElement;
@@ -24,6 +27,8 @@ type PopupElements = {
   autoSendLabel: HTMLElement;
   autoApproveToolsLabel: HTMLElement;
   showLogLabel: HTMLElement;
+  soundLabel: HTMLElement;
+  availableGateways: HTMLElement;
   sessionPresetToggleLabel: HTMLElement;
   defaultAutoApproveToolsLabel: HTMLElement;
   sessionPresetHint: HTMLElement;
@@ -47,6 +52,58 @@ type ManualInitStatusState = {
   token: number;
 };
 
+type GatewaySession = {
+  port: number;
+  token: string;
+};
+
+const UI: Record<string, Record<string, string>> = {
+  en: {
+    title: BRANDING.bridgeName,
+    connected_text: "✅ Connected to VS Code",
+    port_label: "Port",
+    manual_init: "Manual Initialization",
+    manual_init_title: "Add initialization context to the current input",
+    manual_init_running: "Initializing...",
+    manual_init_done: "Initialization added",
+    manual_init_attached: "Initialization attached",
+    manual_init_failed: "Initialization failed",
+    manual_init_unavailable: "Cannot initialize here",
+    auto_send: "Auto Send Message",
+    show_log: "Show Floating Log",
+    notification_sound: "Notification Sound",
+    available_gateways: "⚡ Available Gateways",
+    disconnected: "🔴 Disconnected",
+    installed_title: "👉 Already Installed?",
+    installed_desc: `Click ${BRANDING.productName} in the VS Code status bar (bottom right) and follow the steps to launch.`,
+    not_installed_title: "👉 Not Installed?",
+    marketplace_hint: "Search in VS Code Marketplace:",
+    connect_to: "Connect to",
+  },
+  zh: {
+    title: BRANDING.bridgeName,
+    connected_text: "✅ 已连接到 VS Code",
+    port_label: "端口",
+    manual_init: "手动初始化",
+    manual_init_title: "将初始化上下文追加到当前输入框",
+    manual_init_running: "初始化中...",
+    manual_init_done: "初始化上下文已添加",
+    manual_init_attached: "初始化上下文已作为 txt 附件添加",
+    manual_init_failed: "初始化失败",
+    manual_init_unavailable: "当前页面无法初始化",
+    auto_send: "自动发送消息",
+    show_log: "显示悬浮日志",
+    notification_sound: "提示音",
+    available_gateways: "⚡ 可用网关",
+    disconnected: "🔴 未连接",
+    installed_title: "👉 已安装？",
+    installed_desc: `点击 VS Code 右下角状态栏中的 ${BRANDING.productName}，并按提示启动服务。`,
+    not_installed_title: "👉 未安装？",
+    marketplace_hint: "在 VS Code 扩展市场中搜索：",
+    connect_to: "连接到",
+  },
+};
+
 document.addEventListener("DOMContentLoaded", () => {
   void initializePopup();
 });
@@ -90,6 +147,9 @@ function getPopupElements(): PopupElements {
     autoSendInput: document.getElementById("autoSend") as HTMLInputElement,
     autoApproveToolsInput: document.getElementById("autoApproveTools") as HTMLInputElement,
     showLogInput: document.getElementById("showLog") as HTMLInputElement,
+    soundInput: document.getElementById("logSound") as HTMLInputElement,
+    availableView: document.getElementById("availableView") as HTMLElement,
+    gatewayList: document.getElementById("gatewayList") as HTMLElement,
     sessionPresetToggle: document.getElementById("sessionPresetToggle") as HTMLButtonElement,
     sessionPresetPanel: document.getElementById("sessionPresetPanel") as HTMLElement,
     defaultAutoApproveToolsInput: document.getElementById("defaultAutoApproveTools") as HTMLInputElement,
@@ -99,6 +159,8 @@ function getPopupElements(): PopupElements {
     autoSendLabel: document.getElementById("autoSendLabel") as HTMLElement,
     autoApproveToolsLabel: document.getElementById("autoApproveToolsLabel") as HTMLElement,
     showLogLabel: document.getElementById("showLogLabel") as HTMLElement,
+    soundLabel: document.getElementById("soundLabel") as HTMLElement,
+    availableGateways: document.getElementById("availableGateways") as HTMLElement,
     sessionPresetToggleLabel: document.getElementById("sessionPresetToggleLabel") as HTMLElement,
     defaultAutoApproveToolsLabel: document.getElementById("defaultAutoApproveToolsLabel") as HTMLElement,
     sessionPresetHint: document.getElementById("sessionPresetHint") as HTMLElement,
@@ -123,6 +185,8 @@ function initializeLabels(context: PopupContext): void {
   elements.autoSendLabel.textContent = t("auto_send");
   elements.autoApproveToolsLabel.textContent = t("auto_approve_tools");
   elements.showLogLabel.textContent = t("show_log");
+  elements.soundLabel.textContent = t("notification_sound");
+  elements.availableGateways.innerHTML = `<span>⚡</span> ${t("available_gateways").replace(/^⚡\s*/, "")}`;
   elements.sessionPresetToggleLabel.textContent = t("session_preset");
   elements.sessionPresetToggle.title = t("session_preset_title");
   elements.sessionPresetHint.textContent = t("session_preset_hint");
@@ -177,6 +241,9 @@ function requestCurrentStatus(currentTabId: number, context: PopupContext): void
 }
 
 function showConnectedStatus(
+  response: { port?: number; showLog?: boolean; soundEnabled?: boolean },
+  elements: PopupElements
+): void {
   response: {
     port?: number;
     showLog?: boolean;
@@ -196,6 +263,7 @@ function showConnectedStatus(
   elements.autoApproveToolsInput.checked = response.autoApproveTools === true;
   elements.defaultAutoApproveToolsInput.checked = response.defaultAutoApproveTools === true;
   elements.showLogInput.checked = response.showLog === true;
+  elements.soundInput.checked = response.soundEnabled === true;
 }
 
 function showSuspendedStatus(context: PopupContext): void {
@@ -270,6 +338,11 @@ function bindSessionPresetToggle(elements: PopupElements): void {
   });
 }
 
+function bindPopupControls(currentTabId: number, context: PopupContext): void {
+  bindManualInitButton(currentTabId, context);
+  bindAutoSendToggle(context.elements.autoSendInput);
+  bindLogToggle(currentTabId, context.elements.showLogInput);
+  bindSoundToggle(currentTabId, context.elements.soundInput);
 function setSessionPresetPanelExpanded(elements: PopupElements, expanded: boolean): void {
   elements.sessionPresetToggle.setAttribute("aria-expanded", String(expanded));
   elements.sessionPresetPanel.classList.toggle("hidden", !expanded);
@@ -390,3 +463,22 @@ function bindLogToggle(currentTabId: number, showLogInput: HTMLInputElement): vo
     });
   });
 }
+
+function bindSoundToggle(currentTabId: number, soundInput: HTMLInputElement): void {
+  chrome.storage.sync.get(["logSoundEnabled"], (items: Record<string, unknown>) => {
+    if (typeof items.logSoundEnabled === "boolean") {
+      soundInput.checked = items.logSoundEnabled;
+    }
+  });
+
+  soundInput.addEventListener("change", () => {
+    const soundEnabled = soundInput.checked;
+    void chrome.storage.sync.set({ logSoundEnabled: soundEnabled });
+    void chrome.tabs.sendMessage(currentTabId, {
+      type: "SET_LOG_SOUND_ENABLED",
+      soundEnabled,
+    }).catch(() => {
+      void chrome.runtime.lastError;
+    });
+  });
+}
diff --git a/bridge-browser/src/types.ts b/bridge-browser/src/types.ts
index e39346c..cd30c13 100644
--- a/bridge-browser/src/types.ts
+++ b/bridge-browser/src/types.ts
@@ -23,6 +23,8 @@ export interface MessageRequest {
   message?: string;
   onlyWhenWindowInBackground?: boolean;
   playSound?: boolean;
+  soundEnabled?: boolean;
+  logType?: string;
   connected?: boolean;
   autoSend?: boolean;
   autoApproveTools?: boolean;
@@ -43,6 +45,7 @@ export interface StatusResponse {
   error?: string;
   port?: number;
   showLog?: boolean;
+  soundEnabled?: boolean;
   autoSend?: boolean;
   autoApproveTools?: boolean;
   defaultAutoApproveTools?: boolean;