From 9a6385c378cff26466f319d108189f7447419875 Mon Sep 17 00:00:00 2001
From: ddusichka <78527291+ddusichka@users.noreply.github.com>
Date: Thu, 10 Apr 2025 08:37:58 -0400
Subject: [PATCH 1/5] co2e

---
 .../contacts/ContactDetailsColumns.tsx        | 30 +++++++++--------
 .../contacts/ContactDetailsContent.tsx        |  4 +--
 .../components/scope-breakdown/piechart.tsx   |  2 +-
 .../scope-breakdown/scope-breakdown.tsx       |  3 +-
 .../components/scope-breakdown/tooltip.tsx    | 32 +++++++++----------
 .../src/components/transactions/ItemForm.tsx  |  3 +-
 .../src/components/transactions/columns.tsx   | 24 ++++++++++----
 7 files changed, 57 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/contacts/ContactDetailsColumns.tsx b/frontend/src/components/contacts/ContactDetailsColumns.tsx
index 74cd00d4..e694a162 100644
--- a/frontend/src/components/contacts/ContactDetailsColumns.tsx
+++ b/frontend/src/components/contacts/ContactDetailsColumns.tsx
@@ -1,7 +1,7 @@
-import { ColumnDef } from "@tanstack/react-table"
-import { Button } from "@/components/ui/button"
-import { ArrowUpDown } from "lucide-react"
-import { LineItem } from "@/types"
+import { ColumnDef } from "@tanstack/react-table";
+import { Button } from "@/components/ui/button";
+import { ArrowUpDown } from "lucide-react";
+import { LineItem } from "@/types";
 
 const dateColumn: ColumnDef<LineItem> = {
   accessorKey: "date",
@@ -17,7 +17,7 @@ const dateColumn: ColumnDef<LineItem> = {
     </Button>
   ),
   cell: ({ getValue }) => new Date(getValue() as string).toLocaleDateString(),
-}
+};
 
 const descriptionColumn: ColumnDef<LineItem> = {
   accessorKey: "description",
@@ -32,7 +32,7 @@ const descriptionColumn: ColumnDef<LineItem> = {
       <ArrowUpDown className="ml-1 h-4 w-4" />
     </Button>
   ),
-}
+};
 
 const emissionFactorColumn: ColumnDef<LineItem> = {
   accessorKey: "emission_factor_name",
@@ -47,7 +47,7 @@ const emissionFactorColumn: ColumnDef<LineItem> = {
       <ArrowUpDown className="ml-1 h-4 w-4" />
     </Button>
   ),
-}
+};
 
 const scopeColumn: ColumnDef<LineItem> = {
   accessorKey: "scope",
@@ -62,7 +62,7 @@ const scopeColumn: ColumnDef<LineItem> = {
       <ArrowUpDown className="ml-1 h-4 w-4" />
     </Button>
   ),
-}
+};
 
 const co2Column: ColumnDef<LineItem> = {
   accessorKey: "co2",
@@ -73,7 +73,9 @@ const co2Column: ColumnDef<LineItem> = {
       className=""
       onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
     >
-      CO2
+      <p>
+        CO<sub>2</sub>e
+      </p>
       <ArrowUpDown className="ml-1 h-4 w-4" />
     </Button>
   ),
@@ -81,7 +83,7 @@ const co2Column: ColumnDef<LineItem> = {
     const value = getValue();
     return value !== undefined && value !== null ? `${value} Kg` : "";
   },
-}
+};
 
 const totalAmountColumn: ColumnDef<LineItem> = {
   accessorKey: "total_amount",
@@ -97,7 +99,7 @@ const totalAmountColumn: ColumnDef<LineItem> = {
     </Button>
   ),
   cell: ({ getValue }) => `${(getValue() as number).toFixed(2)}`,
-}
+};
 
 // Reconciled transaction columns (scope 1-3)
 export const reconciledColumns: ColumnDef<LineItem>[] = [
@@ -107,7 +109,7 @@ export const reconciledColumns: ColumnDef<LineItem>[] = [
   scopeColumn,
   co2Column,
   totalAmountColumn,
-]
+];
 
 // Offset columns (scope 0)
 export const offsetColumns: ColumnDef<LineItem>[] = [
@@ -115,11 +117,11 @@ export const offsetColumns: ColumnDef<LineItem>[] = [
   descriptionColumn,
   co2Column,
   totalAmountColumn,
-]
+];
 
 // Unreconciled columns (no scope)
 export const unreconciledColumns: ColumnDef<LineItem>[] = [
   dateColumn,
   descriptionColumn,
   totalAmountColumn,
-]
\ No newline at end of file
+];
diff --git a/frontend/src/components/contacts/ContactDetailsContent.tsx b/frontend/src/components/contacts/ContactDetailsContent.tsx
index 948b7ae2..cec3fb47 100644
--- a/frontend/src/components/contacts/ContactDetailsContent.tsx
+++ b/frontend/src/components/contacts/ContactDetailsContent.tsx
@@ -393,13 +393,13 @@ export default function ContactDetailsContent() {
               <div className="p-4 flex justify-between items-center">
                 <h3 className="font-medium">Reconciled Emissions</h3>
                 <p className="font-bold">
-                  {summary.totalEmissions.toFixed(0)} Kg CO<sub>2</sub>
+                  {summary.totalEmissions.toFixed(0)} kg CO<sub>2</sub>e
                 </p>
               </div>
               <div className="p-4 flex justify-between items-center">
                 <h3 className="font-medium">Offset Emissions</h3>
                 <p className="font-bold">
-                  {summary.totalOffset.toFixed(0)} Kg CO<sub>2</sub>
+                  {summary.totalOffset.toFixed(0)} kg CO<sub>2</sub>e
                 </p>
               </div>
             </div>
diff --git a/frontend/src/components/scope-breakdown/piechart.tsx b/frontend/src/components/scope-breakdown/piechart.tsx
index 0d228e59..65661d90 100644
--- a/frontend/src/components/scope-breakdown/piechart.tsx
+++ b/frontend/src/components/scope-breakdown/piechart.tsx
@@ -39,7 +39,7 @@ const ScopeChart: React.FC<{
           <Cell key={`cell-${index}`} fill={`url(#${index + 1})`} />
         ))}
         <Label
