diff --git a/src/equicordplugins/questCompleter/index.tsx b/src/equicordplugins/questCompleter/index.tsx
index a6781fa6d..4479a62d0 100644
--- a/src/equicordplugins/questCompleter/index.tsx
+++ b/src/equicordplugins/questCompleter/index.tsx
@@ -16,33 +16,19 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./style.css";
+
 import { showNotification } from "@api/Notifications";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs, EquicordDevs } from "@utils/constants";
 import { getTheme, Theme } from "@utils/discord";
 import { classes } from "@utils/misc";
 import definePlugin from "@utils/types";
-import { findByCode, findByProps, findExportedComponentLazy } from "@webpack";
-import { FluxDispatcher, Forms, RestAPI, Text, UserStore } from "@webpack/common";
-
+import { findByProps, findExportedComponentLazy } from "@webpack";
+import { Button, FluxDispatcher, RestAPI, Text, Tooltip, UserStore } from "@webpack/common";
 const HeaderBarIcon = findExportedComponentLazy("Icon", "Divider");
 const isApp = navigator.userAgent.includes("Electron/");
 
-const QuestsIcon = () => props => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        className="vc-quest-completer-icon"
-        viewBox="0 0 828 893"
-    >
-        <path
-            fill="currentColor"
-            d="M395 732c-56.667 0-109.333-9-158-27-48-18-89.667-43.333-125-76-35.333-33.333-63-72.333-83-117C9.667 467.333 0 418.667 0 366c0-53.333 9.667-102 29-146 20-44.667 47.667-83.333 83-116 35.333-33.333 77-59 125-77C285.667 9 338.333 0 395 0c57.333 0 110 9 158 27s89.667 43.667 125 77c35.333 32.667 62.667 71.333 82 116 20 44 30 92.667 30 146 0 52.667-10 101.333-30 146-19.333 44.667-46.667 83.667-82 117-35.333 32.667-77 58-125 76s-100.667 27-158 27zm229 161c-32.667 0-63-3.333-91-10-28-6-55.333-16.333-82-31-26-14.667-53.333-35-82-61-28.667-25.333-60.667-57-96-95l244-60c16 24.667 29.667 43.667 41 57 11.333 13.333 22.333 22.667 33 28 11.333 5.333 24 8 38 8 34.667 0 67-15 97-45l102 120c-50 59.333-118 89-204 89zM395 541c22 0 42.333-4 61-12 19.333-8 36-19.333 50-34 14.667-15.333 26-33.667 34-55 8-22 12-46.667 12-74s-4-51.667-12-73c-8-22-19.333-40.333-34-55-14-15.333-30.667-27-50-35-18.667-8-39-12-61-12s-42.667 4-62 12c-18.667 8-35.333 19.667-50 35-14 14.667-25 33-33 55-8 21.333-12 45.667-12 73s4 52 12 74c8 21.333 19 39.667 33 55 14.667 14.667 31.333 26 50 34 19.333 8 40 12 62 12z"
-        ></path>
-    </svg>
-);
-
 function ToolBarQuestsIcon() {
     return (
         <svg
@@ -226,19 +212,19 @@ export default definePlugin({
         }
     ],
     renderQuestButton() {
-        const ToolTipButton = findByCode(",color:\"currentColor\"})})}}");
         return (
-            <>
-                <ToolTipButton
-                    label="Complete Quest"
-                    tooltipPosition="bottom"
-                    iconComponent={QuestsIcon()}
-                    onClick={openCompleteQuestUI}
-                >
-                </ToolTipButton>
-                <Forms.FormDivider></Forms.FormDivider>
-
-            </>
+            <Tooltip text="Complete Quest">
+                {tooltipProps => (
+                    <Button style={{ backgroundColor: "transparent" }}
+                        {...tooltipProps}
+                        size={"25"}
+                        className={"vc-quest-completer-icon"}
+                        onClick={openCompleteQuestUI}
+                    >
+                        <ToolBarQuestsIcon />
+                    </Button>
+                )}
+            </Tooltip>
         );
     },
     toolbarAction(e) {
diff --git a/src/equicordplugins/questCompleter/style.css b/src/equicordplugins/questCompleter/style.css
new file mode 100644
index 000000000..af1bbd0df
--- /dev/null
+++ b/src/equicordplugins/questCompleter/style.css
@@ -0,0 +1,3 @@
+.vc-quest-completer-icon {
+    background-size: cover;
+}