diff --git a/src/components/DataSync.svelte b/src/components/DataSync.svelte
index b85771b5..8fb3c0e3 100644
--- a/src/components/DataSync.svelte
+++ b/src/components/DataSync.svelte
@@ -3,7 +3,7 @@
 
   import dayjs from 'dayjs';
   import { onMount, getContext, setContext } from 'svelte';
-  import { driveSignedIn, driveLoading, saveId, synced } from '../stores/dataSync';
+  import { driveSignedIn, driveError, driveLoading, saveId, synced } from '../stores/dataSync';
   import { getLocalSaveJson, updateSave, updateTime, UPDATE_TIME_KEY } from '../stores/saveManager';
 
   import SyncConflictModal from '../components/SyncConflictModal.svelte';
@@ -31,10 +31,19 @@
     synced.set(false);
     const script = document.createElement('script');
     script.onload = handleClientLoad;
+    script.onerror = handleError;
     script.src = 'https://apis.google.com/js/api.js';
     document.body.appendChild(script);
   }
 
+  function handleError() {
+    console.log('error loading google drive api');
+    driveSignedIn.set(false);
+    driveLoading.set(false);
+    driveError.set(true);
+    synced.set(true);
+  }
+
   function handleClientLoad() {
     gapi.load('client:auth2', initClient);
   }
@@ -212,6 +221,10 @@
         },
         function (error) {
           console.error(error);
+          driveSignedIn.set(false);
+          driveLoading.set(false);
+          driveError.set(true);
+          synced.set(true);
         },
       );
   }
diff --git a/src/routes/settings.svelte b/src/routes/settings.svelte
index e6d4a95d..faacfc49 100644
--- a/src/routes/settings.svelte
+++ b/src/routes/settings.svelte
@@ -6,7 +6,7 @@
   import Icon from '../components/Icon.svelte';
   import Select from '../components/Select.svelte';
 
-  import { driveSignedIn, driveLoading, synced, localModified, lastSyncTime } from '../stores/dataSync';
+  import { driveSignedIn, driveError, driveLoading, synced, localModified, lastSyncTime } from '../stores/dataSync';
   import { server } from '../stores/server';
 
   const servers = [
@@ -63,6 +63,11 @@
     <p class="text-white mb-4">Paimon.moe can only read and write file that this site create.</p>
     {#if $driveLoading}
       <Icon path={mdiLoading} color="white" spin />
+    {:else if $driveError}
+      <Button color="red">
+        <Icon path={mdiGoogleDrive} className="mr-2" />
+        Google Drive API cannot be loaded
+      </Button>
     {:else if !$driveSignedIn}
       <Button on:click={signIn}>
         <Icon path={mdiGoogleDrive} className="mr-2" />
diff --git a/src/stores/dataSync.js b/src/stores/dataSync.js
index af2c7808..54ffa6a1 100644
--- a/src/stores/dataSync.js
+++ b/src/stores/dataSync.js
@@ -2,6 +2,7 @@ import { writable } from 'svelte/store';
 
 export const driveSignedIn = writable(false);
 export const driveLoading = writable(true);
+export const driveError = writable(false);
 export const lastSyncTime = writable(null);
 export const localModified = writable(false);
 export const synced = writable(false);