diff --git a/frontend/cypress/e2e/canList.cy.js b/frontend/cypress/e2e/canList.cy.js
index c947491673..0444ce86c5 100644
--- a/frontend/cypress/e2e/canList.cy.js
+++ b/frontend/cypress/e2e/canList.cy.js
@@ -4,6 +4,7 @@ import { terminalLog, testLogin } from "./utils";
 beforeEach(() => {
     testLogin("division-director");
     cy.visit("/cans").wait(1000);
+    cy.get("#fiscal-year-select").select("2023");
 });
 
 afterEach(() => {
@@ -29,10 +30,9 @@ describe("CAN List", () => {
     });
 
     it("should correctly filter all cans or my cans", () => {
-        cy.visit("/cans/");
         cy.get("tbody").children().should("have.length.greaterThan", 2);
-
         cy.visit("/cans/?filter=my-cans");
+        cy.get("#fiscal-year-select").select("2023");
         cy.get("tbody").children().should("have.length", 1);
     });
 
diff --git a/frontend/src/components/CANs/CANBudgetSummary/CANBudgetSummary.jsx b/frontend/src/components/CANs/CANBudgetSummary/CANBudgetSummary.jsx
index 7ea39313cc..56f38933ce 100644
--- a/frontend/src/components/CANs/CANBudgetSummary/CANBudgetSummary.jsx
+++ b/frontend/src/components/CANs/CANBudgetSummary/CANBudgetSummary.jsx
@@ -6,13 +6,14 @@ import { useEffect } from "react";
 import styles from "./CANBudgetSummary.module.css";
 import constants from "../../../constants";
 import { getPendingFunds } from "./util";
-import FiscalYear from "../../UI/FiscalYear/FiscalYear";
+import FiscalYear from "../../UI/FiscalYear";
 
 const CANBudgetSummary = () => {
     const dispatch = useDispatch();
     const canFiscalYear = useSelector((state) => state.canDetail.canFiscalYearObj);
     const pendingFunds = useSelector((state) => state.canDetail.pendingFunds);
     const selectedFiscalYear = useSelector((state) => state.canDetail.selectedFiscalYear);
+    const fiscalYear = Number(selectedFiscalYear.value);
     const urlPathParams = useParams();
     const canFiscalYearId = parseInt(urlPathParams.id);
 
@@ -54,7 +55,7 @@ const CANBudgetSummary = () => {
             <h2>Budget summary</h2>
 
             <FiscalYear
-                fiscalYear={selectedFiscalYear}
+                fiscalYear={fiscalYear}
                 handleChangeFiscalYear={setSelectedFiscalYear}
             />
 
@@ -67,7 +68,7 @@ const CANBudgetSummary = () => {
                 </thead>
                 <tbody>
                     <tr>
-                        <th scope="row">Total FY {selectedFiscalYear.value || constants.notFilledInText} Funding</th>
+                        <th scope="row">Total FY {fiscalYear || constants.notFilledInText} Funding</th>
                         {totalFiscalYearFundingTableData}
                     </tr>
                     <tr>
diff --git a/frontend/src/components/CANs/CANTable/CANTable.helpers.js b/frontend/src/components/CANs/CANTable/CANTable.helpers.js
index b3790efd4e..c83b848c02 100644
--- a/frontend/src/components/CANs/CANTable/CANTable.helpers.js
+++ b/frontend/src/components/CANs/CANTable/CANTable.helpers.js
@@ -25,3 +25,28 @@ export const formatObligateBy = (obligateBy) => {
         year: "2-digit"
     });
 };
+
+/**
+ * function to filter funding_budgets fiscal year by fiscal year
+ * @param {import("../CANTypes").CAN} can - CAN object
+ * @param {number} fiscalYear - Fiscal year to filter by
+ * @returns {number} - Fiscal year of the funding budget
+ */
+export function findFundingBudgetFYByFiscalYear(can, fiscalYear) {
+    if (!can || !fiscalYear) return 0;
+    const matchingBudget = can.funding_budgets.find((budget) => budget.fiscal_year === fiscalYear);
+
+    return matchingBudget ? matchingBudget.fiscal_year : 0;
+}
+/**
+ * function to filter funding_budgets budget by fiscal year
+ * @param {import("../CANTypes").CAN} can - CAN object
+ * @param {number} fiscalYear - Fiscal year to filter by
+ * @returns {number} - Fiscal year of the funding budget
+ */
+export function findFundingBudgetBudgetByFiscalYear(can, fiscalYear) {
+    if (!can || !fiscalYear) return 0;
+    const matchingBudget = can.funding_budgets.find((budget) => budget.fiscal_year === fiscalYear);
+
+    return matchingBudget ? matchingBudget.budget : 0;
+}
diff --git a/frontend/src/components/CANs/CANTable/CANTable.helpers.test.js b/frontend/src/components/CANs/CANTable/CANTable.helpers.test.js
index 3349b089e6..d4751264d7 100644
--- a/frontend/src/components/CANs/CANTable/CANTable.helpers.test.js
+++ b/frontend/src/components/CANs/CANTable/CANTable.helpers.test.js
@@ -1,4 +1,8 @@
-import { formatObligateBy } from "./CANTable.helpers";
+import {
+    findFundingBudgetBudgetByFiscalYear,
+    findFundingBudgetFYByFiscalYear,
+    formatObligateBy
+} from "./CANTable.helpers";
 
 describe("formatObligateBy", () => {
     test('returns "TBD" for undefined input', () => {
@@ -22,3 +26,55 @@ describe("formatObligateBy", () => {
         expect(formatObligateBy(2025)).toBe("09/30/24");
     });
 });
+
+describe("findFundingBudgetFYByFiscalYear", () => {
+    const mockCAN = {
+        funding_budgets: [
+            { fiscal_year: 2022, budget: 1000 },
+            { fiscal_year: 2023, budget: 2000 },
+            { fiscal_year: 2024, budget: 3000 }
+        ]
+    };
+
+    test("returns 0 for undefined CAN", () => {
+        expect(findFundingBudgetFYByFiscalYear(undefined, 2023)).toBe(0);
+    });
+
+    test("returns 0 for undefined fiscal year", () => {
+        expect(findFundingBudgetFYByFiscalYear(mockCAN, undefined)).toBe(0);
+    });
+
+    test("returns matching fiscal year when found", () => {
+        expect(findFundingBudgetFYByFiscalYear(mockCAN, 2023)).toBe(2023);
+    });
+
+    test("returns 0 when fiscal year not found", () => {
+        expect(findFundingBudgetFYByFiscalYear(mockCAN, 2025)).toBe(0);
+    });
+});
+
+describe("findFundingBudgetBudgetByFiscalYear", () => {
+    const mockCAN = {
+        funding_budgets: [
+            { fiscal_year: 2022, budget: 1000 },
+            { fiscal_year: 2023, budget: 2000 },
+            { fiscal_year: 2024, budget: 3000 }
+        ]
+    };
+
+    test("returns 0 for undefined CAN", () => {
+        expect(findFundingBudgetBudgetByFiscalYear(undefined, 2023)).toBe(0);
+    });
+
+    test("returns 0 for undefined fiscal year", () => {
+        expect(findFundingBudgetBudgetByFiscalYear(mockCAN, undefined)).toBe(0);
+    });
+
+    test("returns matching budget when fiscal year found", () => {
+        expect(findFundingBudgetBudgetByFiscalYear(mockCAN, 2023)).toBe(2000);
+    });
+
+    test("returns 0 when fiscal year not found", () => {
+        expect(findFundingBudgetBudgetByFiscalYear(mockCAN, 2025)).toBe(0);
+    });
+});
diff --git a/frontend/src/components/CANs/CANTable/CANTable.jsx b/frontend/src/components/CANs/CANTable/CANTable.jsx
index e55043a643..dde05cad1b 100644
--- a/frontend/src/components/CANs/CANTable/CANTable.jsx
+++ b/frontend/src/components/CANs/CANTable/CANTable.jsx
@@ -1,10 +1,14 @@
 import PropTypes from "prop-types";
 import React from "react";
 import PaginationNav from "../../UI/PaginationNav";
+import {
+    formatObligateBy,
+    findFundingBudgetBudgetByFiscalYear,
+    findFundingBudgetFYByFiscalYear
+} from "./CANTable.helpers";
 import CANTableHead from "./CANTableHead";
 import CANTableRow from "./CANTableRow";
 import styles from "./style.module.css";
-import { formatObligateBy } from "./CANTable.helpers";
 
 /**
  * CANTable component of CanList
@@ -12,15 +16,22 @@ import { formatObligateBy } from "./CANTable.helpers";
  * @typedef {import("../CANTypes").CAN} CAN
  * @param {Object} props
  * @param {CAN[]} props.cans - Array of CANs
+ * @param {number} props.fiscalYear - Fiscal year to filter by
  * @returns {JSX.Element}
  */
-const CANTable = ({ cans }) => {
+const CANTable = ({ cans, fiscalYear }) => {
+    // Filter CANs by fiscal year
+    const filteredCANsByFiscalYear = React.useMemo(() => {
+        if (!fiscalYear) return cans;
+        return cans.filter((can) => can.funding_budgets.some((budget) => budget.fiscal_year === fiscalYear));
+    }, [cans, fiscalYear]);
+    // TODO: once in prod, change this to 25
     const CANS_PER_PAGE = 10;
     const [currentPage, setCurrentPage] = React.useState(1);
-    let cansPerPage = [...cans];
+    let cansPerPage = [...filteredCANsByFiscalYear];
     cansPerPage = cansPerPage.slice((currentPage - 1) * CANS_PER_PAGE, currentPage * CANS_PER_PAGE);
 
-    if (cans.length === 0) {
+    if (cansPerPage.length === 0) {
         return <p className="text-center">No CANs found</p>;
     }
 
@@ -36,16 +47,16 @@ const CANTable = ({ cans }) => {
                             name={can.display_name ?? "TBD"}
                             nickname={can.nick_name ?? "TBD"}
                             portfolio={can.portfolio.abbreviation}
-                            fiscalYear={can.funding_budgets[0]?.fiscal_year ?? "TBD"}
+                            fiscalYear={findFundingBudgetFYByFiscalYear(can, fiscalYear)}
                             activePeriod={can.active_period ?? 0}
                             obligateBy={formatObligateBy(can.obligate_by)}
                             transfer={can.funding_details.method_of_transfer ?? "TBD"}
-                            fyBudget={can.funding_budgets[0]?.budget ?? 0}
+                            fyBudget={findFundingBudgetBudgetByFiscalYear(can, fiscalYear)}
                         />
                     ))}
                 </tbody>
             </table>
-            {cans.length > 0 && (
+            {filteredCANsByFiscalYear.length > CANS_PER_PAGE && (
                 <PaginationNav
                     currentPage={currentPage}
                     setCurrentPage={setCurrentPage}
@@ -58,7 +69,8 @@ const CANTable = ({ cans }) => {
 };
 
 CANTable.propTypes = {
-    cans: PropTypes.array.isRequired
+    cans: PropTypes.array.isRequired,
+    fiscalYear: PropTypes.number
 };
 
 export default CANTable;
diff --git a/frontend/src/components/CANs/CANTable/CANTable.test.jsx b/frontend/src/components/CANs/CANTable/CANTable.test.jsx
index 0d77969497..a6a47a6ba1 100644
--- a/frontend/src/components/CANs/CANTable/CANTable.test.jsx
+++ b/frontend/src/components/CANs/CANTable/CANTable.test.jsx
@@ -66,16 +66,6 @@ describe("CANTable", () => {
         expect(screen.getByText("No CANs found")).toBeInTheDocument();
     });
 
-    it("renders PaginationNav when there are CANs", () => {
-        render(
-            <MemoryRouter>
-                <CANTable cans={cans} />
-            </MemoryRouter>
-        );
-
-        expect(screen.getByTestId("pagination-nav")).toBeInTheDocument();
-    });
-
     it("does not render PaginationNav when there are no CANs", () => {
         render(
             <MemoryRouter>
diff --git a/frontend/src/components/Layouts/TablePageLayout/TablePageLayout.jsx b/frontend/src/components/Layouts/TablePageLayout/TablePageLayout.jsx
index 0b6bed8bb5..d17427fb6f 100644
--- a/frontend/src/components/Layouts/TablePageLayout/TablePageLayout.jsx
+++ b/frontend/src/components/Layouts/TablePageLayout/TablePageLayout.jsx
@@ -7,31 +7,33 @@ import icons from "../../../uswds/img/sprite.svg";
  *
  * @component
  * @param {object} props - The component props.
+ * @param {string} [props.buttonLink] - The link to navigate to when the button is clicked.
+ * @param {string} [props.buttonText] - The text to display on the button.
  * @param {React.ReactNode} [props.children] - The children to render - optional.
- * @param {string} props.title - The title to display.
- * @param {string} props.subtitle - The subtitle to display.
  * @param {string} props.details - The details to display.
- * @param {React.ReactNode} props.TabsSection - The tabs to display.
- * @param {React.ReactNode} [props.FilterTags] - The filter tags to display.
  * @param {React.ReactNode} [props.FilterButton] - The filter button to display.
- * @param {React.ReactNode} [props.TableSection] - The table to display.
+ * @param {React.ReactNode} [props.FilterTags] - The filter tags to display.
+ * @param {React.ReactNode} [props.FYSelect] - The fiscal year select to display.
+ * @param {string} props.subtitle - The subtitle to display.
  * @param {React.ReactNode} [props.SummaryCardsSection] - The summary cards to display.
- * @param {string} [props.buttonText] - The text to display on the button.
- * @param {string} [props.buttonLink] - The link to navigate to when the button is clicked.
+ * @param {React.ReactNode} [props.TableSection] - The table to display.
+ * @param {React.ReactNode} props.TabsSection - The tabs to display.
+ * @param {string} props.title - The title to display.
  * @returns {JSX.Element} - The rendered component.
  */
 export const TablePageLayout = ({
+    buttonLink,
+    buttonText,
     children,
-    title,
-    subtitle,
     details,
-    TabsSection,
+    FilterButton = null,
     FilterTags = null,
+    FYSelect,
+    subtitle,
     SummaryCardsSection,
-    FilterButton = null,
     TableSection = null,
-    buttonText,
-    buttonLink
+    TabsSection,
+    title
 }) => {
     return (
         <>
@@ -52,7 +54,10 @@ export const TablePageLayout = ({
                     </Link>
                 )}
             </div>
-            {TabsSection}
+            <div className="display-flex flex-align-center flex-justify padding-y-1">
+                {TabsSection}
+                {FYSelect && FYSelect}
+            </div>
             <div className="display-flex flex-justify padding-y-1">
                 <div>
                     <h2 className="margin-0">{subtitle}</h2>
@@ -71,15 +76,16 @@ export const TablePageLayout = ({
 export default TablePageLayout;
 
 TablePageLayout.propTypes = {
+    buttonLink: PropTypes.string,
+    buttonText: PropTypes.string,
     children: PropTypes.node,
-    title: PropTypes.string.isRequired,
-    subtitle: PropTypes.string.isRequired,
     details: PropTypes.string.isRequired,
-    TabsSection: PropTypes.node.isRequired,
-    FilterTags: PropTypes.node,
     FilterButton: PropTypes.node,
-    TableSection: PropTypes.node,
+    FilterTags: PropTypes.node,
+    FYSelect: PropTypes.node,
+    subtitle: PropTypes.string.isRequired,
     SummaryCardsSection: PropTypes.node,
-    buttonText: PropTypes.string,
-    buttonLink: PropTypes.string
+    TableSection: PropTypes.node,
+    TabsSection: PropTypes.node.isRequired,
+    title: PropTypes.string.isRequired
 };
diff --git a/frontend/src/components/UI/FiscalYear/FiscalYear.jsx b/frontend/src/components/UI/FiscalYear/FiscalYear.jsx
index 4140173d68..6675354deb 100644
--- a/frontend/src/components/UI/FiscalYear/FiscalYear.jsx
+++ b/frontend/src/components/UI/FiscalYear/FiscalYear.jsx
@@ -1,29 +1,41 @@
-import constants from "../../../constants";
 import { useDispatch } from "react-redux";
-import styles from "./FiscalYear.module.css";
+import constants from "../../../constants";
 
+/**
+ * FiscalYear component for selecting a fiscal year
+ * @param {Object} props - Component props
+ * @param {number} props.fiscalYear - Current fiscal year selected
+ * @param {Function} props.handleChangeFiscalYear - Function to handle fiscal year change
+ * @returns {JSX.Element} FiscalYear component
+ */
 const FiscalYear = ({ fiscalYear, handleChangeFiscalYear }) => {
     const dispatch = useDispatch();
 
+    /**
+     * Handles the change of fiscal year
+     * @param {React.ChangeEvent<HTMLSelectElement>} event - The change event
+     */
     const onChangeFiscalYear = (event) => {
         dispatch(handleChangeFiscalYear({ value: event.target.value }));
     };
 
-    const fiscalYearClasses = `usa-select ${styles.fiscalYearSelector}`;
-
     return (
-        <div className={styles.container}>
+        <div
+            className="display-flex flex-justify flex-align-center"
+            style={{ width: "10.625rem" }}
+        >
             <label
-                className="font-sans-xs text-bold"
+                className="font-sans-xs"
                 htmlFor="fiscal-year-select"
             >
                 Fiscal Year
             </label>
             <select
                 id="fiscal-year-select"
-                className={fiscalYearClasses}
+                className="usa-select margin-left-1"
+                style={{ width: "5rem" }}
                 onChange={onChangeFiscalYear}
-                value={fiscalYear?.value}
+                value={fiscalYear}
             >
                 {constants.fiscalYears.map((year) => {
                     return (
diff --git a/frontend/src/components/UI/FiscalYear/FiscalYear.module.css b/frontend/src/components/UI/FiscalYear/FiscalYear.module.css
deleted file mode 100644
index 79752c7824..0000000000
--- a/frontend/src/components/UI/FiscalYear/FiscalYear.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.fiscalYearSelector {
-    width: 90px;
-    display: inline-block;
-    margin-left: 20px;
-}
-
-.container {
-    align-items: center;
-    justify-content: center;
-}
diff --git a/frontend/src/components/UI/FiscalYear/FiscalYear.test.js b/frontend/src/components/UI/FiscalYear/FiscalYear.test.js
index a66fa91326..d85b180b3e 100644
--- a/frontend/src/components/UI/FiscalYear/FiscalYear.test.js
+++ b/frontend/src/components/UI/FiscalYear/FiscalYear.test.js
@@ -1,12 +1,15 @@
-import store from "../../../store";
-import { Provider } from "react-redux";
 import { render } from "@testing-library/react";
+import { Provider } from "react-redux";
+import store from "../../../store";
 import FiscalYear from "./FiscalYear";
 
 it("renders without crashing", () => {
     render(
         <Provider store={store}>
-            <FiscalYear />
+            <FiscalYear
+                fiscalYear={2024}
+                handleChangeFiscalYear={() => {}}
+            />
         </Provider>
     );
 });
diff --git a/frontend/src/components/UI/FiscalYear/index.js b/frontend/src/components/UI/FiscalYear/index.js
new file mode 100644
index 0000000000..27acdf4953
--- /dev/null
+++ b/frontend/src/components/UI/FiscalYear/index.js
@@ -0,0 +1 @@
+export { default } from "./FiscalYear";
diff --git a/frontend/src/components/UI/Select/Select.jsx b/frontend/src/components/UI/Select/Select.jsx
index b3ecb7d014..70cb090602 100644
--- a/frontend/src/components/UI/Select/Select.jsx
+++ b/frontend/src/components/UI/Select/Select.jsx
@@ -10,8 +10,8 @@ import IsRequiredHelper from "../Form/IsRequiredHelper";
  * @param {Function} props.onChange - A function to call when the input value changes.
  * @param {string} props.value - The currently selected option
  * @param {boolean} [props.pending] - A flag to indicate if the input is pending (optional).
- * @param {Array<String>} [props.messages] - An array of error messages to display (optional).
- * @param {Array<Object>} [props.options] - An array of options to display (optional).
+ * @param {string[]} [props.messages] - An array of error messages to display (optional).
+ * @param {Object[]} [props.options] - An array of options to display (optional).
  * @param {boolean} [props.valueOverride] - A flag to indicate if the value should be an index (optional).
  * @param {string} [props.className] - Additional CSS classes to apply to the component (optional).
  * @param {string} [props.legendClassname] - Additional CSS classes to apply to the legend (optional).
@@ -50,7 +50,7 @@ const Select = ({
     return (
         <fieldset className={cx("usa-fieldset", pending && "pending", className)}>
             <label
-                className={`usa-label margin-top-0 ${legendClassname} ${messages.length ? "usa-label--error" : ""} `}
+                className={`usa-label margin-top-0 ${legendClassname ? legendClassname : ""} ${messages.length ? "usa-label--error" : ""} `}
                 htmlFor={name}
             >
                 {label}
diff --git a/frontend/src/components/Users/User.constants.js b/frontend/src/components/Users/User.constants.js
new file mode 100644
index 0000000000..e32fa766a1
--- /dev/null
+++ b/frontend/src/components/Users/User.constants.js
@@ -0,0 +1,34 @@
+/**
+ * Enum for User roles.
+ * This object maps the roles that can be assigned to a user to their string representations.
+ *
+ * @enum {string}
+ * @property {string} USER_ADMIN - Represents a user admin role.
+ * @property {string} BUDGET_TEAM - Represents a budget team role.
+ * @property {string} ADMIN - Represents an admin role.
+ * @property {string} DIVISION_DIRECTOR - Represents a division director role.
+ * @property {string} USER - Represents a user role.
+ * @property {string} UNASSIGNED - Represents an unassigned role.
+ */
+export const USER_ROLES = {
+    USER_ADMIN: "USER_ADMIN",
+    BUDGET_TEAM: "BUDGET_TEAM",
+    ADMIN: "admin",
+    DIVISION_DIRECTOR: "division-director",
+    USER: "user",
+    UNASSIGNED: "unassigned"
+};
+
+/**
+ * Enum for User statuses.
+ * This object maps the statuses that can be assigned to a user to their string representations.
+ * @enum {string}
+ * @property {string} ACTIVE - Represents an active status.
+ * @property {string} INACTIVE - Represents an inactive status.
+ * @property {string} LOCKED - Represents a locked status.
+ */
+export const USER_STATUS = {
+    ACTIVE: "ACTIVE",
+    INACTIVE: "INACTIVE",
+    LOCKED: "LOCKED"
+};
diff --git a/frontend/src/components/Users/UserTypes.d.ts b/frontend/src/components/Users/UserTypes.d.ts
index 7550eb9890..b8b91976a9 100644
--- a/frontend/src/components/Users/UserTypes.d.ts
+++ b/frontend/src/components/Users/UserTypes.d.ts
@@ -1,3 +1,5 @@
+import { USER_ROLES, USER_STATUS } from "./User.constants";
+
 export type SafeUser = {
     email: string;
     full_name: string;
@@ -14,13 +16,13 @@ export type User = {
     id: number;
     last_name: string;
     oidc_id: string;
-    roles: UserRoles[];
-    status: UserStatus;
+    roles: UserRolesValues[];
+    status: UserStatusValues;
     created_by?: number;
     created_on: Date;
     updated_by?: number;
     updated_on: Date;
 };
 
-type UserRoles = "USER_ADMIN" | "BUDGET_TEAM" | "admin" | "division-director" | "user" | "unassigned";
-type UserStatus = "ACTIVE" | "INACTIVE" | "LOCKED";
+type UserRoleValues = (typeof UserRoles)[keyof typeof UserRoles];
+type UserStatusValues = (typeof UserStatus)[keyof typeof UserStatus];
diff --git a/frontend/src/pages/cans/list/CanList.helpers.js b/frontend/src/pages/cans/list/CanList.helpers.js
index 31d6d58088..240c6891bf 100644
--- a/frontend/src/pages/cans/list/CanList.helpers.js
+++ b/frontend/src/pages/cans/list/CanList.helpers.js
@@ -1,3 +1,5 @@
+import { USER_ROLES } from "../../../components/Users/User.constants";
+
 /**
  * Sorts an array of CANs by obligateBy date in descending order.
  * @typedef {import("../../../components/CANs/CANTypes").CAN} CAN
@@ -10,7 +12,28 @@ export const sortAndFilterCANs = (cans, myCANsUrl, activeUser) => {
     if (!cans || cans.length === 0) {
         return [];
     }
-    let filteredCANs = myCANsUrl ? cans.filter((can) => can.portfolio.division_id === activeUser.division) : cans;
+
+    const { roles, id: userId, division: userDivisionId } = activeUser;
+
+    const filteredCANs = cans.filter((can) => {
+        // Always include CAN if the user is not filtering by "my-CANs"
+        if (!myCANsUrl) return true;
+
+        // Check if user has any role that allows access to all CANs
+        if (roles.some((role) => [USER_ROLES.ADMIN].includes(role))) return true;
+
+        // Filter based on specific roles division directors and budget team
+        if (roles.includes(USER_ROLES.DIVISION_DIRECTOR || USER_ROLES.BUDGET_TEAM)) {
+            return can.portfolio.division_id === userDivisionId;
+        }
+        // Filter based on team members
+        if (roles.includes(USER_ROLES.USER)) {
+            return can.budget_line_items.some((bli) => bli.team_members.some((member) => member.id === userId));
+        }
+
+        // If no specific role matches, don't include the CAN
+        return false;
+    });
 
     return sortCANs(filteredCANs);
 };
diff --git a/frontend/src/pages/cans/list/CanList.helpers.test.js b/frontend/src/pages/cans/list/CanList.helpers.test.js
index 09ec863b20..a47f1c2ec3 100644
--- a/frontend/src/pages/cans/list/CanList.helpers.test.js
+++ b/frontend/src/pages/cans/list/CanList.helpers.test.js
@@ -1,14 +1,46 @@
 import { describe, it, expect } from "vitest";
 import { sortAndFilterCANs } from "./CanList.helpers";
+import { USER_ROLES } from "../../../components/Users/User.constants";
 
 describe("sortAndFilterCANs", () => {
-    const mockUser = { division: 1 };
+    const mockUser = {
+        id: 1,
+        roles: [USER_ROLES.USER],
+        division: 1,
+        display_name: "Test User",
+        email: "test@example.com",
+        first_name: "Test",
+        full_name: "Test User",
+        last_name: "User",
+        permissions: [],
+        username: "testuser"
+    };
 
     const mockCANs = [
-        { id: 1, obligate_by: "2023", portfolio: { division_id: 1 } },
-        { id: 2, obligate_by: "2023", portfolio: { division_id: 2 } },
-        { id: 3, obligate_by: "2023", portfolio: { division_id: 1 } },
-        { id: 4, obligate_by: null, portfolio: { division_id: 1 } }
+        {
+            id: 1,
+            obligate_by: "2023-12-31",
+            portfolio: { division_id: 1 },
+            budget_line_items: [{ team_members: [{ id: 1 }] }]
+        },
+        {
+            id: 2,
+            obligate_by: "2023-11-30",
+            portfolio: { division_id: 2 },
+            budget_line_items: []
+        },
+        {
+            id: 3,
+            obligate_by: "2023-10-31",
+            portfolio: { division_id: 1 },
+            budget_line_items: [{ team_members: [{ id: 2 }] }]
+        },
+        {
+            id: 4,
+            obligate_by: null,
+            portfolio: { division_id: 1 },
+            budget_line_items: []
+        }
     ];
 
     it("should return an empty array when input is null or empty", () => {
@@ -18,22 +50,35 @@ describe("sortAndFilterCANs", () => {
 
     it("should sort CANs by obligate_by date in descending order", () => {
         const result = sortAndFilterCANs(mockCANs, false, mockUser);
-        expect(result.map((can) => can.id)).toEqual([1, 2, 3, 4]);
+        expect(result?.map((can) => can.id)).toEqual([1, 2, 3, 4]);
     });
 
-    it("should filter CANs by user division when myCANsUrl is true", () => {
+    it("should filter CANs by user's team membership when myCANsUrl is true", () => {
         const result = sortAndFilterCANs(mockCANs, true, mockUser);
-        expect(result.length).toBe(3);
-        expect(result.every((can) => can.portfolio.division_id === 1)).toBe(true);
+        expect(result?.length).toBe(1);
+        expect(result?.[0].id).toBe(1);
     });
 
     it("should not filter CANs when myCANsUrl is false", () => {
         const result = sortAndFilterCANs(mockCANs, false, mockUser);
-        expect(result.length).toBe(4);
+        expect(result?.length).toBe(4);
     });
 
     it("should handle CANs with null obligate_by dates", () => {
         const result = sortAndFilterCANs(mockCANs, false, mockUser);
-        expect(result[result.length - 1].id).toBe(4);
+        expect(result?.[result.length - 1].id).toBe(4);
+    });
+
+    it("should allow admin to see all CANs when myCANsUrl is true", () => {
+        const adminUser = { ...mockUser, roles: [USER_ROLES.ADMIN] };
+        const result = sortAndFilterCANs(mockCANs, true, adminUser);
+        expect(result?.length).toBe(4);
+    });
+
+    it("should filter CANs by division for division directors and budget team", () => {
+        const divisionDirector = { ...mockUser, roles: [USER_ROLES.DIVISION_DIRECTOR] };
+        const result = sortAndFilterCANs(mockCANs, true, divisionDirector);
+        expect(result?.length).toBe(3);
+        expect(result?.every((can) => can.portfolio.division_id === 1)).toBe(true);
     });
 });
diff --git a/frontend/src/pages/cans/list/CanList.jsx b/frontend/src/pages/cans/list/CanList.jsx
index 17217788bd..5f7ca6e24a 100644
--- a/frontend/src/pages/cans/list/CanList.jsx
+++ b/frontend/src/pages/cans/list/CanList.jsx
@@ -5,6 +5,8 @@ import App from "../../../App";
 import CANTable from "../../../components/CANs/CANTable";
 import CANTags from "../../../components/CANs/CanTabs";
 import TablePageLayout from "../../../components/Layouts/TablePageLayout";
+import FiscalYear from "../../../components/UI/FiscalYear";
+import { setSelectedFiscalYear } from "../../../pages/cans/detail/canDetailSlice";
 import ErrorPage from "../../ErrorPage";
 import { sortAndFilterCANs } from "./CanList.helpers";
 
@@ -19,6 +21,8 @@ const CanList = () => {
     const myCANsUrl = searchParams.get("filter") === "my-cans";
     const { data: canList, isError, isLoading } = useGetCansQuery({});
     const activeUser = useSelector((state) => state.auth.activeUser);
+    const selectedFiscalYear = useSelector((state) => state.canDetail.selectedFiscalYear);
+    const fiscalYear = Number(selectedFiscalYear.value);
     const sortedCANs = sortAndFilterCANs(canList, myCANsUrl, activeUser) || [];
 
     if (isLoading) {
@@ -31,6 +35,15 @@ const CanList = () => {
     if (isError) {
         return <ErrorPage />;
     }
+
+    const CANFiscalYearSelect = () => {
+        return (
+            <FiscalYear
+                fiscalYear={fiscalYear}
+                handleChangeFiscalYear={setSelectedFiscalYear}
+            />
+        );
+    };
     // TODO: remove flag once CANS are ready
     return (
         import.meta.env.DEV && (
@@ -44,7 +57,13 @@ const CanList = () => {
                             : "This is a list of all CANs across OPRE that are or were active within the selected Fiscal Year."
                     }
                     TabsSection={<CANTags />}
-                    TableSection={<CANTable cans={sortedCANs} />}
+                    TableSection={
+                        <CANTable
+                            cans={sortedCANs}
+                            fiscalYear={fiscalYear}
+                        />
+                    }
+                    FYSelect={<CANFiscalYearSelect />}
                 />
             </App>
         )
diff --git a/frontend/src/pages/portfolios/detail/PortfolioDetail.jsx b/frontend/src/pages/portfolios/detail/PortfolioDetail.jsx
index decacba0ad..16137f95e7 100644
--- a/frontend/src/pages/portfolios/detail/PortfolioDetail.jsx
+++ b/frontend/src/pages/portfolios/detail/PortfolioDetail.jsx
@@ -20,7 +20,8 @@ const PortfolioDetail = () => {
     const urlPathParams = useParams();
     const portfolioId = parseInt(urlPathParams.id);
     const portfolioCans = useSelector((state) => state.portfolio.portfolioCans);
-    const fiscalYear = useSelector((state) => state.portfolio.selectedFiscalYear);
+    const selectedFiscalYear = useSelector((state) => state.portfolio.selectedFiscalYear);
+    const fiscalYear = Number(selectedFiscalYear.value);
     const portfolio = useSelector((state) => state.portfolio.portfolio);
 
     // Get initial Portfolio data (not dependent on fiscal year)
@@ -40,7 +41,7 @@ const PortfolioDetail = () => {
     // Get CAN data for the Portfolio (dependent on fiscal year)
     useEffect(() => {
         const getPortfolioCansAndSetState = async () => {
-            const result = await getPortfolioCans(portfolioId, fiscalYear.value);
+            const result = await getPortfolioCans(portfolioId, fiscalYear);
             dispatch(setPortfolioCans(result));
         };
 
@@ -49,7 +50,7 @@ const PortfolioDetail = () => {
         return () => {
             dispatch(setPortfolioCans([]));
         };
-    }, [dispatch, portfolioId, fiscalYear]);
+    }, [dispatch, portfolioId, selectedFiscalYear]);
 
     // Get CAN Funding Data (dependent on fiscal year)
     useEffect(() => {
@@ -58,7 +59,7 @@ const PortfolioDetail = () => {
             dispatch(setPortfolioCansFundingDetails(result));
         };
 
-        const canData = portfolioCans.map((can) => ({ id: can.id, fiscalYear: fiscalYear.value }));
+        const canData = portfolioCans.map((can) => ({ id: can.id, fiscalYear: fiscalYear }));
 
         if (canData.length > 0) {
             getPortfolioCansFundingDetailsAndSetState(canData).catch(console.error);
@@ -66,13 +67,13 @@ const PortfolioDetail = () => {
         return () => {
             dispatch(setPortfolioCansFundingDetails([]));
         };
-    }, [dispatch, fiscalYear, portfolioCans]);
+    }, [dispatch, selectedFiscalYear, portfolioCans]);
 
     const canCards = portfolioCans.length
         ? portfolioCans.map((can, i) => (
               <CanCard
                   can={can}
-                  fiscalYear={fiscalYear.value}
+                  fiscalYear={fiscalYear}
                   key={i}
               />
           ))