diff --git a/src/equicordplugins/githubRepos/components/GitHubReposComponent.tsx b/src/equicordplugins/githubRepos/components/GitHubReposComponent.tsx
index 9dcdfd99d..67aa4029e 100644
--- a/src/equicordplugins/githubRepos/components/GitHubReposComponent.tsx
+++ b/src/equicordplugins/githubRepos/components/GitHubReposComponent.tsx
@@ -6,8 +6,9 @@
 
 import { classNameFactory } from "@api/Styles";
 import { BaseText } from "@components/BaseText";
+import { Button, TextButton } from "@components/Button";
 import { openModal } from "@utils/modal";
-import { Button, React, useEffect, UserProfileStore, useState } from "@webpack/common";
+import { React, useEffect, UserProfileStore, useState } from "@webpack/common";
 
 import { settings } from "..";
 import { fetchReposByUserId, fetchReposByUsername, fetchUserInfo, GitHubUserInfo } from "../githubApi";
@@ -15,6 +16,8 @@ import { GitHubRepo } from "../types";
 import { RepoCard } from "./RepoCard";
 import { ReposModal } from "./ReposModal";
 
+export const cl = classNameFactory("vc-github-repos-");
+
 export function GitHubReposComponent({ id, theme }: { id: string, theme: string; }) {
     const [repos, setRepos] = useState<GitHubRepo[]>([]);
     const [loading, setLoading] = useState(true);
@@ -22,8 +25,6 @@ export function GitHubReposComponent({ id, theme }: { id: string, theme: string;
     const [userInfo, setUserInfo] = useState<GitHubUserInfo | null>(null);
     const [returnJustButton, setReturnJustButton] = useState(false);
 
-    const cl = classNameFactory("vc-github-repos-");
-
     const openReposModal = () => {
         if (!userInfo) return;
 
@@ -101,9 +102,8 @@ export function GitHubReposComponent({ id, theme }: { id: string, theme: string;
         return (
             <Button
                 className={cl("button")}
-                size={Button.Sizes.SMALL}
-                look={Button.Looks.LINK}
-                color={Button.Colors.TRANSPARENT}
+                size="small"
+                variant="secondary"
                 onClick={openReposModal}
             >
                 Show GitHub Repositories
@@ -134,15 +134,13 @@ export function GitHubReposComponent({ id, theme }: { id: string, theme: string;
                 }
             </div>
             <div className={cl("footer")}>
-                <Button
+                <TextButton
                     className={cl("show-more")}
-                    size={Button.Sizes.SMALL}
-                    look={Button.Looks.LINK}
-                    color={Button.Colors.TRANSPARENT}
+                    color="secondary"
                     onClick={openReposModal}
                 >
                     Show More
-                </Button>
+                </TextButton>
             </div>
         </div>
     );
diff --git a/src/equicordplugins/githubRepos/components/ReposModal.tsx b/src/equicordplugins/githubRepos/components/ReposModal.tsx
index eeac8e39d..55ca21b74 100644
--- a/src/equicordplugins/githubRepos/components/ReposModal.tsx
+++ b/src/equicordplugins/githubRepos/components/ReposModal.tsx
@@ -4,12 +4,14 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import { Button } from "@components/Button";
 import { HeadingPrimary } from "@components/Heading";
 import { ModalContent, ModalFooter, ModalHeader, ModalRoot } from "@utils/modal";
-import { Button, React } from "@webpack/common";
+import { React } from "@webpack/common";
 
 import { getLanguageColor } from "../colors";
 import { GitHubRepo } from "../types";
+import { cl } from "./GitHubReposComponent";
 import { Star } from "./Star";
 
 interface ReposModalProps {
@@ -33,18 +35,18 @@ export function ReposModal({ repos, username, rootProps }: ReposModalProps) {
     const renderTableRow = (repo: GitHubRepo) => (
         <tr key={repo.id} onClick={() => window.open(repo.html_url, "_blank")}>
             <td>
-                <div className="vc-github-repos-table-name">{repo.name}</div>
+                <div className={cl("table-name")}>{repo.name}</div>
             </td>
             <td>
-                <div className="vc-github-repos-table-description">
+                <div className={cl("table-description")}>
                     {repo.description || ""}
                 </div>
             </td>
             <td>
                 {repo.language && (
-                    <div className="vc-github-repos-table-language">
+                    <div className={cl("table-language")}>
                         <span
-                            className="vc-github-repos-table-language-color"
+                            className={cl("table-language-color")}
                             style={{ backgroundColor: getLanguageColor(repo.language) }}
                         />
                         <span>{repo.language}</span>
@@ -52,8 +54,8 @@ export function ReposModal({ repos, username, rootProps }: ReposModalProps) {
                 )}
             </td>
             <td>
-                <div className="vc-github-repos-table-stars">
-                    <Star className="vc-github-repos-table-star-icon" />
+                <div className={cl("table-stars")}>
+                    <Star className={cl("table-star-icon")} />
                     <span>{repo.stargazers_count.toLocaleString()}</span>
                 </div>
             </td>
@@ -61,15 +63,15 @@ export function ReposModal({ repos, username, rootProps }: ReposModalProps) {
     );
 
     return (
-        <ModalRoot className="vc-github-repos-modal" size="large" {...rootProps}>
+        <ModalRoot className={cl("modal")} size="large" {...rootProps}>
             <ModalHeader>
-                <HeadingPrimary className="vc-github-repos-modal-title">
+                <HeadingPrimary className={cl("modal-title")}>
                     {username}'s GitHub Repositories
                 </HeadingPrimary>
             </ModalHeader>
-            <ModalContent className="vc-github-repos-modal-content">
-                <div className="vc-github-repos-table-container">
-                    <table className="vc-github-repos-table">
+            <ModalContent className={cl("modal-content")}>
+                <div className={cl("table-container")}>
+                    <table className={cl("table")}>
                         <colgroup>
                             <col style={{ width: "20%" }} />
                             <col style={{ width: "45%" }} />
@@ -85,13 +87,15 @@ export function ReposModal({ repos, username, rootProps }: ReposModalProps) {
             </ModalContent>
             <ModalFooter>
                 <Button
+                    className={cl("modal-footer-github")}
+                    variant="primary"
                     onClick={() => window.open(`https://github.com/${username}?tab=repositories`, "_blank")}
                 >
                     View on GitHub
                 </Button>
                 <Button
-                    color={Button.Colors.TRANSPARENT}
-                    look={Button.Looks.FILLED}
+                    className={cl("modal-footer-close")}
+                    variant="secondary"
                     onClick={rootProps.onClose}
                 >
                     Close
diff --git a/src/equicordplugins/githubRepos/components/Star.tsx b/src/equicordplugins/githubRepos/components/Star.tsx
index 9bb4de407..5024e9377 100644
--- a/src/equicordplugins/githubRepos/components/Star.tsx
+++ b/src/equicordplugins/githubRepos/components/Star.tsx
@@ -15,7 +15,6 @@ export function Star({ className, width = 16, height = 16 }: IconProps) {
             width={width}
             height={height}
             viewBox="0 0 16 16"
-            fill="var(--text-warning)"
             xmlns="http://www.w3.org/2000/svg"
         >
             <path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z" />
diff --git a/src/equicordplugins/githubRepos/index.tsx b/src/equicordplugins/githubRepos/index.tsx
index 17fd02e3d..092549eb5 100644
--- a/src/equicordplugins/githubRepos/index.tsx
+++ b/src/equicordplugins/githubRepos/index.tsx
@@ -63,18 +63,28 @@ export default definePlugin({
     settings,
 
     patches: [
+        // User Popout
         {
             find: ".hasAvatarForGuild(null==",
             replacement: {
-                match: /(?<=user:(\i),bio:null==(\i)\?.+?currentUser:\i,guild:\i}\))/,
-                replace: ",$self.ProfilePopoutComponent({ user: $1, displayProfile: $2 })"
+                match: /currentUser:\i,guild:\i\}\)(?=\])/,
+                replace: "$&,$self.ProfilePopoutComponent({ user: arguments[0].user, displayProfile: arguments[0].displayProfile })"
             }
         },
+        // User Profile Modal v1
         {
-            find: "appsConnections,applicationRoleConnection",
+            find: ".connections,userId:",
             replacement: {
-                match: /(?<=user:(\i).{0,15}displayProfile:(\i).*?application\.id\)\)\}\))/,
-                replace: ",$self.ProfilePopoutComponent({ user: $1, displayProfile: $2 })"
+                match: /user:(\i).{0,15}displayProfile:(\i).*?application\.id\)\)\}\)/,
+                replace: "$&,$self.ProfilePopoutComponent({ user: arguments[0].user, displayProfile: arguments[0].displayProfile }),"
+            }
+        },
+        // User Profile Modal v2
+        {
+            find: ".MODAL_V2,onClose:",
+            replacement: {
+                match: /displayProfile:(\i).*?profileAppConnections\}\)\}\)/,
+                replace: "$&,$self.ProfilePopoutComponent({ user: arguments[0].user, displayProfile: $1 }),"
             }
         }
     ],
diff --git a/src/equicordplugins/githubRepos/styles.css b/src/equicordplugins/githubRepos/styles.css
index 4434c041f..512c39ab8 100644
--- a/src/equicordplugins/githubRepos/styles.css
+++ b/src/equicordplugins/githubRepos/styles.css
@@ -28,8 +28,9 @@
 
 .vc-github-repos-button,
 .vc-github-repos-show-more {
+    color: var(--text-default);
+    background-color: var(--control-background-primary-default);
     width: 100%;
-    border: 1px solid var(--profile-body-divider-color, var(--input-border)) !important;
 }
 
 .vc-github-repo-card {
@@ -180,5 +181,10 @@
 }
 
 .vc-github-repos-table-star-icon {
-    color: var(--text-warning);
+    color: var(--info-warning-foreground);
+    fill: var(--info-warning-foreground);
 }
+
+.vc-github-repos-modal-footer-close {
+    margin-right: 5px;
+}
\ No newline at end of file