diff --git a/view/next-project/src/components/common/BureauLabel/BureauLabel.tsx b/view/next-project/src/components/common/BureauLabel/BureauLabel.tsx
index 75f7ad9a8..c090a7d48 100644
--- a/view/next-project/src/components/common/BureauLabel/BureauLabel.tsx
+++ b/view/next-project/src/components/common/BureauLabel/BureauLabel.tsx
@@ -6,15 +6,16 @@ import { BureauLabelProps } from './BureauLabel.type';
 import Label from '../Label';
 
 const BureauLabel: React.FC<BureauLabelProps> = (props) => {
-  const { bureauID } = props;
-  const bureau = useMemo(() => {
-    const bureau = BUREAUS_WITH_EN.find((bureau) => bureau.id === bureauID);
-    return bureau;
-  }, [bureauID]);
+  const { bureauName } = props;
+  const bureauEn = useMemo(() => {
+    const bureau = BUREAUS_WITH_EN.find((bureau) => bureau.name === bureauName);
+    if (!bureau) return 'other';
+    return bureau.name_en;
+  }, []);
 
   return (
-    <Label isOutline color={bureau?.name_en}>
-      {bureau?.name}
+    <Label isOutline color={bureauEn}>
+      {bureauName}
     </Label>
   );
 };
diff --git a/view/next-project/src/components/common/BureauLabel/BureauLabel.type.ts b/view/next-project/src/components/common/BureauLabel/BureauLabel.type.ts
index bdc693ea0..e914459ce 100644
--- a/view/next-project/src/components/common/BureauLabel/BureauLabel.type.ts
+++ b/view/next-project/src/components/common/BureauLabel/BureauLabel.type.ts
@@ -1,3 +1,3 @@
 export interface BureauLabelProps {
-  bureauID: number;
+  bureauName: string;
 }
diff --git a/view/next-project/src/components/common/DeleteButton.tsx b/view/next-project/src/components/common/DeleteButton.tsx
index 0b30d7730..cb6c598a0 100644
--- a/view/next-project/src/components/common/DeleteButton.tsx
+++ b/view/next-project/src/components/common/DeleteButton.tsx
@@ -20,12 +20,11 @@ const DeleteButton = (props: Props) => {
   return (
     <button
       disabled={!isDisabled}
-      className={`${buttonClass} h-6 w-6 min-w-0 rounded-full bg-gradient-to-br from-red-500 to-red-600 p-0`}
+      className={`${buttonClass} flex h-6 w-6 min-w-0 items-center justify-center rounded-full bg-gradient-to-br from-red-500 to-red-600 p-0`}
       onClick={onClick}
+      suppressHydrationWarning
     >
-      <div className='flex items-center justify-center'>
-        <RiDeleteBinLine size={'15px'} color={'white'} />
-      </div>
+      <RiDeleteBinLine size={'15px'} color={'white'} />
     </button>
   );
 };
