diff --git a/components/leaderboards/lands-chart.tsx b/components/leaderboards/lands-chart.tsx
index a0d0a5b0..92997784 100644
--- a/components/leaderboards/lands-chart.tsx
+++ b/components/leaderboards/lands-chart.tsx
@@ -1,91 +1,136 @@
-import { TrendingUp } from "lucide-react"
-import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts"
+import { TrendingUp } from "lucide-react";
 import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardFooter,
-    CardHeader,
-    CardTitle,
-} from "@components/ui/card"
+  Bar,
+  BarChart,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+  ResponsiveContainer,
+  Tooltip,
+  Cell,
+} from "recharts";
 import {
-    ChartConfig,
-    ChartContainer,
-    ChartTooltip,
-    ChartTooltipContent,
-} from "@components/ui/chart"
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@components/ui/chart";
+import { useState, useEffect } from "react";
 
 export function LandsChart({ chartData, chartConfig }: { chartData: any[], chartConfig: ChartConfig }) {
-    return (
-        <Card>
-            <CardHeader>
-                <CardTitle>Total Tokens Staked</CardTitle>
-                <CardDescription>By Percentage of Total Supply</CardDescription>
-            </CardHeader>
-            <CardContent>
-                <ChartContainer config={chartConfig}>
-                    <BarChart
-                        style={{ fill: 'white' }}
-                        accessibilityLayer
-                        data={chartData}
-                        layout="vertical"
-                        margin={{
-                            right: 16,
-                        }}
+  
+  const [isMobile, setIsMobile] = useState<boolean>(false);
+
+  useEffect(() => {
+    function handleResize() {
+      setIsMobile(window.innerWidth < 768);
+    }
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
 
-                    >
+  // generates unique colors for each token
+  const COLORS = chartData.map((_, index) =>
+    `hsl(${(index * 137.508) % 360}, 65%, 55%)`
+  );
 
-                        <CartesianGrid horizontal={false} />
-                        <YAxis
-                            dataKey="id"
-                            type="category"
-                            tickLine={false}
-                            tickMargin={10}
-                            axisLine={false}
-                            hide
+  // adjust YAxis width based on longest label
+  const yAxisWidth = Math.min(
+    Math.max(...chartData.map((item) => item.id.length * (isMobile ? 7 : 10))),
+    isMobile ? 100 : 150
+  );
 
-                        />
-                        <XAxis dataKey="score" type="number" hide />
-                        <ChartTooltip
-                            cursor={false}
-                            content={
-                                <ChartTooltipContent indicator="line" />
-                            }
+  // set maximum height for the chart container
+  const maxChartHeight = 400; 
 
-                        />
-                        <Bar
-                            dataKey="score"
-                            layout="vertical"
-                            fill="var(--color-tokens)"
-                            radius={4}
-                        >
-                            <LabelList
-                                dataKey="id"
-                                position="insideLeft"
-                                offset={8}
-                                className="fill-[--color-label]"
-                                fontSize={12}
-                            />
-                            <LabelList
-                                dataKey="score"
-                                position="right"
-                                offset={8}
-                                className="fill-foreground"
-                                fontSize={12}
-                                formatter={(value: number) => `${(value * 100).toFixed(2)}%`}
-                            />
-                        </Bar>
-                    </BarChart>
-                </ChartContainer>
-            </CardContent>
-            {/* <CardFooter className="flex-col items-start gap-2 text-sm">
-                <div className="flex gap-2 font-medium leading-none">
-                    Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
-                </div>
-                <div className="leading-none text-muted-foreground">
-                    Showing total tokens for the last 6 months
-                </div>
-            </CardFooter> */}
-        </Card>
-    )
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Total Tokens Staked</CardTitle>
+        <CardDescription>By Percentage of Total Supply</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div
+          style={{
+            width: "100%",
+            maxHeight: `${maxChartHeight}px`,
+            overflowY: "auto",
+          }}
+        >
+          <ResponsiveContainer
+            width="100%"
+            height={
+              chartData.length * (isMobile ? 40 : 30) > maxChartHeight
+                ? chartData.length * (isMobile ? 40 : 30)
+                : maxChartHeight
+            }
+          >
+            <BarChart
+              data={chartData}
+              layout="vertical"
+              margin={{
+                top: 20,
+                bottom: 20,
+                left: yAxisWidth + 10,
+                right: 20,
+              }}
+            >
+              {/* I got rid of vertical grid lines */}
+              <CartesianGrid horizontal={false} vertical={false} />
+              <XAxis type="number" hide />
+              <YAxis
+                dataKey="id"
+                type="category"
+                tickLine={false}
+                axisLine={false}
+                width={yAxisWidth}
+                tick={{
+                  fontSize: isMobile ? 10 : 12,
+                  fill: "var(--foreground)",
+                }}
+              />
+              <Tooltip
+                cursor={{ fill: "transparent" }} // I removed the hover background here
+                formatter={(value: number) => `${(value * 100).toFixed(2)}%`}
+                contentStyle={{
+                  backgroundColor: "#170202", // tooltip background color
+                  borderColor: "#710707",
+                  borderRadius: "5px",
+                  padding: "5px 19px",
+                }}
+                itemStyle={{ color: "#fff" }} // tooltip text color
+              />
+              <Bar dataKey="score" radius={4} minPointSize={5}>
+                {chartData.map((entry, index) => (
+                  <Cell
+                    key={`cell-${index}`}
+                    fill={COLORS[index % COLORS.length]}
+                    // I removed hover effect by keeping fill opacity constant
+                    style={{ cursor: "pointer" }}
+                  />
+                ))}
+              </Bar>
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      </CardContent>
+      {/* <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="flex gap-2 font-medium leading-none">
+          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Showing total tokens for the last 6 months
+        </div>
+      </CardFooter> */}
+    </Card>
+  );
 }
diff --git a/components/leaderboards/tokens-difficulty-chart.tsx b/components/leaderboards/tokens-difficulty-chart.tsx
index 12d9035f..f68c9b1f 100644
--- a/components/leaderboards/tokens-difficulty-chart.tsx
+++ b/components/leaderboards/tokens-difficulty-chart.tsx
@@ -1,91 +1,110 @@
-import { TrendingUp } from "lucide-react"
-import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts"
+import React, { useState } from 'react';
 import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardFooter,
-    CardHeader,
-    CardTitle,
-} from "@components/ui/card"
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@components/ui/card';
+import numeral from 'numeral';
+import { ChartConfig } from '@components/ui/chart';
 import {
-    ChartConfig,
-    ChartContainer,
-    ChartTooltip,
-    ChartTooltipContent,
-} from "@components/ui/chart"
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@components/ui/table";
 
