diff --git a/explorer-nextjs/src/actions/getNymNodes.ts b/explorer-nextjs/src/actions/getNymNodes.ts
index d42234aa06..70d214c683 100644
--- a/explorer-nextjs/src/actions/getNymNodes.ts
+++ b/explorer-nextjs/src/actions/getNymNodes.ts
@@ -1,8 +1,8 @@
-import type NymNode from "@/app/api/types";
-import { NYM_NODES } from "@/app/api/urls";
+import type { IObservatoryNode } from "@/app/api/types";
+import { DATA_OBSERVATORY_NODES_URL } from "@/app/api/urls";
 
-const getNymNodes = async (): Promise<NymNode[]> => {
-  const response = await fetch(`${NYM_NODES}`, {
+const getNymNodes = async (): Promise<IObservatoryNode[]> => {
+  const response = await fetch(`${DATA_OBSERVATORY_NODES_URL}`, {
     next: {
       revalidate: 900,
     },
diff --git a/explorer-nextjs/src/app/(pages)/account/[address]/page.tsx b/explorer-nextjs/src/app/(pages)/account/[address]/page.tsx
index 399e2a0b72..0fbb46a999 100644
--- a/explorer-nextjs/src/app/(pages)/account/[address]/page.tsx
+++ b/explorer-nextjs/src/app/(pages)/account/[address]/page.tsx
@@ -3,11 +3,12 @@ import type NodeData from "@/app/api/types";
 import { NYM_ACCOUNT_ADDRESS, NYM_NODES, NYM_PRICES_API } from "@/app/api/urls";
 import { AccountBalancesCard } from "@/components/accountPageComponents/AccountBalancesCard";
 import { AccountInfoCard } from "@/components/accountPageComponents/AccountInfoCard";
+import BlogArticlesCards from "@/components/blogs/BlogArticleCards";
 import { ContentLayout } from "@/components/contentLayout/ContentLayout";
 import SectionHeading from "@/components/headings/SectionHeading";
 import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
 import { Box, Typography } from "@mui/material";
-import Grid2 from "@mui/material/Grid2";
+import Grid from "@mui/material/Grid2";
 
 export default async function Account({
   params,
@@ -61,11 +62,11 @@ export default async function Account({
 
     return (
       <ContentLayout>
-        <Grid2 container columnSpacing={5} rowSpacing={5}>
-          <Grid2 size={6}>
+        <Grid container columnSpacing={5} rowSpacing={5}>
+          <Grid size={6}>
             <SectionHeading title="Account Details" />
-          </Grid2>
-          <Grid2 size={6} justifyContent="flex-end">
+          </Grid>
+          <Grid size={6} justifyContent="flex-end">
             <Box sx={{ display: "flex", justifyContent: "end" }}>
               <ExplorerButtonGroup
                 options={[
@@ -84,17 +85,23 @@ export default async function Account({
                 ]}
               />
             </Box>
-          </Grid2>
-          <Grid2 size={4}>
+          </Grid>
+          <Grid size={4}>
             <AccountInfoCard accountInfo={nymAccountBalancesData} />
-          </Grid2>
-          <Grid2 size={8}>
+          </Grid>
+          <Grid size={8}>
             <AccountBalancesCard
               accountInfo={nymAccountBalancesData}
               nymPrice={nymPriceData.usd}
             />
-          </Grid2>
-        </Grid2>
+          </Grid>
+        </Grid>
+        <Grid container columnSpacing={5} rowSpacing={5}>
+          <Grid size={12}>
+            <SectionHeading title="Onboarding" />
+          </Grid>
+          <BlogArticlesCards limit={2} />
+        </Grid>
       </ContentLayout>
     );
   } catch (error) {
diff --git a/explorer-nextjs/src/app/(pages)/explorer/page.tsx b/explorer-nextjs/src/app/(pages)/explorer/page.tsx
index ef74c4df7c..439dcc2e0d 100644
--- a/explorer-nextjs/src/app/(pages)/explorer/page.tsx
+++ b/explorer-nextjs/src/app/(pages)/explorer/page.tsx
@@ -1,8 +1,10 @@
+import BlogArticlesCards from "@/components/blogs/BlogArticleCards";
 import CardSkeleton from "@/components/cards/Skeleton";
 import { ContentLayout } from "@/components/contentLayout/ContentLayout";
 import SectionHeading from "@/components/headings/SectionHeading";
 import NodeTableWithAction from "@/components/nodeTable/NodeTableWithAction";
 import { Wrapper } from "@/components/wrapper";
+import Grid from "@mui/material/Grid2";
 import { Suspense } from "react";
 
 export default function ExplorerPage() {
@@ -13,6 +15,12 @@ export default function ExplorerPage() {
         <Suspense fallback={<CardSkeleton sx={{ mt: 5 }} />}>
           <NodeTableWithAction />
         </Suspense>
+        <Grid container columnSpacing={5} rowSpacing={5} mt={10}>
+          <Grid size={12}>
+            <SectionHeading title="Onboarding" />
+          </Grid>
+          <BlogArticlesCards limit={2} />
+        </Grid>
       </Wrapper>
     </ContentLayout>
   );
diff --git a/explorer-nextjs/src/app/(pages)/nym-node/[id]/page.tsx b/explorer-nextjs/src/app/(pages)/nym-node/[id]/page.tsx
index eb671ff146..7f1c240d4d 100644
--- a/explorer-nextjs/src/app/(pages)/nym-node/[id]/page.tsx
+++ b/explorer-nextjs/src/app/(pages)/nym-node/[id]/page.tsx
@@ -1,15 +1,19 @@
-import type NodeData from "@/app/api/types";
-import { NYM_NODES } from "@/app/api/urls";
+import type { IObservatoryNode } from "@/app/api/types";
+import { DATA_OBSERVATORY_NODES_URL } from "@/app/api/urls";
+import BlogArticlesCards from "@/components/blogs/BlogArticleCards";
+import ExplorerCard from "@/components/cards/ExplorerCard";
 import { ContentLayout } from "@/components/contentLayout/ContentLayout";
 import SectionHeading from "@/components/headings/SectionHeading";
+import DelegationsTable from "@/components/nodeTable/DelegationsTable";
 import { BasicInfoCard } from "@/components/nymNodePageComponents/BasicInfoCard";
+import { NodeChatCard } from "@/components/nymNodePageComponents/ChatCard";
 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 ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
 import { Box } from "@mui/material";
-import Grid2 from "@mui/material/Grid2";
+import Grid from "@mui/material/Grid2";
 
 export default async function NymNode({
   params,
@@ -19,7 +23,7 @@ export default async function NymNode({
   try {
     const id = Number((await params).id);
 
-    const response = await fetch(NYM_NODES, {
+    const observatoryResponse = await fetch(DATA_OBSERVATORY_NODES_URL, {
       headers: {
         Accept: "application/json",
         "Content-Type": "application/json; charset=utf-8",
@@ -28,87 +32,141 @@ export default async function NymNode({
       // refresh event list cache at given interval
     });
 
-    const nymNodes: NodeData[] = await response.json();
+    const observatoryNymNodes: IObservatoryNode[] =
+      await observatoryResponse.json();
 
-    if (!nymNodes) {
+    if (!observatoryNymNodes) {
       return null;
     }
 
-    const nymNode = nymNodes.find((node) => node.node_id === id);
+    const observatoryNymNode = observatoryNymNodes.find(
+      (node) => node.node_id === id,
+    );
 
-    if (!nymNode) {
+    if (!observatoryNymNode) {
       return null;
     }
 
+    const nodeDelegationsResponse = await fetch(
+      `${DATA_OBSERVATORY_NODES_URL}/${id}/delegations`,
+      {
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json; charset=utf-8",
+        },
+        next: { revalidate: 60 },
+        // refresh event list cache at given interval
+      },
+    );
+
+    const delegations = await nodeDelegationsResponse.json();
+
     return (
       <ContentLayout>
-        <Grid2 container columnSpacing={5} rowSpacing={5}>
-          <Grid2 size={12}>
+        <Grid container columnSpacing={5} rowSpacing={5}>
+          <Grid size={12}>
             <Box sx={{ display: "flex", justifyContent: "space-between" }}>
               <SectionHeading title="Nym Node Details" />
-              <ExplorerButtonGroup
-                options={[
-                  { label: "Nym Node", isSelected: true, link: "/nym-node/1" },
-                  {
-                    label: "Account",
-                    isSelected: false,
-                    link: `/account/${nymNode.bond_information.owner}`,
-                  },
-                ]}
-              />
+              {observatoryNymNode.bonding_address && (
+                <ExplorerButtonGroup
+                  options={[
+                    {
+                      label: "Nym Node",
+                      isSelected: true,
+                      link: `/nym-node/${id}`,
+                    },
+                    {
+                      label: "Account",
+                      isSelected: false,
+                      link: `/account/${observatoryNymNode.bonding_address}`,
+                    },
+                  ]}
+                />
+              )}
             </Box>
-          </Grid2>
-          <Grid2
-            size={{
-              xs: 12,
-              md: 4,
-            }}
-          >
-            <NodeProfileCard
-              bondInfo={nymNode.bond_information}
-              nodeDescription={nymNode.description}
-            />
-          </Grid2>
-          <Grid2
-            size={{
-              xs: 12,
-              md: 4,
-            }}
-          >
-            <BasicInfoCard
-              bondInfo={nymNode.bond_information}
-              nodeDescription={nymNode.description}
-              rewardDetails={nymNode.rewarding_details}
-            />
-          </Grid2>
-          <Grid2
-            size={{
-              xs: 12,
-              md: 4,
-            }}
-          >
-            <QualityIndicatorsCard nodeDescription={nymNode.description} />
-          </Grid2>
-          <Grid2
-            size={{
-              xs: 12,
-              md: 6,
-            }}
-          >
-            <NodeRewardsCard rewardDetails={nymNode.rewarding_details} />
-          </Grid2>
-          <Grid2
+          </Grid>
+          {observatoryNymNode && (
+            <Grid
+              size={{
+                xs: 12,
+                md: 4,
+              }}
+            >
+              <NodeProfileCard nodeInfo={observatoryNymNode} />
+            </Grid>
+          )}
+          {observatoryNymNode.rewarding_details && (
+            <Grid
+              size={{
+                xs: 12,
+                md: 4,
+              }}
+            >
+              <BasicInfoCard
+                rewardDetails={observatoryNymNode.rewarding_details}
+                nodeInfo={observatoryNymNode}
+              />
+            </Grid>
+          )}
+          {observatoryNymNode && (
+            <Grid
+              size={{
+                xs: 12,
+                md: 4,
+              }}
+            >
+              <QualityIndicatorsCard nodeInfo={observatoryNymNode} />
+            </Grid>
+          )}
+          {observatoryNymNode.rewarding_details && (
+            <Grid
+              size={{
+                xs: 12,
+                md: 6,
+              }}
+            >
+              <NodeRewardsCard
+                rewardDetails={observatoryNymNode.rewarding_details}
+                nodeInfo={observatoryNymNode}
+              />
+            </Grid>
+          )}
+          {observatoryNymNode && (
+            <Grid
+              size={{
+                xs: 12,
+                md: 6,
+              }}
+            >
+              <NodeMetricsCard nodeInfo={observatoryNymNode} />
+            </Grid>
+          )}
+          {delegations && (
+            <Grid
+              size={{
+                xs: 12,
+              }}
+            >
+              <ExplorerCard label="Delegations" sx={{ height: "100%" }}>
+                <DelegationsTable delegations={delegations} />
+              </ExplorerCard>
+            </Grid>
+          )}
+
+          <Grid
             size={{
               xs: 12,
-              md: 6,
             }}
           >
-            <NodeMetricsCard
-              nodeDescription={nymNode.description}
-              nodeId={nymNode.bond_information.node_id}
-            />
-          </Grid2>
-        </Grid2>
+            <NodeChatCard />
+          </Grid>
+        </Grid>
+        <Grid container columnSpacing={5} rowSpacing={5}>
+          <Grid size={12}>
+            <SectionHeading title="Onboarding" />
+          </Grid>
+          <BlogArticlesCards limit={4} />
+        </Grid>
       </ContentLayout>
     );
   } catch (error) {
diff --git a/explorer-nextjs/src/app/api/types.ts b/explorer-nextjs/src/app/api/types.ts
index 8951b0052d..644d8addb6 100644
--- a/explorer-nextjs/src/app/api/types.ts
+++ b/explorer-nextjs/src/app/api/types.ts
@@ -147,3 +147,221 @@ export interface IAccountBalancesInfo {
   total_value: IAmountDetails;
   vesting_account?: null | string;
 }
+
+export interface IObservatoryNode {
+  accepted_tnc: boolean;
+  bonded: boolean;
+  bonding_address: string;
+  description: {
+    authenticator: {
+      address: string;
+    };
+    auxiliary_details: {
+      accepted_operator_terms_and_conditions: boolean;
+      announce_ports: {
+        mix_port: number | null;
+        verloc_port: number | null;
+      };
+      location: string | null;
+    };
+    build_information: {
+      binary_name: string;
+      build_timestamp: string;
+      build_version: string;
+      cargo_profile: string;
+      cargo_triple: string;
+      commit_branch: string;
+      commit_sha: string;
+      commit_timestamp: string;
+      rustc_channel: string;
+      rustc_version: string;
+    };
+    declared_role: {
+      entry: boolean;
+      exit_ipr: boolean;
+      exit_nr: boolean;
+      mixnode: boolean;
+    };
+    host_information: {
+      hostname: string | null;
+      ip_address: string[];
+    };
+    keys: {
+      ed25519: string;
+      x25519: string;
+      x25519_noise: string | null;
+    };
+    ip_packet_router: {
+      address: string;
+    };
+    last_polled: string;
+    mixnet_websockets: {
+      ws_port: number;
+      wss_port: number | null;
+    };
+    network_requester: {
+      address: string;
+      uses_exit_policy: boolean;
+    };
+    wireguard: string | null;
+    geoip: {
+      city: string;
+      country: string;
+      ip_address: string;
+      loc: string;
+      node_id: number;
+      org: string;
+      postal: string;
+      region: string;
+    };
+  };
+  identity_key: string;
+  ip_address: string;
+  node_id: number;
+  node_type: string;
+  original_pledge: number;
+  rewarding_details: {
+    cost_params: {
+      interval_operating_cost: {
+        amount: string;
+        denom: string;
+      };
+      profit_margin_percent: string;
+    };
+    delegates: string;
+    last_rewarded_epoch: number;
+    operator: string;
+    total_unit_reward: string;
+    unique_delegations: number;
+    unit_delegation: string;
+  };
+  self_description: {
+    details: string;
+    moniker: string;
+    security_contact: string;
+    website: string;
+  };
+  total_stake: number;
+  uptime: number;
+}
+export interface NodeRewardDetails {
+  amount: {
+    amount: string;
+    denom: string;
+  };
+  cumulative_reward_ratio: string;
+  height: number;
+  node_id: number;
+  owner: string;
+}
+
+export type LastProbeResult = {
+  gateway: string;
+  outcome: {
+    as_entry: {
+      can_connect: boolean;
+      can_route: boolean;
+    };
+    as_exit: {
+      can_connect: boolean;
+      can_route_ip_external_v4: boolean;
+      can_route_ip_external_v6: boolean;
+      can_route_ip_v4: boolean;
+      can_route_ip_v6: boolean;
+    };
+    wg: {
+      can_handshake_v4: boolean;
+      can_handshake_v6: boolean;
+      can_register: boolean;
+      can_resolve_dns_v4: boolean;
+      can_resolve_dns_v6: boolean;
+      ping_hosts_performance_v4: number;
+      ping_hosts_performance_v6: number;
+      ping_ips_performance_v4: number;
+      ping_ips_performance_v6: number;
+    };
+  };
+};
+
+export type GatewayStatus = {
+  blacklisted: boolean;
+  bonded: boolean;
+  config_score: number;
+  description: {
+    details: string;
+    moniker: string;
+    security_contact: string;
+    website: string;
+  };
+  explorer_pretty_bond: {
+    identity_key: string;
+    location: {
+      latitude: number;
+      longitude: number;
+      two_letter_iso_country_code: string;
+    };
+    owner: string;
+    pledge_amount: {
+      amount: string;
+      denom: string;
+    };
+  };
+  gateway_identity_key: string;
+  last_probe_log: string;
+  last_probe_result: LastProbeResult; // Reference to the separate type
+  last_testrun_utc: string;
+  last_updated_utc: string;
+  performance: number;
+  routing_score: number;
+  self_described: {
+    authenticator: {
+      address: string;
+    };
+    auxiliary_details: {
+      accepted_operator_terms_and_conditions: boolean;
+      announce_ports: {
+        mix_port: number | null;
+        verloc_port: number | null;
+      };
+      location: string;
+    };
+    build_information: {
+      binary_name: string;
+      build_timestamp: string;
+      build_version: string;
+      cargo_profile: string;
+      cargo_triple: string;
+    };
+    declared_role: {
+      entry: boolean;
+      exit_ipr: boolean;
+      exit_nr: boolean;
+      mixnode: boolean;
+    };
+    host_information: {
+      hostname: string;
+      ip_address: string[];
+      keys: {
+        ed25519: string;
+        x25519: string;
+        x25519_noise: string | null;
+      };
+    };
+    ip_packet_router: {
+      address: string;
+    };
+    last_polled: string;
+    mixnet_websockets: {
+      ws_port: number;
+      wss_port: number | null;
+    };
+    network_requester: {
+      address: string;
+      uses_exit_policy: boolean;
+    };
+    wireguard: {
+      port: number;
+      public_key: string;
+    };
+  };
+};
diff --git a/explorer-nextjs/src/app/api/urls.ts b/explorer-nextjs/src/app/api/urls.ts
index d4e981d1c9..548863c24f 100644
--- a/explorer-nextjs/src/app/api/urls.ts
+++ b/explorer-nextjs/src/app/api/urls.ts
@@ -32,3 +32,5 @@ export const NYM_PRICES_API =
   "https://canary-nym-vpn-chain-payment-watcher.nymte.ch/v1/price/average";
 export const VALIDATOR_BASE_URL =
   process.env.NEXT_PUBLIC_VALIDATOR_URL || "https://rpc.nymtech.net";
+export const DATA_OBSERVATORY_NODES_URL =
+  "https://api.nym.spectredao.net/api/v1/nodes";
diff --git a/explorer-nextjs/src/components/comments/index.tsx b/explorer-nextjs/src/components/comments/index.tsx
index 51ae6430b1..6c060c8956 100644
--- a/explorer-nextjs/src/components/comments/index.tsx
+++ b/explorer-nextjs/src/components/comments/index.tsx
@@ -29,8 +29,8 @@ export const Remark42Comments = () => {
     if (typeof window !== "undefined") {
       // Set Remark42 configuration on the window object
       window.remark_config = {
-        host: "https://remark.blockfend.com",
-        site_id: "nym-explorer-test",
+        host: "https://remark42.nymte.ch",
+        site_id: "remark",
         components: ["embed", "last-comments"],
         max_shown_comments: 100,
         theme: "light",
@@ -68,13 +68,14 @@ export const Remark42Comments = () => {
       <Script
         id="remark-init"
         strategy="afterInteractive"
-        //   dangerouslySetInnerHTML={{
-        //     __html: `
-        //   if (window.REMARK42) {
-        //     window.REMARK42.createInstance(window.remark_config);
-        //   }
-        // `,
-        //   }}
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
+        dangerouslySetInnerHTML={{
+          __html: `
+          if (window.REMARK42) {
+            window.REMARK42.createInstance(window.remark_config);
+          }
+        `,
+        }}
       />
     </Box>
   );
diff --git a/explorer-nextjs/src/components/countryFlag/CountryFlag.tsx b/explorer-nextjs/src/components/countryFlag/CountryFlag.tsx
index 783fbaf175..e9b5d5fcf2 100644
--- a/explorer-nextjs/src/components/countryFlag/CountryFlag.tsx
+++ b/explorer-nextjs/src/components/countryFlag/CountryFlag.tsx
@@ -10,6 +10,7 @@ const CountryFlag = ({ countryCode, countryName }: ICountryFlag) => {
   return (
     <Stack direction="row" gap={1}>
       <Flag code={countryCode} width="19" />
+
       <Typography variant="subtitle2" sx={{ color: "pine.950" }}>
         {countryName}
       </Typography>
diff --git a/explorer-nextjs/src/components/header/MobileHeader.tsx b/explorer-nextjs/src/components/header/MobileHeader.tsx
index fb1e13412f..593a10dc0e 100644
--- a/explorer-nextjs/src/components/header/MobileHeader.tsx
+++ b/explorer-nextjs/src/components/header/MobileHeader.tsx
@@ -5,6 +5,7 @@ import { Close as CloseIcon, Menu as MenuIcon } from "@mui/icons-material";
 import { Box, Drawer, IconButton, Typography } from "@mui/material";
 import { useState } from "react";
 import NymLogo from "../icons/NymLogo";
+import ConnectWallet from "../wallet/ConnectWallet";
 import MENU_DATA from "./menuItems";
 
 export const MobileHeader = () => {
@@ -134,6 +135,7 @@ const MobileMenuHeader = ({
         >
           <NymLogo />
         </Link>
+
         <Box
           sx={{
             display: "flex",
@@ -146,6 +148,7 @@ const MobileMenuHeader = ({
           </IconButton>
         </Box>
       </Box>
+      <ConnectWallet size="small" />
     </Wrapper>
   );
 };
diff --git a/explorer-nextjs/src/components/lineChart/index.tsx b/explorer-nextjs/src/components/lineChart/index.tsx
index dc42001b6c..48a8cc3071 100644
--- a/explorer-nextjs/src/components/lineChart/index.tsx
+++ b/explorer-nextjs/src/components/lineChart/index.tsx
@@ -72,7 +72,14 @@ export const LineChart = ({
       }}
       theme={{
         grid: { line: { strokeWidth: 0 } },
-        tooltip: { container: { color: "black" } },
+        tooltip: {
+          container: {
+            color: "black",
+            fontSize: 10,
+            maxWidth: 250,
+            lineHeight: 1,
+          },
+        },
         axis: {
           domain: {
             line: { stroke: "#C3D7D7", strokeWidth: 1, strokeOpacity: 1 },
diff --git a/explorer-nextjs/src/components/modal/InfoModal.tsx b/explorer-nextjs/src/components/modal/InfoModal.tsx
index 43cb60b295..c578e76bd6 100644
--- a/explorer-nextjs/src/components/modal/InfoModal.tsx
+++ b/explorer-nextjs/src/components/modal/InfoModal.tsx
@@ -22,6 +22,7 @@ const InfoModal = (props: InfoModalProps) => {
   }
 
   const { open, onClose, title, message, tx, Action } = props;
+  const mintscanURL = tx ? `https://www.mintscan.io/nyx/tx/${tx}` : "/";
 
   return (
     <SimpleModal
@@ -40,7 +41,7 @@ const InfoModal = (props: InfoModalProps) => {
         <Typography variant="h3">{title}</Typography>
         <Typography variant="body3">{message}</Typography>
         {tx && (
-          <Link href="/">
+          <Link href={mintscanURL}>
             <Typography variant="h5">Block explorer link</Typography>
           </Link>
         )}
diff --git a/explorer-nextjs/src/components/nodeTable/DelegationsTable.tsx b/explorer-nextjs/src/components/nodeTable/DelegationsTable.tsx
new file mode 100644
index 0000000000..7aa7a69ab7
--- /dev/null
+++ b/explorer-nextjs/src/components/nodeTable/DelegationsTable.tsx
@@ -0,0 +1,137 @@
+"use client";
+
+import type { NodeRewardDetails } from "@/app/api/types";
+import { Stack, Typography } from "@mui/material";
+import {
+  type MRT_ColumnDef,
+  MaterialReactTable,
+  useMaterialReactTable,
+} from "material-react-table";
+import { useRouter } from "next/navigation";
+import { useMemo } from "react";
+
+const ColumnHeading = ({
+  children,
+}: {
+  children: string | React.ReactNode;
+}) => {
+  return (
+    <Typography sx={{ py: 2, textAlign: "center" }} variant="h5">
+      {children}
+    </Typography>
+  );
+};
+
+const getNymsFormated = (unyms: string) => {
+  const balance = Number(unyms) / 1000000;
+  return balance.toFixed();
+};
+
+const DelegationsTable = ({
+  delegations,
+}: {
+  delegations: NodeRewardDetails[];
+}) => {
+  const router = useRouter();
+
+  const columns: MRT_ColumnDef<NodeRewardDetails>[] = useMemo(
+    () => [
+      {
+        id: "height",
+        header: "",
+        Header: <ColumnHeading>Height</ColumnHeading>,
+        accessorKey: "height",
+        Cell: ({ row }) => (
+          <Stack spacing={1}>
+            <Typography variant="body4">{row.original.height}</Typography>
+          </Stack>
+        ),
+      },
+      {
+        id: "address",
+        header: "Delegation Address",
+        align: "center",
+        accessorKey: "address",
+        Header: <ColumnHeading>Delegation Address</ColumnHeading>,
+        Cell: ({ row }) => (
+          <Typography variant="body4">{row.original.owner}</Typography>
+        ),
+      },
+      {
+        id: "amount",
+        header: "Amount",
+        accessorKey: "amount",
+        Header: <ColumnHeading>Amount</ColumnHeading>,
+        Cell: ({ row }) => (
+          <Typography variant="body4">
+            {getNymsFormated(row.original.amount.amount)} NYM
+          </Typography>
+        ),
+      },
+    ],
+    [],
+  );
+  const table = useMaterialReactTable({
+    columns,
+    data: delegations,
+    enableRowSelection: false, //enable some features
+    enableColumnOrdering: false, //enable a feature for all columns
+    enableColumnActions: false,
+    enableFullScreenToggle: false,
+    enableHiding: false,
+    paginationDisplayMode: "pages",
+    muiPaginationProps: {
+      showRowsPerPage: false,
+      SelectProps: {
+        sx: {
+          fontFamily: "labGrotesqueMono",
+          fontSize: "14px",
+        },
+      },
+      color: "primary",
+      shape: "circular",
+    },
+    initialState: {
+      columnPinning: { right: ["Amount"] },
+    },
+
+    muiColumnActionsButtonProps: {
+      sx: {
+        color: "red",
+      },
+      size: "small",
+    },
+    muiTablePaperProps: {
+      elevation: 0,
+    },
+    muiTableHeadRowProps: {
+      sx: {
+        bgcolor: "background.paper",
+      },
+    },
+
+    muiTableBodyCellProps: {
+      sx: {
+        border: "none",
+      },
+    },
+    muiTableBodyRowProps: ({ row }) => ({
+      onClick: () => {
+        router.push(`/account/${row.original.owner}`);
+      },
+      hover: true,
+      sx: {
+        ":nth-child(odd)": {
+          bgcolor: "#F3F7FB !important",
+        },
+        ":nth-child(even)": {
+          bgcolor: "white !important",
+        },
+        cursor: "pointer",
+      },
+    }),
+  });
+  return <MaterialReactTable table={table} />;
+};
+
+export default DelegationsTable;
diff --git a/explorer-nextjs/src/components/nodeTable/NodeTable.tsx b/explorer-nextjs/src/components/nodeTable/NodeTable.tsx
index 8d479970ab..b0215dc840 100644
--- a/explorer-nextjs/src/components/nodeTable/NodeTable.tsx
+++ b/explorer-nextjs/src/components/nodeTable/NodeTable.tsx
@@ -4,6 +4,7 @@ import { COSMOS_KIT_USE_CHAIN } from "@/config";
 import { useNymClient } from "@/hooks/useNymClient";
 import { useChain } from "@cosmos-kit/react";
 import { Box, Button, Stack, Tooltip, Typography } from "@mui/material";
+import { useLocalStorage } from "@uidotdev/usehooks";
 import {
   type MRT_ColumnDef,
   MaterialReactTable,
@@ -45,6 +46,8 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
     identityKey: string;
   }>();
 
+  const [favorites] = useLocalStorage<string[]>("nym-node-favorites", []);
+
   const { isWalletConnected } = useChain(COSMOS_KIT_USE_CHAIN);
 
   const handleStakeOnNode = async ({
@@ -114,7 +117,7 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
       }
       setSelectedNodeForStaking({
         nodeId: node.nodeId,
-        identityKey: node.bondInformation.node.identity_key,
+        identityKey: node.identity_key,
       });
     },
     [isWalletConnected],
@@ -130,9 +133,7 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
         Cell: ({ row }) => (
           <Stack spacing={1}>
             <Typography variant="body4">{row.original.nodeId}</Typography>
-            <Typography variant="body5">
-              {row.original.bondInformation.node.identity_key}
-            </Typography>
+            <Typography variant="body5">{row.original.identity_key}</Typography>
           </Stack>
         ),
       },
@@ -150,16 +151,12 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
         accessorKey: "location.country_name",
         Header: <ColumnHeading>Location</ColumnHeading>,
         Cell: ({ row }) =>
-          row.original.location?.two_letter_iso_country_code ? (
-            <Tooltip title={row.original.location.country_name}>
+          row.original.countryCode && row.original.countryName ? (
+            <Tooltip title={row.original.countryName}>
               <Box>
                 <CountryFlag
-                  countryCode={
-                    row.original.location.two_letter_iso_country_code
-                  }
-                  countryName={
-                    row.original.location.two_letter_iso_country_code
-                  }
+                  countryCode={row.original.countryCode || ""}
+                  countryName={row.original.countryCode || ""}
                 />
               </Box>
             </Tooltip>
@@ -211,9 +208,7 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
         accessorKey: "Favorite",
         Header: <ColumnHeading>Favorite</ColumnHeading>,
         sortingFn: "Favorite",
-        Cell: ({ row }) => (
-          <Favorite address={row.original.bondInformation.owner} />
-        ),
+        Cell: ({ row }) => <Favorite address={row.original.owner} />,
       },
     ],
     [isWalletConnected, handleOnSelectStake],
@@ -239,8 +234,19 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
       shape: "circular",
     },
     sortingFns: {
-      Favorite: () => {
-        // TODO implement sorting by favorite
+      Favorite: (rowA, rowB) => {
+        const isFavoriteA = favorites.includes(
+          rowA.original.bondInformation.owner,
+        );
+        const isFavoriteB = favorites.includes(
+          rowB.original.bondInformation.owner,
+        );
+
+        // Sort favorites first
+        if (isFavoriteA && !isFavoriteB) return -1;
+        if (!isFavoriteA && isFavoriteB) return 1;
+
+        // If both are favorites or neither, keep the original order
         return 0;
       },
     },
diff --git a/explorer-nextjs/src/components/nodeTable/NodeTableWithAction.tsx b/explorer-nextjs/src/components/nodeTable/NodeTableWithAction.tsx
index f061e2b585..5c0a7adbc2 100644
--- a/explorer-nextjs/src/components/nodeTable/NodeTableWithAction.tsx
+++ b/explorer-nextjs/src/components/nodeTable/NodeTableWithAction.tsx
@@ -1,16 +1,17 @@
 import getNymNodes from "@/actions/getNymNodes";
-import type NymNode from "@/app/api/types";
+import type { IObservatoryNode } from "@/app/api/types";
 import NodeTable from "./NodeTable";
 
-const mappedNymNodes = (nodes: NymNode[]) =>
+const mappedNymNodes = (nodes: IObservatoryNode[]) =>
   nodes.map((node) => {
     return {
       nodeId: node.node_id,
-      bondInformation: node.bond_information,
-      location: node.location,
+      identity_key: node.identity_key,
+      countryCode: node.description.auxiliary_details.location || null,
+      countryName: node.description.auxiliary_details.location || null,
       profitMarginPercentage:
         +node.rewarding_details.cost_params.profit_margin_percent * 100,
-      description: node.description,
+      owner: node.bonding_address,
     };
   });
 
diff --git a/explorer-nextjs/src/components/nymNodePageComponents/BasicInfoCard.tsx b/explorer-nextjs/src/components/nymNodePageComponents/BasicInfoCard.tsx
index c0ec823b78..576112f485 100644
--- a/explorer-nextjs/src/components/nymNodePageComponents/BasicInfoCard.tsx
+++ b/explorer-nextjs/src/components/nymNodePageComponents/BasicInfoCard.tsx
@@ -1,8 +1,4 @@
-import type {
-  BondInformation,
-  NodeDescription,
-  RewardingDetails,
-} from "@/app/api/types";
+import type { IObservatoryNode, RewardingDetails } from "@/app/api/types";
 import { formatBigNum } from "@/utils/formatBigNumbers";
 import { Stack, Typography } from "@mui/material";
 import { format } from "date-fns";
@@ -11,17 +7,16 @@ import CopyToClipboard from "../copyToClipboard/CopyToClipboard";
 import ExplorerListItem from "../list/ListItem";
 
 interface IBasicInfoCardProps {
-  bondInfo: BondInformation;
-  nodeDescription: NodeDescription;
   rewardDetails: RewardingDetails;
+  nodeInfo: IObservatoryNode;
 }
 
 export const BasicInfoCard = (props: IBasicInfoCardProps) => {
-  const { bondInfo, nodeDescription, rewardDetails } = props;
+  const { rewardDetails, nodeInfo } = props;
 
-  const timeBonded = nodeDescription
+  const timeBonded = nodeInfo
     ? format(
-        new Date(nodeDescription.build_information.build_timestamp),
+        new Date(nodeInfo.description.build_information.build_timestamp),
         "dd/MM/yyyy",
       )
     : "-";
@@ -42,8 +37,10 @@ export const BasicInfoCard = (props: IBasicInfoCardProps) => {
               justifyContent="space-between"
               width="100%"
             >
-              <Typography variant="body4">{bondInfo.owner}</Typography>
-              <CopyToClipboard text={bondInfo.owner} />
+              <Typography variant="body4">
+                {nodeInfo.bonding_address}
+              </Typography>
+              <CopyToClipboard text={nodeInfo.bonding_address} />
             </Stack>
           }
         />
@@ -58,10 +55,8 @@ export const BasicInfoCard = (props: IBasicInfoCardProps) => {
               justifyContent="space-between"
               width="100%"
             >
-              <Typography variant="body4">
-                {bondInfo.node.identity_key}
-              </Typography>
-              <CopyToClipboard text={bondInfo.node.identity_key} />
+              <Typography variant="body4">{nodeInfo.identity_key}</Typography>
+              <CopyToClipboard text={nodeInfo.identity_key} />
             </Stack>
           }
         />
diff --git a/explorer-nextjs/src/components/nymNodePageComponents/ChatCard.tsx b/explorer-nextjs/src/components/nymNodePageComponents/ChatCard.tsx
new file mode 100644
index 0000000000..cbaac7e81d
--- /dev/null
+++ b/explorer-nextjs/src/components/nymNodePageComponents/ChatCard.tsx
@@ -0,0 +1,10 @@
+import ExplorerCard from "../cards/ExplorerCard";
+import { Remark42Comments } from "../comments";
+
+export const NodeChatCard = () => {
+  return (
+    <ExplorerCard label="Chat" sx={{ height: "100%" }}>
+      <Remark42Comments />
+    </ExplorerCard>
+  );
+};
diff --git a/explorer-nextjs/src/components/nymNodePageComponents/NodeMetricsCard.tsx b/explorer-nextjs/src/components/nymNodePageComponents/NodeMetricsCard.tsx
index cefa43dee0..7ef86b4b51 100644
--- a/explorer-nextjs/src/components/nymNodePageComponents/NodeMetricsCard.tsx
+++ b/explorer-nextjs/src/components/nymNodePageComponents/NodeMetricsCard.tsx
@@ -1,14 +1,54 @@
-import type { NodeDescription } from "@/app/api/types";
+import type { ExplorerData } from "@/app/api";
+import type { IObservatoryNode } from "@/app/api/types";
+import { CURRENT_EPOCH_REWARDS } from "@/app/api/urls";
 import ExplorerCard from "../cards/ExplorerCard";
 import ExplorerListItem from "../list/ListItem";
 
 interface INodeMetricsCardProps {
-  nodeDescription: NodeDescription;
-  nodeId: number;
+  nodeInfo: IObservatoryNode;
 }
 
-export const NodeMetricsCard = (props: INodeMetricsCardProps) => {
-  const { nodeDescription, nodeId } = props;
+export const NodeMetricsCard = async (props: INodeMetricsCardProps) => {
+  const { nodeInfo } = props;
+
+  const epochRewards = await fetch(CURRENT_EPOCH_REWARDS, {
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json; charset=utf-8",
+    },
+  });
+
+  const epochRewardsData: ExplorerData["currentEpochRewardsData"] =
+    await epochRewards.json();
+
+  function getActiveSetProbability(
+    totalStake: number,
+    stakeSaturationPoint: string,
+  ): string {
+    const saturation = Number.parseFloat(stakeSaturationPoint);
+
+    if (Number.isNaN(saturation) || saturation <= 0) {
+      throw new Error("Invalid stake saturation point provided");
+    }
+
+    const ratio = (totalStake / saturation) * 100;
+
+    if (ratio > 70) {
+      return "High";
+    }
+    if (ratio >= 40 && ratio <= 70) {
+      return "Medium";
+    }
+    return "Low";
+  }
+
+  const activeSetProb =
+    nodeInfo && epochRewardsData
+      ? getActiveSetProbability(
+          nodeInfo.total_stake,
+          epochRewardsData.interval.stake_saturation_point,
+        )
+      : "N/A";
 
   return (
     <ExplorerCard label="Nym node metrics" sx={{ height: "100%" }}>
@@ -16,25 +56,25 @@ export const NodeMetricsCard = (props: INodeMetricsCardProps) => {
         row
         divider
         label="Node ID."
-        value={nodeId.toString()}
+        value={nodeInfo.node_id.toString()}
       />
-      {nodeDescription && (
-        <>
-          <ExplorerListItem
-            row
-            divider
-            label="Host"
-            value={nodeDescription.host_information.ip_address.toString()}
-          />
-          <ExplorerListItem
-            row
-            divider
-            label="Version"
-            value={nodeDescription.build_information.build_version}
-          />
-        </>
+      <>
+        <ExplorerListItem
+          row
+          divider
+          label="Host"
+          value={nodeInfo.description.host_information.ip_address.toString()}
+        />
+        <ExplorerListItem
+          row
+          divider
+          label="Version"
+          value={nodeInfo.description.build_information.build_version}
+        />
+      </>
+      {epochRewardsData && (
+        <ExplorerListItem row label="Active set Prob." value={activeSetProb} />
       )}
-      <ExplorerListItem row label="Active set Prob." value="High" />
     </ExplorerCard>
   );
 };
diff --git a/explorer-nextjs/src/components/nymNodePageComponents/NodeProfileCard.tsx b/explorer-nextjs/src/components/nymNodePageComponents/NodeProfileCard.tsx
index b7a11c4f11..87f684177e 100644
--- a/explorer-nextjs/src/components/nymNodePageComponents/NodeProfileCard.tsx
+++ b/explorer-nextjs/src/components/nymNodePageComponents/NodeProfileCard.tsx
@@ -1,46 +1,148 @@
 "use client";
-import type { BondInformation, NodeDescription } from "@/app/api/types";
+import type { IObservatoryNode } from "@/app/api/types";
+import { COSMOS_KIT_USE_CHAIN } from "@/config";
+import { useNymClient } from "@/hooks/useNymClient";
+import { useChain } from "@cosmos-kit/react";
 import { Box, Button, Stack, Typography } from "@mui/material";
+import { useCallback, useState } from "react";
 import { RandomAvatar } from "react-random-avatars";
 import ExplorerCard from "../cards/ExplorerCard";
 import CountryFlag from "../countryFlag/CountryFlag";
+import Loading from "../loading";
+import InfoModal, { type InfoModalProps } from "../modal/InfoModal";
+import StakeModal from "../staking/StakeModal";
+import { fee } from "../staking/schemas";
+import ConnectWallet from "../wallet/ConnectWallet";
 
 interface INodeProfileCardProps {
-  bondInfo: BondInformation;
-  nodeDescription: NodeDescription;
+  nodeInfo: IObservatoryNode;
 }
 
 export const NodeProfileCard = (props: INodeProfileCardProps) => {
-  const { bondInfo, nodeDescription } = props;
+  const { nodeInfo } = props;
+  const { isWalletConnected } = useChain(COSMOS_KIT_USE_CHAIN);
+  const { nymClient } = useNymClient();
+  const [infoModalProps, setInfoModalProps] = useState<InfoModalProps>({
+    open: false,
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedNodeForStaking, setSelectedNodeForStaking] = useState<{
+    nodeId: number;
+    identityKey: string;
+  }>();
+
+  const handleStakeOnNode = async ({
+    nodeId,
+    amount,
+  }: {
+    nodeId: number;
+    amount: string;
+  }) => {
+    const amountToDelegate = (Number(amount) * 1_000_000).toString();
+    const uNymFunds = [{ amount: amountToDelegate, denom: "unym" }];
+
+    setIsLoading(true);
+    setSelectedNodeForStaking(undefined);
+    try {
+      const tx = await nymClient?.delegate(
+        { nodeId },
+        fee,
+        "Delegation from Nym Explorer V2",
+        uNymFunds,
+      );
+      setSelectedNodeForStaking(undefined);
+      setInfoModalProps({
+        open: true,
+        title: "Success",
+        message: "This operation can take up to one hour to process",
+        tx: tx?.transactionHash,
+
+        onClose: () => setInfoModalProps({ open: false }),
+      });
+    } catch (e) {
+      const errorMessage =
+        e instanceof Error ? e.message : "An error occurred while staking";
+      setInfoModalProps({
+        open: true,
+        title: "Error",
+        message: errorMessage,
+        onClose: () => {
+          setInfoModalProps({ open: false });
+        },
+      });
+    }
+    setIsLoading(false);
+  };
+
+  const handleOnSelectStake = useCallback(() => {
+    if (!isWalletConnected) {
+      setInfoModalProps({
+        open: true,
+        title: "Connect Wallet",
+        message: "Connect your wallet to stake",
+        Action: (
+          <ConnectWallet
+            fullWidth
+            onClick={() =>
+              setInfoModalProps({
+                open: false,
+              })
+            }
+          />
+        ),
+        onClose: () => setInfoModalProps({ open: false }),
+      });
+      return;
+    }
+    setSelectedNodeForStaking({
+      nodeId: nodeInfo.node_id,
+      identityKey: nodeInfo.identity_key,
+    });
+  }, [isWalletConnected, nodeInfo]);
 
   return (
     <ExplorerCard label="Nym Node" sx={{ height: "100%" }}>
       <Stack gap={1}>
         <Box display={"flex"} justifyContent={"flex-start"}>
-          <RandomAvatar name={bondInfo.node.identity_key} size={80} square />
+          <RandomAvatar name={nodeInfo.identity_key} size={80} square />
         </Box>
         <Typography
           variant="h3"
           mt={3}
+          mb={1}
           sx={{ color: "pine.950", wordWrap: "break-word", maxWidth: "95%" }}
         >
-          {"Moniker"}
+          {nodeInfo?.self_description.moniker || "Moniker"}
         </Typography>
-        {nodeDescription && (
+        {nodeInfo.description.auxiliary_details.location && (
           <CountryFlag
-            countryCode={nodeDescription.auxiliary_details.location}
+            countryCode={nodeInfo.description.auxiliary_details.location}
+            countryName={nodeInfo.description.auxiliary_details.location}
           />
         )}
-        <Typography variant="body4" sx={{ color: "pine.950" }}>
-          Team of professional validators with best digital solutions. Please
-          visit our Telegram🔹https://t.me/CryptoSailorsAnn🔹
-        </Typography>
+        {nodeInfo && (
+          <Typography variant="body4" sx={{ color: "pine.950" }} mt={2}>
+            {nodeInfo.self_description.details}
+          </Typography>
+        )}
         <Box mt={3}>
-          <Button variant="contained" size="small">
+          <Button
+            variant="contained"
+            size="small"
+            onClick={handleOnSelectStake}
+          >
             Stake on node
           </Button>
         </Box>
       </Stack>
+      {isLoading && <Loading />}
+      <StakeModal
+        nodeId={selectedNodeForStaking?.nodeId}
+        identityKey={selectedNodeForStaking?.identityKey}
+        onStake={handleStakeOnNode}
+        onClose={() => setSelectedNodeForStaking(undefined)}
+      />
+      <InfoModal {...infoModalProps} />
     </ExplorerCard>
   );
 };
diff --git a/explorer-nextjs/src/components/nymNodePageComponents/NodeRewardsCard.tsx b/explorer-nextjs/src/components/nymNodePageComponents/NodeRewardsCard.tsx
index a674393381..7e97c1ce54 100644
--- a/explorer-nextjs/src/components/nymNodePageComponents/NodeRewardsCard.tsx
+++ b/explorer-nextjs/src/components/nymNodePageComponents/NodeRewardsCard.tsx
@@ -1,23 +1,18 @@
-import type { RewardingDetails } from "@/app/api/types";
+import type { IObservatoryNode, RewardingDetails } from "@/app/api/types";
 import ExplorerCard from "../cards/ExplorerCard";
 import ExplorerListItem from "../list/ListItem";
 
 interface INodeRewardsCardProps {
   rewardDetails: RewardingDetails;
+  nodeInfo?: IObservatoryNode;
 }
 
 export const NodeRewardsCard = (props: INodeRewardsCardProps) => {
   const { rewardDetails } = props;
 
-  const totalRewards = Number(rewardDetails.total_unit_reward) / 1000000;
-  const totalRewardsFormated = `${totalRewards} NYM`;
-
   const operatorRewards = Number(rewardDetails.operator) / 1000000;
   const operatorRewardsFormated = `${operatorRewards} NYM`;
 
-  const stakerRewards = Number(rewardDetails.delegates) / 1000000;
-  const stakerRewardsFormated = `${stakerRewards} NYM`;
-
   const profitMarginPercent =
     Number(rewardDetails.cost_params.profit_margin_percent) * 100;
 
@@ -29,24 +24,24 @@ export const NodeRewardsCard = (props: INodeRewardsCardProps) => {
 
   return (
     <ExplorerCard label="Node rewards(last epoch/hour)" sx={{ height: "100%" }}>
-      <ExplorerListItem
+      {/* <ExplorerListItem
         row
         divider
         label="Total rew."
         value={totalRewardsFormated}
-      />
+      /> */}
       <ExplorerListItem
         row
         divider
         label="Operator rew."
         value={operatorRewardsFormated}
       />
-      <ExplorerListItem
+      {/* <ExplorerListItem
         row
         divider
         label="Staker rew."
         value={stakerRewardsFormated}
-      />
+      /> */}
       <ExplorerListItem
         row
         divider
diff --git a/explorer-nextjs/src/components/nymNodePageComponents/QualityIndicatorsCard.tsx b/explorer-nextjs/src/components/nymNodePageComponents/QualityIndicatorsCard.tsx
index f9e31e0688..02f1c690bb 100644
--- a/explorer-nextjs/src/components/nymNodePageComponents/QualityIndicatorsCard.tsx
+++ b/explorer-nextjs/src/components/nymNodePageComponents/QualityIndicatorsCard.tsx
@@ -1,11 +1,19 @@
-import type { NodeDescription } from "@/app/api/types";
+"use client";
+
+import type {
+  GatewayStatus,
+  IObservatoryNode,
+  LastProbeResult,
+  NodeDescription,
+} from "@/app/api/types";
 import { Chip, Stack } from "@mui/material";
+import { useEffect, useState } from "react";
 import ExplorerCard from "../cards/ExplorerCard";
 import ExplorerListItem from "../list/ListItem";
 import StarRating from "../starRating/StarRating";
 
 interface IQualityIndicatorsCardProps {
-  nodeDescription: NodeDescription;
+  nodeInfo: IObservatoryNode;
 }
 
 type NodeDescriptionNotNull = NonNullable<NodeDescription>;
@@ -29,20 +37,187 @@ function getNodeRoles(
   return activeRoles;
 }
 
-export const QualityIndicatorsCard = (props: IQualityIndicatorsCardProps) => {
-  const { nodeDescription } = props;
+function calculateQualityOfServiceStars(quality: number): number {
+  switch (true) {
+    case quality < 0.3:
+      return 1;
+    case quality < 0.5:
+      return 2;
+    case quality < 0.7:
+      return 3;
+    default:
+      return 4;
+  }
+}
+
+function calculateConfigScoreStars(probeResult: LastProbeResult): number {
+  const { as_entry, as_exit } = probeResult.outcome;
+
+  if (as_entry && as_exit) {
+    const allResults = [
+      as_entry.can_connect,
+      as_entry.can_route,
+      as_exit.can_connect,
+      as_exit.can_route_ip_external_v4,
+      as_exit.can_route_ip_external_v6,
+      as_exit.can_route_ip_v4,
+      as_exit.can_route_ip_v6,
+    ];
 
-  if (!nodeDescription) {
-    return null;
+    const combinedScore = allResults.filter(Boolean).length;
+
+    switch (combinedScore) {
+      case 7:
+        return 4;
+      case 6:
+        return 3;
+      case 5:
+        return 2;
+      default:
+        return 1;
+    }
+  }
+
+  if (as_entry) {
+    const { can_connect, can_route } = as_entry;
+    const entryScore = [can_connect, can_route].filter(Boolean).length;
+
+    switch (entryScore) {
+      case 2:
+        return 4;
+      case 1:
+        return 2;
+      default:
+        return 1;
+    }
   }
 
-  const nodeRoles = getNodeRoles(nodeDescription.declared_role);
+  if (as_exit) {
+    const {
+      can_connect,
+      can_route_ip_external_v4,
+      can_route_ip_external_v6,
+      can_route_ip_v4,
+      can_route_ip_v6,
+    } = as_exit;
+
+    const exitScore = [
+      can_connect,
+      can_route_ip_external_v4,
+      can_route_ip_external_v6,
+      can_route_ip_v4,
+      can_route_ip_v6,
+    ].filter(Boolean).length;
+
+    switch (exitScore) {
+      case 5:
+        return 4;
+      case 4:
+        return 3;
+      case 3:
+        return 2;
+      default:
+        return 1;
+    }
+  }
+
+  return 0; // Default case if neither as_entry nor as_exit is present
+}
+
+function calculateWireguardPerformance(probeResult: LastProbeResult): number {
+  const { wg, as_exit } = probeResult.outcome;
+
+  if (!wg) {
+    return 1; // Default to 1 star if Wireguard information is missing
+  }
+
+  const pingPerformance =
+    (wg.ping_hosts_performance_v4 +
+      wg.ping_hosts_performance_v6 +
+      wg.ping_ips_performance_v4 +
+      wg.ping_ips_performance_v6) /
+    4;
+
+  switch (true) {
+    case wg.can_register &&
+      wg.can_handshake_v4 &&
+      wg.can_handshake_v6 &&
+      wg.can_resolve_dns_v4 &&
+      wg.can_resolve_dns_v6 &&
+      pingPerformance > 0.75:
+      return 4;
+
+    case wg.can_register &&
+      wg.can_handshake_v4 &&
+      wg.can_handshake_v6 &&
+      wg.can_resolve_dns_v4 &&
+      wg.can_resolve_dns_v6 &&
+      pingPerformance <= 0.75:
+      return 3;
+
+    case wg.can_register && (!wg.can_handshake_v4 || !wg.can_handshake_v6):
+      return 2;
+
+    case as_exit && (!as_exit.can_route_ip_v4 || !as_exit.can_route_ip_v6):
+      return 1;
+
+    default:
+      return 1; // Default case
+  }
+}
+
+export const QualityIndicatorsCard = (props: IQualityIndicatorsCardProps) => {
+  const { nodeInfo } = props;
+
+  const [gatewayStatus, setGatewayStatus] = useState<GatewayStatus>();
+
+  const nodeRoles = getNodeRoles(nodeInfo.description.declared_role);
   const NodeRoles = nodeRoles.map((role) => (
     <Stack key={role} direction="row" gap={1}>
       <Chip key={role} label={role} size="small" />
     </Stack>
   ));
 
+  const qualityOfServiceStars = nodeInfo?.uptime
+    ? calculateQualityOfServiceStars(nodeInfo?.uptime)
+    : gatewayStatus
+      ? calculateQualityOfServiceStars(gatewayStatus.performance)
+      : 1;
+
+  const nodeIsMixNodeOnly =
+    NodeRoles.length === 1 && nodeRoles[0] === "Mix Node";
+
+  useEffect(() => {
+    // Fetch data if the node has certain roles
+    if (
+      nodeRoles.includes("Entry Node") ||
+      nodeRoles.includes("Exit IPR Node") ||
+      nodeRoles.includes("Exit NR Node")
+    ) {
+      const fetchData = async () => {
+        try {
+          const response = await fetch(
+            `https://mainnet-node-status-api.nymtech.cc/v2/gateways/${nodeInfo.identity_key}`,
+          );
+          const data: GatewayStatus = await response.json();
+          setGatewayStatus(data);
+        } catch (error) {
+          console.error("Error fetching data:", error);
+        }
+      };
+
+      fetchData();
+    }
+  }, [nodeRoles, nodeInfo.identity_key]);
+
+  const configScoreStars = gatewayStatus
+    ? calculateConfigScoreStars(gatewayStatus.last_probe_result)
+    : 0;
+
+  const wireguardPerformanceStars = gatewayStatus
+    ? calculateWireguardPerformance(gatewayStatus.last_probe_result)
+    : 0;
+
   return (
     <ExplorerCard label="Quality indicatiors" sx={{ height: "100%" }}>
       <ExplorerListItem
@@ -59,20 +234,24 @@ export const QualityIndicatorsCard = (props: IQualityIndicatorsCardProps) => {
         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} />}
+        value={<StarRating value={qualityOfServiceStars} />}
       />
+      {!nodeIsMixNodeOnly && (
+        <ExplorerListItem
+          row
+          divider
+          label="Config score"
+          value={<StarRating value={configScoreStars} />}
+        />
+      )}
+      {!nodeIsMixNodeOnly && (
+        <ExplorerListItem
+          row
+          divider
+          label="Wireguard performance"
+          value={<StarRating value={wireguardPerformanceStars} />}
+        />
+      )}
     </ExplorerCard>
   );
 };
diff --git a/explorer-nextjs/src/components/search/NodeAndAddressSearch.tsx b/explorer-nextjs/src/components/search/NodeAndAddressSearch.tsx
index 28e4c250f3..9da03a1a7f 100644
--- a/explorer-nextjs/src/components/search/NodeAndAddressSearch.tsx
+++ b/explorer-nextjs/src/components/search/NodeAndAddressSearch.tsx
@@ -1,8 +1,8 @@
 "use client";
+import type NodeData from "@/app/api/types";
 import { NYM_NODE_BONDED } from "@/app/api/urls";
 import { Search } from "@mui/icons-material";
 import { Button, CircularProgress, Stack, Typography } from "@mui/material";
-import type { NymNodeDetails } from "@nymproject/types";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import Input from "../input/Input";
@@ -46,8 +46,8 @@ const NodeAndAddressSearch = () => {
         if (response.ok) {
           const nodes = await response.json();
           const matchingNode = nodes.data.find(
-            (node: NymNodeDetails) =>
-              node.bond_information.identity_key === inputValue,
+            (node: NodeData) =>
+              node.bond_information.node.identity_key === inputValue,
           );
 
           if (matchingNode) {
@@ -69,7 +69,7 @@ const NodeAndAddressSearch = () => {
     <Stack spacing={2} direction="column">
       <Stack spacing={4} direction="row">
         <Input
-          placeholder="Node ID / Nym Address"
+          placeholder="Node Identity Key / Nym Address"
           fullWidth
           value={inputValue}
           onChange={(e) => setInputValue(e.target.value)}
diff --git a/explorer-nextjs/src/components/staking/StakeTable.tsx b/explorer-nextjs/src/components/staking/StakeTable.tsx
index d5692062a0..7e2a26bc44 100644
--- a/explorer-nextjs/src/components/staking/StakeTable.tsx
+++ b/explorer-nextjs/src/components/staking/StakeTable.tsx
@@ -138,6 +138,8 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
     [handleUnstake],
   );
 
+  console.log("delegations :>> ", delegations);
+
   const columns: MRT_ColumnDef<DelegationWithNodeDetails>[] = useMemo(
     () => [
       {
@@ -151,7 +153,7 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
               {row.original.delegation?.node_id || "-"}
             </Typography>
             <Typography variant="body5">
-              {row.original.node?.bondInformation.node.identity_key || "-"}
+              {row.original.node?.identity_key || "-"}
             </Typography>
           </Stack>
         ),
@@ -162,16 +164,12 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
         accessorKey: "location.country_name",
         Header: <ColumnHeading>Location</ColumnHeading>,
         Cell: ({ row }) =>
-          row.original.node?.location.two_letter_iso_country_code ? (
-            <Tooltip title={row.original.node.location.country_name}>
+          row.original.node?.countryCode ? (
+            <Tooltip title={row.original.node?.countryName}>
               <Box>
                 <CountryFlag
-                  countryCode={
-                    row.original.node.location.two_letter_iso_country_code
-                  }
-                  countryName={
-                    row.original.node.location.two_letter_iso_country_code
-                  }
+                  countryCode={row.original.node?.countryCode}
+                  countryName={row.original.node?.countryCode}
                 />
               </Box>
             </Tooltip>
diff --git a/explorer-nextjs/src/components/staking/StakeTableWithAction.tsx b/explorer-nextjs/src/components/staking/StakeTableWithAction.tsx
index 2324275386..6d6139e79b 100644
--- a/explorer-nextjs/src/components/staking/StakeTableWithAction.tsx
+++ b/explorer-nextjs/src/components/staking/StakeTableWithAction.tsx
@@ -1,16 +1,17 @@
 import getNymNodes from "@/actions/getNymNodes";
-import type NymNode from "@/app/api/types";
+import type { IObservatoryNode } from "@/app/api/types";
 import StakeTable from "./StakeTable";
 
-const mappedNymNodes = (nodes: NymNode[]) =>
+const mappedNymNodes = (nodes: IObservatoryNode[]) =>
   nodes.map((node) => {
     return {
       nodeId: node.node_id,
-      bondInformation: node.bond_information,
-      location: node.location,
+      identity_key: node.identity_key,
+      countryCode: node.description.auxiliary_details.location || null,
+      countryName: node.description.auxiliary_details.location || null,
       profitMarginPercentage:
         +node.rewarding_details.cost_params.profit_margin_percent * 100,
-      description: node.description,
+      owner: node.bonding_address,
     };
   });
 
diff --git a/explorer-nextjs/src/components/starRating/StarRating.tsx b/explorer-nextjs/src/components/starRating/StarRating.tsx
index fd41c7ad39..a1fd040ac5 100644
--- a/explorer-nextjs/src/components/starRating/StarRating.tsx
+++ b/explorer-nextjs/src/components/starRating/StarRating.tsx
@@ -4,7 +4,7 @@ import { Rating } from "@mui/material";
 const StarRating = ({
   value,
   defaultValue,
-  max = 5,
+  max = 4,
   size = "medium",
 }: {
   value: number;
diff --git a/explorer-nextjs/src/components/wallet/ConnectWallet.tsx b/explorer-nextjs/src/components/wallet/ConnectWallet.tsx
index 40596bfe55..a7c18ee472 100644
--- a/explorer-nextjs/src/components/wallet/ConnectWallet.tsx
+++ b/explorer-nextjs/src/components/wallet/ConnectWallet.tsx
@@ -2,7 +2,13 @@
 
 import { COSMOS_KIT_USE_CHAIN } from "@/config";
 import { useChain } from "@cosmos-kit/react";
-import { Button, type ButtonProps, IconButton, Stack } from "@mui/material";
+import {
+  Box,
+  Button,
+  type ButtonProps,
+  IconButton,
+  Typography,
+} from "@mui/material";
 import Cross from "../icons/Cross";
 import { WalletAddress } from "./WalletAddress";
 import { WalletBalance } from "./WalletBalance";
@@ -27,18 +33,36 @@ const ConnectWallet = ({ ...buttonProps }: ButtonPropsWithOnClick) => {
 
   if (isWalletConnected && !buttonProps.hideAddressAndBalance) {
     return (
-      <Stack direction="row" spacing={3}>
+      <Box
+        display={"flex"}
+        flexDirection={{ xs: "column", sm: "row" }}
+        alignItems={"center"}
+        gap={{ xs: 2, sm: 3 }}
+      >
         <WalletBalance />
         <WalletAddress address={address} />
-        <IconButton
-          size="small"
-          onClick={async () => {
-            await handleDisconnectWallet();
-          }}
-        >
-          <Cross />
-        </IconButton>
-      </Stack>
+        <Box>
+          <IconButton
+            size="small"
+            onClick={async () => {
+              await handleDisconnectWallet();
+            }}
+          >
+            <Box height={24} display={"flex"} alignItems={"center"}>
+              <Typography
+                variant="h5"
+                fontWeight={400}
+                mr={1}
+                display={{ sm: "none" }}
+                sx={{ color: "unset" }}
+              >
+                Disconnect
+              </Typography>
+              <Cross />
+            </Box>
+          </IconButton>
+        </Box>
+      </Box>
     );
   }
 
diff --git a/explorer-nextjs/src/config/index.ts b/explorer-nextjs/src/config/index.ts
index f38215abcf..6ee864de33 100644
--- a/explorer-nextjs/src/config/index.ts
+++ b/explorer-nextjs/src/config/index.ts
@@ -1,5 +1,5 @@
 export const COSMOS_KIT_USE_CHAIN =
-  process.env.NEXT_PUBLIC_COSMOS_KIT_USE_CHAIN || "sandbox";
+  process.env.NEXT_PUBLIC_COSMOS_KIT_USE_CHAIN || "nyx";
 
 export const NYM_MIXNET_CONTRACT =
   process.env.NYM_MIXNET_CONTRACT ||
diff --git a/explorer-nextjs/src/data/blog-template-3.json b/explorer-nextjs/src/data/blog-template-3.json
new file mode 100644
index 0000000000..1fed22d333
--- /dev/null
+++ b/explorer-nextjs/src/data/blog-template-3.json
@@ -0,0 +1,157 @@
+{
+  "title": "Blog Template 3",
+  "label": "Onboarding",
+  "description": "VPNs can be powerful tools in protecting us from hackers, but not all cyber attacks. dVPNs are even more effective.",
+  "attributes": {
+    "blogAuthors": ["Nym"],
+    "date": "Mon Jan 05 2025 10:26:09 GMT+0000 (Greenwich Mean Time)",
+    "readingTime": 5
+  },
+  "icon": "/icons/gateway.svg",
+  "image": "/images/placeholder.webp",
+  "overview": {
+    "content": [
+      {
+        "type": "paragraph",
+        "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+      },
+      {
+        "type": "paragraph",
+        "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+      },
+      {
+        "type": "paragraph",
+        "text": "This is where decentralized VPNs (dVPNs) come in. dVPNs are even more effective at protecting you from hackers because they are decentralized and do not rely on a single server to protect your data. This makes them more secure and harder for hackers to attack."
+      }
+    ],
+    "image": "https://nymtech.net/api/uploads/presentation-poster?w=3840&q=75"
+  },
+  "sections": [
+    {
+      "id": "section-1",
+      "heading": "Section 1",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-2",
+      "heading": "Section 2",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-3",
+      "heading": "Section 3",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-4",
+      "heading": "Section 4",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-5",
+      "heading": "Section 5",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-6",
+      "heading": "Section 6",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-7",
+      "heading": "Section 7",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-8",
+      "heading": "Section 8",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-9",
+      "heading": "Section 9",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    }
+  ]
+}
diff --git a/explorer-nextjs/src/data/blog-template-4.json b/explorer-nextjs/src/data/blog-template-4.json
new file mode 100644
index 0000000000..1e66e7874a
--- /dev/null
+++ b/explorer-nextjs/src/data/blog-template-4.json
@@ -0,0 +1,157 @@
+{
+  "title": "Blog Template 4",
+  "label": "Onboarding",
+  "description": "VPNs can be powerful tools in protecting us from hackers, but not all cyber attacks. dVPNs are even more effective.",
+  "attributes": {
+    "blogAuthors": ["Nym"],
+    "date": "Mon Jan 05 2025 10:26:09 GMT+0000 (Greenwich Mean Time)",
+    "readingTime": 5
+  },
+  "icon": "/icons/gateway.svg",
+  "image": "/images/placeholder.webp",
+  "overview": {
+    "content": [
+      {
+        "type": "paragraph",
+        "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+      },
+      {
+        "type": "paragraph",
+        "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+      },
+      {
+        "type": "paragraph",
+        "text": "This is where decentralized VPNs (dVPNs) come in. dVPNs are even more effective at protecting you from hackers because they are decentralized and do not rely on a single server to protect your data. This makes them more secure and harder for hackers to attack."
+      }
+    ],
+    "image": "https://nymtech.net/api/uploads/presentation-poster?w=3840&q=75"
+  },
+  "sections": [
+    {
+      "id": "section-1",
+      "heading": "Section 1",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-2",
+      "heading": "Section 2",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-3",
+      "heading": "Section 3",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-4",
+      "heading": "Section 4",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-5",
+      "heading": "Section 5",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-6",
+      "heading": "Section 6",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-7",
+      "heading": "Section 7",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-8",
+      "heading": "Section 8",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    },
+    {
+      "id": "section-9",
+      "heading": "Section 9",
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "VPNs are a popular tool for protecting your privacy online. They encrypt your internet connection and hide your IP address, making it harder for hackers to track your online activity. But do VPNs protect you from hackers? The answer is yes, but not all cyber attacks."
+        },
+        {
+          "type": "paragraph",
+          "text": "VPNs can be powerful tools in protecting us from hackers, but they are not foolproof. They can help protect your data from being intercepted by hackers when you are using public Wi-Fi networks, but they cannot protect you from all cyber attacks. For example, they cannot protect you from phishing attacks or malware that is already on your device."
+        }
+      ]
+    }
+  ]
+}