diff --git a/web/src/components/input/NameAndIdFields.tsx b/web/src/components/input/NameAndIdFields.tsx
index cf9f8a076..8dde4f56d 100644
--- a/web/src/components/input/NameAndIdFields.tsx
+++ b/web/src/components/input/NameAndIdFields.tsx
@@ -10,23 +10,26 @@ import {
 import { Input } from "@/components/ui/input";
 import { useState, useEffect } from "react";
 import { useFormContext } from "react-hook-form";
+import { generateFixedHash, isValidId } from "@/utils/stringUtil";
 import { useTranslation } from "react-i18next";
 
 type NameAndIdFieldsProps = {
-  control: Control;
+  control: Control<any>;
+  type?: string;
   nameField: string;
   idField: string;
   nameLabel: string;
   nameDescription?: string;
   idLabel?: string;
   idDescription?: string;
-  processId: (name: string) => string;
+  processId?: (name: string) => string;
   placeholderName?: string;
   placeholderId?: string;
 };
 
 export default function NameAndIdFields({
   control,
+  type,
   nameField,
   idField,
   nameLabel,
@@ -41,16 +44,27 @@ export default function NameAndIdFields({
   const { watch, setValue, trigger } = useFormContext();
   const [isIdVisible, setIsIdVisible] = useState(false);
 
+  const defaultProcessId = (name: string) => {
+    const normalized = name.replace(/\s+/g, "_").toLowerCase();
+    if (isValidId(normalized)) {
+      return normalized;
+    } else {
+      return generateFixedHash(name, type);
+    }
+  };
+
+  const effectiveProcessId = processId || defaultProcessId;
+
   useEffect(() => {
     const subscription = watch((value, { name }) => {
       if (name === nameField) {
-        const processedId = processId(value[nameField] || "");
+        const processedId = effectiveProcessId(value[nameField] || "");
         setValue(idField, processedId);
         trigger(idField);
       }
     });
     return () => subscription.unsubscribe();
-  }, [watch, setValue, trigger, nameField, idField, processId]);
+  }, [watch, setValue, trigger, nameField, idField, effectiveProcessId]);
 
   return (
     <>
@@ -62,18 +76,22 @@ export default function NameAndIdFields({
             <div className="flex items-center justify-between">
               <FormLabel>{nameLabel}</FormLabel>
               <span
-                className="cursor-pointer text-right text-xs text-muted-foreground hover:underline"
+                className="cursor-pointer text-right text-xs text-muted-foreground"
                 onClick={() => setIsIdVisible(!isIdVisible)}
               >
-                (
                 {isIdVisible
-                  ? `${t("label.hide")} ${idLabel ?? t("label.ID")}`
-                  : `${t("label.show")} ${idLabel ?? t("label.ID")}`}
-                )
+                  ? t("label.hide", { item: idLabel ?? t("label.ID") })
+                  : t("label.show", {
+                      item: idLabel ?? t("label.ID"),
+                    })}
               </span>
             </div>
             <FormControl>
-              <Input placeholder={placeholderName} {...field} />
+              <Input
+                className="text-md"
+                placeholder={placeholderName}
+                {...field}
+              />
             </FormControl>
             {nameDescription && (
               <FormDescription>{nameDescription}</FormDescription>
@@ -88,12 +106,16 @@ export default function NameAndIdFields({
           name={idField}
           render={({ field }) => (
             <FormItem>
-              <FormLabel>{idLabel}</FormLabel>
+              <FormLabel>{idLabel ?? t("label.ID")}</FormLabel>
               <FormControl>
-                <Input placeholder={placeholderId} {...field} />
+                <Input
+                  className="text-md"
+                  placeholder={placeholderId}
+                  {...field}
+                />
               </FormControl>
               <FormDescription>
-                {idDescription ?? t("field.description")}
+                {idDescription ?? t("field.internalID")}
               </FormDescription>
               <FormMessage />
             </FormItem>
diff --git a/web/src/components/overlay/CreateTriggerDialog.tsx b/web/src/components/overlay/CreateTriggerDialog.tsx
index 699896e17..e51656f6f 100644
--- a/web/src/components/overlay/CreateTriggerDialog.tsx
+++ b/web/src/components/overlay/CreateTriggerDialog.tsx
@@ -47,7 +47,7 @@ import {
   MobilePageHeader,
   MobilePageTitle,
 } from "../mobile/MobilePage";
-import NameAndIdFields from "@/components/ui/NameAndIdFields";
+import NameAndIdFields from "@/components/input/NameAndIdFields";
 
 type CreateTriggerDialogProps = {
   show: boolean;
diff --git a/web/src/components/trigger/wizard/Step1NameAndType.tsx b/web/src/components/trigger/wizard/Step1NameAndType.tsx
index f9bb9afd3..265fba389 100644
--- a/web/src/components/trigger/wizard/Step1NameAndType.tsx
+++ b/web/src/components/trigger/wizard/Step1NameAndType.tsx
@@ -4,7 +4,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import useSWR from "swr";
-import NameAndIdFields from "@/components/ui/NameAndIdFields";
+import NameAndIdFields from "@/components/input/NameAndIdFields";
 import { Form, FormDescription } from "@/components/ui/form";
 import {
   FormControl,
diff --git a/web/src/components/ui/NameAndIdFields.tsx b/web/src/components/ui/NameAndIdFields.tsx
deleted file mode 100644
index 8024ecbfd..000000000
--- a/web/src/components/ui/NameAndIdFields.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { Control } from "react-hook-form";
-import {
-  FormField,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { useState, useEffect } from "react";
-import { useFormContext } from "react-hook-form";
-import { generateFixedHash, isValidId } from "@/utils/stringUtil";
-import { useTranslation } from "react-i18next";
-
-type NameAndIdFieldsProps = {
-  control: Control<any>;
-  type?: string;
-  nameField: string;
-  idField: string;
-  nameLabel: string;
-  nameDescription?: string;
-  idLabel?: string;
-  idDescription?: string;
-  processId?: (name: string) => string;
-  placeholderName?: string;
-  placeholderId?: string;
-};
-
-export default function NameAndIdFields({
-  control,
-  type,
-  nameField,
-  idField,
-  nameLabel,
-  nameDescription,
-  idLabel,
-  idDescription,
-  processId,
-  placeholderName,
-  placeholderId,
-}: NameAndIdFieldsProps) {
-  const { t } = useTranslation(["common"]);
-  const { watch, setValue, trigger } = useFormContext();
-  const [isIdVisible, setIsIdVisible] = useState(false);
-
-  const defaultProcessId = (name: string) => {
-    const normalized = name.replace(/\s+/g, "_").toLowerCase();
-    if (isValidId(normalized)) {
-      return normalized;
-    } else {
-      return generateFixedHash(name, type);
-    }
-  };
-
-  const effectiveProcessId = processId || defaultProcessId;
-
-  useEffect(() => {
-    const subscription = watch((value, { name }) => {
-      if (name === nameField) {
-        const processedId = effectiveProcessId(value[nameField] || "");
-        setValue(idField, processedId);
-        trigger(idField);
-      }
-    });
-    return () => subscription.unsubscribe();
-  }, [watch, setValue, trigger, nameField, idField, effectiveProcessId]);
-
-  return (
-    <>
-      <FormField
-        control={control}
-        name={nameField}
-        render={({ field }) => (
-          <FormItem>
-            <div className="flex items-center justify-between">
-              <FormLabel>{nameLabel}</FormLabel>
-              <span
-                className="cursor-pointer text-right text-xs text-muted-foreground"
-                onClick={() => setIsIdVisible(!isIdVisible)}
-              >
-                {isIdVisible
-                  ? t("label.hide", { item: idLabel ?? t("label.ID") })
-                  : t("label.show", {
-                      item: idLabel ?? t("label.ID"),
-                    })}
-              </span>
-            </div>
-            <FormControl>
-              <Input placeholder={placeholderName} {...field} />
-            </FormControl>
-            {nameDescription && (
-              <FormDescription>{nameDescription}</FormDescription>
-            )}
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-      {isIdVisible && (
-        <FormField
-          control={control}
-          name={idField}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{idLabel ?? t("label.ID")}</FormLabel>
-              <FormControl>
-                <Input placeholder={placeholderId} {...field} />
-              </FormControl>
-              <FormDescription>
-                {idDescription ?? t("field.internalID")}
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      )}
-    </>
-  );
-}