From 6db60f111d2f0cbfbc22c406698697bbdf6896c6 Mon Sep 17 00:00:00 2001
From: killianlarcher <killian.larcher@soluce-technologies.com>
Date: Sun, 18 Jan 2026 12:36:12 +0100
Subject: [PATCH] feat(ui): add preview for upcoming notification provider

---
 .../dashboard/admin/notifications/helpers.tsx | 938 ++++++++++--------
 .../notifier/notifier-form/notifier-form.tsx  |  47 +-
 2 files changed, 544 insertions(+), 441 deletions(-)

diff --git a/src/components/wrappers/dashboard/admin/notifications/helpers.tsx b/src/components/wrappers/dashboard/admin/notifications/helpers.tsx
index cdaea43..71c1e6a 100644
--- a/src/components/wrappers/dashboard/admin/notifications/helpers.tsx
+++ b/src/components/wrappers/dashboard/admin/notifications/helpers.tsx
@@ -1,13 +1,19 @@
 import {Mail} from "lucide-react";
-import type { SVGProps } from 'react';
+import type {SVGProps} from 'react';
 
 export const getNotificationChannelIcon = (type: string) => {
-    const Icon = notificationTypes.find((t) => t.value === type)?.icon
+    const Icon = notificationProviders.find((t) => t.value === type)?.icon
     return Icon ? <Icon className="h-4 w-4"/> : null
 }
 
+type NotificationProps = {
+    value: string
+    label: string
+    icon: any
+    preview?: boolean
+}
 
