diff --git a/components/elements/fields/renderDatePicker.js b/components/elements/fields/renderDatePicker.js
new file mode 100644
index 00000000..bb512802
--- /dev/null
+++ b/components/elements/fields/renderDatePicker.js
@@ -0,0 +1,162 @@
+import React from "react";
+import DatePicker from "react-datepicker";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import {
+    addDays,
+    addMonths,
+    addYears,
+    parseISO,
+    subDays,
+    subMonths,
+    subYears
+} from "date-fns";
+import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
+import { getFieldTranslation } from "../helpers/translationHelpers";
+
+export const RenderDatePicker = ({
+    datafieldname,
+    name,
+    label,
+    id,
+    errorMsg,
+    input: { onChange, value },
+    meta: { touched, error },
+    ...custom
+}) => {
+    const router = useRouter();
+    let { t } = useTranslation();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    const translatedLabel = getFieldTranslation({
+        label,
+        locale,
+        appealtypes,
+        fieldLookup
+    });
+
+    function dateFromOffset(offsetStr) {
+        const today = new Date();
+
+        if (!offsetStr || offsetStr === "0") {
+            return today;
+        }
+
+        const match = offsetStr.match(/^([+-])(\d+)([dmy])$/i);
+
+        if (!match) {
+            console.warn("Invalid offset format:", offsetStr);
+            return today;
+        }
+
+        const [, sign, numberStr, unitRaw] = match;
+        const amount = parseInt(numberStr, 10);
+        const unit = unitRaw.toLowerCase();
+        const isNegative = sign === "-";
+
+        switch (unit) {
+            case "y":
+                return isNegative
+                    ? subYears(today, amount)
+                    : addYears(today, amount);
+
+            case "m":
+                return isNegative
+                    ? subMonths(today, amount)
+                    : addMonths(today, amount);
+
+            case "d":
+                return isNegative
+                    ? subDays(today, amount)
+                    : addDays(today, amount);
+
+            default:
+                return today;
+        }
+    }
+
+    const minDate = dateFromOffset(custom.dateStart);
+    const maxDate = dateFromOffset(custom.dateEnd);
+
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <fieldset
+                    className="govuk-fieldset"
+                    role="group"
+                    aria-describedby={id + "_label"}
+                >
+                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
+                        <label
+                            className="govuk-fieldset__heading"
+                            id={id + "_label"}
+                            htmlFor={id}
+                        >
+                            {translatedLabel}
+                        </label>
+                        {custom.hasOwnProperty("hint") && (
+                            <div className="govuk-hint govuk-!-font-size-14">
+                                {t(custom.hint)}
+                            </div>
+                        )}
+                    </legend>
+                    {!custom.hasOwnProperty("showErrorBottom")
+                        ? touched &&
+                          error && (
+                              <span
+                                  id={id + "-error"}
+                                  className="govuk-error-message"
+                              >
+                                  <span className="govuk-visually-hidden">
+                                      Error:
+                                  </span>{" "}
+                                  {errorMsg}
+                              </span>
+                          )
+                        : ""}
+
+                    <DatePicker
+                        {...custom}
+                        locale={router.locale}
+                        autoOk={true}
+                        id={id}
+                        dateFormat="dd/MM/yyyy"
+                        onChange={onChange}
+                        selected={
+                            value
+                                ? typeof value != "object"
+                                    ? parseISO(value)
+                                    : value
+                                : null
+                        }
+                        className="govuk-input govuk-input--width-10"
+                        minDate={minDate}
+                        maxDate={maxDate}
+                        autoComplete="off"
+                    />
+                    {custom.hasOwnProperty("showErrorBottom")
+                        ? touched &&
+                          error && (
+                              <span
+                                  id={id + "-error"}
+                                  className="govuk-error-message"
+                              >
+                                  <span className="govuk-visually-hidden">
+                                      Error:
+                                  </span>{" "}
+                                  {error}
+                              </span>
+                          )
+                        : ""}
+                </fieldset>
+            </div>
+        </>
+    );
+};
diff --git a/components/elements/fields/renderRadio.js b/components/elements/fields/renderRadio.js
new file mode 100644
index 00000000..22aef6b2
--- /dev/null
+++ b/components/elements/fields/renderRadio.js
@@ -0,0 +1,129 @@
+import React from "react";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
+import { Field } from "redux-form";
+import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
+import { getFieldTranslation } from "../helpers/translationHelpers";
+
+export const RenderRadio = ({
+    datafieldname,
+    name,
+    label,
+    id,
+    errorMsg,
+    options,
+    input: { onChange, value },
+    meta: { touched, error },
+    ...custom
+}) => {
+    let { t } = useTranslation();
+    const router = useRouter();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    const translatedLabel = getFieldTranslation({
+        label,
+        locale,
+        appealtypes,
+        fieldLookup
+    });
+
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <fieldset
+                    className="govuk-fieldset"
+                    aria-describedby={id + "_label"}
+                >
+                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
+                        <label
+                            className="govuk-fieldset__heading govuk-body-m"
+                            id={id + "_label"}
+                        >
+                            {translatedLabel}
+                        </label>
+                    </legend>
+                    {touched && error && (
+                        <span
+                            id={id + "-error"}
+                            className="govuk-error-message"
+                        >
+                            <span className="govuk-visually-hidden">
+                                Error:
+                            </span>{" "}
+                            {errorMsg}
+                        </span>
+                    )}
+                    <div
+                        className={
+                            custom.inline == false
+                                ? "govuk-radios govuk-radios--small"
+                                : "govuk-radios govuk-radios--inline govuk-radios--small"
+                        }
+                    >
+                        {" "}
+                        {custom.hint != false && (
+                            <div className="govuk-hint">{t(custom.hint)}</div>
+                        )}
+                        {Object.keys(options).map((key, index) => (
+                            <div
+                                className="govuk-radios__item"
+                                data-children-count={key}
+                                key={key}
+                            >
+                                <Field
+                                    id={id + "_" + index}
+                                    name={id}
+                                    component="input"
+                                    type="radio"
+                                    className="govuk-radios__input"
+                                    value={options[key].split("|")[0]}
+                                    checked={
+                                        typeof value != "undefined" &&
+                                        value ==
+                                            parseInt(options[key].split("|")[0])
+                                            ? true
+                                            : false
+                                    }
+                                    onChange={(e) => {
+                                        let docListObj = custom.documentList;
+                                        if (
+                                            custom.requiredDocumentValue ==
+                                            "Yes"
+                                        ) {
+                                            e.target.value != "846040000"
+                                                ? (docListObj = Object.assign(
+                                                      docListObj,
+                                                      {
+                                                          ["documentCheckList_" +
+                                                          id]:
+                                                              custom.requiredDocumentLabel
+                                                      }
+                                                  ))
+                                                : delete docListObj[
+                                                      "documentCheckList_" + id
+                                                  ];
+                                            custom.setDocumentsList(docListObj);
+                                        }
+                                    }}
+                                />
+                                <label
+                                    className="govuk-label govuk-radios__label"
+                                    htmlFor={id + "_" + index}
+                                >
+                                    {t(options[key].split("|")[1])}
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </fieldset>
+            </div>
+        </>
+    );
+};
diff --git a/components/elements/fields/renderYesNo.js b/components/elements/fields/renderYesNo.js
new file mode 100644
index 00000000..70fd5b58
--- /dev/null
+++ b/components/elements/fields/renderYesNo.js
@@ -0,0 +1,135 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { Field } from "redux-form";
+import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
+import { getFieldTranslation } from "../helpers/translationHelpers";
+
+export const RenderYesNo = ({
+    datafieldname,
+    name,
+    label,
+    id,
+    errorMsg,
+    options,
+    input: { onChange, value },
+    meta: { touched, error },
+    ...custom
+}) => {
+    const router = useRouter();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    const translatedLabel = getFieldTranslation({
+        label,
+        locale,
+        appealtypes,
+        fieldLookup
+    });
+
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <fieldset
+                    className="govuk-fieldset"
+                    aria-describedby={id + "_label"}
+                >
+                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
+                        <label
+                            className="govuk-fieldset__heading govuk-body-m"
+                            id={id + "_label"}
+                        >
+                            {translatedLabel}
+                        </label>
+                    </legend>
+                    {touched && error && (
+                        <span
+                            id={id + "-error"}
+                            className="govuk-error-message"
+                        >
+                            <span className="govuk-visually-hidden">
+                                Error:
+                            </span>{" "}
+                            {errorMsg}
+                        </span>
+                    )}
+                    <div
+                        className={
+                            custom.inline == false
+                                ? "govuk-radios govuk-radios--small"
+                                : "govuk-radios govuk-radios--inline govuk-radios--small"
+                        }
+                    >
+                        {Object.keys(options).map((key, index) => (
+                            <div
+                                className="govuk-radios__item"
+                                data-children-count={key}
+                                key={key}
+                            >
+                                <Field
+                                    id={id + "_" + index}
+                                    name={id}
+                                    component="input"
+                                    type="radio"
+                                    className="govuk-radios__input"
+                                    value={
+                                        options[key] == "Yes" ||
+                                        options[key] == "Ydw"
+                                            ? true
+                                            : false
+                                    }
+                                    checked={
+                                        typeof value != "undefined" &&
+                                        value ==
+                                            (options[key] == "Yes" ||
+                                            options[key] == "Ydw"
+                                                ? "true"
+                                                : "false")
+                                    }
+                                    onChange={(e) => {
+                                        let docListObj = custom.documentList;
+                                        if (
+                                            custom.requiredDocumentValue ==
+                                                "Yes" ||
+                                            custom.requiredDocumentValue ==
+                                                "Ydw" ||
+                                            custom.requiredDocumentValue ==
+                                                "true"
+                                        ) {
+                                            e.target.value == "Ydw" ||
+                                            e.target.value == "Yes" ||
+                                            e.target.value == "true"
+                                                ? (docListObj = Object.assign(
+                                                      docListObj,
+                                                      {
+                                                          ["documentCheckList_" +
+                                                          id]:
+                                                              custom.requiredDocumentLabel
+                                                      }
+                                                  ))
+                                                : delete docListObj[
+                                                      "documentCheckList_" + id
+                                                  ];
+                                            custom.setDocumentsList(docListObj);
+                                        }
+                                    }}
+                                />
+                                <label
+                                    className="govuk-label govuk-radios__label"
+                                    htmlFor={id + "_" + index}
+                                >
+                                    {options[key]}
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </fieldset>
+            </div>
+        </>
+    );
+};
diff --git a/components/elements/index.js b/components/elements/index.js
index bd84bb6d..05fba24f 100644
--- a/components/elements/index.js
+++ b/components/elements/index.js
@@ -6,7 +6,6 @@ import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { useMemo, useState } from "react";
-import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import Dropzone from "react-dropzone";
 import { Field, FieldArray, change } from "redux-form";
@@ -22,15 +21,6 @@ import pickListLookup from "../../data/picklistLookups.json";
 import { bytesToSize, getThumbnailIconByExtension } from "../utils";
 import { setFileCount } from "../../store/appealType/action";
 
-import {
-    addDays,
-    addMonths,
-    addYears,
-    parseISO,
-    subDays,
-    subMonths,
-    subYears
-} from "date-fns";
 import "react-quill-new/dist/quill.snow.css";
 
 import { useStore as store, useSelector } from "react-redux";
@@ -48,6 +38,9 @@ import {
 import { RenderRichMultiline } from "./fields/renderRichMultiline";
 import { RenderTextfield } from "./fields/renderTextfield";
 import { RenderMultiline } from "./fields/renderMultiline";
+import { RenderDatePicker } from "./fields/renderDatePicker";
+import { RenderYesNo } from "./fields/renderYesNo";
+import { RenderRadio } from "./fields/renderRadio";
 
 export function Textfield(props) {
     const {
@@ -450,152 +443,6 @@ export function RichMultiLinefield(props) {
     );
 }
 
-const RenderDatePicker = ({
-    datafieldname,
-    name,
-    label,
-    id,
-    errorMsg,
-    input: { onChange, value },
-    meta: { touched, error },
-    ...custom
-}) => {
-    const router = useRouter();
-
-    let { t } = useTranslation();
-
-    function dateFromOffset(offsetStr) {
-        const today = new Date();
-
-        // "0" means today
-        if (!offsetStr || offsetStr === "0") {
-            return today;
-        }
-
-        // Expect formats like: -5d, +18m, -10y
-        const match = offsetStr.match(/^([+-])(\d+)([dmy])$/i);
-
-        if (!match) {
-            console.warn("Invalid offset format:", offsetStr);
-            return today; // fallback
-        }
-
-        const [, sign, numberStr, unitRaw] = match;
-        const amount = parseInt(numberStr, 10);
-        const unit = unitRaw.toLowerCase();
-        const isNegative = sign === "-";
-
-        switch (unit) {
-            case "y":
-                return isNegative
-                    ? subYears(today, amount)
-                    : addYears(today, amount);
-
-            case "m":
-                return isNegative
-                    ? subMonths(today, amount)
-                    : addMonths(today, amount);
-
-            case "d":
-                return isNegative
-                    ? subDays(today, amount)
-                    : addDays(today, amount);
-
-            default:
-                return today;
-        }
-    }
-    const minDate = dateFromOffset(custom.dateStart);
-    const maxDate = dateFromOffset(custom.dateEnd);
-
-    return (
-        <>
-            <div
-                className={
-                    touched && error
-                        ? "govuk-form-group govuk-form-group--error"
-                        : "govuk-form-group "
-                }
-            >
-                <fieldset
-                    className="govuk-fieldset"
-                    role="group"
-                    aria-describedby={id + "_label"}
-                >
-                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
-                        <label
-                            className="govuk-fieldset__heading"
-                            id={id + "_label"}
-                            htmlFor={id}
-                        >
-                            {FieldsTranslations(label)}
-                        </label>
-                        {custom.hasOwnProperty("hint") && (
-                            <div className="govuk-hint govuk-!-font-size-14">
-                                {t(custom.hint)}
-                            </div>
-                        )}
-                    </legend>
-                    {!custom.hasOwnProperty("showErrorBottom")
-                        ? touched &&
-                          error && (
-                              <span
-                                  id={id + "-error"}
-                                  className="govuk-error-message"
-                              >
-                                  <span className="govuk-visually-hidden">
-                                      Error:
-                                  </span>{" "}
-                                  {errorMsg}
-                              </span>
-                          )
-                        : ""}
-
-                    {/* {value}
-                    <br />
-                    {moment(value).format("DD/MM/YY")}
-                    <br /> */}
-
-                    <DatePicker
-                        {...custom}
-                        locale={router.locale}
-                        autoOk={true}
-                        id={id}
-                        dateFormat="dd/MM/yyyy"
-                        onChange={onChange}
-                        selected={
-                            value
-                                ? typeof value != "object"
-                                    ? parseISO(value)
-                                    : value
-                                : null
-                        } //{parseISO(value) || null}
-                        className="govuk-input govuk-input--width-10"
-                        minDate={minDate}
-                        maxDate={maxDate}
-                        autoComplete="off"
-                        //value={!value ? null : moment(value, "DD/MM/yyyy")}
-                    />
-                    {custom.hasOwnProperty("showErrorBottom")
-                        ? touched &&
-                          error && (
-                              <span
-                                  id={id + "-error"}
-                                  className="govuk-error-message"
-                              >
-                                  <span className="govuk-visually-hidden">
-                                      Error:
-                                  </span>{" "}
-                                  {error}
-                              </span>
-                          )
-                        : ""}
-                </fieldset>
-            </div>
-        </>
-    );
-};
-
 export function DateFieldPicker(props) {
     const {
         name,
@@ -769,127 +616,6 @@ export function DateField(props) {
     );
 }
 
-const RenderYesNo = ({
-    datafieldname,
-    name,
-    label,
-    id,
-    errorMsg,
-    options,
-    input: { onChange, value },
-    meta: { touched, error },
-    ...custom
-}) => {
-    return (
-        <>
-            <div
-                className={
-                    touched && error
-                        ? "govuk-form-group govuk-form-group--error"
-                        : "govuk-form-group "
-                }
-            >
-                <fieldset
-                    className="govuk-fieldset"
-                    aria-describedby={id + "_label"}
-                >
-                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
-                        <label
-                            className="govuk-fieldset__heading govuk-body-m"
-                            id={id + "_label"}
-                        >
-                            {FieldsTranslations(label)}
-                        </label>
-                    </legend>
-                    {touched && error && (
-                        <span
-                            id={id + "-error"}
-                            className="govuk-error-message"
-                        >
-                            <span className="govuk-visually-hidden">
-                                Error:
-                            </span>{" "}
-                            {errorMsg}
-                        </span>
-                    )}
-                    <div
-                        className={
-                            custom.inline == false
-                                ? "govuk-radios govuk-radios--small"
-                                : "govuk-radios govuk-radios--inline govuk-radios--small"
-                        }
-                    >
-                        {Object.keys(options).map((key, index) => (
-                            <div
-                                className="govuk-radios__item"
-                                data-children-count={key}
-                                key={key}
-                            >
-                                <Field
-                                    id={id + "_" + index}
-                                    name={id}
-                                    component="input"
-                                    type="radio"
-                                    className="govuk-radios__input"
-                                    value={
-                                        options[key] == "Yes" ||
-                                        options[key] == "Ydw"
-                                            ? true
-                                            : false
-                                    }
-                                    //checked={value == options[key]}
-
-                                    checked={
-                                        typeof value != "undefined" &&
-                                        value ==
-                                            (options[key] == "Yes" ||
-                                            options[key] == "Ydw"
-                                                ? "true"
-                                                : "false")
-                                    }
-                                    onChange={(e) => {
-                                        let docListObj = custom.documentList;
-                                        if (
-                                            custom.requiredDocumentValue ==
-                                                "Yes" ||
-                                            custom.requiredDocumentValue ==
-                                                "Ydw" ||
-                                            custom.requiredDocumentValue ==
-                                                "true"
-                                        ) {
-                                            e.target.value == "Ydw" ||
-                                            e.target.value == "Yes" ||
-                                            e.target.value == "true"
-                                                ? (docListObj = Object.assign(
-                                                      docListObj,
-                                                      {
-                                                          ["documentCheckList_" +
-                                                          id]:
-                                                              custom.requiredDocumentLabel
-                                                      }
-                                                  ))
-                                                : delete docListObj[
-                                                      "documentCheckList_" + id
-                                                  ];
-                                            custom.setDocumentsList(docListObj);
-                                        }
-                                    }}
-                                />
-                                <label
-                                    className="govuk-label govuk-radios__label"
-                                    htmlFor={id + "_" + index}
-                                >
-                                    {options[key]}
-                                </label>
-                            </div>
-                        ))}
-                    </div>
-                </fieldset>
-            </div>
-        </>
-    );
-};
-
 export function YesNofield(props) {
     const router = useRouter();
     let { t } = useTranslation();
@@ -961,118 +687,6 @@ export function YesNofield(props) {
     );
 }
 
-const RenderRadio = ({
-    datafieldname,
-    name,
-    label,
-    id,
-    errorMsg,
-    options,
-    input: { onChange, value },
-    meta: { touched, error },
-    ...custom
-}) => {
-    let { t } = useTranslation();
-    return (
-        <>
-            <div
-                className={
-                    touched && error
-                        ? "govuk-form-group govuk-form-group--error"
-                        : "govuk-form-group "
-                }
-            >
-                <fieldset
-                    className="govuk-fieldset"
-                    aria-describedby={id + "_label"}
-                >
-                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
-                        <label
-                            className="govuk-fieldset__heading govuk-body-m"
-                            id={id + "_label"}
-                        >
-                            {FieldsTranslations(label)}
-                        </label>
-                    </legend>
-                    {touched && error && (
-                        <span
-                            id={id + "-error"}
-                            className="govuk-error-message"
-                        >
-                            <span className="govuk-visually-hidden">
-                                Error:
-                            </span>{" "}
-                            {errorMsg}
-                        </span>
-                    )}
-                    <div
-                        className={
-                            custom.inline == false
-                                ? "govuk-radios govuk-radios--small"
-                                : "govuk-radios govuk-radios--inline govuk-radios--small"
-                        }
-                    >
-                        {" "}
-                        {custom.hint != false && (
-                            <div className="govuk-hint">{t(custom.hint)}</div>
-                        )}
-                        {Object.keys(options).map((key, index) => (
-                            <div
-                                className="govuk-radios__item"
-                                data-children-count={key}
-                                key={key}
-                            >
-                                <Field
-                                    id={id + "_" + index}
-                                    name={id}
-                                    component="input"
-                                    type="radio"
-                                    className="govuk-radios__input"
-                                    value={options[key].split("|")[0]}
-                                    checked={
-                                        typeof value != "undefined" &&
-                                        value ==
-                                            parseInt(options[key].split("|")[0])
-                                            ? true
-                                            : false
-                                    }
-                                    onChange={(e) => {
-                                        let docListObj = custom.documentList;
-                                        if (
-                                            custom.requiredDocumentValue ==
-                                            "Yes"
-                                        ) {
-                                            e.target.value != "846040000"
-                                                ? (docListObj = Object.assign(
-                                                      docListObj,
-                                                      {
-                                                          ["documentCheckList_" +
-                                                          id]:
-                                                              custom.requiredDocumentLabel
-                                                      }
-                                                  ))
-                                                : delete docListObj[
-                                                      "documentCheckList_" + id
-                                                  ];
-                                            custom.setDocumentsList(docListObj);
-                                        }
-                                    }}
-                                />
-                                <label
-                                    className="govuk-label govuk-radios__label"
-                                    htmlFor={id + "_" + index}
-                                >
-                                    {t(options[key].split("|")[1])}
-                                </label>
-                            </div>
-                        ))}
-                    </div>
-                </fieldset>
-            </div>
-        </>
-    );
-};
-
 export function Radiofield(props) {
     const {
         name,