diff --git a/.gitignore b/.gitignore
index cfab598..1ee2d97 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 .idea
 *.iml
 test.db
-.idea/
\ No newline at end of file
+.idea/
+build/
\ No newline at end of file
diff --git a/build.py b/build.py
new file mode 100644
index 0000000..fc07bfa
--- /dev/null
+++ b/build.py
@@ -0,0 +1,15 @@
+import subprocess
+import os
+import shutil
+
+if os.path.exists("build"):
+    shutil.rmtree("build")
+os.mkdir("build")
+
+subprocess.run(["go", "build", "-o", "build/", "main.go"])
+
+os.chdir("./frontend")
+subprocess.run(["npm", "install"], shell=True)
+subprocess.run(["npm", "run", "build"], shell=True)
+os.chdir("..")
+shutil.copytree("./frontend/dist", "./build/static")
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
index 1bd99ac..2fdecbf 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,11 +1,41 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
+    <base href="/">
+
+    <meta charset="UTF-8">
+    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+    <meta name="description" content="{{Description}}">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+
+    <!-- SEO meta -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="{{Title}}">
+    <meta name="twitter:description" content="{{Description}}">
+    <meta name="twitter:image" content="{{Preview}}">
+    <meta property="og:title" content="{{Title}}">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="{{Url}}">
+    <meta property="og:image" content="{{Preview}}">
+    <meta property="og:description" content="{{Description}}">
+    <meta property="og:site_name" content={{SiteName}}>
+
+    <!-- iOS meta tags & icons -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="Nysoure">
+    <link rel="apple-touch-icon" href="/icon-192.png">
+
+    <!-- Favicon -->
+    <link rel="icon" href="/favicon.ico" type="image/x-icon">
+
+    <title>{{Title}}</title>
   </head>
   <body>
+    <script>
+      window.serverName = "{{SiteName}}";
+      window.cloudflareTurnstileSiteKey = "{{CFTurnstileSiteKey}}";
+    </script>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
new file mode 100644
index 0000000..01b2076
Binary files /dev/null and b/frontend/public/favicon.ico differ
diff --git a/frontend/public/icon-192.png b/frontend/public/icon-192.png
new file mode 100644
index 0000000..f284631
Binary files /dev/null and b/frontend/public/icon-192.png differ
diff --git a/frontend/src/app.ts b/frontend/src/app.ts
index 849a831..20147e6 100644
--- a/frontend/src/app.ts
+++ b/frontend/src/app.ts
@@ -1,12 +1,19 @@
 import {User} from "./network/models.ts";
 
