diff --git a/packages/nextjs/components/onchain-impact-dashboard/LeaderboardTable/SkeletonTable.tsx b/packages/nextjs/components/onchain-impact-dashboard/LeaderboardTable/SkeletonTable.tsx
index 0218f07d..36329abe 100644
--- a/packages/nextjs/components/onchain-impact-dashboard/LeaderboardTable/SkeletonTable.tsx
+++ b/packages/nextjs/components/onchain-impact-dashboard/LeaderboardTable/SkeletonTable.tsx
@@ -1,32 +1,34 @@
 const SkeletonTable = () =>
-  [...Array(5)].map(i => (
-    <tr key={i} className="animate-pulse">
-      <td>
-        <div className="flex items-center">
-          <div className="animate-pulse flex space-x-4">
-            <div className="rounded-md bg-slate-300 h-6 w-6"></div>
-            <div className="flex items-center space-y-6">
-              <div className="h-2 w-28 bg-slate-300 rounded"></div>
+  [...Array(5).keys()]
+    .map(i => i + 1)
+    .map(i => (
+      <tr key={i} className="animate-pulse">
+        <td>
+          <div className="flex items-center">
+            <div className="animate-pulse flex space-x-4">
+              <div className="rounded-md bg-slate-300 h-6 w-6"></div>
+              <div className="flex items-center space-y-6">
+                <div className="h-2 w-28 bg-slate-300 rounded"></div>
+              </div>
             </div>
           </div>
-        </div>
-      </td>
-      <td>
-        <div className="h-2 w-14 bg-slate-300 rounded"></div>
-      </td>
-      <td>
-        <div className="h-2 w-7 bg-slate-300 rounded"></div>
-      </td>
-      <td>
-        <div className="h-2 w-7 bg-slate-300 rounded"></div>
-      </td>
-      <td>
-        <div className="h-2 w-7 bg-slate-300 rounded"></div>
-      </td>
-      <td>
-        <div className="h-2 w-7 bg-slate-300 rounded"></div>
-      </td>
-    </tr>
-  ));
+        </td>
+        <td>
+          <div className="h-2 w-14 bg-slate-300 rounded"></div>
+        </td>
+        <td>
+          <div className="h-2 w-7 bg-slate-300 rounded"></div>
+        </td>
+        <td>
+          <div className="h-2 w-7 bg-slate-300 rounded"></div>
+        </td>
+        <td>
+          <div className="h-2 w-7 bg-slate-300 rounded"></div>
+        </td>
+        <td>
+          <div className="h-2 w-7 bg-slate-300 rounded"></div>
+        </td>
+      </tr>
+    ));
 
 export default SkeletonTable;
