diff --git a/src/app/components/charts/sankey/data.ts b/src/app/components/charts/sankey/data.ts
index fe76a1f15..fbf3e0da6 100644
--- a/src/app/components/charts/sankey/data.ts
+++ b/src/app/components/charts/sankey/data.ts
@@ -19,6 +19,7 @@ export interface SankeyChartData {
 
 export interface SankeyChartProps {
   data: SankeyChartData;
+  formatLabel?: boolean;
 }
 
 export interface SankeyChartTooltipProps extends SankeyChartNode {
diff --git a/src/app/components/charts/sankey/index.tsx b/src/app/components/charts/sankey/index.tsx
index 8e2ce24d9..2678bdfa6 100644
--- a/src/app/components/charts/sankey/index.tsx
+++ b/src/app/components/charts/sankey/index.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import sumBy from "lodash/sumBy";
 import Box from "@mui/material/Box";
 import { appColors } from "app/theme";
 import * as echarts from "echarts/core";
@@ -15,6 +16,10 @@ import {
   SankeySeriesOption,
   SankeyChart as EChartsSankey,
 } from "echarts/charts";
+import {
+  getFinancialValueWithMetricPrefix,
+  getRange,
+} from "app/utils/getFinancialValueWithMetricPrefix";
 
 echarts.use([TooltipComponent, EChartsSankey, SVGRenderer]);
 
@@ -35,7 +40,7 @@ export const SankeyChart: React.FC<SankeyChartProps> = (
 
   const totalValue = React.useMemo(() => {
     return props.data.links
-      .filter((link) => link.source === "Total budget")
+      .filter((link) => link.source.includes("Total"))
       .reduce((acc, item) => acc + item.value, 0);
   }, [props.data.links]);
 
@@ -49,6 +54,8 @@ export const SankeyChart: React.FC<SankeyChartProps> = (
         renderer: "svg",
       });
 
+      const maxLevel = Math.max(...props.data.nodes.map((node) => node.level));
+
       const option: echarts.ComposeOption<
         SankeySeriesOption | TooltipComponentOption
       > = {
@@ -61,7 +68,7 @@ export const SankeyChart: React.FC<SankeyChartProps> = (
           type: "sankey",
           draggable: false,
           layoutIterations: 0,
-          right: mobile ? 0 : 250,
+          right: mobile || maxLevel === 2 ? 0 : 250,
           nodes: props.data.nodes,
           links: props.data.links,
           emphasis: {
@@ -88,6 +95,30 @@ export const SankeyChart: React.FC<SankeyChartProps> = (
                 position: "right",
                 fontWeight: "bold",
                 color: appColors.COMMON.WHITE,
+                formatter: (params: any) => {
+                  const range = getRange([{ value: params.value }], ["value"]);
+                  return props.formatLabel
+                    ? [
+                        `{name|${params.name}: }`,
+                        `{value|US$ ${getFinancialValueWithMetricPrefix(
+                          params.value,
+                          range.index,
+                          3
+                        )}${range.abbr}}`,
+                      ].join("\n")
+                    : params.name;
+                },
+                rich: {
+                  name: {
+                    fontSize: 12,
+                    fontWeight: "bold",
+                    color: appColors.COMMON.WHITE,
+                  },
+                  value: {
+                    fontSize: 12,
+                    color: appColors.COMMON.WHITE,
+                  },
+                },
               },
               lineStyle: {
                 color:
@@ -103,6 +134,40 @@ export const SankeyChart: React.FC<SankeyChartProps> = (
                 show: !mobile,
                 position: "left",
                 color: appColors.COMMON.WHITE,
+                formatter: (params: any) => {
+                  const range = getRange([{ value: params.value }], ["value"]);
+                  return props.formatLabel
+                    ? [
+                        `{name|${params.name}: }`,
+                        `{value|US$ ${getFinancialValueWithMetricPrefix(
+                          params.value,
+                          range.index,
+                          3
+                        )}${range.abbr}}`,
+                        `\n`,
+                        `{perc|${((params.value / totalValue) * 100)
+                          .toFixed(2)
+                          .replace(".00", "")}% of total}`,
+                      ].join("")
+                    : params.name;
+                },
+                rich: {
+                  name: {
+                    fontSize: 12,
+                    fontWeight: "bold",
+                    color: appColors.COMMON.WHITE,
+                  },
+                  value: {
+                    fontSize: 12,
+                    color: appColors.COMMON.WHITE,
+                  },
+                  perc: {
+                    fontSize: 10,
+                    align: "right",
+                    padding: [5, 0, 0, 0],
+                    color: appColors.COMMON.WHITE,
+                  },
+                },
               },
               lineStyle: {
                 color:
@@ -112,8 +177,32 @@ export const SankeyChart: React.FC<SankeyChartProps> = (
             {
               depth: 2,
               label: {
-                position: "right",
                 color: appColors.COMMON.BLACK,
+                position: maxLevel === 2 ? "left" : "right",
+                formatter: (params: any) => {
+                  const range = getRange([{ value: params.value }], ["value"]);
+                  return props.formatLabel
+                    ? [
+                        `{name|${params.name}: }`,
+                        `{value|US$ ${getFinancialValueWithMetricPrefix(
+                          params.value,
+                          range.index,
+                          3
+                        )}${range.abbr}}`,
+                      ].join("")
+                    : params.name;
+                },
+                rich: {
+                  name: {
+                    fontSize: 12,
+                    fontWeight: "bold",
+                    color: appColors.COMMON.BLACK,
+                  },
+                  value: {
+                    fontSize: 12,
+                    color: appColors.COMMON.BLACK,
+                  },
+                },
               },
               lineStyle: {
                 color: appColors.SANKEY_CHART.LINK_COLORS[2],
@@ -151,6 +240,10 @@ export const SankeyChart: React.FC<SankeyChartProps> = (
           formatter: (params: any) => {
             const data = params.data;
             if (data.source && data.target) {
+              const sourceTotal = sumBy(
+                props.data.links.filter((node) => node.source === data.source),
+                "value"
+              );
               return ReactDOMServer.renderToString(
                 <Box
                   style={{
@@ -175,12 +268,11 @@ export const SankeyChart: React.FC<SankeyChartProps> = (
                     {formatFinancialValue(data.value)}
                   </Typography>
                   <Box>
-                    {data.source} -{">"} {data.target}
-                    <br />
-                    {((data.value / totalValue) * 100)
+                    {data.target} -{" "}
+                    {((data.value / sourceTotal) * 100)
                       .toFixed(2)
                       .replace(".00", "")}
-                    % of total budget
+                    % of {data.source}
                   </Box>
                 </Box>
               );
diff --git a/src/app/components/table/data.ts b/src/app/components/table/data.ts
index dc1c4e931..ffc977ae2 100644
--- a/src/app/components/table/data.ts
+++ b/src/app/components/table/data.ts
@@ -7891,3 +7891,18 @@ export const TABLE_VARIATION_15_DATA: {
     ],
   },
 ];
+
+export const TABLE_VARIATION_16_COLUMNS: ColumnDefinition[] = [
+  {
+    title: "Disbursement Area",
+    field: "name",
+    width: "50%",
+    formatter: cellBGColorFormatter,
+  },
+  {
+    title: "Amount (US$)",
+    field: "amount",
+    width: "50%",
+    formatter: financialFormatter,
+  },
+];
diff --git a/src/app/pages/datasets/common/chart-block/data.ts b/src/app/pages/datasets/common/chart-block/data.ts
index 78b2fffda..d4a499ce5 100644
--- a/src/app/pages/datasets/common/chart-block/data.ts
+++ b/src/app/pages/datasets/common/chart-block/data.ts
@@ -21,5 +21,7 @@ export interface DatasetChartBlockProps {
   handleDropdownChange?: (value: string) => void;
   removeFilter: (value: string, types: string[]) => void;
   toggleFilter: (checked: boolean, value: string, type: string) => void;
+  titleVariant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2";
   dropdownItems: { value: string; label: string; icon?: React.ReactElement }[];
+  subtitleVariant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2";
 }
diff --git a/src/app/pages/datasets/common/chart-block/index.tsx b/src/app/pages/datasets/common/chart-block/index.tsx
index 468923277..c116edc6c 100644
--- a/src/app/pages/datasets/common/chart-block/index.tsx
+++ b/src/app/pages/datasets/common/chart-block/index.tsx
@@ -119,10 +119,12 @@ export const DatasetChartBlock: React.FC<DatasetChartBlockProps> = (
 
   return (
     <Box id={props.id} data-cy="dataset-chart-block">
-      <Typography variant="h3" lineHeight={1.2}>
+      <Typography variant={props.titleVariant ?? "h3"} lineHeight={1.2}>
         {props.title}
       </Typography>
-      <Typography variant="body2">{props.subtitle}</Typography>
+      <Typography variant={props.subtitleVariant ?? "body2"}>
+        {props.subtitle}
+      </Typography>
       <Divider
         sx={{
           margin: "20px 0",
@@ -149,29 +151,31 @@ export const DatasetChartBlock: React.FC<DatasetChartBlockProps> = (
         }}
       >
         <Box gap="10px" display="flex" flexDirection="row">
-          <Button
-            variant="outlined"
-            startIcon={<Add fontSize="small" />}
-            onClick={handleFilterButtonClick}
-            sx={
-              props.appliedFilters.length > 0
-                ? {
-                    "&:after": {
-                      top: "-3px",
-                      right: "8px",
-                      width: "6px",
-                      height: "6px",
-                      content: "''",
-                      borderRadius: "50%",
-                      position: "absolute",
-                      background: "#2196F3",
-                    },
-                  }
-                : {}
-            }
-          >
-            Filters
-          </Button>
+          {props.filterGroups.length > 0 && (
+            <Button
+              variant="outlined"
+              startIcon={<Add fontSize="small" />}
+              onClick={handleFilterButtonClick}
+              sx={
+                props.appliedFilters.length > 0
+                  ? {
+                      "&:after": {
+                        top: "-3px",
+                        right: "8px",
+                        width: "6px",
+                        height: "6px",
+                        content: "''",
+                        borderRadius: "50%",
+                        position: "absolute",
+                        background: "#2196F3",
+                      },
+                    }
+                  : {}
+              }
+            >
+              Filters
+            </Button>
+          )}
           {filterPopover}
           {/* <Button variant="outlined" startIcon={<SettingsIcon />}>
             Settings
diff --git a/src/app/pages/datasets/grant-implementation/blocks/block-2-1/index.tsx b/src/app/pages/datasets/grant-implementation/blocks/block-2-1/index.tsx
new file mode 100644
index 000000000..ee4a455d1
--- /dev/null
+++ b/src/app/pages/datasets/grant-implementation/blocks/block-2-1/index.tsx
@@ -0,0 +1,329 @@
+import React from "react";
+import get from "lodash/get";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import { useLocation } from "react-router-dom";
+import { Dropdown } from "app/components/dropdown";
+import { useCMSData } from "app/hooks/useCMSData";
+import { SankeyChart } from "app/components/charts/sankey";
+import { getCMSDataField } from "app/utils/getCMSDataField";
+import { TableContainer } from "app/components/table-container";
+import { useStoreActions, useStoreState } from "app/state/store/hooks";
+import { DatasetChartBlock } from "app/pages/datasets/common/chart-block";
+import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate";
+import { defaultAppliedFilters } from "app/state/api/action-reducers/sync/filters";
+import { dropdownItemsHolisticGrantInvestments } from "app/pages/datasets/grant-implementation/data";
+import {
+  TableDataItem,
+  TABLE_VARIATION_16_COLUMNS as HGI_TABLE_COLUMNS,
+} from "app/components/table/data";
+
+export const GrantImplementationPageBlock21: React.FC = () => {
+  const location = useLocation();
+  const cmsData = useCMSData({ returnData: true });
+  const latestUpdateDate = useGetDatasetLatestUpdate({
+    dataset: "disbursements",
+  });
+
+  const [dropdownSelected, setDropdownSelected] = React.useState(
+    dropdownItemsHolisticGrantInvestments[0].value
+  );
+
+  const [tableSearch, setTableSearch] = React.useState("");
+
+  const dataSankey = useStoreState((state) => {
+    const nodes = get(state.FinancialInsightsHGISankey, "data.data.nodes", []);
+    const links = get(state.FinancialInsightsHGISankey, "data.data.links", []);
+    return {
+      nodes,
+      links,
+    };
+  });
+  const fetchSankey = useStoreActions(
+    (actions) => actions.FinancialInsightsHGISankey.fetch
+  );
+  const dataTable = useStoreState(
+    (state) =>
+      get(state.FinancialInsightsHGITable, "data.data", []) as {
+        [key: string]: TableDataItem;
+      }[]
+  );
+  const fetchTable = useStoreActions(
+    (actions) => actions.FinancialInsightsHGITable.fetch
+  );
+  const loading = useStoreState((state) => {
+    switch (dropdownSelected) {
+      case dropdownItemsHolisticGrantInvestments[0].value:
+        return state.FinancialInsightsHGISankey.loading;
+      case dropdownItemsHolisticGrantInvestments[1].value:
+        return state.FinancialInsightsHGITable.loading;
+      default:
+        return false;
+    }
+  });
+  const cycles = useStoreState((state) =>
+    get(state.DisbursementsCycles, "data.data", [])
+      .map((cycle: any) => ({
+        label: cycle.value,
+        value: cycle.value,
+      }))
+      .reverse()
+      .slice(0, 3)
+  );
+  const appliedFiltersData = useStoreState(
+    (state) => state.AppliedFiltersState
+  );
+
+  const [cycleDropdownSelected, setCycleDropdownSelected] = React.useState(
+    cycles.length > 0 ? cycles[0].value : null
+  );
+
+  const handleDropdownSelectionChange = (value: string) => {
+    setDropdownSelected(value);
+  };
+
+  const cycleDropdown = React.useMemo(() => {
+    if (!cycleDropdownSelected) {
+      return <React.Fragment />;
+    }
+    return (
+      <Dropdown
+        dropdownItems={cycles}
+        dropdownSelected={cycleDropdownSelected}
+        handleDropdownChange={setCycleDropdownSelected}
+      />
+    );
+  }, [cycles, cycleDropdownSelected]);
+
+  const chartEmpty = React.useMemo(() => {
+    switch (dropdownSelected) {
+      case dropdownItemsHolisticGrantInvestments[0].value:
+        return !dataSankey.nodes.length;
+      case dropdownItemsHolisticGrantInvestments[1].value:
+        return !dataTable.length;
+      default:
+        return false;
+    }
+  }, [tableSearch, dropdownSelected, dataSankey.nodes, dataTable]);
+
+  const chartFilterString = React.useMemo(() => {
+    let value = "";
+    if (
+      appliedFiltersData.locations.length > 0 &&
+      location.search.includes("locations=")
+    ) {
+      value += `geographies=${encodeURIComponent(
+        appliedFiltersData.locations.join(",")
+      )}`;
+    }
+    if (
+      appliedFiltersData.components.length > 0 &&
+      location.search.includes("components=")
+    ) {
+      value += `${value.length > 0 ? "&" : ""}components=${encodeURIComponent(
+        appliedFiltersData.components.join(",")
+      )}`;
+    }
+    if (
+      appliedFiltersData.principalRecipients.length > 0 &&
+      location.search.includes("principalRecipients=")
+    ) {
+      value += `${
+        value.length > 0 ? "&" : ""
+      }principalRecipients=${encodeURIComponent(
+        appliedFiltersData.principalRecipients.join(",")
+      )}`;
+    }
+    if (
+      appliedFiltersData.principalRecipientSubTypes.length > 0 &&
+      location.search.includes("principalRecipientSubTypes=")
+    ) {
+      value += `${
+        value.length > 0 ? "&" : ""
+      }principalRecipientSubTypes=${encodeURIComponent(
+        appliedFiltersData.principalRecipientSubTypes.join(",")
+      )}`;
+    }
+    if (
+      appliedFiltersData.principalRecipientTypes.length > 0 &&
+      location.search.includes("principalRecipientTypes=")
+    ) {
+      value += `${
+        value.length > 0 ? "&" : ""
+      }principalRecipientTypes=${encodeURIComponent(
+        appliedFiltersData.principalRecipientTypes.join(",")
+      )}`;
+    }
+    if (
+      appliedFiltersData.status.length > 0 &&
+      location.search.includes("status=")
+    ) {
+      value += `${value.length > 0 ? "&" : ""}status=${encodeURIComponent(
+        appliedFiltersData.status.join(",")
+      )}`;
+    }
+    if (cycleDropdownSelected) {
+      value += `${
+        value.length > 0 ? "&" : ""
+      }cycleNames=${cycleDropdownSelected}`;
+    }
+    return value;
+  }, [appliedFiltersData, location.search, cycleDropdownSelected]);
+
+  const onSearchChange = (search: string) => {
+    setTableSearch(search);
+    let filterString = chartFilterString;
+    if (search) {
+      filterString += `${filterString.length > 0 ? "&" : ""}q=${search}`;
+    }
+    fetchTable({ filterString });
+  };
+
+  const chartContent = React.useMemo(() => {
+    switch (dropdownSelected) {
+      case dropdownItemsHolisticGrantInvestments[0].value:
+        return (
+          <React.Fragment>
+            <Grid
+              container
+              spacing={4}
+              sx={{
+                color: "#464646",
+                fontSize: "10px",
+                marginTop: "8px",
+                fontWeight: "700",
+              }}
+            >
+              <Grid item xs={4}>
+                {getCMSDataField(
+                  cmsData,
+                  "pagesDatasetsGrantImplementation.hgiSankeyLabel1",
+                  "Total Disbursed"
+                )}
+              </Grid>
+              <Grid
+                item
+                xs={4}
+                sx={{
+                  display: "flex",
+                  justifyContent: "center",
+                }}
+              >
+                {getCMSDataField(
+                  cmsData,
+                  "pagesDatasetsGrantImplementation.hgiSankeyLabel2",
+                  "Disbursement Area"
+                )}
+              </Grid>
+              <Grid
+                item
+                xs={4}
+                sx={{
+                  display: "flex",
+                  justifyContent: "flex-end",
+                }}
+              >
+                {getCMSDataField(
+                  cmsData,
+                  "pagesDatasetsGrantImplementation.hgiSankeyLabel3",
+                  "Disbursement Sub-Area"
+                )}
+              </Grid>
+            </Grid>
+            <SankeyChart formatLabel data={dataSankey} />
+          </React.Fragment>
+        );
+      case dropdownItemsHolisticGrantInvestments[1].value:
+        return (
+          <TableContainer
+            dataTree
+            id="hgi-table"
+            data={dataTable}
+            search={tableSearch}
+            dataTreeStartExpanded
+            columns={HGI_TABLE_COLUMNS}
+            onSearchChange={onSearchChange}
+          />
+        );
+      default:
+        return null;
+    }
+  }, [
+    tableSearch,
+    dropdownSelected,
+    dataSankey,
+    dataTable,
+    cmsData,
+    cycleDropdownSelected,
+  ]);
+
+  React.useEffect(() => {
+    if (!cycleDropdownSelected) return;
+    fetchSankey({ filterString: chartFilterString });
+    fetchTable({ filterString: chartFilterString });
+  }, [chartFilterString]);
+
+  React.useEffect(() => {
+    if (!cycleDropdownSelected && cycles.length > 0) {
+      setCycleDropdownSelected(cycles[0].value);
+    }
+  }, [cycles]);
+
+  React.useEffect(() => {
+    if (location.hash) {
+      const blockId = location.hash.slice(1).split("|")[0];
+      const blockChartType = location.hash.slice(1).split("|")[1];
+      if (blockId && blockChartType && blockId === "hgi") {
+        setDropdownSelected(decodeURIComponent(blockChartType));
+      }
+    }
+  }, [location.hash]);
+
+  return (
+    <Box
+      padding="50px 0"
+      sx={{
+        "#content": {
+          padding: 0,
+        },
+        hr: {
+          display: "none",
+        },
+      }}
+    >
+      <DatasetChartBlock
+        id="hgi"
+        titleVariant="h5"
+        loading={loading}
+        empty={chartEmpty}
+        title={getCMSDataField(
+          cmsData,
+          "pagesDatasetsGrantImplementation.hgiTitle",
+          "Investments by Disbursement Area"
+        )}
+        subtitle={getCMSDataField(
+          cmsData,
+          "pagesDatasetsGrantImplementation.hgiSubtitle",
+          "Cumulative disbursements by disbursement area"
+        )}
+        extraDropdown={cycleDropdown}
+        dropdownSelected={dropdownSelected}
+        dropdownItems={dropdownItemsHolisticGrantInvestments}
+        handleDropdownChange={handleDropdownSelectionChange}
+        disableCollapse={
+          dropdownSelected === dropdownItemsHolisticGrantInvestments[1].value
+        }
+        handleResetFilters={() => {}}
+        filterGroups={[]}
+        appliedFilters={[]}
+        appliedFiltersData={defaultAppliedFilters}
+        removeFilter={() => {}}
+        toggleFilter={() => {}}
+        latestUpdate={latestUpdateDate}
+        infoType="financials"
+      >
+        {chartContent}
+      </DatasetChartBlock>
+    </Box>
+  );
+};
diff --git a/src/app/pages/datasets/grant-implementation/data.tsx b/src/app/pages/datasets/grant-implementation/data.tsx
index 0ee8e704a..09eb8dca6 100644
--- a/src/app/pages/datasets/grant-implementation/data.tsx
+++ b/src/app/pages/datasets/grant-implementation/data.tsx
@@ -45,6 +45,15 @@ export const dropdownItemsDisbursements = [
   { label: "Table View", value: "Table View", icon: <TableIcon /> },
 ];
 
+export const dropdownItemsHolisticGrantInvestments = [
+  {
+    label: "Sankey Chart",
+    value: "Sankey Chart",
+    icon: <SankeyChartIcon />,
+  },
+  { label: "Table View", value: "Table View", icon: <TableIcon /> },
+];
+
 export const dropdownItemsBudgets = [
   {
     label: "Sankey Chart",
diff --git a/src/app/pages/datasets/grant-implementation/index.tsx b/src/app/pages/datasets/grant-implementation/index.tsx
index fe4feeabe..b05095cae 100644
--- a/src/app/pages/datasets/grant-implementation/index.tsx
+++ b/src/app/pages/datasets/grant-implementation/index.tsx
@@ -12,6 +12,7 @@ import { FilterGroupModel } from "app/components/filters/list/data";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import { GrantImplementationPageBlock1 } from "app/pages/datasets/grant-implementation/blocks/block-1";
 import { GrantImplementationPageBlock2 } from "app/pages/datasets/grant-implementation/blocks/block-2";
+import { GrantImplementationPageBlock21 } from "app/pages/datasets/grant-implementation/blocks/block-2-1";
 import { GrantImplementationPageBlock3 } from "app/pages/datasets/grant-implementation/blocks/block-3";
 import { GrantImplementationPageBlock4 } from "app/pages/datasets/grant-implementation/blocks/block-4";
 import { GrantImplementationPageBlock5 } from "app/pages/datasets/grant-implementation/blocks/block-5";
@@ -334,6 +335,8 @@ export const GrantImplementationPage: React.FC = () => {
           filterGroups={filterGroupsDisbursements}
         />
         <FullWidthDivider />
+        <GrantImplementationPageBlock21 />
+        <FullWidthDivider />
         <GrantImplementationPageBlock3
           filterString={filterString}
           filterGroups={filterGroups}
diff --git a/src/app/state/api/action-reducers/financial-insights/hgi-sankey.ts b/src/app/state/api/action-reducers/financial-insights/hgi-sankey.ts
new file mode 100644
index 000000000..9fae7f615
--- /dev/null
+++ b/src/app/state/api/action-reducers/financial-insights/hgi-sankey.ts
@@ -0,0 +1,6 @@
+import { APIModel } from "app/state/api";
+import { ApiCallModel } from "app/state/api/interfaces";
+
+export const FinancialInsightsHGISankey: ApiCallModel = {
+  ...APIModel(`${process.env.REACT_APP_API}/disbursements/hgi/sankey`),
+};
diff --git a/src/app/state/api/action-reducers/financial-insights/hgi-table.ts b/src/app/state/api/action-reducers/financial-insights/hgi-table.ts
new file mode 100644
index 000000000..8fd955054
--- /dev/null
+++ b/src/app/state/api/action-reducers/financial-insights/hgi-table.ts
@@ -0,0 +1,6 @@
+import { APIModel } from "app/state/api";
+import { ApiCallModel } from "app/state/api/interfaces";
+
+export const FinancialInsightsHGITable: ApiCallModel = {
+  ...APIModel(`${process.env.REACT_APP_API}/disbursements/hgi/table`),
+};
diff --git a/src/app/state/api/action-reducers/sync/filters/index.ts b/src/app/state/api/action-reducers/sync/filters/index.ts
index ba1fe7cb5..3356c373f 100644
--- a/src/app/state/api/action-reducers/sync/filters/index.ts
+++ b/src/app/state/api/action-reducers/sync/filters/index.ts
@@ -1,6 +1,5 @@
 /* eslint-disable no-param-reassign */
 import { action, Action } from "easy-peasy";
-import { FilterModel } from "app/components/filters/list/data";
 
 export const defaultAppliedFilters: AppliedFiltersModel = {
   locations: [] as string[],
diff --git a/src/app/state/api/interfaces/index.ts b/src/app/state/api/interfaces/index.ts
index 4a411a021..f39f1a590 100644
--- a/src/app/state/api/interfaces/index.ts
+++ b/src/app/state/api/interfaces/index.ts
@@ -135,6 +135,8 @@ export interface StoreModel {
   FinancialInsightsDisbursementsBarChart: ApiCallModel;
   FinancialInsightsDisbursementsLineChart: ApiCallModel;
   FinancialInsightsDisbursementsTable: ApiCallModel;
+  FinancialInsightsHGISankey: ApiCallModel;
+  FinancialInsightsHGITable: ApiCallModel;
   FinancialInsightsBudgetBreakdown: ApiCallModel;
   FinancialInsightsBudgetUtilisation: ApiCallModel;
   FinancialInsightsCountryAbsorption: ApiCallModel;
diff --git a/src/app/state/store/index.ts b/src/app/state/store/index.ts
index 611ab4e00..fb1f152d3 100644
--- a/src/app/state/store/index.ts
+++ b/src/app/state/store/index.ts
@@ -110,7 +110,7 @@ import pagesDatasets, {
   pagesDatasetsGrantImplementation,
   pagesDatasetsResourceMobilization,
 } from "app/state/api/action-reducers/cms/pagesDatasets";
-import pagesGeography from "../api/action-reducers/cms/pagesGeography";
+import pagesGeography from "app/state/api/action-reducers/cms/pagesGeography";
 import pagesGrantDetail, {
   pagesGrantDocuments,
   pagesGrantGrantImplementation,
@@ -127,7 +127,9 @@ import pagesLocation, {
   pagesLocationResults,
 } from "app/state/api/action-reducers/cms/pagesLocation";
 import general from "app/state/api/action-reducers/cms/general";
-import { DatasetsLatestUpdate } from "../api/action-reducers/latest-update";
+import { FinancialInsightsHGISankey } from "app/state/api/action-reducers/financial-insights/hgi-sankey";
+import { FinancialInsightsHGITable } from "app/state/api/action-reducers/financial-insights/hgi-table";
+import { DatasetsLatestUpdate } from "app/state/api/action-reducers/latest-update";
 
 const storeContent: StoreModel = {
   // homepage
@@ -169,6 +171,8 @@ const storeContent: StoreModel = {
   FinancialInsightsDisbursementsTable: persist(
     FinancialInsightsDisbursementsTable
   ),
+  FinancialInsightsHGISankey: persist(FinancialInsightsHGISankey),
+  FinancialInsightsHGITable: persist(FinancialInsightsHGITable),
   FinancialInsightsBudgetBreakdown: persist(FinancialInsightsBudgetBreakdown),
   FinancialInsightsBudgetUtilisation: persist(
     FinancialInsightsBudgetUtilisation