diff --git a/app/components/CapitalProjectsAccordionPanel.tsx b/app/components/CapitalProjectsAccordionPanel.tsx
index 2071783..c59f92c 100644
--- a/app/components/CapitalProjectsAccordionPanel.tsx
+++ b/app/components/CapitalProjectsAccordionPanel.tsx
@@ -1,7 +1,8 @@
 import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Flex, HStack, Heading, IconButton } from "@nycplanning/streetscape"
-import { CapitalProject } from "~/gen";
+import { Agency, CapitalProject } from "~/gen";
 import { CapitalProjectsList } from "./CapitalProjectsList";
 import { ChevronLeftIcon } from "@chakra-ui/icons";
+import { Divider } from "@chakra-ui/react";
 
 export interface CapitalProjectsAccordionPanelProps {
     capitalProjects: Array<CapitalProject>;
@@ -10,10 +11,11 @@ export interface CapitalProjectsAccordionPanelProps {
     path: string;
     offset: number;
     total: number;
+    agencies: Agency[];
 }
 
 export const CapitalProjectsAccordionPanel = ({
-    capitalProjects, district, limit, offset, total, path
+    capitalProjects, district, limit, offset, total, path, agencies,
 }: CapitalProjectsAccordionPanelProps) => {
     return (
         <Flex
@@ -27,28 +29,36 @@ export const CapitalProjectsAccordionPanel = ({
         gap={4}
     >
 <Accordion allowToggle>
-            <AccordionItem>
+            <AccordionItem border="none">
                 <h2>
-                <AccordionButton>
+                <AccordionButton padding="0px">
                
-               <HStack justify="space-between">
+               <Box as='span' flex='1' textAlign='left'>
+                {/* <p>sdlkfja;sdlkjf;sa</p> */}
                    <Heading color="gray.600" fontWeight={"bold"} fontSize={"lg"}>
                    {district}
                    </Heading>
-                   <AccordionIcon />
-               </HStack>
+                  
+               </Box>
+               <AccordionIcon size="lg" />
                </AccordionButton>
                 </h2>
                 
         
                 
-                <AccordionPanel>
+                <AccordionPanel padding={"0px"}>
+                <p>sadlkfja;dsk</p>
+                <Box padding="20px">
+                <Divider borderColor={'cyan'} orientation="horizontal" />
+
+                </Box>
                 <CapitalProjectsList
                     capitalProjects={capitalProjects}
                     limit={limit}
                     offset={offset}
                     path={path}
                     total={total}
+                    agencies={agencies}
                 /> 
                 </AccordionPanel>
             </AccordionItem>
diff --git a/app/components/CapitalProjectsList.tsx b/app/components/CapitalProjectsList.tsx
index 7be0976..7cdcc7d 100644
--- a/app/components/CapitalProjectsList.tsx
+++ b/app/components/CapitalProjectsList.tsx
@@ -1,6 +1,6 @@
 import { Box, Flex, Hide, FlexProps, VStack, HStack, IconButton, Link} from "@nycplanning/streetscape";
 import { useState } from "react";
-import { CapitalProject } from "~/gen";
+import { Agency, CapitalProject } from "~/gen";
 import { getYear, getMonth, compareAsc } from "date-fns";
 import { CapitalProjectsListItem } from "./CapitalProjectsListItem";
 import { Button } from "@chakra-ui/react";
@@ -15,11 +15,12 @@ export interface CapitalProjectsListProps {
     limit: number;
     offset: number;
     total: number;
+    agencies: Agency[];
     path: string;
 }
 
 export const CapitalProjectsList = ({
-    capitalProjects, limit, offset, total, path
+    capitalProjects, limit, offset, total, path, agencies,
 }: CapitalProjectsListProps) => {
 
     const [searchParams] = useSearchParams();
@@ -66,27 +67,17 @@ export const CapitalProjectsList = ({
 
     // const Pagination = () => <Button colorScheme="blue" borderRadius="0" aria-label="Page" size="xs">{offset+1}</Button>
     return (
-
-        // <Hide above="lg">
-        // <Box
-        //     height={"4px"}
-        //     width={20}
-        //     backgroundColor={"gray.300"}
-        //     borderRadius="2px"
-        //     alignSelf={"center"}
-        //     role="button"
-        //     aria-label={
-        //       isExpanded
-        //         ? "Collapse project detail panel"
-        //         : "Expand project detail panel"
-        //     }
-        //     onClick={() => {
-        //       setIsExpanded(!isExpanded);
-        //     }}
-        // />
-        // </Hide>
         <>
-        <Box>
+        <Flex
+        direction={"column"}
+        overflow={"hidden"}
+        >
+
+    
+        <Box
+            height={{ base: isExpanded ? "70vh" : "70vh"}}
+            overflowY={{ base: "scroll" }}
+        >
             {/* this should be a generic panel for project detail and list */}
             
             {/* we need a separate component for project list item */}
@@ -100,7 +91,9 @@ export const CapitalProjectsList = ({
                         description={capitalProject.description}
                         minDate={capitalProject.minDate}
                         maxDate={capitalProject.maxDate}
-                        agency= {capitalProject.managingAgency}
+                        agency= { agencies.find(
+                            (agency) => agency.initials === capitalProject.managingAgency,
+                          )?.name }
                         yearRange={formatFiscalYearRange(
                             new Date(capitalProject.minDate),
                             new Date(capitalProject.maxDate),
@@ -110,34 +103,10 @@ export const CapitalProjectsList = ({
             })}
             </VStack>
         </Box>
+        </Flex>
         <HStack>
-        <Button
-        size="xs"
-        variant="outline"
-      >
-        {/* <Link
-          to={{
-            search: setSearchParamsString(searchParams, {
-              $skip: 0,
-            }),
-          }}
-          preventScrollReset
-          prefetch="intent"
-          className="text-neutral-600"
-        >
-          <span className="sr-only"> First page</span>
-          <Icon name="double-arrow-left" />
-        </Link> */}
-      </Button>
-      <Pagination total={10} path={path} />
-
-           {/* We cannot know the size of the capital projects so we need to test out the 'next' offset to determine whether or not we should disable  */}
-            {/* <HStack>
-            <IconButton variant="ghost" aria-label='Search database' icon={<ArrowLeftIcon />} />
-            <Pagination />   
-            <IconButton variant="ghost" aria-label='Search database' icon={<ArrowRightIcon />} /> 
-            </HStack> */}
-            
+    
+        <Pagination total={10} path={path} />            
         </HStack>
         
         </>
diff --git a/app/components/CapitalProjectsListItem.tsx b/app/components/CapitalProjectsListItem.tsx
index c4ea471..703387c 100644
--- a/app/components/CapitalProjectsListItem.tsx
+++ b/app/components/CapitalProjectsListItem.tsx
@@ -6,7 +6,7 @@ export interface CapitalProjectsListItemProps {
     description: string;
     minDate: string;
     maxDate: string;
-    agency: string;
+    agency: string | undefined;
     yearRange: string;
 }
 
diff --git a/app/components/Pagination.tsx b/app/components/Pagination.tsx
index 20b6a75..c3cd4ce 100644
--- a/app/components/Pagination.tsx
+++ b/app/components/Pagination.tsx
@@ -1,5 +1,5 @@
 import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
-import { HStack, IconButton } from "@nycplanning/streetscape";
+import { Flex, HStack, IconButton } from "@nycplanning/streetscape";
 import { useSearchParams } from "@remix-run/react";
 import { Button } from "@chakra-ui/button";
 import { Link } from "@remix-run/react";
@@ -16,23 +16,29 @@ export const Pagination = ({total, path}: PaginationProps) => {
     const limit = Number(searchParams.get("limit"));
     const offset = Number(searchParams.get("offset"));
 
-    const currentPage = Math.floor(offset / limit) + 1;
+    const currentPage = offset === 0 ? 1 : offset / limit + 1;
+    console.log(currentPage);
     const canSkipBackward = offset > 0;
     const canSkipForward = total === limit;
 
-    // const skip
+    const search = `?limit=7&offset=`; 
     return (
-        <HStack>
-            
-                <Link
-                    to={{
-                        search: {},
-                      }}
-                >
-                    <IconButton disable={!canSkipBackward} size="s" aria-label="Add" icon={<ChevronLeftIcon />}/>
-                </Link>
-            <Button size="sm" aria-label="Page">{currentPage}</Button>
-            <IconButton  disable={!canSkipBackward} size="s" aria-label="Add" icon={<ChevronRightIcon />} />
-        </HStack>
+        <Flex
+            paddingTop="16px"
+        >
+            <HStack>
+            <Link
+                to={{search: search + `${offset - 7}`}}
+            >
+                <IconButton disable={!canSkipBackward} size="s" aria-label="Add" icon={<ChevronLeftIcon />}/>
+            </Link>
+            <Button borderRadius={0} size="sm" aria-label="Page">{currentPage}</Button>
+            <Link
+                to={{search: search + `${currentPage * 7}`}}
+            >
+                <IconButton  disable={!canSkipBackward} size="s" aria-label="Add" icon={<ChevronRightIcon />} />
+            </Link>
+            </HStack>
+        </Flex>
     );
 }
\ No newline at end of file
diff --git a/app/routes/city-council-districts.$cityCouncilDistrictId.capital-projects.tsx b/app/routes/city-council-districts.$cityCouncilDistrictId.capital-projects.tsx
index b72111e..aeae4f8 100644
--- a/app/routes/city-council-districts.$cityCouncilDistrictId.capital-projects.tsx
+++ b/app/routes/city-council-districts.$cityCouncilDistrictId.capital-projects.tsx
@@ -1,5 +1,5 @@
 import { LoaderFunctionArgs, json } from "@remix-run/node";
-import { findCapitalProjectsByCityCouncilId } from "../gen";
+import { findCapitalProjectsByCityCouncilId, findAgencies } from "../gen";
 import { useLoaderData, useNavigate } from "@remix-run/react";
 import { CapitalProjectsList } from "~/components/CapitalProjectsList";
 import { CapitalProjectsAccordionPanel } from "~/components/CapitalProjectsAccordionPanel";
@@ -9,6 +9,9 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   const url = new URL(request.url);
   const path = url.pathname;
   console.log("url", url);
+  const agenciesResponse = await findAgencies({
+    baseURL: `${import.meta.env.VITE_ZONING_API_URL}/api`,
+  });
   const limitParam = url.searchParams.get("limit");
   const offsetParam = url.searchParams.get("offset");
   let limit;
@@ -33,7 +36,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
     await findCapitalProjectsByCityCouncilId(
       cityCouncilDistrictId,
       {
-        limit,
+        limit: 7,
         offset,
       },
       {
@@ -41,17 +44,18 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
       },
     );
 
-  return {projectsByCityCouncilDistrictResponse, limit, offset, cityCouncilDistrictId};
+  return {projectsByCityCouncilDistrictResponse, agencies: agenciesResponse.agencies, limit, offset, path, cityCouncilDistrictId};
 }
 
 export default function CapitalProjectsByCityCouncilDistrict() {
-    const {projectsByCityCouncilDistrictResponse, cityCouncilDistrictId, limit, offset} = useLoaderData<typeof loader>();
+    const {projectsByCityCouncilDistrictResponse, agencies, cityCouncilDistrictId, limit, path, offset} = useLoaderData<typeof loader>();
     console.log("in return fuction", projectsByCityCouncilDistrictResponse.capitalProjects);
 
     return (
     <CapitalProjectsAccordionPanel
         capitalProjects={projectsByCityCouncilDistrictResponse.capitalProjects}
         limit={limit}
+        agencies={agencies}
         path={path}
         offset={offset}
         total={projectsByCityCouncilDistrictResponse.total}