+interface MyWindow extends Window {
+  serverName?: string;
+  cloudflareTurnstileSiteKey?: string;
+}
+
 class App {
-  appName = "资源库"
+  appName = "Nysoure"
 
   user: User | null = null;
 
   token: string | null = null;
 
+  cloudflareTurnstileSiteKey: string | null = null;
+
   constructor() {
     this.init();
   }
@@ -20,6 +27,8 @@ class App {
     if (tokenJson) {
       this.token = JSON.parse(tokenJson);
     }
+    this.appName = (window as MyWindow).serverName || this.appName;
+    this.cloudflareTurnstileSiteKey = (window as MyWindow).cloudflareTurnstileSiteKey || null;
   }
 
   saveData() {
diff --git a/frontend/src/components/alert.tsx b/frontend/src/components/alert.tsx
index 0999d4d..8ac81e8 100644
--- a/frontend/src/components/alert.tsx
+++ b/frontend/src/components/alert.tsx
@@ -10,7 +10,7 @@ export function ErrorAlert({ message, className }: { message: string, className?
 
 export function InfoAlert({ message, className }: { message: string, className?: string }) {
   return <div role="alert" className={`alert alert-info ${className}`}>
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 shrink-0 stroke-current">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="h-6 w-6 shrink-0 stroke-current">
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
     </svg>
     <span>{message}</span>
diff --git a/frontend/src/components/navigator.tsx b/frontend/src/components/navigator.tsx
index 773fd39..562cea7 100644
--- a/frontend/src/components/navigator.tsx
+++ b/frontend/src/components/navigator.tsx
@@ -32,7 +32,7 @@ export default function Navigator() {
           <SearchBar />
           <UploadingSideBar />
           {
-            app.isAdmin() && <button className={"btn btn-circle btn-ghost"} onClick={() => {
+            app.isLoggedIn() && <button className={"btn btn-circle btn-ghost"} onClick={() => {
               navigate("/manage");
             }}>
               <MdSettings size={24} />
diff --git a/frontend/src/network/models.ts b/frontend/src/network/models.ts
index 0d1c67a..c6a33f1 100644
--- a/frontend/src/network/models.ts
+++ b/frontend/src/network/models.ts
@@ -116,4 +116,6 @@ export interface ServerConfig {
   allow_register: boolean;
   cloudflare_turnstile_site_key: string;
   cloudflare_turnstile_secret_key: string;
+  server_name: string;
+  server_description: string;
 }
diff --git a/frontend/src/pages/home_page.tsx b/frontend/src/pages/home_page.tsx
index c9d5ba4..ad404d5 100644
--- a/frontend/src/pages/home_page.tsx
+++ b/frontend/src/pages/home_page.tsx
@@ -1,6 +1,12 @@
+import { useEffect } from "react";
 import ResourcesView from "../components/resources_view.tsx";
 import {network} from "../network/network.ts";
+import { app } from "../app.ts";
 
 export default function HomePage() {
+  useEffect(() => {
+    document.title = app.appName;
+  }, [])
+
   return <ResourcesView loader={(page) => network.getResources(page)}></ResourcesView>
 }
\ No newline at end of file
diff --git a/frontend/src/pages/login_page.tsx b/frontend/src/pages/login_page.tsx
index a658695..f8e5742 100644
--- a/frontend/src/pages/login_page.tsx
+++ b/frontend/src/pages/login_page.tsx
@@ -1,4 +1,4 @@
-import {FormEvent, useState} from "react";
+import {FormEvent, useEffect, useState} from "react";
 import {network} from "../network/network.ts";
 import {app} from "../app.ts";
 import {useNavigate} from "react-router";
@@ -32,6 +32,10 @@ export default function LoginPage() {
     }
   };
 
+  useEffect(() => {
+    document.title = t("Login");
+  }, [])
+
   return <div className={"flex items-center justify-center w-full h-full bg-base-200"} id={"login-page"}>
     <div className={"w-96 card card-border bg-base-100 border-base-300"}>
       <form onSubmit={onSubmit}>
diff --git a/frontend/src/pages/manage_page.tsx b/frontend/src/pages/manage_page.tsx
index 1bbc342..5c4820f 100644
--- a/frontend/src/pages/manage_page.tsx
+++ b/frontend/src/pages/manage_page.tsx
@@ -1,5 +1,5 @@
-import {MdMenu, MdOutlineBadge, MdOutlinePerson, MdOutlineStorage} from "react-icons/md";
-import {ReactNode, useEffect, useState} from "react";
+import { MdMenu, MdOutlineBadge, MdOutlinePerson, MdOutlineStorage } from "react-icons/md";
+import { ReactNode, useEffect, useState } from "react";
 import StorageView from "./manage_storage_page.tsx";
 import UserView from "./manage_user_page.tsx";
 import { useTranslation } from "react-i18next";
@@ -24,6 +24,10 @@ export default function ManagePage() {
     };
   }, []);
 
+  useEffect(() => {
+    document.title = t("Manage");
+  }, [])
+
   const buildItem = (title: string, icon: ReactNode, p: number) => {
     return <li key={title} onClick={() => {
       setPage(p);
@@ -49,20 +53,20 @@ export default function ManagePage() {
   ]
 
   const pageComponents = [
-    <ManageMePage/>,
-    <StorageView/>,
-    <UserView/>,
-    <ManageServerConfigPage/>,
+    <ManageMePage />,
+    <StorageView />,
+    <UserView />,
+    <ManageServerConfigPage />,
   ]
 
   return <div className="drawer lg:drawer-open">
-    <input id="my-drawer-2" type="checkbox" className="drawer-toggle"/>
+    <input id="my-drawer-2" type="checkbox" className="drawer-toggle" />
     <div className="drawer-content" style={{
       height: "calc(100vh - 64px)",
     }}>
       <div className={"flex w-full h-14 items-center gap-2 px-3"}>
         <label className={"btn btn-square btn-ghost lg:hidden"} htmlFor="my-drawer-2">
-          <MdMenu size={24}/>
+          <MdMenu size={24} />
         </label>
         <h1 className={"text-xl font-bold"}>
           {pageNames[page]}
@@ -80,10 +84,10 @@ export default function ManagePage() {
         <h2 className={"text-lg font-bold p-4"}>
           {t("Manage")}
         </h2>
-        {buildItem(t("My Info"), <MdOutlineBadge className={"text-xl"}/>, 0)}
-        {buildItem(t("Storage"), <MdOutlineStorage className={"text-xl"}/>, 1)}
-        {buildItem(t("Users"), <MdOutlinePerson className={"text-xl"}/>, 2)}
-        {buildItem(t("Server"), <MdOutlineStorage className={"text-xl"}/>, 3)}
+        {buildItem(t("My Info"), <MdOutlineBadge className={"text-xl"} />, 0)}
+        {buildItem(t("Storage"), <MdOutlineStorage className={"text-xl"} />, 1)}
+        {buildItem(t("Users"), <MdOutlinePerson className={"text-xl"} />, 2)}
+        {buildItem(t("Server"), <MdOutlineStorage className={"text-xl"} />, 3)}
       </ul>
     </div>
   </div>
diff --git a/frontend/src/pages/manage_server_config_page.tsx b/frontend/src/pages/manage_server_config_page.tsx
index f5b54f5..68f6807 100644
--- a/frontend/src/pages/manage_server_config_page.tsx
+++ b/frontend/src/pages/manage_server_config_page.tsx
@@ -62,7 +62,7 @@ export default function ManageServerConfigPage() {
     setIsLoading(false);
   };
 
-  return <form className="px-4" onSubmit={handleSubmit}>
+  return <form className="px-4 pb-4" onSubmit={handleSubmit}>
     <Input type="number" value={config.max_uploading_size_in_mb.toString()} label="Max uploading size (MB)" onChange={(e) => {
       setConfig({...config, max_uploading_size_in_mb: parseInt(e.target.value) })
     }}></Input>
@@ -78,6 +78,12 @@ export default function ManageServerConfigPage() {
         setConfig({ ...config, allow_register: e.target.checked })
       }} />
     </fieldset>
+    <Input type="text" value={config.server_name} label="Server name" onChange={(e) => {
+      setConfig({...config, server_name: e.target.value })
+    }}></Input>
+    <Input type="text" value={config.server_description} label="Server description" onChange={(e) => {
+      setConfig({...config, server_description: e.target.value })
+    }}></Input>
     <Input type="text" value={config.cloudflare_turnstile_site_key} label="Cloudflare Turnstile Site Key" onChange={(e) => {
       setConfig({...config, cloudflare_turnstile_site_key: e.target.value })
     }}></Input>
diff --git a/frontend/src/pages/publish_page.tsx b/frontend/src/pages/publish_page.tsx
index c6c1c32..030f590 100644
--- a/frontend/src/pages/publish_page.tsx
+++ b/frontend/src/pages/publish_page.tsx
@@ -1,13 +1,13 @@
-import {useRef, useState} from "react";
-import {MdAdd, MdDelete, MdOutlineInfo} from "react-icons/md";
-import {Tag} from "../network/models.ts";
-import {network} from "../network/network.ts";
-import {LuInfo} from "react-icons/lu";
-import {useNavigate} from "react-router";
+import { useEffect, useRef, useState } from "react";
+import { MdAdd, MdDelete, MdOutlineInfo } from "react-icons/md";
+import { Tag } from "../network/models.ts";
+import { network } from "../network/network.ts";
+import { LuInfo } from "react-icons/lu";
+import { useNavigate } from "react-router";
 import showToast from "../components/toast.ts";
-import {useTranslation} from "react-i18next";
-import {app} from "../app.ts";
-import {ErrorAlert} from "../components/alert.tsx";
+import { useTranslation } from "react-i18next";
+import { app } from "../app.ts";
+import { ErrorAlert } from "../components/alert.tsx";
 
 export default function PublishPage() {
   const [title, setTitle] = useState<string>("")
@@ -22,6 +22,10 @@ export default function PublishPage() {
   const navigate = useNavigate()
   const { t } = useTranslation();
 
+  useEffect(() => {
+    document.title = t("Publish Resource");
+  }, [])
+
   const handleSubmit = async () => {
     if (isSubmitting) {
       return
@@ -53,7 +57,7 @@ export default function PublishPage() {
     })
     if (res.success) {
       setSubmitting(false)
-      navigate("/resources/" + res.data!, {replace: true})
+      navigate("/resources/" + res.data!, { replace: true })
     } else {
       setSubmitting(false)
       setError(res.message)
@@ -80,28 +84,28 @@ export default function PublishPage() {
         setImages([...images, res.data!])
       } else {
         setUploading(false)
-        showToast({message: t("Failed to upload image"), type: "error"})
+        showToast({ message: t("Failed to upload image"), type: "error" })
       }
     }
     input.click()
   }
 
   if (!app.user) {
-    return <ErrorAlert className={"m-4"} message={t("You are not logged in. Please log in to access this page.")}/>
+    return <ErrorAlert className={"m-4"} message={t("You are not logged in. Please log in to access this page.")} />
   }
 
   if (!app.user?.is_admin) {
-    return <ErrorAlert className={"m-4"} message={t("You are not authorized to access this page.")}/>
+    return <ErrorAlert className={"m-4"} message={t("You are not authorized to access this page.")} />
   }
 
   return <div className={"p-4"}>
     <h1 className={"text-2xl font-bold my-4"}>{t("Publish Resource")}</h1>
     <div role="alert" className="alert alert-info mb-2 alert-dash">
-      <MdOutlineInfo size={24}/>
+      <MdOutlineInfo size={24} />
       <span>{t("All information, images, and files can be modified after publishing")}</span>
     </div>
     <p className={"my-1"}>{t("Title")}</p>
-    <input type="text" className="input w-full" value={title} onChange={(e) => setTitle(e.target.value)}/>
+    <input type="text" className="input w-full" value={title} onChange={(e) => setTitle(e.target.value)} />
     <div className={"h-4"}></div>
     <p className={"my-1"}>{t("Alternative Titles")}</p>
     {
@@ -111,13 +115,13 @@ export default function PublishPage() {
             const newAltTitles = [...altTitles]
             newAltTitles[index] = e.target.value
             setAltTitles(newAltTitles)
-          }}/>
+          }} />
           <button className={"btn btn-square btn-error ml-2"} type={"button"} onClick={() => {
             const newAltTitles = [...altTitles]
             newAltTitles.splice(index, 1)
             setAltTitles(newAltTitles)
           }}>
-            <MdDelete size={24}/>
+            <MdDelete size={24} />
           </button>
         </div>
       })
@@ -125,7 +129,7 @@ export default function PublishPage() {
     <button className={"btn my-2"} type={"button"} onClick={() => {
       setAltTitles([...altTitles, ""])
     }}>
-      <MdAdd/>
+      <MdAdd />
       {t("Add Alternative Title")}
     </button>
     <div className={"h-2"}></div>
@@ -139,67 +143,67 @@ export default function PublishPage() {
     </p>
     <TagInput onAdd={(tag) => {
       setTags([...tags, tag])
-    }}/>
+    }} />
     <div className={"h-4"}></div>
     <p className={"my-1"}>{t("Description")}</p>
-    <textarea className="textarea w-full min-h-80 p-4" value={article} onChange={(e) => setArticle(e.target.value)}/>
+    <textarea className="textarea w-full min-h-80 p-4" value={article} onChange={(e) => setArticle(e.target.value)} />
     <div className={"flex items-center py-1 "}>
-      <MdOutlineInfo className={"inline mr-1"}/>
+      <MdOutlineInfo className={"inline mr-1"} />
       <span className={"text-sm"}>{t("Use Markdown format")}</span>
     </div>
     <div className={"h-4"}></div>
     <p className={"my-1"}>{t("Images")}</p>
     <div role="alert" className="alert alert-info alert-soft my-2">
-      <MdOutlineInfo size={24}/>
+      <MdOutlineInfo size={24} />
       <span>{t("Images will not be displayed automatically, you need to reference them in the description")}</span>
     </div>
     <div className={`rounded-box border border-base-content/5 bg-base-100 ${images.length === 0 ? "hidden" : ""}`}>
       <table className={"table"}>
         <thead>
-        <tr>
-          <td>{t("Preview")}</td>
-          <td>{t("Link")}</td>
-          <td>{t("Action")}</td>
-        </tr>
+          <tr>
+            <td>{t("Preview")}</td>
+            <td>{t("Link")}</td>
+            <td>{t("Action")}</td>
+          </tr>
         </thead>
         <tbody>
-        {
-          images.map((image, index) => {
-            return <tr key={index} className={"hover"}>
-              <td>
-                <img src={network.getImageUrl(image)} className={"w-16 h-16 object-cover card"} alt={"image"}/>
-              </td>
-              <td>
-                {network.getImageUrl(image)}
-              </td>
-              <td>
-                <button className={"btn btn-square"} type={"button"} onClick={() => {
-                  const id = images[index]
-                  const newImages = [...images]
-                  newImages.splice(index, 1)
-                  setImages(newImages)
-                  network.deleteImage(id)
-                }}>
-                  <MdDelete size={24}/>
-                </button>
-              </td>
-            </tr>
-          })
-        }
+          {
+            images.map((image, index) => {
+              return <tr key={index} className={"hover"}>
+                <td>
+                  <img src={network.getImageUrl(image)} className={"w-16 h-16 object-cover card"} alt={"image"} />
+                </td>
+                <td>
+                  {network.getImageUrl(image)}
+                </td>
+                <td>
+                  <button className={"btn btn-square"} type={"button"} onClick={() => {
+                    const id = images[index]
+                    const newImages = [...images]
+                    newImages.splice(index, 1)
+                    setImages(newImages)
+                    network.deleteImage(id)
+                  }}>
+                    <MdDelete size={24} />
+                  </button>
+                </td>
+              </tr>
+            })
+          }
         </tbody>
       </table>
     </div>
     <button className={"btn my-2"} type={"button"} onClick={addImage}>
-      {isUploading ? <span className="loading loading-spinner"></span> : <MdAdd/>}
+      {isUploading ? <span className="loading loading-spinner"></span> : <MdAdd />}
       {t("Upload Image")}
     </button>
     <div className={"h-4"}></div>
     {
       error && <div role="alert" className="alert alert-error my-2 shadow">
         <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 shrink-0 stroke-current" fill="none"
-             viewBox="0 0 24 24">
+          viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
         </svg>
         <span>{t("Error")}: {error}</span>
       </div>
@@ -213,7 +217,7 @@ export default function PublishPage() {
   </div>
 }
 
-function TagInput({onAdd}: { onAdd: (tag: Tag) => void }) {
+function TagInput({ onAdd }: { onAdd: (tag: Tag) => void }) {
   const [keyword, setKeyword] = useState<string>("")
   const [tags, setTags] = useState<Tag[]>([])
   const [error, setError] = useState<string | null>(null)
@@ -221,7 +225,7 @@ function TagInput({onAdd}: { onAdd: (tag: Tag) => void }) {
 
   const debounce = useRef(new Debounce(500))
 
-  const {t} = useTranslation();
+  const { t } = useTranslation();
 
   const searchTags = async (keyword: string) => {
     if (keyword.length === 0) {
@@ -273,22 +277,22 @@ function TagInput({onAdd}: { onAdd: (tag: Tag) => void }) {
   if (error) {
     dropdownContent = <div className="alert alert-error my-2">
       <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 shrink-0 stroke-current" fill="none"
-           viewBox="0 0 24 24">
+        viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-              d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
       </svg>
       <span>{error}</span>
     </div>
   } else if (!keyword) {
     dropdownContent = <div className="flex flex-row py-2 px-4">
-      <LuInfo size={20}/>
-      <span className={"w-2"}/>
+      <LuInfo size={20} />
+      <span className={"w-2"} />
       <span className={"flex-1"}>{t("Please enter a search keyword")}</span>
     </div>
-  } else if(isLoading) {
+  } else if (isLoading) {
     dropdownContent = <div className="flex flex-row py-2 px-4">
       <span className={"loading loading-spinner loading-sm"}></span>
-      <span className={"w-2"}/>
+      <span className={"w-2"} />
       <span className={"flex-1"}>{t("Searching...")}</span>
     </div>
   } else {
@@ -310,7 +314,7 @@ function TagInput({onAdd}: { onAdd: (tag: Tag) => void }) {
           handleCreateTag(keyword)
         }}><a>{t("Create Tag")}: {keyword}</a></li>
       }
-      </>
+    </>
   }
 
   return <div className={"dropdown dropdown-end"}>
@@ -327,7 +331,7 @@ function TagInput({onAdd}: { onAdd: (tag: Tag) => void }) {
           <path d="m21 21-4.3-4.3"></path>
         </g>
       </svg>
-      <input autoComplete={"off"} id={"search_tags_input"} tabIndex={0} type="text" className="grow" placeholder={t("Search Tags")} value={keyword} onChange={(e) => handleChange(e.target.value)}/>
+      <input autoComplete={"off"} id={"search_tags_input"} tabIndex={0} type="text" className="grow" placeholder={t("Search Tags")} value={keyword} onChange={(e) => handleChange(e.target.value)} />
     </label>
     <ul tabIndex={0} className="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow mt-2 border border-base-300">
       {dropdownContent}
diff --git a/frontend/src/pages/register_page.tsx b/frontend/src/pages/register_page.tsx
index 32dd239..a509ecd 100644
--- a/frontend/src/pages/register_page.tsx
+++ b/frontend/src/pages/register_page.tsx
@@ -1,4 +1,4 @@
-import {FormEvent, useState} from "react";
+import {FormEvent, useEffect, useState} from "react";
 import {network} from "../network/network.ts";
 import {app} from "../app.ts";
 import {useNavigate} from "react-router";
@@ -37,6 +37,10 @@ export default function RegisterPage() {
     }
   };
 
+    useEffect(() => {
+      document.title = t("Register");
+    }, [])
+
   return <div className={"flex items-center justify-center w-full h-full bg-base-200"} id={"register-page"}>
     <div className={"w-96 card card-border bg-base-100 border-base-300"}>
       <form onSubmit={onSubmit}>
diff --git a/frontend/src/pages/resource_details_page.tsx b/frontend/src/pages/resource_details_page.tsx
index 657f7b0..8356521 100644
--- a/frontend/src/pages/resource_details_page.tsx
+++ b/frontend/src/pages/resource_details_page.tsx
@@ -1,21 +1,21 @@
-import {useNavigate, useParams} from "react-router";
-import {createContext, useCallback, useContext, useEffect, useRef, useState} from "react";
-import {ResourceDetails, RFile, Storage, Comment} from "../network/models.ts";
-import {network} from "../network/network.ts";
+import { useNavigate, useParams } from "react-router";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { ResourceDetails, RFile, Storage, Comment } from "../network/models.ts";
+import { network } from "../network/network.ts";
 import showToast from "../components/toast.ts";
 import Markdown from "react-markdown";
 import "../markdown.css";
 import Loading from "../components/loading.tsx";
-import {MdAdd, MdOutlineArticle, MdOutlineComment, MdOutlineDataset, MdOutlineDownload} from "react-icons/md";
-import {app} from "../app.ts";
-import {uploadingManager} from "../network/uploading.ts";
-import {ErrorAlert} from "../components/alert.tsx";
-import {useTranslation} from "react-i18next";
+import { MdAdd, MdOutlineArticle, MdOutlineComment, MdOutlineDataset, MdOutlineDownload } from "react-icons/md";
+import { app } from "../app.ts";
+import { uploadingManager } from "../network/uploading.ts";
+import { ErrorAlert } from "../components/alert.tsx";
+import { useTranslation } from "react-i18next";
 import Pagination from "../components/pagination.tsx";
 
 export default function ResourcePage() {
   const params = useParams()
-  const {t} = useTranslation();
+  const { t } = useTranslation();
 
   const idStr = params.id
 
@@ -32,18 +32,23 @@ export default function ResourcePage() {
       if (res.success) {
         setResource(res.data!)
       } else {
-        showToast({message: res.message, type: "error"})
+        showToast({ message: res.message, type: "error" })
       }
     }
   }, [id])
 
+  useEffect(() => {
+    document.title = t("Resource Details");
+  }, [])
+
   useEffect(() => {
     if (!isNaN(id)) {
       network.getResourceDetails(id).then((res) => {
         if (res.success) {
           setResource(res.data!)
+          document.title = res.data!.title
         } else {
-          showToast({message: res.message, type: "error"})
+          showToast({ message: res.message, type: "error" })
         }
       })
     }
@@ -60,7 +65,7 @@ export default function ResourcePage() {
   }
 
   if (!resource) {
-    return <Loading/>
+    return <Loading />
   }
 
   return <context.Provider value={reload}>
@@ -79,7 +84,7 @@ export default function ResourcePage() {
         <div className="flex items-center ">
           <div className="avatar">
             <div className="w-6 rounded-full">
-              <img src={network.getUserAvatar(resource.author)} alt={"avatar"}/>
+              <img src={network.getUserAvatar(resource.author)} alt={"avatar"} />
             </div>
           </div>
           <div className="w-2"></div>
@@ -99,40 +104,40 @@ export default function ResourcePage() {
         <label className="tab transition-all">
           <input type="radio" name="my_tabs" checked={page === 0} onChange={() => {
             setPage(0)
-          }}/>
-          <MdOutlineArticle className="text-xl mr-2"/>
+          }} />
+          <MdOutlineArticle className="text-xl mr-2" />
           <span className="text-sm">
-          {t("Description")}
-        </span>
+            {t("Description")}
+          </span>
         </label>
         <div key={"article"} className="tab-content p-2">
-          <Article article={resource.article}/>
+          <Article article={resource.article} />
         </div>
 
         <label className="tab transition-all">
           <input type="radio" name="my_tabs" checked={page === 1} onChange={() => {
             setPage(1)
-          }}/>
-          <MdOutlineDataset className="text-xl mr-2"/>
+          }} />
+          <MdOutlineDataset className="text-xl mr-2" />
           <span className="text-sm">
-          {t("Files")}
-        </span>
+            {t("Files")}
+          </span>
         </label>
         <div key={"files"} className="tab-content p-2">
-          <Files files={resource.files} resourceID={resource.id}/>
+          <Files files={resource.files} resourceID={resource.id} />
         </div>
 
         <label className="tab transition-all">
           <input type="radio" name="my_tabs" checked={page === 2} onChange={() => {
             setPage(2)
-          }}/>
-          <MdOutlineComment className="text-xl mr-2"/>
+          }} />
+          <MdOutlineComment className="text-xl mr-2" />
           <span className="text-sm">
-          {t("Comments")}
-        </span>
+            {t("Comments")}
+          </span>
         </label>
         <div key={"comments"} className="tab-content p-2">
-          <Comments resourceId={resource.id}/>
+          <Comments resourceId={resource.id} />
         </div>
       </div>
       <div className="h-4"></div>
@@ -143,13 +148,13 @@ export default function ResourcePage() {
 const context = createContext<() => void>(() => {
 })
 
-function Article({article}: { article: string }) {
+function Article({ article }: { article: string }) {
   return <article>
     <Markdown>{article}</Markdown>
   </article>
 }
 
-function FileTile({file}: { file: RFile }) {
+function FileTile({ file }: { file: RFile }) {
   return <div className={"card card-border border-base-300 my-2"}>
     <div className={"p-4 flex flex-row items-center"}>
       <div className={"grow"}>
@@ -161,14 +166,14 @@ function FileTile({file}: { file: RFile }) {
           const link = network.getFileDownloadLink(file.id);
           window.open(link, "_blank");
         }}>
-          <MdOutlineDownload size={24}/>
+          <MdOutlineDownload size={24} />
         </button>
       </div>
     </div>
   </div>
 }
 
-function Files({files, resourceID}: { files: RFile[], resourceID: number }) {
+function Files({ files, resourceID }: { files: RFile[], resourceID: number }) {
   return <div>
     {
       files.map((file) => {
@@ -189,8 +194,8 @@ enum FileType {
   upload = "upload",
 }
 
-function CreateFileDialog({resourceId}: { resourceId: number }) {
-  const {t} = useTranslation();
+function CreateFileDialog({ resourceId }: { resourceId: number }) {
+  const { t } = useTranslation();
   const [isLoading, setLoading] = useState(false)
   const storages = useRef<Storage[] | null>(null)
   const mounted = useRef(true)
@@ -236,7 +241,7 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
         setSubmitting(false)
         const dialog = document.getElementById("upload_dialog") as HTMLDialogElement
         dialog.close()
-        showToast({message: t("File created successfully"), type: "success"})
+        showToast({ message: t("File created successfully"), type: "success" })
         reload()
       } else {
         setError(res.message)
@@ -257,7 +262,7 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
         setSubmitting(false)
         const dialog = document.getElementById("upload_dialog") as HTMLDialogElement
         dialog.close()
-        showToast({message: t("Successfully create uploading task."), type: "success"})
+        showToast({ message: t("Successfully create uploading task."), type: "success" })
       } else {
         setError(res.message)
         setSubmitting(false)
@@ -277,7 +282,7 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
             return;
           }
           if (!res.success) {
-            showToast({message: res.message, type: "error"})
+            showToast({ message: res.message, type: "error" })
           } else {
             storages.current = res.data!
             setLoading(false)
@@ -291,7 +296,7 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
       dialog.showModal()
     }}>
       {
-        isLoading ? <span className={"loading loading-spinner loading-sm"}></span> : <MdAdd size={24}/>
+        isLoading ? <span className={"loading loading-spinner loading-sm"}></span> : <MdAdd size={24} />
       }
       <span className={"text-sm"}>
         {t("Upload")}
@@ -305,13 +310,13 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
         <form className="filter mb-2">
           <input className="btn btn-square" type="reset" value="×" onClick={() => {
             setFileType(null);
-          }}/>
+          }} />
           <input className="btn text-sm" type="radio" name="type" aria-label={t("Redirect")} onInput={() => {
             setFileType(FileType.redirect);
-          }}/>
+          }} />
           <input className="btn text-sm" type="radio" name="type" aria-label={t("Upload")} onInput={() => {
             setFileType(FileType.upload);
-          }}/>
+          }} />
         </form>
 
         {
@@ -319,13 +324,13 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
             <p className={"text-sm p-2"}>{t("User who click the file will be redirected to the URL")}</p>
             <input type="text" className="input w-full my-2" placeholder={t("File Name")} onChange={(e) => {
               setFilename(e.target.value)
-            }}/>
+            }} />
             <input type="text" className="input w-full my-2" placeholder={t("URL")} onChange={(e) => {
               setRedirectUrl(e.target.value)
-            }}/>
+            }} />
             <input type="text" className="input w-full my-2" placeholder={t("Description")} onChange={(e) => {
               setDescription(e.target.value)
-            }}/>
+            }} />
           </>
         }
 
@@ -348,25 +353,25 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
               {
                 storages.current?.map((s) => {
                   return <option key={s.id}
-                                 value={s.id}>{s.name}({(s.currentSize / 1024 / 1024).toFixed(2)}/{s.maxSize / 1024 / 1024}MB)</option>
+                    value={s.id}>{s.name}({(s.currentSize / 1024 / 1024).toFixed(2)}/{s.maxSize / 1024 / 1024}MB)</option>
                 })
               }
             </select>
 
             <input
               type="file" className="file-input w-full my-2" onChange={(e) => {
-              if (e.target.files) {
-                setFile(e.target.files[0])
-              }
-            }}/>
+                if (e.target.files) {
+                  setFile(e.target.files[0])
+                }
+              }} />
 
             <input type="text" className="input w-full my-2" placeholder={t("Description")} onChange={(e) => {
               setDescription(e.target.value)
-            }}/>
+            }} />
           </>
         }
 
