diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8aba717..72e4718 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [1.4.0] - 2024-11-26
+
+### Added
+- Add selector to the EQIP and CSO total page for users to select the program and get the total amount of the selected programs in both the map and the table [#329](https://github.com/policy-design-lab/pdl-frontend/issues/329) 
+- Add table column pagination to the EQIP and CSO total page to allow users to navigate through the table columns [#331](https://github.com/policy-design-lab/pdl-frontend/issues/331) 
+
 ## [1.3.0] - 2024-11-04
 
 ### Changed
@@ -304,6 +310,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Map data json [#12](https://github.com/policy-design-lab/pdl-frontend/issues/12)
 - Final landing page changes for initial milestone [#15](https://github.com/policy-design-lab/pdl-frontend/issues/15)
 
+[1.4.0]: https://github.com/policy-design-lab/pdl-frontend/compare/1.3.0...1.4.0
 [1.3.0]: https://github.com/policy-design-lab/pdl-frontend/compare/1.2.0...1.3.0
 [1.2.0]: https://github.com/policy-design-lab/pdl-frontend/compare/1.1.0...1.2.0
 [1.1.0]: https://github.com/policy-design-lab/pdl-frontend/compare/1.0.5...1.1.0
diff --git a/package-lock.json b/package-lock.json
index 6ab294c..1d86614 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "policy-design-lab",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
diff --git a/package.json b/package.json
index 7f9923a..61b4be5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "policy-design-lab",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "the front end of policy design lab",
   "repository": "https://github.com/policy-design-lab/pdl-frontend",
   "main": "src/app.tsx",
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 7d294d2..3bee376 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -75,6 +75,7 @@ export default function NavBar({
                 <AppBar
                     variant="outlined"
                     component="nav"
+                    elevation={0}
                     sx={{ position: "relative", border: "1px solid transparent" }}
                 >
                     <Toolbar>
diff --git a/src/components/SemiDonutChart.tsx b/src/components/SemiDonutChart.tsx
index 7f58d40..9e1471e 100644
--- a/src/components/SemiDonutChart.tsx
+++ b/src/components/SemiDonutChart.tsx
@@ -74,7 +74,7 @@ export default function SemiDonutChart({ data, label1, label2 }: any): JSX.Eleme
                     />
                     <Label value={label2} position="center" dy={-15} />
                     {data.map((entry) => (
-                        <Cell key={entry.id} fill={entry.color} />
+                        <Cell key={entry.color} fill={entry.color} />
                     ))}
                 </Pie>
                 <Pie
@@ -90,7 +90,7 @@ export default function SemiDonutChart({ data, label1, label2 }: any): JSX.Eleme
                     label={renderCustomizedLabel2}
                 >
                     {data.map((entry) => (
-                        <Cell key={entry.id} fillOpacity={0} />
+                        <Cell key={entry.color} fillOpacity={0} />
                     ))}
                 </Pie>
                 <Tooltip
diff --git a/src/components/csp/CSPTotalMap.tsx b/src/components/csp/CSPTotalMap.tsx
deleted file mode 100644
index 067ca3e..0000000
--- a/src/components/csp/CSPTotalMap.tsx
+++ /dev/null
@@ -1,235 +0,0 @@
-import React, { useState } from "react";
-import { geoCentroid } from "d3-geo";
-import { ComposableMap, Geographies, Geography, Marker, Annotation } from "react-simple-maps";
-import ReactTooltip from "react-tooltip";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import * as d3 from "d3";
-import PropTypes from "prop-types";
-import { useStyles, tooltipBkgColor, topTipStyle } from "../shared/MapTooltip";
-import "../../styles/map.css";
-import legendConfig from "../../utils/legendConfig.json";
-import DrawLegend from "../shared/DrawLegend";
-import { ShortFormat } from "../shared/ConvertionFormats";
-
-const geoUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";
-
-const offsets = {
-    VT: [50, -8],
-    NH: [34, 2],
-    MA: [30, -1],
-    RI: [28, 2],
-    CT: [35, 10],
-    NJ: [34, 1],
-    DE: [33, 0],
-    MD: [47, 10],
-    DC: [49, 21]
-};
-
-const MapChart = (props) => {
-    const { setReactTooltipContent, allStates, statePerformance, colorScale, stateCodes, year } = props;
-    const classes = useStyles();
-    return (
-        <div data-tip="">
-            {allStates.length > 0 && statePerformance[year] !== undefined ? (
-                <ComposableMap projection="geoAlbersUsa">
-                    <Geographies geography={geoUrl}>
-                        {({ geographies }) => (
-                            <>
-                                {geographies.map((geo) => {
-                                    const record = statePerformance[year].filter(
-                                        (v) => stateCodes[v.state] === geo.properties.name
-                                    )[0];
-                                    if (record === undefined || record.length === 0) {
-                                        return null;
-                                    }
-                                    const totalPaymentInDollars = record.totalPaymentInDollars;
-                                    const totalPaymentInPercentageNationwide =
-                                        record.totalPaymentInPercentageNationwide;
-                                    const hoverContent = (
-                                        <div className="map_tooltip">
-                                            <div className={classes.tooltip_header}>
-                                                <b>{geo.properties.name}</b>
-                                            </div>
-                                            <table className={classes.tooltip_table}>
-                                                <tbody key={geo.properties.name}>
-                                                    <tr style={topTipStyle}>
-                                                        <td className={classes.tooltip_topcell_left}>Benefits:</td>
-                                                        <td className={classes.tooltip_topcell_right}>
-                                                            ${ShortFormat(totalPaymentInDollars, undefined, 2)}
-                                                        </td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td className={classes.tooltip_regularcell_left}>
-                                                            PCT. Nationwide:
-                                                        </td>
-                                                        <td className={classes.tooltip_regularcell_right}>
-                                                            {totalPaymentInPercentageNationwide
-                                                                ? `${totalPaymentInPercentageNationwide} %`
-                                                                : "0%"}
-                                                        </td>
-                                                    </tr>
-                                                </tbody>
-                                            </table>
-                                        </div>
-                                    );
-                                    const fillColour = () => {
-                                        if (totalPaymentInDollars) {
-                                            if (totalPaymentInDollars !== 0) return colorScale(totalPaymentInDollars);
-                                            return "#D2D2D2";
-                                        }
-                                        return "#D2D2D2";
-                                    };
-                                    return (
-                                        <Geography
-                                            key={geo.rsmKey}
-                                            geography={geo}
-                                            onMouseEnter={() => {
-                                                setReactTooltipContent(hoverContent);
-                                            }}
-                                            onMouseLeave={() => {
-                                                setReactTooltipContent("");
-                                            }}
-                                            fill={fillColour()}
-                                            stroke="#FFF"
-                                            style={{
-                                                default: { stroke: "#FFFFFF", strokeWidth: 0.75, outline: "none" },
-                                                hover: {
-                                                    stroke: "#232323",
-                                                    strokeWidth: 2,
-                                                    outline: "none"
-                                                },
-                                                pressed: {
-                                                    fill: "#345feb",
-                                                    outline: "none"
-                                                }
-                                            }}
-                                        />
-                                    );
-                                })}
-                                {geographies.map((geo) => {
-                                    const centroid = geoCentroid(geo);
-                                    const cur = allStates.find((s) => s.val === geo.id);
-                                    return (
-                                        <g key={`${geo.rsmKey}-name`}>
-                                            {cur &&
-                                                centroid[0] > -160 &&
-                                                centroid[0] < -67 &&
-                                                (Object.keys(offsets).indexOf(cur.id) === -1 ? (
-                                                    <Marker coordinates={centroid}>
-                                                        <text y="2" fontSize={14} textAnchor="middle">
-                                                            {cur.id}
-                                                        </text>
-                                                    </Marker>
-                                                ) : (
-                                                    <Annotation
-                                                        subject={centroid}
-                                                        dx={offsets[cur.id][0]}
-                                                        dy={offsets[cur.id][1]}
-                                                    >
-                                                        <text x={4} fontSize={14} alignmentBaseline="middle">
-                                                            {cur.id}
-                                                        </text>
-                                                    </Annotation>
-                                                ))}
-                                        </g>
-                                    );
-                                })}
-                            </>
-                        )}
-                    </Geographies>
-                </ComposableMap>
-            ) : (
-                <Box display="flex" justifyContent="center" sx={{ pt: 1 }}>
-                    <h1>Loading Map Data...</h1>
-                </Box>
-            )}
-        </div>
-    );
-};
-
-MapChart.propTypes = {
-    setReactTooltipContent: PropTypes.func
-};
-
-const CSPTotalMap = ({
-    statePerformance,
-    allStates,
-    year,
-    stateCodes
-}: {
-    statePerformance: any;
-    allStates: any;
-    year: string;
-    stateCodes: any;
-}): JSX.Element => {
-    const quantizeArray: number[] = [];
-    const category = "Total CSP";
-    statePerformance[year].forEach((value) => quantizeArray.push(value.totalPaymentInDollars));
-    const maxValue = Math.max(...quantizeArray);
-    const mapColor = ["#F0F9E8", "#BAE4BC", "#7BCCC4", "#43A2CA", "#0868AC"];
-    const customScale = legendConfig[category];
-    const colorScale = d3.scaleThreshold(customScale, mapColor);
-    const [content, setContent] = useState("");
-
-    const classes = useStyles();
-    return (
-        <div>
-            <div>
-                <Box display="flex" justifyContent="center" sx={{ pt: 24 }}>
-                    {maxValue !== 0 ? (
-                        <DrawLegend
-                            colorScale={colorScale}
-                            title={titleElement(category, year)}
-                            programData={quantizeArray}
-                            prepColor={mapColor}
-                            initRatioLarge={0.6}
-                            initRatioSmall={0.5}
-                            isRatio={false}
-                            notDollar={false}
-                            emptyState={[]}
-                        />
-                    ) : (
-                        <div>
-                            {titleElement(category, year)}
-                            <Box display="flex" justifyContent="center">
-                                <Typography sx={{ color: "#CCC", fontWeight: 700 }}>
-                                    {category} data in {year} is unavailable for all states.
-                                </Typography>
-                            </Box>
-                        </div>
-                    )}
-                </Box>
-
-                <MapChart
-                    setReactTooltipContent={setContent}
-                    maxValue={maxValue}
-                    statePerformance={statePerformance}
-                    allStates={allStates}
-                    colorScale={colorScale}
-                    stateCodes={stateCodes}
-                    year={year}
-                />
-
-                <div className="tooltip-container">
-                    <ReactTooltip className={`${classes.customized_tooltip} tooltip`} backgroundColor={tooltipBkgColor}>
-                        {content}
-                    </ReactTooltip>
-                </div>
-            </div>
-        </div>
-    );
-};
-const titleElement = (attribute, year): JSX.Element => {
-    return (
-        <Box>
-            <Typography noWrap variant="h6">
-                <strong>{attribute}</strong> Benefits from <strong>{year}</strong>
-            </Typography>{" "}
-            <Typography noWrap style={{ fontSize: "0.5em", color: "#AAA", textAlign: "center" }}>
-                <i>In any state that appears in grey, there is no available data</i>
-            </Typography>
-        </Box>
-    );
-};
-export default CSPTotalMap;
diff --git a/src/components/csp/CSPTotalTable.tsx b/src/components/csp/CSPTotalTable.tsx
deleted file mode 100644
index ae1571b..0000000
--- a/src/components/csp/CSPTotalTable.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { useTable, useSortBy } from "react-table";
-import SwapVertIcon from "@mui/icons-material/SwapVert";
-import Box from "@mui/material/Box";
-import "../../styles/table.css";
-import { compareWithDollarSign, compareWithPercentSign } from "../shared/TableCompareFunctions";
-
-const Styles = styled.div`
-    padding: 1rem;
-
-    table {
-        border-spacing: 0;
-        border: 1px solid #e4ebe7;
-        border-left: none;
-        border-right: none;
-
-        tr {
-            :last-child {
-                td {
-                    border-bottom: 0;
-                }
-            }
-        }
-
-        th {
-            background-color: #f1f1f1;
-            padding: 1rem;
-        }
-
-        td {
-            margin: 0;
-            padding: 1rem;
-            padding-left: 5rem;
-            padding-right: 5rem;
-            border-bottom: 1px solid #e4ebe7;
-            border-right: none;
-
-            :last-child {
-                border-right: 0;
-            }
-        }
-    }
-`;
-
-// eslint-disable-next-line
-function Table({ columns, data }: { columns: any; data: any }) {
-    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
-        {
-            columns,
-            data
-        },
-        useSortBy
-    );
-
-    const firstPageRows = rows.slice(0, 50);
-
-    return (
-        <>
-            <table {...getTableProps()}>
-                <thead>
-                    {headerGroups.map((headerGroup) => (
-                        <tr key={headerGroup.id} {...headerGroup.getHeaderGroupProps()}>
-                            {headerGroup.headers.map((column) => (
-                                // Add the sorting props to control sorting.
-                                <th
-                                    key={column.id}
-                                    {...column.getHeaderProps(column.getSortByToggleProps())}
-                                    {...column.getHeaderProps({
-                                        style: {
-                                            paddingLeft: column.paddingLeft,
-                                            paddingRight: column.paddingRight
-                                        }
-                                    })}
-                                >
-                                    <Box
-                                        sx={{
-                                            display: "flex",
-                                            flexDirection: "horizontal",
-                                            alignItems: "center"
-                                        }}
-                                    >
-                                        {column.render("Header")}
-                                        <div>
-                                            {(() => {
-                                                if (!column.isSorted)
-                                                    return (
-                                                        <Box sx={{ ml: 1 }}>
-                                                            <SwapVertIcon />
-                                                        </Box>
-                                                    );
-                                                if (column.isSortedDesc) return <Box sx={{ ml: 1 }}>{"\u{25BC}"}</Box>;
-                                                return <Box sx={{ ml: 1 }}>{"\u{25B2}"}</Box>;
-                                            })()}
-                                        </div>
-                                    </Box>
-                                </th>
-                            ))}
-                        </tr>
-                    ))}
-                </thead>
-                <tbody {...getTableBodyProps()}>
-                    {
-                        // eslint-disable-next-line
-                        firstPageRows.map((row, i) => {
-                            prepareRow(row);
-                            return (
-                                <tr key={row.id} {...row.getRowProps()}>
-                                    {row.cells.map((cell) => {
-                                        return (
-                                            <td key={cell.id} {...cell.getCellProps()}>
-                                                {cell.render("Cell")}
-                                            </td>
-                                        );
-                                    })}
-                                </tr>
-                            );
-                        })
-                    }
-                </tbody>
-            </table>
-            <br />
-            <div>
-                Showing the first {rows.length} results of {rows.length} rows
-            </div>
-        </>
-    );
-}
-
-function App({
-    statePerformance,
-    year,
-    stateCodes
-}: {
-    statePerformance: any;
-    year: string;
-    stateCodes: any;
-}): JSX.Element {
-    const cspTableData: any[] = [];
-
-    // eslint-disable-next-line no-restricted-syntax
-    statePerformance[year].forEach((value) => {
-        const newRecord = () => {
-            let stateName = "";
-            stateCodes.forEach((sValue) => {
-                if (sValue.code.toUpperCase() === value.state.toUpperCase()) {
-                    stateName = sValue.name;
-                }
-            });
-            return {
-                state: stateName,
-                cspBenefit: `$${value.totalPaymentInDollars
-                    .toLocaleString(undefined, { minimumFractionDigits: 2 })
-                    .toString()}`,
-                percentage: `${value.totalPaymentInPercentageNationwide.toString()}%`
-            };
-        };
-        cspTableData.push(newRecord());
-    });
-
-    const columns = React.useMemo(
-        () => [
-            {
-                Header: <Box className="tableHeader">STATES</Box>,
-                accessor: "state",
-                paddingLeft: "5rem",
-                paddingRight: "32rem"
-            },
-            {
-                Header: (
-                    <Box
-                        className="tableHeader"
-                        sx={{
-                            maxWidth: 240,
-                            pl: 9,
-                            display: "flex",
-                            justifyContent: "center"
-                        }}
-                    >
-                        CSP BENEFITS
-                    </Box>
-                ),
-                accessor: "cspBenefit",
-                sortType: compareWithDollarSign,
-                Cell: function styleCells(row) {
-                    return <div style={{ textAlign: "right" }}>{row.value}</div>;
-                }
-            },
-            {
-                Header: <Box className="tableHeader">PCT. NATIONWIDE</Box>,
-                accessor: "percentage",
-                sortType: compareWithPercentSign,
-                Cell: function styleCells(row) {
-                    return <div style={{ textAlign: "right" }}>{row.value}</div>;
-                }
-            }
-        ],
-        []
-    );
-
-    return (
-        <Box display="flex" justifyContent="center">
-            <Styles>
-                <Table columns={columns} data={cspTableData.filter((obj) => Object.keys(obj).length > 0)} />
-            </Styles>
-        </Box>
-    );
-}
-
-export default App;
diff --git a/src/components/eqip/EQIPTotalMap.tsx b/src/components/eqip/EQIPTotalMap.tsx
deleted file mode 100644
index a4de1ff..0000000
--- a/src/components/eqip/EQIPTotalMap.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import React, { useState } from "react";
-import { geoCentroid } from "d3-geo";
-import { ComposableMap, Geographies, Geography, Marker, Annotation } from "react-simple-maps";
-import ReactTooltip from "react-tooltip";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import * as d3 from "d3";
-import PropTypes from "prop-types";
-import { useStyles, tooltipBkgColor, topTipStyle } from "../shared/MapTooltip";
-import "../../styles/map.css";
-import legendConfig from "../../utils/legendConfig.json";
-import DrawLegend from "../shared/DrawLegend";
-import { ShortFormat } from "../shared/ConvertionFormats";
-
-const geoUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";
-
-const offsets = {
-    VT: [50, -8],
-    NH: [34, 2],
-    MA: [30, -1],
-    RI: [28, 2],
-    CT: [35, 10],
-    NJ: [34, 1],
-    DE: [33, 0],
-    MD: [47, 10],
-    DC: [49, 21]
-};
-
-const MapChart = ({ setReactTooltipContent, maxValue, allStates, statePerformance, year, stateCodes, colorScale }) => {
-    const classes = useStyles();
-    return (
-        <div data-tip="">
-            <ComposableMap projection="geoAlbersUsa">
-                <Geographies geography={geoUrl}>
-                    {({ geographies }) => (
-                        <>
-                            {geographies.map((geo) => {
-                                const record = statePerformance[year].filter(
-                                    (v) => stateCodes[v.state] === geo.properties.name
-                                )[0];
-                                if (record === undefined || record.length === 0) {
-                                    return null;
-                                }
-                                const totalPaymentInDollars = record.totalPaymentInDollars;
-                                const totalPaymentInPercentageNationwide = record.totalPaymentInPercentageNationwide;
-                                const hoverContent = (
-                                    <div className="map_tooltip">
-                                        <div className={classes.tooltip_header}>
-                                            <b>{geo.properties.name}</b>
-                                        </div>
-                                        <table className={classes.tooltip_table}>
-                                            <tbody key={geo.properties.name}>
-                                                <tr style={topTipStyle}>
-                                                    <td className={classes.tooltip_topcell_left}>Benefits:</td>
-                                                    <td className={classes.tooltip_topcell_right}>
-                                                        ${ShortFormat(totalPaymentInDollars, undefined, 2)}
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className={classes.tooltip_regularcell_left}>
-                                                        PCT. Nationwide:
-                                                    </td>
-                                                    <td className={classes.tooltip_regularcell_right}>
-                                                        {totalPaymentInPercentageNationwide
-                                                            ? `${totalPaymentInPercentageNationwide} %`
-                                                            : "0%"}
-                                                    </td>
-                                                </tr>
-                                            </tbody>
-                                        </table>
-                                    </div>
-                                );
-                                return (
-                                    <Geography
-                                        key={geo.rsmKey}
-                                        geography={geo}
-                                        onMouseEnter={() => {
-                                            setReactTooltipContent(hoverContent);
-                                        }}
-                                        onMouseLeave={() => {
-                                            setReactTooltipContent("");
-                                        }}
-                                        fill={colorScale(totalPaymentInDollars || { value: 0 }) || "#D2D2D2"}
-                                        stroke="#FFF"
-                                        style={{
-                                            default: { stroke: "#FFFFFF", strokeWidth: 0.75, outline: "none" },
-                                            hover: {
-                                                stroke: "#232323",
-                                                strokeWidth: 2,
-                                                outline: "none"
-                                            },
-                                            pressed: {
-                                                fill: "#345feb",
-                                                outline: "none"
-                                            }
-                                        }}
-                                    />
-                                );
-                            })}
-                            {geographies.map((geo) => {
-                                const centroid = geoCentroid(geo);
-                                const cur = allStates.find((s) => s.val === geo.id);
-                                return (
-                                    <g key={`${geo.rsmKey}-name`}>
-                                        {cur &&
-                                            centroid[0] > -160 &&
-                                            centroid[0] < -67 &&
-                                            (Object.keys(offsets).indexOf(cur.id) === -1 ? (
-                                                <Marker coordinates={centroid}>
-                                                    <text y="2" fontSize={14} textAnchor="middle">
-                                                        {cur.id}
-                                                    </text>
-                                                </Marker>
-                                            ) : (
-                                                <Annotation
-                                                    subject={centroid}
-                                                    dx={offsets[cur.id][0]}
-                                                    dy={offsets[cur.id][1]}
-                                                >
-                                                    <text x={4} fontSize={14} alignmentBaseline="middle">
-                                                        {cur.id}
-                                                    </text>
-                                                </Annotation>
-                                            ))}
-                                    </g>
-                                );
-                            })}
-                        </>
-                    )}
-                </Geographies>
-            </ComposableMap>
-        </div>
-    );
-};
-
-MapChart.propTypes = {
-    setReactTooltipContent: PropTypes.func,
-    maxValue: PropTypes.number
-};
-
-const EQIPTotalMap = ({
-    statePerformance,
-    allStates,
-    year,
-    stateCodes
-}: {
-    statePerformance: any;
-    allStates: any;
-    year: string;
-    stateCodes: any;
-}): JSX.Element => {
-    const quantizeArray: number[] = [];
-    const category = "Total EQIP";
-    statePerformance[year].forEach((value) => quantizeArray.push(value.totalPaymentInDollars));
-    const maxValue = Math.max(...quantizeArray);
-    const mapColor = ["#F0F9E8", "#BAE4BC", "#7BCCC4", "#43A2CA", "#0868AC"];
-    const customScale = legendConfig[category];
-    const colorScale = d3.scaleThreshold(customScale, mapColor);
-    const [content, setContent] = useState("");
-
-    const classes = useStyles();
-    return (
-        <div>
-            <Box display="flex" justifyContent="center" sx={{ pt: 24 }}>
-                {maxValue !== 0 ? (
-                    <DrawLegend
-                        colorScale={colorScale}
-                        title={titleElement(category, year)}
-                        programData={quantizeArray}
-                        prepColor={mapColor}
-                        initRatioLarge={0.6}
-                        initRatioSmall={0.5}
-                        isRatio={false}
-                        notDollar={false}
-                        emptyState={[]}
-                    />
-                ) : (
-                    <div>
-                        {titleElement(category, year)}
-                        <Box display="flex" justifyContent="center">
-                            <Typography sx={{ color: "#CCC", fontWeight: 700 }}>
-                                {category} data in {year} is unavailable for all states.
-                            </Typography>
-                        </Box>
-                    </div>
-                )}
-            </Box>
-            <MapChart
-                setReactTooltipContent={setContent}
-                maxValue={maxValue}
-                allStates={allStates}
-                statePerformance={statePerformance}
-                colorScale={colorScale}
-                year={year}
-                stateCodes={stateCodes}
-            />
-            <div className="tooltip-container">
-                <ReactTooltip className={`${classes.customized_tooltip} tooltip`} backgroundColor={tooltipBkgColor}>
-                    {content}
-                </ReactTooltip>
-            </div>
-        </div>
-    );
-};
-const titleElement = (attribute, year): JSX.Element => {
-    return (
-        <Box>
-            <Typography noWrap variant="h6">
-                <strong>{attribute}</strong> Benefits from <strong>{year}</strong>
-            </Typography>{" "}
-            <Typography noWrap style={{ fontSize: "0.5em", color: "#AAA", textAlign: "center" }}>
-                <i>In any state that appears in grey, there is no available data</i>
-            </Typography>
-        </Box>
-    );
-};
-export default EQIPTotalMap;
diff --git a/src/components/eqip/EQIPTotalTable.tsx b/src/components/eqip/EQIPTotalTable.tsx
deleted file mode 100644
index b9863c7..0000000
--- a/src/components/eqip/EQIPTotalTable.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { useTable, useSortBy } from "react-table";
-import SwapVertIcon from "@mui/icons-material/SwapVert";
-import Box from "@mui/material/Box";
-import "../../styles/table.css";
-import { compareWithDollarSign, compareWithPercentSign } from "../shared/TableCompareFunctions";
-
-const Styles = styled.div`
-    padding: 1rem;
-
-    table {
-        border-spacing: 0;
-        border: 1px solid #e4ebe7;
-        border-left: none;
-        border-right: none;
-
-        tr {
-            :last-child {
-                td {
-                    border-bottom: 0;
-                }
-            }
-        }
-
-        th {
-            background-color: #f1f1f1;
-            padding: 1rem;
-        }
-
-        td {
-            margin: 0;
-            padding: 1rem;
-            padding-left: 5rem;
-            padding-right: 5rem;
-            border-bottom: 1px solid #e4ebe7;
-            border-right: none;
-
-            :last-child {
-                border-right: 0;
-            }
-        }
-    }
-`;
-
-// eslint-disable-next-line
-function Table({ columns, data }: { columns: any; data: any }) {
-    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
-        {
-            columns,
-            data
-        },
-        useSortBy
-    );
-
-    const firstPageRows = rows.slice(0, 50);
-
-    return (
-        <>
-            <table {...getTableProps()}>
-                <thead>
-                    {headerGroups.map((headerGroup) => (
-                        <tr key={headerGroup.id} {...headerGroup.getHeaderGroupProps()}>
-                            {headerGroup.headers.map((column) => (
-                                // Add the sorting props to control sorting.
-                                <th
-                                    key={column.id}
-                                    {...column.getHeaderProps(column.getSortByToggleProps())}
-                                    {...column.getHeaderProps({
-                                        style: {
-                                            paddingLeft: column.paddingLeft,
-                                            paddingRight: column.paddingRight
-                                        }
-                                    })}
-                                >
-                                    <Box
-                                        sx={{
-                                            display: "flex",
-                                            flexDirection: "horizontal",
-                                            alignItems: "center"
-                                        }}
-                                    >
-                                        {column.render("Header")}
-                                        <div>
-                                            {(() => {
-                                                if (!column.isSorted)
-                                                    return (
-                                                        <Box sx={{ ml: 1 }}>
-                                                            <SwapVertIcon />
-                                                        </Box>
-                                                    );
-                                                if (column.isSortedDesc) return <Box sx={{ ml: 1 }}>{"\u{25BC}"}</Box>;
-                                                return <Box sx={{ ml: 1 }}>{"\u{25B2}"}</Box>;
-                                            })()}
-                                        </div>
-                                    </Box>
-                                </th>
-                            ))}
-                        </tr>
-                    ))}
-                </thead>
-                <tbody {...getTableBodyProps()}>
-                    {
-                        // eslint-disable-next-line
-                        firstPageRows.map((row, i) => {
-                            prepareRow(row);
-                            return (
-                                <tr key={row.id} {...row.getRowProps()}>
-                                    {row.cells.map((cell) => {
-                                        return (
-                                            <td key={cell.id} {...cell.getCellProps()}>
-                                                {cell.render("Cell")}
-                                            </td>
-                                        );
-                                    })}
-                                </tr>
-                            );
-                        })
-                    }
-                </tbody>
-            </table>
-            <br />
-            <div>
-                Showing the first {rows.length} results of {rows.length} rows
-            </div>
-        </>
-    );
-}
-
-function App({
-    statePerformance,
-    year,
-    stateCodes
-}: {
-    statePerformance: any;
-    year: string;
-    stateCodes: any;
-}): JSX.Element {
-    const eqipTableData: any[] = [];
-
-    // eslint-disable-next-line no-restricted-syntax
-    statePerformance[year].forEach((value) => {
-        const newRecord = () => {
-            let stateName = "";
-            stateCodes.forEach((sValue) => {
-                if (sValue.code.toUpperCase() === value.state.toUpperCase()) {
-                    stateName = sValue.name;
-                }
-            });
-            return {
-                state: stateName,
-                eqipBenefit: `$${value.totalPaymentInDollars
-                    .toLocaleString(undefined, { minimumFractionDigits: 2 })
-                    .toString()}`,
-                percentage: `${value.totalPaymentInPercentageNationwide.toString()}%`
-            };
-        };
-        eqipTableData.push(newRecord());
-    });
-
-    const columns = React.useMemo(
-        () => [
-            {
-                Header: <Box className="tableHeader">STATES</Box>,
-                accessor: "state",
-                paddingLeft: "5rem",
-                paddingRight: "32rem"
-            },
-            {
-                Header: (
-                    <Box
-                        className="tableHeader"
-                        sx={{
-                            maxWidth: 240,
-                            pl: 9,
-                            display: "flex",
-                            justifyContent: "center"
-                        }}
-                    >
-                        EQIP BENEFITS
-                    </Box>
-                ),
-                accessor: "eqipBenefit",
-                sortType: compareWithDollarSign,
-                Cell: function styleCells(row) {
-                    return <div style={{ textAlign: "right" }}>{row.value}</div>;
-                }
-            },
-            {
-                Header: <Box className="tableHeader">PCT. NATIONWIDE</Box>,
-                accessor: "percentage",
-                sortType: compareWithPercentSign,
-                Cell: function styleCells(row) {
-                    return <div style={{ textAlign: "right" }}>{row.value}</div>;
-                }
-            }
-        ],
-        []
-    );
-
-    return (
-        <Box display="flex" justifyContent="center">
-            <Styles>
-                <Table columns={columns} data={eqipTableData} />
-            </Styles>
-        </Box>
-    );
-}
-
-export default App;
diff --git a/src/components/ira/IRADollarTable.tsx b/src/components/ira/IRADollarTable.tsx
index f187cc2..1d80b8f 100644
--- a/src/components/ira/IRADollarTable.tsx
+++ b/src/components/ira/IRADollarTable.tsx
@@ -4,13 +4,7 @@ import { CSVLink } from "react-csv";
 import { useTable, useSortBy, usePagination } from "react-table";
 import SwapVertIcon from "@mui/icons-material/SwapVert";
 import { Grid, TableContainer, Typography, Box, Button } from "@mui/material";
-import {
-    compareWithNumber,
-    compareWithAlphabetic,
-    compareWithDollarSign,
-    compareWithPercentSign,
-    sortByDollars
-} from "../shared/TableCompareFunctions";
+import { compareWithNumber, compareWithAlphabetic, compareWithDollarSign } from "../shared/TableCompareFunctions";
 import "../../styles/table.css";
 import getCSVData from "../shared/getCSVData";
 
@@ -265,6 +259,17 @@ function IRADollarTable({
 // eslint-disable-next-line
 function Table({ columns, data, initialState }: { columns: any; data: any; initialState: any }) {
     const state = React.useMemo(() => initialState, []);
+    const [columnPage, setColumnPage] = React.useState(0);
+    const columnsPerPage = 6;
+    const visibleColumnIndices = React.useMemo(() => {
+        const startIndex = columnPage * columnsPerPage + 1;
+        const endIndex = Math.min(startIndex + columnsPerPage, columns.length);
+        return Array.from({ length: endIndex - startIndex }, (_, i) => i + startIndex);
+    }, [columnPage, columnsPerPage, columns.length]);
+    const totalColumnPages = Math.ceil((columns.length - 1) / columnsPerPage);
+    React.useEffect(() => {
+        setColumnPage(0);
+    }, [columns.length]);
     const {
         getTableProps,
         getTableBodyProps,
@@ -297,73 +302,151 @@ function Table({ columns, data, initialState }: { columns: any; data: any; initi
                     <CSVLink className="downloadbtn" filename="pdl-data.csv" data={getCSVData(headerGroups, data)}>
                         Export This Table to CSV
                     </CSVLink>
+                    <Box
+                        sx={{
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            marginBottom: 2
+                        }}
+                    >
+                        <button type="button" onClick={() => setColumnPage(0)} disabled={columnPage === 0}>
+                            {"<<"}
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => setColumnPage((prev) => Math.max(0, prev - 1))}
+                            disabled={columnPage === 0}
+                        >
+                            {"<"}
+                        </button>
+                        <span style={{ paddingLeft: 8 }}>
+                            Column Page
+                            <strong style={{ paddingRight: 8 }}>
+                                {columnPage + 1} of {totalColumnPages}
+                            </strong>
+                        </span>
+                        <button
+                            type="button"
+                            onClick={() => setColumnPage((prev) => Math.min(totalColumnPages - 1, prev + 1))}
+                            disabled={columnPage === totalColumnPages - 1}
+                        >
+                            {">"}
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => setColumnPage(totalColumnPages - 1)}
+                            disabled={columnPage === totalColumnPages - 1}
+                        >
+                            {">>"}
+                        </button>
+                    </Box>
 
                     <table {...getTableProps()} style={{ width: "100%", tableLayout: "fixed" }}>
                         <thead>
                             {headerGroups.map((headerGroup) => (
                                 <tr key={headerGroup.id} {...headerGroup.getHeaderGroupProps()}>
-                                    {headerGroup.headers.map((column) => (
-                                        <th
-                                            className={column.render("Header").replace(/\s/g, "")}
-                                            key={column.id}
-                                            {...column.getHeaderProps(column.getSortByToggleProps())}
-                                            {...column.getHeaderProps({
-                                                style: {
-                                                    paddingLeft: column.paddingLeft,
-                                                    paddingRight: column.paddingRight
-                                                }
-                                            })}
-                                        >
+                                    <th
+                                        {...headerGroup.headers[0].getHeaderProps(
+                                            headerGroup.headers[0].getSortByToggleProps()
+                                        )}
+                                        style={{
+                                            position: "sticky",
+                                            left: 0,
+                                            background: "rgba(241, 241, 241, 1)",
+                                            zIndex: 2
+                                        }}
+                                    >
+                                        {headerGroup.headers[0].render("Header")}
+                                        <span>
                                             {(() => {
-                                                const headerText = column.render("Header");
-                                                if (headerText.includes(":")) {
-                                                    const [beforeColon, afterColon] = headerText.split(":");
+                                                if (!headerGroup.headers[0].isSorted)
                                                     return (
-                                                        <>
-                                                            <div>
-                                                                <strong>{beforeColon}</strong>
-                                                            </div>
-                                                            <span>{afterColon.trim()}</span>
-                                                        </>
+                                                        <Box sx={{ ml: 1, display: "inline" }}>
+                                                            <SwapVertIcon />
+                                                        </Box>
                                                     );
-                                                }
-                                                return headerText;
+                                                if (headerGroup.headers[0].isSortedDesc)
+                                                    return <Box sx={{ ml: 1, display: "inline" }}>{"\u{25BC}"}</Box>;
+                                                return <Box sx={{ ml: 1, display: "inline" }}>{"\u{25B2}"}</Box>;
                                             })()}
-                                            <span>
+                                        </span>
+                                    </th>
+                                    {headerGroup.headers
+                                        .filter((_, index) => visibleColumnIndices.includes(index))
+                                        .map((column) => (
+                                            <th
+                                                className={column.render("Header").replace(/\s/g, "")}
+                                                key={column.id}
+                                                {...column.getHeaderProps(column.getSortByToggleProps())}
+                                            >
                                                 {(() => {
-                                                    if (!column.isSorted)
+                                                    const headerText = column.render("Header");
+                                                    if (headerText.includes(":")) {
+                                                        const [beforeColon, afterColon] = headerText.split(":");
                                                         return (
-                                                            <Box sx={{ ml: 1, display: "inline" }}>
-                                                                <SwapVertIcon />
-                                                            </Box>
+                                                            <>
+                                                                <div>
+                                                                    <strong>{beforeColon}</strong>
+                                                                </div>
+                                                                <span>{afterColon.trim()}</span>
+                                                            </>
                                                         );
-                                                    if (column.isSortedDesc)
+                                                    }
+                                                    return headerText;
+                                                })()}
+                                                <span>
+                                                    {(() => {
+                                                        if (!column.isSorted)
+                                                            return (
+                                                                <Box sx={{ ml: 1, display: "inline" }}>
+                                                                    <SwapVertIcon />
+                                                                </Box>
+                                                            );
+                                                        if (column.isSortedDesc)
+                                                            return (
+                                                                <Box sx={{ ml: 1, display: "inline" }}>
+                                                                    {"\u{25BC}"}
+                                                                </Box>
+                                                            );
                                                         return (
-                                                            <Box sx={{ ml: 1, display: "inline" }}>{"\u{25BC}"}</Box>
+                                                            <Box sx={{ ml: 1, display: "inline" }}>{"\u{25B2}"}</Box>
                                                         );
-                                                    return <Box sx={{ ml: 1, display: "inline" }}>{"\u{25B2}"}</Box>;
-                                                })()}
-                                            </span>
-                                        </th>
-                                    ))}
+                                                    })()}
+                                                </span>
+                                            </th>
+                                        ))}
                                 </tr>
                             ))}
                         </thead>
                         <tbody {...getTableBodyProps()}>
-                            {page.map((row, i) => {
+                            {page.map((row) => {
                                 prepareRow(row);
                                 return (
-                                    <tr key={row.id} {...row.getRowProps()}>
-                                        {row.cells.map((cell, j) => (
-                                            <td
-                                                className={`cell${j}`}
-                                                key={cell.id}
-                                                {...cell.getCellProps()}
-                                                style={{ width: "100%", whiteSpace: "nowrap" }}
-                                            >
-                                                {cell.render("Cell")}
-                                            </td>
-                                        ))}
+                                    <tr {...row.getRowProps()} key={row}>
+                                        <td
+                                            {...row.cells[0].getCellProps()}
+                                            style={{
+                                                position: "sticky",
+                                                left: 0,
+                                                background: "white",
+                                                zIndex: 1
+                                            }}
+                                        >
+                                            {row.cells[0].render("Cell")}
+                                        </td>
+                                        {row.cells
+                                            .filter((_, index) => visibleColumnIndices.includes(index))
+                                            .map((cell, j) => (
+                                                <td
+                                                    className={`cell${j + 1}`}
+                                                    key={cell.id}
+                                                    {...cell.getCellProps()}
+                                                    style={{ width: "100%", whiteSpace: "nowrap" }}
+                                                >
+                                                    {cell.render("Cell")}
+                                                </td>
+                                            ))}
                                     </tr>
                                 );
                             })}
diff --git a/src/components/ira/IRAPercentageTable.tsx b/src/components/ira/IRAPercentageTable.tsx
index 9e433ff..71dc86f 100644
--- a/src/components/ira/IRAPercentageTable.tsx
+++ b/src/components/ira/IRAPercentageTable.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { CSVLink } from "react-csv";
 import { useTable, useSortBy, usePagination } from "react-table";
 import SwapVertIcon from "@mui/icons-material/SwapVert";
-import { Grid, TableContainer, Typography, Box, Button } from "@mui/material";
+import { Grid, TableContainer, Typography, Box } from "@mui/material";
 import { compareWithAlphabetic, compareWithPercentSign } from "../shared/TableCompareFunctions";
 import "../../styles/table.css";
 import getCSVData from "../shared/getCSVData";
@@ -338,6 +338,17 @@ function IRAPercentageTable({
 // eslint-disable-next-line
 function Table({ columns, data, initialState }: { columns: any; data: any; initialState: any }) {
     const state = React.useMemo(() => initialState, []);
+    const [columnPage, setColumnPage] = React.useState(0);
+    const columnsPerPage = 6;
+    const visibleColumnIndices = React.useMemo(() => {
+        const startIndex = columnPage * columnsPerPage + 1;
+        const endIndex = Math.min(startIndex + columnsPerPage, columns.length);
+        return Array.from({ length: endIndex - startIndex }, (_, i) => i + startIndex);
+    }, [columnPage, columnsPerPage, columns.length]);
+    const totalColumnPages = Math.ceil((columns.length - 1) / columnsPerPage);
+    React.useEffect(() => {
+        setColumnPage(0);
+    }, [columns.length]);
     const {
         getTableProps,
         getTableBodyProps,
@@ -371,73 +382,152 @@ function Table({ columns, data, initialState }: { columns: any; data: any; initi
                     <CSVLink className="downloadbtn" filename="pdl-data.csv" data={getCSVData(headerGroups, data)}>
                         Export This Table to CSV
                     </CSVLink>
-
+                    <Box
+                        sx={{
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            marginBottom: 2
+                        }}
+                    >
+                        <button type="button" onClick={() => setColumnPage(0)} disabled={columnPage === 0}>
+                            {"<<"}
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => setColumnPage((prev) => Math.max(0, prev - 1))}
+                            disabled={columnPage === 0}
+                        >
+                            {"<"}
+                        </button>
+                        <span style={{ paddingLeft: 8 }}>
+                            Column Page
+                            <strong style={{ paddingRight: 8 }}>
+                                {columnPage + 1} of {totalColumnPages}
+                            </strong>
+                        </span>
+                        <button
+                            type="button"
+                            onClick={() => setColumnPage((prev) => Math.min(totalColumnPages - 1, prev + 1))}
+                            disabled={columnPage === totalColumnPages - 1}
+                        >
+                            {">"}
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => setColumnPage(totalColumnPages - 1)}
+                            disabled={columnPage === totalColumnPages - 1}
+                        >
+                            {">>"}
+                        </button>
+                    </Box>
                     <table {...getTableProps()} style={{ width: "100%", tableLayout: "fixed" }}>
                         <thead>
                             {headerGroups.map((headerGroup) => (
                                 <tr key={headerGroup.id} {...headerGroup.getHeaderGroupProps()}>
-                                    {headerGroup.headers.map((column) => (
-                                        <th
-                                            className={column.render("Header").replace(/\s/g, "")}
-                                            key={column.id}
-                                            {...column.getHeaderProps(column.getSortByToggleProps())}
-                                            {...column.getHeaderProps({
-                                                style: {
-                                                    paddingLeft: column.paddingLeft,
-                                                    paddingRight: column.paddingRight
-                                                }
-                                            })}
-                                        >
+                                    <th
+                                        {...headerGroup.headers[0].getHeaderProps(
+                                            headerGroup.headers[0].getSortByToggleProps()
+                                        )}
+                                        style={{
+                                            position: "sticky",
+                                            left: 0,
+                                            background: "rgba(241, 241, 241, 1)",
+                                            zIndex: 2
+                                        }}
+                                    >
+                                        {headerGroup.headers[0].render("Header")}
+                                        <span>
                                             {(() => {
-                                                const headerText = column.render("Header");
-                                                if (headerText.includes(":")) {
-                                                    const [beforeColon, afterColon] = headerText.split(":");
+                                                if (!headerGroup.headers[0].isSorted)
                                                     return (
-                                                        <>
-                                                            <div>
-                                                                <strong>{beforeColon}</strong>
-                                                            </div>
-                                                            <span>{afterColon.trim()}</span>
-                                                        </>
+                                                        <Box sx={{ ml: 1, display: "inline" }}>
+                                                            <SwapVertIcon />
+                                                        </Box>
                                                     );
-                                                }
-                                                return headerText;
+                                                if (headerGroup.headers[0].isSortedDesc)
+                                                    return <Box sx={{ ml: 1, display: "inline" }}>{"\u{25BC}"}</Box>;
+                                                return <Box sx={{ ml: 1, display: "inline" }}>{"\u{25B2}"}</Box>;
                                             })()}
-                                            <span>
+                                        </span>
+                                    </th>
+
+                                    {headerGroup.headers
+                                        .filter((_, index) => visibleColumnIndices.includes(index))
+                                        .map((column) => (
+                                            <th
+                                                className={column.render("Header").replace(/\s/g, "")}
+                                                key={column.id}
+                                                {...column.getHeaderProps(column.getSortByToggleProps())}
+                                            >
                                                 {(() => {
-                                                    if (!column.isSorted)
+                                                    const headerText = column.render("Header");
+                                                    if (headerText.includes(":")) {
+                                                        const [beforeColon, afterColon] = headerText.split(":");
                                                         return (
-                                                            <Box sx={{ ml: 1, display: "inline" }}>
-                                                                <SwapVertIcon />
-                                                            </Box>
+                                                            <>
+                                                                <div>
+                                                                    <strong>{beforeColon}</strong>
+                                                                </div>
+                                                                <span>{afterColon.trim()}</span>
+                                                            </>
                                                         );
-                                                    if (column.isSortedDesc)
+                                                    }
+                                                    return headerText;
+                                                })()}
+                                                <span>
+                                                    {(() => {
+                                                        if (!column.isSorted)
+                                                            return (
+                                                                <Box sx={{ ml: 1, display: "inline" }}>
+                                                                    <SwapVertIcon />
+                                                                </Box>
+                                                            );
+                                                        if (column.isSortedDesc)
+                                                            return (
+                                                                <Box sx={{ ml: 1, display: "inline" }}>
+                                                                    {"\u{25BC}"}
+                                                                </Box>
+                                                            );
                                                         return (
-                                                            <Box sx={{ ml: 1, display: "inline" }}>{"\u{25BC}"}</Box>
+                                                            <Box sx={{ ml: 1, display: "inline" }}>{"\u{25B2}"}</Box>
                                                         );
-                                                    return <Box sx={{ ml: 1, display: "inline" }}>{"\u{25B2}"}</Box>;
-                                                })()}
-                                            </span>
-                                        </th>
-                                    ))}
+                                                    })()}
+                                                </span>
+                                            </th>
+                                        ))}
                                 </tr>
                             ))}
                         </thead>
                         <tbody {...getTableBodyProps()}>
-                            {page.map((row, i) => {
+                            {page.map((row) => {
                                 prepareRow(row);
                                 return (
-                                    <tr key={row.id} {...row.getRowProps()}>
-                                        {row.cells.map((cell, j) => (
-                                            <td
-                                                className={`cell${j}`}
-                                                key={cell.id}
-                                                {...cell.getCellProps()}
-                                                style={{ width: "100%", whiteSpace: "nowrap" }}
-                                            >
-                                                {cell.render("Cell")}
-                                            </td>
-                                        ))}
+                                    <tr {...row.getRowProps()} key={row}>
+                                        <td
+                                            {...row.cells[0].getCellProps()}
+                                            style={{
+                                                position: "sticky",
+                                                left: 0,
+                                                background: "white",
+                                                zIndex: 1
+                                            }}
+                                        >
+                                            {row.cells[0].render("Cell")}
+                                        </td>
+
+                                        {row.cells
+                                            .filter((_, index) => visibleColumnIndices.includes(index))
+                                            .map((cell, j) => (
+                                                <td
+                                                    className={`cell${j + 1}`}
+                                                    key={cell.id}
+                                                    {...cell.getCellProps()}
+                                                    style={{ width: "100%", whiteSpace: "nowrap" }}
+                                                >
+                                                    {cell.render("Cell")}
+                                                </td>
+                                            ))}
                                     </tr>
                                 );
                             })}
diff --git a/src/components/ira/IRAPredictedDollarTable.tsx b/src/components/ira/IRAPredictedDollarTable.tsx
index 029bac4..8a128f3 100644
--- a/src/components/ira/IRAPredictedDollarTable.tsx
+++ b/src/components/ira/IRAPredictedDollarTable.tsx
@@ -1,16 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import { CSVLink } from "react-csv";
 import { useTable, useSortBy, usePagination } from "react-table";
 import SwapVertIcon from "@mui/icons-material/SwapVert";
 import { Grid, TableContainer, Typography, Box, Button } from "@mui/material";
-import {
-    compareWithNumber,
-    compareWithAlphabetic,
-    compareWithDollarSign,
-    compareWithPercentSign,
-    sortByDollars
-} from "../shared/TableCompareFunctions";
+import { compareWithAlphabetic, compareWithDollarSign } from "../shared/TableCompareFunctions";
 import "../../styles/table.css";
 import getCSVData from "../shared/getCSVData";
 
@@ -252,6 +246,17 @@ function IRAPredictedDollarTable({
 // eslint-disable-next-line
 function Table({ columns, data, initialState }: { columns: any; data: any; initialState: any }) {
     const state = React.useMemo(() => initialState, []);
+    const [columnPage, setColumnPage] = useState(0);
+    const columnsPerPage = 6;
+    const visibleColumnIndices = React.useMemo(() => {
+        const startIndex = columnPage * columnsPerPage + 1;
+        const endIndex = Math.min(startIndex + columnsPerPage, columns.length);
+        return Array.from({ length: endIndex - startIndex }, (_, i) => i + startIndex);
+    }, [columnPage, columnsPerPage, columns.length]);
+    const totalColumnPages = Math.ceil((columns.length - 1) / columnsPerPage);
+    React.useEffect(() => {
+        setColumnPage(0);
+    }, [columns.length]);
     const {
         getTableProps,
         getTableBodyProps,
@@ -284,73 +289,152 @@ function Table({ columns, data, initialState }: { columns: any; data: any; initi
                     <CSVLink className="downloadbtn" filename="pdl-data.csv" data={getCSVData(headerGroups, data)}>
                         Export This Table to CSV
                     </CSVLink>
-
+                    <Box
+                        sx={{
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            marginBottom: 2
+                        }}
+                    >
+                        <button type="button" onClick={() => setColumnPage(0)} disabled={columnPage === 0}>
+                            {"<<"}
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => setColumnPage((prev) => Math.max(0, prev - 1))}
+                            disabled={columnPage === 0}
+                        >
+                            {"<"}
+                        </button>
+                        <span style={{ paddingLeft: 8 }}>
+                            Column Page
+                            <strong style={{ paddingRight: 8 }}>
+                                {columnPage + 1} of {totalColumnPages}
+                            </strong>
+                        </span>
+                        <button
+                            type="button"
+                            onClick={() => setColumnPage((prev) => Math.min(totalColumnPages - 1, prev + 1))}
+                            disabled={columnPage === totalColumnPages - 1}
+                        >
+                            {">"}
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => setColumnPage(totalColumnPages - 1)}
+                            disabled={columnPage === totalColumnPages - 1}
+                        >
+                            {">>"}
+                        </button>
+                    </Box>
                     <table {...getTableProps()} style={{ width: "100%", tableLayout: "fixed" }}>
                         <thead>
                             {headerGroups.map((headerGroup) => (
                                 <tr key={headerGroup.id} {...headerGroup.getHeaderGroupProps()}>
-                                    {headerGroup.headers.map((column) => (
-                                        <th
-                                            className={column.render("Header").replace(/\s/g, "")}
-                                            key={column.id}
-                                            {...column.getHeaderProps(column.getSortByToggleProps())}
-                                            {...column.getHeaderProps({
-                                                style: {
-                                                    paddingLeft: column.paddingLeft,
-                                                    paddingRight: column.paddingRight
-                                                }
-                                            })}
-                                        >
+                                    <th
+                                        {...headerGroup.headers[0].getHeaderProps(
+                                            headerGroup.headers[0].getSortByToggleProps()
+                                        )}
+                                        style={{
+                                            position: "sticky",
+                                            left: 0,
+                                            background: "rgba(241, 241, 241, 1)",
+                                            zIndex: 2
+                                        }}
+                                    >
+                                        {headerGroup.headers[0].render("Header")}
+                                        <span>
                                             {(() => {
-                                                const headerText = column.render("Header");
-                                                if (headerText.includes(":")) {
-                                                    const [beforeColon, afterColon] = headerText.split(":");
+                                                if (!headerGroup.headers[0].isSorted)
                                                     return (
-                                                        <>
-                                                            <div>
-                                                                <strong>{beforeColon}</strong>
-                                                            </div>
-                                                            <span>{afterColon.trim()}</span>
-                                                        </>
+                                                        <Box sx={{ ml: 1, display: "inline" }}>
+                                                            <SwapVertIcon />
+                                                        </Box>
                                                     );
-                                                }
-                                                return headerText;
+                                                if (headerGroup.headers[0].isSortedDesc)
+                                                    return <Box sx={{ ml: 1, display: "inline" }}>{"\u{25BC}"}</Box>;
+                                                return <Box sx={{ ml: 1, display: "inline" }}>{"\u{25B2}"}</Box>;
                                             })()}
-                                            <span>
+                                        </span>
+                                    </th>
+
+                                    {headerGroup.headers
+                                        .filter((_, index) => visibleColumnIndices.includes(index))
+                                        .map((column) => (
+                                            <th
+                                                className={column.render("Header").replace(/\s/g, "")}
+                                                key={column.id}
+                                                {...column.getHeaderProps(column.getSortByToggleProps())}
+                                            >
                                                 {(() => {
-                                                    if (!column.isSorted)
+                                                    const headerText = column.render("Header");
+                                                    if (headerText.includes(":")) {
+                                                        const [beforeColon, afterColon] = headerText.split(":");
                                                         return (
-                                                            <Box sx={{ ml: 1, display: "inline" }}>
-                                                                <SwapVertIcon />
-                                                            </Box>
+                                                            <>
+                                                                <div>
+                                                                    <strong>{beforeColon}</strong>
+                                                                </div>
+                                                                <span>{afterColon.trim()}</span>
+                                                            </>
                                                         );
-                                                    if (column.isSortedDesc)
+                                                    }
+                                                    return headerText;
+                                                })()}
+                                                <span>
+                                                    {(() => {
+                                                        if (!column.isSorted)
+                                                            return (
+                                                                <Box sx={{ ml: 1, display: "inline" }}>
+                                                                    <SwapVertIcon />
+                                                                </Box>
+                                                            );
+                                                        if (column.isSortedDesc)
+                                                            return (
+                                                                <Box sx={{ ml: 1, display: "inline" }}>
+                                                                    {"\u{25BC}"}
+                                                                </Box>
+                                                            );
                                                         return (
-                                                            <Box sx={{ ml: 1, display: "inline" }}>{"\u{25BC}"}</Box>
+                                                            <Box sx={{ ml: 1, display: "inline" }}>{"\u{25B2}"}</Box>
                                                         );
-                                                    return <Box sx={{ ml: 1, display: "inline" }}>{"\u{25B2}"}</Box>;
-                                                })()}
-                                            </span>
-                                        </th>
-                                    ))}
+                                                    })()}
+                                                </span>
+                                            </th>
+                                        ))}
                                 </tr>
                             ))}
                         </thead>
                         <tbody {...getTableBodyProps()}>
-                            {page.map((row, i) => {
+                            {page.map((row) => {
                                 prepareRow(row);
                                 return (
-                                    <tr key={row.id} {...row.getRowProps()}>
-                                        {row.cells.map((cell, j) => (
-                                            <td
-                                                className={`cell${j}`}
-                                                key={cell.id}
-                                                {...cell.getCellProps()}
-                                                style={{ width: "100%", whiteSpace: "nowrap" }}
-                                            >
-                                                {cell.render("Cell")}
-                                            </td>
-                                        ))}
+                                    <tr {...row.getRowProps()} key={row}>
+                                        <td
+                                            {...row.cells[0].getCellProps()}
+                                            style={{
+                                                position: "sticky",
+                                                left: 0,
+                                                background: "white",
+                                                zIndex: 1
+                                            }}
+                                        >
+                                            {row.cells[0].render("Cell")}
+                                        </td>
+
+                                        {row.cells
+                                            .filter((_, index) => visibleColumnIndices.includes(index))
+                                            .map((cell, j) => (
+                                                <td
+                                                    className={`cell${j + 1}`}
+                                                    key={cell.id}
+                                                    {...cell.getCellProps()}
+                                                    style={{ width: "100%", whiteSpace: "nowrap" }}
+                                                >
+                                                    {cell.render("Cell")}
+                                                </td>
+                                            ))}
                                     </tr>
                                 );
                             })}
diff --git a/src/components/ira/IRAPredictedPercentageTable.tsx b/src/components/ira/IRAPredictedPercentageTable.tsx
index 7f7e61a..6fed3d9 100644
--- a/src/components/ira/IRAPredictedPercentageTable.tsx
+++ b/src/components/ira/IRAPredictedPercentageTable.tsx
@@ -315,6 +315,17 @@ function IRAPredictedPercentageTable({
 // eslint-disable-next-line
 function Table({ columns, data, initialState }: { columns: any; data: any; initialState: any }) {
     const state = React.useMemo(() => initialState, []);
+    const [columnPage, setColumnPage] = React.useState(0);
+    const columnsPerPage = 6;
+    const visibleColumnIndices = React.useMemo(() => {
+        const startIndex = columnPage * columnsPerPage + 1;
+        const endIndex = Math.min(startIndex + columnsPerPage, columns.length);
+        return Array.from({ length: endIndex - startIndex }, (_, i) => i + startIndex);
+    }, [columnPage, columnsPerPage, columns.length]);
+    const totalColumnPages = Math.ceil((columns.length - 1) / columnsPerPage);
+    React.useEffect(() => {
+        setColumnPage(0);
+    }, [columns.length]);
     const {
         getTableProps,
         getTableBodyProps,
@@ -348,73 +359,153 @@ function Table({ columns, data, initialState }: { columns: any; data: any; initi
                     <CSVLink className="downloadbtn" filename="pdl-data.csv" data={getCSVData(headerGroups, data)}>
                         Export This Table to CSV
                     </CSVLink>
+                    <Box
+                        sx={{
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            marginBottom: 2
+                        }}
+                    >
+                        <button type="button" onClick={() => setColumnPage(0)} disabled={columnPage === 0}>
+                            {"<<"}
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => setColumnPage((prev) => Math.max(0, prev - 1))}
+                            disabled={columnPage === 0}
+                        >
+                            {"<"}
+                        </button>
+                        <span style={{ paddingLeft: 8 }}>
+                            Column Page
+                            <strong style={{ paddingRight: 8 }}>
+                                {columnPage + 1} of {totalColumnPages}
+                            </strong>
+                        </span>
+                        <button
+                            type="button"
+                            onClick={() => setColumnPage((prev) => Math.min(totalColumnPages - 1, prev + 1))}
+                            disabled={columnPage === totalColumnPages - 1}
+                        >
+                            {">"}
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => setColumnPage(totalColumnPages - 1)}
+                            disabled={columnPage === totalColumnPages - 1}
+                        >
+                            {">>"}
+                        </button>
+                    </Box>
 
                     <table {...getTableProps()} style={{ width: "100%", tableLayout: "fixed" }}>
                         <thead>
                             {headerGroups.map((headerGroup) => (
                                 <tr key={headerGroup.id} {...headerGroup.getHeaderGroupProps()}>
-                                    {headerGroup.headers.map((column) => (
-                                        <th
-                                            className={column.render("Header").replace(/\s/g, "")}
-                                            key={column.id}
-                                            {...column.getHeaderProps(column.getSortByToggleProps())}
-                                            {...column.getHeaderProps({
-                                                style: {
-                                                    paddingLeft: column.paddingLeft,
-                                                    paddingRight: column.paddingRight
-                                                }
-                                            })}
-                                        >
+                                    <th
+                                        {...headerGroup.headers[0].getHeaderProps(
+                                            headerGroup.headers[0].getSortByToggleProps()
+                                        )}
+                                        style={{
+                                            position: "sticky",
+                                            left: 0,
+                                            background: "rgba(241, 241, 241, 1)",
+                                            zIndex: 2
+                                        }}
+                                    >
+                                        {headerGroup.headers[0].render("Header")}
+                                        <span>
                                             {(() => {
-                                                const headerText = column.render("Header");
-                                                if (headerText.includes(":")) {
-                                                    const [beforeColon, afterColon] = headerText.split(":");
+                                                if (!headerGroup.headers[0].isSorted)
                                                     return (
-                                                        <>
-                                                            <div>
-                                                                <strong>{beforeColon}</strong>
-                                                            </div>
-                                                            <span>{afterColon.trim()}</span>
-                                                        </>
+                                                        <Box sx={{ ml: 1, display: "inline" }}>
+                                                            <SwapVertIcon />
+                                                        </Box>
                                                     );
-                                                }
-                                                return headerText;
+                                                if (headerGroup.headers[0].isSortedDesc)
+                                                    return <Box sx={{ ml: 1, display: "inline" }}>{"\u{25BC}"}</Box>;
+                                                return <Box sx={{ ml: 1, display: "inline" }}>{"\u{25B2}"}</Box>;
                                             })()}
-                                            <span>
+                                        </span>
+                                    </th>
+
+                                    {headerGroup.headers
+                                        .filter((_, index) => visibleColumnIndices.includes(index))
+                                        .map((column) => (
+                                            <th
+                                                className={column.render("Header").replace(/\s/g, "")}
+                                                key={column.id}
+                                                {...column.getHeaderProps(column.getSortByToggleProps())}
+                                            >
                                                 {(() => {
-                                                    if (!column.isSorted)
+                                                    const headerText = column.render("Header");
+                                                    if (headerText.includes(":")) {
+                                                        const [beforeColon, afterColon] = headerText.split(":");
                                                         return (
-                                                            <Box sx={{ ml: 1, display: "inline" }}>
-                                                                <SwapVertIcon />
-                                                            </Box>
+                                                            <>
+                                                                <div>
+                                                                    <strong>{beforeColon}</strong>
+                                                                </div>
+                                                                <span>{afterColon.trim()}</span>
+                                                            </>
                                                         );
-                                                    if (column.isSortedDesc)
+                                                    }
+                                                    return headerText;
+                                                })()}
+                                                <span>
+                                                    {(() => {
+                                                        if (!column.isSorted)
+                                                            return (
+                                                                <Box sx={{ ml: 1, display: "inline" }}>
+                                                                    <SwapVertIcon />
+                                                                </Box>
+                                                            );
+                                                        if (column.isSortedDesc)
+                                                            return (
+                                                                <Box sx={{ ml: 1, display: "inline" }}>
+                                                                    {"\u{25BC}"}
+                                                                </Box>
+                                                            );
                                                         return (
-                                                            <Box sx={{ ml: 1, display: "inline" }}>{"\u{25BC}"}</Box>
+                                                            <Box sx={{ ml: 1, display: "inline" }}>{"\u{25B2}"}</Box>
                                                         );
-                                                    return <Box sx={{ ml: 1, display: "inline" }}>{"\u{25B2}"}</Box>;
-                                                })()}
-                                            </span>
-                                        </th>
-                                    ))}
+                                                    })()}
+                                                </span>
+                                            </th>
+                                        ))}
                                 </tr>
                             ))}
                         </thead>
                         <tbody {...getTableBodyProps()}>
-                            {page.map((row, i) => {
+                            {page.map((row) => {
                                 prepareRow(row);
                                 return (
-                                    <tr key={row.id} {...row.getRowProps()}>
-                                        {row.cells.map((cell, j) => (
-                                            <td
-                                                className={`cell${j}`}
-                                                key={cell.id}
-                                                {...cell.getCellProps()}
-                                                style={{ width: "100%", whiteSpace: "nowrap" }}
-                                            >
-                                                {cell.render("Cell")}
-                                            </td>
-                                        ))}
+                                    <tr {...row.getRowProps()} key={row}>
+                                        <td
+                                            {...row.cells[0].getCellProps()}
+                                            style={{
+                                                position: "sticky",
+                                                left: 0,
+                                                background: "white",
+                                                zIndex: 1
+                                            }}
+                                        >
+                                            {row.cells[0].render("Cell")}
+                                        </td>
+
+                                        {row.cells
+                                            .filter((_, index) => visibleColumnIndices.includes(index))
+                                            .map((cell, j) => (
+                                                <td
+                                                    className={`cell${j + 1}`}
+                                                    key={cell.id}
+                                                    {...cell.getCellProps()}
+                                                    style={{ width: "100%", whiteSpace: "nowrap" }}
+                                                >
+                                                    {cell.render("Cell")}
+                                                </td>
+                                            ))}
                                     </tr>
                                 );
                             })}
diff --git a/src/components/shared/getCSVData.tsx b/src/components/shared/getCSVData.tsx
index dd42ad9..f04b792 100644
--- a/src/components/shared/getCSVData.tsx
+++ b/src/components/shared/getCSVData.tsx
@@ -2,14 +2,16 @@ const getCSVData = (headerGroups, data) => {
     if (!data || !data.length) {
         return [];
     }
+    const headers = headerGroups[0].headers;
     const csvData = [
-        headerGroups[0].headers.map((column) => column.render("Header")),
+        headers.map((column) => column.render("Header")),
         ...data.map((row) => {
             if (!row) {
                 return [];
             }
-            return Object.entries(row).map(([key, cell]) => {
-                return cell || "";
+            return headers.map((column) => {
+                const value = row[column.id] || "";
+                return value;
             });
         })
     ];
diff --git a/src/components/shared/titleii/Interface.tsx b/src/components/shared/titleii/Interface.tsx
new file mode 100644
index 0000000..8d9e924
--- /dev/null
+++ b/src/components/shared/titleii/Interface.tsx
@@ -0,0 +1,39 @@
+export interface PracticeName {
+    practiceName: string;
+    practiceCode: string;
+}
+
+export interface Practice {
+    practiceName: string;
+    practiceCode: string;
+    totalPaymentInDollars: number;
+}
+
+export interface PracticeCategory {
+    practiceCategoryName: string;
+    totalPaymentInDollars: number;
+    practices: Practice[];
+}
+
+export interface StatePerformance {
+    state: string;
+    totalPaymentInDollars: number;
+    statutes: Array<{
+        statuteName: string;
+        totalPaymentInDollars: number;
+        practiceCategories: PracticeCategory[];
+    }>;
+}
+
+export interface PracticeMapProps {
+    programName: string;
+    initialStatePerformance: Record<string, StatePerformance[]>;
+    allStates: any;
+    year: string;
+    stateCodes: any;
+    practiceNames: Array<{
+        practiceName: string;
+        practiceCode: string;
+    }>;
+    onPracticeChange?: (practices: string[]) => void;
+}
diff --git a/src/components/shared/titleii/PracticeMethods.tsx b/src/components/shared/titleii/PracticeMethods.tsx
new file mode 100644
index 0000000..43cd788
--- /dev/null
+++ b/src/components/shared/titleii/PracticeMethods.tsx
@@ -0,0 +1,177 @@
+import legendConfig from "../../../utils/legendConfig.json";
+import { ShortFormat } from "../ConvertionFormats";
+import PracticeNameMatch from "./PracticeNameMatch";
+
+export const getPracticeData = (statePerformance, year, selectedPractices) => {
+    if (!statePerformance[year]) return [];
+
+    return statePerformance[year]
+        .map((state) => {
+            let total = 0;
+            if (selectedPractices.includes("All Practices")) {
+                total = state.totalPaymentInDollars || 0;
+            } else {
+                selectedPractices.forEach((practice) => {
+                    const practiceCode = PracticeNameMatch(practice);
+                    if (!practiceCode) return;
+                    state.statutes?.forEach((statute) => {
+                        statute.practiceCategories?.forEach((category) => {
+                            if (!category.practices || category.practices.length === 0) {
+                                // Handle category level match
+                                const categoryMatch = practice.includes(category.practiceCategoryName);
+                                if (categoryMatch) {
+                                    total += category.totalPaymentInDollars || 0;
+                                }
+                            } else {
+                                category.practices.forEach((p) => {
+                                    const practiceMatch = PracticeNameMatch(p.practiceName);
+                                    if (practiceMatch === practiceCode) {
+                                        total += p.totalPaymentInDollars || 0;
+                                    }
+                                });
+                            }
+                        });
+                    });
+                });
+            }
+            return total;
+        })
+        .filter((value) => value > 0);
+};
+
+export const getPracticeCategories = (practiceNames) => {
+    if (!practiceNames || practiceNames.length === 0) {
+        return ["All Practices"];
+    }
+    return ["All Practices", ...practiceNames];
+};
+export const calculateNationalTotalMap = (statePerformance, practices, year) => {
+    let total = 0;
+    if (!statePerformance[year]) return total;
+    if (practices.includes("All Practices")) {
+        statePerformance[year].forEach((state) => {
+            total += state.totalPaymentInDollars || 0;
+        });
+        return total;
+    }
+    statePerformance[year].forEach((state) => {
+        practices.forEach((practice) => {
+            const practiceAmount = getPracticeTotal(state, practice);
+            total += practiceAmount;
+        });
+    });
+
+    return total;
+};
+export const getPracticeTotal = (record, practiceName) => {
+    if (!record || !record.statutes) return 0;
+    if (practiceName === "All Practices") {
+        return record.totalPaymentInDollars || 0;
+    }
+
+    // Use PracticeNameMatch for consistent code extraction
+    const codeMatch = PracticeNameMatch(practiceName);
+    const practiceCode = codeMatch || null;
+    // Strip anything in parentheses at the end
+    const practiceName_noCode = practiceName.replace(/\s*\([^)]*\)$/, "");
+
+    let total = 0;
+    record.statutes?.forEach((statute) => {
+        if (!statute.practiceCategories) return;
+        statute.practiceCategories.forEach((category) => {
+            // Match for category totals
+            if (practiceName_noCode === category.practiceCategoryName) {
+                total += category.totalPaymentInDollars || 0;
+                return;
+            }
+
+            // Match for specific practices
+            if (practiceCode && Array.isArray(category.practices) && category.practices.length > 0) {
+                category.practices.forEach((practice) => {
+                    // Use same PracticeNameMatch for consistent comparison
+                    const currentPracticeCode = PracticeNameMatch(practice.practiceName);
+                    if (currentPracticeCode === practiceCode) {
+                        total += practice.totalPaymentInDollars || 0;
+                    }
+                });
+            }
+        });
+    });
+
+    return total;
+};
+export const getCustomScale = (practiceData, configName) => {
+    if (practiceData.length === 0) return legendConfig[configName];
+
+    const sortedData = [...practiceData].sort((a, b) => a - b);
+    const quintileSize = Math.ceil(sortedData.length / 5);
+
+    return [
+        sortedData[quintileSize],
+        sortedData[quintileSize * 2],
+        sortedData[quintileSize * 3],
+        sortedData[quintileSize * 4]
+    ];
+};
+
+export const computeTooltipContent = (geo, record, selectedPractices, classes, getNationalTotal) => {
+    if (!record) return "";
+    let tooltipContent = `
+        <div class="map_tooltip">
+            <div class="${classes.tooltip_header}">
+                <b>${geo.properties.name}</b>
+            </div>
+            <table class="${classes.tooltip_table}">
+                <tbody>`;
+    let practiceTotal = 0;
+    const nationalTotal = getNationalTotal(selectedPractices);
+    if (selectedPractices.includes("All Practices")) {
+        practiceTotal = record.totalPaymentInDollars || 0;
+        tooltipContent += `
+                <tr>
+                    <td class="${classes.tooltip_topcell_left}">All Practices:</td>
+                    <td class="${classes.tooltip_topcell_right}">
+                        $${ShortFormat(practiceTotal, undefined, 2)}
+                    </td>
+                </tr>`;
+    } else {
+        selectedPractices.forEach((practice, index) => {
+            const practiceAmount = getPracticeTotal(record, practice);
+            practiceTotal += practiceAmount;
+            const displayName = practice.replace(/\s*\([a-zA-Z0-9]+\)$/, "");
+
+            // Calculate individual practice percentage
+            const practiceNationalTotal = getNationalTotal([practice]);
+            const practicePercentage = practiceNationalTotal > 0 ? (practiceAmount / practiceNationalTotal) * 100 : 0;
+
+            tooltipContent += `
+                    <tr>
+                        <td class="${index === 0 ? classes.tooltip_topcell_left : classes.tooltip_regularcell_left}">
+                            ${displayName}:
+                        </td>
+                        <td class="${index === 0 ? classes.tooltip_topcell_right : classes.tooltip_regularcell_right}">
+                            $${ShortFormat(practiceAmount, undefined, 2)} (${practicePercentage.toFixed(2)}%)
+                        </td>
+                    </tr>`;
+        });
+    }
+    const totalPercentage = nationalTotal > 0 ? (practiceTotal / nationalTotal) * 100 : 0;
+    tooltipContent += `
+                <tr>
+                    <td class="${classes.tooltip_footer_left}">Total Benefits:</td>
+                    <td class="${classes.tooltip_footer_right}">
+                        $${ShortFormat(practiceTotal, undefined, 2)}
+                    </td>
+                </tr>
+                <tr>
+                    <td class="${classes.tooltip_bottomcell_left}">PCT. of Selected Practice(s):</td>
+                    <td class="${classes.tooltip_bottomcell_right}">
+                        ${totalPercentage > 0 ? `${totalPercentage.toFixed(2)}%` : "0%"}
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>`;
+
+    return tooltipContent;
+};
diff --git a/src/components/shared/titleii/PracticeNameMatch.tsx b/src/components/shared/titleii/PracticeNameMatch.tsx
new file mode 100644
index 0000000..3f29b39
--- /dev/null
+++ b/src/components/shared/titleii/PracticeNameMatch.tsx
@@ -0,0 +1,9 @@
+const PracticeNameMatch = (practiceName: string) => {
+    if (!practiceName.includes("(")) {
+        return practiceName;
+    }
+    // The outermost parentheses are captured, and everything inside those parentheses got returned
+    const match = practiceName.match(/\(([^()]+(?:\([^()]*\))?[^()]*)\)$/);
+    return match ? match[1] : null;
+};
+export default PracticeNameMatch;
diff --git a/src/components/shared/titleii/TitleIIPracticeMap.tsx b/src/components/shared/titleii/TitleIIPracticeMap.tsx
new file mode 100644
index 0000000..7ce3fd8
--- /dev/null
+++ b/src/components/shared/titleii/TitleIIPracticeMap.tsx
@@ -0,0 +1,397 @@
+import React, { useState, useMemo } from "react";
+import { geoCentroid } from "d3-geo";
+import { ComposableMap, Geographies, Geography, Marker, Annotation } from "react-simple-maps";
+import ReactTooltip from "react-tooltip";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import FormControl from "@mui/material/FormControl";
+import FormLabel from "@mui/material/FormLabel";
+import Select from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+import Chip from "@mui/material/Chip";
+import * as d3 from "d3";
+import { config } from "../../../app.config";
+import { useStyles, tooltipBkgColor } from "../MapTooltip";
+import "../../../styles/map.css";
+import DrawLegend from "../DrawLegend";
+import {
+    getPracticeTotal,
+    calculateNationalTotalMap,
+    getPracticeCategories,
+    getPracticeData,
+    getCustomScale,
+    computeTooltipContent
+} from "./PracticeMethods";
+import { PracticeMapProps } from "./Interface";
+import PracticeNameMatch from "./PracticeNameMatch";
+
+const geoUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";
+
+const offsets = {
+    VT: [50, -8],
+    NH: [34, 2],
+    MA: [30, -1],
+    RI: [28, 2],
+    CT: [35, 10],
+    NJ: [34, 1],
+    DE: [33, 0],
+    MD: [47, 10],
+    DC: [49, 21]
+};
+
+const MapChart = ({
+    getNationalTotal,
+    setReactTooltipContent,
+    maxValue,
+    allStates,
+    statePerformance,
+    year,
+    stateCodes,
+    colorScale,
+    selectedPractices
+}) => {
+    const classes = useStyles();
+    return (
+        <div data-tip="">
+            <ComposableMap projection="geoAlbersUsa">
+                <Geographies geography={geoUrl}>
+                    {({ geographies }) => (
+                        <>
+                            {geographies.map((geo) => {
+                                const record = statePerformance[year]?.find(
+                                    (v) => stateCodes[v.state] === geo.properties.name
+                                );
+                                let practiceTotal = 0;
+                                if (selectedPractices.includes("All Practices")) {
+                                    practiceTotal = record?.totalPaymentInDollars || 0;
+                                } else {
+                                    selectedPractices.forEach((practice) => {
+                                        practiceTotal += getPracticeTotal(record, practice);
+                                    });
+                                }
+                                return (
+                                    <Geography
+                                        key={geo.rsmKey}
+                                        geography={geo}
+                                        onMouseEnter={() => {
+                                            const tooltipContent = computeTooltipContent(
+                                                geo,
+                                                record,
+                                                selectedPractices,
+                                                classes,
+                                                getNationalTotal
+                                            );
+                                            ReactTooltip.rebuild();
+                                            setReactTooltipContent(tooltipContent);
+                                        }}
+                                        onMouseLeave={() => setReactTooltipContent("")}
+                                        fill={colorScale(practiceTotal || 0) || "#D2D2D2"}
+                                        stroke="#FFF"
+                                        style={{
+                                            default: { stroke: "#FFFFFF", strokeWidth: 0.75, outline: "none" },
+                                            hover: { stroke: "#232323", strokeWidth: 2, outline: "none" },
+                                            pressed: { fill: "#345feb", outline: "none" }
+                                        }}
+                                    />
+                                );
+                            })}
+                            {geographies.map((geo) => {
+                                const centroid = geoCentroid(geo);
+                                const cur = allStates.find((s) => s.val === geo.id);
+                                return (
+                                    <g key={`${geo.rsmKey}-name`}>
+                                        {cur &&
+                                            centroid[0] > -160 &&
+                                            centroid[0] < -67 &&
+                                            (Object.keys(offsets).indexOf(cur.id) === -1 ? (
+                                                <Marker coordinates={centroid}>
+                                                    <text y="2" fontSize={14} textAnchor="middle">
+                                                        {cur.id}
+                                                    </text>
+                                                </Marker>
+                                            ) : (
+                                                <Annotation
+                                                    subject={centroid}
+                                                    dx={offsets[cur.id][0]}
+                                                    dy={offsets[cur.id][1]}
+                                                >
+                                                    <text x={4} fontSize={14} alignmentBaseline="middle">
+                                                        {cur.id}
+                                                    </text>
+                                                </Annotation>
+                                            ))}
+                                    </g>
+                                );
+                            })}
+                        </>
+                    )}
+                </Geographies>
+            </ComposableMap>
+        </div>
+    );
+};
+
+function encodeQueryParams(params) {
+    return Object.entries(params)
+        .map(([key, value]) => {
+            const encodedValue = encodeURIComponent(value);
+            return `${key}=${encodedValue}`;
+        })
+        .join("&");
+}
+
+function buildURL(baseUrl, params) {
+    const encodedParams = encodeQueryParams(params);
+    return `${baseUrl}?${encodedParams}`;
+}
+const TitleIIPracticeMap = ({
+    programName,
+    initialStatePerformance,
+    allStates,
+    year,
+    stateCodes,
+    practiceNames,
+    onPracticeChange
+}: PracticeMapProps) => {
+    const [content, setContent] = useState("");
+    const [statePerformance, setStatePerformance] = useState(initialStatePerformance);
+    const classes = useStyles();
+    const [selectedPractices, setSelectedPractices] = useState<string[]>(["All Practices"]);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const practiceCategories = useMemo(() => {
+        return getPracticeCategories(practiceNames);
+    }, [practiceNames]);
+    const fetchStatePerformanceData = async (selectedPracticeNames: string[]) => {
+        if (selectedPracticeNames.includes("All Practices")) {
+            setStatePerformance(initialStatePerformance);
+            return;
+        }
+        setIsLoading(true);
+        try {
+            const selectedCodes = selectedPracticeNames
+                .map((practiceName) => {
+                    const match = PracticeNameMatch(practiceName);
+                    if (match === null) {
+                        console.error(`Could not match practice name: ${practiceName}`);
+                        return null;
+                    }
+                    return match;
+                })
+                .filter((code) => code !== null);
+            if (selectedCodes.length === 0) {
+                setStatePerformance(initialStatePerformance);
+                return;
+            }
+            const encodedCodes = selectedCodes.map((code) => encodeURIComponent(code)).join(",");
+            const url = `${
+                config.apiUrl
+            }/titles/title-ii/programs/${programName.toLowerCase()}/state-distribution?practice_code=${encodedCodes}`;
+            const response = await fetch(url);
+            const data = await response.json();
+            setStatePerformance(data);
+        } catch (error) {
+            console.error("Error fetching state performance data:", error);
+            setStatePerformance(initialStatePerformance);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+    const handlePracticeChange = (event) => {
+        const value = event.target.value;
+        let newSelected = typeof value === "string" ? value.split(",") : value;
+        if (newSelected.includes("All Practices") && !selectedPractices.includes("All Practices")) {
+            newSelected = ["All Practices"];
+        } else if (newSelected.length > 1 && newSelected.includes("All Practices")) {
+            newSelected = newSelected.filter((p) => p !== "All Practices");
+        } else if (newSelected.length === 0) {
+            newSelected = ["All Practices"];
+        }
+
+        setSelectedPractices(newSelected);
+        if (onPracticeChange) {
+            onPracticeChange(newSelected);
+        }
+        fetchStatePerformanceData(newSelected);
+    };
+
+    React.useEffect(() => {
+        ReactTooltip.rebuild();
+    }, [statePerformance, selectedPractices]);
+
+    const practiceData = useMemo(() => {
+        return getPracticeData(statePerformance, year, selectedPractices);
+    }, [statePerformance, year, selectedPractices]);
+    const maxValue = useMemo(() => Math.max(...practiceData, 0), [practiceData]);
+    const customScale = useMemo(() => {
+        return getCustomScale(practiceData, `Total ${programName}`);
+    }, [practiceData]);
+    const mapColor = ["#F0F9E8", "#BAE4BC", "#7BCCC4", "#43A2CA", "#0868AC"];
+    const colorScale = d3.scaleThreshold(customScale, mapColor);
+    const getNationalTotal = React.useCallback(
+        (practices: string[]) => {
+            return calculateNationalTotalMap(statePerformance, practices, year);
+        },
+        [statePerformance, year]
+    );
+    const handleChipDelete = (practiceToDelete) => {
+        let newSelected;
+        if (selectedPractices.length === 1) {
+            newSelected = ["All Practices"];
+        } else {
+            newSelected = selectedPractices.filter((p) => p !== practiceToDelete);
+        }
+        setSelectedPractices(newSelected);
+        if (onPracticeChange) {
+            onPracticeChange(newSelected);
+        }
+        fetchStatePerformanceData(newSelected);
+    };
+    const shouldShowLoading = isLoading && !selectedPractices.includes("All Practices");
+    const hasValidData = statePerformance && statePerformance[year] && statePerformance[year].length > 0;
+    if (!hasValidData && !shouldShowLoading) {
+        return (
+            <Box display="flex" justifyContent="center" mt={4}>
+                <Typography>No data available</Typography>
+            </Box>
+        );
+    }
+    return (
+        <Box>
+            <Box display="flex" justifyContent="center" sx={{ pt: 30 }}>
+                {selectedPractices.length > 0 ? (
+                    <DrawLegend
+                        colorScale={colorScale}
+                        title={titleElement(programName, selectedPractices, year)}
+                        programData={practiceData}
+                        prepColor={mapColor}
+                        initRatioLarge={0.6}
+                        initRatioSmall={0.5}
+                        isRatio={false}
+                        notDollar={false}
+                        emptyState={[]}
+                    />
+                ) : (
+                    <div>
+                        {titleElement(programName, selectedPractices, year)}
+                        <Box display="flex" justifyContent="center">
+                            <Typography sx={{ color: "#CCC", fontWeight: 700 }}>
+                                Please select at least one practice category.
+                            </Typography>
+                        </Box>
+                    </div>
+                )}
+            </Box>
+            <Box display="flex" justifyContent="center" alignItems="center" pt={4}>
+                <FormControl sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
+                    <FormLabel
+                        component="legend"
+                        sx={{
+                            "mr": 2,
+                            "minWidth": "5em",
+                            "fontWeight": "bold",
+                            "fontSize": "1.25rem",
+                            "color": "rgba(47, 113, 100, 1)",
+                            "&.Mui-focused": { color: "rgba(47, 113, 100, 1) !important" }
+                        }}
+                    >
+                        Select Practice
+                    </FormLabel>
+                    <Select
+                        multiple
+                        value={selectedPractices}
+                        onChange={handlePracticeChange}
+                        renderValue={(selected) => (
+                            <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
+                                {selected.map((value) => (
+                                    <Chip
+                                        key={value}
+                                        label={value}
+                                        onDelete={() => handleChipDelete(value)}
+                                        onMouseDown={(event) => {
+                                            event.stopPropagation();
+                                        }}
+                                        sx={{
+                                            borderRadius: 1,
+                                            borderColor: "lightgray",
+                                            color: "rgba(47, 113, 100, 1)"
+                                        }}
+                                    />
+                                ))}
+                            </Box>
+                        )}
+                        sx={{ minWidth: 300 }}
+                        MenuProps={{
+                            PaperProps: {
+                                sx: {
+                                    maxHeight: 500,
+                                    overflowY: "auto",
+                                    position: "absolute",
+                                    border: "1px solid lightgray",
+                                    boxShadow: "0 4px 6px rgba(0,0,0,0.1)",
+                                    bgcolor: "background.paper"
+                                    // extra style for menu since the length of the list is long
+                                }
+                            }
+                        }}
+                    >
+                        {practiceCategories.map((practice) => (
+                            <MenuItem
+                                key={typeof practice === "string" ? practice : practice.practiceCode}
+                                value={practice}
+                            >
+                                {typeof practice === "string" ? practice : practice.practiceName}
+                            </MenuItem>
+                        ))}
+                    </Select>
+                </FormControl>
+            </Box>
+
+            {shouldShowLoading ? (
+                <Box display="flex" justifyContent="center" mt={4}>
+                    <Typography>Loading data...</Typography>
+                </Box>
+            ) : (
+                hasValidData && (
+                    <MapChart
+                        getNationalTotal={getNationalTotal}
+                        setReactTooltipContent={setContent}
+                        maxValue={maxValue}
+                        allStates={allStates}
+                        statePerformance={statePerformance}
+                        year={year}
+                        stateCodes={stateCodes}
+                        colorScale={colorScale}
+                        selectedPractices={selectedPractices}
+                    />
+                )
+            )}
+            <div className="tooltip-container">
+                <ReactTooltip
+                    className={`${classes.customized_tooltip} tooltip`}
+                    backgroundColor={tooltipBkgColor}
+                    html
+                >
+                    {content}
+                </ReactTooltip>
+            </div>
+        </Box>
+    );
+};
+
+const titleElement = (programName, practices: string[], year: string): JSX.Element => {
+    const practiceLabel = practices.length > 0 ? practices.join(", ") : "No practices selected";
+    return (
+        <Box>
+            <Typography variant="h6" textAlign="center">
+                <strong>{practiceLabel === "All Practices" ? `Total ${programName}` : practiceLabel}</strong> Benefits
+                from <strong>{year}</strong>
+            </Typography>
+            <Typography style={{ fontSize: "0.5em", color: "#AAA", textAlign: "center" }}>
+                <i>Grey states indicate no available data</i>
+            </Typography>
+        </Box>
+    );
+};
+
+export default TitleIIPracticeMap;
diff --git a/src/components/shared/titleii/TitleIIPracticeTable.tsx b/src/components/shared/titleii/TitleIIPracticeTable.tsx
new file mode 100644
index 0000000..ecd8f31
--- /dev/null
+++ b/src/components/shared/titleii/TitleIIPracticeTable.tsx
@@ -0,0 +1,520 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { CSVLink } from "react-csv";
+import { useTable, useSortBy, usePagination } from "react-table";
+import SwapVertIcon from "@mui/icons-material/SwapVert";
+import { Grid, TableContainer, Typography, Box } from "@mui/material";
+import { compareWithDollarSign, compareWithPercentSign } from "../TableCompareFunctions";
+import "../../../styles/table.css";
+import getCSVData from "../getCSVData";
+import { getPracticeTotal } from "./PracticeMethods";
+
+const Styles = styled.div`
+    padding: 0;
+    margin: 0;
+
+    table {
+        border-spacing: 0;
+        border: 1px solid #e4ebe7;
+        border-left: none;
+        border-right: none;
+        min-width: 100%;
+        overflow-x: auto;
+
+        tr {
+            :last-child {
+                td {
+                    border-bottom: 0;
+                }
+            }
+        }
+
+        th {
+            background-color: rgba(241, 241, 241, 1);
+            padding: 1em 3em;
+            cursor: pointer;
+            text-align: left;
+        }
+
+        th:not(:first-of-type) {
+            text-align: right;
+        }
+
+        td[class$="cell0"] {
+            padding-right: 10em;
+        }
+
+        td[class$="cell1"],
+        td[class$="cell2"],
+        td[class$="cell3"],
+        td[class$="cell4"],
+        td[class$="cell5"],
+        td[class$="cell6"] {
+            text-align: right;
+        }
+
+        td {
+            padding: 1em 3em;
+            border-bottom: 1px solid #e4ebe7;
+            border-right: none;
+
+            :last-child {
+                border-right: 0;
+            }
+        }
+    }
+
+    .pagination {
+        margin-top: 1.5em;
+    }
+
+    @media screen and (max-width: 1024px) {
+        th,
+        td {
+            padding: 8px;
+        }
+        td[class$="cell0"] {
+            padding-right: 1em;
+        }
+        .pagination {
+            margin-top: 8px;
+        }
+    }
+
+    .downloadbtn {
+        background-color: rgba(47, 113, 100, 1);
+        padding: 8px 16px;
+        border-radius: 4px;
+        color: #fff;
+        text-decoration: none;
+        display: block;
+        cursor: pointer;
+        margin-bottom: 1em;
+        text-align: center;
+    }
+`;
+
+function Table({ programName, columns, data }) {
+    const [columnPage, setColumnPage] = useState(0);
+    const columnsPerPage = 6;
+    const visibleColumnIndices = React.useMemo(() => {
+        const startIndex = columnPage * columnsPerPage + 1;
+        const endIndex = Math.min(startIndex + columnsPerPage, columns.length);
+        return Array.from({ length: endIndex - startIndex }, (_, i) => i + startIndex);
+    }, [columnPage, columnsPerPage, columns.length]);
+    React.useEffect(() => {
+        setColumnPage(0);
+    }, [columns.length]);
+    const totalColumnPages = Math.ceil((columns.length - 1) / columnsPerPage);
+    const {
+        getTableProps,
+        getTableBodyProps,
+        headerGroups,
+        rows,
+        prepareRow,
+        page,
+        canPreviousPage,
+        canNextPage,
+        pageOptions,
+        pageCount,
+        gotoPage,
+        nextPage,
+        previousPage,
+        setPageSize,
+        state: { pageIndex, pageSize }
+    } = useTable(
+        {
+            columns,
+            data,
+            initialState: { pageSize: 10 }
+        },
+        useSortBy,
+        usePagination
+    );
+    const fileName = `${programName}-practice-data.csv`;
+    return (
+        <div>
+            {data && data.length > 0 ? (
+                <div style={{ width: "100%" }}>
+                    <CSVLink className="downloadbtn" filename={fileName} data={getCSVData(headerGroups, data)}>
+                        Export This Table to CSV
+                    </CSVLink>
+                    <Box
+                        sx={{
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            marginBottom: 2
+                        }}
+                    >
+                        <button type="button" onClick={() => setColumnPage(0)} disabled={columnPage === 0}>
+                            {"<<"}
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => setColumnPage((prev) => Math.max(0, prev - 1))}
+                            disabled={columnPage === 0}
+                        >
+                            {"<"}
+                        </button>
+                        <span style={{ paddingLeft: 8 }}>
+                            Column Page
+                            <strong style={{ padding: "0px 8px" }}>
+                                {columnPage + 1} of {totalColumnPages}
+                            </strong>
+                        </span>
+                        <button
+                            type="button"
+                            onClick={() => setColumnPage((prev) => Math.min(totalColumnPages - 1, prev + 1))}
+                            disabled={columnPage === totalColumnPages - 1}
+                        >
+                            {">"}
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => setColumnPage(totalColumnPages - 1)}
+                            disabled={columnPage === totalColumnPages - 1}
+                        >
+                            {">>"}
+                        </button>
+                    </Box>
+                    <table {...getTableProps()} style={{ width: "100%", tableLayout: "fixed" }}>
+                        <thead>
+                            {headerGroups.map((headerGroup) => (
+                                <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup}>
+                                    <th
+                                        {...headerGroup.headers[0].getHeaderProps(
+                                            headerGroup.headers[0].getSortByToggleProps()
+                                        )}
+                                        style={{
+                                            position: "sticky",
+                                            left: 0,
+                                            background: "rgba(241, 241, 241, 1)",
+                                            zIndex: 2
+                                        }}
+                                    >
+                                        {headerGroup.headers[0].render("Header")}
+                                        <span>
+                                            {(() => {
+                                                const column = headerGroup.headers[0];
+                                                if (!column.isSorted)
+                                                    return (
+                                                        <Box sx={{ ml: 1, display: "inline" }}>
+                                                            <SwapVertIcon />
+                                                        </Box>
+                                                    );
+                                                if (column.isSortedDesc)
+                                                    return <Box sx={{ ml: 1, display: "inline" }}>{"\u{25BC}"}</Box>;
+                                                return <Box sx={{ ml: 1, display: "inline" }}>{"\u{25B2}"}</Box>;
+                                            })()}
+                                        </span>
+                                    </th>
+                                    {headerGroup.headers
+                                        .filter((_, index) => visibleColumnIndices.includes(index))
+                                        .map((column) => (
+                                            <th {...column.getHeaderProps(column.getSortByToggleProps())} key={column}>
+                                                {(() => {
+                                                    const headerText = column.render("Header");
+                                                    if (typeof headerText === "string" && headerText.includes(":")) {
+                                                        const [beforeColon, afterColon] = headerText.split(":");
+                                                        return (
+                                                            <>
+                                                                <div>
+                                                                    <strong>{beforeColon}</strong>
+                                                                </div>
+                                                                <span>{afterColon.trim()}</span>
+                                                            </>
+                                                        );
+                                                    }
+                                                    return headerText;
+                                                })()}
+                                                <span>
+                                                    {(() => {
+                                                        if (!column.isSorted)
+                                                            return (
+                                                                <Box sx={{ ml: 1, display: "inline" }}>
+                                                                    <SwapVertIcon />
+                                                                </Box>
+                                                            );
+                                                        if (column.isSortedDesc)
+                                                            return (
+                                                                <Box sx={{ ml: 1, display: "inline" }}>
+                                                                    {"\u{25BC}"}
+                                                                </Box>
+                                                            );
+                                                        return (
+                                                            <Box sx={{ ml: 1, display: "inline" }}>{"\u{25B2}"}</Box>
+                                                        );
+                                                    })()}
+                                                </span>
+                                            </th>
+                                        ))}
+                                </tr>
+                            ))}
+                        </thead>
+                        <tbody {...getTableBodyProps()}>
+                            {page.map((row, i) => {
+                                prepareRow(row);
+                                return (
+                                    <tr {...row.getRowProps()} key={row}>
+                                        <td
+                                            {...row.cells[0].getCellProps()}
+                                            style={{
+                                                position: "sticky",
+                                                left: 0,
+                                                background: "white",
+                                                zIndex: 1
+                                            }}
+                                        >
+                                            {row.cells[0].render("Cell")}
+                                        </td>
+                                        {row.cells
+                                            .filter((_, index) => visibleColumnIndices.includes(index))
+                                            .map((cell, j) => (
+                                                <td
+                                                    key={`cell${j + 1}`}
+                                                    className={`cell${j + 1}`}
+                                                    {...cell.getCellProps()}
+                                                    style={{ width: "100%", whiteSpace: "nowrap" }}
+                                                >
+                                                    {cell.render("Cell")}
+                                                </td>
+                                            ))}
+                                    </tr>
+                                );
+                            })}
+                        </tbody>
+                    </table>
+                    <Box
+                        className="pagination"
+                        sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
+                    >
+                        <Box>
+                            <button type="button" onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
+                                {"<<"}
+                            </button>
+                            <button type="button" onClick={() => previousPage()} disabled={!canPreviousPage}>
+                                {"<"}
+                            </button>
+                            <button type="button" onClick={() => nextPage()} disabled={!canNextPage}>
+                                {">"}
+                            </button>
+                            <button type="button" onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
+                                {">>"}
+                            </button>
+                            <span style={{ paddingLeft: 8 }}>
+                                Page
+                                <strong style={{ padding: 8 }}>
+                                    {pageIndex + 1} of {pageOptions.length}
+                                </strong>
+                            </span>
+                            <span>
+                                | Go to page:
+                                <input
+                                    type="number"
+                                    defaultValue={pageIndex + 1}
+                                    onChange={(e) => {
+                                        let p = e.target.value ? Number(e.target.value) - 1 : 0;
+                                        if (p > pageOptions.length) p = pageOptions.length - 1;
+                                        if (p < 0) p = 0;
+                                        gotoPage(p);
+                                    }}
+                                    style={{ width: "3em", marginLeft: 8 }}
+                                />
+                            </span>
+                            <select
+                                value={pageSize}
+                                onChange={(e) => {
+                                    setPageSize(Number(e.target.value));
+                                }}
+                            >
+                                {[10, 25, 40, 51].map((size) => (
+                                    <option key={size} value={size}>
+                                        Show {size}
+                                    </option>
+                                ))}
+                            </select>
+                        </Box>
+                        <Box>
+                            {pageSize * (pageIndex + 1) <= rows.length ? (
+                                <Typography>
+                                    Showing the first {pageSize * (pageIndex + 1)} results of {rows.length} rows
+                                </Typography>
+                            ) : (
+                                <Typography>
+                                    Showing the first {rows.length} results of {rows.length} rows
+                                </Typography>
+                            )}
+                        </Box>
+                    </Box>
+                </div>
+            ) : (
+                <p>Loading data...</p>
+            )}
+        </div>
+    );
+}
+
+function TitleIIPracticeTable({
+    programName,
+    statePerformance,
+    year,
+    stateCodes,
+    selectedPractices
+}: {
+    programName: string;
+    statePerformance: any;
+    year: string;
+    stateCodes: any;
+    selectedPractices: string[];
+}): JSX.Element {
+    const getNationalTotalForPractice = React.useCallback(
+        (practice: string) => {
+            let total = 0;
+            if (!statePerformance[year]) return total;
+            statePerformance[year].forEach((state) => {
+                total += getPracticeTotal(state, practice);
+            });
+            return total;
+        },
+        [statePerformance, year]
+    );
+    const getNationalTotal = React.useCallback(
+        (practices: string[]) => {
+            if (practices.includes("All Practices")) {
+                let total = 0;
+                statePerformance[year]?.forEach((state) => {
+                    total += state.totalPaymentInDollars || 0;
+                });
+                return total;
+            }
+            let total = 0;
+            practices.forEach((practice) => {
+                total += getNationalTotalForPractice(practice);
+            });
+            return total;
+        },
+        [statePerformance, year, getNationalTotalForPractice]
+    );
+
+    const resultData = React.useMemo(() => {
+        if (!statePerformance[year]) return [];
+
+        return statePerformance[year].map((stateData) => {
+            const stateCode = stateCodes.find((obj) => obj.code === stateData.state);
+            const stateName = stateCode ? stateCode.name : stateData.state;
+            const row: any = {
+                state: stateName
+            };
+            let totalBenefits = 0;
+            if (selectedPractices.includes("All Practices")) {
+                totalBenefits = stateData.totalPaymentInDollars || 0;
+                const nationalTotal = getNationalTotal(["All Practices"]);
+                const totalPercentage = (totalBenefits / nationalTotal) * 100;
+                row["Total Benefits"] = `$${totalBenefits.toLocaleString(undefined, { minimumFractionDigits: 2 })}`;
+                row["Percentage Nationwide"] = `${totalPercentage.toFixed(2)}%`;
+            } else {
+                selectedPractices.forEach((practice) => {
+                    const practiceBenefits = getPracticeTotal(stateData, practice);
+                    totalBenefits += practiceBenefits;
+                    const practiceNationalTotal = getNationalTotalForPractice(practice);
+                    const practicePercentage =
+                        practiceNationalTotal > 0 ? (practiceBenefits / practiceNationalTotal) * 100 : 0;
+                    const displayName = practice.replace(/\s*\([a-zA-Z0-9]+\)$/, "");
+                    row[`${displayName}: Benefits`] = `$${practiceBenefits.toLocaleString(undefined, {
+                        minimumFractionDigits: 2
+                    })}`;
+                    row[`${displayName}: Percentage Nationwide`] = `${practicePercentage.toFixed(2)}%`;
+                });
+                const totalNational = getNationalTotal(selectedPractices);
+                const totalPercentage = totalNational > 0 ? (totalBenefits / totalNational) * 100 : 0;
+                row["Total Benefits"] = `$${totalBenefits.toLocaleString(undefined, { minimumFractionDigits: 2 })}`;
+                row["Percentage Nationwide"] = `${totalPercentage.toFixed(2)}%`;
+            }
+            return row;
+        });
+    }, [statePerformance, year, stateCodes, selectedPractices, getNationalTotal, getNationalTotalForPractice]);
+
+    const columns = React.useMemo(() => {
+        const cols = [
+            {
+                Header: "STATE",
+                accessor: "state"
+            }
+        ];
+        if (selectedPractices.includes("All Practices")) {
+            cols.push(
+                {
+                    Header: `Total ${programName} Benefits`,
+                    accessor: "Total Benefits",
+                    sortType: compareWithDollarSign
+                },
+                {
+                    Header: `${programName} Pct. Nationwide`,
+                    accessor: "Percentage Nationwide",
+                    sortType: compareWithPercentSign
+                }
+            );
+        } else {
+            cols.push(
+                {
+                    Header: "Total Benefits for Selected Practices",
+                    accessor: "Total Benefits",
+                    sortType: compareWithDollarSign
+                },
+                {
+                    Header: "Pct. Nationwide for Selected Practices",
+                    accessor: "Percentage Nationwide",
+                    sortType: compareWithPercentSign
+                }
+            );
+            selectedPractices.forEach((practice) => {
+                const displayName = practice.replace(/\s*\([a-zA-Z0-9]+\)$/, "");
+                cols.push(
+                    {
+                        Header: `${displayName}: Benefits`,
+                        accessor: `${displayName}: Benefits`,
+                        sortType: compareWithDollarSign
+                    },
+                    {
+                        Header: `${displayName}: Pct. Nationwide`,
+                        accessor: `${displayName}: Percentage Nationwide`,
+                        sortType: compareWithPercentSign
+                    }
+                );
+            });
+        }
+
+        return cols;
+    }, [selectedPractices]);
+
+    return (
+        <Box display="flex" justifyContent="center" sx={{ width: "100%" }}>
+            <Styles>
+                <Grid container columns={{ xs: 12 }} sx={{ display: "flex", justifyContent: "space-between" }}>
+                    <Grid item xs={12} justifyContent="flex-start" alignItems="center" sx={{ display: "flex" }}>
+                        <Box sx={{ width: "100%" }}>
+                            <Typography
+                                variant="h6"
+                                sx={{
+                                    fontWeight: 400,
+                                    paddingLeft: 0,
+                                    fontSize: "1.2em",
+                                    color: "#212121",
+                                    marginBottom: 4,
+                                    paddingTop: 0.6
+                                }}
+                            >
+                                {programName} Practice Benefits by State
+                            </Typography>
+                        </Box>
+                    </Grid>
+                </Grid>
+                <TableContainer sx={{ width: "100%" }}>
+                    <Table programName={programName} columns={columns} data={resultData} />
+                </TableContainer>
+            </Styles>
+        </Box>
+    );
+}
+export default TitleIIPracticeTable;
diff --git a/src/pages/CSPPage.tsx b/src/pages/CSPPage.tsx
index afdb1fa..4bbe62f 100644
--- a/src/pages/CSPPage.tsx
+++ b/src/pages/CSPPage.tsx
@@ -4,13 +4,14 @@ import { createTheme, ThemeProvider, Typography } from "@mui/material";
 import NavBar from "../components/NavBar";
 import Drawer from "../components/ProgramDrawer";
 import SemiDonutChart from "../components/SemiDonutChart";
-import DataTable from "../components/csp/CSPTotalTable";
-import CSPTotalMap from "../components/csp/CSPTotalMap";
+import DataTable from "../components/shared/titleii/TitleIIPracticeTable";
 import CategoryTable from "../components/csp/CategoryTable";
 import CategoryMap from "../components/csp/CategoryMap";
 import { config } from "../app.config";
 import { convertAllState, getJsonDataFromUrl } from "../utils/apiutil";
 import NavSearchBar from "../components/shared/NavSearchBar";
+import { PracticeName } from "../components/shared/titleii/Interface";
+import TitleIIPracticeMap from "../components/shared/titleii/TitleIIPracticeMap";
 
 export default function CSPPage(): JSX.Element {
     const [checked, setChecked] = React.useState(0);
@@ -26,6 +27,14 @@ export default function CSPPage(): JSX.Element {
     const [secondTotal, setSecondTotal] = React.useState(0);
     const [thirdTotal, setThirdTotal] = React.useState(0);
     const [zeroCategories, setZeroCategories] = React.useState([]);
+    const [isDataReady, setIsDataReady] = React.useState(false);
+
+    // connect to selector endpoint
+    const [selectedPractices, setSelectedPractices] = React.useState<string[]>(["All Practices"]);
+    const [cspPracticeNames, setCspPracticeNames] = React.useState<PracticeName[]>([]);
+    const handlePracticeChange = (practices: string[]) => {
+        setSelectedPractices(practices);
+    };
 
     const defaultTheme = createTheme();
     let landManagementTotal = 0;
@@ -53,30 +62,34 @@ export default function CSPPage(): JSX.Element {
     const csp_year = "2018-2022";
 
     React.useEffect(() => {
-        const state_perf_url = `${config.apiUrl}/titles/title-ii/programs/csp/state-distribution`;
-        getJsonDataFromUrl(state_perf_url).then((response) => {
-            const converted_perf_json = response;
-            setStatePerformance(converted_perf_json);
-        });
-
-        const allstates_url = `${config.apiUrl}/states`;
-        getJsonDataFromUrl(allstates_url).then((response) => {
-            const converted_json = response;
-            setAllStates(converted_json);
-        });
-
-        const statecode_url = `${config.apiUrl}/statecodes`;
-        getJsonDataFromUrl(statecode_url).then((response) => {
-            setStateCodesArray(response);
-            const converted_json = convertAllState(response);
-            setStateCodesData(converted_json);
-        });
-
-        const chartdata_url = `${config.apiUrl}/titles/title-ii/programs/csp/summary`;
-        getJsonDataFromUrl(chartdata_url).then((response) => {
-            const converted_chart_json = response;
-            processData(converted_chart_json);
-        });
+        const fetchData = async () => {
+            try {
+                const [
+                    statePerformanceResponse,
+                    allStatesResponse,
+                    stateCodesResponse,
+                    chartDataResponse,
+                    cspPracticeNameResponse
+                ] = await Promise.all([
+                    getJsonDataFromUrl(`${config.apiUrl}/titles/title-ii/programs/csp/state-distribution`),
+                    getJsonDataFromUrl(`${config.apiUrl}/states`),
+                    getJsonDataFromUrl(`${config.apiUrl}/statecodes`),
+                    getJsonDataFromUrl(`${config.apiUrl}/titles/title-ii/programs/csp/summary`),
+                    getJsonDataFromUrl(`${config.apiUrl}/titles/title-ii/programs/csp/practice-names`)
+                ]);
+                setStatePerformance(statePerformanceResponse);
+                setAllStates(allStatesResponse);
+                setStateCodesArray(stateCodesResponse);
+                const converted_json = convertAllState(stateCodesResponse);
+                setStateCodesData(converted_json);
+                processData(chartDataResponse);
+                setCspPracticeNames(cspPracticeNameResponse);
+                setIsDataReady(true);
+            } catch (error) {
+                console.error("Error fetching data:", error);
+            }
+        };
+        fetchData();
     }, []);
 
     const processData = (chartData) => {
@@ -228,11 +241,14 @@ export default function CSPPage(): JSX.Element {
                                 display: checked !== 0 ? "none" : "block"
                             }}
                         >
-                            <CSPTotalMap
-                                statePerformance={statePerformance}
+                            <TitleIIPracticeMap
+                                programName="CSP"
+                                initialStatePerformance={statePerformance}
                                 allStates={allStates}
                                 year={csp_year}
                                 stateCodes={stateCodesData}
+                                practiceNames={cspPracticeNames[csp_year]}
+                                onPracticeChange={handlePracticeChange}
                             />
                         </Box>
                         <Box
@@ -599,9 +615,11 @@ export default function CSPPage(): JSX.Element {
                         </Box>
                         <Box component="div" sx={{ display: checked !== 0 ? "none" : "block" }}>
                             <DataTable
+                                programName="CSP"
                                 statePerformance={statePerformance}
                                 year={csp_year}
                                 stateCodes={stateCodesArray}
+                                selectedPractices={selectedPractices}
                             />
                         </Box>
                         <Box component="div" sx={{ display: checked !== 1 ? "none" : "block" }}>
diff --git a/src/pages/EQIPPage.tsx b/src/pages/EQIPPage.tsx
index f527419..2ac7524 100644
--- a/src/pages/EQIPPage.tsx
+++ b/src/pages/EQIPPage.tsx
@@ -4,13 +4,14 @@ import { createTheme, ThemeProvider, Typography } from "@mui/material";
 import NavBar from "../components/NavBar";
 import Drawer from "../components/ProgramDrawer";
 import SemiDonutChart from "../components/SemiDonutChart";
-import DataTable from "../components/eqip/EQIPTotalTable";
-import EqipTotalMap from "../components/eqip/EQIPTotalMap";
+import DataTable from "../components/shared/titleii/TitleIIPracticeTable";
 import CategoryTable from "../components/eqip/CategoryTable";
 import CategoryMap from "../components/eqip/CategoryMap";
 import { config } from "../app.config";
 import { convertAllState, getJsonDataFromUrl } from "../utils/apiutil";
 import NavSearchBar from "../components/shared/NavSearchBar";
+import { PracticeName } from "../components/shared/titleii/Interface";
+import TitleIIPracticeMap from "../components/shared/titleii/TitleIIPracticeMap";
 
 export default function EQIPPage(): JSX.Element {
     const [checked, setChecked] = React.useState(0);
@@ -34,40 +35,52 @@ export default function EQIPPage(): JSX.Element {
     const [statePerformance, setStatePerformance] = React.useState({});
     const [allStates, setAllStates] = React.useState({});
     const [stateCodesData, setStateCodesData] = React.useState({});
-    const [stateCodesArray, setStateCodesArray] = React.useState([]);
+    const [stateCodesArray, setStateCodesArray] = React.useState<{ code: string; name: string }[]>([]);
     const [totalChartData, setTotalChartData] = React.useState([{}]);
     const [sixAChartData, setSixAChartData] = React.useState([{}]);
     const [sixBChartData, setSixBChartData] = React.useState([{}]);
     const [aTotal, setATotal] = React.useState(0);
     const [bTotal, setBTotal] = React.useState(0);
     const [zeroCategories, setZeroCategories] = React.useState([]);
+    const [isDataReady, setIsDataReady] = React.useState(false);
 
+    // connect to selector endpoint
+    const [selectedPractices, setSelectedPractices] = React.useState<string[]>(["All Practices"]);
+    const [eqipPracticeNames, setEqipPracticeNames] = React.useState<PracticeName[]>([]);
+    const handlePracticeChange = (practices: string[]) => {
+        setSelectedPractices(practices);
+    };
     const eqip_year = "2018-2022";
-    React.useEffect(() => {
-        const state_perf_url = `${config.apiUrl}/titles/title-ii/programs/eqip/state-distribution`;
-        getJsonDataFromUrl(state_perf_url).then((response) => {
-            const converted_perf_json = response;
-            setStatePerformance(converted_perf_json);
-        });
-
-        const allstates_url = `${config.apiUrl}/states`;
-        getJsonDataFromUrl(allstates_url).then((response) => {
-            const converted_json = response;
-            setAllStates(converted_json);
-        });
-
-        const statecode_url = `${config.apiUrl}/statecodes`;
-        getJsonDataFromUrl(statecode_url).then((response) => {
-            setStateCodesArray(response);
-            const converted_json = convertAllState(response);
-            setStateCodesData(converted_json);
-        });
 
-        const chartdata_url = `${config.apiUrl}/titles/title-ii/programs/eqip/summary`;
-        getJsonDataFromUrl(chartdata_url).then((response) => {
-            const converted_chart_json = response;
-            processData(converted_chart_json);
-        });
+    React.useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const [
+                    statePerformanceResponse,
+                    allStatesResponse,
+                    stateCodesResponse,
+                    chartDataResponse,
+                    eqipPracticeNameResponse
+                ] = await Promise.all([
+                    getJsonDataFromUrl(`${config.apiUrl}/titles/title-ii/programs/eqip/state-distribution`),
+                    getJsonDataFromUrl(`${config.apiUrl}/states`),
+                    getJsonDataFromUrl(`${config.apiUrl}/statecodes`),
+                    getJsonDataFromUrl(`${config.apiUrl}/titles/title-ii/programs/eqip/summary`),
+                    getJsonDataFromUrl(`${config.apiUrl}/titles/title-ii/programs/eqip/practice-names`)
+                ]);
+                setStatePerformance(statePerformanceResponse);
+                setAllStates(allStatesResponse);
+                setStateCodesArray(stateCodesResponse);
+                const converted_json = convertAllState(stateCodesResponse);
+                setStateCodesData(converted_json);
+                processData(chartDataResponse);
+                setEqipPracticeNames(eqipPracticeNameResponse);
+                setIsDataReady(true);
+            } catch (error) {
+                console.error("Error fetching data:", error);
+            }
+        };
+        fetchData();
     }, []);
 
     const processData = (chartData) => {
@@ -158,10 +171,7 @@ export default function EQIPPage(): JSX.Element {
 
     return (
         <ThemeProvider theme={defaultTheme}>
-            {allStates.length > 0 &&
-            statePerformance[eqip_year] !== undefined &&
-            zeroCategories.length > 0 &&
-            stateCodesArray.length > 0 ? (
+            {isDataReady ? (
                 <Box sx={{ width: "100%" }}>
                     <Box sx={{ position: "fixed", zIndex: 1400, width: "100%" }}>
                         <NavBar bkColor="rgba(255, 255, 255, 1)" ftColor="rgba(47, 113, 100, 1)" logo="light" />
@@ -176,11 +186,14 @@ export default function EQIPPage(): JSX.Element {
                             component="div"
                             sx={{ width: "85%", m: "auto", display: checked !== 0 ? "none" : "block" }}
                         >
-                            <EqipTotalMap
-                                statePerformance={statePerformance}
+                            <TitleIIPracticeMap
+                                programName="EQIP"
+                                initialStatePerformance={statePerformance}
                                 allStates={allStates}
                                 year={eqip_year}
                                 stateCodes={stateCodesData}
+                                practiceNames={eqipPracticeNames[eqip_year]}
+                                onPracticeChange={handlePracticeChange}
                             />
                         </Box>
                         <Box
@@ -379,9 +392,11 @@ export default function EQIPPage(): JSX.Element {
                         </Box>
                         <Box component="div" sx={{ display: checked !== 0 ? "none" : "block" }}>
                             <DataTable
+                                programName="EQIP"
                                 statePerformance={statePerformance}
                                 year={eqip_year}
                                 stateCodes={stateCodesArray}
+                                selectedPractices={selectedPractices}
                             />
                         </Box>
                         <Box component="div" sx={{ display: checked !== 1 ? "none" : "block" }}>