diff --git a/packages/toolkit/src/lib/integrations/helpers.ts b/packages/toolkit/src/lib/integrations/helpers.ts
index d6c0a27e0a..9ba6881b5e 100644
--- a/packages/toolkit/src/lib/integrations/helpers.ts
+++ b/packages/toolkit/src/lib/integrations/helpers.ts
@@ -1,10 +1,11 @@
 "use client";
 
+import { Integration } from "instill-sdk";
 import { signIn } from "next-auth/react";
 import { z } from "zod";
 
 import type { IntegrationProvider } from "./types";
-import { AvailableOAuthIntegration, resourceIdPrefix } from "../../constant";
+import { resourceIdPrefix } from "../../constant";
 import { formatResourceId } from "../../server";
 import { createNaiveRandomString } from "../createNaiveRandomString";
 
@@ -43,8 +44,8 @@ export async function initializeIntegrationConnection({
   }
 }
 
-export function isOAuthAvailable(integrationId: string) {
-  return AvailableOAuthIntegration.includes(integrationId);
+export function isOAuthAvailable(integration: Integration) {
+  return integration.oAuthConfig && integration.oAuthConfig.authUrl;
 }
 
 export function getPrefilledOAuthIntegrationConnectionId({
diff --git a/packages/toolkit/src/view/settings/integrations/Integrations.tsx b/packages/toolkit/src/view/settings/integrations/Integrations.tsx
index 37b7a81bfd..405a970045 100644
--- a/packages/toolkit/src/view/settings/integrations/Integrations.tsx
+++ b/packages/toolkit/src/view/settings/integrations/Integrations.tsx
@@ -234,6 +234,7 @@ export const Integrations = () => {
               key={item.id}
               integration={item}
               namespaceId={selectedNamespaceId}
+              accessToken={accessToken}
             />
           ))
         ) : (
diff --git a/packages/toolkit/src/view/settings/integrations/connectable-integration/ConnectableIntegration.tsx b/packages/toolkit/src/view/settings/integrations/connectable-integration/ConnectableIntegration.tsx
index c59844e5ce..fc7aeb31d5 100644
--- a/packages/toolkit/src/view/settings/integrations/connectable-integration/ConnectableIntegration.tsx
+++ b/packages/toolkit/src/view/settings/integrations/connectable-integration/ConnectableIntegration.tsx
@@ -4,26 +4,36 @@ import * as React from "react";
 import Image from "next/image";
 import { Integration, Nullable } from "instill-sdk";
 
-import { Button } from "@instill-ai/design-system";
+import { Button, useToast } from "@instill-ai/design-system";
 
-import { initializeIntegrationConnection } from "../../../../lib";
+import { LoadingSpin } from "../../../../components";
+import {
+  getInstillAPIClient,
+  initializeIntegrationConnection,
+  toastInstillError,
+  useQueryClient,
+} from "../../../../lib";
 import { isOAuthAvailable } from "../../../../lib/integrations/helpers";
+import { queryKeyStore } from "../../../../lib/react-query-service/queryKeyStore";
 import { IntegrationProvider } from "../../../../server";
 import { ManualSettingDialog } from "./ManualSettingDialog";
 
 export type ConnectableIntegrationProps = {
   integration: Integration;
   namespaceId: Nullable<string>;
+  accessToken: Nullable<string>;
 };
 
 export const ConnectableIntegration = ({
   integration,
   namespaceId,
+  accessToken,
 }: ConnectableIntegrationProps) => {
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+  const [isProcessing, setIsProcessing] = React.useState(false);
   const [editingDialogIsOpen, setEditingDialogIsOpen] = React.useState(false);
 
-  const oAuthIsAvailable = isOAuthAvailable(integration.id);
-
   return (
     <div className="[&:not(:last-child)]:border-b [&:not(:last-child)]:border-semantic-bg-line flex flex-row gap-4 items-center p-4 w-full">
       <div className="w-12 h-12 rounded-sm border-semantic-bg-line border flex items-center justify-center">
@@ -39,44 +49,81 @@ export const ConnectableIntegration = ({
       </span>
       <Button
         variant="primary"
-        className="ml-auto"
-        onClick={() => {
-          if (oAuthIsAvailable) {
-            if (!namespaceId) {
-              return;
-            }
+        className="ml-auto w-20 items-center justify-center"
+        onClick={async () => {
+          if (!accessToken) {
+            return;
+          }
 
-            let provider: Nullable<IntegrationProvider> = null;
-
-            switch (integration.id) {
-              case "github":
-                provider = "github";
-                break;
-              case "slack":
-                provider = "slack";
-                break;
-              case "google-drive":
-                provider = "google-drive";
-                break;
-              default:
-                break;
-            }
+          setIsProcessing(true);
+
+          try {
+            const client = getInstillAPIClient({
+              accessToken,
+            });
+
+            const integrationFull =
+              await client.core.integration.getIntegration({
+                integrationId: integration.id,
+                view: "VIEW_FULL",
+              });
+
+            queryClient.setQueryData(
+              queryKeyStore.integration.getUseGetIntegrationQueryKey({
+                integrationId: integration.id,
+                view: "VIEW_FULL",
+              }),
+              integrationFull.integration,
+            );
+
+            if (isOAuthAvailable(integrationFull.integration)) {
+              if (!namespaceId) {
+                setIsProcessing(false);
+                return;
+              }
+
+              let provider: Nullable<IntegrationProvider> = null;
+
+              switch (integration.id) {
+                case "github":
+                  provider = "github";
+                  break;
+                case "slack":
+                  provider = "slack";
+                  break;
+                case "google-drive":
+                  provider = "google-drive";
+                  break;
+                default:
+                  break;
+              }
+
+              if (!provider) {
+                setIsProcessing(false);
+                return;
+              }
+
+              setIsProcessing(false);
 
-            if (provider) {
               initializeIntegrationConnection({
                 provider,
                 namespaceId,
                 integrationId: integration.id,
               });
             }
-
-            return;
+          } catch (error) {
+            toastInstillError({
+              toast,
+              error,
+              title: "Failed to connect to integration",
+            });
           }
 
+          setIsProcessing(false);
           setEditingDialogIsOpen(true);
         }}
       >
-        Connect
+        {isProcessing ? <LoadingSpin className="w-4 h-4" /> : "Connect"}
       </Button>
       <ManualSettingDialog
         isOpen={editingDialogIsOpen}