add MUI components and update localization for payment methods

frontend/package-lock.json

@@ -12,7 +12,9 @@
         "@emotion/styled": "^11.14.1",
         "@fontsource-variable/inter": "^5.2.8",
         "@fontsource/inter": "^5.2.8",
+        "@mui/icons-material": "^9.0.1",
         "@mui/joy": "^5.0.0-beta.52",
+        "@mui/material": "^9.0.1",
         "@tailwindcss/vite": "^4.3.0",
         "i18next": "^26.0.10",
         "js-cookie": "^3.0.5",
@@ -803,6 +805,32 @@
         "url": "https://opencollective.com/mui-org"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-9.0.1.tgz",
+      "integrity": "sha512-5PRpQjVLTNLyV/2J9J53Yz4R0tVbodG0BQDN2zQI1QBG1OPYM25ar+4N20eyFOfJT6zKglLzsnU70+zdVLaTkw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^9.0.1",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/joy": {
       "version": "5.0.0-beta.52",
       "resolved": "https://registry.npmjs.org/@mui/joy/-/joy-5.0.0-beta.52.tgz",
@@ -844,6 +872,213 @@
         }
       }
     },
+    "node_modules/@mui/material": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-9.0.1.tgz",
+      "integrity": "sha512-voyCpeUxcSWLN7KPZuq0pGCIt726T9K6kiVM3XUcywZDAlZSarLHaUxJVQpospbjjOzN53hwyjo8s6KoWl6utw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "@mui/core-downloads-tracker": "^9.0.1",
+        "@mui/system": "^9.0.1",
+        "@mui/types": "^9.0.0",
+        "@mui/utils": "^9.0.1",
+        "@popperjs/core": "^2.11.8",
+        "@types/react-transition-group": "^4.4.12",
+        "clsx": "^2.1.1",
+        "csstype": "^3.2.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.2.4",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material-pigment-css": "^9.0.1",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@mui/material-pigment-css": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/@mui/core-downloads-tracker": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-9.0.1.tgz",
+      "integrity": "sha512-GzamIIhZ1bH77dq7eKaeyRgJdkypsxin4jBFq2EMs4lBWRR0LFO1CSVMsoebn/VvjcNrnrOrjy48MkrkQUK2iw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/material/node_modules/@mui/private-theming": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-9.0.1.tgz",
+      "integrity": "sha512-pSIGq4Yw749KHEwlkYZWVERgHgwJELP6ODtBNUfV8V4oIb5H+h7IQDFXuk/b2oQccODK1enJAtiEzlgLZmq+8g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "@mui/utils": "^9.0.1",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/@mui/styled-engine": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-9.0.0.tgz",
+      "integrity": "sha512-9RLGdX4Jg0aQPRuvqh/OLzYSPlgd5zyEw5/1HIRfdavSiOd03WtUaGZH9/w1RoTYuRKwpgy0hpIFaMHIqPVIWg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/sheet": "^1.4.0",
+        "csstype": "^3.2.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/@mui/system": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-9.0.1.tgz",
+      "integrity": "sha512-WvlioaLxk6ewUIOfh0StxUvOPDS1mCfzaulcudsL1brZNXuh0N9FMk7RpH7ImJKjEz412SEy/V/yvqmtxbqxCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "@mui/private-theming": "^9.0.1",
+        "@mui/styled-engine": "^9.0.0",
+        "@mui/types": "^9.0.0",
+        "@mui/utils": "^9.0.1",
+        "clsx": "^2.1.1",
+        "csstype": "^3.2.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/@mui/types": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-9.0.0.tgz",
+      "integrity": "sha512-i1cuFCAWN44b3AJWO7mh7tuh1sqbQSeVr/94oG0TX5uXivac8XalgE4/6fQZcmGZigzbQ35IXxj/4jLpRIBYZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/@mui/utils": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-9.0.1.tgz",
+      "integrity": "sha512-f3UO3jNN1pYg5zxqXC81Bvv8hx5ACcYc0387382ZI7M5ono1heIwHYLrKsz85myguWdeVKPRZGmDdynWUBjK2g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "@mui/types": "^9.0.0",
+        "@types/prop-types": "^15.7.15",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.2.4"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/private-theming": {
       "version": "5.17.1",
       "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.17.1.tgz",
@@ -1595,7 +1830,6 @@
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -1611,6 +1845,15 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.12",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.59.2",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.59.2.tgz",
@@ -2143,6 +2386,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.353",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.353.tgz",
@@ -3477,6 +3730,22 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.12",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",

frontend/package.json

@@ -14,7 +14,9 @@
     "@emotion/styled": "^11.14.1",
     "@fontsource-variable/inter": "^5.2.8",
     "@fontsource/inter": "^5.2.8",
+    "@mui/icons-material": "^9.0.1",
     "@mui/joy": "^5.0.0-beta.52",
+    "@mui/material": "^9.0.1",
     "@tailwindcss/vite": "^4.3.0",
     "i18next": "^26.0.10",
     "js-cookie": "^3.0.5",

frontend/src/App.css

@@ -0,0 +1,8 @@
+@import "tailwindcss";
+
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}

