diff --git a/src/components/GetLoan.jsx b/src/components/GetLoanScreens.jsx
similarity index 87%
rename from src/components/GetLoan.jsx
rename to src/components/GetLoanScreens.jsx
index bddd9eb..da1832d 100644
--- a/src/components/GetLoan.jsx
+++ b/src/components/GetLoanScreens.jsx
@@ -11,11 +11,13 @@ import Pin from './loan_screen/Pin';
 import Offers from './loan_screen/Offers';
 import LoanPin from './loan_screen/LoanPin';
 import SelectedOffer from './loan_screen/SelectedOffer';
+import GetLoan from './loan_screen/GetLoan';
 
-export default function GetLoan() {
+export default function GetLoanScreens() {
 
   let screens = {
     products: 'products-screen',
+    getLoan: 'get-loan',
     pin: 'pin-screen',
     offers: 'offers-screen',
     selected_offer: 'selected-offer-screen',
@@ -89,7 +91,7 @@ export default function GetLoan() {
                           <button 
                             key={product?.cid} 
                             disabled={isDisabled} 
-                            onClick={()=>handleStep(product, screens.pin)} 
+                            onClick={()=>handleStep(product, screens.getLoan)} 
                             className={`w-full flex gap-2 justify-between items-center p-2 bg-purple-800 text-base sm:text-xl text-white font-bold rounded ${isDisabled && 'opacity-50'}`} 
                           >
                             <span>{product?.description}</span>
@@ -100,14 +102,25 @@ export default function GetLoan() {
                       )}
                     </>
                   }
+                  {/* <button 
+                      onClick={()=>handleStep({}, screens.getLoan)} 
+                      className={`w-full flex gap-2 justify-between items-center p-2 bg-purple-800 text-base sm:text-xl text-white font-bold rounded`} 
+                    >
+                      <span>{'product?.description'}</span>
+                      <IoIosArrowForward />
+                    </button> */}
                 </div>
-                {products &&
+                {/* {products &&
                 <div className='mt-3 w-full h-full flex flex-col justify-end'>
                   <button onClick={()=>console.log('working')} className='w-full p-3 bg-orange-500 text-lg sm:text-2xl text-white font-bold rounded'>Pay Loan</button>
                 </div>
-                }
+                } */}
               </>
-              : step?.screen[step.screen.length -1 ] == screens.pin ?
+              : step?.screen[step.screen.length -1 ] == screens.getLoan ?
+              <>
+                <GetLoan step={step} handleStep={handleStep} screens={screens} />
+              </>
+              :step?.screen[step.screen.length -1 ] == screens.pin ?
               <>
                 <Pin step={step} handleStep={handleStep} screens={screens} />
               </>
diff --git a/src/components/loan_screen/GetLoan.jsx b/src/components/loan_screen/GetLoan.jsx
new file mode 100644
index 0000000..9f1c3a9
--- /dev/null
+++ b/src/components/loan_screen/GetLoan.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+
+export default function GetLoan({step, handleStep, screens}) {
+
+    const handleGetLoan = () => {
+        handleStep({...step.details}, screens.pin)
+    }
+
+  return (
+    <div className='mt-3 h-full flex flex-col gap-3'>
+         <div className='mt-3 flex justify-center'>
+            <button onClick={handleGetLoan} className='p-3 bg-purple-800 text-lg sm:text-2xl text-white font-bold rounded'>Get Loan</button>
+         </div>
+
+        <div className='mt-3 w-full h-full flex flex-col justify-end'>
+            <button onClick={()=>console.log('working')} className='w-full p-3 bg-orange-500 text-lg sm:text-2xl text-white font-bold rounded'>Pay Loan</button>
+        </div>
+    </div>
+  )
+}
diff --git a/src/components/loan_screen/LoanPin.jsx b/src/components/loan_screen/LoanPin.jsx
index aab4ac3..2b3c640 100644
--- a/src/components/loan_screen/LoanPin.jsx
+++ b/src/components/loan_screen/LoanPin.jsx
@@ -1,38 +1,47 @@
 import React, { useState } from 'react'
+import { useMutation } from '@tanstack/react-query'
 import Label from '../Label'
 import InputText from '../InputText'
+import { verifyLoan } from '../../services/siteServices'
 
 export default function LoanPin({step, handleStep, screens}) {
 
-    const [error, SetError] = useState('')
+    const [isSuccess, setIsSuccess] = useState(false)
+
+    const [error, setError] = useState('')
 
     const [pin, setPin] = useState('')
 
     const handlePinChange = ({target:{value}}) => {
-        SetError('')
+        setError('')
         setPin(value)
     }
 
-    const [isSuccess, setIsSuccess] = useState(false)
-
-    const handleContinue = () => {
-        if(!pin){
-            SetError('enter pin')
-            return setTimeout(()=>{
-                SetError('')
-            }, 5000)
+    const proceed = useMutation({
+        mutationFn: () => {
+            let fields = {pin, bvn:step.activeUser.bvn, loan_application_id:step.details.loan_application_id}
+            if(!fields.pin){
+                throw ({message:'Please enter pin'})
+            }
+            return verifyLoan(fields)
+        },
+        onError: (error) => {
+            setError(error.message)
+            setTimeout(()=>{setError('')},3000)
+        },
+        onSuccess: (res) => {
+            setIsSuccess(true)
         }
-        setIsSuccess(prev => !prev)
-    }
+    })
 
     return (
         <>
         {!isSuccess ?
             <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'>
-                    <Label name='Enter your pin' htmlfor='pin' error={error} />
+                    <Label name='Enter your pin' htmlfor='pin' />
                     <InputText id='pin' name='pin' type='text' value={pin} handleChange={handlePinChange} />
-                    <button onClick={handleContinue} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>Continue</button>
+                    <button onClick={()=>{proceed.mutate()}} disabled={proceed.isPending} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>{proceed.isPending ? 'loading...' : 'Continue'}</button>
                 </div>
             </div>
         :
@@ -44,6 +53,14 @@ export default function LoanPin({step, handleStep, screens}) {
             </div>
         }
 
+        {error &&
+        <>
+            <div className="w-full text-center p-2">
+            <p className='text-red-500 text-sm'>{error}</p>
+        </div>
+        </>
+        }
+
         </>
     )
 }
diff --git a/src/components/loan_screen/Pin.jsx b/src/components/loan_screen/Pin.jsx
index d667c41..fc3ca0b 100644
--- a/src/components/loan_screen/Pin.jsx
+++ b/src/components/loan_screen/Pin.jsx
@@ -32,16 +32,6 @@ export default function Pin({step, handleStep, screens}) {
         }
     })
 
-      const handleContinue = () => {
-        if(!pin){
-            SetError('enter pin')
-            return setTimeout(()=>{
-                SetError('')
-            }, 5000)
-        }
-        handleStep(step.details, screens.offers)
-    }
-
     return (
         <div className='mt-3 flex flex-col gap-4'>
             {(!proceed.error || proceed?.error?.message == '*') &&
@@ -49,7 +39,6 @@ export default function Pin({step, handleStep, screens}) {
                     <Label name='Enter your pin' htmlfor='pin' error={error} />
                     <InputText id='pin' name='pin' type='text' value={pin} handleChange={handlePinChange} />
                     <button onClick={()=>{proceed.mutate()}} disabled={proceed.isPending} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>{proceed.isPending ? 'loading...' : 'Continue'}</button>
-                    {/* <button onClick={handleContinue} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>Continue</button> */}
                 </div>
             }
 
diff --git a/src/components/loan_screen/SelectedOffer.jsx b/src/components/loan_screen/SelectedOffer.jsx
index 2c88b2b..93688c3 100644
--- a/src/components/loan_screen/SelectedOffer.jsx
+++ b/src/components/loan_screen/SelectedOffer.jsx
@@ -34,7 +34,7 @@ export default function SelectedOffer({step, handleStep, screens}) {
         },
             onSuccess: (res) => {
             // const selectedOffer = res.data.loan[0].loan
-            handleStep(step.details, screens.loan_pin)
+            handleStep({loan_application_id:res.data.loan_application_id[0], ...step.details}, screens.loan_pin)
         }
     })
 
diff --git a/src/pages/GetLoanPage.jsx b/src/pages/GetLoanPage.jsx
index 9800529..c835e4b 100644
--- a/src/pages/GetLoanPage.jsx
+++ b/src/pages/GetLoanPage.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import GetLoan from '../components/GetLoan'
+import GetLoanScreens from '../components/GetLoanScreens'
 
 export default function GetLoanPage() {
   return (
-    <GetLoan />
+    <GetLoanScreens />
   )
 }
diff --git a/src/services/siteServices.js b/src/services/siteServices.js
index 9ebfeb0..b79e38c 100644
--- a/src/services/siteServices.js
+++ b/src/services/siteServices.js
@@ -58,6 +58,14 @@ export const verifyPin = (reqData) => {
     return postAuxEnd('/salary/verifypin', postData, false)
 }
 
+// FUNCTION TO LOGIN USER IN
+export const verifyLoan = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/salary/verifloan', postData, false)
+}
+
 // FUNCTION TO RUN WHEN USER SELECTS A LOAN
 export const loanSelect = (reqData) => {
     let postData = {