diff --git a/actions/index.js b/actions/index.js
index e7332cbc..a0a2c446 100644
--- a/actions/index.js
+++ b/actions/index.js
@@ -196,6 +196,12 @@ export const getLPA = () => {
         });
 };
 
+export const createCase = (lpaType, appealType) => {
+    console.log();
+
+    return "CAS-00010-CK1N3S";
+};
+
 // var req = new XMLHttpRequest();
 // req.open("GET", Xrm.Page.context.getClientUrl() + "/api/data/v8.2/incidents?$select=_accountid_value,_customerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title&$filter=contains(title, '000')&$count=true", true);
 // req.setRequestHeader("OData-MaxVersion", "4.0");
diff --git a/components/elements/index.js b/components/elements/index.js
index 01895f95..1b8236e2 100644
--- a/components/elements/index.js
+++ b/components/elements/index.js
@@ -1,5 +1,6 @@
 import useSWR from "swr";
 import { Field, reduxForm } from "redux-form";
+import router from "next/router";
 
 export function Textfield(props) {
     const { name, label } = props;
@@ -293,19 +294,22 @@ export function DecimalField(props) {
     );
 }
 
-export function ReadOnlyfield(props) {
-    const { name, label } = props;
+const RenderCaseID = {};
 
+export function ReadOnlyfield(props) {
+    const { name, label, value } = props;
+    console.log(props.value.refno);
     return (
         <div className="govuk-form-group">
             <label className="govuk-label " htmlFor={props.name}>
                 {props.label}
             </label>
-            <Field
+            <input
+                type="text"
                 name={props.name}
                 id={props.name}
-                component="input"
-                type="text"
+                component={RenderCaseID}
+                value={value}
                 className="govuk-input  govuk-input--width-20"
                 disabled
             />
diff --git a/components/newappeal/buildfield.js b/components/newappeal/buildfield.js
index f201b373..5f62bd98 100644
--- a/components/newappeal/buildfield.js
+++ b/components/newappeal/buildfield.js
@@ -30,6 +30,7 @@ export default function BuildField(props) {
                     <ReadOnlyfield
                         name={props.datafieldname}
                         label={props.label}
+                        value={props.props.props.appealType.caseReference}
                     />
                 );
                 break;
diff --git a/components/newappeal/buildrow.js b/components/newappeal/buildrow.js
index 3e8469ba..5f29f2de 100644
--- a/components/newappeal/buildrow.js
+++ b/components/newappeal/buildrow.js
@@ -31,6 +31,7 @@ export default function BuildRow(props) {
                             label={rows[0].value}
                             datafieldname={datafieldname[0].value}
                             key={key}
+                            props={props}
                         />
                     );
                 })}
diff --git a/components/newappeal/buildsection.js b/components/newappeal/buildsection.js
index 9921672a..e1cda7aa 100644
--- a/components/newappeal/buildsection.js
+++ b/components/newappeal/buildsection.js
@@ -6,7 +6,11 @@ import xpath from "xpath";
 import BuildRow from "./buildrow";
 import { reduxForm, formValueSelector } from "redux-form";
 import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
