diff --git a/client-reactjs/src/App.js b/client-reactjs/src/App.js
index 86c27c402..86530eb2a 100644
--- a/client-reactjs/src/App.js
+++ b/client-reactjs/src/App.js
@@ -57,7 +57,7 @@ const Regulations = React.lazy(() => import('./components/admin/ControlsAndRegul
 const GitHubSettings = React.lazy(() => import('./components/admin/GitHubSettings/GitHubSettings'));
 const ScheduledJobsPage = React.lazy(() => import('./components/admin/ScheduledJobsPage'));
 const Compliance = React.lazy(() => import('./components/admin/Compliance/Compliance'));
-const Integrations = React.lazy(() => import('./components/admin/Integrations'));
+const Integrations = React.lazy(() => import('./components/admin/Integrations/Integrations'));
 const TeamsNotification = React.lazy(() => import('./components/admin/notifications/MsTeams/Teams'));
 
 // Shared layout, etc.
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
new file mode 100644
index 000000000..a068abbbe
--- /dev/null
+++ b/client-reactjs/src/components/admin/Integrations/IntegrationForms/ASRForm.js
@@ -0,0 +1,137 @@
+import React from 'react';
+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(() => {
+    //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,
+      notificationEmails: selectedIntegration?.metaData?.notificationEmails,
+      notificationWebhooks: selectedIntegration?.metaData?.notificationWebhooks,
+    });
+  }, [selectedIntegration]);
+
+  return (
+    <>
+      <Form layout="vertical" form={notificationForm}>
+        <Tabs type="card">
+          <TabPane tab="General" key="1">
+            <h3>General</h3>
+            <Form.Item
+              label="Severity 3 Notification Emails"
+              style={{ width: '100%' }}
+              name="notificationEmailsSev3"
+              validateTrigger={['onChange', 'onBlur']}
+              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
+                checked={selectedIntegration?.config?.megaphoneActive || false}
+                onChange={(e) => {
+                  setActive(e);
+                }}></Switch>
+            </Form.Item>
+            <Form.Item
+              label="Notification Emails"
+              style={{ width: '100%' }}
+              name="notificationEmails"
+              validateTrigger={['onChange', 'onBlur']}
+              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']}>
+              <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>
+      </Form>
+    </>
+  );
+};
+export default ASRForm;
diff --git a/client-reactjs/src/components/admin/Integrations.js b/client-reactjs/src/components/admin/Integrations/Integrations.js
similarity index 62%
rename from client-reactjs/src/components/admin/Integrations.js
rename to client-reactjs/src/components/admin/Integrations/Integrations.js
index 9c73ed006..5dc6d9f09 100644
--- a/client-reactjs/src/components/admin/Integrations.js
+++ b/client-reactjs/src/components/admin/Integrations/Integrations.js
@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { Tooltip, Space, Table, Switch, Modal, Form, Input, Button, message } from 'antd';
+import { Tooltip, Space, Table, Switch, Modal, Button, message } from 'antd';
 import { EditOutlined } from '@ant-design/icons';
-import BreadCrumbs from '../common/BreadCrumbs.js';
-import { authHeader } from '../common/AuthHeader.js';
+import BreadCrumbs from '../../common/BreadCrumbs.js';
+import { authHeader } from '../../common/AuthHeader.js';
 import { useSelector, useDispatch } from 'react-redux';
