diff --git a/web/src/app/_dialogs/about.md b/web/src/app/_dialogs/about.md
new file mode 100644
index 0000000..823c5fe
--- /dev/null
+++ b/web/src/app/_dialogs/about.md
@@ -0,0 +1,31 @@
+# 🦌 [About DeerFlow](https://github.com/bytedance/deer-flow)
+
+> Come from Open Source, Back to Open Source
+
+**DeerFlow** (**D**eep **E**xploration and **E**fficient **R**esearch **Flow**) is a community-driven AI automation framework that builds upon the incredible work of the open source community. Our goal is to combine language models with specialized tools for tasks like web search, crawling, and Python code execution, while giving back to the community that made this possible.
+
+## Github
+
+[github.com/bytedance/deer-flow](https://github.com/bytedance/deer-flow)
+
+## License
+
+This project is open source and available under the MIT License.
+
+## Acknowledgments
+
+Special thanks to all the open source projects and contributors that make DeerFlow possible. We stand on the shoulders of giants.
+
+In particular, we want to express our deep appreciation for:
+- [LangChain](https://github.com/langchain-ai/langchain) for their exceptional framework that powers our LLM interactions and chains
+- [LangGraph](https://github.com/langchain-ai/langgraph) for enabling our sophisticated multi-agent orchestration
+
+For the web project, we want to express our deep appreciation for:
+- [Next.js](https://nextjs.org/) for their exceptional framework
+- [Shadcn](https://ui.shadcn.com/) for their minimalistic components that powers our UI
+- [Zustand](https://zustand.docs.pmnd.rs/) for their stunning state management
+- [Framer Motion](https://www.framer.com/motion/) for their amazing animation library
+- [React Markdown](https://www.npmjs.com/package/react-markdown) for their exceptional markdown rendering and customizability
+- Last but not least, special thanks to [SToneX](https://github.com/stonexer) for his great contribution for **[token-by-token visual effect](./src/core/rehype/rehype-split-words-into-spans.ts)**
+
+These amazing projects form the foundation of DeerFlow and demonstrate the power of open source collaboration.
diff --git a/web/src/app/_dialogs/settings-dialog.tsx b/web/src/app/_dialogs/settings-dialog.tsx
index f864ad3..3584e32 100644
--- a/web/src/app/_dialogs/settings-dialog.tsx
+++ b/web/src/app/_dialogs/settings-dialog.tsx
@@ -1,4 +1,5 @@
 import { BadgeInfo, Blocks, Settings } from "lucide-react";
+import { useState } from "react";
 
 import { Button } from "~/components/ui/button";
 import {
@@ -10,11 +11,33 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "~/components/ui/dialog";
+import { Tabs, TabsContent } from "~/components/ui/tabs";
+import { cn } from "~/lib/utils";
 
-import { ScrollContainer } from "../_components/scroll-container";
+import { Markdown } from "../_components/markdown";
 import { Tooltip } from "../_components/tooltip";
 
+import about from "./about.md";
+
+const SETTINGS_TABS = [
+  {
+    id: "general",
+    label: "General",
+    icon: Settings,
+  },
+  {
+    id: "mcp",
+    label: "MCP",
+    icon: Blocks,
+  },
+  {
+    id: "about",
+    label: "About",
+    icon: BadgeInfo,
+  },
+];
 export function SettingsDialog() {
+  const [activeTabId, setActiveTabId] = useState(SETTINGS_TABS[0]!.id);
   return (
     <Dialog>
       <Tooltip title="Settings">
@@ -31,32 +54,41 @@ export function SettingsDialog() {
             Manage your DeerFlow settings here.
           </DialogDescription>
         </DialogHeader>
-        <div className="flex h-100 w-full border-y">
-          <div className="flex w-60 border-r">
-            <ScrollContainer className="size-full p-2" scrollShadow={false}>
-              <ul className="flex flex-col gap-2">
-                <li className="flex h-8 items-center gap-1.5">
-                  <Settings size={16} />
-                  <span>General</span>
-                </li>
-                <li className="flex items-center gap-1.5">
-                  <Blocks size={16} />
-                  <span>MCP</span>
-                </li>
-                <li className="flex items-center gap-1.5">
-                  <BadgeInfo size={16} />
-                  <span>About</span>
-                </li>
-              </ul>
-            </ScrollContainer>
+        <Tabs value={activeTabId}>
+          <div className="flex h-100 w-full overflow-auto border-y">
+            <ul className="flex w-60 shrink-0 border-r p-1">
+              <div className="size-full">
+                {SETTINGS_TABS.map((tab) => (
+                  <li
+                    key={tab.id}
+                    className={cn(
+                      "hover:accent-foreground hover:bg-accent mb-1 flex h-8 w-full cursor-pointer items-center gap-1.5 rounded px-2",
+                      activeTabId === tab.id &&
+                        "!bg-primary !text-primary-foreground",
+                    )}
+                    onClick={() => setActiveTabId(tab.id)}
+                  >
+                    <tab.icon size={16} />
+                    <span>{tab.label}</span>
+                  </li>
+                ))}
+              </div>
+            </ul>
+            <div className="min-w-0 flex-grow">
+              <div className="size-full overflow-auto p-4">
+                <TabsContent value="general">
+                  <div>General</div>
+                </TabsContent>
+                <TabsContent value="mcp">
+                  <div>Coming soon...</div>
+                </TabsContent>
+                <TabsContent value="about">
+                  <Markdown>{about}</Markdown>
+                </TabsContent>
+              </div>
+            </div>
           </div>
-          <div className="min-h-0 flex-grow">
-            <ScrollContainer
-              className="size-full"
-              scrollShadow={false}
-            ></ScrollContainer>
-          </div>
-        </div>
+        </Tabs>
         <DialogFooter>
           <Button type="submit">Save Settings</Button>
           <Button variant="outline">Cancel</Button>