diff --git a/Common/UI/Components/ComingSoon/ComingSoon.tsx b/Common/UI/Components/ComingSoon/ComingSoon.tsx
index 011814eb52..1cabd9363b 100644
--- a/Common/UI/Components/ComingSoon/ComingSoon.tsx
+++ b/Common/UI/Components/ComingSoon/ComingSoon.tsx
@@ -7,13 +7,18 @@ export interface ComponentProps {
   description?: string | undefined;
 }
 
-const ComingSoon: FunctionComponent<ComponentProps> = (props: ComponentProps): ReactElement => {
+const ComingSoon: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
   return (
     <EmptyState
       id="coming-soon"
       icon={IconProp.CursorArrowRays}
       title={props.title || "Coming soon!"}
-      description={props.description || "We will be launching this feature very soon. Stay Tuned!"}
+      description={
+        props.description ||
+        "We will be launching this feature very soon. Stay Tuned!"
+      }
     />
   );
 };
diff --git a/Common/UI/Components/Icon/Icon.tsx b/Common/UI/Components/Icon/Icon.tsx
index d24bcf8498..4f87617113 100644
--- a/Common/UI/Components/Icon/Icon.tsx
+++ b/Common/UI/Components/Icon/Icon.tsx
@@ -149,10 +149,13 @@ const Icon: FunctionComponent<ComponentProps> = ({
   } else if (icon === IconProp.MicrosoftTeams) {
     return getSvgWrapper(
       <g id="Layer_2">
-        <path d="M84.316,36.416c6.085,0,11.036-4.951,11.036-11.036c-0.606-14.641-21.468-14.637-22.072,0
+        <path
+          d="M84.316,36.416c6.085,0,11.036-4.951,11.036-11.036c-0.606-14.641-21.468-14.637-22.072,0
 			C73.281,31.465,78.232,36.416,84.316,36.416z M84.316,17.112c4.559,0,8.268,3.709,8.268,8.268
-			c-0.416,10.953-16.122,10.95-16.535,0C76.049,20.821,79.757,17.112,84.316,17.112z"></path>
-        <path d="M96.113,61.082c0.764,0,1.384-0.62,1.384-1.384c0,0,0-16.301,0-16.301c0-3.01-2.449-5.46-5.459-5.46h-19.16
+			c-0.416,10.953-16.122,10.95-16.535,0C76.049,20.821,79.757,17.112,84.316,17.112z"
+        ></path>
+        <path
+          d="M96.113,61.082c0.764,0,1.384-0.62,1.384-1.384c0,0,0-16.301,0-16.301c0-3.01-2.449-5.46-5.459-5.46h-19.16
 			c0,0-20.423,0-20.423,0s0-1.64,0-1.64c9.026,1.171,17.22-6.115,17.159-15.207c-0.83-20.309-29.804-20.347-30.651,0
 			c0,1.356,0.192,2.685,0.541,3.978H7.815c-2.931,0-5.315,2.384-5.315,5.315v39.324c0,2.931,2.384,5.316,5.315,5.316
 			c0,0,21.221,0,21.221,0c5.912,22.693,35.61,26.086,46.354,5.388c10.372,4.11,22.324-4.116,22.107-15.316
@@ -164,13 +167,16 @@ const Icon: FunctionComponent<ComponentProps> = ({
 			c3.971-0.022,36.329,0.016,39.324,0c1.405,0,2.547,1.143,2.547,2.547v4.26c-0.003,1.94,0.002,32.142,0,35.064
 			c0,1.405-1.143,2.548-2.548,2.548H30.116c0,0-22.3,0-22.3,0C6.411,72.256,5.268,71.113,5.268,69.708z M53.25,91.559
 			c-10.104-0.247-18.665-6.959-21.373-16.535h15.263c2.931,0,5.316-2.384,5.316-5.316V40.706c0,0,20.392,0,20.392,0
-			c1.43,0.031,2.635,1.309,2.578,2.741c0,0,0,24.782,0,24.782C75.816,80.412,65.841,91.334,53.25,91.559z"></path>
-        <path d="M31.348,62.825v-3.127c0-0.764-0.62-1.384-1.384-1.384c-0.765,0-1.384,0.62-1.384,1.384v1.743h-2.24V41.419
+			c1.43,0.031,2.635,1.309,2.578,2.741c0,0,0,24.782,0,24.782C75.816,80.412,65.841,91.334,53.25,91.559z"
+        ></path>
+        <path
+          d="M31.348,62.825v-3.127c0-0.764-0.62-1.384-1.384-1.384c-0.765,0-1.384,0.62-1.384,1.384v1.743h-2.24V41.419
 			c0-0.765-0.62-1.384-1.384-1.384h-6.441v-1.384H36.44v1.384h-6.477c-0.765,0-1.384,0.62-1.384,1.384v13.73
 			c0,0.764,0.62,1.384,1.384,1.384c0.765,0,1.384-0.62,1.384-1.384V42.804h6.477c0.765,0,1.384-0.62,1.384-1.384v-4.152
 			c0-0.765-0.62-1.384-1.384-1.384H17.131c-0.765,0-1.384,0.62-1.384,1.384v4.152c0,0.765,0.62,1.384,1.384,1.384h6.441v20.022
-			c0,0.764,0.62,1.384,1.384,1.384h5.008C30.728,64.209,31.348,63.589,31.348,62.825z"></path>
-      </g>
+			c0,0.764,0.62,1.384,1.384,1.384h5.008C30.728,64.209,31.348,63.589,31.348,62.825z"
+        ></path>
+      </g>,
     );
   } else if (icon === IconProp.ShieldCheck) {
     return getSvgWrapper(
diff --git a/Dashboard/src/Pages/Alerts/SideMenu.tsx b/Dashboard/src/Pages/Alerts/SideMenu.tsx
index 58ea6d96f3..da78218e21 100644
--- a/Dashboard/src/Pages/Alerts/SideMenu.tsx
+++ b/Dashboard/src/Pages/Alerts/SideMenu.tsx
@@ -64,7 +64,9 @@ const DashboardSideMenu: FunctionComponent<ComponentProps> = (
           link={{
             title: "Microsoft Teams",
             to: RouteUtil.populateRouteParams(
-              RouteMap[PageMap.ALERTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS] as Route,
+              RouteMap[
+                PageMap.ALERTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS
+              ] as Route,
             ),
           }}
           icon={IconProp.MicrosoftTeams}
diff --git a/Dashboard/src/Pages/Alerts/WorkspaceConnectionMicrosoftTeams.tsx b/Dashboard/src/Pages/Alerts/WorkspaceConnectionMicrosoftTeams.tsx
new file mode 100644
index 0000000000..0fd90a218e
--- /dev/null
+++ b/Dashboard/src/Pages/Alerts/WorkspaceConnectionMicrosoftTeams.tsx
@@ -0,0 +1,86 @@
+import WorkspaceType from "Common/Types/Workspace/WorkspaceType";
+import WorkspaceNotificationRuleTable from "../../Components/Workspace/WorkspaceNotificationRulesTable";
+import PageComponentProps from "../PageComponentProps";
+import React, { FunctionComponent, ReactElement } from "react";
+import NotificationRuleEventType from "Common/Types/Workspace/NotificationRules/EventType";
+import WorkspaceUtil from "../../Utils/Workspace/Workspace";
+import API from "Common/UI/Utils/API/API";
+import Exception from "Common/Types/Exception/Exception";
+import PageLoader from "Common/UI/Components/Loader/PageLoader";
+import ErrorMessage from "Common/UI/Components/ErrorMessage/ErrorMessage";
+import EmptyState from "Common/UI/Components/EmptyState/EmptyState";
+import IconProp from "Common/Types/Icon/IconProp";
+import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
+import ComingSoon from "Common/UI/Components/ComingSoon/ComingSoon";
+
+const IncidentsPage: FunctionComponent<
+  PageComponentProps
+> = (): ReactElement => {
+  const [isMicrosoftTeamsConnected, setIsMicrosoftTeamsConnected] =
+    React.useState<boolean>(false);
+  const [isLoading, setIsLoading] = React.useState<boolean>(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const [showComingSoon, setShowComingSoon] = React.useState<boolean>(false);
+
+  const loadItems: PromiseVoidFunction = async (): Promise<void> => {
+    setShowComingSoon(true);
+    try {
+      setError(null);
+      setIsLoading(true);
+      const isMicrosoftTeamsConnected: boolean = await WorkspaceUtil.isWorkspaceConnected(
+        WorkspaceType.MicrosoftTeams,
+      );
+
+      setIsMicrosoftTeamsConnected(isMicrosoftTeamsConnected);
+      setIsLoading(false);
+    } catch (error) {
+      setIsLoading(false);
+      setError(API.getFriendlyErrorMessage(error as Exception));
+    }
+  };
+
+  React.useEffect(() => {
+    loadItems().catch(() => {
+      // Do nothing
+    });
+  }, []);
+
+  if (isLoading) {
+    return <PageLoader isVisible={true} />;
+  }
+
+  if (error) {
+    return <ErrorMessage message={error} />;
+  }
+
+  if(showComingSoon){
+    return <ComingSoon
+      title="Microsoft Teams Integration is coming soon, but you can still integrate with Workflows!"
+      description="We are working hard to bring you the Microsoft Teams integration. In the meantime, you can still integrate with Workflows to receive alerts in Microsoft Teams. Please click on Workflows in the top navigation to get started."
+    /> 
+  }
+
+  return (
+    <div>
+      {isMicrosoftTeamsConnected && (
+        <WorkspaceNotificationRuleTable
+          workspaceType={WorkspaceType.MicrosoftTeams}
+          eventType={NotificationRuleEventType.Alert}
+        />
+      )}
+      {!isMicrosoftTeamsConnected && (
+        <div>
+          <EmptyState
+            id="MicrosoftTeams-connection"
+            icon={IconProp.MicrosoftTeams}
+            title="MicrosoftTeams is not connected yet!"
+            description="Connect your Microsoft Teams workspace to receive alert notifications. Please go to Project Settings > Workspace Connections > Microsoft Teams to connect your workspace."
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default IncidentsPage;
diff --git a/Dashboard/src/Pages/Alerts/WorkspaceConnectionSlack.tsx b/Dashboard/src/Pages/Alerts/WorkspaceConnectionSlack.tsx
index 7c90ca3d88..5ba1650106 100644
--- a/Dashboard/src/Pages/Alerts/WorkspaceConnectionSlack.tsx
+++ b/Dashboard/src/Pages/Alerts/WorkspaceConnectionSlack.tsx
@@ -24,9 +24,8 @@ const IncidentsPage: FunctionComponent<
     try {
       setError(null);
       setIsLoading(true);
-      const isSlackConnected: boolean = await WorkspaceUtil.isWorkspaceConnected(
-        WorkspaceType.Slack,
-      );
+      const isSlackConnected: boolean =
+        await WorkspaceUtil.isWorkspaceConnected(WorkspaceType.Slack);
 
       setIsSlackConnected(isSlackConnected);
       setIsLoading(false);
diff --git a/Dashboard/src/Pages/Alerts/WorkspaceConnectionTeams.tsx b/Dashboard/src/Pages/Alerts/WorkspaceConnectionTeams.tsx
index 0fd90a218e..f500cbda41 100644
--- a/Dashboard/src/Pages/Alerts/WorkspaceConnectionTeams.tsx
+++ b/Dashboard/src/Pages/Alerts/WorkspaceConnectionTeams.tsx
@@ -28,9 +28,8 @@ const IncidentsPage: FunctionComponent<
     try {
       setError(null);
       setIsLoading(true);
-      const isMicrosoftTeamsConnected: boolean = await WorkspaceUtil.isWorkspaceConnected(
-        WorkspaceType.MicrosoftTeams,
-      );
+      const isMicrosoftTeamsConnected: boolean =
+        await WorkspaceUtil.isWorkspaceConnected(WorkspaceType.MicrosoftTeams);
 
       setIsMicrosoftTeamsConnected(isMicrosoftTeamsConnected);
       setIsLoading(false);
@@ -54,11 +53,13 @@ const IncidentsPage: FunctionComponent<
     return <ErrorMessage message={error} />;
   }
 
-  if(showComingSoon){
-    return <ComingSoon
-      title="Microsoft Teams Integration is coming soon, but you can still integrate with Workflows!"
-      description="We are working hard to bring you the Microsoft Teams integration. In the meantime, you can still integrate with Workflows to receive alerts in Microsoft Teams. Please click on Workflows in the top navigation to get started."
-    /> 
+  if (showComingSoon) {
+    return (
+      <ComingSoon
+        title="Microsoft Teams Integration is coming soon, but you can still integrate with Workflows!"
+        description="We are working hard to bring you the Microsoft Teams integration. In the meantime, you can still integrate with Workflows to receive alerts in Microsoft Teams. Please click on Workflows in the top navigation to get started."
+      />
+    );
   }
 
   return (
diff --git a/Dashboard/src/Pages/Incidents/SideMenu.tsx b/Dashboard/src/Pages/Incidents/SideMenu.tsx
index b37fde1253..eff5eeb149 100644
--- a/Dashboard/src/Pages/Incidents/SideMenu.tsx
+++ b/Dashboard/src/Pages/Incidents/SideMenu.tsx
@@ -60,20 +60,18 @@ const DashboardSideMenu: FunctionComponent<ComponentProps> = (
           icon={IconProp.Slack}
         />
 
-<SideMenuItem
+        <SideMenuItem
           link={{
             title: "Slack",
             to: RouteUtil.populateRouteParams(
-              RouteMap[PageMap.INCIDENTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS] as Route,
+              RouteMap[
+                PageMap.INCIDENTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS
+              ] as Route,
             ),
           }}
           icon={IconProp.MicrosoftTeams}
         />
-
-        
       </SideMenuSection>
-
-      
     </SideMenu>
   );
 };
diff --git a/Dashboard/src/Pages/Incidents/WorkspaceConnectionMicrosoftTeams.tsx b/Dashboard/src/Pages/Incidents/WorkspaceConnectionMicrosoftTeams.tsx
new file mode 100644
index 0000000000..6ad743f41f
--- /dev/null
+++ b/Dashboard/src/Pages/Incidents/WorkspaceConnectionMicrosoftTeams.tsx
@@ -0,0 +1,86 @@
+import WorkspaceType from "Common/Types/Workspace/WorkspaceType";
+import WorkspaceNotificationRuleTable from "../../Components/Workspace/WorkspaceNotificationRulesTable";
+import PageComponentProps from "../PageComponentProps";
+import React, { FunctionComponent, ReactElement } from "react";
+import NotificationRuleEventType from "Common/Types/Workspace/NotificationRules/EventType";
+import WorkspaceUtil from "../../Utils/Workspace/Workspace";
+import API from "Common/UI/Utils/API/API";
+import Exception from "Common/Types/Exception/Exception";
+import PageLoader from "Common/UI/Components/Loader/PageLoader";
+import ErrorMessage from "Common/UI/Components/ErrorMessage/ErrorMessage";
+import EmptyState from "Common/UI/Components/EmptyState/EmptyState";
+import IconProp from "Common/Types/Icon/IconProp";
+import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
+import ComingSoon from "Common/UI/Components/ComingSoon/ComingSoon";
+
+const IncidentsPage: FunctionComponent<
+  PageComponentProps
+> = (): ReactElement => {
+  const [isMicrosoftTeamsConnected, setIsMicrosoftTeamsConnected] =
+    React.useState<boolean>(false);
+  const [isLoading, setIsLoading] = React.useState<boolean>(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const [showComingSoon, setShowComingSoon] = React.useState<boolean>(false);
+
+  const loadItems: PromiseVoidFunction = async (): Promise<void> => {
+    setShowComingSoon(true);
+    try {
+      setError(null);
+      setIsLoading(true);
+      const isMicrosoftTeamsConnected: boolean = await WorkspaceUtil.isWorkspaceConnected(
+        WorkspaceType.MicrosoftTeams,
+      );
+
+      setIsMicrosoftTeamsConnected(isMicrosoftTeamsConnected);
+      setIsLoading(false);
+    } catch (error) {
+      setIsLoading(false);
+      setError(API.getFriendlyErrorMessage(error as Exception));
+    }
+  };
+
+  React.useEffect(() => {
+    loadItems().catch(() => {
+      // Do nothing
+    });
+  }, []);
+
+  if (isLoading) {
+    return <PageLoader isVisible={true} />;
+  }
+
+  if (error) {
+    return <ErrorMessage message={error} />;
+  }
+
+  if(showComingSoon){
+    return <ComingSoon
+      title="Microsoft Teams Integration is coming soon, but you can still integrate with Workflows!"
+      description="We are working hard to bring you the Microsoft Teams integration. In the meantime, you can still integrate with Workflows to receive incidents in Microsoft Teams. Please click on Workflows in the top navigation to get started."
+    /> 
+  }
+
+  return (
+    <div>
+      {isMicrosoftTeamsConnected && (
+        <WorkspaceNotificationRuleTable
+          workspaceType={WorkspaceType.MicrosoftTeams}
+          eventType={NotificationRuleEventType.Incident}
+        />
+      )}
+      {!isMicrosoftTeamsConnected && (
+        <div>
+          <EmptyState
+            id="MicrosoftTeams-connection"
+            icon={IconProp.MicrosoftTeams}
+            title="MicrosoftTeams is not connected yet!"
+            description="Connect your Microsoft Teams workspace to receive alert notifications. Please go to Project Settings > Workspace Connections > Microsoft Teams to connect your workspace."
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default IncidentsPage;
diff --git a/Dashboard/src/Pages/Incidents/WorkspaceConnectionSlack.tsx b/Dashboard/src/Pages/Incidents/WorkspaceConnectionSlack.tsx
index f2df437d2c..e1a23dfc16 100644
--- a/Dashboard/src/Pages/Incidents/WorkspaceConnectionSlack.tsx
+++ b/Dashboard/src/Pages/Incidents/WorkspaceConnectionSlack.tsx
@@ -24,9 +24,8 @@ const IncidentsPage: FunctionComponent<
     try {
       setError(null);
       setIsLoading(true);
-      const isSlackConnected: boolean = await WorkspaceUtil.isWorkspaceConnected(
-        WorkspaceType.Slack,
-      );
+      const isSlackConnected: boolean =
+        await WorkspaceUtil.isWorkspaceConnected(WorkspaceType.Slack);
 
       setIsSlackConnected(isSlackConnected);
       setIsLoading(false);
diff --git a/Dashboard/src/Pages/Incidents/WorkspaceConnectionTeams.tsx b/Dashboard/src/Pages/Incidents/WorkspaceConnectionTeams.tsx
index 6ad743f41f..ed616f5ccb 100644
--- a/Dashboard/src/Pages/Incidents/WorkspaceConnectionTeams.tsx
+++ b/Dashboard/src/Pages/Incidents/WorkspaceConnectionTeams.tsx
@@ -28,9 +28,8 @@ const IncidentsPage: FunctionComponent<
     try {
       setError(null);
       setIsLoading(true);
-      const isMicrosoftTeamsConnected: boolean = await WorkspaceUtil.isWorkspaceConnected(
-        WorkspaceType.MicrosoftTeams,
-      );
+      const isMicrosoftTeamsConnected: boolean =
+        await WorkspaceUtil.isWorkspaceConnected(WorkspaceType.MicrosoftTeams);
 
       setIsMicrosoftTeamsConnected(isMicrosoftTeamsConnected);
       setIsLoading(false);
@@ -54,11 +53,13 @@ const IncidentsPage: FunctionComponent<
     return <ErrorMessage message={error} />;
   }
 
-  if(showComingSoon){
-    return <ComingSoon
-      title="Microsoft Teams Integration is coming soon, but you can still integrate with Workflows!"
-      description="We are working hard to bring you the Microsoft Teams integration. In the meantime, you can still integrate with Workflows to receive incidents in Microsoft Teams. Please click on Workflows in the top navigation to get started."
-    /> 
+  if (showComingSoon) {
+    return (
+      <ComingSoon
+        title="Microsoft Teams Integration is coming soon, but you can still integrate with Workflows!"
+        description="We are working hard to bring you the Microsoft Teams integration. In the meantime, you can still integrate with Workflows to receive incidents in Microsoft Teams. Please click on Workflows in the top navigation to get started."
+      />
+    );
   }
 
   return (
diff --git a/Dashboard/src/Pages/ScheduledMaintenanceEvents/SideMenu.tsx b/Dashboard/src/Pages/ScheduledMaintenanceEvents/SideMenu.tsx
index 4faf861f41..f1b6a7c360 100644
--- a/Dashboard/src/Pages/ScheduledMaintenanceEvents/SideMenu.tsx
+++ b/Dashboard/src/Pages/ScheduledMaintenanceEvents/SideMenu.tsx
@@ -63,18 +63,18 @@ const DashboardSideMenu: FunctionComponent<ComponentProps> = (
           icon={IconProp.Slack}
         />
 
-<SideMenuItem
+        <SideMenuItem
           link={{
             title: "Microsoft Teams",
             to: RouteUtil.populateRouteParams(
               RouteMap[
-                PageMap.SCHEDULED_MAINTENANCE_EVENTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS
+                PageMap
+                  .SCHEDULED_MAINTENANCE_EVENTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS
               ] as Route,
             ),
           }}
           icon={IconProp.MicrosoftTeams}
         />
-
       </SideMenuSection>
     </SideMenu>
   );
diff --git a/Dashboard/src/Pages/ScheduledMaintenanceEvents/WorkspaceConnectionMicrosoftTeams.tsx b/Dashboard/src/Pages/ScheduledMaintenanceEvents/WorkspaceConnectionMicrosoftTeams.tsx
new file mode 100644
index 0000000000..485d4a7f20
--- /dev/null
+++ b/Dashboard/src/Pages/ScheduledMaintenanceEvents/WorkspaceConnectionMicrosoftTeams.tsx
@@ -0,0 +1,86 @@
+import WorkspaceType from "Common/Types/Workspace/WorkspaceType";
+import WorkspaceNotificationRuleTable from "../../Components/Workspace/WorkspaceNotificationRulesTable";
+import PageComponentProps from "../PageComponentProps";
+import React, { FunctionComponent, ReactElement } from "react";
+import NotificationRuleEventType from "Common/Types/Workspace/NotificationRules/EventType";
+import WorkspaceUtil from "../../Utils/Workspace/Workspace";
+import API from "Common/UI/Utils/API/API";
+import Exception from "Common/Types/Exception/Exception";
+import PageLoader from "Common/UI/Components/Loader/PageLoader";
+import ErrorMessage from "Common/UI/Components/ErrorMessage/ErrorMessage";
+import EmptyState from "Common/UI/Components/EmptyState/EmptyState";
+import IconProp from "Common/Types/Icon/IconProp";
+import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
+import ComingSoon from "Common/UI/Components/ComingSoon/ComingSoon";
+
+const IncidentsPage: FunctionComponent<
+  PageComponentProps
+> = (): ReactElement => {
+  const [isMicrosoftTeamsConnected, setIsMicrosoftTeamsConnected] =
+    React.useState<boolean>(false);
+  const [isLoading, setIsLoading] = React.useState<boolean>(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const [showComingSoon, setShowComingSoon] = React.useState<boolean>(false);
+
+  const loadItems: PromiseVoidFunction = async (): Promise<void> => {
+    setShowComingSoon(true);
+    try {
+      setError(null);
+      setIsLoading(true);
+      const isMicrosoftTeamsConnected: boolean = await WorkspaceUtil.isWorkspaceConnected(
+        WorkspaceType.MicrosoftTeams,
+      );
+
+      setIsMicrosoftTeamsConnected(isMicrosoftTeamsConnected);
+      setIsLoading(false);
+    } catch (error) {
+      setIsLoading(false);
+      setError(API.getFriendlyErrorMessage(error as Exception));
+    }
+  };
+
+  React.useEffect(() => {
+    loadItems().catch(() => {
+      // Do nothing
+    });
+  }, []);
+
+  if (isLoading) {
+    return <PageLoader isVisible={true} />;
+  }
+
+  if (error) {
+    return <ErrorMessage message={error} />;
+  }
+
+  if(showComingSoon){
+    return <ComingSoon
+      title="Microsoft Teams Integration is coming soon, but you can still integrate with Workflows!"
+      description="We are working hard to bring you the Microsoft Teams integration. In the meantime, you can still integrate with Workflows to receive incidents in Microsoft Teams. Please click on Workflows in the top navigation to get started."
+    /> 
+  }
+
+  return (
+    <div>
+      {isMicrosoftTeamsConnected && (
+        <WorkspaceNotificationRuleTable
+          workspaceType={WorkspaceType.MicrosoftTeams}
+          eventType={NotificationRuleEventType.ScheduledMaintenance}
+        />
+      )}
+      {!isMicrosoftTeamsConnected && (
+        <div>
+          <EmptyState
+            id="MicrosoftTeams-connection"
+            icon={IconProp.MicrosoftTeams}
+            title="MicrosoftTeams is not connected yet!"
+            description="Connect your Microsoft Teams workspace to receive scheduled maintenance notifications. Please go to Project Settings > Workspace Connections > Microsoft Teams to connect your workspace."
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default IncidentsPage;
diff --git a/Dashboard/src/Pages/ScheduledMaintenanceEvents/WorkspaceConnectionSlack.tsx b/Dashboard/src/Pages/ScheduledMaintenanceEvents/WorkspaceConnectionSlack.tsx
index 7306fd12a2..6f18b73019 100644
--- a/Dashboard/src/Pages/ScheduledMaintenanceEvents/WorkspaceConnectionSlack.tsx
+++ b/Dashboard/src/Pages/ScheduledMaintenanceEvents/WorkspaceConnectionSlack.tsx
@@ -20,13 +20,12 @@ const IncidentsPage: FunctionComponent<
   const [isLoading, setIsLoading] = React.useState<boolean>(false);
   const [error, setError] = React.useState<string | null>(null);
 
-    const loadItems: PromiseVoidFunction = async (): Promise<void> => {
+  const loadItems: PromiseVoidFunction = async (): Promise<void> => {
     try {
       setError(null);
       setIsLoading(true);
-      const isSlackConnected: boolean = await WorkspaceUtil.isWorkspaceConnected(
-        WorkspaceType.Slack,
-      );
+      const isSlackConnected: boolean =
+        await WorkspaceUtil.isWorkspaceConnected(WorkspaceType.Slack);
 
       setIsSlackConnected(isSlackConnected);
       setIsLoading(false);
diff --git a/Dashboard/src/Pages/ScheduledMaintenanceEvents/WorkspaceConnectionTeams.tsx b/Dashboard/src/Pages/ScheduledMaintenanceEvents/WorkspaceConnectionTeams.tsx
index 485d4a7f20..91441c1d9d 100644
--- a/Dashboard/src/Pages/ScheduledMaintenanceEvents/WorkspaceConnectionTeams.tsx
+++ b/Dashboard/src/Pages/ScheduledMaintenanceEvents/WorkspaceConnectionTeams.tsx
@@ -28,9 +28,8 @@ const IncidentsPage: FunctionComponent<
     try {
       setError(null);
       setIsLoading(true);
-      const isMicrosoftTeamsConnected: boolean = await WorkspaceUtil.isWorkspaceConnected(
-        WorkspaceType.MicrosoftTeams,
-      );
+      const isMicrosoftTeamsConnected: boolean =
+        await WorkspaceUtil.isWorkspaceConnected(WorkspaceType.MicrosoftTeams);
 
       setIsMicrosoftTeamsConnected(isMicrosoftTeamsConnected);
       setIsLoading(false);
@@ -54,11 +53,13 @@ const IncidentsPage: FunctionComponent<
     return <ErrorMessage message={error} />;
   }
 
-  if(showComingSoon){
-    return <ComingSoon
-      title="Microsoft Teams Integration is coming soon, but you can still integrate with Workflows!"
-      description="We are working hard to bring you the Microsoft Teams integration. In the meantime, you can still integrate with Workflows to receive incidents in Microsoft Teams. Please click on Workflows in the top navigation to get started."
-    /> 
+  if (showComingSoon) {
+    return (
+      <ComingSoon
+        title="Microsoft Teams Integration is coming soon, but you can still integrate with Workflows!"
+        description="We are working hard to bring you the Microsoft Teams integration. In the meantime, you can still integrate with Workflows to receive incidents in Microsoft Teams. Please click on Workflows in the top navigation to get started."
+      />
+    );
   }
 
   return (
diff --git a/Dashboard/src/Pages/Settings/MicrosoftTeamsIntegration.tsx b/Dashboard/src/Pages/Settings/MicrosoftTeamsIntegration.tsx
new file mode 100644
index 0000000000..374415eee9
--- /dev/null
+++ b/Dashboard/src/Pages/Settings/MicrosoftTeamsIntegration.tsx
@@ -0,0 +1,18 @@
+import PageComponentProps from "../PageComponentProps";
+import React, { FunctionComponent, ReactElement } from "react";
+import ComingSoon from "Common/UI/Components/ComingSoon/ComingSoon";
+
+const SlackIntegrationPage: FunctionComponent<PageComponentProps> = (
+    _props: PageComponentProps,
+): ReactElement => {
+    return (
+        <div>
+            <ComingSoon
+                title="Microsoft Teams Integration is coming soon, but you can still integrate with Workflows!"
+                description="We are working hard to bring you the Microsoft Teams integration. In the meantime, you can still integrate with Workflows to receive alerts in Microsoft Teams. Please click on Workflows in the top navigation to get started."
+            />
+        </div>
+    );
+};
+
+export default SlackIntegrationPage;
diff --git a/Dashboard/src/Routes/AlertRoutes.tsx b/Dashboard/src/Routes/AlertRoutes.tsx
index 61514b86e8..5ba3ea4559 100644
--- a/Dashboard/src/Routes/AlertRoutes.tsx
+++ b/Dashboard/src/Routes/AlertRoutes.tsx
@@ -31,7 +31,6 @@ const AlertsWorkspaceConnectionSlack: LazyExoticComponent<
   return import("../Pages/Alerts/WorkspaceConnectionSlack");
 });
 
-
 const AlertsWorkspaceConnectionMicrosoftTeams: LazyExoticComponent<
   FunctionComponent<ComponentProps>
 > = lazy(() => {
@@ -137,16 +136,20 @@ const AlertsRoutes: FunctionComponent<ComponentProps> = (
           }
         />
 
-<PageRoute
+        <PageRoute
           path={
-            AlertsRoutePath[PageMap.ALERTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS] || ""
+            AlertsRoutePath[
+              PageMap.ALERTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS
+            ] || ""
           }
           element={
             <Suspense fallback={Loader}>
               <AlertsWorkspaceConnectionMicrosoftTeams
                 {...props}
                 pageRoute={
-                  RouteMap[PageMap.ALERTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS] as Route
+                  RouteMap[
+                    PageMap.ALERTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS
+                  ] as Route
                 }
               />
             </Suspense>
diff --git a/Dashboard/src/Routes/ScheduleMaintenaceEventsRoutes.tsx b/Dashboard/src/Routes/ScheduleMaintenaceEventsRoutes.tsx
index 47b9f41e2e..8eed04fb20 100644
--- a/Dashboard/src/Routes/ScheduleMaintenaceEventsRoutes.tsx
+++ b/Dashboard/src/Routes/ScheduleMaintenaceEventsRoutes.tsx
@@ -38,11 +38,12 @@ const ScheduledMaintenanceEventViewDelete: LazyExoticComponent<
   return import("../Pages/ScheduledMaintenanceEvents/View/Delete");
 });
 
-
 const ScheduledMaintenanceEventsWorkspaceConnectionMicrosoftTeams: LazyExoticComponent<
   FunctionComponent<ComponentProps>
 > = lazy(() => {
-  return import("../Pages/ScheduledMaintenanceEvents/WorkspaceConnectionMicrosoftTeams");
+  return import(
+    "../Pages/ScheduledMaintenanceEvents/WorkspaceConnectionMicrosoftTeams"
+  );
 });
 
 const ScheduledMaintenanceEventViewOwner: LazyExoticComponent<
@@ -176,10 +177,11 @@ const ScheduledMaintenanceEventsRoutes: FunctionComponent<ComponentProps> = (
           }
         />
 
-<PageRoute
+        <PageRoute
           path={
             ScheduledMaintenanceEventsRoutePath[
-              PageMap.SCHEDULED_MAINTENANCE_EVENTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS
+              PageMap
+                .SCHEDULED_MAINTENANCE_EVENTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS
             ] || ""
           }
           element={
diff --git a/Dashboard/src/Utils/Breadcrumbs/AlertBreadcrumbs.ts b/Dashboard/src/Utils/Breadcrumbs/AlertBreadcrumbs.ts
index 250d5d497f..15f9dead16 100644
--- a/Dashboard/src/Utils/Breadcrumbs/AlertBreadcrumbs.ts
+++ b/Dashboard/src/Utils/Breadcrumbs/AlertBreadcrumbs.ts
@@ -16,11 +16,10 @@ export function getAlertsBreadcrumbs(path: string): Array<Link> | undefined {
       "Alerts",
       "Slack Connection",
     ]),
-    ...BuildBreadcrumbLinksByTitles(PageMap.ALERTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS, [
-      "Project",
-      "Alerts",
-      "Microsoft Teams Connection",
-    ]),
+    ...BuildBreadcrumbLinksByTitles(
+      PageMap.ALERTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS,
+      ["Project", "Alerts", "Microsoft Teams Connection"],
+    ),
     ...BuildBreadcrumbLinksByTitles(PageMap.ALERT_VIEW, [
       "Project",
       "Alerts",
diff --git a/Dashboard/src/Utils/RouteMap.ts b/Dashboard/src/Utils/RouteMap.ts
index aa02b77ce0..6c7e8164bd 100644
--- a/Dashboard/src/Utils/RouteMap.ts
+++ b/Dashboard/src/Utils/RouteMap.ts
@@ -141,7 +141,8 @@ export const StatusPagesRoutePath: Dictionary<string> = {
 export const IncidentsRoutePath: Dictionary<string> = {
   [PageMap.UNRESOLVED_INCIDENTS]: "unresolved",
   [PageMap.INCIDENTS_WORKSPACE_CONNECTION_SLACK]: "workspace-connection-slack",
-  [PageMap.INCIDENTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS]: "workspace-connection-microsoft-teams",
+  [PageMap.INCIDENTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS]:
+    "workspace-connection-microsoft-teams",
   [PageMap.INCIDENT_CREATE]: "create",
   [PageMap.INCIDENT_VIEW]: `${RouteParams.ModelID}`,
   [PageMap.INCIDENT_VIEW_STATE_TIMELINE]: `${RouteParams.ModelID}/state-timeline`,
@@ -160,7 +161,8 @@ export const IncidentsRoutePath: Dictionary<string> = {
 export const AlertsRoutePath: Dictionary<string> = {
   [PageMap.UNRESOLVED_ALERTS]: "unresolved",
   [PageMap.ALERTS_WORKSPACE_CONNECTION_SLACK]: "workspace-connection-slack",
-  [PageMap.ALERTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS]: "workspace-connection-microsoft-teams",
+  [PageMap.ALERTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS]:
+    "workspace-connection-microsoft-teams",
   [PageMap.ALERT_VIEW]: `${RouteParams.ModelID}`,
   [PageMap.ALERT_VIEW_STATE_TIMELINE]: `${RouteParams.ModelID}/state-timeline`,
   [PageMap.ALERT_VIEW_OWNERS]: `${RouteParams.ModelID}/owners`,
@@ -651,13 +653,15 @@ const RouteMap: Dictionary<Route> = {
     }`,
   ),
 
-  [PageMap.SCHEDULED_MAINTENANCE_EVENTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS]: new Route(
-    `/dashboard/${RouteParams.ProjectID}/scheduled-maintenance-events/${
-      ScheduledMaintenanceEventsRoutePath[
-        PageMap.SCHEDULED_MAINTENANCE_EVENTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS
-      ]
-    }`,
-  ),
+  [PageMap.SCHEDULED_MAINTENANCE_EVENTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS]:
+    new Route(
+      `/dashboard/${RouteParams.ProjectID}/scheduled-maintenance-events/${
+        ScheduledMaintenanceEventsRoutePath[
+          PageMap
+            .SCHEDULED_MAINTENANCE_EVENTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS
+        ]
+      }`,
+    ),
 
   [PageMap.SCHEDULED_MAINTENANCE_EVENT_CREATE]: new Route(
     `/dashboard/${RouteParams.ProjectID}/scheduled-maintenance-events/${