diff --git a/pages/api/oauth2/login/facebook.tsx b/pages/api/oauth2/login/facebook.tsx
index e6609ee7..b849c3e4 100644
--- a/pages/api/oauth2/login/facebook.tsx
+++ b/pages/api/oauth2/login/facebook.tsx
@@ -11,14 +11,20 @@ import passport from 'passport';
 import { Strategy as FacebookStrategy } from 'passport-facebook';
 import { oauthKeys } from '@/lib/oauth_middleware';
 
-export const createStrategy = ({ client_id = '', client_secret = '', workspace = '', connector = '' }) => {
+export const createStrategy = ({
+  client_id = '',
+  client_secret = '',
+  workspace = '',
+  connector = '',
+  oauth_keys = 'private'
+}) => {
   const strategy = new FacebookStrategy(
     {
       clientID: client_id as string,
       clientSecret: client_secret as string,
       authType: 'reauthenticate',
       profileFields: ['id', 'displayName', 'photos', 'email'],
-      callbackURL: `${process.env.WEB_URL}/api/oauth2/redirect/facebook?workspace=${workspace}&connector=${connector}` // this is the endpoint you registered on hubspot while creating your app. This endpoint would exist on your application for verifying the authentication
+      callbackURL: `${process.env.WEB_URL}/api/oauth2/redirect/facebook?workspace=${workspace}&connector=${connector}&oauth_keys=${oauth_keys}` // this is the endpoint you registered on hubspot while creating your app. This endpoint would exist on your application for verifying the authentication
     },
     async (_accessToken, _refreshToken, profile: any, cb: any) => {
       try {
@@ -40,8 +46,18 @@ router
   .use(oauthKeys)
 
   .get(async (req, res, next) => {
-    let { workspace = '', connector = '' } = req.query;
-    const query = { ...req.credentials, workspace: workspace, connector };
+    let { workspace = '', connector = '', oauth_keys = 'private' } = req.query;
+
+    let credentials = { ...(req.credentials ?? {}) };
+
+    if (oauth_keys === 'public') {
+      credentials = {
+        client_id: process.env.AUTH_FACEBOOK_CLIENT_ID,
+        client_secret: process.env.AUTH_FACEBOOK_CLIENT_SECRET
+      };
+    }
+
+    const query = { ...credentials, workspace: workspace, connector: connector, oauth_keys: oauth_keys };
     const strategy = createStrategy(query);
 
     return passport.authenticate(strategy, {
diff --git a/pages/api/oauth2/login/google.tsx b/pages/api/oauth2/login/google.tsx
index 2c27dfcb..b5c2539c 100644
--- a/pages/api/oauth2/login/google.tsx
+++ b/pages/api/oauth2/login/google.tsx
@@ -20,12 +20,18 @@ const saveUser = (user: Profile) => {
   });
 };
 
-export const createStrategy = ({ client_id = '', client_secret = '', workspace = '', connector = '' }) => {
+export const createStrategy = ({
+  client_id = '',
+  client_secret = '',
+  workspace = '',
+  connector = '',
+  oauth_keys = 'private'
+}) => {
   const strategy = new GoogleStrategy(
     {
       clientID: client_id as string,
       clientSecret: client_secret as string,
-      callbackURL: `${process.env.WEB_URL}/api/oauth2/redirect/google?workspace=${workspace}&connector=${connector}` // this is the endpoint you registered on hubspot while creating your app. This endpoint would exist on your application for verifying the authentication
+      callbackURL: `${process.env.WEB_URL}/api/oauth2/redirect/google?workspace=${workspace}&connector=${connector}&oauth_keys=${oauth_keys}` // this is the endpoint you registered on hubspot while creating your app. This endpoint would exist on your application for verifying the authentication
     },
     async (_accessToken, _refreshToken, profile: any, cb: any) => {
       try {
@@ -48,8 +54,19 @@ router
   .use(oauthKeys)
 
   .get(async (req, res, next) => {
-    let { workspace = '', connector = '' } = req.query;
-    const query = { ...req.credentials, workspace: workspace, connector };
+    let { workspace = '', connector = '', oauth_keys = 'private' } = req.query;
+
+    let credentials = { ...(req.credentials ?? {}) };
+
+    if (oauth_keys === 'public') {
+      credentials = {
+        client_id: process.env.AUTH_GOOGLE_CLIENT_ID,
+        client_secret: process.env.AUTH_GOOGLE_CLIENT_SECRET
+      };
+    }
+
+    const query = { ...credentials, workspace: workspace, connector: connector, oauth_keys: oauth_keys };
+
     const strategy = createStrategy(query);
 
     return passport.authenticate(strategy, {
diff --git a/pages/api/oauth2/login/hubspot.tsx b/pages/api/oauth2/login/hubspot.tsx
index a77edf86..1f9f326d 100644
--- a/pages/api/oauth2/login/hubspot.tsx
+++ b/pages/api/oauth2/login/hubspot.tsx
@@ -19,13 +19,19 @@ const saveUser = (user: Profile) => {
   });
 };
 
-export const createStrategy = ({ client_id = '', client_secret = '', workspace = '', connector = '' }) => {
+export const createStrategy = ({
+  client_id = '',
+  client_secret = '',
+  workspace = '',
+  connector = '',
+  oauth_keys = 'private'
+}) => {
   const strategy = new HubspotStrategy(
     {
       clientID: client_id as string,
       clientSecret: client_secret as string,
       user_scope: ['identity.basic', 'identity.email'],
-      callbackURL: `${process.env.WEB_URL}/api/oauth2/redirect/hubspot?workspace=${workspace}&connector=${connector}`, // this is the endpoint you registered on hubspot while creating your app. This endpoint would exist on your application for verifying the authentication
+      callbackURL: `${process.env.WEB_URL}/api/oauth2/redirect/hubspot?workspace=${workspace}&connector=${connector}&oauth_keys=${oauth_keys}`, // this is the endpoint you registered on hubspot while creating your app. This endpoint would exist on your application for verifying the authentication
       passReqToCallback: true
     },
     async (req, _accessToken, _refreshToken, profile, cb: any) => {
@@ -46,8 +52,19 @@ export const createStrategy = ({ client_id = '', client_secret = '', workspace =
 const router = createRouter();
 
 router.use(oauthKeys).get(async (req, res, next) => {
-  let { workspace = '', connector = '' } = req.query;
-  const query = { ...req.credentials, workspace: workspace, connector };
+  let { workspace = '', connector = '', oauth_keys = 'private' } = req.query;
+
+  let credentials = { ...(req.credentials ?? {}) };
+
+  if (oauth_keys === 'public') {
+    credentials = {
+      client_id: process.env.AUTH_HUBSPOT_CLIENT_ID,
+      client_secret: process.env.AUTH_HUBSPOT_CLIENT_SECRET
+    };
+  }
+
+  const query = { ...credentials, workspace: workspace, connector: connector, oauth_keys: oauth_keys };
+
   const strategy = createStrategy(query);
 
   return passport.authenticate(strategy, {
diff --git a/pages/api/oauth2/login/slack.tsx b/pages/api/oauth2/login/slack.tsx
index b5565cec..08d46a7b 100644
--- a/pages/api/oauth2/login/slack.tsx
+++ b/pages/api/oauth2/login/slack.tsx
@@ -19,14 +19,20 @@ const saveUser = (user) => {
   });
 };
 
-export const createStrategy = ({ client_id = '', client_secret = '', workspace = '', connector = '' }) => {
+export const createStrategy = ({
+  client_id = '',
+  client_secret = '',
+  workspace = '',
+  connector = '',
+  oauth_keys = 'private'
+}) => {
   const strategy = new SlackStrategy(
     {
       clientID: client_id as string,
       clientSecret: client_secret as string,
       user_scope: ['identity.basic', 'identity.email'],
       scope: ['users.profile:read', 'chat:write', 'channels:read', 'channels:join'], // default,
-      callbackURL: `${process.env.WEB_URL}/api/oauth2/redirect/slack?workspace=${workspace}&connector=${connector}`
+      callbackURL: `${process.env.WEB_URL}/api/oauth2/redirect/slack?workspace=${workspace}&connector=${connector}&oauth_keys=${oauth_keys}`
     },
     async (accessToken, params, profile, cb: any) => {
       try {
@@ -47,8 +53,18 @@ export const createStrategy = ({ client_id = '', client_secret = '', workspace =
 const router = createRouter();
 
 router.use(oauthKeys).get(async (req, res, next) => {
-  let { workspace = '', connector = '' } = req.query;
-  const query = { ...req.credentials, workspace: workspace, connector };
+  let { workspace = '', connector = '', oauth_keys = 'private' } = req.query;
+
+  let credentials = { ...(req.credentials ?? {}) };
+
+  if (oauth_keys === 'public') {
+    credentials = {
+      client_id: process.env.AUTH_SLACK_CLIENT_ID,
+      client_secret: process.env.AUTH_SLACK_CLIENT_SECRET
+    };
+  }
+
+  const query = { ...credentials, workspace: workspace, connector: connector, oauth_keys: oauth_keys };
   const strategy = createStrategy(query);
 
   return passport.authenticate(strategy, null, {
diff --git a/pages/api/oauth2/redirect/facebook.tsx b/pages/api/oauth2/redirect/facebook.tsx
index 617f30b0..73f34f05 100644
--- a/pages/api/oauth2/redirect/facebook.tsx
+++ b/pages/api/oauth2/redirect/facebook.tsx
@@ -17,8 +17,19 @@ router
   .use(oauthKeys)
 
   .get(async (req, res, next) => {
-    let { workspace = '', connector = '' } = req.query;
-    const query = { ...req.credentials, workspace: workspace, connector };
+    let { workspace = '', connector = '', oauth_keys = 'private' } = req.query;
+
+    let credentials = { ...(req.credentials ?? {}) };
+
+    if (oauth_keys === 'public') {
+      credentials = {
+        client_id: process.env.AUTH_FACEBOOK_CLIENT_ID,
+        client_secret: process.env.AUTH_FACEBOOK_CLIENT_SECRET
+      };
+    }
+
+    const query = { ...credentials, workspace: workspace, connector: connector, oauth_keys: oauth_keys };
+
     const strategy = createStrategy(query);
 
     return passport.authenticate(strategy, { session: 'false' }, async (err: any, user: any) => {
diff --git a/pages/api/oauth2/redirect/google.tsx b/pages/api/oauth2/redirect/google.tsx
index db746782..c0c5cc43 100644
--- a/pages/api/oauth2/redirect/google.tsx
+++ b/pages/api/oauth2/redirect/google.tsx
@@ -17,8 +17,19 @@ router
   .use(oauthKeys)
 
   .get(async (req, res, next) => {
-    let { workspace = '', connector = '' } = req.query;
-    const query = { ...req.credentials, workspace: workspace, connector };
+    let { workspace = '', connector = '', oauth_keys = 'private' } = req.query;
+
+    let credentials = { ...(req.credentials ?? {}) };
+
+    if (oauth_keys === 'public') {
+      credentials = {
+        client_id: process.env.AUTH_GOOGLE_CLIENT_ID,
+        client_secret: process.env.AUTH_GOOGLE_CLIENT_SECRET
+      };
+    }
+
+    const query = { ...credentials, workspace: workspace, connector: connector, oauth_keys: oauth_keys };
+
     const strategy = createStrategy(query);
 
     return passport.authenticate(strategy, { session: 'false' }, async (err: any, user: any) => {
diff --git a/pages/api/oauth2/redirect/hubspot.ts b/pages/api/oauth2/redirect/hubspot.ts
index 04c548eb..b3f25354 100644
--- a/pages/api/oauth2/redirect/hubspot.ts
+++ b/pages/api/oauth2/redirect/hubspot.ts
@@ -17,8 +17,18 @@ router
   .use(oauthKeys)
 
   .get(async (req, res, next) => {
-    let { workspace = '', connector = '' } = req.query;
-    const query = { ...req.credentials, workspace: workspace, connector };
+    let { workspace = '', connector = '', oauth_keys = 'private' } = req.query;
+
+    let credentials = { ...(req.credentials ?? {}) };
+
+    if (oauth_keys === 'public') {
+      credentials = {
+        client_id: process.env.AUTH_HUBSPOT_CLIENT_ID,
+        client_secret: process.env.AUTH_HUBSPOT_CLIENT_SECRET
+      };
+    }
+
+    const query = { ...credentials, workspace: workspace, connector: connector, oauth_keys: oauth_keys };
     const strategy = createStrategy(query);
 
     return passport.authenticate(strategy, { session: 'false' }, async (err: any, user: any) => {
diff --git a/pages/api/oauth2/redirect/slack.tsx b/pages/api/oauth2/redirect/slack.tsx
index e5596a6d..86850996 100644
--- a/pages/api/oauth2/redirect/slack.tsx
+++ b/pages/api/oauth2/redirect/slack.tsx
@@ -17,8 +17,18 @@ router
   .use(oauthKeys)
 
   .get(async (req, res, next) => {
-    let { workspace = '', connector = '' } = req.query;
-    const query = { ...req.credentials, workspace: workspace, connector };
+    let { workspace = '', connector = '', oauth_keys = 'private' } = req.query;
+
+    let credentials = { ...(req.credentials ?? {}) };
+
+    if (oauth_keys === 'public') {
+      credentials = {
+        client_id: process.env.AUTH_SLACK_CLIENT_ID,
+        client_secret: process.env.AUTH_SLACK_CLIENT_SECRET
+      };
+    }
+
+    const query = { ...credentials, workspace: workspace, connector: connector, oauth_keys: oauth_keys };
     const strategy = createStrategy(query);
 
     return passport.authenticate(strategy, { session: 'false' }, async (err: any, user: any) => {
@@ -26,12 +36,12 @@ router
         provider: user?.provider ?? 'slack',
         access_token: user?.['_accessToken'] ?? '',
         refresh_token: user?._refreshToken ?? '',
-        id: user.profile.email,
-        unique_id: user.profile.email,
+        id: user?.profile?.email ?? '',
+        unique_id: user?.profile?.email ?? '',
         bot_user_id: user?.['_bot_user_id'] ?? '',
-        email: user.profile.email,
-        name: user.profile.real_name,
-        image: user.profile.image_original
+        email: user?.profile?.email ?? '',
+        name: user?.profile?.real_name ?? '',
+        image: user?.profile?.image_original ?? ''
       });
 
       res.redirect('/auth/callback?' + params.toString());
diff --git a/pages/auth/callback/index.tsx b/pages/auth/callback/index.tsx
index 500765bd..828ac58e 100644
--- a/pages/auth/callback/index.tsx
+++ b/pages/auth/callback/index.tsx
@@ -23,9 +23,7 @@ const OAuthRedirectPage = () => {
   const dispatch = useDispatch<AppDispatch>();
 
   /** Redux store */
-  const connection_flow = useSelector(
-    (state: RootState) => state.connectionFlow
-  );
+  const connection_flow = useSelector((state: RootState) => state.connectionFlow);
   const { flowState: {} = {} } = connection_flow;
 
   const appState = useSelector((state: RootState) => state.appFlow.appState);
@@ -109,6 +107,7 @@ const OAuthRedirectPage = () => {
 
 export const getOAuthParams = (params: any) => {
   const oAuthParams = params || {};
+
   const { provider = '' } = oAuthParams;
   switch (provider) {
     case 'facebook':
diff --git a/pages/spaces/[wid]/connections/destinations/index.tsx b/pages/spaces/[wid]/connections/destinations/index.tsx
index 54e217e4..f9320668 100644
--- a/pages/spaces/[wid]/connections/destinations/index.tsx
+++ b/pages/spaces/[wid]/connections/destinations/index.tsx
@@ -15,11 +15,7 @@ import { NextPageWithLayout } from '@/pages_app';
 
 import SidebarLayout from '@layouts/SidebarLayout';
 
-import {
-  ConnectionType,
-  ConnectionsPageTitle,
-  CreateConnectionTitle
-} from '@content/Connections/ConnectionModel';
+import { ConnectionType, ConnectionsPageTitle, CreateConnectionTitle } from '@content/Connections/ConnectionModel';
 import Connections from '@content/Connections';
 
 import constants from '@constants/index';
diff --git a/pages/spaces/[wid]/connections/warehouses/index.tsx b/pages/spaces/[wid]/connections/warehouses/index.tsx
index 43fd9826..d7247435 100644
--- a/pages/spaces/[wid]/connections/warehouses/index.tsx
+++ b/pages/spaces/[wid]/connections/warehouses/index.tsx
@@ -15,11 +15,7 @@ import { NextPageWithLayout } from '@/pages_app';
 
 import SidebarLayout from '@layouts/SidebarLayout';
 
-import {
-  ConnectionType,
-  ConnectionsPageTitle,
-  CreateConnectionTitle
-} from '@content/Connections/ConnectionModel';
+import { ConnectionType, ConnectionsPageTitle, CreateConnectionTitle } from '@content/Connections/ConnectionModel';
 import Connections from '@content/Connections';
 
 import constants from '@constants/index';
diff --git a/src/components/FormInput/FormField.tsx b/src/components/FormInput/FormField.tsx
index 82e61c36..2e7570db 100644
--- a/src/components/FormInput/FormField.tsx
+++ b/src/components/FormInput/FormField.tsx
@@ -17,6 +17,7 @@ interface FormFieldProps extends FormObject {
   oauth_error?: string;
   control: any;
   isConnectorConfigured?: boolean;
+  isConfigurationRequired?: boolean;
   handleOnConfigureButtonClick: (data: any) => void;
 }
 
@@ -33,6 +34,7 @@ const FormField = ({
   selectedConnector,
   onClick,
   isConnectorConfigured,
+  isConfigurationRequired,
   handleOnConfigureButtonClick,
   hasAuthorizedOAuth,
   oauth_error,
@@ -60,6 +62,7 @@ const FormField = ({
         label={label}
         onClick={onClick}
         isConnectorConfigured={isConnectorConfigured}
+        isConfigurationRequired={isConfigurationRequired}
         handleOnConfigureButtonClick={handleOnConfigureButtonClick}
         oAuthProvider={oAuthProvider}
         oauth_error={oauth_error}
diff --git a/src/components/FormInput/FormFieldAuth.tsx b/src/components/FormInput/FormFieldAuth.tsx
index 3db5b59b..f345ec80 100644
--- a/src/components/FormInput/FormFieldAuth.tsx
+++ b/src/components/FormInput/FormFieldAuth.tsx
@@ -4,7 +4,7 @@
  * Author: Nagendra S @ valmi.io
  */
 
-import { Box, Button, IconButton, InputLabel, Stack, Typography, styled } from '@mui/material';
+import { Box, Button, IconButton, InputLabel, Stack, Tooltip, Typography, styled } from '@mui/material';
 
 import {
   getOauthColorCode,
@@ -48,6 +48,7 @@ const FormFieldAuth = (props: any) => {
     hasOAuthAuthorized,
     oauth_error = '',
     isConnectorConfigured,
+    isConfigurationRequired,
     handleOnConfigureButtonClick
   } = props;
 
@@ -55,86 +56,98 @@ const FormFieldAuth = (props: any) => {
     <>
       <Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
         <Label>{label}</Label>
-        {!isConnectorConfigured ? (
-          <Button
-            sx={{ mt: { xs: 2, md: 0 }, fontWeight: 500, fontSize: 14 }}
-            variant="text"
-            size="small"
-            onClick={() => handleOnConfigureButtonClick({ oAuthProvider: getOAuthProvider(oAuthProvider) })}
-          >
-            {'Configure'}
-          </Button>
-        ) : (
-          <Stack sx={{ display: 'flex', flexDirection: 'row' }}>
-            <Label>{'Configured'}</Label>
-            <IconButton color={hasOAuthAuthorized ? 'primary' : 'error'}>
-              <CustomIcon icon={hasOAuthAuthorized ? faCheckCircle : faCircleXmark} />
-            </IconButton>
-          </Stack>
-        )}
+        {isConfigurationRequired ? (
+          !isConnectorConfigured ? (
+            <Button
+              sx={{ mt: { xs: 2, md: 0 }, fontWeight: 500, fontSize: 14 }}
+              variant="text"
+              size="small"
+              onClick={() => handleOnConfigureButtonClick({ oAuthProvider: getOAuthProvider(oAuthProvider) })}
+            >
+              {'Configure'}
+            </Button>
+          ) : (
+            <Stack sx={{ display: 'flex', flexDirection: 'row' }}>
+              <Label>{'Configured'}</Label>
+              <IconButton color={hasOAuthAuthorized ? 'primary' : 'error'}>
+                <CustomIcon icon={hasOAuthAuthorized ? faCheckCircle : faCircleXmark} />
+              </IconButton>
+            </Stack>
+          )
+        ) : null}
       </Stack>
       <Item>
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            padding: getOAuthProvider(oAuthProvider) !== 'google' ? 1 : 0,
-            borderRadius: getOAuthProvider(oAuthProvider) !== 'google' ? 0.5 : 0,
-            height: 50,
-            backgroundColor: getOauthColorCode({
-              oAuth: getOAuthProvider(oAuthProvider)
-            }),
-            cursor: !isConnectorConfigured ? 'not-allowed' : 'pointer',
-            boxShadow: getOAuthProvider(oAuthProvider) === 'hubspot' ? '0px 0px 3px rgba(0, 0, 0, 0.4)' : 0,
-            width: '100%'
-          }}
-          onClick={() => isConnectorConfigured && onClick({ oAuthProvider: getOAuthProvider(oAuthProvider) })}
-        >
-          {getOAuthProvider(oAuthProvider) === 'google' ? (
-            <Box
-              sx={{
-                display: 'flex',
-                height: '100%',
-                width: 50,
-                backgroundColor: '#fff',
-                border: '1px solid #4285F4',
-                alignItems: 'center',
-                justifyContent: 'center',
-                marginRight: 3
-              }}
-            >
-              {' '}
+        <Tooltip title={isConfigurationRequired && !isConnectorConfigured ? 'This OAuth requires configuration' : ''}>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              padding: getOAuthProvider(oAuthProvider) !== 'google' ? 1 : 0,
+              borderRadius: getOAuthProvider(oAuthProvider) !== 'google' ? 0.5 : 0,
+              height: 50,
+              backgroundColor: getOauthColorCode({
+                oAuth: getOAuthProvider(oAuthProvider)
+              }),
+              cursor: isConfigurationRequired && !isConnectorConfigured ? 'not-allowed' : 'pointer',
+              boxShadow: getOAuthProvider(oAuthProvider) === 'hubspot' ? '0px 0px 3px rgba(0, 0, 0, 0.4)' : 0,
+              width: '100%',
+              opacity: isConfigurationRequired && !isConnectorConfigured ? 0.7 : 1
+            }}
+            onClick={() => {
+              if (!isConfigurationRequired) {
+                onClick({ oAuthProvider: getOAuthProvider(oAuthProvider) });
+              } else if (isConnectorConfigured) {
+                onClick({ oAuthProvider: getOAuthProvider(oAuthProvider) });
+              }
+              return null;
+            }}
+          >
+            {getOAuthProvider(oAuthProvider) === 'google' ? (
+              <Box
+                sx={{
+                  display: 'flex',
+                  height: '100%',
+                  width: 50,
+                  backgroundColor: '#fff',
+                  border: '1px solid #4285F4',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  marginRight: 3
+                }}
+              >
+                {' '}
+                <ImageComponent
+                  size={ImageSize.medium}
+                  alt="oauth icon"
+                  src={getOauthImage({
+                    oAuth: getOAuthProvider(oAuthProvider)
+                  })}
+                />{' '}
+              </Box>
+            ) : (
               <ImageComponent
                 size={ImageSize.medium}
                 alt="oauth icon"
+                style={{ marginRight: 10 }}
                 src={getOauthImage({
                   oAuth: getOAuthProvider(oAuthProvider)
                 })}
-              />{' '}
-            </Box>
-          ) : (
-            <ImageComponent
-              size={ImageSize.medium}
-              alt="oauth icon"
-              style={{ marginRight: 10 }}
-              src={getOauthImage({
+              />
+            )}
+
+            <Typography
+              variant="body1"
+              sx={{
+                color: getOAuthProvider(oAuthProvider) === 'hubspot' ? 'black' : 'white'
+              }}
+            >
+              {' '}
+              {getOauthLoginText({
                 oAuth: getOAuthProvider(oAuthProvider)
               })}
-            />
-          )}
-
-          <Typography
-            variant="body1"
-            sx={{
-              color: getOAuthProvider(oAuthProvider) === 'hubspot' ? 'black' : 'white'
-            }}
-          >
-            {' '}
-            {getOauthLoginText({
-              oAuth: getOAuthProvider(oAuthProvider)
-            })}
-          </Typography>
-        </Box>
+            </Typography>
+          </Box>
+        </Tooltip>
       </Item>
 
       <ErrorStatusText sx={{ ml: 1, fontSize: 14 }} variant="body1">
diff --git a/src/components/PageTitle/index.tsx b/src/components/PageTitle/index.tsx
index 5d3cadd3..0f62ca14 100644
--- a/src/components/PageTitle/index.tsx
+++ b/src/components/PageTitle/index.tsx
@@ -36,12 +36,7 @@ const PageTitle: FC<PageTitleProps> = ({
   let endIcon = null;
   let startIcon = null;
   startIcon = displayStartIcon && <AddTwoToneIcon fontSize="small" />;
-  endIcon = isFetching && (
-    <CircularProgress
-      size={16}
-      sx={{ color: (theme) => theme.colors.alpha.white[100] }}
-    />
-  );
+  endIcon = isFetching && <CircularProgress size={16} sx={{ color: (theme) => theme.colors.alpha.white[100] }} />;
 
   return (
     <Grid
@@ -60,12 +55,7 @@ const PageTitle: FC<PageTitleProps> = ({
       {displayButton && (
         <Grid item>
           {link ? (
-            <Link
-              href={linkurl}
-              target="_blank"
-              passHref
-              style={{ textDecoration: 'none' }}
-            >
+            <Link href={linkurl} target="_blank" passHref style={{ textDecoration: 'none' }}>
               <Button
                 sx={{
                   fontWeight: 'bold',
diff --git a/src/content/ConnectionFlow/ConnectorConfig/ConnectorFormFieldsControl.tsx b/src/content/ConnectionFlow/ConnectorConfig/ConnectorFormFieldsControl.tsx
index dbc48835..a934d3ac 100644
--- a/src/content/ConnectionFlow/ConnectorConfig/ConnectorFormFieldsControl.tsx
+++ b/src/content/ConnectionFlow/ConnectorConfig/ConnectorFormFieldsControl.tsx
@@ -10,6 +10,7 @@ import {
   getOauthRoute,
   hasAuthorizedOAuth
 } from '@/content/ConnectionFlow/ConnectorConfig/ConnectorConfigUtils';
+import { ConnectorType } from '@/content/ConnectionFlow/Connectors/ConnectorsList';
 import { FormContainer } from '@/layouts/FormLayout';
 import { getOAuthParams } from '@/pagesauth/callback';
 import { RootState } from '@/store/reducers';
@@ -38,6 +39,8 @@ const ConnectorFormFieldsControl = (props: any) => {
   const fields = data ? processFields(data) : [];
 
   const handleOAuthButtonClick = async (data: any) => {
+    const { oauth_keys = 'private' } = selected_connector;
+
     const values = formValues;
     let combinedValues = { ...values, ...getOAuthParams(oauth_params) };
 
@@ -55,7 +58,7 @@ const ConnectorFormFieldsControl = (props: any) => {
       const oAuthRoute = getOauthRoute({ oAuth: data.oAuthProvider });
       if (oAuthRoute) {
         let { type = '' } = selected_connector;
-        router.push(`${oAuthRoute}?workspace=${workspaceId}&connector=${type}`);
+        router.push(`${oAuthRoute}?workspace=${workspaceId}&connector=${type}&oauth_keys=${oauth_keys}`);
       }
     }
   };
@@ -101,6 +104,7 @@ const ConnectorFormFieldsControl = (props: any) => {
               oauth_error={oauth_error}
               onClick={handleOAuthButtonClick}
               isConnectorConfigured={isConnectorConfigured({ field, keys })}
+              isConfigurationRequired={isConfigurationRequired({ connector: selected_connector })}
               handleOnConfigureButtonClick={handleOnConfigureButtonClick}
             />
           );
@@ -112,6 +116,12 @@ const ConnectorFormFieldsControl = (props: any) => {
 
 export default ConnectorFormFieldsControl;
 
+const isConfigurationRequired = ({ connector }: { connector: ConnectorType }) => {
+  const { oauth_keys = 'private' } = connector;
+
+  return oauth_keys === 'private' ? true : false;
+};
+
 const isConnectorConfigured = ({ field, keys }: { field: FormObject; keys: TData }) => {
   const { ids = [] } = keys;
   if (field.fieldType !== 'auth') return false;
diff --git a/src/content/ConnectionFlow/ConnectorConfig/index.tsx b/src/content/ConnectionFlow/ConnectorConfig/index.tsx
index c4f64b3c..e0897b8c 100644
--- a/src/content/ConnectionFlow/ConnectorConfig/index.tsx
+++ b/src/content/ConnectionFlow/ConnectorConfig/index.tsx
@@ -77,10 +77,12 @@ const ConnectorConfig = (props: ConnectorConfigProps) => {
         workspaceId: workspaceId
       });
 
-      fetchConnectorOAuthConfig({
-        workspaceId,
-        type: selected_connector.type
-      });
+      if (selected_connector.oauth_keys === 'private') {
+        fetchConnectorOAuthConfig({
+          workspaceId,
+          type: selected_connector.type
+        });
+      }
     }
   }, []);
 
@@ -122,10 +124,12 @@ const ConnectorConfig = (props: ConnectorConfigProps) => {
       return <SkeletonLoader loading={isFetching || isKeysLoading} />;
     }
 
-    if (data && keys) {
+    const displayContent = selected_connector.oauth_keys === 'private' ? !!(data && keys) : !!data;
+
+    if (displayContent) {
       return (
         <FormLayout
-          formComp={<ConnectorFormFieldsControl {...props} data={data} keys={keys} />}
+          formComp={<ConnectorFormFieldsControl {...props} data={data} keys={keys ?? []} />}
           instructionsComp={<ConnectorInstructions data={data} selected_connector={selected_connector} />}
         />
       );
diff --git a/src/content/ConnectionFlow/Connectors/ConnectorsList.tsx b/src/content/ConnectionFlow/Connectors/ConnectorsList.tsx
index cf525942..b16fb1fa 100644
--- a/src/content/ConnectionFlow/Connectors/ConnectorsList.tsx
+++ b/src/content/ConnectionFlow/Connectors/ConnectorsList.tsx
@@ -13,6 +13,7 @@ export type ConnectorType = {
   docker_tag: string;
   oauth?: boolean;
   type: string;
+  oauth_keys?: 'private' | 'public';
 };
 
 const ConnectorsList = ({
diff --git a/src/content/ConnectionFlow/Connectors/ConnectorsPageContent.tsx b/src/content/ConnectionFlow/Connectors/ConnectorsPageContent.tsx
index b88e498e..9a0e61d1 100644
--- a/src/content/ConnectionFlow/Connectors/ConnectorsPageContent.tsx
+++ b/src/content/ConnectionFlow/Connectors/ConnectorsPageContent.tsx
@@ -31,7 +31,9 @@ const ConnectorsPageContent = ({ data }: ConnectorListProps) => {
     initialiseConnectorSelectionState(dispatch, connection_flow);
   }, []);
 
-  const handleItemOnClick = ({ type, display_name }: ConnectorType) => {
+  const handleItemOnClick = (connector: ConnectorType) => {
+    const { type, display_name, oauth_keys = 'private' } = connector;
+
     // increase remaining steps count.
     dispatch(
       setConnectionFlow({
@@ -40,7 +42,8 @@ const ConnectorsPageContent = ({ data }: ConnectorListProps) => {
         steps: currentStep + 1,
         selected_connector: {
           type: type,
-          display_name: display_name
+          display_name: display_name,
+          oauth_keys: oauth_keys
         }
       })
     );
diff --git a/src/content/Connections/ConnectionsTable.tsx b/src/content/Connections/ConnectionsTable.tsx
index 8e087c1c..a0a3c1f5 100644
--- a/src/content/Connections/ConnectionsTable.tsx
+++ b/src/content/Connections/ConnectionsTable.tsx
@@ -52,7 +52,7 @@ const BoxLayout = styled(Box)(({}) => ({
   alignItems: 'center'
 }));
 
-const ConnectionsTable: FC<ConnectionsTableProps> = ({ connections, connectionType }) => {
+const ConnectionsTable = ({ connections = [], connectionType = '' }: ConnectionsTableProps) => {
   const router = useRouter();
   const dispatch = useDispatch<AppDispatch>();
   /** Redux store */
@@ -74,7 +74,8 @@ const ConnectionsTable: FC<ConnectionsTableProps> = ({ connections, connectionTy
         isEditableFlow: true,
         selected_connector: {
           type: connectionType + '_' + connection.type,
-          display_name: connection.display_name
+          display_name: connection.display_name,
+          oauth_keys: connection.oauth_keys
         }
       })
     );
@@ -85,7 +86,7 @@ const ConnectionsTable: FC<ConnectionsTableProps> = ({ connections, connectionTy
     const { external_id = 'account', profile = '' } = account || {};
     let imageSrc = '';
 
-    if (profile) {
+    if (profile && profile !== 'undefined') {
       imageSrc = profile;
     }
 
diff --git a/src/content/Connections/useFilteredConnectionsData.tsx b/src/content/Connections/useFilteredConnectionsData.tsx
index 43bc8f35..2b2e3296 100644
--- a/src/content/Connections/useFilteredConnectionsData.tsx
+++ b/src/content/Connections/useFilteredConnectionsData.tsx
@@ -16,7 +16,8 @@ const getConnectorConfig = (connector: any) => {
     display_name: connector.display_name,
     config: connector.connector_config,
     type: connector.connector_type.split('_')[1],
-    account: connector.account
+    account: connector.account,
+    oauth_keys: connector.oauth_keys
   };
   return config;
 };
diff --git a/src/layouts/PageLayout/index.tsx b/src/layouts/PageLayout/index.tsx
index 1f6efccc..f90119b2 100644
--- a/src/layouts/PageLayout/index.tsx
+++ b/src/layouts/PageLayout/index.tsx
@@ -22,14 +22,7 @@ interface PageLayoutProps {
 }
 
 const PageLayout = (props: PageLayoutProps) => {
-  const {
-    pageHeadTitle,
-    title,
-    displayButton,
-    buttonTitle,
-    handleButtonOnClick,
-    children
-  } = props;
+  const { pageHeadTitle, title, displayButton, buttonTitle, handleButtonOnClick, children } = props;
   return (
     <>
       <PageHead title={pageHeadTitle} />
diff --git a/src/layouts/SidebarLayout/Header/Userbox/index.tsx b/src/layouts/SidebarLayout/Header/Userbox/index.tsx
index c458375a..77a31180 100644
--- a/src/layouts/SidebarLayout/Header/Userbox/index.tsx
+++ b/src/layouts/SidebarLayout/Header/Userbox/index.tsx
@@ -14,7 +14,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Avatar, Box, Button, Divider, Hidden, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import ExpandMoreTwoToneIcon from '@mui/icons-material/ExpandMoreTwoTone';
-import LockOpenTwoToneIcon from '@mui/icons-material/LockOpenTwoTone';
+
+import LogoutIcon from '@mui/icons-material/Logout';
 
 import PopoverComponent from '@components/Popover';
 
@@ -108,7 +109,7 @@ const HeaderUserbox = () => {
           <Divider />
           <Box sx={{ m: 1 }}>
             <Button color="primary" fullWidth onClick={handleSignoutClick}>
-              <LockOpenTwoToneIcon sx={{ mr: 1 }} />
+              <LogoutIcon sx={{ mr: 1 }} />
               Sign out
             </Button>
           </Box>
diff --git a/src/lib/oauth_middleware/index.tsx b/src/lib/oauth_middleware/index.tsx
index cd4b45a1..59371e09 100644
--- a/src/lib/oauth_middleware/index.tsx
+++ b/src/lib/oauth_middleware/index.tsx
@@ -9,7 +9,11 @@ import { getAccessTokenCookie, getBaseUrl } from '@/pagesapi/utils';
 import axios from 'axios';
 
 export const oauthKeys = async (req, res, next) => {
-  let { workspace = '', connector = '' } = req.query;
+  let { workspace = '', connector = '', oauth_keys = 'private' } = req.query;
+
+  if (oauth_keys === 'public') {
+    return next();
+  }
 
   let url = `${getBaseUrl()}/oauth/workspaces/${workspace}/keys/${connector}`;