diff --git a/explorer-v2/next.config.ts b/explorer-v2/next.config.ts
index e9ffa3083a..9c0e03fea6 100644
--- a/explorer-v2/next.config.ts
+++ b/explorer-v2/next.config.ts
@@ -1,7 +1,23 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  reactStrictMode: true,
+
+  basePath: "/explorer",
+  assetPrefix: "/explorer",
+  trailingSlash: false,
+
+  async redirects() {
+    return [
+      // Change the basePath to /explorer
+      {
+        source: "/",
+        destination: "/explorer",
+        basePath: false,
+        permanent: true,
+      },
+    ]
+  }
 };
 
 export default nextConfig;
diff --git a/explorer-v2/src/components/blogs/BlogArticleCards.tsx b/explorer-v2/src/components/blogs/BlogArticleCards.tsx
index 783da83c0e..cb2506a0e4 100644
--- a/explorer-v2/src/components/blogs/BlogArticleCards.tsx
+++ b/explorer-v2/src/components/blogs/BlogArticleCards.tsx
@@ -3,6 +3,7 @@ import path from "node:path";
 import Grid from "@mui/material/Grid2";
 import ExplorerHeroCard from "../cards/ExplorerHeroCard";
 import type { BlogArticleWithLink } from "./types";
+import { icons, IconName } from "@/utils/getIconByName";
 
 // TODO: Articles should be sorted by date
 
@@ -73,7 +74,7 @@ const BlogArticlesCards = async ({
             label={blogArticle.label}
             title={blogArticle.title}
             description={blogArticle.description}
-            icon={blogArticle.icon}
+            icon={icons[blogArticle.icon as IconName]?.src}
             link={blogArticle.link || ""}
             sx={{ height: "100%" }}
           />
diff --git a/explorer-v2/src/components/footer/NewsLetterSignUp.tsx b/explorer-v2/src/components/footer/NewsLetterSignUp.tsx
index 0d2eb275b6..0f1fdffb08 100644
--- a/explorer-v2/src/components/footer/NewsLetterSignUp.tsx
+++ b/explorer-v2/src/components/footer/NewsLetterSignUp.tsx
@@ -1,8 +1,7 @@
 "use client";
 // Types
 
-import Arrow from "../../../public/icons/arrow.svg";
-
+import { icons } from "@/utils/getIconByName";
 // MUI Components
 import { Box, Button, Input } from "@mui/material";
 import Image from "next/image";
@@ -57,7 +56,7 @@ export const NewsletterSignUp = () => {
           },
         }}
       >
-        <Image src={Arrow} alt={"arrow icon"} width={15} height={15} />
+        <Image src={icons.arrow} alt={"arrow icon"} width={15} height={15} />
       </Button>
     </Box>
   );
diff --git a/explorer-v2/src/components/footer/SocialIcon.tsx b/explorer-v2/src/components/footer/SocialIcon.tsx
index 20f3836513..5678edda0f 100644
--- a/explorer-v2/src/components/footer/SocialIcon.tsx
+++ b/explorer-v2/src/components/footer/SocialIcon.tsx
@@ -1,29 +1,21 @@
 "use client";
 import Image from "next/image";
-import Discord from "../../../public/icons/discord.svg";
-import GitHub from "../../../public/icons/github.svg";
-// Icons
-import Telegram from "../../../public/icons/telegram.svg";
-import X from "../../../public/icons/twitter.svg";
-import YouTube from "../../../public/icons/youtube.svg";
-import YouTubeInverted from "../../../public/icons/youtubeInverted.svg";
-
-export const icons: { [key: string]: React.ComponentType } = {
-  telegram: Telegram,
-  youtube: YouTube,
-  discord: Discord,
-  github: GitHub,
-  twitter: X,
-};
+import { icons } from "@/utils/getIconByName";
 
 // import { useMainContext } from "@/context";
 export const SocialIcon = ({ channel }: { channel: string }): JSX.Element => {
   // const { mode } = useMainContext();
   const modeType = "light";
 
-  const iconSrc =
-    modeType === "light" && channel.toLowerCase() === "youtube"
-      ? YouTubeInverted
-      : icons[channel.toLowerCase()];
+  // ✅ Normalize channel name & apply theme logic
+  const normalizedChannel = channel.toLowerCase();
+  const iconName =
+    modeType === "light" && normalizedChannel === "youtube"
+      ? "youTubeInverted"
+      : (normalizedChannel as keyof typeof icons);
+
+  // ✅ Get the icon source dynamically
+  const iconSrc = icons[iconName]?.src || "/icons/default-icon.svg";
+
   return <Image src={iconSrc} alt={channel} width={32} height={32} />;
 };
