@@ -204,3 +204,29 @@ font-size: 14px;
   line-height: 1.286;
   font-weight: 400;
 }
+
+/* About page */
+.moonbase-wordmark {
+  width: 100%;
+}
+
+.moonbase-devs {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  gap: 0rem 0.5rem;
+  padding-top: 0.5rem;
+}
+
+.moonbase-dev-avatar {
+  width: 2rem;
+  border-radius: 50%;
+}
+
+.moonbase-gap {
+  gap: 0.5rem;
+}
+
+.moonbase-about-text {
+  padding-top: 0.5rem;
+}

@@ -0,0 +1,125 @@
+import * as Components from "@moonlight-mod/wp/discord/components/common/index";
+import Flex from "@moonlight-mod/wp/discord/uikit/Flex";
+import React from "@moonlight-mod/wp/react";
+import MarkupUtils from "@moonlight-mod/wp/discord/modules/markup/MarkupUtils";
+import IntegrationCard from "@moonlight-mod/wp/discord/modules/guild_settings/IntegrationCard.css";
+import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
+
+const { Card, Text, useThemeContext, Button, AngleBracketsIcon, BookCheckIcon, ClydeIcon } = Components;
+
+const wordmark = "https://raw.githubusercontent.com/moonlight-mod/moonlight/refs/heads/main/img/wordmark.png";
+const wordmarkLight =
+  "https://raw.githubusercontent.com/moonlight-mod/moonlight/refs/heads/main/img/wordmark-light.png";
+
+function parse(str: string) {
+  return MarkupUtils.parse(str, true, {
+    allowHeading: true,
+    allowLinks: true,
+    allowList: true
+  });
+}
+
+function Dev({ name, picture, link }: { name: string; picture: string; link: string }) {
+  return (
+    <Card editable={true} className={IntegrationCard.card}>
+      <div className={IntegrationCard.cardHeader + " moonbase-dev"}>
+        <Flex direction={Flex.Direction.HORIZONTAL} align={Flex.Align.CENTER}>
+          <img src={picture} alt={name} className="moonbase-dev-avatar" />
+
+          <Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.CENTER}>
+            <a href={link} rel="noreferrer noopener" target="_blank" tabIndex={-1}>
+              <Text variant="text-md/semibold">{name}</Text>
+            </a>
+          </Flex>
+        </Flex>
+      </div>
+    </Card>
+  );
+}
+
+function IconButton({
+  text,
+  link,
+  icon,
+  openInClient
+}: {
+  text: string;
+  link: string;
+  icon: React.FC<any>;
+  openInClient?: boolean;
+}) {
+  return (
+    <Button
+      onClick={() => {
+        if (openInClient) {
+          try {
+            const openLink = spacepack.findFunctionByStrings(
+              spacepack.findByCode(".trackAnnouncementMessageLinkClicked({messageId:")[0].exports,
+              ".trackAnnouncementMessageLinkClicked({messageId:"
+            ) as ({ href }: { href: string }) => void;
+            openLink({ href: link });
+          } catch {
+            window.open(link);
+          }
+        } else {
+          // Will open externally in the user's browser
+          window.open(link);
+        }
+      }}
+    >
+      <Flex direction={Flex.Direction.HORIZONTAL} align={Flex.Align.CENTER} className="moonbase-gap">
+        {React.createElement(icon, {
+          size: "sm",
+          color: "currentColor"
+        })}
+        {text}
+      </Flex>
+    </Button>
+  );
+}
+
+export default function AboutPage() {
+  const darkTheme = useThemeContext()?.theme === "dark";
+
+  return (
+    <div>
+      <Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.CENTER}>
+        <img src={darkTheme ? wordmarkLight : wordmark} alt="moonlight wordmark" className="moonbase-wordmark" />
+        <Text variant="heading-lg/medium">created by:</Text>
+        <div className="moonbase-devs">
+          <Dev name="Cynosphere" picture="https://github.com/Cynosphere.png" link="https://github.com/Cynosphere" />
+          <Dev name="NotNite" picture="https://github.com/NotNite.png" link="https://github.com/NotNite" />
+          <Dev name="adryd" picture="https://github.com/adryd325.png" link="https://github.com/adryd325" />
+          <Dev
+            name="redstonekasi"
+            picture="https://github.com/redstonekasi.png"
+            link="https://github.com/redstonekasi"
+          />
+        </div>
+
+        <Flex direction={Flex.Direction.HORIZONTAL} align={Flex.Align.CENTER} className="moonbase-gap">
+          <IconButton text="View source" icon={AngleBracketsIcon} link="https://github.com/moonlight-mod/moonlight" />
+          <IconButton text="Open the docs" icon={BookCheckIcon} link="https://moonlight-mod.github.io/" />
+          <IconButton
+            text="Join the server"
+            icon={ClydeIcon}
+            link="https://discord.gg/FdZBTFCP6F"
+            openInClient={true}
+          />
+        </Flex>
+      </Flex>
+
+      <Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.START} className="moonbase-about-text">
+        <Text variant="text-sm/normal">
+          {parse(`moonlight \`${window.moonlight.version}\` on \`${window.moonlight.branch}\``)}
+        </Text>
+
+        <Text variant="text-sm/normal">
+          {parse(
+            "moonlight is licensed under the [GNU Lesser General Public License](https://www.gnu.org/licenses/lgpl-3.0.html) (`LGPL-3.0-or-later`)."
+          )}
+        </Text>
+      </Flex>
+    </div>
+  );
+}

@@ -6,6 +6,7 @@ import { UserSettingsModalStore } from "@moonlight-mod/wp/common_stores";
 
 import ExtensionsPage from "./extensions";
 import ConfigPage from "./config";
+import AboutPage from "./about";
 import Update from "./update";
 import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";
 import RestartAdviceMessage from "./RestartAdvice";
@@ -30,6 +31,11 @@ {
     id: "config",
     name: "Config",
     element: ConfigPage
+  },
+  {
+    id: "about",
+    name: "About",
+    element: AboutPage
   }
 ];