diff --git a/src/pages/BugReport.jsx b/src/pages/BugReport.jsx
index 14ed170..aa4861d 100644
--- a/src/pages/BugReport.jsx
+++ b/src/pages/BugReport.jsx
@@ -15,6 +15,7 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
 import { $generateHtmlFromNodes } from "@lexical/html";
 import { CLEAR_EDITOR_COMMAND } from "lexical";
 import axios from "axios";
+import { Link } from "react-router-dom";
 
 function Form({ theme }) {
   const [editor] = useLexicalComposerContext();
@@ -172,11 +173,13 @@ export default function BugReport() {
     <>
       <div className="sm:py-3 py-5 px-20 sm:px-6 flex justify-between items-center">
         <div className="flex items-center justify-start">
-          <img
-            src={theme === "dark" ? logo_dark : logo_light}
-            alt="logo"
-            className="me-2 sm:h-[28px] md:h-[46px]"
-          />
+          <Link to="/">
+            <img
+              src={theme === "dark" ? logo_dark : logo_light}
+              alt="logo"
+              className="me-2 sm:h-[28px] md:h-[46px]"
+            />
+          </Link>
           <div className="ms-4 sm:text-sm xl:text-lg font-semibold">
             Report a bug
           </div>
@@ -274,9 +277,10 @@ export default function BugReport() {
             closeIcon={null}
             description={
               <div>
-                We value your feedback! If you&apos;ve encountered a bug or issue
-                while using our platform, please help us improve by reporting
-                it. Your input is invaluable in making our service better.
+                We value your feedback! If you&apos;ve encountered a bug or
+                issue while using our platform, please help us improve by
+                reporting it. Your input is invaluable in making our service
+                better.
               </div>
             }
           />
diff --git a/src/pages/Shortcuts.jsx b/src/pages/Shortcuts.jsx
index 07a1ef1..261cb79 100644
--- a/src/pages/Shortcuts.jsx
+++ b/src/pages/Shortcuts.jsx
@@ -3,6 +3,7 @@ import logo_light from "../assets/logo_light_46.png";
 import logo_dark from "../assets/logo_dark_46.png";
 import { AutoComplete, Button } from "@douyinfe/semi-ui";
 import { IconSearch, IconSun, IconMoon } from "@douyinfe/semi-icons";
+import { Link } from "react-router-dom";
 
 const shortcuts = [
   { shortcut: "CTRL+S", title: "Save diagram", description: "" },
@@ -112,11 +113,13 @@ export default function Shortcuts() {
     <>
       <div className="sm:py-3 py-5 px-20 sm:px-6 flex justify-between items-center">
         <div className="flex items-center justify-start">
-          <img
-            src={theme === "dark" ? logo_dark : logo_light}
-            alt="logo"
-            className="me-2 sm:h-[28px] md:h-[46px]"
-          />
+          <Link to="/">
+            <img
+              src={theme === "dark" ? logo_dark : logo_light}
+              alt="logo"
+              className="me-2 sm:h-[28px] md:h-[46px]"
+            />
+          </Link>
           <div className="ms-4 sm:text-sm xl:text-lg font-semibold">
             Keyboard shortcuts
           </div>
diff --git a/src/pages/Survey.jsx b/src/pages/Survey.jsx
index 17b8628..31080e6 100644
--- a/src/pages/Survey.jsx
+++ b/src/pages/Survey.jsx
@@ -20,6 +20,7 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
 import { $generateHtmlFromNodes } from "@lexical/html";
 import { CLEAR_EDITOR_COMMAND } from "lexical";
 import axios from "axios";
+import { Link } from "react-router-dom";
 
 function SurveyForm({ theme }) {
   const [editor] = useLexicalComposerContext();
@@ -63,35 +64,32 @@ function SurveyForm({ theme }) {
     setLoading(false);
   };
 
-  const onSubmit = useCallback(
-    () => {
-      setLoading(true);
-      editor.update(() => {
-        const sendMail = async () => {
-          await axios
-            .post(`${import.meta.env.VITE_API_BACKEND_URL}/send_email`, {
-              subject: `[SURVEY]: ${new Date().toDateString()}`,
-              message: `${Object.keys(form).map(
-                (k) => `<div>${questions[k]}</div><div>${form[k]}</div>`
-              )}<div>How can we make drawDB a better experience for you?</div>${$generateHtmlFromNodes(
-                editor
-              )}`,
-            })
-            .then(() => {
-              Toast.success("Thanks for the feedback!");
-              editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
-              resetForm();
-            })
-            .catch(() => {
-              Toast.error("Oops! Something went wrong.");
-              setLoading(false);
-            });
-        };
-        sendMail();
-      });
-    },
-    [editor, form, questions]
-  );
+  const onSubmit = useCallback(() => {
+    setLoading(true);
+    editor.update(() => {
+      const sendMail = async () => {
+        await axios
+          .post(`${import.meta.env.VITE_API_BACKEND_URL}/send_email`, {
+            subject: `[SURVEY]: ${new Date().toDateString()}`,
+            message: `${Object.keys(form).map(
+              (k) => `<div>${questions[k]}</div><div>${form[k]}</div>`
+            )}<div>How can we make drawDB a better experience for you?</div>${$generateHtmlFromNodes(
+              editor
+            )}`,
+          })
+          .then(() => {
+            Toast.success("Thanks for the feedback!");
+            editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
+            resetForm();
+          })
+          .catch(() => {
+            Toast.error("Oops! Something went wrong.");
+            setLoading(false);
+          });
+      };
+      sendMail();
+    });
+  }, [editor, form, questions]);
 
   return (
     <div className="py-5 px-8 mt-6 card-theme rounded-md">
@@ -276,11 +274,13 @@ export default function Survey() {
     <>
       <div className="sm:py-3 py-5 md:px-8 px-20 flex justify-between items-center">
         <div className="flex items-center justify-start">
-          <img
-            src={theme === "dark" ? logo_dark : logo_light}
-            alt="logo"
-            className="me-2 sm:h-[28px] md:h-[46px]"
-          />
+          <Link to="/">
+            <img
+              src={theme === "dark" ? logo_dark : logo_light}
+              alt="logo"
+              className="me-2 sm:h-[28px] md:h-[46px]"
+            />
+          </Link>
           <div className="ms-4 sm:text-sm xl:text-lg font-semibold">
             Share your feedback
           </div>