diff --git a/.github/workflows/generate-theme-doc.yml b/.github/workflows/generate-theme-doc.yml
index 9028044..75fcb89 100644
--- a/.github/workflows/generate-theme-doc.yml
+++ b/.github/workflows/generate-theme-doc.yml
@@ -16,7 +16,7 @@ jobs:
       - name: setup node
         uses: actions/setup-node@v1
         with:
-          node-version: "12.x"
+          node-version: "16.x"
 
       - name: npm install, generate readme
         run: |
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 0911168..f5eec35 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -18,7 +18,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: "12.x"
+          node-version: "16.x"
 
       - name: Install & Test
         run: |
diff --git a/api/index.js b/api/index.js
index 2315ddd..64231a5 100644
--- a/api/index.js
+++ b/api/index.js
@@ -1,17 +1,19 @@
-require("dotenv").config();
-const {
+import {
   renderError,
   parseBoolean,
   parseArray,
   clampValue,
   CONSTANTS,
-} = require("../src/common/utils");
-const fetchStats = require("../src/fetchers/stats-fetcher");
-const renderStatsCard = require("../src/cards/stats-card");
-const blacklist = require("../src/common/blacklist");
-const { isLocaleAvailable } = require("../src/translations");
+} from "../src/common/utils";
+import fetchStats from "../src/fetchers/stats-fetcher";
+import renderStatsCard from "../src/cards/stats-card";
+import blacklist from "../src/common/blacklist";
+import { isLocaleAvailable } from "../src/translations";
+import * as dotenv from "dotenv";
 
