diff --git a/src/pages/Index/Index.js b/src/pages/Index/Index.js
index bb2d6c2..dc6e85b 100644
--- a/src/pages/Index/Index.js
+++ b/src/pages/Index/Index.js
@@ -43,6 +43,7 @@ const Index = () => {
   const [start, _setStart] = useState(null);
   const [end, _setEnd] = useState(null);
   const [doFocus, _setDoFocus] = useState(0);
+  const [focusTextClicked, setFocusTextClicked] = useState(false);
 
   useEffect(() => {
     if (!map) return;
@@ -308,6 +309,7 @@ const Index = () => {
       },
       onAzimuthAngleChange: (angle) =>
         setAzimuthAngle(Math.floor((angle / Math.PI) * 180)),
+      onFocusTextClick: () => setFocusTextClicked(true),
     });
   };
 
@@ -336,6 +338,19 @@ const Index = () => {
     }
   }, [mallInfo]);
 
+  useEffect(() => {
+    if (focusTextClicked) {
+      if (shop) {
+        setEnd(shop);
+        map.startNavigate({
+          start,
+          end: shop,
+        });
+      }
+      setFocusTextClicked(false);
+    }
+  }, [focusTextClicked]);
+
   return (
     <MallCode.Provider value={mallCode}>
       <div className="index">
@@ -367,9 +382,7 @@ const Index = () => {
             )}
 
             <div
-              className={["compass-wrapper", inAnimation ? "inNav" : ""].join(
-                " "
-              )}
+              className={["compass-wrapper", showNav ? "inNav" : ""].join(" ")}
             >
               <img
                 className="compass"