diff --git a/frontend/docs/.vitepress/config.ts b/frontend/docs/.vitepress/config.ts
index aa326fe0..63b1fefd 100644
--- a/frontend/docs/.vitepress/config.ts
+++ b/frontend/docs/.vitepress/config.ts
@@ -15,7 +15,6 @@ export default defineConfig({
         nav: [
             {text: 'Home', link: '/'},
             {text: 'Guide', link: '/guide/about'},
-            {text: 'Reference', link: '/reference/api-examples'},
             {text: 'Demo', link: 'https://nginxui.jackyu.cn'}
         ],
 
@@ -30,10 +29,22 @@ export default defineConfig({
                         {text: 'Contributing', link: '/guide/contributing'},
                         {text: 'License', link: '/guide/license'}
                     ]
+                },
+                {
+                    text: 'Configuration',
+                    items: [
+                        {text: 'Server', link: '/guide/config-server'},
+                        {text: 'Nginx Log', link: '/guide/config-nginx-log'},
+                        {text: 'Open AI', link: '/guide/config-openai'}
+                    ]
                 }
             ]
         },
 
+        search: {
+            provider: 'local'
+        },
+
         footer: {
             message: 'Released under the AGPL-3.0 License.',
             copyright: 'Copyright © 2021-' + thisYear() + ' Nginx UI Team'
diff --git a/frontend/docs/guide/about.md b/frontend/docs/guide/about.md
index 9913e2b0..922f5c25 100644
--- a/frontend/docs/guide/about.md
+++ b/frontend/docs/guide/about.md
@@ -1,6 +1,6 @@
 # What is Nginx UI?
 
-![Dashboard](../public/dashboard_en.png)
+![Dashboard](/dashboard_en.png)
 
 Nginx UI is a comprehensive web-based interface designed to simplify the management and configuration of Nginx servers.
 It offers real-time server statistics, AI-powered ChatGPT assistance, one-click deployment, automatic renewal of Let's
diff --git a/frontend/docs/guide/config-nginx-log.md b/frontend/docs/guide/config-nginx-log.md
new file mode 100644
index 00000000..8904e513
--- /dev/null
+++ b/frontend/docs/guide/config-nginx-log.md
@@ -0,0 +1,18 @@
+# Nginx Log
+
+Nginx logs are essential for monitoring, troubleshooting, and maintaining your web server. They provide valuable
+insights into server performance, user behavior, and potential issues. In this section, we will discuss the two primary
+types of logs: access logs and error logs.
+
+## AccessLogPath
+
+- Type: `string`
+
+This option is used to set the path of nginx access log for Nginx UI, so we can view the log content online.
+
+## ErrorLogPath
+
+- Type: `string`
+
+This option is used to set the path of nginx error log for Nginx UI, so we can view the log content online.
+
diff --git a/frontend/docs/guide/config-openai.md b/frontend/docs/guide/config-openai.md
new file mode 100644
index 00000000..5b8364e8
--- /dev/null
+++ b/frontend/docs/guide/config-openai.md
@@ -0,0 +1,32 @@
+# Open AI
+
+This section is for setting up ChatGPT configurations. Please be aware that we do not check the accuracy of the
+information you provide. If the configuration is incorrect, it might cause API request failures, making the ChatGPT
+assistant unusable.
+
+## BaseUrl
+
+- Type: `string`
+
+This option is used to set the base url of the api of Open AI, leave it blank if you do not need to change the url.
+
+## Token
+
+- Type: `string`
+
+This option is used to set the token of the api of Open AI.
+
+## Proxy
+
+- Type: `string`
+
+This option is used to configure the proxy for OpenAI's API. If you are unable to access OpenAI's API in your country or
+region, you can use an HTTP proxy and set this option to the corresponding URL.
+
+## Model
+
+- Type: `string`
+- Default: `gpt-3.5-turbo`
+
+This option is used to set the ChatGPT model. If your account has the privilege to access the gpt-4 model, you can
+configure this option accordingly.
diff --git a/frontend/docs/guide/config-server.md b/frontend/docs/guide/config-server.md
new file mode 100644
index 00000000..701402bc
--- /dev/null
+++ b/frontend/docs/guide/config-server.md
@@ -0,0 +1,79 @@
+# Server
+
+The server section of the Nginx UI configuration deals with various settings that control the behavior and operation of
+the Nginx UI server. In this section, we will discuss the available options, their default values, and their purpose.
+
+## HttpPort
+
+- Type: `int`
+- Default: `9000`
+
+Nginx UI server listen port. This option is used to configure the port on which the Nginx UI server listens for incoming
+HTTP requests. Changing the default port can be useful for avoiding port conflicts or enhancing security.
+
+## RunMode
+
+- Type: `string`
+- Supported value: `release`, `debug`
+
+::: tip
+At present, we have not yet adapted to this option, and there will be no significant differences between release and
+debug in terms of usage.
+:::
+
+## HTTPChallengePort
+
+- Type: `int`
+- Default: `9180`
+
+This option is used to set the port for backend listening in the HTTP01 challenge mode when obtaining Let's Encrypt
+certificates. The HTTP01 challenge is a domain validation method used by Let's Encrypt to verify that you control the
+domain for which you're requesting a certificate.
+
+## Database
+
+- Type: `string`
+- Default: `database`
+
+This option is used to set the name of the sqlite database used by Nginx UI to store its data.
+
+## StartCmd
+
+- Type: `string`
+- Default: `login`
+
+This option is used to set the start command of the web terminal.
+
+::: warning
+For security reason, we use `login` as the start command, so you have to log in via the default authentication method of
+the Linux. If you don't want to enter your username and password for verification every time you access the web
+terminal, please set it to `bash` or `zsh` (if installed).
+:::
+
+## PageSize
+
+- Type: `int`
+- Default: 10
+
+This option is used to set the page size of list pagination in the Nginx UI. Adjusting the page size can help in
+managing large amounts of data more effectively.
+
+## CADir
+
+- Type: `string`
+
+When applying for a Let's Encrypt certificate, we use the default CA address of Let's Encrypt. If you need to debug or
+obtain certificates from other providers, you can set CADir to their address.
+
+::: tip
+Please note that the address provided by
+CADir needs to comply with the `RFC 8555` standard.
+:::
+
+## GithubProxy
+
+- Type: `string`
+- Suggestion: `https://ghproxy.com/`
+
+For users in mainland China who may experience difficulties downloading resources from Github, this option allows them
+to set a proxy for github.com to improve accessibility.
diff --git a/frontend/docs/public/favicon.ico b/frontend/docs/public/favicon.ico
new file mode 100644
index 00000000..6c40bc91
Binary files /dev/null and b/frontend/docs/public/favicon.ico differ
diff --git a/frontend/docs/reference/api-examples.md b/frontend/docs/reference/api-examples.md
deleted file mode 100644
index 6bd8bb5c..00000000
--- a/frontend/docs/reference/api-examples.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-outline: deep
----
-
-# Runtime API Examples
-
-This page demonstrates usage of some of the runtime APIs provided by VitePress.
-
-The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
-
-```md
-<script setup>
-import { useData } from 'vitepress'
-
-const { theme, page, frontmatter } = useData()
-</script>
-
-## Results
-
-### Theme Data
-<pre>{{ theme }}</pre>
-
-### Page Data
-<pre>{{ page }}</pre>
-
-### Page Frontmatter
-<pre>{{ frontmatter }}</pre>
-```
-
-<script setup>
-import { useData } from 'vitepress'
-
-const { site, theme, page, frontmatter } = useData()
-</script>
-
-## Results
-
-### Theme Data
-<pre>{{ theme }}</pre>
-
-### Page Data
-<pre>{{ page }}</pre>
-
-### Page Frontmatter
-<pre>{{ frontmatter }}</pre>
-
-## More
-
-Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).