diff --git a/app/react/components/form-components/Input/Select.tsx b/app/react/components/form-components/Input/Select.tsx
index d6a6db344..bcf143127 100644
--- a/app/react/components/form-components/Input/Select.tsx
+++ b/app/react/components/form-components/Input/Select.tsx
@@ -4,6 +4,7 @@ import { SelectHTMLAttributes } from 'react';
 export interface Option<T extends string | number> {
   value: T;
   label: string;
+  disabled?: boolean;
 }
 
 interface Props<T extends string | number> {
@@ -22,7 +23,7 @@ export function Select<T extends number | string>({
       className={clsx('form-control', className)}
     >
       {options.map((item) => (
-        <option value={item.value} key={item.value}>
+        <option value={item.value} key={item.value} disabled={item.disabled}>
           {item.label}
         </option>
       ))}
diff --git a/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx b/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx
index 6b66c2d7e..cb18cecce 100644
--- a/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx
+++ b/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useMemo, ReactNode, useCallback } from 'react';
 import { useCurrentStateAndParams, useRouter } from '@uirouter/react';
 import { v4 as uuidv4 } from 'uuid';
-import { debounce } from 'lodash';
+import { debounce, groupBy, forOwn } from 'lodash';
 
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { useConfigurations } from '@/react/kubernetes/configs/queries';
@@ -133,18 +133,23 @@ export function CreateIngressView() {
     }
   });
 
-  const clusterIpServices = useMemo(
-    () => servicesResults.data?.filter((s) => s.Type === 'ClusterIP'),
-    [servicesResults.data]
-  );
-  const servicesOptions = useMemo(
-    () =>
-      clusterIpServices?.map((service) => ({
-        label: service.Name,
-        value: service.Name,
-      })),
-    [clusterIpServices]
-  );
+  const clusterIpServices = servicesResults.data;
+  const servicesOptions: Option<string>[] = useMemo(() => {
+    const options: Option<string>[] = [];
+    forOwn(
+      groupBy(clusterIpServices, (s) => s.Type),
+      (services, type) => {
+        options.push({ label: `--- ${type} ---`, value: type, disabled: true });
+        services.forEach((service) => {
+          options.push({
+            label: service.Name,
+            value: service.Name,
+          });
+        });
+      }
+    );
+    return options;
+  }, [clusterIpServices]);
 
   const serviceOptions = [
     { label: 'Select a service', value: '' },