diff --git a/src/handbook/src/css/pages/HomePage.scss b/src/handbook/src/css/pages/HomePage.scss
index ee2afacdc..79b21f1e1 100644
--- a/src/handbook/src/css/pages/HomePage.scss
+++ b/src/handbook/src/css/pages/HomePage.scss
@@ -86,8 +86,14 @@
 }
 
 .HomePage_Discord {
+    display: flex;
+    flex-direction: row;
+    border-radius: 10px;
+
     max-height: 40px;
     max-width: 150px;
+    height: 100%;
+    width: 100%;
 
     gap: 8px;
     align-self: center;
@@ -98,13 +104,27 @@
         height: 100%;
         max-width: 44px;
         max-height: 30px;
+
+        fill: #5865F2;
     }
 
     p {
         font-size: 16px;
+        max-width: 90px;
     }
 }
 
+.HomePage_Discord:hover {
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+
+    max-height: 50px;
+    max-width: 160px;
+
+    background-color: #5865F2;
+}
+
 .HomePage_Text {
     display: flex;
     flex-direction: column;
diff --git a/src/handbook/src/ui/pages/HomePage.tsx b/src/handbook/src/ui/pages/HomePage.tsx
index d25bfe4d6..13b13b7b7 100644
--- a/src/handbook/src/ui/pages/HomePage.tsx
+++ b/src/handbook/src/ui/pages/HomePage.tsx
@@ -4,6 +4,8 @@ import HomeButton from "@widgets/HomeButton";
 
 import { ReactComponent as DiscordLogo } from "@icons/discord.svg";
 
+import { openUrl } from "@app/utils";
+
 import "@css/pages/HomePage.scss";
 
 class HomePage extends React.Component<any, any> {
@@ -39,7 +41,10 @@ class HomePage extends React.Component<any, any> {
                             <p>trademarks and copyrights of HoYoverse.</p>
                         </div>
 
-                        <div className={"HomePage_Discord"}>
+                        <div
+                            className={"HomePage_Discord"}
+                            onClick={() => openUrl("https://discord.gg/grasscutter")}
+                        >
                             <DiscordLogo />
                             <p>Join the Community!</p>
                         </div>
diff --git a/src/handbook/src/utils.ts b/src/handbook/src/utils.ts
index 39e2ca9cd..513ee9066 100644
--- a/src/handbook/src/utils.ts
+++ b/src/handbook/src/utils.ts
@@ -144,3 +144,13 @@ export async function fetchEntityData(entity: Entity): Promise<EntityInfo> {
 export async function copyToClipboard(text: string): Promise<void> {
     await navigator.clipboard.writeText(text);
 }
+
+/**
+ * Opens a URL in a new tab.
+ * Uses the window.open() method.
+ *
+ * @param url The URL to open.
+ */
+export function openUrl(url: string): void {
+    window.open(url, "_blank");
+}