diff --git a/explorer-nextjs/package.json b/explorer-nextjs/package.json
index ad310f4fd8..70ca03a524 100644
--- a/explorer-nextjs/package.json
+++ b/explorer-nextjs/package.json
@@ -16,7 +16,8 @@
     "@mui/material-nextjs": "^6.1.9",
     "next": "15.0.3",
     "react": "19.0.0-rc-66855b96-20241106",
-    "react-dom": "19.0.0-rc-66855b96-20241106"
+    "react-dom": "19.0.0-rc-66855b96-20241106",
+    "react-world-flags": "^1.6.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
diff --git a/explorer-nextjs/src/components/Cards/MonoCard.tsx b/explorer-nextjs/src/components/Cards/MonoCard.tsx
index 2640557d47..02cd07b0b4 100644
--- a/explorer-nextjs/src/components/Cards/MonoCard.tsx
+++ b/explorer-nextjs/src/components/Cards/MonoCard.tsx
@@ -10,8 +10,8 @@ import type React from "react";
 import type { FC, ReactElement } from "react";
 import Flag from "react-world-flags";
 import profileImagePlaceholder from "../../../public/profileImagePlaceholder.png";
-// import { Remark42Comments } from "../comments";
 import { NymTokenSVG } from "../icons/NymTokenSVG";
+// import { Remark42Comments } from "../comments";
 import { type ILineChartData, LineChart } from "../lineChart";
 import {
   DynamicProgressBar,
diff --git a/explorer-nextjs/src/components/icons/NymTokenSVG.tsx b/explorer-nextjs/src/components/icons/NymTokenSVG.tsx
new file mode 100644
index 0000000000..947823a74b
--- /dev/null
+++ b/explorer-nextjs/src/components/icons/NymTokenSVG.tsx
@@ -0,0 +1,38 @@
+import { useTheme } from "@mui/material/styles";
+import * as React from "react";
+
+export const NymTokenSVG = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title id="nymTokenTitle">Nym Token Icon</title>
+      <g clipPath="url(#clip0_7134_15888)">
+        <path
+          d="M17.07 3.43C13.17 -0.480002 6.83 -0.480002 2.93 3.43C-0.980002 7.34 -0.980002 13.67 2.93 17.57C6.84 21.48 13.17 21.48 17.07 17.57C20.98 13.67 20.98 7.33 17.07 3.43ZM16.21 16.71C12.78 20.14 7.21 20.14 3.78 16.71C0.349997 13.28 0.349997 7.71 3.78 4.28C7.21 0.849997 12.78 0.849997 16.21 4.28C19.65 7.72 19.65 13.28 16.21 16.71Z"
+          fill={color}
+        />
+        <path
+          d="M15.4 16.33V4.66999C14.89 4.18999 14.32 3.76999 13.71 3.43999V14.59L6.35001 3.39999C5.71001 3.73999 5.12001 4.15999 4.60001 4.65999V16.33C5.11001 16.81 5.68001 17.23 6.29001 17.56V6.40999L13.65 17.6C14.29 17.26 14.88 16.83 15.4 16.33Z"
+          fill={color}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_7134_15888">
+          <rect
+            width="20"
+            height="20"
+            fill={color}
+            transform="translate(0 0.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
diff --git a/explorer-nextjs/src/components/progressBars/MultiSegmentProgressBar.tsx b/explorer-nextjs/src/components/progressBars/MultiSegmentProgressBar.tsx
new file mode 100644
index 0000000000..455587b451
--- /dev/null
+++ b/explorer-nextjs/src/components/progressBars/MultiSegmentProgressBar.tsx
@@ -0,0 +1,35 @@
+import { Box } from "@mui/material";
+import type React from "react";
+
+export interface MultiSegmentProgressBarProps {
+  values: { percentage: number; color: string }[]; // Array of percentage and color pairs
+  // Optional border radius, default is 4
+  backgroundColor?: string; // Optional background color for the bar, default is light gray
+}
+
+export const MultiSegmentProgressBar: React.FC<
+  MultiSegmentProgressBarProps
+> = ({ values, backgroundColor = "#CAD6D7" }) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        width: "100%",
+        height: 8,
+        borderRadius: 4,
+        overflow: "hidden",
+        backgroundColor,
+      }}
+    >
+      {values.map((value) => (
+        <Box
+          key={value.color}
+          sx={{
+            width: `${value.percentage}%`,
+            backgroundColor: value.color,
+          }}
+        />
+      ))}
+    </Box>
+  );
+};
diff --git a/explorer-nextjs/src/components/progressBars/StaticProgressBar.tsx b/explorer-nextjs/src/components/progressBars/StaticProgressBar.tsx
new file mode 100644
index 0000000000..e68990970a
--- /dev/null
+++ b/explorer-nextjs/src/components/progressBars/StaticProgressBar.tsx
@@ -0,0 +1,29 @@
+import Box from "@mui/material/Box";
+import LinearProgress from "@mui/material/LinearProgress";
+import * as React from "react";
+
+export interface IStaticProgressBarProps {
+  color: string;
+  value: number;
+}
+
+export const StaticProgressBar = (props: IStaticProgressBarProps) => {
+  const { color, value } = props;
+
+  return (
+    <Box>
+      <LinearProgress
+        variant="determinate"
+        value={value}
+        sx={{
+          height: 8,
+          borderRadius: 4,
+          backgroundColor: "#CAD6D7",
+          "& .MuiLinearProgress-bar": {
+            backgroundColor: color,
+          },
+        }}
+      />
+    </Box>
+  );
+};