-        {error && <ErrorAlert className={"my-2"} message={error}/>}
+        {error && <ErrorAlert className={"my-2"} message={error} />}
 
         <div className="modal-action">
           <form method="dialog">
@@ -382,7 +387,7 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
   </>
 }
 
-function Comments({resourceId}: { resourceId: number }) {
+function Comments({ resourceId }: { resourceId: number }) {
   const [page, setPage] = useState(1);
 
   const [maxPage, setMaxPage] = useState(0);
@@ -404,17 +409,17 @@ function Comments({resourceId}: { resourceId: number }) {
       return;
     }
     if (commentContent === "") {
-      showToast({message: "Comment content cannot be empty", type: "error"});
+      showToast({ message: "Comment content cannot be empty", type: "error" });
       return;
     }
     setLoading(true);
     const res = await network.createComment(resourceId, commentContent);
     if (res.success) {
       setCommentContent("");
-      showToast({message: "Comment created successfully", type: "success"});
+      showToast({ message: "Comment created successfully", type: "success" });
       reload();
     } else {
-      showToast({message: res.message, type: "error"});
+      showToast({ message: res.message, type: "error" });
     }
     setLoading(false);
   }
@@ -422,23 +427,23 @@ function Comments({resourceId}: { resourceId: number }) {
   return <div>
     <div className={"mt-4 mb-6 textarea w-full p-4 h-28 flex flex-col"}>
       <textarea placeholder={"Write down your comment"} className={"w-full resize-none grow"} value={commentContent}
-                onChange={(e) => setCommentContent(e.target.value)}/>
+        onChange={(e) => setCommentContent(e.target.value)} />
       <div className={"flex flex-row-reverse"}>
         <button onClick={sendComment}
-                className={`btn btn-primary h-8 text-sm mx-2 ${commentContent === "" && "btn-disabled"}`}>
+          className={`btn btn-primary h-8 text-sm mx-2 ${commentContent === "" && "btn-disabled"}`}>
           {isLoading ? <span className={"loading loading-spinner loading-sm"}></span> : null}
           Submit
         </button>
       </div>
     </div>
-    <CommentsList resourceId={resourceId} page={page} maxPageCallback={setMaxPage} key={listKey}/>
+    <CommentsList resourceId={resourceId} page={page} maxPageCallback={setMaxPage} key={listKey} />
     {maxPage && <div className={"w-full flex justify-center"}>
-      <Pagination page={page} setPage={setPage} totalPages={maxPage}/>
+      <Pagination page={page} setPage={setPage} totalPages={maxPage} />
     </div>}
   </div>
 }
 
-function CommentsList({resourceId, page, maxPageCallback}: {
+function CommentsList({ resourceId, page, maxPageCallback }: {
   resourceId: number,
   page: number,
   maxPageCallback: (maxPage: number) => void
@@ -461,25 +466,25 @@ function CommentsList({resourceId, page, maxPageCallback}: {
 
   if (comments == null) {
     return <div className={"w-full"}>
-      <Loading/>
+      <Loading />
     </div>
   }
 
   return <>
     {
       comments.map((comment) => {
-        return <CommentTile comment={comment} key={comment.id}/>
+        return <CommentTile comment={comment} key={comment.id} />
       })
     }
   </>
 }
 
-function CommentTile({comment}: { comment: Comment }) {
+function CommentTile({ comment }: { comment: Comment }) {
   return <div className={"card card-border border-base-300 p-2 my-3"}>
     <div className={"flex flex-row items-center my-1 mx-1"}>
       <div className="avatar">
         <div className="w-8 rounded-full">
-          <img src={network.getUserAvatar(comment.user)} alt={"avatar"}/>
+          <img src={network.getUserAvatar(comment.user)} alt={"avatar"} />
         </div>
       </div>
       <div className={"w-2"}></div>
diff --git a/frontend/src/pages/search_page.tsx b/frontend/src/pages/search_page.tsx
index 894cb2a..20affa8 100644
--- a/frontend/src/pages/search_page.tsx
+++ b/frontend/src/pages/search_page.tsx
@@ -10,7 +10,9 @@ export default function SearchPage() {
 
   const keyword = params.get("keyword")
 
-  useEffect(() => {}, [])
+  useEffect(() => {
+    document.title = t("Search") + ": " + (keyword || "");
+  }, [])
 
   if (keyword === null || keyword === "") {
     return <div role="alert" className="alert alert-info alert-dash">
diff --git a/frontend/src/pages/tagged_resources_page.tsx b/frontend/src/pages/tagged_resources_page.tsx
index 3510b1a..e1dd2c8 100644
--- a/frontend/src/pages/tagged_resources_page.tsx
+++ b/frontend/src/pages/tagged_resources_page.tsx
@@ -1,17 +1,25 @@
-import {useParams} from "react-router";
-import {ErrorAlert} from "../components/alert.tsx";
+import { useParams } from "react-router";
+import { ErrorAlert } from "../components/alert.tsx";
 import ResourcesView from "../components/resources_view.tsx";
-import {network} from "../network/network.ts";
+import { network } from "../network/network.ts";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 
 export default function TaggedResourcesPage() {
-  const {tag} = useParams()
+  const { tag } = useParams()
+
+  const { t } = useTranslation();
 
   if (!tag) {
     return <div>
-      <ErrorAlert message={"Tag not found"}/>
+      <ErrorAlert message={"Tag not found"} />
     </div>
   }
 
+  useEffect(() => {
+    document.title = t("Tag: " + tag);
+  }, [tag])
+
   return <div>
     <h1 className={"text-2xl pt-6 pb-2 px-4 font-bold"}>
       Tag: {tag}
diff --git a/frontend/src/pages/user_page.tsx b/frontend/src/pages/user_page.tsx
index 4e87dce..23eb5f5 100644
--- a/frontend/src/pages/user_page.tsx
+++ b/frontend/src/pages/user_page.tsx
@@ -28,6 +28,10 @@ export default function UserPage() {
     });
   }, [username]);
 
+  useEffect(() => {
+    document.title = username || "User";
+  }, [username]);
+
   if (!user) {
     return <div className="w-full">
       <Loading />
diff --git a/go.mod b/go.mod
index f04bcf4..d149ee6 100644
--- a/go.mod
+++ b/go.mod
@@ -28,9 +28,11 @@ require (
 	github.com/fxamacker/cbor/v2 v2.8.0 // indirect
 	github.com/gofiber/schema v1.3.0 // indirect
 	github.com/gofiber/utils/v2 v2.0.0-beta.8 // indirect
+	github.com/gomarkdown/markdown v0.0.0-20250311123330-531bef5e742b
 	github.com/google/uuid v1.6.0
 	github.com/jinzhu/inflection v1.0.0 // indirect
 	github.com/jinzhu/now v1.1.5 // indirect
+	github.com/k3a/html2text v1.2.1
 	github.com/klauspost/compress v1.18.0 // indirect
 	github.com/mattn/go-colorable v0.1.14 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
diff --git a/go.sum b/go.sum
index 6d6bc44..9d05595 100644
--- a/go.sum
+++ b/go.sum
@@ -20,12 +20,18 @@ github.com/gofiber/utils/v2 v2.0.0-beta.8 h1:ZifwbHZqZO3YJsx1ZhDsWnPjaQ7C0YD20LH
 github.com/gofiber/utils/v2 v2.0.0-beta.8/go.mod h1:1lCBo9vEF4RFEtTgWntipnaScJZQiM8rrsYycLZ4n9c=
 github.com/golang-jwt/jwt/v5 v5.2.2 h1:Rl4B7itRWVtYIHFrSNd7vhTiz9UpLdi6gZhZ3wEeDy8=
 github.com/golang-jwt/jwt/v5 v5.2.2/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
+github.com/gomarkdown/markdown v0.0.0-20250311123330-531bef5e742b h1:EY/KpStFl60qA17CptGXhwfZ+k1sFNJIUNR8DdbcuUk=
+github.com/gomarkdown/markdown v0.0.0-20250311123330-531bef5e742b/go.mod h1:JDGcbDT52eL4fju3sZ4TeHGsQwhG9nbDV21aMyhwPoA=
 github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
 github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/gopherjs/gopherjs v0.0.0-20181017120253-0766667cb4d1/go.mod h1:wJfORRmW1u3UXTncJ5qlYoELFm8eSnnEO6hX4iZ3EWY=
 github.com/jinzhu/inflection v1.0.0 h1:K317FqzuhWc8YvSVlFMCCUb36O/S9MCKRDI7QkRKD/E=
 github.com/jinzhu/inflection v1.0.0/go.mod h1:h+uFLlag+Qp1Va5pdKtLDYj+kHp5pxUVkryuEj+Srlc=
 github.com/jinzhu/now v1.1.5 h1:/o9tlHleP7gOFmsnYNz3RGnqzefHA47wQpKrrdTIwXQ=
 github.com/jinzhu/now v1.1.5/go.mod h1:d3SSVoowX0Lcu0IBviAWJpolVfI5UJVZZ7cO71lE/z8=
+github.com/jtolds/gls v4.20.0+incompatible/go.mod h1:QJZ7F/aHp+rZTRtaJ1ow/lLfFfVYBRgL+9YlvaHOwJU=
+github.com/k3a/html2text v1.2.1 h1:nvnKgBvBR/myqrwfLuiqecUtaK1lB9hGziIJKatNFVY=
+github.com/k3a/html2text v1.2.1/go.mod h1:ieEXykM67iT8lTvEWBh6fhpH4B23kB9OMKPdIBmgUqA=
 github.com/klauspost/compress v1.18.0 h1:c/Cqfb0r+Yi+JtIEq73FWXVkRonBlf0CRNYc8Zttxdo=
 github.com/klauspost/compress v1.18.0/go.mod h1:2Pp+KzxcywXVXMr50+X0Q/Lsb43OQHYWRCY2AiWywWQ=
 github.com/klauspost/cpuid/v2 v2.0.1/go.mod h1:FInQzS24/EEf25PyTYn52gqo7WaD8xa0213Md/qVLRg=
@@ -49,6 +55,8 @@ github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZb
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/rs/xid v1.6.0 h1:fV591PaemRlL6JfRxGDEPl69wICngIQ3shQtzfy2gxU=
 github.com/rs/xid v1.6.0/go.mod h1:7XoLgs4eV+QndskICGsho+ADou8ySMSjJKDIan90Nz0=
+github.com/smartystreets/assertions v0.0.0-20180927180507-b2de0cb4f26d/go.mod h1:OnSkiWE9lh6wB0YB77sQom3nweQdgAjqCqsofrRNTgc=
+github.com/smartystreets/goconvey v1.6.4/go.mod h1:syvi0/a8iFYH4r/RixwvyeAJjdLS9QV7WQ/tjFTllLA=
 github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
 github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
 github.com/tinylib/msgp v1.2.5 h1:WeQg1whrXRFiZusidTQqzETkRpGjFjcIhW6uqWH09po=
@@ -61,17 +69,22 @@ github.com/x448/float16 v0.8.4 h1:qLwI1I70+NjRFUR3zs1JPUCgaCXSh3SW62uAKT1mSBM=
 github.com/x448/float16 v0.8.4/go.mod h1:14CWIYCyZA/cWjXOioeEpHeN/83MdbZDRQHoFcYsOfg=
 github.com/xyproto/randomstring v1.0.5 h1:YtlWPoRdgMu3NZtP45drfy1GKoojuR7hmRcnhZqKjWU=
 github.com/xyproto/randomstring v1.0.5/go.mod h1:rgmS5DeNXLivK7YprL0pY+lTuhNQW3iGxZ18UQApw/E=
+golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.37.0 h1:kJNSjF/Xp7kU0iB2Z+9viTPMW4EqqsrywMXLJOOsXSE=
 golang.org/x/crypto v0.37.0/go.mod h1:vg+k43peMZ0pUMhYmVAWysMK35e6ioLh3wB8ZCAfbVc=
 golang.org/x/image v0.27.0 h1:C8gA4oWU/tKkdCfYT6T2u4faJu3MeNS5O8UPWlPF61w=
 golang.org/x/image v0.27.0/go.mod h1:xbdrClrAUway1MUTEZDq9mz/UpRwYAkFFNUslZtcB+g=
+golang.org/x/net v0.0.0-20190311183353-d8887717615a/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
 golang.org/x/net v0.39.0 h1:ZCu7HMWDxpXpaiKdhzIfaltL9Lp31x/3fCP11bc6/fY=
 golang.org/x/net v0.39.0/go.mod h1:X7NRbYVEA+ewNkCNyJ513WmMdQ3BineSwVtN2zD/d+E=
+golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.32.0 h1:s77OFDvIQeibCmezSnk/q6iAfkdiQaJi4VzroCFrN20=
 golang.org/x/sys v0.32.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
+golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.25.0 h1:qVyWApTSYLk/drJRO5mDlNYskwQznZmkpV2c8q9zls4=
 golang.org/x/text v0.25.0/go.mod h1:WEdwpYrmk1qmdHvhkSTNPm3app7v4rsT8F2UD6+VHIA=
+golang.org/x/tools v0.0.0-20190328211700-ab21143f2384/go.mod h1:LCzVGOaR6xXOjkQ3onu1FJEFr0SW1gC7cKk1uF8kGRs=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gorm.io/driver/sqlite v1.5.7 h1:8NvsrhP0ifM7LX9G4zPB97NwovUakUxc+2V2uuf3Z1I=
diff --git a/main.go b/main.go
index 6859ef2..6ce29df 100644
--- a/main.go
+++ b/main.go
@@ -28,6 +28,8 @@ func main() {
 
 	app.Use(middleware.JwtMiddleware)
 
+	app.Use(middleware.FrontendMiddleware)
+
 	if debugMode {
 		app.Use(cors.New(cors.ConfigDefault))
 	}
diff --git a/server/config/config.go b/server/config/config.go
index 88110be..1852657 100644
--- a/server/config/config.go
+++ b/server/config/config.go
@@ -22,6 +22,10 @@ type ServerConfig struct {
 	CloudflareTurnstileSiteKey string `json:"cloudflare_turnstile_site_key"`
 	// CloudflareTurnstileSecretKey is the secret key for Cloudflare Turnstile.
 	CloudflareTurnstileSecretKey string `json:"cloudflare_turnstile_secret_key"`
+
+	ServerName string `json:"server_name"`
+
+	ServerDescription string `json:"server_description"`
 }
 
 func init() {
@@ -34,6 +38,8 @@ func init() {
 			AllowRegister:                 true,
 			CloudflareTurnstileSiteKey:    "",
 			CloudflareTurnstileSecretKey:  "",
+			ServerName:                    "Nysoure",
+			ServerDescription:             "Nysoure is a file sharing service.",
 		}
 	} else {
 		data, err := os.ReadFile(filepath)
@@ -78,3 +84,15 @@ func AllowRegister() bool {
 func MaxDownloadsPerDayForSingleIP() int {
 	return config.MaxDownloadsPerDayForSingleIP
 }
+
+func CloudflareTurnstileSiteKey() string {
+	return config.CloudflareTurnstileSiteKey
+}
+
+func ServerName() string {
+	return config.ServerName
+}
+
+func ServerDescription() string {
+	return config.ServerDescription
+}
diff --git a/server/middleware/frontend_middleware.go b/server/middleware/frontend_middleware.go
new file mode 100644
index 0000000..ecf7d11
--- /dev/null
+++ b/server/middleware/frontend_middleware.go
@@ -0,0 +1,106 @@
+package middleware
+
+import (
+	"fmt"
+	"nysoure/server/config"
+	"nysoure/server/service"
+	"os"
+	"strconv"
+	"strings"
+
+	"github.com/gofiber/fiber/v3"
+	"github.com/gomarkdown/markdown"
+	"github.com/gomarkdown/markdown/html"
+	"github.com/gomarkdown/markdown/parser"
+	"github.com/k3a/html2text"
+)
+
+func FrontendMiddleware(c fiber.Ctx) error {
+	if strings.HasPrefix(c.Path(), "/api") {
+		return c.Next()
+	}
+
+	path := c.Path()
+	file := "static" + path
+
+	if _, err := os.Stat(file); path == "/" || os.IsNotExist(err) {
+		return serveIndexHtml(c)
+	} else {
+		return c.SendFile(file)
+	}
+}
+
+func serveIndexHtml(c fiber.Ctx) error {
+	data, err := os.ReadFile("static/index.html")
+	if err != nil {
+		return c.Status(fiber.StatusInternalServerError).SendString("Internal Server Error")
+	}
+	content := string(data)
+
+	siteName := config.ServerName()
+	description := config.ServerDescription()
+	preview := "/icon-192.png"
+	title := siteName
+	url := c.OriginalURL()
+	cfTurnstileSiteKey := config.CloudflareTurnstileSiteKey()
+
+	if strings.HasPrefix(url, "/resources/") {
+		idStr := strings.TrimPrefix(url, "/resources/")
+		id, err := strconv.Atoi(idStr)
+		if err == nil {
+			r, err := service.GetResource(uint(id))
+			if err == nil {
+				if len(r.Images) > 0 {
+					preview = fmt.Sprintf("/images/%d", r.Images[0].ID)
+				}
+				title = r.Title
+				description = getResourceDescription(r.Article)
+			}
+		}
+	} else if strings.HasPrefix(url, "/user/") {
+		username := strings.TrimPrefix(url, "/user/")
+		u, err := service.GetUserByUsername(username)
+		if err == nil {
+			preview = fmt.Sprintf("/avatar/%d", u.ID)
+			title = u.Username
+			description = "User " + u.Username + "'s profile"
+		}
+	}
+
+	content = strings.ReplaceAll(content, "{{SiteName}}", siteName)
+	content = strings.ReplaceAll(content, "{{Description}}", description)
+	content = strings.ReplaceAll(content, "{{Preview}}", preview)
+	content = strings.ReplaceAll(content, "{{Title}}", title)
+	content = strings.ReplaceAll(content, "{{Url}}", url)
+	content = strings.ReplaceAll(content, "{{CFTurnstileSiteKey}}", cfTurnstileSiteKey)
+
+	c.Set("Content-Type", "text/html; charset=utf-8")
+	return c.SendString(content)
+}
+
+func getResourceDescription(article string) string {
+	htmlContent := mdToHTML([]byte(article))
+	plain := html2text.HTML2Text(string(htmlContent))
+	if len([]rune(plain)) > 100 {
+		plain = string([]rune(plain)[:100])
+	}
+	plain = strings.ReplaceAll(plain, "\n", " ")
+	plain = strings.ReplaceAll(plain, "\r", "")
+	plain = strings.ReplaceAll(plain, "\t", "")
+	plain = strings.TrimSpace(plain)
+	return plain
+}
+
+func mdToHTML(md []byte) []byte {
+	// create Markdown parser with extensions
+	extensions := parser.CommonExtensions | parser.NoEmptyLineBeforeBlock | parser.MathJax
+	p := parser.NewWithExtensions(extensions)
+	doc := p.Parse(md)
+
+	// create HTML renderer with extensions
+	htmlFlags := html.CommonFlags | html.HrefTargetBlank
+	opts := html.RendererOptions{Flags: htmlFlags}
+	renderer := html.NewRenderer(opts)
+
+	return markdown.Render(doc, renderer)
+}