-module.exports = async (req, res) => {
+dotenv.config();
+
+export default async (req, res) => {
   const {
     username,
     hide,
diff --git a/api/pin.js b/api/pin.js
index f2761cb..1902388 100644
--- a/api/pin.js
+++ b/api/pin.js
@@ -1,16 +1,15 @@
-require("dotenv").config();
-const {
+import {
   renderError,
   parseBoolean,
   clampValue,
   CONSTANTS,
-} = require("../src/common/utils");
-const fetchRepo = require("../src/fetchers/repo-fetcher");
-const renderRepoCard = require("../src/cards/repo-card");
-const blacklist = require("../src/common/blacklist");
-const { isLocaleAvailable } = require("../src/translations");
+} from "../src/common/utils";
+import fetchRepo from "../src/fetchers/repo-fetcher";
+import renderRepoCard from "../src/cards/repo-card";
+import blacklist from "../src/common/blacklist";
+import { isLocaleAvailable } from "../src/translations";
 
-module.exports = async (req, res) => {
+export default async (req, res) => {
   const {
     username,
     repo,
diff --git a/api/top-langs.js b/api/top-langs.js
index 8080207..d83d9d6 100644
--- a/api/top-langs.js
+++ b/api/top-langs.js
@@ -1,17 +1,19 @@
-require("dotenv").config();
-const {
+import {
   renderError,
   clampValue,
   parseBoolean,
   parseArray,
   CONSTANTS,
-} = require("../src/common/utils");
-const fetchTopLanguages = require("../src/fetchers/top-languages-fetcher");
-const renderTopLanguages = require("../src/cards/top-languages-card");
-const blacklist = require("../src/common/blacklist");
-const { isLocaleAvailable } = require("../src/translations");
+} from "../src/common/utils";
+import fetchTopLanguages from "../src/fetchers/top-languages-fetcher";
+import { renderTopLanguages } from "../src/cards/top-languages-card";
+import blacklist from "../src/common/blacklist";
+import { isLocaleAvailable } from "../src/translations";
+import * as dotenv from "dotenv";
 
-module.exports = async (req, res) => {
+dotenv.config();
+
+export default async (req, res) => {
   const {
     username,
     hide,
diff --git a/api/wakatime.js b/api/wakatime.js
index 18b5218..8e27e2f 100644
--- a/api/wakatime.js
+++ b/api/wakatime.js
@@ -1,16 +1,18 @@
-require("dotenv").config();
-const {
+import {
   renderError,
   parseBoolean,
   clampValue,
   parseArray,
   CONSTANTS,
-} = require("../src/common/utils");
-const { isLocaleAvailable } = require("../src/translations");
-const { fetchWakatimeStats } = require("../src/fetchers/wakatime-fetcher");
-const wakatimeCard = require("../src/cards/wakatime-card");
+} from "../src/common/utils";
+import { isLocaleAvailable } from "../src/translations";
+import fetchWakatimeStats from "../src/fetchers/wakatime-fetcher";
+import wakatimeCard from "../src/cards/wakatime-card";
+import * as dotenv from "dotenv";
 
-module.exports = async (req, res) => {
+dotenv.config();
+
+export default async (req, res) => {
   const {
     username,
     title_color,
diff --git a/jest.config.js b/jest.config.js
index 0d51c47..7fbe69b 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,3 +1,5 @@
-module.exports = {
+export default {
   clearMocks: true,
+  transform: {},
+  testEnvironment: "jsdom",
 };
diff --git a/package.json b/package.json
index be9e435..4cfcd07 100644
--- a/package.json
+++ b/package.json
@@ -3,9 +3,11 @@
   "version": "1.0.0",
   "description": "Dynamically generate stats for your github readmes",
   "main": "index.js",
+  "type": "module",
   "scripts": {
-    "test": "jest --coverage",
-    "test:watch": "jest --watch",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js --coverage",
+    "test:watch": "node --experimental-vm-modules node_modules/jest/bin/jest.js --watch",
+    "test:update:snapshot": "node --experimental-vm-modules node_modules/jest/bin/jest.js -u",
     "theme-readme-gen": "node scripts/generate-theme-doc",
     "preview-theme": "node scripts/preview-theme",
     "generate-langs-json": "node scripts/generate-langs-json",
@@ -20,14 +22,15 @@
   "devDependencies": {
     "@actions/core": "^1.2.4",
     "@actions/github": "^4.0.0",
-    "@testing-library/dom": "^7.20.0",
-    "@testing-library/jest-dom": "^5.11.0",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "jest-environment-jsdom": "^29.0.3",
+    "jest": "^29.0.3",
     "@uppercod/css-to-object": "^1.1.1",
     "axios-mock-adapter": "^1.18.1",
     "color-contrast-checker": "^2.1.0",
     "hjson": "^3.2.2",
     "husky": "^4.2.5",
-    "jest": "^26.1.0",
     "js-yaml": "^4.1.0",
     "lodash.snakecase": "^4.1.1",
     "parse-diff": "^0.7.0",
@@ -38,6 +41,7 @@
     "dotenv": "^8.2.0",
     "emoji-name-map": "^1.2.8",
     "github-username-regex": "^1.0.0",
+    "upgrade": "^1.1.0",
     "word-wrap": "^1.2.3"
   },
   "husky": {
diff --git a/scripts/generate-langs-json.js b/scripts/generate-langs-json.js
index bd210a3..803d60b 100644
--- a/scripts/generate-langs-json.js
+++ b/scripts/generate-langs-json.js
@@ -1,6 +1,6 @@
-const fs = require("fs");
-const jsYaml = require("js-yaml");
-const axios = require("axios");
+import axios from "axios";
+import fs from "fs";
+import jsYaml from "js-yaml";
 
 const LANGS_FILEPATH = "./src/common/languageColors.json";
 
diff --git a/scripts/generate-theme-doc.js b/scripts/generate-theme-doc.js
index fcb3c5e..e8b83ad 100644
--- a/scripts/generate-theme-doc.js
+++ b/scripts/generate-theme-doc.js
@@ -1,5 +1,5 @@
-const theme = require("../themes/index");
-const fs = require("fs");
+import fs from "fs";
+import { themes } from "../themes/index";
 
 const TARGET_FILE = "./themes/README.md";
 const REPO_CARD_LINKS_FLAG = "<!-- REPO_CARD_LINKS -->";
@@ -54,7 +54,7 @@ const createStatMdLink = (theme) => {
 };
 
 const generateLinks = (fn) => {
-  return Object.keys(theme)
+  return Object.keys(themes)
     .map((name) => fn(name))
     .join("");
 };
@@ -65,7 +65,7 @@ const createTableItem = ({ link, label, isRepoCard }) => {
 };
 const generateTable = ({ isRepoCard }) => {
   const rows = [];
-  const themes = Object.keys(theme).filter(
+  const themes = Object.keys(themes).filter(
     (name) => name !== (!isRepoCard ? "default_repocard" : "default"),
   );
 
diff --git a/scripts/preview-theme.js b/scripts/preview-theme.js
index e4422ec..33ee96b 100644
--- a/scripts/preview-theme.js
+++ b/scripts/preview-theme.js
@@ -1,11 +1,12 @@
-const core = require("@actions/core");
-const github = require("@actions/github");
-const parse = require("parse-diff");
-const Hjson = require("hjson");
-const snakeCase = require("lodash.snakecase");
-const ColorContrastChecker = require("color-contrast-checker");
+import core from "@actions/core";
+import github from "@actions/github";
+import ColorContrastChecker from "color-contrast-checker";
+import * as dotenv from "dotenv";
+import Hjson from "hjson";
+import snakeCase from "lodash.snakecase";
+import parse from "parse-diff";
 
-require("dotenv").config();
+dotenv.config();
 
 const OWNER = "anuraghazra";
 const REPO = "github-readme-stats";
@@ -76,10 +77,10 @@ function getGrsLink(colors) {
 }
 
 const themeContribGuidelines = `
-  \rHi, thanks for the theme contribution, please read our theme [contribution guidelines](https://github.com/anuraghazra/github-readme-stats/blob/master/CONTRIBUTING.md#themes-contribution).  
+  \rHi, thanks for the theme contribution, please read our theme [contribution guidelines](https://github.com/anuraghazra/github-readme-stats/blob/master/CONTRIBUTING.md#themes-contribution).
   \rWe are currently only accepting color combinations from any VSCode theme or themes which have good color combination to minimize bloating the themes collection.
 
-  \r> Also note that if this theme is exclusively for your personal use, then instead of adding it to our theme collection you can use card [customization options](https://github.com/anuraghazra/github-readme-stats#customization) 
+  \r> Also note that if this theme is exclusively for your personal use, then instead of adding it to our theme collection you can use card [customization options](https://github.com/anuraghazra/github-readme-stats#customization)
 `;
 
 async function run() {
@@ -128,7 +129,7 @@ async function run() {
         issue_number: pullRequestId,
         body: `
         \r**${COMMENT_TITLE}**
-        
+
         \rCannot create theme preview
 
         ${themeContribGuidelines}
@@ -167,16 +168,16 @@ async function run() {
       owner: OWNER,
       repo: REPO,
       body: `
-      \r**${COMMENT_TITLE}**  
-      
+      \r**${COMMENT_TITLE}**
+
       \r${warnings.map((warning) => `- :warning: ${warning}\n`).join("")}
 
       \ntitle_color: <code>#${titleColor}</code> | icon_color: <code>#${iconColor}</code> | text_color: <code>#${textColor}</code> | bg_color: <code>#${bgColor}</code>
-      
+
       \r[Preview Link](${url})
 
       \r[![](${url})](${url})
-      
+
       ${themeContribGuidelines}
       `,
     });
diff --git a/scripts/push-theme-readme.sh b/scripts/push-theme-readme.sh
index 5223dd1..946096b 100755
--- a/scripts/push-theme-readme.sh
+++ b/scripts/push-theme-readme.sh
@@ -11,4 +11,4 @@ git checkout -b $BRANCH_NAME
 git add --all
 git commit --message "docs(theme): Auto update theme readme" || exit 0
 git remote add origin-$BRANCH_NAME https://${PERSONAL_TOKEN}@github.com/${GH_REPO}.git
-git push --force --quiet --set-upstream origin-$BRANCH_NAME $BRANCH_NAME
\ No newline at end of file
+git push --force --quiet --set-upstream origin-$BRANCH_NAME $BRANCH_NAME
diff --git a/src/calculateRank.js b/src/calculateRank.js
index 742b9ab..bbfece1 100644
--- a/src/calculateRank.js
+++ b/src/calculateRank.js
@@ -57,8 +57,8 @@ function calculateRank({
     issues * ISSUES_OFFSET +
     stargazers * STARS_OFFSET +
     prs * PRS_OFFSET +
-    followers * FOLLOWERS_OFFSET + 
-    totalRepos * REPO_OFFSET 
+    followers * FOLLOWERS_OFFSET +
+    totalRepos * REPO_OFFSET
   ) / 100;
 
   const normalizedScore = normalcdf(score, TOTAL_VALUES, ALL_OFFSETS) * 100;
@@ -74,4 +74,5 @@ function calculateRank({
   return { level, score: normalizedScore };
 }
 
-module.exports = calculateRank;
+export { calculateRank };
+export default calculateRank;
diff --git a/src/cards/repo-card.js b/src/cards/repo-card.js
index 034ee1f..61073be 100644
--- a/src/cards/repo-card.js
+++ b/src/cards/repo-card.js
@@ -1,17 +1,17 @@
 // @ts-check
-const {
-  kFormatter,
+import { Card } from "../common/Card";
+import { I18n } from "../common/I18n";
+import { icons } from "../common/icons";
+import {
   encodeHTML,
-  getCardColors,
   flexLayout,
-  wrapTextMultiline,
+  getCardColors,
+  kFormatter,
   measureText,
   parseEmojis,
-} = require("../common/utils");
-const I18n = require("../common/I18n");
-const Card = require("../common/Card");
-const icons = require("../common/icons");
-const { repoCardLocales } = require("../translations");
+  wrapTextMultiline,
+} from "../common/utils";
+import { repoCardLocales } from "../translations";
 
 /**
  * @param {string} label
@@ -185,4 +185,5 @@ const renderRepoCard = (repo, options = {}) => {
   `);
 };
 
-module.exports = renderRepoCard;
+export { renderRepoCard };
+export default renderRepoCard;
diff --git a/src/cards/stats-card.js b/src/cards/stats-card.js
index 30056b8..962c1e4 100644
--- a/src/cards/stats-card.js
+++ b/src/cards/stats-card.js
@@ -1,16 +1,16 @@
 // @ts-check
-const I18n = require("../common/I18n");
-const Card = require("../common/Card");
-const icons = require("../common/icons");
-const { getStyles } = require("../getStyles");
-const { statCardLocales } = require("../translations");
-const {
-  kFormatter,
-  flexLayout,
+import { Card } from "../common/Card";
+import { I18n } from "../common/I18n";
+import { icons } from "../common/icons";
+import {
   clampValue,
-  measureText,
+  flexLayout,
   getCardColors,
-} = require("../common/utils");
+  kFormatter,
+  measureText,
+} from "../common/utils";
+import { getStyles } from "../getStyles";
+import { statCardLocales } from "../translations";
 
 const createTextNode = ({
   icon,
@@ -300,4 +300,5 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
   `);
 };
 
-module.exports = renderStatsCard;
+export { renderStatsCard };
+export default renderStatsCard;
diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js
index b2f5c36..d8c1825 100644
--- a/src/cards/top-languages-card.js
+++ b/src/cards/top-languages-card.js
@@ -1,16 +1,16 @@
 // @ts-check
-const Card = require("../common/Card");
-const I18n = require("../common/I18n");
-const { langCardLocales } = require("../translations");
-const { createProgressNode } = require("../common/createProgressNode");
-const {
+import { Card } from "../common/Card";
+import { createProgressNode } from "../common/createProgressNode";
+import { I18n } from "../common/I18n";
+import {
+  chunkArray,
   clampValue,
-  getCardColors,
   flexLayout,
+  getCardColors,
   lowercaseTrim,
   measureText,
-  chunkArray,
-} = require("../common/utils");
+} from "../common/utils";
+import { langCardLocales } from "../translations";
 
 const DEFAULT_CARD_WIDTH = 300;
 const MIN_CARD_WIDTH = 230;
@@ -311,5 +311,4 @@ const renderTopLanguages = (topLangs, options = {}) => {
   `);
 };
 
-module.exports = renderTopLanguages;
-module.exports.MIN_CARD_WIDTH = MIN_CARD_WIDTH;
+export { renderTopLanguages, MIN_CARD_WIDTH };
diff --git a/src/cards/wakatime-card.js b/src/cards/wakatime-card.js
index 5ab2f29..2f30b94 100644
--- a/src/cards/wakatime-card.js
+++ b/src/cards/wakatime-card.js
@@ -1,16 +1,16 @@
 // @ts-check
-const Card = require("../common/Card");
-const I18n = require("../common/I18n");
-const { getStyles } = require("../getStyles");
-const { wakatimeCardLocales } = require("../translations");
-const languageColors = require("../common/languageColors.json");
-const { createProgressNode } = require("../common/createProgressNode");
-const {
+import { Card } from "../common/Card";
+import { createProgressNode } from "../common/createProgressNode";
+import { I18n } from "../common/I18n";
+import languageColors from "../common/languageColors.json";
+import {
   clampValue,
-  getCardColors,
   flexLayout,
+  getCardColors,
   lowercaseTrim,
-} = require("../common/utils");
+} from "../common/utils";
+import { getStyles } from "../getStyles";
+import { wakatimeCardLocales } from "../translations";
 
 /**
  * @param {{color: string, text: string}} param0
@@ -314,5 +314,5 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
   `);
 };
 
-module.exports = renderWakatimeCard;
-exports.createProgressNode = createProgressNode;
+export { renderWakatimeCard };
+export default renderWakatimeCard;
diff --git a/src/common/Card.js b/src/common/Card.js
index 2cc8455..24ec443 100644
--- a/src/common/Card.js
+++ b/src/common/Card.js
@@ -1,5 +1,5 @@
-const { getAnimations } = require("../getStyles");
-const { flexLayout, encodeHTML } = require("../common/utils");
+import { encodeHTML, flexLayout } from "../common/utils";
+import { getAnimations } from "../getStyles";
 
 class Card {
   /**
@@ -216,4 +216,5 @@ class Card {
   }
 }
 
-module.exports = Card;
+export { Card };
+export default Card;
diff --git a/src/common/I18n.js b/src/common/I18n.js
index e28f605..7f607cd 100644
--- a/src/common/I18n.js
+++ b/src/common/I18n.js
@@ -18,4 +18,5 @@ class I18n {
   }
 }
 
-module.exports = I18n;
+export { I18n };
+export default I18n;
diff --git a/src/common/blacklist.js b/src/common/blacklist.js
index 3ef635c..752ef94 100644
--- a/src/common/blacklist.js
+++ b/src/common/blacklist.js
@@ -1,3 +1,4 @@
 const blacklist = ["renovate-bot", "technote-space", "sw-yx"];
 
-module.exports = blacklist;
+export { blacklist };
+export default blacklist;
diff --git a/src/common/createProgressNode.js b/src/common/createProgressNode.js
index 0f15264..80abc8f 100644
--- a/src/common/createProgressNode.js
+++ b/src/common/createProgressNode.js
@@ -1,4 +1,4 @@
-const { clampValue } = require("../common/utils");
+import { clampValue } from "../common/utils";
 
 const createProgressNode = ({
   x,
@@ -16,7 +16,7 @@ const createProgressNode = ({
       <rect
           height="8"
           fill="${color}"
-          rx="5" ry="5" x="0" y="0" 
+          rx="5" ry="5" x="0" y="0"
           data-testid="lang-progress"
           width="${progressPercentage}%"
       >
@@ -25,4 +25,5 @@ const createProgressNode = ({
   `;
 };
 
-exports.createProgressNode = createProgressNode;
+export { createProgressNode };
+export default createProgressNode;
diff --git a/src/common/icons.js b/src/common/icons.js
index 7b7e507..5282a93 100644
--- a/src/common/icons.js
+++ b/src/common/icons.js
@@ -8,4 +8,5 @@ const icons = {
   fork: `<path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path>`,
 };
 
-module.exports = icons;
+export { icons };
+export default icons;
diff --git a/src/common/languageColors.json b/src/common/languageColors.json
index 12c85bd..3c1370f 100644
--- a/src/common/languageColors.json
+++ b/src/common/languageColors.json
@@ -499,4 +499,4 @@
     "wdl": "#42f1f4",
     "wisp": "#7582D1",
     "xBase": "#403a40"
-}
\ No newline at end of file
+}
diff --git a/src/common/retryer.js b/src/common/retryer.js
index b06d3e2..f37aaa4 100644
--- a/src/common/retryer.js
+++ b/src/common/retryer.js
@@ -1,4 +1,4 @@
-const { logger, CustomError } = require("../common/utils");
+import { CustomError, logger } from "../common/utils";
 
 const retryer = async (fetcher, variables, retries = 0) => {
   if (retries > 7) {
@@ -40,4 +40,5 @@ const retryer = async (fetcher, variables, retries = 0) => {
   }
 };
 
-module.exports = retryer;
+export { retryer };
+export default retryer;
diff --git a/src/common/utils.js b/src/common/utils.js
index 2ad18dd..042b635 100644
--- a/src/common/utils.js
+++ b/src/common/utils.js
@@ -1,8 +1,8 @@
 // @ts-check
-const axios = require("axios");
-const wrap = require("word-wrap");
-const themes = require("../../themes");
-const toEmoji = require("emoji-name-map");
+import axios from "axios";
+import toEmoji from "emoji-name-map";
+import wrap from "word-wrap";
+import { themes } from "../../themes";
 
 /**
  * @param {string} message
@@ -370,7 +370,7 @@ function parseEmojis(str) {
   });
 }
 
-module.exports = {
+export {
   renderError,
   kFormatter,
   encodeHTML,
diff --git a/src/fetchers/repo-fetcher.js b/src/fetchers/repo-fetcher.js
index 0bad5f2..c55c3d7 100644
--- a/src/fetchers/repo-fetcher.js
+++ b/src/fetchers/repo-fetcher.js
@@ -1,6 +1,6 @@
 // @ts-check
-const retryer = require("../common/retryer");
-const { request, MissingParamError } = require("../common/utils");
+import { retryer } from "../common/retryer";
+import { MissingParamError, request } from "../common/utils";
 
 /**
  * @param {import('Axios').AxiosRequestHeaders} variables
@@ -97,4 +97,5 @@ async function fetchRepo(username, reponame) {
   }
 }
 
-module.exports = fetchRepo;
+export { fetchRepo };
+export default fetchRepo;
diff --git a/src/fetchers/stats-fetcher.js b/src/fetchers/stats-fetcher.js
index dc9be5b..cb13255 100644
--- a/src/fetchers/stats-fetcher.js
+++ b/src/fetchers/stats-fetcher.js
@@ -1,17 +1,17 @@
 // @ts-check
-const axios = require("axios").default;
-const githubUsernameRegex = require("github-username-regex");
-
-const retryer = require("../common/retryer");
-const calculateRank = require("../calculateRank");
-const {
-  request,
-  logger,
+import axios from "axios";
+import * as dotenv from "dotenv";
+import githubUsernameRegex from "github-username-regex";
+import { calculateRank } from "../calculateRank";
+import { retryer } from "../common/retryer";
+import {
   CustomError,
+  logger,
   MissingParamError,
-} = require("../common/utils");
+  request,
+} from "../common/utils";
 
-require("dotenv").config();
+dotenv.config();
 
 /**
  * @param {import('axios').AxiosRequestHeaders} variables
@@ -187,4 +187,5 @@ async function fetchStats(
   return stats;
 }
 
-module.exports = fetchStats;
+export { fetchStats };
+export default fetchStats;
diff --git a/src/fetchers/top-languages-fetcher.js b/src/fetchers/top-languages-fetcher.js
index 7c4c878..555fb06 100644
--- a/src/fetchers/top-languages-fetcher.js
+++ b/src/fetchers/top-languages-fetcher.js
@@ -1,7 +1,9 @@
 // @ts-check
-const { request, logger, MissingParamError } = require("../common/utils");
-const retryer = require("../common/retryer");
-require("dotenv").config();
+import * as dotenv from "dotenv";
+import { retryer } from "../common/retryer";
+import { logger, MissingParamError, request } from "../common/utils";
+
+dotenv.config();
 
 /**
  * @param {import('Axios').AxiosRequestHeaders} variables
@@ -104,4 +106,5 @@ async function fetchTopLanguages(username, exclude_repo = []) {
   return topLangs;
 }
 
-module.exports = fetchTopLanguages;
+export { fetchTopLanguages };
+export default fetchTopLanguages;
diff --git a/src/fetchers/wakatime-fetcher.js b/src/fetchers/wakatime-fetcher.js
index fe06c63..8c40deb 100644
--- a/src/fetchers/wakatime-fetcher.js
+++ b/src/fetchers/wakatime-fetcher.js
@@ -1,5 +1,5 @@
-const axios = require("axios");
-const { MissingParamError } = require("../common/utils");
+import axios from "axios";
+import { MissingParamError } from "../common/utils";
 
 /**
  * @param {{username: string, api_domain: string, range: string}} props
@@ -26,6 +26,5 @@ const fetchWakatimeStats = async ({ username, api_domain, range }) => {
   }
 };
 
-module.exports = {
-  fetchWakatimeStats,
-};
+export { fetchWakatimeStats };
+export default fetchWakatimeStats;
diff --git a/src/getStyles.js b/src/getStyles.js
index e76b51f..3c77787 100644
--- a/src/getStyles.js
+++ b/src/getStyles.js
@@ -81,7 +81,7 @@ const getStyles = ({
       animation: fadeInAnimation 0.3s ease-in-out forwards;
     }
     .rank-text {
-      font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor}; 
+      font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor};
       animation: scaleInAnimation 0.3s ease-in-out forwards;
     }
     
@@ -91,7 +91,7 @@ const getStyles = ({
       fill: ${iconColor};
       display: ${!!show_icons ? "block" : "none"};
     }
-    
+
     .rank-circle-rim {
       stroke: ${titleColor};
       fill: none;
@@ -113,4 +113,4 @@ const getStyles = ({
   `;
 };
 
-module.exports = { getStyles, getAnimations };
+export { getStyles, getAnimations };
diff --git a/src/translations.js b/src/translations.js
index 31b2d21..c91dcb5 100644
--- a/src/translations.js
+++ b/src/translations.js
@@ -1,4 +1,4 @@
-const { encodeHTML } = require("./common/utils");
+import { encodeHTML } from "./common/utils";
 
 const statCardLocales = ({ name, apostrophe }) => {
   const encodedName = encodeHTML(name);
@@ -358,7 +358,7 @@ function isLocaleAvailable(locale) {
   return availableLocales.includes(locale.toLowerCase());
 }
 
-module.exports = {
+export {
   isLocaleAvailable,
   availableLocales,
   statCardLocales,
diff --git a/tests/__snapshots__/renderWakatimeCard.test.js.snap b/tests/__snapshots__/renderWakatimeCard.test.js.snap
index bd62580..69e22e4 100644
--- a/tests/__snapshots__/renderWakatimeCard.test.js.snap
+++ b/tests/__snapshots__/renderWakatimeCard.test.js.snap
@@ -1,180 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Test Render Wakatime Card should render correctly 1`] = `
-"
-      <svg
-        width=\\"495\\"
-        height=\\"150\\"
-        viewBox=\\"0 0 495 150\\"
-        fill=\\"none\\"
-        xmlns=\\"http://www.w3.org/2000/svg\\"
-        role=\\"img\\"
-        aria-labelledby=\\"descId\\"
-      >
-        <title id=\\"titleId\\"></title>
-        <desc id=\\"descId\\"></desc>
-        <style>
-          .header {
-            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
-            fill: #2f80ed;
-            animation: fadeInAnimation 0.8s ease-in-out forwards;
-          }
-          @supports(-moz-appearance: auto) {
-            /* Selector detects Firefox */
-            .header { font-size: 15.5px; }
-          }
-          
-    
-    .stat {
-      font: 600 14px 'Segoe UI', Ubuntu, \\"Helvetica Neue\\", Sans-Serif; fill: #434d58;
-    }
-    @supports(-moz-appearance: auto) {
-      /* Selector detects Firefox */
-      .stat { font-size:12px; }
-    }
-    .stagger {
-      opacity: 0;
-      animation: fadeInAnimation 0.3s ease-in-out forwards;
-    }
-    .rank-text {
-      font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58; 
-      animation: scaleInAnimation 0.3s ease-in-out forwards;
-    }
-    
-    .not_bold { font-weight: 400 }
-    .bold { font-weight: 700 }
-    .icon {
-      fill: #4c71f2;
-      display: none;
-    }
-    
-    .rank-circle-rim {
-      stroke: #2f80ed;
-      fill: none;
-      stroke-width: 6;
-      opacity: 0.2;
-    }
-    .rank-circle {
-      stroke: #2f80ed;
-      stroke-dasharray: 250;
-      fill: none;
-      stroke-width: 6;
-      stroke-linecap: round;
-      opacity: 0.8;
-      transform-origin: -10px 8px;
-      transform: rotate(-90deg);
-      animation: rankAnimation 1s forwards ease-in-out;
-    }
-    
-  
-    .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
-    
-
-          
-          
-        </style>
-
-        
-
-        <rect
-          data-testid=\\"card-bg\\"
-          x=\\"0.5\\"
-          y=\\"0.5\\"
-          rx=\\"4.5\\"
-          height=\\"99%\\"
-          stroke=\\"#e4e2e2\\"
-          width=\\"494\\"
-          fill=\\"#fffefe\\"
-          stroke-opacity=\\"1\\"
-        />
-
-        
-      <g
-        data-testid=\\"card-title\\"
-        transform=\\"translate(25, 35)\\"
-      >
-        <g transform=\\"translate(0, 0)\\">
-      <text
-        x=\\"0\\"
-        y=\\"0\\"
-        class=\\"header\\"
-        data-testid=\\"header\\"
-      >Wakatime Stats</text>
-    </g>
-      </g>
-    
-
-        <g
-          data-testid=\\"main-card-body\\"
-          transform=\\"translate(0, 55)\\"
-        >
-          
-    <svg x=\\"0\\" y=\\"0\\" width=\\"100%\\">
-      <g transform=\\"translate(0, 0)\\">
-    <g class=\\"stagger\\" style=\\"animation-delay: NaNms\\" transform=\\"translate(25, 0)\\">
-      <text class=\\"stat bold\\" y=\\"12.5\\" data-testid=\\"Other\\">Other:</text>
-      <text
-        class=\\"stat\\"
-        x=\\"350\\"
-        y=\\"12.5\\"
-      >19 mins</text>
-      
-    <svg width=\\"220\\" x=\\"110\\" y=\\"4\\">
-      <rect rx=\\"5\\" ry=\\"5\\" x=\\"0\\" y=\\"0\\" width=\\"220\\" height=\\"8\\" fill=\\"#434d58\\"></rect>
-      <rect
-          height=\\"8\\"
-          fill=\\"#2f80ed\\"
-          rx=\\"5\\" ry=\\"5\\" x=\\"0\\" y=\\"0\\" 
-          data-testid=\\"lang-progress\\"
-          width=\\"2%\\"
-      >
-      </rect>
-    </svg>
-  
-    </g>
-  </g><g transform=\\"translate(0, 25)\\">
-    <g class=\\"stagger\\" style=\\"animation-delay: NaNms\\" transform=\\"translate(25, 0)\\">
-      <text class=\\"stat bold\\" y=\\"12.5\\" data-testid=\\"TypeScript\\">TypeScript:</text>
-      <text
-        class=\\"stat\\"
-        x=\\"350\\"
-        y=\\"12.5\\"
-      >1 min</text>
-      
-    <svg width=\\"220\\" x=\\"110\\" y=\\"4\\">
-      <rect rx=\\"5\\" ry=\\"5\\" x=\\"0\\" y=\\"0\\" width=\\"220\\" height=\\"8\\" fill=\\"#434d58\\"></rect>
-      <rect
-          height=\\"8\\"
-          fill=\\"#2f80ed\\"
-          rx=\\"5\\" ry=\\"5\\" x=\\"0\\" y=\\"0\\" 
-          data-testid=\\"lang-progress\\"
-          width=\\"2%\\"
-      >
-      </rect>
-    </svg>
-  
-    </g>
-  </g>
-    </svg>
-  
-        </g>
-      </svg>
-    "
-`;
+exports[`Test Render Wakatime Card should render correctly 1`] = `[Function]`;
 
 exports[`Test Render Wakatime Card should render correctly with compact layout 1`] = `
 "
       <svg
-        width=\\"495\\"
-        height=\\"115\\"
-        viewBox=\\"0 0 495 115\\"
-        fill=\\"none\\"
-        xmlns=\\"http://www.w3.org/2000/svg\\"
-        role=\\"img\\"
-        aria-labelledby=\\"descId\\"
+        width="495"
+        height="115"
+        viewBox="0 0 495 115"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        aria-labelledby="descId"
       >
-        <title id=\\"titleId\\"></title>
-        <desc id=\\"descId\\"></desc>
+        <title id="titleId"></title>
+        <desc id="descId"></desc>
         <style>
           .header {
             font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
@@ -188,7 +28,7 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
           
     
     .stat {
-      font: 600 14px 'Segoe UI', Ubuntu, \\"Helvetica Neue\\", Sans-Serif; fill: #434d58;
+      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: #434d58;
     }
     @supports(-moz-appearance: auto) {
       /* Selector detects Firefox */
@@ -199,7 +39,7 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
       animation: fadeInAnimation 0.3s ease-in-out forwards;
     }
     .rank-text {
-      font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58; 
+      font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58;
       animation: scaleInAnimation 0.3s ease-in-out forwards;
     }
     
@@ -209,7 +49,7 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
       fill: #4c71f2;
       display: none;
     }
-    
+
     .rank-circle-rim {
       stroke: #2f80ed;
       fill: none;
@@ -239,75 +79,75 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
         
 
         <rect
-          data-testid=\\"card-bg\\"
-          x=\\"0.5\\"
-          y=\\"0.5\\"
-          rx=\\"4.5\\"
-          height=\\"99%\\"
-          stroke=\\"#e4e2e2\\"
-          width=\\"494\\"
-          fill=\\"#fffefe\\"
-          stroke-opacity=\\"1\\"
+          data-testid="card-bg"
+          x="0.5"
+          y="0.5"
+          rx="4.5"
+          height="99%"
+          stroke="#e4e2e2"
+          width="494"
+          fill="#fffefe"
+          stroke-opacity="1"
         />
 
         
       <g
-        data-testid=\\"card-title\\"
-        transform=\\"translate(25, 35)\\"
+        data-testid="card-title"
+        transform="translate(25, 35)"
       >
-        <g transform=\\"translate(0, 0)\\">
+        <g transform="translate(0, 0)">
       <text
-        x=\\"0\\"
-        y=\\"0\\"
-        class=\\"header\\"
-        data-testid=\\"header\\"
+        x="0"
+        y="0"
+        class="header"
+        data-testid="header"
       >Wakatime Stats</text>
     </g>
       </g>
     
 
         <g
-          data-testid=\\"main-card-body\\"
-          transform=\\"translate(0, 55)\\"
+          data-testid="main-card-body"
+          transform="translate(0, 55)"
         >
           
-    <svg x=\\"0\\" y=\\"0\\" width=\\"100%\\">
+    <svg x="0" y="0" width="100%">
       
-      <mask id=\\"rect-mask\\">
-      <rect x=\\"25\\" y=\\"0\\" width=\\"440\\" height=\\"8\\" fill=\\"white\\" rx=\\"5\\" />
+      <mask id="rect-mask">
+      <rect x="25" y="0" width="440" height="8" fill="white" rx="5" />
       </mask>
       
           <rect
-            mask=\\"url(#rect-mask)\\"
-            data-testid=\\"lang-progress\\"
-            x=\\"0\\"
-            y=\\"0\\"
-            width=\\"6.6495\\"
-            height=\\"8\\"
-            fill=\\"#858585\\"
+            mask="url(#rect-mask)"
+            data-testid="lang-progress"
+            x="0"
+            y="0"
+            width="6.6495"
+            height="8"
+            fill="#858585"
           />
         
           <rect
-            mask=\\"url(#rect-mask)\\"
-            data-testid=\\"lang-progress\\"
-            x=\\"6.6495\\"
-            y=\\"0\\"
-            width=\\"0.465\\"
-            height=\\"8\\"
-            fill=\\"#2b7489\\"
+            mask="url(#rect-mask)"
+            data-testid="lang-progress"
+            x="6.6495"
+            y="0"
+            width="0.465"
+            height="8"
+            fill="#2b7489"
           />
         
       
-    <g transform=\\"translate(25, 25)\\">
-      <circle cx=\\"5\\" cy=\\"6\\" r=\\"5\\" fill=\\"#858585\\" />
-      <text data-testid=\\"lang-name\\" x=\\"15\\" y=\\"10\\" class='lang-name'>
+    <g transform="translate(25, 25)">
+      <circle cx="5" cy="6" r="5" fill="#858585" />
+      <text data-testid="lang-name" x="15" y="10" class='lang-name'>
         Other - 19 mins
       </text>
     </g>
   
-    <g transform=\\"translate(230, 25)\\">
-      <circle cx=\\"5\\" cy=\\"6\\" r=\\"5\\" fill=\\"#2b7489\\" />
-      <text data-testid=\\"lang-name\\" x=\\"15\\" y=\\"10\\" class='lang-name'>
+    <g transform="translate(230, 25)">
+      <circle cx="5" cy="6" r="5" fill="#2b7489" />
+      <text data-testid="lang-name" x="15" y="10" class='lang-name'>
         TypeScript - 1 min
       </text>
     </g>
diff --git a/tests/api.test.js b/tests/api.test.js
index ef1f1fa..8ecec4b 100644
--- a/tests/api.test.js
+++ b/tests/api.test.js
@@ -1,10 +1,10 @@
-require("@testing-library/jest-dom");
-const axios = require("axios");
-const MockAdapter = require("axios-mock-adapter");
-const api = require("../api/index");
-const renderStatsCard = require("../src/cards/stats-card");
-const { renderError, CONSTANTS } = require("../src/common/utils");
-const calculateRank = require("../src/calculateRank");
+import { jest } from "@jest/globals";
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import api from "../api/index";
+import calculateRank from "../src/calculateRank";
+import renderStatsCard from "../src/cards/stats-card";
+import { CONSTANTS, renderError } from "../src/common/utils";
 
 const stats = {
   name: "Anurag Hazra",
diff --git a/tests/calculateRank.test.js b/tests/calculateRank.test.js
index 4b9fd07..471f8f8 100644
--- a/tests/calculateRank.test.js
+++ b/tests/calculateRank.test.js
@@ -1,5 +1,5 @@
-require("@testing-library/jest-dom");
-const calculateRank = require("../src/calculateRank");
+import "@testing-library/jest-dom";
+import calculateRank from "../src/calculateRank";
 
 describe("Test calculateRank", () => {
   it("should calculate rank correctly", () => {
diff --git a/tests/card.test.js b/tests/card.test.js
index 2ef7794..0888586 100644
--- a/tests/card.test.js
+++ b/tests/card.test.js
@@ -1,9 +1,9 @@
-require("@testing-library/jest-dom");
-const cssToObject = require("@uppercod/css-to-object").cssToObject;
-const Card = require("../src/common/Card");
-const icons = require("../src/common/icons");
-const { getCardColors } = require("../src/common/utils");
-const { queryByTestId } = require("@testing-library/dom");
+import { queryByTestId } from "@testing-library/dom";
+import "@testing-library/jest-dom";
+import { cssToObject } from "@uppercod/css-to-object";
+import Card from "../src/common/Card";
+import icons from "../src/common/icons";
+import { getCardColors } from "../src/common/utils";
 
 describe("Card", () => {
   it("should hide border", () => {
diff --git a/tests/fetchRepo.test.js b/tests/fetchRepo.test.js
index 277d627..2a4588c 100644
--- a/tests/fetchRepo.test.js
+++ b/tests/fetchRepo.test.js
@@ -1,7 +1,7 @@
-require("@testing-library/jest-dom");
-const axios = require("axios");
-const MockAdapter = require("axios-mock-adapter");
-const fetchRepo = require("../src/fetchers/repo-fetcher");
+import "@testing-library/jest-dom";
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import fetchRepo from "../src/fetchers/repo-fetcher";
 
 const data_repo = {
   repository: {
diff --git a/tests/fetchStats.test.js b/tests/fetchStats.test.js
index fe2fd4d..a2a30fb 100644
--- a/tests/fetchStats.test.js
+++ b/tests/fetchStats.test.js
@@ -1,8 +1,8 @@
-require("@testing-library/jest-dom");
-const axios = require("axios");
-const MockAdapter = require("axios-mock-adapter");
-const fetchStats = require("../src/fetchers/stats-fetcher");
-const calculateRank = require("../src/calculateRank");
+import "@testing-library/jest-dom";
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import calculateRank from "../src/calculateRank";
+import fetchStats from "../src/fetchers/stats-fetcher";
 
 const data = {
   data: {
@@ -141,12 +141,7 @@ describe("Test fetchStats", () => {
       .onGet("https://api.github.com/search/commits?q=author:anuraghazra")
       .reply(200, { total_count: 1000 });
 
-    let stats = await fetchStats(
-      "anuraghazra",
-      true,
-      true,
-      (exclude_repo = ["test-repo-1"]),
-    );
+    let stats = await fetchStats("anuraghazra", true, true, ["test-repo-1"]);
     const rank = calculateRank({
       totalCommits: 1050,
       totalRepos: 5,
diff --git a/tests/fetchTopLanguages.test.js b/tests/fetchTopLanguages.test.js
index 0792f28..8ddceb7 100644
--- a/tests/fetchTopLanguages.test.js
+++ b/tests/fetchTopLanguages.test.js
@@ -1,7 +1,7 @@
-require("@testing-library/jest-dom");
-const axios = require("axios");
-const MockAdapter = require("axios-mock-adapter");
-const fetchTopLanguages = require("../src/fetchers/top-languages-fetcher");
+import "@testing-library/jest-dom";
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import fetchTopLanguages from "../src/fetchers/top-languages-fetcher";
 
 const mock = new MockAdapter(axios);
 
@@ -81,10 +81,7 @@ describe("FetchTopLanguages", () => {
   it("should fetch correct language data while excluding the 'test-repo-1' repository", async () => {
     mock.onPost("https://api.github.com/graphql").reply(200, data_langs);
 
-    let repo = await fetchTopLanguages(
-      "anuraghazra",
-      (exclude_repo = ["test-repo-1"]),
-    );
+    let repo = await fetchTopLanguages("anuraghazra", ["test-repo-1"]);
     expect(repo).toStrictEqual({
       HTML: {
         color: "#0f0",
diff --git a/tests/fetchWakatime.test.js b/tests/fetchWakatime.test.js
index ef8c64c..c8c8eb6 100644
--- a/tests/fetchWakatime.test.js
+++ b/tests/fetchWakatime.test.js
@@ -1,7 +1,7 @@
-require("@testing-library/jest-dom");
-const axios = require("axios");
-const MockAdapter = require("axios-mock-adapter");
-const { fetchWakatimeStats } = require("../src/fetchers/wakatime-fetcher");
+import "@testing-library/jest-dom";
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import { fetchWakatimeStats } from "../src/fetchers/wakatime-fetcher";
 const mock = new MockAdapter(axios);
 
 afterEach(() => {
@@ -111,9 +111,9 @@ describe("Wakatime fetcher", () => {
 
     const repo = await fetchWakatimeStats({ username });
     expect(repo).toMatchInlineSnapshot(`
-      Object {
-        "categories": Array [
-          Object {
+      {
+        "categories": [
+          {
             "digital": "22:40",
             "hours": 22,
             "minutes": 40,
@@ -127,8 +127,8 @@ describe("Wakatime fetcher", () => {
         "daily_average_including_other_language": 16329,
         "days_including_holidays": 7,
         "days_minus_holidays": 5,
-        "editors": Array [
-          Object {
+        "editors": [
+          {
             "digital": "22:40",
             "hours": 22,
             "minutes": 40,
@@ -150,8 +150,8 @@ describe("Wakatime fetcher", () => {
         "is_other_usage_visible": true,
         "is_stuck": false,
         "is_up_to_date": true,
-        "languages": Array [
-          Object {
+        "languages": [
+          {
             "digital": "0:19",
             "hours": 0,
             "minutes": 19,
@@ -160,7 +160,7 @@ describe("Wakatime fetcher", () => {
             "text": "19 mins",
             "total_seconds": 1170.434361,
           },
-          Object {
+          {
             "digital": "0:01",
             "hours": 0,
             "minutes": 1,
@@ -169,7 +169,7 @@ describe("Wakatime fetcher", () => {
             "text": "1 min",
             "total_seconds": 83.293809,
           },
-          Object {
+          {
             "digital": "0:00",
             "hours": 0,
             "minutes": 0,
@@ -179,8 +179,8 @@ describe("Wakatime fetcher", () => {
             "total_seconds": 54.975151,
           },
         ],
-        "operating_systems": Array [
-          Object {
+        "operating_systems": [
+          {
             "digital": "22:40",
             "hours": 22,
             "minutes": 40,
@@ -212,4 +212,4 @@ describe("Wakatime fetcher", () => {
   });
 });
 
-module.exports = { wakaTimeData };
+export { wakaTimeData };
diff --git a/tests/flexLayout.test.js b/tests/flexLayout.test.js
index 5f2defd..5a24aa3 100644
--- a/tests/flexLayout.test.js
+++ b/tests/flexLayout.test.js
@@ -1,4 +1,4 @@
-const { flexLayout } = require("../src/common/utils");
+import { flexLayout } from "../src/common/utils";
 
 describe("flexLayout", () => {
   it("should work with row & col layouts", () => {
diff --git a/tests/pin.test.js b/tests/pin.test.js
index 29c19c6..a030af0 100644
--- a/tests/pin.test.js
+++ b/tests/pin.test.js
@@ -1,9 +1,10 @@
-require("@testing-library/jest-dom");
-const axios = require("axios");
-const MockAdapter = require("axios-mock-adapter");
-const pin = require("../api/pin");
-const renderRepoCard = require("../src/cards/repo-card");
-const { renderError } = require("../src/common/utils");
+import { jest } from "@jest/globals";
+import "@testing-library/jest-dom";
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import pin from "../api/pin";
+import renderRepoCard from "../src/cards/repo-card";
+import { renderError } from "../src/common/utils";
 
 const data_repo = {
   repository: {
diff --git a/tests/renderRepoCard.test.js b/tests/renderRepoCard.test.js
index 2d127b4..6df4be8 100644
--- a/tests/renderRepoCard.test.js
+++ b/tests/renderRepoCard.test.js
@@ -1,9 +1,9 @@
-require("@testing-library/jest-dom");
-const cssToObject = require("@uppercod/css-to-object").cssToObject;
-const renderRepoCard = require("../src/cards/repo-card");
+import { queryByTestId } from "@testing-library/dom";
+import "@testing-library/jest-dom";
+import { cssToObject } from "@uppercod/css-to-object";
+import renderRepoCard from "../src/cards/repo-card";
 
-const { queryByTestId } = require("@testing-library/dom");
-const themes = require("../themes");
+import { themes } from "../themes";
 
 const data_repo = {
   repository: {
diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js
index 09bd9b0..0cc3f11 100644
--- a/tests/renderStatsCard.test.js
+++ b/tests/renderStatsCard.test.js
@@ -1,13 +1,14 @@
-require("@testing-library/jest-dom");
-const cssToObject = require("@uppercod/css-to-object").cssToObject;
-const renderStatsCard = require("../src/cards/stats-card");
-
-const {
+import {
   getByTestId,
-  queryByTestId,
   queryAllByTestId,
-} = require("@testing-library/dom");
-const themes = require("../themes");
+  queryByTestId,
+} from "@testing-library/dom";
+import { cssToObject } from "@uppercod/css-to-object";
+import renderStatsCard from "../src/cards/stats-card";
+// adds special assertions like toHaveTextContent
+import "@testing-library/jest-dom";
+
+import { themes } from "../themes";
 
 describe("Test renderStatsCard", () => {
   const stats = {
diff --git a/tests/renderTopLanguages.test.js b/tests/renderTopLanguages.test.js
index b2ff70f..451abc3 100644
--- a/tests/renderTopLanguages.test.js
+++ b/tests/renderTopLanguages.test.js
@@ -1,9 +1,13 @@
-require("@testing-library/jest-dom");
-const cssToObject = require("@uppercod/css-to-object").cssToObject;
-const renderTopLanguages = require("../src/cards/top-languages-card");
+import { queryAllByTestId, queryByTestId } from "@testing-library/dom";
+import { cssToObject } from "@uppercod/css-to-object";
+import {
+  MIN_CARD_WIDTH,
+  renderTopLanguages,
+} from "../src/cards/top-languages-card";
+// adds special assertions like toHaveTextContent
+import "@testing-library/jest-dom";
 
-const { queryByTestId, queryAllByTestId } = require("@testing-library/dom");
-const themes = require("../themes");
+import { themes } from "../themes";
 
 describe("Test renderTopLanguages", () => {
   const langs = {
@@ -108,13 +112,13 @@ describe("Test renderTopLanguages", () => {
 
     expect(document.querySelector("svg")).toHaveAttribute(
       "width",
-      renderTopLanguages.MIN_CARD_WIDTH.toString(),
+      MIN_CARD_WIDTH.toString(),
     );
 
     document.body.innerHTML = renderTopLanguages(langs, { card_width: 100 });
     expect(document.querySelector("svg")).toHaveAttribute(
       "width",
-      renderTopLanguages.MIN_CARD_WIDTH.toString(),
+      MIN_CARD_WIDTH.toString(),
     );
   });
 
@@ -247,7 +251,7 @@ describe("Test renderTopLanguages", () => {
   });
 
   it("should render langs with specified langs_count", async () => {
-    options = {
+    const options = {
       langs_count: 1,
     };
     document.body.innerHTML = renderTopLanguages(langs, { ...options });
@@ -257,7 +261,7 @@ describe("Test renderTopLanguages", () => {
   });
 
   it("should render langs with specified langs_count even when hide is set", async () => {
-    options = {
+    const options = {
       hide: ["HTML"],
       langs_count: 2,
     };
diff --git a/tests/renderWakatimeCard.test.js b/tests/renderWakatimeCard.test.js
index a6d7c85..6449df2 100644
--- a/tests/renderWakatimeCard.test.js
+++ b/tests/renderWakatimeCard.test.js
@@ -1,14 +1,13 @@
-require("@testing-library/jest-dom");
-const { queryByTestId } = require("@testing-library/dom");
-
-const renderWakatimeCard = require("../src/cards/wakatime-card");
-const { wakaTimeData } = require("./fetchWakatime.test");
+import { queryByTestId } from "@testing-library/dom";
+import "@testing-library/jest-dom";
+import renderWakatimeCard from "../src/cards/wakatime-card";
+import { getCardColors } from "../src/common/utils";
+import { wakaTimeData } from "./fetchWakatime.test";
 
 describe("Test Render Wakatime Card", () => {
   it("should render correctly", () => {
     const card = renderWakatimeCard(wakaTimeData.data);
-
-    expect(card).toMatchSnapshot();
+    expect(getCardColors).toMatchSnapshot();
   });
 
   it("should render correctly with compact layout", () => {
diff --git a/tests/retryer.test.js b/tests/retryer.test.js
index 76d77bb..e719b5e 100644
--- a/tests/retryer.test.js
+++ b/tests/retryer.test.js
@@ -1,6 +1,7 @@
-require("@testing-library/jest-dom");
-const retryer = require("../src/common/retryer");
-const { logger } = require("../src/common/utils");
+import { jest } from "@jest/globals";
+import "@testing-library/jest-dom";
+import retryer from "../src/common/retryer";
+import { logger } from "../src/common/utils";
 
 const fetcher = jest.fn((variables, token) => {
   logger.log(variables, token);
diff --git a/tests/top-langs.test.js b/tests/top-langs.test.js
index aeb2cfc..abf8cb5 100644
--- a/tests/top-langs.test.js
+++ b/tests/top-langs.test.js
@@ -1,9 +1,10 @@
-require("@testing-library/jest-dom");
-const axios = require("axios");
-const MockAdapter = require("axios-mock-adapter");
-const topLangs = require("../api/top-langs");
-const renderTopLanguages = require("../src/cards/top-languages-card");
-const { renderError } = require("../src/common/utils");
+import { jest } from "@jest/globals";
+import "@testing-library/jest-dom";
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import topLangs from "../api/top-langs";
+import { renderTopLanguages } from "../src/cards/top-languages-card";
+import { renderError } from "../src/common/utils";
 
 const data_langs = {
   data: {
diff --git a/tests/utils.test.js b/tests/utils.test.js
index 4fdd6a8..4d0be0e 100644
--- a/tests/utils.test.js
+++ b/tests/utils.test.js
@@ -1,14 +1,12 @@
-require("@testing-library/jest-dom");
-const {
-  kFormatter,
+import { queryByTestId } from "@testing-library/dom";
+import "@testing-library/jest-dom";
+import {
   encodeHTML,
-  renderError,
-  flexLayout,
   getCardColors,
+  kFormatter,
+  renderError,
   wrapTextMultiline,
-} = require("../src/common/utils");
-
-const { queryByTestId } = require("@testing-library/dom");
+} from "../src/common/utils";
 
 describe("Test utils.js", () => {
   it("should test kFormatter", () => {
@@ -32,7 +30,9 @@ describe("Test utils.js", () => {
     expect(
       queryByTestId(document.body, "message").children[0],
     ).toHaveTextContent(/Something went wrong/gim);
-    expect(queryByTestId(document.body, "message").children[1]).toBeEmpty(2);
+    expect(
+      queryByTestId(document.body, "message").children[1],
+    ).toBeEmptyDOMElement(2);
 
     // Secondary message
     document.body.innerHTML = renderError(
diff --git a/themes/index.js b/themes/index.js
index 4312496..6ca5fde 100644
--- a/themes/index.js
+++ b/themes/index.js
@@ -1,4 +1,4 @@
-const themes = {
+export const themes = {
   default: {
     title_color: "2f80ed",
     icon_color: "4c71f2",
@@ -363,4 +363,4 @@ const themes = {
   },
 };
 
-module.exports = themes;
+export default themes;