-          value={`${formatNumber(totalEmissions)} kg CO2`}
+          value={`${formatNumber(totalEmissions)} kg CO2e`}
           position="center"
           fontSize={24}
           fill="#333"
diff --git a/frontend/src/components/scope-breakdown/scope-breakdown.tsx b/frontend/src/components/scope-breakdown/scope-breakdown.tsx
index fd4a8862..c9a92f16 100644
--- a/frontend/src/components/scope-breakdown/scope-breakdown.tsx
+++ b/frontend/src/components/scope-breakdown/scope-breakdown.tsx
@@ -98,7 +98,8 @@ const ScopeBreakdownChart = () => {
                   className={styles.legend.percentage}
                 >{`${item.percentage}%`}</p>
                 <div className={styles.legend.label}>
-                  {`${item.name} - ${formatNumber(item.value)} kg CO2e`}
+                  {`${item.name} - ${formatNumber(item.value)} kg CO`}
+                  <sub>2</sub>e
                 </div>
               </div>
             ))}
diff --git a/frontend/src/components/scope-breakdown/tooltip.tsx b/frontend/src/components/scope-breakdown/tooltip.tsx
index a16526cd..65e123a3 100644
--- a/frontend/src/components/scope-breakdown/tooltip.tsx
+++ b/frontend/src/components/scope-breakdown/tooltip.tsx
@@ -1,23 +1,23 @@
-"use client"
+"use client";
 import React from "react";
 import { Tooltip } from "recharts";
 
 function ToolTip() {
-    return (
-        <Tooltip
-            formatter={(value: number, name: string) => [
-                <div key="name">
-                    <div style={{ fontWeight: "normal", textAlign: "center" }}>
-                        {name}
-                    </div>
-                    <div style={{ fontWeight: "bold", textAlign: "center" }}>
-                        {`${value.toLocaleString()} kg CO2`}
-                    </div>
-                </div>
-            ]}
-            labelFormatter={(label: string) => label}
-        />
-    );
+  return (
+    <Tooltip
+      formatter={(value: number, name: string) => [
+        <div key="name">
+          <div style={{ fontWeight: "normal", textAlign: "center" }}>
+            {name}
+          </div>
+          <div style={{ fontWeight: "bold", textAlign: "center" }}>
+            {`${value.toLocaleString()} kg CO2e`}
+          </div>
+        </div>,
+      ]}
+      labelFormatter={(label: string) => label}
+    />
+  );
 }
 
 export default ToolTip;
