diff --git a/frontend/webapp/components/overview/actions/actions.table/actions.table.row.tsx b/frontend/webapp/components/overview/actions/actions.table/actions.table.row.tsx
index 8d89c227b..383712998 100644
--- a/frontend/webapp/components/overview/actions/actions.table/actions.table.row.tsx
+++ b/frontend/webapp/components/overview/actions/actions.table/actions.table.row.tsx
@@ -6,7 +6,7 @@ import styled, { css } from 'styled-components';
 import { KeyvalCheckbox, KeyvalText } from '@/design.system';
 import ActionRowDynamicContent from './action.row.dynamic.content';
 import { TapList } from '@/components/setup/destination/tap.list/tap.list';
-import { MONITORING_OPTIONS } from '@/components/setup/destination/utils';
+import { MONITORING_OPTIONS } from '@/utils/constants/monitors';
 import { ActionIcon } from '../action.icon';
 
 const StyledTr = styled.tr`
diff --git a/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx b/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx
index fb221b83d..90bcb5abd 100644
--- a/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx
+++ b/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { KeyvalImage, KeyvalText } from '@/design.system';
 import theme from '@/styles/palette';
 import { LinkIcon } from '@keyval-dev/design-system';
+import { DOCS_LINK } from '@/utils';
 
 const ManageDestinationHeaderWrapper = styled.div`
   display: flex;
@@ -10,11 +11,7 @@ const ManageDestinationHeaderWrapper = styled.div`
   align-items: center;
   border-radius: 25px;
   margin: 24px 0;
-  background: radial-gradient(
-      78.09% 72.18% at 100% -0%,
-      rgba(150, 242, 255, 0.4) 0%,
-      rgba(150, 242, 255, 0) 61.91%
-    ),
+  background: radial-gradient(78.09% 72.18% at 100% -0%, rgba(150, 242, 255, 0.4) 0%, rgba(150, 242, 255, 0) 61.91%),
     linear-gradient(180deg, #2e4c55 0%, #303355 100%);
 `;
 
@@ -27,9 +24,7 @@ const IMAGE_STYLE: React.CSSProperties = {
   marginLeft: 16,
 };
 
