diff --git a/build.mjs b/build.mjs
index 2b1550ad..f2a44474 100755
--- a/build.mjs
+++ b/build.mjs
@@ -1,4 +1,5 @@
 #!/usr/bin/node
+import { execSync } from "child_process";
 import esbuild from "esbuild";
 import { readdirSync } from "fs";
 import { performance } from "perf_hooks";
@@ -59,6 +60,23 @@ const globPlugins = {
     }
 };
 
+const gitHash = execSync("git rev-parse --short HEAD", { encoding: "utf-8" }).trim();
+/**
+ * @type {esbuild.Plugin}
+ */
+const gitHashPlugin = {
+    name: "git-hash-plugin",
+    setup: build => {
+        const filter = /^git-hash$/;
+        build.onResolve({ filter }, args => ({
+            namespace: "git-hash", path: args.path
+        }));
+        build.onLoad({ filter, namespace: "git-hash" }, () => ({
+            contents: `export default "${gitHash}"`
+        }));
+    }
+};
+
 const begin = performance.now();
 await Promise.all([
     esbuild.build({
@@ -92,9 +110,10 @@ await Promise.all([
         target: ["esnext"],
         footer: { js: "//# sourceURL=VencordRenderer" },
         globalName: "Vencord",
-        external: ["plugins"],
+        external: ["plugins", "git-hash"],
         plugins: [
-            globPlugins
+            globPlugins,
+            gitHashPlugin
         ],
         sourcemap: "inline",
         watch,
diff --git a/src/Vencord.ts b/src/Vencord.ts
index e8041332..43644683 100644
--- a/src/Vencord.ts
+++ b/src/Vencord.ts
@@ -1,6 +1,7 @@
 export * as Plugins from "./plugins";
 export * as Webpack from "./utils/webpack";
 export * as Api from "./api";
+export * as Components from "./components";
 
 import "./utils/patchWebpack";
 import "./utils/quickCss";
diff --git a/src/VencordNative.ts b/src/VencordNative.ts
index 0fc5d16d..7fbe6dfa 100644
--- a/src/VencordNative.ts
+++ b/src/VencordNative.ts
@@ -7,5 +7,6 @@ export default {
             cb(css);
         });
     },
-    getQuickCss: () => ipcRenderer.invoke(IPC_GET_QUICK_CSS) as Promise<string>
+    getQuickCss: () => ipcRenderer.invoke(IPC_GET_QUICK_CSS) as Promise<string>,
+    getVersions: () => process.versions
 };
\ No newline at end of file
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
new file mode 100644
index 00000000..f9964486
--- /dev/null
+++ b/src/components/Settings.tsx
@@ -0,0 +1,4 @@
+export default function Settings(props) {
+    console.log(props);
+    return (<p>Hi</p>);
+}
\ No newline at end of file
diff --git a/src/components/Test.tsx b/src/components/Test.tsx
deleted file mode 100644
index 14a46ddf..00000000
--- a/src/components/Test.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-
-export default () => {
-    <div>
-        Hi
-    </div>;
-};
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 00000000..b999c271
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1 @@
+export { default as Settings } from "./Settings";
\ No newline at end of file
diff --git a/src/plugins/clientInfo.ts b/src/plugins/clientInfo.ts
deleted file mode 100644
index 77cc70c7..00000000
--- a/src/plugins/clientInfo.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import definePlugin from "../utils/types";
-
-export default definePlugin({
-    name: "ClientInfo",
-    description: "Adds extra info to Client Info in settings",
-    author: "Vendicated",
-    patches: [{
-        find: "default.versionHash",
-        replacement: {
-            match: /\w\.createElement.+?["']Host ["'].+?\):null/,
-            replace: m => {
-                const idx = m.indexOf("Host") - 1;
-                return `${m},${m.slice(0, idx)}"Vencord ".repeat(50),"1.0.0")," ")`;
-            }
-        }
-    }]
-});
\ No newline at end of file
diff --git a/src/plugins/settings.ts b/src/plugins/settings.ts
new file mode 100644
index 00000000..fa214f09
--- /dev/null
+++ b/src/plugins/settings.ts
@@ -0,0 +1,39 @@
+import definePlugin from "../utils/types";
+import gitHash from "git-hash";
+
+export default definePlugin({
+    name: "Settings",
+    description: "Adds Settings UI and debug info",
+    author: "Vendicated",
+    patches: [{
+        find: "default.versionHash",
+        replacement: [
+            {
+                match: /return .{1,2}\("div"/,
+                replace: (m) => {
+                    return `var versions=VencordNative.getVersions();${m}`;
+                }
+            },
+            {
+                match: /\w\.createElement.+?["']Host ["'].+?\):null/,
+                replace: m => {
+                    const idx = m.indexOf("Host") - 1;
+                    const template = m.slice(0, idx);
+                    return `${m}, ${template}"Vencord ", "${gitHash}"), " "), ` +
+                        `${template} "Electron ", versions.electron), " "), ` +
+                        `${template} "Chrome ", versions.chrome), " ")`;
+                }
+            }
+        ]
+    }, {
+        find: "Messages.ACTIVITY_SETTINGS",
+        replacement: {
+            match: /\{section:(.{1,2})\.SectionTypes\.HEADER,label:(.{1,2})\.default\.Messages\.ACTIVITY_SETTINGS\}/,
+            replace: (m, mod) =>
+                `{section:${mod}.SectionTypes.HEADER,label:"Vencord"},` +
+                `{section:"Vencord",label:"Vencord",element:Vencord.Components.Settings},` +
+                `{section:${mod}.SectionTypes.DIVIDER},${m}`
+
+        }
+    }]
+});
\ No newline at end of file
diff --git a/src/pluginsModule.d.ts b/src/pluginsModule.d.ts
index 0ef3819b..8c2ac23a 100644
--- a/src/pluginsModule.d.ts
+++ b/src/pluginsModule.d.ts
@@ -1,4 +1,9 @@
 declare module "plugins" {
     const plugins: import("./utils/types").Plugin[];
     export default plugins;
-}
\ No newline at end of file
+}
+
+declare module "git-hash" {
+    const hash: string;
+    export default hash;
+}
diff --git a/src/utils/quickCss.ts b/src/utils/quickCss.ts
index 573eccc0..724fde87 100644
--- a/src/utils/quickCss.ts
+++ b/src/utils/quickCss.ts
@@ -3,4 +3,4 @@ document.addEventListener("DOMContentLoaded", async () => {
     document.head.appendChild(style);
     VencordNative.handleQuickCssUpdate((css: string) => style.innerText = css);
     style.innerText = await VencordNative.getQuickCss();
-});
\ No newline at end of file
+});
diff --git a/tsconfig.json b/tsconfig.json
index 313a7174..6489d934 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,7 +9,7 @@
         "noImplicitAny": false,
         "target": "ESNEXT",
         // https://esbuild.github.io/api/#jsx-factory
-        "jsxFactory": "Vencord.React.createElement",
+        "jsxFactory": "Vencord.Webpack.Common.React.createElement",
         "jsx": "react"
     },
     "include": ["src/**/*"]