diff --git a/client/app/create/page.tsx b/client/app/create/page.tsx
index d8f62da..2fa06d4 100644
--- a/client/app/create/page.tsx
+++ b/client/app/create/page.tsx
@@ -13,9 +13,11 @@ import { sepolia } from "viem/chains";
 import { ArrowPathIcon , PlusIcon, TrashIcon} from "@heroicons/react/24/solid";
 import { useRouter } from "next/navigation";
 import ElectionInfoPopup from "../components/Modal/ElectionInfoPopup";
+import {Loader} from "rsuite";
 
 const CreatePage: React.FC = () => {
   const router = useRouter();
+  const [isLoading,setIsLoading] = useState<boolean>(false);
   const [selectedBallot, setSelectedBallot] = useState<number>(1);
   const { switchChain } = useSwitchChain();
   const { chain } = useAccount();
@@ -79,6 +81,7 @@ const CreatePage: React.FC = () => {
     }
   // passed candidates to the create election function 
     try {
+    setIsLoading(true);
       await writeContractAsync({
         address: ELECTION_FACTORY_ADDRESS,
         abi: ElectionFactory,
@@ -96,6 +99,9 @@ const CreatePage: React.FC = () => {
       console.error("Error creating election:", error);
       toast.error(ErrorMessage(error));
     }
+    finally{
+      setIsLoading(false);
+    }
   };
 
   const handleBallotChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
@@ -225,11 +231,15 @@ const CreatePage: React.FC = () => {
           </div>
           <motion.button
             type="submit"
-            className="w-full py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-            whileHover={{ scale: 1.02 }}
+            disabled={isLoading}
+className={`w-full py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white 
+    ${isLoading 
+      ? "bg-indigo-400 cursor-not-allowed opacity-70" 
+      : "bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700" 
+    } focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`}            whileHover={{ scale: 1.02 }}
             whileTap={{ scale: 0.98 }}
           >
-            Create Election
+            {isLoading ? <Loader/>: "Create Election"}
           </motion.button>
         </form>
       </motion.div>