diff --git a/frontend/src/components/TextField.tsx b/frontend/src/components/TextField.tsx
new file mode 100644
index 0000000..c527bb1
--- /dev/null
+++ b/frontend/src/components/TextField.tsx
@@ -0,0 +1,31 @@
+import type { TextFieldProps } from "../config/interfaces.config";
+import { FormControl, FormLabel, Input } from "@mui/joy";
+
+export const TextField = ({
+  label,
+  type = "text",
+  required,
+  errors,
+  value,
+  onBlur,
+  onChange,
+  slotProps,
+  afterInput,
+}: TextFieldProps) => (
+  <FormControl required={required}>
+    <FormLabel>{label}</FormLabel>
+    <Input
+      value={value ?? ""}
+      onBlur={onBlur}
+      onChange={(e) => onChange(e.target.value)}
+      type={type}
+      variant="soft"
+      sx={{ borderRadius: "10px" }}
+      slotProps={slotProps}
+    />
+    {afterInput}
+    {errors[0] ? (
+      <span className="text-red-500 text-sm">{errors[0]}</span>
+    ) : null}
+  </FormControl>
+);
diff --git a/frontend/src/config/interfaces.config.ts b/frontend/src/config/interfaces.config.ts
index dde4d15..2445779 100644
--- a/frontend/src/config/interfaces.config.ts
+++ b/frontend/src/config/interfaces.config.ts
@@ -1,5 +1,6 @@
 import z from "zod";
 import validator from "validator";
