diff --git a/.env.example b/.env.example
new file mode 100644
index 00000000..ba3bd8e6
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,2 @@
+GOOGLE_DRIVE_CLIENT_ID=
+GOOGLE_DRIVE_API_KEY=
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index f220e375..1ab4bed0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@
 /src/node_modules/@sapper/
 yarn-error.log
 /__sapper__/
+.env
\ No newline at end of file
diff --git a/package.json b/package.json
index adb7f147..29df3f53 100644
--- a/package.json
+++ b/package.json
@@ -24,9 +24,10 @@
     "@rollup/plugin-commonjs": "^14.0.0",
     "@rollup/plugin-dynamic-import-vars": "^1.1.0",
     "@rollup/plugin-node-resolve": "^8.0.0",
-    "@rollup/plugin-replace": "^2.2.0",
+    "@rollup/plugin-replace": "^2.3.4",
     "@rollup/plugin-url": "^5.0.0",
     "autoprefixer": "^10.0.1",
+    "dotenv": "^8.2.0",
     "postcss": "^8.1.2",
     "postcss-load-config": "^3.0.0",
     "postcss-nested": "^5.0.1",
diff --git a/rollup.config.js b/rollup.config.js
index 7d340904..ea82f368 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -7,6 +7,8 @@ import svelte from 'rollup-plugin-svelte';
 import babel from '@rollup/plugin-babel';
 import { terser } from 'rollup-plugin-terser';
 import config from 'sapper/config/rollup.js';
+import { config as envConfig } from 'dotenv';
+
 import pkg from './package.json';
 
 const mode = process.env.NODE_ENV;
