diff --git a/actions/index.js b/actions/index.js
index 0b32ddd4..574e78e6 100644
--- a/actions/index.js
+++ b/actions/index.js
@@ -30,7 +30,7 @@ export const getBasicSearch = (searchString) => {
         axios
             //.get("https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/incidents?$select=_accountid_value,_customerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title&$filter=contains(title, '" + searchString + "')&$count=true", crmHeaders)
             //.get("https://jsonplaceholder.typicode.com/todos/1",{proxy:{protocol: 'http',host:'lon3.sme.zscloud.net',port: 80}})
-            .get("http://localhost:3000/api/searchresults2", {
+            .get("/api/searchresults2", {
                 httpsAgent: new https.Agent({ rejectUnauthorized: false }),
             })
             .then((res) => res.data)
@@ -45,15 +45,15 @@ export const getFormData = (whichForm) => {
 
     return (
         axios
-            //.get("http://localhost:3000/api/appealforms/pinswg_dns", {
-            //.get("http://localhost:3000/api/appealforms/pinswg_planningobligationappeals106", {
-            //.get("http://localhost:3000/api/appealforms/pinswg_planningconditionss73s79", {
-            //.get("http://localhost:3000/api/appealforms/pinswg_row", {
-            //.get("http://localhost:3000/api/appealforms/pinswg_transportandworkact", {
-            //.get("http://localhost:3000/api/appealforms/pinswg_harbourrevisionorder", {
-            //.get("http://localhost:3000/api/appealforms/pinswg_planningappeals78", {
-            //.get(http://localhost:3000/api/appealforms/pinswg_householderappealhas", {
-            .get("http://localhost:3000/api/appealforms/pinswg_" + whichForm, {
+            //.get("api/appealforms/pinswg_dns", {
+            //.get("api/appealforms/pinswg_planningobligationappeals106", {
+            //.get("api/appealforms/pinswg_planningconditionss73s79", {
+            //.get("api/appealforms/pinswg_row", {
+            //.get("api/appealforms/pinswg_transportandworkact", {
+            //.get("api/appealforms/pinswg_harbourrevisionorder", {
+            //.get("api/appealforms/pinswg_planningappeals78", {
+            //.get(api/appealforms/pinswg_householderappealhas", {
+            .get("/api/appealforms/pinswg_" + whichForm, {
                 httpsAgent: new https.Agent({ rejectUnauthorized: false }),
             })
             .then((res) => res.data)
@@ -67,7 +67,7 @@ export const getAppealsTypes = () => {
     console.log("got to axios: appeal types");
 
     return axios
-        .get("http://localhost:3000/api/lookups/pinswg_appealcasetype", {
+        .get("/api/lookups/pinswg_appealcasetype", {
             httpsAgent: new https.Agent({ rejectUnauthorized: false }),
         })
         .then((res) => res.data)
diff --git a/components/elements/index.js b/components/elements/index.js
index 81b1d5bb..90e47051 100644
--- a/components/elements/index.js
+++ b/components/elements/index.js
@@ -1,4 +1,5 @@
 import useSWR from "swr";
+import { Field, reduxForm } from "redux-form";
 
 export function Textfield(props) {
     const { name, label } = props;
@@ -8,12 +9,12 @@ export function Textfield(props) {
             <label className="govuk-label govuk-label--m " htmlFor="event-name">
                 {props.label}
             </label>
-
-            <input
-                className="govuk-input  govuk-input--width-20"
-                id="event-name"
+            <Field
                 name={props.name}
+                id={props.name}
+                component="input"
                 type="text"
+                className="govuk-input  govuk-input--width-20"
             />
         </div>
     );
@@ -36,13 +37,15 @@ export function MultiLinefield(props) {
                 Do not include personal or financial information, like your
                 National Insurance number or credit card details.
             </div>
-            <textarea
-                className="govuk-textarea"
-                id="more-detail"
-                name="more-detail"
+            <Field
+                name={props.name}
+                id={props.name}
+                component="input"
+                type="text"
                 rows="5"
+                className="govuk-textarea govuk-input--width-20"
                 aria-describedby="more-detail-hint"
-            ></textarea>
+            />
         </div>
     );
 }
@@ -70,18 +73,18 @@ export function DateField(props) {
                         <div className="govuk-form-group">
                             <label
                                 className="govuk-label govuk-date-input__label"
-                                htmlFor="dob-day"
+                                htmlFor={props.name + "-day"}
                             >
                                 Day
                             </label>
-                            <input
-                                className="govuk-input govuk-date-input__input govuk-input--width-2"
-                                id="dob-day"
-                                name="dob-day"
+                            <Field
+                                name={props.name + "-day"}
+                                id={props.name + "-day"}
+                                component="input"
                                 type="text"
-                                autoComplete="bday-day"
                                 pattern="[0-9]*"
                                 inputMode="numeric"
+                                className="govuk-input govuk-date-input__input govuk-input--width-2"
                             />
                         </div>
                     </div>
@@ -89,18 +92,18 @@ export function DateField(props) {
                         <div className="govuk-form-group">
                             <label
                                 className="govuk-label govuk-date-input__label"
-                                htmlFor="dob-month"
+                                htmlFor={props.name + "-month"}
                             >
                                 Month
                             </label>
-                            <input
-                                className="govuk-input govuk-date-input__input govuk-input--width-2"
-                                id="dob-month"
-                                name="dob-month"
+                            <Field
+                                name={props.name + "-month"}
+                                id={props.name + "-month"}
+                                component="input"
                                 type="text"
-                                autoComplete="bday-month"
                                 pattern="[0-9]*"
                                 inputMode="numeric"
+                                className="govuk-input govuk-date-input__input govuk-input--width-2"
                             />
                         </div>
                     </div>
@@ -108,18 +111,18 @@ export function DateField(props) {
                         <div className="govuk-form-group">
                             <label
                                 className="govuk-label govuk-date-input__label"
-                                htmlFor="dob-year"
+                                htmlFor={props.name + "-year"}
                             >
                                 Year
                             </label>
-                            <input
-                                className="govuk-input govuk-date-input__input govuk-input--width-4"
-                                id="dob-year"
-                                name="dob-year"
+                            <Field
+                                name={props.name + "-year"}
+                                id={props.name + "-year"}
+                                component="input"
                                 type="text"
-                                autoComplete="bday-year"
                                 pattern="[0-9]*"
                                 inputMode="numeric"
+                                className="govuk-input govuk-date-input__input govuk-input--width-4"
                             />
                         </div>
                     </div>
@@ -131,7 +134,7 @@ export function DateField(props) {
 
 export function YesNofield(props) {
     const { name, label } = props;
-
+    const yesNo = ["Yes", "No"];
     return (
         <div className="govuk-form-group">
             <fieldset
@@ -145,36 +148,28 @@ export function YesNofield(props) {
                 </legend>
 
                 <div className="govuk-radios govuk-radios--inline">
-                    <div className="govuk-radios__item">
-                        <input
-                            className="govuk-radios__input"
-                            id="changed-name"
-                            name="changed-name"
-                            type="radio"
-                            value="yes"
-                        />
-                        <label
-                            className="govuk-label govuk-radios__label"
-                            htmlFor="changed-name"
+                    {Object.keys(yesNo).map((key, index) => (
+                        <div
+                            className="govuk-radios__item"
+                            data-children-count={key}
+                            key={key}
                         >
-                            Yes
-                        </label>
-                    </div>
-                    <div className="govuk-radios__item">
-                        <input
-                            className="govuk-radios__input"
-                            id="changed-name-2"
-                            name="changed-name"
-                            type="radio"
-                            value="no"
-                        />
-                        <label
-                            className="govuk-label govuk-radios__label"
-                            htmlFor="changed-name-2"
-                        >
-                            No
-                        </label>
-                    </div>
+                            <Field
+                                id={props.name + "_" + index}
+                                name={props.name}
+                                component="input"
+                                type="radio"
+                                className="govuk-radios__input"
+                                value={yesNo[key]}
+                            />
+                            <label
+                                className="govuk-label govuk-radios__label"
+                                htmlFor={props.name + "_" + index}
+                            >
+                                {yesNo[key]}
+                            </label>
+                        </div>
+                    ))}
                 </div>
             </fieldset>
         </div>
@@ -193,7 +188,11 @@ export function PickList(props) {
                 <label className="govuk-label govuk-body-m" htmlFor="sort">
                     {props.label}
                 </label>
-                <select className="govuk-select" id="sort" name="sort">
+                <select
+                    className="govuk-select"
+                    id={props.name}
+                    name={props.name}
+                >
                     <option value="">empty</option>
                 </select>
             </div>
@@ -213,7 +212,7 @@ export function PickList(props) {
             <label className="govuk-label govuk-body-m" htmlFor="sort">
                 {props.label}
             </label>
-            <select className="govuk-select" id="sort" name="sort">
+            <select className="govuk-select" id={props.name} name={props.name}>
                 {Object.keys(dropdownObj).map((key, index) => {
                     return (
                         <option
@@ -247,11 +246,12 @@ export function NumericField(props) {
             <div id="account-number-hint" className="govuk-hint">
                 Must be between 6 and 8 digits long
             </div>
-            <input
-                className="govuk-input govuk-input--width-10"
-                id="account-number"
-                name="account-number"
+            <Field
+                name={props.name}
+                id={props.name}
+                component="input"
                 type="text"
+                className="govuk-input  govuk-input--width-20"
                 spellCheck="false"
                 aria-describedby="account-number-hint"
                 pattern="[0-9]*"
@@ -276,11 +276,12 @@ export function DecimalField(props) {
             <div id="account-number-hint" className="govuk-hint">
                 Must be between 6 and 8 digits long
             </div>
-            <input
-                className="govuk-input govuk-input--width-10"
-                id="account-number"
-                name="account-number"
+            <Field
+                name={props.name}
+                id={props.name}
+                component="input"
                 type="text"
+                className="govuk-input  govuk-input--width-10"
                 spellCheck="false"
                 aria-describedby="account-number-hint"
                 pattern="[0-9]*"
@@ -298,12 +299,12 @@ export function ReadOnlyfield(props) {
             <label className="govuk-label govuk-label--m " htmlFor="event-name">
                 {props.label}
             </label>
-
-            <input
-                className="govuk-input  govuk-input--width-20"
-                id="event-name"
+            <Field
                 name={props.name}
+                id={props.name}
+                component="input"
                 type="text"
+                className="govuk-input  govuk-input--width-20"
                 disabled
             />
         </div>
diff --git a/components/newappeal/buildrow.js b/components/newappeal/buildrow.js
index 1032ce79..3e8469ba 100644
--- a/components/newappeal/buildrow.js
+++ b/components/newappeal/buildrow.js
@@ -10,7 +10,7 @@ export default function BuildRow(props) {
     const router = useRouter();
     const { locale } = router;
 
-    const { rowXML, whichSection, sectionCount } = props;
+    const { rowXML, whichSection, sectionCount, onSubmit } = props;
 
     const parser = new DOMParser();
 
diff --git a/components/newappeal/buildsection.js b/components/newappeal/buildsection.js
index c5676ae6..215edb42 100644
--- a/components/newappeal/buildsection.js
+++ b/components/newappeal/buildsection.js
@@ -4,18 +4,20 @@ import useTranslation from "next-translate/useTranslation";
 import { useState, useEffect } from "react";
 import xpath from "xpath";
 import BuildRow from "./buildrow";
+import { reduxForm, formValueSelector } from "redux-form";
+import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
 
-const BuildSection = (props) => {
-    useEffect(() => {
-        window.scrollTo(0, 0);
-    });
+let BuildSection = (props) => {
+    // useEffect(() => {
+    //     window.scrollTo(0, 0);
+    // });
 
     let { t } = useTranslation();
 
     const router = useRouter();
     const { locale } = router;
 
-    const { formXML, sectionCount } = props;
+    const { formXML, sectionCount, onSubmit, handleSubmit } = props;
     const [currentSection, setCurrentSection] = useState(1);
 
     const parser = new DOMParser();
@@ -36,8 +38,6 @@ const BuildSection = (props) => {
         doc
     );
 
-    console.log(titleList);
-
     const handleParam = (setValue) => (e) => setValue(e.target.value);
 
     const basicSearch = (event) => {
@@ -46,44 +46,49 @@ const BuildSection = (props) => {
         // /searchresults
     };
 
+    const onHandleSubmit = (values) => {
+        setCurrentSection(currentSection + 1);
+    };
+
     return (
         <div className="govuk-grid-row">
             <div className="govuk-grid-column-two-thirds">
                 <h2>{titles[0].value} </h2>
-                <BuildRow
-                    rowXML={rowXML}
-                    whichSection={props.whichSection}
-                    sectionCount={props.sectionCount}
-                />
-                {}
-                <div className="govuk-button-group">
-                    {props.sectionCount != currentSection ? (
-                        <button
-                            className="govuk-button"
-                            data-module="govuk-button"
-                            onClick={() =>
-                                setCurrentSection(currentSection + 1)
-                            }
-                        >
-                            Continue
-                        </button>
-                    ) : (
-                        ""
-                    )}
-                    {currentSection > 1 ? (
-                        <a
-                            className="govuk-link"
-                            href="#"
-                            onClick={() =>
-                                setCurrentSection(currentSection - 1)
-                            }
-                        >
-                            Back
-                        </a>
-                    ) : (
-                        ""
-                    )}
-                </div>
+                <form onSubmit={handleSubmit(onHandleSubmit)}>
+                    <BuildRow
+                        rowXML={rowXML}
+                        whichSection={props.whichSection}
+                        sectionCount={props.sectionCount}
+                        onSubmit={onSubmit}
+                    />
+                    {}
+                    <div className="govuk-button-group">
+                        {props.sectionCount != currentSection ? (
+                            <button
+                                type="submit"
+                                className="govuk-button"
+                                data-module="govuk-button"
+                            >
+                                Continue
+                            </button>
+                        ) : (
+                            ""
+                        )}
+                        {currentSection > 1 ? (
+                            <a
+                                className="govuk-link"
+                                href="#"
+                                onClick={() =>
+                                    setCurrentSection(currentSection - 1)
+                                }
+                            >
+                                Back
+                            </a>
+                        ) : (
+                            ""
+                        )}
+                    </div>
+                </form>
             </div>
             <div className="govuk-grid-column-one-third">
                 <nav
@@ -118,4 +123,18 @@ const BuildSection = (props) => {
     );
 };
 
-export default BuildSection;
+const mapStateToProps = (state) => {
+    return {
+        form: state.form,
+    };
+};
+
+BuildSection = reduxForm({
+    // a unique name for the form
+    form: "sssappealForm",
+    destroyOnUnmount: false,
+})(BuildSection);
+
+const selector = formValueSelector("appealForm"); // <-- same as form name
+
+export default connect(mapStateToProps)(BuildSection);
diff --git a/package.json b/package.json
index fe159760..3a3fbcd5 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "node server.js"
+    "start": "next start -p 80"
   },
   "dependencies": {
     "@webdeb/next-styles": "^1.1.1",
@@ -46,4 +46,4 @@
     "eslint-config-next": "^11.0.1",
     "prettier": "2.3.2"
   }
-}
+}
\ No newline at end of file
diff --git a/pages/api/lookups/pinswg_appointedby..js b/pages/api/lookups/pinswg_appointedby.js
similarity index 100%
rename from pages/api/lookups/pinswg_appointedby..js
rename to pages/api/lookups/pinswg_appointedby.js
diff --git a/pages/newappeal/[appealtypes].js b/pages/newappeal/[appealtypes].js
index d03dd346..cbbb09d6 100644
--- a/pages/newappeal/[appealtypes].js
+++ b/pages/newappeal/[appealtypes].js
@@ -16,10 +16,11 @@ import useTranslation from "next-translate/useTranslation";
 import { setForm, getFormObj } from "../../store/formData/action";
 import { getFormData } from "../../actions";
 import xpath from "xpath";
+import { reduxForm } from "redux-form";
 
 import BuildSection from "../../components/newappeal/buildsection";
 
-const Home = (props) => {
+let Home = (props) => {
     const { footerLinks, pages, formData } = props;
     let { t, lang } = useTranslation();
 
@@ -57,8 +58,6 @@ const Home = (props) => {
     /// to get dropdowns names
     //  form/tabs/tab[*]//rows/row//control[@classid="{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}"]/@datafieldname
 
-    console.log(titles);
-
     const Sections = Object.keys(tabs).map((key, index) => (
         <BuildSection
             formXML={formXML}
@@ -68,6 +67,8 @@ const Home = (props) => {
         />
     ));
 
+    const { onSubmit } = props;
+
     return (
         <div>
             <Head>
@@ -85,6 +86,7 @@ const Home = (props) => {
                     <BuildSection
                         formXML={formXML}
                         sectionCount={sectionCount}
+                        onSubmit={onSubmit}
                     />
                 </div>
                 <Footer footerLinks={footerLinks} />
@@ -133,6 +135,7 @@ const mapStateToProps = (state) => {
         searchResultsObj: state.searchResultsObj,
         formData: state.formData,
         appealType: state.appealType,
+        form: state.form,
     };
 };
 
diff --git a/store/store.js b/store/store.js
index 7649210d..1b4f9023 100644
--- a/store/store.js
+++ b/store/store.js
@@ -16,6 +16,7 @@ const combinedReducer = combineReducers({
     searchResultsObj,
     formData,
     appealType,
+    form: formReducer,
 });
 
 const reducer = (state = { progress: "{}" }, action) => {
@@ -76,7 +77,14 @@ const makeStore = ({ isServer }) => {
 
         const persistConfig = {
             key: "nextjs",
-            whitelist: ["progress,search,searchResults,formData,appealType"],
+            whitelist: [
+                "progress",
+                "search",
+                "searchResults",
+                "formData",
+                "appealType",
+                "form",
+            ],
             storage,
             stateReconciler: autoMergeLevel2, // if needed, use a safer storage
         };