+import type { ReactNode } from "react";
 
 export interface FormData {
   firstName: string;
@@ -23,6 +24,18 @@ export interface Message {
   text: string;
 }
 
+export type TextFieldProps = {
+  label: string;
+  type?: "text" | "email" | "tel" | "number";
+  required?: boolean;
+  errors: string[];
+  onBlur: () => void;
+  onChange: (value: string) => void;
+  value: string | number | null | undefined;
+  slotProps?: { input?: Record<string, unknown> };
+  afterInput?: ReactNode;
+};
+
 export const createFormSchema = (
   t: (key: string) => string,
   invoice: boolean,
diff --git a/frontend/src/pages/MainForm.tsx b/frontend/src/pages/MainForm.tsx
index 70f0ad4..2c86891 100644
--- a/frontend/src/pages/MainForm.tsx
+++ b/frontend/src/pages/MainForm.tsx
@@ -28,6 +28,7 @@ import { useForm } from "@tanstack/react-form";
 import { changeTranslation } from "../utils/uxFncs";
 import { createFormSchema } from "../config/interfaces.config";
 import type { ZodObject, ZodRawShape } from "zod";
+import { TextField } from "../components/TextField";
 
 const PAYMENT_METHODS = ["bar", "paypal", "andere"] as const;
 const PAYMENT_LABELS: Record<string, string> = {
@@ -252,100 +253,64 @@ export const MainForm = () => {
                 name="firstName"
                 validators={makeFieldValidator("firstName")}
               >
-                {(field) => {
-                  const errors = getErrors(field);
-                  return (
-                    <FormControl required>
-                      <FormLabel>{t("first-name")}</FormLabel>
-                      <Input
-                        value={field.state.value ?? ""}
-                        onBlur={field.handleBlur}
-                        onChange={(e) => field.handleChange(e.target.value)}
-                        variant="soft"
-                        sx={{ borderRadius: "10px" }}
-                      />
-                      {errors.length > 0 && (
-                        <span className="text-red-500 text-sm">
-                          {errors[0]}
-                        </span>
-                      )}
-                    </FormControl>
-                  );
-                }}
+                {(field) => (
+                  <TextField
+                    label={t("first-name")}
+                    required
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={field.handleChange}
+                    errors={getErrors(field)}
+                  />
+                )}
               </Field>
 
               <Field
                 name="lastName"
                 validators={makeFieldValidator("lastName")}
               >
-                {(field) => {
-                  const errors = getErrors(field);
-                  return (
-                    <FormControl required>
-                      <FormLabel>{t("last-name")}</FormLabel>
-                      <Input
-                        value={field.state.value ?? ""}
-                        onBlur={field.handleBlur}
-                        onChange={(e) => field.handleChange(e.target.value)}
-                        variant="soft"
-                        sx={{ borderRadius: "10px" }}
-                      />
-                      {errors.length > 0 && (
-                        <span className="text-red-500 text-sm">
-                          {errors[0]}
-                        </span>
-                      )}
-                    </FormControl>
-                  );
-                }}
+                {(field) => (
+                  <TextField
+                    label={t("last-name")}
+                    required
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={field.handleChange}
+                    errors={getErrors(field)}
+                  />
+                )}
               </Field>
             </div>
 
             <Field name="email" validators={makeFieldValidator("email")}>
-              {(field) => {
-                const errors = getErrors(field);
-                return (
-                  <FormControl required>
-                    <FormLabel>{t("email")}</FormLabel>
-                    <Input
-                      value={field.state.value ?? ""}
-                      onBlur={field.handleBlur}
-                      onChange={(e) => field.handleChange(e.target.value)}
-                      variant="soft"
-                      type="email"
-                      sx={{ borderRadius: "10px" }}
-                    />
-                    {errors.length > 0 && (
-                      <span className="text-red-500 text-sm">{errors[0]}</span>
-                    )}
-                  </FormControl>
-                );
-              }}
+              {(field) => (
+                <TextField
+                  label={t("email")}
+                  type="email"
+                  required
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={field.handleChange}
+                  errors={getErrors(field)}
+                />
+              )}
             </Field>
 
             <Field
               name="phoneNumber"
               validators={makeFieldValidator("phoneNumber")}
             >
-              {(field) => {
-                const errors = getErrors(field);
-                return (
-                  <FormControl required>
-                    <FormLabel>{t("phone-number")}</FormLabel>
-                    <Input
-                      value={field.state.value ?? ""}
-                      onBlur={field.handleBlur}
-                      onChange={(e) => field.handleChange(e.target.value)}
-                      variant="soft"
-                      type="tel"
-                      sx={{ borderRadius: "10px" }}
-                    />
-                    {errors.length > 0 && (
-                      <span className="text-red-500 text-sm">{errors[0]}</span>
-                    )}
-                  </FormControl>
-                );
-              }}
+              {(field) => (
+                <TextField
+                  label={t("phone-number")}
+                  type="tel"
+                  required
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={field.handleChange}
+                  errors={getErrors(field)}
+                />
+              )}
             </Field>
 
             {/* Tickets + Invoice toggle */}
@@ -414,26 +379,16 @@ export const MainForm = () => {
                   name="companyName"
                   validators={makeFieldValidator("companyName")}
                 >
-                  {(field) => {
-                    const errors = getErrors(field);
-                    return (
-                      <FormControl required>
-                        <FormLabel>{t("company-name")}</FormLabel>
-                        <Input
-                          value={field.state.value ?? ""}
-                          onBlur={field.handleBlur}
-                          onChange={(e) => field.handleChange(e.target.value)}
-                          variant="soft"
-                          sx={{ borderRadius: "10px" }}
-                        />
-                        {errors.length > 0 && (
-                          <span className="text-red-500 text-sm">
-                            {errors[0]}
-                          </span>
-                        )}
-                      </FormControl>
-                    );
-                  }}
+                  {(field) => (
+                    <TextField
+                      label={t("company-name")}
+                      required
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={field.handleChange}
+                      errors={getErrors(field)}
+                    />
+                  )}
                 </Field>
 
                 <div className="grid grid-cols-2 gap-3">
@@ -441,156 +396,96 @@ export const MainForm = () => {
                     name="cmpFirstName"
                     validators={makeFieldValidator("cmpFirstName")}
                   >
-                    {(field) => {
-                      const errors = getErrors(field);
-                      return (
-                        <FormControl required>
-                          <FormLabel>{t("first-name")}</FormLabel>
-                          <Input
-                            value={field.state.value ?? ""}
-                            onBlur={field.handleBlur}
-                            onChange={(e) => field.handleChange(e.target.value)}
-                            variant="soft"
-                            sx={{ borderRadius: "10px" }}
-                          />
-                          {errors.length > 0 && (
-                            <span className="text-red-500 text-sm">
-                              {errors[0]}
-                            </span>
-                          )}
-                        </FormControl>
-                      );
-                    }}
+                    {(field) => (
+                      <TextField
+                        label={t("first-name")}
+                        required
+                        value={field.state.value}
+                        onBlur={field.handleBlur}
+                        onChange={field.handleChange}
+                        errors={getErrors(field)}
+                      />
+                    )}
                   </Field>
 
                   <Field
                     name="cpmLastName"
                     validators={makeFieldValidator("cpmLastName")}
                   >
-                    {(field) => {
-                      const errors = getErrors(field);
-                      return (
-                        <FormControl required>
-                          <FormLabel>{t("last-name")}</FormLabel>
-                          <Input
-                            value={field.state.value ?? ""}
-                            onBlur={field.handleBlur}
-                            onChange={(e) => field.handleChange(e.target.value)}
-                            variant="soft"
-                            sx={{ borderRadius: "10px" }}
-                          />
-                          {errors.length > 0 && (
-                            <span className="text-red-500 text-sm">
-                              {errors[0]}
-                            </span>
-                          )}
-                        </FormControl>
-                      );
-                    }}
+                    {(field) => (
+                      <TextField
+                        label={t("last-name")}
+                        required
+                        value={field.state.value}
+                        onBlur={field.handleBlur}
+                        onChange={field.handleChange}
+                        errors={getErrors(field)}
+                      />
+                    )}
                   </Field>
                 </div>
 
                 <Field name="street" validators={makeFieldValidator("street")}>
-                  {(field) => {
-                    const errors = getErrors(field);
-                    return (
-                      <FormControl required>
-                        <FormLabel>{t("street")}</FormLabel>
-                        <Input
-                          value={field.state.value ?? ""}
-                          onBlur={field.handleBlur}
-                          onChange={(e) => field.handleChange(e.target.value)}
-                          variant="soft"
-                          sx={{ borderRadius: "10px" }}
-                        />
-                        {errors.length > 0 && (
-                          <span className="text-red-500 text-sm">
-                            {errors[0]}
-                          </span>
-                        )}
-                      </FormControl>
-                    );
-                  }}
+                  {(field) => (
+                    <TextField
+                      label={t("street")}
+                      required
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={field.handleChange}
+                      errors={getErrors(field)}
+                    />
+                  )}
                 </Field>
 
                 <Field
                   name="postalCode"
                   validators={makeFieldValidator("postalCode")}
                 >
-                  {(field) => {
-                    const errors = getErrors(field);
-                    return (
-                      <FormControl required>
-                        <FormLabel>{t("postal-code")}</FormLabel>
-                        <Input
-                          value={field.state.value ?? ""}
-                          onBlur={field.handleBlur}
-                          onChange={(e) => field.handleChange(e.target.value)}
-                          variant="soft"
-                          sx={{ borderRadius: "10px" }}
-                        />
-                        {errors.length > 0 && (
-                          <span className="text-red-500 text-sm">
-                            {errors[0]}
-                          </span>
-                        )}
-                      </FormControl>
-                    );
-                  }}
+                  {(field) => (
+                    <TextField
+                      label={t("postal-code")}
+                      required
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={field.handleChange}
+                      errors={getErrors(field)}
+                    />
+                  )}
                 </Field>
 
                 <Field
                   name="cpmPhoneNumber"
                   validators={makeFieldValidator("cpmPhoneNumber")}
                 >
-                  {(field) => {
-                    const errors = getErrors(field);
-                    return (
-                      <FormControl required>
-                        <FormLabel>{t("phone-number")}</FormLabel>
-                        <Input
-                          value={field.state.value ?? ""}
-                          onBlur={field.handleBlur}
-                          onChange={(e) => field.handleChange(e.target.value)}
-                          variant="soft"
-                          type="tel"
-                          sx={{ borderRadius: "10px" }}
-                        />
-                        {errors.length > 0 && (
-                          <span className="text-red-500 text-sm">
-                            {errors[0]}
-                          </span>
-                        )}
-                      </FormControl>
-                    );
-                  }}
+                  {(field) => (
+                    <TextField
+                      label={t("phone-number")}
+                      type="tel"
+                      required
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={field.handleChange}
+                      errors={getErrors(field)}
+                    />
+                  )}
                 </Field>
 
                 <Field
                   name="cpmEmail"
                   validators={makeFieldValidator("cpmEmail")}
                 >
-                  {(field) => {
-                    const errors = getErrors(field);
-                    return (
-                      <FormControl required>
-                        <FormLabel>{t("email")}</FormLabel>
-                        <Input
-                          value={field.state.value ?? ""}
-                          onBlur={field.handleBlur}
-                          onChange={(e) => field.handleChange(e.target.value)}
-                          variant="soft"
-                          type="email"
-                          sx={{ borderRadius: "10px" }}
-                        />
-                        {errors.length > 0 && (
-                          <span className="text-red-500 text-sm">
-                            {errors[0]}
-                          </span>
-                        )}
-                      </FormControl>
-                    );
-                  }}
+                  {(field) => (
+                    <TextField
+                      label={t("email")}
+                      type="email"
+                      required
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={field.handleChange}
+                      errors={getErrors(field)}
+                    />
+                  )}
                 </Field>
               </div>
             )}
diff --git a/frontend/src/utils/i18n/locales/en/en.json b/frontend/src/utils/i18n/locales/en/en.json
index a5e09fb..24f669e 100644
--- a/frontend/src/utils/i18n/locales/en/en.json
+++ b/frontend/src/utils/i18n/locales/en/en.json
@@ -33,6 +33,6 @@
     "set-username-headline": "No user selected",
     "set-username-text": "To start the ticket sale, you must select a user first from the top left.",
     "name-error": "You have to enter a name!",
-    "email-error": "You have to enter a valid e-mail Adress!",
+    "email-error": "You have to enter a valid E-Mail adress!",
     "phone-error": "You have to enter a vaild phone number!"
 }
\ No newline at end of file