diff --git a/web/src/components/CreateStorageServiceDialog.tsx b/web/src/components/CreateStorageServiceDialog.tsx
index 504564ff..25cec770 100644
--- a/web/src/components/CreateStorageServiceDialog.tsx
+++ b/web/src/components/CreateStorageServiceDialog.tsx
@@ -5,6 +5,7 @@ import * as api from "@/helpers/api";
 import { generateDialog } from "./Dialog";
 import Icon from "./Icon";
 import RequiredBadge from "./RequiredBadge";
+import LearnMore from "./LearnMore";
 
 interface Props extends DialogProps {
   storage?: ObjectStorage;
@@ -105,14 +106,7 @@ const CreateStorageServiceDialog: React.FC<Props> = (props: Props) => {
       <div className="dialog-header-container">
         <p className="title-text">
           {isCreating ? "Create storage" : "Update storage"}
-          <a
-            className="ml-2 text-sm text-blue-600 hover:opacity-80 hover:underline"
-            href="https://usememos.com/docs/storage"
-            target="_blank"
-          >
-            Learn more
-            <Icon.ExternalLink className="inline -mt-1 ml-1 w-4 h-auto opacity-80" />
-          </a>
+          <LearnMore className="ml-2" url="https://usememos.com/docs/storage" />
         </p>
         <button className="btn close-btn" onClick={handleCloseBtnClick}>
           <Icon.X />
diff --git a/web/src/components/LearnMore.tsx b/web/src/components/LearnMore.tsx
new file mode 100644
index 00000000..4480b440
--- /dev/null
+++ b/web/src/components/LearnMore.tsx
@@ -0,0 +1,19 @@
+import Icon from "./Icon";
+
+interface Props {
+  url: string;
+  className?: string;
+}
+
+const LearnMore = (props: Props) => {
+  const { url, className } = props;
+
+  return (
+    <a className={`${className || ""} text-sm text-blue-600 hover:opacity-80 hover:underline`} href={url} target="_blank">
+      Learn more
+      <Icon.ExternalLink className="inline -mt-1 ml-1 w-4 h-auto opacity-80" />
+    </a>
+  );
+};
+
+export default LearnMore;
diff --git a/web/src/components/UpdateLocalStorageDialog.tsx b/web/src/components/UpdateLocalStorageDialog.tsx
index 88077697..394698e2 100644
--- a/web/src/components/UpdateLocalStorageDialog.tsx
+++ b/web/src/components/UpdateLocalStorageDialog.tsx
@@ -1,10 +1,11 @@
-import { Button, Input, Typography } from "@mui/joy";
+import { Button, Input } from "@mui/joy";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { useGlobalStore } from "@/store/module";
 import * as api from "@/helpers/api";
 import { generateDialog } from "./Dialog";
 import Icon from "./Icon";
+import LearnMore from "./LearnMore";
 
 interface Props extends DialogProps {
   localStoragePath?: string;
@@ -45,15 +46,13 @@ const UpdateLocalStorageDialog: React.FC<Props> = (props: Props) => {
           <Icon.X />
         </button>
       </div>
-      <div className="dialog-content-container">
-        <div className="py-2">
-          <Typography className="!mb-1" level="body2">
-            Local path
-          </Typography>
-          <p className="text-sm text-gray-400 break-all">{"It's a relative path to your database file."}</p>
-          <p className="text-sm text-gray-400 mb-2 break-all">{"e.g. assets/{timestamp}_{filename}"}</p>
-          <Input className="mb-2" placeholder="Path" value={path} onChange={(e) => setPath(e.target.value)} fullWidth />
-        </div>
+      <div className="dialog-content-container max-w-xs">
+        <p className="text-sm break-words mb-1">
+          {"Local storage path is a relative path to your database file."}
+          <LearnMore className="ml-1" url="https://usememos.com/docs/local-storage" />
+        </p>
+        <p className="text-sm text-gray-400 mb-2 break-all">{"e.g. assets/{timestamp}_{filename}"}</p>
+        <Input className="mb-2" placeholder="Local storage path" fullWidth value={path} onChange={(e) => setPath(e.target.value)} />
         <div className="mt-2 w-full flex flex-row justify-end items-center space-x-1">
           <Button variant="plain" color="neutral" onClick={handleCloseBtnClick}>
             Cancel