diff --git a/src/api/LatestDataApi.ts b/src/api/LatestDataApi.ts
index a583994f..8f9cc848 100644
--- a/src/api/LatestDataApi.ts
+++ b/src/api/LatestDataApi.ts
@@ -14,7 +14,13 @@ import {
   MAIN_LATEST_TRANSACTION_URL,
   wrapResponse,
 } from "./index";
-import { BlockProps, RawTransactionI } from "./types";
+import {
+  BlockProps,
+  ChartDataProps,
+  DashboardStatsProps,
+  RawTransactionI,
+  SmartContractStatsProps,
+} from "./types";
 
 const MAX_ROW = 5;
 
@@ -76,4 +82,25 @@ export default {
       };
     });
   },
+  getDashboardStats: async (
+    network: NetworkConnection
+  ): Promise<DashboardStatsProps> => {
+    const baseUrl = getBaseUrl(network);
+    const res = await fetch(`${baseUrl}/api/v2/stats`);
+    return wrapResponse<DashboardStatsProps>(res);
+  },
+  getSmartContractStats: async (
+    network: NetworkConnection
+  ): Promise<SmartContractStatsProps> => {
+    const baseUrl = getBaseUrl(network);
+    const res = await fetch(`${baseUrl}/api/v2/smart-contracts/counters`);
+    return wrapResponse<SmartContractStatsProps>(res);
+  },
+  getTxnChartsData: async (
+    network: NetworkConnection
+  ): Promise<ChartDataProps> => {
+    const baseUrl = getBaseUrl(network);
+    const res = await fetch(`${baseUrl}/api/v2/stats/charts/transactions`);
+    return wrapResponse<ChartDataProps>(res);
+  },
 };
diff --git a/src/api/types.ts b/src/api/types.ts
index b2461cb9..97e31a69 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -246,6 +246,43 @@ export interface RawTransactionV1 {
   status: string;
 }
 
