diff --git a/src/auth/Login.tsx b/src/auth/Login.tsx
index c9907c9..5b2c005 100644
--- a/src/auth/Login.tsx
+++ b/src/auth/Login.tsx
@@ -22,7 +22,7 @@ const Login = ({ setisLoggedIn }) => {
   const Login = async () => {
     setisLoading(true);
     console.log(email, password);
-    const url = "http://localhost:3000/api/auth/login";
+    const url = "http://localhost:3001/api/auth/login";
 
     const options = {
       headers: {
@@ -85,7 +85,7 @@ const Login = ({ setisLoggedIn }) => {
   const Register = async () => {
     setisLoading(true);
     console.log(email, password);
-    const url = "http://localhost:3000/api/auth/register";
+    const url = "http://localhost:3001/api/auth/register";
 
     const options = {
       headers: {
diff --git a/src/components/Form.tsx b/src/components/Form.tsx
index 72601cf..ac4f9e9 100644
--- a/src/components/Form.tsx
+++ b/src/components/Form.tsx
@@ -6,12 +6,18 @@ import JsonEditor from "./Editors";
 import { FaPaperPlane } from "react-icons/fa6";
 import { IoMdDownload } from "react-icons/io";
 import axios from "axios";
+import CircularProgress from "@mui/material/CircularProgress";
 
 interface FormProps {
   onSubmit: (data: any) => void;
 }
 
-const Form: React.FC<FormProps> = ({ onSubmit, content, setisRefresh }) => {
+const Form: React.FC<FormProps> = ({
+  onSubmit,
+  content,
+  setisRefresh,
+  isLoading,
+}) => {
   const [method, setMethod] = useState(content?.method ?? "GET");
   const [url, setUrl] = useState(content?.endpoint ?? "");
   const [isSaved, setisSaved] = useState(false);
@@ -21,7 +27,9 @@ const Form: React.FC<FormProps> = ({ onSubmit, content, setisRefresh }) => {
   const [headers, setHeaders] = useState(
     content?.header ?? [{ key: "", value: "" }]
   );
-  const [formData, setformData] = useState(content?.form_data ?? [{ key: "", value: "" }]);
+  const [formData, setformData] = useState(
+    content?.form_data ?? [{ key: "", value: "" }]
+  );
   const [jsonBody, setJsonBody] = useState(content ?? {});
   const [activeTab, setActiveTab] = useState("query-params");
 
@@ -69,18 +77,18 @@ const Form: React.FC<FormProps> = ({ onSubmit, content, setisRefresh }) => {
   // };
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-  
+
     // Reduce query parameters and headers to objects
     const params = queryParams.reduce((acc, { key, value }) => {
       if (key) acc[key] = value;
       return acc;
     }, {} as Record<string, string>);
-  
+
     const headerObj = headers.reduce((acc, { key, value }) => {
       if (key) acc[key] = value;
       return acc;
     }, {} as Record<string, string>);
-  
+
     // If formData is not empty, convert it to FormData
     let data: Record<string, any> | FormData;
     if (formData.length > 0) {
@@ -97,7 +105,7 @@ const Form: React.FC<FormProps> = ({ onSubmit, content, setisRefresh }) => {
     } else {
       data = jsonBody; // If formData is empty, use jsonBody
     }
-  
+
     // Call onSubmit with the appropriate data
     onSubmit({
       method,
@@ -107,7 +115,6 @@ const Form: React.FC<FormProps> = ({ onSubmit, content, setisRefresh }) => {
       data,
     });
   };
-  
 
   const handleRequestEditorChange = (value: string) => {
     setJsonBody(value);
@@ -127,7 +134,7 @@ const Form: React.FC<FormProps> = ({ onSubmit, content, setisRefresh }) => {
         params: queryParams,
       };
       const response1 = await axios.patch(
-        `http://localhost:3000/api/endpoints/update/${content?._id}`,
+        `http://localhost:3001/api/endpoints/update/${content?._id}`,
         body1,
         {
           headers: {
@@ -179,7 +186,16 @@ const Form: React.FC<FormProps> = ({ onSubmit, content, setisRefresh }) => {
           type="submit"
           className="btn btn-primary border-solid border-[blue] text-[blue] rounded-lg flex justify-center items-center hover:bg-[#abf9ff]"
         >
-          <h1 className="mr-2">Send</h1>
+          {isLoading ? (
+            <div className="m-0 text-blue-500">
+              {/* <CircularProgress color="inherit" size={25} /> */}
+            <h1 className="mr-2">Sending</h1>
+
+            </div>
+          ) : (
+            <h1 className="mr-2">Send</h1>
+          )}
+
           <FaPaperPlane />
         </button>
         {content?._id ? (
diff --git a/src/components/FormGroup.tsx b/src/components/FormGroup.tsx
index 8bde203..9f6edc7 100644
--- a/src/components/FormGroup.tsx
+++ b/src/components/FormGroup.tsx
@@ -57,7 +57,7 @@ const FormGroup: React.FC = () => {
     setIsDialogOpen1(false);
   };
   const getCollections = () => {
-    fetch("http://localhost:3000/api/collections/")
+    fetch("http://localhost:3001/api/collections/")
       .then((res) => res.json())
       .then((data) => {
         console.log(data);
@@ -89,7 +89,7 @@ const FormGroup: React.FC = () => {
     };
     try {
       const response = await axios.post(
-        "http://localhost:3000/api/collections/create",
+        "http://localhost:3001/api/collections/create",
         body,
         {
           headers: {
@@ -114,7 +114,7 @@ const FormGroup: React.FC = () => {
   const deleteCollection = async (collectionId) => {
     try {
       const response = await axios.delete(
-        "http://localhost:3000/api/collections/" + collectionId + "/delete",
+        "http://localhost:3001/api/collections/" + collectionId + "/delete",
 
         {
           headers: {
@@ -137,7 +137,7 @@ const FormGroup: React.FC = () => {
   const deleteEndpoint = async (endpointId) => {
     try {
       const response = await axios.delete(
-        "http://localhost:3000/api/endpoints/" + endpointId + "/delete",
+        "http://localhost:3001/api/endpoints/" + endpointId + "/delete",
 
         {
           headers: {
@@ -167,7 +167,7 @@ const FormGroup: React.FC = () => {
     try {
       // Attempt to create the endpoint
       const response = await axios.post(
-        "http://localhost:3000/api/endpoints/create",
+        "http://localhost:3001/api/endpoints/create",
         body,
         {
           headers: {
@@ -182,7 +182,7 @@ const FormGroup: React.FC = () => {
           endpoint_id: response.data._id,
         };
         const response1 = await axios.patch(
-          `http://localhost:3000/api/collections/update/${collectionId}/endpoint`,
+          `http://localhost:3001/api/collections/update/${collectionId}/endpoint`,
           body1,
           {
             headers: {
@@ -212,7 +212,7 @@ const FormGroup: React.FC = () => {
         name: newCollectionName !== "" ? newCollectionName : name,
       };
       const response1 = await axios.patch(
-        `http://localhost:3000/api/collections/update/${id}`,
+        `http://localhost:3001/api/collections/update/${id}`,
         body1,
         {
           headers: {
@@ -238,7 +238,7 @@ const FormGroup: React.FC = () => {
         name: newEndpointName !== "" ? newEndpointName : name,
       };
       const response1 = await axios.patch(
-        `http://localhost:3000/api/endpoints/update/${id}`,
+        `http://localhost:3001/api/endpoints/update/${id}`,
         body1,
         {
           headers: {
diff --git a/src/components/FormSingle.tsx b/src/components/FormSingle.tsx
index 663d048..1f6575b 100644
--- a/src/components/FormSingle.tsx
+++ b/src/components/FormSingle.tsx
@@ -11,8 +11,10 @@ const FormSingle: React.FC = ({ content, setisRefresh }) => {
   const [responseSize, setResponseSize] = useState("");
   const [error, setError] = useState(null);
   const [savedId, setsavedId] = useState(null);
+  const [isLoading, setisLoading] = useState(false)
 
   const handleFormSubmit = async (data: any) => {
+    setisLoading(true)
     try {
       const startTime = new Date().getTime();
       const res = await axios(data);
@@ -24,9 +26,11 @@ const FormSingle: React.FC = ({ content, setisRefresh }) => {
           JSON.stringify(res.data).length + JSON.stringify(res.headers).length
         )
       );
+      setisLoading(false);
       setError(null); // Reset error if the request is successful
     } catch (error) {
       setError(error);
+      setisLoading(false)
       setResponse(null); // Clear the response if there is an error
       console.error(error);
     }
@@ -46,6 +50,7 @@ const FormSingle: React.FC = ({ content, setisRefresh }) => {
           setisRefresh={setisRefresh}
           content={content}
           onSubmit={handleFormSubmit}
+          isLoading={isLoading}
         />
         {response && (
           <Response
diff --git a/src/components/KeyValuePair2.tsx b/src/components/KeyValuePair2.tsx
index 70a6f7c..c9f535a 100644
--- a/src/components/KeyValuePair2.tsx
+++ b/src/components/KeyValuePair2.tsx
@@ -121,14 +121,17 @@ const KeyValuePair: React.FC<KeyValuePairProps> = ({
           {Array.isArray(pair.value) && pair.value.length > 0 && (
             <div className="flex flex-wrap ml-2">
               {pair.value.map((file, idx) => (
-                <div key={idx} className="flex items-center mb-1 border-[#eee] border px-1 rounded-md ">
+                <div
+                  key={idx}
+                  className="flex items-center mb-1 border-[#eee] border px-1 rounded-md "
+                >
                   <span className="mr-2 text-[13px]">{file.name}</span>
                   <button
                     type="button"
                     className="btn btn-outline-danger text-red-400 border-none shadow-none p-1 "
                     onClick={() => handleRemoveFile(file)}
                   >
-                    <FaXmark/>
+                    <FaXmark />
                   </button>
                 </div>
               ))}