diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
index 78fcc78..29f457a 100644
--- a/website/docusaurus.config.ts
+++ b/website/docusaurus.config.ts
@@ -60,7 +60,7 @@ const config: Config = {
       title: 'Noi',
       logo: {
         alt: 'Noi Logo',
-        src: 'img/noi.png',
+        src: 'readme/noi.png',
       },
       items: [
         // {
@@ -84,7 +84,7 @@ const config: Config = {
     },
     footer: {
       style: 'dark',
-      copyright: `Copyright © ${new Date().getFullYear()} <a target="_blank" href="https://github.com/nofwl">NoFWL</a>.`,
+      copyright: `Copyright © ${new Date().getFullYear()} <a target="_blank" href="https://github.com/lencx">lencx</a>.`,
     },
     prism: {
       theme: prismThemes.github,
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 687d516..dd9177c 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -18,7 +18,7 @@
   --ifm-color-primary-lighter: #359962;
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --docusaurus-highlighted-code-line-bg: rgba(45, 45, 45, 0.1);
   --ifm-navbar-background-color: rgba(250, 247, 245, 0.9);
   --ifm-background-color: #fff;
 }
@@ -32,8 +32,8 @@
   --ifm-color-primary-light: #29d5b0;
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-  --ifm-navbar-background-color: rgba(39, 41, 53, 0.9);
+  --docusaurus-highlighted-code-line-bg: rgba(45, 45, 45, 0.1);
+  --ifm-navbar-background-color: rgba(46, 47, 54, 0.1);
 }
 
 .navbar--fixed-top {
@@ -47,3 +47,7 @@
 .navbar-sidebar {
   backdrop-filter: blur(6px) saturate(1.5);
 }
+
+.navbar__title {
+  display: none;
+}
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index ce4b5b8..18ee1bd 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -2,36 +2,58 @@
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 
+const noiVersion = '0.2.1';
+
 export default function Home(): JSX.Element {
   const {siteConfig} = useDocusaurusContext();
   return (
     <Layout
       title="Home"
       description={siteConfig.tagline}
+      wrapperClassName="bg-amber-200/30 dark:bg-slate-700/50"
     >
-      <main className="p-10 text-center bg-amber-200/30 dark:bg-slate-700/50">
+      <main className="p-10 text-center max-w-[960px] m-auto">
         <h1 className="font-bold">Noi</h1>
         <p className="text-md font-bold mb-10">{siteConfig.tagline}</p>
-        <div className="flex justify-center gap-10">
-          <div>
-            <img src="/img/apple-logo.svg" className="w-24 h-24 mx-auto mb-4" />
-            <p>macOS</p>
+        <div className="flex gap-10 justify-center items-end flex-row max-w-[560px] m-auto">
+          <div className="flex flex-col items-center gap-1 basis-1/3">
+            <img src="/os/apple-logo.svg" className="w-[40px] sm:w-[60px]" />
+            <div className="font-bold">macOS</div>
+            <div className="flex gap-2 justify-center">
+              <a href={`https://github.com/lencx/Noi/releases/download/v${noiVersion}/Noi_macos_${noiVersion}.dmg`}>x64</a>
+              <a href={`https://github.com/lencx/Noi/releases/download/v${noiVersion}/Noi_macos_${noiVersion}-arm64.dmg`}>arm64</a>
+            </div>
           </div>
-          <div>
-            <img src="/img/windows-logo.png" className="w-24 h-24 mx-auto mb-4" />
-            <p>Windows</p>
+          <div className="flex flex-col items-center gap-1 basis-1/3">
+            <img src="/os/windows-logo.png" className="w-[40px] sm:w-[60px]" />
+            <div className="font-bold">Windows</div>
+            <div className="flex gap-2 justify-center">
+              <a href={`https://github.com/lencx/Noi/releases/download/v${noiVersion}/Noi-win32-x64-${noiVersion}-setup.exe`}>x64</a>
+            </div>
           </div>
-          <div>
-            <img src="/img/linux-logo.png" className="w-24 h-24 mx-auto mb-4" />
-            <p>Linux</p>
+          <div className="flex flex-col items-center gap-1 basis-1/3">
+            <img src="/os/linux-logo.png" className="w-[40px] sm:w-[60px]" />
+            <div className="font-bold">Linux</div>
+            <div className="flex gap-2 justify-center">
+              <a href={`https://github.com/lencx/Noi/releases/download/v0.2.1/Noi_linux_0.2.1.AppImage`}>AppImage</a>
+              <a href={`https://github.com/lencx/Noi/releases/download/v0.2.1/noi_linux_amd64_0.2.1.deb`}>amd64.deb</a>
+            </div>
           </div>
         </div>
 
-        <p className="font-bold text-red-500">Note: Final preparations for release are underway, please stay tuned.</p>
+        <h2 className="mt-5">Preview</h2>
+        <div className="grid sm:grid-cols-1 lg:grid-cols-2 gap-4 max-w-[960px] m-auto">
+          <img className="rounded-lg shadow-lg" src="/readme/noi-theme-dark.png" />
+          <img className="rounded-lg shadow-lg" src="/readme/noi-theme-light.png" />
+          <img className="rounded-lg shadow-lg" src="/readme/noi-batch-ask.png" />
+          <img className="rounded-lg shadow-lg" src="/readme/noi-settings-prompts.png" />
+        </div>
 
-        <div className="grid sm:grid-cols-1 lg:grid-cols-2 gap-4">
-          <img className="rounded-lg shadow-lg mb-4" src="/img/noi-preview-1.png" />
-          <img className="rounded-lg shadow-lg" src="/img/noi-preview-2.png" />
+        <h2 className="mt-5">FAQ</h2>
+        <div className="text-left">
+          <h3>macOS</h3>
+          <p>If you encounter the error message "Noi" is damaged and can't be opened. You should move it to the Trash. while installing software on macOS, it may be due to security settings restrictions in macOS. To solve this problem, please try the following command in Terminal:</p>
+          <code className="px-2">xattr -cr /Applications/Noi.app</code>
         </div>
       </main>
     </Layout>
diff --git a/website/static/img/noi-preview-1.png b/website/static/img/noi-preview-1.png
deleted file mode 100644
index d2b68ec..0000000
Binary files a/website/static/img/noi-preview-1.png and /dev/null differ
diff --git a/website/static/img/noi-preview-2.png b/website/static/img/noi-preview-2.png
deleted file mode 100644
index f507312..0000000
Binary files a/website/static/img/noi-preview-2.png and /dev/null differ
diff --git a/website/static/img/noi.png b/website/static/img/noi.png
deleted file mode 100644
index 49b1f00..0000000
Binary files a/website/static/img/noi.png and /dev/null differ
diff --git a/website/static/img/apple-logo.svg b/website/static/os/apple-logo.svg
similarity index 100%
rename from website/static/img/apple-logo.svg
rename to website/static/os/apple-logo.svg
diff --git a/website/static/img/linux-logo.png b/website/static/os/linux-logo.png
similarity index 100%
rename from website/static/img/linux-logo.png
rename to website/static/os/linux-logo.png
diff --git a/website/static/img/windows-logo.png b/website/static/os/windows-logo.png
similarity index 100%
rename from website/static/img/windows-logo.png
rename to website/static/os/windows-logo.png
diff --git a/website/static/readme/mac-install-error.png b/website/static/readme/mac-install-error.png
new file mode 100644
index 0000000..fc8a20c
Binary files /dev/null and b/website/static/readme/mac-install-error.png differ
diff --git a/website/static/readme/noi-batch-ask.png b/website/static/readme/noi-batch-ask.png
new file mode 100644
index 0000000..5651bde
Binary files /dev/null and b/website/static/readme/noi-batch-ask.png differ
diff --git a/website/static/readme/noi-settings-prompts.png b/website/static/readme/noi-settings-prompts.png
new file mode 100644
index 0000000..aa7a742
Binary files /dev/null and b/website/static/readme/noi-settings-prompts.png differ
diff --git a/website/static/readme/noi-theme-dark.png b/website/static/readme/noi-theme-dark.png
new file mode 100644
index 0000000..f47926a
Binary files /dev/null and b/website/static/readme/noi-theme-dark.png differ
diff --git a/website/static/readme/noi-theme-light.png b/website/static/readme/noi-theme-light.png
new file mode 100644
index 0000000..fbd9057
Binary files /dev/null and b/website/static/readme/noi-theme-light.png differ
diff --git a/website/static/readme/noi.png b/website/static/readme/noi.png
new file mode 100644
index 0000000..920a987
Binary files /dev/null and b/website/static/readme/noi.png differ