+export interface DashboardStatsProps {
+  average_block_time: number;
+  coin_price: string;
+  gas_prices: {
+    average: number;
+    fast: number;
+    slow: number;
+  };
+  average: number;
+  fast: number;
+  slow: number;
+  gas_used_today: string;
+  market_cap: string;
+  network_utilization_percentage: number;
+  static_gas_price: string | null;
+  total_addresses: string;
+  total_blocks: string;
+  total_gas_used: string;
+  total_transactions: string;
+  transactions_today: string;
+}
+
+export interface SmartContractStatsProps {
+  new_smart_contracts_24h: string;
+  new_verified_smart_contracts_24h: string;
+  smart_contracts: string;
+  verified_smart_contracts: string;
+}
+export interface ChartDataI {
+  date: string;
+  tx_count: number;
+}
+
+export interface ChartDataProps {
+  chart_data: ChartDataI[];
+}
+
 export interface AddressProps {
   hash: string;
   implementation_name: string | null;
diff --git a/src/components/GroupStatisticCard.tsx b/src/components/GroupStatisticCard.tsx
index 3104ccd1..172b3b83 100644
--- a/src/components/GroupStatisticCard.tsx
+++ b/src/components/GroupStatisticCard.tsx
@@ -1,34 +1,120 @@
-import React from "react";
+import { useState, useEffect } from "react";
 import StatisticCard from "@components/commons/StatisticCard";
+import clsx from "clsx";
+import { MdCheckCircle } from "react-icons/md";
+import LatestDataApi from "@api/LatestDataApi";
+import { useNetwork } from "@contexts/NetworkContext";
+import BigNumber from "bignumber.js";
+import { DashboardStatsProps, SmartContractStatsProps } from "@api/types";
+import { GWEI_SYMBOL } from "shared/constants";
+import NumericFormat from "./commons/NumericFormat";
+
+export default function GroupStatisticCard() {
+  const { connection } = useNetwork();
+  const [isLoading, setIsLoading] = useState(false);
+  const [dashboardStats, setDashboardStats] = useState<DashboardStatsProps>();
+  const [smartContractStats, setSmartContractStats] =
+    useState<SmartContractStatsProps>();
+  const fetchStats = async () => {
+    setIsLoading(true);
+    const dashStats = await LatestDataApi.getDashboardStats(connection);
+    setDashboardStats(dashStats);
+    const scStats = await LatestDataApi.getSmartContractStats(connection);
+    setSmartContractStats(scStats);
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    fetchStats();
+  }, []);
 
-function GroupStatisticCard() {
-  const groupStatsCardContent = [
-    {
-      title: "24h total value locked",
-      body: "3232400000",
-      footer: "+2.34%",
-      testId: "24h-total-value-locked",
-    },
-    {
-      title: "24h transactions",
-      body: "32324000000",
-      footer: "-0.02%",
-      testId: "24h-total-transactions",
-    },
-  ];
   return (
-    <div className="flex flex-col space-y-2 lg:space-y-0 md:space-y-0 lg:space-x-2 md:space-x-2 lg:flex-row md:flex-row">
-      {groupStatsCardContent.map((card) => (
+    <div className="mt-11 md:mt-8 lg:mt-[72px]">
+      <div
+        className={clsx(
+          "grid grid-cols-1 gap-4",
+          "grid md:grid-cols-2 gap-6",
+          "grid lg:grid-cols-4 gap-6"
+        )}
+      >
         <StatisticCard
-          key={card.title}
-          title={card.title}
-          body={card.body}
-          footer={card.footer}
-          testId={card.testId}
-        />
-      ))}
+          title="Blocks"
+          value={new BigNumber(dashboardStats?.total_blocks ?? 0)}
+          testId="blocks"
+          isLoading={isLoading}
+        >
+          <span>
+            {`Avg. speed: ${new BigNumber(
+              dashboardStats?.average_block_time ?? 0
+            )
+              .dividedBy(1000)
+              .toFixed(1)} sec`}
+          </span>
+        </StatisticCard>
+
+        <StatisticCard
+          title="Transactions"
+          value={new BigNumber(dashboardStats?.total_transactions ?? 0)}
+          testId="transactions"
+          isLoading={isLoading}
+        >
+          <NumericFormat
+            value={new BigNumber(dashboardStats?.transactions_today ?? 0)}
+            thousandSeparator
+            prefix={`Today: `}
+            suffix={` transactions`}
+            decimalScale={0}
+          />
+        </StatisticCard>
+
+        <StatisticCard
+          title="Contracts"
+          value={
+            new BigNumber(smartContractStats?.verified_smart_contracts ?? 0)
+          }
+          testId="contracts"
+          isLoading={isLoading}
+        >
+          <span className="flex flex-row items-center">
+            <NumericFormat
+              value={new BigNumber(
+                smartContractStats?.verified_smart_contracts ?? 0
+              )
+                .multipliedBy(smartContractStats?.smart_contracts ?? 0)
+                .dividedBy(100)
+                .toFixed(2)}
+              thousandSeparator
+              suffix="% verified"
+              decimalScale={2}
+            />
+            <MdCheckCircle className="h-5 w-5 ml-1 text-green-800" />
+          </span>
+        </StatisticCard>
+
+        <StatisticCard
+          title="Gas price"
+          value={new BigNumber(dashboardStats?.gas_prices.average ?? 0)}
+          testId="gas-price"
+          suffix={` ${GWEI_SYMBOL}`}
+          isLoading={isLoading}
+        >
+          <NumericFormat
+            value={new BigNumber(dashboardStats?.gas_prices.fast ?? 0)}
+            thousandSeparator
+            prefix={`High: `}
+            suffix={` ${GWEI_SYMBOL}`}
+            decimalScale={0}
+          />
+          <NumericFormat
+            value={new BigNumber(dashboardStats?.gas_prices.slow ?? 0)}
+            thousandSeparator
+            prefix={`Low: `}
+            suffix={` ${GWEI_SYMBOL}`}
+            decimalScale={0}
+            className="ml-2"
+          />
+        </StatisticCard>
+      </div>
     </div>
   );
 }
-
-export default GroupStatisticCard;
diff --git a/src/components/TokenStatsDisplay.tsx b/src/components/TokenStatsDisplay.tsx
index 6fc6daa1..6f40b888 100644
--- a/src/components/TokenStatsDisplay.tsx
+++ b/src/components/TokenStatsDisplay.tsx
@@ -1,9 +1,8 @@
-import clsx from "clsx";
-import TokenStatsApi from "@api/TokenStatsApi";
-import { useUnitSuffix } from "hooks/useUnitSuffix";
-import { DMX_TOKEN_SYMBOL } from "shared/constants";
-import TrendLineChart, { LineData } from "./TrendLineChart";
-import GradientCardContainer from "./commons/GradientCardContainer";
+import { useState, useEffect } from "react";
+import LatestDataApi from "@api/LatestDataApi";
+import { useNetwork } from "@contexts/NetworkContext";
+import { ChartDataI } from "@api/types";
+import TransactionsLineChart from "./TransactionsLineChart";
 
 export interface TokenStats {
   tokenPrice: number;
@@ -14,87 +13,32 @@ export interface TokenStats {
 }
 
 export default function TokenStatsDisplay(): JSX.Element {
-  const stats: TokenStats = TokenStatsApi.useTokenStats();
-  const priceHistory = TokenStatsApi.useTokenPriceHistory();
+  const { connection } = useNetwork();
+  const [chartData, setChartData] = useState<ChartDataI[]>([]);
 
-  const trendLineData: LineData[] = priceHistory.map((data) => ({
-    value: data.price,
-  }));
+  const fetchStats = async () => {
+    const data = await LatestDataApi.getTxnChartsData(connection);
+    setChartData(data.chart_data?.reverse());
+  };
 
-  return (
-    <div className="pb-2 pt-6 lg:pb-6">
-      <GradientCardContainer>
-        <section className="flex flex-col md:flex-row md:flex-wrap xl:flex-nowrap xl:items-center xl:justify-between p-5 pb-10 md:p-10 xl:py-7 rounded-[15px]">
-          <section className="flex flex-1 items-center md:items-start xl:flex-1 xl:order-first xl:items-center">
-            <TokenPriceSection data={stats} />
-          </section>
-          <section className="xl:order-last xl:ml-16">
-            <DetailsSection data={stats} />
-          </section>
-          <section className="mt-8 md:mt-12 xl:mt-0 h-[88px] md:basis-full xl:order-2 xl:basis-auto xl:w-[304px]">
-            <TrendLineChart data={trendLineData} />
-          </section>
-        </section>
-      </GradientCardContainer>
-    </div>
-  );
-}
+  useEffect(() => {
+    fetchStats();
+  }, []);
 
-function TokenPriceSection({ data }: { data: TokenStats }) {
   return (
-    <>
-      <div className="h-10 w-10 mb-1 md:mb-0 md:mt-1 xl:mt-0 md:h-[39px] md:w-[39px] xl:h-[46px] xl:w-[46px] rounded-full bg-gradient-to-r from-green-800 to-blue-800" />
-      <div className="flex flex-1 md:flex-col xl:flex-row justify-between md:justify-start xl:items-end ml-2 md:ml-3">
-        <div>
-          <div className="text-white-700 text-xs md:text-sm">
-            DefiMetaChain Token
-          </div>
-          <div className="text-white-50 font-bold text-2xl xl:text-[32px] xl:leading-10 pt-1 md:pt-0">
-            {DMX_TOKEN_SYMBOL}
-          </div>
-        </div>
-        <div className="flex-wrap md:flex md:items-baseline md:pt-2 xl:pt-0 xl:pl-3">
-          <div className="text-white-50 text-right text-lg md:text-2xl xl:text-[28px] leading-5 md:leading-10">
-            ${data.tokenPrice}
-          </div>
-          <div
-            className={clsx(
-              "text-right text-sm pt-2 md:pt-0 md:pl-2",
-              data.percentChange < 0 ? "text-red-800" : "text-green-800"
-            )}
-          >
-            {data.percentChange >= 0 ? "+" : ""}
-            {data.percentChange}%
-          </div>
+    <div className="mb-4 mt-8 md:mt-2 lg:mt-12">
+      <div>
+        <div className="space-x-2 mb-6">
+          <span className="text-2xl text-white-50 font-semibold">
+            {" "}
+            Transaction history
+          </span>
+          <span className="text-sm text-white-50">in 30 days</span>
         </div>
+        <section className="h-[200px]">
+          <TransactionsLineChart data={chartData} />
+        </section>
       </div>
-    </>
-  );
-}
-
-function DetailsSection({ data }: { data: TokenStats }) {
-  const circulation = useUnitSuffix(data.circulation);
-  const last24hVolume = useUnitSuffix(data.last24hVolume);
-  const marketCap = useUnitSuffix(data.marketCap);
-  return (
-    <div className="pt-10 md:pt-0">
-      <DetailRow
-        label="Circulation"
-        value={`${circulation} ${DMX_TOKEN_SYMBOL}`}
-      />
-      <DetailRow label="24h Volume" value={last24hVolume} />
-      <DetailRow label="Market Cap" value={`$${marketCap}`} />
-    </div>
-  );
-}
-
-function DetailRow({ label, value }: { label: string; value: string }) {
-  const labelStyle = "text-white-700 md:pr-2";
-  const valueStyle = "text-right text-white-50";
-  return (
-    <div className="flex justify-between md:justify-end pt-2 md:pt-3 xl:pt-2 first:pt-0">
-      <div className={labelStyle}>{label}</div>
-      <div className={valueStyle}>{value}</div>
     </div>
   );
 }
diff --git a/src/components/TransactionsLineChart.tsx b/src/components/TransactionsLineChart.tsx
new file mode 100644
index 00000000..1499c288
--- /dev/null
+++ b/src/components/TransactionsLineChart.tsx
@@ -0,0 +1,104 @@
+import { ChartDataI } from "@api/types";
+import {
+  LineChart,
+  Line,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+  Tooltip,
+  CartesianGrid,
+} from "recharts";
+import dayjs from "dayjs";
+import NumericFormat from "./commons/NumericFormat";
+
+function CustomizedTickX(props) {
+  const { x, y, payload } = props;
+  return (
+    <g transform={`translate(${x},${y})`}>
+      <text x={0} y={0} dy={8} fill="#666">
+        <tspan
+          textAnchor="middle"
+          className="text-dark-700 text-xs -tracking-[0.12px]"
+        >
+          {dayjs(payload.value).format("MMM D")}
+        </tspan>
+      </text>
+    </g>
+  );
+}
+
+function CustomizedTickY(props) {
+  const { x, y, payload } = props;
+  const formatter = Intl.NumberFormat("en", { notation: "compact" });
+  return (
+    <g transform={`translate(${x},${y})`}>
+      <text x={0} y={0} dy={4} dx={12} fill="#666">
+        <tspan
+          textAnchor="middle"
+          className="text-dark-700 text-xs -tracking-[0.12px]"
+        >
+          {formatter.format(payload.value)}
+        </tspan>
+      </text>
+    </g>
+  );
+}
+
+function CustomTooltip({ active, payload, label }) {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-white-50 p-3 rounded-[10px]">
+        <div className="text-xs text-light-700 -tracking-[0.12px]">
+          {dayjs(label).format("MMM D, YYYY")}
+        </div>
+        {payload.map((pld) => (
+          <div className="text-base text-light-1000 -tracking-[0.32px]">
+            <span>Transactions:</span>
+            <NumericFormat
+              value={pld.value}
+              thousandSeparator
+              decimalScale={0}
+              className="text-light-1000 font-semibold -tracking-[0.32px] ml-1"
+            />
+          </div>
+        ))}
+      </div>
+    );
+  }
+  return null;
+}
+
+export default function TransactionsLineChart({
+  data,
+}: {
+  data: ChartDataI[];
+}) {
+  return (
+    <ResponsiveContainer>
+      <LineChart data={data}>
+        <XAxis
+          dataKey="date"
+          tickMargin={8}
+          axisLine={false}
+          tick={<CustomizedTickX />}
+        />
+        <YAxis
+          orientation="right"
+          tickMargin={12}
+          axisLine={false}
+          tickCount={4}
+          tick={<CustomizedTickY />}
+        />
+        <Tooltip content={CustomTooltip} cursor={{ strokeDasharray: 8 }} />
+        <CartesianGrid stroke="#8C8C8C" strokeWidth={0.5} vertical={false} />
+        <Line
+          type="monotone"
+          dataKey="tx_count"
+          stroke="#0964F4"
+          strokeWidth={2}
+          dot={false}
+        />
+      </LineChart>
+    </ResponsiveContainer>
+  );
+}
diff --git a/src/components/commons/StatisticCard.tsx b/src/components/commons/StatisticCard.tsx
index 18ff82c7..75a1817a 100644
--- a/src/components/commons/StatisticCard.tsx
+++ b/src/components/commons/StatisticCard.tsx
@@ -1,38 +1,57 @@
-import React from "react";
-import clsx from "clsx";
-import { useUnitSuffix } from "hooks/useUnitSuffix";
+import React, { PropsWithChildren } from "react";
+import BigNumber from "bignumber.js";
 import GradientCardContainer from "./GradientCardContainer";