-export const notificationTypes = [
+export const notificationProviders: Array<NotificationProps> = [
     {value: "smtp", label: "Email", icon: Mail},
     {value: "slack", label: "Slack", icon: SlackIcon},
     {value: "discord", label: "Discord", icon: DiscordIcon},
@@ -15,473 +21,543 @@ export const notificationTypes = [
     {value: "gotify", label: "Gotify", icon: GotifyIcon},
     {value: "ntfy", label: "ntfy.sh", icon: NtfyIcon},
     {value: "webhook", label: "Webhook", icon: WebhookIcon},
+    {value: "microsoft-teams", label: "Microsoft Teams", icon: MSTeamsIcon, preview: true}
 ]
 
 
 export function SlackIcon(props: SVGProps<SVGSVGElement>) {
-	return (<svg xmlns="http://www.w3.org/2000/svg" width={256} height={256} viewBox="0 0 256 256" {...props}><path fill="#e01e5a" d="M53.841 161.32c0 14.832-11.987 26.82-26.819 26.82S.203 176.152.203 161.32c0-14.831 11.987-26.818 26.82-26.818H53.84zm13.41 0c0-14.831 11.987-26.818 26.819-26.818s26.819 11.987 26.819 26.819v67.047c0 14.832-11.987 26.82-26.82 26.82c-14.83 0-26.818-11.988-26.818-26.82z"></path><path fill="#36c5f0" d="M94.07 53.638c-14.832 0-26.82-11.987-26.82-26.819S79.239 0 94.07 0s26.819 11.987 26.819 26.819v26.82zm0 13.613c14.832 0 26.819 11.987 26.819 26.819s-11.987 26.819-26.82 26.819H26.82C11.987 120.889 0 108.902 0 94.069c0-14.83 11.987-26.818 26.819-26.818z"></path><path fill="#2eb67d" d="M201.55 94.07c0-14.832 11.987-26.82 26.818-26.82s26.82 11.988 26.82 26.82s-11.988 26.819-26.82 26.819H201.55zm-13.41 0c0 14.832-11.988 26.819-26.82 26.819c-14.831 0-26.818-11.987-26.818-26.82V26.82C134.502 11.987 146.489 0 161.32 0s26.819 11.987 26.819 26.819z"></path><path fill="#ecb22e" d="M161.32 201.55c14.832 0 26.82 11.987 26.82 26.818s-11.988 26.82-26.82 26.82c-14.831 0-26.818-11.988-26.818-26.82V201.55zm0-13.41c-14.831 0-26.818-11.988-26.818-26.82c0-14.831 11.987-26.818 26.819-26.818h67.25c14.832 0 26.82 11.987 26.82 26.819s-11.988 26.819-26.82 26.819z"></path></svg>);
+    return (<svg xmlns="http://www.w3.org/2000/svg" width={256} height={256} viewBox="0 0 256 256" {...props}>
+        <path fill="#e01e5a"
+              d="M53.841 161.32c0 14.832-11.987 26.82-26.819 26.82S.203 176.152.203 161.32c0-14.831 11.987-26.818 26.82-26.818H53.84zm13.41 0c0-14.831 11.987-26.818 26.819-26.818s26.819 11.987 26.819 26.819v67.047c0 14.832-11.987 26.82-26.82 26.82c-14.83 0-26.818-11.988-26.818-26.82z"></path>
+        <path fill="#36c5f0"
+              d="M94.07 53.638c-14.832 0-26.82-11.987-26.82-26.819S79.239 0 94.07 0s26.819 11.987 26.819 26.819v26.82zm0 13.613c14.832 0 26.819 11.987 26.819 26.819s-11.987 26.819-26.82 26.819H26.82C11.987 120.889 0 108.902 0 94.069c0-14.83 11.987-26.818 26.819-26.818z"></path>
+        <path fill="#2eb67d"
+              d="M201.55 94.07c0-14.832 11.987-26.82 26.818-26.82s26.82 11.988 26.82 26.82s-11.988 26.819-26.82 26.819H201.55zm-13.41 0c0 14.832-11.988 26.819-26.82 26.819c-14.831 0-26.818-11.987-26.818-26.82V26.82C134.502 11.987 146.489 0 161.32 0s26.819 11.987 26.819 26.819z"></path>
+        <path fill="#ecb22e"
+              d="M161.32 201.55c14.832 0 26.82 11.987 26.82 26.818s-11.988 26.82-26.82 26.82c-14.831 0-26.818-11.988-26.818-26.82V201.55zm0-13.41c-14.831 0-26.818-11.988-26.818-26.82c0-14.831 11.987-26.818 26.819-26.818h67.25c14.832 0 26.82 11.987 26.82 26.819s-11.988 26.819-26.82 26.819z"></path>
+    </svg>);
 }
 
 export function DiscordIcon(props: SVGProps<SVGSVGElement>) {
-	return (<svg xmlns="http://www.w3.org/2000/svg" width={256} height={199} viewBox="0 0 256 199" {...props}><path fill="#5865f2" d="M216.856 16.597A208.5 208.5 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046q-29.538-4.442-58.533 0c-1.832-4.4-4.55-9.933-6.846-14.046a207.8 207.8 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161 161 0 0 0 79.735 175.3a136.4 136.4 0 0 1-21.846-10.632a109 109 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a132 132 0 0 0 5.355 4.237a136 136 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848c21.142-6.58 42.646-16.637 64.815-33.213c5.316-56.288-9.08-105.09-38.056-148.36M85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2s23.236 11.804 23.015 26.2c.02 14.375-10.148 26.18-23.015 26.18m85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2c0 14.375-10.148 26.18-23.015 26.18"></path></svg>);
+    return (<svg xmlns="http://www.w3.org/2000/svg" width={256} height={199} viewBox="0 0 256 199" {...props}>
+        <path fill="#5865f2"
+              d="M216.856 16.597A208.5 208.5 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046q-29.538-4.442-58.533 0c-1.832-4.4-4.55-9.933-6.846-14.046a207.8 207.8 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161 161 0 0 0 79.735 175.3a136.4 136.4 0 0 1-21.846-10.632a109 109 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a132 132 0 0 0 5.355 4.237a136 136 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848c21.142-6.58 42.646-16.637 64.815-33.213c5.316-56.288-9.08-105.09-38.056-148.36M85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2s23.236 11.804 23.015 26.2c.02 14.375-10.148 26.18-23.015 26.18m85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2c0 14.375-10.148 26.18-23.015 26.18"></path>
+    </svg>);
 }
 
 export function TelegramIcon(props: SVGProps<SVGSVGElement>) {
-	return (<svg xmlns="http://www.w3.org/2000/svg" width={256} height={256} viewBox="0 0 256 256" {...props}><defs><linearGradient id="SVGuySfwdaH" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stopColor="#2aabee"></stop><stop offset="100%" stopColor="#229ed9"></stop></linearGradient></defs><path fill="url(#SVGuySfwdaH)" d="M128 0C94.06 0 61.48 13.494 37.5 37.49A128.04 128.04 0 0 0 0 128c0 33.934 13.5 66.514 37.5 90.51C61.48 242.506 94.06 256 128 256s66.52-13.494 90.5-37.49c24-23.996 37.5-56.576 37.5-90.51s-13.5-66.514-37.5-90.51C194.52 13.494 161.94 0 128 0"></path><path fill="#fff" d="M57.94 126.648q55.98-24.384 74.64-32.152c35.56-14.786 42.94-17.354 47.76-17.441c1.06-.017 3.42.245 4.96 1.49c1.28 1.05 1.64 2.47 1.82 3.467c.16.996.38 3.266.2 5.038c-1.92 20.24-10.26 69.356-14.5 92.026c-1.78 9.592-5.32 12.808-8.74 13.122c-7.44.684-13.08-4.912-20.28-9.63c-11.26-7.386-17.62-11.982-28.56-19.188c-12.64-8.328-4.44-12.906 2.76-20.386c1.88-1.958 34.64-31.748 35.26-34.45c.08-.338.16-1.598-.6-2.262c-.74-.666-1.84-.438-2.64-.258c-1.14.256-19.12 12.152-54 35.686c-5.1 3.508-9.72 5.218-13.88 5.128c-4.56-.098-13.36-2.584-19.9-4.708c-8-2.606-14.38-3.984-13.82-8.41c.28-2.304 3.46-4.662 9.52-7.072"></path></svg>);
+    return (<svg xmlns="http://www.w3.org/2000/svg" width={256} height={256} viewBox="0 0 256 256" {...props}>
+        <defs>
+            <linearGradient id="SVGuySfwdaH" x1="50%" x2="50%" y1="0%" y2="100%">
+                <stop offset="0%" stopColor="#2aabee"></stop>
+                <stop offset="100%" stopColor="#229ed9"></stop>
+            </linearGradient>
+        </defs>
+        <path fill="url(#SVGuySfwdaH)"
+              d="M128 0C94.06 0 61.48 13.494 37.5 37.49A128.04 128.04 0 0 0 0 128c0 33.934 13.5 66.514 37.5 90.51C61.48 242.506 94.06 256 128 256s66.52-13.494 90.5-37.49c24-23.996 37.5-56.576 37.5-90.51s-13.5-66.514-37.5-90.51C194.52 13.494 161.94 0 128 0"></path>
+        <path fill="#fff"
+              d="M57.94 126.648q55.98-24.384 74.64-32.152c35.56-14.786 42.94-17.354 47.76-17.441c1.06-.017 3.42.245 4.96 1.49c1.28 1.05 1.64 2.47 1.82 3.467c.16.996.38 3.266.2 5.038c-1.92 20.24-10.26 69.356-14.5 92.026c-1.78 9.592-5.32 12.808-8.74 13.122c-7.44.684-13.08-4.912-20.28-9.63c-11.26-7.386-17.62-11.982-28.56-19.188c-12.64-8.328-4.44-12.906 2.76-20.386c1.88-1.958 34.64-31.748 35.26-34.45c.08-.338.16-1.598-.6-2.262c-.74-.666-1.84-.438-2.64-.258c-1.14.256-19.12 12.152-54 35.686c-5.1 3.508-9.72 5.218-13.88 5.128c-4.56-.098-13.36-2.584-19.9-4.708c-8-2.606-14.38-3.984-13.82-8.41c.28-2.304 3.46-4.662 9.52-7.072"></path>
+    </svg>);
 }
 
-
 export function NtfyIcon(props: SVGProps<SVGSVGElement>) {
 
-    return (  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlSpace="preserve"
-    id="Layer_1"
-    x={0}
-    y={0}
-    viewBox="0 0 512 512"
-    {...props}
-  >
-    <style>{".st1{fill:#fff}"}</style>
-    <linearGradient
-      id="SVGID_1_"
-      x1={115.045}
-      x2={142.93}
-      y1={512.747}
-      y2={491.741}
-      gradientTransform="matrix(15.8584 0 0 -15.8584 -1816.246 8200.18)"
-      gradientUnits="userSpaceOnUse"
-    >
-      <stop
-        offset={0}
-        style={{
-          stopColor: "#348878",
-        }}
-      />
-      <stop
-        offset={1}
-        style={{
-          stopColor: "#56bda8",
-        }}
-      />
-    </linearGradient>
-    <path
-      d="M441.8 64.8H84.7c-24.5 0-44.6 19-44.6 42.1l.3 285.3-6.7 38.4 95.6-28.8h312.4c24.5 0 44.6-19 44.6-42.1V106.9c.1-23.2-20-42.1-44.5-42.1"
-      style={{
-        fill: "url(#SVGID_1_)",
-      }}
-    />
-    <path
-      d="M78.1 32.7C40.9 32.7 9 62 9 99.2l.4 311.2-9.4 69 127.1-33.8H443c37.2 0 69.1-29.3 69.1-66.5V99.2c0-37.2-31.9-66.5-69-66.5zm0 46.9H443c13.1 0 22.1 9.5 22.1 19.6V379c0 10-9 19.8-22.1 19.6H120.2l-64.6 19.5.7-3.8-.4-315.1c0-10.1 9.1-19.6 22.2-19.6"
-      className="st1"
-    />
-    <path
-      d="M116.4 310.9v-34.8l73.1-38.7c2.4-1.2 4.6-2.1 6.8-2.7 2.3-.8 4.5-1.4 6.3-1.8l6-.6V230q-3-.3-6-1.2-2.85-.6-6.3-1.5c-2.2-.8-4.5-1.8-6.8-3l-73.1-38.7v-35.1l113 61.5v37.4z"
-      className="st1"
-    />
-    <path
-      d="M110.5 139.7v50.4l76.6 40.6.5.2-.5.2-76.6 40.6v50.1l8.2-4.5L235.1 254v-46.4zm11.8 21.7 101.2 55.1V245l-101.2 55.1v-19.4l69.6-36.8.1-.1c1.9-1 3.8-1.7 5.8-2.3h.1l.2-.1c2.1-.7 3.9-1.2 5.5-1.6l11.1-1.1v-15.2l-5.4-.5c-1.7-.2-3.5-.5-5.1-1.1h-.2l-.2-.1c-2-.4-3.9-.9-5.9-1.4-2-.7-4-1.6-5.9-2.6l-.1-.1-69.6-36.7zm152.3 137.4h120.7v32.6H274.6z"
-      className="st1"
-    />
-    <path
-      d="M268.7 292.1v46h132.4v-46zm11.7 13.4h109v19.2h-109z"
-      className="st1"
-    />
-  </svg>)
-
-}
-
-
-export function GotifyIcon(props: SVGProps<SVGSVGElement>) {
-
-    return (
-    <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlSpace="preserve"
-    id="Layer_2"
-    x={0}
-    y={0}
-    viewBox="46.6 113.46 377.2 307.81"
-    {...props}
-  >
-    <style>
-      {
-        ".st0{fill:#ddcba2}.st0,.st1,.st2,.st4,.st5{stroke:#000;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10}.st1{fill:#71caee}.st2{fill:#fff}.st4{fill:#f0f0f0}.st5{fill:none}"
-      }
-    </style>
-    <switch>
-      <foreignObject
-        width={1}
-        height={1}
+    return (<svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlSpace="preserve"
+        id="Layer_1"
         x={0}
         y={0}
-        requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/"
-      />
-      <g>
-        <path
-          d="M317.7 376.2c6.2-1.7 15.8 0 19.5 3.2 5.5 4.8 4.9 20.9 1.1 29-.8 1.7-1.8 3.4-3.2 4.4s-3.4 1.2-4.7 0-1.7-3.3-1.9-5.2c-.2-3.1-.2-6.2.3-9.2.2-1.3.2-2.9-.2-4.2-.6-2.2-2.5-3.1-4.5-3.5-3.4-.8-14.3-.7-19.5-.7-.8 0 1.5-9.1 2-9.7 2.6-2.9 7.5-3.1 11.1-4.1z"
-          className="st0"
-        />
-        <path
-          d="m258.9 119.7-9-2.7c-4.6-1.4-9.2-2.8-14-2.5-2.8.2-6.1 1.3-6.9 4-.6 2-1.6 7.3-1.3 7.9 1.5 3.4 13.9 6.7 18.3 6.7"
-          className="st1"
-        />
-        <path d="M392.6 177.9c-1.4 1.4-2.2 3.5-2.5 5.5-.2 1.4-.1 3 .5 4.3s1.8 2.3 3.1 3c1.3.6 2.8.9 4.3.9 1.1 0 2.3-.1 3.1-.9.6-.7.8-1.6.9-2.5.2-2.3-.1-4.7-.9-6.9-.4-1.1-.9-2.3-1.8-3.1-1.7-1.8-4.5-2.2-6.4-.5-.1 0-.2.1-.3.2" />
-        <path
-          d="M358.5 164.2c-1-1 0-2.7 1-3.7 5.8-5.2 15.1-4.6 21.8-.6 10.9 6.6 15.6 19.9 17.2 32.5.6 5.2.9 10.6-.5 15.7s-4.6 9.9-9.3 12.1c-1.1.5-2.3.9-3.4.5s-1.9-1.8-1.2-2.8c-9.4-13.6-19-26.8-20.9-43.2-.5-4.1-1.8-7.4-4.7-10.5z"
-          className="st2"
-        />
-        <path
-          d="M134.7 328.4c-5.1-3.1-9.9-6.6-14.3-10.6-1.3-1.2-2.6-2.5-2.6-4.3 0-1.2.6-2.2 1.2-3.2.8-1.4 1.7-2.8 2.5-4.1 1.1-1.8 2.9-3.9 4.9-3.2.9.3 1.5 1.1 2 1.8 2.4 3.3 4.9 6.6 7.3 9.8 1.5 2 3.7 4.3 6.1 3.5"
-          className="st1"
-        />
-        <path
-          d="M209.6 133c33.2-18 77.8-19.6 111.5-8.7 24.3 7.9 43.4 26.7 53.3 50 8.7 20.6 10.5 43.6 8.1 65.7-4.4 40.2-20.2 77.9-40.3 112.6-11.1 19-21.8 36-40.5 48.5-36.8 24.6-87.2 22.1-128.4 11.5-19.9-5.1-39.7-17.3-47.2-37.3-4.8-12.8-4.2-27.6 1.5-40 11.6-24.8 43.2-38.4 45.6-67.9.7-8.7-1.6-17.3-3.6-25.7-5.6-23.4-8.9-45.8 1.4-68.7 8.1-17.7 21.9-31 38.6-40z"
-          className="st1"
-        />
-        <path
-          d="M189.8 151.4c-5.4-5.2-11.9-8.8-19-10.3-2.2-.5-4.7-.7-6.9.7-1.8 1.2-3.1 3.3-4.2 5.3-1.6 3-3 6.2-4.1 9.4-.4 1.2-.6 2.5 0 3.5.3.6.9.9 1.5 1.2 8.1 4.2 16.8 7.1 25.5 9.8"
-          className="st1"
-        />
-        <path
-          d="M183.7 158.7c-2.5-1.8-16.8-12.1-18.7-4.8-.4 1.6.5 3.9 1.5 4.8"
-          className="st1"
-        />
-        <path
-          d="M264.5 174.9c-.5.5-.9 1-1.3 1.6-9 11.6-12 27.9-9.3 42.1 1.7 9 5.9 17.9 13.2 23.4 19.3 14.6 51.5 13.5 68.4-1.5 24.4-21.7 13-67.6-14-78.8-17.6-7.2-43.7-1.6-57 13.2zm117.6 62.2c1.4-.1 2.9-.1 4.3.1.3 0 .7.1 1 .4.2.3.4.7.5 1.1 1 3.9.5 8.2.1 12.4-.1.9-.2 1.8-.6 2.6-1 2.1-3.1 2.7-4.7 2.7-.1 0-.2 0-.3-.1-.3-.2-.3-.7-.2-1.2.3-5.9-.1-11.9-.1-18q0 .15 0 0z"
-          className="st2"
-        />
-        <path
-          d="M378.7 236.8c-1.4.4-2.5 2-2.8 4.4-.5 4.4-.7 8.9-.5 13.4 0 .9.1 1.9.5 2.4.2.3.5.4.8.4 1.6.3 4.1-.6 5.6-1 0 0 0-5.2-.1-8s-.1-6.1-.2-8.9v-2.2c.1-.7-2.6-.7-3.3-.5z"
-          className="st2"
-        />
-        <path
-          d="M358.3 231.8c-.3 2.2.1 4.7 1.7 7.4 2.6 4.4 7 6.1 11.9 5.8 8.9-.6 25.3-5.4 27.5-15.7.6-3-.3-6.1-2.2-8.5-6.2-7.8-17.8-5.7-25.6-2-5.9 2.7-12.4 7-13.3 13z"
-          className="st0"
-        />
-        <path
-          d="M386.4 208.6c2.2 1.4 3.7 3.8 4 7 .3 3.6-1.4 7.5-5 8.8-2.9 1.1-6.2.6-9.1-.4s-5.8-2.8-6.8-5.7c-.7-2-.3-4.3.7-6.1 1.1-1.8 2.8-3.2 4.7-4.1 3.9-1.8 8.4-1.6 11.5.5z"
-          style={{
-            fill: "#888e93",
-            stroke: "#000",
-            strokeWidth: 2,
-            strokeLinecap: "round",
-            strokeMiterlimit: 10,
-          }}
-        />
-        <path
-          d="M414.7 262.6c2.4.6 4.8 2.1 5.6 4.4s.1 4.9-1.6 6.7-4.2 2.5-6.6 2.5c-.8 0-1.7-.1-2.4-.5-2.5-1.1-3.5-4-4.2-6.6-1.8-6.8 3.6-7.8 9.2-6.5z"
-          className="st0"
-        />
-        <path
-          d="M267.1 284.7c2.3-4.5 141.3-36.2 144.7-31.6 3.4 4.5 15.8 88.2 9 90.4-6.8 2.3-119.8 37.3-126.6 35s-29.4-89.3-27.1-93.8z"
-          className="st4"
-        />
-        <path
-          d="M294.2 378.5s54.3-74.6 59.9-76.9c5.7-2.3 67.3 41.3 67.3 41.3"
-          className="st5"
-        />
-        <path
-          d="M267 287.7s86 38.8 91.6 36.6c5.7-2.3 53.1-71.2 53.1-71.2"
-          className="st4"
-        />
+        viewBox="0 0 512 512"
+        {...props}
+    >
+        <style>{".st1{fill:#fff}"}</style>
         <linearGradient
-          id="SVGID_1_"
-          x1={131.119}
-          x2={103.259}
-          y1={373.573}
-          y2={396.951}
-          gradientUnits="userSpaceOnUse"
+            id="SVGID_1_"
+            x1={115.045}
+            x2={142.93}
+            y1={512.747}
+            y2={491.741}
+            gradientTransform="matrix(15.8584 0 0 -15.8584 -1816.246 8200.18)"
+            gradientUnits="userSpaceOnUse"
         >
-          <stop
-            offset={0}
-            style={{
-              stopColor: "#71caee",
-            }}
-          />
-          <stop
-            offset={0.041}
-            style={{
-              stopColor: "#83cae2",
-            }}
-          />
-          <stop
-            offset={0.121}
-            style={{
-              stopColor: "#9fcace",
-            }}
-          />
-          <stop
-            offset={0.211}
-            style={{
-              stopColor: "#b6cbbe",
-            }}
-          />
-          <stop
-            offset={0.314}
-            style={{
-              stopColor: "#c7cbb1",
-            }}
-          />
-          <stop
-            offset={0.438}
-            style={{
-              stopColor: "#d4cba8",
-            }}
-          />
-          <stop
-            offset={0.606}
-            style={{
-              stopColor: "#dbcba3",
-            }}
-          />
-          <stop
-            offset={1}
-            style={{
-              stopColor: "#ddcba2",
-            }}
-          />
+            <stop
+                offset={0}
+                style={{
+                    stopColor: "#348878",
+                }}
+            />
+            <stop
+                offset={1}
+                style={{
+                    stopColor: "#56bda8",
+                }}
+            />
         </linearGradient>
         <path
-          d="M132.8 375.6c-3.5 3.8-7.3 7.8-13 9.2-4.6 1.2-10 .2-13.6-2.3-1.4-1-2.6-2.2-4-3.2-1.5-1-3.4-1.7-5.3-1.3-2.7.5-4.1 3.1-3.6 5.3 2 8.8 17 15.6 27.5 15.5 9 0 19-4.6 21.4-11.8"
-          style={{
-            fill: "url(#SVGID_1_)",
-          }}
-        />
-        <path
-          d="M132.8 375.6c-3.5 3.8-7.3 7.8-13 9.2-4.6 1.2-10 .2-13.6-2.3-1.4-1-2.6-2.2-4-3.2-1.5-1-3.4-1.7-5.3-1.3-2.7.5-4.1 3.1-3.6 5.3 2 8.8 17 15.6 27.5 15.5 9 0 19-4.6 21.4-11.8"
-          className="st5"
-        />
-        <linearGradient
-          id="SVGID_2_"
-          x1={265.033}
-          x2={275.301}
-          y1={280.295}
-          y2={302.314}
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop
-            offset={0}
-            style={{
-              stopColor: "#71caee",
-            }}
-          />
-          <stop
-            offset={0.041}
+            d="M441.8 64.8H84.7c-24.5 0-44.6 19-44.6 42.1l.3 285.3-6.7 38.4 95.6-28.8h312.4c24.5 0 44.6-19 44.6-42.1V106.9c.1-23.2-20-42.1-44.5-42.1"
             style={{
-              stopColor: "#83cae2",
+                fill: "url(#SVGID_1_)",
             }}
-          />
-          <stop
-            offset={0.121}
-            style={{
-              stopColor: "#9fcace",
-            }}
-          />
-          <stop
-            offset={0.211}
-            style={{
-              stopColor: "#b6cbbe",
-            }}
-          />
-          <stop
-            offset={0.314}
-            style={{
-              stopColor: "#c7cbb1",
-            }}
-          />
-          <stop
-            offset={0.438}
-            style={{
-              stopColor: "#d4cba8",
-            }}
-          />
-          <stop
-            offset={0.606}
-            style={{
-              stopColor: "#dbcba3",
-            }}
-          />
-          <stop
-            offset={1}
-            style={{
-              stopColor: "#ddcba2",
-            }}
-          />
-        </linearGradient>
-        <path
-          d="M261.9 283.5c-.1 4.2 4.3 7.3 8.4 7.6s8.2-1.3 12.2-2.6c1.4-.4 2.9-.8 4.2-.2 1.8.9 2.7 4.1 1.8 5.9s-3.4 3.5-5.3 4.4c-6.5 3-12.9 3.6-19.9 2-5.3-1.2-11.3-4.3-13-13.5"
-          style={{
-            fill: "url(#SVGID_2_)",
-          }}
         />
         <path
-          d="M261.9 283.5c-.1 4.2 4.3 7.3 8.4 7.6s8.2-1.3 12.2-2.6c1.4-.4 2.9-.8 4.2-.2 1.8.9 2.7 4.1 1.8 5.9s-3.4 3.5-5.3 4.4c-6.5 3-12.9 3.6-19.9 2-5.3-1.2-11.3-4.3-13-13.5"
-          className="st5"
+            d="M78.1 32.7C40.9 32.7 9 62 9 99.2l.4 311.2-9.4 69 127.1-33.8H443c37.2 0 69.1-29.3 69.1-66.5V99.2c0-37.2-31.9-66.5-69-66.5zm0 46.9H443c13.1 0 22.1 9.5 22.1 19.6V379c0 10-9 19.8-22.1 19.6H120.2l-64.6 19.5.7-3.8-.4-315.1c0-10.1 9.1-19.6 22.2-19.6"
+            className="st1"
         />
-        <path d="M318.4 198.4c-2-.3-4.1.1-5.9 1.3-3.2 2.1-4.7 6.2-4.7 9.9 0 1.9.4 3.8 1.4 5.3 1.2 1.7 3.1 2.9 5.2 3.4 3.4.8 8.2.7 10.5-2.5 1-1.5 1.4-3.3 1.5-5.1.5-5.7-1.8-11.4-8-12.3" />
         <path
-          d="M320.4 203.3c.9.3 1.7.8 2.1 1.7.4.8.4 1.7.3 2.5-.1 1-.6 2-1.5 2.7-.7.5-1.7.7-2.6.5s-1.7-.8-2.2-1.6c-1.1-1.6-.9-4.4.9-5.5.9-.4 2-.6 3-.3"
-          style={{
-            fill: "#fff",
-          }}
+            d="M116.4 310.9v-34.8l73.1-38.7c2.4-1.2 4.6-2.1 6.8-2.7 2.3-.8 4.5-1.4 6.3-1.8l6-.6V230q-3-.3-6-1.2-2.85-.6-6.3-1.5c-2.2-.8-4.5-1.8-6.8-3l-73.1-38.7v-35.1l113 61.5v37.4z"
+            className="st1"
         />
-        <linearGradient
-          id="SVGID_3_"
-          x1={-18.456}
-          x2={110.382}
-          y1={252.286}
-          y2={252.286}
-          gradientTransform="rotate(-5.297 -26.409 -856.73)scale(.99997)"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop
-            offset={0}
-            style={{
-              stopColor: "#333",
-              stopOpacity: 0,
-            }}
-          />
-          <stop
-            offset={0.477}
-            style={{
-              stopColor: "#575756",
-              stopOpacity: 0.2,
-            }}
-          />
-          <stop
-            offset={0.995}
-            style={{
-              stopColor: "#333",
-              stopOpacity: 0.001911551,
-            }}
-          />
-          <stop
-            offset={1}
-            style={{
-              stopColor: "#333",
-              stopOpacity: 0,
-            }}
-          />
-        </linearGradient>
         <path
-          d="M81.6 222.4s56.5 68.4 123.9 42.4l6.6-29.7C150 272.2 82.8 214.3 82.8 214.3z"
-          style={{
-            fill: "url(#SVGID_3_)",
-          }}
+            d="M110.5 139.7v50.4l76.6 40.6.5.2-.5.2-76.6 40.6v50.1l8.2-4.5L235.1 254v-46.4zm11.8 21.7 101.2 55.1V245l-101.2 55.1v-19.4l69.6-36.8.1-.1c1.9-1 3.8-1.7 5.8-2.3h.1l.2-.1c2.1-.7 3.9-1.2 5.5-1.6l11.1-1.1v-15.2l-5.4-.5c-1.7-.2-3.5-.5-5.1-1.1h-.2l-.2-.1c-2-.4-3.9-.9-5.9-1.4-2-.7-4-1.6-5.9-2.6l-.1-.1-69.6-36.7zm152.3 137.4h120.7v32.6H274.6z"
+            className="st1"
         />
-        <linearGradient
-          id="SVGID_4_"
-          x1={110.198}
-          x2={283.737}
-          y1={262.493}
-          y2={262.493}
-          gradientTransform="matrix(.9991 .04164 -.04164 .9991 -36.323 1.051)"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop
-            offset={0}
-            style={{
-              stopColor: "#333",
-              stopOpacity: 0,
-            }}
-          />
-          <stop
-            offset={0.477}
-            style={{
-              stopColor: "#575756",
-              stopOpacity: 0.2,
-            }}
-          />
-          <stop
-            offset={0.995}
-            style={{
-              stopColor: "#333",
-              stopOpacity: 0.001911551,
-            }}
-          />
-          <stop
-            offset={1}
-            style={{
-              stopColor: "#333",
-              stopOpacity: 0,
-            }}
-          />
-        </linearGradient>
         <path
-          d="M64.2 234.9s63.1 101.5 157.8 78.9l14.2-38.5c-89.5 38.3-168.9-51-168.9-51z"
-          style={{
-            fill: "url(#SVGID_4_)",
-          }}
+            d="M268.7 292.1v46h132.4v-46zm11.7 13.4h109v19.2h-109z"
+            className="st1"
         />
-        <linearGradient
-          id="SVGID_5_"
-          x1={218.967}
-          x2={428.745}
-          y1={263.594}
-          y2={263.594}
-          gradientTransform="rotate(9.265 -38.832 -826.002)"
-          gradientUnits="userSpaceOnUse"
+    </svg>)
+
+}
+
+
+export function GotifyIcon(props: SVGProps<SVGSVGElement>) {
+
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlSpace="preserve"
+            id="Layer_2"
+            x={0}
+            y={0}
+            viewBox="46.6 113.46 377.2 307.81"
+            {...props}
         >
-          <stop
-            offset={0}
-            style={{
-              stopColor: "#333",
-              stopOpacity: 0,
-            }}
-          />
-          <stop
-            offset={0.477}
-            style={{
-              stopColor: "#575756",
-              stopOpacity: 0.2,
-            }}
-          />
-          <stop
-            offset={0.995}
-            style={{
-              stopColor: "#333",
-              stopOpacity: 0.001911551,
-            }}
-          />
-          <stop
-            offset={1}
-            style={{
-              stopColor: "#333",
-              stopOpacity: 0,
-            }}
-          />
-        </linearGradient>
-        <path
-          d="M46.6 251.5s61.1 130.9 178 117.5l22.6-44.2c-113 33-195.3-85.7-195.3-85.7z"
-          style={{
-            fill: "url(#SVGID_5_)",
-          }}
-        />
-      </g>
-    </switch>
-  </svg>
+            <style>
+                {
+                    ".st0{fill:#ddcba2}.st0,.st1,.st2,.st4,.st5{stroke:#000;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10}.st1{fill:#71caee}.st2{fill:#fff}.st4{fill:#f0f0f0}.st5{fill:none}"
+                }
+            </style>
+            <switch>
+                <foreignObject
+                    width={1}
+                    height={1}
+                    x={0}
+                    y={0}
+                    requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/"
+                />
+                <g>
+                    <path
+                        d="M317.7 376.2c6.2-1.7 15.8 0 19.5 3.2 5.5 4.8 4.9 20.9 1.1 29-.8 1.7-1.8 3.4-3.2 4.4s-3.4 1.2-4.7 0-1.7-3.3-1.9-5.2c-.2-3.1-.2-6.2.3-9.2.2-1.3.2-2.9-.2-4.2-.6-2.2-2.5-3.1-4.5-3.5-3.4-.8-14.3-.7-19.5-.7-.8 0 1.5-9.1 2-9.7 2.6-2.9 7.5-3.1 11.1-4.1z"
+                        className="st0"
+                    />
+                    <path
+                        d="m258.9 119.7-9-2.7c-4.6-1.4-9.2-2.8-14-2.5-2.8.2-6.1 1.3-6.9 4-.6 2-1.6 7.3-1.3 7.9 1.5 3.4 13.9 6.7 18.3 6.7"
+                        className="st1"
+                    />
+                    <path
+                        d="M392.6 177.9c-1.4 1.4-2.2 3.5-2.5 5.5-.2 1.4-.1 3 .5 4.3s1.8 2.3 3.1 3c1.3.6 2.8.9 4.3.9 1.1 0 2.3-.1 3.1-.9.6-.7.8-1.6.9-2.5.2-2.3-.1-4.7-.9-6.9-.4-1.1-.9-2.3-1.8-3.1-1.7-1.8-4.5-2.2-6.4-.5-.1 0-.2.1-.3.2"/>
+                    <path
+                        d="M358.5 164.2c-1-1 0-2.7 1-3.7 5.8-5.2 15.1-4.6 21.8-.6 10.9 6.6 15.6 19.9 17.2 32.5.6 5.2.9 10.6-.5 15.7s-4.6 9.9-9.3 12.1c-1.1.5-2.3.9-3.4.5s-1.9-1.8-1.2-2.8c-9.4-13.6-19-26.8-20.9-43.2-.5-4.1-1.8-7.4-4.7-10.5z"
+                        className="st2"
+                    />
+                    <path
+                        d="M134.7 328.4c-5.1-3.1-9.9-6.6-14.3-10.6-1.3-1.2-2.6-2.5-2.6-4.3 0-1.2.6-2.2 1.2-3.2.8-1.4 1.7-2.8 2.5-4.1 1.1-1.8 2.9-3.9 4.9-3.2.9.3 1.5 1.1 2 1.8 2.4 3.3 4.9 6.6 7.3 9.8 1.5 2 3.7 4.3 6.1 3.5"
+                        className="st1"
+                    />
+                    <path
+                        d="M209.6 133c33.2-18 77.8-19.6 111.5-8.7 24.3 7.9 43.4 26.7 53.3 50 8.7 20.6 10.5 43.6 8.1 65.7-4.4 40.2-20.2 77.9-40.3 112.6-11.1 19-21.8 36-40.5 48.5-36.8 24.6-87.2 22.1-128.4 11.5-19.9-5.1-39.7-17.3-47.2-37.3-4.8-12.8-4.2-27.6 1.5-40 11.6-24.8 43.2-38.4 45.6-67.9.7-8.7-1.6-17.3-3.6-25.7-5.6-23.4-8.9-45.8 1.4-68.7 8.1-17.7 21.9-31 38.6-40z"
+                        className="st1"
+                    />
+                    <path
+                        d="M189.8 151.4c-5.4-5.2-11.9-8.8-19-10.3-2.2-.5-4.7-.7-6.9.7-1.8 1.2-3.1 3.3-4.2 5.3-1.6 3-3 6.2-4.1 9.4-.4 1.2-.6 2.5 0 3.5.3.6.9.9 1.5 1.2 8.1 4.2 16.8 7.1 25.5 9.8"
+                        className="st1"
+                    />
+                    <path
+                        d="M183.7 158.7c-2.5-1.8-16.8-12.1-18.7-4.8-.4 1.6.5 3.9 1.5 4.8"
+                        className="st1"
+                    />
+                    <path
+                        d="M264.5 174.9c-.5.5-.9 1-1.3 1.6-9 11.6-12 27.9-9.3 42.1 1.7 9 5.9 17.9 13.2 23.4 19.3 14.6 51.5 13.5 68.4-1.5 24.4-21.7 13-67.6-14-78.8-17.6-7.2-43.7-1.6-57 13.2zm117.6 62.2c1.4-.1 2.9-.1 4.3.1.3 0 .7.1 1 .4.2.3.4.7.5 1.1 1 3.9.5 8.2.1 12.4-.1.9-.2 1.8-.6 2.6-1 2.1-3.1 2.7-4.7 2.7-.1 0-.2 0-.3-.1-.3-.2-.3-.7-.2-1.2.3-5.9-.1-11.9-.1-18q0 .15 0 0z"
+                        className="st2"
+                    />
+                    <path
+                        d="M378.7 236.8c-1.4.4-2.5 2-2.8 4.4-.5 4.4-.7 8.9-.5 13.4 0 .9.1 1.9.5 2.4.2.3.5.4.8.4 1.6.3 4.1-.6 5.6-1 0 0 0-5.2-.1-8s-.1-6.1-.2-8.9v-2.2c.1-.7-2.6-.7-3.3-.5z"
+                        className="st2"
+                    />
+                    <path
+                        d="M358.3 231.8c-.3 2.2.1 4.7 1.7 7.4 2.6 4.4 7 6.1 11.9 5.8 8.9-.6 25.3-5.4 27.5-15.7.6-3-.3-6.1-2.2-8.5-6.2-7.8-17.8-5.7-25.6-2-5.9 2.7-12.4 7-13.3 13z"
+                        className="st0"
+                    />
+                    <path
+                        d="M386.4 208.6c2.2 1.4 3.7 3.8 4 7 .3 3.6-1.4 7.5-5 8.8-2.9 1.1-6.2.6-9.1-.4s-5.8-2.8-6.8-5.7c-.7-2-.3-4.3.7-6.1 1.1-1.8 2.8-3.2 4.7-4.1 3.9-1.8 8.4-1.6 11.5.5z"
+                        style={{
+                            fill: "#888e93",
+                            stroke: "#000",
+                            strokeWidth: 2,
+                            strokeLinecap: "round",
+                            strokeMiterlimit: 10,
+                        }}
+                    />
+                    <path
+                        d="M414.7 262.6c2.4.6 4.8 2.1 5.6 4.4s.1 4.9-1.6 6.7-4.2 2.5-6.6 2.5c-.8 0-1.7-.1-2.4-.5-2.5-1.1-3.5-4-4.2-6.6-1.8-6.8 3.6-7.8 9.2-6.5z"
+                        className="st0"
+                    />
+                    <path
+                        d="M267.1 284.7c2.3-4.5 141.3-36.2 144.7-31.6 3.4 4.5 15.8 88.2 9 90.4-6.8 2.3-119.8 37.3-126.6 35s-29.4-89.3-27.1-93.8z"
+                        className="st4"
+                    />
+                    <path
+                        d="M294.2 378.5s54.3-74.6 59.9-76.9c5.7-2.3 67.3 41.3 67.3 41.3"
+                        className="st5"
+                    />
+                    <path
+                        d="M267 287.7s86 38.8 91.6 36.6c5.7-2.3 53.1-71.2 53.1-71.2"
+                        className="st4"
+                    />
+                    <linearGradient
+                        id="SVGID_1_"
+                        x1={131.119}
+                        x2={103.259}
+                        y1={373.573}
+                        y2={396.951}
+                        gradientUnits="userSpaceOnUse"
+                    >
+                        <stop
+                            offset={0}
+                            style={{
+                                stopColor: "#71caee",
+                            }}
+                        />
+                        <stop
+                            offset={0.041}
+                            style={{
+                                stopColor: "#83cae2",
+                            }}
+                        />
+                        <stop
+                            offset={0.121}
+                            style={{
+                                stopColor: "#9fcace",
+                            }}
+                        />
+                        <stop
+                            offset={0.211}
+                            style={{
+                                stopColor: "#b6cbbe",
+                            }}
+                        />
+                        <stop
+                            offset={0.314}
+                            style={{
+                                stopColor: "#c7cbb1",
+                            }}
+                        />
+                        <stop
+                            offset={0.438}
+                            style={{
+                                stopColor: "#d4cba8",
+                            }}
+                        />
+                        <stop
+                            offset={0.606}
+                            style={{
+                                stopColor: "#dbcba3",
+                            }}
+                        />
+                        <stop
+                            offset={1}
+                            style={{
+                                stopColor: "#ddcba2",
+                            }}
+                        />
+                    </linearGradient>
+                    <path
+                        d="M132.8 375.6c-3.5 3.8-7.3 7.8-13 9.2-4.6 1.2-10 .2-13.6-2.3-1.4-1-2.6-2.2-4-3.2-1.5-1-3.4-1.7-5.3-1.3-2.7.5-4.1 3.1-3.6 5.3 2 8.8 17 15.6 27.5 15.5 9 0 19-4.6 21.4-11.8"
+                        style={{
+                            fill: "url(#SVGID_1_)",
+                        }}
+                    />
+                    <path
+                        d="M132.8 375.6c-3.5 3.8-7.3 7.8-13 9.2-4.6 1.2-10 .2-13.6-2.3-1.4-1-2.6-2.2-4-3.2-1.5-1-3.4-1.7-5.3-1.3-2.7.5-4.1 3.1-3.6 5.3 2 8.8 17 15.6 27.5 15.5 9 0 19-4.6 21.4-11.8"
+                        className="st5"
+                    />
+                    <linearGradient
+                        id="SVGID_2_"
+                        x1={265.033}
+                        x2={275.301}
+                        y1={280.295}
+                        y2={302.314}
+                        gradientUnits="userSpaceOnUse"
+                    >
+                        <stop
+                            offset={0}
+                            style={{
+                                stopColor: "#71caee",
+                            }}
+                        />
+                        <stop
+                            offset={0.041}
+                            style={{
+                                stopColor: "#83cae2",
+                            }}
+                        />
+                        <stop
+                            offset={0.121}
+                            style={{
+                                stopColor: "#9fcace",
+                            }}
+                        />
+                        <stop
+                            offset={0.211}
+                            style={{
+                                stopColor: "#b6cbbe",
+                            }}
+                        />
+                        <stop
+                            offset={0.314}
+                            style={{
+                                stopColor: "#c7cbb1",
+                            }}
+                        />
+                        <stop
+                            offset={0.438}
+                            style={{
+                                stopColor: "#d4cba8",
+                            }}
+                        />
+                        <stop
+                            offset={0.606}
+                            style={{
+                                stopColor: "#dbcba3",
+                            }}
+                        />
+                        <stop
+                            offset={1}
+                            style={{
+                                stopColor: "#ddcba2",
+                            }}
+                        />
+                    </linearGradient>
+                    <path
+                        d="M261.9 283.5c-.1 4.2 4.3 7.3 8.4 7.6s8.2-1.3 12.2-2.6c1.4-.4 2.9-.8 4.2-.2 1.8.9 2.7 4.1 1.8 5.9s-3.4 3.5-5.3 4.4c-6.5 3-12.9 3.6-19.9 2-5.3-1.2-11.3-4.3-13-13.5"
+                        style={{
+                            fill: "url(#SVGID_2_)",
+                        }}
+                    />
+                    <path
+                        d="M261.9 283.5c-.1 4.2 4.3 7.3 8.4 7.6s8.2-1.3 12.2-2.6c1.4-.4 2.9-.8 4.2-.2 1.8.9 2.7 4.1 1.8 5.9s-3.4 3.5-5.3 4.4c-6.5 3-12.9 3.6-19.9 2-5.3-1.2-11.3-4.3-13-13.5"
+                        className="st5"
+                    />
+                    <path
+                        d="M318.4 198.4c-2-.3-4.1.1-5.9 1.3-3.2 2.1-4.7 6.2-4.7 9.9 0 1.9.4 3.8 1.4 5.3 1.2 1.7 3.1 2.9 5.2 3.4 3.4.8 8.2.7 10.5-2.5 1-1.5 1.4-3.3 1.5-5.1.5-5.7-1.8-11.4-8-12.3"/>
+                    <path
+                        d="M320.4 203.3c.9.3 1.7.8 2.1 1.7.4.8.4 1.7.3 2.5-.1 1-.6 2-1.5 2.7-.7.5-1.7.7-2.6.5s-1.7-.8-2.2-1.6c-1.1-1.6-.9-4.4.9-5.5.9-.4 2-.6 3-.3"
+                        style={{
+                            fill: "#fff",
+                        }}
+                    />
+                    <linearGradient
+                        id="SVGID_3_"
+                        x1={-18.456}
+                        x2={110.382}
+                        y1={252.286}
+                        y2={252.286}
+                        gradientTransform="rotate(-5.297 -26.409 -856.73)scale(.99997)"
+                        gradientUnits="userSpaceOnUse"
+                    >
+                        <stop
+                            offset={0}
+                            style={{
+                                stopColor: "#333",
+                                stopOpacity: 0,
+                            }}
+                        />
+                        <stop
+                            offset={0.477}
+                            style={{
+                                stopColor: "#575756",
+                                stopOpacity: 0.2,
+                            }}
+                        />
+                        <stop
+                            offset={0.995}
+                            style={{
+                                stopColor: "#333",
+                                stopOpacity: 0.001911551,
+                            }}
+                        />
+                        <stop
+                            offset={1}
+                            style={{
+                                stopColor: "#333",
+                                stopOpacity: 0,
+                            }}
+                        />
+                    </linearGradient>
+                    <path
+                        d="M81.6 222.4s56.5 68.4 123.9 42.4l6.6-29.7C150 272.2 82.8 214.3 82.8 214.3z"
+                        style={{
+                            fill: "url(#SVGID_3_)",
+                        }}
+                    />
+                    <linearGradient
+                        id="SVGID_4_"
+                        x1={110.198}
+                        x2={283.737}
+                        y1={262.493}
+                        y2={262.493}
+                        gradientTransform="matrix(.9991 .04164 -.04164 .9991 -36.323 1.051)"
+                        gradientUnits="userSpaceOnUse"
+                    >
+                        <stop
+                            offset={0}
+                            style={{
+                                stopColor: "#333",
+                                stopOpacity: 0,
+                            }}
+                        />
+                        <stop
+                            offset={0.477}
+                            style={{
+                                stopColor: "#575756",
+                                stopOpacity: 0.2,
+                            }}
+                        />
+                        <stop
+                            offset={0.995}
+                            style={{
+                                stopColor: "#333",
+                                stopOpacity: 0.001911551,
+                            }}
+                        />
+                        <stop
+                            offset={1}
+                            style={{
+                                stopColor: "#333",
+                                stopOpacity: 0,
+                            }}
+                        />
+                    </linearGradient>
+                    <path
+                        d="M64.2 234.9s63.1 101.5 157.8 78.9l14.2-38.5c-89.5 38.3-168.9-51-168.9-51z"
+                        style={{
+                            fill: "url(#SVGID_4_)",
+                        }}
+                    />
+                    <linearGradient
+                        id="SVGID_5_"
+                        x1={218.967}
+                        x2={428.745}
+                        y1={263.594}
+                        y2={263.594}
+                        gradientTransform="rotate(9.265 -38.832 -826.002)"
+                        gradientUnits="userSpaceOnUse"
+                    >
+                        <stop
+                            offset={0}
+                            style={{
+                                stopColor: "#333",
+                                stopOpacity: 0,
+                            }}
+                        />
+                        <stop
+                            offset={0.477}
+                            style={{
+                                stopColor: "#575756",
+                                stopOpacity: 0.2,
+                            }}
+                        />
+                        <stop
+                            offset={0.995}
+                            style={{
+                                stopColor: "#333",
+                                stopOpacity: 0.001911551,
+                            }}
+                        />
+                        <stop
+                            offset={1}
+                            style={{
+                                stopColor: "#333",
+                                stopOpacity: 0,
+                            }}
+                        />
+                    </linearGradient>
+                    <path
+                        d="M46.6 251.5s61.1 130.9 178 117.5l22.6-44.2c-113 33-195.3-85.7-195.3-85.7z"
+                        style={{
+                            fill: "url(#SVGID_5_)",
+                        }}
+                    />
+                </g>
+            </switch>
+        </svg>
     )
 }
 
 export function WebhookIcon(props: SVGProps<SVGSVGElement>) {
     return (
         <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width={2500}
-        height={2448}
-        fillRule="evenodd"
-        strokeLinejoin="round"
-        strokeMiterlimit={2}
-        clipRule="evenodd"
-        viewBox="-6.74 -6.74 223.55 218.799"
-        {...props}
+            xmlns="http://www.w3.org/2000/svg"
+            width={2500}
+            height={2448}
+            fillRule="evenodd"
+            strokeLinejoin="round"
+            strokeMiterlimit={2}
+            clipRule="evenodd"
+            viewBox="-6.74 -6.74 223.55 218.799"
+            {...props}
         >
-        <path
-            fill="#7547db"
-            d="M111.134 71.906a21 21 0 0 1-1.324.042c-11.314 0-20.5-9.186-20.5-20.5s9.186-20.5 20.5-20.5 20.5 9.186 20.5 20.5a20.4 20.4 0 0 1-4.582 12.913l22.66 41.655a51 51 0 0 1 17.422-3.068c28.148 0 51 22.852 51 51s-22.852 51-51 51a51.2 51.2 0 0 1-28.036-8.373 7.303 7.303 0 0 1-1.359-11.105c.015-.016.031-.033.061-.036a7.665 7.665 0 0 1 9.736-1.228 36.06 36.06 0 0 0 19.598 5.792c19.897 0 36.05-16.153 36.05-36.05s-16.153-36.05-36.05-36.05c-6.89 0-16.669 3.014-22.548 6.745a2.637 2.637 0 0 1-3.899-.845zm-9.412 88.614a51 51 0 0 1-6.054 16.62c-14.074 24.378-45.29 32.743-69.667 18.669S-6.74 150.518 7.333 126.14a51.2 51.2 0 0 1 21.27-20.094 7.3 7.3 0 0 1 6.167-.211 7.3 7.3 0 0 1 4.13 4.587c.006.022.012.043 0 .07a7.665 7.665 0 0 1-3.804 9.047 36.05 36.05 0 0 0-14.816 14.076c-9.948 17.23-4.036 39.297 13.195 49.246 17.231 9.948 39.298 4.035 49.246-13.196 3.445-5.967 5.724-15.943 5.433-22.9a2.632 2.632 0 0 1 2.681-2.953l59.054 1.499q.292-.59.626-1.168c5.657-9.798 18.205-13.161 28.003-7.504 9.8 5.658 13.161 18.206 7.504 28.004s-18.205 13.16-28.004 7.503a20.4 20.4 0 0 1-8.892-10.424zM76.97 90.555A51 51 0 0 1 65.601 77c-14.074-24.377-5.71-55.594 18.667-69.667S139.862 1.624 153.935 26a51.2 51.2 0 0 1 6.768 28.466 7.306 7.306 0 0 1-8.938 6.73c-.022-.005-.044-.011-.062-.035a7.664 7.664 0 0 1-5.932-7.817 36.04 36.04 0 0 0-4.783-19.87c-9.948-17.23-32.014-23.143-49.245-13.195S68.599 52.294 78.548 69.525c3.445 5.967 10.945 12.929 17.115 16.155a2.635 2.635 0 0 1 1.218 3.799l-30.826 50.393q.366.548.7 1.125c5.656 9.799 2.294 22.347-7.505 28.004s-22.346 2.295-28.003-7.504-2.295-22.346 7.503-28.003a20.4 20.4 0 0 1 13.474-2.488z"
-        />
-        </svg>    
+            <path
+                fill="#7547db"
+                d="M111.134 71.906a21 21 0 0 1-1.324.042c-11.314 0-20.5-9.186-20.5-20.5s9.186-20.5 20.5-20.5 20.5 9.186 20.5 20.5a20.4 20.4 0 0 1-4.582 12.913l22.66 41.655a51 51 0 0 1 17.422-3.068c28.148 0 51 22.852 51 51s-22.852 51-51 51a51.2 51.2 0 0 1-28.036-8.373 7.303 7.303 0 0 1-1.359-11.105c.015-.016.031-.033.061-.036a7.665 7.665 0 0 1 9.736-1.228 36.06 36.06 0 0 0 19.598 5.792c19.897 0 36.05-16.153 36.05-36.05s-16.153-36.05-36.05-36.05c-6.89 0-16.669 3.014-22.548 6.745a2.637 2.637 0 0 1-3.899-.845zm-9.412 88.614a51 51 0 0 1-6.054 16.62c-14.074 24.378-45.29 32.743-69.667 18.669S-6.74 150.518 7.333 126.14a51.2 51.2 0 0 1 21.27-20.094 7.3 7.3 0 0 1 6.167-.211 7.3 7.3 0 0 1 4.13 4.587c.006.022.012.043 0 .07a7.665 7.665 0 0 1-3.804 9.047 36.05 36.05 0 0 0-14.816 14.076c-9.948 17.23-4.036 39.297 13.195 49.246 17.231 9.948 39.298 4.035 49.246-13.196 3.445-5.967 5.724-15.943 5.433-22.9a2.632 2.632 0 0 1 2.681-2.953l59.054 1.499q.292-.59.626-1.168c5.657-9.798 18.205-13.161 28.003-7.504 9.8 5.658 13.161 18.206 7.504 28.004s-18.205 13.16-28.004 7.503a20.4 20.4 0 0 1-8.892-10.424zM76.97 90.555A51 51 0 0 1 65.601 77c-14.074-24.377-5.71-55.594 18.667-69.667S139.862 1.624 153.935 26a51.2 51.2 0 0 1 6.768 28.466 7.306 7.306 0 0 1-8.938 6.73c-.022-.005-.044-.011-.062-.035a7.664 7.664 0 0 1-5.932-7.817 36.04 36.04 0 0 0-4.783-19.87c-9.948-17.23-32.014-23.143-49.245-13.195S68.599 52.294 78.548 69.525c3.445 5.967 10.945 12.929 17.115 16.155a2.635 2.635 0 0 1 1.218 3.799l-30.826 50.393q.366.548.7 1.125c5.656 9.799 2.294 22.347-7.505 28.004s-22.346 2.295-28.003-7.504-2.295-22.346 7.503-28.003a20.4 20.4 0 0 1 13.474-2.488z"
+            />
+        </svg>
     )
 }
 
+export function MSTeamsIcon(props: SVGProps<SVGSVGElement>) {
+    return (<svg xmlns="http://www.w3.org/2000/svg" width={256} height={256} viewBox="0 0 256 239" {...props}>
+        <defs>
+            <path id="logosMicrosoftTeams0"
+                  d="M136.93 64.476v12.8a32.674 32.674 0 0 1-5.953-.952a38.698 38.698 0 0 1-26.79-22.742h21.848c6.008.022 10.872 4.887 10.895 10.894Z"
+                  opacity=".2"/>
+        </defs>
+        <defs>
+            <linearGradient id="logosMicrosoftTeams1" x1="17.372%" x2="82.628%" y1="-6.51%" y2="106.51%">
+                <stop offset="0%" stop-color="#5A62C3"/>
+                <stop offset="50%" stop-color="#4D55BD"/>
+                <stop offset="100%" stop-color="#3940AB"/>
+            </linearGradient>
+        </defs>
+        <path fill="#5059C9"
+              d="M178.563 89.302h66.125c6.248 0 11.312 5.065 11.312 11.312v60.231c0 22.96-18.613 41.574-41.573 41.574h-.197c-22.96.003-41.576-18.607-41.579-41.568V95.215a5.912 5.912 0 0 1 5.912-5.913Z"/>
+        <circle cx="223.256" cy="50.605" r="26.791" fill="#5059C9"/>
+        <circle cx="139.907" cy="38.698" r="38.698" fill="#7B83EB"/>
+        <path fill="#7B83EB"
+              d="M191.506 89.302H82.355c-6.173.153-11.056 5.276-10.913 11.449v68.697c-.862 37.044 28.445 67.785 65.488 68.692c37.043-.907 66.35-31.648 65.489-68.692v-68.697c.143-6.173-4.74-11.296-10.913-11.449Z"/>
+        <path
+            d="M142.884 89.302v96.268a10.96 10.96 0 0 1-6.787 10.062c-1.3.55-2.697.833-4.108.833H76.68c-.774-1.965-1.488-3.93-2.084-5.953a72.509 72.509 0 0 1-3.155-21.076v-68.703c-.143-6.163 4.732-11.278 10.895-11.43h60.547Z"
+            opacity=".1"/>
+        <path
+            d="M136.93 89.302v102.222c0 1.411-.283 2.808-.833 4.108a10.96 10.96 0 0 1-10.062 6.787H79.48c-1.012-1.965-1.965-3.93-2.798-5.954a59.049 59.049 0 0 1-2.084-5.953a72.508 72.508 0 0 1-3.155-21.076v-68.703c-.143-6.163 4.732-11.278 10.895-11.43h54.593Z"
+            opacity=".2"/>
+        <path
+            d="M136.93 89.302v90.315c-.045 5.998-4.896 10.85-10.895 10.895H74.597a72.508 72.508 0 0 1-3.155-21.076v-68.703c-.143-6.163 4.732-11.278 10.895-11.43h54.593Z"
+            opacity=".2"/>
+        <path
+            d="M130.977 89.302v90.315c-.046 5.998-4.897 10.85-10.895 10.895H74.597a72.508 72.508 0 0 1-3.155-21.076v-68.703c-.143-6.163 4.732-11.278 10.895-11.43h48.64Z"
+            opacity=".2"/>
+        <path
+            d="M142.884 58.523v18.753c-1.012.06-1.965.12-2.977.12c-1.012 0-1.965-.06-2.977-.12a32.674 32.674 0 0 1-5.953-.952a38.698 38.698 0 0 1-26.791-22.742a33.082 33.082 0 0 1-1.905-5.954h29.708c6.007.023 10.872 4.887 10.895 10.895Z"
+            opacity=".1"/>
+        <use href="#logosMicrosoftTeams0" opacity=".2"/>
+        <use href="#logosMicrosoftTeams0" opacity=".2"/>
+        <path d="M130.977 64.476v11.848a38.698 38.698 0 0 1-26.791-22.743h15.896c6.008.023 10.872 4.888 10.895 10.895Z"
+              opacity=".2"/>
+        <path fill="url(#logosMicrosoftTeams1)"
+              d="M10.913 53.581h109.15c6.028 0 10.914 4.886 10.914 10.913v109.151c0 6.027-4.886 10.913-10.913 10.913H10.913C4.886 184.558 0 179.672 0 173.645V64.495C0 58.466 4.886 53.58 10.913 53.58Z"/>
+        <path fill="#FFF" d="M94.208 95.125h-21.82v59.416H58.487V95.125H36.769V83.599h57.439z"/>
+    </svg>)
+}
+
diff --git a/src/components/wrappers/dashboard/common/notifier/notifier-form/notifier-form.tsx b/src/components/wrappers/dashboard/common/notifier/notifier-form/notifier-form.tsx
index 8cca508..3db99d1 100644
--- a/src/components/wrappers/dashboard/common/notifier/notifier-form/notifier-form.tsx
+++ b/src/components/wrappers/dashboard/common/notifier/notifier-form/notifier-form.tsx
@@ -40,7 +40,7 @@ import {
     NotifierTestChannelButton
 } from "@/components/wrappers/dashboard/common/notifier/notifier-form/notifier-test-channel-button";
 import {useEffect} from "react";
-import {notificationTypes} from "@/components/wrappers/dashboard/admin/notifications/helpers";
+import {notificationProviders} from "@/components/wrappers/dashboard/admin/notifications/helpers";
 import {cn} from "@/lib/utils";
 import {Card} from "@/components/ui/card";
 import {ArrowLeft} from "lucide-react";
@@ -93,29 +93,54 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues}: Not
     });
 
     const provider = form.watch("provider");