@@ -27,6 +29,9 @@ export default {
       replace({
         'process.browser': true,
         'process.env.NODE_ENV': JSON.stringify(mode),
+        __paimon: JSON.stringify({
+          env: envConfig().parsed,
+        }),
       }),
       svelte({
         dev,
@@ -85,6 +90,9 @@ export default {
       replace({
         'process.browser': false,
         'process.env.NODE_ENV': JSON.stringify(mode),
+        __paimon: JSON.stringify({
+          env: envConfig().parsed,
+        }),
       }),
       svelte({
         generate: 'ssr',
diff --git a/src/components/DataSync.svelte b/src/components/DataSync.svelte
new file mode 100644
index 00000000..0c59db10
--- /dev/null
+++ b/src/components/DataSync.svelte
@@ -0,0 +1,96 @@
+<script>
+  import { onMount } from 'svelte';
+  import { driveSignedIn, driveLoading } from '../stores/dataSync';
+
+  const CLIENT_ID = __paimon.env.GOOGLE_DRIVE_CLIENT_ID;
+  const API_KEY = __paimon.env.GOOGLE_DRIVE_API_KEY;
+  const DISCOVERY_DOCS = ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'];
+  const SCOPES = 'https://www.googleapis.com/auth/drive.appdata';
+
+  onMount(() => {
+    const script = document.createElement('script');
+    script.onload = handleClientLoad;
+    script.src = 'https://apis.google.com/js/api.js';
+    document.body.appendChild(script);
+  });
+
+  function handleClientLoad() {
+    gapi.load('client:auth2', initClient);
+  }
+
+  function updateSigninStatus(status) {
+    console.log('DRIVE signed in:', status);
+    driveSignedIn.set(status);
+    driveLoading.set(false);
+
+    if (status) {
+      getFiles();
+    }
+  }
+
+  async function getFiles() {
+    try {
+      const { result } = await gapi.client.drive.files.list({
+        spaces: 'appDataFolder',
+        q: "name = 'save.json'",
+      });
+      console.log(result);
+
+      if (result.files.length === 0) {
+        createFile();
+      } else {
+        const data = await gapi.client.drive.files.get({
+          fileId: result.files[0].id,
+          alt: 'media',
+        });
+        console.log(data);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  async function createFile() {
+    try {
+      const { result } = await gapi.client.drive.files.create({
+        resource: {
+          name: 'save.json',
+          parents: ['appDataFolder'],
+        },
+        fields: 'id',
+      });
+
+      const data = await gapi.client.request({
+        path: `/upload/drive/v3/files/${result.id}`,
+        method: 'PATCH',
+        params: {
+          uploadType: 'media',
+        },
+        body: JSON.stringify({ v: __paimon.env.CURRENT_VERSION }),
+      });
+
+      console.log(data);
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  function initClient() {
+    gapi.client
+      .init({
+        apiKey: API_KEY,
+        clientId: CLIENT_ID,
+        discoveryDocs: DISCOVERY_DOCS,
+        scope: SCOPES,
+      })
+      .then(
+        function () {
+          gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
+          updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
+        },
+        function (error) {
+          console.error(error);
+        },
+      );
+  }
+</script>
diff --git a/src/components/Sidebar/Sidebar.svelte b/src/components/Sidebar/Sidebar.svelte
index baf4f94d..90338b66 100644
--- a/src/components/Sidebar/Sidebar.svelte
+++ b/src/components/Sidebar/Sidebar.svelte
@@ -62,4 +62,10 @@
     image="/images/calculator.png"
     label="Calculator"
     href="/calculator" />
+  <SidebarItem
+    on:clicked={close}
+    active={segment === 'settings'}
+    image="/images/settings.png"
+    label="Settings"
+    href="/settings" />
 </div>
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 9af4afae..b9a295dc 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -2,6 +2,7 @@
   import Tailwind from '../components/Tailwindcss.svelte';
   import Sidebar from '../components/Sidebar/Sidebar.svelte';
   import Header from '../components/Header.svelte';
+  import DataSync from '../components/DataSync.svelte';
 
   import { showSidebar } from '../stores/sidebar';
 
@@ -26,3 +27,5 @@
   Paimon.moe is not affiliated with miHoYo.<br />
   Genshin Impact, game content and materials are trademarks and copyrights of miHoYo.
 </p>
+
+<DataSync />
diff --git a/src/routes/settings.svelte b/src/routes/settings.svelte
new file mode 100644
index 00000000..e120e6f7
--- /dev/null
+++ b/src/routes/settings.svelte
@@ -0,0 +1,34 @@
+<script>
+  import { mdiGoogleDrive, mdiLoading } from '@mdi/js';
+
+  import Button from '../components/Button.svelte';
+  import Icon from '../components/Icon.svelte';
+  import { driveSignedIn, driveLoading } from '../stores/dataSync';
+
+  function signIn() {
+    gapi.auth2.getAuthInstance().signIn();
+  }
+
+  function signOut() {
+    gapi.auth2.getAuthInstance().signOut();
+  }
+</script>
+
+<div class="lg:ml-64 pt-20 px-8 lg:pt-8">
+  {#if $driveLoading}
+    <Icon path={mdiLoading} color="white" spin />
+  {:else}
+    <p class="text-white">Drive signed in: {$driveSignedIn}</p>
+    {#if !$driveSignedIn}
+      <Button on:click={signIn}>
+        <Icon path={mdiGoogleDrive} className="mr-2" />
+        Sign in to Google Drive
+      </Button>
+    {:else}
+      <Button on:click={signOut}>
+        <Icon path={mdiGoogleDrive} className="mr-2" />
+        Sign out Google Drive
+      </Button>
+    {/if}
+  {/if}
+</div>
diff --git a/src/stores/dataSync.js b/src/stores/dataSync.js
new file mode 100644
index 00000000..2fcca53a
--- /dev/null
+++ b/src/stores/dataSync.js
@@ -0,0 +1,4 @@
+import { writable } from 'svelte/store';
+
+export const driveSignedIn = writable(false);
+export const driveLoading = writable(true);
diff --git a/static/images/settings.png b/static/images/settings.png
new file mode 100644
index 00000000..c066947c
Binary files /dev/null and b/static/images/settings.png differ
diff --git a/yarn.lock b/yarn.lock
index 4e04fb57..c87354e1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -917,13 +917,13 @@
     is-module "^1.0.0"
     resolve "^1.17.0"
 
-"@rollup/plugin-replace@^2.2.0":
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.3.3.tgz#cd6bae39444de119f5d905322b91ebd4078562e7"
-  integrity sha512-XPmVXZ7IlaoWaJLkSCDaa0Y6uVo5XQYHhiMFzOd5qSv5rE+t/UJToPIOE56flKIxBFQI27ONsxb7dqHnwSsjKQ==
+"@rollup/plugin-replace@^2.3.4":
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.3.4.tgz#7dd84c17755d62b509577f2db37eb524d7ca88ca"
+  integrity sha512-waBhMzyAtjCL1GwZes2jaE9MjuQ/DQF2BatH3fRivUF3z0JBFrU0U6iBNC/4WR+2rLKhaAhPWDNPYp4mI6RqdQ==
   dependencies:
-    "@rollup/pluginutils" "^3.0.8"
-    magic-string "^0.25.5"
+    "@rollup/pluginutils" "^3.1.0"
+    magic-string "^0.25.7"
 
 "@rollup/plugin-url@^5.0.0":
   version "5.0.1"
@@ -1335,6 +1335,11 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
+dotenv@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
+  integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
+
 electron-to-chromium@^1.3.571:
   version "1.3.582"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.582.tgz#1adfac5affce84d85b3d7b3dfbc4ade293a6ffc4"
@@ -1753,7 +1758,7 @@ lower-case@^1.1.1:
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
   integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
 
-magic-string@^0.25.2, magic-string@^0.25.5, magic-string@^0.25.7:
+magic-string@^0.25.2, magic-string@^0.25.7:
   version "0.25.7"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
   integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==