diff --git a/karavan-app/src/main/webui/src/designer/selector/DslSelector.css b/karavan-app/src/main/webui/src/designer/selector/DslSelector.css
index 16811027ead..43917c09748 100644
--- a/karavan-app/src/main/webui/src/designer/selector/DslSelector.css
+++ b/karavan-app/src/main/webui/src/designer/selector/DslSelector.css
@@ -133,29 +133,27 @@
     font-weight: 200;
 }
 
-.dsl-modal .label-eip {
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--orange-200);
-}
-
-.dsl-modal .label-component {
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--blue-300);
-}
-
-.dsl-modal .label-kamelet {
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--green-300);
-}
-
-.dsl-modal .label-component-preview {
-    --pf-v5-c-badge--Color: var(--pf-v5-global--palette--blue-300);
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
-}
-
-.dsl-modal .label-kamelet-preview {
-    --pf-v5-c-badge--Color: var(--pf-v5-global--palette--green-300);
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
+.dsl-modal .navigation-selector,
+.dsl-modal .dsl-card .pf-v5-c-card__header-main {
+    .label-eip {
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--orange-200);
+    }
+    .label-component {
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--blue-300);
+    }
+    .label-kamelet {
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--green-300);
+    }
+    .label-component-preview {
+        --pf-v5-c-badge--Color: var(--pf-v5-global--palette--blue-300);
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
+    }
+    .label-kamelet-preview {
+        --pf-v5-c-badge--Color: var(--pf-v5-global--palette--green-300);
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
+    }
 }
 
-
 .dsl-modal .labels {
     opacity: 0.5;
     font-weight: 200;
diff --git a/karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx b/karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx
index a27d6f7e668..85837e12e2b 100644
--- a/karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx
+++ b/karavan-app/src/main/webui/src/designer/selector/DslSelector.tsx
@@ -144,7 +144,7 @@ export function DslSelector(props: Props) {
         const isComp = selectedToggles.includes('components')
         const isKam = selectedToggles.includes('kamelets')
         return (
-            <ToggleGroup aria-label="Default with single selectable">
+            <ToggleGroup aria-label="Default with single selectable" className='navigation-selector'>
                 {parentDsl !== undefined && <ToggleGroupItem
                     text={
                         <div style={{display: 'flex', flexDirection: 'row'}}>
diff --git a/karavan-designer/src/designer/selector/DslSelector.css b/karavan-designer/src/designer/selector/DslSelector.css
index 16811027ead..43917c09748 100644
--- a/karavan-designer/src/designer/selector/DslSelector.css
+++ b/karavan-designer/src/designer/selector/DslSelector.css
@@ -133,29 +133,27 @@
     font-weight: 200;
 }
 
-.dsl-modal .label-eip {
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--orange-200);
-}
-
-.dsl-modal .label-component {
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--blue-300);
-}
-
-.dsl-modal .label-kamelet {
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--green-300);
-}
-
-.dsl-modal .label-component-preview {
-    --pf-v5-c-badge--Color: var(--pf-v5-global--palette--blue-300);
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
-}
-
-.dsl-modal .label-kamelet-preview {
-    --pf-v5-c-badge--Color: var(--pf-v5-global--palette--green-300);
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
+.dsl-modal .navigation-selector,
+.dsl-modal .dsl-card .pf-v5-c-card__header-main {
+    .label-eip {
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--orange-200);
+    }
+    .label-component {
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--blue-300);
+    }
+    .label-kamelet {
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--green-300);
+    }
+    .label-component-preview {
+        --pf-v5-c-badge--Color: var(--pf-v5-global--palette--blue-300);
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
+    }
+    .label-kamelet-preview {
+        --pf-v5-c-badge--Color: var(--pf-v5-global--palette--green-300);
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
+    }
 }
 
-
 .dsl-modal .labels {
     opacity: 0.5;
     font-weight: 200;
diff --git a/karavan-designer/src/designer/selector/DslSelector.tsx b/karavan-designer/src/designer/selector/DslSelector.tsx
index a27d6f7e668..85837e12e2b 100644
--- a/karavan-designer/src/designer/selector/DslSelector.tsx
+++ b/karavan-designer/src/designer/selector/DslSelector.tsx
@@ -144,7 +144,7 @@ export function DslSelector(props: Props) {
         const isComp = selectedToggles.includes('components')
         const isKam = selectedToggles.includes('kamelets')
         return (
-            <ToggleGroup aria-label="Default with single selectable">
+            <ToggleGroup aria-label="Default with single selectable" className='navigation-selector'>
                 {parentDsl !== undefined && <ToggleGroupItem
                     text={
                         <div style={{display: 'flex', flexDirection: 'row'}}>
diff --git a/karavan-space/src/designer/selector/DslSelector.css b/karavan-space/src/designer/selector/DslSelector.css
index 16811027ead..43917c09748 100644
--- a/karavan-space/src/designer/selector/DslSelector.css
+++ b/karavan-space/src/designer/selector/DslSelector.css
@@ -133,29 +133,27 @@
     font-weight: 200;
 }
 
-.dsl-modal .label-eip {
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--orange-200);
-}
-
-.dsl-modal .label-component {
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--blue-300);
-}
-
-.dsl-modal .label-kamelet {
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--green-300);
-}
-
-.dsl-modal .label-component-preview {
-    --pf-v5-c-badge--Color: var(--pf-v5-global--palette--blue-300);
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
-}
-
-.dsl-modal .label-kamelet-preview {
-    --pf-v5-c-badge--Color: var(--pf-v5-global--palette--green-300);
-    --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
+.dsl-modal .navigation-selector,
+.dsl-modal .dsl-card .pf-v5-c-card__header-main {
+    .label-eip {
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--orange-200);
+    }
+    .label-component {
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--blue-300);
+    }
+    .label-kamelet {
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--palette--green-300);
+    }
+    .label-component-preview {
+        --pf-v5-c-badge--Color: var(--pf-v5-global--palette--blue-300);
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
+    }
+    .label-kamelet-preview {
+        --pf-v5-c-badge--Color: var(--pf-v5-global--palette--green-300);
+        --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
+    }
 }
 
-
 .dsl-modal .labels {
     opacity: 0.5;
     font-weight: 200;
diff --git a/karavan-space/src/designer/selector/DslSelector.tsx b/karavan-space/src/designer/selector/DslSelector.tsx
index a27d6f7e668..85837e12e2b 100644
--- a/karavan-space/src/designer/selector/DslSelector.tsx
+++ b/karavan-space/src/designer/selector/DslSelector.tsx
@@ -144,7 +144,7 @@ export function DslSelector(props: Props) {
         const isComp = selectedToggles.includes('components')
         const isKam = selectedToggles.includes('kamelets')
         return (
-            <ToggleGroup aria-label="Default with single selectable">
+            <ToggleGroup aria-label="Default with single selectable" className='navigation-selector'>
                 {parentDsl !== undefined && <ToggleGroupItem
                     text={
                         <div style={{display: 'flex', flexDirection: 'row'}}>