diff --git a/app/src/app/[lng]/[inventory]/InventoryResultTab/EmissionsForecast/CustomLegend.tsx b/app/src/app/[lng]/[inventory]/InventoryResultTab/EmissionsForecast/CustomLegend.tsx
index 11035edbe..7c89bcf0f 100644
--- a/app/src/app/[lng]/[inventory]/InventoryResultTab/EmissionsForecast/CustomLegend.tsx
+++ b/app/src/app/[lng]/[inventory]/InventoryResultTab/EmissionsForecast/CustomLegend.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { Flex, Text, Badge } from "@chakra-ui/react";
+import { Flex, Text, Badge, Box } from "@chakra-ui/react";
 import { getColorForSeries } from "./EmissionsForecastChart";
+import { ColoredCircle } from "@/components/ColoredCircle";
 
 interface CustomLegendProps {
   data: { id: string; color: string }[];
@@ -12,7 +13,7 @@ const CustomLegend: React.FC<CustomLegendProps> = ({ data, t }) => {
     <Flex wrap="wrap" justifyContent="center" marginBottom={4}>
       {data.map((series) => (
         <Flex key={series.id} alignItems="center" mx={2}>
-          <Badge boxSize="10px" bg={getColorForSeries(series.id)} mr={2} />
+          <ColoredCircle size="10px" color={getColorForSeries(series.id)} />
           <Text>{t(series.id)}</Text>
         </Flex>
       ))}
diff --git a/app/src/app/[lng]/[inventory]/InventoryResultTab/EmissionsForecast/EmissionsForecastChart.tsx b/app/src/app/[lng]/[inventory]/InventoryResultTab/EmissionsForecast/EmissionsForecastChart.tsx
index 93214bf73..71b59a85f 100644
--- a/app/src/app/[lng]/[inventory]/InventoryResultTab/EmissionsForecast/EmissionsForecastChart.tsx
+++ b/app/src/app/[lng]/[inventory]/InventoryResultTab/EmissionsForecast/EmissionsForecastChart.tsx
@@ -8,10 +8,13 @@ import {
   getSubSectorByReferenceNumber,
   ISector,
 } from "@/util/constants";
-import { Badge, Box, Card, Heading, Table, Text } from "@chakra-ui/react";
+import { Box, Card, Heading, HStack, Table, Text } from "@chakra-ui/react";
 import { convertKgToTonnes, toKebabCase } from "@/util/helpers";
 import { ResponsiveLine } from "@nivo/line";
 import CustomLegend from "@/app/[lng]/[inventory]/InventoryResultTab/EmissionsForecast/CustomLegend";
+import { ColoredCircle } from "@/components/ColoredCircle";
+import { ButtonSmall } from "@/components/Texts/Button";
+import { TitleMedium } from "@/components/Texts/Title";
 
 interface LineChartData {
   id: string;
@@ -112,14 +115,22 @@ export const EmissionsForecastChart = ({
                   </Text>
                 </Box>
                 <Box padding="4">
-                  <Table.Root unstyled size={"sm"}>
+                  <Table.Root size={"sm"}>
                     <Table.Header>
                       <Table.Row>
-                        <Table.ColumnHeader>{t("sector")}</Table.ColumnHeader>
-                        <Table.ColumnHeader>{t("rate")}</Table.ColumnHeader>
-                        <Table.ColumnHeader>%</Table.ColumnHeader>
                         <Table.ColumnHeader>
-                          {t("total-emissions")}
+                          <ButtonSmall>{t("sector").toUpperCase()}</ButtonSmall>
+                        </Table.ColumnHeader>
+                        <Table.ColumnHeader>
+                          <ButtonSmall>{t("rate").toUpperCase()}</ButtonSmall>
+                        </Table.ColumnHeader>
+                        <Table.ColumnHeader>
+                          <ButtonSmall>%</ButtonSmall>
+                        </Table.ColumnHeader>
+                        <Table.ColumnHeader>
+                          <ButtonSmall>
+                            {t("total-emissions").toUpperCase()}
+                          </ButtonSmall>
                         </Table.ColumnHeader>
                       </Table.Row>
                     </Table.Header>
@@ -146,12 +157,13 @@ export const EmissionsForecastChart = ({
                         return (
                           <Table.Row key={id}>
                             <Table.Cell>
-                              <Badge
-                                boxSize="10px"
-                                bg={getColorForSeries(id)}
-                                marginRight="8px"
-                              />
-                              {t(id)}
+                              <HStack>
+                                <ColoredCircle
+                                  size="10px"
+                                  color={getColorForSeries(id)}
+                                />
+                                {t(id)}
+                              </HStack>
                             </Table.Cell>
                             <Table.Cell>{growthRate}</Table.Cell>
                             <Table.Cell>{percentage}%</Table.Cell>
@@ -164,10 +176,14 @@ export const EmissionsForecastChart = ({
                         );
                       })}
                       <Table.Row>
-                        <Table.ColumnHeader>{t("total")}</Table.ColumnHeader>
+                        <Table.ColumnHeader>
+                          <TitleMedium>{t("total").toUpperCase()}</TitleMedium>
+                        </Table.ColumnHeader>
                         <Table.ColumnHeader></Table.ColumnHeader>
                         <Table.ColumnHeader>
-                          {convertKgToTonnes(sumOfYs)}
+                          <TitleMedium>
+                            {convertKgToTonnes(sumOfYs)}
+                          </TitleMedium>
                         </Table.ColumnHeader>
                       </Table.Row>
                     </Table.Body>
diff --git a/app/src/app/[lng]/[inventory]/InventoryResultTab/TopEmissionsWidget.tsx b/app/src/app/[lng]/[inventory]/InventoryResultTab/TopEmissionsWidget.tsx
index ec6bec926..76df74cf4 100644
--- a/app/src/app/[lng]/[inventory]/InventoryResultTab/TopEmissionsWidget.tsx
+++ b/app/src/app/[lng]/[inventory]/InventoryResultTab/TopEmissionsWidget.tsx
@@ -30,6 +30,7 @@ import {
   ProgressCircleRing,
   ProgressCircleRoot,
 } from "@/components/ui/progress-circle";
+import { ButtonSmall } from "@/components/Texts/Button";
 
 const EmissionsTable = ({
   topEmissions,
@@ -39,20 +40,19 @@ const EmissionsTable = ({
   t: TFunction;
 }) => {
   return (
-    <Table.Root unstyled my={4}>
+    <Table.Root my={4}>
       <Table.Header>
         <Table.Row>
-          <Table.ColumnHeader
-            css={{ font: "bold", color: "black" }}
-            width={"50%"}
-          >
-            {t("subsector")}
+          <Table.ColumnHeader>
+            <ButtonSmall>{t("subsector").toUpperCase()}</ButtonSmall>
           </Table.ColumnHeader>
-          <Table.ColumnHeader css={{ font: "bold", color: "black" }}>
-            {t("total-emissions-CO2eq")}
+          <Table.ColumnHeader>
+            <ButtonSmall>
+              {t("total-emissions-CO2eq").toUpperCase()}
+            </ButtonSmall>
           </Table.ColumnHeader>
-          <Table.ColumnHeader css={{ font: "bold", color: "black" }}>
-            {t("%-of-emissions")}
+          <Table.ColumnHeader>
+            <ButtonSmall>{t("%-of-emissions").toUpperCase()}</ButtonSmall>
           </Table.ColumnHeader>
         </Table.Row>
       </Table.Header>
diff --git a/app/src/components/ColoredCircle/index.tsx b/app/src/components/ColoredCircle/index.tsx
new file mode 100644
index 000000000..ebc4af243
--- /dev/null
+++ b/app/src/components/ColoredCircle/index.tsx
@@ -0,0 +1,22 @@
+import { Box, BoxProps } from "@chakra-ui/react";
+
+interface ColoredCircleProps extends BoxProps {
+  color: string;
+  size: string;
+}
+export const ColoredCircle = ({
+  color,
+  size,
+  ...props
+}: ColoredCircleProps) => {
+  return (
+    <Box
+      width={size}
+      height={size}
+      bg={color}
+      borderRadius="50%"
+      mr={2}
+      {...props}
+    />
+  );
+};
diff --git a/app/src/i18n/locales/en/dashboard.json b/app/src/i18n/locales/en/dashboard.json
index 3179df525..c15f2f37e 100644
--- a/app/src/i18n/locales/en/dashboard.json
+++ b/app/src/i18n/locales/en/dashboard.json
@@ -171,5 +171,7 @@
   "invite-error-toast-text": "There was an error sending your invitations",
   "afolu-other-agriculture": "Other agriculture",
   "afolu-livestock": "Live stock",
-  "afolu-land": "Land"
+  "afolu-land": "Land",
+  "rate": "rate",
+  "sector": "sector"
 }