-export function ManageDestinationHeader({
-  data: { image_url, display_name, type },
-}) {
+export function ManageDestinationHeader({ data: { image_url, display_name, type } }) {
   return (
     <ManageDestinationHeaderWrapper>
       <KeyvalImage src={image_url} style={IMAGE_STYLE} />
@@ -37,15 +32,9 @@ export function ManageDestinationHeader({
         <KeyvalText size={24} weight={700}>
           {display_name}
         </KeyvalText>
-        <div
-          style={{ cursor: 'pointer' }}
-          onClick={() =>
-            window.open(`https://docs.odigos.io/backends/${type}`, '_blank')
-          }
-        >
+        <div style={{ cursor: 'pointer' }} onClick={() => window.open(`${DOCS_LINK}/backends/${type}`, '_blank')}>
           <KeyvalText style={{ display: 'flex', gap: 3 }}>
-            find out more about {display_name} in{' '}
-            <a style={{ color: theme.colors.torquiz_light }}>our docs</a>
+            find out more about {display_name} in <a style={{ color: theme.colors.torquiz_light }}>our docs</a>
             <LinkIcon style={{ marginTop: 2 }} />
           </KeyvalText>
         </div>
diff --git a/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx b/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx
index 3112f6964..7963c7861 100644
--- a/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx
+++ b/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx
@@ -3,7 +3,7 @@ import theme from '@/styles/palette';
 import { Destination } from '@/types';
 import styled, { css } from 'styled-components';
 import { KeyvalImage, KeyvalText } from '@/design.system';
-import { MONITORING_OPTIONS } from '@/components/setup/destination/utils';
+import { MONITORING_OPTIONS } from '@/utils/constants/monitors';
 import { TapList } from '@/components/setup/destination/tap.list/tap.list';
 import { ConditionCheck } from '@/components/common';
 
diff --git a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx b/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
index 163416787..a8586dac7 100644
--- a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
+++ b/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { KeyvalCard, KeyvalImage, KeyvalText } from '@/design.system';
 import { TapList } from '../tap.list/tap.list';
-import { MONITORING_OPTIONS } from '../utils';
+import { MONITORING_OPTIONS } from '../../../../utils/constants/monitors';
 import {
   ApplicationNameWrapper,
   DestinationCardContentWrapper,
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
new file mode 100644
index 000000000..c3c94f01b
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
@@ -0,0 +1,68 @@
+import styled from 'styled-components';
+import { InputList, KeyValueInputsList, Text } from '@/reuseable-components';
+import { ActionsType } from '@/types';
+
+interface ActionCustomFieldsProps {
+  actionType?: ActionsType;
+  value: any;
+  setValue: (value: any) => void;
+}
+
+const FieldWrapper = styled.div`
+  width: 100%;
+  margin: 8px 0;
+`;
+
+const FieldTitle = styled(Text)`
+  margin-bottom: 12px;
+`;
+
+const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, value, setValue }) => {
+  switch (actionType) {
+    case ActionsType.ADD_CLUSTER_INFO:
+      return (
+        <FieldWrapper>
+          <FieldTitle>Attributes to add</FieldTitle>
+          <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
+        </FieldWrapper>
+      );
+
+    case ActionsType.DELETE_ATTRIBUTES:
+      return (
+        <FieldWrapper>
+          <FieldTitle>Attributes to delete</FieldTitle>
+          <InputList required value={value} onChange={(arr) => setValue(arr)} />
+        </FieldWrapper>
+      );
+
+    case ActionsType.RENAME_ATTRIBUTES:
+      return (
+        <FieldWrapper>
+          <FieldTitle>Attributes to rename</FieldTitle>
+          <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
+        </FieldWrapper>
+      );
+
+    case ActionsType.PII_MASKING:
+      return (
+        <FieldWrapper>
+          <FieldTitle>Attributes to mask</FieldTitle>
+          <InputList required value={value} onChange={(arr) => setValue(arr)} />
+        </FieldWrapper>
+      );
+
+    case ActionsType.ERROR_SAMPLER:
+      return null;
+
+    case ActionsType.PROBABILISTIC_SAMPLER:
+      return null;
+
+    case ActionsType.LATENCY_SAMPLER:
+      return null;
+
+    default:
+      return null;
+  }
+};
+
+export default ActionCustomFields;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
new file mode 100644
index 000000000..682a4bfb4
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import styled from 'styled-components';
+import ActionCustomFields from './action-custom-fields';
+import { ActionFormData } from '@/hooks/actions/useActionFormData';
+import { type ActionOption } from '../choose-action-modal/action-options';
+import { DocsButton, Input, Text, TextArea } from '@/reuseable-components';
+import { MonitoringCheckboxes } from '@/reuseable-components/monitoring-checkboxes';
+
+const Description = styled(Text)`
+  color: ${({ theme }) => theme.text.grey};
+  line-height: 150%;
+  display: flex;
+`;
+
+const FieldWrapper = styled.div`
+  width: 100%;
+  margin: 8px 0;
+`;
+
+const FieldTitle = styled(Text)`
+  margin-bottom: 12px;
+`;
+
+interface ChooseActionContentProps {
+  action: ActionOption;
+  formData: ActionFormData;
+  handleFormChange: (key: keyof ActionFormData, val: any) => void;
+}
+
+const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action, formData, handleFormChange }) => {
+  return (
+    <>
+      <Description>
+        {action.docsDescription}
+        <DocsButton endpoint={action.docsEndpoint} />
+      </Description>
+
+      <FieldWrapper>
+        <MonitoringCheckboxes
+          allowedSignals={action.allowedSignals}
+          selectedSignals={formData.signals}
+          setSelectedSignals={(value) => handleFormChange('signals', value)}
+        />
+      </FieldWrapper>
+
+      <FieldWrapper>
+        <FieldTitle>Action name</FieldTitle>
+        <Input
+          placeholder='Use a name that describes the action'
+          value={formData.name}
+          onChange={({ target: { value } }) => handleFormChange('name', value)}
+        />
+      </FieldWrapper>
+
+      <ActionCustomFields
+        actionType={action.type}
+        value={formData.details ? JSON.parse(formData.details) : undefined}
+        setValue={(val) => handleFormChange('details', JSON.stringify(val))}
+      />
+
+      <FieldWrapper>
+        <FieldTitle>Notes</FieldTitle>
+        <TextArea value={formData.notes} onChange={({ target: { value } }) => handleFormChange('notes', value)} />
+      </FieldWrapper>
+    </>
+  );
+};
+
+export { ChooseActionBody };
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
index b0e342e3c..8b9f31f7b 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
@@ -1,12 +1,29 @@
 import { ActionsType } from '@/types';
+import { SignalLowercase } from '@/utils';
 
-export const ACTION_OPTIONS = [
+export type ActionOption = {
+  id: string;
+  type?: ActionsType;
+  label: string;
+  description?: string;
+  docsEndpoint?: string;
+  docsDescription?: string;
+  icon?: string;
+  items?: ActionOption[];
+  allowedSignals?: SignalLowercase[];
+};
+
+export const ACTION_OPTIONS: ActionOption[] = [
   {
     id: 'add_cluster_info',
     label: 'Add Cluster Info',
     description: 'Add static cluster-scoped attributes to your data.',
     type: ActionsType.ADD_CLUSTER_INFO,
     icon: '/icons/actions/addclusterinfo.svg',
+    docsEndpoint: '/pipeline/actions/attributes/addclusterinfo',
+    docsDescription:
+      'The “Add Cluster Info” Odigos Action can be used to add resource attributes to telemetry signals originated from the k8s cluster where the Odigos is running.',
+    allowedSignals: ['traces', 'metrics', 'logs'],
   },
   {
     id: 'delete_attribute',
@@ -14,6 +31,9 @@ export const ACTION_OPTIONS = [
     description: 'Delete attributes from logs, metrics, and traces.',
     type: ActionsType.DELETE_ATTRIBUTES,
     icon: '/icons/actions/deleteattribute.svg',
+    docsEndpoint: '/pipeline/actions/attributes/deleteattribute',
+    docsDescription: 'The “Delete Attribute” Odigos Action can be used to delete attributes from logs, metrics, and traces.',
+    allowedSignals: ['traces', 'metrics', 'logs'],
   },
   {
     id: 'rename_attribute',
@@ -21,6 +41,10 @@ export const ACTION_OPTIONS = [
     description: 'Rename attributes in logs, metrics, and traces.',
     type: ActionsType.RENAME_ATTRIBUTES,
     icon: '/icons/actions/renameattribute.svg',
+    docsEndpoint: '/pipeline/actions/attributes/rename-attribute',
+    docsDescription:
+      'The “Rename Attribute” Odigos Action can be used to rename attributes from logs, metrics, and traces. Different instrumentations might use different attribute names for similar information. This action let’s you to consolidate the names across your cluster.',
+    allowedSignals: ['traces', 'metrics', 'logs'],
   },
   {
     id: 'pii-masking',
@@ -28,12 +52,13 @@ export const ACTION_OPTIONS = [
     description: 'Mask PII data in your traces.',
     type: ActionsType.PII_MASKING,
     icon: '/icons/actions/piimasking.svg',
+    docsEndpoint: '/pipeline/actions/attributes/piimasking',
+    docsDescription: 'The “PII Masking” Odigos Action can be used to mask PII data from span attribute values.',
+    allowedSignals: ['traces'],
   },
   {
     id: 'sampler',
     label: 'Samplers',
-    description: '',
-    type: ActionsType.PROBABILISTIC_SAMPLER,
     icon: '/icons/actions/sampler.svg',
     items: [
       {
@@ -41,18 +66,29 @@ export const ACTION_OPTIONS = [
         label: 'Error Sampler',
         description: 'Sample errors based on percentage.',
         type: ActionsType.ERROR_SAMPLER,
+        docsEndpoint: '/pipeline/actions/sampling/errorsampler',
+        docsDescription: 'The “Error Sampler” Odigos Action is a Global Action that supports error sampling by filtering out non-error traces.',
+        allowedSignals: ['traces'],
       },
       {
         id: 'probabilistic-sampler',
         label: 'Probabilistic Sampler',
         description: 'Sample traces based on percentage.',
         type: ActionsType.PROBABILISTIC_SAMPLER,
+        docsEndpoint: '/pipeline/actions/sampling/probabilisticsampler',
+        docsDescription:
+          'The “Probabilistic Sampler” Odigos Action supports probabilistic sampling based on a configured sampling percentage applied to the TraceID.',
+        allowedSignals: ['traces'],
       },
       {
         id: 'latency-action',
         label: 'Latency Action',
         description: 'Add latency to your traces.',
         type: ActionsType.LATENCY_SAMPLER,
+        docsEndpoint: '/pipeline/actions/sampling/latencysampler',
+        docsDescription:
+          'The “Latency Sampler” Odigos Action is an Endpoint Action that samples traces based on their duration for a specific service and endpoint (HTTP route) filter.',
+        allowedSignals: ['traces'],
       },
     ],
   },
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
index 977d632b2..65cca01e8 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
@@ -1,21 +1,19 @@
-import React, { useRef, useCallback } from 'react';
-import {
-  AutocompleteInput,
-  Modal,
-  NavigationButtons,
-  Text,
-} from '@/reuseable-components';
 import styled from 'styled-components';
-import { ACTION_OPTIONS } from './action-options';
+import React, { useRef, useState } from 'react';
+import { useActionFormData } from '@/hooks/actions';
+import { ChooseActionBody } from '../choose-action-body';
+import { ACTION_OPTIONS, type ActionOption } from './action-options';
+import { AutocompleteInput, Modal, NavigationButtons, Text, Divider, Option } from '@/reuseable-components';
 
 const DefineActionContainer = styled.section`
   height: 640px;
   padding: 0px 220px;
   display: flex;
   flex-direction: column;
+  overflow-y: scroll;
 `;
 
-const HeaderWrapper = styled.div`
+const WidthConstraint = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -39,53 +37,59 @@ interface ModalActionComponentProps {
   onNext: () => void;
 }
 
-const ModalActionComponent: React.FC<ModalActionComponentProps> = React.memo(
-  ({ onNext }) => {
-    const buttons = [
-      {
-        label: 'DONE',
-        onClick: onNext,
-        variant: 'primary' as const,
-      },
-    ];
+const ModalActionComponent: React.FC<ModalActionComponentProps> = React.memo(({ onNext }) => {
+  const buttons = [
+    {
+      label: 'DONE',
+      onClick: onNext,
+      variant: 'primary' as const,
+    },
+  ];
 
-    return <NavigationButtons buttons={buttons} />;
-  }
-);
+  return <NavigationButtons buttons={buttons} />;
+});
 
-export const AddActionModal: React.FC<AddActionModalProps> = ({
-  isModalOpen,
-  handleCloseModal,
-}) => {
+export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, handleCloseModal }) => {
   const submitRef = useRef<(() => void) | null>(null);
+  const [selectedItem, setSelectedItem] = useState<ActionOption | null>(null);
+  const { formData, handleFormChange, resetFormData } = useActionFormData();
 
-  const handleNext = useCallback(() => {
+  const handleNext = () => {
     if (submitRef.current) {
       handleCloseModal();
     }
-  }, [handleCloseModal]);
+  };
 
-  const handleClose = useCallback(() => {
+  const handleClose = () => {
     handleCloseModal();
-  }, [handleCloseModal]);
+    setSelectedItem(null);
+  };
+
+  const handleSelect = (item: Option) => {
+    resetFormData();
+    setSelectedItem(item);
+  };
 
   return (
-    <Modal
-      isOpen={isModalOpen}
-      actionComponent={<ModalActionComponent onNext={handleNext} />}
-      header={{ title: 'Add Action' }}
-      onClose={handleClose}
-    >
+    <Modal isOpen={isModalOpen} actionComponent={<ModalActionComponent onNext={handleNext} />} header={{ title: 'Add Action' }} onClose={handleClose}>
       <DefineActionContainer>
-        <HeaderWrapper>
+        <WidthConstraint>
           <Text size={20}>{'Define Action'}</Text>
           <SubTitle>
             {
               'Actions are a way to modify the OpenTelemetry data recorded by Odigos sources before it is exported to your Odigos destinations. Choose an action type and provide necessary information.'
             }
           </SubTitle>
-        </HeaderWrapper>
-        <AutocompleteInput options={ACTION_OPTIONS} />
+        </WidthConstraint>
+
+        <AutocompleteInput options={ACTION_OPTIONS} onOptionSelect={handleSelect} />
+
+        {!!selectedItem?.type ? (
+          <WidthConstraint>
+            <Divider margin='16px 0' />
+            <ChooseActionBody action={selectedItem} formData={formData} handleFormChange={handleFormChange} />
+          </WidthConstraint>
+        ) : null}
       </DefineActionContainer>
     </Modal>
   );
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx
index 71bd10c1b..4948674a1 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx
@@ -14,27 +14,23 @@ export const FormContainer = ({
   <StyledFormContainer>
     <CheckboxList
       monitors={monitors}
-      title="This connection will monitor:"
+      title='This connection will monitor:'
       exportedSignals={exportedSignals}
       handleSignalChange={handleSignalChange}
     />
     <Input
-      title="Destination name"
-      placeholder="Enter destination name"
+      title='Destination name'
+      placeholder='Enter destination name'
       value={destinationName}
       onChange={(e) => setDestinationName(e.target.value)}
     />
-    <DynamicConnectDestinationFormFields
-      fields={dynamicFields}
-      onChange={handleDynamicFieldChange}
-    />
+    <DynamicConnectDestinationFormFields fields={dynamicFields} onChange={handleDynamicFieldChange} />
   </StyledFormContainer>
 );
 
 const StyledFormContainer = styled.div`
   display: flex;
   width: 100%;
-  max-width: 500px;
   flex-direction: column;
   gap: 24px;
   height: 443px;
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 64d6bbda8..9186db8ba 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -26,7 +26,7 @@ const componentMap = {
   ),
 };
 
-const DRAWER_WIDTH = '560px';
+const DRAWER_WIDTH = '640px';
 
 const OverviewDrawer = () => {
   const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
diff --git a/frontend/webapp/containers/setup/destination/destination.section.tsx b/frontend/webapp/containers/setup/destination/destination.section.tsx
index 77ac2e3de..f996a43ae 100644
--- a/frontend/webapp/containers/setup/destination/destination.section.tsx
+++ b/frontend/webapp/containers/setup/destination/destination.section.tsx
@@ -5,7 +5,7 @@ import { KeyvalLoader } from '@/design.system';
 import { EmptyList } from '@/components/lists';
 import { OVERVIEW, QUERIES, SETUP } from '@/utils';
 import { getDestinationsTypes } from '@/services';
-import { MONITORING_OPTIONS } from '@/components/setup/destination/utils';
+import { MONITORING_OPTIONS } from '@/utils/constants/monitors';
 import { DestinationList, DestinationOptionMenu } from '@/components/setup';
 import {
   LoaderWrapper,
diff --git a/frontend/webapp/hooks/actions/index.ts b/frontend/webapp/hooks/actions/index.ts
index 7fd95ef9d..373528190 100644
--- a/frontend/webapp/hooks/actions/index.ts
+++ b/frontend/webapp/hooks/actions/index.ts
@@ -1,3 +1,4 @@
 export * from './useActionState';
 export * from './useActions';
 export * from './useGetActions';
+export * from './useActionFormData';
diff --git a/frontend/webapp/hooks/actions/useActionFormData.ts b/frontend/webapp/hooks/actions/useActionFormData.ts
new file mode 100644
index 000000000..ea0f083f0
--- /dev/null
+++ b/frontend/webapp/hooks/actions/useActionFormData.ts
@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import { SignalUppercase } from '@/utils';
+
+export type ActionFormData = {
+  type: string;
+  name: string;
+  notes: string;
+  disable: boolean;
+  signals: SignalUppercase[];
+  details: string;
+};
+
+const INITIAL: ActionFormData = {
+  type: '',
+  name: '',
+  notes: '',
+  disable: true,
+  signals: [],
+  details: '',
+};
+
+export function useActionFormData() {
+  const [formData, setFormData] = useState({ ...INITIAL });
+
+  const resetFormData = () => {
+    setFormData({ ...INITIAL });
+  };
+
+  const handleFormChange = (key: keyof typeof INITIAL, val: any) => {
+    setFormData((prev) => ({
+      ...prev,
+      [key]: val,
+    }));
+  };
+
+  return {
+    formData,
+    handleFormChange,
+    resetFormData,
+  };
+}
diff --git a/frontend/webapp/public/icons/common/notebook.svg b/frontend/webapp/public/icons/common/notebook.svg
new file mode 100644
index 000000000..8b334a30f
--- /dev/null
+++ b/frontend/webapp/public/icons/common/notebook.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00016 3.37696V14.3327M8.00016 3.37696C10.0168 2.64365 12.6703 2.23608 14.6668 3.37696V13.7103C12.5356 12.7969 9.9581 13.4427 8.00016 14.3327M8.00016 3.37696C5.98356 2.64365 3.33004 2.23608 1.3335 3.37696V13.7103C3.46472 12.7969 6.04222 13.4427 8.00016 14.3327" stroke="#F9F9F9" stroke-opacity="0.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
index 2b31ea584..b67065705 100644
--- a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
+++ b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
@@ -1,9 +1,9 @@
 import React, { useState, ChangeEvent, KeyboardEvent, FC } from 'react';
 import styled from 'styled-components';
-import { Text } from '../text';
 import Image from 'next/image';
+import { Text } from '../text';
 
-interface Option {
+export interface Option {
   id: string;
   label: string;
   description?: string;
@@ -17,13 +17,23 @@ interface AutocompleteInputProps {
   onOptionSelect?: (option: Option) => void;
 }
 
-const AutocompleteInput: FC<AutocompleteInputProps> = ({
-  options,
-  placeholder = 'Type to search...',
-  onOptionSelect,
-}) => {
+const filterOptions = (optionsList: Option[], input: string): Option[] => {
+  return optionsList.reduce<Option[]>((acc, option) => {
+    if (option.items) {
+      const filteredSubItems = filterOptions(option.items, input);
+      if (filteredSubItems.length) {
+        acc.push({ ...option, items: filteredSubItems });
+      }
+    } else if (option.label.toLowerCase().includes(input.toLowerCase())) {
+      acc.push(option);
+    }
+    return acc;
+  }, []);
+};
+
+const AutocompleteInput: FC<AutocompleteInputProps> = ({ options, placeholder = 'Type to search...', onOptionSelect }) => {
   const [query, setQuery] = useState('');
-  const [filteredOptions, setFilteredOptions] = useState<Option[]>([]);
+  const [filteredOptions, setFilteredOptions] = useState<Option[]>(filterOptions(options, ''));
   const [showOptions, setShowOptions] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
 
@@ -39,20 +49,6 @@ const AutocompleteInput: FC<AutocompleteInputProps> = ({
     }
   };
 
-  const filterOptions = (optionsList: Option[], input: string): Option[] => {
-    return optionsList.reduce<Option[]>((acc, option) => {
-      if (option.items) {
-        const filteredSubItems = filterOptions(option.items, input);
-        if (filteredSubItems.length) {
-          acc.push({ ...option, items: filteredSubItems });
-        }
-      } else if (option.label.toLowerCase().includes(input.toLowerCase())) {
-        acc.push(option);
-      }
-      return acc;
-    }, []);
-  };
-
   const handleOptionClick = (option: Option) => {
     setQuery(option.label);
     setShowOptions(false);
@@ -88,24 +84,19 @@ const AutocompleteInput: FC<AutocompleteInputProps> = ({
     <AutocompleteContainer>
       <InputWrapper>
         <StyledInput
-          type="text"
+          type='text'
           value={query}
           placeholder={placeholder}
           onChange={handleChange}
           onKeyDown={handleKeyDown}
           onBlur={() => setShowOptions(false)}
-          onFocus={() => query && setShowOptions(true)}
+          onFocus={() => setShowOptions(true)}
         />
       </InputWrapper>
       {showOptions && (
         <OptionsList>
           {filteredOptions.map((option, index) => (
-            <OptionItem
-              key={option.id}
-              option={option}
-              isActive={index === activeIndex}
-              onClick={handleOptionClick}
-            />
+            <OptionItem key={option.id} option={option} isActive={index === activeIndex} onClick={handleOptionClick} />
           ))}
         </OptionsList>
       )}
@@ -123,29 +114,21 @@ const OptionItem: FC<OptionItemProps> = ({ option, isActive, onClick }) => {
   const hasSubItems = !!option.items && option.items.length > 0;
 
   return (
-    <OptionItemContainer
-      isActive={isActive}
-      isList={hasSubItems}
-      onMouseDown={() => onClick(option)}
-    >
-      {option.icon && (
-        <Image width={16} height={16} src={option.icon} alt={option.label} />
-      )}
+    <OptionItemContainer isActive={isActive} isList={hasSubItems} onMouseDown={() => (hasSubItems ? null : onClick(option))}>
+      {option.icon && <Image width={16} height={16} src={option.icon} alt={option.label} />}
+
       <OptionContent>
         <OptionLabelWrapper>
           <OptionLabel>{option.label}</OptionLabel>
           <OptionDescription>{option.description}</OptionDescription>
         </OptionLabelWrapper>
-        {option.items && option.items.length > 0 && (
+
+        {hasSubItems && (
           <SubOptionsList>
-            {option.items.map((subOption) => (
+            {option.items?.map((subOption) => (
               <SubOptionContainer key={subOption.id}>
                 <VerticalLine />
-                <OptionItem
-                  option={subOption}
-                  isActive={false}
-                  onClick={onClick}
-                />
+                <OptionItem option={subOption} isActive={false} onClick={onClick} />
               </SubOptionContainer>
             ))}
           </SubOptionsList>
@@ -225,18 +208,17 @@ interface OptionItemContainerProps {
 }
 
 const OptionItemContainer = styled.li<OptionItemContainerProps>`
+  width: 100%;
   padding: 8px 12px;
   cursor: ${({ isList }) => (isList ? 'default' : 'pointer')};
   border-radius: 24px;
   gap: 8px;
   display: flex;
   align-items: ${({ isList }) => (isList ? 'flex-start' : 'center')};
-  background: ${({ isActive, theme }) =>
-    isActive ? theme.colors.activeBackground : 'transparent'};
+  background: ${({ isActive, theme }) => (isActive ? theme.colors.activeBackground : 'transparent')};
 
   &:hover {
-    background: ${({ theme, isList }) =>
-      !isList && theme.colors.white_opacity['008']};
+    background: ${({ theme, isList }) => !isList && theme.colors.white_opacity['008']};
   }
 `;
 
@@ -278,4 +260,5 @@ const SubOptionsList = styled.ul`
   padding-left: 0px;
   margin: 4px 0 0 0;
   list-style: none;
+  width: 100%;
 `;
diff --git a/frontend/webapp/reuseable-components/button/docs-button.tsx b/frontend/webapp/reuseable-components/button/docs-button.tsx
new file mode 100644
index 000000000..1de7c9242
--- /dev/null
+++ b/frontend/webapp/reuseable-components/button/docs-button.tsx
@@ -0,0 +1,22 @@
+import Image from 'next/image';
+import styled from 'styled-components';
+import { Button, ButtonProps } from '.';
+import { DOCS_LINK } from '@/utils';
+
+const StyledButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  gap: 6px;
+  min-width: 100px;
+`;
+
+export const DocsButton = ({ endpoint = '/', variant = 'secondary' }: { endpoint?: string; variant?: ButtonProps['variant'] }) => {
+  return (
+    <StyledButton variant={variant} onClick={() => window.open(`${DOCS_LINK}${endpoint}`, '_blank', 'noopener noreferrer')}>
+      <Image src='/icons/common/notebook.svg' alt='Docs' width={18} height={18} />
+      Docs
+    </StyledButton>
+  );
+};
diff --git a/frontend/webapp/reuseable-components/button/index.tsx b/frontend/webapp/reuseable-components/button/index.tsx
index e74273f42..03c1ea7fa 100644
--- a/frontend/webapp/reuseable-components/button/index.tsx
+++ b/frontend/webapp/reuseable-components/button/index.tsx
@@ -1,7 +1,7 @@
 import React, { ButtonHTMLAttributes } from 'react';
 import styled, { css } from 'styled-components';
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
   isDisabled?: boolean;
 }
@@ -102,20 +102,10 @@ const ButtonContainer = styled.div<{
   }
 `;
 
-export const Button: React.FC<ButtonProps> = ({
-  children,
-  variant = 'primary',
-  isDisabled = false,
-  ...props
-}) => {
+export const Button: React.FC<ButtonProps> = ({ children, variant = 'primary', isDisabled = false, ...props }) => {
   return (
     <ButtonContainer variant={variant}>
-      <StyledButton
-        variant={variant}
-        disabled={isDisabled}
-        isDisabled={isDisabled}
-        {...props}
-      >
+      <StyledButton variant={variant} disabled={isDisabled} isDisabled={isDisabled} {...props}>
         {children}
       </StyledButton>
     </ButtonContainer>
diff --git a/frontend/webapp/reuseable-components/checkbox-list/index.tsx b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
index 0528fce7f..4d211aaf2 100644
--- a/frontend/webapp/reuseable-components/checkbox-list/index.tsx
+++ b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
@@ -5,7 +5,7 @@ import { Checkbox } from '../checkbox';
 import { ExportedSignals } from '@/types';
 
 interface Monitor {
-  id: string;
+  id: string | number;
   title: string;
   tooltip?: string;
 }
@@ -14,7 +14,7 @@ interface CheckboxListProps {
   monitors: Monitor[];
   title?: string;
   exportedSignals: ExportedSignals;
-  handleSignalChange: (signal: string, value: boolean) => void;
+  handleSignalChange: (signal: Monitor['id'], value: boolean) => void;
 }
 
 const ListContainer = styled.div`
@@ -26,23 +26,12 @@ const TextWrapper = styled.div`
   margin-bottom: 14px;
 `;
 
-const CheckboxList: React.FC<CheckboxListProps> = ({
-  monitors,
-  title,
-  exportedSignals,
-  handleSignalChange,
-}) => {
+const CheckboxList: React.FC<CheckboxListProps> = ({ monitors, title, exportedSignals, handleSignalChange }) => {
   function isItemDisabled(item: Monitor) {
-    const selectedItems = Object.values(exportedSignals).filter(
-      (value) => value
-    );
-
+    const selectedItems = Object.values(exportedSignals).filter((value) => value);
     const trueValues = Object.values(exportedSignals).filter(Boolean);
 
-    return (
-      (monitors.length === 1 && trueValues.length === 1) ||
-      (selectedItems.length === 1 && exportedSignals[item.id])
-    );
+    return (monitors.length === 1 && trueValues.length === 1) || (selectedItems.length === 1 && exportedSignals[item.id]);
   }
 
   return (
@@ -54,6 +43,7 @@ const CheckboxList: React.FC<CheckboxListProps> = ({
           </Text>
         </TextWrapper>
       )}
+
       <ListContainer>
         {monitors.map((monitor) => (
           <Checkbox
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 110f5c759..4868acbc5 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -1,5 +1,6 @@
 export * from './text';
 export * from './button';
+export * from './button/docs-button';
 export * from './section-title';
 export * from './input';
 export * from './tooltip';
diff --git a/frontend/webapp/reuseable-components/input-list/index.tsx b/frontend/webapp/reuseable-components/input-list/index.tsx
index 67b935d7a..4fc9ff711 100644
--- a/frontend/webapp/reuseable-components/input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/input-list/index.tsx
@@ -66,16 +66,15 @@ const HeaderWrapper = styled.div`
   margin-bottom: 4px;
 `;
 
-const InputList: React.FC<InputListProps> = ({
-  initialValues = [''],
-  title,
-  tooltip,
-  required,
-  onChange,
-  value = [''],
-}) => {
+const INITIAL = [''];
+
+const InputList: React.FC<InputListProps> = ({ initialValues = INITIAL, value = INITIAL, onChange, title, tooltip, required }) => {
   const [inputs, setInputs] = useState<string[]>(value || initialValues);
 
+  useEffect(() => {
+    if (!inputs.length) setInputs(INITIAL);
+  }, []);
+
   useEffect(() => {
     if (initialValues.length > 0) {
       onChange(initialValues);
@@ -108,45 +107,27 @@ const InputList: React.FC<InputListProps> = ({
         <HeaderWrapper>
           <Title>{title}</Title>
           {!required && (
-            <Text color="#7A7A7A" size={14} weight={300} opacity={0.8}>
+            <Text color='#7A7A7A' size={14} weight={300} opacity={0.8}>
               (optional)
             </Text>
           )}
           {tooltip && (
             <Tooltip text={tooltip || ''}>
-              <Image
-                src="/icons/common/info.svg"
-                alt=""
-                width={16}
-                height={16}
-                style={{ marginBottom: 4 }}
-              />
+              <Image src='/icons/common/info.svg' alt='' width={16} height={16} style={{ marginBottom: 4 }} />
             </Tooltip>
           )}
         </HeaderWrapper>
       )}
       {inputs.map((value, index) => (
         <InputRow key={index}>
-          <Input
-            value={value}
-            onChange={(e) => handleInputChange(e.target.value, index)}
-          />
+          <Input value={value} onChange={(e) => handleInputChange(e.target.value, index)} />
           <DeleteButton onClick={() => handleDeleteInput(index)}>
-            <Image
-              src="/icons/common/trash.svg"
-              alt="Delete"
-              width={16}
-              height={16}
-            />
+            <Image src='/icons/common/trash.svg' alt='Delete' width={16} height={16} />
           </DeleteButton>
         </InputRow>
       ))}
-      <AddButton
-        disabled={isAddButtonDisabled}
-        variant={'tertiary'}
-        onClick={handleAddInput}
-      >
-        <Image src="/icons/common/plus.svg" alt="Add" width={16} height={16} />
+      <AddButton disabled={isAddButtonDisabled} variant={'tertiary'} onClick={handleAddInput}>
+        <Image src='/icons/common/plus.svg' alt='Add' width={16} height={16} />
         <ButtonText>ADD ATTRIBUTE</ButtonText>
       </AddButton>
     </Container>
diff --git a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
index cbd7904ea..ec79435e2 100644
--- a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
@@ -66,62 +66,59 @@ const Title = styled(Text)`
   line-height: 22px;
 `;
 
+const INITIAL = [{ key: '', value: '' }];
+
 export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
-  initialKeyValuePairs = [{ key: '', value: '' }],
-  value = [{ key: '', value: '' }],
+  initialKeyValuePairs = INITIAL,
+  value = INITIAL,
+  onChange,
   title,
   tooltip,
   required,
-  onChange,
 }) => {
-  const [keyValuePairs, setKeyValuePairs] = useState<
-    { key: string; value: string }[]
-  >(value || initialKeyValuePairs);
+  const [keyValuePairs, setKeyValuePairs] = useState<{ key: string; value: string }[]>(value || initialKeyValuePairs);
+
+  useEffect(() => {
+    if (!keyValuePairs.length) setKeyValuePairs(INITIAL);
+  }, []);
 
-  const validPairsRef = useRef<{ key: string; value: string }[]>([]);
+  const recordedPairs = useRef('');
 
   useEffect(() => {
     // Filter out rows where either key or value is empty
-    const validKeyValuePairs = keyValuePairs.filter(
-      (pair) => pair.key.trim() !== '' && pair.value.trim() !== ''
-    );
+    const validKeyValuePairs = keyValuePairs.filter((pair) => pair.key.trim() !== '' && pair.value.trim() !== '');
+    const stringified = JSON.stringify(validKeyValuePairs);
 
     // Only trigger onChange if valid key-value pairs have changed
-    if (
-      JSON.stringify(validPairsRef.current) !==
-      JSON.stringify(validKeyValuePairs)
-    ) {
-      validPairsRef.current = validKeyValuePairs;
-      if (onChange) {
-        onChange(validKeyValuePairs);
-      }
+    if (recordedPairs.current !== stringified) {
+      recordedPairs.current = stringified;
+
+      if (onChange) onChange(validKeyValuePairs);
     }
   }, [keyValuePairs, onChange]);
 
   const handleAddRow = () => {
-    setKeyValuePairs([...keyValuePairs, { key: '', value: '' }]);
-  };
-
-  const handleDeleteRow = (index: number) => {
-    setKeyValuePairs(keyValuePairs.filter((_, i) => i !== index));
+    setKeyValuePairs((prev) => {
+      const payload = [...prev];
+      payload.push({ key: '', value: '' });
+      return payload;
+    });
   };
 
-  const handleKeyChange = (key: string, index: number) => {
-    const newKeyValuePairs = [...keyValuePairs];
-    newKeyValuePairs[index].key = key;
-    setKeyValuePairs(newKeyValuePairs);
+  const handleDeleteRow = (idx: number) => {
+    setKeyValuePairs((prev) => prev.filter((_, i) => i !== idx));
   };
 
-  const handleValueChange = (value: string, index: number) => {
-    const newKeyValuePairs = [...keyValuePairs];
-    newKeyValuePairs[index].value = value;
-    setKeyValuePairs(newKeyValuePairs);
+  const handleChange = (key: 'key' | 'value', val: string, idx: number) => {
+    setKeyValuePairs((prev) => {
+      const payload = [...prev];
+      payload[idx][key] = val;
+      return payload;
+    });
   };
 
   // Check if any key or value field is empty
-  const isAddButtonDisabled = keyValuePairs.some(
-    (pair) => pair.key.trim() === '' || pair.value.trim() === ''
-  );
+  const isAddButtonDisabled = keyValuePairs.some((pair) => pair.key.trim() === '' || pair.value.trim() === '');
 
   return (
     <Container>
@@ -130,56 +127,26 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
           <HeaderWrapper>
             <Title>{title}</Title>
             {!required && (
-              <Text color="#7A7A7A" size={14} weight={300} opacity={0.8}>
+              <Text color='#7A7A7A' size={14} weight={300} opacity={0.8}>
                 (optional)
               </Text>
             )}
-            {tooltip && (
-              <Image
-                src="/icons/common/info.svg"
-                alt=""
-                width={16}
-                height={16}
-                style={{ marginBottom: 4 }}
-              />
-            )}
+            {tooltip && <Image src='/icons/common/info.svg' alt='' width={16} height={16} style={{ marginBottom: 4 }} />}
           </HeaderWrapper>
         </Tooltip>
       )}
       {keyValuePairs.map((pair, index) => (
         <Row key={index}>
-          <Input
-            value={pair.key}
-            onChange={(e) => handleKeyChange(e.target.value, index)}
-            placeholder="Define attribute"
-          />
-          <Image
-            src="/icons/common/arrow-right.svg"
-            alt="Arrow"
-            width={16}
-            height={16}
-          />
-          <Input
-            value={pair.value}
-            onChange={(e) => handleValueChange(e.target.value, index)}
-            placeholder="Define value"
-          />
+          <Input value={pair.key} onChange={(e) => handleChange('key', e.target.value, index)} placeholder='Define attribute' />
+          <Image src='/icons/common/arrow-right.svg' alt='Arrow' width={16} height={16} />
+          <Input value={pair.value} onChange={(e) => handleChange('value', e.target.value, index)} placeholder='Define value' />
           <DeleteButton onClick={() => handleDeleteRow(index)}>
-            <Image
-              src="/icons/common/trash.svg"
-              alt="Delete"
-              width={16}
-              height={16}
-            />
+            <Image src='/icons/common/trash.svg' alt='Delete' width={16} height={16} />
           </DeleteButton>
         </Row>
       ))}
-      <AddButton
-        disabled={isAddButtonDisabled}
-        variant={'tertiary'}
-        onClick={handleAddRow}
-      >
-        <Image src="/icons/common/plus.svg" alt="Add" width={16} height={16} />
+      <AddButton disabled={isAddButtonDisabled} variant={'tertiary'} onClick={handleAddRow}>
+        <Image src='/icons/common/plus.svg' alt='Add' width={16} height={16} />
         <ButtonText>ADD ATTRIBUTE</ButtonText>
       </AddButton>
     </Container>
diff --git a/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx b/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx
new file mode 100644
index 000000000..3b4515955
--- /dev/null
+++ b/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx
@@ -0,0 +1,87 @@
+import { Text } from '../text';
+import { Checkbox } from '../checkbox';
+import styled from 'styled-components';
+import React, { useEffect, useState } from 'react';
+import { MONITORING_OPTIONS, SignalLowercase, SignalUppercase } from '@/utils';
+
+interface MonitoringCheckboxesProps {
+  isVertical?: boolean;
+  allowedSignals?: (SignalUppercase | SignalLowercase)[];
+  selectedSignals: (SignalUppercase | SignalLowercase)[];
+  setSelectedSignals: (value: SignalUppercase[]) => void;
+}
+
+const ListContainer = styled.div<{ isVertical?: boolean }>`
+  display: flex;
+  flex-direction: ${({ isVertical }) => (isVertical ? 'column' : 'row')};
+  gap: ${({ isVertical }) => (isVertical ? '16px' : '32px')};
+`;
+
+const TextWrapper = styled.div`
+  margin-bottom: 14px;
+`;
+
+const monitors = MONITORING_OPTIONS;
+const initialStatuses: Record<SignalLowercase, boolean> = {
+  logs: false,
+  metrics: false,
+  traces: false,
+};
+
+const MonitoringCheckboxes: React.FC<MonitoringCheckboxesProps> = ({ isVertical, allowedSignals, selectedSignals, setSelectedSignals }) => {
+  const [signalStatuses, setSignalStatuses] = useState({ ...initialStatuses });
+
+  useEffect(() => {
+    const payload = { ...initialStatuses };
+
+    selectedSignals.forEach((str) => {
+      payload[str.toLowerCase()] = true;
+    });
+
+    if (JSON.stringify(payload) !== JSON.stringify(signalStatuses)) {
+      setSignalStatuses(payload);
+    }
+  }, [selectedSignals]);
+
+  const handleChange = (key: keyof typeof signalStatuses, value: boolean) => {
+    const selected: SignalUppercase[] = [];
+
+    setSignalStatuses((prev) => {
+      const payload = { ...prev, [key]: value };
+
+      Object.entries(payload).forEach(([sig, bool]) => {
+        if (bool) selected.push(sig.toUpperCase() as SignalUppercase);
+      });
+
+      return payload;
+    });
+
+    setSelectedSignals(selected);
+  };
+
+  const isDisabled = (item: (typeof MONITORING_OPTIONS)[0]) => {
+    return !!allowedSignals && !allowedSignals.find((str) => str.toLowerCase() === item.type);
+  };
+
+  return (
+    <div>
+      <TextWrapper>
+        <Text>Monitoring</Text>
+      </TextWrapper>
+
+      <ListContainer isVertical={isVertical}>
+        {monitors.map((monitor) => (
+          <Checkbox
+            key={monitor.id}
+            title={monitor.title}
+            initialValue={signalStatuses[monitor.type]}
+            onChange={(value) => handleChange(monitor.type, value)}
+            disabled={isDisabled(monitor)}
+          />
+        ))}
+      </ListContainer>
+    </div>
+  );
+};
+
+export { MonitoringCheckboxes };
diff --git a/frontend/webapp/reuseable-components/text/index.tsx b/frontend/webapp/reuseable-components/text/index.tsx
index 393e02dcc..e7435cf66 100644
--- a/frontend/webapp/reuseable-components/text/index.tsx
+++ b/frontend/webapp/reuseable-components/text/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-interface TextProps {
+interface TextProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   children: React.ReactNode;
   color?: string;
   size?: number;
diff --git a/frontend/webapp/utils/constants/monitors.ts b/frontend/webapp/utils/constants/monitors.ts
deleted file mode 100644
index 7bd5f3daf..000000000
--- a/frontend/webapp/utils/constants/monitors.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const MONITORS_OPTIONS = [
-  {
-    id: 'logs',
-    value: 'Logs',
-  },
-  {
-    id: 'metrics',
-    value: 'Metrics',
-  },
-  {
-    id: 'traces',
-    value: 'Traces',
-  },
-];
diff --git a/frontend/webapp/components/setup/destination/utils.tsx b/frontend/webapp/utils/constants/monitors.tsx
similarity index 58%
rename from frontend/webapp/components/setup/destination/utils.tsx
rename to frontend/webapp/utils/constants/monitors.tsx
index b4c0ba3c6..df3983ae6 100644
--- a/frontend/webapp/components/setup/destination/utils.tsx
+++ b/frontend/webapp/utils/constants/monitors.tsx
@@ -1,21 +1,18 @@
 import { SETUP } from '@/utils/constants';
-import {
-  LogsFocusIcon,
-  LogsIcon,
-  MetricsFocusIcon,
-  MetricsIcon,
-  TraceFocusIcon,
-  TraceIcon,
-} from '@keyval-dev/design-system';
+import { LogsFocusIcon, LogsIcon, MetricsFocusIcon, MetricsIcon, TraceFocusIcon, TraceIcon } from '@keyval-dev/design-system';
+
+export type SignalUppercase = 'TRACES' | 'METRICS' | 'LOGS';
+export type SignalLowercase = 'traces' | 'metrics' | 'logs';
 
 export type MonitoringOption = {
+  id: number;
   title: string;
-  tapped: boolean;
   icons: object;
-  id: number;
+  type: SignalLowercase;
+  tapped: boolean;
 };
 
-export const MONITORING_OPTIONS = [
+export const MONITORING_OPTIONS: MonitoringOption[] = [
   {
     id: 1,
     icons: {
@@ -47,3 +44,18 @@ export const MONITORING_OPTIONS = [
     tapped: true,
   },
 ];
+
+export const MONITORS_OPTIONS = [
+  {
+    id: 'logs',
+    value: 'Logs',
+  },
+  {
+    id: 'metrics',
+    value: 'Metrics',
+  },
+  {
+    id: 'traces',
+    value: 'Traces',
+  },
+];
diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
index b8702439d..921492eca 100644
--- a/frontend/webapp/utils/constants/urls.tsx
+++ b/frontend/webapp/utils/constants/urls.tsx
@@ -13,15 +13,12 @@ const API = {
   CHECK_CONNECTION: `${BASE_URL}/destinations/testConnection`,
   SOURCES: `${BASE_URL}/sources`,
   SET_ACTION: (type: string) => `${BASE_URL}/actions/types/${type}`,
-  PUT_ACTION: (type: string, id: string) =>
-    `${BASE_URL}/actions/types/${type}/${id}`,
+  PUT_ACTION: (type: string, id: string) => `${BASE_URL}/actions/types/${type}/${id}`,
   ACTIONS: `${BASE_URL}/actions`,
-  DELETE_ACTION: (type: string, id: string) =>
-    `${BASE_URL}/actions/types/${type}/${id}`,
+  DELETE_ACTION: (type: string, id: string) => `${BASE_URL}/actions/types/${type}/${id}`,
   OVERVIEW_METRICS: `${BASE_URL}/metrics/overview`,
   INSTRUMENTATION_RULES: `${BASE_URL}/instrumentation-rules`,
-  INSTRUMENTATION_RULE: (id: string) =>
-    `${BASE_URL}/instrumentation-rules/${id}`,
+  INSTRUMENTATION_RULE: (id: string) => `${BASE_URL}/instrumentation-rules/${id}`,
 };
 
 const QUERIES = {
@@ -35,13 +32,11 @@ const QUERIES = {
   API_ACTIONS: 'apiActions',
 };
 
-const SLACK_INVITE_LINK =
-  'https://odigos.slack.com/join/shared_invite/zt-1d7egaz29-Rwv2T8kyzc3mWP8qKobz~A#/shared-invite/email';
+const SLACK_INVITE_LINK = 'https://odigos.slack.com/join/shared_invite/zt-1d7egaz29-Rwv2T8kyzc3mWP8qKobz~A#/shared-invite/email';
 
-export const ACTION_DOCS_LINK =
-  'https://docs.odigos.io/pipeline/actions/introduction';
-export const ACTION_ITEM_DOCS_LINK = 'https://docs.odigos.io/pipeline/actions';
+export const DOCS_LINK = 'https://docs.odigos.io';
+export const ACTION_DOCS_LINK = `${DOCS_LINK}/pipeline/actions/introduction`;
+export const ACTION_ITEM_DOCS_LINK = `${DOCS_LINK}/pipeline/actions`;
+export const INSTRUMENTATION_RULES_DOCS_LINK = `${DOCS_LINK}/pipeline/rules/overview`;
 
 export { API, QUERIES, SLACK_INVITE_LINK, BASE_URL };
-export const INSTRUMENTATION_RULES_DOCS_LINK =
-  'https://docs.odigos.io/pipeline/rules/overview';