diff --git a/packages/nextjs/components/onchain-impact-dashboard/LeaderboardTable/index.tsx b/packages/nextjs/components/onchain-impact-dashboard/LeaderboardTable/index.tsx
index 910fa7b7..5bd75874 100644
--- a/packages/nextjs/components/onchain-impact-dashboard/LeaderboardTable/index.tsx
+++ b/packages/nextjs/components/onchain-impact-dashboard/LeaderboardTable/index.tsx
@@ -112,7 +112,7 @@ const LeaderboardTable = ({ projects, loading, selectedMetricName = "impact_inde
                   <tr key={item.projectId}>
                     <td>
                       <Link href={`/project/${item.projectId}`}>
-                        <div className="flex items-center font-semibold truncate">
+                        <div className="flex items-center font-semibold truncate text-accent">
                           <Image
                             width={24}
                             height={24}
diff --git a/packages/nextjs/components/onchain-impact-dashboard/projectTotalsGraph/projectTotalsGraph.tsx b/packages/nextjs/components/onchain-impact-dashboard/projectTotalsGraph/projectTotalsGraph.tsx
index a7ebf892..44f99633 100644
--- a/packages/nextjs/components/onchain-impact-dashboard/projectTotalsGraph/projectTotalsGraph.tsx
+++ b/packages/nextjs/components/onchain-impact-dashboard/projectTotalsGraph/projectTotalsGraph.tsx
@@ -1,12 +1,13 @@
 "use client";
 
-import React from "react";
+import React, { useRef } from "react";
 import { FilterButton } from "../filterButton/filterButton";
 import { Skeleton } from "../skeleton/skeleton";
-import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import * as Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
 import { DatePicker } from "~~/components/impact-vector/inputs/datePicker";
 import { IMetric } from "~~/services/mongodb/models/metric";
-import { formatDate, stringToColor } from "~~/utils/onchainImpactDashboard/common";
+import { stringToColor } from "~~/utils/onchainImpactDashboard/common";
 
 interface IProps {
   totalsRecord: any[];
@@ -32,41 +33,48 @@ export const ProjectTotalsGraph = ({
   totalsRecord,
   filter,
 }: IProps) => {
-  const formatNumber = (num: number, dec?: number) => {
-    const m = 1000000;
-    const k = 1000;
-    const text = num >= m ? "M" : num >= k ? "K" : "";
-    if (dec != undefined) {
-      const divisor = num >= m ? m : num >= k ? k : 1;
-      const value = new Intl.NumberFormat().format(parseFloat((num / divisor).toFixed(dec)));
-      return `${value}${text}`;
-    }
-    return new Intl.NumberFormat().format(num);
-  };
-  const CustomTooltip = ({ active, payload, label }: any) => {
-    if (active && payload && payload.length) {
-      return (
-        <div className="bg-base-300 p-4 rounded-lg shadow">
-          <p className="m-0 p-0 label font-bold">{formatDate(label)}</p>
-          {payload.map((entry: any, index: any) => (
-            <div key={`item-${index}`}>
-              <p style={{ color: entry.color }} className="m-0 p-0 label">
-                {formatNumber(entry.value)}
-              </p>
-            </div>
-          ))}
-        </div>
-      );
-    }
-    return null;
+  const options = {
+    chart: {
+      type: "line",
+      height: 360,
+    },
+    title: {
+      text: "",
+    },
+    subtitle: {
+      text: "",
+    },
+    credits: {
+      enabled: false,
+    },
+    xAxis: {
+      type: "datetime",
+      title: {
+        text: "",
+      },
+      dateTimeLabelFormats: {
+        day: "%e %b",
+      },
+    },
+    legend: {
+      enabled: false,
+    },
   };
+
+  const chartComponentRef = useRef<HighchartsReact.RefObject>(null);
   const metricToWork = metrics[selectedMetric];
   const values = totalsRecord.map(d => d[metricToWork?.name]);
+  const newValues = totalsRecord.map(d => {
+    const date = new Date(d["date"]);
+    return [Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()), d[metricToWork?.name]];
+  });
+
   let minValue = Math.min(...values);
   const maxValue = Math.max(...values);
   const isEmpty = maxValue == 0 && minValue == 0;
-  const buffer = minValue * 0.04 + 5;
+  const buffer = minValue * 0.03 + 5;
   minValue = minValue - buffer > 0 ? minValue : minValue + buffer;
+
   return (
     <>
       <div className="flex flex-col lg:w-[40%]">
@@ -143,37 +151,51 @@ export const ProjectTotalsGraph = ({
                 </div>
               )}
             </div>
-
-            <ResponsiveContainer width="100%" className={"absolute top-14"}>
+            <div>
               {isEmpty ? (
                 <div className="flex justify-center items-center w-full h-[300px] text-neutral-content">
                   No data found
                 </div>
               ) : (
-                <AreaChart data={totalsRecord} margin={{ top: 20, right: -16, bottom: 45, left: 2 }}>
-                  <Area
-                    key={metricToWork.name}
-                    type="monotone"
-                    dataKey={metricToWork.name}
-                    stroke={stringToColor(metricToWork.label ?? "")}
-                    fill={stringToColor(metricToWork.label ?? "")}
-                  />
-                  <CartesianGrid strokeDasharray="3 3" />
-                  <XAxis tick={false} fontSize={10} hide={false} dataKey="date" />
-                  <YAxis
-                    fontSize={10}
-                    type={"number"}
-                    domain={[minValue - buffer, maxValue + buffer]}
-                    hide={false}
-                    allowDataOverflow={true}
-                    orientation="right"
-                    tickFormatter={v => formatNumber(v, 0)}
-                    ticks={[minValue - buffer, maxValue + buffer]}
-                  />
-                  <Tooltip content={<CustomTooltip />} />
-                </AreaChart>
+                <HighchartsReact
+                  highcharts={Highcharts}
+                  options={{
+                    ...options,
+                    yAxis: {
+                      title: {
+                        text: null,
+                      },
+                      min: minValue - buffer,
+                      max: maxValue + buffer,
+                    },
+                    tooltip: {
+                      xDateFormat: "%b %e, %Y",
+                      pointFormatter: function (this: Highcharts.TooltipFormatterContextObject) {
+                        const formattedNumber = Highcharts.numberFormat(this.y as number, 0, "", ",");
+                        return (
+                          '<span style="color:' +
+                          this.color +
+                          '">\u25CF</span> ' +
+                          this.series.name +
+                          ": <b>" +
+                          formattedNumber +
+                          "</b><br/>"
+                        );
+                      },
+                    },
+
+                    series: [
+                      {
+                        name: metricToWork.label,
+                        data: newValues,
+                        color: stringToColor(metricToWork.label || ""),
+                      },
+                    ],
+                  }}
+                  ref={chartComponentRef}
+                />
               )}
-            </ResponsiveContainer>
+            </div>
           </div>
         ) : (
           <div className="mb-4">
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
index 0188f7d8..381b66e9 100644
--- a/packages/nextjs/package.json
+++ b/packages/nextjs/package.json
@@ -26,6 +26,8 @@
     "d3-scale": "^4.0.2",
     "daisyui": "^4.4.19",
     "fs": "^0.0.1-security",
+    "highcharts": "^11.4.6",
+    "highcharts-react-official": "^3.2.1",
     "lodash": "^4.17.21",
     "mongodb": "^6.8.0",
     "next": "^14.0.4",
diff --git a/yarn.lock b/yarn.lock
index 77a4115b..36ae5348 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1253,6 +1253,8 @@ __metadata:
     eslint-config-prettier: ^8.5.0
     eslint-plugin-prettier: ^4.2.1
     fs: ^0.0.1-security
+    highcharts: ^11.4.6
+    highcharts-react-official: ^3.2.1
     lodash: ^4.17.21
     mongodb: ^6.8.0
     mongoose: ^8.4.5
@@ -5950,6 +5952,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"highcharts-react-official@npm:^3.2.1":
+  version: 3.2.1
+  resolution: "highcharts-react-official@npm:3.2.1"
+  peerDependencies:
+    highcharts: ">=6.0.0"
+    react: ">=16.8.0"
+  checksum: 615f1a352eb95f0e78189506e7d551071438fc11eabff78c55aeb6cc63658f4c284f4920f9e9c85113b319661bf5745c668ef22b71920c1a9f24749e49584aaf
+  languageName: node
+  linkType: hard
+
+"highcharts@npm:^11.4.6":
+  version: 11.4.6
+  resolution: "highcharts@npm:11.4.6"
+  checksum: 7aa3871d19892c20a95b36754cc8c0234af0dd310e1fbe9a87cf489c315d55ac99497d1dba87f0bea8356b9e5886231bbb25f6de0b1dba92b31456aeee481cab
+  languageName: node
+  linkType: hard
+
 "hmac-drbg@npm:^1.0.1":
   version: 1.0.1
   resolution: "hmac-drbg@npm:1.0.1"