diff --git a/services/web-ui/src/pages/Integrations/TypeDetailNew/Credentials/Update/index.tsx b/services/web-ui/src/pages/Integrations/TypeDetailNew/Credentials/Update/index.tsx
index 0c5ac79c6..fe74f5225 100644
--- a/services/web-ui/src/pages/Integrations/TypeDetailNew/Credentials/Update/index.tsx
+++ b/services/web-ui/src/pages/Integrations/TypeDetailNew/Credentials/Update/index.tsx
@@ -22,7 +22,9 @@ import {
     AppLayout,
     Box,
     Button,
+    FormField,
     Header,
+    Input,
     Modal,
     Multiselect,
     Pagination,
@@ -69,6 +71,7 @@ export default function UpdateCredentials({
     const [credentialId, setCredentialId] = useState<string>('')
     const [described, setDescribed] = useState<boolean>(false)
     const [credentialType, setCredentialType] = useState<string>('')
+    const [description, setDescription] = useState<string>('')
 
     const UpdateCredentials = () => {
         setLoading(true)
@@ -90,6 +93,8 @@ export default function UpdateCredentials({
             const formData = new FormData()
             // @ts-ignore
             formData.append('credential_type', credentialType)
+            formData.append('description', description)
+
             Object.keys(credential).forEach((key) => {
                 formData.append(`credentials.${key}`, credential[key])
             })
@@ -124,6 +129,7 @@ export default function UpdateCredentials({
              const body = {
                  credentials: credential,
                  credential_type: credentialType,
+                    description: description
              }
              axios
                  .put(
@@ -181,7 +187,9 @@ export default function UpdateCredentials({
                                                             credential_type:
                                                                 cred.label,
                                                         })
-                                                        setCredentialType(cred.label)
+                                                        setCredentialType(
+                                                            cred.label
+                                                        )
                                                     }}
                                                 >
                                                     {cred.label}
@@ -224,6 +232,20 @@ export default function UpdateCredentials({
                                         </>
                                     )
                                 })}
+                                <FormField
+                                    className="w-full"
+                                    label={'Description'}
+                                    errorText={''}
+                                >
+                                    <Input
+                                        className="w-full"
+                                        value={description}
+                                        type={'text'}
+                                        onChange={({ detail }) =>
+                                            setDescription(detail.value)
+                                        }
+                                    />
+                                </FormField>
                             </>
                         </Flex>
                         <Flex
diff --git a/services/web-ui/src/pages/Integrations/TypeDetailNew/Credentials/index.tsx b/services/web-ui/src/pages/Integrations/TypeDetailNew/Credentials/index.tsx
index d6236eb0a..e7e79374b 100644
--- a/services/web-ui/src/pages/Integrations/TypeDetailNew/Credentials/index.tsx
+++ b/services/web-ui/src/pages/Integrations/TypeDetailNew/Credentials/index.tsx
@@ -1,4 +1,4 @@
-import {  Flex, Title } from '@tremor/react'
+import { Flex, Title } from '@tremor/react'
 import {
     useLocation,
     useNavigate,
@@ -26,12 +26,17 @@ import {
 
 import axios from 'axios'
 import { useEffect, useState } from 'react'
-import { Credentials, Integration ,Schema} from '../types'
+import { Credentials, Integration, Schema } from '../types'
 import { dateTimeDisplay } from '../../../../utilities/dateDisplay'
-import { GetActions, GetTableColumns, GetTableColumnsDefintion, GetViewFields, RenderTableField } from '../utils'
+import {
+    GetActions,
+    GetTableColumns,
+    GetTableColumnsDefintion,
+    GetViewFields,
+    RenderTableField,
+} from '../utils'
 import UpdateCredentials from './Update'
 
-
 interface CredentialsListProps {
     name?: string
     integration_type?: string
@@ -43,311 +48,327 @@ export default function CredentialsList({
     integration_type,
     schema,
 }: CredentialsListProps) {
-      const navigate = useNavigate()
-      const [row, setRow] = useState<Credentials[]>([])
+    const navigate = useNavigate()
+    const [row, setRow] = useState<Credentials[]>([])
 
-      const [loading, setLoading] = useState<boolean>(false)
-      const [actionLoading, setActionLoading] = useState<any>({
-          update: false,
-          delete: false,
-          health_check: false,
-      })
+    const [loading, setLoading] = useState<boolean>(false)
+    const [actionLoading, setActionLoading] = useState<any>({
+        update: false,
+        delete: false,
+        health_check: false,
+    })
 
-      const [error, setError] = useState<string>('')
-      const [total_count, setTotalCount] = useState<number>(0)
-      const [selectedItem, setSelectedItem] = useState<Credentials>()
-      const [page, setPage] = useState(0)
-      const [open, setOpen] = useState(false)
-      const [edit, setEdit] = useState(false)
-      const [openInfo, setOpenInfo] = useState(false)
-      const [confirmModal, setConfirmModal] = useState(false)
-      const [action, setAction] = useState()
+    const [error, setError] = useState<string>('')
+    const [total_count, setTotalCount] = useState<number>(0)
+    const [selectedItem, setSelectedItem] = useState<Credentials>()
+    const [page, setPage] = useState(0)
+    const [open, setOpen] = useState(false)
+    const [edit, setEdit] = useState(false)
+    const [openInfo, setOpenInfo] = useState(false)
+    const [confirmModal, setConfirmModal] = useState(false)
+    const [action, setAction] = useState()
 
-      const GetCredentials = () => {
-          setLoading(true)
-          let url = ''
-          if (window.location.origin === 'http://localhost:3000') {
-              url = window.__RUNTIME_CONFIG__.REACT_APP_BASE_URL
-          } else {
-              url = window.location.origin
-          }
-          // @ts-ignore
-          const token = JSON.parse(localStorage.getItem('openg_auth')).token
+    const GetCredentials = () => {
+        setLoading(true)
+        let url = ''
+        if (window.location.origin === 'http://localhost:3000') {
+            url = window.__RUNTIME_CONFIG__.REACT_APP_BASE_URL
+        } else {
+            url = window.location.origin
+        }
+        // @ts-ignore
+        const token = JSON.parse(localStorage.getItem('openg_auth')).token
 
-          const config = {
-              headers: {
-                  Authorization: `Bearer ${token}`,
-              },
-          }
+        const config = {
+            headers: {
+                Authorization: `Bearer ${token}`,
+            },
+        }
 
-          const body = {
-              integration_type: [integration_type],
-          }
-          axios
-              .post(
-                  `${url}/main/integration/api/v1/credentials/list`,
-                  body,
-                  config
-              )
-              .then((res) => {
-                  const data = res.data
+        const body = {
+            integration_type: [integration_type],
+        }
+        axios
+            .post(
+                `${url}/main/integration/api/v1/credentials/list`,
+                body,
+                config
+            )
+            .then((res) => {
+                const data = res.data
 
-                  setTotalCount(data.total_count)
-                  setRow(data.credentials)
-                  setLoading(false)
-              })
-              .catch((err) => {
-                  console.log(err)
-                  setLoading(false)
-              })
-      }
-      const CheckActionsClick = (action: any) => {
-          setAction(action)
-          if (action.type === 'update') {
-              setEdit(true)
-          } else if (action.type === 'delete') {
-              if (action?.confirm?.message && action?.confirm?.message !== '') {
-                  setConfirmModal(true)
-              } else {
-                  CheckActionsSumbit(action)
-              }
-          } 
-      }
-      const CheckActionsSumbit = (action: any) => {
-          if (action?.type === 'update') {
-              setEdit(true)
-          } else if (action?.type === 'delete') {
-              DeleteIntegration()
-          } 
-      }
+                setTotalCount(data.total_count)
+                setRow(data.credentials)
+                setLoading(false)
+            })
+            .catch((err) => {
+                console.log(err)
+                setLoading(false)
+            })
+    }
+    const CheckActionsClick = (action: any) => {
+        setAction(action)
+        if (action.type === 'update') {
+            setEdit(true)
+        } else if (action.type === 'delete') {
+            if (action?.confirm?.message && action?.confirm?.message !== '') {
+                setConfirmModal(true)
+            } else {
+                CheckActionsSumbit(action)
+            }
+        }
+    }
+    const CheckActionsSumbit = (action: any) => {
+        if (action?.type === 'update') {
+            setEdit(true)
+        } else if (action?.type === 'delete') {
+            DeleteIntegration()
+        }
+    }
 
-      const DeleteIntegration = () => {
-          setActionLoading({ ...actionLoading, delete: true })
+    const DeleteIntegration = () => {
+        setActionLoading({ ...actionLoading, delete: true })
 
-          let url = ''
-          if (window.location.origin === 'http://localhost:3000') {
-              url = window.__RUNTIME_CONFIG__.REACT_APP_BASE_URL
-          } else {
-              url = window.location.origin
-          }
-          // @ts-ignore
-          const token = JSON.parse(localStorage.getItem('openg_auth')).token
+        let url = ''
+        if (window.location.origin === 'http://localhost:3000') {
+            url = window.__RUNTIME_CONFIG__.REACT_APP_BASE_URL
+        } else {
+            url = window.location.origin
+        }
+        // @ts-ignore
+        const token = JSON.parse(localStorage.getItem('openg_auth')).token
 
-          const config = {
-              headers: {
-                  Authorization: `Bearer ${token}`,
-              },
-          }
+        const config = {
+            headers: {
+                Authorization: `Bearer ${token}`,
+            },
+        }
 
-          axios
-              .delete(
-                  `${url}/main/integration/api/v1/credentials/${selectedItem?.id}`,
+        axios
+            .delete(
+                `${url}/main/integration/api/v1/credentials/${selectedItem?.id}`,
 
-                  config
-              )
-              .then((res) => {
-                  GetCredentials()
-                  setConfirmModal(false)
-                  setOpenInfo(false)
-                  setActionLoading({ ...actionLoading, delete: false })
-              })
-              .catch((err) => {
-                  console.log(err)
-                  setActionLoading({
-                      ...actionLoading,
-                      delete: false,
-                  })
-              })
-      }
-     
+                config
+            )
+            .then((res) => {
+                GetCredentials()
+                setConfirmModal(false)
+                setOpenInfo(false)
+                setActionLoading({ ...actionLoading, delete: false })
+            })
+            .catch((err) => {
+                console.log(err)
+                setActionLoading({
+                    ...actionLoading,
+                    delete: false,
+                })
+            })
+    }
+    const GetMarkedSecrets = () => {
+        // iterate over key value pair
+        // @ts-ignore
+        if (selectedItem?.masked_secret) {
+            return Object.keys(selectedItem?.masked_secret)?.map((key) => {
+                return {
+                    label: key,
+                    value: selectedItem?.masked_secret[key],
+                }
+            })
+        }
+        return []
+    }
 
-      useEffect(() => {
-          GetCredentials()
-      }, [])
+    useEffect(() => {
+        GetCredentials()
+    }, [])
 
-      return (
-          <>
-              {schema ? (
-                  <>
-                      <AppLayout
-                          toolsOpen={false}
-                          navigationOpen={false}
-                          contentType="table"
-                          toolsHide={true}
-                          navigationHide={true}
-                          splitPanelOpen={openInfo}
-                          onSplitPanelToggle={() => {
-                              setOpenInfo(!openInfo)
-                          }}
-                          splitPanel={
-                              <SplitPanel
-                                  // @ts-ignore
-                                  header={
-                                      selectedItem?.id ? selectedItem?.id : ''
-                                  }
-                              >
-                                  <KeyValuePairs
-                                      columns={
-                                          // @ts-ignore
-                                          GetViewFields(schema, 1)?.length > 4
-                                              ? 4
-                                              : GetViewFields(schema, 1)?.length
-                                      }
-                                      // @ts-ignore
-                                      items={GetViewFields(schema, 1)?.map(
-                                          (field) => {
-                                              return {
-                                                  label: field.title,
-                                                  value: selectedItem
-                                                      ? RenderTableField(
-                                                            field,
-                                                            selectedItem
-                                                        )
-                                                      : '',
-                                              }
-                                          }
-                                      )}
-                                  />
-                                  <Flex
-                                      className="mt-5 gap-2 "
-                                      justifyContent="end"
-                                      flexDirection="row"
-                                      alignItems="end"
-                                  >
-                                      <>
-                                          {GetActions(1, schema)?.map(
-                                              (action) => {
-                                                  if (action.type !== 'view') {
-                                                      return (
-                                                          <>
-                                                              <Button
-                                                                  loading={
-                                                                      actionLoading[
-                                                                          action
-                                                                              .type
-                                                                      ]
-                                                                  }
-                                                                  onClick={() => {
-                                                                      CheckActionsClick(
-                                                                          action
-                                                                      )
-                                                                  }}
-                                                              >
-                                                                  {action.label}
-                                                              </Button>
-                                                          </>
+    return (
+        <>
+            {schema ? (
+                <>
+                    <AppLayout
+                        toolsOpen={false}
+                        navigationOpen={false}
+                        contentType="table"
+                        toolsHide={true}
+                        navigationHide={true}
+                        splitPanelOpen={openInfo}
+                        onSplitPanelToggle={() => {
+                            setOpenInfo(!openInfo)
+                        }}
+                        splitPanel={
+                            <SplitPanel
+                                // @ts-ignore
+                                header={
+                                    selectedItem?.id ? selectedItem?.id : ''
+                                }
+                            >
+                                <KeyValuePairs
+                                    columns={
+                                        // @ts-ignore
+                                        GetViewFields(schema, 1)?.length > 4
+                                            ? 4
+                                            : GetViewFields(schema, 1)?.length
+                                    }
+                                    // @ts-ignore
+                                    items={GetViewFields(schema, 1)?.map(
+                                        (field) => {
+                                            return {
+                                                label: field.title,
+                                                value: selectedItem
+                                                    ? RenderTableField(
+                                                          field,
+                                                          selectedItem
                                                       )
-                                                  }
-                                              }
-                                          )}
-                                      </>
-                                  </Flex>
-                              </SplitPanel>
-                          }
-                          content={
-                              <Table
-                                  className="  min-h-[450px]"
-                                  variant="full-page"
-                                  // resizableColumns
-                                  renderAriaLive={({
-                                      firstIndex,
-                                      lastIndex,
-                                      totalItemsCount,
-                                  }) =>
-                                      `Displaying items ${firstIndex} to ${lastIndex} of ${totalItemsCount}`
-                                  }
-                                  onSortingChange={(event) => {
-                                      // setSort(event.detail.sortingColumn.sortingField)
-                                      // setSortOrder(!sortOrder)
-                                  }}
-                                  // sortingColumn={sort}
-                                  // sortingDescending={sortOrder}
-                                  // sortingDescending={sortOrder == 'desc' ? true : false}
-                                  // @ts-ignore
-                                  onRowClick={(event) => {
-                                      const row = event.detail.item
-                                      // @ts-ignore
-                                      setSelectedItem(row)
-                                      setOpenInfo(true)
-                                  }}
-                                  // @ts-ignore
+                                                    : '',
+                                            }
+                                        }
+                                    )}
+                                />
+                                <KeyValuePairs
+                                    className='mt-5'
+                                    columns={
+                                        GetMarkedSecrets().length > 4
+                                            ? 4
+                                            : GetMarkedSecrets().length
+                                    }
+                                    items={GetMarkedSecrets()}
+                                />
+                                <Flex
+                                    className="mt-5 gap-2 "
+                                    justifyContent="end"
+                                    flexDirection="row"
+                                    alignItems="end"
+                                >
+                                    <>
+                                        {GetActions(1, schema)?.map(
+                                            (action) => {
+                                                if (action.type !== 'view') {
+                                                    return (
+                                                        <>
+                                                            <Button
+                                                                loading={
+                                                                    actionLoading[
+                                                                        action
+                                                                            .type
+                                                                    ]
+                                                                }
+                                                                onClick={() => {
+                                                                    CheckActionsClick(
+                                                                        action
+                                                                    )
+                                                                }}
+                                                            >
+                                                                {action.label}
+                                                            </Button>
+                                                        </>
+                                                    )
+                                                }
+                                            }
+                                        )}
+                                    </>
+                                </Flex>
+                            </SplitPanel>
+                        }
+                        content={
+                            <Table
+                                className="  min-h-[450px]"
+                                variant="full-page"
+                                // resizableColumns
+                                renderAriaLive={({
+                                    firstIndex,
+                                    lastIndex,
+                                    totalItemsCount,
+                                }) =>
+                                    `Displaying items ${firstIndex} to ${lastIndex} of ${totalItemsCount}`
+                                }
+                                onSortingChange={(event) => {
+                                    // setSort(event.detail.sortingColumn.sortingField)
+                                    // setSortOrder(!sortOrder)
+                                }}
+                                // sortingColumn={sort}
+                                // sortingDescending={sortOrder}
+                                // sortingDescending={sortOrder == 'desc' ? true : false}
+                                // @ts-ignore
+                                onRowClick={(event) => {
+                                    const row = event.detail.item
+                                    // @ts-ignore
+                                    setSelectedItem(row)
+                                    setOpenInfo(true)
+                                }}
+                                // @ts-ignore
 
-                                  columnDefinitions={GetTableColumns(
-                                      1,
-                                      schema
-                                  )?.map((field) => {
-                                      return {
-                                          id: field.key,
-                                          header: field.title,
-                                          // @ts-ignore
-                                          cell: (item) => (
-                                              <>
-                                                  {RenderTableField(
-                                                      field,
-                                                      item
-                                                  )}
-                                              </>
-                                          ),
-                                          // sortingField: 'providerConnectionID',
-                                          isRowHeader: true,
-                                          maxWidth: 100,
-                                      }
-                                  })}
-                                  columnDisplay={GetTableColumnsDefintion(
-                                      1,
-                                      schema
-                                  )}
-                                  enableKeyboardNavigation
-                                  // @ts-ignore
-                                  items={row?.length > 0 ? row : []}
-                                  loading={loading}
-                                  loadingText="Loading resources"
-                                  // stickyColumns={{ first: 0, last: 1 }}
-                                  // stripedRows
-                                  trackBy="id"
-                                  empty={
-                                      <Box
-                                          margin={{ vertical: 'xs' }}
-                                          textAlign="center"
-                                          color="inherit"
-                                      >
-                                          <SpaceBetween size="m">
-                                              <b>No resources</b>
-                                          </SpaceBetween>
-                                      </Box>
-                                  }
-                                  filter={
-                                      ''
-                                      // <PropertyFilter
-                                      //     // @ts-ignore
-                                      //     query={undefined}
-                                      //     // @ts-ignore
-                                      //     onChange={({ detail }) => {
-                                      //         // @ts-ignore
-                                      //         setQueries(detail)
-                                      //     }}
-                                      //     // countText="5 matches"
-                                      //     enableTokenGroups
-                                      //     expandToViewport
-                                      //     filteringAriaLabel="Control Categories"
-                                      //     // @ts-ignore
-                                      //     // filteringOptions={filters}
-                                      //     filteringPlaceholder="Control Categories"
-                                      //     // @ts-ignore
-                                      //     filteringOptions={undefined}
-                                      //     // @ts-ignore
+                                columnDefinitions={GetTableColumns(
+                                    1,
+                                    schema
+                                )?.map((field) => {
+                                    return {
+                                        id: field.key,
+                                        header: field.title,
+                                        // @ts-ignore
+                                        cell: (item) => (
+                                            <>{RenderTableField(field, item)}</>
+                                        ),
+                                        // sortingField: 'providerConnectionID',
+                                        isRowHeader: true,
+                                        maxWidth: 100,
+                                    }
+                                })}
+                                columnDisplay={GetTableColumnsDefintion(
+                                    1,
+                                    schema
+                                )}
+                                enableKeyboardNavigation
+                                // @ts-ignore
+                                items={row?.length > 0 ? row : []}
+                                loading={loading}
+                                loadingText="Loading resources"
+                                // stickyColumns={{ first: 0, last: 1 }}
+                                // stripedRows
+                                trackBy="id"
+                                empty={
+                                    <Box
+                                        margin={{ vertical: 'xs' }}
+                                        textAlign="center"
+                                        color="inherit"
+                                    >
+                                        <SpaceBetween size="m">
+                                            <b>No resources</b>
+                                        </SpaceBetween>
+                                    </Box>
+                                }
+                                filter={
+                                    ''
+                                    // <PropertyFilter
+                                    //     // @ts-ignore
+                                    //     query={undefined}
+                                    //     // @ts-ignore
+                                    //     onChange={({ detail }) => {
+                                    //         // @ts-ignore
+                                    //         setQueries(detail)
+                                    //     }}
+                                    //     // countText="5 matches"
+                                    //     enableTokenGroups
+                                    //     expandToViewport
+                                    //     filteringAriaLabel="Control Categories"
+                                    //     // @ts-ignore
+                                    //     // filteringOptions={filters}
+                                    //     filteringPlaceholder="Control Categories"
+                                    //     // @ts-ignore
+                                    //     filteringOptions={undefined}
+                                    //     // @ts-ignore
 
-                                      //     filteringProperties={undefined}
-                                      //     // filteringProperties={
-                                      //     //     filterOption
-                                      //     // }
-                                      // />
-                                  }
-                                  header={
-                                      <Header
-                                          actions={
-                                              <Flex className="gap-1">
-                                                  {/* <Button
+                                    //     filteringProperties={undefined}
+                                    //     // filteringProperties={
+                                    //     //     filterOption
+                                    //     // }
+                                    // />
+                                }
+                                header={
+                                    <Header
+                                        actions={
+                                            <Flex className="gap-1">
+                                                {/* <Button
                                                       // icon={PlusIcon}
                                                       onClick={() =>
                                                           setOpen(true)
@@ -356,94 +377,90 @@ export default function CredentialsList({
                                                       Add New {`${name}`}{' '}
                                                       Integration
                                                   </Button> */}
-                                                  {/* <Button
+                                                {/* <Button
                                             // icon={PencilIcon}
                                             onClick={() => setEdit(true)}
                                         >
                                             Edit Integration
                                         </Button> */}
-                                                  <Button
-                                                      // icon={PencilIcon}
-                                                      onClick={() => {
-                                                          GetCredentials()
-                                                      }}
-                                                  >
-                                                      Reload
-                                                  </Button>
-                                              </Flex>
-                                          }
-                                          className="w-full"
-                                      >
-                                          {name} Credentials{' '}
-                                          <span className=" font-medium">
-                                              ({total_count})
-                                          </span>
-                                      </Header>
-                                  }
-                                  pagination={
-                                      <Pagination
-                                          currentPageIndex={page + 1}
-                                          pagesCount={Math.ceil(
-                                              total_count / 10
-                                          )}
-                                          onChange={({ detail }) =>
-                                              setPage(
-                                                  detail.currentPageIndex - 1
-                                              )
-                                          }
-                                      />
-                                  }
-                              />
-                          }
-                      />
-                      <UpdateCredentials
-                          name={name}
-                          integration_type={integration_type}
-                          schema={schema}
-                          open={edit}
-                          onClose={() => setEdit(false)}
-                          GetList={GetCredentials}
-                          selectedItem={selectedItem}
-                      />
-                      <Modal
-                          visible={confirmModal}
-                          onDismiss={() => setConfirmModal(false)}
-                          // @ts-ignore
-                          header={
-                              // @ts-ignore
+                                                <Button
+                                                    // icon={PencilIcon}
+                                                    onClick={() => {
+                                                        GetCredentials()
+                                                    }}
+                                                >
+                                                    Reload
+                                                </Button>
+                                            </Flex>
+                                        }
+                                        className="w-full"
+                                    >
+                                        {name} Credentials{' '}
+                                        <span className=" font-medium">
+                                            ({total_count})
+                                        </span>
+                                    </Header>
+                                }
+                                pagination={
+                                    <Pagination
+                                        currentPageIndex={page + 1}
+                                        pagesCount={Math.ceil(total_count / 10)}
+                                        onChange={({ detail }) =>
+                                            setPage(detail.currentPageIndex - 1)
+                                        }
+                                    />
+                                }
+                            />
+                        }
+                    />
+                    <UpdateCredentials
+                        name={name}
+                        integration_type={integration_type}
+                        schema={schema}
+                        open={edit}
+                        onClose={() => setEdit(false)}
+                        GetList={GetCredentials}
+                        selectedItem={selectedItem}
+                    />
+                    <Modal
+                        visible={confirmModal}
+                        onDismiss={() => setConfirmModal(false)}
+                        // @ts-ignore
+                        header={
+                            // @ts-ignore
 
-                              action?.label
-                                  ? // @ts-ignore
-                                    action.label + ' ' + selectedItem?.name
-                                  : ''
-                          }
-                      >
-                          <Box className="p-3">
-                              {/* @ts-ignore */}
-                              <Title>{action?.confirm?.message}</Title>
-                              <Flex className="gap-2 mt-5" justifyContent="end">
-                                  <Button
-                                      onClick={() => {
-                                          setConfirmModal(false)
-                                      }}
-                                  >
-                                      Cancel
-                                  </Button>
-                                  <Button
-                                      variant="primary"
-                                      onClick={() => {
-                                          CheckActionsSumbit(action)
-                                      }}
-                                  >
-                                      Confirm
-                                  </Button>
-                              </Flex>
-                          </Box>
-                      </Modal>
-                  </>
-              ) : (
-                  <Spinner />
-              )}
-          </>
-      )
+                            action?.label
+                                ? // @ts-ignore
+                                  action.label + ' ' + selectedItem?.name
+                                : ''
+                        }
+                    >
+                        <Box className="p-3">
+                            {/* @ts-ignore */}
+                            <Title>{action?.confirm?.message}</Title>
+                            <Flex className="gap-2 mt-5" justifyContent="end">
+                                <Button
+                                    onClick={() => {
+                                        setConfirmModal(false)
+                                    }}
+                                >
+                                    Cancel
+                                </Button>
+                                <Button
+                                    variant="primary"
+                                    onClick={() => {
+                                        CheckActionsSumbit(action)
+                                    }}
+                                >
+                                    Confirm
+                                </Button>
+                            </Flex>
+                        </Box>
+                    </Modal>
+                </>
+            ) : (
+                <Spinner />
+            )}
+        </>
+    )
 }
diff --git a/services/web-ui/src/pages/Integrations/TypeDetailNew/Integration/Create/index.tsx b/services/web-ui/src/pages/Integrations/TypeDetailNew/Integration/Create/index.tsx
index 11ecc0c86..08b749d6f 100644
--- a/services/web-ui/src/pages/Integrations/TypeDetailNew/Integration/Create/index.tsx
+++ b/services/web-ui/src/pages/Integrations/TypeDetailNew/Integration/Create/index.tsx
@@ -17,7 +17,9 @@ import {
     AppLayout,
     Box,
     Button,
+    FormField,
     Header,
+    Input,
     Modal,
     Multiselect,
     Pagination,
@@ -57,6 +59,7 @@ export default function CreateIntegration({
     const [credentialId, setCredentialId] = useState<string>('')
     const [described, setDescribed] = useState<boolean>(false)
     const [credentialType, setCredentialType] = useState<string>('')
+    const [description, setDescription] = useState<string>('')
    
     const DiscoverIntegrations = () => {
         setLoading(true)
@@ -85,6 +88,7 @@ export default function CreateIntegration({
         const formData = new FormData()
         // @ts-ignore
         formData.append('integration_type', integration_type)
+        formData.append('description', description)
         formData.append('credential_type', credentialType)
         Object.keys(integration).forEach((key) => {
             formData.append(`credentials.${key}`, integration[key])
@@ -125,6 +129,7 @@ export default function CreateIntegration({
                  integration_type: integration_type,
                  credentials: integration,
                  credential_type: credentialType,
+                    description: description,
              }
              axios
                  .post(
@@ -222,14 +227,15 @@ export default function CreateIntegration({
                                         return (
                                             <>
                                                 <Button
-                                                    onClick={() =>{
+                                                    onClick={() => {
                                                         setSelectedCredential(
                                                             index
                                                         )
-                                                        setCredentialType(credential.label)
-                                                        setIntegration({...integration,credential_type:credential.label})
-                                                    }
-                                                    }
+                                                        setCredentialType(
+                                                            credential.label
+                                                        )
+                                                        // setIntegration({...integration,credential_type:credential.label})
+                                                    }}
                                                 >
                                                     {credential.label}
                                                 </Button>
@@ -377,6 +383,22 @@ export default function CreateIntegration({
                                                 </>
                                             )
                                         })}
+                                        <FormField
+                                            className="w-full"
+                                            label={"Description"}
+                                            errorText={
+                                                ''
+                                            }
+                                        >
+                                            <Input
+                                                className="w-full"
+                                                value={description}
+                                                type={"text"}
+                                                onChange={({ detail }) =>
+                                                    setDescription(detail.value)
+                                                }
+                                            />
+                                        </FormField>
                                     </>
                                 </Flex>
                                 <Flex
diff --git a/services/web-ui/src/pages/Integrations/TypeDetailNew/Integration/index.tsx b/services/web-ui/src/pages/Integrations/TypeDetailNew/Integration/index.tsx
index 6376b3a1b..b2629b0ab 100644
--- a/services/web-ui/src/pages/Integrations/TypeDetailNew/Integration/index.tsx
+++ b/services/web-ui/src/pages/Integrations/TypeDetailNew/Integration/index.tsx
@@ -75,8 +75,7 @@ export default function IntegrationList({
     const [resourceTypes, setResourceTypes] = useState<any>([])
     const [selectedResourceType, setSelectedResourceType] = useState<any>()
     const [runOpen, setRunOpen] = useState(false)
-    const [runAll, setRunAll] = useState(false)
-
+    const [selectedIntegrations, setSelectedIntegrations] = useState<any>([])
     const GetIntegrations = () => {
         setLoading(true)
         let url = ''
@@ -260,7 +259,7 @@ export default function IntegrationList({
             })
     }
 
-    const RunDiscovery = (flag: boolean) => {
+    const RunDiscovery = () => {
         setActionLoading({ ...actionLoading, discovery: true })
         let url = ''
         if (window.location.origin === 'http://localhost:3000') {
@@ -277,29 +276,15 @@ export default function IntegrationList({
             },
         }
         let body ={}
-        if(flag){
-            body = {
-                integration_info:row?.map((item)=>{
-                    return {
-                        integration_type: integration_type,
-                        provider_id: item.provider_id,
-                        integration_id: item.integration_id,
-                        name: item.name,
-                    }
-                }) ,
-            }
-        }
-        else{
-            body = {
-                integration_info: [
-                    {
-                        integration_type: integration_type,
-                        provider_id: selectedItem?.provider_id,
-                        integration_id: selectedItem?.integration_id,
-                        name: selectedItem?.name,
-                    },
-                ],
-            }
+        body = {
+            integration_info: selectedIntegrations?.map((item:any) => {
+                return {
+                    integration_type: integration_type,
+                    provider_id: item.provider_id,
+                    integration_id: item.integration_id,
+                    name: item.name,
+                }
+            }),
         }
         if(selectedResourceType?.length > 0 && selectedResourceType?.length < resourceTypes?.length){
             // @ts-ignore
@@ -462,17 +447,6 @@ export default function IntegrationList({
                                                 }
                                             }
                                         )}
-                                        <Button
-                                            loading={actionLoading['discovery']}
-                                            onClick={() => {
-                                                // RunDiscovery(false)
-                                                GetResourceTypes()
-                                                setRunOpen(true)
-                                                setRunAll(false)
-                                            }}
-                                        >
-                                            Run discovery
-                                        </Button>
                                     </>
                                 </Flex>
                             </SplitPanel>
@@ -604,7 +578,7 @@ export default function IntegrationList({
                                                         DisableIntegration()
                                                     }}
                                                 >
-                                                    Disable Integration
+                                                    Disable Integration Type
                                                 </Button>
                                                 <Button
                                                     loading={
@@ -616,11 +590,9 @@ export default function IntegrationList({
                                                         // RunDiscovery(true)
                                                         GetResourceTypes()
                                                         setRunOpen(true)
-                                                        setRunAll(true)
                                                     }}
                                                 >
-                                                    Run discovery for all
-                                                    integrations
+                                                    Run discovery
                                                 </Button>
                                             </Flex>
                                         }
@@ -702,7 +674,7 @@ export default function IntegrationList({
                         // @ts-ignore
                         header={'Run Discovery'}
                         footer={
-                            <Flex className='gap-3' justifyContent='end'>
+                            <Flex className="gap-3" justifyContent="end">
                                 <Button
                                     onClick={() => {
                                         setRunOpen(false)
@@ -715,11 +687,11 @@ export default function IntegrationList({
                                         if (
                                             selectedResourceType?.length ==
                                             resourceTypes?.length
-                                        ){
+                                        ) {
                                             setSelectedResourceType([])
                                             return
                                         }
-                                            const temp: any = []
+                                        const temp: any = []
                                         resourceTypes?.map((item: any) => {
                                             temp.push({
                                                 label: item?.name,
@@ -730,12 +702,15 @@ export default function IntegrationList({
                                         setSelectedResourceType(temp)
                                     }}
                                 >
-                                  {selectedResourceType?.length == resourceTypes?.length ? 'Unselect all' : 'Select all'}
+                                    {selectedResourceType?.length ==
+                                    resourceTypes?.length
+                                        ? 'Unselect all types'
+                                        : 'Select all types'}
                                 </Button>
                                 <Button
                                     variant="primary"
                                     onClick={() => {
-                                        RunDiscovery(runAll)
+                                        RunDiscovery()
                                     }}
                                 >
                                     Confirm
@@ -743,21 +718,46 @@ export default function IntegrationList({
                             </Flex>
                         }
                     >
-                        <Multiselect
-                            options={resourceTypes?.map((item: any) => {
-                                return {
-                                    label: item?.name,
-                                    value: item?.name,
-                                    params: item?.params,
-                                }
-                            })}
-                            selectedOptions={selectedResourceType}
-                            onChange={({ detail }) => {
-                                setSelectedResourceType(detail.selectedOptions)
-                            }}
-                            tokenLimit={0}
-                            placeholder="Select resource type"
-                        />
+                        <Flex className="gap-5 w-full" flexDirection="col">
+                            <Multiselect
+                                className="w-full"
+                                options={row?.map((item: any) => {
+                                    return {
+                                        label: item?.name,
+                                        value: item?.name,
+                                        provider_id: item.provider_id,
+                                        integration_id: item.integration_id,
+                                        name: item.name,
+                                    }
+                                })}
+                                selectedOptions={selectedIntegrations}
+                                onChange={({ detail }) => {
+                                    setSelectedIntegrations(
+                                        detail.selectedOptions
+                                    )
+                                }}
+                                tokenLimit={5}
+                                placeholder="Select Integration"
+                            />
+                            <Multiselect
+                                className="w-full"
+                                options={resourceTypes?.map((item: any) => {
+                                    return {
+                                        label: item?.name,
+                                        value: item?.name,
+                                        params: item?.params,
+                                    }
+                                })}
+                                selectedOptions={selectedResourceType}
+                                onChange={({ detail }) => {
+                                    setSelectedResourceType(
+                                        detail.selectedOptions
+                                    )
+                                }}
+                                tokenLimit={0}
+                                placeholder="Select resource type"
+                            />
+                        </Flex>
                     </Modal>
                 </>
             ) : (
diff --git a/services/web-ui/src/pages/Integrations/TypeDetailNew/types.ts b/services/web-ui/src/pages/Integrations/TypeDetailNew/types.ts
index e064c673a..8a76c47ca 100644
--- a/services/web-ui/src/pages/Integrations/TypeDetailNew/types.ts
+++ b/services/web-ui/src/pages/Integrations/TypeDetailNew/types.ts
@@ -18,10 +18,17 @@ export interface Credentials {
     secret:           string;
     integration_type: string;
     metadata:         Metadata;
+    masked_secret:    MaskedSecret;
+    integration_count: number;
+    description:      string;
     created_at:       Date;
     updated_at:       Date;
 }
 
+export interface MaskedSecret {
+     [key: string]: string[]
+
+}
 export interface Metadata {
 }
 
@@ -148,6 +155,7 @@ export interface CredentialsField {
     fieldType:      string;
     order:          number;
     sortable?:      boolean;
+    show?:          boolean;
     filterable?:    boolean;
     info:           string;
     detail:         boolean;
diff --git a/services/web-ui/src/pages/Integrations/TypeDetailNew/utils.tsx b/services/web-ui/src/pages/Integrations/TypeDetailNew/utils.tsx
index bbd583980..a8102430c 100644
--- a/services/web-ui/src/pages/Integrations/TypeDetailNew/utils.tsx
+++ b/services/web-ui/src/pages/Integrations/TypeDetailNew/utils.tsx
@@ -22,34 +22,41 @@ export const GetActions=(type: number,schema: Schema | undefined)=>{
 export const GetTableColumns=(type: number,schema: Schema | undefined)=>{
     if(type===1){
         const fields = schema?.render?.credentials?.fields
-        return fields?.sort((a,b)=>a.order-b.order).map((field)=>{
+        
+        return fields
+            ?.filter((field) => field?.show)
+            ?.sort((a, b) => a.order - b.order)
+            .map((field) => {
+                return {
+                    title: field.label,
+                    dataIndex: field.name,
+                    key: field.name,
+                    sorter: field.sortable,
+                    filter: field.filterable,
+                    statusOptions: field.statusOptions,
+                    type: field.fieldType,
+                }
+            })
+        
+    }
+
+    const fields = schema?.render?.integrations?.fields
+  
+
+    return fields
+        // ?.filter((field) => field?.show)
+        ?.sort((a, b) => a.order - b.order)
+        .map((field) => {
             return {
                 title: field.label,
                 dataIndex: field.name,
                 key: field.name,
                 sorter: field.sortable,
                 filter: field.filterable,
-                statusOptions: field.statusOptions,
                 type: field.fieldType,
+                statusOptions: field.statusOptions,
             }
         })
-        
-    }
-
-    const fields = schema?.render?.integrations?.fields
-  
-
-    return fields?.sort((a,b)=>a.order-b.order).map((field)=>{
-        return {
-            title: field.label,
-            dataIndex: field.name,
-            key: field.name,
-            sorter: field.sortable,
-            filter: field.filterable,
-            type: field.fieldType,
-            statusOptions: field.statusOptions,
-        }
-    })
 }
 
 export const GetTableColumnsDefintion=(type: number,schema: Schema | undefined)=>{