diff --git a/package.json b/package.json
index c87872e..07da1e1 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "react-router-dom": "^6.24.0",
     "swiper": "^11.1.4",
     "react-kakao-maps-sdk": "^1.1.27"
+    "react-signature-canvas": "^1.0.6"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
diff --git a/src/App.tsx b/src/App.tsx
index 3de3065..a0ef5bc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -18,7 +18,6 @@ import AttendanceDetail from './pages/employee/Attendance/AttendanceDeTail';
 import LandingPage from './pages/LandingPage/LandingPage';
 import EmployeeGreeting from './pages/LandingPage/EmployeeGreeting';
 import EmployeeAddMainAccount from './pages/LandingPage/EmployeeAddMainAccount';
-import AddWorkPlace from './pages/owner/AddWorkPlace';
 import ManualWorkPlaceAddition from './pages/employee/PartTimeTab/ManualWorkPlaceAddition';
 
 function App() {
diff --git a/src/api/apiClient.ts b/src/api/apiClient.ts
index 1b2fa68..e39f130 100644
--- a/src/api/apiClient.ts
+++ b/src/api/apiClient.ts
@@ -38,18 +38,19 @@ class ApiClient implements employeeApi {
   public async getMonthlyPayment(
     year: number,
     month: number
-  ): Promise<BaseResponse<MonthlyPayment>> {
-    const response = await this.axiosInstance.request({
-      method: 'get',
-      url: `employee/salaries?year=${year}&month=${month}`,
-    });
+  ): Promise<MonthlyPayment> {
+    const response: BaseResponse<MonthlyPayment> =
+      await this.axiosInstance.request({
+        method: 'get',
+        url: `employee/salaries?year=${year}&month=${month}`,
+      });
 
     return response.data;
   }
 
   //알바생 - 서류 목록
   public async getPaperList(): Promise<EmploymentContractListGetResponse[]> {
-    const response: BaseResponse<EmploymentContractListGetResponse> =
+    const response: BaseResponse<EmploymentContractListGetResponse[]> =
       await this.axiosInstance.request({
         method: 'get',
         url: 'papers',
@@ -58,6 +59,57 @@ class ApiClient implements employeeApi {
     return response.data;
   }
 
+  //알바생 - 대표 계좌 등록
+  public async registerEmployeeAccount({
+    accountNumber,
+    employeeNm,
+  }: RegisterEmployeeAccount): Promise<RegisterEmployeeAccountResponse> {
+    const dat: RegisterEmployeeAccount = {
+      accountNumber,
+      employeeNm,
+    };
+
+    const response: BaseResponse<RegisterEmployeeAccountResponse> =
+      await this.axiosInstance.request({
+        method: 'post',
+        url: 'employee/accounts',
+        data: dat,
+      });
+
+    return response.data;
+  }
+
+  //알바생 - 대표 계좌 수정
+  public async employeeUpdateAccount(
+    prop: EmployeeAccountUpdate
+  ): Promise<any> {
+    const dat: EmployeeAccountUpdate = {
+      accountNumber: prop.accountNumber,
+    };
+    const response = await this.axiosInstance.request({
+      method: 'put',
+      url: 'employee/accounts',
+      data: dat,
+    });
+
+    return response.data;
+  }
+
+  //알바생 - 월별 급여 명세서 조회
+  public async employeeGetPayStub(
+    workPlaceEmployeeId: string,
+    year: number,
+    month: number
+  ): Promise<EmployeePayStubGetResponse> {
+    const response: BaseResponse<EmployeePayStubGetResponse> =
+      await this.axiosInstance.request({
+        method: 'get',
+        url: `papers/${workPlaceEmployeeId}/pay-stubs?year=${year}&month=${month}`,
+      });
+
+    return response.data;
+  }
+
   //==========================
   // 생성 메소드
   private static createAxiosInstance() {
diff --git a/src/api/interfaces/employeeApi.ts b/src/api/interfaces/employeeApi.ts
index d67a223..559b8fb 100644
--- a/src/api/interfaces/employeeApi.ts
+++ b/src/api/interfaces/employeeApi.ts
@@ -1,15 +1,24 @@
 interface employeeApi {
   manualWorkPlaceAddition(
     req: ManualWorkPlaceAdditionRequest
-  ): Promise<BaseResponse<ManualWorkPlaceAdditionResponse>>;
+  ): Promise<ManualWorkPlaceAdditionResponse>;
 
-  getConfirmReq(): Promise<BaseResponse<ConfirmReqResponse>>;
-  getMonthlyPayment(
-    year: number,
-    month: number
-  ): Promise<BaseResponse<MonthlyPayment>>;
+  getConfirmReq(): Promise<ConfirmReqResponse>;
+  getMonthlyPayment(year: number, month: number): Promise<MonthlyPayment>;
 
   getPaperList(): Promise<EmploymentContractListGetResponse[]>;
+
+  registerEmployeeAccount(
+    prop: RegisterEmployeeAccount
+  ): Promise<RegisterEmployeeAccountResponse>;
+
+  employeeUpdateAccount(prop: EmployeeAccountUpdate): Promise<any>;
+
+  employeeGetPayStub(
+    id: string,
+    yearn: number,
+    month: number
+  ): Promise<EmployeePayStubGetResponse>;
 }
 
 export default employeeApi;
diff --git a/src/components/BtnGray.tsx b/src/components/BtnGray.tsx
index fdaca61..4ef8ba1 100644
--- a/src/components/BtnGray.tsx
+++ b/src/components/BtnGray.tsx
@@ -4,9 +4,10 @@ type Prop = {
   text: string;
   action: () => void;
   className?: string;
+  disabled?: boolean;
 };
 
-const BtnGray = ({ text, action, className }: Prop) => {
+const BtnGray = ({ text, action, className = '', disabled = false }: Prop) => {
   return (
     <>
       <button
@@ -15,6 +16,7 @@ const BtnGray = ({ text, action, className }: Prop) => {
           `bg-slate-300 rounded-md px-5 text-white font-semibold h-[45px] text-center ${className}`
         )}
         onClick={action}
+        disabled={disabled}
       >
         {text}
       </button>
diff --git a/src/components/BtnPrimary.tsx b/src/components/BtnPrimary.tsx
index 16f4ae2..94b54b0 100644
--- a/src/components/BtnPrimary.tsx
+++ b/src/components/BtnPrimary.tsx
@@ -1,14 +1,20 @@
+import clsx from 'clsx';
+
 type Prop = {
   text: string;
   action: () => void;
+  className?: string;
 };
 
-const BtnPrimary = ({ text, action }: Prop) => {
+const BtnPrimary = ({ text, action, className = '' }: Prop) => {
   return (
     <>
       <button
         type='button'
-        className='bg-hanaLightGreen rounded-md px-5 text-white font-semibold h-[45px] text-center'
+        className={clsx(
+          'bg-hanaLightGreen rounded-md px-5 text-white font-semibold h-[45px] text-center',
+          className
+        )}
         onClick={action}
       >
         {text}
diff --git a/src/components/InputBorderSelect.tsx b/src/components/InputBorderSelect.tsx
index 47b11c1..29aa15e 100644
--- a/src/components/InputBorderSelect.tsx
+++ b/src/components/InputBorderSelect.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { ForwardedRef, forwardRef, useState } from 'react';
+import { ForwardedRef, forwardRef, useEffect, useState } from 'react';
 
 type SelectionProp = {
   text: string;
@@ -33,7 +33,7 @@ const InputBorderSelect = forwardRef(
             }
           )}
         >
-          <div className='font-bold'>{title}</div>
+          <div className='font-bold text-start'>{title}</div>
           <select
             ref={ref}
             onFocus={handleFocused}
diff --git a/src/components/ModalBottom.tsx b/src/components/ModalBottom.tsx
index 74810de..b9aea47 100644
--- a/src/components/ModalBottom.tsx
+++ b/src/components/ModalBottom.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { ReactNode } from 'react';
 import BtnBottom from './BtnBottom';
 
@@ -20,8 +22,14 @@ const ModalBottom = ({
 }: Prop) => {
   return (
     <>
-      <div className='fixed bottom-0 self-center w-[390px] h-screen bg-black bg-opacity-50 z-40 flex justify-center items-center'>
-        <div className='fixed bottom-0 w-[390px]  bg-white rounded-t-3xl drop-shadow-sm min-h-[200px] flex flex-col justify-between px-5 pt-0 pb-5 '>
+      <div
+        className='fixed bottom-0 self-center w-[390px] h-screen bg-black bg-opacity-50 z-40 flex justify-center items-center'
+        onClick={closeModal}
+      >
+        <div
+          className='fixed bottom-0 w-[390px]  bg-white rounded-t-3xl drop-shadow-sm min-h-[200px] flex flex-col justify-between px-5 pt-0 pb-5 '
+          onClick={(e) => e.stopPropagation()}
+        >
           <button
             className='w-full py-3 flex justify-center bg-transparent'
             onClick={closeModal}
@@ -33,13 +41,7 @@ const ModalBottom = ({
           <div>{children}</div>
           {btnBottom && (
             <div>
-              <BtnBottom
-                text={btnText || ''}
-                action={() => {
-                  action();
-                  closeModal();
-                }}
-              />
+              <BtnBottom text={btnText || ''} action={action} />
             </div>
           )}
         </div>
diff --git a/src/components/SignPad.tsx b/src/components/SignPad.tsx
new file mode 100644
index 0000000..19b43bf
--- /dev/null
+++ b/src/components/SignPad.tsx
@@ -0,0 +1,54 @@
+import { ForwardedRef, forwardRef, useImperativeHandle, useRef } from 'react';
+import SignatureCanvas from 'react-signature-canvas';
+
+type Prop = {
+  submit: () => void;
+};
+const SignPad = forwardRef(
+  ({ submit }: Prop, ref: ForwardedRef<SignPadHandler>) => {
+    const canvasRef = useRef<any>(null);
+
+    const handle = {
+      canvasRef: canvasRef,
+    };
+
+    useImperativeHandle(ref, () => handle);
+
+    const clearSign = () => {
+      if (canvasRef.current) canvasRef.current.clear();
+    };
+
+    return (
+      <div className='flex flex-col gap-2'>
+        <SignatureCanvas
+          ref={canvasRef}
+          canvasProps={{
+            className: 'signature-canvas',
+            width: '320px',
+            height: 230,
+          }}
+          clearOnResize={false}
+          backgroundColor='#e9ecef'
+        />
+        <div className='flex justify-between gap-1'>
+          <button
+            className='bg-gray-300 rounded-lg w-full py-3'
+            onClick={clearSign}
+          >
+            clear
+          </button>
+          <button
+            className='bg-hanaLightGreen rounded-lg w-full py-3 text-white'
+            onClick={submit}
+          >
+            submit
+          </button>
+        </div>
+      </div>
+    );
+  }
+);
+
+SignPad.displayName = 'SignPad';
+
+export default SignPad;
diff --git a/src/pages/LandingPage/EmployeeAddMainAccount.tsx b/src/pages/LandingPage/EmployeeAddMainAccount.tsx
index 08bc8ec..43b8157 100644
--- a/src/pages/LandingPage/EmployeeAddMainAccount.tsx
+++ b/src/pages/LandingPage/EmployeeAddMainAccount.tsx
@@ -3,59 +3,166 @@ import BtnBottom from '../../components/BtnBottom';
 import Frame from '../../components/Frame';
 import WhiteBox from '../../components/ui/WhiteBox';
 import Wrapper from '../../components/Wrapper';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import ModalBottom from '../../components/ModalBottom';
+import InputBorder from '../../components/InputBorder';
+import InputBorderSelect from '../../components/InputBorderSelect';
+import ModalCenter from '../../components/ModalCenter';
+import ApiClient from '../../api/apiClient';
+
+export const BankList: SelectionProp[] = [
+  { text: '하나은행', value: 'HANA' },
+  { text: '신한은행', value: 'SHIN_HAN' },
+  { text: '국민은행', value: 'KUK_MIN' },
+  { text: '우리은행', value: 'URI' },
+  { text: 'IBK기업은행', value: 'IBK' },
+  { text: '농협은행', value: 'NONG_HYEOP' },
+  { text: '수협은행', value: 'SU_HYEOP' },
+  { text: '부산은행', value: 'BUSAN' },
+];
 
 const EmployeeAddMainAccount = () => {
   const [isModalOpen, setIsModal] = useState(false);
+  const [isModalCenterOpen, setIsModalCenter] = useState<boolean>(false);
+  const [modalMsg, setModalMsg] = useState<string>('');
+  const [done, setDone] = useState(false);
+  const nameRef = useRef<HTMLInputElement | null>(null);
+  const bankRef = useRef<HTMLSelectElement | null>(null);
+  const accountRef = useRef<HTMLInputElement | null>(null);
+  const checkRef = useRef<HTMLInputElement | null>(null);
+
+  const navigation = useNavigate();
 
   const closeModal = () => {
     setIsModal(false);
   };
 
   const openModal = () => {
+    if (!validation()) return;
     setIsModal(true);
   };
 
-  const navigation = useNavigate();
+  const validation = () => {
+    const name = nameRef.current?.value;
+    const bank = BankList[bankRef.current?.selectedIndex || 0].text;
+    const account = accountRef.current?.value;
+    const checked = checkRef.current?.checked;
+
+    if (!name || !bank || !account || !checked) {
+      setModalMsg('값을 모두 입력해주세요');
+      setIsModalCenter(true);
+      return false;
+    }
+
+    return true;
+  };
+
+  const registerAccount = async () => {
+    if (!validation()) return;
+
+    const name = nameRef.current?.value;
+    const account = accountRef.current?.value;
+
+    try {
+      const response = await ApiClient.getInstance().registerEmployeeAccount({
+        accountNumber: account!,
+        employeeNm: name!,
+      });
+
+      if (response.employeeId) {
+        setDone(true);
+        setModalMsg('등록 성공');
+      }
+    } catch (err) {
+      console.error(err);
+      setModalMsg('등록 실패');
+      setIsModal(false);
+      setIsModalCenter(true);
+    }
+  };
+
+  useEffect(() => {
+    nameRef.current?.focus();
+    nameRef.current?.click();
+  }, []);
+
   return (
     <>
+      {isModalCenterOpen && (
+        <ModalCenter
+          title='알림'
+          closeModal={() => setIsModalCenter(false)}
+          confirmAction={
+            done
+              ? () => navigation('/part-time/worktime')
+              : () => {
+                  setIsModalCenter(false);
+                }
+          }
+        >
+          <div>{modalMsg}</div>
+        </ModalCenter>
+      )}
+      {isModalOpen && (
+        <ModalBottom
+          btnBottom
+          btnText='동의하기'
+          title='개인정보 제공 동의'
+          closeModal={closeModal}
+          action={() => registerAccount()}
+        >
+          <div>개인정보 약관</div>
+        </ModalBottom>
+      )}
       <Frame>
         <div className='flex flex-col justify-between w-full h-full py-5 gap-2'>
           <Wrapper title='알바생 대표 계좌 등록'>
             <div className=' flex flex-col justify-start gap-2'>
-              <WhiteBox border className='py-2'>
-                <div className='flex justify-between'>
-                  <span className='font-bold'>이름</span>
-                  <span>홍길동</span>
+              {/* 이름 */}
+              <InputBorder
+                title='이름'
+                placeHolder='성명을 입력해주세요'
+                ref={nameRef}
+              />
+              {/* 은행 */}
+              <InputBorderSelect
+                title='은행'
+                ref={bankRef}
+                selectionList={BankList}
+              />
+              {/* 계좌번호 */}
+              <InputBorder
+                title='계좌번호'
+                ref={accountRef}
+                placeHolder='- 제외하고 입력해주세요'
+              />
+
+              <WhiteBox border className='flex justify-between'>
+                <div className='flex justify-between items-center py-1 '>
+                  <div className='w-[10px]'>
+                    <input
+                      type='checkbox'
+                      ref={checkRef}
+                      className='w-[20px]'
+                    />
+                  </div>
+
+                  <div className='text-end text-sm font-bold'>
+                    개인정보 이용 동의
+                  </div>
                 </div>
               </WhiteBox>
-              <WhiteBox border title='은행' className='min-h-[100px] py-5'>
-                <div></div>
-              </WhiteBox>
-              <WhiteBox border title='계좌번호' className='min-h-[100px] py-5'>
-                <div></div>
-              </WhiteBox>
-              <WhiteBox border className='py-1'>
-                <div className='text-start text-sm'>개인정보 이용 동의</div>
-              </WhiteBox>
             </div>
           </Wrapper>
 
-          <BtnBottom text='설정하기' action={() => openModal()} />
+          <BtnBottom
+            text='설정하기'
+            action={() => {
+              openModal();
+            }}
+          />
         </div>
       </Frame>
-      {isModalOpen && (
-        <ModalBottom
-          btnBottom
-          btnText='동의하기'
-          title='개인정보 제공 동의'
-          closeModal={closeModal}
-          action={() => navigation('/my')}
-        >
-          <div>개인정보 약관</div>
-        </ModalBottom>
-      )}
     </>
   );
 };
diff --git a/src/pages/employee/MyPageTab/EditMyPage.tsx b/src/pages/employee/MyPageTab/EditMyPage.tsx
index 1d2c82a..a7051ee 100644
--- a/src/pages/employee/MyPageTab/EditMyPage.tsx
+++ b/src/pages/employee/MyPageTab/EditMyPage.tsx
@@ -4,36 +4,119 @@ import Frame from '../../../components/Frame';
 import InputBox from '../../../components/ui/InputBox';
 import ReturnArrow from '../../../components/ui/ReturnArrow';
 import ModalBottom from '../../../components/ModalBottom';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
+import InputBorderSelect from '../../../components/InputBorderSelect';
+import { BankList } from '../../LandingPage/EmployeeAddMainAccount';
+import InputBorder from '../../../components/InputBorder';
+import ApiClient from '../../../api/apiClient';
+import ModalCenter from '../../../components/ModalCenter';
 
 const EditMyPage = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isModalCenterOpen, setIsModalCenterOpen] = useState(false);
+  const [modalMsg, setModalMsg] = useState<string>('');
+
+  const bankRef = useRef<HTMLSelectElement | null>(null);
+  const accountRef = useRef<HTMLInputElement | null>(null);
+
   const navigation = useNavigate();
 
-  const openModal = () => {
+  const openModal = (msg?: string) => {
+    setModalMsg(msg || '');
     setIsModalOpen(true);
   };
+
+  const openModalCenter = (msg?: string) => {
+    setModalMsg(msg || '');
+    setIsModalCenterOpen(true);
+  };
+
+  const closeModalCenter = () => {
+    setIsModalCenterOpen(false);
+  };
+
   const closeModal = () => {
     setIsModalOpen(false);
   };
 
+  const validation = () => {
+    const accountNumber = accountRef.current?.value;
+    if (!accountNumber) return false;
+    return true;
+  };
+
+  const updateAccount = async () => {
+    if (!validation) return;
+
+    const dat: EmployeeAccountUpdate = {
+      accountNumber: accountRef.current!.value!,
+    };
+
+    try {
+      const response = await ApiClient.getInstance().employeeUpdateAccount(dat);
+      console.log(response);
+      openModalCenter('등록 성공');
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const confirmAction = () => {
+    closeModal();
+    updateAccount();
+  };
+
   return (
     <>
+      {isModalCenterOpen && (
+        <ModalCenter
+          title='계좌 등록'
+          confirmAction={() => navigation('/my')}
+          closeModal={closeModalCenter}
+        >
+          <div>{modalMsg}</div>
+        </ModalCenter>
+      )}
+      {isModalOpen && (
+        <ModalBottom
+          btnBottom
+          btnText='수정'
+          title='계좌 확인'
+          closeModal={closeModal}
+          action={confirmAction}
+        >
+          <div className='flex flex-col py-10'>
+            <div className='flex justify-between'>
+              {/* 은행명 */}
+              <div className='text-start font-semibold'>
+                {BankList[bankRef.current?.selectedIndex || 0].text}
+              </div>
+              {/* 계좌번호 */}
+              <div className='text-end'>{accountRef.current?.value}</div>
+            </div>
+            <div className='py-5'>위 계좌를 등록 하시겠습니까?</div>
+          </div>
+        </ModalBottom>
+      )}
       <Frame navTitle='알바ON'>
         <div className='w-full flex flex-col gap-2 h-full justify-between my-5'>
           <div className='flex flex-col justify-start gap-2'>
             <ReturnArrow To='/my' text='뒤로가기' />
-            <InputBox label='은행'></InputBox>
-            <InputBox label='계좌'></InputBox>
+            <InputBorderSelect
+              ref={bankRef}
+              selectionList={BankList}
+              title='은행'
+              defaultValue={BankList[0]}
+            />
+            <InputBorder
+              ref={accountRef}
+              title='계좌번호'
+              placeHolder='-를 제외하고 입력해주세요'
+            />
           </div>
 
           <BtnBottom text='수정하기' action={openModal} />
         </div>
-        {isModalOpen && (
-          <ModalBottom btnBottom btnText='수정' closeModal={closeModal}>
-            <div>안녕하세요</div>
-          </ModalBottom>
-        )}
       </Frame>
     </>
   );
diff --git a/src/pages/employee/MyPageTab/MyPage.tsx b/src/pages/employee/MyPageTab/MyPage.tsx
index ec4fb50..7fd52dd 100644
--- a/src/pages/employee/MyPageTab/MyPage.tsx
+++ b/src/pages/employee/MyPageTab/MyPage.tsx
@@ -62,7 +62,7 @@ const MyPage = () => {
 
         {/* 근로계약서 */}
         <Wrapper title='근로계약서'>
-          <div className='flex flex-col'>
+          <div className='flex flex-col gap-2'>
             {papers?.map((item, index) => (
               <WhiteBox
                 className='px-3 py-5'
@@ -71,7 +71,10 @@ const MyPage = () => {
               >
                 <div className='flex flex-col justify-center text-sm w-full'>
                   <div className='w-full flex justify-between items-center'>
-                    <WorkPlaceName name={item.workPlaceNm} colorType='02' />
+                    <WorkPlaceName
+                      name={item.workPlaceNm}
+                      colorType={item.colorTypeCd}
+                    />
                     <div>{item.employmentContractCreatedAt}</div>
                   </div>
                 </div>
diff --git a/src/pages/employee/PartTimeTab/PayStub.tsx b/src/pages/employee/PartTimeTab/PayStub.tsx
new file mode 100644
index 0000000..d792eab
--- /dev/null
+++ b/src/pages/employee/PartTimeTab/PayStub.tsx
@@ -0,0 +1,188 @@
+import { useEffect, useState } from 'react';
+import WhiteBox from '../../../components/ui/WhiteBox';
+import { formatMonths, styleMonths } from '../../../utils/format-date';
+import BtnGray from '../../../components/BtnGray';
+import Circle from '../../../components/ui/Circle';
+import ApiClient from '../../../api/apiClient';
+import generateMonthList from '../../../utils/generateMonthList';
+import BtnPrimary from '../../../components/BtnPrimary';
+
+type Prop = {
+  year: number;
+  month: number;
+};
+
+const PayStub = ({ year, month }: Prop) => {
+  const [monthList, setMonthList] = useState<Date[]>([]);
+  const [selectedYear, setSelectedYear] = useState<number>(year);
+  const [selectedMonth, setSelectedMonth] = useState<number>(month);
+  const [payStub, setPayStub] = useState<EmployeePayStubGetResponse>(null);
+
+  const setSelectedYearMonth = (year: number, month: number) => {
+    setSelectedYear(year);
+    setSelectedMonth(month);
+  };
+
+  const getData = async () => {
+    try {
+      const response = await ApiClient.getInstance().employeeGetPayStub(
+        '1',
+        selectedYear,
+        selectedMonth
+      );
+
+      if (response) {
+        console.log(response);
+        setPayStub(response);
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  useEffect(() => {
+    getData();
+    setMonthList(generateMonthList());
+  }, []);
+
+  return (
+    <>
+      {payStub && (
+        <WhiteBox className='py-3 px-3 w-full border'>
+          <select>
+            {monthList.map((date) => (
+              <option
+                key={date.toISOString()}
+                value={date.toLocaleDateString()}
+                defaultChecked={
+                  date.getFullYear() === year && date.getMonth() === month
+                }
+                onSelect={() =>
+                  setSelectedYearMonth(date.getFullYear(), date.getMonth())
+                }
+              >
+                {`${styleMonths(formatMonths(date))} 예상 급여명세서`}
+              </option>
+            ))}
+          </select>
+          <div className='flex justify-between items-end mt-5'>
+            <div className='flex flex-col text-sm text-gray-300 text-start'>
+              <span>월급일</span>
+              <span>{payStub.paymentDay}일</span>
+            </div>
+            <div className='text-xl font-bold'>
+              총 {payStub.totalPay.toLocaleString()}
+            </div>
+          </div>
+          {payStub.status !== 'READY' ? (
+            <BtnPrimary
+              text='수령 받기'
+              action={() => {}}
+              className='w-full my-2'
+            />
+          ) : (
+            <BtnGray
+              text='수령예정'
+              action={() => {}}
+              className='w-full my-2'
+            />
+          )}
+
+          {/* 지급 합계 */}
+          <div className='flex flex-col border-t border-gray-100 py-5 gap-2'>
+            <div className='text-start flex justify-between mb-3'>
+              <span className='font-bold'>지급 합계</span>
+              <span className='font-semibold'>
+                {(
+                  payStub.basicHour * payStub.basicPay +
+                  payStub.overHour * payStub.overPay
+                ).toLocaleString()}
+                원
+              </span>
+            </div>
+            {/* 근무수당 */}
+            <div className='grid grid-cols-12 justify-between items-start'>
+              <div className='col-span-1'>
+                <Circle color='red' />
+              </div>
+              <div className='col-span-11 flex flex-col justify-start text-start pl-3'>
+                <div>근무수당</div>
+                <div className='flex justify-between  text-gray-400'>
+                  <div>
+                    {payStub.basicPay.toLocaleString()}원 * {payStub.basicHour}H
+                  </div>
+                  <div>
+                    {(payStub.basicHour * payStub.basicPay).toLocaleString()}원
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/* 추가 근무 수당 */}
+            <div className='grid grid-cols-12 justify-between items-start'>
+              <div className='col-span-1'>
+                <Circle color='red' />
+              </div>
+              <div className='col-span-11 flex flex-col justify-start text-start pl-3'>
+                <div>추가수당</div>
+                <div className='flex justify-between  text-gray-400'>
+                  <div>
+                    {payStub.overPay.toLocaleString()}원 * {payStub.overHour}H
+                  </div>
+                  <div>
+                    {(payStub.overPay * payStub.overHour).toLocaleString()}원
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/* 주휴 수당 */}
+            {payStub.weeklyHolidayTime > 0 && (
+              <div className='grid grid-cols-12 justify-between items-start'>
+                <div className='col-span-1'>
+                  <Circle color='red' />
+                </div>
+                <div className='col-span-11 flex flex-col justify-start text-start pl-3'>
+                  <div>주휴수당</div>
+                  <div className='flex justify-between  text-gray-400'>
+                    <div>
+                      {payStub.weeklyHolidayPay.toLocaleString()}원 *
+                      {payStub.weeklyHolidayTime}H
+                    </div>
+                    <div>
+                      {(
+                        payStub.weeklyHolidayTime * payStub.weeklyHolidayPay
+                      ).toLocaleString()}
+                      원
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+          {/* 공제 합계 */}
+          <div className='flex flex-col border-t border-gray-100 py-5'>
+            <div className='text-start flex justify-between mb-3'>
+              <span className='font-bold'>공제 합계</span>
+              <span className='font-semibold'>
+                {payStub.totalTaxPay.toLocaleString()}원
+              </span>
+            </div>
+            <div className='grid grid-cols-12 justify-between items-start'>
+              <div className='col-span-1'>
+                <Circle color='blue' />
+              </div>
+              <div className='col-span-11 flex flex-col justify-start text-start pl-3'>
+                <div>세금</div>
+                <div className='flex justify-between text-gray-400'>
+                  <div>세율 {payStub.taxRate} </div>
+                  <div>{payStub.totalPay.toLocaleString()}원</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </WhiteBox>
+      )}
+    </>
+  );
+};
+
+export default PayStub;
diff --git a/src/pages/employee/PartTimeTab/Payment.tsx b/src/pages/employee/PartTimeTab/Payment.tsx
index ffeff63..9525a45 100644
--- a/src/pages/employee/PartTimeTab/Payment.tsx
+++ b/src/pages/employee/PartTimeTab/Payment.tsx
@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { FaAngleRight } from 'react-icons/fa6';
 import WorkPlaceName from '../../../components/ui/WorkPlaceName';
 import ApiClient from '../../../api/apiClient';
+import generateMonthList from '../../../utils/generateMonthList';
 
 type Payment = {
   name: string;
@@ -33,8 +34,6 @@ const Payment = () => {
         setTotalMonthlyPayment(response.totalPayment);
         setPaymentList(response.employeeSalaryGetResponseList);
       }
-
-      console.log(response);
     } catch (err) {
       console.error(err);
     }
@@ -42,15 +41,6 @@ const Payment = () => {
 
   useEffect(() => {
     fetchData(selectedYear, selectedMonth);
-    const generateMonthList = (): Date[] => {
-      const today = new Date();
-      const months = [];
-      for (let i = 0; i < 12; i++) {
-        const date = new Date(today.getFullYear(), today.getMonth() - i, 1);
-        months.push(date);
-      }
-      return months;
-    };
 
     setMonthList(generateMonthList());
   }, [selectedYear, selectedMonth]);
diff --git a/src/pages/employee/PartTimeTab/PaymentDetail.tsx b/src/pages/employee/PartTimeTab/PaymentDetail.tsx
index faf9241..44e7c86 100644
--- a/src/pages/employee/PartTimeTab/PaymentDetail.tsx
+++ b/src/pages/employee/PartTimeTab/PaymentDetail.tsx
@@ -4,28 +4,18 @@ import WhiteBox from '../../../components/ui/WhiteBox';
 import WorkPlaceName from '../../../components/ui/WorkPlaceName';
 import ReturnArrow from '../../../components/ui/ReturnArrow';
 import Frame from '../../../components/Frame';
-import { formatMonths, styleMonths } from '../../../utils/format-date';
-import BtnGray from '../../../components/BtnGray';
-import Circle from '../../../components/ui/Circle';
+
+import NavToggle from '../../../components/NavToggle';
+import PayStub from './PayStub';
+import generateMonthList from '../../../utils/generateMonthList';
 
 const PaymentDetail = () => {
   const today = new Date();
   const { workPlace, dayMonth } = useParams();
   const [monthList, setMonthList] = useState<Date[]>([]);
   const [selectedMonth, setSelectedMonth] = useState<Date>(today);
-  const [paymentDay, setPaymentDate] = useState<Date>(new Date());
 
   useEffect(() => {
-    const generateMonthList = (): Date[] => {
-      const today = new Date();
-      const months = [];
-      for (let i = 0; i < 12; i++) {
-        const date = new Date(today.getFullYear(), today.getMonth() - i, 1);
-        months.push(date);
-      }
-      return months;
-    };
-
     setMonthList(generateMonthList());
   }, []);
 
@@ -34,7 +24,10 @@ const PaymentDetail = () => {
       <div className='w-full pt-3'>
         {workPlace && (
           <div className='flex flex-col gap-2'>
+            {/* 뒤로 가기 */}
             <ReturnArrow text='목록' To='-1' />
+
+            {/* 매장명 */}
             <WhiteBox className='py-3 px-3 w-full border '>
               <div className='flex justify-between items-center'>
                 <WorkPlaceName name={workPlace} colorType='01' />
@@ -44,70 +37,20 @@ const PaymentDetail = () => {
                 </div>
               </div>
             </WhiteBox>
-            <WhiteBox className='py-3 px-3 w-full border'>
-              <select>
-                {monthList.map((date) => (
-                  <option
-                    key={date.toISOString()}
-                    value={date.toLocaleDateString()}
-                    defaultChecked={date === today}
-                    onSelect={() => setSelectedMonth(date)}
-                  >
-                    {`${styleMonths(formatMonths(date))} 예상 급여명세서`}
-                  </option>
-                ))}
-              </select>
-              <div className='flex justify-between items-end mt-5'>
-                <div className='flex flex-col text-sm text-gray-300 text-start'>
-                  <span>월급일</span>
-                  <span>{paymentDay.toDateString()}</span>
-                </div>
-                <div className='text-xl font-bold'>총 1000원</div>
-              </div>
-              <BtnGray
-                text='수령예정'
-                action={() => {}}
-                className='w-full my-2'
-              />
-              {/* 지급 합계 */}
-              <div className='flex flex-col border-t border-gray-100 py-5'>
-                <div className='text-start flex justify-between mb-3'>
-                  <span className='font-bold'>지급 합계</span>
-                  <span className='font-semibold'>1000원</span>
-                </div>
-                <div className='grid grid-cols-12 justify-between items-start'>
-                  <div className='col-span-1'>
-                    <Circle color='red' />
-                  </div>
-                  <div className='col-span-11 flex flex-col justify-start text-start pl-3'>
-                    <div>근무수당</div>
-                    <div className='flex justify-between  text-gray-400'>
-                      <div>10,900원 * 10H </div>
-                      <div>100,000원</div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              {/* 공제 합계 */}
-              <div className='flex flex-col border-t border-gray-100 py-5'>
-                <div className='text-start flex justify-between mb-3'>
-                  <span className='font-bold'>공제 합계</span>
-                  <span className='font-semibold'>1000원</span>
-                </div>
-                <div className='grid grid-cols-12 justify-between items-start'>
-                  <div className='col-span-1'>
-                    <Circle color='blue' />
-                  </div>
-                  <div className='col-span-11 flex flex-col justify-start text-start pl-3'>
-                    <div>근무수당</div>
-                    <div className='flex justify-between text-gray-400'>
-                      <div>10,900원 * 10H </div>
-                      <div>100,000원</div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </WhiteBox>
+
+            {/* 토글버튼 */}
+            <NavToggle
+              first='급여 명세서'
+              second='근무 내역'
+              firstSelected={() => {}}
+              secondSelected={() => {}}
+            />
+
+            {/* 급여명세서 */}
+            <PayStub
+              year={selectedMonth.getFullYear()}
+              month={selectedMonth.getMonth()}
+            />
           </div>
         )}
       </div>
diff --git a/src/pages/employee/PartTimeTab/PaymentMain.tsx b/src/pages/employee/PartTimeTab/PaymentMain.tsx
index 639c262..a6b7a2a 100644
--- a/src/pages/employee/PartTimeTab/PaymentMain.tsx
+++ b/src/pages/employee/PartTimeTab/PaymentMain.tsx
@@ -11,6 +11,7 @@ const PaymentMain = () => {
       <Frame navTitle='알바ON'>
         <ToolBar2 isEmployee />
         <div className='w-full flex flex-col  items-center gap-5 mt-7'>
+          {/* 토글 버튼 */}
           <NavToggle
             first='급여관리'
             second='근무 관리'
diff --git a/src/pages/employee/PartTimeTab/WorkTime.tsx b/src/pages/employee/PartTimeTab/WorkTime.tsx
index 3f5ec02..3a008cd 100644
--- a/src/pages/employee/PartTimeTab/WorkTime.tsx
+++ b/src/pages/employee/PartTimeTab/WorkTime.tsx
@@ -3,14 +3,43 @@ import WhiteBox from '../../../components/ui/WhiteBox';
 import WorkPlaceName from '../../../components/ui/WorkPlaceName';
 import BtnBorder from '../../../components/BtnBorder';
 import ModalBottom from '../../../components/ModalBottom';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import ApiClient from '../../../api/apiClient';
+import SignPad from '../../../components/SignPad';
 
 const WorkTime = () => {
   const [isModalOpen, setModalOpen] = useState(false);
   const navigation = useNavigate();
   const [confirmList, setConfirmList] = useState<ConfirmWorks[]>([]);
+  const [getsign, setGetsign] = useState<boolean>(false);
+  const [modalTitle, setModalTitle] = useState<string>('전자 서명');
+
+  const [papers, setPapers] = useState<EmploymentContractListGetResponse[]>([]);
+
+  const refHandler = useRef<SignPadHandler>(null);
+
+  const saveSignage = () => {
+    // const dataURL = refHandler.current?.canvasRef.current?.value();
+
+    // const dataURL = canvasRef.current.toDataURL('image/png');
+    // const decodedURL = dataURL.replace(/^data:image\/\w+;base64,/, '');
+    // const buf = Buffer.from(decodedURL, 'base64');
+    // const blob = new Blob([buf], { type: 'image/png' });
+    // return new File([blob], `${name}.png`, { type: 'image/png' });
+    return 'true';
+  };
+
+  const fetchPaperList = async () => {
+    try {
+      const response: EmploymentContractListGetResponse[] =
+        await ApiClient.getInstance().getPaperList();
+
+      setPapers(response);
+    } catch (err) {
+      console.error(err);
+    }
+  };
 
   const getConfirmList = async () => {
     try {
@@ -26,6 +55,7 @@ const WorkTime = () => {
 
   useEffect(() => {
     getConfirmList();
+    fetchPaperList();
   }, []);
 
   return (
@@ -50,12 +80,14 @@ const WorkTime = () => {
 
       {/* 사장님과 연동 */}
       <Wrapper title='사장님과 연동'>
-        <WhiteBox className='py-3' border>
-          <div className='flex justify-between items-center'>
-            <WorkPlaceName name='롯데리아' colorType='02' />
-            <BtnBorder color='gray' text='계약 완료' onClick={() => {}} />
-          </div>
-        </WhiteBox>
+        {papers?.map((item) => (
+          <WhiteBox className='py-3' border key={item.employmentContractId}>
+            <div className='flex justify-between items-center'>
+              <WorkPlaceName name={item.workPlaceNm} colorType='02' />
+              <BtnBorder color='gray' text='계약 완료' onClick={() => {}} />
+            </div>
+          </WhiteBox>
+        ))}
       </Wrapper>
 
       {/* 내가 추가한 */}
@@ -75,12 +107,29 @@ const WorkTime = () => {
 
       {isModalOpen && (
         <ModalBottom
-          title='전자 서명 하시겠어요?'
-          btnBottom
+          title={modalTitle}
+          btnBottom={!getsign}
+          action={() => {
+            setGetsign(true);
+            setModalTitle('서명을 입력해주세요');
+          }}
           closeModal={() => setModalOpen(false)}
-          btnText='서명하기'
+          btnText={getsign ? '' : '서명하기'}
         >
-          <>전자서명 시작!</>
+          {!getsign ? (
+            <>전자서명 시작!</>
+          ) : (
+            <div>
+              <SignPad
+                submit={() => {
+                  setModalOpen(false);
+                  setGetsign(false);
+                  saveSignage();
+                }}
+                ref={refHandler}
+              />
+            </div>
+          )}
         </ModalBottom>
       )}
     </div>
diff --git a/src/react-signature-canvas.d.ts b/src/react-signature-canvas.d.ts
new file mode 100644
index 0000000..f703f05
--- /dev/null
+++ b/src/react-signature-canvas.d.ts
@@ -0,0 +1,4 @@
+declare module 'react-signature-canvas' {
+  const SignatureCanvas: any;
+  export default SignatureCanvas;
+}
diff --git a/src/types/api/employee-api.d.ts b/src/types/api/employee-api.d.ts
index 2b3d17d..a0cad96 100644
--- a/src/types/api/employee-api.d.ts
+++ b/src/types/api/employee-api.d.ts
@@ -43,4 +43,42 @@ type EmploymentContractListGetResponse = {
   employmentContractId: number; // 근로계약서 id
   workPlaceNm: string;
   employmentContractCreatedAt: string;
+  colorTypeCd: string;
+};
+
+//대표 계좌 등록
+type RegisterEmployeeAccount = {
+  employeeNm: string;
+  accountNumber: string;
+};
+
+type RegisterEmployeeAccountResponse = {
+  employeeId: number;
+};
+
+//대표 계좌 수정
+type EmployeeAccountUpdate = {
+  accountNumber: string;
+};
+
+//급여명세서 월별 조회
+type EmployeePayStubGetResponse = {
+  payStubId: number;
+  wokrPlaceEmployeeId: number;
+  year: number;
+  month: number;
+  status: string; // 급여 지급 상태,
+  salary: number; // 최종 급여
+  totalPay: number; // 지급 합계
+  totalTaxPay: number; // 공제 합계
+  paymentDay: number;
+  payPerHour: number;
+  basicHour: number;
+  basicPay: number; // 근무 수당, 시급 * basicHour
+  overHour: number;
+  overPay: number; // 연장 수당
+  weeklyHolidayTime: number;
+  weeklyHolidayPay: number; // 주휴 수당
+  taxRate: number;
+  taxPay: number;
 };
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
new file mode 100644
index 0000000..d6519d9
--- /dev/null
+++ b/src/types/components.d.ts
@@ -0,0 +1,4 @@
+type SelectionProp = {
+  text: string;
+  value: any;
+};
diff --git a/src/types/sign.d.ts b/src/types/sign.d.ts
new file mode 100644
index 0000000..dbaca04
--- /dev/null
+++ b/src/types/sign.d.ts
@@ -0,0 +1,3 @@
+type SignPadHandler = {
+  canvasRef: RefObject<any>;
+};
diff --git a/src/utils/generateMonthList.ts b/src/utils/generateMonthList.ts
new file mode 100644
index 0000000..6b02b45
--- /dev/null
+++ b/src/utils/generateMonthList.ts
@@ -0,0 +1,11 @@
+const generateMonthList = (): Date[] => {
+  const today = new Date();
+  const months = [];
+  for (let i = 0; i < 12; i++) {
+    const date = new Date(today.getFullYear(), today.getMonth() - i, 1);
+    months.push(date);
+  }
+  return months;
+};
+
+export default generateMonthList;
diff --git a/yarn.lock b/yarn.lock
index 82aea05..67ca52c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2494,6 +2494,14 @@ react-router@6.24.0:
   dependencies:
     "@remix-run/router" "1.17.0"
 
+react-signature-canvas@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/react-signature-canvas/-/react-signature-canvas-1.0.6.tgz#095a8c2341cb7ba0b23ddd167955147b062c91ee"
+  integrity sha512-NoMHomYu9HxFeLjUGbIeV9abPdWSROfFxFNDekGdwmmaIx+w5ziOEiU2C34X0Ao4GxFnwqyUy/BpYlA4lCD1CA==
+  dependencies:
+    signature_pad "^2.3.2"
+    trim-canvas "^0.1.0"
+
 react@^18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
@@ -2695,6 +2703,11 @@ signal-exit@^4.0.1:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
   integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
 
+signature_pad@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/signature_pad/-/signature_pad-2.3.2.tgz#ca7230021c89cedeead27b33d8d16ff254e5f04a"
+  integrity sha512-peYXLxOsIY6MES2TrRLDiNg2T++8gGbpP2yaC+6Ohtxr+a2dzoaqWosWDY9sWqTAAk6E/TyQO+LJw9zQwyu5kA==
+
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
@@ -2896,6 +2909,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+trim-canvas@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/trim-canvas/-/trim-canvas-0.1.2.tgz#620457f5fecf564b521d35c5fcd4da58304d6e45"
+  integrity sha512-nd4Ga3iLFV94mdhW9JFMLpQbHUyCQuhFOD71PEAt1NjtMD5wbZctzhX8c3agHNybMR5zXD1XTGoIEWk995E6pQ==
+
 ts-api-utils@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1"