diff --git a/frontend/assets/css/colors.scss b/frontend/assets/css/colors.scss
index c422961f7..bacec1f66 100644
--- a/frontend/assets/css/colors.scss
+++ b/frontend/assets/css/colors.scss
@@ -1,6 +1,7 @@
 // When updating values here, please keep in mind that you might have to updated utils/colors.ts too
 
 :root {
+  --dark-dark-grey: #5C4E4E;
   --white: #ffffff;
   --grey: #a5a5a5;
   --medium-grey: #b3b3b3;
@@ -11,6 +12,7 @@
   --light-grey-3: #d3d3d3;
   --light-grey-4: #dddddd;
   --light-grey-5: #eaeaea;
+  --light-grey-7: #C0C0C0;
   --dark-grey: #5c4e4e;
   --very-dark-grey: #362f32;
   --asphalt: #484f56;
@@ -51,6 +53,7 @@
   --text-color-inverted: var(--light-grey);
   --text-color-disabled: var(--grey);
   --text-color-discreet: var(--dark-grey);
+  --text-color--error: var(--flashy-red);
 
   --button-color-active: var(--primary-orange);
   --button-color-hover: var(--primary-orange-hover);
@@ -63,6 +66,11 @@
   --button-text-color-disabled: var(--grey-4);
   --button-text-color-dangerous: var(--white);
 
+  --button-secondary-background-color: var(--light-grey);
+  --button-secondary-background-color--hover: var(--light-grey-4 );
+  --button-secondary-color: var(--light-black);
+  --button-secondary-border-color: var(--light-grey-7);
+
   --checkbox-background-color: var(--light-grey-4);
 
   --container-background: var(--grey-4);
@@ -146,9 +154,15 @@
     --button-color-dark-pattern: var(--light-grey);
     --button-text-color-disabled: var(--light-grey);
     --button-text-color-dangerous: var(--light-grey);
-
-    --checkbox-background-color: var(--light-grey);
-
+    
+    --button-secondary-background-color: var(--very-dark-grey);
+    --button-secondary-background-color--hover: var(--light-black);
+    --button-secondary-color: var(--light-grey);
+    --button-secondary-border-color: var(--dark-dark-grey);
+       
+    --checkbox-background-color: var(--very-dark-grey);
+    --checkbox-border-color: var(--dark-grey);
+    
     --container-background: var(--light-black);
     --container-color: var(--grey-4);
     --container-border-color: var(--dark-grey);
diff --git a/frontend/assets/css/prime.scss b/frontend/assets/css/prime.scss
index bef2f4554..b21de51cb 100644
--- a/frontend/assets/css/prime.scss
+++ b/frontend/assets/css/prime.scss
@@ -160,6 +160,7 @@
     width: 20px;
     height: 20px;
     border-radius: var(--border-radius);
+    border: 1px solid var(--checkbox-border-color);
     background: var(--checkbox-background-color);
     &.p-highlight:not(:hover) {
       background: var(--primary-color);
diff --git a/frontend/components/bc/BcButton.vue b/frontend/components/bc/BcButton.vue
new file mode 100644
index 000000000..bb5a711d2
--- /dev/null
+++ b/frontend/components/bc/BcButton.vue
@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+
+const props =defineProps<{
+  /**
+   * ℹ️ should only be used rarely, e.g. in cases where the action should not be triggerd twice
+   */
+  isDisabled?: boolean,
+  /**
+   * ♿️ buttons that are aria-disabled are still perceivable by screen readers
+   * as they can still be focused on 
+   */
+  isAriaDisabled?: boolean,
+  variant?: 'secondary' // | 'red'
+}>()
+
+const shouldAppearDisabled = computed(() => props.isDisabled || props.isAriaDisabled)
+</script>
+
+<template> 
+  <Button 
+    type="button"
+    :disabled="isDisabled"
+    :aria-disabled="isAriaDisabled"
+    :class="{
+      'bc-button--secondary': !shouldAppearDisabled && variant === 'secondary',
+      'bc-button--disabled': shouldAppearDisabled,
+      // 'bc-button--red': variant === 'red'
+    }"
+  >
+    <slot/>
+    <span
+      v-if="$slots.icon"
+      class="bc-button__icon"
+    >
+      <slot name="icon"/>
+    </span>
+  </Button>
+
+ </template>
+
+<style lang="scss" scoped>
+  .bc-button--secondary {
+    border-color: var(--button-secondary-border-color);
+    background-color: var(--button-secondary-background-color);
+    color: var(--button-secondary-color);
+    &:hover {
+      background-color: var(--button-secondary-background-color--hover);
+      border-color: var(--button-secondary-border-color);
+    }
+    &:active {
+      background-color: var(--button-secondary-background-color);
+      border-color: var(--button-secondary-border-color);
+    }
+  }
+  .bc-button--disabled {
+    &,
+    &:hover,
+    &:focus {
+      background-color: var(--button-color-disabled);
+      border-color: var(--button-color-disabled);
+      color: var(--button-text-color-disabled);
+      cursor: not-allowed;
+    }
+  }
+  .bc-button__icon {
+    margin-left: var(--padding-small);
+  }
+</style>
\ No newline at end of file
diff --git a/frontend/components/bc/BcTooltip.vue b/frontend/components/bc/BcTooltip.vue
index 131a94525..4efe718a5 100644
--- a/frontend/components/bc/BcTooltip.vue
+++ b/frontend/components/bc/BcTooltip.vue
@@ -13,8 +13,12 @@ interface Props {
   scrollContainer?: string // query selector for scrollable parent container
   dontOpenPermanently?: boolean
   hoverDelay?: number
+  tooltipWidth?: `${number}px` | `${number}%`
+  tooltipTextAlign?: 'left' | 'center' | 'right'
 }
 
+const toolTipTextAlignWithDefault = computed(() => props.tooltipTextAlign || 'center')
+
 const props = defineProps<Props>()
 const bcTooltipOwner = ref<HTMLElement | null>(null)
 const bcTooltip = ref<HTMLElement | null>(null)
@@ -222,14 +226,14 @@ onUnmounted(() => {
   >
     <slot />
     <Teleport v-if="isOpen" to="body">
-      <div class="bc-tooltip-wrapper" :style="pos" :class="tooltipClass">
+      <div class="bc-tooltip-wrapper" :style="{...pos, ...{ width: tooltipWidth }}"  :class="tooltipClass">
         <div
-          ref="bcTooltip"
-          class="bc-tooltip"
-          :class="classList"
-          @click="$event.stopImmediatePropagation()"
-          @mouseover="instantHoverTooltip(true)"
-          @mouseleave="bounceHoverTooltip(false, false, true)"
+        ref="bcTooltip"
+        class="bc-tooltip"
+        :class="classList"
+        @click="$event.stopImmediatePropagation()"
+        @mouseover="instantHoverTooltip(true)"
+        @mouseleave="bounceHoverTooltip(false, false, true)"
         >
           <slot name="tooltip">
             <span>
@@ -296,7 +300,7 @@ onUnmounted(() => {
   flex-wrap: wrap;
   opacity: 0;
   transition: opacity 1s;
-  text-align: center;
+  text-align: v-bind(toolTipTextAlignWithDefault);
   padding: 9px 12px;
   border-radius: var(--border-radius);
   background: var(--tt-bg-color);
diff --git a/frontend/components/bc/form/BcForm.vue b/frontend/components/bc/form/BcForm.vue
new file mode 100644
index 000000000..1d68559f9
--- /dev/null
+++ b/frontend/components/bc/form/BcForm.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <form class="bc-form">
+    <slot/>
+  </form>
+</template>
+
+<style lang="scss" scoped>
+.bc-form {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--padding-small);
+}
+</style>
\ No newline at end of file
diff --git a/frontend/components/bc/form/BcFormRow.vue b/frontend/components/bc/form/BcFormRow.vue
new file mode 100644
index 000000000..3fcd8f386
--- /dev/null
+++ b/frontend/components/bc/form/BcFormRow.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div class="bc-form-row">
+    <slot/>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.bc-form-row {
+  display: grid;
+  justify-content: space-between;
+  align-items: center;
+  grid-template-columns: 1fr auto;
+  row-gap: var(--padding-small);
+  
+  grid-template-areas: 
+    "label input"
+    "error error";
+}
+</style>
\ No newline at end of file
diff --git a/frontend/components/bc/input/BcInputCheckbox.vue b/frontend/components/bc/input/BcInputCheckbox.vue
new file mode 100644
index 000000000..ec4936aba
--- /dev/null
+++ b/frontend/components/bc/input/BcInputCheckbox.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+  import {
+    faInfoCircle
+  } from '@fortawesome/pro-regular-svg-icons'
+  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+  import type { BcInputError } from '~/components/bc/input/BcInputError.vue';
+
+  const props = defineProps<{
+    error?: BcInputError,
+    label?: string,
+    infoText?: string,
+  }>()
+
+  const id = props.label ? useId() : undefined
+  const input = defineModel<boolean>()
+
+</script>
+
+<template>
+  <BcInputError :error>
+  <span>
+    <label 
+      v-if="label"
+      class="label"
+      :for="id"
+    >
+      {{ label }}
+    </label>
+    <BcTooltip 
+      v-if="infoText"
+      class="bc-input-checkbox__info"
+      tooltip-width="217px"
+      tooltip-text-align="left"
+    >
+      <FontAwesomeIcon :icon="faInfoCircle" />
+      <template #tooltip>
+        {{ infoText }}
+      </template>
+    </BcTooltip>
+  </span>
+    <Checkbox 
+      v-model="input"
+      :input-id="id" 
+      v-bind="$attrs"
+      binary
+      class="bc-input-checkbox__input"
+    />
+  </BcInputError>
+</template> 
+
+<style lang="scss">
+.label{
+  cursor: pointer;
+}
+.bc-input-checkbox__info {
+  margin-left: var(--padding);
+}
+</style>
\ No newline at end of file
diff --git a/frontend/components/bc/input/BcInputError.vue b/frontend/components/bc/input/BcInputError.vue
new file mode 100644
index 000000000..874a69d3e
--- /dev/null
+++ b/frontend/components/bc/input/BcInputError.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+const idError = useId();
+  /**
+   * Spacing of error message will be removed by explicitly passing `false`.
+   * This should encourage to always think about the error message.
+   */
+export type BcInputError = false | string;
+defineProps<{
+  error?: BcInputError;
+}>();
+</script>
+
+<template>
+  <slot
+    :id-error
+    :aria-invalid="!!error"
+    :aria-describedby="idError"
+  />
+  <div v-if="error !== false" :id="idError" class="bc-input-error">
+    {{ error }}
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.bc-input-error {
+  color: var(--text-color--error);
+  grid-column: span 2;
+  margin-left: auto; // 1.
+  --line-height--default: 1.2;
+  min-height: calc(16px * var(--line-height--default));
+}
+</style>
\ No newline at end of file
diff --git a/frontend/components/bc/input/BcInputText.vue b/frontend/components/bc/input/BcInputText.vue
new file mode 100644
index 000000000..de7219aec
--- /dev/null
+++ b/frontend/components/bc/input/BcInputText.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import type { BcInputError } from '~/components/bc/input/BcInputError.vue';
+
+const idInput = useId();
+const input = defineModel<string>();
+
+defineProps<{
+  error?: BcInputError;
+  inputWidth?: `${number}px`;
+  label: string;
+  placeholder?: string;
+  type?: HTMLInputElement['type'];
+}>();
+</script>
+
+<template>
+  <BcInputError :error>
+    <label :for="idInput">{{ label }}</label>
+    <InputText
+    :id="idInput"
+    v-model.trim="input"
+    v-bind="$attrs"
+    class="bc-input-text__input"
+    :placeholder
+    :type
+    />
+  </BcInputError>
+</template>
+
+<style lang="scss">
+// 1. the text is aligned right, but if the message is extra long
+// it will start on the left side in the new line
+.bc-input-text__input {
+  width: v-bind(inputWidth);
+}
+</style>
diff --git a/frontend/components/notifications/management/NotificationsManagementDashboards.vue b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
index 00999cfa4..899c70043 100644
--- a/frontend/components/notifications/management/NotificationsManagementDashboards.vue
+++ b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
@@ -9,6 +9,7 @@ import { getGroupLabel } from '~/utils/dashboard/group'
 import { type NotificationsManagementDashboardRow } from '~/types/notifications/management'
 import type { DashboardType } from '~/types/dashboard'
 import { useNotificationsManagementDashboards } from '~/composables/notifications/useNotificationsManagementDashboards'
+import { NotificationsManagementModalWebhook } from '#components'
 
 const { t: $t } = useI18n()
 
@@ -39,13 +40,23 @@ const wrappedDashboardGroups = computed(() => {
   }
 })
 
-const onEdit = (col: 'delete' | 'subscriptions' | 'webhook' | 'networks', row: NotificationsManagementDashboardRow) => {
+type Dialog = 'delete' | 'subscriptions' | 'webhook' | 'networks'
+const activeDialog = ref<Dialog | ''>('')
+const dialog = useDialog()
+
+const onEdit = (col: Dialog, row: NotificationsManagementDashboardRow) => {
   switch (col) {
     case 'subscriptions':
       alert('TODO: edit subscriptions' + row.group_id)
       break
     case 'webhook':
-      alert('TODO: edit webhook' + row.group_id)
+      activeDialog.value = col
+      dialog.open(NotificationsManagementModalWebhook, {
+        data: {
+          webhookUrl: row.webhook.url,
+          hasDiscord: row.webhook.via_discord,
+        },
+      })
       break
     case 'networks':
       alert('TODO: edit networks' + row.group_id)
diff --git a/frontend/components/notifications/management/modal/NotificationsManagementModalWebhook.vue b/frontend/components/notifications/management/modal/NotificationsManagementModalWebhook.vue
new file mode 100644
index 000000000..aa1ea32e0
--- /dev/null
+++ b/frontend/components/notifications/management/modal/NotificationsManagementModalWebhook.vue
@@ -0,0 +1,154 @@
+<script lang="ts" setup>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import {
+  faPaperPlane
+} from '@fortawesome/pro-solid-svg-icons'
+import { useForm } from 'vee-validate';
+import { object, string, boolean } from "yup";
+import { API_PATH } from '~/types/customFetch';
+
+const { props, close } = useBcDialog<{ webhookUrl: string, hasWebhookDiscord: boolean }>()
+
+const { t: $t } = useI18n()
+
+const { defineField, errors, handleSubmit , setFieldError, meta, values} = useForm({
+  validationSchema: object({
+    webhookUrl: string().url($t('validation.url.invalid')),
+    hasWebhookDiscord: boolean(),
+  }),
+})
+const isFormDirty = computed(() => meta.value.dirty);
+
+
+const [webhookUrl, webhookUrlAttrs] = defineField('webhookUrl', {
+  validateOnModelUpdate: false,
+})
+
+const [hasWebhookDiscord, hasWebhookDiscordAttrs] = defineField('hasWebhookDiscord', {
+  validateOnModelUpdate: false,
+})
+
+watch(props, () => {
+  webhookUrl.value = props.value?.webhookUrl || ''
+  hasWebhookDiscord.value = props.value?.hasWebhookDiscord || false
+})
+
+const hasAnyWebhook = computed(() => Boolean(webhookUrl.value || hasWebhookDiscord.value ))
+
+const toast = useBcToast()
+const { fetch } = useCustomFetch()
+const handleTestNotification = async () => {
+  if(!hasAnyWebhook.value) {
+    // could not be implemented as a custom validation rule, 
+    // as they are always triggerd onMounted (at cast time)
+    setFieldError('hasWebhookDiscord', $t('validation.webhook.empty'))
+    return
+  }
+
+  try {
+    if(webhookUrl.value){ 
+      await fetch(API_PATH.NOTIFICATIONS_TEST_WEBHOOK, {
+        method: 'POST',
+        body: {
+          url: webhookUrl.value,
+        }
+      })
+    }
+    toast.showSuccess({summary:$t('notifications.dashboards.toast.success.test_webhook_url')})
+    if(hasWebhookDiscord.value) {
+      await fetch(API_PATH.NOTIFICATIONS_TEST_WEBHOOK, {
+        method: 'POST',
+        body: {
+          url: '',
+        }
+      })
+    }
+    toast.showSuccess({summary:$t('notifications.dashboards.toast.success.test_discord')})
+  } catch (error) {
+    // console.error(error)
+    toast.showError({summary:$t('notifications.dashboards.toast.error')})
+
+  }
+  const result = {...values}
+  console.log('Test notification sent', result)
+}
+const onSubmit = handleSubmit(values => {
+  if(!webhookUrl.value || !isFormDirty.value) {
+    close()
+    return
+  }
+ // TODO implement save logic and close dialog after successful save
+  console.log('save and close dialog', values)
+  close()
+})
+</script>
+<template>
+    <h4 class="notifications-management-dialog-webhook__header">
+      {{ $t('notifications.dashboards.dialog.heading_webhook') }}
+    </h4>
+    <BcForm 
+    novalidate
+    class="notifications-management-dialog-webhook__form"
+    @keydown.esc.stop.prevent="close"
+    @submit.prevent="onSubmit"
+    >
+      <BcFormRow>
+        <BcInputText 
+          v-model="webhookUrl"
+          v-bind="webhookUrlAttrs"
+          :label="$t('notifications.dashboards.dialog.label_webhook_url')"
+          :placeholder="$t('notifications.dashboards.dialog.placeholder_webhook')"
+          input-width="200px"
+          :error="errors.webhookUrl"
+          type="url"
+          autofocus
+        />
+      </BcFormRow>
+      <BcFormRow>
+        <BcInputCheckbox
+          v-model="hasWebhookDiscord"
+          v-bind="hasWebhookDiscordAttrs"
+          :label="$t('notifications.dashboards.dialog.label_send_via_discord')"
+          :info-text="$t('notifications.dashboards.dialog.info_send_via_discord')"
+          :error="errors.hasWebhookDiscord"
+        />
+      </BcFormRow>
+    </BcForm>
+    <div class="notifications-management-dialog-webhook-footer">
+      <BcButton
+        font-awesome-icon="faPaperPlane"
+        variant="secondary"
+        :is-aria-disabled="!hasAnyWebhook"
+        @click="handleTestNotification()"
+      >
+        {{ $t('notifications.dashboards.dialog.button_webhook_test') }}
+        <template #icon>
+          <FontAwesomeIcon :icon="faPaperPlane" />      
+        </template>
+      </BcButton>
+      <BcButton @click="onSubmit">
+        {{ $t('navigation.done') }}
+      </BcButton>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.notifications-management-dialog-webhook__header {
+  // margin-top: var(--padding-large);
+  margin: unset;
+  text-align: center;
+  font-family: var(--header1_font_family);
+  font-size: var(--header1_font_size);
+  font-weight: var(--header1_font_weight);
+}
+.notifications-management-dialog-webhook__form {
+  margin-top: var(--padding-large);
+}
+.notifications-management-dialog-webhook-footer {
+  display: flex;
+  gap: var(--padding-small);
+  justify-content: flex-end;
+  margin-top: var(--padding-small);
+}
+</style>
+
diff --git a/frontend/composables/useBcDialog.ts b/frontend/composables/useBcDialog.ts
index b280f83db..61b603f39 100644
--- a/frontend/composables/useBcDialog.ts
+++ b/frontend/composables/useBcDialog.ts
@@ -63,5 +63,9 @@ export function useBcDialog <T> (dialogProps?: DialogProps) {
       dialogRef.value.close()
     }
   }
-  return { props, dialogRef, setHeader }
+
+  const close = () => {
+    dialogRef?.value?.close()
+  }
+  return { close, props, dialogRef, setHeader}
 }
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index 805c4c59a..e8a2d172f 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -342,8 +342,22 @@
           "accounts": "Accounts ({count} Subscription) |Accounts ({count} Subscriptions)",
           "accounts_shortened": "Accounts ({count} Sub) |Accounts ({count} Subs)"
         }
-      }
-        
+      },
+      "dialog": {
+        "button_webhook_test": "Send Test Notification",
+        "heading_webhook": "Edit Webhook",
+        "info_send_via_discord": "Enable this to receive notifications via Discord. Ensure you have a Discord webhook set up.",
+        "label_webhook_url": "Webhook URL",
+        "label_send_via_discord": "Send via Discord",
+        "placeholder_webhook": "https://webhook.example.com/id"
+      },
+      "toast": {
+        "success": {
+          "test_webhook_url": "Webhook send successfully",
+          "test_discord": "Discord webhook send successfully"
+        },
+        "error": "Webhook could not be sent successfully"
+      } 
     }
   },
   "dashboard": {
@@ -919,6 +933,12 @@
       "no_match": "The passwords don't match.",
       "not_new": "The new password must differ from the old one."
     },
-    "tos_not_agreed": "Please accept the ToS & Privacy Policy."
+    "tos_not_agreed": "Please accept the ToS & Privacy Policy.",
+    "url": {
+      "invalid": "Please enter a valid URL."
+    },
+    "webhook": {
+      "empty": "Please choose at least one webhook to test."
+    }
   }
 }
diff --git a/frontend/types/customFetch.ts b/frontend/types/customFetch.ts
index c16fc88af..4737f6a9e 100644
--- a/frontend/types/customFetch.ts
+++ b/frontend/types/customFetch.ts
@@ -45,7 +45,8 @@ export enum API_PATH {
   AVAILABLE_NETWORKS = '/availableNetworks',
   PRODUCT_SUMMARY = '/productSummary',
   STRIPE_CUSTOMER_PORTAL = '/stripe/customer-portal',
-  STRIPE_CHECKOUT_SESSION = '/stripe/checkout-session'
+  STRIPE_CHECKOUT_SESSION = '/stripe/checkout-session',
+  NOTIFICATIONS_TEST_WEBHOOK = '/users/me/notifications/test-webhook'
 }
 
 export type PathValues = Record<string, string | number>