-import { applicationActions } from '../../redux/actions/Application.js';
-import useWindowSize from '../../hooks/useWindowSize.js';
+import { applicationActions } from '../../../redux/actions/Application.js';
+import useWindowSize from '../../../hooks/useWindowSize.js';
+import ASRForm from './IntegrationForms/ASRForm.js';
 
 const Integrations = () => {
   const [integrations, setIntegrations] = useState([]);
@@ -15,7 +16,7 @@ const Integrations = () => {
   const [selectedIntegration, setSelectedIntegration] = useState({});
   const [notifications, setNotifications] = useState({});
   const [active, setActive] = useState(false);
-  const [notificationForm] = Form.useForm();
+
   const windowSize = useWindowSize();
 
   // Changes modal size per screen vw
@@ -24,6 +25,7 @@ const Integrations = () => {
     if (width > 1500) {
       setModalWidth('40vw');
     } else if (width > 1000) {
+      integrations;
       setModalWidth('60vw');
     } else {
       setModalWidth('100vw');
@@ -48,6 +50,7 @@ const Integrations = () => {
       const response = await fetch(`/api/integrations/get/${applicationId}`, payload);
 
       const data = await response.json();
+
       if (data) {
         setIntegrations(data);
       }
@@ -61,6 +64,7 @@ const Integrations = () => {
     await setModalVisible(true);
     await setSelectedIntegration(record);
     await setNotifications(record.metaData);
+    await setActive(record.config?.megaphoneActive);
   };
 
   const handleSave = async () => {
@@ -82,7 +86,6 @@ const Integrations = () => {
       setModalVisible(false);
       dispatch(applicationActions.getIntegrations(applicationId));
 
-      notificationForm.resetFields();
       message.success('Successfully updated Integration');
     } else {
       message.success('An Error Occured, Integration not updated');
@@ -158,48 +161,17 @@ const Integrations = () => {
         destroyOnClose
         footer={saveBtn}
         title="Integration Settings">
-        <Form layout="vertical" form={notificationForm} initialValues={{ monitoringActive: true }}>
-          <h3>General Settings</h3>
-          <Form.Item
-            label="Severity 3 Notification Emails"
-            style={{ width: '100%' }}
-            name="notificationEmailsSev3"
-            initialValue={selectedIntegration.metaData?.notificationEmailsSev3}
-            validateTrigger={['onChange', 'onBlur']}
-            rules={[{ max: 256, message: 'Maximum of 256 characters allowed' }]}>
-            <Input
-              onChange={(e) => setNotifications({ ...notifications, notificationEmailsSev3: e.target.value })}></Input>
-          </Form.Item>
-          <br />
-          <h3>Megaphone Notification Settings</h3>
-          <Form.Item name="megaphone" label="Active">
-            <Switch
-              defaultChecked={selectedIntegration?.config?.megaphoneActive || false}
-              value={selectedIntegration?.config?.megaphoneActive || false}
-              onChange={(e) => {
-                setActive(e);
-              }}></Switch>
-          </Form.Item>
-          <Form.Item
-            label="Notification Emails"
-            style={{ width: '100%' }}
-            name="notificationEmails"
-            initialValue={selectedIntegration.metaData?.notificationEmails}
-            validateTrigger={['onChange', 'onBlur']}
-            rules={[{ max: 256, message: 'Maximum of 256 characters allowed' }]}>
-            <Input onChange={(e) => setNotifications({ ...notifications, notificationEmails: e.target.value })}></Input>
-          </Form.Item>
-          <Form.Item
-            label="Notification Webhooks"
-            style={{ width: '100%' }}
-            name="notificationWebhooks"
-            initialValue={selectedIntegration.metaData?.notificationWebhooks}
-            validateTrigger={['onChange', 'onBlur']}
-            rules={[{ max: 256, message: 'Maximum of 256 characters allowed' }]}>
-            <Input
-              onChange={(e) => setNotifications({ ...notifications, notificationWebhooks: e.target.value })}></Input>
-          </Form.Item>
-        </Form>
+        {selectedIntegration?.name === 'ASR' && (
+          <>
+            <ASRForm
+              setActive={setActive}
+              setNotifications={setNotifications}
+              selectedIntegration={selectedIntegration}
+              notifications={notifications}
+              handleSave={handleSave}
+            />
+          </>
+        )}
       </Modal>
     </>
   );
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/jobs/orbitMegaphone.js b/server/jobs/orbitMegaphone.js
index 19547cc4b..07375b4d1 100644
--- a/server/jobs/orbitMegaphone.js
+++ b/server/jobs/orbitMegaphone.js
@@ -3,6 +3,7 @@ const sql = require("mssql");
 const models = require("../models");
 const integrations = models.integrations;
 const orbitBuilds = models.orbitBuilds;
+const teamsWebhooks = models.teams_hook;
 const monitoring_notifications = models.monitoring_notifications;
 const notificationTemplate = require("./messageCards/notificationTemplate");
 const { notify } = require("../routes/notifications/email-notification");
@@ -120,37 +121,44 @@ const dbConfig = {
             }
 
             // //build and send Teams notification
-            if (integration.metaData.notificationWebhooks) {
-              let facts = [
-                { name: newBuild.name },
-                { Status: newBuild.metaData.status },
-                { "Sub Status": newBuild.metaData.subStatus },
-                { "Last Run": newBuild.metaData.lastRun },
-                { WorkUnit: newBuild.metaData.workunit },
-              ];
-              let title = "Orbit Build Detectd With Megaphone Status";
-              notification_id = uuidv4();
-              const cardBody = notificationTemplate.orbitBuildMessageCard(
-                title,
-                facts,
-                notification_id
-              );
-
-              await axios.post(
-                integration.metaData.notificationWebhooks,
-                JSON.parse(cardBody)
-              );
-
-              sentNotifications.push({
-                id: notification_id,
-                status: "notified",
-                notifiedTo: integration.metaData.notificationWebhooks,
-                notification_channel: "msTeams",
-                application_id,
-                notification_reason: "Megaphone Substatus",
-                monitoring_id: newBuild.id,
-                monitoring_type: "orbit",
-              });
+            if (integration?.metaData?.notificationWebhooks) {
+              //get the teams webhooks by the ID's in the webhooks
+              for (let hook of integration.metaData.notificationWebhooks) {
+                let teamsHook = await teamsWebhooks.findOne({
+                  where: {
+                    id: hook,
+                  },
+                  raw: true,
+                });
+
+                let facts = [
+                  { name: newBuild.name },
+                  { Status: newBuild.metaData.status },
+                  { "Sub Status": newBuild.metaData.subStatus },
+                  { "Last Run": newBuild.metaData.lastRun },
+                  { WorkUnit: newBuild.metaData.workunit },
+                ];
+                let title = "Orbit Build Detectd With Megaphone Status";
+                notification_id = uuidv4();
+                const cardBody = notificationTemplate.orbitBuildMessageCard(
+                  title,
+                  facts,
+                  notification_id
+                );
+
+                await axios.post(teamsHook.url, JSON.parse(cardBody));
+
+                sentNotifications.push({
+                  id: notification_id,
+                  status: "notified",
+                  notifiedTo: teamsHook.url,
+                  notification_channel: "msTeams",
+                  application_id,
+                  notification_reason: "Megaphone Substatus",
+                  monitoring_id: newBuild.id,
+                  monitoring_type: "orbit",
+                });
+              }
             }
           } else {
             //if it does exist, update the "final status metadata"
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 },