diff --git a/src/components/HomeCom.jsx b/src/components/HomeCom.jsx
index 39fe5d1..2261372 100644
--- a/src/components/HomeCom.jsx
+++ b/src/components/HomeCom.jsx
@@ -5,6 +5,8 @@ import { useNavigate } from 'react-router-dom'
 import { CiPhone } from "react-icons/ci"
 import { CiBank } from "react-icons/ci";
 import { MdOutlineEmail } from "react-icons/md"
+import { FaMapPin } from "react-icons/fa";
+
 import { demoUsersList } from "../services/siteServices"
 import queryKeys from "../services/queryKeys"
 import myLinks from "../myLinks";
@@ -28,7 +30,7 @@ export default function HomeCom() {
   return (
     <div className={`h-screen bg-sky-300 flex flex-col items-center justify-center bg-[url('./assets/first-background.jpg')] bg-cover bg-center bg-no-repeat`}>
       <div className="w-full h-screen flex flex-col gap-2 overflow-y-auto text-black p-5 sm:p-[40px]">
-        <div className="py-4 text-3xl text-black font-bold">Users</div>
+        <div className="py-3 text-3xl text-black font-bold">Users</div>
         {isFetching ? 
               <>
                   <div className="w-full py-4">
@@ -44,31 +46,37 @@ export default function HomeCom() {
               {({ data }) => (
               <div className="grid gap-5 sm:gap-[40px] grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                 {data.map((user, index) => {
-                  let color = user.place == 'Friends' ? 'text-emerald-500 bg-emerald-100/90' : user.place == 'Office' ? 'text-blue-500 bg-blue-100/90' : 'text-orange-500 bg-orange-100/90'
-                  return (
-                    <div onClick={()=>getLoanPage(user)} key={user?.uid || index} className="w-full rounded p-3 sm:p-5 bg-white shadow flex flex-col gap-5 hover:scale-105 hover:cursor-pointer">
+                let hasSalaryAcct = user.salary_account === 0 ? false : true                  
+                return (
+                    <div onClick={()=>getLoanPage(user)} key={user?.uid || index} className={`${hasSalaryAcct ? 'bg-white' : 'bg-red-50'} w-full rounded p-3 sm:p-5 shadow flex flex-col gap-5 hover:scale-105 hover:cursor-pointer`}>
                       <div className="mb-5 card-title w-[70%] mx-auto">
                         <h1 className="mb-[1px] text-2xl font-bold">{user.name}</h1>
                         {/* <span className={` ${color} text-sm font-bold p-1 rounded`}>{user.place}</span> */}
                       </div>
                       <div className="card-body flex flex-col gap-2">
-                        <div className="contact text-slate-700 flex gap-3 items-center">
-                          <span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
+                        <div className="contact text-slate-700 flex gap-2 items-center">
+                          <span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
                             <CiBank />
                           </span>
                           <span>{user.bvn}</span>
                         </div>
                         <div className="contact text-slate-700 flex gap-3 items-center">
-                          <span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
+                          <span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
                             <CiPhone />
                           </span>
                           <span>{user.mobile}</span>
                         </div>
                         <div className="contact text-slate-700 flex gap-3 items-center">
-                          <span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
+                          <span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
                             <MdOutlineEmail />
                           </span>
-                          <span>{user.email}</span>
+                          <span className="break-words">{user.email}</span>
+                        </div>
+                        <div className="contact text-slate-700 flex gap-3 items-center">
+                          <span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
+                            <FaMapPin />
+                          </span>
+                          <span>{user.pin}</span>
                         </div>
                       </div>
                     </div>
diff --git a/src/components/loan_screen/Offers.jsx b/src/components/loan_screen/Offers.jsx
index feebd28..73b7ef1 100644
--- a/src/components/loan_screen/Offers.jsx
+++ b/src/components/loan_screen/Offers.jsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { useQuery } from "@tanstack/react-query";
-import { TiArrowSortedDown } from "react-icons/ti";
+import { IoIosArrowForward } from "react-icons/io";
 
 import { getOffers } from '../../services/siteServices'
 import queryKeys from '../../services/queryKeys'
@@ -8,10 +8,6 @@ import Label from '../Label';
 
 export default function Offers({step, handleStep, screens}) {
 
-    const [isEmpty, setIsEmpty] = useState('')
-
-    const [selectedOffer, setSelectedOffer] = useState('')
-
     const {data, isFetching, isError, error} = useQuery({
         queryKey: queryKeys.offers,
         queryFn: () => getOffers()
@@ -19,25 +15,13 @@ export default function Offers({step, handleStep, screens}) {
   
     const offers = data?.data?.product_data?.offers // OFFERS LIST
 
-    const handleContinue = () => {
-        if(!selectedOffer){
-            setIsEmpty('*')
-            return setTimeout(()=>{
-                setIsEmpty('')
-            }, 5000)
-        }
-        handleStep({selectedOffer, ...step.details}, screens.selected_offer)
-    }
-
-    const handleChange = ({target:{value}}) => {
-        setIsEmpty('')
-        setSelectedOffer(value)
+    const handleContinue = ({target:{value}}) => {
+        handleStep({selectedOffer:value, ...step.details}, screens.selected_offer)
     }
 
     return (
         <div className='mt-3 flex flex-col gap-4'>
             <div className='text-input font-semibold w-[70%] mx-auto flex flex-col gap-4 justify-center items-center'>
-                <Label name='Select offer type' htmlfor='pin' error={isEmpty} />
                 {isFetching ? 
                     <>
                         <div className="w-full py-4">
@@ -49,24 +33,41 @@ export default function Offers({step, handleStep, screens}) {
                       <p className='text-red-500 text-center'>{error.message}</p>
                     </div>
                     :
-                    <div className='relative w-full h-12'>
-                        <TiArrowSortedDown className='text-sm absolute right-1 top-1/2 -translate-y-1/2' />
-                        <select className='px-2 w-full h-full appearance-none rounded' value={selectedOffer} onChange={handleChange}>
-                            <option value={''}>Select offer</option>
-                            {offers.map(item => {
-                                if(item.active){
-                                        return (
-                                            <option key={item.cid} value={item.description}>{item.description}</option>
-                                        )
-                                    }
-                                }
-                            )}
-                        </select>
-                    </div>
+                    // <div className='relative w-full h-12'>
+                    //     <TiArrowSortedDown className='text-sm absolute right-1 top-1/2 -translate-y-1/2' />
+                    //     <select className='px-2 w-full h-full appearance-none rounded' value={selectedOffer} onChange={handleChange}>
+                    //         <option value={''}>Select offer</option>
+                    //         {offers.map(item => {
+                    //             if(item.active){
+                    //                     return (
+                    //                         <option key={item.cid} value={item.description}>{item.description}</option>
+                    //                     )
+                    //                 }
+                    //             }
+                    //         )}
+                    //     </select>
+                    // </div>
+                    <>
+                    {offers.map(item => {
+                        let isDisabled = item.active == '0' ? true : false
+                        return (
+                            <button 
+                            key={item?.cid} 
+                            disabled={isDisabled}
+                            value={item.description} 
+                            onClick={handleContinue}
+                            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>{item?.description}</span>
+                            <IoIosArrowForward />
+                            </button>
+                        )
+                    })}
+                    </>
                 }
                 <>
                 </>
-                <button onClick={handleContinue} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>Continue</button>
+                {/* <button onClick={handleContinue} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>Continue</button> */}
             </div>
         </div>
     )