diff --git a/dev/main.tsx b/dev/main.tsx
index 8cd2494..802ef37 100644
--- a/dev/main.tsx
+++ b/dev/main.tsx
@@ -11,6 +11,7 @@ const HubWrapper: React.FC = () => {
     const [error, setError] = useState<string>();
     const [token, setToken] = useState<string>();
     const apiUrl = import.meta.env.VITE_API_URL ?? 'https://api.stackone.com';
+    const appUrl = import.meta.env.VITE_APP_URL ?? 'https://app.stackone.com';
     const [theme, setTheme] = useState<'light' | 'dark'>('light');
     const [accountId, setAccountId] = useState<string>();
 
@@ -81,6 +82,7 @@ const HubWrapper: React.FC = () => {
                     setMode(undefined);
                 }}
                 accountId={accountId}
+                appUrl={appUrl}
             />
         </div>
     );
diff --git a/dev/vite-env.d.ts b/dev/vite-env.d.ts
index 5af38cf..4998407 100644
--- a/dev/vite-env.d.ts
+++ b/dev/vite-env.d.ts
@@ -7,7 +7,7 @@ interface ImportMetaEnv {
     readonly VITE_ORIGIN_OWNER_NAME: string;
     readonly VITE_ORIGIN_USERNAME: string;
     readonly VITE_API_URL: string;
-    readonly VITE_DASHBOARD_URL: string;
+    readonly VITE_APP_URL: string;
 }
 
 export interface ImportMeta {
diff --git a/src/StackOneHub.tsx b/src/StackOneHub.tsx
index d84d31a..054e770 100644
--- a/src/StackOneHub.tsx
+++ b/src/StackOneHub.tsx
@@ -23,6 +23,7 @@ interface StackOneHubProps {
     mode?: HubModes;
     token?: string;
     baseUrl?: string;
+    appUrl?: string;
     height?: string;
     theme?: 'light' | 'dark' | PartialMalachiteTheme;
     accountId?: string;
@@ -35,6 +36,7 @@ export const StackOneHub: React.FC<StackOneHubProps> = ({
     mode,
     token,
     baseUrl,
+    appUrl,
     height = '500px',
     theme = 'light',
     accountId,
@@ -44,6 +46,8 @@ export const StackOneHub: React.FC<StackOneHubProps> = ({
 }) => {
     const defaultBaseUrl = 'https://api.stackone.com';
     const apiUrl = baseUrl ?? defaultBaseUrl;
+    const defaultDashboardUrl = 'https://app.stackone.com';
+    const dashboardUrl = appUrl ?? defaultDashboardUrl;
     useEffect(() => {
         if (theme === 'dark') {
             applyDarkTheme();
@@ -119,6 +123,7 @@ export const StackOneHub: React.FC<StackOneHubProps> = ({
                         <IntegrationPicker
                             token={token}
                             baseUrl={apiUrl}
+                            dashboardUrl={dashboardUrl}
                             height={height}
                             onSuccess={onSuccess}
                             onClose={onClose}
diff --git a/src/modules/integration-picker/IntegrationPicker.tsx b/src/modules/integration-picker/IntegrationPicker.tsx
index d4c437f..f1fbf12 100644
--- a/src/modules/integration-picker/IntegrationPicker.tsx
+++ b/src/modules/integration-picker/IntegrationPicker.tsx
@@ -9,6 +9,7 @@ interface IntegrationPickerProps {
     baseUrl: string;
     height: string;
     accountId?: string;
+    dashboardUrl?: string;
     onSuccess?: () => void;
     onClose?: () => void;
     onCancel?: () => void;
@@ -20,6 +21,7 @@ export const IntegrationPicker: React.FC<IntegrationPickerProps> = ({
     height,
     accountId,
     onSuccess,
+    dashboardUrl,
 }) => {
     const {
         // Data
@@ -48,6 +50,7 @@ export const IntegrationPicker: React.FC<IntegrationPickerProps> = ({
         baseUrl,
         accountId,
         onSuccess,
+        dashboardUrl,
     });
 
     return (
@@ -75,7 +78,7 @@ export const IntegrationPicker: React.FC<IntegrationPickerProps> = ({
                 hasError={hasError}
                 connectionState={connectionState}
                 selectedIntegration={selectedIntegration}
-                connectorData={connectorData ?? null}
+                connectorData={connectorData?.config ?? null}
                 hubData={hubData ?? null}
                 fields={fields}
                 guide={guide}
diff --git a/src/modules/integration-picker/components/IntegrationFields.tsx b/src/modules/integration-picker/components/IntegrationFields.tsx
index 27f608a..8d29cf1 100644
--- a/src/modules/integration-picker/components/IntegrationFields.tsx
+++ b/src/modules/integration-picker/components/IntegrationFields.tsx
@@ -68,20 +68,21 @@ export const IntegrationForm: React.FC<IntegrationFieldsProps> = ({
             {error && <Typography.CodeText>{error.provider_response}</Typography.CodeText>}
             <Spacer direction="vertical" size={20} fullWidth>
                 {fields.map((field) => {
+                    const key =
+                        typeof field.key === 'object'
+                            ? JSON.stringify(field.key)
+                            : String(field.key);
                     return (
-                        <div key={field.key} style={{ width: '100%' }}>
+                        <div key={key} style={{ width: '100%' }}>
                             {(field.type === 'text' ||
                                 field.type === 'number' ||
                                 field.type === 'password') && (
                                 <Input
-                                    key={field.key}
-                                    name={field.key}
+                                    name={key}
                                     required={field.required}
                                     placeholder={field.placeholder}
                                     defaultValue={field.value?.toString()}
-                                    onChange={(value: string) =>
-                                        handleFieldChange(field.key, value)
-                                    }
+                                    onChange={(value: string) => handleFieldChange(key, value)}
                                     disabled={field.readOnly}
                                     label={field.label}
                                     tooltip={field.guide?.tooltip}
@@ -92,14 +93,11 @@ export const IntegrationForm: React.FC<IntegrationFieldsProps> = ({
 
                             {field.type === 'text_area' && (
                                 <TextArea
-                                    key={field.key}
-                                    name={field.key}
+                                    name={key}
                                     required={field.required}
-                                    defaultValue={formData[field.key] || ''}
+                                    defaultValue={formData[key] || ''}
                                     placeholder={field.placeholder}
-                                    onChange={(value: string) =>
-                                        handleFieldChange(field.key, value)
-                                    }
+                                    onChange={(value: string) => handleFieldChange(key, value)}
                                     disabled={field.readOnly}
                                     label={field.label}
                                     tooltip={field.guide?.tooltip}
@@ -107,8 +105,7 @@ export const IntegrationForm: React.FC<IntegrationFieldsProps> = ({
                             )}
                             {field.type === 'select' && (
                                 <Dropdown
-                                    key={field.key}
-                                    defaultValue={formData[field.key] || ''}
+                                    defaultValue={formData[key] || ''}
                                     disabled={field.readOnly}
                                     items={
                                         field.options?.map((option) => ({
@@ -116,10 +113,8 @@ export const IntegrationForm: React.FC<IntegrationFieldsProps> = ({
                                             label: option.label,
                                         })) ?? []
                                     }
-                                    onItemSelected={(value) =>
-                                        handleFieldChange(field.key, value ?? '')
-                                    }
-                                    name={field.key}
+                                    onItemSelected={(value) => handleFieldChange(key, value ?? '')}
+                                    name={key}
                                     label={field.label}
                                     tooltip={field.guide?.tooltip}
                                     description={field.guide?.description}
diff --git a/src/modules/integration-picker/hooks/useIntegrationPicker.ts b/src/modules/integration-picker/hooks/useIntegrationPicker.ts
index 5ea2c91..445cd91 100644
--- a/src/modules/integration-picker/hooks/useIntegrationPicker.ts
+++ b/src/modules/integration-picker/hooks/useIntegrationPicker.ts
@@ -1,6 +1,6 @@
 import { evaluate } from '@stackone/expressions';
 import { useQuery } from '@tanstack/react-query';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
     connectAccount,
     getAccountData,
@@ -8,7 +8,7 @@ import {
     getHubData,
     updateAccount,
 } from '../queries';
-import { Integration } from '../types';
+import { ConnectorConfigField, Integration } from '../types';
 
 const DUMMY_VALUE = 'totally-fake-value';
 
@@ -17,6 +17,13 @@ interface UseIntegrationPickerProps {
     baseUrl: string;
     accountId?: string;
     onSuccess?: () => void;
+    dashboardUrl?: string;
+}
+
+export enum EventType {
+    AccountConnected = 'AccountConnected',
+    CloseModal = 'CloseModal',
+    CloseOAuth2 = 'CloseOAuth2',
 }
 
 export const useIntegrationPicker = ({
@@ -24,9 +31,13 @@ export const useIntegrationPicker = ({
     baseUrl,
     accountId,
     onSuccess,
+    dashboardUrl,
 }: UseIntegrationPickerProps) => {
     const [selectedIntegration, setSelectedIntegration] = useState<Integration | null>(null);
     const [formData, setFormData] = useState<Record<string, string>>({});
+    const connectWindow = useRef<Window | null>(null);
+    const checkStateTimeoutRef = useRef<number | null>(null);
+    const successTimeoutRef = useRef<number | null>(null);
     const [connectionState, setConnectionState] = useState<{
         loading: boolean;
         success: boolean;
@@ -39,7 +50,48 @@ export const useIntegrationPicker = ({
         success: false,
     });
 
-    // Fetch account data for editing scenario
+    useEffect(() => {
+        return () => {
+            if (checkStateTimeoutRef.current !== null) {
+                clearTimeout(checkStateTimeoutRef.current);
+            }
+            if (successTimeoutRef.current !== null) {
+                clearTimeout(successTimeoutRef.current);
+            }
+        };
+    }, []);
+
+    const processMessageCallback = useCallback((event: MessageEvent) => {
+        if (event.data.type === EventType.AccountConnected) {
+            setConnectionState({ loading: false, success: true });
+            parent.postMessage(event.data, '*');
+            if (connectWindow.current) {
+                connectWindow.current.close();
+                connectWindow.current = null;
+            }
+            window.removeEventListener('message', processMessageCallback, false);
+        } else if (event.data.type === EventType.CloseOAuth2) {
+            if (event.data.error) {
+                setConnectionState({
+                    loading: false,
+                    success: false,
+                    error: {
+                        message: event.data.error,
+                        provider_response: event.data.errorDescription || 'No description',
+                    },
+                });
+            } else {
+                setConnectionState({ loading: false, success: false, error: undefined });
+            }
+
+            if (connectWindow.current) {
+                connectWindow.current.close();
+                connectWindow.current = null;
+            }
+            window.removeEventListener('message', processMessageCallback, false);
+        }
+    }, []);
+
     const {
         data: accountData,
         isLoading: isLoadingAccountData,
@@ -53,7 +105,6 @@ export const useIntegrationPicker = ({
         enabled: !!accountId,
     });
 
-    // Fetch hub data (list of integrations)
     const {
         data: hubData,
         isLoading: isLoadingHubData,
@@ -61,17 +112,14 @@ export const useIntegrationPicker = ({
     } = useQuery({
         queryKey: ['hubData', accountData?.provider],
         queryFn: () => {
-            // For account editing: fetch hub data with specific provider
             if (accountData?.provider) {
                 return getHubData(token, baseUrl, accountData.provider);
             }
-            // For new setup: fetch all integrations
             return getHubData(token, baseUrl);
         },
-        enabled: !accountId || !!accountData, // Enable when no accountId OR when we have account data
+        enabled: !accountId || !!accountData,
     });
 
-    // Auto-select integration when editing an account
     useEffect(() => {
         if (accountData && hubData) {
             const matchingIntegration = hubData.integrations.find(
@@ -81,7 +129,6 @@ export const useIntegrationPicker = ({
         }
     }, [accountData, hubData]);
 
-    // Fetch connector configuration
     const {
         data: connectorData,
         isLoading: isLoadingConnectorData,
@@ -100,10 +147,10 @@ export const useIntegrationPicker = ({
         enabled: Boolean(selectedIntegration) || Boolean(accountData),
     });
 
-    // Extract fields and guide from connector config
     const { fields, guide } = useMemo(() => {
         if (!connectorData || !selectedIntegration) {
-            return { fields: [] };
+            const fields: ConnectorConfigField[] = [];
+            return { fields };
         }
 
         const authConfig =
@@ -112,13 +159,14 @@ export const useIntegrationPicker = ({
 
         const baseFields = authConfigForEnvironment?.fields || [];
 
-        const fieldsWithPrefilledValues = baseFields
+        const fieldsWithPrefilledValues: ConnectorConfigField[] = baseFields
             .map((field) => {
                 const setupValue = accountData?.setupInformation?.[field.key];
 
                 if (accountData && (field.secret || field.type === 'password')) {
                     return {
                         ...field,
+                        key: field.key,
                         value: DUMMY_VALUE,
                     };
                 }
@@ -126,6 +174,7 @@ export const useIntegrationPicker = ({
                 if (field.key === 'external-trigger-token') {
                     return {
                         ...field,
+                        key: field.key,
                         value: hubData?.external_trigger_token,
                     };
                 }
@@ -148,15 +197,23 @@ export const useIntegrationPicker = ({
                 }
 
                 if (!field.value) {
-                    return field;
+                    return {
+                        ...field,
+                        key: field.key,
+                    };
                 }
 
                 const valueToEvaluate = setupValue !== undefined ? setupValue : field.value;
-                const evaluatedValue = evaluate(valueToEvaluate?.toString(), evaluationContext);
+                let evaluatedValue = evaluate(valueToEvaluate?.toString(), evaluationContext);
+
+                if (typeof evaluatedValue === 'object' && evaluatedValue !== null) {
+                    evaluatedValue = JSON.stringify(evaluatedValue);
+                }
 
                 return {
                     ...field,
-                    value: evaluatedValue,
+                    key: field.key,
+                    value: evaluatedValue as string | number | undefined,
                 };
             })
             .filter((value) => value != null);
@@ -167,13 +224,23 @@ export const useIntegrationPicker = ({
         };
     }, [connectorData, selectedIntegration, accountData, formData, hubData]);
 
+    const authConfig = useMemo(() => {
+        if (!connectorData || !selectedIntegration) {
+            return null;
+        }
+        return connectorData.config.authentication?.[
+            selectedIntegration.authentication_config_key
+        ]?.[selectedIntegration.environment];
+    }, [connectorData, selectedIntegration]);
+
     const handleConnect = useCallback(async () => {
-        if (!selectedIntegration) return;
+        if (!selectedIntegration) {
+            return;
+        }
 
         setConnectionState({ loading: true, success: false });
 
         try {
-            // Clean up dummy values for secret fields before submission
             const cleanedFormData = { ...formData };
             if (accountData) {
                 fields.forEach((field) => {
@@ -186,6 +253,62 @@ export const useIntegrationPicker = ({
                 });
             }
 
+            if (authConfig?.type === 'oauth2') {
+                window.addEventListener('message', processMessageCallback, false);
+                const callbackEmbeddedAccountsUrl = encodeURIComponent(
+                    `${dashboardUrl}/embedded/accounts/callback`,
+                );
+                let windowUrl = `${baseUrl}/connect/oauth2/${selectedIntegration.provider}?redirect_uri=${callbackEmbeddedAccountsUrl}&token=${token}`;
+
+                Object.keys(cleanedFormData).forEach((key) => {
+                    windowUrl += `&${key}=${encodeURIComponent(cleanedFormData[key])}`;
+                });
+
+                const width = 1024;
+                const height = 800;
+                const screenX =
+                    typeof window.screenX != 'undefined' ? window.screenX : window.screenLeft;
+                const screenY =
+                    typeof window.screenY != 'undefined' ? window.screenY : window.screenTop;
+                const outerWidth =
+                    typeof window.outerWidth != 'undefined'
+                        ? window.outerWidth
+                        : document.body.clientWidth;
+                const outerHeight =
+                    typeof window.outerHeight != 'undefined'
+                        ? window.outerHeight
+                        : document.body.clientHeight - 22;
+                const left = screenX + (outerWidth - width) / 2;
+                const top = screenY + (outerHeight - height) / 2.5;
+                const features =
+                    'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top;
+
+                connectWindow.current = window.open(windowUrl, 'Connect Account', features);
+
+                if (connectWindow.current) {
+                    connectWindow.current.focus();
+                    const checkWindowState = () => {
+                        if (connectWindow.current?.closed) {
+                            setConnectionState({ loading: false, success: false });
+                            window.removeEventListener('message', processMessageCallback, false);
+                            connectWindow.current = null;
+                            if (checkStateTimeoutRef.current !== null) {
+                                clearTimeout(checkStateTimeoutRef.current);
+                                checkStateTimeoutRef.current = null;
+                            }
+                        } else if (connectWindow.current) {
+                            checkStateTimeoutRef.current = window.setTimeout(
+                                checkWindowState,
+                                1000,
+                            );
+                        }
+                    };
+                    checkStateTimeoutRef.current = window.setTimeout(checkWindowState, 1000);
+                }
+
+                return;
+            }
+
             if (accountId) {
                 await updateAccount(
                     baseUrl,
@@ -199,8 +322,12 @@ export const useIntegrationPicker = ({
             }
 
             setConnectionState({ loading: false, success: true });
-            setTimeout(() => {
+            if (successTimeoutRef.current !== null) {
+                clearTimeout(successTimeoutRef.current);
+            }
+            successTimeoutRef.current = window.setTimeout(() => {
                 onSuccess?.();
+                successTimeoutRef.current = null;
             }, 2000);
         } catch (error) {
             const parsedError = JSON.parse((error as Error).message) as {
@@ -222,7 +349,19 @@ export const useIntegrationPicker = ({
                 },
             });
         }
-    }, [baseUrl, token, selectedIntegration, formData, onSuccess, accountData, fields, accountId]);
+    }, [
+        baseUrl,
+        dashboardUrl,
+        token,
+        selectedIntegration,
+        formData,
+        onSuccess,
+        accountData,
+        fields,
+        accountId,
+        authConfig,
+        processMessageCallback,
+    ]);
 
     const isLoading = isLoadingHubData || isLoadingConnectorData || isLoadingAccountData;
     const hasError = !!(errorHubData || errorConnectorData || errorAccountData);
diff --git a/src/modules/integration-picker/types.ts b/src/modules/integration-picker/types.ts
index cd7ce7a..9f5cf98 100644
--- a/src/modules/integration-picker/types.ts
+++ b/src/modules/integration-picker/types.ts
@@ -49,6 +49,7 @@ export interface ConnectorConfig {
                     supportLink?: string;
                     description: string;
                 };
+                type: 'oauth2' | 'oidc' | 'custom';
             };
         };
     };