diff --git a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx b/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx
index 5ff5c6750..cc5b462da 100644
--- a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx
+++ b/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx
@@ -199,7 +199,7 @@ export function IngressClassDatatable({
               </p>
               <ul className="ml-6">
                 {usedControllersToDisallow.map((controller) => (
-                  <li key={controller.ClassName}>${controller.ClassName}</li>
+                  <li key={controller.ClassName}>{controller.ClassName}</li>
                 ))}
               </ul>
               <p>
diff --git a/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx b/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx
index 6250b0f1d..79b3f545e 100644
--- a/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx
+++ b/app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx
@@ -66,10 +66,8 @@ export function CreateIngressView() {
     environmentId,
     namespaces ? Object.keys(namespaces || {}) : []
   );
-  const ingressControllersQuery = useIngressControllers(
-    environmentId,
-    namespace
-  );
+  const { data: ingressControllers, ...ingressControllersQuery } =
+    useIngressControllers(environmentId, namespace);
 
   const createIngressMutation = useCreateIngress();
   const updateIngressMutation = useUpdateIngress();
@@ -171,39 +169,84 @@ export function CreateIngressView() {
 
   const existingIngressClass = useMemo(
     () =>
-      ingressControllersQuery.data?.find(
-        (i) =>
-          i.ClassName === ingressRule.IngressClassName ||
-          (i.Type === 'custom' && ingressRule.IngressClassName === '')
+      ingressControllers?.find(
+        (controller) =>
+          controller.ClassName === ingressRule.IngressClassName ||
+          (controller.Type === 'custom' && ingressRule.IngressClassName === '')
       ),
-    [ingressControllersQuery.data, ingressRule.IngressClassName]
+    [ingressControllers, ingressRule.IngressClassName]
   );
 
-  const ingressClassOptions: Option<string>[] = useMemo(
-    () =>
-      ingressControllersQuery.data
-        ?.filter((cls) => cls.Availability)
+  const ingressClassOptions: Option<string>[] = useMemo(() => {
+    const allowedIngressClassOptions =
+      ingressControllers
+        ?.filter((controller) => !!controller.Availability)
         .map((cls) => ({
           label: cls.ClassName,
           value: cls.ClassName,
-        })) || [],
-    [ingressControllersQuery.data]
+        })) || [];
+
+    // if the ingress class is not set, return only the allowed ingress classes
+    if (ingressRule.IngressClassName === '' || !isEdit) {
+      return allowedIngressClassOptions;
+    }
+
+    // if the ingress class is set and it exists (even if disallowed), return the allowed ingress classes + the disallowed option
+    const disallowedIngressClasses =
+      ingressControllers
+        ?.filter(
+          (controller) =>
+            !controller.Availability &&
+            existingIngressClass?.ClassName === controller.ClassName
+        )
+        .map((controller) => ({
+          label: `${controller.ClassName} - DISALLOWED`,
+          value: controller.ClassName,
+        })) || [];
+
+    const existingIngressClassFound = ingressControllers?.find(
+      (controller) => existingIngressClass?.ClassName === controller.ClassName
+    );
+    if (existingIngressClassFound) {
+      return [...allowedIngressClassOptions, ...disallowedIngressClasses];
+    }
+
+    // if the ingress class is set and it doesn't exist, return the allowed ingress classes + the not found option
+    const notFoundIngressClassOption = {
+      label: `${ingressRule.IngressClassName} - NOT FOUND`,
+      value: ingressRule.IngressClassName || '',
+    };
+    return [...allowedIngressClassOptions, notFoundIngressClassOption];
+  }, [
+    existingIngressClass?.ClassName,
+    ingressControllers,
+    ingressRule.IngressClassName,
+    isEdit,
+  ]);
+
+  const handleIngressChange = useCallback(
+    (key: string, val: string) => {
+      setIngressRule((prevRules) => {
+        const rule = { ...prevRules, [key]: val };
+        if (key === 'IngressClassName') {
+          rule.IngressType = ingressControllers?.find(
+            (c) => c.ClassName === val
+          )?.Type;
+        }
+        return rule;
+      });
+    },
+    [ingressControllers]
   );
 
-  if (
-    (!existingIngressClass ||
-      (existingIngressClass && !existingIngressClass.Availability)) &&
-    ingressRule.IngressClassName &&
-    !ingressControllersQuery.isLoading
-  ) {
-    const optionLabel = !ingressRule.IngressType
-      ? `${ingressRule.IngressClassName} - NOT FOUND`
-      : `${ingressRule.IngressClassName} - DISALLOWED`;
-    ingressClassOptions.push({
-      label: optionLabel,
-      value: ingressRule.IngressClassName,
-    });
-  }
+  // when the ingress class options update the value to an available one
+  useEffect(() => {
+    const ingressClasses = ingressClassOptions.map((option) => option.value);
+    if (!ingressClasses.includes(ingressRule.IngressClassName)) {
+      // setting to the first available option (or undefined when there are no options)
+      handleIngressChange('IngressClassName', ingressClasses[0]);
+    }
+  }, [handleIngressChange, ingressClassOptions, ingressRule.IngressClassName]);
 
   const matchedConfigs = configResults?.data?.filter(
     (config) =>
@@ -234,7 +277,7 @@ export function CreateIngressView() {
         (ing) => ing.Name === params.name && ing.Namespace === params.namespace
       );
       if (ing) {
-        const type = ingressControllersQuery.data?.find(
+        const type = ingressControllers?.find(
           (c) =>
             c.ClassName === ing.ClassName ||
             (c.Type === 'custom' && !ing.ClassName)
@@ -248,7 +291,7 @@ export function CreateIngressView() {
   }, [
     params.name,
     ingressesResults.data,
-    ingressControllersQuery.data,
+    ingressControllers,
     ingressRule.IngressName,
     params.namespace,
   ]);
@@ -559,18 +602,6 @@ export function CreateIngressView() {
     }
   }
 
-  function handleIngressChange(key: string, val: string) {
-    setIngressRule((prevRules) => {
-      const rule = { ...prevRules, [key]: val };
-      if (key === 'IngressClassName') {
-        rule.IngressType = ingressControllersQuery.data?.find(
-          (c) => c.ClassName === val
-        )?.Type;
-      }
-      return rule;
-    });
-  }
-
   function handleTLSChange(hostIndex: number, tls: string) {
     setIngressRule((prevRules) => {
       const rule = { ...prevRules };
diff --git a/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx b/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx
index 383c1ba25..6759f4f8b 100644
--- a/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx
+++ b/app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx
@@ -119,17 +119,6 @@ export function IngressForm({
     }
   }, [namespacesOptions, namespace, handleNamespaceChange]);
 
-  // when the ingress class options update update the value to an available one
-  useEffect(() => {
-    const ingressClasses = ingressClassOptions.map((option) => option.value);
-    if (
-      !ingressClasses.includes(rule.IngressClassName) &&
-      ingressClasses.length > 0
-    ) {
-      handleIngressChange('IngressClassName', ingressClasses[0]);
-    }
-  }, [ingressClassOptions, rule.IngressClassName, handleIngressChange]);
-
   return (
     <Widget>
       <WidgetTitle icon={Route} title="Ingress" />
@@ -157,12 +146,22 @@ export function IngressForm({
                   ) : (
                     <Select
                       name="namespaces"
-                      options={namespacesOptions || []}
-                      value={{ value: namespace, label: namespace }}
+                      options={namespacesOptions}
+                      value={
+                        namespace
+                          ? { value: namespace, label: namespace }
+                          : null
+                      }
                       isDisabled={isEdit}
                       onChange={(val) =>
                         handleNamespaceChange(val?.value || '')
                       }
+                      placeholder={
+                        namespacesOptions.length
+                          ? 'Select a namespace'
+                          : 'No namespaces available'
+                      }
+                      noOptionsMessage={() => 'No namespaces available'}
                     />
                   )}
                 </div>
@@ -222,18 +221,27 @@ export function IngressForm({
                     <>
                       <Select
                         name="ingress_class"
-                        placeholder="Ingress name"
+                        placeholder={
+                          ingressClassOptions.length
+                            ? 'Select an ingress class'
+                            : 'No ingress classes available'
+                        }
                         options={ingressClassOptions}
-                        value={{
-                          label: rule.IngressClassName,
-                          value: rule.IngressClassName,
-                        }}
+                        value={
+                          rule.IngressClassName
+                            ? {
+                                label: rule.IngressClassName,
+                                value: rule.IngressClassName,
+                              }
+                            : null
+                        }
                         onChange={(ingressClassOption) =>
                           handleIngressChange(
                             'IngressClassName',
                             ingressClassOption?.value || ''
                           )
                         }
+                        noOptionsMessage={() => 'No ingress classes available'}
                       />
                       {errors.className && (
                         <FormError className="error-inline mt-1">
@@ -242,11 +250,6 @@ export function IngressForm({
                       )}
                     </>
                   )}
-                  {errors.className && (
-                    <FormError className="error-inline mt-1">
-                      {errors.className}
-                    </FormError>
-                  )}
                 </div>
               </div>
             </div>
@@ -401,13 +404,23 @@ export function IngressForm({
                         <Select
                           key={tlsOptions.toString() + host.Secret}
                           name={`ingress_tls_${hostIndex}`}
-                          value={{
-                            value: rule.Hosts[hostIndex].Secret,
-                            label: rule.Hosts[hostIndex].Secret || 'No TLS',
-                          }}
+                          value={
+                            host.Secret !== undefined
+                              ? {
+                                  value: host.Secret,
+                                  label: host.Secret || 'No TLS',
+                                }
+                              : null
+                          }
                           onChange={(TLSOption) =>
                             handleTLSChange(hostIndex, TLSOption?.value || '')
                           }
+                          placeholder={
+                            tlsOptions.length
+                              ? 'Select a TLS secret'
+                              : 'No TLS secrets available'
+                          }
+                          noOptionsMessage={() => 'No TLS secrets available'}
                           size="sm"
                         />
                         {!host.NoHost && (
@@ -472,10 +485,14 @@ export function IngressForm({
                           key={serviceOptions.toString() + path.ServiceName}
                           name={`ingress_service_${hostIndex}_${pathIndex}`}
                           options={serviceOptions}
-                          value={{
-                            value: path.ServiceName,
-                            label: path.ServiceName || 'Select a service',
-                          }}
+                          value={
+                            path.ServiceName
+                              ? {
+                                  value: path.ServiceName,
+                                  label: path.ServiceName,
+                                }
+                              : null
+                          }
                           onChange={(serviceOption) =>
                             handlePathChange(
                               hostIndex,
@@ -484,6 +501,12 @@ export function IngressForm({
                               serviceOption?.value || ''
                             )
                           }
+                          placeholder={
+                            serviceOptions.length
+                              ? 'Select a service'
+                              : 'No services available'
+                          }
+                          noOptionsMessage={() => 'No services available'}
                           size="sm"
                         />
                       </InputGroup>
@@ -526,15 +549,20 @@ export function IngressForm({
                                   option?.value || ''
                                 )
                               }
-                              value={{
-                                label: (
-                                  path.ServicePort || 'Select a port'
-                                ).toString(),
-                                value:
-                                  rule.Hosts[hostIndex].Paths[
-                                    pathIndex
-                                  ].ServicePort.toString(),
-                              }}
+                              value={
+                                path.ServicePort
+                                  ? {
+                                      label: path.ServicePort.toString(),
+                                      value: path.ServicePort.toString(),
+                                    }
+                                  : null
+                              }
+                              placeholder={
+                                servicePorts[path.ServiceName]?.length
+                                  ? 'Select a port'
+                                  : 'No ports available'
+                              }
+                              noOptionsMessage={() => 'No ports available'}
                               size="sm"
                             />
                           </InputGroup>
@@ -573,10 +601,20 @@ export function IngressForm({
                               option?.value || ''
                             )
                           }
-                          value={{
-                            label: path.PathType || 'Select a path type',
-                            value: path.PathType || '',
-                          }}
+                          value={
+                            path.PathType
+                              ? {
+                                  label: path.PathType,
+                                  value: path.PathType,
+                                }
+                              : null
+                          }
+                          placeholder={
+                            pathTypes?.length
+                              ? 'Select a path type'
+                              : 'No path types available'
+                          }
+                          noOptionsMessage={() => 'No path types available'}
                           size="sm"
                         />
                       </InputGroup>