-export function TokensDifficultyChart({ chartData, chartConfig }: { chartData: any[], chartConfig: ChartConfig }) {
-    return (
-        <Card>
-            <CardHeader>
-                <CardTitle>Energy Output of Staked Tokens</CardTitle>
-                <CardDescription>Normalized with Difficulty Adjustment</CardDescription>
-            </CardHeader>
-            <CardContent>
-                <ChartContainer config={chartConfig}>
-                    <BarChart
-                        style={{ fill: 'white' }}
-                        accessibilityLayer
-                        data={chartData}
-                        layout="vertical"
-                        margin={{
-                            right: 16,
-                        }}
+interface ChartDataItem {
+  id: string;
+  score: number;
+}
 
-                    >
+export function TokensDifficultyChart({ chartData, chartConfig }: { chartData: any[], chartConfig: ChartConfig }) {
+  // State for sorting between ascending and descending
+  const [sortConfig, setSortConfig] = useState<{
+    key: keyof ChartDataItem;
+    direction: 'ascending' | 'descending';
+  }>({ key: 'score', direction: 'descending' });
 
-                        <CartesianGrid horizontal={false} />
-                        <YAxis
-                            dataKey="id"
-                            type="category"
-                            tickLine={false}
-                            tickMargin={10}
-                            axisLine={false}
-                            hide
+  // the function to handle the sorting
+  const sortedData = React.useMemo(() => {
+    const sortableItems = [...chartData];
+    sortableItems.sort((a, b) => {
+      if (a[sortConfig.key] < b[sortConfig.key]) {
+        return sortConfig.direction === 'ascending' ? -1 : 1;
+      }
+      if (a[sortConfig.key] > b[sortConfig.key]) {
+        return sortConfig.direction === 'ascending' ? 1 : -1;
+      }
+      return 0;
+    });
+    return sortableItems;
+  }, [chartData, sortConfig]);
 
-                        />
-                        <XAxis dataKey="score" type="number" hide />
-                        <ChartTooltip
-                            cursor={false}
-                            content={
-                                <ChartTooltipContent indicator="line" />
-                            }
+  const requestSort = (key: keyof ChartDataItem) => {
+    let direction: 'ascending' | 'descending' = 'ascending';
+    if (
+      sortConfig.key === key &&
+      sortConfig.direction === 'ascending'
+    ) {
+      direction = 'descending';
+    }
+    setSortConfig({ key, direction });
+  };
 
-                        />
-                        <Bar
-                            dataKey="score"
-                            layout="vertical"
-                            fill="var(--color-tokens)"
-                            radius={4}
-                        >
-                            <LabelList
-                                dataKey="id"
-                                position="insideLeft"
-                                offset={8}
-                                className="fill-[--color-label]"
-                                fontSize={12}
-                            />
-                            <LabelList
-                                dataKey="score"
-                                position="right"
-                                offset={8}
-                                className="fill-foreground"
-                                fontSize={12}
-                                formatter={(value: number) => `${value.toFixed(0)}`}
-                            />
-                        </Bar>
-                    </BarChart>
-                </ChartContainer>
-            </CardContent>
-            {/* <CardFooter className="flex-col items-start gap-2 text-sm">
-                <div className="flex gap-2 font-medium leading-none">
-                    Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
-                </div>
-                <div className="leading-none text-muted-foreground">
-                    Showing total tokens for the last 6 months
-                </div>
-            </CardFooter> */}
-        </Card>
-    )
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Energy Output of Staked Tokens</CardTitle>
+        <CardDescription>
+          Normalized with Difficulty Adjustment
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="overflow-x-auto">
+          <Table className="min-w-full divide-y divide-gray-200">
+            <TableHeader>
+              <TableRow>
+                <TableHead
+                  onClick={() => requestSort('id')}
+                  className="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider cursor-pointer"
+                >
+                  Token{' '}
+                  {sortConfig.key === 'id' &&
+                    (sortConfig.direction === 'ascending'
+                      ? '▲'
+                      : '▼')}
+                </TableHead>
+                <TableHead
+                  onClick={() => requestSort('score')}
+                  className="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider cursor-pointer"
+                >
+                  Energy Output{' '}
+                  {sortConfig.key === 'score' &&
+                    (sortConfig.direction === 'ascending'
+                      ? '▲'
+                      : '▼')}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {sortedData.map((item) => (
+                <TableRow key={item.id}>
+                  <TableCell className="px-6 whitespace-nowrap text-sm">
+                    {item.id}
+                  </TableCell>
+                  <TableCell className="px-6 whitespace-nowrap text-sm">
+                    {numeral(item.score).format('0,0')}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </CardContent>
+    </Card>
+  );
 }
diff --git a/next-env.d.ts b/next-env.d.ts
index 4f11a03d..a4a7b3f5 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/pages/governance/index.tsx b/pages/governance/index.tsx
index e53e6011..6db15681 100644
--- a/pages/governance/index.tsx
+++ b/pages/governance/index.tsx
@@ -44,7 +44,7 @@ const Card: React.FC<CardProps> = ({ href, src, alt, title, subtitle }) => (
       'overflow-hidden'
     )}
   >
-    <div className="overflow-hidden rounded-md relative group">
+    <div className="relative overflow-hidden rounded-md group">
       <Image
         src={src}
         alt={alt}
@@ -55,7 +55,7 @@ const Card: React.FC<CardProps> = ({ href, src, alt, title, subtitle }) => (
         )}
       />
     </div>
-    <div className="absolute left-0 right-0 bottom-0 p-2 h-min hidden group-hover/card:block group-hover/card:backdrop-blur-3xl">
+    <div className="absolute bottom-0 left-0 right-0 hidden p-2 h-min group-hover/card:block group-hover/card:backdrop-blur-3xl">
       <h1 className="font-semibold leading-none md:leading-6">{title}</h1>
       <h2 className="text-sm leading-none md:leading-6">{subtitle}</h2>
     </div>
@@ -207,7 +207,7 @@ export default function Governance({ data }: Props) {
         <Layout>
           <div className="m-2 py-10 sm:max-w-[1400px] sm:px-4">
             <Tabs defaultValue="proposals" className="">
-              <div className="flex justify-between items-baseline mb-4 flex-wrap gap-2">
+              <div className="flex flex-wrap items-baseline justify-between gap-2 mb-4">
                 <TabsList className="flex flex-wrap gap-2 mb-4">
                   <TabsTrigger value="proposals" className="flex-grow sm:flex-grow-0">
                     Proposals
@@ -217,7 +217,7 @@ export default function Governance({ data }: Props) {
                   </TabsTrigger>
                 </TabsList>
                 <Link href="/governance/guide" className="ml-auto">
-                  <Button variant={'link'} className="block ml-auto mt-2 sm:mt-0 sm:inline-block">
+                  <Button variant={'link'} className="block mt-2 ml-auto sm:mt-0 sm:inline-block">
                     Contributer Guide 📕
                   </Button>
                 </Link>
@@ -226,7 +226,7 @@ export default function Governance({ data }: Props) {
                 <DataTable columns={columns} data={data} />
               </TabsContent>
               <TabsContent value="extentions">
-                <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
                   {cards.map((card, index) => (
                     <Card key={index} {...card} />
                   ))}
@@ -242,6 +242,8 @@ export default function Governance({ data }: Props) {
 
 export const getServerSideProps: GetServerSideProps<Props> = async () => {
   try {
+    // TODO: utilize the new proposal data provided by chainhooks to get initial list of proposals
+    // we will still need to enrich this data with proposal metadata, tbd
     const [proposals, transactions] = await Promise.all([
       getProposals(),
       fetchAllContractTransactions(