diff --git a/frontend/webapp/app/(overview)/overview/page.tsx b/frontend/webapp/app/(overview)/overview/page.tsx
index 678d41714..c24075f34 100644
--- a/frontend/webapp/app/(overview)/overview/page.tsx
+++ b/frontend/webapp/app/(overview)/overview/page.tsx
@@ -2,13 +2,17 @@
 import React from 'react';
 import dynamic from 'next/dynamic';
 
-const OverviewDataFlowContainer = dynamic(() => import('@/containers/main/overview/overview-data-flow'), {
-  ssr: false,
-});
+const ToastList = dynamic(() => import('@/components/notification/toast-list'), { ssr: false });
+const AllDrawers = dynamic(() => import('@/components/overview/all-drawers'), { ssr: false });
+const AllModals = dynamic(() => import('@/components/overview/all-modals'), { ssr: false });
+const OverviewDataFlowContainer = dynamic(() => import('@/containers/main/overview/overview-data-flow'), { ssr: false });
 
 export default function MainPage() {
   return (
     <>
+      <ToastList />
+      <AllDrawers />
+      <AllModals />
       <OverviewDataFlowContainer />
     </>
   );
diff --git a/frontend/webapp/components/notification/index.ts b/frontend/webapp/components/notification/index.ts
new file mode 100644
index 000000000..f3993ea5b
--- /dev/null
+++ b/frontend/webapp/components/notification/index.ts
@@ -0,0 +1,4 @@
+export * from './notification-manager';
+import ToastList from './toast-list';
+
+export { ToastList };
diff --git a/frontend/webapp/components/notification/index.tsx b/frontend/webapp/components/notification/index.tsx
deleted file mode 100644
index fe2628507..000000000
--- a/frontend/webapp/components/notification/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './notification-manager';
-export * from './toast-list';
diff --git a/frontend/webapp/components/notification/toast-list.tsx b/frontend/webapp/components/notification/toast-list.tsx
index ee3bedf99..e7b5f0540 100644
--- a/frontend/webapp/components/notification/toast-list.tsx
+++ b/frontend/webapp/components/notification/toast-list.tsx
@@ -17,7 +17,7 @@ const Container = styled.div`
   min-width: 600px;
 `;
 
-export const ToastList: React.FC = () => {
+const ToastList: React.FC = () => {
   const { notifications } = useNotificationStore();
 
   return (
@@ -59,3 +59,5 @@ const Toast: React.FC<Notification> = (props) => {
     />
   );
 };
+
+export default ToastList;
diff --git a/frontend/webapp/containers/main/overview/all-drawers/index.tsx b/frontend/webapp/components/overview/all-drawers/index.tsx
similarity index 75%
rename from frontend/webapp/containers/main/overview/all-drawers/index.tsx
rename to frontend/webapp/components/overview/all-drawers/index.tsx
index 65b2bba52..65cbb3b59 100644
--- a/frontend/webapp/containers/main/overview/all-drawers/index.tsx
+++ b/frontend/webapp/components/overview/all-drawers/index.tsx
@@ -1,10 +1,7 @@
 import React from 'react';
 import { useDrawerStore } from '@/store';
-import { SourceDrawer } from '../../sources';
-import { ActionDrawer } from '../../actions';
 import { OVERVIEW_ENTITY_TYPES } from '@/types';
-import { DestinationDrawer } from '../../destinations';
-import { RuleDrawer } from '../../instrumentation-rules';
+import { ActionDrawer, DestinationDrawer, RuleDrawer, SourceDrawer } from '@/containers';
 
 const AllDrawers = () => {
   const selected = useDrawerStore(({ selectedItem }) => selectedItem);
diff --git a/frontend/webapp/containers/main/overview/all-modals/index.tsx b/frontend/webapp/components/overview/all-modals/index.tsx
similarity index 78%
rename from frontend/webapp/containers/main/overview/all-modals/index.tsx
rename to frontend/webapp/components/overview/all-modals/index.tsx
index 96039338a..50793a9c9 100644
--- a/frontend/webapp/containers/main/overview/all-modals/index.tsx
+++ b/frontend/webapp/components/overview/all-modals/index.tsx
@@ -1,10 +1,7 @@
 import React from 'react';
 import { useModalStore } from '@/store';
-import { ActionModal } from '../../actions';
 import { OVERVIEW_ENTITY_TYPES } from '@/types';
-import { DestinationModal } from '../../destinations';
-import { RuleModal } from '../../instrumentation-rules';
-import { AddSourceModal } from '../../sources/choose-sources/choose-source-modal';
+import { ActionModal, AddSourceModal, DestinationModal, RuleModal } from '@/containers';
 
 const AllModals = () => {
   const selected = useModalStore(({ currentModal }) => currentModal);
diff --git a/frontend/webapp/components/overview/index.ts b/frontend/webapp/components/overview/index.ts
new file mode 100644
index 000000000..ac94bf260
--- /dev/null
+++ b/frontend/webapp/components/overview/index.ts
@@ -0,0 +1,6 @@
+export * from './add-entity';
+import AllDrawers from './all-drawers';
+import AllModals from './all-modals';
+export * from './monitors-legend';
+
+export { AllDrawers, AllModals };
diff --git a/frontend/webapp/components/overview/index.tsx b/frontend/webapp/components/overview/index.tsx
deleted file mode 100644
index a84120e29..000000000
--- a/frontend/webapp/components/overview/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './add-entity';
-export * from './monitors-legend';
diff --git a/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/build-drawer-item.ts b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/build-drawer-item.ts
index c70296100..090dfa123 100644
--- a/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/build-drawer-item.ts
+++ b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/build-drawer-item.ts
@@ -1,5 +1,5 @@
 import { deriveTypeFromRule } from '@/utils';
-import { PayloadCollectionType, type InstrumentationRuleInput, type InstrumentationRuleSpec } from '@/types';
+import { type InstrumentationRuleSpec, type InstrumentationRuleInput, PayloadCollectionType } from '@/types';
 
 const buildDrawerItem = (id: string, formData: InstrumentationRuleInput, drawerItem: InstrumentationRuleSpec): InstrumentationRuleSpec => {
   const { ruleName, notes, disabled, payloadCollection } = formData;
diff --git a/frontend/webapp/containers/main/overview/overview-actions-menu/search/search-results/index.tsx b/frontend/webapp/containers/main/overview/overview-actions-menu/search/search-results/index.tsx
index cf085875c..254c81b2c 100644
--- a/frontend/webapp/containers/main/overview/overview-actions-menu/search/search-results/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-actions-menu/search/search-results/index.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment, useMemo, useState } from 'react';
 import theme from '@/styles/theme';
 import styled from 'styled-components';
-import { OVERVIEW_ENTITY_TYPES } from '@/types';
+import { OVERVIEW_ENTITY_TYPES, WorkloadId } from '@/types';
 import { AbsoluteContainer } from '../../styled';
 import { getEntityIcon, getEntityLabel } from '@/utils';
 import { buildSearchResults, type Category } from './builder';
@@ -35,7 +35,7 @@ export const SearchResults = ({ searchText, onClose }: Props) => {
   const { actions } = useActionCRUD();
   const { destinations } = useDestinationCRUD();
   const { instrumentationRules } = useInstrumentationRuleCRUD();
-  const { handleNodeClick } = useNodeDataFlowHandlers({ rules: instrumentationRules, sources, actions, destinations });
+  const { handleNodeClick } = useNodeDataFlowHandlers();
 
   const { categories, searchResults } = useMemo(
     () =>
@@ -72,6 +72,7 @@ export const SearchResults = ({ searchText, onClose }: Props) => {
                 label={getEntityLabel(item, category as OVERVIEW_ENTITY_TYPES, { extended: true })}
                 onClick={() => {
                   const id = item.id || item.ruleId || { kind: item.kind, name: item.name, namespace: item.namespace };
+                  // @ts-ignore
                   handleNodeClick(null, { data: { type: category, id } });
                   onClose();
                 }}
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
index 65045381c..69f151a2d 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -1,17 +1,12 @@
 'use client';
 import React, { useMemo } from 'react';
-import dynamic from 'next/dynamic';
 import styled from 'styled-components';
-import { ToastList } from '@/components';
 import MultiSourceControl from '../multi-source-control';
 import { OverviewActionMenuContainer } from '../overview-actions-menu';
 import { buildNodesAndEdges, NodeBaseDataFlow } from '@/reuseable-components';
 import { useComputePlatform, useContainerSize, useMetrics, useNodeDataFlowHandlers } from '@/hooks';
 
-const AllDrawers = dynamic(() => import('../all-drawers'), { ssr: false });
-const AllModals = dynamic(() => import('../all-modals'), { ssr: false });
-
-export const OverviewDataFlowWrapper = styled.div`
+const OverviewDataFlowWrapper = styled.div`
   width: 100%;
   height: calc(100vh - 176px);
   position: relative;
@@ -44,10 +39,6 @@ export default function OverviewDataFlowContainer() {
       <OverviewActionMenuContainer />
       <MultiSourceControl />
       <NodeBaseDataFlow nodes={nodes} edges={edges} nodeWidth={NODE_WIDTH} onNodeClick={handleNodeClick} />
-
-      <AllDrawers />
-      <AllModals />
-      <ToastList />
     </OverviewDataFlowWrapper>
   );
 }
diff --git a/frontend/webapp/containers/main/sources/index.ts b/frontend/webapp/containers/main/sources/index.ts
index 2c28ac1b1..58030f24d 100644
--- a/frontend/webapp/containers/main/sources/index.ts
+++ b/frontend/webapp/containers/main/sources/index.ts
@@ -1,4 +1,5 @@
 export * from './choose-sources';
-export * from './source-drawer-container';
+export * from './choose-sources/choose-source-modal';
 export * from './choose-sources/choose-sources-body';
+export * from './source-drawer-container';
 export * from './update-source-body';
diff --git a/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts b/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
index 3dfbae20f..e29c5dff9 100644
--- a/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
+++ b/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
@@ -1,12 +1,12 @@
 // src/hooks/useNodeDataFlowHandlers.ts
 import { useCallback } from 'react';
+import { type Node } from '@xyflow/react';
 import { useSourceCRUD } from '../sources';
 import { useActionCRUD } from '../actions';
 import { useDestinationCRUD } from '../destinations';
 import { useDrawerStore, useModalStore } from '@/store';
-import { OVERVIEW_ENTITY_TYPES, OVERVIEW_NODE_TYPES, WorkloadId } from '@/types';
 import { useInstrumentationRuleCRUD } from '../instrumentation-rules';
-import { Node } from '@xyflow/react';
+import { OVERVIEW_ENTITY_TYPES, OVERVIEW_NODE_TYPES, WorkloadId } from '@/types';
 
 export function useNodeDataFlowHandlers() {
   const { sources } = useSourceCRUD();
@@ -19,13 +19,13 @@ export function useNodeDataFlowHandlers() {
 
   const handleNodeClick = useCallback(
     (
-      _: React.MouseEvent,
+      _: React.MouseEvent | null,
       object: Node<
         {
           id: string | WorkloadId;
           type: OVERVIEW_ENTITY_TYPES | OVERVIEW_NODE_TYPES;
         },
-        'add'
+        'id'
       >,
     ) => {
       const {
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
index 112d2e680..ec08ab24a 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -123,7 +123,7 @@ export const buildNodesAndEdges = ({ computePlatform, computePlatformFiltered, m
         type: OVERVIEW_NODE_TYPES.ADD_RULE,
         status: STATUSES.HEALTHY,
         title: 'ADD RULE',
-        subTitle: 'Add first rule to modify the OpenTelemetry data',
+        subTitle: `Add ${!!nonFilteredLengths['rules'] ? 'a new' : 'first'} rule to modify the OpenTelemetry data`,
       }),
     );
   } else {
@@ -150,7 +150,7 @@ export const buildNodesAndEdges = ({ computePlatform, computePlatformFiltered, m
         type: OVERVIEW_NODE_TYPES.ADD_SOURCE,
         status: STATUSES.HEALTHY,
         title: 'ADD SOURCE',
-        subTitle: 'Add first source to collect OpenTelemetry data',
+        subTitle: `Add ${!!nonFilteredLengths['sources'] ? 'a new' : 'first'} source to collect OpenTelemetry data`,
       }),
     );
   } else {
@@ -183,7 +183,7 @@ export const buildNodesAndEdges = ({ computePlatform, computePlatformFiltered, m
         type: OVERVIEW_NODE_TYPES.ADD_ACTION,
         status: STATUSES.HEALTHY,
         title: 'ADD ACTION',
-        subTitle: 'Add first action to modify the OpenTelemetry data',
+        subTitle: `Add ${!!nonFilteredLengths['actions'] ? 'a new' : 'first'} action to modify the OpenTelemetry data`,
       }),
     );
   } else {
@@ -234,7 +234,7 @@ export const buildNodesAndEdges = ({ computePlatform, computePlatformFiltered, m
         type: OVERVIEW_NODE_TYPES.ADD_DESTIONATION,
         status: STATUSES.HEALTHY,
         title: 'ADD DESTIONATION',
-        subTitle: 'Add first destination to monitor OpenTelemetry data',
+        subTitle: `Add ${!!nonFilteredLengths['destinations'] ? 'a new' : 'first'} destination to monitor OpenTelemetry data`,
       }),
     );
   } else {
diff --git a/frontend/webapp/types/compute-platform.ts b/frontend/webapp/types/compute-platform.ts
index 16fea4d76..c13600453 100644
--- a/frontend/webapp/types/compute-platform.ts
+++ b/frontend/webapp/types/compute-platform.ts
@@ -1,7 +1,7 @@
 import type { K8sActualSource } from './sources';
 import type { ActualDestination } from './destinations';
 import type { ActionData, ActionDataParsed } from './actions';
-import type { InstrumentationRuleSpec, InstrumentationRuleSpecMapped } from './instrumentation-rules';
+import type { InstrumentationRuleSpec } from './instrumentation-rules';
 
 export type K8sActualNamespace = {
   name: string;
@@ -26,7 +26,7 @@ export type ComputePlatform = {
 
 interface ComputePlatformDataMapped extends ComputePlatformData {
   actions: ActionDataParsed[];
-  instrumentationRules: InstrumentationRuleSpecMapped[];
+  instrumentationRules: InstrumentationRuleSpec[];
 }
 
 export type ComputePlatformMapped = {
diff --git a/frontend/webapp/types/instrumentation-rules.ts b/frontend/webapp/types/instrumentation-rules.ts
index 2a6a16665..f8919ce2c 100644
--- a/frontend/webapp/types/instrumentation-rules.ts
+++ b/frontend/webapp/types/instrumentation-rules.ts
@@ -73,6 +73,7 @@ export enum RulesSortType {
 export interface InstrumentationRuleSpec {
   ruleId: string;
   ruleName: string;
+  type?: InstrumentationRuleType; // does not come from backend, it's derived during GET
   notes: string;
   disabled: boolean;
   workloads?: PodWorkload[];