diff --git a/src/components/Partials/Header.jsx b/src/components/Partials/Header.jsx
index 24b26c1..11a586b 100644
--- a/src/components/Partials/Header.jsx
+++ b/src/components/Partials/Header.jsx
@@ -100,7 +100,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
 
   // User Profile
   let { firstname, lastname, email, profile_pic } = userDetails;
-  let userEmail = email.split("@")[0];
+  let userEmail = email?.split("@")[0];
 
   return (
     <>
diff --git a/src/components/jobPopout/PendingJobsPopout.jsx b/src/components/jobPopout/PendingJobsPopout.jsx
index a4f2681..5ec9a29 100644
--- a/src/components/jobPopout/PendingJobsPopout.jsx
+++ b/src/components/jobPopout/PendingJobsPopout.jsx
@@ -2,37 +2,39 @@ import React, { useMemo, useState } from "react";
 import Detail from "./popoutcomponent/Detail";
 import ModalCom from "../Helpers/ModalCom";
 import usersService from "../../services/UsersService";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 function PendingJobsPopout({ details, onClose, situation }) {
-  const [pendingJobLoader, setPendingJobLoader] = useState(false)
+  const [pendingJobLoader, setPendingJobLoader] = useState({
+    extend: false,
+    offer: false,
+  });
   const apiCall = useMemo(() => new usersService(), []);
-  
+
   const handlePendingJobsBtn = async ({ target: { name } }) => {
-    setPendingJobLoader(true)
     let { job_uid, offer_code } = details;
 
-    let reqData;
-
     let pendingData = { job_uid, offer_code };
+    let reqData = { ...pendingData };
 
     if (name === "extend") {
       try {
-        reqData = { ...pendingData };
+        setPendingJobLoader({ extend: true });
         let { data } = await apiCall.pendingJobExtend(reqData);
         console.log("This is for extend", data);
-        setPendingJobLoader(false)
+        setPendingJobLoader({ extend: false });
       } catch (error) {
-        setPendingJobLoader(false)
+        setPendingJobLoader({ extend: false });
         throw new Error(error);
       }
     } else if (name === "offer") {
       try {
-        reqData = { ...pendingData };
+        setPendingJobLoader({ offer: true });
         let { data } = await apiCall.pendingJobSendTome(reqData);
         console.log("This is for offer", data);
-        setPendingJobLoader(false)
+        setPendingJobLoader({ offer: false });
       } catch (error) {
-        setPendingJobLoader(false)
+        setPendingJobLoader({ offer: false });
         throw new Error(error);
       }
     } else return;
@@ -159,7 +161,13 @@ function PendingJobsPopout({ details, onClose, situation }) {
                 onClick={handlePendingJobsBtn}
                 name="extend"
               >
-                Extend by a week
+                {pendingJobLoader.extend ? (
+                  <div className="min-w-[130px] w-full h-full place-items-center">
+                    <LoadingSpinner size={6} color="sky-blue" />
+                  </div>
+                ) : (
+                  "Extend by a week"
+                )}
               </button>
             </div>
 
@@ -169,10 +177,15 @@ function PendingJobsPopout({ details, onClose, situation }) {
                 onClick={handlePendingJobsBtn}
                 name="offer"
               >
-                Send to me
+                {pendingJobLoader.offer ? (
+                  <div className="min-w-[130px] w-full h-full">
+                    <LoadingSpinner size={6} color="sky-blue" />
+                  </div>
+                ) : (
+                  "Send to me"
+                )}
               </button>
             </div>
-
             <div className="mt-10 md:mt-32 md:flex md:justify-center">
               <button
                 className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"