diff --git a/constants.js b/constants.js
index a1e60ad0..155ca4f1 100644
--- a/constants.js
+++ b/constants.js
@@ -1,5 +1,6 @@
 const API_BASE_URL = 'https://api.realdevsquad.com';
-const REPO_SYNC_API_URL ='https://staging-sync.staging-realdevsquad-com.workers.dev';
+const REPO_SYNC_API_URL =
+  'https://staging-sync.staging-realdevsquad-com.workers.dev';
 const USER_MANAGEMENT_LINK = 'user-management-link';
 const EXTENSION_REQUESTS_LINK = 'extension-requests-link';
 const SYNC_USERS_STATUS = 'sync-users-status';
diff --git a/index.html b/index.html
index 671c90a3..56bd4fb3 100644
--- a/index.html
+++ b/index.html
@@ -45,15 +45,15 @@
 
       <div class="button-container element-display-remove" id="sync-repo-div">
         <button id="repo-sync-button" class="action-button">
-            <span class="spinner"></span>
-            Sync Repo
+          <span class="spinner"></span>
+          Sync Repo
         </button>
         <div class="status" id="sync-repo-status-update"></div>
-        <div id="toast" class="hidden">
-          <div class="progress-bar"></div>
-          <div class="message"></div>
-        </div>
       </div>
+
+      <div id="toast" class="hidden">
+        <div class="progress-bar"></div>
+        <div class="message"></div>
       </div>
     </section>
 
diff --git a/script.js b/script.js
index fe568f90..e7c72b7c 100644
--- a/script.js
+++ b/script.js
@@ -24,7 +24,7 @@ function getCurrentTimestamp() {
 
 export async function showSuperUserOptions(...privateBtns) {
   try {
-    const isSuperUser = true;//await checkUserIsSuperUser();
+    const isSuperUser = true; //await checkUserIsSuperUser();
     if (isSuperUser) {
       privateBtns.forEach((btn) =>
         btn.classList.remove('element-display-remove'),
@@ -43,8 +43,7 @@ export async function showSuperUserOptions(...privateBtns) {
         'Synced Data Not Available'
       }`;
       repoSyncStatusUpdate.textContent = `Last Sync: ${
-        localStorage.getItem('lastSyncRepo') ||
-        'Synced Data Not Available'
+        localStorage.getItem('lastSyncRepo') || 'Synced Data Not Available'
       }`;
     }
   } catch (err) {
@@ -70,7 +69,6 @@ if (params.get('dev') === 'true') {
   repoSyncDiv.classList.remove('element-display-remove');
 }
 
-
 function addClickEventListener(
   button,
   endpoint,
@@ -128,27 +126,25 @@ async function handleSync(
   }
 }
 
-
 function showToast(message, type) {
-  if(typeof message === String){
+  if (typeof message === String) {
     toast.innerHTML = `<div class="message">${message}</div>`;
   }
   toast.classList.remove('hidden');
 
-  
   if (type === 'success') {
-    for(let i=0;i<message.merge_status.length;i++){
-      if(message.merge_status[i].status.updated){
+    for (let i = 0; i < message.merge_status.length; i++) {
+      if (message.merge_status[i].status.updated) {
         let repo = message.merge_status[i].repository;
-        let text=repo.substring(repo.lastIndexOf('/')+1)+" synced";
+        let text = repo.substring(repo.lastIndexOf('/') + 1) + ' synced';
         toast.innerHTML = `<div class="message">${text}</div>`;
       }
     }
-      toast.classList.add('success');
-      toast.classList.remove('failure');
+    toast.classList.add('success');
+    toast.classList.remove('failure');
   } else if (type === 'failure') {
-      toast.classList.add('failure');
-      toast.classList.remove('success');
+    toast.classList.add('failure');
+    toast.classList.remove('success');
   }
 
   const progressBar = document.createElement('div');
@@ -157,36 +153,45 @@ function showToast(message, type) {
   toast.appendChild(progressBar);
 
   setTimeout(() => {
-      toast.classList.add('hidden');
-      toast.innerHTML = ''; // Clear any appended elements (progress bar)
+    toast.classList.add('hidden');
+    toast.innerHTML = ''; // Clear any appended elements (progress bar)
   }, 5000);
- 
 }
 
-const repoSyncHandler = async () => {
-  try{
-    const response = await fetch(REPO_SYNC_API_URL,
-      { mode: 'no-cors' });
+const repoSyncHandler = async (event) => {
+  const button = event.target;
+  const wrapper = button.parentElement;
+  const spinner = wrapper.querySelector('.spinner');
+  const status = wrapper.querySelector('.status');
+
+  button.disabled = true;
+  button.classList.add(DISABLED);
+  spinner.style.display = 'inline-block';
+  status.textContent = SYNC_IN_PROGRESS;
+
+  try {
+    const response = await fetch(REPO_SYNC_API_URL, { mode: 'no-cors' });
     console.log(response);
     if (response.ok) {
       repoSyncStatusUpdate.textContent = SYNC_SUCCESSFUL;
       showToast(response.body, 'success');
     } else {
-      console.log("hi");
       repoSyncStatusUpdate.textContent = SYNC_FAILED;
       showToast('API response not as expected', 'failure');
     }
-  }catch(err){
-    console.log("error");
-    console.error("Error while fetching repo sync data");
+  } catch (err) {
+    console.error('Error while fetching repo sync data');
     repoSyncStatusUpdate.textContent = SYNC_FAILED;
     showToast('Something unexpected happened!', 'failure');
+  } finally {
+    spinner.style.display = 'none';
+    button.classList.remove(DISABLED);
+    button.disabled = false;
   }
-}
+};
 
 repoSyncButton.addEventListener('click', repoSyncHandler);
 
-
 // Attach (button,API,cookie name,div element of status,HTTP method of API
 addClickEventListener(
   syncUsersStatusButton,
diff --git a/style.css b/style.css
index a1987440..2a5a5517 100644
--- a/style.css
+++ b/style.css
@@ -156,8 +156,6 @@ footer {
   margin-top: auto;
 }
 
-
-
 .action-button {
   color: var(--black-color);
   font-weight: 500;
@@ -252,7 +250,7 @@ footer {
 }
 
 .failure {
-  color: #F44336;
+  color: #f44336;
 }
 
 .hidden {
@@ -267,7 +265,7 @@ footer {
 }
 
 .success .progress-bar {
-  background-color: #4CAF50;
+  background-color: #4caf50;
 }
 
 .failure .progress-bar {
@@ -287,4 +285,4 @@ footer {
 
 .element-display-remove {
   display: none !important;
-}
\ No newline at end of file
+}