diff --git a/src/backend/src/transformers/reimbursement-requests.transformer.ts b/src/backend/src/transformers/reimbursement-requests.transformer.ts
index ac32206e6f..4b46714833 100644
--- a/src/backend/src/transformers/reimbursement-requests.transformer.ts
+++ b/src/backend/src/transformers/reimbursement-requests.transformer.ts
@@ -38,11 +38,7 @@ import { ReimbursementProductOtherReasonQueryArgs } from '../prisma-query-args/r
 import { ReimbursementRequestCommentQueryArgs } from '../prisma-query-args/reimbursement-comment.query-args';
 
 export const receiptTransformer = (receipt: Prisma.ReceiptGetPayload<ReceiptQueryArgs>): Receipt => {
-  return {
-    receiptId: receipt.receiptId,
-    googleFileId: receipt.googleFileId,
-    name: receipt.name
-  };
+  return { receiptId: receipt.receiptId, googleFileId: receipt.googleFileId, name: receipt.name };
 };
 
 export const reimbursementRequestTransformer = (
@@ -100,15 +96,13 @@ const reimbursementProductReasonTransformer = (
         userCreated: userTransformer(reason.otherReason!.userCreated),
         dateCreated: reason.otherReason!.dateCreated,
         budget: reason.otherReason!.budget,
-        indexCode: indexCodeTransformer(reason.otherReason!.indexCode)
+        indexCode: indexCodeTransformer(reason.otherReason!.indexCode),
+        accountCodes: reason.otherReason!.accountCodes.map(accountCodeTransformer)
       };
 };
 
 export const accountCodeTransformer = (accountCode: Prisma.Account_CodeGetPayload<AccountCodeQueryArgs>): AccountCode => {
-  return {
-    ...accountCode,
-    indexCodes: accountCode.indexCodes.map(indexCodeTransformer)
-  };
+  return { ...accountCode, indexCodes: accountCode.indexCodes.map(indexCodeTransformer) };
 };
 
 export const vendorTransformer = (vendor: Prisma.VendorGetPayload<VendorQueryArgs>): Vendor => {
@@ -137,10 +131,7 @@ export const reimbursementTransformer = (
 };
 
 export const indexCodeTransformer = (indexCode: Prisma.Index_CodeGetPayload<IndexCodeQueryArgs>): IndexCode => {
-  return {
-    ...indexCode,
-    userCreated: userTransformer(indexCode.userCreated)
-  };
+  return { ...indexCode, userCreated: userTransformer(indexCode.userCreated) };
 };
 
 export const otherProductReasonTransformer = (
@@ -152,15 +143,13 @@ export const otherProductReasonTransformer = (
     userCreated: userTransformer(otherProductReason.userCreated),
     dateCreated: otherProductReason.dateCreated,
     budget: otherProductReason.budget,
-    indexCode: indexCodeTransformer(otherProductReason.indexCode)
+    indexCode: indexCodeTransformer(otherProductReason.indexCode),
+    accountCodes: otherProductReason.accountCodes.map(accountCodeTransformer)
   };
 };
 
 export const reimbursementRequestCommentTransformer = (
   reimbursementRequestComment: Prisma.Reimbursement_Request_CommentGetPayload<ReimbursementRequestCommentQueryArgs>
 ): ReimbursementRequestComment => {
-  return {
-    ...reimbursementRequestComment,
-    userCreated: userTransformer(reimbursementRequestComment.userCreated)
-  };
+  return { ...reimbursementRequestComment, userCreated: userTransformer(reimbursementRequestComment.userCreated) };
 };
diff --git a/src/frontend/src/pages/AdminToolsPage/AdminToolsFinanceConfig.tsx b/src/frontend/src/pages/AdminToolsPage/AdminToolsFinanceConfig.tsx
index 74e2a6e61e..080b107f2c 100644
--- a/src/frontend/src/pages/AdminToolsPage/AdminToolsFinanceConfig.tsx
+++ b/src/frontend/src/pages/AdminToolsPage/AdminToolsFinanceConfig.tsx
@@ -1,16 +1,19 @@
 import { Box, Grid, Typography } from '@mui/material';
-import AccountCodesTable from './FinanceConfig/AccountCodesTable';
+import AccountManagerTable from './FinanceConfig/AccountManagerTable';
+import CategoriesTable from './FinanceConfig/CategoriesTable';
 
 const AdminToolsFinanceConfig: React.FC = () => {
   return (
-    <Box>
+    <Box padding="5px">
       <Typography variant="h5" gutterBottom borderBottom={1} color="#ef4345" borderColor={'white'}>
-        Account Manager
+        Finance Config
       </Typography>
       <Grid container spacing="3%">
-        <Grid item direction="column" xs={12} md={6}></Grid>
+        <Grid item direction="column" xs={12} md={6}>
+          <AccountManagerTable />
+        </Grid>
         <Grid item direction="column" alignSelf="right" xs={12} md={6}>
-          <AccountCodesTable />
+          <CategoriesTable />
         </Grid>
       </Grid>
     </Box>
diff --git a/src/frontend/src/pages/AdminToolsPage/FinanceConfig/AccountCodeFormModal.tsx b/src/frontend/src/pages/AdminToolsPage/FinanceConfig/AccountCodeFormModal.tsx
index ed6e740e14..2dab4ebf05 100644
--- a/src/frontend/src/pages/AdminToolsPage/FinanceConfig/AccountCodeFormModal.tsx
+++ b/src/frontend/src/pages/AdminToolsPage/FinanceConfig/AccountCodeFormModal.tsx
@@ -2,7 +2,7 @@ import { IndexCode, AccountCode } from 'shared';
 import { AccountCodePayload, useGetAllIndexCodes } from '../../../hooks/finance.hooks';
 import { Controller, useForm } from 'react-hook-form';
 import NERFormModal from '../../../components/NERFormModal';
-import { Checkbox, FormControl, FormLabel, FormHelperText, Select, MenuItem, OutlinedInput } from '@mui/material';
+import { Checkbox, FormControl, FormLabel, FormHelperText, Select, MenuItem, OutlinedInput, Box } from '@mui/material';
 import ReactHookTextField from '../../../components/ReactHookTextField';
 import { useToast } from '../../../hooks/toasts.hooks';
 import * as yup from 'yup';
@@ -73,7 +73,7 @@ const AccountCodeFormModal = ({ showModal, handleClose, defaultValues, onSubmit
     <NERFormModal
       open={showModal}
       onHide={handleClose}
-      title={!!defaultValues ? 'Edit Account Code' : 'Create Account Code'}
+      title={!!defaultValues ? 'Edit Account Code' : 'Add Account Code'}
       reset={() => reset({ name: '', code: undefined, allowed: false, indexCodeIds: [] })}
       handleUseFormSubmit={handleSubmit}
       onFormSubmit={onFormSubmit}
@@ -81,12 +81,7 @@ const AccountCodeFormModal = ({ showModal, handleClose, defaultValues, onSubmit
       showCloseButton
     >
       <FormControl fullWidth>
-        <FormLabel>Account Name</FormLabel>
-        <ReactHookTextField name="name" control={control} fullWidth />
-        <FormHelperText error>{errors.name?.message}</FormHelperText>
-      </FormControl>
-      <FormControl fullWidth>
-        <FormLabel>Allowed Refund Source</FormLabel>
+        <FormLabel>Index Code(s)</FormLabel>
         <Controller
           name="indexCodeIds"
           control={control}
@@ -111,22 +106,23 @@ const AccountCodeFormModal = ({ showModal, handleClose, defaultValues, onSubmit
         <ReactHookTextField name="code" control={control} fullWidth />
         <FormHelperText error>{errors.code?.message}</FormHelperText>
       </FormControl>
+      <FormControl fullWidth>
+        <FormLabel>Description</FormLabel>
+        <ReactHookTextField name="name" control={control} fullWidth />
+        <FormHelperText error>{errors.name?.message}</FormHelperText>
+      </FormControl>
       <FormControl>
-        <FormLabel
-          sx={{
-            '&.Mui-focused': { color: theme.palette.text.secondary }
-          }}
-        >
-          Allowed?
-        </FormLabel>
-        <Controller
-          name="allowed"
-          control={control}
-          rules={{ required: true }}
-          render={({ field: { onChange, value } }) => {
-            return <Checkbox onChange={onChange} checked={value} />;
-          }}
-        />
+        <Box flexDirection={'row'}>
+          <FormLabel sx={{ '&.Mui-focused': { color: theme.palette.text.secondary } }}>Allowed?</FormLabel>
+          <Controller
+            name="allowed"
+            control={control}
+            rules={{ required: true }}
+            render={({ field: { onChange, value } }) => {
+              return <Checkbox onChange={onChange} checked={value} />;
+            }}
+          />
+        </Box>
       </FormControl>
     </NERFormModal>
   );
diff --git a/src/frontend/src/pages/AdminToolsPage/FinanceConfig/AccountCodesTable.tsx b/src/frontend/src/pages/AdminToolsPage/FinanceConfig/AccountCodesTable.tsx
deleted file mode 100644
index b44f1b6e6d..0000000000
--- a/src/frontend/src/pages/AdminToolsPage/FinanceConfig/AccountCodesTable.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { TableRow, TableCell, Typography, Box } from '@mui/material';
-import LoadingIndicator from '../../../components/LoadingIndicator';
-import { useGetAllAccountCodes } from '../../../hooks/finance.hooks';
-import ErrorPage from '../../ErrorPage';
-import { NERButton } from '../../../components/NERButton';
-import { useState } from 'react';
-import { AccountCode } from 'shared';
-import CreateAccountCodeModal from './CreateAccountCodeModal';
-import EditAccountCodeModal from './EditAccountCodeModal';
-import AdminToolTable from '../AdminToolTable';
-import { codeAndRefundSourceName } from '../../../utils/pipes';
-
-const AccountCodesTable = () => {
-  const {
-    data: accountCodes,
-    isLoading: accountCodesIsLoading,
-    isError: accountCodesIsError,
-    error: accountCodesError
-  } = useGetAllAccountCodes();
-  const [showCreateModal, setShowCreateModal] = useState<boolean>(false);
-  const [showEditModal, setShowEditModal] = useState<boolean>(false);
-  const [clickedAccountCode, setClickedAccountCode] = useState<AccountCode>();
-
-  if (!accountCodes || accountCodesIsLoading) {
-    return <LoadingIndicator />;
-  }
-
-  if (accountCodesIsError) {
-    return <ErrorPage message={accountCodesError.message} />;
-  }
-
-  const accountCodesTableRows = accountCodes.map((accountCode, index) => (
-    <TableRow
-      onClick={() => {
-        setClickedAccountCode(accountCode);
-        setShowEditModal(true);
-      }}
-      key={`account-code-${index}`}
-      sx={{ cursor: 'pointer' }}
-    >
-      <TableCell sx={{ border: '2px solid black' }}>{accountCode.name}</TableCell>
-      <TableCell sx={{ border: '2px solid black' }}>{accountCode.code}</TableCell>
-      <TableCell align="left" sx={{ border: '2px solid black' }}>
-        <Typography>{accountCode.allowed ? 'Yes' : 'No'}</Typography>
-      </TableCell>
-      <TableCell align="left" sx={{ border: '2px solid black' }}>
-        {accountCode.indexCodes.map((refundSource, idx) => (
-          <Typography key={`account-code-refund-source-${index}-${idx}`}>{codeAndRefundSourceName(refundSource)}</Typography>
-        ))}
-      </TableCell>
-    </TableRow>
-  ));
-
-  return (
-    <Box>
-      <CreateAccountCodeModal showModal={showCreateModal} handleClose={() => setShowCreateModal(false)} />
-      {clickedAccountCode && (
-        <EditAccountCodeModal
-          showModal={showEditModal}
-          handleClose={() => {
-            setShowEditModal(false);
-            setClickedAccountCode(undefined);
-          }}
-          accountCode={clickedAccountCode}
-        />
-      )}
-      <AdminToolTable
-        columns={[
-          { name: 'Account Name', width: '25%' },
-          { name: 'Account Code', width: '25%' },
-          { name: 'Allowed', width: '15%' },
-          { name: 'Allowed Refund Sources', width: '35%' }
-        ]}
-        rows={accountCodesTableRows}
-      />
-      <Box sx={{ display: 'flex', justifyContent: 'right', marginTop: '10px' }}>
-        <NERButton
-          variant="contained"
-          onClick={() => {
-            setShowCreateModal(true);
-          }}
-        >
-          New Account Code
-        </NERButton>
-      </Box>
-    </Box>
-  );
-};
-
-export default AccountCodesTable;
diff --git a/src/frontend/src/pages/AdminToolsPage/FinanceConfig/AccountManagerTable.tsx b/src/frontend/src/pages/AdminToolsPage/FinanceConfig/AccountManagerTable.tsx
new file mode 100644
index 0000000000..765d51a9b8
--- /dev/null
+++ b/src/frontend/src/pages/AdminToolsPage/FinanceConfig/AccountManagerTable.tsx
@@ -0,0 +1,114 @@
+import { TableRow, TableCell, Typography, Box, TableHead, Table, TableBody, Checkbox } from '@mui/material';
+import LoadingIndicator from '../../../components/LoadingIndicator';
+import { useGetAllAccountCodes } from '../../../hooks/finance.hooks';
+import ErrorPage from '../../ErrorPage';
+import React, { useState } from 'react';
+import { AccountCode } from 'shared';
+import CreateAccountCodeModal from './CreateAccountCodeModal';
+import EditAccountCodeModal from './EditAccountCodeModal';
+import { NERButton } from '../../../components/NERButton';
+
+const AccountManagerTable = () => {
+  const {
+    data: accountCodes,
+    isLoading: accountCodesIsLoading,
+    isError: accountCodesIsError,
+    error: accountCodesError
+  } = useGetAllAccountCodes();
+  const [showCreateModal, setShowCreateModal] = useState<boolean>(false);
+  const [showEditModal, setShowEditModal] = useState<boolean>(false);
+  const [clickedAccountCode, setClickedAccountCode] = useState<AccountCode>();
+
+  if (!accountCodes || accountCodesIsLoading) {
+    return <LoadingIndicator />;
+  }
+
+  if (accountCodesIsError) {
+    return <ErrorPage message={accountCodesError.message} />;
+  }
+
+  const uniqueIndexCodeNames = (accountCode: AccountCode) => {
+    const uniqueNames = new Set(accountCode.indexCodes.map((indexCode) => indexCode.name));
+    return Array.from(uniqueNames).join(', ');
+  };
+
+  const accountManagerTableRows = accountCodes.map((accountCode, index) => (
+    <TableRow
+      onClick={() => {
+        setClickedAccountCode(accountCode);
+        setShowEditModal(true);
+      }}
+      key={`account-code-${index}`}
+      sx={{ cursor: 'pointer' }}
+    >
+      <TableCell>
+        <Typography>{uniqueIndexCodeNames(accountCode)}</Typography>
+      </TableCell>
+      <TableCell>
+        <Typography>{accountCode.code}</Typography>
+      </TableCell>
+      <TableCell>
+        <Typography>{accountCode.name}</Typography>
+      </TableCell>
+      <TableCell>
+        <Checkbox checked={accountCode.allowed} />
+      </TableCell>
+    </TableRow>
+  ));
+
+  const columns = ['Index Code', 'Account Code', 'Description', 'Allowed'];
+
+  return (
+    <Box>
+      <Box sx={{ display: 'flex', justifyContent: 'left', marginTop: '20px', paddingBottom: '20px' }}>
+        <Typography variant="h5" gutterBottom color="white" paddingRight={'20px'}>
+          Account Manager
+        </Typography>
+        <NERButton
+          style={{ color: 'white' }}
+          variant="contained"
+          onClick={() => {
+            setShowCreateModal(true);
+          }}
+        >
+          Add Account
+        </NERButton>
+      </Box>
+      <CreateAccountCodeModal showModal={showCreateModal} handleClose={() => setShowCreateModal(false)} />
+      {clickedAccountCode && (
+        <EditAccountCodeModal
+          showModal={showEditModal}
+          handleClose={() => {
+            setShowEditModal(false);
+            setClickedAccountCode(undefined);
+          }}
+          accountCode={clickedAccountCode}
+        />
+      )}
+      <Table>
+        <TableHead>
+          <TableRow>
+            {columns.map((column, index) => (
+              <TableCell
+                key={`account-code-column-${index}`}
+                sx={{
+                  borderBottom: '2px solid white',
+                  fontWeight: 'bold',
+                  fontSize: '1em',
+                  backgroundColor: '#ef4345',
+                  color: 'white',
+                  borderRadius: index === 0 ? '10px 0px 0px 0px' : index === columns.length - 1 ? '0px 10px 0px 0px' : '0px'
+                }}
+              >
+                {column}
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>{accountManagerTableRows} </TableBody>
+      </Table>
+    </Box>
+  );
+};
+
+export default AccountManagerTable;
diff --git a/src/frontend/src/pages/AdminToolsPage/FinanceConfig/CategoriesTable.tsx b/src/frontend/src/pages/AdminToolsPage/FinanceConfig/CategoriesTable.tsx
new file mode 100644
index 0000000000..fc3baa90e9
--- /dev/null
+++ b/src/frontend/src/pages/AdminToolsPage/FinanceConfig/CategoriesTable.tsx
@@ -0,0 +1,110 @@
+import { TableRow, TableCell, Typography, Box, TableHead, Table, TableBody } from '@mui/material';
+import LoadingIndicator from '../../../components/LoadingIndicator';
+import { useGetAllOtherProductReason } from '../../../hooks/finance.hooks';
+import ErrorPage from '../../ErrorPage';
+import { NERButton } from '../../../components/NERButton';
+import React from 'react';
+import { OtherProductReason } from 'shared';
+
+const CategoriesTable = () => {
+  const {
+    data: categories,
+    isLoading: categoriesIsLoading,
+    isError: categoriesIsError,
+    error: categoriesError
+  } = useGetAllOtherProductReason();
+  // const [showCreateModal, setShowCreateModal] = useState<boolean>(false);
+  // const [showEditModal, setShowEditModal] = useState<boolean>(false);
+  // const [clickedCategory, setClickedCategory] = useState<OtherProductReason>();
+
+  if (!categories || categoriesIsLoading) {
+    return <LoadingIndicator />;
+  }
+
+  if (categoriesIsError) {
+    return <ErrorPage message={categoriesError.message} />;
+  }
+
+  const uniqueAccountCodeNames = (category: OtherProductReason) => {
+    const uniqueNames = new Set(category.accountCodes.map((accountCode) => accountCode.code));
+    return Array.from(uniqueNames).join(', ');
+  };
+
+  const categoriesTableRows = categories.map((category, index) => (
+    <TableRow
+      onClick={() => {
+        // setClickedCategory(category);
+        // setShowEditModal(true);
+      }}
+      key={`category-${index}`}
+      sx={{ cursor: 'pointer' }}
+    >
+      <TableCell>
+        <Typography>{category.indexCode.name}</Typography>
+      </TableCell>
+      <TableCell>
+        <Typography>{uniqueAccountCodeNames(category)}</Typography>
+      </TableCell>
+      <TableCell>
+        <Typography>{category.name}</Typography>
+      </TableCell>
+      <TableCell>{`$${category.budget}`}</TableCell>
+    </TableRow>
+  ));
+
+  const columns = ['Index Code', 'Account Code', 'Name', 'Budget'];
+
+  return (
+    <Box>
+      {/* <CreateIndexCodeModal showModal={showCreateModal} handleClose={() => setShowCreateModal(false)} />
+      {clickedIndexCode && (
+        <EditIndexCodeModal
+          showModal={showEditModal}
+          handleClose={() => {
+            setShowEditModal(false);
+            setClickedIndexCode(undefined);
+          }}
+          indexCode={clickedIndexCode}
+        />
+      )} */}
+      <Box sx={{ display: 'flex', justifyContent: 'left', marginTop: '20px', paddingBottom: '20px' }}>
+        <Typography variant="h5" gutterBottom color="white" paddingRight={'20px'}>
+          Categories
+        </Typography>
+        <NERButton
+          style={{ color: 'white' }}
+          variant="contained"
+          onClick={() => {
+            // setShowCreateModal(true);
+          }}
+        >
+          Add Category
+        </NERButton>
+      </Box>
+      <Table>
+        <TableHead>
+          <TableRow>
+            {columns.map((column, index) => (
+              <TableCell
+                key={`category-column-${index}`}
+                sx={{
+                  borderBottom: '2px solid white',
+                  fontWeight: 'bold',
+                  fontSize: '1em',
+                  backgroundColor: '#ef4345',
+                  color: 'white',
+                  borderRadius: index === 0 ? '10px 0px 0px 0px' : index === columns.length - 1 ? '0px 10px 0px 0px' : '0px'
+                }}
+              >
+                {column}
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>{categoriesTableRows} </TableBody>
+      </Table>
+    </Box>
+  );
+};
+
+export default CategoriesTable;
diff --git a/src/frontend/src/pages/AdminToolsPage/FinanceConfig/CreateCategoryModal.tsx b/src/frontend/src/pages/AdminToolsPage/FinanceConfig/CreateCategoryModal.tsx
new file mode 100644
index 0000000000..54454a7349
--- /dev/null
+++ b/src/frontend/src/pages/AdminToolsPage/FinanceConfig/CreateCategoryModal.tsx
@@ -0,0 +1,20 @@
+// import LoadingIndicator from '../../../components/LoadingIndicator';
+// import { useCreateAccountCode } from '../../../hooks/finance.hooks';
+// import ErrorPage from '../../ErrorPage';
+// import AccountCodeFormModal from './AccountCodeFormModal';
+
+// interface CreateCategoryModalProps {
+//   showModal: boolean;
+//   handleClose: () => void;
+// }
+
+// const CreateCategoryModal = ({ showModal, handleClose }: CreateCategoryModalProps) => {
+//   const { isLoading, isError, error, mutateAsync } = useCreateAccountCode();
+
+//   if (isError) return <ErrorPage message={error?.message} />;
+//   if (isLoading) return <LoadingIndicator />;
+
+//   return <IndexCodeFormModal showModal={showModal} handleClose={handleClose} onSubmit={mutateAsync} />;
+// };
+
+// export default CreateCategoryModal;
diff --git a/src/frontend/src/pages/AdminToolsPage/FinanceConfig/EditCategoryModal.tsx b/src/frontend/src/pages/AdminToolsPage/FinanceConfig/EditCategoryModal.tsx
new file mode 100644
index 0000000000..b17bc88515
--- /dev/null
+++ b/src/frontend/src/pages/AdminToolsPage/FinanceConfig/EditCategoryModal.tsx
@@ -0,0 +1,24 @@
+// import { AccountCode } from 'shared';
+// import AccountCodeFormModal from './AccountCodeFormModal';
+// import { useEditAccountCode } from '../../../hooks/finance.hooks';
+// import ErrorPage from '../../ErrorPage';
+// import LoadingIndicator from '../../../components/LoadingIndicator';
+
+// interface EditCategoryModalProps {
+//   showModal: boolean;
+//   handleClose: () => void;
+//   accountCode: AccountCode;
+// }
+
+// const EditCategoryModal = ({ showModal, handleClose, accountCode }: EditCategoryModalProps) => {
+//   const { isLoading, isError, error, mutateAsync } = useEditAccountCode(accountCode.accountCodeId);
+
+//   if (isError) return <ErrorPage message={error?.message} />;
+//   if (isLoading) return <LoadingIndicator />;
+
+//   return (
+//     <IndexCodeFormModal showModal={showModal} handleClose={handleClose} onSubmit={mutateAsync} defaultValues={accountCode} />
+//   );
+// };
+
+// export default EditCategoryModal;
diff --git a/src/shared/src/types/reimbursement-requests-types.ts b/src/shared/src/types/reimbursement-requests-types.ts
index 5b8a3db73a..ee11eec3ac 100644
--- a/src/shared/src/types/reimbursement-requests-types.ts
+++ b/src/shared/src/types/reimbursement-requests-types.ts
@@ -70,6 +70,7 @@ export interface OtherProductReason {
   dateCreated: Date;
   budget: number;
   indexCode: IndexCode;
+  accountCodes: AccountCode[];
 }
 
 export type WBSElementData = { wbsNum: WbsNumber; wbsName: string };