diff --git a/components/breadcrumbs.js b/components/breadcrumbs.js
index 68207f4f..77b5e190 100644
--- a/components/breadcrumbs.js
+++ b/components/breadcrumbs.js
@@ -177,6 +177,26 @@ const Breadcrumbs = (props) => {
                     ) : (
                         ""
                     )}
+                    {router.pathname == "/representation" ? (
+                        <>
+                            <li className="govuk-breadcrumbs__list-item">
+                                <Link href="/myportal">
+                                    <a className="govuk-breadcrumbs__link">
+                                        My Portal
+                                    </a>
+                                </Link>
+                            </li>
+                            <li className="govuk-breadcrumbs__list-item">
+                                Make representation for:{" "}
+                                {
+                                    props.props.currentView.caseReference
+                                        .currentReference
+                                }
+                            </li>
+                        </>
+                    ) : (
+                        ""
+                    )}
                     {router.pathname == "/account/personaldetails" ? (
                         <>
                             <li className="govuk-breadcrumbs__list-item">
diff --git a/components/case.js b/components/case.js
index b2766fb2..4984fd98 100644
--- a/components/case.js
+++ b/components/case.js
@@ -26,6 +26,8 @@ const CaseSummary = (props) => {
                         awaitingSubmission={props.awaitingSubmission}
                         caseReference={props.caseReference}
                         currentType={props.currentType}
+                        searchResultsObj={props.searchResultsObj}
+                        searchString={props.searchString}
                     />
                     <Documents />
                 </div>
diff --git a/components/case/representation/index copy.js b/components/case/representation/index copy.js
new file mode 100644
index 00000000..454e8cda
--- /dev/null
+++ b/components/case/representation/index copy.js	
@@ -0,0 +1,212 @@
+import Link from "next/link";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import jsonpath from "jsonpath";
+import _ from "lodash";
+import { Field, FieldArray, reduxForm, formValueSelector } from "redux-form";
+import { connect } from "react-redux";
+import { useDropzone } from "react-dropzone";
+
+import { setRepresentationCapacity } from "../../../store/currentView/action";
+import RepCapacitySelection from "./representationCapacitySelection";
+import RepDetails from "./representationDetails";
+import RepAppellant from "./representationAppellant";
+import RepAgent from "./representationAgent";
+import RepInterestedPartyPerson from "./representationInterestedPartyPerson";
+import RepLandOwner from "./representationLandowner";
+import {
+    RenderPickList,
+    RenderRadioList,
+    RenderTextfield,
+} from "./representationElements";
+
+let MakeRepresentation = (props) => {
+    let { t } = useTranslation();
+    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
+
+    const [clearRepForm, setClearRepForm] = useState(false);
+
+    const router = useRouter();
+    const { locale } = router;
+    const {
+        caseReference,
+        myCases,
+        myRepresentations,
+        watchedCases,
+        awaitingSubmission,
+        searchResultsObj,
+        currentType,
+        currentView,
+        setRepresentationCapacity,
+    } = props;
+    const formObj = props.props.form;
+    let setCaseQueryObj = props[currentType];
+    var casesObj = {};
+
+    currentType == "searchResultsObj"
+        ? (casesObj = jsonpath.query(
+              setCaseQueryObj,
+              '$..[?(@.title=="' + caseReference + '")]'
+          ))
+        : (casesObj = jsonpath.query(
+              setCaseQueryObj,
+              '$..[?(@.reference=="' + caseReference + '")]'
+          ));
+
+    casesObj = Object.assign({}, ...casesObj);
+
+    const capacityOptionsArr = [
+        "Appellant",
+        "Agent",
+        "Interested Party/Person",
+        "Land Owner",
+    ];
+
+    const appellantApplicantRepresentationArr = [
+        "Other",
+        "Statement",
+        "Statement of common ground",
+        "Written statement of evidence",
+    ];
+
+    const interestedPersonRepresentationArr = [
+        "Interested Party/Person correspondence",
+    ];
+
+    const landOwnerRepresentationArr = [
+        "Other",
+        "Statement",
+        "Written statement of evidence",
+    ];
+
+    const repCapacityType = () => {
+        currentView.representationCapacity == false
+            ? false
+            : _.isEmpty(formObj["representationForm"])
+            ? false
+            : _.isEmpty(formObj["representationForm"].values)
+            ? false
+            : _.isEmpty(
+                  formObj["representationForm"].values.representationCapacity
+              )
+            ? setRepresentationCapacity(false)
+            : setRepresentationCapacity(
+                  formObj["representationForm"].values.representationCapacity
+                      .replace(/[\s\-\+\(\)\,\/]/g, "")
+                      .toLowerCase()
+              );
+
+        return currentView.representationCapacity;
+    };
+
+    const whichControl = () => {
+        repCapacityType();
+        switch (currentView.representationCapacity) {
+            case false:
+                return (
+                    <RepCapacitySelection
+                        formObj={formObj}
+                        capacityOptionsArr={capacityOptionsArr}
+                        currentType={currentType}
+                        casesObj={casesObj}
+                        setRepresentationCapacity={setRepresentationCapacity}
+                    />
+                );
+                break;
+            case "appellant":
+                setRepresentationCapacity("appellant");
+                return (
+                    <RepAppellant
+                        formObj={formObj}
+                        appellantApplicantRepresentationArr={
+                            appellantApplicantRepresentationArr
+                        }
+                        setRepresentationCapacity={setRepresentationCapacity}
+                    />
+                );
+                break;
+            case "agent":
+                setRepresentationCapacity("agent");
+                return (
+                    <RepAgent
+                        formObj={formObj}
+                        appellantApplicantRepresentationArr={
+                            appellantApplicantRepresentationArr
+                        }
+                        setRepresentationCapacity={setRepresentationCapacity}
+                    />
+                );
+                break;
+            case "interestedpartyperson":
+                setRepresentationCapacity("interestedpartyperson");
+                return (
+                    <RepInterestedPartyPerson
+                        formObj={formObj}
+                        interestedPersonRepresentationArr={
+                            interestedPersonRepresentationArr
+                        }
+                        setRepresentationCapacity={setRepresentationCapacity}
+                    />
+                );
+                break;
+            case "landowner":
+                setRepresentationCapacity("landowner");
+                return (
+                    <RepLandOwner
+                        formObj={formObj}
+                        landOwnerRepresentationArr={landOwnerRepresentationArr}
+                        setRepresentationCapacity={setRepresentationCapacity}
+                    />
+                );
+                break;
+            default:
+                return (
+                    <RepCapacitySelection
+                        formObj={formObj}
+                        capacityOptionsArr={capacityOptionsArr}
+                        currentType={currentType}
+                        casesObj={casesObj}
+                        setRepresentationCapacity={setRepresentationCapacity}
+                    />
+                );
+        }
+    };
+
+    return (
+        <div>
+            {whichControl()} - {props.firstValue}
+        </div>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        currentView: state.currentView,
+        //form: state.form,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setRepresentationCapacity: (representationCapacity) => {
+            dispatch(setRepresentationCapacity(representationCapacity));
+        },
+    };
+};
+
+const selector = formValueSelector("representationForm");
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(
+    reduxForm({
+        form: "representationForm",
+        destroyOnUnmount: false,
+    })(MakeRepresentation)
+);
diff --git a/components/case/representation/index.js b/components/case/representation/index.js
new file mode 100644
index 00000000..15f7bd1f
--- /dev/null
+++ b/components/case/representation/index.js
@@ -0,0 +1,299 @@
+import Link from "next/link";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import jsonpath from "jsonpath";
+import _ from "lodash";
+import {
+    Field,
+    FieldArray,
+    reduxForm,
+    formValueSelector,
+    reset,
+} from "redux-form";
+import { connect } from "react-redux";
+import { useDropzone } from "react-dropzone";
+
+import {
+    setRepresentationCapacity,
+    setRepresentationSubmit,
+    setSubmitBack,
+    setRepresentationSubmitConfirmation,
+} from "../../../store/currentView/action";
+import RepCapacitySelection from "./representationCapacitySelection";
+import RepDetails from "./representationDetails";
+import RepAppellant from "./representationAppellant";
+import RepAgent from "./representationAgent";
+import RepInterestedPartyPerson from "./representationInterestedPartyPerson";
+import RepLandOwner from "./representationLandowner";
+import RepCompleteSubmit from "./representationCompleteSubmit";
+
+import {
+    RenderPickList,
+    RenderRadioList,
+    RenderTextfield,
+} from "./representationElements";
+
+let MakeRepresentation = (props) => {
+    let { t } = useTranslation();
+    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
+
+    const [clearRepForm, setClearRepForm] = useState(false);
+
+    const router = useRouter();
+    const { locale } = router;
+    const {
+        caseReference,
+        myCases,
+        myRepresentations,
+        watchedCases,
+        awaitingSubmission,
+        searchResultsObj,
+        currentType,
+        currentView,
+        setRepresentationCapacity,
+        setRepresentationSubmit,
+        setSubmitBack,
+        handleSubmit,
+        setRepresentationSubmitConfirmation,
+    } = props;
+    const formObj = props.props.form;
+    let setCaseQueryObj = props[currentType];
+    var casesObj = {};
+
+    currentType == "searchResultsObj"
+        ? (casesObj = jsonpath.query(
+              setCaseQueryObj,
+              '$..[?(@.title=="' + caseReference + '")]'
+          ))
+        : (casesObj = jsonpath.query(
+              setCaseQueryObj,
+              '$..[?(@.reference=="' + caseReference + '")]'
+          ));
+
+    casesObj = Object.assign({}, ...casesObj);
+
+    const capacityOptionsArr = [
+        "Appellant",
+        "Agent",
+        "Interested Party/Person",
+        "Land Owner",
+    ];
+
+    const appellantApplicantRepresentationArr = [
+        "Other",
+        "Statement",
+        "Statement of common ground",
+        "Written statement of evidence",
+    ];
+
+    const interestedPersonRepresentationArr = [
+        "Interested Party/Person correspondence",
+    ];
+
+    const landOwnerRepresentationArr = [
+        "Other",
+        "Statement",
+        "Written statement of evidence",
+    ];
+
+    const repCapacityType = () => {
+        return _.isEmpty(formObj["representationForm"])
+            ? false
+            : _.isEmpty(formObj["representationForm"].values)
+            ? false
+            : _.isEmpty(
+                  formObj["representationForm"].values.representationCapacity
+              )
+            ? false
+            : formObj["representationForm"].values.representationCapacity
+                  .replace(/[\s\-\+\(\)\,\/]/g, "")
+                  .toLowerCase();
+    };
+
+    const whichControl = () => {
+        switch (currentView.representationCapacity) {
+            case false:
+                return (
+                    <RepCapacitySelection
+                        formObj={formObj}
+                        capacityOptionsArr={capacityOptionsArr}
+                        currentType={currentType}
+                        casesObj={casesObj}
+                        setRepresentationCapacity={setRepresentationCapacity}
+                        setRepresentationSubmit={setRepresentationSubmit}
+                        onHandleSubmit={onHandleSubmit}
+                        currentView={currentView}
+                        setSubmitBack={setSubmitBack}
+                    />
+                );
+                break;
+            case "appellant":
+                //setRepresentationCapacity("appellant");
+                return (
+                    <RepAppellant
+                        formObj={formObj}
+                        appellantApplicantRepresentationArr={
+                            appellantApplicantRepresentationArr
+                        }
+                        setRepresentationCapacity={setRepresentationCapacity}
+                        setRepresentationSubmit={setRepresentationSubmit}
+                        onHandleSubmit={onHandleSubmit}
+                        currentView={currentView}
+                        setSubmitBack={setSubmitBack}
+                    />
+                );
+                break;
+            case "agent":
+                //setRepresentationCapacity("agent");
+                return (
+                    <RepAgent
+                        formObj={formObj}
+                        appellantApplicantRepresentationArr={
+                            appellantApplicantRepresentationArr
+                        }
+                        setRepresentationCapacity={setRepresentationCapacity}
+                        setRepresentationSubmit={setRepresentationSubmit}
+                        onHandleSubmit={onHandleSubmit}
+                        currentView={currentView}
+                        setSubmitBack={setSubmitBack}
+                    />
+                );
+                break;
+            case "interestedpartyperson":
+                // setRepresentationCapacity("interestedpartyperson");
+                return (
+                    <RepInterestedPartyPerson
+                        formObj={formObj}
+                        interestedPersonRepresentationArr={
+                            interestedPersonRepresentationArr
+                        }
+                        setRepresentationCapacity={setRepresentationCapacity}
+                        setRepresentationSubmit={setRepresentationSubmit}
+                        onHandleSubmit={onHandleSubmit}
+                        currentView={currentView}
+                        setSubmitBack={setSubmitBack}
+                    />
+                );
+                break;
+            case "landowner":
+                //setRepresentationCapacity("landowner");
+                return (
+                    <RepLandOwner
+                        formObj={formObj}
+                        landOwnerRepresentationArr={landOwnerRepresentationArr}
+                        setRepresentationCapacity={setRepresentationCapacity}
+                        onHandleSubmit={onHandleSubmit}
+                        setRepresentationSubmit={setRepresentationSubmit}
+                        currentView={currentView}
+                        setSubmitBack={setSubmitBack}
+                    />
+                );
+                break;
+            default:
+                return (
+                    <RepCapacitySelection
+                        formObj={formObj}
+                        capacityOptionsArr={capacityOptionsArr}
+                        currentType={currentType}
+                        casesObj={casesObj}
+                        setRepresentationCapacity={setRepresentationCapacity}
+                        setRepresentationSubmit={setRepresentationSubmit}
+                        currentView={currentView}
+                        setSubmitBack={setSubmitBack}
+                    />
+                );
+        }
+    };
+
+    const onHandleSubmit = (values) => {
+        console.log(
+            values.representationCapacity,
+            currentView.representationCapacity
+        );
+
+        // console.log(_.isEmpty(currentView.representationCapacity));
+        // console.log(
+        //     values.representationCapacity
+        //         .replace(/[\s\-\+\(\)\,\/]/g, "")
+        //         .toLowerCase() == currentView.representationCapacity
+        // );
+
+        _.isEmpty(currentView.representationCapacity)
+            ? setRepresentationCapacity(
+                  values.representationCapacity
+                      .replace(/[\s\-\+\(\)\,\/]/g, "")
+                      .toLowerCase()
+              )
+            : setRepresentationSubmit(true);
+    };
+
+    const repForm = props.props.form;
+
+    return (
+        <div>
+            {repForm["representationForm.submitSucceeded"] == true ? (
+                <RepCompleteSubmit
+                    formObj={formObj}
+                    capacityOptionsArr={capacityOptionsArr}
+                    currentType={currentType}
+                    casesObj={casesObj}
+                    setRepresentationCapacity={setRepresentationCapacity}
+                    setRepresentationSubmit={setRepresentationSubmit}
+                    currentView={currentView}
+                    setSubmitBack={setSubmitBack}
+                    setRepresentationSubmitConfirmation={
+                        setRepresentationSubmitConfirmation
+                    }
+                />
+            ) : (
+                <form onSubmit={handleSubmit(onHandleSubmit)}>
+                    {whichControl()}
+                </form>
+            )}
+
+            {console.log("is submitted", currentView.representationSubmit)}
+        </div>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        currentView: state.currentView,
+        //form: state.form,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setRepresentationCapacity: (representationCapacity) => {
+            dispatch(setRepresentationCapacity(representationCapacity));
+            dispatch(reset("representationForm"));
+        },
+        setRepresentationSubmit: (representationSubmit) => {
+            dispatch(setRepresentationSubmit(representationSubmit));
+        },
+        setSubmitBack: () => {
+            dispatch(setRepresentationSubmit(false));
+        },
+        setRepresentationSubmitConfirmation: () => {
+            dispatch(setRepresentationSubmitConfirmation(true));
+        },
+    };
+};
+
+const selector = formValueSelector("representationForm");
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(
+    reduxForm({
+        form: "representationForm",
+        destroyOnUnmount: false,
+    })(MakeRepresentation)
+);
diff --git a/components/case/representation/representationAgent.js b/components/case/representation/representationAgent.js
new file mode 100644
index 00000000..741448ef
--- /dev/null
+++ b/components/case/representation/representationAgent.js
@@ -0,0 +1,235 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import { Field, reduxForm } from "redux-form";
+import {
+    RenderPickList,
+    RenderTextfield,
+    RenderRadioList,
+    RenderMultiline,
+} from "./representationElements";
+import {
+    setRepresentationCapacity,
+    setRepresentationSubmit,
+} from "../../../store/currentView/action";
+import { useDropzone } from "react-dropzone";
+
+const RepAgent = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const {
+        formObj,
+        appellantApplicantRepresentationArr,
+        setRepresentationCapacity,
+        setRepresentationSubmit,
+        currentView,
+    } = props;
+    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
+    const files = acceptedFiles.map((file) => (
+        <li key={file.path}>
+            {file.path} - {file.size} bytes
+        </li>
+    ));
+
+    return (
+        <div id="rep-appellant">
+            <div className="govuk-grid-column-full">
+                <div className="govuk-grid-row">
+                    <h2 className="govuk-heading-m ">Representation - agent</h2>
+
+                    <div className="govuk-form-group">
+                        <label
+                            className="govuk-label govuk-body-m"
+                            htmlFor="representationType"
+                        >
+                            What kind of representation are you making?
+                        </label>
+                        <Field
+                            name="representationType"
+                            component={RenderPickList}
+                            datafieldname="representationType"
+                            optionsArr={appellantApplicantRepresentationArr}
+                        />
+                    </div>
+                </div>
+                <div className="govuk-grid-row">
+                    <div className="govuk-form-group">
+                        <Field
+                            className="govuk-input govuk-!-width-three-quarters"
+                            id="representationDescription"
+                            name="representationDescription"
+                            value="email"
+                            data-aria-controls="representationDescription"
+                            type="text"
+                            component={RenderTextfield}
+                            label="Description of representation"
+                        />
+                    </div>
+                </div>
+                <div className="govuk-grid-row">
+                    <div className="govuk-form-group">
+                        <p className="govuk-body">
+                            You can enter your comments in the space provided or
+                            attach a separate document.
+                        </p>
+                        <fieldset
+                            className="govuk-fieldset"
+                            aria-describedby="commentBox-hint"
+                        >
+                            <div id="commentBox-hint" className="govuk-hint">
+                                My comments are set out in:*
+                            </div>
+                            <div
+                                className="govuk-checkboxes"
+                                data-module="govuk-checkboxes"
+                            >
+                                <div className="govuk-checkboxes__item">
+                                    <Field
+                                        className="govuk-checkboxes__input"
+                                        id="commentBox"
+                                        name="commentBox"
+                                        value="email"
+                                        data-aria-controls="commentBox"
+                                        type="checkbox"
+                                        component={RenderTextfield}
+                                    />
+                                    <label
+                                        className="govuk-label govuk-checkboxes__label"
+                                        htmlFor="commentBox"
+                                    >
+                                        the box below{" "}
+                                    </label>
+                                </div>
+                                <div
+                                    className={
+                                        _.isEmpty(formObj["representationForm"])
+                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden rr"
+                                            : _.isEmpty(
+                                                  formObj["representationForm"]
+                                                      .values
+                                              )
+                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden q11 "
+                                            : _.isEmpty(
+                                                  formObj["representationForm"]
+                                                      .values.commentBox
+                                              )
+                                            ? formObj["representationForm"]
+                                                  .values.commentBox == false
+                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
+                                                : "govuk-checkboxes__conditional"
+                                            : "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden wwwaqqqq"
+                                    }
+                                    id="conditional-commentBox"
+                                >
+                                    <div className="govuk-form-group">
+                                        <Field
+                                            name="representationComments"
+                                            id="representationComments"
+                                            component={RenderMultiline}
+                                            type="text"
+                                            rows="5"
+                                            className="govuk-textarea govuk-input--width-30"
+                                            aria-describedby={
+                                                props.name + "-hint"
+                                            }
+                                        />
+                                    </div>
+                                </div>
+                                <div className="govuk-checkboxes__item">
+                                    <Field
+                                        className="govuk-checkboxes__input"
+                                        id="documentBox"
+                                        name="documentBox"
+                                        value="email"
+                                        data-aria-controls="documentBox"
+                                        type="checkbox"
+                                        component={RenderTextfield}
+                                    />
+                                    <label
+                                        className="govuk-label govuk-checkboxes__label"
+                                        htmlFor="documentBox"
+                                    >
+                                        separate documents
+                                    </label>
+                                </div>
+                                <div
+                                    className={
+                                        _.isEmpty(formObj["representationForm"])
+                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden rr"
+                                            : _.isEmpty(
+                                                  formObj["representationForm"]
+                                                      .values
+                                              )
+                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
+                                            : _.isEmpty(
+                                                  formObj["representationForm"]
+                                                      .values.documentBox
+                                              )
+                                            ? formObj["representationForm"]
+                                                  .values.documentBox == false
+                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
+                                                : "govuk-checkboxes__conditional"
+                                            : "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden"
+                                    }
+                                    id="conditional-documentBox"
+                                >
+                                    <div className="govuk-form-group">
+                                        <section className="container">
+                                            <div
+                                                {...getRootProps({
+                                                    className: "dropzone",
+                                                })}
+                                            >
+                                                <input {...getInputProps()} />
+                                                <p>
+                                                    Drag and drop files here or
+                                                    click to select files
+                                                </p>
+                                            </div>
+                                            <aside>
+                                                <h4>Files</h4>
+                                                <ul>{files}</ul>
+                                            </aside>
+                                        </section>
+                                    </div>
+                                </div>
+                            </div>
+                        </fieldset>
+                    </div>{" "}
+                </div>
+                <div className="govuk-grid-row">
+                    <div className="govuk-button-group">
+                        <button
+                            type="submit"
+                            className="govuk-button"
+                            data-module="govuk-button"
+                        >
+                            Continue
+                        </button>
+                        {/* <a
+                            onClick={() => {
+                                setRepresentationSubmit(false);
+                            }}
+                            className="govuk-button"
+                        >
+                            Continue
+                        </a> */}
+
+                        <a
+                            onClick={() => {
+                                setRepresentationCapacity("false");
+                            }}
+                            className="govuk-link"
+                        >
+                            Back
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default RepAgent;
diff --git a/components/case/representation/representationAppellant.js b/components/case/representation/representationAppellant.js
new file mode 100644
index 00000000..6e2305f7
--- /dev/null
+++ b/components/case/representation/representationAppellant.js
@@ -0,0 +1,238 @@
+import Link from "next/link";
+import { connect } from "react-redux";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import { Field, reduxForm, reset } from "redux-form";
+import {
+    RenderPickList,
+    RenderTextfield,
+    RenderRadioList,
+    RenderMultiline,
+} from "./representationElements";
+import { useDropzone } from "react-dropzone";
+import {
+    setRepresentationCapacity,
+    setRepresentationSubmit,
+} from "../../../store/currentView/action";
+
+const RepAppellant = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const {
+        formObj,
+        appellantApplicantRepresentationArr,
+        setRepresentationCapacity,
+        setRepresentationSubmit,
+        currentView,
+    } = props;
+    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
+    const files = acceptedFiles.map((file) => (
+        <li key={file.path}>
+            {file.path} - {file.size} bytes
+        </li>
+    ));
+
+    return (
+        <div id="rep-appellant">
+            <div className="govuk-grid-column-full">
+                <div className="govuk-grid-row">
+                    <h2 className="govuk-heading-m ">
+                        Representation - appellantApplicant
+                    </h2>
+
+                    <div className="govuk-form-group">
+                        <label
+                            className="govuk-label govuk-body-m"
+                            htmlFor="representationType"
+                        >
+                            What kind of representation are you making?
+                        </label>
+                        <Field
+                            name="representationType"
+                            component={RenderPickList}
+                            datafieldname="representationType"
+                            optionsArr={appellantApplicantRepresentationArr}
+                        />
+                    </div>
+                </div>
+                <div className="govuk-grid-row">
+                    <div className="govuk-form-group">
+                        <Field
+                            className="govuk-input govuk-!-width-three-quarters"
+                            id="representationDescription"
+                            name="representationDescription"
+                            value="email"
+                            data-aria-controls="representationDescription"
+                            type="text"
+                            component={RenderTextfield}
+                            label="Description of representation"
+                        />
+                    </div>
+                </div>
+                <div className="govuk-grid-row">
+                    <div className="govuk-form-group">
+                        <p className="govuk-body">
+                            You can enter your comments in the space provided or
+                            attach a separate document.
+                        </p>
+                        <fieldset
+                            className="govuk-fieldset"
+                            aria-describedby="commentBox-hint"
+                        >
+                            <div id="commentBox-hint" className="govuk-hint">
+                                My comments are set out in:*
+                            </div>
+                            <div
+                                className="govuk-checkboxes"
+                                data-module="govuk-checkboxes"
+                            >
+                                <div className="govuk-checkboxes__item">
+                                    <Field
+                                        className="govuk-checkboxes__input"
+                                        id="commentBox"
+                                        name="commentBox"
+                                        value="email"
+                                        data-aria-controls="commentBox"
+                                        type="checkbox"
+                                        component={RenderTextfield}
+                                    />
+                                    <label
+                                        className="govuk-label govuk-checkboxes__label"
+                                        htmlFor="commentBox"
+                                    >
+                                        the box below{" "}
+                                    </label>
+                                </div>
+                                <div
+                                    className={
+                                        _.isEmpty(formObj["representationForm"])
+                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden rr"
+                                            : _.isEmpty(
+                                                  formObj["representationForm"]
+                                                      .values
+                                              )
+                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden q11 "
+                                            : _.isEmpty(
+                                                  formObj["representationForm"]
+                                                      .values.commentBox
+                                              )
+                                            ? formObj["representationForm"]
+                                                  .values.commentBox == false
+                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
+                                                : "govuk-checkboxes__conditional"
+                                            : "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden wwwaqqqq"
+                                    }
+                                    id="conditional-commentBox"
+                                >
+                                    <div className="govuk-form-group">
+                                        <Field
+                                            name="representationComments"
+                                            id="representationComments"
+                                            component={RenderMultiline}
+                                            type="text"
+                                            rows="5"
+                                            className="govuk-textarea govuk-input--width-30"
+                                            aria-describedby={
+                                                props.name + "-hint"
+                                            }
+                                        />
+                                    </div>
+                                </div>
+                                <div className="govuk-checkboxes__item">
+                                    <Field
+                                        className="govuk-checkboxes__input"
+                                        id="documentBox"
+                                        name="documentBox"
+                                        value="email"
+                                        data-aria-controls="documentBox"
+                                        type="checkbox"
+                                        component={RenderTextfield}
+                                    />
+                                    <label
+                                        className="govuk-label govuk-checkboxes__label"
+                                        htmlFor="documentBox"
+                                    >
+                                        separate documents
+                                    </label>
+                                </div>
+                                <div
+                                    className={
+                                        _.isEmpty(formObj["representationForm"])
+                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden rr"
+                                            : _.isEmpty(
+                                                  formObj["representationForm"]
+                                                      .values
+                                              )
+                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
+                                            : _.isEmpty(
+                                                  formObj["representationForm"]
+                                                      .values.documentBox
+                                              )
+                                            ? formObj["representationForm"]
+                                                  .values.documentBox == false
+                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
+                                                : "govuk-checkboxes__conditional"
+                                            : "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden"
+                                    }
+                                    id="conditional-documentBox"
+                                >
+                                    <div className="govuk-form-group">
+                                        <section className="container">
+                                            <div
+                                                {...getRootProps({
+                                                    className: "dropzone",
+                                                })}
+                                            >
+                                                <input {...getInputProps()} />
+                                                <p>
+                                                    Drag and drop files here or
+                                                    click to select files
+                                                </p>
+                                            </div>
+                                            <aside>
+                                                <h4>Files</h4>
+                                                <ul>{files}</ul>
+                                            </aside>
+                                        </section>
+                                    </div>
+                                </div>
+                            </div>
+                        </fieldset>
+                    </div>{" "}
+                </div>
+                <div className="govuk-grid-row">
+                    <div className="govuk-button-group">
+                        {currentView.representationCapacity}
+                        <button
+                            type="submit"
+                            className="govuk-button"
+                            data-module="govuk-button"
+                        >
+                            Continue
+                        </button>
+                        {/* <a
+                                onClick={() => {
+                                    setRepresentationSubmit(false);
+                                }}
+                                className="govuk-button"
+                            >
+                                Continue
+                            </a> */}
+                        <a
+                            onClick={() => {
+                                setRepresentationCapacity(false);
+                            }}
+                            className="govuk-link"
+                        >
+                            Back
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default RepAppellant;
diff --git a/components/case/representation/representationCapacitySelection.js b/components/case/representation/representationCapacitySelection.js
new file mode 100644
index 00000000..16ac04d6
--- /dev/null
+++ b/components/case/representation/representationCapacitySelection.js
@@ -0,0 +1,88 @@
+import Link from "next/link";
+import { connect } from "react-redux";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import {
+    Field,
+    reduxForm,
+    formValueSelector,
+    handleSubmit,
+    reset,
+} from "redux-form";
+import {
+    RenderPickList,
+    RenderTextfield,
+    RenderRadioList,
+    RenderMultiline,
+} from "./representationElements";
+import { useDropzone } from "react-dropzone";
+import RepDetails from "./representationDetails";
+import { setRepresentationCapacity } from "../../../store/currentView/action";
+
+let RepCapacitySelection = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const {
+        formObj,
+        capacityOptionsArr,
+        currentType,
+        casesObj,
+        validate,
+        handleSubmit,
+    } = props;
+    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
+    const files = acceptedFiles.map((file) => (
+        <li key={file.path}>
+            {file.path} - {file.size} bytes
+        </li>
+    ));
+
+    const required = (value) => (value ? undefined : "Required");
+
+    return (
+        <>
+            <RepDetails
+                formObj={formObj}
+                currentType={currentType}
+                casesObj={casesObj}
+            />{" "}
+            <div id="rep-details" className="vo_hiddens">
+                <div className="govuk-grid-column-full">
+                    <div className="govuk-grid-row">
+                        <h2 className="govuk-heading-m ">
+                            Your details - {props.firstValue}
+                        </h2>
+                        <Field
+                            name="representationCapacity"
+                            datafieldname="representationCapacity"
+                            label="In what capacity do you wish to make representations on this case?"
+                            options={capacityOptionsArr}
+                            id="representationCapacity"
+                            className="govuk-radios__input"
+                            errorMsg="Select an option"
+                            component={RenderRadioList}
+                            validate={[required]}
+                        />
+                    </div>
+                </div>
+                <div className="govuk-grid-row">
+                    <div className="govuk-grid-column-full">
+                        <div className="govuk-button-group">
+                            <button
+                                type="submit"
+                                className="govuk-button"
+                                data-module="govuk-button"
+                            >
+                                Continue
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default RepCapacitySelection;
diff --git a/components/case/representation/representationComplete.js b/components/case/representation/representationComplete.js
new file mode 100644
index 00000000..b05e74e9
--- /dev/null
+++ b/components/case/representation/representationComplete.js
@@ -0,0 +1,76 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import { Field, reduxForm } from "redux-form";
+import {
+    RenderPickList,
+    RenderTextfield,
+    RenderRadioList,
+    RenderMultiline,
+} from "./representationElements";
+import {
+    setRepresentationCapacity,
+    setRepresentationSubmit,
+    setSubmitBack,
+} from "../../../store/currentView/action";
+import { useDropzone } from "react-dropzone";
+
+const RepComplete = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const {
+        formObj,
+        appellantApplicantRepresentationArr,
+        setRepresentationCapacity,
+        setRepresentationSubmit,
+        currentView,
+        setSubmitBack,
+        setRepresentationSubmitConfirmation,
+    } = props;
+    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
+    const files = acceptedFiles.map((file) => (
+        <li key={file.path}>
+            {file.path} - {file.size} bytes
+        </li>
+    ));
+
+    return (
+        <div id="rep-appellant">
+            <div className="govuk-grid-column-full">
+                <div className="govuk-grid-row">
+                    <h2 className="govuk-heading-m ">
+                        Submission of Representation
+                    </h2>
+                    <p>
+                        Thank you for submitting your representation(s) using
+                        the Appeals Casework Portal.
+                    </p>
+
+                    <p>
+                        Please remember that any supporting documentation needs
+                        to be received by us within the appropriate deadline for
+                        the case. Anything you send to us must be clearly marked
+                        with the case reference number and the site address
+                        (including the postcode, where known).
+                    </p>
+
+                    <p>
+                        You will shortly receive confirmation to the email
+                        address you have provided.
+                    </p>
+                </div>
+                <div className="govuk-grid-row">
+                    <div className="govuk-button-group">
+                        <Link href="/myportal">
+                            <a className="govuk-button">Continue</a>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default RepComplete;
diff --git a/components/case/representation/representationCompleteSubmit.js b/components/case/representation/representationCompleteSubmit.js
new file mode 100644
index 00000000..0cd6acaa
--- /dev/null
+++ b/components/case/representation/representationCompleteSubmit.js
@@ -0,0 +1,122 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import { Field, reduxForm } from "redux-form";
+import {
+    RenderPickList,
+    RenderTextfield,
+    RenderRadioList,
+    RenderMultiline,
+} from "./representationElements";
+import {
+    setRepresentationCapacity,
+    setRepresentationSubmit,
+    setSubmitBack,
+    setRepresentationSubmitConfirmation,
+} from "../../../store/currentView/action";
+import { useDropzone } from "react-dropzone";
+import RepComplete from "./representationComplete";
+
+const RepCompleteSubmit = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const {
+        formObj,
+        appellantApplicantRepresentationArr,
+        setRepresentationCapacity,
+        setRepresentationSubmit,
+        currentView,
+        setSubmitBack,
+        setRepresentationSubmitConfirmation,
+    } = props;
+    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
+    const files = acceptedFiles.map((file) => (
+        <li key={file.path}>
+            {file.path} - {file.size} bytes
+        </li>
+    ));
+
+    return (
+        <>
+            {currentView.representationSubmitConfirmation == true ? (
+                <RepComplete />
+            ) : (
+                <div id="rep-appellant">
+                    <div className="govuk-grid-column-full">
+                        <div className="govuk-grid-row">
+                            <h2 className="govuk-heading-m ">Submit</h2>
+                            <p>
+                                The gathering and subsequent processing of the
+                                personal data supplied by you in this form, is
+                                in accordance with the terms of our registration
+                                under the Data Protection Act 2018.
+                            </p>
+
+                            <p>
+                                The Planning Inspectorate takes its data
+                                protection responsibilities for the information
+                                you provide us with very seriously. To find out
+                                more about how we use and manage your personal
+                                data, please go to our privacy notice.
+                            </p>
+
+                            <p>
+                                I confirm that all sections of this form have
+                                been fully completed and that the details are
+                                correct to the best of my knowledge.
+                            </p>
+
+                            <div className="govuk-form-group">
+                                <label
+                                    className="govuk-label govuk-body-m"
+                                    htmlFor="representationType"
+                                >
+                                    I confirm I have read the above.
+                                </label>
+                                {/* <Field
+                        name="representationType"
+                        component={RenderPickList}
+                        datafieldname="representationType"
+                        optionsArr={appellantApplicantRepresentationArr}
+                    /> */}
+                            </div>
+                        </div>
+                        <div className="govuk-grid-row">
+                            <div className="govuk-button-group">
+                                <button
+                                    type="submit"
+                                    className="govuk-button"
+                                    data-module="govuk-button"
+                                    onClick={() =>
+                                        setRepresentationSubmitConfirmation()
+                                    }
+                                >
+                                    Continue
+                                </button>
+                                {/* <a
+                        onClick={() => {
+                            setRepresentationSubmit(false);
+                        }}
+                        className="govuk-button"
+                    >
+                        Continue
+                    </a> */}
+
+                                <a
+                                    onClick={() => setSubmitBack()}
+                                    className="govuk-link"
+                                >
+                                    Back
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+};
+
+export default RepCompleteSubmit;
diff --git a/components/case/representation/representationDetails.js b/components/case/representation/representationDetails.js
new file mode 100644
index 00000000..1351092b
--- /dev/null
+++ b/components/case/representation/representationDetails.js
@@ -0,0 +1,84 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import { Field, reduxForm } from "redux-form";
+import { RenderPickList, RenderTextfield } from "./representationElements";
+
+const RepDetails = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const { currentType, casesObj } = props;
+
+    return (
+        <>
+            {" "}
+            <div className="govuk-grid-column-full">
+                <div id="rep-sumamry" className="govuk-grid-row">
+                    <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
+                        Make a representation
+                    </h1>
+
+                    <dl className="govuk-summary-list govuk-!-margin-bottom-9">
+                        <div className="govuk-summary-list__row">
+                            <dt className="govuk-summary-list__key">
+                                Appeal Reference
+                            </dt>
+                            <dd className="govuk-summary-list__value">
+                                {currentType == "searchResultsObj"
+                                    ? casesObj.title
+                                    : casesObj.reference}
+                            </dd>
+                        </div>
+                        <div className="govuk-summary-list__row">
+                            <dt className="govuk-summary-list__key">
+                                {t("case:summary-applicant-label")}
+                            </dt>
+                            <dd className="govuk-summary-list__value">
+                                {casesObj.appellantApplicant || ""}
+                            </dd>
+                        </div>
+                        <div className="govuk-summary-list__row">
+                            <dt className="govuk-summary-list__key">
+                                {t("case:summary-agent-label")}
+                            </dt>
+                            <dd className="govuk-summary-list__value">
+                                Mr A Agent
+                            </dd>
+                        </div>
+                        <div className="govuk-summary-list__row">
+                            <dt className="govuk-summary-list__key">
+                                {t("case:summary-site-address-label")}
+                            </dt>
+                            <dd className="govuk-summary-list__value">
+                                {casesObj.address1 || ""}
+                                <br />
+                                {casesObj.town || ""}
+
+                                <br />
+                                {casesObj.postcode || ""}
+                            </dd>
+                        </div>
+                    </dl>
+                </div>
+                <div className="govuk-grid-row">
+                    <p className="govuk-body">
+                        This form enables you to submit comments on a case to
+                        The Planning Inspectorate.{" "}
+                    </p>
+                    <p className="govuk-body">
+                        Please note that comments from interested parties need
+                        to be made within the timetable. This can be found on
+                        the previous &lsquo;Case Summary&lsquo; page. Comments
+                        submitted after this date may be considered invalid and
+                        returned to the sender.
+                    </p>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default RepDetails;
diff --git a/components/case/representation/representationElements.js b/components/case/representation/representationElements.js
new file mode 100644
index 00000000..a4fb778b
--- /dev/null
+++ b/components/case/representation/representationElements.js
@@ -0,0 +1,194 @@
+import { Field, reduxForm } from "redux-form";
+import router from "next/router";
+import React, { useState } from "react";
+
+export const RenderRadioList = ({
+    datafieldname,
+    name,
+    label,
+    id,
+    errorMsg,
+    options,
+    input: { onChange, value },
+    meta: { touched, error },
+    ...custom
+}) => {
+    const required = (value) => (value ? undefined : "Required");
+
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <fieldset
+                    className="govuk-fieldset"
+                    aria-describedby={name + "-hint"}
+                >
+                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
+                        <label
+                            className="govuk-fieldset__heading govuk-body-m"
+                            id={id + "_label"}
+                        >
+                            {label}
+                        </label>
+                    </legend>
+                    {touched && error && (
+                        <span
+                            id={id + "-error"}
+                            className="govuk-error-message"
+                        >
+                            <span className="govuk-visually-hidden">
+                                Error:
+                            </span>{" "}
+                            {errorMsg}
+                        </span>
+                    )}
+                    <div className="govuk-radios 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]}
+                                />
+                                <label
+                                    className="govuk-label govuk-radios__label"
+                                    htmlFor={id + "_" + index}
+                                >
+                                    {options[key]}
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </fieldset>
+            </div>
+        </>
+    );
+};
+
+export const RenderPickList = ({
+    datafieldname,
+    name,
+    label,
+    input,
+    optionsArr,
+    meta: { touched, errorStr },
+}) => {
+    return (
+        <div>
+            <select {...input} className="govuk-select " id={name} name={name}>
+                <option>Select...</option>
+                {Object.keys(optionsArr).map((key, index) => {
+                    return (
+                        <option key={key} value={optionsArr[key]}>
+                            {optionsArr[key]}
+                        </option>
+                    );
+                })}
+            </select>
+
+            {touched && errorStr && <span>{errorStr}</span>}
+        </div>
+    );
+};
+
+export const RenderTextfield = ({
+    id,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    errorMsg,
+    type,
+    className,
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <label className="govuk-label " htmlFor={id} id={id + "_label"}>
+                {label}
+            </label>
+            {touched && error && (
+                <span id={id + "-error"} className="govuk-error-message">
+                    <span className="govuk-visually-hidden">Error:</span>{" "}
+                    {errorMsg}
+                </span>
+            )}
+            <input
+                {...input}
+                className={className}
+                name={name}
+                id={id}
+                type={type}
+            />
+        </>
+    );
+};
+
+export const RenderMultiline = ({
+    id,
+    className,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <textarea
+                {...input}
+                id={id}
+                name={name}
+                rows={rows}
+                className={className}
+            ></textarea>
+        </>
+    );
+};
+
+export function MultiLinefield(props) {
+    const { name, label } = props;
+
+    return (
+        <div className="govuk-form-group">
+            <h1 className="govuk-label-wrapper">
+                <label className="govuk-label" htmlFor={props.name}>
+                    {props.label}
+                </label>
+            </h1>
+            <div
+                id={props.name + "-hint"}
+                className="govuk-hint govuk-!-font-size-14"
+            >
+                Do not include personal or financial information, like your
+                National Insurance number or credit card details.
+            </div>
+
+            <Field
+                name={props.name}
+                id={props.name}
+                component={RenderMultiline}
+                type="text"
+                rows="5"
+                className="govuk-textarea govuk-input--width-30"
+                aria-describedby={props.name + "-hint"}
+            />
+        </div>
+    );
+}
diff --git a/components/case/representation/representationInterestedPartyPerson.js b/components/case/representation/representationInterestedPartyPerson.js
new file mode 100644
index 00000000..d8cd747f
--- /dev/null
+++ b/components/case/representation/representationInterestedPartyPerson.js
@@ -0,0 +1,323 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import { Field, reduxForm } from "redux-form";
+import {
+    RenderPickList,
+    RenderTextfield,
+    RenderRadioList,
+    RenderMultiline,
+} from "./representationElements";
+import { useDropzone } from "react-dropzone";
+
+const RepInterestedPartyPerson = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const {
+        formObj,
+        interestedPersonRepresentationArr,
+        setRepresentationCapacity,
+        setRepresentationSubmit,
+    } = props;
+    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
+    const files = acceptedFiles.map((file) => (
+        <li key={file.path}>
+            {file.path} - {file.size} bytes
+        </li>
+    ));
+    return (
+        <div id="rep-interested">
+            <div className="govuk-grid-column-full">
+                <div className="govuk-grid-row">
+                    <h2 className="govuk-heading-m ">
+                        Representation - interested
+                    </h2>
+
+                    <div className="govuk-form-group">
+                        <label
+                            className="govuk-label govuk-body-m"
+                            htmlFor="representationType"
+                        >
+                            What kind of representation are you making?
+                        </label>
+                        <Field
+                            name="representationType"
+                            component={RenderPickList}
+                            datafieldname="representationType"
+                            optionsArr={interestedPersonRepresentationArr}
+                        />
+                    </div>
+                </div>
+                <div className="govuk-grid-row">
+                    <div className="govuk-form-group">
+                        <Field
+                            className="govuk-input govuk-!-width-three-quarters"
+                            id="representationDescription"
+                            name="representationDescription"
+                            value="email"
+                            data-aria-controls="representationDescription"
+                            type="text"
+                            component={RenderTextfield}
+                            label="Description of representation"
+                        />
+                    </div>
+                    <div className="govuk-grid-row">
+                        <div className="govuk-form-group">
+                            <fieldset
+                                className="govuk-fieldset"
+                                aria-describedby="contact-hint"
+                            >
+                                <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
+                                    <label
+                                        className="govuk-fieldset__heading govuk-body-m"
+                                        id="representationCapacity_label"
+                                    >
+                                        Are you acting on behalf of a company,
+                                        group or organisation?
+                                    </label>
+                                </legend>
+                                <div id="contact-hint" className="govuk-hint">
+                                    e.g. &lsquo;Owners of Numbers 1-5 High
+                                    Street&lsquo;, or &lsquo;Mr and Mrs
+                                    Smith&lsquo; or &lsquo;The executors of Mr
+                                    Evans&lsquo; estate&lsquo;
+                                </div>
+                                <div
+                                    className="govuk-radios govuk-radios--conditional"
+                                    data-module="govuk-radios"
+                                >
+                                    <div className="govuk-radios__item">
+                                        <input
+                                            className="govuk-radios__input"
+                                            id="contact"
+                                            name="contact"
+                                            type="radio"
+                                            value="email"
+                                            data-aria-controls="conditional-contact"
+                                        />
+                                        <label
+                                            className="govuk-label govuk-radios__label"
+                                            htmlFor="contact"
+                                        >
+                                            Yes
+                                        </label>
+                                    </div>
+                                    <div
+                                        className="govuk-radios__conditional govuk-radios__conditional--hidden"
+                                        id="conditional-contact"
+                                    >
+                                        <div className="govuk-form-group">
+                                            <label
+                                                className="govuk-label"
+                                                htmlFor="contact-by-email"
+                                            >
+                                                Enter the name of the
+                                                company/group/organisation *
+                                            </label>
+                                            <input
+                                                className="govuk-input govuk-!-width-one-third"
+                                                id="contact-by-email"
+                                                name="contact-by-email"
+                                                type="email"
+                                                spellCheck="false"
+                                                autoComplete="email"
+                                            />
+                                        </div>
+                                    </div>
+                                    <div className="govuk-radios__item">
+                                        <input
+                                            className="govuk-radios__input"
+                                            id="contact-2"
+                                            name="contact"
+                                            type="radio"
+                                            value="phone"
+                                            data-aria-controls="conditional-contact-2"
+                                        />
+                                        <label
+                                            className="govuk-label govuk-radios__label"
+                                            htmlFor="contact-2"
+                                        >
+                                            No
+                                        </label>
+                                    </div>
+                                </div>
+                            </fieldset>
+                        </div>
+                    </div>
+                    <div className="govuk-grid-row">
+                        <div className="govuk-form-group">
+                            <p className="govuk-body">
+                                You can enter your comments in the space
+                                provided or attach a separate document.
+                            </p>
+                            <fieldset
+                                className="govuk-fieldset"
+                                aria-describedby="commentBox-hint"
+                            >
+                                <div
+                                    id="commentBox-hint"
+                                    className="govuk-hint"
+                                >
+                                    My comments are set out in:*
+                                </div>
+                                <div
+                                    className="govuk-checkboxes"
+                                    data-module="govuk-checkboxes"
+                                >
+                                    <div className="govuk-checkboxes__item">
+                                        <Field
+                                            className="govuk-checkboxes__input"
+                                            id="commentBox"
+                                            name="commentBox"
+                                            value="email"
+                                            data-aria-controls="commentBox"
+                                            type="checkbox"
+                                            component={RenderTextfield}
+                                        />
+                                        <label
+                                            className="govuk-label govuk-checkboxes__label"
+                                            htmlFor="commentBox"
+                                        >
+                                            the box below{" "}
+                                        </label>
+                                    </div>
+                                    <div
+                                        className={
+                                            _.isEmpty(
+                                                formObj["representationForm"]
+                                            )
+                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden rr"
+                                                : _.isEmpty(
+                                                      formObj[
+                                                          "representationForm"
+                                                      ].values
+                                                  )
+                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden q11 "
+                                                : _.isEmpty(
+                                                      formObj[
+                                                          "representationForm"
+                                                      ].values.commentBox
+                                                  )
+                                                ? formObj["representationForm"]
+                                                      .values.commentBox ==
+                                                  false
+                                                    ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
+                                                    : "govuk-checkboxes__conditional"
+                                                : "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden wwwaqqqq"
+                                        }
+                                        id="conditional-commentBox"
+                                    >
+                                        <div className="govuk-form-group">
+                                            <Field
+                                                name="representationComments"
+                                                id="representationComments"
+                                                component={RenderMultiline}
+                                                type="text"
+                                                rows="5"
+                                                className="govuk-textarea govuk-input--width-30"
+                                                aria-describedby={
+                                                    props.name + "-hint"
+                                                }
+                                            />
+                                        </div>
+                                    </div>
+                                    <div className="govuk-checkboxes__item">
+                                        <Field
+                                            className="govuk-checkboxes__input"
+                                            id="documentBox"
+                                            name="documentBox"
+                                            value="email"
+                                            data-aria-controls="documentBox"
+                                            type="checkbox"
+                                            component={RenderTextfield}
+                                        />
+                                        <label
+                                            className="govuk-label govuk-checkboxes__label"
+                                            htmlFor="documentBox"
+                                        >
+                                            separate documents
+                                        </label>
+                                    </div>
+                                    <div
+                                        className={
+                                            _.isEmpty(
+                                                formObj["representationForm"]
+                                            )
+                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden rr"
+                                                : _.isEmpty(
+                                                      formObj[
+                                                          "representationForm"
+                                                      ].values
+                                                  )
+                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
+                                                : _.isEmpty(
+                                                      formObj[
+                                                          "representationForm"
+                                                      ].values.documentBox
+                                                  )
+                                                ? formObj["representationForm"]
+                                                      .values.documentBox ==
+                                                  false
+                                                    ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
+                                                    : "govuk-checkboxes__conditional"
+                                                : "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden"
+                                        }
+                                        id="conditional-documentBox"
+                                    >
+                                        <div className="govuk-form-group">
+                                            <section className="container">
+                                                <div
+                                                    {...getRootProps({
+                                                        className: "dropzone",
+                                                    })}
+                                                >
+                                                    <input
+                                                        {...getInputProps()}
+                                                    />
+                                                    <p>
+                                                        Drag and drop files here
+                                                        or click to select files
+                                                    </p>
+                                                </div>
+                                                <aside>
+                                                    <h4>Files</h4>
+                                                    <ul>{files}</ul>
+                                                </aside>
+                                            </section>
+                                        </div>
+                                    </div>
+                                </div>
+                            </fieldset>
+                        </div>{" "}
+                    </div>
+                    <div className="govuk-grid-row">
+                        <div className="govuk-button-group">
+                            <Link href="/representation">
+                                <a
+                                    onClick={() => {
+                                        setRepresentationSubmit(false);
+                                    }}
+                                    className="govuk-button"
+                                >
+                                    Continue
+                                </a>
+                            </Link>
+                            <a
+                                onClick={() => {
+                                    setRepresentationCapacity(false);
+                                }}
+                                className="govuk-link"
+                            >
+                                Back
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default RepInterestedPartyPerson;
diff --git a/components/case/representation/representationLandowner.js b/components/case/representation/representationLandowner.js
new file mode 100644
index 00000000..247735d7
--- /dev/null
+++ b/components/case/representation/representationLandowner.js
@@ -0,0 +1,230 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import { Field, reduxForm } from "redux-form";
+import {
+    RenderPickList,
+    RenderTextfield,
+    RenderRadioList,
+    RenderMultiline,
+} from "./representationElements";
+import { useDropzone } from "react-dropzone";
+import {
+    setRepresentationCapacity,
+    setRepresentationSubmit,
+} from "../../../store/currentView/action";
+
+const RepLandOwner = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const {
+        formObj,
+        landOwnerRepresentationArr,
+        setRepresentationCapacity,
+        setRepresentationSubmit,
+    } = props;
+    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
+    const files = acceptedFiles.map((file) => (
+        <li key={file.path}>
+            {file.path} - {file.size} bytes
+        </li>
+    ));
+
+    return (
+        <div id="landowner">
+            <div className="govuk-grid-column-full">
+                <div className="govuk-grid-row">
+                    <h2 className="govuk-heading-m ">
+                        Representation - landowner
+                    </h2>
+
+                    <div className="govuk-form-group">
+                        <label
+                            className="govuk-label govuk-body-m"
+                            htmlFor="representationType"
+                        >
+                            What kind of representation are you making?
+                        </label>
+                        <Field
+                            name="representationType"
+                            component={RenderPickList}
+                            datafieldname="representationType"
+                            optionsArr={landOwnerRepresentationArr}
+                        />
+                    </div>
+                </div>
+                <div className="govuk-grid-row">
+                    <div className="govuk-form-group">
+                        <Field
+                            className="govuk-input govuk-!-width-three-quarters"
+                            id="representationDescription"
+                            name="representationDescription"
+                            value="email"
+                            data-aria-controls="representationDescription"
+                            type="text"
+                            component={RenderTextfield}
+                            label="Description of representation"
+                        />
+                    </div>
+                </div>
+                <div className="govuk-grid-row">
+                    <div className="govuk-form-group">
+                        <p className="govuk-body">
+                            You can enter your comments in the space provided or
+                            attach a separate document.
+                        </p>
+                        <fieldset
+                            className="govuk-fieldset"
+                            aria-describedby="commentBox-hint"
+                        >
+                            <div id="commentBox-hint" className="govuk-hint">
+                                My comments are set out in:*
+                            </div>
+                            <div
+                                className="govuk-checkboxes"
+                                data-module="govuk-checkboxes"
+                            >
+                                <div className="govuk-checkboxes__item">
+                                    <Field
+                                        className="govuk-checkboxes__input"
+                                        id="commentBox"
+                                        name="commentBox"
+                                        value="email"
+                                        data-aria-controls="commentBox"
+                                        type="checkbox"
+                                        component={RenderTextfield}
+                                    />
+                                    <label
+                                        className="govuk-label govuk-checkboxes__label"
+                                        htmlFor="commentBox"
+                                    >
+                                        the box below{" "}
+                                    </label>
+                                </div>
+                                <div
+                                    className={
+                                        _.isEmpty(formObj["representationForm"])
+                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden rr"
+                                            : _.isEmpty(
+                                                  formObj["representationForm"]
+                                                      .values
+                                              )
+                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden q11 "
+                                            : _.isEmpty(
+                                                  formObj["representationForm"]
+                                                      .values.commentBox
+                                              )
+                                            ? formObj["representationForm"]
+                                                  .values.commentBox == false
+                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
+                                                : "govuk-checkboxes__conditional"
+                                            : "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden wwwaqqqq"
+                                    }
+                                    id="conditional-commentBox"
+                                >
+                                    <div className="govuk-form-group">
+                                        <Field
+                                            name="representationComments"
+                                            id="representationComments"
+                                            component={RenderMultiline}
+                                            type="text"
+                                            rows="5"
+                                            className="govuk-textarea govuk-input--width-30"
+                                            aria-describedby={
+                                                props.name + "-hint"
+                                            }
+                                        />
+                                    </div>
+                                </div>
+                                <div className="govuk-checkboxes__item">
+                                    <Field
+                                        className="govuk-checkboxes__input"
+                                        id="documentBox"
+                                        name="documentBox"
+                                        value="email"
+                                        data-aria-controls="documentBox"
+                                        type="checkbox"
+                                        component={RenderTextfield}
+                                    />
+                                    <label
+                                        className="govuk-label govuk-checkboxes__label"
+                                        htmlFor="documentBox"
+                                    >
+                                        separate documents
+                                    </label>
+                                </div>
+                                <div
+                                    className={
+                                        _.isEmpty(formObj["representationForm"])
+                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden rr"
+                                            : _.isEmpty(
+                                                  formObj["representationForm"]
+                                                      .values
+                                              )
+                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
+                                            : _.isEmpty(
+                                                  formObj["representationForm"]
+                                                      .values.documentBox
+                                              )
+                                            ? formObj["representationForm"]
+                                                  .values.documentBox == false
+                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
+                                                : "govuk-checkboxes__conditional"
+                                            : "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden"
+                                    }
+                                    id="conditional-documentBox"
+                                >
+                                    <div className="govuk-form-group">
+                                        <section className="container">
+                                            <div
+                                                {...getRootProps({
+                                                    className: "dropzone",
+                                                })}
+                                            >
+                                                <input {...getInputProps()} />
+                                                <p>
+                                                    Drag and drop files here or
+                                                    click to select files
+                                                </p>
+                                            </div>
+                                            <aside>
+                                                <h4>Files</h4>
+                                                <ul>{files}</ul>
+                                            </aside>
+                                        </section>
+                                    </div>
+                                </div>
+                            </div>
+                        </fieldset>
+                    </div>
+                </div>
+                <div className="govuk-grid-row">
+                    <div className="govuk-button-group">
+                        <Link href="/representation">
+                            <a
+                                onClick={() => {
+                                    setRepresentationSubmit(false);
+                                }}
+                                className="govuk-button"
+                            >
+                                Continue
+                            </a>
+                        </Link>
+                        <a
+                            onClick={() => {
+                                setRepresentationCapacity(false);
+                            }}
+                            className="govuk-link"
+                        >
+                            Back
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default RepLandOwner;
diff --git a/components/case/summary.js b/components/case/summary.js
index af12264d..02521be7 100644
--- a/components/case/summary.js
+++ b/components/case/summary.js
@@ -15,15 +15,22 @@ const CaseSummary = (props) => {
         myRepresentations,
         watchedCases,
         awaitingSubmission,
+        searchResultsObj,
         currentType,
     } = props;
 
     let setCaseQueryObj = props[currentType];
+    var casesObj = {};
 
-    var casesObj = jsonpath.query(
-        setCaseQueryObj,
-        '$..[?(@.reference=="' + caseReference + '")]'
-    );
+    currentType == "searchResultsObj"
+        ? (casesObj = jsonpath.query(
+              setCaseQueryObj,
+              '$..[?(@.title=="' + caseReference + '")]'
+          ))
+        : (casesObj = jsonpath.query(
+              setCaseQueryObj,
+              '$..[?(@.reference=="' + caseReference + '")]'
+          ));
 
     casesObj = Object.assign({}, ...casesObj);
 
@@ -32,7 +39,10 @@ const CaseSummary = (props) => {
             <div className="govuk-grid-row">
                 <div className="govuk-grid-column-full">
                     <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
-                        Reference: {casesObj.reference}
+                        Reference:{" "}
+                        {currentType == "searchResultsObj"
+                            ? casesObj.title
+                            : casesObj.reference}
                     </h1>
 
                     <dl className="govuk-summary-list govuk-!-margin-bottom-9">
@@ -41,7 +51,7 @@ const CaseSummary = (props) => {
                                 {t("case:summary-applicant-label")}
                             </dt>
                             <dd className="govuk-summary-list__value">
-                                {casesObj.appellantApplicant}
+                                {casesObj.appellantApplicant || ""}
                             </dd>
                         </div>
                         <div className="govuk-summary-list__row">
@@ -57,12 +67,12 @@ const CaseSummary = (props) => {
                                 {t("case:summary-site-address-label")}
                             </dt>
                             <dd className="govuk-summary-list__value">
-                                {casesObj.address1}
+                                {casesObj.address1 || ""}
                                 <br />
-                                {casesObj.town}
+                                {casesObj.town || ""}
 
                                 <br />
-                                {casesObj.postcode}
+                                {casesObj.postcode || ""}
                             </dd>
                         </div>
                     </dl>
@@ -71,7 +81,7 @@ const CaseSummary = (props) => {
             <div className="govuk-grid-row">
                 <div className="govuk-grid-column-full">
                     <div className="govuk-button-group">
-                        <Link href="/advancedsearch">
+                        <Link href="/representation">
                             <a className="govuk-button">
                                 {t("case:summary-make-representation-label")}
                             </a>
@@ -110,7 +120,7 @@ const CaseSummary = (props) => {
                                             {t("case:summary-lpa-label")}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            {casesObj.lpaname}
+                                            {casesObj.lpaname || ""}
                                         </dd>
                                     </div>
                                     <div className="govuk-summary-list__row">
@@ -120,7 +130,8 @@ const CaseSummary = (props) => {
                                             )}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            {casesObj.caseDetails.caseSummary}
+                                            {casesObj.caseDetails.caseSummary ||
+                                                ""}
                                         </dd>
                                     </div>
                                     <div className="govuk-summary-list__row">
@@ -131,7 +142,8 @@ const CaseSummary = (props) => {
                                         </dt>
                                         <dd className="govuk-summary-list__value">
                                             {" "}
-                                            {casesObj.caseDetails.caseOfficer}
+                                            {casesObj.caseDetails.caseOfficer ||
+                                                ""}
                                         </dd>
                                     </div>
                                     <div className="govuk-summary-list__row">
@@ -139,7 +151,8 @@ const CaseSummary = (props) => {
                                             {t("case:summary-procedure-label")}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            {casesObj.caseDetails.procedure}
+                                            {casesObj.caseDetails.procedure ||
+                                                ""}
                                         </dd>
                                     </div>
                                     <div className="govuk-summary-list__row">
@@ -147,11 +160,9 @@ const CaseSummary = (props) => {
                                             {t("case:summary-status-label")}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            {
-                                                casesObj[
-                                                    "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                ]
-                                            }
+                                            {casesObj[
+                                                "statuscode@OData.Community.Display.V1.FormattedValue"
+                                            ] || ""}
                                         </dd>
                                     </div>
                                     <div className="govuk-summary-list__row">
@@ -159,14 +170,13 @@ const CaseSummary = (props) => {
                                             {t("case:summary-decision-label")}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            {casesObj.caseDetails.decision}
+                                            {casesObj.caseDetails.decision ||
+                                                ""}
                                             <br />
                                             <Link href="/">
                                                 <a>
-                                                    {
-                                                        casesObj.caseDetails
-                                                            .outcome_document
-                                                    }
+                                                    {casesObj.caseDetails
+                                                        .outcome_document || ""}
                                                 </a>
                                             </Link>
                                         </dd>
@@ -178,10 +188,8 @@ const CaseSummary = (props) => {
                                             )}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            {
-                                                casesObj.caseDetails
-                                                    .caseLinkStatus
-                                            }
+                                            {casesObj.caseDetails
+                                                .caseLinkStatus || ""}
                                         </dd>
                                     </div>
                                     <div className="govuk-summary-list__row">
@@ -191,7 +199,8 @@ const CaseSummary = (props) => {
                                             )}
                                         </dt>
                                         <dd className="govuk-summary-list__value">
-                                            {casesObj.caseDetails.linkedCases}
+                                            {casesObj.caseDetails.linkedCases ||
+                                                ""}
                                         </dd>
                                     </div>
                                 </dl>
diff --git a/components/header.js b/components/header.js
index f4fcf1d9..182a9fa1 100644
--- a/components/header.js
+++ b/components/header.js
@@ -9,6 +9,7 @@ const Header = (props) => {
     const router = useRouter();
     const { locale } = router;
     const { setLogout } = props;
+    const noSignoutLink = ["/", "/logout"];
 
     return (
         <header
@@ -98,9 +99,8 @@ const Header = (props) => {
                             </div>
                             <div className="content">
                                 <ul>
-                                    {router.pathname == "/logout" ? (
-                                        ""
-                                    ) : router.pathname == "/" ? (
+                                    {noSignoutLink.includes(router.pathname) ==
+                                    true ? (
                                         ""
                                     ) : (
                                         <li>
@@ -157,8 +157,9 @@ const Header = (props) => {
                         </div>
                     </div>
                     <div className="fullNav">
-                        {router.pathname != "/" ||
-                        router.pathname != "/logout" ? (
+                        {noSignoutLink.includes(router.pathname) == true ? (
+                            ""
+                        ) : (
                             <Link href="/logout">
                                 <a
                                     onClick={() => {
@@ -169,8 +170,6 @@ const Header = (props) => {
                                     {t("common:signout-label")}
                                 </a>
                             </Link>
-                        ) : (
-                            ""
                         )}
 
                         <Link
diff --git a/components/myportal/topthree.js b/components/myportal/topthree.js
index 8fcc98d9..fc4bba22 100644
--- a/components/myportal/topthree.js
+++ b/components/myportal/topthree.js
@@ -20,7 +20,13 @@ const TopThree = (props) => {
                     <div className="cardModuleDetails">
                         <div className="cardModuleReference">
                             <b>Case reference:</b>{" "}
-                            <Link href="/case">
+                            <Link
+                                href={
+                                    topThreeType == "awaitingSubmission"
+                                        ? "/representation"
+                                        : "/case"
+                                }
+                            >
                                 <a
                                     data-id={i}
                                     onClick={() => {
diff --git a/components/myportal/viewall.js b/components/myportal/viewall.js
index a7245150..4455ad35 100644
--- a/components/myportal/viewall.js
+++ b/components/myportal/viewall.js
@@ -1,9 +1,13 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
+import { setCurrentReference } from "../../store/currentView/action";
+import { connect } from "react-redux";
+
+const ViewAllResults = (props) => {
+    const { searchString, searchResultsObj, currentView, setCurrentReference } =
+        props;
 
-export default function ViewAllResults(props) {
-    const { searchString, searchResultsObj, currentView } = props;
     let { t } = useTranslation();
 
     const router = useRouter();
@@ -18,7 +22,15 @@ export default function ViewAllResults(props) {
             <div className="govuk-summary-list__row" key={key}>
                 <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
                     <Link href="/case">
-                        <a>
+                        <a
+                            onClick={() => {
+                                setCurrentReference({
+                                    "currentReference":
+                                        resultsArr[index].reference,
+                                    "currentType": currentView.viewKey,
+                                });
+                            }}
+                        >
                             <span className="results-visually-hidden">
                                 Case Reference:
                             </span>
@@ -102,12 +114,25 @@ export default function ViewAllResults(props) {
             <div className="govuk-grid-row">
                 <div className="govuk-grid-column-full">
                     <div className="govuk-button-group">
-                        <Link href="/myportal">
-                            <a className="govuk-button">Back</a>
-                        </Link>
+                        <a
+                            onClick={() => router.back()}
+                            className="govuk-button"
+                        >
+                            Back
+                        </a>
                     </div>
                 </div>
             </div>
         </>
     );
-}
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentReference: (currentReference) => {
+            dispatch(setCurrentReference(currentReference));
+        },
+    };
+};
+
+export default connect(null, mapDispatchToProps)(ViewAllResults);
diff --git a/components/newappeal/createCase.js b/components/newappeal/createCase.js
index f80c367e..5450063b 100644
--- a/components/newappeal/createCase.js
+++ b/components/newappeal/createCase.js
@@ -157,17 +157,52 @@ let CreateCase = (props) => {
                                       return (
                                           <option
                                               key={key}
-                                              value={optionsObj[
-                                                  key
-                                              ].Label.LocalizedLabels[0].Label.replace(
-                                                  /[\s\-\+\(\)\,]/g,
-                                                  ""
-                                              ).toLowerCase()}
-                                          >
-                                              {
-                                                  optionsObj[key].Label
-                                                      .LocalizedLabels[0].Label
+                                              value={
+                                                  _.isEmpty(
+                                                      optionsObj[key].Label
+                                                  )
+                                                      ? ""
+                                                      : _.isEmpty(
+                                                            optionsObj[key]
+                                                                .Label
+                                                                .LocalizedLabels
+                                                        )
+                                                      ? ""
+                                                      : _.isEmpty(
+                                                            optionsObj[key]
+                                                                .Label
+                                                                .LocalizedLabels[0]
+                                                                .Label
+                                                        )
+                                                      ? ""
+                                                      : optionsObj[
+                                                            key
+                                                        ].Label.LocalizedLabels[0].Label.replace(
+                                                            /[\s\-\+\(\)\,]/g,
+                                                            ""
+                                                        ).toLowerCase()
                                               }
+                                          >
+                                              {_.isEmpty(optionsObj[key])
+                                                  ? ""
+                                                  : _.isEmpty(
+                                                        optionsObj[key].Label
+                                                    )
+                                                  ? ""
+                                                  : _.isEmpty(
+                                                        optionsObj[key].Label
+                                                            .LocalizedLabels
+                                                    )
+                                                  ? ""
+                                                  : _.isEmpty(
+                                                        optionsObj[key].Label
+                                                            .LocalizedLabels[0]
+                                                            .Label
+                                                    )
+                                                  ? ""
+                                                  : optionsObj[key].Label
+                                                        .LocalizedLabels[0]
+                                                        .Label}
                                           </option>
                                       );
                                   })}
diff --git a/components/representation.js b/components/representation.js
new file mode 100644
index 00000000..e202abf4
--- /dev/null
+++ b/components/representation.js
@@ -0,0 +1,38 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useContext } from "react";
+import useTranslation from "next-translate/useTranslation";
+import Summary from "./case/representation";
+
+const CaseSummary = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    return (
+        <main
+            className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
+            id="main-content"
+            role="main"
+        >
+            <div className="govuk-grid-row">
+                <div className="govuk-grid-column-full">
+                    <Summary
+                        myCases={props.myCases}
+                        myRepresentations={props.myRepresentations}
+                        watchedCases={props.watchedCases}
+                        awaitingSubmission={props.awaitingSubmission}
+                        caseReference={props.caseReference}
+                        currentType={props.currentType}
+                        searchResultsObj={props.searchResultsObj}
+                        searchString={props.searchString}
+                        props={props.props}
+                    />
+                </div>
+            </div>
+        </main>
+    );
+};
+
+export default CaseSummary;
diff --git a/components/search/searchresults.js b/components/search/searchresults.js
index 7dcfd6c8..5ace7173 100644
--- a/components/search/searchresults.js
+++ b/components/search/searchresults.js
@@ -1,15 +1,17 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
+import { setCurrentReference } from "../../store/currentView/action";
+import { connect } from "react-redux";
 
-export default function SearchResults(props) {
-    const { searchString, searchResultsObj } = props;
+const SearchResults = (props) => {
+    const { searchString, searchResultsObj, setCurrentReference } = props;
     let { t } = useTranslation();
 
     const router = useRouter();
     const { locale } = router;
 
-    var resultsArr = props.searchResultsObj.searchResultsObj.value || [{}];
+    var resultsArr = searchResultsObj.value || [{}];
     const resultRow = Object.keys(resultsArr).map((key, index) => {
         <div className="govuk-summary-list__row">
             <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
@@ -58,9 +60,7 @@ export default function SearchResults(props) {
                 </h1>
                 <p className="govuk-body">
                     {t("search:searchresults-count-label", {
-                        count: props.searchResultsObj.searchResultsObj[
-                            "@odata.count"
-                        ].toString(),
+                        count: searchResultsObj["@odata.count"].toString(),
                     })}
                     . You searched for <em>&quot;{searchString}&quot;</em>
                 </p>
@@ -91,7 +91,16 @@ export default function SearchResults(props) {
                             <div className="govuk-summary-list__row" key={key}>
                                 <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
                                     <Link href="/case">
-                                        <a>
+                                        <a
+                                            onClick={() => {
+                                                setCurrentReference({
+                                                    "currentReference":
+                                                        item.title,
+                                                    "currentType":
+                                                        "searchResultsObj",
+                                                });
+                                            }}
+                                        >
                                             <span className="results-visually-hidden">
                                                 Case Reference:
                                             </span>
@@ -151,4 +160,14 @@ export default function SearchResults(props) {
             </div>
         </div>
     );
-}
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentReference: (currentReference) => {
+            dispatch(setCurrentReference(currentReference));
+        },
+    };
+};
+
+export default connect(null, mapDispatchToProps)(SearchResults);
diff --git a/components/searchresults.js b/components/searchresults.js
index 69889cca..f55a274d 100644
--- a/components/searchresults.js
+++ b/components/searchresults.js
@@ -22,7 +22,7 @@ export default function Search(props) {
                 <div className="govuk-grid-column-full">
                     <SearchResults
                         searchString={searchString}
-                        searchResultsObj={searchResultsObj}
+                        searchResultsObj={searchResultsObj.searchResultsObj}
                     />
                 </div>
             </div>
diff --git a/i18n.json b/i18n.json
index 3f1e7543..a506b4d8 100644
--- a/i18n.json
+++ b/i18n.json
@@ -29,6 +29,9 @@
       "/case": [
          "case"
       ],
+      "/representation": [
+         "case"
+      ],
       "/newappeal": [
          "newappeal"
       ],
diff --git a/package.json b/package.json
index 15204e88..2445837c 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "react-cookie-consent": "^6.2.4",
     "react-datepicker": "^4.1.1",
     "react-dom": "17.0.2",
+    "react-dropzone": "^11.3.4",
     "react-redux": "^7.2.4",
     "react-xml-parser": "^1.1.8",
     "redux-devtools-extension": "^2.13.9",
@@ -52,4 +53,4 @@
     "eslint-config-next": "^11.0.1",
     "prettier": "2.3.2"
   }
-}
\ No newline at end of file
+}
diff --git a/pages/case.js b/pages/case.js
index 332f8426..fb0a32c4 100644
--- a/pages/case.js
+++ b/pages/case.js
@@ -38,6 +38,9 @@ const Home = (props) => {
                     <Breadcrumbs slug={appealtypes} props={props} />
                     <Case
                         myCases={props.myCases.myCases}
+                        searchResultsObj={
+                            props.searchResultsObj.searchResultsObj
+                        }
                         myRepresentations={
                             props.myRepresentations.myRepresentations
                         }
diff --git a/pages/myportal/index.js b/pages/myportal/index.js
index 55a80b80..9c87b014 100644
--- a/pages/myportal/index.js
+++ b/pages/myportal/index.js
@@ -70,6 +70,11 @@ export const getServerSideProps = wrapper.getServerSideProps(
         async ({ query, req, res }) => {
             //console.log("the query", query);
 
+            res.setHeader(
+                "Cache-Control",
+                "public, s-maxage=604800, stale-while-revalidate"
+            );
+
             const [
                 myCases,
                 myRepresentations,
diff --git a/pages/newappeal/index.js b/pages/newappeal/index.js
index 9363df91..5cb68b62 100644
--- a/pages/newappeal/index.js
+++ b/pages/newappeal/index.js
@@ -75,6 +75,10 @@ const Home = (props) => {
 export const getServerSideProps = wrapper.getServerSideProps(
     (store) =>
         async ({ query, req, res }) => {
+            res.setHeader(
+                "Cache-Control",
+                "public, s-maxage=604800, stale-while-revalidate"
+            );
             const [appealTypeData, lpaData] = await Promise.all([
                 await getAppealsTypes(),
                 await getLPA(),
diff --git a/pages/representation.js b/pages/representation.js
new file mode 100644
index 00000000..4080a662
--- /dev/null
+++ b/pages/representation.js
@@ -0,0 +1,83 @@
+import _ from "lodash";
+import Head from "next/head";
+import Header from "../components/header";
+import Banner from "../components/banner";
+import CookieBanner from "../components/cookieBanner";
+import Breadcrumbs from "../components/breadcrumbs";
+import CaseSummary from "../components/case";
+import Footer from "../components/footer";
+import Errorpage from "../components/errorpage";
+import styles from "../styles/Home.module.css";
+import { useSelector, shallowEqual, connect } from "react-redux";
+import { wrapper } from "../store/store";
+import Cookies from "cookies";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import Case from "../components/representation";
+
+const Home = (props) => {
+    const { footerLinks, pages } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    return (
+        <div>
+            <Head>
+                <title>
+                    {t("case:page-title")} - {t("common:service-name")}
+                </title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName={t("common:service-name")} />
+                <div className="govuk-width-container">
+                    <Banner />
+                    <Breadcrumbs slug={appealtypes} props={props} />
+                    <Case
+                        myCases={props.myCases.myCases}
+                        searchResultsObj={
+                            props.searchResultsObj.searchResultsObj
+                        }
+                        myRepresentations={
+                            props.myRepresentations.myRepresentations
+                        }
+                        watchedCases={props.watchedCases.watchedCases}
+                        awaitingSubmission={
+                            props.awaitingSubmission.awaitingSubmission
+                        }
+                        caseReference={
+                            props.currentView.caseReference.currentReference
+                        }
+                        currentType={
+                            props.currentView.caseReference.currentType
+                        }
+                        props={props}
+                    />
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+const mapStateToProps = (state) => {
+    //console.log(state);
+
+    return {
+        currentView: state.currentView,
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        form: state.form,
+        myCases: state.myCases,
+        watchedCases: state.watchedCases,
+        myRepresentations: state.myRepresentations,
+        awaitingSubmission: state.awaitingSubmission,
+    };
+};
+
+export default connect(mapStateToProps)(Home);
diff --git a/pages/searchresults.js b/pages/searchresults.js
index 5cc583c9..5d3b4082 100644
--- a/pages/searchresults.js
+++ b/pages/searchresults.js
@@ -65,8 +65,16 @@ export const getServerSideProps = wrapper.getServerSideProps(
 
 const mapStateToProps = (state) => {
     return {
+        currentView: state.currentView,
         search: state.search,
         searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        form: state.form,
+        myCases: state.myCases,
+        watchedCases: state.watchedCases,
+        myRepresentations: state.myRepresentations,
+        awaitingSubmission: state.awaitingSubmission,
     };
 };
 
diff --git a/store/currentView/action.js b/store/currentView/action.js
index 2440f7e4..292372d3 100644
--- a/store/currentView/action.js
+++ b/store/currentView/action.js
@@ -2,6 +2,9 @@ export const currentViewActionTypes = {
     GETCURRENTVIEW: "GETCURRENTVIEW",
     SETCURRENTVIEW: "SETCURRENTVIEW",
     SETCURRENTREFERENCE: "SETCURRENTREFERENCE",
+    SETREPRESENTATIONCAPACITY: "SETREPRESENTATIONCAPACITY",
+    SETREPRESENTATIONSUBMIT: "SETREPRESENTATIONSUBMIT",
+    SETREPRESENTATIONSUBMITCONFIRMATION: "SETREPRESENTATIONSUBMITCONFIRMATION",
 };
 
 export const getCurrentViewObj = () => (dispatch) => {
@@ -23,3 +26,33 @@ export const setCurrentReference = (caseReference) => (dispatch) => {
         caseReference: caseReference,
     });
 };
+
+export const setRepresentationCapacity =
+    (representationCapacity) => (dispatch) => {
+        return dispatch({
+            type: currentViewActionTypes.SETREPRESENTATIONCAPACITY,
+            representationCapacity: representationCapacity,
+        });
+    };
+
+export const setRepresentationSubmit = (representationSubmit) => (dispatch) => {
+    return dispatch({
+        type: currentViewActionTypes.SETREPRESENTATIONSUBMIT,
+        representationSubmit: representationSubmit,
+    });
+};
+
+export const setSubmitBack = (representationSubmit) => (dispatch) => {
+    return dispatch({
+        type: currentViewActionTypes.SETREPRESENTATIONSUBMIT,
+        representationSubmit: representationSubmit,
+    });
+};
+
+export const setRepresentationSubmitConfirmation =
+    (representationSubmitConfirmation) => (dispatch) => {
+        return dispatch({
+            type: currentViewActionTypes.SETREPRESENTATIONSUBMITCONFIRMATION,
+            representationSubmitConfirmation: representationSubmitConfirmation,
+        });
+    };
diff --git a/store/currentView/reducer.js b/store/currentView/reducer.js
index f0ccb0fb..683089b6 100644
--- a/store/currentView/reducer.js
+++ b/store/currentView/reducer.js
@@ -3,6 +3,9 @@ import { currentViewActionTypes } from "./action";
 const currentViewInitialState = {
     currentView: {},
     caseReference: {},
+    representationCapacity: {},
+    representationSubmit: null,
+    representationSubmitConfirmation: {},
 };
 
 export default function reducer(state = currentViewInitialState, action) {
@@ -17,6 +20,17 @@ export default function reducer(state = currentViewInitialState, action) {
                 ...state,
                 caseReference: action.caseReference,
             };
+        case currentViewActionTypes.SETREPRESENTATIONCAPACITY:
+            return {
+                ...state,
+                representationCapacity: action.representationCapacity,
+            };
+        case currentViewActionTypes.SETREPRESENTATIONSUBMITCONFIRMATION:
+            return {
+                ...state,
+                representationSubmitConfirmation:
+                    action.representationSubmitConfirmation,
+            };
         default:
             return state;
     }
diff --git a/styles/sass/welshgov/_application.scss b/styles/sass/welshgov/_application.scss
index 896d6074..ba9e4252 100644
--- a/styles/sass/welshgov/_application.scss
+++ b/styles/sass/welshgov/_application.scss
@@ -46,6 +46,10 @@ a {
     }
 }
 
+.govuk-checkboxes__conditional--hidden {
+    display: none;
+}
+
 .govuk-button {
     background-color: $red;
 
@@ -654,3 +658,21 @@ ul#sharePageLinks.active {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eat%3C/title%3E%3Cpath d=%22M9.6,8.2a1.61,1.61,0,0,0-1.3.6,2.11,2.11,0,0,0-.5,1.3,1.75,1.75,0,0,0,.4,1.2,1.46,1.46,0,0,0,1.3.7,1.38,1.38,0,0,0,1.1-.6,2.39,2.39,0,0,0,.5-1.4,2,2,0,0,0-.6-1.5A2.39,2.39,0,0,0,9.6,8.2Z%22 style=%22fill:%23111%22/%3E%3Cpath d=%22M0,0V20H20V0ZM15.4,12.5l-.4.7H11.5l-.2-.6a2.73,2.73,0,0,1-1.9.8h0a2.66,2.66,0,0,1-2.2-1.1A3.46,3.46,0,0,1,7.2,8,2.87,2.87,0,0,1,9.4,7a3.55,3.55,0,0,1,1,.2c.2.1.5.2.6.4V6.8h1.5v5.3h1.6a5.75,5.75,0,0,0,.5-2.6,4,4,0,0,0-1.3-3A4.44,4.44,0,0,0,9.9,5.2,4.76,4.76,0,0,0,6.5,6.6,5.55,5.55,0,0,0,5.3,9.9a4.84,4.84,0,0,0,1.3,3.4A4.48,4.48,0,0,0,10,14.8h.2V16H10a5.62,5.62,0,0,1-4.4-1.9A6.26,6.26,0,0,1,4,9.9,5.91,5.91,0,0,1,9.9,4H10a6.56,6.56,0,0,1,4.4,1.7A5.46,5.46,0,0,1,16,9.5,8,8,0,0,1,15.4,12.5Z%22 style=%22fill:%23111%22/%3E%3C/svg%3E ");
     background-repeat: no-repeat;
 }
+
+//dropzone
+
+.dropzone {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    border-width: 2px;
+    border-radius: 2px;
+    border-color: #eeeeee;
+    border-style: dashed;
+    background-color: #fafafa;
+    color: #bdbdbd;
+    outline: none;
+    transition: border 0.24s ease-in-out;
+}