frontend/src/index.css

@@ -0,0 +1,12 @@
+@import "tailwindcss";
+
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+
+html {
+  font-size: large;
+}

frontend/src/pages/MainForm.tsx

@@ -2,7 +2,6 @@ import { useTranslation } from "react-i18next";
 import { useState, useEffect } from "react";
 import * as React from "react";
 import Cookies from "js-cookie";
-import { Languages } from "lucide-react";
 import {
   Sheet,
   Input,
@@ -15,10 +14,18 @@ import {
   FormControl,
   FormLabel,
   Autocomplete,
+  ButtonGroup,
+  Modal,
+  ModalDialog,
+  ModalClose,
 } from "@mui/joy";
 import { submitFormData } from "../utils/sender";
 import { API_BASE } from "../config/api.config";
 import type { FormData, Message } from "../config/interfaces.config";
+import PersonIcon from "@mui/icons-material/Person";
+import QrCodeIcon from "@mui/icons-material/QrCode";
+import TranslateIcon from "@mui/icons-material/Translate";
+import qrCode from "../assets/PayPal-QR-Code.png";
 
 const PAYMENT_METHODS = ["bar", "paypal", "andere"] as const;
 const PAYMENT_LABELS: Record<string, string> = {
@@ -83,6 +90,8 @@ export const MainForm = () => {
   const [users, setUsers] = useState<string[]>([]);
   const [selectedUser, setSelectedUser] = useState<string | null>(null);
   const [formData, setFormData] = useState<FormData>(DEFAULT_FORM);
+  const [showSelectUser, setShowSelectUser] = useState(false);
+  const [QRmodal, setQRmodal] = useState(false);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
@@ -107,10 +116,30 @@ export const MainForm = () => {
     Cookies.set("selectedUser", username);
   };
 
-  const toggleLanguage = () => {
+  const changeTranslation = () => {
-    i18n.changeLanguage(i18n.language === "en" ? "de" : "en");
+    const clientLng = i18n.language;
+
+    if (clientLng === "en") {
+      i18n.changeLanguage("de");
+      Cookies.set("language", "de");
+    } else if (clientLng === "de") {
+      i18n.changeLanguage("en");
+      Cookies.set("language", "en");
+    } else {
+      setMsg({
+        type: "danger",
+        headline: "Error",
+        text: "Cannot change langugage.",
+      });
+    }
   };
 
+  useEffect(() => {
+    if (formData.paymentMethod === "paypal") {
+      setQRmodal(true);
+    }
+  }, [formData.paymentMethod]);
+
   useEffect(() => {
     (async () => {
       try {
@@ -155,38 +184,11 @@ export const MainForm = () => {
   const fieldProps = { formData, onChange: handleChange };
 
   return (
-    <div className="min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-slate-100 to-blue-50 p-4">
+    <>
-      <Sheet
+      <Modal open={showSelectUser}>
-        variant="plain"
+        <ModalDialog color="primary" layout="center" size="lg">
-        className="w-full"
+          <ModalClose onClick={() => setShowSelectUser(false)} />
-        sx={{
+          <Typography>{t("user")}</Typography>
-          position: "relative",
-          maxWidth: 460,
-          borderRadius: "24px",
-          p: { xs: "1.5rem", sm: "2rem" },
-          boxShadow: "0 24px 64px -12px rgba(0,0,0,0.18)",
-          background: "#fff",
-        }}
-      >
-        {/* Language toggle */}
-        <IconButton
-          onClick={toggleLanguage}
-          size="sm"
-          variant="plain"
-          color="neutral"
-          aria-label="toggle language"
-          sx={{ position: "absolute", top: 12, right: 12 }}
-        >
-          <Languages size={18} />
-        </IconButton>
-
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            handleSubmit();
-          }}
-          className="flex flex-col gap-4"
-        >
           {/* User selection */}
           <Autocomplete
             options={users}
@@ -199,173 +201,242 @@ export const MainForm = () => {
               if (e.key === "Enter") e.preventDefault();
             }}
           />
-
+        </ModalDialog>
-          {/* Next ID badge */}
+      </Modal>
-          <Chip
+      <Modal open={QRmodal}>
-            size="md"
+        <ModalDialog color="primary" layout="center" size="lg">
-            variant="solid"
+          <ModalClose onClick={() => setQRmodal(false)} />
-            color="primary"
+          <Typography>{t("qr-text")}</Typography>
-            sx={{
+          <img
-              alignSelf: "flex-start",
+            src={qrCode}
-              borderRadius: "999px",
+            alt="PayPal QR Code"
-              fontWeight: 600,
+            style={{
+              width: "100%",
+              height: "auto",
+              maxHeight: "70vh",
+              objectFit: "contain",
             }}
-          >
-            #{nextID ?? "N/A"}
-          </Chip>
-
-          {/* Name row */}
-          <div className="grid grid-cols-2 gap-3">
-            <Field label={t("first-name")} name="firstName" {...fieldProps} />
-            <Field label={t("last-name")} name="lastName" {...fieldProps} />
-          </div>
-
-          <Field label={t("email")} name="email" type="email" {...fieldProps} />
-          <Field
-            label={t("phone-number")}
-            name="phoneNumber"
-            type="tel"
-            {...fieldProps}
           />
+        </ModalDialog>
+      </Modal>
 
-          {/* Tickets + Invoice toggle */}
+      <div className="min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-slate-100 to-blue-50 p-4">
-          <div className="grid grid-cols-2 gap-3 items-end">
+        <Sheet
-            <FormControl required>
+          variant="plain"
-              <FormLabel>{t("tickets")}</FormLabel>
+          className="w-full"
-              <Input
+          sx={{
-                name="tickets"
+            position: "relative",
-                type="number"
+            maxWidth: 460,
-                value={formData.tickets}
+            borderRadius: "24px",
-                onChange={handleChange}
+            p: { xs: "1.5rem", sm: "2rem" },
-                slotProps={{ input: { min: 1 } }}
+            boxShadow: "0 24px 64px -12px rgba(0,0,0,0.18)",
-                variant="soft"
+            background: "#fff",
-                sx={{ borderRadius: "10px" }}
+          }}
-              />
+        >
-            </FormControl>
+          <ButtonGroup
-            <div className="flex items-center pb-2">
+            color="primary"
-              <Checkbox
+            disabled={false}
-                checked={invoice}
+            size="lg"
-                onChange={(e) => setInvoice(e.target.checked)}
+            spacing={1}
-                label={t("invoice")}
+            variant="soft"
-                variant="outlined"
+          >
-              />
+            <IconButton onClick={() => setShowSelectUser(true)}>
+              <PersonIcon />
+            </IconButton>
+            <IconButton onClick={() => setQRmodal(true)}>
+              <QrCodeIcon />
+            </IconButton>
+            {/* Language toggle */}
+            <IconButton onClick={changeTranslation}>
+              <TranslateIcon />
+            </IconButton>
+          </ButtonGroup>
+
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleSubmit();
+            }}
+            className="flex flex-col gap-4"
+          >
+            {/* Next ID badge */}
+            <Chip
+              size="lg"
+              variant="solid"
+              color="neutral"
+              sx={{
+                alignSelf: "flex-start",
+                borderRadius: "999px",
+                fontWeight: 600,
+                marginTop: 1
+              }}
+            >
+              #{nextID ?? "N/A"}
+            </Chip>
+
+            {/* Name row */}
+            <div className="grid grid-cols-2 gap-3">
+              <Field label={t("first-name")} name="firstName" {...fieldProps} />
+              <Field label={t("last-name")} name="lastName" {...fieldProps} />
             </div>
-          </div>
 
-          {/* Invoice details (conditional) */}
+            <Field
-          {invoice && (
+              label={t("email")}
-            <div className="flex flex-col gap-3 pt-4 border-t border-blue-200">
+              name="email"
-              <Typography level="title-sm" color="primary">
+              type="email"
-                {t("invoice-details")}
+              {...fieldProps}
-              </Typography>
+            />
-              <Field
+            <Field
-                label={t("company-name")}
+              label={t("phone-number")}
-                name="companyName"
+              name="phoneNumber"
-                {...fieldProps}
+              type="tel"
-              />
+              {...fieldProps}
-              <div className="grid grid-cols-2 gap-3">
+            />
+
+            {/* Tickets + Invoice toggle */}
+            <div className="grid grid-cols-2 gap-3 items-end">
+              <FormControl required>
+                <FormLabel>{t("tickets")}</FormLabel>
+                <Input
+                  name="tickets"
+                  type="number"
+                  value={formData.tickets}
+                  onChange={handleChange}
+                  slotProps={{ input: { min: 1 } }}
+                  variant="soft"
+                  sx={{ borderRadius: "10px" }}
+                />
+              </FormControl>
+              <div className="flex items-center pb-2">
+                <Checkbox
+                  checked={invoice}
+                  onChange={(e) => setInvoice(e.target.checked)}
+                  label={t("invoice")}
+                  variant="outlined"
+                />
+              </div>
+            </div>
+
+            {/* Invoice details (conditional) */}
+            {invoice && (
+              <div className="flex flex-col gap-3 pt-4 border-t border-blue-200">
+                <Typography level="title-sm" color="primary">
+                  {t("invoice-details")}
+                </Typography>
                 <Field
-                  label={t("first-name")}
+                  label={t("company-name")}
-                  name="cmpFirstName"
+                  name="companyName"
+                  {...fieldProps}
+                />
+                <div className="grid grid-cols-2 gap-3">
+                  <Field
+                    label={t("first-name")}
+                    name="cmpFirstName"
+                    {...fieldProps}
+                  />
+                  <Field
+                    label={t("last-name")}
+                    name="cpmLastName"
+                    {...fieldProps}
+                  />
+                </div>
+                <Field label={t("street")} name="street" {...fieldProps} />
+                <Field
+                  label={t("postal-code")}
+                  name="postalCode"
                   {...fieldProps}
                 />
                 <Field
-                  label={t("last-name")}
+                  label={t("phone-number")}
-                  name="cpmLastName"
+                  name="cpmPhoneNumber"
+                  type="tel"
+                  {...fieldProps}
+                />
+                <Field
+                  label={t("email")}
+                  name="cpmEmail"
+                  type="email"
                   {...fieldProps}
                 />
               </div>
-              <Field label={t("street")} name="street" {...fieldProps} />
-              <Field
-                label={t("postal-code")}
-                name="postalCode"
-                {...fieldProps}
-              />
-              <Field
-                label={t("phone-number")}
-                name="cpmPhoneNumber"
-                type="tel"
-                {...fieldProps}
-              />
-              <Field
-                label={t("email")}
-                name="cpmEmail"
-                type="email"
-                {...fieldProps}
-              />
-            </div>
-          )}
-
-          {/* Payment method selection */}
-          <FormControl required>
-            <FormLabel>{t("select-payment-method")} *</FormLabel>
-            <div className="flex gap-2 flex-wrap mt-1">
-              {PAYMENT_METHODS.map((method) => (
-                <Button
-                  key={method}
-                  variant={formData.paymentMethod === method ? "solid" : "soft"}
-                  color="primary"
-                  onClick={() =>
-                    setFormData((prev) => ({ ...prev, paymentMethod: method }))
-                  }
-                  sx={{
-                    flex: 1,
-                    minWidth: "90px",
-                    borderRadius: "12px",
-                    py: 1.5,
-                    textTransform: "none",
-                    fontWeight: formData.paymentMethod === method ? 700 : 400,
-                  }}
-                >
-                  {PAYMENT_LABELS[method]}
-                </Button>
-              ))}
-            </div>
-            {/* Hidden required input to enforce payment selection on submit */}
-            {!formData.paymentMethod && (
-              <input
-                tabIndex={-1}
-                required
-                value=""
-                onChange={() => {}}
-                style={{
-                  opacity: 0,
-                  width: 0,
-                  height: 0,
-                  position: "absolute",
-                }}
-              />
             )}
-          </FormControl>
 
-          {/* Submit button */}
+            {/* Payment method selection */}
-          <Button
+            <FormControl required>
-            type="submit"
+              <FormLabel>{t("select-payment-method")}</FormLabel>
-            loading={isLoading}
+              <div className="flex gap-2 flex-wrap mt-1">
-            disabled={!formData.paymentMethod}
+                {PAYMENT_METHODS.map((method) => (
-            size="lg"
+                  <Button
-            sx={{
+                    key={method}
-              mt: 2,
+                    variant={
-              borderRadius: "14px",
+                      formData.paymentMethod === method ? "solid" : "soft"
-              fontWeight: 700,
+                    }
-              letterSpacing: "0.05em",
+                    color="primary"
-              background: "linear-gradient(135deg, #2563eb, #1d4ed8)",
+                    onClick={() =>
-              "&:hover": {
+                      setFormData((prev) => ({
-                background: "linear-gradient(135deg, #1d4ed8, #1e40af)",
+                        ...prev,
-              },
+                        paymentMethod: method,
-            }}
+                      }))
-          >
+                    }
-            {t("submit")}
+                    sx={{
-          </Button>
+                      flex: 1,
+                      minWidth: "90px",
+                      borderRadius: "12px",
+                      py: 1.5,
+                      textTransform: "none",
+                      fontWeight: formData.paymentMethod === method ? 700 : 400,
+                    }}
+                  >
+                    {PAYMENT_LABELS[method]}
+                  </Button>
+                ))}
+              </div>
+              {/* Hidden required input to enforce payment selection on submit */}
+              {!formData.paymentMethod && (
+                <input
+                  tabIndex={-1}
+                  required
+                  value=""
+                  onChange={() => {}}
+                  style={{
+                    opacity: 0,
+                    width: 0,
+                    height: 0,
+                    position: "absolute",
+                  }}
+                />
+              )}
+            </FormControl>
 
-          {/* Alert message */}
+            {/* Submit button */}
-          {msg && (
+            <Button
-            <Alert color={msg.type} sx={{ borderRadius: "12px" }}>
+              type="submit"
-              <strong>{msg.headline}:</strong> {msg.text}
+              loading={isLoading}
-            </Alert>
+              disabled={!formData.paymentMethod}
-          )}
+              size="lg"
-        </form>
+              sx={{
-      </Sheet>
+                mt: 2,
-    </div>
+                borderRadius: "14px",
+                fontWeight: 700,
+                letterSpacing: "0.05em",
+                background: "linear-gradient(135deg, #2563eb, #1d4ed8)",
+                "&:hover": {
+                  background: "linear-gradient(135deg, #1d4ed8, #1e40af)",
+                },
+              }}
+            >
+              {t("submit")}
+            </Button>
+
+            {/* Alert message */}
+            {msg && (
+              <Alert color={msg.type} sx={{ borderRadius: "12px" }}>
+                <strong>{msg.headline}:</strong> {msg.text}
+              </Alert>
+            )}
+          </form>
+        </Sheet>
+      </div>
+    </>
   );
 };

frontend/src/utils/i18n/locales/de/de.json

@@ -25,5 +25,6 @@
     "entry-id": "Eintrags-ID",
     "thank-you": "Vielen Dank für Ihre Unterstützung der Claudius Akademie! Wir wünschen Ihnen viel Glück mit dem Los.",
     "select-payment-method": "Zahlungsmethode auswählen",
-    "return-to-homepage": "Zurück"
+    "return-to-homepage": "Zurück",
+    "qr-text": "PayPal QR-Code der Claudius Akademie"
 }

frontend/src/utils/i18n/locales/en/en.json

@@ -26,5 +26,6 @@
     "entry-id": "Entry ID",
     "thank-you": "Thank you for supporting the Claudius Akademie! We wish you the best of luck with your ticket.",
     "select-payment-method": "Select Payment Method",
-    "return-to-homepage": "Return"
+    "return-to-homepage": "Return",
+    "qr-text": "PayPal QR-Code from the Claudius Akademie"
 }

frontend/vite.config.ts

@@ -1,7 +1,6 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
-import react from '@vitejs/plugin-react'
+import tailwindcss from "@tailwindcss/vite";
 
-// https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [tailwindcss()],
-})
+});