diff --git a/frontend/src/components/transactions/ItemForm.tsx b/frontend/src/components/transactions/ItemForm.tsx
index 7d275ab2..1f332cd0 100644
--- a/frontend/src/components/transactions/ItemForm.tsx
+++ b/frontend/src/components/transactions/ItemForm.tsx
@@ -511,7 +511,8 @@ export default function TransactionForm() {
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>
-                      CO2e Amount (kg) <span className="text-red-500">*</span>
+                      CO<sub>2</sub>e Amount (kg){" "}
+                      <span className="text-red-500">*</span>
                     </FormLabel>
                     <FormControl>
                       <Input
diff --git a/frontend/src/components/transactions/columns.tsx b/frontend/src/components/transactions/columns.tsx
index be8eb25e..29050d18 100644
--- a/frontend/src/components/transactions/columns.tsx
+++ b/frontend/src/components/transactions/columns.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { ColumnDef, Row } from "@tanstack/react-table";
-import { ChevronRight } from "lucide-react";
+import { ChevronDown, ChevronRight, ChevronUp, HelpCircle } from "lucide-react";
 
 import { useTransactionsContext } from "@/context/TransactionContext";
 import { ModalDialog } from "./ModalDialog";
@@ -8,6 +8,8 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { ColumnHeader } from "../ui/columnHeader";
 import { textConstants } from "@/lib/utils";
 import { LineItem } from "@/types";
+import { Button } from "../ui/button";
+import { Tooltip } from "../ui/tooltip";
 
 const selectColumn: ColumnDef<LineItem> = {
   id: "select",
@@ -136,11 +138,21 @@ const co2Column: ColumnDef<LineItem> = {
   accessorKey: "co2",
   header: ({ column }) => {
     return (
-      <ColumnHeader
-        name="CO2e"
-        column={column}
-        tooltipContent={textConstants.carbonOffset}
-      />
+      <Button
+        className="font-bold font-[Arimo]"
+        variant="ghost"
+        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+      >
+        <p>
+          CO<sub>2</sub>e
+        </p>
+
+        <Tooltip textContent={textConstants.carbonOffset}>
+          <HelpCircle className="w-2 h-2 text-gray-500" />
+        </Tooltip>
+
+        {column.getIsSorted() == "asc" ? <ChevronUp /> : <ChevronDown />}
+      </Button>
     );
   },
   cell: ({ row }) => {

From 6a2083d713c0c32b74145e40166e1521c8c36dc1 Mon Sep 17 00:00:00 2001
From: ddusichka <78527291+ddusichka@users.noreply.github.com>
Date: Thu, 10 Apr 2025 14:36:39 -0400
Subject: [PATCH 2/5] co2e what a fun unit

---
 .../dashboard/GrossEmissionsBarGraph.tsx      |  4 ++--
 .../dashboard/NetEmissionsBarGraph.tsx        |  4 ++--
 .../components/scope-breakdown/piechart.tsx   |  2 +-
 .../scope-breakdown/scope-breakdown.tsx       |  2 +-
 .../components/scope-breakdown/tooltip.tsx    | 23 -------------------
 5 files changed, 6 insertions(+), 29 deletions(-)
 delete mode 100644 frontend/src/components/scope-breakdown/tooltip.tsx

diff --git a/frontend/src/components/dashboard/GrossEmissionsBarGraph.tsx b/frontend/src/components/dashboard/GrossEmissionsBarGraph.tsx
index 7aff6e26..0fcf527e 100644
--- a/frontend/src/components/dashboard/GrossEmissionsBarGraph.tsx
+++ b/frontend/src/components/dashboard/GrossEmissionsBarGraph.tsx
@@ -64,8 +64,8 @@ export default function GrossEmissionsBarGraph() {
             <CardTitle className="text-black text-4xl mb-2 font-semibold">
               Gross Emissions
             </CardTitle>
-            <CardDescription className="text-black text-4xl font-semibold font-[Arimo]">
-              {totalEmissions || 0} kg
+            <CardDescription className="text-black text-3xl font-semibold font-[Arimo]">
+              {totalEmissions || 0} kg CO₂e
             </CardDescription>
             <CardDescription className="font-[Montserrat] py-2">
               Total emissions (kg) for{" "}
diff --git a/frontend/src/components/dashboard/NetEmissionsBarGraph.tsx b/frontend/src/components/dashboard/NetEmissionsBarGraph.tsx
index 19aacbe9..3f92860d 100644
--- a/frontend/src/components/dashboard/NetEmissionsBarGraph.tsx
+++ b/frontend/src/components/dashboard/NetEmissionsBarGraph.tsx
@@ -98,8 +98,8 @@ export default function NetEmissionsBarGraph() {
             <CardTitle className="font-header text-4xl mb-2 font-semibold">
               Net Emissions
             </CardTitle>
-            <CardDescription className="text-black text-4xl font-semibold font-[Arimo]">
-              {totalEmissions || 0} kg
+            <CardDescription className="text-black text-3xl font-semibold font-[Arimo]">
+              {totalEmissions || 0} kg CO₂e
             </CardDescription>
           </div>
           <CustomLegend />
diff --git a/frontend/src/components/scope-breakdown/piechart.tsx b/frontend/src/components/scope-breakdown/piechart.tsx
index 65661d90..903403d5 100644
--- a/frontend/src/components/scope-breakdown/piechart.tsx
+++ b/frontend/src/components/scope-breakdown/piechart.tsx
@@ -39,7 +39,7 @@ const ScopeChart: React.FC<{
           <Cell key={`cell-${index}`} fill={`url(#${index + 1})`} />
         ))}
         <Label
-          value={`${formatNumber(totalEmissions)} kg CO2e`}
+          value={`${formatNumber(totalEmissions)} kg CO₂e`}
           position="center"
           fontSize={24}
           fill="#333"
diff --git a/frontend/src/components/scope-breakdown/scope-breakdown.tsx b/frontend/src/components/scope-breakdown/scope-breakdown.tsx
index c9a92f16..e4ecaf7b 100644
--- a/frontend/src/components/scope-breakdown/scope-breakdown.tsx
+++ b/frontend/src/components/scope-breakdown/scope-breakdown.tsx
@@ -59,7 +59,7 @@ const ScopeBreakdownChart = () => {
 
   const chartConfig = {
     visitors: {
-      label: "CO2e Emissions",
+      label: "CO₂e Emissions",
     },
     ...chartData.reduce((acc, item, index) => {
       acc[`Scope${index}`] = {
diff --git a/frontend/src/components/scope-breakdown/tooltip.tsx b/frontend/src/components/scope-breakdown/tooltip.tsx
deleted file mode 100644
index 65e123a3..00000000
--- a/frontend/src/components/scope-breakdown/tooltip.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-"use client";
-import React from "react";
-import { Tooltip } from "recharts";
-
-function ToolTip() {
-  return (
-    <Tooltip
-      formatter={(value: number, name: string) => [
-        <div key="name">
-          <div style={{ fontWeight: "normal", textAlign: "center" }}>
-            {name}
-          </div>
-          <div style={{ fontWeight: "bold", textAlign: "center" }}>
-            {`${value.toLocaleString()} kg CO2e`}
-          </div>
-        </div>,
-      ]}
-      labelFormatter={(label: string) => label}
-    />
-  );
-}
-
-export default ToolTip;

From 98ba85a4e60e896424f49f9be9d32b2d984f1b76 Mon Sep 17 00:00:00 2001
From: ddusichka <78527291+ddusichka@users.noreply.github.com>
Date: Fri, 11 Apr 2025 14:01:16 -0400
Subject: [PATCH 3/5] table header changes

---
 .../contacts/ContactLineItemTable.tsx         | 23 ++++++++++++++-----
 .../src/components/contacts/ContactTable.tsx  |  2 +-
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/contacts/ContactLineItemTable.tsx b/frontend/src/components/contacts/ContactLineItemTable.tsx
index 75c3fab6..13d0fd9e 100644
--- a/frontend/src/components/contacts/ContactLineItemTable.tsx
+++ b/frontend/src/components/contacts/ContactLineItemTable.tsx
@@ -20,14 +20,21 @@ import {
 import { ChevronRight } from "lucide-react";
 import { LineItem } from "@/types";
 import { ModalDialog } from "@/components/transactions/ModalDialog";
-import { reconciledColumns, offsetColumns, unreconciledColumns } from "./ContactDetailsColumns";
+import {
+  reconciledColumns,
+  offsetColumns,
+  unreconciledColumns,
+} from "./ContactDetailsColumns";
 
 interface ContactLineItemTableProps {
   data: LineItem[];
   tableType: "reconciled" | "unreconciled" | "offsets";
 }
 
-export function ContactLineItemTable({ data, tableType }: ContactLineItemTableProps) {
+export function ContactLineItemTable({
+  data,
+  tableType,
+}: ContactLineItemTableProps) {
   const [sorting, setSorting] = useState<SortingState>([]);
   const [selectedRow, setSelectedRow] = useState<Row<LineItem> | null>(null);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -64,7 +71,7 @@ export function ContactLineItemTable({ data, tableType }: ContactLineItemTablePr
     <>
       <div className="rounded-md border">
         <Table>
-          <TableHeader>
+          <TableHeader className="h-14">
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
@@ -77,14 +84,18 @@ export function ContactLineItemTable({ data, tableType }: ContactLineItemTablePr
                         )}
                   </TableHead>
                 ))}
-                <TableHead key="actions"></TableHead>{/* Empty header for action column */}
+                <TableHead key="actions"></TableHead>
+                {/* Empty header for action column */}
               </TableRow>
             ))}
           </TableHeader>
           <TableBody>
             {table.getRowModel().rows.length ? (
               table.getRowModel().rows.map((row) => (
-                <TableRow key={row.id} className="cursor-pointer hover:bg-gray-50">
+                <TableRow
+                  key={row.id}
+                  className="cursor-pointer hover:bg-gray-50"
+                >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
                       {flexRender(
@@ -126,4 +137,4 @@ export function ContactLineItemTable({ data, tableType }: ContactLineItemTablePr
       )}
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/contacts/ContactTable.tsx b/frontend/src/components/contacts/ContactTable.tsx
index 862a5ee6..f4e57e74 100644
--- a/frontend/src/components/contacts/ContactTable.tsx
+++ b/frontend/src/components/contacts/ContactTable.tsx
@@ -63,7 +63,7 @@ export default function ContactTable() {
     <>
       <div className="rounded-md border bg-white">
         <Table>
-          <TableHeader>
+          <TableHeader className="h-14">
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {

From 2ebf2262ac61f68f25a72190b09e3c3a0366c724 Mon Sep 17 00:00:00 2001
From: ddusichka <78527291+ddusichka@users.noreply.github.com>
Date: Fri, 11 Apr 2025 14:10:00 -0400
Subject: [PATCH 4/5] improve dashboard layout

---
 frontend/src/app/(main)/dashboard/page.tsx | 75 +++++++++++++---------
 1 file changed, 43 insertions(+), 32 deletions(-)

diff --git a/frontend/src/app/(main)/dashboard/page.tsx b/frontend/src/app/(main)/dashboard/page.tsx
index 898acda2..fe8405bc 100644
--- a/frontend/src/app/(main)/dashboard/page.tsx
+++ b/frontend/src/app/(main)/dashboard/page.tsx
@@ -23,57 +23,68 @@ const DashboardContent: React.FC = () => {
   const bottomLeftRef = useRef<HTMLDivElement>(null);
   const bottomRightRef = useRef<HTMLDivElement>(null);
 
+  const { summary, isSummaryLoading } = useEmissionSummary();
+
   // Function to adjust heights
+
   useEffect(() => {
+    // Function to adjust heights
     const adjustHeights = () => {
+      // Only adjust on desktop layout
+      if (window.innerWidth < 1024) return;
+
       // Reset heights before recalculating
       if (topLeftRef.current) topLeftRef.current.style.height = "auto";
       if (topRightRef.current) topRightRef.current.style.height = "auto";
       if (bottomLeftRef.current) bottomLeftRef.current.style.height = "auto";
       if (bottomRightRef.current) bottomRightRef.current.style.height = "auto";
 
-      // Wait for next frame to ensure heights have been reset
+      // Use requestAnimationFrame to ensure DOM has updated
       requestAnimationFrame(() => {
-        // Adjust only on desktop layout
-        if (window.innerWidth >= 1024) {
-          // lg breakpoint
-          // Adjust top row
-          if (topLeftRef.current && topRightRef.current) {
-            const height = Math.max(
-              topLeftRef.current.scrollHeight,
-              topRightRef.current.scrollHeight
-            );
-            topLeftRef.current.style.height = `${height}px`;
-            topRightRef.current.style.height = `${height}px`;
-          }
-
-          // Adjust bottom row
-          if (bottomLeftRef.current && bottomRightRef.current) {
-            const height = Math.max(
-              bottomLeftRef.current.scrollHeight,
-              bottomRightRef.current.scrollHeight
-            );
-            bottomLeftRef.current.style.height = `${height}px`;
-            bottomRightRef.current.style.height = `${height}px`;
-          }
+        // Adjust top row
+        if (topLeftRef.current && topRightRef.current) {
+          const height = Math.max(
+            topLeftRef.current.scrollHeight,
+            topRightRef.current.scrollHeight
+          );
+          topLeftRef.current.style.height = `${height}px`;
+          topRightRef.current.style.height = `${height}px`;
+        }
+
+        // Adjust bottom row
+        if (bottomLeftRef.current && bottomRightRef.current) {
+          const height = Math.max(
+            bottomLeftRef.current.scrollHeight,
+            bottomRightRef.current.scrollHeight
+          );
+          bottomLeftRef.current.style.height = `${height}px`;
+          bottomRightRef.current.style.height = `${height}px`;
         }
       });
     };
 
-    // Initial adjustment with a slight delay to ensure components are fully rendered
-    const timer = setTimeout(adjustHeights, 100);
+    // Run adjustment when component mounts with a longer delay
+    const initialTimer = setTimeout(adjustHeights, 700);
 
-    // Adjust on window resize
-    window.addEventListener("resize", adjustHeights);
+    // Run again after data is likely loaded
+    const dataLoadedTimer = setTimeout(adjustHeights, 2000);
+
+    // Adjust on window resize (debounced to prevent excessive calls)
+    let resizeTimer: NodeJS.Timeout;
+    const handleResize = () => {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(adjustHeights, 100);
+    };
+
+    window.addEventListener("resize", handleResize);
 
     // Cleanup
     return () => {
-      clearTimeout(timer);
-      window.removeEventListener("resize", adjustHeights);
+      clearTimeout(initialTimer);
+      clearTimeout(dataLoadedTimer);
+      window.removeEventListener("resize", handleResize);
     };
-  }, []);
-
-  const { summary, isSummaryLoading } = useEmissionSummary();
+  }, [summary, dateRange]);
 
   return (
     <div className="flex flex-col h-full py-0">

From a213a63d1e1bcf8b742405055ca7a5f1c9619871 Mon Sep 17 00:00:00 2001
From: ddusichka <78527291+ddusichka@users.noreply.github.com>
Date: Fri, 11 Apr 2025 14:13:19 -0400
Subject: [PATCH 5/5] fix top emissions

---
 .../src/components/dashboard/TopEmissions.tsx | 80 +++++++++----------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/dashboard/TopEmissions.tsx b/frontend/src/components/dashboard/TopEmissions.tsx
index 47a0b076..4b009c94 100644
--- a/frontend/src/components/dashboard/TopEmissions.tsx
+++ b/frontend/src/components/dashboard/TopEmissions.tsx
@@ -55,48 +55,48 @@ export default function TopEmissionsFactors() {
           <span className="font-bold">{formattedDateRange}</span>
         </CardDescription>
       </CardHeader>
-      <CardContent className="px-0 py-4 lg:py-12 flex-grow flex flex-col justify-between">
-        {emissions && emissions.length > 0 ? (
-          emissions.map((factor, index) => (
-            <div
-              key={factor.rank}
-              className={`flex justify-between items-center px-4 py-2 rounded-lg ${
-                index % 2 === 0 ? "bg-green-50" : "bg-white"
-              }`}
-            >
-              <div className="flex items-center w-2/3">
-                <span className="text-2xl font-bold text-gray-800 pr-6">
-                  {factor.rank}
-                </span>
-                <span className="text-md text-gray-700">
-                  {factor.emission_factor}
-                </span>
-              </div>
-              <div className="text-lg lg:text-md font-medium w-1/3 text-right">
-                {formatNumber(factor.total_co2)} kg
-              </div>
-            </div>
-          ))
-        ) : (
-          [1, 2, 3, 4, 5].map((index) => (
-            <div
-              key={"skeleton" + index}
-              className={`flex justify-between items-center px-4 py-2 rounded-lg ${
-                index % 2 === 0 ? "bg-green-50" : "bg-white"
-              }`}
-            >
-              <div className="flex items-center w-2/3 py-5">
-                <div className="pr-6">
-                  <div className="h-6 w-6 bg-gray-200 rounded animate-pulse"></div>
+      <CardContent className="px-0 py-4 lg:py-8 flex-grow">
+        <div className="grid grid-rows-5 gap-2 h-full">
+          {emissions && emissions.length > 0
+            ? emissions.map((factor, index) => (
+                <div
+                  key={factor.rank}
+                  className={`flex justify-between items-center px-4 py-3 rounded-lg ${
+                    index % 2 === 0 ? "bg-green-50" : "bg-white"
+                  }`}
+                >
+                  <div className="flex items-start w-3/4">
+                    <span className="text-2xl font-bold text-gray-800 pr-6 pt-0.5">
+                      {factor.rank}
+                    </span>
+                    <span className="text-md text-gray-700 break-words pr-2">
+                      {factor.emission_factor}
+                    </span>
+                  </div>
+                  <div className="text-lg lg:text-md font-medium w-1/4 text-right whitespace-nowrap">
+                    {formatNumber(factor.total_co2)} kg
+                  </div>
                 </div>
-                <div>
-                  <div className="h-5 w-24 bg-gray-200 rounded animate-pulse"></div>
+              ))
+            : [1, 2, 3, 4, 5].map((index) => (
+                <div
+                  key={"skeleton" + index}
+                  className={`flex justify-between items-center px-4 py-3 rounded-lg ${
+                    index % 2 === 0 ? "bg-green-50" : "bg-white"
+                  }`}
+                >
+                  <div className="flex items-center w-3/4">
+                    <div className="pr-6">
+                      <div className="h-6 w-6 bg-gray-200 rounded animate-pulse"></div>
+                    </div>
+                    <div className="w-full">
+                      <div className="h-5 w-full max-w-xs bg-gray-200 rounded animate-pulse"></div>
+                    </div>
+                  </div>
+                  <div className="h-5 w-20 ml-auto bg-gray-200 rounded animate-pulse w-1/4 justify-end"></div>
                 </div>
-              </div>
-              <div className="h-5 w-20 ml-auto bg-gray-200 rounded animate-pulse w-1/3 justify-end"></div>
-            </div>
-          ))
-        )}
+              ))}
+        </div>
       </CardContent>
     </Card>
   );