diff --git a/explorer-v2/src/components/header/navigationIcons.ts b/explorer-v2/src/components/header/navigationIcons.ts
index d9b9ea5fe4..75ac777ffa 100644
--- a/explorer-v2/src/components/header/navigationIcons.ts
+++ b/explorer-v2/src/components/header/navigationIcons.ts
@@ -1,7 +1,6 @@
-import Document from "@/public/icons/document.svg";
-import Download from "@/public/icons/download.svg";
+import { icons } from "@/utils/getIconByName";
 
 export const NavigationIcons = {
-  article: Document,
-  download: Download,
+  article: icons.document,
+  download: icons.download,
 };
diff --git a/explorer-v2/src/components/icons/ArrowUpRight.tsx b/explorer-v2/src/components/icons/ArrowUpRight.tsx
index 785c9c0175..e74a08625e 100644
--- a/explorer-v2/src/components/icons/ArrowUpRight.tsx
+++ b/explorer-v2/src/components/icons/ArrowUpRight.tsx
@@ -1,8 +1,10 @@
 import Image from "next/image";
 
+import { icons } from "@/utils/getIconByName";
+
 const ArrowUpRight = () => (
   <Image
-    src="icons/arrow-up-right.svg"
+    src={icons.arrowUpRight}
     alt="Arrow Up Right"
     width={32}
     height={32}
diff --git a/explorer-v2/src/components/icons/Chevron.tsx b/explorer-v2/src/components/icons/Chevron.tsx
index bdcf6d4394..33ac3259a5 100644
--- a/explorer-v2/src/components/icons/Chevron.tsx
+++ b/explorer-v2/src/components/icons/Chevron.tsx
@@ -1,9 +1,10 @@
 import Image from "next/image";
+import { icons } from "@/utils/getIconByName";
 
 const ChevronMenu = () => {
   return (
     <Image
-      src="/icons/chevronMenu.svg"
+      src={icons.chevronMenu}
       alt="Chevron Menu"
       width={24}
       height={24}
diff --git a/explorer-v2/src/components/icons/CopyFile.tsx b/explorer-v2/src/components/icons/CopyFile.tsx
index 497ea06128..b8f61d031d 100644
--- a/explorer-v2/src/components/icons/CopyFile.tsx
+++ b/explorer-v2/src/components/icons/CopyFile.tsx
@@ -1,8 +1,10 @@
 import Image from "next/image";
+import { icons } from "@/utils/getIconByName";
+
 
 const CopyFile = ({ className }: { className?: string }) => (
   <Image
-    src="/icons/copy-file.svg"
+    src={icons.copyFile}
     alt="Copyfile"
     width={16}
     height={16}
diff --git a/explorer-v2/src/components/icons/Cross.tsx b/explorer-v2/src/components/icons/Cross.tsx
index 2d4a26cc87..af3c46952b 100644
--- a/explorer-v2/src/components/icons/Cross.tsx
+++ b/explorer-v2/src/components/icons/Cross.tsx
@@ -1,7 +1,8 @@
 import Image from "next/image";
+import { icons } from "@/utils/getIconByName";
 
 const Cross = () => (
-  <Image src="/icons/cross.svg" alt="cross" width={12.5} height={12.5} />
+  <Image src={icons.cross} alt="cross" width={12.5} height={12.5} />
 );
 
 export default Cross;
diff --git a/explorer-v2/src/components/icons/Elips.tsx b/explorer-v2/src/components/icons/Elips.tsx
index fbdc7e5415..9b72319729 100644
--- a/explorer-v2/src/components/icons/Elips.tsx
+++ b/explorer-v2/src/components/icons/Elips.tsx
@@ -1,6 +1,6 @@
 import Image from "next/image";
-import * as React from "react";
+import { icons } from "@/utils/getIconByName";
 
 export const Elips = () => (
-  <Image src="/icons/elips.svg" alt="Elips" width={20} height={20} />
+  <Image src={icons.elips} alt="Elips" width={20} height={20} />
 );
diff --git a/explorer-v2/src/components/icons/Gateway.tsx b/explorer-v2/src/components/icons/Gateway.tsx
index 87baa460fb..c2f9594d18 100644
--- a/explorer-v2/src/components/icons/Gateway.tsx
+++ b/explorer-v2/src/components/icons/Gateway.tsx
@@ -1,8 +1,9 @@
 import Image from "next/image";
+import { icons } from "@/utils/getIconByName";
 
 const Gateway = () => {
   return (
-    <Image src="/icons/gateway.svg" alt="Chevron Menu" width={84} height={84} />
+    <Image src={icons.gateway} alt="Chevron Menu" width={84} height={84} />
   );
 };
 
diff --git a/explorer-v2/src/components/icons/NymLogo.tsx b/explorer-v2/src/components/icons/NymLogo.tsx
index 8e0945f8d5..1461799c75 100644
--- a/explorer-v2/src/components/icons/NymLogo.tsx
+++ b/explorer-v2/src/components/icons/NymLogo.tsx
@@ -1,8 +1,9 @@
 import Image from "next/image";
+import { icons } from "@/utils/getIconByName";
 
 const NymLogo = () => {
   return (
-    <Image src="/icons/nym-logo.svg" alt="Nym Logo" width={90} height={25} />
+    <Image src={icons.nymLogo} alt="Nym Logo" width={90} height={25} />
   );
 };
 export default NymLogo;
diff --git a/explorer-v2/src/components/icons/Token.tsx b/explorer-v2/src/components/icons/Token.tsx
index e147ec8ae6..3cd0475ef0 100644
--- a/explorer-v2/src/components/icons/Token.tsx
+++ b/explorer-v2/src/components/icons/Token.tsx
@@ -1,6 +1,6 @@
 import Image from "next/image";
-import * as React from "react";
+import { icons } from "@/utils/getIconByName";
 
 export const Token = () => {
-  return <Image src="/icons/token.svg" alt="Token" width={20} height={20} />;
+  return <Image src={icons.token} alt="Token" width={20} height={20} />;
 };
diff --git a/explorer-v2/src/data/Welcome-to-explorer-2.json b/explorer-v2/src/data/Welcome-to-explorer-2.json
index d757397859..842847e643 100644
--- a/explorer-v2/src/data/Welcome-to-explorer-2.json
+++ b/explorer-v2/src/data/Welcome-to-explorer-2.json
@@ -8,7 +8,7 @@
     "date": "Mon Jan 20 2025 10:26:09 GMT+0000 (Greenwich Mean Time)",
     "readingTime": 5
   },
-  "icon": "/icons/explorer-card.svg",
+  "icon": "explorerCard",
   "image": "/images/Network.webp",
   "overview": {
     "content": [
diff --git a/explorer-v2/src/data/buy-nym.json b/explorer-v2/src/data/buy-nym.json
index 55d6bc60a6..721ee1f19f 100644
--- a/explorer-v2/src/data/buy-nym.json
+++ b/explorer-v2/src/data/buy-nym.json
@@ -8,7 +8,7 @@
     "date": "Mon Jan 05 2025 10:26:09 GMT+0000 (Greenwich Mean Time)",
     "readingTime": 5
   },
-  "icon": "/icons/gateway.svg",
+  "icon": "gateway",
   "image": "/images/placeholder.webp",
   "overview": {
     "content": [
diff --git a/explorer-v2/src/data/operate-a-node.json b/explorer-v2/src/data/operate-a-node.json
index b4f71a5af5..25dc8e9ac7 100644
--- a/explorer-v2/src/data/operate-a-node.json
+++ b/explorer-v2/src/data/operate-a-node.json
@@ -8,7 +8,7 @@
     "date": "Mon Jan 05 2025 10:26:09 GMT+0000 (Greenwich Mean Time)",
     "readingTime": 5
   },
-  "icon": "/icons/gateway.svg",
+  "icon": "gateway",
   "image": "/images/placeholder.webp",
   "overview": {
     "content": [
diff --git a/explorer-v2/src/data/staking-guide.json b/explorer-v2/src/data/staking-guide.json
index d64bb06cae..9e36a48433 100644
--- a/explorer-v2/src/data/staking-guide.json
+++ b/explorer-v2/src/data/staking-guide.json
@@ -8,7 +8,7 @@
     "date": "Mon Jan 05 2025 10:26:09 GMT+0000 (Greenwich Mean Time)",
     "readingTime": 5
   },
-  "icon": "/icons/stake-card.svg",
+  "icon": "stakeCard",
   "image": "/images/stake-article.webp",
   "overview": {
     "content": [
diff --git a/explorer-v2/src/utils/getIconByName.tsx b/explorer-v2/src/utils/getIconByName.tsx
new file mode 100644
index 0000000000..17d4f87225
--- /dev/null
+++ b/explorer-v2/src/utils/getIconByName.tsx
@@ -0,0 +1,69 @@
+import type { StaticImageData } from "next/image";
+
+import nymLogo from "@/../public/icons/nym-logo.svg";
+import token from "@/../public/icons/token.svg";
+import gateway from "@/../public/icons/gateway.svg";
+import elips from "@/../public/icons/elips.svg";
+import cross from "@/../public/icons/cross.svg";
+import copyFile from "@/../public/icons/copy-file.svg";
+import chevronMenu from "@/../public/icons/chevronMenu.svg"
+import document from "@/../public/icons/document.svg"
+import download from "@/../public/icons/download.svg"
+import discord from "@/../public/icons/discord.svg"
+import github from "@/../public/icons/github.svg"
+import telegram from "@/../public/icons/telegram.svg"
+import twitter from "@/../public/icons/twitter.svg"
+import youtube from "@/../public/icons/youtube.svg"
+import youTubeInverted from "@/../public/icons/youtubeInverted.svg"
+import arrowUpRight from "@/../public/icons/arrow-up-right.svg"
+import arrow from "@/../public/icons/arrow-up-right.svg"
+import explorerCard from "@/../public/icons/explorer-card.svg"
+import stakeCard from "@/../public/icons/stake-card.svg"
+
+export type IconName =
+  | "nymLogo"
+  | "token"
+  | "gateway"
+  | "elips"
+  | "cross"
+  | "copyFile"
+  | "chevronMenu"
+  | "document"
+  | "download"
+  | "discord"
+  | "github"
+  | "telegram"
+  | "twitter"
+  | "youtube"
+  | "youTubeInverted"
+  | "arrowUpRight"
+  | "arrow"
+  | "stakeCard"
+  | "explorerCard"
+
+export type Icons = {
+  [key in IconName]: StaticImageData;
+};
+
+export const icons: Icons = {
+  nymLogo,
+  token,
+  gateway,
+  elips,
+  cross,
+  copyFile,
+  chevronMenu,
+  document,
+  download,
+  discord,
+  github,
+  telegram,
+  twitter,
+  youtube,
+  youTubeInverted,
+  arrowUpRight,
+  arrow,
+  stakeCard,
+  explorerCard
+
+};