diff --git a/client-reactjs/src/components/admin/ClusterDetails.jsx b/client-reactjs/src/components/admin/ClusterDetails.jsx
index 3891416d5..fb73693b0 100644
--- a/client-reactjs/src/components/admin/ClusterDetails.jsx
+++ b/client-reactjs/src/components/admin/ClusterDetails.jsx
@@ -60,7 +60,7 @@ function ClusterDetails() {
 
   return (
     <div>
-      <Tabs defaultActiveKey="1">
+      <Tabs type="card" defaultActiveKey="1">
         <TabPane tab="Cluster Details" key="1" style={{ minWidth: '480px', maxWidth: '50vw' }}>
           {clusterMetaData ? (
             <>
diff --git a/client-reactjs/src/components/admin/Integrations/IntegrationForms/ASRForm.js b/client-reactjs/src/components/admin/Integrations/IntegrationForms/ASRForm.js
index d1364c53b..a068abbbe 100644
--- a/client-reactjs/src/components/admin/Integrations/IntegrationForms/ASRForm.js
+++ b/client-reactjs/src/components/admin/Integrations/IntegrationForms/ASRForm.js
@@ -1,16 +1,29 @@
 import React from 'react';
-import { useEffect } from 'react';
-import { Form, Input, Switch, Tabs } from 'antd';
+import { useEffect, useState } from 'react';
+import { Form, Select, Switch, Tabs, message } from 'antd';
+import { isEmail } from 'validator';
+import { getAllTeamsHook } from '../../../application/jobMonitoring/jobMonitoringUtils';
 
 const { TabPane } = Tabs;
+const { Option } = Select;
 
 const ASRForm = ({ setNotifications, notifications, setActive, selectedIntegration }) => {
   const [notificationForm] = Form.useForm();
+  const [teamsHooks, setTeamsHook] = useState([]);
 
   useEffect(() => {
-    console.log('setting fields values');
-    console.log(selectedIntegration);
+    //Get all teams hook
+    (async () => {
+      try {
+        const allTeamsHook = await getAllTeamsHook();
+        setTeamsHook(allTeamsHook);
+      } catch (error) {
+        message.error('Error fetching teams hook');
+      }
+    })();
+  }, []);
 
+  useEffect(() => {
     notificationForm.setFieldsValue({
       notificationEmailsSev3: selectedIntegration?.metaData?.notificationEmailsSev3,
       megaphone: selectedIntegration?.config?.megaphoneActive,
@@ -22,7 +35,7 @@ const ASRForm = ({ setNotifications, notifications, setActive, selectedIntegrati
   return (
     <>
       <Form layout="vertical" form={notificationForm}>
-        <Tabs tabPosition="left">
+        <Tabs type="card">
           <TabPane tab="General" key="1">
             <h3>General</h3>
             <Form.Item
@@ -30,18 +43,38 @@ const ASRForm = ({ setNotifications, notifications, setActive, selectedIntegrati
               style={{ width: '100%' }}
               name="notificationEmailsSev3"
               validateTrigger={['onChange', 'onBlur']}
-              rules={[{ max: 256, message: 'Maximum of 256 characters allowed' }]}>
-              <Input
-                onChange={(e) =>
-                  setNotifications({ ...notifications, notificationEmailsSev3: e.target.value })
-                }></Input>
+              rules={[
+                {
+                  validator: (_, value) => {
+                    if (!value || value.length === 0) {
+                      return Promise.reject(new Error('Please add at least one email!'));
+                    }
+                    if (value.length > 20) {
+                      return Promise.reject(new Error('Too many emails'));
+                    }
+                    if (!value.every((v) => isEmail(v))) {
+                      return Promise.reject(new Error('One or more emails are invalid'));
+                    }
+                    return Promise.resolve();
+                  },
+                },
+              ]}>
+              <Select
+                mode="tags"
+                allowClear
+                placeholder="Enter a comma-delimited list of email addresses"
+                tokenSeparators={[',']}
+                onChange={(e) => {
+                  setNotifications({ ...notifications, notificationEmailsSev3: e });
+                }}
+              />
             </Form.Item>
           </TabPane>
           <TabPane tab="Megaphone" key="2">
             <h3>Megaphone</h3>
             <Form.Item name="megaphone" label="Active">
               <Switch
-                defaultChecked={selectedIntegration?.config?.megaphoneActive || false}
+                checked={selectedIntegration?.config?.megaphoneActive || false}
                 onChange={(e) => {
                   setActive(e);
                 }}></Switch>
@@ -51,18 +84,49 @@ const ASRForm = ({ setNotifications, notifications, setActive, selectedIntegrati
               style={{ width: '100%' }}
               name="notificationEmails"
               validateTrigger={['onChange', 'onBlur']}
-              rules={[{ max: 256, message: 'Maximum of 256 characters allowed' }]}>
-              <Input
-                onChange={(e) => setNotifications({ ...notifications, notificationEmails: e.target.value })}></Input>
+              rules={[
+                {
+                  validator: (_, value) => {
+                    if (!value || value.length === 0) {
+                      return Promise.reject(new Error('Please add at least one email!'));
+                    }
+                    if (value.length > 20) {
+                      return Promise.reject(new Error('Too many emails'));
+                    }
+                    if (!value.every((v) => isEmail(v))) {
+                      return Promise.reject(new Error('One or more emails are invalid'));
+                    }
+                    return Promise.resolve();
+                  },
+                },
+              ]}>
+              <Select
+                mode="tags"
+                allowClear
+                placeholder="Enter a comma-delimited list of email addresses"
+                tokenSeparators={[',']}
+                onChange={(e) => {
+                  setNotifications({ ...notifications, notificationEmails: e });
+                }}
+              />
             </Form.Item>
             <Form.Item
               label="Notification Webhooks"
               style={{ width: '100%' }}
               name="notificationWebhooks"
-              validateTrigger={['onChange', 'onBlur']}
-              rules={[{ max: 256, message: 'Maximum of 256 characters allowed' }]}>
-              <Input
-                onChange={(e) => setNotifications({ ...notifications, notificationWebhooks: e.target.value })}></Input>
+              validateTrigger={['onChange', 'onBlur']}>
+              <Select
+                placeholder="Select a teams Channel "
+                mode="multiple"
+                onChange={([e]) => {
+                  setNotifications({ ...notifications, notificationWebhooks: e });
+                }}>
+                {teamsHooks.map((team) => (
+                  <Option key={team.id} value={team.id}>
+                    {team.name}
+                  </Option>
+                ))}
+              </Select>
             </Form.Item>
           </TabPane>
         </Tabs>
diff --git a/client-reactjs/src/components/admin/Integrations/Integrations.js b/client-reactjs/src/components/admin/Integrations/Integrations.js
index 73c83d07e..5dc6d9f09 100644
--- a/client-reactjs/src/components/admin/Integrations/Integrations.js
+++ b/client-reactjs/src/components/admin/Integrations/Integrations.js
@@ -25,6 +25,7 @@ const Integrations = () => {
     if (width > 1500) {
       setModalWidth('40vw');
     } else if (width > 1000) {
+      integrations;
       setModalWidth('60vw');
     } else {
       setModalWidth('100vw');
@@ -49,6 +50,7 @@ const Integrations = () => {
       const response = await fetch(`/api/integrations/get/${applicationId}`, payload);
 
       const data = await response.json();
+
       if (data) {
         setIntegrations(data);
       }
@@ -62,6 +64,7 @@ const Integrations = () => {
     await setModalVisible(true);
     await setSelectedIntegration(record);
     await setNotifications(record.metaData);
+    await setActive(record.config?.megaphoneActive);
   };
 
   const handleSave = async () => {
diff --git a/client-reactjs/src/components/application/Dataflow/DataflowDetails.js b/client-reactjs/src/components/application/Dataflow/DataflowDetails.js
index 8af266379..bc416e988 100644
--- a/client-reactjs/src/components/application/Dataflow/DataflowDetails.js
+++ b/client-reactjs/src/components/application/Dataflow/DataflowDetails.js
@@ -33,6 +33,7 @@ function DataflowDetails() {
       </div>
       <div>
         <Tabs
+          type="card"
           defaultActiveKey="1"
           destroyInactiveTabPane={true}
           tabBarExtraContent={
diff --git a/client-reactjs/src/components/application/IndexDetails.js b/client-reactjs/src/components/application/IndexDetails.js
index 37acf2deb..acf8245a5 100644
--- a/client-reactjs/src/components/application/IndexDetails.js
+++ b/client-reactjs/src/components/application/IndexDetails.js
@@ -611,7 +611,7 @@ class IndexDetails extends PureComponent {
             </div>
           ) : null}
 
-          <Tabs defaultActiveKey="1" tabBarExtraContent={this.props.displayingInModal ? null : controls}>
+          <Tabs type="card" defaultActiveKey="1" tabBarExtraContent={this.props.displayingInModal ? null : controls}>
             <TabPane tab={<Text text="Basic" />} key="1">
               <Form
                 {...formItemLayout}
diff --git a/client-reactjs/src/components/application/Jobs/JobDetails.js b/client-reactjs/src/components/application/Jobs/JobDetails.js
index ada50d900..c5531d8d3 100644
--- a/client-reactjs/src/components/application/Jobs/JobDetails.js
+++ b/client-reactjs/src/components/application/Jobs/JobDetails.js
@@ -469,6 +469,7 @@ class JobDetails extends Component {
       <>
         <JobForm {...commonProps}>
           <Tabs
+            type="card"
             defaultActiveKey={selectedTabPaneKey}
             tabBarExtraContent={displayingInModal ? null : <Controls {...commonProps} {...controlProps} />}
             onChange={(activeKey) => this.setState({ selectedTabPaneKey: activeKey })}>
diff --git a/client-reactjs/src/components/application/Jobs/ManualJobDetail.jsx b/client-reactjs/src/components/application/Jobs/ManualJobDetail.jsx
index 427d01138..a6022c908 100644
--- a/client-reactjs/src/components/application/Jobs/ManualJobDetail.jsx
+++ b/client-reactjs/src/components/application/Jobs/ManualJobDetail.jsx
@@ -110,7 +110,7 @@ function ManualJobDetail() {
       <div className="assetTitle">
         {<Text text="Job" />}: {jobDetails.name}
       </div>
-      <Tabs tabBarExtraContent={actions}>
+      <Tabs type="card" tabBarExtraContent={actions}>
         <TabPane tab={<Text text="Basic" />} key="1">
           {jobData.map((item, i) => (
             <Row id={i} gutter={{ xs: 8, sm: 8, md: 8, lg: 8 }} key={item.label}>
diff --git a/client-reactjs/src/components/application/VisualizationDetails.js b/client-reactjs/src/components/application/VisualizationDetails.js
index 87a8b20d9..8d856e92f 100644
--- a/client-reactjs/src/components/application/VisualizationDetails.js
+++ b/client-reactjs/src/components/application/VisualizationDetails.js
@@ -170,7 +170,7 @@ function VisualizationDetails() {
 
   return (
     <React.Fragment>
-      <Tabs defaultActiveKey="1" tabBarExtraContent={controls}>
+      <Tabs type="card" defaultActiveKey="1" tabBarExtraContent={controls}>
         <TabPane tab={<Text text="Basic" />} key="1">
           <Spin spinning={formState.loading}>
             <Form {...formItemLayout} labelAlign="left" form={form} onFinish={handleOk}>
diff --git a/client-reactjs/src/components/application/actions/actions.jsx b/client-reactjs/src/components/application/actions/actions.jsx
index 52081314a..c726b9dae 100644
--- a/client-reactjs/src/components/application/actions/actions.jsx
+++ b/client-reactjs/src/components/application/actions/actions.jsx
@@ -12,7 +12,7 @@ function Actions() {
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
         <BreadCrumbs />
       </div>
-      <Tabs defaultActiveKey="1">
+      <Tabs type="card" defaultActiveKey="1">
         <TabPane tab={<Text text="File Upload" />} key="1">
           <LandingZoneUpload />
         </TabPane>
diff --git a/client-reactjs/src/components/application/clusterMonitoring/index.jsx b/client-reactjs/src/components/application/clusterMonitoring/index.jsx
index a7a9a966b..cddffee76 100644
--- a/client-reactjs/src/components/application/clusterMonitoring/index.jsx
+++ b/client-reactjs/src/components/application/clusterMonitoring/index.jsx
@@ -307,6 +307,7 @@ function ClusterMonitoring() {
           initialValues={{ msTeamsGroups: [''], emails: [''] }}>
           <Tabs
             activeKey={activeTab}
+            type="card"
             onTabClick={(record) => {
               setActiveTab(record);
             }}>
diff --git a/client-reactjs/src/components/application/dashboard/ExportMenu/DashboardModal.jsx b/client-reactjs/src/components/application/dashboard/ExportMenu/DashboardModal.jsx
index 452105069..bfd87b14f 100644
--- a/client-reactjs/src/components/application/dashboard/ExportMenu/DashboardModal.jsx
+++ b/client-reactjs/src/components/application/dashboard/ExportMenu/DashboardModal.jsx
@@ -131,7 +131,7 @@ const DashboardModal = ({ modalVisible, setModalVisible, applicationId, authRedu
         }
         footer={false}
         style={{ marginTop: '200px' }}>
-        <Tabs>
+        <Tabs type="card">
           <TabPane tab="Active Keys" key="1">
             <div style={{ marginBottom: '1rem' }}>
               <DashboardApiTable
diff --git a/client-reactjs/src/components/application/dashboard/Orbit/Orbit.jsx b/client-reactjs/src/components/application/dashboard/Orbit/Orbit.jsx
index df8a70c96..c5c5a456a 100644
--- a/client-reactjs/src/components/application/dashboard/Orbit/Orbit.jsx
+++ b/client-reactjs/src/components/application/dashboard/Orbit/Orbit.jsx
@@ -439,6 +439,7 @@ function Orbit() {
   return (
     <div>
       <Tabs
+        type="card"
         tabBarExtraContent={
           <>
             <Space style={{ marginRight: '1rem' }}>
diff --git a/client-reactjs/src/components/application/dashboard/clusterUsage/index.js b/client-reactjs/src/components/application/dashboard/clusterUsage/index.js
index cb7612da7..6949e67d5 100644
--- a/client-reactjs/src/components/application/dashboard/clusterUsage/index.js
+++ b/client-reactjs/src/components/application/dashboard/clusterUsage/index.js
@@ -103,6 +103,7 @@ function ClusterUsage() {
     <Tabs
       tabBarExtraContent={<ExportMenu selectedCluster={selectedCluster} />}
       activeKey={activeTab}
+      type="card"
       onChange={handleTabSwitching}>
       <Tabs.TabPane tab="Usage history" key="1">
         <Filters
diff --git a/client-reactjs/src/components/application/dashboard/notifications/NotificationsTable.jsx b/client-reactjs/src/components/application/dashboard/notifications/NotificationsTable.jsx
index 7424b76d9..5ed4364e3 100644
--- a/client-reactjs/src/components/application/dashboard/notifications/NotificationsTable.jsx
+++ b/client-reactjs/src/components/application/dashboard/notifications/NotificationsTable.jsx
@@ -239,7 +239,7 @@ function NotificationsTable({ applicationId, setSelectedNotificationForBulkActio
             Close
           </Button>
         }>
-        <Tabs>
+        <Tabs type="card">
           <Tabs.TabPane tab="Metadata" key="1">
             <Descriptions bordered column={1} size="small">
               {selectedNotificationDetails.map((item) => (
diff --git a/client-reactjs/src/components/application/dashboard/notifications/index.js b/client-reactjs/src/components/application/dashboard/notifications/index.js
index 1982b038b..4fd4d73fc 100644
--- a/client-reactjs/src/components/application/dashboard/notifications/index.js
+++ b/client-reactjs/src/components/application/dashboard/notifications/index.js
@@ -181,6 +181,7 @@ function Index() {
   return (
     <div>
       <Tabs
+        type="card"
         tabBarExtraContent={
           <Space>
             <Button
diff --git a/client-reactjs/src/components/application/fileMonitoring/FileMonitoringModal.jsx b/client-reactjs/src/components/application/fileMonitoring/FileMonitoringModal.jsx
index 30dcb869f..59949dbf7 100644
--- a/client-reactjs/src/components/application/fileMonitoring/FileMonitoringModal.jsx
+++ b/client-reactjs/src/components/application/fileMonitoring/FileMonitoringModal.jsx
@@ -299,6 +299,7 @@ function FileMonitoringModal({
         </div>
       ) : (
         <Tabs
+          type="card"
           activeKey={activeTab}
           onTabClick={(record) => {
             setActiveTab(record);
diff --git a/client-reactjs/src/components/application/jobMonitoring/AddEditJobMonitoringModal.jsx b/client-reactjs/src/components/application/jobMonitoring/AddEditJobMonitoringModal.jsx
index ad3590b40..9ca350dc8 100644
--- a/client-reactjs/src/components/application/jobMonitoring/AddEditJobMonitoringModal.jsx
+++ b/client-reactjs/src/components/application/jobMonitoring/AddEditJobMonitoringModal.jsx
@@ -163,7 +163,7 @@ const AddEditJobMonitoringModal = ({
       onCancel={handleCancel}
       footer={renderFooter()}
       maskClosable={false}>
-      <Tabs activeKey={activeTab.toString()} onChange={(key) => handleTabChange(key)}>
+      <Tabs type="card" activeKey={activeTab.toString()} onChange={(key) => handleTabChange(key)}>
         {tabs.map((tab, index) => (
           <Tabs.TabPane
             key={index}
diff --git a/client-reactjs/src/components/application/orbitMonitoring/BasicTab.jsx b/client-reactjs/src/components/application/orbitMonitoring/BasicTab.jsx
index e518cb571..666c68189 100644
--- a/client-reactjs/src/components/application/orbitMonitoring/BasicTab.jsx
+++ b/client-reactjs/src/components/application/orbitMonitoring/BasicTab.jsx
@@ -41,9 +41,6 @@ const BasicTab = ({
         finalProductOptions.push({ label: product.product_name, value: product.product_name });
       });
 
-      console.log(productOptions);
-      console.log(finalProductOptions);
-
       setProducts(finalProductOptions);
     } catch (error) {
       console.log(error);
@@ -68,9 +65,6 @@ const BasicTab = ({
         finalDomainOptions.push({ label: domain.business_unit, value: domain.business_unit });
       });
 
-      console.log(domainOptions);
-      console.log(finalDomainOptions);
-
       setBusinessUnits(finalDomainOptions);
     } catch (error) {
       console.log(error);
diff --git a/client-reactjs/src/components/application/orbitMonitoring/OrbitMonitoringModal.jsx b/client-reactjs/src/components/application/orbitMonitoring/OrbitMonitoringModal.jsx
index 5b6c6dbe0..fab8ea4d9 100644
--- a/client-reactjs/src/components/application/orbitMonitoring/OrbitMonitoringModal.jsx
+++ b/client-reactjs/src/components/application/orbitMonitoring/OrbitMonitoringModal.jsx
@@ -299,7 +299,8 @@ const OrbitMonitoringModal = ({
       confirmLoading={confirmLoading}
       destroyOnClose
       footer={btns[activeTab]}
-      style={{ marginTop: '100px' }}>
+      style={{ marginTop: '100px' }}
+      title="Orbit Monitoring">
       {fetchingOrbitDetails ? (
         <div style={{ textAlign: 'center' }}>
           <Spin />
@@ -308,6 +309,7 @@ const OrbitMonitoringModal = ({
         <Form layout="vertical" form={entryForm}>
           <Tabs
             activeKey={activeTab}
+            type="card"
             onTabClick={(record) => {
               setActiveTab(record);
             }}>
diff --git a/client-reactjs/src/components/application/queries/QueryDetails.js b/client-reactjs/src/components/application/queries/QueryDetails.js
index 271adec5b..c719f9b1f 100644
--- a/client-reactjs/src/components/application/queries/QueryDetails.js
+++ b/client-reactjs/src/components/application/queries/QueryDetails.js
@@ -605,7 +605,7 @@ class QueryDetails extends PureComponent {
               <Spin spinning={this.state.initialDataLoading} size="large" />
             </div>
           ) : null}
-          <Tabs defaultActiveKey="1" tabBarExtraContent={controls}>
+          <Tabs type="card" defaultActiveKey="1" tabBarExtraContent={controls}>
             <TabPane tab={<Text text="Basic" />} key="1">
               <Form
                 {...formItemLayout}
diff --git a/client-reactjs/src/components/application/superfileMonitoring/SuperFileMonitoringModal.jsx b/client-reactjs/src/components/application/superfileMonitoring/SuperFileMonitoringModal.jsx
index 69224cc59..75ffa1dd4 100644
--- a/client-reactjs/src/components/application/superfileMonitoring/SuperFileMonitoringModal.jsx
+++ b/client-reactjs/src/components/application/superfileMonitoring/SuperFileMonitoringModal.jsx
@@ -316,6 +316,7 @@ const SuperFileMonitoringModal = ({
         ) : (
           <Form layout="vertical" form={entryForm}>
             <Tabs
+              type="card"
               activeKey={activeTab}
               onTabClick={(record) => {
                 setActiveTab(record);
diff --git a/client-reactjs/src/components/application/templates/FileTemplate.jsx b/client-reactjs/src/components/application/templates/FileTemplate.jsx
index 445b823d7..1ee4372d4 100644
--- a/client-reactjs/src/components/application/templates/FileTemplate.jsx
+++ b/client-reactjs/src/components/application/templates/FileTemplate.jsx
@@ -415,7 +415,7 @@ function FileTemplate({ match, selectedAsset = {}, displayingInModal, onClose })
   return (
     <React.Fragment>
       <div className={displayingInModal ? 'assetDetails-content-wrapper-modal' : 'assetDetails-content-wrapper'}>
-        <Tabs defaultActiveKey="1" tabBarExtraContent={displayingInModal ? null : controls}>
+        <Tabs type="card" defaultActiveKey="1" tabBarExtraContent={displayingInModal ? null : controls}>
           <TabPane tab={<Text text="Basic" />} key="1">
             <Form
               {...formItemLayout}
diff --git a/server/routes/integrations/read.js b/server/routes/integrations/read.js
index 8000d8e45..78a9044b0 100644
--- a/server/routes/integrations/read.js
+++ b/server/routes/integrations/read.js
@@ -91,6 +91,8 @@ router.put(
 
       const { id } = oldintegration;
 
+      console.log(req.body);
+
       // adjusting
       await integrations.update(
         { metaData: req.body.notifications, config: req.body.active },