-import { setCurrentSection } from "../../store/appealType/action";
+import {
+    setCaseReference,
+    setCurrentSection,
+} from "../../store/appealType/action";
+import { query } from "jsonpath";
 
 let BuildSection = (props) => {
     // useEffect(() => {
@@ -25,6 +29,7 @@ let BuildSection = (props) => {
         handleSubmit,
         formTitle,
         setCurrentSection,
+        refno,
     } = props;
 
     const currentSection = props.appealType.currentSection;
@@ -50,8 +55,13 @@ let BuildSection = (props) => {
 
     const onHandleSubmit = (values) => {
         setCurrentSection(currentSection + 1);
+        setCaseReference(router.query.refno);
     };
 
+    // const initialValues = {
+    //     email: router.query.refno,
+    // };
+
     return (
         <div className="govuk-grid-row">
             <div className="govuk-grid-column-two-thirds">
@@ -64,6 +74,7 @@ let BuildSection = (props) => {
                         whichSection={props.whichSection}
                         sectionCount={props.sectionCount}
                         onSubmit={onSubmit}
+                        props={props}
                     />
                     {}
                     <div className="govuk-button-group">
@@ -126,7 +137,9 @@ let BuildSection = (props) => {
                                                 <b>{titleList[key].value}</b>
                                             </li>
                                         ) : (
-                                            <li>{titleList[key].value}</li>
+                                            <li key={key}>
+                                                {titleList[key].value}
+                                            </li>
                                         )
                                     )}
                                 </ol>
diff --git a/components/newappeal/complete.js b/components/newappeal/complete.js
index 58ff65eb..1d6791ad 100644
--- a/components/newappeal/complete.js
+++ b/components/newappeal/complete.js
@@ -60,7 +60,7 @@ let CompleteAppeal = (props) => {
                     <div className="govuk-panel__body">
                         Your reference number
                         <br />
-                        <strong>CAS-00010-J9W6L5</strong>
+                        <strong>{props.appealType.caseReference}</strong>
                     </div>
                 </div>
 
diff --git a/components/newappeal/createCase.js b/components/newappeal/createCase.js
index 06c4436b..2c004a81 100644
--- a/components/newappeal/createCase.js
+++ b/components/newappeal/createCase.js
@@ -15,6 +15,8 @@ import {
     getAppealTypeObj,
 } from "../../store/appealType/action";
 
+import { createCase } from "../../actions";
+
 let CreateCase = (props) => {
     // useEffect(() => {
     //     window.scrollTo(0, 0);
@@ -100,9 +102,18 @@ let CreateCase = (props) => {
 
     const onHandleSubmit = (values) => {
         event.preventDefault();
-        router.replace("/newappeal/" + values.appealTypes, null, {
-            shallow: true,
-        });
+
+        console.log(createCase("asasa", "asasa"));
+
+        const caseReference = createCase("123123", "213132");
+
+        router.replace(
+            "/newappeal/" + values.appealTypes + "?refno=" + caseReference,
+            null,
+            {
+                shallow: true,
+            }
+        );
         console.log(values);
     };
 
diff --git a/pages/newappeal/[appealtypes].js b/pages/newappeal/[appealtypes].js
index 27253c92..ecbc3737 100644
--- a/pages/newappeal/[appealtypes].js
+++ b/pages/newappeal/[appealtypes].js
@@ -19,6 +19,7 @@ import {
     setAppealTypeTitle,
     setAppealTypeID,
     getAppealTypeObj,
+    setCaseReference,
 } from "../../store/appealType/action";
 import { setForm, getFormObj } from "../../store/formData/action";
 import { getFormData, getAppealsTypes } from "../../actions";
@@ -31,10 +32,6 @@ import BuildCheckSection from "../../components/newappeal/buildchecksection";
 import CompleteAppeal from "../../components/newappeal/complete";
 
 let Home = (props) => {
-    useEffect(() => {
-        props.setFormTitle(formTitle);
-    }, []);
-
     const { footerLinks, pages, formData } = props;
     let { t, lang } = useTranslation();
 
@@ -42,6 +39,10 @@ let Home = (props) => {
     const { locale } = router;
     const { appealtypes } = router.query;
 
+    useEffect(() => {
+        props.setFormTitle(formTitle);
+        props.setCaseReference(router.query.refno);
+    }, []);
     const formXML = props.formData.formData;
     const parser = new DOMParser();
     var doc = parser.parseFromString(formXML, "text/xml");
@@ -171,6 +172,9 @@ const mapDispatchToProps = (dispatch) => {
         setFormTitle: (title) => {
             dispatch(setAppealTypeTitle(title));
         },
+        setCaseReference: (refno) => {
+            dispatch(setCaseReference(refno));
+        },
     };
 };
 
diff --git a/store/appealType/action.js b/store/appealType/action.js
index 1e33ddb1..1d84825b 100644
--- a/store/appealType/action.js
+++ b/store/appealType/action.js
@@ -8,6 +8,7 @@ export const appealTypeDataActionTypes = {
     UPDATEAPPEALTYPEDATA: "UPDATEAPPEALTYPEDATA",
     SETCURRENTSECTION: "SETCURRENTSECTION",
     SETAPPEALLPA: "SETAPPEALLPA",
+    SETCASEREFERENCE: "SETCASEREFERENCE",
 };
 
 export const getAppealTypeObj = () => (dispatch) => {
@@ -48,3 +49,10 @@ export const setAppealLPA = (appealLPA) => (dispatch) => {
         appealLPA: appealLPA,
     });
 };
+
+export const setCaseReference = (caseReference) => (dispatch) => {
+    return dispatch({
+        type: appealTypeDataActionTypes.SETCASEREFERENCE,
+        caseReference: caseReference,
+    });
+};
diff --git a/store/appealType/reducer.js b/store/appealType/reducer.js
index 1f9ac3dd..2a20d35b 100644
--- a/store/appealType/reducer.js
+++ b/store/appealType/reducer.js
@@ -6,6 +6,7 @@ const appealTypeDataInitialState = {
     appealTypeID: {},
     currentSection: 1,
     appealLPA: "",
+    caseReference: "",
 };
 
 export default function reducer(state = appealTypeDataInitialState, action) {
@@ -35,7 +36,11 @@ export default function reducer(state = appealTypeDataInitialState, action) {
                 ...state,
                 appealLPA: action.appealLPA,
             };
-
+        case appealTypeDataActionTypes.SETCASEREFERENCE:
+            return {
+                ...state,
+                caseReference: action.caseReference,
+            };
         default:
             return state;
     }