diff --git a/explorer-nextjs/app/components/AccountStatsCard.tsx b/explorer-nextjs/app/components/AccountStatsCard.tsx
new file mode 100644
index 0000000000..e376a61b86
--- /dev/null
+++ b/explorer-nextjs/app/components/AccountStatsCard.tsx
@@ -0,0 +1,205 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+import Collapse from "@mui/material/Collapse";
+import IconButton from "@mui/material/IconButton";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Typography from "@mui/material/Typography";
+import Paper from "@mui/material/Paper";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import { Card, CardContent } from "@mui/material";
+import { ExplorerStaticProgressBar } from "./ExplorerStaticProgressBar";
+
+export interface IAccontStatsRowProps {
+  type: string;
+  allocation: number;
+  amount: number;
+  value: number;
+  history?: { type: string; amount: number }[];
+  isLastRow?: boolean;
+  progressBarColor: string;
+}
+
+const progressBarColours = [
+  "#BEF885",
+  "#7FB0FF",
+  "#00D17D",
+  "#004650",
+  "#FEECB3",
+];
+
+const Row = (props: IAccontStatsRowProps) => {
+  const {
+    type,
+    allocation,
+    amount,
+    value,
+    history,
+    isLastRow,
+    progressBarColor,
+  } = props;
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <React.Fragment>
+      {/* Main Row */}
+
+      <TableRow>
+        <TableCell
+          sx={{
+            borderBottom: isLastRow
+              ? "none"
+              : "1px solid rgba(224, 224, 224, 1)",
+          }}
+        >
+          {type}
+        </TableCell>
+        <TableCell
+          align="right"
+          sx={{
+            borderBottom: isLastRow
+              ? "none"
+              : "1px solid rgba(224, 224, 224, 1)",
+          }}
+        >
+          <Box>
+            <Typography>{allocation}%</Typography>
+            <ExplorerStaticProgressBar
+              value={allocation}
+              color={progressBarColor}
+            />
+          </Box>
+        </TableCell>
+        <TableCell
+          align="right"
+          sx={{
+            borderBottom: isLastRow
+              ? "none"
+              : "1px solid rgba(224, 224, 224, 1)",
+          }}
+        >
+          {amount} NYM
+        </TableCell>
+        <TableCell
+          align="right"
+          sx={{
+            borderBottom: isLastRow
+              ? "none"
+              : "1px solid rgba(224, 224, 224, 1)",
+          }}
+        >
+          $ {value}
+        </TableCell>
+        <TableCell
+          sx={{
+            borderBottom: isLastRow
+              ? "none"
+              : "1px solid rgba(224, 224, 224, 1)",
+          }}
+        >
+          {history && (
+            <IconButton
+              aria-label="expand row"
+              size="small"
+              onClick={() => setOpen(!open)}
+            >
+              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+            </IconButton>
+          )}
+        </TableCell>
+      </TableRow>
+
+      {/* History Rows */}
+      {history &&
+        open &&
+        history.map((historyRow, i) => (
+          <TableRow key={i}>
+            <TableCell
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                pl: 5,
+                borderBottom: "none", // Explicitly remove border
+              }}
+            >
+              <span style={{ marginRight: 8 }}>•</span>
+              {historyRow.type}
+            </TableCell>
+            <TableCell
+              align="right"
+              sx={{
+                borderBottom: "none", // Explicitly remove border
+              }}
+            >
+              {/* Empty cell for alignment */}
+            </TableCell>
+            <TableCell
+              align="right"
+              sx={{
+                borderBottom: "none", // Explicitly remove border
+              }}
+            >
+              {historyRow.amount}
+            </TableCell>
+            <TableCell
+              align="right"
+              sx={{
+                borderBottom: "none", // Explicitly remove border
+              }}
+            >
+              {/* Empty cell for alignment */}
+            </TableCell>
+            <TableCell
+              sx={{
+                borderBottom: "none", // Explicitly remove border
+              }}
+            >
+              {/* Any additional content */}
+            </TableCell>
+          </TableRow>
+        ))}
+    </React.Fragment>
+  );
+};
+
+export interface IAccountStatsCardProps {
+  rows: Array<IAccontStatsRowProps>;
+}
+
+export const AccountStatsCard = (props: IAccountStatsCardProps) => {
+  const { rows } = props;
+  return (
+    <Card sx={{ height: "100%", borderRadius: "unset" }}>
+      <CardContent>
+        <TableContainer>
+          <Table aria-label="collapsible table" sx={{ marginBottom: 3 }}>
+            <TableHead>
+              <TableRow>
+                <TableCell>Type</TableCell>
+                <TableCell align="right">Allocation</TableCell>
+                <TableCell align="right">Amount</TableCell>
+                <TableCell align="right">Value</TableCell>
+                <TableCell></TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row, i) => (
+                <Row
+                  key={i}
+                  {...row}
+                  isLastRow={i === rows.length - 1}
+                  progressBarColor={progressBarColours[i]}
+                />
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/explorer-nextjs/app/components/ExplorerCard.tsx b/explorer-nextjs/app/components/ExplorerCard.tsx
index 676f5fd8c3..0a8ce3697d 100644
--- a/explorer-nextjs/app/components/ExplorerCard.tsx
+++ b/explorer-nextjs/app/components/ExplorerCard.tsx
@@ -2,9 +2,9 @@ import { Card, CardContent, Typography, Box, Button } from "@mui/material";
 import React, { FC, ReactElement, ReactEventHandler, useEffect } from "react";
 import { ExplorerLineChart, IExplorerLineChartData } from "./ExplorerLineChart";
 import {
-  ExplorerProgressBar,
-  IExplorerProgressBarProps,
-} from "./ExplorerProgressBar";
+  ExplorerDynamicProgressBar,
+  IExplorerDynamicProgressBarProps,
+} from "./ExplorerDynamicProgressBar";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import { NymTokenSVG } from "../icons/NymTokenSVG";
@@ -311,7 +311,7 @@ export type ContentCardProps = {
   titlePrice?: ICardTitlePriceProps;
   dataRows?: ICardDataRowsProps;
   graph?: { data: Array<IExplorerLineChartData>; color: string; label: string };
-  progressBar?: IExplorerProgressBarProps;
+  progressBar?: IExplorerDynamicProgressBarProps;
   paragraph?: string;
   onClick?: ReactEventHandler;
   nymAddress?: ICardCopyAddressProps;
@@ -376,7 +376,7 @@ export const ExplorerCard: FC<ContentCardProps> = ({
       )}
       {progressBar && (
         <Box mb={3}>
-          <ExplorerProgressBar {...progressBar} />
+          <ExplorerDynamicProgressBar {...progressBar} />
         </Box>
       )}
       {paragraph && <Typography>{paragraph}</Typography>}
diff --git a/explorer-nextjs/app/components/ExplorerProgressBar.tsx b/explorer-nextjs/app/components/ExplorerDynamicProgressBar.tsx
similarity index 95%
rename from explorer-nextjs/app/components/ExplorerProgressBar.tsx
rename to explorer-nextjs/app/components/ExplorerDynamicProgressBar.tsx
index 845c455a45..aa39eeea98 100644
--- a/explorer-nextjs/app/components/ExplorerProgressBar.tsx
+++ b/explorer-nextjs/app/components/ExplorerDynamicProgressBar.tsx
@@ -3,13 +3,15 @@ import Box from "@mui/material/Box";
 import LinearProgress from "@mui/material/LinearProgress";
 import { Typography } from "@mui/material";
 
-export interface IExplorerProgressBarProps {
+export interface IExplorerDynamicProgressBarProps {
   title?: string;
   start: string; // Start timestamp as ISO 8601 string
   showEpoch: boolean;
 }
 
-export const ExplorerProgressBar = (props: IExplorerProgressBarProps) => {
+export const ExplorerDynamicProgressBar = (
+  props: IExplorerDynamicProgressBarProps
+) => {
   const { start, showEpoch, title } = props;
   const [progress, setProgress] = React.useState(0);
 
diff --git a/explorer-nextjs/app/components/ExplorerStaticProgressBar.tsx b/explorer-nextjs/app/components/ExplorerStaticProgressBar.tsx
new file mode 100644
index 0000000000..257d27185a
--- /dev/null
+++ b/explorer-nextjs/app/components/ExplorerStaticProgressBar.tsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+import LinearProgress from "@mui/material/LinearProgress";
+import { Typography } from "@mui/material";
+
+export interface IExplorerStaticProgressBarProps {
+  color: string;
+  value: number;
+}
+
+export const ExplorerStaticProgressBar = (
+  props: IExplorerStaticProgressBarProps
+) => {
+  const { color, value } = props;
+
+  return (
+    <Box>
+      <LinearProgress
+        variant="determinate"
+        value={value}
+        sx={{
+          height: 8,
+          borderRadius: 4,
+          backgroundColor: "#CAD6D7",
+          "& .MuiLinearProgress-bar": {
+            backgroundColor: color,
+          },
+        }}
+      />
+    </Box>
+  );
+};
diff --git a/explorer-nextjs/app/page.tsx b/explorer-nextjs/app/page.tsx
index 0ae1d9b4d3..1b42dde8b3 100644
--- a/explorer-nextjs/app/page.tsx
+++ b/explorer-nextjs/app/page.tsx
@@ -21,6 +21,10 @@ import { ContentCardProps, ExplorerCard } from "./components/ExplorerCard";
 import type { GetStaticProps, InferGetStaticPropsType } from "next";
 import { ExplorerData, getCacheExplorerData } from "./api/explorer";
 import { IExplorerLineChartData } from "./components/ExplorerLineChart";
+import {
+  AccountStatsCard,
+  IAccountStatsCardProps,
+} from "./components/AccountStatsCard";
 
 // type ContentCardProps = {
 //   overTitle?: string;
@@ -253,6 +257,45 @@ export default function PageOverview() {
     graph: stakeLineGraphData,
   };
 
+  const accountStatsCard: IAccountStatsCardProps = {
+    rows: [
+      { type: "Spendable", allocation: 15.53, amount: 12800, value: 1200 },
+      {
+        type: "Delegated",
+        allocation: 15.53,
+        amount: 12800,
+        value: 1200,
+        history: [
+          { type: "Liquid", amount: 6900 },
+          { type: "Locked", amount: 6900 },
+        ],
+      },
+      {
+        type: "Claimable",
+        allocation: 15.53,
+        amount: 12800,
+        value: 1200,
+        history: [
+          { type: "Unlocked", amount: 6900 },
+          { type: "Staking rewards", amount: 6900 },
+          { type: "Operator comission", amount: 6900 },
+        ],
+      },
+      {
+        type: "Self bonded",
+        allocation: 15.53,
+        amount: 12800,
+        value: 1200,
+      },
+      {
+        type: "Locked",
+        allocation: 15.53,
+        amount: 12800,
+        value: 1200,
+      },
+    ],
+  };
+
   const {
     summaryOverview,
     gateways,
@@ -271,6 +314,9 @@ export default function PageOverview() {
           <Grid container spacing={3}>
             {summaryOverview && (
               <>
+                <Grid item xs={12}>
+                  <AccountStatsCard {...accountStatsCard} />
+                </Grid>
                 <Grid item xs={12} md={4}>
                   <ExplorerCard {...explorerCard} />
                 </Grid>
diff --git a/explorer-nextjs/remark42/var/remark42.db b/explorer-nextjs/remark42/var/remark42.db
index 28d420e506..9fdd644cbc 100644
Binary files a/explorer-nextjs/remark42/var/remark42.db and b/explorer-nextjs/remark42/var/remark42.db differ