diff --git a/package-lock.json b/package-lock.json
index 594cdb1..9dcd137 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@yudiel/react-qr-scanner": "^1.1.10",
         "antd": "^5.10.3",
         "buffer": "^6.0.3",
+        "hellojs": "^1.20.0",
         "i18next": "^23.2.3",
         "i18next-browser-languagedetector": "^7.1.0",
         "i18next-http-backend": "^2.2.1",
@@ -11173,6 +11174,11 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hellojs": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/hellojs/-/hellojs-1.20.0.tgz",
+      "integrity": "sha512-zfZGRt0J0OpJHnw2GJz4uh+rzMNAMWpIymiaRbSmCqCvqDMLSx2/qR5JucqnHPsZHUEjyKj5aLJ8K54kyHHjLQ=="
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
diff --git a/package.json b/package.json
index d57f14a..3134b39 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "@yudiel/react-qr-scanner": "^1.1.10",
     "antd": "^5.10.3",
     "buffer": "^6.0.3",
+    "hellojs": "^1.20.0",
     "i18next": "^23.2.3",
     "i18next-browser-languagedetector": "^7.1.0",
     "i18next-http-backend": "^2.2.1",
diff --git a/src/Pages/Store/Calendar/index.js b/src/Pages/Store/Calendar/index.js
index 9f485d4..86859da 100644
--- a/src/Pages/Store/Calendar/index.js
+++ b/src/Pages/Store/Calendar/index.js
@@ -1,15 +1,48 @@
 import { Button } from "antd";
 import { useTranslation } from "react-i18next";
 import { Constants } from "../../../utils";
+import * as hello from "hellojs";
+import { useEffect } from "react";
 
 export default function StoreCalendar() {
   const { t } = useTranslation();
 
+  useEffect(() => {
+    hello.init(
+      {
+        google: Constants.GOOGLE_CLIENT_ID,
+      },
+      {
+        response_type: "code",
+        redirect_uri:
+          "https://customerdashboard.ex.umbach.dev/store/calendar/finish",
+        scope: [
+          "https://www.googleapis.com/auth/calendar.app.created",
+          "https://www.googleapis.com/auth/calendar.events.freebusy",
+        ],
+        force: true,
+      }
+    );
+  }, []);
+
   return (
     <>
       <h1>{t("calendar.pageTitle")}</h1>
 
-      <Button href={`${Constants.API_ADDRESS}/calendar/auth/google`}>
+      <Button
+        onClick={() => {
+          hello("google")
+            .login()
+            .then(
+              () => {
+                console.log("login success");
+              },
+              (e) => {
+                console.log("login error", e);
+              }
+            );
+        }}
+      >
         LOGIN with GOOGLE
       </Button>
     </>
diff --git a/src/utils.js b/src/utils.js
index 425bebd..808ebb8 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -75,6 +75,8 @@ export const Constants = {
     MAX_STORE_SERVICE_ACTIVITY_DURATION_MINUTES: 59,
   },
   DELAY_ACCOUNT_NAME_CHECK: 250,
+  GOOGLE_CLIENT_ID:
+    "128055018065-3qkae3nocsscq909vu3lttljro2srt3c.apps.googleusercontent.com",
   MAX_AVATAR_SIZE: 5 * 1024 * 1024,
   ACCEPTED_AVATAR_FILE_TYPES: [
     "image/png",