diff --git a/.eslintrc.js b/.eslintrc.js
index b94604ec..6307a39f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -42,7 +42,6 @@ module.exports = {
 	ignorePatterns: ["test", "dist", "build", "public", "/**/node_modules/*", ".eslintrc.js", "vite.config.ts", "vite-env.d.ts", "postcss.config.js", "tailwind.config.js", "vitest.config.ts", "playwright.config.ts", "e2e"],
 	rules: {
 		"indent": "off",
-		"@typescript-eslint/indent": "error",
 		// eslint:recommended
 		"arrow-body-style": ["error", "as-needed"],
 		curly: ["error", "all"],
@@ -122,15 +121,7 @@ module.exports = {
 			},
 		],
 		"array-bracket-newline": ["error", "consistent"],
-		"array-bracket-spacing": [
-			"error",
-			"never",
-			{
-				arraysInArrays: true,
-			},
-		],
 		"array-element-newline": ["error", "consistent"],
-		"arrow-parens": ["error", "as-needed"],
 		"arrow-spacing": "error",
 		"block-spacing": ["error", "always"],
 		"brace-style": ["error", "1tbs"],
@@ -148,7 +139,6 @@ module.exports = {
 		"eol-last": ["error", "always"],
 		"func-call-spacing": ["error", "never"],
 		"function-call-argument-newline": ["error", "consistent"],
-		"function-paren-newline": ["error", "multiline-arguments"],
 		"jsx-quotes": ["error", "prefer-double"],
 		"key-spacing": [
 			"error",
@@ -164,14 +154,6 @@ module.exports = {
 				after: true,
 			},
 		],
-		"line-comment-position": [
-			"error",
-			{
-				position: "above",
-				ignorePattern: "pragma",
-				applyDefaultIgnorePatterns: false,
-			},
-		],
 		"linebreak-style": ["error", "unix"],
 		"lines-around-comment": [
 			"error",
@@ -196,24 +178,10 @@ module.exports = {
 				exceptAfterSingleLine: true,
 			},
 		],
-		"multiline-ternary": ["error", "always-multiline"],
-		"new-parens": ["error", "never"],
-		"newline-per-chained-call": [
-			"error",
-			{
-				ignoreChainWithDepth: 2,
-			},
-		],
 		"no-multi-spaces": "error",
 		"no-multiple-empty-lines": "error",
 		"no-trailing-spaces": "error",
 		"no-whitespace-before-property": "error",
-		"object-curly-newline": [
-			"error",
-			{
-				multiline: true,
-			},
-		],
 		"object-curly-spacing": [
 			"error",
 			"always",
@@ -228,16 +196,6 @@ module.exports = {
 				allowAllPropertiesOnSameLine: true,
 			},
 		],
-		"operator-linebreak": [
-			"error",
-			"after",
-			{
-				overrides: {
-					"?": "before",
-					":": "before",
-				},
-			},
-		],
 		"padded-blocks": ["error", "never"],
 		"padding-line-between-statements": [
 			"error",
@@ -276,7 +234,6 @@ module.exports = {
 		],
 		"semi-style": ["error", "last"],
 		"space-before-blocks": ["error", "always"],
-		"space-before-function-paren": ["error", "always"],
 		"space-infix-ops": [
 			"error",
 			{
@@ -307,7 +264,6 @@ module.exports = {
 				functionPrototypeMethods: true,
 			},
 		],
-		"wrap-regex": "error",
 
 		// plugin:react/recommended
 		"react/destructuring-assignment": [
@@ -338,23 +294,10 @@ module.exports = {
 		"react/jsx-closing-bracket-location": "error",
 		"react/jsx-closing-tag-location": "error",
 		"react/jsx-curly-brace-presence": ["error", "never"],
-		"react/jsx-curly-newline": ["error", "consistent"],
 		"react/jsx-equals-spacing": ["error", "never"],
 		"react/jsx-first-prop-new-line": ["error", "multiline-multiprop"],
 		"react/jsx-fragments": ["error", "syntax"],
 		"react/jsx-indent-props": "off",
-		"react/jsx-max-props-per-line": [
-			"error",
-			{
-				maximum: 1,
-			},
-		],
-		"react/jsx-newline": [
-			"error",
-			{
-				prevent: false,
-			},
-		],
 		// "react/jsx-no-leaked-render": ["error", {
 		//   "validStrategies": ["coerce"]
 		// }],
@@ -364,22 +307,7 @@ module.exports = {
 				allowExpressions: true,
 			},
 		],
-		"react/jsx-one-expression-per-line": [
-			"error",
-			{
-				allow: "literal",
-			},
-		],
 		"react/jsx-props-no-multi-spaces": "error",
-		"react/jsx-sort-props": [
-			"error",
-			{
-				callbacksLast: true,
-				shorthandFirst: true,
-				multiline: "last",
-				reservedFirst: true,
-			},
-		],
 		"react/jsx-tag-spacing": [
 			"error",
 			{
diff --git a/.prettierrc b/.prettierrc
index c44bef21..573d4c58 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,5 @@
 {
-  "trailingComma": "es5",
-  "tabWidth": 2,
+  "trailingComma": "all",
+  "tabWidth": 4,
   "singleQuote": false
 }
diff --git a/src/constants.ts b/src/constants.ts
index 68fe569e..6cfaeba6 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,6 +1,8 @@
 // OpenSauced constants
-export const OPEN_SAUCED_INSIGHTS_DOMAIN = import.meta.env.VITE_OPEN_SAUCED_INSIGHTS_DOMAIN;
-export const OPEN_SAUCED_API_ENDPOINT = import.meta.env.VITE_OPEN_SAUCED_API_ENDPOINT;
+export const OPEN_SAUCED_INSIGHTS_DOMAIN = import.meta.env
+    .VITE_OPEN_SAUCED_INSIGHTS_DOMAIN;
+export const OPEN_SAUCED_API_ENDPOINT = import.meta.env
+    .VITE_OPEN_SAUCED_API_ENDPOINT;
 export const REPO_QUERY_API_ENDPOINT = "https://opensauced.tools";
 export const SUPABASE_LOGIN_URL = `https://${import.meta.env.VITE_OPEN_SAUCED_SUPABASE_ID}.supabase.co/auth/v1/authorize`;
 
@@ -14,7 +16,6 @@ export const OPEN_SAUCED_AUTH_TOKEN_KEY = "os-access-token";
 export const OPEN_SAUCED_OPTED_LOG_OUT_KEY = "opted-log-out";
 export const AI_PR_DESCRIPTION_CONFIG_KEY = "ai-pr-description-config";
 
-
 export const OPEN_SAUCED_USERS_ENDPOINT = `${OPEN_SAUCED_API_ENDPOINT}/users`;
 export const OPEN_SAUCED_REPOS_ENDPOINT = `${OPEN_SAUCED_API_ENDPOINT}/repos`;
 export const OPEN_SAUCED_SESSION_ENDPOINT = `${OPEN_SAUCED_API_ENDPOINT}/auth/session`;
@@ -29,12 +30,17 @@ export const OPEN_SAUCED_HIGHLIGHTS_LIST_ENDPOINT = `${OPEN_SAUCED_API_ENDPOINT}
 export const OPEN_SAUCED_EMOJIS_ENDPOINT = `${OPEN_SAUCED_API_ENDPOINT}/emojis`;
 
 // Content-scripts selectors
-export const GITHUB_PROFILE_MENU_SELECTOR = ".p-nickname.vcard-username.d-block";
-export const GITHUB_PROFILE_EDIT_MENU_CLASS = "button.js-profile-editable-edit-button";
-export const GITHUB_PR_COMMENT_HEADER_CLASS = "timeline-comment-header clearfix d-flex";
-export const GITHUB_REVIEW_SUGGESTION_CLASS = "js-suggestion-button-placeholder";
+export const GITHUB_PROFILE_MENU_SELECTOR =
+    ".p-nickname.vcard-username.d-block";
+export const GITHUB_PROFILE_EDIT_MENU_CLASS =
+    "button.js-profile-editable-edit-button";
+export const GITHUB_PR_COMMENT_HEADER_CLASS =
+    "timeline-comment-header clearfix d-flex";
+export const GITHUB_REVIEW_SUGGESTION_CLASS =
+    "js-suggestion-button-placeholder";
 export const GITHUB_REPO_ACTIONS_SELECTOR = ".pagehead-actions";
-export const GITHUB_PR_SUGGESTION_TEXT_AREA_Attribute = "[name='comment[body]']";
+export const GITHUB_PR_SUGGESTION_TEXT_AREA_Attribute =
+    "[name='comment[body]']";
 export const GITHUB_PR_BASE_BRANCH_CLASS = "css-truncate css-truncate-target";
 export const LINKEDIN_PROJECT_FORM_SELECTOR = ".artdeco-text-input--input";
 
diff --git a/src/content-scripts/components/AICodeReview/AICodeReviewButton.ts b/src/content-scripts/components/AICodeReview/AICodeReviewButton.ts
index 273ed1f0..dfe55caa 100644
--- a/src/content-scripts/components/AICodeReview/AICodeReviewButton.ts
+++ b/src/content-scripts/components/AICodeReview/AICodeReviewButton.ts
@@ -1,18 +1,18 @@
 import { createHtmlElement } from "../../../utils/createHtmlElement";
 import openSaucedLogoIcon from "../../../assets/opensauced-icon.svg";
-import { generateCodeExplanation, generateCodeSuggestion, generateCodeTest } from "../../../utils/ai-utils/openai";
 import {
-    AICodeReviewMenu,
-    AICodeReviewMenuItem,
-} from "./AICodeReviewMenu";
-
+    generateCodeExplanation,
+    generateCodeSuggestion,
+    generateCodeTest,
+} from "../../../utils/ai-utils/openai";
+import { AICodeReviewMenu, AICodeReviewMenuItem } from "./AICodeReviewMenu";
 
 export const AICodeReviewButton = (commentNode: HTMLElement) => {
     const changeSuggestorButton = createHtmlElement("a", {
         innerHTML: `<span id="ai-change-gen" class="toolbar-item btn-octicon">
       <img class="octicon octicon-heading" height="16px" width="16px" id="ai-description-button-logo" src=${chrome.runtime.getURL(
-        openSaucedLogoIcon,
-    )}>
+          openSaucedLogoIcon,
+      )}>
       </span>`,
         onclick: (event: MouseEvent) => {
             event.stopPropagation();
@@ -45,5 +45,3 @@ export const AICodeReviewButton = (commentNode: HTMLElement) => {
     changeSuggestorButton.append(menu);
     return changeSuggestorButton;
 };
-
-
diff --git a/src/content-scripts/components/AICodeReview/AICodeReviewMenu.ts b/src/content-scripts/components/AICodeReview/AICodeReviewMenu.ts
index dc5c05a2..9654b192 100644
--- a/src/content-scripts/components/AICodeReview/AICodeReviewMenu.ts
+++ b/src/content-scripts/components/AICodeReview/AICodeReviewMenu.ts
@@ -4,14 +4,18 @@ import {
     DescriptionConfig,
     getAIDescriptionConfig,
 } from "../../../utils/ai-utils/descriptionconfig";
-import { getAuthToken, isLoggedIn, optLogIn } from "../../../utils/checkAuthentication";
+import {
+    getAuthToken,
+    isLoggedIn,
+    optLogIn,
+} from "../../../utils/checkAuthentication";
 import { createHtmlElement } from "../../../utils/createHtmlElement";
 import { isOutOfContextBounds } from "../../../utils/fetchGithubAPIData";
 
 type SuggestionGenerator = (
     token: string,
     code: string,
-    config: DescriptionConfig
+    config: DescriptionConfig,
 ) => Promise<string | undefined>;
 
 export const AICodeReviewMenu = (items: HTMLLIElement[]) => {
@@ -39,7 +43,7 @@ export const AICodeReviewMenu = (items: HTMLLIElement[]) => {
 
     menu.querySelector("ul")?.append(...items);
 
-    document.addEventListener("click", event => {
+    document.addEventListener("click", (event) => {
         if (event.target instanceof HTMLElement) {
             menu.classList.add("hidden");
         }
@@ -47,7 +51,12 @@ export const AICodeReviewMenu = (items: HTMLLIElement[]) => {
     return menu;
 };
 
-export const AICodeReviewMenuItem = (title: string, description: string, suggestionGenerator: SuggestionGenerator, commentNode: HTMLElement) => {
+export const AICodeReviewMenuItem = (
+    title: string,
+    description: string,
+    suggestionGenerator: SuggestionGenerator,
+    commentNode: HTMLElement,
+) => {
     const menuItem = createHtmlElement("li", {
         className: "SelectMenu-item d-block slash-command-menu-item",
         role: "option",
@@ -90,7 +99,7 @@ const handleSubmit = async (
             ".code-review.selected-line",
         );
         let selectedCode = Array.from(selectedLines)
-            .map(line => line.textContent)
+            .map((line) => line.textContent)
             .join("\n");
 
         // find input with name="position" and get its value
@@ -100,15 +109,17 @@ const handleSubmit = async (
             )!;
             const position = positionElement.getAttribute("value")!;
 
-            const codeDiv = document.querySelector(`[data-line-number="${position}"]`)
-                ?.nextSibling?.nextSibling as HTMLElement;
+            const codeDiv = document.querySelector(
+                `[data-line-number="${position}"]`,
+            )?.nextSibling?.nextSibling as HTMLElement;
 
             selectedCode =
-        codeDiv.getElementsByClassName("blob-code-inner")[0].textContent!;
+                codeDiv.getElementsByClassName("blob-code-inner")[0]
+                    .textContent!;
         }
         if (
             isOutOfContextBounds(
-                [selectedCode, [] ],
+                [selectedCode, []],
                 descriptionConfig.config.maxInputLength,
             )
         ) {
diff --git a/src/content-scripts/components/AddPRToHighlights/AddPRToHighlightsButton.ts b/src/content-scripts/components/AddPRToHighlights/AddPRToHighlightsButton.ts
index b5acc441..d1dc67d8 100644
--- a/src/content-scripts/components/AddPRToHighlights/AddPRToHighlightsButton.ts
+++ b/src/content-scripts/components/AddPRToHighlights/AddPRToHighlightsButton.ts
@@ -11,8 +11,8 @@ export const AddPRToHighlightsButton = () => {
         )}>
     <details-menu id="details-menu-os" class="dropdown-menu hidden dropdown-menu-sw color-fg-default w-48 mt-2">
     <a href="https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/feed?new=true&prurl=${encodeURIComponent(
-    window.location.href,
-)}" class="dropdown-item" target="_blank">
+        window.location.href,
+    )}" class="dropdown-item" target="_blank">
       <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-plus">
         <path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"></path>
       </svg> Add PR to Highlights
@@ -28,7 +28,7 @@ export const AddPRToHighlightsButton = () => {
         },
     });
 
-    addPRToHighlightsButton.addEventListener("click", e => {
+    addPRToHighlightsButton.addEventListener("click", (e) => {
         e.stopPropagation();
     });
 
diff --git a/src/content-scripts/components/GenerateAIDescription/DescriptionGeneratorButton.ts b/src/content-scripts/components/GenerateAIDescription/DescriptionGeneratorButton.ts
index 12803465..95846e18 100644
--- a/src/content-scripts/components/GenerateAIDescription/DescriptionGeneratorButton.ts
+++ b/src/content-scripts/components/GenerateAIDescription/DescriptionGeneratorButton.ts
@@ -1,11 +1,18 @@
 import { createHtmlElement } from "../../../utils/createHtmlElement";
 import openSaucedLogoIcon from "../../../assets/opensauced-icon.svg";
 import { getPullRequestAPIURL } from "../../../utils/urlMatchers";
-import { getDescriptionContext, isOutOfContextBounds } from "../../../utils/fetchGithubAPIData";
+import {
+    getDescriptionContext,
+    isOutOfContextBounds,
+} from "../../../utils/fetchGithubAPIData";
 import { generateDescription } from "../../../utils/ai-utils/openai";
 import { insertTextAtCursor } from "../../../utils/ai-utils/cursorPositionInsert";
 import { getAIDescriptionConfig } from "../../../utils/ai-utils/descriptionconfig";
-import { getAuthToken, isLoggedIn, optLogIn } from "../../../utils/checkAuthentication";
+import {
+    getAuthToken,
+    isLoggedIn,
+    optLogIn,
+} from "../../../utils/checkAuthentication";
 
 export const DescriptionGeneratorButton = (number: number) => {
     const descriptionGeneratorButton = createHtmlElement("a", {
@@ -24,7 +31,6 @@ const handleSubmit = async (event: Event) => {
     const button = event.currentTarget as HTMLElement;
     const logo = button.querySelector("#ai-description-button-logo");
 
-
     try {
         if (!(await isLoggedIn())) {
             return void optLogIn();
@@ -39,13 +45,16 @@ const handleSubmit = async (event: Event) => {
         logo?.classList.toggle("animate-spin");
         button.classList.toggle("pointer-events-none");
 
-
         const { protocol, hostname, pathname } = window.location;
-        const descriptionStream = await getAiDescription(`${protocol}//${hostname}${pathname}`);
+        const descriptionStream = await getAiDescription(
+            `${protocol}//${hostname}${pathname}`,
+        );
 
         logo?.classList.toggle("animate-spin");
         button.classList.toggle("pointer-events-none");
-        const textArea = button.closest(".Box.CommentBox")?.querySelector("textarea");
+        const textArea = button
+            .closest(".Box.CommentBox")
+            ?.querySelector("textarea");
 
         if (textArea) {
             insertTextAtCursor(textArea, descriptionStream);
@@ -70,13 +79,23 @@ export const getAiDescription = async (prUrl: string) => {
         throw new Error("Configuration file is empty!");
     }
 
-    const [diff, commitMessages] = await getDescriptionContext(prApiUrl, descriptionConfig.config.source);
+    const [diff, commitMessages] = await getDescriptionContext(
+        prApiUrl,
+        descriptionConfig.config.source,
+    );
 
     if (!diff && !commitMessages) {
         throw new Error(`No input context was generated.`);
     }
-    if (isOutOfContextBounds([diff, commitMessages], descriptionConfig.config.maxInputLength)) {
-        throw new Error(`Max input length exceeded. Try setting the description source to commit-messages.`);
+    if (
+        isOutOfContextBounds(
+            [diff, commitMessages],
+            descriptionConfig.config.maxInputLength,
+        )
+    ) {
+        throw new Error(
+            `Max input length exceeded. Try setting the description source to commit-messages.`,
+        );
     }
     const token = await getAuthToken();
     const description = await generateDescription(
@@ -95,5 +114,3 @@ export const getAiDescription = async (prUrl: string) => {
 
     return description;
 };
-
-
diff --git a/src/content-scripts/components/InsightsSelectDropdown/InsightsSelectDropdown.ts b/src/content-scripts/components/InsightsSelectDropdown/InsightsSelectDropdown.ts
index 961116a2..bfbc30da 100644
--- a/src/content-scripts/components/InsightsSelectDropdown/InsightsSelectDropdown.ts
+++ b/src/content-scripts/components/InsightsSelectDropdown/InsightsSelectDropdown.ts
@@ -1,11 +1,18 @@
 import "../../content-scripts.css";
 import { createHtmlElement } from "../../../utils/createHtmlElement";
 import { getAuthToken } from "../../../utils/checkAuthentication";
-import { getUserInsightsData, getRepoData, updateInsight } from "../../../utils/fetchOpenSaucedApiData";
+import {
+    getUserInsightsData,
+    getRepoData,
+    updateInsight,
+} from "../../../utils/fetchOpenSaucedApiData";
 import { IInsight } from "../../../ts/InsightDto";
 import { OPEN_SAUCED_INSIGHTS_DOMAIN } from "../../../constants";
 
-export const InsightsSelectDropdown = async (ownerName: string, repoName: string) => {
+export const InsightsSelectDropdown = async (
+    ownerName: string,
+    repoName: string,
+) => {
     const insightsDropdown = createHtmlElement("div", {
         className: "SelectMenu cursor-default right-0 mt-1 hidden text-inherit",
         innerHTML: `
@@ -46,9 +53,7 @@ export const InsightsSelectDropdown = async (ownerName: string, repoName: string
         insightsDropdown.classList.add("hidden");
     });
 
-    const insightsList = insightsDropdown.querySelector(
-        ".SelectMenu-list",
-    )!;
+    const insightsList = insightsDropdown.querySelector(".SelectMenu-list")!;
 
     userInsights.forEach((insight: IInsight) => {
         const insightLabel = createHtmlElement("div", {
@@ -63,11 +68,13 @@ export const InsightsSelectDropdown = async (ownerName: string, repoName: string
             `,
         });
 
-        const insightCheckbox = insightLabel.querySelector(
-            "input",
-        )!;
+        const insightCheckbox = insightLabel.querySelector("input")!;
 
-        if (insight.repos.some((repo: any) => repo.repo_id === currentRepoData.id)) {
+        if (
+            insight.repos.some(
+                (repo: any) => repo.repo_id === currentRepoData.id,
+            )
+        ) {
             insightCheckbox.setAttribute("checked", "true");
         }
 
@@ -91,12 +98,11 @@ export const InsightsSelectDropdown = async (ownerName: string, repoName: string
         insightsList.appendChild(insightLabel);
     });
 
-
     document.addEventListener("click", () => {
         insightsDropdown.classList.add("hidden");
     });
 
-    insightsDropdown.addEventListener("click", e => {
+    insightsDropdown.addEventListener("click", (e) => {
         e.stopPropagation();
     });
 
@@ -113,4 +119,3 @@ export const InsightsSelectDropdown = async (ownerName: string, repoName: string
 
     return insightsDropdown;
 };
-
diff --git a/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedButton.ts b/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedButton.ts
index 1b0ac593..4096e471 100644
--- a/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedButton.ts
+++ b/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedButton.ts
@@ -6,7 +6,7 @@ export const InviteToOpenSaucedButton = () => {
     const inviteToOpenSaucedButton = createHtmlElement("a", {
         id: "invite-to-opensauced-button",
         className:
-      "inline-block mt-4 text-black bg-gh-white dark:bg-gh-gray dark:text-white rounded-md p-2 text-sm font-semibold text-center select-none w-full border hover:shadow-button hover:no-underline",
+            "inline-block mt-4 text-black bg-gh-white dark:bg-gh-gray dark:text-white rounded-md p-2 text-sm font-semibold text-center select-none w-full border hover:shadow-button hover:no-underline",
         innerHTML: `<img
           class="mx-2 inline-block align-top"
           src="${chrome.runtime.getURL(logoIcon)}"
diff --git a/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedModal.ts b/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedModal.ts
index e8272d67..aed97b29 100644
--- a/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedModal.ts
+++ b/src/content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedModal.ts
@@ -17,65 +17,67 @@ export const InviteToOpenSaucedModal = (
     modalDisplayTrigger?: HTMLElement,
 ) => {
     const emailBody =
-    typeof emailAddress === "string" &&
-    `Hey ${username}. I'm using OpenSauced to keep track of my contributions and discover new projects. Try connecting your GitHub to https://opensauced.pizza/`;
+        typeof emailAddress === "string" &&
+        `Hey ${username}. I'm using OpenSauced to keep track of my contributions and discover new projects. Try connecting your GitHub to https://opensauced.pizza/`;
     const emailHref =
-    typeof emailAddress === "string" &&
-    `mailto:${emailAddress}?subject=${encodeURIComponent(
-        "Invitation to join OpenSauced!",
-    )}&body=${encodeURIComponent(emailBody)}`;
+        typeof emailAddress === "string" &&
+        `mailto:${emailAddress}?subject=${encodeURIComponent(
+            "Invitation to join OpenSauced!",
+        )}&body=${encodeURIComponent(emailBody)}`;
     const tweetHref =
-    typeof twitterUsername === "string" &&
-    `https://twitter.com/intent/tweet?text=${encodeURIComponent(
-        `Check out @saucedopen. The platform for open source contributors to find their next contribution. https://opensauced.pizza/blog/social-coding-is-back. @${twitterUsername}`,
-    )}&hashtags=opensource,github`;
+        typeof twitterUsername === "string" &&
+        `https://twitter.com/intent/tweet?text=${encodeURIComponent(
+            `Check out @saucedopen. The platform for open source contributors to find their next contribution. https://opensauced.pizza/blog/social-coding-is-back. @${twitterUsername}`,
+        )}&hashtags=opensource,github`;
     const linkedinHref =
-    typeof linkedInUsername === "string" &&
-    `https://www.linkedin.com/in/${linkedInUsername}`;
+        typeof linkedInUsername === "string" &&
+        `https://www.linkedin.com/in/${linkedInUsername}`;
 
     const emailIcon = emailBody
         ? createHtmlElement("a", {
-            href: emailHref,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            innerHTML: `<img src=${chrome.runtime.getURL(
-                emailSocialIcon,
-            )} alt="Email">`,
-        })
+              href: emailHref,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              innerHTML: `<img src=${chrome.runtime.getURL(
+                  emailSocialIcon,
+              )} alt="Email">`,
+          })
         : "";
     const twitterIcon = tweetHref
         ? createHtmlElement("a", {
-            href: tweetHref,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            innerHTML: `<img src=${chrome.runtime.getURL(
-                twitterSocialIcon,
-            )} alt="Twitter">`,
-        })
+              href: tweetHref,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              innerHTML: `<img src=${chrome.runtime.getURL(
+                  twitterSocialIcon,
+              )} alt="Twitter">`,
+          })
         : "";
     const linkedInIcon = linkedinHref
         ? createHtmlElement("a", {
-            href: linkedinHref,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            innerHTML: `<img src=${chrome.runtime.getURL(
-                linkedInSocailIcon,
-            )} alt="LinkedIn">`,
-        })
+              href: linkedinHref,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              innerHTML: `<img src=${chrome.runtime.getURL(
+                  linkedInSocailIcon,
+              )} alt="LinkedIn">`,
+          })
         : "";
 
-    const socialIcons = createHtmlElement("span", { className: "flex flex-nowrap space-x-3" });
+    const socialIcons = createHtmlElement("span", {
+        className: "flex flex-nowrap space-x-3",
+    });
 
     const inviteToOpenSaucedModal = createHtmlElement("div", {
         className:
-      "fixed h-full w-full z-50 bg-gray-600 bg-opacity-80 dark:bg-opacity-50 overflow-y-auto inset-0",
+            "fixed h-full w-full z-50 bg-gray-600 bg-opacity-80 dark:bg-opacity-50 overflow-y-auto inset-0",
         style: { display: "none" },
         id: "invite-modal",
     });
 
     const inviteToOpenSaucedModalContainer = createHtmlElement("div", {
         className:
-      "mt-2 min-w-[33%] relative top-60 mx-auto p-4 border w-96 rounded-md shadow-button border-solid border-orange bg-slate-800",
+            "mt-2 min-w-[33%] relative top-60 mx-auto p-4 border w-96 rounded-md shadow-button border-solid border-orange bg-slate-800",
         innerHTML: `
     <h3 class="text-2xl leading-6 font-bold text-white">Invite ${username} to <a href="https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/start"><span class="hover:text-orange hover:underline">OpenSauced!</span></a></h3>
     <div class="mt-2">
@@ -86,7 +88,7 @@ export const InviteToOpenSaucedModal = (
 `,
     });
 
-    inviteToOpenSaucedModal.onclick = e => {
+    inviteToOpenSaucedModal.onclick = (e) => {
         if (e.target === inviteToOpenSaucedModal) {
             inviteToOpenSaucedModal.style.display = "none";
         }
diff --git a/src/content-scripts/components/RepoQuery/RepoQuery.tsx b/src/content-scripts/components/RepoQuery/RepoQuery.tsx
index ce58da4f..1dd52c68 100644
--- a/src/content-scripts/components/RepoQuery/RepoQuery.tsx
+++ b/src/content-scripts/components/RepoQuery/RepoQuery.tsx
@@ -8,14 +8,9 @@ export const RepoQueryRoot = (ownerName: string, repoName: string) => {
 
     ReactDOM.createRoot(repoQueryRoot).render(
         <React.StrictMode>
-            <RepoQuery
-                ownerName={ownerName}
-                repoName={repoName}
-            />
+            <RepoQuery ownerName={ownerName} repoName={repoName} />
         </React.StrictMode>,
     );
 
-
     return repoQueryRoot;
 };
-
diff --git a/src/content-scripts/components/RepoVoting/RepoUnvoteButton.ts b/src/content-scripts/components/RepoVoting/RepoUnvoteButton.ts
index 2b2ac353..6bb2aff9 100644
--- a/src/content-scripts/components/RepoVoting/RepoUnvoteButton.ts
+++ b/src/content-scripts/components/RepoVoting/RepoUnvoteButton.ts
@@ -8,7 +8,7 @@ export const RepoUnvoteButton = (ownerName: string, repoName: string) => {
     const repoUnvoteButton = createHtmlElement("li", {
         id: "repo-voting-button",
         className:
-      "text-white text-center hover:shadow-button bg-gradient-to-r from-[#e67e22] to-[#d35400] btn btn-sm",
+            "text-white text-center hover:shadow-button bg-gradient-to-r from-[#e67e22] to-[#d35400] btn btn-sm",
         innerHTML: `
             <span>Unvote</span>
             <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="align-middle"><g><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-.997-6l7.07-7.071-1.414-1.414-5.656 5.657-2.829-2.829-1.414 1.414L11.003 16z"></path></g></svg>
@@ -24,7 +24,12 @@ export const RepoUnvoteButton = (ownerName: string, repoName: string) => {
     `;
         const userToken = await getAuthToken();
 
-        const unvoted = await voteOrUnvoteRepo(userToken, ownerName, repoName, "DELETE");
+        const unvoted = await voteOrUnvoteRepo(
+            userToken,
+            ownerName,
+            repoName,
+            "DELETE",
+        );
 
         if (unvoted) {
             const { VoteRepoButton } = await import("./RepoVoteButton");
@@ -42,9 +47,12 @@ export const RepoUnvoteButton = (ownerName: string, repoName: string) => {
         "#insights-dropdown-btn",
     )!;
 
-    insightsDropdownBtn.addEventListener("click", async e => {
+    insightsDropdownBtn.addEventListener("click", async (e) => {
         e.stopPropagation();
-        const insightsDropdown = await InsightsSelectDropdown(ownerName, repoName) as HTMLDivElement;
+        const insightsDropdown = (await InsightsSelectDropdown(
+            ownerName,
+            repoName,
+        )) as HTMLDivElement;
 
         repoUnvoteButton.appendChild(insightsDropdown);
         insightsDropdown.classList.toggle("hidden");
diff --git a/src/content-scripts/components/RepoVoting/RepoVoteButton.ts b/src/content-scripts/components/RepoVoting/RepoVoteButton.ts
index ceecfcd9..803ef4c1 100644
--- a/src/content-scripts/components/RepoVoting/RepoVoteButton.ts
+++ b/src/content-scripts/components/RepoVoting/RepoVoteButton.ts
@@ -8,7 +8,7 @@ export const VoteRepoButton = (ownerName: string, repoName: string) => {
     const voteRepoButton = createHtmlElement("li", {
         id: "repo-voting-button",
         className:
-      "text-white text-center hover:shadow-button bg-gradient-to-r from-[#e67e22] to-[#d35400] btn btn-sm",
+            "text-white text-center hover:shadow-button bg-gradient-to-r from-[#e67e22] to-[#d35400] btn btn-sm",
         innerHTML: `
             <span>Upvote</span>
             <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="align-middle"><g><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-.997-6l7.07-7.071-1.414-1.414-5.656 5.657-2.829-2.829-1.414 1.414L11.003 16z"></path></g></svg>
@@ -24,7 +24,12 @@ export const VoteRepoButton = (ownerName: string, repoName: string) => {
     `;
         const userToken = await getAuthToken();
 
-        const voted = await voteOrUnvoteRepo(userToken, ownerName, repoName, "PUT");
+        const voted = await voteOrUnvoteRepo(
+            userToken,
+            ownerName,
+            repoName,
+            "PUT",
+        );
 
         if (voted) {
             const { RepoUnvoteButton } = await import("./RepoUnvoteButton");
@@ -42,9 +47,12 @@ export const VoteRepoButton = (ownerName: string, repoName: string) => {
         "#insights-dropdown-btn",
     )!;
 
-    insightsDropdownBtn.addEventListener("click", async e => {
+    insightsDropdownBtn.addEventListener("click", async (e) => {
         e.stopPropagation();
-        const insightsDropdown = await InsightsSelectDropdown(ownerName, repoName) as HTMLDivElement;
+        const insightsDropdown = (await InsightsSelectDropdown(
+            ownerName,
+            repoName,
+        )) as HTMLDivElement;
 
         voteRepoButton.appendChild(insightsDropdown);
         insightsDropdown.classList.toggle("hidden");
diff --git a/src/content-scripts/components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton.ts b/src/content-scripts/components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton.ts
index 8a6c0cf2..78bde20b 100644
--- a/src/content-scripts/components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton.ts
+++ b/src/content-scripts/components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton.ts
@@ -7,7 +7,8 @@ export const ViewOnOpenSaucedButton = (username: string) => {
     const viewOnOpenSaucedButton = createHtmlElement("a", {
         id: "view-on-opensauced-button",
         href: `https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/user/${username}/contributions`,
-        className: "inline-block mb-2 text-black bg-gh-white dark:bg-gh-gray dark:text-white rounded-md p-2 text-sm font-semibold text-center select-none w-full border hover:shadow-button hover:no-underline",
+        className:
+            "inline-block mb-2 text-black bg-gh-white dark:bg-gh-gray dark:text-white rounded-md p-2 text-sm font-semibold text-center select-none w-full border hover:shadow-button hover:no-underline",
         target: "_blank",
         rel: "noopener noreferrer",
         innerHTML: `
diff --git a/src/content-scripts/content-scripts.css b/src/content-scripts/content-scripts.css
index 87822a00..33d3b7bb 100644
--- a/src/content-scripts/content-scripts.css
+++ b/src/content-scripts/content-scripts.css
@@ -7,27 +7,27 @@ not using tailwindcss base styles because it's interfering with the github page
 @tailwind utilities;
 
 * {
-  box-sizing: border-box;
-  margin: 0px;
-  padding: 0px;
+    box-sizing: border-box;
+    margin: 0px;
+    padding: 0px;
 }
 
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+        "Helvetica Neue", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+        monospace;
 }
 
 .SelectMenu-modal {
-  font-size: 12px;
-  color: var(--color-fg-default)!important;
-  line-height: 1.5!important;
-}
\ No newline at end of file
+    font-size: 12px;
+    color: var(--color-fg-default) !important;
+    line-height: 1.5 !important;
+}
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
index 9da38913..15c2b8f2 100644
--- a/src/hooks/useAuth.ts
+++ b/src/hooks/useAuth.ts
@@ -34,13 +34,16 @@ export const useAuth = () => {
                 }
                 const token = JSON.parse(decodeURIComponent(cookie.value))[0];
 
-                const response = await cachedFetch(OPEN_SAUCED_SESSION_ENDPOINT, {
-                    expireInSeconds: 2 * 60 * 60,
-                    headers: {
-                        Authorization: `Bearer ${token}`,
-                        Accept: "application/json",
+                const response = await cachedFetch(
+                    OPEN_SAUCED_SESSION_ENDPOINT,
+                    {
+                        expireInSeconds: 2 * 60 * 60,
+                        headers: {
+                            Authorization: `Bearer ${token}`,
+                            Accept: "application/json",
+                        },
                     },
-                });
+                );
 
                 if (response?.ok) {
                     const json = await response.json();
diff --git a/src/hooks/useGetGitHubPageInfo.ts b/src/hooks/useGetGitHubPageInfo.ts
index 16ed69ec..db4f4f15 100644
--- a/src/hooks/useGetGitHubPageInfo.ts
+++ b/src/hooks/useGetGitHubPageInfo.ts
@@ -1,5 +1,8 @@
 import { useEffect, useState } from "react";
-import { isGithubPullRequestPage, isGithubRepoPage } from "../utils/urlMatchers";
+import {
+    isGithubPullRequestPage,
+    isGithubRepoPage,
+} from "../utils/urlMatchers";
 import { isPublicRepository } from "../utils/fetchGithubAPIData";
 
 interface GitHubPageInfo {
@@ -9,22 +12,39 @@ interface GitHubPageInfo {
 }
 
 export const usGetGitHubPageInfo = () => {
-    const [GithubPage, setGithubPage] = useState<GitHubPageInfo>({ pageUrl: "", pageTitle: "", type: "unknown" });
+    const [GithubPage, setGithubPage] = useState<GitHubPageInfo>({
+        pageUrl: "",
+        pageTitle: "",
+        type: "unknown",
+    });
 
     useEffect(() => {
-        chrome.tabs.query({ active: true, currentWindow: true }, async tabs => {
-            if (tabs.length > 0) {
-                const tab = tabs[0];
+        chrome.tabs.query(
+            { active: true, currentWindow: true },
+            async (tabs) => {
+                if (tabs.length > 0) {
+                    const tab = tabs[0];
 
-                if (isGithubPullRequestPage(tab.url!)) {
-                    setGithubPage({ pageUrl: tab.url!, pageTitle: tab.title!.split("by")[0].trim(), type: "PR" });
-                } else if (isGithubRepoPage(tab.url!) && (await isPublicRepository(tab.url!))) {
-                    setGithubPage({ pageUrl: tab.url!, pageTitle: "", type: "REPO" });
+                    if (isGithubPullRequestPage(tab.url!)) {
+                        setGithubPage({
+                            pageUrl: tab.url!,
+                            pageTitle: tab.title!.split("by")[0].trim(),
+                            type: "PR",
+                        });
+                    } else if (
+                        isGithubRepoPage(tab.url!) &&
+                        (await isPublicRepository(tab.url!))
+                    ) {
+                        setGithubPage({
+                            pageUrl: tab.url!,
+                            pageTitle: "",
+                            type: "REPO",
+                        });
+                    }
                 }
-            }
-        });
+            },
+        );
     }, []);
 
-
     return GithubPage;
 };
diff --git a/src/hooks/useOpensaucedUserCheck.ts b/src/hooks/useOpensaucedUserCheck.ts
index 72eca17d..4143a08c 100644
--- a/src/hooks/useOpensaucedUserCheck.ts
+++ b/src/hooks/useOpensaucedUserCheck.ts
@@ -3,26 +3,31 @@ import { isOpenSaucedUser } from "../utils/fetchOpenSaucedApiData";
 import { getGithubUsername } from "../utils/urlMatchers";
 
 export const useOpensaucedUserCheck = () => {
-    const [currentTabIsOpensaucedUser, setCurrentTabIsOpensaucedUser] = useState(false);
-    const [checkedUser, setCheckedUser] = useState<string|null>(null);
+    const [currentTabIsOpensaucedUser, setCurrentTabIsOpensaucedUser] =
+        useState(false);
+    const [checkedUser, setCheckedUser] = useState<string | null>(null);
 
     useEffect(() => {
-        chrome.tabs.query({ active: true, currentWindow: true }, async tabs => {
-            if (tabs.length > 0) {
-                const tab = tabs[0];
-                const username = getGithubUsername(tab.url!);
+        chrome.tabs.query(
+            { active: true, currentWindow: true },
+            async (tabs) => {
+                if (tabs.length > 0) {
+                    const tab = tabs[0];
+                    const username = getGithubUsername(tab.url!);
 
-                if (username) {
-                    setCheckedUser(username);
-                    setCurrentTabIsOpensaucedUser(await isOpenSaucedUser(username));
-                } else {
-                    setCheckedUser(null);
-                    setCurrentTabIsOpensaucedUser(false);
+                    if (username) {
+                        setCheckedUser(username);
+                        setCurrentTabIsOpensaucedUser(
+                            await isOpenSaucedUser(username),
+                        );
+                    } else {
+                        setCheckedUser(null);
+                        setCurrentTabIsOpensaucedUser(false);
+                    }
                 }
-            }
-        });
+            },
+        );
     }, []);
 
-
     return { currentTabIsOpensaucedUser, checkedUser };
 };
diff --git a/src/popup.css b/src/popup.css
index 5cc2cc66..ba9ad13d 100644
--- a/src/popup.css
+++ b/src/popup.css
@@ -3,34 +3,34 @@
 @tailwind utilities;
 
 * {
-  box-sizing: border-box;
-  margin: 0px;
-  padding: 0px;
+    box-sizing: border-box;
+    margin: 0px;
+    padding: 0px;
 }
 
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+        "Helvetica Neue", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+        monospace;
 }
 
 :root {
-  --swiper-theme-color: hsla(19, 100%, 50%, 1);
-  --swiper-pagination-top: 5px;
-  --swiper-pagination-bullet-inactive-color: rgb(255, 159, 115);
-  --swiper-pagination-bullet-size: 6px;
-  --swiper-navigation-size: 18px;
-  --swiper-navigation-sides-offset:5px;
+    --swiper-theme-color: hsla(19, 100%, 50%, 1);
+    --swiper-pagination-top: 5px;
+    --swiper-pagination-bullet-inactive-color: rgb(255, 159, 115);
+    --swiper-pagination-bullet-size: 6px;
+    --swiper-navigation-size: 18px;
+    --swiper-navigation-sides-offset: 5px;
 }
 
-.swiper-pagination{
-  position: relative;
-}
\ No newline at end of file
+.swiper-pagination {
+    position: relative;
+}
diff --git a/src/popup/components/HighlightSlide.tsx b/src/popup/components/HighlightSlide.tsx
index f55a8764..3d528ef9 100644
--- a/src/popup/components/HighlightSlide.tsx
+++ b/src/popup/components/HighlightSlide.tsx
@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
-import { getHighlightReactions, getUserHighlightReactions, reactOnHighlight, removeReactionOnHighlight } from "../../utils/fetchOpenSaucedApiData";
+import {
+    getHighlightReactions,
+    getUserHighlightReactions,
+    reactOnHighlight,
+    removeReactionOnHighlight,
+} from "../../utils/fetchOpenSaucedApiData";
 import { getAuthToken } from "../../utils/checkAuthentication";
 
 interface HighlightSlideProps {
@@ -21,26 +26,43 @@ interface HighlightReaction {
 }
 
 export const HighlightSlide = ({ highlight, emojis }: HighlightSlideProps) => {
-    const [highlightReactions, setHighlightReactions] = useState<HighlightReaction[]>([]);
+    const [highlightReactions, setHighlightReactions] = useState<
+        HighlightReaction[]
+    >([]);
     const [reactingDivOpen, setReactingDivOpen] = useState(false);
 
-    async function fetchHighlightReactions () {
+    async function fetchHighlightReactions() {
         const highlightReactionData = await getHighlightReactions(highlight.id);
-        const userHighlightReactionData = await getUserHighlightReactions(await getAuthToken(), highlight.id);
+        const userHighlightReactionData = await getUserHighlightReactions(
+            await getAuthToken(),
+            highlight.id,
+        );
 
-        const highlightReactionsWithEmojiUrls = emojis.filter(emoji => highlightReactionData.some(highlightReaction => highlightReaction.emoji_id === emoji.id)).map(emoji => {
-            const highlightReaction = highlightReactionData.find(highlightReaction => highlightReaction.emoji_id === emoji.id)!;
+        const highlightReactionsWithEmojiUrls = emojis
+            .filter((emoji) =>
+                highlightReactionData.some(
+                    (highlightReaction) =>
+                        highlightReaction.emoji_id === emoji.id,
+                ),
+            )
+            .map((emoji) => {
+                const highlightReaction = highlightReactionData.find(
+                    (highlightReaction) =>
+                        highlightReaction.emoji_id === emoji.id,
+                )!;
 
-            const reactedByUser = userHighlightReactionData.some(userHighlightReaction => userHighlightReaction.emoji_id === emoji.id);
-
-            return {
-                url: emoji.url,
-                reaction_count: highlightReaction.reaction_count,
-                reactedByUser,
-                emojiId: emoji.id,
-            } as HighlightReaction;
-        });
+                const reactedByUser = userHighlightReactionData.some(
+                    (userHighlightReaction) =>
+                        userHighlightReaction.emoji_id === emoji.id,
+                );
 
+                return {
+                    url: emoji.url,
+                    reaction_count: highlightReaction.reaction_count,
+                    reactedByUser,
+                    emojiId: emoji.id,
+                } as HighlightReaction;
+            });
 
         setHighlightReactions(highlightReactionsWithEmojiUrls);
     }
@@ -51,18 +73,27 @@ export const HighlightSlide = ({ highlight, emojis }: HighlightSlideProps) => {
 
     const { url, title, login, highlight: highlightText } = highlight;
 
-    const openGraphSearchParameter = url.split("/").slice(3)
-        .join("/");
+    const openGraphSearchParameter = url.split("/").slice(3).join("/");
     const openGraphUrl = `https://opengraph.githubassets.com/1/${openGraphSearchParameter}`;
 
-    const addReactionToHighlight = async (highlightId: string, emojiId: string) => {
+    const addReactionToHighlight = async (
+        highlightId: string,
+        emojiId: string,
+    ) => {
         await reactOnHighlight(await getAuthToken(), highlightId, emojiId);
         setReactingDivOpen(false);
         await fetchHighlightReactions();
     };
 
-    const removeReactionFromHighlight = async (highlightId: string, emojiId: string) => {
-        await removeReactionOnHighlight(await getAuthToken(), highlightId, emojiId);
+    const removeReactionFromHighlight = async (
+        highlightId: string,
+        emojiId: string,
+    ) => {
+        await removeReactionOnHighlight(
+            await getAuthToken(),
+            highlightId,
+            emojiId,
+        );
         await fetchHighlightReactions();
     };
 
@@ -70,28 +101,25 @@ export const HighlightSlide = ({ highlight, emojis }: HighlightSlideProps) => {
         <div className="border border-white/40 rounded-md p-3 mt-2 bg-white">
             {/* fixed height, content ellipsis */}
 
-            {
-
-                title
-                    ? (
-                        <h3 className="
+            {title ? (
+                <h3
+                    className="
                     text-base font-medium
                     overflow-hidden
                     line-clamp-2
                     h-6
                     leading-5"
-                        >
-                            <a
-                                className="text-slate-800 cursor-pointer"
-                                href={url}
-                                rel="noopener noreferrer"
-                                target="_blank"
-                            >
-                                {title}
-                            </a>
-                        </h3>)
-                    : null
-            }
+                >
+                    <a
+                        className="text-slate-800 cursor-pointer"
+                        href={url}
+                        rel="noopener noreferrer"
+                        target="_blank"
+                    >
+                        {title}
+                    </a>
+                </h3>
+            ) : null}
 
             <div className="flex items-center">
                 <span className="mr-2 text-slate-500">Author:</span>
@@ -106,7 +134,8 @@ export const HighlightSlide = ({ highlight, emojis }: HighlightSlideProps) => {
                 </a>
             </div>
 
-            <p className="
+            <p
+                className="
                 py-2 text-sm text-slate-500
                 overflow-hidden
                 line-clamp-3
@@ -117,10 +146,7 @@ export const HighlightSlide = ({ highlight, emojis }: HighlightSlideProps) => {
                 {highlightText}
             </p>
 
-            <img
-                alt="OpenGraph"
-                src={openGraphUrl}
-            />
+            <img alt="OpenGraph" src={openGraphUrl} />
 
             <div className="flex gap-2 mt-2 h-6 items-center">
                 <div className="flex gap-1 items-center">
@@ -157,17 +183,23 @@ export const HighlightSlide = ({ highlight, emojis }: HighlightSlideProps) => {
                     id="reacting-div"
                     role="menu"
                 >
-                    {emojis.map(emoji => (
+                    {emojis.map((emoji) => (
                         <div
                             key={emoji.name}
                             className="p-2 text-sm hover:bg-gray-100 flex gap-2 items-center cursor-pointer"
                             role="menuitem"
                             tabIndex={-1}
                             onClick={async () => {
-                                await addReactionToHighlight(highlight.id, emoji.id);
+                                await addReactionToHighlight(
+                                    highlight.id,
+                                    emoji.id,
+                                );
                             }}
                             onKeyDown={async () => {
-                                await addReactionToHighlight(highlight.id, emoji.id);
+                                await addReactionToHighlight(
+                                    highlight.id,
+                                    emoji.id,
+                                );
                             }}
                         >
                             <img
@@ -179,49 +211,57 @@ export const HighlightSlide = ({ highlight, emojis }: HighlightSlideProps) => {
                     ))}
                 </div>
 
+                {highlightReactions.length > 0 && !reactingDivOpen
+                    ? highlightReactions.map((highlightReaction) => (
+                          <div
+                              key={highlightReaction.url}
+                              className="flex gap-1 items-center"
+                              role="button"
+                              tabIndex={0}
+                              onClick={
+                                  highlightReaction.reactedByUser
+                                      ? async () => {
+                                            await removeReactionFromHighlight(
+                                                highlight.id,
+                                                highlightReaction.emojiId,
+                                            );
+                                        }
+                                      : async () => {
+                                            await addReactionToHighlight(
+                                                highlight.id,
+                                                highlightReaction.emojiId,
+                                            );
+                                        }
+                              }
+                              onKeyDown={
+                                  highlightReaction.reactedByUser
+                                      ? async () => {
+                                            await removeReactionFromHighlight(
+                                                highlight.id,
+                                                highlightReaction.emojiId,
+                                            );
+                                        }
+                                      : async () => {
+                                            await addReactionToHighlight(
+                                                highlight.id,
+                                                highlightReaction.emojiId,
+                                            );
+                                        }
+                              }
+                          >
+                              <img
+                                  alt="Emoji"
+                                  className={`rounded-full w-6 aspect-square border border-orange p-1 ${highlightReaction.reactedByUser ? "bg-lightOrange" : ""}`}
+                                  src={highlightReaction.url}
+                              />
 
-                {
-                    highlightReactions.length > 0 && !reactingDivOpen
-                        ? (
-                            highlightReactions.map(highlightReaction => (
-                                <div
-                                    key={highlightReaction.url}
-                                    className="flex gap-1 items-center"
-                                    role="button"
-                                    tabIndex={0}
-                                    onClick={
-                                        highlightReaction.reactedByUser
-                                            ? async () => {
-                                                await removeReactionFromHighlight(highlight.id, highlightReaction.emojiId);
-                                            }
-                                            : async () => {
-                                                await addReactionToHighlight(highlight.id, highlightReaction.emojiId);
-                                            }
-                                    }
-                                    onKeyDown={
-                                        highlightReaction.reactedByUser
-                                            ? async () => {
-                                                await removeReactionFromHighlight(highlight.id, highlightReaction.emojiId);
-                                            }
-                                            : async () => {
-                                                await addReactionToHighlight(highlight.id, highlightReaction.emojiId);
-                                            }
-                                    }
-                                >
-                                    <img
-                                        alt="Emoji"
-                                        className={`rounded-full w-6 aspect-square border border-orange p-1 ${highlightReaction.reactedByUser ? "bg-lightOrange" : ""}`}
-                                        src={highlightReaction.url}
-                                    />
-
-                                    <span className="text-slate-500">
-                                        {highlightReaction.reaction_count}
-                                    </span>
-                                </div>
-                            )))
-                        : null
-                }
+                              <span className="text-slate-500">
+                                  {highlightReaction.reaction_count}
+                              </span>
+                          </div>
+                      ))
+                    : null}
             </div>
-
-        </div>);
+        </div>
+    );
 };
diff --git a/src/popup/components/ToggleSwitch.tsx b/src/popup/components/ToggleSwitch.tsx
index 731a80e9..5a5422ee 100644
--- a/src/popup/components/ToggleSwitch.tsx
+++ b/src/popup/components/ToggleSwitch.tsx
@@ -1,18 +1,32 @@
 import { useState } from "react";
 
-const Toggle = ({ settingName, settingLabel, enabledSetting }: { settingName: string; enabledSetting: boolean; settingLabel: string }) => {
+const Toggle = ({
+    settingName,
+    settingLabel,
+    enabledSetting,
+}: {
+    settingName: string;
+    enabledSetting: boolean;
+    settingLabel: string;
+}) => {
     const [enabled, setEnabled] = useState(enabledSetting);
 
     const changeSetting = async (value: boolean) => {
-        const settingsConfig = await chrome.storage.sync.get("osSettingsConfig");
+        const settingsConfig =
+            await chrome.storage.sync.get("osSettingsConfig");
 
         if (settingsConfig.osSettingsConfig === undefined) {
             const defaultSettings = { aiPrDescription: false };
 
-            await chrome.storage.sync.set({ osSettingsConfig: defaultSettings });
+            await chrome.storage.sync.set({
+                osSettingsConfig: defaultSettings,
+            });
         }
 
-        const newSettingsConfig = { ...settingsConfig.osSettingsConfig, [settingName]: value };
+        const newSettingsConfig = {
+            ...settingsConfig.osSettingsConfig,
+            [settingName]: value,
+        };
 
         await chrome.storage.sync.set({ osSettingsConfig: newSettingsConfig });
 
@@ -38,12 +52,16 @@ const Toggle = ({ settingName, settingLabel, enabledSetting }: { settingName: st
                     className="w-11 h-6 bg-gray-200 rounded-full peer  peer-focus:ring-green-300  peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"
                     role="checkbox"
                     tabIndex={0}
-                    onClick={ async () => {
-                        enabled ? await changeSetting(false) : await changeSetting(true);
+                    onClick={async () => {
+                        enabled
+                            ? await changeSetting(false)
+                            : await changeSetting(true);
                     }}
-                    onKeyDown={ async e => {
+                    onKeyDown={async (e) => {
                         if (e.key === "Enter") {
-                            enabled ? await changeSetting(false) : await changeSetting(true);
+                            enabled
+                                ? await changeSetting(false)
+                                : await changeSetting(true);
                         }
                     }}
                 />
diff --git a/src/popup/pages/aiprdescription.tsx b/src/popup/pages/aiprdescription.tsx
index 1dcc352d..d881abf7 100644
--- a/src/popup/pages/aiprdescription.tsx
+++ b/src/popup/pages/aiprdescription.tsx
@@ -15,12 +15,31 @@ import { configurationReducer } from "../../utils/ai-utils/configurationReducer"
 import { goBack } from "react-chrome-extension-router";
 
 const AIPRDescription = () => {
-    const [config, dispatch] = useReducer(configurationReducer, getDefaultDescriptionConfig());
+    const [config, dispatch] = useReducer(
+        configurationReducer,
+        getDefaultDescriptionConfig(),
+    );
 
-    const tones: DescriptionTone[] = ["exciting", "persuasive", "informative", "humorous", "formal"];
+    const tones: DescriptionTone[] = [
+        "exciting",
+        "persuasive",
+        "informative",
+        "humorous",
+        "formal",
+    ];
     const sources: DescriptionSource[] = ["diff", "commitMessage", "both"];
-    const languages: DescriptionLanguage[] = ["english", "spanish", "french", "german", "italian", "portuguese", "dutch", "russian", "chinese", "korean"];
-
+    const languages: DescriptionLanguage[] = [
+        "english",
+        "spanish",
+        "french",
+        "german",
+        "italian",
+        "portuguese",
+        "dutch",
+        "russian",
+        "chinese",
+        "korean",
+    ];
 
     useEffect(() => {
         const descriptionConfig = async () => {
@@ -39,7 +58,6 @@ const AIPRDescription = () => {
     };
 
     return (
-
         <>
             <Toaster />
 
@@ -65,22 +83,17 @@ const AIPRDescription = () => {
                     </header>
 
                     <main className="text-white">
-                        <form
-                            onSubmit={handleFormSubmit}
-                        >
+                        <form onSubmit={handleFormSubmit}>
                             <fieldset>
                                 <h3 className="text font-medium text-base leading-10">
-                AI Configuration:
+                                    AI Configuration:
                                 </h3>
 
                                 <div className="grid grid-cols-2 -mx-4 mb-4 text-gray-300 text-sm">
                                     <div className="flex flex-col items-center justify-center">
                                         <p>
-                    Description Length [
-                                            <b>
-                                                {config.config.length}
-                                            </b>
-                    ]
+                                            Description Length [
+                                            <b>{config.config.length}</b>]
                                         </p>
 
                                         <input
@@ -91,17 +104,24 @@ const AIPRDescription = () => {
                                             name="length"
                                             type="range"
                                             value={config.config.length}
-                                            onChange={e => dispatch({ type: "SET_LENGTH", value: parseInt(e.target.value) })}
+                                            onChange={(e) =>
+                                                dispatch({
+                                                    type: "SET_LENGTH",
+                                                    value: parseInt(
+                                                        e.target.value,
+                                                    ),
+                                                })
+                                            }
                                         />
                                     </div>
 
                                     <div className="flex flex-col items-center justify-center">
                                         <p>
-                    Temperature [
+                                            Temperature [
                                             <b>
                                                 {config.config.temperature / 10}
                                             </b>
-                    ]
+                                            ]
                                         </p>
 
                                         <input
@@ -112,17 +132,24 @@ const AIPRDescription = () => {
                                             name="length"
                                             type="range"
                                             value={config.config.temperature}
-                                            onChange={e => dispatch({ type: "SET_TEMPERATURE", value: parseInt(e.target.value) })}
+                                            onChange={(e) =>
+                                                dispatch({
+                                                    type: "SET_TEMPERATURE",
+                                                    value: parseInt(
+                                                        e.target.value,
+                                                    ),
+                                                })
+                                            }
                                         />
                                     </div>
 
                                     <div className="flex flex-col items-center justify-center">
                                         <p>
-                    Max Input Length [
+                                            Max Input Length [
                                             <b>
                                                 {config.config.maxInputLength}
                                             </b>
-                    ]
+                                            ]
                                         </p>
 
                                         <input
@@ -133,7 +160,14 @@ const AIPRDescription = () => {
                                             name="inputlength"
                                             type="range"
                                             value={config.config.maxInputLength}
-                                            onChange={e => dispatch({ type: "SET_MAX_INPUT_LENGTH", value: parseInt(e.target.value) })}
+                                            onChange={(e) =>
+                                                dispatch({
+                                                    type: "SET_MAX_INPUT_LENGTH",
+                                                    value: parseInt(
+                                                        e.target.value,
+                                                    ),
+                                                })
+                                            }
                                         />
                                     </div>
 
@@ -145,14 +179,22 @@ const AIPRDescription = () => {
                                             id="descriptionlanguage"
                                             name="descriptionlanguage"
                                             value={config.config.language}
-                                            onChange={e => dispatch({ type: "SET_LANGUAGE", value: e.target.value })}
+                                            onChange={(e) =>
+                                                dispatch({
+                                                    type: "SET_LANGUAGE",
+                                                    value: e.target.value,
+                                                })
+                                            }
                                         >
-                                            {languages.map(language => (
+                                            {languages.map((language) => (
                                                 <option
                                                     key={language}
                                                     value={language}
                                                 >
-                                                    {language.charAt(0).toUpperCase() + language.slice(1)}
+                                                    {language
+                                                        .charAt(0)
+                                                        .toUpperCase() +
+                                                        language.slice(1)}
                                                 </option>
                                             ))}
                                         </select>
@@ -166,14 +208,19 @@ const AIPRDescription = () => {
                                             id="tone"
                                             name="tone"
                                             value={config.config.tone}
-                                            onChange={e => dispatch({ type: "SET_TONE", value: e.target.value })}
+                                            onChange={(e) =>
+                                                dispatch({
+                                                    type: "SET_TONE",
+                                                    value: e.target.value,
+                                                })
+                                            }
                                         >
-                                            {tones.map(tone => (
-                                                <option
-                                                    key={tone}
-                                                    value={tone}
-                                                >
-                                                    {tone.charAt(0).toUpperCase() + tone.slice(1)}
+                                            {tones.map((tone) => (
+                                                <option key={tone} value={tone}>
+                                                    {tone
+                                                        .charAt(0)
+                                                        .toUpperCase() +
+                                                        tone.slice(1)}
                                                 </option>
                                             ))}
                                         </select>
@@ -187,14 +234,22 @@ const AIPRDescription = () => {
                                             id="source"
                                             name="source"
                                             value={config.config.source}
-                                            onChange={e => dispatch({ type: "SET_SOURCE", value: e.target.value })}
+                                            onChange={(e) =>
+                                                dispatch({
+                                                    type: "SET_SOURCE",
+                                                    value: e.target.value,
+                                                })
+                                            }
                                         >
-                                            {sources.map(source => (
+                                            {sources.map((source) => (
                                                 <option
                                                     key={source}
                                                     value={source}
                                                 >
-                                                    {source.charAt(0).toUpperCase() + source.slice(1)}
+                                                    {source
+                                                        .charAt(0)
+                                                        .toUpperCase() +
+                                                        source.slice(1)}
                                                 </option>
                                             ))}
                                         </select>
diff --git a/src/popup/pages/help.tsx b/src/popup/pages/help.tsx
index 0aa99025..86b89748 100644
--- a/src/popup/pages/help.tsx
+++ b/src/popup/pages/help.tsx
@@ -28,7 +28,6 @@ const Help = () => (
                         className="w-[100%]"
                         src={OpenSaucedLogo}
                     />
-
                 </div>
 
                 <div className="flex justify-center flex-col">
@@ -40,14 +39,13 @@ const Help = () => (
                         {version}
                     </a>
                 </div>
-
             </header>
 
             <main className="main-content text-white">
                 <h3 className="text font-medium text-base leading-10">Help:</h3>
 
                 <div className="tools flex flex-col gap-2">
-                    {EXTERNAL_RESOURCES.map(externalLink => (
+                    {EXTERNAL_RESOURCES.map((externalLink) => (
                         <a
                             key={externalLink.key}
                             className="flex items-center bg-slate-700 hover:bg-slate-700/70 text-white hover:text-orange no-underline gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
@@ -55,7 +53,9 @@ const Help = () => (
                             rel="noreferrer"
                             target="_blank"
                         >
-                            {externalLink.key === "Docs" && <HiOutlineBookOpen />}
+                            {externalLink.key === "Docs" && (
+                                <HiOutlineBookOpen />
+                            )}
 
                             {externalLink.key === "Issues" && <VscIssues />}
 
diff --git a/src/popup/pages/home.tsx b/src/popup/pages/home.tsx
index e85bcc1e..ee20db1a 100644
--- a/src/popup/pages/home.tsx
+++ b/src/popup/pages/home.tsx
@@ -15,7 +15,11 @@ import { useOpensaucedUserCheck } from "../../hooks/useOpensaucedUserCheck";
 import { Profile } from "./profile";
 import { goTo } from "react-chrome-extension-router";
 import PostOnHighlight from "./posthighlight";
-import { getEmojis, getHighlights, getRepoOpenSaucedURL } from "../../utils/fetchOpenSaucedApiData";
+import {
+    getEmojis,
+    getHighlights,
+    getRepoOpenSaucedURL,
+} from "../../utils/fetchOpenSaucedApiData";
 import Help from "./help";
 import { useEffect, useState, useRef } from "react";
 import Settings from "./settings";
@@ -24,9 +28,12 @@ import { MessageType, type Highlight, type Message } from "../../ts/types";
 import { usGetGitHubPageInfo } from "../../hooks/useGetGitHubPageInfo";
 import { HighlightSlide } from "../components/HighlightSlide";
 
-const Home = ({ forceRefresh }: { forceRefresh: boolean } = { forceRefresh: false }) => {
+const Home = (
+    { forceRefresh }: { forceRefresh: boolean } = { forceRefresh: false },
+) => {
     const { user } = useAuth();
-    const { currentTabIsOpensaucedUser, checkedUser } = useOpensaucedUserCheck();
+    const { currentTabIsOpensaucedUser, checkedUser } =
+        useOpensaucedUserCheck();
     const { pageUrl, pageTitle, type: GitHubPageType } = usGetGitHubPageInfo();
     const [repoOpenSaucedURL, setRepoOpenSaucedURL] = useState<string>("");
     const [highlights, setHighlights] = useState<Highlight[]>([]);
@@ -94,16 +101,21 @@ const Home = ({ forceRefresh }: { forceRefresh: boolean } = { forceRefresh: fals
                         role="presentation"
                         src={OpenSaucedLogo}
                         onClick={() => {
-                            window.open(`https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/feed`, "_blank");
+                            window.open(
+                                `https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/feed`,
+                                "_blank",
+                            );
                         }}
-                        onKeyDown={e => {
+                        onKeyDown={(e) => {
                             if (e.key === "Enter") {
-                                window.open(`https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/feed`, "_blank");
+                                window.open(
+                                    `https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/feed`,
+                                    "_blank",
+                                );
                             }
                         }}
                     />
 
-
                     {user && (
                         <button
                             className="flex gap-1 items-center hover:text-orange text-white no-underline"
@@ -141,26 +153,24 @@ const Home = ({ forceRefresh }: { forceRefresh: boolean } = { forceRefresh: fals
                             slidesPerView={1}
                             spaceBetween={50}
                         >
-                            {
-                                highlights.map((highlight, index) => (
-                                    <SwiperSlide key={index}>
-                                        <HighlightSlide
-                                            emojis={emojis}
-                                            highlight={highlight}
-                                        />
-                                    </SwiperSlide>
-                                ))
-                            }
+                            {highlights.map((highlight, index) => (
+                                <SwiperSlide key={index}>
+                                    <HighlightSlide
+                                        emojis={emojis}
+                                        highlight={highlight}
+                                    />
+                                </SwiperSlide>
+                            ))}
                         </Swiper>
                     )}
 
-                    {Boolean(toolsRef.current?.children.length) && <h3 className="text font-medium text-base leading-10">Tools:</h3>}
-
-                    <div
-                        ref={toolsRef}
-                        className="tools flex flex-col gap-2"
-                    >
+                    {Boolean(toolsRef.current?.children.length) && (
+                        <h3 className="text font-medium text-base leading-10">
+                            Tools:
+                        </h3>
+                    )}
 
+                    <div ref={toolsRef} className="tools flex flex-col gap-2">
                         {GitHubPageType === "REPO" && (
                             <>
                                 <button
@@ -171,26 +181,26 @@ const Home = ({ forceRefresh }: { forceRefresh: boolean } = { forceRefresh: fals
                                             data: { url: pageUrl },
                                         };
 
-                                        void chrome.runtime.sendMessage(message);
+                                        void chrome.runtime.sendMessage(
+                                            message,
+                                        );
                                     }}
                                 >
                                     <IoLogoLinkedin />
-                                Add to LinkedIn Projects.
+                                    Add to LinkedIn Projects.
                                 </button>
 
-                                {
-                                    repoOpenSaucedURL && (
-                                        <a
-                                            className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
-                                            href={repoOpenSaucedURL}
-                                            rel="noreferrer"
-                                            target="_blank"
-                                        >
-                                            <FiExternalLink />
-                                            View On OpenSauced
-                                        </a>
-                                    )
-                                }
+                                {repoOpenSaucedURL && (
+                                    <a
+                                        className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
+                                        href={repoOpenSaucedURL}
+                                        rel="noreferrer"
+                                        target="_blank"
+                                    >
+                                        <FiExternalLink />
+                                        View On OpenSauced
+                                    </a>
+                                )}
                             </>
                         )}
 
@@ -198,18 +208,16 @@ const Home = ({ forceRefresh }: { forceRefresh: boolean } = { forceRefresh: fals
                             <button
                                 className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
                                 onClick={() => {
-                                    goTo(
-                                        PostOnHighlight,
-                                        {
-                                            prUrl: pageUrl,
-                                            prTitle: pageTitle,
-                                        },
-                                    );
+                                    goTo(PostOnHighlight, {
+                                        prUrl: pageUrl,
+                                        prTitle: pageTitle,
+                                    });
                                 }}
                             >
                                 <HiPencil />
                                 Post Highlight
-                            </button>)}
+                            </button>
+                        )}
 
                         {currentTabIsOpensaucedUser && (
                             <button
@@ -219,11 +227,7 @@ const Home = ({ forceRefresh }: { forceRefresh: boolean } = { forceRefresh: fals
                                 }}
                             >
                                 <HiUserCircle />
-                                View
-
-                                {" "}
-
-                                {checkedUser}
+                                View {checkedUser}
                                 &apos;s profile
                             </button>
                         )}
diff --git a/src/popup/pages/posthighlight.tsx b/src/popup/pages/posthighlight.tsx
index 0498ff7e..8ff73d47 100644
--- a/src/popup/pages/posthighlight.tsx
+++ b/src/popup/pages/posthighlight.tsx
@@ -9,7 +9,13 @@ import { OPEN_SAUCED_INSIGHTS_DOMAIN } from "../../constants";
 import { getAiDescription } from "../../content-scripts/components/GenerateAIDescription/DescriptionGeneratorButton";
 import Home from "./home";
 
-const PostOnHighlight = ({ prUrl, prTitle }: { prUrl: string, prTitle: string }) => {
+const PostOnHighlight = ({
+    prUrl,
+    prTitle,
+}: {
+    prUrl: string;
+    prTitle: string;
+}) => {
     const { authToken, user } = useAuth();
     const [pageURL, setPageURL] = useState("");
     const [highlightTitle, setHighlightTitle] = useState("");
@@ -20,52 +26,60 @@ const PostOnHighlight = ({ prUrl, prTitle }: { prUrl: string, prTitle: string })
         enableSendButton(false);
         const description = getAiDescription(prUrl);
 
-        toast.promise(description, {
-            loading: "Generating summary...",
-            success: data => {
-                enableSendButton(true);
-                setHighlightContent(data);
-
-                return "Successfully Generated Summary";
-            },
-            error: e => {
-                enableSendButton(true);
-                return `Uh oh, there was an error! ${e.message}`;
-            },
-        }).catch(console.error);
+        toast
+            .promise(description, {
+                loading: "Generating summary...",
+                success: (data) => {
+                    enableSendButton(true);
+                    setHighlightContent(data);
+
+                    return "Successfully Generated Summary";
+                },
+                error: (e) => {
+                    enableSendButton(true);
+                    return `Uh oh, there was an error! ${e.message}`;
+                },
+            })
+            .catch(console.error);
     };
 
-
     // post highlight function
     const postHighlight = () => {
         enableSendButton(false);
-        const postHighlightAPI = createHighlight((authToken ?? ""), pageURL, highlightTitle, highlightContent);
-
-        toast.promise(postHighlightAPI, {
-            loading: "Loading ...",
-            success: data => {
-                enableSendButton(true);
-                if (!data.ok) {
-                    throw new Error(`Status code ${data.status}`);
-                }
-                goTo(Home, { forceRefresh: true });
-                return (
-                    <span>
-                        <a
-                            href={`https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/user/${user?.user_name}/highlights`}
-                            rel="noreferrer"
-                            target="_blank"
-                        >
-                            See the highlight live
-                        </a>
-                    </span>
-                );
-            },
-            error: e => {
-                enableSendButton(true);
-                return `Uh oh, there was an error! ${e.message}`;
-            },
-        }).catch(console.error);
+        const postHighlightAPI = createHighlight(
+            authToken ?? "",
+            pageURL,
+            highlightTitle,
+            highlightContent,
+        );
+
+        toast
+            .promise(postHighlightAPI, {
+                loading: "Loading ...",
+                success: (data) => {
+                    enableSendButton(true);
+                    if (!data.ok) {
+                        throw new Error(`Status code ${data.status}`);
+                    }
+                    goTo(Home, { forceRefresh: true });
+                    return (
+                        <span>
+                            <a
+                                href={`https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/user/${user?.user_name}/highlights`}
+                                rel="noreferrer"
+                                target="_blank"
+                            >
+                                See the highlight live
+                            </a>
+                        </span>
+                    );
+                },
+                error: (e) => {
+                    enableSendButton(true);
+                    return `Uh oh, there was an error! ${e.message}`;
+                },
+            })
+            .catch(console.error);
     };
 
     useEffect(() => {
@@ -78,7 +92,6 @@ const PostOnHighlight = ({ prUrl, prTitle }: { prUrl: string, prTitle: string })
             <Toaster />
 
             <div className="grid grid-cols-1 divide-y divider-y-center-2 min-w-[320px]">
-
                 <header className="flex justify-between">
                     <div className="flex items-center gap-2">
                         <button
@@ -99,14 +112,13 @@ const PostOnHighlight = ({ prUrl, prTitle }: { prUrl: string, prTitle: string })
                 </header>
 
                 <main className="text-white">
-
                     <input
                         className="p-1.5 rounded-md mb-2 w-full text-black"
                         maxLength={50}
                         placeholder="An amazing title here"
                         type="text"
                         value={highlightTitle}
-                        onChange={e => setHighlightTitle(e.target.value)}
+                        onChange={(e) => setHighlightTitle(e.target.value)}
                     />
 
                     <textarea
@@ -114,7 +126,7 @@ const PostOnHighlight = ({ prUrl, prTitle }: { prUrl: string, prTitle: string })
                         placeholder="Summarize this pull request"
                         rows={5}
                         value={highlightContent}
-                        onChange={e => setHighlightContent(e.target.value)}
+                        onChange={(e) => setHighlightContent(e.target.value)}
                     />
 
                     <div className="flex justify-evenly">
diff --git a/src/popup/pages/profile.tsx b/src/popup/pages/profile.tsx
index 2c0a80e7..8d22a224 100644
--- a/src/popup/pages/profile.tsx
+++ b/src/popup/pages/profile.tsx
@@ -1,10 +1,26 @@
 import { useEffect, useState } from "react";
 import { FaBrain, FaChevronLeft, FaRobot } from "react-icons/fa";
 import { RiLinkedinFill, RiLinkM, RiTwitterFill } from "react-icons/ri";
-import { SiC, SiCplusplus, SiCsharp, SiGoland, SiJavascript, SiPhp, SiPython, SiReact, SiRuby, SiRust, SiTypescript } from "react-icons/si";
+import {
+    SiC,
+    SiCplusplus,
+    SiCsharp,
+    SiGoland,
+    SiJavascript,
+    SiPhp,
+    SiPython,
+    SiReact,
+    SiRuby,
+    SiRust,
+    SiTypescript,
+} from "react-icons/si";
 import { DiJava } from "react-icons/di";
 import OpenSaucedLogo from "../../assets/opensauced-logo.svg";
-import { getUserData, getUserPRData, getUserHighlightsData } from "../../utils/fetchOpenSaucedApiData";
+import {
+    getUserData,
+    getUserPRData,
+    getUserHighlightsData,
+} from "../../utils/fetchOpenSaucedApiData";
 import { emojify } from "node-emoji";
 import { goBack, goTo } from "react-chrome-extension-router";
 import { getRelativeDays } from "../../utils/dateUtils";
@@ -35,14 +51,31 @@ const interestIcon = {
 type InterestIconKeys = keyof typeof interestIcon;
 
 export const Profile = ({ username }: { username: string }) => {
-    const [user, setUser] = useState<null | { id: string, user_name: string, bio: string, created_at: string, linkedin_url: string, twitter_username: string, blog: string, interests: string, open_issues: number }>(null);
+    const [user, setUser] = useState<null | {
+        id: string;
+        user_name: string;
+        bio: string;
+        created_at: string;
+        linkedin_url: string;
+        twitter_username: string;
+        blog: string;
+        interests: string;
+        open_issues: number;
+    }>(null);
     const [userPR, setUserPR] = useState<PRResponse | null>(null);
-    const [userHighlights, setUserHighlights] = useState<null | { meta: { itemCount: number } }>(null);
+    const [userHighlights, setUserHighlights] = useState<null | {
+        meta: { itemCount: number };
+    }>(null);
     const [userPRVelocity, setUserPRVelocity] = useState<number>(0);
 
     useEffect(() => {
         const fetchUserData = async () => {
-            const [userData, userPRData, userHighlightsData] = await Promise.all([getUserData(username), getUserPRData(username), getUserHighlightsData(username)]);
+            const [userData, userPRData, userHighlightsData] =
+                await Promise.all([
+                    getUserData(username),
+                    getUserPRData(username),
+                    getUserHighlightsData(username),
+                ]);
 
             setUser(userData);
             setUserPR(userPRData);
@@ -53,7 +86,6 @@ export const Profile = ({ username }: { username: string }) => {
         void fetchUserData();
     }, []);
 
-
     return (
         <div className="p-4 bg-slate-800">
             <div className="grid grid-cols-1 divide-y divider-y-center-2 min-w-[320px] text-white">
@@ -101,15 +133,12 @@ export const Profile = ({ username }: { username: string }) => {
                                 src={`https://github.com/${username}.png`}
                             />
 
-                            <p className="font-medium">
-                                @
-                                {username}
-                            </p>
+                            <p className="font-medium">@{username}</p>
                         </a>
 
-                        {(user?.linkedin_url || user?.twitter_username) &&
+                        {(user?.linkedin_url || user?.twitter_username) && (
                             <div className="social flex gap-0.5">
-                                {user.linkedin_url &&
+                                {user.linkedin_url && (
                                     <a
                                         className="rounded-sm border bg-slate-700 hover:bg-slate-700/50 hover:text-cyan-400 p-1"
                                         href={user.linkedin_url}
@@ -118,9 +147,10 @@ export const Profile = ({ username }: { username: string }) => {
                                         title={user.linkedin_url}
                                     >
                                         <RiLinkedinFill className="text-lg" />
-                                    </a>}
+                                    </a>
+                                )}
 
-                                {user.twitter_username &&
+                                {user.twitter_username && (
                                     <a
                                         className="rounded-sm border bg-slate-700 hover:bg-slate-700/50 hover:text-cyan-400 p-1"
                                         href={`https://twitter.com/${user.twitter_username}`}
@@ -129,16 +159,14 @@ export const Profile = ({ username }: { username: string }) => {
                                         title={`https://twitter.com/${user.twitter_username}`}
                                     >
                                         <RiTwitterFill className="text-lg" />
-                                    </a>}
-                            </div>}
-
-                        {user?.bio && (
-                            <span>
-                                {emojify(user.bio)}
-                            </span>
+                                    </a>
+                                )}
+                            </div>
                         )}
 
-                        {user?.blog &&
+                        {user?.bio && <span>{emojify(user.bio)}</span>}
+
+                        {user?.blog && (
                             <a
                                 className="flex text-orange items-center gap-0.5"
                                 href={user.blog}
@@ -148,7 +176,8 @@ export const Profile = ({ username }: { username: string }) => {
                                 <RiLinkM />
 
                                 {user.blog}
-                            </a>}
+                            </a>
+                        )}
                     </div>
 
                     <div className="grid grid-cols-2 text-white bg-osOrange -mx-4 mb-4 p-4 py-8">
@@ -186,13 +215,15 @@ export const Profile = ({ username }: { username: string }) => {
                     </div>
 
                     <div>
-                        <h2 className="font-medium text-lg mb-2">Current Interest</h2>
+                        <h2 className="font-medium text-lg mb-2">
+                            Current Interest
+                        </h2>
 
                         <div
                             className="flex gap-1.5"
                             style={{ flexWrap: "wrap" }}
                         >
-                            {user?.interests.split(",").map(interest => (
+                            {user?.interests.split(",").map((interest) => (
                                 <a
                                     key={interest}
                                     className="flex gap-1 items-center p-1.5 px-4 rounded-full bg-slate-700 hover:bg-slate-700/50"
diff --git a/src/popup/pages/settings.tsx b/src/popup/pages/settings.tsx
index 8d6606d7..0bc1ce41 100644
--- a/src/popup/pages/settings.tsx
+++ b/src/popup/pages/settings.tsx
@@ -14,12 +14,18 @@ const Settings = () => {
 
     useEffect(() => {
         const getSettingsDataFromStorage = async () => {
-            const settingsConfig = await chrome.storage.sync.get("osSettingsConfig");
+            const settingsConfig =
+                await chrome.storage.sync.get("osSettingsConfig");
 
             if (settingsConfig.osSettingsConfig === undefined) {
-                const defaultSettings = { aiPrDescription: true, codeRefactor: true };
+                const defaultSettings = {
+                    aiPrDescription: true,
+                    codeRefactor: true,
+                };
 
-                await chrome.storage.sync.set({ osSettingsConfig: defaultSettings });
+                await chrome.storage.sync.set({
+                    osSettingsConfig: defaultSettings,
+                });
                 setSettingsConfig(defaultSettings);
             } else {
                 setSettingsConfig(settingsConfig.osSettingsConfig);
@@ -34,21 +40,19 @@ const Settings = () => {
             <AIPRDescription />
 
             <div className="grid grid-cols-1 divide-y divide-white/40 divider-y-center-2 min-w-[320px] text-white">
-
                 <main className="main-content text-white">
-                    <h3 className="text font-medium text-base leading-10">Extension Settings:</h3>
-
-                    {
-                        Object.keys(settingsConfig).map(settingName => (
-                            <Toggle
-                                key={settingName}
-                                enabledSetting={settingsConfig[settingName]!}
-                                settingLabel={settingLabels[settingName]}
-                                settingName={settingName}
-                            />
-                        ))
-
-                    }
+                    <h3 className="text font-medium text-base leading-10">
+                        Extension Settings:
+                    </h3>
+
+                    {Object.keys(settingsConfig).map((settingName) => (
+                        <Toggle
+                            key={settingName}
+                            enabledSetting={settingsConfig[settingName]!}
+                            settingLabel={settingLabels[settingName]}
+                            settingName={settingName}
+                        />
+                    ))}
 
                     <div className="flex flex-col gap-2" />
                 </main>
diff --git a/src/popup/pages/start.tsx b/src/popup/pages/start.tsx
index 16cac954..fe0aa7eb 100644
--- a/src/popup/pages/start.tsx
+++ b/src/popup/pages/start.tsx
@@ -3,24 +3,17 @@ import { optLogIn } from "../../utils/checkAuthentication";
 
 const Start = () => (
     <div className="p-4 bg-slate-800">
-        <img
-            alt="Open Sauced Logo"
-            src={OpenSaucedLogo}
-        />
+        <img alt="Open Sauced Logo" src={OpenSaucedLogo} />
 
         <p className="my-4 text-base font-bold text-white leading-5">
-        Welcome to the
-            {" "}
-
+            Welcome to the{" "}
             <a
                 className="text-orange no-underline"
                 href="https://opensauced.pizza/"
             >
-          OpenSauced
-            </a>
-
-            {" "}
-        browser extension.
+                OpenSauced
+            </a>{" "}
+            browser extension.
         </p>
 
         <button
@@ -28,7 +21,7 @@ const Start = () => (
           bg-gradient-to-r from-[#e67e22] to-[#d35400]"
             onClick={optLogIn}
         >
-        Login
+            Login
         </button>
     </div>
 );
diff --git a/src/repo-query/components/ChatCircle.tsx b/src/repo-query/components/ChatCircle.tsx
index cd8d7e7c..47c550e6 100644
--- a/src/repo-query/components/ChatCircle.tsx
+++ b/src/repo-query/components/ChatCircle.tsx
@@ -3,13 +3,11 @@ import openSaucedLogoIcon from "../../assets/open-sauced-orange-bg-logo.svg";
 export const ChatCircle = ({ toggleDialog }: { toggleDialog: () => void }) => (
     <button
         onClick={toggleDialog}
-        onKeyDown={
-            e => {
-                if (e.key === "Enter") {
-                    toggleDialog();
-                }
+        onKeyDown={(e) => {
+            if (e.key === "Enter") {
+                toggleDialog();
             }
-        }
+        }}
     >
         <img
             alt="Open Sauced Logo"
diff --git a/src/repo-query/components/Dialog.tsx b/src/repo-query/components/Dialog.tsx
index 42725839..22beb6d0 100644
--- a/src/repo-query/components/Dialog.tsx
+++ b/src/repo-query/components/Dialog.tsx
@@ -5,7 +5,17 @@ import { IndexingPage } from "../pages/indexing";
 import { Chat } from "../pages/chat";
 import { RepoQueryPages } from "../../ts/types";
 
-export const Dialog = ({ isOpen, toggleDialog, ownerName, repoName }: { isOpen: boolean, toggleDialog: () => void, ownerName: string, repoName: string }) => {
+export const Dialog = ({
+    isOpen,
+    toggleDialog,
+    ownerName,
+    repoName,
+}: {
+    isOpen: boolean;
+    toggleDialog: () => void;
+    ownerName: string;
+    repoName: string;
+}) => {
     const [currentPage, setCurrentPage] = useState(RepoQueryPages.Home);
 
     return (
@@ -33,22 +43,19 @@ export const Dialog = ({ isOpen, toggleDialog, ownerName, repoName }: { isOpen:
                             src={`${chrome.runtime.getURL(openSaucedLogoIcon)}`}
                         />
 
-                        <div
-                            className="ml-4"
-                            id="chat-dialog-header-left-text"
-                        >
+                        <div className="ml-4" id="chat-dialog-header-left-text">
                             <div
                                 className="text-lg font-bold text-white"
                                 id="chat-dialog-header-left-text-title"
                             >
-OpenSauced
+                                OpenSauced
                             </div>
 
                             <div
                                 className="text-sm text-gray-400"
                                 id="chat-dialog-header-left-text-subtitle"
                             >
-RepoQuery
+                                RepoQuery
                             </div>
                         </div>
                     </div>
@@ -59,13 +66,11 @@ RepoQuery
                         role="button"
                         tabIndex={0}
                         onClick={toggleDialog}
-                        onKeyDown={
-                            e => {
-                                if (e.key === "Enter") {
-                                    toggleDialog();
-                                }
+                        onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                                toggleDialog();
                             }
-                        }
+                        }}
                     >
                         <svg
                             className="w-4 h-4 text-gray-500"
@@ -89,34 +94,22 @@ RepoQuery
                 className="flex flex-col w-96 h-96 rounded-bl-xl rounded-br-lg bg-white shadow-lg"
                 id="chat-dialog-body"
             >
-                {
-                    currentPage === RepoQueryPages.Home
-                        ? (
-                            <Home
-                                ownerName={ownerName}
-                                repoName={repoName}
-                                setCurrentPage={setCurrentPage}
-                            />
-                        )
-                        : currentPage === RepoQueryPages.Indexing
-                            ? (
-                                <IndexingPage
-                                    ownerName={ownerName}
-                                    repoName={repoName}
-                                    setCurrentPage={setCurrentPage}
-                                />
-                            )
-
-                            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                            : currentPage === RepoQueryPages.Chat
-                                ? (
-                                    <Chat
-                                        ownerName={ownerName}
-                                        repoName={repoName}
-                                    />
-                                )
-                                : null
-                }
+                {currentPage === RepoQueryPages.Home ? (
+                    <Home
+                        ownerName={ownerName}
+                        repoName={repoName}
+                        setCurrentPage={setCurrentPage}
+                    />
+                ) : currentPage === RepoQueryPages.Indexing ? (
+                    <IndexingPage
+                        ownerName={ownerName}
+                        repoName={repoName}
+                        setCurrentPage={setCurrentPage}
+                    />
+                ) : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                currentPage === RepoQueryPages.Chat ? (
+                    <Chat ownerName={ownerName} repoName={repoName} />
+                ) : null}
             </div>
         </div>
     );
diff --git a/src/repo-query/pages/chat.tsx b/src/repo-query/pages/chat.tsx
index 7717bc45..f505e0cb 100644
--- a/src/repo-query/pages/chat.tsx
+++ b/src/repo-query/pages/chat.tsx
@@ -9,7 +9,13 @@ interface ChatMessage {
     isUser: boolean;
 }
 
-export const Chat = ({ ownerName, repoName }: { ownerName: string, repoName: string }) => {
+export const Chat = ({
+    ownerName,
+    repoName,
+}: {
+    ownerName: string;
+    repoName: string;
+}) => {
     // chat ui with bubbles and input
     const [chatHistory, setChatHistory] = useState<ChatMessage[]>([]);
     const [sendEnabled, setSendEnabled] = useState(true);
@@ -18,11 +24,14 @@ export const Chat = ({ ownerName, repoName }: { ownerName: string, repoName: str
 
     const processChunk = (chunk: string) => {
         const chunkLines = chunk.split("\n");
-        const indexOfEvent = chunkLines.findIndex(e => e.includes("event: "));
-        const [eventLine, dataLine] = [chunkLines[indexOfEvent], chunkLines[indexOfEvent + 1]];
+        const indexOfEvent = chunkLines.findIndex((e) => e.includes("event: "));
+        const [eventLine, dataLine] = [
+            chunkLines[indexOfEvent],
+            chunkLines[indexOfEvent + 1],
+        ];
 
         const event = eventLine.split(": ")[1];
-        let data:any;
+        let data: any;
 
         try {
             data = JSON.parse(dataLine.split(": ")[1]);
@@ -30,7 +39,9 @@ export const Chat = ({ ownerName, repoName }: { ownerName: string, repoName: str
             console.error("The recieved data line", dataLine);
 
             // remove quotes from string
-            data = dataLine.split("data: ")[1].substring(1, dataLine.split("data: ")[1].length - 2);
+            data = dataLine
+                .split("data: ")[1]
+                .substring(1, dataLine.split("data: ")[1].length - 2);
         }
 
         switch (event) {
@@ -41,7 +52,9 @@ export const Chat = ({ ownerName, repoName }: { ownerName: string, repoName: str
                 setStatusMessage(`Searching ${data.path} for your query...🔍`);
                 break;
             case "SEARCH_PATH":
-                setStatusMessage(`Looking for ${data.path} in the codebase...🔍`);
+                setStatusMessage(
+                    `Looking for ${data.path} in the codebase...🔍`,
+                );
                 break;
             case "GENERATE_RESPONSE":
                 setStatusMessage("Generating a response...🧠");
@@ -50,20 +63,26 @@ export const Chat = ({ ownerName, repoName }: { ownerName: string, repoName: str
                 setBotThinking(false);
                 setSendEnabled(true);
 
-                setChatHistory(prevChatHistory => [...prevChatHistory, {
-                    message: data,
-                    isUser: false,
-                }]);
+                setChatHistory((prevChatHistory) => [
+                    ...prevChatHistory,
+                    {
+                        message: data,
+                        isUser: false,
+                    },
+                ]);
                 break;
             case "ERROR":
                 setBotThinking(false);
                 setSendEnabled(true);
                 console.error(data);
 
-                setChatHistory(prevChatHistory => [...prevChatHistory, {
-                    message: "Something went wrong. Please try again.",
-                    isUser: false,
-                }]);
+                setChatHistory((prevChatHistory) => [
+                    ...prevChatHistory,
+                    {
+                        message: "Something went wrong. Please try again.",
+                        isUser: false,
+                    },
+                ]);
                 break;
             default:
                 break;
@@ -73,21 +92,18 @@ export const Chat = ({ ownerName, repoName }: { ownerName: string, repoName: str
     const askQuery = async (query: string) => {
         setBotThinking(true);
         setSendEnabled(false);
-        const response = await fetch(
-            `${REPO_QUERY_QUERY_ENDPOINT}`,
-            {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    query,
-                    repository: {
-                        owner: ownerName,
-                        name: repoName,
-                        branch: "HEAD",
-                    },
-                }),
-            },
-        );
+        const response = await fetch(`${REPO_QUERY_QUERY_ENDPOINT}`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                query,
+                repository: {
+                    owner: ownerName,
+                    name: repoName,
+                    branch: "HEAD",
+                },
+            }),
+        });
 
         const reader = response.body?.getReader();
 
@@ -111,7 +127,6 @@ export const Chat = ({ ownerName, repoName }: { ownerName: string, repoName: str
         }
     };
 
-
     useEffect(() => {
         setChatHistory([
             {
@@ -121,10 +136,13 @@ export const Chat = ({ ownerName, repoName }: { ownerName: string, repoName: str
         ]);
     }, []);
 
-    const suggestedQuestions = ["What's the tech stack for this project?", "How do I run this locally?", "List some functions with side effects."];
+    const suggestedQuestions = [
+        "What's the tech stack for this project?",
+        "How do I run this locally?",
+        "List some functions with side effects.",
+    ];
 
     return (
-
         <div
             className="flex flex-col justify-between items-center w-full h-full"
             id="chat-dialog-body"
@@ -140,102 +158,123 @@ export const Chat = ({ ownerName, repoName }: { ownerName: string, repoName: str
                     >
                         <div
                             key={index}
-                            className={`flex flex-col justify-start items-start h-auto p-4 rounded-xl m-2 max-w-xs ${chatMessage.isUser ? "bg-slate-800 self-end" : "bg-slate-700 self-start"}`}
+                            className={`flex flex-col justify-start items-start h-auto p-4 rounded-xl m-2 max-w-xs ${
+                                chatMessage.isUser
+                                    ? "bg-slate-800 self-end"
+                                    : "bg-slate-700 self-start"
+                            }`}
                             id="chat-bubble"
                         >
                             <div
-                                className={`text-sm text-gray-300 w-full ${chatMessage.isUser ? "text-right" : "text-left"}`}
+                                className={`text-sm text-gray-300 w-full ${
+                                    chatMessage.isUser
+                                        ? "text-right"
+                                        : "text-left"
+                                }`}
                                 id="chat-bubble-message"
                             >
                                 {/* this might contain markdown if its from the bot*/}
-                                {chatMessage.isUser
-                                    ? chatMessage.message
-                                    : (
-                                        <ReactMarkdown components={{
-                                            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                                            code ({ node, inline, className, children, ...props }) {
-                                                const match = (/language-(\w+)/).exec(className ?? "");
-
-                                                return !inline && match
-                                                    ? (
-                                                        <SyntaxHighlighter
-                                                            PreTag="div"
-                                                            language={match[1]}
-                                                            {...props}
-                                                            style={darcula}
-                                                        >
-                                                            {String(children).replace(/\n$/, "")}
-                                                        </SyntaxHighlighter>
-                                                    )
-                                                    : (
-                                                        <code
-                                                            className={className}
-                                                            {...props}
-                                                        >
-                                                            {children}
-                                                        </code>
+                                {chatMessage.isUser ? (
+                                    chatMessage.message
+                                ) : (
+                                    <ReactMarkdown
+                                        components={{
+                                            code({
+                                                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                                                node,
+                                                inline,
+                                                className,
+                                                children,
+                                                ...props
+                                            }) {
+                                                const match =
+                                                    /language-(\w+)/.exec(
+                                                        className ?? "",
                                                     );
+
+                                                return !inline && match ? (
+                                                    <SyntaxHighlighter
+                                                        PreTag="div"
+                                                        language={match[1]}
+                                                        {...props}
+                                                        style={darcula}
+                                                    >
+                                                        {String(
+                                                            children,
+                                                        ).replace(/\n$/, "")}
+                                                    </SyntaxHighlighter>
+                                                ) : (
+                                                    <code
+                                                        className={className}
+                                                        {...props}
+                                                    >
+                                                        {children}
+                                                    </code>
+                                                );
                                             },
                                         }}
-                                        >
-                                            {chatMessage.message}
-                                        </ReactMarkdown>
-                                    )}
+                                    >
+                                        {chatMessage.message}
+                                    </ReactMarkdown>
+                                )}
                             </div>
                         </div>
 
                         {!chatMessage.isUser &&
-                            index === chatHistory.length - 1 &&
-                        (
-
-                            <div
-                                className="flex flex-col justify-start items-start w-full pl-4"
-                                id="chat-dialog-body-chat-history-chat-bubble"
-                            >
-                                <p
-                                    className="text-md text-gray-600 w-full text-left mb-2"
-                                    id="chat-dialog-body-chat-history-chat-bubble-message"
-                                >
-                                    Here&apos;s some example questions you can ask:
-                                </p>
-
+                            index === chatHistory.length - 1 && (
                                 <div
-                                    className="flex flex-col justify-start items-start w-full"
-                                    id="question-suggestions"
+                                    className="flex flex-col justify-start items-start w-full pl-4"
+                                    id="chat-dialog-body-chat-history-chat-bubble"
                                 >
-                                    {
-                                        suggestedQuestions.map((question, index) => (
-                                            <button
-                                                key={index}
-                                                className="h-auto p-2 rounded-xl mb-2 inline-block bg-gradient-to-r from-[#e67e22] to-[#d35400] border-none"
-                                                id="question-suggestion"
-                                                onClick={
-                                                    async () => {
-                                                        setChatHistory([...chatHistory, {
-                                                            message: question,
-                                                            isUser: true,
-                                                        }]);
-
-                                                        await askQuery(question);
-                                                    }
-                                                }
-                                            >
-                                                <div
-                                                    className="text-sm text-white w-full text-left"
-                                                    id="question-suggestion-message"
+                                    <p
+                                        className="text-md text-gray-600 w-full text-left mb-2"
+                                        id="chat-dialog-body-chat-history-chat-bubble-message"
+                                    >
+                                        Here&apos;s some example questions you
+                                        can ask:
+                                    </p>
+
+                                    <div
+                                        className="flex flex-col justify-start items-start w-full"
+                                        id="question-suggestions"
+                                    >
+                                        {suggestedQuestions.map(
+                                            (question, index) => (
+                                                <button
+                                                    key={index}
+                                                    className="h-auto p-2 rounded-xl mb-2 inline-block bg-gradient-to-r from-[#e67e22] to-[#d35400] border-none"
+                                                    id="question-suggestion"
+                                                    onClick={async () => {
+                                                        setChatHistory([
+                                                            ...chatHistory,
+                                                            {
+                                                                message:
+                                                                    question,
+                                                                isUser: true,
+                                                            },
+                                                        ]);
+
+                                                        await askQuery(
+                                                            question,
+                                                        );
+                                                    }}
                                                 >
-                                                    {question}
-                                                </div>
-                                            </button>
-                                        ))
-                                    }
+                                                    <div
+                                                        className="text-sm text-white w-full text-left"
+                                                        id="question-suggestion-message"
+                                                    >
+                                                        {question}
+                                                    </div>
+                                                </button>
+                                            ),
+                                        )}
+                                    </div>
                                 </div>
-                            </div>
-                        )}
+                            )}
                     </div>
                 ))}
 
-                { botThinking && (
+                {botThinking && (
                     <div
                         className="flex flex-row justify-start items-start h-auto p-4 rounded-xl m-2 inline-block max-w-xs bg-slate-700 self-start"
                         id="chat-dialog-body-chat-history-chat-bubble"
@@ -244,9 +283,7 @@ export const Chat = ({ ownerName, repoName }: { ownerName: string, repoName: str
                             className="text-sm text-gray-400 w-full text-left"
                             id="chat-dialog-body-chat-history-chat-bubble-message"
                         >
-                            <i>
-                                {statusMessage}
-                            </i>
+                            <i>{statusMessage}</i>
 
                             <div className="flex flex-row items-center mt-2">
                                 <div className="w-2 h-2 bg-gray-400 rounded-full mr-1 animate-bounce" />
@@ -254,11 +291,10 @@ export const Chat = ({ ownerName, repoName }: { ownerName: string, repoName: str
                                 <div className="w-2 h-2 bg-gray-400 rounded-full mr-1 animate-[bounce_1s_infinite_250ms_reverse]" />
 
                                 <div className="w-2 h-2 bg-gray-400 rounded-full animate-[bounce_1s_infinite_500ms]" />
-
                             </div>
                         </div>
                     </div>
-                ) }
+                )}
             </div>
 
             <div
@@ -269,52 +305,57 @@ export const Chat = ({ ownerName, repoName }: { ownerName: string, repoName: str
                     className="w-5/6 h-10 rounded-xl bg-slate-700 text-white text-sm px-4 mr-2 border-none focus:outline-none"
                     id="chat-dialog-body-input-text"
                     placeholder="Ask a question"
-                    onKeyDown={
-                        async event => {
-                            if (sendEnabled && event.key === "Enter") {
-                                const input = document.getElementById("chat-dialog-body-input-text") as HTMLInputElement;
-                                const query = input.value;
-
-                                if (query) {
-                                    setChatHistory([...chatHistory, {
+                    onKeyDown={async (event) => {
+                        if (sendEnabled && event.key === "Enter") {
+                            const input = document.getElementById(
+                                "chat-dialog-body-input-text",
+                            ) as HTMLInputElement;
+                            const query = input.value;
+
+                            if (query) {
+                                setChatHistory([
+                                    ...chatHistory,
+                                    {
                                         message: query,
                                         isUser: true,
-                                    }]);
+                                    },
+                                ]);
 
-                                    input.value = "";
+                                input.value = "";
 
-                                    await askQuery(query);
-                                }
+                                await askQuery(query);
                             }
                         }
-                    }
+                    }}
                 />
 
                 <button
                     className="w-1/6 h-10 rounded-xl bg-orange text-white text-sm border-none disabled:opacity-50 focus:outline-none disabled:cursor-not-allowed"
                     disabled={!sendEnabled}
                     id="chat-dialog-body-input-submit"
-                    onClick={
-                        async () => {
-                            const input = document.getElementById("chat-dialog-body-input-text") as HTMLInputElement;
-                            const query = input.value;
-
-                            if (query) {
-                                setChatHistory([...chatHistory, {
+                    onClick={async () => {
+                        const input = document.getElementById(
+                            "chat-dialog-body-input-text",
+                        ) as HTMLInputElement;
+                        const query = input.value;
+
+                        if (query) {
+                            setChatHistory([
+                                ...chatHistory,
+                                {
                                     message: query,
                                     isUser: true,
-                                }]);
+                                },
+                            ]);
 
-                                input.value = "";
+                            input.value = "";
 
-                                await askQuery(query);
-                            }
+                            await askQuery(query);
                         }
-                    }
+                    }}
                 >
                     Send
                 </button>
-
             </div>
         </div>
     );
diff --git a/src/repo-query/pages/home.tsx b/src/repo-query/pages/home.tsx
index 32b07247..5dda57ca 100644
--- a/src/repo-query/pages/home.tsx
+++ b/src/repo-query/pages/home.tsx
@@ -1,6 +1,14 @@
 import { RepoQueryPages } from "../../ts/types";
 
-export const Home = ({ ownerName, repoName, setCurrentPage }: { ownerName: string, repoName: string, setCurrentPage: (page: RepoQueryPages) => void }) => (
+export const Home = ({
+    ownerName,
+    repoName,
+    setCurrentPage,
+}: {
+    ownerName: string;
+    repoName: string;
+    setCurrentPage: (page: RepoQueryPages) => void;
+}) => (
     <div
         className="flex flex-col justify-center items-center w-full h-full"
         id="chat-dialog-body-start-conversation"
@@ -8,20 +16,12 @@ export const Home = ({ ownerName, repoName, setCurrentPage }: { ownerName: strin
         <div className="text-2xl font-bold text-slate-700">RepoQuery</div>
 
         <p className="text-sm text-gray-500 w-5/6 text-center mt-4">
-With RepoQuery, you can ask questions about
-            {" "}
-
-            {ownerName}
-/
-
-            {repoName}
-
-            {" "}
-
-and get answers with the help of AI.
+            With RepoQuery, you can ask questions about {ownerName}/{repoName}{" "}
+            and get answers with the help of AI.
             <br />
-For RepoQuery to work on a repository, it needs to be indexed by
-                us first. Click below to check if this repository is indexed and start the conversation!
+            For RepoQuery to work on a repository, it needs to be indexed by us
+            first. Click below to check if this repository is indexed and start
+            the conversation!
         </p>
 
         <button
@@ -32,7 +32,7 @@ For RepoQuery to work on a repository, it needs to be indexed by
                 setCurrentPage(RepoQueryPages.Indexing);
             }}
         >
-                    Start the conversation
+            Start the conversation
         </button>
     </div>
 );
diff --git a/src/repo-query/pages/indexing.tsx b/src/repo-query/pages/indexing.tsx
index e53e96ed..7ed02627 100644
--- a/src/repo-query/pages/indexing.tsx
+++ b/src/repo-query/pages/indexing.tsx
@@ -1,9 +1,22 @@
 import { useEffect, useState } from "react";
 import { RepoQueryPages } from "../../ts/types";
-import { REPO_QUERY_COLLECTION_ENDPOINT, REPO_QUERY_EMBED_ENDPOINT } from "../../constants";
-
-export const IndexingPage = ({ ownerName, repoName, setCurrentPage }: { ownerName: string, repoName: string, setCurrentPage: (page: RepoQueryPages) => void }) => {
-    const [statusMessage, setStatusMessage] = useState("We are checking if this repository is indexed. This may take a while.");
+import {
+    REPO_QUERY_COLLECTION_ENDPOINT,
+    REPO_QUERY_EMBED_ENDPOINT,
+} from "../../constants";
+
+export const IndexingPage = ({
+    ownerName,
+    repoName,
+    setCurrentPage,
+}: {
+    ownerName: string;
+    repoName: string;
+    setCurrentPage: (page: RepoQueryPages) => void;
+}) => {
+    const [statusMessage, setStatusMessage] = useState(
+        "We are checking if this repository is indexed. This may take a while.",
+    );
 
     useEffect(() => {
         const processChunk = (chunk: string) => {
@@ -20,25 +33,28 @@ export const IndexingPage = ({ ownerName, repoName, setCurrentPage }: { ownerNam
                     setStatusMessage("Embedding Repository...");
                     break;
                 case "SAVE_EMBEDDINGS":
-                    setStatusMessage("Saving the embeddings to our database...");
+                    setStatusMessage(
+                        "Saving the embeddings to our database...",
+                    );
                     break;
                 case "ERROR":
-                    setStatusMessage("There was an error while indexing this repository. Redirecting to the Home Page.");
-                    setTimeout(
-                        () => {
-                            setCurrentPage(RepoQueryPages.Home);
-                        }
-                        , 3000,
+                    setStatusMessage(
+                        "There was an error while indexing this repository. Redirecting to the Home Page.",
                     );
+                    setTimeout(() => {
+                        setCurrentPage(RepoQueryPages.Home);
+                    }, 3000);
                     break;
                 case "DONE":
-                    setStatusMessage("Indexing Complete. Redirecting to the Chat Dialog.");
+                    setStatusMessage(
+                        "Indexing Complete. Redirecting to the Chat Dialog.",
+                    );
                     setTimeout(
                         () => {
                             setCurrentPage(RepoQueryPages.Chat);
-                        }
+                        },
 
-                        , 1000,
+                        1000,
                     );
                     break;
                 default:
@@ -46,11 +62,15 @@ export const IndexingPage = ({ ownerName, repoName, setCurrentPage }: { ownerNam
             }
         };
 
-        async function checkIndexingStatus () {
-            const response = await fetch(`${REPO_QUERY_COLLECTION_ENDPOINT}?owner=${ownerName}&name=${repoName}&branch=HEAD`);
+        async function checkIndexingStatus() {
+            const response = await fetch(
+                `${REPO_QUERY_COLLECTION_ENDPOINT}?owner=${ownerName}&name=${repoName}&branch=HEAD`,
+            );
 
             if (response.status !== 200) {
-                setStatusMessage("This repository is not indexed. We are indexing it now. This may take a while.");
+                setStatusMessage(
+                    "This repository is not indexed. We are indexing it now. This may take a while.",
+                );
                 const embedResponse = await fetch(
                     `${REPO_QUERY_EMBED_ENDPOINT}`,
                     {
@@ -65,24 +85,22 @@ export const IndexingPage = ({ ownerName, repoName, setCurrentPage }: { ownerNam
                 );
 
                 if (embedResponse.status === 403) {
-                    setStatusMessage("This repository's license does not allow us to index it. Redirecting to the Home Page.");
-                    setTimeout(
-                        () => {
-                            setCurrentPage(RepoQueryPages.Home);
-                        }
-                        , 3000,
+                    setStatusMessage(
+                        "This repository's license does not allow us to index it. Redirecting to the Home Page.",
                     );
+                    setTimeout(() => {
+                        setCurrentPage(RepoQueryPages.Home);
+                    }, 3000);
                     return;
                 }
 
                 if (embedResponse.status !== 200) {
-                    setStatusMessage("There was an error while indexing this repository. Redirecting to the Home Page.");
-                    setTimeout(
-                        () => {
-                            setCurrentPage(RepoQueryPages.Home);
-                        }
-                        , 3000,
+                    setStatusMessage(
+                        "There was an error while indexing this repository. Redirecting to the Home Page.",
                     );
+                    setTimeout(() => {
+                        setCurrentPage(RepoQueryPages.Home);
+                    }, 3000);
                     return;
                 }
 
@@ -107,7 +125,9 @@ export const IndexingPage = ({ ownerName, repoName, setCurrentPage }: { ownerNam
                     }
                 }
             } else {
-                setStatusMessage("This repository is already indexed! Redirecting to the Chat Dialog.");
+                setStatusMessage(
+                    "This repository is already indexed! Redirecting to the Chat Dialog.",
+                );
                 setTimeout(() => {
                     setCurrentPage(RepoQueryPages.Chat);
                 }, 1000);
@@ -117,7 +137,6 @@ export const IndexingPage = ({ ownerName, repoName, setCurrentPage }: { ownerNam
         void checkIndexingStatus();
     }, []);
 
-
     return (
         <div
             className="flex flex-col justify-center items-center w-full h-full"
diff --git a/src/repo-query/pages/main.tsx b/src/repo-query/pages/main.tsx
index fa8e412b..d752e47d 100644
--- a/src/repo-query/pages/main.tsx
+++ b/src/repo-query/pages/main.tsx
@@ -3,7 +3,13 @@ import { ChatCircle } from "../components/ChatCircle";
 import { Dialog } from "../components/Dialog";
 import "./styles/dialog.css";
 
-export const RepoQuery = ( { ownerName, repoName }: { ownerName: string, repoName: string }) => {
+export const RepoQuery = ({
+    ownerName,
+    repoName,
+}: {
+    ownerName: string;
+    repoName: string;
+}) => {
     const [isOpen, setIsOpen] = useState(false);
 
     const toggleDialog = () => {
diff --git a/src/repo-query/pages/styles/dialog.css b/src/repo-query/pages/styles/dialog.css
index 86181de5..0159f25a 100644
--- a/src/repo-query/pages/styles/dialog.css
+++ b/src/repo-query/pages/styles/dialog.css
@@ -1,23 +1,23 @@
 #chat-dialog-body-chat-history::-webkit-scrollbar {
-  width: 8px;
+    width: 8px;
 }
-#chat-dialog-body-chat-history::-webkit-scrollbar-track{
+#chat-dialog-body-chat-history::-webkit-scrollbar-track {
     background: #f1f1f1;
 }
-#chat-dialog-body-chat-history::-webkit-scrollbar-thumb{
-    background: #EE6C28;
+#chat-dialog-body-chat-history::-webkit-scrollbar-thumb {
+    background: #ee6c28;
     border-radius: 4px;
 }
-#chat-bubble-message pre{
+#chat-bubble-message pre {
     /* allow horizontal scrolling for code */
     overflow: auto;
 }
 #chat-bubble-message pre::-webkit-scrollbar {
-  width: 2px;
+    width: 2px;
 }
-#chat-bubble-message pre::-webkit-scrollbar-track{
+#chat-bubble-message pre::-webkit-scrollbar-track {
     background: #f1f1f1;
 }
-#chat-bubble-message pre::-webkit-scrollbar-thumb{
-    background: #EE6C28;
+#chat-bubble-message pre::-webkit-scrollbar-thumb {
+    background: #ee6c28;
 }
diff --git a/src/utils/ai-utils/configurationReducer.ts b/src/utils/ai-utils/configurationReducer.ts
index 872b4a3c..e8e71a28 100644
--- a/src/utils/ai-utils/configurationReducer.ts
+++ b/src/utils/ai-utils/configurationReducer.ts
@@ -1,6 +1,12 @@
-import { DescriptionConfig, getDefaultDescriptionConfig } from "./descriptionconfig";
+import {
+    DescriptionConfig,
+    getDefaultDescriptionConfig,
+} from "./descriptionconfig";
 
-export const configurationReducer = (state: DescriptionConfig, action: { type: string, value: any }) => {
+export const configurationReducer = (
+    state: DescriptionConfig,
+    action: { type: string; value: any },
+) => {
     let newState: DescriptionConfig = { ...state };
 
     switch (action.type) {
diff --git a/src/utils/ai-utils/cursorPositionInsert.ts b/src/utils/ai-utils/cursorPositionInsert.ts
index 688db207..659628b9 100644
--- a/src/utils/ai-utils/cursorPositionInsert.ts
+++ b/src/utils/ai-utils/cursorPositionInsert.ts
@@ -1,13 +1,25 @@
 // This function is used to insert text at the cursor position in the text area
-export const insertTextAtCursor = (textArea: HTMLTextAreaElement, text: string) => {
+export const insertTextAtCursor = (
+    textArea: HTMLTextAreaElement,
+    text: string,
+) => {
     let length = 0;
 
     textArea.focus();
     const typewriter = setInterval(() => {
-        textArea.setRangeText(text[length++], textArea.selectionStart, textArea.selectionEnd, "end");
+        textArea.setRangeText(
+            text[length++],
+            textArea.selectionStart,
+            textArea.selectionEnd,
+            "end",
+        );
         if (length >= text.length) {
             clearInterval(typewriter);
-            textArea.ownerDocument.execCommand("insertText", false, "\n\n_Generated using [OpenSauced](https://opensauced.ai/)_");
+            textArea.ownerDocument.execCommand(
+                "insertText",
+                false,
+                "\n\n_Generated using [OpenSauced](https://opensauced.ai/)_",
+            );
             textArea.blur();
         }
     }, 10);
diff --git a/src/utils/ai-utils/descriptionconfig.ts b/src/utils/ai-utils/descriptionconfig.ts
index bfb9c2a9..af9536ac 100644
--- a/src/utils/ai-utils/descriptionconfig.ts
+++ b/src/utils/ai-utils/descriptionconfig.ts
@@ -1,18 +1,23 @@
 import { AI_PR_DESCRIPTION_CONFIG_KEY } from "../../constants";
 
-export type DescriptionTone = "exciting" | "persuasive" | "informative" | "humorous" | "formal";
+export type DescriptionTone =
+    | "exciting"
+    | "persuasive"
+    | "informative"
+    | "humorous"
+    | "formal";
 export type DescriptionSource = "diff" | "commitMessage" | "both";
 export type DescriptionLanguage =
-  | "english"
-  | "spanish"
-  | "french"
-  | "german"
-  | "italian"
-  | "portuguese"
-  | "dutch"
-  | "russian"
-  | "chinese"
-  | "korean";
+    | "english"
+    | "spanish"
+    | "french"
+    | "german"
+    | "italian"
+    | "portuguese"
+    | "dutch"
+    | "russian"
+    | "chinese"
+    | "korean";
 
 export interface DescriptionConfig {
     config: {
@@ -27,7 +32,7 @@ export interface DescriptionConfig {
 }
 
 export const getAIDescriptionConfig = async (): Promise<
-DescriptionConfig | undefined
+    DescriptionConfig | undefined
 > => {
     const response: DescriptionConfig | undefined = (
         await chrome.storage.local.get(AI_PR_DESCRIPTION_CONFIG_KEY)
@@ -36,7 +41,9 @@ DescriptionConfig | undefined
     return response;
 };
 
-export const setAIDescriptionConfig = async (data: DescriptionConfig): Promise<void> => {
+export const setAIDescriptionConfig = async (
+    data: DescriptionConfig,
+): Promise<void> => {
     await chrome.storage.local.set({ [AI_PR_DESCRIPTION_CONFIG_KEY]: data });
 };
 
diff --git a/src/utils/cache.ts b/src/utils/cache.ts
index b7934bca..3f72d486 100644
--- a/src/utils/cache.ts
+++ b/src/utils/cache.ts
@@ -1,9 +1,9 @@
 export const cachedFetch = async (
     url: string,
     options:
-    | number
-    | (RequestInit & { expireInSeconds?: number; forceRefresh?: boolean })
-    | undefined,
+        | number
+        | (RequestInit & { expireInSeconds?: number; forceRefresh?: boolean })
+        | undefined,
 ) => {
     let expiry = 5 * 60;
 
@@ -16,7 +16,9 @@ export const cachedFetch = async (
 
     const cacheKey = url;
     const cached = (await chrome.storage.local.get(cacheKey))[cacheKey];
-    const whenCached = (await chrome.storage.local.get(`${cacheKey}:ts`))[`${cacheKey}:ts`];
+    const whenCached = (await chrome.storage.local.get(`${cacheKey}:ts`))[
+        `${cacheKey}:ts`
+    ];
 
     if (cached && whenCached !== null && !options?.forceRefresh) {
         const age = (Date.now() - parseInt(whenCached)) / 1000;
@@ -30,18 +32,21 @@ export const cachedFetch = async (
         void chrome.storage.local.remove(`${cacheKey}:ts`);
     }
 
-    return fetch(url, options).then(async response => {
-        if (response.status === 200) {
-            const ct = response.headers.get("Content-Type");
+    return fetch(url, options)
+        .then(async (response) => {
+            if (response.status === 200) {
+                const ct = response.headers.get("Content-Type");
 
-            if (ct?.match(/(application\/json|text\/.*)/i)) {
-                const content = await response.clone().text();
+                if (ct?.match(/(application\/json|text\/.*)/i)) {
+                    const content = await response.clone().text();
 
-                void chrome.storage.local.set({ [cacheKey]: content });
-                void chrome.storage.local.set({ [`${cacheKey}:ts`]: Date.now() });
+                    void chrome.storage.local.set({ [cacheKey]: content });
+                    void chrome.storage.local.set({
+                        [`${cacheKey}:ts`]: Date.now(),
+                    });
+                }
             }
-        }
-        return response;
-    })
+            return response;
+        })
         .catch(console.error);
 };
diff --git a/src/utils/checkAuthentication.ts b/src/utils/checkAuthentication.ts
index 87ed0466..5c626289 100644
--- a/src/utils/checkAuthentication.ts
+++ b/src/utils/checkAuthentication.ts
@@ -1,12 +1,19 @@
 import {
     OPEN_SAUCED_AUTH_TOKEN_KEY,
     OPEN_SAUCED_INSIGHTS_DOMAIN,
-    OPEN_SAUCED_OPTED_LOG_OUT_KEY, SUPABASE_LOGIN_URL, SUPABASE_PKCE_VERIFIER_COOKIE_NAME,
+    OPEN_SAUCED_OPTED_LOG_OUT_KEY,
+    SUPABASE_LOGIN_URL,
+    SUPABASE_PKCE_VERIFIER_COOKIE_NAME,
 } from "../constants";
 
-export const isLoggedIn = async (): Promise<boolean> => Object.entries(await chrome.storage.sync.get(OPEN_SAUCED_AUTH_TOKEN_KEY)).length !== 0;
+export const isLoggedIn = async (): Promise<boolean> =>
+    Object.entries(await chrome.storage.sync.get(OPEN_SAUCED_AUTH_TOKEN_KEY))
+        .length !== 0;
 
-export const getAuthToken = async (): Promise<string> => (await chrome.storage.sync.get(OPEN_SAUCED_AUTH_TOKEN_KEY))[OPEN_SAUCED_AUTH_TOKEN_KEY];
+export const getAuthToken = async (): Promise<string> =>
+    (await chrome.storage.sync.get(OPEN_SAUCED_AUTH_TOKEN_KEY))[
+        OPEN_SAUCED_AUTH_TOKEN_KEY
+    ];
 
 export const optLogOut = () => {
     void removeAuthTokenFromStorage();
@@ -44,13 +51,17 @@ export const optLogIn = async () => {
     window.open(loginURL, "_blank");
 };
 
-export const hasOptedLogOut = async (): Promise<boolean> => (await chrome.storage.local.get(OPEN_SAUCED_OPTED_LOG_OUT_KEY))[OPEN_SAUCED_OPTED_LOG_OUT_KEY] === true;
+export const hasOptedLogOut = async (): Promise<boolean> =>
+    (await chrome.storage.local.get(OPEN_SAUCED_OPTED_LOG_OUT_KEY))[
+        OPEN_SAUCED_OPTED_LOG_OUT_KEY
+    ] === true;
 
-export const removeAuthTokenFromStorage = async (): Promise<void> => chrome.storage.sync.remove(OPEN_SAUCED_AUTH_TOKEN_KEY);
+export const removeAuthTokenFromStorage = async (): Promise<void> =>
+    chrome.storage.sync.remove(OPEN_SAUCED_AUTH_TOKEN_KEY);
 
 // Custom browser only PKCE implementation based on https://github.com/supabase/gotrue-js
 
-const dec2hex = (dec: number) => (`0${dec.toString(16)}`).substring(-2);
+const dec2hex = (dec: number) => `0${dec.toString(16)}`.substring(-2);
 
 const generatePKCEVerifier = () => {
     const verifierLength = 56;
@@ -61,19 +72,18 @@ const generatePKCEVerifier = () => {
 };
 
 const sha256 = async (randomString: string) => {
-    const encoder = (new TextEncoder);
+    const encoder = new TextEncoder();
     const encodedData = encoder.encode(randomString);
     const hash = await window.crypto.subtle.digest("SHA-256", encodedData);
     const bytes = new Uint8Array(hash);
 
     return Array.from(bytes)
-        .map(c => String.fromCharCode(c))
+        .map((c) => String.fromCharCode(c))
         .join("");
 };
 
-const base64urlencode = (str: string) => btoa(str).replace(/\+/g, "-")
-    .replace(/\//g, "_")
-    .replace(/[=]+$/, "");
+const base64urlencode = (str: string) =>
+    btoa(str).replace(/\+/g, "-").replace(/\//g, "_").replace(/[=]+$/, "");
 
 const generatePKCEChallenge = async (verifier: string) => {
     const hashed = await sha256(verifier);
diff --git a/src/utils/createHtmlElement.ts b/src/utils/createHtmlElement.ts
index c2581c9e..bdb373a0 100644
--- a/src/utils/createHtmlElement.ts
+++ b/src/utils/createHtmlElement.ts
@@ -7,12 +7,15 @@ interface ElementProps {
 
 type CssDeclaration = keyof Omit<CSSStyleDeclaration, "length" | "parentRule">;
 
-export function createHtmlElement<T extends keyof HTMLElementTagNameMap> (
+export function createHtmlElement<T extends keyof HTMLElementTagNameMap>(
     nodeName: T,
     props: ElementProps = {},
 ) {
     const { style, ...nonStyleProps } = props;
-    const element = Object.assign(document.createElement(nodeName), nonStyleProps);
+    const element = Object.assign(
+        document.createElement(nodeName),
+        nonStyleProps,
+    );
 
     if (style !== undefined) {
         Object.entries(style).forEach(([key, value]) => {
diff --git a/src/utils/dom-utils/addChatDialog.ts b/src/utils/dom-utils/addChatDialog.ts
index 8d5ebb24..3e33da4d 100644
--- a/src/utils/dom-utils/addChatDialog.ts
+++ b/src/utils/dom-utils/addChatDialog.ts
@@ -5,7 +5,11 @@ import { isPublicRepository } from "../fetchGithubAPIData";
 const injectChatDialog = async (ownerName: string, repoName: string) => {
     const chatDialog = RepoQueryRoot(ownerName, repoName);
 
-    if (document.getElementById("repo-query-root") || !(await isLoggedIn()) || !(await isPublicRepository(window.location.href))) {
+    if (
+        document.getElementById("repo-query-root") ||
+        !(await isLoggedIn()) ||
+        !(await isPublicRepository(window.location.href))
+    ) {
         return;
     }
 
diff --git a/src/utils/dom-utils/addDescriptionGenerator.ts b/src/utils/dom-utils/addDescriptionGenerator.ts
index 22534a46..14634e08 100644
--- a/src/utils/dom-utils/addDescriptionGenerator.ts
+++ b/src/utils/dom-utils/addDescriptionGenerator.ts
@@ -3,12 +3,15 @@ import { isPublicRepository } from "../fetchGithubAPIData";
 import { SettingsConfig } from "../../popup/pages/settings";
 
 const injectDescriptionGeneratorButton = async () => {
-    if (document.getElementById("ai-description-button") || !(await isPublicRepository(window.location.href))) {
+    if (
+        document.getElementById("ai-description-button") ||
+        !(await isPublicRepository(window.location.href))
+    ) {
         return;
     }
 
-    const settingsConfig = await new Promise(resolve => {
-        chrome.storage.sync.get("osSettingsConfig", result => {
+    const settingsConfig = await new Promise((resolve) => {
+        chrome.storage.sync.get("osSettingsConfig", (result) => {
             resolve(result.osSettingsConfig);
         });
     });
@@ -21,7 +24,9 @@ const injectDescriptionGeneratorButton = async () => {
         }
     }
 
-    const firstPrDescription = document.querySelectorAll(".ActionBar-item-container");
+    const firstPrDescription = document.querySelectorAll(
+        ".ActionBar-item-container",
+    );
 
     firstPrDescription.forEach((item, index) => {
         if (!item.querySelector(`#ai-description-button-${index}`)) {
diff --git a/src/utils/dom-utils/addPRToHighlights.ts b/src/utils/dom-utils/addPRToHighlights.ts
index 26709de7..40c3bd4f 100644
--- a/src/utils/dom-utils/addPRToHighlights.ts
+++ b/src/utils/dom-utils/addPRToHighlights.ts
@@ -4,7 +4,11 @@ import { isLoggedIn } from "../checkAuthentication";
 import { isPublicRepository } from "../fetchGithubAPIData";
 
 const injectAddPRToHighlightsButton = async () => {
-    if (document.getElementById("add-pr-to-highlights-button") || !(await isLoggedIn()) || !(await isPublicRepository(window.location.href))) {
+    if (
+        document.getElementById("add-pr-to-highlights-button") ||
+        !(await isLoggedIn()) ||
+        !(await isPublicRepository(window.location.href))
+    ) {
         return;
     }
 
diff --git a/src/utils/dom-utils/changeSuggestorButton.ts b/src/utils/dom-utils/changeSuggestorButton.ts
index 5d70e334..f789a313 100644
--- a/src/utils/dom-utils/changeSuggestorButton.ts
+++ b/src/utils/dom-utils/changeSuggestorButton.ts
@@ -8,8 +8,8 @@ const injectChangeSuggestorButton = async (commentNode: HTMLElement) => {
         return;
     }
 
-    const settingsConfig = await new Promise(resolve => {
-        chrome.storage.sync.get("osSettingsConfig", result => {
+    const settingsConfig = await new Promise((resolve) => {
+        chrome.storage.sync.get("osSettingsConfig", (result) => {
             resolve(result.osSettingsConfig);
         });
     });
@@ -22,13 +22,18 @@ const injectChangeSuggestorButton = async (commentNode: HTMLElement) => {
         }
     }
 
-    const suggestChangesIcon = commentNode.getElementsByClassName(GITHUB_REVIEW_SUGGESTION_CLASS)[0];
+    const suggestChangesIcon = commentNode.getElementsByClassName(
+        GITHUB_REVIEW_SUGGESTION_CLASS,
+    )[0];
     const changeSuggestorButton = AICodeReviewButton(commentNode);
 
     if (suggestChangesIcon.querySelector("#os-ai-change-gen")) {
         return;
     }
-    suggestChangesIcon.insertBefore(changeSuggestorButton, suggestChangesIcon.firstChild);
+    suggestChangesIcon.insertBefore(
+        changeSuggestorButton,
+        suggestChangesIcon.firstChild,
+    );
 };
 
 export default injectChangeSuggestorButton;
diff --git a/src/utils/dom-utils/domUpdateWatcher.ts b/src/utils/dom-utils/domUpdateWatcher.ts
index 2220e275..900b9cc0 100644
--- a/src/utils/dom-utils/domUpdateWatcher.ts
+++ b/src/utils/dom-utils/domUpdateWatcher.ts
@@ -4,7 +4,10 @@ const domUpdateWatch = (callback: () => void, delayInMs = 0) => {
         (_: unknown, observer: MutationObserver) => {
             const newLocation = document.location.href;
 
-            if (oldLocation === newLocation || document.readyState !== "complete") {
+            if (
+                oldLocation === newLocation ||
+                document.readyState !== "complete"
+            ) {
                 return;
             }
             observer.disconnect();
diff --git a/src/utils/dom-utils/pageUrlWatcher.ts b/src/utils/dom-utils/pageUrlWatcher.ts
index 84527f6d..b048f252 100644
--- a/src/utils/dom-utils/pageUrlWatcher.ts
+++ b/src/utils/dom-utils/pageUrlWatcher.ts
@@ -1,12 +1,14 @@
 export const pageUrlWatch = (callback: () => void, delayInMs = 0) => {
     let previousUrl = location.href;
-    const observer = new MutationObserver((mutationList: MutationRecord[], observer: MutationObserver) => {
-        if (location.href !== previousUrl) {
-            previousUrl = location.href;
-            setTimeout(callback, delayInMs);
-            observer.disconnect();
-        }
-    });
+    const observer = new MutationObserver(
+        (mutationList: MutationRecord[], observer: MutationObserver) => {
+            if (location.href !== previousUrl) {
+                previousUrl = location.href;
+                setTimeout(callback, delayInMs);
+                observer.disconnect();
+            }
+        },
+    );
 
     observer.observe(document.body, { attributes: true, subtree: true });
 };
diff --git a/src/utils/dom-utils/prWatcher.ts b/src/utils/dom-utils/prWatcher.ts
index 91b54df7..58c19546 100644
--- a/src/utils/dom-utils/prWatcher.ts
+++ b/src/utils/dom-utils/prWatcher.ts
@@ -1,14 +1,20 @@
 import domUpdateWatch from "./domUpdateWatcher";
 
 const prEditWatch = (callback: () => void, delayInMs = 0) => {
-    const observer = new MutationObserver((mutationList: MutationRecord[], observer: MutationObserver) => {
-        mutationList.forEach(mutation => {
-            if (Array.from((mutation.target as HTMLElement).classList).includes("is-comment-editing")) {
-                setTimeout(callback, delayInMs);
-                observer.disconnect();
-            }
-        });
-    });
+    const observer = new MutationObserver(
+        (mutationList: MutationRecord[], observer: MutationObserver) => {
+            mutationList.forEach((mutation) => {
+                if (
+                    Array.from(
+                        (mutation.target as HTMLElement).classList,
+                    ).includes("is-comment-editing")
+                ) {
+                    setTimeout(callback, delayInMs);
+                    observer.disconnect();
+                }
+            });
+        },
+    );
 
     // Disconnect the observer when the user navigates to a new page
     domUpdateWatch(() => {
@@ -18,15 +24,24 @@ const prEditWatch = (callback: () => void, delayInMs = 0) => {
     observer.observe(document.body, { attributes: true, subtree: true });
 };
 
-export const prReviewWatch = (callback: (node: HTMLElement) => void, delayInMs = 0) => {
+export const prReviewWatch = (
+    callback: (node: HTMLElement) => void,
+    delayInMs = 0,
+) => {
     const githubCommentSelector = "inline-comment-form-container";
     const observer = new MutationObserver((mutationList: MutationRecord[]) => {
-        mutationList.forEach(mutation => {
-            if (Array.from((mutation.target as HTMLElement).classList).includes(githubCommentSelector)) {
+        mutationList.forEach((mutation) => {
+            if (
+                Array.from((mutation.target as HTMLElement).classList).includes(
+                    githubCommentSelector,
+                )
+            ) {
                 setTimeout(() => {
-                    const commentNodes = document.getElementsByClassName(githubCommentSelector);
+                    const commentNodes = document.getElementsByClassName(
+                        githubCommentSelector,
+                    );
 
-                    Array.from(commentNodes).forEach(node => {
+                    Array.from(commentNodes).forEach((node) => {
                         callback(node as HTMLElement);
                     });
                 }, delayInMs);
@@ -34,7 +49,11 @@ export const prReviewWatch = (callback: (node: HTMLElement) => void, delayInMs =
         });
     });
 
-    observer.observe(document.body, { attributes: true, subtree: true, childList: true });
+    observer.observe(document.body, {
+        attributes: true,
+        subtree: true,
+        childList: true,
+    });
 };
 
 export default prEditWatch;
diff --git a/src/utils/dom-utils/repoVotingButtons.ts b/src/utils/dom-utils/repoVotingButtons.ts
index 403fc5f2..864db0c0 100644
--- a/src/utils/dom-utils/repoVotingButtons.ts
+++ b/src/utils/dom-utils/repoVotingButtons.ts
@@ -8,7 +8,11 @@ import {
 } from "../fetchOpenSaucedApiData";
 
 const injectRepoVotingButtons = async (ownerName: string, repoName: string) => {
-    if (document.getElementById("repo-voting-button") || !(await isLoggedIn()) || !(await repoExistsOnOpenSauced(ownerName, repoName))) {
+    if (
+        document.getElementById("repo-voting-button") ||
+        !(await isLoggedIn()) ||
+        !(await repoExistsOnOpenSauced(ownerName, repoName))
+    ) {
         return;
     }
 
diff --git a/src/utils/dom-utils/viewOnOpenSauced.ts b/src/utils/dom-utils/viewOnOpenSauced.ts
index dcc95943..f1d31a97 100644
--- a/src/utils/dom-utils/viewOnOpenSauced.ts
+++ b/src/utils/dom-utils/viewOnOpenSauced.ts
@@ -7,15 +7,24 @@ const injectViewOnOpenSaucedButton = (username: string) => {
 
     const viewOnOpenSaucedButton = ViewOnOpenSaucedButton(username);
 
-    const editProfileButtonSelector = ".btn-block.js-profile-editable-edit-button";
+    const editProfileButtonSelector =
+        ".btn-block.js-profile-editable-edit-button";
     const editProfileButton = document.querySelector(editProfileButtonSelector);
 
     if (editProfileButton) {
-        editProfileButton.parentNode?.insertBefore(viewOnOpenSaucedButton, editProfileButton);
+        editProfileButton.parentNode?.insertBefore(
+            viewOnOpenSaucedButton,
+            editProfileButton,
+        );
     } else {
-        const callToActionButtonsArea = document.querySelector(".js-user-profile-follow-button")?.closest(".flex-order-1.flex-md-order-none");
+        const callToActionButtonsArea = document
+            .querySelector(".js-user-profile-follow-button")
+            ?.closest(".flex-order-1.flex-md-order-none");
 
-        callToActionButtonsArea?.insertBefore(viewOnOpenSaucedButton, callToActionButtonsArea.firstChild);
+        callToActionButtonsArea?.insertBefore(
+            viewOnOpenSaucedButton,
+            callToActionButtonsArea.firstChild,
+        );
     }
 };
 
diff --git a/src/utils/fetchGithubAPIData.ts b/src/utils/fetchGithubAPIData.ts
index 202f62c3..525314d1 100644
--- a/src/utils/fetchGithubAPIData.ts
+++ b/src/utils/fetchGithubAPIData.ts
@@ -1,7 +1,9 @@
 import { DescriptionSource } from "./ai-utils/descriptionconfig";
 import { isWithinTokenLimit } from "gpt-tokenizer";
 
-type DescriptionContextPromise = Promise<[string | undefined, string[] | undefined]>;
+type DescriptionContextPromise = Promise<
+    [string | undefined, string[] | undefined]
+>;
 type DescriptionContext = Awaited<DescriptionContextPromise>;
 
 interface Commit {
@@ -11,10 +13,9 @@ interface Commit {
 }
 
 export const getPRDiff = async (url: string) => {
-    const response = await fetch(
-        url,
-        { headers: { Accept: "application/vnd.github.v3.diff" } },
-    );
+    const response = await fetch(url, {
+        headers: { Accept: "application/vnd.github.v3.diff" },
+    });
     const diff = await response.text();
 
     return diff.replace(/.*/, "").substring(1);
@@ -33,14 +34,22 @@ export const getPRCommitMessages = async (url: string) => {
     const data = await response.json();
 
     if (Array.isArray(data?.commits)) {
-        return (data.commits as Commit[]).map((commit: Commit): string => commit.commit.message);
+        return (data.commits as Commit[]).map(
+            (commit: Commit): string => commit.commit.message,
+        );
     }
 
-    return (data as Commit[]).map((commit: Commit): string => commit.commit.message);
+    return (data as Commit[]).map(
+        (commit: Commit): string => commit.commit.message,
+    );
 };
 
-export const getDescriptionContext = async (url: string, source: DescriptionSource): DescriptionContextPromise => {
-    let promises: [Promise<string | undefined>, Promise<string[] | undefined>] = [Promise.resolve(undefined), Promise.resolve(undefined)];
+export const getDescriptionContext = async (
+    url: string,
+    source: DescriptionSource,
+): DescriptionContextPromise => {
+    let promises: [Promise<string | undefined>, Promise<string[] | undefined>] =
+        [Promise.resolve(undefined), Promise.resolve(undefined)];
 
     if (source === "diff") {
         promises = [getPRDiff(url), Promise.resolve(undefined)];
@@ -54,7 +63,10 @@ export const getDescriptionContext = async (url: string, source: DescriptionSour
     return response;
 };
 
-export const isOutOfContextBounds = (context: DescriptionContext, limit: number): boolean => {
+export const isOutOfContextBounds = (
+    context: DescriptionContext,
+    limit: number,
+): boolean => {
     let text = "";
 
     if (context[0]) {
@@ -69,17 +81,20 @@ export const isOutOfContextBounds = (context: DescriptionContext, limit: number)
 
 export const isPublicRepository = async (url: string): Promise<boolean> => {
     try {
-        const { username, repoName } = url.match(
-            /^https?:\/\/(www\.)?github.com\/(?<username>[\w.-]+)\/?(?<repoName>[\w.-]+)?/,
-        )?.groups ?? {};
+        const { username, repoName } =
+            url.match(
+                /^https?:\/\/(www\.)?github.com\/(?<username>[\w.-]+)\/?(?<repoName>[\w.-]+)?/,
+            )?.groups ?? {};
 
         if (!username || !repoName) {
             return false;
         }
-        const response = await fetch(`https://api.github.com/repos/${username}/${repoName}`);
+        const response = await fetch(
+            `https://api.github.com/repos/${username}/${repoName}`,
+        );
         const data = await response.json();
 
-        return (response.status === 200 && data.private === false);
+        return response.status === 200 && data.private === false;
     } catch (e: unknown) {
         return false;
     }
diff --git a/src/utils/fetchOpenSaucedApiData.ts b/src/utils/fetchOpenSaucedApiData.ts
index 02026ef7..a0e25ed4 100644
--- a/src/utils/fetchOpenSaucedApiData.ts
+++ b/src/utils/fetchOpenSaucedApiData.ts
@@ -1,6 +1,7 @@
 import { cachedFetch } from "./cache";
 import {
-    OPEN_SAUCED_USERS_ENDPOINT, OPEN_SAUCED_REPOS_ENDPOINT,
+    OPEN_SAUCED_USERS_ENDPOINT,
+    OPEN_SAUCED_REPOS_ENDPOINT,
     OPEN_SAUCED_USER_INSIGHTS_ENDPOINT,
     OPEN_SAUCED_USER_HIGHLIGHTS_ENDPOINT,
     OPEN_SAUCED_HIGHLIGHTS_LIST_ENDPOINT,
@@ -28,43 +29,63 @@ export const isOpenSaucedUser = async (username: string) => {
     }
 };
 
-export const getUserData = async (userName: string, forceRefresh: boolean = false) => cachedFetch(`${OPEN_SAUCED_USERS_ENDPOINT}/${userName}`, {
-    expireInSeconds: 2 * 60 * 60,
-    forceRefresh,
-    headers: { Accept: "application/json" },
-}).then(async resp => {
-    if (!resp?.ok) {
-        console.log("error getting user info");
-    }
-    return resp?.json();
-})
-    .then(json => json);
-
-export const getUserPRData = async (userName: string, forceRefresh: boolean = false) => cachedFetch(`${OPEN_SAUCED_USERS_ENDPOINT}/${userName}/prs`, {
-    expireInSeconds: 2 * 60 * 60,
-    forceRefresh,
-    headers: { Accept: "application/json" },
-}).then(async resp => {
-    if (!resp?.ok) {
-        console.log("error getting user PR info");
-    }
-    return resp?.json();
-})
-    .then(json => json);
-
-export const getUserHighlightsData = async (userName: string, forceRefresh: boolean = false) => cachedFetch(`${OPEN_SAUCED_USERS_ENDPOINT}/${userName}/highlights`, {
-    expireInSeconds: 2 * 60 * 60,
-    forceRefresh,
-    headers: { Accept: "application/json" },
-}).then(async resp => {
-    if (!resp?.ok) {
-        console.log("error getting user highlights info");
-    }
-    return resp?.json();
-})
-    .then(json => json);
-
-const getUserVotes = async (userToken: string, page: number = 1, limit: number = 1000, repos: any[] = []): Promise<any[]> => {
+export const getUserData = async (
+    userName: string,
+    forceRefresh: boolean = false,
+) =>
+    cachedFetch(`${OPEN_SAUCED_USERS_ENDPOINT}/${userName}`, {
+        expireInSeconds: 2 * 60 * 60,
+        forceRefresh,
+        headers: { Accept: "application/json" },
+    })
+        .then(async (resp) => {
+            if (!resp?.ok) {
+                console.log("error getting user info");
+            }
+            return resp?.json();
+        })
+        .then((json) => json);
+
+export const getUserPRData = async (
+    userName: string,
+    forceRefresh: boolean = false,
+) =>
+    cachedFetch(`${OPEN_SAUCED_USERS_ENDPOINT}/${userName}/prs`, {
+        expireInSeconds: 2 * 60 * 60,
+        forceRefresh,
+        headers: { Accept: "application/json" },
+    })
+        .then(async (resp) => {
+            if (!resp?.ok) {
+                console.log("error getting user PR info");
+            }
+            return resp?.json();
+        })
+        .then((json) => json);
+
+export const getUserHighlightsData = async (
+    userName: string,
+    forceRefresh: boolean = false,
+) =>
+    cachedFetch(`${OPEN_SAUCED_USERS_ENDPOINT}/${userName}/highlights`, {
+        expireInSeconds: 2 * 60 * 60,
+        forceRefresh,
+        headers: { Accept: "application/json" },
+    })
+        .then(async (resp) => {
+            if (!resp?.ok) {
+                console.log("error getting user highlights info");
+            }
+            return resp?.json();
+        })
+        .then((json) => json);
+
+const getUserVotes = async (
+    userToken: string,
+    page: number = 1,
+    limit: number = 1000,
+    repos: any[] = [],
+): Promise<any[]> => {
     const response = await fetch(
         `${OPEN_SAUCED_REPOS_ENDPOINT}/listUserVoted?page=${page}&limit=${limit}`,
         {
@@ -86,14 +107,19 @@ const getUserVotes = async (userToken: string, page: number = 1, limit: number =
     return repos;
 };
 
-
-export const checkUserVotedRepo = async (userToken: string, repoName: string) => {
+export const checkUserVotedRepo = async (
+    userToken: string,
+    repoName: string,
+) => {
     const userVotes = await getUserVotes(userToken);
 
     return userVotes.some((repo: any) => repo.name === repoName);
 };
 
-export const repoExistsOnOpenSauced = async (ownerName: string, repoName: string) => {
+export const repoExistsOnOpenSauced = async (
+    ownerName: string,
+    repoName: string,
+) => {
     const response = await fetch(
         `${OPEN_SAUCED_REPOS_ENDPOINT}/${ownerName}/${repoName}`,
     );
@@ -101,19 +127,30 @@ export const repoExistsOnOpenSauced = async (ownerName: string, repoName: string
     return response.status === 200;
 };
 
-export const getRepoData = async (ownerName: string, repoName: string, forceRefresh: boolean = false) => cachedFetch(`${OPEN_SAUCED_REPOS_ENDPOINT}/${ownerName}/${repoName}`, {
-    expireInSeconds: 2 * 60 * 60,
-    forceRefresh,
-    headers: { Accept: "application/json" },
-}).then(async resp => {
-    if (!resp?.ok) {
-        console.log("error getting repo info");
-    }
-    return resp?.json();
-})
-    .then(json => json);
-
-export const voteOrUnvoteRepo = async (userToken: string, ownerName: string, repoName: string, method: "PUT" | "DELETE") => {
+export const getRepoData = async (
+    ownerName: string,
+    repoName: string,
+    forceRefresh: boolean = false,
+) =>
+    cachedFetch(`${OPEN_SAUCED_REPOS_ENDPOINT}/${ownerName}/${repoName}`, {
+        expireInSeconds: 2 * 60 * 60,
+        forceRefresh,
+        headers: { Accept: "application/json" },
+    })
+        .then(async (resp) => {
+            if (!resp?.ok) {
+                console.log("error getting repo info");
+            }
+            return resp?.json();
+        })
+        .then((json) => json);
+
+export const voteOrUnvoteRepo = async (
+    userToken: string,
+    ownerName: string,
+    repoName: string,
+    method: "PUT" | "DELETE",
+) => {
     const response = await fetch(
         `${OPEN_SAUCED_REPOS_ENDPOINT}/${ownerName}/${repoName}/vote`,
         {
@@ -126,18 +163,21 @@ export const voteOrUnvoteRepo = async (userToken: string, ownerName: string, rep
 };
 
 export const getUserInsightsData = async (userToken: string) => {
-    const response = await fetch(
-        `${OPEN_SAUCED_USER_INSIGHTS_ENDPOINT}`,
-        {
-            method: "GET",
-            headers: { Authorization: `Bearer ${userToken}` },
-        },
-    );
+    const response = await fetch(`${OPEN_SAUCED_USER_INSIGHTS_ENDPOINT}`, {
+        method: "GET",
+        headers: { Authorization: `Bearer ${userToken}` },
+    });
 
     return response.json();
 };
 
-export const updateInsight = async (userToken: string, repoId: string, checked: boolean, repoFullName: string, insight: IInsight) => {
+export const updateInsight = async (
+    userToken: string,
+    repoId: string,
+    checked: boolean,
+    repoFullName: string,
+    insight: IInsight,
+) => {
     insight.repos = insight.repos.map((repo: any) => ({
         id: repo.repo_id,
         fullName: repo.full_name,
@@ -156,22 +196,22 @@ export const updateInsight = async (userToken: string, repoId: string, checked:
                 is_public: insight.is_public,
                 repos: checked
                     ? [
-                        ...insight.repos,
-                        {
-                            id: repoId,
-                            fullName: `${repoFullName}`,
-                        },
-                    ]
-                    : insight.repos.filter(
-                        (repo: any) => repo.id !== repoId,
-                    ),
+                          ...insight.repos,
+                          {
+                              id: repoId,
+                              fullName: `${repoFullName}`,
+                          },
+                      ]
+                    : insight.repos.filter((repo: any) => repo.id !== repoId),
             }),
         },
     );
 
     return response.status === 200;
 };
-export const getHighlights = async (forceRefresh?: boolean): Promise<Highlights | undefined> => {
+export const getHighlights = async (
+    forceRefresh?: boolean,
+): Promise<Highlights | undefined> => {
     const response = await cachedFetch(
         `${OPEN_SAUCED_HIGHLIGHTS_LIST_ENDPOINT}?limit=10`,
         {
@@ -187,56 +227,94 @@ export const getHighlights = async (forceRefresh?: boolean): Promise<Highlights
     return response.json();
 };
 
-export const createHighlight = async (userToken: string, url: string, title: string, highlight: string, shipped_at?: string) => fetch(OPEN_SAUCED_USER_HIGHLIGHTS_ENDPOINT, {
-    headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${userToken}`,
-    },
-    method: "POST",
-    body: JSON.stringify({
-        url,
-        title,
-        shipped_at,
-        highlight,
-    }),
-});
-
-export const getHighlightReactions = async (highlightId: string):Promise<Record<string, string>[]> => {
-    const response = await fetch(`${OPEN_SAUCED_HIGHLIGHT_ENDPOINT}/${highlightId}/reactions`, { method: "GET" });
+export const createHighlight = async (
+    userToken: string,
+    url: string,
+    title: string,
+    highlight: string,
+    shipped_at?: string,
+) =>
+    fetch(OPEN_SAUCED_USER_HIGHLIGHTS_ENDPOINT, {
+        headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${userToken}`,
+        },
+        method: "POST",
+        body: JSON.stringify({
+            url,
+            title,
+            shipped_at,
+            highlight,
+        }),
+    });
+
+export const getHighlightReactions = async (
+    highlightId: string,
+): Promise<Record<string, string>[]> => {
+    const response = await fetch(
+        `${OPEN_SAUCED_HIGHLIGHT_ENDPOINT}/${highlightId}/reactions`,
+        { method: "GET" },
+    );
 
     return response.json();
 };
 
-export const getUserHighlightReactions = async (userToken: string, highlightId: string):Promise<Record<string, string>[]> => {
-    const response = await fetch(`${OPEN_SAUCED_USER_HIGHLIGHTS_ENDPOINT}/${highlightId}/reactions`, {
-        headers: { Authorization: `Bearer ${userToken}` },
-        method: "GET",
-    });
+export const getUserHighlightReactions = async (
+    userToken: string,
+    highlightId: string,
+): Promise<Record<string, string>[]> => {
+    const response = await fetch(
+        `${OPEN_SAUCED_USER_HIGHLIGHTS_ENDPOINT}/${highlightId}/reactions`,
+        {
+            headers: { Authorization: `Bearer ${userToken}` },
+            method: "GET",
+        },
+    );
 
     return response.json();
 };
 
-export const getEmojis = async ():Promise<GeneralAPIResponse> => {
-    const response = await fetch(`${OPEN_SAUCED_EMOJIS_ENDPOINT}`, { method: "GET" });
+export const getEmojis = async (): Promise<GeneralAPIResponse> => {
+    const response = await fetch(`${OPEN_SAUCED_EMOJIS_ENDPOINT}`, {
+        method: "GET",
+    });
 
     return response.json();
 };
 
-export const reactOnHighlight = async (userToken: string, highlightId: string, emojiId: string) => fetch(`${OPEN_SAUCED_USER_HIGHLIGHTS_ENDPOINT}/${highlightId}/reactions/${emojiId}`, {
-    headers: { Authorization: `Bearer ${userToken}` },
-    method: "POST",
-});
+export const reactOnHighlight = async (
+    userToken: string,
+    highlightId: string,
+    emojiId: string,
+) =>
+    fetch(
+        `${OPEN_SAUCED_USER_HIGHLIGHTS_ENDPOINT}/${highlightId}/reactions/${emojiId}`,
+        {
+            headers: { Authorization: `Bearer ${userToken}` },
+            method: "POST",
+        },
+    );
 
-export const removeReactionOnHighlight = async (userToken: string, highlightId: string, emojiId: string) => fetch(`${OPEN_SAUCED_USER_HIGHLIGHTS_ENDPOINT}/${highlightId}/reactions/${emojiId}`, {
-    headers: { Authorization: `Bearer ${userToken}` },
-    method: "DELETE",
-});
+export const removeReactionOnHighlight = async (
+    userToken: string,
+    highlightId: string,
+    emojiId: string,
+) =>
+    fetch(
+        `${OPEN_SAUCED_USER_HIGHLIGHTS_ENDPOINT}/${highlightId}/reactions/${emojiId}`,
+        {
+            headers: { Authorization: `Bearer ${userToken}` },
+            method: "DELETE",
+        },
+    );
 
 export const getRepoOpenSaucedURL = async (repoUrl: string) => {
-    const repoFullName = repoUrl.split("/").slice(-2)
-        .join("/");
-    const response = await fetch(`${OPEN_SAUCED_REPOS_ENDPOINT}/${repoFullName}`, { method: "GET" });
+    const repoFullName = repoUrl.split("/").slice(-2).join("/");
+    const response = await fetch(
+        `${OPEN_SAUCED_REPOS_ENDPOINT}/${repoFullName}`,
+        { method: "GET" },
+    );
 
     if (response.status === 200) {
         const data = await response.json();
diff --git a/src/utils/getContributedRepos.ts b/src/utils/getContributedRepos.ts
index 48913ca6..92023e17 100644
--- a/src/utils/getContributedRepos.ts
+++ b/src/utils/getContributedRepos.ts
@@ -1,19 +1,19 @@
 export interface PRResponse {
     data: {
         full_name: string;
-    }[]
+    }[];
     meta: {
         itemCount: number;
     };
 }
 
-export const countUniqueRepos = (response: PRResponse | null):number => {
+export const countUniqueRepos = (response: PRResponse | null): number => {
     if (!response?.data) {
         return 0;
     }
 
     const { data } = response;
-    const uniqueRepos = new Set(data.map(obj => obj.full_name));
+    const uniqueRepos = new Set(data.map((obj) => obj.full_name));
 
     return uniqueRepos.size;
 };
diff --git a/src/utils/getUserPRVelocity.ts b/src/utils/getUserPRVelocity.ts
index 5931d2e2..b3669940 100644
--- a/src/utils/getUserPRVelocity.ts
+++ b/src/utils/getUserPRVelocity.ts
@@ -16,7 +16,7 @@ export const getUserPRVelocity = (prDetails: IUserPR[]) => {
     }, 0);
 
     const averageVelocity: number =
-    mergedPRs.length > 0 ? Math.floor(totalDays / mergedPRs.length) : 0;
+        mergedPRs.length > 0 ? Math.floor(totalDays / mergedPRs.length) : 0;
 
     return averageVelocity;
 };
diff --git a/src/utils/setAccessToken.ts b/src/utils/setAccessToken.ts
index 92a4a8f5..28fe7141 100644
--- a/src/utils/setAccessToken.ts
+++ b/src/utils/setAccessToken.ts
@@ -1,14 +1,19 @@
 import { OPEN_SAUCED_AUTH_TOKEN_KEY } from "../constants";
 
-const setAuthTokenInChromeStorage = async (accessToken: string): Promise<void> => new Promise((resolve, reject) => {
-    chrome.storage.sync.set({ [OPEN_SAUCED_AUTH_TOKEN_KEY]: accessToken }, () => {
-        if (chrome.runtime.lastError) {
-            reject(chrome.runtime.lastError);
-        } else {
-            resolve();
-        }
+const setAuthTokenInChromeStorage = async (
+    accessToken: string,
+): Promise<void> =>
+    new Promise((resolve, reject) => {
+        chrome.storage.sync.set(
+            { [OPEN_SAUCED_AUTH_TOKEN_KEY]: accessToken },
+            () => {
+                if (chrome.runtime.lastError) {
+                    reject(chrome.runtime.lastError);
+                } else {
+                    resolve();
+                }
+            },
+        );
     });
-});
 
 export default setAuthTokenInChromeStorage;
-
diff --git a/src/utils/urlMatchers.ts b/src/utils/urlMatchers.ts
index 9db5b140..eeea1aba 100644
--- a/src/utils/urlMatchers.ts
+++ b/src/utils/urlMatchers.ts
@@ -21,7 +21,8 @@ export const getTwitterUsername = (url: string) => {
 };
 
 export const isGithubPullRequestPage = (url: string) => {
-    const githubPullRequestPattern = /github\.com\/[\w.-]+\/[^/]+\/pull\/\d+(\/)?$/;
+    const githubPullRequestPattern =
+        /github\.com\/[\w.-]+\/[^/]+\/pull\/\d+(\/)?$/;
 
     return githubPullRequestPattern.test(url);
 };
@@ -39,20 +40,24 @@ export const isGithubRepoPage = (url: string) => {
 };
 
 export const isPullRequestCreatePage = (url: string) => {
-    const githubPullRequestPattern = /^https:\/\/(www\.)?github\.com\/[\w.-]+\/[^/]+\/compare\/\w+/;
+    const githubPullRequestPattern =
+        /^https:\/\/(www\.)?github\.com\/[\w.-]+\/[^/]+\/compare\/\w+/;
 
     return githubPullRequestPattern.test(url);
 };
 
 export const isPullRequestFilesChangedPage = (url: string) => {
-    const githubPullRequestFilesChangedPattern = /^https:\/\/(www\.)?github\.com\/[\w.-]+\/[^/]+\/pull\/\d+\/files/;
+    const githubPullRequestFilesChangedPattern =
+        /^https:\/\/(www\.)?github\.com\/[\w.-]+\/[^/]+\/pull\/\d+\/files/;
 
     return githubPullRequestFilesChangedPattern.test(url);
 };
 
-export const isOnGitHub = (url: string) => new URL(url).hostname === "github.com";
+export const isOnGitHub = (url: string) =>
+    new URL(url).hostname === "github.com";
 
-export const getRepoAPIURL = (url: string) => url.replace(/github\.com/, "api.github.com/repos");
+export const getRepoAPIURL = (url: string) =>
+    url.replace(/github\.com/, "api.github.com/repos");
 
 export const getPullRequestAPIURL = async (url: string) => {
     const apiURL = url.replace(/github\.com/, "api.github.com/repos");
@@ -67,10 +72,13 @@ export const getPullRequestAPIURL = async (url: string) => {
     }
 
     // The HEAD branch name is not present in the URL, get the default branch
-    const { username, repoName } = url.match(
-        /^https?:\/\/(www\.)?github.com\/(?<username>[\w.-]+)\/?(?<repoName>[\w.-]+)?/,
-    )?.groups ?? {};
-    const response = await fetch(`https://api.github.com/repos/${username}/${repoName}`);
+    const { username, repoName } =
+        url.match(
+            /^https?:\/\/(www\.)?github.com\/(?<username>[\w.-]+)\/?(?<repoName>[\w.-]+)?/,
+        )?.groups ?? {};
+    const response = await fetch(
+        `https://api.github.com/repos/${username}/${repoName}`,
+    );
     const { default_branch } = await response.json();
 
     return apiURL.replace(/compare\//, `compare/${default_branch}...`);
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 151aa685..11f02fe2 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1 +1 @@
-/// <reference types="vite/client" />
\ No newline at end of file
+/// <reference types="vite/client" />
diff --git a/src/worker/background.ts b/src/worker/background.ts
index 8520430c..9695e337 100644
--- a/src/worker/background.ts
+++ b/src/worker/background.ts
@@ -19,7 +19,8 @@ chrome.runtime.onMessage.addListener(async (message: Message) => {
             target: { tabId: tab.id! },
             func: (data, selector) => {
                 const populateDataToLinkedIn = (data: any) => {
-                    const inputFields: NodeListOf<HTMLInputElement> = document.querySelectorAll(selector);
+                    const inputFields: NodeListOf<HTMLInputElement> =
+                        document.querySelectorAll(selector);
 
                     if (inputFields.length === 0) {
                         // Set timeout to wait for the page to load