diff --git a/front-end/timepay-user/src/App.tsx b/front-end/timepay-user/src/App.tsx
index 7c438af..2e8ce17 100644
--- a/front-end/timepay-user/src/App.tsx
+++ b/front-end/timepay-user/src/App.tsx
@@ -16,7 +16,10 @@ function App() {
           <Route path={PATH.HOME} element={<PageRoutes.IntroPage />} />
           <Route path={PATH.SIGN_UP} element={<PageRoutes.SignUp />} />
           <Route path={PATH.MAIN} element={<PageRoutes.UserMainPage />} />
-
+          <Route path={PATH.TRANSFER} element={<PageRoutes.Transfer/>} />
+          <Route path={PATH.TRANSFERAMOUNT} element={<PageRoutes.TransferAmt/>} />
+          <Route path={PATH.TRANSFERPASSWORD} element={<PageRoutes.TransferPW/>} />
+          <Route path={PATH.TRANSFERLOG} element={<PageRoutes.TransferLog/>} />
             {/* <Route path={PATH.HOME} element={<PageRoutes.HomePage />} />
             <Route path={PATH.SEARCH} element={<PageRoutes.SearchPage />} />
             <Route path={PATH.MY_PAGE} element={<PageRoutes.MyPage />} /> */}
diff --git a/front-end/timepay-user/src/components/BaseLayout/BaseLayout.styles.tsx b/front-end/timepay-user/src/components/BaseLayout/BaseLayout.styles.tsx
index 1dd1205..10a2305 100644
--- a/front-end/timepay-user/src/components/BaseLayout/BaseLayout.styles.tsx
+++ b/front-end/timepay-user/src/components/BaseLayout/BaseLayout.styles.tsx
@@ -6,7 +6,7 @@ export const cssBaseLayoutStyle = css`
   font-family: unset !important;
   background: ${COMMON_COLOR.WHITE};
   overflow-x: hidden;
-  width: 100%;
+  width: 100wh;
   height: 100vh;
   main {
     font-family: unset !important;
diff --git a/front-end/timepay-user/src/pages/MainPage/UserMainPage.tsx b/front-end/timepay-user/src/pages/MainPage/UserMainPage.tsx
index bc537ce..9a70477 100644
--- a/front-end/timepay-user/src/pages/MainPage/UserMainPage.tsx
+++ b/front-end/timepay-user/src/pages/MainPage/UserMainPage.tsx
@@ -85,7 +85,7 @@ const UserMainPage = () => {
             </div>
           </div>
 
-          <div className='bottom-btn'>
+          <div className='bottom-btn' onClick = { ()=>handleOnClickLinkBtn(PATH.TRANSFER)}>
             이체
           </div>
         </div>
diff --git a/front-end/timepay-user/src/pages/Transfer/TransferAccount.tsx b/front-end/timepay-user/src/pages/Transfer/TransferAccount.tsx
new file mode 100644
index 0000000..8199282
--- /dev/null
+++ b/front-end/timepay-user/src/pages/Transfer/TransferAccount.tsx
@@ -0,0 +1,51 @@
+import { Link } from "react-router-dom";
+import { useState, useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { headerTitleState } from '../../states/uiState';
+import "./transfer_account.css";
+import "./bgImage.css";
+
+function TransferAcc() {
+    const [account, setAccount] = useState("");
+    const [error, setError] = useState("");
+
+    var accountExist = false;
+    const handleNext = (e : React.MouseEvent<HTMLButtonElement>) =>{
+        if(accountExist === false){
+            if (account === "123"){
+                accountExist = true;
+            }
+        }
+
+        if(account === "" || accountExist === false) {
+            e.preventDefault();
+            setError("계좌번호 오류. 다시 입력해주세요.")
+        }
+        //console.log("clicked : " + account);
+        //window.location.href = "/transfer/amount" > Link 태그로 대체
+    };
+
+    const setHeaderTitle = useSetRecoilState(headerTitleState);
+    useEffect(() => {
+      setHeaderTitle('계좌번호 입력');
+    });
+    
+    return(
+        <div>
+            <div>
+            <span className="menuInfo">계좌번호 입력</span>
+            <input onChange={e => setAccount(e.target.value)} placeholder="계좌 번호 입력" value={account||""} className="inputBox"></input>
+            <span className="errorMessage">{error}</span>
+            </div>
+
+            <div>
+            <Link to="/transfer/amount" state={{account : account}}><button onClick={handleNext} className="nextButton">다음</button></Link>
+            <Link to="/main" ><button className="beforeButton">이전</button></Link>
+            </div>
+            </div>
+    );
+
+
+}
+
+export default TransferAcc;
\ No newline at end of file
diff --git a/front-end/timepay-user/src/pages/Transfer/TransferAmount.tsx b/front-end/timepay-user/src/pages/Transfer/TransferAmount.tsx
new file mode 100644
index 0000000..cfe1458
--- /dev/null
+++ b/front-end/timepay-user/src/pages/Transfer/TransferAmount.tsx
@@ -0,0 +1,108 @@
+import React from "react";
+
+import { Link, useLocation } from "react-router-dom";
+import { useState, useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { headerTitleState } from '../../states/uiState';
+
+import "./bgImage.css";
+import "./transfer_amount.css";
+import "./transfer_account.css"; /* inputbox, nextbutton css 가져옴 */
+import Modal from "react-modal";
+
+Modal.setAppElement('#root');
+
+function TransferAmt() {
+    const location = useLocation();
+    const account = location.state.account;
+    const name = "옥상수";
+    const balance = 1000;
+
+
+    const [amount, setAmount] = useState(0);
+
+    
+    const [openModal, setOpenModal] = useState(false);
+    /*const [pwModal, setPwModal] = useState(false);*/
+
+    const [error, setError] = useState("");
+    const [errorModal, setErrorModal] = useState(false);
+
+    const handleNext = (amount : number) =>{
+        if(amount===0 || isNaN(amount) || amount > balance){
+            setError("금액을 다시 확인해주세요.")
+            setErrorModal(true);
+        }
+        else{
+            setOpenModal(true);
+            setError("");
+        }
+    };
+
+    const addValue = (adder : number) =>{
+        //console.log(isNaN(amount) || amount==="");
+        setAmount(amount + adder);
+    };
+
+
+    const setHeaderTitle = useSetRecoilState(headerTitleState);
+    useEffect(() => {
+      setHeaderTitle('금액 입력');
+    });
+
+    return(
+<div className="unscrollable">
+                
+                <div>
+                    <div className="accountInfo">
+                        <span className="fontGrey">받는 분</span>
+                        <span className="fontBlack">{name}</span>
+                        <span className="fontOrange">{account}</span>
+                    </div>
+
+                    <div>
+                        <input type="number" onChange={(e:React.ChangeEvent<HTMLInputElement>) => setAmount(+e.target.value)} placeholder="금액 입력" value={amount===0 ? "" : amount} className="inputBox"></input>
+                        <span className="fontTP">TP</span>
+                        
+                        <div className="incButton">
+                            <button onClick={()=>addValue(10)} value={10} className="incTen">+10</button>                      
+                            <button onClick={()=>addValue(30)} value={30} className="incThirty">+30</button>
+                            <button onClick={()=>addValue(60)} value={60} className="incSixty">+60</button>
+                        </div>
+                    </div>
+
+                </div>
+
+                <div>
+                <button onClick={() => handleNext(amount)} className="nextButton">다음</button>
+
+                <Modal isOpen={errorModal} onRequestClose={() => setErrorModal(false)} className="modalError">
+                    <span className="fontErrConfirm">{error}</span>
+                    <button onClick={()=>setErrorModal(false)} className="errorConfirm">확인</button>
+                </Modal>
+
+                <Modal isOpen={openModal} onRequestClose={() => setOpenModal(false)} className="modalImage">
+                    <div className="modalInfo">
+                        <p className="fontGrey">받는 분</p>
+                        <span className="fontBlack">{name} <span className="fontGrey">님</span></span>
+                        <span className="fontOrange">{account}</span>
+                        <br></br><br></br>
+                        <p className="fontGrey">보내는 TIME PAY</p>
+                        <span className="fontBlack">{amount}</span>
+                        <span className="fontOrange">TP</span>
+                    </div>
+                    <button onClick={()=>setOpenModal(false)} className="modalClose">&#10005;</button>
+                    <button onClick={()=>setOpenModal(false)} className="beforeModal">이전</button>
+                    <Link to="/transfer/password" state={{account : account, amount : amount, name : name}}>"<button onClick={()=>setOpenModal(false)} className="nextModal">다음</button></Link>
+                </Modal>
+
+                <Link to="/transfer/account" ><button className="beforeButton">이전</button></Link>
+                </div>
+            </div>
+
+    );
+
+
+}
+
+export default TransferAmt;
\ No newline at end of file
diff --git a/front-end/timepay-user/src/pages/Transfer/TransferLog.tsx b/front-end/timepay-user/src/pages/Transfer/TransferLog.tsx
new file mode 100644
index 0000000..4e3ef2d
--- /dev/null
+++ b/front-end/timepay-user/src/pages/Transfer/TransferLog.tsx
@@ -0,0 +1,48 @@
+import { Link, useLocation } from "react-router-dom";
+import { useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { headerTitleState } from '../../states/uiState';
+
+import Card from "antd/es/card/Card";
+
+import "./transfer_account.css";
+import "./bgImage.css";
+import "./transfer_log.css";
+
+function TransferLog() {
+    const location = useLocation();
+    const account = location.state.account;
+    const amount = location.state.amount;
+    const name = location.state.name;
+    const date = new Date();
+    const datestr = date.getFullYear() + "." + (date.getMonth()+1) + "." + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
+
+
+    const setHeaderTitle = useSetRecoilState(headerTitleState);
+    useEffect(() => {
+      setHeaderTitle('이체하기');
+    });
+
+    return(
+            <div>
+                <div>
+                <span className="menuInfo">이체 완료</span>
+                <Card title="거래내역" className="transferInfo">
+                <p>계좌번호 : {account}</p>
+                <p>금액 : {amount}</p>
+                <p>이름 : {name}</p>
+                <p>거래일시 : {datestr}</p>
+                </Card>
+                
+                </div>
+
+                <div>
+                <Link to="/main"><button className="endButton">완료</button></Link>
+                </div>
+            </div>
+    );
+
+
+}
+
+export default TransferLog;
\ No newline at end of file
diff --git a/front-end/timepay-user/src/pages/Transfer/TransferPassword.tsx b/front-end/timepay-user/src/pages/Transfer/TransferPassword.tsx
new file mode 100644
index 0000000..7e4d169
--- /dev/null
+++ b/front-end/timepay-user/src/pages/Transfer/TransferPassword.tsx
@@ -0,0 +1,56 @@
+import { Link, useLocation } from "react-router-dom";
+import { useState, useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { headerTitleState } from '../../states/uiState';
+
+import "./transfer_account.css";
+import "./bgImage.css";
+
+
+function TransferPW() {
+    const location = useLocation();
+    const account = location.state.account;
+    const amount = location.state.amount;
+    const name = location.state.name;
+
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState("");
+    var passwordCorrect = true;
+
+    const handleNext = (e : React.MouseEvent<HTMLButtonElement>) =>{
+        if(password === "" || passwordCorrect === false) {
+            setError("비밀번호 오류. 다시 입력해주세요.");
+            e.preventDefault();
+        }
+        else{
+            setError("");
+            //console.log("correct password");
+        }
+    };
+
+    const setHeaderTitle = useSetRecoilState(headerTitleState);
+    useEffect(() => {
+      setHeaderTitle('거래비밀번호 입력');
+    });
+
+
+    return(
+            <div>
+                
+                <div>
+                <span className="menuInfo">거래 비밀번호 입력</span>
+                <input type='password' onChange={e => setPassword(e.target.value)} placeholder="비밀번호입력" value={password||""} className="inputBox"></input>
+                <span className="errorMessage">{error}</span>
+                </div>
+
+                <div>
+                <Link to="/transfer/amount" state={{account : account}}><button className="beforeButton">이전</button></Link>
+                <Link to="/transfer/log" state={{account : account, amount : amount, name : name}}><button onClick={handleNext} className="nextButton">이체</button></Link>
+                </div>
+            </div>
+    );
+
+
+}
+
+export default TransferPW;
\ No newline at end of file
diff --git a/front-end/timepay-user/src/pages/Transfer/bgImage.css b/front-end/timepay-user/src/pages/Transfer/bgImage.css
new file mode 100644
index 0000000..4666284
--- /dev/null
+++ b/front-end/timepay-user/src/pages/Transfer/bgImage.css
@@ -0,0 +1,107 @@
+.backGround {
+    background: #f12323;
+}
+
+.menuInfo {
+    display:inline-block;
+    position: absolute;
+    top: 15%;
+    left: 0%;
+    width: 100%;
+    height: 100%;
+
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    font-size:20px;
+    line-height: 100%;
+    text-align: center;
+    text-transform: uppercase;
+    color:#505050
+}
+
+.mainScreen {
+    /* shape */
+    box-sizing: border-box;
+
+    width: 100vw;
+    height: 100vh;
+    /*border-radius: 40px;*/
+
+    background: #ffffff;
+    border: 1px solid #000000;
+
+    /* position */
+    position: absolute;
+    top:0%;
+    left:0%;
+
+    overflow:hidden;
+}
+
+.header {
+    /* shape */
+    box-sizing: border-box;
+
+    width: 92%;
+    height: 8%;
+    border-top-right-radius: 40px;
+    border-top-left-radius: 40px;
+
+    background: #FFFFFF;
+    border : 2px solid #FFFFFF;
+    border-bottom-color: #C7C7C7;
+
+    /* position */
+    position: absolute;
+    left: 4%;
+
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    line-height: 100%;
+    text-align: left;
+    text-transform: uppercase;
+    color:#F1AF23;
+
+    display:grid;
+    grid-template-rows: 100%;
+    grid-template-columns: 30px 1fr 30px;
+    grid-template-areas: "button txt margin";
+    align-items: center;
+}
+
+.headerText{
+    grid-area: txt;
+    justify-self: center;
+    font-size: 18px;
+}
+
+.arrow {
+    grid-area: button;
+    justify-self: left;
+
+    border: 0px;
+    background:transparent;
+
+    font-size:30px;
+    color:#F1AF23;
+
+    cursor:pointer;
+}
+
+.errorMessage {
+    position:absolute;
+    top:28%;
+    left:0%;
+    width:100%;
+
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 800;
+    font-size: 15px;
+    line-height: 100%;
+    text-align: center;
+    text-transform: uppercase;
+    color: #FF0000;
+}
\ No newline at end of file
diff --git a/front-end/timepay-user/src/pages/Transfer/transfer_account.css b/front-end/timepay-user/src/pages/Transfer/transfer_account.css
new file mode 100644
index 0000000..b1848ff
--- /dev/null
+++ b/front-end/timepay-user/src/pages/Transfer/transfer_account.css
@@ -0,0 +1,75 @@
+.inputBox {
+    /* shape */
+    box-sizing: border-box;
+    width: 70%;
+    height: 7%;
+    border: 0px;
+    border-bottom: 2px solid #C7C7C7;
+    
+    /* position */
+    position: absolute;
+    top: 20%;
+    left: 15%;
+
+    /* font */
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 100%;
+    text-align: center;
+    text-transform: uppercase;
+    color: #CDCDCD;
+}
+
+.nextButton {
+    /* shape */
+    width: 35%;
+    height: 5%;
+    border-radius: 20px;
+
+    background: #F1AF23;
+    border: 0px solid #000000;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+
+    /* position */
+    position: absolute;
+    top:88%;
+    left:58%;
+
+    /* font */
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 100%;
+    text-align: center;
+    text-transform: uppercase;
+    color: #FFFFFF;
+}
+
+.beforeButton{
+    /* shape */
+    width: 35%;
+    height: 5%;
+    border-radius: 20px;
+
+    background: #C7C7C7;
+    border: 0px solid #000000;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+
+    /* position */
+    position: absolute;
+    top:88%;
+    left:12%;
+
+    /* font */
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 100%;
+    text-align: center;
+    text-transform: uppercase;
+    color: #FFFFFF;
+}
diff --git a/front-end/timepay-user/src/pages/Transfer/transfer_amount.css b/front-end/timepay-user/src/pages/Transfer/transfer_amount.css
new file mode 100644
index 0000000..2098ba6
--- /dev/null
+++ b/front-end/timepay-user/src/pages/Transfer/transfer_amount.css
@@ -0,0 +1,223 @@
+.unscrollable{
+    overflow:hidden;
+}
+
+.accountInfo {
+    display:inline-block;
+    position: absolute;
+    top: 15%;
+    left: 15%;
+    width: 100%;
+    height: 100%;
+
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    line-height: 100%;
+    text-align: left;
+    text-transform: uppercase;
+}
+
+.modalInfo {
+    display:inline-block;
+    position:absolute;
+    top:5%;
+    left:5%;
+    width:100%;
+    height:100%;
+
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    line-height: 100%;
+    text-align: left;
+    text-transform: uppercase;
+}
+
+.fontGrey {
+    margin-right: 4%;
+    font-size: 16px;
+    color: #505050;
+}
+
+.fontBlack {
+    margin-right: 3%;
+    font-size: 18px;
+    color: #000000;
+}
+
+.fontOrange {
+    font-size: 16px;
+    color: #F1AF23
+}
+
+.fontTP {
+    position:absolute;
+    top:24%;
+    left:75%;
+
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    line-height: 100%;
+    font-size: 16px;
+    color: #F1AF23
+}
+
+
+.incButton {
+    position:absolute;
+    width:100%;
+    height:3%;
+    top:30%;
+    left:15%;
+}
+
+.incButton button{
+    width:15%;
+    height:100%;
+
+    border : 0px;
+    border-radius : 5px;
+    background-color: #C7C7C7;
+    margin-right:3%;
+
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    line-height: 100%;
+    font-size: 90%;
+    color:#FFFFFF;
+}
+
+.modalImage {
+    position:absolute;
+    top:78%;
+    left:50%;
+    transform:translate(-50%, -50%);
+
+    width:90%;
+    height:40%;
+    border: 2px solid #000000;
+    border-radius:40px;
+    background-color: #FFFFFF;
+}
+
+.modalClose {
+    background-color:#F1AF23;
+    border: 0px solid #FFFFFF;
+    border-radius:100%;
+
+    position:absolute;
+    top:5%;
+    right:5%;
+
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 100%;
+    color:#FFFFFF;
+}
+
+.nextModal{
+    width:36%;
+    height:10%;
+    border-radius: 20px;
+
+    border: 0px #FFFFFF;
+    background-color:#F1AF23;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+
+    position:absolute;
+    top:75%;
+    left:58%;
+
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 100%;
+    text-align: center;
+    text-transform: uppercase;
+    color: #FFFFFF;
+
+}
+
+.beforeModal {
+    width:36%;
+    height:10%;
+    border-radius: 20px;
+
+    border: 0px #FFFFFF;
+    background-color:#C7C7C7;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+
+    position:absolute;
+    top:75%;
+    left:11%;
+
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 100%;
+    text-align: center;
+    text-transform: uppercase;
+    color: #FFFFFF;
+
+}
+
+.modalError {
+    position:absolute;
+    top:25%;
+    left:50%;
+    transform:translate(-50%, -50%);
+
+    width:80vw;
+    height:20%;
+    border: 2px solid #000000;
+    border-radius:40px;
+    background-color: #FFFFFF;
+}
+
+.errorConfirm {
+    position:absolute;
+    bottom:10%;
+    left:10%;
+
+    /* shape */
+    width: 80%;
+    height: 20%;
+    border-radius: 20px;
+        
+    background: #F1AF23;
+    border: 0px solid #000000;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    
+    /* font */
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 100%;
+    text-align: center;
+    text-transform: uppercase;
+    color: #FFFFFF;
+
+}
+
+.fontErrConfirm{
+    position:absolute;
+    top:28%;
+    left:0%;
+    width:100%;
+
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 800;
+    font-size: 15px;
+    line-height: 100%;
+    text-align: center;
+    text-transform: uppercase;
+    color: #000000;
+}
\ No newline at end of file
diff --git a/front-end/timepay-user/src/pages/Transfer/transfer_log.css b/front-end/timepay-user/src/pages/Transfer/transfer_log.css
new file mode 100644
index 0000000..340d147
--- /dev/null
+++ b/front-end/timepay-user/src/pages/Transfer/transfer_log.css
@@ -0,0 +1,46 @@
+.transferInfo {
+    position:absolute;
+    top:30%;
+    left:10%;
+    width:80%;
+
+    border : 0px;
+    border-bottom : 1px solid #C7C7C7;
+    border-top : 1px solid #C7C7C7;
+    border-radius : 0%;
+
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 100%;
+    text-align: left;
+    text-transform: uppercase;
+    color: #000000;
+}
+
+.endButton {
+        /* shape */
+        width: 80%;
+        height: 5%;
+        border-radius: 20px;
+    
+        background: #F1AF23;
+        border: 0px solid #000000;
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    
+        /* position */
+        position: absolute;
+        top:88%;
+        left:10%;
+    
+        /* font */
+        font-family: 'Lato';
+        font-style: normal;
+        font-weight: 700;
+        font-size: 18px;
+        line-height: 100%;
+        text-align: center;
+        text-transform: uppercase;
+        color: #FFFFFF;
+}
\ No newline at end of file