diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx
index 9808d73..4f5a4c4 100644
--- a/src/components/TitleBar.tsx
+++ b/src/components/TitleBar.tsx
@@ -1,12 +1,24 @@
+import { useEffect, useState } from "react";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { useStore } from "../store";
 
+function useWindowWidth() {
+  const [width, setWidth] = useState(window.innerWidth);
+  useEffect(() => {
+    const handler = () => setWidth(window.innerWidth);
+    window.addEventListener("resize", handler);
+    return () => window.removeEventListener("resize", handler);
+  }, []);
+  return width;
+}
+
 interface Props {
   onOpenSettings: () => void;
 }
 
 export default function TitleBar({ onOpenSettings }: Props) {
   const { view, closeGuide, activeGuideData } = useStore();
+  const windowWidth = useWindowWidth();
 
   function handleDragMouseDown(e: React.MouseEvent) {
     if (e.button === 0) {
@@ -43,7 +55,7 @@ export default function TitleBar({ onOpenSettings }: Props) {
         <span style={{ pointerEvents: "none", fontSize: "13px", fontWeight: 700, color: "#f0c040", letterSpacing: "0.05em" }}>
           TougliGui
         </span>
-        {view === "guide" && activeGuideData && (
+        {view === "guide" && activeGuideData && windowWidth >= 400 && (
           <>
             <span style={{ pointerEvents: "none", color: "#4a5568", fontSize: "12px" }}>›</span>
             <span style={{ pointerEvents: "none", fontSize: "12px", color: "#94a3b8" }}>{activeGuideData.name}</span>