diff --git a/api/index.js b/api/index.js
index 64231a5..df4a32a 100644
--- a/api/index.js
+++ b/api/index.js
@@ -1,15 +1,15 @@
+import * as dotenv from "dotenv";
+import renderStatsCard from "../src/cards/stats-card.js";
+import blacklist from "../src/common/blacklist.js";
 import {
-  renderError,
-  parseBoolean,
-  parseArray,
   clampValue,
   CONSTANTS,
-} 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";
+  parseArray,
+  parseBoolean,
+  renderError,
+} from "../src/common/utils.js";
+import fetchStats from "../src/fetchers/stats-fetcher.js";
+import { isLocaleAvailable } from "../src/translations.js";
 
 dotenv.config();
 
diff --git a/api/pin.js b/api/pin.js
index 1902388..20432f9 100644
--- a/api/pin.js
+++ b/api/pin.js
@@ -1,13 +1,13 @@
+import renderRepoCard from "../src/cards/repo-card.js";
+import blacklist from "../src/common/blacklist.js";
 import {
-  renderError,
-  parseBoolean,
   clampValue,
   CONSTANTS,
-} 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";
+  parseBoolean,
+  renderError,
+} from "../src/common/utils.js";
+import fetchRepo from "../src/fetchers/repo-fetcher.js";
+import { isLocaleAvailable } from "../src/translations.js";
 
 export default async (req, res) => {
   const {
diff --git a/api/top-langs.js b/api/top-langs.js
index d83d9d6..c3c0ec7 100644
--- a/api/top-langs.js
+++ b/api/top-langs.js
@@ -1,15 +1,15 @@
-import {
-  renderError,
-  clampValue,
-  parseBoolean,
-  parseArray,
-  CONSTANTS,
-} 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";
+import { renderTopLanguages } from "../src/cards/top-languages-card.js";
+import blacklist from "../src/common/blacklist.js";
+import {
+  clampValue,
+  CONSTANTS,
+  parseArray,
+  parseBoolean,
+  renderError,
+} from "../src/common/utils.js";
+import fetchTopLanguages from "../src/fetchers/top-languages-fetcher.js";
+import { isLocaleAvailable } from "../src/translations.js";
 
 dotenv.config();
 
diff --git a/api/wakatime.js b/api/wakatime.js
index 8e27e2f..7879008 100644
--- a/api/wakatime.js
+++ b/api/wakatime.js
@@ -1,14 +1,14 @@
-import {
-  renderError,
-  parseBoolean,
-  clampValue,
-  parseArray,
-  CONSTANTS,
-} 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";
+import wakatimeCard from "../src/cards/wakatime-card.js";
+import {
+  clampValue,
+  CONSTANTS,
+  parseArray,
+  parseBoolean,
+  renderError,
+} from "../src/common/utils.js";
+import fetchWakatimeStats from "../src/fetchers/wakatime-fetcher.js";
+import { isLocaleAvailable } from "../src/translations.js";
 
 dotenv.config();
 
diff --git a/src/cards/repo-card.js b/src/cards/repo-card.js
index 61073be..7c9c4b5 100644
--- a/src/cards/repo-card.js
+++ b/src/cards/repo-card.js
@@ -1,7 +1,7 @@
 // @ts-check
-import { Card } from "../common/Card";
-import { I18n } from "../common/I18n";
-import { icons } from "../common/icons";
+import { Card } from "../common/Card.js";
+import { I18n } from "../common/I18n.js";
+import { icons } from "../common/icons.js";
 import {
   encodeHTML,
   flexLayout,
@@ -10,8 +10,8 @@ import {
   measureText,
   parseEmojis,
   wrapTextMultiline,
-} from "../common/utils";
-import { repoCardLocales } from "../translations";
+} from "../common/utils.js";
+import { repoCardLocales } from "../translations.js";
 
 /**
  * @param {string} label
diff --git a/src/cards/stats-card.js b/src/cards/stats-card.js
index 962c1e4..4b0cd33 100644
--- a/src/cards/stats-card.js
+++ b/src/cards/stats-card.js
@@ -1,16 +1,16 @@
 // @ts-check
-import { Card } from "../common/Card";
-import { I18n } from "../common/I18n";
-import { icons } from "../common/icons";
+import { Card } from "../common/Card.js";
+import { I18n } from "../common/I18n.js";
+import { icons } from "../common/icons.js";
 import {
   clampValue,
   flexLayout,
   getCardColors,
   kFormatter,
   measureText,
-} from "../common/utils";
-import { getStyles } from "../getStyles";
-import { statCardLocales } from "../translations";
+} from "../common/utils.js";
+import { getStyles } from "../getStyles.js";
+import { statCardLocales } from "../translations.js";
 
 const createTextNode = ({
   icon,
diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js
index d8c1825..b181fc1 100644
--- a/src/cards/top-languages-card.js
+++ b/src/cards/top-languages-card.js
@@ -1,7 +1,7 @@
 // @ts-check
-import { Card } from "../common/Card";
-import { createProgressNode } from "../common/createProgressNode";
-import { I18n } from "../common/I18n";
+import { Card } from "../common/Card.js";
+import { createProgressNode } from "../common/createProgressNode.js";
+import { I18n } from "../common/I18n.js";
 import {
   chunkArray,
   clampValue,
@@ -9,8 +9,8 @@ import {
   getCardColors,
   lowercaseTrim,
   measureText,
-} from "../common/utils";
-import { langCardLocales } from "../translations";
+} from "../common/utils.js";
+import { langCardLocales } from "../translations.js";
 
 const DEFAULT_CARD_WIDTH = 300;
 const MIN_CARD_WIDTH = 230;
diff --git a/src/cards/types.d.ts b/src/cards/types.d.ts
index 46bf665..502314c 100644
--- a/src/cards/types.d.ts
+++ b/src/cards/types.d.ts
@@ -1,4 +1,4 @@
-type ThemeNames = keyof typeof import("../../themes");
+type ThemeNames = keyof typeof import("../../themes/index.js");
 
 export type CommonOptions = {
   title_color: string;
diff --git a/src/cards/wakatime-card.js b/src/cards/wakatime-card.js
index 2f30b94..558505c 100644
--- a/src/cards/wakatime-card.js
+++ b/src/cards/wakatime-card.js
@@ -1,17 +1,16 @@
 // @ts-check
-import { Card } from "../common/Card";
-import { createProgressNode } from "../common/createProgressNode";
-import { I18n } from "../common/I18n";
-import languageColors from "../common/languageColors.json";
+import { Card } from "../common/Card.js";
+import { createProgressNode } from "../common/createProgressNode.js";
+import { I18n } from "../common/I18n.js";
+import languageColors from "../common/languageColors.json" assert { type: "json" };
 import {
   clampValue,
   flexLayout,
   getCardColors,
   lowercaseTrim,
-} from "../common/utils";
-import { getStyles } from "../getStyles";
-import { wakatimeCardLocales } from "../translations";
-
+} from "../common/utils.js";
+import { getStyles } from "../getStyles.js";
+import { wakatimeCardLocales } from "../translations.js";
 /**
  * @param {{color: string, text: string}} param0
  */
diff --git a/src/common/Card.js b/src/common/Card.js
index 24ec443..347ea52 100644
--- a/src/common/Card.js
+++ b/src/common/Card.js
@@ -1,5 +1,5 @@
-import { encodeHTML, flexLayout } from "../common/utils";
-import { getAnimations } from "../getStyles";
+import { encodeHTML, flexLayout } from "../common/utils.js";
+import { getAnimations } from "../getStyles.js";
 
 class Card {
   /**
@@ -10,7 +10,7 @@ class Card {
    * @param {string?=} args.customTitle
    * @param {string?=} args.defaultTitle
    * @param {string?=} args.titlePrefixIcon
-   * @param {ReturnType<import('../common/utils').getCardColors>?=} args.colors
+   * @param {ReturnType<import('../common/utils.js').getCardColors>?=} args.colors
    */
   constructor({
     width = 100,
diff --git a/src/common/createProgressNode.js b/src/common/createProgressNode.js
index 80abc8f..ea658eb 100644
--- a/src/common/createProgressNode.js
+++ b/src/common/createProgressNode.js
@@ -1,4 +1,4 @@
-import { clampValue } from "../common/utils";
+import { clampValue } from "../common/utils.js";
 
 const createProgressNode = ({
   x,
diff --git a/src/common/retryer.js b/src/common/retryer.js
index f37aaa4..5fcbc07 100644
--- a/src/common/retryer.js
+++ b/src/common/retryer.js
@@ -1,4 +1,4 @@
-import { CustomError, logger } from "../common/utils";
+import { CustomError, logger } from "../common/utils.js";
 
 const retryer = async (fetcher, variables, retries = 0) => {
   if (retries > 7) {
diff --git a/src/common/utils.js b/src/common/utils.js
index 042b635..7660bbd 100644
--- a/src/common/utils.js
+++ b/src/common/utils.js
@@ -2,7 +2,7 @@
 import axios from "axios";
 import toEmoji from "emoji-name-map";
 import wrap from "word-wrap";
-import { themes } from "../../themes";
+import { themes } from "../../themes/index.js";
 
 /**
  * @param {string} message
diff --git a/src/fetchers/repo-fetcher.js b/src/fetchers/repo-fetcher.js
index c55c3d7..37bce0e 100644
--- a/src/fetchers/repo-fetcher.js
+++ b/src/fetchers/repo-fetcher.js
@@ -1,6 +1,6 @@
 // @ts-check
-import { retryer } from "../common/retryer";
-import { MissingParamError, request } from "../common/utils";
+import { retryer } from "../common/retryer.js";
+import { MissingParamError, request } from "../common/utils.js";
 
 /**
  * @param {import('Axios').AxiosRequestHeaders} variables
diff --git a/src/fetchers/stats-fetcher.js b/src/fetchers/stats-fetcher.js
index cb13255..b9493ad 100644
--- a/src/fetchers/stats-fetcher.js
+++ b/src/fetchers/stats-fetcher.js
@@ -2,14 +2,14 @@
 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 { calculateRank } from "../calculateRank.js";
+import { retryer } from "../common/retryer.js";
 import {
   CustomError,
   logger,
   MissingParamError,
   request,
-} from "../common/utils";
+} from "../common/utils.js";
 
 dotenv.config();
 
diff --git a/src/fetchers/top-languages-fetcher.js b/src/fetchers/top-languages-fetcher.js
index 555fb06..181375d 100644
--- a/src/fetchers/top-languages-fetcher.js
+++ b/src/fetchers/top-languages-fetcher.js
@@ -1,7 +1,7 @@
 // @ts-check
 import * as dotenv from "dotenv";
-import { retryer } from "../common/retryer";
-import { logger, MissingParamError, request } from "../common/utils";
+import { retryer } from "../common/retryer.js";
+import { logger, MissingParamError, request } from "../common/utils.js";
 
 dotenv.config();
 
diff --git a/src/fetchers/wakatime-fetcher.js b/src/fetchers/wakatime-fetcher.js
index 8c40deb..97adcdc 100644
--- a/src/fetchers/wakatime-fetcher.js
+++ b/src/fetchers/wakatime-fetcher.js
@@ -1,5 +1,5 @@
 import axios from "axios";
-import { MissingParamError } from "../common/utils";
+import { MissingParamError } from "../common/utils.js";
 
 /**
  * @param {{username: string, api_domain: string, range: string}} props
diff --git a/src/translations.js b/src/translations.js
index c91dcb5..3f931bc 100644
--- a/src/translations.js
+++ b/src/translations.js
@@ -1,4 +1,4 @@
-import { encodeHTML } from "./common/utils";
+import { encodeHTML } from "./common/utils.js";
 
 const statCardLocales = ({ name, apostrophe }) => {
   const encodedName = encodeHTML(name);
diff --git a/tests/api.test.js b/tests/api.test.js
index 8ecec4b..3aa859d 100644
--- a/tests/api.test.js
+++ b/tests/api.test.js
@@ -1,10 +1,10 @@
 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";
+import api from "../api/index.js";
+import calculateRank from "../src/calculateRank.js";
+import renderStatsCard from "../src/cards/stats-card.js";
+import { CONSTANTS, renderError } from "../src/common/utils.js";
 
 const stats = {
   name: "Anurag Hazra",
diff --git a/tests/calculateRank.test.js b/tests/calculateRank.test.js
index 471f8f8..487a17f 100644
--- a/tests/calculateRank.test.js
+++ b/tests/calculateRank.test.js
@@ -1,5 +1,5 @@
 import "@testing-library/jest-dom";
-import calculateRank from "../src/calculateRank";
+import calculateRank from "../src/calculateRank.js";
 
 describe("Test calculateRank", () => {
   it("should calculate rank correctly", () => {
diff --git a/tests/card.test.js b/tests/card.test.js
index 0888586..bd13f40 100644
--- a/tests/card.test.js
+++ b/tests/card.test.js
@@ -1,9 +1,9 @@
 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";
+import Card from "../src/common/Card.js";
+import icons from "../src/common/icons.js";
+import { getCardColors } from "../src/common/utils.js";
 
 describe("Card", () => {
   it("should hide border", () => {
diff --git a/tests/fetchRepo.test.js b/tests/fetchRepo.test.js
index 2a4588c..549a0e0 100644
--- a/tests/fetchRepo.test.js
+++ b/tests/fetchRepo.test.js
@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom";
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
-import fetchRepo from "../src/fetchers/repo-fetcher";
+import fetchRepo from "../src/fetchers/repo-fetcher.js";
 
 const data_repo = {
   repository: {
diff --git a/tests/fetchStats.test.js b/tests/fetchStats.test.js
index a2a30fb..528560c 100644
--- a/tests/fetchStats.test.js
+++ b/tests/fetchStats.test.js
@@ -1,8 +1,8 @@
 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";
+import calculateRank from "../src/calculateRank.js";
+import fetchStats from "../src/fetchers/stats-fetcher.js";
 
 const data = {
   data: {
diff --git a/tests/fetchTopLanguages.test.js b/tests/fetchTopLanguages.test.js
index 8ddceb7..f08002a 100644
--- a/tests/fetchTopLanguages.test.js
+++ b/tests/fetchTopLanguages.test.js
@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom";
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
-import fetchTopLanguages from "../src/fetchers/top-languages-fetcher";
+import fetchTopLanguages from "../src/fetchers/top-languages-fetcher.js";
 
 const mock = new MockAdapter(axios);
 
diff --git a/tests/fetchWakatime.test.js b/tests/fetchWakatime.test.js
index c8c8eb6..47ca25b 100644
--- a/tests/fetchWakatime.test.js
+++ b/tests/fetchWakatime.test.js
@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom";
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
-import { fetchWakatimeStats } from "../src/fetchers/wakatime-fetcher";
+import { fetchWakatimeStats } from "../src/fetchers/wakatime-fetcher.js";
 const mock = new MockAdapter(axios);
 
 afterEach(() => {
diff --git a/tests/flexLayout.test.js b/tests/flexLayout.test.js
index 5a24aa3..702cedb 100644
--- a/tests/flexLayout.test.js
+++ b/tests/flexLayout.test.js
@@ -1,4 +1,4 @@
-import { flexLayout } from "../src/common/utils";
+import { flexLayout } from "../src/common/utils.js";
 
 describe("flexLayout", () => {
   it("should work with row & col layouts", () => {
diff --git a/tests/pin.test.js b/tests/pin.test.js
index a030af0..50fb4de 100644
--- a/tests/pin.test.js
+++ b/tests/pin.test.js
@@ -2,9 +2,9 @@ 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";
+import pin from "../api/pin.js";
+import renderRepoCard from "../src/cards/repo-card.js";
+import { renderError } from "../src/common/utils.js";
 
 const data_repo = {
   repository: {
diff --git a/tests/renderRepoCard.test.js b/tests/renderRepoCard.test.js
index 6df4be8..8bd0b61 100644
--- a/tests/renderRepoCard.test.js
+++ b/tests/renderRepoCard.test.js
@@ -1,9 +1,9 @@
 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";
+import renderRepoCard from "../src/cards/repo-card.js";
 
-import { themes } from "../themes";
+import { themes } from "../themes/index.js";
 
 const data_repo = {
   repository: {
diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js
index 0cc3f11..f61fde5 100644
--- a/tests/renderStatsCard.test.js
+++ b/tests/renderStatsCard.test.js
@@ -4,11 +4,11 @@ import {
   queryByTestId,
 } from "@testing-library/dom";
 import { cssToObject } from "@uppercod/css-to-object";
-import renderStatsCard from "../src/cards/stats-card";
+import renderStatsCard from "../src/cards/stats-card.js";
 // adds special assertions like toHaveTextContent
 import "@testing-library/jest-dom";
 
-import { themes } from "../themes";
+import { themes } from "../themes/index.js";
 
 describe("Test renderStatsCard", () => {
   const stats = {
diff --git a/tests/renderTopLanguages.test.js b/tests/renderTopLanguages.test.js
index 451abc3..8c6bcbe 100644
--- a/tests/renderTopLanguages.test.js
+++ b/tests/renderTopLanguages.test.js
@@ -3,11 +3,11 @@ import { cssToObject } from "@uppercod/css-to-object";
 import {
   MIN_CARD_WIDTH,
   renderTopLanguages,
-} from "../src/cards/top-languages-card";
+} from "../src/cards/top-languages-card.js";
 // adds special assertions like toHaveTextContent
 import "@testing-library/jest-dom";
 
-import { themes } from "../themes";
+import { themes } from "../themes/index.js";
 
 describe("Test renderTopLanguages", () => {
   const langs = {
diff --git a/tests/renderWakatimeCard.test.js b/tests/renderWakatimeCard.test.js
index 6449df2..b3e3870 100644
--- a/tests/renderWakatimeCard.test.js
+++ b/tests/renderWakatimeCard.test.js
@@ -1,8 +1,8 @@
 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";
+import renderWakatimeCard from "../src/cards/wakatime-card.js";
+import { getCardColors } from "../src/common/utils.js";
+import { wakaTimeData } from "./fetchWakatime.test.js";
 
 describe("Test Render Wakatime Card", () => {
   it("should render correctly", () => {
diff --git a/tests/retryer.test.js b/tests/retryer.test.js
index e719b5e..8991cbb 100644
--- a/tests/retryer.test.js
+++ b/tests/retryer.test.js
@@ -1,7 +1,7 @@
 import { jest } from "@jest/globals";
 import "@testing-library/jest-dom";
-import retryer from "../src/common/retryer";
-import { logger } from "../src/common/utils";
+import retryer from "../src/common/retryer.js";
+import { logger } from "../src/common/utils.js";
 
 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 abf8cb5..b5232c2 100644
--- a/tests/top-langs.test.js
+++ b/tests/top-langs.test.js
@@ -2,9 +2,9 @@ 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";
+import topLangs from "../api/top-langs.js";
+import { renderTopLanguages } from "../src/cards/top-languages-card.js";
+import { renderError } from "../src/common/utils.js";
 
 const data_langs = {
   data: {
diff --git a/tests/utils.test.js b/tests/utils.test.js
index 4d0be0e..b6e4a3b 100644
--- a/tests/utils.test.js
+++ b/tests/utils.test.js
@@ -6,7 +6,7 @@ import {
   kFormatter,
   renderError,
   wrapTextMultiline,
-} from "../src/common/utils";
+} from "../src/common/utils.js";
 
 describe("Test utils.js", () => {
   it("should test kFormatter", () => {