diff --git a/components/UI/Button/Button.js b/components/UI/Button/Button.js
index 64151cf8..1cace2fd 100644
--- a/components/UI/Button/Button.js
+++ b/components/UI/Button/Button.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./Button.module.css";
 
 function Button({
@@ -8,9 +8,12 @@ function Button({
   className,
   type = "button",
   onClick,
+  loading=false
 }) {
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(loading);
   let variantClass = `btn${variant.charAt(0).toUpperCase()}${variant.slice(1)}`;
+
+  useEffect(()=>{setIsLoading(loading)}, [loading])
   return isLoading ? (
     <div className="tw-flex tw-justify-center tw-items-center">
       <img
diff --git a/components/basic/ComingSoon.js b/components/basic/ComingSoon.js
index 5073246c..64f2523f 100644
--- a/components/basic/ComingSoon.js
+++ b/components/basic/ComingSoon.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import axios from "axios";
 import { RiFacebookFill, RiTwitterFill, RiLinkedinFill } from "react-icons/ri";
@@ -17,6 +17,8 @@ const ComingSoon = () => {
   const [email, setEmail] = useState("");
   const [subscriptionSuccess, setSubscriptionSuccess] = useState(false);
 
+  useEffect(()=>{}, [isLoading]);
+
   const handleSubmit = (e) => {
     e.preventDefault();
     setIsLoading(true);
@@ -58,6 +60,7 @@ const ComingSoon = () => {
           LeftIcon={MdKeyboardArrowLeft}
           text="back"
           className="tw-flex tw-items-center"
+          loading={true}
         />
 
         {/* header and form section */}
@@ -97,6 +100,7 @@ const ComingSoon = () => {
                   type="submit"
                   onClick={handleSubmit}
                   className="tw-w-full tw-mt-4 sm:tw-mt-0 sm:tw-w-fit"
+                  loading={isLoading}
                 />
               )}
             </form>
diff --git a/components/layout/Footer.js b/components/layout/Footer.js
index a7be358a..a028afd0 100644
--- a/components/layout/Footer.js
+++ b/components/layout/Footer.js
@@ -13,25 +13,29 @@ import FooterColumn from "./FooterColumn";
 import { FaCheckCircle } from "react-icons/fa";
 
 function Footer() {
+  
+  const [email, setEmail] = useState("");
+  const [subscriptionSuccess, setSubscriptionSuccess] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const currentYear = new Date().getFullYear();
+
   const handleSubmit = (e) => {
     e.preventDefault();
-
+    setIsLoading(true);
     axios
       .post(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/newsletter/subscribe`, {
         email,
       })
       .then((response) => {
-        console.log(response.data);
+        setIsLoading(false);
         setSubscriptionSuccess(true);
       })
       .catch((error) => {
+        setIsLoading(false);
         console.error(error);
       });
   };
 
-  const [email, setEmail] = useState("");
-  const [subscriptionSuccess, setSubscriptionSuccess] = useState(false);
-  const currentYear = new Date().getFullYear();
   return (
     <footer className="tw-font-sans tw-bg-base-100 tw-px-5">
       <div className="tw-w-full tw-max-w-7xl tw-py-16 tw-mx-auto">
@@ -124,6 +128,7 @@ function Footer() {
                   type="submit"
                   onClick={handleSubmit}
                   className="tw-w-full md:tw-w-max"
+                  loading={isLoading}
                 />
               </form>
             )}
diff --git a/components/mentorDashboard/ListedSessionComponent/AddForm.js b/components/mentorDashboard/ListedSessionComponent/AddForm.js
index 31efd3b1..d4767e06 100644
--- a/components/mentorDashboard/ListedSessionComponent/AddForm.js
+++ b/components/mentorDashboard/ListedSessionComponent/AddForm.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import axios from "axios";
 import { toast } from "react-toastify";
 import { Button } from "../../UI";
@@ -11,16 +11,17 @@ const AddSessionComponent = ({ setSessions, setAddSession }) => {
     duration: "",
     price: "",
   };
+  const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState(initialData);
 
   // on submit funxtion for add form
   const handleSubmit = async (e) => {
     e.preventDefault();
     try {
+      setIsLoading(true);
       const url = `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/mentors/addListedSession`;
       const response = await axios.put(url, data, { withCredentials: true });
-
-      if (!response.data.session) {
+      if (!response.data.sessions) {
         // Handle null session here
         toast.error("Session creation failed. Please check your input.");
       } else {
@@ -28,7 +29,9 @@ const AddSessionComponent = ({ setSessions, setAddSession }) => {
         setAddSession(false);
         toast.success("New Session added successfully.");
       }
+      setIsLoading(false);
     } catch (error) {
+      setIsLoading(false);
       if (
         error.response &&
         error.response.status >= 400 &&
@@ -50,6 +53,8 @@ const AddSessionComponent = ({ setSessions, setAddSession }) => {
     }));
   };
 
+  useEffect(()=>{}, [isLoading])
+
   return (
     <>
       <div className="tw-flex tw-justify-center tw-items-center tw-pb-[5rem] tw-flex-wrap max-[512px]:tw-p-0 max-[512px]:tw-m-0">
@@ -193,7 +198,7 @@ const AddSessionComponent = ({ setSessions, setAddSession }) => {
                 }}
               />
 
-              <Button text="Add Session" type="submit" onClick={handleSubmit} />
+              <Button text="Add Session" type="submit" onClick={handleSubmit} loading={isLoading}/>
             </form>
           </div>
         </div>
diff --git a/components/mentorDashboard/ListedSessionComponent/EditForm.js b/components/mentorDashboard/ListedSessionComponent/EditForm.js
index 1f1f8f75..530f6418 100644
--- a/components/mentorDashboard/ListedSessionComponent/EditForm.js
+++ b/components/mentorDashboard/ListedSessionComponent/EditForm.js
@@ -8,7 +8,7 @@ const EditSessionComponent = ({ sessionID, setSessionID, setSessions }) => {
   const [data, setData] = useState(null);
   const mentorData = JSON.parse(localStorage.getItem("mentorData"));
   const username = mentorData?.mentor_username;
-
+  const [isLoading, setIsLoading] = useState(false);
   // fetching session on load
   useEffect(() => {
     // Fetch session data only if data hasn't been fetched yet
@@ -31,12 +31,15 @@ const EditSessionComponent = ({ sessionID, setSessionID, setSessions }) => {
   const handleSubmit = async (e) => {
     e.preventDefault();
     try {
+      setIsLoading(true);
       const url = `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/mentors/updateListedSession`;
       const response = await axios.put(url, data, { withCredentials: true });
       setSessions(response.data.updatedSessions);
       setSessionID(null);
+      setIsLoading(false);
       toast.success("Changes saved successfully.");
     } catch (error) {
+      setIsLoading(false);
       if (
         error.response &&
         error.response.status >= 400 &&
@@ -206,6 +209,7 @@ const EditSessionComponent = ({ sessionID, setSessionID, setSessions }) => {
                   text="Save Changes"
                   type="submit"
                   onClick={handleSubmit}
+                  loading={isLoading}
                 />
               </form>
             </div>
diff --git a/components/mentorDashboard/home.js b/components/mentorDashboard/home.js
index df0bb5e7..7a2111fc 100644
--- a/components/mentorDashboard/home.js
+++ b/components/mentorDashboard/home.js
@@ -275,7 +275,7 @@ const Home = ({
                     )}
                     {card.session && (
                       <div className="tw-flex tw-flex-col tw-gap-2 tw-items-center tw-justify-center">
-                        {card.session.length > 0 ? (
+                        {card?.session?.type ? (
                           <div>
                             <h2 className="tw-font-semibold tw-text-md">
                               Title:{" "}
@@ -283,7 +283,7 @@ const Home = ({
                                 {card.session.title}
                               </span>
                             </h2>
-                            <div className="tw-flex tw-flex-col tw-items-center tw-gap-1">
+                            <div className="tw-flex tw-flex-col tw-items-start pl-4 tw-gap-1">
                               <p className="tw-text-sm tw-font-semibold tw-text-primary-200">
                                 {card.session.type}
                               </p>