diff --git a/view/next-project/src/components/common/EditButton.tsx b/view/next-project/src/components/common/EditButton.tsx
index 5ca454fc1..c8f2cfc38 100644
--- a/view/next-project/src/components/common/EditButton.tsx
+++ b/view/next-project/src/components/common/EditButton.tsx
@@ -7,7 +7,7 @@ interface Props {
 }
 
 const EditButton: React.FC<Props> = (props) => {
-  const { onClick, isDisabled } = props;
+  const { onClick, isDisabled = true } = props;
 
   const buttonClass = useMemo(() => {
     if (!isDisabled) {
@@ -19,13 +19,12 @@ const EditButton: React.FC<Props> = (props) => {
 
   return (
     <button
-      className={`${buttonClass}  h-6 w-6 min-w-0 rounded-full  p-0`}
+      suppressHydrationWarning
+      className={`${buttonClass}  flex h-6 w-6 min-w-0  items-center justify-center rounded-full p-0`}
       disabled={!isDisabled}
       onClick={onClick}
     >
-      <div className='flex items-center justify-center'>
-        <RiPencilFill size={'15px'} color={'white'} />
-      </div>
+      <RiPencilFill size={'15px'} color={'white'} />
     </button>
   );
 };
diff --git a/view/next-project/src/components/common/Input/Input.tsx b/view/next-project/src/components/common/Input/Input.tsx
index 0522ccfb5..00860de0a 100644
--- a/view/next-project/src/components/common/Input/Input.tsx
+++ b/view/next-project/src/components/common/Input/Input.tsx
@@ -10,6 +10,7 @@ interface Props {
   value?: string | number;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   children?: React.ReactNode;
+  type?: string;
 }
 
 function Input(props: Props): JSX.Element {
@@ -23,6 +24,7 @@ function Input(props: Props): JSX.Element {
       id={props.id}
       value={props.value}
       onChange={props.onChange}
+      type={props.type}
     >
       {props.children}
     </input>
diff --git a/view/next-project/src/components/common/Modal.tsx b/view/next-project/src/components/common/Modal.tsx
index 53d5aa83c..61b58ce48 100644
--- a/view/next-project/src/components/common/Modal.tsx
+++ b/view/next-project/src/components/common/Modal.tsx
@@ -8,7 +8,7 @@ interface Props {
 
 export default function Modal(props: Props) {
   const className =
-    'relative w-auto my-6 mx-auto max-w-3xl bg-white-0 rounded-lg p-5' +
+    'relative my-6 mx-auto bg-white-0 rounded-lg p-5' +
     (props.className ? ` ${props.className}` : '');
 
   return (
diff --git a/view/next-project/src/components/fund_information/AddModal.tsx b/view/next-project/src/components/fund_information/AddModal.tsx
index 7765a86b5..8d94b1a66 100644
--- a/view/next-project/src/components/fund_information/AddModal.tsx
+++ b/view/next-project/src/components/fund_information/AddModal.tsx
@@ -1,47 +1,23 @@
-import {
-  Box,
-  Center,
-  ChakraProvider,
-  Flex,
-  Grid,
-  GridItem,
-  Input,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalOverlay,
-  Select,
-  Spacer,
-} from '@chakra-ui/react';
 import { useRouter } from 'next/router';
-import React, { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react';
-import { RiCloseCircleLine } from 'react-icons/ri';
+import React, { Dispatch, FC, SetStateAction, useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
 
 import { userAtom } from '@/store/atoms';
 import { post } from '@api/fundInformations';
-import theme from '@assets/theme';
-import RegistButton from '@components/common/RegistButton';
 import { Department, FundInformation, Teacher, User } from '@type/common';
 
+import { Modal, CloseButton, Input, Select, PrimaryButton } from '../common';
+
 interface ModalProps {
   setShowModal: Dispatch<SetStateAction<boolean>>;
-  openModal: boolean;
-  children?: React.ReactNode;
-  teachersInformation: Teacher[];
+  teachers: Teacher[];
   departments: Department[];
-  currentUser: User;
-  userID: number | string;
+  users: User[];
 }
 
 const OpenAddModal: FC<ModalProps> = (props) => {
   const [user] = useRecoilState(userAtom);
 
-  const closeModal = () => {
-    props.setShowModal(false);
-  };
-
   const router = useRouter();
   const [departmentID, setDepartmentID] = useState<number | string>(1);
   const [formData, setFormData] = useState<FundInformation>({
@@ -67,73 +43,6 @@ const OpenAddModal: FC<ModalProps> = (props) => {
     }
   }, [user, router.isReady]);
 
-  // 学科別教員リストの用意
-  // // 電気電子情報
-  const electricalTeachers: Teacher[] = useMemo(
-    () => props.teachersInformation.filter((teacher) => teacher.departmentID === 1),
-    [props.teachersInformation],
-  );
-  // // 生物
-  const biologicalTeachers: Teacher[] = useMemo(
-    () => props.teachersInformation.filter((teacher) => teacher.departmentID === 2),
-    [props.teachersInformation],
-  );
-  // // 機械
-  const machineTeachers: Teacher[] = useMemo(
-    () => props.teachersInformation.filter((teacher) => teacher.departmentID === 3),
-    [props.teachersInformation],
-  );
-  // // 物質
-  const materialTeachers: Teacher[] = useMemo(
-    () => props.teachersInformation.filter((teacher) => teacher.departmentID === 4),
-    [props.teachersInformation],
-  );
-  // // 環境社会基盤
-  const environmentalTeachers: Teacher[] = useMemo(
-    () => props.teachersInformation.filter((teacher) => teacher.departmentID === 5),
-    [props.teachersInformation],
-  );
-  // // 情報・経営
-  const informationManagementTeachers: Teacher[] = useMemo(
-    () => props.teachersInformation.filter((teacher) => teacher.departmentID === 6),
-    [props.teachersInformation],
-  );
-  // // 基盤共通
-  const commonEducationTeachers: Teacher[] = useMemo(
-    () => props.teachersInformation.filter((teacher) => teacher.departmentID === 7),
-    [props.teachersInformation],
-  );
-  // // 原子力
-  const nuclearTeachers: Teacher[] = useMemo(
-    () => props.teachersInformation.filter((teacher) => teacher.departmentID === 8),
-    [props.teachersInformation],
-  );
-  // // 技学イノベ
-  const technologyInovationTeachers: Teacher[] = useMemo(
-    () => props.teachersInformation.filter((teacher) => teacher.departmentID === 9),
-    [props.teachersInformation],
-  );
-  // // システム安全
-  const systemSafetyTeachers: Teacher[] = useMemo(
-    () => props.teachersInformation.filter((teacher) => teacher.departmentID === 10),
-    [props.teachersInformation],
-  );
-  // // 技術支援
-  const technologySupportTeachers: Teacher[] = useMemo(
-    () => props.teachersInformation.filter((teacher) => teacher.departmentID === 11),
-    [props.teachersInformation],
-  );
-  // // 産学融合
-  const industryAcademiaFusionTeachers: Teacher[] = useMemo(
-    () => props.teachersInformation.filter((teacher) => teacher.departmentID === 12),
-    [props.teachersInformation],
-  );
-  // // 学長・事務
-  const presidentClericals: Teacher[] = useMemo(
-    () => props.teachersInformation.filter((teacher) => teacher.departmentID === 13),
-    [props.teachersInformation],
-  );
-
   const handler =
     (input: string) =>
     (e: React.ChangeEvent<HTMLSelectElement> | React.ChangeEvent<HTMLInputElement>) => {
@@ -149,141 +58,69 @@ const OpenAddModal: FC<ModalProps> = (props) => {
     await post(addFundInformationUrl, data);
   };
 
-  // 学科ごとの教員のセレクトボックス
-  const selectTeacherContent = (teachers: Teacher[]) => {
-    return (
-      <>
-        <Select
-          value={formData.teacherID}
-          onChange={handler('teacherID')}
-          borderRadius='full'
-          borderColor='primary.1'
-          w='100'
-        >
-          {teachers.map((data) => (
-            <option key={data.id} value={data.id}>
-              {data.name}
-            </option>
-          ))}
-        </Select>
-      </>
-    );
-  };
-
   return (
-    <ChakraProvider theme={theme}>
-      <Modal isOpen={props.openModal} onClose={closeModal} isCentered>
-        <ModalOverlay />
-        <ModalContent pb='5' borderRadius='3xl'>
-          <ModalBody p='3'>
-            <Flex mt='5'>
-              <Spacer />
-              <Box mr='5' _hover={{ background: '#E2E8F0', cursor: 'pointer' }}>
-                <RiCloseCircleLine size={'23px'} color={'gray'} onClick={closeModal} />
-              </Box>
-            </Flex>
-            <Grid templateColumns='repeat(12, 1fr)' gap={4}>
-              <GridItem colSpan={12}>
-                <Center color='black.600' h='100%' fontSize='xl' mb={5}>
-                  募金の登録
-                </Center>
-              </GridItem>
-              <GridItem colSpan={1} />
-              <GridItem colSpan={10}>
-                <Grid templateColumns='repeat(12, 1fr)' gap={4}>
-                  <GridItem colSpan={3}>
-                    <Flex color='black.600' h='100%' justify='end' align='center'>
-                      学科
-                    </Flex>
-                  </GridItem>
-                  <GridItem colSpan={9}>
-                    <Select
-                      value={departmentID}
-                      onChange={handleDepartmentID}
-                      borderRadius='full'
-                      borderColor='primary.1'
-                      w='100'
-                    >
-                      {props.departments.map((data) => (
-                        <option key={data.id} value={data.id}>
-                          {data.name}
-                        </option>
-                      ))}
-                    </Select>
-                  </GridItem>
-                  <GridItem colSpan={3}>
-                    <Flex color='black.600' h='100%' justify='end' align='center'>
-                      教員名
-                    </Flex>
-                  </GridItem>
-                  <GridItem colSpan={9}>
-                    {departmentID == 1 && selectTeacherContent(electricalTeachers)}
-                    {departmentID == 2 && selectTeacherContent(biologicalTeachers)}
-                    {departmentID == 3 && selectTeacherContent(machineTeachers)}
-                    {departmentID == 4 && selectTeacherContent(materialTeachers)}
-                    {departmentID == 5 && selectTeacherContent(environmentalTeachers)}
-                    {departmentID == 6 && selectTeacherContent(informationManagementTeachers)}
-                    {departmentID == 7 && selectTeacherContent(commonEducationTeachers)}
-                    {departmentID == 8 && selectTeacherContent(nuclearTeachers)}
-                    {departmentID == 9 && selectTeacherContent(technologyInovationTeachers)}
-                    {departmentID == 10 && selectTeacherContent(systemSafetyTeachers)}
-                    {departmentID == 11 && selectTeacherContent(technologySupportTeachers)}
-                    {departmentID == 12 && selectTeacherContent(industryAcademiaFusionTeachers)}
-                    {departmentID == 13 && selectTeacherContent(presidentClericals)}
-                  </GridItem>
-                  <GridItem colSpan={3}>
-                    <Flex color='black.600' h='100%' justify='end' align='center'>
-                      金額
-                    </Flex>
-                  </GridItem>
-                  <GridItem colSpan={9}>
-                    <Flex>
-                      <Input
-                        w='100'
-                        borderRadius='full'
-                        borderColor='primary.1'
-                        value={formData.price}
-                        onChange={handler('price')}
-                      />
-                    </Flex>
-                  </GridItem>
-                  <GridItem colSpan={3}>
-                    <Flex color='black.600' h='100%' justify='end' align='center'>
-                      備考
-                    </Flex>
-                  </GridItem>
-                  <GridItem colSpan={9}>
-                    <Flex>
-                      <Input
-                        w='100'
-                        borderRadius='full'
-                        borderColor='primary.1'
-                        value={formData.remark}
-                        onChange={handler('remark')}
-                      />
-                    </Flex>
-                  </GridItem>
-                </Grid>
-              </GridItem>
-              <GridItem colSpan={1} />
-            </Grid>
-          </ModalBody>
-          <Center>
-            <ModalFooter mt='5' mb='10'>
-              <RegistButton
-                width='220px'
-                onClick={() => {
-                  addFundInformation(formData);
-                  router.reload();
-                }}
-              >
-                登録する
-              </RegistButton>
-            </ModalFooter>
-          </Center>
-        </ModalContent>
-      </Modal>
-    </ChakraProvider>
+    <Modal className='w-1/2'>
+      <div className='w-full'>
+        <div className='mr-5 ml-auto w-fit'>
+          <CloseButton onClick={() => props.setShowModal(false)} />
+        </div>
+      </div>
+      <h1 className='mx-auto mb-10 w-fit text-xl text-black-600'>募金の登録</h1>
+      <div className='my-6 grid grid-cols-5 items-center justify-items-center gap-4'>
+        <p className='col-span-1 text-black-600'>所属</p>
+        <div className='col-span-4 w-full'>
+          <Select className='w-full' value={departmentID} onChange={handleDepartmentID}>
+            {props.departments.map((department) => (
+              <option key={department.id} value={department.id}>
+                {department.name}
+              </option>
+            ))}
+          </Select>
+        </div>
+        <p className='col-span-1 text-black-600'>教員名</p>
+        <div className='col-span-4 w-full'>
+          <Select className='w-full' value={formData.teacherID} onChange={handler('teacherID')}>
+            {props.teachers
+              .filter((teacher) => teacher.departmentID === departmentID)
+              .map((teacher) => (
+                <option key={teacher.id} value={teacher.id}>
+                  {teacher.name}
+                </option>
+              ))}
+          </Select>
+        </div>
+        <p className='col-span-1 text-black-600'>担当者</p>
+        <div className='col-span-4 w-full'>
+          <Select className='w-full' value={formData.userID} onChange={handler('userID')}>
+            {props.users.map((user) => (
+              <option key={user.id} value={user.id}>
+                {user.name}
+              </option>
+            ))}
+          </Select>
+        </div>
+        <p className='col-span-1 text-black-600'>金額</p>
+        <div className='col-span-4 w-full'>
+          <Input className='w-full' value={formData.price} onChange={handler('price')} />
+        </div>
+        <p className='col-span-1 text-black-600'>備考</p>
+        <div className='col-span-4 w-full'>
+          <Input className='w-full' value={formData.remark} onChange={handler('remark')} />
+        </div>
+      </div>
+      <div className='mx-auto mb-5 w-fit'>
+        <PrimaryButton
+          className={'mx-2'}
+          onClick={() => {
+            addFundInformation(formData);
+            props.setShowModal(false);
+            router.reload();
+          }}
+        >
+          登録する
+        </PrimaryButton>
+      </div>
+    </Modal>
   );
 };
 
diff --git a/view/next-project/src/components/fund_information/DeleteModal.tsx b/view/next-project/src/components/fund_information/DeleteModal.tsx
index 897e307d7..2bc8368a2 100644
--- a/view/next-project/src/components/fund_information/DeleteModal.tsx
+++ b/view/next-project/src/components/fund_information/DeleteModal.tsx
@@ -1,189 +1,52 @@
-import {
-  ChakraProvider,
-  Center,
-  Text,
-  Flex,
-  Box,
-  Spacer,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalFooter,
-  ModalBody,
-  Grid,
-  GridItem,
-  Divider,
-} from '@chakra-ui/react';
 import { useRouter } from 'next/router';
-import { useState, useEffect, Dispatch, SetStateAction } from 'react';
-import { useCallback } from 'react';
-import { RiCloseCircleLine } from 'react-icons/ri';
+import React, { Dispatch, FC, SetStateAction } from 'react';
 
-import { get, del } from '@api/api_methods';
-import theme from '@assets/theme';
-import { RedButton } from '@components/common';
-import { FundInformation, Teacher, User } from '@type/common';
+import { del } from '@api/api_methods';
+import { Modal, CloseButton, OutlinePrimaryButton, PrimaryButton } from '@components/common';
 
 interface ModalProps {
   setShowModal: Dispatch<SetStateAction<boolean>>;
-  openModal: boolean;
   children?: React.ReactNode;
   id: number | string;
-  teacherID: number;
-  userID: number;
 }
 
-export default function DeleteModal(props: ModalProps) {
+const DeleteModal: FC<ModalProps> = (props) => {
+  const router = useRouter();
+
   const closeModal = () => {
     props.setShowModal(false);
+    router.reload();
   };
 
-  const router = useRouter();
-
-  // モーダルに表示する用のfund_informationを定義
-  const [fundInformation, setFundInformation] = useState<FundInformation>({
-    userID: 0,
-    teacherID: 0,
-    price: 0,
-    remark: '',
-    isFirstCheck: false,
-    isLastCheck: false,
-  });
-
-  const [teacher, setTeacher] = useState<Teacher>({
-    id: Number(fundInformation.teacherID),
-    name: '',
-    position: '',
-    departmentID: 1,
-    room: '',
-    isBlack: false,
-    remark: '',
-    createdAt: '',
-    updatedAt: '',
-  });
-
-  const [user, setUser] = useState<User>({
-    id: 0,
-    name: '',
-    bureauID: 1,
-    roleID: 1,
-  });
-
-  // モーダルを開いているfund_informationを取得
-  const getFundInformation = useCallback(async () => {
-    const getFundInformationURL = process.env.CSR_API_URI + '/fund_informations/' + props.id;
-    setFundInformation(await get(getFundInformationURL));
-  }, [props.id]);
-
-  // teacher_idに紐づくteacherを取得
-  const getTeacher = useCallback(async () => {
-    const getTeacherURL = process.env.CSR_API_URI + '/teachers/' + props.teacherID;
-    setTeacher(await get(getTeacherURL));
-  }, [props.teacherID]);
-
-  // user_idに紐づくuserを取得
-  const getUser = useCallback(async () => {
-    const getUserURL = process.env.CSR_API_URI + '/users/' + props.userID;
-    setUser(await get(getUserURL));
-  }, [props.userID]);
-
-  useEffect(() => {
-    if (router.isReady) {
-      getFundInformation();
-      getTeacher();
-      getUser();
-    }
-  }, [router, getFundInformation, getTeacher, getUser]);
-
-  const deleteFundInformation = async (id: number | string) => {
-    const deleteFundInformationURL = process.env.CSR_API_URI + '/fund_informations/' + id;
-    await del(deleteFundInformationURL);
+  const deleteFundInformations = async (id: number | string) => {
+    const deletePurchaseReportUrl = process.env.CSR_API_URI + '/fund_informations/' + id;
+    await del(deletePurchaseReportUrl);
   };
 
   return (
-    <ChakraProvider theme={theme}>
-      <Modal isOpen={props.openModal} onClose={closeModal} isCentered>
-        <ModalOverlay />
-        <ModalContent pb='5' borderRadius='3xl'>
-          <ModalBody p='3'>
-            <Flex mt='5'>
-              <Spacer />
-              <Box mr='5' _hover={{ background: '#E2E8F0', cursor: 'pointer' }}>
-                <RiCloseCircleLine size={'23px'} color={'gray'} onClick={closeModal} />
-              </Box>
-            </Flex>
-            <Grid templateColumns='repeat(12, 1fr)' gap={4}>
-              <GridItem rowSpan={1} colSpan={12}>
-                <Center color='black.600' h='100%' fontSize='xl'>
-                  募金の削除
-                </Center>
-              </GridItem>
-              <GridItem colSpan={1} />
-              <GridItem colSpan={10}>
-                <Grid templateColumns='repeat(12, 1fr)' gap={4}>
-                  <GridItem rowSpan={1} colSpan={4}>
-                    <Flex color='black.600' h='100%' justify='end' align='center'>
-                      報告者名
-                    </Flex>
-                  </GridItem>
-                  <GridItem rowSpan={1} colSpan={8}>
-                    <Text fontSize='lg' pl={2}>
-                      {user.name}
-                    </Text>
-                    <Divider />
-                  </GridItem>
-                  <GridItem rowSpan={1} colSpan={4}>
-                    <Flex color='black.600' h='100%' justify='end' align='center'>
-                      教員名
-                    </Flex>
-                  </GridItem>
-                  <GridItem rowSpan={1} colSpan={8}>
-                    <Text fontSize='lg' pl={2}>
-                      {teacher.name}
-                    </Text>
-                    <Divider />
-                  </GridItem>
-                  <GridItem rowSpan={1} colSpan={4}>
-                    <Flex color='black.600' h='100%' justify='end' align='center'>
-                      金額
-                    </Flex>
-                  </GridItem>
-                  <GridItem rowSpan={1} colSpan={8}>
-                    <Text fontSize='lg' pl={2}>
-                      {fundInformation.price}
-                    </Text>
-                    <Divider />
-                  </GridItem>
-                  <GridItem rowSpan={1} colSpan={4}>
-                    <Flex color='black.600' h='100%' justify='end' align='center'>
-                      備考
-                    </Flex>
-                  </GridItem>
-                  <GridItem rowSpan={1} colSpan={8}>
-                    <Text fontSize='lg' pl={2}>
-                      {fundInformation.remark}
-                    </Text>
-                    <Divider />
-                  </GridItem>
-                </Grid>
-              </GridItem>
-              <GridItem colSpan={1} />
-            </Grid>
-          </ModalBody>
-          <Center>
-            <ModalFooter mt='5' mb='10'>
-              <RedButton
-                onClick={() => {
-                  deleteFundInformation(props.id);
-                  router.reload();
-                }}
-              >
-                削除する
-              </RedButton>
-            </ModalFooter>
-          </Center>
-        </ModalContent>
-      </Modal>
-    </ChakraProvider>
+    <Modal className='w-1/2'>
+      <div className='w-full'>
+        <div className='ml-auto w-fit'>
+          <CloseButton onClick={() => props.setShowModal(false)} />
+        </div>
+      </div>
+      <div className='mx-auto mb-5 w-fit text-xl text-black-600'>募金の削除</div>
+      <div className='mx-auto my-5 w-fit text-xl'>削除しますか？</div>
+      <div className=''>
+        <div className='flex flex-row justify-center gap-5'>
+          <OutlinePrimaryButton onClick={closeModal}>戻る</OutlinePrimaryButton>
+          <PrimaryButton
+            onClick={() => {
+              deleteFundInformations(props.id);
+              closeModal();
+            }}
+          >
+            削除
+          </PrimaryButton>
+        </div>
+      </div>
+    </Modal>
   );
-}
+};
+
+export default DeleteModal;
diff --git a/view/next-project/src/components/fund_information/DetailModal.tsx b/view/next-project/src/components/fund_information/DetailModal.tsx
deleted file mode 100644
index 197039a5f..000000000
--- a/view/next-project/src/components/fund_information/DetailModal.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import {
-  ChakraProvider,
-  Center,
-  Text,
-  Flex,
-  Box,
-  Spacer,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalBody,
-  Grid,
-  GridItem,
-} from '@chakra-ui/react';
-import { useRouter } from 'next/router';
-import { FC, useEffect, useState, useCallback, Dispatch, SetStateAction } from 'react';
-import { RiCloseCircleLine } from 'react-icons/ri';
-
-import { get } from '@api/api_methods';
-import theme from '@assets/theme';
-
-interface ModalProps {
-  setShowModal: Dispatch<SetStateAction<boolean>>;
-  openModal: boolean;
-  children?: React.ReactNode;
-  id: number | string;
-}
-
-const PurchaseOrderEditModal: FC<ModalProps> = (props) => {
-  const closeModal = () => {
-    props.setShowModal(false);
-  };
-
-  const router = useRouter();
-
-  const [formData, setFormData] = useState({
-    deadline: '',
-    user_id: '',
-  });
-
-  // モーダルを開いているfund_informationを取得
-  const getFundInformation = useCallback(async () => {
-    const getFundInformationURL = process.env.CSR_API_URI + '/fund_informations/' + props.id;
-    setFormData(await get(getFundInformationURL));
-  }, [props.id]);
-
-  useEffect(() => {
-    if (router.isReady) {
-      getFundInformation();
-    }
-  }, [router, getFundInformation]);
-
-  return (
-    <ChakraProvider theme={theme}>
-      <Modal isOpen={props.openModal} onClose={closeModal} isCentered>
-        <ModalOverlay />
-        <ModalContent pb='5' borderRadius='3xl'>
-          <ModalBody p='3'>
-            <Flex mt='5'>
-              <Spacer />
-              <Box mr='5' _hover={{ background: '#E2E8F0', cursor: 'pointer' }}>
-                <RiCloseCircleLine size={'30px'} color={'gray'} onClick={closeModal} />
-              </Box>
-            </Flex>
-            <Grid templateColumns='repeat(12, 1fr)' gap={4} mb={10}>
-              <GridItem colSpan={12}>
-                <Center color='black.600' h='100%' fontSize='2xl'>
-                  詳細
-                </Center>
-              </GridItem>
-              <GridItem colSpan={1} />
-              <GridItem colSpan={3}>
-                <Flex color='black.600' h='100%' justify='end' align='center'>
-                  購入期限日
-                </Flex>
-              </GridItem>
-              <GridItem colSpan={7} borderBottom='1px' borderBottomColor='primary.1'>
-                <Flex color='black.600' h='100%' justify='start' align='center'>
-                  <Text fontSize='lg' pl={2}>
-                    {formData.deadline}
-                  </Text>
-                </Flex>
-              </GridItem>
-              <GridItem colSpan={1} />
-              <GridItem colSpan={1} />
-              <GridItem colSpan={3}>
-                <Flex color='black.600' h='100%' justify='end' align='center'>
-                  申請者
-                </Flex>
-              </GridItem>
-              <GridItem colSpan={7} borderBottom='1px' borderBottomColor='primary.1'>
-                <Flex color='black.600' h='100%' justify='start' align='center'>
-                  <Text fontSize='lg' pl={2}>
-                    {formData.user_id}
-                  </Text>
-                </Flex>
-              </GridItem>
-              <GridItem colSpan={1} />
-            </Grid>
-          </ModalBody>
-        </ModalContent>
-      </Modal>
-    </ChakraProvider>
-  );
-};
-
-export default PurchaseOrderEditModal;
diff --git a/view/next-project/src/components/fund_information/EditModal.tsx b/view/next-project/src/components/fund_information/EditModal.tsx
index 96c1e179e..40ef5b50d 100644
--- a/view/next-project/src/components/fund_information/EditModal.tsx
+++ b/view/next-project/src/components/fund_information/EditModal.tsx
@@ -1,65 +1,40 @@
-import {
-  Box,
-  Center,
-  ChakraProvider,
-  Flex,
-  Grid,
-  GridItem,
-  Input,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalOverlay,
-  Select,
-  Spacer,
-} from '@chakra-ui/react';
 import { useRouter } from 'next/router';
-import { Dispatch, ReactNode, SetStateAction, useCallback, useEffect, useState } from 'react';
-import { RiCloseCircleLine } from 'react-icons/ri';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
-import { get } from '@api/api_methods';
 import { put } from '@api/fundInformations';
-import theme from '@assets/theme';
-import Button from '@components/common/RegistButton';
-import { FundInformation, Teacher, User } from '@type/common';
+import { FundInformation, Teacher, User, Department } from '@type/common';
+
+import { Modal, Input, Select, CloseButton, PrimaryButton } from '../common';
 
 interface ModalProps {
   setShowModal: Dispatch<SetStateAction<boolean>>;
-  openModal: boolean;
-  children?: ReactNode;
-  id: number | string;
   teachers: Teacher[];
-  currentUser: User;
+  users: User[];
+  departments: Department[];
+  fundInformation: FundInformation;
 }
 
-export default function FundInformationEditModal(props: ModalProps) {
-  const closeModal = () => {
-    props.setShowModal(false);
-  };
-
+export default function EditModal(props: ModalProps) {
   const router = useRouter();
 
   const [formData, setFormData] = useState<FundInformation>({
-    userID: 0,
-    teacherID: 0,
-    price: 0,
-    remark: '',
+    id: props.fundInformation.id,
+    userID: props.fundInformation.userID,
+    teacherID: props.fundInformation.teacherID,
+    price: props.fundInformation.price,
+    remark: props.fundInformation.remark,
     isFirstCheck: false,
     isLastCheck: false,
   });
 
-  // モーダルを開いているfund_informationを取得
-  const getFundInformation = useCallback(async () => {
-    const getFundInformationURL = process.env.CSR_API_URI + '/fund_informations/' + props.id;
-    setFormData(await get(getFundInformationURL));
-  }, [props.id]);
+  const [departmentID, setDepartmentID] = useState<number | string>(1);
 
   useEffect(() => {
-    if (router.isReady) {
-      getFundInformation();
+    const teacher = props.teachers.find((teacher) => teacher.departmentID === departmentID);
+    if (teacher && teacher.id) {
+      setFormData({ ...formData, teacherID: teacher.id });
     }
-  }, [router, getFundInformation]);
+  }, [departmentID]);
 
   const handler =
     (input: string) =>
@@ -72,104 +47,80 @@ export default function FundInformationEditModal(props: ModalProps) {
       setFormData({ ...formData, [input]: e.target.value });
     };
 
-  const submitFundInformation = async (data: FundInformation, id: number | string) => {
-    const submitFundInformationURL = process.env.CSR_API_URI + '/fund_informations/' + id;
+  const submitFundInformation = async (data: FundInformation) => {
+    const submitFundInformationURL = process.env.CSR_API_URI + '/fund_informations/' + data.id;
     await put(submitFundInformationURL, data);
     router.reload();
   };
 
   return (
-    <ChakraProvider theme={theme}>
-      <Modal isOpen={props.openModal} onClose={closeModal} isCentered>
-        <ModalOverlay />
-        <ModalContent pb='5' borderRadius='3xl'>
-          <ModalBody p='3'>
-            <Flex mt='5'>
-              <Spacer />
-              <Box mr='5' _hover={{ background: '#E2E8F0', cursor: 'pointer' }}>
-                <RiCloseCircleLine size={'23px'} color={'gray'} onClick={closeModal} />
-              </Box>
-            </Flex>
-            <Grid templateColumns='repeat(12, 1fr)' gap={4}>
-              <GridItem rowSpan={1} colSpan={12}>
-                <Center color='black.600' h='100%' fontSize='xl'>
-                  募金の編集
-                </Center>
-              </GridItem>
-              <GridItem colSpan={1} />
-              <GridItem colSpan={10}>
-                <Grid templateColumns='repeat(12, 1fr)' gap={4}>
-                  <GridItem rowSpan={1} colSpan={4}>
-                    <Flex color='black.600' h='100%' justify='end' align='center'>
-                      教員名
-                    </Flex>
-                  </GridItem>
-                  <GridItem rowSpan={1} colSpan={8}>
-                    <Select
-                      value={formData.teacherID}
-                      onChange={handler('teacherID')}
-                      borderRadius='full'
-                      borderColor='primary.1'
-                      w='224px'
-                    >
-                      {props.teachers.map((data) => (
-                        <option key={data.id} value={data.id}>
-                          {data.name}
-                        </option>
-                      ))}
-                    </Select>
-                  </GridItem>
-                  <GridItem rowSpan={1} colSpan={4}>
-                    <Flex color='black.600' h='100%' justify='end' align='center'>
-                      金額
-                    </Flex>
-                  </GridItem>
-                  <GridItem rowSpan={1} colSpan={8}>
-                    <Flex>
-                      <Input
-                        w='100'
-                        borderRadius='full'
-                        borderColor='primary.1'
-                        value={formData.price}
-                        onChange={handler('price')}
-                      />
-                    </Flex>
-                  </GridItem>
-                  <GridItem rowSpan={1} colSpan={4}>
-                    <Flex color='black.600' h='100%' justify='end' align='center'>
-                      備考
-                    </Flex>
-                  </GridItem>
-                  <GridItem rowSpan={1} colSpan={8}>
-                    <Flex>
-                      <Input
-                        w='100'
-                        borderRadius='full'
-                        borderColor='primary.1'
-                        value={formData.remark}
-                        onChange={handler('remark')}
-                      />
-                    </Flex>
-                  </GridItem>
-                </Grid>
-              </GridItem>
-              <GridItem colSpan={1} />
-            </Grid>
-          </ModalBody>
-          <Center>
-            <ModalFooter mt='5' mb='10'>
-              <Button
-                width='220px'
-                onClick={() => {
-                  submitFundInformation(formData, props.id);
-                }}
-              >
-                編集する
-              </Button>
-            </ModalFooter>
-          </Center>
-        </ModalContent>
-      </Modal>
-    </ChakraProvider>
+    <Modal className='w-1/2'>
+      <div className='w-full'>
+        <div className='mr-5 ml-auto w-fit'>
+          <CloseButton onClick={() => props.setShowModal(false)} />
+        </div>
+      </div>
+      <h1 className='mx-auto mb-10 w-fit text-xl text-black-600'>募金の登録</h1>
+      <div className='my-6 grid grid-cols-5 items-center justify-items-center gap-4'>
+        <p className='col-span-1 text-black-600'>所属</p>
+        <div className='col-span-4 w-full'>
+          <Select
+            className='w-full'
+            value={departmentID}
+            onChange={(e) => {
+              setDepartmentID(Number(e.target.value));
+            }}
+          >
+            {props.departments.map((department) => (
+              <option key={department.id} value={department.id}>
+                {department.name}
+              </option>
+            ))}
+          </Select>
+        </div>
+        <p className='col-span-1 text-black-600'>教員名</p>
+        <div className='col-span-4 w-full'>
+          <Select className='w-full' value={formData.teacherID} onChange={handler('teacherID')}>
+            {props.teachers
+              .filter((teacher) => teacher.departmentID === departmentID)
+              .map((teacher) => (
+                <option key={teacher.id} value={teacher.id}>
+                  {teacher.name}
+                </option>
+              ))}
+          </Select>
+        </div>
+        <p className='col-span-1 text-black-600'>担当者</p>
+        <div className='col-span-4 w-full'>
+          <Select className='w-full' value={formData.userID} onChange={handler('userID')}>
+            {props.users.map((user) => (
+              <option key={user.id} value={user.id}>
+                {user.name}
+              </option>
+            ))}
+          </Select>
+        </div>
+        <p className='col-span-1 text-black-600'>金額</p>
+        <div className='col-span-4 w-full'>
+          <Input className='w-full' value={formData.price} onChange={handler('price')} />
+        </div>
+        <p className='col-span-1 text-black-600'>備考</p>
+        <div className='col-span-4 w-full'>
+          <Input className='w-full' value={formData.remark} onChange={handler('remark')} />
+        </div>
+      </div>
+      <div className='mx-auto mb-5 w-fit'>
+        <PrimaryButton
+          className={'mx-2'}
+          onClick={() => {
+            submitFundInformation(formData);
+            props.setShowModal(false);
+            router.reload();
+          }}
+        >
+          登録する
+        </PrimaryButton>
+      </div>
+    </Modal>
   );
 }
diff --git a/view/next-project/src/components/fund_information/OpenAddModalButton.tsx b/view/next-project/src/components/fund_information/OpenAddModalButton.tsx
index 5f737c114..5e7f75608 100644
--- a/view/next-project/src/components/fund_information/OpenAddModalButton.tsx
+++ b/view/next-project/src/components/fund_information/OpenAddModalButton.tsx
@@ -1,45 +1,39 @@
-import { ChakraProvider, Button } from '@chakra-ui/react';
-import * as React from 'react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 
-import theme from '@assets/theme';
-import AddModal from '@components/fund_information/AddModal';
+import { AddButton } from '@components/common';
 import { Teacher, Department, User } from '@type/common';
 
+import OpenAddModal from './AddModal';
+
 interface Props {
-  width?: string;
-  height?: string;
   children?: React.ReactNode;
-  teachersInformation: Teacher[];
+  teachers: Teacher[];
   departments: Department[];
-  currentUser: User;
-  userID: number | string;
+  users: User[];
 }
 
-export default function OpenAddModalButton(props: Props) {
-  const [showModal, setShowModal] = useState(false);
-  const ShowModal = () => {
-    setShowModal(true);
-  };
+export const OpenAddModalButton = (props: Props) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
   return (
-    <ChakraProvider theme={theme}>
-      <Button
-        w={props.width}
-        h={props.height}
-        color='white'
-        bgGradient='linear(to-br, primary.1, primary.2)'
-        onClick={ShowModal}
+    <>
+      <AddButton
+        onClick={() => {
+          setIsOpen(true);
+        }}
       >
         {props.children}
-      </Button>
-      <AddModal
-        teachersInformation={props.teachersInformation}
-        departments={props.departments}
-        openModal={showModal}
-        setShowModal={setShowModal}
-        currentUser={props.currentUser}
-        userID={props.userID}
-      />
-    </ChakraProvider>
+      </AddButton>
+      {isOpen && (
+        <OpenAddModal
+          setShowModal={setIsOpen}
+          teachers={props.teachers}
+          departments={props.departments}
+          users={props.users}
+        />
+      )}
+    </>
   );
-}
+};
+
+export default OpenAddModalButton;
diff --git a/view/next-project/src/components/fund_information/OpenDeleteModalButton.tsx b/view/next-project/src/components/fund_information/OpenDeleteModalButton.tsx
index cb8120af0..5138fada6 100644
--- a/view/next-project/src/components/fund_information/OpenDeleteModalButton.tsx
+++ b/view/next-project/src/components/fund_information/OpenDeleteModalButton.tsx
@@ -1,48 +1,24 @@
-import { ChakraProvider, Button } from '@chakra-ui/react';
-import * as React from 'react';
-import { useState } from 'react';
-import { RiDeleteBinLine } from 'react-icons/ri';
+import React, { useState } from 'react';
 
-import theme from '@assets/theme';
-import DeleteModal from '@components/fund_information/DeleteModal';
+import { DeleteButton } from '@components/common';
+
+import DeleteModal from './DeleteModal';
 
 interface Props {
-  width?: string;
-  height?: string;
   children?: React.ReactNode;
   id: number;
-  teacherID: number;
-  userID: number;
 }
 
 const OpenDeleteModalButton: React.FC<Props> = (props) => {
-  const [showModal, setShowModal] = useState(false);
-  const ShowModal = () => {
-    setShowModal(true);
+  const [isOpen, setIsOpen] = useState(false);
+  const onOpen = () => {
+    setIsOpen(true);
   };
   return (
-    <ChakraProvider theme={theme}>
-      <Button
-        w='25px'
-        h='25px'
-        p='0'
-        minWidth='0'
-        borderRadius='full'
-        bgGradient='linear(to-br, red.500 ,red.600)'
-        _hover={{ bg: 'red.600' }}
-        onClick={ShowModal}
-      >
-        <RiDeleteBinLine size={'15px'} color={'white'} />
-        {props.children}
-      </Button>
-      <DeleteModal
-        id={props.id}
-        teacherID={props.teacherID}
-        userID={props.userID}
-        openModal={showModal}
-        setShowModal={setShowModal}
-      />
-    </ChakraProvider>
+    <>
+      <DeleteButton onClick={onOpen} isDisabled={true} />
+      {isOpen && <DeleteModal id={props.id} setShowModal={setIsOpen} />}
+    </>
   );
 };
 
diff --git a/view/next-project/src/components/fund_information/OpenEditModalButton.tsx b/view/next-project/src/components/fund_information/OpenEditModalButton.tsx
index c4983c691..d045e0bf5 100644
--- a/view/next-project/src/components/fund_information/OpenEditModalButton.tsx
+++ b/view/next-project/src/components/fund_information/OpenEditModalButton.tsx
@@ -1,49 +1,38 @@
-import { ChakraProvider, Button } from '@chakra-ui/react';
-import * as React from 'react';
-import { useState } from 'react';
-import { RiPencilFill } from 'react-icons/ri';
+import React, { useState } from 'react';
 
-import theme from '@assets/theme';
-import EditModal from '@components/fund_information/EditModal';
-import { Teacher, User } from '@type/common';
+import { EditButton } from '@components/common';
+import { Teacher, Department, User, FundInformation } from '@type/common';
+
+import EditModal from './EditModal';
 
 interface Props {
-  width?: string;
-  height?: string;
-  children?: React.ReactNode;
-  id: number;
   teachers: Teacher[];
-  currentUser: User;
+  departments: Department[];
+  users: User[];
+  fundInformation: FundInformation;
 }
 
-const OpenEditModalButton: React.FC<Props> = (props) => {
-  const [showModal, setShowModal] = useState(false);
-  const ShowModal = () => {
-    setShowModal(true);
-  };
+export const OpenAddModalButton = (props: Props) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
   return (
-    <ChakraProvider theme={theme}>
-      <Button
-        w='25px'
-        h='25px'
-        p='0'
-        minWidth='0'
-        borderRadius='full'
-        bgGradient='linear(to-br, primary.1 ,primary.2)'
-        onClick={ShowModal}
-      >
-        <RiPencilFill size={'15px'} color={'white'} />
-        {props.children}
-      </Button>
-      <EditModal
-        id={props.id}
-        openModal={showModal}
-        setShowModal={setShowModal}
-        teachers={props.teachers}
-        currentUser={props.currentUser}
+    <>
+      <EditButton
+        onClick={() => {
+          setIsOpen(true);
+        }}
       />
-    </ChakraProvider>
+      {isOpen && (
+        <EditModal
+          setShowModal={setIsOpen}
+          teachers={props.teachers}
+          departments={props.departments}
+          users={props.users}
+          fundInformation={props.fundInformation}
+        />
+      )}
+    </>
   );
 };
 
-export default OpenEditModalButton;
+export default OpenAddModalButton;
diff --git a/view/next-project/src/components/layout/Layout/Layout.tsx b/view/next-project/src/components/layout/Layout/Layout.tsx
index c434e53a1..a49225d16 100644
--- a/view/next-project/src/components/layout/Layout/Layout.tsx
+++ b/view/next-project/src/components/layout/Layout/Layout.tsx
@@ -2,7 +2,6 @@ import React, { ReactNode } from 'react';
 
 import SponsorActivitiesAddModal from '@/components/sponsoractivities/SponsorActivitiesAddModal';
 import SponsorAddModal from '@/components/sponsors/SponsorAddModal';
-import SponsorStyleNumModal from '@/components/sponsorstyles/SponsorStyleNumModal';
 import PurchaseItemNumModal from '@components/purchaseorders/PurchaseItemNumModal';
 import PurchaseReportAddModal from '@components/purchasereports/AddModal';
 import PurchaseOrderListModal from '@components/purchasereports/PurchaseOrderListModal';
@@ -20,7 +19,6 @@ const ModalView: React.FC<{ modalView: string }> = ({ modalView }) => {
       {modalView === 'PURCHASE_ORDER_LIST_MODAL' && <PurchaseOrderListModal />}
       {modalView === 'PURCHASE_REPORT_ITEM_NUM_MODAL' && <PurchaseReportItemNumModal />}
       {modalView === 'SPONSOR_ACTIVITIES_ADD_MODAL' && <SponsorActivitiesAddModal />}
-      {modalView === 'SPONSOR_STYLE_NUM_MODAL' && <SponsorStyleNumModal />}
     </>
   );
 };
diff --git a/view/next-project/src/components/purchaseorders/DeleteModal.tsx b/view/next-project/src/components/purchaseorders/DeleteModal.tsx
new file mode 100644
index 000000000..419d3a04c
--- /dev/null
+++ b/view/next-project/src/components/purchaseorders/DeleteModal.tsx
@@ -0,0 +1,52 @@
+import { useRouter } from 'next/router';
+import React, { Dispatch, FC, SetStateAction } from 'react';
+
+import { del } from '@api/api_methods';
+
+import { CloseButton, Modal, OutlinePrimaryButton, PrimaryButton } from '../common';
+
+interface ModalProps {
+  setShowModal: Dispatch<SetStateAction<boolean>>;
+  id: number | string;
+}
+
+const DeleteModal: FC<ModalProps> = (props) => {
+  const closeModal = () => {
+    props.setShowModal(false);
+  };
+
+  const router = useRouter();
+
+  const deletePurchaseOrder = async (id: number | string) => {
+    const deletePurchaseReportUrl = process.env.CSR_API_URI + '/purchaseorders/' + id;
+    await del(deletePurchaseReportUrl);
+  };
+
+  return (
+    <Modal className='w-1/2'>
+      <div className='w-full'>
+        <div className='ml-auto w-fit'>
+          <CloseButton onClick={() => props.setShowModal(false)} />
+        </div>
+      </div>
+      <div className='mx-auto mb-5 w-fit text-xl text-black-600'>購入申請の削除</div>
+      <div className='mx-auto my-5 w-fit text-xl'>削除しますか？</div>
+      <div className=''>
+        <div className='flex flex-row justify-center gap-5'>
+          <OutlinePrimaryButton onClick={closeModal}>戻る</OutlinePrimaryButton>
+          <PrimaryButton
+            onClick={() => {
+              deletePurchaseOrder(props.id);
+              closeModal();
+              router.reload();
+            }}
+          >
+            削除
+          </PrimaryButton>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default DeleteModal;
diff --git a/view/next-project/src/components/purchaseorders/DetailModal.tsx b/view/next-project/src/components/purchaseorders/DetailModal.tsx
index b1df31599..01846ea78 100644
--- a/view/next-project/src/components/purchaseorders/DetailModal.tsx
+++ b/view/next-project/src/components/purchaseorders/DetailModal.tsx
@@ -1,13 +1,13 @@
 import clsx from 'clsx';
 import { useRouter } from 'next/router';
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { RiCloseCircleLine, RiExternalLinkLine, RiFileCopyLine } from 'react-icons/ri';
 import { useRecoilState } from 'recoil';
 
 import { userAtom } from '@/store/atoms';
 import { del } from '@api/api_methods';
 import { Checkbox, Modal, RedButton, Tooltip } from '@components/common';
-import { PurchaseItem, PurchaseOrderView } from '@type/common';
+import { PurchaseItem, PurchaseOrderView, Expense } from '@type/common';
 
 interface ModalProps {
   isOpen: boolean;
@@ -15,6 +15,7 @@ interface ModalProps {
   children?: React.ReactNode;
   id: number | string;
   purchaseOrderViewItem: PurchaseOrderView;
+  expenses: Expense[];
   isDelete: boolean;
 }
 
@@ -38,8 +39,15 @@ const DetailModal: FC<ModalProps> = (props) => {
     await del(deletePurchaseOrderUrl);
   };
 
+  const expenseName = useMemo(() => {
+    const expense = props.expenses.find(
+      (expense) => expense.id === props.purchaseOrderViewItem.purchaseOrder.expenseID,
+    );
+    return expense ? expense.name : '';
+  }, [props.expenses, props.purchaseOrderViewItem]);
+
   return (
-    <Modal>
+    <Modal className='w-1/2'>
       <div className={clsx('w-full')}>
         <div className={clsx('mr-5 grid w-full justify-items-end')}>
           <RiCloseCircleLine size={'23px'} color={'gray'} onClick={onClose} />
@@ -80,24 +88,7 @@ const DetailModal: FC<ModalProps> = (props) => {
                 'col-span-3 grid w-full border border-x-white-0 border-b-primary-1 border-t-white-0 pl-1',
               )}
             >
-              {props.purchaseOrderViewItem &&
-                props.purchaseOrderViewItem.user.bureauID === 1 &&
-                '総務局'}
-              {props.purchaseOrderViewItem &&
-                props.purchaseOrderViewItem.user.bureauID === 2 &&
-                '渉外局'}
-              {props.purchaseOrderViewItem &&
-                props.purchaseOrderViewItem.user.bureauID === 3 &&
-                '財務局'}
-              {props.purchaseOrderViewItem &&
-                props.purchaseOrderViewItem.user.bureauID === 4 &&
-                '企画局'}
-              {props.purchaseOrderViewItem &&
-                props.purchaseOrderViewItem.user.bureauID === 5 &&
-                '政策局'}
-              {props.purchaseOrderViewItem &&
-                props.purchaseOrderViewItem.user.bureauID === 6 &&
-                '情報局'}
+              {expenseName}
             </div>
             <div className={clsx('col-span-3 grid')} />
           </div>
diff --git a/view/next-project/src/components/purchaseorders/EditModal.tsx b/view/next-project/src/components/purchaseorders/EditModal.tsx
index 474af3268..741e99c64 100644
--- a/view/next-project/src/components/purchaseorders/EditModal.tsx
+++ b/view/next-project/src/components/purchaseorders/EditModal.tsx
@@ -193,9 +193,7 @@ export default function EditModal(props: ModalProps) {
                             }}
                           >
                             <div className={clsx('flex')}>
-                              {activeStep === formDataList.length
-                                ? '登録して編集を完了'
-                                : '登録して次へ'}
+                              {activeStep === formDataList.length ? '詳細の編集へ' : '登録して次へ'}
                               <RiArrowDropRightLine size={23} />
                             </div>
                           </PrimaryButton>
diff --git a/view/next-project/src/components/purchaseorders/OpenAddModalButton.tsx b/view/next-project/src/components/purchaseorders/OpenAddModalButton.tsx
index 9d18de7d9..9868b6613 100644
--- a/view/next-project/src/components/purchaseorders/OpenAddModalButton.tsx
+++ b/view/next-project/src/components/purchaseorders/OpenAddModalButton.tsx
@@ -1,28 +1,28 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { AddButton } from '@components/common';
-import { useUI } from '@components/ui/context';
+import { Expense } from '@type/common';
+
+import PurchaseItemNumModal from './PurchaseItemNumModal';
 
 interface Props {
-  width?: string;
-  height?: string;
   children?: React.ReactNode;
-  onClick?: () => void;
+  expenses: Expense[];
 }
 
 export default function OpenModalButton(props: Props) {
-  const { setModalView, openModal } = useUI();
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
     <>
       <AddButton
         onClick={() => {
-          setModalView('PURCHASE_ITEM_NUM_MODAL');
-          openModal();
+          setIsOpen(true);
         }}
       >
         {props.children}
       </AddButton>
+      {isOpen && <PurchaseItemNumModal setIsOpen={setIsOpen} expenses={props.expenses} />}
     </>
   );
 }
diff --git a/view/next-project/src/components/purchaseorders/OpenDeleteModalButton.tsx b/view/next-project/src/components/purchaseorders/OpenDeleteModalButton.tsx
index 966476df1..f06ec57a0 100644
--- a/view/next-project/src/components/purchaseorders/OpenDeleteModalButton.tsx
+++ b/view/next-project/src/components/purchaseorders/OpenDeleteModalButton.tsx
@@ -2,13 +2,11 @@ import React from 'react';
 import { useState } from 'react';
 
 import { DeleteButton } from '@components/common';
-import DetailModal from '@components/purchaseorders/DetailModal';
-import { PurchaseOrderView } from '@type/common';
+
+import DeleteModal from './DeleteModal';
 
 interface Props {
-  children?: React.ReactNode;
   id: number;
-  purchaseOrderViewItem: PurchaseOrderView;
   isDisabled: boolean;
 }
 
@@ -20,15 +18,7 @@ const OpenDeleteModalButton: React.FC<Props> = (props) => {
   return (
     <>
       <DeleteButton onClick={onOpen} isDisabled={props.isDisabled} />
-      {isOpen && (
-        <DetailModal
-          id={props.id}
-          isOpen={isOpen}
-          setIsOpen={setIsOpen}
-          purchaseOrderViewItem={props.purchaseOrderViewItem}
-          isDelete={true}
-        />
-      )}
+      {isOpen && <DeleteModal id={props.id} setShowModal={setIsOpen} />}
     </>
   );
 };
diff --git a/view/next-project/src/components/purchaseorders/PurchaseItemNumModal.tsx b/view/next-project/src/components/purchaseorders/PurchaseItemNumModal.tsx
index e9ebd2d10..46cec8951 100644
--- a/view/next-project/src/components/purchaseorders/PurchaseItemNumModal.tsx
+++ b/view/next-project/src/components/purchaseorders/PurchaseItemNumModal.tsx
@@ -1,4 +1,3 @@
-import clsx from 'clsx';
 import React, { useState } from 'react';
 import { useRecoilState } from 'recoil';
 
@@ -6,17 +5,19 @@ import { userAtom } from '@/store/atoms';
 import { post } from '@api/purchaseOrder';
 import { CloseButton, Input, Modal, PrimaryButton, Select } from '@components/common';
 import AddModal from '@components/purchaseorders/PurchaseOrderAddModal';
-import { useUI } from '@components/ui/context';
-import { PurchaseItem, PurchaseOrder } from '@type/common';
+import { PurchaseItem, PurchaseOrder, Expense } from '@type/common';
 
-export default function PurchaseItemNumModal() {
+export interface PurchaseItemNumModalProps {
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  expenses: Expense[];
+}
+
+export default function PurchaseItemNumModal(props: PurchaseItemNumModalProps) {
   const [user] = useRecoilState(userAtom);
 
   // 購入物品数用の配列
   const purchaseItemNumArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
-  const { closeModal } = useUI();
-
   const [isOpen, setIsOpen] = useState(false);
 
   const onOpen = () => {
@@ -26,10 +27,11 @@ export default function PurchaseItemNumModal() {
     setIsOpen(false);
   };
 
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState<PurchaseOrder>({
     deadline: '',
     userID: user.id,
     financeCheck: false,
+    expenseID: 1,
   });
   const [purchaseItemNum, setPurchaseItemNum] = useState({
     value: 1,
@@ -96,59 +98,52 @@ export default function PurchaseItemNumModal() {
   return (
     <>
       <Modal>
-        <div className={clsx('w-full')}>
-          <div className={clsx('mr-5 grid w-full justify-items-end')}>
-            <CloseButton onClick={closeModal} />
+        <div className='w-full'>
+          <div className='ml-auto w-fit'>
+            <CloseButton onClick={() => props.setIsOpen(false)} />
           </div>
         </div>
-        <div className={clsx('mb-10 grid w-full justify-items-center text-xl text-black-600')}>
-          購入申請の作成
-        </div>
-        <div className={clsx('mb-10 grid grid-cols-12 gap-4')}>
-          <div className={clsx('col-span-1 grid')} />
-          <div className={clsx('col-span-10 grid')}>
-            <div className={clsx('my-2 grid w-full grid-cols-12')}>
-              <div className={clsx('col-span-4 mr-2 grid')}>
-                <div
-                  className={clsx(
-                    'text-md flex grid items-center justify-items-end text-black-600',
-                  )}
-                >
-                  購入期限
-                </div>
-              </div>
-              <div className={clsx('col-span-8 my-2 grid w-full')}>
-                <Input
-                  placeholder=' yyyymmddで入力'
-                  value={formData.deadline}
-                  onChange={formDataHandler('deadline')}
-                />
-              </div>
-            </div>
-            <div className={clsx('grid w-full grid-cols-12')}>
-              <div className={clsx('h-100 col-span-4 mr-2 grid')}>
-                <div
-                  className={clsx(
-                    'text-md flex grid items-center justify-items-end text-black-600',
-                  )}
-                >
-                  購入物品数
-                </div>
-              </div>
-              <div className={clsx('col-span-8 grid w-full')}>
-                <Select value={purchaseItemNum.value} onChange={purchaseItemNumHandler('value')}>
-                  {purchaseItemNumArray.map((data) => (
-                    <option key={data} value={data}>
-                      {data}
-                    </option>
-                  ))}
-                </Select>
-              </div>
-            </div>
+        <div className='mx-auto mb-10 w-fit text-xl text-black-600'>購入申請の作成</div>
+        <div className='mb-10 grid grid-cols-5 items-center justify-items-center gap-4'>
+          <p className='grid-cols-1 text-black-600'>購入期限</p>
+          <div className='col-span-4 w-full'>
+            <Input
+              type='date'
+              value={formData.deadline}
+              onChange={formDataHandler('deadline')}
+              className='w-full'
+            />
+          </div>
+          <p className='grid-cols-1 text-black-600'>購入したい局・団体</p>
+          <div className='col-span-4 w-full'>
+            <Select
+              value={formData.expenseID}
+              onChange={formDataHandler('expenseID')}
+              className='w-full'
+            >
+              {props.expenses.map((data) => (
+                <option key={data.id} value={data.id}>
+                  {data.name}
+                </option>
+              ))}
+            </Select>
+          </div>
+          <p className='grid-cols-1 text-black-600'>購入物品数</p>
+          <div className='col-span-4 w-full'>
+            <Select
+              value={purchaseItemNum.value}
+              onChange={purchaseItemNumHandler('value')}
+              className='w-full'
+            >
+              {purchaseItemNumArray.map((data) => (
+                <option key={data} value={data}>
+                  {data}
+                </option>
+              ))}
+            </Select>
           </div>
-          <div className={clsx('col-span-1 grid ')} />
         </div>
-        <div className={clsx('grid justify-items-center py-3')}>
+        <div className='mx-auto my-3 w-fit'>
           <PrimaryButton
             onClick={() => {
               submit(formData);
@@ -159,12 +154,11 @@ export default function PurchaseItemNumModal() {
           </PrimaryButton>
         </div>
       </Modal>
-
       {isOpen && (
         <AddModal
           purchaseItemNum={purchaseItemNum}
           isOpen={isOpen}
-          numModalOnClose={closeModal}
+          numModalOnClose={() => props.setIsOpen(false)}
           onClose={onClose}
           setFormDataList={setFormDataList}
           formDataList={formDataList}
diff --git a/view/next-project/src/components/purchaseorders/PurchaseOrderAddModal.tsx b/view/next-project/src/components/purchaseorders/PurchaseOrderAddModal.tsx
index ce1854144..1578924d6 100644
--- a/view/next-project/src/components/purchaseorders/PurchaseOrderAddModal.tsx
+++ b/view/next-project/src/components/purchaseorders/PurchaseOrderAddModal.tsx
@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import { RiExternalLinkLine, RiFileCopyLine } from 'react-icons/ri';
 import { RiArrowDropRightLine } from 'react-icons/ri';
 
+import { del } from '@api/api_methods';
 import { post } from '@api/purchaseItem';
 import {
   PrimaryButton,
@@ -45,6 +46,12 @@ export default function AddModal(props: ModalProps) {
   const [isDone, setIsDone] = useState<boolean>(false);
   const router = useRouter();
 
+  const deletePurchaseOrder = async () => {
+    const deletePurchaseOrderUrl =
+      process.env.CSR_API_URI + '/purchaseorders/' + props.formDataList[0].purchaseOrderID;
+    await del(deletePurchaseOrderUrl);
+  };
+
   const handler =
     (stepNumber: number, input: string) =>
     (e: React.ChangeEvent<HTMLSelectElement> | React.ChangeEvent<HTMLInputElement>) => {
@@ -87,7 +94,7 @@ export default function AddModal(props: ModalProps) {
           </div>
         </div>
         <div className={clsx('col-span-10 grid w-full')}>
-          <Input value={data.price} onChange={handler(index, 'price')} />
+          <Input type='number' value={data.price} onChange={handler(index, 'price')} />
         </div>
         <div className={clsx('col-span-2 mr-2 grid')}>
           <div className={clsx('text-md flex grid items-center justify-items-end text-black-600')}>
@@ -95,7 +102,7 @@ export default function AddModal(props: ModalProps) {
           </div>
         </div>
         <div className={clsx('col-span-10 grid w-full')}>
-          <Input value={data.quantity} onChange={handler(index, 'quantity')} />
+          <Input type='number' value={data.quantity} onChange={handler(index, 'quantity')} />
         </div>
         <div className={clsx('col-span-2 mr-2 grid')}>
           <div className={clsx('text-md flex grid items-center justify-items-end text-black-600')}>
@@ -229,6 +236,7 @@ export default function AddModal(props: ModalProps) {
           <div className={clsx('mr-5 grid w-full justify-items-end')}>
             <CloseButton
               onClick={() => {
+                deletePurchaseOrder();
                 props.onClose();
                 props.numModalOnClose();
               }}
diff --git a/view/next-project/src/components/purchasereports/AddModal.tsx b/view/next-project/src/components/purchasereports/AddModal.tsx
index ee7c9b8c4..a9d99c1a6 100644
--- a/view/next-project/src/components/purchasereports/AddModal.tsx
+++ b/view/next-project/src/components/purchasereports/AddModal.tsx
@@ -1,104 +1,39 @@
-import clsx from 'clsx';
-import React, { useState } from 'react';
-import { useRecoilState } from 'recoil';
+import React from 'react';
 
-import { BUREAUS } from '@/constants/bureaus';
-import { userAtom } from '@/store/atoms';
-import { CloseButton, Modal, PrimaryButton, PullDown } from '@components/common';
+import { CloseButton, Modal, PrimaryButton } from '@components/common';
 import { useUI } from '@components/ui/context';
 
 export default function PurchaseItemNumModal() {
-  const [user] = useRecoilState(userAtom);
-
   const { setModalView, openModal, closeModal } = useUI();
 
-  const [bureauID, setBureauID] = useState<number>(user.bureauID);
-
-  // 申請する局用のhandler
-  const bureauHandler = () => (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setBureauID(Number(e.target.value));
-  };
-
   return (
-    <Modal>
-      <div className={clsx('w-full')}>
-        <div className={clsx('mr-5 grid w-full justify-items-end')}>
-          <CloseButton onClick={closeModal} />
-        </div>
+    <Modal className='w-1/2'>
+      <div className='ml-auto w-fit'>
+        <CloseButton onClick={closeModal} />
       </div>
-      <div className={clsx('mb-10 grid w-full justify-items-center text-xl text-black-600')}>
-        購入報告の登録
+      <p className='mx-auto mb-10 w-fit text-xl text-black-600'>購入報告の登録</p>
+      <div className='mb-10 flex flex-col items-center gap-2 text-black-600'>
+        <p>申請した物品としていない物品を同時に購入した場合は</p>
+        <p>2回に分けて登録をお願いします</p>
       </div>
-      <div className={clsx('mb-10 grid grid-cols-12 gap-4')}>
-        <div className={clsx('col-span-1 grid')} />
-        <div className={clsx('col-span-10 grid')}>
-          <div className={clsx('my-2 w-full')}>
-            <div className={clsx('text-md grid justify-items-end text-center text-black-600')}>
-              申請した物品としていない物品を同時に購入した場合は
-              <br />
-              2回に分けて登録をお願いします。
-            </div>
-          </div>
-          <div className={clsx('mt-5 grid w-full grid-cols-12')}>
-            <div className={clsx('h-100 col-span-2 grid')} />
-            <div
-              className={clsx(
-                'text-md h-100 col-span-4 flex grid w-full items-center justify-items-end pr-3 text-right text-black-600',
-              )}
-            >
-              申請する局
-            </div>
-            <div
-              className={clsx(
-                'text-md h-100 col-span-4 mr-2 grid w-full justify-items-start text-right font-bold text-black-600',
-              )}
-            >
-              <PullDown value={bureauID} onChange={bureauHandler()}>
-                {BUREAUS.map((data) => (
-                  <option key={data.id} value={data.id}>
-                    {data.name}
-                  </option>
-                ))}
-              </PullDown>
-            </div>
-            <div className={clsx('h-100 col-span-2 grid')} />
-          </div>
-        </div>
-        <div className={clsx('col-span-1 grid ')} />
-      </div>
-      <div className={clsx('grid w-full grid-cols-12 pb-5')}>
-        <div className={clsx('h-100 col-span-1 grid')} />
-        <div
-          className={clsx(
-            'text-md h-100 col-span-10 grid w-full justify-items-center pr-3 text-black-600',
-          )}
+      <div className='flex justify-center gap-5'>
+        <PrimaryButton
+          onClick={() => {
+            setModalView('PURCHASE_ORDER_LIST_MODAL');
+            openModal();
+          }}
+        >
+          購入申請から登録
+        </PrimaryButton>
+        <PrimaryButton
+          onClick={() => {
+            setModalView('PURCHASE_REPORT_ITEM_NUM_MODAL');
+            openModal();
+          }}
         >
-          <div className={clsx('flex')}>
-            <div className={clsx('mx-2')}>
-              <PrimaryButton
-                onClick={() => {
-                  setModalView('PURCHASE_ORDER_LIST_MODAL');
-                  openModal();
-                }}
-              >
-                購入申請から登録
-              </PrimaryButton>
-            </div>
-            <div className={clsx('mx-2')}>
-              <PrimaryButton
-                onClick={() => {
-                  setModalView('PURCHASE_REPORT_ITEM_NUM_MODAL');
-                  openModal();
-                }}
-              >
-                単体で登録
-              </PrimaryButton>
-            </div>
-          </div>
-        </div>
-        <div className={clsx('h-100 col-span-1 grid')} />
+          申請していない物品を登録
+        </PrimaryButton>
       </div>
-      <div className={clsx('grid justify-items-center px-1')}></div>
     </Modal>
   );
 }
diff --git a/view/next-project/src/components/purchasereports/DeleteModal.tsx b/view/next-project/src/components/purchasereports/DeleteModal.tsx
index 9d48dea09..86e1a83f9 100644
--- a/view/next-project/src/components/purchasereports/DeleteModal.tsx
+++ b/view/next-project/src/components/purchasereports/DeleteModal.tsx
@@ -1,24 +1,9 @@
-import {
-  Box,
-  Center,
-  ChakraProvider,
-  Flex,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalOverlay,
-  Spacer,
-  Text,
-  VStack,
-} from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React, { Dispatch, FC, SetStateAction } from 'react';
-import { RiCloseCircleLine } from 'react-icons/ri';
 
 import { del } from '@api/api_methods';
-import theme from '@assets/theme';
-import Button from '@components/common/RegistButton';
+
+import { CloseButton, Modal, OutlinePrimaryButton, PrimaryButton } from '../common';
 
 interface ModalProps {
   setShowModal: Dispatch<SetStateAction<boolean>>;
@@ -40,46 +25,29 @@ const PurchaseReportDeleteModal: FC<ModalProps> = (props) => {
   };
 
   return (
-    <ChakraProvider theme={theme}>
-      <Modal isOpen={props.openModal} onClose={closeModal} isCentered>
-        <ModalOverlay />
-        <ModalContent pb='5' borderRadius='3xl'>
-          <ModalBody p='3'>
-            <Flex mt='5'>
-              <Spacer />
-              <Box mr='5' _hover={{ background: '#E2E8F0', cursor: 'pointer' }}>
-                <RiCloseCircleLine size={'23px'} color={'gray'} onClick={closeModal} />
-              </Box>
-            </Flex>
-            <VStack spacing='30px'>
-              <Text fontSize='xl' color='black.600'>
-                購入報告の削除
-              </Text>
-              <VStack spacing='15px'>
-                <Flex>
-                  <Center color='black.600' mr='3'>
-                    削除してもよいですか？
-                  </Center>
-                </Flex>
-              </VStack>
-            </VStack>
-          </ModalBody>
-          <Center>
-            <ModalFooter mt='5' mb='10'>
-              <Button
-                width='220px'
-                onClick={() => {
-                  deletePurchaseReport(props.id);
-                  router.reload();
-                }}
-              >
-                削除する
-              </Button>
-            </ModalFooter>
-          </Center>
-        </ModalContent>
-      </Modal>
-    </ChakraProvider>
+    <Modal className='w-1/2'>
+      <div className='w-full'>
+        <div className='ml-auto w-fit'>
+          <CloseButton onClick={() => props.setShowModal(false)} />
+        </div>
+      </div>
+      <div className='mx-auto mb-5 w-fit text-xl text-black-600'>購入報告の削除</div>
+      <div className='mx-auto my-5 w-fit text-xl'>削除しますか？</div>
+      <div className=''>
+        <div className='flex flex-row justify-center gap-5'>
+          <OutlinePrimaryButton onClick={closeModal}>戻る</OutlinePrimaryButton>
+          <PrimaryButton
+            onClick={() => {
+              deletePurchaseReport(props.id);
+              closeModal();
+              router.reload();
+            }}
+          >
+            削除
+          </PrimaryButton>
+        </div>
+      </div>
+    </Modal>
   );
 };
 
diff --git a/view/next-project/src/components/purchasereports/DetailModal.tsx b/view/next-project/src/components/purchasereports/DetailModal.tsx
index bf6b57460..fdf95eb80 100644
--- a/view/next-project/src/components/purchasereports/DetailModal.tsx
+++ b/view/next-project/src/components/purchasereports/DetailModal.tsx
@@ -1,12 +1,12 @@
 import { useRouter } from 'next/router';
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { RiCloseCircleLine, RiExternalLinkLine, RiFileCopyLine } from 'react-icons/ri';
 import { useRecoilState } from 'recoil';
 
 import { userAtom } from '@/store/atoms';
 import { del } from '@api/api_methods';
 import { Checkbox, Modal, RedButton, Tooltip } from '@components/common';
-import { PurchaseItem, PurchaseReport, PurchaseReportView } from '@type/common';
+import { PurchaseItem, PurchaseReport, PurchaseReportView, Expense } from '@type/common';
 
 interface ModalProps {
   isOpen: boolean;
@@ -14,6 +14,7 @@ interface ModalProps {
   children?: React.ReactNode;
   id: number | string;
   purchaseReportViewItem: PurchaseReportView;
+  expenses: Expense[];
   isDelete: boolean;
 }
 
@@ -24,6 +25,13 @@ const DetailModal: FC<ModalProps> = (props) => {
     props.setIsOpen(false);
   };
 
+  const expenseName = useMemo(() => {
+    const expense = props.expenses.find(
+      (expense) => expense.id === props.purchaseReportViewItem.purchaseOrder.expenseID,
+    );
+    return expense ? expense.name : '';
+  }, [props.expenses, props.purchaseReportViewItem]);
+
   const router = useRouter();
 
   const formatDate = (date: string) => {
@@ -49,7 +57,7 @@ const DetailModal: FC<ModalProps> = (props) => {
   };
 
   return (
-    <Modal>
+    <Modal className='w-1/2'>
       <div className='ml-auto w-fit'>
         <RiCloseCircleLine size={'23px'} color={'gray'} onClick={onClose} />
       </div>
@@ -69,27 +77,8 @@ const DetailModal: FC<ModalProps> = (props) => {
               props.purchaseReportViewItem.purchaseItems,
             )}
         </div>
-        <p className='text-black-600'>報告した局</p>
-        <div className='w-full border-b border-b-primary-1 text-right'>
-          {props.purchaseReportViewItem &&
-            props.purchaseReportViewItem.reportUser.bureauID === 1 &&
-            '総務局'}
-          {props.purchaseReportViewItem &&
-            props.purchaseReportViewItem.reportUser.bureauID === 2 &&
-            '渉外局'}
-          {props.purchaseReportViewItem &&
-            props.purchaseReportViewItem.reportUser.bureauID === 3 &&
-            '財務局'}
-          {props.purchaseReportViewItem &&
-            props.purchaseReportViewItem.reportUser.bureauID === 4 &&
-            '企画局'}
-          {props.purchaseReportViewItem &&
-            props.purchaseReportViewItem.reportUser.bureauID === 5 &&
-            '政策局'}
-          {props.purchaseReportViewItem &&
-            props.purchaseReportViewItem.reportUser.bureauID === 6 &&
-            '情報局'}
-        </div>
+        <p className='text-black-600'>購入した局</p>
+        <div className='w-full border-b border-b-primary-1 text-right'>{expenseName}</div>
         <p className='text-black-600'>報告日</p>
         <div className='w-full border-b border-b-primary-1 text-right'>
           {props.purchaseReportViewItem &&
@@ -143,11 +132,9 @@ const DetailModal: FC<ModalProps> = (props) => {
                 <th className='w-2/12 border-b-primary-1 pb-2'>
                   <div className='text-center text-sm text-black-600'>URL</div>
                 </th>
-                {user.roleID === 3 ? (
-                  <th className='w-2/12 border-b-primary-1 pb-2'>
-                    <div className='text-center text-sm text-black-600'>局長確認</div>
-                  </th>
-                ) : null}
+                <th className='w-2/12 border-b-primary-1 pb-2'>
+                  <div className='text-center text-sm text-black-600'>購入有無</div>
+                </th>
               </tr>
             </thead>
             <tbody className='w-full border border-x-white-0 border-b-primary-1 border-t-white-0'>
@@ -191,13 +178,11 @@ const DetailModal: FC<ModalProps> = (props) => {
                       </div>
                     </div>
                   </td>
-                  {user.roleID === 3 ? (
-                    <td className='border-b py-3'>
-                      <div className='text-center text-sm text-black-300'>
-                        <Checkbox checked={purchaseItem.financeCheck} disabled={true} />
-                      </div>
-                    </td>
-                  ) : null}
+                  <td className='border-b py-3'>
+                    <div className='text-center text-sm text-black-300'>
+                      <Checkbox checked={purchaseItem.financeCheck} disabled={true} />
+                    </div>
+                  </td>
                 </tr>
               ))}
             </tbody>
diff --git a/view/next-project/src/components/purchasereports/EditModal.tsx b/view/next-project/src/components/purchasereports/EditModal.tsx
index fd9554223..da73ec333 100644
--- a/view/next-project/src/components/purchasereports/EditModal.tsx
+++ b/view/next-project/src/components/purchasereports/EditModal.tsx
@@ -309,9 +309,7 @@ export default function EditModal(props: ModalProps) {
                             }}
                           >
                             <div className='flex'>
-                              {activeStep === formDataList.length
-                                ? '登録して編集を完了'
-                                : '登録して次へ'}
+                              {activeStep === formDataList.length ? '詳細の編集へ' : '登録して次へ'}
                               <RiArrowDropRightLine size={23} />
                             </div>
                           </PrimaryButton>
diff --git a/view/next-project/src/components/purchasereports/PurchaseOrderListModal.tsx b/view/next-project/src/components/purchasereports/PurchaseOrderListModal.tsx
index 8b70fea54..eff1769f0 100644
--- a/view/next-project/src/components/purchasereports/PurchaseOrderListModal.tsx
+++ b/view/next-project/src/components/purchasereports/PurchaseOrderListModal.tsx
@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react';
 import { get } from '@api/api_methods';
 import { CloseButton, Modal, OutlinePrimaryButton, PrimaryButton, Radio } from '@components/common';
 import { useUI } from '@components/ui/context';
-import { PurchaseOrder, User, PurchaseItem } from 'src/type/common';
+import { PurchaseOrder, User, PurchaseItem, Expense } from '@type/common';
 
 import PurchaseReportAddModal from './PurchaseReportAddModal';
 
@@ -25,6 +25,7 @@ export default function PurchaseItemNumModal() {
   };
 
   const [purchaseOrderView, setPurchaseOrderView] = useState<PurchaseOrderView[]>([]);
+  const [expenses, setExpenses] = useState<Expense[]>([]);
 
   const [purchaseOrderId, setPurchaseOrderId] = useState<number>(1);
   const [purchaseItemNum, setPurchaseItemNum] = useState<number>(0);
@@ -32,12 +33,18 @@ export default function PurchaseItemNumModal() {
   useEffect(() => {
     if (router.isReady) {
       const getPurchaseOrderViewUrl = process.env.CSR_API_URI + '/purchaseorders/details';
+      const getExpensesUrl = process.env.CSR_API_URI + '/expenses';
 
       const getPurchaseOrderView = async (url: string) => {
         const purchaseOrderViewRes: PurchaseOrderView[] = await get(url);
         setPurchaseOrderView(purchaseOrderViewRes);
       };
+      const getExpenses = async (url: string) => {
+        const expensesRes: Expense[] = await get(url);
+        setExpenses(expensesRes);
+      };
       getPurchaseOrderView(getPurchaseOrderViewUrl);
+      getExpenses(getExpensesUrl);
     }
   }, [router]);
 
@@ -140,12 +147,11 @@ export default function PurchaseItemNumModal() {
                       )}
                     >
                       <div className={clsx('text-center text-sm text-black-600')}>
-                        {purchaseOrderItem.user.bureauID === 1 && '総務局'}
-                        {purchaseOrderItem.user.bureauID === 2 && '渉外局'}
-                        {purchaseOrderItem.user.bureauID === 3 && '財務局'}
-                        {purchaseOrderItem.user.bureauID === 4 && '企画局'}
-                        {purchaseOrderItem.user.bureauID === 5 && '政策局'}
-                        {purchaseOrderItem.user.bureauID === 6 && '情報局'}
+                        {
+                          expenses.find(
+                            (expense) => expense.id === purchaseOrderItem.purchaseOrder.expenseID,
+                          )?.name
+                        }
                       </div>
                     </td>
                     <td
@@ -168,18 +174,13 @@ export default function PurchaseItemNumModal() {
                       )}
                     >
                       <div className={clsx('text-center text-sm text-black-600')}>
-                        {purchaseOrderItem.purchaseItem?.length === 1 ? (
-                          <>
-                            {purchaseOrderItem.purchaseItem &&
-                              purchaseOrderItem.purchaseItem[0].item}
-                          </>
-                        ) : (
-                          <>
-                            {purchaseOrderItem.purchaseItem &&
-                              purchaseOrderItem.purchaseItem[0].item}
-                            , ...
-                          </>
-                        )}
+                        {purchaseOrderItem.purchaseItem &&
+                          purchaseOrderItem.purchaseItem.map((purchaseItem) => (
+                            <div key={purchaseItem.id}>
+                              {purchaseItem.item}
+                              <br />
+                            </div>
+                          ))}
                       </div>
                     </td>
                     <td
diff --git a/view/next-project/src/components/purchasereports/PurchaseReportAddModal.tsx b/view/next-project/src/components/purchasereports/PurchaseReportAddModal.tsx
index 6c3c9afda..67a9d5cab 100644
--- a/view/next-project/src/components/purchasereports/PurchaseReportAddModal.tsx
+++ b/view/next-project/src/components/purchasereports/PurchaseReportAddModal.tsx
@@ -4,7 +4,7 @@ import { RiArrowDropRightLine } from 'react-icons/ri';
 import { useRecoilState } from 'recoil';
 
 import { userAtom } from '@/store/atoms';
-import { get } from '@api/api_methods';
+import { get, del } from '@api/api_methods';
 import { put } from '@api/purchaseItem';
 import { post } from '@api/purchaseReport';
 import {
@@ -180,6 +180,12 @@ export default function PurchaseReportAddModal(props: ModalProps) {
     });
   };
 
+  const deletePurchaseOrder = async () => {
+    const deletePurchaseOrderUrl =
+      process.env.CSR_API_URI + '/purchaseorders/' + props.purchaseOrderId;
+    await del(deletePurchaseOrderUrl);
+  };
+
   // 購入物品の情報
   const content = (data: PurchaseItem) => (
     <>
@@ -196,6 +202,7 @@ export default function PurchaseReportAddModal(props: ModalProps) {
         <p className='text-black-600'>単価</p>
         <div className='col-span-4 w-full'>
           <Input
+            type='number'
             className='w-full'
             id={String(data.id)}
             value={data.price}
@@ -205,6 +212,7 @@ export default function PurchaseReportAddModal(props: ModalProps) {
         <p className='text-black-600'>個数</p>
         <div className='col-span-4 w-full'>
           <Input
+            type='number'
             className='w-full'
             id={String(data.id)}
             value={data.quantity}
@@ -240,6 +248,7 @@ export default function PurchaseReportAddModal(props: ModalProps) {
           <div className='ml-auto w-fit'>
             <CloseButton
               onClick={() => {
+                if (props.isOnlyReported) deletePurchaseOrder();
                 props.setIsOpen(false);
               }}
             />
@@ -314,7 +323,9 @@ export default function PurchaseReportAddModal(props: ModalProps) {
                     }}
                   >
                     <div className='flex'>
-                      {activeStep === steps.length ? '登録して確認' : '登録して次へ'}
+                      {activeStep === steps.length
+                        ? '購入物品として登録して確認へ'
+                        : '購入物品として登録して次へ'}
                       <RiArrowDropRightLine size={23} />
                     </div>
                   </PrimaryButton>
@@ -330,7 +341,9 @@ export default function PurchaseReportAddModal(props: ModalProps) {
                         isFinanceCheckHandler(formDataList[activeStep - 1].id, false);
                       }}
                     >
-                      {activeStep === steps.length ? '登録せずに確認' : '登録せずに次へ'}
+                      {activeStep === steps.length
+                        ? '購入しなかった物品として登録して確認へ'
+                        : '購入しなかった物品として登録して次へ'}
                       <RiArrowDropRightLine size={23} />
                     </UnderlinePrimaryButton>
                   </div>
diff --git a/view/next-project/src/components/purchasereports/PurchaseReportItemNumModal.tsx b/view/next-project/src/components/purchasereports/PurchaseReportItemNumModal.tsx
index 74575b266..cf443ebf8 100644
--- a/view/next-project/src/components/purchasereports/PurchaseReportItemNumModal.tsx
+++ b/view/next-project/src/components/purchasereports/PurchaseReportItemNumModal.tsx
@@ -1,5 +1,4 @@
-import clsx from 'clsx';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useRecoilState } from 'recoil';
 
 import { userAtom } from '@/store/atoms';
@@ -11,13 +10,26 @@ import {
   OutlinePrimaryButton,
   PrimaryButton,
   PullDown,
+  Select,
 } from '@components/common';
 import PurchaseReportAddModal from '@components/purchasereports/PurchaseReportAddModal';
 import { useUI } from '@components/ui/context';
-import { PurchaseItem, PurchaseOrder } from '@type/common';
+import { PurchaseItem, PurchaseOrder, Expense } from '@type/common';
+import { get } from '@utils/api/api_methods';
 
 export default function PurchaseReportItemNumModal() {
   const [user] = useRecoilState(userAtom);
+  const [expenses, setExpenses] = useState<Expense[]>([]);
+  const [expenseID, setExpenseID] = useState(1);
+
+  useEffect(() => {
+    const getExpensesUrl = process.env.CSR_API_URI + '/expenses';
+    const getExpenses = async () => {
+      const res = await get(getExpensesUrl);
+      setExpenses(res);
+    };
+    getExpenses();
+  }, []);
 
   const { setModalView, openModal, closeModal } = useUI();
 
@@ -63,9 +75,10 @@ export default function PurchaseReportItemNumModal() {
     }
 
     const data: PurchaseOrder = {
-      deadline: String(year) + monthStr + dayStr,
+      deadline: String(year) + '-' + monthStr + '-' + dayStr,
       userID: user.id,
       financeCheck: false,
+      expenseID: expenseID,
     };
     const addPurchaseOrderUrl = process.env.CSR_API_URI + '/purchaseorders';
     const postRes = await post(addPurchaseOrderUrl, data);
@@ -104,33 +117,17 @@ export default function PurchaseReportItemNumModal() {
   };
 
   return (
-    <Modal>
-      <div className={clsx('w-full')}>
-        <div className={clsx('mr-5 grid w-full justify-items-end')}>
+    <>
+      <Modal className='w-1/2'>
+        <div className='ml-auto w-fit'>
           <CloseButton onClick={closeModal} />
         </div>
-      </div>
-      <div className={clsx('mb-10 grid w-full justify-items-center text-xl text-black-600')}>
-        購入報告単体で登録
-      </div>
-      <div className={clsx('mb-5 grid grid-cols-12 gap-4')}>
-        <div className={clsx('col-span-1 grid')} />
-        <div className={clsx('col-span-10 grid')}>
-          <div className={clsx('mb-5 grid w-full grid-cols-12')}>
-            <div className={clsx('col-span-1 grid')} />
-            <div className={clsx('col-span-10 mr-2 grid justify-items-center')}>
-              <div className={clsx('text-md flex items-center text-black-600')}>
-                報告する物品の個数を入力してください
-              </div>
-            </div>
-          </div>
-          <div className={clsx('col-span-1 grid')} />
-          <div className={clsx('grid w-full grid-cols-12')}>
-            <div className={clsx('col-span-3 grid')} />
-            <div className={clsx('h-100 col-span-3 mr-2 grid justify-items-center')}>
-              <div className={clsx('text-md flex items-center text-black-600')}>購入物品数</div>
-            </div>
-            <div className={clsx('col-span-2 ml-2 grid w-full')}>
+        <p className='mx-auto mb-10 w-fit text-xl text-black-600'>購入報告単体で登録</p>
+        <p className='mx-auto w-fit text-black-600'>報告する物品の個数を入力してください</p>
+        <div>
+          <div className='my-10 flex justify-center gap-5'>
+            <p className='text-black-600'>購入物品数</p>
+            <div className='w-1/3'>
               <PullDown value={purchaseItemNum.value} onChange={purchaseItemNumHandler('value')}>
                 {purchaseItemNumArray.map((data) => (
                   <option key={data} value={data}>
@@ -139,43 +136,52 @@ export default function PurchaseReportItemNumModal() {
                 ))}
               </PullDown>
             </div>
-            <div className={clsx('col-span-4 grid')} />
           </div>
-        </div>
-        <div className={clsx('col-span-1 grid ')} />
-      </div>
-      <div className={clsx('mb-3 grid justify-items-center py-3')}>
-        <div className={clsx('flex')}>
-          <div className={clsx('mx-2')}>
-            <OutlinePrimaryButton
-              onClick={() => {
-                setModalView('PURCHASE_REPORT_ADD_MODAL');
-                openModal();
-              }}
-            >
-              戻る
-            </OutlinePrimaryButton>
-          </div>
-          <div className={clsx('mx-2')}>
-            <PrimaryButton
-              onClick={() => {
-                addPurchaseOrder();
-              }}
-            >
-              報告へ進む
-            </PrimaryButton>
-            {isOpen && (
-              <PurchaseReportAddModal
-                purchaseOrderId={purchaseOrderId}
-                purchaseItemNum={purchaseItemNum.value}
-                isOpen={isOpen}
-                setIsOpen={setIsOpen}
-                isOnlyReported={true}
-              />
-            )}
+          <div className='my-10 flex items-center justify-center gap-5'>
+            <p>購入した局・団体</p>
+            <div className='w-1/3'>
+              <Select
+                value={expenseID}
+                onChange={(e) => {
+                  setExpenseID(Number(e.target.value));
+                }}
+              >
+                {expenses.map((data) => (
+                  <option key={data.id} value={data.id}>
+                    {data.name}
+                  </option>
+                ))}
+              </Select>
+            </div>
           </div>
         </div>
-      </div>
-    </Modal>
+        <div className='flex justify-center gap-5'>
+          <OutlinePrimaryButton
+            onClick={() => {
+              setModalView('PURCHASE_REPORT_ADD_MODAL');
+              openModal();
+            }}
+          >
+            戻る
+          </OutlinePrimaryButton>
+          <PrimaryButton
+            onClick={() => {
+              addPurchaseOrder();
+            }}
+          >
+            報告へ進む
+          </PrimaryButton>
+        </div>
+      </Modal>
+      {isOpen && (
+        <PurchaseReportAddModal
+          purchaseOrderId={purchaseOrderId}
+          purchaseItemNum={purchaseItemNum.value}
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+          isOnlyReported={true}
+        />
+      )}
+    </>
   );
 }
diff --git a/view/next-project/src/components/sponsors/SponsorAddModal.tsx b/view/next-project/src/components/sponsors/SponsorAddModal.tsx
index 3b2d16888..6877bfe2b 100644
--- a/view/next-project/src/components/sponsors/SponsorAddModal.tsx
+++ b/view/next-project/src/components/sponsors/SponsorAddModal.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import { useRouter } from 'next/router';
 import React, { useState } from 'react';
 
diff --git a/view/next-project/src/components/sponsors/SponsorEditModal.tsx b/view/next-project/src/components/sponsors/SponsorEditModal.tsx
index 99564af33..cde019b3e 100644
--- a/view/next-project/src/components/sponsors/SponsorEditModal.tsx
+++ b/view/next-project/src/components/sponsors/SponsorEditModal.tsx
@@ -4,7 +4,6 @@ import React, { useState } from 'react';
 
 import { put } from '@api/sponsor';
 import { PrimaryButton, CloseButton, Input, Modal } from '@components/common';
-import { useUI } from '@components/ui/context';
 import { Sponsor } from '@type/common';
 
 interface Props {
@@ -14,7 +13,6 @@ interface Props {
 
 export default function SponsorEditModal(props: Props) {
   const router = useRouter();
-  const { closeModal } = useUI();
 
   const [formData, setFormData] = useState<Sponsor>(props.sponsor);
 
@@ -31,7 +29,7 @@ export default function SponsorEditModal(props: Props) {
 
   const submit = async (formData: Sponsor) => {
     editSponsor(formData);
-    closeModal();
+    props.setIsOpen(false);
     router.reload();
   };
 
@@ -39,7 +37,7 @@ export default function SponsorEditModal(props: Props) {
     <Modal className='w-1/2'>
       <div className='w-full'>
         <div className='mr-5 ml-auto w-fit'>
-          <CloseButton onClick={closeModal} />
+          <CloseButton onClick={() => props.setIsOpen(false)} />
         </div>
       </div>
       <h1 className='mx-auto mb-10 w-fit text-xl text-black-600'>企業登録</h1>
diff --git a/view/next-project/src/components/sponsorstyles/OpenAddModalButton.tsx b/view/next-project/src/components/sponsorstyles/OpenAddModalButton.tsx
index f3289602d..b485ad999 100644
--- a/view/next-project/src/components/sponsorstyles/OpenAddModalButton.tsx
+++ b/view/next-project/src/components/sponsorstyles/OpenAddModalButton.tsx
@@ -1,24 +1,27 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { AddButton } from '@components/common';
-import { useUI } from '@components/ui/context';
+
+import SponsorStyleAddModal from './SponsorStyleAddModal';
 
 interface Props {
   children?: React.ReactNode;
 }
 
 export const OpenAddModalButton = (props: Props) => {
-  const { setModalView, openModal } = useUI();
+  const [isOpen, setIsOpen] = useState<boolean>(false);
 
   return (
-    <AddButton
-      onClick={() => {
-        setModalView('SPONSOR_STYLE_NUM_MODAL');
-        openModal();
-      }}
-    >
-      {props.children}
-    </AddButton>
+    <>
+      <AddButton
+        onClick={() => {
+          setIsOpen(true);
+        }}
+      >
+        {props.children}
+      </AddButton>
+      {isOpen && <SponsorStyleAddModal setIsOpen={setIsOpen} />}
+    </>
   );
 };
 
diff --git a/view/next-project/src/components/sponsorstyles/SponsorStyleAddModal.tsx b/view/next-project/src/components/sponsorstyles/SponsorStyleAddModal.tsx
index 879d707cf..bcfbb81c0 100644
--- a/view/next-project/src/components/sponsorstyles/SponsorStyleAddModal.tsx
+++ b/view/next-project/src/components/sponsorstyles/SponsorStyleAddModal.tsx
@@ -1,261 +1,96 @@
-import clsx from 'clsx';
 import { useRouter } from 'next/router';
 import React, { useState } from 'react';
-import { RiArrowDropRightLine } from 'react-icons/ri';
 
 import { post } from '@api/sponsorStyle';
-import {
-  CloseButton,
-  Input,
-  Modal,
-  OutlinePrimaryButton,
-  PrimaryButton,
-  Stepper,
-  Select,
-} from '@components/common';
+import { CloseButton, Input, Modal, PrimaryButton, Select } from '@components/common';
 import { SCALE } from '@constants/scale';
 import { SponsorStyle } from '@type/common';
 
-import { useUI } from '../ui/context';
-
 interface ModalProps {
-  purchaseItemNum: number;
   setIsOpen: (isOpen: boolean) => void;
 }
 
-const TABLE_COLUMNS = ['広告サイズ', 'カラーorモノクロ', '金額'];
-
-export default function SponsorStyleAddModal(props: ModalProps) {
-  const [activeStep, setActiveStep] = useState<number>(1);
+export default function SponsorAddModal(props: ModalProps) {
   const router = useRouter();
-  const { closeModal } = useUI();
-  const nextStep = () => {
-    setActiveStep(activeStep + 1);
-  };
-  const prevStep = () => {
-    setActiveStep(activeStep - 1);
-  };
-  const reset = () => {
-    setActiveStep(1);
-    setIsDone(false);
-  };
-
-  // 協賛スタイルを登録するかどうかのフラグ
-  const [isDone, setIsDone] = useState<boolean>(false);
 
-  // 協賛スタイル数だけステップを用意
-  const steps = [];
-  for (let i = 0; i < props.purchaseItemNum; i++) {
-    steps.push({ label: '' });
-  }
-
-  // 協賛スタイル
   const [formData, setFormData] = useState<SponsorStyle>({
-    id: 0,
     scale: SCALE[0],
     isColor: false,
     price: 0,
   });
 
-  // 協賛スタイルのリスト
-  const [formDataList, setFormDataList] = useState<SponsorStyle[]>(() => {
-    const initFormDataList = [];
-    for (let i = 0; i < props.purchaseItemNum; i++) {
-      const initFormData: SponsorStyle = {
-        id: i + 1,
-        scale: SCALE[0],
-        isColor: false,
-        price: 0,
-      };
-      initFormDataList.push(initFormData);
-    }
-    return initFormDataList;
-  });
-
-  const formDataListHandler =
+  const handler =
     (input: string) =>
     (e: React.ChangeEvent<HTMLSelectElement> | React.ChangeEvent<HTMLInputElement>) => {
-      setFormDataList(
-        formDataList.map((formData: SponsorStyle) =>
-          formData.id === Number(e.target.id) ? { ...formData, [input]: e.target.value } : formData,
-        ),
-      );
+      setFormData({ ...formData, [input]: e.target.value });
     };
 
-  // 協賛スタイルの登録と購入物品の更新を行い、ページをリロード
-  const submit = (data: SponsorStyle[]) => {
-    addSponsorStyles(data);
-    props.setIsOpen(false);
-    closeModal();
-    router.reload();
+  const addSponsorStyle = async (data: SponsorStyle) => {
+    const addSponsorUrl = process.env.CSR_API_URI + '/sponsorstyles';
+    await post(addSponsorUrl, data);
   };
 
-  // 協賛スタイルの追加
-  const addSponsorStyles = async (data: SponsorStyle[]) => {
-    data.map(async (data: SponsorStyle) => {
-      const purchaseReportUrl = process.env.CSR_API_URI + '/sponsorstyles';
-      await post(purchaseReportUrl, data);
-    });
+  const submit = async (formData: SponsorStyle) => {
+    addSponsorStyle(formData);
+    props.setIsOpen(false);
+    router.reload();
   };
 
-  // 購入物品の情報
-  const content = (data: SponsorStyle) => (
-    <>
-      <div className='mx-auto grid grid-cols-5 items-center justify-items-center gap-5'>
+  return (
+    <Modal className='w-1/2'>
+      <div className='w-full'>
+        <div className='mr-5 ml-auto w-fit'>
+          <CloseButton onClick={() => props.setIsOpen(false)} />
+        </div>
+      </div>
+      <h1 className='mx-auto mb-10 w-fit text-xl text-black-600'>協賛スタイルの登録</h1>
+      <div className='my-6 grid grid-cols-5 items-center justify-items-center gap-4'>
         <p className='text-black-600'>広告サイズ</p>
         <div className='col-span-4 w-full'>
-          <Select
-            value={data.isColor ? 'カラー' : 'モノクロ'}
-            onChange={(e) => {
-              setFormData({ ...formData, ['isColor']: e.target.value === 'カラー' ? true : false });
-            }}
-          >
-            {SCALE.map((scale: string, index: number) => (
-              <option value={scale} key={index}>
+          <Select className='w-full' value={formData.scale} onChange={handler('scale')}>
+            {SCALE.map((scale) => (
+              <option key={scale} value={scale}>
                 {scale}
               </option>
             ))}
           </Select>
         </div>
-        <div className='flex flex-col items-center'>
-          <p className='text-black-600'>カラー</p>
-          <p className='text-black-600'>モノクロ</p>
+        <div>
+          <div className='text-black-600'>カラー</div>
+          <div className='text-black-600'>モノクロ</div>
         </div>
-        <div className='col-span-4 w-full'>
+        <div className='col-span-4 grid w-full'>
           <Select
-            value={data.isColor ? 'カラー' : 'モノクロ'}
+            className='w-full'
+            value={formData.isColor ? 'カラー' : 'モノクロ'}
             onChange={(e) => {
-              setFormData({ ...formData, ['isColor']: e.target.value === 'カラー' ? true : false });
+              setFormData({ ...formData, isColor: e.target.value === 'カラー' ? true : false });
             }}
           >
-            <option value='カラー'>カラー</option>
-            <option value='モノクロ'>モノクロ</option>
+            <option value={'カラー'}>カラー</option>
+            <option value={'モノクロ'}>モノクロ</option>
           </Select>
         </div>
-        <p className='text-black-600'>金額</p>
-        <Input
-          className='col-span-4 w-full'
-          id={String(data.id)}
-          value={data.price}
-          onChange={formDataListHandler('price')}
-        />
-      </div>
-    </>
-  );
-
-  const SponsorStyleTable = (sponsorStyles: SponsorStyle[]) => {
-    return (
-      <table className='mb-10 w-full table-fixed border-collapse'>
-        <thead>
-          <tr className='border border-x-white-0 border-b-primary-1 border-t-white-0 py-3'>
-            {TABLE_COLUMNS.map((tableColumn: string) => (
-              <th key={tableColumn} className='border-b-primary-1 px-6 pb-2'>
-                <div className='text-center text-sm text-black-600'>{tableColumn}</div>
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody className='border border-x-white-0 border-b-primary-1 border-t-white-0'>
-          {sponsorStyles.map((sponsorStyle, index) => (
-            <tr key={sponsorStyle.id}>
-              <td
-                className={clsx(
-                  'px-4',
-                  index === 0 ? 'pt-4 pb-3' : 'py-3',
-                  index === sponsorStyles.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
-                )}
-              >
-                <div className='text-center text-sm text-black-300'>{sponsorStyle.scale}</div>
-              </td>
-              <td
-                className={clsx(
-                  'px-4',
-                  index === 0 ? 'pt-4 pb-3' : 'py-3',
-                  index === sponsorStyles.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
-                )}
-              >
-                <div className='text-center text-sm text-black-300'>
-                  {sponsorStyle.isColor ? 'カラー' : 'モノクロ'}
-                </div>
-              </td>
-              <td
-                className={clsx(
-                  'px-4',
-                  index === 0 ? 'pt-4 pb-3' : 'py-3',
-                  index === sponsorStyles.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
-                )}
-              >
-                <div className='text-center text-sm text-black-300'>{sponsorStyle.price}</div>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    );
-  };
-
-  return (
-    <>
-      <Modal className='w-1/2'>
-        <div className='w-full'>
-          <div className='ml-auto w-fit'>
-            <CloseButton
-              onClick={() => {
-                props.setIsOpen(false);
-              }}
-            />
-          </div>
-        </div>
-        <div className='mx-auto mb-5 w-fit text-xl text-black-600'>協賛スタイルの登録</div>
-        <div className='flex flex-col gap-5'>
-          <Stepper stepNum={props.purchaseItemNum} activeStep={activeStep} isDone={isDone}>
-            {!isDone && <>{content(formDataList[activeStep - 1])}</>}
-          </Stepper>
-          {isDone ? (
-            <>
-              <div className='mx-auto w-fit'>{SponsorStyleTable(formDataList)}</div>
-              <div className='flex flex-row justify-center gap-5'>
-                <OutlinePrimaryButton onClick={reset}>戻る</OutlinePrimaryButton>
-                <PrimaryButton
-                  onClick={() => {
-                    submit(formDataList);
-                  }}
-                >
-                  登録を確定する
-                </PrimaryButton>
-              </div>
-            </>
-          ) : (
-            <>
-              <div className='mx-auto flex w-fit flex-row gap-5'>
-                {/* stepが1より大きい時のみ戻るボタンを表示 */}
-                {activeStep > 1 && (
-                  <OutlinePrimaryButton onClick={prevStep}>戻る</OutlinePrimaryButton>
-                )}
-                {activeStep === 1 && (
-                  <OutlinePrimaryButton
-                    onClick={() => {
-                      props.setIsOpen(false);
-                    }}
-                  >
-                    戻る
-                  </OutlinePrimaryButton>
-                )}
-                <PrimaryButton
-                  onClick={() => {
-                    {
-                      activeStep === steps.length ? setIsDone(true) : nextStep();
-                    }
-                  }}
-                >
-                  {activeStep === steps.length ? '確認へ' : '登録して次へ'}
-                  <RiArrowDropRightLine size={23} />
-                </PrimaryButton>
-              </div>
-            </>
-          )}
+        <div className='text-black-600'>金額</div>
+        <div className='col-span-4 w-full'>
+          <Input
+            className='w-full'
+            id={String(formData.id)}
+            value={formData.price}
+            onChange={handler('price')}
+          />
         </div>
-      </Modal>
-    </>
+      </div>
+      <div className='mx-auto mb-5 w-fit'>
+        <PrimaryButton
+          className={'mx-2'}
+          onClick={() => {
+            submit(formData);
+          }}
+        >
+          登録する
+        </PrimaryButton>
+      </div>
+    </Modal>
   );
 }
diff --git a/view/next-project/src/components/sponsorstyles/SponsorStyleNumModal.tsx b/view/next-project/src/components/sponsorstyles/SponsorStyleNumModal.tsx
deleted file mode 100644
index 57acbfeee..000000000
--- a/view/next-project/src/components/sponsorstyles/SponsorStyleNumModal.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, { useState } from 'react';
-
-import {
-  CloseButton,
-  Modal,
-  OutlinePrimaryButton,
-  PrimaryButton,
-  PullDown,
-} from '@components/common';
-import { useUI } from '@components/ui/context';
-
-import SponsorStyleAddModal from './SponsorStyleAddModal';
-
-export default function SponsorStyleNumModal() {
-  const { closeModal } = useUI();
-
-  // 協賛スタイル数用の配列
-  const sponsorStyleNumArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-
-  // 協賛スタイルの追加モーダル開閉用変数
-  const [isOpen, setIsOpen] = useState(false);
-
-  // 購入物品数
-  const [purchaseItemNum, setPurchaseItemNum] = useState<number>(1);
-
-  return (
-    <Modal>
-      <div className='w-full'>
-        <div className='ml-auto w-fit'>
-          <CloseButton onClick={closeModal} />
-        </div>
-      </div>
-      <div className='mx-auto mt-3 mb-8 w-fit'>
-        <p className='text-xl text-black-600'> 協賛スタイルの登録</p>
-      </div>
-      <div className='flex flex-col items-center gap-8'>
-        <div className='flex flex-col items-center gap-2'>
-          <p className='text-md flex items-center text-black-600'>複数同時に登録できます</p>
-          <p className='text-md flex items-center text-black-600'>いくつ登録しますか？</p>
-        </div>
-        <div className='flex w-3/4 flex-row items-center gap-3'>
-          <p className='text-md w-1/2 text-black-600'>登録数</p>
-          <PullDown
-            value={purchaseItemNum}
-            onChange={(e) => setPurchaseItemNum(Number(e.target.value))}
-          >
-            {sponsorStyleNumArray.map((data) => (
-              <option key={data} value={data}>
-                {data}
-              </option>
-            ))}
-          </PullDown>
-        </div>
-        <div className='flex'>
-          <div className='mx-2'>
-            <OutlinePrimaryButton onClick={closeModal}>戻る</OutlinePrimaryButton>
-          </div>
-          <div className='mx-2'>
-            <PrimaryButton
-              onClick={() => {
-                setIsOpen(true);
-              }}
-            >
-              報告へ進む
-            </PrimaryButton>
-            {isOpen && (
-              <SponsorStyleAddModal purchaseItemNum={purchaseItemNum} setIsOpen={setIsOpen} />
-            )}
-          </div>
-        </div>
-      </div>
-    </Modal>
-  );
-}
diff --git a/view/next-project/src/pages/fund_informations/index.tsx b/view/next-project/src/pages/fund_informations/index.tsx
index dbd85ea50..0ba263687 100644
--- a/view/next-project/src/pages/fund_informations/index.tsx
+++ b/view/next-project/src/pages/fund_informations/index.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { userAtom } from '@/store/atoms';
@@ -27,8 +27,7 @@ interface Props {
   departments: Department[];
   fundInformation: FundInformation[];
   fundInformationView: FundInformationView[];
-  currentUser: User;
-  totalFee: number;
+  users: User[];
 }
 
 export const getServerSideProps = async () => {
@@ -36,18 +35,12 @@ export const getServerSideProps = async () => {
   const getDepartmentURL = process.env.SSR_API_URI + '/departments';
   const getFundInformationURL = process.env.SSR_API_URI + '/fund_informations';
   const getFundInformationViewURL = process.env.SSR_API_URI + '/fund_informations/details';
+  const getUserURL = process.env.SSR_API_URI + '/users';
   const teachersInformationRes = await get(getTeachersInformationURL);
   const fundInformationRes = await get(getFundInformationURL);
   const departmentRes = await get(getDepartmentURL);
   const fundInformationViewRes = await get(getFundInformationViewURL);
-
-  // 合計金額の計算
-  let totalFee = 0;
-  fundInformationRes.map((fundItemRes: FundInformation) => {
-    if (fundItemRes.isLastCheck) {
-      totalFee += fundItemRes.price;
-    }
-  });
+  const userRes = await get(getUserURL);
 
   return {
     props: {
@@ -55,7 +48,7 @@ export const getServerSideProps = async () => {
       departments: departmentRes,
       fundInformation: fundInformationRes,
       fundInformationView: fundInformationViewRes,
-      totalFee: totalFee,
+      users: userRes,
     },
   };
 };
@@ -63,6 +56,7 @@ export const getServerSideProps = async () => {
 export default function FundInformations(props: Props) {
   // 教員一覧
   const teachers: Teacher[] = props.teachers;
+  const users: User[] = props.users;
   const departments: Department[] = [
     {
       id: 1,
@@ -180,19 +174,16 @@ export default function FundInformations(props: Props) {
     }
   }, [router]);
 
-  // Modal用にuserIDを設定
-  const userID = currentUser.id;
-
   // チェック済みの合計金額用のステート
-  const [totalFee, setTotalFee] = useState(props.totalFee);
-
-  const calcTotalFee = (initFundInformation: FundInformation) => {
-    if (initFundInformation.isLastCheck) {
-      setTotalFee(totalFee + initFundInformation.price);
-    } else {
-      setTotalFee(totalFee - initFundInformation.price);
-    }
-  };
+  const totalFee = useMemo(() => {
+    return fundInformation.reduce((sum, fundInformation) => {
+      if (fundInformation.isLastCheck) {
+        return sum + fundInformation.price;
+      } else {
+        return sum;
+      }
+    }, 0);
+  }, [fundInformation]);
 
   // チェックの切り替え
   const switchCheck = async (
@@ -213,7 +204,6 @@ export default function FundInformations(props: Props) {
         createdAt: fundItem.createdAt,
         updatedAt: fundItem.updatedAt,
       };
-      calcTotalFee(initFundInformation);
     }
     setFundInformation(
       fundInformation.map((fundItem: FundInformation) =>
@@ -300,12 +290,7 @@ export default function FundInformations(props: Props) {
             </select>
           </div>
           <div className='flex justify-end'>
-            <OpenAddModalButton
-              teachersInformation={teachers}
-              departments={departments}
-              currentUser={currentUser}
-              userID={userID ? userID : 0}
-            >
+            <OpenAddModalButton teachers={teachers} departments={departments} users={users}>
               学内募金登録
             </OpenAddModalButton>
           </div>
@@ -341,10 +326,7 @@ export default function FundInformations(props: Props) {
             <tbody className='border border-x-white-0 border-b-primary-1 border-t-white-0'>
               {fundInformationView &&
                 fundInformationView.map((fundViewItem: FundInformationView, index) => (
-                  <tr
-                    key={fundViewItem.fundInformation.id}
-                    // onChange={submit(fundViewItem.fundInformation.id, fundInformation[index])}
-                  >
+                  <tr key={fundViewItem.fundInformation.id}>
                     <td
                       className={clsx(
                         'px-1',
@@ -463,7 +445,10 @@ export default function FundInformations(props: Props) {
                         {fundViewItem.fundInformation.remark}
                       </div>
                     </td>
-                    {!isUser || fundViewItem.fundInformation.userID == currentUser.id ? (
+                    {fundViewItem.fundInformation.userID == currentUser.id ||
+                    isDeveloper ||
+                    isFinanceStaff ||
+                    isFinanceDirector ? (
                       <td
                         className={clsx(
                           'px-1',
@@ -475,18 +460,15 @@ export default function FundInformations(props: Props) {
                       >
                         <div className='flex gap-3'>
                           <OpenEditModalButton
-                            id={
-                              fundViewItem.fundInformation.id ? fundViewItem.fundInformation.id : 0
-                            }
+                            fundInformation={fundViewItem.fundInformation}
                             teachers={teachers}
-                            currentUser={currentUser}
+                            users={users}
+                            departments={departments}
                           />
                           <OpenDeleteModalButton
                             id={
                               fundViewItem.fundInformation.id ? fundViewItem.fundInformation.id : 0
                             }
-                            teacherID={fundViewItem.fundInformation.teacherID}
-                            userID={Number(fundViewItem.fundInformation.userID)}
                           />
                         </div>
                       </td>
diff --git a/view/next-project/src/pages/purchaseorders/index.tsx b/view/next-project/src/pages/purchaseorders/index.tsx
index 866404e2e..60d1cc47a 100644
--- a/view/next-project/src/pages/purchaseorders/index.tsx
+++ b/view/next-project/src/pages/purchaseorders/index.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import Head from 'next/head';
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { useRecoilState } from 'recoil';
 
 import { userAtom } from '@/store/atoms';
@@ -11,22 +11,27 @@ import DetailModal from '@components/purchaseorders/DetailModal';
 import OpenAddModalButton from '@components/purchaseorders/OpenAddModalButton';
 import OpenDeleteModalButton from '@components/purchaseorders/OpenDeleteModalButton';
 import OpenEditModalButton from '@components/purchaseorders/OpenEditModalButton';
-import { PurchaseItem, PurchaseOrder, User, PurchaseOrderView } from '@type/common';
+import { PurchaseItem, PurchaseOrder, User, PurchaseOrderView, Expense } from '@type/common';
 
 interface Props {
   user: User;
   purchaseOrder: PurchaseOrder[];
   purchaseOrderView: PurchaseOrderView[];
+  expenses: Expense[];
 }
 export async function getServerSideProps() {
   const getPurchaseOrderUrl = process.env.SSR_API_URI + '/purchaseorders';
   const getPurchaseOrderViewUrl = process.env.SSR_API_URI + '/purchaseorders/details';
+  const getExpenseUrl = process.env.SSR_API_URI + '/expenses';
   const purchaseOrderRes = await get(getPurchaseOrderUrl);
   const purchaseOrderViewRes = await get(getPurchaseOrderViewUrl);
+  const expenseRes = await get(getExpenseUrl);
+
   return {
     props: {
       purchaseOrder: purchaseOrderRes,
       purchaseOrderView: purchaseOrderViewRes,
+      expenses: expenseRes,
     },
   };
 }
@@ -58,6 +63,15 @@ export default function PurchaseOrders(props: Props) {
     return totalFee;
   };
 
+  // 全ての購入申請の合計金額を計算
+  const totalPurchaseOrderFee = useMemo(() => {
+    let totalFee = 0;
+    props.purchaseOrderView?.map((purchaseOrderView: PurchaseOrderView) => {
+      totalFee += TotalFee(purchaseOrderView.purchaseItem);
+    });
+    return totalFee;
+  }, [props.purchaseOrderView]);
+
   // 変更可能なcheckboxの描画
   const changeableCheckboxContent = (isChecked: boolean) => {
     {
@@ -96,7 +110,7 @@ export default function PurchaseOrders(props: Props) {
             </select>
           </div>
           <div className={clsx('flex justify-end')}>
-            <OpenAddModalButton>申請登録</OpenAddModalButton>
+            <OpenAddModalButton expenses={props.expenses}>申請登録</OpenAddModalButton>
           </div>
         </div>
         <div className={clsx('w-100 mb-2 p-5')}>
@@ -109,7 +123,7 @@ export default function PurchaseOrders(props: Props) {
                   <div className={clsx('text-center text-sm text-black-600')}>財務局長チェック</div>
                 </th>
                 <th className={clsx('w-1/12 border-b-primary-1 pb-2')}>
-                  <div className={clsx('text-center text-sm text-black-600')}>申請した局</div>
+                  <div className={clsx('text-center text-sm text-black-600')}>購入したい局</div>
                 </th>
                 <th className={clsx('w-2/12 border-b-primary-1 pb-2')}>
                   <div className={clsx('text-center text-sm text-black-600')}>申請日</div>
@@ -129,13 +143,7 @@ export default function PurchaseOrders(props: Props) {
             <tbody className={clsx('border border-x-white-0 border-b-primary-1 border-t-white-0')}>
               {props.purchaseOrderView.map((purchaseOrderViewItem, index) => (
                 <tr key={purchaseOrderViewItem.purchaseOrder.id}>
-                  <td
-                    className={clsx(
-                      'px-1',
-                      index === 0 ? 'pt-4 pb-3' : 'py-3',
-                      index === props.purchaseOrderView.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
-                    )}
-                  >
+                  <td className={clsx('px-1', index === 0 ? 'pt-4 pb-3' : 'py-3', 'border-b py-3')}>
                     <div className={clsx('text-center text-sm text-black-600')}>
                       {user.roleID === 3
                         ? changeableCheckboxContent(
@@ -147,11 +155,7 @@ export default function PurchaseOrders(props: Props) {
                     </div>
                   </td>
                   <td
-                    className={clsx(
-                      'px-1',
-                      index === 0 ? 'pt-4 pb-3' : 'py-3',
-                      index === props.purchaseOrderView.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
-                    )}
+                    className={clsx('px-1', index === 0 ? 'pt-4 pb-3' : 'py-3', 'border-b py-3')}
                     onClick={() => {
                       onOpen(
                         purchaseOrderViewItem.purchaseOrder.id
@@ -162,15 +166,18 @@ export default function PurchaseOrders(props: Props) {
                     }}
                   >
                     <div className={clsx('flex justify-center')}>
-                      <BureauLabel bureauID={purchaseOrderViewItem.user.bureauID} />
+                      <BureauLabel
+                        bureauName={
+                          props.expenses.find(
+                            (expense) =>
+                              expense.id === purchaseOrderViewItem.purchaseOrder.expenseID,
+                          )?.name || ''
+                        }
+                      />
                     </div>
                   </td>
                   <td
-                    className={clsx(
-                      'px-1',
-                      index === 0 ? 'pt-4 pb-3' : 'py-3',
-                      index === props.purchaseOrderView.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
-                    )}
+                    className={clsx('px-1', index === 0 ? 'pt-4 pb-3' : 'py-3', 'border-b py-3')}
                     onClick={() => {
                       onOpen(
                         purchaseOrderViewItem.purchaseOrder.id
@@ -189,11 +196,7 @@ export default function PurchaseOrders(props: Props) {
                     </div>
                   </td>
                   <td
-                    className={clsx(
-                      'px-1',
-                      index === 0 ? 'pt-4 pb-3' : 'py-3',
-                      index === props.purchaseOrderView.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
-                    )}
+                    className={clsx('px-1', index === 0 ? 'pt-4 pb-3' : 'py-3', 'border-b py-3')}
                     onClick={() => {
                       onOpen(
                         purchaseOrderViewItem.purchaseOrder.id
@@ -208,11 +211,7 @@ export default function PurchaseOrders(props: Props) {
                     </div>
                   </td>
                   <td
-                    className={clsx(
-                      'px-1',
-                      index === 0 ? 'pt-4 pb-3' : 'py-3',
-                      index === props.purchaseOrderView.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
-                    )}
+                    className={clsx('px-1', index === 0 ? 'pt-4 pb-3' : 'py-3', 'border-b py-3')}
                     onClick={() => {
                       onOpen(
                         purchaseOrderViewItem.purchaseOrder.id
@@ -242,11 +241,7 @@ export default function PurchaseOrders(props: Props) {
                     </div>
                   </td>
                   <td
-                    className={clsx(
-                      'px-1',
-                      index === 0 ? 'pt-4 pb-3' : 'py-3',
-                      index === props.purchaseOrderView.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
-                    )}
+                    className={clsx('px-1', index === 0 ? 'pt-4 pb-3' : 'py-3', 'border-b py-3')}
                     onClick={() => {
                       onOpen(
                         purchaseOrderViewItem.purchaseOrder.id
@@ -260,13 +255,7 @@ export default function PurchaseOrders(props: Props) {
                       {TotalFee(purchaseOrderViewItem.purchaseItem)}
                     </div>
                   </td>
-                  <td
-                    className={clsx(
-                      'px-4',
-                      index === 0 ? 'pt-4 pb-3' : 'py-3',
-                      index === props.purchaseOrderView.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
-                    )}
-                  >
+                  <td className={clsx('px-4', index === 0 ? 'pt-4 pb-3' : 'py-3', 'border-b py-3')}>
                     <div className={clsx('grid grid-cols-2 gap-3')}>
                       <div className={clsx('text-center text-sm text-black-600')}>
                         <OpenEditModalButton
@@ -291,7 +280,6 @@ export default function PurchaseOrders(props: Props) {
                               ? purchaseOrderViewItem.purchaseOrder.id
                               : 0
                           }
-                          purchaseOrderViewItem={purchaseOrderViewItem}
                           isDisabled={
                             !purchaseOrderViewItem.purchaseOrder.financeCheck &&
                             (user.roleID === 2 ||
@@ -304,6 +292,18 @@ export default function PurchaseOrders(props: Props) {
                   </td>
                 </tr>
               ))}
+              <tr className={clsx('border-b border-primary-1')}>
+                <td className={clsx('px-1 py-3')} colSpan={5}>
+                  <div className={clsx('flex justify-end')}>
+                    <div className={clsx('text-sm text-black-600')}>合計</div>
+                  </div>
+                </td>
+                <td className={clsx('px-1 py-3')}>
+                  <div className={clsx('text-center text-sm text-black-600')}>
+                    {totalPurchaseOrderFee}
+                  </div>
+                </td>
+              </tr>
             </tbody>
           </table>
         </div>
@@ -314,6 +314,7 @@ export default function PurchaseOrders(props: Props) {
           isOpen={isOpen}
           setIsOpen={setIsOpen}
           purchaseOrderViewItem={purchaseOrderViewItem}
+          expenses={props.expenses}
           isDelete={false}
         />
       )}
diff --git a/view/next-project/src/pages/purchasereports/index.tsx b/view/next-project/src/pages/purchasereports/index.tsx
index d5683893f..4e422d69b 100644
--- a/view/next-project/src/pages/purchasereports/index.tsx
+++ b/view/next-project/src/pages/purchasereports/index.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import Head from 'next/head';
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { useRecoilState } from 'recoil';
 
 import { userAtom } from '@/store/atoms';
@@ -11,7 +11,7 @@ import DetailModal from '@components/purchasereports/DetailModal';
 import OpenAddModalButton from '@components/purchasereports/OpenAddModalButton';
 import OpenDeleteModalButton from '@components/purchasereports/OpenDeleteModalButton';
 import OpenEditModalButton from '@components/purchasereports/OpenEditModalButton';
-import { PurchaseItem, PurchaseOrder, PurchaseReport, User } from '@type/common';
+import { PurchaseItem, PurchaseOrder, PurchaseReport, User, Expense } from '@type/common';
 
 export interface PurchaseReportView {
   purchaseReport: PurchaseReport;
@@ -26,17 +26,21 @@ interface Props {
   purchaseReportView: PurchaseReportView[];
   user: User;
   purchaseOrder: PurchaseOrder[];
+  expenses: Expense[];
 }
 
 export async function getServerSideProps() {
   const getPurchaseReportUrl = process.env.SSR_API_URI + '/purchasereports';
   const getPurchaseReportViewUrl = process.env.SSR_API_URI + '/purchasereports/details';
+  const getExpenseUrl = process.env.SSR_API_URI + '/expenses';
   const purchaseReportRes = await get(getPurchaseReportUrl);
   const purchaseReportViewRes = await get(getPurchaseReportViewUrl);
+  const expenseRes = await get(getExpenseUrl);
   return {
     props: {
       purchaseReport: purchaseReportRes,
       purchaseReportView: purchaseReportViewRes,
+      expenses: expenseRes,
     },
   };
 }
@@ -61,23 +65,6 @@ export default function PurchaseReports(props: Props) {
   }
   const purchaseReports: PurchaseReport[] = initPurchaseReportList;
 
-  // // 購入申請
-  // const [purchaseOrders, setPurchaseOrders] = useState<PurchaseOrder[]>(() => {
-  //   const initPurchaseOederList = [];
-  //   for (let i = 0; i < props.purchaseReportView.length; i++) {
-  //     initPurchaseOederList.push(props.purchaseReportView[i].purchaseOrder);
-  //   }
-  //   return initPurchaseOederList;
-  // });
-  // // 購入申請者
-  // const [orderUsers, setOrderUsers] = useState<User[]>(() => {
-  //   const initOederUserList = [];
-  //   for (let i = 0; i < props.purchaseReportView.length; i++) {
-  //     initOederUserList.push(props.purchaseReportView[i].orderUser);
-  //   }
-  //   return initOederUserList;
-  // });
-
   // 日付のフォーマットを変更
   const formatDate = (date: string) => {
     const datetime = date.replace('T', ' ');
@@ -85,16 +72,26 @@ export default function PurchaseReports(props: Props) {
     return datetime2;
   };
 
-  // 購入報告の合計金額を計算
   const TotalFee = (purchaseReport: PurchaseReport, purchaseItems: PurchaseItem[]) => {
     let totalFee = 0;
     purchaseItems.map((purchaseItem: PurchaseItem) => {
-      totalFee += purchaseItem.price * purchaseItem.quantity;
+      if (purchaseItem.financeCheck) {
+        totalFee += purchaseItem.price * purchaseItem.quantity;
+      }
     });
     totalFee += purchaseReport.addition - purchaseReport.discount;
     return totalFee;
   };
 
+  // すべてのpurchaseReportの合計金額
+  const totalReportFee = useMemo(() => {
+    let totalFee = 0;
+    props.purchaseReportView.map((purchaseReportView: PurchaseReportView) => {
+      totalFee += TotalFee(purchaseReportView.purchaseReport, purchaseReportView.purchaseItems);
+    });
+    return totalFee;
+  }, [props.purchaseReportView]);
+
   // 変更可能なcheckboxの描画
   const changeableCheckboxContent = (isChecked: boolean) => {
     {
@@ -143,8 +140,11 @@ export default function PurchaseReports(props: Props) {
                 <th className='w-1/12 pb-2'>
                   <div className='text-center text-sm text-black-600'>財務局長チェック</div>
                 </th>
+                <th className='w-1/12 pb-2'>
+                  <div className='text-center text-sm text-black-600'>ID</div>
+                </th>
                 <th className='w-2/12 border-b-primary-1 pb-2'>
-                  <div className='text-center text-sm text-black-600'>報告した局</div>
+                  <div className='text-center text-sm text-black-600'>購入した局</div>
                 </th>
                 <th className='w-1/12 border-b-primary-1 pb-2'>
                   <div className='text-center text-sm text-black-600'>報告日</div>
@@ -153,7 +153,7 @@ export default function PurchaseReports(props: Props) {
                   <div className='text-center text-sm text-black-600'>期限日</div>
                 </th>
                 <th className='w-3/12 border-b-primary-1 pb-2'>
-                  <div className='text-center text-sm text-black-600'>購入物品</div>
+                  <div className='text-center text-sm text-black-600'>購入物品 (個数)</div>
                 </th>
                 <th className='w-1/12 border-b-primary-1 pb-2'>
                   <div className='text-center text-sm text-black-600'>合計金額</div>
@@ -168,18 +168,9 @@ export default function PurchaseReports(props: Props) {
               {props.purchaseReportView.map((purchaseReportViewItem, index) => (
                 <tr key={purchaseReportViewItem.purchaseReport.id}>
                   <td
-                    className={clsx(
-                      'px-1',
-                      index === 0 ? 'pt-4 pb-3' : 'py-3',
-                      index === purchaseReports.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
-                    )}
+                    className={clsx('px-1', index === 0 ? 'pt-4 pb-3' : 'py-3', 'border-b py-3')}
                     onClick={() => {
-                      onOpen(
-                        purchaseReportViewItem.purchaseReport.id
-                          ? purchaseReportViewItem.purchaseReport.id
-                          : 0,
-                        purchaseReportViewItem,
-                      );
+                      onOpen(purchaseReportViewItem.purchaseReport.id || 0, purchaseReportViewItem);
                     }}
                   >
                     <div className='text-center text-sm text-black-600'>
@@ -193,37 +184,36 @@ export default function PurchaseReports(props: Props) {
                     </div>
                   </td>
                   <td
-                    className={clsx(
-                      'px-1',
-                      index === 0 ? 'pt-4 pb-3' : 'py-3',
-                      index === purchaseReports.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
-                    )}
+                    className={clsx('px-1', index === 0 ? 'pt-4 pb-3' : 'py-3', 'border-b py-3')}
+                    onClick={() => {
+                      onOpen(purchaseReportViewItem.purchaseReport.id || 0, purchaseReportViewItem);
+                    }}
+                  >
+                    <div className='text-center text-sm text-black-600'>
+                      {purchaseReportViewItem.purchaseReport.id}
+                    </div>
+                  </td>
+                  <td
+                    className={clsx('px-1', index === 0 ? 'pt-4 pb-3' : 'py-3', 'border-b py-3')}
                     onClick={() => {
-                      onOpen(
-                        purchaseReportViewItem.purchaseReport.id
-                          ? purchaseReportViewItem.purchaseReport.id
-                          : 0,
-                        purchaseReportViewItem,
-                      );
+                      onOpen(purchaseReportViewItem.purchaseReport.id || 0, purchaseReportViewItem);
                     }}
                   >
                     <div className={clsx('flex justify-center')}>
-                      <BureauLabel bureauID={purchaseReportViewItem.orderUser.bureauID} />
+                      <BureauLabel
+                        bureauName={
+                          props.expenses.find(
+                            (expense) =>
+                              expense.id === purchaseReportViewItem.purchaseOrder.expenseID,
+                          )?.name || ''
+                        }
+                      />
                     </div>
                   </td>
                   <td
-                    className={clsx(
-                      'px-1',
-                      index === 0 ? 'pt-4 pb-3' : 'py-3',
-                      index === purchaseReports.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
-                    )}
+                    className={clsx('px-1', index === 0 ? 'pt-4 pb-3' : 'py-3', 'border-b py-3')}
                     onClick={() => {
-                      onOpen(
-                        purchaseReportViewItem.purchaseReport.id
-                          ? purchaseReportViewItem.purchaseReport.id
-                          : 0,
-                        purchaseReportViewItem,
-                      );
+                      onOpen(purchaseReportViewItem.purchaseReport.id || 0, purchaseReportViewItem);
                     }}
                   >
                     <div className='text-center text-sm text-black-600'>
@@ -235,18 +225,9 @@ export default function PurchaseReports(props: Props) {
                     </div>
                   </td>
                   <td
-                    className={clsx(
-                      'px-1',
-                      index === 0 ? 'pt-4 pb-3' : 'py-3',
-                      index === purchaseReports.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
-                    )}
+                    className={clsx('px-1', index === 0 ? 'pt-4 pb-3' : 'py-3', 'border-b py-3')}
                     onClick={() => {
-                      onOpen(
-                        purchaseReportViewItem.purchaseReport.id
-                          ? purchaseReportViewItem.purchaseReport.id
-                          : 0,
-                        purchaseReportViewItem,
-                      );
+                      onOpen(purchaseReportViewItem.purchaseReport.id || 0, purchaseReportViewItem);
                     }}
                   >
                     <div className='text-center text-sm text-black-600'>
@@ -254,18 +235,9 @@ export default function PurchaseReports(props: Props) {
                     </div>
                   </td>
                   <td
-                    className={clsx(
-                      'px-1',
-                      index === 0 ? 'pt-4 pb-3' : 'py-3',
-                      index === purchaseReports.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
-                    )}
+                    className={clsx('px-1', index === 0 ? 'pt-4 pb-3' : 'py-3', 'border-b py-3')}
                     onClick={() => {
-                      onOpen(
-                        purchaseReportViewItem.purchaseReport.id
-                          ? purchaseReportViewItem.purchaseReport.id
-                          : 0,
-                        purchaseReportViewItem,
-                      );
+                      onOpen(purchaseReportViewItem.purchaseReport.id || 0, purchaseReportViewItem);
                     }}
                   >
                     <div
@@ -273,33 +245,20 @@ export default function PurchaseReports(props: Props) {
                         'overflow-hidden text-ellipsis whitespace-nowrap text-center text-sm text-black-600',
                       )}
                     >
-                      {purchaseReportViewItem.purchaseItems &&
-                        purchaseReportViewItem.purchaseItems.map(
-                          (purchaseItem: PurchaseItem, index: number) => (
-                            <div key={index}>
-                              {purchaseReportViewItem.purchaseItems.length - 1 === index ? (
-                                <>{purchaseItem.item}</>
-                              ) : (
-                                <>{purchaseItem.item},</>
-                              )}
-                            </div>
-                          ),
-                        )}
+                      {/* name (個数/finasucheck) */}
+                      {purchaseReportViewItem.purchaseItems.map((purchaseItem, index) => (
+                        <div key={index}>
+                          {`${purchaseItem.financeCheck ? '○' : 'x'} ${purchaseItem.item} (${
+                            purchaseItem.quantity
+                          })`}
+                        </div>
+                      ))}
                     </div>
                   </td>
                   <td
-                    className={clsx(
-                      'px-1',
-                      index === 0 ? 'pt-4 pb-3' : 'py-3',
-                      index === purchaseReports.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
-                    )}
+                    className={clsx('px-1', index === 0 ? 'pt-4 pb-3' : 'py-3', 'border-b py-3')}
                     onClick={() => {
-                      onOpen(
-                        purchaseReportViewItem.purchaseReport.id
-                          ? purchaseReportViewItem.purchaseReport.id
-                          : 0,
-                        purchaseReportViewItem,
-                      );
+                      onOpen(purchaseReportViewItem.purchaseReport.id || 0, purchaseReportViewItem);
                     }}
                   >
                     <div className='text-center text-sm text-black-600'>
@@ -310,31 +269,16 @@ export default function PurchaseReports(props: Props) {
                     </div>
                   </td>
                   <td
-                    className={clsx(
-                      'px-1',
-                      index === 0 ? 'pt-4 pb-3' : 'py-3',
-                      index === purchaseReports.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
-                    )}
+                    className={clsx('px-1', index === 0 ? 'pt-4 pb-3' : 'py-3', 'border-b py-3')}
                     onClick={() => {
-                      onOpen(
-                        purchaseReportViewItem.purchaseReport.id
-                          ? purchaseReportViewItem.purchaseReport.id
-                          : 0,
-                        purchaseReportViewItem,
-                      );
+                      onOpen(purchaseReportViewItem.purchaseReport.id || 0, purchaseReportViewItem);
                     }}
                   >
                     <div className='text-center text-sm text-black-600'>
                       {purchaseReportViewItem.purchaseReport.remark || '無し'}
                     </div>
                   </td>
-                  <td
-                    className={clsx(
-                      'px-1',
-                      index === 0 ? 'pt-4 pb-3' : 'py-3',
-                      index === purchaseReports.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
-                    )}
-                  >
+                  <td className={clsx('px-1', index === 0 ? 'pt-4 pb-3' : 'py-3', 'border-b py-3')}>
                     <div className='flex'>
                       <div className='mx-1'>
                         <OpenEditModalButton
@@ -370,6 +314,17 @@ export default function PurchaseReports(props: Props) {
                   </td>
                 </tr>
               ))}
+              <tr>
+                <td className='border-b border-primary-1 px-1 py-3' colSpan={6}>
+                  <div className='text-right text-sm text-black-600'>合計</div>
+                </td>
+                <td className='border-b border-primary-1 px-1 py-3'>
+                  <div className='text-center text-sm text-black-600'>{totalReportFee}</div>
+                </td>
+                <td className='border-b border-primary-1 px-1 py-3' colSpan={2}>
+                  <div className='text-center text-sm text-black-600' />
+                </td>
+              </tr>
             </tbody>
           </table>
         </div>
@@ -379,6 +334,7 @@ export default function PurchaseReports(props: Props) {
           id={purchaseReportID}
           isOpen={isOpen}
           setIsOpen={setIsOpen}
+          expenses={props.expenses}
           purchaseReportViewItem={purchaseReportViewItem}
           isDelete={false}
         />
diff --git a/view/next-project/src/pages/sponsorstyles/index.tsx b/view/next-project/src/pages/sponsorstyles/index.tsx
index d2729def5..74ac55bbe 100644
--- a/view/next-project/src/pages/sponsorstyles/index.tsx
+++ b/view/next-project/src/pages/sponsorstyles/index.tsx
@@ -51,9 +51,6 @@ export default function SponsorStyleList(props: Props) {
           <table className='mb-5 w-full table-fixed border-collapse'>
             <thead>
               <tr>
-                <th className='border border-x-white-0 border-b-primary-1 border-t-white-0 py-3'>
-                  <p className='text-center text-sm text-black-600'>ID</p>
-                </th>
                 <th className='border border-x-white-0 border-b-primary-1 border-t-white-0 py-3'>
                   <p className='text-center text-sm text-black-600'>広告サイズ</p>
                 </th>
@@ -71,15 +68,6 @@ export default function SponsorStyleList(props: Props) {
             <tbody className='border border-x-white-0 border-b-primary-1 border-t-white-0'>
               {sponsorStyleList.map((sponsorStyleItem, index) => (
                 <tr key={sponsorStyleItem.id}>
-                  <td
-                    className={clsx(
-                      'px-1',
-                      index === 0 ? 'pt-4 pb-3' : 'py-3',
-                      index === sponsorStyleList.length - 1 ? 'pb-4 pt-3' : 'border-b py-3',
-                    )}
-                  >
-                    <p className='text-center text-sm text-black-600'>{sponsorStyleItem.id}</p>
-                  </td>
                   <td
                     className={clsx(
                       'px-1',
diff --git a/view/next-project/src/type/common.ts b/view/next-project/src/type/common.ts
index 38994421d..878b55188 100644
--- a/view/next-project/src/type/common.ts
+++ b/view/next-project/src/type/common.ts
@@ -39,12 +39,24 @@ export interface PurchaseItem {
   createdAt?: string;
   updatedAt?: string;
 }
+
+// Expense(支出)
+export interface Expense {
+  id?: number;
+  name: string;
+  totalPrice: number;
+  yearID: number;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
 // // PurchaseOrder(購入申請)
 export interface PurchaseOrder {
   id?: number;
   deadline: string;
   userID: number;
   financeCheck: boolean;
+  expenseID: number;
   createdAt?: string;
   updatedAt?: string;
 }
diff --git a/view/next-project/src/utils/api/purchaseOrder.ts b/view/next-project/src/utils/api/purchaseOrder.ts
index d5a6b65fa..2d7f43360 100644
--- a/view/next-project/src/utils/api/purchaseOrder.ts
+++ b/view/next-project/src/utils/api/purchaseOrder.ts
@@ -4,8 +4,17 @@ export const post = async (url: string, data: PurchaseOrder) => {
   const deadline = data.deadline;
   const userId = data.userID;
   const financeCheck = data.financeCheck;
+  const expenseId = data.expenseID;
   const postUrl =
-    url + '?deadline=' + deadline + '&user_id=' + userId + '&finance_check=' + financeCheck;
+    url +
+    '?deadline=' +
+    deadline +
+    '&user_id=' +
+    userId +
+    '&finance_check=' +
+    financeCheck +
+    '&expense_id=' +
+    expenseId;
 
   const res = await fetch(postUrl, {
     method: 'POST',
@@ -22,8 +31,17 @@ export const put = async (url: string, data: PurchaseOrder) => {
   const deadline = data.deadline;
   const userId = data.userID;
   const financeCheck = data.financeCheck;
+  const expenseId = data.expenseID;
   const putUrl =
-    url + '?deadline=' + deadline + '&user_id=' + userId + '&finance_check=' + financeCheck;
+    url +
+    '?deadline=' +
+    deadline +
+    '&user_id=' +
+    userId +
+    '&finance_check=' +
+    financeCheck +
+    '&expense_id=' +
+    expenseId;
   const res = await fetch(putUrl, {
     method: 'PUT',
     mode: 'cors',