diff --git a/src/components/loan_screen/Offers.jsx b/src/components/loan_screen/Offers.jsx
index 1807774..4b8014f 100644
--- a/src/components/loan_screen/Offers.jsx
+++ b/src/components/loan_screen/Offers.jsx
@@ -27,8 +27,8 @@ export default function Offers({step, handleStep, screens}) {
             // setError('*')
         },
         onSuccess: (res) => {
-            const selectedOffer = res.data.loan[0].loan
-            handleStep({selectedOffer, ...res.data.loan[0]}, screens.selected_offer)
+            const selectedOffer = res.data.loan
+            handleStep({selectedOffer, ...res.data}, screens.selected_offer)
         }
         })
 
diff --git a/src/components/loan_screen/Pin.jsx b/src/components/loan_screen/Pin.jsx
index bb8ba46..d667c41 100644
--- a/src/components/loan_screen/Pin.jsx
+++ b/src/components/loan_screen/Pin.jsx
@@ -30,7 +30,7 @@ export default function Pin({step, handleStep, screens}) {
           onSuccess: (res) => {
             handleStep(step.details, screens.offers)
         }
-      })
+    })
 
       const handleContinue = () => {
         if(!pin){
diff --git a/src/components/loan_screen/SelectedOffer.jsx b/src/components/loan_screen/SelectedOffer.jsx
index 1f07596..2c88b2b 100644
--- a/src/components/loan_screen/SelectedOffer.jsx
+++ b/src/components/loan_screen/SelectedOffer.jsx
@@ -1,28 +1,64 @@
 import React, { useState } from 'react'
+import { useMutation } from '@tanstack/react-query'
 import Label from '../Label'
 import InputText from '../InputText'
+import { loanApply } from '../../services/siteServices'
 
 export default function SelectedOffer({step, handleStep, screens}) {
 
-    const [pin, setPin] = useState('')
+    const [amount, setAmount] = useState('')
 
-    console.log(step)
-    const handleContinue = () => {
-        handleStep(step.details, screens.loan_pin)
+    const [error, setError] = useState('')
+
+
+    const handleAmountChange = ({target:{value}}) => {
+        setError('')
+        setAmount(value)
     }
 
+    const apply = useMutation({
+        mutationFn: () => {
+            let fields = {amount: Number(amount), bvn:step.activeUser.bvn, loan:step.details.loan}
+            if(!fields.amount){
+                // throw new Error('*')
+                throw ({message:'Please enter amount'})
+            }
+            if(isNaN(amount)){
+                throw ({message:'Amount must be a valid figure'})
+            }
+            return loanApply(fields)
+        },
+        onError: (error) => {
+            setError(error.message)
+            setTimeout(()=>{setError('')},3000)
+        },
+            onSuccess: (res) => {
+            // const selectedOffer = res.data.loan[0].loan
+            handleStep(step.details, screens.loan_pin)
+        }
+    })
+
     return (
         <div className='mt-3 flex flex-col gap-4'>
             <div className='text-input font-semibold w-full flex flex-col gap-4 justify-center items-center'>
                 <p className='text-center text-base'>Tenor: 30 Days</p>
-                <Label name='Enter Loan Amount' htmlfor='pin' />
-                <InputText id='pin' name='pin' type='text' value={pin} handleChange={(e)=>setPin(e.target.value)} />
+                <Label name='Enter Loan Amount' htmlfor='amount' />
+                <InputText id='amount' name='amount' type='text' value={amount} handleChange={handleAmountChange} />
                 <div className='flex flex-col gap-4'>
                     <p className='text-center text-base'>Upfront Interest 200 Naira</p>
                     <p className='text-center text-base'>Due Date: Next Salary or 30 Days</p>
                 </div>
-                <button onClick={handleContinue} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>Continue</button>
+                <button onClick={()=>{apply.mutate()}} disabled={apply.isPending} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>{apply.isPending ? 'loading...' : 'Continue'}</button>
             </div>
+
+            {error &&
+            <>
+                <div className="w-full text-center p-2">
+                <p className='text-red-500 text-sm'>{error}</p>
+            </div>
+            </>
+            }
         </div>
     )
 }
+ 
\ No newline at end of file
diff --git a/src/services/siteServices.js b/src/services/siteServices.js
index 0784d4a..9ebfeb0 100644
--- a/src/services/siteServices.js
+++ b/src/services/siteServices.js
@@ -66,6 +66,14 @@ export const loanSelect = (reqData) => {
     return postAuxEnd('/salary/loanselect', postData, false)
 }
 
+// FUNCTION TO APPLY FOR LOAN
+export const loanApply = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/salary/loanapply', postData, false)
+}
+
 // FUNCTION TO GET DEMO USERS
 export const demoUsersList = (reqData) => {
     const postData = { ...reqData }