+import NumericFormat from "./NumericFormat";
 
 interface StatsCardProps {
   title: string;
-  body: string;
-  footer: string;
+  value: BigNumber;
   testId: string;
+  isLoading: boolean;
+  suffix?: string;
 }
 
-function StatisticCard({ title, body, footer, testId }: StatsCardProps) {
-  const valueToUnitSuffix = useUnitSuffix(body);
-
+export default function StatisticCard({
+  title,
+  value,
+  children,
+  suffix,
+  testId,
+  isLoading,
+}: PropsWithChildren<StatsCardProps>) {
   return (
-    <GradientCardContainer data-testid={testId}>
-      <div className="rounded-[15px] flex flex-col justify-center px-5 lg:px-10 md:px-10 py-8">
-        <div className="text-white-700 font-medium text-xs tracking-wider uppercase ">
+    <GradientCardContainer data-testid={testId} fullBorder>
+      <div className="rounded-[15px] flex flex-col justify-center p-5 md:p-6">
+        <div className="text-white-700 font-medium text-base -tracking-[0.32px]">
           {title}
         </div>
-        <div className="text-white-50 text-2xl font-light tracking-wider py-2">
-          {valueToUnitSuffix}
+        <div className="py-1">
+          {isLoading ? (
+            <div className="py-1">
+              <div className="bg-dark-200 rounded-[5px] mr-1 w-2/4 h-[24px]" />
+            </div>
+          ) : (
+            <NumericFormat
+              value={value}
+              thousandSeparator
+              decimalScale={0}
+              suffix={suffix}
+              className="text-white-50 text-2xl font-semibold"
+            />
+          )}
         </div>
-        <div
-          className={clsx(
-            "text-transparent bg-clip-text font-medium text-xs tracking-wider uppercase max-w-[60px]",
-            footer.includes("-") ? "brand-gradient-1" : "brand-gradient-2"
+        <div>
+          {isLoading ? (
+            <div className="py-0.5">
+              <div className="bg-dark-200 rounded-[5px] mr-1 w-4/6 h-[16px]" />
+            </div>
+          ) : (
+            <div className="text-white-50 -tracking-[0.14px] text-sm">
+              {children}
+            </div>
           )}
-        >
-          {footer}
         </div>
       </div>
     </GradientCardContainer>
   );
 }
-
-export default StatisticCard;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2971bba1..b6410e6a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,11 +1,11 @@
-// import GroupStatisticCard from "@components/GroupStatisticCard";
-// import TokenStatsDisplay from "@components/TokenStatsDisplay";
 import HomeTitle from "@components/HomeTitle";
 import { SearchBar } from "layouts/components/searchbar/SearchBar";
 import { GetServerSidePropsResult, InferGetServerSidePropsType } from "next";
 import { RowData } from "@components/types";
 import LatestDataTable from "@components/LatestDataTable";
 import LatestDataApi from "@api/LatestDataApi";
+import GroupStatisticCard from "@components/GroupStatisticCard";
+import TokenStatsDisplay from "@components/TokenStatsDisplay";
 
 export default function Home({
   latestTransactions,
@@ -17,9 +17,8 @@ export default function Home({
       <HomeTitle />
       <div className="px-1 md:px-0">
         <SearchBar containerClass="2.5xl:px-[196px] mb-0" />
-        {/* <TokenStatsDisplay /> */}
-        {/* <GroupStatisticCard /> */}
-        {/* TODO: Add blocks and txs summary card */}
+        <TokenStatsDisplay />
+        <GroupStatisticCard />
         <LatestDataTable
           type="transactions"
           title="Latest transactions"