diff --git a/dashboard/components/avatar/Avatar.stories.tsx b/dashboard/components/avatar/Avatar.stories.tsx
new file mode 100644
index 000000000..e2e128b5d
--- /dev/null
+++ b/dashboard/components/avatar/Avatar.stories.tsx
@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { allProviders, IntegrationProvider } from '@utils/providerHelper';
+import Avatar from './Avatar';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Avatar> = {
+  title: 'Komiser/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+  args: {
+    size: 48
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const AmazonWebServices: Story = {
+  args: {
+    avatarName: allProviders.AWS
+  }
+};
+
+export const GoogleCloudPlatform: Story = {
+  args: {
+    avatarName: allProviders.GCP
+  }
+};
+
+export const DigitalOcean: Story = {
+  args: {
+    avatarName: allProviders.DIGITAL_OCEAN
+  }
+};
+
+export const Azure: Story = {
+  args: {
+    avatarName: allProviders.AZURE
+  }
+};
+
+export const Civo: Story = {
+  args: {
+    avatarName: allProviders.CIVO
+  }
+};
+
+export const Kubernetes: Story = {
+  args: {
+    avatarName: allProviders.KUBERNETES
+  }
+};
+
+export const Linode: Story = {
+  args: {
+    avatarName: allProviders.LINODE
+  }
+};
+
+export const Tencent: Story = {
+  args: {
+    avatarName: allProviders.TENCENT
+  }
+};
+
+export const OCI: Story = {
+  args: {
+    avatarName: allProviders.OCI
+  }
+};
+
+export const Scaleway: Story = {
+  args: {
+    avatarName: allProviders.SCALE_WAY
+  }
+};
+
+export const MongoDBAtlas: Story = {
+  name: 'MongoDB Atlas',
+  args: {
+    avatarName: allProviders.MONGODB_ATLAS
+  }
+};
+
+export const Terraform: Story = {
+  args: {
+    avatarName: allProviders.TERRAFORM
+  }
+};
+
+export const Pulumi: Story = {
+  args: {
+    avatarName: allProviders.PULUMI
+  }
+};
+
+export const Slack: Story = {
+  args: {
+    avatarName: IntegrationProvider.SLACK
+  }
+};
+
+export const Webhook: Story = {
+  args: {
+    avatarName: IntegrationProvider.WEBHOOK
+  }
+};
diff --git a/dashboard/components/avatar/Avatar.tsx b/dashboard/components/avatar/Avatar.tsx
new file mode 100644
index 000000000..fd331daf4
--- /dev/null
+++ b/dashboard/components/avatar/Avatar.tsx
@@ -0,0 +1,22 @@
+import platform, { IntegrationProvider, Provider } from '@utils/providerHelper';
+import Image from 'next/image';
+
+export type AvatarProps = {
+  avatarName: Provider | IntegrationProvider;
+  size?: number;
+};
+
+function Avatar({ avatarName, size = 24 }: AvatarProps) {
+  const src = platform.getImgSrc(avatarName) || 'unknown platform';
+  return (
+    <Image
+      src={src}
+      alt={`${avatarName} logo`}
+      width={size}
+      height={size}
+      className="rounded-full border border-gray-100"
+    />
+  );
+}
+
+export default Avatar;
diff --git a/dashboard/components/cloud-account/components/CloudAccountItem.tsx b/dashboard/components/cloud-account/components/CloudAccountItem.tsx
index 82a0a3473..6ec687b35 100644
--- a/dashboard/components/cloud-account/components/CloudAccountItem.tsx
+++ b/dashboard/components/cloud-account/components/CloudAccountItem.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
-import Image from 'next/image';
-import providers from '@utils/providerHelper';
+import Avatar from '@components/avatar/Avatar';
+import platform from '@utils/providerHelper';
 import { CloudAccount } from '../hooks/useCloudAccounts/useCloudAccount';
 import CloudAccountStatus from './CloudAccountStatus';
 import More2Icon from '../../icons/More2Icon';
@@ -21,7 +21,7 @@ export default function CloudAccountItem({
   setCloudAccountItem: (cloudAccountItem: CloudAccount) => void;
 }) {
   const optionsRef = useRef<HTMLDivElement | null>(null);
-  const { id, provider, name, status } = account;
+  const { id, provider: cloudProvider, name, status } = account;
   const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {
@@ -47,17 +47,10 @@ export default function CloudAccountItem({
       onClick={() => openModal(account)}
       className="relative my-5 flex w-full items-center gap-4 rounded-lg border-2 border-black-170 bg-white p-6 text-black-900 transition-colors"
     >
-      <Image
-        src={providers.providerImg(provider) as string}
-        alt={`${name} image`}
-        width={150}
-        height={150}
-        className="h-12 w-12 rounded-full"
-      />
-
+      <Avatar avatarName={cloudProvider} size={48} />
       <div className="mr-auto">
         <p className="font-bold">{name}</p>
-        <p className="text-black-300">{providers.providerLabel(provider)}</p>
+        <p className="text-black-300">{platform.getLabel(cloudProvider)}</p>
       </div>
 
       <CloudAccountStatus status={status} />
diff --git a/dashboard/components/cloud-account/components/CloudAccountsLayout.tsx b/dashboard/components/cloud-account/components/CloudAccountsLayout.tsx
index ae617fb4d..d21791bb5 100644
--- a/dashboard/components/cloud-account/components/CloudAccountsLayout.tsx
+++ b/dashboard/components/cloud-account/components/CloudAccountsLayout.tsx
@@ -1,8 +1,8 @@
 import { NextRouter } from 'next/router';
 import { ReactNode, useContext } from 'react';
 
+import platform, { allProviders } from '@utils/providerHelper';
 import GlobalAppContext from '../../layout/context/GlobalAppContext';
-import Providers, { allProviders } from '../../../utils/providerHelper';
 import { CloudAccount } from '../hooks/useCloudAccounts/useCloudAccount';
 
 type CloudAccountsLayoutProps = {
@@ -73,7 +73,7 @@ function CloudAccountsLayout({
                   >
                     <div className={isActive ? 'ml-[-2px]' : ''}>
                       <p className="w-[188px] truncate">
-                        {Providers.providerLabel(provider)}
+                        {platform.getLabel(provider)}
                       </p>
                     </div>
                   </button>
diff --git a/dashboard/components/cloud-account/components/CloudAccountsSidePanel.tsx b/dashboard/components/cloud-account/components/CloudAccountsSidePanel.tsx
index 8891462a3..05047608f 100644
--- a/dashboard/components/cloud-account/components/CloudAccountsSidePanel.tsx
+++ b/dashboard/components/cloud-account/components/CloudAccountsSidePanel.tsx
@@ -11,10 +11,8 @@ import OciAccountDetails from '@components/account-details/OciAccountDetails';
 import ScalewayAccountDetails from '@components/account-details/ScalewayAccountDetails';
 import { getPayloadFromForm } from '@utils/cloudAccountHelpers';
 import { ToastProps } from '@components/toast/Toast';
-import providers, {
-  allProviders,
-  Provider
-} from '../../../utils/providerHelper';
+import Avatar from '@components/avatar/Avatar';
+import { allProviders, Provider } from '../../../utils/providerHelper';
 import AwsAccountDetails from '../../account-details/AwsAccountDetails';
 import Button from '../../button/Button';
 import Sidepanel from '../../sidepanel/Sidepanel';
@@ -132,14 +130,7 @@ function CloudAccountsSidePanel({
           <div className="flex flex-wrap-reverse items-center justify-between gap-6 sm:flex-nowrap">
             {cloudAccount && (
               <div className="flex flex-wrap items-center gap-4 sm:flex-nowrap">
-                <picture className="flex-shrink-0">
-                  <img
-                    src={providers.providerImg(cloudAccount.provider)}
-                    className="h-10 w-10 rounded-full"
-                    alt={cloudAccount.provider}
-                  />
-                </picture>
-
+                <Avatar avatarName={cloudAccount.provider} size={40} />
                 <div className="flex flex-col gap-1">
                   <div className="flex max-w-[14rem] items-center gap-1">
                     <p className="truncate font-medium text-black-900">
diff --git a/dashboard/components/explorer/DependencyGraphWrapper.tsx b/dashboard/components/explorer/DependencyGraphWrapper.tsx
index 27034d0ed..8987dc347 100644
--- a/dashboard/components/explorer/DependencyGraphWrapper.tsx
+++ b/dashboard/components/explorer/DependencyGraphWrapper.tsx
@@ -110,7 +110,7 @@ function DependencyGraphWrapper() {
                 );
               }}
               action={() => {
-                router.push('/');
+                router.push('/cloud-accounts');
               }}
             />
           </div>
diff --git a/dashboard/components/inventory/components/InventorySidePanel.tsx b/dashboard/components/inventory/components/InventorySidePanel.tsx
index 8248657cd..9d20dcfa4 100644
--- a/dashboard/components/inventory/components/InventorySidePanel.tsx
+++ b/dashboard/components/inventory/components/InventorySidePanel.tsx
@@ -1,13 +1,12 @@
 import SidepanelHeader from '@components/sidepanel/SidepanelHeader';
 import SidepanelPage from '@components/sidepanel/SidepanelPage';
 import Pill from '@components/pill/Pill';
-import formatNumber from '../../../utils/formatNumber';
-import providers from '../../../utils/providerHelper';
-import Button from '../../button/Button';
-import CloseIcon from '../../icons/CloseIcon';
-import PlusIcon from '../../icons/PlusIcon';
-import Sidepanel from '../../sidepanel/Sidepanel';
-import SidepanelTabs from '../../sidepanel/SidepanelTabs';
+import Button from '@components/button/Button';
+import CloseIcon from '@components/icons/CloseIcon';
+import PlusIcon from '@components/icons/PlusIcon';
+import Sidepanel from '@components/sidepanel/Sidepanel';
+import SidepanelTabs from '@components/sidepanel/SidepanelTabs';
+import formatNumber from '@utils/formatNumber';
 import {
   InventoryItem,
   Pages,
@@ -53,8 +52,16 @@ function InventorySidePanel({
   const getLastFetched = (date: string) => {
     const dateLastFetched = new Date(date);
     const today = new Date();
-    const aMonthAgo = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
-    const aWeekAgo = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
+    const aMonthAgo = new Date(
+      today.getFullYear(),
+      today.getMonth() - 1,
+      today.getDate()
+    );
+    const aWeekAgo = new Date(
+      today.getFullYear(),
+      today.getMonth(),
+      today.getDate() - 7
+    );
     let message;
     if (dateLastFetched > aMonthAgo) {
       message = 'Since last month';
@@ -76,8 +83,7 @@ function InventorySidePanel({
             subtitle={data.name}
             closeModal={closeModal}
             href={data.link}
-            imgSrc={providers.providerImg(data.provider)}
-            imgAlt={data.provider}
+            cloudProvider={data.provider}
           >
             {!data && bulkItems && (
               <div className="flex flex-col gap-1 py-1">
diff --git a/dashboard/components/inventory/components/InventoryTable.tsx b/dashboard/components/inventory/components/InventoryTable.tsx
index e07766e1e..8ab2cc48c 100644
--- a/dashboard/components/inventory/components/InventoryTable.tsx
+++ b/dashboard/components/inventory/components/InventoryTable.tsx
@@ -1,8 +1,8 @@
 import { ToastProps } from '@components/toast/Toast';
 import { NextRouter } from 'next/router';
 import { ChangeEvent } from 'react';
+import Avatar from '@components/avatar/Avatar';
 import formatNumber from '../../../utils/formatNumber';
-import providers from '../../../utils/providerHelper';
 import Checkbox from '../../checkbox/Checkbox';
 import SkeletonInventory from '../../skeleton/SkeletonInventory';
 import {
@@ -118,13 +118,7 @@ function InventoryTable({
                         className="min-w-[7rem] cursor-pointer py-4 pl-2 pr-6"
                       >
                         <div className="flex items-center gap-3">
-                          <picture className="flex-shrink-0">
-                            <img
-                              src={providers.providerImg(item.provider)}
-                              className="h-6 w-6 rounded-full"
-                              alt={item.provider}
-                            />
-                          </picture>
+                          <Avatar avatarName={item.provider} />
                           <span>{item.provider}</span>
                         </div>
                       </td>
@@ -203,13 +197,7 @@ function InventoryTable({
                         className="min-w-[7rem] cursor-pointer py-4 pl-2 pr-6"
                       >
                         <div className="flex items-center gap-3">
-                          <picture className="flex-shrink-0">
-                            <img
-                              src={providers.providerImg(item.provider)}
-                              className="h-6 w-6 rounded-full"
-                              alt={item.provider}
-                            />
-                          </picture>
+                          <Avatar avatarName={item.provider} />
                           <span>{item.provider}</span>
                         </div>
                       </td>
diff --git a/dashboard/components/inventory/components/view/InventoryView.tsx b/dashboard/components/inventory/components/view/InventoryView.tsx
index 79b8b8288..7bf5b77a1 100644
--- a/dashboard/components/inventory/components/view/InventoryView.tsx
+++ b/dashboard/components/inventory/components/view/InventoryView.tsx
@@ -1,8 +1,9 @@
 import Image from 'next/image';
 import { NextRouter } from 'next/router';
 import { ToastProps } from '@components/toast/Toast';
+import Avatar from '@components/avatar/Avatar';
 import formatNumber from '../../../../utils/formatNumber';
-import providers, { Provider } from '../../../../utils/providerHelper';
+import { Provider } from '../../../../utils/providerHelper';
 import Button from '../../../button/Button';
 import Checkbox from '../../../checkbox/Checkbox';
 import AlertIcon from '../../../icons/AlertIcon';
@@ -223,15 +224,7 @@ function InventoryView({
                         </td>
                         <td className="py-4 pl-2 pr-6">
                           <div className="flex items-center gap-2">
-                            <picture className="flex-shrink-0">
-                              <img
-                                src={providers.providerImg(
-                                  item.provider as Provider
-                                )}
-                                className="h-6 w-6 rounded-full"
-                                alt={item.provider}
-                              />
-                            </picture>
+                            <Avatar avatarName={item.provider as Provider} />
                             <span>{item.provider}</span>
                           </div>
                         </td>
diff --git a/dashboard/components/onboarding-wizard/PurplinCloud.tsx b/dashboard/components/onboarding-wizard/PurplinCloud.tsx
index ea43c222c..b470fd871 100644
--- a/dashboard/components/onboarding-wizard/PurplinCloud.tsx
+++ b/dashboard/components/onboarding-wizard/PurplinCloud.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import Image from 'next/image';
 
-import ProviderCls, { Provider } from '../../utils/providerHelper';
+import Avatar from '@components/avatar/Avatar';
+import { Provider } from '../../utils/providerHelper';
 
 function PurplinCloud({ provider }: { provider: Provider }) {
   return (
@@ -13,13 +14,7 @@ function PurplinCloud({ provider }: { provider: Provider }) {
         height={120}
       />
       <div className="absolute left-[48%] top-[53%] -translate-x-1/2 -translate-y-1/2 transform rounded-full">
-        <Image
-          src={ProviderCls.providerImg(provider) as string}
-          alt={`${provider} Logo`}
-          className="rounded-full shadow-md"
-          width={95}
-          height={95}
-        />
+        <Avatar avatarName={provider} size={96} />
       </div>
     </div>
   );
diff --git a/dashboard/components/pill/Pill.tsx b/dashboard/components/pill/Pill.tsx
index 31718ff2d..84309b45d 100644
--- a/dashboard/components/pill/Pill.tsx
+++ b/dashboard/components/pill/Pill.tsx
@@ -49,10 +49,14 @@ function Pill({ status, children, textcase = 'lowercase' }: PillProps) {
 
   return (
     <div
-      className={`inline-flex items-start justify-start gap-2.5 rounded-3xl px-1.5 pb-1 pt-0.5 ${handleColor().background}`}
+      className={`inline-flex items-start justify-start gap-2.5 rounded-3xl px-1.5 pb-1 pt-0.5 ${
+        handleColor().background
+      }`}
     >
       <p
-        className={`${handleColor().text} font-sans text-xs font-normal ${textcase}`}
+        className={`${
+          handleColor().text
+        } font-sans text-xs font-normal ${textcase}`}
       >
         {children}
       </p>
diff --git a/dashboard/components/sidepanel/SidepanelHeader.tsx b/dashboard/components/sidepanel/SidepanelHeader.tsx
index c4832ff06..089b406fe 100644
--- a/dashboard/components/sidepanel/SidepanelHeader.tsx
+++ b/dashboard/components/sidepanel/SidepanelHeader.tsx
@@ -1,14 +1,15 @@
 import { ReactNode } from 'react';
 import ArrowLeftIcon from '@components/icons/ArrowLeftIcon';
 import HyperLinkIcon from '@components/icons/HyperLinkIcon';
-import Button from '../button/Button';
+import Button from '@components/button/Button';
+import Avatar from '@components/avatar/Avatar';
+import { Provider } from '@utils/providerHelper';
 
 export type SidepanelHeaderProps = {
   title: string;
   subtitle?: string;
   href?: string;
-  imgSrc?: string;
-  imgAlt?: string;
+  cloudProvider?: Provider;
   children?: ReactNode;
   closeModal: () => void;
   deleteAction?: () => void;
@@ -20,8 +21,7 @@ function SidepanelHeader({
   title,
   subtitle,
   href,
-  imgSrc,
-  imgAlt,
+  cloudProvider,
   children,
   closeModal,
   deleteAction,
@@ -36,15 +36,7 @@ function SidepanelHeader({
     >
       {title && subtitle && (
         <div className="flex flex-wrap items-center gap-2 sm:flex-nowrap">
-          {imgSrc && (
-            <picture className="flex-shrink-0">
-              <img
-                src={imgSrc}
-                className="h-10 w-10 rounded-full"
-                alt={imgAlt}
-              />
-            </picture>
-          )}
+          {cloudProvider && <Avatar avatarName={cloudProvider} size={40} />}
           <div className="flex flex-col gap-0.5">
             <p className="font-['Noto Sans'] inline-flex w-48 items-center gap-2 truncate text-base font-medium leading-normal text-neutral-900">
               {title}
diff --git a/dashboard/components/sidepanel/SidepanelTabs.tsx b/dashboard/components/sidepanel/SidepanelTabs.tsx
index b5715b3a6..5b40e4d9d 100644
--- a/dashboard/components/sidepanel/SidepanelTabs.tsx
+++ b/dashboard/components/sidepanel/SidepanelTabs.tsx
@@ -1,4 +1,4 @@
-import { capitalizeString } from "@utils/formatString";
+import { capitalizeString } from '@utils/formatString';
 
 export type SidepanelTabsProps = {
   goTo: (page: any) => void;
@@ -21,8 +21,7 @@ function SidepanelTabs({ goTo, page, tabs }: SidepanelTabsProps) {
                          : 'border-transparent hover:text-komiser-700'
                      }`}
             >
-              {capitalizeString(tab)}{' '}
-              {/* capitalize first letter */}
+              {capitalizeString(tab)} {/* capitalize first letter */}
             </a>
           </li>
         ))}
diff --git a/dashboard/pages/onboarding/choose-cloud.tsx b/dashboard/pages/onboarding/choose-cloud.tsx
index c57b9217e..4eed57ae0 100644
--- a/dashboard/pages/onboarding/choose-cloud.tsx
+++ b/dashboard/pages/onboarding/choose-cloud.tsx
@@ -3,10 +3,8 @@ import Head from 'next/head';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 
-import ProviderCls, {
-  allProviders,
-  Provider
-} from '../../utils/providerHelper';
+import Avatar from '@components/avatar/Avatar';
+import platform, { allProviders, Provider } from '../../utils/providerHelper';
 
 import Button from '../../components/button/Button';
 import OnboardingWizardLayout, {
@@ -57,7 +55,7 @@ export default function ChooseCloud() {
               values={Object.values(allProviders)}
               handleChange={handleSelectChange}
               displayValues={Object.values(allProviders).map(value => ({
-                label: ProviderCls.providerLabel(value)
+                label: platform.getLabel(value)
               }))}
             />
           </div>
@@ -93,13 +91,7 @@ export default function ChooseCloud() {
               height={120}
             />
             <div className="absolute left-[48%] top-[53%] -translate-x-1/2 -translate-y-1/2 transform rounded-full">
-              <Image
-                src={ProviderCls.providerImg(provider) as string}
-                alt={`${provider} Logo`}
-                className="rounded-full shadow-md"
-                width={95}
-                height={95}
-              />
+              <Avatar avatarName={provider} size={96} />
             </div>
           </div>
           <Image
diff --git a/dashboard/pages/onboarding/cloud-accounts/index.tsx b/dashboard/pages/onboarding/cloud-accounts/index.tsx
index 4bd6d453a..218598b4b 100644
--- a/dashboard/pages/onboarding/cloud-accounts/index.tsx
+++ b/dashboard/pages/onboarding/cloud-accounts/index.tsx
@@ -2,13 +2,12 @@ import { useState } from 'react';
 import router from 'next/router';
 import Head from 'next/head';
 import Link from 'next/link';
-import Image from 'next/image';
 import OnboardingWizardLayout, {
   LeftSideLayout,
   RightSideLayout
 } from '@components/onboarding-wizard/OnboardingWizardLayout';
 import PlusIcon from '@components/icons/PlusIcon';
-import providers from '@utils/providerHelper';
+import platform from '@utils/providerHelper';
 import DeleteIcon from '@components/icons/DeleteIcon';
 import Modal from '@components/modal/Modal';
 import CloudAccountDeleteContents from '@components/cloud-account/components/CloudAccountDeleteContents';
@@ -17,6 +16,7 @@ import Toast from '@components/toast/Toast';
 import useCloudAccount from '@components/cloud-account/hooks/useCloudAccounts/useCloudAccount';
 import Button from '@components/button/Button';
 import { useToast } from '@components/toast/ToastProvider';
+import Avatar from '@components/avatar/Avatar';
 
 export default function CloudAccounts() {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
@@ -75,16 +75,7 @@ export default function CloudAccounts() {
                 className="flex items-center justify-between rounded-lg border border-black-200 p-6"
               >
                 <div className="flex flex-wrap items-center gap-4 sm:flex-nowrap">
-                  <picture className="flex-shrink-0">
-                    <Image
-                      src={String(providers.providerImg(account.provider))}
-                      className="rounded-full"
-                      height={40}
-                      width={40}
-                      alt={account.provider}
-                    />
-                  </picture>
-
+                  <Avatar avatarName={account.provider} size={40} />
                   <div className="flex flex-col gap-1">
                     <div className="flex max-w-[14rem] items-center gap-1">
                       <p className="truncate font-medium text-black-900">
@@ -92,7 +83,7 @@ export default function CloudAccounts() {
                       </p>
                     </div>
                     <p className="flex items-center gap-2 text-xs text-black-300">
-                      {providers.providerLabel(account.provider)}
+                      {platform.getLabel(account.provider)}
                     </p>
                   </div>
                 </div>
@@ -130,13 +121,7 @@ export default function CloudAccounts() {
             <div className="aspect-square h-full w-full rounded-lg bg-komiser-200"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-komiser-200">
               <div className="relative bottom-3 left-3 h-full w-full scale-110 overflow-clip rounded-lg shadow-xl">
-                <Image
-                  src={String(providers.providerImg('aws'))}
-                  layout="fill"
-                  objectFit="cover"
-                  className="object-center"
-                  alt="AWS"
-                />
+                <Avatar avatarName="aws" />
               </div>
             </div>
             <div className="aspect-square h-full w-full rounded-lg bg-komiser-200"></div>
@@ -148,13 +133,7 @@ export default function CloudAccounts() {
             <div className="aspect-square h-full w-full rounded-lg bg-komiser-200"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-komiser-200">
               <div className="relative h-full w-full overflow-clip rounded-lg shadow-xl">
-                <Image
-                  src={String(providers.providerImg('civo'))}
-                  layout="fill"
-                  objectFit="cover"
-                  className="object-center"
-                  alt="Civo"
-                />
+                <Avatar avatarName="civo" />
               </div>
             </div>
             <div className="aspect-square h-full w-full rounded-lg bg-komiser-200"></div>
@@ -168,13 +147,7 @@ export default function CloudAccounts() {
             <div className="aspect-square h-full w-full rounded-lg bg-komiser-200"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-komiser-400">
               <div className="relative h-full w-full overflow-clip rounded-lg bg-white shadow-xl">
-                <Image
-                  src={String(providers.providerImg('gcp'))}
-                  layout="fill"
-                  objectFit="cover"
-                  className="object-center p-2"
-                  alt="GCP"
-                />
+                <Avatar avatarName="gcp" />
               </div>
             </div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
@@ -188,13 +161,7 @@ export default function CloudAccounts() {
             <div className="aspect-square h-full w-full rounded-lg bg-komiser-400"></div>
             <div className="aspect-square h-full w-full rounded-lg bg-komiser-200">
               <div className="relative left-3 top-3  h-full w-full overflow-clip rounded-lg bg-black-800 shadow-xl">
-                <Image
-                  src={String(providers.providerImg('azure'))}
-                  layout="fill"
-                  objectFit="cover"
-                  className="object-center p-5"
-                  alt="Azure"
-                />
+                <Avatar avatarName="azure" />
               </div>
             </div>
             <div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
diff --git a/dashboard/public/assets/img/integrations/slack.png b/dashboard/public/assets/img/integrations/slack.png
new file mode 100644
index 000000000..3ab34c836
Binary files /dev/null and b/dashboard/public/assets/img/integrations/slack.png differ
diff --git a/dashboard/public/assets/img/integrations/webhook.png b/dashboard/public/assets/img/integrations/webhook.png
new file mode 100644
index 000000000..a8545e749
Binary files /dev/null and b/dashboard/public/assets/img/integrations/webhook.png differ
diff --git a/dashboard/public/assets/img/providers/aws.png b/dashboard/public/assets/img/providers/aws.png
index 899f5fa9e..a5569cec6 100644
Binary files a/dashboard/public/assets/img/providers/aws.png and b/dashboard/public/assets/img/providers/aws.png differ
diff --git a/dashboard/public/assets/img/providers/azure.png b/dashboard/public/assets/img/providers/azure.png
new file mode 100644
index 000000000..8c3266568
Binary files /dev/null and b/dashboard/public/assets/img/providers/azure.png differ
diff --git a/dashboard/public/assets/img/providers/azure.svg b/dashboard/public/assets/img/providers/azure.svg
deleted file mode 100644
index 7151406b9..000000000
--- a/dashboard/public/assets/img/providers/azure.svg
+++ /dev/null
@@ -1,23 +0,0 @@
-<svg width="150" height="150" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
-    <defs>
-        <linearGradient id="e399c19f-b68f-429d-b176-18c2117ff73c" x1="-1032.172" x2="-1059.213" y1="145.312" y2="65.426" gradientTransform="matrix(1 0 0 -1 1075 158)" gradientUnits="userSpaceOnUse">
-            <stop offset="0" stop-color="#114a8b"></stop>
-            <stop offset="1" stop-color="#0669bc"></stop>
-        </linearGradient>
-        <linearGradient id="ac2a6fc2-ca48-4327-9a3c-d4dcc3256e15" x1="-1023.725" x2="-1029.98" y1="108.083" y2="105.968" gradientTransform="matrix(1 0 0 -1 1075 158)" gradientUnits="userSpaceOnUse">
-            <stop offset="0" stop-opacity=".3"></stop>
-            <stop offset=".071" stop-opacity=".2"></stop>
-            <stop offset=".321" stop-opacity=".1"></stop>
-            <stop offset=".623" stop-opacity=".05"></stop>
-            <stop offset="1" stop-opacity="0"></stop>
-        </linearGradient>
-        <linearGradient id="a7fee970-a784-4bb1-af8d-63d18e5f7db9" x1="-1027.165" x2="-997.482" y1="147.642" y2="68.561" gradientTransform="matrix(1 0 0 -1 1075 158)" gradientUnits="userSpaceOnUse">
-            <stop offset="0" stop-color="#3ccbf4"></stop>
-            <stop offset="1" stop-color="#2892df"></stop>
-        </linearGradient>
-    </defs>
-    <path fill="url(#e399c19f-b68f-429d-b176-18c2117ff73c)" d="M33.338 6.544h26.038l-27.03 80.087a4.152 4.152 0 0 1-3.933 2.824H8.149a4.145 4.145 0 0 1-3.928-5.47L29.404 9.368a4.152 4.152 0 0 1 3.934-2.825z"></path>
-    <path fill="#0078d4" d="M71.175 60.261h-41.29a1.911 1.911 0 0 0-1.305 3.309l26.532 24.764a4.171 4.171 0 0 0 2.846 1.121h23.38z"></path>
-    <path fill="url(#ac2a6fc2-ca48-4327-9a3c-d4dcc3256e15)" d="M33.338 6.544a4.118 4.118 0 0 0-3.943 2.879L4.252 83.917a4.14 4.14 0 0 0 3.908 5.538h20.787a4.443 4.443 0 0 0 3.41-2.9l5.014-14.777 17.91 16.705a4.237 4.237 0 0 0 2.666.972H81.24L71.024 60.261l-29.781.007L59.47 6.544z"></path>
-    <path fill="url(#a7fee970-a784-4bb1-af8d-63d18e5f7db9)" d="M66.595 9.364a4.145 4.145 0 0 0-3.928-2.82H33.648a4.146 4.146 0 0 1 3.928 2.82l25.184 74.62a4.146 4.146 0 0 1-3.928 5.472h29.02a4.146 4.146 0 0 0 3.927-5.472z"></path>
-</svg>
\ No newline at end of file
diff --git a/dashboard/public/assets/img/providers/civo.jpeg b/dashboard/public/assets/img/providers/civo.jpeg
deleted file mode 100644
index 7fa0a8072..000000000
Binary files a/dashboard/public/assets/img/providers/civo.jpeg and /dev/null differ
diff --git a/dashboard/public/assets/img/providers/civo.png b/dashboard/public/assets/img/providers/civo.png
new file mode 100644
index 000000000..a79e3f43c
Binary files /dev/null and b/dashboard/public/assets/img/providers/civo.png differ
diff --git a/dashboard/public/assets/img/providers/digitalocean.png b/dashboard/public/assets/img/providers/digitalocean.png
index 7a7283069..a39c3383e 100644
Binary files a/dashboard/public/assets/img/providers/digitalocean.png and b/dashboard/public/assets/img/providers/digitalocean.png differ
diff --git a/dashboard/public/assets/img/providers/gcp.png b/dashboard/public/assets/img/providers/gcp.png
index 0a8bc5433..b6bb9198b 100644
Binary files a/dashboard/public/assets/img/providers/gcp.png and b/dashboard/public/assets/img/providers/gcp.png differ
diff --git a/dashboard/public/assets/img/providers/kubernetes.png b/dashboard/public/assets/img/providers/kubernetes.png
index e594696ac..96caf99da 100644
Binary files a/dashboard/public/assets/img/providers/kubernetes.png and b/dashboard/public/assets/img/providers/kubernetes.png differ
diff --git a/dashboard/public/assets/img/providers/linode.png b/dashboard/public/assets/img/providers/linode.png
index 8cbccf6c6..d8187cfa0 100644
Binary files a/dashboard/public/assets/img/providers/linode.png and b/dashboard/public/assets/img/providers/linode.png differ
diff --git a/dashboard/public/assets/img/providers/mongodbatlas.jpg b/dashboard/public/assets/img/providers/mongodbatlas.jpg
deleted file mode 100644
index ce779de32..000000000
Binary files a/dashboard/public/assets/img/providers/mongodbatlas.jpg and /dev/null differ
diff --git a/dashboard/public/assets/img/providers/mongodbatlas.png b/dashboard/public/assets/img/providers/mongodbatlas.png
new file mode 100644
index 000000000..7e3cfea0f
Binary files /dev/null and b/dashboard/public/assets/img/providers/mongodbatlas.png differ
diff --git a/dashboard/public/assets/img/providers/oci.png b/dashboard/public/assets/img/providers/oci.png
index 044939987..9570aa38e 100644
Binary files a/dashboard/public/assets/img/providers/oci.png and b/dashboard/public/assets/img/providers/oci.png differ
diff --git a/dashboard/public/assets/img/providers/pulumi.png b/dashboard/public/assets/img/providers/pulumi.png
new file mode 100644
index 000000000..d50127121
Binary files /dev/null and b/dashboard/public/assets/img/providers/pulumi.png differ
diff --git a/dashboard/public/assets/img/providers/scaleway.png b/dashboard/public/assets/img/providers/scaleway.png
index d595eb283..a2af3ada2 100644
Binary files a/dashboard/public/assets/img/providers/scaleway.png and b/dashboard/public/assets/img/providers/scaleway.png differ
diff --git a/dashboard/public/assets/img/providers/tencent.jpeg b/dashboard/public/assets/img/providers/tencent.jpeg
deleted file mode 100644
index 5ebdcb871..000000000
Binary files a/dashboard/public/assets/img/providers/tencent.jpeg and /dev/null differ
diff --git a/dashboard/public/assets/img/providers/tencent.png b/dashboard/public/assets/img/providers/tencent.png
new file mode 100644
index 000000000..69e5e6d1b
Binary files /dev/null and b/dashboard/public/assets/img/providers/tencent.png differ
diff --git a/dashboard/public/assets/img/providers/terraform.png b/dashboard/public/assets/img/providers/terraform.png
new file mode 100644
index 000000000..1566af689
Binary files /dev/null and b/dashboard/public/assets/img/providers/terraform.png differ
diff --git a/dashboard/utils/formatString.ts b/dashboard/utils/formatString.ts
index a698374f6..436a3093a 100644
--- a/dashboard/utils/formatString.ts
+++ b/dashboard/utils/formatString.ts
@@ -1,7 +1,7 @@
 export function capitalizeString(inputString: string) {
-    if (inputString.length < 0) return inputString;
+  if (inputString.length < 0) return inputString;
 
-    return (
-        inputString.charAt(0).toUpperCase() + inputString.slice(1).toLowerCase()
-    );
-}
\ No newline at end of file
+  return (
+    inputString.charAt(0).toUpperCase() + inputString.slice(1).toLowerCase()
+  );
+}
diff --git a/dashboard/utils/providerHelper.ts b/dashboard/utils/providerHelper.ts
index 9e25de73e..8702b7929 100644
--- a/dashboard/utils/providerHelper.ts
+++ b/dashboard/utils/providerHelper.ts
@@ -9,7 +9,9 @@ export type Provider =
   | 'tencent'
   | 'oci'
   | 'scaleway'
-  | 'mongodbatlas';
+  | 'mongodbatlas'
+  | 'pulumi'
+  | 'terraform';
 
 type ProviderKey =
   | 'AWS'
@@ -22,7 +24,9 @@ type ProviderKey =
   | 'TENCENT'
   | 'OCI'
   | 'SCALE_WAY'
-  | 'MONGODB_ATLAS';
+  | 'MONGODB_ATLAS'
+  | 'PULUMI'
+  | 'TERRAFORM';
 
 export const allProviders: { [key in ProviderKey]: Provider } = {
   AWS: 'aws',
@@ -35,11 +39,12 @@ export const allProviders: { [key in ProviderKey]: Provider } = {
   TENCENT: 'tencent',
   OCI: 'oci',
   SCALE_WAY: 'scaleway',
-  MONGODB_ATLAS: 'mongodbatlas'
+  MONGODB_ATLAS: 'mongodbatlas',
+  TERRAFORM: 'terraform',
+  PULUMI: 'pulumi'
 };
 
 export type DBProvider = 'postgres' | 'sqlite';
-
 type DBProviderKey = 'POSTGRES' | 'SQLITE';
 
 export const allDBProviders: { [key in DBProviderKey]: DBProvider } = {
@@ -47,104 +52,103 @@ export const allDBProviders: { [key in DBProviderKey]: DBProvider } = {
   SQLITE: 'sqlite'
 };
 
-const providers = {
-  providerLabel(arg: Provider) {
-    let label;
-
-    if (arg.toLowerCase() === 'aws') {
-      label = 'Amazon Web Services';
-    }
-
-    if (arg.toLowerCase() === 'gcp') {
-      label = 'Google Cloud Platform';
-    }
-    if (arg.toLowerCase() === 'digitalocean') {
-      label = 'DigitalOcean';
-    }
-
-    if (arg.toLowerCase() === 'azure') {
-      label = 'Azure';
-    }
-
-    if (arg.toLowerCase() === 'tencent') {
-      label = 'Tencent';
-    }
-
-    if (arg.toLowerCase() === 'civo') {
-      label = 'Civo';
-    }
-
-    if (arg.toLowerCase() === 'kubernetes') {
-      label = 'Kubernetes';
-    }
+export enum IntegrationProvider {
+  SLACK = 'slack',
+  WEBHOOK = 'webhook'
+}
 
-    if (arg.toLowerCase() === 'linode') {
-      label = 'Linode';
-    }
-
-    if (arg.toLowerCase() === 'oci') {
-      label = 'OCI';
-    }
+type ProviderInfo = {
+  label: string;
+  imgSrc: string;
+};
 
-    if (arg.toLowerCase() === 'scaleway') {
-      label = 'Scaleway';
-    }
+export type Platform = {
+  cloudProviders: Record<string, ProviderInfo>;
+  integrationProviders: Record<string, ProviderInfo>;
+  getImgSrc: (providerName: Provider | IntegrationProvider) => string;
+  getLabel: (providerName: Provider | IntegrationProvider) => string;
+};
 
-    if (arg.toLowerCase() === 'mongodbatlas') {
-      label = 'MongoDB Atlas';
+const platform: Platform = {
+  cloudProviders: {
+    aws: {
+      label: 'Amazon Web Services',
+      imgSrc: '/assets/img/providers/aws.png'
+    },
+    gcp: {
+      label: 'Google Cloud Platform',
+      imgSrc: '/assets/img/providers/gcp.png'
+    },
+    digitalocean: {
+      label: 'DigitalOcean',
+      imgSrc: '/assets/img/providers/digitalocean.png'
+    },
+    azure: {
+      label: 'Azure',
+      imgSrc: '/assets/img/providers/azure.png'
+    },
+    civo: {
+      label: 'Civo',
+      imgSrc: '/assets/img/providers/civo.png'
+    },
+    kubernetes: {
+      label: 'Kubernetes',
+      imgSrc: '/assets/img/providers/kubernetes.png'
+    },
+    linode: {
+      label: 'Linode',
+      imgSrc: '/assets/img/providers/linode.png'
+    },
+    tencent: {
+      label: 'Tencent',
+      imgSrc: '/assets/img/providers/tencent.png'
+    },
+    oci: {
+      label: 'OCI',
+      imgSrc: '/assets/img/providers/oci.png'
+    },
+    scaleway: {
+      label: 'Scaleway',
+      imgSrc: '/assets/img/providers/scaleway.png'
+    },
+    mongodbatlas: {
+      label: 'MongoDB Atlas',
+      imgSrc: '/assets/img/providers/mongodbatlas.png'
+    },
+    terraform: {
+      label: 'Terraform',
+      imgSrc: '/assets/img/providers/terraform.png'
+    },
+    pulumi: {
+      label: 'Pulumi',
+      imgSrc: '/assets/img/providers/pulumi.png'
     }
-
-    return label;
   },
-  providerImg(arg: Provider) {
-    let img;
-
-    if (arg.toLowerCase() === 'aws') {
-      img = '/assets/img/providers/aws.png';
-    }
-
-    if (arg.toLowerCase() === 'gcp') {
-      img = '/assets/img/providers/gcp.png';
-    }
-
-    if (arg.toLowerCase() === 'digitalocean') {
-      img = '/assets/img/providers/digitalocean.png';
-    }
-
-    if (arg.toLowerCase() === 'azure') {
-      img = '/assets/img/providers/azure.svg';
-    }
-
-    if (arg.toLowerCase() === 'civo') {
-      img = '/assets/img/providers/civo.jpeg';
-    }
-
-    if (arg.toLowerCase() === 'kubernetes') {
-      img = '/assets/img/providers/kubernetes.png';
-    }
-
-    if (arg.toLowerCase() === 'linode') {
-      img = '/assets/img/providers/linode.png';
-    }
-
-    if (arg.toLowerCase() === 'tencent') {
-      img = '/assets/img/providers/tencent.jpeg';
-    }
-
-    if (arg.toLowerCase() === 'oci') {
-      img = '/assets/img/providers/oci.png';
-    }
-
-    if (arg.toLowerCase() === 'scaleway') {
-      img = '/assets/img/providers/scaleway.png';
-    }
-
-    if (arg.toLowerCase() === 'mongodbatlas') {
-      img = '/assets/img/providers/mongodbatlas.jpg';
+  integrationProviders: {
+    slack: {
+      label: 'Slack',
+      imgSrc: '/assets/img/integrations/slack.png'
+    },
+    webhook: {
+      label: 'Custom Web-Hook',
+      imgSrc: '/assets/img/integrations/webhook.png'
     }
+  },
 
-    return img;
+  getImgSrc(providerName) {
+    const key = providerName.toLowerCase();
+    if (key in this.cloudProviders) return this.cloudProviders[key].imgSrc;
+    if (key in this.integrationProviders)
+      return this.integrationProviders[key].imgSrc;
+    return '';
+  },
+  getLabel(providerName) {
+    const key = providerName.toLowerCase();
+    if (key in this.cloudProviders) return this.cloudProviders[key].label;
+    if (key in this.integrationProviders)
+      return this.integrationProviders[key].label;
+    return '';
   }
 };
 
-export default providers;
+export default platform;