diff --git a/explorer-nextjs/src/app/nym-node/[id]/page.tsx b/explorer-nextjs/src/app/nym-node/[id]/page.tsx
index c0e878491c..d94f7e28f3 100644
--- a/explorer-nextjs/src/app/nym-node/[id]/page.tsx
+++ b/explorer-nextjs/src/app/nym-node/[id]/page.tsx
@@ -8,6 +8,7 @@ import { BasicInfoCard } from "@/components/nymNodePageComponents/BasicInfoCard"
 import { NodeMetricsCard } from "@/components/nymNodePageComponents/NodeMetricsCard";
 import { NodeProfileCard } from "@/components/nymNodePageComponents/NodeProfileCard";
 import { NodeRewardsCard } from "@/components/nymNodePageComponents/NodeRewardsCard";
+import { QualityIndicatorsCard } from "@/components/nymNodePageComponents/QualityIndicatorsCard";
 import { StarRating } from "@/components/starRating";
 import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
 import { Box, Grid2 } from "@mui/material";
@@ -84,27 +85,7 @@ export default async function NymNode({
           />
         </Grid2>
         <Grid2 size={4}>
-          <ExplorerCard label="Quality indicatiors" sx={{ height: "100%" }}>
-            <ExplorerListItem row divider label="Role" value="Gateway" />
-            <ExplorerListItem
-              row
-              divider
-              label="Quality of service"
-              value={<StarRating value={5} />}
-            />
-            <ExplorerListItem
-              row
-              divider
-              label="Config score"
-              value={<StarRating value={4} />}
-            />
-            <ExplorerListItem
-              row
-              divider
-              label="Probe score"
-              value={<StarRating value={5} />}
-            />
-          </ExplorerCard>
+          <QualityIndicatorsCard nodeDescription={nodeDescriptionInfo[0]} />
         </Grid2>
         <Grid2 size={6}>
           <NodeRewardsCard bondInfo={nodeBondInfo[0]} />
diff --git a/explorer-nextjs/src/components/nymNodePageComponents/NodeMetricsCard.tsx b/explorer-nextjs/src/components/nymNodePageComponents/NodeMetricsCard.tsx
index eb584cca8f..b8f5d40a26 100644
--- a/explorer-nextjs/src/components/nymNodePageComponents/NodeMetricsCard.tsx
+++ b/explorer-nextjs/src/components/nymNodePageComponents/NodeMetricsCard.tsx
@@ -22,7 +22,12 @@ export const NodeMetricsCard = (props: INodeMetricsCardProps) => {
         label="Host"
         value={nodeDescription.description.host_information.ip_address.toString()}
       />
-      <ExplorerListItem row divider label="Version" value="1.1.1.1" />
+      <ExplorerListItem
+        row
+        divider
+        label="Version"
+        value={nodeDescription.description.build_information.build_version}
+      />
       <ExplorerListItem row label="Active set Prob." value="High" />
     </ExplorerCard>
   );
diff --git a/explorer-nextjs/src/components/nymNodePageComponents/QualityIndicatorsCard.tsx b/explorer-nextjs/src/components/nymNodePageComponents/QualityIndicatorsCard.tsx
new file mode 100644
index 0000000000..bc13407d0b
--- /dev/null
+++ b/explorer-nextjs/src/components/nymNodePageComponents/QualityIndicatorsCard.tsx
@@ -0,0 +1,67 @@
+import type { INodeDescription } from "@/app/api";
+import ExplorerCard from "../cards/ExplorerCard";
+import ExplorerListItem from "../list/ListItem";
+import StarRating from "../starRating/StarRating";
+
+interface IQualityIndicatorsCardProps {
+  nodeDescription: INodeDescription;
+}
+
+interface IDeclaredRoles {
+  declared_role: {
+    entry: boolean;
+    exit_ipr: boolean;
+    exit_nr: boolean;
+    mixnode: boolean;
+  };
+}
+
+function getNodeRoles(rolesObject: IDeclaredRoles): string {
+  const roleMapping: { [key: string]: string } = {
+    entry: "Entry Node",
+    exit_ipr: "Exit IPR Node",
+    exit_nr: "Exit NR Node",
+    mixnode: "Mix Node",
+  };
+
+  const { declared_role } = rolesObject;
+
+  const activeRoles = Object.entries(declared_role)
+    .filter(([_, value]) => value) // Filter keys where value is true
+    .map(([key]) => roleMapping[key]) // Map keys to their corresponding strings
+    .join(", "); // Join with commas
+
+  return activeRoles;
+}
+
+export const QualityIndicatorsCard = (props: IQualityIndicatorsCardProps) => {
+  const { nodeDescription } = props;
+
+  const nodeRoles = getNodeRoles({
+    declared_role: nodeDescription.description.declared_role,
+  });
+
+  return (
+    <ExplorerCard label="Quality indicatiors" sx={{ height: "100%" }}>
+      <ExplorerListItem row divider label="Role" value={nodeRoles} />
+      <ExplorerListItem
+        row
+        divider
+        label="Quality of service"
+        value={<StarRating value={5} />}
+      />
+      <ExplorerListItem
+        row
+        divider
+        label="Config score"
+        value={<StarRating value={4} />}
+      />
+      <ExplorerListItem
+        row
+        divider
+        label="Probe score"
+        value={<StarRating value={5} />}
+      />
+    </ExplorerCard>
+  );
+};