-    const selectedProviderDetails = notificationTypes.find(t => t.value === provider);
+    const selectedProviderDetails = notificationProviders.find(t => t.value === provider);
 
     if (isCreate && !provider) {
         return (
             <div className="grid grid-cols-2 sm:grid-cols-3 gap-4 py-4">
-                {notificationTypes.map((type) => {
+                {notificationProviders.map((type) => {
                     const Icon = type.icon;
                     return (
                         <Card
                             key={type.value}
                             className={cn(
-                                "flex flex-col items-center justify-center gap-3 p-4 cursor-pointer hover:bg-accent/50 hover:border-primary/50 transition-all",
+                                "relative flex flex-col items-center justify-center gap-3 p-4 transition-all",
+                                type.preview
+                                    ? "cursor-not-allowed bg-gray-200 border-gray-300 opacity-70"
+                                    : "cursor-pointer hover:bg-accent/50 hover:border-primary/50"
                             )}
                             onClick={() => {
+                                if (type.preview) return;
                                 form.setValue("provider", type.value as any);
                                 form.setValue("config", {});
                             }}
                         >
-                            <div className="h-10 w-10 bg-secondary rounded-full flex items-center justify-center">
-                                <Icon className="h-6 w-6 text-foreground"/>
+                            {type.preview && (
+                                <div
+                                    className="absolute bottom-0 right-0 overflow-hidden w-20 h-20 pointer-events-none">
+                                    <div
+                                        className="absolute bottom-0 right-0 w-38 h-6 flex items-center justify-center
+                                            transform -rotate-45 translate-x-14 -translate-y-4"
+                                        style={{backgroundColor: "#FE6702"}}
+                                    >
+                                        <span className="text-white text-[8px] pr-3 font-medium text-center w-full">coming soon</span>
+                                    </div>
+                                </div>
+                            )}
+                            <div className={cn(
+                                "h-10 w-10 rounded-full flex items-center justify-center",
+                                type.preview ? "bg-gray-400" : "bg-secondary"
+                            )}>
+                                <Icon className={cn("h-6 w-6 text-foreground", type.preview && "text-gray-700")}/>
                             </div>
-                            <span className="font-medium text-sm">{type.label}</span>
+                            <span className={cn(
+                                "font-medium text-sm align-middle text-center",
+                                type.preview ? "text-gray-500" : "text-foreground"
+                            )}>
+                            {type.label}
+                          </span>
                         </Card>
+
                     );
                 })}
             </div>
@@ -132,7 +157,8 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues}: Not
         >
             <div className="flex items-center gap-3 mb-2 p-3 bg-secondary/30 rounded-lg border border-border">
                 {selectedProviderDetails && (
-                    <div className="h-10 w-10 bg-background rounded-full flex items-center justify-center border border-border shadow-sm">
+                    <div
+                        className="h-10 w-10 bg-background rounded-full flex items-center justify-center border border-border shadow-sm">
                         <selectedProviderDetails.icon className="h-5 w-5"/>
                     </div>
                 )}
@@ -163,7 +189,8 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues}: Not
                     <FormItem>
                         <FormLabel>Channel Name</FormLabel>
                         <FormControl>
-                            <Input {...field} placeholder={`My ${selectedProviderDetails?.label} Channel`} value={field.value ?? ""}/>
+                            <Input {...field} placeholder={`My ${selectedProviderDetails?.label} Channel`}
+                                   value={field.value ?? ""}/>
                         </FormControl>
                         <FormMessage/>
                     </FormItem>
@@ -174,7 +201,7 @@ export const NotifierForm = ({onSuccessAction, organization, defaultValues}: Not
                 control={form.control}
                 name="provider"
                 render={({field}) => (
-                    <input type="hidden" {...field} value={field.value || ""} />
+                    <input type="hidden" {...field} value={field.value || ""}/>
                 )}
             />